/* ============================================================================
   ems-intl.cn · 统一设计系统 (Design System)  v3.0  ★ 单一事实源 SINGLE SOURCE OF TRUTH
   日期: 2026-09-12
   升级(v3.0 vs v2.3): 视觉精致化（在"工程规范正确"基础上补齐"视觉设计好"）
     ① 模块色收窄到「邮政绿 + 琥珀」双品牌明度梯度，去除天蓝/青绿/深天蓝等蓝青系，
        回到统一品牌调性（6 模块 = 绿主 / 琥珀主 / 深绿 / 墨绿 / 琥珀深 / 绿调青，全在绿·琥珀家族）。
     ② hero 微插画层：SVG 几何航线 + 柔光晕 + 细网格纹理，告别"空绿块"。
     ③ 卡片层次：内描边高光 + 更克制的抬升阴影 + 图标块渐变底，脱离内网后台风。
     ④ KPI 指标卡：大数字 + 色块 + 标签 + 趋势点，具备"数据可视化感"。
     ⑤ 子页面板 .panel：左侧模块色条 + 图标头，强化层级。
     ⑥ 通用件 .feature / .stat / .hero-cta 等子页/首页复用件。
   硬约束（不变）：白底 #fff / 邮政绿 #009B4C / 禁纯黑·紫·暗色·新拟态；颜色·间距·字号·圆角·阴影走 token；
     禁用字体 -apple-system / system-ui / Inter / Roboto；保留 :focus-visible + prefers-reduced-motion。
   用法: <link rel="stylesheet" href="/design-system-v3.css?v=8">
   ※ 合规候选版（.compliant）：已回退 4 条「导航栏铁律」违规项
     （--nav-h 58→56 / 站栏半透明+blur→扁平白底 / brand margin-right 16→14），
     v3 其余视觉增量全部保留。审计见 portal_pipeline/_ds_contract.txt。
   ============================================================================ */

/* ---------- 1. 设计 Token ---------- */
:root {
  /* —— 品牌主色（邮政绿） —— */
  --brand:       #009B4C;
  --brand-deep:  #007A3B;
  --brand-900:   #005C2E;
  --brand-50:    #EAF7F0;
  --brand-100:   #D2EEDD;
  --brand-200:   #B6E3CC;

  /* —— 强调色（琥珀） —— */
  --amber:       #E8912E;
  --amber-deep:  #C9771B;
  --amber-50:    #FCEFD9;
  --amber-100:   #F8E2C2;

  /* —— 中性色 —— */
  --ink:      #1A2723;      /* 主文字（略深，提升纸面对比） */
  --ink-soft: #56655F;
  --ink-400:  #66756F;
  --gray:     #6B7280;
  --line:     #DCEBE6;
  --line-2:   #EDF4F1;
  --bg:       #F4FAF7;
  --surface:  #FFFFFF;

  /* —— 语义色 —— */
  --ok:   #2BA84A;
  --warn: #E8912E;
  --bad:  #D96459;
  --info: #0B6E57;          /* 信息色收归绿调；作文字在 --brand-50 上 5.64:1（原 #0E8A6E 仅 3.91 ✗） */

  /* —— 模块强调色（★v3 收紧：绿/琥珀双品牌明度梯度，无蓝青） ——
     6 模块 = 绿 / 琥珀 / 深绿 / 墨绿 / 琥珀深 / 绿调青，全在绿·琥珀家族 */
  --m-framework: #009B4C;   /* 业务框架图 · 邮政绿 */
  --m-process:   #E8912E;   /* 业务流程梳理 · 琥珀 */
  --m-ozon:      #007A3B;   /* Ozon 运单 · 深绿 */
  --m-materials: #0E8A6E;   /* 物料中心 · 绿调青（品牌安全，非蓝紫） */
  --m-eu-fees:   #C9771B;   /* 欧盟税费 · 琥珀深 */
  --m-tracking:  #005C2E;   /* 运单轨迹 · 墨绿 */
  /* ── 文字安全变体（2026-09-12 a11y 收敛修复）────────────────────
     用途纪律：亮色（--brand / --amber / --m-*）继续承载「实底色块 / 图形 / 色条」；
     凡「浅底上的文字」或「实底承载白字」一律改用下列变体。判据 = WCAG 2.2 SC 1.4.3。
     实测：--brand 作文字 3.63 ✗ / 作实底白字 3.63 ✗ / --amber 2.46 ✗ / --line 作文字 1.16 ✗ */
  --brand-on:   #007F3E;   /* 实底承载白字 5.12:1 */
  --amber-text: #8A6714;   /* 浅底文字 白 5.21 / --bg 4.93 / --amber-50 4.54 */
  --amber-on:   #A8600F;   /* 实底承载白字 4.83:1 */
  --amber-on:   #A8600F;   /* 实底承载白字 4.83:1 */
  /* ── STEP 2 补：文字安全变体（2026-09-12）───────────────
     判据 WCAG 2.2 SC 1.4.3；名单由「浅底 ratio<4.5」自动判定得出，非人工挑选。*/
  --bad-text:   #C1392C;   /* 原 --bad  #D96459 白底 3.03 ✗ */
  --ok-text:    #207E38;   /* 原 --ok   #2BA84A 白底 3.09 ✗ */
  --gray-text:  #666C7A;   /* 原 --gray #6B7280 白底 4.83 ✗ */
  /* 注：模块色（--m-materials 青 / --m-eu-fees 琥珀）作为「卡片文字」的修复需页面配合
     （页面经 --ac 注入模块色），见 _a11y_fix_plan.json 的 step2 与报告页。 */

  /* —— 字体 —— */
  --font-sans: "PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;

  /* —— 字阶 —— */
  --fs-display: clamp(30px, 4.6vw, 48px);
  --fs-h1: 30px;    --fs-h2: 23px;    --fs-h3: 18px;    --fs-h4: 16px;
  --fs-body: 15px;  --fs-sm: 13px;    --fs-xs: 12px;    --fs-eyebrow: 12px;
  --lh: 1.65;      --lh-tight: 1.28;

  /* —— 间距（4 基准） —— */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* —— 圆角 —— */
  --r-sm: 8px;  --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  /* —— 阴影（统一绿色调暗影，禁用纯黑） —— */
  --sh-1: 0 1px 2px  rgba(16,40,28,.05), 0 1px 3px rgba(16,40,28,.06);
  --sh-2: 0 6px 18px rgba(16,40,28,.08);
  --sh-3: 0 14px 34px rgba(16,40,28,.12);
  --sh-4: 0 20px 48px rgba(16,40,28,.16);
  --ring: 0 0 0 3px var(--brand-50);    /* 聚焦/选中环 */

  /* —— 布局 —— */
  --maxw: 1180px;
  --nav-h: 56px;

  /* —— 动效 —— */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .2s;
}

/* ---------- 2. 基础重置 ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-sans); font-size: var(--fs-body);
  line-height: var(--lh); color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img,svg { max-width: 100%; display: block; }
a { color: var(--brand-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { margin: 0 0 var(--sp-3); color: var(--ink); line-height: var(--lh-tight); font-weight: 800; letter-spacing: -.2px; }
h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); }
p { margin: 0 0 var(--sp-3); }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); }

/* ---------- 3. 顶部站点导航 (sitebar) · 扁平白底 + 绿 logo + 药丸导航 ---------- */
.sitebar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.sitebar-in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5);
  height: var(--nav-h); display: flex; align-items: center; gap: 4px;
  overflow-x: auto; white-space: nowrap;
}
.sitebar-in::-webkit-scrollbar { display: none; }
.sitebar .brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; color: var(--brand-deep); font-size: 15px; letter-spacing: .3px;
  margin-right: 14px; flex: none; text-decoration: none;
}
.sitebar .brand:hover { color: var(--brand-deep); text-decoration: none; }
.sitebar .brand svg { width: 24px; height: 24px; color: var(--brand); flex: none;
  filter: drop-shadow(0 2px 5px rgba(0,155,76,.25)); }
.sitebar .spacer { flex: 1; }
.sitebar a {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  color: var(--ink-soft); font-size: 13.5px; font-weight: 500; padding: 9px 15px;
  border-radius: var(--r-pill); transition: background var(--dur), color var(--dur);
  white-space: nowrap; text-decoration: none;
}
.sitebar a:hover { background: var(--brand-50); color: var(--brand-deep); text-decoration: none; }
.sitebar a:active { background: var(--brand-100); }
.sitebar a.active, .sitebar a.cur { background: var(--brand-on); color: #fff; font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,155,76,.28); }
.sitebar a.active:hover, .sitebar a.cur:hover { background: var(--brand-deep); color: #fff; }
.sitebar .soon { color: var(--ink-400); }
.sitebar .soon.active { background: var(--ink-400); }

/* ---------- 4. 英雄区 (hero) · 精致化 ---------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--brand-50) 100%);
  /* 下内边距必须 >= 首页浮岛卡片的上浮量（.entry margin-top:-64px），否则 hero 内容被卡片压住 */
  color: var(--ink); padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--line-2);
}
/* 微插画装饰层：细网格 + 航线弧 + 柔光晕（纯 CSS/SVG，无图片依赖） */
.hero::before {                                   /* 细网格纹理 */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(0,155,76,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,155,76,.05) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 20%, #1a2b26 30%, transparent 75%);
          mask-image: radial-gradient(120% 90% at 70% 20%, #1a2b26 30%, transparent 75%);
}
.hero::after {                                    /* 右上柔光晕 */
  content: ""; position: absolute; right: -80px; top: -90px; width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(0,155,76,.12) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
}
.hero-in { max-width: 820px; margin: 0 auto; padding: 0 var(--sp-5); position: relative; z-index: 1; text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-eyebrow); letter-spacing: 2.5px; text-transform: uppercase;
  font-weight: 700; color: var(--brand-deep);
  padding: 6px 14px; border-radius: var(--r-pill);
  background: #fff; border: 1px solid var(--brand-100);
  box-shadow: var(--sh-1);
}
.hero h1 { font-size: var(--fs-display); margin: var(--sp-4) 0 var(--sp-3); line-height: 1.12; letter-spacing: -1px; color: var(--ink); }
.hero p.lead { font-size: clamp(15px,2vw,18.5px); margin: 0 auto; max-width: 600px; color: var(--ink-soft); line-height: 1.75; }
/* CTA 行 */
.hero-cta { display: inline-flex; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; justify-content: center; }
.hero .trust {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-5); padding: 7px 18px; border-radius: var(--r-pill);
  border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-soft); background: rgba(255,255,255,.7);
}
.hero .trust .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgba(0,155,76,.22); }

/* 强视觉冲击 hero（门户首页） */
.hero-emphasis {
  background:
    radial-gradient(120% 140% at 80% -10%, rgba(255,255,255,.16) 0%, transparent 55%),
    linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 52%, var(--brand-900) 100%);
  color: #fff; border-radius: 0 0 var(--r-xl) var(--r-xl); border-bottom: none; padding: var(--sp-8) 0;
}
.hero-emphasis::before {                        /* 白网格（深绿底上更淡） */
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(120% 100% at 75% 10%, #1a2b26 25%, transparent 80%);
          mask-image: radial-gradient(120% 100% at 75% 10%, #1a2b26 25%, transparent 80%);
  opacity: 1;
}
.hero-emphasis::after { left: -90px; top: -90px; width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(255,255,255,.16) 0%, transparent 70%); }
.hero-emphasis .eyebrow { color: var(--brand-deep); background: #fff; border-color: #fff; }
.hero-emphasis h1 { color: #fff; }
.hero-emphasis p.lead { color: rgba(255,255,255,.94); }
.hero-emphasis .trust { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; }
.hero-emphasis .trust .dot { background: #7CFFB0; box-shadow: 0 0 0 3px rgba(124,255,176,.35); }
.hero-emphasis .btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); }
.hero-emphasis .btn-ghost:hover { background: rgba(255,255,255,.2); border-color: #fff; }

/* ---------- 5. 区块标题 (section header) ---------- */
.sec-head { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-8) 0 var(--sp-4); }
.sec-no {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: #fff; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(0,155,76,.28);
}
.sec-head h2 { margin: 0; font-size: var(--fs-h2); font-weight: 800; line-height: var(--lh-tight); }
.sec-head .h-sub { font-size: 13.5px; color: var(--ink-soft); font-weight: 400; margin-top: 4px; }

/* ---------- 6. 卡片（精致化） ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-4);
  box-shadow: var(--sh-1); transition: box-shadow var(--dur), transform var(--dur), border-color var(--dur);
  position: relative;
}
.card::after {                             /* 顶部内高光，增加纸面质感 */
  content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.card-hover:hover { box-shadow: var(--sh-2); transform: translateY(-3px); border-color: var(--brand-100); }
.card-title { font-size: var(--fs-h3); font-weight: 700; margin-bottom: var(--sp-1); }
.card-sub   { color: var(--ink-soft); font-size: var(--fs-sm); margin-bottom: var(--sp-2); }

/* 浮岛入口卡（门户首页 6 模块） */
.entry-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-5); text-decoration: none; color: inherit;
  box-shadow: var(--sh-1); transition: box-shadow var(--dur), transform var(--dur), border-color var(--dur);
  --ac: var(--brand);
  --ac-text: var(--brand-deep);   /* 卡片文字位；--ac 仍管色条/图标底/边框 */
}
.entry-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--ac); }
/* 卡片模块色只由「左侧色条 + 图标底色」承载；不再叠加角部光晕——
   宽而空的卡片上任何光晕都会悬浮成"污渍"，且琥珀/绿两色的可见度不对称。 */
.entry-card:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: color-mix(in srgb, var(--ac) 35%, var(--line)); }
.entry-card:active { transform: translateY(-1px); box-shadow: var(--sh-2); }
.entry-card .ic {
  width: 54px; height: 54px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ac) 16%, #fff), color-mix(in srgb, var(--ac) 8%, #fff));
  color: var(--ac-text); margin-bottom: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 10px color-mix(in srgb, var(--ac) 18%, transparent);
}
.entry-card .ic svg { width: 27px; height: 27px; }
.entry-card .t { font-size: 19px; font-weight: 800; margin-top: 10px; color: var(--ink); }
.entry-card .sub { font-size: 11.5px; font-weight: 700; color: var(--ac-text); letter-spacing: .4px; text-transform: uppercase; }
.entry-card .desc { font-size: 14px; color: var(--ink-soft); margin-top: 4px; line-height: 1.6; }
.entry-card .go { margin-top: auto; padding-top: 14px; font-size: 14px; font-weight: 700; color: var(--ac-text); display: inline-flex; align-items: center; gap: 6px; }
.entry-card .go .ar { transition: transform var(--dur); }
.entry-card:hover .go .ar { transform: translateX(5px); }
.entry-card.soon { box-shadow: var(--sh-1); }
.entry-card.soon:hover { transform: none; box-shadow: var(--sh-1); }
.entry-card.soon .ic { background: #EEF1F0; color: var(--ink-400); box-shadow: none; }
.entry-card.soon .sub, .entry-card.soon .go { color: var(--ink-400); }
.badge-soon {
  display: inline-block; margin-left: 10px; font-size: 11px; font-weight: 700; letter-spacing: .5px;
  color: #fff; background: #5F7A6F; border-radius: 10px; padding: 2px 9px; vertical-align: middle;
}

/* 卡片网格 */
.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 900px) { .grid-3,.grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; } }

/* ---------- 7. 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 22px; border-radius: var(--r-pill); border: 1px solid transparent;
  font-size: var(--fs-body); font-weight: 600; cursor: pointer; transition: all var(--dur);
  font-family: var(--font-sans); line-height: 1.2; text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(0); box-shadow: var(--sh-1); }
.btn-primary { background: var(--brand-on); color: #fff; box-shadow: 0 6px 16px rgba(0,155,76,.3); }
.btn-primary:hover { background: var(--brand-deep); }
.btn-primary:active { background: var(--brand-deep); }
.btn-accent  { background: var(--amber-on); color: #fff; box-shadow: 0 6px 16px rgba(232,145,46,.3); }
.btn-accent:hover { background: var(--amber-deep); }
.btn-accent:active { background: var(--amber-deep); }
.btn-ghost   { background: #fff; color: var(--brand-deep); border-color: var(--brand-100); }
.btn-ghost:hover { border-color: var(--brand); background: var(--brand-50); }
.btn-ghost:active { background: var(--brand-100); }
.btn-text    { background: transparent; color: var(--brand-deep); padding: 6px 10px; }
.btn-text:hover { background: var(--brand-50); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- 8. 状态标签 (badge) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
}
.badge-ok   { background: var(--brand-50);   color: var(--brand-deep); }
.badge-warn { background: var(--amber-50);   color: var(--amber-text); }
.badge-bad  { background: #FBE9E7;          color: var(--bad-text); }
.badge-info { background: var(--brand-50);  color: var(--info); }
.badge-gray { background: #EEF1F0;          color: var(--gray-text); }

/* ---------- 9. 提示框 (alert) ---------- */
.alert {
  display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); margin-bottom: var(--sp-4); border: 1px solid transparent; align-items: flex-start;
}
.alert .ic { font-size: 18px; line-height: 1.4; flex: none; }
.alert b { font-weight: 700; }
.alert-ok   { background: var(--brand-50);  border-color: var(--brand-100); color: var(--brand-deep); }
.alert-warn { background: var(--amber-50);  border-color: #F4D9A8;          color: var(--amber-text); }
.alert-bad  { background: #FBE9E7;          border-color: #F2C4BF;          color: var(--bad-text); }
.alert-info { background: var(--brand-50); border-color: var(--brand-100); color: var(--info); }

/* ---------- 10. 表格 ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tbl th, .tbl td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--line); }
.tbl th { background: var(--brand-50); color: var(--brand-deep); font-weight: 700; white-space: nowrap; }
.tbl tbody tr:hover { background: var(--bg); }
.tbl td code { background: var(--brand-50); color: var(--brand-deep); padding: 1px 6px; border-radius: 6px; font-size: 12px; }

/* ---------- 11. 表单 ---------- */
.field { margin-bottom: var(--sp-3); }
.field label { display: block; font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: 6px; font-weight: 600; }
.input, .select, .textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: var(--fs-body); font-family: var(--font-sans); background: #fff; color: var(--ink);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.textarea { resize: vertical; min-height: 88px; }

/* ---------- 12. 页脚 ---------- */
.footer {
  margin-top: var(--sp-8); padding: var(--sp-5) 0; border-top: 1px solid var(--line);
  color: var(--gray); font-size: var(--fs-sm); text-align: center; background: var(--surface);
}

/* ---------- 12.2 子页通用件（面包屑 / 面板 / 指标卡 / 区块标题） ---------- */
.page-crumb {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); color: var(--ink-soft); margin-bottom: var(--sp-3);
}
/* 触控目标下限（WCAG 2.2 · 2.5.8 Target Size (Minimum) ≥24×24 CSS px）：
   面包屑链接是行内元素，实测热区仅 24×21 —— 纵向少 3px。
   只补纵向 padding 把行盒抬到 25px，不动颜色 / 字号 / 布局语义。
   （此前各页曾用页内 !important 覆盖自救；已回收进本 SSOT，页面不再内联覆盖通用件。） */
.page-crumb a { color: var(--ink-soft); text-decoration: none; padding: 2px 0; }
.page-crumb a:hover { color: var(--brand-deep); text-decoration: underline; }
.page-crumb .sep { color: var(--ink-400); }
.page-crumb .cur { color: var(--brand-deep); font-weight: 600; }

/* 内容面板：左侧模块色条 + 图标头，强化层级 */
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); overflow: hidden; margin-bottom: var(--sp-5);
  --ac: var(--brand);
  --ac-text: var(--brand-deep);   /* 卡片文字位；--ac 仍管色条/图标底/边框 */
}
.panel::before { content: ""; display: block; height: 4px; background: linear-gradient(90deg, var(--ac), color-mix(in srgb, var(--ac) 55%, #fff)); }
.panel-h {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); background: #fff;
}
.panel-h .ph-ic { width: 30px; height: 30px; border-radius: 9px; display: none; align-items: center; justify-content: center;
  background: var(--brand-50); color: var(--brand-deep); margin-right: 10px; }
.panel-h h2, .panel-h h3 { margin: 0; font-size: var(--fs-h3); font-weight: 800; color: var(--ink); }
.panel-b { padding: var(--sp-4); }

/* 区块标题别名 */
.sec-h { font-size: var(--fs-h3); font-weight: 700; color: var(--brand-deep); margin: 0 0 var(--sp-4); }

/* 指标卡（KPI）：大数字 + 色块 + 标签 + 趋势点 */
.kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-4); box-shadow: var(--sh-1); position: relative; overflow: hidden;
  --ac: var(--brand);
  --ac-text: var(--brand-deep);   /* 卡片文字位；--ac 仍管色条/图标底/边框 */
}
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ac); }
.kpi .num { font-size: 30px; font-weight: 800; color: var(--ink); line-height: 1.05; letter-spacing: -.5px; }
.kpi .num small { font-size: 15px; font-weight: 700; color: var(--ink-soft); margin-left: 3px; }
.kpi .lbl { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 6px; }
.kpi .trend { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 12px; font-weight: 700; }
.kpi .trend.up { color: var(--ok-text); }
.kpi .trend.down { color: var(--bad-text); }
.kpi .ic { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ac) 12%, #fff); color: var(--ac-text); }

/* 子页 hero（浅色带微插画，适合内容/工具子页） */
.subhero {
  position: relative; overflow: hidden; padding: var(--sp-7) 0 var(--sp-6);
  background: linear-gradient(180deg, #fff 0%, var(--brand-50) 100%);
  border-bottom: 1px solid var(--line-2);
}
.subhero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(0,155,76,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,155,76,.05) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(100% 90% at 85% 0%, #1a2b26 20%, transparent 70%);
          mask-image: radial-gradient(100% 90% at 85% 0%, #1a2b26 20%, transparent 70%);
}
.subhero .subhero-in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); position: relative; z-index: 1; }

/* ---------- 12.5 排版工具层 ---------- */
.measure { max-width: 680px; }
.prose { font-size: var(--fs-body); line-height: var(--lh); color: var(--ink); }
.prose p { margin: 0 0 var(--sp-3); }
.prose ul, .prose ol { margin: 0 0 var(--sp-3); padding-left: 1.4em; }
.prose li { margin: 0 0 var(--sp-1); }
.prose h2, .prose h3, .prose h4 { margin: var(--sp-5) 0 var(--sp-2); line-height: var(--lh-tight); color: var(--ink); }
.prose img { max-width: 100%; border-radius: var(--r-md); margin: var(--sp-3) 0; }
.prose .lead { font-size: var(--fs-body); color: var(--ink-soft); }
.stack   > * + * { margin-top: var(--sp-3); }
.stack-1 > * + * { margin-top: var(--sp-2); }
.stack-2 > * + * { margin-top: var(--sp-4); }
.stack-3 > * + * { margin-top: var(--sp-5); }

/* ---------- 13. 工具类 ---------- */
.mt-1{margin-top:var(--sp-1)} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)} .mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)}
.mb-1{margin-bottom:var(--sp-1)} .mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)}
.tc{text-align:center} .tr{text-align:right} .muted{color:var(--ink-soft)}
.nowrap{white-space:nowrap} .flex{display:flex} .gap-2{gap:var(--sp-2)} .gap-3{gap:var(--sp-3)}
.fz-sm{font-size:var(--fs-sm)} .fz-xs{font-size:var(--fs-xs)} .fw-7{font-weight:700}

/* ---------- 14. 全局焦点可见性 ---------- */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: inherit; }
a:focus-visible, .sitebar a:focus-visible, .entry-card:focus-visible, .btn:focus-visible,
.kpi-card:focus-visible, .cust-card:focus-visible, .pc:focus-visible, .card:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; text-decoration: none;
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; }

/* ---------- 15. 动效降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}