/* ==========================================================================
   elevate.css —— 全站最后一层：视觉升维与主色收敛（2026-09-12 第二轮打磨）
   --------------------------------------------------------------------------
   加载位置：containers.css 之后（所有页面统一起点见 deploy/sync_nav.py 或各页 head）
   依据：_qa/shots/round2-base 四页像素级评审 + 探针实测（deploy/_probe2.cjs、
         _probe_dark.cjs）+ audit_ui_rules.py 的两条改进项
   改动清单：
     1) 主色收敛：tokens.css v3 遗留紫 #533afd/#8f7ffb/#241f6e → 品牌蓝 #0554a8 族
     2) 卡片层级：页面底加深半档 + 卡片"实边 + 轻投影"（对齐 Tabler 实测观感）
     3) 首屏升维：hero 高度让出首屏、四层视差速率拉开、mock 骨架可读性
     4) 案例卡字阶归位：标题 13px → 14px（档位内），编号 12px
     5) 深色模式补缺：页标题/输入框/轮廓按钮/浅底徽标的暗色适配；
        以及"系统暗色 + 用户显式选浅色"时变量被媒体查询锁死的回退修复
     6) 焦点环 --shadow-focus 由品牌紫改品牌蓝（键盘聚焦框可见性）
   约束（交接文档第八节）：不改 HTML 结构、不动 data-* 属性与 id、不碰 vendor 层。
   ========================================================================== */

/* ==========================================================================
   1. 主色收敛：一套主色贯穿全站
   --------------------------------------------------------------------------
   实测问题：tokens.css v3 定义 --brand:#533afd（紫），后续层把 --tblr-primary
   补丁成 #0554a8（蓝），而 --color-accent/--color-highlight/--gold-* 别名仍指紫，
   导致平台页指示条、案例编号、悬浮渐变为紫，与全站蓝色双轨并存。
   本层在最后重定向根变量，所有 var() 引用自动归蓝。
   ========================================================================== */
:root {
  --brand: #0554a8;
  --brand-hover: #044a91;
  --brand-press: #033a75;
  --brand-soft: #9cc4ee;
  --brand-tint: #e8f1fb;
  /* shadcn.css 的品牌强调色链条：--color-accent / --color-highlight /
     --gold-500 / --gold-600 与 shadcn 段的 --brand 全部由它派生，
     只改 --brand 无法覆盖，必须在同一层重定向源头变量。 */
  --brand-accent: #0554a8;
  --brand-accent-hover: #044a91;
  --color-accent: #0554a8;
  --color-accent-hover: #044a91;
  --color-highlight: #0554a8;
  --gold-500: #0554a8;
  --gold-600: #0554a8;
  /* tokens.css 中的字面紫值（无法靠重定向 --brand 覆盖） */
  --gold-400: #3d7bc2;   /* 原 #8f7ffb：finance-viz 条纹第二色 */
  --gold-800: #0b2a5b;   /* 原 #241f6e：ws-bulk__count 等深色文字 */
  --color-info-bg: #e8f1fb;
  /* 焦点环原本也是品牌紫（tokens.css:212），键盘用户看到的聚焦框要同为品牌蓝 */
  --shadow-focus: 0 0 0 3px rgba(5, 84, 168, 0.18);
}

/* 全站 body 氛围光斑：motion.css 的紫光斑 → 蓝光斑（第二层冷色氛围保留） */
body {
  background-image:
    radial-gradient(1100px 520px at 88% -10%, rgba(5, 84, 168, 0.05), transparent 62%),
    radial-gradient(800px 420px at 4% 2%, rgba(6, 27, 49, 0.035), transparent 60%);
}

/* premium.css 中写死的紫色字面量 → 蓝色族（原 var(--brand)→#6b55ff 渐变） */
.cap:hover .cap__icon,
.tool:hover .tool__icon {
  background: linear-gradient(150deg, var(--brand) 0%, #0a7de0 100%);
  box-shadow: 0 8px 20px -8px rgba(5, 84, 168, 0.55);
}

.tool::before {
  background: linear-gradient(90deg, var(--brand), #0a7de0 60%, #9cc4ff);
}

/* 图标底座与序号底：淡紫 → 淡蓝 */
.cap__icon {
  background: linear-gradient(150deg, #e9f2fc 0%, #dceafa 100%);
}
.tool__icon {
  background: linear-gradient(150deg, #e9f2fc 0%, #d8e9fa 100%);
}
.loop__idx {
  background: linear-gradient(150deg, #e9f2fc 0%, #d5e7f9 100%);
}

/* 数据带与 mesh 区的紫色光斑 → 蓝光斑 */
.stat-band {
  background:
    radial-gradient(900px 460px at 88% -20%, rgba(110, 168, 254, 0.34), transparent 62%),
    radial-gradient(700px 400px at 4% 110%, rgba(10, 125, 224, 0.22), transparent 64%),
    linear-gradient(140deg, #0a2450 0%, #0f3266 50%, #14407c 100%);
}
.section--mesh {
  background:
    radial-gradient(900px 480px at 88% 0%, rgba(5, 84, 168, 0.08), transparent 62%),
    radial-gradient(760px 420px at 6% 96%, rgba(11, 42, 91, 0.07), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

/* ==========================================================================
   2. 卡片层级：页面底加深半档，卡片"实边 + 轻投影"
   --------------------------------------------------------------------------
   实测：page-wrapper #f6f8fb（shell-light.css 压过了 color-depth 的 #eef2f7），
   卡片白底 + 0 1px 2px/4% 阴影 ≈ 不可见，整页"平"。
   Tabler 的实感来自 边/底/影 三者明度差各拉开一档。

   ⚠️ 本条带 !important 且位于最后一层，会压过 shell-light.css 的暗色规则
   （`.page-wrapper { background:#0d1520 !important }` 在 @media dark 内）。
   如果只写浅色值，深色模式下页面底会保持浅灰、而文字是浅色 → 整页不可读。
   所以下面必须成对给出暗色与显式浅色的变体。
   ========================================================================== */
.page-wrapper { background: #eef2f7 !important; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .page-wrapper { background: #0d1520 !important; }
}
html[data-theme="dark"] .page-wrapper { background: #0d1520 !important; }

/* body 底色同理：dashboard.html 不加载 tokens.css，body 背景来自 Tabler 默认的
   --tblr-body-bg（浅色），而 Tabler 的暗色开关是 data-bs-theme，跟站点的
   data-theme/prefers-color-scheme 不是一套 —— 结果深色模式下页面边缘会露出浅色底。
   统一压成与 page-wrapper 同色，视觉无缝。 */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body { background-color: #0d1520; }
}
html[data-theme="dark"] body { background-color: #0d1520; }

.page-body .card,
.page-body .fl-stat {
  border-color: #dde6ef;
  box-shadow:
    0 1px 2px rgba(16, 42, 80, 0.05),
    0 6px 16px -8px rgba(16, 42, 80, 0.08);
}

.page-body .card-header { background: #fbfcfe; }

/* 主按钮投影：让唯一的主色按钮成为视觉锚点 */
.page-body .btn-primary,
.btn-primary {
  box-shadow: 0 2px 6px rgba(5, 84, 168, 0.32);
}
.btn-primary:hover {
  box-shadow: 0 4px 12px rgba(5, 84, 168, 0.38);
}

/* ==========================================================================
   3. 首屏升维：首屏预算收敛 + 视差速率拉开 + mock 可读性
   --------------------------------------------------------------------------
   首屏高度预算（实测，1440x900）：
     顶部导航 194px + hero ≈486px = 680px
     → 首屏余 220px，完整露出下方"平台能力"条（实测高 176px）
   这样首屏同时看到「价值主张 + 产品界面 + 能力入口」，不再只剩一个 hero。
   视差基础设施（premium.js 的 --hero-scroll 共享进度）已存在，
   本层把层间速率差拉到 12—36px（原 6—18px 太接近，"看起来一起动"）。
   ========================================================================== */
.home-hero {
  min-height: 480px;
  padding-block: 40px;
}

@media (min-height: 900px) {
  .home-hero { min-height: min(54vh, 500px); }
}

/* 窄屏：高度交给内容决定（文案与 mockup 竖排后自然高度已足够） */
@media (max-width: 1024px) {
  .home-hero { min-height: 0; }
}

/* hero 不再顶满首屏后，滚动提示只在矮视口（hero 仍占满时）保留 */
@media (min-height: 820px) and (min-width: 1025px) {
  .scroll-hint { display: none; }
}

/* 四层视差：速率差 ≥2 倍，肉眼可辨（premium.js 写入 --hero-scroll: 0→1） */
.home-hero__grid {
  transform: translate3d(0, calc(var(--hero-scroll, 0) * 12px), 0);
}
.home-hero__glow--a {
  transform: translate3d(calc(var(--hero-scroll, 0) * -26px), calc(var(--hero-scroll, 0) * 20px), 0);
}
.home-hero__glow--b {
  transform: translate3d(calc(var(--hero-scroll, 0) * 34px), calc(var(--hero-scroll, 0) * -16px), 0);
}
.home-hero__copy {
  transform: translate3d(0, calc(var(--hero-scroll, 0) * -36px), 0);
}
.home-hero__visual {
  transform: translate3d(0, calc(var(--hero-scroll, 0) * -12px), 0);
}
/* 绩效浮卡：与文案反向（向下漂），近景层。
   注意 right 必须取正值——视觉区右边缘与 hero 右边缘重合（都贴 shell 内容区），
   原 right:-12px 会让浮卡向右探出 12px，被 .home-hero 的 overflow:hidden 切掉右边。
   探出改由 bottom:-28px 承担（下方还有 140px 余量，不会被裁）。 */
.mock-float {
  transform: translate3d(0, calc(var(--hero-scroll, 0) * 24px), 0);
  will-change: transform;
  border-color: #e2e9f3;
  right: 8px;
  bottom: -28px;
}

@media (prefers-reduced-motion: reduce) {
  .mock-float { transform: none !important; }
}

/* mock 外框：暗底上的白卡描边（内部样式统一在第 8 节精修） */
.mock { border-color: rgba(255, 255, 255, 0.45); }

/* 说明：hero 标题字距由 type-scale.css 以 -0.01em !important 收敛（-1%，满足硬条款），
   本层不重复声明；--ls-display 令牌补齐 marketing.css:90 的悬空 var() 引用。 */

/* ==========================================================================
   4. 案例卡字阶归位
   --------------------------------------------------------------------------
   实测：.case-card__title 13px（应为卡片标题档），.case-card__id 走 micro 档。
   containers.css 的 16px 标题统一清单未覆盖案例卡——案例卡信息密度高，
   按档位表取 14px（正文档上位）而非 16px，避免标题折行率激增。
   ========================================================================== */
.page-body .case-card__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.page-body .case-card__id { font-size: 12px; }

/* 案例页底部留白收敛：网格结束到翻页条的间距原 ≈209px */
body[data-view="cases"] .section#library { padding-bottom: var(--sp-4); }
body[data-view="cases"] .page-nav { margin-top: var(--sp-2); }

/* ==========================================================================
   5. 深色模式补缺
   --------------------------------------------------------------------------
   探针实测（html[data-theme="dark"] + 系统暗色）：
   · .page-body .page-title / h1 = #16202e，暗底上近隐形
     （refine.css 的浅色 #101a26 无暗色分支）
   · .page-body 输入框/选择框 = 白底 #ffffff
   · .btn-outline-secondary = 白底
   · bg-*-lt 浅底徽标/头像保持浅亮底，在暗页上刺眼
   · badge--accent/gold 既有暗色规则是"棕底 + 暗紫字"（对比度失守）
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #5b9cf5;
    --brand-hover: #7cb3f8;
    --brand-press: #a3c9fa;
    --brand-soft: #1d3a5f;
    --brand-tint: #12233c;
    --brand-accent: #5b9cf5;
    --brand-accent-hover: #7cb3f8;
    --color-accent: #5b9cf5;
    --color-accent-hover: #7cb3f8;
    --color-highlight: #5b9cf5;
    --gold-400: #3d6ea8;
    --gold-500: #5b9cf5;
    --gold-600: #5b9cf5;
    --gold-800: #a9c8ec;
    --color-info-bg: #12233c;
  }
}
html[data-theme="dark"] {
  --brand: #5b9cf5;
  --brand-hover: #7cb3f8;
  --brand-press: #a3c9fa;
  --brand-soft: #1d3a5f;
  --brand-tint: #12233c;
  --brand-accent: #5b9cf5;
  --brand-accent-hover: #7cb3f8;
  --color-accent: #5b9cf5;
  --color-accent-hover: #7cb3f8;
  --color-highlight: #5b9cf5;
  --gold-400: #3d6ea8;
  --gold-500: #5b9cf5;
  --gold-600: #5b9cf5;
  --gold-800: #a9c8ec;
  --color-info-bg: #12233c;
}

/* 页标题与卡片标题 */
html[data-theme="dark"] .page-body .page-title,
html[data-theme="dark"] .page-body h1,
html[data-theme="dark"] .page-body h2,
html[data-theme="dark"] .page-body h3,
html[data-theme="dark"] .page-body h4,
html[data-theme="dark"] .page-body .card-title {
  color: #f2f6fa !important;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .page-body .page-title,
  html:not([data-theme="light"]) .page-body h1,
  html:not([data-theme="light"]) .page-body h2,
  html:not([data-theme="light"]) .page-body h3,
  html:not([data-theme="light"]) .page-body h4,
  html:not([data-theme="light"]) .page-body .card-title {
    color: #f2f6fa !important;
  }
}

/* 输入框 / 选择框 / 文本域 */
html[data-theme="dark"] .page-body .input,
html[data-theme="dark"] .page-body input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] .page-body select,
html[data-theme="dark"] .page-body textarea {
  background: #16202e;
  border-color: #2b3a4c;
  color: #e6edf5;
}
html[data-theme="dark"] .page-body .input::placeholder,
html[data-theme="dark"] .page-body input::placeholder,
html[data-theme="dark"] .page-body textarea::placeholder {
  color: #6b7a8d;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .page-body .input,
  html:not([data-theme="light"]) .page-body input:not([type="checkbox"]):not([type="radio"]),
  html:not([data-theme="light"]) .page-body select,
  html:not([data-theme="light"]) .page-body textarea {
    background: #16202e;
    border-color: #2b3a4c;
    color: #e6edf5;
  }
  html:not([data-theme="light"]) .page-body .input::placeholder,
  html:not([data-theme="light"]) .page-body input::placeholder,
  html:not([data-theme="light"]) .page-body textarea::placeholder {
    color: #6b7a8d;
  }
}

/* 轮廓按钮 */
html[data-theme="dark"] .page-body .btn-outline-secondary {
  background: transparent;
  border-color: #2b3a4c;
  color: #a8b6c6;
}
html[data-theme="dark"] .page-body .btn-outline-secondary:hover {
  background: #1b2634;
  color: #cdd8e4;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .page-body .btn-outline-secondary {
    background: transparent;
    border-color: #2b3a4c;
    color: #a8b6c6;
  }
  html:not([data-theme="light"]) .page-body .btn-outline-secondary:hover {
    background: #1b2634;
    color: #cdd8e4;
  }
}

/* 浅底语义徽标 / 头像（Tabler 的 -lt 族在暗色下的等效表达：半透明彩底 + 浅字） */
html[data-theme="dark"] .bg-green-lt,
html[data-theme="dark"] .badge.bg-green-lt { background: rgba(47, 179, 68, 0.16) !important; color: #7dd693 !important; }
html[data-theme="dark"] .bg-yellow-lt,
html[data-theme="dark"] .badge.bg-yellow-lt { background: rgba(245, 159, 0, 0.16) !important; color: #f5c15c !important; }
html[data-theme="dark"] .bg-blue-lt,
html[data-theme="dark"] .badge.bg-blue-lt { background: rgba(91, 156, 245, 0.16) !important; color: #8fbef8 !important; }
html[data-theme="dark"] .bg-purple-lt,
html[data-theme="dark"] .badge.bg-purple-lt { background: rgba(168, 85, 247, 0.18) !important; color: #c99bf5 !important; }
html[data-theme="dark"] .bg-red-lt,
html[data-theme="dark"] .badge.bg-red-lt { background: rgba(214, 57, 57, 0.16) !important; color: #f08a8a !important; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .bg-green-lt { background: rgba(47, 179, 68, 0.16) !important; color: #7dd693 !important; }
  html:not([data-theme="light"]) .bg-yellow-lt { background: rgba(245, 159, 0, 0.16) !important; color: #f5c15c !important; }
  html:not([data-theme="light"]) .bg-blue-lt { background: rgba(91, 156, 245, 0.16) !important; color: #8fbef8 !important; }
  html:not([data-theme="light"]) .bg-purple-lt { background: rgba(168, 85, 247, 0.18) !important; color: #c99bf5 !important; }
  html:not([data-theme="light"]) .bg-red-lt { background: rgba(214, 57, 57, 0.16) !important; color: #f08a8a !important; }
}

/* --------------------------------------------------------------------------
   其余在暗色下"仍然发亮"的 Tabler 元素（用 _probe_js.cjs + PROBE_DARK=1 扫出）：
   · header.navbar            每页顶栏，白底 255 亮度 —— 深色下最刺眼的一条
   · .card.bg-dark-lt         侧栏顶部品牌卡（浅色模式下是很浅的灰，暗色下没跟着变）
   · .ws-strip                platform 数据带（白底容器）
   · .bg-dark-lt 徽标/头像    同上
   处理：压成与卡片同级的深面 #16202e，文字改浅色，保证对比度。
   -------------------------------------------------------------------------- */
html[data-theme="dark"] header.navbar,
html[data-theme="dark"] .card.bg-dark-lt,
html[data-theme="dark"] .ws-strip {
  background: #16202e !important;
  border-color: #253141 !important;
}
html[data-theme="dark"] .bg-dark-lt { background: #1b2634 !important; color: #cdd8e4 !important; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) header.navbar,
  html:not([data-theme="light"]) .card.bg-dark-lt,
  html:not([data-theme="light"]) .ws-strip {
    background: #16202e !important;
    border-color: #253141 !important;
  }
  html:not([data-theme="light"]) .bg-dark-lt { background: #1b2634 !important; color: #cdd8e4 !important; }
}

/* --------------------------------------------------------------------------
   暗色下的"面"：表格容器 / 目录 / 折叠区 / 表头 / 卡片脚 / 表单控件 / 小按钮
   用 _probe_js.cjs + PROBE_DARK=1 逐页扫「亮度 > 205 且面积 > 60x24」的元素得到，
   这些在深色页面上是大块刺眼白面（不是刻意的浮层）。
   面用 #16202e（卡片级）、更亮一档用 #1b2634，文字 #cdd8e4。
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] nav.toc,
html[data-theme="dark"] details.accordion,
html[data-theme="dark"] details.accordion > summary,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .page-body th,
html[data-theme="dark"] caption,
html[data-theme="dark"] .ws-pager,
html[data-theme="dark"] .ws-pager button,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .input.form-control {
  background: #16202e !important;
  border-color: #253141 !important;
  color: #cdd8e4 !important;
}
html[data-theme="dark"] .btn--outline,
html[data-theme="dark"] .btn--sm {
  background: #1b2634 !important;
  border-color: #2b3a4c !important;
  color: #cdd8e4 !important;
}
/* ws-nav 的容器已在上面的面列表里压深，但它内部的按钮是独立白底，要单独处理。
   选中态选择器比 .ws-nav button 更高，必须单列，否则浅蓝底会留在深色页上。 */
html[data-theme="dark"] .ws-nav button {
  background: transparent !important;
  color: #a8b6c6 !important;
}
html[data-theme="dark"] .ws-nav button:hover { background: #1b2634 !important; }
html[data-theme="dark"] .ws-nav button[aria-pressed="true"],
html[data-theme="dark"] .ws-nav button[aria-selected="true"],
html[data-theme="dark"] .ws-nav button[aria-current="true"],
html[data-theme="dark"] .ws-nav button.is-active,
html[data-theme="dark"] .ws-nav button.active {
  background: #1b2c3e !important;
  color: #6fb4f5 !important;
}
/* 视频卡的授权提示：浅黄警示底在深色页上过亮 → 暗底 + 亮琥珀字 */
html[data-theme="dark"] .video-card__notice {
  background: #2a2413 !important;
  border-color: #4d421f !important;
  color: #f5c15c !important;
}
/* 作业台状态徽标 .st（polish.css:584 起用 !important 定死了浅色底，
   故这里必须同级加 !important，并用 html[data-theme] 抬高特异性）。
   暗色下改用半透明语义底 + 亮字，保留"绿=正常 / 琥珀=预警 / 红=超时"的语义。 */
html[data-theme="dark"] .st--info {
  background: #1b2430 !important; border-color: #2b3a4c !important; color: #a8b6c6 !important;
}
html[data-theme="dark"] .st--success {
  background: rgba(47, 179, 68, 0.14) !important; border-color: rgba(47, 179, 68, 0.32) !important; color: #7dd693 !important;
}
html[data-theme="dark"] .st--warning {
  background: rgba(245, 159, 0, 0.14) !important; border-color: rgba(245, 159, 0, 0.32) !important; color: #f5c15c !important;
}
html[data-theme="dark"] .st--danger {
  background: rgba(214, 57, 57, 0.14) !important; border-color: rgba(214, 57, 57, 0.32) !important; color: #f08a8a !important;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .table-wrap,
  html:not([data-theme="light"]) nav.toc,
  html:not([data-theme="light"]) details.accordion,
  html:not([data-theme="light"]) details.accordion > summary,
  html:not([data-theme="light"]) .card-footer,
  html:not([data-theme="light"]) .page-body th,
  html:not([data-theme="light"]) caption,
  html:not([data-theme="light"]) .ws-pager,
  html:not([data-theme="light"]) .ws-pager button,
  html:not([data-theme="light"]) .form-control,
  html:not([data-theme="light"]) .input.form-control {
    background: #16202e !important;
    border-color: #253141 !important;
    color: #cdd8e4 !important;
  }
  html:not([data-theme="light"]) .btn--outline,
  html:not([data-theme="light"]) .btn--sm {
    background: #1b2634 !important;
    border-color: #2b3a4c !important;
    color: #cdd8e4 !important;
  }
  html:not([data-theme="light"]) .ws-nav button {
    background: transparent !important;
    color: #a8b6c6 !important;
  }
  html:not([data-theme="light"]) .ws-nav button:hover { background: #1b2634 !important; }
  html:not([data-theme="light"]) .ws-nav button[aria-pressed="true"],
  html:not([data-theme="light"]) .ws-nav button[aria-selected="true"],
  html:not([data-theme="light"]) .ws-nav button[aria-current="true"],
  html:not([data-theme="light"]) .ws-nav button.is-active,
  html:not([data-theme="light"]) .ws-nav button.active {
    background: #1b2c3e !important;
    color: #6fb4f5 !important;
  }
  html:not([data-theme="light"]) .video-card__notice {
    background: #2a2413 !important;
    border-color: #4d421f !important;
    color: #f5c15c !important;
  }
  html:not([data-theme="light"]) .st--info {
    background: #1b2430 !important; border-color: #2b3a4c !important; color: #a8b6c6 !important;
  }
  html:not([data-theme="light"]) .st--success {
    background: rgba(47, 179, 68, 0.14) !important; border-color: rgba(47, 179, 68, 0.32) !important; color: #7dd693 !important;
  }
  html:not([data-theme="light"]) .st--warning {
    background: rgba(245, 159, 0, 0.14) !important; border-color: rgba(245, 159, 0, 0.32) !important; color: #f5c15c !important;
  }
  html:not([data-theme="light"]) .st--danger {
    background: rgba(214, 57, 57, 0.14) !important; border-color: rgba(214, 57, 57, 0.32) !important; color: #f08a8a !important;
  }
}

/* badge--accent / badge--gold：修复既有"棕底暗紫字"组合 → 蓝调徽章 */
html[data-theme="dark"] .badge--accent,
html[data-theme="dark"] .badge--gold {
  background: #12233c;
  color: #7cb3f8;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .badge--accent,
  html:not([data-theme="light"]) .badge--gold {
    background: #12233c;
    color: #7cb3f8;
  }
}

/* 暗色下的卡片层级：边与影同步换档（配合第 2 节，暗色不用投影加深，用描边提亮） */
html[data-theme="dark"] .page-body .card,
html[data-theme="dark"] .page-body .fl-stat {
  border-color: #253141;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .page-body .card-header { background: #1b2634; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .page-body .card,
  html:not([data-theme="light"]) .page-body .fl-stat {
    border-color: #253141;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
  html:not([data-theme="light"]) .page-body .card-header { background: #1b2634; }
}

/* "系统暗色 + 用户显式选浅色"回退修复：
   既有各层的暗色分支直接挂在媒体查询下的 :root / 元素选择器上，
   用户显式选浅色时变量仍被锁成暗色值。本层最后统一拉回。 */
@media (prefers-color-scheme: dark) {
  html[data-theme="light"] {
    color-scheme: light;
    --bg: #ffffff;
    --bg-soft: #f6f9fc;
    --surface: #ffffff;
    --surface-muted: #fafafa;
    --ink: #061b31;
    --ink-2: #273951;
    --ink-mute: #5d6b80;
    --ink-faint: #6b7280;
    --hairline: #e5edf5;
    --hairline-soft: #eef0f7;
    --brand: #0554a8;
    --brand-hover: #044a91;
    --brand-press: #033a75;
    --brand-soft: #9cc4ee;
    --brand-tint: #e8f1fb;
    --brand-accent: #0554a8;
    --brand-accent-hover: #044a91;
    --color-accent: #0554a8;
    --color-accent-hover: #044a91;
    --color-highlight: #0554a8;
    --gold-400: #3d7bc2;
    --gold-500: #0554a8;
    --gold-600: #0554a8;
    --gold-800: #0b2a5b;
    --dark-band: #1c1e54;
    --color-border-strong: #cbd5e1;
    --color-overlay: rgba(6, 27, 49, 0.48);
    --shadow-xs: rgba(23, 23, 23, 0.06) 0px 3px 6px 0px;
    --shadow-sm: rgba(23, 23, 23, 0.06) 0px 3px 6px 0px;
    --shadow-md: rgba(23, 23, 23, 0.08) 0px 15px 35px 0px;
    --shadow-lg: rgba(50, 50, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px;
    --shadow-ring: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    --grid-line: rgba(6, 27, 49, 0.03);
    --color-info-bg: #e8f1fb;
    --c-page: #eef2f7;
    --c-surface: #ffffff;
    --c-surface-2: #f7f9fc;
    --c-surface-3: #eff4f9;
    --c-border: #d5dee8;
    --c-divider: #e6ecf3;
    --c-text: #16202e;
    --c-text-muted: #4a5563;
  }
  html[data-theme="light"] .page-wrapper { background: #eef2f7 !important; }
  html[data-theme="light"] .page-body .card,
  html[data-theme="light"] .page-body .viz,
  html[data-theme="light"] .page-body .stat,
  html[data-theme="light"] .page-body .tool,
  html[data-theme="light"] .page-body .ws-table-wrap,
  html[data-theme="light"] .page-body .ws-nav {
    background: #ffffff;
    border-color: #dde6ef;
  }
  html[data-theme="light"] .page-body h1,
  html[data-theme="light"] .page-body h2,
  html[data-theme="light"] .page-body h3,
  html[data-theme="light"] .page-body h4,
  html[data-theme="light"] .page-body .card-title {
    color: #16202e !important;
  }
  html[data-theme="light"] .page-body p,
  html[data-theme="light"] .page-body li,
  html[data-theme="light"] .page-body td {
    color: #26313f;
  }
  html[data-theme="light"] .page-body .card-header,
  html[data-theme="light"] .page-body .viz__head,
  html[data-theme="light"] .page-body table > thead > tr > th {
    background: #fbfcfe !important;
  }
  html[data-theme="light"] .page-body table > tbody > tr > td {
    border-bottom-color: #e6ecf3 !important;
  }
  html[data-theme="light"] .page-body .input,
  html[data-theme="light"] .page-body input:not([type="checkbox"]):not([type="radio"]),
  html[data-theme="light"] .page-body select,
  html[data-theme="light"] .page-body textarea {
    background: #ffffff;
    border-color: #d5dee8;
    color: #16202e;
  }
  html[data-theme="light"] .page-body .btn-outline-secondary {
    background: transparent;
    border-color: #bcc9d8;
    color: #3d4b60;
  }
}

/* ==========================================================================
   7. 跳到主内容（skip-link）的兜底定义
   --------------------------------------------------------------------------
   现象：dashboard.html 左上角常驻显示一颗蓝色"跳到主要内容"链接。
   根因：该页不加载 base.css（.skip-link 唯一有样式的地方），
        于是这颗链接退化成普通行内链接，直接顶在页面最左上角。
   做法：在最后一层补一份等价规则（base.css 用 translateY 把链接推到视口外，
        仅键盘聚焦时滑入），让 13 页行为一致——保留无障碍能力，同时不再可见。
   变量均带兜底值：dashboard.html 不加载 tokens.css / shadcn.css。
   ========================================================================== */
.skip-link {
  position: fixed;
  top: var(--space-2, 8px);
  left: var(--space-2, 8px);
  z-index: 999;
  padding: var(--space-2, 8px) var(--space-4, 16px);
  border-radius: var(--radius-md, 6px);
  background: var(--color-primary, #0554a8);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-4, 16px)));
  transition: transform var(--dur-base, 200ms) var(--ease-out, ease);
}
.skip-link:focus {
  transform: translateY(0);
  color: #ffffff;
}

/* ==========================================================================
   8. 首屏产品界面预览（mockup）精修
   --------------------------------------------------------------------------
   实测（1440×900，deploy/_probe_mock.cjs）暴露四个问题：
     ① 表头缺字：home.css 的 `.mock__tr > span:nth-child(2)`（6px 高灰条）
        无差别命中表头，把「类型」两个字压成色块 —— 表头看起来少一个词。
     ② 骨架条满宽：三列数据条各自占满整列（134/122/110px），
        5 行 × 4 列 = 20 条等宽长横杠，这是"拥挤、生硬"的主因。
     ③ 行高过紧：数据行上下内边距只有 8px，行高 29px，行与行贴在一起。
     ④ 层级与配色：scale-final.css 把 KPI 数字压到 14px、标签 11px，
        字号差几乎消失；骨架用三种杂乱灰蓝（#dbe3ef/#e8edf5/#cfd9e8），
        表头底是纯灰 #f2f2f2，与 hero 深蓝 + 品牌蓝不成体系。
   做法：DOM 结构完全不动，只重写尺寸节奏与配色——
     表头恢复文字、骨架条改成有长短节奏的短条（金额右对齐）、行高 29→33px、
     字号层级恢复（数字 18 / 标签 10），整套色板收敛到品牌蓝透明度阶梯。
   档位合规：内边距只用 4 的倍数或 10/12 等既有补偿值，字号只用 10/18/20。
   ========================================================================== */

/* --- ① 表头：恢复文字（必须显式排除掉数据行的骨架条规则） --- */
.page-body .mock__tr--head > span {
  height: auto;
  background: none;
  /* home.css 的数据行规则还留了 3px 圆角；表头以前只有 6px 高被门禁跳过，
     恢复成文字后高度 21px 会被档位检查扫到，这里一并清零。 */
  border-radius: 0;
  color: #5d6b80;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.page-body .mock__tr--head > span:nth-child(2) {
  height: auto;
  background: none;
  border-radius: 0;
}

/* --- ② 数据行骨架条：短条 + 长短节奏（不再满宽），金额右对齐 --- */
.page-body .mock__tr:not(.mock__tr--head) .mock__id {
  height: 8px;
  width: 84%;
  border-radius: 4px;
  background: #b3c9e2;
  justify-self: start;
}
.page-body .mock__tr:not(.mock__tr--head) > span:nth-child(2) {
  height: 8px;
  width: 68%;
  border-radius: 4px;
  background: #c9d8ea;
  justify-self: start;
}
.page-body .mock__tr:not(.mock__tr--head) .mock__num {
  height: 8px;
  width: 90%;
  border-radius: 4px;
  background: #a3bdd9;
  justify-self: end;
}
.page-body .mock__tr:not(.mock__tr--head) .mock__tag {
  height: 12px;
  width: 88%;
  border-radius: 4px;
  background: #d5efdf;
  justify-self: start;
}
.page-body .mock__tr:not(.mock__tr--head) .mock__tag--warn { background: #fbe8c8; }

/* 逐行微差：模拟真实数据的长度参差，避免机械重复 */
.page-body .mock__tr:nth-child(3) .mock__id { width: 72%; }
.page-body .mock__tr:nth-child(3) .mock__num { width: 82%; }
.page-body .mock__tr:nth-child(4) .mock__id { width: 92%; }
.page-body .mock__tr:nth-child(4) > span:nth-child(2) { width: 56%; }
.page-body .mock__tr:nth-child(5) .mock__num { width: 76%; }
.page-body .mock__tr:nth-child(5) .mock__tag { width: 74%; }
.page-body .mock__tr:nth-child(6) .mock__id { width: 78%; }
.page-body .mock__tr:nth-child(6) > span:nth-child(2) { width: 80%; }
.page-body .mock__tr:nth-child(6) .mock__num { width: 96%; }

/* --- ③ 行高与节奏：数据行 8→12px 内边距，行高 29→36px；斑马纹让表格读起来是表格 --- */
.page-body .mock__tr {
  padding: 12px;
  gap: 12px;
  border-bottom-color: #eef3f9;
}
.page-body .mock__tr--head {
  padding: 12px;
  background: #f4f8fc;
}
.page-body .mock__table > .mock__tr:nth-child(even) { background: #fafcfe; }

/* --- ④ 配色收敛到品牌蓝阶梯 + 字号层级恢复 --- */
.page-body .mock__bar {
  padding: 12px 16px;
  border-bottom-color: #e8eef6;
  background: #f7fafd;
}
.page-body .mock__url {
  padding: 4px 12px;
  color: #7b8a9c;
  font-size: 10px;
}
.page-body .mock__body { background: #f7fafd; }
.page-body .mock__side {
  gap: 12px;
  padding: 12px;
  border-right-color: #e8eef6;
  background: #f2f7fc;
}
/* 侧栏"当前页"高亮是本预览里唯一的品牌色锚点，必须保住：
   用 :not() 排除 --on，否则本层的 .mock__side-item（特异性更高）会连同它一起涂成浅灰。 */
.page-body .mock__side-item:not(.mock__side-item--on) {
  height: 8px;
  border-radius: 4px;
  background: #d7e3f0;
}
.page-body .mock__side-item--on {
  height: 8px;
  border-radius: 4px;
  background: var(--brand);
}
.page-body .mock__main { padding: 16px 20px; }
.page-body .mock__kpis {
  gap: 12px;
  margin-bottom: 16px;
}
.page-body .mock__kpi {
  padding: 12px 16px;
  border-color: #e3ebf5;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 42, 80, 0.06);
}
.page-body .mock__kpi b {
  color: #0b2a5b;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
}
.page-body .mock__kpi span {
  margin-top: 4px;
  color: #6b7a8d;
  font-size: 10px;
}
.page-body .mock__kpi--warn {
  border-color: #f0dcb4;
  background: #fffbf2;
}
.page-body .mock__kpi--warn b { color: #9a6a0c; }
.page-body .mock__table {
  border-color: #e3ebf5;
  border-radius: 6px;
}

/* --- ⑤ 绩效浮卡：与主卡同一套描边与字号层级 --- */
.page-body .mock-float {
  padding: 12px 16px;
  gap: 4px;
  border-color: #dde8f3;
  box-shadow:
    0 18px 40px -18px rgba(3, 12, 28, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.page-body .mock-float__label {
  color: #6b7a8d;
  font-size: 10px;
}
.page-body .mock-float__value {
  color: #0b2a5b;
  font-size: 20px;
  font-weight: 700;
}

/* ==========================================================================
   9. 进度条轨道可见性
   --------------------------------------------------------------------------
   实测：Tabler 默认轨道在 0% 时几乎与卡片同色，learn 页「我的学习进度」
   与 dashboard「课程建设进度」的进度条看起来都像卡片底部多了一条分隔线，
   读不出"这是一个进度条"。只加深轨道，不动 bar 自身颜色
   （保留 bg-blue / bg-green 等语义色，避免覆盖掉语义）。
   ========================================================================== */
.page-body .progress {
  background-color: #e2e9f3;
  border-radius: 9999px;
}
.page-body .progress-bar { border-radius: 9999px; }

/* ==========================================================================
   11. 首屏左栏呼吸感（客户反复反馈"拥挤"）
   --------------------------------------------------------------------------
   实测原状：左栏 400px 高里压了 6 层信息 —— 胶囊 / 两行大标题 / 两行导语 /
   两个按钮 / 三行竖排要点。而且导语与要点**在罗列同一批功能**
   （教材 · AI · 案例 · 共享中心），信息重复却占了两块版面，是拥挤感的主因。
   做法：导语收成一句（去掉与要点重复的罗列），要点由竖排三行改横排一行，
   腾出的高度换成更舒展的层间距。
   ========================================================================== */
.home-hero__points {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}
.home-hero__points li {
  padding-left: var(--space-5);   /* 仍给 ✓ 图标留位 */
  white-space: nowrap;
}

/* 层间距重排：导语变短后不需要 32px 间隔，按钮与要点之间留足呼吸 */
.home-hero__lead { margin-bottom: var(--space-5); }
.home-hero__actions { margin-bottom: var(--space-6); }

/* 窄屏下横排要点会折行，缩小间距与字号 */
@media (max-width: 640px) {
  .home-hero__points { gap: 8px 16px; }
  .home-hero__points li { font-size: 12px; }
}

/* ==========================================================================
   12. 大屏 / 投屏尺度（≥1600px）
   --------------------------------------------------------------------------
   实测：1440 与 1920 两档视口下**字号完全相同**（正文 14px、能力条说明 11px），
   而内容容器从 1201px 涨到 1560px（+30%）—— 等于在大屏上把字相对缩小了三成。
   路演投屏（1080p 投影、观众 5—8 米）时 11px 说明文字基本不可读。
   做法：≥1600px 时按档位放大「需要被看见」的元素，并放宽容器与行距。
   字号全部取自既有档位（14/15/16/18/28/38/56），不影响档位收敛门禁。
   注：hero 标题与区块标题原层用了 !important，这里需同级覆盖。
   ========================================================================== */
@media (min-width: 1600px) {
  /* 首屏：投屏时最该被看清的三层。
     底层的字号锁在**选择器组**里（如 type-scale.css 同时写了
     `.home-hero__title, .page-body .home-hero__title, …`，组特异性取最高 (0,2,0)），
     所以这里必须带 .page-body 前缀并用 h1.xxx 抬到 (0,2,1) 才能真正覆盖。 */
  .page-body h1.home-hero__title { font-size: 56px !important; }
  .page-body .home-hero__lead { font-size: 18px !important; line-height: 1.7; }
  .page-body .home-hero__eyebrow { font-size: 14px !important; }
  .page-body .home-hero__points li { font-size: 15px !important; }

  /* 能力条与区块标题 */
  .page-body .cap__label { font-size: 16px !important; }
  .page-body .cap__desc { font-size: 13px !important; }
  .page-body .tri__title { font-size: 18px !important; }
  .page-body .section__head-text h2 { font-size: 28px !important; }

  /* 正文级文字：三栏列表、工具卡、数据带 */
  .page-body .news__text { font-size: 16px !important; }
  .page-body .news__tag { font-size: 12px !important; }
  .page-body .loop__step strong { font-size: 16px !important; }
  .page-body .loop__step span { font-size: 14px !important; }
  .page-body .who__list li { font-size: 15px !important; }
  .page-body .who__name { font-size: 18px !important; }
  .page-body .tool__title { font-size: 18px !important; }
  .page-body .tool__desc { font-size: 15px !important; }
  .page-body .stat-band__item dd { font-size: 38px !important; }
  .page-body .stat-band__item dt { font-size: 15px !important; }

  /* 全站正文与表格：投屏时的基线可读性 */
  .page-body p, .page-body li, .page-body td { font-size: 15px !important; }
  .page-body .text-secondary, .page-body .subheader { font-size: 14px !important; }
  .page-body .card-title { font-size: 18px !important; }
}

/* ==========================================================================
   13. 锚点跳转的落点反馈
   --------------------------------------------------------------------------
   ai / course 等页右栏有「本页目录」（.toc 里的锚点链接，如「课程要点覆盖范围」
   → #topics）。点击后面板滚入视口，但落点没有任何视觉反馈，用户不知道跳到了哪。
   :target 是零成本的标准解法：outline 不占布局，不会引起重排。
   ========================================================================== */
.page-body .panel:target,
.page-body .card:target,
.page-body .section:target,
.page-body [id]:target {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .page-body .panel:target,
  html:not([data-theme="light"]) .page-body .card:target,
  html:not([data-theme="light"]) .page-body .section:target {
    outline-color: #5b9cf5;
  }
}
html[data-theme="dark"] .page-body .panel:target,
html[data-theme="dark"] .page-body .card:target,
html[data-theme="dark"] .page-body .section:target {
  outline-color: #5b9cf5;
}

/* ==========================================================================
   14. 打印 / 导出 PDF
   --------------------------------------------------------------------------
   场景：老师会把某些页打印或"打印成 PDF"当申报材料附件。
   原状问题：base.css 里只隐藏了 .site-header/.btn 等几个类，而站点现行的外壳是
   Tabler 的 navbar / fl-tabs / page-nav，打印时会整条印出来，加上深色 hero 会把
   整页底色打成黑块（浪费墨且不可读）。这里在最后一层统一收口：
   隐藏交互外壳、强制白底、把深色区转成可读的浅底深字。
   ========================================================================== */
@media print {
  /* 交互外壳一律不打印 */
  .navbar, .navbar-vertical, header.navbar,
  .fl-tabs, .page-nav, .page-header .btn-list,
  .btn, .chat__compose, .chat__hints, .filter-bar,
  .skip-link, .toast-stack, .scroll-hint, .mock-float,
  .site-header, .site-footer, .theme-toggle { display: none !important; }

  /* 白底黑字，去掉投影与圆角感 */
  body, .page-wrapper { background: #ffffff !important; }
  .page-body .card, .page-body .panel, .page-body .case-card,
  .page-body .tool, .page-body .viz {
    box-shadow: none !important;
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
    break-inside: avoid;
  }

  /* 首屏深色区转浅底深字（否则整块打成黑） */
  .home-hero {
    background: #ffffff !important;
    color: #0b2a5b !important;
    min-height: 0 !important;
    padding: 0 0 16px !important;
  }
  .home-hero__bg, .home-hero::after { display: none !important; }
  .page-body h1.home-hero__title,
  .page-body h1.home-hero__title em { color: #0b2a5b !important; }
  .page-body .home-hero__lead,
  .page-body .home-hero__points li,
  .page-body .home-hero__eyebrow { color: #334155 !important; }
  .home-hero__eyebrow { border-color: #cbd5e1 !important; background: #f1f5f9 !important; }
  .home-hero__dot { background: #0554a8 !important; box-shadow: none !important; }
  .home-hero__points li::before { border-color: #0554a8 !important; }
  .home-hero__points li::after { border-color: #0554a8 !important; }

  /* 数据带同理 */
  .stat-band { background: #f1f5f9 !important; color: #0b2a5b !important; }
  .stat-band__bg { display: none !important; }
  .page-body .stat-band__item dd,
  .page-body .stat-band__item dt,
  .page-body .stat-band__lead p,
  .page-body .stat-band__lead h2 { color: #0b2a5b !important; }

  /* 表格：加分隔线，避免整片灰 */
  .page-body table > thead > tr > th { background: #f1f5f9 !important; color: #0f172a !important; }
  .page-body table > tbody > tr > td { border-bottom-color: #e2e8f0 !important; }
}

/* ==========================================================================
   15. 降级守护（减少动效 / 强制色）
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* 已在各层分别处理，这里兜底：禁止所有装饰性动画 */
  .scroll-hint__mouse::after,
  .skeleton::after { animation: none !important; }
}

@media (forced-colors: active) {
  /* Windows 高对比度模式：保证边框可见（路由演示机可能开） */
  .page-body .card, .page-body .panel, .page-body .btn,
  .page-body .case-card, .page-body .tool { border: 1px solid CanvasText !important; }
}

/* ==========================================================================
   整幅面板的横向内边距（2026-09-21 补）
   --------------------------------------------------------------------------
   背景：scale-enforce.css 与各页面内联样式都有
        .page-body .shell { padding-inline: 0; }
   把内容容器的横向内边距清零。普通区块靠卡片自身内边距撑着看不出来，
   但首屏与统计带是**带底色/渐变的整幅面板**（.home-hero { padding: 40px 0 }、
   .stat-band { padding: 32px 0 }），于是标题、说明、数字全部贴到面板左右边缘
   （客户截图反馈"边边拥挤、整体很差"）。
   这里给这两类面板的内层容器补回横向内边距；面板背景仍保持整幅铺满，
   因为 padding 不会影响背景绘制区域。
   ========================================================================== */
/* 特异性取 (0,3,0)：页面内联 <style> 里的 `.page-body .shell{padding-inline:0}` 加载更靠后，
   同特异性会压过本规则，所以这里加 .page-body 前缀确保生效。 */
.page-body .home-hero > .shell,
.page-body .home-hero > .home-hero__inner,
.page-body .stat-band > .shell,
.page-body .stat-band > .stat-band__inner {
  padding-inline: 40px;
}

@media (max-width: 720px) {
  .page-body .home-hero > .shell,
  .page-body .home-hero > .home-hero__inner,
  .page-body .stat-band > .shell,
  .page-body .stat-band > .stat-band__inner {
    padding-inline: 20px;
  }
}