/* 天野学习站 — 干净、专注、不幼稚（11岁备试，不是幼儿） */
:root{
  --ink:#12212e; --ink2:#4a6070; --line:#e2e8ee; --bg:#f6f8fa; --card:#fff;
  --blue:#1b3a5c; --blue-l:#2d5a86; --gold:#c99a2e; --gold-l:#f6efdd;
  --ok:#1f8a5a; --warn:#c9762e; --bad:#c04a4a;
  --r:14px; --sh:0 1px 3px rgba(18,33,46,.06), 0 6px 20px rgba(18,33,46,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",
       "Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
.muted{color:var(--ink2)}
.small{font-size:13px}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input{
  font:inherit;padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  background:#fff;color:var(--ink);width:100%
}
input:focus{outline:2px solid var(--blue-l);outline-offset:-1px;border-color:transparent}

/* ── 口令门 ── */
.gate{position:fixed;inset:0;display:grid;place-items:center;background:
  radial-gradient(1000px 600px at 50% -10%,#1b3a5c,#0d1c2b);z-index:100}
.gate-card{background:#fff;padding:36px 32px;border-radius:20px;width:min(360px,90vw);
  text-align:center;box-shadow:var(--sh)}
.gate-logo{font-size:40px;line-height:1}
.gate-card h1{font-size:22px;margin:12px 0 4px;font-weight:700;letter-spacing:.01em}
.gate-sub{color:var(--ink2);font-size:14px;margin-bottom:20px}
.gate-err{color:var(--bad);font-size:13px;min-height:18px;margin-top:10px}

/* ── 顶栏 ── */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
  padding:12px 20px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.top-l{display:flex;align-items:center;gap:8px;font-weight:700}
.logo{font-size:20px}
.brand{font-size:15px;letter-spacing:.02em;white-space:nowrap}
.top-nav{display:flex;gap:4px;margin-left:auto}
.tab{padding:7px 15px;border-radius:99px;font-size:14px;color:var(--ink2);white-space:nowrap}
.tab.on{background:var(--blue);color:#fff}
.icon-btn{font-size:17px;padding:6px 8px;border-radius:10px}
.icon-btn:hover{background:var(--bg)}

main{max-width:860px;margin:0 auto;padding:22px 20px 60px}

/* ── 首页 ── */
.hero{padding:6px 0 20px}
.hero h2{font-size:26px;font-weight:700;letter-spacing:-.01em}
.hero p{color:var(--ink2);margin-top:5px}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:660px){.cards{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;box-shadow:var(--sh);cursor:pointer;transition:.16s}
.card:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(18,33,46,.07),0 12px 30px rgba(18,33,46,.09)}
.card.accent{background:linear-gradient(160deg,#1b3a5c,#26496f);border-color:transparent;color:#fff}
.card.accent p{color:#c5d5e4}
.card-ico{font-size:26px}
.card h3{font-size:17px;margin:9px 0 5px;font-weight:650}
.card p{font-size:14px;color:var(--ink2);line-height:1.6}
.card .go{display:inline-block;margin-top:12px;font-size:14px;font-weight:600;color:var(--gold)}
.card.accent .go{color:#e8c469}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;margin-top:18px;box-shadow:var(--sh)}
.ph{font-size:14px;font-weight:650;color:var(--ink2);letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:14px}
.vh{font-size:20px;font-weight:700;margin-bottom:16px}

/* ── 口语：分类 ── */
.cats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:660px){.cats{grid-template-columns:1fr}}
.cat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:17px;text-align:left;box-shadow:var(--sh);transition:.16s}
.cat:hover{border-color:var(--blue-l);transform:translateY(-2px)}
.cat .c-n{font-size:11px;font-weight:700;color:var(--gold);letter-spacing:.1em}
.cat h4{font-size:16px;margin:6px 0 4px;font-weight:650}
.cat .c-e{font-size:12px;color:var(--ink2);font-style:italic}
.cat .c-d{font-size:13px;color:var(--ink2);margin-top:8px;line-height:1.55}
.cat .c-m{font-size:12px;color:var(--blue-l);margin-top:9px;font-weight:600}

/* ── 口语：答题 ── */
.link{color:var(--blue-l);font-size:14px;padding:6px 0;font-weight:600;margin-bottom:10px}
.q-head{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:11px}
.chip{background:var(--gold-l);color:#8a6a12;font-size:12px;font-weight:600;
  padding:4px 11px;border-radius:99px}
.chip.ghost{background:#eef2f6;color:var(--ink2)}
.q-box{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:var(--r);padding:22px;box-shadow:var(--sh)}
.q-text{font-size:21px;line-height:1.5;font-weight:600}
.q-zh{font-size:14px;color:var(--ink2);margin-top:9px}
.hint{margin-top:11px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:12px 15px}
.hint summary{font-size:14px;cursor:pointer;color:var(--blue-l);font-weight:600}
.hint p{font-size:14px;color:var(--ink2);margin-top:8px;line-height:1.65;white-space:pre-wrap}

.rec-area{margin-top:18px;display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.btn{padding:10px 17px;border-radius:10px;font-size:14px;font-weight:600;transition:.15s}
.btn.primary{background:var(--blue);color:#fff}
.btn.primary:hover{background:var(--blue-l)}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--blue-l);color:var(--blue-l)}
.btn.big{padding:14px 26px;font-size:16px}
.btn.wide{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.rec{background:var(--bad);animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(192,74,74,.4)}50%{box-shadow:0 0 0 9px rgba(192,74,74,0)}}
.rec-state{font-size:13px;color:var(--ink2);flex:1;min-width:180px}

.tr-text{font-size:16px;line-height:1.75;background:var(--bg);padding:15px;
  border-radius:10px;margin-bottom:14px;white-space:pre-wrap}

/* ── 点评 ── */
.fb{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;box-shadow:var(--sh);margin-top:16px}
.scores{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
@media(max-width:560px){.scores{grid-template-columns:1fr 1fr}}
.sc{text-align:center;padding:13px 6px;border-radius:11px;background:var(--bg)}
.sc .v{font-size:25px;font-weight:700;line-height:1.1}
.sc .k{font-size:12px;color:var(--ink2);margin-top:3px}
.sc.good .v{color:var(--ok)} .sc.mid .v{color:var(--warn)} .sc.low .v{color:var(--bad)}
.fb-sec{margin-bottom:15px;padding-left:14px;border-left:3px solid var(--line)}
.fb-sec.good{border-color:var(--ok)}
.fb-sec.fix{border-color:var(--gold)}
.fb-sec.coach{border-color:var(--blue-l)}
.fb-sec h4{font-size:13px;font-weight:700;color:var(--ink2);letter-spacing:.04em;margin-bottom:6px}
.fb-sec p{font-size:15px;line-height:1.75;white-space:pre-wrap}

/* ── 作业 ── */
.hw-add{display:grid;grid-template-columns:1fr 2fr 1fr auto;gap:9px;align-items:center}
@media(max-width:660px){.hw-add{grid-template-columns:1fr}}
.hw-list{margin-top:16px;display:flex;flex-direction:column;gap:9px}
.hw{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;box-shadow:var(--sh)}
.hw.done{opacity:.6}
.hw.done .hw-t{text-decoration:line-through}
.hw-check{width:22px;height:22px;border:2px solid var(--line);border-radius:7px;
  flex:0 0 auto;display:grid;place-items:center;font-size:13px;color:transparent;background:#fff}
.hw-check.on{background:var(--ok);border-color:var(--ok);color:#fff}
.hw-main{flex:1;min-width:0}
.hw-t{font-size:15px;font-weight:600}
.hw-m{font-size:12px;color:var(--ink2);margin-top:2px}
.hw-tag{font-size:11px;padding:3px 9px;border-radius:99px;background:var(--gold-l);color:#8a6a12;font-weight:600}
.hw-tag.done{background:#e3f3eb;color:var(--ok)}

/* ── 雷达 ── */
.bar{margin-bottom:12px}
.bar-t{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}
.bar-t b{font-weight:700}
.bar-bg{height:8px;background:var(--bg);border-radius:99px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--blue-l),var(--gold));border-radius:99px}

/* ── 弹层 ── */
.modal{position:fixed;inset:0;background:rgba(18,33,46,.5);display:grid;place-items:center;
  z-index:50;padding:20px}
.modal-card{background:#fff;border-radius:16px;padding:26px;width:min(420px,100%);
  max-height:88vh;overflow:auto;box-shadow:var(--sh)}
.modal-card h3{font-size:18px;margin-bottom:16px}
.modal-card label{display:block;font-size:13px;color:var(--ink2);margin-bottom:13px;font-weight:600}
.modal-card input{margin-top:5px}
.modal-card hr{border:0;border-top:1px solid var(--line);margin:16px 0}
.modal-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}

.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;
  vertical-align:-2px;margin-right:7px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ── 题目选择列表 ── */
.qlist{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.qpick{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;transition:.15s;box-shadow:var(--sh)}
.qpick:hover{border-color:var(--blue-l);transform:translateX(3px)}
.qlang{flex:0 0 auto;font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;
  background:#eef2f6;color:var(--ink2);letter-spacing:.04em}
.qlang.en{background:#e7eff8;color:#1b3a5c}
.qtext{flex:1;font-size:15px;line-height:1.5}
.qsec{flex:0 0 auto;font-size:12px;color:var(--ink2)}

/* ── 语音自检 & 手动输入兜底 ── */
.btn.small{padding:6px 12px;font-size:13px}
.diag-text{white-space:pre-wrap;font-size:13px;line-height:1.7;color:var(--ink)}
#manualText{width:100%;box-sizing:border-box;border:1px solid var(--line);
  border-radius:var(--r);padding:12px 14px;font-size:16px;font-family:inherit;
  background:#fffdf8;color:var(--ink);resize:vertical}
#manualText:focus{outline:2px solid var(--gold);border-color:transparent}

/* ── 朗读题正文 ── */
.passage-box{margin-top:12px;background:#fffaef;border:1px solid #f0e3c4;
  border-radius:var(--r);padding:18px 20px}
.passage-head{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:11px}
.passage-head span{font-size:13px;font-weight:700;color:#8a6a12;letter-spacing:.03em}
.passage-text{font-size:17px;line-height:1.85;color:var(--ink);
  white-space:pre-wrap;font-family:Georgia,"Times New Roman",serif}
.passage-text:lang(zh),.passage-box[data-zh] .passage-text{font-family:inherit}

/* ── 示范答案 ── */
.sample-box{margin-top:12px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:12px 15px}
.sample-box summary{font-size:14px;cursor:pointer;color:var(--blue-l);font-weight:600}
.s-hint{color:var(--ink2);font-weight:400;font-size:12px;margin-left:6px}
.sample-body{margin-top:12px}
.s-sec{margin-bottom:15px;padding-left:13px;border-left:3px solid var(--gold)}
.s-sec:last-child{margin-bottom:0}
.s-sec h4{font-size:12px;font-weight:700;color:var(--ink2);
  letter-spacing:.05em;margin-bottom:7px}
.s-en{font-size:15px;line-height:1.8;white-space:pre-wrap;color:var(--ink)}
.s-ans{font-size:19px;font-weight:700;color:var(--blue)}
.s-note{font-size:14px;line-height:1.7;color:var(--ink2);white-space:pre-wrap}
.s-ph{list-style:none;display:flex;flex-direction:column;gap:7px}
.s-ph li{font-size:15px;line-height:1.6;background:var(--bg);padding:9px 13px;
  border-radius:9px;color:var(--ink)}
.s-ph li::before{content:"💬 ";font-size:13px}

/* 小按钮（嵌在标题行里） */
.btn.tiny{padding:5px 11px;font-size:12px;border-radius:8px}

/* ══════════ 顶部导航（7 项，窄屏可横向滚动） ══════════ */
.top-nav{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  flex:1 1 auto;justify-content:flex-start;padding-bottom:2px}
.top-nav::-webkit-scrollbar{display:none}
@media(min-width:900px){.top-nav{justify-content:flex-end}}
.tab{padding:7px 12px;font-size:13.5px}

/* ══════════ 旧缓存警告条（learn.js 版本自检） ══════════ */
.verbar{background:#fff4e5;border:1px solid #f0d9b5;color:#8a5a12;
  padding:11px 16px;border-radius:11px;margin:0 0 14px;font-size:13.5px;
  line-height:1.6}
.verbar b{color:#6b4409}

/* 版本号小字 */
.verline{text-align:center;color:var(--ink2);font-size:11.5px;
  padding:18px 0 6px;opacity:.75}

/* ══════════ 首页：今日任务（进度 + 四张卡片） ══════════ */
.today-panel{margin-bottom:16px}
.today-top{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:11px;gap:10px}
.today-prog{font-size:14px;font-weight:700;color:var(--blue)}

/* 四项训练卡片：宽屏 4 列，平板 2 列，手机 1 列 */
.cards.four{grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:16px}
@media(max-width:1000px){.cards.four{grid-template-columns:1fr 1fr}}
@media(max-width:660px){.cards.four{grid-template-columns:1fr}}
.tcard{padding:17px 16px;display:flex;flex-direction:column}
.tcard h3{font-size:16px;margin:8px 0 4px}
.tcard p{font-size:13px;line-height:1.55;flex:1}
.tcard-foot{display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-top:12px}
.tcard .tmin{font-size:12px;color:var(--ink2);background:var(--bg);
  padding:3px 9px;border-radius:99px;border:1px solid var(--line)}
.tcard .go{margin-top:0;font-size:13.5px}
.tcard.done{background:#f4faf7;border-color:#d6ece1}
.tcard.done .tmin{color:var(--ink2)}
.tcard.done .go.ok{color:var(--ok)}
.tcard.done .card-ico{opacity:.75}
.tcard.accent .tmin{color:#c5d5e4;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18)}
.pb{height:8px;background:var(--bg);border-radius:99px;overflow:hidden;margin-bottom:15px}
.pb-fill{height:100%;width:0;border-radius:99px;transition:width .35s ease;
  background:linear-gradient(90deg,var(--blue-l),var(--gold))}
.plan-list{display:flex;flex-direction:column;gap:8px}
.plan-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--bg);border:1px solid transparent;border-radius:11px;
  padding:11px 14px;transition:.15s}
.plan-row:hover{border-color:var(--blue-l);background:#fff}
.plan-row.done{background:#f2f9f5}
.plan-row .pr-ico{font-size:19px;flex:0 0 auto}
.plan-row .pr-main{flex:1;min-width:0;display:flex;flex-direction:column}
.plan-row .pr-main b{font-size:15px;font-weight:650}
.plan-row .pr-main i{font-size:12px;color:var(--ink2);font-style:normal;margin-top:1px}
.plan-row .pr-tag{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--blue-l);
  padding:4px 10px;border-radius:99px;background:#fff;border:1px solid var(--line)}
.plan-row .pr-tag.ok{color:var(--ok);border-color:#cfe9dd;background:#e9f6ef}
.plan-row.done .pr-main b{color:var(--ink2)}

/* ══════════ 通用：小节标题副标 ══════════ */
.vh-sub{font-size:13px;font-weight:500;color:var(--ink2);margin-left:6px}

/* ══════════ 单词：选项 ══════════ */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px}
@media(max-width:560px){.opts{grid-template-columns:1fr}}
.opt{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:15px 16px;font-size:17px;font-weight:600;text-align:left;
  box-shadow:var(--sh);transition:.15s;letter-spacing:.01em}
.opt:hover{border-color:var(--blue-l);transform:translateY(-2px)}
.opt:disabled{cursor:default;transform:none}
.opt.right{background:#e9f6ef;border-color:var(--ok);color:var(--ok)}
.opt.wrong{background:#fbeaea;border-color:var(--bad);color:var(--bad)}
.opt-play{font-size:14px;opacity:.5;padding:2px 5px;border-radius:6px}
.opt-play:hover{opacity:1;background:var(--bg)}

/* ══════════ 通用：即时反馈 ══════════ */
.wd-fb{margin-top:15px}
.wd-line{font-size:15px;font-weight:650;padding:11px 14px;border-radius:10px}
.wd-line.ok{background:#e9f6ef;color:var(--ok)}
.wd-line.bad{background:#fbeaea;color:var(--bad)}
.wd-eg{font-size:14px;line-height:1.7;color:var(--ink2);margin-top:10px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;display:flex;align-items:flex-start;gap:9px}
.wd-eg .btn{margin-left:auto;flex:0 0 auto}
.wd-next{margin-top:13px}

/* ══════════ 通用：结果卡 ══════════ */
.result-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;box-shadow:var(--sh);margin-top:16px;text-align:center}
.res-big{font-size:38px;font-weight:700;color:var(--blue);line-height:1.1}
.res-sub{font-size:14px;color:var(--ink2);margin-top:7px}
.res-wrong{text-align:left;margin-top:18px;background:var(--bg);border-radius:11px;
  padding:14px 16px}
.res-wrong b{font-size:13px;color:var(--ink2);letter-spacing:.03em}
.res-wrong ul{list-style:none;margin-top:9px;display:flex;flex-direction:column;gap:7px}
.res-wrong li{font-size:16px;font-weight:600;display:flex;align-items:center;gap:8px}
.res-wrong li .btn{margin-left:auto}
.res-btns{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}

/* ══════════ 语法：规则框 + 答案行 ══════════ */
.rule-box{margin-top:12px;background:#fffaef;border:1px solid #f0e3c4;
  border-radius:var(--r);padding:13px 17px}
.rule-box summary{font-size:14px;font-weight:700;color:#8a6a12;cursor:pointer}
.rule-text{font-size:14.5px;line-height:1.85;color:var(--ink);margin-top:11px;
  white-space:pre-wrap}
.gm-ans{display:flex;gap:10px;align-items:center;margin-top:15px}
.gm-ans input{flex:1;font-size:17px;font-weight:600}
.gm-ans .btn{flex:0 0 auto}

/* ══════════ 生活口语：句库 ══════════ */
#lfPhrases li{display:block;position:relative;padding-right:66px}
#lfPhrases li .btn{position:absolute;right:9px;top:9px}
.ph-zh{font-size:13px;color:var(--ink2);margin-top:4px}