:root {
  --bg: #f4f7fb;
  --card: #ffffff;
  --text: #1f2937;
  --sub: #6b7280;
  --line: #e5e7eb;
  --primary: #2f9e8f;      /* 学生：清新绿 */
  --primary-d: #1f7a6e;
  --accent: #f59e0b;
  --danger: #ef4444;
  --ok: #16a34a;
  --radius: 16px;
  --shadow: 0 4px 18px rgba(0,0,0,.06);
}
/* 家长主题 */
body[data-mode="parent"] {
  --bg: #0f172a;
  --card: #1e293b;
  --text: #e2e8f0;
  --sub: #94a3b8;
  --line: #334155;
  --primary: #6366f1;      /* 家长：稳重靛蓝 */
  --primary-d: #4f46e5;
  --accent: #f59e0b;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}
#app { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); position: relative; }

/* 顶栏 */
#topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top));
  background: var(--card); border-bottom: 1px solid var(--line);
}
.tb-title { font-weight: 700; font-size: 18px; }
.tb-back { color: var(--primary); font-weight: 600; margin-right: 10px; cursor: pointer; }
.tb-right { display: flex; align-items: center; gap: 10px; }
.tb-mode { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--primary); color: #fff; }
.tb-switch { font-size: 13px; color: var(--sub); cursor: pointer; }

#view { flex: 1; padding: 16px; padding-bottom: 40px; }

/* 卡片 */
.card { background: var(--card); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin-bottom: 14px; }
.card h3 { margin: 0 0 8px; font-size: 16px; }
.muted { color: var(--sub); font-size: 13px; }

/* 按钮 */
.btn {
  display: block; width: 100%; border: none; border-radius: 12px;
  padding: 14px; font-size: 16px; font-weight: 600; color: #fff;
  background: var(--primary); cursor: pointer; transition: .15s;
}
.btn:active { transform: scale(.98); }
.btn.ghost { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); }
.btn.sub { background: var(--sub); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }

/* 启动页 */
.launch { text-align: center; padding-top: 8vh; }
.launch .logo { font-size: 46px; margin-bottom: 6px; }
.launch .tag { color: var(--sub); margin-bottom: 36px; }
.launch .btn { margin-bottom: 14px; }

/* 输入框 */
textarea, input[type=text] {
  width: 100%; border: 1.5px solid var(--line); border-radius: 12px;
  padding: 12px; font-size: 16px; font-family: inherit; background: var(--bg); color: var(--text);
  resize: vertical; outline: none;
}
textarea:focus, input:focus { border-color: var(--primary); }
label.fld { display: block; font-size: 13px; color: var(--sub); margin: 12px 0 6px; }

/* 上传区 */
.upload {
  border: 2px dashed var(--line); border-radius: var(--radius); padding: 22px; text-align: center;
  color: var(--sub); cursor: pointer; margin-bottom: 12px;
}
.upload.has-img { border-style: solid; border-color: var(--primary); }
.upload img.preview { max-width: 100%; max-height: 220px; border-radius: 10px; }

/* 对话气泡 */
.chat { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.bubble { max-width: 84%; padding: 11px 14px; border-radius: 16px; font-size: 15px; white-space: pre-wrap; word-break: break-word; }
.bubble.me { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.bubble.ai { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bubble.locked { background: repeating-linear-gradient(45deg,#fde68a,#fde68a 10px,#fef3c7 10px,#fef3c7 20px); color:#92400e; border:none; }
.bubble.leak { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }

.locked-answer {
  border: 1.5px dashed var(--line); border-radius: 12px; padding: 14px; text-align: center; color: var(--sub);
  margin: 10px 0;
}
.locked-answer .big { font-size: 30px; }

/* 标签 / 徽章 */
.badge { display:inline-block; font-size:12px; padding:2px 9px; border-radius:999px; background:var(--bg); color:var(--sub); border:1px solid var(--line); margin-right:6px;}
.badge.wrong { background:#fee2e2; color:#b91c1c; border-color:#fca5a5;}
.badge.right { background:#dcfce7; color:#15803d; border-color:#86efac;}

/* 列表 */
.row { display:flex; align-items:center; justify-content:space-between; padding:12px; border-bottom:1px solid var(--line); cursor:pointer; }
.row:last-child { border-bottom:none; }
.row .r-main { font-weight:600; }
.row .r-sub { font-size:12px; color:var(--sub); margin-top:2px; }

/* 错题本 */
.wb-cat { display:flex; align-items:center; justify-content:space-between; font-weight:600; font-size:15px; padding:12px 4px 8px; border-bottom:1px dashed var(--line); margin-bottom:4px; }
.wb-item { padding:10px 4px; border-bottom:1px solid var(--line); cursor:pointer; }
.wb-item:last-child { border-bottom:none; }
.wb-item:hover { background:rgba(0,0,0,.03); }
body[data-mode="parent"] .wb-item:hover { background:rgba(255,255,255,.04); }

/* PIN */
.pin-dots { display:flex; gap:14px; justify-content:center; margin:24px 0; }
.pin-dots .dot { width:14px; height:14px; border-radius:50%; background:var(--line); }
.pin-dots .dot.on { background:var(--primary); }
.pin-pad { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:260px; margin:0 auto; }
.pin-pad button { height:58px; border-radius:14px; border:1px solid var(--line); background:var(--card); font-size:22px; color:var(--text); cursor:pointer; }
.pin-pad button:active { background:var(--bg); }

/* 提示条 */
.hintbar { background:var(--bg); border-radius:10px; padding:10px 12px; font-size:13px; color:var(--sub); margin:8px 0; }

/* toast */
.toast { position:fixed; left:50%; bottom:40px; transform:translateX(-50%); background:rgba(0,0,0,.82); color:#fff; padding:10px 18px; border-radius:999px; font-size:14px; z-index:50; max-width:80%; text-align:center; }

/* modal */
.modal-mask { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:60; align-items:center; justify-content:center; padding:24px; }
.modal-mask:not([hidden]) { display:flex; }
.modal-box { background:var(--card); border-radius:18px; padding:22px; width:100%; max-width:340px; box-shadow:var(--shadow); }

/* 视频讲解播放器 */
.video-box { max-width:430px; width:100%; max-height:84vh; display:flex; flex-direction:column; padding:0; overflow:hidden; }
.vb-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); font-weight:600; font-size:15px; }
.vb-close { background:none; border:none; font-size:24px; color:var(--sub); cursor:pointer; line-height:1; padding:0 4px; }
.vb-body { padding:14px 16px; overflow-y:auto; }
.vb-loading,.vb-err { color:var(--sub); text-align:center; padding:26px 8px; font-size:14px; }
.vb-title { font-weight:600; margin-bottom:10px; font-size:15px; }
.vb-segs { display:flex; flex-direction:column; gap:8px; }
.vb-seg { display:flex; gap:10px; padding:10px 12px; border-radius:12px; background:rgba(0,0,0,.035); font-size:14px; line-height:1.6; cursor:pointer; transition:.18s; }
body[data-mode="parent"] .vb-seg { background:rgba(255,255,255,.05); }
.vb-seg.active { background:rgba(245,158,11,.14); border:1px solid var(--accent); }
.vb-num { flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; }
.vb-controls { display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--line); }
.vb-btn { flex:1; padding:12px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--text); font-size:14px; cursor:pointer; }
.vb-btn.primary { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
.vb-status { padding:0 16px 14px; font-size:13px; color:var(--sub); }
.modal-box h3 { margin:0 0 12px; }

/* spinner */
.spin { display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:sp .7s linear infinite; vertical-align:-3px; margin-right:6px;}
@keyframes sp { to { transform:rotate(360deg);} }

.steps li { margin-bottom:8px; }
.knowledge { font-size:13px; color:var(--accent); margin-top:8px; }

/* ---- 识别结果：原图 + 题号切换（参考快对/豆包交互）---- */
.qstat { font-size:13px; color:var(--sub); margin-bottom:8px; }
.qimg { width:100%; max-height:210px; object-fit:contain; background:#0e1117; border-radius:12px; display:block; cursor:zoom-in; }
.qchips { display:flex; gap:8px; overflow-x:auto; padding:10px 0 2px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.qchips::-webkit-scrollbar { display:none; }
.qchip {
  flex:0 0 auto; width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line);
  background:var(--card); color:var(--text); font-size:15px; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:transform .12s;
}
.qchip:active { transform:scale(.92); }
.qchip.cur { background:var(--primary); border-color:var(--primary); color:#fff; }
.qchip.ok { border-color:var(--ok); color:var(--ok); }
.qchip.bad { border-color:var(--danger); color:var(--danger); }
.qchip.cur.ok, .qchip.cur.bad { color:#fff; }
body[data-mode="parent"] .qimg { background:#0b1120; }

/* ---- 原图查看器（全屏，点图切换 1:1）---- */
.img-viewer {
  position:fixed; inset:0; background:rgba(0,0,0,.94); z-index:60;
  display:flex; align-items:center; justify-content:center; overflow:auto; padding:8px;
}
.img-viewer img { max-width:100%; max-height:100%; object-fit:contain; cursor:zoom-in; }
.img-viewer img.zoomed { max-width:none; max-height:none; width:auto; height:auto; cursor:zoom-out; }
.iv-close {
  position:fixed; top:14px; right:14px; width:42px; height:42px; border-radius:50%;
  border:none; background:rgba(255,255,255,.18); color:#fff; font-size:26px; line-height:1; cursor:pointer;
}