/* LQ V41.42 Mobile V8 — design system.
   All pages compose the components defined here; no page-level CSS. */
:root {
  --bg: #050a14;
  --bg-soft: #0a1424;
  --panel: #0d1a2d;
  --panel-2: #112238;
  --line: rgba(94, 154, 208, .26);
  --line-strong: rgba(94, 200, 255, .5);
  --blue: #5b9ef0;
  --green: #57dfa2;
  /* 8-25 老瞿：「所有的橙色都改成天蓝色，不要这么多颜色」
     「下跌用蓝色表示，上涨用绿色表示」。
     这个变量名叫 --red，值却一直是琥珀色 #f0b45b——名字和颜色对不上，
     所以满屏「红色」其实是橙的。现在语义定死：下跌/失败=天蓝，上涨/成功=绿。
     名字保留不改，因为它被 40 多处引用；只换值，一处改全站生效。 */
  --red: #5bb8f0;
  --text: #e8f2ff;
  --muted: #94a9c4;
  --dim: #6b7f9c;
  --nav-h: 62px;
  --radius: 8px;
  --gap: 10px;
  --card-pad: 13px;
  --metric-pad: 12px;
  --topbar-bg: rgba(5, 10, 20, .94);
  --nav-bg: rgba(6, 12, 22, .97);
  --fs-lg: 18px;
  --fs-md: 14px;
  --fs-sm: 12px;

  /* 8-20 老瞿截图：告警窗的字直接压在账本卡片上，看不清是什么东西。
     根因不是那个窗——是下面这七个变量被用了 20 处，却从来没有定义过。
     CSS 里 var(--没定义的) 解析成空值：background 变透明、color 不设、
     font-size 不生效。全部静默失败，浏览器一声不吭，也没有任何报错，
     所以它能一直躺在样式表里没人发现。
     补在 :root 这一处，20 处一起好——逐处去改就又是「只改了一部分」。 */
  --card: var(--panel-2);   /* 浮起的卡片/横幅底色，比 --panel 亮一档才分得开 */
  --tx: var(--text);        /* 正文色别名，按钮那批代码用的是这个名字 */
  --fg: var(--text);        /* 同上，第三批代码用的名字。三个名字指同一件事 */
  --amber: var(--blue);
  --line2: var(--line);     /* 次级分隔线 */
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

/* One shared palette for every mobile page. Profit and loss retain their
   separate semantic colours while the selected accent changes. */
:root[data-theme="jade"] {
  --bg: #071512; --bg-soft: #0b1e19; --panel: #10251f; --panel-2: #17342b;
  --line: rgba(105, 192, 161, .27); --line-strong: rgba(112, 220, 183, .58);
  --blue: #7adbb9; --green: #82e2a5; --red: #79baf0;
  --text: #eefaf2; --muted: #b0cbbd; --dim: #8ba99a;
  --topbar-bg: rgba(7, 21, 18, .96); --nav-bg: rgba(7, 21, 18, .97);
}
:root[data-theme="violet"] {
  --bg: #0d0c19; --bg-soft: #141326; --panel: #1a1930; --panel-2: #24213c;
  --line: rgba(164, 150, 214, .27); --line-strong: rgba(184, 162, 245, .58);
  --blue: #baa7f5; --green: #82dcb1; --red: #82b9f5;
  --text: #f3f0ff; --muted: #bbb4d2; --dim: #938bac;
  --topbar-bg: rgba(13, 12, 25, .96); --nav-bg: rgba(13, 12, 25, .97);
}
:root[data-theme="ember"] {
  --bg: #151218; --bg-soft: #1c181e; --panel: #231e25; --panel-2: #302930;
  --line: rgba(207, 167, 133, .27); --line-strong: rgba(232, 191, 147, .58);
  --blue: #edc28d; --green: #88d9a8; --red: #85b8ef;
  --text: #fff5e9; --muted: #d0beb2; --dim: #a79491;
  --topbar-bg: rgba(21, 18, 24, .96); --nav-bg: rgba(21, 18, 24, .97);
}
:root[data-layout="compact"] {
  --gap: 7px; --card-pad: 9px; --metric-pad: 9px; --radius: 7px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  /* a horizontally scrolling strip inside the page must never widen the page */
  overflow-x: hidden;
}

body {
  min-width: 320px;
  max-width: 100vw;
  overflow-x: clip;   /* clip, not hidden: with hidden on both html
     and body, mobile browsers promote body to the scroll container and
     position:fixed resolves against it — which is why the bottom nav drifted
     upward while scrolling the AI trading page.  clip stops the same
     horizontal overflow without creating that container. */
  color: var(--text);
  background: var(--panel);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans",
               "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: var(--fs-md);
  line-height: 1.5;
  /* hard guards against the vertical-text collapse class of bugs */
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  word-break: normal;
  overflow-wrap: anywhere;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
img, svg { max-width: 100%; }

/* every flex/grid child may shrink below content width — this is what stops
   text from being squeezed into one-character-per-line columns */
.row > *, .grid > *, .col > * { min-width: 0; }

/* ---------- AppLayout ---------- */
.app {
  width: min(100%, 720px);
  margin: 0 auto;
  padding: 0 14px calc(var(--nav-h) + 26px + env(safe-area-inset-bottom));
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  /* full-bleed bar, but the -14px pull is compensated in the padding so the
     content never extends past the viewport on a 375px screen */
  margin: 0 -14px 12px;
  width: calc(100% + 28px);
  max-width: calc(100% + 28px);
  box-sizing: border-box;
  padding: 10px max(14px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-top))
           max(14px, env(safe-area-inset-left));
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar .id { display: flex; align-items: center; gap: 9px; min-width: 0; }
.topbar .mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--panel);
  font-size: var(--fs-lg);
}
.topbar .name { min-width: 0; }
.topbar .name b { display: block; font-size: var(--fs-md); letter-spacing: .4px; white-space: nowrap; }
.topbar .name small { display: block; margin-top: 1px; color: var(--blue); font-size: var(--fs-md); white-space: nowrap; }
.topbar .live { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: var(--fs-md); white-space: nowrap; }

/* ---------- StatusChip / dot ---------- */
.dot { flex: 0 0 auto; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.dot.ok { background: var(--green); box-shadow: 0 0 8px rgba(87, 223, 162, .7); }
.dot.warn { background: var(--blue); box-shadow: 0 0 8px rgba(91, 158, 240, .6); }
.dot.bad { background: var(--blue); box-shadow: 0 0 8px rgba(91, 158, 240, .6); }
.dot.critical, .dot.emergency { background: var(--red); box-shadow: 0 0 8px rgba(240, 180, 91, .6); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: var(--fs-md);
  white-space: nowrap;
}
.chip.ok { border-color: rgba(87, 223, 162, .45); color: var(--green); }
.chip.warn { border-color: rgba(91, 158, 240, .45); color: var(--blue); }
.chip.bad { border-color: rgba(91, 158, 240, .45); color: var(--blue); }
.chip.critical, .chip.emergency { border-color: rgba(240, 180, 91, .45); color: var(--red); }
.chip.sim { border-color: rgba(91, 158, 240, .5); color: var(--blue); font-weight: 700; letter-spacing: .5px; }

/* ---------- section head ---------- */
.sect { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 18px 0 9px; }
.sect h2 { font-size: var(--fs-md); font-weight: 700; letter-spacing: .5px; white-space: nowrap; }
.sect span { color: var(--dim); font-size: var(--fs-md); text-align: right; }

/* ---------- Card ---------- */
.card {
  padding: var(--card-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
/* Spacing used to rely on adjacent-sibling selectors (.card + .card), which
   only fire when two panels of the SAME class sit next to each other.  Mixed
   sequences — a card after a grid, a carriage row after a card, a note after
   anything — got no gap at all and visually merged into one block.  Giving
   every panel its own bottom margin fixes every combination at once. */
.card, .car, .grid, .note, .tl, .meter { margin-bottom: var(--gap); }
.card:last-child, .car:last-child, .grid:last-child, .note:last-child { margin-bottom: 0; }
.sect + .card, .sect + .car, .sect + .grid, .sect + .note { margin-top: 0; }
.card > h3 { margin-bottom: 10px; font-size: var(--fs-md); font-weight: 700; }
.card .sub { color: var(--dim); font-size: var(--fs-md); }

/* Nested information stays flat: one section boundary, then aligned rows. */
.card .card,
.card .car,
.card .metric {
  padding: 9px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.card .card + .card,
.card .car + .car,
.card .metric + .metric { border-top: 1px solid var(--line); }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.grid.g1 { grid-template-columns: minmax(0, 1fr); }
.wide { grid-column: 1 / -1; }
.row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row.between { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* ---------- MetricCard ---------- */
.metric {
  padding: var(--metric-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.metric .k { color: var(--muted); font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric .v { margin-top: 5px; font-size: var(--fs-lg); font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; }
.metric .x { margin-top: 3px; color: var(--dim); font-size: var(--fs-md); }
.metric .v.blue { color: var(--blue); }
.metric .v.green { color: var(--green); }
.metric .v.red { color: var(--red); }
.metric .v.critical { color: var(--red); }
.metric .v.blue { color: var(--blue); }
.metric .v.small { font-size: var(--fs-md); }

/* ---------- key/value list ---------- */
.kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(148, 169, 196, .13); }
.kv:last-child { border-bottom: 0; padding-bottom: 0; }
/* the label must never be squeezed into a one-character-per-line column, no
   matter how long the value is; the value wraps instead */
.kv .k { flex: 0 0 auto; max-width: 45%; color: var(--muted); font-size: var(--fs-md); word-break: keep-all; }
.kv .v { flex: 1 1 0; min-width: 0; text-align: right; font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.kv .v.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: var(--fs-md); }

/* ---------- ServerCard ---------- */
.node { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px 0; border-bottom: 1px solid rgba(148, 169, 196, .13); }
.node:last-child { border-bottom: 0; padding-bottom: 0; }
.node b { display: block; font-size: var(--fs-md); }
.node small { display: block; margin-top: 2px; color: var(--dim); font-size: var(--fs-md); }

/* ---------- meters ---------- */
.meter { margin-top: 8px; }
.meter .lb { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; color: var(--muted); font-size: var(--fs-md); }
.bar { height: 5px; border-radius: 3px; background: rgba(94, 154, 208, .16); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 3px; background: var(--blue); }

/* ---------- price card ---------- */
.px { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.px .sym { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: var(--fs-md); }
.px .p { margin: 6px 0 3px; font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.px .c { font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.up { color: var(--green); } .down { color: var(--red); } .flat { color: var(--muted); }

/* ---------- spark chart ---------- */
.spark { width: 100%; height: 44px; display: block; margin-top: 8px; }
.chart { width: 100%; height: 150px; display: block; }

/* ---------- TradeCard ---------- */
.trade { padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.trade + .trade { margin-top: 8px; }
.trade .hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.trade .sym { font-size: var(--fs-md); font-weight: 700; }
.trade .pnl { font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.trade .meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin-top: 8px; }
.trade .meta div { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: var(--fs-md); }
.trade .meta b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.trade .id { margin-top: 7px; color: var(--dim); font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-md); }

/* ---------- RankingCard ---------- */
.rank { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(148, 169, 196, .13); }
.rank:last-child { border-bottom: 0; padding-bottom: 0; }
.rank .no { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: rgba(94, 154, 208, .16); font-size: var(--fs-md); font-weight: 700; }
.rank .no.top { background: var(--panel); color: #050a14; }
.rank b { display: block; font-size: var(--fs-md); }
.rank small { display: block; margin-top: 2px; color: var(--dim); font-size: var(--fs-md); }
.rank .sc { text-align: right; font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- CARCard / AgentCard ---------- */
.car { display: flex; gap: 11px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }

.car .ic { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(8, 16, 30, .85); border: 1px solid var(--line); font-size: var(--fs-lg); }
.car .bd { min-width: 0; flex: 1; }
.car .bd b { font-size: var(--fs-md); }
.car .bd p { margin-top: 5px; color: var(--muted); font-size: var(--fs-md); line-height: 1.6; }
.car .bd .tag { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- timeline ---------- */
.tl { position: relative; padding-left: 17px; }
.tl:before { content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 1px; background: var(--panel); }
.tl .ev { position: relative; padding-bottom: 15px; }
.tl .ev:last-child { padding-bottom: 0; }
.tl .ev:before { content: ""; position: absolute; left: -16px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 2px solid var(--blue); }
.tl .d { color: var(--blue); font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-md); }
.tl .t { margin: 3px 0 4px; font-size: var(--fs-md); font-weight: 700; }
.tl .x { color: var(--muted); font-size: var(--fs-md); line-height: 1.65; }

/* ---------- notice / empty ---------- */
.note { margin-top: var(--gap); padding: 11px 12px; border-left: 3px solid var(--blue); border-radius: 0 10px 10px 0; background: rgba(95, 216, 245, .07); color: var(--muted); font-size: var(--fs-md); line-height: 1.65; }
.note.warn { border-color: var(--blue); background: rgba(91, 158, 240, .07); }
.note.sim { border-color: var(--blue); background: rgba(91, 158, 240, .08); color: var(--blue); font-weight: 600; }
.empty { padding: 26px 0; color: var(--dim); text-align: center; font-size: var(--fs-md); }

/* ---------- subnav ---------- */
.subnav-legacy {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-width: 100%;
  overflow: hidden;
  margin: 0 0 12px;
  padding: 0 0 2px;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav button { flex: 0 0 auto; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: var(--fs-md); white-space: nowrap; }
.subnav button.on { border-color: var(--line-strong); color: var(--blue); background: rgba(95, 216, 245, .1); }

/* ---------- bottom nav ---------- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(7, 1fr);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.nav button { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 5px 1px; background: none; border: none; color: var(--dim);
  font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; cursor: pointer; transition: color .15s; }
.nav button i { display: block; margin-bottom: 3px; font-size: var(--fs-lg); font-style: normal; line-height: 1; }
.nav button.on { color: var(--blue); box-shadow: inset 0 2px var(--blue); }

/* System > Theme: one picker for all pages, with no extra stylesheet or font. */
.appearance-grid, .appearance-layouts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap);
}
.appearance-choice, .appearance-layout {
  min-width: 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--text); text-align: left;
}
.appearance-choice { position: relative; padding: 11px; }
.appearance-choice.selected, .appearance-layout.selected {
  border-color: var(--blue); background: var(--panel-2);
}
.appearance-choice:focus-visible, .appearance-layout:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}
.appearance-swatch {
  display: flex; align-items: end; gap: 5px; height: 45px; padding: 7px;
  border-radius: 6px; border: 1px solid rgba(255,255,255,.16);
}
.appearance-swatch i { display: block; width: 27%; height: 100%; border-radius: 3px; }
.appearance-swatch i:nth-child(2) { height: 72%; }
.appearance-swatch i:nth-child(3) { height: 50%; }
.swatch-ocean { background: #0d1a2d; }.swatch-ocean i { background: #5b9ef0; }
.swatch-jade { background: #10251f; }.swatch-jade i { background: #7adbb9; }
.swatch-violet { background: #1a1930; }.swatch-violet i { background: #baa7f5; }
.swatch-ember { background: #231e25; }.swatch-ember i { background: #edc28d; }
.appearance-copy { display: block; margin-top: 8px; }
.appearance-copy b, .appearance-layout b { display: block; font-size: var(--fs-md); }
.appearance-copy small, .appearance-layout small { display: block; color: var(--muted); font-size: var(--fs-sm); line-height: 1.35; }
.appearance-selected { position: absolute; top: 10px; right: 11px; color: var(--blue); font-size: var(--fs-lg); }
.appearance-layout { padding: 12px; min-height: 65px; }

/* ---------- council top panel ----------
   One canonical council payload, shown as a compact summary followed by the
   dated work log. Long solutions stay in the content column instead of
   squeezing the labels into narrow cells on a phone. */
.council-top-panel {
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel-2);
}
.council-panel-title,
.council-history-head,
.council-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.council-panel-title { padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.council-panel-title h2 { margin-top: 2px; font-size: var(--fs-lg); line-height: 1.25; }
.council-panel-title .sub,
.council-history-head > span { flex: 0 0 auto; color: var(--dim); font-size: var(--fs-sm); text-align: right; }
.eyebrow { color: var(--blue); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .8px; }
.council-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 12px 0 13px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.council-metrics .metric {
  min-height: 0;
  margin: 0;
  padding: 8px 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.council-metrics .metric .k,
.council-metrics .metric .v { font-size: var(--fs-md); }
.council-metrics .metric:last-child .v { line-height: 1.45; overflow-wrap: anywhere; }
.council-effect-note {
  padding: 9px 10px;
  border-left: 3px solid var(--blue);
  background: rgba(91, 158, 240, .08);
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.council-path-panel {
  margin-top: 13px;
  padding: 10px 0 5px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.council-path-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.council-path-head b { color: var(--text); font-size: var(--fs-md); }
.council-path-head span { color: var(--warn); font-size: var(--fs-sm); }
.council-path-track {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: center;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 3px 0 8px;
}
.council-path-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 3px 0;
  color: var(--muted);
  white-space: nowrap;
}
.council-path-step b {
  width: 100%;
  margin-top: 4px;
  overflow: hidden;
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.2;
  text-align: center;
  text-overflow: clip;
}
.council-path-step strong { margin-top: 2px; color: var(--blue); font-size: var(--fs-sm); line-height: 1; }
.council-path-dot {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--green);
  border-radius: 50%;
  background: var(--panel-2);
  box-sizing: border-box;
}
.council-path-link {
  position: absolute;
  z-index: 0;
  top: 7px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--green);
}
.council-path-step.partial .council-path-dot {
  border-color: var(--warn);
}
.council-path-step.partial .council-path-link {
  background: linear-gradient(90deg, var(--green) 0 40%, var(--warn) 40% 100%);
}
.council-path-step.blocked .council-path-dot {
  border-color: var(--red);
  background: rgba(248, 113, 113, .12);
}
.council-path-step.blocked .council-path-link { background: var(--red); }

.module-closure {
  margin: 0 0 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.module-panel {
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel-2);
}
.module-panel-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 4px;
}
.module-panel-grid .metric {
  min-width: 0;
  padding: 9px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.module-panel-grid .metric .k,
.module-panel-grid .metric .v {
  overflow: hidden;
  text-overflow: ellipsis;
}
.module-panel-grid .metric .v { overflow-wrap: anywhere; }
.module-closure-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: var(--fs-md);
}
.module-closure-head > div {
  min-width: 0;
}
.module-closure-head small,
.module-closure-head b,
.module-scope {
  display: block;
}
.module-closure-head small {
  margin-bottom: 3px;
  color: var(--blue);
  font-size: var(--fs-sm);
}
.module-closure-head b {
  color: var(--text);
  font-size: var(--fs-lg);
  line-height: 1.35;
}
.module-scope {
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 400;
  overflow-wrap: anywhere;
}
.module-live {
  flex: 0 1 45%;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
  text-align: right;
  overflow-wrap: anywhere;
}
.module-closure-head span { color: var(--muted); }
.module-panel-rule {
  margin: 9px 0 3px;
  padding: 9px 10px;
  border-left: 3px solid var(--blue);
  background: rgba(76, 139, 227, .10);
  color: var(--muted);
  font-size: var(--fs-md);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.module-closure-path {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.module-closure-step {
  position: relative;
  min-width: 0;
  color: var(--dim);
  text-align: center;
  font-size: var(--fs-sm);
}
.module-closure-step::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: var(--line);
}
.module-closure-step:last-child::after { display: none; }
.module-closure-step i {
  position: relative;
  z-index: 1;
  display: block;
  width: 8px;
  height: 8px;
  margin: 0 auto 5px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
}
.module-closure-step b {
  display: block;
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
}
.module-closure-step strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--blue);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.module-closure-step.done { color: var(--text); }
.module-closure-step.done i,
.module-closure-step.done::after { border-color: var(--green); background: var(--green); }
.module-closure-note {
  margin-top: 7px;
  color: var(--dim);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
.module-path-summary {
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.module-details {
  padding-top: 10px;
}
.module-detail-item {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0 2px;
  border-top: 1px solid var(--line);
}
.module-detail-date {
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.5;
}
.module-detail-body {
  min-width: 0;
}
.module-detail-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  color: var(--text);
  font-size: var(--fs-md);
  line-height: 1.5;
}
.module-detail-title b {
  min-width: 0;
  overflow-wrap: anywhere;
}
.module-detail-meta {
  display: grid;
  gap: 4px;
  margin-top: 7px;
  color: var(--muted);
  font-size: var(--fs-md);
  line-height: 1.45;
}
.module-detail-meta > div {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 7px;
}
.module-detail-meta span {
  color: var(--dim);
}
.module-detail-meta strong {
  min-width: 0;
  color: var(--muted);
  font-weight: 400;
  overflow-wrap: anywhere;
}
.module-data-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: 8px;
  color: var(--blue);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
@media (max-width: 390px) {
  .module-panel { padding: 11px 8px; }
  .module-panel-grid .metric { padding-left: 3px; padding-right: 3px; }
  .module-panel-grid .metric .k,
  .module-panel-grid .metric .v { font-size: var(--fs-md); }
  .module-detail-item { grid-template-columns: 70px minmax(0, 1fr); gap: 7px; }
  .module-live { max-width: 42%; }
}
.council-history-head { margin: 16px 0 8px; }
.council-history-head h3 { font-size: var(--fs-md); }
.council-days { display: grid; gap: 8px; }
.council-day {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.council-day summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px;
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.council-day summary::-webkit-details-marker { display: none; }
.council-day summary::before {
  content: "+";
  flex: 0 0 16px;
  color: var(--blue);
  font-size: var(--fs-lg);
  line-height: 1;
  order: 2;
  text-align: center;
}
.council-day[open] summary::before { content: "-"; }
.council-day summary > span { min-width: 0; }
.council-day summary small {
  min-width: 0;
  margin-left: auto;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: right;
}
.council-day-list { display: grid; gap: 0; padding: 0 8px 8px; }
.council-item {
  padding: 10px 2px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.council-item-head b { min-width: 0; color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.council-item-head .chip { flex: 0 0 auto; font-size: var(--fs-sm); }
.council-item h4 { margin: 8px 0 7px; font-size: var(--fs-md); line-height: 1.5; }
.council-meta {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 7px;
  margin-top: 5px;
  font-size: var(--fs-md);
  line-height: 1.5;
}
.council-meta span { color: var(--dim); }
.council-meta strong { min-width: 0; color: var(--muted); font-weight: 500; overflow-wrap: anywhere; }
.council-id {
  margin-top: 8px;
  color: var(--dim);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.foot { padding: 18px 0 8px; color: var(--dim); text-align: center; font-size: var(--fs-md); line-height: 1.8; }

@media (max-width: 359px) {
  :root { --gap: 8px; }
  .app { padding-left: 11px; padding-right: 11px; }
  .metric .v { font-size: var(--fs-md); }
  .trade .meta { grid-template-columns: minmax(0, 1fr); }
}
.brand-by { font-size: var(--fs-sm); color: var(--dim); letter-spacing: 2px; margin-left: 6px; }

.wlist { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; }
.wrow { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line2); min-width: 0; }
.wrow:last-child { border-bottom: none; }
.wrow .ws { flex: 0 0 auto; font-weight: 700; font-size: var(--fs-md); min-width: 86px; }
.wrow .wp { flex: 1; text-align: right; font-family: var(--mono); font-size: var(--fs-md); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wrow .wc { flex: 0 0 74px; text-align: right; font-family: var(--mono); font-size: var(--fs-md); }
.ctlbtn { display: block; width: 100%; margin-bottom: 10px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--tx); font-size: var(--fs-md); font-weight: 700; cursor: pointer; }
.ctlbtn.danger { border-color: rgba(91,158,240,.5); color: var(--blue); }
.ctlbtn.go { border-color: rgba(52,211,153,.5); color: var(--green); }

/* Topbar containment — mirror the bottom nav: stay inside the viewport, never
   push the page wider than the screen on a 375px phone. */
.topbar { max-width: 100%; box-sizing: border-box; overflow: hidden; gap: 8px; }
.topbar .id { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.topbar .name { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.topbar .name b,
.topbar .name small { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.topbar .mark { flex: 0 0 auto; }
.topbar .live { flex: 0 0 auto; max-width: 42%; overflow: hidden; text-overflow: ellipsis; }
.brand-by { white-space: nowrap; }
@media (max-width: 400px) {
  .topbar .name small { font-size: var(--fs-sm); }
  .topbar .live { font-size: var(--fs-sm); max-width: 34%; }
  .brand-by { display: none; }
}

/* sub-nav wraps to as many rows as it needs.  Horizontal scrolling was
   rejected because it fought the swipe gesture, and a single non-wrapping row
   crushed fifteen items into 375px.  Five per row, wrapping, is the only
   arrangement left that stays legible. */
.subnav {
  display: flex;
  flex-wrap: wrap;
  overflow-x: visible;
  gap: 5px;
  padding: 2px 0 10px;
}
.subnav button {
  flex: 0 0 calc(20% - 4px);
  min-width: 0;
  padding: 9px 2px;
  font-size: var(--fs-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 390px) {
  .subnav { gap: 4px; }
  .subnav button { flex: 0 0 calc(20% - 4px); font-size: var(--fs-sm); padding: 8px 1px; }
}

/* manual refresh control */
.refresh {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin-right: 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--blue);
  font-size: var(--fs-md);
  line-height: 1;
  cursor: pointer;
}
.refresh:disabled { opacity: .5; }


/* ---------- 任务包046 人工交易控制中心 ---------- */
/* Order buttons are deliberately full-width and far apart: a mis-tap here
   costs money, unlike everywhere else in this app. */
.act-row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.act {
  flex: 1 1 130px; padding: 13px 10px; border-radius: 10px; font-size: var(--fs-md);
  font-weight: 700; border: 1px solid var(--line-strong); cursor: pointer;
  background: rgba(95, 216, 245, .12); color: var(--blue);
}
.act.go { background: rgba(52, 211, 153, .16); color: #57dfa2; border-color: #57dfa2; }
.act.warn { background: rgba(91, 158, 240, .14); color: var(--blue); border-color: var(--blue); }
.act.ghost { background: none; color: var(--muted); }
.act.off, .act:disabled { background: none; color: var(--dim); border-color: var(--line);
                          cursor: not-allowed; }
/* The owner asked for the thin bars back.  A 22px bar reads as a button
   and competes with the number beside it; 6px reads as a measurement. */
/* The score meter.  It used to be called .meter, which was already taken by the
   carriage page's label-and-bar container — my rule came later in the file, won,
   and clipped that page's numbers out of a six-pixel box.  Distinct name now. */
.smeter { position: relative; height: 6px; border-radius: 999px;
          background: rgba(255, 255, 255, .06); margin: 22px 0 14px; }
.smeter i { position: absolute; left: 0; top: 0; bottom: 0; display: block;
            border-radius: 999px; }
.smeter i.up { background: rgba(52, 211, 153, .55); }
.smeter i.blue { background: rgba(95, 216, 245, .55); }
.smeter i.blue { background: rgba(91, 158, 240, .5); }
.smeter i.dim { background: rgba(255, 255, 255, .14); }
.smeter b { position: absolute; right: 0; top: -18px; font-size: var(--fs-md); }
.tl-head { margin-bottom: 6px; font-size: var(--fs-md); }
.tl-head .chip { margin-left: 4px; }


/* ---------- 机会卡片：一个框，一行说完 ---------- */
.opp { border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px;
       margin-bottom: var(--gap); }
.opp-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.opp-sym { font-size: var(--fs-md); }
.opp-score { margin-left: auto; font-size: var(--fs-lg); font-weight: 800; }
.opp-score.up { color: #57dfa2; }
.opp-score.blue { color: var(--blue); }
.opp-score.blue { color: #5b9ef0; }
.opp-detail { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.opp .act-row { margin-top: 10px; }
.opp .act { flex: 1 1 0; padding: 11px 6px; font-size: var(--fs-md); }


/* ---------- 安全中心表单 ---------- */
.secform { display: flex; flex-direction: column; gap: 9px; margin: 12px 0 4px; }
.secform input {
  padding: 12px 13px; border-radius: 10px; font-size: var(--fs-md);
  border: 1px solid var(--line); background: rgba(255, 255, 255, .04);
  color: var(--fg);
}
.secform input:focus { border-color: var(--line-strong); outline: none; }


/* ---------- 车厢闭环：一节一条进度条 ---------- */
.carbar { border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 12px 9px; margin-bottom: 9px;
  background: rgba(255, 255, 255, .02); }
.module-card { border-left: 3px solid var(--line-strong); }
.module-card.has-alarm { border-left-color: var(--red); }
.module-status { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 3px; }
.status-chip { display: inline-block; padding: 2px 7px; border: 1px solid var(--line);
  border-radius: 4px; color: var(--muted); font-size: var(--fs-md); line-height: 1.35; }
.status-chip.ok { border-color: rgba(87,223,162,.5); color: var(--green); }
.status-chip.notice { border-color: rgba(242,198,109,.55); color: var(--amber); }
.status-chip.info { border-color: rgba(91,158,240,.45); color: var(--blue); }
.status-chip.alarm { border-color: rgba(240,113,113,.7); color: var(--red); }
.module-status-note { color: var(--dim); font-size: var(--fs-md); line-height: 1.45;
  overflow-wrap: anywhere; }
.system-alarm-list { margin-bottom: var(--gap); }
.system-alarm { padding: 10px 12px; border-left: 3px solid var(--amber);
  background: rgba(242,198,109,.08); }
.system-alarm.critical { border-left-color: var(--red); background: rgba(240,113,113,.08); }
.system-alarm + .system-alarm { margin-top: 6px; }
.system-alarm b { font-size: var(--fs-md); }
.carflow { display: flex; flex-wrap: wrap; gap: 7px; margin: 7px 0 2px; }
.carflow span { font-size: var(--fs-md); border-radius: 999px; padding: 2px 9px;
  background: rgba(255, 255, 255, .05); color: var(--muted); }
.carflow .in { color: #5b9ef0; background: rgba(125, 211, 252, .12); }
.carflow .out { color: #57dfa2; background: rgba(52, 211, 153, .12); }
.trust-row { margin-bottom: 11px; }
.trust-why { font-size: var(--fs-md); color: var(--muted); margin-top: 3px;
  line-height: 1.55; }
.mrow { display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  margin: 8px 0; font-size: var(--fs-md); }
.mrow b { font-size: var(--fs-md); color: var(--blue); }
.learn-line .down { color: var(--red); }


/* ---------- 一行一卡：首页学习板块与车厢闭环共用 ---------- */
/* 原来是四列表，长中文句子被挤进九十像素宽的格子，一个字一行。 */
.learn-card { border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 13px 11px; margin-bottom: 10px;
  background: rgba(255, 255, 255, .02); }
.learn-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.learn-num { font-size: var(--fs-lg); font-weight: 800; color: var(--blue);
  line-height: 1; letter-spacing: -.5px; }
.learn-name { font-size: var(--fs-md); font-weight: 700; }
.learn-today { margin-left: auto; font-size: var(--fs-md); color: #57dfa2;
  background: rgba(52, 211, 153, .12); border-radius: 999px; padding: 2px 9px; }
.learn-card .bar { margin: 9px 0 2px; }
.learn-line { margin-top: 9px; font-size: var(--fs-md); line-height: 1.62;
  color: var(--fg); word-break: break-word; }
.learn-line.sub { color: var(--muted); font-size: var(--fs-md); margin-top: 5px; }
.learn-line b { font-weight: 700; }
.learn-line.up b { color: #57dfa2; }
.learn-line.blue b { color: #5b9ef0; }
.learn-line.down, .learn-line.down b { color: var(--red); }
.learn-line i { display: inline-block; font-style: normal; font-size: var(--fs-sm);
  color: var(--dim); background: rgba(255, 255, 255, .05);
  border-radius: 5px; padding: 1px 7px; margin-right: 8px; vertical-align: 1px; }


/* ---------- 一条龙台账：五段横排 ---------- */
.stages { display: flex; align-items: stretch; gap: 4px; margin: 10px 0 4px; }
.stg { flex: 1; border: 1px solid var(--line); border-radius: 9px;
  padding: 7px 6px 6px; text-align: center; min-width: 0; }
.stg.ok { border-color: rgba(52, 211, 153, .35);
  background: rgba(52, 211, 153, .06); }
.stg.brk { border-color: rgba(91, 158, 240, .5);
  background: rgba(91, 158, 240, .09); }
.stg .sv { font-size: var(--fs-lg); font-weight: 800; line-height: 1.15; }
.stg.ok .sv { color: #57dfa2; }
.stg.brk .sv { color: var(--blue); }
/* 9-24：量不到（后端写 UNKNOWN）——虚线框、暗色，既不是绿也不是断点蓝。 */
.stg.unk { border-style: dashed; border-color: var(--dim); }
.stg.unk .sv { color: var(--dim); font-size: var(--fs-md); }
.stg .sk { font-size: var(--fs-sm); color: var(--muted); margin-top: 1px; }
.stg .sh { font-size: var(--fs-sm); color: var(--dim); line-height: 1.35;
  margin-top: 3px; word-break: break-word; }
.arw { align-self: center; color: var(--dim); font-size: var(--fs-md); }
.learn-today.bad { color: var(--blue); background: rgba(91, 158, 240, .12); }


/* ---------- 议事会的确认按钮 ---------- */
.btnrow { display: flex; gap: 9px; margin-top: 11px; }
.btnrow .btn { flex: 1; padding: 10px 8px; border-radius: 9px;
  border: 1px solid var(--line); font-size: var(--fs-md); font-weight: 600;
  background: rgba(255, 255, 255, .04); color: var(--fg); }
.btnrow .btn.ok { border-color: rgba(52, 211, 153, .5); color: #57dfa2;
  background: rgba(52, 211, 153, .1); }
.btnrow .btn.no { border-color: rgba(91, 158, 240, .45); color: var(--blue);
  background: rgba(91, 158, 240, .08); }
.btnrow .btn:disabled { opacity: .55; }
.learn-line.blue { color: var(--fg); }
.learn-line.blue i { color: #5b9ef0; }


/* ---------- 空值旁边的原因 ---------- */
.whyempty { display: block; font-size: var(--fs-sm); color: var(--dim);
  line-height: 1.5; margin-top: 2px; }
.whyempty.bad { color: var(--blue); }


/* ---------- 提交中与已完成 ---------- */
.btnrow .pending { flex: 1; text-align: center; padding: 10px 8px;
  font-size: var(--fs-md); color: var(--muted); }
.btnrow .done { flex: 1; text-align: center; padding: 10px 8px;
  font-size: var(--fs-md); font-weight: 600; color: #57dfa2;
  background: rgba(52, 211, 153, .1); border-radius: 9px;
  border: 1px solid rgba(52, 211, 153, .4); }

/* V077-C child view: the rail is a compact status projection, not the root
   application.  Blue means observed/waiting; green means PASS; red is reserved
   for critical or loss states. */
.rail-card { padding: 11px 12px; }
.rail { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; margin: 10px 0 6px; }
.rail span { height: 7px; border-radius: 3px; background: rgba(91, 158, 240, .22); }
.rail span.rail-done { background: var(--green); }
.rail span.rail-empty { background: rgba(91, 158, 240, .28); }
.rail-card p { color: var(--muted); font-size: var(--fs-md); }
.truth-closed { color: var(--green); font-weight: 700; }
.truth-blocked { color: var(--blue); font-size: var(--fs-md); }
.closure-summary .metric { min-width: 0; }


/* V078-V 闭环状态：红/绿直接显示当前车厢真假，文案另行说明是否涉及盈利。 */
.cl-badge { display: inline-block; padding: 1px 7px; border-radius: 3px;
            font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em; }
.cl-current    { color: var(--green); border: 1px solid var(--green); }
.cl-historical { color: var(--blue);  border: 1px solid var(--blue); }
.cl-technical  { color: var(--fg);    border: 1px solid var(--line); opacity: .85;
                 font-weight: 600; }
.cl-partial    { color: var(--muted); border: 1px solid var(--line);
                 font-weight: 600; }
.cl-red        { color: var(--red); border: 1px solid var(--red);
                 font-weight: 600; }
.cl-pending    { color: #f2c66d; border: 1px solid #f2c66d;
                 font-weight: 600; }

.thirteen-gates { margin: 14px 0; padding: 13px 15px; border-left: 3px solid var(--blue);
  background: rgba(91, 158, 240, .07); }
.thirteen-gates-title { color: var(--fg); font-size: var(--fs-lg); font-weight: 800; }
.thirteen-gates p { margin: 7px 0 10px; }
.thirteen-gates ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 22px; margin: 0; padding-left: 21px; }
.thirteen-gates li { color: var(--fg); min-width: 0; padding-left: 2px; }
.thirteen-gates li::marker { color: var(--blue); font-weight: 800; }
.thirteen-gates li span { display: block; color: var(--muted); font-size: var(--fs-sm); }

@media (max-width: 640px) {
  .thirteen-gates ol { grid-template-columns: 1fr; gap: 5px; }
}


/* ---------- 系统警报横幅：悬在底部导航上方，永不遮挡导航 ---------- */
#alarm-banner {
  /* 8-20 老瞿「为什么警告窗口拉这么长」：原来只写 left/right 各 12px，
     手机上刚好，电脑宽屏上就被拉成贯穿整屏的一条横幅，又长又空。
     改成留 12px 边距的同时限宽并居中——手机上仍是满宽，宽屏上是一张卡片。 */
  position: fixed; left: 12px; right: 12px;
  width: auto; max-width: 520px; margin-inline: auto;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px);
  z-index: 25; /* 横幅永远压不住底部主菜单 */
  /* 背景显式给死色，不只靠变量：这个窗一旦透明就会盖住下面的数字，
     是所有元素里最不能容忍透明的一个。 */
  background: #112238; border: 1px solid var(--red); border-radius: 14px;
  max-height: 42vh; overflow-y: auto;
  padding: 12px 14px; box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
#alarm-banner .ab-t { font-weight: 800; color: var(--red); margin-bottom: 6px; font-size: var(--fs-md); }
/* 原来是 nowrap + ellipsis，一行截断——老瞿只看得到「systemd 单元…」，
   等于告诉他「出事了但不告诉你出什么事」。告警的全部价值就在被截掉的那半句。
   改成换行显示，颜色也从 --muted 提到正文色。 */
#alarm-banner .ab-l { color: var(--text); font-size: var(--fs-md); line-height: 1.55;
  margin: 3px 0; word-break: break-word; }
#alarm-banner .ab-btns { display: flex; gap: 8px; margin-top: 10px; }
#alarm-banner .ab-btns button { flex: 1; padding: 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel); color: var(--tx);
  font-size: var(--fs-md); font-weight: 700; cursor: pointer; }
#alarm-banner #ab-go { border-color: var(--red); color: var(--red); }

/* 七格：数字在上、字在下（老瞿 2026-08-15 设计） */
.seven { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 8px 0 2px; }
.seven .cell { text-align: center; padding: 4px 0; border-radius: 8px; background: rgba(255,255,255,0.03); }
.seven .n { font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; color: var(--text, #e6edf7); }
.seven .n small { font-size: var(--fs-sm); font-weight: 500; margin-left: 1px; color: var(--muted); }
.seven .l { font-size: var(--fs-sm); margin-top: 2px; }
.seven .l.ok { color: var(--green); }
.seven .l.bad { color: var(--red); font-weight: 600; }
.seven .l.na { color: var(--dim); }
.seven-why { font-size: var(--fs-sm); color: var(--muted); margin: 2px 0 4px; line-height: 1.5; }
.seven-why b { margin-right: 2px; }

.seven-head { margin: 6px 0 4px; }
.seven-head .n { font-size: var(--fs-md); }
.seven-head .ok { color: var(--green); }
.seven-head .bad { color: var(--red); }
.seven-head .na { color: var(--dim); }

/* 盈亏日历（8-17）：控件行 + 七列格子；正绿负红；字号与其它面板一致，不放大 */
.cal-ctl { display:flex; gap:6px; align-items:center; margin:6px 0 8px; flex-wrap:wrap; }
.cal-btn { background:rgba(255,255,255,.06); color:var(--fg,#e6ecf5); border:1px solid rgba(255,255,255,.12);
  border-radius:8px; padding:6px 10px; font-size: var(--fs-md); }
.cal-btn.on { background:rgba(91,158,240,.22); border-color:var(--blue); color:#fff; }
.cal-sel { background:rgba(255,255,255,.06); color:var(--fg,#e6ecf5); border:1px solid rgba(255,255,255,.12);
  border-radius:8px; padding:6px 8px; font-size: var(--fs-md); }
.cal-week { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin:6px 0 4px; }
.cal-week span { text-align:center; font-size: var(--fs-sm); opacity:.6; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-grid i { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:44px;
  border-radius:8px; background:rgba(255,255,255,.04); font-style:normal; padding:3px 0; }
.cal-grid i em { font-style:normal; font-size: var(--fs-sm); opacity:.7; }
.cal-grid i b { font-size: var(--fs-sm); font-weight:600; line-height:1.15; }
.cal-grid i small { font-size: var(--fs-sm); opacity:.6; }
.cal-grid i.up { background:rgba(87,223,162,.16); }
.cal-grid i.up b { color:var(--green); }
.cal-grid i.down { background:rgba(240,180,91,.16); }
.cal-grid i.down b { color:var(--red); }

/* 每节车厢的结果行（8-17）：字号与七格一致，不放大；灰字为主，升绿降红 */
.outcome-line { display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:6px; padding-top:6px;
  border-top:1px solid rgba(255,255,255,.06); font-size: var(--fs-sm); color:var(--muted,#8b96a8); }
.outcome-line span.up { color:var(--green); } .outcome-line span.down { color:var(--red); }


/* 8-18 期权中枢：宽表在自己的容器里横向滚动，页面主体永远不横滚 */
.tblwrap { width: 100%; overflow: hidden; margin: 8px 0; border: 0; border-radius: 0; }
.tbl { border-collapse: collapse; width: 100%; min-width: 0; table-layout: fixed; font-size: var(--fs-md); }
.tbl th {
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
.tbl td { padding: 8px 6px; vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
.tbl td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: top; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tr.down td { background: rgba(240,180,91,.06); }
.optul { margin: 6px 0 0; padding-left: 18px; }
.optul li { margin: 4px 0; color: var(--dim); font-size: var(--fs-md); line-height: 1.7; }
.sub.warnx { color: #e0a44a; }


/* 8-18 车厢显示序号 001…106：序号在前、CAR 号殿后作对账 */
.carno { display: inline-block; min-width: 2.6em; padding: 1px 6px; margin-right: 2px;
         border-radius: 5px; background: rgba(45,212,191,.14); color: #2dd4bf;
         font-variant-numeric: tabular-nums; font-weight: 800; font-size: var(--fs-md); }
.carid { color: var(--dim); font-weight: 500; font-size: var(--fs-sm); margin-left: 4px; }

/* ---------- 长文值：上下堆叠 ----------
   .kv 是「左标签 + 右对齐值」的指标行，只适合短数字。
   往里塞长中文（比如「CAR-360 · 缺口 16723 · 2026-08-18 06:16」）时，
   右对齐会把它拧成一团参差的碎块，375px 屏上尤其难读。
   长值改成标签在上、内容在下、左对齐通栏——读起来是一行行完整的话。 */
.kv.stack { display: block; padding: 9px 0; }
.kv.stack .k { display: block; max-width: 100%; margin-bottom: 3px;
               font-size: var(--fs-md); letter-spacing: .3px; color: var(--dim); }
.kv.stack .v { display: block; text-align: left; font-size: var(--fs-md); line-height: 1.6;
               word-break: break-word; }
/* 段标题原来 nowrap，长标题会顶出屏幕 */
.sect h2 { white-space: normal; }
.sect { flex-wrap: wrap; }
.sect span { flex: 1 1 auto; }
/* 小节之间给点呼吸，一屏里能分得清层次 */
.sect { margin: 22px 0 10px; }
.note { margin-top: 12px; }






/* 8-18 老瞿：顶部菜单一排 7 个，不要框框，菜单之间加深色线区分。
   原来是圆角框横排，27 个页在手机上折成四五行还带横向滚动；
   改成七列等宽网格后 27 个整齐排四行，去掉边框每格省 26px 横向。
   选中只靠颜色加下划线——加回边框就等于把省下的空间还回去。 */
.subnav {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 0; overflow: visible; margin: 0 -14px 12px; padding: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.subnav button {
  flex: none; min-height: 44px; padding: 9px 1px; border: none; border-radius: 0;
  background: none; color: var(--dim); font-size: var(--fs-md); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.subnav button:nth-child(7n) { border-right: none; }
.subnav button.on {
  color: var(--blue); background: rgba(95, 216, 245, .08); font-weight: 700;
}


/* 8-18 老瞿：仅观察里的红色改灰色。
   「只观察」是还没验够，不是出了错——红色把「等证据」说成了「有故障」，
   一眼扫过去会以为一堆策略坏了。灰色才是它真实的状态：中性、待定。 */
.learn-line.hold { color: var(--dim); }
.learn-line.hold i { color: var(--muted); }


/* 8-18 老瞿：字体大小全部统一。四档，不再有 0.5px 的差别——
   那种差人眼看不出，只让整页显得毛糙。
   20px 大标题 / 18px 标题 / 15px 小标题 / 14px 正文 / 12px 密集与长文。
   文字特别多的地方（长说明、脚注、表格密集列）走 12px。 */
:root { --fs-title: 18px; --fs-sub: 15px; --fs-body: 14px; --fs-dense: 12px; }
.sub, .note, .kv .v.mono, .learn-line.sub { font-size: var(--fs-sm); }


/* 8-18 老瞿：车厢状态里的椭圆外框全部去掉。
   一屏几十个状态芯片，每个都套一圈 999px 圆角边框，密密麻麻全是圈，
   反而看不清里面的字。去掉框只留颜色——颜色本来就够区分状态，
   边框在这里不传递任何额外信息，只占地方。 */
.car .chip,
.car-status .chip,
.carriage .chip,
#view .car .chip {
  border: none;
  border-radius: 4px;
  padding: 2px 6px;
  background: transparent;
}
.car .chip.ok { color: var(--green); }
.car .chip.warn { color: var(--amber); }
.car .chip.critical, .car .chip.bad { color: var(--red); }


/* 8-19 老瞿：所有说明里面红色去掉。
   说明文字是解释，不是警报。红色要留给真正该警觉的数字——
   到处都红，人就不看红色了，那等于把警报关掉。 */
.note, .note *, .sub, .sub *, .x, .learn-line.sub,
.card > p.sub, .empty, .hint, .desc {
  color: var(--dim) !important;
}
.note.warn { color: var(--dim) !important; border-left-color: var(--amber); }
.note.sim { color: var(--dim) !important; border-left-color: var(--blue); }
/* 数字本身该红还是红——这里只管说明文字 */
.metric .v.red, .kv .v.red, span.down, span.red { color: var(--red) !important; }

/* 累计盈亏曲线（8-20）。高度写死，避免它在窄屏上被压成一条线。 */
.ddchart{width:100%;height:120px;display:block;margin:6px 0;}


/* ---------- 表格（8-25 老瞿：「排版好看一点，居中不要全部挤在一起」）----------
   .kv 本来是 display:flex 的「左标签+右值」指标行。但 app.js 里有 3 处写的是
   <table class="kv">，于是整个 table 被变成 flex 容器——<tr> 成了横向 flex item，
   <td> 完全不对齐，研究院那张表就挤成「期权回测研究院8 可回测池按标的2.0 小时前」。
   这里给 table.kv 单独恢复表格布局，不碰另外 9 处 div.kv。 */
table.kv {
  display: table; width: 100%; border-collapse: collapse;
  border-bottom: 0; padding: 0; margin: 2px 0 0;
  font-variant-numeric: tabular-nums;
}
table.kv tr { border-bottom: 1px solid rgba(148, 169, 196, .13); }
table.kv tr:last-child { border-bottom: 0; }
table.kv th, table.kv td {
  padding: 9px 10px; font-size: var(--fs-md); vertical-align: middle;
  line-height: 1.5;
}
table.kv th {
  color: var(--dim); font-weight: 600; letter-spacing: .3px;
  border-bottom: 1px solid rgba(148, 169, 196, .22);
  white-space: nowrap;
}
/* 第一列是名字，左对齐；中间的数值列居中；最后一列（时间/变化）右对齐。
   老瞿要的「居中」指的是数值列——名字左对齐才读得顺。 */
table.kv th:first-child, table.kv td:first-child {
  text-align: left; padding-left: 0; width: 40%;
}
table.kv th:nth-child(2), table.kv td:nth-child(2) { text-align: center; }
table.kv th:last-child, table.kv td:last-child {
  text-align: right; padding-right: 0; white-space: nowrap;
}
/* 数字与它后面的单位分开，不再糊成一团 */
table.kv td .sub { margin-left: 5px; color: var(--dim); font-size: var(--fs-sm); }

/* 9-20 老瞿：数值表要排工整——列宽平均分配、居中、等宽数字、不换行。
   only for short numeric tables (最近10天 两处)；长文本表仍用默认 .tbl（要换行）。 */
.tbl.even { table-layout: fixed; width: 100%; }
.tbl.even th, .tbl.even td {
  width: auto;
  padding: 7px 1px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  font-variant-numeric: tabular-nums;
  /* 比例字体 + tabular-nums：数位一样对齐，但比等宽字体窄，7 列里 "+1420.3" 也放得下 */
  font-family: inherit;
  font-size: var(--fs-sm);
}
.tbl.even td.mono { font-family: inherit; }
/* 表头允许换行（"权利金回报%"比一列宽），正文数字不换行 */
.tbl.even th { font-family: inherit; font-size: var(--fs-sm); white-space: normal; overflow-wrap: anywhere; line-height: 1.2; vertical-align: bottom; }

/* ====== 9-20 老瞿："系统排版总是一团糟，空的地方很空，好多挤在一起" ======
   第一批全站规则，只动公共容器，不动业务代码。 */

/* 表格：数值列一律不换行、列宽固定分配；第一列（名字）允许换行。
   之前 "411.8 USDT" 在窄列里被拆成四行、"+31857" 被拆成两行，就是这里没约束。 */
table.kv { table-layout: fixed; }
table.kv th:first-child, table.kv td:first-child { width: 36%; white-space: normal; overflow-wrap: anywhere; }
table.kv td:not(:first-child) { white-space: nowrap; overflow: hidden; text-overflow: clip; }
table.kv th, table.kv td { padding: 8px 6px; }
.tbl td:not(:first-child) { white-space: nowrap; overflow: hidden; text-overflow: clip; text-align: center; font-variant-numeric: tabular-nums; }
.tbl th:not(:first-child) { text-align: center; }
.tbl td:first-child { white-space: normal; overflow-wrap: anywhere; }

/* 区块标题：长说明换行到标题下面、左对齐 */
.sect.long { display: block; }
.sect.long h2 { display: block; }
.sect.long span.sub { display: block; text-align: left; margin-top: 3px; color: var(--dim); font-size: var(--fs-sm); line-height: 1.5; }

/* 子导航：按钮文字不截断（列数已按实际个数平分），字号略收以放下四字标签 */
.subnav button { text-overflow: clip; padding: 9px 0; }

/* 指标格：标签不用省略号截断，允许两行 */
.metric .k { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }

/* T31: compact transaction rows; full symbol, PnL and action stay on screen. */
.real-simple-view{width:100%;min-width:0}
.real-simple-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:16px 0 8px}
.real-simple-heading h2{font-size:16px;margin:0}
.real-simple-heading>span{font-size:11px;color:var(--muted,#8c9aaa)}
.real-simple,.real-simple-history{width:100%;table-layout:fixed;border-collapse:collapse}
.real-simple .real-pnl-col{width:86px}
.real-simple .real-action-col{width:112px}
.real-simple th,.real-simple td,.real-simple-history th,.real-simple-history td{height:40px;padding:4px 3px;border-bottom:1px solid rgba(130,155,180,.16);vertical-align:middle;white-space:nowrap;text-align:left;letter-spacing:0}
.real-simple td{height:52px}
.real-simple th,.real-simple-history th{height:28px;font-size:11px;color:var(--muted,#8c9aaa);font-weight:400}
.real-simple td:first-child,.real-simple-history td:first-child{font-family:monospace;font-size:12px}
.real-simple td:nth-child(2),.real-simple th:nth-child(2),.real-simple-history td:nth-child(2){text-align:right;font-size:12px;font-variant-numeric:tabular-nums}
.real-simple td:last-child,.real-simple th:last-child{text-align:right}
.real-simple button.act{width:52px;height:30px;min-height:30px;margin:0;padding:0 4px;border-radius:4px;font-size:12px}
.real-simple button.act[data-ro^="close"]{width:104px;height:44px;min-height:44px;font-size:14px}
.real-simple td:first-child{overflow:hidden;text-overflow:ellipsis}
.real-simple .muted{color:var(--muted,#8c9aaa)}
.real-simple-more{border-top:1px solid rgba(130,155,180,.16);margin-top:16px}
.real-simple-more>summary{padding:12px 0;font-size:12px;cursor:pointer}
.real-simple-history td{font-size:11px}