:root {
  --bg: #0b0e14;
  --bg-soft: #111621;
  --bg-elev: #151c28;
  --line: #232c3d;
  --line-soft: #1b2330;
  --fg: #e6ebf4;
  --fg-dim: #8d99ae;
  --fg-faint: #5d6878;
  --accent: #4c9aff;
  --accent-soft: rgba(76, 154, 255, 0.14);
  --up: #2ecc8f;
  --down: #f0616d;
  --warn: #f0a952;
  --radius: 12px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* ---------- top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(11, 14, 20, 0.86);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
  padding: 14px 28px 0;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(140deg, var(--accent), #7b61ff);
  box-shadow: 0 4px 14px rgba(76, 154, 255, 0.3);
}
.brand h1 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: .2px; }
.brand p { margin: 2px 0 0; font-size: 11px; color: var(--fg-faint); }

.tabs { display: flex; gap: 4px; margin-top: 14px; flex-wrap: wrap; }
.tabs button {
  background: none; border: none; cursor: pointer;
  color: var(--fg-dim); font-size: 13.5px; font-family: inherit;
  padding: 9px 14px; border-radius: 8px 8px 0 0;
  border-bottom: 2px solid transparent; transition: color .15s, background .15s;
}
.tabs button:hover { color: var(--fg); background: var(--bg-soft); }
.tabs button.active { color: var(--fg); border-bottom-color: var(--accent); }

/* ---------- layout ---------- */
.main { max-width: 1240px; margin: 0 auto; padding: 26px 28px 80px; }
.loading { color: var(--fg-dim); padding: 60px 0; text-align: center; }
.hidden { display: none !important; }

.panel { animation: fade .22s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

.intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.intro h2 { margin: 0; font-size: 22px; font-weight: 600; }
.intro p { margin: 5px 0 0; color: var(--accent); font-size: 13px; }
.badge {
  font-family: var(--mono); font-size: 11.5px; color: var(--fg-dim);
  background: var(--bg-soft); border: 1px solid var(--line);
  padding: 5px 10px; border-radius: 999px; white-space: nowrap; flex: none;
}
.s-desc {
  margin: 14px 0 0; max-width: 860px; line-height: 1.75;
  color: var(--fg-dim); font-size: 13.5px;
}

/* ---------- capacity ---------- */
.capacity {
  margin: 14px 0 0; max-width: 860px; padding: 11px 14px;
  border: 1px solid var(--line); border-left: 2px solid var(--accent);
  border-radius: var(--radius); background: var(--bg-elev);
}
.capacity.hidden { display: none; }
.cap-head { display: flex; align-items: baseline; gap: 9px; }
.cap-label { font-size: 12px; color: var(--fg-dim); }
.cap-value {
  font-size: 17px; font-variant-numeric: tabular-nums; letter-spacing: -0.2px;
}
.cap-basis { font-size: 11.5px; color: var(--fg-dim); }
.cap-detail {
  margin: 6px 0 0; font-size: 12px; line-height: 1.7; color: var(--fg-dim);
}
.cap-detail b { color: var(--fg); font-weight: 600; }

/* ---------- controls ---------- */
.controls {
  display: grid; gap: 18px 26px; margin: 22px 0 0;
  grid-template-columns: 190px minmax(220px, 1fr) minmax(280px, 1fr) auto;
  padding: 18px 20px; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--radius);
}
@media (max-width: 940px) { .controls { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .controls { grid-template-columns: 1fr; } }

.ctrl label {
  display: block; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .7px; color: var(--fg-faint); margin-bottom: 9px;
}
.ctrl label b { color: var(--accent); font-family: var(--mono); letter-spacing: 0; }
.ctrl small { display: block; margin-top: 7px; font-size: 11px; color: var(--fg-faint); line-height: 1.5; }

.input-money {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: 8px; padding: 0 10px;
}
.input-money span { color: var(--fg-faint); font-family: var(--mono); }
.input-money input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--fg); font-family: var(--mono); font-size: 14px; padding: 9px 0;
}

input[type="date"] {
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 8px;
  color: var(--fg); font-family: var(--mono); font-size: 12.5px;
  padding: 8px 9px; outline: none; color-scheme: dark; min-width: 0;
}
input[type="date"]:focus, .input-money:focus-within { border-color: var(--accent); }

.range-row { display: flex; align-items: center; gap: 8px; }
.range-row .dash { color: var(--fg-faint); }
.presets { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.presets button, .seg button {
  background: var(--bg-elev); border: 1px solid var(--line); color: var(--fg-dim);
  font-size: 11.5px; font-family: inherit; padding: 5px 10px;
  border-radius: 6px; cursor: pointer; transition: .13s;
}
.presets button:hover, .seg button:hover { color: var(--fg); border-color: var(--fg-faint); }
.presets button.active, .seg button.active {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}
.seg { display: flex; gap: 5px; }

/* Only qqq_leaps can be busy: a window start there is a whole re-run, fetched
   on demand. Dimmed rather than blanked so the shape stays put and the panel
   does not jump when the new curve lands. */
.range-busy { font-size: 11px; color: var(--fg-dim); margin-top: 6px; }
.is-busy { opacity: .45; transition: opacity .12s; }

input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  background: var(--line); border-radius: 4px; outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 15px; height: 15px;
  border-radius: 50%; background: var(--accent); cursor: pointer;
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* ---------- fusion ---------- */
.fusion-box {
  margin-top: 18px; padding: 18px 20px; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.fusion-head { display: flex; align-items: center; justify-content: space-between; }
.fusion-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.f-sliders { display: grid; gap: 16px 26px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 16px; }
.f-row label { display: flex; justify-content: space-between; font-size: 12px; color: var(--fg-dim); text-transform: none; letter-spacing: 0; }
.f-row label b { font-family: var(--mono); color: var(--accent); }
.f-total.over { color: var(--down); border-color: var(--down); }
.f-borrow-note { margin: 16px 0 0; }
.f-borrow-stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 12px; }
.f-borrow-stats div span { display: block; font-size: 11px; color: var(--fg-faint); }
.f-borrow-stats div b { font-family: var(--mono); font-size: 15px; font-weight: 600; }

/* ---------- metrics ---------- */
.freshness { margin: 2px 0 0; font-size: 12px; color: var(--fg-dim); }
.freshness.hidden { display: none; }
.freshness.warn { color: #f0a952; }
.freshness.stale { color: #ff6b6b; font-weight: 600; }

.open-block {
  margin: 20px 0 0; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--bg-elev); overflow: hidden;
}
.open-block.hidden { display: none; }
.open-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
}
.o-title { font-weight: 600; font-size: 13px; }
.o-count { font-size: 12px; color: var(--fg-dim); }

.metrics {
  display: grid; gap: 1px; margin: 22px 0 0;
  grid-template-columns: repeat(4, 1fr);
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
@media (max-width: 860px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
.metric { background: var(--bg-soft); padding: 15px 16px; }
.metric span { display: block; font-size: 11px; color: var(--fg-faint); margin-bottom: 7px; }
.metric b { font-family: var(--mono); font-size: 19px; font-weight: 600; letter-spacing: -.3px; }
.metric small { display: block; margin-top: 4px; font-size: 10.5px; color: var(--fg-faint); }
.pos { color: var(--up); }
.neg { color: var(--down); }

/* ---------- charts ---------- */
.chart-wrap {
  position: relative; margin-top: 18px; padding: 14px 8px 8px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
}
.chart-wrap canvas { display: block; width: 100%; height: 340px; }
.chart-wrap.dd canvas { height: 120px; }
.chart-legend {
  display: flex; gap: 18px; flex-wrap: wrap;
  padding: 6px 14px 2px; font-size: 12px; color: var(--fg-dim);
}
.chart-legend i {
  display: inline-block; width: 10px; height: 3px; border-radius: 2px;
  margin-right: 6px; vertical-align: middle;
}
.chart-legend button {
  background: none; border: none; color: inherit; font: inherit;
  cursor: pointer; padding: 0; opacity: 1; transition: opacity .13s;
}
.chart-legend button.off { opacity: .35; text-decoration: line-through; }

.tooltip {
  position: fixed; z-index: 60; pointer-events: none;
  background: rgba(17, 22, 33, .97); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 11px; font-size: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); min-width: 140px;
}
.tooltip .tt-date { color: var(--fg-faint); font-family: var(--mono); font-size: 11px; margin-bottom: 6px; }
.tooltip .tt-row { display: flex; justify-content: space-between; gap: 16px; line-height: 1.7; }
.tooltip .tt-row b { font-family: var(--mono); font-weight: 600; }

/* ---------- trades ---------- */
.trades-block { margin-top: 22px; }
.btn-trades {
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--fg);
  font-family: inherit; font-size: 13px; padding: 10px 18px;
  border-radius: 8px; cursor: pointer; transition: .13s;
}
.btn-trades:hover { border-color: var(--accent); color: var(--accent); }
.trades {
  margin-top: 14px; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; background: var(--bg-soft);
}
.trades-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.t-count { font-size: 12.5px; color: var(--fg-dim); }
.pager { display: flex; align-items: center; gap: 8px; }
.pager button, .pager select {
  background: var(--bg-elev); border: 1px solid var(--line); color: var(--fg-dim);
  font-family: inherit; font-size: 12px; padding: 5px 11px;
  border-radius: 6px; cursor: pointer;
}
.pager button:hover:not(:disabled) { color: var(--fg); border-color: var(--fg-faint); }
.pager button:disabled { opacity: .4; cursor: default; }
.p-info { font-family: var(--mono); font-size: 12px; color: var(--fg-dim); min-width: 74px; text-align: center; }

.table-scroll { overflow-x: auto; max-height: 560px; overflow-y: auto; }
.t-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.t-table thead th {
  position: sticky; top: 0; background: var(--bg-elev); z-index: 1;
  text-align: right; padding: 10px 14px; font-weight: 500;
  color: var(--fg-faint); font-size: 11px; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.t-table thead th:first-child, .t-table tbody td:first-child { text-align: left; }
.t-table tbody td {
  padding: 9px 14px; text-align: right; font-family: var(--mono);
  border-bottom: 1px solid var(--line-soft); white-space: nowrap;
}
.t-table tbody tr:hover td { background: rgba(76, 154, 255, .05); }
.t-table tbody td.txt { font-family: inherit; }

.note {
  margin: 20px 0 0; font-size: 11.5px; color: var(--fg-faint);
  line-height: 1.7; max-width: 900px;
}

/* ---------- account bar ---------- */
/* Absolutely placed so it cannot push the tab row down: .topbar is sticky
   (therefore a positioning context) and its own height must stay stable. */
.account-bar {
  position: absolute; top: 14px; right: 28px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: flex-end; max-width: 55%;
}
@media (max-width: 620px) {
  .account-bar { position: static; max-width: none; margin: 12px 0 0; }
}

.btn-primary, .btn-ghost {
  font-family: inherit; font-size: 12.5px; line-height: 1;
  padding: 9px 15px; border-radius: 8px; cursor: pointer;
  transition: .13s; white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-primary {
  background: var(--accent); border: 1px solid var(--accent); color: #08111f;
  font-weight: 600;
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost {
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--fg-dim);
}
.btn-ghost:hover { color: var(--fg); border-color: var(--fg-faint); }
.btn-primary:disabled, .btn-ghost:disabled { opacity: .5; cursor: default; filter: none; }
.btn-wide { width: 100%; padding: 11px 15px; font-size: 13.5px; margin-top: 4px; }

.acct-chip {
  display: flex; align-items: center; gap: 9px;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 6px 6px 13px;
  font-family: inherit; color: var(--fg); cursor: pointer; transition: .13s;
}
.acct-chip:hover { border-color: var(--accent); }
.acct-name { font-size: 12.5px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-state {
  font-size: 10.5px; padding: 3px 9px; border-radius: 999px;
  background: var(--bg-elev); color: var(--fg-faint); white-space: nowrap;
}
.acct-state.trial { background: rgba(240, 169, 82, .16); color: var(--warn); }
.acct-state.subscribed { background: rgba(46, 204, 143, .16); color: var(--up); }
.acct-state.expired { background: rgba(240, 97, 109, .16); color: var(--down); }

.tabs button.tab-live::after {
  content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--up); margin-left: 7px;
  vertical-align: 1px; box-shadow: 0 0 0 3px rgba(46, 204, 143, .18);
}

/* ---------- auth screens ---------- */
/* `position: relative` is load-bearing: it is what .auth-close anchors to. */
.auth-panel {
  position: relative;
  max-width: 460px; margin: 40px auto 0; padding: 26px 26px 24px;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* The card covers the dashboard, so it carries its own exit. Padded well past
   the glyph's own size — 34px of tap target for a 20px × — because it is the
   one control on the card a visitor reaches for when they want out. */
.auth-close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 20px; line-height: 1;
  color: var(--fg-dim); background: transparent;
  border: 1px solid transparent; border-radius: 8px; cursor: pointer;
}
.auth-close:hover { color: var(--fg); background: var(--bg-elev); border-color: var(--line); }
.auth-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The heading sits beside the ×, not under it. */
.auth-panel h2 { margin: 0; padding-right: 38px; font-size: 20px; font-weight: 600; }
.auth-panel h3 {
  margin: 24px 0 10px; font-size: 13px; font-weight: 600;
  color: var(--fg-dim); text-transform: uppercase; letter-spacing: .7px;
}
.auth-panel .t-table { border: 1px solid var(--line); border-radius: 8px; }
.auth-sub { margin: 8px 0 0; font-size: 12.5px; color: var(--fg-dim); line-height: 1.7; }
.auth-note { margin: 12px 0 0; font-size: 11.5px; color: var(--fg-faint); line-height: 1.7; }
.auth-error { margin: 12px 0 0; font-size: 12.5px; color: var(--down); line-height: 1.6; }
.auth-error.hidden { display: none; }
.auth-alt { margin: 16px 0 0; font-size: 12px; color: var(--fg-faint); text-align: center; }
.auth-alt a { color: var(--fg-dim); text-decoration: none; }
.auth-alt a:hover { color: var(--accent); }

.auth-field { display: block; margin: 18px 0 0; }
.auth-field > span {
  display: block; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .7px; color: var(--fg-faint); margin-bottom: 8px;
}
.auth-field small { display: block; margin-top: 7px; font-size: 11px; color: var(--fg-faint); line-height: 1.5; }

.auth-field input, .chan-form input, .proof-card input {
  width: 100%; box-sizing: border-box;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 8px;
  color: var(--fg); font-family: inherit; font-size: 13.5px;
  padding: 10px 12px; outline: none; transition: border-color .13s;
}
.auth-field input:focus, .chan-form input:focus, .proof-card input:focus { border-color: var(--accent); }
.auth-field input::placeholder, .chan-form input::placeholder,
.proof-card input::placeholder { color: var(--fg-faint); }

.acct-grid {
  display: grid; gap: 1px; margin: 20px 0 0;
  grid-template-columns: repeat(2, 1fr);
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
@media (max-width: 620px) { .acct-grid { grid-template-columns: 1fr; } }
.acct-grid > div { background: var(--bg-elev); padding: 13px 15px; }
.acct-grid span { display: block; font-size: 10.5px; color: var(--fg-faint); margin-bottom: 6px; }
.acct-grid b { font-size: 13px; font-weight: 600; word-break: break-word; }

/* ---------- paywall ---------- */
.paywall {
  margin: 14px 0 0; padding: 22px 22px 20px; text-align: center;
  background: var(--bg-elev); border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.pw-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--fg); }
.pw-sub { margin: 8px 0 0; font-size: 12px; color: var(--fg-dim); line-height: 1.7; }
.pw-actions {
  display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; margin: 16px 0 0;
}
.proof-card .pw-actions, .auth-panel > .pw-actions { justify-content: flex-start; }

/* ---------- plans & payment channels ---------- */
.plan-row {
  display: grid; gap: 9px; margin: 20px 0 0;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 520px) { .plan-row { grid-template-columns: 1fr; } }
.plan-card {
  display: flex; flex-direction: column; gap: 5px; text-align: center;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 10px; cursor: pointer;
  color: var(--fg); font-family: inherit; transition: .13s;
}
.plan-card:hover { border-color: var(--fg-faint); }
.plan-card.on { border-color: var(--accent); background: var(--accent-soft); }
.plan-card b { font-size: 12.5px; font-weight: 600; }
.plan-price { font-family: var(--mono); font-size: 20px; letter-spacing: -.5px; }
.plan-card.on .plan-price { color: var(--accent); }
.plan-card small { font-size: 10.5px; color: var(--fg-faint); }

.chan-box { margin-top: 4px; }
.chan-card {
  margin: 10px 0 0; padding: 15px 16px;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.chan-head { display: flex; align-items: center; gap: 10px; }
.chan-head b { font-size: 13.5px; font-weight: 600; }
.chan-mode {
  font-size: 10.5px; padding: 3px 9px; border-radius: 999px;
  background: var(--bg-soft); color: var(--fg-faint);
}
.chan-mode.auto { background: rgba(46, 204, 143, .16); color: var(--up); }
.chan-mode.manual { background: rgba(240, 169, 82, .16); color: var(--warn); }
.chan-note { margin: 9px 0 0; font-size: 11.5px; color: var(--fg-dim); line-height: 1.7; }
.chan-payee {
  margin: 9px 0 0; font-family: var(--mono); font-size: 12.5px;
  color: var(--fg); word-break: break-all;
  background: var(--bg-soft); border: 1px solid var(--line-soft);
  border-radius: 8px; padding: 9px 11px;
}
.chan-form { display: flex; flex-direction: column; gap: 8px; margin-top: 11px; }
.chan-card .btn-primary { margin-top: 11px; align-self: flex-start; }
.chan-form .btn-primary { margin-top: 2px; }

/* ---------- admin review ---------- */
.admin-list { margin-top: 14px; }
.proof-card {
  margin: 10px 0 0; padding: 14px 16px;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.proof-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.proof-head b { font-size: 13.5px; font-weight: 600; }
.proof-head small { font-family: var(--mono); font-size: 11px; color: var(--fg-faint); }
.proof-ref {
  margin: 9px 0 0; font-family: var(--mono); font-size: 12.5px;
  color: var(--accent); word-break: break-all;
}
.proof-note { margin: 6px 0 0; font-size: 11.5px; color: var(--fg-dim); line-height: 1.6; }
.proof-card input { margin-top: 11px; }

/* ---------- gated blocks on the strategy pages ---------- */
.btn-open {
  margin: 12px 14px; background: var(--bg-soft);
  border: 1px solid var(--line); color: var(--fg);
  font-family: inherit; font-size: 13px; padding: 9px 16px;
  border-radius: 8px; cursor: pointer; transition: .13s;
}
.btn-open:hover { border-color: var(--accent); color: var(--accent); }
.open-body.hidden { display: none; }
.open-gate:not(:empty) { padding: 0 14px 14px; }
.open-gate .paywall { margin-top: 0; }
.trades-gate:not(:empty) { margin-top: 4px; }

/* ---------- 实盘 ---------- */
.live-panel .metrics { margin-top: 18px; }
.live-h3 {
  margin: 26px 0 0; font-size: 13px; font-weight: 600;
  color: var(--fg-dim); text-transform: uppercase; letter-spacing: .7px;
}
.live-h3 + .table-scroll, .live-h3 + .sleeve-bars, .live-h3 + .acct-grid { margin-top: 11px; }
.live-panel .table-scroll {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-soft);
}
.live-warn {
  margin: 14px 0 0; padding: 11px 14px; font-size: 12.5px; line-height: 1.7;
  color: var(--warn); background: rgba(240, 169, 82, .08);
  border: 1px solid rgba(240, 169, 82, .3);
  border-left: 2px solid var(--warn); border-radius: var(--radius);
}
.stale-badge { color: var(--warn); border-color: rgba(240, 169, 82, .45); }

/* The refresh cadence. Stated plainly rather than styled as a warning: a
   snapshot 50 minutes old is normal and this line is what says so. */
.live-cadence {
  margin: 12px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--fg-dim);
}

/* 当日进出: direction is the one column a viewer scans for, so it carries the
   same up/down colours as the P&L columns instead of a neutral grey. */
.t-table tbody td.act-buy { color: var(--up); }
.t-table tbody td.act-sell { color: var(--down); }
/* Partial-fill count — supporting detail, not a number to read across. */
.t-table tbody td.sub { color: var(--fg-faint); }

.sleeve-bars {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 18px; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.sleeve-label {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 6px;
}
.sleeve-label span { font-size: 12.5px; color: var(--fg-dim); }
.sleeve-label b { font-family: var(--mono); font-size: 13px; }
.sleeve-track {
  height: 7px; border-radius: 4px; background: var(--bg-elev); overflow: hidden;
}
.sleeve-fill {
  height: 100%; border-radius: 4px; background: var(--fg-faint);
  transition: width .3s ease;
}
.sleeve-fill.tqqq_ema { background: #4c9aff; }
.sleeve-fill.qqq_leaps { background: #7b61ff; }
.sleeve-fill.spx_put_spread { background: #2ecc8f; }
/* Instruments behind each bar. Monospace so the × N counts line up down the
   column, and wrapped rather than truncated — a LEAPS ladder is four contracts
   and hiding the fourth defeats the point of listing them. */
.sleeve-holdings {
  display: block; margin-top: 7px; font-family: var(--mono);
  font-size: 11px; line-height: 1.6; color: var(--fg-faint);
}

/* ---------- 实盘 equity curve ----------
   The curve reuses .chart-wrap from the backtest panels so the two look like the
   same instrument; only the caveat list below it is new. */
.live-panel .chart-wrap { margin-top: 12px; }
.live-panel .chart-wrap canvas { cursor: crosshair; }

/* Known gaps in the reconstruction — seeded days, unreconciled NAV moves,
   unattributed fills. Warn-toned rather than grey: these are the sentences that
   stop the curve being read as complete, so they must not look like fine print
   a viewer is meant to skip. */
.live-caveats {
  margin: 8px 0 0; padding: 11px 16px 11px 30px;
  font-size: 12px; line-height: 1.75; color: var(--fg-dim);
  background: rgba(240, 169, 82, .06);
  border: 1px solid rgba(240, 169, 82, .22);
  border-left: 2px solid var(--warn); border-radius: var(--radius);
}
.live-caveats li { margin: 0; }
.live-caveats li + li { margin-top: 5px; }

/* The 显示全部 button under a truncated trade log. */
.live-panel .btn-trades { margin-top: 11px; }

/* The secondary line under a cell — fill time, expiry, a position's before →
   after count, 浮动. These are ordinary detail, not warnings: painting them all
   orange spends the warning colour on things that are fine, which is what makes
   a real caution stop registering. So the default is faint and the genuinely
   cautionary strings opt in with `.qty-warn`, which is what `noteCell`'s `warn`
   flag sets. */
.qty-note {
  display: block; margin-top: 3px; font-size: 10px; line-height: 1.4;
  font-weight: 400; color: var(--fg-faint);
}
.qty-warn { color: var(--warn); }

/* A trade row is the unit of reading; its legs are supporting detail. The left
   border on the leg rows is what makes an expanded condor read as four things
   belonging to the row above rather than as four more trades. */
.hist-trades tbody tr.hist-trade > td { border-top: 1px solid var(--line); }
.hist-trades tbody tr.hist-leg > td {
  background: var(--bg-soft); font-size: 12px; padding-top: 7px; padding-bottom: 7px;
}
.hist-trades tbody tr.hist-leg > td:nth-child(2) {
  border-left: 2px solid var(--line);
}
.hist-trades td.hist-toggle { padding-right: 0; width: 1%; white-space: nowrap; }

.btn-leg {
  background: none; border: none; color: var(--fg-dim); cursor: pointer;
  font-family: var(--mono); font-size: 11.5px; padding: 2px 6px;
  border-radius: 5px; transition: .13s;
}
.btn-leg:hover { color: var(--accent); background: var(--bg-elev); }

/* The account page builds its tables as bare <tr> rows, so the header cells
   land in an implicit <tbody> and miss the `thead th` rules above. */
.auth-panel .t-table tbody th {
  text-align: right; padding: 10px 14px; font-weight: 500;
  color: var(--fg-faint); font-size: 11px; white-space: nowrap;
  border-bottom: 1px solid var(--line); background: var(--bg-elev);
}
.auth-panel .t-table tbody th:first-child { text-align: left; }

/* A trade-derived metric an unentitled viewer cannot see: dimmed and set in the
   body font, so it does not read as a number that failed to load. */
.metric b.locked-metric {
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--fg-faint);
}

/* ---------- trade-signal mail switch (account page) ---------- */
.signal-box {
  margin: 22px 0 0; padding: 15px 17px 14px;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-left: 2px solid var(--accent); border-radius: var(--radius);
}
.signal-head { display: flex; align-items: center; gap: 10px; }
.signal-head b { font-size: 13.5px; }
/* The state label sits left of the switch and grows into the gap, so the switch
   stays pinned right however long an error message turns out to be. */
.signal-state {
  margin-left: auto; font-size: 11.5px; color: var(--fg-dim); text-align: right;
}
.signal-state.auth-error { margin: 0 0 0 auto; font-size: 11.5px; }
.signal-note { margin: 10px 0 0; font-size: 11.5px; color: var(--fg-dim); line-height: 1.75; }
.signal-box .auth-note { margin-top: 8px; }

.switch {
  flex: none; width: 42px; height: 23px; padding: 0; border-radius: 12px;
  background: var(--bg-soft); border: 1px solid var(--line);
  cursor: pointer; position: relative; transition: background .18s, border-color .18s;
}
.switch .knob {
  position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
  border-radius: 50%; background: var(--fg-faint); transition: transform .18s, background .18s;
}
.switch.on { background: var(--accent-soft); border-color: var(--accent); }
.switch.on .knob { transform: translateX(19px); background: var(--accent); }
.switch:disabled { opacity: .5; cursor: default; }

/* ---------- account page: password change / close account ---------- */
.acct-section { margin: 14px 0 0; }
.acct-section > .acct-form { margin: 12px 0 0; }
/* Its own bordered block, and the separator above it, so 注销 does not read as
   just another button in the same row as 续订. */
.acct-section.danger {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line);
}
.acct-form {
  padding: 15px 16px 16px; background: var(--bg-elev);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.acct-form .auth-field { margin: 0 0 12px; }
.acct-form .auth-note:first-child { margin-top: 0; }
.acct-section.danger .acct-form { border-color: rgba(240, 97, 109, .3); }

.btn-danger {
  padding: 8px 15px; font-size: 12.5px; font-family: inherit; cursor: pointer;
  border-radius: var(--radius); background: transparent;
  border: 1px solid rgba(240, 97, 109, .45); color: var(--down);
}
.btn-danger:hover { background: rgba(240, 97, 109, .1); border-color: var(--down); }
.btn-danger:disabled { opacity: .5; cursor: default; }
/* The collapsed trigger stays quiet — it reads as one of the ghost buttons until
   opened. Loud red on a button nobody meant to click is how it gets clicked. */
.btn-ghost.btn-danger { background: var(--bg-soft); }