:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-elevated: #0c0c0c;
  --surface: #0c0c0c;
  --surface-soft: #050505;
  --surface-hover: #141414;
  --glass: rgba(12, 12, 12, 0.72);
  --glass-solid: #0c0c0c;
  --glass-border: rgba(244, 236, 227, 0.16);
  --glass-hover: rgba(212, 184, 150, 0.07);
  --glass-highlight: rgba(255, 246, 236, 0.22);
  --glass-edge: rgba(255, 246, 236, 0.06);
  --glass-blur: 16px;
  --grid-line: rgba(212, 184, 150, 0.045);
  --text: #f4ece3;
  --text-muted: #d2b48c;
  --text-faint: #c9a87c;
  --muted: #c9a87c;
  --accent: #d4a574;
  --accent-dim: #b8844f;
  --violet: #c9a87c;
  --cyan: #8ebfbf;
  --green: #7db892;
  --green-dim: rgba(125, 184, 146, 0.14);
  --red: #e07a6f;
  --red-dim: rgba(224, 122, 111, 0.14);
  --amber: #e2b35c;
  --amber-dim: rgba(226, 179, 92, 0.14);
  --yellow: #e6c84a;
  --yellow-dim: rgba(230, 200, 74, 0.16);
  --row-stripe: rgba(244, 236, 227, 0.02);
  --row-hover: rgba(244, 236, 227, 0.03);
  --table-row-hover: rgba(212, 165, 116, 0.06);
  --hero-btc-bg: rgba(212, 165, 116, 0.04);
  --hero-bull-border: rgba(125, 184, 146, 0.28);
  --hero-bear-border: rgba(224, 122, 111, 0.28);
  --hero-neutral-border: rgba(230, 200, 74, 0.34);
  --mood-frame-bull: rgba(125, 184, 146, 0.62);
  --mood-frame-bear: rgba(224, 122, 111, 0.62);
  --mood-frame-neutral: rgba(230, 200, 74, 0.58);
  --mood-frame-glow-bull: rgba(125, 184, 146, 0.16);
  --mood-frame-glow-bear: rgba(224, 122, 111, 0.16);
  --mood-frame-glow-neutral: rgba(230, 200, 74, 0.14);
  --mark-border: rgba(212, 165, 116, 0.38);
  --mark-glow: rgba(212, 165, 116, 0.1);
  --brand-gradient: linear-gradient(118deg, #f4ece3 0%, #c9a87c 38%, #d4a574 100%);
  --mesh-glow-1: rgba(255, 255, 255, 0.03);
  --mesh-glow-2: rgba(255, 255, 255, 0.02);
  --panel-code-bg: rgba(212, 165, 116, 0.08);
  --panel-code-border: rgba(212, 165, 116, 0.2);
  --badge-accent-bg: rgba(212, 165, 116, 0.1);
  --badge-accent-border: rgba(212, 165, 116, 0.18);
  --badge-bull-border: rgba(125, 184, 146, 0.22);
  --badge-bear-border: rgba(224, 122, 111, 0.22);
  --badge-neutral-border: rgba(230, 200, 74, 0.24);
  --btc-icon-border: rgba(226, 179, 92, 0.28);
  --arc-track: rgba(212, 184, 150, 0.12);
  --btn-hover-border: rgba(212, 165, 116, 0.28);
  --live-glow: rgba(125, 184, 146, 0.55);
  --mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;
  --sans: "IBM Plex Sans", "DM Sans", system-ui, sans-serif;
  --display: "IBM Plex Sans", system-ui, sans-serif;
  --radius: 4px;
  --radius-md: 3px;
  --radius-sm: 2px;
  /* Quiet Desk Motion */
  --desk-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --desk-fast: 160ms;
  --desk-ui: 280ms;
  --desk-enter: 560ms;
  --desk-breath: 8s;
  /* Match status/tab-dot pulse (2s); was 280ms and strobed on live mids */
  --desk-tick: 2s;
  /* Sharp glass: specular top edge + hairline rim + hard drop */
  --shadow:
    inset 0 1px 0 var(--glass-highlight),
    inset 0 0 0 1px var(--glass-edge),
    0 1px 0 rgba(0, 0, 0, 0.45),
    0 10px 28px rgba(0, 0, 0, 0.28);
  --shadow-lg:
    inset 0 1px 0 var(--glass-highlight),
    0 16px 40px rgba(0, 0, 0, 0.4);
  --landing-bg-image: url("/images/background-dark.png");
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #e8ecf2;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f4f7fb;
  --surface-hover: #eef2f7;
  --glass: rgba(255, 255, 255, 0.68);
  --glass-solid: #ffffff;
  --glass-border: rgba(15, 23, 42, 0.16);
  --glass-hover: rgba(0, 0, 0, 0.05);
  --glass-highlight: rgba(255, 255, 255, 0.95);
  --glass-edge: rgba(255, 255, 255, 0.45);
  --glass-blur: 14px;
  --grid-line: rgba(0, 0, 0, 0.06);
  /* Sharp black ink on white — no grey/faded secondary text */
  --text: #000000;
  --text-muted: #000000;
  --text-faint: #000000;
  --muted: #000000;
  --accent: #0369a1;
  --accent-dim: #075985;
  --violet: #0369a1;
  --cyan: #0e7490;
  --green: #047857;
  --green-dim: rgba(4, 120, 87, 0.1);
  --red: #b91c1c;
  --red-dim: rgba(185, 28, 28, 0.08);
  --amber: #b45309;
  --amber-dim: rgba(180, 83, 9, 0.1);
  --yellow: #a16207;
  --yellow-dim: rgba(161, 98, 7, 0.14);
  --row-stripe: rgba(15, 23, 42, 0.025);
  --row-hover: rgba(15, 23, 42, 0.04);
  --table-row-hover: rgba(2, 132, 199, 0.06);
  --hero-btc-bg: rgba(2, 132, 199, 0.04);
  --hero-bull-border: rgba(5, 150, 105, 0.28);
  --hero-bear-border: rgba(220, 38, 38, 0.22);
  --hero-neutral-border: rgba(234, 179, 8, 0.32);
  --mood-frame-bull: #059669;
  --mood-frame-bear: #dc2626;
  --mood-frame-neutral: #ca8a04;
  --mood-frame-glow-bull: transparent;
  --mood-frame-glow-bear: transparent;
  --mood-frame-glow-neutral: transparent;
  --mark-border: rgba(2, 132, 199, 0.35);
  --mark-glow: rgba(2, 132, 199, 0.1);
  --brand-gradient: linear-gradient(118deg, #0a0a0a 0%, #111827 38%, #0369a1 100%);
  --mesh-glow-1: rgba(2, 132, 199, 0.09);
  --mesh-glow-2: rgba(8, 145, 178, 0.06);
  --panel-code-bg: rgba(2, 132, 199, 0.08);
  --panel-code-border: rgba(2, 132, 199, 0.18);
  --badge-accent-bg: rgba(2, 132, 199, 0.08);
  --badge-accent-border: rgba(2, 132, 199, 0.16);
  --badge-bull-border: rgba(5, 150, 105, 0.22);
  --badge-bear-border: rgba(220, 38, 38, 0.18);
  --badge-neutral-border: rgba(234, 179, 8, 0.24);
  --btc-icon-border: rgba(217, 119, 6, 0.25);
  --arc-track: rgba(0, 0, 0, 0.14);
  --btn-hover-border: rgba(2, 132, 199, 0.28);
  --live-glow: rgba(5, 150, 105, 0.45);
  --shadow:
    inset 0 1px 0 var(--glass-highlight),
    inset 0 0 0 1px var(--glass-edge),
    0 1px 0 rgba(15, 23, 42, 0.06),
    0 8px 22px rgba(15, 23, 42, 0.06);
  --shadow-lg:
    inset 0 1px 0 var(--glass-highlight),
    0 12px 32px rgba(15, 23, 42, 0.1);
  --landing-bg-image: url("/images/background-light.png");
}

/* Meta / hint type +2px in both themes (not hero values) */
.hint,
.upnl-direction-hint,
.upnl-direction-hint .upnl-dir-line,
.mini-stat .hint,
.hl-balance-card .hint,
.pos-meta,
.feed-time,
.empty-state,
.kv span,
.session-peak-now,
.hedge-pair-hint,
.pf-bar-opening,
#pf-bar-opening,
#stat-margin,
#stat-positions {
  font-size: calc(0.68rem + 2px);
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

#pf-bar-opening.clm-status-hint {
  white-space: pre-line;
  line-height: 1.35;
  max-width: 100%;
}

#pf-bar-opening.clm-status-hint.metric-hint {
  white-space: normal;
}

#pf-bar-opening.clm-status-hint.clm-frozen:not(.metric-hint) {
  color: #c45c26;
  font-weight: 600;
}

[data-theme="light"] #pf-bar-opening.clm-status-hint.clm-frozen:not(.metric-hint) {
  color: #a33f10;
}

#stat-positions {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

#stat-positions.side-entry-ftp-hint,
.upnl-direction-hint .side-entry-ftp-hint {
  white-space: normal;
  line-height: 1.35;
}

/* Unrealized box: Long | Short tree (underlined heads + dashed trunks) */
/* Shared metric tree (Unrealized / Total Balance / Margin / Position) */
.metric-tree,
.upnl-side-tree {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin-top: 0.28rem;
  max-width: 100%;
  min-width: 0;
  color: var(--text-muted);
}
.metric-tree-fork,
.upnl-side-tree-fork {
  position: relative;
  height: 8px;
  margin: 0 18%;
}
.metric-tree-fork::before,
.upnl-side-tree-fork::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 8px;
  background: color-mix(in srgb, var(--text-faint) 70%, transparent);
  transform: translateX(-50%);
}
.metric-tree-fork::after,
.upnl-side-tree-fork::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  height: 1px;
  background: color-mix(in srgb, var(--text-faint) 70%, transparent);
}
.metric-tree-cols,
.upnl-side-tree-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.55rem;
  align-items: start;
  min-width: 0;
}
.metric-tree-cols.cols-1 {
  grid-template-columns: 1fr;
}
.metric-branch,
.upnl-side-branch {
  position: relative;
  min-width: 0;
  padding-top: 0;
}
.metric-branch::before,
.upnl-side-branch::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.28rem;
  width: 1px;
  height: 0.28rem;
  background: color-mix(in srgb, var(--text-faint) 70%, transparent);
  transform: translateX(-50%);
}
.metric-tree-cols.cols-1 .metric-branch::before {
  left: 0.55rem;
  transform: none;
}
.metric-head,
.upnl-side-head {
  display: block;
  width: 100%;
  text-align: center;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 0 0 0.18rem;
  margin: 0 0 0.2rem;
  border-bottom: 1px solid color-mix(in srgb, var(--text-faint) 75%, transparent);
  color: var(--text-muted);
}
.metric-branch.long .metric-head,
.upnl-side-branch.long .upnl-side-head {
  color: color-mix(in srgb, var(--green) 72%, var(--text-muted));
  border-bottom-color: color-mix(in srgb, var(--green) 45%, var(--text-faint));
}
.metric-branch.short .metric-head,
.upnl-side-branch.short .upnl-side-head {
  color: color-mix(in srgb, var(--red) 72%, var(--text-muted));
  border-bottom-color: color-mix(in srgb, var(--red) 45%, var(--text-faint));
}
.metric-branch.session .metric-head,
.metric-branch.week .metric-head,
.metric-branch.counts .metric-head,
.metric-branch.funds .metric-head,
.metric-branch.rate .metric-head,
.metric-branch.sides .metric-head,
.metric-branch.ftp .metric-head,
.metric-branch.loss .metric-head,
.metric-branch.dry .metric-head,
.metric-branch.flat .metric-head,
.metric-branch.choppy .metric-head {
  color: color-mix(in srgb, var(--accent) 70%, var(--text-muted));
  border-bottom-color: color-mix(in srgb, var(--accent) 40%, var(--text-faint));
}
.metric-branch.loss .metric-head {
  color: color-mix(in srgb, var(--red) 72%, var(--text-muted));
  border-bottom-color: color-mix(in srgb, var(--red) 45%, var(--text-faint));
}
.metric-leaves,
.upnl-side-leaves {
  list-style: none;
  margin: 0;
  padding: 0.05rem 0 0 0.55rem;
  border-left: 1px dashed color-mix(in srgb, var(--text-faint) 80%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
}
.metric-leaves li,
.upnl-side-leaves li {
  position: relative;
  padding-left: 0.45rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.metric-leaves li.metric-leaf,
.upnl-side-leaves li.metric-leaf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.5rem;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}
.metric-leaf-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-faint);
  font-size: 0.88em;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.metric-leaf-value {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 72%;
  color: var(--text);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.metric-leaves li::before,
.upnl-side-leaves li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.38rem;
  height: 1px;
  border-top: 1px dashed color-mix(in srgb, var(--text-faint) 80%, transparent);
}
.metric-tree-foot,
.upnl-side-tree-grace {
  margin-top: 0.06rem;
  padding-top: 0.22rem;
  border-top: 1px solid color-mix(in srgb, var(--text-faint) 55%, transparent);
  font-size: 0.92em;
  line-height: 1.3;
  white-space: normal;
  color: var(--text-faint);
}
.metric-leaves li.pnl-positive { color: var(--green); }
.metric-leaves li.pnl-negative { color: var(--red); }
.metric-leaves li.pnl-positive .metric-leaf-value { color: var(--green); }
.metric-leaves li.pnl-negative .metric-leaf-value { color: var(--red); }
.metric-leaves li.is-frozen {
  color: #c45c26;
  font-weight: 600;
}
.metric-leaves li.is-frozen .metric-leaf-value {
  color: #c45c26;
  font-weight: 600;
}
[data-theme="light"] .metric-leaves li.is-frozen { color: #a33f10; }
[data-theme="light"] .metric-tree-fork::before,
[data-theme="light"] .metric-tree-fork::after,
[data-theme="light"] .metric-branch::before,
[data-theme="light"] .upnl-side-tree-fork::before,
[data-theme="light"] .upnl-side-tree-fork::after,
[data-theme="light"] .upnl-side-branch::before {
  background: color-mix(in srgb, #000 28%, transparent);
}
[data-theme="light"] .metric-leaves,
[data-theme="light"] .upnl-side-leaves {
  border-left-color: color-mix(in srgb, #000 28%, transparent);
}
[data-theme="light"] .metric-leaves li::before,
[data-theme="light"] .upnl-side-leaves li::before {
  border-top-color: color-mix(in srgb, #000 28%, transparent);
}
[data-theme="light"] .metric-tree-foot,
[data-theme="light"] .upnl-side-tree-grace {
  border-top-color: color-mix(in srgb, #000 18%, transparent);
}
/* Beat light-mode #stat-margin / #pf-bar-opening ink overrides inside trees */
[data-theme="light"] #stat-margin .metric-leaves li.pnl-positive,
[data-theme="light"] #stat-positions .metric-leaves li.pnl-positive,
[data-theme="light"] .metric-leaves li.pnl-positive {
  color: var(--green);
}
[data-theme="light"] #stat-margin .metric-leaves li.pnl-negative,
[data-theme="light"] #stat-positions .metric-leaves li.pnl-negative,
[data-theme="light"] .metric-leaves li.pnl-negative {
  color: var(--red);
}
[data-theme="light"] #stat-margin .metric-leaves li.is-frozen,
[data-theme="light"] #pf-bar-opening .metric-leaves li.is-frozen,
[data-theme="light"] #stat-position-entry .metric-leaves li.is-frozen {
  color: #a33f10;
}
[data-theme="light"] #stat-margin .metric-branch.long .metric-head,
[data-theme="light"] #pf-bar-opening .metric-branch.long .metric-head,
[data-theme="light"] #stat-position-entry .metric-branch.long .metric-head {
  color: color-mix(in srgb, var(--green) 72%, #000);
}
[data-theme="light"] #stat-margin .metric-branch.short .metric-head,
[data-theme="light"] #pf-bar-opening .metric-branch.short .metric-head,
[data-theme="light"] #stat-position-entry .metric-branch.short .metric-head {
  color: color-mix(in srgb, var(--red) 72%, #000);
}
[data-theme="light"] #stat-margin .metric-branch.session .metric-head,
[data-theme="light"] #stat-margin .metric-branch.week .metric-head,
[data-theme="light"] #stat-margin .metric-branch.counts .metric-head,
[data-theme="light"] #stat-margin .metric-branch.funds .metric-head,
[data-theme="light"] #stat-win-hint .metric-branch.rate .metric-head,
[data-theme="light"] #stat-win-hint .metric-branch.sides .metric-head,
[data-theme="light"] #stat-ftp-edge-hint .metric-branch.ftp .metric-head,
[data-theme="light"] #stat-ftp-edge-hint .metric-branch.dry .metric-head,
[data-theme="light"] #stat-ftp-edge-hint .metric-branch.loss .metric-head {
  color: color-mix(in srgb, var(--accent) 70%, #000);
}
[data-theme="light"] #stat-ftp-edge-hint .metric-branch.loss .metric-head {
  color: color-mix(in srgb, var(--red) 72%, #000);
}
[data-theme="light"] #stat-position-entry .metric-branch.flat .metric-head,
[data-theme="light"] #stat-position-entry .metric-branch.choppy .metric-head {
  color: color-mix(in srgb, var(--accent) 70%, #000);
}

/* Hero hint hosts that contain metric trees */
#stat-margin.metric-hint,
#pf-bar-opening.metric-hint,
#stat-position-entry.metric-hint,
#stat-win-hint.metric-hint,
#stat-ftp-edge-hint.metric-hint,
.position-mini .hint.metric-hint {
  white-space: normal;
  line-height: 1.35;
  max-width: 100%;
  overflow: hidden;
}
/* Total Balance Cap/Open PnL must stay fully readable (no ellipsis) */
#portfolio-value-card #stat-margin.metric-hint {
  overflow: visible;
}
#portfolio-value-card .metric-leaf-value {
  max-width: none;
  flex: 0 0 auto;
  overflow: visible;
  text-overflow: unset;
}
#portfolio-value-card .metric-leaf.pnl-positive .metric-leaf-value,
#portfolio-value-card .metric-leaf.pnl-negative .metric-leaf-value {
  flex: 1 1 100%;
  max-width: 100%;
  text-align: left;
}

/* Phone / narrow: stack Long|Short trees so leaves aren't clipped */
@media (max-width: 900px) {
  .metric-tree-fork,
  .upnl-side-tree-fork {
    display: none;
  }

  .metric-tree-cols,
  .upnl-side-tree-cols {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .metric-branch::before,
  .upnl-side-branch::before {
    left: 0.55rem;
    transform: none;
  }

  .metric-head,
  .upnl-side-head {
    text-align: left;
  }

  .metric-leaves li,
  .upnl-side-leaves li {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
  }

  /* Narrow: value first (readable), label secondary under it — never bury $ in "Capital$3…" */
  .metric-leaves li.metric-leaf,
  .upnl-side-leaves li.metric-leaf {
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.05rem;
    padding-left: 0.45rem;
  }
  .metric-leaf-value {
    max-width: 100%;
    text-align: left;
    font-size: 1.08em;
    font-weight: 700;
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
  }
  .metric-leaf-label {
    max-width: 100%;
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
  }

  #stat-margin,
  #stat-positions,
  #stat-margin.metric-hint,
  #pf-bar-opening.metric-hint,
  #stat-position-entry.metric-hint,
  #stat-win-hint.metric-hint,
  #stat-ftp-edge-hint.metric-hint,
  #stat-positions.upnl-direction-hint,
  #stat-positions.side-entry-ftp-hint,
  .position-mini .hint.metric-hint,
  .position-mini .hint.position-duration-hint,
  .mini-stat .hint {
    overflow: visible;
    max-width: none;
  }

  .metric-tree-foot,
  .upnl-side-tree-grace {
    white-space: normal;
    word-break: break-word;
  }
}

.label,
.mini-stat .label,
.hl-balance-card .label,
.session-range-label {
  font-size: calc(0.62rem + 2px);
}

.chart-legend {
  font-size: calc(0.72rem + 2px);
}

/* Light mode: sharp ink on white */
[data-theme="light"] body {
  color: #000;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

[data-theme="light"] .hint,
[data-theme="light"] .upnl-direction-hint,
[data-theme="light"] .upnl-direction-hint .upnl-dir-line,
[data-theme="light"] .label,
[data-theme="light"] .mini-stat .label,
[data-theme="light"] .mini-stat .hint,
[data-theme="light"] .hl-balance-card .hint,
[data-theme="light"] .hl-balance-card .label,
[data-theme="light"] .pos-meta,
[data-theme="light"] .feed-time,
[data-theme="light"] .empty-state,
[data-theme="light"] .kv span,
[data-theme="light"] .session-range-label,
[data-theme="light"] .session-peak-now,
[data-theme="light"] .hedge-pair-hint,
[data-theme="light"] .pf-bar-opening,
[data-theme="light"] #pf-bar-opening,
[data-theme="light"] #stat-margin,
[data-theme="light"] #stat-positions,
[data-theme="light"] .tab,
[data-theme="light"] .nav-link,
[data-theme="light"] .market-tab,
[data-theme="light"] .market-subtab,
[data-theme="light"] .status-badge,
[data-theme="light"] .theme-toggle,
[data-theme="light"] .verify-hl-btn,
[data-theme="light"] .brand-text p,
[data-theme="light"] #brand-subtitle,
[data-theme="light"] .chart-legend,
[data-theme="light"] .panel-head h2,
[data-theme="light"] .feed-msg,
[data-theme="light"] .mini-value,
[data-theme="light"] .value,
[data-theme="light"] .mono {
  color: #000;
  font-weight: 600;
}

[data-theme="light"] .label,
[data-theme="light"] .mini-stat .label,
[data-theme="light"] .hl-balance-card .label,
[data-theme="light"] .session-range-label {
  letter-spacing: 0.08em;
}

[data-theme="light"] .tab:hover,
[data-theme="light"] .nav-link:hover,
[data-theme="light"] .market-tab:hover,
[data-theme="light"] .market-subtab:hover {
  color: #000;
}

[data-theme="light"] .tab.active,
[data-theme="light"] .nav-link.is-active,
[data-theme="light"] .market-tab.is-active,
[data-theme="light"] .market-subtab.is-active {
  color: var(--accent);
}

[data-theme="light"] .upnl-direction-hint .upnl-dir-line.pnl-positive,
[data-theme="light"] .upnl-direction-hint .pnl-positive,
[data-theme="light"] .hint.pnl-positive,
[data-theme="light"] #stat-margin.pnl-positive,
[data-theme="light"] .pnl-positive,
[data-theme="light"] .side-long,
[data-theme="light"] .mini-value.side-long {
  color: var(--green);
}

[data-theme="light"] .upnl-direction-hint .upnl-dir-line.pnl-negative,
[data-theme="light"] .upnl-direction-hint .pnl-negative,
[data-theme="light"] .hint.pnl-negative,
[data-theme="light"] #stat-margin.pnl-negative,
[data-theme="light"] .pnl-negative,
[data-theme="light"] .side-short,
[data-theme="light"] .mini-value.side-short {
  color: var(--red);
}

[data-theme="light"] .topbar {
  background: var(--glass);
  border-color: rgba(15, 23, 42, 0.2);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
}

[data-theme="light"] .topbar .brand-text h1,
[data-theme="light"] .feed-msg {
  color: #000;
}

[data-theme="light"] .topbar .brand-text p,
[data-theme="light"] #brand-subtitle {
  color: #0369a1;
  font-weight: 600;
}

/* Light mode brand lockup — colored, sharp (no soft glow) */
[data-theme="light"] .brand-mark {
  background: #ffffff;
  border: 2px solid #0369a1;
  box-shadow: none;
  animation: none;
}

[data-theme="light"] .brand-intro-done .brand-mark {
  animation: none;
  box-shadow: none;
}

[data-theme="light"] .brand-mark::after {
  background: #ffffff;
}

[data-theme="light"] .brand-mark-orbit {
  background: conic-gradient(
    from 0deg,
    transparent 0deg 50deg,
    #0369a1 80deg,
    #0e7490 120deg,
    transparent 160deg 360deg
  );
}

[data-theme="light"] .brand-mark-scan {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(3, 105, 161, 0.25) 20%,
    #0369a1 50%,
    #0e7490 80%,
    transparent
  );
  filter: none;
}

[data-theme="light"] .logo-char {
  color: #0369a1;
  text-shadow: none;
  font-weight: 700;
}

[data-theme="light"] .logo-char-i {
  color: #0e7490;
}

[data-theme="light"] .brand-letter {
  color: #0369a1;
  background: #ffffff;
  border: 1.5px solid #0369a1;
  box-shadow: none;
  font-weight: 700;
}

[data-theme="light"] a.brand-door,
[data-theme="light"] a.brand-door:link,
[data-theme="light"] a.brand-door:visited,
[data-theme="light"] a.brand-door:hover,
[data-theme="light"] a.brand-door:active {
  color: #0369a1;
}

[data-theme="light"] .brand-letter:nth-child(even) {
  color: #0e7490;
  border-color: #0e7490;
}

[data-theme="light"] .brand-intro-done .brand-letter {
  animation: none;
}

[data-theme="light"] .brand-intro-done .brand-letter:nth-child(even) {
  animation: none;
}

[data-theme="light"] .brand-domain-dot {
  color: #0369a1;
  text-shadow: none;
}

[data-theme="light"] .brand-domain-ai {
  color: #0e7490;
  text-shadow: none;
  font-weight: 700;
}

[data-theme="light"] .brand-intel,
[data-theme="light"] .intel-letter {
  color: #0e7490;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-weight: 400;
  opacity: 0.72;
}

[data-theme="light"] .brand-intel-dot {
  color: #0369a1;
  text-shadow: none;
}

@keyframes brand-letter-pulse-light {
  0%, 100% {
    border-color: #0369a1;
    color: #0369a1;
    box-shadow: none;
  }
  50% {
    border-color: #0e7490;
    color: #0e7490;
    box-shadow: none;
  }
}

@keyframes brand-letter-pulse-light-alt {
  0%, 100% {
    border-color: #0e7490;
    color: #0e7490;
    box-shadow: none;
  }
  50% {
    border-color: #0369a1;
    color: #0369a1;
    box-shadow: none;
  }
}

[data-theme="light"] .feed-msg {
  font-weight: 500;
}

[data-theme="light"] .empty-state,
[data-theme="light"] .chart-legend {
  color: #000;
}

[data-theme="light"] .btc-y-label,
[data-theme="light"] .btc-y-label-rail,
[data-theme="light"] .btc-x-label,
[data-theme="light"] .btc-ov-label {
  fill: #000;
}

[data-theme="light"] .btc-price-rail {
  opacity: 0.9;
}

/* Top chrome dividers (before hero) — sharper than page glass borders */
[data-theme="light"] .topbar {
  border-color: rgba(0, 0, 0, 0.32);
}

[data-theme="light"] .topbar .tabs,
[data-theme="light"] .market-tabs,
[data-theme="light"] .market-subtabs,
[data-theme="light"] .market-switcher--bar .market-subtabs,
[data-theme="light"] .market-switcher--centered .market-subtabs {
  border-color: rgba(0, 0, 0, 0.28);
}

[data-theme="light"] .market-tab,
[data-theme="light"] .market-subtab {
  border-right-color: rgba(0, 0, 0, 0.28);
}

[data-theme="light"] .market-tab:first-child,
[data-theme="light"] .market-subtab:first-child {
  border-left-color: rgba(0, 0, 0, 0.28);
}

[data-theme="light"] .nav-link,
[data-theme="light"] .theme-toggle,
[data-theme="light"] .verify-hl-btn,
[data-theme="light"] .status-badge {
  border-color: rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .topbar {
  border-color: rgba(212, 184, 150, 0.28);
}

[data-theme="dark"] .topbar .tabs,
[data-theme="dark"] .market-tabs,
[data-theme="dark"] .market-subtabs,
[data-theme="dark"] .market-switcher--bar .market-subtabs,
[data-theme="dark"] .market-switcher--centered .market-subtabs {
  border-color: rgba(212, 184, 150, 0.26);
}

[data-theme="dark"] .market-tab,
[data-theme="dark"] .market-subtab {
  border-right-color: rgba(212, 184, 150, 0.26);
}

[data-theme="dark"] .market-tab:first-child,
[data-theme="dark"] .market-subtab:first-child {
  border-left-color: rgba(212, 184, 150, 0.26);
}

[data-theme="dark"] .nav-link,
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .verify-hl-btn,
[data-theme="dark"] .status-badge {
  border-color: rgba(212, 184, 150, 0.26);
}

/* Light mode body: softer surfaces, fewer harsh divider lines */
[data-theme="light"] .bg-mesh {
  background: var(--bg);
}

[data-theme="light"] .bg-mesh::before,
[data-theme="light"] .bg-mesh::after,
[data-theme="light"] .bg-mesh-orb {
  mix-blend-mode: multiply;
  filter: blur(56px);
}

[data-theme="light"] .bg-mesh::before {
  background:
    linear-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--accent) 32%, transparent) 0%, transparent 42%),
    radial-gradient(circle at 78% 62%, color-mix(in srgb, var(--cyan) 24%, transparent) 0%, transparent 46%);
  background-size: 48px 48px, 48px 48px, auto, auto;
}

[data-theme="light"] .glass {
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: var(--shadow);
}

[data-theme="light"] .market-hero,
[data-theme="light"] .market-hero.neutral {
  border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .market-hero-btc,
[data-theme="light"] .mini-stat {
  border-right-color: rgba(15, 23, 42, 0.06);
  border-bottom-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .hero-metrics-5 .mini-stat,
[data-theme="light"] .hero-metrics-6 .mini-stat {
  border-bottom-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .panel-head {
  border-bottom-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .kv div {
  border-bottom-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .grid-2-logs .admin-log-feed,
[data-theme="light"] .feed-item-static + .feed-item-static,
[data-theme="light"] .feed-item-console + .feed-item-console,
[data-theme="light"] .chart-legend {
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .portfolio-chart-wrap,
[data-theme="light"] .chart-mode-toggle,
[data-theme="light"] .chart-tf-fold-btn,
[data-theme="light"] .raw-ai-display {
  border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .hl-dock-head,
[data-theme="light"] .hl-dock-tab + .hl-dock-tab,
[data-theme="light"] .metric-row,
[data-theme="light"] .metric {
  border-color: rgba(15, 23, 42, 0.07);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Background motion is CSS-pseudo based so it works even if HTML is browser-cached
   without the optional .bg-mesh-orb children. */
.bg-mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--bg);
}

.bg-mesh::before,
.bg-mesh::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(52px);
  will-change: transform, opacity;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Primary wash + drifting grid (single layer that always exists) */
.bg-mesh::before {
  inset: -24%;
  background:
    linear-gradient(rgba(244, 236, 227, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 236, 227, 0.07) 1px, transparent 1px),
    radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--accent) 75%, transparent) 0%, transparent 45%),
    radial-gradient(circle at 82% 58%, color-mix(in srgb, var(--cyan) 60%, transparent) 0%, transparent 48%);
  background-size: 56px 56px, 56px 56px, auto, auto;
  opacity: 1;
  animation: bg-field-drift 14s ease-in-out infinite;
}

/* Second wash — opposite corner, slower */
.bg-mesh::after {
  width: min(75vw, 900px);
  height: min(75vw, 900px);
  bottom: -30%;
  left: 12%;
  background: radial-gradient(circle, color-mix(in srgb, var(--amber) 70%, transparent) 0%, transparent 68%);
  opacity: 0.75;
  animation: bg-orb-c 11s ease-in-out infinite;
}

/* Optional child orbs (fresh HTML) — extra depth, not required */
.bg-mesh-grid {
  display: none; /* grid lives on ::before now */
}

.bg-mesh-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  will-change: transform, opacity;
  mix-blend-mode: screen;
}

.bg-mesh-orb-a {
  width: min(52vw, 620px);
  height: min(52vw, 620px);
  top: -12%;
  left: -8%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent) 0%, transparent 68%);
  opacity: 0.45;
  animation: bg-orb-a 22s ease-in-out infinite;
}

.bg-mesh-orb-b {
  width: min(42vw, 500px);
  height: min(42vw, 500px);
  top: 32%;
  right: -12%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cyan) 36%, transparent) 0%, transparent 70%);
  opacity: 0.35;
  animation: bg-orb-b 28s ease-in-out infinite;
}

.bg-mesh-orb-c {
  display: none; /* covered by ::after */
}

body.mood-bullish .bg-mesh::before {
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--green) 58%, transparent) 0%, transparent 42%),
    radial-gradient(circle at 78% 62%, color-mix(in srgb, var(--cyan) 36%, transparent) 0%, transparent 46%);
  background-size: 48px 48px, 48px 48px, auto, auto;
}
body.mood-bearish .bg-mesh::before {
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--red) 56%, transparent) 0%, transparent 42%),
    radial-gradient(circle at 78% 62%, color-mix(in srgb, var(--amber) 34%, transparent) 0%, transparent 46%);
  background-size: 48px 48px, 48px 48px, auto, auto;
}
body.mood-neutral .bg-mesh::before {
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--yellow) 54%, transparent) 0%, transparent 42%),
    radial-gradient(circle at 78% 62%, color-mix(in srgb, var(--accent) 32%, transparent) 0%, transparent 46%);
  background-size: 48px 48px, 48px 48px, auto, auto;
}

body.mood-bullish .bg-mesh-orb-a {
  background: radial-gradient(circle, color-mix(in srgb, var(--green) 48%, transparent) 0%, transparent 68%);
}
body.mood-bearish .bg-mesh-orb-a {
  background: radial-gradient(circle, color-mix(in srgb, var(--red) 46%, transparent) 0%, transparent 68%);
}
body.mood-neutral .bg-mesh-orb-a {
  background: radial-gradient(circle, color-mix(in srgb, var(--yellow) 44%, transparent) 0%, transparent 68%);
}

@keyframes bg-field-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  25% { transform: translate3d(5%, 6%, 0) scale(1.06); }
  50% { transform: translate3d(-4%, 3%, 0) scale(1.02); }
  75% { transform: translate3d(3%, -4%, 0) scale(1.05); }
}

@keyframes bg-orb-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.45; }
  40% { transform: translate3d(12%, 18%, 0) scale(1.12); opacity: 0.7; }
  70% { transform: translate3d(6%, 8%, 0) scale(0.96); opacity: 0.5; }
}

@keyframes bg-orb-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.35; }
  35% { transform: translate3d(-16%, -10%, 0) scale(1.15); opacity: 0.58; }
  65% { transform: translate3d(-8%, 12%, 0) scale(1.02); opacity: 0.42; }
}

@keyframes bg-orb-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.4; }
  50% { transform: translate3d(-14%, -16%, 0) scale(1.18); opacity: 0.7; }
}

.app {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0.75rem 1rem 2rem;
}

.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  isolation: isolate;
  transition:
    background var(--desk-ui) var(--desk-ease),
    border-color var(--desk-ui) var(--desk-ease),
    box-shadow 0.35s ease;
}

.glass:not(.market-hero):hover {
  background: color-mix(in srgb, var(--glass) 88%, var(--glass-highlight));
  border-color: color-mix(in srgb, var(--glass-border) 70%, var(--accent));
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass,
  .topbar,
  .market-hero {
    background: var(--glass-solid);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass,
  .topbar,
  .market-hero {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--glass-solid);
  }
}

.mood-lit,
#signal-panel {
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

body.mood-bullish .mood-lit,
body.mood-bullish #signal-panel,
#signal-panel.consensus-bullish {
  border-color: var(--mood-frame-bull);
  box-shadow: var(--shadow), 0 0 0 1px var(--mood-frame-glow-bull), 0 0 24px var(--mood-frame-glow-bull);
}

body.mood-bearish .mood-lit,
body.mood-bearish #signal-panel,
#signal-panel.consensus-bearish {
  border-color: var(--mood-frame-bear);
  box-shadow: var(--shadow), 0 0 0 1px var(--mood-frame-glow-bear), 0 0 24px var(--mood-frame-glow-bear);
}

body.mood-neutral .mood-lit,
body.mood-neutral #signal-panel,
#signal-panel.consensus-neutral {
  border-color: var(--mood-frame-neutral);
  box-shadow: var(--shadow), 0 0 0 1px var(--mood-frame-glow-neutral), 0 0 24px var(--mood-frame-glow-neutral);
}

/* Hero grid lightning — same brightness as tourbillon dial mood lights */
body.mood-bullish .market-hero.mood-lit {
  --hero-div: color-mix(in srgb, var(--green) 95%, transparent);
  --hero-div-glow: color-mix(in srgb, var(--green) 55%, transparent);
  --hero-lightning: color-mix(in srgb, var(--green) 92%, transparent);
  --hero-lightning-soft: color-mix(in srgb, var(--green) 55%, transparent);
  --hero-lightning-line: color-mix(in srgb, var(--green) 95%, transparent);
}

body.mood-bearish .market-hero.mood-lit {
  --hero-div: color-mix(in srgb, var(--red) 95%, transparent);
  --hero-div-glow: color-mix(in srgb, var(--red) 55%, transparent);
  --hero-lightning: color-mix(in srgb, var(--red) 92%, transparent);
  --hero-lightning-soft: color-mix(in srgb, var(--red) 55%, transparent);
  --hero-lightning-line: color-mix(in srgb, var(--red) 95%, transparent);
}

body.mood-neutral .market-hero.mood-lit {
  --hero-div: color-mix(in srgb, var(--yellow, #e6c84a) 95%, transparent);
  --hero-div-glow: color-mix(in srgb, var(--yellow, #e6c84a) 55%, transparent);
  --hero-lightning: color-mix(in srgb, var(--yellow, #e6c84a) 92%, transparent);
  --hero-lightning-soft: color-mix(in srgb, var(--yellow, #e6c84a) 55%, transparent);
  --hero-lightning-line: color-mix(in srgb, var(--yellow, #e6c84a) 95%, transparent);
}

body.mood-bullish .market-hero.mood-lit,
body.mood-bearish .market-hero.mood-lit,
body.mood-neutral .market-hero.mood-lit {
  box-shadow:
    var(--shadow),
    0 0 0 1px color-mix(in srgb, var(--hero-lightning-line) 70%, transparent),
    0 0 18px var(--hero-lightning-soft),
    0 0 36px color-mix(in srgb, var(--hero-lightning) 35%, transparent);
}

body.mood-bullish .market-hero.mood-lit .market-hero-btc,
body.mood-bearish .market-hero.mood-lit .market-hero-btc,
body.mood-neutral .market-hero.mood-lit .market-hero-btc,
body.mood-bullish .market-hero.mood-lit .hero-rail-stack,
body.mood-bearish .market-hero.mood-lit .hero-rail-stack,
body.mood-neutral .market-hero.mood-lit .hero-rail-stack,
body.mood-bullish .market-hero.mood-lit .mini-stat,
body.mood-bearish .market-hero.mood-lit .mini-stat,
body.mood-neutral .market-hero.mood-lit .mini-stat {
  border-right-color: var(--hero-lightning-line);
  border-bottom-color: var(--hero-lightning-line);
  transition: border-color 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
}

/* Per-cell rim beacon — matches tourbillon dial inset lightning */
body.mood-bullish .market-hero.mood-lit .mini-stat,
body.mood-bearish .market-hero.mood-lit .mini-stat,
body.mood-neutral .market-hero.mood-lit .mini-stat {
  position: relative;
  box-shadow:
    1px 0 14px var(--hero-lightning-soft),
    inset 0 0 0 1px color-mix(in srgb, var(--hero-lightning-line) 55%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--hero-lightning-soft) 28%, transparent);
  filter: drop-shadow(0 0 8px var(--hero-lightning-soft));
}

body.mood-bullish .market-hero.mood-lit .market-hero-btc,
body.mood-bearish .market-hero.mood-lit .market-hero-btc,
body.mood-neutral .market-hero.mood-lit .market-hero-btc,
body.mood-bullish .market-hero.mood-lit .hero-rail-stack,
body.mood-bearish .market-hero.mood-lit .hero-rail-stack,
body.mood-neutral .market-hero.mood-lit .hero-rail-stack {
  box-shadow:
    1px 0 18px var(--hero-lightning-soft),
    inset 0 0 0 1px color-mix(in srgb, var(--hero-lightning-line) 45%, transparent);
}

body.mood-bullish .market-hero.mood-lit .hero-metrics-6 > .mini-stat:nth-child(1),
body.mood-bullish .market-hero.mood-lit .hero-metrics-6 > .mini-stat:nth-child(2),
body.mood-bearish .market-hero.mood-lit .hero-metrics-6 > .mini-stat:nth-child(1),
body.mood-bearish .market-hero.mood-lit .hero-metrics-6 > .mini-stat:nth-child(2),
body.mood-neutral .market-hero.mood-lit .hero-metrics-6 > .mini-stat:nth-child(1),
body.mood-neutral .market-hero.mood-lit .hero-metrics-6 > .mini-stat:nth-child(2) {
  border-bottom-color: var(--hero-lightning-line);
  box-shadow:
    1px 0 14px var(--hero-lightning-soft),
    0 1px 14px var(--hero-lightning-soft),
    inset 0 0 0 1px color-mix(in srgb, var(--hero-lightning-line) 55%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--hero-lightning-soft) 28%, transparent);
}

body.mood-bullish .market-hero.mood-lit .hero-metrics-6 > .mini-stat:nth-child(3),
body.mood-bearish .market-hero.mood-lit .hero-metrics-6 > .mini-stat:nth-child(3),
body.mood-neutral .market-hero.mood-lit .hero-metrics-6 > .mini-stat:nth-child(3) {
  border-bottom-color: var(--hero-lightning-line);
  box-shadow:
    0 1px 14px var(--hero-lightning-soft),
    inset 0 0 0 1px color-mix(in srgb, var(--hero-lightning-line) 55%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--hero-lightning-soft) 28%, transparent);
}

body.mood-bullish .market-hero.mood-lit .hero-metrics-6 > .mini-stat:nth-child(4),
body.mood-bullish .market-hero.mood-lit .hero-metrics-6 > .mini-stat:nth-child(5),
body.mood-bearish .market-hero.mood-lit .hero-metrics-6 > .mini-stat:nth-child(4),
body.mood-bearish .market-hero.mood-lit .hero-metrics-6 > .mini-stat:nth-child(5),
body.mood-neutral .market-hero.mood-lit .hero-metrics-6 > .mini-stat:nth-child(4),
body.mood-neutral .market-hero.mood-lit .hero-metrics-6 > .mini-stat:nth-child(5) {
  box-shadow:
    1px 0 14px var(--hero-lightning-soft),
    inset 0 0 0 1px color-mix(in srgb, var(--hero-lightning-line) 55%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--hero-lightning-soft) 28%, transparent);
}

body.mood-bullish .market-hero.mood-lit .hero-metrics-6 .session-peaks-stat,
body.mood-bearish .market-hero.mood-lit .hero-metrics-6 .session-peaks-stat,
body.mood-neutral .market-hero.mood-lit .hero-metrics-6 .session-peaks-stat,
body.mood-bullish .market-hero.mood-lit .hero-metrics-5 .session-peaks-stat,
body.mood-bearish .market-hero.mood-lit .hero-metrics-5 .session-peaks-stat,
body.mood-neutral .market-hero.mood-lit .hero-metrics-5 .session-peaks-stat {
  border-top-color: var(--hero-lightning-line);
  box-shadow:
    0 -1px 16px var(--hero-lightning-soft),
    inset 0 0 0 1px color-mix(in srgb, var(--hero-lightning-line) 50%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--hero-lightning-soft) 22%, transparent);
  filter: drop-shadow(0 0 10px var(--hero-lightning-soft));
}

body.mood-bullish .market-hero.mood-lit .session-range-grid-4 .session-range-col,
body.mood-bearish .market-hero.mood-lit .session-range-grid-4 .session-range-col,
body.mood-neutral .market-hero.mood-lit .session-range-grid-4 .session-range-col {
  border-right-color: var(--hero-lightning-line);
  box-shadow: 1px 0 12px var(--hero-lightning-soft);
}

body.mood-bullish .market-hero.mood-lit .session-range-grid-4 .session-range-col:last-child,
body.mood-bearish .market-hero.mood-lit .session-range-grid-4 .session-range-col:last-child,
body.mood-neutral .market-hero.mood-lit .session-range-grid-4 .session-range-col:last-child {
  box-shadow: none;
}

body.mood-bullish .market-hero.mood-lit .weekly-float-widget,
body.mood-bearish .market-hero.mood-lit .weekly-float-widget,
body.mood-neutral .market-hero.mood-lit .weekly-float-widget {
  border-top-color: var(--hero-lightning-line);
  box-shadow: 0 -1px 14px var(--hero-lightning-soft);
}

/* Light mode: sharp high-contrast mood borders — no soft glow */
[data-theme="light"] body.mood-bullish .mood-lit,
[data-theme="light"] body.mood-bullish #signal-panel,
[data-theme="light"] #signal-panel.consensus-bullish,
[data-theme="light"] body.mood-bearish .mood-lit,
[data-theme="light"] body.mood-bearish #signal-panel,
[data-theme="light"] #signal-panel.consensus-bearish,
[data-theme="light"] body.mood-neutral .mood-lit,
[data-theme="light"] body.mood-neutral #signal-panel,
[data-theme="light"] #signal-panel.consensus-neutral {
  border-width: 2px;
  border-style: solid;
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    inset 0 0 0 1px var(--glass-edge);
}

[data-theme="light"] body.mood-bullish .mood-lit,
[data-theme="light"] body.mood-bullish #signal-panel,
[data-theme="light"] #signal-panel.consensus-bullish {
  border-color: var(--mood-frame-bull);
}

[data-theme="light"] body.mood-bearish .mood-lit,
[data-theme="light"] body.mood-bearish #signal-panel,
[data-theme="light"] #signal-panel.consensus-bearish {
  border-color: var(--mood-frame-bear);
}

[data-theme="light"] body.mood-neutral .mood-lit,
[data-theme="light"] body.mood-neutral #signal-panel,
[data-theme="light"] #signal-panel.consensus-neutral {
  border-color: var(--mood-frame-neutral);
}

[data-theme="light"] body.mood-bullish .market-hero.mood-lit .market-hero-btc,
[data-theme="light"] body.mood-bearish .market-hero.mood-lit .market-hero-btc,
[data-theme="light"] body.mood-neutral .market-hero.mood-lit .market-hero-btc,
[data-theme="light"] body.mood-bullish .market-hero.mood-lit .mini-stat,
[data-theme="light"] body.mood-bearish .market-hero.mood-lit .mini-stat,
[data-theme="light"] body.mood-neutral .market-hero.mood-lit .mini-stat,
[data-theme="light"] body.mood-bullish .market-hero.mood-lit .session-range-grid-4 .session-range-col,
[data-theme="light"] body.mood-bearish .market-hero.mood-lit .session-range-grid-4 .session-range-col,
[data-theme="light"] body.mood-neutral .market-hero.mood-lit .session-range-grid-4 .session-range-col {
  border-right-width: 2px;
  border-bottom-width: 2px;
}

[data-theme="light"] body.mood-bullish .market-hero.mood-lit .hero-metrics-6 .session-peaks-stat,
[data-theme="light"] body.mood-bearish .market-hero.mood-lit .hero-metrics-6 .session-peaks-stat,
[data-theme="light"] body.mood-neutral .market-hero.mood-lit .hero-metrics-6 .session-peaks-stat,
[data-theme="light"] body.mood-bullish .market-hero.mood-lit .hero-metrics-5 .session-peaks-stat,
[data-theme="light"] body.mood-bearish .market-hero.mood-lit .hero-metrics-5 .session-peaks-stat,
[data-theme="light"] body.mood-neutral .market-hero.mood-lit .hero-metrics-5 .session-peaks-stat {
  border-top-width: 2px;
}

.shell-head {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 50;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: center;
  column-gap: 0.65rem;
  row-gap: 0.2rem;
  padding: 0.28rem 0.85rem;
  margin-bottom: 0;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  isolation: isolate;
  position: relative;
  overflow: hidden;
}

.shell-head.status-lights-sweeping,
.topbar.status-lights-sweeping {
  overflow: visible;
}

.topbar .brand {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: start;
  flex: 1;
  min-width: 0;
}

.topbar .topbar-end {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
}

.topbar .brand,
.topbar .topbar-actions,
.topbar .topbar-utilities {
  display: flex;
  align-items: center;
}

.topbar-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0.4rem;
  margin-left: 0;
  flex: none;
  min-width: 0;
  z-index: 2;
}

.topbar-end .topbar-actions,
.topbar-end .topbar-utilities {
  position: relative;
  flex-shrink: 0;
  width: max-content;
  max-width: 100%;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 1 auto;
  min-width: 200px;
}

/* Admin section tabs sit beside theme + status */
.topbar-utilities .tabs--utilities {
  flex: 0 0 auto;
  align-items: center;
  border-bottom: none;
  margin: 0;
  margin-right: 0.15rem;
}

.topbar-utilities .tabs--utilities .tab {
  padding: 0.22rem 0.55rem;
  margin-bottom: 0;
  border-bottom-width: 2px;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  min-height: 0;
  line-height: 1.2;
}

.brand-stage {
  position: relative;
  isolation: isolate;
  perspective: 520px;
  --brand-cycle: 16s;
}

.brand-mark {
  position: relative;
  isolation: isolate;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg-elevated);
  box-shadow:
    0 0 0 1px var(--mark-glow),
    0 0 18px color-mix(in srgb, var(--accent) 12%, transparent);
  animation:
    brand-mark-breathe 4s ease-in-out infinite,
    brand-mark-absorb var(--brand-cycle) ease-in-out 1 forwards;
}

.brand-mark-rollup {
  position: absolute;
  bottom: 2px;
  width: 0.55rem;
  height: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: 1px;
  opacity: 0;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--accent) 55%, transparent) 35%,
    var(--cyan) 65%,
    transparent
  );
  filter: blur(0.3px);
}

.brand-mark-rollup-a {
  left: 0.62rem;
  animation: brand-rollup-a-glow var(--brand-cycle) ease-in-out 1 forwards;
}

.brand-mark-rollup-i {
  right: 0.62rem;
  animation: brand-rollup-i-glow var(--brand-cycle) ease-in-out 1 forwards;
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-sm) - 1px);
  background: var(--bg-elevated);
  z-index: 1;
}

.brand-mark-orbit {
  position: absolute;
  inset: -120%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 40deg,
    color-mix(in srgb, var(--accent) 85%, white) 70deg,
    var(--cyan) 110deg,
    transparent 150deg 360deg
  );
  z-index: 0;
  animation: brand-mark-orbit 3.2s linear infinite;
}

.brand-mark-scan {
  position: absolute;
  left: -10%;
  right: -10%;
  height: 2px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent) 20%, transparent) 20%,
    var(--accent) 50%,
    color-mix(in srgb, var(--cyan) 80%, transparent) 80%,
    transparent
  );
  opacity: 0;
  filter: blur(0.2px);
  animation: brand-mark-scan 2.8s ease-in-out infinite;
}

.logo-abbr {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.06rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}

.logo-char {
  color: var(--accent);
  text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 40%, transparent);
}

.logo-char-a {
  animation:
    logo-char-pulse 2.4s ease-in-out infinite,
    logo-char-a-absorb var(--brand-cycle) ease-in-out 1 forwards;
}

.logo-char-i {
  animation:
    logo-char-pulse 2.4s ease-in-out infinite 0.35s,
    logo-char-i-absorb var(--brand-cycle) ease-in-out 1 forwards;
}

.brand-cosmos-star {
  position: absolute;
  top: 0.38rem;
  left: 1.15rem;
  z-index: 20;
  width: 1rem;
  height: 1rem;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  animation: cosmos-star-voyage var(--brand-cycle) cubic-bezier(0.45, 0.05, 0.2, 1) 1 forwards;
}

.star-core {
  position: relative;
  z-index: 2;
  font-size: 0.72rem;
  line-height: 1;
  color: var(--accent);
  text-shadow:
    0 0 4px var(--accent),
    0 0 12px var(--cyan),
    0 0 22px color-mix(in srgb, var(--accent) 40%, transparent);
}

.star-halo {
  position: absolute;
  inset: -0.35rem;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent) 35%, transparent) 0%,
    transparent 68%
  );
  opacity: 0;
  animation: star-halo-pulse var(--brand-cycle) ease-in-out 1 forwards;
}

.brand-text h1,
.brand-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  font-family: var(--display);
  font-size: calc(1rem + 2px);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

.brand-title {
  position: relative;
}

.brand-lockup {
  display: inline-flex;
  align-items: flex-start;
}

.brand-name-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}

.brand-name-row {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

.brand-name {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
}

.brand-domain {
  display: inline-flex;
  align-items: baseline;
  flex-shrink: 0;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.04em;
  animation: brand-domain-reveal var(--brand-cycle) ease-in-out 1 forwards;
}

.brand-domain-dot,
.brand-domain-ai {
  display: inline-block;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.brand-domain-dot {
  color: var(--accent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 45%, transparent);
  animation:
    brand-domain-dot-pop var(--brand-cycle) ease-in-out 1 forwards,
    brand-letter-roll-a var(--brand-cycle) cubic-bezier(0.55, 0.06, 0.25, 1) 1 forwards;
  --roll-x: -13.65rem;
  animation-delay: 0s, 0.32s;
}

.brand-domain-ai {
  font-size: 0.68em;
  color: var(--accent);
  text-transform: lowercase;
  animation:
    brand-domain-ai-in var(--brand-cycle) ease-in-out 1 forwards,
    brand-letter-roll-a var(--brand-cycle) cubic-bezier(0.55, 0.06, 0.25, 1) 1 forwards;
  --roll-x: -14.35rem;
  animation-delay: 0s, 0.36s;
}

.brand-letter {
  display: grid;
  place-items: center;
  width: calc(1.28rem + 2px);
  height: calc(1.28rem + 2px);
  font-family: var(--display);
  font-size: calc(0.62rem + 2px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  color: var(--text-muted);
  text-transform: uppercase;
  background: var(--bg-elevated);
  border: 1px solid var(--mark-border);
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--mark-glow);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  animation:
    brand-letter-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards,
    brand-letter-glow 2.8s ease-in-out infinite,
    brand-letter-roll-a var(--brand-cycle) cubic-bezier(0.55, 0.06, 0.25, 1) 1 forwards;
}

.brand-letter:nth-child(1) { --roll-x: -2.65rem; --roll-delay: 0s; animation-delay: 0.05s, 0s, 0s; }
.brand-letter:nth-child(2) { --roll-x: -4.05rem; --roll-delay: 0.04s; animation-delay: 0.1s, 0.35s, 0.04s; }
.brand-letter:nth-child(3) { --roll-x: -5.45rem; --roll-delay: 0.08s; animation-delay: 0.15s, 0.7s, 0.08s; }
.brand-letter:nth-child(4) { --roll-x: -6.85rem; --roll-delay: 0.12s; animation-delay: 0.2s, 1.05s, 0.12s; }
.brand-letter:nth-child(5) { --roll-x: -8.25rem; --roll-delay: 0.16s; animation-delay: 0.25s, 1.4s, 0.16s; }
.brand-letter:nth-child(6) { --roll-x: -9.65rem; --roll-delay: 0.2s; animation-delay: 0.3s, 1.75s, 0.2s; }
.brand-letter:nth-child(7) { --roll-x: -11.05rem; --roll-delay: 0.24s; animation-delay: 0.35s, 2.1s, 0.24s; }
.brand-letter:nth-child(8) { --roll-x: -12.45rem; --roll-delay: 0.28s; animation-delay: 0.4s, 2.45s, 0.28s; }

/* Brand-letter link twin — match .brand-letter color (not inherit from h1 / :visited). */
a.brand-door,
a.brand-door:link,
a.brand-door:visited,
a.brand-door:hover,
a.brand-door:active {
  text-decoration: none;
  color: var(--text-muted);
  cursor: inherit;
  -webkit-tap-highlight-color: transparent;
}
a.brand-door:focus {
  outline: none;
}
a.brand-door:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--accent, #c9a87c) 55%, transparent);
  outline-offset: 2px;
}

@keyframes brand-mark-orbit {
  to { transform: rotate(360deg); }
}

@keyframes brand-mark-breathe {
  0%, 100% {
    box-shadow:
      0 0 0 1px var(--mark-glow),
      0 0 14px color-mix(in srgb, var(--accent) 10%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
      0 0 22px color-mix(in srgb, var(--accent) 22%, transparent),
      0 0 36px color-mix(in srgb, var(--cyan) 10%, transparent);
  }
}

@keyframes brand-mark-scan {
  0%, 8% {
    top: -15%;
    opacity: 0;
  }
  18% { opacity: 0.85; }
  48% {
    top: 115%;
    opacity: 0.55;
  }
  58%, 100% {
    top: 115%;
    opacity: 0;
  }
}

@keyframes logo-char-pulse {
  0%, 100% {
    color: var(--accent);
    text-shadow: 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent);
  }
  50% {
    color: var(--cyan);
    text-shadow:
      0 0 8px var(--cyan),
      0 0 14px color-mix(in srgb, var(--accent) 45%, transparent);
  }
}

@keyframes brand-letter-in {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.82);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes brand-letter-glow {
  0%, 100% {
    border-color: var(--mark-border);
    box-shadow: 0 0 0 1px var(--mark-glow);
    color: var(--text-muted);
  }
  50% {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--mark-border));
    box-shadow:
      0 0 10px color-mix(in srgb, var(--accent) 24%, transparent),
      0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
  }
}

.brand-intel {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.08rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(0.48em + 1px);
  color: var(--text-muted);
  text-transform: uppercase;
  overflow: visible;
  letter-spacing: 0.14em;
  opacity: 0.78;
}

.brand-intel-word {
  display: inline-flex;
  align-items: baseline;
  gap: 0.02rem;
  letter-spacing: 0.12em;
}

.intel-letter {
  display: inline-block;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  animation: brand-letter-roll-i var(--brand-cycle) cubic-bezier(0.55, 0.06, 0.25, 1) 1 forwards;
  animation-delay: var(--roll-delay, 0s);
}

.intel-letter:nth-child(1) { --roll-x: -10.2rem; --roll-delay: 0.32s; }
.intel-letter:nth-child(2) { --roll-x: -10.95rem; --roll-delay: 0.36s; }
.intel-letter:nth-child(3) { --roll-x: -11.7rem; --roll-delay: 0.4s; }
.intel-letter:nth-child(4) { --roll-x: -12.45rem; --roll-delay: 0.44s; }
.intel-letter:nth-child(5) { --roll-x: -13.2rem; --roll-delay: 0.48s; }
.intel-letter:nth-child(6) { --roll-x: -13.95rem; --roll-delay: 0.52s; }
.intel-letter:nth-child(7) { --roll-x: -14.7rem; --roll-delay: 0.56s; }
.intel-letter:nth-child(8) { --roll-x: -15.6rem; --roll-delay: 0.6s; }
.intel-letter:nth-child(9) { --roll-x: -17.4rem; --roll-delay: 0.66s; }
.intel-letter:nth-child(10) { --roll-x: -18.15rem; --roll-delay: 0.7s; }
.intel-letter:nth-child(11) { --roll-x: -18.9rem; --roll-delay: 0.74s; }
.intel-letter:nth-child(12) { --roll-x: -19.65rem; --roll-delay: 0.78s; }

.intel-letter.intel-word-gap {
  width: 0.35em;
  min-width: 0.35em;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.brand-intel-dot {
  display: inline-block;
  color: var(--accent);
  opacity: 0;
  transform: scale(0);
  text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 45%, transparent);
  animation: brand-intel-dot-pulse var(--brand-cycle) ease-in-out 1 forwards;
}

@keyframes cosmos-star-voyage {
  0%, 6% {
    left: 1.15rem;
    top: 0.38rem;
    opacity: 0;
    transform: scale(0.3) rotate(-40deg);
  }
  10% {
    left: 19.5rem;
    top: 0.12rem;
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
  }
  14% {
    left: 19.5rem;
    top: 0.08rem;
    opacity: 1;
    transform: scale(1.05) rotate(15deg);
  }
  18%, 22% {
    left: 20.8rem;
    top: 0.05rem;
    opacity: 1;
    transform: scale(1.35) rotate(35deg);
  }
  26% {
    left: 12.8rem;
    top: 0.1rem;
    opacity: 1;
    transform: scale(1.1) rotate(110deg);
  }
  30%, 38% {
    left: 13.6rem;
    top: 0.08rem;
    opacity: 1;
    transform: scale(1.45) rotate(200deg);
  }
  42% {
    left: 13.6rem;
    top: 0.06rem;
    opacity: 1;
    transform: scale(1.55) rotate(240deg);
  }
  48% {
    left: 1.15rem;
    top: 0.38rem;
    opacity: 0.9;
    transform: scale(0.9) rotate(300deg);
  }
  54%, 66% {
    left: 1.15rem;
    top: 0.32rem;
    opacity: 1;
    transform: scale(1.55) rotate(360deg);
  }
  70% {
    left: 1.15rem;
    top: 0.3rem;
    opacity: 1;
    transform: scale(1.3) rotate(400deg);
  }
  74% {
    left: 1.15rem;
    top: 0.38rem;
    opacity: 1;
    transform: scale(1.5) rotate(440deg);
  }
  78% {
    left: 8rem;
    top: 0.14rem;
    opacity: 0.95;
    transform: scale(1.15) rotate(520deg);
  }
  84% {
    left: 16rem;
    top: 0.1rem;
    opacity: 0.75;
    transform: scale(1) rotate(600deg);
  }
  90% {
    left: 21rem;
    top: 0.06rem;
    opacity: 0.3;
    transform: scale(0.65) rotate(680deg);
  }
  94%, 100% {
    left: 22rem;
    top: 0.04rem;
    opacity: 0;
    transform: scale(0.25) rotate(720deg);
  }
}

@keyframes star-halo-pulse {
  0%, 14% { opacity: 0; transform: scale(0.6); }
  18%, 24% { opacity: 0.85; transform: scale(1.35); }
  28%, 30% { opacity: 0.45; transform: scale(1); }
  32%, 40% { opacity: 0.95; transform: scale(1.5); }
  54%, 68% { opacity: 1; transform: scale(1.75); }
  74%, 100% { opacity: 0; transform: scale(0.5); }
}

@keyframes brand-letter-roll-a {
  0%, 42% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
    filter: blur(0);
  }
  46% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
  }
  56% {
    opacity: 0.15;
    transform: translate3d(var(--roll-x), 0.62rem, -18px) rotateX(92deg) scale(0.18);
    filter: blur(0.6px);
  }
  62%, 72% {
    opacity: 0;
    transform: translate3d(var(--roll-x), 0.72rem, -28px) rotateX(96deg) scale(0);
    filter: blur(1px);
  }
  78% {
    opacity: 0.2;
    transform: translate3d(calc(var(--roll-x) * 0.35), 0.28rem, -8px) rotateX(42deg) scale(0.55);
    filter: blur(0.3px);
  }
  88%, 100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
    filter: blur(0);
  }
}

@keyframes brand-letter-roll-i {
  0%, 42% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
    filter: blur(0);
  }
  46% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
  }
  56% {
    opacity: 0.15;
    transform: translate3d(var(--roll-x), -0.42rem, -18px) rotateX(-88deg) scale(0.18);
    filter: blur(0.6px);
  }
  62%, 72% {
    opacity: 0;
    transform: translate3d(var(--roll-x), -0.52rem, -28px) rotateX(-92deg) scale(0);
    filter: blur(1px);
  }
  78% {
    opacity: 0.2;
    transform: translate3d(calc(var(--roll-x) * 0.35), -0.18rem, -8px) rotateX(-38deg) scale(0.55);
    filter: blur(0.3px);
  }
  88%, 100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
    filter: blur(0);
  }
}

@keyframes brand-mark-absorb {
  0%, 48% {
    transform: scale(1);
    box-shadow:
      0 0 0 1px var(--mark-glow),
      0 0 18px color-mix(in srgb, var(--accent) 12%, transparent);
  }
  56%, 72% {
    transform: scale(1.1);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
      0 0 28px color-mix(in srgb, var(--accent) 35%, transparent),
      0 0 48px color-mix(in srgb, var(--cyan) 18%, transparent),
      inset 0 -6px 14px color-mix(in srgb, var(--accent) 12%, transparent);
  }
  80%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 1px var(--mark-glow),
      0 0 18px color-mix(in srgb, var(--accent) 12%, transparent);
  }
}

@keyframes brand-rollup-a-glow {
  0%, 52% { height: 0; opacity: 0; }
  58%, 70% { height: 1.1rem; opacity: 0.85; }
  78%, 100% { height: 0; opacity: 0; }
}

@keyframes brand-rollup-i-glow {
  0%, 54% { height: 0; opacity: 0; }
  60%, 70% { height: 1.1rem; opacity: 0.85; }
  78%, 100% { height: 0; opacity: 0; }
}

@keyframes logo-char-a-absorb {
  0%, 46% {
    color: var(--accent);
    text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 40%, transparent);
    transform: translateY(0) scale(1);
  }
  56%, 72% {
    color: var(--cyan);
    text-shadow:
      0 0 10px var(--cyan),
      0 0 22px color-mix(in srgb, var(--accent) 55%, transparent);
    transform: translateY(2px) scale(1.22);
  }
  82%, 100% {
    color: var(--accent);
    text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 40%, transparent);
    transform: translateY(0) scale(1);
  }
}

@keyframes logo-char-i-absorb {
  0%, 46% {
    color: var(--accent);
    text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 40%, transparent);
    transform: translateY(0) scale(1);
  }
  58%, 72% {
    color: var(--cyan);
    text-shadow:
      0 0 10px var(--cyan),
      0 0 22px color-mix(in srgb, var(--accent) 55%, transparent);
    transform: translateY(2px) scale(1.22);
  }
  82%, 100% {
    color: var(--accent);
    text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 40%, transparent);
    transform: translateY(0) scale(1);
  }
}

@keyframes brand-intel-dot-pulse {
  0%, 16% { opacity: 0; transform: scale(0); }
  20%, 26% { opacity: 1; transform: scale(1.4); }
  30%, 40% { opacity: 0.5; transform: scale(0.85); }
  44%, 72% { opacity: 0; transform: scale(0); }
  78%, 84% { opacity: 1; transform: scale(1.2); }
  90%, 100% { opacity: 0; transform: scale(0); }
}

@keyframes brand-domain-reveal {
  0%, 26% {
    max-width: 0;
    opacity: 0;
  }
  30%, 42% {
    max-width: 2.8em;
    opacity: 1;
  }
  48%, 100% {
    max-width: 2.8em;
    opacity: 1;
  }
}

@keyframes brand-domain-dot-pop {
  0%, 28% {
    opacity: 0;
    transform: scale(0);
  }
  32% {
    opacity: 1;
    transform: scale(1.35);
  }
  36%, 42% {
    opacity: 1;
    transform: scale(1);
  }
  43%, 100% {
    opacity: 1;
  }
}

@keyframes brand-domain-ai-in {
  0%, 30% {
    opacity: 0;
  }
  34%, 100% {
    opacity: 1;
  }
}

@keyframes brand-domain-sparkle {
  0%, 100% {
    color: var(--accent);
    text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent);
  }
  50% {
    color: var(--cyan);
    text-shadow:
      0 0 10px var(--cyan),
      0 0 18px color-mix(in srgb, var(--accent) 55%, transparent);
  }
}

.brand-intro-done .brand-cosmos-star,
.brand-intro-done .star-halo,
.brand-intro-done .brand-mark-rollup {
  display: none;
  animation: none;
}

.brand-intro-done .brand-mark {
  animation: brand-mark-breathe 4s ease-in-out infinite;
  transform: scale(1);
}

.brand-intro-done .logo-char-a {
  animation: logo-char-pulse 2.4s ease-in-out infinite;
  transform: translateY(0) scale(1);
}

.brand-intro-done .logo-char-i {
  animation: logo-char-pulse 2.4s ease-in-out infinite 0.35s;
  transform: translateY(0) scale(1);
}

/* Static lockup after intro — infinite staggered box-shadow glows strobe (esp. Firefox). */
.brand-intro-done .brand-letter {
  opacity: 1;
  filter: none;
  transform: none;
  animation: none;
  border-color: var(--mark-border);
  box-shadow: 0 0 0 1px var(--mark-glow);
  color: var(--text-muted);
}

.brand-intro-done .brand-letter:nth-child(1),
.brand-intro-done .brand-letter:nth-child(2),
.brand-intro-done .brand-letter:nth-child(3),
.brand-intro-done .brand-letter:nth-child(4),
.brand-intro-done .brand-letter:nth-child(5),
.brand-intro-done .brand-letter:nth-child(6),
.brand-intro-done .brand-letter:nth-child(7),
.brand-intro-done .brand-letter:nth-child(8) {
  animation-delay: 0s;
}

.brand-intro-done .intel-letter {
  opacity: 1;
  filter: none;
  transform: none;
  animation: none;
}

.brand-intro-done .brand-domain {
  animation: none;
  max-width: 2.8em;
  opacity: 1;
}

.brand-intro-done .brand-domain-dot,
.brand-intro-done .brand-domain-ai {
  animation: none;
  opacity: 1;
  filter: none;
  transform: none;
  text-shadow: none;
  color: var(--accent);
}

.brand-intro-done .brand-domain-ai {
  animation-delay: 0.35s;
}

.brand-intro-done .brand-intel-dot {
  animation: none;
  max-width: 0;
  opacity: 0;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark,
  .brand-mark-orbit,
  .brand-mark-scan,
  .brand-mark-rollup,
  .logo-char,
  .brand-letter,
  .intel-letter,
  .brand-intel,
  .brand-intel-dot,
  .brand-domain,
  .brand-domain-dot,
  .brand-domain-ai,
  .brand-cosmos-star,
  .star-halo,
  .tab-dot.is-illuminating,
  .status-dot.is-illuminating,
  .status-dot.is-ignited {
    animation: none;
  }

  .brand-cosmos-star,
  .brand-light-beam {
    display: none;
  }

  .shell-head.status-lights-awaiting .market-tab .tab-dot,
  .shell-head.status-lights-awaiting .market-subtab .tab-dot,
  .shell-head.status-lights-awaiting .status-badge .status-dot,
  .topbar.status-lights-awaiting .market-tab .tab-dot,
  .topbar.status-lights-awaiting .market-subtab .tab-dot,
  .topbar.status-lights-awaiting .status-badge .status-dot,
  body:has(.shell-head.status-lights-awaiting) .spot-mark-row .tab-dot,
  body:has(.topbar.status-lights-awaiting) .spot-mark-row .tab-dot {
    opacity: 1;
    filter: none;
  }

  .brand-domain {
    max-width: 2.8em;
    opacity: 1;
  }

  .brand-domain-dot,
  .brand-domain-ai {
    opacity: 1;
    transform: none;
    animation: none;
    text-shadow: none;
  }
}

/* Firefox: backdrop-filter + animated shadows/glows composite poorly (electric flicker). */
@supports (-moz-appearance: none) {
  .glass,
  .topbar,
  .market-switcher--bar,
  .landing-card.glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .brand-intro-done .brand-mark,
  .brand-intro-done .logo-char-a,
  .brand-intro-done .logo-char-i,
  .brand-mark-orbit,
  .brand-mark-scan {
    animation: none !important;
  }

  [data-theme="light"] .brand-intro-done .brand-letter,
  [data-theme="light"] .brand-intro-done .brand-letter:nth-child(even) {
    animation: none !important;
  }

  .cycle-countdown.tone-choppy .cycle-ring-fg,
  .cycle-countdown.tone-pulse .cycle-ring-fg,
  .cycle-countdown.is-imminent:not(.tone-choppy) .cycle-ring-fg,
  .cycle-countdown-stat:not(.ftp-edge-stat).tone-choppy .cycle-countdown-value,
  .cycle-countdown-stat:not(.ftp-edge-stat).tone-pulse .cycle-countdown-value,
  .cycle-countdown-stat:not(.ftp-edge-stat).is-imminent:not(.tone-choppy) .cycle-countdown-value {
    animation: none !important;
    opacity: 0.9;
  }
  /* Keep FTP Edge pause/pending pulse alive on Windows Server / RDP
     (prefers-reduced-motion often kills CSS animations here). JS also toggles .is-ftp-dim. */

  .live-mark-dot,
  .market-hero-btc-text .label.is-live-mark .live-mark-dot {
    animation: none !important;
  }

  body.mood-bullish .mood-lit,
  body.mood-bearish .mood-lit,
  body.mood-neutral .mood-lit {
    transition: border-color 0.2s ease;
    box-shadow: var(--shadow);
  }
}

.brand-text p,
#brand-subtitle {
  font-family: var(--mono);
  font-size: calc(0.62rem + 2px);
  color: var(--text-faint);
  margin-top: 0.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brand-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.45rem;
  margin-top: 0.05rem;
  font-size: calc(0.62rem + 2px);
  min-width: 0;
}

.brand-meta-row #brand-subtitle {
  margin-top: 0;
  font-size: 1em;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}

.bot-mode-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.22rem 0.45rem;
  border: 1.5px solid var(--accent);
  border-radius: 2px;
  color: var(--accent);
  background: transparent;
  box-shadow: none;
}

.bot-mode-badge[hidden] {
  display: none !important;
}

.bot-mode-badge.bot-mode-badge-logo-wrap {
  padding: 0.1rem 0.15rem;
  border: none;
  background: transparent;
  box-shadow: none;
  line-height: 0;
}

.bot-mode-badge-logo {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
}

/* Bot page identity: Trending = blue, Hedge = amber */
html[data-bot-mode="trending"] {
  --bot-mode-accent: #0369a1;
  --bot-mode-accent-soft: rgba(3, 105, 161, 0.12);
}

html[data-bot-mode="hedge"] {
  --bot-mode-accent: #b45309;
  --bot-mode-accent-soft: rgba(180, 83, 9, 0.12);
}

html[data-bot-mode="trending"] .bot-mode-badge,
html[data-bot-mode="hedge"] .bot-mode-badge {
  color: var(--bot-mode-accent);
  border-color: var(--bot-mode-accent);
}

html[data-bot-mode="trending"] .topbar,
html[data-bot-mode="hedge"] .topbar {
  border-color: var(--bot-mode-accent);
}

html[data-bot-mode="trending"] .market-subtab.is-active,
html[data-bot-mode="hedge"] .market-subtab.is-active {
  color: var(--bot-mode-accent);
  border-bottom-color: var(--bot-mode-accent);
}

html[data-bot-mode="trending"] .market-tab.is-active,
html[data-bot-mode="hedge"] .market-tab.is-active {
  color: var(--bot-mode-accent);
  border-bottom-color: var(--bot-mode-accent);
}

[data-theme="light"][data-bot-mode="trending"] {
  --bot-mode-accent: #0284c7;
  --bot-mode-accent-ink: #ffffff;
  --bot-mode-accent-soft: rgba(2, 132, 199, 0.14);
}

[data-theme="light"][data-bot-mode="hedge"] {
  --bot-mode-accent: #c2410c;
  --bot-mode-accent-ink: #ffffff;
  --bot-mode-accent-soft: rgba(194, 65, 12, 0.14);
}

[data-theme="light"][data-bot-mode="trending"] .bot-mode-badge,
[data-theme="light"][data-bot-mode="hedge"] .bot-mode-badge {
  color: var(--bot-mode-accent-ink);
  background: var(--bot-mode-accent);
  border: 2px solid var(--bot-mode-accent);
  box-shadow: none;
}

[data-theme="light"][data-bot-mode="trending"] .topbar,
[data-theme="light"][data-bot-mode="hedge"] .topbar {
  border-width: 2px;
  border-style: solid;
  border-color: var(--bot-mode-accent);
  box-shadow: none;
}

[data-theme="light"][data-bot-mode="trending"] .market-subtab.is-active,
[data-theme="light"][data-bot-mode="hedge"] .market-subtab.is-active,
[data-theme="light"][data-bot-mode="trending"] .market-tab.is-active,
[data-theme="light"][data-bot-mode="hedge"] .market-tab.is-active {
  color: var(--bot-mode-accent);
  border-bottom-width: 3px;
  border-bottom-color: var(--bot-mode-accent);
  font-weight: 700;
}

[data-theme="light"][data-bot-mode="trending"] #brand-subtitle,
[data-theme="light"][data-bot-mode="hedge"] #brand-subtitle {
  color: var(--bot-mode-accent);
  font-weight: 700;
}

[data-theme="dark"][data-bot-mode="hedge"] {
  --bot-mode-accent: #f59e0b;
  --bot-mode-accent-soft: rgba(245, 158, 11, 0.14);
}

[data-theme="dark"][data-bot-mode="trending"] {
  --bot-mode-accent: #38bdf8;
  --bot-mode-accent-soft: rgba(56, 189, 248, 0.14);
}

.tabs {
  display: flex;
  gap: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--glass-border);
}

.tab {
  font-family: var(--mono);
  font-size: calc(0.68rem + 2px);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.5rem 0.85rem;
  margin-bottom: -1px;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.tab:hover { color: var(--text-muted); }

.tab.active {
  color: var(--accent);
  background: transparent;
  box-shadow: none;
  border-bottom-color: var(--accent);
}

.topbar-actions { display: flex; align-items: center; gap: 0.5rem; }

.topbar-utilities {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-left: 0;
  margin-top: 0;
  padding-top: 0.1rem;
}

.nav-link {
  font-family: var(--mono);
  font-size: calc(0.62rem + 2px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-faint);
  padding: 0.22rem 0.5rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-edge);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.nav-link:hover {
  color: var(--accent);
  border-color: var(--btn-hover-border);
}

.nav-link.is-active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--glass-border));
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated));
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-family: var(--mono);
  font-size: calc(0.85rem + 2px);
  line-height: 1;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 0 var(--glass-edge);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.verify-hl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  padding: 0 0.65rem;
  font-family: var(--mono);
  font-size: calc(0.62rem + 2px);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 0 var(--glass-edge);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.verify-hl-btn .verify-hl-label-short { display: none; }

.verify-hl-btn:hover {
  color: var(--accent);
  border-color: var(--btn-hover-border);
  background: var(--surface-hover);
}

.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--btn-hover-border);
  background: var(--surface-hover);
}

.theme-toggle .theme-icon-moon { display: none; }

[data-theme="light"] .theme-toggle .theme-icon-sun { display: none; }
[data-theme="light"] .theme-toggle .theme-icon-moon { display: inline; }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: calc(0.68rem + 2px);
  letter-spacing: 0.04em;
  font-weight: 500;
  color: var(--text-muted);
  padding: 0.22rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-edge);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
}

.status-badge.live .status-dot {
  background: var(--green);
  box-shadow: 0 0 6px var(--live-glow);
  animation: pulse 2s ease infinite;
}

.status-badge.offline .status-dot { background: var(--red); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.market-hero {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  margin-bottom: 0.65rem;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  isolation: isolate;
}

.market-hero.pf-up .market-hero-btc { background: var(--green-dim); }
.market-hero.pf-down .market-hero-btc { background: var(--red-dim); }

.hero-metrics-5 {
  grid-template-columns: repeat(5, 1fr);
}

.hero-metrics-5 .session-peaks-stat {
  grid-column: 1 / -1;
  border-top: 1px solid color-mix(in srgb, var(--text-muted) 35%, transparent);
  padding-top: 0.55rem;
  margin-top: 0.1rem;
}

.hero-metrics-6 {
  grid-template-columns: repeat(3, 1fr);
}

.session-peaks-stat {
  min-width: 0;
  justify-content: flex-start;
  align-self: start;
}

/* Horizontal divider between top 3 and bottom 3 hero boxes */
.hero-metrics-6 > .mini-stat:nth-child(-n+3) {
  border-bottom: 1px solid color-mix(in srgb, var(--text-muted) 35%, transparent);
}

.hero-metrics-6 > .mini-stat:nth-child(3),
.hero-metrics-6 > .mini-stat:nth-child(6) {
  border-right: none;
}

.hero-metrics-6 .session-peaks-stat {
  grid-column: 1 / -1;
  border-top: 1px solid color-mix(in srgb, var(--text-muted) 35%, transparent);
  padding-top: 0.55rem;
  margin-top: 0.1rem;
}

.hero-metrics-6 .session-range-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.18rem 0;
}

.hero-metrics-6 .session-range-grid-4 .session-range-col {
  padding: 0 0.45rem;
  border-right: 1px solid color-mix(in srgb, var(--text-muted) 35%, transparent);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
  align-items: center;
  text-align: center;
}

.hero-metrics-6 .session-range-grid-4 .session-range-col:first-child {
  padding-left: 0.45rem;
}

.hero-metrics-6 .session-range-grid-4 .session-range-col:last-child {
  border-right: none;
  padding-right: 0.45rem;
}

.session-peaks-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
}

.session-peak-row {
  display: flex;
  flex-direction: column;
}

.session-range-grid {
  display: grid;
  grid-template-columns: 4.1rem repeat(3, minmax(0, 1fr));
  gap: 0.2rem 0.35rem;
  align-items: end;
}

.session-range-grid-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.22rem 0.4rem;
}

.session-range-grid-4 .session-range-label {
  font-size: calc(0.52rem + 2px);
  letter-spacing: 0.02em;
  line-height: 1.25;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  hyphens: none;
  text-align: center;
}

.session-range-grid-4 .session-peak-high,
.session-range-grid-4 .session-range-low {
  font-size: calc(0.62rem + 2px);
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  width: 100%;
}

.session-range-tag-col {
  display: flex;
  align-items: flex-end;
  padding-bottom: 0.05rem;
}

.session-peak-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}

.session-peak-tag.realized {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.14);
  border: 1px solid rgba(59, 130, 246, 0.22);
}

.session-peak-tag.equity {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.22);
}

.session-range-col {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
}

.session-range-label {
  font-size: calc(0.58rem + 2px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.session-range-low {
  font-size: calc(0.82rem + 2px);
  font-weight: 600;
  color: #fca5a5;
}

.session-peaks-stat.above-low .session-range-low {
  color: #fbbf24;
}

.session-peak-values {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.session-peak-high {
  font-size: calc(0.95rem + 2px);
  font-weight: 600;
  color: var(--text);
  line-height: 1.15;
}

.session-peak-now {
  font-size: 0.68rem;
  color: var(--muted);
  white-space: nowrap;
}

.session-peak-divider {
  height: 1px;
  background: var(--glass-border);
  opacity: 0.85;
}

.session-peaks-stat.below-peak .session-peak-high {
  color: #fbbf24;
}

.session-peaks-stat.at-peak .session-peak-high {
  color: var(--green);
}

[data-theme="light"] .session-peak-tag.realized {
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .session-peak-tag.equity {
  color: #047857;
  background: rgba(16, 185, 129, 0.1);
}

.portfolio-chart-wrap {
  margin: 0.5rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
  contain: layout paint;
}

.chart-plot {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}

.chart-plot.interactive {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.chart-plot.interactive.dragging {
  cursor: grabbing;
}

.chart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 1rem 0.5rem;
}

.panel-head-chart {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  padding: 0.55rem 0.85rem;
}

.panel-head-chart > h2 {
  margin: 0;
  flex: 0 0 auto;
}

/* Bot / Live chart source tabs */
.chart-view-tabs {
  display: flex;
  gap: 0;
  flex: 0 0 auto;
  align-items: flex-end;
}

.chart-view-tab {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.chart-view-tab:hover { color: var(--text-muted); }

.chart-view-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.live-tf-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  flex: 1 1 auto;
  max-width: 100%;
}

.live-tf-group[hidden] { display: none; }

.live-tf-btn {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 0.22rem 0.5rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.live-tf-btn:hover { color: var(--text-muted); }

.live-tf-btn.active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--glass-border));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Live Hyperliquid chart */
.live-chart-wrap {
  padding: 0;
  touch-action: none;
  overscroll-behavior: contain;
}

.live-chart-wrap .chart-zoom-overlay {
  z-index: 5;
}

.live-chart-wrap .chart-zoom-reset {
  font-size: 0.62rem;
}

.portfolio-chart-wrap[hidden] { display: none !important; }

.live-chart-plot {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  touch-action: none;
  user-select: none;
}

/* LWC canvas/table under the finger — touch-action is not inherited. */
.live-chart-plot canvas,
.live-chart-plot table,
.live-chart-plot td {
  touch-action: none;
}

.live-bs-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.live-bs-overlay .live-bs-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.live-bs-overlay .hl-bs-markers {
  pointer-events: none;
}

.live-bs-overlay .hl-bs-marker {
  pointer-events: all;
  cursor: pointer;
}

.live-bs-overlay .chart-marker-tooltip {
  z-index: 5;
}

.live-chart-status {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-faint);
  pointer-events: none;
  text-align: center;
  padding: 0 1rem;
}

.live-chart-status.is-hidden { display: none; }

.live-chart-status.is-error { color: var(--red); }

.live-chart-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.6rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  pointer-events: none;
}

.live-chart-badge .live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-faint);
  transition: background 0.2s;
}

.live-chart-badge.is-live .live-dot {
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: live-pulse 1.8s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.chart-head-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem 0.55rem;
  flex: 1 1 12rem;
  min-width: 0;
}

.chart-head-controls .chart-mode-toggle {
  flex: 0 0 auto;
}

.chart-head-controls .chart-range-label {
  flex: 1 1 8rem;
  min-width: 0;
  margin-left: auto;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-tf-fold {
  position: relative;
  flex: 0 0 auto;
}

.chart-tf-fold-btn {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--bg-elevated);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 0.28rem 0.55rem;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.chart-tf-fold-btn:hover,
.chart-tf-fold.open .chart-tf-fold-btn {
  color: var(--accent);
  background: rgba(212, 165, 116, 0.1);
  border-color: rgba(212, 165, 116, 0.25);
}

.chart-tf-fold-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 4.5rem;
  padding: 0.25rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.chart-tf-fold-menu[hidden] {
  display: none !important;
}

.chart-tf-menu-item {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  color: var(--text-faint);
  background: transparent;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-sm) - 2px);
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.chart-tf-menu-item:hover {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
}

.chart-tf-menu-item.active {
  color: var(--accent);
  background: rgba(212, 165, 116, 0.1);
  border-color: rgba(212, 165, 116, 0.25);
}

[data-theme="light"] .chart-tf-menu-item.active,
[data-theme="light"] .chart-tf-fold.open .chart-tf-fold-btn {
  background: rgba(2, 132, 199, 0.08);
  border-color: rgba(2, 132, 199, 0.2);
}

.chart-toolbar-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.chart-mode-toggle,
.chart-timeframes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.2rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}

.chart-zoom-overlay {
  position: absolute;
  right: 0.35rem;
  bottom: 0.35rem;
  z-index: 3;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.08rem;
  padding: 0.12rem 0.18rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  pointer-events: auto;
  touch-action: manipulation;
}

[data-theme="light"] .chart-zoom-overlay {
  background: rgba(255, 255, 255, 0.9);
}

.chart-zoom-overlay .chart-zoom-btn {
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  font-size: 0.68rem;
  line-height: 1;
  font-family: var(--mono);
  font-weight: 500;
  color: var(--text-faint);
  background: transparent;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-sm) - 2px);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.chart-zoom-overlay .chart-zoom-btn:hover:not(:disabled) {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
}

.chart-zoom-overlay .chart-zoom-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.chart-zoom-overlay .chart-zoom-label {
  min-width: 2rem;
  font-size: 0.52rem;
  letter-spacing: 0.03em;
  text-align: center;
  font-family: var(--mono);
  color: var(--text-faint);
}

.chart-zoom-hint {
  font-size: 0.5rem;
  color: var(--text-faint);
  opacity: 0.7;
  white-space: nowrap;
  max-width: 6.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-reset-menu {
  position: absolute;
  z-index: 6;
  transform: translate(-50%, calc(-100% - 0.35rem));
  pointer-events: auto;
  touch-action: manipulation;
}

.chart-reset-menu[hidden] {
  display: none !important;
}

.chart-reset-btn {
  padding: 0.38rem 0.62rem;
  font-size: 0.68rem;
  line-height: 1.2;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.92);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(6px);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

[data-theme="light"] .chart-reset-btn {
  background: rgba(255, 255, 255, 0.95);
}

.chart-reset-btn:hover,
.chart-reset-btn:focus-visible {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(32, 26, 22, 0.96);
}

[data-theme="light"] .chart-reset-btn:hover,
[data-theme="light"] .chart-reset-btn:focus-visible {
  background: rgba(255, 255, 255, 1);
}

.chart-mode-btn,
.chart-tf-btn {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: transparent;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-sm) - 2px);
  padding: 0.28rem 0.55rem;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.chart-mode-btn {
  text-transform: none;
  letter-spacing: 0.02em;
}

.chart-tf-btn:hover {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
}

.chart-mode-btn:hover {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
}

.chart-tf-btn.active {
  color: var(--accent);
  background: rgba(212, 165, 116, 0.1);
  border-color: rgba(212, 165, 116, 0.25);
}

[data-theme="light"] .chart-tf-btn.active {
  background: rgba(2, 132, 199, 0.08);
  border-color: rgba(2, 132, 199, 0.2);
}

.chart-mode-btn.active {
  color: var(--accent);
  background: rgba(212, 165, 116, 0.1);
  border-color: rgba(212, 165, 116, 0.25);
}

[data-theme="light"] .chart-mode-btn.active {
  background: rgba(2, 132, 199, 0.08);
  border-color: rgba(2, 132, 199, 0.2);
}

.chart-range-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  white-space: nowrap;
}

.chart-range-overlay {
  display: none;
}

.chart-plot .chart-range-overlay {
  position: absolute;
  top: 0.35rem;
  right: 0.4rem;
  z-index: 2;
  max-width: calc(100% - 4.25rem);
  padding: 0.15rem 0.3rem;
  font-size: 0.5rem;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-align: right;
  color: var(--text-faint);
  opacity: 0.5;
  pointer-events: none;
  word-break: break-word;
}

.portfolio-chart-wrap > svg,
.chart-plot > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.portfolio-chart,
.btc-chart {
  display: block;
  overflow: visible;
}

.btc-grid {
  stroke: var(--glass-border);
  stroke-width: 1;
  opacity: 0.45;
  shape-rendering: crispEdges;
}

.btc-wick {
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.btc-wick.up { stroke: #3dd68c; }
.btc-wick.down { stroke: #ff6b6b; }

.btc-body {
  stroke: none;
  shape-rendering: crispEdges;
}

.btc-body.up { fill: #3dd68c; }
.btc-body.down { fill: #ff6b6b; }

/* Current-price tag (Hyperliquid-style): pill pinned to the right axis + pulsing dot */
.btc-mark-tag-bg {
  shape-rendering: crispEdges;
  opacity: 0.95;
}
.btc-mark-tag-bg.btc-ov-mark-profit { fill: #3dd68c; }
.btc-mark-tag-bg.btc-ov-mark-loss { fill: #ff6b6b; }
.btc-mark-tag-bg.btc-ov-mark-flat { fill: #c4b5fd; }
.btc-mark-tag-bg.btc-ov-mark-neutral { fill: #5ec8ff; }

.btc-mark-tag-text {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.02em;
  fill: #06111c;
  pointer-events: none;
}

.btc-mark-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: btc-mark-pulse 1.8s ease-out infinite;
}
.btc-mark-pulse.btc-ov-mark-profit { fill: #3dd68c; }
.btc-mark-pulse.btc-ov-mark-loss { fill: #ff6b6b; }
.btc-mark-pulse.btc-ov-mark-flat { fill: #c4b5fd; }
.btc-mark-pulse.btc-ov-mark-neutral { fill: #5ec8ff; }

@keyframes btc-mark-pulse {
  0% { opacity: 0.9; transform: scale(0.7); }
  70% { opacity: 0; transform: scale(2.6); }
  100% { opacity: 0; transform: scale(2.6); }
}

@media (prefers-reduced-motion: reduce) {
  .btc-mark-pulse { animation: none; opacity: 0.85; }
}

.btc-ov {
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.btc-entry-long { stroke: #3dd68c; opacity: 0.9; }
.btc-entry-short { stroke: #ff6b6b; opacity: 0.9; }
.btc-liq { stroke: #ff9944; opacity: 0.95; }
.btc-mark { stroke: #5ec8ff; stroke-dasharray: none; opacity: 0.85; }

.btc-ov-entry-profit,
.btc-ov-mark-profit {
  stroke: #3dd68c;
  opacity: 0.95;
}

.btc-ov-entry-loss,
.btc-ov-mark-loss {
  stroke: #ff6b6b;
  opacity: 0.95;
}

.btc-ov-entry-flat,
.btc-ov-mark-flat {
  stroke: #c4b5fd;
  opacity: 0.9;
}

.btc-ov-entry-neutral {
  stroke: #8b9cb3;
  opacity: 0.85;
}

.btc-ov-mark-neutral {
  stroke: #5ec8ff;
  stroke-dasharray: none;
  opacity: 0.85;
}

.btc-ov-entry-profit,
.btc-ov-entry-loss,
.btc-ov-entry-flat,
.btc-ov-entry-neutral {
  stroke-dasharray: 4 3;
}

.btc-ov-mark-profit,
.btc-ov-mark-loss,
.btc-ov-mark-flat,
.btc-ov-mark-neutral {
  stroke-dasharray: none;
}

.btc-ov-label.btc-ov-entry-profit,
.btc-ov-label.btc-ov-mark-profit { fill: #3dd68c; }
.btc-ov-label.btc-ov-entry-loss,
.btc-ov-label.btc-ov-mark-loss { fill: #ff6b6b; }
.btc-ov-label.btc-ov-entry-flat,
.btc-ov-label.btc-ov-mark-flat { fill: #c4b5fd; }
.btc-ov-label.btc-ov-entry-neutral { fill: #8b9cb3; }
.btc-ov-label.btc-ov-mark-neutral { fill: #5ec8ff; }

.btc-price-rail {
  fill: var(--bg-elevated);
  opacity: 0.78;
  pointer-events: none;
}

.btc-y-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.02em;
  fill: var(--text-faint);
}

.btc-y-label-onchart {
  pointer-events: none;
  paint-order: stroke fill;
  stroke: var(--bg-elevated);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.btc-y-label-rail {
  pointer-events: none;
  font-size: 7.5px;
  font-weight: 500;
  fill: var(--text-muted);
}

.btc-x-label {
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.02em;
  fill: var(--text-faint);
}

.btc-x-label-onchart {
  pointer-events: none;
  paint-order: stroke fill;
  stroke: var(--bg-elevated);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.btc-grid-v {
  opacity: 0.42;
}

.btc-ov-label {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.02em;
  fill: var(--text-faint);
}

.btc-ov-label.btc-entry-long { fill: #3dd68c; }
.btc-ov-label.btc-entry-short { fill: #ff6b6b; }
.btc-ov-label.btc-liq { fill: #ff9944; }
.btc-ov-label.btc-mark { fill: #5ec8ff; }

.btc-mkr { stroke-width: 1.2; }

.btc-mkr-open-long {
  fill: #3dd68c;
  stroke: rgba(61, 214, 140, 0.35);
}

.btc-mkr-open-short {
  fill: #ff6b6b;
  stroke: rgba(255, 107, 107, 0.35);
}

.btc-mkr-close-long {
  fill: rgba(61, 214, 140, 0.15);
  stroke: #3dd68c;
}

.btc-mkr-close-short {
  fill: rgba(255, 107, 107, 0.15);
  stroke: #ff6b6b;
}

.btc-mkr-flip {
  fill: var(--accent);
  stroke: rgba(212, 165, 116, 0.45);
}

.btc-legend-key {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.btc-key-line {
  display: inline-block;
  width: 12px;
  height: 0;
  border-top: 2px dashed currentColor;
}

.btc-key-line.btc-entry-long { color: #3dd68c; border-top-style: dashed; }
.btc-key-line.btc-entry-short { color: #ff6b6b; border-top-style: dashed; }
.btc-key-line.btc-key-entry-profit,
.btc-key-line.btc-key-mark-profit { color: #3dd68c; }
.btc-key-line.btc-key-entry-loss,
.btc-key-line.btc-key-mark-loss { color: #ff6b6b; }
.btc-key-line.btc-key-entry-flat,
.btc-key-line.btc-key-mark-flat { color: #c4b5fd; }
.btc-key-line.btc-key-entry-neutral { color: #8b9cb3; border-top-style: dashed; }
.btc-key-line.btc-key-mark-neutral { color: #5ec8ff; border-top-style: solid; }
.btc-key-line.btc-key-entry-profit,
.btc-key-line.btc-key-entry-loss,
.btc-key-line.btc-key-entry-flat,
.btc-key-line.btc-key-entry-neutral { border-top-style: dashed; }
.btc-key-line.btc-key-mark-profit,
.btc-key-line.btc-key-mark-loss,
.btc-key-line.btc-key-mark-flat,
.btc-key-line.btc-key-mark-neutral { border-top-style: solid; }
.btc-key-line.btc-liq { color: #ff9944; }
.btc-key-line.btc-mark { color: #5ec8ff; border-top-style: solid; }

.hl-bs-marker {
  cursor: pointer;
  pointer-events: all;
}

.hl-bs-markers {
  pointer-events: none;
}

.hl-bs-markers .hl-bs-marker {
  pointer-events: all;
}

.hl-bs-marker .hl-bs-bg {
  pointer-events: all;
}

.chart-marker-tooltip {
  position: absolute;
  z-index: 6;
  max-width: 240px;
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  background: rgba(8, 12, 20, 0.94);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="light"] .chart-marker-tooltip {
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
}

.chart-crosshair {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}

.chart-crosshair-v,
.chart-crosshair-h {
  position: absolute;
  background: rgba(148, 163, 184, 0.55);
  pointer-events: none;
}

.chart-crosshair-v {
  width: 1px;
  transform: translateX(-0.5px);
}

.chart-crosshair-h {
  height: 1px;
  transform: translateY(-0.5px);
}

.chart-crosshair-price,
.chart-crosshair-time {
  position: absolute;
  padding: 0.1rem 0.28rem;
  border-radius: 4px;
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.9);
  color: var(--text-faint);
  font-size: 0.58rem;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  paint-order: normal;
}

.chart-crosshair-price {
  right: 0;
  transform: translateY(-50%);
}

.chart-crosshair-time {
  bottom: 0;
  transform: translateX(-50%);
}

[data-theme="light"] .chart-crosshair-price,
[data-theme="light"] .chart-crosshair-time {
  background: rgba(255, 255, 255, 0.94);
  color: #475569;
}

.hl-bs-marker .hl-bs-bg {
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.hl-bs-marker.buy .hl-bs-bg {
  fill: #143728;
  stroke: #3dd68c;
}

.hl-bs-marker.sell .hl-bs-bg {
  fill: #3d1818;
  stroke: #ff6b6b;
}

.hl-bs-text {
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 700;
  fill: #ffffff;
  pointer-events: none;
}

.hl-bs-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
  margin-right: 0.25rem;
  vertical-align: middle;
}

.hl-bs-key.buy {
  background: #143728;
  color: #3dd68c;
  border: 1px solid #3dd68c;
}

.hl-bs-key.sell {
  background: #3d1818;
  color: #ff6b6b;
  border: 1px solid #ff6b6b;
}

.chart-line-up { stroke: var(--green); stroke-width: 2; fill: none; }
.chart-line-down { stroke: var(--red); stroke-width: 2; fill: none; }
.chart-area-up { fill: var(--green); opacity: 0.12; }
.chart-area-down { fill: var(--red); opacity: 0.12; }
.chart-ref {
  stroke: var(--text-faint);
  stroke-width: 1;
  stroke-dasharray: 5 4;
  opacity: 0.55;
}

.chart-legend {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 0 0 auto;
  padding: 0.45rem 0.75rem;
  border-top: 1px solid var(--glass-border);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.chart-legend-btc {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  gap: 0.75rem;
}

.chart-empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-faint);
}

.panel > .portfolio-chart-wrap { margin-top: 0; }

/* Hyperliquid-style account panel (in-page, scrolls with content) */
.hl-dock {
  margin-top: 0.75rem;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.hl-dock.hl-dock-long {
  border-color: var(--hero-bull-border);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(125, 184, 146, 0.12);
}

.hl-dock.hl-dock-short {
  border-color: var(--hero-bear-border);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(224, 122, 111, 0.12);
}

.hl-dock.hl-dock-mixed {
  border-color: var(--hero-neutral-border);
}

.hl-dock.hl-dock-flat {
  border-color: var(--glass-border);
}

.hl-dock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0 0.35rem 0 0.25rem;
  border-bottom: 1px solid var(--glass-border);
  background: var(--bg-elevated);
}

.hl-dock.hl-dock-long .hl-dock-head {
  background: linear-gradient(180deg, var(--green-dim), var(--bg-elevated) 88%);
}

.hl-dock.hl-dock-short .hl-dock-head {
  background: linear-gradient(180deg, var(--red-dim), var(--bg-elevated) 88%);
}

.hl-dock-summary {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  padding: 0.35rem 0.65rem 0.35rem 0;
  white-space: nowrap;
}

.hl-dock-summary-flat { color: var(--text-faint); }

.hl-dock-summary-long { color: var(--green); }

.hl-dock-summary-short { color: var(--red); }

.hl-tab-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.15rem;
  height: 1.15rem;
  margin-left: 0.35rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  font-size: 0.58rem;
  line-height: 1;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
}

.hl-dock-tab.active .hl-tab-badge {
  color: var(--accent);
  border-color: rgba(212, 165, 116, 0.35);
  background: rgba(212, 165, 116, 0.12);
}

.hl-dock.hl-dock-long .hl-dock-tab.active[data-dock-tab="positions"],
.hl-dock.hl-dock-long .hl-dock-tab.active[data-dock-tab="positions"] .hl-tab-badge {
  color: var(--green);
  border-bottom-color: var(--green);
}

.hl-dock.hl-dock-short .hl-dock-tab.active[data-dock-tab="positions"],
.hl-dock.hl-dock-short .hl-dock-tab.active[data-dock-tab="positions"] .hl-tab-badge {
  color: var(--red);
  border-bottom-color: var(--red);
}

.hl-dock-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.hl-dock-tabs::-webkit-scrollbar { display: none; }

.hl-dock-tab {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.65rem 0.9rem;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}

.hl-dock-tab:hover { color: var(--text-muted); }

.hl-dock-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.hl-dock-body {
  padding: 0;
}

.hl-dock-pane {
  display: none;
}

.hl-dock-pane.active { display: block; }

.hl-dock-table-wrap {
  overflow-x: auto;
}

.hl-dock-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.68rem;
}

.hl-dock-table th {
  text-align: left;
  padding: 0.55rem 0.75rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--glass-border);
}

.hl-dock-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  white-space: nowrap;
}

.hl-dock-table tbody tr:hover { background: var(--table-row-hover); }

.hl-pos-row.long {
  background: linear-gradient(90deg, var(--green-dim) 0%, transparent 72%);
}

.hl-pos-row.short {
  background: linear-gradient(90deg, var(--red-dim) 0%, transparent 72%);
}

.hl-pos-row.long td:first-child {
  box-shadow: inset 3px 0 0 var(--green);
}

.hl-pos-row.short td:first-child {
  box-shadow: inset 3px 0 0 var(--red);
}

.hl-pos-row.long .hl-size,
.hl-pos-row.long .hl-mark {
  color: var(--green);
}

.hl-pos-row.short .hl-size,
.hl-pos-row.short .hl-mark {
  color: var(--red);
}

.hl-side-pill {
  display: inline-block;
  padding: 0.14rem 0.45rem;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hl-side-pill.long {
  color: var(--green);
  background: var(--green-dim);
  border: 1px solid rgba(125, 184, 146, 0.35);
}

.hl-side-pill.short {
  color: var(--red);
  background: var(--red-dim);
  border: 1px solid rgba(224, 122, 111, 0.35);
}

.hl-trade-row.long td:first-child { box-shadow: inset 2px 0 0 rgba(125, 184, 146, 0.55); }
.hl-trade-row.short td:first-child { box-shadow: inset 2px 0 0 rgba(224, 122, 111, 0.55); }

.hl-flip-arrow {
  color: var(--text-faint);
  margin: 0 0.15rem;
}

.hl-size.long { color: var(--green); }
.hl-size.short { color: var(--red); }

.hl-balance-card.positive .value { color: var(--green); }
.hl-balance-card.negative .value { color: var(--red); }

.hl-dock-empty {
  display: grid;
  place-items: center;
  min-height: 120px;
  padding: 1.5rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-faint);
}

.hl-dock-badge {
  display: inline-block;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--glass-border);
}

.hl-dock-badge.open { color: var(--green); border-color: rgba(52, 211, 153, 0.35); }
.hl-dock-badge.close { color: var(--red); border-color: rgba(248, 113, 113, 0.35); }
.hl-dock-badge.partial { color: var(--accent); border-color: rgba(212, 165, 116, 0.35); }
.hl-dock-badge.add { color: #93c5fd; border-color: rgba(147, 197, 253, 0.35); }
.hl-dock-badge.flip { color: #c4b5fd; border-color: rgba(196, 181, 253, 0.35); }

.hl-trade-fee {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.hl-trade-history-wrap {
  overflow: auto;
  max-height: min(55vh, 520px);
  overscroll-behavior: contain;
}

.hl-trade-history-table {
  min-width: 980px;
}

.hl-trade-history-table .hl-trade-time {
  white-space: nowrap;
  font-size: 0.68rem;
}

.hl-trade-history-table .hl-trade-type {
  white-space: nowrap;
  font-weight: 600;
}

.hl-trade-history-table .hl-trade-role,
.hl-trade-history-table .hl-trade-coin {
  color: var(--text-muted);
}

.hl-trade-history-table .hl-trade-size {
  white-space: nowrap;
}

.hl-balances-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0.85rem 0.75rem 0.5rem;
}

.hl-balance-card {
  padding: 0.75rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}

.hl-balance-card .label {
  display: block;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.35rem;
}

.hl-balance-card .value {
  font-family: var(--mono);
  font-size: 0.92rem;
  color: var(--text);
}

.hl-balance-card .hint {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--text-faint);
}

.market-hero-btc {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0.26rem 0.41rem;
  border-right: 1px solid var(--glass-border);
  min-width: 180px;
  max-width: 225px;
  flex-shrink: 0;
  background: var(--hero-btc-bg);
  max-height: min(70vh, 390px);
  overflow-y: auto;
}

.spot-mark-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.spot-mark-row {
  appearance: none;
  border: 0;
  background: transparent;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.41rem 0.38rem;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  position: relative;
  transition: background var(--desk-fast) var(--desk-ease);
}

.spot-mark-row + .spot-mark-row {
  border-top: 1px solid color-mix(in srgb, var(--glass-border) 80%, transparent);
  border-radius: 0;
}

.spot-mark-row:hover {
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.spot-mark-row.is-active {
  background: color-mix(in srgb, var(--amber) 10%, transparent);
}

.spot-mark-row.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 3px;
  border-radius: 1px;
  background: var(--accent);
  opacity: 1;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: opacity var(--desk-fast) var(--desk-ease), background var(--desk-ui) ease;
}

.spot-mark-row .tab-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  min-width: 7px;
  min-height: 7px;
  border-radius: 50%;
  margin-right: 0;
  background: var(--red);
  vertical-align: middle;
  box-shadow: 0 0 6px color-mix(in srgb, var(--red) 55%, transparent);
  animation: pulse 2s ease infinite;
  transition: background 0.2s, box-shadow 0.2s, opacity 0.2s, filter 0.2s, transform 0.2s;
}

.spot-mark-row.is-live .tab-dot {
  background: var(--green);
  box-shadow: 0 0 6px var(--live-glow);
  animation: pulse 2s ease infinite;
}

.spot-mark-row .stat-icon {
  width: 30px;
  height: 30px;
}

.spot-mark-row .stat-sticker {
  width: 30px;
  height: 30px;
}

.spot-mark-row .market-hero-btc-text {
  flex: 1 1 auto;
  min-width: 0;
}

.spot-mark-row .market-hero-btc-text .value {
  font-size: 0.79rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spot-mark-row .spot-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
  min-width: 0;
  width: 100%;
}

.spot-mark-row .spot-day-pct {
  flex: 0 0 auto;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  white-space: nowrap;
}

.spot-mark-row .spot-day-pct.pnl-positive { color: var(--green); }
.spot-mark-row .spot-day-pct.pnl-negative { color: var(--red); }

.spot-mark-row .market-hero-btc-text .hint {
  font-size: 0.53rem;
  color: var(--text-faint);
}

.market-hero-btc-top {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.market-hero-btc-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.market-hero-btc-text .label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.live-mark-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  opacity: 0.45;
  transition: background 0.25s, opacity 0.25s, box-shadow 0.25s;
}

.market-hero-btc-text .label.is-live-mark .live-mark-dot {
  background: var(--green);
  opacity: 1;
  box-shadow: 0 0 6px var(--green);
  animation: live-pulse 1.8s ease-in-out infinite;
}

.market-hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  flex: 1;
  gap: 0;
}

.mini-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1.1rem;
  border-right: 1px solid var(--glass-border);
}

.mini-stat:last-child { border-right: none; }

.mini-value {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.market-hero.bullish { border-color: var(--hero-bull-border); }
.market-hero.bearish { border-color: var(--hero-bear-border); }
.market-hero.neutral { border-color: var(--glass-border); }

.market-hero.bullish .market-hero-btc { background: var(--green-dim); }
.market-hero.bearish .market-hero-btc { background: var(--red-dim); }

.sentiment-mini.bullish .mini-value { color: var(--green); }
.sentiment-mini.bearish .mini-value { color: var(--red); }
.sentiment-mini.neutral .mini-value { color: var(--yellow); }

.position-mini.long .mini-value,
.mini-value.side-long { color: var(--green); }
.position-mini.short .mini-value,
.mini-value.side-short { color: var(--red); }
.position-mini.flat .mini-value { color: var(--text-faint); }

/* Left rail: markets stickers + weekly PnL under the classic hero grid */
.market-hero .hero-rail-stack {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-width: 180px;
  max-width: 225px;
  border-right: 1px solid var(--glass-border);
  background: var(--hero-btc-bg);
}

.market-hero .hero-rail-stack .market-hero-btc {
  border-right: none;
  min-width: 0;
  max-width: none;
  max-height: min(48vh, 280px);
  background: transparent;
}

.market-hero .weekly-float-widget {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.45rem 0.55rem 0.55rem;
  border-top: 1px solid var(--glass-border);
  background: transparent;
}

.market-hero .weekly-float-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
}

.market-hero .weekly-float-title {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.market-hero .weekly-float-sub {
  font-size: 0.58rem;
  color: var(--text-faint);
}

.market-hero .weekly-float-live {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.market-hero .weekly-float-live .weekly-float-label {
  font-size: 0.58rem;
  color: var(--text-faint);
}

.market-hero .weekly-float-live .weekly-float-value {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.15;
}

.market-hero .weekly-float-live .weekly-float-meta {
  font-size: 0.58rem;
  color: var(--text-faint);
}

.market-hero .weekly-float-records {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.market-hero .weekly-float-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
}

.market-hero .weekly-float-label {
  font-size: 0.58rem;
  color: var(--text-faint);
}

.market-hero .weekly-float-value {
  font-size: 0.72rem;
  font-weight: 500;
}

.market-hero .weekly-float-value.pnl-positive { color: var(--green); }
.market-hero .weekly-float-value.pnl-negative { color: var(--red); }

@media (max-width: 820px) {
  .market-hero {
    flex-wrap: wrap;
  }

  .market-hero .hero-rail-stack {
    min-width: 0;
    max-width: none;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--glass-border);
  }

  .market-hero .hero-rail-stack .market-hero-btc {
    max-height: none;
  }

  .market-hero .market-hero-metrics {
    width: 100%;
  }
}

/* ── Legacy tourbillon overrides (inactive without .hero-tourbillon) ─ */
#market-hero.hero-tourbillon.hero-stage,
#market-hero.hero-tourbillon {
  display: flex;
  align-items: stretch;
  gap: 0.9rem;
  padding: 0;
  margin-bottom: 0.9rem;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible;
  isolation: isolate;
}

/* Markets rail + floating weekly widget column */
#market-hero.hero-tourbillon .hero-rail-stack {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 180px;
  max-width: 225px;
  width: min(225px, 100%);
  align-self: stretch;
}

/* Markets sidebar — own isolated glass card */
#market-hero.hero-tourbillon .spot-rail.market-hero-btc,
#market-hero.hero-tourbillon #spot-mark-box.spot-rail {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  width: 100%;
  max-height: min(46vh, 300px);
  border-right: none !important;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  overflow-y: auto;
  align-self: stretch;
}

/* Weekly PnL — floating glass under markets */
#market-hero.hero-tourbillon .weekly-float-widget {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.55rem 0.65rem 0.6rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
}
#market-hero.hero-tourbillon .weekly-float-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
}
#market-hero.hero-tourbillon .weekly-float-title {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
#market-hero.hero-tourbillon .weekly-float-sub {
  font-size: 0.68rem;
  color: var(--text-faint);
  white-space: nowrap;
}
#market-hero.hero-tourbillon .weekly-float-live {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 0.45rem;
  row-gap: 0.12rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid color-mix(in srgb, var(--glass-border) 85%, transparent);
}
#market-hero.hero-tourbillon .weekly-float-live .weekly-float-label {
  grid-column: 1;
  grid-row: 1;
}
#market-hero.hero-tourbillon .weekly-float-live .weekly-float-value {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 0.95rem;
  font-weight: 650;
}
#market-hero.hero-tourbillon .weekly-float-live .weekly-float-meta {
  grid-column: 1;
  grid-row: 2;
  font-size: 0.66rem;
  color: var(--text-faint);
}
#market-hero.hero-tourbillon .weekly-float-records {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
#market-hero.hero-tourbillon .weekly-float-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
#market-hero.hero-tourbillon .weekly-float-label {
  font-size: 0.68rem;
  color: var(--text-muted);
}
#market-hero.hero-tourbillon .weekly-float-value {
  font-size: 0.78rem;
  color: var(--text);
  text-align: right;
}
#market-hero.hero-tourbillon .weekly-float-value.pnl-positive {
  color: var(--green);
}
#market-hero.hero-tourbillon .weekly-float-value.pnl-negative {
  color: var(--red);
}

/* Floating tourbillon deck — inherits mood lightning (no box) */
#market-hero.hero-tourbillon .tb-float-deck {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.05rem 0.15rem 0.1rem;
  overflow: visible;
}
#market-hero.hero-tourbillon .tb-float-deck.mood-lit,
body.mood-bullish #market-hero.hero-tourbillon .tb-float-deck.mood-lit,
body.mood-bearish #market-hero.hero-tourbillon .tb-float-deck.mood-lit,
body.mood-neutral #market-hero.hero-tourbillon .tb-float-deck.mood-lit {
  /* Lightning lives on dials, not a framing box */
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Mood lightning — same brightness as yellow choppy FTP pause aura */
body.mood-bullish #market-hero.hero-tourbillon .tb-float-deck.mood-lit {
  --tb-lightning: color-mix(in srgb, var(--green) 92%, transparent);
  --tb-lightning-soft: color-mix(in srgb, var(--green) 55%, transparent);
  --tb-lightning-line: color-mix(in srgb, var(--green) 95%, transparent);
}
body.mood-bearish #market-hero.hero-tourbillon .tb-float-deck.mood-lit {
  --tb-lightning: color-mix(in srgb, var(--red) 92%, transparent);
  --tb-lightning-soft: color-mix(in srgb, var(--red) 55%, transparent);
  --tb-lightning-line: color-mix(in srgb, var(--red) 95%, transparent);
}
body.mood-neutral #market-hero.hero-tourbillon .tb-float-deck.mood-lit {
  --tb-lightning: color-mix(in srgb, var(--yellow, #e6c84a) 92%, transparent);
  --tb-lightning-soft: color-mix(in srgb, var(--yellow, #e6c84a) 55%, transparent);
  --tb-lightning-line: color-mix(in srgb, var(--yellow, #e6c84a) 95%, transparent);
}
#market-hero.hero-tourbillon .tb-float-deck.mood-lit .mini-stat.tb-dial .pos-tb-scope {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--pos-tb-ring) 70%, transparent),
    0 0 0 1px color-mix(in srgb, var(--tb-lightning-line, transparent) 70%, transparent),
    0 0 14px var(--tb-lightning-soft, transparent),
    0 6px 18px rgba(0, 0, 0, 0.22),
    inset 0 0 12px color-mix(in srgb, var(--pos-tb-sweep) 8%, transparent);
}
/* Mood light ring — match choppy FTP rim beacon intensity */
#market-hero.hero-tourbillon .tb-float-deck.mood-lit .mini-stat.tb-dial::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 6;
  box-shadow:
    inset 0 0 0 1.5px var(--tb-lightning-line, var(--accent)),
    inset 0 0 4px var(--tb-lightning-soft, transparent),
    0 0 6px var(--tb-lightning, transparent),
    0 0 12px var(--tb-lightning-soft, transparent);
  opacity: 1;
}
#market-hero.hero-tourbillon .tb-float-deck.mood-lit .mini-stat.tb-dial {
  filter: drop-shadow(0 0 10px var(--tb-lightning-soft, transparent));
}
#market-hero.hero-tourbillon .tb-float-deck.mood-lit .session-peaks-stat {
  border-top-color: var(--tb-lightning-line, var(--text-muted)) !important;
  filter: drop-shadow(0 0 10px var(--tb-lightning-soft, transparent));
}

#market-hero.hero-tourbillon .market-hero-metrics {
  gap: 0.45rem 0.5rem;
  padding: 0.2rem 0.1rem 0.1rem;
  align-items: start;
  justify-items: center;
  background: transparent;
  container-type: inline-size;
  width: 100%;
}
#market-hero.hero-tourbillon .hero-metrics-5,
#market-hero.hero-tourbillon .hero-metrics-6 {
  border: none;
}
#market-hero.hero-tourbillon .hero-metrics-5 {
  /* 5 dials on top row — each cell equals dial size */
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
#market-hero.hero-tourbillon .hero-metrics-6 {
  /* 3×2 dials, then Session Range bar full width */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#market-hero.hero-tourbillon .mini-stat,
#market-hero.hero-tourbillon .hero-metrics-6 > .mini-stat:nth-child(-n+3) {
  border: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-top: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0;
  margin: 0;
}
body.mood-bullish #market-hero.hero-tourbillon.mood-lit .mini-stat.tb-dial,
body.mood-bearish #market-hero.hero-tourbillon.mood-lit .mini-stat.tb-dial,
body.mood-neutral #market-hero.hero-tourbillon.mood-lit .mini-stat.tb-dial {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#market-hero.hero-tourbillon .mini-stat.tb-dial {
  --pos-tb-sweep: color-mix(in srgb, var(--text-faint) 55%, var(--accent) 45%);
  --pos-tb-ring: color-mix(in srgb, var(--text-faint) 55%, transparent);
  --pos-tb-grid: color-mix(in srgb, var(--text-faint) 40%, transparent);
  --pos-tb-metal: color-mix(in srgb, var(--text-muted) 55%, var(--text-faint) 45%);
  /* Soften sweep-tone swaps so cluster flips don't flash a second color blink */
  transition: filter 1.8s ease;
  position: relative;
  display: block;
  justify-self: center;
  align-self: start;
  text-align: center;
  /* Mid size — fits price bar below without scrolling, not cramped */
  width: min(100%, 19.5rem);
  max-width: 19.5rem;
  /* True circle: height locked to width — avoid grid-stretch ovals / tilt */
  aspect-ratio: 1 / 1;
  height: auto !important;
  min-width: 0;
  min-height: 0;
  /* Visible so mood / FTP aura rings can sit outside the face */
  overflow: visible;
  container-type: size;
  border-radius: 50%;
  transform: none !important;
  transform-style: flat;
  perspective: none;
}
#market-hero.hero-tourbillon .hero-metrics-5 .mini-stat.tb-dial {
  width: min(100%, 17rem);
  max-width: 17rem;
}
#market-hero.hero-tourbillon .mini-stat.tb-dial.pf-up,
#market-hero.hero-tourbillon .mini-stat.tb-dial.tb-flip-long,
#market-hero.hero-tourbillon .position-mini.tb-dial.long {
  --pos-tb-sweep: var(--green);
}
#market-hero.hero-tourbillon .mini-stat.tb-dial.pf-down,
#market-hero.hero-tourbillon .mini-stat.tb-dial.tb-flip-short,
#market-hero.hero-tourbillon .position-mini.tb-dial.short {
  --pos-tb-sweep: var(--red);
}
#market-hero.hero-tourbillon .mini-stat.portfolio-value.pf-up,
#market-hero.hero-tourbillon .mini-stat.portfolio-value.pf-down,
#market-hero.hero-tourbillon .mini-stat.portfolio-value.pf-flat {
  background: transparent !important;
}
#market-hero.hero-tourbillon .position-mini.tb-dial.flat,
#market-hero.hero-tourbillon .mini-stat.tb-dial.tb-flip-flat,
#market-hero.hero-tourbillon .mini-stat.tb-dial.pf-flat {
  --pos-tb-sweep: color-mix(in srgb, var(--text-faint) 70%, var(--accent) 30%);
}
#market-hero.hero-tourbillon .position-mini.tb-dial.hedge-pair {
  --pos-tb-sweep: color-mix(in srgb, var(--accent) 55%, var(--yellow, #e6c84a) 45%);
}

.pos-tb-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  color: var(--pos-tb-sweep);
}
.pos-tb-scope {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 42%,
      color-mix(in srgb, var(--pos-tb-sweep) 6%, transparent) 0%,
      transparent 58%
    ),
    radial-gradient(
      circle at 50% 50%,
      color-mix(in srgb, var(--bg-elevated) 86%, #0a1210 14%) 0%,
      color-mix(in srgb, var(--bg) 92%, #05080a 8%) 100%
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--pos-tb-ring) 65%, transparent),
    0 0 12px color-mix(in srgb, var(--pos-tb-sweep) 7%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--pos-tb-sweep) 4%, transparent);
  transition:
    box-shadow 0.7s ease,
    background 0.7s ease,
    filter 0.7s ease;
}

/* Instrument plate / gauge ticks (desk aesthetic) */
.pos-tb-hd {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
  color: var(--pos-tb-sweep);
  opacity: 0.92;
}
.pos-tb-hd .tb-bezel-ring {
  stroke: color-mix(in srgb, var(--pos-tb-metal) 45%, transparent);
  stroke-width: 1.2;
  opacity: 0.65;
}
.pos-tb-hd .tb-bezel-inner {
  stroke: color-mix(in srgb, var(--pos-tb-metal) 40%, transparent);
  stroke-width: 0.7;
  opacity: 0.45;
}
.pos-tb-hd .tb-tick-min {
  stroke: color-mix(in srgb, var(--text-faint) 65%, transparent);
  stroke-width: 0.45;
  opacity: 0.4;
}
.pos-tb-hd .tb-tick-maj {
  stroke: color-mix(in srgb, var(--pos-tb-sweep) 55%, var(--text-muted) 45%);
  stroke-width: 0.95;
  stroke-linecap: round;
  opacity: 0.7;
}
.pos-tb-hd .tb-hub {
  stroke: color-mix(in srgb, var(--pos-tb-metal) 55%, transparent);
  stroke-width: 0.85;
  opacity: 0.5;
}
.pos-tb-hd .tb-hub-core {
  fill: color-mix(in srgb, var(--pos-tb-sweep) 50%, var(--text-muted) 50%);
  opacity: 0.55;
}

.pos-tb-grid {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  z-index: 1;
  background:
    linear-gradient(
      to right,
      transparent 0%,
      transparent calc(50% - 0.35px),
      var(--pos-tb-grid) 50%,
      transparent calc(50% + 0.35px),
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent calc(50% - 0.35px),
      var(--pos-tb-grid) 50%,
      transparent calc(50% + 0.35px),
      transparent 100%
    );
}
.pos-tb-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1px solid var(--pos-tb-ring);
  opacity: 0.38;
  z-index: 1;
}
.pos-tb-ring.r1 { width: 36%; height: 36%; }
.pos-tb-ring.r2 { width: 58%; height: 58%; opacity: 0.28; }
.pos-tb-ring.r3 { width: 80%; height: 80%; opacity: 0.22; border-style: solid; }
.pos-tb-carriage {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}
.pos-tb-carriage.c1 {
  width: 64%;
  height: 64%;
  animation: pos-tb-spin var(--tb-spin-a, 9.5s) linear infinite;
  animation-delay: var(--tb-delay, 0s);
}
.pos-tb-carriage.c2 {
  width: 46%;
  height: 46%;
  animation: pos-tb-spin-rev var(--tb-spin-b, 14s) linear infinite;
  animation-delay: var(--tb-delay, 0s);
}
.pos-tb-carriage.c3 {
  width: 22%;
  height: 22%;
  animation: pos-tb-spin var(--tb-spin-c, 6s) linear infinite;
  animation-delay: var(--tb-delay, 0s);
  border: 1px solid color-mix(in srgb, var(--pos-tb-metal) 45%, transparent);
  background: radial-gradient(
    circle at 40% 35%,
    color-mix(in srgb, #fff 14%, transparent),
    color-mix(in srgb, var(--bg-elevated) 40%, transparent) 70%
  );
  box-shadow: inset 0 0 6px color-mix(in srgb, var(--pos-tb-sweep) 25%, transparent);
}
.pos-tb-bridge {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 1px;
  translate: 0 -50%;
  border-radius: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--pos-tb-metal) 55%, transparent) 18%,
    color-mix(in srgb, var(--pos-tb-sweep) 35%, var(--pos-tb-metal) 65%) 50%,
    color-mix(in srgb, var(--pos-tb-metal) 55%, transparent) 82%,
    transparent 100%
  );
  opacity: 0.55;
}
.pos-tb-bridge.b0 { transform: rotate(0deg); }
.pos-tb-bridge.b30 { transform: rotate(30deg); }
.pos-tb-bridge.b36 { transform: rotate(36deg); }
.pos-tb-bridge.b45 { transform: rotate(45deg); }
.pos-tb-bridge.b72 { transform: rotate(72deg); }
.pos-tb-bridge.b90 { transform: rotate(90deg); }
.pos-tb-bridge.b120 { transform: rotate(120deg); }
.pos-tb-bridge.b144 { transform: rotate(144deg); }
.pos-tb-bridge.b240 { transform: rotate(240deg); }
.pos-tb-carriage.tb-reticle .pos-tb-bridge {
  height: 1px;
  opacity: 0.45;
}
.pos-tb-carriage.tb-signal .pos-tb-bridge {
  opacity: 0.55;
}
.pos-tb-carriage.tb-open .pos-tb-bridge {
  opacity: 0.35;
}
.pos-tb-pip {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0.75;
}
.pos-tb-pip.tb-pip-long {
  top: 8%;
  left: 50%;
  translate: -50% 0;
  background: color-mix(in srgb, var(--green) 70%, transparent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--green) 40%, transparent);
}
.pos-tb-pip.tb-pip-short {
  bottom: 8%;
  left: 50%;
  translate: -50% 0;
  background: color-mix(in srgb, var(--red) 70%, transparent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--red) 40%, transparent);
}
.pos-tb-balance {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10%;
  height: 10%;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--pos-tb-metal) 45%, transparent);
  background:
    radial-gradient(circle at 40% 35%, color-mix(in srgb, #fff 10%, transparent), transparent 55%),
    color-mix(in srgb, var(--bg-elevated) 55%, transparent);
  box-shadow: inset 0 0 4px color-mix(in srgb, var(--pos-tb-sweep) 12%, transparent);
  animation: pos-tb-balance 4.5s ease-in-out infinite;
  z-index: 3;
  opacity: 0.7;
}
.pos-tb-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    transparent 78%,
    color-mix(in srgb, var(--pos-tb-sweep) 3%, transparent) 88%,
    color-mix(in srgb, var(--pos-tb-sweep) 16%, transparent) 96%,
    transparent 100%
  );
  animation: pos-tb-spin var(--tb-sweep, 3.6s) linear infinite;
  animation-delay: var(--tb-delay, 0s);
  mix-blend-mode: soft-light;
  opacity: 0.42;
  z-index: 1;
}
.pos-tb-blip {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  background: var(--pos-tb-sweep);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--bg) 70%, transparent),
    0 0 12px color-mix(in srgb, var(--pos-tb-sweep) 70%, transparent);
  opacity: 0.28;
  z-index: 3;
  transition: top 0.45s ease, left 0.45s ease, opacity 0.35s ease;
}
.position-mini.tb-dial.flat .pos-tb-blip { opacity: 0.22; top: 50%; left: 50%; }
.position-mini.tb-dial.long .pos-tb-blip { opacity: 1; top: 22%; left: 58%; }
.position-mini.tb-dial.short .pos-tb-blip { opacity: 1; top: 78%; left: 42%; }
.position-mini.tb-dial.hedge-pair .pos-tb-blip { opacity: 1; top: 28%; left: 70%; }

/* —— Per-metric instrument personalities (trading desk) —— */
.pos-tb-face[data-tb-kind="balance"] .pos-tb-ring.r2 {
  opacity: 0.4;
  border-style: solid;
}
.pos-tb-face[data-tb-kind="balance"] .pos-tb-hd .tb-tick-maj {
  opacity: 0.8;
}

.pos-tb-face[data-tb-kind="upnl"] .pos-tb-grid { opacity: 0.1; }
.pos-tb-face[data-tb-kind="upnl"] .pos-tb-sweep {
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    transparent 44%,
    color-mix(in srgb, var(--green) 6%, transparent) 49%,
    transparent 54%,
    transparent 82%,
    color-mix(in srgb, var(--red) 6%, transparent) 90%,
    transparent 100%
  );
  opacity: 0.32;
}

.pos-tb-face[data-tb-kind="position"] .pos-tb-ring.r1,
.pos-tb-face[data-tb-kind="position"] .pos-tb-ring.r2 {
  opacity: 0.48;
}
.pos-tb-face[data-tb-kind="position"] .pos-tb-hd .tb-tick-maj {
  stroke-width: 1.25;
}
.pos-tb-face[data-tb-kind="position"] .pos-tb-sweep {
  background: conic-gradient(
    from 200deg,
    transparent 0%,
    transparent 84%,
    color-mix(in srgb, var(--pos-tb-sweep) 4%, transparent) 91%,
    color-mix(in srgb, var(--pos-tb-sweep) 14%, transparent) 97%,
    transparent 100%
  );
  opacity: 0.4;
}
.pos-tb-face[data-tb-kind="position"] .tb-radar {
  width: 68%;
  height: 68%;
}

.pos-tb-face[data-tb-kind="margin"] .pos-tb-ring.r1 {
  border-width: 1.5px;
  opacity: 0.5;
}
.pos-tb-face[data-tb-kind="margin"] .pos-tb-ring.r2 {
  border-width: 1.25px;
  opacity: 0.42;
}

.pos-tb-face[data-tb-kind="available"] .pos-tb-grid { opacity: 0.08; }
.pos-tb-face[data-tb-kind="available"] .pos-tb-ring.r3 { opacity: 0.14; }
.pos-tb-face[data-tb-kind="available"] .pos-tb-scope {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--pos-tb-ring) 55%, transparent),
    0 0 14px color-mix(in srgb, var(--pos-tb-sweep) 8%, transparent),
    inset 0 0 20px color-mix(in srgb, #fff 3%, transparent);
}

.pos-tb-face[data-tb-kind="winrate"] .pos-tb-scope::after {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    color-mix(in srgb, var(--green) 9%, transparent) 0 90deg,
    color-mix(in srgb, var(--text-faint) 6%, transparent) 90deg 180deg,
    color-mix(in srgb, var(--red) 8%, transparent) 180deg 270deg,
    color-mix(in srgb, var(--yellow, #e6c84a) 7%, transparent) 270deg 360deg
  );
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: soft-light;
}

.pos-tb-face[data-tb-kind="ftp"] .pos-tb-hd .tb-tick-maj {
  opacity: 0.85;
}
.pos-tb-face[data-tb-kind="ftp"] .tb-signal {
  width: 62%;
  height: 62%;
}

.pos-tb-face[data-tb-kind="scan"] .pos-tb-ring.r1 {
  width: 44%;
  height: 44%;
  opacity: 0.5;
}
.pos-tb-face[data-tb-kind="scan"] .pos-tb-balance {
  width: 12%;
  height: 12%;
  animation-duration: 2.4s;
}

.pos-tb-core {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2cqi;
  width: 100%;
  height: 100%;
  min-height: 0;
  /* Circle-safe inset: keep content inside the chord, not the square corners */
  padding: 22% 18% 16%;
  box-sizing: border-box;
  pointer-events: auto;
  text-align: center;
}
#market-hero.hero-tourbillon .pos-tb-core > .label {
  position: absolute !important;
  top: 9%;
  left: 50%;
  translate: -50% 0;
  transform: none !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  z-index: 5;
  margin: 0;
  padding: 0.1rem 0.5rem;
  font-size: clamp(calc(0.55rem + 2px), calc(6.5cqi + 2px), calc(0.7rem + 2px));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg) 68%, transparent);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  white-space: nowrap;
  max-width: 72%;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
#market-hero.hero-tourbillon .pos-tb-core > .mini-value {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  /* Data only (+2px) — not card labels / branch heads */
  font-size: clamp(calc(0.95rem + 2px), calc(13cqi + 2px), calc(1.45rem + 2px));
  font-weight: 780;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--text);
  text-shadow:
    0 0 1px color-mix(in srgb, var(--text) 55%, transparent),
    0 0 10px color-mix(in srgb, var(--pos-tb-sweep, var(--accent)) 45%, transparent),
    0 0 22px color-mix(in srgb, var(--pos-tb-sweep, var(--accent)) 28%, transparent),
    0 1px 12px color-mix(in srgb, var(--bg) 70%, transparent);
  transition: text-shadow 1.8s ease, color 1.8s ease;
}
#market-hero.hero-tourbillon .pos-tb-core > .mini-value.pnl-positive,
#market-hero.hero-tourbillon .mini-stat.tb-dial.pf-up .pos-tb-core > .mini-value {
  text-shadow:
    0 0 1px color-mix(in srgb, var(--green) 70%, transparent),
    0 0 12px color-mix(in srgb, var(--green) 55%, transparent),
    0 0 24px color-mix(in srgb, var(--green) 32%, transparent);
}
#market-hero.hero-tourbillon .pos-tb-core > .mini-value.pnl-negative,
#market-hero.hero-tourbillon .mini-stat.tb-dial.pf-down .pos-tb-core > .mini-value {
  text-shadow:
    0 0 1px color-mix(in srgb, var(--red) 70%, transparent),
    0 0 12px color-mix(in srgb, var(--red) 55%, transparent),
    0 0 24px color-mix(in srgb, var(--red) 32%, transparent);
}
#market-hero.hero-tourbillon .pos-tb-core > .hint {
  /* Detail band fills remaining circle proportionally */
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  margin-top: 0.35cqi;
  font-size: clamp(calc(0.58rem + 2px), calc(7cqi + 2px), calc(0.74rem + 2px));
  font-weight: 600;
  line-height: 1.28;
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  text-shadow:
    0 0 8px color-mix(in srgb, var(--pos-tb-sweep, var(--accent)) 18%, transparent),
    0 1px 6px color-mix(in srgb, var(--bg) 65%, transparent);
}
/* Dial trees — match Unrealized leaf rhythm (full-width label | value) */
#market-hero.hero-tourbillon .pos-tb-core > .hint .metric-tree,
#market-hero.hero-tourbillon .pos-tb-core > .hint .upnl-side-tree,
#market-hero.hero-tourbillon .pos-tb-core > .hint .upnl-direction-hint {
  width: 100%;
  max-width: 100%;
  margin-top: 0.15cqi;
  gap: 0.35cqi;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#market-hero.hero-tourbillon .pos-tb-core .metric-head,
#market-hero.hero-tourbillon .pos-tb-core .upnl-side-head {
  width: 100%;
  margin-bottom: 0.35cqi;
  padding-bottom: 0.3cqi;
  font-size: clamp(calc(0.52rem + 2px), calc(6cqi + 2px), calc(0.66rem + 2px));
  font-weight: 750;
  text-shadow:
    0 0 8px color-mix(in srgb, var(--pos-tb-sweep, var(--accent)) 30%, transparent);
}
#market-hero.hero-tourbillon .pos-tb-core .metric-leaves,
#market-hero.hero-tourbillon .pos-tb-core .upnl-side-leaves {
  width: 100%;
  max-width: 100%;
  padding-left: 0.45cqi;
  box-sizing: border-box;
  align-items: stretch;
  gap: 0.25cqi;
}
#market-hero.hero-tourbillon .pos-tb-core .metric-leaf,
#market-hero.hero-tourbillon .pos-tb-core .upnl-side-leaves .metric-leaf {
  width: 100%;
  justify-content: space-between;
  gap: 0.4cqi 0.6cqi;
  text-align: left;
  font-size: clamp(calc(0.55rem + 2px), calc(6.5cqi + 2px), calc(0.72rem + 2px));
}
#market-hero.hero-tourbillon .pos-tb-core .metric-leaf-label {
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  font-size: inherit;
  color: color-mix(in srgb, var(--text-muted) 70%, var(--text) 30%);
  text-shadow: 0 0 6px color-mix(in srgb, var(--bg) 50%, transparent);
}
#market-hero.hero-tourbillon .pos-tb-core .metric-leaf-value {
  text-align: right;
  flex: 0 1 auto;
  max-width: 58%;
  font-size: clamp(calc(0.55rem + 4px), calc(6.5cqi + 4px), calc(0.72rem + 4px));
  font-weight: 780;
  color: var(--text);
  text-shadow:
    0 0 1px color-mix(in srgb, var(--text) 40%, transparent),
    0 0 8px color-mix(in srgb, var(--pos-tb-sweep, var(--accent)) 35%, transparent),
    0 0 16px color-mix(in srgb, var(--pos-tb-sweep, var(--accent)) 20%, transparent);
}
/* Total Balance: Cap/Open PnL (+pct +$usd) must not ellipsis inside the dial */
#market-hero.hero-tourbillon #portfolio-value-card .pos-tb-core > .hint,
#market-hero.hero-tourbillon #portfolio-value-card #stat-margin.metric-hint {
  overflow: visible;
}
#market-hero.hero-tourbillon #portfolio-value-card .metric-leaf-value {
  max-width: none;
  flex: 0 0 auto;
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;
}
#market-hero.hero-tourbillon #portfolio-value-card .metric-leaf-label {
  flex: 1 1 auto;
  min-width: 0;
}
#market-hero.hero-tourbillon #portfolio-value-card .metric-leaf.pnl-positive,
#market-hero.hero-tourbillon #portfolio-value-card .metric-leaf.pnl-negative {
  flex-wrap: wrap;
  row-gap: 0.05rem;
}
#market-hero.hero-tourbillon #portfolio-value-card .metric-leaf.pnl-positive .metric-leaf-value,
#market-hero.hero-tourbillon #portfolio-value-card .metric-leaf.pnl-negative .metric-leaf-value {
  flex: 1 1 100%;
  max-width: 100%;
  text-align: left;
  padding-left: 0;
}
#market-hero.hero-tourbillon .pos-tb-core .metric-leaf.pnl-positive .metric-leaf-value,
#market-hero.hero-tourbillon .pos-tb-core .metric-leaves li.pnl-positive .metric-leaf-value {
  text-shadow:
    0 0 1px color-mix(in srgb, var(--green) 65%, transparent),
    0 0 10px color-mix(in srgb, var(--green) 48%, transparent),
    0 0 18px color-mix(in srgb, var(--green) 28%, transparent);
}
#market-hero.hero-tourbillon .pos-tb-core .metric-leaf.pnl-negative .metric-leaf-value,
#market-hero.hero-tourbillon .pos-tb-core .metric-leaves li.pnl-negative .metric-leaf-value {
  text-shadow:
    0 0 1px color-mix(in srgb, var(--red) 65%, transparent),
    0 0 10px color-mix(in srgb, var(--red) 48%, transparent),
    0 0 18px color-mix(in srgb, var(--red) 28%, transparent);
}
#market-hero.hero-tourbillon .pos-tb-core .metric-tree-foot,
#market-hero.hero-tourbillon .pos-tb-core .upnl-side-tree-grace {
  width: 100%;
  text-align: center;
  font-size: clamp(calc(0.5rem + 2px), calc(5.5cqi + 2px), calc(0.64rem + 2px));
  font-weight: 650;
  padding-top: 0.4cqi;
  margin-top: 0.25cqi;
  text-shadow:
    0 0 8px color-mix(in srgb, var(--pos-tb-sweep, var(--accent)) 22%, transparent);
}
#market-hero.hero-tourbillon .pos-tb-core .upnl-dir-line {
  font-weight: 700;
  text-shadow:
    0 0 8px color-mix(in srgb, var(--pos-tb-sweep, var(--accent)) 28%, transparent);
}
#market-hero.hero-tourbillon .pos-tb-core .hedge-leg,
#market-hero.hero-tourbillon .pos-tb-core .hedge-margin {
  font-weight: 750;
  text-shadow:
    0 0 8px color-mix(in srgb, var(--pos-tb-sweep, var(--accent)) 30%, transparent);
}
#market-hero.hero-tourbillon .pos-tb-core .tb-flip {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#market-hero.hero-tourbillon .pos-tb-core .tb-flip-viewport {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}
#market-hero.hero-tourbillon .position-mini.hedge-pair .pos-tb-core > .mini-value {
  font-size: clamp(calc(0.78rem + 2px), calc(10cqi + 2px), calc(1.05rem + 2px));
}
/* Hedge legs stack like Unrealized Long|Short panes */
#market-hero.hero-tourbillon .position-mini.hedge-pair .hedge-pair-value:not(:has(.tb-flip)) {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  width: 100%;
}
#market-hero.hero-tourbillon .position-mini.hedge-pair .hedge-pair-value:not(:has(.tb-flip)) .hedge-sep {
  display: none;
}
#market-hero.hero-tourbillon .position-mini.hedge-pair .hedge-pair-value:not(:has(.tb-flip)) .hedge-leg {
  align-items: center;
  width: 100%;
}
#market-hero.hero-tourbillon .cycle-countdown-stat .cycle-countdown {
  width: clamp(48px, 32cqi, 64px);
  height: clamp(48px, 32cqi, 64px);
  margin: 0.05rem 0;
}

/* Sparse dials — grow the value, use the circle; no blink chrome */
#market-hero.hero-tourbillon .mini-stat.tb-dial.tb-sparse .pos-tb-core {
  padding: 24% 16% 18%;
  gap: 1.2cqi;
  justify-content: flex-start;
}
#market-hero.hero-tourbillon .mini-stat.tb-dial.tb-sparse .pos-tb-core > .mini-value {
  font-size: clamp(calc(1.15rem + 2px), calc(17cqi + 2px), calc(1.85rem + 2px));
  letter-spacing: -0.02em;
}
#market-hero.hero-tourbillon .mini-stat.tb-dial.tb-sparse .pos-tb-core > .hint {
  font-size: clamp(calc(0.66rem + 2px), calc(8cqi + 2px), calc(0.85rem + 2px));
  line-height: 1.35;
  opacity: 0.92;
}
#market-hero.hero-tourbillon .mini-stat.tb-dial.tb-dense .pos-tb-core {
  padding: 20% 16% 14%;
  gap: 0.15cqi;
  justify-content: flex-start;
}
#market-hero.hero-tourbillon .mini-stat.tb-dial.tb-dense .pos-tb-core > .mini-value {
  font-size: clamp(calc(0.88rem + 2px), calc(11.5cqi + 2px), calc(1.22rem + 2px));
}
#market-hero.hero-tourbillon .mini-stat.tb-dial .metric-tree-fork,
#market-hero.hero-tourbillon .mini-stat.tb-dial .upnl-side-tree-fork {
  display: none;
}
#market-hero.hero-tourbillon .mini-stat.tb-dial .metric-tree-cols.tb-stack,
#market-hero.hero-tourbillon .mini-stat.tb-dial .upnl-side-tree-cols.tb-stack {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  width: 100%;
}
#market-hero.hero-tourbillon .mini-stat.tb-dial .metric-tree-cols.tb-stack .metric-branch,
#market-hero.hero-tourbillon .mini-stat.tb-dial .upnl-side-tree-cols.tb-stack .upnl-side-branch {
  width: 100%;
  align-items: center;
  text-align: center;
}
#market-hero.hero-tourbillon .mini-stat.tb-dial .metric-tree-cols.tb-stack .metric-branch::before,
#market-hero.hero-tourbillon .mini-stat.tb-dial .upnl-side-tree-cols.tb-stack .upnl-side-branch::before {
  display: none;
}
#market-hero.hero-tourbillon .mini-stat.tb-dial .metric-tree-cols.tb-stack .metric-leaves,
#market-hero.hero-tourbillon .mini-stat.tb-dial .upnl-side-tree-cols.tb-stack .upnl-side-leaves {
  align-items: stretch;
  gap: 0.1rem;
  width: 100%;
}
#market-hero.hero-tourbillon .mini-stat.tb-dial .metric-tree-cols.tb-stack .metric-leaf,
#market-hero.hero-tourbillon .mini-stat.tb-dial .upnl-side-tree-cols.tb-stack .metric-leaf {
  width: 100%;
  justify-content: space-between;
  gap: 0.35rem 0.45rem;
  font-size: clamp(calc(0.58rem + 2px), calc(7cqi + 2px), calc(0.72rem + 2px));
}

/* Session Range — keep as a full-width bar under the dials */
#market-hero.hero-tourbillon .session-peaks-stat {
  grid-column: 1 / -1;
  justify-self: stretch;
  width: 100%;
  max-width: none;
  aspect-ratio: auto;
  min-height: 0;
  height: auto;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: 0.35rem 0.3rem 0.25rem !important;
  margin-top: 0.05rem;
  border-top: 1px solid color-mix(in srgb, var(--text-muted) 35%, transparent) !important;
  background: transparent !important;
  box-shadow: none !important;
}
#market-hero.hero-tourbillon .session-peaks-stat .session-peaks-body {
  width: 100%;
}
#market-hero.hero-tourbillon .session-peaks-stat .session-range-grid,
#market-hero.hero-tourbillon .session-peaks-stat .session-range-grid-4 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.18rem 0;
  width: 100%;
}
#market-hero.hero-tourbillon .session-peaks-stat .session-range-col {
  border-right: 1px solid color-mix(in srgb, var(--text-muted) 35%, transparent) !important;
  padding: 0 0.45rem;
  text-align: center;
  align-items: center;
}
#market-hero.hero-tourbillon .session-peaks-stat .session-range-col:last-child {
  border-right: none !important;
}
#market-hero.hero-tourbillon .session-peaks-stat .session-range-label {
  font-size: calc(0.62rem + 2px);
  letter-spacing: 0.03em;
  text-transform: none;
}
#market-hero.hero-tourbillon .session-peaks-stat .session-peak-high,
#market-hero.hero-tourbillon .session-peaks-stat .session-range-low {
  font-size: calc(0.92rem + 2px);
}

/* FTP Edge — circular tourbillon; resume historical tone fills + pulse aura */
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tb-dial {
  border-radius: 50% !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  isolation: isolate;
  gap: 0 !important;
}
/* Critical: legacy rule sets > * { position:relative } which knocked face/core
   out of absolute stack so FTP data sat outside / dial looked tilted. */
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tb-dial > .pos-tb-face,
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tb-dial > .pos-tb-core {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tb-dial > .pos-tb-face {
  z-index: 0 !important;
}
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tb-dial > .pos-tb-core {
  z-index: 4 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2cqi;
  padding: 22% 18% 16%;
  box-sizing: border-box;
  overflow: hidden;
}
/* Keep title upright & top-centered — do NOT force relative (that shoved it sideways) */
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tb-dial > .pos-tb-core > .label {
  position: absolute !important;
  top: 9% !important;
  left: 50% !important;
  translate: -50% 0 !important;
  transform: none !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  z-index: 6 !important;
  white-space: nowrap !important;
  max-width: 72% !important;
}
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tb-dial > .pos-tb-core > .mini-value,
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tb-dial > .pos-tb-core > .hint {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  translate: none !important;
  transform: none !important;
  z-index: 5;
}
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat #stat-ftp-edge-hint {
  max-width: 100%;
  width: 100%;
  white-space: normal;
  overflow: hidden;
  font-size: clamp(calc(0.55rem + 2px), calc(6.5cqi + 2px), calc(0.72rem + 2px));
  line-height: 1.25;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Card shell stays clear — tone light lives on circular scope + ::after aura */
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tone-bullish:not(.tone-pulse),
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tone-bearish:not(.tone-pulse),
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tone-neutral,
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tone-choppy,
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tone-pulse.tone-bullish,
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tone-pulse.tone-bearish {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  animation: none !important;
}
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tone-bullish {
  --pos-tb-sweep: var(--green);
}
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tone-bearish {
  --pos-tb-sweep: var(--red);
}
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tone-neutral,
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tone-choppy {
  --pos-tb-sweep: var(--yellow, #e6c84a);
}
/* Status fills — instrument panel lights, not jewel glow */
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tone-bullish:not(.tone-pulse) .pos-tb-scope {
  background:
    radial-gradient(
      circle at 50% 42%,
      color-mix(in srgb, var(--green) 22%, transparent) 0%,
      color-mix(in srgb, var(--bg-elevated) 78%, #0a1210 22%) 72%
    ) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--green) 42%, transparent),
    0 0 14px color-mix(in srgb, var(--green) 18%, transparent),
    inset 0 0 12px color-mix(in srgb, var(--green) 10%, transparent) !important;
}
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tone-bearish:not(.tone-pulse) .pos-tb-scope {
  background:
    radial-gradient(
      circle at 50% 42%,
      color-mix(in srgb, var(--red) 22%, transparent) 0%,
      color-mix(in srgb, var(--bg-elevated) 78%, #0a1210 22%) 72%
    ) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--red) 42%, transparent),
    0 0 14px color-mix(in srgb, var(--red) 18%, transparent),
    inset 0 0 12px color-mix(in srgb, var(--red) 10%, transparent) !important;
}
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tone-neutral .pos-tb-scope {
  background:
    radial-gradient(
      circle at 50% 42%,
      color-mix(in srgb, var(--yellow, #e6c84a) 18%, transparent) 0%,
      color-mix(in srgb, var(--bg-elevated) 78%, #0a1210 22%) 72%
    ) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--yellow, #e6c84a) 38%, transparent),
    0 0 12px color-mix(in srgb, var(--yellow, #e6c84a) 16%, transparent),
    inset 0 0 10px color-mix(in srgb, var(--yellow, #e6c84a) 8%, transparent) !important;
}
/* Pulse body tint — steady fill; rim blinks via ::after + --ftp-aura-level */
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tone-choppy .pos-tb-scope {
  background:
    radial-gradient(
      circle at 50% 42%,
      color-mix(in srgb, var(--yellow, #e6c84a) 20%, transparent) 0%,
      color-mix(in srgb, var(--bg-elevated) 78%, #0a1210 22%) 72%
    ) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--yellow, #e6c84a) 40%, transparent),
    inset 0 0 10px color-mix(in srgb, var(--yellow, #e6c84a) 8%, transparent) !important;
}
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tone-pulse.tone-bullish .pos-tb-scope {
  background:
    radial-gradient(
      circle at 50% 42%,
      color-mix(in srgb, var(--green) 20%, transparent) 0%,
      color-mix(in srgb, var(--bg-elevated) 78%, #0a1210 22%) 72%
    ) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--green) 40%, transparent),
    inset 0 0 10px color-mix(in srgb, var(--green) 8%, transparent) !important;
}
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tone-pulse.tone-bearish .pos-tb-scope {
  background:
    radial-gradient(
      circle at 50% 42%,
      color-mix(in srgb, var(--red) 20%, transparent) 0%,
      color-mix(in srgb, var(--bg-elevated) 78%, #0a1210 22%) 72%
    ) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--red) 40%, transparent),
    inset 0 0 10px color-mix(in srgb, var(--red) 8%, transparent) !important;
}
/* Historical pulse aura — circular rim beacon driven by JS --ftp-aura-level */
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tone-choppy::after,
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tone-pulse.tone-bullish::after,
#market-hero.hero-tourbillon #cycle-countdown-card.ftp-edge-stat.tone-pulse.tone-bearish::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  z-index: 7;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1.5px var(--ftp-aura-line),
    inset 0 0 4px var(--ftp-aura-soft),
    0 0 6px var(--ftp-aura),
    0 0 12px var(--ftp-aura-soft);
  opacity: var(--ftp-aura-level, 1);
  will-change: opacity;
  transition: none;
}

/* Tourbillon data flip — calm crossfade (no blink / blur / layout jump) */
.tb-flip {
  position: relative;
  width: 100%;
  min-height: clamp(2.8rem, 28cqi, 4.2rem);
  cursor: pointer;
}
.tb-flip-viewport {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, auto);
  align-items: center;
  justify-items: stretch;
  width: 100%;
  min-height: clamp(2.5rem, 26cqi, 3.8rem);
}
.tb-flip-slide {
  grid-area: 1 / 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
  /* Single transition declaration only — never override on state classes
     (swapping transition mid-flip causes a second rapid blink). */
  transition: opacity 1.8s cubic-bezier(0.33, 0.08, 0.25, 1);
}
.tb-flip-slide.is-on,
.tb-flip-slide.is-leaving {
  visibility: visible;
}
.tb-flip-slide.is-on {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.tb-flip-slide.is-leaving {
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.tb-flip-pips {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.28rem;
  position: relative;
  z-index: 8;
  pointer-events: auto;
}
.tb-flip-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-faint) 55%, transparent);
  opacity: 0.55;
  cursor: pointer;
  /* Larger hit target for manual override */
  padding: 5px;
  box-sizing: content-box;
  background-clip: content-box;
  transition: background 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}
.tb-flip-pip:hover {
  opacity: 0.9;
  transform: scale(1.15);
}
.tb-flip-pip.is-on {
  background: var(--pos-tb-sweep, var(--accent));
  background-clip: content-box;
  opacity: 1;
  transform: scale(1.25);
  box-shadow: 0 0 6px color-mix(in srgb, var(--pos-tb-sweep, var(--accent)) 55%, transparent);
}
.tb-flip .metric-tree-cols,
.tb-flip .metric-branch,
.tb-flip .upnl-side-branch,
.tb-flip .hedge-leg {
  width: 100%;
  align-items: center;
  text-align: center;
}
.tb-flip .metric-head,
.tb-flip .upnl-side-head {
  justify-content: center;
  font-size: calc(0.58rem + 2px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tb-flip .metric-leaves,
.tb-flip .upnl-side-leaves {
  align-items: stretch;
  width: 100%;
}
.tb-flip .metric-leaf,
.tb-flip .upnl-side-leaves li {
  width: 100%;
  justify-content: space-between;
  gap: 0.35rem 0.45rem;
  font-size: clamp(calc(0.56rem + 2px), calc(6.8cqi + 2px), calc(0.7rem + 2px));
}
@keyframes pos-tb-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes pos-tb-spin-rev {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
@keyframes pos-tb-balance {
  0%, 100% { scale: 1; opacity: 0.9; }
  50% { scale: 1.08; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pos-tb-carriage.c1,
  .pos-tb-carriage.c2,
  .pos-tb-carriage.c3,
  .pos-tb-sweep,
  .pos-tb-balance {
    animation: none;
  }
  .tb-flip-slide,
  .tb-flip-slide.is-on,
  .tb-flip-slide.is-leaving {
    transition: none;
  }
}
[data-theme="light"] .pos-tb-scope {
  background:
    radial-gradient(
      circle at 50% 42%,
      color-mix(in srgb, var(--pos-tb-sweep) 10%, transparent) 0%,
      transparent 58%
    ),
    radial-gradient(
      circle at 50% 50%,
      color-mix(in srgb, #fff 88%, var(--bg-elevated) 12%) 0%,
      color-mix(in srgb, var(--bg-elevated) 70%, #e8ecef 30%) 100%
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--pos-tb-ring) 90%, transparent),
    0 0 16px color-mix(in srgb, var(--pos-tb-sweep) 12%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--pos-tb-sweep) 8%, transparent);
}
[data-theme="light"] .pos-tb-sweep {
  mix-blend-mode: multiply;
  opacity: 0.55;
}

@media (max-width: 960px) {
  #market-hero.hero-tourbillon .market-hero-metrics.hero-metrics-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  #market-hero.hero-tourbillon,
  #market-hero.hero-tourbillon.hero-stage {
    flex-direction: column;
    gap: 0.65rem;
  }
  #market-hero.hero-tourbillon .hero-rail-stack {
    max-width: none;
    width: 100%;
  }
  #market-hero.hero-tourbillon .spot-rail.market-hero-btc,
  #market-hero.hero-tourbillon #spot-mark-box.spot-rail {
    max-width: none;
    width: 100%;
    max-height: 180px;
  }
  #market-hero.hero-tourbillon .market-hero-metrics.hero-metrics-5,
  #market-hero.hero-tourbillon .market-hero-metrics.hero-metrics-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Kill legacy hero-box mood glow when stage is open */
body.mood-bullish #market-hero.hero-tourbillon.mood-lit,
body.mood-bearish #market-hero.hero-tourbillon.mood-lit,
body.mood-neutral #market-hero.hero-tourbillon.mood-lit,
[data-theme="light"] body.mood-bullish #market-hero.hero-tourbillon.mood-lit,
[data-theme="light"] body.mood-bearish #market-hero.hero-tourbillon.mood-lit,
[data-theme="light"] body.mood-neutral #market-hero.hero-tourbillon.mood-lit {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
body.mood-bullish #market-hero.hero-tourbillon .spot-rail,
body.mood-bearish #market-hero.hero-tourbillon .spot-rail,
body.mood-neutral #market-hero.hero-tourbillon .spot-rail,
body.mood-bullish #market-hero.hero-tourbillon .weekly-float-widget,
body.mood-bearish #market-hero.hero-tourbillon .weekly-float-widget,
body.mood-neutral #market-hero.hero-tourbillon .weekly-float-widget {
  box-shadow: var(--shadow) !important;
  border-right: 1px solid var(--glass-border) !important;
}

/* Hedge pair hero card — dual-leg main/opposite */
.position-mini.hedge-pair .hedge-pair-value {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.28rem 0.35rem;
  font-size: 0.92em;
  line-height: 1.25;
  color: var(--text);
}
.position-mini.hedge-pair .hedge-leg {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.08rem;
  white-space: nowrap;
}
.position-mini.hedge-pair .hedge-leg-top {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28rem;
}
.position-mini.hedge-pair .hedge-leg.side-long { color: var(--green); }
.position-mini.hedge-pair .hedge-leg.side-short { color: var(--red); }
.position-mini.hedge-pair .hedge-leg.side-flat { color: var(--text-faint); }
.position-mini.hedge-pair .hedge-split {
  font-size: calc(0.72em + 4px);
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}
.position-mini.hedge-pair .hedge-margin {
  font-size: calc(0.68em + 4px);
  font-weight: 600;
  color: var(--text-faint);
  letter-spacing: 0.02em;
  line-height: 1.2;
}
[data-theme="light"] .position-mini.hedge-pair .hedge-margin {
  color: #000;
}
.position-mini.hedge-pair .hedge-sep {
  color: var(--text-faint);
  opacity: 0.7;
  font-weight: 400;
  align-self: center;
}
.position-mini.hedge-pair .hedge-pair-hint {
  display: block;
  margin-top: 0.15rem;
  line-height: 1.35;
  white-space: normal;
}
.position-mini .hint.position-duration-hint {
  white-space: pre-line;
  line-height: 1.35;
  max-width: 100%;
}
.position-mini.hedge-pair .hedge-pair-hint.is-empty {
  display: none;
}
.upnl-direction-hint {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  line-height: 1.3;
  white-space: normal;
  color: var(--text-muted);
}
.upnl-direction-hint.inline {
  display: inline;
  flex-direction: unset;
  gap: 0;
}
.upnl-direction-hint .upnl-dir-line {
  display: block;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}
.upnl-direction-hint .upnl-dir-line.pnl-positive,
.upnl-direction-hint .pnl-positive {
  color: var(--green);
}
.upnl-direction-hint .upnl-dir-line.pnl-negative,
.upnl-direction-hint .pnl-negative {
  color: var(--red);
}
.upnl-direction-hint .upnl-dir-sep {
  color: var(--text-muted);
}
.position-mini.hedge-pair.hedge-race {
  box-shadow: inset 0 0 0 1px rgba(230, 200, 74, 0.22);
}
.position-mini.hedge-pair.hedge-trail {
  box-shadow: inset 0 0 0 1px rgba(224, 122, 111, 0.28);
}
[data-theme="light"] .position-mini.hedge-pair.hedge-race {
  box-shadow: inset 0 0 0 1px rgba(234, 179, 8, 0.28);
}
[data-theme="light"] .position-mini.hedge-pair.hedge-trail {
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.22);
}

/* Directional arrows on hero metric cards */
.stat-emoji {
  display: inline-block;
  font-size: 0.72rem;
  line-height: 1;
  margin-left: 0.3rem;
  vertical-align: 0.04em;
  color: var(--text-faint);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.28s var(--desk-ease), transform 0.28s var(--desk-ease);
}
.stat-emoji.is-shown {
  opacity: 1;
  transform: scale(1);
}
.stat-emoji.emoji-up { color: var(--green); animation: emoji-bob 3.6s ease-in-out infinite; }
.stat-emoji.emoji-down { color: var(--red); animation: emoji-sink 4s ease-in-out infinite; }

@keyframes emoji-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}
@keyframes emoji-sink {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(1px); }
}

/* Live Next Scan — classic countdown ring */
.cycle-countdown-stat:not(.ftp-edge-stat) {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.3rem;
}
.cycle-countdown-stat:not(.ftp-edge-stat) .label,
.cycle-countdown-stat:not(.ftp-edge-stat) .hint {
  width: 100%;
  text-align: center;
}
.cycle-countdown {
  position: relative;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.1rem 0;
}
.cycle-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.cycle-ring-bg {
  fill: none;
  stroke: var(--glass-border);
  stroke-width: 4;
  opacity: 0.6;
}
.cycle-ring-fg {
  fill: none;
  stroke: var(--yellow, #e6c84a);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 125.66;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.28s linear, stroke 0.4s ease, opacity 0.4s ease;
}
.cycle-countdown.tone-bullish .cycle-ring-fg { stroke: var(--green); }
.cycle-countdown.tone-bearish .cycle-ring-fg { stroke: var(--red); }
.cycle-countdown.tone-neutral .cycle-ring-fg { stroke: var(--yellow, #e6c84a); }
.cycle-countdown.tone-choppy .cycle-ring-fg,
.cycle-countdown.tone-pulse.tone-bullish .cycle-ring-fg,
.cycle-countdown.tone-pulse.tone-bearish .cycle-ring-fg {
  animation: pulse 2s ease infinite;
}
.cycle-countdown.tone-choppy .cycle-ring-fg {
  stroke: var(--yellow, #e6c84a);
}
.cycle-countdown.tone-pulse.tone-bullish .cycle-ring-fg { stroke: var(--green); }
.cycle-countdown.tone-pulse.tone-bearish .cycle-ring-fg { stroke: var(--red); }
.cycle-countdown.is-imminent:not(.tone-choppy):not(.tone-pulse) .cycle-ring-fg {
  stroke: var(--yellow, #e6c84a);
  animation: pulse 2s ease infinite;
}
.cycle-countdown-stat:not(.ftp-edge-stat).tone-bullish .cycle-countdown-value { color: var(--green); }
.cycle-countdown-stat:not(.ftp-edge-stat).tone-bearish .cycle-countdown-value { color: var(--red); }
.cycle-countdown-stat:not(.ftp-edge-stat).tone-neutral .cycle-countdown-value { color: var(--yellow, #e6c84a); }
.cycle-countdown-stat:not(.ftp-edge-stat).tone-choppy .cycle-countdown-value,
.cycle-countdown-stat:not(.ftp-edge-stat).tone-pulse.tone-bullish .cycle-countdown-value,
.cycle-countdown-stat:not(.ftp-edge-stat).tone-pulse.tone-bearish .cycle-countdown-value,
.cycle-countdown-stat:not(.ftp-edge-stat).is-imminent:not(.tone-choppy):not(.tone-pulse) .cycle-countdown-value {
  animation: pulse 2s ease infinite;
}
.cycle-countdown-stat:not(.ftp-edge-stat).tone-choppy .cycle-countdown-value,
.cycle-countdown-stat:not(.ftp-edge-stat).is-imminent:not(.tone-choppy):not(.tone-pulse) .cycle-countdown-value {
  color: var(--yellow, #e6c84a);
}
.cycle-countdown-stat:not(.ftp-edge-stat).tone-pulse.tone-bullish .cycle-countdown-value { color: var(--green); }
.cycle-countdown-stat:not(.ftp-edge-stat).tone-pulse.tone-bearish .cycle-countdown-value { color: var(--red); }
.cycle-countdown-value {
  position: absolute;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Shared hero metric lights (FTP Edge aura model).
   No body hue fill — rim aura only (::after + --ftp-aura-level). */
.mini-stat.metric-light {
  position: relative;
  isolation: isolate;
  overflow: visible;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
}
.mini-stat.metric-light > * {
  position: relative;
  z-index: 1;
}

.mini-stat.metric-light.tone-bullish {
  --ftp-aura: color-mix(in srgb, var(--green) 100%, transparent);
  --ftp-aura-soft: color-mix(in srgb, var(--green) 78%, transparent);
  --ftp-aura-line: var(--green);
}
.mini-stat.metric-light.tone-bearish {
  --ftp-aura: color-mix(in srgb, var(--red) 100%, transparent);
  --ftp-aura-soft: color-mix(in srgb, var(--red) 78%, transparent);
  --ftp-aura-line: var(--red);
}
.mini-stat.metric-light.tone-neutral {
  --ftp-aura: color-mix(in srgb, var(--yellow, #e6c84a) 100%, transparent);
  --ftp-aura-soft: color-mix(in srgb, var(--yellow, #e6c84a) 78%, transparent);
  --ftp-aura-line: var(--yellow, #e6c84a);
}

/* Pulsing rim (Position long/short, uPnL up/down). */
.mini-stat.metric-light.tone-pulse.tone-bullish::after,
.mini-stat.metric-light.tone-pulse.tone-bearish::after,
.mini-stat.metric-light.tone-neutral.tone-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 2.5px var(--ftp-aura-line),
    inset 0 0 8px var(--ftp-aura-soft),
    0 0 10px var(--ftp-aura),
    0 0 20px var(--ftp-aura-soft);
  opacity: var(--ftp-aura-level, 1);
  will-change: opacity;
  transition: none;
}

/* Static rim (flat yellow / Total Balance green-red — no blink, no body hue). */
.mini-stat.metric-light.tone-bullish:not(.tone-pulse)::after,
.mini-stat.metric-light.tone-bearish:not(.tone-pulse)::after,
.mini-stat.metric-light.tone-neutral:not(.tone-pulse)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 2.5px var(--ftp-aura-line),
    inset 0 0 8px var(--ftp-aura-soft),
    0 0 10px var(--ftp-aura),
    0 0 20px var(--ftp-aura-soft);
  opacity: 1;
}

/* Total Balance — stronger static rim so it reads at a glance. */
#portfolio-value-card.metric-light.tone-bullish:not(.tone-pulse)::after,
#portfolio-value-card.metric-light.tone-bearish:not(.tone-pulse)::after,
#portfolio-value-card.metric-light.tone-neutral:not(.tone-pulse)::after {
  box-shadow:
    inset 0 0 0 3px var(--ftp-aura-line),
    inset 0 0 10px var(--ftp-aura-soft),
    0 0 12px var(--ftp-aura),
    0 0 24px var(--ftp-aura-soft),
    0 0 36px color-mix(in srgb, var(--ftp-aura) 55%, transparent);
}

/* Admin FTP Edge light — hard 1s blink (choppy yellow / pending green-red).
   Card body stays solid; only the aura around the box pulses (--ftp-aura-level). */
#cycle-countdown-card.ftp-edge-stat {
  position: relative;
  isolation: isolate;
  overflow: visible;
  gap: 0.15rem;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
}
#cycle-countdown-card.ftp-edge-stat > * {
  position: relative;
  z-index: 1;
}
#cycle-countdown-card.ftp-edge-stat #stat-ftp-edge-hint.metric-hint {
  white-space: normal;
  overflow: visible;
}

/* Aura ring — only this layer blinks; box fill stays put.
   Opacity from JS --ftp-aura-level (hard 1s blink for choppy + pending). */
#cycle-countdown-card.ftp-edge-stat.tone-choppy::after,
#cycle-countdown-card.ftp-edge-stat.tone-pulse.tone-bullish::after,
#cycle-countdown-card.ftp-edge-stat.tone-pulse.tone-bearish::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  /* Crisp rim beacon — tight line, less mushy bloom */
  box-shadow:
    inset 0 0 0 2.5px var(--ftp-aura-line),
    inset 0 0 6px var(--ftp-aura-soft),
    0 0 8px var(--ftp-aura),
    0 0 16px var(--ftp-aura-soft);
  opacity: var(--ftp-aura-level, 1);
  will-change: opacity;
  transition: none;
}

/* Static — confirmed bull/bear or settled neutral (no pause) */
#cycle-countdown-card.ftp-edge-stat.tone-bullish:not(.tone-pulse) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--green) 28%, transparent), transparent 88%) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 40%, transparent) !important;
  animation: none !important;
  filter: none !important;
  opacity: 1 !important;
}
#cycle-countdown-card.ftp-edge-stat.tone-bearish:not(.tone-pulse) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--red) 28%, transparent), transparent 88%) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 40%, transparent) !important;
  animation: none !important;
  filter: none !important;
  opacity: 1 !important;
}
#cycle-countdown-card.ftp-edge-stat.tone-neutral {
  background: linear-gradient(180deg, color-mix(in srgb, var(--yellow, #e6c84a) 22%, transparent), transparent 88%) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--yellow, #e6c84a) 35%, transparent) !important;
  animation: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Pulse states — steady body tint; aura color vars drive the rim light */
#cycle-countdown-card.ftp-edge-stat.tone-choppy {
  --ftp-aura: color-mix(in srgb, var(--yellow, #e6c84a) 92%, transparent);
  --ftp-aura-soft: color-mix(in srgb, var(--yellow, #e6c84a) 55%, transparent);
  --ftp-aura-line: color-mix(in srgb, var(--yellow, #e6c84a) 95%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--yellow, #e6c84a) 24%, transparent), transparent 88%) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--yellow, #e6c84a) 40%, transparent) !important;
  filter: none !important;
  opacity: 1 !important;
}
#cycle-countdown-card.ftp-edge-stat.tone-pulse.tone-bullish {
  --ftp-aura: color-mix(in srgb, var(--green) 92%, transparent);
  --ftp-aura-soft: color-mix(in srgb, var(--green) 55%, transparent);
  --ftp-aura-line: color-mix(in srgb, var(--green) 95%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--green) 24%, transparent), transparent 88%) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 40%, transparent) !important;
  filter: none !important;
  opacity: 1 !important;
}
#cycle-countdown-card.ftp-edge-stat.tone-pulse.tone-bearish {
  --ftp-aura: color-mix(in srgb, var(--red) 92%, transparent);
  --ftp-aura-soft: color-mix(in srgb, var(--red) 55%, transparent);
  --ftp-aura-line: color-mix(in srgb, var(--red) 95%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--red) 24%, transparent), transparent 88%) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 40%, transparent) !important;
  filter: none !important;
  opacity: 1 !important;
}

#cycle-countdown-card.ftp-edge-stat.tone-bullish #stat-ftp-edge { color: var(--green); }
#cycle-countdown-card.ftp-edge-stat.tone-bearish #stat-ftp-edge { color: var(--red); }
#cycle-countdown-card.ftp-edge-stat.tone-neutral #stat-ftp-edge,
#cycle-countdown-card.ftp-edge-stat.tone-choppy #stat-ftp-edge {
  color: var(--yellow, #e6c84a);
}

.mini-stat.portfolio-value.pf-up {
  background: linear-gradient(180deg, var(--green-dim), transparent 85%);
}

.mini-stat.portfolio-value.pf-down {
  background: linear-gradient(180deg, var(--red-dim), transparent 85%);
}

.mini-stat.portfolio-value.pf-up .mini-value { color: var(--green); }
.mini-stat.portfolio-value.pf-down .mini-value { color: var(--red); }
.mini-stat.portfolio-value.pf-flat .mini-value { color: var(--text); }

.hl-balance-card.portfolio-value.positive .value,
.hl-balance-card.portfolio-value.positive .hint { color: var(--green); }

.hl-balance-card.portfolio-value.negative .value,
.hl-balance-card.portfolio-value.negative .hint { color: var(--red); }

.public-metrics {
  grid-template-columns: 1fr;
  max-width: 280px;
}

.public-hero .market-hero-btc {
  flex: 1;
}

@media (max-width: 900px) {
  .market-hero { flex-direction: column; }

  .market-hero-metrics.hero-metrics-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  /* 2-col on phone so metric trees have room to read */
  .market-hero-metrics.hero-metrics-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .hero-metrics-6 > .mini-stat {
    border-right: 1px solid var(--glass-border);
    border-bottom: 1px solid color-mix(in srgb, var(--text-muted) 35%, transparent);
  }

  .hero-metrics-6 > .mini-stat:nth-child(even) {
    border-right: none;
  }

  .hero-metrics-6 .session-peaks-stat {
    border-right: none;
  }

  .market-hero-metrics:not(.hero-metrics-5):not(.hero-metrics-6) {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .market-hero-btc,
  .market-hero-btc.is-compact {
    padding: 0.45rem 0.75rem 0.55rem;
    padding-right: 0.75rem;
    padding-bottom: 0.55rem;
    border-right: none;
    border-bottom: 1px solid var(--glass-border);
    min-width: 0;
    max-width: none;
    max-height: none;
    overflow: visible;
  }

  /* Phone: only the open sticker is rendered; hide any stray extras. */
  .spot-mark-list.is-compact .spot-mark-row:not(.is-active) {
    display: none;
  }

  .hero-metrics-5 .mini-stat:nth-child(odd) {
    border-right: 1px solid var(--glass-border);
  }

  .hero-metrics-5 .mini-stat,
  .hero-metrics-6 .mini-stat {
    padding: 0.65rem 0.85rem;
  }

  .hero-metrics-5 .mini-stat {
    border-bottom: 1px solid var(--glass-border);
  }

  .hero-metrics-5 .mini-stat:nth-child(2),
  .hero-metrics-5 .mini-stat:nth-child(4) {
    border-right: none;
  }

  .hero-metrics-5 .mini-stat:last-child,
  .hero-metrics-6 .mini-stat:last-child {
    grid-column: 1 / -1;
    border-right: none;
  }

  .market-hero-metrics:not(.hero-metrics-5):not(.hero-metrics-6) .mini-stat {
    padding: 0.65rem 1.1rem;
    border-right: none;
    border-bottom: 1px solid var(--glass-border);
  }

  .market-hero-metrics:not(.hero-metrics-5):not(.hero-metrics-6) .mini-stat:last-child {
    border-bottom: none;
  }
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--glass-border);
  position: relative;
  overflow: hidden;
}

.stat-icon.btc {
  color: var(--amber);
  background: var(--amber-dim);
  border-color: var(--btc-icon-border);
  font-size: 0.55rem;
  letter-spacing: 0.04em;
}

.stat-icon.has-sticker {
  background: var(--bg-elevated);
  border-color: var(--glass-border);
  padding: 0;
}

.stat-sticker {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: none;
  border-radius: 6px;
}

.stat-icon.has-sticker.sticker-ready .stat-sticker {
  display: block;
}

.stat-icon-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.stat-icon.has-sticker.sticker-ready .stat-icon-fallback {
  display: none;
}

.label {
  font-family: var(--mono);
  font-size: calc(0.62rem + 2px);
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.value {
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.hint {
  font-family: var(--mono);
  font-size: calc(0.68rem + 2px);
  color: var(--text-faint);
  letter-spacing: 0.02em;
}

.value-flash { animation: flash 0.5s ease; }

@keyframes flash {
  0% { color: var(--accent); }
  100% { color: inherit; }
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--desk-gap, 0.65rem);
  margin-bottom: var(--desk-gap, 0.65rem);
}

/* Shared cell size so TAV|Chart and EVT|Scan (and both radars) stay proportional */
#page-overview,
#page-live {
  --desk-gap: 0.65rem;
  --desk-panel-h: clamp(20rem, 36vw, 28rem);
  --desk-radar-pad: 0.25rem;
}

.grid-2-panels,
.grid-2-logs,
.grid-2:has(#portfolio-panel) {
  align-items: stretch;
}

.grid-2-panels > .panel,
.grid-2-logs > .panel,
.grid-2:has(#portfolio-panel) > .panel {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  height: var(--desk-panel-h);
  min-height: var(--desk-panel-h);
  max-height: var(--desk-panel-h);
  min-width: 0;
  overflow: hidden;
}

/* Boxless radars keep glow outside the cell */
.grid-2-panels > #signal-panel.tav-radar-panel,
.grid-2-logs > #ai-logs-panel.scan-radar-panel {
  overflow: visible;
}

#portfolio-panel {
  min-height: var(--desk-panel-h);
}

#portfolio-panel .panel-head-chart {
  flex: 0 0 auto;
}

#portfolio-panel .portfolio-chart-wrap {
  flex: 1 1 auto;
  min-height: 0;
}

.grid-2-logs .admin-log-feed {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  border: none;
  border-radius: 0;
  border-top: 1px solid var(--glass-border);
  overflow-y: auto;
}

.grid-2-logs .ai-orbit-hub {
  flex: 1 1 auto;
  min-height: 0;
}

#event-stream-panel .evt-stream-head-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

#event-stream-panel .evt-stream-tabs {
  display: flex;
  gap: 0;
  flex-shrink: 0;
}

#event-stream-panel .evt-stream-tab {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.35rem 0.65rem;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}

#event-stream-panel .evt-stream-tab:hover { color: var(--text-muted); }

#event-stream-panel .evt-stream-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

#event-stream-panel .evt-stream-pane {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

#event-stream-panel .evt-stream-pane.active {
  display: flex;
}

#event-stream-panel .admin-log-feed,
#event-stream-panel .evt-trade-log {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  scroll-behavior: smooth;
}

#event-stream-panel .evt-trade-log {
  border-top: 1px solid var(--glass-border);
}

#event-stream-panel > .panel-head {
  flex: 0 0 auto;
}

#event-stream-panel .evt-trade-log .empty-state.compact {
  margin: 0;
  padding: 1.25rem 0.75rem;
}

#activity-feed {
  max-height: min(70vh, 720px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

#scroll-latest.is-following {
  border-color: color-mix(in srgb, var(--green) 55%, var(--glass-border));
  color: var(--green);
}

.feed-item-console .feed-msg.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
}

.feed-item-static .feed-type {
  font-weight: 600;
}

.feed-item-static .feed-msg {
  word-break: break-word;
}

#event-stream-panel .feed-item-console + .feed-item-console,
#event-stream-panel .feed-item-static + .feed-item-static,
.grid-2-logs .feed-item-static + .feed-item-static {
  border-top: 1px solid var(--glass-border);
}

@media (max-width: 820px) {
  /* Headboard: firm name alone on row 1; utilities + Online on bottom lane */
  .shell-head {
    gap: 0.5rem;
    margin-bottom: 0.65rem;
  }

  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 0.55rem;
    row-gap: 0.45rem;
    overflow: visible;
  }

  .topbar .brand-mark,
  .topbar .brand-cosmos-star {
    display: none !important;
  }

  .topbar .brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    flex: none;
    gap: 0;
    padding-right: 0;
    justify-self: start;
    align-items: center;
    z-index: 1;
  }

  .topbar .brand-text {
    min-width: 0;
    width: 100%;
  }

  .topbar .brand-meta-row {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.4rem;
    max-width: 100%;
  }

  /* Must beat base `.topbar .topbar-end { grid-column: 2; grid-row: 1 }` */
  .topbar .topbar-end {
    grid-column: 1;
    grid-row: 2;
    justify-self: stretch;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.35rem;
    z-index: 1;
  }

  .market-switcher--bar {
    width: 100%;
  }

  .topbar:has(> .tabs) > .tabs {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .topbar:has(> .tabs) > .tabs::-webkit-scrollbar { display: none; }

  .topbar .topbar-end .topbar-actions,
  .topbar .topbar-end .topbar-utilities {
    width: 100%;
    max-width: 100%;
    flex-shrink: 0;
    flex-wrap: wrap;
  }

  .topbar-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.22rem;
    min-width: 0;
  }

  .topbar-end .nav-link {
    flex: 0 0 auto;
    min-height: 0;
    padding: 0.16rem 0.32rem;
    font-size: 0.52rem;
    letter-spacing: 0.04em;
    line-height: 1.1;
  }

  /* Bottom lane: Overview / Positions / Activity with Online (and theme / HL) */
  .topbar .topbar-end .topbar-utilities {
    margin-left: 0;
    gap: 0.35rem;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .topbar .topbar-end .topbar-utilities::-webkit-scrollbar { display: none; }

  .topbar-utilities .tabs--utilities {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    margin-right: 0.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .topbar-utilities .tabs--utilities::-webkit-scrollbar { display: none; }

  .topbar-utilities .status-badge {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .verify-hl-btn .verify-hl-label-full { display: none; }
  .verify-hl-btn .verify-hl-label-short { display: inline; }

  .grid-2 { grid-template-columns: 1fr; }

  #page-overview,
  #page-live {
    --desk-panel-h: min(72vw, 22rem);
  }

  .grid-2-panels,
  .grid-2-logs,
  .grid-2:has(#portfolio-panel) {
    align-items: stretch;
  }

  .grid-2-panels > .panel,
  .grid-2-logs > .panel,
  .grid-2:has(#portfolio-panel) > .panel {
    height: var(--desk-panel-h);
    min-height: var(--desk-panel-h);
    max-height: var(--desk-panel-h);
  }

  /* Chart keeps a readable plot ratio inside the shared cell height */
  #portfolio-panel .portfolio-chart-wrap {
    flex: 1 1 auto;
    height: auto;
    margin: 0.45rem 0.75rem 0.75rem;
    overflow: hidden;
    min-height: 0;
  }

  #portfolio-panel .chart-plot,
  #portfolio-panel .live-chart-plot {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }

  #portfolio-panel .chart-plot > svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* Lightweight Charts root fills the sized plot box on mobile */
  #portfolio-panel .live-chart-plot > table {
    width: 100% !important;
    height: 100% !important;
  }

  .hl-bs-marker .hl-bs-bg {
    stroke-width: 2.25;
  }

  .hl-bs-text {
    font-size: 8px;
  }

  .panel-head-chart {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
    padding: 0.5rem 0.75rem;
  }

  .panel-head-chart > h2 {
    flex: 0 0 auto;
    margin-right: 0.15rem;
  }

  .chart-head-controls {
    flex: 1 1 10rem;
    min-width: 0;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .chart-head-controls .chart-range-label {
    display: none;
  }

  .chart-plot .chart-range-overlay {
    display: block;
  }

  .chart-mode-btn {
    padding: 0.3rem 0.45rem;
    font-size: 0.58rem;
  }

  .chart-tf-fold-btn {
    padding: 0.3rem 0.5rem;
    font-size: 0.58rem;
  }

  .chart-legend {
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
    row-gap: 0.25rem;
  }

  .chart-legend-btc {
    flex-wrap: wrap;
    overflow-x: visible;
    white-space: normal;
    gap: 0.35rem 0.55rem;
  }

  .chart-zoom-hint {
    display: none;
  }
}

.panel {
  padding: 0;
  overflow: hidden;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.65rem 1rem;
  margin-bottom: 0;
  border-bottom: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--surface-soft) 55%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-edge);
}

.panel-head h2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.panel-head h2,
.about-headline,
.about-kicker {
  text-transform: capitalize;
}

.panel-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.12rem 0.35rem;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: var(--panel-code-bg);
  border: 1px solid var(--panel-code-border);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.about-step-num,
.stat-icon,
.hl-side-pill,
.hl-dock-badge {
  text-transform: uppercase;
}

.panel-sub {
  font-size: 0.68rem;
  color: var(--text-faint);
  margin-top: 0.1rem;
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

.panel-body {
  padding: 1rem;
}

.panel > .mood-visual,
.panel > .kv,
.panel > .metric-row,
.panel > .ai-logs-block,
.panel > .raw-ai-block,
.panel > .usage-bar-wrap,
.panel > .empty-state,
.panel > .position-cards,
.panel > .feed {
  margin-left: 1rem;
  margin-right: 1rem;
}

.panel > .mood-visual { margin-top: 1rem; }
#signal-panel.tav-radar-panel > .mood-visual {
  margin: 0;
}
.panel > .kv { margin-bottom: 0.35rem; }
.panel > .kv + .raw-ai-block { margin-top: 0; }
.panel > .metric-row { margin-top: 1rem; }
.panel > .ai-logs-block,
.panel > .raw-ai-block { margin-bottom: 1rem; }
.panel > .usage-bar-wrap { margin-bottom: 1rem; }
.panel > .empty-state,
.panel > .position-cards { margin-bottom: 1rem; }
.panel > .feed.compact { margin-bottom: 1rem; }

.badge {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.22rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--badge-accent-bg);
  color: var(--accent);
  border: 1px solid var(--badge-accent-border);
  white-space: nowrap;
}

.badge.muted {
  background: var(--bg-elevated);
  color: var(--text-faint);
  border-color: var(--glass-border);
}

.badge.bullish { background: var(--green-dim); color: var(--green); border-color: var(--badge-bull-border); }
.badge.bearish { background: var(--red-dim); color: var(--red); border-color: var(--badge-bear-border); }
.badge.neutral { background: var(--yellow-dim); color: var(--yellow); border-color: var(--badge-neutral-border); }

.mood-visual { display: flex; justify-content: center; margin-bottom: 0.85rem; }

.mood-ring { position: relative; width: 120px; height: 120px; }

/* ── TAV radar — entire panel is the circle (no card box) ──────── */
#signal-panel.tav-radar-panel {
  position: relative;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible;
  padding: var(--desk-radar-pad, 0.25rem);
  border-radius: 0;
}
#signal-panel.tav-radar-panel:hover {
  background: transparent !important;
  border-color: transparent !important;
}
body.mood-bullish #signal-panel.tav-radar-panel,
body.mood-bearish #signal-panel.tav-radar-panel,
body.mood-neutral #signal-panel.tav-radar-panel,
#signal-panel.tav-radar-panel.consensus-bullish,
#signal-panel.tav-radar-panel.consensus-bearish,
#signal-panel.tav-radar-panel.consensus-neutral {
  border: none !important;
  box-shadow: none !important;
}
#signal-panel.tav-radar-panel.mood-lit::before,
#signal-panel.tav-radar-panel.mood-lit::after {
  display: none;
}
.mood-ring.tav-radar > .panel-head.tav-radar-head {
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  width: min(78%, 18rem);
  margin: 0;
  padding: 0.3rem 0.5rem;
  border: none;
  border-bottom: none;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border-radius: 999px;
  box-shadow: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  justify-content: center;
  gap: 0.4rem;
  pointer-events: auto;
}
.mood-ring.tav-radar > .panel-head.tav-radar-head h2 {
  font-size: 0.64rem;
  letter-spacing: 0.04em;
}
.mood-ring.tav-radar > .kv.tav-radar-kv {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  width: min(72%, 16rem);
  max-height: 22%;
  overflow: auto;
  margin: 0;
  padding: 0.22rem 0.35rem;
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  scrollbar-width: thin;
  pointer-events: auto;
}
.mood-ring.tav-radar > .kv.tav-radar-kv div {
  padding: 0.24rem 0.3rem;
  font-size: 0.62rem;
}
.mood-visual.tav-ads {
  margin: 0;
  width: 100%;
  height: 100%;
}
#signal-panel.tav-radar-panel > .mood-visual.tav-ads {
  margin: 0;
  width: min(100cqw, 100cqh);
  height: min(100cqw, 100cqh);
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mood-ring.tav-radar {
  position: relative;
  /* Same inscribed-square rule as Scan Radar */
  aspect-ratio: 1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  --tav-grid: color-mix(in srgb, var(--text-faint) 45%, transparent);
  --tav-ring: color-mix(in srgb, var(--text-faint) 55%, transparent);
  --tav-sweep: var(--mood-sweep, var(--accent));
  border-radius: 50%;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--tav-ring) 80%, transparent),
    0 0 40px color-mix(in srgb, var(--tav-sweep) 18%, transparent),
    0 12px 36px rgba(0, 0, 0, 0.35);
}
.tav-radar-scope {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  z-index: 0;
  background:
    radial-gradient(
      circle at 50% 50%,
      color-mix(in srgb, var(--tav-sweep) 12%, transparent) 0%,
      transparent 62%
    ),
    color-mix(in srgb, var(--bg-elevated) 72%, #0a1210 28%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--tav-ring) 70%, transparent),
    inset 0 0 48px color-mix(in srgb, var(--tav-sweep) 14%, transparent);
}
/* AI contact detection popup on the scope */
.tav-detect {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 58%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.28rem;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.72) translateY(10px);
}
.tav-detect.is-hot {
  animation: tav-detect-pop 0.7s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
.tav-detect.is-live {
  opacity: 1;
  transform: none;
}
.tav-detect-tag {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tav-sweep, var(--accent));
  padding: 0.12rem 0.4rem;
  border: 1px solid color-mix(in srgb, var(--tav-sweep, var(--accent)) 55%, transparent);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border-radius: 2px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--tav-sweep, var(--accent)) 35%, transparent);
}
.tav-detect .raw-ai-display {
  padding: 0.45rem 0.55rem;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--tav-sweep, var(--accent)) 40%, var(--glass-border));
  border-radius: 4px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--tav-sweep, var(--accent)) 18%, transparent),
    0 8px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tav-detect .raw-ai-card {
  padding: 0.35rem 0.4rem;
  background: transparent;
  border-left-width: 2px;
}
.tav-detect .raw-ai-line {
  font-size: 0.62rem;
  line-height: 1.4;
  max-height: 4.6em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
@keyframes tav-detect-pop {
  0% {
    opacity: 0;
    transform: scale(0.55) translateY(14px);
    filter: blur(2px);
  }
  55% {
    opacity: 1;
    transform: scale(1.05) translateY(0);
    filter: blur(0);
  }
  78% {
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
}
.tav-radar-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      transparent 0%,
      transparent calc(50% - 0.5px),
      var(--tav-grid) 50%,
      transparent calc(50% + 0.5px),
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent calc(50% - 0.5px),
      var(--tav-grid) 50%,
      transparent calc(50% + 0.5px),
      transparent 100%
    );
  opacity: 0.55;
}
.tav-radar-ring {
  position: absolute;
  border: 1px solid var(--tav-ring);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.7;
}
.tav-radar-ring.r1 { width: 32%; height: 32%; }
.tav-radar-ring.r2 { width: 58%; height: 58%; }
.tav-radar-ring.r3 { width: 84%; height: 84%; }
.tav-radar-cross::before,
.tav-radar-cross::after {
  content: "";
  position: absolute;
  background: var(--tav-grid);
  opacity: 0.35;
}
.tav-radar-cross::before {
  left: 8%;
  right: 8%;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
}
.tav-radar-cross::after {
  top: 8%;
  bottom: 8%;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
}
.tav-radar-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    transparent 72%,
    color-mix(in srgb, var(--tav-sweep) 8%, transparent) 82%,
    color-mix(in srgb, var(--tav-sweep) 42%, transparent) 96%,
    color-mix(in srgb, var(--tav-sweep) 70%, transparent) 100%
  );
  animation: tav-radar-spin 5.2s linear infinite;
  transform-origin: 50% 50%;
  mix-blend-mode: screen;
  opacity: 0.9;
}
[data-theme="light"] .tav-radar-sweep {
  mix-blend-mode: multiply;
  opacity: 0.75;
}
@keyframes tav-radar-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.tav-blips {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.tav-blip {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  background: var(--blip-color, var(--accent));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--blip-color, var(--accent)) 55%, transparent),
    0 0 10px color-mix(in srgb, var(--blip-color, var(--accent)) 65%, transparent);
  animation: tav-blip-pulse 2.4s ease-in-out infinite;
  animation-delay: var(--blip-delay, 0s);
}
.tav-blip.bullish { --blip-color: var(--green); }
.tav-blip.bearish { --blip-color: var(--red); }
.tav-blip.neutral { --blip-color: var(--yellow); }
.tav-blip.is-heavy {
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
}
@keyframes tav-blip-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.08); }
}
.mood-ring.tav-radar .mood-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}
.mood-ring.tav-radar .mood-center {
  z-index: 4;
  gap: 0.08rem;
  padding: 0.35rem;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 45%,
    color-mix(in srgb, var(--bg) 82%, transparent) 0%,
    color-mix(in srgb, var(--bg) 55%, transparent) 70%,
    transparent 100%
  );
}
.mood-ring.tav-radar.bullish .mood-center {
  box-shadow: 0 0 22px color-mix(in srgb, var(--green) 28%, transparent);
}
.mood-ring.tav-radar.bearish .mood-center {
  box-shadow: 0 0 22px color-mix(in srgb, var(--red) 28%, transparent);
}
.mood-ring.tav-radar.neutral .mood-center {
  box-shadow: 0 0 22px color-mix(in srgb, var(--yellow) 26%, transparent);
}
.mood-ring.tav-radar .mood-votes-title[hidden] {
  display: none !important;
}
.mood-ring.tav-radar .arc-bg {
  stroke: color-mix(in srgb, var(--tav-ring) 80%, transparent);
  stroke-width: 3.5;
}
.mood-ring.tav-radar .arc-fill {
  stroke-width: 3.5;
}
/* Hide the old thin conic sweep when radar scope is present */
.mood-ring.tav-radar::before {
  display: none;
}
[data-theme="light"] .mood-ring.tav-radar {
  --tav-grid: color-mix(in srgb, #000 22%, transparent);
  --tav-ring: color-mix(in srgb, #000 28%, transparent);
}
[data-theme="light"] .tav-radar-scope {
  background:
    radial-gradient(
      circle at 50% 50%,
      color-mix(in srgb, var(--tav-sweep) 12%, transparent) 0%,
      transparent 62%
    ),
    rgba(248, 250, 252, 0.92);
}
[data-theme="light"] .mood-ring.tav-radar > .panel-head.tav-radar-head,
[data-theme="light"] .mood-ring.tav-radar > .kv.tav-radar-kv,
[data-theme="light"] .tav-detect .raw-ai-display {
  background: rgba(255, 255, 255, 0.82);
}

.mood-arc { width: 100%; height: 100%; transform: rotate(-90deg); }

.arc-bg {
  fill: none;
  stroke: var(--arc-track);
  stroke-width: 6;
}

.arc-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
  stroke-linecap: butt;
  stroke-dasharray: 326.73;
  stroke-dashoffset: 326.73;
  transition: stroke-dashoffset 0.5s ease, stroke 0.3s;
}

.mood-ring.bullish .arc-fill { stroke: var(--green); }
.mood-ring.bearish .arc-fill { stroke: var(--red); }
.mood-ring.neutral .arc-fill { stroke: var(--yellow); }

.mood-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
}

.mood-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

.mood-sub {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}

.mood-votes-title {
  font-family: var(--mono);
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.mood-vote-score {
  display: inline-flex;
  align-items: center;
  gap: 0.08rem;
  flex-wrap: nowrap;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.mood-vote-item {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

.mood-vote-item.bullish {
  color: var(--green);
  text-decoration-color: var(--green);
}

.mood-vote-item.bearish {
  color: var(--red);
  text-decoration-color: var(--red);
}

.mood-vote-item.neutral {
  color: var(--yellow);
  text-decoration-color: var(--yellow);
}

.mood-vote-sep {
  color: var(--text-faint);
  text-decoration: none;
  font-weight: 500;
}

.kv div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid var(--glass-border);
  font-size: 0.75rem;
}

.kv div:nth-child(odd) { background: var(--row-stripe); }

.kv dt {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.kv dd {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-align: right;
  max-width: 58%;
  word-break: break-word;
  color: var(--text);
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 0.85rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.metric {
  background: transparent;
  border-radius: 0;
  padding: 0.65rem 0.75rem;
  border: none;
  border-right: 1px solid var(--glass-border);
}

.metric:last-child { border-right: none; }

.metric-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.2rem;
}

.metric-value {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
}

.metric-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  color: var(--text-faint);
}

.metric-row + .metric-row {
  margin-top: 0.45rem;
}

.ai-logs-block,
.raw-ai-block { margin-bottom: 0.85rem; }

.raw-ai-display {
  padding: 0.65rem 0.75rem;
  background: var(--bg-elevated);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
}

.raw-ai-card {
  border-left: 3px solid var(--glass-border);
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
}

.raw-ai-card.bullish {
  border-left-color: var(--green);
  background: var(--green-dim);
}

.raw-ai-card.bearish {
  border-left-color: var(--red);
  background: var(--red-dim);
}

.raw-ai-card.neutral {
  border-left-color: var(--yellow);
  background: var(--yellow-dim);
}

.raw-ai-card.divergent.bearish {
  box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.18);
}

.raw-ai-card.divergent.bullish {
  box-shadow: inset 0 0 0 1px rgba(61, 214, 140, 0.18);
}

.raw-ai-card.divergent.neutral {
  box-shadow: inset 0 0 0 1px rgba(230, 200, 74, 0.22);
}

.raw-ai-line {
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.55;
  color: var(--text-muted);
  word-break: break-word;
}

.raw-ai-card.bullish .raw-ai-line { color: var(--green); }
.raw-ai-card.bearish .raw-ai-line { color: var(--red); }
.raw-ai-card.neutral .raw-ai-line { color: var(--yellow); }

.ai-logs-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.ai-logs-feed {
  overflow-y: auto;
}

.ai-logs-feed:not(.admin-log-feed) {
  max-height: 240px;
}

.ai-logs-feed .empty-state.compact {
  margin: 0;
  padding: 1rem 0.65rem;
}

/* AI Scan Radar — circle alone, no card box */
#ai-logs-panel.scan-radar-panel {
  position: relative;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible;
  padding: var(--desk-radar-pad, 0.25rem);
  border-radius: 0;
}
#ai-logs-panel.scan-radar-panel:hover {
  background: transparent !important;
  border-color: transparent !important;
}
body.mood-bullish #ai-logs-panel.scan-radar-panel,
body.mood-bearish #ai-logs-panel.scan-radar-panel,
body.mood-neutral #ai-logs-panel.scan-radar-panel {
  border: none !important;
  box-shadow: none !important;
}
#ai-logs-panel.scan-radar-panel.mood-lit::before,
#ai-logs-panel.scan-radar-panel.mood-lit::after {
  display: none;
}

.ai-orbit-panel > .ai-orbit-hub,
#ai-logs-panel.scan-radar-panel > .ai-orbit-hub {
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  width: min(100cqw, 100cqh);
  height: min(100cqw, 100cqh);
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-orbit-hub {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}

.ai-orbit-visual,
.scan-radar-visual {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
  --scan-grid: color-mix(in srgb, var(--text-faint) 45%, transparent);
  --scan-ring: color-mix(in srgb, var(--text-faint) 55%, transparent);
  --scan-sweep: var(--accent);
}

.scan-radar-visual > .panel-head.scan-radar-head {
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  width: min(78%, 16rem);
  margin: 0;
  padding: 0.28rem 0.5rem;
  border: none;
  border-bottom: none;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border-radius: 999px;
  box-shadow: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  justify-content: center;
  pointer-events: auto;
}
.scan-radar-visual > .panel-head.scan-radar-head h2 {
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}
.scan-radar-visual > .panel-head.scan-radar-head .panel-sub {
  margin: 0.1rem 0 0;
  font-size: 0.52rem;
  opacity: 0.85;
}
[data-theme="light"] .scan-radar-visual > .panel-head.scan-radar-head {
  background: rgba(255, 255, 255, 0.82);
}

.scan-radar-scope {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  z-index: 0;
  background:
    radial-gradient(
      circle at 50% 50%,
      color-mix(in srgb, var(--scan-sweep) 12%, transparent) 0%,
      transparent 62%
    ),
    color-mix(in srgb, var(--bg-elevated) 72%, #0a1210 28%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--scan-ring) 70%, transparent),
    inset 0 0 48px color-mix(in srgb, var(--scan-sweep) 14%, transparent),
    0 0 0 1px color-mix(in srgb, var(--scan-ring) 80%, transparent),
    0 0 36px color-mix(in srgb, var(--scan-sweep) 16%, transparent);
  transition: box-shadow 0.35s ease;
}

.scan-radar-scope.is-firing {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--green) 70%, transparent),
    inset 0 0 56px color-mix(in srgb, var(--green) 22%, transparent),
    0 0 0 1px color-mix(in srgb, var(--green) 55%, transparent),
    0 0 48px color-mix(in srgb, var(--green) 28%, transparent);
}

.scan-radar-scope.is-ping {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--cyan) 65%, transparent),
    inset 0 0 48px color-mix(in srgb, var(--cyan) 18%, transparent),
    0 0 0 1px color-mix(in srgb, var(--cyan) 50%, transparent),
    0 0 40px color-mix(in srgb, var(--cyan) 22%, transparent);
}

.scan-radar-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      transparent 0%,
      transparent calc(50% - 0.5px),
      var(--scan-grid) 50%,
      transparent calc(50% + 0.5px),
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent calc(50% - 0.5px),
      var(--scan-grid) 50%,
      transparent calc(50% + 0.5px),
      transparent 100%
    );
  opacity: 0.55;
}

.scan-radar-ring {
  position: absolute;
  border: 1px solid var(--scan-ring);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.7;
}
.scan-radar-ring.r1 { width: 32%; height: 32%; }
.scan-radar-ring.r2 { width: 58%; height: 58%; }
.scan-radar-ring.r3 { width: 84%; height: 84%; }

.scan-radar-cross::before,
.scan-radar-cross::after {
  content: "";
  position: absolute;
  background: var(--scan-grid);
  opacity: 0.35;
}
.scan-radar-cross::before {
  left: 8%;
  right: 8%;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
}
.scan-radar-cross::after {
  top: 8%;
  bottom: 8%;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
}

.scan-radar-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    transparent 72%,
    color-mix(in srgb, var(--scan-sweep) 8%, transparent) 82%,
    color-mix(in srgb, var(--scan-sweep) 42%, transparent) 96%,
    color-mix(in srgb, var(--scan-sweep) 70%, transparent) 100%
  );
  animation: scan-radar-spin 4.6s linear infinite;
  transform-origin: 50% 50%;
  mix-blend-mode: screen;
  opacity: 0.9;
  pointer-events: none;
}

[data-theme="light"] .scan-radar-sweep {
  mix-blend-mode: multiply;
  opacity: 0.75;
}

@keyframes scan-radar-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.scan-radar-blips {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.scan-radar-blip {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 3;
  animation: scan-radar-blip-pulse 2.4s ease-in-out infinite;
  animation-delay: var(--blip-delay, 0s);
}

.scan-radar-blip.is-heavy {
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
}

.scan-radar-blip-core {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--blip-color, var(--accent));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--blip-color, var(--accent)) 55%, transparent),
    0 0 10px color-mix(in srgb, var(--blip-color, var(--accent)) 65%, transparent);
}

.scan-radar-blip.scan { --blip-color: var(--cyan); }
.scan-radar-blip.signal { --blip-color: var(--accent); }
.scan-radar-blip.order { --blip-color: var(--green); }
.scan-radar-blip.partial { --blip-color: var(--amber); }
.scan-radar-blip.close { --blip-color: var(--red); }

.scan-radar-blip.is-active {
  z-index: 4;
  transform: scale(1.25);
  animation: none;
}

.scan-radar-blip.is-active .scan-radar-blip-core {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--blip-color, var(--accent)) 70%, transparent),
    0 0 16px color-mix(in srgb, var(--blip-color, var(--accent)) 75%, transparent);
}

.scan-radar-blip.skeleton-blip .scan-radar-blip-core,
.scan-radar-blip.skeleton-blip {
  opacity: 0.35;
  animation: none;
  background: var(--text-faint);
  border-radius: 50%;
}

@keyframes scan-radar-blip-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.08); }
}

.scan-radar-contact {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 8%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.22rem;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.72) translateY(10px);
}

.scan-radar-contact.is-live {
  opacity: 1;
  transform: none;
}

.scan-radar-contact.is-hot {
  animation: scan-radar-contact-pop 0.7s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}

.scan-radar-contact-tag {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--scan-sweep, var(--accent));
  padding: 0.1rem 0.38rem;
  border: 1px solid color-mix(in srgb, var(--scan-sweep, var(--accent)) 55%, transparent);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border-radius: 2px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--scan-sweep, var(--accent)) 35%, transparent);
}

.scan-radar-contact.kind-order { --scan-sweep: var(--green); }
.scan-radar-contact.kind-close { --scan-sweep: var(--red); }
.scan-radar-contact.kind-partial { --scan-sweep: var(--amber); }
.scan-radar-contact.kind-signal { --scan-sweep: var(--accent); }
.scan-radar-contact.kind-scan { --scan-sweep: var(--cyan); }

.scan-radar-contact-msg,
.ai-orbit-detail.scan-radar-contact-msg {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.6rem;
  line-height: 1.4;
  color: var(--text);
  text-align: left;
  min-height: 0;
  max-height: 4.2em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  padding: 0.4rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--scan-sweep, var(--accent)) 40%, var(--glass-border));
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--scan-sweep, var(--accent)) 18%, transparent),
    0 8px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  word-break: break-word;
}

@keyframes scan-radar-contact-pop {
  0% {
    opacity: 0;
    transform: scale(0.55) translateY(14px);
    filter: blur(2px);
  }
  55% {
    opacity: 1;
    transform: scale(1.05) translateY(0);
    filter: blur(0);
  }
  78% { transform: scale(0.98); }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
}

.ai-orbit-svg,
.scan-radar-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  z-index: 3;
  pointer-events: none;
}

.ai-orbit-track {
  fill: none;
  stroke: color-mix(in srgb, var(--scan-ring, var(--arc-track)) 80%, transparent);
  stroke-width: 3.5;
}

.ai-orbit-progress {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-linecap: butt;
  stroke-dasharray: 552.92;
  stroke-dashoffset: 0;
  transition: stroke 0.25s ease, stroke-dashoffset 0.25s ease;
}

.ai-orbit-progress.is-position {
  stroke: var(--green);
  stroke-dashoffset: 0;
  opacity: 0.85;
}

.ai-orbit-progress.is-flat {
  stroke: var(--accent);
}

.ai-orbit-core {
  position: absolute;
  inset: 28%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.1rem;
  border-radius: 50%;
  z-index: 5;
  background: radial-gradient(
    circle at 50% 45%,
    color-mix(in srgb, var(--bg) 82%, transparent) 0%,
    color-mix(in srgb, var(--bg) 55%, transparent) 70%,
    transparent 100%
  );
  border: none;
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 18%, transparent);
  cursor: default;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ai-orbit-hub[data-mode="flat"] .ai-orbit-core:hover {
  transform: scale(1.02);
  box-shadow: 0 0 28px color-mix(in srgb, var(--accent) 22%, transparent);
}

.ai-orbit-hub[data-mode="position"] .ai-orbit-core {
  box-shadow: 0 0 22px color-mix(in srgb, var(--green) 22%, transparent);
}

.ai-orbit-hub.has-fire .ai-orbit-core {
  box-shadow: 0 0 28px color-mix(in srgb, var(--green) 35%, transparent);
}

.ai-orbit-core-value {
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.ai-orbit-core-label {
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ai-orbit-core-meta:empty {
  display: none;
}

.ai-orbit-core-meta {
  font-family: var(--mono);
  font-size: 0.55rem;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}

.ai-orbit-empty {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--text-faint);
  text-align: center;
  padding: 0.5rem;
}

#ai-logs-panel > .ai-orbit-hub {
  margin-bottom: 0;
}

.ai-orbit-panel:not(.scan-radar-panel) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

[data-theme="light"] .scan-radar-scope {
  background:
    radial-gradient(
      circle at 50% 50%,
      color-mix(in srgb, var(--scan-sweep) 12%, transparent) 0%,
      transparent 62%
    ),
    rgba(248, 250, 252, 0.92);
}

[data-theme="light"] .scan-radar-contact-msg,
[data-theme="light"] .ai-orbit-detail.scan-radar-contact-msg {
  background: rgba(255, 255, 255, 0.82);
}

.usage-bar-wrap { margin-bottom: 0.85rem; }

.usage-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.35rem;
}

.usage-bar {
  height: 4px;
  background: var(--bg-elevated);
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--glass-border);
}

.usage-fill {
  height: 100%;
  width: 0%;
  border-radius: 0;
  background: linear-gradient(90deg, var(--accent-dim), var(--cyan));
  transition: width 0.4s ease;
}

.position-cards { display: flex; flex-direction: column; gap: 0.45rem; }

.pos-card {
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--glass-border);
  position: relative;
  overflow: hidden;
}

.pos-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
}

.pos-card.long::before { background: var(--green); }
.pos-card.short::before { background: var(--red); }

.pos-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}

.pos-side {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pos-side.long { color: var(--green); }
.pos-side.short { color: var(--red); }

.pos-pnl { font-family: var(--mono); font-size: 0.78rem; font-weight: 600; }
.pos-meta { font-family: var(--mono); font-size: 0.65rem; color: var(--text-faint); }

.feed { display: flex; flex-direction: column; gap: 0; }

.feed.compact {
  max-height: 280px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}

.feed-item {
  display: flex;
  gap: 0;
  padding: 0.55rem 0.75rem;
  border-radius: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--glass-border);
  transition: background 0.1s;
}

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

.feed-item:hover { background: var(--row-hover); }

.feed-accent {
  width: 2px;
  border-radius: 0;
  flex-shrink: 0;
  margin-right: 0.65rem;
}

.feed-accent.ai { background: var(--accent); }
.feed-accent.fullscan { background: var(--purple, #a855f7); }
.feed-accent.trade { background: var(--green); }
.feed-accent.loss { background: var(--red); }
.feed-accent.portfolio { background: var(--cyan); }
.feed-accent.system { background: var(--amber, #f59e0b); }
.feed-accent.other { background: var(--text-faint); }

.feed-content { min-width: 0; flex: 1; }

.feed-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}

.feed-type {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.feed-time {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--text-faint);
}

.feed-msg {
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--text-muted);
  word-break: break-word;
}

.table-scroll {
  overflow-x: auto;
  margin: 0 1rem 1rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
}

.table-scroll .empty-state {
  border-top: 1px solid var(--glass-border);
}

#page-positions .panel-head {
  margin-bottom: 0;
}

#page-positions .table-scroll {
  margin-top: 0;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
}

.data-table { width: 100%; border-collapse: collapse; }

.data-table th {
  text-align: left;
  padding: 0.55rem 0.75rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--glass-border);
  background: var(--surface-soft);
}

.data-table td {
  padding: 0.55rem 0.75rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  border-bottom: 1px solid var(--glass-border);
  color: var(--text);
}

.data-table tbody tr:nth-child(even) { background: var(--row-stripe); }
.data-table tbody tr { transition: background 0.1s; }
.data-table tbody tr:hover { background: var(--table-row-hover); }

.toolbar { display: flex; gap: 0.45rem; flex-wrap: wrap; }

.select {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.55rem;
  cursor: pointer;
}

.search-input {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.55rem;
  min-width: 12rem;
}

.search-input::placeholder {
  color: var(--text-faint);
}

.search-input:focus {
  outline: none;
  border-color: var(--accent, #c9a87c);
}

mark.feed-hl {
  background: color-mix(in srgb, var(--accent, #c9a87c) 60%, transparent);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.btn, .text-btn {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.btn {
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--glass-border);
  padding: 0.35rem 0.6rem;
  text-transform: uppercase;
}

.btn:hover {
  background: var(--surface-hover);
  color: var(--text);
  border-color: var(--btn-hover-border);
}

.text-btn {
  background: none;
  border: none;
  color: var(--accent);
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.62rem;
}

.text-btn:hover { opacity: 0.8; }

.empty-state {
  text-align: center;
  padding: 1.75rem 1rem;
  color: var(--text-faint);
}

.empty-icon {
  display: block;
  font-family: var(--mono);
  font-size: 1rem;
  opacity: 0.35;
  margin-bottom: 0.4rem;
}

.empty-state p {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.foot {
  margin-top: 0.85rem;
  padding: 0.55rem 0.75rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
}

.foot-link {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.foot-link:hover {
  color: var(--accent);
}

.about-main {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.about-hero {
  padding: 1.35rem 1.25rem 1.2rem;
}

.about-kicker {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.55rem;
}

.about-headline {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--text);
  margin-bottom: 0.7rem;
  max-width: 32rem;
}

.about-lead {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 44rem;
}

.about-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
  padding: 0;
  list-style: none;
}

.about-highlights li {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: var(--bg-elevated);
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.about-panel {
  margin-bottom: 0;
}

.about-panel-wide {
  grid-column: 1 / -1;
}

.about-copy,
.about-note {
  padding: 0 1rem 1rem;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.about-note {
  padding-top: 0.35rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--text-faint);
}

.about-muted {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.about-list {
  list-style: none;
  padding: 0 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.about-list li {
  position: relative;
  padding-left: 0.9rem;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.about-list li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 600;
}

.about-list li strong {
  color: var(--text);
  font-weight: 600;
}

.about-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  padding: 0 1rem 1rem;
}

.about-step {
  display: flex;
  gap: 0.55rem;
  padding: 0.75rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}

.about-step-num {
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--glass-border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-elevated));
}

.about-step h3 {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.3rem;
}

.about-step p {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.about-sealed {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--glass-border));
}

.about-list-sealed li::before {
  content: "·";
  color: var(--text-faint);
}

.about-disclaimer {
  padding: 0.85rem 1rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-faint);
}

.about-disclaimer strong {
  color: var(--text-muted);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.contact-card:hover {
  border-color: var(--btn-hover-border);
  background: var(--glass-hover);
  transform: translateY(-1px);
}

.contact-icon {
  font-size: 1.15rem;
  line-height: 1;
  color: var(--accent);
}

.contact-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.contact-value {
  font-size: 0.82rem;
  color: var(--text);
  word-break: break-all;
}

.contact-hint {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.sentiment-bullish { color: var(--green); }
.sentiment-bearish { color: var(--red); }
.sentiment-neutral { color: var(--yellow); }
.pnl-positive { color: var(--green); }
.pnl-negative { color: var(--red); }
.side-long { color: var(--green); font-weight: 600; }
.side-short { color: var(--red); font-weight: 600; }

.hidden { display: none !important; }
.view.hidden { display: none; }
.activity-snippet { margin-bottom: 0; }

.activity-snippet > .feed.compact,
#event-stream-panel .admin-log-feed,
#event-stream-panel .evt-trade-log {
  margin: 0;
  border: none;
  border-radius: 0;
  border-top: 1px solid var(--glass-border);
}

#ai-logs-panel > .ai-orbit-hub {
  margin-bottom: 0;
}

#page-activity .feed {
  margin: 0 1rem 1rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  max-height: 70vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .app {
    padding:
      max(0.5rem, env(safe-area-inset-top))
      max(0.65rem, env(safe-area-inset-right))
      max(1rem, env(safe-area-inset-bottom))
      max(0.65rem, env(safe-area-inset-left));
  }

  .topbar {
    padding: 0.3rem 0.75rem;
    position: static;
    top: auto;
    margin-bottom: 0;
    margin-left: calc(-1 * max(0.65rem, env(safe-area-inset-left)));
    margin-right: calc(-1 * max(0.65rem, env(safe-area-inset-right)));
    width: calc(100% + max(0.65rem, env(safe-area-inset-left)) + max(0.65rem, env(safe-area-inset-right)));
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .shell-head {
    margin-bottom: 0.65rem;
    gap: 0.45rem;
  }

  .market-switcher--bar {
    margin-left: calc(-1 * max(0.65rem, env(safe-area-inset-left)));
    margin-right: calc(-1 * max(0.65rem, env(safe-area-inset-right)));
    width: calc(100% + max(0.65rem, env(safe-area-inset-left)) + max(0.65rem, env(safe-area-inset-right)));
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  [data-theme="light"] .topbar,
  [data-theme="light"] .market-switcher--bar {
    border-top: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.32);
    box-shadow: var(--shadow);
  }

  .topbar .brand {
    gap: 0;
  }

  .topbar-end {
    gap: 0.35rem;
  }

  .topbar-utilities {
    margin-left: 0;
    gap: 0.35rem;
  }

  .topbar-actions {
    gap: 0.35rem;
  }

  .brand-mark {
    display: none !important;
  }

  .brand-letter {
    width: calc(1.05rem + 2px);
    height: calc(1.05rem + 2px);
    font-size: calc(0.52rem + 2px);
    gap: 0.1rem;
    animation-name: brand-letter-in, brand-letter-glow;
  }

  .brand-name { gap: 0.1rem; }

  .brand-intel {
    font-size: calc(0.44em + 1px);
    letter-spacing: 0.08em;
  }

  .brand-intel-word { gap: 0.02rem; letter-spacing: 0.08em; }

  .intel-letter { animation: none; }

  /* Match BTC-PERP subtitle to Trading Labs size on mobile */
  .brand-text p,
  #brand-subtitle,
  .brand-meta-row {
    font-size: calc(0.44 * (1rem + 2px) + 1px);
  }

  .brand-cosmos-star,
  .brand-mark-rollup { display: none; }

  .logo-char-a,
  .logo-char-i { animation: logo-char-pulse 2.4s ease-in-out infinite; }

  .tabs { justify-content: flex-start; }

  .topbar-utilities .tabs--utilities {
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-right: 0.25rem;
  }

  .topbar-utilities .tabs--utilities::-webkit-scrollbar { display: none; }

  .topbar-utilities .tabs--utilities .tab {
    flex: 0 0 auto;
    min-height: 0;
    padding: 0.28rem 0.45rem;
    font-size: 0.58rem;
  }

  .tab {
    flex: 0 0 auto;
    min-height: 2.75rem;
    padding: 0.55rem 0.9rem;
  }

  .topbar-end .nav-link {
    flex: 0 0 auto;
    min-height: 0;
    padding: 0.14rem 0.28rem;
    font-size: 0.48rem;
    letter-spacing: 0.03em;
    line-height: 1.1;
  }

  .topbar-actions {
    gap: 0.18rem;
  }

  .theme-toggle {
    width: 2rem;
    height: 2rem;
    touch-action: manipulation;
  }

  .verify-hl-btn {
    height: 2rem;
    padding: 0 0.5rem;
    font-size: calc(0.55rem + 2px);
    touch-action: manipulation;
  }

  .topbar-utilities .status-badge {
    margin-left: auto;
    min-height: 0;
    padding: 0.28rem 0.55rem;
    flex: 0 0 auto;
  }

  .market-hero-btc {
    padding: 0.75rem;
    gap: 0.65rem;
  }

  .market-hero-btc .value { font-size: 1.15rem; }

  .mini-value { font-size: 0.95rem; }

  .hero-metrics-5 .mini-stat,
  .hero-metrics-6 .mini-stat {
    padding: 0.6rem 0.75rem;
  }

  .panel-head {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
  }

  .panel-head > div:first-child { min-width: 0; flex: 1 1 12rem; }

  .panel-head .toolbar {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .panel-head .select,
  .panel-head .search-input,
  .panel-head .btn {
    width: 100%;
    min-height: 2.75rem;
  }

  .panel > .mood-visual,
  .panel > .kv,
  .panel > .metric-row,
  .panel > .ai-logs-block,
  .panel > .raw-ai-block,
  .panel > .usage-bar-wrap,
  .panel > .empty-state,
  .panel > .position-cards,
  .panel > .feed,
  .panel-head-chart .chart-head-controls {
    margin-left: 0;
    margin-right: 0;
  }

  .panel-head-chart {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .chart-head-controls {
    justify-content: flex-end;
  }

  .chart-head-controls .chart-range-label {
    display: none;
  }

  #page-overview,
  #page-live {
    --desk-panel-h: min(78vw, 20rem);
  }

  .chart-legend {
    font-size: 0.58rem;
    padding: 0.4rem 0.55rem;
  }

  .mood-ring { width: 102px; height: 102px; }
  .tav-detect {
    left: 10%;
    right: 10%;
    top: 56%;
  }
  .tav-detect .raw-ai-line {
    font-size: 0.58rem;
    -webkit-line-clamp: 2;
    max-height: 3.1em;
  }

  .kv div {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.5rem 0.55rem;
  }

  .kv dd {
    text-align: left;
    max-width: 100%;
    font-size: 0.68rem;
  }

  .raw-ai-line { font-size: 0.64rem; }

  .pos-top { flex-wrap: wrap; gap: 0.25rem; }

  .pos-meta { line-height: 1.45; }

  .table-scroll {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
    -webkit-overflow-scrolling: touch;
  }

  .data-table { min-width: 640px; }

  .feed-item { padding: 0.65rem 0.55rem; }

  .feed-msg { font-size: 0.66rem; }

  #page-activity .feed {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
    max-height: min(70vh, 520px);
  }

  .foot {
    margin-bottom: 0.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.55rem 0.65rem;
    font-size: 0.58rem;
  }

  .hl-dock-head {
    align-items: stretch;
  }

  .hl-dock-summary {
    width: 100%;
    padding: 0 0.65rem 0.45rem;
    white-space: normal;
  }

  .hl-balances-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0.65rem 0.55rem 0.35rem;
  }

  .hl-dock-table { min-width: 720px; }

  .hl-dock-table-wrap { overflow-x: auto; }

  .about-hero { padding: 1rem 0.85rem; }

  .about-headline { font-size: 1.15rem; }

  .about-lead,
  .about-copy,
  .about-note { font-size: 0.82rem; }

  .about-highlights li { font-size: 0.56rem; }

  .about-copy,
  .about-note { padding-left: 0.85rem; padding-right: 0.85rem; }

  .about-flow { grid-template-columns: 1fr; }

  .about-step { padding: 0.75rem; }

  .about-disclaimer { padding: 0.85rem; font-size: 0.8rem; }

  .contact-grid { grid-template-columns: 1fr; }

  .metric-row { grid-template-columns: 1fr; }

  .metric {
    border-right: none;
    border-bottom: 1px solid var(--glass-border);
  }

  .metric:last-child { border-bottom: none; }
}

@media (max-width: 380px) {
  .brand-text p,
  #brand-subtitle,
  .brand-meta-row { font-size: calc(0.42 * (1rem + 2px) + 1px); }

  .brand-meta-row { gap: 0.28rem; }

  .bot-mode-badge {
    padding: 0.18rem 0.32rem;
    letter-spacing: 0.04em;
  }

  .brand-letter {
    width: calc(0.95rem + 2px);
    height: calc(0.95rem + 2px);
    font-size: calc(0.48rem + 2px);
  }

  .brand-intel { font-size: calc(0.42em + 1px); }

  .topbar-end .nav-link {
    padding: 0.12rem 0.22rem;
    font-size: 0.42rem;
    letter-spacing: 0.02em;
  }

  .topbar-actions {
    gap: 0.14rem;
  }

  .market-hero-btc .value { font-size: 1.05rem; }
}

/* —— Multi-market switcher (grid / divider language) —— */
.market-switcher {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.market-switcher--bar {
  flex: none;
  width: 100%;
  align-items: stretch;
  justify-content: center;
  padding: 0.2rem 0.55rem;
  margin: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  overflow: hidden;
  min-width: 0;
}

.market-switcher--centered {
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-bottom: 0.75rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--surface);
}

.market-switcher--centered .market-tabs,
.market-switcher--centered .market-subtabs {
  justify-content: center;
  width: 100%;
}

.market-tabs,
.market-subtabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  max-width: 100%;
  border-bottom: 1px solid var(--glass-border);
}

.market-tabs::-webkit-scrollbar,
.market-subtabs::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.market-switcher--bar .market-tabs {
  justify-content: center;
  border-bottom: none;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}

.market-switcher--bar .market-subtabs {
  justify-content: center;
  border-top: none;
  border-bottom: none;
  margin-top: 0;
  padding-top: 0;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}

/* No end-cap dividers on outer tabs (BTC / last market) */
.market-switcher--bar .market-tab:first-child,
.market-switcher--bar .market-subtab:first-child {
  border-left: none;
}

.market-switcher--bar .market-tab:last-child,
.market-switcher--bar .market-subtab:last-child {
  border-right: none;
}

.market-switcher--centered .market-subtabs {
  border-top: 1px solid var(--grid-line);
  border-bottom: none;
  background: var(--surface-soft);
}

.market-tab,
.market-subtab {
  appearance: none;
  position: relative;
  border: none;
  border-right: 1px solid var(--glass-border);
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28rem 0.75rem;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.market-tab {
  font-size: 0.68rem;
}

.market-tab:first-child,
.market-subtab:first-child {
  border-left: 1px solid var(--glass-border);
}

.market-tab:hover,
.market-subtab:hover {
  color: var(--text-muted);
  background: var(--row-hover);
}

.market-tab.is-active,
.market-subtab.is-active {
  color: var(--accent);
  background: transparent;
  border-bottom-color: var(--accent);
  box-shadow: none;
}

.market-subtab {
  font-size: calc(0.62rem + 4px);
  letter-spacing: 0.07em;
  padding: 0.22rem 0.7rem;
}

.market-tab .tab-dot,
.market-subtab .tab-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  min-width: 7px;
  min-height: 7px;
  border-radius: 50%;
  margin-right: 0.45rem;
  background: var(--red);
  vertical-align: middle;
  box-shadow: 0 0 6px color-mix(in srgb, var(--red) 55%, transparent);
  animation: pulse 2s ease infinite;
  transition: background 0.2s, box-shadow 0.2s, opacity 0.2s, filter 0.2s, transform 0.2s;
}

.market-tab.is-live .tab-dot,
.market-subtab.is-live .tab-dot {
  background: var(--green);
  box-shadow: 0 0 6px var(--live-glow);
  animation: pulse 2s ease infinite;
}

/* Before the shooting-star beam arrives, market + Online LEDs sit dark */
.shell-head.status-lights-awaiting .market-tab .tab-dot,
.shell-head.status-lights-awaiting .market-subtab .tab-dot,
.shell-head.status-lights-awaiting .status-badge .status-dot,
.topbar.status-lights-awaiting .market-tab .tab-dot,
.topbar.status-lights-awaiting .market-subtab .tab-dot,
.topbar.status-lights-awaiting .status-badge .status-dot,
body:has(.shell-head.status-lights-awaiting) .spot-mark-row .tab-dot,
body:has(.topbar.status-lights-awaiting) .spot-mark-row .tab-dot {
  opacity: 0.18;
  filter: brightness(0.35) saturate(0.5);
  box-shadow: none;
  animation: none;
}

.brand-light-beam {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 60;
  height: 2px;
  width: 24px;
  border-radius: 999px;
  pointer-events: none;
  transform-origin: right center;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 35%, transparent) 28%,
    color-mix(in srgb, var(--cyan) 85%, white) 72%,
    #fff 100%
  );
  box-shadow:
    0 0 10px color-mix(in srgb, var(--cyan) 55%, transparent),
    0 0 22px color-mix(in srgb, var(--accent) 40%, transparent),
    0 0 36px color-mix(in srgb, var(--accent) 22%, transparent);
  opacity: 0;
}

.brand-light-beam::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #fff;
  box-shadow:
    0 0 8px #fff,
    0 0 16px var(--cyan),
    0 0 28px color-mix(in srgb, var(--accent) 55%, transparent);
}

.brand-light-beam.is-done {
  opacity: 0;
  transition: opacity 0.28s ease;
}

.tab-dot.is-illuminating.is-live-tone,
.status-dot.is-illuminating.is-live-tone {
  opacity: 1;
  filter: none;
  background: var(--green);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--green) 35%, transparent),
    0 0 14px var(--live-glow),
    0 0 28px color-mix(in srgb, var(--green) 55%, transparent);
  animation: status-light-ignite 0.7s ease-out;
}

.tab-dot.is-illuminating.is-offline-tone,
.status-dot.is-illuminating.is-offline-tone {
  opacity: 1;
  filter: none;
  background: var(--red);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--red) 35%, transparent),
    0 0 14px color-mix(in srgb, var(--red) 65%, transparent),
    0 0 28px color-mix(in srgb, var(--red) 45%, transparent);
  animation: status-light-ignite 0.7s ease-out;
}

.status-dot.is-ignited.is-live-tone {
  animation: status-light-terminus-live 1.1s ease-out;
}

.status-dot.is-ignited.is-offline-tone {
  animation: status-light-terminus-offline 1.1s ease-out;
}

@keyframes status-light-ignite {
  0% {
    transform: scale(0.55);
    filter: brightness(0.4);
  }
  35% {
    transform: scale(1.85);
    filter: brightness(1.65);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes status-light-terminus-live {
  0% {
    transform: scale(0.5);
    box-shadow: 0 0 0 0 transparent;
  }
  30% {
    transform: scale(2.2);
    background: var(--green);
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--green) 40%, transparent),
      0 0 22px var(--live-glow),
      0 0 44px color-mix(in srgb, var(--green) 55%, transparent);
  }
  100% {
    transform: scale(1);
    background: var(--green);
    box-shadow: 0 0 6px var(--live-glow);
  }
}

@keyframes status-light-terminus-offline {
  0% {
    transform: scale(0.5);
    box-shadow: 0 0 0 0 transparent;
  }
  30% {
    transform: scale(2.2);
    background: var(--red);
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--red) 40%, transparent),
      0 0 22px color-mix(in srgb, var(--red) 65%, transparent),
      0 0 44px color-mix(in srgb, var(--red) 45%, transparent);
  }
  100% {
    transform: scale(1);
    background: var(--red);
    box-shadow: 0 0 6px color-mix(in srgb, var(--red) 55%, transparent);
  }
}

/* Light mode: brighter LED red/green so the dots read clearly on white */
[data-theme="light"] .market-tab .tab-dot,
[data-theme="light"] .market-subtab .tab-dot,
[data-theme="light"] .spot-mark-row .tab-dot {
  background: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.22), 0 0 8px rgba(220, 38, 38, 0.55);
}

[data-theme="light"] .market-tab.is-live .tab-dot,
[data-theme="light"] .market-subtab.is-live .tab-dot,
[data-theme="light"] .spot-mark-row.is-live .tab-dot,
[data-theme="light"] .status-badge.live .status-dot {
  background: #16a34a;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.22), 0 0 8px rgba(22, 163, 74, 0.65);
}

[data-theme="light"] .tab-dot.is-illuminating.is-live-tone,
[data-theme="light"] .status-dot.is-illuminating.is-live-tone {
  background: #16a34a;
  box-shadow:
    0 0 0 2px rgba(22, 163, 74, 0.35),
    0 0 16px rgba(22, 163, 74, 0.75),
    0 0 32px rgba(22, 163, 74, 0.45);
}

[data-theme="light"] .tab-dot.is-illuminating.is-offline-tone,
[data-theme="light"] .status-dot.is-illuminating.is-offline-tone {
  background: #dc2626;
  box-shadow:
    0 0 0 2px rgba(220, 38, 38, 0.35),
    0 0 16px rgba(220, 38, 38, 0.75),
    0 0 32px rgba(220, 38, 38, 0.45);
}

.market-subtabs.hidden {
  display: none;
}

#page-live,
#page-overview {
  transition: opacity 0.24s ease;
}

#page-live.is-switching,
#page-overview.is-switching {
  opacity: 0.72;
}

#page-live.is-loading,
#page-overview.is-loading {
  pointer-events: none;
}

.view.view-enter {
  animation: view-enter var(--desk-fast) var(--desk-ease);
}

@keyframes view-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ── Quiet Desk Motion ─────────────────────────────────────────── */
@keyframes desk-reveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes desk-mood-breath {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.22; }
}

@keyframes tick-wipe-up {
  0% {
    transform: scaleX(0);
    opacity: 0.9;
  }
  40% {
    transform: scaleX(1);
    opacity: 0.85;
  }
  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}

@keyframes tick-wipe-down {
  0% {
    transform: scaleX(0);
    opacity: 0.9;
  }
  40% {
    transform: scaleX(1);
    opacity: 0.85;
  }
  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}

@keyframes tick-color-up {
  0% { color: var(--green); }
  100% { color: inherit; }
}

@keyframes tick-color-down {
  0% { color: var(--red); }
  100% { color: inherit; }
}

html.desk-motion:not(.desk-ready) .shell-head,
html.desk-motion:not(.desk-ready) .market-hero,
html.desk-motion:not(.desk-ready) main .glass:not(.market-hero),
html.desk-motion:not(.desk-ready) .spot-mark-row {
  opacity: 0;
  transform: translateY(12px);
}

html.desk-motion.desk-ready:not(.desk-settled) .shell-head,
html.desk-motion.desk-ready:not(.desk-settled) .market-hero,
html.desk-motion.desk-ready:not(.desk-settled) main .glass:not(.market-hero),
html.desk-motion.desk-ready:not(.desk-settled) .spot-mark-row {
  animation: desk-reveal var(--desk-enter) var(--desk-ease) both;
}

html.desk-motion.desk-ready:not(.desk-settled) .shell-head { animation-delay: 0ms; }
html.desk-motion.desk-ready:not(.desk-settled) .market-hero { animation-delay: 60ms; }
html.desk-motion.desk-ready:not(.desk-settled) main .glass:not(.market-hero):nth-of-type(1) { animation-delay: 120ms; }
html.desk-motion.desk-ready:not(.desk-settled) main .glass:not(.market-hero):nth-of-type(2) { animation-delay: 160ms; }
html.desk-motion.desk-ready:not(.desk-settled) main .glass:not(.market-hero):nth-of-type(3) { animation-delay: 200ms; }
html.desk-motion.desk-ready:not(.desk-settled) main .glass:not(.market-hero):nth-of-type(n + 4) { animation-delay: 240ms; }

html.desk-motion.desk-ready:not(.desk-settled) .spot-mark-row:nth-child(1) { animation-delay: 90ms; }
html.desk-motion.desk-ready:not(.desk-settled) .spot-mark-row:nth-child(2) { animation-delay: 130ms; }
html.desk-motion.desk-ready:not(.desk-settled) .spot-mark-row:nth-child(3) { animation-delay: 170ms; }
html.desk-motion.desk-ready:not(.desk-settled) .spot-mark-row:nth-child(4) { animation-delay: 210ms; }
html.desk-motion.desk-ready:not(.desk-settled) .spot-mark-row:nth-child(5) { animation-delay: 250ms; }
html.desk-motion.desk-ready:not(.desk-settled) .spot-mark-row:nth-child(6) { animation-delay: 290ms; }
html.desk-motion.desk-ready:not(.desk-settled) .spot-mark-row:nth-child(n + 7) { animation-delay: 320ms; }

html.desk-motion.desk-settled .shell-head,
html.desk-motion.desk-settled .market-hero,
html.desk-motion.desk-settled main .glass:not(.market-hero),
html.desk-motion.desk-settled .spot-mark-row {
  opacity: 1;
  transform: none;
  animation: none;
}

.market-hero.mood-lit {
  position: relative;
  overflow: hidden;
}

.market-hero.mood-lit::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    110% 85% at 18% 0%,
    color-mix(in srgb, var(--accent) 55%, transparent) 0%,
    transparent 58%
  );
  opacity: 0.12;
  animation: desk-mood-breath var(--desk-breath) ease-in-out infinite;
}

body.mood-bullish .market-hero.mood-lit::after {
  background: radial-gradient(
    110% 85% at 18% 0%,
    color-mix(in srgb, var(--green) 70%, transparent) 0%,
    transparent 58%
  );
}

body.mood-bearish .market-hero.mood-lit::after {
  background: radial-gradient(
    110% 85% at 18% 0%,
    color-mix(in srgb, var(--red) 70%, transparent) 0%,
    transparent 58%
  );
}

body.mood-neutral .market-hero.mood-lit::after {
  background: radial-gradient(
    110% 85% at 18% 0%,
    color-mix(in srgb, var(--yellow) 65%, transparent) 0%,
    transparent 58%
  );
}

.market-hero.mood-lit > * {
  position: relative;
  z-index: 1;
}

.tick-value {
  position: relative;
  display: inline-block;
}

.tick-value.tick-up,
.tick-value.tick-down,
.tick-value.tick-flat {
  will-change: color;
}

.tick-value.tick-up {
  animation: tick-color-up var(--desk-tick) var(--desk-ease);
}

.tick-value.tick-down {
  animation: tick-color-down var(--desk-tick) var(--desk-ease);
}

.tick-value.tick-up::after,
.tick-value.tick-down::after,
.tick-value.tick-flat::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  transform-origin: left center;
  pointer-events: none;
}

.tick-value.tick-up::after {
  background: var(--green);
  animation: tick-wipe-up var(--desk-tick) var(--desk-ease) forwards;
}

.tick-value.tick-down::after {
  background: var(--red);
  animation: tick-wipe-down var(--desk-tick) var(--desk-ease) forwards;
}

.tick-value.tick-flat::after {
  background: var(--accent);
  animation: tick-wipe-up var(--desk-tick) var(--desk-ease) forwards;
}

.spot-mark-row .spot-day-pct.tick-value,
.spot-mark-row [data-spot-price].tick-value {
  display: inline-block;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-line,
.is-skeleton:not(.badge):not(.mood-ring):not(.hl-dock-summary) {
  position: relative;
  color: transparent !important;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.12) 0%,
    rgba(148, 163, 184, 0.28) 45%,
    rgba(148, 163, 184, 0.12) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.35s ease-in-out infinite;
}

.skeleton-line {
  display: inline-block;
  min-width: 4.5rem;
  height: 0.72em;
  vertical-align: middle;
}

.skeleton-line.short { min-width: 2.75rem; }
.skeleton-line.tiny { min-width: 1.75rem; height: 0.62em; }
.skeleton-line.wide { min-width: 100%; width: 100%; }

[data-theme="light"] .skeleton-line,
[data-theme="light"] .is-skeleton:not(.badge):not(.mood-ring):not(.hl-dock-summary) {
  background: linear-gradient(
    90deg,
    rgba(100, 116, 139, 0.1) 0%,
    rgba(100, 116, 139, 0.22) 45%,
    rgba(100, 116, 139, 0.1) 100%
  );
  background-size: 200% 100%;
}

.dashboard-loading .mini-value,
.dashboard-loading .market-hero-btc-text .value,
.dashboard-loading #stat-ftp-edge,
.dashboard-loading #cycle-countdown-value {
  min-width: 4rem;
}

.signal-panel.is-loading .mood-visual,
#signal-panel.is-loading .mood-visual {
  opacity: 0.72;
}

.raw-ai-card.skeleton-card {
  min-height: 3.25rem;
  display: flex;
  align-items: center;
}

.skeleton-row td {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.skeleton-feed-item {
  opacity: 0.85;
}

.skeleton-feed-item .feed-msg {
  margin-top: 0.35rem;
}

.scan-radar-blip.skeleton-blip {
  min-width: 5.5rem;
  min-height: 1.75rem;
  pointer-events: none;
}

.hl-dock.is-loading .hl-dock-pane {
  min-height: 7rem;
}

.hl-dock-table-wrap.is-loading,
.hl-balances-grid.is-loading {
  opacity: 0.92;
}

@media (prefers-reduced-motion: reduce) {
  .view.view-enter {
    animation: none;
  }

  .skeleton-line,
  .is-skeleton:not(.badge):not(.mood-ring):not(.hl-dock-summary) {
    animation: none;
    background: rgba(148, 163, 184, 0.18);
  }

  /* Keep entrance + value ticks (state signals). Soften continuous ambient. */
  .market-hero.mood-lit::after,
  html.desk-reduced .market-hero.mood-lit::after {
    animation: none;
    opacity: 0.1;
  }

  .stat-emoji.emoji-up,
  .stat-emoji.emoji-down {
    animation: none;
  }

}

html.desk-reduced .market-hero.mood-lit::after {
  animation: none;
  opacity: 0.1;
}

/* ── Live Desk Motion ──────────────────────────────────────────────
   Extends Quiet Desk Motion with: numeric rolls on readouts, fresh
   row / feed entrances, state flips (mood, position, votes), cell
   ticks in the book, an ambient sweep on the vote ring, and press
   feedback on controls. State signals stay on under reduced motion;
   ambient / hover decoration is gated off.                          */
:root {
  --desk-roll: 620ms;
  --desk-fresh: 460ms;
  --desk-glow: 1400ms;
}

/* Rolling readouts: pin digit width so the text doesn't jitter mid-roll. */
.is-rolling {
  font-variant-numeric: tabular-nums;
}

.mini-value,
.spot-mark-row .value,
.spot-mark-row .spot-day-pct,
.session-peak-high,
.session-range-low {
  transition: color var(--desk-ui) var(--desk-ease);
}

/* Hero stat cells acknowledge the pointer. */
.mini-stat {
  transition: background var(--desk-ui) var(--desk-ease);
}

/* Fresh feed lines slide in from the accent rail. */
@keyframes feed-fresh-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes feed-fresh-wash {
  0% { background-color: color-mix(in srgb, var(--accent) 12%, transparent); }
  100% { background-color: transparent; }
}

@keyframes feed-accent-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.feed-item.is-fresh {
  animation:
    feed-fresh-in var(--desk-fresh) var(--desk-ease) both,
    feed-fresh-wash var(--desk-glow) ease-out both;
}

.feed-item.is-fresh .feed-accent {
  transform-origin: top center;
  animation: feed-accent-grow var(--desk-fresh) var(--desk-ease) both;
  animation-delay: inherit;
}

/* Fresh book / history rows: fade in and wash in the side's colour. */
@keyframes row-fresh-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes row-fresh-wash {
  0% { background-color: color-mix(in srgb, var(--accent) 16%, transparent); }
  100% { background-color: transparent; }
}

@keyframes row-fresh-wash-long {
  0% { background-color: color-mix(in srgb, var(--green) 20%, transparent); }
  100% { background-color: transparent; }
}

@keyframes row-fresh-wash-short {
  0% { background-color: color-mix(in srgb, var(--red) 20%, transparent); }
  100% { background-color: transparent; }
}

.hl-dock-table tbody tr.is-fresh,
.data-table tbody tr.is-fresh {
  animation:
    row-fresh-in var(--desk-fresh) var(--desk-ease) both,
    row-fresh-wash var(--desk-glow) ease-out both;
}

.hl-dock-table tbody tr.is-fresh.long,
.data-table tbody tr.is-fresh.long {
  animation-name: row-fresh-in, row-fresh-wash-long;
}

.hl-dock-table tbody tr.is-fresh.short,
.data-table tbody tr.is-fresh.short {
  animation-name: row-fresh-in, row-fresh-wash-short;
}

/* Mark / PnL cells flash in the direction they moved. */
@keyframes cell-tick-up {
  0% { background-color: color-mix(in srgb, var(--green) 24%, transparent); }
  100% { background-color: transparent; }
}

@keyframes cell-tick-down {
  0% { background-color: color-mix(in srgb, var(--red) 24%, transparent); }
  100% { background-color: transparent; }
}

.hl-dock-table td.cell-tick-up,
.data-table td.cell-tick-up {
  animation: cell-tick-up 900ms ease-out both;
}

.hl-dock-table td.cell-tick-down,
.data-table td.cell-tick-down {
  animation: cell-tick-down 900ms ease-out both;
}

/* Scan Radar blips pop in; the contact line swaps with a soft fade. */
@keyframes chip-fresh-in {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.scan-radar-blip.is-fresh {
  animation: chip-fresh-in var(--desk-fresh) var(--desk-ease) both;
}

@keyframes detail-swap {
  from {
    opacity: 0.25;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.ai-orbit-detail.detail-swap {
  animation: detail-swap 420ms var(--desk-ease);
}

/* Consensus flip: chip pops, ring breathes, arc thickens, label swaps. */
@keyframes badge-flip {
  0% {
    transform: scale(0.88);
    filter: brightness(1.45);
  }
  55% {
    transform: scale(1.07);
  }
  100% {
    transform: none;
    filter: none;
  }
}

.badge.badge-flip {
  animation: badge-flip 600ms var(--desk-ease);
}

@keyframes mood-flip {
  0% { transform: scale(0.95); }
  45% { transform: scale(1.04); }
  100% { transform: none; }
}

@keyframes arc-flip {
  0% { stroke-width: 6; }
  45% { stroke-width: 10; }
  100% { stroke-width: 6; }
}

.mood-ring.mood-flip {
  animation: mood-flip 760ms var(--desk-ease);
}

.mood-ring.mood-flip .arc-fill {
  animation: arc-flip 760ms var(--desk-ease);
}

@keyframes label-flip {
  0% {
    opacity: 0;
    transform: translateY(4px);
    letter-spacing: 0.08em;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.mood-label.label-flip {
  animation: label-flip 520ms var(--desk-ease);
}

@keyframes votes-flip {
  0% { transform: scale(0.92); }
  50% { transform: scale(1.06); }
  100% { transform: none; }
}

.mood-vote-score.votes-flip {
  animation: votes-flip 520ms var(--desk-ease);
}

/* Whole-desk acknowledgement of a consensus change: brief rim glow.
   Uses outline so it layers over the panels' existing mood box-shadow. */
@keyframes mood-shift-rim {
  0% {
    outline-color: color-mix(in srgb, var(--shift-rim) 55%, transparent);
    outline-offset: 0px;
  }
  40% {
    outline-color: color-mix(in srgb, var(--shift-rim) 32%, transparent);
    outline-offset: 3px;
  }
  100% {
    outline-color: transparent;
    outline-offset: 6px;
  }
}

.glass.mood-shift {
  --shift-rim: var(--accent);
  outline: 2px solid transparent;
  animation: mood-shift-rim 900ms var(--desk-ease);
}

body.mood-bullish .glass.mood-shift { --shift-rim: var(--green); }
body.mood-bearish .glass.mood-shift { --shift-rim: var(--red); }
body.mood-neutral .glass.mood-shift { --shift-rim: var(--yellow); }

/* Ambient sweep on the vote ring: a slow highlight orbiting the track. */
.mood-ring {
  --mood-sweep: var(--accent);
}

.mood-ring.bullish { --mood-sweep: var(--green); }
.mood-ring.bearish { --mood-sweep: var(--red); }
.mood-ring.neutral { --mood-sweep: var(--yellow); }

@keyframes mood-sweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.mood-ring::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    transparent 70%,
    color-mix(in srgb, var(--mood-sweep) 38%, transparent) 90%,
    transparent 100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  opacity: 0.85;
  animation: mood-sweep 7s linear infinite;
  transition: opacity var(--desk-ui) var(--desk-ease);
}

.mood-ring .mood-arc {
  position: relative;
  z-index: 1;
}

.mood-ring .mood-center {
  z-index: 1;
}

/* Position card flip: value + hint drop in, card washes in the new side. */
@keyframes pos-flip-text {
  0% {
    opacity: 0;
    transform: translateY(-6px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.position-mini.pos-flip .mini-value,
.position-mini.pos-flip .hint {
  animation: pos-flip-text 480ms var(--desk-ease) both;
}

.position-mini.pos-flip .hint {
  animation-delay: 60ms;
}

.position-mini.pos-flip {
  animation: row-fresh-wash var(--desk-glow) ease-out both;
}

.position-mini.pos-flip.long { animation-name: row-fresh-wash-long; }
.position-mini.pos-flip.short { animation-name: row-fresh-wash-short; }

/* Sentiment detail values swap with a quick fade. */
@keyframes kv-swap {
  0% {
    opacity: 0.2;
    transform: translateY(3px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.kv dd.kv-swap {
  animation: kv-swap 520ms var(--desk-ease);
}

/* Dock / event / chart panes fade in when their tab is selected. */
.hl-dock-pane.active,
.evt-stream-pane.active {
  animation: view-enter var(--desk-ui) var(--desk-ease);
}

/* Press feedback on every control, so clicks feel physical. */
.live-tf-btn,
.hl-dock-tab,
.evt-stream-tab,
.market-tab,
.market-subtab,
.tab,
.btn,
.text-btn,
.theme-toggle,
.verify-hl-btn,
.landing-btn,
.scan-radar-blip {
  transition-property: color, border-color, background, box-shadow, transform, opacity, filter;
  transition-duration: var(--desk-fast);
  transition-timing-function: var(--desk-ease);
}

.live-tf-btn:active,
.hl-dock-tab:active,
.evt-stream-tab:active,
.market-tab:active,
.market-subtab:active,
.tab:active,
.btn:active,
.text-btn:active,
.theme-toggle:active,
.verify-hl-btn:active,
.landing-btn:active {
  transform: scale(0.96);
}

@media (hover: hover) and (pointer: fine) {
  .mini-stat:hover {
    background: var(--glass-hover);
  }

  /* Lift only on button-shaped controls; underline tabs stay put so their rule aligns. */
  .live-tf-btn:hover,
  .btn:hover,
  .landing-btn:hover,
  .verify-hl-btn:hover {
    transform: translateY(-1px);
  }

  .live-tf-btn:active,
  .btn:active,
  .landing-btn:active,
  .verify-hl-btn:active {
    transform: scale(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Keep state signals (rolls, fresh rows, flips) — same policy as hairline
     ticks. Drop only continuous ambient + hover decoration. */
  .mood-ring::before {
    animation: none;
    opacity: 0;
  }

  .tav-radar-sweep {
    animation: none;
    transform: rotate(42deg);
    opacity: 0.55;
  }

  .tav-blip {
    animation: none;
    opacity: 0.85;
  }

  .tav-detect.is-hot {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .scan-radar-sweep {
    animation: none;
    transform: rotate(42deg);
    opacity: 0.55;
  }

  .scan-radar-blip {
    animation: none;
    opacity: 0.85;
  }

  .scan-radar-contact.is-hot {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hl-dock-pane.active,
  .evt-stream-pane.active {
    animation: none;
  }

  .live-tf-btn:hover,
  .btn:hover,
  .landing-btn:hover,
  .verify-hl-btn:hover {
    transform: none;
  }
}

html.desk-reduced .mood-ring::before {
  animation: none;
  opacity: 0;
}

html.desk-reduced .tav-radar-sweep {
  animation: none;
  transform: rotate(42deg);
  opacity: 0.55;
}

html.desk-reduced .tav-blip {
  animation: none;
  opacity: 0.85;
}

html.desk-reduced .tav-detect.is-hot {
  animation: none;
  opacity: 1;
  transform: none;
}

html.desk-reduced .scan-radar-sweep {
  animation: none;
  transform: rotate(42deg);
  opacity: 0.55;
}

html.desk-reduced .scan-radar-blip {
  animation: none;
  opacity: 0.85;
}

html.desk-reduced .scan-radar-contact.is-hot {
  animation: none;
  opacity: 1;
  transform: none;
}

/* Background field always moves — OS reduced-motion often false-positives on Server/RDP. */

@media (max-width: 720px) {
  .market-switcher--bar {
    width: 100%;
    padding: 0.22rem 0.4rem;
  }

  .market-switcher--centered {
    margin-bottom: 0.65rem;
  }

  .market-tab,
  .market-subtab {
    font-size: 0.62rem;
    padding: 0.28rem 0.55rem;
  }

  .market-tab {
    font-size: 0.62rem;
  }

  .market-subtab {
    font-size: calc(0.62rem + 4px);
    padding: 0.22rem 0.55rem;
  }
}

/* —— Landing welcome (alatishe.ai) —— */
.landing-blanket {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  align-items: center;
  justify-content: center;
  padding: 5.75rem 1.25rem 1.75rem;
  background: color-mix(in srgb, var(--bg) 15%, transparent);
  backdrop-filter: blur(3px) saturate(0.95);
  -webkit-backdrop-filter: blur(3px) saturate(0.95);
  overflow-y: auto;
}

html[data-landing="1"][data-landing-page="welcome"] .landing-blanket {
  display: flex;
  top: var(--landing-head, 4.5rem);
  left: var(--landing-bar-left, 1rem);
  right: auto;
  width: var(--landing-bar-width, min(calc(1320px - 2rem), calc(100vw - 2rem)));
  padding-top: 1.5rem;
  background-color: var(--bg);
  background-image: var(--landing-bg-image);
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-landing="1"][data-landing-page="welcome"] .landing-blanket::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: color-mix(in srgb, var(--bg) 15%, transparent);
}

html[data-landing="1"][data-landing-page="welcome"] {
  overflow: hidden;
}

html[data-landing="1"] .shell-head {
  z-index: 80;
}

html[data-landing="1"][data-landing-page="welcome"] .market-switcher {
  visibility: hidden;
  pointer-events: none;
  height: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
}

html[data-landing="1"][data-landing-page="welcome"] main,
html[data-landing="1"][data-landing-page="welcome"] .foot {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

/* Welcome: no mood-colored frames/glows leaking through the overlay */
html[data-landing="1"][data-landing-page="welcome"] body.mood-bullish .mood-lit,
html[data-landing="1"][data-landing-page="welcome"] body.mood-bearish .mood-lit,
html[data-landing="1"][data-landing-page="welcome"] body.mood-neutral .mood-lit,
html[data-landing="1"][data-landing-page="welcome"] body.mood-bullish #signal-panel,
html[data-landing="1"][data-landing-page="welcome"] body.mood-bearish #signal-panel,
html[data-landing="1"][data-landing-page="welcome"] body.mood-neutral #signal-panel,
html[data-landing="1"][data-landing-page="welcome"] #signal-panel.consensus-bullish,
html[data-landing="1"][data-landing-page="welcome"] #signal-panel.consensus-bearish,
html[data-landing="1"][data-landing-page="welcome"] #signal-panel.consensus-neutral {
  border-width: 1px;
  border-color: var(--glass-border);
  box-shadow: var(--shadow);
}

html[data-landing="1"][data-landing-page="welcome"] .market-hero.mood-lit {
  --hero-div: var(--glass-border);
  --hero-div-glow: transparent;
}

html[data-landing="1"][data-landing-page="welcome"] .market-hero.mood-lit .market-hero-btc,
html[data-landing="1"][data-landing-page="welcome"] .market-hero.mood-lit .mini-stat,
html[data-landing="1"][data-landing-page="welcome"] .market-hero.mood-lit .hero-metrics-6 .session-peaks-stat,
html[data-landing="1"][data-landing-page="welcome"] .market-hero.mood-lit .session-range-grid-4 .session-range-col {
  box-shadow: none;
}

/* Sentiment / welcome cards: 0.72 glass × 1.5 → solid, so mood + votes don't show through */
html[data-landing="1"][data-landing-page="welcome"] #signal-panel,
html[data-landing="1"][data-landing-page="welcome"] .landing-card.glass {
  background: var(--glass-solid);
}

html:not([data-landing="1"]) a.nav-link[data-nav="login"] {
  display: none;
}

html[data-landing="1"] a.nav-link[data-nav="logout"] {
  display: none;
}

html[data-landing="1"] #hl-dock,
html[data-guest="1"] #hl-dock {
  display: none !important;
}

.guest-veil-stat {
  position: relative;
  overflow: hidden;
}

.guest-veil {
  display: none;
}

html[data-guest="1"] .guest-veil {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px) saturate(0.8);
  -webkit-backdrop-filter: blur(12px) saturate(0.8);
  pointer-events: none;
}

html[data-guest="1"] .guest-veil span {
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.guest-preview-chip {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

#preview-ended-note {
  margin-top: 0.75rem;
  color: var(--amber);
}

.landing-card {
  width: min(38rem, 100%);
  padding: 1.7rem 1.5rem 1.35rem;
  position: relative;
  z-index: 1;
}

.landing-kicker {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.55rem;
}

.landing-headline {
  font-family: var(--display);
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: 0.01em;
  color: var(--text);
  margin: 0 0 0.75rem;
}

.landing-lead {
  font-size: 0.9rem;
  line-height: 1.62;
  color: var(--text-muted);
  margin: 0;
}

.landing-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.landing-pills li {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: var(--bg-elevated);
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.25rem;
}

.landing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.45rem 1rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 0 var(--glass-edge);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.landing-btn:hover {
  color: var(--accent);
  border-color: var(--btn-hover-border);
  background: var(--surface-hover);
}

.landing-btn-primary {
  color: var(--bg);
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 70%, var(--text));
}

.landing-btn-primary:hover {
  color: var(--bg);
  background: color-mix(in srgb, var(--accent) 86%, var(--text));
  border-color: var(--accent);
}

.landing-note {
  margin: 1rem 0 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-faint);
}

body.access-gate .app {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem 2rem;
}

body.access-gate .landing-blanket {
  display: flex;
  position: relative;
  inset: auto;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  width: 100%;
  max-width: 28rem;
}

body.access-gate .landing-card {
  width: 100%;
}

@media (max-width: 640px) {
  .landing-blanket {
    align-items: flex-start;
    padding-top: 7.25rem;
  }

  html[data-landing="1"][data-landing-page="welcome"] .landing-blanket {
    padding-top: 1.1rem;
  }

  .landing-card {
    padding: 1.25rem 1rem 1.1rem;
  }

  .landing-actions {
    flex-direction: column;
  }

  .landing-btn {
    width: 100%;
  }

  /* Access / login gate: stack cleanly, no header collision */
  body.access-gate .app {
    align-items: flex-start;
    padding:
      max(1.25rem, env(safe-area-inset-top))
      max(0.85rem, env(safe-area-inset-right))
      max(1.5rem, env(safe-area-inset-bottom))
      max(0.85rem, env(safe-area-inset-left));
  }

  body.access-gate .landing-blanket {
    max-width: none;
    width: 100%;
  }

  body.access-gate .landing-card {
    padding: 1.35rem 1.05rem 1.2rem;
  }

  body.access-gate .landing-headline {
    font-size: clamp(1.35rem, 6.5vw, 1.75rem);
    line-height: 1.2;
    word-break: break-word;
  }

  body.access-gate .landing-lead {
    font-size: 0.92rem;
  }

  body.access-gate .login-switch {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  body.access-gate .login-switch > span[aria-hidden="true"] {
    display: none;
  }

  body.access-gate .landing-actions {
    width: 100%;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .landing-blanket {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  html[data-landing="1"][data-landing-page="welcome"] .landing-blanket {
    background-color: var(--bg);
    background-image: var(--landing-bg-image);
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
  }

  html[data-landing="1"][data-landing-page="welcome"] .landing-blanket::before {
    background: color-mix(in srgb, var(--bg) 28%, transparent);
  }
}

.login-card {
  width: min(26.5rem, 100%);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 1.15rem;
}

.login-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 0.45rem;
}

.login-input {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--text);
  background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 0.62rem 0.7rem;
  box-shadow: inset 0 1px 0 var(--glass-edge);
}

.login-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--glass-border));
}

.login-submit {
  margin-top: 0.85rem;
  width: 100%;
  min-height: 2.5rem;
  cursor: pointer;
}

.login-error {
  margin: 0.85rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--red);
}

.login-switch {
  margin: 1rem 0 0;
  font-size: 0.75rem;
  color: var(--text-faint);
}

.request-panel {
  padding: 1.2rem 1.15rem 1.1rem;
}

.request-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 36rem;
}

.request-reason {
  min-height: 7.5rem;
  resize: vertical;
  line-height: 1.5;
  font-family: var(--sans);
}

.request-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.request-thanks {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.request-form .login-submit {
  width: auto;
  align-self: flex-start;
  min-width: 12rem;
}