/* 儿童AI学习系统 · 家长/管理员面板 样式表
   现代化清爽科技感: 蓝紫渐变 + 卡片 + 图表 + 响应式手机友好
   配色: 深蓝→靛紫主色(#4f46e5/#6366f1), 青紫点缀, 红黄绿状态色
   保留全部既有 class 选择器(login/dashboard/家长/管理员共用), 并新增面板组件样式。
*/
:root {
  --bg-0: #0b1120;
  --bg-1: #111a33;
  --bg-2: #1e1b4b;
  --primary: #6366f1;        /* 靛紫 */
  --primary-2: #8b5cf6;      /* 紫 */
  --accent: #22d3ee;         /* 青 */
  --accent-2: #a78bfa;
  --card-bg: #ffffff;
  --card-border: #e6eaf4;
  --text-main: #1e293b;
  --text-sub: #64748b;
  --text-soft: #94a3b8;
  --red: #ef4444;
  --yellow: #f59e0b;
  --green: #10b981;
  --shadow: 0 10px 30px rgba(23, 37, 84, .12);
  --shadow-soft: 0 4px 16px rgba(23, 37, 84, .08);
  --radius: 18px;
  --radius-sm: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans SC", "Segoe UI", sans-serif;
  color: var(--text-main);
  /* 深色科技感渐变背景。移除原先 anchored 在左/顶边缘的高亮径向渐变——
     那些在宽屏上会形成左侧/顶部一条突兀的深青/紫竖条(家长端截图里的"左侧突兀竖栏")。
     改用柔和、整体性的斜向渐变, 干净不抢眼。 */
  background:
    radial-gradient(1100px 600px at 78% -8%, rgba(139,92,246,.28), transparent 60%),
    linear-gradient(155deg, var(--bg-0) 0%, var(--bg-1) 52%, var(--bg-2) 100%);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 通用组件 ---------- */
.hidden { display: none !important; }

.container { max-width: 1200px; margin: 0 auto; padding: 20px; }

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}
.card h2 { font-size: 17px; margin-bottom: 14px; color: var(--text-main); display: flex; align-items: center; gap: 8px; }
.card h2::before { content: ""; width: 6px; height: 18px; border-radius: 3px; background: linear-gradient(180deg, var(--primary), var(--accent)); }

.card.glass {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
}

/* 渐变主卡片 */
.grad-card {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 45%, var(--accent) 120%);
  color: #fff;
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: 0 14px 34px rgba(99,102,241,.35);
  position: relative; overflow: hidden;
}
.grad-card::after {
  content: ""; position: absolute; right: -40px; top: -50px; width: 180px; height: 180px;
  border-radius: 50%; background: rgba(255,255,255,.14);
}
.grad-card h1, .grad-card h2 { margin: 0 0 6px; font-size: 20px; color:#fff; }
.grad-card p { margin: 0; opacity: .92; font-size: 13px; }
.grad-card.green { background: linear-gradient(135deg,#10b981,#34d399); box-shadow: 0 14px 34px rgba(16,185,129,.3); }
.grad-card.warn { background: linear-gradient(135deg,#f59e0b,#fbbf24); box-shadow: 0 14px 34px rgba(245,158,11,.3); color:#3b2f00; }
.grad-card.danger { background: linear-gradient(135deg,#ef4444,#f87171); box-shadow: 0 14px 34px rgba(239,68,68,.3); }

/* 统计卡片(大数字) */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.stat-card {
  background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius-sm);
  padding: 16px 18px; box-shadow: var(--shadow-soft); position: relative; overflow: hidden;
}
.stat-card .ico { font-size: 22px; margin-bottom: 8px; }
.stat-card .num { font-size: 30px; font-weight: 800; line-height: 1.1; background: linear-gradient(135deg, var(--primary), var(--primary-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-card.green .num { background: linear-gradient(135deg,#10b981,#34d399); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-card.orange .num { background: linear-gradient(135deg,#f59e0b,#fb923c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-card.red .num { background: linear-gradient(135deg,#ef4444,#f87171); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-card .lbl { font-size: 13px; color: var(--text-sub); margin-top: 4px; }

/* 按钮 */
.btn {
  display: inline-block; border: none; border-radius: 12px; padding: 11px 20px;
  font-size: 14px; cursor: pointer; font-family: inherit;
  transition: transform .12s ease, box-shadow .12s ease, opacity .2s;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; font-weight: 600;
  box-shadow: 0 6px 16px rgba(99,102,241,.3);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(99,102,241,.4); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.secondary { background: linear-gradient(135deg,#10b981,#34d399); box-shadow: 0 6px 16px rgba(16,185,129,.3); }
.btn.ghost { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); box-shadow: none; }
.btn.danger { background: linear-gradient(135deg,#ef4444,#f87171); box-shadow: 0 6px 16px rgba(239,68,68,.3); }
.btn.sm { padding: 7px 12px; font-size: 13px; border-radius: 9px; }
.btn.due { background: linear-gradient(135deg,#ef4444,#f87171); box-shadow: 0 6px 16px rgba(239,68,68,.3); margin-left:6px; }

/* 输入框 */
.input, .select, textarea.input {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--card-border);
  border-radius: 12px; font-size: 14px; font-family: inherit;
  background: #f8fafc; color: var(--text-main);
  transition: border-color .2s, box-shadow .2s;
}
.input:focus, .select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,.16);
}
.select { padding: 9px 12px; width: auto; }
textarea.input { resize: vertical; }

/* 状态徽标 */
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; color: #fff; }
.badge.red { background: var(--red); }
.badge.yellow { background: var(--yellow); }
.badge.green { background: var(--green); }
.badge.blue { background: linear-gradient(135deg,var(--primary),var(--accent)); }
.badge.gray { background: #94a3b8; }
.badge.critical { background: linear-gradient(135deg,#b91c1c,#ef4444); }
.badge.warning { background: linear-gradient(135deg,#d97706,#f59e0b); }

.pill { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; }
.pill.red { background:#fee2e2; color:#b91c1c; }
.pill.yellow { background:#fef3c7; color:#b45309; }
.pill.green { background:#d1fae5; color:#047857; }
.pill.blue { background:#dbeafe; color:#1d4ed8; }
.pill.gray { background:#f1f5f9; color:#64748b; }

/* 红黄绿状态点/条 */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.dot.red { background: var(--red); }
.dot.yellow { background: var(--yellow); }
.dot.green { background: var(--green); }

/* 进度条 */
.progress { width:100%; height:10px; border-radius: 8px; background:#eef2f7; overflow:hidden; }
.progress > i { display:block; height:100%; border-radius:8px; transition: width .5s ease; }
.progress.red > i { background: linear-gradient(90deg,#ef4444,#f97316); }
.progress.yellow > i { background: linear-gradient(90deg,#f59e0b,#fbbf24); }
.progress.green > i { background: linear-gradient(90deg,#10b981,#34d399); }
.progress.blue > i { background: linear-gradient(90deg,var(--primary),var(--accent)); }

/* 分段进度(掌握度分布) */
.segbar { display:flex; width:100%; height:12px; border-radius:8px; overflow:hidden; gap:2px; }
.segbar > span { height:100%; }
.segbar .g { background:#10b981; }
.segbar .y { background:#f59e0b; }
.segbar .r { background:#ef4444; }

/* 加载与错误 */
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px; color: var(--text-sub); font-size: 15px; }
.spinner { width: 26px; height: 26px; border: 3px solid rgba(99,102,241,.25); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-box { background: #fdecea; color: var(--red); border: 1px solid #f5c6c0; border-radius: 12px; padding: 16px 18px; margin: 16px 0; }
.error-box .retry { margin-top: 10px; }
.tip, .small-tip { font-size: 13px; color: var(--text-sub); margin-top: 6px; }
.small-tip { font-size: 12px; color: var(--text-soft); }

/* ---------- 页头 ---------- */
.topbar {
  background: linear-gradient(135deg, rgba(17,26,51,.95), rgba(30,27,75,.92));
  backdrop-filter: blur(6px); color:#fff; padding: 0 20px;
  position: sticky; top:0; z-index:100; box-shadow: 0 2px 16px rgba(0,0,0,.25);
}
.topbar-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; min-height:60px; flex-wrap:wrap; gap:8px; }
.brand { display:flex; align-items:center; gap:10px; font-size:17px; font-weight:700; }
.brand .logo { width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,var(--primary),var(--accent)); display:flex; align-items:center; justify-content:center; font-size:18px; }
.brand small { font-weight:400; opacity:.7; font-size:12px; display:block; }
.top-actions { display:flex; align-items:center; gap:8px; }
.avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--primary-2),var(--accent)); display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff; font-weight:700; }

/* 页脚 */
.footer { text-align:center; color:rgba(255,255,255,.55); font-size:12px; padding:26px 10px 34px; }

/* ---------- 家长端导航(移动优先, 蓝紫胶囊/玻璃风) ---------- */
.ptop {
  display:flex; align-items:center; justify-content:space-between; padding:12px 16px;
  position:sticky; top:0; z-index:12; color:#fff;
  background: linear-gradient(135deg, rgba(11,17,32,.92), rgba(30,27,75,.9));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(2,6,20,.35);
}
.ptop .brand { gap:9px; font-weight:700; letter-spacing:.3px; }
.ptop .brand small { display:block; font-weight:400; font-size:11px; opacity:.8; margin-top:2px; }
.ptop .act { display:flex; gap:8px; align-items:center; }
.ptop .ava {
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg,var(--primary-2),var(--accent));
  display:flex; align-items:center; justify-content:center; font-weight:700;
  box-shadow:0 2px 10px rgba(139,92,246,.5); border:1.5px solid rgba(255,255,255,.25);
}
/* 退出: 玻璃胶囊, 清晰独立放角落, 不跟功能项混 */
.logout-btn.btn {
  display:inline-flex; align-items:center; gap:5px;
  color:#fff !important; border:1.5px solid rgba(255,255,255,.28) !important;
  background:rgba(255,255,255,.08); backdrop-filter:blur(4px);
  border-radius:20px; padding:6px 13px; font-size:13px; font-weight:600;
  transition:.15s; margin:0;
}
.logout-btn.btn:hover { background:rgba(239,68,68,.28); border-color:rgba(248,113,113,.6) !important; }
.logout-btn .lg-ico { font-size:14px; line-height:1; }
.logout-btn .lg-txt { line-height:1; }

/* 主导航: 桌面=居中优雅胶囊; 移动=横向滑动胶囊不拥挤 */
.pnav {
  position:sticky; top:56px; z-index:11;
  display:flex; align-items:center; justify-content:center;
  gap:6px; padding:10px 12px;
  background: rgba(255,255,255,.06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
  overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity;
}
.pnav::-webkit-scrollbar { display:none; }
.pnav button {
  display:inline-flex; align-items:center; gap:7px;
  white-space:nowrap; padding:8px 16px; border:none; background:transparent;
  border-radius:24px; color:#cbd5e1; font-size:14px; cursor:pointer; font-family:inherit;
  transition:background .15s ease, color .15s ease, transform .12s ease, box-shadow .2s ease;
  scroll-snap-align:center; flex:none;
}
.pnav button .n-ico { font-size:16px; line-height:1; filter:saturate(1.1); }
.pnav button .n-txt { line-height:1; }
.pnav button:hover { background:rgba(255,255,255,.1); color:#fff; transform:translateY(-1px); }
.pnav button.active {
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff; font-weight:600;
  box-shadow:0 6px 18px rgba(99,102,241,.45), inset 0 1px 0 rgba(255,255,255,.22);
  transform:translateY(-1px);
}
.pnav button.active .n-ico { transform:scale(1.08); }

.wrap { max-width:860px; margin:0 auto; padding:16px; }

/* 孩子选择卡片 */
.cgrid { display:grid; gap:14px; }
.cmini { background:#fff; border:1px solid var(--card-border); border-radius:var(--radius); padding:16px 18px; cursor:pointer; transition:.15s; box-shadow:var(--shadow-soft); }
.cmini:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.cmini .ctop { display:flex; justify-content:space-between; align-items:center; }
.cmini .cname { font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; }

/* 预警横幅 */
.alert-banner {
  border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:14px;
  display:flex; gap:12px; align-items:flex-start; font-size:14px;
}
.alert-banner.critical { background:linear-gradient(135deg,#fef2f2,#fee2e2); border:1px solid #fecaca; color:#991b1b; }
.alert-banner.warning { background:linear-gradient(135deg,#fffbeb,#fef3c7); border:1px solid #fde68a; color:#92400e; }
.alert-banner .ab-ico { font-size:20px; }
.alert-banner b { display:block; margin-bottom:2px; }
.alert-banner p { font-size:13px; opacity:.9; }

.weak-chip { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:12px; background:#f1f5f9; font-size:13px; margin:4px 4px 0 0; }

.empty-note { text-align:center; color:var(--text-soft); padding:34px 16px; }

/* 表单 */
.form-msg { font-size:13px; margin-top:12px; min-height:20px; }
.form-msg.ok { color: var(--green); }
.form-msg.err { color: var(--red); }
.field { margin-bottom:12px; }
.field label { display:block; font-size:13px; margin-bottom:6px; color:var(--text-sub); }
.grid-form { display:grid; gap:10px; }
.grid-form.inline { grid-template-columns:1fr 1fr auto; align-items:end; }

/* 表格 */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:11px 12px; border-bottom:1px solid #eef2f7; }
th { color:var(--text-sub); font-weight:600; font-size:13px; background:#f8fafc; }
tr:hover td { background:#f8fafc; }

/* 知识点卡片 */
.kp-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.kp-card { background:#fbfdff; border:1px solid var(--card-border); border-radius:var(--radius-sm); padding:14px; border-top:4px solid #ccc; box-shadow:var(--shadow-soft); }
.kp-card.red { border-top-color:var(--red); }
.kp-card.yellow { border-top-color:var(--yellow); }
.kp-card.green { border-top-color:var(--green); }
.kp-card .kp-name { font-weight:700; font-size:15px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.kp-card .kv { font-size:13px; color:var(--text-sub); display:flex; justify-content:space-between; padding:2px 0; }
.group-counts { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.kp-tag { font-size:12px; border-radius:8px; padding:4px 10px; }
.kp-tag.red { background:#fdecea; color:var(--red); }
.kp-tag.yellow { background:#fef5e7; color:#b97409; }
.kp-tag.green { background:#eafaf1; color:#1e9e5a; }

/* 图表容器 */
.chart-box { height:200px; position:relative; }
.chart-box.tall { height:240px; }

/* 日历归组 */
.calendar-day { margin-bottom:14px; }
.calendar-day .day-label { font-size:13px; font-weight:700; color:var(--primary); margin-bottom:6px; border-bottom:1px dashed var(--card-border); padding-bottom:4px; }
.calendar-day ul { list-style:none; }
.calendar-day li { padding:4px 0; font-size:14px; }

/* 管理员端 */
.admin-wrap { max-width:1200px; margin:0 auto; padding:20px 16px 70px; }
.admin-nav { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 24px; }
.admin-nav button { padding:9px 16px; border-radius:20px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); cursor:pointer; font-size:14px; color:#e2e8f0; font-family:inherit; transition:.15s; }
.admin-nav button:hover { background:rgba(255,255,255,.16); }
.admin-nav button.active { background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff; border-color:transparent; box-shadow:0 4px 14px rgba(99,102,241,.4); }
.admin-section { display:none; }
.admin-section.active { display:block; }
.page-title { color:#fff; margin-bottom:18px; }
.page-title h2 { font-size:22px; }
.page-title p { font-size:13px; opacity:.85; margin-top:4px; }
.mono { font-family:ui-monospace, Menlo, Consolas, monospace; word-break:break-all; }
.assign-row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:8px 0; border-bottom:1px dashed var(--card-border); }
.config-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }

/* 报警规则卡片 */
.rule-card { border:1px solid var(--card-border); border-radius:var(--radius-sm); padding:16px; margin-bottom:12px; background:#fff; box-shadow:var(--shadow-soft); }
.rule-card .rtop { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.rule-switch { position:relative; width:46px; height:26px; flex:none; }
.rule-switch input { opacity:0; width:0; height:0; }
.rule-switch .slider { position:absolute; inset:0; background:#cbd5e1; border-radius:20px; transition:.2s; cursor:pointer; }
.rule-switch .slider::before { content:""; position:absolute; left:3px; top:3px; width:20px; height:20px; background:#fff; border-radius:50%; transition:.2s; }
.rule-switch input:checked + .slider { background:linear-gradient(135deg,var(--primary),var(--primary-2)); }
.rule-switch input:checked + .slider::before { transform:translateX(20px); }

/* CDK / 代码块 */
.cdk-code { background:#f0f6ff; border:1.5px dashed var(--primary); border-radius:12px; padding:14px; text-align:center; font-family:"SFMono-Regular",Consolas,monospace; font-size:18px; color:var(--bg-1); margin-top:12px; letter-spacing:1px; }

/* ---------- 登录/注册页 ---------- */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-card { width:100%; max-width:430px; background:var(--card-bg); border-radius:22px; box-shadow:0 20px 54px rgba(6,20,38,.4); overflow:hidden; }
.auth-head { padding:30px 30px 20px; background:linear-gradient(135deg,var(--bg-1),var(--bg-2) 55%,var(--primary)); color:#fff; text-align:center; }
.auth-head h1 { font-size:22px; font-weight:700; }
.auth-head p { font-size:13px; opacity:.85; margin-top:6px; }
.auth-tabs { display:flex; background:#eef2fa; border-bottom:1px solid var(--card-border); }
.auth-tab { flex:1; border:none; background:transparent; padding:14px; font-size:15px; cursor:pointer; font-family:inherit; color:var(--text-sub); border-bottom:3px solid transparent; }
.auth-tab.active { color:var(--primary); font-weight:700; border-bottom-color:var(--primary); background:#fff; }
.auth-body { padding:26px 30px 30px; }
.auth-body .field { margin-bottom:16px; }
.auth-body label { display:block; font-size:13px; margin-bottom:6px; color:var(--text-sub); }
.auth-body .btn { width:100%; }
.code-row { display:flex; gap:10px; }
.code-row .input { flex:1; }
.code-row .btn { width:auto; white-space:nowrap; padding:11px 14px; }
.link-home { text-align:center; margin-top:14px; font-size:13px; }
.link-home a { color:var(--primary); text-decoration:none; }

/* 兼容旧 dashboard.html 组件 */
.dash-hero { background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff; border-radius:var(--radius); padding:22px; margin-bottom:18px; }
.hero { background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff; border-radius:var(--radius); padding:22px; margin-bottom:16px; }
.hero h1 { margin:0 0 4px; font-size:20px; } .hero p { margin:0; opacity:.9; font-size:13px; }
.grid { display:grid; gap:18px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:rgba(255,255,255,.97); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow-soft); margin-bottom:18px; }
.toolbar label { font-size:14px; color:var(--text-sub); }
.toolbar .input, .toolbar .select { width:auto; min-width:180px; }
.chart-box-alt { height:210px; position:relative; }
.mastery-counts { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.mcount { flex:1; min-width:72px; border-radius:10px; padding:8px 6px; text-align:center; color:#fff; font-size:13px; }
.mcount b { display:block; font-size:20px; }
.mcount.red { background:linear-gradient(135deg,var(--red),#f87171); }
.mcount.yellow { background:linear-gradient(135deg,var(--yellow),#fbbf24); }
.mcount.green { background:linear-gradient(135deg,var(--green),#34d399); }
.health-card { text-align:center; padding:24px; }
.health-ico { font-size:40px; }
.health-status { font-weight:700; font-size:16px; margin-top:6px; }
.health-status.ok { color:var(--green); }
.health-status.bad { color:var(--red); }
.health-meta { font-size:13px; color:var(--text-sub); margin-top:8px; }
.empty { text-align:center; color:var(--text-sub); padding:40px 10px; font-size:15px; }
.empty .emoji { font-size:34px; display:block; margin-bottom:10px; }
.calendar-day li .act { display:inline-block; margin-left:10px; font-size:12px; color:var(--text-sub); }
.child-card { position:relative; overflow:hidden; }
.child-card .head { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.child-avatar { width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,var(--primary-2),var(--primary)); color:#fff; font-size:24px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; }
.child-meta h3 { font-size:18px; }
.child-meta .grade { font-size:13px; color:var(--text-sub); }
.child-stats { display:flex; gap:10px; margin:6px 0 14px; flex-wrap:wrap; }
.stat-chip { background:#f2f7fb; border-radius:10px; padding:6px 12px; font-size:13px; color:var(--text-sub); }
.stat-chip b { color:var(--text-main); }
.subject-group { margin-bottom:22px; }
.subject-group h3 { font-size:16px; margin-bottom:12px; padding-left:10px; border-left:4px solid var(--primary); color:var(--text-main); }

/* ---- 复述评估(讲完题后孩子复述思路, 验证真懂/假懂) ---- */
.retell-line { align-items:center; }
.retell-dist { display:flex; gap:8px; font-size:12px; }
.retell-dist .r-correct { color:var(--green); font-weight:600; }
.retell-dist .r-partial { color:var(--yellow); font-weight:600; }
.retell-dist .r-wrong { color:var(--red); font-weight:600; }
.retell-overview { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; font-size:13px; }
.retell-overview .pill-sm { padding:2px 8px; border-radius:20px; font-size:12px; font-weight:500; }
.retell-overview .pill-sm.c { background:rgba(16,185,129,.12); color:var(--green); }
.retell-overview .pill-sm.p { background:rgba(245,158,11,.12); color:var(--yellow); }
.retell-overview .pill-sm.w { background:rgba(239,68,68,.12); color:var(--red); }

/* ---------- 响应式 ---------- */
@media (max-width: 992px) { .grid-3, .grid-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; }
  .topbar-inner { flex-direction:column; padding:12px 0; }
  .toolbar .input, .toolbar .select { width:100%; min-width:0; }
  .toolbar { align-items:stretch; flex-direction:column; }
  .code-row { flex-direction:column; }
  .code-row .btn { width:100%; }
  .auth-body { padding:20px; }
  .child-card .head { flex-wrap:wrap; }
  .grid-form.inline { grid-template-columns:1fr; }
  .stat-grid { grid-template-columns:repeat(2,1fr); }
  .wrap { padding:12px; }
  .card { padding:16px; }
  /* 移动端: 顶部横向滑动胶囊, 不拥挤, 拇指好点 */
  .ptop { padding:10px 12px; }
  .ptop .brand { font-size:15px; }
  .pnav { top:54px; justify-content:flex-start; padding:8px 10px; gap:8px; }
  .pnav button { padding:9px 15px; gap:6px; font-size:13.5px; }
  .pnav button .n-ico { font-size:17px; }
  .logout-btn.btn { padding:6px 11px; }
  .logout-btn.btn .lg-txt { display:none; }
  .logout-btn.btn .lg-ico { font-size:16px; }
}