/* Study Hub — shared quiz styles (v2). Each quiz page may override --brand colors. */
:root{
  --bg:#f4f7fb; --card:#ffffff; --ink:#1f2937; --muted:#6b7280;
  --brand:#4f46e5; --brand-soft:#eef2ff; --brand-hi:#c7d2fe; --brand-ink:var(--brand);
  --good:#16a34a; --good-soft:#dcfce7; --bad:#dc2626; --bad-soft:#fee2e2; --line:#e5e7eb;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
     font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:18px;line-height:1.45}
.wrap{max-width:720px;margin:0 auto;padding:20px 16px 48px}
.qhead{text-align:center;margin-bottom:16px}
.qhead .backline{text-align:left;margin:0 0 6px}
.qhead .backline a{color:var(--brand-ink);text-decoration:none;font-weight:600}
.qhead .emoji{font-size:2rem}
.qhead h1{margin:6px 0 2px;font-size:1.7rem}
.qhead p{margin:0;color:var(--muted);font-size:.95rem}
.card{background:var(--card);border-radius:16px;box-shadow:0 2px 10px rgba(0,0,0,.06);padding:22px}
.hidden{display:none !important}
.muted{color:var(--muted)}
.note{color:var(--muted);font-size:.95rem}
label.name{display:block;font-weight:600;margin-bottom:6px}
input[type=text]{background:var(--card);color:var(--ink);width:100%;font-size:1.1rem;padding:12px;border:2px solid var(--line);border-radius:10px}
input[type=text]:focus{outline:none;border-color:var(--brand)}
.btn{font-size:1.05rem;font-weight:600;border:0;border-radius:12px;padding:12px 20px;cursor:pointer;
     text-decoration:none;display:inline-block}
.btn-primary{background:var(--brand);color:#fff}
.btn-ghost{background:var(--brand-soft);color:var(--brand-ink)}
.btn-finish{background:#16a34a;color:#fff}
.btn:disabled{opacity:.4;cursor:not-allowed}
.row{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-top:18px;flex-wrap:wrap}
.row.end{justify-content:flex-end}
.row.center{justify-content:center}
.progress{height:10px;background:var(--line);border-radius:99px;overflow:hidden;margin-bottom:8px}
.progress > div{height:100%;background:var(--brand);width:0;transition:width .25s}
.count{color:var(--muted);font-size:.9rem;margin-bottom:14px}
.q{font-size:1.2rem;font-weight:700;margin:0 0 14px}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);
     border:2px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;
     font-size:1.05rem;cursor:pointer;color:var(--ink);font-family:inherit}
.opt:hover{border-color:var(--brand-hi)}
.opt.sel{border-color:var(--brand);background:var(--brand-soft)}
.mark{flex:0 0 32px;height:32px;border-radius:50%;display:grid;place-items:center;
      background:var(--brand-soft);color:var(--brand-ink);font-weight:700}
.opt.sel .mark{background:var(--brand);color:#fff}
.dots{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px;justify-content:center}
.dot{width:30px;height:30px;border-radius:8px;border:2px solid var(--line);background:var(--card);
     font-size:.8rem;font-weight:600;cursor:pointer;color:var(--muted)}
.dot.done{background:var(--brand-soft);border-color:var(--brand-hi);color:var(--brand-ink)}
.dot.cur{border-color:var(--brand)}
.score{text-align:center}
.big{font-size:3.2rem;font-weight:800;margin:4px 0}
.msg{font-size:1.2rem;margin-bottom:6px}
.trend{font-weight:700;margin-top:2px}
.trend.up{color:var(--good)}
.trend.down{color:#b45309}
.stamp{color:var(--muted);font-size:.85rem;margin-top:4px}
.review h3{margin:22px 0 10px}
.item{border:2px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.item.right{border-color:#bbf7d0;background:#f0fdf4}
.item.wrong{border-color:#fecaca;background:#fef2f2}
.item .qq{font-weight:700;margin-bottom:6px}
.tag{display:inline-block;font-size:.8rem;font-weight:700;padding:2px 8px;border-radius:99px;margin-bottom:6px}
.tag.right{background:var(--good-soft);color:var(--good)}
.tag.wrong{background:var(--bad-soft);color:var(--bad)}
.why{color:#374151;font-size:.95rem;margin-top:6px}
.tips{background:#fffbeb;border:2px solid #fde68a;border-radius:12px;padding:12px 14px;margin:14px 0 4px;font-size:.95rem}
.tips b{color:#92400e}
.tips ul{margin:6px 0 0;padding-left:20px}

/* Score history */
.hist{border:2px solid var(--line);border-radius:14px;padding:12px 14px;margin:14px 0 4px}
.hist-title{font-weight:800;margin-bottom:8px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tile{background:var(--brand-soft);border-radius:10px;padding:8px 4px;text-align:center}
.tv{font-size:1.3rem;font-weight:800;color:var(--brand-ink)}
.tl{font-size:.72rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.bars{display:flex;gap:6px;align-items:flex-end;margin-top:12px;height:130px}
.bar-col{flex:0 0 calc((100% - 54px) / 10);display:flex;flex-direction:column;align-items:center;height:100%;min-width:0}
.bar-val{font-size:.7rem;font-weight:700;color:var(--muted)}
.bar-track{flex:1;width:100%;max-width:34px;display:flex;align-items:flex-end;background:#f3f4f6;border-radius:6px;overflow:hidden}
.bar-fill{width:100%;border-radius:6px 6px 0 0}
.bar-fill.g{background:#22c55e}
.bar-fill.y{background:#f59e0b}
.bar-fill.r{background:#ef4444}
.bar-date{font-size:.65rem;color:var(--muted);margin-top:3px;white-space:nowrap}
.tricky{margin-top:12px;font-size:.92rem}
.tricky ol{margin:4px 0 0;padding-left:20px}
@media (max-width:480px){ body{font-size:17px} .big{font-size:2.6rem} .tv{font-size:1.1rem} }

/* Theme toggle button */
.theme-btn{position:fixed;top:12px;right:12px;z-index:50;width:44px;height:44px;border-radius:50%;
  border:2px solid var(--line);background:var(--card);font-size:1.3rem;line-height:1;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.12);display:grid;place-items:center;padding:0}
.theme-btn:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* Dark mode (overrides each quiz page's own brand colors too) */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f172a; --card:#1e293b; --ink:#e2e8f0; --muted:#94a3b8; --line:#334155;
  --brand-soft:color-mix(in srgb, var(--brand) 28%, #1e293b);
  --brand-hi:color-mix(in srgb, var(--brand) 60%, #1e293b);
  --brand-ink:color-mix(in srgb, var(--brand) 50%, #ffffff);
  --good:#4ade80; --good-soft:#14532d; --bad:#f87171; --bad-soft:#450a0a;
}
:root[data-theme="dark"] .card{box-shadow:0 0 0 1px var(--line)}
:root[data-theme="dark"] .item.right{background:#052e16;border-color:#166534}
:root[data-theme="dark"] .item.wrong{background:#2a0a0a;border-color:#7f1d1d}
:root[data-theme="dark"] .why{color:#cbd5e1}
:root[data-theme="dark"] .tips{background:#292110;border-color:#a16207}
:root[data-theme="dark"] .tips b{color:#fcd34d}
:root[data-theme="dark"] .bar-track{background:#0f172a}
:root[data-theme="dark"] .trend.down{color:#fbbf24}
/* Practice map (Map Skills quiz) */
:root[data-theme="dark"] .map{background:var(--card);border-color:var(--line)}
:root[data-theme="dark"] .ocean{fill:#1e3a5f}
:root[data-theme="dark"] .land{fill:#14532d;stroke:#22c55e}
:root[data-theme="dark"] .rim{stroke:#94a3b8}
:root[data-theme="dark"] .line0{stroke:#93c5fd}
:root[data-theme="dark"] .deg{fill:#93c5fd}
:root[data-theme="dark"] .cont{fill:#bbf7d0;stroke:#0f2a1a}
:root[data-theme="dark"] .pole{fill:#94a3b8}
:root[data-theme="dark"] .lb rect{fill:#0f172a;stroke:#e2e8f0}
:root[data-theme="dark"] .lb text{fill:#e2e8f0}
:root[data-theme="dark"] .lb.hl rect{fill:#fde047;stroke:#f59e0b}
:root[data-theme="dark"] .lb.hl text{fill:#1f2937}
:root[data-theme="dark"] .hs{fill:#e2e8f0;stroke:#1e3a5f}
:root[data-theme="dark"] .arrow,
:root[data-theme="dark"] .scale{stroke:#e2e8f0}
:root[data-theme="dark"] .stxt,
:root[data-theme="dark"] .rose text{fill:#e2e8f0}
:root[data-theme="dark"] .rose polygon{fill:#e2e8f0}