:root{
  --primary:#1a3a5c;
  --primary-2:#2a5a8c;
  --accent:#d48806;
  --bg:#f5f7fa;
  --card:#ffffff;
  --text:#242a33;
  --text-2:#6b7683;
  --border:#e6e9ee;
  --ok:#28a745;
  --no:#dc3545;
  --shadow:0 2px 12px rgba(26,58,92,.08);
  --shadow-lg:0 8px 28px rgba(26,58,92,.14);
  --radius:14px;
}
body.night{
  --primary:#3f7fc4;
  --primary-2:#5a9ad8;
  --accent:#e0a83a;
  --bg:#0f141a;
  --card:#1a222c;
  --text:#e7ebf0;
  --text-2:#94a1b0;
  --border:#2a3542;
  --shadow:0 2px 12px rgba(0,0,0,.4);
  --shadow-lg:0 8px 28px rgba(0,0,0,.55);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit;}
.wrap{max-width:860px;margin:0 auto;padding:0 16px;}
.is-hidden{display:none !important;}

/* ---------- views ---------- */
.view{display:none;}
.view.is-active{display:block;}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(155deg,#1a3a5c 0%,#24557f 55%,#2a5a8c 100%);
  color:#fff;
  padding:34px 0 26px;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;
  border-radius:50%;background:rgba(212,136,6,.16);
}
.hero .wrap{position:relative;z-index:1;}
.pill{
  display:inline-block;font-size:12px;letter-spacing:.5px;
  background:rgba(255,255,255,.16);color:#fff;
  padding:4px 12px;border-radius:999px;margin-bottom:12px;
}
.hero h1{font-size:24px;margin:0 0 8px;font-weight:700;letter-spacing:.5px;}
.hero-desc{font-size:13px;color:rgba(255,255,255,.8);margin:0 0 20px;}
.hero-stats{display:flex;gap:10px;margin-bottom:16px;}
.stat{
  flex:1;background:rgba(255,255,255,.12);border-radius:12px;
  padding:10px 8px;text-align:center;
}
.stat b{display:block;font-size:20px;font-weight:700;line-height:1.2;}
.stat span{font-size:12px;color:rgba(255,255,255,.75);}
.bar{height:6px;background:rgba(255,255,255,.2);border-radius:99px;overflow:hidden;}
.bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .4s;}

/* ---------- block head ---------- */
.block-head{margin:26px 0 12px;}
.block-head h2{font-size:17px;margin:0 0 2px;font-weight:700;}
.block-head p{margin:0;font-size:13px;color:var(--text-2);}

/* ---------- cards ---------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.card{
  display:flex;align-items:center;gap:12px;text-align:left;
  background:var(--card);border-radius:var(--radius);
  padding:16px 14px;box-shadow:var(--shadow);
  transition:transform .15s,box-shadow .15s;
  border:1px solid var(--border);
}
.card:active{transform:scale(.975);}
.card:hover{box-shadow:var(--shadow-lg);}
.c-ico{
  flex:0 0 38px;height:38px;width:38px;border-radius:10px;
  background:linear-gradient(140deg,var(--primary),var(--primary-2));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;
}
.card-domain .c-ico{background:linear-gradient(140deg,#c47d05,#d48806);}
.card-body{min-width:0;}
.card-body b{display:block;font-size:15px;font-weight:600;line-height:1.3;}
.card-body em{display:block;font-size:12px;color:var(--text-2);font-style:normal;margin-top:3px;}
.card-num .c-ico{background:linear-gradient(140deg,var(--primary),var(--primary-2));}
.card .done{font-size:12px;color:var(--accent);font-weight:600;}
.prog-mini{height:5px;background:var(--border);border-radius:99px;overflow:hidden;margin-top:7px;}
.prog-mini i{display:block;height:100%;width:0;background:var(--accent);border-radius:99px;}

/* ---------- toolbar ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 8px;}
.tool{
  flex:1;min-width:120px;background:var(--card);border:1px solid var(--border);
  border-radius:12px;padding:12px;font-size:14px;color:var(--text-2);
  display:flex;align-items:center;justify-content:center;gap:6px;
  box-shadow:var(--shadow);
}
.tool:active{transform:scale(.97);}
.tool .dot{width:8px;height:8px;border-radius:50%;background:var(--border);}
body.night .tool .dot{background:var(--accent);}
.foot-note{font-size:12px;color:var(--text-2);text-align:center;margin:18px 0 30px;line-height:1.7;}

/* ---------- quiz head ---------- */
.qhead{
  display:flex;align-items:center;gap:8px;
  padding:12px 12px;background:var(--card);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:20;
}
.qhead-title{flex:1;text-align:center;min-width:0;}
.qhead-title b{display:block;font-size:15px;font-weight:600;}
.qhead-title span{display:block;font-size:12px;color:var(--text-2);}
.icon-btn{
  font-size:14px;color:var(--primary);padding:7px 12px;border-radius:9px;
  background:rgba(26,58,92,.08);white-space:nowrap;font-weight:500;
}
body.night .icon-btn{background:rgba(63,127,196,.16);}
.icon-btn-ghost{visibility:hidden;}
.qbar{
  display:flex;align-items:center;gap:10px;
  padding:9px 16px;background:var(--bg);border-bottom:1px solid var(--border);
  position:sticky;top:57px;z-index:19;
}
.qbar-num{font-size:12px;color:var(--text-2);white-space:nowrap;font-variant-numeric:tabular-nums;}
.qbar-track{flex:1;height:6px;background:var(--border);border-radius:99px;overflow:hidden;}
.qbar-track i{display:block;height:100%;width:0;background:var(--primary);border-radius:99px;transition:width .3s;}
.timer{
  font-size:13px;font-weight:700;color:var(--accent);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.timer.warn{color:var(--no);}

.qbody{padding:16px 16px 120px;}
.qcard{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 16px;}
.qmeta{display:flex;gap:8px;margin-bottom:12px;}
.tag{
  font-size:12px;padding:3px 10px;border-radius:8px;
  background:rgba(212,136,6,.13);color:var(--accent);font-weight:600;
}
.tag-ghost{background:rgba(26,58,92,.08);color:var(--text-2);font-weight:500;}
body.night .tag-ghost{background:rgba(63,127,196,.14);}
.qstem{font-size:16.5px;line-height:1.75;font-weight:500;margin-bottom:16px;}
.options{display:flex;flex-direction:column;gap:10px;}
.opt{
  display:flex;gap:10px;align-items:flex-start;
  border:1.5px solid var(--border);border-radius:11px;
  padding:12px 13px;background:var(--card);text-align:left;
  transition:.15s;font-size:15px;line-height:1.6;
}
.opt:hover{border-color:var(--primary-2);}
.opt-key{
  flex:0 0 24px;height:24px;border-radius:7px;border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--text-2);margin-top:1px;
}
.opt-txt{flex:1;}
.opt.is-ok{border-color:var(--ok);background:rgba(40,167,69,.08);}
.opt.is-ok .opt-key{background:var(--ok);border-color:var(--ok);color:#fff;}
.opt.is-no{border-color:var(--no);background:rgba(220,53,69,.08);}
.opt.is-no .opt-key{background:var(--no);border-color:var(--no);color:#fff;}
.opt.is-sel{border-color:var(--primary);background:rgba(26,58,92,.06);}
.opt.is-sel .opt-key{background:var(--primary);border-color:var(--primary);color:#fff;}
body.night .opt.is-sel{background:rgba(63,127,196,.14);}
.opt.is-locked{cursor:default;}
.opt.is-locked:hover{border-color:var(--border);}
.opt.is-ok:hover{border-color:var(--ok);}
.opt.is-no:hover{border-color:var(--no);}

.feedback{
  margin-top:14px;border-radius:11px;padding:12px 14px;font-size:14px;line-height:1.7;
  background:rgba(40,167,69,.08);border-left:3px solid var(--ok);
}
.feedback.bad{background:rgba(220,53,69,.08);border-left-color:var(--no);}
.feedback b{display:block;margin-bottom:4px;}
.fb-line{margin:3px 0;}
.fb-line span{font-weight:700;}
.fb-ok{color:var(--ok);}
.fb-no{color:var(--no);}

/* ---------- quiz footer ---------- */
.qfoot{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:flex;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:var(--card);border-top:1px solid var(--border);
  max-width:860px;margin:0 auto;
}
.navbtn{
  flex:1;padding:13px;border-radius:11px;font-size:15px;font-weight:600;
  background:var(--bg);border:1px solid var(--border);color:var(--text);
}
.navbtn:active{transform:scale(.98);}
.navbtn:disabled{opacity:.42;cursor:not-allowed;}
.navbtn-main{background:linear-gradient(140deg,var(--primary),var(--primary-2));color:#fff;border:none;}
.navbtn-mid{flex:0 0 88px;color:var(--text-2);}

/* ---------- result ---------- */
.rbody{padding-bottom:40px;}
.score-card{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:26px 16px;text-align:center;margin:16px 0;
}
.score-ring{
  width:120px;height:120px;border-radius:50%;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;gap:2px;
  background:conic-gradient(var(--accent) 0deg,var(--border) 0deg);
  position:relative;
}
.score-ring::before{
  content:"";position:absolute;inset:9px;border-radius:50%;background:var(--card);
}
.score-ring span{position:relative;font-size:34px;font-weight:800;line-height:1;}
.score-ring em{position:relative;font-size:13px;color:var(--text-2);font-style:normal;}
.score-card h3{margin:0 0 6px;font-size:18px;}
.score-card p{margin:0;font-size:14px;color:var(--text-2);}
.score-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}
.sg{background:var(--card);border-radius:12px;padding:14px 8px;text-align:center;box-shadow:var(--shadow);}
.sg b{display:block;font-size:20px;font-weight:700;}
.sg span{font-size:12px;color:var(--text-2);}
.sg-ok b{color:var(--ok);}
.sg-no b{color:var(--no);}
.rbtns{display:flex;gap:10px;}
.review-list{display:flex;flex-direction:column;gap:10px;padding-bottom:20px;}
.rev{background:var(--card);border-radius:12px;padding:14px;box-shadow:var(--shadow);border-left:4px solid var(--no);font-size:14px;}
.rev.ok{border-left-color:var(--ok);}
.rev-q{font-weight:600;margin-bottom:8px;line-height:1.6;}
.rev-line{font-size:13px;color:var(--text-2);margin:2px 0;}
.rev-line b{color:var(--text);}

/* ---------- modal / sheet ---------- */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;}
.modal-mask{position:absolute;inset:0;background:rgba(0,0,0,.45);}
.sheet{
  position:relative;width:100%;max-width:860px;max-height:80vh;overflow-y:auto;
  background:var(--card);border-radius:18px 18px 0 0;padding:0 0 22px;
  animation:up .25s ease;
}
@keyframes up{from{transform:translateY(30px);opacity:.4;}to{transform:translateY(0);opacity:1;}}
.sheet-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 16px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--card);
}
.sheet-head b{font-size:16px;}
.sheet-legend{display:flex;gap:14px;padding:12px 16px;font-size:12px;color:var(--text-2);flex-wrap:wrap;}
.sheet-legend span{display:flex;align-items:center;gap:5px;}
.lg{width:12px;height:12px;border-radius:4px;background:var(--border);display:inline-block;}
.lg-ok{background:var(--ok);}
.lg-no{background:var(--no);}
.lg-sel{background:var(--primary);}
.lg-cur{background:transparent;border:2px solid var(--primary);}
.sheet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:8px;padding:4px 16px 16px;}
.sq{
  aspect-ratio:1;border-radius:9px;border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--text-2);
  background:var(--bg);
}
.sq.ok{background:rgba(40,167,69,.14);border-color:var(--ok);color:var(--ok);}
.sq.no{background:rgba(220,53,69,.14);border-color:var(--no);color:var(--no);}
.sq.sel{background:rgba(42,90,140,.18);border-color:var(--primary);color:var(--primary);}
.sq.cur{outline:2px solid var(--primary);outline-offset:1px;}
.about-body{padding:14px 16px;font-size:14px;line-height:1.8;color:var(--text-2);}
.about-body p{margin:0 0 12px;}
.about-body b{color:var(--text);}
.about-warn{color:var(--accent);font-size:13px;}

/* ---------- responsive ---------- */
@media (max-width:520px){
  .grid{grid-template-columns:1fr;}
  .hero h1{font-size:21px;}
  .hero{padding:26px 0 22px;}
  .stat b{font-size:18px;}
  .navbtn-mid{flex:0 0 74px;font-size:14px;}
}
@media (min-width:760px){
  .grid{grid-template-columns:repeat(2,1fr);}
  .hero h1{font-size:28px;}
  .qbody{padding-bottom:130px;}
}