/* ============================================================
   设计系统 v4 · 高管简报 (Executive Brief)
   受众：老板 / 运营总监——10 秒看懂"赚不赚钱、涨还是跌、哪里要管"。
   原则：克制留白、大字有层级、说人话；涨跌(绿/红)是唯一的视觉焦点。
   数字用无衬线等宽对齐(tabular)，不用终端等宽字，读起来像报表不像终端。
   保留全部 ds- 类名与变量，业务 JS 无需改动。
   ============================================================ */

:root {
  --ink: #1f2733;            /* 深板岩：导航/标题 */
  --primary: #223049;
  --link: #2c5c8f;           /* 商务蓝：按钮/链接/交互 */
  --link-hover: #316aa5;
  --link-active: #244f7c;

  /* 涨跌语义（本设计的视觉焦点） */
  --up: #12805c;             /* 绿：好的方向 */
  --up-soft: rgba(18,128,92,.12);
  --down: #c0362c;           /* 红：坏的方向 */
  --down-soft: rgba(192,54,44,.12);
  --success: #12805c;
  --warning: #b26a00;
  --danger: #c0362c;
  --accent: #c0362c;

  /* 中性 */
  --bg: #f4f6f8;
  --card-bg: #ffffff;
  --card: #ffffff;
  --text: #1f2733;
  --muted: #66707e;
  --faint: #94a0ad;
  --border: #e5e8ee;
  --hover: #f6f8fa;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow-card: 0 1px 2px rgba(31,39,51,.04), 0 8px 24px rgba(31,39,51,.05);

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI",
               "PingFang SC", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  /* 数字：无衬线 + 等宽表格数字（对齐但不"终端"） */
  --num: var(--font-sans);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.004em;
}

h1,h2,h3,h4 { font-weight: 650; letter-spacing: -0.02em; color: var(--ink); }
a { color: var(--link); text-decoration: none; }
::selection { background: rgba(44,92,143,.16); }

.ds-num, .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -.01em; }
.ds-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(31,39,51,.2); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(31,39,51,.36); background-clip: content-box; }

/* ---------- 导航 ---------- */
.ds-navbar {
  display: flex; align-items: center; gap: .5em;
  background: var(--ink); color: #eef1f6;
  padding: 0 1.6em; height: 56px; position: sticky; top: 0; z-index: 100;
}
.ds-navbar-brand { font-size: 15px; font-weight: 700; color: #fff; margin-right: 2em; white-space: nowrap; }
.ds-navbar-menu { display: flex; gap: .15em; flex: 1; }
.ds-navbar-menu a {
  color: rgba(238,241,246,.6); padding: .5em .95em; font-size: 14px; border-radius: 8px;
  position: relative; transition: color .16s ease, background .16s ease;
}
.ds-navbar-menu a:hover { color: #fff; background: rgba(255,255,255,.07); }
.ds-navbar-menu a.active { color: #fff; background: rgba(255,255,255,.1); }
.ds-navbar-user { display: flex; align-items: center; gap: .7em; font-size: 13px; color: rgba(238,241,246,.78); }

/* ---------- 主内容 ---------- */
.ds-main { padding: 1.8em 1.8em 3.5em; max-width: 1400px; margin: 0 auto; }

/* ---------- 卡片 ---------- */
.ds-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.5em 1.7em; box-shadow: var(--shadow-card); margin-bottom: 1.2em;
}
.ds-card-title {
  font-size: 15px; font-weight: 650; color: var(--ink);
  margin-bottom: 1.1em; display: flex; align-items: center; justify-content: space-between; gap: .5em;
}
.ds-card-title .sub { font-size: 12px; font-weight: 400; color: var(--faint); }

/* ---------- 头条 KPI（大字 + 环比） ---------- */
.ds-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.1em; }
.ds-kpi { padding: .2em .2em; }
.ds-kpi + .ds-kpi { border-left: 1px solid var(--border); padding-left: 1.4em; }
.ds-kpi-label { font-size: 13px; color: var(--muted); font-weight: 500; }
.ds-kpi-value { font-variant-numeric: tabular-nums; font-size: 34px; font-weight: 750;
  color: var(--ink); line-height: 1.1; margin: .18em 0 .28em; letter-spacing: -.02em; }
.ds-kpi-value.lg { font-size: 44px; }
.ds-kpi-foot { display: flex; align-items: center; gap: .5em; font-size: 12.5px; color: var(--faint); }

/* 环比胶囊：视觉焦点 */
.ds-delta { display: inline-flex; align-items: center; gap: .22em; font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 700; padding: .16em .55em; border-radius: 7px; }
.ds-delta-up { color: var(--up); background: var(--up-soft); }
.ds-delta-down { color: var(--down); background: var(--down-soft); }
.ds-delta-flat { color: var(--muted); background: rgba(31,39,51,.06); }
.ds-delta-new { color: var(--link); background: rgba(44,92,143,.12); }

@media (max-width: 720px) {
  .ds-kpi + .ds-kpi { border-left: none; padding-left: .2em; }
}

/* ---------- 迷你趋势条 ---------- */
.ds-trendbox { height: 64px; position: relative; margin-top: .6em; }

/* ---------- 排行榜 ---------- */
.ds-rank { display: flex; flex-direction: column; }
.ds-rank-row { display: grid; grid-template-columns: 1.6em 1fr auto auto; align-items: center;
  gap: .8em; padding: .6em 0; border-bottom: 1px solid var(--border); }
.ds-rank-row:last-child { border-bottom: none; }
.ds-rank-no { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--faint); font-size: 13px; text-align: center; }
.ds-rank-no.top { color: var(--link); }
.ds-rank-name { font-weight: 550; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-rank-name .meta { color: var(--faint); font-weight: 400; font-size: 12px; }
.ds-rank-val { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink); text-align: right; }
.ds-rank-bar { grid-column: 2 / 5; height: 4px; border-radius: 3px; background: var(--hover); overflow: hidden; margin-top: -.2em; }
.ds-rank-bar > i { display: block; height: 100%; background: var(--link); border-radius: 3px; }

/* ---------- 按钮 ---------- */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  padding: .5em 1.1em; border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 14px; font-weight: 550; font-family: inherit; line-height: 1.2;
  background: var(--link); color: #fff;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, opacity .16s ease; }
.ds-btn:hover { background: var(--link-hover); }
.ds-btn:active { background: var(--link-active); }
.ds-btn:disabled { opacity: .4; cursor: not-allowed; }
.ds-btn-primary { background: var(--link); color: #fff; }
.ds-btn-primary:hover { background: var(--link-hover); }
.ds-btn-danger { background: var(--danger); color: #fff; }
.ds-btn-outline { background: #fff; border: 1px solid var(--border); color: var(--ink); }
.ds-btn-outline:hover { background: var(--hover); border-color: #d6dbe4; }
.ds-btn-outline:disabled { background: #fff; }

/* ---------- 输入 / 下拉 ---------- */
.ds-input, input[type="date"].ds-input, select.ds-input {
  appearance: none; -webkit-appearance: none; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .5em .75em; font-size: 14px; font-family: inherit;
  color: var(--text); line-height: 1.3; transition: border-color .15s ease, box-shadow .15s ease; }
.ds-input:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px rgba(44,92,143,.16); }
select.ds-input { padding-right: 2em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2366707e' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7em center; }

/* ---------- 分段选择器 ---------- */
.ds-segbar { display: inline-flex; gap: .2em; padding: .25em; background: #e9edf2; border-radius: 12px; border: 1px solid var(--border); }
.ds-seg { border: none; background: transparent; color: var(--muted); font-family: inherit; font-size: 13.5px;
  font-weight: 600; padding: .45em 1em; border-radius: 9px; cursor: pointer;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease; }
.ds-seg:hover { color: var(--ink); }
.ds-seg.active { color: var(--ink); background: #fff; box-shadow: 0 1px 3px rgba(31,39,51,.12); }

/* ---------- 表格 ---------- */
.ds-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ds-table th { position: sticky; top: 0; z-index: 2; background: #f5f7fa; text-align: left;
  padding: .62em .9em; font-weight: 650; font-size: 12px; color: var(--muted);
  border-bottom: 1px solid var(--border); white-space: nowrap; }
.ds-table td { padding: .64em .9em; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); }
.ds-table td.num { font-variant-numeric: tabular-nums; text-align: right; letter-spacing: -.01em; }
.ds-table tbody tr { transition: background .12s ease; }
.ds-table tbody tr:hover td { background: var(--hover); }
.ds-table tbody tr:last-child td { border-bottom: none; }
.ds-tablewrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }

/* ---------- 拖拽 / 清空 / 徽章 ---------- */
.col-resize-handle { position: absolute; right: 0; top: 0; width: 5px; height: 100%; cursor: col-resize; background: transparent; transition: background .15s ease; }
.col-resize-handle:hover { background: rgba(44,92,143,.35); }
.inp-clear-wrap { position: relative; display: inline-flex; align-items: center; }
.inp-clear-btn { position: absolute; right: 8px; background: none; border: none; color: #aeb6c2; cursor: pointer; font-size: 16px; line-height: 1; display: none; }
.inp-clear-btn:hover { color: var(--muted); }
.inp-clear-wrap input:not(:placeholder-shown) + .inp-clear-btn { display: block; }
.ds-badge { display: inline-block; padding: .2em .7em; border-radius: 980px; font-size: 12px; font-weight: 600; }
.ds-badge-success { background: var(--up-soft); color: var(--up); }
.ds-badge-warning { background: rgba(178,106,0,.16); color: var(--warning); }
.ds-badge-danger { background: var(--down-soft); color: var(--down); }

/* ---------- 空态 / Toast ---------- */
.ds-empty { text-align: center; padding: 2.6em 1em; color: var(--muted); }
.ds-empty strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: .3em; font-size: 15px; }
.ds-toast { position: fixed; top: 72px; right: 1.5em; background: var(--ink); color: #fff; padding: .8em 1.3em;
  border-radius: 10px; box-shadow: 0 10px 34px rgba(31,39,51,.26); font-size: 14px; z-index: 9999;
  animation: slideIn .3s cubic-bezier(.22,1,.36,1); }
@keyframes slideIn { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ---------- 布局工具 ---------- */
.flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; } .items-end { align-items: flex-end; } .justify-between { justify-content: space-between; }
.gap-sm { gap: .5em; } .gap-md { gap: 1em; } .gap-lg { gap: 1.5em; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2em; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2em; }
@media (max-width: 960px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .ds-main { padding: 1.2em 1em 2em; } }

:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }