/* ===========================================================
   知途 · 设计令牌与共享组件（落地页 + 应用共用，单一数据源）
   双皮肤：默认浅色；[data-theme="dark"] 深色。
   品牌：可信蓝(主) + 温暖琥珀(点缀) + 进步绿。面向家长，专业温暖。
   =========================================================== */

:root{
  /* 背景与表面 */
  --bg:#f5f8fd; --surface:#ffffff; --card:#ffffff; --card-2:#f3f6fc;
  /* 文字 */
  --ink:#16203a; --ink2:#566080; --ink3:#8a93ab;
  --line:#e7ecf6;
  /* 品牌色 */
  --brand:#3b6cf6; --brand-2:#5b8bff; --on-brand:#ffffff; --brand-soft:#eaf0ff;
  --accent:#f59e0b; --accent-soft:#fff6e6;          /* 温暖琥珀 */
  --success:#16a34a; --success-soft:#e9faf0;        /* 进步绿 */
  --warn:#ef6c3a; --warn-soft:#fff1eb;
  --root:#e8920c; --root-soft:#fff6e3;              /* 溯源根因 */
  /* 阴影与渐变 */
  --shadow:0 6px 24px rgba(40,60,120,.08);
  --shadow-lg:0 18px 50px rgba(40,60,120,.16);
  --grad-brand:linear-gradient(135deg,#4a7bff 0%,#3b6cf6 100%);
  --grad-hero:radial-gradient(120% 120% at 80% 0%, #eaf0ff 0%, #f5f8fd 55%);
  --radius:16px; --radius-sm:12px; --radius-lg:22px;
}

[data-theme="dark"]{
  --bg:#0e1322; --surface:#151d31; --card:#19223a; --card-2:#10182a;
  --ink:#e7ecf7; --ink2:#9aa6c3; --ink3:#6c7798;
  --line:#28324d;
  --brand:#6f93ff; --brand-2:#88a6ff; --on-brand:#0c1326; --brand-soft:rgba(111,147,255,.16);
  --accent:#f6b53c; --accent-soft:rgba(246,160,60,.16);
  --success:#34d39a; --success-soft:rgba(52,211,153,.16);
  --warn:#ff8a5c; --warn-soft:rgba(255,122,69,.16);
  --root:#f6b53c; --root-soft:rgba(246,160,60,.16);
  --shadow:0 6px 24px rgba(0,0,0,.45);
  --shadow-lg:0 20px 56px rgba(0,0,0,.55);
  --grad-brand:linear-gradient(135deg,#5b82ff 0%,#3b6cf6 100%);
  --grad-hero:radial-gradient(120% 120% at 80% 0%, #18233e 0%, #0e1322 55%);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",system-ui,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.6;
  transition:background .3s ease,color .3s ease;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* 容器 */
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.phone{max-width:430px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;cursor:pointer;font-weight:700;font-size:15px;border-radius:13px;
  padding:13px 22px;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
  font-family:inherit}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--grad-brand);color:#fff;box-shadow:0 8px 22px rgba(59,108,246,.32)}
.btn-primary:hover{box-shadow:0 12px 28px rgba(59,108,246,.42)}
.btn-ghost{background:var(--card);color:var(--brand);border:1px solid var(--line);box-shadow:var(--shadow)}
.btn-ghost:hover{border-color:var(--brand)}
.btn-block{display:flex;width:100%}

/* 卡片 / 徽章 */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);transition:background .3s,border-color .3s}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  padding:4px 10px;border-radius:8px}
.badge-brand{background:var(--brand-soft);color:var(--brand)}
.badge-accent{background:var(--accent-soft);color:var(--accent)}
.badge-success{background:var(--success-soft);color:var(--success)}

/* 主题切换按钮 */
.theme-toggle{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);
  background:var(--card);color:var(--ink2);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.2s}
.theme-toggle:hover{color:var(--brand);border-color:var(--brand)}
.theme-toggle svg{width:19px;height:19px}
.icon-sun{display:none}
[data-theme="dark"] .icon-sun{display:block}
[data-theme="dark"] .icon-moon{display:none}

/* 通用 SVG 图标尺寸 */
.ico{width:22px;height:22px;flex-shrink:0}
.ico-sm{width:18px;height:18px}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto}
}