:root{
  --bg:#0f172a; --card:#1e293b; --card2:#273449;
  --txt:#e2e8f0; --muted:#94a3b8;
  --accent:#22c55e; --accentd:#16a34a;
  --bad:#ef4444; --good:#22c55e; --line:#334155;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--txt);
  min-height:100vh; -webkit-tap-highlight-color:transparent;
  padding-bottom:env(safe-area-inset-bottom);
}
.topbar{
  position:sticky; top:0; z-index:10;
  background:var(--bg); padding:14px 16px calc(14px) ;
  padding-top:calc(14px + env(safe-area-inset-top));
  border-bottom:1px solid var(--line);
  text-align:center;
}
.topbar h1{margin:0; font-size:22px}
.topbar .sub{color:var(--muted); font-size:12px}
main{max-width:560px; margin:0 auto; padding:16px}
.screen{display:none; animation:fade .2s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.card{background:var(--card); border-radius:16px; padding:20px; box-shadow:0 4px 18px rgba(0,0,0,.25)}
.card.center{text-align:center}
h2{margin:0 0 16px; font-size:19px}
.btn{
  display:block; width:100%; margin:10px 0; padding:15px;
  font-size:16px; font-weight:600; border:none; border-radius:12px;
  background:var(--card2); color:var(--txt); cursor:pointer;
}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--accent); color:#04210f}
.btn.big{padding:22px; font-size:20px; line-height:1.3}
.btn.big small{display:block; font-weight:600; font-size:13px; opacity:.8; margin-top:4px}
.btn.primary:disabled{opacity:.4}
.btn.ghost{background:transparent; color:var(--muted); box-shadow:none}
.disclaimer{color:var(--muted); font-size:12px; line-height:1.5; margin-top:18px; text-align:center}

/* chips de tamaño */
.chiprow{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.chiplabel{color:var(--muted); font-size:13px; margin-right:4px}
.chip{padding:8px 16px; border-radius:99px; border:2px solid var(--line); background:var(--card2);
  color:var(--txt); font-weight:700; font-size:15px; cursor:pointer}
.chip.active{border-color:var(--accent); color:var(--accent)}

/* caja de estadísticas */
.statbox{background:var(--card); border-radius:14px; padding:14px 18px; margin-top:14px}
.statline{display:flex; justify-content:space-between; font-size:14px; color:var(--muted); padding:3px 0}
.statline b{color:var(--txt)}

/* temas */
.btn.topic{display:flex; justify-content:space-between; align-items:center; text-align:left}
.tcount{color:var(--muted); font-size:12px; font-weight:500}
.qcat{background:var(--card2); color:var(--muted); padding:2px 10px; border-radius:99px; font-size:12px}
.qcat.danger{background:rgba(239,68,68,.2); color:#fca5a5}
.hint{color:var(--muted); font-size:12px; margin:6px 2px 0; line-height:1.4}
.sep{border:none; border-top:1px solid var(--line); margin:18px 0}
.ver{text-align:center; color:var(--muted); font-size:11px; opacity:.6; margin-top:10px}
.swipehint{text-align:center; color:var(--muted); font-size:12px; opacity:.7; margin:0 0 12px}
#notes{will-change:transform}
#notes.settle{transition:transform .24s ease, opacity .24s ease}

.progress{height:8px; background:var(--card); border-radius:99px; overflow:hidden; margin-bottom:10px}
#progressBar{height:100%; width:0; background:var(--accent); transition:width .25s}
.quizmeta{display:flex; justify-content:space-between; font-size:13px; color:var(--muted); margin-bottom:10px}
.fails{color:var(--bad); font-weight:600}
.qimg{text-align:center; margin:0 0 16px}
.qimg svg{width:130px; height:130px; background:#fff; border-radius:12px; padding:8px; box-shadow:0 2px 10px rgba(0,0,0,.25)}
.qtext{font-size:18px; font-weight:600; line-height:1.45; margin:0 0 16px}
.options{display:flex; flex-direction:column; gap:10px}
.opt{
  text-align:left; padding:14px; border-radius:12px; border:2px solid var(--line);
  background:var(--card2); color:var(--txt); font-size:15px; cursor:pointer; line-height:1.4;
}
.opt:active{transform:scale(.99)}
.opt.correct{border-color:var(--good); background:rgba(34,197,94,.15)}
.opt.wrong{border-color:var(--bad); background:rgba(239,68,68,.15)}
.opt.disabled{pointer-events:none; opacity:.85}
.explain{display:none; margin-top:16px; padding:14px; border-radius:12px;
  background:rgba(34,197,94,.08); border-left:3px solid var(--accent);
  font-size:14px; line-height:1.5; color:#cbd5e1}
.explain.show{display:block}

.bigicon{font-size:64px; margin-bottom:8px}
.score{font-size:38px; font-weight:800; margin:6px 0}
.pass{color:var(--good)} .fail{color:var(--bad)}

/* apuntes */
.note{background:var(--card); border-radius:14px; padding:16px 18px; margin-bottom:14px}
.note h3{margin:0 0 8px; font-size:17px; color:var(--accent)}
.note ul{margin:0; padding-left:18px} .note li{margin:6px 0; line-height:1.5; font-size:15px}