/* ===== 成长驾驶舱 v2 设计系统 ===== */
:root{
  --bg:#f4f6fa; --panel:#ffffff; --line:#e3e9f2;
  --ink:#16273c; --ink2:#5c7391; --ink3:#8ba1bb;
  --brand:#0891b2; --brand2:#2563eb; --grad:linear-gradient(135deg,#0891b2,#2563eb);
  --ok:#16a34a; --warn:#d97706; --bad:#dc2626;
  --r:14px; --shadow:0 6px 24px rgba(30,58,95,.08);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:15px; line-height:1.55}
button{font-family:inherit}

/* ---- 角色入口 ---- */
.gate{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:linear-gradient(160deg,#eef2f8,#e3ecf6)}
.gate-box{background:#fff; border:1px solid var(--line); border-radius:22px; padding:34px 30px;
  width:min(400px,94vw); text-align:center; box-shadow:0 14px 44px rgba(30,58,95,.14)}
.gate-logo{width:54px; height:54px; border-radius:15px; margin:0 auto 10px; background:var(--grad);
  color:#fff; font-size:26px; display:flex; align-items:center; justify-content:center}
.gate-box h1{font-size:20px; margin:0}
.gate-sub{color:var(--ink2); font-size:13px; margin:4px 0 18px}
.gate-roles{display:flex; gap:12px}
.role-card{flex:1; border:1.5px solid var(--line); border-radius:16px; padding:18px 8px; cursor:pointer;
  background:#fbfcfe; display:flex; flex-direction:column; gap:4px; transition:.15s}
.role-card:active{transform:scale(.97)}
.role-emoji{font-size:34px}
.role-name{font-weight:700; font-size:16px}
.role-desc{font-size:12px; color:var(--ink3)}
.role-mom:active,.role-mom.on{border-color:var(--brand2); background:#eff6ff}
.role-kid:active,.role-kid.on{border-color:var(--brand); background:#ecfeff}
.gate-pass{margin-top:16px}
.gate-pass input{width:100%; padding:12px 14px; font-size:16px; border:1.5px solid #c3d2e4;
  border-radius:12px; outline:none; text-align:center; letter-spacing:4px}
.gate-err{color:var(--bad); font-size:13px; min-height:18px; margin-top:8px}
.sync-badge{font-size:11.5px; color:var(--ink3); margin:14px 0 0}

/* ---- 通用 ---- */
.btn{border:none; border-radius:11px; padding:10px 16px; font-size:14.5px; font-weight:600; cursor:pointer}
.btn.primary{background:var(--grad); color:#fff}
.btn.ghost{background:#eef2f8; color:var(--ink2)}
.btn.danger{background:#fee2e2; color:var(--bad)}
.btn.sm{padding:6px 12px; font-size:13px}
.btn.block{width:100%}
.btn:active{filter:brightness(.95)}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px; margin-bottom:14px; box-shadow:var(--shadow)}
.card h3{margin:0 0 10px; font-size:15px}
.card .hint{color:var(--ink3); font-size:12.5px}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.spread{justify-content:space-between}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.pill{display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:600}
.pill.b{background:#dbeafe; color:#1d4ed8}
.pill.g{background:#dcfce7; color:#15803d}
.pill.o{background:#fef3c7; color:#b45309}
.pill.r{background:#fee2e2; color:#b91c1c}
.pill.gr{background:#e5e7eb; color:#4b5563}
.muted{color:var(--ink2)} .tiny{font-size:12px; color:var(--ink3)}
input,select,textarea{font-family:inherit; font-size:15px; padding:10px 12px; border:1.5px solid #c3d2e4;
  border-radius:11px; outline:none; background:#fff; width:100%}
input:focus,textarea:focus,select:focus{border-color:var(--brand)}
label.f{display:block; font-size:12.5px; color:var(--ink2); margin:10px 0 4px; font-weight:600}
.empty{color:var(--ink3); text-align:center; padding:26px 0; font-size:13.5px}

/* ---- 布局 ---- */
.topbar{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); padding:12px 16px; display:flex; align-items:center; justify-content:space-between}
.topbar-title{font-weight:700; font-size:16px; display:flex; gap:8px; align-items:center}
.tb-date{font-size:12px; color:var(--ink3)}
.nav{display:flex; gap:4px; padding:8px 12px; overflow-x:auto; background:#fff; border-bottom:1px solid var(--line);
  position:sticky; top:49px; z-index:19}
.nav::-webkit-scrollbar{display:none}
.nav button{flex-shrink:0; border:none; background:transparent; padding:7px 13px; border-radius:999px;
  font-size:13.5px; color:var(--ink2); cursor:pointer; font-weight:600}
.nav button.on{background:var(--grad); color:#fff}
.view{max-width:860px; margin:0 auto; padding:16px 16px 80px}
.view.kid{max-width:640px}

/* ---- 概览指标 ---- */
.metric{text-align:center; padding:14px 6px; border-radius:12px; background:#f8fafd; border:1px solid var(--line)}
.metric .num{font-size:26px; font-weight:800; color:var(--brand2)}
.metric .lbl{font-size:12px; color:var(--ink2)}
.bar{height:8px; background:#eef2f8; border-radius:99px; overflow:hidden; margin-top:6px}
.bar i{display:block; height:100%; background:var(--grad); border-radius:99px}

/* ---- 任务/列表项 ---- */
.item{display:flex; gap:12px; align-items:flex-start; padding:13px 4px; border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:none}
.check{width:26px; height:26px; min-width:26px; border-radius:50%; border:2px solid #c3d2e4; background:#fff;
  cursor:pointer; margin-top:2px; display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff}
.check.on{background:var(--ok); border-color:var(--ok)}
.item .body{flex:1}
.item .t{font-weight:600}
.item.done .t{color:var(--ink3); text-decoration:line-through}
.item .meta{font-size:12px; color:var(--ink3); margin-top:2px}

/* ---- 孩子端 ---- */
.kid .card{border-radius:18px; padding:18px}
.kid-task{display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:16px; margin-bottom:12px; box-shadow:var(--shadow)}
.kid-task .check{width:34px; height:34px; min-width:34px; font-size:18px}
.kid-task .t{font-size:17px; font-weight:700}
.kid-task.done{opacity:.55}
.teachers{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.teacher{border:1.5px solid var(--line); border-radius:18px; padding:20px 10px; text-align:center; cursor:pointer; background:#fbfcfe}
.teacher:active{transform:scale(.97)}
.teacher .em{font-size:34px; display:block}
.teacher .nm{font-weight:700; margin-top:6px; display:block}
.teacher .st{font-size:11.5px; color:var(--ink3)}
.streak{background:var(--grad); color:#fff; border-radius:18px; padding:18px; margin-bottom:14px}
.streak .big{font-size:30px; font-weight:800}
.ring{--p:0; width:86px; height:86px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:conic-gradient(var(--brand2) calc(var(--p)*1%), #e8eef6 0); margin:0 auto}
.ring i{width:66px; height:66px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center;
  font-style:normal; font-weight:800; font-size:17px; color:var(--brand2)}

/* ---- 表格 ---- */
table.tb{width:100%; border-collapse:collapse; font-size:13.5px}
.tb th{color:var(--ink3); font-weight:600; text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); white-space:nowrap}
.tb td{padding:8px; border-bottom:1px solid #eef2f8}
.tb tr:last-child td{border-bottom:none}

/* ---- 弹窗 / Toast ---- */
.modal-mask{position:fixed; inset:0; background:rgba(22,39,60,.45); z-index:50; display:flex; align-items:center; justify-content:center; padding:16px}
.modal{background:#fff; border-radius:18px; padding:22px; width:min(480px,94vw); max-height:86vh; overflow-y:auto}
.modal h3{margin:0 0 12px}
.toast{position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(20px); background:#16273c; color:#fff;
  padding:10px 20px; border-radius:999px; font-size:14px; opacity:0; transition:.25s; z-index:99; pointer-events:none; max-width:90vw}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0)}

@media (max-width:560px){ .grid3{grid-template-columns:1fr 1fr 1fr} .teachers{grid-template-columns:1fr 1fr} }

/* ---- 课程表网格 ---- */
table.tt{min-width:720px; table-layout:fixed}
.tt .slotcell{width:104px; color:var(--ink2); font-weight:700; font-size:12.5px; white-space:nowrap;
  background:#f8fafd; border-right:1px solid var(--line); position:sticky; left:0; z-index:1}
.tt th.slotcell{background:#f8fafd}
.tt th{text-align:center !important; font-size:13px; padding:8px 4px}
.tt td.course-cell{vertical-align:top; padding:5px 4px; border-right:1px solid #f1f5fa; min-height:34px}
.tt td.is-today{background:#f5f9ff}
.tt th.is-today{color:var(--brand2)}
.tt .chip{font-size:12.5px; line-height:1.35; padding:5px 7px; border-radius:8px; margin-bottom:4px;
  cursor:pointer; border:1px solid transparent; word-break:break-word}
.tt .chip-in{background:#e8f2ff; color:#1d4ed8; border-color:#d3e4ff}
.tt .chip-out{background:#fff3e6; color:#b45309; border-color:#ffe0bd}
.tt .chip:active{opacity:.7}