/* hy.css — Henry's Research 统一样式表 */

/* ------------------------------------------------------------------ */
/* CSS Variables                                                        */
/* ------------------------------------------------------------------ */
:root {
  --bg-primary: #0D1117;
  --bg-secondary: #161B22;
  --bg-tertiary: #1C2333;
  --bg-card: #1A1F2E;
  --bg-hover: #21262D;
  --bg-sidebar: #0B0E14;
  --bg-code: #0B0E14;
  --text-code: #B0B8C0;
  --border: #30363D;
  --border-light: #21262D;

  --text-primary: #EDF2F9;
  --text-secondary: #8B949E;
  --text-muted: #6E7681;
  --text-link: #58A6FF;

  --green: #2EA043;
  --green-bright: #3FB950;
  --green-bg: rgba(46, 160, 67, 0.15);
  --red: #F85149;
  --red-bright: #FF6B6B;
  --red-bg: rgba(248, 81, 73, 0.15);
  --yellow: #D29922;
  --yellow-bg: rgba(210, 153, 34, 0.15);
  --blue: #58A6FF;
  --blue-bg: rgba(88, 166, 255, 0.12);
  --purple: #BC8CFF;
  --purple-bg: rgba(188, 140, 255, 0.15);
  --cyan: #56D4DD;
  --cyan-bg: rgba(86, 212, 221, 0.15);
  --orange: #F0883E;
  --orange-bg: rgba(240, 136, 62, 0.15);

  --sidebar-width: 220px;
  --topbar-height: 52px;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius: 6px;
  --transition: 0.15s ease;
}

[data-theme="light"] {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F6F8FA;
  --bg-tertiary: #F0F2F5;
  --bg-card: #FFFFFF;
  --bg-hover: #EEF1F4;
  --bg-sidebar: #F6F8FA;
  --bg-code: #F0F2F5;
  --text-code: #57606A;
  --border: #D0D7DE;
  --border-light: #E8ECF0;
  --text-primary: #1F2328;
  --text-secondary: #656D76;
  --text-muted: #8C959F;
  /* 强调色为亮背景重调 (原暗色版在白底上偏荧光/对比不足) */
  --text-link: #0969DA;
  --green: #1A7F37;
  --green-bright: #1F883D;
  --green-bg: rgba(26, 127, 55, 0.12);
  --red: #CF222E;
  --red-bright: #D1242F;
  --red-bg: rgba(207, 34, 46, 0.10);
  --yellow: #9A6700;
  --yellow-bg: rgba(154, 103, 0, 0.12);
  --blue: #0969DA;
  --blue-bg: rgba(9, 105, 218, 0.10);
  --purple: #8250DF;
  --purple-bg: rgba(130, 80, 223, 0.10);
  --cyan: #1B7C83;
  --cyan-bg: rgba(27, 124, 131, 0.10);
  --orange: #BC4C00;
  --orange-bg: rgba(188, 76, 0, 0.10);
}

/* ------------------------------------------------------------------ */
/* Reset & Base                                                        */
/* ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  font-size: 0.95rem;
  overflow-x: hidden;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ */
/* Topbar                                                              */
/* ------------------------------------------------------------------ */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-height: 52px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  z-index: 100;
  flex-wrap: wrap;
  gap: 6px;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.topbar-logo {
  font-weight: 700;
  font-size: 1.4rem;
  font-family: var(--font-mono);
  color: var(--text-primary);
  letter-spacing: -0.3px;
}
.topbar-logo:hover {
  text-decoration: none;
  color: var(--text-link);
}

.topbar-badge {
  font-size: 0.7rem;
  padding: 2px 10px;
  border-radius: 12px;
  background: rgba(88, 166, 255, 0.1);
  color: var(--blue);
  margin-left: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid rgba(88, 166, 255, 0.2);
}

.topbar-ticker {
  display: flex;
  gap: 16px;
  font-size: 0.8rem;
  flex-wrap: wrap;
  align-items: center;
}

.ticker-item {
  display: flex;
  gap: 4px;
  align-items: center;
}

.ticker-label {
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.ticker-price {
  font-weight: 600;
  font-size: 0.9rem;
}

.ticker-change {
  font-weight: 600;
}

.ticker-value {
  color: var(--text-primary);
}

.ticker-unit {
  color: var(--text-muted);
  font-size: 0.7rem;
}

.ticker-ts {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-family: var(--font-mono);
  margin-left: 2px;
}

.topbar-actions {
  display: flex;
  gap: 8px;
}

.btn-icon {
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.btn-icon:hover { background: var(--bg-hover); color: var(--text-primary); }

/* 主题三态分段控件 */
.theme-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.theme-opt {
  width: 30px; height: 30px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.theme-opt + .theme-opt { border-left: 1px solid var(--border); }
.theme-opt:hover { background: var(--bg-hover); color: var(--text-secondary); }
.theme-opt.active { background: var(--blue-bg); color: var(--text-link); }

/* ------------------------------------------------------------------ */
/* Sidebar                                                             */
/* ------------------------------------------------------------------ */
.sidebar {
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 90;
  transition: transform 0.25s ease, width 0.22s ease;
}

.sidebar-nav {
  list-style: none;
  padding: 8px 0;
}

/* ── 侧边栏折叠 toggle 按钮 (桌面) ── */
.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition);
}
.sidebar-toggle:hover { color: var(--text-secondary); }
.sidebar-toggle-ico {
  width: 15px; height: 15px;
  stroke: currentColor; stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.22s ease;
}
.sidebar.mini .sidebar-toggle-ico { transform: rotate(180deg); }

/* ── 域标签 (研究域/模拟域/实盘域, 非交互固定分区) ── */
.nav-domain-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  font-weight: 500;
  text-transform: uppercase;
  padding: 13px 16px 6px;
  color: var(--text-muted);
}
.nav-domain-label .nd-tag { display: none; }
/* domain 色点 (圆点) */
.nd-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-muted); flex: none;
}
.dom-r-dot { background: var(--blue); }
.dom-s-dot { background: var(--green); }
.dom-l-dot { background: var(--yellow); }

/* ── 前台扁平分组标题 (小字阶 muted, 对齐域标签精致度; 替代旧 li 白粗体) ── */
.nav-section {
  list-style: none;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 14px 16px 5px;
  color: var(--text-muted);
}
.nav-section:first-child { padding-top: 6px; }

/* ── 可折叠分组 ── */
.nav-group-hd {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 9px 16px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.94rem;
  font-weight: 400;
  cursor: pointer;
  gap: 11px;
  transition: all var(--transition);
  user-select: none;
}
.nav-group-hd:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-group-hd.open { color: var(--text-primary); }

/* Domain 型分组头（模拟域/实盘域自带色点+更大字号） */
.nav-group-hd--domain {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 12px 14px 4px;
  letter-spacing: 0.08em;
  margin-top: 2px;
  color: var(--text-secondary);
}
.nav-group.dom-s .nd-dot { background: var(--green); }
.nav-group.dom-l .nd-dot { background: var(--yellow); }

/* Chevron */
.nav-chevron {
  width: 12px; height: 12px;
  stroke: currentColor; stroke-width: 2.2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  margin-left: auto; flex-shrink: 0; opacity: 0.5;
  transition: transform 0.2s ease;
}
.nav-group-hd.open .nav-chevron { transform: rotate(180deg); opacity: 0.7; }

/* 分组内容体（可折叠） */
.nav-group-body {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.22s ease;
}
.nav-group-body.open { max-height: 400px; }
.nav-gate {
  margin: 9px 12px 3px;
  padding: 1px;
  border-top: 1px dashed var(--border);
}
.nav-gate-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 16px 9px 14px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.94rem;
  border-left: 2px solid transparent;
  transition: all var(--transition);
}
.nav-gate-item:hover { background: var(--bg-hover, rgba(255,255,255,0.04)); color: var(--text-primary); }
.nav-gate-item.active { background: rgba(88,166,255,0.08); color: var(--text-link); border-left-color: var(--blue); }
.nav-gate-item .ng-sub {
  font-size: 0.66rem; color: var(--amber, #caa24e); margin-left: auto;
  border: 1px solid rgba(202,162,78,0.4); border-radius: 4px; padding: 1px 7px; letter-spacing: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 16px;
  color: var(--text-secondary);
  border-radius: 0;
  font-size: 0.94rem;
  transition: all var(--transition);
  border-left: 2px solid transparent;
}

.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  text-decoration: none;
}

.nav-item.active {
  background: rgba(88, 166, 255, 0.08);
  color: var(--text-link);
  border-left-color: var(--blue);
}
/* 域上色选中态 (模拟绿 / 实盘黄) — 与固定分区色点呼应 */
.nav-item.dom-s.active { background: rgba(70,184,127,0.10); color: var(--text-primary); border-left-color: var(--green); }
.nav-item.dom-l.active { background: rgba(220,166,58,0.10); color: var(--text-primary); border-left-color: var(--yellow); }
.nav-item.dom-s.active .nav-ico { color: var(--green); opacity: 1; }
.nav-item.dom-l.active .nav-ico { color: var(--yellow); opacity: 1; }

.nav-item.sub { padding-left: 40px; }  /* 缩进区分层级; 字号与 .nav-item 统一(0.94rem) */

.nav-icon { font-size: 1rem; width: 18px; text-align: center; }
.nav-ico {
  width: 18px; height: 18px; flex-shrink: 0;
  stroke: currentColor; stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.78;
}
.nav-item.active .nav-ico { opacity: 1; }

/* ════ 统一行内图标 (按钮/标签内, 单色描边, 跟随 currentColor) ════ */
.ico {
  width: 1em; height: 1em; flex-shrink: 0;
  stroke: currentColor; stroke-width: 1.9; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.14em;
}
.ico-sm { width: 0.85em; height: 0.85em; vertical-align: -0.1em; }

/* 分区分隔细线 */
.nav-divider { height: 1px; background: var(--border-light, rgba(255,255,255,0.06)); margin: 9px 16px; list-style: none; }

.nav-bottom { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 6px; }

/* ── 桌面 Mini 模式 (图标宽 54px) ── */
.sidebar.mini { width: 54px; }
.sidebar.mini .nav-label,
.sidebar.mini .nd-tag,
.sidebar.mini .ng-sub,
.sidebar.mini .nav-section-lbl { display: none; }
.sidebar.mini .nav-domain-label { justify-content: center; padding: 10px 0 4px; }
.sidebar.mini .nav-domain-label .nd-tag { display: none; }
/* Mini 折叠态: 隐藏分组头(其图标与子项重复, 多余) → 只留子项图标; 分组靠分隔线+域色点区分 */
.sidebar.mini .nav-group-hd { display: none; }
.sidebar.mini .nav-divider { margin: 6px 14px; }
/* Mini 模式展开所有分组（无标签无需手动折叠） */
.sidebar.mini .nav-group-body { max-height: 400px; overflow: visible; }
.sidebar.mini .nav-item,
.sidebar.mini .nav-gate-item {
  padding: 8px 0;
  justify-content: center;
  gap: 0;
  border-left-color: transparent !important;
}
.sidebar.mini .nav-item.active {
  background: rgba(88, 166, 255, 0.1);
  border-left-color: var(--blue) !important;
}
.sidebar.mini .nav-item.sub { padding-left: 0; }
.sidebar.mini .nav-gate { margin: 6px 6px 2px; padding: 1px; }
.sidebar.mini .nav-gate-item { justify-content: center; gap: 0; padding: 8px 0; }
.sidebar.mini .nav-ico { opacity: 0.75; }
.sidebar.mini .nav-item.active .nav-ico { opacity: 1; }
/* Mini 内容区补偿 */
.sidebar.mini ~ .admin-container { margin-left: 54px; transition: margin-left 0.22s ease; }
.admin-container { transition: margin-left 0.22s ease; }

/* ------------------------------------------------------------------ */
/* Mobile hamburger button                                             */
/* ------------------------------------------------------------------ */
.hamburger-btn {
  display: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1.2rem;
  align-items: center;
  justify-content: center;
  z-index: 110;
}

/* Sidebar overlay for mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 85;
}

/* ------------------------------------------------------------------ */
/* Main Content                                                        */
/* ------------------------------------------------------------------ */
.main-content {
  margin-left: var(--sidebar-width);
  margin-top: var(--topbar-height);
  padding: 24px;
  min-height: calc(100vh - var(--topbar-height));
}

.page-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
}

.page-subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */
.site-footer {
  margin-top: 40px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.78rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.site-footer .footer-separator { margin-left: 16px; }

.footer-links {
  display: flex;
  gap: 16px;
}

.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
}
.footer-links a:hover { color: var(--text-link); }

/* ------------------------------------------------------------------ */
/* Metric Cards Grid                                                   */
/* ------------------------------------------------------------------ */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.metric-card .metric-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.metric-card .metric-value {
  font-size: 1.6rem;
  font-weight: 700;
  font-family: var(--font-mono);
}

.metric-card .metric-change {
  font-size: 0.82rem;
  margin-top: 4px;
}

.metric-change.up { color: var(--green-bright); }
.metric-change.down { color: var(--red-bright); }
.metric-change.neutral { color: var(--text-secondary); }

.metric-card .metric-ts {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-top: 6px;
}

/* ------------------------------------------------------------------ */
/* Panel / Card                                                        */
/* ------------------------------------------------------------------ */
.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 20px;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.95rem;
  gap: 8px;
  min-width: 0;
}

.panel-header > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.param-stage-panel {
  overflow: hidden;
  min-width: 0;
}

/* ── 参数卡片 grid (替代内联 style) ── */
.param-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.param-grid-fixed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

/* 可调卡: 中性卡 + 绿色左 accent 条 (替代整圈绿框, 去噪更精致) */
.param-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.param-card:hover {
  border-color: var(--green);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .10);
}

.param-card > label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 7px;
}

.param-card > label code,
.param-card .pc-key {
  font-size: 0.66rem;
  color: var(--text-link);
  background: var(--bg-tertiary);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 5px;
}

/* ── 输入控件: 统一外观 + focus 高亮环 ── */
.param-input {
  width: 100%;
  padding: 7px 10px;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  box-sizing: border-box;
  max-width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.param-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-bg);
}

.param-card input,
.param-card select,
.param-card textarea {
  max-width: 100%;
  box-sizing: border-box;
}

.param-card code {
  word-break: break-all;
  overflow-wrap: anywhere;
}

.param-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 7px;
  line-height: 1.55;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* 固定卡: 中性虚线、淡化 (一眼区分"不可改") */
.param-card-fixed {
  background: var(--bg-tertiary);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
}

.param-card-fixed .pc-flabel {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.param-card-fixed .pc-val {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

/* 段落胶囊标签 (可调 / 固定) */
.param-section-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 3px 11px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.param-section-tag.is-editable { color: var(--green-bright); background: var(--green-bg); }
.param-section-tag.is-fixed { color: var(--text-muted); background: var(--bg-tertiary); border: 1px solid var(--border-light); }

/* 阶段面板头部: 可点 hover 反馈 */
.param-stage-panel > .panel-header { cursor: pointer; transition: background .15s ease; }
.param-stage-panel > .panel-header:hover { background: var(--bg-tertiary); }

/* ── I/O 底部信息条 ── */
.param-io-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 0.78rem;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 6px;
  word-break: break-word;
  overflow-wrap: break-word;
  min-width: 0;
}

.panel-body { padding: 18px; overflow: hidden; min-width: 0; }

/* ------------------------------------------------------------------ */
/* Tables                                                              */
/* ------------------------------------------------------------------ */
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.data-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

.data-table th {
  text-align: left;
  padding: 10px 14px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table th.num { text-align: right; }

.data-table td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-light);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-align: left;
}

.data-table td.num {
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.data-table td.ctr { text-align: center; }

.data-table tbody tr:hover { background: var(--bg-hover); }

.sortable-header {
  cursor: pointer;
  user-select: none;
}
.sortable-header:hover { color: var(--text-link); }
.sortable-header::after {
  content: ' ↕';
  opacity: 0.3;
  font-size: 0.7rem;
}
.sortable-header.sort-asc::after { content: ' ▲'; font-size: 0.65rem; opacity: 0.7; }
.sortable-header.sort-desc::after { content: ' ▼'; font-size: 0.65rem; opacity: 0.7; }

.price-up, .change-up { color: var(--green-bright) !important; }
.price-down, .change-down { color: var(--red-bright) !important; }
.text-up { color: var(--green-bright); }
.text-down { color: var(--red-bright); }

/* ------------------------------------------------------------------ */
/* Chart Container                                                     */
/* ------------------------------------------------------------------ */
.chart-container {
  width: 100%;
  min-height: 400px;
  position: relative;
}

/* ------------------------------------------------------------------ */
/* Buttons & Controls                                                  */
/* ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-sans);
}

.btn:hover { background: var(--bg-hover); border-color: var(--text-muted); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: 4px 10px; font-size: 0.78rem; }
/* 填充按钮 (主操作): 用 brightness 做 hover, 自适应主题 */
.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-success { background: var(--green); border-color: var(--green); color: #fff; }
.btn-danger-solid { background: var(--red); border-color: var(--red); color: #fff; }
.btn-warning { background: var(--yellow); border-color: var(--yellow); color: #2a2400; }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--text-muted); }

/* ════ 统一按钮基线 (设计标准) ════ */
/* 各页历史上各自定义按钮(pt-/pc-/tm-/lv-/a-/sl-/seg-), 圆角/字体/字重不一 → 视觉割裂。
   此层把它们的【形态】收敛到规范(同圆角/同字体/同字重/同过渡), 保留各自语义底色。
   仅统一外观, 不动模板结构; padding 由各页保留以适配密度。*/
.pt-btn, .pc-btn, .pc-btn-o, .tm-btn, .lv-btn, .abtn, .sl-mode-btn,
.seg-btn, .pt-preset, .pt-combo-btn {
  border-radius: var(--radius) !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  transition: all var(--transition) !important;
}
.btn-primary:hover, .btn-success:hover, .btn-danger-solid:hover { filter: brightness(1.12); }
/* 明亮模式: 实心按钮 hover 改为压暗 —— brightness>1 在中深色上会发白/washed-out, 不符合亮色 UI 惯例 */
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .btn-success:hover,
[data-theme="light"] .btn-danger-solid:hover,
[data-theme="light"] .btn-save-all:hover,
[data-theme="light"] .btn-save-stage:hover { filter: brightness(0.92); }
/* 描边按钮 (次操作) */
.btn-danger { border-color: var(--red); color: var(--red-bright); background: transparent; }
.btn-danger:hover { background: var(--red-bg); border-color: var(--red); }
.btn-warning { border-color: var(--yellow); color: var(--yellow); background: transparent; }
.btn-warning:hover { background: var(--yellow-bg); }

/* ── 保存按钮 (参数调整页) ── */
.btn-save-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 36px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--green) 0%, #2ea043 100%);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(46, 160, 67, 0.25);
  transition: all 0.25s ease;
  font-family: var(--font-sans);
}
.btn-save-all:hover {
  background: linear-gradient(135deg, #2ea043 0%, #238636 100%);
  box-shadow: 0 4px 16px rgba(46, 160, 67, 0.4);
  transform: translateY(-1px);
}
.btn-save-all:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(46, 160, 67, 0.2);
}
.btn-save-all:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: grayscale(30%);
}

.btn-save-stage {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #fff;
  background: var(--blue);
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-sans);
}
.btn-save-stage:hover {
  background: #4A9BFF;
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 2px 8px rgba(47, 111, 196, 0.35);
}
.btn-save-stage:active { transform: scale(0.97); }
.btn-save-stage:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 保存按钮加载动画 */
@keyframes btn-save-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.btn-saving { animation: btn-save-pulse 1s ease-in-out infinite; }

.btn-group { display: flex; gap: 6px; align-items: center; }

select.btn, input.btn {
  font-family: var(--font-sans);
  appearance: none;
}

/* ------------------------------------------------------------------ */
/* Kline interval button group                                          */
/* ------------------------------------------------------------------ */
.kline-group-btn {
  padding: 5px 14px;
  font-size: 0.82rem;
  border-radius: 0;
}
.kline-group-btn:first-of-type { border-radius: 4px 0 0 4px; }
.kline-group-btn:last-of-type { border-radius: 0 4px 4px 0; }
.kline-group-btn + .kline-group-btn { margin-left: -1px; }

/* ------------------------------------------------------------------ */
/* Tabs                                                                */
/* ------------------------------------------------------------------ */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.tab-item {
  padding: 10px 20px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition);
}

.tab-item:hover { color: var(--text-primary); }
.tab-item.active {
  color: var(--text-link);
  border-bottom-color: var(--blue);
}

/* ------------------------------------------------------------------ */
/* Empty State                                                         */
/* ------------------------------------------------------------------ */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}

.empty-state .empty-icon { font-size: 2.5rem; margin-bottom: 12px; }

/* ------------------------------------------------------------------ */
/* Badges                                                              */
/* ------------------------------------------------------------------ */
.badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 1px 8px;
  border-radius: 10px;
  font-weight: 600;
}

.badge-green { background: var(--green-bg); color: var(--green-bright); }
.badge-red { background: var(--red-bg); color: var(--red-bright); }
.badge-yellow { background: var(--yellow-bg); color: var(--yellow); }
.badge-blue { background: var(--blue-bg); color: var(--blue); }
.badge-purple { background: var(--purple-bg); color: var(--purple); }
.badge-cyan { background: var(--cyan-bg); color: var(--cyan); }
.badge-orange { background: var(--orange-bg); color: var(--orange); }
.badge-gray { background: var(--bg-elevated, rgba(128,128,128,.12)); color: var(--text-muted, #9aa0a6); }

/* 策略"通过测试"徽标 (前台脱敏: 只显示已通过的, 绿色) */
.strat-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.strat-badge { font-size: 0.62rem; font-weight: 600; color: var(--green-bright); background: var(--green-bg); border-radius: 3px; padding: 1px 6px; white-space: nowrap; }

/* ---- data_overview column-detail ---- */
.column-detail { background: var(--bg-card); border-top: 1px solid var(--border-light); }
.column-detail table { margin: 0; border: none; }
.column-detail table th {
  font-size: 0.78rem; color: var(--text-muted); font-weight: 600;
  white-space: nowrap;
}
.column-detail table td { font-size: 0.78rem; padding: 4px 10px; vertical-align: top; white-space: nowrap; }
.column-detail table.data-table th { padding: 6px 10px; }
.column-detail .column-meta-table { width: 100%; }
.column-detail .column-meta-table th,
.column-detail .column-meta-table td {
  border: none; border-bottom: 1px solid var(--border-light); padding: 6px 10px;
}
.column-detail .column-meta-table th { border-bottom: 2px solid var(--border-light); }
.column-detail .column-meta-table tbody tr:last-child td { border-bottom: none; }
.column-detail .column-meta-table th .text-xs { font-weight: 400; }
.table-group-row td { vertical-align: middle; }
.toggle-columns { white-space: nowrap; cursor: pointer; }
.text-xs { font-size: 0.7rem; }
.column-detail-row > td { border-top: none; }

/* Horizontal scroll wrappers for wide tables */
.table-scroll,
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
/* Tables inside scroll wrappers expand to content width */
.table-scroll .data-table,
.table-wrap .data-table {
  width: auto;
  min-width: 100%;
}

/* paginated-table row highlight */
.paginated-table .table-group-row:hover { background: var(--bg-hover); }

/* ------------------------------------------------------------------ */
/* Article Feed                                                        */
/* ------------------------------------------------------------------ */
.article-list { list-style: none; }

.article-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.article-item:last-child { border-bottom: none; }

.article-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 80px;
}

.article-title-link {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.article-excerpt {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ------------------------------------------------------------------ */
/* Grid layouts                                                        */
/* ------------------------------------------------------------------ */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* ------------------------------------------------------------------ */
/* Admin-specific                                                      */
/* ------------------------------------------------------------------ */
.admin-container {
  margin-left: var(--sidebar-width);
  margin-top: var(--topbar-height);
  padding: 24px;
  min-height: calc(100vh - var(--topbar-height));
  min-width: 0;
  overflow-x: hidden;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
}

.admin-title { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); }

.admin-messages { margin-bottom: 16px; }

.admin-msg {
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.admin-msg.success { background: var(--green-bg); color: var(--green-bright); border: 1px solid var(--green); }
.admin-msg.error { background: var(--red-bg); color: var(--red-bright); border: 1px solid var(--red); }
.admin-msg.info { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue); }

.progress-bar-outer { background: var(--bg-tertiary); border-radius: 4px; height: 14px; overflow: hidden; margin: 6px 0; }
.progress-bar-inner { height: 100%; border-radius: 4px; transition: width 0.3s ease; }

.summary-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 8px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.summary-stat .stat-num { font-size: 1.4rem; font-weight: 700; font-family: var(--font-mono); }
.summary-stat .stat-unit { font-size: 0.75rem; color: var(--text-muted); }

/* ------------------------------------------------------------------ */
/* Form styles                                                         */
/* ------------------------------------------------------------------ */
.form-group { margin-bottom: 16px; }

.form-group label {
  display: block;
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
  font-weight: 600;
}

.form-control {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: var(--font-mono);
}
.form-control:focus { outline: none; border-color: var(--blue); }

textarea.form-control { min-height: 200px; font-family: var(--font-sans); line-height: 1.6; }

.form-control-sm { max-width: 400px; }

/* Inline checkbox label */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Inline form */
.form-inline {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.form-inline .form-group { margin-bottom: 0; }

.action-bar {
  margin-top: 20px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------ */
/* Login page                                                          */
/* ------------------------------------------------------------------ */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: radial-gradient(ellipse at 50% 30%, var(--bg-secondary) 0%, var(--bg-primary) 70%);
}

.login-wrapper { width: 100%; max-width: 400px; padding: 0 20px; }

.login-header { text-align: center; margin-bottom: 28px; }

.login-logo {
  font-size: 1.6rem;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.login-badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 2px 10px;
  border-radius: 10px;
  background: rgba(88, 166, 255, 0.12);
  color: var(--blue);
  margin-top: 6px;
  border: 1px solid rgba(88, 166, 255, 0.2);
}

.login-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 24px;
}

.login-card label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.login-input {
  display: block;
  width: 100%;
  padding: 11px 14px;
  margin-bottom: 18px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: var(--font-mono);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.login-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15); }

.login-btn {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 4px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.15s, transform 0.1s;
}
.login-btn:hover { background: #4A9BFF; }
.login-btn:active { transform: scale(0.98); }

.login-msg {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.84rem;
  margin-bottom: 18px;
  line-height: 1.4;
}
.login-msg.error { background: rgba(248, 81, 73, 0.12); color: var(--red-bright); border: 1px solid rgba(248, 81, 73, 0.3); }
.login-msg.success { background: rgba(46, 160, 67, 0.12); color: var(--green-bright); border: 1px solid rgba(46, 160, 67, 0.3); }

.login-footer { text-align: center; margin-top: 20px; }
.login-footer a { font-size: 0.82rem; color: var(--text-muted); text-decoration: none; transition: color 0.15s; }
.login-footer a:hover { color: var(--text-link); }

/* ------------------------------------------------------------------ */
/* Utility classes                                                     */
/* ------------------------------------------------------------------ */
.font-mono { font-family: var(--font-mono); }

.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }

.flex-wrap { display: flex; flex-wrap: wrap; }
.flex-gap-8 { display: flex; gap: 8px; flex-wrap: wrap; }
.flex-gap-12 { display: flex; gap: 12px; flex-wrap: wrap; }
.flex-gap-16 { display: flex; gap: 16px; flex-wrap: wrap; }

.text-sm { font-size: 0.78rem; }
.text-muted { color: var(--text-muted); }

.inline-form { display: inline; }

.interval-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.price-display {
  font-size: 1.4rem;
  font-weight: 700;
  font-family: var(--font-mono);
  margin-left: 16px;
}

.change-display {
  font-weight: 600;
  font-size: 0.95rem;
}

/* ------------------------------------------------------------------ */
/* 页头 / 说明框 / 术语注释 (P8 复用组件)                                */
/* ------------------------------------------------------------------ */
.page-head { display:flex; align-items:flex-start; gap:13px; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.page-head .ph-ico { width:26px; height:26px; flex-shrink:0; margin-top:2px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; color:var(--text-link); }
.page-head .ph-text { flex:1; min-width:0; }
.page-head .ph-title { font-size:1.3rem; font-weight:500; color:var(--text-primary); line-height:1.2; }
.page-head .ph-desc { font-size:0.82rem; color:var(--text-muted); margin-top:4px; line-height:1.5; }
.page-head .ph-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* 说明框: 段落级注释 (蓝=信息, 黄=注意) */
.info-box { display:flex; gap:10px; align-items:flex-start; border-radius:8px; padding:11px 14px; font-size:0.82rem; line-height:1.6; margin-bottom:16px; }
.info-box .ib-ico { flex-shrink:0; width:16px; height:16px; margin-top:2px; }
.info-box.info { background:var(--blue-bg); border:1px solid transparent; color:var(--text-secondary); }
.info-box.info .ib-ico { color:var(--text-link); }
.info-box.warn { background:var(--yellow-bg); border:1px solid transparent; color:var(--text-secondary); }
.info-box.warn .ib-ico { color:var(--yellow); }
.info-box strong { color:var(--text-primary); font-weight:500; }
.info-box code { background:var(--bg-tertiary); border-radius:3px; padding:0 5px; font-family:var(--font-mono); font-size:0.92em; }

/* 术语注释: 虚线下划线 + 原生 tooltip (title), 不受 panel overflow 裁剪 */
.term { border-bottom:1px dotted var(--text-muted); cursor:help; }
.help { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; border:1px solid var(--text-muted); color:var(--text-muted); font-size:0.6rem; font-weight:600; cursor:help; vertical-align:1px; margin-left:3px; line-height:1; }
.help:hover { border-color:var(--text-link); color:var(--text-link); }

/* ------------------------------------------------------------------ */
/* 卡片化布局组件 (全站复用)                                            */
/* ------------------------------------------------------------------ */
/* 分区小标题: 一组卡片上方的轻量分隔标签 */
.section-label { font-size:0.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; margin:0 0 9px; display:flex; align-items:center; gap:7px; }
.section-label .sl-hint { text-transform:none; letter-spacing:0; color:var(--text-link); font-size:0.74rem; }

/* 状态徽标行 (网络/服务健康) */
.status-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.status-chips .chip { font-size:0.76rem; border-radius:20px; padding:4px 12px; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); color:var(--text-secondary); text-decoration:none; }
.status-chips .chip-dot { width:7px; height:7px; border-radius:50%; background:var(--text-muted); flex-shrink:0; }
.status-chips .chip-ok { background:var(--green-bg); color:var(--green-bright); border-color:transparent; }
.status-chips .chip-ok .chip-dot { background:var(--green-bright); }
.status-chips .chip-bad { background:var(--red-bg); color:var(--red-bright); border-color:transparent; }
.status-chips .chip-bad .chip-dot { background:var(--red-bright); }
a.chip:hover { filter:brightness(1.1); }

/* 指标卡内嵌图标 (metric-label 前缀) */
.metric-card .metric-label .ml-ico { width:13px; height:13px; vertical-align:-2px; margin-right:5px; stroke:currentColor; stroke-width:1.8; fill:none; }

/* 快捷入口磁贴 */
.qa-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px; }
.qa-tile { display:block; background:var(--bg-secondary); border:1px solid var(--border); border-radius:8px; padding:12px 14px; transition:border-color 0.15s, background 0.15s; }
.qa-tile:hover { border-color:var(--blue); text-decoration:none; background:var(--blue-bg); }
.qa-tile .qa-name { font-size:0.9rem; color:var(--text-primary); font-weight:500; display:flex; align-items:center; gap:7px; }
.qa-tile .qa-name .qa-ico { width:16px; height:16px; stroke:currentColor; stroke-width:1.7; fill:none; opacity:0.85; }
.qa-tile .qa-sub { font-size:0.74rem; color:var(--text-muted); margin-top:4px; }

/* ------------------------------------------------------------------ */
/* Responsive — tablets (≤1024px)                                      */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .grid-2 { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* ------------------------------------------------------------------ */
/* Responsive — mobile (≤768px)                                        */
/* ------------------------------------------------------------------ */
@media (max-width: 768px) {
  html { font-size: 15px; }

  /* ── Topbar ── */
  .topbar {
    height: 48px;
    padding: 6px 12px;
    flex-wrap: nowrap;
    gap: 8px;
    overflow: hidden;
  }

  .topbar-logo { font-size: 1.1rem; }

  .topbar-left { gap: 8px; flex-wrap: nowrap; }

  .topbar-ticker {
    gap: 6px;
    font-size: 0.72rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: calc(100vw - 140px);
    scroll-snap-type: x mandatory;
    white-space: nowrap;
    flex-shrink: 1;
    flex: 1 1 auto;
  }
  .topbar-ticker::-webkit-scrollbar { display: none; }
  .ticker-item {
    flex-shrink: 0;
  }

  .ticker-label { display: none; }
  .ticker-ts { display: none; }
  .ticker-item span.ticker-unit { display: none; }

  /* 移动端收敛 topbar 右侧: 隐藏主题切换(跟随系统), 仅留刷新, 防溢出 */
  .theme-switch { display: none; }
  .topbar-actions { gap: 4px; }

  /* ── Hamburger ── */
  .hamburger-btn { display: flex; }

  /* ── Sidebar ── */
  .sidebar {
    transform: translateX(-100%);
    top: var(--topbar-height);
    z-index: 95;
    height: calc(100vh - var(--topbar-height));
    box-shadow: 2px 0 12px rgba(0,0,0,0.3);
    overflow-y: auto;
  }
  .sidebar.open { transform: translateX(0); }

  .sidebar-overlay.active { display: block; }

  /* ── Main content ── */
  .main-content {
    margin-left: 0;
    margin-top: var(--topbar-height);
    padding: 12px;
  }

  /* ── Admin ── */
  .admin-container {
    margin-left: 0;
    margin-top: var(--topbar-height);
    padding: 16px;
    overflow-x: hidden;
  }

  /* ── 全局移动端兜底 (覆盖所有后台页, 防溢出/比例失调) ── */
  .admin-container img,
  .admin-container video,
  .admin-container iframe { max-width: 100%; height: auto; }
  .admin-container canvas,
  .admin-container svg:not(.nav-ico):not(.nav-chevron) { max-width: 100%; }
  .admin-container pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* 内联固定 min-width 的 flex 子项在窄屏放开, 防把整行撑破 (网格 minmax 不含 'min-width' 字串, 不受影响) */
  .admin-container [style*="min-width"] { min-width: 0 !important; }
  /* 卡片/面板/容器满宽不外溢 */
  .panel, .card, .hy-card, .pt-card { max-width: 100%; }

  .admin-header { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* ── Page header ── */
  .page-title { font-size: 1.4rem; }

  /* ── Panels ── */
  .panel-header { padding: 10px 14px; font-size: 0.88rem; }
  .panel-body { padding: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* 表格移动端横向滚动: 默认让表自身成可横滚块, 防撑破屏幕 (修 数据仓库/文章/对账等后台表) */
  .data-table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; max-width: 100%;
  }
  /* 有滚动容器的表: 由容器负责横滚, 表恢复正常 table 布局 + min-width 撑开 */
  .panel-body .data-table,
  .table-wrap .data-table,
  .table-scroll .data-table { display: table; white-space: normal; min-width: max-content; width: 100%; }
  /* 模拟交易页 pt-tbl(风控/事件/持仓/成交/对账): 列多, 移动端横向滚动防溢出 */
  .pt-tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; max-width: 100%; }
  .pt-row { flex-direction: column; }
  .pt-col { min-width: 0 !important; width: 100%; }
  /* 实时盘口深度表: 固定 3 列紧凑布局, 不走通用 pt-tbl 横滚 (display:block+nowrap 会破坏深度渐变条/列对齐) —— 保持正常 table 满宽, 数字过长截断不换行 */
  .pt-depth-tbl { display: table; table-layout: fixed; width: 100%; overflow: visible; }
  .pt-depth-tbl th, .pt-depth-tbl td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* 盘口 wrapper 在窄屏占满整行 (桌面 290px 固定基在 <290 容器会溢出) */
  .pt-depth-wrap { flex-basis: 100% !important; max-width: 100%; }

  /* ── Metric cards ── */
  .metric-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
  }

  .metric-card { padding: 12px; }
  .metric-card .metric-value { font-size: 1.2rem; }

  /* ── Tables: scrollable ── */
  .data-table { font-size: 0.8rem; }
  .data-table th,
  .data-table td {
    padding: 6px 8px;
    font-size: 0.75rem;
  }

  /* Wrapper to allow horizontal scroll on tables */
  .table-scroll,
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* ── Grid ── */
  .grid-2 { grid-template-columns: 1fr; gap: 12px; }

  /* ── Summary stats ── */
  .summary-stat { padding: 6px 12px; }
  .summary-stat .stat-num { font-size: 1.1rem; }

  /* ── Article feed ── */
  .article-item { flex-direction: column; gap: 4px; padding: 12px 0; }
  .article-meta { min-width: unset; }

  /* ── Charts ── */
  .chart-container { min-height: 350px; }

  /* ── Kline page mobile optimizations ── */
  .page-title { font-size: 1.1rem !important; }

  #kline-info-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  #kline-info-close {
    font-size: 1.3rem !important;
  }

  #kline-info-chg {
    font-size: 0.7rem !important;
    margin-left: 4px;
  }

  #kline-info-time {
    font-size: 0.6rem !important;
  }

  #kline-info-ohlc {
    width: 100%;
    gap: 6px !important;
    font-size: 0.66rem !important;
  }

  #kline-info-ohlc div {
    font-size: 0.6rem !important;
    white-space: nowrap;
  }

  #kline-info-ohlc span {
    font-size: 0.62rem !important;
  }

  /* ── Interval row: compact on mobile ── */
  .interval-row {
    flex-wrap: wrap;
    gap: 6px;
  }

  .interval-row .btn-group {
    flex-wrap: wrap;
  }

  .kline-group-btn {
    padding: 4px 8px;
    font-size: 0.68rem;
  }

  /* ── Table: compact on mobile ── */
  .data-table th,
  .data-table td {
    padding: 4px 6px;
    font-size: 0.65rem;
  }

  .table-scroll {
    -webkit-overflow-scrolling: touch;
  }

  /* ── Login ── */
  .login-wrapper { padding: 0 12px; }
  .login-card { padding: 20px 16px; }

  /* ── Footer ── */
  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* ── Interval row ── */
  .interval-row { gap: 8px; }
  .price-display { margin-left: 0; font-size: 1.2rem; }

  /* ── Form ── */
  .form-inline { flex-direction: column; align-items: stretch; }
  .form-control-sm { max-width: 100%; }

  /* ── Action bar ── */
  .action-bar { flex-direction: column; }

  /* ── Button group wrap ── */
  .btn-group {
    flex-wrap: wrap;
  }

  /* ── Panel overflow ── */
  .panel-body {
    overflow-x: auto;
    word-break: break-word;
    overflow-wrap: break-word;
    min-width: 0;
  }

  .param-stage-panel {
    overflow: hidden;
    min-width: 0;
  }

  .param-card {
    min-width: 0;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* ── 参数 grid: 手机端单列布局 ── */
  .param-grid,
  .param-grid-fixed,
  .param-io-footer {
    grid-template-columns: 1fr !important;
    min-width: 0;
  }

  .param-io-footer > * {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── Data overview: force column detail overflow scroll ── */
  .column-detail-row td {
    padding: 0 !important;
  }

  .column-detail {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px;
  }

  .column-detail .column-meta-table {
    min-width: 600px;
  }

  .column-detail .column-meta-table th,
  .column-detail .column-meta-table td {
    font-size: 0.68rem;
    padding: 4px 6px;
    white-space: nowrap;
  }

  .toggle-columns {
    font-size: 0.7rem;
    padding: 3px 8px;
  }

  /* ── Table overview: reduce padding ── */
  .data-table#table-overview th,
  .data-table#table-overview td {
    padding: 6px 6px;
    font-size: 0.72rem;
  }

  .data-table#table-overview .badge {
    font-size: 0.65rem;
    padding: 1px 6px;
  }

}

/* ── Admin: Data quality & action buttons ── */
.action-btn-group { display:flex; gap:4px; flex-wrap:wrap; }
.action-btn-group .btn { font-size: 0.7rem; padding: 2px 8px; }
.pct-bar { display: inline-flex; align-items: center; gap: 4px; }
.pct-bar .pct-fill { height: 6px; border-radius: 3px; min-width: 20px; max-width: 80px; }

.quality-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 4px; font-size: 0.7rem; font-weight: 600;
}
.quality-badge.ok { background: var(--green-bg); color: var(--green-bright); }
.quality-badge.warn { background: var(--yellow-bg); color: var(--yellow); }
.quality-badge.error { background: var(--red-bg); color: var(--red); }

.log-viewer pre { margin:0; white-space:pre-wrap; font-family:var(--font-mono); font-size:0.72rem; line-height:1.6; }
.log-line-error { color: var(--red); }
.log-viewer { max-height:300px; overflow-y:auto; }

/* ─── 统一弹窗 modal (设计系统; 全站复用 hyModal/hyConfirm, 替代原生 alert/confirm) ─── */
.hy-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(2px);
  z-index:9998; display:none; align-items:center; justify-content:center; padding:20px; }
.hy-modal-overlay.open { display:flex; }
.hy-modal { background:var(--bg-card); border:1px solid var(--border); border-radius:12px;
  max-width:min(560px,94vw); width:100%; max-height:88vh; overflow:auto;
  box-shadow:0 16px 48px rgba(0,0,0,0.5); animation:hyModalIn 0.15s ease; }
@keyframes hyModalIn { from{opacity:0;transform:translateY(8px) scale(0.98);} to{opacity:1;transform:none;} }
.hy-modal-head { display:flex; align-items:center; gap:8px; padding:14px 18px;
  border-bottom:1px solid var(--border); font-size:0.95rem; font-weight:600; color:var(--text-primary); }
.hy-modal-x { margin-left:auto; cursor:pointer; color:var(--text-muted); font-size:1.3rem;
  line-height:1; background:none; border:none; padding:0 2px; }
.hy-modal-x:hover { color:var(--text-primary); }
.hy-modal-body { padding:16px 18px; font-size:0.84rem; color:var(--text-secondary); line-height:1.6; }
.hy-modal-foot { display:flex; justify-content:flex-end; gap:8px; padding:12px 18px; border-top:1px solid var(--border); }
.hy-mbtn { border-radius:7px; padding:7px 16px; font-size:0.82rem; font-weight:600; cursor:pointer;
  border:1px solid var(--border); background:transparent; color:var(--text-secondary); }
.hy-mbtn:hover { background:var(--bg-hover, rgba(255,255,255,0.05)); color:var(--text-primary); }
.hy-mbtn-primary { background:var(--blue); border-color:var(--blue); color:#fff; }
.hy-mbtn-primary:hover { filter:brightness(1.1); }
.hy-mbtn-danger { background:var(--red-bg); border-color:var(--red); color:var(--red); }
.hy-mbtn-danger:hover { filter:brightness(1.15); }
/* modal 内 K-V 信息行 (查证据等结构化展示) */
.hy-kv { display:flex; justify-content:space-between; gap:14px; padding:7px 0;
  border-bottom:1px solid var(--border); font-size:0.82rem; }
.hy-kv:last-child { border-bottom:none; }
.hy-kv .k { color:var(--text-muted); white-space:nowrap; }
.hy-kv .v { color:var(--text-primary); font-family:var(--font-mono); text-align:right; word-break:break-all; }
/* 可复制指纹 chip (SHA/hash 人类友好展示: 带标签 + 点击复制) */
.hy-sha { display:inline-flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:0.72rem;
  background:var(--bg-primary); border:1px solid var(--border); border-radius:5px; padding:1px 7px;
  cursor:pointer; color:var(--text-secondary); transition:border-color 0.12s, color 0.12s; vertical-align:1px; }
.hy-sha:hover { border-color:var(--blue); color:var(--blue); }
.hy-sha .hy-sha-l { color:var(--text-muted); font-family:inherit; font-size:0.66rem; }

/* ─── 文章正文排版（prose）─── */
/* 全局 reset 把 margin/padding 归零，article-body 需要独立恢复排版默认值 */
.article-body { overflow:hidden; }
.article-body p  { margin-bottom:1.2em; line-height:1.75; }
.article-body h1,.article-body h2,.article-body h3,
.article-body h4,.article-body h5,.article-body h6 {
  margin-top:1.8em; margin-bottom:0.6em; line-height:1.3; font-weight:600;
}
.article-body ul,.article-body ol { margin:0.8em 0 0.8em 1.6em; }
.article-body li  { margin-bottom:0.4em; line-height:1.7; }
.article-body blockquote { margin:1em 0; padding:0.5em 1em;
  border-left:3px solid var(--border); color:var(--text-secondary); }
.article-body table { width:100%; border-collapse:collapse; margin:1em 0; font-size:0.9em; }
.article-body th,.article-body td { padding:8px 12px; border:1px solid var(--border); text-align:left; }
.article-body th { background:var(--bg-secondary,rgba(255,255,255,0.05)); font-weight:600; }
.article-body hr { border:none; border-top:1px solid var(--border); margin:1.5em 0; }
/* 图片与 figure 约束 */
.article-body img { max-width:100%; height:auto; display:block; box-sizing:border-box; }
.article-body figure { max-width:100%; margin:1.5em 0; overflow:hidden; text-align:center; }
.article-body figcaption { max-width:100%; font-size:0.82em; color:var(--text-muted); margin-top:6px; }

/* ─── 文章摘要框 ─── */
.article-excerpt-box {
  position: relative;
  margin-bottom: 2em;
  padding: 1em 1.2em 1em 1.4em;
  border-left: 3px solid var(--accent, #4a9eff);
  background: var(--bg-secondary, rgba(74,158,255,0.06));
  border-radius: 0 6px 6px 0;
}
.article-excerpt-label {
  display: inline-block;
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent, #4a9eff);
  margin-bottom: 0.5em;
}
.article-excerpt-box p {
  margin: 0;
  line-height: 1.75;
  color: var(--text-secondary, inherit);
  font-size: 0.95em;
}

/* ═══════════════ 交易面板组件层 (trade-panel) ═══════════════
   Binance 模拟盘 + 实盘共享。原 paper_trading.html 内联 <style>, 移入 hy.css
   供 demo/live 的 _trade_panel.html include 复用 (hy.css 唯一规范, 同 pc- 参数中心先例)。 */
.pt-kpi { background:var(--bg-secondary); border:1px solid var(--border); border-radius:8px; padding:14px 16px }
.pt-kpi .lbl { font-size:0.72rem; color:var(--text-muted); margin-bottom:6px }
.pt-kpi .val { font-size:1.5rem; font-weight:600; font-family:var(--font-mono); color:var(--text-link) }
.pt-kpi .sub { font-size:0.74rem; color:var(--text-secondary); margin-top:4px }
.pt-grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:12px 0 }
.pt-row { display:flex; gap:12px; flex-wrap:wrap } .pt-col { flex:1; min-width:300px }
.pt-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--bg-secondary); border:1px solid var(--border); border-radius:8px; padding:10px 14px }
.pt-dot { width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:5px }
.pt-on { background:var(--green); box-shadow:0 0 6px var(--green) } .pt-off { background:var(--text-muted) }
.pt-ctl { background:var(--bg-secondary); border:1px solid var(--border); border-radius:8px; padding:14px 16px; margin-bottom:12px }
.pt-ctl label { font-size:0.74rem; color:var(--text-muted); margin-right:6px }
.pt-ctl input,.pt-ctl select { background:var(--bg-primary); color:var(--text-link); border:1px solid var(--border); border-radius:4px; padding:4px 8px; font-size:0.8rem; font-family:var(--font-mono) }
.pt-btn { border:none; border-radius:5px; padding:6px 16px; font-size:0.82rem; cursor:pointer; font-weight:600 }
.pt-btn-go { background:var(--green); color:#04231c } .pt-btn-stop { background:var(--red); color:#fff }
.pt-btn-flat { background:var(--yellow); color:#2a2400 } .pt-btn-reset { background:var(--bg-hover); color:var(--text-secondary); border:1px solid var(--border) }
.pt-btn:disabled { opacity:0.4; cursor:not-allowed }
table.pt-tbl { width:100%; border-collapse:collapse; font-size:0.78rem; font-family:var(--font-mono) }
table.pt-tbl th { text-align:left; color:var(--text-muted); font-weight:600; padding:5px 8px; border-bottom:1px solid var(--border); font-size:0.72rem }
table.pt-tbl td { padding:5px 8px; border-bottom:1px solid var(--border-light); color:var(--text-secondary); overflow-wrap:break-word; word-break:break-word }
.pt-tbl-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100% }
.pt-tbl-scroll table.pt-tbl { display:table; min-width:max-content; word-break:normal; overflow-wrap:normal }
.pt-err-msg { max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:help }
.pt-panel { background:var(--bg-secondary); border:1px solid var(--border); border-radius:8px; padding:14px 16px; margin-bottom:12px }
.pt-panel h4 { margin:0 0 10px; font-size:0.86rem; color:var(--text-primary) }
.pos-long { color:var(--green) } .pos-short { color:var(--red) }
.ev-CRITICAL,.ev-ERROR { color:var(--red) } .ev-WARNING { color:var(--yellow) } .ev-INFO { color:var(--text-muted) }
.pt-mut { color:var(--text-muted); font-size:0.8rem }
.pt-exec-toggles { display:flex; gap:12px; flex-wrap:wrap; margin:0 0 10px }
.pt-exec-feat { flex:1; min-width:250px; padding:9px 12px; background:var(--bg-primary); border:1px solid var(--border); border-radius:6px }
.pt-exec-hd { display:flex; gap:8px; align-items:center }
.pt-exec-hd label { color:var(--text-primary); font-size:0.8rem; font-weight:600 }
.pt-exec-badge { margin-left:auto; font-size:0.7rem; font-weight:600; padding:2px 9px; border-radius:10px; white-space:nowrap }
.pt-exec-explain { color:var(--text-muted); font-size:0.71rem; margin-top:6px; line-height:1.55 }
.pt-rt-head { font-size:0.75rem; font-weight:600; color:var(--text-secondary); margin:12px 0 6px }
.pt-rt-head span { font-weight:400; color:var(--text-muted); font-size:0.68rem }
.pt-rt-brake { border-left:3px solid var(--yellow) } .pt-rt-throttle { border-left:3px solid var(--green) }
.pt-rt-row { display:flex; align-items:center; gap:7px; margin:8px 0 7px; flex-wrap:wrap }
.pt-num-input { width:58px; padding:3px 7px; font-size:0.84rem; font-weight:600; text-align:center; background:var(--bg-primary); border:1px solid var(--border); border-radius:5px; color:var(--text-primary) }
.pt-num-input:focus { border-color:var(--text-link); outline:none }
.pt-apply { padding:4px 15px; font-size:0.75rem; font-weight:600; background:var(--text-link); color:#fff; border:none; border-radius:5px; cursor:pointer }
.pt-apply:hover { filter:brightness(1.12) }
.pt-cur { background:var(--bg-hover); color:var(--text-secondary) }
.pt-tag { font-size:0.6rem; font-weight:700; padding:1px 6px; border-radius:8px; margin-left:5px }
.pt-tag-a { background:var(--yellow-bg); color:var(--yellow) } .pt-tag-b { background:var(--green-bg); color:var(--green) }
.pt-presets { display:inline-flex; gap:5px; flex-wrap:wrap }
.pt-preset { padding:2px 9px; font-size:0.7rem; border:1px solid var(--border); border-radius:11px; background:var(--bg-primary); color:var(--text-secondary); cursor:pointer }
.pt-preset:hover { border-color:var(--green); color:var(--green) }
.pt-preset-flat:hover { border-color:var(--red); color:var(--red) }
.pt-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px }
.pt-scard { background:var(--bg-primary); border:1.5px solid var(--border); border-radius:8px; padding:9px 12px; cursor:pointer }
.pt-scard:hover { border-color:var(--text-link) }
.pt-scard.sel { border-color:var(--green); box-shadow:0 0 0 1px var(--green); background:var(--green-bg) }
.pt-scard .nm { font-size:0.84rem; font-weight:600; color:var(--text-primary) } .pt-scard .ds { font-size:0.72rem; color:var(--text-muted); margin-top:3px }
.pt-scard .ck { float:right; color:var(--green); font-weight:700; display:none } .pt-scard.sel .ck { display:inline }
.pt-combo-btn { background:var(--bg-hover); border:1px solid var(--border); color:var(--text-secondary); border-radius:16px; padding:3px 13px; font-size:0.76rem; cursor:pointer; margin-right:6px }
.pt-combo-btn:hover { border-color:var(--green); color:var(--green) }
.pt-chip { display:inline-flex; align-items:center; gap:5px; background:var(--bg-primary); border:1px solid var(--border); border-radius:16px; padding:3px 11px; font-size:0.74rem }
.pt-prov { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; padding:7px 14px; background:var(--bg-secondary); border:1px solid var(--border); border-left:3px solid var(--blue); border-radius:8px }
.pt-prov-lbl { font-size:0.7rem; color:var(--text-muted); letter-spacing:.04em; font-weight:600 }
.pt-prov .pt-chip { cursor:help }
.pt-prov-link { font-size:0.74rem; color:var(--text-link); text-decoration:none; white-space:nowrap }
.pv-ok { border-color:var(--green); color:var(--green) }
.pv-warn { border-color:var(--yellow); color:var(--yellow) }
.pv-bad { border-color:var(--red); color:var(--red) }
.pv-info { border-color:var(--blue); color:var(--text-link) }
.pv-off { opacity:.6 }
.pt-tab { padding:4px 13px; font-size:0.77rem; cursor:pointer; border:1px solid var(--border); border-radius:5px; background:var(--bg-primary); color:var(--text-secondary) }
.pt-tab.active { background:var(--green-bg); color:var(--green); border-color:var(--green) }
.pt-pager button { background:var(--bg-primary); border:1px solid var(--border); color:var(--text-link); border-radius:4px; padding:3px 10px; cursor:pointer; font-size:0.78rem }
.pt-pager button:disabled { opacity:0.4 }
/* 主 tab (Binance Demo / 本地 Lab) */
.pt-maintabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin:6px 0 14px }
.pt-maintab { padding:8px 18px; font-size:0.9rem; font-weight:600; cursor:pointer; border:1px solid transparent; border-bottom:none; border-radius:7px 7px 0 0; color:var(--text-muted); background:transparent; margin-bottom:-1px }
.pt-maintab.active { color:var(--text-link); background:var(--bg-secondary); border-color:var(--border); border-bottom:1px solid var(--bg-secondary) }
.pt-maintab .badge { font-size:0.68rem; padding:1px 7px; border-radius:10px; background:var(--bg-hover); color:var(--text-secondary); margin-left:6px }
.lab-scard { display:inline-block; padding:6px 12px; margin:3px; font-size:0.78rem; cursor:pointer; border:1px solid var(--border); border-radius:6px; background:var(--bg-primary); color:var(--text-secondary) }
.lab-scard.sel { background:var(--green-bg); color:var(--green); border-color:var(--green) }
.pt-depth-tbl td,.pt-depth-tbl th { height:19px; line-height:19px; padding:0 5px!important; border:none!important; box-sizing:border-box }
.pt-depth-tbl tr { height:19px }
/* 交易面板移动端适配 (≤680px) */
@media (max-width:680px) {
  .pt-grid4 { grid-template-columns:repeat(2,1fr); gap:8px; margin:8px 0 }
  .pt-row { gap:8px } .pt-col { min-width:0; flex-basis:100% }
  .pt-panel { padding:11px 12px; margin-bottom:9px }
  .pt-panel h4 { font-size:0.82rem }
  .pt-kpi { padding:11px 12px } .pt-kpi .val { font-size:1.16rem } .pt-kpi .lbl { font-size:0.68rem }
  .pt-ctl,.pt-bar { padding:10px 12px }
  .pt-maintab { padding:7px 11px; font-size:0.82rem }
  table.pt-tbl { font-size:0.73rem } table.pt-tbl th,table.pt-tbl td { padding:4px 6px }
  .pt-err-msg { max-width:150px }
  .pt-cards { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) }
}
/* ── 实盘专属组件 (门禁链 / kill-switch / 真金警示) — 同 token, 归 hy.css 唯一规范 ── */
.lv-warn { background:var(--yellow-bg); border:1px solid rgba(210,153,34,.4); border-radius:8px; padding:9px 13px; margin-bottom:12px; color:var(--text-secondary); font-size:.82rem; display:flex; align-items:center; gap:8px }
.lv-warn .ico { color:var(--yellow); flex:none }
.lv-gate-list { display:flex; flex-direction:column; gap:6px }
.lv-gate-item { display:flex; align-items:center; gap:8px; font-size:.82rem; padding:7px 10px; background:var(--bg-secondary); border-radius:6px }
.lv-kill { background:var(--red); color:#fff; border:none; border-radius:8px; padding:13px 26px; font-size:1.02rem; font-weight:700; cursor:pointer; width:100% }
.lv-kill:hover { filter:brightness(1.12) }
.lv-kill:disabled { opacity:.45; cursor:not-allowed; filter:none }
.lv-kill.clear { background:var(--green) }
.lv-cockpit { margin-bottom:6px }
.lv-cockpit-sub { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:.76rem; color:var(--text-secondary); padding:2px 4px 0; margin-bottom:14px }
.lv-kill-top { background:var(--red); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18) }
.lv-kill-top:hover { filter:brightness(1.12) }
.lv-kill-top.clear { background:var(--green) }
.pt-kpi.kpi-ok { background:var(--green-bg); border-color:var(--green) }
.pt-kpi.kpi-warn { background:var(--yellow-bg); border-color:var(--yellow) }
.pt-kpi.kpi-bad { background:var(--red-bg); border-color:var(--red) }

/* ------------------------------------------------------------------ */
/* 点击式信息注释 (单一真源 · 全后台通用) — 解释性说明用此, 点击弹出, 不用 hover/title          */
/*   用法: <span class="hy-i" data-t="标题(可选)" data-i="说明文本"></span>                       */
/*   行为/弹层由 main.js 统一处理 (委托点击 → 浮层, 再点/点外/Esc 关闭)。自绘 ⓘ, 不依赖图标字体。 */
/* ------------------------------------------------------------------ */
.hy-i { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; box-sizing:border-box;
  border:1px solid currentColor; border-radius:50%; color:var(--text-muted); font-size:9px; font-weight:700; font-style:normal;
  line-height:1; cursor:pointer; vertical-align:middle; user-select:none; flex:none; transition:color .15s, border-color .15s }
.hy-i::before { content:"i" }
.hy-i:hover, .hy-i.on { color:var(--blue) }
.hy-ipop { position:absolute; z-index:9999; max-width:320px; background:var(--bg-card); border:1px solid var(--border);
  border-left:3px solid var(--blue); border-radius:7px; padding:9px 12px; font-size:.76rem; line-height:1.6;
  color:var(--text-secondary); box-shadow:0 6px 22px rgba(0,0,0,.3) }
.hy-ipop b { display:block; margin-bottom:3px; color:var(--text-primary); font-size:.78rem; font-weight:600 }