/* 练习页 · Field Guide 风格（2026-10-03 改版）：和学习单元（../learn/fg.css）同一套 token、顶栏、卡片和按钮。
   没有直接引入 fg.css：那里的 .card / .figure / .bar / .box / .pop 是学习页专用的，和练习页的类名撞车。
   改 token 时请和 ../learn/fg.css 的 :root 保持一致。 */
:root{
  --bg:#f7f5f0; --card:#fff; --ink:#1b2733; --muted:#5f6b75; --line:#e6e0d4; --soft:#f1ede4;
  --before:#0e9f8e; --before-soft:#e2f5f1; --class:#5b5bd6; --class-soft:#ecebfd; --after:#d9861c; --after-soft:#fff1dc;
  --primary:#ffc93c; --primary-dk:#f2b416; --good:#16a34a; --good-soft:#e6f6ea;
  --bad:#d64545; --bad-soft:#fdecea; --mid:#d9861c; --mid-soft:#fff1dc;
  --r:18px; --shadow:0 1px 2px rgba(27,39,51,.06),0 8px 24px rgba(27,39,51,.07);
  --font:"Avenir Next","Segoe UI",system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --stick:0px;   /* 顶栏 + 作答条的高度，由 app.js 写入，给题号格子定位 */
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--font)}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid #2563eb;outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:9}
.muted{color:var(--muted)} .small{font-size:14.5px}
.pad{padding:24px}
/* 双语：主语言正常显示，另一种语言小一号；按钮、标题里同一行，段落里换行 */
small{display:block;font-size:.8em;color:var(--muted);font-weight:500}
h1 small,h2 small,button small,.btn small,a.lab small,.verdict small,.ai-title small,.trap small,.fb small,.runbar small,.chat-card small{display:inline;margin-left:.4em}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- 顶栏（与学习单元页一致） ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;padding:12px clamp(16px,3vw,36px);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{font-weight:800;font-size:17px;text-decoration:none;white-space:nowrap}
.mainnav{display:flex;gap:6px;flex:1;justify-content:center;flex-wrap:wrap}
.mainnav a{text-decoration:none;font-weight:700;font-size:15.5px;padding:8px 14px;border-radius:99px;color:var(--muted)}
.mainnav a:hover{background:var(--soft);color:var(--ink)}
.mainnav a.on{background:var(--ink);color:#fff}
.lang{min-height:40px;padding:0 16px;border-radius:99px;border:1.5px solid var(--line);background:#fff;font-weight:800}
.lang:hover{border-color:var(--ink)}
@media (max-width:760px){
  .top{flex-wrap:wrap;gap:8px;position:static}
  .mainnav{order:3;flex-basis:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}
  .mainnav a{white-space:nowrap;padding:6px 12px}
}

/* 作答条：题包名、进度、计时、交卷。紧贴顶栏下面，滚动时一直看得到 */
.runbar{position:sticky;z-index:15;top:0;display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:8px clamp(16px,3vw,36px);background:rgba(247,245,240,.95);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:1px solid var(--line);font-size:15.5px}
.runbar:empty{display:none}
.runbar .rb-title{font-weight:800;min-width:0;overflow-wrap:anywhere}
.runbar .rb-prog{font-weight:800;font-variant-numeric:tabular-nums;background:#fff;border:1.5px solid var(--line);border-radius:99px;padding:2px 12px}
.runbar .rb-end{margin-left:auto}
.clock{font-variant-numeric:tabular-nums;font-size:20px;font-weight:800;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:2px 12px}
.clock.warn{color:var(--bad);border-color:var(--bad);background:var(--bad-soft)}

main{max-width:1240px;margin:0 auto;padding:clamp(18px,3vw,40px) clamp(16px,3vw,36px) 120px;outline:none}

/* ---------- 按钮：默认是白底描边（ghost），.primary 是黄色主按钮 ---------- */
button,.btn{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 2px;min-height:48px;padding:6px 20px;border-radius:14px;border:1.5px solid var(--line);background:#fff;font-weight:800;font-size:16px;line-height:1.3;text-decoration:none;text-align:center;transition:transform .1s,background .15s,border-color .15s}
button:hover:not(:disabled){border-color:var(--ink)}
button:active:not(:disabled){transform:translateY(1px)}
button.primary{background:var(--primary);border-color:transparent;box-shadow:0 2px 0 var(--primary-dk)}
button.primary:hover:not(:disabled){background:#ffd35f;border-color:transparent}
button.primary small{color:#5b4a14}
button:disabled{opacity:.45;cursor:not-allowed}
button[aria-pressed="true"]{background:var(--after-soft);border-color:var(--after)}

/* ---------- 首页 ---------- */
.hero{text-align:center;margin:8px auto 22px;max-width:780px}
.hero h1{font-size:clamp(30px,4.2vw,46px);line-height:1.12;margin:0 0 10px;letter-spacing:-.4px}
.hero h1 small{display:block;margin:6px 0 0;font-size:.42em;letter-spacing:0;font-weight:700}
.hero>p{font-size:18px;margin:0 0 6px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(14px,2.2vw,24px);margin:0 0 22px}
.card{background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:20px 22px;min-width:0}
.card h2{margin:0 0 8px;font-size:21px;line-height:1.25}
.card.set h2 small{display:block;margin:2px 0 0;font-size:.72em}
.card.wide{margin:0 0 22px}
.card.set{display:flex;flex-direction:column;gap:6px;border-top:8px solid var(--before)}
.card.set.mock{border-top-color:var(--class)}
.card.set .row{margin-top:auto;padding-top:8px}
.card.set p{margin:0}
.card.review{border:2px solid var(--primary);max-width:900px;margin-left:auto;margin-right:auto}
.card.review p{margin:0 0 8px}

.bars{display:grid;gap:8px;margin:10px 0 14px}
.card.topics{grid-column:1/-1}
.card.topics .bars{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));column-gap:28px}
.barrow{display:grid;grid-template-columns:minmax(90px,42%) minmax(0,1fr) 46px;gap:10px;align-items:center;font-size:15px}
.barrow span{min-width:0;overflow-wrap:anywhere}
.barrow i{height:10px;background:var(--soft);border-radius:6px;overflow:hidden}
.barrow b{display:block;height:100%;border-radius:6px}
.barrow b.low{background:var(--bad)} .barrow b.mid{background:var(--mid)} .barrow b.high{background:var(--good)}
.barrow em{font-style:normal;text-align:right;color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
.history{margin:0;padding-left:22px;font-size:15.5px;line-height:1.9}

/* ---------- 作答 ---------- */
.qwrap{display:grid;grid-template-columns:minmax(0,880px);justify-content:center;gap:20px;align-items:start}
.qwrap:has(.grid){grid-template-columns:minmax(0,880px) 236px}
.question{background:#fff;border-radius:24px;box-shadow:var(--shadow);padding:clamp(18px,2.6vw,30px);min-width:0}
.qhead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.qno{margin:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--muted);font-weight:800;font-size:15px}
.tag{display:inline-block;font-size:13px;font-weight:800;border-radius:99px;padding:2px 10px;background:var(--soft);color:var(--muted)}
.tag.tier-must{background:var(--after-soft);color:#9a5a08}
.tag.tier-discriminate{background:var(--class-soft);color:var(--class)}
.tag.tier-reason{background:var(--before-soft);color:#0b7c6f}
.en-toggle{min-height:40px;padding:0 16px;border-radius:99px;font-size:15px;color:var(--class);border-color:#cfcff5;background:var(--class-soft)}
.en-toggle[aria-expanded="true"]{background:var(--class);color:#fff;border-color:var(--class)}
.groupstem{background:var(--soft);border-left:6px solid var(--after);padding:12px 16px;border-radius:14px;margin-bottom:14px;font-size:17px;line-height:1.7}
.stem{font-size:20px;line-height:1.65;margin-bottom:16px;font-weight:600;overflow-wrap:anywhere}
.figure{display:block;max-width:100%;max-height:340px;background:#fff;border:1.5px solid var(--line);border-radius:14px;margin:8px 0 16px}
.options{display:grid;gap:10px}
.opt{justify-content:flex-start;flex-wrap:nowrap;gap:14px;text-align:left;min-height:56px;padding:10px 16px;border-radius:16px;font-size:17px;font-weight:500;line-height:1.5}
.opt span{min-width:0;overflow-wrap:anywhere}
.opt b{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--soft);font-size:15px;font-weight:900}
.opt.on{border-color:var(--primary-dk);background:#fffaf0;box-shadow:0 0 0 1.5px var(--primary-dk) inset}
.opt.on b{background:var(--primary);color:var(--ink)}
.opt.right{border-color:var(--good);background:var(--good-soft);box-shadow:0 0 0 1.5px var(--good) inset}
.opt.right b{background:var(--good);color:#fff}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft);box-shadow:0 0 0 1.5px var(--bad) inset}
.opt.wrong b{background:var(--bad);color:#fff}
.opt:disabled{cursor:default;opacity:1}
.opt:disabled:not(.right):not(.wrong){color:var(--muted)}
.hint-multi{margin:8px 0 0}
.fill,.short{width:100%;font:inherit;font-size:18px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;min-height:52px}
.fill:focus,.short:focus,.chat-input textarea:focus{outline:none;border-color:var(--ink)}
.fill:disabled,.short:disabled{background:var(--soft)}

/* 每题的 English：点开在下面看英文题干和选项 */
.en-panel{margin:14px 0 0;padding:14px 16px;border-radius:16px;background:var(--class-soft);border:1.5px solid #d6d6f7}
.en-panel .en-label{margin:0 0 6px;font-size:13px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--class)}
.en-panel .en-group{margin:0 0 8px;font-size:16px;color:var(--muted)}
.en-panel .en-stem{margin:0 0 8px;font-size:18px;font-weight:600;line-height:1.6}
.en-panel ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.en-panel li{display:flex;gap:10px;font-size:16px;line-height:1.5}
.en-panel li b{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#fff;font-size:13px}
.en-panel .qtable{background:#fff}
/* 答完后的英文解析（跟着每题的 English 开关）；一句话题要点下面的英文 */
.en-fb{margin:10px 0;padding:10px 14px;border-radius:14px;background:var(--class-soft);border:1.5px solid #d6d6f7}
.en-fb .en-label{margin:0 0 4px;font-size:13px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--class)}
.en-fb .en-stem{font-weight:600}
.en-fb .trap{margin-bottom:2px}
.en-sub{display:block;margin-top:2px;font-size:15px;color:var(--class)}
.en-toggle.sm{min-height:36px;padding:0 14px;font-size:14px;margin:4px 0 2px}

.nav{margin-top:20px;justify-content:space-between}
.nav button{min-width:120px}
.fb{margin-top:18px;padding:16px 18px;border-radius:18px;background:#fff;border:1.5px solid var(--line);line-height:1.65}
.fb p{margin:8px 0}
.verdict{font-weight:800;font-size:18px}
.verdict.ok{color:var(--good)} .verdict.no{color:var(--bad)}
.fb:has(.verdict.ok){border-color:#bfe5c9;background:#f7fcf8}
.fb:has(.verdict.no){border-color:#f2c9c6;background:#fffafa}
.trap{background:var(--after-soft);border-left:5px solid var(--after);border-radius:10px;padding:8px 12px;color:#6b4207}
.rubric{margin:6px 0;padding:0;list-style:none;display:grid;gap:6px}
.rubric li{padding:8px 12px;border-radius:12px;background:var(--soft)}
.rubric label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.rubric input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--good)}
.rubric li.ref{background:transparent;color:var(--muted);font-size:15px}
.lab{display:inline-flex;align-items:center;gap:2px;flex-wrap:wrap;min-height:46px;margin-top:6px;color:#fff;background:var(--before);border-radius:14px;padding:6px 18px;text-decoration:none;font-weight:800;box-shadow:0 2px 0 #0b7c6f}
.lab:hover{background:#0c8f80}
.lab small{color:#d9f5f0}

.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;align-content:start;background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:12px;position:sticky;top:calc(var(--stick) + 14px)}
.grid button{min-height:36px;padding:0;font-size:14px;border-radius:10px;border-width:1.5px}
.grid button.done{background:var(--before-soft);border-color:var(--before);color:#0b7c6f}
.grid button.flag{box-shadow:inset 0 -4px 0 var(--after)}
.grid button.cur{background:var(--ink);border-color:var(--ink);color:#fff}

details.wrong{border-top:1.5px solid var(--line);padding:10px 0}
details.wrong summary{cursor:pointer;font-weight:700;padding:4px 0}
details.wrong[open] summary{margin-bottom:4px}

.confirm{background:#fff;color:var(--ink);border:0;border-radius:24px;padding:24px;box-shadow:0 10px 40px rgba(27,39,51,.22);max-width:min(460px,calc(100vw - 32px))}
.confirm p{font-size:18px;font-weight:700;margin:0 0 16px}
.confirm::backdrop{background:rgba(27,39,51,.4)}

.tablewrap{overflow-x:auto;margin:0 0 16px}
.qtable{border-collapse:collapse;font-size:15.5px;min-width:100%}
.qtable th,.qtable td{border:1.5px solid var(--line);padding:8px 12px;text-align:left}
.qtable th{background:var(--soft);font-weight:800}

/* ---------- AI：批改一句话 ---------- */
.ai-hint{margin-top:10px;display:grid;gap:6px;justify-items:start}
.ai-box{margin:12px 0;padding:14px 16px;border:1.5px dashed #c9c2b4;border-radius:16px;background:#fff;display:grid;gap:8px}
.ai-title{margin:0;font-weight:800;font-size:15.5px}
.ai-say{margin:0;line-height:1.6}
.ai-quote{margin:0;color:var(--muted)}
.ai-verdict{margin:0;font-weight:800}
.ai-verdict.ok{color:var(--good)} .ai-verdict.mid{color:var(--mid)} .ai-verdict.no{color:var(--bad)}
.ai-err{margin:0;color:var(--bad);font-weight:700}
.ai-box button,.ai-hint button{justify-self:start}

/* ---------- AI 对话：问到明白 ---------- */
.ai-chat p,.fb .ai-box p,.fb .ai-chat p{margin:0}
.ai-chat{margin:16px 0 4px;padding:14px 16px;border:1.5px dashed #c9c2b4;border-radius:18px;background:#fffdf8;display:grid;gap:10px}
.chat-log{display:grid;gap:8px}
.msg{margin:0;padding:9px 14px;border-radius:16px;line-height:1.55;max-width:88%;overflow-wrap:anywhere}
.msg small{display:block;margin:2px 0 0}
.msg.me{justify-self:end;background:#fff6d8;border:1.5px solid #f6dc8c;border-bottom-right-radius:6px}
.msg.bot{justify-self:start;background:#fff;border:1.5px solid var(--line);border-bottom-left-radius:6px}
.msg.bot.muted{color:var(--muted)}
.chat-card{justify-self:start;margin:0 0 2px;font-size:15px;max-width:88%}
.chat-chips button{min-height:40px;font-size:15px;padding:4px 14px;border-radius:99px}
.chat-input{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.chat-input textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:10px 12px;resize:vertical;min-height:52px}
.chat-end{margin:0;color:var(--mid);font-weight:700}
.ai-chat .small{margin:0}

@media (max-width:900px){
  .qwrap:has(.grid){grid-template-columns:minmax(0,1fr)}
  .grid{position:static;grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}
}
@media (max-width:760px){.stem{font-size:19px}}
@media (max-width:520px){
  .chat-input{grid-template-columns:1fr}
  .chat-input button{justify-self:end}
  .msg,.chat-card{max-width:100%}
  .nav button{min-width:0;flex:1 1 30%;padding:6px 10px}
  .runbar{gap:6px 10px;padding:6px 16px}
  .runbar .rb-title{flex-basis:100%;font-size:14.5px}
  .runbar .rb-end{min-height:42px;padding:4px 14px}
  .clock{font-size:18px}
  .question{border-radius:20px}
}

/* ---------- 讲评打印：白底黑字，只留成绩、各维度和错题（错题全部展开）；按钮、顶栏、作答条不打印 ---------- */
.print-only{display:none}
@media print{
  :root{--bg:#fff;--line:#ccc;--muted:#444;--shadow:none}
  @page{margin:14mm}
  body{background:#fff!important;color:#111!important;font-size:12.5pt}
  .top,.runbar,.skip,.row,button,.chat-input,.ai-chat,.en-panel,.en-toggle{display:none!important}
  main{max-width:none;padding:0}
  .print-only{display:block;font-size:11pt;color:#444;margin:0 0 4px}
  .hero{text-align:left;margin:0 0 10px}
  .hero h1{font-size:26pt}
  .card,.hero,.fb{background:#fff!important;border:1px solid #ccc!important;box-shadow:none!important;break-inside:avoid;border-radius:10px}
  .hero{border:0!important}
  .card{padding:10px 14px}
  .cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
  .card.topics .bars{grid-template-columns:1fr 1fr 1fr;column-gap:16px}
  .card.wide{margin-bottom:10px}
  details.wrong{break-inside:avoid}
  details.wrong summary{font-weight:700;list-style:none}
  .barrow{font-size:10.5pt}
  .barrow i{background:#eee!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .barrow i b{background:#666!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .trap{background:#fff!important;border-left:3px solid #999;color:#222}
  .lab{display:none}
  .ai-box textarea{display:none}
  .fb{border:0!important;padding:2px 0 6px;margin-top:4px}
  small{color:#555!important}
}