:root{
  --paper:#FBF8F1;
  --card:#FFFFFF;
  --ink:#20242B;
  --ink2:#5C6472;
  --ink3:#98A0AC;
  --line:#EAE3D6;
  --line2:#F2EDE3;
  --red:#B23A32;
  --red-soft:#F8E9E6;
  --jade:#2E6B5C;
  --jade-soft:#E7F1ED;
  --gold:#A87A24;
  --gold-soft:#F8EFDC;
  --blue:#37628F;
  --blue-soft:#E9F0F7;
  --r:16px;
  --r-sm:10px;
  --shadow:0 1px 2px rgba(32,36,43,.04), 0 10px 30px rgba(32,36,43,.05);
}
/* hidden 一律真的不显示：.item / .btn 这类自带 display:flex 的元素会盖掉
   浏览器默认的 [hidden]{display:none}，搜索时该藏的东西就藏不掉。 */
[hidden]{display:none!important}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:15px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.serif{font-family:"Songti SC","Noto Serif SC","STSong","SimSun",serif}

.wrap{max-width:760px;margin:0 auto;padding:0 18px 120px}

/* top bar */
.topbar{position:sticky;top:0;z-index:30;background:rgba(251,248,241,.92);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}
.topbar-in{max-width:760px;margin:0 auto;height:56px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
/* ---------- 品牌 ----------
   2026-10-25：不再是「红底方块里一个『字』」。
   现在这里要同时说清两件事——**主子是谁**（学霸星球）和**这是哪个站**（语基强化 · 语文）。
   所以标识做成一颗带轨道环的星球：主行是集群品牌，副行是当前分站。
   轨道环故意溢出球体 6px，是这个标识唯一「不规矩」的地方，
   小尺寸下正圆看起来像头像，加一道斜环才像品牌。 */
.logo{display:flex;align-items:center;gap:15px;min-width:0}  /* 15px 是因为轨道环左右各溢出 7px，留给文字的净空只有 8px */
.logo-txt{display:flex;flex-direction:column;justify-content:center;min-width:0}
.logo-mark{
  position:relative;flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 34% 27%,#FFDDB0 0%,#E87A55 24%,#BE3F35 60%,#7E231D 100%);
  box-shadow:
    inset -2px -3px 7px rgba(72,16,11,.5),
    inset 1px 2px 3px rgba(255,226,190,.35),
    0 3px 9px -4px rgba(126,35,29,.7),
    /* 卫星：球体 30px、spread -12px 把阴影收成 6px 的小圆点，
       偏移到右上轨道上。少这个点，圆就是「头像」不是「星球」。 */
    15px -12px 0 -12px #CFA057;
}
.logo-mark::before{          /* 轨道环：上半圈偏金，像被同一束光照亮 */
  content:"";position:absolute;left:50%;top:50%;width:44px;height:15px;
  transform:translate(-50%,-50%) rotate(-18deg);border-radius:50%;
  border:1.6px solid rgba(158,44,36,.55);border-top-color:rgba(226,171,78,.95);
}
.logo-mark::after{           /* 高光点 */
  content:"";position:absolute;left:4px;top:4px;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.9),rgba(255,255,255,0) 72%);
}
.logo-name{font-family:"Songti SC","Noto Serif SC",serif;font-size:16.5px;line-height:1.2;letter-spacing:.06em;color:var(--ink)}
.logo-sub{
  display:flex;align-items:center;gap:4px;margin-top:2px;
  font-size:10.5px;line-height:1.2;color:var(--ink3);letter-spacing:.04em;white-space:nowrap;
}
.logo-sub b{font-weight:400;color:var(--red);opacity:.9}
.topnav{display:flex;gap:16px;font-size:13px;color:var(--ink2)}
.topnav a:hover{color:var(--red)}

/* ---------- 分站切换（脚本注入，见 assets/js/brand.js） ---------- */
.brand{position:relative;display:flex;align-items:center;gap:9px;min-width:0}
.brand-btn{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;
  border:1px solid var(--line);background:rgba(255,255,255,.78);color:var(--ink3);
  font-size:10.5px;line-height:1;padding:5px 7px;border-radius:999px;cursor:pointer;
  letter-spacing:.04em;transition:color .18s,border-color .18s,background .18s;
}
.brand-btn:hover{border-color:#E2C6A9;color:var(--red)}
.brand-btn i{
  width:5px;height:5px;border-right:1.2px solid currentColor;border-bottom:1.2px solid currentColor;
  transform:rotate(45deg) translateY(-1px);transition:transform .2s;
}
.brand-btn[aria-expanded="true"]{color:var(--red);background:#FDF4F1;border-color:rgba(178,58,50,.3)}
.brand-btn[aria-expanded="true"] i{transform:rotate(-135deg) translateY(-1px)}
.brand-pop{
  position:absolute;left:0;top:calc(100% + 11px);z-index:40;
  width:268px;max-width:calc(100vw - 32px);padding:12px;border-radius:16px;
  background:#fff;border:1px solid var(--line);text-align:left;
  box-shadow:0 18px 44px -20px rgba(32,36,43,.34),0 2px 6px rgba(32,36,43,.05);
  animation:bpIn .18s ease-out;
}
@keyframes bpIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.bp-h{font-size:10px;letter-spacing:.16em;color:var(--ink3);padding:0 5px 9px}
.bp-l{list-style:none;margin:0;padding:0}
.bp-i{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:9px;font-size:12.5px;color:var(--ink2)}
.bp-i b{font-family:"Songti SC","Noto Serif SC",serif;font-size:13.5px;font-weight:400;color:var(--ink2);letter-spacing:.03em}
.bp-i span{margin-left:auto;font-size:10px;color:#9AA3AF;letter-spacing:.02em;white-space:nowrap}
.bp-i.on{background:#FBF3F1}
.bp-i.on b{color:var(--red)}
.bp-i.on span{color:#B9786F}
.bp-dot{width:5px;height:5px;border-radius:50%;background:#DCD5C7;flex:0 0 auto}
.bp-i.on .bp-dot{background:var(--red);box-shadow:0 0 0 3px rgba(178,58,50,.13)}
.bp-f{margin-top:9px;padding:9px 5px 2px;border-top:1px dashed var(--line);font-size:10.5px;line-height:1.7;color:var(--ink3)}
.vip-pill{font-size:12px;padding:4px 10px;border-radius:999px;background:var(--gold-soft);color:var(--gold);border:1px solid #EEDCB5;white-space:nowrap}

/* hero */
.hero{padding:36px 0 24px}
.hero-kicker{display:inline-flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.14em;color:var(--red);border:1px solid #E9C9C4;background:#FCF1EF;padding:4px 10px;border-radius:999px}
.hero h1{font-family:"Songti SC","Noto Serif SC",serif;font-size:clamp(30px,7vw,42px);line-height:1.25;margin:16px 0 10px;letter-spacing:.02em;font-weight:500}
.hero h1 em{font-style:normal;color:var(--red)}
.hero p{margin:0;color:var(--ink2);font-size:15px;max-width:34em}
.hero-chain{display:flex;align-items:center;gap:8px;margin-top:18px;flex-wrap:wrap;font-family:"Songti SC",serif;color:var(--ink2);font-size:14px}
.hero-chain span.dot{width:4px;height:4px;border-radius:50%;background:#D9D1C2}

/* section */
.sec{margin-top:34px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.sec-title{display:flex;align-items:center;gap:9px;font-family:"Songti SC",serif;font-size:19px;font-weight:500;letter-spacing:.02em}
.sec-title::before{content:"";width:3px;height:17px;border-radius:2px;background:var(--red);display:inline-block}
.sec-more{font-size:13px;color:var(--ink3)}

/* grades */
.grades{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:10px}
.gcard{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:14px 8px 12px;text-align:center;transition:.18s ease;position:relative;display:block}
.gcard:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#DCCFBA}
.gcard .num{font-family:"Songti SC",serif;font-size:23px;line-height:1.2}
.gcard .lbl{font-size:11px;color:var(--ink3);margin-top:2px}
.gcard .st{font-size:11px;margin-top:6px;display:inline-block;padding:1px 7px;border-radius:999px}
.gcard.live{border-color:#D8C7A6;background:#FFFDF7}
.gcard.live .st{background:var(--jade-soft);color:var(--jade)}
.gcard.plan .st{background:#F4F1EA;color:var(--ink3)}
.gcard.plan{opacity:.72}
.gcard .corner{position:absolute;top:8px;right:9px;width:5px;height:5px;border-radius:50%;background:#D9D1C2}
.gcard.live .corner{background:var(--red)}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.card+.card{margin-top:12px}
.row{display:flex;gap:10px;align-items:center}
.between{justify-content:space-between}
.muted{color:var(--ink2)}
.tiny{font-size:12px;color:var(--ink3)}

.badge{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid;white-space:nowrap;line-height:1.7}
.badge.free{color:var(--jade);border-color:#CDE0D8;background:var(--jade-soft)}
.badge.vip{color:var(--gold);border-color:#EBD9B4;background:var(--gold-soft)}
.badge.soft{color:var(--ink2);border-color:var(--line);background:#FAF7F0}

/* unit / item list */
.unit-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:22px 0 10px}
.unit-title{font-family:"Songti SC",serif;font-size:17px}
.item{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card);transition:.16s;margin-bottom:10px}
.item:hover{border-color:#DCCFBA;box-shadow:var(--shadow)}
.item-glyph{width:46px;height:46px;flex:0 0 46px;border-radius:12px;display:grid;place-items:center;font-family:"Songti SC",serif;font-size:20px;background:#FAF6EC;border:1px solid var(--line2);color:var(--ink)}
.item-glyph.ci{font-size:12px;line-height:1.25;text-align:center;padding:4px}
.item-glyph.cy{font-size:11px;line-height:1.2;text-align:center;padding:4px;background:#FBF2E4;color:#7A5418}
.item-glyph.gw{font-size:11px;line-height:1.2;text-align:center;padding:4px;background:#EDF1F8;color:#37507A}
.item-body{flex:1;min-width:0}
.item-title{font-family:"Songti SC",serif;font-size:16px}
.item-meta{font-size:12px;color:var(--ink3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-go{color:var(--ink3);font-size:18px}

/* ---------- 年级页：统计头 + 吸顶筛选 + 单元手风琴 ----------
   为什么要有这一层：二年级 362 条如果平铺，整页 38571px（约 45 屏），
   手机上第一个知识点在 3529px 处。折叠后首屏就是导航，条目按需展开。 */
.g-title{font-size:30px;margin:2px 0 8px;font-weight:500;letter-spacing:.02em}
.g-stats{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--ink2)}
.g-stats b{font-family:"Songti SC",serif;font-size:17px;color:var(--ink);font-weight:500}
.g-stats i{width:4px;height:4px;border-radius:50%;background:#D9D1C2}
.g-hint{margin:8px 0 0;font-size:12.5px;color:var(--ink3)}
.g-resume{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:8px 13px;border-radius:11px;background:#fff;border:1px solid var(--line);font-size:13.5px;box-shadow:var(--shadow);max-width:100%}
.g-resume .tiny{color:var(--ink3);flex:0 0 auto}
.g-resume .gr-arrow{color:var(--ink3)}
.g-note{margin:16px 0 0;font-size:12.5px;color:var(--ink2);background:#FBF3E3;border:1px solid #EFE2C8;border-radius:12px;padding:9px 12px;line-height:1.75}

/* top 用变量：顶栏高度在真机/桌面/缩放时不是常数（实测 53，样式写 56 会留 3px 缝）。
   pages.js 渲染完会用 offsetHeight 写回 --topbar-h。 */
.gfilter{position:sticky;top:var(--topbar-h,56px);z-index:25;margin:14px -18px 0;padding:10px 18px;background:rgba(251,248,241,.96);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}
.segrow{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:2px}
.segrow::-webkit-scrollbar{display:none}
.seg{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;min-height:34px;border:1px solid var(--line);background:#FFFDF8;color:var(--ink2);border-radius:999px;padding:6px 9px;font-size:12.5px;line-height:1.5;cursor:pointer;transition:.15s;font-family:inherit}
.seg b{font-family:"Songti SC",serif;font-weight:500;font-size:10.5px;color:var(--ink3)}
.seg.on{background:var(--ink);border-color:var(--ink);color:#FFF9EC}
.seg.on b{color:#CDC5B4}
.qrow{display:flex;gap:8px;margin-top:8px;align-items:center}
.qrow input{flex:1;min-width:0;border:1px solid var(--line);background:#fff;border-radius:11px;padding:8px 12px;font-size:14px;color:var(--ink);outline:none;-webkit-appearance:none}
.qrow input:focus{border-color:#D8C7A6;box-shadow:0 0 0 3px rgba(168,122,36,.08)}
.qrow .btn{flex:0 0 auto}

.acc{margin-top:10px;border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden;transition:.16s}
.acc[hidden]{display:none}
.acc.open{border-color:#E2D6C0;box-shadow:var(--shadow)}
.acc-h{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;padding:13px 14px;cursor:pointer;color:inherit;font-family:inherit;min-height:56px}
.acc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.acc-t{font-family:"Songti SC",serif;font-size:15.5px;line-height:1.45}
.acc-p{font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-n{flex:0 0 auto;font-size:11.5px;color:var(--ink3);background:#F6F1E6;border-radius:999px;padding:1px 8px}
.acc-x{flex:0 0 auto;color:var(--ink3);font-size:17px;transition:.18s;display:inline-block}
.acc.open .acc-x{transform:rotate(90deg)}
.acc-b{padding:10px;border-top:1px solid var(--line2)}
.acc-b .item{margin-bottom:8px}
.acc-b .item:last-child{margin-bottom:0}
.item[hidden]{display:none}
.gempty{margin-top:18px;padding:26px 0;text-align:center;font-size:14px;color:var(--ink2)}
.gempty[hidden]{display:none}


/* stepper */
.steps{display:flex;gap:6px;margin:18px 0 6px}
.step{flex:1;text-align:center;font-size:12px;padding:7px 0;border-radius:999px;border:1px solid var(--line);color:var(--ink3);background:#FDFBF6;font-family:inherit;cursor:pointer;min-height:32px;transition:.15s}
.step.off{opacity:.42;cursor:default}
.step:not(.off):active{transform:scale(.97)}
.step.on{background:var(--ink);color:#FFF9EC;border-color:var(--ink)}
.step.past{background:var(--jade-soft);color:var(--jade);border-color:#CFE1D9}

/* knowledge blocks */
.kblock{margin-top:14px}
.kblock-h{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.kblock-num{width:20px;height:20px;border-radius:7px;background:var(--ink);color:#fff;font-size:12px;display:grid;place-items:center;flex:0 0 20px}
.kblock-t{font-family:"Songti SC",serif;font-size:16px}
.kv{display:flex;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line2);font-size:14px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--ink3);flex:0 0 76px}
.kv .v{flex:1;color:var(--ink)}
.pre-line{white-space:pre-line;line-height:2}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:13px;padding:5px 11px;border-radius:9px;background:#FAF6EC;border:1px solid var(--line2);color:var(--ink)}
.chip b{font-family:"Songti SC",serif;font-weight:500}
.chip.r{background:var(--red-soft);border-color:#EFD3CE;color:#8C2E27}
.chip.j{background:var(--jade-soft);border-color:#CFE1D9;color:#255A4D}
.chip.b{background:var(--blue-soft);border-color:#D5E2F0;color:#2C4E75}
.chip.g{background:var(--gold-soft);border-color:#EBD9B4;color:#7A5418}

/* origin story */
.story{background:#FFFDF7;border:1px solid #EFE6D3;border-radius:14px;padding:16px;font-size:14.5px;line-height:1.9}
.story p{margin:0 0 10px}
.story p:last-child{margin-bottom:0}
.evo{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:14px}
.evo-box{flex:1;min-width:64px;text-align:center;border:1px solid var(--line2);background:#fff;border-radius:10px;padding:8px 4px}
.evo-box .g{font-family:"Songti SC",serif;font-size:21px;line-height:1.3;color:#7A5418}
.evo-box .n{font-size:10.5px;color:var(--ink3);margin-top:2px}
.evo-arrow{color:#D9D1C2;font-size:12px}

/* lock */
.locked{position:relative;border-radius:14px;overflow:hidden}
.locked .blur{filter:blur(3.5px);opacity:.55;pointer-events:none;user-select:none}
.lock-mask{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px;text-align:center;background:linear-gradient(180deg,rgba(251,248,241,.55),rgba(251,248,241,.96) 55%)}
.lock-mask .lk{font-size:13px;color:var(--ink2)}
.lock-mask .lk b{color:var(--gold)}

/* buttons */
/* nowrap：卡片页底部「我学会了 + 问 AI」并排时，问 AI 曾被挤成两行竖字 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:11px;padding:11px 18px;font-size:14px;border:1px solid transparent;cursor:pointer;transition:.16s;background:#F4F1EA;color:var(--ink);white-space:nowrap}
.btn:hover{filter:brightness(.98)}
.btn-primary{background:var(--red);color:#fff;border-color:#A0322B}
.btn-primary:hover{background:#A0322B}
.btn-dark{background:var(--ink);color:#FFF9EC}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-gold{background:var(--gold-soft);color:var(--gold);border-color:#E7D3A9}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:9px}
/* flex-basis 0：放在 flex 行里时只吃剩余宽度，不把旁边的按钮压成一条 */
.btn-block{width:100%;flex:1 1 0;min-width:0}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* quiz */
.quiz{background:#FFFDF7;border:1px solid #EFE6D3;border-radius:14px;padding:16px}
.qtext{font-size:15px;line-height:1.8;margin-bottom:12px}
.qtext b{color:var(--red);font-weight:500}
.opt{display:flex;gap:10px;align-items:center;border:1px solid var(--line);background:#fff;border-radius:11px;padding:11px 14px;margin-bottom:8px;cursor:pointer;transition:.14s;font-size:14px}
.opt:hover{border-color:#DCCFBA;background:#FDFAF3}
.opt .idx{width:20px;height:20px;flex:0 0 20px;border-radius:6px;background:#F4F1EA;color:var(--ink2);font-size:12px;display:grid;place-items:center}
.opt.correct{border-color:#A9CDBE;background:var(--jade-soft)}
.opt.correct .idx{background:var(--jade);color:#fff}
.opt.wrong{border-color:#E5B4AE;background:var(--red-soft)}
.opt.wrong .idx{background:var(--red);color:#fff}
.explain{margin-top:10px;font-size:13.5px;color:var(--ink2);background:#fff;border:1px dashed var(--line);border-radius:10px;padding:11px 13px;line-height:1.8}

/* chat */
.chat{display:flex;flex-direction:column;gap:12px;margin:16px 0}
.msg{max-width:88%;padding:11px 14px;border-radius:15px;font-size:14.5px;line-height:1.85;white-space:pre-line}
.msg.me{align-self:flex-end;background:var(--ink);color:#FFF9EC;border-bottom-right-radius:5px}
.msg.ai{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px}
.msg.ai .who{font-size:11px;color:var(--ink3);margin-bottom:3px}
.chat-input{display:flex;gap:8px;align-items:flex-end;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;position:sticky;bottom:76px}
.chat-input textarea{flex:1;border:none;outline:none;resize:none;font-family:inherit;font-size:14.5px;line-height:1.6;padding:6px 4px;max-height:110px;background:transparent;color:var(--ink)}
.quick{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-top:10px;-webkit-overflow-scrolling:touch}
.quick::-webkit-scrollbar{display:none}
.quick button{white-space:nowrap;font-size:12.5px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink2)}

/* member */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.plan{border:1px solid var(--line);border-radius:14px;padding:14px 10px;text-align:center;background:#fff;position:relative}
.plan.best{border-color:#D9BE86;background:#FFFDF6}
.plan .p-name{font-size:12px;color:var(--ink2)}
.plan .p-price{font-family:"Songti SC",serif;font-size:23px;margin:6px 0 0;color:var(--red)}
.plan .p-price small{font-size:12px;color:var(--ink3);font-family:inherit}
.plan .p-note{font-size:11px;color:var(--ink3);margin-top:2px}
.plan .tag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-size:10.5px;background:var(--gold);color:#fff;padding:2px 8px;border-radius:999px}

.qr-box{border:1px dashed #D8C7A6;border-radius:16px;padding:22px;text-align:center;background:#FFFDF7}
.qr-img{width:186px;height:186px;object-fit:contain;border-radius:10px;background:#fff;margin:0 auto;display:block}
.qr-ph{width:186px;height:186px;margin:0 auto;border-radius:10px;background:repeating-linear-gradient(45deg,#FAF6EC,#FAF6EC 8px,#F4EEDF 8px,#F4EEDF 16px);display:grid;place-items:center;color:#A89873;font-size:12px;line-height:1.7;text-align:center;padding:12px}

.field{display:block;margin-top:12px}
.field .lab{font-size:12.5px;color:var(--ink2);margin-bottom:6px;display:block}
.field input{width:100%;border:1px solid var(--line);border-radius:11px;padding:11px 13px;font-size:14px;outline:none;background:#fff;font-family:inherit;color:var(--ink)}
.field input:focus{border-color:#C9B48C}

.dark-card{background:#24282F;color:#F6F0E2;border-radius:18px;padding:22px;border:1px solid #33383F}
.dark-card h3{font-family:"Songti SC",serif;font-size:19px;font-weight:500;margin:0 0 6px}
.dark-card p{color:#BDB6A6;font-size:13.5px;margin:0}
.dark-card .btn-gold{margin-top:14px;background:#F0E1BE;color:#4A3A12;border-color:#E2CFA2}

/* empty / notice */
.empty{text-align:center;padding:52px 20px;border:1px dashed var(--line);border-radius:18px;background:#FFFDF7}
.empty h3{font-family:"Songti SC",serif;font-size:19px;font-weight:500;margin:0 0 8px}
.empty p{color:var(--ink2);font-size:14px;margin:0 0 18px}

.notice{display:flex;gap:10px;align-items:flex-start;background:var(--blue-soft);border:1px solid #D5E2F0;border-radius:12px;padding:12px 14px;font-size:13px;color:#2C4E75;line-height:1.75}
.notice.warn{background:var(--gold-soft);border-color:#EBD9B4;color:#7A5418}

/* 回到顶部：滚过 1200px 才出现，浮在底部 tab 栏上方 */
.to-top{position:fixed;right:14px;bottom:calc(74px + env(safe-area-inset-bottom));z-index:45;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(255,253,247,.96);color:var(--ink2);font-size:17px;line-height:1;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.2s;cursor:pointer;backdrop-filter:blur(8px)}
.to-top.show{opacity:1;pointer-events:auto}

/* toast */
#toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,16px);background:#24282F;color:#FFF9EC;font-size:13.5px;padding:11px 18px;border-radius:12px;opacity:0;pointer-events:none;transition:.24s;z-index:99;max-width:82vw;text-align:center;line-height:1.6}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* tabbar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,253,247,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px 0 max(6px,env(safe-area-inset-bottom))}
.tabbar-in{max-width:760px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
.tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;font-size:10.5px;color:var(--ink3);min-width:0}
.tab .ic{font-family:"Songti SC",serif;font-size:16px;line-height:1.1}
.tab.on{color:var(--red)}

.footer{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--ink3);line-height:1.9}
.footer a{color:var(--ink2)}

/* score */
.score-hero{text-align:center;padding:22px 0 6px}
.score-hero .big{font-family:"Songti SC",serif;font-size:46px;line-height:1.1;color:var(--red)}
.score-hero .rank{font-family:"Songti SC",serif;font-size:17px;margin-top:4px}
.stars{font-size:20px;letter-spacing:4px;color:var(--gold)}

@media (max-width:520px){
  .hero{padding:26px 0 18px}
  .topnav{display:none}
  .plans{gap:8px}
  .plan .p-price{font-size:20px}
}

/* ============================================================
   触屏 / 响应式适配层
   手机与平板优先，桌面保留完整双栏布局
   ============================================================ */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overscroll-behavior-y:contain}
img{max-width:100%}
button,a,.opt,.plan,.gcard,.tab{touch-action:manipulation}
input,select,textarea{font-size:16px} /* 防止 iOS 聚焦时自动放大页面 */

/* 触控目标 ≥44px */
.btn{min-height:46px}
.btn-sm{min-height:38px;padding:8px 14px}
.opt{min-height:54px}
.tab{min-height:50px}
.gcard{min-height:98px}
.plan{min-height:92px}
.quick button{min-height:38px}

/* 触屏设备取消 hover 残留 */
@media (hover:none){
  .gcard:hover,.item:hover{transform:none;box-shadow:none;border-color:var(--line)}
  .item:hover{border-color:var(--line)}
  .btn:hover,.btn-primary:hover{filter:none}
}

/* 键盘弹起时输入框贴住底栏之上 */
.chat-input{bottom:calc(72px + env(safe-area-inset-bottom))}
textarea,input{ -webkit-appearance:none;appearance:none;border-radius:11px }
select{-webkit-appearance:none;appearance:none;background-image:none}

/* 小屏手机（≤420px）收紧留白、放大可读性 */
@media (max-width:420px){
  .wrap{padding:0 14px 112px}
  /* 吸顶筛选是全出血的：负边距必须跟着 .wrap 的内边距改，否则多出 4px，
     整页能左右晃（grade 页实测 394 > 390）。 */
  .gfilter{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
  .topbar-in{padding:0 14px;height:52px}
  .hero{padding:22px 0 14px}
  .hero h1{font-size:29px}
  .hero p{font-size:14px}
  .sec{margin-top:26px}
  .sec-title{font-size:18px}
  .card{padding:15px}
  .item{padding:12px 13px;gap:11px}
  .item-glyph{width:42px;height:42px;flex:0 0 42px}
  .kv .k{flex:0 0 62px;font-size:13px}
  .kv .v{font-size:14px}
  .step{font-size:11px;padding:6px 0}
  .kblock-t{font-size:15px}
  .story{padding:14px;font-size:14px;line-height:1.85}
  .quiz{padding:14px}
  .qtext{font-size:14.5px}
  .plan{padding:12px 6px}
  .plan .p-price{font-size:19px}
  .plan .p-name{font-size:11.5px}
  .plan .p-note{font-size:10px}
  .plan .tag{font-size:9.5px;padding:2px 6px;white-space:nowrap}
  .btn{padding:11px 15px}
  .qr-img,.qr-ph{width:166px;height:166px}
  .msg{max-width:92%}
  /* 副行以前是隐藏的（那时只有「字 · 词 · 成语 · 古文」这类装饰文字，藏了不损失信息）。
     现在副行是「语基强化 · 语文」，是品牌层级里的一环，藏掉就只剩一个光秃秃的「学霸星球」。
     所以不藏，只收：小屏顶栏 52px 正好放两行，≤520px 时导航本来就收进底部栏，宽度够。 */
  .logo{gap:13px}
  .logo-mark{width:26px;height:26px}
  .logo-mark::before{width:40px;height:13px}
  .logo-name{font-size:15.5px;letter-spacing:.05em}
  .logo-sub{font-size:10px}
}

/* 平板竖屏 / 小笔记本（≥700px）：更宽的内容区与双列年级 */
@media (min-width:700px){
  body{font-size:15.5px}
  .wrap{max-width:880px}
  .topbar-in{max-width:880px}
  .tabbar-in{max-width:880px}
  .hero{padding:44px 0 28px}
  .grades{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
  .card{padding:22px}
  .story{font-size:15px}
  .chat .msg{max-width:78%}
  .steps{gap:8px}
  .step{font-size:13px;padding:8px 0}
}

/* 桌面（≥1000px）：恢复双栏，左内容右进度/会员，顶栏导航常显 */
@media (min-width:1000px){
  body{font-size:16px}
  .tabbar{display:none}
  .topnav{display:flex;gap:22px;font-size:13.5px}

  .wrap{
    max-width:1080px;
    padding:0 28px 64px;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,360px);
    column-gap:34px;
    align-items:start;
  }
  .hero,.footer{grid-column:1 / -1}
  .sec{margin-top:0;margin-bottom:32px}
  .sec--wide{grid-column:1 / -1}
  .sec--side{align-self:start}

  /* 新页面（计划/单元测验）不走两栏：纵向流程页，桌面给居中单栏 */
  body[data-page="plan"] .wrap{display:block;max-width:880px}
  body[data-page="unit-test"] .wrap{display:block;max-width:720px}

  .hero h1{font-size:44px}
  .hero p{font-size:16px;max-width:38em}
  .grades{grid-template-columns:repeat(5,1fr);gap:12px}
  .gcard{padding:18px 8px}
  .gcard .num{font-size:26px}

  .item{padding:16px 18px}
  .item-glyph{width:50px;height:50px;flex:0 0 50px;font-size:22px}
  .dark-card{padding:26px}

  /* 阅读类页面：单栏居中，更宽更舒服 */
  body[data-page="card"] .wrap,
  body[data-page="grade"] .wrap,
  body[data-page="practice"] .wrap,
  body[data-page="ai"] .wrap,
  body[data-page="member"] .wrap{
    display:block;
    max-width:820px;
  }
  body[data-page="member"] .wrap{max-width:880px}
  body[data-page="card"] .wrap{padding-top:20px}
  body[data-page="ai"] .chat{max-height:none}
  body[data-page="ai"] .chat-input{bottom:16px}
  .chat .msg{max-width:74%}
  .story{line-height:2}
}

/* 大屏（≥1400px）：留白更从容 */
@media (min-width:1400px){
  .wrap{max-width:1180px;grid-template-columns:minmax(0,1fr) minmax(0,380px)}
  body[data-page="card"] .wrap,body[data-page="ai"] .wrap{max-width:880px}
  body[data-page="member"] .wrap{max-width:920px}
}

/* 横屏手机（高度很小）：压缩纵向节奏 */
@media (max-height:480px) and (orientation:landscape){
  .hero{padding:18px 0 12px}
  .hero h1{font-size:24px}
  .chat-input{bottom:12px}
}


/* 触摸反馈与刘海屏安全区 */
.topbar{padding-top:env(safe-area-inset-top)}
.btn:active{transform:scale(.985);filter:brightness(.96)}
.opt:active{background:#F7F2E7;border-color:#DCCFBA}
.gcard:active{background:#FFFCF4}
.item:active{background:#FFFCF4}
.tab:active .ic{transform:scale(.94)}
.chip{line-height:1.5}

/* ============================================================
   浅绿主题 + 生动底纹
   底色：豆绿；纹样：田字格（语文课的记忆点）；光斑：柳绿/青绿/暖黄
   ============================================================ */
:root{
  --paper:#F1F8EC;
  --card:#FFFFFF;
  --ink:#1C2A22;
  --ink2:#55685B;
  --ink3:#8CA093;
  --line:#DEE9D4;
  --line2:#EBF2E3;
  --red:#B0392F;
  --red-soft:#F8E8E4;
  --jade:#2C6A4C;
  --jade-soft:#E3F0E4;
  --gold:#A37A1D;
  --gold-soft:#F7EED7;
  --blue:#356A86;
  --blue-soft:#E6EFF4;
  --shadow:0 1px 2px rgba(28,42,34,.04), 0 12px 30px rgba(28,42,34,.06);
}

body{
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cg fill='none' stroke='%232C6A4C'%3E%3Cpath d='M0 0H46V46' stroke-opacity='0.075'/%3E%3Cpath d='M23 0V46M0 23H46' stroke-opacity='0.04'/%3E%3C/g%3E%3C/svg%3E");
  background-size:46px 46px;
  background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(620px 420px at 6% -6%, rgba(151,196,89,.20), rgba(151,196,89,0) 70%),
    radial-gradient(520px 380px at 103% 4%, rgba(93,202,165,.18), rgba(93,202,165,0) 70%),
    radial-gradient(760px 520px at 50% 112%, rgba(239,159,39,.09), rgba(239,159,39,0) 70%);
}
/* 这一层原来写的是 .topbar,.wrap,.tabbar{position:relative;z-index:1}。
   它只是为了让内容压在 body::before 的背景光晕（z-index:0）上面，却顺手把
   .topbar 的 sticky 和 .tabbar 的 fixed 一起改成了 relative —— 后果是全站
   顶部导航和底部 tab 栏一滚动就消失，翻到 3000px 处想回上一个板块只能一路往回拖。
   现在只给 .wrap 兜底 z-index，两个导航条各用各的定位。 */
.wrap{position:relative;z-index:1}
.topbar{z-index:30}
.tabbar{z-index:40}
.topbar{background:rgba(241,248,236,.9)}
.tabbar{background:rgba(250,253,245,.96)}

.card,.item,.gcard,.dark-card,.quiz,.story{box-shadow:0 1px 2px rgba(28,42,34,.03)}
.gcard.live{background:#FFFCF1;border-color:#DDD3AE}
.item{background:#FFFEFB}
.chip{background:#F5FAEF;border-color:#E3EDDA}
.chip.j{background:#E4F1E4;border-color:#CBE0C8;color:#255A3E}
.chip.g{background:#F8EFD8;border-color:#EBD9B4;color:#7A5418}
.chip.b{background:#E7F0F5;border-color:#D3E2EC;color:#2C5068}
.qr-box{background:#FFFDF4;border-color:#DDD3AE}
.qr-ph{background:repeating-linear-gradient(45deg,#F5FAEF,#F5FAEF 8px,#EAF3E2 8px,#EAF3E2 16px);color:#93A78A}
.story{background:#FEFDF6;border-color:#E9E2CC}

.dark-card{background:#203026;border-color:#2C4034;color:#F2F7EC}
.dark-card h3{color:#F4F9EE}
.dark-card p{color:#B9C9BB}
.dark-card .btn-gold{background:#F0E1BE;color:#4A3A12;border-color:#E2CFA2}

.lock-mask{background:linear-gradient(180deg,rgba(241,248,236,.5),rgba(241,248,236,.97) 55%)}
#toast{background:#203026;color:#F4F9EE}
select{background:#FFFFFF}
input,textarea{background:#FFFEFB}

/* 首页巨大「文」水印 + 田字格质感 */
.hero{position:relative}
.hero::after{
  content:"文";position:absolute;right:-4px;top:-36px;
  font-family:"Songti SC","Noto Serif SC",serif;font-size:162px;line-height:1;
  color:rgba(44,106,76,.06);pointer-events:none;user-select:none;
}
.hero>*{position:relative;z-index:1}
@media (max-width:520px){.hero::after{font-size:112px;top:-18px;right:-10px}}

/* 会员卡与按钮在绿底上的对比微调 */
.btn-primary{background:var(--red);border-color:#9C3129}
.btn-primary:hover{background:#9C3129}
.hero-kicker{background:#FDF3EF;border-color:#EBCDC5;color:#9E3B31}
.sec-title::before{background:var(--red)}


/* 提醒条 / 打卡开关 / 覆盖率 */
.nudge{display:flex;align-items:center;gap:12px;background:#FFFAE9;border:1px solid #EBD9B4;border-radius:14px;padding:13px 14px;margin-bottom:10px}
.nudge .n-ic{font-size:18px;line-height:1;flex:0 0 auto}
.nudge .n-tx{flex:1;font-size:13.5px;color:#7A5A18;line-height:1.6}
.nudge .btn{flex:0 0 auto}
.divider{height:1px;background:var(--line2);margin:14px 0}
.time-input{border:1px solid var(--line);border-radius:11px;padding:9px 12px;font-size:16px;background:#fff;color:var(--ink);font-family:inherit;flex:0 0 auto}
.switch{position:relative;display:inline-block;width:46px;height:26px;flex:0 0 46px;cursor:pointer}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch span{position:absolute;inset:0;background:#DDE6D6;border-radius:99px;transition:.2s}
.switch span::after{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.switch input:checked + span{background:var(--jade)}
.switch input:checked + span::after{transform:translateX(20px)}
.cov-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center}
.cov-n{font-size:24px;line-height:1.25;color:var(--ink)}
.bar{height:7px;border-radius:99px;background:#EAF1E2;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#7FB77E,#2C6A4C);border-radius:99px}
.cov-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin-top:12px}
.cov-chip{display:flex;flex-direction:column;gap:1px;border:1px solid var(--line);border-radius:11px;padding:8px 10px;font-size:11.5px;color:var(--ink3);background:#FBFDF8}
.cov-chip b{font-size:16px;color:var(--ink2);line-height:1.25}
.cov-chip.on{border-color:#CBE0C8;background:#F3FAEF}
.cov-chip.on b{color:var(--jade)}
.cov-chip span{font-size:10.5px}
@media (max-width:420px){.cov-grid{gap:6px}.cov-n{font-size:21px}.nudge{flex-wrap:wrap}.nudge .n-tx{flex:1 1 100%}}

/* 发音条 */
.audio-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.spk{width:46px;height:46px;flex:0 0 46px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:19px;line-height:1;display:grid;place-items:center;cursor:pointer;transition:.16s;padding:0}
.spk:hover{border-color:#C9B48C;background:#FFFDF6}
.spk:active{transform:scale(.94)}
.spk[data-slow="1"]{font-size:17px;border-style:dashed}
.audio-bar .tiny{flex:1;min-width:120px}

/* ---------- 笔顺（第三方 hanzi-writer，加载不到时这块自动消失） ---------- */
.stroke-card{padding:2px 0}
.stroke-btns{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.stroke-btns .btn-sm{min-height:44px}   /* 手机上保证好点 */
.stroke-btns .tiny{flex:1;min-width:110px}
.stroke-stage{display:grid;place-items:center}
.stroke-stage:empty{display:none}
.stroke-stage svg{border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.stroke-stage .tiny{margin-top:8px}

/* ---------- 字源演变动画（会员区块「它的来历」里，构词演变类用） ----------
 * 只有 evolution 各帧字形真的在变（如 蒲陶→葡萄→葡萄干）才上这套动画；
 * 同一字四个书体的（明：甲骨→金文→小篆→楷书），系统字体下长得一样，
 * 维持下面的静态三格 —— 不用动画假装有变化。
 * 设计稿：proto/evo.html（原型与正式版保持同一套类名）。 */
.evo-stage{
  position:relative;overflow:hidden;margin-top:14px;
  border:1px solid var(--line);border-radius:14px;
  padding:16px 12px 15px;
  background:radial-gradient(130% 100% at 50% 0%,#FFFEFB 0%,#FAF5EA 58%,#F6EEDD 100%);
  box-shadow:var(--shadow);
}
/* 纸上隐格：极淡的竖纹，只是质感，别抢字 */
.evo-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(168,122,36,.045) 1px,transparent 1px);
  background-size:22px 100%;
}
.evo-cap{position:relative;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.evo-cap .t{font-family:"Songti SC",serif;font-size:14px;line-height:1.5;letter-spacing:.02em}
.evo-cap .s{font-size:10.5px;color:var(--ink3)}
.evo-track{position:relative;display:flex;align-items:flex-start;gap:7px}
.evo-rail{position:absolute;left:12px;right:12px;top:4px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#DEC9A0,#E4D4B4 60%,#EADFC8);
  transform:scaleX(0);transform-origin:left center;z-index:0}
.evo-rail::after{content:"";position:absolute;inset:0;border-radius:2px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(168,122,36,.7),transparent);
  background-size:35% 100%;background-repeat:no-repeat;background-position:-40% 0}
.evo-stage.run .evo-rail{animation:railGrow .95s cubic-bezier(.22,1,.36,1) forwards}
.evo-stage.run .evo-rail::after{animation:railSweep 1.5s cubic-bezier(.4,0,.2,1) .18s 1 both}
@keyframes railGrow{to{transform:scaleX(1)}}
@keyframes railSweep{
  0%{opacity:0;background-position:-40% 0}
  18%{opacity:1}
  100%{opacity:0;background-position:140% 0}
}
.evo-fr{position:relative;z-index:1;flex:1 1 0;min-width:0;text-align:center;transition:opacity .42s ease}
.evo-fr .dot{width:8px;height:8px;border-radius:50%;margin:0 auto 12px;
  background:#E3D6BB;box-shadow:0 0 0 3px #FAF5EA;transition:.42s cubic-bezier(.22,1,.36,1)}
/* 字号按内容长短分三档，但字心必须落在同一条线上（grid + 固定高），
   否则「蒲陶 / 葡萄 / 葡萄干」会一高一低，看着像没对齐 */
.evo-fr .g{font-family:"Songti SC","Noto Serif SC",serif;
  font-size:clamp(21px,6.6vw,32px);line-height:1.3;color:#8A6A34;
  min-height:40px;display:grid;place-items:center;
  transition:color .42s ease,transform .42s cubic-bezier(.22,1,.36,1),text-shadow .42s ease;
  word-break:break-word}
.evo-fr .g.w{font-size:clamp(16px,4.8vw,24px)}
.evo-fr .g.ww{font-size:clamp(12px,3.4vw,15px);line-height:1.5}
/* 书体近似：系统里没有真篆体，不硬装；只用楷 / 宋两族拉出一点年代差 */
.evo-fr .g.kai{font-family:"Kaiti SC","STKaiti","KaiTi","Songti SC",serif}
.evo-fr .g.zhuan{font-family:"Songti SC","Noto Serif SC",serif;font-weight:600}
.evo-fr .n{font-size:10.5px;line-height:1.5;color:var(--ink3);margin-top:6px;padding:0 2px;
  transition:color .42s ease}
/* 播放中：没轮到的压暗；全部走完一律恢复可读 —— 这些字是内容，不是装饰 */
.evo-stage.playing .evo-fr.dim{opacity:.4}
.evo-fr.on .dot{background:var(--gold);box-shadow:0 0 0 4px rgba(168,122,36,.15)}
.evo-fr.on .g{color:var(--gold);transform:translateY(-2px) scale(1.06);
  text-shadow:0 8px 20px rgba(168,122,36,.18);
  clip-path:inset(0);            /* 动画没跑起来（降级 / 老内核）时也保证字可见 */
  animation:inkReveal .58s cubic-bezier(.22,1,.36,1)}
.evo-fr.on .n{color:var(--ink2)}
@keyframes inkReveal{
  from{clip-path:inset(0 100% 0 0);opacity:.55}
  to{clip-path:inset(0 0 0 0);opacity:1}
}
.evo-stage.run .evo-fr{animation:frIn .62s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay:calc(var(--i) * 130ms)}
@keyframes frIn{
  from{opacity:0;transform:translateY(14px) scale(.94)}
  to{opacity:1;transform:none}
}
.evo-replay{margin-top:10px;text-align:center}
.evo-replay .btn-sm{min-height:32px;padding:5px 12px;font-size:12px}

/* 无障碍：关掉动效就把结果直接摆出来，信息一点不少。
   注意必须把 .evo-fr.on .g 的揭示动画一起关掉 —— 只关入场动画的话，
   揭示会停在中途，字被 clip-path 裁掉，等于内容丢了（真踩过）。 */
@media (prefers-reduced-motion:reduce){
  .evo-stage.run .evo-fr,
  .evo-stage.run .evo-rail,
  .evo-stage.run .evo-rail::after,
  .evo-fr.on .g{animation:none!important}
  .evo-rail{transform:scaleX(1)}
  .evo-fr{opacity:1!important}
  .evo-fr .g,.evo-fr .n{transition:none}
}

/* ============================================================
   知识卡 2026-10-23 改版
   问题：整页「一列灰块」——字只占标题 34px，锁定区糊掉 700px，
   1440 宽屏上中间一竖条、下面全白，五段标题长得一样，眼睛分不了段。
   改法：顶部字台（田字格里放大字）+ 六段分区色 + 方块栅格 + 矮锁定条。
   类名全部新起（c- / cp- / ci- / kb- / kvt / scn / vt），不复用旧 .kv。
   ============================================================ */

body[data-page="card"] .wrap{max-width:940px;padding-top:18px}

/* ---------- 字台 ---------- */
.c-hero{
  display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;align-items:center;
  padding:14px;border-radius:20px;position:relative;overflow:hidden;
  border:1px solid #DCE8D2;
  background:linear-gradient(135deg,#FFFDF6 0%,#F5FAEE 52%,#E9F3E1 100%);
  box-shadow:0 2px 4px rgba(28,42,34,.03),0 16px 34px rgba(44,106,76,.07);
}
/* 右侧淡淡的「田」字水印，暗示这是练字的地方，不抢内容 */
.c-hero::after{
  content:"田";position:absolute;right:-6px;bottom:-26px;pointer-events:none;user-select:none;
  font-family:"Songti SC","Noto Serif SC",serif;font-size:132px;line-height:1;
  color:rgba(44,106,76,.05);
}
.c-hero>*{position:relative;z-index:1}

.c-plate{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.cp-grid{
  position:relative;width:100%;aspect-ratio:1/1;border-radius:16px;background:#fff;
  border:1px solid #E4DDCA;display:grid;place-items:center;
  /* 田字格的十字线：两道极淡的渐变，正好落在中线上 */
  background-image:
    linear-gradient(90deg,transparent 49.5%,rgba(176,57,47,.16) 49.5%,rgba(176,57,47,.16) 50.5%,transparent 50.5%),
    linear-gradient(0deg,transparent 49.5%,rgba(176,57,47,.16) 49.5%,rgba(176,57,47,.16) 50.5%,transparent 50.5%);
  box-shadow:inset 0 0 0 5px #FDFBF3,0 4px 14px rgba(28,42,34,.07);
}
.cp-py{
  position:absolute;top:5px;left:50%;transform:translateX(-50%);
  max-width:94%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:10.5px;letter-spacing:.03em;color:#6F8274;
  background:#FBF8EC;border:1px solid #EDE6D5;border-radius:999px;padding:1px 7px;
}
.cp-g{
  margin:0;font-family:"Songti SC","Noto Serif SC",serif;font-weight:500;
  color:#1F3529;line-height:1.12;text-align:center;padding:0 4px;word-break:break-word;
}
.cp-g[data-sz="xl"]{font-size:56px}
.cp-g[data-sz="l"]{font-size:38px}
.cp-g[data-sz="m"]{font-size:27px}
.cp-g[data-sz="s"]{font-size:21px}
.cp-g[data-sz="xs"]{font-size:15px;line-height:1.4}
.cp-snd{display:flex;gap:6px}
.cp-snd .spk{width:34px;height:34px;flex:0 0 34px;font-size:15px}

.c-info{min-width:0}
.ci-kicker{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--ink3);line-height:1.5}
.ci-kicker a{color:var(--jade);font-weight:600}
.ci-kicker .ci-dot{color:#C9D3C2}
.ci-sum{margin:7px 0 10px;font-size:14px;line-height:1.7;color:var(--ink2);word-break:break-word}
.ci-stats{display:flex;gap:7px;flex-wrap:wrap}
.ci-st{
  display:flex;flex-direction:column;gap:1px;min-width:54px;padding:5px 9px;border-radius:10px;
  background:rgba(255,255,255,.82);border:1px solid #E3EBD8;
}
.ci-st b{
  font-family:"Songti SC",serif;font-weight:500;font-size:13.5px;line-height:1.3;color:#2A4636;
  max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ci-st i{font-style:normal;font-size:10px;color:var(--ink3);letter-spacing:.04em}

/* ---------- 步骤条：吸顶 + 滚动高亮 ---------- */
.c-bar{
  position:sticky;top:var(--topbar-h,56px);z-index:22;
  margin:12px -18px 0;padding:8px 18px;
  background:rgba(241,248,236,.94);backdrop-filter:saturate(1.2) blur(10px);
}
.c-bar .steps{display:flex;gap:6px;margin:0}
.step{
  flex:1;min-height:34px;padding:6px 0;border-radius:11px;font-size:12.5px;font-family:inherit;
  border:1px solid #E0E9D6;background:#FFFEF9;color:#7C8F79;cursor:pointer;transition:.16s;
}
.step.on{background:var(--jade);border-color:var(--jade);color:#F4FBF2;box-shadow:0 4px 12px rgba(44,106,76,.18)}
.step.off{opacity:.42;cursor:default}
.step:not(.off):active{transform:scale(.97)}

/* ---------- 段落：白卡 + 分区色 ---------- */
.c-body{margin-top:6px}
.kblock{
  margin-top:14px;border-radius:18px;overflow:hidden;
  background:#fff;border:1px solid var(--kb-line,#DEE9D4);
  box-shadow:0 1px 2px rgba(28,42,34,.03),0 10px 26px rgba(28,42,34,.04);
  animation:kbIn .5s cubic-bezier(.22,1,.36,1) both;
}
.c-body>.kblock:nth-child(1){animation-delay:.02s}
.c-body>.kblock:nth-child(2){animation-delay:.07s}
.c-body>.kblock:nth-child(3){animation-delay:.12s}
.c-body>.kblock:nth-child(4){animation-delay:.17s}
.c-body>.kblock:nth-child(5){animation-delay:.22s}
.c-body>.kblock:nth-child(6){animation-delay:.27s}
@keyframes kbIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.kblock[data-tone="play"]    {--kb:#C07C1C;--kb-bg:#FDF6E7;--kb-line:#F0E0BE}
.kblock[data-tone="know"]    {--kb:#2C7A5A;--kb-bg:#EFF8F1;--kb-line:#D6EBDC}
.kblock[data-tone="write"]   {--kb:#3A6FA5;--kb-bg:#EFF5FB;--kb-line:#D3E2F0}
.kblock[data-tone="origin"]  {--kb:#A8543C;--kb-bg:#FBF1EC;--kb-line:#EFD8CF}
.kblock[data-tone="expand"]  {--kb:#6E5AA8;--kb-bg:#F4F2FC;--kb-line:#DFD9F0}
.kblock[data-tone="practice"]{--kb:#C4692C;--kb-bg:#FDF3EA;--kb-line:#F1DCC8}

.kb-h{display:flex;align-items:center;gap:9px;padding:11px 14px;background:var(--kb-bg);border-bottom:1px solid var(--kb-line)}
.kb-ic{
  width:24px;height:24px;flex:0 0 24px;border-radius:9px;display:grid;place-items:center;
  background:var(--kb);color:#fff;font-family:"Songti SC",serif;font-size:12.5px;line-height:1;
  box-shadow:0 3px 8px rgba(0,0,0,.12);
}
.kb-t{font-family:"Songti SC",serif;font-size:16px;color:#22302A;line-height:1.4}
.kb-b{margin-left:auto;font-size:10.5px;color:var(--kb);background:#fff;border:1px solid var(--kb-line);border-radius:999px;padding:1px 8px;white-space:nowrap}
.kb-c{padding:14px 14px 16px}
.kb-lab{font-size:11px;letter-spacing:.05em;color:#8C9A8C;margin:14px 0 8px}
.kb-lab:first-child{margin-top:0}

/* 1 玩：像贴在纸上的一句话 */
.play{
  position:relative;font-size:15px;line-height:1.85;color:#3B3020;
  background:linear-gradient(180deg,#FFFDF4,#FEF9EA);
  border:1px solid #EFE3C6;border-radius:14px;padding:13px 15px 13px 34px;
}
.play::before{
  content:"“";position:absolute;left:10px;top:6px;
  font-family:"Songti SC",serif;font-size:30px;line-height:1;color:#DCBE84;
}

/* 2 认：方块栅格（短值一格，长值跨两格） */
/* 短值一排（自动等宽）、长值整行 —— 中文字段长短差太多，统一栅格一定留洞 */
.kvt-stats{display:flex;flex-wrap:wrap;gap:8px}
.kvt-list{display:grid;gap:8px;margin-top:8px}
.kvt{min-width:0;background:#FCFDF9;border:1px solid #EDF2E6;border-radius:12px;padding:9px 11px}
.kvt-stats .kvt{flex:1 1 88px;max-width:260px}
.kvt-k{font-size:10.5px;letter-spacing:.06em;color:#93A48F;margin-bottom:2px}
.kvt-v{font-size:14.5px;line-height:1.75;color:#1C2A22;word-break:break-word}

/* 4 扩：场景卡 + 家族词 */
.scn-grid{display:grid;gap:8px}
.scn{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:#FBFAFF;border:1px solid #E7E2F4}
.scn-ic{font-size:16px;line-height:1.45;flex:0 0 auto}
.scn-b{min-width:0}
.scn-l{font-size:10.5px;letter-spacing:.05em;color:#8B84A8}
.scn-t{font-size:14px;line-height:1.72;color:#2A2438;margin-top:1px}

/* 会员锁定条：预览封顶 132px，不再把正文糊成一大片 */
.vt{position:relative;border:1px solid #EBD9B4;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#FFFDF4,#FBF4E4)}
.vt-pv{
  padding:13px 14px 0;max-height:132px;overflow:hidden;
  filter:blur(2.8px);opacity:.7;pointer-events:none;user-select:none;
  -webkit-mask-image:linear-gradient(180deg,#000 42%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 42%,transparent 100%);
}
.vt-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 14px;border-top:1px solid rgba(235,217,180,.7)}
.vt-lock{font-size:13px;line-height:1}
.vt-t{flex:1;min-width:120px;font-size:12.5px;line-height:1.5;color:#8A6A2A}
.vt-bar .btn{flex:0 0 auto}

/* 5 练 */
.qhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.qh-n{font-size:11px;color:#B4762C;background:#FCEDD8;border:1px solid #F0DCC0;border-radius:999px;padding:1px 9px}
.qh-n.ok{color:#25624A;background:#E3F0E4;border-color:#CBE0C8}
.qh-n.no{color:#98362C;background:#F8E8E4;border-color:#EFD3CE}
.qh-tip{font-size:11.5px;color:var(--ink3)}
#kblock-practice .quiz{background:#FFFDF7;border:1px solid #F1E3CC;border-radius:14px;padding:14px}

/* 底部动作 */
.c-foot{display:flex;gap:10px;margin-top:18px}
.c-foot .btn-primary{flex:1 1 auto}

@media (min-width:700px){
  .c-hero{grid-template-columns:150px minmax(0,1fr);gap:18px;padding:16px 18px}
  .cp-g[data-sz="xl"]{font-size:76px}
  .cp-g[data-sz="l"]{font-size:52px}
  .cp-g[data-sz="m"]{font-size:36px}
  .cp-g[data-sz="s"]{font-size:26px}
  .cp-g[data-sz="xs"]{font-size:18px}
  .ci-sum{font-size:15px}
  .kvt-stats .kvt{flex:1 1 108px}
  .kvt-list{grid-template-columns:1fr 1fr}
  .kvt-list .kvt:last-child:nth-child(odd){grid-column:span 2}
  .scn-grid{grid-template-columns:1fr 1fr}
  .kb-c{padding:16px 18px 18px}
  .story{max-width:36em}
}

@media (min-width:1000px){
  .c-hero{grid-template-columns:200px minmax(0,1fr);gap:24px;padding:20px 24px}
  .cp-g[data-sz="xl"]{font-size:96px}
  .cp-g[data-sz="l"]{font-size:66px}
  .cp-g[data-sz="m"]{font-size:46px}
  .cp-g[data-sz="s"]{font-size:34px}
  .cp-g[data-sz="xs"]{font-size:24px}
  .kvt-stats .kvt{flex:1 1 118px}
  .c-bar{margin:14px -28px 0;padding:10px 28px}
}

@media (prefers-reduced-motion:reduce){
  .c-body>.kblock{animation:none}
  .step{transition:none}
}

/* 改版收尾微调（2026-10-23 第二轮） */
/* 步骤条：会员段的标记改成右上角小金点，比「·VIP」两个字干净；
   ≤420px 时 .wrap 的左右内边距是 14px，负边距必须跟着收，
   写死 -18px 会让整页多出 4px 横向溢出（真机上能左右晃）。 */
.step{position:relative}
.step.vip::after{
  content:"";position:absolute;top:5px;right:6px;width:5px;height:5px;border-radius:50%;
  background:#C79A3E;box-shadow:0 0 0 2px #FFFEF9;
}
.step.on.vip::after{background:#F0D79B;box-shadow:0 0 0 2px var(--jade)}
.kb-ic{width:26px;height:26px;flex:0 0 26px;font-size:13px;border-radius:10px}
@media (max-width:420px){
  .c-bar{margin:12px -14px 0;padding:8px 14px}
}
@media (min-width:700px){
  .c-foot{max-width:560px}
  .kblock:hover{border-color:var(--kb);transition:border-color .2s}
}

/* 统计格按内容定宽（像 Duolingo 的 stat chip），拉满整行会看着像塌了一半 */
.kvt-stats .kvt{flex:0 1 auto;min-width:92px}
/* 田字格的十字线再重一点，原来 0.16 在手机上基本看不见 */
.cp-grid{
  background-image:
    linear-gradient(90deg,transparent 49.4%,rgba(176,57,47,.22) 49.4%,rgba(176,57,47,.22) 50.6%,transparent 50.6%),
    linear-gradient(0deg,transparent 49.4%,rgba(176,57,47,.22) 49.4%,rgba(176,57,47,.22) 50.6%,transparent 50.6%);
}

/* 年级页：每组按类型上一个色（生字绿 / 词语蓝 / 成语金 / 古文赭）。
   手风琴结构不动 —— 那套折叠是修 38571px 长页留下的，不能再退回去；
   这里只加左侧一道色边和计数的同色底，扫一眼就知道这组是什么。 */
.acc{border-left-width:3px;border-left-color:transparent;transition:border-color .16s,box-shadow .16s}
.acc[data-type="zi"]{--ac:#2C7A5A;--acb:#EFF8F1;--acl:#CFE4D6}
.acc[data-type="ci"]{--ac:#3A6FA5;--acb:#EFF5FB;--acl:#CCDDEE}
.acc[data-type="cy"]{--ac:#A87A24;--acb:#FBF4E4;--acl:#E9D9B4}
.acc[data-type="gw"]{--ac:#A8543C;--acb:#FBF1EC;--acl:#EBD5CB}
.acc[data-type="zi"],.acc[data-type="ci"],.acc[data-type="cy"],.acc[data-type="gw"]{border-left-color:var(--ac)}
.acc[data-type] .acc-n{background:var(--acb);color:var(--ac);border:1px solid var(--acl)}
.acc.open[data-type] .acc-t{color:var(--ac)}
@media (min-width:700px){
  .acc[data-type]:hover{border-color:var(--acl);border-left-color:var(--ac);box-shadow:var(--shadow)}
}

/* 答对 / 标记学会时的一把碎彩纸：fixed 定位，不参与布局，760ms 后自己删掉 */
.popdot{position:fixed;width:7px;height:7px;border-radius:2px;pointer-events:none;z-index:99;
  animation:popOut .74s cubic-bezier(.22,1,.36,1) forwards}
@keyframes popOut{
  from{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}
  to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.35) rotate(200deg);opacity:0}
}

/* ============================================================
   会员段改「试看一条」（2026-10-23 第三轮）
   原来整段模糊，等于把整页最生动的部分（场景卡：图标 + 一句真话）藏起来。
   现在上半段是真的：第一条场景卡 + 前两个成语；下半段从虚线之后才开始糊，
   压到 104px 就截断，再压解锁条。
   ============================================================ */
.vt-free{padding:12px 14px 14px}
.vt-free-b{
  display:inline-block;margin-bottom:7px;
  font-size:10px;letter-spacing:.08em;color:#8A6A2A;
  background:#FBEFD3;border:1px solid #EBD9B4;border-radius:999px;padding:1px 8px;
}
/* 试看只有一张场景卡，别让它在宽屏上只占左半边（.scn-grid 700px 起是两列） */
.scn-grid.scn-one{grid-template-columns:1fr}
.vt-pv-rest{
  margin:0 14px;padding:13px 0 0;max-height:104px;
  border-top:1px dashed rgba(214,190,140,.8);
}
/* 试看区的成语会比会员区更靠上，和场景卡之间留一口气 */
.vt-free .chips{margin-top:8px}

/* 试看区精简：外层不再重复「试看」徽章，成语改成小辞条（词在上、释义在下） */
.vt-free{padding:12px 14px 12px}
.vt-free .chips{display:grid;gap:6px;margin-top:8px}
.vt-free .chip-gl{display:block;padding:6px 11px;line-height:1.45}
.vt-free .chip-gl b{font-size:13.5px;letter-spacing:.02em}
.vt-free .chip-gl i{display:block;font-style:normal;font-size:11.5px;line-height:1.55;color:#8C6A2C;opacity:.9}
.vt-free .scn{padding:9px 11px;background:#FCFAFF;border-color:#E2DBF3}
.vt-free .scn-t{font-size:13.5px;line-height:1.68}
/* 模糊层要「看得出后面还有东西」，糊到看不见就变成一块空色块 */
.vt-pv-rest{filter:blur(2.2px);opacity:.78;max-height:96px;border-top-color:rgba(200,172,112,.9)}
/* 宽屏上两条成语并排，别让它们各占一整行（1440 下像两张横幅） */
@media (min-width:700px){
  .vt-free .chips{grid-template-columns:1fr 1fr}
}
/* 试看区的成语：带释义的占满一行（宽屏两条并排），没释义的按内容宽并排站 */
.vt-free .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.vt-free .chip-gl{flex:1 1 100%;display:block}
@media (min-width:700px){
  .vt-free .chip-gl{flex:1 1 calc(50% - 3px)}
}

/* ============================================================
   视觉升级（2026-10-24）：语文味 + 生动感
   基调不变（米纸 + 衬线），新增五样，全部只加不改：
   ① 田字格纸纹  ② 生字格里衬田字格  ③ 滚动进场
   ④ 答对庆祝    ⑤ 学习进度线
   ============================================================ */

/* ① 田字格纸纹：画在 body 背景上（body 背景会按视口定位并画在所有内容之下，
      不会盖住文字，也不需要 pointer-events）。大格 64px、小格 16px，
      透明度压到 5%，只做“作业本”的暗示，不做干扰。 */
body{
  background-color:var(--paper);
  background-image:
    linear-gradient(rgba(168,138,84,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,138,84,.05) 1px, transparent 1px),
    linear-gradient(rgba(168,138,84,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,138,84,.025) 1px, transparent 1px);
  background-size:64px 64px, 64px 64px, 16px 16px, 16px 16px;
  background-position:-1px -1px;
}

/* ② 生字小格里衬一副淡田字格：46px 太小画不全，用一横一竖表达“格”的意象 */
.item-glyph.zi{
  background-color:#FAF6EC;
  background-image:
    linear-gradient(rgba(168,138,84,.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,138,84,.28) 1px, transparent 1px);
  background-size:100% 1px, 1px 100%;
  background-position:center, center;
  background-repeat:no-repeat;
}
.item-glyph.zi .zi-ch{
  position:relative;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.9));
}

/* ③ 滚动进场。类只由 decor.js 在 JS 就绪后添加，
      没 JS 或禁动画时元素保持原样，不会把内容藏没。 */
.reveal{opacity:0;transform:translateY(12px)}
.reveal.in{opacity:1;transform:none;transition:opacity .45s ease, transform .45s cubic-bezier(.22,.75,.3,1)}
.reveal.d1.in{transition-delay:.05s}
.reveal.d2.in{transition-delay:.1s}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none}
  .reveal.in{transition:none}
}

/* ④ 答对庆祝：对勾脉冲 + 纸屑 */
@keyframes yw-pop{
  0%{transform:scale(.6)}60%{transform:scale(1.18)}100%{transform:scale(1)}
}
.tip.ok{animation:yw-pop .38s cubic-bezier(.22,.9,.3,1)}
@keyframes yw-fall{
  0%{transform:translateY(-6px) rotate(0deg);opacity:1}
  100%{transform:translateY(46px) rotate(var(--rz,240deg));opacity:0}
}
.yw-confetti{
  position:absolute;top:0;width:6px;height:9px;border-radius:2px;
  pointer-events:none;z-index:5;
  animation:yw-fall .9s ease-in forwards;
}
@media (prefers-reduced-motion: reduce){
  .tip.ok{animation:none}
  .yw-confetti{display:none}
}

/* ⑤ 学习进度线：贴在顶栏下缘，按已学条目占该页条目的比例走 */
.read-bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;overflow:hidden}
.read-bar i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg, var(--gold), var(--red));
  border-radius:0 2px 2px 0;
  transition:width .5s cubic-bezier(.22,.75,.3,1);
}

/* 细节：选中色、平滑滚动、章节标题装饰、accordion 悬浮 */
::selection{background:#F0DFC0;color:#4A3410}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
.sec-title .sec-en{font-family:-apple-system,sans-serif;font-size:10px;letter-spacing:.18em;color:var(--ink3);text-transform:uppercase;margin-left:2px}
.acc:hover{border-color:#E2D6C0}
.acc.open:hover{border-color:#E2D6C0}
.item:active{transform:scale(.995)}
.kblock-num{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}

/* ============================================================
   二维码（2026-10-25）：全站传播都走二维码 —— 站点码（线下扫码进站）
   和分销员推广码（后台保存）。生成逻辑在 assets/js/qr.js，自托管库、
   本地 canvas 导出，不发第三方。样式放这里因为三个页面都引 style.css。
   ============================================================ */

/* 保存按钮：金色描边 ghost 风，不用主色红（红在全站表示「错」） */
.qr-save{
  display:inline-block;border:1px solid rgba(168,122,36,.42);background:#FFFDF6;color:#8A6A1E;
  border-radius:9px;padding:8px 14px;font-size:12.5px;line-height:1;cursor:pointer;
  font-family:inherit;letter-spacing:.02em;
  transition:background .18s,border-color .18s,opacity .18s;
}
.qr-save:hover:not(:disabled){background:#FBF3E3;border-color:rgba(168,122,36,.7)}
.qr-save:active:not(:disabled){transform:translateY(1px)}
.qr-save:disabled{opacity:.55;cursor:default}

/* 渲染失败 / 链接不安全的兜底：说明原因，不留一块空白让人以为没加载 */
.qr-bad{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:11px;color:#A09A8E;line-height:1.7;text-align:center;padding:6px;
}

/* 站点二维码挂载区（qr-mount.js 扫 [data-qr="site"] 注入） */
.qr-mount{display:flex;gap:14px;align-items:center;min-width:0}
.qr-mount .qm-qr{
  width:136px;height:136px;flex:none;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:7px;box-shadow:var(--shadow);
}
.qr-mount .qm-qr svg{display:block;width:100%;height:100%}
.qm-side{min-width:0;flex:1}
.qm-cap{font-family:"Songti SC","Noto Serif SC",serif;font-size:14.5px;color:#2E3440;letter-spacing:.03em}
.qm-tip{font-size:11.5px;color:var(--ink3);line-height:1.75;margin-top:6px}
.qm-save{margin-top:11px}

@media (max-width:560px){
  .qr-mount{gap:12px}
  .qr-mount .qm-qr{width:118px;height:118px}
  .qm-cap{font-size:13.5px}
  .qm-tip{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .qr-save{transition:none}
}

/* ================= 训练计划（plan.html / 首页迷你卡，2026-10-25） ================= */
.plan-grades{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 8px}
.plan-gchip{
  border:1px solid var(--line);background:var(--card);color:var(--ink2);
  border-radius:999px;padding:7px 14px;font-size:13px;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.plan-gchip.on{border-color:var(--red);color:var(--red);background:var(--red-soft);font-weight:600}
.plan-note{font-size:12.5px;color:var(--ink3);margin:0 0 14px}
.plan-card{padding:20px 18px 16px}
.plan-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.plan-step{font-size:12px;color:var(--gold);font-weight:600;letter-spacing:.04em}
.plan-title{font-size:21px;font-weight:500;margin:6px 0 2px}
.plan-sub{font-size:13px;color:var(--ink3);margin:0}
.plan-ring{flex:none;width:64px;height:64px;border-radius:50%;background:var(--jade-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--jade)}
.plan-ring b{font-size:16px;color:var(--jade);line-height:1.1}
.plan-ring span{font-size:10.5px;color:var(--jade)}
.plan-bar{height:8px;border-radius:99px;background:var(--line2);overflow:hidden;margin:10px 0 4px}
.plan-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--jade),#4A8A78);transition:width .4s}
.plan-prog{margin:0 0 14px;color:var(--ink3)}
.plan-seg{display:flex;flex-direction:column;gap:14px}
.plan-task{border:1px solid var(--line2);border-radius:var(--r-sm);padding:12px 12px 10px;background:#FFFDF8}
.pt-head{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.pt-ic{flex:none;width:30px;height:30px;border-radius:8px;background:var(--gold-soft);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.pt-head b{font-size:14.5px;display:block;line-height:1.3}
.pt-head .tiny{color:var(--ink3)}
.pt-item{display:inline-flex;align-items:baseline;gap:7px;border:1px solid var(--line);
  border-radius:10px;padding:7px 12px;margin:0 6px 6px 0;background:var(--card)}
.pt-item b{font-size:19px}
.pt-item span{font-size:12px;color:var(--ink3)}
.pt-item:active{background:var(--gold-soft)}
.pt-more{display:inline-block;font-size:12.5px;color:var(--blue);margin-top:2px}
.pt-none{font-size:13px;color:var(--ink3);margin:4px 0 6px}
.plan-next{margin-top:14px}
.plan-trust{margin-top:16px;padding:16px 18px;background:var(--jade-soft);border:1px solid var(--jade)}
.plan-trust b{font-size:15px;color:var(--jade)}
.plan-trust p{font-size:13px;color:var(--ink2);margin:6px 0 0}

/* 首页迷你卡 */
[data-plan-mini]{margin:0 0 18px;padding:16px 18px}
.pm-head{margin-bottom:10px}
.pm-kicker{display:inline-block;font-size:11.5px;color:var(--gold);font-weight:700;letter-spacing:.06em;margin-bottom:4px}
.pm-head b{display:block;font-size:18px;margin:2px 0}
.pm-head .tiny{color:var(--ink3)}

/* ================= 单元测验（unit-test.html，2026-10-25） ================= */
.ut-dots{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 0 14px;max-width:340px;margin-left:auto;margin-right:auto}
.ut-dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.ut-dots i.done{background:var(--jade)}
.ut-dots i.now{background:var(--red);transform:scale(1.25)}
.ut-card{padding:22px 18px 18px;text-align:center}
.ut-badge{display:inline-block;font-size:11.5px;color:var(--blue);background:var(--blue-soft);
  border-radius:999px;padding:3px 12px;font-weight:600;letter-spacing:.05em}
.ut-q{margin:14px 0 6px}
.ut-py{font-size:38px;font-weight:600;letter-spacing:.06em;color:var(--ink)}
.ut-say{margin-top:8px}
.ut-qtext{font-size:16.5px;margin:6px 0;text-align:left;line-height:1.7}
.ut-cands{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0 4px}
.ut-cand{
  aspect-ratio:1;border:1.5px solid var(--line);border-radius:14px;background:var(--card);
  font-size:26px;cursor:pointer;transition:border-color .12s,background .12s,transform .06s;
}
.ut-cand:active{transform:scale(.94);background:var(--line2)}
.ut-opts{display:flex;flex-direction:column;gap:10px;margin:14px 0 4px;text-align:left}
.ut-opt{
  display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:12px;
  background:var(--card);padding:13px 14px;font-size:15px;cursor:pointer;text-align:left;
  transition:border-color .12s,background .12s;
}
.ut-opt:active{background:var(--line2)}
.uo-k{flex:none;width:24px;height:24px;border-radius:6px;background:var(--line2);
  display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink3);font-weight:700}
.ut-judge{flex-direction:row}
.ut-judge .ut-opt{flex:1;justify-content:center;font-size:22px;padding:14px}
.ut-cand.correct,.ut-opt.correct{border-color:var(--jade);background:var(--jade-soft);color:var(--jade)}
.ut-cand.wrong,.ut-opt.wrong{border-color:var(--red);background:var(--red-soft);color:var(--red)}
.ut-explain{margin-top:14px;font-size:13.5px;color:var(--ink2);background:var(--line2);
  border-radius:10px;padding:10px 12px;text-align:left;line-height:1.7}
.ut-score{text-align:center;padding:28px 18px}
.us-big{font-size:52px;font-weight:600;margin:14px 0 4px;color:var(--ink)}
.us-big i{font-style:normal;font-size:24px;color:var(--ink3)}
.us-word{font-size:15px;color:var(--ink2);margin:0 0 12px}
.us-bar{height:10px;border-radius:99px;background:var(--line2);overflow:hidden;margin:0 0 12px}
.us-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--jade),#4A8A78);border-radius:99px}
.us-btns{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}

/* ================= 云端进步报告（member.html，2026-10-25） ================= */
[data-cloud-report]{margin-top:14px}
.cr-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.cr-head .serif{font-size:15px;font-weight:600}
.cr-sub{font-size:12px;color:var(--ink3)}
.cr-grid{display:flex;gap:10px;margin-bottom:10px}
.cr-cell{flex:1;background:var(--line2);border-radius:12px;padding:10px 6px;text-align:center}
.cr-cell b{display:block;font-size:19px;color:var(--ink)}
.cr-cell span{font-size:11.5px;color:var(--ink3)}
.cr-weak{font-size:12.5px}
.cr-weak-t{display:block;color:var(--ink3);margin-bottom:6px}
.cr-chip{display:inline-block;border:1px solid var(--red);color:var(--red);background:var(--red-soft);
  border-radius:999px;padding:4px 10px;margin:0 6px 6px 0;font-size:12px}

@media (max-width:420px){
  .ut-cands{grid-template-columns:repeat(3,1fr)}
  .ut-cand{font-size:23px}
  .plan-head{flex-direction:column}
  .plan-ring{align-self:flex-end;margin-top:-40px}
}

/* AI 创新题标记（2026-10-26）：金色区别于本地题库的蓝色，一眼能看出这道题的来历 */
.ut-badge-ai{color:var(--gold);background:var(--gold-soft)}
.ut-ai-note{display:inline-block;font-size:11px;color:var(--gold);background:var(--gold-soft);
  border-radius:999px;padding:1px 8px;margin-right:6px;vertical-align:1px;white-space:nowrap}

/* 打印入口（2026-10-28）
   年级页的小胶囊和卡片页的「打印」都做成行内元素：它们加在已有的文字行里，
   不能撑高页面 —— 年级页的版面预算按像素卡死（g3 上限 5000px），
   一个多出来的块级按钮就够把它顶破。 */
.g-print{margin-left:8px;font-size:12px;padding:2px 9px;border:1px solid var(--line);
  border-radius:999px;color:var(--ink2);background:#fff;white-space:nowrap;vertical-align:1px}
.g-print:hover{border-color:var(--red);color:var(--red)}
.ci-print{margin-left:8px;font-size:12px;padding:1px 8px;border:1px solid var(--line);
  border-radius:999px;color:var(--ink2);white-space:nowrap;vertical-align:1px}
.ci-print:hover{border-color:var(--red);color:var(--red)}