/* ─── 管理实战沙盘 v2 │ 全局主题 ──────────────────────────
   图文并茂、商务质感、数据可视化优先
   ─────────────────────────────────────────────────────── */

:root {
  /* ── 主色系 ── */
  --c-primary:        #1B4D3E;     /* 深墨绿 — 主标题、重要操作 */
  --c-primary-light:  #2D6B4F;     /* 中绿 — 活跃状态 */
  --c-primary-bg:     #EAF4E8;     /* 浅绿背景 */
  --c-primary-bg2:    #F4F9F2;     /* 极浅绿背景 */

  /* ── 金色系（强调/成就）── */
  --c-accent:         #B8860B;     /* 暖金 — 强调、标签、数字 */
  --c-accent-light:   #D4A843;     /* 浅金 */
  --c-accent-bg:      #FFF4D1;     /* 金色背景 */
  --c-accent-bg2:     #FFF9E6;     /* 极浅金 */

  /* ── 功能色 ── */
  --c-success:        #22C55E;     /* 成功/良好 */
  --c-warning:        #F59E0B;     /* 警告/关注 */
  --c-danger:         #EF4444;     /* 严重/承压 */
  --c-info:           #3B82F6;     /* 信息/提示 */

  /* ── 中性色 ── */
  --c-dark:           #1A1A2E;     /* 正文深色 */
  --c-body:           #374151;     /* 正文 */
  --c-muted:          #6B7280;     /* 辅助文字 */
  --c-light-muted:    #9CA3AF;     /* 极淡文字 */
  --c-border:         #E5E7EB;     /* 边框 */
  --c-bg:             #FFFFFF;     /* 主背景 */
  --c-bg-warm:        #FAFAF5;     /* 温暖背景 */
  --c-bg-card:        #F9FAFB;     /* 卡片背景 */

  /* ── BSC 维度色 ── */
  --bsc-finance:      #2563EB;     /* 财务健康 — 蓝 */
  --bsc-customer:     #F59E0B;     /* 客户价值 — 金 */
  --bsc-ops:          #10B981;     /* 内部运营 — 绿 */
  --bsc-learning:     #8B5CF6;     /* 学习成长 — 紫 */
  --bsc-risk:         #EF4444;     /* 风险韧性 — 红 */
  --bsc-collab:       #06B6D4;     /* 跨部门协同 — 青 */

  /* ── BSC 等级色 ── */
  --bsc-strain:       #EF4444;     /* 明显承压 */
  --bsc-need:         #F59E0B;     /* 有待加强 */
  --bsc-balanced:     #10B981;     /* 基本平衡 */
  --bsc-good:         #22C55E;     /* 表现良好 */
  --bsc-advantage:    #1B4D3E;     /* 形成优势 */

  /* ── 字体 ── */
  --f-display:  'Playfair Display', 'Noto Serif SC', serif;
  --f-heading:  'DM Sans', 'PingFang SC', 'Noto Sans SC', sans-serif;
  --f-body:     'DM Sans', 'PingFang SC', 'Noto Sans SC', sans-serif;
  --f-mono:     'DM Mono', 'JetBrains Mono', monospace;
  --f-number:   'DM Sans', 'DIN Alternate', sans-serif;

  /* ── 字号 ── */
  --fs-hero:    2.75rem;    /* 44px — 首屏大标题 */
  --fs-h1:      2rem;       /* 32px — 页面标题 */
  --fs-h2:      1.5rem;     /* 24px — 区块标题 */
  --fs-h3:      1.125rem;   /* 18px — 小标题 */
  --fs-body:    0.9375rem;  /* 15px — 正文 */
  --fs-small:   0.8125rem;  /* 13px — 辅助 */
  --fs-xs:      0.6875rem;  /* 11px — 标注 */
  --fs-number:  1.75rem;    /* 28px — 数据数字 */

  /* ── 间距 ── */
  --sp-xs:  0.25rem;
  --sp-sm:  0.5rem;
  --sp-md:  1rem;
  --sp-lg:  1.5rem;
  --sp-xl:  2rem;
  --sp-2xl: 3rem;

  /* ── 圆角 ── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-pill: 9999px;

  /* ── 阴影 ── */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:   0 4px 6px rgba(0,0,0,0.07);
  --shadow-lg:   0 10px 15px rgba(0,0,0,0.1);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);

  /* ── 动画 ── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --duration:  200ms;
}

/* ── 全局基础 ───────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  color: var(--c-body);
  background: var(--c-bg-warm);
  line-height: 1.6;
  margin: 0;
}

/* ── 通用组件样式 ───────────────────────────────────────── */

/* 卡片 */
.card {
  background: var(--c-bg);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-lg);
  transition: box-shadow var(--duration) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-md); }

.card--accent {
  border-left: 4px solid var(--c-accent);
  background: var(--c-accent-bg2);
}

.card--primary {
  border-left: 4px solid var(--c-primary-light);
  background: var(--c-primary-bg2);
}

/* 标签 */
.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-xs) var(--sp-sm);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tag--gold   { background: var(--c-accent-bg); color: var(--c-accent); }
.tag--green  { background: var(--c-primary-bg); color: var(--c-primary-light); }
.tag--info   { background: #EFF6FF; color: var(--c-info); }
.tag--danger { background: #FEF2F2; color: var(--c-danger); }

/* 大数字 */
.num {
  font-family: var(--f-number);
  font-weight: 700;
  font-size: var(--fs-number);
  color: var(--c-primary);
  line-height: 1.1;
}
.num--accent { color: var(--c-accent); }

/* 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-lg);
  border-radius: var(--r-md);
  font-family: var(--f-heading);
  font-size: var(--fs-small);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
}
.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: var(--c-primary-light); }
.btn--accent  { background: var(--c-accent); color: #fff; }
.btn--accent:hover  { background: var(--c-accent-light); }
.btn--outline { background: transparent; border: 2px solid var(--c-primary); color: var(--c-primary); }
.btn--outline:hover { background: var(--c-primary-bg2); }
.btn--ghost   { background: transparent; color: var(--c-body); }
.btn--ghost:hover   { background: var(--c-bg-card); }
.btn--lg     { padding: var(--sp-md) var(--sp-xl); font-size: var(--fs-h3); }

/* 分割线 */
.divider {
  width: 48px;
  height: 3px;
  background: var(--c-accent);
  border-radius: 2px;
  margin: var(--sp-md) 0;
}

.divider--full {
  width: 100%;
  height: 1px;
  background: var(--c-border);
}

/* 图标占位（后续用 SVG 图标替换） */
.icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* BSC 维度色条 */
.bsc-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--c-border);
  overflow: hidden;
}
.bsc-bar__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s var(--ease-out);
}

/* BSC 雷达图占位 */
.bsc-radar {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  background: var(--c-bg-card);
}

/* 排行榜行 */
.rank-row {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--r-md);
  transition: background var(--duration);
}
.rank-row:hover { background: var(--c-bg-card); }
.rank-row__pos {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  font-family: var(--f-number);
  font-weight: 700;
  font-size: var(--fs-small);
}
.rank-row__pos--1 { background: var(--c-accent-bg); color: var(--c-accent); }
.rank-row__pos--2 { background: var(--c-primary-bg); color: var(--c-primary-light); }
.rank-row__pos--3 { background: #F3F4F6; color: var(--c-muted); }

/* 响应式断点 */
@media (max-width: 768px) {
  :root { --fs-hero: 1.75rem; --fs-h1: 1.5rem; --fs-h2: 1.25rem; --fs-number: 1.5rem; }
}
@media (min-width: 1920px) {
  :root { --fs-hero: 3.5rem; --fs-h1: 2.25rem; }
}