/* =====================================================================
   启学题库 · Warm Editorial 设计语言
   依据 ~/.workbuddy/skills/awesome-design-md/design-md/claude/DESIGN.md
   暖奶油画布 / 暖墨 / 珊瑚主色 / 衬线大标题 / 发丝线 / 层次圆角
   无蓝白硬边框、无 offset 硬阴影、无点阵背景
   ===================================================================== */
:root{
  --bg:#fdfdfd;            /* 白为主画布 */
  --bg-soft:#f6f6f4;       /* surface-soft */
  --card:#ffffff;
  --card-cream:#f1f1ef;    /* surface-card */
  --card-strong:#eaeae7;   /* surface-strong */
  --ink:#141413;
  --ink-soft:#3d3d3a;
  --muted:#70706a;
  --acc:#1f1f1d;           /* 主色改为暖墨（中性，无彩色） */
  --acc-deep:#000000;
  --acc-soft:#f1f1ef;      /* 浅灰底 */
  --ok:#5db872; --ok-deep:#3f9c56; --ok-soft:#e9f4ea;
  --no:#c64545; --no-soft:#faeaea;
  --amber:#e8a55a; --teal:#5db8a6;
  --line:#e7e7e3;          /* hairline */
  --line-soft:#eeeeeb;
  --line-strong:#d9d9d4;
  --dark:#181715;          /* surface-dark */
  --dark-elev:#252320;
  --radius:12px;
  --radius-lg:16px;
  --sans:"Inter","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
  --disp:"Cormorant Garamond",Georgia,"Times New Roman","Songti SC","Noto Serif SC",serif;
  --fhanzi-kai:"KaiTi","STKaiti","BiauKai","DFKai-SB",serif;
  --fhanzi-song:"SimSun","NSimSun","Songti SC","Noto Serif SC",serif;
  --mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --shadow-soft:0 1px 2px rgba(20,20,19,.04),0 8px 24px -12px rgba(20,20,19,.10);
  --shadow-lift:0 2px 4px rgba(20,20,19,.05),0 16px 36px -14px rgba(20,20,19,.16);
  --glass-hi:rgba(255,255,255,.9);
  --glass-bg:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,255,255,.46));
  --glass-line:rgba(255,255,255,.66);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.92),inset 0 -1px 0 rgba(20,20,19,.04),0 8px 22px -12px rgba(20,20,19,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:var(--sans);cursor:pointer}
.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}

/* ============ 侧边栏（暖黑产品面，与奶油画布形成节奏对比） ============ */
.side{background:var(--dark);color:#e9e6df;padding:1.4rem 1rem;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:center;gap:.6rem;padding:.2rem .4rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:1rem}
.brand .mark{font-family:var(--mono);font-weight:700;font-size:.95rem;letter-spacing:.02em;background:var(--acc);color:#fff;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none}
.brand .mark-img{width:38px;height:38px;border-radius:10px;object-fit:cover;flex:none}
.brand-txt{font-weight:700;font-size:1.02rem;line-height:1.25;color:#faf9f5}
.brand-txt small{display:block;font-family:var(--mono);font-weight:500;font-size:.56rem;letter-spacing:.16em;color:#a09d96}
.nav-group{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:#8e8b82;margin:1.2rem .5rem .5rem;text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:.65rem;padding:.58rem .7rem;border-radius:999px;color:#c9c5bc;font-size:.92rem;font-weight:500;margin-bottom:.22rem;border:none;background:none;width:100%;text-align:left;transition:background .15s,color .15s}
.nav-item:hover{background:rgba(255,255,255,.06);color:#faf9f5}
.nav-item.active{background:var(--acc);color:#fff;font-weight:600}
.nav-item .em{font-family:var(--mono);font-size:.7rem;font-weight:600;width:1.5rem;color:#8e8b82;text-align:center;flex:none}
.nav-item.active .em{color:rgba(255,255,255,.8)}
/* 「认识汉字」父级 + 子导航 */
.nav-parent{cursor:pointer}
.nav-parent .nav-arrow{margin-left:auto;font-size:.75rem;opacity:.65;transition:transform .2s}
.nav-parent.open .nav-arrow{transform:rotate(180deg)}
.nav-sub{display:none;margin:.1rem 0 .35rem;padding-left:.55rem}
.nav-sub.open{display:block}
.nav-sub-item{display:block;padding:.42rem .6rem;border-radius:999px;color:#b3afa6;font-size:.85rem;margin-bottom:.1rem;border:none;background:none;width:100%;text-align:left;cursor:pointer;transition:background .15s,color .15s}
.nav-sub-item:hover{background:rgba(255,255,255,.06);color:#faf9f5}
.nav-sub-item.active{background:rgba(255,255,255,.16);color:#fff;font-weight:600}

/* ============ 主区 ============ */
.main{display:flex;flex-direction:column;min-width:0}
.site-foot{display:flex;align-items:center;justify-content:center;gap:1rem;padding:.9rem 1.6rem;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem}
.site-foot a{color:var(--muted);text-decoration:none}
.site-foot a:hover{color:var(--ink)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.6rem;border-bottom:1px solid var(--line);background:rgba(250,249,245,.85);backdrop-filter:blur(12px);position:sticky;top:0;z-index:20}
.topbar h1{font-family:var(--disp);font-weight:600;font-size:1.25rem;letter-spacing:-.01em}
.topbar .right{display:flex;align-items:center;gap:.7rem}
.lang-btn{font-family:var(--mono);font-size:.8rem;font-weight:600;padding:.38rem .75rem;border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;transition:all .15s}
.lang-btn:hover{border-color:var(--acc);color:var(--acc)}
.lang-btn:focus{outline:none;border-color:var(--acc)}
.badge{font-size:.75rem;font-weight:600;padding:.32rem .8rem;border-radius:999px}
.badge.free{font-family:var(--mono);background:var(--card-cream);color:var(--muted)}
.badge.vip{background:var(--acc);color:#fff}
.btn{display:inline-flex;align-items:center;gap:.4rem;border:none;border-radius:999px;font-weight:600;font-size:.88rem;padding:.6rem 1.2rem;transition:transform .16s,box-shadow .16s,background .16s,color .16s,border-color .16s}
.btn-primary{background:var(--glass-bg);color:var(--ink);border:1px solid var(--glass-line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--glass-shadow)}
.btn-primary:hover{border-color:rgba(20,20,19,.4);transform:translateY(-1px);box-shadow:0 12px 28px -12px rgba(20,20,19,.3),inset 0 1px 0 rgba(255,255,255,.9)}
.btn-gold{background:var(--glass-bg);color:var(--ink);border:1px solid var(--glass-line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--glass-shadow)}
.btn-gold:hover{border-color:rgba(20,20,19,.4);transform:translateY(-1px)}
.btn-ghost{color:var(--ink);border:1px solid var(--glass-line);
  background:var(--glass-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--glass-shadow)}
.btn-ghost:hover{border-color:rgba(20,20,19,.4);transform:translateY(-1px)}
.btn-jade{background:var(--ok-deep);color:#fff}
.btn-jade:hover{background:#35874a;transform:translateY(-1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.content{padding:1.6rem;overflow:auto}
.view-head{margin-bottom:1.2rem}
.view-head h2{font-family:var(--disp);font-weight:600;font-size:1.9rem;letter-spacing:-.015em;line-height:1.15}
.view-head p{color:var(--muted);font-size:.92rem;margin-top:.35rem;max-width:70ch}
/* 做题页专用紧凑页头：给正文（题干+选项+反馈+下一题）让出一屏空间 */
.view-head.compact{margin-bottom:.25rem}
.view-head.compact h2{font-size:.95rem}
.view-head.compact p{margin-top:.02rem;font-size:.7rem}

/* ============ 卡片 ============ */
.grid{display:grid;gap:1rem}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.2rem}

/* ============ 笔顺 / 字帖 ============ */
.stage{display:grid;grid-template-columns:300px 1fr;gap:1.2rem;align-items:start}
.tp{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1rem;position:relative}
.tp::before{content:"";position:absolute;inset:8px;border:1px solid var(--line-soft);border-radius:10px;pointer-events:none}
#hw{width:100%;height:270px;display:grid;place-items:center;background-image:linear-gradient(rgba(20,20,19,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(20,20,19,.045) 1px,transparent 1px);background-size:30px 30px;background-position:center;border-radius:10px}
.meta{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.5rem}
.meta .big{font-family:var(--disp);font-weight:600;font-size:1.7rem}
.stroke-stage .meta .big,.dict-stage .meta .big,.intro-card .meta .big,.intro-modal .meta .big,.evo-cell.evo-big .evo-char{font-family:var(--fhanzi-kai)}
.meta .py{color:var(--acc);font-weight:600}
.meta .hsk{font-family:var(--mono);font-size:.68rem;font-weight:600;color:var(--acc);background:var(--acc-soft);padding:.15rem .5rem;border-radius:999px}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.chip{font-weight:600;font-size:1.05rem;min-width:44px;min-height:44px;border-radius:999px;border:1px solid var(--line-strong);background:var(--card);color:var(--ink);transition:all .16s}
.chip:hover{border-color:var(--acc)}
.chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.controls{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}

/* 部件拆解 */
.comp-row{display:flex;gap:.8rem;flex-wrap:wrap}
.comp{flex:1;min-width:120px;border:1px dashed var(--line-strong);border-radius:12px;padding:.9rem;text-align:center;background:var(--card)}
.comp .c{font-family:var(--disp);font-weight:600;font-size:2rem;color:var(--acc)}
.comp .m{font-size:.82rem;color:var(--muted);margin-top:.2rem}
.tag{display:inline-block;font-size:.78rem;color:var(--muted);background:var(--bg-soft);border:1px solid var(--line);padding:.2rem .6rem;border-radius:999px}

/* 形近字 */
.sim-list{display:flex;flex-direction:column;gap:.6rem}
.sim{display:flex;align-items:center;gap:.9rem;border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem;cursor:pointer;transition:all .16s;background:var(--card)}
.sim:hover{border-color:var(--acc);background:var(--acc-soft)}
.sim .c{font-family:var(--disp);font-weight:600;font-size:1.8rem;color:var(--ink);min-width:44px;text-align:center}
.sim .n{font-size:.88rem;color:var(--muted)}

/* ============ 习题核心（紧凑版：题干+选项+反馈+下一题尽量一屏呈现） ============ */
.quiz-box{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:.6rem .85rem;box-shadow:var(--shadow-soft)}
.prog-row{display:flex;align-items:center;gap:.7rem;margin-bottom:.3rem}
/* 返回按钮并入进度行：小号胶囊，不再独占一行 */
.btn-back-sm{font-size:.76rem;padding:.32rem .8rem;flex:none}
/* 跳题下拉：进度行末尾小胶囊，与返回按钮同排；appearance 复原为系统下拉 */
.qn-jump{flex:none;font-family:var(--mono);font-size:.72rem;font-weight:600;padding:.3rem .55rem;appearance:auto;-webkit-appearance:auto;max-width:9.5rem}
.prog-num{font-family:var(--mono);font-size:.74rem;font-weight:600;color:var(--muted);white-space:nowrap}
.progress{flex:1;height:5px;background:var(--card-cream);border-radius:999px;overflow:hidden}
.progress > i{display:block;height:100%;background:var(--acc);width:0;border-radius:999px;transition:width .45s cubic-bezier(.22,.9,.32,1)}
.q-txt{font-weight:600;font-size:.95rem;margin-bottom:0;line-height:1.45;flex:1;min-width:16rem}
/* 题目条：题干一行，占满内容区 */
.qbar{display:flex;align-items:flex-start;gap:.8rem;flex-wrap:wrap;margin-bottom:.3rem}
/* 收藏星：题目右上角小圆钮；点亮黄色=已收藏（进收藏集） */
.star-btn{flex:none;margin-left:auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.78);color:#bab5a6;
  transition:transform .15s,color .15s,background .15s,border-color .15s}
.star-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.star-btn:not(:disabled):hover{transform:scale(1.14);color:#e0a400}
.star-btn.on{color:#f0b429;border-color:rgba(240,180,41,.6);background:rgba(255,243,205,.92)}
.star-btn.on svg{fill:#f0b429}
/* 操作行：对/错反馈居左、上一题/下一题居右（选项下方、原文上方），按钮保持标准尺寸 */
.fb-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-top:.5rem;min-height:0}
.fb-row:empty{display:none}
/* 底部操作条：静态定位，玻璃胶囊包裹按钮 */
.quiz-foot{position:static;z-index:auto;display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end;pointer-events:none}
.quiz-foot > *{pointer-events:auto}
.quiz-foot:not(:empty){align-items:center;gap:.6rem;background:linear-gradient(160deg,rgba(255,255,255,.88),rgba(255,255,255,.68));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-line);border-radius:999px;padding:.3rem .45rem;box-shadow:var(--glass-shadow)}
.opts{display:grid;gap:.55rem;padding:.55rem;border-radius:16px;border:1px solid var(--line);
  background:linear-gradient(160deg,var(--bg-soft) 0%,var(--card-strong) 100%)}
/* 全部选项统一液态玻璃（无平面矩形）：半透明白渐变 + 毛玻璃 + 内高光；文字选项大字号易读 */
.opt{position:relative;display:flex;align-items:center;gap:.6rem;
  border:1px solid rgba(255,255,255,.62);border-radius:13px;padding:.68rem 1rem;font-size:1.15rem;line-height:1.5;text-align:left;
  background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(255,255,255,.42));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(20,20,19,.04),0 8px 22px -12px rgba(20,20,19,.14);
  transition:border-color .15s,background .15s,transform .15s,box-shadow .15s}
.opt:not(:disabled):hover{border-color:rgba(20,20,19,.38);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 30px -14px rgba(20,20,19,.22);
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(255,255,255,.66))}
.opt.correct{background:linear-gradient(145deg,rgba(255,255,255,.85),rgba(233,244,234,.78));border-color:rgba(63,156,86,.55);color:var(--ok-deep);font-weight:700;animation:optPop .45s cubic-bezier(.2,.9,.3,1.4)}
.opt.wrong{background:linear-gradient(145deg,rgba(255,255,255,.85),rgba(250,234,234,.78));border-color:rgba(198,69,69,.55);color:var(--no);font-weight:700;animation:optShake .45s cubic-bezier(.36,.07,.19,.97)}
.opt.reveal{border-color:rgba(63,156,86,.55);box-shadow:inset 0 0 0 1px rgba(63,156,86,.45)}
.opt:disabled{cursor:default}
.opt-tick{position:absolute;right:.8rem;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:linear-gradient(145deg,var(--ok),var(--ok-deep));color:#fff;display:grid;place-items:center;animation:tickIn .4s .1s cubic-bezier(.2,.9,.3,1.5) both;box-shadow:0 4px 14px -4px rgba(63,156,86,.5),inset 0 2px 0 rgba(255,255,255,.3)}
.opt-tick svg{width:20px;height:20px}
.score{font-family:var(--disp);font-weight:600;font-size:1.7rem;text-align:center;margin:1rem 0}
.lock-banner{background:var(--dark);color:#faf9f5;border-radius:16px;padding:1.4rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.lock-banner h3{font-family:var(--disp);font-weight:600;font-size:1.3rem}
.lock-banner p{opacity:.82;font-size:.88rem;margin-top:.3rem}

/* 入场 / 反馈动画 */
.anim-in{animation:optIn .4s cubic-bezier(.22,.9,.32,1) both;animation-delay:calc(var(--stagger,0)*60ms)}
.anim-drop{animation:dropIn .4s cubic-bezier(.22,.9,.32,1) both}
.anim-pop{animation:popIn .5s cubic-bezier(.2,.9,.3,1.25) both}
@keyframes optIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
@keyframes optPop{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes optShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
@keyframes tickIn{from{opacity:0;transform:translateY(-50%) scale(.3)}to{opacity:1;transform:translateY(-50%) scale(1)}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* 对/错反馈：大圆形徽章（不再长条） */
.fb-slot{min-height:0;margin:0;display:flex;align-items:center;gap:.5rem}
.fb-chip{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;font-size:.85rem;padding:0;border:none;background:transparent;animation:fbIn .5s cubic-bezier(.2,.9,.3,1.4) both}
.fb-ok{color:var(--ok-deep)}
.fb-no{color:var(--no)}
.fb-ico{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;position:relative}
.fb-ok .fb-ico{background:linear-gradient(145deg,var(--ok),var(--ok-deep));color:#fff;box-shadow:0 6px 18px -6px rgba(63,156,86,.55),inset 0 2px 0 rgba(255,255,255,.3)}
.fb-no .fb-ico{background:linear-gradient(145deg,var(--no),#a23333);color:#fff;box-shadow:0 6px 18px -6px rgba(198,69,69,.55),inset 0 2px 0 rgba(255,255,255,.3)}
.fb-ico svg{width:17px;height:17px;color:#fff;stroke-width:3.5}
@keyframes fbIn{0%{opacity:0;transform:scale(.3) rotate(-12deg)}60%{transform:scale(1.15) rotate(3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes fbIn{0%{opacity:0;transform:translateY(8px) scale(.85)}100%{opacity:1;transform:none}}

/* 成绩环 */
.result-wrap{text-align:center;padding:1.4rem 0 .6rem}
.result-ring{position:relative;display:inline-block}
.result-ring svg{display:block}
.result-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.result-num b{font-family:var(--disp);font-weight:600;font-size:2.1rem}
.result-num span{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.result-msg{font-family:var(--disp);font-weight:600;font-size:1.35rem;margin-top:.7rem}
.result-wrong{font-size:.85rem;color:var(--no);margin-top:.4rem}

/* ============ 情景课件 ============ */
.lesson{border:1px solid var(--line);border-radius:16px;padding:1.2rem;background:var(--card)}
.lesson h3{font-family:var(--disp);font-weight:600;font-size:1.2rem}
.lesson .scene{font-size:.84rem;color:var(--muted);margin:.3rem 0 .8rem}
.line{border-left:3px solid var(--acc);padding:.4rem 0 .4rem .9rem;margin-bottom:.7rem}
.line .zh{font-weight:600;font-size:1.05rem}
.line .py{font-size:.82rem;color:var(--acc)}
.line .en{font-size:.82rem;color:var(--muted)}
.lesson.locked{filter:grayscale(.4);opacity:.85}

/* 教师端 */
.mat{border:1px solid var(--line);border-radius:12px;padding:1rem;display:flex;justify-content:space-between;align-items:center;gap:.8rem;background:var(--card)}
.mat .info b{font-weight:600;font-size:1rem}
.mat .info span{font-size:.8rem;color:var(--muted);margin-left:.5rem}
.mat .price{font-weight:600;color:var(--acc)}
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.2rem}
.kpi .card{text-align:center}
.kpi .num{font-family:var(--disp);font-weight:600;font-size:1.8rem;color:var(--acc)}
.kpi .lbl{font-size:.82rem;color:var(--muted)}

/* 会员中心 */
.plan{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.4rem;position:relative;display:flex;flex-direction:column}
.plan.hot{border:1.5px solid var(--acc);box-shadow:var(--shadow-lift)}
.plan .crown{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--acc);color:#fff;font-size:.72rem;font-weight:600;padding:.2rem .8rem;border-radius:999px}
.plan .pname{font-family:var(--disp);font-weight:600;font-size:1.3rem}
.plan .pprice{font-size:1.6rem;font-weight:700;color:var(--acc);margin:.4rem 0}
.plan .pprice small{font-size:.8rem;color:var(--muted);font-weight:500}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:.45rem;margin:.6rem 0 1rem;flex:1}
.plan li{font-size:.85rem;color:var(--muted);padding-left:1.1rem;position:relative}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--ok-deep);font-weight:700}
.benefits{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.benefits .b{font-size:.82rem;background:var(--acc-soft);color:var(--acc-deep);border:1px solid rgba(20,20,19,.14);padding:.3rem .7rem;border-radius:999px}

/* 弹窗 / 支付 */
.mask{position:fixed;inset:0;background:rgba(20,20,19,.5);display:none;place-items:center;z-index:60;padding:1rem}
.mask.show{display:grid}
.modal{background:var(--bg);border-radius:18px;width:min(420px,94vw);padding:1.6rem;box-shadow:0 30px 60px -20px rgba(20,20,19,.4);max-height:92vh;overflow:auto}
.modal h3{font-family:var(--disp);font-weight:600;font-size:1.4rem;margin-bottom:.3rem}
.modal .sub{color:var(--muted);font-size:.88rem;margin-bottom:1.1rem}
.field{margin-bottom:.8rem}
.field label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:.3rem;font-weight:600}
.field input{width:100%;border:1px solid var(--line-strong);border-radius:10px;padding:.6rem .8rem;font-size:.95rem;font-family:var(--sans);background:var(--card)}
.field input:focus{outline:none;border-color:var(--acc)}
.field.row{display:flex;gap:.6rem}
.field.row > div{flex:1}
.pay-sum{display:flex;justify-content:space-between;align-items:baseline;background:var(--bg-soft);border-radius:10px;padding:.8rem 1rem;margin:.4rem 0 1rem}
.pay-sum .t{font-weight:700;font-size:1.3rem;color:var(--acc)}
.spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;display:inline-block;animation:spin .7s linear infinite;vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}
.modal-ok{text-align:center;padding:1rem 0}
.modal-ok .check{width:60px;height:60px;border-radius:50%;background:var(--ok-soft);color:var(--ok-deep);display:grid;place-items:center;font-size:2rem;margin:0 auto .8rem}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--dark);color:#faf9f5;padding:.8rem 1.3rem;border-radius:12px;font-size:.9rem;opacity:0;transition:all .3s;z-index:80;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.close-x{float:right;background:none;border:none;font-size:1.3rem;color:var(--muted);cursor:pointer;line-height:1}

/* 错题本条 / 学习进度 */
.wb-bar{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.6rem .9rem;margin-bottom:1rem;font-size:.88rem;color:var(--muted)}
.wb-bar .btn{margin:0;padding:.4rem .8rem;font-size:.82rem}
.lv-chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.q-lv-tag{display:inline-block;font-family:var(--mono);font-size:.72rem;font-weight:600;background:var(--dark);color:#faf9f5;padding:.14rem .55rem;border-radius:999px;margin-right:.4rem}
.q-type-tag{display:inline-block;font-size:.72rem;font-weight:600;background:var(--acc-soft);color:var(--acc-deep);border:1px solid rgba(20,20,19,.18);padding:.12rem .55rem;border-radius:999px}
.phase-note{font-size:.82rem;line-height:1.6;border-radius:12px;padding:.7rem 1rem;margin-bottom:1rem}
.phase-note code{background:rgba(20,20,19,.06);padding:.05rem .35rem;border-radius:5px;font-size:.85em}
.phase-note.demo{background:var(--no-soft);border:1px solid rgba(198,69,69,.3);color:#a03434}
.phase-note.real{background:var(--ok-soft);border:1px solid rgba(63,156,86,.3);color:#2f7c44}
.wq-list{display:flex;flex-direction:column;gap:.6rem;margin:.4rem 0;max-height:54vh;overflow:auto}
.wq{border:1px solid var(--line);border-radius:12px;padding:.6rem .8rem;background:var(--card)}
.wq-q{font-weight:600;margin-bottom:.25rem}
.wq-o{font-size:.88rem;color:var(--muted)}
.wq-o .wq-ok{color:var(--ok-deep);font-weight:700}
.wq-p{font-size:.82rem;color:var(--muted);margin:.2rem 0 .45rem;line-height:1.6;background:var(--bg-soft);padding:.4rem .6rem;border-radius:8px}
/* 错题本条目的"重做"按钮：跳回原题重做（答对自动移出错题本） */
.wq-redo{margin-top:0;font-size:.8rem;padding:.32rem .8rem}
/* ============ 错题本/收藏集独立页面：工具栏 + 按卷分组折叠列表 + 串练 ============ */
.coll-toolbar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:.2rem 0 .7rem}
.coll-search{flex:1;min-width:200px;padding:.5rem .85rem;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:.9rem;outline:none;color:var(--ink)}
.coll-search:focus{border-color:var(--ink)}
.coll-chips{display:flex;gap:.3rem;flex-wrap:wrap}
.coll-chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:.34rem .8rem;font-size:.8rem;color:var(--muted);cursor:pointer;transition:all .15s}
.coll-chip:hover{border-color:var(--ink)}
.coll-chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.coll-group{margin-bottom:.7rem;border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden;box-shadow:var(--shadow-soft)}
.coll-ghead{display:flex;align-items:center;gap:.6rem;padding:.55rem .9rem;cursor:pointer;user-select:none;background:linear-gradient(160deg,var(--bg-soft),var(--card-strong))}
.coll-ghead b{font-size:.92rem}
.coll-ghead .cg-meta{font-size:.78rem;color:var(--muted)}
.cg-arrow{display:inline-block;transition:transform .18s;font-size:.8rem;color:var(--muted)}
.coll-group.folded .coll-gbody{display:none}
.coll-group.folded .cg-arrow{transform:rotate(-90deg)}
.coll-item{display:flex;align-items:center;gap:.6rem;padding:.5rem .9rem;border-top:1px solid var(--line);transition:background .15s}
.coll-item:hover{background:var(--bg-soft)}
.ci-idx{flex:none;width:1.5rem;font-family:var(--mono);font-size:.74rem;color:var(--muted);text-align:right}
.ci-q{flex:1;font-size:.9rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:120px}
.ci-tag{flex:none;font-size:.72rem;color:var(--muted);font-family:var(--mono)}
.ci-acts{display:flex;gap:.35rem;flex:none}
.ci-acts .btn{font-size:.76rem;padding:.28rem .65rem}
.ci-rm{border-color:rgba(198,69,69,.35);color:var(--no)}
.coll-empty{padding:2.2rem 1rem;text-align:center;color:var(--muted);font-size:.95rem}
/* 错题本/收藏集条目操作行：重做 + （已通过/移除） */
.wq-acts{display:flex;align-items:center;gap:.55rem;margin-top:.5rem;flex-wrap:wrap}
.wq-pass{display:inline-flex;align-items:center;gap:.25rem;font-size:.78rem;font-weight:700;color:var(--ok-deep);
  background:var(--ok-soft);border-radius:999px;padding:.2rem .65rem}
.wq-rm{margin-top:0;font-size:.8rem;padding:.32rem .8rem;border-color:rgba(198,69,69,.4);color:var(--no)}
.wq-rm:hover{border-color:var(--no)}

@media(max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
  .side .brand{width:100%;margin-bottom:.6rem}
  .nav-group{display:none}
  .nav-item{width:auto}
  .stage{grid-template-columns:1fr}
  .cols-2,.cols-3{grid-template-columns:1fr}
  .kpi{grid-template-columns:1fr}
}

/* ===== 笔顺练习 ===== */
.stroke-wrap{display:grid;grid-template-columns:340px 1fr;gap:1.2rem;align-items:start}
.stroke-picker{display:flex;flex-direction:column;gap:.9rem;max-height:64vh;overflow:auto;padding-right:.3rem}
.picker-title{font-weight:600;font-size:.9rem;color:var(--muted)}
.hsk-label{font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--acc);margin:.2rem 0 .4rem;letter-spacing:.08em}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:.5rem}
.tile{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.4rem .2rem;text-align:center;display:flex;flex-direction:column;gap:.05rem;transition:all .14s}
.tile:hover{border-color:var(--acc);transform:translateY(-2px)}
.tile.active{border-color:var(--acc);background:var(--acc-soft);box-shadow:0 0 0 2px rgba(20,20,19,.14)}
.tile .c{font-weight:700;font-size:1.5rem;line-height:1.1}
.tile .p{font-size:.66rem;color:var(--muted)}
.tile .e{font-size:.6rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-en{margin-top:.7rem;font-size:.92rem;color:var(--muted)}
.st-en b{color:var(--ink)}

/* ===== 字典翻译 ===== */
.dict-bar{margin-bottom:1rem}
.dict-input{width:100%;border:1px solid var(--line-strong);border-radius:12px;padding:.8rem 1rem;font-size:1rem;font-family:var(--sans);background:var(--card)}
.dict-input:focus{outline:none;border-color:var(--acc)}
.dict-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.7rem}
.dict-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.8rem;cursor:pointer;transition:all .14s;text-align:center}
.dict-card:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.dict-card .dc{font-weight:700;font-size:2rem;line-height:1.1}
.dict-card .dp{color:var(--acc);font-size:.82rem;margin:.2rem 0}
.dict-card .de{color:var(--muted);font-size:.78rem;line-height:1.3}
.dict-empty{color:var(--muted);padding:1rem}
.dict-stage{margin:.4rem 0 1.2rem;max-width:340px}
.dict-stage #dhw{height:240px}

/* ===== 字库浏览器 ===== */
.search-bar{margin-bottom:.7rem}
.search-input{width:100%;border:1px solid var(--line-strong);border-radius:12px;padding:.55rem .8rem;font-size:.95rem;font-family:var(--sans);background:var(--card);color:var(--ink)}
.search-input:focus{outline:none;border-color:var(--acc)}
.lv-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.6rem}
.lv-tab{padding:.3rem .85rem;border:1px solid var(--line-strong);background:var(--card);border-radius:999px;cursor:pointer;font-size:.84rem;color:var(--muted);transition:all .14s}
.lv-tab:hover{border-color:var(--acc);color:var(--acc)}
.lv-tab.active{background:var(--acc);color:#fff;border-color:var(--acc)}
.hsk-tabs{display:none;gap:.4rem;flex-wrap:wrap;margin-bottom:.6rem}
.hsk-tab{padding:.25rem .7rem;border:1px solid var(--acc);background:var(--card);border-radius:999px;cursor:pointer;font-size:.8rem;color:var(--acc);transition:all .14s}
.hsk-tab:hover{border-color:var(--acc-deep);color:var(--acc-deep)}
.hsk-tab.active{background:var(--acc);color:#fff;border-color:var(--acc)}
.tiles{max-height:48vh;overflow:auto;padding:.2rem}
.tile .p{font-size:.62rem;color:var(--muted);margin-top:.1rem;max-width:62px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-info{margin-top:.8rem;display:flex;flex-direction:column;gap:.35rem}
.kv{display:flex;justify-content:space-between;font-size:.88rem;border-bottom:1px dashed var(--line);padding-bottom:.28rem}
.kv span{color:var(--muted)}
.kv b{font-weight:600;color:var(--ink)}
.kv.en{flex-direction:column;align-items:flex-start}
.kv.en b{font-weight:500;margin-top:.15rem}
.meta .lv{font-size:.7rem;font-weight:600;color:var(--acc);background:var(--acc-soft);padding:.15rem .5rem;border-radius:999px}
.same-rad{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.4rem}
.kw{font-weight:600;font-size:1.05rem;min-width:40px;height:40px;border:1px solid var(--line-strong);border-radius:10px;background:var(--card);cursor:pointer;color:var(--ink);transition:all .14s}
.kw:hover{border-color:var(--acc);color:var(--acc)}
.stroke-picker h3{font-weight:600;font-size:1rem;margin:.4rem 0 .3rem}
.q-passage{background:var(--bg-soft);border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:12px;padding:.85rem 1rem;margin-bottom:.7rem;font-size:.92rem;line-height:1.8;color:var(--ink);white-space:pre-wrap}
.q-line{font-size:1.05rem;font-weight:600;margin-bottom:.25rem;line-height:1.5}
.q-en{font-size:.8rem;color:var(--muted);margin-bottom:.55rem;line-height:1.4}
/* HSK1：题面拼音 / 看图判断题大图 / 词+拼音 */
/* 题库内拼音统一放大 30%（用户 2026-09-15：原来的偏小） */
.q-py{font-size:1.1rem;color:var(--muted);margin-bottom:.55rem;line-height:1.5;letter-spacing:.02em}
.q-img{display:block;max-width:min(320px,72%);max-height:250px;width:auto;margin:.45rem auto .7rem;border-radius:14px;background:#fff;box-shadow:0 3px 14px rgba(0,0,0,.07)}
.pic-tf-word{display:flex;align-items:baseline;justify-content:center;gap:.55rem;margin:.15rem 0 .7rem}
.pic-tf-word .w{font-size:1.5rem;font-weight:700;color:var(--ink)}
.pic-tf-word .wp{font-size:1.24rem;color:var(--muted)}
/* 选项拼音小字（HSK1 听四/读三/读四） */
.opt-t{display:block;line-height:1.35}
.opt-py{display:block;font-size:.94rem;color:var(--muted);margin-top:.15rem;line-height:1.3}
/* 听力原文下方拼音 */
.tr-py{font-size:1.1rem;color:var(--muted);margin-top:.35rem;line-height:1.55}

/* 免拼音检索工具栏 */
.browser{display:flex;flex-direction:column;gap:.5rem}
.mode-bar{display:flex;flex-wrap:wrap;gap:.4rem}
.mode-btn{font-size:.82rem;padding:.32rem .75rem;border:1px solid var(--line-strong);border-radius:999px;background:var(--card);color:var(--muted);cursor:pointer;transition:all .14s}
.mode-btn:hover{border-color:var(--acc)}
.mode-btn.active{background:var(--acc);color:#fff;border-color:var(--acc)}
.mode-panel{display:flex;flex-wrap:wrap;gap:.35rem;padding:.55rem;background:var(--bg-soft);border:1px solid var(--line-soft);border-radius:12px}
.rad-chip,.stroke-chip,.theme-chip{font-size:.92rem;font-weight:600;padding:.28rem .6rem;border:1px solid var(--line-strong);border-radius:999px;background:var(--card);color:var(--ink);cursor:pointer;transition:all .14s}
.theme-chip{font-weight:600}
.rad-chip:hover,.stroke-chip:hover,.theme-chip:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-1px)}
.browse-label{font-size:.78rem;color:var(--muted);padding:.1rem .2rem}
.st-comp{margin-top:.6rem}
.st-comp h4{font-size:.85rem;color:var(--muted);margin:.2rem 0 .3rem;font-weight:600}

/* 初步认识 */
.intro-en{font-size:.95rem;margin:.1rem 0 .7rem;color:var(--muted)}
.intro-en b{color:var(--acc);font-weight:600}
.intro-ety{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem;margin-bottom:1rem}
.ety-row{display:flex;gap:.6rem;align-items:baseline;padding:.25rem 0;font-size:.92rem}
.ety-k{flex:0 0 4.2rem;color:var(--muted);font-weight:600;font-size:.8rem}
.ety-decomp{font-size:1.2rem;color:var(--acc);letter-spacing:.15em}
.ety-hint{color:var(--muted);line-height:1.6}
.evo-box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1rem;margin-bottom:1.1rem}
.evo-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.evo-head b{font-weight:600;font-size:1.05rem}
.evo-main{display:flex;justify-content:center;align-items:center;min-height:150px;margin-bottom:.7rem}
.evo-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem}
.evo-cell.evo-big .evo-char{font-size:6.5rem;line-height:1.2;font-family:var(--fhanzi-kai);font-weight:400;color:var(--ink)}
.evo-name{font-size:.72rem;color:var(--muted);font-weight:600}
.intro-sec{margin-top:1.1rem}
.intro-sec h4{font-weight:600;font-size:1.02rem;margin-bottom:.5rem;color:var(--ink)}
.ex{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.5rem .75rem;margin-bottom:.45rem}
.ex-zh{font-size:1.02rem;color:var(--ink);line-height:1.5}
.ex-en{font-size:.82rem;color:var(--muted);margin-top:.1rem;line-height:1.4}
.word-card{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:12px;padding:.7rem .9rem;margin-bottom:.6rem}
.word-top{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.35rem;flex-wrap:wrap}
.word{font-weight:700;font-size:1.25rem;color:var(--ink)}
.word-en{font-size:.85rem;color:var(--acc);font-weight:600}
.ety-empty{font-size:.85rem;color:var(--muted);padding:.4rem 0}
.intro-wrap{grid-template-columns:minmax(0,1fr) 380px;align-items:start}
.intro-card{min-width:0}
.intro-card .meta{display:flex;align-items:center;gap:.8rem;margin-bottom:.5rem}
.intro-card .meta .big{font-size:4rem}
.intro-card .meta .py{font-size:1.2rem}
.intro-card-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.2rem}
.intro-expand{white-space:nowrap;font-size:.82rem}
.intro-en{font-size:1.05rem}
.intro-ety{font-size:1rem}
.intro-ety .ety-decomp{font-size:1.3rem}
.intro-ety .ety-hint{font-size:1rem;line-height:1.7}
.intro-sec h4{font-size:1.05rem}
.ex-zh{font-size:1.15rem;font-weight:600}
.ex-en{font-size:.92rem}
.word-card .word{font-size:1.5rem;font-weight:700}
.word-card .word-en{font-size:1rem}
.word-card .ex-zh{font-size:1.08rem}
.intro-modal{width:min(920px,94vw);max-height:94vh;overflow:auto;padding:1.4rem}
.intro-modal .im-title{font-weight:700;font-size:1.5rem;margin-bottom:.2rem}
.intro-modal .im-sub{color:var(--muted);font-size:.9rem;margin-bottom:1rem}
.intro-modal .intro-card-head{display:none}
.intro-modal .meta .big{font-size:4.5rem}
@media(max-width:860px){
  .intro-wrap{grid-template-columns:1fr}
  .intro-card .meta .big{font-size:3rem}
  .intro-modal{width:96vw;padding:1rem}
}

/* ============ 习题训练 · 试卷封面 Hero（编辑排版） ============ */
.quiz-hero{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:2.2rem 2.1rem 1.9rem;margin-bottom:1.4rem;box-shadow:var(--shadow-soft);animation:heroIn .5s cubic-bezier(.22,.9,.32,1) both}
@keyframes heroIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.quiz-hero-top{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:1.1rem}
.quiz-hero-badge{display:inline-block;font-size:.78rem;font-weight:600;background:var(--acc);color:#fff;padding:.36rem 1rem;border-radius:999px}
.quiz-hero-code{font-family:var(--mono);font-weight:600;font-size:.82rem;letter-spacing:.14em;color:var(--muted)}
.quiz-hero-title{font-family:var(--disp);font-weight:600;font-size:clamp(1.9rem,3.6vw,2.8rem);letter-spacing:-.01em;line-height:1.12}
.quiz-hero-sub{color:var(--muted);font-size:.95rem;margin:.55rem 0 1.3rem;max-width:60ch;line-height:1.8}
.quiz-hero-meta{display:flex;gap:1.6rem;border-top:1px solid var(--line);padding-top:1rem;flex-wrap:wrap}
.quiz-hero-meta span{font-size:.8rem;color:var(--muted)}
.quiz-hero-meta b{font-family:var(--mono);font-weight:600;font-size:1.25rem;color:var(--ink);margin-right:.35rem}

/* 技能卡片（奶油画布卡 + 柔和悬停） */
.quiz-skills{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.2rem}
.skill-card{display:flex;align-items:center;gap:1rem;color:var(--ink);border:1px solid var(--glass-line);border-radius:24px;padding:1.3rem 1.2rem;background:var(--glass-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--glass-shadow);cursor:pointer;min-height:128px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s;animation:optIn .45s cubic-bezier(.22,.9,.32,1) both;animation-delay:calc(.08s + var(--stagger,0)*90ms)}
.skill-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:rgba(20,20,19,.30)}
.skill-icon{width:52px;height:52px;flex:none;display:grid;place-items:center;border:1px solid rgba(20,20,19,.18);border-radius:14px;color:var(--acc);background:var(--acc-soft)}
.skill-icon svg{width:26px;height:26px}
.skill-body{flex:1;min-width:0}
.skill-en{font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.22em;color:var(--muted);text-transform:uppercase}
.skill-cn{font-weight:700;font-size:1.28rem;line-height:1.35;margin-top:.15rem}
.skill-n{font-family:var(--mono);font-size:.7rem;font-weight:600;background:var(--bg-soft);padding:.1rem .5rem;border-radius:999px;vertical-align:2px;margin-left:.25rem}
.skill-desc{font-size:.8rem;color:var(--muted);margin-top:.3rem;line-height:1.5}
.skill-go{flex:none;font-family:var(--mono);font-weight:600;font-size:.8rem;background:var(--dark);color:#faf9f5;padding:.5rem .9rem;border-radius:999px;transition:background .15s;white-space:nowrap}
.skill-card:hover .skill-go{background:var(--acc)}
.quiz-meta{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.quiz-meta-item{display:flex;align-items:center;gap:.6rem;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.95rem 1.1rem;font-size:.92rem;flex-wrap:wrap}
.qm-ico{font-size:1.15rem}
.qm-txt{color:var(--muted)}
.qm-txt b{color:var(--ink)}
.meta-link{margin-left:.4rem;font-size:.8rem;font-weight:600;color:var(--acc);background:none;border:none;cursor:pointer;padding:.1rem 0}
.meta-link:hover{text-decoration:underline}
@media(max-width:900px){.quiz-skills{grid-template-columns:1fr}.quiz-meta{grid-template-columns:1fr}}

/* ============ 考试指南 ============ */
.guide-lvbar{display:flex;gap:.5rem;margin-bottom:.9rem;flex-wrap:wrap}
.guide-lv{font-weight:600;padding:.45rem 1.1rem}
.guide-lv.active{background:var(--acc);color:#fff;border-color:var(--acc)}
.guide-lv-common{margin-left:.6rem}
.guide-tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--line);margin-bottom:1.1rem}
.guide-tab{background:none;border:none;cursor:pointer;font-size:1rem;font-weight:600;color:var(--muted);padding:.55rem 1.1rem;border-bottom:2px solid transparent;margin-bottom:-1px}
.guide-tab.active{color:var(--ink);border-bottom-color:var(--acc)}
.guide-audience{font-size:1rem;color:var(--muted);line-height:1.8}
.guide-dur{font-family:var(--mono);font-size:.85rem;color:var(--muted);margin:.4rem 0 1rem}
.guide-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:.95rem}
.guide-table th{background:var(--bg-soft);color:var(--ink);font-weight:600;padding:.6rem .8rem;text-align:left;border-bottom:1px solid var(--line)}
.guide-table td{padding:.55rem .8rem;border-bottom:1px solid var(--line-soft)}
.guide-table tbody tr:last-child td{border-bottom:none}
.guide-table tfoot td{font-weight:700;background:var(--bg-soft)}
.gs-sec{font-weight:700;vertical-align:top}
.gs-min{font-family:var(--mono);font-weight:400;font-size:.8rem;color:var(--muted);margin-top:.25rem}
.gs-note{font-weight:400;font-size:.78rem;color:var(--muted)}
.guide-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin-top:1.1rem}
.gf{display:flex;align-items:baseline;gap:.55rem;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.75rem .95rem;flex-wrap:wrap}
.gf-wide{grid-column:1/-1}
.gf-k{font-size:.82rem;color:var(--muted)}
.gf b{font-family:var(--mono);font-size:1.1rem}
.guide-src{margin-top:1rem;font-size:.78rem;color:var(--muted)}
.gv-search{display:flex;gap:.7rem;align-items:center;margin-bottom:.7rem}
.gv-input{flex:1;padding:.6rem .9rem;border:1px solid var(--line-strong);border-radius:10px;font-size:.95rem;background:var(--card);color:var(--ink)}
.gv-count{font-family:var(--mono);font-size:.8rem;color:var(--muted);white-space:nowrap}
.gv-alpha{display:flex;flex-wrap:wrap;gap:.25rem;margin-bottom:.8rem}
.gv-a{background:var(--card);border:1px solid var(--line);border-radius:6px;font-family:var(--mono);font-size:.8rem;padding:.28rem .5rem;cursor:pointer;color:var(--muted)}
.gv-a.active{background:var(--acc);color:#fff;border-color:var(--acc)}
.gv-tablewrap{overflow-x:auto}
.gv-table td{font-size:.92rem}
.gv-w{font-weight:700;font-size:1.02rem;white-space:nowrap}
.gv-p{color:var(--acc);white-space:nowrap}
.gv-s{color:var(--muted);white-space:nowrap}
.gv-t{color:var(--muted)}
.gv-play{background:none;border:none;cursor:pointer;font-size:1.05rem}
.gv-empty{color:var(--muted);padding:1.4rem;text-align:center}
.gv-pager{display:flex;gap:.3rem;margin-top:.8rem;flex-wrap:wrap}
.gv-pagebtn{background:var(--card);border:1px solid var(--line);border-radius:8px;font-family:var(--mono);padding:.3rem .65rem;cursor:pointer;color:var(--muted)}
.gv-pagebtn.cur{background:var(--acc);color:#fff;border-color:var(--acc)}
.gv-pagebtn:disabled{opacity:.4;cursor:default}
.guide-res-item{display:flex;align-items:center;gap:.85rem;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.95rem 1.1rem;margin-bottom:.6rem;text-decoration:none;color:var(--ink);transition:border-color .15s}
.guide-res-item:hover{border-color:var(--acc)}
.gri-ico{font-size:1.3rem}
.gri-name{flex:1;font-weight:600}
.gri-go{font-size:.82rem;color:var(--acc);font-weight:600}
.guide-res-group{margin-bottom:1.15rem}
.guide-res-group:last-child{margin-bottom:0}
.grg-title{font-size:.92rem;font-weight:700;margin:0 0 .55rem;color:var(--ink)}

/* ============ Section/Part 分节卡片 ============ */
.sec-card{border:1px solid var(--glass-line);border-radius:24px;background:var(--glass-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--glass-shadow);padding:1.1rem 1.2rem;margin-bottom:.9rem;animation:optIn .45s cubic-bezier(.22,.9,.32,1) both;animation-delay:calc(var(--stagger,0)*70ms)}
.sec-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;gap:.6rem;flex-wrap:wrap}
.sec-tag{display:inline-block;font-family:var(--mono);background:var(--card-cream);color:var(--ink);font-weight:600;font-size:.76rem;padding:.26rem .7rem;border-radius:999px;margin-right:.55rem;vertical-align:2px}
.sec-name{font-weight:700;font-size:1.08rem}
.sec-count{font-family:var(--mono);font-size:.78rem;font-weight:600;color:var(--muted)}
.sec-subs{display:flex;flex-wrap:wrap;gap:.5rem}
.sec-sub-btn{font-weight:600;border-radius:999px}
.sec-audio-slot{margin:.2rem 0 .85rem;display:flex;flex-direction:column;gap:.5rem}
/* 分节音频：标签与播放器并排一行，省一行纵向空间 */
.audio-headwrap{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.audio-headwrap .part-label{margin:0}
.part-label{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.06em;color:var(--muted);margin-top:.15rem}
.sec-audio{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;margin-bottom:1rem}
.sec-audio-tip{font-size:.85rem;color:var(--muted);margin-bottom:.4rem}
.full-audio{margin-top:.9rem;border:1px dashed var(--line-strong);border-radius:14px;padding:.8rem 1rem}
.full-audio summary{font-size:.85rem;font-weight:600;color:var(--muted);cursor:pointer}
.full-audio[open] summary{margin-bottom:.6rem}

/* ============ 分段音频播放器（自绘） ============ */
.audio-card{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:.3rem .6rem}
.audio-head{display:flex;align-items:center;gap:.55rem}
.seg-play{width:32px;height:32px;flex:none;border:none;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;transition:transform .15s,background .15s}
.seg-play:hover{transform:scale(1.08);background:var(--acc-deep)}
.seg-play.playing{background:var(--acc-deep)}
.seg-play svg{width:14px;height:14px}
/* 播放中的均衡器动画 */
.eq{display:flex;align-items:flex-end;gap:2.5px;height:16px;width:22px;flex:none}
.eq i{width:3.5px;background:var(--acc);border-radius:2px;height:30%;opacity:.25;transition:opacity .2s}
.eq.on i{opacity:1;animation:eqB 0.9s ease-in-out infinite}
.eq.on i:nth-child(2){animation-delay:.15s}
.eq.on i:nth-child(3){animation-delay:.3s}
.eq.on i:nth-child(4){animation-delay:.45s}
@keyframes eqB{0%,100%{height:25%}50%{height:100%}}
.audio-time{font-family:var(--mono);font-size:.76rem;font-weight:600;color:var(--muted);white-space:nowrap}
.audio-tip{font-size:.74rem;color:var(--muted);margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1180px){.audio-tip{display:none}}
.audio-seek{width:100%;margin-top:.25rem;appearance:none;-webkit-appearance:none;height:4px;border-radius:999px;background:var(--card-cream);outline:none;cursor:pointer}
.audio-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--acc);border:2px solid #fff;box-shadow:0 0 0 1.5px var(--acc);cursor:pointer}

/* 单题重听 */
.replay-bar{display:flex;gap:.4rem;margin-top:.25rem}
.replay-btn{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-weight:600;font-size:.8rem;padding:.38rem .85rem;border-radius:999px;border:1px solid rgba(20,20,19,.30);color:var(--acc-deep);background:var(--acc-soft);transition:all .15s}
.replay-btn:hover{background:var(--acc);color:#fff}
.replay-btn.playing{background:var(--acc);color:#fff;animation:replayPulse 1.2s ease-in-out infinite}
@keyframes replayPulse{0%,100%{box-shadow:0 0 0 0 rgba(20,20,19,.25)}50%{box-shadow:0 0 0 7px rgba(20,20,19,0)}}
.replay-stop{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-weight:600;font-size:.74rem;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--line-strong);color:var(--muted);background:var(--card)}
.replay-stop:hover{border-color:var(--no);color:var(--no)}

/* 答题内的图片选项 —— 图片是听力页最优先的内容，尽量放大（答后允许下滚看原文） */
/* 4 选项单行大图；5 选项单行五联排；6 选项 3×2；窄屏退 2 列/1 列 */
.opts.pics{grid-template-columns:repeat(4,1fr);gap:.5rem;padding:.45rem}
.opts.pics.cols-3{grid-template-columns:repeat(3,1fr)}
.opts.pics.cols-5{grid-template-columns:repeat(5,1fr)}
/* 各档图片高度：够大才能看清图里的细节（人物动作、物品朝向） */
.opts.pics.cols-3 .opt-img img{max-height:185px;min-height:130px}
.opts.pics.cols-5 .opt-img img{max-height:175px;min-height:120px}
@media(max-width:900px){.opts.pics{grid-template-columns:repeat(2,1fr)}.opts.pics.cols-3{grid-template-columns:repeat(2,1fr)}.opts.pics.cols-5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.opts.pics{grid-template-columns:1fr}}
.opt-img{flex-direction:column;gap:.25rem;align-items:center;display:flex;padding:.55rem .5rem;border-radius:14px;position:relative}
/* 字母标签为图片左上角徽章，不占独立行 */
.opt-img .opt-lab{position:absolute;top:6px;left:6px;z-index:2;font-family:var(--mono);font-weight:700;font-size:.78rem;color:var(--ink);
  background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(255,255,255,.78));border:1px solid rgba(20,20,19,.14);
  border-radius:8px;padding:.05rem .42rem;box-shadow:0 2px 8px -3px rgba(20,20,19,.25);pointer-events:none}
.opt-img:not(:disabled):hover{transform:translateY(-2px)}
.opt-img.correct{background:linear-gradient(145deg,rgba(255,255,255,.8),rgba(233,244,234,.7));border-color:rgba(63,156,86,.5);color:var(--ok-deep)}
.opt-img.wrong{background:linear-gradient(145deg,rgba(255,255,255,.8),rgba(250,234,234,.7));border-color:rgba(198,69,69,.5)}
.opt-img img{width:auto;max-width:100%;max-height:190px;min-height:135px;object-fit:contain;border-radius:10px;pointer-events:none;background:#fff;padding:2px}
/* 重听条 + 听力原文槽（操作行下方） */
.tr-slot{margin-top:.45rem}
.tr-slot:empty{margin:0}
/* 听力判断对错（√ / ×）：两个并排的大圆形玻璃符号按钮 + 下方"对/错"文字标签（消除符号歧义） */
.opts.tf{display:flex;justify-content:center;gap:1.4rem;padding:.5rem}
.opt.tf{width:84px;height:88px;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;line-height:1;
  border:1px solid var(--glass-line);background:var(--glass-bg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--glass-shadow);
  transition:transform .18s,box-shadow .18s,border-color .18s}
.opt.tf svg{width:36px;height:36px}
.opt.tf .tf-lab{font-size:.78rem;font-weight:700;color:var(--muted);letter-spacing:.1em}
.opt.tf:not(:disabled):hover{transform:translateY(-4px) scale(1.02);box-shadow:0 18px 40px -16px rgba(20,20,19,.3),inset 0 1px 0 rgba(255,255,255,.95)}
.opt.tf.correct{background:linear-gradient(145deg,rgba(233,244,234,.95),rgba(193,230,205,.85));border-color:var(--ok-deep);color:var(--ok-deep);animation:optPop .5s cubic-bezier(.2,.9,.3,1.4)}
.opt.tf.correct .tf-lab{color:var(--ok-deep)}
.opt.tf.wrong{background:linear-gradient(145deg,rgba(250,234,234,.95),rgba(230,193,193,.85));border-color:var(--no);color:var(--no);animation:optShake .45s cubic-bezier(.36,.07,.19,.97)}
@media(max-width:480px){.opt.tf{width:74px;height:78px}.opt.tf svg{width:30px;height:30px}.opts.tf{gap:1rem;padding:.4rem}}
/* 判断题答错后的"正确答案"文字提示 */
.fb-ans{font-weight:600;color:var(--ink);background:var(--card-cream);border:1px solid var(--line-strong);border-radius:999px;padding:.22rem .8rem;font-size:.86rem}
.fb-ans b{color:var(--acc-deep);font-weight:800}
/* 倍速按钮 + 下拉列表 */
.rate-wrap{position:relative;margin-left:.2rem;flex:none}
.rate-btn{font-family:var(--mono);font-size:.72rem;font-weight:700;padding:.3rem .6rem;min-width:3.2rem;border-radius:999px;border:1px solid rgba(20,20,19,.28);color:var(--ink);background:rgba(255,255,255,.72);transition:all .15s}
.rate-btn:hover{border-color:var(--ink)}
.rate-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:5.2rem;display:none;flex-direction:column;gap:2px;padding:.35rem;
  border-radius:16px;border:1px solid var(--glass-line);
  background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(255,255,255,.88));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 40px -16px rgba(20,20,19,.35),inset 0 1px 0 rgba(255,255,255,.9);z-index:60}
.rate-menu.open{display:flex;animation:dropIn .18s cubic-bezier(.22,.9,.32,1) both}
.rate-item{font-family:var(--mono);font-size:.78rem;font-weight:600;padding:.34rem .6rem;border:none;border-radius:10px;background:transparent;color:var(--ink);text-align:left;transition:background .12s}
.rate-item:hover{background:rgba(20,20,19,.07)}
.rate-item.active{background:var(--ink);color:#fff}
/* ===== 连词成句：横长条拖拽排序 ===== */
.connect-wrap{display:flex;flex-direction:column;gap:1rem}
.connect-hint{font-size:.82rem;color:var(--muted);font-family:var(--mono)}
/* 答案槽：单一横长条，所有 token 在内连续排列，不再分割为小方块 */
.connect-slot-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-height:4.6rem;padding:.8rem 1rem;
  border:2px dashed rgba(20,20,19,.18);border-radius:999px;
  background:linear-gradient(160deg,rgba(255,255,255,.62),rgba(241,241,239,.42));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.connect-slot-bar:empty::before{content:"↓ 点下方词牌排成正确句子";color:rgba(20,20,19,.35);font-size:.9rem;font-family:var(--mono);font-weight:600}
.connect-slot-bar .connect-token{margin:0}
.connect-pool{display:flex;flex-wrap:wrap;gap:.55rem;padding:.8rem;border-radius:24px;border:1px solid var(--glass-line);background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--glass-shadow);min-height:4rem}
.connect-token{display:inline-flex;align-items:center;padding:.55rem 1.15rem;border-radius:999px;font-size:1.1rem;font-weight:700;
  border:1px solid var(--glass-line);background:var(--glass-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--glass-shadow);cursor:grab;user-select:none;transition:transform .12s,box-shadow .12s}
.connect-token:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(20,20,19,.25),inset 0 1px 0 rgba(255,255,255,.9)}
.connect-token.dragging{opacity:.4;cursor:grabbing}
.connect-token.tok-ok{background:linear-gradient(145deg,rgba(233,244,234,.9),rgba(193,230,205,.7));border-color:var(--ok-deep);color:var(--ok-deep)}
.connect-token.tok-no{background:linear-gradient(145deg,rgba(250,234,234,.9),rgba(230,193,193,.7));border-color:var(--no);color:var(--no)}
/* 拖拽中插入位置指示线 */
.connect-drop-hint{width:3px;height:2.2rem;border-radius:2px;background:var(--ink);animation:fbIn .2s cubic-bezier(.22,.9,.32,1) both}

/* ===== 看拼音写汉字：手写板 + 相似度对照 ===== */
.write-hanzi-wrap{display:flex;flex-direction:flex-start;flex-direction:column;align-items:center;gap:1rem}
/* 题库内拼音统一放大 30%（用户 2026-09-15） */
.write-pinyin{font-size:1.43rem;color:var(--ink);text-align:center}
.write-pinyin b{font-size:1.82rem;color:var(--ink);font-weight:700;letter-spacing:.05em}
.write-canvas{border-radius:20px;border:1px solid var(--line);background:#fff;cursor:crosshair;box-shadow:var(--shadow-soft);touch-action:none}
.write-tools{display:flex;gap:.6rem;margin-top:.6rem;justify-content:center}
.write-compare{display:flex;gap:1rem;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:.8rem;width:100%}
.write-compare .wc-cell{display:flex;flex-direction:column;align-items:center;gap:.4rem}
.write-compare canvas{width:160px;height:160px;border-radius:16px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-soft)}
.write-compare .wc-lbl{font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--muted);letter-spacing:.1em}
.write-score{display:flex;align-items:center;gap:.6rem;justify-content:center;margin-top:.6rem}
.write-score .score-bar{flex:1;max-width:280px;height:8px;background:var(--card-cream);border-radius:999px;overflow:hidden}
.write-score .score-bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--no),var(--amber),var(--ok-deep));width:0;border-radius:999px;transition:width .8s cubic-bezier(.22,.9,.32,1)}
.write-score .score-num{font-family:var(--mono);font-weight:700;font-size:1rem;min-width:3.4rem;text-align:right}
.write-score .score-lbl{font-family:var(--mono);font-size:.78rem;color:var(--muted);min-width:3.4rem}

.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.3rem 0 .8rem}
/* 连词成句词语牌：按内容自适应大小（字多成长牌，字少是小牌），不再写死 44px */
.chips .chip{width:auto;height:auto;min-width:0;min-height:2.55rem;display:inline-flex;align-items:center;padding:.35rem 1rem;border-radius:12px;font-size:1.12rem;font-weight:600;background:var(--card);border:1px solid var(--line-strong);box-shadow:var(--shadow-soft)}
.q-ref{margin-top:.35rem;padding:.4rem .65rem;background:var(--ok-soft);border-left:3px solid var(--ok-deep);border-radius:10px;font-size:.85rem}
/* 听力原文：答题页最重要的内容 —— 大字号（1.06rem）、占满内容区；行距适度保一屏 */
.q-transcript{margin-top:.2rem;padding:.4rem .8rem .45rem;background:var(--card-cream);border-left:4px solid var(--ink);border-radius:12px}
.q-transcript .tr-head{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.12em;color:var(--muted);margin-bottom:.2rem}
.q-transcript .tr-body{font-size:1.06rem;line-height:1.52;color:var(--ink);max-width:62em}
@media(max-width:640px){.q-transcript .tr-body{font-size:.98rem;line-height:1.55}}

/* 套题选择行 */
.paper-bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.paper-bar-lbl{font-family:var(--mono);font-size:.76rem;font-weight:600;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.paper-chip{font-weight:600;padding:.45rem 1.05rem;border-radius:999px}
.paper-chip.active{background:var(--ink);color:#faf9f5;border-color:var(--ink)}
/* 题库分级：级别行与套卷行区分（级别行更醒目、与套卷行拉开距离） */
.lv-bar{margin-bottom:.45rem;padding-bottom:.55rem;border-bottom:1px dashed var(--line)}
.lv-chip{font-weight:700}
.lv-chip.active{background:var(--acc);color:#fff;border-color:var(--acc)}

/* ---------- 账户（邮箱+密码注册/登录） ---------- */
#auth-btn{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#auth-btn.on{font-weight:600;border-color:var(--ink)}
.au-msg{margin-top:.5rem;font-size:.82rem;text-align:center;min-height:1.15em;line-height:1.4}
.au-msg.err{color:#C0392B}
.au-msg.ok{color:#2F6F5E}
.au-alt{font-size:.8rem;color:var(--muted);text-align:center;margin-top:.7rem}
.au-alt a{color:var(--accent,#2F6F5E);text-decoration:none;font-weight:600;margin-left:.25rem}
.au-alt a:hover{text-decoration:underline}