/* ═══════════════════════════════════════════════════════════════════════════
   NEON TRADE · 官方终端 / 管理后台 —— 复古未来主义荧光显示管皮肤
   ───────────────────────────────────────────────────────────────────────────
   规范：F:\ai\设计资产\retro-vfd\STYLE.md            令牌：tokens.json
   手法：纯黑底 + 亮色荧光线框 + 段码读数 + 自发光文字（无立体倒角、无塑料渐变）
   调外观：只改下面 :root 里的变量，不要为改颜色去动 JS。
   ═══════════════════════════════════════════════════════════════════════════ */

/* hidden 属性必须真的隐藏：本文件给 .login-wrap 设了 display:grid，作者样式会盖掉
   UA 的 [hidden]{display:none}，导致"登录后登录框还盖在界面上"（实测踩过）。
   这条要放在所有 display 规则之前生效 —— 用 !important 一次钉死。 */
[hidden] { display: none !important; }

/* 像素字体：Ark Pixel 12px（OFL/MIT）。
   第一份是按本页用字重新裁的子集；第二份是随项目带过来的通用子集，作兜底。
   两份都没有的字会落到系统无衬线（不会出豆腐块）。 */
@font-face {
  font-family: "ArkPixel";
  src: url("fonts/ark-pixel.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "ArkPixelRef";
  src: url("fonts/ark-pixel-subset.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* ── 四大家族（照参考图机器采样，不是彩虹） ── */
  --bg: #000000;          /* 一律纯黑 */
  --amber: #f0d080;       /* 数值 / 点亮 */
  --amber-hi: #ffe9b8;    /* 高亮数值 */
  --amber-lo: #6f613a;    /* 暗网格 / 刻度 */
  --mint: #90e0d0;        /* 标签 / 结构线框 */
  --mint-hi: #d6fff8;     /* 结构高亮 */
  --mint-dim: #26564f;    /* 次级线框 / 未点亮 */
  --red: #e03020;         /* 告警 / 当前 / 下跌 */
  --red-hi: #ff6a58;
  --white: #f0f0f0;       /* 中性标签 */
  --dim: #a2a2a2;         /* 次级文字 */
  --ok: #8effa8;

  /* ── 辉光：细亮芯 + 快速衰减 + 很弱的宽晕 ── */
  --glow-core: 1px;
  --glow-near: 3px;
  --glow-far: 9px;
  --glow-mint: rgba(144, 224, 208, 0.34);
  --glow-amber: rgba(240, 208, 128, 0.34);
  --glow-red: rgba(224, 48, 32, 0.42);

  /* ── VFD 段码 ── */
  --vfd-pitch: 3.5px;
  --vfd-gap: 0.9px;
  --vfd-lit: #90e0d0;
  --vfd-lit-mid: #4fb8ab;
  --vfd-unlit: #0c3a37;
  --vfd-edge: #1d6a5e;
  --vfd-halo: rgba(144, 224, 208, 0.3);

  /* ── 字体与字号（正文 18px 级 / 小标签 13.5px 级） ── */
  --font-body: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-pixel: "ArkPixel", "ArkPixelRef", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-num: "ArkPixel", "ArkPixelRef", ui-monospace, Consolas, monospace;
  --fs-body: 18px;
  --fs-label: 13.5px;
  --fs-tiny: 12px;

  /* ── 布局 ── */
  --gap: 10px;
  --col-a: 400px;
  --col-c: 396px;
  --radius: 2px;
}

*, *::before, *::after { box-sizing: border-box; }
/* hidden 属性必须真的隐藏：.shell / .login-wrap 都设了 display:grid，会盖掉 UA 的 display:none */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font: var(--fs-body) / 1.45 var(--font-body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* 滚条：细、薄荷、不抢眼（只改视觉参数，命中区仍靠浏览器默认宽度） */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb {
  background: var(--mint-dim);
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: 0 0 var(--glow-near) var(--vfd-halo);
}
::-webkit-scrollbar-thumb:hover { background: var(--mint); }

/* ── 辉光工具类（文字用两层 currentColor） ── */
.glow { text-shadow: 0 0 var(--glow-core) currentColor, 0 0 4px currentColor; }

/* ═══════════════════════ 外壳 ═══════════════════════ */
.shell {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
  min-height: 0;
  background: #000;
}

/* ═══════════════════════ 页头 ═══════════════════════ */
.hdr {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  gap: 6px;
  padding: 8px 12px 7px;
  background: #000;
  border-bottom: 2px solid var(--amber);
  box-shadow: 0 0 10px rgba(240, 208, 128, 0.35);
}
.hdr-top { display: flex; align-items: stretch; gap: 14px; min-width: 0; }
/* 页头回放进度条：VFD 段码，走到哪亮到哪 */
.hdr .vfd-bar { height: 8px; }
.hdr-brand { display: flex; flex-direction: column; justify-content: center; gap: 2px; flex: 0 0 auto; }
.hdr-brand .logo {
  font: 700 22px/1.1 var(--font-pixel);
  letter-spacing: 2.6px;
  color: var(--amber);
  text-shadow: 0 0 var(--glow-core) currentColor, 0 0 5px currentColor, 0 0 16px var(--glow-amber);
}
.hdr-brand .sub {
  font: var(--fs-label) / 1.2 var(--font-body);
  letter-spacing: 1.4px;
  color: var(--mint);
  text-shadow: 0 0 var(--glow-core) currentColor;
}
.hdr-rd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; flex: 1 1 auto; min-width: 0; }
.hdr-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* 读数单元：标签（薄荷）+ 数值（琥珀），层级靠亮度不靠色相 */
.rd { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.rd .k {
  font: var(--fs-label) / 1 var(--font-body);
  letter-spacing: 1.6px;
  color: var(--mint);
  text-shadow: 0 0 var(--glow-core) currentColor;
}
.rd .v {
  font: var(--fs-body) / 1.1 var(--font-body);
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 var(--glow-core) currentColor, 0 0 5px rgba(240, 208, 128, 0.5);
}
.rd .v.mono { font-family: var(--font-num); letter-spacing: 1px; }

/* 段码读数：辉光管 —— 未点亮的「8」留暗影 */
.seg-wrap { display: inline-flex; align-items: baseline; gap: 6px; }
.seg {
  position: relative;
  display: inline-block;
  font: 700 22px/1 var(--font-num);
  letter-spacing: 2.5px;
  font-variant-numeric: tabular-nums;
  color: var(--amber-hi);
  /* 细亮芯 + 近圈就够；再叠 12px 宽晕会把 0/8 糊在一起（实测看不清） */
  text-shadow: 0 0 var(--glow-core) #fff, 0 0 5px rgba(240, 208, 128, 0.55);
  min-width: 84px;
  text-align: center;
}
.seg[data-ghost]::before {
  content: attr(data-ghost);
  position: absolute;
  inset: 0;
  color: rgba(240, 208, 128, 0.09);
  text-shadow: none;
  letter-spacing: 2px;
  text-align: center;
}
.seg.dim { color: var(--mint); font-size: 16px; text-shadow: 0 0 var(--glow-core) currentColor; }
.seg-wrap .sep { color: var(--mint-dim); font: var(--fs-label) / 1 var(--font-body); }

/* 连接灯：亮/暗两档靠亮度，不靠色相堆砌 */
.conn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--fs-label) / 1 var(--font-body);
  letter-spacing: 1px;
  color: var(--mint);
}
.conn i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--mint-dim);
  box-shadow: 0 0 0 transparent;
}
.conn[data-s="connected"] { color: var(--mint-hi); }
.conn[data-s="connected"] i {
  background: var(--ok);
  box-shadow: 0 0 1px #fff, 0 0 4px rgba(142, 255, 168, 0.95), 0 0 10px rgba(142, 255, 168, 0.55);
  animation: breathe 3.4s ease-in-out infinite;
}
.conn[data-s="reconnecting"] { color: var(--amber); }
.conn[data-s="reconnecting"] i {
  background: var(--amber);
  box-shadow: 0 0 1px #fff, 0 0 4px var(--amber), 0 0 10px var(--glow-amber);
  animation: blinkHard 1.15s steps(1, end) infinite;
}
.conn[data-s="offline"] { color: var(--red-hi); }
.conn[data-s="offline"] i {
  background: var(--red);
  box-shadow: 0 0 1px #fff, 0 0 5px var(--red), 0 0 12px var(--glow-red);
}

/* 字号滑条 */
.fs { display: inline-flex; align-items: center; gap: 7px; font: var(--fs-label) / 1 var(--font-body); color: var(--mint); letter-spacing: 1px; }
.fs input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 78px; height: 14px; padding: 0;
  background: #000;
  border: 1px solid var(--vfd-edge);
  border-radius: 1px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.95), 0 0 4px var(--vfd-halo), 0 0 13px var(--vfd-halo);
}
.fs input[type="range"]::-webkit-slider-runnable-track { height: 100%; background: transparent; border: none; }
.fs input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 6px; height: 18px; margin-top: -2px;
  border: 1px solid #eafffd; border-radius: 1px;
  background: linear-gradient(180deg, #fff, #dcfffb 40%, var(--mint));
  box-shadow: 0 0 var(--glow-core) #fff, 0 0 var(--glow-near) rgba(200, 255, 250, 0.95), 0 0 var(--glow-far) rgba(144, 224, 208, 0.55);
}

/* 离线横幅（断线时唯一的大号告警条） */
.banner {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: #000;
  border-bottom: 1px solid var(--red);
  border-top: 1px solid var(--red);
  color: var(--red-hi);
  font: var(--fs-label) / 1.3 var(--font-body);
  letter-spacing: 1.2px;
  box-shadow: 0 0 12px var(--glow-red), inset 0 0 18px rgba(224, 48, 32, 0.1);
}
.banner[data-show="1"] { display: flex; }
.banner b { font-size: var(--fs-body); letter-spacing: 2px; text-shadow: 0 0 var(--glow-core) currentColor, 0 0 8px var(--glow-red); }

/* ═══════════════════════ 主网格 ═══════════════════════ */
.main {
  display: grid;
  grid-template-columns: var(--col-a) minmax(0, 1fr) var(--col-c);
  gap: var(--gap);
  padding: var(--gap);
  min-height: 0;
  overflow: hidden;
}
.col { display: flex; flex-direction: column; gap: var(--gap); min-height: 0; min-width: 0; }

/* ═══════════════════════ 面板（亮线框，不是倒角） ═══════════════════════ */
.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: #000;
  border: 1px solid var(--mint-dim);
  border-radius: var(--radius);
  box-shadow: 0 0 9px rgba(144, 224, 208, 0.16);
}
.panel.amber { border-color: var(--amber-lo); box-shadow: 0 0 9px rgba(240, 208, 128, 0.16); }
.panel-hd {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 0 0 auto;
  padding: 5px 9px 6px;
  border-bottom: 1px solid var(--mint-dim);
}
.panel-hd .t {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: var(--fs-label) / 1.2 var(--font-body);
  letter-spacing: 2px;
  color: var(--mint);
  text-transform: uppercase;
  text-shadow: 0 0 var(--glow-core) currentColor;
}
.panel-hd .t::before {
  content: "";
  width: 7px; height: 7px;
  border: 1px solid var(--mint);
  box-shadow: 0 0 5px var(--vfd-halo);
}
.panel-hd .x { font: var(--fs-label) / 1.2 var(--font-body); color: var(--dim); letter-spacing: 0.6px; }
.panel-bd { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 7px 9px 9px; }
.panel-bd.tight { padding: 4px 0 6px; overflow: auto; }
.panel-note {
  flex: 0 0 auto;
  padding: 4px 9px 6px;
  border-top: 1px solid var(--mint-dim);
  font: var(--fs-label) / 1.35 var(--font-body);
  color: var(--dim);
  letter-spacing: 0.4px;
}

/* ═══════════════════════ 表格 ═══════════════════════ */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 4px 8px 5px;
  background: #000;
  border-bottom: 1px solid var(--mint-dim);
  font: var(--fs-label) / 1.2 var(--font-body);
  font-weight: 400;
  letter-spacing: 1.2px;
  color: var(--mint);
  text-align: right;
  white-space: nowrap;
}
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl td {
  padding: 3px 5px;
  border-bottom: 1px solid rgba(38, 86, 79, 0.45);
  font: var(--fs-body) / 1.25 var(--font-body);
  color: var(--white);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tbl td.num { font-family: var(--font-num); letter-spacing: 0.4px; color: var(--amber); }
.tbl td.sub { font-size: var(--fs-label); color: var(--dim); }
/* 自己那一行：琥珀（区别于「当前选中」的荧光红） */
.tbl tr.hl td { color: var(--amber-hi); }
.tbl tr.hl td.num { color: var(--amber-hi); }
.tbl tr.hl td:first-child { box-shadow: inset 2px 0 0 var(--amber); }
/* 当前选中标的：荧光红 */
.tbl tr.sel td { color: var(--mint-hi); }
.tbl tr.sel td.num { color: var(--mint-hi); }
.tbl tr.sel td:first-child { box-shadow: inset 2px 0 0 var(--red); }
.tbl tbody tr:hover td { background: #070707; }
/* 分块小标题（同一面板里分「未成交 / 历史」两块时用） */
.sect-hd {
  padding: 4px 8px 3px;
  font: var(--fs-label) / 1.3 var(--font-body);
  letter-spacing: 1.8px;
  color: var(--mint);
  border-bottom: 1px solid var(--mint-dim);
  background: #000;
}
.sect-hd:not(:first-child) { margin-top: 8px; border-top: 1px solid var(--mint-dim); }

/* 订单表：列宽按「读得出数量/剩余与状态」定，状态允许折行、不裁字 */
#open-orders-table th, #open-orders-table td,
#hist-orders-table th, #hist-orders-table td { padding: 3px 4px; }
.tbl.nosticky th { position: static; }
.tbl td.st {
  white-space: normal;
  font-size: var(--fs-tiny);
  line-height: 1.18;
  letter-spacing: 0.4px;
  max-width: 78px;
  text-align: right;
}
/* 标的表：5 列在 400px 里必须排得下（数值不折行、不被裁） */
#sym-table th, #sym-table td { padding: 3px 4px; }
#sym-table td:first-child, #sym-table th:first-child { padding-left: 6px; }
#sym-table td.num { font-size: 17.5px; }

.tbl .up { color: var(--mint); }
.tbl .down { color: var(--red); }

/* ═══════════════════════ 标的列表 ═══════════════════════ */
.sym-row { cursor: pointer; }
.sym-row:focus-visible { outline: 1px solid var(--amber); outline-offset: -1px; }
.sym-name { display: block; font-size: var(--fs-label); color: var(--dim); letter-spacing: 0.3px; }
.sym-code { font: var(--fs-body) / 1.2 var(--font-body); color: var(--white); }

/* 搜索框（输入框：不改字体族/字距，避免光标错位） */
.search {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border-bottom: 1px solid var(--mint-dim);
}
.search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 8px;
  font: var(--fs-body) / 1.3 var(--font-body);
  color: var(--amber-hi);
  background: #000;
  border: 1px solid var(--amber-lo);
  border-radius: 1px;
  outline: none;
}
.search input::placeholder { color: #7d7d7d; }
.search input:focus { border-color: var(--amber); box-shadow: 0 0 8px var(--glow-amber); }

/* ═══════════════════════ 图表 ═══════════════════════ */
.chart-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chart-wrap { position: relative; flex: 0 0 auto; min-height: 0; height: 420px; background: #000; }
/* canvas 必须**脱离文档流**：否则 height:100% 在"高度由内容决定"的父级里会与
   JS 依据 clientHeight 回写 width/height 属性形成自反馈 —— 实测画布涨到 1439px（2026-11-04）。 */
.chart-wrap canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: #000; }
.chart-legend {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 4px 9px 0;
  font: var(--fs-label) / 1.3 var(--font-body);
  color: var(--dim);
}
.chart-legend b { font: var(--fs-label) / 1.2 var(--font-num); color: var(--white); letter-spacing: 0.6px; }
.chart-legend .u { color: var(--mint); }
.chart-legend .d { color: var(--red); }

/* ── 图表面板：工具按钮 / 说明悬浮层 / 放大态（2026-11-03 · 只动「视图监看窗口」） ──
   目的：把常驻的解释文字从图表面板里挪走（原来 2–3 行、矮屏要吃掉 ~47px 画布高度），
   换成 ⓘ 悬浮；顺带提供一个「放大」按钮，把图表铺满整屏看。（来自 WB 方案 Q1-B3，已按原始规范核对：
   画法/数据边界两条都只是**显示**口径，不新增数据、不越 publishedThrough。） */
.chart-tool { padding: 2px 7px; min-width: 26px; font-size: calc(var(--fs-label) + 1px); }
/* 券商式一行 tab：选中项用琥珀下划线（不是整块高亮），和券商 App 的"行情/五日/日K…"一致 */
.chart-price { display: inline-flex; align-items: baseline; gap: 9px; }
.chart-price #chart-sym { font: var(--fs-label) / 1 var(--font-body); letter-spacing: 1.2px; color: var(--mint); }
.chart-price #chart-last { font: calc(var(--fs-label) + 6px) / 1 var(--font-num); color: var(--amber); letter-spacing: 1px; font-style: normal; }
.chart-price #chart-chg { font: var(--fs-label) / 1 var(--font-num); font-style: normal; letter-spacing: 0.6px; }
.chart-price #chart-chg.u { color: var(--mint); }
.chart-price #chart-chg.d { color: var(--red); }
.chart-tabs { gap: 5px; }
.chart-tabs .tab {
  padding: 3px 7px 2px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--dim);
  letter-spacing: 0.6px;
}
.chart-tabs .tab[aria-pressed="true"] {
  color: var(--amber);
  border-bottom-color: var(--amber);
  text-shadow: 0 0 6px rgba(240, 208, 128, 0.55);
}
.pop-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
.chart-info-pop {
  position: absolute;
  right: 9px;
  top: 34px;
  z-index: 45;
  width: min(430px, calc(100% - 18px));
  padding: 8px 10px;
  background: #000;
  border: 1px solid var(--mint-dim);
  box-shadow: 0 0 12px rgba(144, 224, 208, 0.25);
  font: var(--fs-label) / 1.5 var(--font-body);
  color: var(--white);
}
.chart-info-pop p { margin: 0 0 4px; }
.chart-info-pop b { color: var(--mint); font-weight: normal; }
.chart-info-pop .pop-hint { color: var(--dim); margin-bottom: 0; }
/* 放大态：图表面板铺满视口（Esc 或再按一次还原） */
#chart-panel.expanded {
  /* 全屏时高度由 fixed inset 决定；canvas 用 inset:0 铺满 */
  position: fixed;
  inset: 8px;
  z-index: 70;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  box-shadow: 0 0 0 1px var(--mint-dim), 0 0 26px rgba(144, 224, 208, 0.28);
}
/* 窄一些时图例只留三项核心（开/高/低 收进 ⓘ 的光标读数里） */
@media (max-width: 1500px) {
  .chart-legend .lg-more { display: none; }
}

/* 周期切换 */
.btns { display: inline-flex; gap: 4px; }
.btn {
  padding: 4px 10px;
  font: var(--fs-label) / 1.2 var(--font-body);
  letter-spacing: 1.2px;
  color: var(--mint);
  background: #000;
  border: 1px solid var(--mint-dim);
  border-radius: 1px;
  cursor: pointer;
  text-transform: uppercase;
}
.btn:hover:not(:disabled) { color: var(--mint-hi); border-color: var(--mint); box-shadow: 0 0 9px var(--vfd-halo); }
.btn:active:not(:disabled) { background: var(--mint); color: #001a16; }
.btn[aria-pressed="true"] { color: #00120f; background: var(--mint); border-color: var(--mint); box-shadow: 0 0 10px var(--vfd-halo); }
.btn.pri {
  padding: 8px 14px;
  font-size: var(--fs-body);
  letter-spacing: 2px;
  color: #150f00;
  background: var(--amber);
  border-color: var(--amber);
  box-shadow: 0 0 12px var(--glow-amber);
}
.btn.pri:hover:not(:disabled) { background: var(--amber-hi); color: #150f00; box-shadow: 0 0 18px rgba(240, 208, 128, 0.8); }
.btn.pri:active:not(:disabled) { background: var(--amber-hi); }
.btn.danger { color: var(--red-hi); border-color: var(--red); }
.btn.danger:hover:not(:disabled) { color: #fff; background: #1a0000; box-shadow: 0 0 11px var(--glow-red); }
.btn.danger:active:not(:disabled) { background: var(--red); color: #fff; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:focus-visible { outline: 1px solid var(--amber); outline-offset: 2px; }
.btn.sm { padding: 2px 7px; font-size: var(--fs-tiny); letter-spacing: 0.8px; }

/* ═══════════════════════ 表单 ═══════════════════════ */
.form { display: grid; gap: 7px; }
.field { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 8px; }
.field > .lab { font: var(--fs-label) / 1.2 var(--font-body); letter-spacing: 1.4px; color: var(--mint); }
.inp, .sel {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  font: var(--fs-body) / 1.3 var(--font-body);
  color: var(--amber-hi);
  background: #000;
  border: 1px solid var(--amber-lo);
  border-radius: 1px;
  outline: none;
  font-variant-numeric: tabular-nums;
}
.inp:focus, .sel:focus { border-color: var(--amber); box-shadow: 0 0 8px var(--glow-amber); }
.inp::placeholder { color: #7d7d7d; }
.sel { color: var(--amber-hi); }
.sel option { background: #000; color: var(--amber-hi); }
.side-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* 数量与价格并排：省一行高度，给下方订单表留空间 */
.field2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.field2 .f { display: grid; gap: 3px; min-width: 0; }
.field2 .lab { font: var(--fs-label) / 1.1 var(--font-body); letter-spacing: 1.2px; color: var(--mint); }
.side-switch .btn { padding: 7px 10px; font-size: var(--fs-body); letter-spacing: 2px; }
.side-switch .btn[data-side="SELL"][aria-pressed="true"] {
  color: #fff; background: var(--red); border-color: var(--red); box-shadow: 0 0 12px var(--glow-red);
}
.hint {
  padding: 5px 8px;
  font: var(--fs-label) / 1.4 var(--font-body);
  color: var(--mint);
  border: 1px dashed var(--mint-dim);
  border-radius: 1px;
  letter-spacing: 0.4px;
}
.hint b { color: var(--amber); font-family: var(--font-num); letter-spacing: 0.8px; }
.resp {
  min-height: 40px;
  padding: 6px 8px;
  font: var(--fs-label) / 1.4 var(--font-body);
  color: var(--dim);
  background: #000;
  border: 1px solid var(--mint-dim);
  border-radius: 1px;
  overflow-wrap: anywhere;
}
.resp .code { font: 700 var(--fs-label) / 1.3 var(--font-num); letter-spacing: 1px; }
.resp[data-k="ok"] { border-color: var(--ok); color: var(--ok); box-shadow: 0 0 8px rgba(142, 255, 168, 0.3); }
.resp[data-k="bad"] { border-color: var(--red); color: var(--red-hi); box-shadow: 0 0 8px var(--glow-red); }
.resp[data-k="warn"] { border-color: var(--amber); color: var(--amber); }

/* ═══════════════════════ 读数格（账户） ═══════════════════════ */
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; }
.kv .cell { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.kv .cell.wide { grid-column: 1 / -1; }
.kv .ck { font: var(--fs-label) / 1.2 var(--font-body); letter-spacing: 1.1px; color: var(--mint); white-space: nowrap; }
.kv .cv {
  font: var(--fs-body) / 1.2 var(--font-num);
  color: var(--amber);
  letter-spacing: 0.6px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.kv .cv.big { font-size: 21px; color: var(--amber-hi); text-shadow: 0 0 var(--glow-core) currentColor, 0 0 6px var(--glow-amber); }
.kv .cv.pos { color: var(--ok); }
.kv .cv.neg { color: var(--red-hi); }
.kv .cv.warn { color: var(--amber); }

/* ═══════════════════════ 资金流 / VFD 条 ═══════════════════════ */
.vfd-row { display: flex; align-items: center; gap: 10px; }
.vfd-row .vl { font: var(--fs-label) / 1.2 var(--font-body); color: var(--mint); letter-spacing: 1.2px; white-space: nowrap; }
.vfd-row .vv { font: var(--fs-body) / 1.2 var(--font-num); color: var(--amber); letter-spacing: 0.6px; white-space: nowrap; min-width: 74px; text-align: right; }
.vfd-bar {
  position: relative;
  flex: 1 1 auto;
  height: 11px;
  border: 1px solid var(--vfd-edge);
  border-radius: 1px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0 var(--vfd-gap), rgba(0, 0, 0, 0) var(--vfd-gap) var(--vfd-pitch)),
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0 0%, rgba(0, 0, 0, 0.62) 0% 100%),
    linear-gradient(180deg, var(--vfd-lit) 0, var(--vfd-lit-mid) 58%, #2aa79c 100%);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9), 0 0 4px var(--vfd-halo);
}
.vfd-bar.buy {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0 var(--vfd-gap), rgba(0, 0, 0, 0) var(--vfd-gap) var(--vfd-pitch)),
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0 0%, rgba(0, 0, 0, 0.62) 0% 100%),
    linear-gradient(180deg, #b6ffe9 0, #5be0c4 58%, #1f8f7c 100%);
}
.vfd-bar.sell {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0 var(--vfd-gap), rgba(0, 0, 0, 0) var(--vfd-gap) var(--vfd-pitch)),
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0 0%, rgba(0, 0, 0, 0.62) 0% 100%),
    linear-gradient(180deg, #ff9a8a 0, #e03020 58%, #8d1a10 100%);
}
.mf-grid { display: grid; gap: 6px; }

/* ═══════════════════════ 新闻卡 ═══════════════════════ */
.news-card {
  border: 1px solid var(--mint-dim);
  border-left: 2px solid var(--mint);
  border-radius: 1px;
  padding: 6px 8px 7px;
  margin-bottom: 7px;
  background: #000;
}
.news-card .nt { font: var(--fs-body) / 1.35 var(--font-body); color: var(--white); margin-bottom: 3px; }
.news-card .nm {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  font: var(--fs-label) / 1.3 var(--font-body); color: var(--dim); letter-spacing: 0.4px;
}
.news-card .nm .sym { color: var(--amber); font-family: var(--font-num); letter-spacing: 1px; }
.news-card .nf { margin-top: 4px; font: var(--fs-label) / 1.45 var(--font-body); color: var(--mint); }
.news-card .nf b { color: var(--mint-hi); font-weight: 400; }
.tag {
  display: inline-block;
  padding: 0 6px;
  font: var(--fs-label) / 1.4 var(--font-num);
  letter-spacing: 1px;
  color: var(--amber);
  border: 1px solid var(--amber-lo);
  border-radius: 1px;
}
.tag.red { color: var(--red-hi); border-color: var(--red); }
.empty { padding: 12px 4px; font: var(--fs-label) / 1.5 var(--font-body); color: var(--dim); letter-spacing: 0.6px; }

/* ═══════════════════════ 状态徽标 ═══════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 7px;
  font: var(--fs-label) / 1.35 var(--font-body);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  border: 1px solid var(--mint-dim);
  border-radius: 1px;
  color: var(--mint);
}
.badge[data-s="running"] { color: var(--ok); border-color: var(--ok); box-shadow: 0 0 8px rgba(142, 255, 168, 0.35); }
.badge[data-s="paused"] { color: var(--amber); border-color: var(--amber); box-shadow: 0 0 8px var(--glow-amber); }
.badge[data-s="finished"] { color: var(--white); border-color: var(--white); }
.badge[data-s="idle"] { color: var(--dim); }

/* ═══════════════════════ 提示条 ═══════════════════════ */
.toasts {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 460px;
  pointer-events: none;
}
.toast {
  padding: 7px 10px;
  font: var(--fs-label) / 1.45 var(--font-body);
  color: var(--white);
  background: #000;
  border: 1px solid var(--mint-dim);
  border-left: 2px solid var(--mint);
  border-radius: 1px;
  box-shadow: 0 0 12px rgba(144, 224, 208, 0.25);
  overflow-wrap: anywhere;
}
.toast[data-k="bad"] { border-color: var(--red); border-left-color: var(--red); color: var(--red-hi); box-shadow: 0 0 14px var(--glow-red); }
.toast[data-k="ok"] { border-color: var(--ok); border-left-color: var(--ok); color: var(--ok); }
.toast[data-k="warn"] { border-color: var(--amber); border-left-color: var(--amber); color: var(--amber); }

/* ═══════════════════════ 登录 ═══════════════════════ */
.login-wrap {
  display: grid;
  place-items: center;
  height: 100vh;
  padding: 24px;
  background: #000;
}
.login {
  position: relative;
  width: 100%;
  max-width: 470px;
  padding: 18px 20px 20px;
  background: #000;
  border: 2px solid var(--amber);
  border-radius: var(--radius);
  box-shadow: 0 0 10px rgba(240, 208, 128, 0.45), 0 0 34px rgba(240, 208, 128, 0.16);
}
/* 四角荧光角标 */
.login::before, .login::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border: 2px solid var(--amber);
  box-shadow: 0 0 7px rgba(240, 208, 128, 0.75);
}
.login::before { left: 3px; top: 3px; border-right: none; border-bottom: none; }
.login::after { right: 3px; top: 3px; border-left: none; border-bottom: none; }
.login h1 {
  margin: 0 0 2px;
  font: 700 26px/1.15 var(--font-pixel);
  letter-spacing: 3px;
  color: var(--amber);
  text-shadow: 0 0 var(--glow-core) currentColor, 0 0 6px currentColor, 0 0 18px var(--glow-amber);
}
.login .lg-sub {
  margin-bottom: 14px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--amber);
  font: var(--fs-label) / 1.4 var(--font-body);
  letter-spacing: 1.8px;
  color: var(--mint);
}
.login .form { gap: 11px; }
.login .field { grid-template-columns: 66px minmax(0, 1fr); }
.login .resp { min-height: 40px; }
.login-foot {
  margin-top: 12px;
  padding-top: 9px;
  border-top: 1px solid var(--mint-dim);
  font: var(--fs-label) / 1.5 var(--font-body);
  color: var(--dim);
  letter-spacing: 0.5px;
}
.prompt::before {
  content: "";
  display: inline-block;
  width: 7px; height: 13px;
  margin-right: 6px;
  vertical-align: -2px;
  background: var(--mint);
  box-shadow: 0 0 7px var(--vfd-halo);
  animation: blinkHard 1.15s steps(1, end) infinite;
}

/* ═══════════════════════ 管理后台 ═══════════════════════ */
.admin-main {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  /* 第三行是「审计 / AUDIT」（整行宽）。这里必须是 minmax(180px, 1fr) 而不是 minmax(0, 1fr)：
     面板一多（现在 7 块），auto 行先吃掉所有高度，1fr 就被压成 0 —— 实测 1680×1200/1500 下
     AUDIT 只剩 2px，主办方看不到审计日志。给一个固定下限，超出的部分交给 .admin-main 自己滚动。
     判据：node tools/measure-ui.mjs（每块面板 ≥40px，改前 2px / 改后 180px）。 */
  grid-template-rows: auto auto minmax(180px, 1fr);
  gap: var(--gap);
  padding: var(--gap);
  min-height: 0;
  overflow: auto;
}
.admin-main > .panel { min-height: 0; }
.admin-main > .span2 { grid-column: 1 / -1; }
.admin-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); min-height: 0; }
.ctl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ctl-grid .btn { padding: 9px 10px; font-size: var(--fs-body); letter-spacing: 1.6px; }
.day-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.day-row .inp { width: 82px; }
.warn-box {
  padding: 7px 10px;
  border: 1px solid var(--red);
  border-left: 3px solid var(--red);
  border-radius: 1px;
  color: var(--red-hi);
  font: var(--fs-label) / 1.45 var(--font-body);
  letter-spacing: 0.5px;
  box-shadow: 0 0 10px rgba(224, 48, 32, 0.25);
}
.warn-box b { color: #fff; letter-spacing: 1.4px; }
.ok-box {
  padding: 7px 10px;
  border: 1px solid var(--ok);
  border-left: 3px solid var(--ok);
  border-radius: 1px;
  color: var(--ok);
  font: var(--fs-label) / 1.45 var(--font-body);
  box-shadow: 0 0 10px rgba(142, 255, 168, 0.22);
}
.mono-trunc {
  font-family: var(--font-num);
  font-size: var(--fs-label);
  letter-spacing: 0.4px;
  color: var(--amber);
  overflow-wrap: anywhere;
}
.audit-tbl td { white-space: normal; overflow-wrap: anywhere; font-size: var(--fs-label); }
.audit-tbl td.num { font-size: var(--fs-label); color: var(--amber); }

/* 模态确认 */
.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: none;
  place-items: center;
  background: rgba(0, 0, 0, 0.82);
}
.modal-mask[data-show="1"] { display: grid; }
.modal {
  width: min(560px, 92vw);
  padding: 16px 18px 18px;
  background: #000;
  border: 2px solid var(--red);
  box-shadow: 0 0 14px var(--glow-red), 0 0 40px rgba(224, 48, 32, 0.2);
}
.modal h2 {
  margin: 0 0 10px;
  font: 700 20px/1.2 var(--font-pixel);
  letter-spacing: 2px;
  color: var(--red-hi);
}
.modal p { margin: 0 0 14px; font: var(--fs-body) / 1.5 var(--font-body); color: var(--white); }
.modal .acts { display: flex; justify-content: flex-end; gap: 10px; }

/* ═══════════════════════ 动效（克制，三处） ═══════════════════════ */
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.42; } }
@keyframes blinkHard { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }

/* 窄屏兜底：不横向溢出，改成上下堆叠
   ⚠️ 断点从 1280 收到 1199（任务书 v2.0 §3 Q1）：1280×720 是必须支持的目标机位，
   `max-width:1280` 会把 1280 本身也推成单列 —— 实测下单面板被挤到 top=1519px（首屏外）。 */
@media (max-width: 1199px) {
  :root { --col-a: 250px; --col-c: 340px; }
  body { overflow: auto; }
  .shell { height: auto; min-height: 100vh; }
  .main { grid-template-columns: minmax(0, 1fr); height: auto; }
  .panel { min-height: 220px; }
}

/* ── 矮屏（1366×768 / 1280×800 / 1440×900 这类笔记本）—— 2026-11-03 加 ──
   实测问题：1366×768 下图表画布只有 528×86px（1680×1400 是 842×546）。
   根因：body 与 .app 都 overflow:hidden、.shell 固定 100vh，面板被按 flex 比例硬压，
   图表那格只剩一条缝（价格线/量柱/MACD/说明文字全糊在一起）。
   处理三件事：
     ① 允许纵向滚动（.shell 高度改为 auto），不再强求"一屏装完"；
     ② 给图表一个**下限高度**（先保它，其他面板各自有下限、超出就滚动）；
     ③ 收窄左右栏，把宽度让给图表（图表宽度 528 → 约 800）。
   注意：断点用 max-height 950 而不是宽度 —— 1180 以下的宽度走上面那条堆叠规则。
   ⚠️ 下界从 1281 收到 1200（任务书 v2.0 Q1）：1280×720 也必须走这套"可滚动 + 有下限"的规则，
   否则面板被压到 min-height 以下、**内容互相压盖**（2026-11-03 实测 1280×720：
   账户的持仓表头压进了下单表单里，截图可见；只量"面板高度 ≥40px"是发现不了的）。 */
@media (max-height: 950px) and (min-width: 1200px) {
  :root { --col-a: 224px; --col-c: 300px; }
  body.pg-terminal { height: auto; overflow: auto; }
  body.pg-terminal .shell { height: auto; min-height: 100vh; }
  body.pg-terminal .hdr { position: sticky; top: 0; z-index: 30; }   /* 滚动时顶栏跟随，比赛状态一直可见 */
  body.pg-terminal .main { height: auto; min-height: 0; overflow: visible; }
  /* #notif-panel 例外：它自己封了 max-height:26vh，再叠加 230px 下限就会
     "盒子 230px 但上限 187px" → 内容溢出 198px（2026-11-03 实测 1280×720）。 */
  body.pg-terminal .main .col > .panel:not(#notif-panel) { min-height: 230px; }
  /* 面板在"高度 auto + 允许滚动"的列里不能带 flex-basis:0：
     实测 1920×1080 @125% 时订单面板被压成 **2px**（内容溢出 104px 被裁）。
     basis 改 auto ⇒ 按内容撑开，有富余空间时再按 grow 分配。 */
  body.pg-terminal .main .col > .panel { flex-basis: auto; }
  body.pg-terminal #chart-panel { min-height: 500px !important; }
  /* §13 G01b：价格绘图区 ≥280px。画布高 = 读数行 + 价格区 + 量区(≥64) + 边距，
     反向算：330px 只能给价格区 216px（实测），所以抬到 400px。 */
  body.pg-terminal .chart-wrap { height: 420px; }
}


/* 审计表：固定布局 + 显式列宽（默认 auto 布局在窄区里会挤成一字一行） */
.audit-tbl { table-layout: fixed; }
.audit-tbl td { overflow: hidden; text-overflow: ellipsis; }
.audit-tbl th.lft, .audit-tbl td:nth-child(5) { text-align: left; }

/* ═══════════════════════ 纪律 / DISCIPLINE（2026-11-01 追加，只加不改） ═══════════════════════
   版式：左边「事件列表 + 登记表单」，右边「详情（时间线/处罚/申诉/证据哈希）」，
   下面再排「裁决」与「通报模板」。配色照旧：纯黑底、琥珀数值、薄荷标签、荧光红告警；
   级别色阶 = L0 薄荷 / L1 白 / L2 琥珀 / L3-L4 荧光红（L4 更亮）。 */
.disc-k { font: var(--fs-label) / 1 var(--font-body); letter-spacing: 1.4px; color: var(--mint); }
.disc-hint { font: var(--fs-label) / 1.4 var(--font-body); color: var(--dim); letter-spacing: 0.4px; }

#disc-panel { margin-top: 0; }
.disc-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
  margin-top: 10px;
}
.disc-col { min-width: 0; }

/* 表格：固定布局，长标题与长理由折行、不裁字 */
.disc-tbl { table-layout: fixed; }
.disc-tbl td, .disc-tbl th { overflow-wrap: anywhere; }
.tbl th.lft, .tbl td.lft { text-align: left; }
.disc-tbl td.num { letter-spacing: 0.2px; }

/* 事件行：整行可点（点一行展开右侧详情） */
#disc-inc-body tr.disc-row { cursor: pointer; }
#disc-inc-body tr.disc-row:focus-visible { outline: 1px solid var(--amber); outline-offset: -1px; }

/* 级别色阶（数值色，不改背景，不破坏纯黑底铁律）
   ⚠ 必须写成 `.tbl tr td.disc-lvl-N`：.tbl td（0,1,1）与 .tbl tr.sel td（0,2,1）都比单独的类选择器强，
   只写 .disc-lvl-2 的话，选中那一行的级别色会被压回去（实测 L2 显示成 var(--mint-hi)）。 */
.tbl tr td.disc-lvl-0, .disc-lvl-0 { color: var(--mint-hi); text-shadow: 0 0 var(--glow-core) currentColor; }
.tbl tr td.disc-lvl-1, .disc-lvl-1 { color: var(--white); }
.tbl tr td.disc-lvl-2, .disc-lvl-2 { color: var(--amber); text-shadow: 0 0 var(--glow-core) currentColor; }
.tbl tr td.disc-lvl-3, .disc-lvl-3 { color: var(--red-hi); text-shadow: 0 0 var(--glow-core) currentColor, 0 0 7px var(--glow-red); }
.tbl tr td.disc-lvl-4, .disc-lvl-4 { color: #ff8f80; letter-spacing: 1px; text-shadow: 0 0 1px #fff, 0 0 8px var(--glow-red); }
.tbl tr td.disc-lvl-x, .disc-lvl-x { color: var(--dim); }

/* 折行只给标了 .lft 的文本列：.tbl td 默认 nowrap，长标题/长理由会顶出单元格 */
.disc-tbl th.lft, .disc-tbl td.lft, .disc-tbl td.empty { white-space: normal; overflow-wrap: anywhere; }

/* 表单栅格：标签在左、输入在右；wide 占整行 */
.disc-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 7px 12px;
  min-width: 0;
  margin-bottom: 4px;
}
.disc-form-grid .fld { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; }
.disc-form-grid .fld.wide { grid-column: 1 / -1; }
.disc-form-grid .fld > .lab { font: var(--fs-label) / 1.2 var(--font-body); letter-spacing: 1.1px; color: var(--mint); }
textarea.inp { min-height: 62px; resize: vertical; line-height: 1.4; }

/* 证据行：name / sha256 / 备注 / 删除 */
.disc-ev-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.5fr) minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
  min-width: 0;
}
.disc-ev-row .inp { font-size: var(--fs-label); }

/* 处罚行：参赛者 / 类型 / 数值 / 比赛日 / 理由 / 删除 */
.disc-pen-row {
  display: grid;
  grid-template-columns: 96px 210px 92px 92px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
  min-width: 0;
}
.disc-pen-row .inp, .disc-pen-row .sel { font-size: var(--fs-label); }
.disc-pen-row .inp:disabled { opacity: 0.35; }

/* 输入校验不过：只换边框与文字颜色，不改变布局 */
.inp.disc-bad, .sel.disc-bad { border-color: var(--red); color: var(--red-hi); box-shadow: 0 0 8px var(--glow-red); }

/* 已撤销的处罚行 */
.disc-revoked { color: var(--dim); text-decoration: line-through; }
.tbl tr.disc-revoked-row td { opacity: 0.62; }

/* 通报模板：等宽、可换行、纯黑底 */
.disc-pre {
  margin: 0;
  padding: 9px 10px;
  max-height: 420px;
  overflow: auto;
  background: #000;
  border: 1px solid var(--mint-dim);
  border-radius: 1px;
  color: var(--mint-hi);
  font: var(--fs-label) / 1.55 var(--font-num);
  letter-spacing: 0.3px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* 停赛 id 输入框窄一点，别把按钮挤走 */
#disc-prot-pid.disc-pid-inp { width: 96px; }

/* 裁决标题旁显示当前案件 */
.disc-case-tag { margin-left: 8px; font: var(--fs-label) / 1.3 var(--font-num); color: var(--amber); letter-spacing: 0.6px; }

/* 窄屏：两列改一列 */
@media (max-width: 1280px) {
  .disc-cols { grid-template-columns: minmax(0, 1fr); }
  .disc-form-grid { grid-template-columns: minmax(0, 1fr); }
  .disc-form-grid .fld { grid-template-columns: 88px minmax(0, 1fr); }
  .disc-ev-row { grid-template-columns: minmax(0, 1fr) auto; }
  .disc-pen-row { grid-template-columns: 92px minmax(0, 1fr) auto; }
}


/* ═══════════════════════ 站内信（选手端） ═══════════════════════ */
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-item { padding: 6px 2px 7px; border-bottom: 1px solid rgba(144, 224, 208, 0.12); }
.notif-item:last-child { border-bottom: none; }
.notif-item .nt { display: flex; align-items: baseline; gap: 8px; }
.notif-item .nt .k { font: var(--fs-label) / 1 var(--font-body); color: var(--dim); letter-spacing: .8px; }
.notif-item .nt .h { color: var(--amber); letter-spacing: .6px; }
.notif-item .nb { margin-top: 3px; color: var(--mint); font: var(--fs-label) / 1.5 var(--font-body); }
.notif-item.unread { border-left: 2px solid var(--red); padding-left: 7px; }
.notif-item.unread .h { color: #fff; }
#btn-notif b { color: var(--red-hi); }
#btn-notif[data-n="0"] b { color: var(--dim); }

/* ═══════════════════════ 四入口 / 目标杠杆 / 账户摘要（§14 · 2026-11-03） ═══════════════════════ */
/* 账户顶部只留四项常驻（U02）：借 .kv 的两列网格，但数值统一右对齐、允许换行不溢出 */
/* 账户顶部四项：右栏只有 300px，两列排会把 "可用购买力 $1,000,000.00" 挤成
   "$1,80 0,000. 00"（数字中间断行 = 不可读，审核 U02 的原问题）。
   改成**单列四行**、金额不换行；明细继续收在下面 details 里。 */
.kv-top { grid-template-columns: minmax(0, 1fr); gap: 3px; margin-bottom: 4px; }
.kv-top .cv { max-width: none; white-space: nowrap; overflow-wrap: normal; text-align: right; }
.kv-details { margin-top: 2px; }
.kv-details > summary {
  cursor: pointer;
  font: var(--fs-label) / 1.5 var(--font-body);
  letter-spacing: 1px;
  color: var(--mint);
  padding: 2px 0 4px;
  list-style: none;
}
.kv-details > summary::before { content: "▸ "; color: var(--amber); }
.kv-details[open] > summary::before { content: "▾ "; }
.kv-details[open] > summary { color: var(--mint-hi); }
.kv-details > .kv { padding-top: 2px; }

/* 四入口：开仓=实心、平仓=虚线框，一眼能分出"新建风险"与"了结仓位" */
.intent-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.intent-grid .btn {
  padding: 7px 2px;
  font: var(--fs-label) / 1.1 var(--font-body);
  letter-spacing: 1px;
  min-width: 0;
}
.intent-grid .btn[data-intent^="CLOSE"] { border-style: dashed; }
.intent-grid .btn[data-intent="OPEN_LONG"][aria-pressed="true"] { color: #00120f; background: var(--mint); border-color: var(--mint); box-shadow: 0 0 10px var(--vfd-halo); }
.intent-grid .btn[data-intent="OPEN_SHORT"][aria-pressed="true"] { color: #fff; background: var(--red); border-color: var(--red); box-shadow: 0 0 12px var(--glow-red); }
.intent-grid .btn[data-intent="CLOSE_LONG"][aria-pressed="true"],
.intent-grid .btn[data-intent="CLOSE_SHORT"][aria-pressed="true"] {
  color: var(--amber-hi); background: #1a1400; border-color: var(--amber); box-shadow: 0 0 12px var(--glow-amber);
}

/* 当前持仓一行：§14.1 要求"明确提示当前仓位" */
.pos-line {
  font: var(--fs-label) / 1.4 var(--font-body);
  letter-spacing: 0.6px;
  color: var(--dim);
  border-left: 2px solid var(--amber-lo);
  padding: 2px 0 2px 7px;
}

/* 目标杠杆快捷：只改数量，不滑动即发单 */
.lev-quick {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font: var(--fs-label) / 1.3 var(--font-body);
}
.lev-quick .ck { color: var(--mint); letter-spacing: 1px; white-space: nowrap; }
.btn.tiny { padding: 1px 7px; font: var(--fs-tiny) / 1.6 var(--font-num); letter-spacing: 0.5px; min-width: 0; }
.lev-note {
  flex: 1 1 100%;
  font: var(--fs-tiny) / 1.35 var(--font-num);
  color: var(--amber);
  letter-spacing: 0.3px;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 回执常驻（U03）：提交后不滚动也能看到结果 */
.resp.sticky { position: sticky; bottom: 0; z-index: 3; background: #000; }

/* ═══════════════════════ 列宽预算（任务书 v2.0 §3 Q1） ═══════════════════════
   目标：四种机位首屏都能完整看到「标的 / 报价 / 主图 / 下单 / 回执」。
        ≥1600：默认 400 / 中 / 396
        1421–1599：320 / 中 / 340
        1366–1420：200 / 中 / 300
        1280–1365：左栏折叠成 56px 导航条 / 中 / 300（只留标的代码，名称与价格让给主图）
  这些规则放在文件末尾，同优先级下覆盖前面 max-height:950 那组列宽。 */
@media (min-width: 1421px) and (max-width: 1599px) {
  :root { --col-a: 320px; --col-c: 340px; }
}
@media (min-width: 1366px) and (max-width: 1420px) {
  :root { --col-a: 200px; --col-c: 300px; }
}
@media (min-width: 1200px) and (max-width: 1365px) {
  :root { --col-a: 56px; --col-c: 300px; }
  /* 折叠态：只保留标的代码一行。
     完整买卖价在报价头里（U01），所以名称/最新价/搜索框/计数都可以收起。
     排行榜与消息面板在 56px 里排不下（实测竖排糊成一团），先收起 —— 顶栏有「消息」按钮，
     排行榜按任务书 U01「移出交易侧栏」，阶段 3 进独立「排行」页。 */
  body.pg-terminal .sym-name,
  body.pg-terminal #sym-body .num,
  body.pg-terminal .main > .col:first-child .search,
  body.pg-terminal #sym-count,
  body.pg-terminal #sym-table thead,
  body.pg-terminal .main > .col:first-child .panel-note,
  body.pg-terminal #lb-table,
  body.pg-terminal #notif-list { display: none; }
  body.pg-terminal .main > .col:first-child > .panel:nth-child(2),
  body.pg-terminal .main > .col:first-child > .panel:nth-child(3) { display: none; }
  body.pg-terminal .sym-row > td { padding-left: 1px; padding-right: 1px; text-align: center; }
  body.pg-terminal .sym-code { font-size: var(--fs-tiny); letter-spacing: 0; }
}

/* §13.1 G01：固定读数行（在 Canvas 之外，永不盖住走势）
   顺序：工具栏 → 读数行 → 价格区 → 量 → MACD → 时间轴 */
.chart-ohlc {
  flex: 0 0 auto;
  padding: 3px 9px 4px;
  font: var(--fs-label) / 1.35 var(--font-num);
  color: var(--amber);
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--mint-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════ 导航与分页（任务书 §8） ═══════════════════════ */
.pagenav {
  display: flex;
  align-items: center;      /* 不拉伸：默认 stretch 会把页签拉成整条高度（实测后台被拉到 115px） */
  gap: 6px;
  height: 44px;
  padding: 6px var(--gap) 0;
  border-bottom: 1px solid var(--mint-dim);
  flex: 0 0 auto;
}
.pagenav .nav-btn {
  align-self: center;
  height: 32px;
  padding: 6px 18px;
  font: var(--fs-label) / 1.1 var(--font-body);
  letter-spacing: 2px;
  border-radius: 0;
}
.pagenav .nav-btn[aria-pressed="true"] {
  color: var(--amber-hi);
  background: #141000;
  border-color: var(--amber);
  box-shadow: inset 0 -2px 0 var(--amber), 0 0 10px var(--glow-amber);
}
.page { padding: var(--gap); min-height: 0; }
.page-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}
.page-col { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
/* 被搬到别的页里的面板：在那个页里按内容高度自然排，不再按交易页的 flex 比例压扁 */
.page .page-col > .panel { flex: 0 0 auto; min-height: 260px; }
.page .page-col > #news-panel,
.page .page-col > #lb-panel,
.page .page-col > #exec-panel,
.page .page-col > #notif-panel { min-height: 320px; }
.notes-list { margin: 0; padding: 0 0 0 2px; list-style: none; display: grid; gap: 8px; }
.notes-list li {
  font: var(--fs-label) / 1.55 var(--font-body);
  color: var(--dim);
  letter-spacing: 0.3px;
  border-left: 2px solid var(--amber-lo);
  padding-left: 9px;
  white-space: normal;
}
.notes-list b { color: var(--mint); font-weight: normal; letter-spacing: 1px; }
.notes-list code { color: var(--amber); font-family: var(--font-num); }
/* 交易页只留核心任务：标的 / 图表 / 账户摘要 / 下单 / 订单 */
@media (max-width: 1199px) {
  .page-grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* 后台分页（§8）：首页只留控制与健康状态，其余各自成页 */
.admin-page { padding: var(--gap); }
.admin-page .page-col > .panel { min-height: 0; }
/* 审计详情弹层（§8：点一行就能看到并复制原文，不只靠 hover 的 title） */
.audit-detail {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(760px, 92vw);
  height: fit-content;
  max-height: 84vh;
  padding: 12px;
  background: #000;
  border: 1px solid var(--amber);
  box-shadow: 0 0 24px var(--glow-amber);
  z-index: 120;
  display: grid;
  gap: 10px;
}
.audit-detail textarea {
  width: 100%;
  resize: vertical;
  background: #000;
  color: var(--amber);
  border: 1px solid var(--mint-dim);
  font: var(--fs-label) / 1.5 var(--font-num);
  padding: 8px;
  letter-spacing: 0.3px;
}
.audit-detail-btns { display: flex; gap: 8px; justify-content: flex-end; }
.danger-panel { border-color: var(--red); }
.danger-panel .panel-hd { border-bottom-color: var(--red); }
.danger-panel .panel-hd .t { color: var(--red-hi); }

/* G05：手动拖走历史后收到新数据 —— 明白提示，但不把视图拉回去 */
.badge-new {
  font: var(--fs-tiny) / 1.6 var(--font-body);
  color: #00120f;
  background: var(--amber);
  padding: 0 6px;
  letter-spacing: 1px;
  box-shadow: 0 0 10px var(--glow-amber);
  animation: breathe 1.6s infinite;
}
.chart-tool[aria-pressed="true"]#chart-latest { color: var(--amber-hi); border-color: var(--amber); }

/* 2026-11-05: position rows are clickable (jump to that symbol) + inline quick actions */
#pos-body tr[data-symbol] { cursor: pointer; }
#pos-body tr[data-symbol]:hover { background: rgba(144, 224, 208, .08); }
.pos-act-cell { white-space: nowrap; text-align: right; }
.pos-act-wrap { display: inline-flex; gap: 4px; }
.pos-act { padding: 2px 7px; font-size: 12px; letter-spacing: 1px; }
.pos-act[data-act="sell"] { color: var(--red); border-color: rgba(224, 48, 32, .55); }

/* 2026-11-05: 管理后台首页「实时监控 / LIVE」——三列，占用原先空着的那块区域 */
#live-panel .live-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-height: 34vh;
  overflow: auto;
}
#live-panel .live-col { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--mint-dim); padding-left: 8px; }
#live-panel .live-col:first-child { border-left: 0; padding-left: 0; }
#live-panel .live-hd { font: var(--fs-label) / 1.2 var(--font-body); letter-spacing: 1.4px; color: var(--mint); margin-bottom: 4px; }
#live-panel .live-hd em { font-style: normal; color: var(--amber); margin-left: 6px; }
#live-panel .live-scroll { overflow: auto; min-height: 0; }
#live-panel .tbl-compact { font-size: 12.5px; }
#live-panel .tbl-compact th, #live-panel .tbl-compact td { padding: 2px 6px; }
#live-panel tbody tr.down td:nth-child(3),
#live-panel tbody tr.down td:nth-child(4) { color: var(--red); }