/* ===== Crypto Regime Monitor — modern dark financial theme =====
   Layout: 200px sidebar (left), then content. Three top-level <main class="view">
   containers, only one .active at a time. */
:root {
  --bg: #07080b;
  --bg-2: #0c0e13;
  --panel: #11141b;
  --panel-2: #161a23;
  --panel-3: #1c2230;
  --border: rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.11);
  --text: #e7eaf0;
  --text-dim: #aab3c5;   /* lifted from #9aa3b5 for legibility on dark panels */
  --text-faint: #717b92; /* lifted from #5a6479 — the faintest labels were hard to read */
  --text-primary: var(--text);
  --text-secondary: var(--text-dim);
  --text-muted: var(--text-dim);
  --font-mono: 'JetBrains Mono', monospace;
  --bull: #10b981;
  --bull-glow: rgba(16, 185, 129, 0.35);
  --bear: #ef4444;
  --bear-glow: rgba(239, 68, 68, 0.35);
  --chop: #94a3b8;
  --chop-glow: rgba(148, 163, 184, 0.25);
  --accent: #34d399;
  --accent-glow: rgba(52, 211, 153, 0.25);
  --shadow: 0 0 0 1px rgba(255,255,255,0.02), 0 8px 24px rgba(0,0,0,0.32);        /* calmer: was 0 12px 40px /.45 */
  --shadow-soft: 0 1px 0 rgba(255,255,255,0.03) inset, 0 6px 18px rgba(0,0,0,0.22); /* calmer: was 0 10px 34px /.30 */
  --radius: 14px;
  --radius-sm: 10px;
  /* ===== Design tokens (added 2026-06-17 foundation pass) ===== */
  /* Typeface */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Spacing scale — 4px base, used by new components and migrated spots */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --section-gap: 20px;
  --section-gap-loose: 26px;
  /* Type scale (px; the board is px-based so these mirror existing steps) */
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 26px;
  /* Sidebar layout */
  --sidebar-expanded-width: 220px;
  --sidebar-rail-width: 58px;
  --sidebar-min-width: 160px;
  --sidebar-max-width: 420px;
  --sidebar-width: var(--sidebar-expanded-width);
  --content-sidebar-gap: 8px;
  /* Z-index scale — single source of truth for stacking */
  --z-base: 1;
  --z-sticky: 20;
  --z-sidebar-flyout: 45;
  --z-topbar: 30;
  --z-popover: 60;
  --z-modal: 100;
  --z-toast: 120;
  /* Canonical responsive breakpoints (CSS vars can't be used inside @media,
     so these are the documented standard the media queries snap toward):
     xl 1500 · lg 1200 · ml 1100 · md 900 · sm 640 · xs 380 */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(1000px 600px at 80% -10%, rgba(52,211,153,0.03), transparent 60%),
    radial-gradient(800px 500px at -10% 100%, rgba(16,185,129,0.022), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ====== App shell: sidebar + content column ====== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "sidebar topbar"
    "sidebar content"
    "sidebar footer";
  column-gap: var(--content-sidebar-gap);
  min-height: 100vh;
  transition: grid-template-columns 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.app > .sidebar { grid-area: sidebar; }
.app > .topbar { grid-area: topbar; }
.app > .view { grid-area: content; }
.app > .status-banner { grid-area: content; align-self: start; }
.app > .footer { grid-area: footer; }
.app > #modal-backdrop,
.app > #ms-modal-backdrop,
.app > #rule-modal-backdrop,
.app > #diag-backdrop,
.app > #docs-backdrop { grid-area: unset; }

/* ====== Sidebar ====== */
.sidebar {
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 12px;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: var(--z-sticky);
  min-width: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  transition: box-shadow 220ms ease, width 220ms ease;
}
.sidebar-nav,
.feed-list,
.modal-body,
.tradfi-matrix {
  scrollbar-width: thin;
  scrollbar-color: #2a2e38 transparent;
}
.sidebar-nav::-webkit-scrollbar,
.feed-list::-webkit-scrollbar,
.tradfi-matrix::-webkit-scrollbar { width: 6px; height: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb,
.feed-list::-webkit-scrollbar-thumb,
.tradfi-matrix::-webkit-scrollbar-thumb {
  background: #2a2e38;
  border-radius: 3px;
}
.sidebar-nav::-webkit-scrollbar-track,
.feed-list::-webkit-scrollbar-track,
.tradfi-matrix::-webkit-scrollbar-track { background: transparent; }
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px 14px;
  border-bottom: 1px solid var(--border);
  position: relative;
  min-width: 0;
  overflow: hidden;
  flex-shrink: 0;
}
.sidebar-collapse-btn {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  color: var(--text-dim);
  cursor: pointer;
  font: 800 14px/1 'Inter', sans-serif;
  flex-shrink: 0;
  transition: transform 220ms ease, color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.sidebar-collapse-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: rgba(52,211,153,0.10);
}
.app.sidebar-collapsed {
  --sidebar-width: var(--sidebar-rail-width);
}
.app.sidebar-collapsed .sidebar {
  padding: 14px 8px;
  gap: 14px;
}
.app.sidebar-collapsed.sidebar-flyout-open .sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-expanded-width);
  z-index: var(--z-sidebar-flyout);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px 12px;
  gap: 22px;
  box-shadow: 10px 0 36px rgba(0, 0, 0, 0.55);
  border-right: 1px solid var(--border-strong);
}
.app.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar-brand-text,
.app.sidebar-collapsed:not(.sidebar-flyout-open) .nav-search-wrap,
.app.sidebar-collapsed:not(.sidebar-flyout-open) .nav-favorites,
.app.sidebar-collapsed:not(.sidebar-flyout-open) .persona-strip,
.app.sidebar-collapsed:not(.sidebar-flyout-open) .nav-section-label,
.app.sidebar-collapsed:not(.sidebar-flyout-open) .nav-label,
.app.sidebar-collapsed:not(.sidebar-flyout-open) .nav-group-title,
.app.sidebar-collapsed:not(.sidebar-flyout-open) .nav-group-chevron,
.app.sidebar-collapsed:not(.sidebar-flyout-open) .nav-group-header,
.app.sidebar-collapsed:not(.sidebar-flyout-open) .nav-group-items,
.app.sidebar-collapsed:not(.sidebar-flyout-open) .regime-key,
.app.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar-foot-meta,
.app.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar-status,
.app.sidebar-collapsed:not(.sidebar-flyout-open) .nav-glance,
.app.sidebar-collapsed:not(.sidebar-flyout-open) .nav-favorite-toggle {
  display: none !important;
}
.app.sidebar-collapsed:not(.sidebar-flyout-open) .nav-item,
.app.sidebar-collapsed:not(.sidebar-flyout-open) .nav-group-header {
  justify-content: center;
  padding: 10px 8px;
  gap: 0;
}

.app.sidebar-collapsed:not(.sidebar-flyout-open) .logo-dot {
  display: none;
}
.app.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar-brand {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
.app.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar-collapse-btn {
  position: static;
  margin: 0 auto;
}
.app.sidebar-collapsed .sidebar-collapse-btn { transform: rotate(180deg); }
.sidebar-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
  z-index: calc(var(--z-sticky) + 5);
  user-select: none;
  pointer-events: auto;
}
.sidebar-resize-handle::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 2px;
  width: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background 120ms ease, box-shadow 120ms ease;
}
.sidebar-resize-handle:hover::after,
.sidebar-resize-handle.is-dragging::after {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}
.app.sidebar-resizing {
  transition: none !important;
}
.app.sidebar-resizing .sidebar {
  transition: none !important;
}
.app.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar-resize-handle {
  display: none;
}
.sidebar-brand-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.15;
  color: var(--text);
}
.nav-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-search-icon {
  position: absolute;
  left: 10px;
  color: var(--text-faint);
  font: 700 13px 'JetBrains Mono';
  pointer-events: none;
}
.nav-search {
  width: 100%;
  min-width: 0;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  padding: 8px 9px 8px 30px;
  font: 600 var(--text-xs) var(--font-sans);
  letter-spacing: 0;
  outline: none;
}
.nav-search::placeholder { color: var(--text-faint); }
.nav-search:focus { border-color: rgba(52,211,153,0.55); }
.nav-item.search-hidden,
.nav-group.search-hidden { display: none !important; }
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 2px;
}
.app.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar-nav {
  overflow-y: auto;
}
.nav-item {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  padding-right: 56px;
  border-radius: 8px;
  font: 700 11.5px/1 'Inter', sans-serif;
  letter-spacing: 0.16em;
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  min-width: 0;
  overflow: hidden;
  position: relative;
}
.nav-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-item .nav-icon {
  font-size: 16px;
  width: 18px;
  flex-shrink: 0;
  text-align: center;
  color: var(--text-faint);
}
.nav-item:hover {
  background: rgba(255,255,255,0.02);
  border-color: var(--border);
  color: var(--text);
}
.nav-item.active {
  background: linear-gradient(90deg, rgba(52,211,153,0.18), rgba(52,211,153,0.04));
  border-color: rgba(52,211,153,0.45);
  color: #d1fae5;
  box-shadow: inset 2px 0 0 var(--accent);
}
.nav-item.active .nav-icon { color: var(--accent); }
.sidebar-status {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 4px;
  border-top: 1px solid var(--border);
}
.sidebar-status .ss-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-status .ss-label {
  font: 700 8.5px 'Inter';
  letter-spacing: 0.18em;
  color: var(--text-faint);
}
.sidebar-status .ss-value {
  font: 600 11px 'JetBrains Mono';
  color: var(--text);
  letter-spacing: 0.02em;
  line-height: 1.25;
}
.sidebar-foot {
  margin-top: auto;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.sidebar-foot-inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.sidebar-foot-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  flex: 1;
}
.sidebar-foot-clock,
.sidebar-foot-refresh {
  font: 600 9px/1.35 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}
.sidebar-tz-menu { position: relative; flex-shrink: 0; }
.sidebar-tz-menu .tz-menu-popover {
  bottom: calc(100% + 8px);
  left: 0;
  z-index: var(--z-popover);
}
.app.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar-foot-inner {
  justify-content: center;
}

/* Icon-only notify button */
.btn.icon-only {
  padding: 8px 10px;
  gap: 0;
}
.btn.icon-only .btn-icon { font-size: 15px; }

/* ====== View visibility ======
   Inactive views are removed from layout entirely. We also give the active view
   an opaque background so nothing can bleed through from a sibling. */
.view {
  display: none !important;
  position: absolute;
  left: -99999px;
  top: -99999px;
  visibility: hidden;
  pointer-events: none;
}
.view.active {
  display: block !important;
  position: static;
  left: auto;
  top: auto;
  visibility: visible;
  pointer-events: auto;
  background: var(--bg);
  z-index: 1;
  animation: uxViewIn 140ms ease-out;
}
.view.view-leaving { opacity: 0.35; transition: opacity 120ms ease; }
.view.view-entering { opacity: 0.4; }
@keyframes uxViewIn {
  from { opacity: 0.35; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .view.active { animation: none; }
  .view.view-leaving, .view.view-entering { opacity: 1; transition: none; }
}
.view-main, .view-custom, .view-tradfi, .view-tradfi-macro, .view-tradfi-breadth, .view-tradfi-positioning, .view-tradfi-sector, .view-tradfi-decision, .view-tradfi-credit, .view-tradfi-global, .view-tradfi-portfolio, .view-tradfi-events, .view-tradfi-backtest, .view-tradfi-health, .view-tradfi-model-quality, .view-tradfi-brief, .view-tradfi-rotation, .view-tradfi-drivers, .view-tradfi-flows, .view-tradfi-liquidity, .view-tradfi-volatility, .view-tradfi-fundamentals, .view-tradfi-persistence, .view-tradfi-scenarios, .view-msgarch, .view-decision, .view-decisionbt, .view-quality, .view-portfolio, .view-smartalerts, .view-learning, .view-retrain, .view-brief, .view-confidence, .view-playbook, .view-shadow, .view-ablation, .view-ranking, .view-replay, .view-leadlag, .view-correlation, .view-alertlab, .view-decay, .view-contrib, .view-audit, .view-repair, .view-scenario, .view-delivery, .view-calibration, .view-liquidity, .view-crowding, .view-orderbook, .view-liquidations, .view-sizer, .view-supervisor, .view-runtime, .view-health {
  padding: 20px 28px 90px;
  max-width: 1500px;
  margin: 0 auto;
}
.view-forecast,
.view-persistence,
.view-expanded,
.view-confidence,
.view-portfolio,
.view-ranking,
.view-shadow,
.view-tradfi-decision,
.view-contagion,
.view-supervisor,
.view-tradfi-breadth,
.view-tradfi-rotation,
.view-tradfi-drivers,
.view-tradfi-positioning,
.view-tradfi-flows {
  padding: 20px 28px 90px;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

/* One-sentence page explainer (all sub-dashboards except command centers / main / custom) */
.page-explainer-panel {
  margin-bottom: 16px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(15,23,42,0.35));
}
.page-explainer-text {
  margin: 0;
  font: 500 14px/1.55 'Inter';
  color: var(--text);
  max-width: 78ch;
}
.view-msgarch .page-explainer-text {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 900px) {
  .view-msgarch .page-explainer-text {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
}
.view-hmm { padding-bottom: 90px; }

@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
    column-gap: 0;
    grid-template-areas:
      "topbar"
      "content"
      "footer";
  }
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 200px;
    transform: translateX(-100%);
    transition: transform 200ms ease;
  }
  .sidebar-resize-handle { display: none !important; }
  .sidebar.open { transform: translateX(0); }
  .topbar { justify-content: flex-start; gap: 14px; }
  .topbar .brand { min-width: 0; }
  .topbar .status-bar { margin-left: auto; }
}

.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* ====== Top bar ====== */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(20,24,33,0.92), rgba(13,15,21,0.92));
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.sidebar-toggle {
  display: none;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  color: var(--text-dim);
  cursor: pointer;
  font: 800 18px/1 'Inter', sans-serif;
}
.sidebar-toggle:hover,
.sidebar-toggle[aria-expanded="true"] {
  border-color: var(--border-strong);
  color: var(--text);
  background: rgba(52,211,153,0.10);
}
.sidebar-toggle span {
  transform: translateY(-1px);
}
@media (max-width: 900px) {
  .sidebar-toggle { display: inline-flex; }
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.logo-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bull);
  box-shadow: 0 0 16px var(--bull-glow), inset 0 0 4px rgba(255,255,255,0.4);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(0.85); }
}
.brand-text h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.18em;
}
.brand-text .sub {
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.16em;
  font-weight: 500;
}

.status-bar {
  display: flex;
  align-items: center;
  gap: 18px;
}
.mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.mode-btn {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  border-radius: 6px;
  padding: 7px 10px;
  font: 800 10px/1 'Inter', sans-serif;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: all 120ms ease;
}
.mode-btn:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.mode-btn.active {
  color: #d1fae5;
  background: linear-gradient(180deg, rgba(52,211,153,0.22), rgba(52,211,153,0.08));
  box-shadow: inset 0 0 0 1px rgba(52,211,153,0.30);
}
/* Sidebar sections and universe-scoped visibility */
.nav-section-label {
  font: 800 9px/1 'Inter', sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 10px 12px 4px;
  opacity: 0.85;
}
.nav-global-label { padding-top: 2px; }
.nav-global { display: flex; }
.crypto-only { display: flex; }
.tradfi-only,
.tradfi-nav-group { display: none; }
.nav-section-label.tradfi-only { display: none; }
.app.mode-crypto .tradfi-only,
.app.mode-crypto .tradfi-nav-group,
.app.mode-crypto .sidebar-nav .nav-item.tradfi-route[data-route="tradfi"] { display: none !important; }
.app.mode-tradfi .crypto-only,
.app.mode-tradfi .nav-section-label[data-universe="crypto"],
.app.mode-tradfi .nav-group[data-universe="crypto"] { display: none !important; }
/* Simple product: keep both CRYPTO and TRADFI command entries always visible */
body.nav-simple-mode.app.mode-crypto .sidebar-nav .nav-item.tradfi-route.nav-simple-keep[data-route="tradfi"],
body.nav-simple-mode.app.mode-crypto .sidebar-nav .nav-section-label.tradfi-only.nav-simple-keep,
body.nav-simple-mode.app.mode-crypto .sidebar-nav .tradfi-only.nav-simple-keep.nav-command,
body.nav-simple-mode.app.mode-tradfi .sidebar-nav .nav-item.crypto-only.nav-simple-keep[data-route="main"],
body.nav-simple-mode.app.mode-tradfi .sidebar-nav .nav-section-label[data-universe="crypto"].nav-simple-keep {
  display: flex !important;
}
.app.mode-tradfi .tradfi-only,
.app.mode-tradfi .tradfi-nav-group { display: flex; }
.app.mode-tradfi .nav-section-label.tradfi-only { display: block; }
.app.mode-tradfi .sidebar-nav .tradfi-route,
.app.mode-tradfi .sidebar-nav .nav-item.nav-command.tradfi-route {
  border-color: rgba(52,211,153,0.22);
  background: rgba(52,211,153,0.045);
}
.app.mode-tradfi .sidebar-nav .tradfi-route:hover,
.app.mode-tradfi .sidebar-nav .tradfi-route.active,
.app.mode-tradfi .sidebar-nav .nav-item.nav-command.tradfi-route:hover,
.app.mode-tradfi .sidebar-nav .nav-item.nav-command.tradfi-route.active {
  border-color: rgba(52,211,153,0.45);
  background: linear-gradient(90deg, rgba(52,211,153,0.18), rgba(52,211,153,0.04));
  color: #d1fae5;
}
.app.mode-tradfi .sidebar-nav .tradfi-route .nav-icon,
.app.mode-tradfi .sidebar-nav .nav-item.nav-command.tradfi-route .nav-icon {
  color: var(--accent);
}
.nav-item.nav-command {
  border-color: rgba(52,211,153,0.18);
  background: rgba(52,211,153,0.04);
  margin-bottom: 2px;
}

/* ===== Collapsible sidebar groups (declutter the long page list) ===== */
.nav-group { display: flex; flex-direction: column; }
.nav-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: transparent;
  border: 0;
  width: 100%;
  cursor: pointer;
  color: var(--text-faint);
  font: 800 9.5px/1 'Inter', sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 13px 12px 7px;
  transition: color 120ms ease;
  min-width: 0;
}
.nav-group-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.nav-group-header:hover { color: var(--text-dim); }
.nav-group-chevron {
  font-size: 9px;
  opacity: 0.65;
  flex-shrink: 0;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), color 120ms ease, opacity 120ms ease;
}
.nav-group.open > .nav-group-header { color: var(--text-dim); }
.nav-group.open > .nav-group-header .nav-group-chevron {
  transform: rotate(90deg);
  color: var(--accent);
  opacity: 1;
}
/* A collapsed group that contains the active page keeps an accent cue. */
.nav-group.has-active:not(.open) > .nav-group-header .nav-group-title { color: var(--accent); }
.nav-group-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms ease;
}
.nav-group.open > .nav-group-items {
  max-height: 2400px;
  opacity: 1;
  pointer-events: auto;
}

/* TradFi nav groups use same collapsible pattern as crypto */
.tradfi-nav-group { flex-direction: column; }

.status-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  border-right: 1px solid var(--border);
  padding-right: 18px;
}
.status-block:last-of-type { border-right: none; padding-right: 0; }
.status-label {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  font-weight: 600;
}
.status-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text);
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: all 160ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}
.btn:hover { background: var(--panel-3); border-color: #3a4258; }
.btn:active { transform: translateY(1px); }
.btn .btn-icon { font-size: 13px; line-height: 1; }
.btn.primary {
  border-color: rgba(52, 211, 153, 0.4);
  background: linear-gradient(180deg, rgba(52,211,153,0.16), rgba(52,211,153,0.06));
  color: #d1fae5;
}
.btn.primary:hover { background: linear-gradient(180deg, rgba(52,211,153,0.24), rgba(52,211,153,0.10)); }
.btn.toggle[data-on="true"] {
  border-color: rgba(16, 185, 129, 0.55);
  background: linear-gradient(180deg, rgba(16,185,129,0.18), rgba(16,185,129,0.06));
  color: #bff5dd;
  box-shadow: 0 0 12px var(--bull-glow);
}
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
/* .btn on an anchor — used by the topbar PLANS link, which is a real navigation
   to /pricing rather than an in-page control. Everything else in .btn is
   inherited; only the UA underline needs turning off. */
a.btn { text-decoration: none; }

/* TZ burger menu in the footer */
.footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tz-menu { position: relative; display: inline-flex; }
.tz-menu-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: all 120ms ease;
}
.tz-menu-btn:hover,
.tz-menu-btn[aria-expanded="true"] {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--panel-2);
}
.tz-menu-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: var(--panel-3);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 6px;
  min-width: 220px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,0.02);
  z-index: 100;
  max-height: 440px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tz-menu-popover[hidden] { display: none; }
.tz-menu-item {
  padding: 6px 10px;
  font: 600 10.5px/1.2 'JetBrains Mono', monospace;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 4px;
  text-transform: uppercase;
  user-select: none;
}
.tz-menu-item:hover { background: var(--panel); color: var(--text); }
.tz-menu-item.active {
  background: rgba(52, 211, 153, 0.15);
  color: #d1fae5;
}
.tz-menu-popover::-webkit-scrollbar { width: 6px; }
.tz-menu-popover::-webkit-scrollbar-thumb { background: #2a2e38; border-radius: 3px; }
.tz-menu-popover::-webkit-scrollbar-track { background: transparent; }
.tz-menu-section {
  font: 700 9px 'Inter';
  letter-spacing: 0.22em;
  color: var(--text-faint);
  padding: 8px 10px 4px;
  text-transform: uppercase;
  user-select: none;
}
.tz-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 2px;
}
.tz-menu-item.docs-item {
  color: #d1fae5;
  background: rgba(52, 211, 153, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.25);
}
.tz-menu-item.docs-item:hover {
  background: rgba(52, 211, 153, 0.18);
  color: #fff;
}

/* ====== Documentation modal ====== */
.docs-modal { max-width: 920px; }
.docs-body {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--text);
}
.docs-body h4 {
  margin: 24px 0 8px;
  font-size: 12px;
  letter-spacing: 0.22em;
  font-weight: 800;
  color: #d1fae5;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.docs-body h4:first-child { padding-top: 0; border-top: none; margin-top: 0; }
.docs-body h5 {
  margin: 14px 0 4px;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
}
.docs-body p {
  margin: 6px 0 10px;
  color: var(--text);
}
.docs-body ul, .docs-body ol {
  margin: 4px 0 10px;
  padding-left: 22px;
}
.docs-body li {
  margin: 4px 0;
  color: var(--text);
}
.docs-body li strong { color: #d1fae5; font-weight: 700; }
.docs-body code {
  font-family: 'JetBrains Mono', monospace;
  background: var(--bg-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11.5px;
  color: #fde6b8;
  border: 1px solid var(--border);
}
.docs-body .docs-callout {
  background: linear-gradient(180deg, rgba(52,211,153,0.08), rgba(52,211,153,0.02));
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 12.5px;
}
.docs-body .docs-callout.warn {
  background: linear-gradient(180deg, rgba(245,158,11,0.10), rgba(245,158,11,0.02));
  border-color: rgba(245, 158, 11, 0.35);
}
.docs-body .docs-callout.crit {
  background: linear-gradient(180deg, rgba(239,68,68,0.10), rgba(239,68,68,0.02));
  border-color: rgba(239, 68, 68, 0.35);
}
.docs-body .docs-callout .callout-tag {
  font: 700 9px 'Inter';
  letter-spacing: 0.22em;
  color: #d1fae5;
  margin-right: 8px;
  text-transform: uppercase;
}
.docs-body .docs-callout.warn .callout-tag { color: #fde6b8; }
.docs-body .docs-callout.crit .callout-tag { color: #fca5a5; }
.docs-body .docs-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 700px) {
  .docs-body .docs-grid-2 { grid-template-columns: 1fr; }
}

/* TradFi decision workspace · 2026-06-12 */
.tradfi-workspace-tabs,
.crypto-workspace-tabs {
  position: sticky;
  top: 0;
  z-index: 18;
  display: inline-flex;
  gap: 2px;
  margin: 0 0 12px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(8, 12, 18, 0.94);
  backdrop-filter: blur(12px);
}
.tradfi-workspace-tab,
.crypto-workspace-tab {
  min-width: 104px;
  height: 32px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0;
  cursor: pointer;
}
.tradfi-workspace-tab:hover,
.crypto-workspace-tab:hover { color: var(--text-primary); background: rgba(148, 163, 184, 0.07); }
.tradfi-workspace-tab.active,
.crypto-workspace-tab.active {
  color: #d9e8ff;
  background: rgba(59, 130, 246, 0.16);
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.35);
}
.tradfi-tab-panel[hidden] { display: none !important; }
.tradfi-tab-panel.active { display: block; }
.crypto-tab-panel[hidden] { display: none !important; }
.crypto-tab-panel.active { display: block; }

.tradfi-command-center {
  display: grid;
  grid-template-columns: minmax(320px, 1.25fr) minmax(230px, 0.8fr) minmax(210px, 0.7fr);
  min-height: 138px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(17, 23, 34, 0.92), rgba(12, 17, 25, 0.92));
  overflow: hidden;
}
.tradfi-command-center > div {
  min-width: 0;
  padding: 20px 22px;
}
.tradfi-command-center > div + div { border-left: 1px solid var(--border); }
.tradfi-command-state .hero-value {
  margin: 6px 0 4px;
  font-size: 30px;
  line-height: 1.05;
}
.tradfi-command-state.risk_on .hero-value,
.tradfi-command-state.bull .hero-value { color: var(--bull); }
.tradfi-command-state.risk_off .hero-value,
.tradfi-command-state.bear .hero-value { color: var(--bear); }
.command-posture-value,
.command-change-value {
  margin: 9px 0 7px;
  color: var(--text-primary);
  font: 700 20px/1.15 var(--font-mono);
}
.command-change-value { font-size: 28px; }
.command-probability {
  display: flex;
  width: 100%;
  height: 28px;
  margin-top: 13px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid var(--border);
}
.command-probability > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}
.command-probability .prob-bear { background: var(--bear); }
.command-probability .prob-transition { background: #94a3b8; }
.command-probability .prob-bull { background: var(--bull); }
.command-probability .prob-label {
  font: 700 10px/1 'Inter';
  color: #fff;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  padding: 0 6px;
}

.tradfi-ops-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(14, 19, 28, 0.72);
}
.tradfi-op {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  min-width: 0;
  gap: 4px 10px;
  padding: 9px 13px;
}
.tradfi-op + .tradfi-op { border-left: 1px solid var(--border); }
.tradfi-op span {
  color: var(--text-dim);
  font: 600 9px/1 var(--font-mono);
}
.tradfi-op strong {
  justify-self: end;
  color: var(--text-primary);
  font: 700 11px/1 var(--font-mono);
}
.tradfi-op small {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  font: 400 9px/1.2 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tradfi-command-kpis { margin-bottom: 16px; }
.tradfi-command-kpis .kpi-card { min-height: 82px; }

.tradfi-overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.34fr);
  gap: 16px;
  align-items: stretch;
}
.tradfi-overview-layout .tradfi-group-overview-section { margin: 0; }
.tradfi-action-rail {
  min-height: 100%;
  align-self: start;
}
@media (min-width: 1181px) {
  .tradfi-action-rail {
    position: sticky;
    top: 48px;
    max-height: calc(100vh - 130px);
  }
}
.tradfi-action-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  margin: 0 0 8px;
}
.tradfi-action-tabs button {
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.035);
  color: var(--text-dim);
  font: 600 8px/1 var(--font-mono);
  cursor: pointer;
}
.tradfi-action-tabs button:hover,
.tradfi-action-tabs button.active {
  border-color: rgba(96, 165, 250, 0.35);
  color: var(--text-primary);
  background: rgba(59, 130, 246, 0.10);
}
.tradfi-action-rail .feed-list { max-height: 270px; overflow: auto; }
.tradfi-action-rail .feed-row {
  grid-template-columns: 54px 42px minmax(0, 1fr) auto;
  padding-inline: 0;
}

.tradfi-summary-band {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  overflow: hidden;
}
.tradfi-summary-cell { min-width: 0; padding: 13px 16px; }
.tradfi-summary-cell + .tradfi-summary-cell { border-left: 1px solid var(--border); }
.tradfi-summary-cell .feed-list { max-height: 160px; overflow: auto; }

.tradfi-matrix-panel,
.tradfi-alignment-section,
.tradfi-tab-panel .deferred-section { margin-bottom: 12px; }
.deferred-section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 520px;
}
.view:not(.active) {
  content-visibility: hidden;
  contain: layout style paint;
}
.tradfi-matrix {
  contain: layout paint style;
  overscroll-behavior: contain;
}
.tradfi-group-row {
  width: 100%;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.tradfi-group-row > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.tradfi-group-row:hover { background: rgba(96, 165, 250, 0.07); }
.matrix-group-chevron { width: 10px; color: var(--text-dim); }

.rotation-quadrants {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.rotation-quadrant {
  min-height: 138px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: rgba(8, 12, 18, 0.45);
}
.rotation-quadrant.leading { border-color: rgba(52, 211, 153, 0.28); }
.rotation-quadrant.lagging { border-color: rgba(248, 113, 113, 0.28); }
.rotation-quadrant-title {
  margin-bottom: 8px;
  color: var(--text-dim);
  font: 700 9px/1 var(--font-mono);
}
.rotation-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid rgba(148, 163, 184, 0.08);
  color: var(--text-secondary);
  font: 500 10px/1.2 var(--font-mono);
}
.rotation-item strong { color: var(--text-primary); }

.driver-waterfall { padding: 8px 0; }
.driver-bar-row {
  display: grid;
  grid-template-columns: 150px minmax(150px, 1fr) 58px;
  gap: 12px;
  align-items: center;
  min-height: 40px;
  border-top: 1px solid rgba(148, 163, 184, 0.08);
}
.driver-bar-row:first-child { border-top: 0; }
.driver-label { color: var(--text-secondary); font: 500 10px/1.2 var(--font-mono); }
.driver-axis {
  position: relative;
  height: 10px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent calc(50% - .5px), rgba(148,163,184,.35) 50%, transparent calc(50% + .5px));
}
.driver-axis span {
  position: absolute;
  top: 1px;
  height: 8px;
  border-radius: 2px;
}
.driver-axis .positive { background: rgba(52, 211, 153, 0.78); }
.driver-axis .negative { background: rgba(248, 113, 113, 0.78); }
.driver-bar-row strong { text-align: right; font: 600 10px/1 var(--font-mono); }
.source-disclaimer {
  color: var(--text-muted);
  font: 400 10px/1.5 var(--font-mono);
}
.source-disclaimer strong { color: var(--text-secondary); }
.score-warn { color: #fbbf24 !important; }

.comparison-band {
  margin: 10px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(14, 19, 28, 0.72);
}
.comparison-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.comparison-head strong {
  color: var(--text-primary);
  font: 700 10px/1 var(--font-mono);
}
.comparison-head span {
  color: var(--text-muted);
  font: 500 9px/1 var(--font-mono);
}
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 6px;
}
.comparison-cell {
  min-width: 0;
  padding: 8px 10px;
  border-left: 2px solid var(--border-strong);
  background: rgba(7, 10, 15, 0.38);
}
.comparison-cell.bull { border-color: var(--bull); }
.comparison-cell.bear { border-color: var(--bear); }
.comparison-cell span,
.comparison-cell small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comparison-cell span { color: var(--text-dim); font: 600 8px/1 var(--font-mono); }
.comparison-cell strong { display: block; margin: 5px 0; font: 700 12px/1 var(--font-mono); }
.comparison-cell small { color: var(--text-muted); font: 500 8px/1 var(--font-mono); }

.asset-picker-btn { display: none; min-width: 86px; }
.topbar-asset-cluster {
  display: inline-flex !important;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
}
.asset-focus-control {
  display: inline-flex !important;
  align-items: stretch;
  flex-shrink: 0;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  overflow: hidden;
}
.asset-focus-control.is-filtered {
  border-color: rgba(245, 158, 11, 0.65);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.22);
}
.topbar-asset-cluster .asset-picker-btn,
.topbar-asset-cluster .asset-reset-btn,
.asset-focus-control .asset-picker-btn,
.asset-focus-control .asset-reset-btn {
  display: inline-flex !important;
  height: 34px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  flex-shrink: 0;
}
.asset-focus-control .asset-picker-btn {
  max-width: 118px;
  min-width: 88px;
  padding: 0 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.asset-focus-control.is-filtered .asset-picker-btn {
  border-right-color: rgba(245, 158, 11, 0.28);
}
.asset-focus-control .asset-reset-btn {
  min-width: 34px;
  width: 34px;
  padding: 0;
  justify-content: center;
}
.asset-focus-control .asset-reset-btn .btn-icon {
  font-size: 14px;
  line-height: 1;
}
.topbar-asset-cluster .asset-picker-btn {
  max-width: 132px;
  min-width: 96px;
}
.asset-picker-popover {
  position: fixed;
  top: 62px;
  right: 176px;
  z-index: 170;
  width: min(480px, calc(100vw - 28px));
  max-height: min(620px, calc(100vh - 82px));
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: rgba(12, 16, 24, 0.98);
  box-shadow: 0 22px 70px rgba(0,0,0,.62);
}
.asset-picker-popover[hidden] { display: none; }
.asset-picker-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--border);
}
.asset-picker-head input,
.command-palette-head input,
.workspace-select {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-2);
  color: var(--text-primary);
  font: 500 10px/1 var(--font-mono);
}
.asset-picker-head input { height: 32px; padding: 0 10px; }
.asset-picker-sections { max-height: 540px; overflow: auto; padding: 8px 10px 12px; }
.asset-picker-group { margin-top: 9px; }
.asset-picker-group:first-child { margin-top: 0; }
.asset-picker-group-title {
  margin: 0 0 5px;
  color: var(--text-faint);
  font: 700 8px/1 var(--font-mono);
}
.asset-picker-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}
.asset-picker-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
}
.asset-picker-item:hover,
.asset-picker-item.active {
  border-color: var(--border-strong);
  background: rgba(96,165,250,.08);
  color: var(--text-primary);
}
.asset-picker-item strong { font: 700 10px/1 var(--font-mono); }
.asset-picker-item span {
  overflow: hidden;
  font: 500 9px/1.2 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-pin {
  border: 0;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
}
.asset-pin.pinned { color: #fbbf24; }

.command-palette {
  position: fixed;
  inset: 0;
  z-index: 260;
  padding-top: min(15vh, 120px);
  background: rgba(2, 4, 8, 0.72);
  backdrop-filter: blur(8px);
}
.command-palette[hidden] { display: none; }
.command-palette-card {
  width: min(680px, calc(100vw - 28px));
  max-height: min(620px, calc(100vh - 120px));
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 26px 90px rgba(0,0,0,.72);
}
.command-palette-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.command-palette-head input {
  height: 34px;
  padding: 0 10px;
  border: 0;
  font-size: 12px;
}
.command-palette-head kbd { color: var(--text-faint); font: 600 8px/1 var(--font-mono); }
.command-palette-results { max-height: 500px; overflow: auto; padding: 7px; }
.command-result {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
}
.command-result:hover,
.command-result.active {
  border-color: rgba(96,165,250,.30);
  background: rgba(59,130,246,.10);
  color: var(--text-primary);
}
.command-result strong { font: 700 9px/1 var(--font-mono); }
.command-result span {
  overflow: hidden;
  font: 500 10px/1.25 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.command-result small { color: var(--text-faint); font: 500 8px/1 var(--font-mono); }
.workspace-select { width: 100%; height: 30px; padding: 0 8px; }

.tradfi-matrix .matrix-asset-cell.row-hover,
.tradfi-matrix .tradfi-hmm-cell.row-hover { background-color: rgba(96, 165, 250, 0.08); }
.tradfi-matrix .tradfi-hmm-cell.column-hover {
  outline: 1px solid rgba(96, 165, 250, 0.25);
  outline-offset: -1px;
}

@media (max-width: 1200px) {
  .tradfi-command-center { grid-template-columns: 1.2fr 0.9fr; }
  .tradfi-command-change { grid-column: 1 / -1; border-top: 1px solid var(--border); border-left: 0 !important; }
  .tradfi-overview-layout { grid-template-columns: 1fr; }
  .tradfi-action-rail .feed-list { max-height: 230px; }
}
@media (max-width: 820px) {
  .tradfi-workspace-tabs,
  .crypto-workspace-tabs { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .tradfi-workspace-tab,
  .crypto-workspace-tab { min-width: 0; }
  .tradfi-command-center { grid-template-columns: 1fr; }
  .tradfi-command-center > div + div { border-left: 0; border-top: 1px solid var(--border); }
  .tradfi-command-change { grid-column: auto; }
  .tradfi-ops-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tradfi-op:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
  .tradfi-op:nth-child(4) { border-top: 1px solid var(--border); }
  .tradfi-summary-band { grid-template-columns: 1fr; }
  .tradfi-summary-cell + .tradfi-summary-cell { border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 560px) {
  .tradfi-command-center > div { padding: 16px; }
  .tradfi-command-state .hero-value { font-size: 24px; }
  .tradfi-ops-strip { grid-template-columns: 1fr; }
  .tradfi-op + .tradfi-op { border-left: 0; border-top: 1px solid var(--border); }
  .tradfi-action-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asset-picker-list { grid-template-columns: 1fr; }
  .asset-picker-popover { top: 54px; right: 8px; }
  .command-result { grid-template-columns: 60px minmax(0, 1fr); }
  .command-result small { display: none; }
  .rotation-quadrants { grid-template-columns: 1fr; }
  .driver-bar-row { grid-template-columns: 94px minmax(90px, 1fr) 48px; gap: 7px; }
}
.docs-body .docs-mini-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.docs-body .docs-mini-card strong { display: block; font-size: 12px; letter-spacing: 0.12em; color: #d1fae5; margin-bottom: 3px; }
.docs-body .docs-mini-card span { font-size: 12px; color: var(--text-dim); }
.docs-body .docs-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  font: 700 10px 'Inter';
  letter-spacing: 0.14em;
  margin: 0 2px;
}
.docs-body .docs-tag.bull { background: rgba(16,185,129,0.18); color: #c6f6e2; }
.docs-body .docs-tag.chop { background: rgba(148,163,184,0.18); color: #d8dfeb; }
.docs-body .docs-tag.bear { background: rgba(239,68,68,0.18); color: #fbcdcd; }
.docs-body .docs-toc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 18px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 10px;
}
.docs-body .docs-toc a {
  color: var(--text-dim);
  text-decoration: none;
  font: 600 11.5px 'Inter';
  letter-spacing: 0.04em;
  padding: 3px 0;
  border-bottom: 1px dashed transparent;
}
.docs-body .docs-toc a:hover { color: #d1fae5; border-bottom-color: rgba(52,211,153,0.5); }
.docs-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin: 8px 0 12px;
}
.docs-body th, .docs-body td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.docs-body th {
  font: 700 10px 'Inter';
  letter-spacing: 0.16em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.docs-body td.mono { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #fde6b8; }

/* ====== Joint market state bar ====== */
.market-state-bar {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 24px;
  align-items: center;
  margin: 16px auto 0;
  padding: 14px 22px;
  max-width: 1500px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border-strong);
  position: relative;
  overflow: hidden;
}
.market-state-bar::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--ms-glow, transparent), transparent 80%);
  pointer-events: none;
}
.market-state-bar.risk_on    { --ms-glow: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.5); }
.market-state-bar.transition { --ms-glow: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.45); }
.market-state-bar.risk_off   { --ms-glow: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.5); }
.ms-label {
  font: 700 10px 'Inter';
  letter-spacing: 0.2em;
  color: var(--text-faint);
  position: relative; z-index: 1;
}
.ms-value {
  font: 800 24px 'Inter';
  letter-spacing: 0.06em;
  position: relative; z-index: 1;
}
.market-state-bar.risk_on    .ms-value { color: #6ee7b7; }
.market-state-bar.transition .ms-value { color: #fde6b8; }
.market-state-bar.risk_off   .ms-value { color: #fca5a5; }
.ms-probs { display: flex; gap: 14px; position: relative; z-index: 1; }
.ms-prob {
  display: flex; flex-direction: column; align-items: flex-end;
  font-size: 10px; letter-spacing: 0.16em; color: var(--text-faint); font-weight: 600;
}
.ms-prob .mono { font-size: 14px; color: var(--text); }
.ms-meta {
  display: flex; flex-direction: column; align-items: flex-end;
  font-size: 10px; letter-spacing: 0.16em; color: var(--text-faint); font-weight: 600;
  position: relative; z-index: 1;
}
.ms-meta .mono { font-size: 14px; color: var(--text); }

/* ====== Macro strip ====== */
.macro-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 28px 0 28px;
  max-width: 1500px;
  margin: 18px auto 0;
}
.macro-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
  overflow: hidden;
  min-height: 92px;
}
.macro-source {
  font: 600 8.5px 'JetBrains Mono', monospace;
  color: var(--text-faint);
  letter-spacing: 0.10em;
  opacity: 0.65;
  margin-top: 2px;
}
.macro-transition {
  background: linear-gradient(180deg, rgba(245,158,11,0.10), rgba(245,158,11,0.02));
  border-color: rgba(245,158,11,0.45);
}
.macro-transition.risk_on    { background: linear-gradient(180deg, rgba(16,185,129,0.10), rgba(16,185,129,0.02)); border-color: rgba(16,185,129,0.45); }
.macro-transition.risk_off   { background: linear-gradient(180deg, rgba(239,68,68,0.10), rgba(239,68,68,0.02)); border-color: rgba(239,68,68,0.50); }
.macro-transition.transition { background: linear-gradient(180deg, rgba(245,158,11,0.10), rgba(245,158,11,0.02)); border-color: rgba(245,158,11,0.45); }
.macro-transition .macro-value {
  font-size: clamp(14px, 1.18vw, 18px);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.macro-transition.risk_on    .macro-value { color: #6ee7b7; }
.macro-transition.transition .macro-value { color: #fde6b8; }
.macro-transition.risk_off   .macro-value { color: #fca5a5; }
.macro-transition .macro-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.macro-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(140% 80% at 100% 0%, rgba(52,211,153,0.06), transparent 60%);
}
.macro-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-faint);
  font-weight: 700;
}
.macro-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}
.macro-value.pos { color: #6ee7b7; }
.macro-value.neg { color: #fca5a5; }
.macro-sub {
  font-size: 10.5px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
}
.macro-sub.fg-extreme-fear { color: #ef4444; }
.macro-sub.fg-fear { color: #f97316; }
.macro-sub.fg-neutral { color: #94a3b8; }
.macro-sub.fg-greed { color: #84cc16; }
.macro-sub.fg-extreme-greed { color: #10b981; }

@media (max-width: 1300px) {
  .macro-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .macro-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ====== Status banner ====== */
.status-banner {
  margin: 14px 28px 0;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 16px;
  border-radius: 8px;
  font: 600 11px 'Inter';
  letter-spacing: 0.14em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.status-banner[hidden] { display: none; }
.status-banner.warn {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.06));
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fde6b8;
}
.status-banner.error {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.18), rgba(239, 68, 68, 0.06));
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #fbcdcd;
}
.status-banner .banner-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 8px currentColor;
}

/* ====== Composite cross-TF strip ====== */
.composite-section {
  max-width: 1500px;
  margin: 22px auto 0;
  padding: 0 28px;
}
.tradfi-alignment-section,
.msgarch-alignment-section {
  margin-top: 0;
  margin-bottom: 18px;
}
.composite-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}
.composite-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  position: relative;
  overflow: hidden;
  cursor: default;
}
.composite-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--cc-glow, transparent), transparent 70%);
  pointer-events: none;
}
.composite-card.aligned-bull { border-color: rgba(16,185,129,0.55); --cc-glow: rgba(16,185,129,0.12); }
.composite-card.aligned-bear { border-color: rgba(239,68,68,0.55); --cc-glow: rgba(239,68,68,0.12); }
.composite-card.leaning-bull { border-color: rgba(16,185,129,0.32); --cc-glow: rgba(16,185,129,0.06); }
.composite-card.leaning-bear { border-color: rgba(239,68,68,0.32); --cc-glow: rgba(239,68,68,0.06); }
.composite-card .cc-asset {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text);
  position: relative;
  z-index: 1;
}
.composite-card .cc-tag {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  text-transform: uppercase;
  font-weight: 600;
  position: relative;
  z-index: 1;
}
.composite-card .cc-score {
  font: 700 16px 'JetBrains Mono';
  position: relative;
  z-index: 1;
}
.composite-card .cc-score.pos { color: #6ee7b7; }
.composite-card .cc-score.neg { color: #fca5a5; }
.composite-card .cc-bar {
  margin-top: 6px;
  height: 3px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.composite-card .cc-bar-fill {
  position: absolute;
  height: 100%;
  left: 50%;
  border-radius: 2px;
  transition: width 240ms ease, background 240ms ease;
}
.composite-card .cc-bar-fill.pos { background: var(--bull); }
.composite-card .cc-bar-fill.neg { background: var(--bear); }
@media (max-width: 1200px) {
  .composite-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .composite-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ====== Sparkline + duration pill in cells ====== */
.cell-spark {
  height: 22px;
  width: 100%;
  position: relative;
  z-index: 1;
}
/* BOCPD break-prob mini bar below the sparkline */
.cell-bocpd {
  height: 4px;
  display: flex;
  background: rgba(255,255,255,0.04);
  border-radius: 2px;
  overflow: hidden;
  position: relative; z-index: 1;
}
.cell-bocpd-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  transition: width 240ms ease;
}
.cell-bocpd.hot {
  box-shadow: 0 0 8px rgba(239,68,68,0.6);
}
.cell-spark svg {
  width: 100%;
  height: 100%;
  display: block;
}
.cell-dur-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  font: 600 9px 'JetBrains Mono';
  letter-spacing: 0.06em;
  background: rgba(255,255,255,0.04);
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.cell-dur-pill.fresh {
  background: rgba(52, 211, 153, 0.2);
  color: #d1fae5;
  border-color: rgba(52, 211, 153, 0.5);
  animation: just-flipped 1.8s ease-in-out infinite;
}
@keyframes just-flipped {
  0%, 100% { box-shadow: 0 0 0 rgba(52,211,153,0); }
  50%      { box-shadow: 0 0 12px rgba(52,211,153,0.6); }
}
.cell { cursor: pointer; }
.cell-asof-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
}

/* ====== Modal ====== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 4, 8, 0.78);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 30px 30px 60px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-backdrop[hidden] { display: none; }
/* The rule builder can be opened from inside the Smart Alerts modal, so it must
   stack above it (both are .modal-backdrop at z-index 200). */
#rule-modal-backdrop { z-index: 240; }
.modal {
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  max-width: 980px;
  width: 100%;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 90px);
  overflow: hidden;
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 22px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 1;
}
.modal-head h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.12em;
  font-weight: 800;
}
.modal-subtitle {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  font-weight: 600;
  text-transform: uppercase;
}
.kpi-explain-footer {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.kpi-explain-text {
  margin: 8px 0 0;
  font: 500 13px/1.55 'Inter', system-ui, sans-serif;
  color: var(--text-dim);
  letter-spacing: 0.01em;
  max-width: 52ch;
}
.modal-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { color: var(--text); border-color: var(--border-strong); }
.modal-body {
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.modal-body::-webkit-scrollbar { width: 10px; }
.modal-body::-webkit-scrollbar-thumb { background: #2a2e38; border-radius: 5px; }
.modal-body::-webkit-scrollbar-thumb:hover { background: #3a4258; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-section-title-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.modal-section { display: flex; flex-direction: column; gap: 6px; }
.modal-section-label {
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--text-faint);
  font-weight: 700;
}
.modal-svg {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.modal-linked-charts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(52, 211, 153, 0.14);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(8, 12, 18, 0.35), rgba(8, 12, 18, 0.12));
}
.modal-linked-hint {
  margin: 0;
  font: 500 11px/1.4 'Inter';
  color: var(--text-dim);
}
.modal-linked-svg {
  outline: none;
}
.modal-linked-svg.is-synced rect[id$="hitbox"] {
  cursor: crosshair;
}
.modal-svg rect[id$="hitbox"] {
  cursor: crosshair;
}
.modal-linked-charts.is-brushing,
.modal-linked-charts.is-brushing * {
  user-select: none !important;
  cursor: crosshair !important;
}
.modal-zoom-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.modal-zoom-reset {
  appearance: none;
  border: 1px solid rgba(52, 211, 153, 0.35);
  background: rgba(16, 185, 129, 0.10);
  color: #6ee7b7;
  font: 700 10px/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
  cursor: pointer;
}
.modal-zoom-reset:hover {
  border-color: rgba(52, 211, 153, 0.55);
  background: rgba(16, 185, 129, 0.18);
  color: #d1fae5;
}
.modal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.modal-stat {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.modal-stat-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  font-weight: 700;
}
.modal-stat-value { font-size: 13px; font-weight: 600; color: var(--text); }

.modal-fwd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.modal-fwd-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.modal-fwd-card .fwd-name { font: 700 10px 'Inter'; letter-spacing: 0.18em; }
.modal-fwd-card.bull .fwd-name { color: #6ee7b7; }
.modal-fwd-card.chop .fwd-name { color: #d8dfeb; }
.modal-fwd-card.bear .fwd-name { color: #fca5a5; }
.modal-fwd-card .fwd-mean { font: 700 18px 'JetBrains Mono'; }
.modal-fwd-card .fwd-mean.pos { color: #6ee7b7; }
.modal-fwd-card .fwd-mean.neg { color: #fca5a5; }
.modal-fwd-card .fwd-meta {
  display: flex; justify-content: space-between;
  font: 500 10px 'JetBrains Mono'; color: var(--text-faint);
}
.modal-fwd-hist {
  height: 30px;
  background: rgba(255,255,255,0.03);
  border-radius: 4px;
  margin-top: 4px;
}

.modal-attrib {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.attrib-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.attrib-name {
  font: 700 10px 'Inter'; letter-spacing: 0.18em;
  text-transform: uppercase;
}
.attrib-card.bull .attrib-name { color: #6ee7b7; }
.attrib-card.chop .attrib-name { color: #d8dfeb; }
.attrib-card.bear .attrib-name { color: #fca5a5; }
.attrib-value { font: 700 18px 'JetBrains Mono'; }
.attrib-value.pos { color: #6ee7b7; }
.attrib-value.neg { color: #fca5a5; }
.attrib-sub { font: 500 10px 'Inter'; color: var(--text-faint); }
.attrib-total {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 14px;
  font: 600 11px 'Inter'; letter-spacing: 0.14em;
}
.attrib-total .mono { font-family: 'JetBrains Mono'; }

/* ====== Mobile responsive ====== */
@media (max-width: 1200px) {
  .matrix-grid {
    grid-template-columns: 64px repeat(6, minmax(0, 1fr));
    gap: 5px;
  }
}
@media (max-width: 900px) {
  main { grid-template-columns: 1fr !important; padding: 14px; gap: 16px; }
  .matrix-grid {
    grid-template-columns: 56px repeat(6, minmax(0, 1fr));
    gap: 4px;
  }
  .cell { min-height: 64px; padding: 6px 8px; }
}
@media (max-width: 700px) {
  .matrix-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .matrix-header-cell:nth-child(n+2) { display: none; }
  .matrix-asset-cell { border-radius: 6px 6px 0 0; padding: 6px; }
  .cell {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  /* Stack each asset row as 6 stacked cells with a TF label */
  .cell::after {
    content: attr(data-tf);
    position: absolute;
    top: 6px;
    right: 8px;
    font: 700 8.5px 'JetBrains Mono';
    color: var(--text-faint);
    letter-spacing: 0.12em;
    z-index: 2;
  }
}

/* ====== HMM view: matrix is full-width (recent shifts moved to FAB modal) ====== */
.view-hmm > .matrix-section,
.view-hmm > .composite-section {
  padding: 18px 28px 0;
  max-width: 1500px;
  margin: 0 auto;
}
.view-hmm > .matrix-section { padding-bottom: 70px; }

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.section-header h2 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--text);
  font-weight: 800;
}
.legend { display: flex; gap: 14px; }
.legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; letter-spacing: 0.18em;
  color: var(--text-faint); font-weight: 600;
}
.legend-item .dot { width: 8px; height: 8px; border-radius: 50%; }
.dot.bull { background: var(--bull); box-shadow: 0 0 8px var(--bull-glow); }
.dot.chop { background: var(--chop); box-shadow: 0 0 8px var(--chop-glow); }
.dot.bear { background: var(--bear); box-shadow: 0 0 8px var(--bear-glow); }

/* ====== Matrix (compact table layout) ====== */
.matrix-grid {
  display: grid;
  grid-template-columns: 78px repeat(6, minmax(0, 1fr));
  gap: 6px;
}
.matrix-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  color: var(--text-faint);
  font-family: 'JetBrains Mono', monospace;
}

.matrix-header-cell, .matrix-asset-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--text-dim);
  padding: 8px 6px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.matrix-asset-cell {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.08em;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
}

.cell {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 72px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
}
.cell:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.cell::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 0% 0%, var(--cell-glow, transparent), transparent 60%);
  opacity: 0.65;
}
.cell.bull { --cell-glow: rgba(16, 185, 129, 0.10); border-color: rgba(16, 185, 129, 0.35); }
.cell.chop { --cell-glow: rgba(148, 163, 184, 0.08); }
.cell.bear { --cell-glow: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.35); }
.cell.error { --cell-glow: rgba(120, 120, 120, 0.05); }

.cell-head {
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 1;
}
.regime-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 7px;
  border-radius: 5px;
  font: 700 9.5px/1 'Inter';
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.regime-chip .chip-dot {
  width: 7px; height: 7px; border-radius: 50%;
}
.regime-chip.bull { background: rgba(16,185,129,0.16); border-color: rgba(16,185,129,0.45); color: #c6f6e2; }
.regime-chip.bull .chip-dot { background: var(--bull); box-shadow: 0 0 6px var(--bull-glow); }
.regime-chip.chop { background: rgba(148,163,184,0.12); border-color: rgba(148,163,184,0.4); color: #d8dfeb; }
.regime-chip.chop .chip-dot { background: var(--chop); }
.regime-chip.bear { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.5); color: #fbcdcd; }
.regime-chip.bear .chip-dot { background: var(--bear); box-shadow: 0 0 6px var(--bear-glow); }
.regime-chip.error { background: rgba(80,80,80,0.2); color: #b0b0b0; border-color: #444; }

.last-close {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
}

.proba-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  position: relative; z-index: 1;
}
.proba-bar > div { height: 100%; transition: width 240ms ease; }
.proba-bar .p-bear { background: var(--bear); }
.proba-bar .p-chop { background: var(--chop); }
.proba-bar .p-bull { background: var(--bull); }

.cell-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-dim);
  position: relative; z-index: 1;
}
.meta-item { display: flex; flex-direction: column; gap: 1px; }
.meta-label { font-size: 8.5px; letter-spacing: 0.12em; color: var(--text-faint); font-family: 'Inter'; font-weight: 600; }
.meta-value { color: var(--text); font-weight: 500; }
.meta-value.pos { color: #6ee7b7; }
.meta-value.neg { color: #fca5a5; }

.cell-asof {
  font-size: 9px;
  color: var(--text-faint);
  font-family: 'JetBrains Mono', monospace;
  position: relative; z-index: 1;
  letter-spacing: 0.04em;
}

.cell.error .cell-error {
  color: #b0b0b0;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
}

/* ====== Recent shifts feed ====== */
.feed-section { min-width: 0; }
.feed-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 720px;
  overflow-y: auto;
  padding-right: 4px;
}
.feed-list::-webkit-scrollbar { width: 8px; }
.feed-list::-webkit-scrollbar-thumb { background: #232838; border-radius: 4px; }
.feed-list::-webkit-scrollbar-track { background: transparent; }
.feed-empty { color: var(--text-faint); padding: 20px; text-align: center; font-size: 12px; }

.feed-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
}
.feed-asset {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; letter-spacing: 0.06em;
}
.feed-tf {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-faint);
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
}
.feed-transition {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.feed-transition .tag { padding: 3px 6px; border-radius: 4px; font-size: 10px; text-transform: uppercase; }
.feed-transition .tag.bull { background: rgba(16,185,129,0.18); color: #b6f1d6; }
.feed-transition .tag.chop { background: rgba(148,163,184,0.18); color: #d8dfeb; }
.feed-transition .tag.bear { background: rgba(239,68,68,0.18); color: #fbcdcd; }
.feed-transition .arrow { color: var(--text-faint); }
.feed-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-faint);
}

.feed-sub { font-size: 10px; color: var(--text-faint); letter-spacing: 0.16em; font-weight: 600; }
.metric-help-trigger {
  cursor: help;
  text-decoration: underline dotted rgba(255, 255, 255, 0.22);
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.metric-help-trigger:hover,
.metric-help-trigger:focus {
  color: var(--text-dim);
  outline: none;
}
.metric-help-body {
  margin-top: 6px;
  font: 500 11px/1.45 'Inter', sans-serif;
  color: var(--text);
  max-width: 300px;
  letter-spacing: 0.01em;
}
.chart-tooltip .metric-help-body strong { font-weight: 600; }

/* ====== Footer ====== */
.footer {
  position: fixed;
  bottom: 0;
  left: calc(var(--sidebar-width, 200px) + var(--content-sidebar-gap, 8px));
  right: 0;
  padding: 8px 28px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 10.5px;
  color: var(--text-faint);
  border-top: 1px solid var(--border);
  background: rgba(7, 8, 11, 0.92);
  backdrop-filter: blur(8px);
  font-family: 'JetBrains Mono', monospace;
  z-index: 10;
}
@media (max-width: 900px) {
  .footer { left: 0; }
}
#conn-status { color: var(--bull); }
#conn-status.bad { color: var(--bear); }

/* TradFi run status remains centered in the footer. */
.footer-ops {
  display: none;
  align-items: center;
  min-width: 0;
}
body.mode-tradfi .footer-ops {
  display: inline-flex;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.footer-op {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 0 14px;
  white-space: nowrap;
}
.footer-op:first-child { padding-left: 0; }
.footer-op:last-child { padding-right: 0; }
.footer-op + .footer-op { border-left: 1px solid var(--border); }
.footer-op-k { letter-spacing: .04em; }
.footer-op strong { font-weight: inherit; }
.footer-op strong.ok { color: var(--bull); }
.footer-op strong.bad { color: var(--bear); }
.footer-op small { display: none; }
@media (max-width: 760px) {
  body.mode-tradfi .footer-ops { display: none; }
}

/* small responsive */
@media (max-width: 720px) {
  .topbar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .status-bar { flex-wrap: wrap; }
  main { padding: 16px; }
  .matrix-grid { grid-template-columns: 70px repeat(3, minmax(0, 1fr)); }
}

/* ===================================================================
   MAIN DASHBOARD VIEW
   =================================================================== */
.hero-state-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.hero-card {
  position: relative;
  padding: 24px 26px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border);
  overflow: hidden;
  min-height: 144px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-soft);
  transition: border-color 160ms ease, transform 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-card:hover { transform: translateY(-1px); }
.hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 110% 0%, var(--hero-glow, rgba(52,211,153,0.10)), transparent 70%);
  pointer-events: none;
}
.hero-card.risk_on,
.hero-card.RISK_ON_TREND,
.hero-card.MEAN_REVERSION_RALLY,
.hero-card.green { --hero-glow: rgba(16,185,129,0.16); border-color: rgba(16,185,129,0.45); }
.hero-card.risk_off,
.hero-card.DELEVERAGING,
.hero-card.LIQUIDITY_VACUUM,
.hero-card.VOL_EXPANSION,
.hero-card.RISK_ON_EXHAUSTION,
.hero-card.red { --hero-glow: rgba(239,68,68,0.16); border-color: rgba(239,68,68,0.45); }
.hero-card.transition,
.hero-card.NEUTRAL_CHOP,
.hero-card.slate { --hero-glow: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.40); }
.hero-label {
  font: 700 10px 'Inter';
  letter-spacing: 0.22em;
  color: var(--text-faint);
  position: relative; z-index: 1;
}
.hero-value {
  font: 800 30px/1.1 'Inter';
  letter-spacing: 0.04em;
  position: relative; z-index: 1;
}
.hero-card.risk_on .hero-value,
.hero-card.RISK_ON_TREND .hero-value,
.hero-card.MEAN_REVERSION_RALLY .hero-value,
.hero-card.green .hero-value { color: #6ee7b7; }
.hero-card.risk_off .hero-value,
.hero-card.DELEVERAGING .hero-value,
.hero-card.LIQUIDITY_VACUUM .hero-value,
.hero-card.VOL_EXPANSION .hero-value,
.hero-card.RISK_ON_EXHAUSTION .hero-value,
.hero-card.red .hero-value { color: #fca5a5; }
.hero-card.transition .hero-value,
.hero-card.NEUTRAL_CHOP .hero-value,
.hero-card.slate .hero-value { color: #fde6b8; }
.hero-sub {
  font: 600 12px 'JetBrains Mono';
  color: var(--text-dim);
  position: relative; z-index: 1;
}
@media (max-width: 900px) {
  .hero-state-grid { grid-template-columns: 1fr; }
}

/* KPI strip on main + MS-GARCH */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.kpi-card {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 16px;
  display: flex; flex-direction: column; gap: 3px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.kpi-card.tone-green { border-color: rgba(16,185,129,0.45); }
.kpi-card.tone-red { border-color: rgba(239,68,68,0.45); }
.kpi-card.tone-slate { border-color: rgba(148,163,184,0.30); }
.kpi-label { font: 700 9.5px 'Inter'; letter-spacing: 0.2em; color: var(--text-faint); }
.kpi-value { font: 700 22px 'JetBrains Mono'; color: var(--text); }
.kpi-card.tone-green .kpi-value { color: #6ee7b7; }
.kpi-card.tone-red .kpi-value { color: #fca5a5; }
.kpi-detail { font: 500 10.5px 'Inter'; color: var(--text-dim); }
@media (max-width: 1100px) {
  .kpi-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Two-panel main grid */
.main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 22px;
}
.main-panel {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-soft);
}
.main-alignment-panel {
  margin-bottom: 18px;
}
.main-alignment-grid .composite-card {
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease;
}
.main-alignment-grid .composite-card:hover {
  transform: translateY(-1px);
  background: var(--panel-2);
  border-color: var(--border-strong);
}
.main-intelligence-grid {
  align-items: stretch;
}
.front-signal-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.front-signal-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 54px 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-left: 2px solid var(--text-faint);
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
}
.front-signal-row:hover {
  transform: translateX(1px);
  background: rgba(255,255,255,0.025);
  border-color: var(--border-strong);
}
.front-signal-row.tone-green { border-left-color: var(--bull); }
.front-signal-row.tone-red { border-left-color: var(--bear); }
.front-signal-row.tone-slate { border-left-color: var(--chop); }
.front-signal-asset,
.front-signal-tf,
.front-signal-value {
  font-family: 'JetBrains Mono', monospace;
}
.front-signal-asset {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.front-signal-tf {
  color: var(--text-faint);
  font-size: 9px;
  font-weight: 700;
}
.front-signal-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.front-signal-copy strong {
  overflow: hidden;
  color: var(--text);
  font: 700 10px/1.25 'Inter', sans-serif;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.front-signal-copy span {
  overflow: hidden;
  color: var(--text-dim);
  font: 500 9.5px/1.25 'Inter', sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.front-signal-value {
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.front-signal-row.tone-green .front-signal-value { color: #6ee7b7; }
.front-signal-row.tone-red .front-signal-value { color: #fca5a5; }
.decision-posture-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.decision-posture-card {
  min-width: 0;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
}
.decision-posture-card:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.025);
  border-color: var(--border-strong);
}
.decision-posture-card.tone-green { border-color: rgba(16,185,129,0.42); }
.decision-posture-card.tone-red { border-color: rgba(239,68,68,0.42); }
.decision-posture-label {
  color: var(--text-faint);
  font: 800 9px 'Inter', sans-serif;
  letter-spacing: 0.16em;
}
.decision-posture-count {
  color: var(--text);
  font: 800 25px/1 'JetBrains Mono', monospace;
}
.decision-posture-card.tone-green .decision-posture-count { color: #6ee7b7; }
.decision-posture-card.tone-red .decision-posture-count { color: #fca5a5; }
.decision-posture-detail {
  max-width: 100%;
  overflow: hidden;
  color: var(--text-dim);
  font: 500 10px/1.35 'Inter', sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.decision-posture-score {
  margin-top: auto;
  color: var(--text-faint);
  font: 700 9.5px 'JetBrains Mono', monospace;
}
.front-signal-row:focus-visible,
.decision-posture-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .front-signal-row {
    grid-template-columns: 48px 40px minmax(0, 1fr);
  }
  .front-signal-value {
    grid-column: 3;
  }
  .decision-posture-grid {
    grid-template-columns: 1fr;
  }
}

.diagnostic-card-grid,
.template-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.template-grid { margin-bottom: 12px; }
.diagnostic-card,
.template-card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
}
.diagnostic-card:hover,
.template-card:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.diagnostic-card.tone-red,
.template-card.tone-red { border-color: rgba(239,68,68,0.45); }
.diagnostic-card.tone-green,
.template-card.tone-green { border-color: rgba(16,185,129,0.45); }
.diagnostic-title,
.template-title {
  font: 800 10.5px 'Inter';
  letter-spacing: 0.16em;
  color: var(--text);
  text-transform: uppercase;
}
.diagnostic-value {
  font: 800 24px/1 'JetBrains Mono';
  color: #d1fae5;
}
.diagnostic-card.tone-red .diagnostic-value,
.template-card.tone-red .template-state { color: #fca5a5; }
.diagnostic-card.tone-green .diagnostic-value,
.template-card.tone-green .template-state { color: #6ee7b7; }
.diagnostic-detail,
.template-detail {
  font: 500 10.5px/1.35 'Inter';
  color: var(--text-dim);
}
.template-foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.template-state {
  font: 800 10px 'Inter';
  letter-spacing: 0.18em;
  color: var(--text-faint);
}
.template-add {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text-dim);
  border-radius: 5px;
  padding: 4px 7px;
  font: 800 9px 'Inter';
  letter-spacing: 0.14em;
  cursor: pointer;
}
.template-add:hover { color: var(--text); border-color: var(--border-strong); }
.density-controls {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.density-btn {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 6px 9px;
  font: 800 9.5px 'Inter';
  letter-spacing: 0.16em;
  cursor: pointer;
}
.density-btn.active,
.density-btn:hover {
  color: #d1fae5;
  border-color: rgba(52,211,153,0.45);
  background: rgba(52,211,153,0.10);
}
.decision-matrix-grid {
  display: grid;
  grid-template-columns: 80px repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.decision-cell {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 11px;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.decision-cell.tone-green { border-color: rgba(16,185,129,0.40); }
.decision-cell.tone-red { border-color: rgba(239,68,68,0.40); }
.decision-cell.filtered { opacity: 0.28; }
.decision-cell .dc-score {
  font: 800 20px 'JetBrains Mono';
}
.decision-cell.tone-green .dc-score { color: #6ee7b7; }
.decision-cell.tone-red .dc-score { color: #fca5a5; }
.decision-cell .dc-label {
  font: 800 10px/1.25 'Inter';
  letter-spacing: 0.10em;
  color: var(--text);
  text-transform: uppercase;
}
.decision-cell .dc-meta {
  margin-top: auto;
  font: 600 10px/1.35 'JetBrains Mono';
  color: var(--text-dim);
}
.quality-matrix-grid,
.persistence-matrix-grid {
  display: grid;
  grid-template-columns: 80px repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.quality-cell,
.persistence-cell {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 11px;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  overflow: hidden;
}
.quality-cell:hover,
.persistence-cell:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.quality-cell.tone-green,
.persistence-cell.tone-green { border-color: rgba(16,185,129,0.42); }
.quality-cell.tone-red,
.persistence-cell.tone-red { border-color: rgba(239,68,68,0.42); }
.qc-value,
.pc-value {
  font: 800 21px/1 'JetBrains Mono';
  color: #d1fae5;
}
.quality-cell.tone-green .qc-value,
.persistence-cell.tone-green .pc-value { color: #6ee7b7; }
.quality-cell.tone-red .qc-value,
.persistence-cell.tone-red .pc-value { color: #fca5a5; }
.qc-bar {
  height: 5px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
}
.qc-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--bull));
}
.qc-meta,
.pc-meta,
.qc-sub,
.pc-sub {
  font: 600 10px/1.35 'JetBrains Mono';
  color: var(--text-dim);
}
.pc-regime {
  font: 800 10px 'Inter';
  letter-spacing: 0.14em;
  color: var(--text);
}

/* Next-regime forecast view */
.forecast-hero-panel {
  margin-bottom: 16px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(52,211,153,0.05), rgba(15,23,42,0.4));
}
.forecast-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.forecast-hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font: 800 10px 'Inter';
  letter-spacing: 0.18em;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
}
.forecast-hero-badge.tone-green { border-color: rgba(16,185,129,0.45); color: #6ee7b7; background: rgba(16,185,129,0.08); }
.forecast-hero-badge.tone-red { border-color: rgba(239,68,68,0.45); color: #fca5a5; background: rgba(239,68,68,0.08); }
.forecast-hero-badge.tone-slate { border-color: rgba(148,163,184,0.35); color: #cbd5e1; }
.forecast-hero-meta {
  font: 600 11px 'JetBrains Mono';
  color: var(--text-faint);
}
.forecast-hero-summary {
  margin: 0 0 12px;
  font: 500 14px/1.45 'Inter';
  color: var(--text);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.forecast-legend {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  font: 600 10px 'Inter';
  color: var(--text-dim);
  overflow: hidden;
}
.forecast-legend > span {
  white-space: nowrap;
  flex-shrink: 0;
}
.view-forecast #forecast-kpis .kpi-detail {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.view-forecast .section-header .feed-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.view-forecast .forecast-hero-top {
  flex-wrap: nowrap;
}
.view-persistence .kpi-strip .kpi-detail,
.view-expanded .kpi-strip .kpi-detail,
.view-confidence .kpi-strip .kpi-detail,
.view-portfolio .kpi-strip .kpi-detail,
.view-ranking .kpi-strip .kpi-detail,
.view-shadow .kpi-strip .kpi-detail,
.view-contagion .kpi-strip .kpi-detail,
.view-supervisor .kpi-strip .kpi-detail,
.view-tradfi-decision .kpi-strip .kpi-detail,
.view-tradfi-credit .kpi-strip .kpi-detail,
.view-tradfi-breadth .kpi-strip .kpi-detail,
.view-tradfi-rotation .kpi-strip .kpi-detail,
.view-tradfi-drivers .kpi-strip .kpi-detail,
.view-tradfi-positioning .kpi-strip .kpi-detail,
.view-tradfi-flows .kpi-strip .kpi-detail,
.view-persistence .section-header .feed-sub,
.view-expanded .section-header .feed-sub,
.view-confidence .section-header .feed-sub,
.view-portfolio .section-header .feed-sub,
.view-ranking .section-header .feed-sub,
.view-shadow .section-header .feed-sub,
.view-contagion .section-header .feed-sub,
.view-supervisor .section-header .feed-sub,
.view-tradfi-decision .section-header .feed-sub,
.view-tradfi-credit .section-header .feed-sub,
.view-tradfi-breadth .section-header .feed-sub,
.view-tradfi-rotation .section-header .feed-sub,
.view-tradfi-drivers .section-header .feed-sub,
.view-tradfi-positioning .section-header .feed-sub,
.view-tradfi-flows .section-header .feed-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-width: 900px) {
  .forecast-hero-summary,
  .persistence-hero-summary,
  .expanded-hero-summary,
  .confidence-hero-summary,
  .explore-hero-summary,
  .portfolio-hero-summary,
  .ranking-hero-summary,
  .shadow-hero-summary,
  .tradfi-decision-hero-summary,
  .tradfi-credit-hero-summary,
  .tradfi-breadth-hero-summary,
  .tradfi-rotation-hero-summary,
  .tradfi-drivers-hero-summary,
  .tradfi-positioning-hero-summary,
  .tradfi-flows-hero-summary,
  .contagion-hero-summary,
  .supervisor-hero-summary,
  .view-forecast #forecast-kpis .kpi-detail,
  .view-persistence .kpi-strip .kpi-detail,
  .view-expanded .kpi-strip .kpi-detail,
  .view-confidence .kpi-strip .kpi-detail,
  .view-portfolio .kpi-strip .kpi-detail,
  .view-ranking .kpi-strip .kpi-detail,
  .view-shadow .kpi-strip .kpi-detail,
  .view-contagion .kpi-strip .kpi-detail,
  .view-supervisor .kpi-strip .kpi-detail,
  .view-tradfi-decision .kpi-strip .kpi-detail,
  .view-tradfi-credit .kpi-strip .kpi-detail,
  .view-tradfi-breadth .kpi-strip .kpi-detail,
  .view-tradfi-rotation .kpi-strip .kpi-detail,
  .view-tradfi-drivers .kpi-strip .kpi-detail,
  .view-tradfi-positioning .kpi-strip .kpi-detail,
  .view-tradfi-flows .kpi-strip .kpi-detail,
  .view-forecast .section-header .feed-sub,
  .view-persistence .section-header .feed-sub,
  .view-expanded .section-header .feed-sub,
  .view-confidence .section-header .feed-sub,
  .view-portfolio .section-header .feed-sub,
  .view-ranking .section-header .feed-sub,
  .view-shadow .section-header .feed-sub,
  .view-contagion .section-header .feed-sub,
  .view-supervisor .section-header .feed-sub,
  .view-tradfi-decision .section-header .feed-sub,
  .view-tradfi-credit .section-header .feed-sub,
  .view-tradfi-breadth .section-header .feed-sub,
  .view-tradfi-rotation .section-header .feed-sub,
  .view-tradfi-drivers .section-header .feed-sub,
  .view-tradfi-positioning .section-header .feed-sub,
  .view-tradfi-flows .section-header .feed-sub {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  .forecast-legend { flex-wrap: wrap; }
  .view-forecast .forecast-hero-top { flex-wrap: wrap; }
}
.fc-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.fc-dot.fc-green { background: #10b981; }
.fc-dot.fc-slate { background: #64748b; }
.fc-dot.fc-red { background: #ef4444; }
.forecast-matrix-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.forecast-horizon-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.forecast-horizon-btn {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 6px 11px;
  font: 800 9.5px 'Inter';
  letter-spacing: 0.14em;
  cursor: pointer;
}
.forecast-horizon-btn.active,
.forecast-horizon-btn:hover {
  color: #d1fae5;
  border-color: rgba(52,211,153,0.45);
  background: rgba(52,211,153,0.10);
}
.view-forecast .forecast-matrix-section {
  margin-bottom: 28px;
  padding-bottom: 12px;
}
.view-forecast .forecast-matrix-section .section-header {
  margin-bottom: 16px;
}
.forecast-matrix-grid,
.forecast-atlas-grid {
  display: grid;
  grid-template-columns: 80px repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.forecast-matrix-grid {
  padding-bottom: 10px;
}
.forecast-cell,
.atlas-cell {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
}
.forecast-cell:hover,
.atlas-cell:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
}
.forecast-cell.tone-green,
.atlas-cell.tone-green { border-color: rgba(16,185,129,0.42); }
.forecast-cell.tone-red,
.atlas-cell.tone-red { border-color: rgba(239,68,68,0.42); }
.forecast-cell.tone-slate,
.atlas-cell.tone-slate { border-color: rgba(100,116,139,0.35); }
.fc-regime,
.ac-regime {
  font: 800 9.5px 'Inter';
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.fc-switch,
.ac-sim {
  font: 800 22px/1 'JetBrains Mono';
  color: #d1fae5;
}
.forecast-cell.tone-green .fc-switch,
.atlas-cell.tone-green .ac-sim { color: #6ee7b7; }
.forecast-cell.tone-red .fc-switch,
.atlas-cell.tone-red .ac-sim { color: #fca5a5; }
.fc-prob-stack {
  display: flex;
  height: 6px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  margin-top: 2px;
}
.fc-seg { height: 100%; min-width: 2px; }
.fc-seg.bear { background: #ef4444; }
.fc-seg.chop { background: #64748b; }
.fc-seg.bull { background: #10b981; }
.fc-meta,
.ac-meta {
  margin-top: auto;
  font: 600 9.5px/1.35 'JetBrains Mono';
  color: var(--text-faint);
}
.ac-return {
  font: 800 14px/1.1 'JetBrains Mono';
}
.ac-return.pos { color: #6ee7b7; }
.ac-return.neg { color: #fca5a5; }
.ac-return.flat { color: var(--text-dim); }
.atlas-cell.empty {
  opacity: 0.45;
  cursor: default;
}
.atlas-cell.empty:hover { transform: none; border-color: var(--border); }
.view-forecast .forecast-side-grid {
  margin-top: 12px;
  margin-bottom: 32px;
  gap: 20px;
}
.view-forecast .forecast-side-grid .main-panel {
  padding: 22px 24px;
}
.view-forecast .forecast-atlas-section {
  margin-top: 8px;
  margin-bottom: 12px;
  padding-bottom: 14px;
}
.view-forecast .forecast-atlas-section .section-header {
  margin-bottom: 16px;
}
.forecast-rank-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.forecast-rank-row {
  display: grid;
  grid-template-columns: 92px 1fr 52px;
  gap: 10px;
  align-items: center;
}
.frk-label {
  font: 800 10px 'Inter';
  letter-spacing: 0.08em;
  color: var(--text);
}
.frk-track {
  height: 8px;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.frk-fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(239,68,68,0.55), #ef4444);
  transition: width 180ms ease;
}
.frk-fill.stable {
  background: linear-gradient(90deg, rgba(16,185,129,0.45), #10b981);
}
.frk-val {
  font: 800 11px 'JetBrains Mono';
  text-align: right;
  color: #d1fae5;
}
.view-forecast .forecast-atlas-detail {
  margin-top: 36px;
  padding-top: 4px;
}
.forecast-atlas-detail-head h2 {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--text);
}
.forecast-atlas-detail-head {
  margin-bottom: 16px;
}
.forecast-atlas-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.forecast-atlas-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-2);
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 132px;
}
.forecast-atlas-card.tone-green { border-color: rgba(16,185,129,0.38); }
.forecast-atlas-card.tone-red { border-color: rgba(239,68,68,0.38); }
.fac-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.fac-asset {
  font: 800 12px 'Inter';
  letter-spacing: 0.1em;
  color: var(--text);
}
.fac-tf {
  font: 700 10px 'JetBrains Mono';
  color: var(--text-faint);
}
.fac-return {
  font: 800 20px/1 'JetBrains Mono';
}
.fac-return.pos { color: #6ee7b7; }
.fac-return.neg { color: #fca5a5; }
.fac-sim {
  font: 600 10px 'JetBrains Mono';
  color: var(--text-dim);
}
.fac-matches {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fac-match {
  font: 600 9.5px/1.35 'JetBrains Mono';
  color: var(--text-faint);
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.04);
}
@media (max-width: 1100px) {
  .forecast-atlas-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .forecast-matrix-grid,
  .forecast-atlas-grid { grid-template-columns: 70px repeat(3, minmax(0, 1fr)); }
  .forecast-atlas-cards { grid-template-columns: 1fr; }
  .forecast-rank-row { grid-template-columns: 80px 1fr 48px; }
}

/* Regime persistence view (forecast-inspired layout) */
.persistence-hero-panel {
  margin-bottom: 16px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(96,165,250,0.05), rgba(15,23,42,0.4));
}
.persistence-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.persistence-hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font: 800 10px 'Inter';
  letter-spacing: 0.18em;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
}
.persistence-hero-badge.tone-green { border-color: rgba(16,185,129,0.45); color: #6ee7b7; background: rgba(16,185,129,0.08); }
.persistence-hero-badge.tone-red { border-color: rgba(239,68,68,0.45); color: #fca5a5; background: rgba(239,68,68,0.08); }
.persistence-hero-badge.tone-slate { border-color: rgba(148,163,184,0.35); color: #cbd5e1; }
.persistence-hero-meta {
  font: 600 11px 'JetBrains Mono';
  color: var(--text-faint);
}
.persistence-hero-summary {
  margin: 0 0 12px;
  font: 500 14px/1.45 'Inter';
  color: var(--text);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.persistence-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font: 600 10px 'Inter';
  color: var(--text-dim);
}
.pc-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.pc-dot.pc-green { background: #10b981; }
.pc-dot.pc-slate { background: #64748b; }
.pc-dot.pc-red { background: #ef4444; }
.persistence-matrix-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.persistence-horizon-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.persistence-horizon-btn {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 6px 11px;
  font: 800 9.5px 'Inter';
  letter-spacing: 0.14em;
  cursor: pointer;
}
.persistence-horizon-btn.active,
.persistence-horizon-btn:hover {
  color: #dbeafe;
  border-color: rgba(96,165,250,0.45);
  background: rgba(96,165,250,0.10);
}
.view-persistence .persistence-matrix-section {
  margin-bottom: 28px;
  padding-bottom: 12px;
}
.view-persistence .persistence-matrix-section .section-header {
  margin-bottom: 16px;
}
.persistence-matrix-grid {
  display: grid;
  grid-template-columns: 80px repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding-bottom: 10px;
}
.view-persistence .persistence-side-grid {
  margin-top: 12px;
  margin-bottom: 8px;
  gap: 20px;
}
.view-persistence .persistence-side-grid .main-panel {
  padding: 22px 24px;
}
.persistence-matrix-grid .persistence-cell {
  min-height: 112px;
  padding: 10px 11px;
}
.pc-survive-stack {
  display: flex;
  height: 6px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  margin-top: 2px;
}
.pc-seg { height: 100%; min-width: 2px; }
.pc-seg.survive { background: #10b981; }
.pc-seg.flip { background: #ef4444; }
@media (max-width: 900px) {
  .persistence-matrix-grid { grid-template-columns: 70px repeat(3, minmax(0, 1fr)); }
}

.brief-card {
  min-height: 210px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-2);
  padding: 16px;
}
.brief-card.tone-green { border-color: rgba(16,185,129,0.45); }
.brief-card.tone-red { border-color: rgba(239,68,68,0.45); }
.brief-label {
  font: 800 10px 'Inter';
  letter-spacing: 0.20em;
  color: var(--text-faint);
}
.brief-title {
  margin-top: 10px;
  font: 800 24px/1.15 'Inter';
  letter-spacing: 0.02em;
  color: var(--text);
}
.brief-card.tone-green .brief-title { color: #6ee7b7; }
.brief-card.tone-red .brief-title { color: #fca5a5; }
.brief-text {
  margin: 16px 0 0;
  white-space: pre-wrap;
  color: var(--text-dim);
  font: 600 12px/1.55 'JetBrains Mono';
  background: transparent;
}
.runtime-phase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.runtime-phase-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 11px;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.runtime-phase-label {
  font: 800 9px 'Inter';
  letter-spacing: 0.16em;
  color: var(--text-faint);
}
.runtime-phase-value {
  color: #d1fae5;
  font-size: 18px;
  font-weight: 800;
}
.calibration-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.calib-bin {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.calib-bin .bin-label {
  font: 800 9px 'Inter';
  letter-spacing: 0.16em;
  color: var(--text-faint);
}
.calib-bin .bin-value {
  font: 800 18px 'JetBrains Mono';
  color: #d1fae5;
}
.calib-bin .bin-sub {
  font: 600 10px 'Inter';
  color: var(--text-dim);
}
.dual-bar {
  display: flex;
  height: 26px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  margin-top: 8px;
}
.dual-bar > div {
  position: relative;
  font: 700 11px/26px 'JetBrains Mono';
  text-align: center;
  color: rgba(255,255,255,0.85);
}
.dual-bar .bar-bull { background: var(--bull); }
.dual-bar .bar-chop { background: var(--chop); }
.dual-bar .bar-bear { background: var(--bear); }
.dual-bar .bar-green { background: var(--bull); }
.dual-bar .bar-slate { background: var(--chop); }
.dual-bar .bar-red { background: var(--bear); }
.dual-bar .bar-muted { background: #2a2e38; }
.legend-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 10px;
  font: 600 10.5px 'Inter';
  letter-spacing: 0.12em;
  color: var(--text-dim);
}
.legend-row .legend-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.legend-row .legend-chip .dot {
  width: 7px; height: 7px; border-radius: 50%;
}

/* ====== Expanded dashboard views ====== */
.expanded-hero-panel {
  margin-bottom: 16px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(245,158,11,0.05), rgba(15,23,42,0.4));
}
.expanded-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.expanded-hero-badge {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  font: 800 10px 'Inter';
  letter-spacing: 0.18em;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
}
.expanded-hero-badge.tone-green { border-color: rgba(16,185,129,0.45); color: #6ee7b7; background: rgba(16,185,129,0.08); }
.expanded-hero-badge.tone-red { border-color: rgba(239,68,68,0.45); color: #fca5a5; background: rgba(239,68,68,0.08); }
.expanded-hero-badge.tone-slate { border-color: rgba(148,163,184,0.35); color: #cbd5e1; }
.expanded-hero-meta { font: 600 11px 'JetBrains Mono'; color: var(--text-faint); }
.expanded-hero-summary {
  margin: 0 0 12px;
  font: 500 14px/1.45 'Inter';
  color: var(--text);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.expanded-hero-legend { margin-bottom: 12px; }
.expanded-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.expanded-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.expanded-chip.tone-green { border-color: rgba(16,185,129,0.35); background: rgba(16,185,129,0.06); }
.expanded-chip.tone-red { border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.06); }
.expanded-chip.tone-slate { border-color: rgba(100,116,139,0.3); }
.expanded-chip-k {
  font: 800 9px 'Inter';
  letter-spacing: 0.14em;
  color: var(--text-dim);
}
.expanded-chip-v {
  font: 800 12px 'JetBrains Mono';
  color: #e2e8f0;
}
.expanded-chip.tone-green .expanded-chip-v { color: #6ee7b7; }
.expanded-chip.tone-red .expanded-chip-v { color: #fca5a5; }
.view-expanded .expanded-matrix-section { margin-bottom: 28px; padding-bottom: 12px; }
.view-expanded .expanded-matrix-section .section-header { margin-bottom: 16px; }
.expanded-matrix-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.expanded-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font: 600 10px 'Inter';
  color: var(--text-dim);
}
.ec-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.ec-dot.ec-green { background: #10b981; }
.ec-dot.ec-slate { background: #64748b; }
.ec-dot.ec-red { background: #ef4444; }
.view-expanded .expanded-side-grid { gap: 20px; margin-bottom: 8px; }
.view-expanded .expanded-side-grid .main-panel { padding: 22px 24px; }
.expanded-action-grid { display: flex; flex-direction: column; gap: 8px; }
.expanded-action-row {
  display: grid;
  grid-template-columns: 120px 1fr 40px;
  gap: 10px;
  align-items: center;
}
.expanded-action-label {
  font: 800 9.5px 'Inter';
  letter-spacing: 0.1em;
  color: var(--text-dim);
}
.expanded-action-val {
  font: 800 11px 'JetBrains Mono';
  text-align: right;
  color: #d1fae5;
}
.expanded-matrix-grid,
.score-grid {
  display: grid;
  grid-template-columns: 80px repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.expanded-cell,
.score-cell,
.source-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 11px;
  min-height: 108px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.expanded-cell {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: transform 120ms ease, border-color 120ms ease;
}
.expanded-cell.tone-green {
  border-color: rgba(16,185,129,0.42);
  background: linear-gradient(160deg, rgba(16,185,129,0.07), var(--panel) 55%);
}
.expanded-cell.tone-red {
  border-color: rgba(239,68,68,0.42);
  background: linear-gradient(160deg, rgba(239,68,68,0.07), var(--panel) 55%);
}
.expanded-cell.tone-slate {
  border-color: rgba(100,116,139,0.35);
  background: linear-gradient(160deg, rgba(100,116,139,0.05), var(--panel) 55%);
}
.expanded-cell:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.expanded-score {
  font: 800 22px/1 'JetBrains Mono';
  letter-spacing: 0;
  color: #d1fae5;
}
.expanded-cell.tone-green .expanded-score { color: #6ee7b7; }
.expanded-cell.tone-red .expanded-score { color: #fca5a5; }
.expanded-dual-track {
  position: relative;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
}
.expanded-dual-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  min-width: 2px;
  opacity: 0.92;
}
.expanded-dual-fill.stress { background: #ef4444; z-index: 2; }
.expanded-dual-fill.crowd { background: #f59e0b; z-index: 1; border-left: 1px solid rgba(0,0,0,0.25); }
.expanded-elevated-row .frk-val { min-width: 42px; }
.frk-fill.action-green { background: #10b981; }
.frk-fill.action-red { background: #ef4444; }
.frk-fill.action-slate { background: #64748b; }
.frk-fill.action-amber { background: #f59e0b; }
.expanded-action-val small {
  font: 600 9px 'Inter';
  color: var(--text-faint);
}

/* ====== Model confidence view ====== */
.confidence-hero-panel {
  margin-bottom: 16px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(15,23,42,0.4));
}
.confidence-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.confidence-hero-badge {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  font: 800 10px 'Inter';
  letter-spacing: 0.18em;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
}
.confidence-hero-badge.tone-green { border-color: rgba(16,185,129,0.45); color: #6ee7b7; background: rgba(16,185,129,0.08); }
.confidence-hero-badge.tone-red { border-color: rgba(239,68,68,0.45); color: #fca5a5; background: rgba(239,68,68,0.08); }
.confidence-hero-badge.tone-slate { border-color: rgba(148,163,184,0.35); color: #cbd5e1; }
.confidence-hero-meta { font: 600 11px 'JetBrains Mono'; color: var(--text-faint); }
.confidence-hero-summary {
  margin: 0 0 12px;
  font: 500 14px/1.45 'Inter';
  color: var(--text);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.confidence-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 12px;
  font: 600 10px 'Inter';
  color: var(--text-dim);
}
.cf-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.cf-dot.cf-green { background: #10b981; }
.cf-dot.cf-slate { background: #64748b; }
.cf-dot.cf-red { background: #ef4444; }
.confidence-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.confidence-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.confidence-chip.tone-green { border-color: rgba(16,185,129,0.35); background: rgba(16,185,129,0.06); }
.confidence-chip.tone-red { border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.06); }
.confidence-chip.tone-slate { border-color: rgba(100,116,139,0.3); }
.confidence-chip-k {
  font: 800 9px 'Inter';
  letter-spacing: 0.14em;
  color: var(--text-dim);
}
.confidence-chip-v {
  font: 800 12px 'JetBrains Mono';
  color: #e2e8f0;
}
.confidence-chip.tone-green .confidence-chip-v { color: #6ee7b7; }
.confidence-chip.tone-red .confidence-chip-v { color: #fca5a5; }
.view-confidence .confidence-matrix-section { margin-bottom: 28px; padding-bottom: 12px; }
.view-confidence .confidence-matrix-section .section-header { margin-bottom: 16px; }
.confidence-matrix-grid {
  display: grid;
  grid-template-columns: 80px repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.conf-cell {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
  box-shadow: var(--shadow);
}
.conf-cell.tone-green {
  border-color: rgba(16,185,129,0.42);
  background: linear-gradient(160deg, rgba(16,185,129,0.07), var(--panel) 55%);
}
.conf-cell.tone-red {
  border-color: rgba(239,68,68,0.42);
  background: linear-gradient(160deg, rgba(239,68,68,0.07), var(--panel) 55%);
}
.conf-cell.tone-slate {
  border-color: rgba(100,116,139,0.35);
  background: linear-gradient(160deg, rgba(100,116,139,0.05), var(--panel) 55%);
}
.conf-cell:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.conf-cell-score {
  font: 800 22px/1 'JetBrains Mono';
  color: #d1fae5;
}
.conf-cell.tone-green .conf-cell-score { color: #6ee7b7; }
.conf-cell.tone-red .conf-cell-score { color: #fca5a5; }
.conf-cell-label {
  font: 700 9px 'Inter';
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conf-cell-label.tone-green { color: #6ee7b7; }
.conf-cell-label.tone-red { color: #fca5a5; }
.conf-cell-meta {
  margin-top: auto;
  font: 600 9.5px/1.35 'JetBrains Mono';
  color: var(--text-faint);
}
.conf-comp-stack {
  display: flex;
  height: 6px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
}
.conf-comp-stack.mini { height: 5px; margin-top: 1px; }
.conf-comp-seg { height: 100%; min-width: 2px; }
.conf-comp-seg.hmm { background: #6366f1; }
.conf-comp-seg.ens { background: #8b5cf6; }
.conf-comp-seg.ms { background: #06b6d4; }
.conf-comp-seg.qual { background: #10b981; }
.conf-comp-seg.pers { background: #f59e0b; }
.view-confidence .confidence-side-grid,
.view-confidence .confidence-bottom-grid {
  gap: 20px;
  margin-bottom: 8px;
}
.view-confidence .confidence-side-grid .main-panel,
.view-confidence .confidence-bottom-grid .main-panel {
  padding: 22px 24px;
}
.confidence-rank-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
}
.confidence-rank-card {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.confidence-rank-card.tone-green { border-color: rgba(16,185,129,0.32); background: linear-gradient(160deg, rgba(16,185,129,0.05), rgba(255,255,255,0.02)); }
.confidence-rank-card.tone-red { border-color: rgba(239,68,68,0.32); background: linear-gradient(160deg, rgba(239,68,68,0.05), rgba(255,255,255,0.02)); }
.confidence-rank-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.confidence-rank-asset {
  font: 800 11px 'Inter';
  letter-spacing: 0.08em;
  color: var(--text);
}
.confidence-rank-asset small {
  font: 700 9px 'JetBrains Mono';
  color: var(--text-dim);
}
.confidence-rank-score {
  font: 800 18px/1 'JetBrains Mono';
  color: #d1fae5;
}
.confidence-rank-card.tone-green .confidence-rank-score { color: #6ee7b7; }
.confidence-rank-card.tone-red .confidence-rank-score { color: #fca5a5; }
.confidence-rank-track {
  height: 6px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
}
.confidence-rank-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(99,102,241,0.45), #6366f1);
}
.confidence-rank-fill.tone-green { background: linear-gradient(90deg, rgba(16,185,129,0.45), #10b981); }
.confidence-rank-fill.tone-red { background: linear-gradient(90deg, rgba(239,68,68,0.45), #ef4444); }
.confidence-rank-foot {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.confidence-bn {
  font: 800 9px 'Inter';
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.confidence-bn.tone-green { color: #6ee7b7; }
.confidence-bn.tone-red { color: #fca5a5; }
.confidence-bn.tone-slate { color: var(--text-dim); }
.confidence-rank-parts {
  font: 600 9.5px 'JetBrains Mono';
  color: var(--text-faint);
}
.confidence-weight-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.confidence-weight-row {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
}
.confidence-weight-row.tone-red { border-color: rgba(239,68,68,0.28); }
.confidence-weight-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.confidence-weight-key {
  font: 800 10px 'Inter';
  letter-spacing: 0.14em;
  color: var(--text);
  min-width: 72px;
}
.confidence-weight-pct {
  font: 800 12px 'JetBrains Mono';
  color: #c7d2fe;
}
.confidence-weight-row.tone-red .confidence-weight-pct { color: #fca5a5; }
.confidence-weight-tag {
  margin-left: auto;
  font: 800 8.5px 'Inter';
  letter-spacing: 0.12em;
  color: var(--text-faint);
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.confidence-weight-track {
  height: 6px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  margin-bottom: 6px;
}
.confidence-weight-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(99,102,241,0.45), #6366f1);
}
.confidence-weight-row.tone-red .confidence-weight-fill {
  background: linear-gradient(90deg, rgba(239,68,68,0.45), #ef4444);
}
.confidence-weight-desc {
  font: 500 11px/1.45 'Inter';
  color: var(--text-dim);
}
.expanded-label,
.score-label {
  font: 700 9px 'Inter';
  letter-spacing: 0.14em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.expanded-meta,
.score-meta {
  font: 600 10px 'JetBrains Mono';
  color: var(--text-faint);
}
.score-strip {
  display: flex;
  height: 5px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
}
.score-fill {
  height: 100%;
  min-width: 2px;
}
.score-pos { color: #6ee7b7; }
.score-neg { color: #fca5a5; }
.score-neutral { color: #fde6b8; }
.score-fill.pos { background: var(--bull); }
.score-fill.neg { background: var(--bear); }
.score-fill.neutral { background: var(--chop); }
.source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.source-card {
  min-height: 84px;
}
.source-title {
  font: 800 11px 'Inter';
  letter-spacing: 0.16em;
  color: var(--text);
  text-transform: uppercase;
}
.source-value {
  margin-top: 8px;
  font: 700 18px 'JetBrains Mono';
}
.source-sub {
  margin-top: 4px;
  font: 600 10px 'Inter';
  color: var(--text-dim);
}
.feed-list.compact-feed {
  max-height: 360px;
  overflow-y: auto;
}
.feed-row {
  display: grid;
  grid-template-columns: 72px 54px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.feed-row:last-child { border-bottom: 0; }
.feed-row .fr-asset { font: 800 12px 'Inter'; letter-spacing: 0.08em; }
.feed-row .fr-tf { font: 700 11px 'JetBrains Mono'; color: var(--text-dim); }
.feed-row .fr-main {
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.35;
}
.feed-row .fr-val { font: 700 12px 'JetBrains Mono'; }
#view-learning .main-grid {
  grid-template-columns: 1fr;
}
#view-learning .feed-row,
.confidence-row,
.ablation-row,
.scenario-row,
.delivery-row {
  grid-template-columns: 90px 96px minmax(0, 1fr) 72px;
  column-gap: 14px;
}
#view-learning .feed-row .fr-main,
.confidence-row .fr-main,
.ablation-row .fr-main,
.scenario-row .fr-main,
.delivery-row .fr-main {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
}
.delivery-row .fr-asset,
.scenario-row .fr-asset {
  font-size: 10.5px;
  overflow-wrap: anywhere;
}
#decision-bt-action-list .feed-row,
#decision-bt-cell-list .feed-row,
#decision-bt-tf-list .feed-row,
#decision-bt-asset-list .feed-row {
  grid-template-columns: 126px 46px 1fr auto;
}
.quality-section-spacer {
  height: 22px;
}

/* Hyperliquid order book + estimated liquidation heat */
.orderbook-main-grid,
.liquidation-main-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.75fr);
}
.orderbook-chart,
.liquidation-chart {
  min-height: 300px;
  display: block;
}
.liquidation-chart { min-height: 390px; }

/* Deribit GEX+ heatmap (Kingfisher-inspired) */
.gex-hero-panel {
  margin-bottom: 14px;
  padding: 16px 18px 14px;
  background: linear-gradient(180deg, rgba(12, 14, 22, 0.98), rgba(8, 10, 16, 0.98));
  border: 1px solid rgba(99, 102, 241, 0.14);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}
.gex-hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.gex-hero-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gex-hero-title-wrap h2 {
  margin: 0;
  font: 800 18px/1.1 'Inter', sans-serif;
  letter-spacing: 0.08em;
  color: #f3f4f8;
}
.gex-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(251, 146, 60, 0.14);
  border: 1px solid rgba(251, 146, 60, 0.35);
  color: #fdba74;
  font: 800 9px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
}
.gex-live-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fb923c;
  box-shadow: 0 0 10px rgba(251, 146, 60, 0.8);
  animation: gex-live-pulse 1.8s ease-in-out infinite;
}
@keyframes gex-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}
.gex-hero-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.gex-axis-controls {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}
.gex-axis-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(120px, 1.2fr) auto;
  gap: 10px;
  align-items: center;
}
.gex-axis-label {
  font: 800 9px/1 'Inter', sans-serif;
  letter-spacing: 0.16em;
  color: var(--text-faint);
}
.gex-axis-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.gex-axis-num {
  width: 100%;
  min-width: 0;
  flex: 1;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font: 600 11px/1 'JetBrains Mono', monospace;
}
.gex-axis-num:focus {
  outline: none;
  border-color: rgba(52, 211, 153, 0.45);
}
.gex-axis-sep { color: var(--text-faint); font-size: 11px; }
.gex-axis-range {
  width: 100%;
  accent-color: var(--accent);
}
.gex-axis-hint {
  font: 600 10px/1 'JetBrains Mono', monospace;
  color: var(--text-faint);
  white-space: nowrap;
}
.gex-axis-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gex-preset { font-size: 10px; padding: 5px 10px; }
.gex-heatmap-wrap {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: #070a12;
  width: 100%;
}
.gex-heatmap-svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 280px;
  max-height: min(58vh, 520px);
  aspect-ratio: 15 / 8;
  cursor: crosshair;
}
.gex-cell-hit { cursor: crosshair; pointer-events: all; }
.gex-decor { pointer-events: none; }
.options-coin-toggle {
  display: inline-flex;
  gap: 6px;
}

/* Options Greeks — regime hint + strike list */
.options-regime-card {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: linear-gradient(165deg, rgba(16, 20, 30, 0.96), rgba(8, 10, 16, 0.98));
  padding: 14px 14px 12px;
  display: grid;
  gap: 12px;
}
.options-regime-card.tone-green {
  border-color: rgba(16, 185, 129, 0.42);
  box-shadow: inset 0 1px 0 rgba(16, 185, 129, 0.08);
}
.options-regime-card.tone-red {
  border-color: rgba(239, 68, 68, 0.42);
  box-shadow: inset 0 1px 0 rgba(239, 68, 68, 0.08);
}
.options-regime-card.tone-slate { border-color: var(--border); }
.options-regime-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.options-regime-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  font: 800 9px/1 'Inter', sans-serif;
  letter-spacing: 0.16em;
  white-space: nowrap;
}
.tone-green .options-regime-badge {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.28);
}
.tone-red .options-regime-badge {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.28);
}
.tone-slate .options-regime-badge {
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}
.options-regime-spot {
  font: 700 11px/1 'JetBrains Mono', monospace;
  color: var(--text-faint);
  white-space: nowrap;
  padding-top: 2px;
}
.options-regime-summary {
  margin: 0;
  font: 600 13px/1.45 'Inter', sans-serif;
  color: #eef1f6;
  letter-spacing: 0.01em;
}
.options-regime-meter {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.options-regime-meter-zero {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(216, 223, 235, 0.35);
  z-index: 2;
}
.options-regime-meter-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-radius: 999px;
  opacity: 0.95;
}
.tone-green .options-regime-meter-fill { background: linear-gradient(90deg, #059669, #34d399); }
.tone-red .options-regime-meter-fill { background: linear-gradient(90deg, #ef4444, #f87171); }
.tone-slate .options-regime-meter-fill { background: var(--accent); }
.options-regime-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.options-regime-metric {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: grid;
  gap: 4px;
  min-width: 0;
}
.orm-label {
  font: 700 9px/1 'Inter', sans-serif;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.orm-value {
  font: 700 13px/1.2 'JetBrains Mono', monospace;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.orm-value.pos { color: #6ee7b7; }
.orm-value.neg { color: #fca5a5; }
.options-regime-note {
  margin: 0;
  font: 500 10px/1.4 'Inter', sans-serif;
  color: var(--text-faint);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 10px;
}
.gex-strike-header { margin-top: 14px; }
.gex-strike-list {
  display: grid;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 2px;
}
.gex-strike-item {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  display: grid;
  gap: 6px;
}
.gex-strike-item.pos { border-color: rgba(16, 185, 129, 0.18); }
.gex-strike-item.neg { border-color: rgba(239, 68, 68, 0.18); }
.gex-strike-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.gex-strike-price {
  font: 800 13px/1 'Inter', sans-serif;
  letter-spacing: 0.04em;
  color: var(--text);
}
.gex-strike-gamma {
  font: 700 12px/1 'JetBrains Mono', monospace;
  white-space: nowrap;
}
.gex-strike-gamma.pos { color: #6ee7b7; }
.gex-strike-gamma.neg { color: #fca5a5; }
.gex-strike-meta {
  font: 500 10px/1.35 'JetBrains Mono', monospace;
  color: var(--text-faint);
  word-break: break-word;
}
@media (max-width: 1280px) {
  .options-regime-metrics { grid-template-columns: 1fr; }
  .options-regime-top { flex-direction: column; align-items: stretch; }
  .options-regime-spot { text-align: left; }
}
@media (max-width: 1280px) {
  .gex-hero-head { flex-direction: column; align-items: stretch; }
  .gex-hero-controls { align-items: flex-start; }
  .gex-axis-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .gex-axis-label { margin-bottom: -2px; }
  .gex-heatmap-svg {
    min-height: 240px;
    max-height: 50vh;
  }
}
@media (max-width: 900px) {
  .gex-hero-panel { padding: 12px; }
  .gex-axis-controls { padding: 10px; }
  .gex-heatmap-svg { min-height: 220px; max-height: 44vh; }
}
.orderbook-ladder {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  font-family: 'JetBrains Mono', monospace;
}
.book-head,
.book-row,
.book-mid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
}
.book-head {
  padding: 8px 10px;
  background: rgba(255,255,255,0.025);
  color: var(--text-faint);
  font: 700 9px 'Inter';
  letter-spacing: 0.16em;
}
.book-head span:nth-child(2),
.book-row span:nth-child(3) { text-align: right; }
.book-head span:nth-child(3),
.book-row span:nth-child(4) { text-align: right; }
.book-row {
  position: relative;
  padding: 5px 10px;
  min-height: 24px;
  font-size: 11px;
  color: var(--text-dim);
  border-top: 1px solid rgba(35,40,56,0.55);
  overflow: hidden;
  cursor: crosshair;
  transition: background 120ms ease, color 120ms ease;
}
.book-row:hover {
  background: rgba(52,211,153,0.075);
  color: var(--text);
}
.book-row > span:not(.book-bar) {
  position: relative;
  z-index: 1;
}
.book-row .book-bar {
  position: absolute;
  top: 3px;
  bottom: 3px;
  right: 0;
  opacity: 0.20;
}
.book-row.ask .book-bar { background: #ef4444; }
.book-row.bid .book-bar { background: #10b981; }
.book-row.ask .book-price { color: #fca5a5; }
.book-row.bid .book-price { color: #6ee7b7; }
.book-mid {
  padding: 9px 10px;
  background: linear-gradient(90deg, rgba(52,211,153,0.12), rgba(52,211,153,0.02));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 10px;
}
.book-mid strong {
  color: var(--text);
  text-align: center;
  font-size: 13px;
}
.book-mid span:last-child { text-align: right; }
.hyper-context-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  min-height: 156px;
}
.hyper-context-card.compact { min-height: 132px; }
.hyper-context-card.tone-green { border-color: rgba(16,185,129,0.52); }
.hyper-context-card.tone-red { border-color: rgba(239,68,68,0.55); }
.hyper-context-card.tone-slate { border-color: var(--border); }
.hyper-context-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
  margin-bottom: 12px;
}
.hyper-context-title {
  font: 800 15px 'Inter';
  letter-spacing: 0.12em;
  color: var(--text);
}
.hyper-context-score {
  font: 700 22px 'JetBrains Mono';
  color: var(--text);
  white-space: nowrap;
}
.hyper-context-meter {
  position: relative;
  height: 8px;
  background: rgba(255,255,255,0.055);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}
.hyper-context-zero {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(216,223,235,0.35);
  z-index: 2;
}
.hyper-context-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  background: var(--accent);
  opacity: 0.92;
}
.hyper-context-card.tone-green .hyper-context-fill { background: var(--bull); }
.hyper-context-card.tone-red .hyper-context-fill { background: var(--bear); }
.hyper-context-lines {
  display: grid;
  gap: 7px;
  font: 500 11px 'JetBrains Mono';
  color: var(--text-dim);
}
.hyper-context-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid rgba(35,40,56,0.55);
  padding-top: 7px;
}
.hyper-context-line span:last-child {
  color: var(--text);
  text-align: right;
}
.hyper-context-note {
  margin-top: 10px;
  color: var(--text-faint);
  font: 600 10px 'Inter';
  letter-spacing: 0.08em;
}
.chart-tooltip {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  min-width: 210px;
  max-width: 340px;
  padding: 10px 11px;
  background: rgba(12,14,19,0.97);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: var(--shadow);
  color: var(--text);
  font: 500 11px 'JetBrains Mono';
  line-height: 1.45;
}
.chart-tooltip .tip-title {
  color: var(--text);
  font: 800 10px 'Inter';
  letter-spacing: 0.14em;
  margin-bottom: 5px;
}
.chart-tooltip .tip-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--text-dim);
}
.chart-tooltip .tip-row strong {
  color: var(--text);
  font-weight: 700;
  text-align: right;
}
.chart-tooltip .tip-pos strong { color: #6ee7b7; }
.chart-tooltip .tip-neg strong { color: #fca5a5; }
.chart-hit {
  cursor: crosshair;
  fill: transparent;
}
@media (max-width: 1100px) {
  .orderbook-main-grid,
  .liquidation-main-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .expanded-matrix-grid,
  .score-grid,
  .decision-matrix-grid,
  .quality-matrix-grid,
  .persistence-matrix-grid { grid-template-columns: 70px repeat(3, minmax(0, 1fr)); }
  .source-grid { grid-template-columns: 1fr; }
  .diagnostic-card-grid,
  .template-grid,
  .calibration-grid,
  .runtime-phase-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .main-grid { grid-template-columns: 1fr; }
}

/* Crypto Explore tab */
.crypto-explore-panel { width: 100%; }
.explore-hero-panel {
  margin-bottom: 16px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(52,211,153,0.05), rgba(15,23,42,0.4));
  box-shadow: var(--shadow-soft);
}
.explore-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.explore-hero-badge {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  font: 800 10px 'Inter';
  letter-spacing: 0.18em;
  border: 1px solid var(--border);
}
.explore-hero-badge.tone-green { border-color: rgba(16,185,129,0.45); color: #6ee7b7; background: rgba(16,185,129,0.08); }
.explore-hero-badge.tone-red { border-color: rgba(239,68,68,0.45); color: #fca5a5; background: rgba(239,68,68,0.08); }
.explore-hero-badge.tone-slate { border-color: rgba(148,163,184,0.35); color: #cbd5e1; }
.explore-hero-meta { font: 600 11px 'JetBrains Mono'; color: var(--text-faint); }
.explore-hero-summary {
  margin: 0 0 12px;
  font: 500 14px/1.45 'Inter';
  color: var(--text);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.explore-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font: 600 10px 'Inter';
  color: var(--text-dim);
}
.rb-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.rb-dot.rb-bull { background: #10b981; }
.rb-dot.rb-chop { background: #94a3b8; }
.rb-dot.rb-bear { background: #ef4444; }

/* Regime ribbons */
.ribbon-section {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-soft);
}
.explore-ribbon-section { padding: 22px 24px; }
.explore-ribbon-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ribbon-tf-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(8,12,18,0.45);
}
.ribbon-tf-btn {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font: 700 10px 'Inter';
  letter-spacing: 0.14em;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.ribbon-tf-btn:hover { color: var(--text); background: rgba(148,163,184,0.1); }
.ribbon-tf-btn.active {
  color: #a7f3d0;
  background: rgba(16,185,129,0.18);
  box-shadow: inset 0 0 0 1px rgba(16,185,129,0.28);
}
.ribbon-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.ribbon-card {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(8,12,18,0.42);
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ribbon-card:hover,
.ribbon-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  outline: none;
}
.ribbon-card.tone-bull { border-color: rgba(16,185,129,0.32); }
.ribbon-card.tone-bear { border-color: rgba(239,68,68,0.32); }
.ribbon-card.tone-chop { border-color: rgba(100,116,139,0.28); }
.ribbon-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ribbon-card-asset {
  font: 800 13px/1.25 'Inter', system-ui, sans-serif;
  letter-spacing: 0.02em;
  color: var(--text);
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ribbon-card-now {
  font: 800 9px 'Inter';
  letter-spacing: 0.16em;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  flex-shrink: 0;
}
.ribbon-card.tone-bull .ribbon-card-now { color: #6ee7b7; border-color: rgba(16,185,129,0.35); background: rgba(16,185,129,0.08); }
.ribbon-card.tone-bear .ribbon-card-now { color: #fca5a5; border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.08); }
.ribbon-card.tone-chop .ribbon-card-now { color: #cbd5e1; }
.ribbon-bar {
  height: 20px;
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  display: flex;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}
.ribbon-bar-lg {
  height: 28px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 4px 14px rgba(0,0,0,0.12);
}
.ribbon-bar .seg-bull { background: linear-gradient(180deg, #6ee7b7, var(--bull)); }
.ribbon-bar .seg-chop { background: linear-gradient(180deg, #cbd5e1, var(--chop)); }
.ribbon-bar .seg-bear { background: linear-gradient(180deg, #fca5a5, var(--bear)); }
.ribbon-bar .seg { height: 100%; transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1); min-width: 2px; }
.ribbon-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.ribbon-stat-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rstat {
  font: 700 10px 'JetBrains Mono';
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  letter-spacing: 0.04em;
}
.rstat-bull { color: #6ee7b7; border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.06); }
.rstat-chop { color: #cbd5e1; border-color: rgba(148,163,184,0.25); }
.rstat-bear { color: #fca5a5; border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.06); }
.ribbon-card-meta { font: 600 9.5px 'JetBrains Mono'; color: var(--text-faint); }

/* Legacy ribbon list (TradFi diagnostics) */
.ribbon-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ribbon-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 104px;
  gap: 14px;
  align-items: center;
  cursor: pointer;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  transition: background 160ms cubic-bezier(0.4, 0, 0.2, 1), transform 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ribbon-row:hover { background: rgba(255,255,255,0.03); transform: translateX(2px); }
.ribbon-asset {
  font: 800 13px 'Inter';
  letter-spacing: 0.08em;
}
.ribbon-summary {
  font: 600 10.5px 'JetBrains Mono';
  color: var(--text-dim);
  text-align: right;
  letter-spacing: 0.04em;
  line-height: 1.45;
  white-space: normal;
  min-width: 96px;
}
.ribbon-summary span { display: block; }
.ribbon-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ribbon-tf-select {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font: 700 10.5px 'Inter', sans-serif;
  letter-spacing: 0.1em;
  cursor: pointer;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.ribbon-tf-select:hover { border-color: var(--accent); }
.ribbon-tf-select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }

@media (max-width: 900px) {
  .ribbon-card-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .explore-ribbon-head { align-items: flex-start; }
  .ribbon-tf-tabs { width: 100%; justify-content: center; }
}

/* TradFi dashboard */
.tradfi-matrix {
  display: grid;
  grid-template-columns: 92px repeat(5, minmax(118px, 1fr));
  gap: 8px;
  overflow-x: auto;
  max-height: min(72vh, 1080px);
  overflow-y: auto;
  padding-bottom: 2px;
}
.tradfi-matrix .matrix-header-cell {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #11141b;
}
.tradfi-matrix > .matrix-asset-cell {
  position: sticky;
  left: 0;
  z-index: 4;
  background: #11141b;
}
.tradfi-matrix > .matrix-header-cell.matrix-asset-cell { z-index: 6; }
.matrix-toolbar {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) repeat(3, auto) auto;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
}
.matrix-search {
  min-width: 0;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font: 600 10.5px 'Inter', sans-serif;
  letter-spacing: 0;
  outline: none;
}
.matrix-search:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
.tradfi-matrix .cell {
  min-height: 72px;
  min-width: 118px;
}
.tradfi-matrix .tradfi-empty-cell {
  cursor: default;
}
.tradfi-matrix .tradfi-empty-cell:hover {
  transform: none;
}
.tradfi-group-row {
  grid-column: 1 / -1;
  position: sticky;
  left: 0;
  z-index: 3;
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid rgba(52,211,153,0.18);
  border-radius: 6px;
  background: #0e1418;
  color: #a7f3d0;
  font: 800 9.5px/1 'Inter', sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tradfi-group-row span {
  color: var(--text-faint);
  font: 600 9px/1 'JetBrains Mono', monospace;
  letter-spacing: 0;
}
.tradfi-na-cell {
  opacity: 0.42;
  border-style: dashed !important;
}
.freshness-badge {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  border-radius: 4px;
  padding: 2px 5px;
  border: 1px solid var(--border);
  color: var(--text-faint);
  font: 700 8px/1 'Inter', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.freshness-badge.live { color: #6ee7b7; border-color: rgba(52,211,153,0.35); }
.freshness-badge.delayed { color: #fde68a; border-color: rgba(245,158,11,0.35); }
.freshness-badge.stale,
.freshness-badge.missing { color: #fca5a5; border-color: rgba(239,68,68,0.35); }
.freshness-badge.proxy { color: #c4b5fd; border-color: rgba(139,92,246,0.35); }
.tradfi-cell,
.tradfi-head {
  min-height: 62px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-2);
  padding: 9px 10px;
}
.tradfi-head {
  min-height: 36px;
  display: flex;
  align-items: center;
  color: var(--text-faint);
  font: 800 10px 'Inter';
  letter-spacing: 0.18em;
}
.tradfi-asset-cell {
  justify-content: center;
  color: var(--text);
}
.tradfi-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.tradfi-cell.is-bull { border-color: rgba(16,185,129,0.40); }
.tradfi-cell.is-bear { border-color: rgba(239,68,68,0.40); }
.tradfi-cell.is-chop { border-color: rgba(148,163,184,0.28); }
.tradfi-cell.is-empty { opacity: 0.55; border-color: rgba(148,163,184,0.18); }
.tradfi-cell.is-error { opacity: 0.55; border-color: rgba(239,68,68,0.26); }
.tradfi-cell-title {
  font: 800 13px 'JetBrains Mono';
  letter-spacing: 0.04em;
}
.tradfi-cell.is-bull .tradfi-cell-title { color: #6ee7b7; }
.tradfi-cell.is-bear .tradfi-cell-title { color: #fca5a5; }
.tradfi-cell.is-chop .tradfi-cell-title { color: var(--chop); }
.tradfi-cell.is-empty .tradfi-cell-title { color: var(--text-dim); }
.tradfi-cell-sub {
  font: 600 10px 'JetBrains Mono';
  color: var(--text-dim);
}
.tradfi-cell-meter {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.tradfi-cell-meter span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #7dd3fc);
}
.tradfi-control-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.tradfi-control-copy {
  color: var(--text-dim);
  font: 600 11px/1.45 'Inter';
  letter-spacing: 0.04em;
}

@media (max-width: 900px) {
  .mode-switch { order: 3; width: 100%; }
  .mode-btn { flex: 1; }
  .tradfi-matrix { grid-template-columns: 80px repeat(5, 116px); }
}

/* Alert rules (Improvement #3) */
.alerts-section {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-soft);
}
/* When shown inside the footer-menu modal, drop the inner card chrome. */
.alerts-section-modal {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-bottom: 0;
}
.alerts-list {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 10px;
  min-height: 30px;
}
.alert-rule {
  display: flex; align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--bg-2);
  border: 1px solid var(--border);
}
.alert-rule.triggered {
  border-color: rgba(16,185,129,0.55);
  background: linear-gradient(180deg, rgba(16,185,129,0.10), rgba(16,185,129,0.02));
}
.alert-rule .rule-name {
  font: 700 12px 'Inter';
  letter-spacing: 0.08em;
  flex: 1 1 auto;
  min-width: 0;
}
.alert-rule .rule-cond {
  font: 500 10.5px 'JetBrains Mono';
  color: var(--text-dim);
  flex: 2 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alert-rule .rule-status {
  font: 700 10px 'Inter'; letter-spacing: 0.18em;
  padding: 3px 8px; border-radius: 4px;
}
.alert-rule .rule-status.on { background: rgba(16,185,129,0.18); color: #b6f1d6; }
.alert-rule .rule-status.off { background: rgba(255,255,255,0.04); color: var(--text-faint); }
.alert-rule .rule-del {
  background: transparent; border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-faint); font: 700 11px 'JetBrains Mono'; padding: 2px 8px;
  cursor: pointer;
}
.alert-rule .rule-del:hover { color: #fca5a5; border-color: rgba(239,68,68,0.45); }
.alerts-help {
  font: 500 11px 'Inter'; color: var(--text-faint);
  padding: 6px 4px 0;
}
.alerts-help code {
  font-family: 'JetBrains Mono', monospace;
  background: var(--bg-2);
  padding: 1px 5px; border-radius: 3px; color: #fde6b8;
  border: 1px solid var(--border);
}

/* Condition editor row inside rule modal */
.rule-cond-row {
  display: grid;
  grid-template-columns: 110px 110px 110px 1fr 28px;
  gap: 6px;
  margin-bottom: 6px;
}
.rule-cond-row select, .rule-cond-row input {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  color: var(--text);
  font: 500 11px 'JetBrains Mono';
}
.rule-cond-row .cond-del {
  background: transparent; border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-faint); cursor: pointer;
}

/* Position sizer (Improvement #4) */
.sizer-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.sizer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.sizer-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-content: start;
}
.sizer-controls label {
  display: flex; flex-direction: column; gap: 4px;
  font: 700 9.5px 'Inter'; letter-spacing: 0.18em;
  color: var(--text-faint);
}
.sizer-controls input, .sizer-controls select {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text);
  font: 500 12px 'JetBrains Mono';
}
.sizer-controls .btn { grid-column: 1 / -1; margin-top: 4px; }
.sizer-output {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.sizer-line {
  display: flex; justify-content: space-between;
  font: 500 11.5px 'Inter';
  letter-spacing: 0.04em;
  color: var(--text-dim);
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border);
}
.sizer-line:last-child { border-bottom: none; padding-bottom: 0; }
.sizer-line .mono { color: var(--text); font-weight: 600; }
.sizer-line.big {
  font-size: 13px; font-weight: 700;
  padding-top: 4px; border-top: 1px solid var(--border-strong);
}
.sizer-line.big .mono { font-size: 18px; color: #d1fae5; }
@media (max-width: 900px) {
  .sizer-grid { grid-template-columns: 1fr; }
}

/* Trust score row in modal */
.trust-row {
  display: flex; align-items: center; gap: 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
}
.trust-score {
  font: 800 28px 'JetBrains Mono';
  min-width: 80px;
}
.trust-score.tier-high { color: #6ee7b7; }
.trust-score.tier-medium { color: #fde6b8; }
.trust-score.tier-low { color: #fca5a5; }
.trust-bars {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 5px;
}
.trust-bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 50px;
  gap: 10px;
  align-items: center;
  font: 600 10px 'Inter';
  letter-spacing: 0.14em;
  color: var(--text-faint);
}
.trust-bar-track {
  height: 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  overflow: hidden;
}
.trust-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #6ee7b7); }
.trust-bar-row .mono { color: var(--text); font-family: 'JetBrains Mono'; }

/* Trust badge on HMM matrix cells (Improvement #1) */
.cell-trust-badge {
  position: absolute;
  top: 8px;
  right: 9px;
  z-index: 2;
  font: 800 9.5px 'JetBrains Mono';
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.06em;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.cell-trust-badge.tier-high {
  background: rgba(16,185,129,0.18);
  color: #b6f1d6;
  border-color: rgba(16,185,129,0.4);
}
.cell-trust-badge.tier-medium {
  background: rgba(245,158,11,0.16);
  color: #fde6b8;
  border-color: rgba(245,158,11,0.4);
}
.cell-trust-badge.tier-low {
  background: rgba(239,68,68,0.16);
  color: #fbcdcd;
  border-color: rgba(239,68,68,0.4);
}

/* ===================================================================
   MS-GARCH VIEW
   =================================================================== */
.ms-status-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.ms-status-block {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 14px;
  display: flex; flex-direction: column; gap: 3px;
}

.ms-highlights-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.highlights-list { display: flex; flex-direction: column; gap: 6px; }
.highlight-item {
  display: grid;
  grid-template-columns: 80px 100px 1fr 80px 60px;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
}
.highlight-item.tone-red { border-color: rgba(239,68,68,0.4); }
.highlight-item.tone-green { border-color: rgba(16,185,129,0.4); }
.highlight-item.tone-slate { border-color: rgba(148,163,184,0.3); }
.highlight-item .h-asset { font-weight: 800; letter-spacing: 0.06em; }
.highlight-item .h-tf { font-family: 'JetBrains Mono', monospace; color: var(--text-faint); }
.highlight-item .h-title { color: var(--text); }
.highlight-item .h-value { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--text); text-align: right; }
.highlight-item .h-sev { font: 700 10px 'JetBrains Mono'; color: var(--text-faint); text-align: right; }
.highlight-item.tone-red .h-value { color: #fca5a5; }

/* MS-GARCH matrix uses 6 timeframe columns */
.ms-matrix-grid {
  display: grid;
  grid-template-columns: 78px repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 18px;
}
.ms-cell {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 108px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 120ms ease, border-color 120ms ease;
}
.ms-cell:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.ms-cell.tone-green { border-color: rgba(16,185,129,0.40); }
.ms-cell.tone-red { border-color: rgba(239,68,68,0.40); }
.ms-cell.tone-slate { border-color: rgba(148,163,184,0.30); }
.ms-cell.tone-muted { opacity: 0.6; }
.ms-cell::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 0% 0%, var(--ms-glow, transparent), transparent 60%);
  pointer-events: none;
}
.ms-cell.tone-green { --ms-glow: rgba(16,185,129,0.10); }
.ms-cell.tone-red { --ms-glow: rgba(239,68,68,0.10); }
.ms-cell.tone-slate { --ms-glow: rgba(148,163,184,0.07); }

.ms-cell .ms-cell-head { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.ms-cell .ms-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 6px;
  border-radius: 4px;
  font: 700 9px 'Inter';
  letter-spacing: 0.12em;
  border: 1px solid transparent;
}
.ms-cell.tone-green .ms-chip { background: rgba(16,185,129,0.16); color: #c6f6e2; border-color: rgba(16,185,129,0.45); }
.ms-cell.tone-red .ms-chip { background: rgba(239,68,68,0.14); color: #fbcdcd; border-color: rgba(239,68,68,0.5); }
.ms-cell.tone-slate .ms-chip { background: rgba(148,163,184,0.12); color: #d8dfeb; border-color: rgba(148,163,184,0.40); }
.ms-cell.tone-muted .ms-chip { background: rgba(80,80,80,0.20); color: #b0b0b0; border-color: #444; }
.ms-cell .ms-price { font: 600 11px 'JetBrains Mono'; color: var(--text); }

.ms-cell-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-dim);
  position: relative; z-index: 1;
}
.ms-cell-meta .m-row { display: flex; flex-direction: column; gap: 1px; }
.ms-cell-meta .m-label { font-size: 8.5px; letter-spacing: 0.12em; color: var(--text-faint); font-family: 'Inter'; font-weight: 600; }
.ms-cell-meta .m-value { color: var(--text); font-weight: 500; }

.ms-cell .ms-size-bar {
  height: 4px;
  background: rgba(255,255,255,0.04);
  border-radius: 2px;
  overflow: hidden;
  position: relative; z-index: 1;
}
.ms-cell .ms-size-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #6ee7b7);
}
.ms-cell.tone-red .ms-size-fill { background: linear-gradient(90deg, #f59e0b, #ef4444); }

/* MS-GARCH details row */
.ms-detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  align-items: start;
}
.ms-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ms-panel #ms-history-chart,
.ms-history-chart {
  width: 100%;
  height: auto;
  min-height: 240px;
  max-height: 320px;
  display: block;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: crosshair;
}
.ms-history-chart:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.chart-hit-axis {
  cursor: ns-resize;
}
#ms-history-hit-x.chart-hit-axis {
  cursor: ew-resize;
}
.ms-panel #ms-shifts-list {
  max-height: 320px;
  overflow-y: auto;
}
.ms-probs-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.ms-prob-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  display: flex; justify-content: space-between;
  font: 600 11.5px 'JetBrains Mono';
}
.ms-prob-card .label { color: var(--text-faint); letter-spacing: 0.1em; }

@media (max-width: 1100px) {
  .ms-detail-grid { grid-template-columns: 1fr; }
  .ms-status-bar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .ms-matrix-grid {
    grid-template-columns: 60px repeat(6, minmax(0, 1fr));
    gap: 4px;
  }
}

/* Recent shifts stays in the HMM header flow so it never covers a matrix cell. */
.hmm-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.shifts-fab {
  position: static;
  z-index: 1;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(52,211,153,0.18), rgba(52,211,153,0.04));
  border: 1px solid rgba(52,211,153,0.45);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  font: 700 10.5px 'Inter';
  letter-spacing: 0.20em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(0,0,0,0.45), 0 0 0 1px rgba(52,211,153,0.10);
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}
.shifts-fab:hover {
  transform: translateY(-1px);
  border-color: rgba(52,211,153,0.75);
  background: linear-gradient(180deg, rgba(52,211,153,0.26), rgba(52,211,153,0.06));
}
.shifts-fab.is-visible { display: inline-flex; }
.shifts-fab .sf-icon { font-size: 14px; line-height: 1; }
.shifts-fab .sf-text { font-weight: 700; }
.shifts-fab .sf-count {
  font: 700 10.5px 'JetBrains Mono', monospace;
  background: rgba(52,211,153,0.25);
  border: 1px solid rgba(52,211,153,0.45);
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

/* Shifts modal body extends feed-list */
#shifts-backdrop .modal { max-width: 760px; }
#shifts-backdrop .feed-list { max-height: 70vh; overflow-y: auto; padding-right: 6px; }

#view-runtime .kpi-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#runtime-optimization-list .feed-row {
  grid-template-columns: 72px 44px minmax(0, 1fr) 32px;
  align-items: start;
}
#runtime-optimization-list .fr-main {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.45;
}

.density-compact .view { padding-top: 14px; }
.density-compact .main-panel,
.density-compact .matrix-section,
.density-compact .ribbon-section,
.density-compact .composite-section { padding: 13px 15px; }
.density-compact .cell { min-height: 64px; padding: 7px 8px; }
.density-compact .feed-row { padding-top: 6px; padding-bottom: 6px; }

button:focus-visible,
select:focus-visible,
input:focus-visible,
.cell:focus-visible {
  outline: 2px solid rgba(52,211,153,0.85);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .matrix-toolbar { grid-template-columns: 1fr 1fr; }
  .matrix-toolbar .feed-sub { grid-column: 1 / -1; }
  #view-runtime .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===================================================================
   MS-GARCH highlights: switch from rows to compact card grid
   =================================================================== */
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1300px) { .highlights-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .highlights-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .highlights-grid { grid-template-columns: 1fr; } }

.highlight-card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  min-height: 96px;
  transition: transform 120ms ease, border-color 120ms ease;
}
.highlight-card:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.highlight-card.tone-red { border-color: rgba(239,68,68,0.45); }
.highlight-card.tone-red::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 0% 0%, rgba(239,68,68,0.10), transparent 60%);
  pointer-events: none;
  border-radius: 10px;
}
.highlight-card.tone-green { border-color: rgba(16,185,129,0.45); }
.highlight-card.tone-green::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 0% 0%, rgba(16,185,129,0.10), transparent 60%);
  pointer-events: none;
  border-radius: 10px;
}
.highlight-card.tone-slate { border-color: rgba(148,163,184,0.35); }
.highlight-card .hc-head {
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 1;
}
.highlight-card .hc-asset {
  font: 800 13px 'Inter';
  letter-spacing: 0.08em;
  color: var(--text);
}
.highlight-card .hc-tf {
  font: 600 10px 'JetBrains Mono', monospace;
  color: var(--text-faint);
  padding: 2px 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
}
.highlight-card .hc-title {
  font: 600 11px 'Inter';
  color: var(--text);
  letter-spacing: 0.04em;
  position: relative; z-index: 1;
}
.highlight-card .hc-detail {
  font: 500 10.5px 'Inter';
  color: var(--text-faint);
  line-height: 1.35;
  position: relative; z-index: 1;
  /* clamp to 2 lines so the card height stays predictable */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.highlight-card .hc-foot {
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 1;
  margin-top: auto;
  padding-top: 6px;
}
.highlight-card .hc-value {
  font: 700 14px 'JetBrains Mono', monospace;
  color: var(--text);
}
.highlight-card.tone-red .hc-value   { color: #fca5a5; }
.highlight-card.tone-green .hc-value { color: #6ee7b7; }
.highlight-card .hc-sev {
  font: 700 10px 'JetBrains Mono', monospace;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 7px;
}

/* Highlight detail modal body */
#hl-body .hl-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px dashed var(--border);
  font: 500 12px 'JetBrains Mono', monospace;
}
#hl-body .hl-row:last-child { border-bottom: none; }
#hl-body .hl-row .label { color: var(--text-faint); letter-spacing: 0.10em; }

/* ===================================================================
   Visual workspace: progressive disclosure, matrix modes, accessibility
   =================================================================== */
:root {
  --radius: 8px;
  --radius-sm: 6px;
}

html,
body {
  background: var(--bg);
}

.view.active {
  animation: view-enter 150ms ease-out;
}
@keyframes view-enter {
  from { opacity: 0.65; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

.sidebar-brand { padding-bottom: 12px; }
.nav-favorites {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 0 1px 2px;
  scrollbar-width: none;
}
.nav-favorites::-webkit-scrollbar { display: none; }
.nav-favorites[hidden] { display: none; }
.favorite-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 116px;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 7px;
  background: rgba(255,255,255,0.025);
  color: var(--text-dim);
  font: 700 8.5px/1 'Inter', sans-serif;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.favorite-chip:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.nav-favorite-toggle {
  position: absolute;
  right: 6px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: transparent;
  font: 700 13px/1 'Inter', sans-serif;
  cursor: pointer;
}
.nav-item:hover .nav-favorite-toggle,
.nav-favorite-toggle:focus-visible,
.nav-favorite-toggle.active {
  color: var(--text-faint);
}
.nav-favorite-toggle.active {
  color: #fbbf24;
}

.global-asset-context {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.asset-picker-btn {
  display: inline-flex;
  max-width: 126px;
  min-width: 102px;
  height: 34px;
}
.asset-reset-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 34px;
  height: 34px;
  padding: 0;
  visibility: visible !important;
  opacity: 1 !important;
}
.asset-reset-btn.is-active {
  border-color: rgba(245, 158, 11, 0.7);
  color: #fde68a;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.22), rgba(245, 158, 11, 0.08));
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25);
}
.asset-reset-btn.is-active:hover {
  border-color: rgba(245, 158, 11, 0.9);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.3), rgba(245, 158, 11, 0.12));
}
.asset-reset-btn.is-idle {
  border-color: rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.08);
}
.asset-reset-btn.is-idle:hover {
  color: #f8fafc;
  border-color: rgba(148, 163, 184, 0.55);
  background: rgba(148, 163, 184, 0.14);
}
.status-bar .topbar-asset-cluster { order: 2; flex-shrink: 0; }
.status-bar .mode-switch { order: 1; flex-shrink: 0; }
.status-bar > .btn.primary { order: 3; flex-shrink: 0; }
.status-bar > .btn.icon-only { order: 4; flex-shrink: 0; }
.status-bar {
  display: flex;
  flex-wrap: nowrap;
  overflow: visible;
  min-width: 0;
  flex-shrink: 0;
  gap: 10px;
}
.topbar {
  overflow: visible;
  min-width: 0;
}
.topbar .brand { flex: 1 1 auto; min-width: 0; }
.topbar .status-bar { flex: 0 0 auto; }

.workspace-popover {
  position: fixed;
  top: 62px;
  right: 48px;
  z-index: 150;
  width: min(340px, calc(100vw - 24px));
  max-height: calc(100vh - 88px);
  overflow-y: auto;
  padding: 12px;
  background: #11141b;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 22px 64px rgba(0,0,0,0.62);
}
.workspace-popover[hidden] { display: none; }
.workspace-section + .workspace-section {
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding-top: 12px;
}
.workspace-label {
  margin-bottom: 8px;
  color: var(--text-faint);
  font: 800 9px/1 'Inter', sans-serif;
}
.workspace-segments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-2);
}
.workspace-segments-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.workspace-layout-hint {
  margin-top: 8px;
  font: 600 10px/1.45 'Inter', sans-serif;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}
.workspace-segment,
.workspace-action,
.workspace-save-btn,
.saved-view-open,
.saved-view-delete {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.workspace-segment {
  min-height: 28px;
  border-radius: 4px;
  font: 800 8.5px/1 'Inter', sans-serif;
}
.workspace-segment:hover,
.workspace-segment.active {
  color: #d1fae5;
  background: rgba(52,211,153,0.12);
}
.workspace-action {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: 700 9px/1 'Inter', sans-serif;
}
.workspace-action:hover,
.workspace-action.active { border-color: var(--border-strong); color: var(--text); }
.workspace-state { font-family: 'JetBrains Mono', monospace; }
.workspace-save-row {
  display: grid;
  grid-template-columns: 1fr 32px;
  gap: 6px;
}
.workspace-save-row input {
  min-width: 0;
  height: 32px;
  padding: 0 9px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font: 600 10px 'Inter', sans-serif;
  outline: none;
}
.workspace-save-btn {
  border: 1px solid rgba(52,211,153,0.36);
  border-radius: 6px;
  color: var(--accent);
  font-size: 18px;
}
.saved-view-list { display: grid; gap: 5px; margin-top: 8px; }
.saved-view-row {
  display: grid;
  grid-template-columns: 1fr 28px;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-2);
}
.saved-view-open {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 9px;
  text-align: left;
}
.saved-view-open strong { color: var(--text); font: 700 10.5px 'Inter', sans-serif; }
.saved-view-open span { color: var(--text-faint); font: 600 8.5px 'JetBrains Mono', monospace; }
.saved-view-delete { font-size: 15px; border-left: 1px solid var(--border); }
.saved-view-delete:hover { color: #fca5a5; }
.workspace-hint {
  margin-top: 10px;
  color: var(--text-faint);
  font: 600 8.5px 'JetBrains Mono', monospace;
}

.hero-card,
.kpi-card,
.main-panel,
.matrix-section,
.ribbon-section,
.composite-section {
  border-color: var(--border);
}
.hero-card.risk_on,
.hero-card.RISK_ON_TREND,
.hero-card.MEAN_REVERSION_RALLY,
.hero-card.green,
.hero-card.risk_off,
.hero-card.DELEVERAGING,
.hero-card.LIQUIDITY_VACUUM,
.hero-card.VOL_EXPANSION,
.hero-card.RISK_ON_EXHAUSTION,
.hero-card.red,
.hero-card.transition,
.hero-card.NEUTRAL_CHOP,
.hero-card.slate {
  border-color: var(--border-strong);
}
.hero-card::after,
.kpi-card::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  border-radius: 8px 0 0 8px;
  background: var(--text-faint);
  opacity: 0.75;
}
.hero-card.risk_on::after,
.hero-card.RISK_ON_TREND::after,
.hero-card.MEAN_REVERSION_RALLY::after,
.hero-card.green::after,
.kpi-card.tone-green::after { background: var(--bull); }
.hero-card.risk_off::after,
.hero-card.DELEVERAGING::after,
.hero-card.LIQUIDITY_VACUUM::after,
.hero-card.VOL_EXPANSION::after,
.hero-card.RISK_ON_EXHAUSTION::after,
.hero-card.red::after,
.kpi-card.tone-red::after { background: var(--bear); }
.kpi-card.tone-green,
.kpi-card.tone-red,
.kpi-card.tone-slate { border-color: var(--border); }
.kpi-card {
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease, background 120ms ease;
}
.kpi-card:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  background: var(--panel-2);
}
.kpi-card::before {
  content: "i";
  position: absolute;
  top: 8px;
  right: 9px;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-faint);
  font: 700 8px/1 'Inter', sans-serif;
}

.tradfi-summary-grid {
  grid-template-columns: minmax(320px, 0.76fr) minmax(480px, 1.24fr);
  align-items: stretch;
}
.tradfi-summary-grid > .main-panel { min-height: 188px; }
.tradfi-count-panel {
  display: flex;
  flex-direction: column;
}
.tradfi-count-panel .dual-bar { margin-top: 10px; }
.tradfi-count-panel .legend-row { margin-top: auto; }

.tradfi-group-overview {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.group-overview-card {
  min-width: 0;
  min-height: 94px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}
.group-overview-card:hover,
.group-overview-card.selected {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  background: #121820;
}
.group-overview-card.selected { box-shadow: inset 2px 0 0 var(--accent); }
.group-card-head,
.group-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.group-card-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 800 10px 'Inter', sans-serif;
  text-transform: uppercase;
}
.group-card-head span,
.group-card-foot span {
  color: var(--text-faint);
  font: 600 8.5px 'JetBrains Mono', monospace;
}
.group-card-state {
  color: var(--text-dim);
  font: 700 10.5px 'Inter', sans-serif;
  text-transform: uppercase;
}
.group-card-foot { margin-top: auto; }
.group-card-foot strong { font: 800 15px 'JetBrains Mono', monospace; }
.group-overview-card.bull .group-card-foot strong { color: #6ee7b7; }
.group-overview-card.bear .group-card-foot strong { color: #fca5a5; }
.group-overview-card.chop .group-card-foot strong { color: var(--chop); }

.matrix-toolbar {
  grid-template-columns: minmax(140px, 1fr) repeat(3, auto) auto auto;
}
.matrix-mode-switch {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-2);
}
.matrix-mode-btn {
  min-height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-faint);
  font: 800 8.5px/1 'Inter', sans-serif;
  cursor: pointer;
}
.matrix-mode-btn:hover,
.matrix-mode-btn.active {
  color: #d1fae5;
  background: rgba(52,211,153,0.11);
}
.heatmap-value { display: none; }
.tradfi-matrix.matrix-heatmap {
  grid-template-columns: 92px repeat(5, minmax(82px, 1fr)) !important;
  gap: 5px;
}
.tradfi-matrix.matrix-heatmap .cell {
  min-width: 82px;
  min-height: 46px;
  padding: 6px 7px;
  justify-content: center;
}
.tradfi-matrix.matrix-heatmap .last-close,
.tradfi-matrix.matrix-heatmap .proba-bar,
.tradfi-matrix.matrix-heatmap .cell-asof-row {
  display: none;
}
.tradfi-matrix.matrix-heatmap .cell-head { justify-content: center; }
.tradfi-matrix.matrix-heatmap .heatmap-value {
  display: block;
  text-align: center;
  color: var(--text-dim);
  font: 700 10px 'JetBrains Mono', monospace;
}
.tradfi-matrix.matrix-focus .tradfi-group-row {
  background: #111820;
}
.cell-change {
  margin-left: auto;
  font: 800 8px/1 'JetBrains Mono', monospace;
}
.cell-change.flip { color: #fde68a; }
.cell-change.up { color: #6ee7b7; }
.cell-change.down { color: #fca5a5; }
.tradfi-hmm-cell.change-flip { box-shadow: inset 0 2px 0 #f59e0b; }
.tradfi-hmm-cell.change-up { box-shadow: inset 0 1px 0 rgba(16,185,129,0.55); }
.tradfi-hmm-cell.change-down { box-shadow: inset 0 1px 0 rgba(239,68,68,0.55); }

.small-multiples-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.small-multiple {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 10px 7px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-2);
  color: var(--text);
  cursor: crosshair;
}
.small-multiple:hover { border-color: var(--border-strong); }
.small-multiple-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.small-multiple-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 800 9px 'Inter', sans-serif;
  text-transform: uppercase;
}
.small-multiple-head span { font: 700 9px 'JetBrains Mono', monospace; color: var(--text-dim); }
.small-multiple svg { width: 100%; height: 54px; overflow: visible; }
.pulse-zero { stroke: var(--border-strong); stroke-dasharray: 3 3; }
.pulse-line { fill: none; stroke: var(--chop); stroke-width: 1.7; vector-effect: non-scaling-stroke; }
.small-multiple.bull .pulse-line { stroke: var(--bull); }
.small-multiple.bear .pulse-line { stroke: var(--bear); }

.empty-state {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 7px;
  color: var(--text-faint);
  background: rgba(255,255,255,0.012);
  text-align: center;
}
.empty-state-icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  font: 700 10px 'JetBrains Mono', monospace;
}
.empty-state-copy { font: 600 10.5px/1.4 'Inter', sans-serif; }
.empty-state.error { color: #fca5a5; border-color: rgba(239,68,68,0.24); }
.empty-state.loading .empty-state-icon { color: #fde68a; }

.feed-row {
  grid-template-columns: minmax(78px, 0.7fr) minmax(54px, 0.45fr) minmax(160px, 3fr) minmax(56px, auto);
  column-gap: 12px;
}
.feed-row .fr-main { line-height: 1.35; }
.feed-row.asset-context-match,
.asset-context-match {
  background: rgba(52,211,153,0.06);
  box-shadow: inset 2px 0 0 rgba(52,211,153,0.65);
}

.density-dense .view { padding-top: 10px; }
.density-dense .hero-state-grid,
.density-dense .kpi-strip,
.density-dense .main-grid { gap: 8px; margin-bottom: 10px; }
.density-dense .main-panel,
.density-dense .matrix-section,
.density-dense .ribbon-section,
.density-dense .composite-section { padding: 10px 12px; margin-bottom: 10px; }
.density-dense .hero-card { min-height: 106px; padding: 13px 15px; }
.density-dense .hero-value { font-size: 24px; }
.density-dense .kpi-card { padding: 9px 11px; }
.density-dense .kpi-value { font-size: 18px; }
.density-dense .cell { min-height: 54px; padding: 5px 7px; }
.density-dense .feed-row { padding-top: 5px; padding-bottom: 5px; }

.palette-colorblind {
  --bull: #22d3ee;
  --bull-glow: rgba(34,211,238,0.30);
  --bear: #fb923c;
  --bear-glow: rgba(251,146,60,0.30);
  --accent: #67e8f9;
  --accent-glow: rgba(103,232,249,0.22);
}
.palette-colorblind .hero-card.risk_on .hero-value,
.palette-colorblind .hero-card.RISK_ON_TREND .hero-value,
.palette-colorblind .hero-card.green .hero-value,
.palette-colorblind .kpi-card.tone-green .kpi-value,
.palette-colorblind .score-pos { color: #67e8f9; }
.palette-colorblind .hero-card.risk_off .hero-value,
.palette-colorblind .hero-card.DELEVERAGING .hero-value,
.palette-colorblind .hero-card.red .hero-value,
.palette-colorblind .kpi-card.tone-red .kpi-value,
.palette-colorblind .score-neg { color: #fdba74; }

.modal-svg:focus-visible,
.composite-card:focus-visible,
.ribbon-card:focus-visible,
.ribbon-row:focus-visible,
.group-overview-card:focus-visible,
.small-multiple:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 1200px) {
  .status-bar { gap: 8px; }
  .asset-picker-btn { max-width: 104px; }
  .tradfi-group-overview,
  .small-multiples-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .matrix-toolbar { grid-template-columns: minmax(130px, 1fr) repeat(2, auto); }
  .matrix-toolbar .matrix-mode-switch,
  .matrix-toolbar .feed-sub { grid-column: auto / span 1; }
}

@media (max-width: 900px) {
  .app > .view,
  .view.active {
    width: 100%;
    min-width: 0;
    max-width: 100vw;
  }
  .matrix-section,
  .tradfi-matrix-panel,
  .tradfi-matrix,
  .matrix-toolbar {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .topbar { flex-wrap: wrap; padding: 11px 14px; }
  .topbar .status-bar { width: 100%; flex-wrap: wrap; }
  .asset-picker-btn { flex: 1 1 120px; max-width: none; }
  .workspace-popover { top: 112px; right: 12px; }
  .tradfi-summary-grid { grid-template-columns: 1fr; }
  .tradfi-group-overview,
  .small-multiples-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .matrix-toolbar { grid-template-columns: 1fr 1fr; }
  .matrix-mode-switch { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .view-main, .view-tradfi, .view-tradfi-macro, .view-tradfi-breadth,
  .view-tradfi-positioning, .view-tradfi-sector, .view-tradfi-decision,
  .view-tradfi-credit, .view-tradfi-global, .view-tradfi-portfolio,
  .view-tradfi-events, .view-tradfi-backtest, .view-tradfi-health,
  .view-tradfi-model-quality, .view-tradfi-brief, .view-tradfi-rotation,
  .view-tradfi-drivers, .view-tradfi-flows, .view-tradfi-liquidity,
  .view-tradfi-volatility, .view-tradfi-fundamentals,
  .view-tradfi-persistence, .view-tradfi-scenarios {
    padding-left: 12px;
    padding-right: 12px;
  }
  .tradfi-group-overview,
  .small-multiples-grid { grid-template-columns: 1fr; }
  .matrix-toolbar { grid-template-columns: 1fr; }
  .matrix-toolbar > * { min-width: 0; max-width: 100%; }
  .status-bar .btn.primary span:last-child { display: none; }
  .feed-row {
    grid-template-columns: minmax(66px, 0.8fr) 48px minmax(100px, 2.2fr) auto;
    column-gap: 7px;
  }
}

/* Final cascade adjustments for the TradFi workspace. */
.tradfi-group-row {
  width: 100%;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
}
.tradfi-group-row > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #a7f3d0;
  font: 800 9.5px/1 'Inter', sans-serif;
  letter-spacing: 0.12em;
}
.tradfi-group-row:hover { background: #111b20; }
.matrix-group-chevron { color: var(--text-faint) !important; }

@media (min-width: 1000px) {
  #modal-backdrop {
    justify-content: flex-end;
    padding: 0;
    background: rgba(2, 4, 8, 0.48);
    backdrop-filter: blur(3px);
  }
  #modal-card {
    width: min(900px, 72vw);
    max-width: none;
    height: 100vh;
    max-height: none;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
    box-shadow: -24px 0 70px rgba(0,0,0,.62);
  }
}

/* ============================================================
   UX PASS — 2026-06-15 (additive; served under token 20260615-ux1)
   1 verdict banner · 2 while-you-were-away · 3 section glance
   4 KPI delta/spark · 5 skeletons · 6 sticky topbar
   7 regime-accent chrome · 9 page pin · 10 first-run tour + plain-english
   ============================================================ */

/* --- 6 · Sticky context header (page-title/filter stay visible on long pages) --- */
.app > .topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: linear-gradient(180deg, var(--bg-2) 60%, rgba(12,14,19,0.86));
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

/* --- 1 · Verdict banner  +  2 · While-you-were-away chip --- */
.intel-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--chop);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: var(--shadow-soft);
}
.intel-banner[hidden] { display: none; }
.intel-banner.tone-bull { border-left-color: var(--bull); }
.intel-banner.tone-bear { border-left-color: var(--bear); }
.intel-banner.tone-chop { border-left-color: var(--chop); }
.intel-verdict { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }
.intel-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--chop); box-shadow: 0 0 0 3px var(--chop-glow);
}
.intel-banner.tone-bull .intel-dot { background: var(--bull); box-shadow: 0 0 0 3px var(--bull-glow); }
.intel-banner.tone-bear .intel-dot { background: var(--bear); box-shadow: 0 0 0 3px var(--bear-glow); }
.intel-text {
  font: 500 13.5px/1.45 'Inter', sans-serif; color: var(--text);
  letter-spacing: .1px;
}
.intel-text strong { font-weight: 700; }
.intel-text .intel-muted { color: var(--text-dim); }
.intel-away {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-strong);
  background: rgba(52,211,153,.08); color: var(--accent);
  font: 600 11px/1 var(--font-mono); letter-spacing: .3px; white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}
.intel-away[hidden] { display: none; }
.intel-away:hover { background: rgba(52,211,153,.16); transform: translateY(-1px); }
.intel-away .intel-away-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* --- 4 · KPI delta badge + inline sparkline (extends existing .kpi-card) --- */
.kpi-value-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kpi-delta {
  font: 600 11px/1 var(--font-mono); letter-spacing: .2px;
  padding: 2px 5px; border-radius: 5px;
  background: rgba(148,163,184,.14); color: var(--chop);
}
.kpi-delta-up { background: var(--bull-glow); color: var(--bull); }
.kpi-delta-down { background: var(--bear-glow); color: var(--bear); }
.kpi-delta-flat { background: rgba(148,163,184,.14); color: var(--text-dim); }
.kpi-spark { display: block; margin-top: 7px; height: 22px; }
.kpi-spark svg { display: block; width: 100%; height: 22px; overflow: visible; }

/* --- 3 · Section glance: per-nav-item value, swaps out for the pin star on hover --- */
.nav-glance {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  max-width: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  font: 600 9.5px/1 var(--font-mono);
  letter-spacing: .2px;
  color: var(--text-dim);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .12s ease;
}
.nav-glance.tone-bull { color: var(--bull); }
.nav-glance.tone-bear { color: var(--bear); }
.nav-glance.tone-warn { color: #f5b73d; }
.nav-glance.tone-chop { color: var(--text-faint); }
.nav-item.active .nav-glance { color: var(--text); }
.nav-item:hover .nav-glance { opacity: 0; }           /* reveal the pin star underneath */
.nav-item.search-hidden .nav-glance { display: none; }

/* --- 5 · Skeleton shimmer for first paint --- */
.skeleton {
  display: inline-block; border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.10) 37%, rgba(255,255,255,.04) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}
.skeleton-text { width: 64%; height: 0.9em; vertical-align: middle; }
.skeleton-kpi { height: 62px; width: 100%; border-radius: var(--radius-sm); }
@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* --- 7 · Regime-accent chrome: active nav rail + page-title underline reflect state --- */
#page-title { border-bottom: 2px solid transparent; padding-bottom: 2px; transition: border-color .3s ease; }
body[data-regime="bull"] .nav-item.active { box-shadow: inset 3px 0 0 var(--bull); }
body[data-regime="bear"] .nav-item.active { box-shadow: inset 3px 0 0 var(--bear); }
body[data-regime="chop"] .nav-item.active { box-shadow: inset 3px 0 0 var(--chop); }
body[data-regime="bull"] #page-title { border-bottom-color: var(--bull-glow); }
body[data-regime="bear"] #page-title { border-bottom-color: var(--bear-glow); }
body[data-regime="chop"] #page-title { border-bottom-color: var(--chop-glow); }

/* --- 9 · Pin-this-page button + ⌘K hint on the sidebar search --- */
#page-pin-btn.pinned { color: #f5c451; border-color: rgba(245,196,81,.45); }
.nav-search-wrap { position: relative; }
.nav-kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font: 600 9.5px/1 var(--font-mono); color: var(--text-faint);
  border: 1px solid var(--border); border-radius: 4px; padding: 2px 5px;
  pointer-events: none;
}

/* --- 10 · Welcome tour overlay (multi-step + spotlight) --- */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 20);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tour-overlay[hidden] { display: none !important; }
/* Dim + blur live on their own layer so the spotlight rect can be clipped out
   of them. Clipping .tour-overlay directly would also clip the card. */
.tour-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(4, 6, 10, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
}
body.tour-active { overflow: hidden; }
.tour-spotlight {
  position: fixed;
  z-index: calc(var(--z-modal) + 21);
  border-radius: 10px;
  border: 2px solid rgba(52, 211, 153, 0.55);
  box-shadow:
    0 0 0 2px rgba(52, 211, 153, 0.12),
    0 0 24px rgba(52, 211, 153, 0.18),
    0 0 0 9999px rgba(4, 6, 10, 0.68);
  pointer-events: none;
  transition: top 220ms ease, left 220ms ease, width 220ms ease, height 220ms ease;
}
.tour-spotlight[hidden] { display: none !important; }
.tour-card {
  position: fixed;
  z-index: calc(var(--z-modal) + 22);
  width: min(500px, calc(100vw - 24px));
  max-height: min(78vh, 640px);
  overflow: auto;
  padding: 20px 22px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: linear-gradient(180deg, #141820, #10141b);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.tour-card.tour-card-docked { margin: 0; }
.tour-progress {
  font: 700 9px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.tour-card h3 {
  margin: 0 0 6px;
  font-size: 18px;
  letter-spacing: 0.01em;
  line-height: 1.25;
}
.tour-card .tour-sub {
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.45;
  margin: 0 0 14px;
}
.tour-step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.tour-step-list li {
  position: relative;
  padding-left: 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
}
.tour-step-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.tour-step-list strong { color: #d1fae5; font-weight: 700; }
.tour-actions-wizard {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.tour-actions-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  flex: 1 1 200px;
  max-width: 100%;
}
.tour-dismiss-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.tour-dismiss-options-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.tour-dismiss-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font: 500 11px/1.4 'Inter', sans-serif;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.tour-dismiss-option input {
  width: 14px;
  height: 14px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.tour-dismiss-option:hover {
  color: var(--text);
}
.tour-actions-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tour-btn {
  box-sizing: border-box;
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  cursor: pointer;
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.04em;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.tour-btn-primary {
  border: 1px solid rgba(52, 211, 153, 0.45);
  background: linear-gradient(180deg, rgba(52, 211, 153, 0.22), rgba(52, 211, 153, 0.1));
  color: #d1fae5;
}
.tour-btn-primary:hover {
  background: linear-gradient(180deg, rgba(52, 211, 153, 0.32), rgba(52, 211, 153, 0.14));
}
.tour-btn-ghost {
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
}
.tour-btn-ghost:hover {
  color: var(--text);
  border-color: #3a4258;
  background: rgba(255, 255, 255, 0.05);
}
/* Legacy tour list (glossary etc.) */
.tour-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 11px; }
.tour-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; color: var(--text); }
.tour-list .tour-key {
  flex: none; min-width: 34px; text-align: center;
  font: 600 11px/1.5 var(--font-mono);
  border: 1px solid var(--border-strong); border-radius: 5px; padding: 2px 7px;
  color: var(--accent); background: rgba(52,211,153,.08);
}

/* --- 10 · Plain-english helper lines (revealed by the workspace toggle) --- */
.pe-hint { display: none; }
body.plain-english .pe-hint {
  display: block; margin-top: 3px;
  font: 500 11px/1.4 'Inter', sans-serif; letter-spacing: 0; text-transform: none;
  color: var(--text-dim);
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  .intel-away:hover { transform: none; }
}

/* ============================================================
   MAIN DASHBOARD — combined crypto + TradFi overview (2026-06-16)
   Layout only; reuses .hero-card / .kpi-strip / .dual-bar /
   .intel-banner / .main-panel / .feed-row from the rest of the app.
   ============================================================ */
/* The overview was never added to the shared view-padding list, so it lacked
   the bottom clearance every other page uses to sit above the FIXED footer
   (position: fixed; bottom: 0). Without it the last section was hidden behind
   the footer and unreachable. Match the standard 90px bottom clearance. */
.view-overview {
  padding: 20px 28px 90px;
  max-width: 1500px;
  margin: 0 auto;
}
.nav-item.nav-overview .nav-label { font-weight: 700; letter-spacing: .04em; }

/* Dual verdict band — one banner per universe, split by a slim divider */
.overview-verdict-band {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 16px;
  margin-bottom: 22px;
}
.overview-verdict-band .ov-verdict { margin-bottom: 0; }
@media (max-width: 760px) {
  .overview-verdict-band { grid-template-columns: 1fr; }
  .overview-verdict-band > .ov-axis-v { width: auto; height: 1px; min-height: 0; }
}

/* 6-card hero grid: 3 across on wide screens, collapse gracefully */
.overview-hero-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .overview-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .overview-hero-grid { grid-template-columns: 1fr; } }

/* Two-column universe snapshot split, divided down the middle */
.overview-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 16px;
}
@media (max-width: 900px) {
  .overview-split { grid-template-columns: 1fr; }
  .overview-split > .ov-axis-v { width: auto; height: 1px; min-height: 0; }
}
.ov-universe-panel { display: flex; flex-direction: column; }
.ov-sub-label {
  font: 600 10px/1.4 'Inter', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 2px 0 8px;
}
.ov-section-gap { margin-top: 18px; }

/* "Open full" jump buttons in the panel headers */
.ov-jump {
  font: 600 10px/1 'Inter', sans-serif;
  letter-spacing: .06em;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.ov-jump:hover { border-color: var(--accent); background: rgba(52, 211, 153, .08); }
.ov-jump:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Slim crypto | TradFi separators between paired blocks on the Main Dashboard.
   Vertical between left/right pairs; horizontal between the hero rows. The line
   fades at its ends so it reads as a subtle divider, not a hard rule. */
.ov-axis { border: 0; align-self: stretch; }
.ov-axis-v {
  width: 1px;
  min-height: 100%;
  background: linear-gradient(180deg, transparent, var(--border) 12%, var(--border) 88%, transparent);
}
.ov-axis-h {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--border) 8%, var(--border) 92%, transparent);
}

/* Hero band: crypto row, divider, TradFi row (each keeps the 3-up grid) */
.ov-hero-band { margin-bottom: 26px; }
.ov-hero-band .overview-hero-grid { margin-bottom: 0; }
.ov-hero-band .ov-axis-h { margin: 18px 0; }

/* KPI band: crypto group | divider | TradFi group, side by side on wide screens */
.ov-kpi-band {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 20px;
}
.ov-kpi-band .ov-kpi-group { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
@media (max-width: 720px) {
  .ov-kpi-band { flex-direction: column; }
  .ov-kpi-band > .ov-axis-v { width: auto; height: 1px; min-height: 0; }
}

/* ============================================================= */
/* Phase 1 — topbar breadcrumb + ⌘K universe tags (2026-06-17)   */
/* ============================================================= */
.page-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin-bottom: 3px;
  font: 700 var(--text-2xs)/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.page-breadcrumb:empty { display: none; }
.bc-seg { white-space: nowrap; color: var(--text-faint); }
.bc-seg.bc-current { color: var(--text-dim); }
.bc-sep { opacity: 0.5; }

.cmd-univ {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px 6px;
  border-radius: 999px;
  font: 700 9px/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  font-style: normal;
  vertical-align: middle;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
}
.cmd-univ-crypto { color: var(--accent); border-color: var(--accent-glow); background: rgba(52,211,153,0.08); }
.cmd-univ-tradfi { color: #7cc2ff; border-color: rgba(124,194,255,0.35); background: rgba(124,194,255,0.08); }
.cmd-univ-main { color: var(--text); background: rgba(255,255,255,0.05); }

/* ============================================================= */
/* Phase 3 — persistent regime color key + standard n/a chip      */
/* ============================================================= */
.regime-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-2) 0;
  margin-top: var(--space-1);
  border-top: 1px solid var(--border);
}
.rk-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 var(--text-2xs)/1 var(--font-sans);
  letter-spacing: 0.12em;
  color: var(--text-faint);
}
.rk-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.rk-bull { background: var(--bull); box-shadow: 0 0 6px var(--bull-glow); }
.rk-chop { background: var(--chop); }
.rk-bear { background: var(--bear); box-shadow: 0 0 6px var(--bear-glow); }

.data-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font: 700 9.5px/1.5 var(--font-mono);
  letter-spacing: 0.06em;
  border: 1px solid var(--border-strong);
  vertical-align: middle;
}
.data-chip.is-na { color: var(--text-faint); background: rgba(255,255,255,0.03); }

/* ============================================================= */
/* Phase 4 — MAIN DASHBOARD universe eyebrows (replace per-card   */
/* "CRYPTO ·" / "TRADFI ·" prefixes with one label per group)     */
/* ============================================================= */
.ov-band-label {
  font: 800 var(--text-2xs)/1 var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 var(--space-3) 2px;
}
.ov-band-label.ov-band-crypto { color: var(--accent); }
.ov-band-label.ov-band-tradfi { color: #7cc2ff; }
.ov-hero-band .ov-axis-h + .ov-band-label { margin-top: 2px; }

/* ============================================================= */
/* Combined Main Dashboard density + adjustable layout            */
/* ============================================================= */
.overview-layout-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  margin: -2px 0 var(--space-5);
}
.overview-layout-status {
  font: 800 var(--text-2xs)/1 var(--font-mono);
  letter-spacing: 0.14em;
  color: var(--text-faint);
}
.overview-layout-btn {
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  color: var(--text-dim);
  padding: 7px 12px;
  font: 800 var(--text-2xs)/1 var(--font-sans);
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.overview-layout-btn:hover,
.overview-layout-btn.active {
  color: var(--accent);
  border-color: rgba(52,211,153,0.48);
  background: rgba(52,211,153,0.09);
}
#view-overview .overview-verdict-band { margin-bottom: var(--space-6); }
#view-overview .ov-hero-band { margin-bottom: var(--space-6); }
#view-overview .overview-hero-grid,
#view-overview .ov-kpi-group {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}
#view-overview .overview-hero-grid > .hero-card,
#view-overview .ov-kpi-group > .kpi-card {
  grid-column: span var(--ov-span, 4);
}
#view-overview .hero-card {
  min-height: var(--ov-panel-h, 116px);
  padding: 17px 19px 15px;
  border-radius: 12px;
  gap: 7px;
}
#view-overview .hero-label { font-size: 9.5px; letter-spacing: 0.18em; }
#view-overview .hero-value { font-size: 26px; line-height: 1.05; }
#view-overview .hero-sub {
  font-size: 11px;
  max-width: 100%;
  white-space: normal;
}
#view-overview .ov-kpi-band { margin-bottom: var(--space-6); gap: 14px; }
#view-overview .ov-kpi-group { margin-bottom: 0; }
#view-overview .kpi-card {
  min-height: var(--ov-panel-h, 82px);
  padding: 11px 13px;
  border-radius: 10px;
}
#view-overview .kpi-label { font-size: 9px; letter-spacing: 0.16em; }
#view-overview .kpi-value { font-size: 19px; }
#view-overview .kpi-detail { font-size: 10px; line-height: 1.3; }
#view-overview .overview-split { gap: 12px; }
#view-overview .ov-universe-panel {
  min-height: var(--ov-panel-h, 320px);
  padding: 16px 18px;
}
#view-overview .ov-section-gap { margin-top: var(--space-3); }
.ov-card-micro {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  min-height: 20px;
}
.ov-micro-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 4px 7px;
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.025);
  color: var(--text-dim);
  font: 800 9.5px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ov-micro-chip strong {
  min-width: 0;
  color: var(--text);
  font: 800 10px/1 var(--font-mono);
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ov-micro-chip.tone-green strong { color: #6ee7b7; }
.ov-micro-chip.tone-red strong { color: #fca5a5; }
.ov-micro-chip.tone-slate strong { color: var(--text-dim); }
.ov-snapshot-micro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 4px;
}
.ov-mini-card {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(148,163,184,0.16);
  border-radius: 9px;
  background: rgba(2,6,14,0.24);
}
.ov-mini-label,
.ov-mini-detail {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ov-mini-label {
  color: var(--text-faint);
  font: 800 9px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ov-mini-value {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font: 800 13px/1.1 var(--font-mono);
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ov-mini-detail {
  margin-top: 5px;
  color: var(--text-dim);
  font: 600 10px/1.2 var(--font-sans);
}
.ov-mini-card.tone-green .ov-mini-value { color: #6ee7b7; }
.ov-mini-card.tone-red .ov-mini-value { color: #fca5a5; }
.ov-mini-card.tone-slate .ov-mini-value { color: var(--text-dim); }
#view-overview .compact-feed .feed-row {
  grid-template-columns: minmax(42px, 0.48fr) minmax(42px, 0.42fr) minmax(130px, 2.4fr) minmax(70px, 0.72fr);
  padding: 8px 0;
}
#view-overview .compact-feed .fr-main {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#view-overview .compact-feed .fr-val {
  text-align: right;
  white-space: nowrap;
}
.ov-layout-card {
  position: relative;
  touch-action: auto;
}
.ov-layout-grip,
.ov-resize-grip {
  display: none;
}
#view-overview.overview-editing .ov-layout-card {
  outline: 1px dashed rgba(96,165,250,0.48);
  outline-offset: 3px;
}
#view-overview.overview-editing .ov-layout-card[draggable="true"] {
  cursor: grab;
}
#view-overview.overview-editing .ov-layout-card[draggable="true"]:active {
  cursor: grabbing;
}
#view-overview.overview-editing .ov-layout-grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 10px;
  top: 9px;
  z-index: 4;
  border: 1px solid rgba(96,165,250,0.42);
  border-radius: 999px;
  background: rgba(15,23,42,0.78);
  color: #bfdbfe;
  padding: 4px 7px;
  font: 800 8px/1 var(--font-sans);
  letter-spacing: 0.10em;
  pointer-events: none;
}
#view-overview.overview-editing .ov-resize-grip {
  display: block;
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 5;
  width: 15px;
  height: 15px;
  border-right: 2px solid rgba(96,165,250,0.70);
  border-bottom: 2px solid rgba(96,165,250,0.70);
  border-radius: 2px;
  cursor: nwse-resize;
}
#view-overview .ov-is-dragging {
  opacity: 0.52;
}
#view-overview .ov-is-resizing {
  user-select: none;
  border-color: rgba(96,165,250,0.60);
}
@media (max-width: 1180px) {
  #view-overview .overview-hero-grid > .hero-card,
  #view-overview .ov-kpi-group > .kpi-card { grid-column: span 6; }
}
@media (max-width: 760px) {
  .overview-layout-toolbar { justify-content: flex-start; flex-wrap: wrap; }
  #view-overview .overview-hero-grid > .hero-card,
  #view-overview .ov-kpi-group > .kpi-card { grid-column: span 12; }
  .ov-snapshot-micro-grid { grid-template-columns: 1fr; }
  #view-overview .compact-feed .feed-row { grid-template-columns: 1fr; gap: 4px; }
  #view-overview .compact-feed .fr-val { text-align: left; }
}

/* ============================================================= */
/* Custom Dashboard Builder — Phase 1                             */
/* ============================================================= */
.custom-builder-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(22,26,35,0.92), rgba(17,20,27,0.92));
  box-shadow: var(--shadow-soft);
}
.custom-builder-meta,
.custom-builder-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.custom-phase {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(52,211,153,0.36);
  color: var(--accent);
  background: rgba(52,211,153,0.08);
  font: 800 9px/1 var(--font-sans);
  letter-spacing: 0.14em;
}
.custom-status {
  color: var(--text-dim);
  font: 700 var(--text-2xs)/1 var(--font-mono);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.custom-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.custom-widget-card {
  grid-column: span var(--custom-span, 4);
  min-height: var(--custom-panel-h, 220px);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.custom-widget-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 90% at 110% -20%, rgba(52,211,153,0.055), transparent 70%);
}
.custom-widget-head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 14px 15px 9px;
  border-bottom: 1px solid var(--border);
}
.custom-widget-source {
  margin-bottom: 5px;
  color: var(--text-faint);
  font: 800 9px/1 var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.custom-widget-head h2 {
  margin: 0;
  color: var(--text);
  font: 800 13px/1.15 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.custom-setting-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
.custom-setting-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  max-width: 160px;
  padding: 0 7px;
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.025);
  color: var(--text-dim);
  font: 800 8px/1 var(--font-sans);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.custom-widget-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.custom-widget-actions button {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(255,255,255,0.025);
  color: var(--text-dim);
  cursor: pointer;
  font: 800 13px/1 var(--font-sans);
}
.custom-widget-actions button:hover {
  color: var(--accent);
  border-color: rgba(52,211,153,0.45);
  background: rgba(52,211,153,0.08);
}
.custom-widget-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 15px 15px;
  min-height: 0;
  flex: 1;
}
.custom-density-compact .custom-widget-head {
  padding-top: 11px;
  padding-bottom: 7px;
}
.custom-density-compact .custom-widget-body {
  gap: 7px;
  padding-top: 9px;
}
.custom-density-compact .custom-stat,
.custom-density-compact .custom-kpi {
  padding: 7px 8px;
}
.custom-density-detail .custom-widget-body {
  gap: 12px;
}
.custom-density-detail .custom-widget-feed .feed-row {
  padding: 9px 0;
}
.custom-widget-feed {
  overflow: auto;
  max-height: calc(var(--custom-panel-h, 220px) - 126px);
}
.custom-widget-feed .feed-row {
  grid-template-columns: minmax(44px, .52fr) minmax(42px, .42fr) minmax(120px, 2.4fr) minmax(58px, .7fr);
  padding: 7px 0;
}
.custom-widget-feed .fr-main,
.custom-widget-feed .fr-val {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.custom-widget-feed .fr-val { text-align: right; }
.custom-stat-grid,
.custom-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px;
}
.custom-stat,
.custom-kpi {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(148,163,184,0.16);
  border-radius: 9px;
  background: rgba(2,6,14,0.22);
}
.custom-stat span,
.custom-kpi span {
  display: block;
  color: var(--text-faint);
  font: 800 8.5px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.custom-stat strong,
.custom-kpi strong {
  display: block;
  margin-top: 7px;
  color: var(--text);
  font: 800 18px/1.05 var(--font-mono);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.custom-stat em,
.custom-kpi em {
  display: block;
  margin-top: 6px;
  color: var(--text-dim);
  font: 600 10px/1.2 var(--font-sans);
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.custom-stat.tone-green strong,
.custom-kpi.tone-green strong { color: #6ee7b7; }
.custom-stat.tone-red strong,
.custom-kpi.tone-red strong { color: #fca5a5; }
.custom-stat.tone-slate strong,
.custom-kpi.tone-slate strong { color: var(--text-dim); }
.custom-dual-bar { margin: 0; height: 30px; }
.custom-dashboard-grid.is-editing .custom-widget-card {
  outline: 1px dashed rgba(96,165,250,0.48);
  outline-offset: 3px;
}
.custom-dashboard-grid.is-editing .custom-widget-card[draggable="true"] {
  cursor: grab;
}
.custom-dashboard-grid.is-editing .custom-widget-card[draggable="true"]:active {
  cursor: grabbing;
}
.custom-widget-drag,
.custom-widget-resize {
  display: none;
}
.custom-dashboard-grid.is-editing .custom-widget-drag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 74px;
  top: 13px;
  z-index: 5;
  border: 1px solid rgba(96,165,250,0.42);
  border-radius: 999px;
  background: rgba(15,23,42,0.80);
  color: #bfdbfe;
  padding: 4px 7px;
  font: 800 8px/1 var(--font-sans);
  letter-spacing: 0.10em;
  pointer-events: none;
}
.custom-dashboard-grid.is-editing .custom-widget-resize {
  display: block;
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 5;
  width: 16px;
  height: 16px;
  border-right: 2px solid rgba(96,165,250,0.75);
  border-bottom: 2px solid rgba(96,165,250,0.75);
  border-radius: 2px;
  cursor: nwse-resize;
}
.custom-widget-card.is-dragging { opacity: 0.52; }
.custom-widget-card.is-resizing {
  user-select: none;
  border-color: rgba(96,165,250,0.60);
}
.custom-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 220px;
  margin-top: var(--space-3);
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  color: var(--text-dim);
}
.custom-empty-title {
  font: 800 var(--text-xs)/1 var(--font-sans);
  letter-spacing: 0.18em;
  color: var(--text-faint);
}
.custom-widget-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 86px 22px 30px;
  background: rgba(0,0,0,0.58);
  backdrop-filter: blur(8px);
}
.custom-widget-backdrop[hidden] { display: none; }
.custom-widget-modal {
  width: min(920px, 100%);
  max-height: min(760px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.custom-widget-modal-head,
.custom-widget-search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.custom-widget-count {
  margin-top: 5px;
  color: var(--text-dim);
  font: 700 var(--text-2xs)/1 var(--font-mono);
}
.custom-widget-search-row .nav-search {
  padding-left: 12px;
}
.custom-widget-library {
  overflow: auto;
  padding: 14px 16px 16px;
}
.custom-settings-modal {
  width: min(620px, 100%);
}
.custom-settings-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  overflow: auto;
}
.custom-setting-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.custom-setting-field span {
  color: var(--text-faint);
  font: 800 9px/1 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.custom-setting-field select,
.custom-setting-field input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(2,6,14,0.38);
  color: var(--text);
  padding: 0 10px;
  font: 800 12px/1 var(--font-mono);
  outline: none;
}
.custom-setting-field select:focus,
.custom-setting-field input:focus {
  border-color: rgba(52,211,153,0.48);
  box-shadow: 0 0 0 3px rgba(52,211,153,0.08);
}
.custom-setting-check {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(2,6,14,0.28);
}
.custom-setting-check input {
  width: 18px;
  min-height: 18px;
}
.custom-settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 13px 16px 16px;
  border-top: 1px solid var(--border);
}
.custom-widget-lib-group {
  margin-bottom: 16px;
}
.custom-widget-lib-group:last-child { margin-bottom: 0; }
.custom-widget-lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.custom-widget-option {
  min-height: 72px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(2,6,14,0.24);
  color: var(--text);
  padding: 11px 12px;
  cursor: pointer;
}
.custom-widget-option:hover {
  border-color: rgba(52,211,153,0.42);
  background: rgba(52,211,153,0.07);
}
.custom-widget-option span {
  display: block;
  font: 800 11px/1.25 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.custom-widget-option em {
  display: block;
  margin-top: 7px;
  color: var(--text-dim);
  font: 700 10px/1.25 var(--font-mono);
  font-style: normal;
  letter-spacing: 0.04em;
}
@media (max-width: 1180px) {
  .custom-widget-card { grid-column: span 6; }
}
@media (max-width: 760px) {
  .custom-builder-bar {
    align-items: flex-start;
    flex-direction: column;
  }
  .custom-builder-actions {
    flex-wrap: wrap;
  }
  .custom-widget-card { grid-column: span 12; }
  .custom-widget-feed .feed-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .custom-widget-feed .fr-val { text-align: left; }
  .custom-widget-backdrop { padding: 70px 10px 18px; }
  .custom-settings-body { grid-template-columns: 1fr; }
  .custom-settings-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ============================================================= */
/* Custom Dashboard Builder — Phase 3                             */
/* ============================================================= */
.custom-preset-library {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  padding: 14px 16px 16px;
  overflow: auto;
}
.custom-preset-option {
  min-height: 108px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(2,6,14,0.24);
  color: var(--text);
  padding: 12px 13px;
  cursor: pointer;
}
.custom-preset-option:hover {
  border-color: rgba(52,211,153,0.42);
  background: rgba(52,211,153,0.07);
}
.custom-preset-option strong {
  display: block;
  font: 800 11px/1.25 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.custom-preset-option span {
  display: block;
  margin-top: 7px;
  color: var(--text-dim);
  font: 600 11px/1.35 var(--font-sans);
}
.custom-preset-option em {
  display: block;
  margin-top: 8px;
  color: var(--text-faint);
  font: 700 10px/1.2 var(--font-mono);
  font-style: normal;
}
.custom-advanced-module {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  flex: 1;
}
.custom-advanced-kpis .custom-stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
}
.custom-advanced-chart-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 10px;
  min-height: 0;
}
.custom-advanced-chart-wrap.ladder-only,
.custom-advanced-chart-wrap.depth-only {
  grid-template-columns: 1fr;
}
.custom-ob-depth-svg,
.custom-liq-heat-svg {
  width: 100%;
  height: auto;
  min-height: 150px;
  border: 1px solid rgba(148,163,184,0.14);
  border-radius: 8px;
  background: rgba(2,6,14,0.28);
}
.custom-ob-ladder.book-ladder-compact {
  max-height: calc(var(--custom-panel-h, 220px) - 150px);
  overflow: auto;
  border: 1px solid rgba(148,163,184,0.14);
  border-radius: 8px;
  background: rgba(2,6,14,0.22);
}
.custom-ob-ladder.book-ladder-compact .book-row {
  grid-template-columns: minmax(72px, 1fr) minmax(52px, .7fr) minmax(68px, .8fr);
  font-size: 10px;
}
.custom-advanced-feed {
  overflow: auto;
  max-height: calc(var(--custom-panel-h, 220px) - 180px);
}
.custom-liq-nearest {
  padding: 10px 11px;
  border: 1px solid rgba(148,163,184,0.16);
  border-radius: 9px;
  background: rgba(2,6,14,0.22);
}
.custom-liq-nearest .brief-label {
  color: var(--text-faint);
  font: 800 8.5px/1 var(--font-sans);
  letter-spacing: 0.14em;
}
.custom-liq-nearest .brief-title {
  margin-top: 6px;
  color: var(--text);
  font: 800 14px/1.1 var(--font-mono);
}
.custom-liq-nearest .brief-text {
  margin: 8px 0 0;
  color: var(--text-dim);
  font: 600 10px/1.35 var(--font-sans);
  white-space: pre-wrap;
}
.custom-widget-card[data-widget-id="hyper-orderbook-advanced"],
.custom-widget-card[data-widget-id="hyper-liquidations-advanced"] {
  min-height: max(var(--custom-panel-h, 220px), 320px);
}
@media (max-width: 900px) {
  .custom-advanced-chart-wrap { grid-template-columns: 1fr; }
}

/* ===== UX pack (2026-06-21) ===== */
#page-sub.is-redundant { display: none; }
.sidebar-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: calc(var(--z-sidebar-flyout) - 1);
}
html.vertical-layout .sidebar-scrim {
  top: var(--vertical-nav-offset, 58px);
  z-index: calc(var(--z-sidebar-flyout) + 1);
}
html.vertical-layout body.vertical-nav-open {
  overflow: hidden;
}
html.vertical-layout body.app.sidebar-collapsed .sidebar,
html.vertical-layout body.app.sidebar-collapsed.sidebar-flyout-open .sidebar {
  left: 0 !important;
  right: 0 !important;
  top: var(--vertical-nav-offset) !important;
  width: 100% !important;
  bottom: auto !important;
  height: auto !important;
}
/* Vertical nav overlay — flat selectors beat collapsed-rail padding/width resets */
html.vertical-layout {
  --vertical-nav-content-w: min(360px, calc(100vw - 32px));
}
html.vertical-layout body.vertical-nav-open .sidebar.open > *,
html.vertical-layout body.vertical-nav-open .sidebar.open .sidebar-nav {
  box-sizing: border-box;
  width: var(--vertical-nav-content-w) !important;
  max-width: var(--vertical-nav-content-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  flex-shrink: 0;
}
html.vertical-layout body.vertical-nav-open.app.sidebar-collapsed .sidebar.open .nav-item,
html.vertical-layout body.vertical-nav-open.app.sidebar-collapsed .sidebar.open .nav-group-header,
html.vertical-layout body.vertical-nav-open .sidebar.open .nav-item,
html.vertical-layout body.vertical-nav-open .sidebar.open .nav-group-header {
  width: 100% !important;
  justify-content: flex-start !important;
  padding: 8px 12px !important;
  padding-right: 12px !important;
  gap: 9px !important;
  min-height: 36px;
  box-sizing: border-box;
}
html.vertical-layout body.vertical-nav-open .sidebar.open .nav-group-items .nav-item {
  padding-right: 36px !important;
}
html.vertical-layout body.vertical-nav-open .sidebar.open {
  gap: 14px !important;
}
html.vertical-layout body.vertical-nav-open .sidebar.open .nav-search-wrap {
  margin-top: 2px;
}
html.vertical-layout body.vertical-nav-open .sidebar.open .persona-strip {
  padding: 12px 14px 14px !important;
  gap: 12px !important;
  margin-top: 2px;
}
html.vertical-layout body.vertical-nav-open .sidebar.open .persona-strip-head {
  margin-bottom: 2px;
  padding-bottom: 4px;
}
html.vertical-layout body.vertical-nav-open .sidebar.open .persona-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  grid-template-columns: unset;
}
html.vertical-layout body.vertical-nav-open .sidebar.open .persona-tab {
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 5px 11px !important;
  font-size: 9.5px !important;
  border-radius: 8px;
  flex: 0 0 auto;
}
html.vertical-layout body.vertical-nav-open .sidebar.open .persona-path-chips {
  margin-top: 4px;
  padding-top: 2px;
  gap: 7px;
}
html.vertical-layout body.vertical-nav-open .sidebar.open .persona-show-advanced {
  margin-top: 2px;
}
html.vertical-layout body.vertical-nav-open .sidebar.open .sidebar-nav {
  margin-top: 8px;
  padding-top: 2px;
}
html.vertical-layout body.vertical-nav-open .sidebar.open .nav-section-label {
  margin: 10px 0 6px;
  padding-top: 2px;
}
html.vertical-layout body.vertical-nav-open .sidebar.open .nav-section-label.nav-global-label {
  margin-top: 2px;
}
.ux-toast-host {
  position: fixed;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  max-width: min(520px, 92vw);
}
.ux-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--panel-2);
  box-shadow: var(--shadow);
}
.ux-toast-msg { font: 500 13px/1.4 'Inter'; color: var(--text); flex: 1; }
.ux-toast-action {
  border: 1px solid rgba(52,211,153,0.4);
  background: rgba(52,211,153,0.1);
  color: #6ee7b7;
  border-radius: 6px;
  padding: 5px 10px;
  font: 800 9px 'Inter';
  letter-spacing: 0.1em;
  cursor: pointer;
}
.ux-toast-close {
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
}
.related-route-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.related-chip {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 5px 12px;
  font: 800 9px 'Inter';
  letter-spacing: 0.12em;
  cursor: pointer;
}
.related-chip:hover { border-color: rgba(52,211,153,0.4); color: #a7f3d0; }
.feed-more-row { padding: 10px 0 4px; text-align: center; }
.feed-more-btn {
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-dim);
  border-radius: 6px;
  padding: 6px 12px;
  font: 700 10px 'Inter';
  letter-spacing: 0.08em;
  cursor: pointer;
}
.comp-stack-legend, .expanded-stress-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font: 600 10px 'Inter';
  color: var(--text-dim);
}
.cs-dot, .ec-dot.ec-amber { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.cs-dot.cs-hmm { background: #6366f1; }
.cs-dot.cs-ens { background: #8b5cf6; }
.cs-dot.cs-ms { background: #06b6d4; }
.cs-dot.cs-qual { background: #10b981; }
.cs-dot.cs-pers { background: #f59e0b; }
.ec-dot.ec-amber { background: #f59e0b; }
.tradfi-decision-matrix-grid {
  display: grid;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.tradfi-decision-hero-panel,
.portfolio-hero-panel,
.ranking-hero-panel,
.shadow-hero-panel,
.tradfi-credit-hero-panel,
.tradfi-breadth-hero-panel,
.tradfi-rotation-hero-panel,
.tradfi-drivers-hero-panel,
.tradfi-positioning-hero-panel,
.tradfi-flows-hero-panel,
.contagion-hero-panel,
.supervisor-hero-panel {
  margin-bottom: 16px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(52,211,153,0.05), rgba(15,23,42,0.4));
}
.tradfi-decision-hero-top,
.portfolio-hero-top,
.ranking-hero-top,
.shadow-hero-top,
.tradfi-breadth-hero-top,
.tradfi-rotation-hero-top,
.tradfi-drivers-hero-top,
.tradfi-positioning-hero-top,
.tradfi-flows-hero-top,
.contagion-hero-top,
.supervisor-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.tradfi-decision-hero-badge,
.portfolio-hero-badge,
.ranking-hero-badge,
.shadow-hero-badge,
.tradfi-breadth-hero-badge,
.tradfi-rotation-hero-badge,
.tradfi-drivers-hero-badge,
.tradfi-positioning-hero-badge,
.tradfi-flows-hero-badge,
.contagion-hero-badge,
.supervisor-hero-badge {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  font: 800 10px 'Inter';
  letter-spacing: 0.18em;
  border: 1px solid var(--border);
}
.tradfi-decision-hero-badge.tone-green, .portfolio-hero-badge.tone-green, .ranking-hero-badge.tone-green,
.tradfi-breadth-hero-badge.tone-green, .tradfi-rotation-hero-badge.tone-green, .tradfi-drivers-hero-badge.tone-green,
.tradfi-positioning-hero-badge.tone-green, .tradfi-flows-hero-badge.tone-green, .contagion-hero-badge.tone-green,
.supervisor-hero-badge.tone-green { border-color: rgba(16,185,129,0.45); color: #6ee7b7; background: rgba(16,185,129,0.08); }
.tradfi-decision-hero-badge.tone-red, .portfolio-hero-badge.tone-red, .ranking-hero-badge.tone-red,
.tradfi-breadth-hero-badge.tone-red, .tradfi-rotation-hero-badge.tone-red, .tradfi-drivers-hero-badge.tone-red,
.tradfi-positioning-hero-badge.tone-red, .tradfi-flows-hero-badge.tone-red, .contagion-hero-badge.tone-red,
.supervisor-hero-badge.tone-red { border-color: rgba(239,68,68,0.45); color: #fca5a5; background: rgba(239,68,68,0.08); }
.tradfi-decision-hero-badge.tone-slate, .portfolio-hero-badge.tone-slate, .ranking-hero-badge.tone-slate, .shadow-hero-badge,
.tradfi-breadth-hero-badge.tone-slate, .tradfi-rotation-hero-badge.tone-slate, .tradfi-drivers-hero-badge.tone-slate,
.tradfi-positioning-hero-badge.tone-slate, .tradfi-flows-hero-badge.tone-slate, .contagion-hero-badge.tone-slate { border-color: rgba(148,163,184,0.35); color: #cbd5e1; }
.tradfi-decision-hero-summary,
.portfolio-hero-summary,
.ranking-hero-summary,
.shadow-hero-summary,
.tradfi-credit-hero-summary,
.tradfi-breadth-hero-summary,
.tradfi-rotation-hero-summary,
.tradfi-drivers-hero-summary,
.tradfi-positioning-hero-summary,
.tradfi-flows-hero-summary,
.contagion-hero-summary,
.supervisor-hero-summary {
  margin: 0;
  font: 500 14px/1.45 'Inter';
  color: var(--text);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contagion-hero-panel .related-route-chips { margin-top: 14px; }
.tradfi-decision-hero-meta,
.portfolio-hero-meta,
.ranking-hero-meta,
.shadow-hero-meta,
.tradfi-breadth-hero-meta,
.tradfi-rotation-hero-meta,
.tradfi-drivers-hero-meta,
.tradfi-positioning-hero-meta,
.tradfi-flows-hero-meta,
.contagion-hero-meta,
.supervisor-hero-meta { font: 600 11px 'JetBrains Mono'; color: var(--text-faint); }

/* Contagion map */
.contagion-matrix-section { margin-bottom: 16px; }
.contagion-matrix-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.contagion-legend { display: flex; gap: 14px; font: 600 10px 'Inter'; color: var(--text-dim); }
.cg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.cg-dot.cg-green { background: #10b981; }
.cg-dot.cg-red { background: #ef4444; }
.contagion-map-grid {
  display: grid;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.contagion-map-cell {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 9px;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  cursor: default;
  transition: border-color 120ms ease;
}
.contagion-map-cell.tone-green { border-color: rgba(16,185,129,0.42); }
.contagion-map-cell.tone-red { border-color: rgba(239,68,68,0.42); }
.contagion-map-cell.tone-slate { border-color: rgba(100,116,139,0.35); }
.contagion-map-cell.is-diag, .contagion-map-cell.empty { opacity: 0.55; }
.cmc-val { font: 800 16px/1 'JetBrains Mono'; color: var(--text); }
.contagion-map-cell.tone-green .cmc-val { color: #6ee7b7; }
.contagion-map-cell.tone-red .cmc-val { color: #fca5a5; }
.cmc-label { font: 600 8px/1.2 'JetBrains Mono'; color: var(--text-faint); letter-spacing: 0.08em; }
.contagion-spark-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.contagion-spark-card {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(8,12,18,0.45);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.csc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.csc-label { font: 800 10px 'Inter'; letter-spacing: 0.14em; color: var(--text-dim); }
.csc-val { font: 700 11px 'JetBrains Mono'; }
.csc-spark { height: 28px; }
.csc-spark svg { width: 100%; height: 100%; display: block; }
.csc-meta { font: 600 9.5px 'JetBrains Mono'; color: var(--text-faint); }

/* Supervisor status board */
.supervisor-age-ring { flex-shrink: 0; }
.supervisor-age-svg { width: 44px; height: 44px; display: block; }
.supervisor-age-text { font: 700 8px 'JetBrains Mono'; fill: var(--text-dim); }
.supervisor-status-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.supervisor-status-card {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(8,12,18,0.45);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.supervisor-status-card.tone-green { border-color: rgba(16,185,129,0.32); }
.supervisor-status-card.tone-red { border-color: rgba(239,68,68,0.32); }
.ssc-label { font: 800 9px 'Inter'; letter-spacing: 0.14em; color: var(--text-faint); }
.ssc-value { font: 800 18px/1.1 'JetBrains Mono'; color: var(--text); }
.supervisor-status-card.tone-green .ssc-value { color: #6ee7b7; }
.supervisor-status-card.tone-red .ssc-value { color: #fca5a5; }
.ssc-detail { font: 500 10px/1.35 'Inter'; color: var(--text-dim); }

/* TradFi breadth ladder + group heat */
.breadth-ladder-panel { margin-bottom: 16px; }
.breadth-ladder { display: flex; flex-direction: column; gap: 12px; }
.breadth-ladder-rung {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(8,12,18,0.4);
}
.breadth-ladder-rung.tone-green { border-color: rgba(16,185,129,0.28); }
.breadth-ladder-rung.tone-red { border-color: rgba(239,68,68,0.28); }
.blr-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.blr-label { font: 800 10px 'Inter'; letter-spacing: 0.14em; color: var(--text-dim); }
.blr-val { font: 800 16px 'JetBrains Mono'; color: var(--text); }
.blr-track { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: hidden; }
.blr-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #64748b, #10b981); }
.breadth-ladder-rung.tone-red .blr-fill { background: linear-gradient(90deg, #64748b, #ef4444); }
.blr-detail { display: block; margin-top: 6px; font: 500 10px 'Inter'; color: var(--text-faint); }
.breadth-group-heat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.breadth-heat-cell {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(52,211,153,calc(var(--heat, 30%) * 0.004)), rgba(8,12,18,0.5));
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 64px;
}
.breadth-heat-cell.tone-red { background: linear-gradient(135deg, rgba(239,68,68,calc(var(--heat, 30%) * 0.005)), rgba(8,12,18,0.5)); border-color: rgba(239,68,68,0.25); }
.breadth-heat-cell.tone-green { border-color: rgba(16,185,129,0.25); }
.bhc-name { font: 700 11px 'Inter'; color: var(--text); }
.bhc-meta { font: 600 9px 'JetBrains Mono'; color: var(--text-faint); }

/* Rotation enlarged quadrants */
.rotation-quadrants-lg { gap: 12px; }
.rotation-quadrants-lg .rotation-quadrant { min-height: 180px; padding: 14px; }
.rotation-quadrants-lg .rotation-item { padding: 8px 0; font-size: 11px; }
.rotation-primary-panel { margin-bottom: 16px; }
.rotation-rank-grid .main-panel { padding: 22px 24px; }

/* Drivers waterfall polish */
.driver-waterfall-lg .driver-bar-row {
  grid-template-columns: 180px minmax(180px, 1fr) 64px;
  min-height: 48px;
}
.driver-waterfall-lg .driver-axis { height: 12px; }
.driver-waterfall-lg .driver-axis span { height: 10px; top: 1px; }
.driver-waterfall-panel { margin-bottom: 16px; }
.drivers-rank-grid .main-panel { padding: 22px 24px; }

/* Positioning heat grid */
.positioning-matrix-section { margin-bottom: 16px; }
.positioning-heat-grid {
  display: grid;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.positioning-heat-cell {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.positioning-heat-cell.tone-green { border-color: rgba(16,185,129,0.35); }
.positioning-heat-cell.tone-red { border-color: rgba(239,68,68,0.35); }
.phc-val { font: 800 14px/1 'JetBrains Mono'; color: var(--text); }
.positioning-heat-cell.tone-green .phc-val { color: #6ee7b7; }
.positioning-heat-cell.tone-red .phc-val { color: #fca5a5; }
.phc-label { font: 600 8px 'JetBrains Mono'; color: var(--text-faint); letter-spacing: 0.08em; }
.positioning-rank-grid .main-panel { padding: 22px 24px; }

/* Flows primary panel */
.flows-primary-panel { margin-bottom: 16px; padding: 22px 24px; }
.flows-primary-panel .forecast-rank-list { max-height: none; }

@media (max-width: 1100px) {
  .supervisor-status-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .supervisor-status-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contagion-spark-pair { grid-template-columns: 1fr; }
  .contagion-map-grid { overflow-x: auto; }
  .positioning-heat-grid { overflow-x: auto; }
}
.portfolio-warning-list { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; }
.portfolio-warn-card {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: 500 11px/1.4 'Inter';
  color: var(--text-dim);
}
.portfolio-warn-card strong { color: var(--text); font-size: 12px; }
.portfolio-warn-card.tone-red { border-color: rgba(239,68,68,0.32); background: rgba(239,68,68,0.05); }
.portfolio-warn-card.tone-green { border-color: rgba(16,185,129,0.28); }
.portfolio-warn-k { font: 800 9px 'Inter'; letter-spacing: 0.12em; color: var(--text-faint); }
.portfolio-primary-grid .main-panel,
.ranking-primary-grid .main-panel,
.tradfi-decision-side-grid .main-panel { padding: 22px 24px; }
.confidence-matrix-grid,
.expanded-matrix-grid,
.tradfi-decision-matrix-grid {
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 720px) {
  .confidence-matrix-grid,
  .expanded-matrix-grid,
  .tradfi-decision-matrix-grid,
  .decision-matrix-grid {
    overflow-x: auto;
    padding-bottom: 10px;
  }
}

/* ===== World-class UX pack (2026-06-23) ===== */
body.density-comfortable .view { padding-top: 22px; }
body.density-comfortable .main-panel,
body.density-comfortable .matrix-section { padding: 20px 22px; }
body.density-comfortable .cell { min-height: 78px; padding: 10px 10px; }
body:not(.density-compact):not(.density-dense) .view { padding-top: 22px; }

.section-header h2 {
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}
.nav-tier-label {
  font: 700 10px/1 'Inter', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 14px 8px 6px;
  opacity: 0.85;
}
.nav-group-title { text-transform: none; letter-spacing: 0.04em; }

.topbar-macro-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  margin-right: auto;
  margin-left: 12px;
  font: 600 11px/1 'Inter', sans-serif;
}
.topbar-macro-label { color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.1em; font-size: 9px; }
.topbar-macro-value { color: var(--text); font-weight: 800; }
.topbar-macro-value.risk_on, .topbar-macro-value.risk-on { color: #6ee7b7; }
.topbar-macro-value.risk_off, .topbar-macro-value.risk-off { color: #fca5a5; }
.topbar-macro-liq { color: var(--text-dim); font-size: 10px; }

.morning-brief-panel {
  margin: 0;
  padding: 20px 22px;
  border: 1px solid rgba(52,211,153,0.22);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(13,15,21,0.4));
  transition: padding 180ms ease, border-color 180ms ease;
}
.morning-brief-panel.is-collapsed {
  padding: 12px 16px;
  border-color: rgba(52,211,153,0.14);
}
.morning-brief-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.morning-brief-panel.is-collapsed .morning-brief-shell {
  gap: 0;
}
.morning-brief-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.morning-brief-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}
.morning-brief-collapse-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: 2px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
.morning-brief-collapse-btn:hover {
  border-color: rgba(52,211,153,0.45);
  background: rgba(52,211,153,0.08);
  color: var(--accent);
}
.morning-brief-collapse-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.morning-brief-chevron {
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transform: translateY(1px);
  transition: transform 180ms ease;
}
.morning-brief-panel.is-collapsed .morning-brief-chevron {
  transform: rotate(-90deg) translateX(1px);
}
.morning-brief-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  transition: max-height 220ms ease, opacity 180ms ease;
  max-height: 1200px;
  opacity: 1;
}
.morning-brief-panel.is-collapsed .morning-brief-body {
  max-height: 0;
  opacity: 0;
  gap: 0;
  pointer-events: none;
}
.morning-brief-panel.is-collapsed .morning-brief-posture {
  font-size: 15px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.morning-brief-title { font: 800 13px/1.2 'Inter'; letter-spacing: 0.06em; color: var(--accent); text-transform: uppercase; }
.morning-brief-posture { font: 800 22px/1.15 'Inter'; color: var(--text); }
.morning-brief-posture.tone-green { color: #6ee7b7; }
.morning-brief-posture.tone-red { color: #fca5a5; }
.morning-brief-lines { display: flex; flex-direction: column; gap: 8px; max-width: 72ch; }
.morning-brief-line { font: 500 13px/1.55 'Inter'; color: var(--text-dim); }
.morning-brief-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.morning-brief-chip {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
}
.morning-brief-chip .mbc-title { font: 700 10px/1 'Inter'; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.morning-brief-chip .mbc-value { font: 800 14px/1.2 'Inter'; color: var(--text); }
.morning-brief-chip.tone-red .mbc-value { color: #fca5a5; }
.morning-brief-chip.tone-green .mbc-value { color: #6ee7b7; }

.market-pillars-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 0;
}
.pillar-card {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
}
.pillar-card .pc-label { font: 700 10px/1 'Inter'; color: var(--text-faint); margin-bottom: 4px; }
.pillar-card .pc-state { font: 800 13px/1.2 'Inter'; color: var(--text); }
.pillar-card .pc-detail { font: 500 10px/1.35 'Inter'; color: var(--text-faint); margin-top: 4px; }
.pillar-card.tone-green { border-color: rgba(16,185,129,0.28); }
.pillar-card.tone-red { border-color: rgba(239,68,68,0.28); }
.pillar-card.tone-green .pc-state { color: #6ee7b7; }
.pillar-card.tone-red .pc-state { color: #fca5a5; }

.challenger-command-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
.challenger-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(239,68,68,0.35);
  background: rgba(239,68,68,0.08);
  font: 600 11px/1 'Inter';
  color: #fecaca;
  cursor: pointer;
}
.challenger-pill.ok {
  border-color: rgba(16,185,129,0.28);
  background: rgba(16,185,129,0.06);
  color: #a7f3d0;
}

.forecast-tri-bar-panel { margin: 0; }
.forecast-tri-bar {
  display: flex;
  height: 30px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.forecast-tri-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}
.forecast-tri-seg.stay { background: #10b981; }
.forecast-tri-seg.flip { background: #f59e0b; }
.forecast-tri-seg.break { background: #ef4444; }
.forecast-tri-label {
  font: 700 11px/1 'Inter';
  color: #fff;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  padding: 0 8px;
}

.regime-card {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.regime-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.regime-card .rc-state { font: 800 28px/1.1 'Inter'; color: var(--text); }
.regime-card.tone-bull .rc-state, .regime-card.tone-green .rc-state { color: #6ee7b7; }
.regime-card.tone-bear .rc-state, .regime-card.tone-red .rc-state { color: #fca5a5; }
.regime-card .rc-meta { font: 600 11px/1.4 'Inter'; color: var(--text-dim); }
.regime-card .rc-action { font: 700 12px/1 'Inter'; color: var(--accent); }
.regime-card .rc-why { font: 500 12px/1.5 'Inter'; color: var(--text-faint); max-width: 42ch; }
.regime-card .rc-spark { display: flex; gap: 2px; height: 10px; align-items: flex-end; }
.regime-card .rc-spark i { flex: 1; border-radius: 2px; min-width: 3px; }

.decision-sizer-hint {
  padding: 12px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  font: 600 12px/1.5 'Inter';
  color: var(--text-dim);
}
.decision-sizer-hint strong { color: var(--text); }

.hero-value { font-size: 30px; }
.readable-prose, .brief-prose, .playbook-prose, .supervisor-prose {
  max-width: 72ch;
  line-height: 1.6;
  font-size: var(--text-md);
}

/* Semantic KPI tones — separate from regime colors */
.kpi-card.tone-green .kpi-value { color: var(--text); }
.kpi-card.tone-red .kpi-value { color: var(--text); }
.kpi-card.tone-green .kpi-value::before { content: "▲ "; color: #6ee7b7; font-size: 10px; }
.kpi-card.tone-red .kpi-value::before { content: "▼ "; color: #fca5a5; font-size: 10px; }

@media (max-width: 900px) {
  .topbar-macro-pill { display: none; }
  .market-pillars-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Contributions page (crypto CONTRIB) ===== */
.view-contrib .contrib-kpi-strip {
  margin-bottom: 16px;
}
.contrib-summary-band {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px 18px;
  border: 1px solid rgba(52, 211, 153, 0.22);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.07), rgba(13, 15, 21, 0.45));
}
.contrib-summary-band[hidden] { display: none; }
.contrib-summary-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 800 16px/1 'Inter';
  color: #6ee7b7;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.28);
  flex-shrink: 0;
}
.contrib-summary-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.contrib-summary-title {
  font: 800 11px/1 'Inter';
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.contrib-summary-text {
  font: 500 13px/1.5 'Inter';
  color: var(--text-dim);
  max-width: 72ch;
}
.contrib-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
  gap: 16px;
  align-items: start;
}
.contrib-panel {
  padding: 20px 22px 18px;
  min-height: 0;
}
.contrib-section-head {
  align-items: flex-start;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.contrib-section-head h2 { margin: 0 0 4px; }
.contrib-panel-badge {
  font: 700 10px/1 'JetBrains Mono';
  letter-spacing: 0.1em;
  color: var(--text-faint);
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
}
.contrib-load-chart {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0 8px;
}
.contrib-load-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contrib-load-section-gated {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.contrib-load-section-label {
  font: 800 9px/1 'Inter';
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.contrib-load-section-sub {
  font: 500 9px/1 'Inter';
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-faint);
}
.contrib-gated-row {
  padding: 10px 12px;
  border: 1px dashed rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.015);
}
.contrib-gated-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.contrib-gated-badge {
  font: 800 8px/1 'Inter';
  letter-spacing: 0.12em;
  color: #94a3b8;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(148, 163, 184, 0.08);
}
.contrib-gated-val {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-faint);
}
.contrib-gated-reason {
  margin: 0 0 6px;
  font: 500 11px/1.45 'Inter';
  color: var(--text-dim);
}
.contrib-gated-cells {
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
}
.contrib-gated-empty,
.contrib-load-row.is-gated .contrib-load-track {
  opacity: 0.55;
}
.contrib-load-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 64px;
  gap: 12px;
  align-items: center;
}
.contrib-load-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.contrib-load-pct {
  font: 600 9px/1 'JetBrains Mono';
  color: var(--text-faint);
  letter-spacing: 0.06em;
}
.contrib-load-track {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.contrib-load-track > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  min-width: 4px;
  transition: width 220ms ease;
}
.contrib-load-val {
  text-align: right;
  font: 700 12px/1 'JetBrains Mono';
  color: var(--text);
}
.contrib-load-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font: 600 9px/1 'Inter';
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.contrib-load-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.contrib-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.contrib-layer-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 8px;
  border-radius: 6px;
  font: 800 9px/1 'Inter';
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.layer-hmm, .contrib-swatch.layer-hmm, .contrib-load-track .layer-hmm { background: rgba(52, 211, 153, 0.82); color: #042f2e; border-color: rgba(52, 211, 153, 0.45); }
.layer-ensemble, .contrib-swatch.layer-ensemble, .contrib-load-track .layer-ensemble { background: rgba(96, 165, 250, 0.82); color: #0c1a3d; border-color: rgba(96, 165, 250, 0.45); }
.layer-ms, .contrib-swatch.layer-ms, .contrib-load-track .layer-ms { background: rgba(167, 139, 250, 0.82); color: #1e1033; border-color: rgba(167, 139, 250, 0.45); }
.layer-market, .contrib-swatch.layer-market, .contrib-load-track .layer-market { background: rgba(251, 191, 36, 0.82); color: #3b2504; border-color: rgba(251, 191, 36, 0.45); }
.layer-stress, .contrib-swatch.layer-stress, .contrib-load-track .layer-stress { background: rgba(248, 113, 113, 0.82); color: #3f0b0b; border-color: rgba(248, 113, 113, 0.45); }
.layer-crowding, .contrib-swatch.layer-crowding, .contrib-load-track .layer-crowding { background: rgba(251, 146, 60, 0.82); color: #3b1a05; border-color: rgba(251, 146, 60, 0.45); }
.contrib-layer-chip.layer-hmm { background: rgba(52, 211, 153, 0.14); color: #6ee7b7; }
.contrib-layer-chip.layer-ensemble { background: rgba(96, 165, 250, 0.14); color: #93c5fd; }
.contrib-layer-chip.layer-ms { background: rgba(167, 139, 250, 0.14); color: #c4b5fd; }
.contrib-layer-chip.layer-market { background: rgba(251, 191, 36, 0.14); color: #fcd34d; }
.contrib-layer-chip.layer-stress { background: rgba(248, 113, 113, 0.14); color: #fca5a5; }
.contrib-layer-chip.layer-crowding { background: rgba(251, 146, 60, 0.14); color: #fdba74; }
.contrib-cell-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: 8px;
  align-content: start;
}
.contrib-cell-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 2px;
  font: 700 9px/1 'Inter';
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.contrib-cell-divider::before,
.contrib-cell-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
.contrib-cell-divider span {
  flex-shrink: 0;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
}
.contrib-cell-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 11px;
  min-height: 108px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01));
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  cursor: pointer;
}
.contrib-cell-card:hover,
.contrib-cell-card:focus-visible {
  border-color: rgba(52, 211, 153, 0.45);
  background: rgba(52, 211, 153, 0.05);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  outline: none;
}
.contrib-cell-card.tone-green { border-top: 2px solid rgba(52, 211, 153, 0.65); }
.contrib-cell-card.tone-red { border-top: 2px solid rgba(248, 113, 113, 0.65); }
.contrib-cell-card.tone-slate { border-top: 2px solid rgba(148, 163, 184, 0.45); }
.contrib-cell-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}
.contrib-cell-id {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex-wrap: wrap;
}
.contrib-asset {
  font: 800 12px/1 'Inter';
  letter-spacing: 0.06em;
  color: var(--text);
}
.contrib-tf {
  font: 700 9px/1 'JetBrains Mono';
  color: var(--text-dim);
  padding: 2px 5px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}
.contrib-action-pill {
  align-self: flex-start;
  font: 800 8px/1 'Inter';
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.contrib-action-pill.action-long_bias,
.contrib-action-pill.action-selective_long { color: #6ee7b7; background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.35); }
.contrib-action-pill.action-reduce_risk,
.contrib-action-pill.action-defensive { color: #fca5a5; background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.35); }
.contrib-action-pill.action-wait { color: #cbd5e1; background: rgba(148, 163, 184, 0.1); border-color: rgba(148, 163, 184, 0.3); }
.contrib-score {
  font: 800 13px/1 'JetBrains Mono';
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.contrib-cell-driver-compact {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.contrib-cell-driver-compact .contrib-layer-chip {
  padding: 2px 6px;
  font-size: 8px;
}
.contrib-driver-detail {
  font: 600 10px/1.2 'JetBrains Mono';
  color: var(--text-dim);
}
.contrib-mini-stack {
  display: flex;
  height: 6px;
  margin-top: auto;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.contrib-mini-seg {
  height: 100%;
  min-width: 2px;
  opacity: 0.9;
}
.contrib-mini-seg.layer-hmm { background: rgba(52, 211, 153, 0.78); }
.contrib-mini-seg.layer-ensemble { background: rgba(96, 165, 250, 0.78); }
.contrib-mini-seg.layer-ms { background: rgba(167, 139, 250, 0.78); }
.contrib-mini-seg.layer-market { background: rgba(251, 191, 36, 0.78); }
.contrib-mini-seg.layer-stress { background: rgba(248, 113, 113, 0.78); }
.contrib-mini-seg.layer-crowding { background: rgba(251, 146, 60, 0.78); }
@media (max-width: 1100px) {
  .contrib-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .contrib-cell-list { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
}

.contrib-modal { max-width: 760px; }
.contrib-modal-verdict {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(13, 15, 21, 0.45));
}
.contrib-modal-verdict.tone-green { border-color: rgba(52, 211, 153, 0.35); }
.contrib-modal-verdict.tone-red { border-color: rgba(248, 113, 113, 0.35); }
.contrib-modal-verdict-kicker {
  display: block;
  margin-bottom: 6px;
  font: 700 9px/1 'Inter';
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.contrib-modal-verdict-title {
  display: block;
  margin-bottom: 6px;
  font: 800 18px/1.2 'Inter';
  color: var(--text);
}
.contrib-modal-verdict-text {
  margin: 0;
  font: 500 13px/1.55 'Inter';
  color: var(--text-dim);
  max-width: 52ch;
}
.contrib-modal-verdict-score {
  font: 800 28px/1 'JetBrains Mono';
  flex-shrink: 0;
}
.contrib-modal-metrics {
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.contrib-modal-note {
  margin: 0 0 10px;
  font: 500 12px/1.45 'Inter';
  color: var(--text-faint);
}
.contrib-gate-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contrib-gate-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}
.contrib-gate-row.is-pass { border-color: rgba(52, 211, 153, 0.28); }
.contrib-gate-row.is-fail { border-color: rgba(148, 163, 184, 0.22); }
.contrib-gate-icon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 800 10px/1 'Inter';
}
.contrib-gate-row.is-pass .contrib-gate-icon { color: #6ee7b7; background: rgba(52, 211, 153, 0.14); }
.contrib-gate-row.is-fail .contrib-gate-icon { color: #94a3b8; background: rgba(148, 163, 184, 0.12); }
.contrib-gate-label { font: 600 12px/1.35 'Inter'; color: var(--text); }
.contrib-gate-value { font: 700 11px/1 'JetBrains Mono'; color: var(--text-dim); }
.contrib-modal-waterfall { margin-top: 4px; }
.contrib-modal-bar-row { min-height: 34px; }
.contrib-input-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contrib-input-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 72px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}
.contrib-input-label {
  font: 700 10px/1 'Inter';
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.contrib-input-formula { color: var(--text-faint); font-size: 10px; }
.contrib-input-value { text-align: right; font-weight: 700; }

/* ===== World-Class UX pass (2026-06-25) ===== */
.why-spine-tabs {
  display: flex;
  gap: 6px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.why-spine-tabs button {
  font: 700 11px/1 'Inter';
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 160ms, color 160ms, border-color 160ms;
}
.why-spine-tabs button.active,
.why-spine-tabs button[aria-selected="true"] {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.35);
  color: var(--accent);
}
.hero-action-line,
.if-trade-panel,
.decision-timeline-panel {
  margin-bottom: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel);
  padding: 12px 16px;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.if-trade-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.if-trade-kicker { font: 700 10px/1 'Inter'; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); width: 100%; }
.if-trade-main { font-size: var(--text-md); }
.if-trade-meta { color: var(--text-dim); }
.if-trade-link {
  font: 600 11px/1 'Inter';
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--accent);
  cursor: pointer;
}
.overview-spillover-banner[hidden] {
  display: none !important;
}
.overview-spillover-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(251, 191, 36, 0.25);
  background: rgba(251, 191, 36, 0.08);
  color: #fcd34d;
  font-size: var(--text-sm);
}
.gated-badge {
  display: inline-block;
  font: 700 9px/1 'Inter';
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  margin-left: 4px;
  vertical-align: middle;
}
.ctx-help-chip {
  margin-left: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text-dim);
  font: 700 11px/1 'Inter';
  cursor: pointer;
  flex-shrink: 0;
}
.section-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.topbar-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  flex-shrink: 0;
}
.topbar-lang-pill {
  min-width: 34px;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font: 700 11px/1 'JetBrains Mono';
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.topbar-lang-pill:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.topbar-lang-pill.active {
  color: var(--accent);
  background: rgba(52,211,153,0.14);
  box-shadow: inset 0 0 0 1px rgba(52,211,153,0.28);
}
.topbar-overflow-wrap { position: relative; display: flex; }
.topbar-overflow-trigger .btn-icon {
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
}
.topbar-overflow-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--panel-2);
  box-shadow: var(--shadow);
  z-index: var(--z-popover);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.topbar-overflow-popover[hidden] { display: none !important; }
.topbar-overflow-popover button {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.topbar-overflow-popover button:hover { background: rgba(255,255,255,0.05); }
.overflow-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
}
.overflow-item-label {
  font: 500 13px/1.35 'Inter';
  letter-spacing: 0.01em;
  color: var(--text);
}
/* Pin + notifications were only reachable through the removed ⋯ menu, so they
   are direct icon buttons in the topbar row again. */
.topbar-aux { display: inline-flex !important; }
.persona-lang-btn { display: none !important; }
.crypto-action-rail { min-width: 0; }
.crypto-action-tabs { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.crypto-action-tabs button {
  font: 700 10px/1 'Inter';
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.crypto-action-tabs button.active { background: rgba(52,211,153,0.12); color: var(--accent); border-color: rgba(52,211,153,0.3); }
.timeline-track { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0; }
.timeline-node {
  flex: 0 0 auto;
  min-width: 100px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.timeline-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-bottom: 6px;
  background: var(--chop);
}
.timeline-node.tone-bull .timeline-dot { background: var(--bull); }
.timeline-node.tone-bear .timeline-dot { background: var(--bear); }
.timeline-kicker { font: 700 10px/1 'Inter'; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.timeline-sub { font-size: 10px; color: var(--text-faint); margin-left: 8px; }
.timeline-label { display: block; font-weight: 600; font-size: 12px; }
.timeline-ts { font-size: 10px; color: var(--text-faint); }
.custom-preset-quick-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.custom-preset-quick-btn {
  font: 700 11px/1 'Inter';
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(52,211,153,0.08);
  color: var(--accent);
  cursor: pointer;
}
.cell-flash { animation: cellFlash 400ms ease-out; }
@keyframes cellFlash {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
  100% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
}
.score-delta {
  position: absolute;
  top: 4px;
  right: 4px;
  font: 700 9px/1 'JetBrains Mono';
  padding: 2px 4px;
  border-radius: 4px;
  pointer-events: none;
  animation: deltaFade 3s ease forwards;
}
.score-delta.up { color: var(--bull); background: rgba(16,185,129,0.15); }
.score-delta.down { color: var(--bear); background: rgba(239,68,68,0.15); }
@keyframes deltaFade {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}
.decision-cell, .cell { position: relative; }
body[data-regime="bull"] .view.active .hero-card:not(.tone-bear):not(.tone-red),
body[data-regime="bull"] .view.active .intel-banner.tone-bull { --view-accent: var(--bull); }
body[data-regime="bear"] .view.active .hero-card:not(.tone-green),
body[data-regime="bear"] .view.active .intel-banner.tone-bear { --view-accent: var(--bear); }
.matrix-grid.matrix-heatmap .cell { padding: 6px 8px; min-height: 44px; }
.matrix-grid.matrix-heatmap .proba-bar,
.matrix-grid.matrix-heatmap .cell-asof-row,
.matrix-grid.matrix-heatmap .cell-bocpd { display: none; }
.matrix-grid.matrix-focus .cell:not(.focus-visible) { opacity: 0.35; }
.nav-legacy-redirect { display: none !important; }
.sidebar-server-uptime { font-size: 10px; color: var(--text-faint); }
.why-spine-panel:not(.active)[hidden] { display: none !important; }
body.plain-english .dc-label,
body.plain-english .contrib-action-pill,
body.plain-english .regime-chip { text-transform: none; letter-spacing: 0.02em; }
.gated-hint { color: var(--text-faint); font-size: 10px; }
.matrix-grid .heatmap-value { font-size: 11px; color: var(--text-dim); }
.main-intelligence-grid { grid-template-columns: 1fr 1fr minmax(220px, 0.85fr); }

/* Morning brief pinned to top of command views */
#view-overview,
#view-decision,
#view-tradfi,
#view-tradfi-decision {
  display: flex;
  flex-direction: column;
}
#view-overview .morning-brief-panel,
#view-decision .morning-brief-panel,
#view-tradfi .morning-brief-panel,
#view-tradfi-decision .morning-brief-panel {
  order: -10;
}
#view-tradfi .tradfi-tab-panel[data-tradfi-panel="overview"] {
  display: flex;
  flex-direction: column;
}
#view-tradfi .tradfi-tab-panel[data-tradfi-panel="overview"] > .market-pillars-strip,
#view-tradfi .tradfi-tab-panel[data-tradfi-panel="overview"] > .forecast-tri-bar-panel {
  order: -9;
}
.morning-brief-panel:empty {
  display: none;
}
#view-main .crypto-tab-panel[data-crypto-panel="overview"] {
  display: flex;
  flex-direction: column;
}
#view-main .crypto-tab-panel[data-crypto-panel="overview"] .morning-brief-panel {
  order: -10;
}

/* Lazy-mounted views */
.view-lazy .view-lazy-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 280px;
  padding: 48px 24px;
  color: var(--text-dim);
  font: 600 13px/1.4 'Inter';
}
.view-lazy-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: viewLazySpin 0.8s linear infinite;
}
@keyframes viewLazySpin {
  to { transform: rotate(360deg); }
}
.crypto-nav-group { flex-direction: column; }

@media (max-width: 1200px) {
  .main-intelligence-grid { grid-template-columns: 1fr 1fr; }
  .crypto-action-rail { grid-column: 1 / -1; }
}

/* ===== Product UX overhaul (2026-06-27) ===== */
.persona-strip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 8px;
  margin: 0 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.persona-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.persona-strip-label {
  font: 700 10px/1 'Inter';
  letter-spacing: 0.1em;
  color: var(--text-faint);
}
.persona-lang-btn {
  font: 700 10px/1 'JetBrains Mono';
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.persona-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.persona-tab {
  font: 600 10px/1.2 'Inter';
  padding: 7px 4px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.persona-tab.active {
  background: rgba(52,211,153,0.12);
  border-color: rgba(52,211,153,0.35);
  color: var(--accent);
}
.persona-path-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.persona-path-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 11px/1 'Inter';
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  color: var(--text-dim);
  cursor: pointer;
}
.persona-path-chip.active {
  border-color: rgba(52,211,153,0.4);
  color: var(--accent);
  background: rgba(52,211,153,0.08);
}
.persona-path-idx {
  font: 700 9px/1 'JetBrains Mono';
  opacity: 0.7;
}
.persona-show-advanced {
  font: 600 10px/1 'Inter';
  padding: 0;
  border: none;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  text-align: left;
}
.persona-show-advanced:hover { color: var(--accent); }
.persona-path-hint { font-size: 11px; color: var(--text-faint); }
body:not(.nav-advanced-visible) .nav-group.persona-hidden { display: none !important; }

.topbar-workspace-btn { display: inline-flex !important; }
.topbar-workspace-label { font: 700 10px/1 'Inter'; letter-spacing: 0.06em; }
body.topbar-simplified .status-bar { gap: 8px; }
body.topbar-simplified .topbar-macro-pill { display: none; }

/* ── Topbar control system: unified height, pill radius, rhythm ── */
.topbar .status-bar {
  --topbar-control-h: 34px;
  --topbar-control-radius: 999px;
  --topbar-control-pad-x: 13px;
  --topbar-segment-pad: 2px;
  --topbar-inner-h: calc(var(--topbar-control-h) - (var(--topbar-segment-pad) * 2) - 2px);
  align-items: center;
  gap: 8px;
}
.topbar .status-bar > .btn,
.topbar .status-bar .topbar-overflow-trigger {
  box-sizing: border-box;
  height: var(--topbar-control-h);
  min-height: var(--topbar-control-h);
  padding: 0 var(--topbar-control-pad-x);
  border-radius: var(--topbar-control-radius);
  font: 600 10px/1 'Inter', sans-serif;
  letter-spacing: 0.12em;
  justify-content: center;
  white-space: nowrap;
}
.topbar .status-bar > .btn .btn-icon,
.topbar .status-bar .topbar-overflow-trigger .btn-icon {
  font-size: 14px;
  line-height: 1;
}
.topbar .status-bar > .btn.icon-only,
.topbar .status-bar .topbar-overflow-trigger {
  width: var(--topbar-control-h);
  min-width: var(--topbar-control-h);
  padding: 0;
  gap: 0;
}
.topbar .status-bar .topbar-workspace-label,
.topbar .status-bar .topbar-refresh-label {
  font: inherit;
  letter-spacing: inherit;
}
.topbar .status-bar .mode-switch {
  box-sizing: border-box;
  height: var(--topbar-control-h);
  padding: var(--topbar-segment-pad);
  gap: 2px;
  border-radius: var(--topbar-control-radius);
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.03);
}
.topbar .status-bar .mode-btn {
  height: var(--topbar-inner-h);
  padding: 0 12px;
  border-radius: var(--topbar-control-radius);
  font: 700 10px/1 'Inter', sans-serif;
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.topbar .status-bar .topbar-lang-switch {
  box-sizing: border-box;
  height: var(--topbar-control-h);
  padding: var(--topbar-segment-pad);
  gap: 2px;
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.03);
}
.topbar .status-bar .topbar-lang-pill {
  height: var(--topbar-inner-h);
  min-width: 36px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.topbar .status-bar .topbar-overflow-wrap {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.topbar .status-bar .asset-focus-control {
  box-sizing: border-box;
  height: var(--topbar-control-h);
  border-radius: var(--topbar-control-radius);
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.03);
  align-items: stretch;
}
.topbar .status-bar .topbar-asset-cluster .asset-picker-btn,
.topbar .status-bar .topbar-asset-cluster .asset-reset-btn,
.topbar .status-bar .asset-focus-control .asset-picker-btn,
.topbar .status-bar .asset-focus-control .asset-reset-btn {
  height: var(--topbar-control-h);
  font: 600 10px/1 'Inter', sans-serif;
  letter-spacing: 0.1em;
}
.topbar .status-bar .asset-focus-control .asset-picker-btn {
  padding: 0 12px;
  max-width: 128px;
}
.topbar .status-bar .asset-focus-control .asset-reset-btn {
  min-width: var(--topbar-control-h);
  width: var(--topbar-control-h);
}

@media (max-width: 1100px) {
  .topbar-workspace-label { display: none; }
  .topbar .status-bar > .btn.topbar-workspace-btn {
    width: var(--topbar-control-h);
    min-width: var(--topbar-control-h);
    padding: 0;
  }
}

/* ── Sidebar control system: unified height, radius, rhythm (crypto + tradfi) ── */
.sidebar {
  --sidebar-control-h: 36px;
  --sidebar-control-radius: 10px;
  --sidebar-control-gap: 6px;
  --sidebar-control-pad-x: 12px;
  --sidebar-section-gap: 12px;
  gap: var(--sidebar-section-gap);
  padding: 16px 10px 14px;
}
.sidebar .nav-search-wrap { width: 100%; }
.sidebar .nav-search {
  box-sizing: border-box;
  height: var(--sidebar-control-h);
  padding: 0 40px 0 30px;
  border-radius: var(--sidebar-control-radius);
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.03);
  font: 500 11px/1 'Inter', sans-serif;
  letter-spacing: 0.01em;
}
.sidebar .nav-search:focus {
  border-color: rgba(52, 211, 153, 0.45);
  background: rgba(52, 211, 153, 0.04);
}
.sidebar .nav-kbd {
  right: 10px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 9px;
}
.sidebar .nav-favorites {
  gap: var(--sidebar-control-gap);
  padding: 0;
}
.sidebar .favorite-chip {
  box-sizing: border-box;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--sidebar-control-radius);
  font: 600 9.5px/1 'Inter', sans-serif;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
}
.sidebar .persona-strip {
  margin: 0;
  padding: 10px;
  gap: var(--sidebar-control-gap);
  border-radius: var(--sidebar-control-radius);
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.03);
}
.sidebar .persona-strip-label {
  font: 700 9px/1 'Inter', sans-serif;
  letter-spacing: 0.14em;
}
.sidebar .persona-tabs {
  gap: var(--sidebar-control-gap);
}
.sidebar .persona-tab {
  box-sizing: border-box;
  height: var(--sidebar-control-h);
  min-height: var(--sidebar-control-h);
  padding: 0 6px;
  border-radius: var(--sidebar-control-radius);
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.02);
  font: 600 10px/1 'Inter', sans-serif;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.sidebar .persona-tab:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.04);
}
.sidebar .persona-tab.active {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.35);
  color: #d1fae5;
}
.sidebar .persona-path-chips { gap: var(--sidebar-control-gap); }
.sidebar .persona-path-chip {
  box-sizing: border-box;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--sidebar-control-radius);
  font: 600 10px/1 'Inter', sans-serif;
  letter-spacing: 0.02em;
}
.sidebar .persona-show-advanced {
  box-sizing: border-box;
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  font: 600 10px/1 'Inter', sans-serif;
}
.sidebar .sidebar-nav {
  gap: var(--sidebar-control-gap);
}
.sidebar .nav-section-label {
  padding: 10px var(--sidebar-control-pad-x) 2px;
  margin-top: 2px;
  font: 700 9px/1 'Inter', sans-serif;
  letter-spacing: 0.16em;
  opacity: 0.9;
}
.sidebar .nav-section-label.nav-global-label {
  margin-top: 0;
  padding-top: 2px;
}
.sidebar .nav-item {
  box-sizing: border-box;
  width: 100%;
  height: var(--sidebar-control-h);
  min-height: var(--sidebar-control-h);
  padding: 0 var(--sidebar-control-pad-x);
  padding-right: 52px;
  border-radius: var(--sidebar-control-radius);
  border: 1px solid transparent;
  font: 600 10.5px/1 'Inter', sans-serif;
  letter-spacing: 0.07em;
  gap: 10px;
}
.sidebar .nav-item .nav-icon {
  font-size: 14px;
  width: 16px;
}
.sidebar .nav-item.nav-command {
  margin-bottom: 0;
  border-color: rgba(52, 211, 153, 0.16);
  background: rgba(52, 211, 153, 0.05);
}
.sidebar .nav-item.nav-overview,
.sidebar .nav-item.nav-custom {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.sidebar .nav-item:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--border-strong);
}
.sidebar .nav-item.active {
  background: linear-gradient(90deg, rgba(52, 211, 153, 0.16), rgba(52, 211, 153, 0.04));
  border-color: rgba(52, 211, 153, 0.38);
  box-shadow: inset 3px 0 0 var(--accent);
}
.sidebar .nav-group {
  gap: var(--sidebar-control-gap);
}
.sidebar .nav-group-header {
  box-sizing: border-box;
  height: var(--sidebar-control-h);
  min-height: var(--sidebar-control-h);
  padding: 0 var(--sidebar-control-pad-x);
  border-radius: var(--sidebar-control-radius);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  font: 700 10px/1 'Inter', sans-serif;
  letter-spacing: 0.09em;
  color: var(--text-dim);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.sidebar .nav-group-header:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.04);
}
.sidebar .nav-group.open > .nav-group-header {
  color: var(--text);
  border-color: rgba(52, 211, 153, 0.28);
  background: rgba(52, 211, 153, 0.06);
}
.sidebar .nav-group-chevron {
  font-size: 10px;
  opacity: 0.75;
}
.sidebar .nav-group-items {
  gap: var(--sidebar-control-gap);
}
.sidebar .nav-group.open > .nav-group-items {
  padding-left: 8px;
  margin-left: 10px;
  border-left: 1px solid rgba(52, 211, 153, 0.14);
}
.sidebar .nav-group-items .nav-item {
  width: 100%;
}
.sidebar .nav-favorite-toggle {
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
}
.sidebar .nav-glance {
  right: 34px;
  max-width: 56px;
  font-size: 9px;
}
.sidebar .regime-key {
  padding: 10px 4px 0;
  gap: 6px;
}
.sidebar .rk-item {
  box-sizing: border-box;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--sidebar-control-radius);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  font: 600 9px/1 'Inter', sans-serif;
  letter-spacing: 0.07em;
}
.sidebar .sidebar-status {
  padding: 10px 4px;
  gap: 8px;
}
.sidebar .sidebar-collapse-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
.app.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar .nav-item,
.app.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar .nav-group-header {
  width: 100%;
  height: var(--sidebar-control-h);
  min-height: var(--sidebar-control-h);
  padding: 0;
  justify-content: center;
}

body.plain-english .hero-label,
body.plain-english .section-header h2,
body.plain-english .persona-strip-label,
body.plain-english .matrix-header-cell,
body.plain-english .nav-group-title,
body.plain-english #page-title {
  text-transform: none;
  letter-spacing: 0.02em;
}

body.density-comfortable.ux-product-overhaul .hero-card {
  padding: 20px 22px;
  min-height: 108px;
}
body.density-comfortable.ux-product-overhaul .kpi-card {
  padding: 16px 18px;
}
body.density-comfortable.ux-product-overhaul .view.active > section,
body.density-comfortable.ux-product-overhaul .view.active > .main-panel {
  margin-bottom: var(--section-gap);
}
body.ux-product-overhaul .crypto-tab-panel.active > section,
body.ux-product-overhaul .tradfi-tab-panel.active > section {
  margin-bottom: var(--section-gap);
}
body.ux-product-overhaul .crypto-tab-panel.active > section:last-child,
body.ux-product-overhaul .tradfi-tab-panel.active > section:last-child,
body.density-comfortable.ux-product-overhaul .view.active > section:last-child,
body.density-comfortable.ux-product-overhaul .view.active > .main-panel:last-child {
  margin-bottom: 0;
}
/* Command strip — extra breathing room between brief chips, pillars, and forecast bar */
body.ux-product-overhaul #view-overview > .morning-brief-panel,
body.ux-product-overhaul #view-overview > .market-pillars-strip,
body.ux-product-overhaul #view-overview > .forecast-tri-bar-panel,
body.ux-product-overhaul #view-main .crypto-tab-panel[data-crypto-panel="overview"] > .morning-brief-panel,
body.ux-product-overhaul #view-main .crypto-tab-panel[data-crypto-panel="overview"] > .challenger-command-strip,
body.ux-product-overhaul #view-main .crypto-tab-panel[data-crypto-panel="overview"] > .market-pillars-strip,
body.ux-product-overhaul #view-main .crypto-tab-panel[data-crypto-panel="overview"] > .forecast-tri-bar-panel {
  margin-bottom: var(--section-gap-loose);
}
body.ux-product-overhaul #view-overview > .forecast-tri-bar-panel,
body.ux-product-overhaul #view-main .crypto-tab-panel[data-crypto-panel="overview"] > .forecast-tri-bar-panel {
  margin-bottom: calc(var(--section-gap-loose) + 4px);
}
body.ux-product-overhaul .view.active .hero-state-grid .hero-card:first-child .hero-value {
  font-size: var(--text-2xl);
  font-weight: 800;
}
body.ux-product-overhaul .view.active .hero-state-grid .hero-card:first-child {
  border-color: rgba(52,211,153,0.22);
  box-shadow: 0 0 0 1px rgba(52,211,153,0.06), var(--shadow-soft);
}

.cell.warming,
.regime-chip.warming {
  --warming: #717b92;
}
.cell.warming {
  border-color: rgba(113,123,146,0.25);
  background: rgba(113,123,146,0.06);
  cursor: default;
}
.regime-chip.warming {
  color: #aab3c5;
  background: rgba(113,123,146,0.12);
}
.cell-warming-detail {
  font-size: 10px;
  color: var(--text-faint);
}
.freshness-badge {
  font: 700 9px/1 'JetBrains Mono';
  text-transform: lowercase;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.freshness-badge.live { color: var(--bull); border-color: rgba(16,185,129,0.25); }
.freshness-badge.delayed { color: #fbbf24; border-color: rgba(251,191,36,0.25); }
.freshness-badge.stale,
.freshness-badge.missing,
.freshness-badge.proxy { color: var(--text-faint); }

.regime-icon {
  font-size: 9px;
  margin-right: 3px;
  opacity: 0.85;
}
body.palette-colorblind .regime-chip .regime-icon { opacity: 1; }

.cell-simple-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.cell-simple-action {
  font: 600 11px/1.3 'Inter';
  color: var(--text);
}
.cell-simple-conf {
  font-size: 10px;
  color: var(--text-dim);
}

.hero-sparkline {
  display: block;
  width: 56px;
  height: 18px;
  margin-top: 6px;
  opacity: 0.85;
}

.ux-cross-link-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.ux-cross-link {
  font: 600 11px/1 'Inter';
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(52,211,153,0.25);
  background: rgba(52,211,153,0.06);
  color: var(--accent);
  cursor: pointer;
}
.ux-cross-link:hover { background: rgba(52,211,153,0.12); }
/* Product: never surface research deep-links (HMM matrix, crowding, …) on simple dashboards */
body.nav-simple-mode .ux-cross-link-banner,
body.nav-simple-mode .ux-cross-link,
body.mode-tradfi .ux-cross-link[data-cross-route="hmm"],
body.mode-crypto .ux-cross-link[data-cross-route="hmm"],
body.mode-tradfi .ux-cross-link-banner:has(.ux-cross-link[data-cross-route="hmm"]:only-child),
body.mode-crypto .ux-cross-link-banner:has(.ux-cross-link[data-cross-route="hmm"]:only-child),
#view-main .ux-cross-link-banner,
#view-tradfi .ux-cross-link-banner {
  display: none !important;
}

.glossary-body {
  display: grid;
  gap: 14px;
  max-height: 60vh;
  overflow-y: auto;
}
.glossary-row h4 {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--accent);
}
.glossary-row p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
}

.tour-card-extended { max-width: 480px; }
.tour-card-extended .tour-list li { line-height: 1.45; }

/* =============================================================
   Vertical monitor layout (9:16, 16:19, 19:16-class tall panels)
   Class is set in <head> + app-core.js (orientation alone misses some
   rotated panels). Full-width content; sidebar becomes overlay drawer.
   ============================================================= */
html.vertical-layout {
  /* App shell → full-width content, sidebar as overlay drawer */
  .app {
    grid-template-columns: 1fr;
    column-gap: 0;
    grid-template-areas:
      "topbar"
      "content"
      "footer";
  }
  --vertical-nav-offset: 58px;
  --vertical-nav-content-w: min(360px, calc(100vw - 32px));
  .sidebar {
    position: fixed !important;
    top: var(--vertical-nav-offset) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: min(78vh, calc(100vh - var(--vertical-nav-offset) - 8px)) !important;
    transform: translateY(calc(-100% - 10px)) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms ease, visibility 180ms ease;
    z-index: calc(var(--z-sidebar-flyout) + 2) !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-strong);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.62);
    padding: 12px 14px 16px !important;
    gap: 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .sidebar.open {
    transform: translateY(0) !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    align-items: stretch;
    padding: 14px 16px 18px !important;
    gap: 14px !important;
    background: linear-gradient(180deg, rgba(17, 20, 27, 0.98), rgba(11, 13, 18, 0.98)) !important;
  }
  .sidebar-resize-handle,
  .sidebar-collapse-btn {
    display: none !important;
  }
  .sidebar.open > * {
    box-sizing: border-box;
    width: var(--vertical-nav-content-w) !important;
    max-width: var(--vertical-nav-content-w) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    flex-shrink: 0;
  }
  .sidebar.open .sidebar-brand-text,
  .sidebar.open .nav-search-wrap,
  .sidebar.open .nav-favorites,
  .sidebar.open .nav-section-label,
  .sidebar.open .nav-label,
  .sidebar.open .nav-group-title,
  .sidebar.open .nav-group-chevron,
  .sidebar.open .nav-group-header,
  .sidebar.open .nav-group-items,
  .sidebar.open .regime-key,
  .sidebar.open .sidebar-foot-meta,
  .sidebar.open .sidebar-status,
  .sidebar.open .nav-glance,
  .sidebar.open .nav-favorite-toggle,
  .sidebar.open .nav-tier-label,
  .sidebar.open .persona-strip {
    display: revert !important;
  }
  .sidebar.open .sidebar-brand {
    justify-content: flex-start !important;
    padding: 0 2px 6px !important;
    margin-bottom: 2px;
    border-bottom: none;
    gap: 8px;
  }
  .sidebar.open .logo-dot {
    margin: 0 !important;
  }
  .sidebar.open .nav-search-wrap {
    margin-top: 2px;
    width: 100%;
  }
  .sidebar.open .nav-search {
    height: 36px;
    font-size: 11px;
    width: 100%;
  }
  .sidebar.open .persona-strip {
    padding: 12px 14px 14px !important;
    gap: 12px !important;
    margin: 2px 0 0;
    border-radius: 12px;
  }
  .sidebar.open .persona-strip-head {
    margin-bottom: 2px;
    padding-bottom: 4px;
  }
  .sidebar.open .persona-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    width: 100%;
    max-width: 100%;
    grid-template-columns: unset;
  }
  .sidebar.open .persona-tab {
    width: auto;
    height: auto;
    min-height: 0;
    padding: 5px 11px;
    font-size: 9.5px;
    border-radius: 8px;
    flex: 0 0 auto;
  }
  .sidebar.open .persona-path-chips {
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-start;
    margin-top: 4px;
    padding-top: 2px;
  }
  .sidebar.open .persona-path-chip {
    height: auto;
    min-height: 26px;
    padding: 4px 10px;
    font-size: 9.5px;
  }
  .sidebar.open .persona-show-advanced {
    font-size: 10px;
    margin-top: 2px;
    align-self: flex-start;
    height: auto;
    min-height: 0;
    padding: 2px 0;
  }
  .sidebar.open .sidebar-nav {
    gap: 5px;
    width: var(--vertical-nav-content-w) !important;
    max-width: var(--vertical-nav-content-w) !important;
    max-height: min(46vh, 420px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 2px 2px 0;
    margin-top: 8px;
  }
  .sidebar.open .nav-section-label {
    margin: 10px 0 6px;
    padding: 2px 2px 0;
    font-size: 8.5px;
    letter-spacing: 0.16em;
  }
  .sidebar.open .nav-section-label.nav-global-label {
    margin-top: 2px;
  }
  .sidebar.open .nav-group {
    gap: 4px;
    margin-bottom: 4px;
  }
  .sidebar.open .nav-item,
  .sidebar.open .nav-group-header {
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 36px;
    padding: 8px 12px !important;
    padding-right: 12px !important;
    gap: 9px !important;
    border-radius: 10px;
    box-sizing: border-box;
  }
  .sidebar.open .nav-item {
    border: 1px solid transparent;
    margin-bottom: 0;
  }
  .sidebar.open .nav-item:hover {
    border-color: var(--border);
    background: rgba(255, 255, 255, 0.03);
  }
  .sidebar.open .nav-item.active {
    border-color: rgba(52, 211, 153, 0.35);
    box-shadow: inset 3px 0 0 var(--accent);
  }
  .sidebar.open .nav-group-header {
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-dim);
    font-size: 9px;
    letter-spacing: 0.14em;
    margin-top: 2px;
  }
  .sidebar.open .nav-group-items {
    gap: 4px;
    padding: 2px 0 4px 10px;
    margin-left: 4px;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
  }
  .sidebar.open .nav-group.open > .nav-group-items {
    margin-left: 4px;
    padding-left: 10px;
    border-left-color: rgba(52, 211, 153, 0.14);
  }
  .sidebar.open .nav-group-items .nav-item {
    padding-right: 36px !important;
  }
  .sidebar.open .nav-label {
    font-size: 10.5px;
    letter-spacing: 0.12em;
  }
  .sidebar.open .nav-glance {
    display: none !important;
  }
  .sidebar.open .nav-favorite-toggle {
    right: 8px;
  }
  .sidebar.open .regime-key {
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 4px;
    padding: 8px 4px 0;
    border-top: 1px solid var(--border);
  }
  .sidebar.open .sidebar-foot,
  .sidebar.open .sidebar-status {
    display: none !important;
  }
  .topbar {
    z-index: calc(var(--z-sidebar-flyout) + 3);
  }

  .sidebar-toggle { display: inline-flex; }
  .topbar { justify-content: flex-start; gap: 14px; }
  .topbar .brand { min-width: 0; }
  .app > .view,
  .view.active {
    width: 100%;
    min-width: 0;
    max-width: 100vw;
  }

  /* Topbar — wrap controls on narrow portrait width */
  .topbar {
    flex-wrap: wrap;
    padding: 11px 14px;
    gap: 10px;
  }
  .topbar .status-bar {
    width: 100%;
    flex-wrap: wrap;
    margin-left: 0;
    gap: 8px;
  }
  .topbar-macro-pill { display: none; }
  .asset-picker-btn { flex: 1 1 120px; max-width: none; }
  .workspace-popover { top: 112px; right: 12px; }

  /* Views — use the full content column */
  .view-overview,
  .view-main, .view-custom, .view-tradfi, .view-tradfi-macro, .view-tradfi-breadth,
  .view-tradfi-positioning, .view-tradfi-sector, .view-decision, .view-tradfi-decision,
  .view-tradfi-credit, .view-tradfi-global, .view-tradfi-portfolio, .view-tradfi-events,
  .view-tradfi-backtest, .view-tradfi-health, .view-tradfi-model-quality, .view-tradfi-brief,
  .view-tradfi-rotation, .view-tradfi-drivers, .view-tradfi-flows, .view-tradfi-liquidity,
  .view-tradfi-volatility, .view-tradfi-fundamentals, .view-tradfi-persistence,
  .view-tradfi-scenarios, .view-forecast, .view-persistence, .view-expanded,
  .view-confidence, .view-portfolio, .view-ranking, .view-shadow, .view-contagion,
  .view-supervisor, .view-msgarch, .view-decisionbt, .view-quality, .view-smartalerts,
  .view-learning, .view-retrain, .view-brief, .view-playbook, .view-ablation,
  .view-replay, .view-leadlag, .view-correlation, .view-alertlab, .view-decay,
  .view-contrib, .view-audit, .view-repair, .view-scenario, .view-delivery,
  .view-calibration, .view-liquidity, .view-crowding, .view-orderbook,
  .view-liquidations, .view-sizer, .view-runtime, .view-health {
    padding-left: 14px;
    padding-right: 14px;
    max-width: 100%;
    margin: 0;
  }

  /* Combined HOME — stack every dual-universe band vertically */
  .overview-verdict-band {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .overview-verdict-band > .ov-axis-v {
    width: auto;
    height: 1px;
    min-height: 0;
  }

  .overview-hero-grid,
  .hero-state-grid {
    grid-template-columns: 1fr !important;
  }

  #view-overview .overview-hero-grid,
  #view-overview .ov-kpi-group {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  #view-overview .overview-hero-grid > .hero-card,
  #view-overview .ov-kpi-group > .kpi-card {
    grid-column: 1 / -1 !important;
  }

  .ov-kpi-band {
    flex-direction: column;
    gap: 12px;
  }
  .ov-kpi-band > .ov-axis-v {
    width: auto;
    height: 1px;
    min-height: 0;
  }
  .ov-kpi-band .kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-split {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .overview-split > .ov-axis-v {
    width: auto;
    height: 1px;
    min-height: 0;
  }

  .ov-snapshot-micro-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-overview .ov-universe-panel {
    min-height: 0;
  }
  #view-overview .hero-card {
    min-height: 104px;
  }
  #view-overview .hero-value {
    font-size: 28px;
    line-height: 1.08;
  }
  #view-overview .hero-sub {
    font-size: 11.5px;
    line-height: 1.35;
  }
  #view-overview .kpi-card {
    min-height: 76px;
  }
  #view-overview .kpi-value {
    font-size: 20px;
  }
  #view-overview .ov-band-label {
    margin-top: 6px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    letter-spacing: 0.2em;
  }
  #view-overview .ov-hero-band .ov-axis-h {
    margin: 20px 0;
  }
  #view-overview .intel-banner.ov-verdict {
    margin-bottom: 0;
  }
  #view-overview .intel-text {
    font-size: 13.5px;
    line-height: 1.5;
    white-space: normal;
  }
  #view-overview .section-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  #view-overview .ov-card-micro {
    margin-top: 8px;
  }
  #view-overview .compact-feed .feed-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  #view-overview .compact-feed .fr-val {
    text-align: left;
  }
  .overview-layout-toolbar {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  /* Command strips — tighter but readable on tall narrow screens */
  .morning-brief-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .morning-brief-lines {
    max-width: 100%;
  }
  .morning-brief-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .market-pillars-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Other dashboards — collapse multi-column bands */
  .main-grid,
  .main-intelligence-grid {
    grid-template-columns: 1fr !important;
  }
  .crypto-action-rail {
    grid-column: 1 / -1;
  }
  .kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .composite-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .macro-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tradfi-summary-grid {
    grid-template-columns: 1fr;
  }
  .tradfi-group-overview,
  .small-multiples-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .decision-posture-grid {
    grid-template-columns: 1fr;
  }
  .diagnostic-card-grid,
  .template-grid,
  .calibration-grid,
  .runtime-phase-grid {
    grid-template-columns: 1fr;
  }
  .orderbook-main-grid,
  .liquidation-main-grid {
    grid-template-columns: 1fr;
  }
  .matrix-section,
  .tradfi-matrix-panel,
  .tradfi-matrix,
  .matrix-toolbar {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .matrix-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  .matrix-mode-switch {
    grid-column: 1 / -1;
  }
  .expanded-matrix-grid,
  .score-grid,
  .decision-matrix-grid,
  .quality-matrix-grid,
  .persistence-matrix-grid {
    grid-template-columns: 70px repeat(3, minmax(0, 1fr));
  }
  .source-grid {
    grid-template-columns: 1fr;
  }
  .persona-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
}

html.vertical-layout.narrow-vertical .morning-brief-grid,
html.vertical-layout.narrow-vertical .market-pillars-strip,
html.vertical-layout.narrow-vertical .kpi-strip,
html.vertical-layout.narrow-vertical .ov-kpi-band .kpi-strip,
html.vertical-layout.narrow-vertical .ov-snapshot-micro-grid,
html.layout-mobile .morning-brief-grid,
html.layout-mobile .market-pillars-strip,
html.layout-mobile .kpi-strip,
html.layout-mobile .ov-kpi-band .kpi-strip,
html.layout-mobile .ov-snapshot-micro-grid {
  grid-template-columns: 1fr;
}

/* Phone / compact layout — stacked controls, tighter chrome */
html.layout-mobile .topbar {
  padding: 8px 10px;
}
html.layout-mobile .topbar .status-bar {
  gap: 6px;
}
html.layout-mobile .topbar-workspace-label,
html.layout-mobile .topbar-refresh-label {
  display: none;
}
html.layout-mobile .view-overview,
html.layout-mobile .view-main,
html.layout-mobile .view-tradfi,
html.layout-mobile .view-decision,
html.layout-mobile .view-tradfi-decision {
  padding-left: 10px;
  padding-right: 10px;
}
html.layout-mobile #view-overview .hero-value {
  font-size: 24px;
}
html.layout-mobile .persona-tabs {
  grid-template-columns: repeat(2, 1fr);
}
html.layout-mobile .workspace-popover {
  right: 10px;
  width: min(320px, calc(100vw - 20px));
}

/* CSS-only fallback when JS is disabled */
@media (orientation: portrait), (max-aspect-ratio: 17/20), (max-width: 1320px) and (min-height: 1000px) {
  .sidebar-toggle { display: inline-flex; }
  .overview-split { grid-template-columns: 1fr; }
  .overview-split > .ov-axis-v { width: auto; height: 1px; min-height: 0; }
  .overview-verdict-band { grid-template-columns: 1fr; }
  .overview-verdict-band > .ov-axis-v { width: auto; height: 1px; min-height: 0; }
  .ov-kpi-band { flex-direction: column; }
  .ov-kpi-band > .ov-axis-v { width: auto; height: 1px; min-height: 0; }
}

/* Restored Cursor panels: compact, inspectable composite signal. */
.regime-fusion-panel {
  margin: 0 0 var(--section-gap);
}
.fusion-card {
  width: 100%;
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--chop);
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.fusion-card:hover {
  background: var(--panel-2);
  transform: translateY(-1px);
}
.fusion-card.tone-green { border-left-color: var(--bull); }
.fusion-card.tone-red { border-left-color: var(--bear); }
.fusion-head,
.fusion-main,
.fusion-foot,
.fusion-axis-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.fusion-label,
.fusion-detail-link {
  color: var(--text-faint);
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.13em;
}
.fusion-detail-link { color: var(--accent); }
.fusion-main { justify-content: flex-start; }
.fusion-main strong {
  min-width: 76px;
  color: var(--text);
  font: 700 30px/1 var(--font-mono);
}
.fusion-card.tone-green .fusion-main strong { color: var(--bull); }
.fusion-card.tone-red .fusion-main strong { color: var(--bear); }
.fusion-main span {
  color: var(--text-dim);
  font-size: 13px;
}
.fusion-axis-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fusion-axis {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  overflow: hidden;
  padding: 7px 8px;
  color: var(--text-dim);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font: 11px/1.2 var(--font-mono);
}
.fusion-axis i {
  position: absolute;
  inset: auto auto 0 0;
  width: var(--fusion-fill);
  height: 2px;
  background: var(--chop);
}
.fusion-axis.tone-green i { background: var(--bull); }
.fusion-axis.tone-red i { background: var(--bear); }
.fusion-foot {
  justify-content: flex-start;
  color: var(--text-faint);
  font: 10px/1.2 var(--font-mono);
}
.fusion-foot span + span::before {
  content: "•";
  margin-right: 12px;
  color: var(--border-strong);
}
.fusion-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.66);
}
.fusion-modal-backdrop[hidden] { display: none; }
.fusion-modal {
  width: min(620px, 100%);
  max-height: min(720px, calc(100vh - 40px));
  overflow: auto;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.fusion-modal-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.fusion-modal-head h2 {
  margin: 6px 0 0;
  font-size: 18px;
  letter-spacing: 0;
}
.fusion-modal-close {
  width: 32px;
  height: 32px;
  color: var(--text-dim);
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}
.fusion-modal-body { padding: 20px; }
.fusion-modal-verdict {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
  padding: 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--chop);
  border-radius: 7px;
}
.fusion-modal-verdict.tone-green { border-left-color: var(--bull); }
.fusion-modal-verdict.tone-red { border-left-color: var(--bear); }
.fusion-modal-verdict > strong { font: 700 34px/1 var(--font-mono); }
.fusion-modal-verdict b,
.fusion-modal-verdict span { display: block; }
.fusion-modal-verdict span { margin-top: 5px; color: var(--text-dim); font-size: 12px; }
.fusion-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.fusion-detail-grid article {
  min-height: 92px;
  padding: 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 7px;
}
.fusion-detail-grid span,
.fusion-detail-grid small { display: block; color: var(--text-faint); font-size: 10px; }
.fusion-detail-grid strong { display: block; margin: 8px 0 5px; font: 700 19px/1 var(--font-mono); color: var(--text); }
.fusion-detail-grid strong.tone-green { color: var(--bull); }
.fusion-detail-grid strong.tone-red { color: var(--bear); }
.fusion-method { margin: 16px 0 0; color: var(--text-dim); font-size: 12px; line-height: 1.6; }
@media (max-width: 740px), (max-aspect-ratio: 17/20) {
  .fusion-axis-row,
  .fusion-detail-grid { grid-template-columns: 1fr; }
  .fusion-main { align-items: flex-start; flex-direction: column; gap: 5px; }
}

/* ============================================================================
   MARKET BOARD — top-of-home combined regime board (2026-07-14)
   ========================================================================== */
.market-board {
  margin: 0 0 18px;
  padding: 14px 16px 16px;
  background: linear-gradient(180deg, var(--panel-2, #161a23), var(--panel, #11141b));
  border: 1px solid var(--border-strong, rgba(255,255,255,0.11));
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}
.market-board[hidden] { display: none; }

/* topbar: brand · scope slider · sub-tabs */
.mb-topbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 14px; }
.mb-brand { display: inline-flex; align-items: center; gap: 8px; }
.mb-brand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #34d399); box-shadow: 0 0 8px var(--accent-glow, rgba(52,211,153,0.4)); }
.mb-brand-t { font: 800 12px/1 var(--font-sans, Inter), sans-serif; letter-spacing: 0.18em; color: var(--text, #e7eaf0); }

.mb-scope { position: relative; display: inline-flex; padding: 3px; background: rgba(255,255,255,0.04); border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 9px; }
.mb-scope-ind { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 7px; background: var(--accent-glow, rgba(52,211,153,0.16)); border: 1px solid var(--accent, rgba(52,211,153,0.55)); transition: transform 220ms cubic-bezier(.4,0,.2,1); pointer-events: none; }
.mb-scope-btn { position: relative; z-index: 1; min-width: 76px; text-align: center; background: transparent; border: 0; cursor: pointer; color: var(--text-faint, #717b92); font: 700 10.5px/1 var(--font-sans, Inter), sans-serif; letter-spacing: 0.14em; padding: 8px 12px; transition: color 160ms ease; }
.mb-scope-btn.active { color: var(--text, #e7eaf0); }
.mb-scope-btn:hover { color: var(--text-dim, #aab3c5); }

.mb-tabs { display: inline-flex; gap: 4px; margin-left: auto; }
.mb-tab { background: transparent; border: 1px solid transparent; border-radius: 7px; cursor: pointer; color: var(--text-faint, #717b92); font: 700 10.5px/1 var(--font-sans, Inter), sans-serif; letter-spacing: 0.12em; padding: 8px 12px; transition: all 140ms ease; }
.mb-tab:hover { color: var(--text-dim, #aab3c5); }
.mb-tab.active { color: var(--text, #e7eaf0); background: rgba(255,255,255,0.05); border-color: var(--border, rgba(255,255,255,0.08)); }

/* panels */
.mb-content { display: flex; flex-direction: column; gap: 12px; }
.mb-panel { background: var(--panel, #11141b); border: 1px solid var(--border, rgba(255,255,255,0.07)); border-radius: 11px; padding: 12px 14px; }
.mb-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.mb-panel-title { font: 800 10.5px/1 var(--font-sans, Inter), sans-serif; letter-spacing: 0.16em; color: var(--text, #e7eaf0); }
.mb-panel-sub { font: 600 9.5px/1 var(--font-mono, monospace); letter-spacing: 0.04em; color: var(--text-faint, #717b92); text-align: right; }

/* regime read strip */
/* MARKET + LOOK FIRST + HEATING UP + AVOID (4 cells; highs/impulse removed) */
.mb-regime { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: stretch; }
.mb-regime-cell { padding: 8px 12px; border-left: 1px solid var(--border, rgba(255,255,255,0.06)); border-radius: 10px; min-width: 0; }
.mb-regime-cell:first-child { border-left: 0; padding-left: 8px; }
.mb-rc-label { font: 700 11px/1 var(--font-sans, Inter), sans-serif; letter-spacing: 0.12em; color: var(--text-faint, #717b92); margin-bottom: 7px; }
.mb-rc-value { font: 700 15px/1.15 var(--font-sans, Inter), sans-serif; color: var(--text, #e7eaf0); }
.mb-regime-big { font-size: 22px; font-weight: 800; letter-spacing: 0.01em; }
.mb-rc-sub { margin-top: 5px; font: 500 10px/1.3 var(--font-mono, monospace); color: var(--text-faint, #717b92); }

/* Spotlight cards: MARKET (stance-colored) + LOOK / HEAT / AVOID */
.mb-regime-spotlight {
  position: relative;
  border-left: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.mb-regime-spotlight .mb-rc-label {
  letter-spacing: 0.14em;
  font-size: 11.5px;
  font-weight: 800;
}
.mb-regime-spotlight .mb-rc-value {
  font-size: 16px;
  font-weight: 800;
}
/* MARKET / REGIME — color follows live model stance */
.mb-regime-spotlight-market-on {
  background: linear-gradient(160deg, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.05) 55%, transparent);
  box-shadow:
    inset 0 0 0 1px rgba(52, 211, 153, 0.5),
    0 0 0 1px rgba(16, 185, 129, 0.1),
    0 8px 22px rgba(16, 185, 129, 0.1);
}
.mb-regime-spotlight-market-on .mb-rc-label { color: #6ee7b7; }
.mb-regime-spotlight-market-on .mb-regime-big {
  color: #34d399 !important;
  text-shadow: 0 0 18px rgba(52, 211, 153, 0.22);
}
.mb-regime-spotlight-market-off {
  background: linear-gradient(160deg, rgba(239, 68, 68, 0.16), rgba(239, 68, 68, 0.05) 55%, transparent);
  box-shadow:
    inset 0 0 0 1px rgba(248, 113, 113, 0.5),
    0 0 0 1px rgba(239, 68, 68, 0.1),
    0 8px 22px rgba(239, 68, 68, 0.1);
}
.mb-regime-spotlight-market-off .mb-rc-label { color: #fca5a5; }
.mb-regime-spotlight-market-off .mb-regime-big {
  color: #f87171 !important;
  text-shadow: 0 0 18px rgba(248, 113, 113, 0.2);
}
/* Transition + neutral / chop → grey */
.mb-regime-spotlight-market-chop,
.mb-regime-spotlight-market-transition {
  background: linear-gradient(160deg, rgba(148, 163, 184, 0.16), rgba(100, 116, 139, 0.05) 55%, transparent);
  box-shadow:
    inset 0 0 0 1px rgba(148, 163, 184, 0.45),
    0 0 0 1px rgba(100, 116, 139, 0.1),
    0 8px 22px rgba(15, 23, 42, 0.18);
}
.mb-regime-spotlight-market-chop .mb-rc-label,
.mb-regime-spotlight-market-transition .mb-rc-label { color: #cbd5e1; }
.mb-regime-spotlight-market-chop .mb-regime-big,
.mb-regime-spotlight-market-transition .mb-regime-big {
  color: #e2e8f0 !important;
  text-shadow: 0 0 14px rgba(148, 163, 184, 0.15);
}
/* Mixed — slate-blue (signals disagree) */
.mb-regime-spotlight-market-mixed {
  background: linear-gradient(160deg, rgba(129, 140, 248, 0.16), rgba(99, 102, 241, 0.05) 55%, transparent);
  box-shadow:
    inset 0 0 0 1px rgba(165, 180, 252, 0.45),
    0 0 0 1px rgba(99, 102, 241, 0.1),
    0 8px 22px rgba(99, 102, 241, 0.08);
}
.mb-regime-spotlight-market-mixed .mb-rc-label { color: #c7d2fe; }
.mb-regime-spotlight-market-mixed .mb-regime-big {
  color: #a5b4fc !important;
  text-shadow: 0 0 16px rgba(129, 140, 248, 0.18);
}
/* Warming — soft violet (edge forming) */
.mb-regime-spotlight-market-warming {
  background: linear-gradient(160deg, rgba(192, 132, 252, 0.16), rgba(168, 85, 247, 0.05) 55%, transparent);
  box-shadow:
    inset 0 0 0 1px rgba(216, 180, 254, 0.45),
    0 0 0 1px rgba(168, 85, 247, 0.1),
    0 8px 22px rgba(168, 85, 247, 0.08);
}
.mb-regime-spotlight-market-warming .mb-rc-label { color: #e9d5ff; }
.mb-regime-spotlight-market-warming .mb-regime-big {
  color: #d8b4fe !important;
  text-shadow: 0 0 16px rgba(192, 132, 252, 0.2);
}
/* Fallback if stance class missing */
.mb-regime-spotlight-market {
  background: linear-gradient(160deg, rgba(148, 163, 184, 0.14), rgba(100, 116, 139, 0.04) 55%, transparent);
  box-shadow:
    inset 0 0 0 1px rgba(148, 163, 184, 0.4),
    0 8px 22px rgba(15, 23, 42, 0.16);
}
.mb-regime-spotlight-market .mb-rc-label { color: #cbd5e1; }
.mb-regime-spotlight-look {
  background: linear-gradient(160deg, rgba(16, 185, 129, 0.14), rgba(16, 185, 129, 0.04) 55%, transparent);
  box-shadow:
    inset 0 0 0 1px rgba(52, 211, 153, 0.42),
    0 0 0 1px rgba(16, 185, 129, 0.08),
    0 8px 22px rgba(16, 185, 129, 0.08);
}
.mb-regime-spotlight-look .mb-rc-label { color: #6ee7b7; }
.mb-regime-spotlight-heat {
  background: linear-gradient(160deg, rgba(90, 169, 255, 0.16), rgba(90, 169, 255, 0.04) 55%, transparent);
  box-shadow:
    inset 0 0 0 1px rgba(90, 169, 255, 0.45),
    0 0 0 1px rgba(90, 169, 255, 0.08),
    0 8px 22px rgba(59, 130, 246, 0.08);
}
.mb-regime-spotlight-heat .mb-rc-label { color: #93c5fd; }
.mb-regime-spotlight-avoid {
  background: linear-gradient(160deg, rgba(239, 68, 68, 0.14), rgba(239, 68, 68, 0.04) 55%, transparent);
  box-shadow:
    inset 0 0 0 1px rgba(248, 113, 113, 0.42),
    0 0 0 1px rgba(239, 68, 68, 0.08),
    0 8px 22px rgba(239, 68, 68, 0.07);
}
.mb-regime-spotlight-avoid .mb-rc-label { color: #fca5a5; }

/* Timeframe chips under spotlight cells */
.mb-tf-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 6px;
  margin-top: 8px;
}
.mb-tf-hint {
  font: 700 9px/1 var(--font-sans, Inter), sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint, #717b92);
  white-space: nowrap;
}
.mb-tf-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.mb-tf-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font: 800 10px/1.4 var(--font-mono, monospace);
  letter-spacing: 0.04em;
  color: var(--text, #e7eaf0);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.mb-regime-spotlight-look .mb-tf-chip {
  color: #a7f3d0;
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(52, 211, 153, 0.4);
}
.mb-regime-spotlight-heat .mb-tf-chip {
  color: #bfdbfe;
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(90, 169, 255, 0.42);
}
.mb-regime-spotlight-avoid .mb-tf-chip {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(248, 113, 113, 0.4);
}

/* Clickable spotlight cards → member ticker popup */
.mb-regime-clickable {
  cursor: pointer;
  user-select: none;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.mb-regime-clickable:hover,
.mb-regime-clickable:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.06);
  outline: none;
}
.mb-regime-clickable:focus-visible {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 0 2px rgba(52, 211, 153, 0.35);
}
.mb-regime-clickable.is-open {
  filter: brightness(1.08);
}
.mb-rc-click-hint {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font: 700 8px/1.4 var(--font-sans, Inter), sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint, #8791a3);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  vertical-align: middle;
}
.mb-regime-clickable:hover .mb-rc-click-hint,
.mb-regime-clickable.is-open .mb-rc-click-hint {
  color: var(--text, #e7eaf0);
  border-color: rgba(255, 255, 255, 0.18);
}
/* Source pop markup lives inside the cell but stays hidden; floating clone is shown */
.mb-regime-cell > .mb-spot-pop { display: none !important; }

.mb-spot-pop-host {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3200;
  pointer-events: none;
}
.mb-spot-pop-host.is-visible { display: block; }
.mb-spot-pop-floating {
  position: fixed;
  pointer-events: auto;
  width: min(360px, calc(100vw - 20px));
  max-height: min(420px, calc(100vh - 24px));
  overflow: auto;
  padding: 12px 12px 10px;
  border-radius: 12px;
  background: var(--panel-3, #151a24);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.2),
    0 0 30px rgba(16, 185, 129, 0.06);
  color: var(--text, #e7eaf0);
  animation: mb-spot-pop-in 140ms ease-out;
}
@keyframes mb-spot-pop-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.mb-spot-pop-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.mb-spot-pop-title {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.mb-spot-pop-role {
  font: 700 9px/1 var(--font-sans, Inter), sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint, #8791a3);
}
.mb-spot-pop-title strong {
  font: 800 15px/1.2 var(--font-sans, Inter), sans-serif;
  color: var(--text, #e7eaf0);
  letter-spacing: 0.01em;
}
.mb-spot-pop-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim, #aab3c5);
  font: 700 16px/1 system-ui, sans-serif;
  cursor: pointer;
}
.mb-spot-pop-close:hover {
  color: var(--text, #e7eaf0);
  background: rgba(255, 255, 255, 0.08);
}
.mb-spot-pop-meta {
  margin: 0 0 10px;
  font: 500 10.5px/1.35 var(--font-mono, monospace);
  color: var(--text-faint, #8791a3);
}
.mb-spot-pop-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mb-spot-pop-cols,
.mb-spot-pop-row {
  display: grid;
  grid-template-columns: 54px 1fr 40px 72px;
  gap: 8px;
  align-items: center;
  padding: 6px 4px;
  border-radius: 6px;
}
.mb-spot-pop-cols {
  padding-bottom: 4px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font: 700 9px/1 var(--font-sans, Inter), sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint, #717b92);
}
.mb-spot-pop-row:nth-child(even) { background: rgba(255, 255, 255, 0.025); }
.mb-spot-pop-sym {
  font: 800 12px/1 var(--font-sans, Inter), sans-serif;
  letter-spacing: 0.04em;
  color: var(--text, #e7eaf0);
}
.mb-spot-pop-lab {
  font: 500 11.5px/1.25 var(--font-sans, Inter), sans-serif;
  color: var(--text-dim, #aab3c5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mb-spot-pop-sc {
  font: 700 11.5px/1 var(--font-mono, monospace);
  color: var(--text, #e7eaf0);
  text-align: right;
}
.mb-spot-pop-st {
  font: 700 9px/1.3 var(--font-sans, Inter), sans-serif;
  letter-spacing: 0.04em;
  text-align: right;
  color: var(--text-faint, #8791a3);
}
.mb-spot-pop-empty {
  padding: 12px 4px;
  font: 500 12px/1.4 var(--font-sans, Inter), sans-serif;
  color: var(--text-faint, #8791a3);
}
.mb-spot-pop-foot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font: 500 10px/1.35 var(--font-sans, Inter), sans-serif;
  color: var(--text-faint, #717b92);
}

/* two-column row (benchmark + breadth) */
.mb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* benchmark grid */
.mb-bench { display: flex; flex-direction: column; gap: 2px; }
.mb-bench-row { display: grid; grid-template-columns: 60px repeat(4, 1fr); align-items: center; gap: 6px; padding: 6px 4px; border-radius: 6px; }
.mb-bench-row:nth-child(even) { background: rgba(255,255,255,0.015); }
.mb-bench-headrow { padding-bottom: 4px; }
.mb-bench-headrow .mb-bench-c { font: 700 9px/1 var(--font-sans, Inter), sans-serif; letter-spacing: 0.1em; color: var(--text-faint, #717b92); }
.mb-bench-sym { font: 800 12px/1 var(--font-sans, Inter), sans-serif; letter-spacing: 0.06em; color: var(--text, #e7eaf0); }
.mb-bench-c { text-align: right; font: 600 11.5px/1 var(--font-mono, monospace); color: var(--text-dim, #aab3c5); }

/* breadth grid */
.mb-breadth { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.mb-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.05)); }
.mb-stat-label { font: 600 10px/1.2 var(--font-sans, Inter), sans-serif; letter-spacing: 0.06em; color: var(--text-dim, #aab3c5); }
.mb-stat-value { font: 700 13px/1 var(--font-mono, monospace); color: var(--text, #e7eaf0); }
.mb-stat-clickable {
  cursor: pointer;
  user-select: none;
  border-radius: 8px;
  padding: 7px 8px;
  margin: 0 -6px;
  border-bottom-color: transparent;
  transition: background 140ms ease, box-shadow 140ms ease;
}
.mb-stat-clickable:hover,
.mb-stat-clickable:focus-visible {
  background: rgba(124, 194, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(124, 194, 255, 0.28);
  outline: none;
}
.mb-stat-clickable.is-open {
  background: rgba(124, 194, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(124, 194, 255, 0.4);
}
.mb-stat > .mb-spot-pop { display: none !important; }
.mb-breadth-pop-floating {
  width: min(420px, calc(100vw - 20px)) !important;
  max-height: min(520px, calc(100vh - 24px)) !important;
}
.mb-breadth-pop-floating .mb-spot-pop-cols,
.mb-breadth-pop-floating .mb-spot-pop-row {
  grid-template-columns: 78px 1fr 52px 88px;
}
.mb-breadth-sec {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.mb-breadth-sec:first-of-type {
  margin-top: 4px;
  padding-top: 0;
  border-top: 0;
}
.mb-breadth-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.mb-breadth-sec-title {
  font: 800 10.5px/1.2 var(--font-sans, Inter), sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text, #e7eaf0);
}
.mb-breadth-sec-count {
  font: 600 10px/1 var(--font-mono, monospace);
  color: var(--text-faint, #8791a3);
}

/* movers (dominant + emerging/fading) */
.mb-movers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mb-mlist { display: flex; flex-direction: column; }
.mb-mrow { display: grid; grid-template-columns: 20px 1fr auto auto auto auto; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.05)); }
.mb-mrow:last-child { border-bottom: 0; }
.mb-mrank { font: 600 10px/1 var(--font-mono, monospace); color: var(--text-faint, #717b92); }
.mb-mname { font: 700 12px/1 var(--font-sans, Inter), sans-serif; color: var(--text, #e7eaf0); letter-spacing: 0.02em; }
.mb-mn { font: 500 10px/1 var(--font-mono, monospace); color: var(--text-faint, #717b92); }
.mb-mscore { font: 700 13px/1 var(--font-mono, monospace); color: var(--text, #e7eaf0); min-width: 24px; text-align: right; }
.mb-mv { font: 600 11px/1 var(--font-mono, monospace); min-width: 40px; text-align: right; }

/* themes table */
.mb-table-wrap { overflow-x: auto; }
.mb-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mb-table th { position: sticky; top: 0; text-align: right; font: 700 9px/1 var(--font-sans, Inter), sans-serif; letter-spacing: 0.08em; color: var(--text-faint, #717b92); padding: 6px 10px; border-bottom: 1px solid var(--border-strong, rgba(255,255,255,0.11)); background: var(--panel, #11141b); white-space: nowrap; }
.mb-table th.mb-th-sort {
  cursor: pointer;
  user-select: none;
  transition: color 120ms ease, background 120ms ease;
}
.mb-table th.mb-th-sort:hover,
.mb-table th.mb-th-sort:focus-visible {
  color: var(--text, #e7eaf0);
  background: rgba(255, 255, 255, 0.04);
  outline: none;
}
.mb-table th.mb-th-sort.is-sorted {
  color: #93c5fd;
}
.mb-table th.mb-th-sort .mb-th-label {
  vertical-align: middle;
}
.mb-table th.mb-th-sort .mb-sort-ind {
  display: inline-block;
  margin-left: 4px;
  font-size: 9px;
  opacity: 0.45;
  vertical-align: middle;
}
.mb-table th.mb-th-sort.is-sorted .mb-sort-ind {
  opacity: 1;
  color: #93c5fd;
}
.mb-table th.l, .mb-table td.l { text-align: left; }
.mb-table td { text-align: right; font: 600 11.5px/1 var(--font-mono, monospace); color: var(--text-dim, #aab3c5); padding: 7px 10px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.045)); white-space: nowrap; }
.mb-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.mb-table .mb-grow { width: 99%; }
.mb-trank { color: var(--text-faint, #717b92); }
.mb-tname { font-family: var(--font-sans, Inter), sans-serif; font-weight: 700; color: var(--text, #e7eaf0); letter-spacing: 0.02em; }
.mb-table td b { color: var(--text, #e7eaf0); font-weight: 700; }

/* tone helpers */
.mb-pos { color: var(--bull, #10b981) !important; }
.mb-neg { color: var(--bear, #ef4444) !important; }
.mb-flat { color: var(--text-dim, #aab3c5); }

/* status badges */
.mb-badge { display: inline-block; padding: 2px 8px; border-radius: 5px; font: 700 9px/1.5 var(--font-sans, Inter), sans-serif; letter-spacing: 0.08em; border: 1px solid transparent; }
.mb-badge-dom { color: #34d399; background: rgba(16,185,129,0.16); border-color: rgba(16,185,129,0.4); }
.mb-badge-strong { color: #34d399; background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.28); }
.mb-badge-emerging { color: #5aa9ff; background: rgba(90,169,255,0.15); border-color: rgba(90,169,255,0.38); }
.mb-badge-improving { color: #5aa9ff; background: rgba(90,169,255,0.10); border-color: rgba(90,169,255,0.26); }
.mb-badge-neutral { color: var(--text-dim, #aab3c5); background: rgba(148,163,184,0.12); border-color: rgba(148,163,184,0.24); }
.mb-badge-deteriorating { color: #f87171; background: rgba(239,68,68,0.13); border-color: rgba(239,68,68,0.3); }
.mb-badge-weak { color: var(--text-faint, #8791a3); background: rgba(148,163,184,0.08); border-color: rgba(148,163,184,0.18); }
.mb-badge-fading { color: #f87171; background: rgba(239,68,68,0.16); border-color: rgba(239,68,68,0.4); }

/* universe tag (FULL merged table) */
.mb-univ { display: inline-block; padding: 1px 6px; border-radius: 999px; font: 700 8.5px/1.5 var(--font-mono, monospace); letter-spacing: 0.06em; border: 1px solid var(--border-strong, rgba(255,255,255,0.11)); }
.mb-univ-crypto { color: var(--accent, #34d399); border-color: rgba(52,211,153,0.35); background: rgba(52,211,153,0.08); }
.mb-univ-tradfi { color: #7cc2ff; border-color: rgba(124,194,255,0.35); background: rgba(124,194,255,0.08); }

/* HOME full scope: separate Crypto + TradFi cards (no divider strip) */
.mb-home-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mb-uni-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 12px 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.12));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
.mb-uni-card-crypto {
  border-color: rgba(52, 211, 153, 0.22);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(52, 211, 153, 0.12);
}
.mb-uni-card-tradfi {
  border-color: rgba(124, 194, 255, 0.22);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(124, 194, 255, 0.12);
}
.mb-uni-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 2px 12px;
  padding: 4px 4px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mb-uni-card-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.mb-uni-card-crypto .mb-uni-card-dot {
  background: #34d399;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.45);
}
.mb-uni-card-tradfi .mb-uni-card-dot {
  background: #7cc2ff;
  box-shadow: 0 0 10px rgba(124, 194, 255, 0.45);
}
.mb-uni-card-title {
  font: 800 11.5px/1 var(--font-sans, Inter), sans-serif;
  letter-spacing: 0.14em;
  color: var(--text, #e7eaf0);
}
.mb-uni-card-crypto .mb-uni-card-title { color: #a7f3d0; }
.mb-uni-card-tradfi .mb-uni-card-title { color: #bfdbfe; }
.mb-uni-card-sub {
  margin-left: auto;
  font: 500 10.5px/1.2 var(--font-sans, Inter), sans-serif;
  color: var(--text-faint, #8791a3);
  letter-spacing: 0.02em;
}
.mb-uni-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Legacy hooks (no longer used as HOME separator) */
.mb-uni-block { display: flex; flex-direction: column; gap: 12px; }
.mb-uni-divider { display: none !important; }

/* empty / loading */
.mb-empty { display: flex; align-items: center; justify-content: center; min-height: 120px; }
.mb-empty-msg { font: 600 11px/1.4 var(--font-mono, monospace); color: var(--text-faint, #717b92); }

/* responsive */
@media (max-width: 1100px) {
  .mb-regime { grid-template-columns: repeat(2, 1fr); row-gap: 10px; }
  .mb-regime-cell:nth-child(3) { border-left: 0; padding-left: 12px; }
}
@media (max-width: 900px) {
  .mb-two, .mb-movers { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mb-regime { grid-template-columns: 1fr 1fr; }
  .mb-regime-cell:nth-child(odd) { border-left: 0; padding-left: 12px; }
  .mb-tabs { margin-left: 0; }
  .mb-breadth { grid-template-columns: 1fr; }
}

/* status hover tooltip (fixed, body-appended, never clipped by the table overflow) */
.mb-tip {
  position: fixed; z-index: 3000; max-width: 300px;
  padding: 8px 11px;
  background: var(--panel-3, #1c2230);
  color: var(--text, #e7eaf0);
  border: 1px solid var(--border-strong, rgba(255,255,255,0.14));
  border-radius: 9px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  font: 500 11.5px/1.45 var(--font-sans, Inter), sans-serif;
  letter-spacing: 0.01em;
  pointer-events: none;
  opacity: 0; display: none;
  transition: opacity 120ms ease;
}
.mb-tip.mb-tip-wide {
  max-width: min(420px, calc(100vw - 24px));
  white-space: normal;
  line-height: 1.5;
}
.mb-badge[data-mb-tip] { cursor: help; }
.mb-tname-tip {
  cursor: help;
  border-bottom: 1px dotted rgba(148, 163, 184, 0.45);
}
.mb-tname-tip:hover {
  color: #bfdbfe;
  border-bottom-color: rgba(124, 194, 255, 0.55);
}
.mb-tname-wrap { cursor: help; }
.mb-tsub {
  font: 500 11px/1.2 var(--font-sans, Inter), sans-serif;
  color: var(--text-faint, #8791a3);
  font-weight: 500;
  letter-spacing: 0;
}
.mb-theme-tag {
  display: inline-block;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 7px;
  border-radius: 999px;
  font: 600 9.5px/1.4 var(--font-sans, Inter), sans-serif;
  letter-spacing: 0.02em;
  color: #bfdbfe;
  background: rgba(124, 194, 255, 0.1);
  border: 1px solid rgba(124, 194, 255, 0.28);
  vertical-align: middle;
}

/* ============ Sidebar dropdowns — favorites + persona "Dein Pfad" (2026-07-15) ============ */
.nav-favorites.nav-dd:not([hidden]) { display: block; overflow: visible; padding: 0; }
.nav-dd { position: relative; }
.nav-dd-btn {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  min-height: 34px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--sidebar-control-radius, 8px);
  color: var(--text);
  font: 700 11px/1 'Inter', sans-serif;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease;
}
.nav-dd-btn:hover { border-color: var(--border-strong); background: rgba(52, 211, 153, 0.08); }
.nav-dd.open .nav-dd-btn { border-color: rgba(52, 211, 153, 0.5); background: rgba(52, 211, 153, 0.08); }
.nav-dd-btn-icon { flex-shrink: 0; color: var(--accent, #34d399); font-size: 12px; }
.nav-dd-btn-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-dd-caret { flex-shrink: 0; color: var(--text-faint); font-size: 10px; transition: transform 160ms ease; }
.nav-dd.open .nav-dd-caret { transform: rotate(180deg); }

.nav-dd-menu {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  z-index: 46;
  box-sizing: border-box;
  padding: 6px;
  background: var(--panel-3, #161a24);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.55);
  max-height: min(60vh, 360px);
  overflow-y: auto;
}
.nav-dd.open .nav-dd-menu { display: block; }
.nav-dd-section-label {
  padding: 5px 6px 4px;
  color: var(--text-faint);
  font: 700 8.5px/1 'Inter', sans-serif;
  letter-spacing: 0.16em;
}

/* favorite items as full-width rows inside the dropdown */
.nav-dd .favorite-chip.nav-dd-item {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  margin: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text-dim);
  font: 700 10.5px/1 'Inter', sans-serif;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.nav-dd .favorite-chip.nav-dd-item + .favorite-chip.nav-dd-item { margin-top: 2px; }
.nav-dd .favorite-chip.nav-dd-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
  color: var(--text);
}
.nav-dd-item-icon { flex-shrink: 0; width: 16px; text-align: center; color: var(--accent, #34d399); font-size: 12px; }
.nav-dd-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* persona controls inside the dropdown */
.persona-dd .persona-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 2px; }
.persona-dd .persona-path-chips { display: flex; flex-direction: column; gap: 4px; padding: 2px; }
.persona-dd .persona-path-chip { width: 100%; justify-content: flex-start; border-radius: 7px; }

/* ============ Responsive topbar — wrap the control cluster instead of crushing the title (2026-07-15) ============ */
/* When the brand + controls can't both fit (narrow window, or expanded sidebar eating width),
   the status-bar drops to its own row below the title instead of squeezing it into a sliver.
   flex-wrap keys off *available* space, so it adapts to the sidebar's collapsed/expanded width. */
.topbar {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  row-gap: 10px;
  column-gap: 16px;
}
.topbar .brand { flex: 1 1 300px; min-width: 0; }
.topbar .status-bar {
  flex: 0 1 auto;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 8px;
}

/* =============================================================================
   SIMPLE MODE (nav-simple-mode) — hide advanced chrome, keep research code intact
   ========================================================================== */
/* DEIN PFAD / persona / "Alle Seiten anzeigen" — never surface in the hamburger.
   Models & pages stay in the DOM; users must not jump into research via this path. */
body.nav-simple-mode .persona-strip,
body.nav-simple-mode #persona-strip,
body.nav-simple-mode .persona-strip-head,
body.nav-simple-mode .persona-dd,
body.nav-simple-mode .persona-show-advanced,
body.nav-simple-mode #persona-show-advanced,
body.nav-simple-mode .nav-favorites,
body.nav-simple-mode #nav-favorites,
body.nav-simple-mode .nav-search-wrap,
body.nav-simple-mode .nav-group,
body.nav-simple-mode .sidebar-nav .nav-item:not(.nav-simple-keep),
body.nav-simple-mode .sidebar-nav .nav-item.nav-custom,
body.nav-simple-mode .sidebar-nav .nav-item[data-route="custom"],
body.nav-simple-mode .sidebar-nav .nav-section-label:not(.nav-simple-keep),
body.nav-simple-mode #nav-simple-toggle,
body.nav-simple-mode #view-custom,
html.vertical-layout body.nav-simple-mode.vertical-nav-open .sidebar.open .persona-strip,
html.vertical-layout body.nav-simple-mode.vertical-nav-open .sidebar.open .persona-show-advanced,
body.nav-simple-mode .sidebar.open .persona-strip,
body.nav-simple-mode .sidebar.open .persona-show-advanced {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
}

body.nav-simple-mode .sidebar-nav .nav-simple-keep {
  display: flex !important;
}
/* Simple product: ALWAYS show HOME + CRYPTO + TRADFI together so users can
   open each simple board — do not hide TradFi when crypto mode is active. */
body.nav-simple-mode.app.mode-crypto .sidebar-nav .tradfi-only.nav-simple-keep,
body.nav-simple-mode.app.mode-tradfi .sidebar-nav .nav-section-label[data-universe="crypto"].nav-simple-keep,
body.nav-simple-mode.app.mode-tradfi .sidebar-nav .nav-item.crypto-only.nav-simple-keep,
body.nav-simple-mode.app.mode-crypto .sidebar-nav .nav-item.tradfi-only.nav-simple-keep,
body.nav-simple-mode.app.mode-crypto .sidebar-nav .nav-section-label.tradfi-only.nav-simple-keep {
  display: flex !important;
  visibility: visible !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}
/* Override generic mode-crypto / mode-tradfi hides for the 3 beginner links */
body.nav-simple-mode.app.mode-crypto .nav-item.tradfi-route.nav-simple-keep,
body.nav-simple-mode.app.mode-crypto .nav-section-label.tradfi-only.nav-simple-keep,
body.nav-simple-mode.app.mode-tradfi .nav-item.crypto-only.nav-simple-keep,
body.nav-simple-mode.app.mode-tradfi .nav-section-label[data-universe="crypto"].nav-simple-keep {
  display: flex !important;
}

/* Collapsed rail: never show section labels / text (was leaking "CRYP" from CRYPTO).
   Must beat nav-simple-keep force-show rules above. Icons only. */
body.nav-simple-mode.app.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar-nav .nav-section-label,
body.nav-simple-mode.app.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar-nav .nav-section-label.nav-simple-keep,
body.nav-simple-mode.app.mode-crypto.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar-nav .nav-section-label,
body.nav-simple-mode.app.mode-tradfi.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar-nav .nav-section-label,
body.nav-simple-mode.app.mode-crypto.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar-nav .nav-section-label.nav-simple-keep,
body.nav-simple-mode.app.mode-tradfi.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar-nav .nav-section-label.nav-simple-keep,
body.nav-simple-mode.app.mode-tradfi.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar-nav .nav-section-label[data-universe="crypto"].nav-simple-keep,
body.nav-simple-mode.app.mode-crypto.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar-nav .nav-section-label.tradfi-only.nav-simple-keep,
.app.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar-nav .nav-section-label.nav-simple-keep {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  pointer-events: none !important;
}
body.nav-simple-mode.app.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar-nav .nav-label,
body.nav-simple-mode.app.mode-crypto.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar-nav .nav-label,
body.nav-simple-mode.app.mode-tradfi.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar-nav .nav-label,
body.nav-simple-mode.app.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar-nav .nav-simple-keep .nav-label {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
}

/* Hide complex panels on command homes — models still compute in background */
body.nav-simple-mode .view-main .crypto-workspace-tabs,
body.nav-simple-mode .view-main .crypto-tab-panel[data-crypto-panel="explore"],
body.nav-simple-mode .view-main .crypto-tab-panel[data-crypto-panel="diagnostics"],
body.nav-simple-mode .view-main .morning-brief-panel,
body.nav-simple-mode .view-main .regime-fusion-panel,
body.nav-simple-mode .view-main .challenger-command-strip,
body.nav-simple-mode .view-main .market-pillars-strip,
body.nav-simple-mode .view-main .forecast-tri-bar-panel,
body.nav-simple-mode .view-main .intel-banner,
body.nav-simple-mode .view-main .hero-state-grid,
body.nav-simple-mode .view-main .kpi-strip,
body.nav-simple-mode .view-main .main-grid,
body.nav-simple-mode .view-main .main-alignment-panel,
body.nav-simple-mode .view-main .main-intelligence-grid,
body.nav-simple-mode .view-main .comparison-band,
body.nav-simple-mode .view-tradfi .tradfi-workspace-tabs,
body.nav-simple-mode .view-tradfi .tradfi-tab-panel[data-tradfi-panel="explore"],
body.nav-simple-mode .view-tradfi .tradfi-tab-panel[data-tradfi-panel="diagnostics"],
body.nav-simple-mode .view-tradfi .morning-brief-panel,
body.nav-simple-mode .view-tradfi .regime-fusion-panel,
body.nav-simple-mode .view-tradfi .market-pillars-strip,
body.nav-simple-mode .view-tradfi .forecast-tri-bar-panel,
body.nav-simple-mode .view-tradfi .intel-banner,
body.nav-simple-mode .view-tradfi .tradfi-command-center,
body.nav-simple-mode .view-tradfi .tradfi-command-kpis,
body.nav-simple-mode .view-tradfi .tradfi-overview-layout,
body.nav-simple-mode .view-tradfi .tradfi-summary-band,
body.nav-simple-mode .view-tradfi .comparison-band,
body.nav-simple-mode .view-overview .overview-layout-toolbar,
body.nav-simple-mode .view-overview .morning-brief-panel,
body.nav-simple-mode .view-overview .regime-fusion-panel,
body.nav-simple-mode .view-overview .market-pillars-strip,
body.nav-simple-mode .view-overview .forecast-tri-bar-panel,
body.nav-simple-mode .view-overview .overview-spillover-banner,
body.nav-simple-mode .view-overview .overview-verdict-band,
body.nav-simple-mode .view-overview .ov-hero-band,
body.nav-simple-mode .view-overview .ov-kpi-band,
body.nav-simple-mode .view-overview .overview-split {
  display: none !important;
}

/* Opportunity board (inspired by Stable Market Board daily/themes layout) */
body.nav-simple-mode [data-mb-root],
body.nav-simple-mode .market-board[data-mb-root] {
  display: block !important;
}
body.nav-simple-mode [data-srb-root] {
  display: block !important;
  margin-top: 14px;
}
/* On HOME, keep the 3-bucket board secondary under the opportunity board */
body.nav-simple-mode .view-overview [data-srb-root] {
  display: none !important;
}
body.nav-simple-mode .home-opportunity-intro {
  display: block !important;
}
.home-opportunity-intro {
  display: none;
  margin: 0 0 14px;
  padding: 16px 18px 14px;
  border-radius: 16px;
  border: 1px solid rgba(52, 211, 153, 0.18);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(8, 12, 18, 0.55));
}
.hoi-kicker {
  font: 800 10px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  margin-bottom: 8px;
}
.hoi-title {
  margin: 0 0 8px;
  font: 800 22px/1.15 Inter, system-ui, sans-serif;
  color: var(--text);
  letter-spacing: 0.01em;
}
.hoi-text {
  margin: 0 0 12px;
  max-width: 78ch;
  font: 500 13.5px/1.5 Inter, system-ui, sans-serif;
  color: var(--text-dim);
}
.hoi-text strong { color: var(--text); font-weight: 700; }
.hoi-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.hoi-legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 11.5px/1.3 Inter, system-ui, sans-serif;
  color: var(--text-dim);
}
.hoi-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.hoi-btn {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 8px 14px;
  font: 700 11px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.hoi-btn:hover {
  border-color: rgba(148, 163, 184, 0.55);
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}
.hoi-btn-primary {
  border-color: rgba(52, 211, 153, 0.4);
  background: rgba(16, 185, 129, 0.12);
  color: #a7f3d0;
}
.hoi-btn-primary:hover {
  border-color: rgba(52, 211, 153, 0.55);
  background: rgba(16, 185, 129, 0.18);
  color: #ecfdf5;
}
/* When dismissed, hide even under simple-mode display rules */
body.nav-simple-mode .home-opportunity-intro.is-dismissed,
.home-opportunity-intro.is-dismissed {
  display: none !important;
}
body.nav-simple-mode .mb-brand-t { letter-spacing: 0.08em; }
.mb-mission {
  display: none;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(52, 211, 153, 0.14);
  background: rgba(16, 185, 129, 0.06);
  font: 500 12.5px/1.45 Inter, system-ui, sans-serif;
  color: var(--text-dim);
}
.mb-mission strong { color: #a7f3d0; font-weight: 700; }
body.nav-simple-mode .mb-mission {
  display: block !important;
}
/* Scope toggles (HOME/CRYPTO/TRADFI) — redundant with sidebar + topbar mode switch */
body.nav-simple-mode .mb-scope {
  display: none !important;
}

#nav-simple-toggle {
  display: block;
  width: calc(100% - 16px);
  margin: 10px 8px 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(52, 211, 153, 0.28);
  background: rgba(16, 185, 129, 0.08);
  color: #a7f3d0;
  font: 700 11px/1.3 'Inter', system-ui, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: center;
}
#nav-simple-toggle:hover {
  border-color: rgba(52, 211, 153, 0.5);
  background: rgba(16, 185, 129, 0.14);
  color: #ecfdf5;
}
body:not(.nav-simple-mode) #nav-simple-toggle {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.08);
  color: var(--text-dim);
}

/* ---- Simple regime board layout ---- */
.simple-regime-board {
  margin: 0 0 18px;
}
.srb-shell {
  border: 1px solid rgba(52, 211, 153, 0.16);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(10, 16, 24, 0.9), rgba(8, 12, 18, 0.55));
  padding: 16px 16px 18px;
}
.srb-top {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}
.srb-brand { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.srb-dot {
  width: 12px; height: 12px; border-radius: 50%; margin-top: 8px; flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.12);
  background: #94a3b8;
}
.srb-dot-risk_on { background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.16); }
.srb-dot-risk_off { background: #f87171; box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.16); }
.srb-dot-chop { background: #94a3b8; }
.srb-kicker {
  font: 700 10px/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.srb-market {
  font: 800 28px/1.1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.04em;
  color: var(--text);
}
.srb-tone-text-risk_on { color: #6ee7b7; }
.srb-tone-text-risk_off { color: #fca5a5; }
.srb-tone-text-chop { color: #cbd5e1; }
.srb-market-sub {
  margin-top: 6px;
  font: 500 13px/1.45 'Inter', system-ui, sans-serif;
  color: var(--text-dim);
  max-width: 52ch;
}
.srb-tf-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.srb-tf-label {
  font: 700 10px/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  margin-right: 4px;
}
.srb-tf {
  appearance: none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 6px 10px;
  font: 700 10px/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.srb-tf.active {
  border-color: rgba(52, 211, 153, 0.45);
  background: rgba(16, 185, 129, 0.14);
  color: #a7f3d0;
}
.srb-legend {
  margin: 0 0 14px;
  font: 500 12px/1.45 'Inter', system-ui, sans-serif;
  color: var(--text-dim);
}
.srb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.srb-col {
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(8, 12, 18, 0.55);
  min-height: 180px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.srb-col-risk_on { border-color: rgba(52, 211, 153, 0.28); }
.srb-col-risk_off { border-color: rgba(248, 113, 113, 0.28); }
.srb-col-chop { border-color: rgba(148, 163, 184, 0.28); }
.srb-col-unclear { border-color: rgba(148, 163, 184, 0.18); opacity: 0.92; }
.srb-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.srb-col-title {
  margin: 0;
  font: 800 14px/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.12em;
  color: var(--text);
}
.srb-col-risk_on .srb-col-title { color: #6ee7b7; }
.srb-col-risk_off .srb-col-title { color: #fca5a5; }
.srb-col-count {
  min-width: 28px;
  text-align: center;
  border-radius: 999px;
  padding: 4px 8px;
  font: 800 12px/1 'JetBrains Mono', ui-monospace, monospace;
  background: rgba(255,255,255,0.05);
  color: var(--text-dim);
}
.srb-col-hint {
  margin: 0;
  font: 500 11.5px/1.4 'Inter', system-ui, sans-serif;
  color: var(--text-faint);
  min-height: 2.6em;
}
.srb-col-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.srb-card {
  appearance: none;
  width: 100%;
  text-align: left;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}
.srb-card:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
}
.srb-tone-risk_on { border-left: 3px solid #34d399; }
.srb-tone-risk_off { border-left: 3px solid #f87171; }
.srb-tone-chop { border-left: 3px solid #94a3b8; }
.srb-tone-unclear { border-left: 3px solid #64748b; opacity: 0.85; }
.srb-card-name {
  font: 800 13px/1.25 'Inter', system-ui, sans-serif;
  color: var(--text);
}
.srb-card-regime {
  font: 800 11px/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}
.srb-tone-risk_on .srb-card-regime { color: #6ee7b7; }
.srb-tone-risk_off .srb-card-regime { color: #fca5a5; }
.srb-card-meta {
  font: 500 11px/1.3 'JetBrains Mono', ui-monospace, monospace;
  color: var(--text-faint);
}
.srb-empty {
  font: 500 12px/1.4 'Inter', system-ui, sans-serif;
  color: var(--text-faint);
  padding: 16px 6px;
}
.srb-col-extra {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
}
.srb-col-extra[hidden] {
  display: none !important;
}
.srb-col-toggle {
  appearance: none;
  width: 100%;
  margin-top: 4px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px dashed rgba(148, 163, 184, 0.35);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  font: 700 11px/1.2 'Inter', system-ui, sans-serif;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-align: center;
}
.srb-col-toggle:hover {
  border-color: rgba(52, 211, 153, 0.4);
  color: #a7f3d0;
  background: rgba(16, 185, 129, 0.08);
}
.srb-col-toggle.is-open {
  border-style: solid;
  border-color: rgba(52, 211, 153, 0.28);
}
.srb-unclear-wrap { margin-top: 12px; }
.srb-unclear-wrap .srb-col { min-height: 0; }

@media (max-width: 980px) {
  .srb-grid { grid-template-columns: 1fr; }
  .srb-market { font-size: 22px; }
}