:root{--bg:#14161f;--panel:#1d2030;--tx:#f4f1ea;--mut:#9aa0b8;--ac:#8b7bff;--ac2:#6d5cf0;--line:#3a3f58}
@media (prefers-color-scheme:light){:root{--bg:#f3f1ea;--panel:#fff;--tx:#1b1d27;--mut:#666b80;--ac:#6d5cf0;--ac2:#5848d8;--line:#c9c6bb}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;padding:0 16px calc(24px + env(safe-area-inset-bottom))}
.top{max-width:900px;margin:0 auto;padding:calc(12px + env(safe-area-inset-top)) 0 8px;display:flex;align-items:center;justify-content:space-between;gap:12px}
h1{margin:0;font-size:22px}
main{max-width:900px;margin:0 auto}
[hidden]{display:none!important}
button,.btn,select{font:inherit;color:var(--tx);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer}
button.primario,.btn.primario{background:var(--ac2);border-color:var(--ac2);color:#fff;font-weight:600}
button.suave{background:transparent}
button.grande{width:100%;padding:15px;font-size:17px;margin-top:10px}
.ayuda{color:var(--mut);font-size:14px;margin:8px 0}.ayuda b{color:var(--tx)}
.modos{display:flex;gap:6px;margin:10px 0}
.modos button{flex:1;padding:10px 4px;font-size:15px}
.modos button.on{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 22%,var(--panel))}
.botones{display:flex;gap:8px;margin:10px 0}
.botones>*{flex:1;text-align:center}
.lista{display:flex;gap:8px;overflow-x:auto;padding:6px 0}
.ft{flex:none;width:96px;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ft img{display:block;width:100%;height:84px;object-fit:cover}
.ft div{display:flex}
.ft button{flex:1;border:0;border-radius:0;padding:6px 0;font-size:14px;background:transparent}
.op{display:flex;align-items:center;gap:10px;padding:8px 2px}
.op input{width:20px;height:20px;accent-color:var(--ac)}
.op select{margin-left:auto;padding:8px}
.que{color:var(--mut);font-size:14px;padding-left:18px}.que b{color:var(--tx)}
.barra{height:10px;background:var(--panel);border-radius:6px;overflow:hidden;margin-top:30px}
.barra i{display:block;height:100%;width:0;background:var(--ac);transition:width .2s}
.visor{max-height:55vh;overflow:auto;background:#000;border-radius:14px;margin-top:10px}
.visor img{display:block;width:100%;height:auto;cursor:zoom-in}
.visor.grande img{width:auto;max-width:none;cursor:zoom-out}