*{box-sizing:border-box}
[hidden]{display:none !important}
:root{--bg:#0b1220;--card:#13203a;--card2:#1a2c4e;--txt:#f1f5f9;--mut:#94a3b8;--acc:#38bdf8;--acc2:#2563eb;--line:#24365e;--gold:#facc15}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;padding-bottom:96px}
.top{padding:20px 16px 8px;display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;max-width:640px;margin:0 auto}
h1{font-size:23px;margin:0}
.sub{color:var(--mut);margin:4px 0 0;font-size:14px}
.chip{background:#1e293b;color:#e2e8f0;border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:13px;white-space:nowrap;max-width:100%}
main{max-width:640px;margin:0 auto;padding:8px 16px}
.tab{display:none}.tab.active{display:block}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin:12px 0}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
h2{font-size:17px;margin:0 0 10px}
h3{font-size:15px;margin:14px 0 6px;color:#bae6fd}
.muted{color:var(--mut)}.center{text-align:center}.small{font-size:12px}
.label{font-size:13px;color:var(--mut);display:block}
.hero{background:linear-gradient(135deg,#0c4a6e,#1d4ed8 60%,#2563eb)}
.big-word{font-size:36px;display:block;margin:6px 0 2px}
.pron{color:#bae6fd;font-size:15px;font-style:italic}
.trad{font-size:22px;color:#facc15;margin:6px 0}
.ejemplo{font-size:15px;line-height:1.5}
.frase-en{font-size:21px;display:block;margin:6px 0}
.pill{background:#bae6fd;color:#082f49;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700}
.progress{background:#0f1b33;border-radius:999px;height:10px;overflow:hidden;margin:12px 0 6px}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:999px}
.racha-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.racha-row strong{font-size:24px;display:block}
.pasos{line-height:1.7;padding-left:20px}
.btn{background:#1e293b;color:var(--txt);border:1px solid var(--line);border-radius:12px;padding:13px 16px;font-size:16px;cursor:pointer}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#082f49;font-weight:700}
.btn.full{width:100%}
.row-btns{display:flex;gap:10px}.row-btns .btn{flex:1}
.lecciones{display:grid;gap:8px}
.leccion-btn{background:var(--card2);border:1px solid var(--line);color:var(--txt);border-radius:12px;padding:14px;text-align:left;font-size:16px;cursor:pointer}
.leccion-btn.active{border-color:var(--acc);background:#0c4a6e}
.vocab{list-style:none;margin:0;padding:0}
.vocab li{display:flex;justify-content:space-between;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line)}
.vocab li:last-child{border-bottom:0}
.vocab b{color:#fff}
.vocab span{color:var(--mut);text-align:right}
.flashcard{background:linear-gradient(135deg,#0c4a6e,#1e3a8a);border:1px solid var(--acc);border-radius:18px;min-height:210px;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;cursor:pointer;margin:12px 0}
.flashcard strong{font-size:34px;display:block;margin:8px 0}
.flashcard .pron{color:#bae6fd;display:block;margin:4px 0 10px}
.flashcard #cardEj{display:block;margin:4px 0 10px}
.flashcard small{display:block;margin-top:14px}
.opciones{display:grid;gap:10px;margin:12px 0}
.opcion{background:var(--card2);border:1px solid var(--line);color:var(--txt);border-radius:12px;padding:14px;text-align:left;font-size:16px;cursor:pointer}
.opcion:disabled{opacity:.75;cursor:default}
.opcion.correcta{border-color:#22c55e;background:#14532d}
.opcion.incorrecta{border-color:#ef4444;background:#450a0a}
.quiz-q{font-size:18px;line-height:1.5}
.feedback{border-radius:12px;padding:14px;margin:12px 0;font-size:15px;line-height:1.5}
.feedback.ok{background:#14532d;border:1px solid #22c55e}
.feedback.no{background:#450a0a;border:1px solid #ef4444}
.bottomnav{position:fixed;left:0;right:0;bottom:0;background:#0f172aee;border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:8px 4px calc(8px + env(safe-area-inset-bottom));z-index:20;backdrop-filter:blur(8px)}
.bottomnav button{background:none;border:0;color:var(--mut);font-size:20px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;padding:4px 10px}
.bottomnav button span{font-size:11px}
.bottomnav button.active{color:var(--acc)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:92px;background:#f1f5f9;color:#0f172a;padding:12px 18px;border-radius:999px;font-weight:600;z-index:40;box-shadow:0 6px 20px #000a;max-width:90%;text-align:center}
input,select{width:100%;background:#0f1b33;border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:12px;font-size:16px}
@media(min-width:700px){body{padding-bottom:40px}.bottomnav{max-width:640px;left:50%;transform:translateX(-50%);border-radius:16px 16px 0 0}}