/* 坐姿小卫士 MVP — 方案 B「学习驾驶舱」（spec §5） */
:root {
  --ok:#16a34a; --warn:#f59e0b; --bad:#ef4444; --ink:#1f2937; --muted:#6b7280;
  --line:#e5e7eb; --bg:#eef1f5; --accent:#2563eb;
}
* { box-sizing: border-box; }
body {
  margin:0; font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6;
}
.app { max-width:560px; margin:0 auto; padding:12px 12px 40px; }

/* 主卡头部（品牌名，居中） */
.cardhead { display:flex; justify-content:center; align-items:center; margin-bottom:10px; }
.cardhead .brand { font-weight:700; font-size:16px; }

.banner {
  background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; border-radius:12px;
  padding:10px 14px; margin-bottom:10px; font-size:13px; display:flex; gap:10px; align-items:center;
}
.banner.hidden { display:none; }
.banner .ghost { flex:none; }

/* 隐私承诺（常驻，顶部显眼位置） */
.privacy-note {
  background:#ecfdf5; border:1px solid #a7f3d0; color:#047857;
  border-radius:12px; padding:8px 14px; margin-bottom:10px;
  font-size:13px; text-align:center;
}
/* 模型加载提示（加载完成后隐藏） */
.loading-note {
  background:#eff6ff; border:1px solid #bfdbfe; color:#1d4ed8;
  border-radius:12px; padding:8px 14px; margin-bottom:10px;
  font-size:13px; text-align:center;
}
.loading-note.hidden { display:none; }

.card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
.card h3 { margin:0 0 8px; font-size:13px; color:var(--muted); font-weight:600; }

/* 主卡：品牌头 + 学习时段（倒计时 + 三按钮一行） */
.maincard {
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; margin-bottom:12px;
  text-align:center;
}
.digits { font-size:42px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:1px; }
.timer-sub { font-size:12px; color:var(--muted); margin-bottom:10px; }
.btnrow { display:flex; gap:8px; }
.btnrow .btn-primary { flex:1.4; }
.btnrow .ghost { flex:1; }
.btn-primary {
  background:var(--accent); color:#fff; border:none; border-radius:12px;
  padding:12px 0; font-size:15px; font-weight:600; cursor:pointer;
}
.btn-primary:disabled { opacity:.5; cursor:default; }
.btn-primary.danger { background:var(--bad); }
.ghost {
  background:#f1f5f9; border:1px solid var(--line); color:var(--ink);
  border-radius:12px; padding:12px 4px; font-size:13px; cursor:pointer;
}
.ghost:disabled { opacity:.5; cursor:default; }
.ghost.small { padding:6px 12px; font-size:12px; }
.calbtn { background:#ecfdf5; color:#059669; border:1px solid #a7f3d0; border-radius:10px; padding:8px 14px; font-size:13px; cursor:pointer; }
.calbtn:disabled { opacity:.5; cursor:default; }
.badges { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.badge-row { display:flex; justify-content:space-between; align-items:center; font-size:13px; padding:5px 10px; background:#f8fafc; border:1px solid var(--line); border-radius:8px; }
.badge { display:inline-block; padding:1px 10px; border-radius:999px; font-size:12px; font-weight:600; color:#fff; }
.badge.ok { background:var(--ok); }
.badge.warn { background:var(--warn); }
.badge.bad { background:var(--bad); }
.badge.none { background:#94a3b8; }
.gracebar { height:5px; background:var(--line); border-radius:3px; margin-top:5px; overflow:hidden; }
.gracebar i { display:block; height:100%; background:var(--bad); width:0%; }

/* 语音 */
.voiceopts { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); margin-bottom:6px; }
.voiceopts input[type=range] { flex:1; accent-color:var(--accent); }
.mutechk { display:flex; align-items:center; gap:4px; white-space:nowrap; }
.voicelist { list-style:none; margin:0; padding:0; max-height:220px; overflow:auto; }
.voicelist li { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 0; border-bottom:1px dashed var(--line); font-size:13px; }
.voicelist li:last-child { border-bottom:none; }
.voicelist .vname { flex:1; }
.voicelist .vname b { display:block; font-size:13px; }
.voicelist .vname span { color:var(--muted); font-size:12px; }
.vbtns { display:flex; gap:6px; flex:none; }
.vbtns button {
  border:1px solid var(--line); background:#f8fafc; border-radius:8px;
  padding:4px 10px; font-size:12px; cursor:pointer; color:var(--muted);
}
.vbtns button:hover { border-color:var(--accent); color:var(--accent); }
.vbtns button.rec-on { background:#fee2e2; border-color:#fca5a5; color:#b91c1c; }
.vbtns button.has-rec { color:#059669; border-color:#a7f3d0; background:#ecfdf5; }

/* 小结 */
.stats { display:flex; gap:10px; }
.stats .cell { flex:1; text-align:center; background:#f8fafc; border:1px solid var(--line); border-radius:10px; padding:10px 4px; }
.stats b { display:block; font-size:18px; }
.stats span { font-size:11px; color:var(--muted); }
.history { margin-top:10px; font-size:12px; color:var(--muted); }
.history .hline { display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px dashed var(--line); }
.history .empty { padding:4px 0; }

footer { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:12px; padding:0 4px; }
.minibtn {
  background:#f1f5f9; color:var(--ink); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; font-size:13px; cursor:pointer; flex:1;
}
.muted { color:var(--muted); }
.small { font-size:12px; }
.hidden { display:none !important; }

/* 吉祥物（spec §5：随状态换表情与配色） */
.mascot { position:relative; border-radius:50%; width:84px; height:84px; flex:none; }
.mascot .eye { position:absolute; top:37%; width:11%; height:15%; background:#333; border-radius:50%; }
.mascot .eye.l { left:26%; } .mascot .eye.r { left:63%; }
.mascot .mouth { position:absolute; left:50%; transform:translateX(-50%); top:60%; }
.mascot .cheek { position:absolute; top:53%; width:14%; height:9%; background:#fb7185; opacity:.55; border-radius:50%; display:none; }
.mascot .cheek.l { left:14%; } .mascot .cheek.r { left:72%; }
.mascot.m-idle   { background:linear-gradient(135deg,#e2e8f0,#cbd5e1); }
.mascot.m-ok     { background:linear-gradient(135deg,#bbf7d0,#4ade80); }
.mascot.m-warn   { background:linear-gradient(135deg,#fef3c7,#fbbf24); }
.mascot.m-bad    { background:linear-gradient(135deg,#fecaca,#f87171); }
.mascot.m-remind { background:linear-gradient(135deg,#fecaca,#ef4444); animation:pulse .8s infinite; }
.mascot.m-lost   { background:linear-gradient(135deg,#9ca3af,#6b7280); }
@keyframes pulse { 50% { transform:scale(1.06); } }
.mascot.m-idle .eye { height:8%; }
.mascot.m-remind .eye { width:14%; height:19%; }
.mascot.m-idle .mouth { width:26%; height:12%; border-bottom:5px solid #333; border-radius:50%; }
.mascot.m-ok .mouth { width:36%; height:24%; border:5px solid #333; border-top:none; border-radius:0 0 999px 999px; }
.mascot.m-warn .mouth { width:26%; height:4px; border-bottom:5px solid #333; border-radius:2px; }
.mascot.m-bad .mouth { width:32%; height:16px; border-top:6px solid #333; border-radius:999px 999px 0 0; }
.mascot.m-remind .mouth { width:20%; height:22%; border:5px solid #333; border-radius:50%; }
.mascot.m-ok .cheek, .mascot.m-remind .cheek { display:block; }
.mascot.m-lost .eye { width:12%; height:12%; }
.mascot.m-lost .mouth { width:36%; height:36%; border:none; color:#fff; font-size:26px; line-height:1; text-align:center; font-weight:700; }

/* 覆盖层 */
.overlay {
  position:fixed; inset:0; background:rgba(15,23,42,.85); z-index:50;
  display:none; flex-direction:column; align-items:center;
  color:#fff; gap:14px; text-align:center; padding:30px;
  overflow-y:auto; overscroll-behavior:contain;
}
.overlay.open { display:flex; }
/* flex 居中改为首末子元素 margin:auto（等价居中，但内容超高时可滚到顶部，
   不会被 justify-content:center 裁掉开头） */
.overlay > :first-child { margin-top:auto; }
.overlay > :last-child { margin-bottom:auto; }
/* 打开覆盖层时锁住背景页面滚动：避免出现「滚动条滚的是后面页面」的错觉 */
body:has(.overlay.open) { overflow:hidden; }
.overlay h2 { margin:0; }
.overlay p { margin:0; opacity:.85; }
.overlay .note { font-size:12px; opacity:.7; }
.bigbtn {
  background:#fff; color:#1f2937; font-size:18px; font-weight:700;
  border-radius:999px; padding:16px 34px; border:none; cursor:pointer;
}
.bigbtn:disabled { opacity:.5; cursor:default; }
.closebtn {
  background:transparent; border:1px solid rgba(255,255,255,.5); color:#fff;
  border-radius:999px; padding:8px 18px; cursor:pointer; font-size:13px;
}
.overlay.demo { background:#0f172a; }
#demoCanvas { background:#000; border-radius:12px; max-width:92vw; max-height:60vh; }
.demo-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center; }
.overlay.on-top { z-index:60; }
.sumgrid { display:flex; gap:10px; }
.sumgrid .cell { background:rgba(255,255,255,.12); border-radius:12px; padding:12px 16px; min-width:90px; }
.sumgrid b { display:block; font-size:22px; }
.sumgrid span { font-size:12px; opacity:.8; }

/* toast */
/* 骨架演示覆盖层里的三项指标（深色底） */
.demo-badges { width:100%; max-width:320px; }
.overlay .badge-row { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#fff; }
.overlay .gracebar { background:rgba(255,255,255,.2); }
/* 提醒冷却进度条（演示模式，触发提醒后出现并缩短） */
.cd-row { gap:8px; font-size:12px; }
.cd-row .cdbar { flex:1; height:6px; background:rgba(255,255,255,.15); border-radius:3px; overflow:hidden; }
.cd-row .cdbar i { display:block; height:100%; background:#fbbf24; border-radius:3px; }
.cd-row .cdsec { color:rgba(255,255,255,.7); font-variant-numeric:tabular-nums; white-space:nowrap; }

.toast {
  position:fixed; bottom:40px; left:50%; transform:translateX(-50%);
  background:#1f2937; color:#fff; font-size:13px; border-radius:999px;
  padding:8px 18px; z-index:80; opacity:0; transition:opacity .2s; pointer-events:none;
}
.toast.show { opacity:1; }

#video { display:none; }

/* 参数设置面板（家长入口，与孩子主界面隔离） */
.settings-panel {
  background:#fff; color:var(--ink); border-radius:16px;
  width:min(92vw, 500px); max-height:86vh;
  display:flex; flex-direction:column; gap:10px;
  padding:18px 20px; text-align:left; overflow:hidden;
}
.settings-panel h2 { margin:0; font-size:17px; }
.settings-panel .note { font-size:12px; color:var(--muted); margin:0; line-height:1.5; }
.presets { display:flex; gap:8px; }
.presets button {
  flex:1; border:1px solid var(--line); background:#f8fafc; border-radius:10px;
  padding:8px 0; font-size:13px; cursor:pointer; font-family:inherit;
}
.presets button.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.sections { overflow:auto; flex:1; padding-right:4px; }
.pgroup { font-size:12px; font-weight:700; color:var(--muted); margin:12px 0 4px; }
.param { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px; }
.param .phead { display:flex; justify-content:space-between; align-items:baseline; }
.param .pname { font-weight:600; font-size:13px; }
.param .pval { font-size:13px; color:var(--accent); font-variant-numeric:tabular-nums; }
.param .pexp { font-size:12px; color:var(--muted); margin:2px 0 6px; }
.param input[type=range] { width:100%; accent-color:var(--accent); }
.settings-foot { display:flex; gap:10px; justify-content:center; }
.settings-foot .bigbtn { font-size:15px; padding:10px 22px; }
.settings-foot .closebtn { border-color:var(--line); color:var(--muted); }

/* 语音卡片的提示条（无中文语音包时） */
.voicewarn {
  background:#fffbeb; border:1px solid #fde68a; color:#92400e;
  border-radius:8px; padding:8px 10px; font-size:12px; margin-bottom:8px; line-height:1.5;
}

/* 专注模式（黑屏遮罩 + 唤醒锁；票：专注模式——全黑、圆环倒计时、剪影、药丸退出） */
.overlay.focus { background:#000; padding:0; z-index:70; }
.overlay.focus > :first-child { margin-top:0; }
.overlay.focus > :last-child { margin-bottom:0; }
.f-count { display:flex; flex-direction:column; align-items:center; gap:16px; padding:30px; width:100%; }
.f-count .f-txt { font-size:20px; font-weight:600; letter-spacing:1px; }
.f-ringwrap { position:relative; width:160px; height:160px; }
.f-ringwrap svg { transform:rotate(-90deg); }
.f-num {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:48px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums;
}
.f-count .f-sub { font-size:13px; opacity:.75; }
.f-warn {
  background:rgba(239,68,68,.16); border:1px solid rgba(239,68,68,.5); color:#fca5a5;
  border-radius:10px; padding:8px 14px; font-size:12px; line-height:1.6; max-width:320px;
}
.f-black {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .6s ease;
}
.f-black.show { opacity:1; }
.f-ghost { opacity:.06; pointer-events:none; }
.f-exit {
  position:absolute; left:14px; bottom:14px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.6);
  border-radius:999px; padding:9px 16px; font-size:13px; cursor:pointer;
}
.f-exit:active { background:rgba(255,255,255,.2); }