/* 灵猫数据 · 品牌主题（蓝色，参考老 cnbeta 配色） */
:root {
  --bg:#0e1420; --surface:#16202f; --surface2:#1d2c3f; --border:#26384d;
  --text:#c4d2e3; --muted:#94a7bd; --faint:#5d7188;
  --accent:#5b9dff; --accent2:#2f6fe0;
  --link:#5b9dff;
  --chip-bg:rgba(74,144,255,.12);
  --shadow:0 2px 14px rgba(0,0,0,.5);
  --header-bg: linear-gradient(180deg, #1c63d6, #0d3a94);
  --header-accent: #0a2c70;
  --header-text: #ffffff;
}

:root[data-theme='light'] {
  --bg:#d9e2ef; --surface:#ffffff; --surface2:#eef2f9; --border:#d3ddee;
  --text:#222222; --muted:#52688a; --faint:#8198b8;
  --accent:#14509e; --accent2:#0d3a94;
  --link:#1457c4;
  --chip-bg:rgba(20,87,196,.08);
  --shadow:0 2px 12px rgba(20,87,196,.08);
  --header-bg: linear-gradient(180deg, #1f6fe0, #1457c4);
  --header-accent: #0d3a94;
  --header-text: #ffffff;
}

/* 基础容器 */
body { background: var(--bg); color: var(--text); }
.app { background: var(--surface); box-shadow: none; }
.page { background: var(--surface) !important; }

/* 顶部导航条颜色已在 global.css 用变量写好，这里只补主题相关覆盖 */
.brand { color: var(--header-text); }
.brand-sub { color: rgba(255,255,255,.75); }

/* 分区标题 */
.section-label { color: var(--muted); }

/* 卡片表面 */
.card, .card-plain {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* 分隔线 */
.divider, .row-divider, .bar-bg { background: var(--border); }

/* 表头 */
.tbl-header { background: var(--surface2); color: var(--muted); }

/* 主文字 */
.debt-int, .metal-price, .index-price, .fx-rate, .br-val,
.ratio-val, .day-total, .tbl-title, .risk-title {
  color: var(--text);
}

/* 次要文字 */
.debt-sym, .debt-dec, .debt-sub, .br-label, .metal-unit, .sub-lbl,
.ratio-lbl, .ratio-eq, .ratio-unit, .index-name, .fx-unit, .fx-box-lbl,
.fx-k, .fx-arr, .rare-date, .rare-symbol, .rare-use, .rare-note,
.auto-month, .auto-tip, .tbl-desc, .risk-desc {
  color: var(--muted);
}

/* 徽章和标签 */
.badge, .card-tag {
  background: var(--chip-bg);
  color: var(--accent);
  border-color: var(--border);
}

.badge.up { color: #10b981; }
.badge.dn { color: #ef4444; }
.badge.flat { color: var(--muted); }

/* 底部 */
.footer {
  border-top: 1px solid var(--border);
  color: var(--muted);
}

.footer-brand { color: var(--text); }