/* AI私教 · L0 桌面验证 · 样式
 * 布局原则：一个视觉中心（课件舞台），对话流降为辅助。
 * 配色：暖白纸感 + 墨色字，红（品牌/强调）/ 青（正确·生长）/ 金（高亮·攻克）。
 */
:root{
  --paper:#FBF8F3;
  --card:#FFFFFF;
  --ink:#3A342E;
  --ink2:#6B6259;
  --muted:#9A9086;
  --line:#EBE4DA;
  --brand:#C0392B;
  --teal:#2E9E8F;
  --teal2:#8FC9BF;
  --gold:#C9A227;
  --radius:20px;
  --kai:"STKaiti","KaiTi","Kaiti SC","楷体",serif;
  --hei:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--hei);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;background:#F3EEE7;padding:1px 5px;border-radius:5px}

.app{height:100vh;display:flex;flex-direction:column}

/* ───────── 顶栏 ───────── */
.topbar{
  height:58px;flex:0 0 58px;display:flex;align-items:center;gap:22px;
  padding:0 22px;background:var(--card);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:.2px}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(192,57,43,.12)}
.phases{display:flex;gap:6px;margin-left:auto}
.phase{
  display:flex;align-items:center;gap:6px;padding:5px 13px;border-radius:999px;
  background:#F5F0E9;color:var(--muted);font-size:13px;transition:.3s;
}
.phase b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#E6DED3;font-size:11px;font-weight:600;color:#8A7F73}
.phase.on{background:var(--brand);color:#fff}
.phase.on b{background:rgba(255,255,255,.26);color:#fff}
.meta{display:flex;gap:8px;align-items:center}
.chip{font-size:12.5px;padding:4px 11px;border-radius:999px;background:#F5F0E9;color:var(--ink2);white-space:nowrap}

/* ───────── 布局 ───────── */
.layout{
  flex:1;min-height:0;display:grid;grid-template-columns:1fr 318px;gap:16px;padding:16px;overflow:hidden;
}
.classroom{min-height:0;display:grid;grid-template-rows:1fr 132px auto;gap:12px}

/* ───────── 课件舞台 ───────── */
.stagebox{
  min-height:0;display:grid;grid-template-rows:44px 1fr auto;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(58,52,46,.04),0 8px 24px -18px rgba(58,52,46,.28);
  overflow:hidden;
}
.stage-hd{
  display:flex;align-items:center;gap:10px;padding:0 20px;border-bottom:1px dashed var(--line);
}
.hd-tag{
  font-size:12px;padding:3px 10px;border-radius:999px;background:#FDF3F1;color:var(--brand);font-weight:600;letter-spacing:.3px;
}
.hd-kp{font-size:13.5px;color:var(--ink2)}
.stage-body{position:relative;min-height:0;overflow:hidden;background:
  radial-gradient(120% 90% at 50% 0%,#FFFDF9 0%,#FDFAF5 60%,#FAF6F0 100%)}
.scene-host{position:absolute;inset:0;display:grid;place-items:center;padding:8px}
.scene-host svg{width:100%;height:100%;display:block}
.stage-overlay{
  position:absolute;inset:0;display:grid;place-items:end center;padding:22px 22px 26px;pointer-events:none;
}
.stage-overlay>*{pointer-events:auto;max-width:640px;width:100%}

.stage-ft{
  border-top:1px dashed var(--line);padding:12px 20px;min-height:58px;
  display:flex;align-items:center;background:#FFFDFA;
}
.cap{font-size:14.5px;color:var(--ink2);width:100%}
.cap b{color:var(--brand)}
.cap-t{font-size:15px;color:var(--ink)}
.cap-s{font-size:13px;color:var(--muted);margin-top:2px}
.cap.hold{display:flex;flex-direction:column;gap:7px}
.cap.reveal{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:15px;color:var(--ink)}
.cap.reveal .cap-s{font-size:13px}
.cap.elicit{display:grid;grid-template-columns:1fr auto;grid-template-areas:"q b" "bar bar";gap:8px 14px;align-items:center}
.elicit-q{grid-area:q;font-size:16.5px;color:var(--ink);font-family:var(--kai);font-weight:600}
.cap.elicit .thinkbar{grid-area:bar}
#btn-think{grid-area:b}

/* 留白计时：不是装饰 —— 让孩子看见「正在等我」。所以它要细、要短、要居中，
   否则一条满宽金线横在舞台上，看着像样式坏了（人眼验收抓到的真 bug）。*/
.thinkbar{height:3px;border-radius:99px;background:#F1EBE3;overflow:hidden;max-width:300px;margin:2px auto 0}
.thinkbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),#E3C158);border-radius:99px}

.btn-main{
  border:0;border-radius:12px;padding:11px 22px;background:var(--brand);color:#fff;
  font-size:14.5px;font-weight:600;letter-spacing:.3px;transition:.2s;
}
.btn-main:hover{filter:brightness(1.07)}
.btn-main:disabled{opacity:.5;cursor:default}
.btn-ghost{
  border:1px solid var(--line);background:#fff;color:var(--ink2);
  border-radius:10px;padding:7px 15px;font-size:13px;transition:.2s;
}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal)}

/* 判卷条 */
.cap.verdict{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vmark{font-weight:700}
.cap.verdict.ok .vmark{color:var(--teal)}
.cap.verdict.no .vmark{color:var(--brand)}
.cap.verdict.ok .vtext{color:var(--teal);font-weight:600}
.cap.verdict.no .vtext{color:var(--brand);font-weight:600}

/* 无场景时的文字卡（诚实降级） */
.textcard{padding:8px 26px;max-width:620px}
.textcard p{font-size:16.5px;line-height:1.95;color:var(--ink);font-family:var(--kai)}
.textcard .gap{font-size:13px;color:var(--gold);font-family:var(--hei);margin-top:16px}
.idlebox{text-align:center;padding:20px}
.idlebox h1{font-size:24px;margin:0 0 8px;font-weight:600}
.idlebox p{color:var(--ink2);margin:0 0 22px;font-size:14.5px}
.pack-list{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.pack{
  width:246px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:16px 18px;cursor:pointer;transition:.22s;
}
.pack:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:0 10px 24px -18px rgba(192,57,43,.55)}
.pack .t{font-size:16px;font-weight:600;margin-bottom:4px}
.pack .s{font-size:12.5px;color:var(--muted);margin-bottom:8px}
.pack .m{font-size:12.5px;color:var(--ink2);line-height:1.55}

/* ───────── 对话流水 ───────── */
.stream{
  overflow-y:auto;padding:10px 14px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;display:flex;flex-direction:column;gap:8px;
}
.bubble{display:flex;gap:9px;align-items:flex-start}
.bubble .avatar{
  flex:0 0 26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:#F5F0E9;color:var(--ink2);font-size:12px;font-weight:600;
}
.bubble.me .avatar{background:#EAF4F2;color:var(--teal)}
.bubble .body{flex:1;min-width:0}
.bubble .who{font-size:11.5px;color:var(--muted);margin-bottom:1px}
.bubble .say{font-size:13.6px;color:var(--ink2);word-break:break-word}
.bubble .tagline{font-size:11.5px;color:var(--brand);font-weight:600;margin-bottom:2px}
.bubble.me .say{color:var(--ink)}
.bubble.system .say{color:var(--gold);font-size:12.5px}
.opener h1{font-size:19px;margin:0 0 4px}
.opener p{color:var(--ink2);font-size:13.5px;margin:0 0 12px}

/* ───────── 输入区 ───────── */
.composer{
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:11px 14px;
}
.composer-row{display:flex;gap:11px;align-items:stretch}
.talk{
  flex:0 0 152px;border:0;border-radius:12px;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:8px;font-size:14.5px;font-weight:600;
  transition:.2s;user-select:none;
}
.talk:disabled{background:#E6DED3;color:#A79C90;cursor:not-allowed}
.talk.rec{background:#B93B2E;animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}
.talk-ico{font-size:17px}
.text-line{flex:1;display:flex;gap:8px}
.text-line input{
  flex:1;border:1px solid var(--line);border-radius:12px;padding:0 14px;font-size:14.5px;
  font-family:inherit;color:var(--ink);background:#FFFDFA;outline:none;transition:.2s;
}
.text-line input:focus{border-color:var(--brand);background:#fff}
.text-line input:disabled{background:#F7F4EF;color:var(--muted)}
.text-line button{
  border:0;border-radius:12px;padding:0 20px;background:var(--ink);color:#fff;font-size:14px;font-weight:600;
}
.text-line button:disabled{background:#E6DED3;color:#A79C90;cursor:not-allowed}
.composer-foot{display:flex;align-items:center;gap:16px;margin-top:9px;font-size:12px;color:var(--muted)}
.switch{display:flex;align-items:center;gap:6px;cursor:pointer}
.latency{margin-left:auto}
.mic-state{color:var(--ink2)}
.spin{display:inline-block;width:12px;height:12px;border:2px solid #E3DCD2;border-top-color:var(--brand);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ───────── 侧栏 ───────── */
.side{min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.panel-hd{display:flex;align-items:center;justify-content:space-between;padding:11px 15px;border-bottom:1px dashed var(--line)}
.panel-hd h3{margin:0;font-size:13.5px;font-weight:600}
.panel-bd{padding:13px 15px}
.mini{border:0;background:#F5F0E9;color:var(--ink2);border-radius:8px;padding:3px 10px;font-size:12px}
.mini-tag{font-size:11.5px;color:var(--teal);background:#EAF4F2;padding:3px 9px;border-radius:999px}
.muted{color:var(--muted);font-size:13px;margin:0}
.face{margin-bottom:14px}
.face:last-child{margin-bottom:0}
.face h4{margin:0 0 8px;font-size:12.5px;color:var(--ink2);font-weight:600}
.bar{height:9px;border-radius:99px;background:#F1EBE3;overflow:hidden;display:flex}
.bar i.a{background:var(--teal)}
.bar i.b{background:var(--teal2)}
.legend{display:flex;gap:12px;margin-top:7px;font-size:11.5px;color:var(--ink2);flex-wrap:wrap}
.legend i{display:inline-block;width:8px;height:8px;border-radius:3px;margin-right:4px}
.bt-item{background:#FFFBF3;border:1px solid #F2E6CB;border-radius:12px;padding:10px 12px;margin-bottom:9px}
.bt-item .lvl{font-size:11px;color:var(--gold);font-weight:700;letter-spacing:.4px}
.bt-item .nm{font-size:14px;font-weight:600;margin:3px 0 4px}
.bt-item .nar{font-size:12.5px;color:var(--ink2);line-height:1.6}
.kv{display:flex;gap:10px;font-size:12.5px;margin-bottom:6px}
.kv b{flex:0 0 34px;color:var(--muted);font-weight:500}
.kv span{color:var(--ink2);min-width:0;word-break:break-word}
.reason{font-size:12.5px;color:var(--ink2);background:#F8F5F0;border-radius:9px;padding:8px 10px;line-height:1.55}

/* ───────── 题卡浮层 ───────── */
.qcard2{
  background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:18px;
  padding:20px 22px;box-shadow:0 18px 40px -26px rgba(58,52,46,.5);
  backdrop-filter:blur(3px);transition:.3s;
}
.qcard2.pass{border-color:var(--teal);box-shadow:0 18px 40px -26px rgba(46,158,143,.6)}
.qcard2.fail{border-color:var(--brand)}
.q2{font-size:18px;font-weight:600;line-height:1.7;font-family:var(--kai)}
.qhint{font-size:13px;color:var(--muted);margin:8px 0 0}
.opts2{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.opt2{
  border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px 18px;
  font-size:15px;color:var(--ink);transition:.18s;
}
.opt2:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.opt2:disabled{opacity:.55;cursor:default}

.evalcard2{
  background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:18px;padding:20px 22px;
  box-shadow:0 18px 40px -26px rgba(58,52,46,.5);max-height:100%;overflow-y:auto;
}
.childline{font-size:19px;font-family:var(--kai);font-weight:600;margin-bottom:14px}
.pre{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--ink2);white-space:pre-wrap;line-height:1.7}

/* ══════════ 课件场景（SVG）══════════ */
/* 所有带 class 的图形都获得过渡 —— 动画靠切 class / 改 transform 触发 */
.stagebox svg [class]{
  transition:opacity .45s ease, transform .62s cubic-bezier(.22,.9,.3,1),
             fill .45s ease, stroke .45s ease, stroke-width .45s ease;
}
.stagebox svg .h{opacity:0}
.stagebox svg .h.on{opacity:1}
/* ⚠️ .h.on 与 .fade 同元素时，裸 .fade 会被 .h.on 压住而失效（截图暴露的真 bug）——
   所以「淡出」必须用 .h.fade 这种同权重、位置更靠后的选择器。 */
.stagebox svg .h.fade{opacity:.2}
.stagebox svg .h.gone{opacity:0}
.stagebox svg .pop{transform:scale(.55)}
.stagebox svg .pop.on{transform:scale(1)}
.stagebox svg .pop,.stagebox svg .rot,.stagebox svg .person,.stagebox svg .tad{transform-box:fill-box;transform-origin:center}
.stagebox svg .rot{transform:rotate(0deg)}
.stagebox svg .fade{opacity:.18}
.stagebox svg .gone{opacity:0}
.stagebox svg .hot{filter:drop-shadow(0 0 10px rgba(201,162,39,.65))}
.stagebox svg .stamp{animation:stamp .45s ease}
@keyframes stamp{0%{transform:scale(.7)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.stagebox svg .swim{animation:swim 1.5s ease-in-out infinite}
@keyframes swim{0%,100%{transform:translateX(-7px) rotate(-3deg)}50%{transform:translateX(7px) rotate(3deg)}}

/* 通用文字 */
.stagebox svg text{font-family:var(--hei);text-anchor:middle}
.stagebox svg .counter{font-size:16px;fill:var(--ink2);font-weight:600}
.stagebox svg .anno3{font-size:15px;fill:var(--ink2)}
.stagebox svg .anno3.hot-text{fill:var(--brand);font-weight:600;font-family:var(--kai);font-size:17px}
.stagebox svg .eq{font-size:30px;fill:var(--ink);font-weight:600;letter-spacing:2px;font-family:var(--hei)}
.stagebox svg .eq.big{font-size:40px;fill:var(--brand);letter-spacing:4px}
.stagebox svg .tag{font-size:13px;fill:var(--gold);font-weight:600}
.stagebox svg .tag2{font-size:13.5px;fill:var(--ink2)}
.stagebox svg .blab{font-size:26px;fill:var(--teal);font-weight:700}
.stagebox svg .stepLab{font-size:22px;fill:var(--teal);font-weight:700}
.stagebox svg .seqT{font-size:15.5px;fill:var(--ink);font-family:var(--kai)}
.stagebox svg .pinyin{font-size:19px;fill:var(--muted);letter-spacing:1px}
.stagebox svg .glyph{font-family:var(--kai);fill:var(--ink);font-weight:400}
.stagebox svg .glyph.xl{font-size:150px}
.stagebox svg .glyph.lg{font-size:84px}
.stagebox svg .person{font-family:var(--kai);font-size:44px;fill:var(--brand)}
.stagebox svg .arrow{stroke:var(--muted);stroke-width:2;stroke-dasharray:5 5}

/* 数学 · 糖葫芦 */
.stagebox svg .stick{stroke:#C9A98A;stroke-width:3;stroke-linecap:round}
.stagebox svg .bead{fill:url(#candy)}
.stagebox svg .frame{fill:none;stroke:#DCD4C8;stroke-width:2;stroke-dasharray:6 6}
.stagebox svg .frame.on{stroke:var(--teal);stroke-dasharray:none;stroke-width:2.5;fill:rgba(46,158,143,.07)}
.stagebox svg .frame.hot{stroke:var(--gold);fill:rgba(201,162,39,.1);stroke-width:3}

/* 数学 · 加号 */
.stagebox svg .bar{stroke:var(--ink);stroke-width:15;stroke-linecap:round}
.stagebox svg .rot.warm .bar{stroke:var(--brand)}
.stagebox svg .fnum{font-size:38px;fill:var(--ink);font-weight:600}
.stagebox svg .fnum.hot{fill:var(--brand)}
.stagebox svg .fop{font-size:34px;fill:var(--ink2)}

/* 数学 · 小朋友 */
.stagebox svg .skin{fill:#F7DFC8}
.stagebox svg .body{fill:#9FC7D8}
.stagebox svg .ball{fill:#E8A33D}
.stagebox svg .kbox{fill:rgba(46,158,143,.06);stroke:var(--teal);stroke-width:2;stroke-dasharray:6 6}
.stagebox svg .kbox.hot{stroke:var(--gold);fill:rgba(201,162,39,.1);stroke-dasharray:none}

/* 语文 · 结构 */
.stagebox svg .framePath{fill:none;stroke:var(--ink);stroke-width:5;stroke-linejoin:round}

/* 语文 · 眼睛 */
.stagebox svg .eyewhite{fill:#fff;stroke:var(--ink);stroke-width:3}
.stagebox svg .pupil{fill:#3A342E}
.stagebox svg .shine{fill:#fff}
.stagebox svg .lid{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round}

/* 语文 · 对比卡 */
.stagebox svg .card{stroke-width:2}
.stagebox svg .card.ask{fill:rgba(46,158,143,.08);stroke:var(--teal)}
.stagebox svg .card.ans{fill:#F6F2EC;stroke:#DCD4C8}
.stagebox svg svg .ctxt,.stagebox svg .ctxt{font-size:14.5px;font-weight:600}
.stagebox svg .ctxt.askT{fill:var(--teal)}
.stagebox svg .ctxt.ansT{fill:var(--ink2)}

/* 语文 · 蝌蚪 */
.stagebox svg .tad{fill:#5E7A4A}
.stagebox svg .tad.grown{fill:#4E8C3A;transform:scale(1.16);transform-box:fill-box;transform-origin:center}
.stagebox svg .tad2.grown{fill:#4E8C3A;transform:scale(1.16);transform-box:fill-box;transform-origin:center}
/* 尾巴要往「身体那一端」缩，而不是原地缩 —— 否则看着像尾巴自己飘走了 */
.stagebox svg #tail{transform-box:fill-box;transform-origin:left center}
.stagebox svg .leg{fill:none;stroke:#5E7A4A;stroke-width:5;stroke-linecap:round}
.stagebox svg .eyeW{fill:#fff}
.stagebox svg .eyeB{fill:#2B2B2B}

/* 语文 · 四步生长时间轴（画面要承担论证功能：四步得真钉在轴上）*/
.stagebox svg .axis{stroke:#DCD3C4;stroke-width:3;stroke-linecap:round}
.stagebox svg .stepNode.on .nodeC{fill:rgba(46,158,143,.14);stroke:var(--teal);stroke-width:3}
.stagebox svg .stepNode.on .nodeN{fill:var(--teal)}
.stagebox svg .stepNode.on .nodeT{fill:var(--ink)}
.stagebox svg .nodeC{fill:#fff;stroke:#CFC6B6;stroke-width:3}
.stagebox svg .nodeN{fill:#B6AB98;font-size:13px;font-weight:700;text-anchor:middle}
.stagebox svg .nodeT{fill:#9A9081;font-size:14.5px;font-family:var(--kai);text-anchor:middle}

/* ══════════ v2 分段教学：舞台控件（段落进度 / 再看一遍 / 闸门 / 回退菜单）══════════ */
.hd-stage{
  font-size:12px;color:var(--gold);border:1px solid rgba(201,162,39,.4);
  background:rgba(201,162,39,.08);border-radius:999px;padding:2px 10px;
}
.foot-row{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap}
.segbar{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink2);margin-top:9px;justify-content:center}
.segbar .dots{display:flex;gap:4px}
.segbar .dots i{width:16px;height:5px;border-radius:3px;background:#E4DCD1}
.segbar .dots i.done{background:var(--teal2)}
.segbar .dots i.now{background:var(--brand)}
.segbar .stg{color:var(--gold);font-weight:600}
.btn-replay{
  border:1px solid var(--line);background:#fff;color:var(--ink2);
  padding:7px 14px;border-radius:999px;font-size:12.5px;
}
.btn-replay:hover{border-color:var(--teal);color:var(--teal)}
.btn-replay:disabled{opacity:.45;cursor:default}

.retreatcard{
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 26px 60px -40px rgba(58,52,46,.55);
  padding:16px 18px;max-width:520px;width:92%;
}
.retreatcard .rt{font-size:14px;color:var(--ink);font-family:var(--kai);margin-bottom:4px}
.retreatcard .rs{font-size:11.5px;color:var(--muted);margin-bottom:12px}
.retreatcard .ropt{display:flex;flex-direction:column;gap:8px}
.retreatcard .ropt button{
  text-align:left;border:1px solid var(--line);background:#fff;border-radius:13px;
  padding:10px 13px;font-size:13.5px;color:var(--ink);display:flex;flex-direction:column;gap:2px;
}
.retreatcard .ropt button:hover{border-color:var(--teal);background:rgba(46,158,143,.05)}
.retreatcard .ropt button b{font-weight:600}
.retreatcard .ropt button em{font-style:normal;font-size:11px;color:var(--muted)}
.qcard2 .gate{
  display:inline-block;font-size:11px;color:var(--teal);border:1px solid var(--teal2);
  border-radius:999px;padding:2px 9px;margin-bottom:8px;
}

/* ══════════ 语文 · 池塘故事线 ══════════ */
.stagebox svg g[class]{transform-box:fill-box}
.stagebox svg .water{fill:url(#pond)}
.stagebox svg .pad{fill:#8CBF7A;opacity:.85}
.stagebox svg .ripple{fill:none;stroke:#A9CDD6;stroke-width:2.4}
.stagebox svg .tad2{fill:#5E7A4A}
.stagebox svg .tad2t{fill:#6C8A55}
.stagebox svg .carp{fill:#E8A33D}
.stagebox svg .carpf{fill:#F3C77A}
.stagebox svg .shell{fill:#7E9A6B}
.stagebox svg .shell2{fill:#93AE7E}
.stagebox svg .shellEyes{fill:#7E9A6B}
.stagebox svg .frogb{fill:#4E8C3A}
.stagebox svg .mouth{fill:none;stroke:#2F5A22;stroke-width:2.4;stroke-linecap:round}
.stagebox svg .cond{fill:#fff;stroke:#DCD4C8;stroke-width:2}
.stagebox svg .cond.on{stroke:var(--teal);fill:rgba(46,158,143,.08)}
.stagebox svg .cond.no{stroke:#D9B3AE;fill:rgba(192,57,43,.06)}
.stagebox svg .cond.fade{opacity:.2}
.stagebox svg .ctag{font-size:15px;fill:var(--ink);font-weight:600}
.stagebox svg .ctag.big{font-size:22px}
.stagebox svg .mark{font-size:19px;fill:var(--teal);font-weight:700}
.stagebox svg .markx{font-size:19px;fill:var(--brand);font-weight:700}
.stagebox svg .bubble{fill:#fff;stroke:#DCD4C8;stroke-width:2}
.stagebox svg .quotebox{fill:rgba(46,158,143,.07);stroke:var(--teal);stroke-width:2}
.stagebox svg .qt{font-size:17px;fill:var(--ink);font-family:var(--kai)}
.stagebox svg .cardL{fill:#fff;stroke:#DCD4C8;stroke-width:2}
.stagebox svg .cardL.on{stroke:var(--teal);fill:rgba(46,158,143,.08)}
.stagebox svg .hotbox{stroke:var(--teal);stroke-width:2.5}
.stagebox svg .sayT{font-size:17px;fill:var(--teal);font-family:var(--kai);font-weight:600}
.stagebox svg .partBox{fill:rgba(201,162,39,.16);stroke:var(--gold);stroke-width:2.4;stroke-dasharray:7 5}
.stagebox svg .arrowA{stroke:var(--teal);stroke-width:3;stroke-linecap:round;stroke-dasharray:0}
.stagebox svg .rot180{transform:rotate(180deg)}
.stagebox svg .sun{fill:#F2C14E}
.stagebox svg .ray{stroke:#F2C14E;stroke-width:4;stroke-linecap:round}
.stagebox svg .fade2{opacity:.35}

/* ══════════ 数学 · 气球分类 ══════════ */
.stagebox svg .bal{stroke:rgba(0,0,0,.10);stroke-width:1.5}
.stagebox svg .str{fill:none;stroke:#C9B9A6;stroke-width:1.6}
.stagebox svg .knot{fill:none;stroke-width:3;stroke-linejoin:round}
.stagebox svg .zone{fill:rgba(46,158,143,.06);stroke:var(--teal);stroke-width:2.4;stroke-dasharray:8 7}
.stagebox svg .zone2{fill:rgba(201,162,39,.07);stroke:var(--gold);stroke-width:2.4;stroke-dasharray:8 7}
.stagebox svg .zone.hotzone{stroke-width:3.4;stroke-dasharray:none;fill:rgba(46,158,143,.1)}
.stagebox svg .desk{stroke:#DCD4C8;stroke-width:3;stroke-linecap:round}
.stagebox svg .ring{fill:none;stroke:var(--teal);stroke-width:3;stroke-dasharray:9 8}
.stagebox svg .pull{fill:none;stroke:var(--brand);stroke-width:2.6;stroke-dasharray:6 5}
/* 「数乱了」用闪烁表示 —— ⚠️ 不能用 transform 动画：气球的位置就是 transform，
   动画会把它顶回原点（这是 SVG 里最常踩的坑）。*/
@keyframes flick{0%,100%{opacity:1}50%{opacity:.45}}
.stagebox svg .wob{animation:flick .42s ease-in-out 4}

/* ───────── 窄屏 ───────── */
@media (max-width:1080px){
  .layout{grid-template-columns:1fr;overflow-y:auto}
  .side{overflow:visible}
  .classroom{grid-template-rows:minmax(380px,1fr) 120px auto}
}
@media (max-width:640px){
  .topbar{gap:10px;padding:0 12px}
  .brand span:last-child{display:none}
  .layout{padding:10px;gap:10px}
  .talk{flex:0 0 118px}
  .composer-foot .switch,.mic-state{display:none}
}

/* ═══════════════ 真实成片播放（present 拍播视频片段）═══════════════ */
.videobox{
  position:relative;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:#1A1714;border-radius:var(--radius);overflow:hidden;
}
.lessonvideo{width:100%;height:100%;object-fit:contain;background:#1A1714;display:block}
.vload{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  color:#E8E0D6;font-size:14px;padding:10px 18px;border-radius:12px;
  background:rgba(0,0,0,.45);cursor:pointer;max-width:80%;text-align:center;
}

/* ═══════════════ 闸门留白（给时间想，不是倒计时逼答）═══════════════ */
.waitbar{
  height:6px;border-radius:99px;background:var(--line);
  margin:14px 0 6px;overflow:hidden;
}
.waitbar i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--teal2),var(--teal));
  transition:width .12s linear;
}
.waittip{font-size:12.5px;color:var(--muted);text-align:center}
.qhint.dim{color:var(--ink2);font-size:12.5px}