/* =====================================================
 * OPC 设计令牌（Design Tokens）· 与 UI 原型 V2.0 对齐
 * 单一真相源 · 所有页面 link 一行即统一视觉
 * ===================================================== */

:root {
  /* ===== 品牌色 - 藏青（navy） 11 阶 ===== */
  --navy-50:  #F4F6F8;
  --navy-100: #E3E8EF;
  --navy-200: #C7D0DB;
  --navy-300: #9CABC0;
  --navy-400: #6B7D98;
  --navy-500: #4C5F7A;
  --navy-600: #334660;
  --navy-700: #20304A;
  --navy-800: #16273D;
  --navy-900: #0E1B2E;   /* 主色 - 帝苏 */
  --navy-950: #070F1A;

  /* ===== 品牌色 - 金（gold） 8 阶 ===== */
  --gold-50:  #FCF9F0;
  --gold-100: #F7EFD9;
  --gold-200: #EFE0B8;
  --gold-300: #E3C98A;
  --gold-400: #D4B05F;
  --gold-500: #C9A24B;   /* 主色 - 金 */
  --gold-600: #A68334;
  --gold-700: #856429;

  /* ===== 中性灰（slate） 10 阶 ===== */
  --slate-0:   #FFFFFF;
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* ===== 语义色 ===== */
  --success-50:#ECFDF5;  --success-500:#10B981;  --success-600:#059669;
  --warning-50:#FFFBEB;  --warning-500:#F59E0B;  --warning-600:#D97706;
  --error-50:  #FEF2F2;  --error-500:  #EF4444;  --error-600:  #DC2626;
  --info-50:   #EFF6FF;  --info-500:   #3B82F6;  --info-600:   #2563EB;
  --purple-500:#8B5CF6;  --purple-600: #7C3AED;

  /* ===== 间距（4px 基线） ===== */
  --s1:4px;  --s2:8px;  --s3:12px;
  --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px;

  /* ===== 圆角 ===== */
  --r8:8px;  --r10:10px; --r12:12px;
  --r14:14px; --r16:16px; --r20:20px; --r24:24px;
  --rfull:999px;

  /* ===== 阴影 ===== */
  --shadow-xs:0 1px 2px rgba(15,23,42,.05);
  --shadow-sm:0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 4px 6px -1px rgba(15,23,42,.07), 0 2px 4px -2px rgba(15,23,42,.05);
  --shadow-lg:0 10px 15px -3px rgba(15,23,42,.08), 0 4px 6px -4px rgba(15,23,42,.05);
  --shadow-xl:0 20px 25px -5px rgba(15,23,42,.1), 0 8px 10px -6px rgba(15,23,42,.05);
  --shadow-gold:0 0 40px rgba(201,162,75,.18);

  /* ===== 字体 ===== */
  --font-sans:"SF Pro Display","Inter",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  --font-mono:"SF Mono",Monaco,"Cascadia Code",ui-monospace,monospace;

  /* ===== 背景 / 表面 ===== */
  --bg:        var(--slate-100);
  --bg-card:   var(--slate-0);
  --bg-dark:   var(--navy-900);

  /* ============================
   * 本地别名 bridge - 让现有代码 0 改动
   * 保留 dashboard / m/app.css 已用色板 → 指向 V2.0 统一令牌
   * ============================ */
  --navy:  var(--navy-900);   /* 原硬编码 #0E1B2E */
  --navy2: var(--navy-800);   /* 原硬编码 #16273f */
  --gold:  var(--gold-500);   /* 原硬编码 #C9A24B */
  --gold2: #e0bd6f;           /* 旧 hover 色 */
  --line:  var(--slate-200);  /* 原硬编码 #e3e8ef */
  --card:  var(--slate-0);    /* 原硬编码 #ffffff */
  --muted: var(--slate-500);  /* 原硬编码 #6b7686 */
  --ok:    var(--success-500);/* 原硬编码 #2e9e6b */
  --warn:  var(--warning-500);/* 原硬编码 #d98a2b */
  --bad:   var(--error-500);  /* 原硬编码 #d9534f */
  --info:  var(--info-500);   /* 原硬编码 #2e6bd9 */
  --shadow: var(--shadow-sm);
  --shadow-lg-token: 0 8px 30px rgba(14,27,46,.15);
  --radius: 14px;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ===== 基础排版（与 V2.0 一致） ===== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--slate-700);
  font-size: 14px;
  line-height: 1.5;
}

/* ===== App bar（粘性顶部 + 渐变藏青 + 金色 active tab）===== */
.appbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: var(--s4);
  padding: 12px 28px;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-800));
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow-lg);
  color: #fff;
}

/* ===== 桌面 shell：sidebar + main（V2.0 原型 max-width: 1500px）===== */
.desk-wrap {
  display: flex; gap: var(--s5);
  max-width: 1500px; margin: 0 auto;
  padding: 0 var(--s6) var(--s8);
}
.sidebar {
  width: 220px; flex-shrink: 0;
  background: var(--navy-900);
  border-radius: var(--r20); padding: var(--s5);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-xl);
  position: sticky; top: 84px;
  height: calc(100vh - 100px);
  color: #fff;
}
.smenu { display: flex; flex-direction: column; gap: 4px; margin-top: var(--s4); }
.smenu a {
  display: flex; align-items: center; gap: 12px;
  color: var(--navy-200); text-decoration: none;
  font-size: 13px; font-weight: 600;
  padding: 11px 12px; border-radius: var(--r12); transition: .15s;
}
.smenu a:hover { background: rgba(255,255,255,.06); color: #fff; }
.smenu a.on {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: var(--navy-900);
  box-shadow: 0 4px 14px rgba(201,162,75,.35);
}

/* ===== Page header（Linear 风格）===== */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s5); gap: var(--s4);
}
.page-title {
  display: flex; align-items: center; gap: var(--s3);
}
.page-title h1 {
  font-size: 24px; font-weight: 800;
  color: var(--navy-900); letter-spacing: -.3px;
  margin: 0;
}

/* ===== KPI 行（4 / 6 列）===== */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4); margin-bottom: var(--s5);
}
.kpi-row.hero { grid-template-columns: repeat(6, 1fr); }

/* ===== KPI 卡（统一）===== */
.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--slate-200);
  border-radius: var(--r16);
  padding: var(--s5);
  box-shadow: var(--shadow-sm);
}
.kpi-title { font-size: 12px; font-weight: 600; color: var(--slate-500); margin-bottom: 8px; }
.kpi-value { font-size: 28px; font-weight: 800; color: var(--navy-900); line-height: 1; }
.kpi-unit  { font-size: 13px; font-weight: 700; color: var(--slate-500); margin-top: 4px; }
.kpi-delta { font-size: 12px; font-weight: 700; margin-top: 8px; }

/* ===== Panel / 卡片 ===== */
.panel {
  background: var(--bg-card);
  border: 1px solid var(--slate-200);
  border-radius: var(--r20);
  padding: var(--s5);
  box-shadow: var(--shadow-sm);
}
.panel.glass {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
  backdrop-filter: blur(16px);
  color: #fff;
}
.panel-title {
  font-size: 15px; font-weight: 800;
  color: var(--navy-900);
  display: flex; align-items: center; gap: 8px;
  letter-spacing: -.2px;
}

/* ===== 主区段强制宽度对齐（V2.0 原型 max-width: 1500px + 24/40 padding）===== */
@media (min-width: 1240px) {
  .main-content { max-width: 1500px; margin: 0 auto; padding: var(--s6) var(--s10); }
}
@media (max-width: 1239px) {
  .main-content { padding: var(--s5) var(--s5); }
}

/* ============================================================
 * 学员 PWA · V2.0 iPhone 14 Pro 仿真 frame + 暗色玻璃面板
 * 与"OPC孵化器AI工作中台_UI原型_学员端_移动端_V2.0.html"对齐
 * ============================================================ */
.phone-wrap {
  display: flex; justify-content: center; align-items: flex-start;
  padding-bottom: var(--s8);
}
.iphone {
  width: 393px; height: 852px;
  background: #111;
  border-radius: 56px;
  padding: 12px;
  box-shadow: 0 40px 90px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.1);
  position: relative;
}
.iphone-notch {
  position: absolute; left: 50%; top: 12px;
  transform: translateX(-50%);
  width: 126px; height: 34px;
  background: #000; border-radius: 0 0 22px 22px;
  z-index: 10;
}
.iphone-screen {
  width: 100%; height: 100%;
  background: var(--slate-50);  /* V2.0 学员端：浅色 #FAFBFC */
  border-radius: 44px;
  overflow: hidden; display: flex; flex-direction: column;
  position: relative;
  color: var(--slate-700);
}

/* 玻璃 panel（PWA 暗色卡）*/
.panel.glass.pwa {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
  backdrop-filter: blur(16px);
  color: #fff;
}

/* V2.0 风格的 Chat bubble（与 V2.0 原型对齐：me 金色 / ai 白色 + slate 描边） */
.bubble.v20 {
  border-radius: var(--r16);
  font-size: 14px; line-height: 1.55;
  padding: 10px 12px;
}
.bubble.me.v20 {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: var(--navy-900);
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 12px rgba(201,162,75,.25);
}
.bubble.ai.v20 {
  background: var(--slate-0);
  color: var(--slate-700);
  border: 1px solid var(--slate-200);
  border-bottom-left-radius: 4px;
}

/* V2.0 进度环（替换硬编码 8px stroke 的 ring-fg） */
.ring.v20 .ring-fg {
  stroke-width: var(--s2, 8px);
  stroke: var(--gold-500);
  filter: drop-shadow(0 0 4px rgba(201,162,75,.35));
}
.ring.v20 .ring-bg { stroke: rgba(255,255,255,.1); }

/* =====================================================================
   三档断点差异化（V2.0 核心增强）
   - desktop ≥ 1024px : 完整 sidebar + 6 列 KPI + desk-wrap 1500px
   - pad  768~1023px : 折叠 sidebar（drawer）+ 3 列 KPI + desk-wrap 100%
   - mobile ≤ 767px : bottom-nav + 2 列 KPI + 全宽 + 单列流
   ===================================================================== */

/* ---- 默认桌面版（保持 V2.0 原貌） ---- */
:root {
  --bp: "desktop";
  --grid-kpi-cols: repeat(6, 1fr);
  --sidebar-w: 220px;
  --appbar-h: 64px;
  --content-pad: 24px;
}

/* ---- 平板：折叠 sidebar ---- */
@media (max-width: 1023px) and (min-width: 768px) {
  :root {
    --bp: "pad";
    --grid-kpi-cols: repeat(3, 1fr);
    --sidebar-w: 0px;
    --content-pad: 20px;
  }
  .sidebar { transform: translateX(-100%); transition: transform .25s; }
  .sidebar.drawer-open { transform: translateX(0); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
  .desk-wrap { gap: var(--s4); }
}

/* ---- 移动：bottom-nav + FAB + 单列 ---- */
@media (max-width: 767px) {
  :root {
    --bp: "mobile";
    --grid-kpi-cols: repeat(2, 1fr);
    --sidebar-w: 0px;
    --appbar-h: 56px;
    --content-pad: 14px;
  }
  body { padding-bottom: 64px; }    /* 给 bottom-nav 留位 */
  .sidebar { display: none; }       /* 桌面 sidebar 在移动端不显示 */
  .desk-wrap {
    flex-direction: column;
    gap: var(--s3);
    max-width: 100%;
    padding: 0 var(--content-pad);
  }
  .kpi-row.hero { grid-template-columns: repeat(2, 1fr) !important; gap: var(--s2); }
  .panel { padding: var(--s3); border-radius: var(--r12); }
  .panel h3 { font-size: var(--fs-h3-m); }
  .iphone {
    width: 100%; max-width: 393px;
    height: auto; aspect-ratio: 393 / 852;
    margin: 0 auto;
    border-radius: 36px;
  }
  .iphone-notch { width: 110px; height: 26px; }
  .page-title h1 { font-size: 18pt; }
  .appbar-title { font-size: 14pt; }

  /* 移动专属组件 */
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 60px;
    background: var(--navy-900);
    border-top: 1px solid var(--navy-700);
    z-index: 50;
    box-shadow: 0 -4px 20px rgba(14, 27, 46, 0.15);
  }
  .bottom-nav a {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px;
    color: var(--slate-400);
    font-size: 10pt;
    text-decoration: none;
    transition: color .15s;
  }
  .bottom-nav a.active { color: var(--gold-500); }
  .bottom-nav a .ico { font-size: 18pt; line-height: 1; }

  .fab {
    display: flex;
    position: fixed;
    right: 16px; bottom: 76px;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
    color: var(--navy-900);
    font-size: 24pt;
    align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(201, 162, 75, 0.4);
    z-index: 49;
    text-decoration: none;
    cursor: pointer;
    border: none;
  }

  /* 折叠抽屉顶部按钮 */
  .mobile-back-bar {
    display: flex; align-items: center; gap: var(--s2);
    padding: var(--s2) var(--content-pad);
    background: var(--navy-900);
    color: var(--gold-500);
    font-size: 14pt;
  }
  .mobile-back-bar .ico { font-size: 18pt; }

  /* 折叠 timeline 节点 */
  .journey-timeline {
    flex-direction: column !important;
    gap: var(--s2) !important;
  }
  .journey-timeline .timeline-track { display: none; }
  .journey-timeline .node {
    width: 100% !important;
    min-width: 0 !important;
    align-self: stretch !important;
  }

  /* KPI 卡紧凑 */
  .kpi-card { padding: var(--s2); }
  .kpi-card .kpi-value { font-size: 22pt; }
  .kpi-card .kpi-label { font-size: 9pt; }

  /* journey 移动端节点卡片 */
  .journey-card { padding: var(--s3); }
  .journey-card h3 { font-size: 12pt; }
}

/* 桌面：隐藏移动专属元素 */
@media (min-width: 1024px) {
  .bottom-nav, .fab, .mobile-back-bar { display: none !important; }
}

/* 大屏扩展（≥1280px）：更多列与更宽布局 */
@media (min-width: 1280px) {
  .kpi-row.hero { grid-template-columns: repeat(6, 1fr); }
  .desk-wrap { max-width: 1500px; }
}

/* =====================================================================
   V3.0 美学系统 · 顶级视觉专家级（追加块）
   - 8pt baseline grid 字号 scale（标准 6 阶梯）
   - 5 层级动效曲线 + 6 层级 z-index
   - 微动效（hover lift / fadeInUp / pulse / shimmer / stagger 入场）
   - Skeleton loading + 空状态 + Focus ring 2px 金色
   - 暗色模式自动派生（prefers-color-scheme）
   - 标准容器（narrow 800 / wide 1500 / fluid 100%）左右对称
   ===================================================================== */

/* ===== 字号 scale（标准 6 阶梯 + clamp 流体） ===== */
:root {
  --fs-display: clamp(36px, 4.5vw, 56px);   /* hero 大标题 */
  --fs-h1:      clamp(28px, 3.5vw, 44px);   /* 一级标题 */
  --fs-h2:      clamp(22px, 2.5vw, 32px);   /* 二级 */
  --fs-h3:      24px;
  --fs-h4:      20px;
  --fs-body-lg: 16px;
  --fs-body:    14px;
  --fs-caption: 12px;
  --fs-mono:    13px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-base:   1.55;
  --lh-loose:  1.75;

  /* ===== 5 层级动效曲线 ===== */
  --ease-spring:  cubic-bezier(.4, 1.4, .6, 1);     /* 弹性回弹 */
  --ease-elegant: cubic-bezier(.25, .46, .45, .94); /* 优雅 */
  --ease-quick:   cubic-bezier(.22, .61, .36, 1);   /* quick */
  --ease-out:     cubic-bezier(0, 0, .2, 1);
  --d-fast:       150ms;
  --d-base:       250ms;
  --d-slow:       400ms;

  /* ===== Z-index scale ===== */
  --z-base:     1;
  --z-sidebar:  30;
  --z-appbar:   50;
  --z-fab:      60;
  --z-nav:      70;
  --z-modal:    100;
  --z-toast:    200;
  --z-tooltip:  300;
}

/* ===== 标准容器（左右对称） ===== */
.container-narrow { max-width: 800px;  margin: 0 auto; padding: 0 var(--s6); }
.container-wide   { max-width: 1500px; margin: 0 auto; padding: 0 var(--s8); }
.container-fluid  { max-width: 100%;   padding: 0 var(--s8); }

/* ===== 微动效 ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes shimmer {
  0%   { background-position: -468px 0; }
  100% { background-position:  468px 0; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes rotate {
  to { transform: rotate(360deg); }
}

.fade-in-up  { animation: fadeInUp var(--d-slow) var(--ease-elegant) both; }
.fade-in     { animation: fadeIn var(--d-base) var(--ease-quick) both; }

/* stagger 入场（每个子元素延迟 50ms） */
.stagger > * { animation: fadeInUp var(--d-slow) var(--ease-elegant) both; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 50ms; }
.stagger > *:nth-child(3) { animation-delay: 100ms; }
.stagger > *:nth-child(4) { animation-delay: 150ms; }
.stagger > *:nth-child(5) { animation-delay: 200ms; }
.stagger > *:nth-child(6) { animation-delay: 250ms; }
.stagger > *:nth-child(7) { animation-delay: 300ms; }
.stagger > *:nth-child(8) { animation-delay: 350ms; }

/* ===== Skeleton loading ===== */
.skeleton {
  background: linear-gradient(90deg, #E2E8F0 0%, #F1F5F9 50%, #E2E8F0 100%);
  background-size: 936px 100%;
  background-repeat: no-repeat;
  animation: shimmer 1.5s infinite linear;
  border-radius: var(--r8);
}
.skeleton-text { height: 14px; margin: 8px 0; }
.skeleton-card  { height: 120px; margin: 12px 0; }

/* ===== Hover lift（卡片悬停微微抬起） ===== */
.hover-lift {
  transition: transform var(--d-base) var(--ease-elegant),
              box-shadow var(--d-base) var(--ease-elegant);
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

/* ===== Focus ring（无障碍 - 2px 金色） ===== */
*:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

/* ===== 空状态 ===== */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s3); padding: var(--s12) var(--s6);
  text-align: center; color: var(--slate-500);
}
.empty-state .ico { font-size: 64px; opacity: 0.3; line-height: 1; }
.empty-state h3 { margin: 0; font-size: 18px; color: var(--slate-700); }

/* ===== Logo 容器 ===== */
.brand-logo {
  display: inline-flex; align-items: center; gap: var(--s3);
  text-decoration: none; color: inherit;
  transition: opacity var(--d-base) var(--ease-quick);
}
.brand-logo:hover { opacity: 0.85; }
.brand-logo .ds-logo-img {
  width: 40px; height: 40px;
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}
.brand-logo-lg .ds-logo-img { width: 64px; height: 64px; border-radius: 16px; }
.brand-logo-sm .ds-logo-img { width: 28px; height: 28px; border-radius: 7px; }

/* ===== Heading 系统升级 ===== */
.h-display {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--navy-900);
  margin: 0 0 var(--s3) 0;
}
.h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--navy-900);
  margin: 0 0 var(--s4) 0;
}
.h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--navy-900);
  margin: 0 0 var(--s3) 0;
}
.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-base);
  color: var(--slate-600);
  margin: 0 0 var(--s5) 0;
}

/* ===== 按钮系统升级 ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 10px 20px;
  border-radius: var(--r10);
  font-family: inherit;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--d-fast) var(--ease-quick);
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: var(--navy-900);
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(201,162,75,.32);
}
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  background: var(--slate-0);
  color: var(--navy-900);
  border-color: var(--slate-200);
}
.btn-secondary:hover { background: var(--slate-50); border-color: var(--slate-300); }
.btn-ghost {
  background: transparent;
  color: var(--navy-900);
}
.btn-ghost:hover { background: var(--slate-100); }
.btn-lg { padding: 14px 28px; font-size: 16px; border-radius: var(--r12); }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: var(--r8); }

/* ===== Card 升级 ===== */
.card {
  background: var(--bg-card);
  border-radius: var(--r16);
  padding: var(--s6);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--slate-200);
  transition: box-shadow var(--d-base) var(--ease-elegant);
}
.card:hover { box-shadow: var(--shadow-md); }
.card-glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.card-dark {
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
  color: var(--slate-100);
  border: 1px solid var(--navy-700);
}

/* ===== Tag / Badge ===== */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border-radius: var(--rfull);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--slate-100);
  color: var(--slate-700);
}
.tag-success { background: var(--success-50); color: var(--success-600); }
.tag-warning { background: var(--warning-50); color: var(--warning-600); }
.tag-error   { background: var(--error-50);   color: var(--error-600); }
.tag-gold    { background: linear-gradient(135deg, var(--gold-50), var(--gold-100)); color: var(--gold-700); }
.tag-navy    { background: var(--navy-50);  color: var(--navy-700); }

/* ===== Tag dot indicator（小圆点状态指示） ===== */
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
.dot-success { background: var(--success-500); box-shadow: 0 0 0 3px var(--success-50); }
.dot-warning { background: var(--warning-500); box-shadow: 0 0 0 3px var(--warning-50); }
.dot-error   { background: var(--error-500);   box-shadow: 0 0 0 3px var(--error-50); }
.dot-gold    { background: var(--gold-500);    box-shadow: 0 0 0 3px var(--gold-50); }

/* ===== Divider / 响应式间距 ===== */
.divider {
  border: none;
  border-top: 1px solid var(--slate-200);
  margin: var(--s6) 0;
}
.section {
  padding: var(--s8) 0;
}
.section-lg { padding: var(--s12) 0; }

/* ===== 左右对称工具 ===== */
.pad-x { padding-left: var(--s8); padding-right: var(--s8); }
.pad-x-lg { padding-left: var(--s12); padding-right: var(--s12); }
.center { margin: 0 auto; }
.center-flex { display: flex; align-items: center; justify-content: center; }

/* ===== 顶部 KPI hero（让右侧不顶到边） ===== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
  margin: 0 0 var(--s8) 0;
}
@media (min-width: 1280px) {
  .kpi-grid { grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
}
@media (max-width: 1023px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .kpi-grid { grid-template-columns: 1fr; }
}

/* ===== Dark mode 自动派生 ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0B0F1A;
    --bg-card:   #0E1B2E;
    --slate-50:  #1A2436;
    --slate-100: #1F2C42;
    --slate-200: #2A3850;
    --slate-300: #3D4F6F;
    --slate-700: #E2E8F0;
    color-scheme: dark;
  }
  body { color: var(--slate-100); background: var(--bg); }
  .card, .panel { border-color: var(--slate-200); }
  .empty-state { color: var(--slate-300); }
  .empty-state h3 { color: var(--slate-700); }
  .skeleton {
    background: linear-gradient(90deg, #1F2C42 0%, #2A3850 50%, #1F2C42 100%);
  }
}

/* ===== 打印优化（证书 A4 PDF） ===== */
@media print {
  .appbar, .sidebar, .bottom-nav, .fab, .no-print { display: none !important; }
  body { background: #fff; }
  .panel { box-shadow: none; border: 1px solid #ddd; }
}

/* ===== V3.1 多租户主题（DS 主品牌色 navy 固定，accent 色随租户切换）=====
   触发：在 <html data-tenant="t_baida|t_disu"> 切换
   覆盖 --gold/--gold2/--gold-500 三个 token，所有用 var(--gold) 的元素（按钮高亮、节点 dot、CTA、pills 强调色、cert 边框、kpi 强调）都自动跟随
   各租户主题色：
     t_baida   百达OPC服装尾货社区（incubator 暖色商业）：金色系 #C9A24B
     t_disu    帝苏产业咨询内训（internal 专业稳重）：宝蓝系 #2E6BD9
*/
[data-tenant="t_baida"] {
  --gold:        #C9A24B;
  --gold2:       #A6802E;
  --gold-500:    #D9B560;
  --gold-300:    #E8C97A;
  --gold-700:    #8E6920;
  --accent:      #C9A24B;
  --accent-2:    #E0A24A;
  --accent-soft: rgba(201, 162, 75, .15);
}
[data-tenant="t_disu"] {
  --gold:        #2E6BD9;
  --gold2:       #1E4DA0;
  --gold-500:    #3D7AE0;
  --gold-300:    #6B95E8;
  --gold-700:    #143A85;
  --accent:      #2E6BD9;
  --accent-2:    #1E4DA0;
  --accent-soft: rgba(46, 107, 217, .15);
}
/* 主题色预览徽章（顶部租户切换器用） */
.tenant-theme-chip {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); margin-right: 4px; vertical-align: middle;
  box-shadow: 0 0 0 3px var(--accent-soft);
}