/* ===========================================================================
   问盼答 · 界面
   ---------------------------------------------------------------------------
   设计方向：熊猫的黑白 + 一点印章朱
     · 纸白（冷中性）与真墨黑取自熊猫本身，不是"奶油底暖棕"那套通用 AI 配色
     · 朱红是**唯一动作色**，只用在"开始说话"这一件事上
     · 竹青做次要语义（聆听/连接），不参与装饰
     · 家长/老师侧偏向 AskPanda 品牌紫 #362E67，与主站一致
   结构上只用一种分隔手段（细线或留白），不堆卡片阴影。
   =========================================================================== */

:root {
  --paper:      #F4F5F7;   /* 纸白：冷中性，非奶油 */
  --paper-raise:#FFFFFF;
  --ink:        #1A1A1A;   /* 真墨黑 */
  --ink-soft:   #5C5F63;
  --ink-faint:  #96999E;
  --line:       #E2E4E8;
  --bamboo:     #3F6B4F;   /* 竹青：聆听/在线 */
  --seal:       #C8443A;   /* 印章朱：唯一动作色 */
  --seal-press: #A9362D;
  --brand:      #362E67;   /* AskPanda 品牌紫：家长/老师侧 */

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 26px;
  --r-pill: 999px;

  --shadow-seal: 0 6px 0 var(--seal-press);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden], .hidden { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, "PingFang SC", "Hiragino Sans GB",
               "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { font: inherit; color: inherit; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

/* ─────────────────────────── 视图容器 ─────────────────────────── */
.view { height: 100%; display: flex; flex-direction: column; }

/* ─────────────────────────── 入口 ─────────────────────────── */
.entry {
  margin: auto;
  width: min(420px, 100%);
  padding: 32px 24px;
  text-align: center;
}

.mark { position: relative; width: 92px; height: 92px; margin: 0 auto 20px; }
.mark-face {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--ink);
  box-shadow: inset 0 -6px 0 rgba(255,255,255,.06);
}
.mark-ear {
  position: absolute; top: -6px; width: 34px; height: 34px;
  background: var(--ink); border-radius: 50%;
}
.mark-ear.left { left: 2px; }
.mark-ear.right { right: 2px; }

h1 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .04em;
}
.lede { margin: 0 0 28px; color: var(--ink-soft); font-size: 15px; }

.entry-actions { text-align: left; }

.field-group { display: flex; flex-direction: column; gap: 8px; }
.field-group label { font-size: 13px; color: var(--ink-soft); }
.field-group input,
.field-group textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-raise);
  font-size: 16px;
}
.field-group input:focus,
.field-group textarea:focus { border-color: var(--ink); }
.field-group textarea { resize: vertical; }

.btn {
  border: 0;
  border-radius: var(--r-md);
  padding: 15px 20px;
  font-size: 16px;
  font-weight: 600;
  width: 100%;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--line);
  color: var(--ink);
}

.divider {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0;
  color: var(--ink-faint); font-size: 12px;
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.hint { margin: 12px 0 0; font-size: 13px; color: var(--ink-faint); line-height: 1.6; }

/* ─────────────────────────── 顶栏 ─────────────────────────── */
.topbar {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.topbar-left { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }

.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-faint);
}
.dot.online { background: var(--bamboo); }
.dot.busy { background: var(--seal); }

.chip {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.icon-btn {
  background: none; border: 0; padding: 6px 8px;
  font-size: 13px; color: var(--ink-faint);
}

/* ─────────────────────────── 主体 ─────────────────────────── */
main { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.tab-panel {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow-y: auto;
  padding: 16px;
}

/* ─────────────────────────── 对话 ─────────────────────────── */
#tab-talk {
  background: linear-gradient(180deg, #FBFAFD 0%, #F4F1FA 100%);
}

.talk-stage {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
}

/* ── 熊猫 ──────────────────────────────────────────────
   状态用 data-state 表达：idle / listening / speaking / thinking。
   所有动作都服务于"它现在是活的"：呼吸、眨眼、竖耳、张嘴、思考。
   注意：class 不能再叫 buddy——.bubble.buddy 会命中它，把气泡撑成 168×168。 */
.panda {
  position: relative;
  width: 168px; height: 168px;
  flex: none;
  --mouth-h: 5px;
  --blush: 0;
  animation: breathe 3.8s ease-in-out infinite;
}
.panda .face {
  position: absolute; inset: 0;
  z-index: 2;
  background: radial-gradient(circle at 50% 36%, #FFFFFF 0%, #F8F5FC 70%, #EFEAF8 100%);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 12px 26px rgba(28, 26, 36, .12);
  transition: transform .22s ease;
  transform-origin: 50% 90%;
}
/* 耳朵内侧用暖紫，避免整只熊猫死黑一片 */
.panda .ear {
  position: absolute; top: -16px; width: 60px; height: 60px;
  background: var(--ink); border-radius: 50%;
  z-index: 1;                       /* 在脸后面：只露出头顶那一段弧 */
  transition: transform .22s ease;
  transform-origin: 70% 85%;
}
/* 内耳：一圈很淡的暖紫，避免整只耳朵糊成黑团 */
.panda .ear::after {
  content: ""; position: absolute; inset: 19px;
  border-radius: 50%;
  background: #6B5C93;
  opacity: .22;               /* 只做一点点暖影，不要变成"洞" */
}
.panda .ear.left { left: 4px; }
.panda .ear.right { right: 4px; transform-origin: 30% 85%; }

.panda .eye {
  position: absolute; z-index: 3; top: 52px;
  width: 42px; height: 50px;
  background: var(--ink); border-radius: 50%;
  display: grid; place-items: center;
  transition: transform .18s ease;
}
.panda .eye.left { left: 30px; transform: rotate(-12deg); }
.panda .eye.right { right: 30px; transform: rotate(12deg); }
.panda .eye i {
  width: 15px; height: 15px; border-radius: 50%; background: #fff;
  transition: width .18s ease, height .18s ease;
}
/* 眼睑：眨眼时压下来（比缩放眼球更像真的在眨眼） */
.panda .lid {
  position: absolute; z-index: 4; top: 50px;
  width: 46px; height: 0;
  background: #F8F5FC;
  border-radius: 50%;
  transition: height .1s ease;
}
.panda .lid.left { left: 28px; }
.panda .lid.right { right: 28px; }
.panda.blink .lid { height: 54px; }

/* 腮红：说话、被夸的时候浮出来 */
.panda .blush {
  position: absolute; z-index: 3; top: 106px;
  width: 26px; height: 15px;
  border-radius: 50%;
  background: #F49AA6;
  opacity: var(--blush);
  filter: blur(1.5px);
  transition: opacity .18s ease;
}
.panda .blush.left { left: 15px; }
.panda .blush.right { right: 15px; }

/* 嘴：靠 --mouth-h 随音量变化，闭着时是一条弧线，张开是嘴 */
.panda .mouth {
  position: absolute; z-index: 3; left: 50%; top: 116px;
  width: 44px; height: var(--mouth-h); margin-left: -22px;
  background: var(--ink);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  transition: height .08s linear;
}
.panda .nose {
  position: absolute; z-index: 3; left: 50%; top: 96px;
  width: 22px; height: 16px; margin-left: -11px;
  background: var(--ink); border-radius: 50%;
}

/* 思考：右上角气泡三点 */
.panda .think {
  position: absolute; z-index: 5; right: -6px; top: -6px;
  display: flex; gap: 4px; align-items: center;
  padding: 7px 10px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  opacity: 0; transform: translateY(5px) scale(.85);
  transition: opacity .2s ease, transform .2s ease;
}
.panda .think i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink); opacity: .3;
}
.panda[data-state="thinking"] .think { opacity: 1; transform: none; }
.panda[data-state="thinking"] .think i { animation: thinkDot 1.05s ease-in-out infinite; }
.panda[data-state="thinking"] .think i:nth-child(2) { animation-delay: .16s; }
.panda[data-state="thinking"] .think i:nth-child(3) { animation-delay: .32s; }
.panda[data-state="thinking"] .face { transform: rotate(2.5deg); }

/* 听：歪头、竖耳、眼睛睁大 */
.panda[data-state="listening"] .face { transform: rotate(-2.5deg); }
.panda[data-state="listening"] .ear.left { transform: rotate(-12deg); }
.panda[data-state="listening"] .ear.right { transform: rotate(12deg); }
.panda[data-state="listening"] .eye i { width: 22px; height: 22px; }

/* 说：点头 + 耳朵轻晃 */
.panda[data-state="speaking"] { animation: bob .6s ease-in-out infinite alternate; }
.panda[data-state="speaking"] .ear.left { animation: earL .5s ease-in-out infinite alternate; }
.panda[data-state="speaking"] .ear.right { animation: earR .5s ease-in-out infinite alternate; }

@keyframes breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2px) scale(1.012); }
}
@keyframes bob {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}
@keyframes earL { from { transform: rotate(0); } to { transform: rotate(-8deg); } }
@keyframes earR { from { transform: rotate(0); } to { transform: rotate(8deg); } }
@keyframes thinkDot {
  0%, 100% { opacity: .25; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .panda, .panda[data-state="speaking"], .panda .ear { animation: none !important; }
}

@keyframes bob {
  from { transform: translateY(0); }
  to   { transform: translateY(-7px); }
}

.level-ring {
  position: absolute; inset: -10px;
  border-radius: 50%;
  border: 3px solid var(--bamboo);
  opacity: 0;
  transform: scale(.92);
  transition: opacity .18s ease;
  pointer-events: none;
}

.talk-status {
  margin: 0; font-size: 14px; color: var(--ink-soft);
  text-align: center; min-height: 20px;
}

.captions {
  width: 100%;
  flex: 1; min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 4px 0 12px;
}
.bubble {
  max-width: 78%;
  padding: 11px 15px;
  font-size: 15px;
  line-height: 1.55;
  word-break: break-word;
  box-shadow: 0 1px 2px rgba(28, 26, 36, .04);
}
/* 孩子：竹青调；小盼：品牌紫调。整片灰白太单调，这两色都在现有品牌色系内 */
.bubble.b-kid {
  align-self: flex-start;
  background: #E9F2EC;
  color: #1F3328;
  border: 1px solid #D3E5DA;
  border-radius: 16px 16px 16px 5px;
}
.bubble.b-buddy {
  align-self: flex-end;
  background: #ECE7FA;
  color: #241F3D;
  border: 1px solid #DBD1F2;
  border-radius: 16px 16px 5px 16px;
}
/* 小盼还在想的时候，先给一个"正在输入"气泡 */
.bubble.b-buddy.typing {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 13px 16px;
}
.bubble.b-buddy.typing i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #7A6BA6;
  animation: typingDot 1.05s ease-in-out infinite;
}
.bubble.b-buddy.typing i:nth-child(2) { animation-delay: .16s; }
.bubble.b-buddy.typing i:nth-child(3) { animation-delay: .32s; }
@keyframes typingDot {
  0%, 100% { opacity: .3; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(-3px); }
}

.talk-controls {
  flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 8px 0 max(8px, env(safe-area-inset-bottom));
}

/* 唯一的朱红：整个界面只有这一个动作色 */
.talk-btn {
  width: 100%;
  max-width: 420px;
  min-height: 64px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--seal);
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .06em;
  box-shadow: var(--shadow-seal);
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.talk-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--seal-press);
}
.talk-btn[aria-pressed="true"] {
  background: var(--ink);
  box-shadow: 0 6px 0 #000;
}

.talk-meta { font-size: 12px; color: var(--ink-faint); min-height: 16px; }

/* 三个模式均分整行：主题/字体是衬线标签，不要挤在左边 */
#mode-row { gap: 6px; }
#mode-row .mode-btn { flex: 1 1 0; text-align: center; }
.mode-lock-hint { margin: 6px 0 0; font-family: var(--sans, sans-serif); font-size: 11px; color: var(--ink-faint, #8A8578); text-align: center; }

/* 模式选择：分段控件，不用下拉（老人/老师都不爱点开菜单） */
.mode-row {
  display: flex;
  gap: 4px;
  width: 100%;
  max-width: 420px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.mode-btn {
  flex: 1;
  border: 0;
  background: none;
  border-radius: var(--r-pill);
  padding: 9px 6px;
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mode-btn[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
  font-weight: 600;
}
.mode-btn:disabled { opacity: .4; }

/* ─────────────────────────── 设置 / 我的 ─────────────────────────── */
.panel-block {
  background: var(--paper-raise);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
  margin-bottom: 14px;
}
.panel-block h2 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--brand);
}
.panel-hint {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.persona-list { display: flex; flex-direction: column; gap: 8px; }
.persona-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-raise);
  text-align: left;
  width: 100%;
}
.persona-item[aria-pressed="true"] {
  border-color: var(--brand);
  background: #F3F1FA;
}
.persona-name { display: block; font-weight: 600; font-size: 15px; }
.persona-tone { display: block; font-size: 12px; color: var(--ink-faint); margin-top: 2px; line-height: 1.5; }
.persona-check {
  margin-left: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--line);
}
.persona-item[aria-pressed="true"] .persona-check {
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: inset 0 0 0 3px #F3F1FA;
}

.knowledge-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.knowledge-item {
  padding: 12px 14px;
  border-left: 3px solid var(--bamboo);
  background: #F7F9F8;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.knowledge-item b { color: var(--ink); }

.wallet-card {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-md);
  padding: 24px 20px;
  margin-bottom: 14px;
}
.wallet-label { font-size: 13px; opacity: .7; }
.wallet-value {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  /* 主站余额可能是很大的数字，避免撑破卡片 */
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
@media (max-width: 380px) {
  .wallet-value { font-size: 36px; }
}
.wallet-detail { font-size: 13px; opacity: .75; margin-top: 6px; }

/* ─────────────────────────── 底部标签 ─────────────────────────── */
.tabbar {
  flex: none;
  display: flex;
  border-top: 1px solid var(--line);
  background: var(--paper-raise);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab-btn {
  flex: 1;
  border: 0;
  background: none;
  padding: 14px 0 15px;
  font-size: 13px;
  color: var(--ink-faint);
  border-top: 2px solid transparent;
  margin-top: -1px;
}
.tab-btn.active {
  color: var(--brand);
  border-top-color: var(--brand);
  font-weight: 600;
}

/* ─────────────────────────── Toast ─────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translate(-50%, 12px);
  max-width: min(420px, calc(100% - 32px));
  padding: 12px 18px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 50;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--seal); }

@media (prefers-reduced-motion: reduce) {
  .panda[data-state="speaking"] { animation: none; }
  .toast { transition: none; }
}

@media (min-width: 560px) {
  .tab-panel { max-width: 560px; margin: 0 auto; width: 100%; }
}

/* ─────────────────────────── 成长报告 ─────────────────────────── */
.growth-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.growth-head > div:first-child { min-width: 0; flex: 1 1 auto; }
.growth-head .panel-hint { margin: 0; }

.btn-compact {
  width: auto;
  flex: none;
  padding: 10px 14px;
  font-size: 13px;
  border-radius: var(--r-sm);
}
.btn-compact:disabled { opacity: .6; }

/* 指标：四个数字并排，先看量再看细节 */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 16px 0 4px;
}
.stat-tile {
  background: var(--paper);
  border-radius: var(--r-sm);
  padding: 12px 8px;
  min-width: 0;
  overflow: hidden;
}
.stat-label {
  display: block;
  font-size: 11px;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.stat-value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.stat-value b {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}
.stat-value i {
  font-style: normal;
  font-size: 10px;
  color: var(--ink-faint);
  white-space: nowrap;
}

.sub-title {
  margin: 20px 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: .02em;
}

.fact-list {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
}
.fact-list li { margin-bottom: 4px; }

/* 知识点覆盖：进度条 + 具体缺哪些词 */
.coverage { margin-bottom: 14px; }
.coverage-top {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 5px;
}
.coverage-topic { font-weight: 600; color: var(--ink); }
.coverage-pct { color: var(--bamboo); font-variant-numeric: tabular-nums; }
.coverage-bar {
  height: 6px;
  background: var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.coverage-bar i {
  display: block;
  height: 100%;
  background: var(--bamboo);
  border-radius: var(--r-pill);
}
.coverage-detail {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-faint);
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-word {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}

.growth-notes {
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-faint);
}

.growth-history { display: flex; flex-direction: column; gap: 6px; }
.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 11px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-raise);
  font-size: 13px;
  text-align: left;
}
.history-item[aria-pressed="true"] {
  border-color: var(--brand);
  background: #F3F1FA;
}
.history-period { font-weight: 600; }
.history-meta { color: var(--ink-faint); font-size: 12px; }

/* ─────────────────────────── 机构管理 ─────────────────────────── */
.range-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--paper);
  border-radius: var(--r-pill);
  flex: none;
}
.range-tabs .mode-btn {
  flex: none;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.admin-form {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.admin-form input { flex: 1; min-width: 0; }
.admin-form .btn-compact { flex: none; }

.admin-list { display: flex; flex-direction: column; gap: 6px; }

.admin-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-raise);
  font-size: 13px;
}
.admin-row-main { font-weight: 600; display: flex; align-items: center; gap: 8px; flex: none; }
.admin-row-meta {
  color: var(--ink-faint);
  font-size: 12px;
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  letter-spacing: .03em;
}
.admin-dev-status {
  font-style: normal;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
}
.admin-dev-status.on { background: #E8F1EB; color: var(--bamboo); }
.admin-dev-status.off { background: #F2F2F4; color: var(--ink-faint); }

.admin-device { flex-wrap: wrap; align-items: center; row-gap: 4px; }
/* DOM 顺序是 主体→备注→按钮；这里用 order 重排成：
   第一行「机构码 + 状态 …… 停用」，第二行「备注」 */
.admin-device .admin-row-main { order: 1; flex: 1 1 auto; }
.admin-device .admin-toggle { order: 2; flex: none; margin-left: auto; padding: 6px 12px; font-size: 12px; }
.admin-device .admin-row-meta {
  order: 3;
  flex: 1 0 100%;
  text-align: left;
  white-space: normal;
  overflow: visible;
  color: var(--ink-faint);
}

/* ─────────────────────────── 积分不足引导 ─────────────────────────── */
.balance-hint {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--ink-faint);
  text-align: center;
}
.balance-hint.warn { color: var(--seal); font-weight: 600; }

.paywall {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 60;
}
.paywall-card {
  width: 100%;
  max-width: 340px;
  background: var(--paper-raise);
  border-radius: var(--r-md);
  padding: 22px 20px 18px;
}
.paywall-card h2 {
  margin: 0 0 10px;
  font-size: 18px;
  color: var(--ink);
}
.paywall-desc {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.paywall-actions { display: flex; flex-direction: column; gap: 8px; }
.paywall-actions .btn { padding: 13px 16px; font-size: 15px; }

/* ─────────────────────────── 账号 ─────────────────────────── */
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
/* 编号要念给客服听、要手抄，所以用等宽字并加大字距 */
.account-id {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink);
  user-select: all;
}
.account-row .btn-compact { flex: none; }

/* ─────────────────────────── 入口改版（家长优先）─────────────────────────── */
.btn-lg {
  padding: 17px 20px;
  font-size: 17px;
  border-radius: var(--r-md);
}
.hint-center { text-align: center; }

.link-btn {
  display: block;
  width: 100%;
  margin: 18px 0 0;
  padding: 8px 0;
  font-size: 14px;
  color: var(--brand);
  text-align: center;
  background: none;
  border: 0;
}
.link-btn::after {
  content: "";
  display: inline-block;
  margin-left: 6px;
  border: 5px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
}
.link-btn[aria-expanded="true"]::after { transform: translateY(-3px) rotate(180deg); }

.compliance {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.consent {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-soft);
  cursor: pointer;
}
.consent input { margin-top: 2px; flex: none; width: 16px; height: 16px; accent-color: var(--brand); }
/* 未配置文档地址时只是文字；变成 <a> 之后才给链接样式 */
.legal { color: var(--ink-soft); }
.consent a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.ai-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.6;
}

/* ─────────────────────────── 家长接力面板 ─────────────────────────── */
.session-tip {
  margin: 0 0 10px;
  padding: 14px 16px;
  border: 1.5px solid var(--bamboo);
  border-radius: var(--r-md);
  background: #F4F8F5;
}
.session-tip-head {
  font-size: 12px;
  font-weight: 700;
  color: var(--bamboo);
  margin-bottom: 6px;
}
.session-tip-text {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink);
}
.session-tip .btn-compact { width: auto; padding: 7px 14px; font-size: 13px; }

/* ─────────────────────────── 一键预设主题 ─────────────────────────── */
.preset-wrap {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line);
}
.preset-label {
  font-size: 12px;
  color: var(--faint, var(--ink-faint));
  margin-bottom: 8px;
}
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; }
.preset-chip {
  padding: 8px 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper-raise);
  font-size: 13px;
  color: var(--ink);
}
.preset-chip:active { background: #F1EFF6; border-color: var(--brand); }
.preset-paste { display: flex; gap: 8px; margin-top: 12px; }
.preset-paste input {
  flex: 1;
  min-width: 0;
  padding: 11px 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-raise);
  font-size: 14px;
}
.preset-paste .btn-compact { flex: none; width: auto; padding: 10px 14px; font-size: 13px; }

/* ─────────────────────────── 开口成就卡（可截图分享）─────────────────────────── */
.achv {
  margin: 16px 0 4px;
  padding: 20px 18px 16px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-md);
  background: var(--paper-raise);
}
.achv-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}
.achv-brand { font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.achv-title { font-size: 12px; color: var(--ink-faint); }

.achv-stats { display: flex; gap: 22px; margin-bottom: 16px; }
.achv-stat { display: flex; flex-direction: column; gap: 2px; }
.achv-stat-label { font-size: 11px; color: var(--ink-faint); }
.achv-stat-value { display: flex; align-items: baseline; gap: 2px; }
.achv-stat-value b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.achv-stat-value i { font-style: normal; font-size: 11px; color: var(--ink-faint); }

.achv-words { margin-bottom: 12px; }
.achv-words-label { font-size: 11px; color: var(--ink-faint); margin-bottom: 6px; }
.achv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.achv-chip {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: #F1EFF6;
  color: var(--brand);
  font-size: 12px;
}

.achv-tip {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-left: 3px solid var(--bamboo);
  background: #F4F8F5;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.achv-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--ink-faint);
}

/* ─────────────────────────── 推荐 / 客服 / 条款 ─────────────────────────── */
.ref-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.ref-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-raise);
}
.ref-stat-label { font-size: 11px; color: var(--ink-faint); }
.ref-stat-value { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }

.support-qr { margin-top: 12px; text-align: center; }
.support-qr img {
  width: 180px;
  height: 180px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
}

.legal-link { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.panel-hint .sep { color: var(--ink-faint); margin: 0 6px; }

/* ─────────────────────────── 报告图表 ─────────────────────────── */
.growth-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.chart-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-raise);
}
.chart-wide { grid-column: 1 / -1; }
.chart-title { font-size: 12px; color: var(--ink-faint); margin-bottom: 8px; }
.chart-foot { font-size: 11px; color: var(--ink-soft); margin-top: 6px; }

.bar-chart { width: 100%; height: auto; display: block; }
.bar { fill: #DCD6EC; }
.bar-on { fill: var(--brand); }
.bar-label { font-size: 9px; fill: var(--ink-faint); }

.donut { width: 100%; height: auto; display: block; max-height: 104px; }
.donut-bg { fill: none; stroke: #E7E2F3; stroke-width: 10; }
.donut-fg { fill: none; stroke: var(--brand); stroke-width: 10; stroke-linecap: round; }
.donut-text { font-size: 20px; font-weight: 700; fill: var(--ink); }

.cov-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.cov-name { font-size: 12px; width: 64px; flex: none; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cov-bar { flex: 1; height: 8px; border-radius: 4px; background: #EFEBF7; overflow: hidden; }
.cov-bar i { display: block; height: 100%; border-radius: 4px; background: var(--bamboo); }
.cov-count { font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* 推荐链接是 URL，不该用「账号编号」那种大号字 */
#referral-link {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  word-break: break-all;
  color: var(--ink-soft);
}

/* ══════════════ 摄像头：熊猫看看 ══════════════ */
.camera-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px auto 0;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.9);
  color: inherit;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.camera-btn .camera-note { color: rgba(0, 0, 0, 0.45); font-size: 12px; }
.camera-btn.on { border-color: #ff4d4f; box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.15); }

.camera-panel {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 150px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  z-index: 6;
}
.camera-panel video { display: block; width: 100%; height: auto; }
.camera-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 12px;
}
.rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4d4f;
  animation: recpulse 1.1s ease-in-out infinite;
}
@keyframes recpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.camera-stop {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.9);
  color: #111;
  font-size: 12px;
  cursor: pointer;
}

.camera-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(17, 17, 17, 0.45);
}
.camera-modal-card {
  width: min(340px, 100%);
  border-radius: 18px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.camera-modal-card h2 { margin: 0 0 8px; font-size: 18px; }
.camera-modal-note { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: #555; }
.camera-modal-card .btn { width: 100%; margin-top: 8px; }
.camera-modal-card .btn.holding { filter: brightness(0.92); }

.camera-tip {
  padding: 4px 6px 6px;
  background: rgba(0, 0, 0, 0.7);
  color: #ffe9a8;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
}

.camera-panel video.mirrored { transform: scaleX(-1); }

/* 主题行：右侧只留一个箭头，管理动作进弹层 */
.topic-row { cursor: pointer; }
.topic-chevron {
  flex: none;
  padding: 0 4px;
  color: var(--ink-faint, #8A8578);
  font-family: var(--sans, sans-serif);
  font-size: 20px;
  line-height: 1;
}
.topic-actions-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.topic-action-btn {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line-soft, rgba(20, 32, 46, .1));
  background: var(--paper, #FFFDF6);
  text-align: left;
  font-family: var(--sans, sans-serif);
  font-size: 14px;
  color: var(--ink, #14202E);
}
.topic-action-btn.danger { color: var(--brand, #8B0000); }

.deck-feedback {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-soft, rgba(20, 32, 46, .14));
}
.deck-feedback label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--sans, sans-serif);
  font-size: 12px;
  color: var(--ink-faint, #8A8578);
}
.deck-feedback-row { display: flex; gap: 8px; }
.deck-feedback-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line, rgba(20, 32, 46, .18));
  background: var(--paper, #FFFDF6);
  font-family: var(--sans, sans-serif);
  font-size: 13px;
  color: var(--ink, #14202E);
}
.deck-feedback-row .btn { flex: none; }

.coach-manual {
  display: block;
  margin: 10px auto 0;
  padding: 2px 4px;
  border: 0;
  background: none;
  font-family: var(--sans, sans-serif);
  font-size: 12px;
  color: var(--ink-faint, #8A8578);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 主题表单：设置页和首页「创建聊天」共用 */
.picker-sheet.topic-form-sheet { max-height: 90vh; }
.topic-form-sheet label {
  display: block;
  margin: 10px 0 4px;
  font-family: var(--sans, sans-serif);
  font-size: 12.5px;
  color: var(--ink-soft, #4A5260);
}
.topic-form-sheet #tf-child-block {
  margin: 10px 0 6px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft, rgba(20, 32, 46, .1));
  background: var(--paper, #FFFDF6);
}
.tf-age-label {
  display: block;
  margin: 10px 0 6px;
  font-family: var(--sans, sans-serif);
  font-size: 12px;
  color: var(--ink-faint, #8A8578);
}
.tf-persona-block { margin: 10px 0 4px; }
.topic-form-sheet .switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 6px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft, rgba(20, 32, 46, .1));
  background: var(--paper-sink, #FBF8EE);
  cursor: pointer;
}
.switch-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.switch-copy b { font-family: var(--sans, sans-serif); font-size: 13px; font-weight: 600; }
.switch-copy small { font-family: var(--sans, sans-serif); font-size: 11px; line-height: 1.45; color: var(--ink-faint, #8A8578); }
.switch-row input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.switch-state {
  flex: none;
  min-width: 16px;
  text-align: right;
  font-family: var(--sans, sans-serif);
  font-size: 12px;
  color: var(--ink-faint, #8A8578);
}
.switch-row.is-on .switch-state { color: var(--brand, #8B0000); }
.switch-track {
  display: block;
  position: relative;
  flex: none;
  width: 48px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: #D8D3C6;
  transition: background .18s ease;
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFDF6;
  box-shadow: 0 1px 3px rgba(20, 32, 46, .28);
  transition: transform .18s ease;
}
.switch-row input:checked + .switch-track { background: var(--brand, #8B0000); }
.switch-row input:checked + .switch-track::after { transform: translateX(20px); }
.switch-row input:focus-visible + .switch-track { outline: 2px solid var(--ink, #14202E); outline-offset: 2px; }

/* 图卡上如果以后带真实插画（slide.art），按这个尺寸放 */
.ls-art { max-width: 72%; max-height: 46%; object-fit: contain; }
/* 不同页型给一点纸色差，纯 emoji 也不至于太素的 */
.lesson-slide[data-kind="picture"] { background: linear-gradient(180deg, #FFFDF6 0%, #FBF5E7 100%); }
.lesson-slide[data-kind="quiz"] { background: linear-gradient(180deg, #FFFDF6 0%, #F7F0E3 100%); }
.lesson-slide[data-kind="recap"] { background: linear-gradient(180deg, #FFFDF6 0%, #F4F1E3 100%); }

.lesson-stage {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lesson-card { position: relative; flex: 1; min-height: 0; }

.lesson-slide {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 18px;
  overflow: hidden;
  text-align: center;
  background: var(--paper, #FFFDF6);
  border: 1px solid var(--line, rgba(20, 32, 46, .18));
  box-shadow: 0 12px 32px rgba(20, 32, 46, .07);
}
.lesson-slide.is-active { display: flex; animation: lessonIn .26s ease both; }
@keyframes lessonIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.ls-emoji { font-size: clamp(56px, 18vw, 92px); line-height: 1.05; }
/* 设备自带 emoji 字体；宿主没有 emoji 字体时会显示方框（无解，只能靠系统） */
.ls-emoji,
.ls-item-emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.ls-title { margin: 0; font-family: var(--serif, serif); font-size: clamp(19px, 5.2vw, 24px); font-weight: 600; }
.ls-title-cover { font-size: clamp(22px, 6vw, 28px); }
.ls-sub {
  margin: 0;
  font-family: var(--sans, sans-serif);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--ink-faint, #8A8578);
}
.ls-kicker {
  margin: 0;
  font-family: var(--sans, sans-serif);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--brand, #8B0000);
}
.ls-question { margin: 0; font-size: clamp(17px, 4.6vw, 21px); line-height: 1.5; }

.ls-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.ls-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 72px;
  padding: 10px 8px;
  border: 1px solid var(--line-soft, rgba(20, 32, 46, .1));
  background: var(--paper-sink, #FBF8EE);
}
.ls-item-emoji { font-size: 30px; line-height: 1; }
.ls-item-label { font-family: var(--sans, sans-serif); font-size: 14px; color: var(--ink-soft, #4A5260); }

.ls-points { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 420px; text-align: left; }
.ls-point { position: relative; padding-left: 14px; font-size: 15px; line-height: 1.5; }
.ls-point::before { content: "·"; position: absolute; left: 2px; color: var(--brand, #8B0000); }

.ls-options { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 380px; }
.ls-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line, rgba(20, 32, 46, .18));
  background: var(--paper, #FFFDF6);
}
.ls-option-no {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border: 1px solid var(--line, rgba(20, 32, 46, .18));
  font-family: var(--sans, sans-serif);
  font-size: 11px;
  color: var(--ink-faint, #8A8578);
}
.ls-option-text { font-size: 15px; }
.ls-hint { margin: 0; font-size: 12px; color: var(--ink-faint, #8A8578); }

.ls-recap { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ls-recap-item {
  padding: 6px 12px;
  border: 1px solid var(--line, rgba(20, 32, 46, .18));
  background: var(--paper-sink, #FBF8EE);
  font-size: 14px;
  color: var(--ink-soft, #4A5260);
}

/* 讲解要点只在备课预览里给家长看，上课时不占屏幕 */
.ls-say { display: none; margin: 6px 0 0; font-size: 12px; line-height: 1.5; text-align: left; color: var(--ink-faint, #8A8578); }
.lesson-preview .lesson-slide .ls-say { display: block; }

.lesson-dots { display: flex; flex: none; gap: 5px; align-items: center; justify-content: center; height: 8px; }
.lesson-dots span { width: 16px; height: 3px; background: var(--line-soft, rgba(20, 32, 46, .1)); }
.lesson-dots span.is-done { background: var(--bamboo, #7A6E4F); }
.lesson-dots span.is-on { background: var(--brand, #8B0000); }

.lesson-tools { display: flex; flex: none; gap: 8px; justify-content: center; }
.lesson-tool {
  padding: 8px 16px;
  border: 1px solid var(--line, rgba(20, 32, 46, .18));
  border-radius: var(--r-pill, 2px);
  background: var(--paper, #FFFDF6);
  color: var(--ink-soft, #4A5260);
  font-family: var(--sans, sans-serif);
  font-size: 12.5px;
}
.lesson-tool-ghost { background: transparent; color: var(--ink-faint, #8A8578); }

/* 课堂模式：熊猫缩小成讲解员，字幕只留最新一行左右的高度 */
#tab-talk.lesson-live .talk-stage { position: relative; }
#tab-talk.lesson-live .panda {
  position: absolute;
  right: 4px;
  bottom: 46px;
  z-index: 4;
  width: 72px;
  height: 72px;
  pointer-events: none;
}
#tab-talk.lesson-live .panda .level-ring { display: none; }
#tab-talk.lesson-live .talk-status { display: none; }
/* 课堂上模式/主题切换没有意义（模式在开会话时已锁定），收起来给图卡腾地方 */
#tab-talk.lesson-live .mode-row,
#tab-talk.lesson-live .talk-topic { display: none; }
#tab-talk.lesson-live .captions { flex: 0 0 auto; max-height: 78px; gap: 6px; padding: 2px 78px 4px 0; }
#tab-talk.lesson-live .captions .bubble { max-width: 100%; padding: 6px 10px; font-size: 13px; }

/* 备课预览：横向滑动的卡片，讲解要点露出来给家长看 */
.picker-sheet.lesson-sheet { max-height: 88vh; }
.lesson-sheet label { display: block; margin: 10px 0 4px; font-size: 12.5px; color: var(--ink-soft, #4A5260); }
.lesson-preview {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  padding: 4px 2px 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.lesson-preview .lesson-slide {
  position: relative;
  inset: auto;
  display: flex;
  flex: none;
  width: 230px;
  height: 320px;
  padding: 14px 12px;
  overflow-y: auto;
  scroll-snap-align: start;
}
.lesson-preview .lesson-slide .ls-emoji { font-size: 40px; }
.lesson-preview .lesson-slide .ls-title { font-size: 16px; }
.lesson-preview .lesson-slide .ls-question { font-size: 15px; }
.lesson-preview .lesson-slide .ls-item { min-width: 56px; padding: 6px; }
.lesson-preview .lesson-slide .ls-item-emoji { font-size: 22px; }

.lesson-prep-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.lesson-prep-actions .btn { width: auto; }
.lesson-done-body { padding: 2px 0 8px; }
.lesson-done-lead { margin: 0 0 8px; font-size: 16px; }
.lesson-done-words { margin: 0 0 8px; font-size: 15px; color: var(--brand, #8B0000); }

/* 孩子戳屏幕：点哪都要有变化（纯视觉，不发声） */
#lesson-card .ls-item,
#lesson-card .ls-emoji,
#lesson-card .ls-option,
#lesson-card .ls-recap-item { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lesson-preview .ls-item,
.lesson-preview .ls-emoji { position: relative; }
.is-poked { animation: pokePop .46s ease; }
@keyframes pokePop {
  0% { transform: scale(1); }
  30% { transform: scale(1.12) rotate(-2deg); }
  65% { transform: scale(.97); }
  100% { transform: scale(1); }
}
.ls-spark {
  position: absolute;
  z-index: 5;
  font-size: 14px;
  color: var(--brand, #8B0000);
  pointer-events: none;
  animation: sparkUp .72s ease forwards;
}
@keyframes sparkUp {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(1.15); }
}
.ls-option.is-picked { border-color: var(--brand, #8B0000); box-shadow: inset 0 0 0 1px var(--brand, #8B0000); }
.ls-option.is-picked .ls-option-no { background: var(--brand, #8B0000); color: var(--paper, #FFFDF6); border-color: var(--brand, #8B0000); }
.ls-tap-hint {
  margin: 0;
  font-family: var(--sans, sans-serif);
  font-size: 11px;
  color: var(--ink-faint, #8A8578);
  opacity: .85;
}
#tab-talk.lesson-live .panda { pointer-events: auto; cursor: pointer; }
#tab-talk.lesson-live .panda.is-poked { animation: pokePop .46s ease; }
.lesson-prep-actions { flex-wrap: wrap; }

/* 大屏 / 平板：图卡和字整体放大，图卡最宽 760（老师投屏也看得清） */
@media (min-width: 720px) {
  #tab-talk.lesson-live { max-width: 900px; }
  .lesson-stage { max-width: 760px; margin: 0 auto; }
  .lesson-slide { gap: 16px; padding: 30px 28px; }
  .ls-emoji { font-size: 120px; }
  .ls-title { font-size: 30px; }
  .ls-title-cover { font-size: 36px; }
  .ls-question { font-size: 26px; }
  .ls-item { min-width: 96px; padding: 14px 12px; }
  .ls-item-emoji { font-size: 44px; }
  .ls-item-label { font-size: 17px; }
  .ls-option { padding: 14px 16px; }
  .ls-option-text { font-size: 18px; }
  #tab-talk.lesson-live .panda { width: 96px; height: 96px; bottom: 56px; }
  #tab-talk.lesson-live .captions { max-height: 110px; padding-right: 104px; }
  .picker-sheet.lesson-sheet { max-width: 720px; margin: 0 auto; }
  .lesson-preview .lesson-slide { width: 280px; height: 380px; }
}

@media (min-width: 1080px) {
  #tab-talk.lesson-live { max-width: 1080px; }
  .lesson-stage { max-width: 980px; }
  .ls-emoji { font-size: 150px; }
  .ls-title { font-size: 36px; }
  .ls-question { font-size: 30px; }
  .lesson-preview .lesson-slide { width: 320px; height: 420px; }
}

/* 手机横屏 / 矮屏：优先保证图卡，不挤字幕 */
@media (orientation: landscape) and (max-height: 560px) {
  #tab-talk.lesson-live .captions { display: none; }
  #tab-talk.lesson-live .panda { width: 60px; height: 60px; bottom: 10px; }
  .lesson-slide { gap: 8px; padding: 12px; }
  .ls-emoji { font-size: clamp(36px, 12vh, 64px); }
  .ls-title { font-size: 18px; }
  .ls-question { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .lesson-slide.is-active { animation: none; }
  .is-poked { animation: none; }
  .ls-spark { display: none; }
}