/* ================================================================
   全站卡片皮肤 v2 · 2026-09-22
   ----------------------------------------------------------------
   🔴 本文件只管「形」，不管「色」。
   第一版我把各页的配色和字体一起换成了首页那套蓝白黑体，Brian 当场否掉。
   他是对的，两条硬依据：
     ① 官网配色是 2026-09-04 他本人用 60-30-10 定的：60% 浅底 · 30% 蓝
        （区块/卡片/导航）· 10% 橙（按钮/链接/小标签）。橙色就是那 10% 的
        「抱枕」——把它刷成蓝，等于把抱枕刷成墙的颜色，整页就平了。
        规范正文：Vault《规范优先_跨领域借规则_方法》。
     ② 2026-09-20 官网刚做过一次体检，结论是「零改动」，且白纸黑字写着
        about 那张「给家长的问题」卡是有意设计、别去"统一"掉。我正好统一掉了。
   ----------------------------------------------------------------
   本文件里：
     ✅ 允许改：圆角、阴影、内外边距、留白、行距、把散段包成卡、标签做成胶囊形
     ❌ 一律不改：任何 color / background-color / 渐变 / font-family
        （唯一例外是中性的半透明黑，不引入新色相）
   颜色一律沿用各页自己的 CSS 变量，变量名各页不同，用多级 fallback 兜底。
   ================================================================ */

:root{
  --k-r:20px;                                   /* 卡片圆角 */
  --k-sh:0 2px 10px rgba(0,0,0,.05);            /* 中性阴影，不带色相 */
  --k-sh-h:0 8px 22px rgba(0,0,0,.09);
  --k-pad:20px 18px 18px;
  --k-gap:14px;
  --k-face:var(--card, var(--cream-2, #fff));   /* 卡面：用各页自己的卡片色 */
  --k-edge:var(--line, rgba(0,0,0,.10));        /* 描边：用各页自己的分隔线色 */
  --k-tint:rgba(0,0,0,.045);                    /* 胶囊底：中性，不引入新色 */
}

/* ---------------- 一、卡片本体（只给形，不给色） ---------------- */
.k-card,.k-sec,
.faq-item,.sys-card,.step,.profile,      /* about */
.box,                                     /* kids-plan 的重点块 */
.card,                                    /* survey / kids 的题卡 */
.ladder .step,                            /* roadmap 的每一级 */
.tip{
  border-radius:var(--k-r) !important;
  box-shadow:var(--k-sh) !important;
  padding:var(--k-pad) !important;
  margin:0 0 var(--k-gap) !important;
}
/* 只在本来就没有卡面的元素上补卡面，已经有自己底色的一概不碰 */
.k-sec{background:var(--k-face);border:1px solid var(--k-edge)}

.steps,.sys-grid,.faq,.ladder{gap:var(--k-gap) !important}
@media (hover:hover){
  .k-card,.k-sec,.faq-item,.sys-card,.step,a.entry{transition:transform .12s,box-shadow .12s}
  .k-card:hover,.k-sec:hover,.faq-item:hover,.sys-card:hover,a.entry:hover{
    transform:translateY(-2px);box-shadow:var(--k-sh-h) !important;
  }
}

/* ---------------- 二、about：只加留白，颜色字体一律不动 ---------------- */
[data-page="about"] section{padding:40px 0 4px !important}
[data-page="about"] .about-item{
  border-radius:var(--k-r);box-shadow:var(--k-sh);
  padding:18px 16px !important;margin-bottom:var(--k-gap);
  border-bottom:none !important;background:var(--k-face);border:1px solid var(--k-edge);
}
[data-page="about"] .sys-card .tag{position:static !important;margin-bottom:8px;display:inline-block}
/* ⚠️ .ask / .note / .cta 三张卡是有意设计（9-20 体检点名），只调圆角，颜色纹理全留 */
[data-page="about"] .ask,[data-page="about"] .note,
[data-page="about"] .cta,[data-page="about"] .split-note{border-radius:var(--k-r) !important}

/* ---------------- 三、roadmap：每级一张卡，左侧保留该级专属颜色 ---------------- */
[data-page="roadmap"] .ladder .step{
  border-left:4px solid var(--c, var(--line)) !important;   /* --c 是原页给每一级定的颜色 */
}
/* 🔴 .cefr（打底/起步/A1…那颗级别徽章）一个字都别碰：它本来就有该级的专属底色 +
   白字。给它套中性胶囊底 = 把彩底换成近乎透明的灰，白字直接消失在白卡上。
   教训：「只用中性色」不等于「没改色」——覆盖一个本来有颜色的背景，也是改色。 */
[data-page="roadmap"] .ladder .step .meta{
  display:inline-block;background:var(--k-tint);border-radius:999px;
  padding:3px 10px;font-size:12.5px;margin:6px 6px 0 0;
}
/* 第一张卡的 .meta 里裹着整块年龄清单，套胶囊会变成一坨斑，这种就不套 */
[data-page="roadmap"] .ladder .step .meta:has(.ages){
  display:block !important;background:transparent !important;
  border-radius:0 !important;padding:0 !important;margin:10px 0 0 !important;
}

/* ---------------- 四、kids-plan：把每个问题包成一张卡 ---------------- */
/* 这页原本是 59 段连排的散文，没有分节容器。加 .k-sec 容器才能成卡，
   只加容器、不动一个字；容器的底色和描边取这页自己的变量。 */
[data-page="kidsplan"] .k-sec{padding:20px 18px 16px;margin-bottom:var(--k-gap)}
[data-page="kidsplan"] .k-sec h2{margin-top:0 !important}
[data-page="kidsplan"] .k-sec > p{margin-bottom:10px}
[data-page="kidsplan"] .k-sec p{line-height:1.85}
/* .q 是问题上方那行小眉题，做成胶囊形；它的橙色是自己的，不动 */
[data-page="kidsplan"] .q{
  display:block !important;width:-webkit-fit-content;width:fit-content;
  background:var(--k-tint);border-radius:999px;
  padding:3px 10px !important;margin-bottom:8px !important;
}
[data-page="kidsplan"] .three .row{
  background:var(--k-face);border:1px solid var(--k-edge);
  border-radius:16px;padding:14px;margin-bottom:10px;box-shadow:var(--k-sh);
}

/* ---------------- 五、知识库目录：17 条变 17 张卡 ---------------- */
a.entry{
  position:relative;display:block;
  border-radius:var(--k-r) !important;
  box-shadow:var(--k-sh) !important;
  padding:18px 16px 16px !important;
  margin:0 0 var(--k-gap) !important;
}
a.entry[data-ico]::before{content:attr(data-ico);display:block;font-size:30px;line-height:1;margin-bottom:10px}
a.entry .t{margin-bottom:8px !important;line-height:1.45 !important;padding-right:24px}
a.entry .d{line-height:1.65 !important}
a.entry .no{display:inline-block;background:var(--k-tint);border-radius:999px;padding:3px 10px;font-size:12px;margin-bottom:8px}
a.entry .arrow{position:absolute;top:16px;right:16px;float:none !important}
.search{border-radius:999px !important;box-shadow:var(--k-sh) !important}

/* ---------------- 六、知识库文章：不剁成卡，只让长文读着不累 ---------------- */
/* 文章一篇三千字，本来就是坐下来读的。真要「没有整段文字」只能把每段压成
   一句话，那是改字不是排版，得 Brian 拍板。这里只做行距、留白、块成卡。 */
[data-page="article"] .wrap p{line-height:1.9}
[data-page="article"] h2{margin-top:32px !important}
[data-page="article"] .quote,[data-page="article"] .key,
[data-page="article"] .tw,[data-page="article"] .sources,[data-page="article"] .steps{
  border-radius:16px;box-shadow:var(--k-sh);padding:16px;margin:18px 0;
}
[data-page="article"] table{border-radius:16px;overflow:hidden;box-shadow:var(--k-sh)}

/* ---------------- 七、两份问卷：题卡与选项 ---------------- */
[data-page="form"] .card{padding:20px 18px 18px !important;margin-bottom:var(--k-gap) !important}
[data-page="form"] .card .qnum{display:inline-block;border-radius:999px;padding:3px 11px;font-size:12px;margin-bottom:10px}
[data-page="form"] .card .qtitle{margin-bottom:12px !important;line-height:1.5 !important}
[data-page="form"] .opt{
  background:var(--k-tint);border:1px solid transparent;
  border-radius:12px !important;padding:11px 13px !important;margin-bottom:8px !important;
}
/* 选中态：用这页自己的强调色，不自造颜色 */
[data-page="form"] .opt:has(input:checked){
  background:var(--accent, var(--k-tint));
  border-color:var(--green-light, var(--line));
}
[data-page="form"] input[type=text],[data-page="form"] input[type=tel],
[data-page="form"] input[type=number],[data-page="form"] textarea,[data-page="form"] select{
  border-radius:12px !important;padding:11px 12px !important;
}
[data-page="form"] .submit,[data-page="form"] button[type=submit]{border-radius:999px !important;padding:15px 30px !important}

/* ---------------- 八、知识库文章文末出口（2026-09-29 预制） ---------------- */
/* 17 篇文章结尾「随时来问我」之后，原来没有二维码也没有按钮，读完只能关掉。
   这块的文字全部照搬 /about/ 行动区；颜色只引用文章页自己的变量（--card / --line /
   --orange / --orange-d / --orange-bg / --green-light / --muted），不写任何新色值。
   #fff 只用在二维码白底和按钮字色上，是守卫脚本唯一的白名单。 */
[data-page="article"] .kb-exit{
  text-align:center;background:var(--card);border:1px solid var(--line);
  border-top:4px solid var(--orange);border-radius:var(--k-r);box-shadow:var(--k-sh);
  padding:26px 18px 20px;margin:22px 0 6px;
}
[data-page="article"] .kb-exit h2{margin:0 0 6px !important;padding-top:0;font-size:20px;line-height:1.55}
[data-page="article"] .kb-exit h2::before{margin:0 auto 12px}
[data-page="article"] .kb-exit .kb-exit-sub{margin:0;font-size:14.5px;color:var(--muted);letter-spacing:.08em}
[data-page="article"] .kb-exit .kb-exit-qr{
  display:block;width:180px;max-width:64%;margin:18px auto 0;border-radius:14px;
  background:#fff;padding:8px;border:1px solid var(--line);box-shadow:var(--k-sh);
}
[data-page="article"] .kb-exit .kb-exit-btn{
  display:inline-block;margin-top:14px;background:var(--orange);color:#2A1306;
  font-size:15.5px;font-weight:700;letter-spacing:.06em;padding:11px 24px;border-radius:999px;
}
[data-page="article"] .kb-exit .kb-exit-hint{margin:12px 0 0;font-size:13.5px;line-height:1.8;color:var(--muted)}
[data-page="article"] .kb-exit .kb-exit-hint a{color:var(--green-light);font-weight:600}
[data-page="article"] .kb-exit .kb-exit-nw,[data-page="article"] .kb-exit .kb-exit-hint a{white-space:nowrap}
[data-page="article"] .kb-exit .kb-exit-fine{margin:14px 0 0;padding-top:14px;border-top:1px dashed var(--line)}
[data-page="article"] .kb-exit .kb-exit-fine span{
  display:inline-block;font-size:13px;color:var(--orange-d);background:var(--orange-bg);
  padding:5px 13px;border-radius:999px;
}