:root{
  --bg:#0f1420; --card:#1a2130; --card2:#222b3d; --line:#2e3950;
  --txt:#e8edf7; --dim:#93a1bd; --acc:#ffb02e; --acc2:#ffd76e;
  --ok:#3ddc84; --bad:#ff5c5c; --blue:#4da3ff;
  --field:#131a28; --ink:#1a1200; --topbg:rgba(15,20,32,.96);
  --note:#1b2436; --tagok:#14361f; --tagmid:#3a2f10; --tagno:#3a1d1d;
  --tagmid-txt:#ffd76e; --tagno-txt:#ff9c9c; --tagok-txt:#3ddc84;
}
/* 浅色主题：不是简单把颜色反过来。
   日间用浅色底 + 深字，减少"亮底白字"的眩光；卡片留一点点米色，别用纯白。
   对比度按 WCAG AA（正文 ≥4.5:1）调过，正文色 #1f2430 on #f7f5f1 ≈ 13:1。 */
:root[data-theme="light"]{
  --bg:#f7f5f1; --card:#ffffff; --card2:#efece6; --line:#ddd8cf;
  --txt:#1f2430; --dim:#6b7280; --acc:#e08a00; --acc2:#a35c00;
  --ok:#0f8a48; --bad:#c62828; --blue:#1f6fd0;
  --field:#ffffff; --ink:#ffffff; --topbg:rgba(247,245,241,.96);
  --note:#f0ede6; --tagok:#e2f5e9; --tagmid:#fdf1d8; --tagno:#fdeaea;
  --tagmid-txt:#8a5b00; --tagno-txt:#b3261e; --tagok-txt:#0f8a48;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  margin:0;background:var(--bg);color:var(--txt);
  transition:background .25s,color .25s;
  font:16px/1.65 -apple-system,"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  padding-bottom:40px;
}
.top{
  position:sticky;top:0;z-index:9;background:var(--topbg);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  padding:10px 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.brand{font-weight:700;font-size:19px;display:flex;align-items:center;gap:6px}
.sun{color:var(--acc);font-size:22px}
.tabs{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.tabs button{
  background:var(--card);color:var(--dim);border:1px solid var(--line);
  padding:7px 13px;border-radius:9px;font-size:14px;cursor:pointer;
}
.tabs button.on{background:var(--acc);color:var(--ink);border-color:var(--acc);font-weight:700}
.coinbar{font-weight:700;color:var(--acc2);white-space:nowrap;font-size:16px}
main{max-width:900px;margin:0 auto;padding:18px 14px}
.view{display:none}
.view.on{display:block}
h2{margin:6px 0 4px;font-size:21px}
h3{margin:22px 0 8px;font-size:17px;color:var(--acc2)}
.sub{color:var(--dim);margin:0 0 16px;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:11px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:13px;padding:14px;
}
.card h4{margin:0 0 5px;font-size:16px}
.card .meta{color:var(--dim);font-size:13px;margin-bottom:10px}
.card .hint{color:var(--blue);font-size:12.5px;margin-bottom:10px;line-height:1.5}
.card.done{opacity:.55;border-color:var(--ok)}
.card .acts{display:flex;gap:7px;flex-wrap:wrap}
button{
  background:var(--card2);color:var(--txt);border:1px solid var(--line);
  padding:9px 14px;border-radius:9px;font-size:14.5px;cursor:pointer;font-family:inherit;
}
button:active{transform:scale(.97)}
button.primary{background:var(--acc);color:var(--ink);border-color:var(--acc);font-weight:700}
button.danger{background:var(--tagno);color:var(--tagno-txt);border-color:var(--line)}
button.tiny{padding:5px 10px;font-size:12.5px;border-radius:7px}
.acts.tight{gap:5px}
button:disabled{opacity:.4;cursor:not-allowed}
.row{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0;align-items:center}
.chk{color:var(--dim);font-size:14px;display:flex;align-items:center;gap:6px}
.streak{
  background:linear-gradient(135deg,#2a2210,#1a2130);border:1px solid #4a3c18;
  border-radius:13px;padding:14px;margin-bottom:16px;font-size:15px;
}
.streak b{color:var(--acc2);font-size:20px}

/* 练字格 */
.chargrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:11px;margin:12px 0}
.char{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center}
.char .py{color:var(--acc2);font-size:13px;margin-bottom:5px;letter-spacing:.5px}
.char .zi{
  font-size:52px;line-height:1.25;color:var(--txt);font-weight:400;
}
.char .word{color:var(--dim);font-size:12.5px;margin-top:5px}
.char textarea{
  width:100%;height:62px;margin-top:7px;background:var(--field);color:var(--txt);
  border:1px dashed var(--line);border-radius:8px;padding:5px;font-size:15px;
  font-family:inherit;resize:none;
}
.result{margin-top:14px;padding:12px;border-radius:11px;background:var(--card);display:none}
.result.on{display:block}

/* 算题 */
.q{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px;margin-bottom:10px}
.q .qt{font-size:17px;margin-bottom:9px;font-family:"Courier New",monospace}
.q input{
  width:100%;max-width:260px;background:var(--field);color:var(--txt);border:1px solid var(--line);
  border-radius:8px;padding:9px 11px;font-size:17px;font-family:"Courier New",monospace;
}
.q .fb{margin-top:7px;font-size:14px;display:none}
.q .fb.on{display:block}
.q.right{border-color:var(--ok)}
.q.wrong{border-color:var(--bad)}
.fb.ok{color:var(--ok)}
.fb.no{color:var(--bad)}

.chart{display:flex;align-items:flex-end;gap:5px;height:110px;background:var(--card);
  border:1px solid var(--line);border-radius:11px;padding:11px}
.chart .bar{flex:1;background:linear-gradient(180deg,var(--acc),#8a6200);border-radius:4px 4px 0 0;min-height:3px;position:relative}
.chart .bar span{position:absolute;bottom:-19px;left:50%;transform:translateX(-50%);
  font-size:10px;color:var(--dim);white-space:nowrap}
.log{color:var(--dim);font-size:14px}
.log div{padding:5px 0;border-bottom:1px solid var(--line)}
textarea{width:100%;min-height:88px;background:var(--field);color:var(--dim);border:1px solid var(--line);
  border-radius:9px;padding:10px;font-family:monospace;font-size:12.5px;margin-top:10px}
.note{background:var(--note);border-left:3px solid var(--blue);padding:11px 13px;border-radius:0 9px 9px 0;
  color:var(--dim);font-size:14px;margin-top:16px}
.report{margin-top:16px}
.report table{width:100%;border-collapse:collapse;font-size:14px;margin-top:10px}
.report th,.report td{text-align:left;padding:8px 9px;border-bottom:1px solid var(--line)}
.report th{color:var(--acc2);font-weight:600}
.tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12.5px;font-weight:600}
.tag.ok{background:var(--tagok);color:var(--tagok-txt)}
.tag.mid{background:var(--tagmid);color:var(--tagmid-txt)}
.tag.no{background:var(--tagno);color:var(--tagno-txt)}
.stat{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:11px}
.stat .k{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px}
.stat .k b{display:block;font-size:25px;color:var(--acc2)}
.stat .k span{color:var(--dim);font-size:13px}
@media(max-width:520px){.char .zi{font-size:44px}.tabs button{padding:6px 10px;font-size:13px}}

/* ===== 同步状态点 ===== */
.sync-dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  background:#5a6a86;vertical-align:middle;margin-right:2px;
  transition:background .3s;
}
.sync-dot.ok{background:var(--ok);box-shadow:0 0 8px rgba(61,220,132,.6)}
.sync-dot.warn{background:var(--acc)}
.sync-dot.bad{background:var(--bad);box-shadow:0 0 8px rgba(255,92,92,.6)}

/* ===== 输入框统一 ===== */
.inp{
  background:#131a28;color:#fff;border:1px solid var(--line);
  border-radius:8px;padding:9px 12px;font-family:inherit;font-size:14.5px;
  min-width:180px;flex:1;
}
.inp:focus{outline:none;border-color:var(--acc)}
.sub.warn{color:var(--acc)}

/* ===== 口令门 ===== */
.gate{
  position:fixed;inset:0;z-index:200;background:var(--bg);
  display:none;align-items:center;justify-content:center;
}
.gate.on{display:flex}
.gate-box{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:28px 24px;width:min(340px,88vw);text-align:center;
}
.gate-box .sun{font-size:34px;display:block;margin-bottom:4px}
.gate-box h3{margin:0 0 2px;color:var(--acc2)}
.gate-box .sub{margin-bottom:16px}
.gate-box input{
  width:100%;background:#131a28;color:#fff;border:1px solid var(--line);
  border-radius:10px;padding:12px;font-size:17px;text-align:center;
  letter-spacing:3px;margin-bottom:12px;font-family:inherit;
}
.gate-box input:focus{outline:none;border-color:var(--acc)}
.gate-box button{width:100%;padding:12px}
.gate-err{color:var(--bad);font-size:13.5px;height:20px;margin-top:8px}

/* ================= 视图切换（孩子 / 家长） ================= */
.top.parent{background:rgba(20,28,20,.97);border-bottom-color:#2e5030}
.top .badge{
  background:#2c5c34;color:#bfe9c6;font-size:11px;font-weight:600;
  padding:2px 8px;border-radius:20px;margin-left:6px;vertical-align:middle;
}
.ghost{
  background:transparent;border:1px solid var(--line);color:var(--dim);
  padding:6px 11px;font-size:15px;line-height:1;
}
button.ai{background:#1e2a4a;color:#9fc4ff;border-color:#2e4a7a}
button.ai:disabled{opacity:.5}
button.tiny{padding:5px 10px;font-size:12.5px;border-radius:7px}
.acts.tight{margin-top:8px;gap:6px}
.dim{color:var(--dim);font-size:12.5px}
.good{color:var(--ok)}

/* ================= 手写画板 ================= */
canvas.pad{
  width:100%;height:auto;aspect-ratio:1/1;margin-top:7px;
  border:1px dashed var(--line);border-radius:8px;
  touch-action:none;display:block;cursor:crosshair;
}
.hw-fb{min-height:18px;font-size:12.5px;margin-top:6px;line-height:1.45}
.hw-fb.ok{color:var(--ok)}
.hw-fb.near{color:var(--acc2)}
.hw-fb.bad{color:#ff9c9c}
.char{position:relative}

/* ================= AI 弹层 ================= */
.ai-panel .gate-box.wide{width:min(560px,92vw);text-align:left}
.ai-panel .gate-box h3{text-align:center}
.ai-body{
  max-height:60vh;overflow:auto;font-size:15px;line-height:1.75;
  color:var(--txt);text-align:left;
}
.ai-body code{
  background:#131a28;border:1px solid var(--line);border-radius:5px;
  padding:1px 6px;font-size:13.5px;color:var(--acc2);
}
.dots{color:var(--dim);font-size:14px}
.dots::after{content:'…';animation:dots 1.2s steps(4,end) infinite}
@keyframes dots{0%{opacity:.3}50%{opacity:1}100%{opacity:.3}}

/* ================= 设置页 ================= */
code{
  background:#131a28;border:1px solid var(--line);border-radius:5px;
  padding:1px 5px;font-size:12.5px;color:var(--acc2);
}
#pinInput{max-width:220px;letter-spacing:2px;text-align:center}

/* ================= 顶栏互斥（重要） =================
   .top 用了 display:flex，会盖掉 hidden 属性默认的 display:none，
   结果两套顶栏同时显示。必须显式覆盖。这个坑在截图里才发现，别删。 */
.top[hidden]{display:none !important}


/* ===== 手写反馈 / 测评画板 / 文件按钮 ===== */
.hw-fb{font-size:12.5px;margin-top:5px;min-height:16px;line-height:1.45}
.hw-fb.ok{color:var(--ok)}
.hw-fb.near{color:var(--acc2)}
.hw-fb.bad{color:var(--bad)}
.hzq{display:flex;flex-direction:column;align-items:center}
.padwrap{position:relative;margin-top:6px}
canvas.pad{
  width:100%;max-width:132px;height:auto;aspect-ratio:1/1;border-radius:10px;
  background:#fff;border:1px solid var(--line);touch-action:none;cursor:crosshair;
}
.filebtn{
  display:inline-block;padding:5px 10px;font-size:12.5px;border-radius:7px;
  background:var(--card2);border:1px solid var(--line);cursor:pointer;color:var(--txt);
}
.filebtn:active{transform:scale(.97)}
select.inp, input.inp{
  background:var(--field);color:var(--txt);border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;font-size:15px;font-family:inherit;min-width:120px;
}
.badge{background:var(--acc);color:var(--ink);font-size:11px;padding:1px 7px;border-radius:20px;margin-left:4px}
#parentTop .badge{vertical-align:middle}
.ghost{background:transparent;border-color:transparent;font-size:18px;padding:4px 8px}

/* 深色主题下的画板：白底是对的（写字要白纸感），别反色 */