:root{
  --bg:#f6f7f9; --card:#fff; --ink:#1a1d21; --sub:#6b7280; --line:#e5e7eb;
  --pri:#2563eb; --pri-d:#1d4ed8; --ok:#16a34a; --bad:#dc2626; --warn:#b45309;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 -apple-system,"PingFang HK","PingFang TC","Microsoft JhengHei",sans-serif}
#topbar{position:sticky;top:0;z-index:9;display:flex;align-items:center;gap:8px;
  padding:10px 12px;background:var(--card);border-bottom:1px solid var(--line)}
#topbar h1{font-size:18px;margin:0;flex:1;text-align:center;font-weight:600}
.icon-btn{border:0;background:none;font-size:24px;line-height:1;width:36px;color:var(--pri)}
main{max-width:640px;margin:0 auto;padding:12px 12px 90px}
.loading{color:var(--sub);text-align:center;padding:60px 0}

.card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:16px;margin:0 0 12px}
.card h2{font-size:17px;margin:0 0 4px}
.card .sub{color:var(--sub);font-size:14px}
.btn{display:block;width:100%;padding:13px;border:0;border-radius:10px;font-size:16px;
  font-weight:600;background:var(--pri);color:#fff;margin-top:10px}
.btn:active{background:var(--pri-d)}
.btn.ghost{background:#eef2ff;color:var(--pri)}
.btn.ok{background:var(--ok)}
.btn.warn{background:var(--warn)}
.btn[disabled]{opacity:.5}
input[type=text],input[type=password],input[type=email],textarea{
  width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:16px;
  margin-top:8px;background:#fff}
label.lbl{display:block;font-size:14px;color:var(--sub);margin-top:14px}

/* TOC */
.chap{margin-bottom:10px}
.prog{display:flex;align-items:center;gap:8px;padding:0 4px 8px}
.prog-bar{flex:1;height:5px;background:var(--line);border-radius:3px;overflow:hidden}
.prog-bar i{display:block;height:100%;background:var(--pri)}
.prog-t{font-size:12px;color:var(--sub);white-space:nowrap}
.chap-head{font-weight:700;padding:12px 4px 6px;font-size:15px;color:var(--sub);
  text-transform:uppercase;letter-spacing:.5px}
.sec-row{display:flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:8px;
  text-decoration:none;color:inherit}
.sec-row .t{flex:1;font-size:15.5px}
.sec-row .arrow{color:var(--sub)}

/* Section blocks */
.blk{margin-bottom:6px}
.blk .en{font-size:16.5px}
.blk .zh{font-size:13.5px;color:var(--sub);border-left:3px solid var(--line);
  padding-left:10px;margin-top:4px;display:none}
.blk.show-zh .zh{display:block}
.blk-note .en,.blk-terms .en,.blk-callout .en{background:#fffbeb;border:1px solid #fde68a;
  border-radius:10px;padding:12px;display:block}
.blk-h2 .en{font-size:20px;font-weight:700;display:block;margin-top:14px}
.blk-h3 .en,.blk-h4 .en{font-size:17.5px;font-weight:700;display:block;margin-top:10px}
.blk-summary .en{background:#ecfdf5;border:1px solid #a7f3d0;border-radius:10px;padding:12px;display:block}
.blk img{max-width:100%;border-radius:10px}
.en-toggle{font-size:12.5px;color:var(--pri);cursor:pointer;user-select:none;
  display:inline-block;margin-top:2px}
.blk-interactive .inner{background:#fef2f2;border:1px dashed #fca5a5;border-radius:10px;
  padding:12px;font-size:14px;color:var(--sub)}
.quiz-box{background:var(--card);border:2px solid var(--pri);border-radius:12px;
  padding:14px;margin:14px 0;text-align:center}
.quiz-box .qz-t{font-weight:700}
.src-link{display:block;text-align:center;color:var(--sub);font-size:13px;margin:20px 0}

/* Quiz */
.q-card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:16px;margin-bottom:14px}
.q-num{font-size:13px;color:var(--sub);margin-bottom:4px}
.q-title{font-size:16.5px;font-weight:600;margin-bottom:2px}
.q-orig{font-size:13px;color:var(--sub);margin-bottom:8px}
.opt{display:flex;align-items:center;gap:10px;padding:12px;border:1.5px solid var(--line);
  border-radius:10px;margin-top:8px;font-size:15.5px;cursor:pointer}
.opt.sel{border-color:var(--pri);background:#eff6ff;font-weight:600}
.opt.correct{border-color:var(--ok);background:#ecfdf5}
.opt.wrong{border-color:var(--bad);background:#fef2f2}
.opt .mark{margin-left:auto;font-size:18px}
.result-hero{text-align:center;padding:24px 12px}
.result-hero .big{font-size:40px}
.feedback{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:12px;
  font-size:14.5px;margin-top:10px}
.tries-warn{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:10px;
  padding:12px;font-size:14px;margin-bottom:14px}

/* modal */
#modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;z-index:20;
  align-items:flex-end;justify-content:center}
#modal.open{display:flex}
#modal .sheet{background:#fff;border-radius:16px 16px 0 0;width:100%;max-width:640px;
  padding:20px;max-height:80vh;overflow:auto}
#modal h3{margin:0 0 10px}
.ans-line{padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
.ans-line .a{color:var(--pri);font-weight:600}
.status-ok{color:var(--ok)} .status-bad{color:var(--bad)}