/* ==========================================================================
   Agwork Terminal · 设计系统
   语言：Apple 产品界面（DESIGN.md v5.0）
   --------------------------------------------------------------------------
   三条铁律，一条不改：
     1. 层次靠「表面」——羊皮纸画布 + 纯白卡片，两档亮度分开。不描边、不投影。
     2. 层次靠「字号阶梯」——40 / 28 / 21 / 17 / 14 / 12 / 11，只用这几档。
     3. 只有一个强调色——Action Blue #0066cc。金只出现在品牌标识上。
   ========================================================================== */

/* ---------------------------------------------------------------- 令牌 */
:root {
  /* 表面 */
  --paper:      #ffffff;   /* 卡片面 */
  --paper-2:    #f5f5f7;   /* 页面底·羊皮纸 */
  --paper-3:    #e8e8ed;   /* 浅灰填充 */

  /* 文字 */
  --ink:        #1d1d1f;
  --ink-2:      #424245;
  --ink-3:      #7a7a7a;
  --ink-4:      #aeaeb2;

  /* 分隔 */
  --rule:       #f0f0f0;
  --rule-2:     #e0e0e0;

  /* 唯一强调色 */
  --blue:       #0066cc;
  --blue-focus: #0071e3;
  --blue-dark:  #2997ff;
  --blue-wash:  rgba(0, 102, 204, .08);

  /* 品牌金·仅标识 */
  --gold:       #b8860b;
  --gold-2:     #d4a017;

  /* 涨跌·A 股口径 */
  --up:         #d70015;
  --down:       #00875a;
  --up-wash:    rgba(215, 0, 21, .07);
  --down-wash:  rgba(0, 135, 90, .07);

  /* 字体 */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Helvetica Neue", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", system-ui, sans-serif;
  --num:  -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
          "PingFang SC", system-ui, sans-serif;

  /* 字号阶梯·八档，不发明中间值 */
  --fs-mega:   40px;
  --fs-big:    28px;
  --fs-h:      21px;
  --fs-title:  17px;
  --fs-body:   14px;
  --fs-data:   14px;
  --fs-label:  12px;
  --fs-micro:  11px;

  /* 圆角 */
  --r-card:    18px;
  --r-md:      11px;
  --r-sm:      8px;

  /* 节奏 */
  --gut:       20px;   /* 页面左右边距 */
  --gap:       12px;   /* 卡片间距 */
  --row:       36px;   /* 表格行高 */
  --nav-h:     48px;   /* 顶部导航条 */
  --ease:      cubic-bezier(.28, .11, .32, 1);
}

/* ---------------------------------------------------------------- 基础 */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--paper-2);
  color: var(--ink);
  font: 400 var(--fs-body)/1.5 var(--font);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, figcaption { margin: 0; }
[hidden] { display: none !important; }
b, strong { font-weight: 600; }
i, em { font-style: normal; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-focus); }

button {
  font: inherit; color: inherit; background: none;
  border: 0; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 数字一律 tabular-nums，不用等宽字体 */
.num, .n, .mono, td.n, .kpi-v, .dgrid .v {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 滚动条：细、灰、不抢视线 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .16);
  border-radius: 5px;
  border: 2px solid var(--paper-2);
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .28); }

::selection { background: rgba(0, 102, 204, .16); }

/* 涨跌色 */
.up   { color: var(--up); }
.down { color: var(--down); }
.dim  { color: var(--ink-3); }
.dimmer { color: var(--ink-4); }

/* 数值单位后缀：小一号、淡化，不干扰数字本身 */
td .u {
  font-size: 10px;
  color: var(--ink-4);
  margin-left: 1px;
  font-weight: 400;
}
/* 止损/止盈的百分比副标：窄屏时让位给价格，避免挤掉数字 */
@media (max-width: 1000px) {
  td .u.ppct { display: none; }
}

/* ==========================================================================
   一、顶部导航条（global-nav）· 纯黑通栏 48px
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 0;
  background: #000;
  color: #fff;
  padding: 0 var(--gut);
}

/* 品牌 */
.nav-brand {
  display: flex; align-items: center; gap: 8px;
  padding-right: 18px; margin-right: 18px;
  flex: 0 0 auto;
}
.nav-mark {
  width: 22px; height: 22px; border-radius: var(--r-sm);
  background: linear-gradient(145deg, #d4a017, #b8860b);
  display: grid; place-items: center;
  font-size: var(--fs-label); font-weight: 700; color: #000;
  letter-spacing: 0;
}
.nav-name {
  font-size: var(--fs-title); font-weight: 600;
  letter-spacing: -0.374px; color: #fff; white-space: nowrap;
}
.nav-sub {
  font-size: var(--fs-micro); font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5); white-space: nowrap;
}

/* 分段控件·胶囊 */
.nav-tabs {
  display: inline-flex; gap: 2px; flex: 0 0 auto;
  padding: 2px; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .12);
}
.nav-tabs a {
  padding: 4px 12px; border-radius: 6px;
  font-size: var(--fs-label); font-weight: 500;
  letter-spacing: -0.12px;
  color: rgba(255, 255, 255, .72);
  transition: color .14s var(--ease), background .14s var(--ease);
  white-space: nowrap;
}
.nav-tabs a:hover { color: #fff; }
.nav-tabs a.on {
  color: #000; background: #fff; font-weight: 600;
}

/* 导航右侧 */
.nav-end {
  margin-left: auto;
  display: flex; align-items: center; gap: 12px;
  flex: 0 0 auto;
}
.nav-clock {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: var(--fs-label); color: rgba(255, 255, 255, .62);
  letter-spacing: 0; white-space: nowrap;
}
.nav-sep {
  width: 1px; height: 16px; background: rgba(255, 255, 255, .16);
  flex: 0 0 auto;
}
.nav-stat {
  display: inline-flex; align-items: center; gap: 6px;
  height: 20px; padding: 0 9px; border-radius: var(--r-sm);
  font-size: var(--fs-micro); font-weight: 500;
  background: rgba(212, 160, 23, .16); color: var(--gold-2);
  white-space: nowrap;
}
.nav-stat.live { background: var(--blue); color: #fff; }
.nav-stat .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.nav-btn {
  height: 26px; padding: 0 12px; border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, .2);
  font-size: var(--fs-label); font-weight: 500;
  color: rgba(255, 255, 255, .82);
  transition: color .14s, border-color .14s, background .14s;
  white-space: nowrap;
}
.nav-btn:hover { color: #fff; border-color: rgba(255, 255, 255, .42); }
.nav-btn:active { background: rgba(255, 255, 255, .1); }
.nav-btn.busy { opacity: .55; pointer-events: none; }

/* ==========================================================================
   二、行情条（二级导航之下的一行摘要）
   ========================================================================== */
.tick {
  display: flex; align-items: center; gap: 0;
  height: 34px; padding: 0 var(--gut);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  position: sticky; top: var(--nav-h); z-index: 55;
}
.tick-i {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 0 14px; border-right: 1px solid var(--rule);
  font-size: var(--fs-micro); color: var(--ink-3);
  white-space: nowrap; flex: 0 0 auto;
}
.tick-i:first-child { padding-left: 0; }
.tick-i:last-child { border-right: 0; }
.tick-i b {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: var(--fs-label); font-weight: 600; color: var(--ink);
}
.tick-i .k { letter-spacing: 0; }

/* ==========================================================================
   三、版面骨架·羊皮纸画布
   ========================================================================== */
.wrap {
  padding: var(--gap) var(--gut) var(--gut);
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}
.wrap.full { grid-template-columns: minmax(0, 1fr); }

/* 主区/侧栏都是纵向流，间距 12px */
.col {
  display: flex; flex-direction: column; gap: var(--gap);
  min-width: 0;
}
.col.side { position: sticky; top: calc(var(--nav-h) + 34px + 12px); }

/* 行·栅格 */
.row {
  display: grid; gap: var(--gap);
  align-items: stretch;
  min-width: 0;
}
.row > * { min-width: 0; }
.r2   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r3   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r4   { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.r5   { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.r6   { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.r-73 { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
.r-64 { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
/* 板块明细 8 列 + 主线脉搏 6 列并排：5:5 才够放，6:4 在 1280 下会把主线挤到截断 */
.r-h61 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.r-55 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.r-37 { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); }

/* ==========================================================================
   四、卡片·纯白圆角，无边框无阴影
   ========================================================================== */
.card {
  background: var(--paper);
  border-radius: var(--r-card);
  display: flex; flex-direction: column;
  height: 100%;
  min-width: 0;
  transition: box-shadow .16s var(--ease), transform .16s var(--ease);
}
/* hover 抬 1px + 两层淡影：明确「这块是活的」 */
.card.hoverable:hover,
.card[data-detail]:hover,
.card.clk:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05), 0 10px 26px rgba(0, 0, 0, .06);
  transform: translateY(-1px);
  cursor: pointer;
}

.card-h {
  display: flex; align-items: baseline; gap: 8px;
  padding: 16px 20px 12px;
  flex: 0 0 auto;
  min-width: 0;
}
.card-h h3 {
  font-size: var(--fs-title); font-weight: 600;
  letter-spacing: -0.374px; color: var(--ink);
  white-space: nowrap; flex: 0 0 auto;
}
.card-h .sub {
  font-size: var(--fs-micro); color: var(--ink-4);
  letter-spacing: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.card-h .right {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  flex: 0 0 auto;
}

/* 卡内搜索框：28px 高、8px 圆角、浅灰底，聚焦时 Action Blue 描边 */
.sbox {
  width: 132px; height: 26px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--paper-2);
  font-family: var(--font); font-size: var(--fs-micro);
  color: var(--ink); letter-spacing: 0;
  outline: none;
  transition: background .14s, border-color .14s, width .18s;
  -webkit-appearance: none; appearance: none;
}
.sbox::placeholder { color: var(--ink-4); }
.sbox:focus {
  background: var(--paper);
  border-color: var(--blue);
  width: 168px;
}
.sbox::-webkit-search-cancel-button { -webkit-appearance: none; }

/* 可排序表头 */
thead th.sortable {
  cursor: pointer; user-select: none;
  transition: color .12s;
}
thead th.sortable:hover { color: var(--ink-2); }
thead th.sortable::after {
  content: "↕"; margin-left: 3px;
  font-size: 9px; color: var(--ink-4); opacity: .0;
  transition: opacity .12s;
}
thead th.sortable:hover::after { opacity: 1; }
thead th.sorted-asc::after,
thead th.sorted-desc::after { opacity: 1; color: var(--blue); }
thead th.sorted-asc::after { content: "↑"; }
thead th.sorted-desc::after { content: "↓"; }

/* 右对齐列把箭头放在文字左侧，否则会伸出表格右边缘被裁掉。
   注意优先级：th.n.sortable::after 与 th.sorted-desc::after 同为 2 类，
   后者写在后面会覆盖 content:none，所以这里连排序态一起声明。 */
thead th.n.sortable::after,
thead th.n.sorted-asc::after,
thead th.n.sorted-desc::after { content: none; }
thead th.n.sortable::before,
thead th.n.sorted-asc::before,
thead th.n.sorted-desc::before {
  content: "↕"; margin-right: 3px;
  font-size: 9px; color: var(--ink-4); opacity: .0;
  transition: opacity .12s;
  display: inline-block;
}
thead th.n.sortable:hover::before { opacity: 1; }
thead th.n.sorted-asc::before,
thead th.n.sorted-desc::before { opacity: 1; color: var(--blue); }
thead th.n.sorted-asc::before { content: "↑"; }
thead th.n.sorted-desc::before { content: "↓"; }

/* 筛选后行隐藏 */
tbody tr.fhide { display: none; }
/* 键盘可达：所有可点元素统一蓝色焦点环 */
[data-detail]:focus-visible,
[data-sub]:focus-visible,
.chip.clk:focus-visible,
.nav-tabs a:focus-visible,
.nav-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* 卡片体 */
.card-b { padding: 0 20px 16px; min-width: 0; }
.card-b.flush { padding: 0 0 4px; }
.card-b.grow { flex: 1 1 auto; min-height: 0; }
.card-f {
  padding: 10px 20px 14px;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-micro); color: var(--ink-3);
  margin-top: auto;
  flex: 0 0 auto;
}

/* 卡片内的小标签组 */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 9px;
  border-radius: var(--r-sm);
  background: var(--paper-2);
  font-size: var(--fs-micro); font-weight: 500;
  color: var(--ink-2); white-space: nowrap;
  transition: background .14s, color .14s;
}
.chip.blue { background: var(--blue); color: #fff; }
.chip.clk { cursor: pointer; }
.chip.clk:hover { background: var(--paper-3); }
/* 接口目录「不可执行」的说明文字：11px 灰字，替掉一列全 — 的死样子 */
.noact { font-size: var(--fs-micro); color: var(--ink-4); white-space: nowrap; }

/* 徽章 */
.bd {
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 7px;
  border-radius: 5px;
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: 0; white-space: nowrap;
  background: var(--paper-2); color: var(--ink-3);
}
.bd.no   { background: var(--up-wash);   color: var(--up); }
.bd.ok   { background: var(--down-wash); color: var(--down); }
.bd.blue { background: var(--blue-wash); color: var(--blue); }
.bd.line { background: transparent; box-shadow: inset 0 0 0 1px var(--rule-2); }

/* 圆点 */
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-4); flex: 0 0 auto; }
.dot.blue { background: var(--blue); }
.dot.up   { background: var(--up); }
.dot.down { background: var(--down); }

/* ==========================================================================
   五、KPI 卡·四栏等宽，40px 数字
   ========================================================================== */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  min-width: 0;
}
.kpis.k6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.kpi {
  display: flex; flex-direction: column; justify-content: center;
  gap: 3px;
  padding: 14px 18px;
  background: var(--paper);
  border-radius: var(--r-card);
  min-width: 0;
  transition: box-shadow .16s var(--ease), transform .16s var(--ease);
}
.kpi.clk { cursor: pointer; }
.kpi:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05), 0 10px 26px rgba(0, 0, 0, .06);
  transform: translateY(-1px);
}

.kpi-k {
  display: flex; align-items: baseline; gap: 6px;
  font-size: var(--fs-label); font-weight: 400;
  letter-spacing: -0.12px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-k i {
  font-size: 9px; letter-spacing: .1em; color: var(--ink-4);
}

.kpi-v {
  display: flex; align-items: baseline; gap: 6px;
  font-size: var(--fs-mega); font-weight: 600;
  line-height: 1.1; letter-spacing: 0;
  color: var(--ink); white-space: nowrap;
}
/* 文本型 KPI：略小一档，但同基线 */
.kpi-v.txt {
  font-family: var(--font); font-size: var(--fs-big);
  font-weight: 600; letter-spacing: -0.2px;
}
.kpi-v small {
  font-family: var(--font); font-size: var(--fs-micro);
  font-weight: 400; letter-spacing: 0; color: var(--ink-3);
}
.kpi-v.up   { color: var(--up); }
.kpi-v.down { color: var(--down); }
/* 空值态：上游未下发时用灰字，避免与真实 0 混淆 */
.kpi-v.dim  { color: var(--ink-4); font-weight: 500; }
.nodata {
  font-size: var(--fs-label); font-weight: 400;
  color: var(--ink-4); white-space: nowrap;
}
/* 口径标记：固/买/异 —— 贴在日期后面，10px 方框，不参与排序取值 */
i.qi {
  display: inline-block; width: 13px; height: 13px; line-height: 13px;
  margin-left: 4px; border-radius: 3px; vertical-align: 1px;
  font-size: 9px; font-style: normal; font-weight: 500; text-align: center;
  color: var(--blue); background: rgba(0, 102, 204, .08);
}
i.qi.w { color: var(--ink-3); background: rgba(0, 0, 0, .05); }
/* 说明性附注放在表头与表体之间：上边贴表头线，下边留 6px */
.card-f.top {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 8px 20px; line-height: 1.55; margin-top: 0;
}
/* 三信号合并列：动/龙/份 用 2 字缩写并列，命中点亮蓝，未命中留灰点 */td.tri {
  text-align: center; white-space: nowrap;
  font-size: 9px; letter-spacing: -0.3px; overflow: visible;
}
td.tri span { color: var(--ink-4); }
td.tri span.on { color: var(--blue); font-weight: 600; }
/* 日内路径列（gap→amp）：最后一列窄屏必然吃紧，允许字形溢出而不出省略号 */
td.path { overflow: visible !important; text-overflow: clip !important; }

.kpi-sub {
  font-size: var(--fs-micro); color: var(--ink-3);
  letter-spacing: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* 紧凑 KPI（六格条用） */
.kpis.k6 .kpi { padding: 12px 16px; }
.kpis.k6 .kpi-v { font-size: var(--fs-big); }

/* ==========================================================================
   六、表格·36px 行高，无斑马纹，1px 细线
   ========================================================================== */
.tw { overflow-x: auto; min-width: 0; }
.tw.y { overflow-y: auto; }
.tw.y::-webkit-scrollbar { width: 7px; }

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

thead th {
  height: 30px;
  padding: 0 10px;
  font-size: var(--fs-label); font-weight: 400;
  letter-spacing: -0.12px;
  color: var(--ink-3);
  text-align: left;
  white-space: nowrap;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 2;
}
thead th.n { text-align: right; }
thead th.c { text-align: center; }

tbody td {
  height: var(--row);
  padding: 0 10px;
  font-size: var(--fs-body);
  letter-spacing: -0.224px;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }

tbody td.n {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
tbody td.c { text-align: center; }
tbody td.idx {
  color: var(--ink-4); font-size: 10px;
  text-align: right;
  padding-left: 4px; padding-right: 6px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* 行 hover */
tbody tr.clk { cursor: pointer; }
tbody tr.clk:hover { background: var(--paper-2); }
tbody tr.sel { background: var(--blue-wash); }
tbody tr.sel td { color: var(--ink); }
tbody tr.sel td.idx { color: var(--blue); }

/* 名称单元格里的副标 */
.entry { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.entry .nm {
  font-weight: 500; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.entry .cd {
  font-family: var(--num); font-size: var(--fs-micro);
  color: var(--ink-4); letter-spacing: 0; flex: 0 0 auto;
}

/* 迷你条（表格内） */
.mb {
  position: relative;
  height: 6px; border-radius: 3px;
  background: var(--paper-3);
  overflow: hidden;
}
.mb i {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 3px; display: block;
  /* 极小的非零值（如 −0.23% 只占 1.0%）会被压成亚像素线看不见，
     给一个最小可见宽度，保证「有值就看得见」。0 值仍然贴边不可见。 */
  min-width: 3px;
}
.mb i.pos { background: var(--up); }
.mb i.neg { background: var(--down); }
.mb i.blue { background: var(--blue); }
.mb i.ink { background: #3a3a3c; }
/* 双向条：中线在中间 */
.mb.bi::before {
  content: ""; position: absolute;
  left: 50%; top: -1px; bottom: -1px; width: 1px;
  background: var(--rule-2);
}
.mb.bi i { left: 50%; }
.mb.bi i.pos { left: 50%; }
.mb.bi i.neg { left: auto; right: 50%; }

/* ==========================================================================
   七、图表
   ========================================================================== */
.ch { display: block; width: 100%; height: auto; }
/* 热力图：卡片被同行更高的邻居撑高时，让图块垂直居中，而不是顶在上方留一片空白 */
.heat-wrap {
  display: flex; align-items: center;
  padding-bottom: 20px;
}
.heat-wrap > .ch { flex: 1 1 auto; }
.ch-empty {
  display: grid; place-items: center;
  min-height: 80px;
  font-size: var(--fs-label); color: var(--ink-4);
}

/* 图例 */
.legend {
  display: flex; align-items: center; gap: 14px;
  padding: 6px 0 0;
  font-size: var(--fs-micro); color: var(--ink-3);
}
.legend i {
  display: inline-block; width: 14px; height: 2px;
  border-radius: 1px; margin-right: 5px; vertical-align: middle;
}
/* 续接段的虚线图例：用 2px 虚线区分"同一条曲线的不同数据源" */
.legend i.dsh-i {
  height: 0; border-top: 2px dashed var(--up);
  border-radius: 0; background: none !important;
}

/* ==========================================================================
   八、左栏专用
   ========================================================================== */
.rail-h {
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .9px; text-transform: uppercase;
  color: var(--ink-4);
  padding: 0 0 8px;
}

/* 左栏列表项 */
.rl { display: flex; flex-direction: column; gap: 1px; }
.rl-i {
  display: flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
  color: var(--ink-2);
  transition: background .13s, color .13s;
  cursor: pointer;
  text-decoration: none;
}
.rl-i:hover { background: var(--paper-2); color: var(--ink); }
.rl-i.on {
  background: var(--blue-wash);
  color: var(--blue);
  font-weight: 600;
}
.rl-i.on .k { color: var(--blue); }
.rl-i .k {
  margin-left: auto;
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: var(--fs-label); color: var(--ink-4);
  font-weight: 400; letter-spacing: 0;
}

/* 键值对 */
.kv { display: flex; flex-direction: column; }
.kv-r {
  display: flex; align-items: baseline; gap: 8px;
  height: 28px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-label);
}
.kv-r:last-child { border-bottom: 0; }
.kv-r .k { color: var(--ink-3); flex: 0 0 auto; letter-spacing: -0.12px; }
.kv-r .v {
  margin-left: auto; text-align: right;
  font-family: var(--num); font-variant-numeric: tabular-nums;
  color: var(--ink); font-weight: 500; letter-spacing: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 定稿卡片里的数值行：数值统一 17px，价格再带一个小号百分比副标。
   主数值与副标用 flex 基线对齐 + 副标固定 54px 槽位，
   三行数值的右边缘才会严格对齐（"未下发"3 字不会自动贴到最右） */
.kv-ord .v {
  display: flex; align-items: baseline; justify-content: flex-end;
  gap: 5px; overflow: visible;
  font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.2px;
}
.kv-ord .v .p { font-weight: 600; }
.kv-ord .v .u2 {
  width: 54px; flex: 0 0 54px; text-align: left;
  font-size: var(--fs-micro); font-weight: 400;
  color: var(--ink-4); letter-spacing: 0;
}
/* "盈亏比 1.67" 比二字符副标宽，单独给足，避免 59.72 被压 4px */
.kv-ord .v .u2.wide { width: 62px; flex: 0 0 62px; }
.kv-ord .v > .nodata { width: 59px; flex: 0 0 59px; text-align: right; }
/* 卡片窄（四分栏）时副标让位，保证价格不被裁 */
@media (max-width: 1200px) {
  .kv-ord .v .u2 { display: none; }
  .kv-ord .v > .nodata { width: auto; flex: 0 0 auto; }
}

/* ==========================================================================
   九、空态
   ========================================================================== */
.empty {
  display: grid; place-items: center;
  padding: 32px 16px;
  font-size: var(--fs-label); color: var(--ink-4);
  text-align: center;
}

/* ==========================================================================
   十、抽屉（详情面板）
   ========================================================================== */
.scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, .22);
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease);
  backdrop-filter: blur(2px);
}
.scrim.on { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 95;
  width: 560px; max-width: 92vw;
  background: var(--paper);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .26s var(--ease);
  box-shadow: -8px 0 40px rgba(0, 0, 0, .1);
}
.drawer.on { transform: none; }

.dh {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--rule);
  flex: 0 0 auto;
}
.dh .t {
  font-size: var(--fs-h); font-weight: 600;
  letter-spacing: 0.231px; color: var(--ink);
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.dh .s {
  font-size: var(--fs-micro); color: var(--ink-3);
  letter-spacing: 0; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dh .x {
  margin-left: auto; flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-size: 18px; line-height: 1; color: var(--ink-3);
  transition: background .13s, color .13s;
}
.dh .x:hover { background: var(--paper-2); color: var(--ink); }

.db {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  padding: 16px 20px 28px;
}

/* 抽屉内的指标格 */
.dgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 18px;
}
.dgrid .g {
  background: var(--paper);
  padding: 10px 12px;
  min-width: 0;
}
.dgrid .k {
  font-size: var(--fs-micro); color: var(--ink-3);
  letter-spacing: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.dgrid .v {
  font-size: var(--fs-h); font-weight: 600;
  letter-spacing: 0; color: var(--ink);
  white-space: nowrap; overflow: visible;
  margin-top: 1px;
}
/* 代码这类长标识：小一号显示，避免被省略号截断 */
.dgrid .v.mono-l {
  font-family: var(--num); font-size: var(--fs-title);
  letter-spacing: -0.2px;
}

/* 抽屉内分区标题 */
.dsec {
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .9px; text-transform: uppercase;
  color: var(--ink-4);
  margin: 18px 0 8px;
}
.dsec:first-child { margin-top: 0; }

/* 抽屉内键值列表 */
.dl { display: flex; flex-direction: column; }
.dl-r {
  display: flex; align-items: baseline; gap: 10px;
  min-height: 30px; padding: 5px 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-label);
}
.dl-r:last-child { border-bottom: 0; }
.dl-r .k { color: var(--ink-3); flex: 0 0 auto; letter-spacing: -0.12px; }
.dl-r .v {
  margin-left: auto; text-align: right;
  font-family: var(--num); font-variant-numeric: tabular-nums;
  color: var(--ink); font-weight: 500; letter-spacing: 0;
  word-break: break-all;
}

/* 抽屉内的空态：不占大块高度，别把下面的内容顶下去 */
.db .empty { padding: 14px 16px; }

.db table { font-size: var(--fs-label); }
.db thead th { font-size: var(--fs-micro); height: 26px; padding: 0 8px; }
.db tbody td {
  height: 28px; padding: 0 8px;
  font-size: var(--fs-label);
  border-bottom: 1px solid var(--rule);
}
.db tbody td.n { padding-right: 8px; }

/* 条件单（委托单）：价格为主、百分比为辅 */
.obar {
  background: var(--paper-2);
  border-radius: var(--r-md);
  padding: 4px 14px;
}
.obar-row {
  display: flex; align-items: baseline; gap: 10px;
  min-height: 40px; padding: 6px 0;
  border-bottom: 1px solid var(--rule);
}
.obar-row:last-child { border-bottom: 0; }
.obar-tag {
  flex: 0 0 auto; width: 30px;
  font-size: var(--fs-micro); color: var(--ink-3);
  letter-spacing: -0.12px;
}
.obar-p {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: var(--fs-h); font-weight: 600; letter-spacing: -0.4px;
  min-width: 68px;
}
.obar-pct {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: var(--fs-label); color: var(--ink-3);
  min-width: 50px;
}
.obar-gap { font-size: var(--fs-micro); margin-left: auto; }

/* 抽屉内小标题块 */
.dcard {
  background: var(--paper-2);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.dcard .t {
  font-size: var(--fs-label); font-weight: 600;
  color: var(--ink); margin-bottom: 6px;
}
.dcard .b {
  font-size: var(--fs-label); color: var(--ink-2);
  line-height: 1.6;
}
.dcard code {
  font-family: var(--num);
  background: var(--paper-3);
  padding: 1px 5px; border-radius: 4px;
  font-size: var(--fs-micro);
}

/* 加载态 */
.dload {
  display: grid; place-items: center;
  padding: 60px 20px;
  font-size: var(--fs-label); color: var(--ink-4);
  gap: 12px;
}
.spin {
  width: 20px; height: 20px;
  border: 2px solid var(--paper-3);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: sp .7s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg); } }

/* 抽屉内错误 */
.derr {
  background: var(--up-wash);
  color: var(--up);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-size: var(--fs-label);
}

/* ==========================================================================
   十一、通用工具类
   ========================================================================== */
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.t-right { text-align: right; }
.t-center { text-align: center; }
.mt-a { margin-top: auto; }
.grow { flex: 1 1 auto; min-height: 0; }
.of-h { overflow: hidden; }

/* 三段式进度条组 */
.segbar {
  display: flex; height: 6px; border-radius: 3px;
  overflow: hidden; background: var(--paper-3);
}
.segbar i { display: block; height: 100%; }

/* 分隔线 */
.hr { height: 1px; background: var(--rule); margin: 12px 0; }

/* 表格内联条（右列窄条） */
.barc { padding-right: 14px !important; }

/* ==========================================================================
   十二、响应式·1100 / 900
   ========================================================================== */
@media (max-width: 1360px) {
  .wrap { grid-template-columns: 280px minmax(0, 1fr); }
  .kpis.k6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 板块明细（8 列）+ 主线脉搏（6 列）并排时主线只有 ~374px，
     五个数字列会截断；≤1600 改为上下各占整行（1600 起两卡并排刚好不截） */
  .row.r-64.two-tbl { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1600px) {
  .row.r-64.two-tbl { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1100px) {
  .wrap { grid-template-columns: minmax(0, 1fr); }
  .col.side {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
  }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r-73, .r-64, .r-37 { grid-template-columns: minmax(0, 1fr); }
  .nav-sub { display: none; }
}

@media (max-width: 900px) {
  :root { --gut: 12px; --gap: 10px; }
  .nav { flex-wrap: nowrap; overflow-x: auto; }
  .nav-brand { padding-right: 12px; margin-right: 12px; }
  .nav-clock, .nav-sep { display: none; }
  .col.side { grid-template-columns: minmax(0, 1fr); }
  .r2, .r3, .r4, .r5, .r6 { grid-template-columns: minmax(0, 1fr); }
  .kpis, .kpis.k6, .kpis.k3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-v { font-size: var(--fs-big); }
  .drawer { width: 100vw; max-width: 100vw; }
  .tick { display: none; }
}