/* ===== 五年级上册《科学》第二单元《工具与技术》在线答题 ===== */
:root{
  --brand:#0f7b8a;
  --brand-dark:#0a5d69;
  --brand-soft:#e3f4f6;
  --accent:#f2994a;
  --ok:#2fa84f;
  --ok-soft:#e8f7ec;
  --bad:#e04b4b;
  --bad-soft:#fdecec;
  --ink:#1f2d3d;
  --ink-2:#5b6b7c;
  --line:#e3e9ef;
  --bg:#f2f6f9;
  --radius:16px;
  --shadow:0 6px 24px rgba(15,60,80,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.7;
  padding-bottom:env(safe-area-inset-bottom);
}
button,input{font-family:inherit;font-size:inherit}
h1,h2,h3{line-height:1.35}

/* ---------- 通用 ---------- */
.screen{display:none;min-height:100vh}
.screen.active{display:block}
.btn{
  border:none;cursor:pointer;border-radius:12px;padding:11px 22px;font-weight:600;
  transition:.18s;white-space:nowrap;
}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 4px 12px rgba(15,123,138,.25)}
.btn-primary:hover{background:var(--brand-dark)}
.btn-primary:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
.btn-ghost{background:#fff;color:var(--ink-2);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn-lg{padding:14px 40px;font-size:17px;border-radius:14px}
.btn-block{width:100%;margin-top:14px}
.icon-btn{
  background:var(--brand-soft);color:var(--brand-dark);border:none;cursor:pointer;
  border-radius:10px;padding:7px 14px;font-weight:600;font-size:14px;
}

/* ---------- 通用弹窗 ---------- */
.modal-mask{
  position:fixed;inset:0;background:rgba(15,30,45,.5);z-index:80;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
/* 全局兜底：hidden 属性必须始终生效。
   否则像 .modal-mask / .q-last-hint 这类带 display:flex 的元素会压过
   浏览器默认的 [hidden]{display:none}，导致元素该藏不藏。 */
[hidden]{display:none !important}
.modal{
  background:#fff;border-radius:16px;padding:26px 24px;max-width:420px;width:100%;
  box-shadow:0 18px 50px rgba(0,0,0,.22);animation:pop .18s ease-out;
}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.modal h3{font-size:17px;color:var(--brand-dark);margin-bottom:10px}
.modal p{font-size:14.5px;color:var(--ink-2);line-height:1.75}
.modal-note{
  margin-top:12px;background:#f7fafc;border:1px solid var(--line);border-radius:10px;
  padding:10px 13px;font-size:13.5px;color:var(--ink-2);
}
.modal-note b{color:var(--bad)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}

/* ---------- 开始页 ---------- */
#screen-start{display:none;min-height:100vh;place-items:center;padding:28px 16px}
#screen-start.active{display:grid}
.start-card{
  background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:38px 34px;
  max-width:620px;width:100%;text-align:center;
}
.badge{
  display:inline-block;background:var(--brand-soft);color:var(--brand-dark);
  border-radius:999px;padding:5px 16px;font-size:13px;font-weight:600;margin-bottom:16px;
}
.start-title{font-size:28px;color:var(--brand-dark)}
.start-sub{font-size:17px;color:var(--ink-2);margin-bottom:26px}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px}
.stat{background:var(--bg);border-radius:12px;padding:12px 6px}
.stat b{display:block;font-size:24px;color:var(--brand)}
.stat span{font-size:12px;color:var(--ink-2)}
.lesson-list{
  text-align:left;background:var(--bg);border-radius:14px;padding:16px 18px;
  margin-bottom:22px;columns:2;column-gap:24px;font-size:14px;color:var(--ink-2);
}
.lesson-list li{list-style:none;padding:3px 0;break-inside:avoid}
.lesson-list li::before{content:"▸";color:var(--brand);margin-right:7px}

/* ---------- 学科选择 ---------- */
.subject-picker{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:10px;margin-bottom:14px;
}
.sub-card{
  position:relative;display:flex;align-items:center;gap:11px;text-align:left;
  background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:13px 14px;
  cursor:pointer;transition:.16s;
}
.sub-card:hover{border-color:var(--sc,var(--brand));transform:translateY(-1px);box-shadow:0 4px 14px rgba(15,60,80,.08)}
.sub-card.active{border-color:var(--sc,var(--brand));background:var(--ssc,var(--brand-soft))}
.sub-badge{
  flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--sc,var(--brand));color:#fff;font-size:17px;font-weight:700;
}
.sub-info{min-width:0}
.sub-name{font-size:15px;font-weight:600;color:var(--ink);line-height:1.3}
.sub-meta{font-size:11.5px;color:var(--muted);line-height:1.4;overflow-wrap:anywhere}
.sub-check{
  position:absolute;top:8px;right:9px;width:16px;height:16px;border-radius:50%;
  background:var(--sc,var(--brand));color:#fff;font-size:10px;display:none;place-items:center;
}
.sub-card.active .sub-check{display:grid}
.subject-note{
  font-size:12.5px;color:var(--muted);text-align:center;margin:-6px 0 16px;
}
.subject-note b{color:var(--ink-2);font-weight:600}
.name-field{display:flex;align-items:center;gap:12px;margin-bottom:22px;text-align:left}
.name-field span{font-size:14px;color:var(--ink-2);white-space:nowrap}
.name-field input{
  flex:1;border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:15px;outline:none;
}
.name-field input:focus{border-color:var(--brand)}
.tip{font-size:12px;color:#9aa8b6;margin-top:16px}

/* ---------- 加载状态 / 错误 ---------- */
.load-status{
  text-align:center;font-size:14px;color:var(--ink-2);background:var(--brand-soft);
  border-radius:10px;padding:11px 14px;margin-bottom:18px;
}
.load-error{
  background:var(--bad-soft);border:1px solid #f5cfcf;border-radius:12px;
  padding:14px 16px;margin-bottom:18px;text-align:center;
}
.load-error p{font-size:14px;color:#b03a3a;margin-bottom:12px}

/* ---------- 轻提示 ---------- */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:90;
  background:rgba(31,45,61,.94);color:#fff;border-radius:10px;padding:11px 20px;
  font-size:14px;box-shadow:0 8px 26px rgba(0,0,0,.24);max-width:88vw;
}

/* ---------- 答题页 ---------- */
.topbar{
  position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);
  padding:12px 20px calc(12px + env(safe-area-inset-top));
}
.topbar-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.topbar-left{display:flex;align-items:center;gap:9px;min-width:0}
.topbar-subject{
  flex:none;background:var(--brand);color:#fff;border-radius:8px;padding:3px 10px;
  font-size:12.5px;font-weight:700;
}
.topbar-title{font-size:15px;font-weight:700;color:var(--brand-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.progress-wrap{max-width:900px;margin:0 auto}
.progress-bar{height:7px;background:var(--line);border-radius:99px;overflow:hidden}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--brand),#38b6a8);border-radius:99px;transition:width .25s}
.progress-info{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-2);margin-top:7px}
.timer{font-variant-numeric:tabular-nums;color:var(--accent);font-weight:600}

.quiz-body{max-width:900px;margin:0 auto;padding:22px 20px 60px}
.q-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 28px}
.q-meta{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.q-type{background:var(--brand-soft);color:var(--brand-dark);border-radius:6px;padding:2px 11px;font-size:12.5px;font-weight:700}
.q-type.multi{background:#fdf0e3;color:#b96a1c}
.q-type.judge{background:#eef0ff;color:#4a5bb5}
.q-index{font-size:13px;color:#9aa8b6}
.q-stem{font-size:18px;font-weight:600;margin-bottom:8px}
.q-hint{font-size:13px;color:var(--accent);margin-bottom:10px}
.options{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.opt{
  display:flex;gap:12px;align-items:flex-start;background:var(--bg);border:1.5px solid transparent;
  border-radius:12px;padding:12px 15px;cursor:pointer;transition:.15s;user-select:none;
}
.opt:hover{background:#e9f2f5}
.opt .mark{
  flex:none;width:26px;height:26px;border-radius:50%;background:#fff;border:1.5px solid #c6d2dc;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#8b9aa8;
}
.opt.multi .mark{border-radius:8px}
.opt .txt{flex:1;font-size:15.5px}
.opt.selected{background:var(--brand-soft);border-color:var(--brand)}
.opt.selected .mark{background:var(--brand);border-color:var(--brand);color:#fff}
.opt.right{background:var(--ok-soft);border-color:var(--ok)}
.opt.right .mark{background:var(--ok);border-color:var(--ok);color:#fff}
.opt.wrong{background:var(--bad-soft);border-color:var(--bad)}
.opt.wrong .mark{background:var(--bad);border-color:var(--bad);color:#fff}
.opt.locked{cursor:default}
.opt.locked:hover{background:inherit}

.q-nav{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.q-nav .btn-primary{margin-left:auto}

/* 最后一题提示条 */
.q-last-hint{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;
  background:#fff6e8;border:1px solid #f6dcc0;border-radius:12px;padding:11px 14px;
  font-size:13.5px;color:#8a5a1c;
}
.q-last-flag{
  background:var(--accent);color:#fff;border-radius:999px;padding:2px 11px;
  font-size:12.5px;font-weight:700;flex:none;
}

/* ---------- 答题卡 ---------- */
.sheet-mask{position:fixed;inset:0;background:rgba(15,30,45,.45);z-index:40}
.sheet{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:#fff;z-index:50;
  padding:20px;overflow-y:auto;box-shadow:-6px 0 28px rgba(0,0,0,.14);
}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.sheet-head h3{font-size:17px;color:var(--brand-dark)}
.sheet-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);margin-bottom:14px}
.sheet-legend .dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.dot.done{background:var(--brand)}
.dot.undone{background:#d8e0e8}
.dot.right{background:var(--ok)}
.dot.wrong{background:var(--bad)}
.sheet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:8px}
.cell{
  aspect-ratio:1;border-radius:9px;border:1.5px solid var(--line);background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:600;color:var(--ink-2);
}
.cell.done{background:var(--brand);border-color:var(--brand);color:#fff}
.cell.current{border-color:var(--accent);border-width:2.5px;color:var(--accent)}
.cell.done.current{color:#fff}
.cell.right{background:var(--ok);border-color:var(--ok);color:#fff}
.cell.wrong{background:var(--bad);border-color:var(--bad);color:#fff}
.cell.last{outline:2px dashed var(--accent);outline-offset:-4px}

/* ---------- 成绩页 ---------- */
#screen-result{max-width:900px;margin:0 auto;padding:28px 20px 70px}
.result-head{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 28px;
  display:flex;gap:26px;align-items:center;flex-wrap:wrap;
}
.score-ring{
  flex:none;width:118px;height:118px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--brand) 0deg,var(--brand) 0deg,#e8eef3 0deg);
  transition:background .5s;
}
.score-num{width:92px;height:92px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column}
.score-num b{font-size:32px;color:var(--brand-dark);line-height:1}
.score-num span{font-size:12px;color:var(--ink-2)}
.result-meta{flex:1;min-width:220px}
.result-meta h2{font-size:21px;color:var(--brand-dark)}
.result-sub{color:var(--ink-2);font-size:14.5px;margin-top:4px}
.result-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.tag{border-radius:999px;padding:4px 14px;font-size:13px;font-weight:600}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.bad{background:var(--bad-soft);color:var(--bad)}
.tag.mid{background:#fff6e8;color:#b96a1c}
.result-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}

.review{display:flex;flex-direction:column;gap:14px}
.rv{background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:20px 22px;border-left:5px solid var(--line)}
.rv.right{border-left-color:var(--ok)}
.rv.wrong{border-left-color:var(--bad)}
.rv-head{display:flex;gap:9px;align-items:center;margin-bottom:9px;flex-wrap:wrap}
.rv-no{font-size:13px;font-weight:700;color:var(--ink-2)}
.rv-tag{font-size:12px;border-radius:5px;padding:1px 8px;font-weight:700}
.rv-tag.ok{background:var(--ok-soft);color:var(--ok)}
.rv-tag.bad{background:var(--bad-soft);color:var(--bad)}
.rv-lesson{font-size:12px;color:#9aa8b6}
.rv-type{font-size:11.5px;color:var(--brand);background:var(--brand-soft);border-radius:5px;padding:1px 8px;font-weight:700}
.rv-stem{font-size:15.5px;font-weight:600;margin-bottom:12px}
.rv-yours{
  display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:12px;
  background:#f7fafc;border:1px solid var(--line);border-radius:10px;padding:10px 13px;font-size:14px;
}
.rv-yours-k{
  flex:none;background:#fff;border:1px solid var(--line);border-radius:7px;
  padding:1px 10px;font-size:12.5px;font-weight:700;color:var(--ink-2);
}
.rv-yours-v{font-weight:600;color:var(--ink)}
.rv-yours-v.ok{color:var(--ok)}
.rv-yours-v.bad{color:var(--bad)}
.rv-yours-hint{font-size:13px;color:var(--bad);font-weight:600}
.rv-opts{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.rv-opt{font-size:14.5px;padding:7px 12px;border-radius:9px;background:var(--bg);display:flex;gap:9px}
.rv-opt .k{font-weight:700;color:var(--ink-2)}
.rv-opt.is-right{background:var(--ok-soft)}
.rv-opt.is-right .k{color:var(--ok)}
.rv-opt.is-wrong{background:var(--bad-soft)}
.rv-opt.is-wrong .k{color:var(--bad)}
.rv-opt .mk{margin-left:auto;font-size:12.5px;font-weight:700}
.rv-opt.is-right .mk{color:var(--ok)}
.rv-opt.is-wrong .mk{color:var(--bad)}
.rv-analysis{background:#f7fafc;border-radius:10px;padding:12px 14px;font-size:14px;color:var(--ink-2)}
.rv-analysis b{color:var(--brand-dark)}

@media (max-width:600px){
  .quiz-body{padding:16px 13px 50px}
  .q-card{padding:20px 17px}
  .q-stem{font-size:17px}
  .lesson-list{columns:1}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .result-head{padding:20px 18px;gap:16px}
  .q-nav .btn{flex:1 1 auto}
  .q-nav .btn-primary{margin-left:0;flex-basis:100%;order:3}
  .topbar{padding-left:14px;padding-right:14px}
}

@media print{
  body{background:#fff}
  .result-actions,.topbar,.sheet,.sheet-mask,#screen-start,#screen-quiz{display:none !important}
  .rv{break-inside:avoid;box-shadow:none;border:1px solid var(--line)}
  #screen-result{display:block !important;max-width:100%;padding:0}
}