/* ========== Kids Score 样式 ========== */
:root{
  --bg:#f7f8fb; --card:#fff; --fg:#222; --muted:#888; --border:#e3e6ed;
  --primary:#3b82f6; --primary-h:#2563eb; --warn:#ef4444; --warn-h:#dc2626;
  --green:#10b981; --yellow:#f59e0b; --red:#ef4444; --good-bg:#d1fae5; --mid-bg:#fef3c7; --bad-bg:#fee2e2;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--fg); line-height:1.5}
.container{max-width:1000px;margin:0 auto;padding:1.5rem 1rem}
.muted{color:var(--muted)}
.small{font-size:.85rem}

/* topbar */
.topbar{display:flex; align-items:center; gap:1.5rem; padding:.75rem 1.25rem;
  background:#fff; border-bottom:1px solid var(--border); box-shadow:0 1px 2px rgba(0,0,0,.03)}
.topbar .brand{font-weight:700; font-size:1.05rem}
.topbar nav{display:flex; gap:1rem; flex:1}
.topbar nav a{color:var(--fg); text-decoration:none; padding:.25rem .5rem; border-radius:6px}
.topbar nav a:hover{background:#eef2ff; color:var(--primary-h)}
.topbar .user{display:flex; align-items:center; gap:1rem}
.topbar .user .who em{color:var(--muted); font-style:normal; font-size:.85em}

/* buttons */
.btn-primary, .btn-warn, .btn-ghost{
  display:inline-block; padding:.5rem 1rem; border-radius:6px;
  border:none; cursor:pointer; font-size:.95rem; font-weight:500; text-decoration:none}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-h)}
.btn-warn{background:var(--warn); color:#fff}
.btn-warn:hover{background:var(--warn-h)}
.btn-ghost{background:#f1f5f9; color:var(--fg)}
.btn-ghost:hover{background:#e2e8f0}
.small{padding:.2rem .55rem; font-size:.85rem}

/* card */
.card{background:var(--card); border:1px solid var(--border); border-radius:10px;
  padding:1.25rem; margin:1rem 0; box-shadow:0 1px 3px rgba(0,0,0,.03)}
.card h2{margin:0 0 .75rem; font-size:1.1rem}

/* login */
.login-card{max-width:420px; margin:4rem auto; background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:2rem; text-align:center; box-shadow:0 4px 12px rgba(0,0,0,.05)}
.login-card h1{margin:.25rem 0 .5rem}
.login-card .hint{margin:.5rem 0 1rem; font-size:.9rem; color:var(--muted)}
.login-card label{display:block; margin:1rem 0; text-align:left}
.login-card input{width:100%; padding:.6rem .75rem; border:1px solid var(--border); border-radius:6px; font-size:1rem}
.login-card button{width:100%; padding:.7rem; margin-top:1rem}
.alert{background:#fee2e2; color:#991b1b; padding:.5rem .75rem; border-radius:6px; margin:.5rem 0}

/* forms */
form label{display:block; margin:.75rem 0; font-weight:500}
form input[type=number], form input[type=text], form input[type=date], form input[type=password]{
  padding:.5rem .75rem; border:1px solid var(--border); border-radius:6px; font-size:.95rem; margin-top:.25rem}
form input[type=range]{width:100%}
.slider-label{display:block}
.filter{display:flex; gap:.75rem; align-items:flex-end; margin:1rem 0; flex-wrap:wrap}
.filter label{margin:0}

/* tables */
table{width:100%; border-collapse:collapse; margin:1rem 0; background:var(--card);
  border-radius:8px; overflow:hidden; border:1px solid var(--border)}
th, td{padding:.6rem .8rem; text-align:left; border-bottom:1px solid var(--border)}
th{background:#f8fafc; font-weight:600; font-size:.9rem}
td.num, th.num{text-align:right}
table.three td{border:none; padding:.4rem 0}
table.three td.num{font-weight:600}
tbody tr:last-child td{border-bottom:none}
tbody tr.me{background:#eff6ff}

/* pills */
.pill{display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:.85rem; font-weight:600}
.pill.green{background:var(--good-bg); color:#065f46}
.pill.yellow{background:var(--mid-bg); color:#92400e}
.pill.red{background:var(--bad-bg); color:#991b1b}

/* big score */
.big-score{font-size:3.5rem; font-weight:700; margin:.5rem 0; color:var(--primary)}

/* details */
details{margin-top:1rem}
details summary{cursor:pointer}

/* calendar */
.calendar{border-collapse:separate; border-spacing:2px; table-layout:fixed}
.calendar th{background:transparent; text-align:center; padding:.5rem}
.calendar td{vertical-align:top; padding:.5rem; height:90px; border:1px solid var(--border);
  border-radius:6px; background:#fff; position:relative}
.calendar td.empty{background:transparent; border:none}
.calendar td.today{outline:2px solid var(--primary)}
.calendar td.cell-good{background:var(--good-bg)}
.calendar td.cell-mid{background:var(--mid-bg)}
.calendar td.cell-bad{background:var(--bad-bg)}
.calendar td.cell-empty{background:#fff}
.d-num{font-weight:600}
.d-score{font-size:1.25rem; font-weight:700; margin-top:.25rem}
.d-n{font-size:.75rem}
.legend{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem}
.legend span{padding:.2rem .6rem; border-radius:6px; font-size:.85rem; border:1px solid var(--border)}

code{background:#f1f5f9; padding:1px 5px; border-radius:3px; font-size:.9em}

/* ── 6 维度打分 ── */
.dim-table{width:100%; border-collapse:collapse; margin:1rem 0; background:#fff;
  border:1px solid var(--border); border-radius:8px; overflow:hidden}
.dim-table th{background:#f8fafc; padding:.6rem; text-align:center; font-size:.9rem}
.dim-table th:first-child{text-align:left}
.dim-table td{padding:.5rem; border-top:1px solid var(--border)}
.dim-table td.dim-label{padding:.75rem}
.dim-name{display:block; font-weight:500}
.dim-weight{font-size:.8em}
.dim-radio{text-align:center}
.radio-pill{display:inline-flex; align-items:center; gap:.35rem; padding:.4rem .85rem;
  border:2px solid var(--border); border-radius:999px; cursor:pointer;
  transition:all .15s; font-weight:500; min-width:60px; justify-content:center}
.radio-pill:hover{border-color:#94a3b8}
.radio-pill input{display:none}
.radio-pill.good:has(input:checked){background:#d1fae5; border-color:var(--green); color:#065f46}
.radio-pill.ok:has(input:checked){background:#fef3c7; border-color:var(--yellow); color:#92400e}
.radio-pill.bad:has(input:checked){background:#fee2e2; border-color:var(--red); color:#991b1b}

.total-preview{margin:1.5rem 0 1rem; padding:1rem; background:#f8fafc; border-radius:8px; text-align:center}
.score-bar{height:10px; background:#e2e8f0; border-radius:5px; margin-top:.5rem; overflow:hidden}
.score-bar-fill{height:100%; width:0; background:#cbd5e1; transition:width .3s}
.score-bar-fill.green{background:var(--green)}
.score-bar-fill.yellow{background:var(--yellow)}
.score-bar-fill.red{background:var(--red)}
.big-score-mini{font-size:1.25rem; color:var(--primary)}
.note-label{display:block; margin:1rem 0 .5rem}
.note-label input{width:100%; padding:.55rem .75rem; border:1px solid var(--border); border-radius:6px}

table.nested{background:transparent; border:none; box-shadow:none; margin:.5rem 0}
table.nested td{border:none; padding:.3rem .6rem; font-size:.9rem}

/* ── 数据分析 ── */
.insight{display:flex; align-items:center; gap:.75rem; padding:.6rem .9rem; border-radius:8px; margin:.5rem 0}
.insight-icon{font-size:1.3rem}
.insight-warning{background:#fef3c7; color:#92400e; border-left:4px solid var(--yellow)}
.insight-success{background:#d1fae5; color:#065f46; border-left:4px solid var(--green)}
.insight-info{background:#dbeafe; color:#1e3a8a; border-left:4px solid var(--primary)}

.card-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:.75rem; margin:1rem 0}
.dim-card{background:#fff; border:1px solid var(--border); border-radius:10px; padding:1rem;
  border-left:5px solid var(--border); transition:transform .15s}
.dim-card:hover{transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,.06)}
.dim-card.border-green{border-left-color:var(--green)}
.dim-card.border-yellow{border-left-color:var(--yellow)}
.dim-card.border-red{border-left-color:var(--red)}
.dim-card-label{font-size:.9rem; color:var(--muted); margin-bottom:.25rem}
.dim-card-score{margin:.25rem 0}
.dim-card-meta{font-size:.8rem}
.arrow-up{color:var(--green); font-weight:700}
.arrow-down{color:var(--red); font-weight:700}
.arrow-flat{color:var(--muted)}

.chart-wrap{position:relative; height:320px; margin:1rem 0}

table.matrix{margin-top:1rem}
table.matrix td.num{min-width:80px}