/* 小智成长手册 — 设计口径
 *
 * 受众是「家长和孩子坐在一起看」，所以这不是 dashboard，是一本手册。
 * 色板取自儿童心理咨询室：暖纸、原木、鼠尾草绿、陶土。绿色是安全色，
 * 承担主色；橙红只留给预警，平时一点都不出现。
 *
 * 字体全部走系统栈：服务器和用户都在国内，Google Fonts 不可靠，
 * personality 靠字重/字号/字距/色彩承载。只有两处用衬线——「给孩子的话」
 * 和「家长开口话术」——让这两段读起来像人写的，不像系统生成的。
 */

:root{
  color-scheme: light dark;

  --paper:#FBFAF7;        /* 暖白纸 */
  --card:#FFFFFF;
  --ink:#2A2E33;
  --ink-soft:#565C64;
  --dust:#8A93A0;         /* 元信息 */
  --line:#E8E4DC;
  --line-soft:#F1EEE8;

  --sage:#5A8A7A;         /* 主色 */
  --sage-deep:#3F6B5C;
  --sage-wash:#EDF3F0;
  --clay:#C4704F;
  --sun:#D9A441;
  --sun-wash:#FBF3E0;

  --t1:#5A8A7A;           /* 一级 */
  --t2:#D98324;           /* 二级 */
  --t3:#C7442E;           /* 三级 */
  --t2-wash:#FDF2E3;
  --t3-wash:#FBEBE7;

  --shadow:0 1px 2px rgba(42,46,51,.04), 0 6px 20px rgba(42,46,51,.05);
  --radius:14px;

  --sans:"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Noto Sans CJK SC",
         "Microsoft YaHei",-apple-system,"Segoe UI",sans-serif;
  --serif:"Songti SC","Source Han Serif SC","Noto Serif CJK SC","STSong",
          "SimSun",Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#15171A; --card:#1D2024; --ink:#E9E7E2; --ink-soft:#B4B8BE;
    --dust:#858B94; --line:#2E3238; --line-soft:#24272C;
    --sage:#7FB09E; --sage-deep:#9CC7B6; --sage-wash:#1E2A26;
    --sun-wash:#2A2418; --t2-wash:#2C2317; --t3-wash:#2E1E1B;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.28);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; padding:0 20px 72px;
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.72;
  display:flex; justify-content:center;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:100%; max-width:840px}
a{color:var(--sage-deep); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--sage); outline-offset:2px; border-radius:6px}

/* ── 顶栏 ───────────────────────────────────────────────────────── */
nav.top{
  display:flex; gap:22px; align-items:center; flex-wrap:wrap;
  padding:20px 2px 18px; margin-bottom:22px;
  border-bottom:1px solid var(--line);
  font-size:13.5px; letter-spacing:.02em;
}
@media (max-width:520px){
  /* 一行放不下就整条收紧，别让「退出」单独掉到第二行 */
  nav.top{gap:13px; font-size:12.5px; padding:16px 2px 14px}
  nav.top .mark{font-size:12.5px; letter-spacing:.04em; gap:5px}
  h1{font-size:24px}
  .card{padding:18px 16px}
  body{padding:0 14px 56px}
}
nav.top a{color:var(--ink-soft)}
nav.top a:hover{color:var(--sage-deep)}
nav.top .spacer{flex:1}
nav.top .mark{
  font-weight:700; color:var(--ink); letter-spacing:.08em; font-size:14px;
  display:flex; align-items:center; gap:7px;
}
nav.top .mark i{
  width:9px; height:9px; border-radius:50%; background:var(--sage);
  font-style:normal; display:block;
}

/* ── 标题 ───────────────────────────────────────────────────────── */
.pagehead{margin:6px 0 26px}
.eyebrow{
  font-size:12px; letter-spacing:.22em; color:var(--dust);
  text-transform:uppercase; margin-bottom:8px;
}
h1{
  font-size:30px; line-height:1.28; margin:0; font-weight:700;
  letter-spacing:-.01em;
}
h1 .sub{font-size:15px; font-weight:400; color:var(--dust); letter-spacing:0}
h2{font-size:17px; margin:0 0 14px; font-weight:700; letter-spacing:-.005em}
h3{font-size:14px; margin:0 0 8px; font-weight:600; color:var(--ink-soft)}
.lead{font-size:16.5px; line-height:1.8}

/* ── 卡片 ───────────────────────────────────────────────────────── */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 24px; margin-bottom:16px;
  box-shadow:var(--shadow);
}
.card.flush{padding:0; overflow:hidden}
.row{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.meta{font-size:12.5px; color:var(--dust)}
.mac{font-family:var(--mono); font-size:12px; color:var(--dust); letter-spacing:-.01em}
.empty{color:var(--dust); padding:30px 0; text-align:center}
.spacer{flex:1}

/* 章节分隔：给谁看的，明说 */
.audience{
  display:flex; align-items:center; gap:12px;
  margin:34px 0 14px; color:var(--ink-soft);
}
.audience b{font-size:15px; color:var(--ink); font-weight:700; letter-spacing:.02em}
.audience .rule{flex:1; height:1px; background:var(--line)}
.audience .who{font-size:12.5px; color:var(--dust)}

/* ── 控件 ───────────────────────────────────────────────────────── */
input[type=text],input[type=password]{
  padding:9px 12px; border:1px solid var(--line); border-radius:9px;
  font-size:14px; background:var(--card); color:var(--ink); font-family:inherit;
  min-width:0;
}
input::placeholder{color:var(--dust)}
button{
  padding:9px 18px; border:0; border-radius:9px; background:var(--sage);
  color:#fff; font-size:14px; font-weight:600; cursor:pointer;
  font-family:inherit; letter-spacing:.02em;
}
button:hover{background:var(--sage-deep)}
button.ghost{background:transparent; color:var(--sage-deep); border:1px solid var(--line)}
button.ghost:hover{background:var(--sage-wash)}

/* ── 徽标 ───────────────────────────────────────────────────────── */
.badge{
  display:inline-block; padding:2px 10px; border-radius:999px;
  font-size:12px; font-weight:600; line-height:1.7; white-space:nowrap;
}
.badge.none{background:var(--sage-wash); color:var(--sage-deep)}
.badge.low{background:var(--sage-wash); color:var(--sage-deep)}
.badge.medium{background:var(--t2-wash); color:var(--t2)}
.badge.high{background:var(--t3); color:#fff}
.badge.unknown{background:var(--sun-wash); color:var(--t2); border:1px dashed var(--t2)}
.badge.grey{background:var(--line-soft); color:var(--dust)}

/* ── 成长花 ─────────────────────────────────────────────────────── */
.bloom{display:flex; justify-content:center; padding:14px 0 2px}
.bloom svg{width:100%; max-width:560px; height:auto; display:block}
.bloom .petal{opacity:.88; transition:opacity .18s}
.bloom .petal:hover{opacity:1}
.bloom .ghost{opacity:.13}
.bloom .ref{fill:none; stroke:var(--line); stroke-dasharray:3 5}
.bloom .core{fill:var(--card); stroke:var(--line)}
.bloom .corecap{display:none}
.bloom .corenum{fill:var(--ink-soft); font-size:16px; font-weight:700;
  text-anchor:middle; letter-spacing:.06em}
.bloom .corecap{fill:var(--dust); font-size:9.5px; text-anchor:middle; letter-spacing:.14em}
.bloom .plabel{fill:var(--ink); font-size:13px; font-weight:600}
.bloom .pscore{fill:var(--dust); font-size:12px}
.bloomcap{text-align:center; font-size:12.5px; color:var(--dust); margin-top:2px}
@media (max-width:520px){
  /* 窄屏上 svg 被压小，字跟着缩到看不清——把字号顶回去 */
  .bloom .plabel{font-size:15px}
  .bloom .pscore{font-size:14px}
  .bloom .corenum{font-size:23px}
  .bloom .corecap{font-size:11px}
}

/* ── 六个方面：每维独占一行 ─────────────────────────────────────── */
.dimrows{display:grid; gap:2px}
.dimrow{padding:18px 0; border-bottom:1px solid var(--line-soft)}
.dimrow:first-child{padding-top:4px}
.dimrow:last-child{border-bottom:0; padding-bottom:4px}
.dhead{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:10px}
.dhead .dot{width:9px; height:9px; border-radius:50%; flex:none}
.dhead .dname{font-weight:700; font-size:15.5px}
.dhead .dhint{font-size:12.5px; color:var(--dust)}
.dband{
  font-size:12px; font-weight:700; padding:1px 9px; border-radius:999px;
  border:1px solid currentColor; white-space:nowrap;
}
.dtrend{
  display:inline-flex; align-items:center; gap:3px;
  font-size:12px; color:var(--dust); white-space:nowrap;
}
.dtrend.up{color:var(--sage-deep)}
.dtrend.down{color:var(--clay)}

/* 常模刻度条：中线是同龄一般水平，空心点是上次的位置 */
.scale{
  position:relative; height:9px; border-radius:999px;
  background:var(--line-soft); overflow:visible; margin-bottom:7px;
}
.scale i{
  display:block; height:100%; border-radius:999px;
  animation:grow .7s cubic-bezier(.22,1,.36,1) both;
}
.scale .mid{
  position:absolute; left:50%; top:-4px; bottom:-4px; width:1px;
  background:var(--line); z-index:1;
}
.scale .prev{
  position:absolute; top:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border:2px solid var(--dust); border-radius:50%; background:var(--card); z-index:2;
}
.dpos{font-size:12.5px; color:var(--dust); margin-bottom:9px}
.dfind{margin:0; font-size:14px; line-height:1.72; color:var(--ink-soft)}
.dsug{
  display:flex; align-items:flex-start; gap:5px;
  margin-top:7px; font-size:13px; color:var(--sage-deep);
}
.dsug .ic{flex:none; margin-top:3px}

/* ── 实证优势 ───────────────────────────────────────────────────── */
.wins h2{display:flex; align-items:center; gap:7px; color:var(--sage-deep)}
.winlist{display:grid; gap:10px}
.win{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--sage-wash); border-radius:11px; padding:12px 15px;
}
.win .fact{font-size:14.5px; font-weight:500; flex:1; min-width:200px}
.win .res{
  font-size:12px; font-weight:700; color:var(--sage-deep);
  background:var(--card); border-radius:999px; padding:3px 11px; white-space:nowrap;
}

/* ── 伦理提示 ───────────────────────────────────────────────────── */
.ethics{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--sun-wash); border:1px dashed #E3C78A;
  border-radius:12px; padding:13px 16px; margin-bottom:16px;
  font-size:13px; line-height:1.7; color:#7A5A18;
}
.ethics .ic{flex:none; margin-top:3px}
@media (prefers-color-scheme: dark){ .ethics{color:#D9B76A; border-color:#5A4A22} }
.disclaim{font-size:11.5px; color:var(--dust); margin-top:14px; line-height:1.6}

/* ── 家长三件事 ─────────────────────────────────────────────────── */
.pact{list-style:none; padding:0; margin:0; display:grid; gap:11px; counter-reset:pa}
.pact li{display:flex; gap:12px; align-items:flex-start}
.pact .n{
  flex:none; width:23px; height:23px; border-radius:7px;
  background:var(--sage-wash); color:var(--sage-deep);
  font-size:12.5px; font-weight:700; display:grid; place-items:center; margin-top:2px;
}
.pact .what{font-size:14.5px; line-height:1.7}
.pact .sign{
  display:flex; align-items:center; gap:5px; margin-top:3px;
  font-size:12.5px; color:var(--dust);
}
.pact .sign .ic{color:var(--sage); flex:none}

/* ── 标签组/* ── 标签组 ─────────────────────────────────────────────────────── */
.tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.tag{
  font-size:12.5px; padding:4px 12px; border-radius:999px;
  background:var(--line-soft); color:var(--ink-soft);
}
.tag.good{background:var(--sage-wash); color:var(--sage-deep); font-weight:600}
.tag.watch{background:var(--sun-wash); color:#9A6B12; font-weight:600}

/* ── 给孩子 ─────────────────────────────────────────────────────── */
.kid{
  background:linear-gradient(180deg,var(--sage-wash),var(--card) 62%);
  border-color:#DCE8E3;
}
.kid .letter{
  font-family:var(--serif); font-size:17px; line-height:1.95;
  color:var(--ink); margin:0;
}
.kid .letter::first-letter{font-size:1.05em}
.dark-safe{color:var(--ink)}
.todo{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:9px}
.todo li{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--card); border:1px solid var(--line);
  border-radius:11px; padding:12px 14px; font-size:14.5px; font-weight:500;
}
.todo .n{
  flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--sage); color:#fff; font-size:12px; font-weight:700;
  display:grid; place-items:center; margin-top:2px;
}

/* ── 给家长 ─────────────────────────────────────────────────────── */
.plist{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.plist li{display:flex; gap:11px; font-size:14px; line-height:1.7}
.plist .mk{flex:none; font-weight:700; margin-top:1px}
.plist.do .mk{color:var(--sage)}
.plist.dont .mk{color:var(--clay)}
.script{
  font-family:var(--serif); font-size:16px; line-height:1.9;
  border-left:3px solid var(--sage); padding:4px 0 4px 16px; margin:14px 0 0;
  color:var(--ink);
}
.twocol{display:grid; grid-template-columns:1fr 1fr; gap:26px}
@media (max-width:640px){ .twocol{grid-template-columns:1fr; gap:20px} }

/* ── 预警条（报告顶部）───────────────────────────────────────────── */
.alert{
  border-radius:var(--radius); padding:16px 20px; margin-bottom:16px;
  border:1px solid; font-size:14px; line-height:1.72;
}
.alert .hd{display:flex; align-items:center; gap:10px; margin-bottom:5px; font-weight:700}
.alert .lv{font-size:12px; padding:2px 9px; border-radius:999px; color:#fff}
.alert.low{background:var(--sage-wash); border-color:#CBDED6}
.alert.low .lv{background:var(--t1)}
.alert.medium{background:var(--t2-wash); border-color:#F0D6AC}
.alert.medium .lv{background:var(--t2)}
.alert.high{background:var(--t3-wash); border-color:#EEC2B8}
.alert.high .lv{background:var(--t3)}
.alert.unknown{background:var(--sun-wash); border:1px dashed var(--t2)}
.alert.unknown .lv{background:var(--t2)}
.alert .act{margin-top:7px; font-size:13.5px; color:var(--ink-soft)}

/* ── 三级阶梯（预警页）──────────────────────────────────────────── */
.ladder{display:grid; gap:10px; margin:4px 0 2px}
.step{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  border-radius:12px; padding:15px 18px; border:1px solid var(--line);
  background:var(--card);
}
.step .lvl{
  font-weight:700; font-size:13px; color:#fff; padding:3px 11px;
  border-radius:999px; white-space:nowrap;
}
.step .nm{font-weight:700; font-size:15px; margin-bottom:3px}
.step .ai{font-size:13.5px; color:var(--ink-soft)}
.step .ad{font-size:13px; margin-top:3px; font-weight:600}
.step[data-t="low"]{margin-right:64px; background:var(--sage-wash); border-color:#CBDED6}
.step[data-t="low"] .lvl{background:var(--t1)}
.step[data-t="low"] .ad{color:var(--sage-deep)}
.step[data-t="medium"]{margin:0 32px 0 32px; background:var(--t2-wash); border-color:#F0D6AC}
.step[data-t="medium"] .lvl{background:var(--t2)}
.step[data-t="medium"] .ad{color:#9A5A11}
.step[data-t="high"]{margin-left:64px; background:var(--t3-wash); border-color:#EEC2B8}
.step[data-t="high"] .lvl{background:var(--t3)}
.step[data-t="high"] .ad{color:var(--t3)}
@media (max-width:640px){
  .step[data-t="low"],.step[data-t="medium"],.step[data-t="high"]{margin:0}
}
.laddernote{font-size:12.5px; color:var(--dust); margin:0 0 12px}

/* ── 预警事件 ───────────────────────────────────────────────────── */
.event{border-left:4px solid var(--line)}
.event[data-t="low"]{border-left-color:var(--t1)}
.event[data-t="medium"]{border-left-color:var(--t2)}
.event[data-t="high"]{border-left-color:var(--t3)}
.event .quote{
  font-family:var(--serif); font-size:15.5px; line-height:1.85;
  margin:12px 0 10px; color:var(--ink);
}
.event .why{font-size:13px; color:var(--dust); margin-bottom:8px}
.event .todoline{
  background:var(--line-soft); border-radius:10px; padding:11px 14px;
  font-size:13.5px; line-height:1.7;
}
.event .todoline b{color:var(--ink)}
.event .foot{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:13px; font-size:12.5px; color:var(--dust);
}

/* ── 消息流 ─────────────────────────────────────────────────────── */
.msg{
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:11px 14px; margin:9px 0;
}
.msg.user{border-left:3px solid var(--sage)}
.msg.assistant{border-left:3px solid var(--line)}
.msg .who{font-size:12px; font-weight:600; color:var(--dust); margin-bottom:3px}
.msg .t{white-space:pre-wrap; word-break:break-word; font-size:14.5px}
.msg .time{font-size:11.5px; color:var(--dust); margin-top:5px}
.msg.flagged{border-color:var(--t3); border-left-color:var(--t3); background:var(--t3-wash)}
.sess{margin:26px 0 8px; font-size:12.5px; color:var(--dust)}

.prose{white-space:pre-wrap; word-break:break-word}
.err{color:var(--t3); font-size:13.5px}

/* ── 图标与动效 ─────────────────────────────────────────────────── */
.ic{vertical-align:-.14em; flex:none}
button .ic{margin-right:6px; vertical-align:-.18em}
h2 .ic, h3 .ic{margin-right:6px; vertical-align:-.16em; color:var(--sage)}
.audience .ic{color:var(--sage); flex:none}
.alert .hd .ic{flex:none}
.inline-link{display:inline-flex; align-items:center; gap:3px; white-space:nowrap}

button{
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .16s, transform .12s, box-shadow .16s;
  box-shadow:0 1px 2px rgba(42,46,51,.10);
}
button:hover{transform:translateY(-1px); box-shadow:0 3px 10px rgba(42,46,51,.13)}
button:active{transform:translateY(0); box-shadow:0 1px 2px rgba(42,46,51,.10)}
.toolbar{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}

.card{transition:box-shadow .18s}
.todo li, .win{transition:transform .16s, box-shadow .16s}
.todo li:hover, .win:hover{transform:translateX(2px)}

@keyframes grow{from{width:0 !important} }
@keyframes petal{from{opacity:0; transform:scale(.7)} to{opacity:.88; transform:scale(1)}}
.bloom .petal{
  transform-origin:center; opacity:.88;
  animation:petal .55s cubic-bezier(.22,1,.36,1) both;
}
.bloom .pstate{fill:var(--sage-deep); font-size:11.5px; font-weight:600}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
  .bloom .petal{opacity:.88}
  .scale i{animation:none !important}
}