/* ============================================================
   兰兰 · AI 助学小老师 —— 设计系统 v2（Web Design Engineer 规范）
   ------------------------------------------------------------
   Design Read（五拨杆）：
   受众=障碍儿童+家长老师 → 大字号/高对比/≥44px触控/低刺激动效
   变化性=低（稳定可预期）｜动效=轻（环境律动+庆祝爆发）｜密度=低
   资产=手绘SVG（兰兰+图标）｜完成度=高
   模式=Redesign · Preserve：全部选择器/ID/动画契约保留
   ------------------------------------------------------------
   色彩：oklch 等亮度体系（同 L 值视觉同亮）
   主色 coral 珊瑚 oklch(.72 .13 55)｜辅色 sage oklch(.66 .09 140)
   点缀 lav 鸢尾紫 oklch(.74 .06 300)｜强调深 accent oklch(.53 .11 50)
   字体：标题 ZCOOL KuaiLe（童趣手写）· 正文 PingFang/MiSans
   圆角：16/24/32 全圆角体系｜动效：--t1 快 / --t2 中 / --t3 慢
   反套路：无紫粉渐变 / 无emoji控件图标 / 无左边框强调卡 / 无 Inter
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root{color-scheme:light;

  /* 暖调基础（oklch） */
  --ground:oklch(95.5% .035 85);   --ground-2:oklch(93% .05 80);   --ground-3:oklch(97.5% .02 90);
  --surface:oklch(98.5% .008 95);  --surface-2:oklch(96% .025 85); --surface-3:oklch(93.5% .04 80);
  --ink:oklch(30% .045 235);       --ink-soft:oklch(47% .04 240);  --ink-faint:oklch(66% .025 75);
  --ink-warm:oklch(52% .075 55);

  /* 主色珊瑚 / 辅色 sage / 品牌鸢尾紫 / 蜜金 */
  --coral:oklch(72% .13 55);       --coral-deep:oklch(66% .145 45);
  --coral-soft:oklch(89% .05 60);  --coral-glow:oklch(80% .11 60 / .22);
  --on-coral:oklch(98% .01 80);
  --sage:oklch(66% .09 140);       --sage-deep:oklch(58% .09 142);  --sage-soft:oklch(91% .045 135);
  --lav:oklch(74% .06 300);        --lav-deep:oklch(61% .09 295);   --lav-soft:oklch(93% .03 300);
  --gold:oklch(86% .10 78);        --gold-deep:oklch(75% .12 72);
  --accent-deep:oklch(53% .11 50);
  --line:oklch(90% .035 85);
  --ok:oklch(60% .10 165);  --ok-soft:oklch(94% .045 165);
  --warn:oklch(75% .12 70); --warn-soft:oklch(95% .05 80);
  --danger:oklch(62% .14 35); --danger-soft:oklch(90% .05 35);

  /* 表面（可主题化） */
  --surface-panel:var(--surface);
  --surface-me-a:oklch(96.5% .03 75); --surface-me-b:oklch(93.5% .045 70);
  --warm-a:oklch(97% .025 85); --warm-b:oklch(93.5% .045 80); --warm-line:oklch(87% .07 70);
  --story-a:oklch(97.5% .02 90); --story-line:oklch(87% .075 78);

  /* 间距 */
  --sp1:8px; --sp2:16px; --sp3:24px; --sp4:40px; --sp5:64px; --sp6:96px;
  /* 圆角 */
  --radius-sm:16px; --radius:24px; --radius-lg:32px;
  /* 阴影（暖，三层级） */
  --shadow-sm:0 2px 6px oklch(30% .05 60 / .07), 0 6px 16px oklch(30% .05 60 / .06);
  --shadow:0 6px 18px var(--coral-glow), 0 16px 36px oklch(55% .1 55 / .12);
  --shadow-lg:0 12px 28px oklch(40% .08 55 / .16), 0 28px 60px oklch(40% .08 55 / .18);
  /* 焦点 / 动效 */
  --focus-ring:0 0 0 3px oklch(72% .13 55 / .4);
  --t1:.15s; --t2:.25s; --t3:.45s;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  /* 字体 */
  --font-display:"ZCOOL KuaiLe","PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"PingFang SC","MiSans","Microsoft YaHei",system-ui,sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
html,body{margin:0; height:100%}
body{
  font-family:var(--font-body);
  font-size:16px; line-height:1.6;
  color:var(--ink);
  background:
    radial-gradient(1000px 520px at 12% -8%, var(--ground-3) 0%, transparent 60%),
    radial-gradient(900px 460px at 112% 8%, var(--sage-soft) 0%, transparent 55%),
    linear-gradient(180deg, var(--ground) 0%, var(--ground-2) 100%);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .5s var(--ease), color .5s var(--ease);
}
button, input, select, textarea{font-family:inherit}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
  -webkit-box-shadow:0 0 0 60px var(--surface) inset; -webkit-text-fill-color:var(--ink); transition:background-color 99999s}
button{cursor:pointer; border:none; background:none; color:inherit}
input, select, textarea{font-size:16px; color:var(--ink); background:var(--surface)}
::selection{background:var(--coral-soft); color:var(--accent-deep)}

/* 键盘可达性：焦点环 */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .chip-btn:focus-visible, .mode-btn:focus-visible,
.quiz-opt:focus-visible, .lesson-card:focus-visible, .hw-subj:focus-visible{
  outline:none; box-shadow:var(--focus-ring);
}

/* 图标 */
.ico{width:1.2em; height:1.2em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none}
.btn .ico{vertical-align:-.14em; margin-right:.35em}
.ico-lg{width:46px; height:46px; fill:none; stroke:var(--coral-deep); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

.app{height:100vh; display:flex; flex-direction:column; max-width:1420px; margin:0 auto; padding:14px 18px 16px}

/* 顶部 */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 6px 14px}
.brand{display:flex; align-items:center; gap:12px}
.brand-logo{display:grid; place-items:center; width:46px; height:46px; filter:drop-shadow(0 3px 6px oklch(66% .145 45 / .3))}
.brand-logo svg{width:100%; height:100%}
.brand h1{margin:0; font-family:var(--font-display); font-weight:600; font-size:clamp(19px,2.3vw,24px); letter-spacing:.3px; line-height:1.2; color:var(--ink)}
.brand-sub{margin:3px 0 0; font-size:13px; color:var(--ink-soft)}
.top-actions{display:flex; gap:8px; align-items:center}

/* 按钮 */
.btn{border-radius:999px; padding:10px 18px; font-size:15px; font-weight:700; transition:transform var(--t2) var(--ease-out), box-shadow var(--t2) var(--ease-out), background var(--t2) var(--ease), border-color var(--t2) var(--ease), color var(--t2) var(--ease); border:2px solid transparent}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.96)}
.btn-ghost{background:var(--surface); border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{border-color:var(--coral); background:var(--surface-2); color:var(--accent-deep)}
.btn-primary{background:var(--coral); color:var(--on-coral); box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--coral-deep); box-shadow:var(--shadow)}
.btn-primary .ico{color:var(--on-coral)}
.btn-soft{background:var(--coral-soft); color:var(--accent-deep)}
.btn-danger{background:var(--surface); color:var(--danger); border-color:var(--danger-soft)}
.btn-danger:hover{background:var(--danger-soft)}
.btn-big{padding:14px 30px; font-size:19px; font-family:var(--font-display); font-weight:600; letter-spacing:.5px}
.btn-mic{border-radius:50%; width:56px; height:56px; font-size:20px; background:var(--surface-2); border:2px solid var(--coral-soft); flex:none; display:grid; place-items:center; color:var(--coral-deep); transition:transform var(--t2) var(--ease-out), background var(--t2), color var(--t2), border-color var(--t2)}
.btn-mic:hover{transform:translateY(-2px) scale(1.03)}
.btn-mic.listening{background:var(--coral); color:#fff; border-color:#fff; animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--coral-glow)}50%{box-shadow:0 0 0 16px transparent}}

/* 主布局 */
.main{flex:1; display:grid; grid-template-columns:minmax(380px,.92fr) minmax(440px,1.18fr); gap:18px; min-height:0}
.panel{display:flex; flex-direction:column; min-height:0; gap:12px; background:var(--surface-panel); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; border:1px solid var(--line)}

/* ---- 舞台（兰兰） ---- */
.stage-wrap{min-height:0}
.stage{position:relative; height:100%; border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(180deg, var(--ground-3) 0%, oklch(94% .04 75) 46%, oklch(90% .06 70) 100%);
  border:1px solid var(--line); box-shadow:var(--shadow)}
/* 空中柔光 + 漂浮暖团 */
.sky{position:absolute; inset:0; z-index:1; overflow:hidden}
.sky .sun{position:absolute; top:6%; right:8%; width:88px; height:88px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, oklch(96% .05 90), oklch(89% .09 80) 60%, var(--gold) 100%);
  box-shadow:0 0 60px 26px oklch(86% .1 78 / .4); opacity:.9}
.sky .cloud{position:absolute; background:oklch(99% .005 95 / .55); border-radius:999px;
  filter:blur(2px); animation:drift 30s linear infinite}
.sky .cloud.c1{top:16%; left:-14%; width:130px; height:34px}
.sky .cloud.c2{top:32%; left:-20%; width:92px; height:26px; opacity:.7; animation-duration:42s; animation-delay:-16s}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(125vw)}}

.ground{position:absolute; left:0; right:0; bottom:0; height:126px; z-index:2;
  background:linear-gradient(180deg, transparent 0%, oklch(78% .08 135 / .5) 42%, oklch(66% .09 140 / .85) 100%)}
.grass-flower{position:absolute; bottom:6px; left:6%; width:34px; height:34px; opacity:.9; filter:drop-shadow(0 3px 4px oklch(40% .06 130 / .18))}
.grass-flower.f2{left:auto; right:10%; width:27px; height:27px}
.grass-flower.f3{left:auto; right:40%; bottom:0; width:20px; height:20px}
.stage:after{content:""; position:absolute; inset:0; z-index:7; pointer-events:none;
  background:radial-gradient(120% 70% at 50% 32%, transparent 64%, oklch(25% .05 60 / .1) 100%)}
.avatar-stage{position:absolute; left:50%; bottom:46px; transform:translateX(-50%); width:min(62%,340px); height:66%; min-height:240px; z-index:3}
.avatar-stage svg{width:100%; height:100%; overflow:visible}

/* 呼吸泡泡 */
.say-bubble{position:absolute; top:4%; left:50%; transform:translateX(-50%); width:min(86%,440px); z-index:5;
  background:var(--surface); border:3px solid var(--coral-soft); border-radius:var(--radius); padding:13px 20px;
  font-size:clamp(20px,2.2vw,25px); line-height:1.55; font-weight:600; color:var(--ink);
  box-shadow:var(--shadow); opacity:0; transition:opacity var(--t2), transform var(--t2); text-align:center; word-break:break-word;
  font-family:var(--font-display)}
.say-bubble.show{opacity:1; transform:translateX(-50%) translateY(4px)}
.say-bubble:after{content:""; position:absolute; left:50%; bottom:-15px; border:9px solid transparent; border-top-color:var(--surface); transform:translateX(-50%)}
.stage-footer{position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:10px; z-index:6}
.chip{background:oklch(98.5% .008 95 / .94); border:1px solid var(--line); border-radius:999px; padding:5px 14px; font-size:13px; color:var(--ink-soft); backdrop-filter:blur(4px)}
.chip-ok{color:var(--ok); border-color:oklch(60% .10 165 / .35)}
.hidden{display:none !important}

/* ============ 兰兰 SVG 状态 ============ */
#mlh-svg .mlh-body{animation:mlh-bob 4.4s ease-in-out infinite}
@keyframes mlh-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
#mlh-svg[data-emotion="think"] .mlh-body{animation-duration:6s}
#mlh-svg.celebrate .mlh-body{animation:mlh-hop .7s ease-in-out 3}
@keyframes mlh-hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-18px) rotate(-2deg)}}
.mlh-eyes{transform-box:fill-box; transform-origin:center; animation:mlh-blink 5.4s infinite}
#mlh-svg[data-emotion="think"] .mlh-eyes{animation:none; transform:scaleY(1)}
@keyframes mlh-blink{0%,91%,100%{transform:scaleY(1)}94%{transform:scaleY(.09)}97%{transform:scaleY(1)}}
.mlh-pupil{transition:transform .3s}
#mlh-svg[data-emotion="think"] .mlh-pupil{transform:translateY(-5px)}
.mlh-mouth{opacity:0}
#mlh-svg[data-emotion="happy"] #mlh-mouth-smile,
#mlh-svg[data-emotion="listen"] #mlh-mouth-smile,
#mlh-svg[data-emotion="cheer"] #mlh-mouth-cheer{opacity:1}
#mlh-svg[data-emotion="think"] #mlh-mouth-think{opacity:1}
#mlh-svg.talking .mlh-mouth{opacity:0}
#mlh-svg.talking #mlh-mouth-open{opacity:1; animation:mlh-talk .35s ease-in-out infinite alternate}
@keyframes mlh-talk{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
#mlh-mouth-open,#mlh-mouth-cheer{transform-box:fill-box; transform-origin:center}
#mlh-svg[data-emotion="cheer"] .mlh-cheek{fill:oklch(70% .16 20); opacity:.85}
#mlh-armR,#mlh-armL{transform-box:fill-box; transform-origin:top left}
#mlh-svg.wave #mlh-armR{animation:mlh-wave .9s ease-in-out infinite alternate}
@keyframes mlh-wave{from{transform:rotate(0deg)}to{transform:rotate(-26deg)}}
.mlh-spark{opacity:0}
#mlh-svg.celebrate .mlh-spark{animation:mlh-spark 1.5s ease-out forwards}
@keyframes mlh-spark{0%{opacity:0; transform:scale(.2)}25%{opacity:1}100%{opacity:0; transform:scale(1.4) translateY(-14px)}}

/* ============ 右栏 ============ */
.modebar{display:grid; grid-template-columns:repeat(5,1fr); gap:8px}
.mode-btn{background:var(--surface-2); border:2px solid transparent; border-radius:18px; padding:10px 4px; min-height:64px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:15px; color:var(--ink-soft); transition:transform var(--t2) var(--ease-out), background var(--t2), color var(--t2), border-color var(--t2), box-shadow var(--t2)}
.mode-btn .ico{width:22px; height:22px}
.mode-btn span{font-size:13px; font-weight:700; letter-spacing:.2px}
.mode-btn:hover{background:var(--surface-3); color:var(--accent-deep); transform:translateY(-2px)}
.mode-btn.active{background:var(--coral); color:var(--on-coral); border-color:var(--coral-deep); box-shadow:var(--shadow-sm), inset 0 -3px 0 oklch(66% .145 45 / .55)}
.mode-btn.active span{color:var(--on-coral)}
.mode-btn.active .ico{color:oklch(94% .04 70)}

/* 模式提示（原占位空壳 → 真实功能） */
.mode-hint{font-size:14px; color:var(--ink-warm); background:var(--surface-2); border:1px dashed var(--warm-line);
  border-radius:12px; padding:7px 14px; min-height:20px; display:flex; align-items:center; gap:8px; transition:opacity var(--t2)}
.mode-hint:empty{opacity:0; border-color:transparent; background:transparent}
.mode-hint .ico{width:16px; height:16px; color:var(--coral-deep)}

.content{flex:1; min-height:0; position:relative; display:flex; flex-direction:column}
.chat-area{flex:1; min-height:0; display:flex; flex-direction:column}
.chat-log{flex:1; overflow-y:auto; padding:6px 4px 10px; display:flex; flex-direction:column; gap:12px; scroll-behavior:smooth}

/* 聊天气泡 */
.msg{display:flex; gap:9px; max-width:94%; align-items:flex-end; animation:msg-in .3s var(--ease-out)}
@keyframes msg-in{from{opacity:0; transform:translateY(9px)}to{opacity:1; transform:translateY(0)}}
.msg .ava{flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--coral-soft)}
.msg .ava:before{content:""; width:13px; height:13px; border-radius:50%; background:var(--coral-deep);
  box-shadow:0 -8px 0 -1px var(--coral), 0 8px 0 -1px var(--coral), -8px 0 0 -1px var(--coral), 8px 0 0 -1px var(--coral),
    -6px -6px 0 -1px var(--coral), 6px 6px 0 -1px var(--coral), -7px 5px 0 -1px var(--coral), 7px -5px 0 -1px var(--coral)}
.msg .ava.me{background:var(--sage-soft)}
.msg .ava.me:before{background:var(--sage-deep);
  box-shadow:0 -8px 0 -1px var(--sage), 0 8px 0 -1px var(--sage), -8px 0 0 -1px var(--sage), 8px 0 0 -1px var(--sage),
    -6px -6px 0 -1px var(--sage), 6px 6px 0 -1px var(--sage), -7px 5px 0 -1px var(--sage), 7px -5px 0 -1px var(--sage)}
.msg .bubble{background:var(--surface); border:1.5px solid var(--line); border-radius:18px; padding:11px 16px;
  font-size:clamp(18px,1.9vw,21px); line-height:1.65; word-break:break-word; white-space:pre-wrap; text-wrap:pretty; box-shadow:var(--shadow-sm)}
.msg .bubble .think-dots{display:inline-flex; gap:5px; padding:6px 2px}
.msg .bubble .think-dots i{width:9px; height:9px; border-radius:50%; background:var(--coral-soft); animation:tdot 1s infinite}
.msg .bubble .think-dots i:nth-child(2){animation-delay:.18s}
.msg .bubble .think-dots i:nth-child(3){animation-delay:.36s}
@keyframes tdot{0%,100%{opacity:.3}50%{opacity:1}}
.msg .tools{display:flex; gap:6px; margin-top:5px}
.msg .tools button{border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:2px 10px; font-size:13px; color:var(--ink-soft); transition:background var(--t1)}
.msg .tools button:hover{background:var(--surface-2); color:var(--accent-deep)}
.msg.from-me{flex-direction:row-reverse; align-self:flex-end}
.msg.from-me .bubble{background:linear-gradient(135deg,var(--surface-me-a),var(--surface-me-b)); border-color:var(--warm-line)}
.msg .sub{font-size:12px; color:var(--ink-faint); margin-top:3px; display:block}

/* 快速词 */
.composer{display:flex; flex-direction:column; gap:8px; border-top:1px dashed var(--line); padding-top:10px}
.chips-row{display:flex; gap:7px; overflow-x:auto; padding-bottom:2px}
.chip-btn{flex:none; display:inline-flex; align-items:center; gap:6px; background:var(--surface-2); border:1.5px solid var(--line); border-radius:999px; padding:8px 15px; min-height:44px; font-size:15px; font-weight:600; color:var(--ink); transition:transform var(--t2) var(--ease-out), background var(--t2), border-color var(--t2), color var(--t2)}
.chip-btn .ico{width:17px; height:17px; color:var(--coral-deep)}
.chip-btn:hover{background:var(--surface-3); border-color:var(--coral); transform:translateY(-1px)}
.input-row{display:flex; gap:8px}
.input-row input{flex:1; border:2px solid var(--line); border-radius:999px; padding:11px 18px; min-height:48px; font-size:19px; outline:none; background:var(--surface); transition:border-color var(--t2), box-shadow var(--t2)}
.input-row input:focus{border-color:var(--coral); box-shadow:0 0 0 4px var(--coral-glow)}
.mic-status{font-size:14px; color:var(--accent-deep); text-align:center; background:var(--coral-soft); border-radius:12px; padding:6px}

/* 学习卡片 */
.study-area{position:absolute; inset:0; overflow-y:auto; padding:8px 2px; display:flex; flex-direction:column; gap:12px; background:var(--surface)}
.study-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.study-head h2{margin:0; font-family:var(--font-display); font-size:24px; font-weight:600}
.study-head h2 .ico-lg{width:30px; height:30px; vertical-align:-5px; margin-right:8px}
.study-head p{margin:0}
.lesson-picker{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px}
.lesson-card{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; align-items:center; column-gap:14px; text-align:left;
  background:linear-gradient(160deg,var(--surface-2),var(--surface-3)); border:2px solid var(--line); border-radius:var(--radius-sm); padding:16px; font-size:17px; line-height:1.5; transition:transform var(--t2) var(--ease-out), border-color var(--t2), box-shadow var(--t2)}
.lesson-card .ico-lg{grid-row:span 2; width:52px; height:52px; color:var(--coral-deep)}
.lesson-card b{font-size:20px; font-family:var(--font-display); font-weight:600; color:var(--ink)}
.lesson-card div{color:var(--ink-soft); font-size:14px}
.lesson-card:hover{border-color:var(--coral); transform:translateY(-3px); box-shadow:var(--shadow-sm)}
.quiz-card{background:var(--surface); border:3px solid var(--coral-soft); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm)}
.quiz-card>div:first-child{color:var(--ink-soft)}
.quiz-ask{font-size:30px; margin:6px 0 14px; line-height:1.5; text-align:center; text-wrap:pretty; font-family:var(--font-display)}
.quiz-options{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px}
.quiz-opt{font-size:30px; background:var(--surface-2); border:3px solid var(--line); border-radius:var(--radius-sm); padding:18px 10px; transition:transform var(--t1) var(--ease-out), border-color var(--t2), background var(--t2)}
.quiz-opt:hover{border-color:var(--coral); background:var(--surface); transform:translateY(-2px)}
.quiz-opt:disabled{cursor:default}
.quiz-opt.correct{border-color:var(--ok); background:var(--ok-soft); animation:pop .35s var(--spring)}
.quiz-opt.wrong{border-color:var(--warn); background:var(--warn-soft)}
@keyframes pop{40%{transform:scale(1.08)}}
.quiz-feedback{font-size:22px; min-height:36px; margin-top:12px; text-align:center; font-weight:700; text-wrap:pretty}
.quiz-next{display:flex; justify-content:center; margin-top:10px}
.story-card{background:var(--story-a); border:3px solid var(--story-line); border-radius:var(--radius); padding:20px; font-size:22px; line-height:1.9}
.story-card .story-title{font-size:26px; margin:0 0 10px; color:var(--accent-deep); font-family:var(--font-display); font-weight:600}
.btn-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

/* 放松 */
.relax-area{position:absolute; inset:0; display:grid; place-items:center; background:var(--surface)}
.breath-card{text-align:center; padding:16px}
.breath-ring{width:min(46vh,280px); height:min(46vh,280px); margin:0 auto; border-radius:50%;
  border:10px solid var(--coral-soft); display:grid; place-items:center; transition:transform .3s}
.breath-ring.anim .breath-ball{animation:ball-in 4.5s ease-in-out infinite alternate}
.breath-ring.in .breath-ball{animation:ball-in 4s ease-in forwards}
.breath-ring.out .breath-ball{animation:ball-out 6s ease-out forwards}
.breath-ring.cycling .breath-ball{animation:breath-cycle 10s ease-in-out infinite}
@keyframes breath-cycle{
  0%,100%{transform:scale(.55); background:var(--coral-soft)}
  38%{transform:scale(1.15); background:var(--sage)}
  62%{transform:scale(1.15); background:var(--sage)}
  75%{transform:scale(.6)}
}
.breath-ball{width:120px; height:120px; border-radius:50%;
  background:linear-gradient(135deg, oklch(84% .09 65), var(--coral));
  box-shadow:0 0 40px var(--coral-glow); transform:scale(.55)}
.breath-text{font-size:26px; margin:22px 0; min-height:40px; font-weight:700; color:var(--accent-deep); text-wrap:pretty; font-family:var(--font-display)}

/* 弹窗 */
.modal{position:fixed; inset:0; background:oklch(30% .045 235 / .45); display:grid; place-items:center; z-index:50; padding:14px; backdrop-filter:blur(3px)}
.modal-box{background:var(--surface); border-radius:var(--radius); width:min(760px,96vw); max-height:92vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); border:1px solid var(--line)}
.modal-box.small{width:min(560px,96vw)}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--line)}
.modal-head h2{margin:0; font-size:20px; font-family:var(--font-display); font-weight:600}
.modal-body{padding:14px 20px; overflow-y:auto; display:flex; flex-direction:column; gap:12px}
.modal-foot{display:flex; justify-content:space-between; gap:10px; padding:12px 20px; border-top:1px solid var(--line)}
.modal-tabs{display:flex; gap:8px; flex-wrap:wrap}
.tab-btn{border:1.5px solid var(--line); border-radius:999px; padding:6px 14px; font-size:15px; font-weight:600; color:var(--ink-soft); background:var(--surface); transition:background var(--t2), color var(--t2), border-color var(--t2)}
.tab-btn:hover{border-color:var(--coral); color:var(--accent-deep)}
.tab-btn.active{background:var(--accent-deep); color:var(--on-coral); border-color:var(--accent-deep)}
.tab-pane{display:none; flex-direction:column; gap:12px}
.tab-pane.active{display:flex}
.tab-pane label{display:flex; flex-direction:column; gap:5px; font-size:15px; font-weight:600; color:var(--ink-soft)}
.tab-pane input[type=text],.tab-pane input[type=password],.tab-pane select,.tab-pane textarea{
  border:1.5px solid var(--line); border-radius:12px; padding:9px 12px; background:var(--surface); outline:none; transition:border-color var(--t2), box-shadow var(--t2)}
.tab-pane textarea{resize:vertical}
.tab-pane input:focus,.tab-pane select:focus,.tab-pane textarea:focus{border-color:var(--coral); box-shadow:0 0 0 3px var(--coral-glow)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.checks{display:flex; flex-wrap:wrap; gap:8px}
.checks label{flex-direction:row; align-items:center; font-weight:500; background:var(--surface-2); border-radius:999px; padding:5px 12px; cursor:pointer; transition:background var(--t1)}
.checks label:hover{background:var(--surface-3)}
.checks input{width:17px; height:17px; accent-color:var(--accent-deep)}
fieldset{border:1.5px dashed var(--line); border-radius:var(--radius-sm); margin:0; padding:8px 12px}
legend{font-size:14px; font-weight:700; color:var(--accent-deep); padding:0 6px}
output{font-weight:700; color:var(--accent-deep)}
input[type=range]{width:100%; accent-color:var(--accent-deep)}
.switch-line{flex-direction:row !important; align-items:center; gap:9px !important; font-weight:600 !important}
.switch-line input{width:20px; height:20px; accent-color:var(--accent-deep)}
.hint{font-size:14px; color:var(--ink-soft); background:var(--surface-2); border-radius:14px; padding:10px 12px; margin:0; line-height:1.7}
.help-body p{font-size:16px; line-height:1.8; margin:0}
.ai-test-result{font-size:14px}
.ai-test-result.ok{color:var(--ok)} .ai-test-result.bad{color:var(--danger)}
.brain-import{border:1.5px dashed var(--lav); border-radius:var(--radius-sm); padding:10px 12px; display:flex; flex-direction:column; gap:8px; background:var(--lav-soft)}
.brain-import summary{cursor:pointer; font-weight:700; font-size:15px; color:var(--lav-deep)}
.brain-import .row{display:flex; gap:8px; align-items:flex-start}
.brain-import textarea{flex:1}

/* 滚动条 */
::-webkit-scrollbar{width:9px; height:9px}
::-webkit-scrollbar-thumb{background:oklch(85% .06 70); border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:oklch(80% .08 65)}
::-webkit-scrollbar-track{background:transparent}

/* ============ 辅导作业 ============ */
.hw-area{position:absolute; inset:0; overflow-y:auto; padding:8px 2px; display:flex; flex-direction:column; gap:12px; background:var(--surface)}
.hw-subjects{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:12px}
.hw-subj .ic{display:contents}
.hw-subj{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; align-items:center; column-gap:13px; text-align:left;
  background:linear-gradient(160deg,var(--warm-a),var(--warm-b)); border:2px solid var(--warm-line); border-radius:var(--radius-sm); padding:15px; line-height:1.5; transition:transform var(--t2) var(--ease-out), border-color var(--t2), box-shadow var(--t2)}
.hw-subj .ico-lg{grid-row:span 2; width:46px; height:46px}
.hw-subj b{font-size:19px; display:block; font-family:var(--font-display); font-weight:600; color:var(--ink)}
.hw-subj div{color:var(--ink-warm); font-size:14px}
.hw-subj:hover{border-color:oklch(72% .13 55); transform:translateY(-3px); box-shadow:var(--shadow-sm)}
.hw-card{background:var(--story-a); border:3px solid var(--warm-line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm)}
.hw-ask{font-size:28px; line-height:1.6; text-align:center; margin:4px 0 12px; text-wrap:pretty; font-family:var(--font-display)}
.hw-steps{display:flex; flex-direction:column; gap:10px; margin:10px 0}
.hw-step{position:relative; background:var(--surface-2); border:1.5px solid var(--line); border-radius:14px; padding:11px 15px 11px 46px; font-size:21px; line-height:1.6; color:var(--ink); animation:pop .3s var(--ease-out); text-wrap:pretty}
.hw-step:before{content:""; position:absolute; left:16px; top:50%; translate:0 -50%; width:14px; height:14px; border-radius:50%; background:var(--coral); box-shadow:inset 0 0 0 3.5px var(--surface)}
.hw-step.answer{background:var(--ok-soft); border-color:oklch(60% .10 165 / .4)}
.hw-step.answer:before{background:var(--ok)}
.hw-answer{white-space:pre-line; font-size:22px; line-height:1.9; color:var(--ink); background:var(--surface-2); border-radius:14px; padding:12px 16px; text-align:left; text-wrap:pretty}
.hw-tools{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:14px}
.hw-empty{text-align:center; color:var(--ink-soft); padding:26px 0; font-size:18px}

/* ============ 兰兰可爱细节 ============ */
#mlh-flower{transform-box:fill-box; transform-origin:center; animation:mlh-flower-sw 5s ease-in-out infinite}
@keyframes mlh-flower-sw{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
#mlh-svg.celebrate #mlh-flower{animation:mlh-flower-spin .55s ease-in-out 2}
@keyframes mlh-flower-spin{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(16deg) scale(1.2)}}
.mlh-hairlock{transform-box:fill-box; transform-origin:50% 10%; animation:mlh-sway 4.8s ease-in-out infinite}
.mlh-hairlock.hr{animation-delay:-2.4s}
@keyframes mlh-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
#mlh-svg[data-emotion="cheer"] .mlh-cheek{animation:mlh-cheek .4s ease-in-out 3}
@keyframes mlh-cheek{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
.mlh-star{opacity:0}
#mlh-svg.celebrate .mlh-star{animation:mlh-star 1.2s ease-out forwards}
@keyframes mlh-star{0%{opacity:0; transform:scale(.3) rotate(0)}30%{opacity:1}100%{opacity:0; transform:scale(1.6) rotate(70deg)}}
#mlh-svg[data-emotion="think"] .mlh-brow{transform:translateY(3px)}
.mlh-brow{transition:transform .3s}

/* ============ 夜灯 / 护眼（暖深青，oklch 同构） ============ */
body.night{
  color-scheme:dark;
  --surface-panel:var(--surface);
  --ground:oklch(28% .03 220); --ground-2:oklch(30% .032 220); --ground-3:oklch(34% .035 225);
  --surface:oklch(30% .035 225); --surface-2:oklch(35% .038 225); --surface-3:oklch(40% .04 225);
  --ink:oklch(93% .035 85); --ink-soft:oklch(78% .03 190); --ink-faint:oklch(60% .03 195);
  --ink-warm:oklch(80% .06 70);
  --coral:oklch(72% .13 55); --coral-deep:oklch(66% .145 45);
  --coral-soft:oklch(42% .05 220); --coral-glow:oklch(72% .13 55 / .2);
  --on-coral:oklch(98% .01 80);
  --sage:oklch(74% .09 135); --sage-deep:oklch(66% .09 140); --sage-soft:oklch(34% .04 200);
  --lav:oklch(74% .06 300); --lav-deep:oklch(80% .07 300); --lav-soft:oklch(34% .05 280);
  --gold:oklch(86% .10 78); --gold-deep:oklch(75% .12 72);
  --accent-deep:oklch(78% .10 65);
  --line:oklch(42% .04 220);
  --ok:oklch(72% .11 165);  --ok-soft:oklch(38% .05 190);
  --warn:oklch(80% .12 75); --warn-soft:oklch(40% .05 85);
  --danger:oklch(70% .14 30); --danger-soft:oklch(38% .07 25);
  --surface-me-a:oklch(36% .04 215); --surface-me-b:oklch(40% .042 212);
  --warm-a:oklch(36% .04 218); --warm-b:oklch(39% .042 215); --warm-line:oklch(46% .05 70);
  --story-a:oklch(31% .036 222); --story-line:oklch(46% .05 75);
  --shadow-sm:0 4px 12px oklch(10% .02 220 / .3);
  --shadow:0 14px 30px oklch(10% .02 220 / .38);
  --shadow-lg:0 24px 55px oklch(8% .02 220 / .5);
  --focus-ring:0 0 0 3px oklch(72% .13 55 / .38);
  background:
    radial-gradient(1000px 520px at 12% -8%, oklch(36% .045 225) 0%, transparent 60%),
    radial-gradient(900px 460px at 112% 8%, oklch(32% .04 200) 0%, transparent 55%),
    linear-gradient(180deg, var(--ground) 0%, var(--ground-2) 100%);
}
body.night .stage{background:linear-gradient(180deg, oklch(30% .035 225) 0%, oklch(34% .038 222) 46%, oklch(38% .04 218) 100%)}
body.night .sky .sun{background:radial-gradient(circle at 35% 35%, oklch(88% .08 85), oklch(72% .11 70) 60%, oklch(60% .1 65) 100%); box-shadow:0 0 50px 22px oklch(72% .11 70 / .3)}
body.night .sky .cloud{background:oklch(95% .01 95 / .08)}
body.night .ground{background:linear-gradient(180deg, transparent 0%, oklch(48% .06 150 / .4) 42%, oklch(42% .06 150 / .75) 100%)}
body.night .stage:after{background:radial-gradient(120% 70% at 50% 32%, transparent 62%, oklch(8% .02 220 / .38) 100%)}
body.night .say-bubble:after{border-top-color:var(--surface)}
body.night .chip{background:oklch(30% .035 225 / .94)}
body.night .msg .ava{background:var(--coral-soft)}
body.night .msg.from-me .bubble{background:linear-gradient(135deg,var(--surface-2),var(--surface-3)); border-color:var(--line)}
body.night .msg .tools button{background:var(--surface)}
body.night .mode-btn{background:var(--surface-2)}
body.night .mode-btn.active{--surface-2:var(--coral)}
body.night .chip-btn{background:var(--surface-2)}
body.night .input-row input{background:var(--surface-2)}
body.night .lesson-card{background:linear-gradient(160deg,var(--surface-2),var(--surface-3))}
body.night .breath-ring{border-color:var(--line)}
body.night .modal{background:oklch(18% .03 220 / .62)}
body.night .story-card,body.night .hw-card{background:var(--surface)}
body.night .hw-subj{background:linear-gradient(160deg,oklch(36% .04 218),oklch(39% .042 215))}
body.night .hw-step,body.night .hw-answer{background:var(--surface-2)}
body.night .tab-btn{background:var(--surface-2)}
body.night .tab-btn.active{background:var(--accent-deep); border-color:var(--accent-deep); color:oklch(25% .04 60)}
body.night .brain-import{border-color:var(--lav-deep)}
body.night ::-webkit-scrollbar-thumb{background:var(--surface-3)}

/* 主题切换按钮：复用 .btn .btn-ghost 组件（与帮助/设置完全一致），无需独立样式 */

/* 备案号 */
.beian{position:fixed; right:12px; bottom:4px; z-index:6; font-size:12px; color:var(--ink-faint); text-decoration:none; opacity:.7; letter-spacing:.3px; transition:opacity var(--t2)}
.beian:hover{color:var(--ink-soft); opacity:1}

/* 小屏适配 */
@media (max-width:960px){
  body{overflow:auto}
  .app{height:auto; min-height:100vh}
  .main{grid-template-columns:1fr}
  .stage-wrap{height:52vh; min-height:380px}
  .chat-log{max-height:48vh}
  /* 内容区在移动端没有固定高度可填，绝对定位的内容面板会塌缩不可见 → 给足高度 */
  .content{min-height:72vh}
  /* 顶栏窄屏放不下：品牌一行、按钮换到下一行右对齐，禁止按钮文字折行 */
  .topbar{flex-wrap:wrap; row-gap:8px}
  .brand-sub{display:none}
  .top-actions{margin-left:auto}
  .btn{white-space:nowrap}
  .brand h1{font-size:18px}
  .mode-btn{min-height:56px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}