/* ---------------- theme tokens ----------------
   Dark is the default; [data-theme="light"] flips every token. */
:root{
  color-scheme:dark;
  --bg:#0d1117; --panel:#161b22; --panel2:#1c2330; --line:#2b3444;
  --fg:#e6edf3; --fg-strong:#ffffff; --muted:#9aa7b6;
  --accent:#4f9cf9; --accent-contrast:#04121f;
  --accent2:#3fb950; --warn:#d29922; --bad:#f85149;
  --code-bg:#0b0f14; --row-alt:#121820; --solution-bg:#0f1620;
  --radius:12px;
}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f6f8fa; --panel:#ffffff; --panel2:#eef2f6; --line:#d8dee4;
  --fg:#1f2328; --fg-strong:#111418; --muted:#59636e;
  --accent:#0b62d6; --accent-contrast:#ffffff;
  --accent2:#1a7f37; --warn:#9a6700; --bad:#cf222e;
  --code-bg:#eff1f3; --row-alt:#f7f9fb; --solution-bg:#f4faf6;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased;
  transition:background .2s ease,color .2s ease;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.3; margin:0 0 .4em}
.en{color:var(--muted)}
.muted{color:var(--muted); font-size:.92rem}
.eyebrow{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600}
code{background:var(--code-bg); border:1px solid var(--line); border-radius:5px; padding:.05em .35em; font-size:.9em}
pre{background:var(--code-bg); border:1px solid var(--line); border-radius:8px; padding:12px; overflow:auto}

/* theme toggle */
.theme-toggle{
  position:fixed; top:14px; right:14px; z-index:50;
  background:var(--panel); color:var(--fg); border:1px solid var(--line);
  border-radius:99px; padding:7px 14px; font:inherit; font-size:.85rem; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.theme-toggle:hover{border-color:var(--accent)}

.hero{max-width:1080px; margin:0 auto; padding:56px 20px 28px}
.hero h1{font-size:2.3rem; margin:.35em 0}
.hero h1 .en{display:block; font-size:1.15rem; margin-top:.5em; font-weight:400}
.lead{font-size:1.06rem; color:var(--fg-strong); max-width:760px}
.stats{display:flex; flex-wrap:wrap; gap:14px; margin:26px 0}
.stats div{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:12px 18px; min-width:120px}
.stats strong{display:block; font-size:1.7rem; color:var(--accent)}
.stats span{font-size:.82rem; color:var(--muted)}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px}

.btn{display:inline-block; background:var(--accent); color:var(--accent-contrast); font-weight:650; padding:9px 16px; border-radius:9px; border:1px solid transparent}
.btn:hover{text-decoration:none; filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--fg); border-color:var(--line)}
.btn.big{padding:12px 22px; font-size:1rem}

main{max-width:1080px; margin:0 auto; padding:12px 20px 60px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:14px; margin:18px 0 34px}
.card{display:block; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; color:var(--fg)}
.card:hover{border-color:var(--accent); text-decoration:none; transform:translateY(-1px)}
.card .num{font-weight:700; color:var(--accent); font-size:.85rem; letter-spacing:.08em}
.card .t{display:block; font-weight:650; margin:.25em 0 .15em}
.card .e{display:block; color:var(--muted); font-size:.88rem}
.card .m{display:block; color:var(--muted); font-size:.78rem; margin-top:.5em}

.chapter-nav{display:flex; align-items:center; gap:16px; max-width:1080px; margin:0 auto; padding:16px 20px; border-bottom:1px solid var(--line)}
.chapter-nav .spacer{flex:1}
.chapter-head{max-width:1080px; margin:0 auto; padding:26px 20px 6px}
.chapter-head h1{font-size:1.9rem; margin:.2em 0 .1em}
.chapter-head h2{font-size:1.15rem; font-weight:500; margin:0 0 .8em}
.chapter-head .meta{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.exam-map{max-width:1080px; margin:14px auto 0; padding:14px 18px; background:var(--panel); border-left:3px solid var(--accent); border-radius:8px}
.exam-map p{margin:.35em 0}
.chapter-body{max-width:1080px; margin:0 auto; padding:10px 20px 40px}
.chapter-body section{margin:26px 0; padding-top:6px}
.chapter-body section>h3{border-bottom:1px solid var(--line); padding-bottom:6px; margin-bottom:12px}
.body p{margin:.7em 0}
.body ul{margin:.6em 0 .8em 1.1em; padding-left:1em}
.body li{margin:.3em 0}
.body blockquote{margin:.8em 0; padding:.6em 1em; border-left:3px solid var(--line); background:var(--panel); color:var(--fg-strong)}
.body strong{color:var(--fg-strong)}
.table-wrap{overflow-x:auto; margin:.9em 0}
table{border-collapse:collapse; width:100%; font-size:.92rem}
th,td{border:1px solid var(--line); padding:7px 10px; text-align:left; vertical-align:top}
th{background:var(--panel2); font-weight:650}
tbody tr:nth-child(even){background:var(--row-alt)}
ul.formula{list-style:none; padding:0}
ul.formula li{background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:10px 14px; margin:.5em 0}
.countries{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px}
.country{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 14px}
.country h4{margin:0 0 .3em; color:var(--accent)}

/* ---------------- quiz ---------------- */
.q{margin:0 0 16px; padding:14px 16px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius)}
.q-head{display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:.78rem; color:var(--muted); margin-bottom:8px}
.q-stem{font-weight:600; margin:0 0 10px}
.q-stem .en{display:block; font-weight:400; font-size:.95rem; margin-top:4px}
.opts{display:grid; gap:8px}
.opt{display:flex; gap:10px; align-items:flex-start; background:var(--panel2); border:1px solid var(--line); color:var(--fg); border-radius:9px; padding:9px 13px; font:inherit; cursor:pointer}
.opt:hover{border-color:var(--accent)}
.opt input{margin-top:.35em; accent-color:var(--accent); flex:none}
.opt .en{display:block; color:var(--muted); font-size:.9rem}
.opt.correct{border-color:var(--accent2); background:rgba(63,185,80,.12)}
.opt.wrong{border-color:var(--bad); background:rgba(248,81,73,.12)}
.opt.locked{cursor:default}
.opt.picked{border-color:var(--accent); background:rgba(79,156,249,.12)}
.solution{margin-top:10px; padding:10px 13px; background:var(--solution-bg); border-left:3px solid var(--accent2); border-radius:8px; font-size:.93rem}
.solution .en{display:block; color:var(--muted); margin-top:5px}
.solution[hidden]{display:none}
.check{margin-top:10px; background:var(--accent); color:var(--accent-contrast); border:none; border-radius:8px; padding:7px 16px; font:inherit; font-weight:600; cursor:pointer}
.check[disabled]{opacity:.45; cursor:not-allowed}
.reset-quiz{background:transparent; color:var(--fg); border:1px solid var(--line); border-radius:8px; padding:7px 16px; font:inherit; cursor:pointer}
.progress{display:flex; gap:12px; align-items:center; margin:16px 0; color:var(--muted); font-size:.9rem}
.bar{flex:1; height:8px; background:var(--panel2); border-radius:99px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--accent); width:0}
.controls{display:flex; flex-wrap:wrap; gap:14px; align-items:end; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin:16px 0}
.controls label{display:flex; flex-direction:column; gap:4px; font-size:.8rem; color:var(--muted)}
select{background:var(--panel2); color:var(--fg); border:1px solid var(--line); border-radius:8px; padding:7px 10px; font:inherit}
.quiz-shell{max-width:900px; margin:0 auto; padding:10px 20px 70px}
.score{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin:14px 0}
.score h2{margin:0 0 .3em}
.stat-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.stat-row div{background:var(--panel2); border-radius:9px; padding:8px 13px; font-size:.88rem}
.stat-row strong{color:var(--accent)}
footer{max-width:1080px; margin:0 auto; padding:24px 20px 40px; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem}
.notes{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px; margin-top:26px}
@media (max-width:640px){
  .hero h1{font-size:1.6rem} .chapter-head h1{font-size:1.4rem}
  .controls{flex-direction:column; align-items:stretch}
  .theme-toggle{top:10px; right:10px; padding:6px 10px}
}