/* app.css · 天眼V14全局骨架+通用组件 v2 — "深海玻璃"(REG-FE30·K3整站重做)
   三层纵深: L0深渊画布(图表无框) → L1实心内容卡 → L2液态玻璃chrome(顶栏/侧栏/浮窗)
   消费tokens.css唯一源 · S10/S11样式已拆 hetu.css/k3d.css */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 18px;
  color: var(--text-1);
  background: var(--abyss-edge);
  background-image: radial-gradient(120% 90% at 50% 0%, var(--abyss-center) 0%, var(--abyss-edge) 78%);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
/* Arial泄漏修复(P1-5): UA控件字体栈未继承 */
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
/* 键盘焦点可见(无障碍) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── 全局骨架 v2: 浮空玻璃侧栏 + 主区(顶栏胶囊浮于主区之上) + 底栏 ── */
#shell { display: grid; height: 100vh;
  grid-template-rows: 1fr var(--statusbar-h);
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-areas: "sidebar main" "statusbar statusbar"; }

/* 顶栏 = 浮空玻璃胶囊(iOS26功能层·内容在其下滚动peek through) */
#topbar { position: fixed; top: 10px; left: calc(var(--sidebar-w) + 12px); right: 12px;
  height: var(--topbar-h); z-index: 40; display: flex; align-items: center;
  gap: var(--space-4); padding: 0 var(--space-4); border-radius: var(--r-xl); }
/* 潮汐光缘(K3签名): 顶栏底缘发丝光束·--fusion-alpha由tide共振度驱动(JS) */
#topbar::before { content: ''; position: absolute; left: 10%; right: 10%; bottom: -1px;
  height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: var(--fusion-alpha, 0.12);
  transition: opacity var(--dur-spring) var(--ease-spring); }
/* iOS26滚动边缘效应: 胶囊下内容渐进blur */
#topbar::after { content: ''; position: absolute; top: 100%; left: -4px; right: -4px;
  height: 22px; pointer-events: none;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85), transparent);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85), transparent); }
#topbar .title { font-size: var(--fs-title); font-weight: var(--fw-title);
  letter-spacing: -0.01em; white-space: nowrap; }
#topbar .spacer { flex: 1; }

/* 侧栏 = 浮空玻璃面板(iPadOS26式·margin+圆角·深渊作间隔) */
#sidebar { grid-area: sidebar; margin: 10px 0 10px 10px; border-radius: var(--r-xl);
  padding: var(--space-3) var(--space-2); overflow-y: auto; z-index: 30; }
#sidebar .nav-item { display: flex; align-items: center; gap: var(--space-3);
  width: 100%; border: none; background: transparent; text-align: left;
  padding: 10px var(--space-3); border-radius: var(--r-md); cursor: pointer;
  color: var(--text-2); font-size: var(--fs-body);
  transition: background var(--dur-fast), color var(--dur-fast); }
#sidebar .nav-item:hover { background: var(--state-hover); color: var(--text-1); }
#sidebar .nav-item.active { background: var(--state-selected); color: var(--text-1); }
#sidebar .nav-item.active .dot { box-shadow: 0 0 6px currentColor; }
#sidebar .nav-item .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
#sidebar .nav-item .key { margin-left: auto; font-size: var(--fs-label);
  color: var(--text-3); font-family: var(--mono); }
#sidebar .nav-sep { height: 1px; background: var(--separator);
  margin: var(--space-3) var(--space-3); }
#sidebar .brand { padding: var(--space-3); font-weight: 700;
  font-size: var(--fs-headline); color: var(--text-1); letter-spacing: 0.5px; }
#sidebar .brand small { display: block; font-size: var(--fs-label);
  color: var(--text-3); font-weight: 400; margin-top: 2px; }

#main { grid-area: main; overflow-y: auto;
  padding: calc(var(--topbar-h) + 26px) var(--space-5) var(--space-5);
  scroll-behavior: smooth; }

/* 底栏 = 彭博式状态条(玻璃·发丝顶边) */
#statusbar { grid-area: statusbar; display: flex; align-items: center;
  gap: var(--space-4); padding: 0 var(--space-5); font-size: var(--fs-label);
  color: var(--text-3); font-family: var(--mono);
  background: var(--glass-bg); backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-top: 1px solid var(--separator); }
#statusbar .ok { color: var(--up); }

/* ── 卡片与栅格(L1内容层: 实心·hairline·微受光·禁玻璃) ── */
.card { background: var(--bg-1); border: 1px solid var(--separator);
  border-radius: var(--r-lg); padding: var(--space-4);
  box-shadow: var(--card-edge-light), var(--shadow-card); }
.card > .card-title { font-size: var(--fs-label); color: var(--text-2);
  letter-spacing: var(--tracking-label);
  margin-bottom: var(--space-3); display: flex; align-items: center;
  gap: var(--space-2); }
.card > .card-title .src { margin-left: auto; color: var(--text-4);
  font-family: var(--mono); font-size: 10px; }

.grid { display: grid; gap: var(--space-2); }
.grid-24 { grid-template-columns: repeat(24, 1fr); }
.span-6 { grid-column: span 6; }  .span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; } .span-16 { grid-column: span 16; }
.span-18 { grid-column: span 18; } .span-24 { grid-column: span 24; }
.span-7 { grid-column: span 7; }  .span-17 { grid-column: span 17; }  /* [3HAO-P0] b0主屏布局坍塌修复 */
@media (max-width: 1440px) {
  .span-6, .span-8 { grid-column: span 12; }
  .span-16, .span-18, .span-17, .span-7 { grid-column: span 24; }
}
@media (max-width: 1024px) {
  .grid-24 > * { grid-column: span 24 !important; }
  #shell { grid-template-columns: var(--sidebar-w-fold) 1fr; }
  #topbar { left: calc(var(--sidebar-w-fold) + 10px); }
  #sidebar { margin: 10px 0 10px 6px; }
  #sidebar .label, #sidebar .key, #sidebar .brand small { display: none; }
}
@media (min-width: 1921px) {
  #main > * { max-width: 1920px; margin-left: auto; margin-right: auto; }
}

/* ── KPI/大数字(苹果"big number, small label"·光学收紧) ── */
.hero-num { font-size: var(--fs-hero); font-weight: var(--fw-hero);
  font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-display);
  line-height: 1.05; }
.kpi { font-size: var(--fs-kpi); font-weight: var(--fw-kpi);
  font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-display);
  line-height: 34px; }
.kpi-sm { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em; }
.label { font-size: var(--fs-label); color: var(--text-2); line-height: 14px;
  letter-spacing: var(--tracking-label); }
.caption { font-size: var(--fs-caption); color: var(--text-2); line-height: 16px; }

.badge { display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-label); border-radius: var(--r-pill);
  padding: 2px var(--space-2); border: 1px solid var(--separator); }
.badge.up { color: var(--up); }    .badge.down { color: var(--down); }
.badge.warn { color: var(--warn); } .badge.info { color: var(--info); }
.badge.accent { color: var(--accent); border-color: var(--accent); }
.badge.dim { color: var(--text-3); }

/* FE-10 M11 失败卡ERR徽标(原生details·可点开看error串·吃tokens) */
.err-chip { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.err-chip summary { list-style: none; }
.err-chip summary::-webkit-details-marker { display: none; }
.err-chip summary:hover { text-decoration: underline; }
.err-chip .err-msg { margin: 4px 0 0; padding: 4px 8px; max-width: 480px;
  overflow-x: auto; white-space: pre-wrap; word-break: break-all;
  color: var(--down); background: var(--bg-2); border: 1px solid var(--separator);
  border-radius: var(--r-sm, 6px); font-size: 11px; }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.green { background: var(--up); }
.dot.yellow { background: var(--warn); }
.dot.red { background: var(--down); }
.dot.gray { background: var(--text-4); }
.dot.pulse { animation: pulse 2s var(--ease-spring) infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }

/* 涨跌闪(PriceFlash 600ms·唯一允许的数据区动效) */
@keyframes flash-up { 0% { background: rgba(48, 209, 88, 0.22); } 100% { background: transparent; } }
@keyframes flash-down { 0% { background: rgba(255, 69, 58, 0.22); } 100% { background: transparent; } }
.flash-up { animation: flash-up 600ms var(--ease-spring); }
.flash-down { animation: flash-down 600ms var(--ease-spring); }

/* ── 分段控件(iOS26玻璃pill) ── */
.segmented { display: inline-flex; background: var(--bg-2);
  border-radius: var(--r-pill); padding: 2px; gap: 2px; }
.segmented button { border: none; background: transparent; color: var(--text-2);
  font-size: var(--fs-caption); padding: 4px var(--space-3);
  border-radius: var(--r-pill); cursor: pointer; min-height: 26px;
  transition: background var(--dur-mid) var(--ease-spring), color var(--dur-mid); }
.segmented button.active { background: var(--bg-3); color: var(--text-1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 1px 0 var(--glass-specular); }
.segmented button:hover { color: var(--text-1); }

/* ── 表格 ── */
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
table.data th { text-align: left; font-size: var(--fs-label);
  color: var(--text-2); font-weight: 400; padding: 6px var(--space-2);
  letter-spacing: var(--tracking-label);
  border-bottom: 1px solid var(--separator); position: sticky; top: 0;
  background: var(--bg-1); }
table.data td { padding: 6px var(--space-2);
  border-bottom: 1px solid var(--grid-line); font-variant-numeric: tabular-nums; }
table.data tr:hover td { background: var(--bg-2); }

/* ── 滚动条 ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ── 杂项 ── */
.mono { font-family: var(--mono); font-size: 12px; }
.spark { display: block; width: 100%; height: 28px; margin-top: var(--space-2); }
.spark-slot:empty { display: none; }

/* ── 渐进披露折叠区(原生details·零依赖·键盘可达·S2深度明细/S3历史) ── */
details.fold > summary { list-style: none; cursor: pointer; display: flex;
  align-items: center; gap: var(--space-2); padding: 10px var(--space-4);
  border-radius: var(--r-lg); background: var(--bg-1);
  border: 1px solid var(--separator); font-size: var(--fs-caption);
  color: var(--text-2); transition: background var(--dur-fast), color var(--dur-fast); }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary:hover { background: var(--bg-2); color: var(--text-1); }
details.fold > summary .chev { color: var(--text-3);
  transition: transform var(--dur-fast) var(--ease-spring); }
details.fold[open] > summary .chev { transform: rotate(90deg); }
details.fold > summary .src { margin-left: auto; color: var(--text-4);
  font-family: var(--mono); font-size: 10px; }
details.fold .fold-body { margin-top: var(--space-2); }

/* ── Ctrl+K命令面板(REG-FE36·液态玻璃overlay) ── */
.cmdk-overlay { position: fixed; inset: 0; z-index: 200;
  background: rgba(4, 6, 10, 0.42); backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 16vh; }
.cmdk { width: min(520px, calc(100vw - 32px)); border-radius: var(--r-xl);
  overflow: hidden; animation: viewIn var(--dur-mid) var(--ease-spring); }
.cmdk-input { width: 100%; border: none; background: transparent; outline: none;
  padding: 14px 16px; font-size: var(--fs-headline); color: var(--text-1);
  border-bottom: 1px solid var(--separator); }
.cmdk-input::placeholder { color: var(--text-3); }
.cmdk-list { max-height: 320px; overflow-y: auto; padding: 6px; }
.cmdk-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-body);
  color: var(--text-2); }
.cmdk-item .hint { margin-left: auto; font-size: var(--fs-label);
  color: var(--text-3); font-family: var(--mono); }
.cmdk-item.sel { background: var(--state-selected); color: var(--text-1); }
.cmdk-foot { padding: 8px 16px; border-top: 1px solid var(--separator);
  font-size: var(--fs-label); color: var(--text-3); }
/* .src溯源标签可点(每数字可追溯) */
.src { cursor: pointer; }
.src:hover { color: var(--info) !important; text-decoration: underline dotted; }

/* ── S3决策页组件(决策价格三格/脊柱横排8格) ── */
.s3-price-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.s3-ps { background: var(--bg-2); border-radius: var(--r-md); padding: 8px 12px; }
.s3-spinal-strip { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.s3-sr { border: 1px solid var(--separator); border-radius: var(--r-md);
  padding: 8px 10px; min-width: 0; }
.s3-sr.triggered { border-color: var(--down); background: rgba(255, 69, 58, 0.08); }
@media (max-width: 1440px) { .s3-spinal-strip { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { .s3-spinal-strip { grid-template-columns: repeat(2, 1fr); } }
.s2-dir { font-size: 10px; }
.s2-flash-time { flex: none; font-size: 11px; }
.s6-log { font-size: 10px; }
.row { display: flex; align-items: center; gap: var(--space-2); }
.row.between { justify-content: space-between; }
.mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.hidden { display: none !important; }
.skeleton { color: var(--text-3); font-size: var(--fs-caption);
  padding: var(--space-6); text-align: center; }
.skeleton-card { min-height: 96px; border-radius: var(--r-lg);
  background: linear-gradient(100deg, var(--bg-1) 40%, var(--bg-2) 50%, var(--bg-1) 60%);
  background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.view-enter { animation: viewIn var(--dur-spring) var(--ease-spring); }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }

/* ── S8 潮汐驾驶舱(REG-FE10·唯一发光焦点/平潮降亮/灰阶层级) ── */
#s8-root { display: flex; flex-direction: column; gap: var(--space-2); }
#s8-root.tide-calm .s8-main, #s8-root.tide-calm .s8-band {
  filter: brightness(0.78) saturate(0.85);
  transition: filter 500ms var(--ease-spring); }
[data-theme="light"] #s8-root.tide-calm .s8-main,
[data-theme="light"] #s8-root.tide-calm .s8-band {
  filter: brightness(0.94) saturate(0.85); }
.s8-hud { display: flex; align-items: center; gap: var(--space-4);
  padding: 6px var(--space-4); border-radius: var(--r-lg); min-height: 52px; flex-wrap: wrap; }
.s8-hud .s8-phase { font-size: var(--fs-headline); padding: 4px var(--space-3); }
.s8-hud .s8-cell { display: flex; flex-direction: column; gap: 2px; }
.s8-glow-wrap { filter: drop-shadow(0 0 8px rgba(10, 132, 255, 0.28)); }
.s8-main { display: grid; grid-template-columns: 63fr 37fr; gap: var(--space-2);
  transition: filter 500ms var(--ease-spring); }

/* ── 图表无框化(K3"深渊画布"·apple.com全幅原则): 图表直坐L0深渊·不装卡片框 ── */
.chart-stage { position: relative; min-width: 0; }
/* 玻璃Data Window(悬停即现·transient控件·不挡十字光标) */
.dw { position: absolute; top: 10px; left: 10px; z-index: 12; min-width: 176px;
  max-width: 240px; padding: 8px 12px; border-radius: var(--r-md);
  font-size: var(--fs-caption); line-height: 17px; pointer-events: none; }
.dw .num { font-size: 12px; }

/* ── S8热力图层开关(REG-FE40·浮于图表右上·玻璃chip) ── */
.s8-layers { position: absolute; top: 8px; right: 8px; z-index: 8;
  display: flex; gap: 5px; }
.s8-lchip { font-size: 11px; padding: 3px 10px; border-radius: var(--r-pill);
  cursor: pointer; user-select: none; border: 1px solid var(--glass-border);
  background: var(--glass-bg); color: var(--text-3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: color var(--dur-fast), border-color var(--dur-fast); }
.s8-lchip.on { color: var(--text-1); border-color: var(--accent); }
.s8-lchip:hover { color: var(--text-1); }
.s8-rail { display: flex; flex-direction: column; gap: var(--space-2);
  max-height: 648px; overflow-y: auto; }
.s8-scene { border-top: 1px solid var(--grid-line); padding-top: var(--space-2);
  margin-top: var(--space-2); }
.s8-scene:first-of-type { border-top: none; }
.s8-band { display: flex; align-items: center; gap: var(--space-5);
  padding: 6px var(--space-4); border-radius: var(--r-lg); min-height: 52px;
  transition: filter 500ms var(--ease-spring); }
.s8-band .s8-cell { display: flex; align-items: center; gap: var(--space-3); }
.s8-strip { display: flex; height: 12px; flex: 1; border-radius: 3px; overflow: hidden;
  min-width: 120px; }
.s8-scrub { -webkit-appearance: none; appearance: none; width: 140px; height: 3px;
  background: var(--bg-3); border-radius: 2px; outline: none; }
.s8-scrub::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 8px rgba(10, 132, 255, 0.55); cursor: pointer; }
@media (max-width: 1440px) {
  .s8-main { grid-template-columns: 1fr; }
  .s8-rail { max-height: none; display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
  .s8-rail { grid-template-columns: 1fr; }
  .s8-band { flex-wrap: wrap; }
}

/* ── S9智驾驾驶舱(REG-FE16·FSD×ECDIS) ── */
.dot.blue { background: var(--info); }
#s9-root { display: flex; flex-direction: column; gap: var(--space-2); }
.s9-fma { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: 6px var(--space-4); border-radius: var(--r-lg);
  position: sticky; top: 6px; z-index: 20; }
.s9-fma .s9-seg { display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-label); color: var(--text-2); }
.s9-fma .s9-seg b { font-size: var(--fs-caption); color: var(--text-1); font-weight: 600; }
.s9-fma .s9-phase { font-size: var(--fs-headline); padding: 4px var(--space-3); }
.s9-fma .s9-cell, .s9-band .s9-cell { display: flex; flex-direction: column; gap: 2px; }
.s9-main { display: grid; grid-template-columns: 63fr 37fr; gap: var(--space-2); }
.s9-rail { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.s9-say { font-size: var(--fs-headline); font-weight: 600; line-height: 22px;
  padding: var(--space-3); border-radius: var(--r-md); background: var(--bg-2);
  border-left: 3px solid var(--text-3); margin-top: var(--space-2); }
.s9-say.down { border-left-color: var(--down); color: var(--down); }
.s9-say.warn { border-left-color: var(--warn); color: var(--warn); }
.s9-say.accent { border-left-color: var(--accent); color: var(--accent); }
.s9-say.info { border-left-color: var(--info); color: var(--info); }
.s9-say-sm { font-size: var(--fs-caption); color: var(--text-2); line-height: 17px;
  padding: 5px var(--space-3); margin-top: 6px; border-radius: var(--r-sm);
  background: var(--bg-2); border-left: 2px solid var(--text-4); }
.s9-say-sm.warn { border-left-color: var(--warn); }
.s9-say-sm.accent { border-left-color: var(--accent); }
.s9-say-sm.info { border-left-color: var(--info); }
.s9-ana { border-top: 1px solid var(--grid-line); margin-top: var(--space-3);
  padding-top: var(--space-2); }
.s9-tk { font-size: var(--fs-headline); padding: 4px var(--space-3); }
.s9-btn { display: inline-flex; align-items: center; justify-content: center;
  margin-top: var(--space-3); padding: 7px var(--space-3); min-height: 32px;
  border: 1px solid var(--separator); border-radius: var(--r-sm);
  font-size: var(--fs-caption); font-weight: 600; cursor: pointer; user-select: none; }
.s9-btn.up { color: var(--up); } .s9-btn.warn { color: var(--warn); border-color: var(--warn); }
.s9-btn.down { color: var(--down); border-color: var(--down); }
.s9-guide > summary { list-style: none; }
.s9-guide > summary::-webkit-details-marker { display: none; }
.s9-node { border-top: 1px solid var(--grid-line); padding: 6px 0; }
/* K3去重·合并3(REG-FE85): S6一屏两签(系统健康|数据链血缘) */
.s6-tabs { display: flex; align-items: center; gap: var(--space-2);
  padding: 6px var(--space-3); margin-bottom: var(--space-2);
  border: 1px solid var(--separator); border-radius: var(--r-md);
  background: var(--bg-2); }
.s6-tab { padding: 6px 16px; border: 1px solid transparent; border-radius: 999px;
  font-size: var(--fs-caption); font-weight: 600; cursor: pointer;
  color: var(--text-2); background: transparent; user-select: none; }
.s6-tab:hover { color: var(--text-1); }
.s6-tab.on { color: var(--bg-0, #0a0c12); background: var(--accent); border-color: var(--accent); }
[data-theme="light"] .s6-tab.on { color: #fff; }
/* K3去重·合并2(REG-FE86): S0顶部hero带(sparkline三品种/脊柱8灯/宏观倒计时/Token预算) */
.hero-band { align-items: center; }
.hero-cells { flex: 0 1 auto; }
.hero-cell { display: inline-flex; flex-direction: column; gap: 2px; min-width: 148px;
  padding: 4px 10px; border: 1px solid var(--separator); border-radius: var(--r-sm);
  background: var(--bg-2); }
.hero-price { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-sep { width: 1px; align-self: stretch; background: var(--separator); }
.hero-spinal { flex: 1 1 320px; min-width: 260px; }
.hero-sr { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  border: 1px solid var(--separator); border-radius: 999px; cursor: default; }
.hero-macro { flex: 0 1 210px; display: flex; flex-direction: column; gap: 2px; }
.hero-token { flex: 0 1 200px; display: flex; flex-direction: column; gap: 2px; }
.hero-token-track { display: block; height: 5px; border-radius: 3px; background: var(--bg-1); overflow: hidden; }
.hero-token-fill { display: block; height: 100%; border-radius: 3px;
  background: var(--up); transition: width 300ms; }
.hero-token-fill.c-warn { background: var(--warn); }
.hero-token-fill.c-down { background: var(--down); }
.s9-node:first-of-type { border-top: none; }
.s9-node > summary { display: flex; align-items: center; gap: var(--space-2);
  cursor: pointer; list-style: none; font-size: var(--fs-caption); }
.s9-node > summary::-webkit-details-marker { display: none; }
.s9-node > summary b { font-weight: 600; color: var(--text-1); }
.s9-band { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;
  padding: 6px var(--space-4); border-radius: var(--r-lg); }
.s9-band .s9-cell { flex-direction: column; align-items: flex-start; gap: 2px; }
@media (max-width: 1440px) {
  .s9-main { grid-template-columns: 1fr; }
  .s9-rail { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 1024px) {
  .s9-rail { grid-template-columns: 1fr; }
  .s9-band { gap: var(--space-3); }
}
#s9-root.tide-calm { filter: brightness(0.78); }
#s9-root.tide-calm .s9-say, #s9-root.tide-calm .s9-fma .s9-phase { filter: brightness(1.25); }

/* ── 主题切换/汉堡按钮(触控≥44px) ── */
.theme-btn { display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 32px; border: 1px solid var(--separator);
  border-radius: var(--r-sm); background: transparent; color: var(--text-2);
  font-size: 14px; cursor: pointer; transition: background var(--dur-fast); }
.theme-btn:hover { background: var(--state-hover); color: var(--text-1); }
.theme-btn.burger { display: none; }

/* ── FE-14 会话图例(三盘色与带同token键·美盘夏令时注记) ── */
.sess-legend { flex-wrap: wrap; gap: 4px 16px; padding: 0 2px 4px; }
.sess-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.sess-legend-item i { width: 10px; height: 4px; border-radius: 2px; display: inline-block; }

/* ── FE-13 绘图工具栏(左驻·TV对标·文字钮零emoji·全吃tokens) ── */
.dt-toolbar { position: absolute; top: 8px; left: 8px; z-index: 20;
  display: flex; flex-direction: column; gap: 3px; padding: 4px;
  border: 1px solid var(--glass-border); border-radius: var(--r-sm);
  background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur)); }
.dt-toolbar button { width: 34px; height: 28px; border: none;
  border-radius: var(--r-sm); background: transparent; color: var(--text-2);
  font-size: var(--fs-label); cursor: pointer; }
.dt-toolbar button:hover { background: var(--state-hover); color: var(--text-1); }
.dt-toolbar button.active { background: var(--state-selected); color: var(--accent); }
.dt-toolbar .dt-sep { height: 1px; margin: 2px 3px; background: var(--separator); }

/* ── FE-12 指标开关面板(仿TV精简dialog·液态玻璃功能层·全吃tokens) ── */
.ind-panel { position: absolute; top: 8px; right: 8px; z-index: 30; width: 300px;
  padding: var(--space-3); border-radius: var(--r-lg); }
.ind-panel-head { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-2); }
.ind-panel-head .theme-btn { min-width: 32px; height: 28px; }
.ind-rows { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.ind-row { display: flex; align-items: center; gap: var(--space-2); padding: 3px 4px;
  border-radius: var(--r-sm); cursor: pointer; }
.ind-row:hover { background: var(--state-hover); }
.ind-label { width: 52px; color: var(--text-2); font-size: var(--fs-label); }
.ind-params { display: flex; gap: 4px; margin-left: auto; }
.ind-num { width: 56px; padding: 2px 4px; border: 1px solid var(--separator);
  border-radius: var(--r-sm); background: var(--bg-2); color: var(--text-1);
  font-size: 12px; }
.ind-num:disabled { opacity: 0.35; }
.ind-foot { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.ind-foot .theme-btn { flex: 1; }
.ind-legend { flex-wrap: wrap; gap: 4px 14px; padding: 2px; min-height: 18px; }
.ind-legend-item { display: inline-flex; align-items: center; gap: 5px;
  color: var(--text-2); font-size: var(--fs-label); }
.ind-legend-item i { width: 8px; height: 2px; border-radius: 2px; display: inline-block; }
.ind-legend-item b { color: var(--text-1); font-weight: 500; }

/* ── 手机端(单列/汉堡/≥44px触控/字体≥12px) ── */
@media (max-width: 768px) {
  :root { --fs-label: 12px; --fs-caption: 12px; }
  #shell { grid-template-columns: 1fr; }
  #topbar { left: 8px; right: 8px; top: 8px; padding: 0 var(--space-3);
    gap: var(--space-2); overflow: hidden; }
  #topbar .title { font-size: var(--fs-headline); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 104px; flex: none; }
  #token-mini { display: none; }
  #svc-lights { display: none; }
  #bjt-clock { display: none; }
  .segmented button { min-height: 36px; padding: 6px 10px; font-size: 12px; }
  .card > .card-title .src, .badge, table.data th, table.data td { font-size: 12px; }
  .s2-dir, .s2-flash-time, .s6-log { font-size: 12px; }
  .card:has(> table.data) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  @supports not (selector(:has(> table))) {
    .card > table.data { display: block; overflow-x: auto; }
  }
  #main { padding: calc(var(--topbar-h) + 18px) var(--space-3) var(--space-3); }
  #main .mono { word-break: break-all; white-space: normal; }
  .theme-btn.burger { display: inline-flex; order: -1; }
  /* 侧栏=浮空玻璃抽屉(汉堡开合) */
  #sidebar { position: fixed; top: 8px; bottom: calc(var(--statusbar-h) + 8px);
    left: 8px; width: 240px; margin: 0; z-index: 100; transform: translateX(-110%);
    transition: transform var(--dur-mid) var(--ease-spring); }
  body.nav-open #sidebar { transform: translateX(0); }
  body.nav-open::after { content: ''; position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.35); z-index: 90; }
  #sidebar .nav-item { min-height: 44px; }
  #sidebar .nav-item .label, #sidebar .nav-item .key,
  #sidebar .brand small { display: inline; }
  #sidebar .brand small { display: block; }
  .card { padding: var(--space-3); border-radius: var(--r-md); }
  .grid-24 > * { grid-column: span 24 !important; }
  .segmented button { min-height: 36px; padding: 6px var(--space-3); }
  #sidebar .nav-item, .theme-btn { touch-action: manipulation; }
  #s5-chart { height: 420px !important; }
  #s8-chart { height: 400px !important; }
  #s9-chart { height: 400px !important; }
  .s9-fma { gap: var(--space-3); padding: 6px var(--space-3); position: static; }
  .s9-band .s9-cell { flex-wrap: wrap; }
  .s8-hud { gap: var(--space-3); padding: 6px var(--space-3); }
  .s8-rail { max-height: none; }
  .s8-band { gap: var(--space-3); }
  .s8-band .s8-cell { flex-wrap: wrap; }
  .s8-scrub { width: 110px; }
  #statusbar { gap: var(--space-3); padding: 0 var(--space-3);
    white-space: nowrap; overflow: hidden; }
  #sb-keys, #sb-pg, #sb-ver { display: none; }
}

/* FE-17 双周期联动+右键菜单+DW锁定(REG-FE68·全吃tokens·零硬编码hex) */
.s5-chart2 { width: 100%; height: 220px; margin-top: 8px;
  border-top: 1px solid var(--glass-border); }
.ctx-menu { position: fixed; z-index: 1200; min-width: 160px; padding: 4px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border); border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); }
.ctx-item { display: flex; justify-content: space-between; align-items: center;
  gap: 18px; width: 100%; padding: 7px 12px; background: none; border: none;
  color: var(--text-1); font-size: 13px; text-align: left; cursor: pointer;
  border-radius: 6px; }
.ctx-item:hover:not(:disabled) { background: var(--bg-3); }
.ctx-item:disabled { color: var(--text-3); cursor: default; }
.ctx-hint { color: var(--text-2); font-size: 12px; }
.dw-lock { margin-left: 8px; padding: 1px 7px; font-size: 11px;
  color: var(--gold); border: 1px solid var(--gold); border-radius: 4px; }

/* ── FE-23 四状态局面名(设计A·statetitle.js·全吃tokens·禁硬编码hex) ── */
.statetitle { position: absolute; top: 10px; left: 10px; z-index: 20;
  display: flex; align-items: baseline; gap: 8px; padding: 5px 10px;
  background: color-mix(in srgb, var(--bg-2) 72%, transparent);
  border: 1px solid var(--separator); border-radius: 8px;
  backdrop-filter: blur(6px); pointer-events: none;
  font-variant-numeric: tabular-nums; overflow: hidden; }
.statetitle .st-name { font-size: 18px; font-weight: 800; letter-spacing: 0.01em; }
.statetitle .st-sub { font-size: 11px; color: var(--text-2); }
.statetitle .st-dwell { font-size: 11px; color: var(--text-3); }
.statetitle .st-conflict { color: var(--warn); font-weight: 800; font-size: 13px;
  border: 1px solid var(--warn); border-radius: 999px; padding: 0 5px; }
.statetitle .st-age { font-size: 10px; color: var(--text-3); border: 1px solid var(--separator);
  border-radius: 999px; padding: 0 4px; }
.statetitle .st-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--info); opacity: 0; transform: translateX(-100%); }
.statetitle .st-bar.st-sweep { animation: st-sweep 0.5s ease-out; }
@keyframes st-sweep { 0% { transform: translateX(-100%); opacity: 0.9; }
  100% { transform: translateX(100%); opacity: 0; } }
/* 300ms crossfade(位置/字号/布局全冻结·只换名+色·⛔零位移) */
.statetitle.st-cross .st-name, .statetitle.st-cross .st-sub { animation: st-cross 0.3s ease; }
@keyframes st-cross { from { opacity: 0.15; } to { opacity: 1; } }
.st-badge { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 9px;
  border: 1px solid var(--separator); border-radius: 6px; background: var(--bg-2); }
.st-badge .st-conflict { color: var(--warn); font-weight: 800; }
/* S2四状态面板 */
.st-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.st-cell { border: 1px solid var(--separator); border-radius: 8px; padding: 8px;
  background: var(--bg-2); transition: transform 0.3s ease, opacity 0.3s ease; }
.st-cell.on { transform: scale(1.04); opacity: 1; }
.st-cell:not(.on) { opacity: 0.6; }
.st-cell-name { font-size: 15px; font-weight: 800; }
.st-cell-meta, .st-cell-dwell { font-size: 10px; color: var(--text-3); margin-top: 3px; }
.st-probes { display: flex; gap: 3px; flex-wrap: wrap; }
.st-probe { font-size: 10px; padding: 2px 6px; border-radius: 4px;
  border: 1px solid var(--separator); color: var(--text-2); }
.st-probe.cur { color: var(--hetu-gold); border-color: var(--hetu-gold); font-weight: 700; }
.st-bench-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.st-bench-track { flex: 1; background: var(--bg-1); border-radius: 3px; height: 6px; overflow: hidden; }
.st-bench-fill { display: block; height: 100%; border-radius: 3px; }
.st-bench-fill.ok { background: var(--up); }
.st-bench-fill.no { background: var(--warn); }
.st-discipline { border: 1px dashed var(--warn); border-radius: 6px; padding: 5px 8px; }

/* ── FE-24 C0认知账本(第0层·金锚=--hetu-gold·全吃tokens) ── */
.c0-src { display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 14px; border: 1px solid var(--separator); border-radius: 8px;
  background: var(--bg-2); }
.c0-src b { font-size: 18px; }
.c0-src.diff { border-color: var(--warn); }
.c0-src.diff b { color: var(--warn); }
.c0-table th, .c0-table td { padding: 5px 8px; border-bottom: 1px solid var(--grid-line); }
.c0-id { font-weight: 700; }
.c0-stmt { max-width: 380px; }
.c0-evi { max-width: 170px; font-size: 11px; }
.c0-ghead td { background: var(--bg-2); color: var(--hetu-gold);
  font-weight: 700; font-size: 12px; letter-spacing: 0.05em; }
.c0-han { display: flex; align-items: center; gap: 6px; padding: 2px 0;
  font-size: 12px; }
.c0-metric { display: flex; align-items: center; gap: 6px; min-width: 170px; }
.c0-metric-track { flex: 1; background: var(--bg-1); border-radius: 3px;
  height: 5px; overflow: hidden; }
.c0-metric-fill { display: block; height: 100%; border-radius: 3px; }
.c0-metric-fill.ok { background: var(--up); }
.c0-metric-fill.no { background: var(--warn); }
.c0-hist { font-size: 10px; color: var(--text-3); border: 1px solid var(--separator);
  border-radius: 999px; padding: 0 4px; margin-left: 4px; }
.c0-trail-row { display: flex; align-items: center; gap: 8px; padding: 4px 0;
  border-bottom: 1px solid var(--grid-line); font-size: 12px; }

/* ── FE-25/26 仓位三仪表+共享研判卡(全吃tokens) ── */
.pg-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.pg-row-s { gap: 6px; }
.pg-ring { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.pg-ring .label { font-size: 10px; }
.rs-consumer { font-size: 11px; padding: 2px 7px; border: 1px solid var(--separator);
  border-radius: 5px; background: var(--bg-2); color: var(--text-2); }

/* ── FE-28 S10河图盘感驾驶舱(一屏三层·全吃tokens) ── */
.s10-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-3); }
.s10-stage { position: relative; border: 1px solid var(--separator); border-radius: 10px;
  overflow: hidden; background: var(--hetu-abyss); }
.s10-side { display: flex; flex-direction: column; gap: var(--space-3); }
.s10-sf { font-size: 20px; font-weight: 800; }
.s10-band { display: flex; align-items: center; gap: var(--space-4);
  padding: 6px var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
@media (max-width: 768px) {
  .s10-main { grid-template-columns: 1fr; }
  .s10-stage canvas { height: 56vh !important; }
}

/* ── FE-29 新项目栏六组(nav_group组头·全吃tokens) ── */
.nav-group { margin: 10px 14px 2px; font-size: 10px; letter-spacing: 0.08em;
  color: var(--text-3); text-transform: uppercase; }

/* ── FE-32 感知对象身份卡(设计C·objcard.js·全吃tokens) ── */
.objcard-float { position: absolute; top: 42px; right: 12px; z-index: 25;
  min-width: 230px; max-width: 300px; padding: 10px 12px;
  background: color-mix(in srgb, var(--bg-2) 85%, transparent);
  border: 1px solid var(--separator); border-radius: 10px;
  backdrop-filter: blur(8px); font-variant-numeric: tabular-nums; }
.objcard .mono { font-size: 12px; }

/* ── FE-33 思考卡常驻(设计D·S0左栏·全吃tokens) ── */
.s0-left { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.s0-left .card { flex: 1; overflow-y: auto; max-height: 700px; }
@media (max-width: 1200px) {
  .s0-left { display: none; }   /* 窄屏降级: 左栏思考卡折叠(设计D不抢戏) */
}

/* ── FE-34 驾校微件(设计E·S0右栏·全吃tokens) ── */
.dojo-row { display: flex; align-items: center; gap: 8px; padding: 3px 0;
  font-size: 12px; flex-wrap: wrap; }
.dojo-flash { animation: dojo-flash 0.6s ease-out; }
@keyframes dojo-flash { 0% { box-shadow: 0 0 0 2px var(--hetu-gold); }
  100% { box-shadow: 0 0 0 0 transparent; } }

/* ── REG-FE88 潮汐驾驶舱三卡带(1号机 2026-08-19 · 韩总令"看不见潮汐分析" ·
      深色发光·全吃tokens·内容层不用玻璃用bg-1标准卡) ── */
.s0-tide { display: grid; grid-template-columns: 1.3fr 1.15fr 1fr;
  gap: var(--space-3); align-items: stretch; }
.s0-tide .tc-titlebar { grid-column: 1 / -1; display: flex; align-items: center;
  gap: var(--space-2); flex-wrap: wrap; font-size: var(--fs-label);
  color: var(--text-2); letter-spacing: var(--tracking-label); }
.s0-tide .tc-titlebar .tc-titlebar-name { font-size: var(--fs-headline);
  font-weight: var(--fw-headline); color: var(--text-1); }
.tc-card { background: var(--bg-1); border: 1px solid var(--separator);
  border-radius: var(--r-md); padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2); min-width: 0;
  box-shadow: var(--card-edge-light); }
.tc-head { display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-label); color: var(--text-2); letter-spacing: var(--tracking-label); }
.tc-head .src { margin-left: auto; color: var(--text-4); font-size: 11px; }
.tc-title { font-size: var(--fs-headline); font-weight: var(--fw-headline);
  color: var(--text-1); }
.tc-big { font-size: var(--fs-kpi); font-weight: var(--fw-kpi);
  letter-spacing: var(--tracking-display); line-height: 1.15;
  font-variant-numeric: tabular-nums; }
.tc-big.up { color: var(--up); text-shadow: 0 0 16px currentColor; }
.tc-big.down { color: var(--down); text-shadow: 0 0 16px currentColor; }
.tc-big.dim { color: var(--text-2); }
.tc-big .tc-sub { font-size: var(--fs-body); font-weight: var(--fw-body);
  color: var(--text-2); margin-left: var(--space-2); text-shadow: none; }
.tc-kpi { font-size: var(--fs-headline); font-weight: var(--fw-headline);
  letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.tc-kpi .tc-sub { font-size: var(--fs-label); font-weight: var(--fw-label);
  color: var(--text-3); margin-left: 4px; }
.tc-hint { font-size: var(--fs-body); line-height: 18px; color: var(--info);
  background: var(--state-selected); border: 1px solid var(--separator);
  border-radius: var(--r-sm); padding: 6px var(--space-2); }
[data-theme="light"] .tc-hint { background: var(--state-selected); }
.tc-kv { display: flex; align-items: baseline; gap: var(--space-2);
  font-size: var(--fs-data); color: var(--text-1); flex-wrap: wrap; }
.tc-kv .label { flex: none; }
.tc-bar { display: inline-flex; height: 6px; background: var(--bg-3);
  border-radius: var(--r-pill); overflow: hidden; min-width: 48px; }
.tc-bar i { display: block; height: 100%; border-radius: var(--r-pill);
  transition: width var(--dur-mid) var(--ease-spring); }
.tc-bar-row { display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-label); color: var(--text-2); }
.tc-bar-label { flex: none; width: 40px; }
.tc-six { display: flex; gap: 2px; }
.tc-six .tc-six-seg { flex: 1; height: 20px; border-radius: 4px;
  background: var(--bg-3); color: var(--text-3); font-size: 9px;
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums; transition: filter var(--dur-fast); }
.tc-six .tc-six-seg.on { font-weight: 700; color: var(--bg-0);
  box-shadow: 0 0 10px currentColor; }
.tc-six .tc-six-seg.on.up { background: var(--up); color: #062a12; }
.tc-six .tc-six-seg.on.down { background: var(--down); color: #2a0603; }
.tc-six .tc-six-seg.on.warn { background: var(--warn); color: #2a1a00; }
.tc-six .tc-six-seg.on.dim { background: var(--text-2); color: var(--bg-0); }
.tc-sep { border-top: 1px solid var(--separator); }
@media (max-width: 1200px) {
  .s0-tide { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .s0-tide { grid-template-columns: 1fr; }
}

/* ═══ B0 作战指挥屏([2HAO:FRONTEND-V2 1019]·一张图看全体系) ═══ */
.b0-cell { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; }
.b0-big { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 30px; }
.b0-narr { font-size: 13px; line-height: 1.65; color: var(--text-1);
  word-break: break-all; }
.b0-sidewrap { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.b0-sidecard { width: 100%; }
.b0-maincard { min-width: 0; }
#b0-stage { min-height: 520px; }
@media (max-width: 1200px) {
  #b0-stage { min-height: 380px; }
}