/* ===== 孩子端 H5 统一设计语言 ===== */
:root{
  /* 主色 */
  --primary:#5b7cfa;
  --primary-2:#7b8ffc;
  --primary-deep:#4a63e0;
  --grad-main:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  --grad-blue:linear-gradient(135deg,#5b7cfa 0%,#8b5cf6 100%);
  --grad-green:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);
  --grad-orange:linear-gradient(135deg,#f59e0b 0%,#f97316 100%);
  --grad-pink:linear-gradient(135deg,#ec4899 0%,#f43f5e 100%);
  --grad-cyan:linear-gradient(135deg,#06b6d4 0%,#3b82f6 100%);

  /* 语义色 */
  --success:#22c55e; --warning:#f59e0b; --danger:#ef4444;
  --info:#3b82f6; --gray:#8a94a3; --gray-light:#cbd5e1;
  --text:#2b3440; --text-sub:#6b7a90;

  /* 背景与卡片 */
  --bg:#f3f5fb;
  --card:#ffffff;
  --shadow:0 6px 20px rgba(80,90,180,.08);
  --shadow-sm:0 2px 8px rgba(80,90,180,.06);
  --radius:16px;
  --radius-sm:12px;
  --radius-lg:20px;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;-webkit-tap-highlight-color:transparent}
body{background:var(--bg);color:var(--text);max-width:480px;margin:0 auto;padding-bottom:84px;min-height:100vh}
a{text-decoration:none;color:inherit}

/* ===== 顶栏 ===== */
.topbar{background:var(--grad-main);color:#fff;padding:18px 18px 22px;border-radius:0 0 24px 24px;position:sticky;top:0;z-index:10;box-shadow:0 4px 16px rgba(70,80,180,.18)}
.topbar .back{display:inline-flex;align-items:center;gap:4px;font-size:13px;opacity:.95;margin-bottom:8px}
.topbar h1{font-size:20px;font-weight:700;letter-spacing:.5px}
.topbar .sub{font-size:12px;opacity:.9;margin-top:3px}

/* ===== 卡片 ===== */
.card{background:var(--card);border-radius:var(--radius);padding:16px;margin:12px;box-shadow:var(--shadow-sm)}
.card h2{font-size:15px;font-weight:700;color:var(--text);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.card h2 .hint{margin-left:auto;font-size:11px;color:var(--gray);font-weight:400}
.sec-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--text);margin:16px 12px 8px}
.sec-title::before{content:'';width:4px;height:16px;border-radius:2px;background:var(--grad-main)}

/* ===== 按钮 ===== */
.btn{display:block;width:calc(100% - 24px);margin:12px auto;padding:13px;border:none;border-radius:var(--radius-sm);background:var(--grad-blue);color:#fff;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 4px 12px rgba(91,124,250,.25);transition:transform .12s,opacity .2s}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.55;box-shadow:none;cursor:default}
.btn.small{width:auto;display:inline-block;padding:8px 16px;font-size:13px;margin:0;box-shadow:none}
.btn.gray{background:#c3cede;color:#fff;box-shadow:none}
.btn.green{background:var(--grad-green);box-shadow:0 4px 12px rgba(34,197,94,.25)}
.btn.orange{background:var(--grad-orange);box-shadow:0 4px 12px rgba(245,158,11,.25)}
.btn.ghost{background:#fff;color:var(--primary);border:1.5px solid var(--primary);box-shadow:none}

/* ===== 底部导航 ===== */
.tabbar{position:fixed;bottom:0;left:0;right:0;max-width:480px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid #eef1f7;box-shadow:0 -2px 16px rgba(80,90,180,.06);z-index:30;padding:8px 8px 10px}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border-radius:12px;color:var(--text-sub);font-size:11px;transition:color .15s}
.tabbar a .ico{font-size:20px;line-height:1}
.tabbar a .nm{font-size:11px}
.tabbar a.on{color:var(--primary);font-weight:700}
.tabbar a.on .ico{transform:translateY(-1px)}

/* ===== 状态横幅 ===== */
.banner{margin:12px;padding:12px 14px;border-radius:var(--radius-sm);font-size:13px;display:flex;align-items:center;gap:8px}
.banner.warn{background:linear-gradient(135deg,#fff7e0,#fff8e8);border:1px solid #f0d9a8;color:#7a5b12}
.banner.danger{background:linear-gradient(135deg,#ffeceb,#fff1ee);border:1px solid #f5c6c2;color:#b23a37}
.banner.success{background:linear-gradient(135deg,#e8f9ef,#f0fbf4);border:1px solid #c4ecd4;color:#1c7c43}

/* ===== 任务列表 ===== */
.task{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #f0f3f9}
.task:last-child{border-bottom:none}
.task .tag{flex-shrink:0;font-size:11px;padding:4px 10px;border-radius:8px;color:#fff;font-weight:600}
.tag-wrong{background:var(--danger)} .tag-weak{background:var(--warning)} .tag-plan{background:var(--info)}
.task .t{flex:1;font-size:14px;line-height:1.5}

/* ===== 表单 ===== */
input,select,textarea{padding:10px 12px;border:1.5px solid var(--gray-light);border-radius:10px;font-size:14px;width:100%;background:#fff;outline:none;transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:var(--primary)}

/* ===== 空态 ===== */
.empty{color:var(--gray);text-align:center;padding:24px;font-size:13px}
.empty .big{font-size:34px;display:block;margin-bottom:8px}

/* ===== 工具 ===== */
.badge{display:inline-block;padding:3px 10px;border-radius:10px;font-size:11px;color:#fff;font-weight:600}
.b-熟练{background:var(--success)} .b-掌握{background:var(--info)} .b-欠佳{background:var(--warning)} .b-薄弱{background:var(--danger)}
.back{display:inline-flex;align-items:center;gap:4px;color:var(--primary);text-decoration:none;margin:14px 0 4px;font-size:14px;font-weight:500}