/* ============================================================
   COMPOSER COMMAND CENTER — "PRIVATE WEALTH DESK"
   Quiet-luxury fintech aesthetic built for long, comfortable
   sessions. Warm desaturated palette, low glare, soft diffuse
   elevation. Fraunces serif for titles, Hanken Grotesk for UI
   and tabular figures (calm, aligned, never "code-like").
   Champagne-gold hairline labels, muted eucalyptus gains and
   clay losses. All original selectors + CSS-variable names are
   preserved so app.js/index.html hooks stay intact.
   ============================================================ */

/* The `hidden` attribute must win over any component class that sets its own
   `display` (e.g. .menuButton { display: inline-flex }) — otherwise an
   element author code marks hidden (role-gated nav pills, admin-only panels)
   silently keeps rendering because the class rule outranks the browser's
   default [hidden] { display: none } UA rule. */
[hidden] { display: none !important; }

:root {
  color-scheme: dark;

  /* canvas — soft charcoal, never pure black */
  --bg-0: #14171c;
  --bg-1: #181c22;
  --bg-2: #1d222b;

  /* surfaces */
  --panel: rgba(27, 32, 40, 0.86);
  --panel-strong: rgba(31, 37, 46, 0.95);
  --panel-soft: rgba(37, 43, 53, 0.55);

  /* ink — warm off-white, easy on the eyes */
  --ink: #e9e6df;
  --muted: #9a988f;
  --line: rgba(233, 230, 223, 0.09);
  --hero-line: rgba(233, 230, 223, 0.14);

  /* accents */
  --gold: #c3a468;
  --acid: #5fae8c;        /* brand accent (name kept) */
  --acid-deep: #3f8069;
  --cyan: #6a97c4;
  --magenta: #d98b7a;

  --blue: #1a202a;
  --blue-soft: #232935;
  --green: #5fae8c;
  --green-deep: #3f8069;
  --red: #d98b7a;
  --red-deep: #b5604c;
  --neutral: #262c35;

  /* heatmap (read by app.js — names must stay) */
  --heatmap-profit-low: #1d2b25;
  --heatmap-profit-high: #5fae8c;
  --heatmap-loss-low: #2f221e;
  --heatmap-loss-high: #d98b7a;
  --heatmap-neutral: #242a33;
  --heatmap-missing: rgba(233, 230, 223, 0.05);
  --heatmap-border: rgba(0, 0, 0, 0.35);
  --heatmap-text: #e9e6df;

  /* structure */
  --r: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --shadow: 0 26px 60px rgba(0, 0, 0, 0.4);
  --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.26);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --glow: 0 0 0 3px rgba(95, 174, 140, 0.16);
  --button-ghost: rgba(233, 230, 223, 0.05);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --tnum: "tnum" 1, "cv01" 1;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg-0: #f5f2ea;
  --bg-1: #efece2;
  --bg-2: #e6e2d6;

  --panel: rgba(255, 254, 250, 0.92);
  --panel-strong: #fffdf8;
  --panel-soft: rgba(247, 244, 236, 0.86);

  --ink: #23262b;
  --muted: #6c7077;
  --line: rgba(35, 38, 43, 0.1);
  --hero-line: rgba(35, 38, 43, 0.13);

  --gold: #9a7b3c;
  --acid: #2f7d5b;
  --acid-deep: #245e45;
  --cyan: #3f6f9c;
  --magenta: #b5604c;

  --blue: #23262b;
  --blue-soft: #eceee5;
  --green: #2f7d5b;
  --green-deep: #245e45;
  --red: #b5604c;
  --red-deep: #8f4636;
  --neutral: #e7e3d7;

  --heatmap-profit-low: #e4f0dc;
  --heatmap-profit-high: #2f7d5b;
  --heatmap-loss-low: #f6e2da;
  --heatmap-loss-high: #b5604c;
  --heatmap-neutral: #e2ded1;
  --heatmap-missing: rgba(35, 38, 43, 0.05);
  --heatmap-border: rgba(35, 38, 43, 0.16);
  --heatmap-text: #23262b;

  --shadow: 0 26px 56px rgba(60, 52, 30, 0.14);
  --shadow-soft: 0 12px 28px rgba(60, 52, 30, 0.1);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --glow: 0 0 0 3px rgba(47, 125, 91, 0.14);
  --button-ghost: rgba(35, 38, 43, 0.045);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: var(--bg-0);
  background-image:
    radial-gradient(120% 90% at 8% -10%, rgba(95, 174, 140, 0.07), transparent 55%),
    radial-gradient(120% 90% at 100% 0%, rgba(195, 164, 104, 0.06), transparent 55%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 55%, var(--bg-2));
  background-attachment: fixed;
  position: relative;
}

/* whisper of paper grain for warmth — no glare, soft-light blend */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.025;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- monitor / fullscreen modes (behavior preserved) ---- */
body.monitorMode { overflow: hidden; }
body.monitorMode .masthead,
body.monitorMode .kpis { display: none; }

body.monitorMode #status {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 120;
  width: min(920px, calc(100vw - 28px));
  transform: translateX(-50%);
  margin: 0;
}

body.monitorMode .monitorDock {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 125;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-radius: var(--r);
  background: var(--panel-strong);
  border: 1px solid var(--hero-line);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(16px);
}

body.monitorMode .panel[data-page]:not(.monitorTarget) { display: none !important; }

body.monitorMode .monitorTarget {
  position: fixed;
  inset: 14px;
  z-index: 100;
  margin: 0 !important;
  border-radius: var(--r-lg);
  overflow: auto;
}

body.monitorMode .monitorTarget .panelHeader {
  position: sticky;
  top: 0;
  z-index: 3;
}

body.wallBrowserFullscreen { overflow: hidden; }

body.wallBrowserFullscreen #status,
body.wallBrowserFullscreen .monitorTarget .panelHeader,
body.wallBrowserFullscreen .monitorTarget .wallToolbar,
body.wallBrowserFullscreen .monitorTarget .wallPages { display: none; }

body.wallBrowserFullscreen .monitorTarget {
  inset: 0;
  margin: 0 !important;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  background: var(--bg-0);
}

body.wallBrowserFullscreen .monitorTarget .wallGrid { padding: 12px; gap: 12px; }
body.wallBrowserFullscreen .monitorTarget .wallCard { gap: 10px; padding: 12px; }
body.wallBrowserFullscreen .monitorTarget .wallDragHandle,
body.wallBrowserFullscreen .monitorTarget .wallCardTitle .timestamp,
body.wallBrowserFullscreen .monitorTarget .wallCardFooter span:first-child { display: none; }
body.wallBrowserFullscreen .monitorTarget .wallCardHeader { gap: 8px; }
body.wallBrowserFullscreen .monitorTarget .wallCardTitle h3 { margin: 0; font-size: 0.95rem; }
body.wallBrowserFullscreen .monitorTarget .wallCardMetrics strong { font-size: 0.98rem; }
body.wallBrowserFullscreen .monitorTarget .wallCardMetrics span,
body.wallBrowserFullscreen .monitorTarget .wallCardFooter { font-size: 0.78rem; }
body.wallBrowserFullscreen .monitorTarget .wallCardFooter { justify-content: flex-end; }
body.wallBrowserFullscreen .monitorTarget .wallChart { min-height: 200px; }
body.wallBrowserFullscreen .monitorTarget .wallDropSpot { min-height: 260px; }

body.wallPointerDragging { user-select: none; cursor: grabbing; }

/* ---- shell ---- */
.shell {
  width: min(1500px, 100vw);
  margin: 0 auto;
  padding: 20px 16px 60px;
}

@media (min-width: 640px) {
  .shell {
    width: min(1500px, calc(100vw - 40px));
    padding: 34px 0 72px;
  }
}

.masthead {
  position: relative;
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .masthead {
    gap: 16px;
    margin-bottom: 20px;
  }
}

/* ---- reveal animation (gentle, slow, refined) ---- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero,
.utilityBar,
.menuSystem,
.kpi,
.panel {
  animation: riseIn 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.utilityBar { animation-delay: 30ms; }
.hero { animation-delay: 90ms; }
.menuSystem { animation-delay: 160ms; }
.kpis .kpi:nth-child(1) { animation-delay: 210ms; }
.kpis .kpi:nth-child(2) { animation-delay: 260ms; }
.kpis .kpi:nth-child(3) { animation-delay: 310ms; }
.kpis .kpi:nth-child(4) { animation-delay: 360ms; }
.kpis .kpi:nth-child(5) { animation-delay: 410ms; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  /* Exception: busy indicators must keep moving. Without this the blanket rule
     above freezes every spinner into a static ring, so "working" looks stuck.
     Slowed slightly, and it is small/localized rather than large-field motion. */
  .spinner { animation: spin 1s linear infinite !important; }
}

/* ---- utility bar ---- */
.utilityBar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--r);
  background: var(--panel-strong);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft), var(--shadow-inset);
  backdrop-filter: blur(16px);
  color: var(--muted);
  font-size: 0.75rem;
}

@media (min-width: 640px) {
  .utilityBar {
    justify-content: space-between;
    gap: 16px;
    padding: 11px 18px;
    font-size: 0.9rem;
  }
}

.utilityItem {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.brandMark {
  display: inline-flex;
  flex: none;
  border-radius: 50%;
  line-height: 0;
  opacity: 0.94;
  transition: opacity 120ms ease, transform 120ms ease;
}
.brandMark:hover { opacity: 1; transform: scale(1.06); }
.brandMark:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
.brandMark img { display: block; width: 30px; height: 30px; }

.utilityLabel {
  color: var(--gold);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.buttonCompact {
  padding: 6px 10px;
  font-size: 0.7rem;
}

@media (min-width: 640px) {
  .buttonCompact {
    padding: 8px 14px;
    font-size: 0.8rem;
  }
}

.utilityBar select {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 11px;
  background: var(--panel-soft);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
}

.utilityBar .logFile {
  color: var(--muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

/* ---- hero ---- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 20px;
  overflow: hidden;
  border-radius: var(--r-lg);
  color: var(--ink);
  border: 1px solid var(--hero-line);
  box-shadow: var(--shadow), var(--shadow-inset);
  background:
    radial-gradient(130% 120% at 100% 0%, rgba(195, 164, 104, 0.08), transparent 46%),
    linear-gradient(155deg, var(--panel-strong), var(--bg-1));
}

@media (min-width: 768px) {
  .hero {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    padding: 40px 40px;
  }
}

.hero > div,
.hero .actions { position: relative; z-index: 1; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

h1, h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
}

h1 {
  max-width: 860px;
  font-size: clamp(1.6rem, 4vw, 4.6rem);
  line-height: 1.02;
  font-optical-sizing: auto;
}

h2 { font-size: clamp(1.2rem, 2vw, 2.3rem); line-height: 1.08; }

/* /ticker's headline is longer than the dashboard's ("Swoopr Trade"), so
   the shared h1's 860px cap wrapped it onto two lines even with room to
   spare. Widen it here rather than on the shared h1 rule. */
.heroWide h1 { max-width: 1180px; font-size: clamp(2.2rem, 3.6vw, 3.6rem); }

.heroTagline {
  margin: 0;
  color: var(--acid);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
}

.lede {
  max-width: 640px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ---- menu ---- */
.menuSystem {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft), var(--shadow-inset);
  backdrop-filter: blur(16px);
}

@media (min-width: 768px) {
  .menuSystem {
    gap: 18px;
    padding: 22px 24px;
  }
}

.menuSystemIntro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.menuSystemIntro h2 { font-size: 1.5rem; line-height: 1; }

.menuPills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

@media (min-width: 768px) {
  .menuPills {
    gap: 10px;
  }
}

.menuButton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--button-ghost);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  transition: transform 200ms ease, background-color 220ms ease, color 220ms ease,
    border-color 220ms ease, box-shadow 220ms ease;
}

@media (min-width: 768px) {
  .menuButton {
    gap: 8px;
    padding: 10px 18px;
    font-size: 0.88rem;
  }
}

.menuButton:hover {
  transform: translateY(-1px);
  color: var(--ink);
  border-color: color-mix(in srgb, var(--acid) 40%, var(--line));
  background: color-mix(in srgb, var(--acid) 7%, transparent);
}

.menuButton.active,
.menuButton[aria-selected="true"] {
  color: #f7f4ec;
  background: linear-gradient(180deg, var(--acid), var(--acid-deep));
  border-color: transparent;
  box-shadow: var(--glow), var(--shadow-soft);
}

:root[data-theme="light"] .menuButton.active,
:root[data-theme="light"] .menuButton[aria-selected="true"] { color: #fbfaf5; }

/* The header's Swoopr Account link gets the same "active" class toggled on
   it as the Navigate pills (they share one data-page-target click handler),
   but it's a .button.ghost, not a .menuButton — without this it never
   visually showed which page you're actually on. */
#accountLink.active {
  color: #f7f4ec;
  background: linear-gradient(180deg, var(--acid), var(--acid-deep));
  border-color: transparent;
  box-shadow: var(--glow), var(--shadow-soft);
}
:root[data-theme="light"] #accountLink.active { color: #fbfaf5; }

.menuHint {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* ---- buttons ---- */
.button {
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 10px 18px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.005em;
  transition: transform 200ms ease, background-color 220ms ease, color 220ms ease,
    border-color 220ms ease, box-shadow 220ms ease;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

@media (min-width: 768px) {
  .button {
    padding: 12px 22px;
    font-size: 0.9rem;
    min-height: auto;
  }
}

.button:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.button:active { transform: translateY(0); box-shadow: none; }

.button:focus-visible,
select:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--acid) 80%, white);
  outline-offset: 2px;
}

.button.primary {
  color: #f7f4ec;
  background: linear-gradient(180deg, var(--acid), var(--acid-deep));
  box-shadow: var(--shadow-soft);
}
.button.primary:hover { box-shadow: var(--glow), var(--shadow-soft); }

.button.secondary {
  color: var(--ink);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--acid) 45%, var(--line));
}
.button.secondary:hover { border-color: var(--acid); background: color-mix(in srgb, var(--acid) 6%, transparent); }

.button.ghost {
  color: var(--ink);
  background: var(--button-ghost);
  border: 1px solid var(--line);
}

/* ---- status ---- */
.status {
  margin-top: 18px;
  padding: 15px 18px;
  border-radius: var(--r);
  color: var(--ink);
  font-size: 0.9rem;
  background: color-mix(in srgb, var(--gold) 12%, var(--panel-strong));
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
}

.status.error {
  color: var(--ink);
  background: color-mix(in srgb, var(--red) 14%, var(--panel-strong));
  border-color: color-mix(in srgb, var(--red) 45%, transparent);
}

/* ---- KPIs ---- */
.kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}

@media (min-width: 640px) {
  .kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .kpis {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

[data-page][hidden] { display: none !important; }
.kpis[data-page],
.panel[data-page] { margin-top: 20px; }

.kpi {
  position: relative;
  padding: 22px 22px 20px;
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft), var(--shadow-inset);
  backdrop-filter: blur(14px);
  transition: transform 240ms ease, box-shadow 240ms ease;
}

.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow), var(--shadow-inset); }

.kpi span {
  display: block;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.kpi strong {
  display: block;
  margin-top: 12px;
  font-size: clamp(1.5rem, 2.1vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--tnum);
}

/* ---- panels ---- */
.panel {
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft), var(--shadow-inset);
  backdrop-filter: blur(14px);
}

.accountNav {
  padding: 18px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.viewAsToggle { display: flex; align-items: center; gap: 8px; }
.viewAsToggle .utilityLabel { margin-right: 2px; }
.viewAsToggle .button[data-view-as].active,
.viewAsToggle .button[data-view-as][aria-pressed="true"] {
  border-color: var(--acid);
  background: color-mix(in srgb, var(--acid) 14%, transparent);
  color: var(--ink);
}

.panelHeader {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px;
  background: var(--panel-soft);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 640px) {
  .panelHeader {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 26px;
  }
}

.panelControls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}

@media (min-width: 640px) {
  .panelControls {
    justify-content: flex-end;
    gap: 10px;
  }
}

.controlLabel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.timestamp {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tableWrap { overflow: auto; }

.chartSection,
.backtestGrid {
  display: grid;
  gap: 14px;
  padding: 14px 16px 20px;
}

@media (min-width: 768px) {
  .chartSection,
  .backtestGrid {
    gap: 18px;
    padding: 22px 26px 26px;
  }
}

.chartCard,
.backtestSummary,
.backtestGraphWrap,
.logsList,
.settingsGrid {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel-strong);
}

.chartCard { padding: 20px; }
.chartCardWide { min-height: 360px; }

.chartCardHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
}
.chartCardHeader .timestamp { font-family: var(--font-body); }

.chart { min-height: 260px; }

.chartSvgWrap {
  position: relative;
  overflow: visible;
  border-radius: var(--r);
  background: linear-gradient(180deg, color-mix(in srgb, var(--acid) 4%, transparent), transparent 62%);
}

.chartSvg {
  width: 100%;
  height: auto;
  display: block;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.chartTooltip {
  position: absolute;
  z-index: 3;
  min-width: 170px;
  max-width: 260px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: var(--panel-strong);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  pointer-events: none;
  transform: translate(12px, -12px);
  opacity: 0;
}

.chartTooltipTitle {
  margin-bottom: 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
}

.chartTooltipRow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.chartTooltipRow strong { color: var(--ink); font-weight: 600; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.86rem;
}

.legendItem { display: inline-flex; align-items: center; gap: 8px; }

.legendToggle {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 10px;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}
.legendToggle:hover { background: color-mix(in srgb, var(--acid) 8%, transparent); border-color: var(--line); }
.legendToggle:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
.legendToggle[aria-pressed="false"] { opacity: 0.4; text-decoration: line-through; }
.legendToggle[aria-pressed="false"] .legendSwatch { filter: grayscale(1); }

.legendSwatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}

.historyCards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .historyCards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .historyCards {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
  }
}

/* ---- heatmaps ---- */
.heatmapPanel {
  margin: 0 26px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--panel-strong);
}

.heatmapHeader { border-bottom: 1px solid var(--line); }

.heatmapSourceBar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px 0;
}
.heatmapSourceBar select {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  background: var(--panel-soft);
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  min-width: 220px;
}

.heatmapControls input,
.heatmapControls select { min-width: 138px; }

.heatmapBody {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 16px 16px 20px;
}

@media (min-width: 768px) {
  .heatmapBody {
    grid-template-columns: minmax(290px, 340px) minmax(0, 1fr);
    gap: 18px;
    padding: 20px 26px 26px;
  }
}

.heatmapSummary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-content: start;
}

@media (min-width: 640px) {
  .heatmapSummary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

.heatmapMetricCard {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--panel);
}

.heatmapMetricCard span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.heatmapMetricCard strong {
  font-size: 1.05rem;
  line-height: 1.35;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--tnum);
}

.heatmapChartWrap {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--panel-strong);
  overflow: hidden;
}

.heatmapLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  color: var(--muted);
  font-size: 0.78rem;
}

.heatmapLegendItem { display: inline-flex; align-items: center; gap: 8px; }
.heatmapLegendMeta { margin-left: auto; font-variant-numeric: tabular-nums; }

.heatmapLegendSwatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 1px solid var(--heatmap-border);
}

.heatmapChart {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 2px;
}

.heatmapSvgWrap { position: relative; width: fit-content; min-width: 100%; }
.heatmapSvg { display: block; color: var(--heatmap-text); font-variant-numeric: tabular-nums; }

.heatmapAxisLabel,
.heatmapMonthLabel {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.heatmapTooltip {
  position: absolute;
  z-index: 3;
  min-width: 180px;
  max-width: 260px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: var(--panel-strong);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  pointer-events: none;
  transform: translate(12px, -12px);
}

.heatmapCell { transition: transform 160ms ease, opacity 160ms ease, stroke 160ms ease; }
.heatmapCell:hover {
  transform: translateY(-1px);
  stroke: color-mix(in srgb, var(--acid) 70%, white);
  stroke-width: 1.25;
}
.heatmapCell--missing { opacity: 0.85; }

.historyMiniCard {
  padding: 18px;
  border-radius: var(--r);
  background: var(--panel-strong);
  border: 1px solid var(--line);
}

/* weekly P/L — quarter columns, weeks running down, value beside box */
.weeklyQuarters {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 6px;
  align-items: flex-start;
}
.wqCol { flex: none; min-width: 172px; display: grid; gap: 4px; }
.wqHead {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 4px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.wqTotal { font-variant-numeric: tabular-nums; }
.wqWeek {
  display: grid;
  grid-template-columns: 16px auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
  border-radius: 6px;
}
.wqWeek:hover { background: var(--panel-soft); }
.wqBox { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--heatmap-border); }
.wqDate { color: var(--muted); font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.wqVal { text-align: right; font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.historyMiniCard h3 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; }
.historyMiniCard .timestamp { font-size: 0.78rem; }
.miniChart { margin-top: 12px; min-height: 180px; }

/* ---- wall ---- */
.wallToolbar {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 0 26px 10px;
}

.wallHint {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.wallPages {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 26px 0;
}

.wallPageChip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
}

.wallPageChip strong {
  display: inline-flex;
  min-width: 26px;
  justify-content: center;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  color: var(--ink);
  background: var(--button-ghost);
  font-variant-numeric: tabular-nums;
}

.wallPageChip.active {
  color: #f7f4ec;
  background: linear-gradient(180deg, var(--acid), var(--acid-deep));
  border-color: transparent;
  box-shadow: var(--shadow-soft);
}
.wallPageChip.active strong { color: #f7f4ec; background: rgba(255, 255, 255, 0.18); }

.wallPageChip--drop {
  outline: 2px dashed color-mix(in srgb, var(--acid) 80%, white);
  outline-offset: 2px;
}

.wallGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 12px 16px 20px;
}

@media (min-width: 640px) {
  .wallGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 16px 20px 24px;
  }
}

@media (min-width: 1024px) {
  .wallGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding: 16px 26px 26px;
  }
}

.wallCard {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: var(--r-lg);
  background: var(--panel-strong);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft), var(--shadow-inset);
  cursor: grab;
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

.wallCard:hover { transform: translateY(-2px); box-shadow: var(--shadow), var(--shadow-inset); }
.wallCard--dragging { opacity: 0.55; cursor: grabbing; }

.wallCard--drop {
  border-color: color-mix(in srgb, var(--acid) 60%, transparent);
  box-shadow: var(--glow), var(--shadow-soft);
}

.wallDropSpot {
  display: grid;
  place-content: center;
  gap: 8px;
  min-height: 280px;
  padding: 16px;
  border: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent);
  border-radius: var(--r-lg);
  background: var(--panel-soft);
  color: var(--muted);
  cursor: copy;
  font: inherit;
  text-align: center;
}

.wallDropSpot span {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wallDropSpot strong { color: var(--ink); font-size: 0.95rem; }

.wallDropSpot--drop {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--acid) 70%, white);
  background: color-mix(in srgb, var(--acid) 12%, var(--panel-soft));
  box-shadow: var(--glow), var(--shadow-soft);
}

.wallCardHeader {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.wallCardTitle h3 { margin: 8px 0 2px; font-family: var(--font-display); font-weight: 500; font-size: 1.12rem; line-height: 1.15; }
.wallCardTitle .timestamp { font-size: 0.76rem; }

.wallDragHandle {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--button-ghost);
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.wallCardMetrics { text-align: right; }

.wallCardMetrics strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--tnum);
}

.wallCardMetrics span,
.wallCardFooter {
  color: var(--muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.wallCardFooter {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.wallChart { min-height: 180px; cursor: grab; touch-action: none; }
.wallCard--dragging .wallChart { cursor: grabbing; }

/* ---- rebalance ---- */
.rebalanceCash {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.rebalanceIntro {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 26px 4px;
}

.rebalanceSummary { padding: 12px 26px 4px; }

.rebalanceMetrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 640px) {
  .rebalanceMetrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (min-width: 1024px) {
  .rebalanceMetrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
  }
}

.rebalanceMetric {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--panel);
}

.rebalanceMetric span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rebalanceMetric strong {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--tnum);
}

.rebalanceWarn {
  margin-top: 14px;
  padding: 13px 16px;
  border-radius: var(--r);
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.5;
  background: color-mix(in srgb, var(--gold) 12%, var(--panel-strong));
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-left: 4px solid var(--gold);
}

.rebalanceSteps {
  display: grid;
  gap: 12px;
  padding: 16px 26px 26px;
}

.rebalanceStep {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--panel-strong);
  box-shadow: var(--shadow-inset);
}

@media (min-width: 768px) {
  .rebalanceStep {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 16px 18px;
  }
}

/* left edge = lifetime up/down for the symphony */
.rebalanceStep.isUp { border-left: 4px solid var(--green); }
.rebalanceStep.isDown { border-left: 4px solid var(--red); }
.rebalanceStep.isShortfall { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }

.rebalanceOrder.up { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, var(--line)); background: color-mix(in srgb, var(--green) 14%, var(--panel-soft)); }
.rebalanceOrder.down { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, var(--line)); background: color-mix(in srgb, var(--red) 14%, var(--panel-soft)); }
.rebalanceLife { font-weight: 700; }

.rebalanceOrder {
  display: grid;
  place-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.rebalanceStepMain { display: grid; gap: 8px; min-width: 0; }

.rebalanceStepTop {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.rebalanceStepTop h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.1;
}

.rebalanceStepMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  color: var(--muted);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.rebalanceTag {
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-weight: 700;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.rebalanceCashProj { font-weight: 600; }

.rebalanceActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.rebalanceConfirm {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 4px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}

.rebalanceDone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  color: var(--green);
  font-size: 0.82rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--green) 14%, transparent);
}

.rebalanceError {
  flex-basis: 100%;
  text-align: right;
  color: var(--red);
  font-size: 0.8rem;
  font-weight: 600;
}

.rebalanceLocked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
}

.rebalanceNote {
  margin-top: 14px;
  padding: 13px 16px;
  border-radius: var(--r);
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.5;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
}

/* ---- symphony rename ---- */
td.name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.symphonyName { min-width: 0; }

.renameBtn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.82rem;
  opacity: 0;
  transition: opacity 160ms ease, color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

tbody tr:hover .renameBtn { opacity: 1; }
.renameBtn:hover { color: var(--acid); border-color: var(--line); background: var(--button-ghost); }
.renameBtn:focus-visible { opacity: 1; }

.renameEditor {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.renameInput {
  flex: 1;
  min-width: 120px;
  border: 1px solid color-mix(in srgb, var(--acid) 45%, var(--line));
  border-radius: 10px;
  padding: 8px 11px;
  background: var(--panel-soft);
  color: var(--ink);
  font: inherit;
  font-family: var(--font-body);
}

/* ---- analytics: drift + scatter ---- */
.analyticsGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 768px) {
  .analyticsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

.driftList { display: grid; gap: 10px; padding: 4px 2px; }
.driftRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
}

@media (min-width: 640px) {
  .driftRow {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) auto;
    gap: 12px;
    font-size: 0.84rem;
  }
}
.driftName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.driftTrack {
  position: relative;
  height: 16px;
  border-radius: 6px;
  background: var(--panel-soft);
}
.driftTrack::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: color-mix(in srgb, var(--muted) 45%, transparent);
}
.driftBar { position: absolute; top: 2px; bottom: 2px; border-radius: 5px; }
.driftBar.over { background: var(--red); }
.driftBar.under { background: var(--green); }
.driftVal { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }

.scatterWrap { padding: 4px 2px; }
.scatterSvg { width: 100%; height: auto; display: block; color: var(--muted); }
.scatterAxis { fill: var(--muted); font-size: 11px; font-weight: 600; }

/* ---- rebalance waterfall ---- */
.rebalanceWaterfallWrap { padding: 4px 26px 24px; }
.rebalanceWaterfallWrap[hidden] { display: none; }
.waterfall { display: grid; gap: 8px; margin-top: 12px; }
.wfRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
}

@media (min-width: 640px) {
  .wfRow {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
    gap: 12px;
    font-size: 0.84rem;
  }
}
.wfLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.wfTrack { height: 18px; border-radius: 6px; background: var(--panel-soft); overflow: hidden; }
.wfBar { display: block; height: 100%; border-radius: 6px; }
.wfBar.up { background: var(--green); }
.wfBar.down { background: var(--red); }
.wfBar.total { background: var(--gold); }
.wfVal { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.wfVal.up { color: var(--green); }
.wfVal.down { color: var(--red); }
.wfVal.total { color: var(--ink); }

.dashboardChartSection { margin-top: 18px; }
.dashboardChartSection .chartCard { min-height: 340px; }

/* ---- intraday ---- */
.intradaySection {
  margin: 0 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--panel-strong);
}

.intradayHeader { border-bottom: 1px solid var(--line); }

.intradayNote { margin: 16px 26px 0; }

.intradaySection .chartCard {
  margin: 16px 26px;
}

.intradaySection .historyCards {
  padding: 0 26px 22px;
}

/* ---- loading spinners ---- */
@keyframes spin { to { transform: rotate(360deg); } }

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--acid) 30%, transparent);
  border-top-color: var(--acid);
  animation: spin 0.7s linear infinite;
}

.globalSpinner {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 600;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  animation: riseIn 240ms ease both;
}
.globalSpinner[hidden] { display: none; }

.loadingBlock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--muted);
  font-weight: 600;
}
.loadingBlock .spinner { width: 22px; height: 22px; border-width: 3px; }

/* ---- market hours indicator ---- */
.marketHours {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

.marketHours::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}

.marketHours.isOpen {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 40%, transparent);
  background: color-mix(in srgb, var(--green) 10%, transparent);
}
.marketHours.isOpen::before { background: var(--green); box-shadow: 0 0 8px var(--green); }

.marketHours.isClosed { color: var(--muted); }
.marketHours.isClosed::before { background: var(--red); }

/* ---- orders ---- */
.ordersList {
  display: grid;
  gap: 10px;
  padding: 16px 26px 26px;
}

.orderRow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--panel-strong);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .orderRow {
    grid-template-columns: minmax(0, 1.4fr) 70px minmax(0, 1fr) 130px minmax(0, 1.2fr);
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
    font-size: 0.86rem;
  }
}

.orderRow--active { border-left: 3px solid var(--gold); }
.orderRow--done { border-left: 3px solid var(--green); }
.orderRow--bad { border-left: 3px solid var(--red); }
.orderRow--neutral { border-left: 3px solid var(--line); }

.orderMain { display: grid; gap: 2px; min-width: 0; }
.orderMain strong { font-size: 0.98rem; letter-spacing: -0.01em; }
.orderName {
  color: var(--muted);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orderSide { font-weight: 700; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.04em; }
.orderQty { color: var(--ink); font-weight: 600; }
.orderTime { color: var(--muted); font-size: 0.78rem; }
.orderReason { grid-column: 1 / -1; color: var(--muted); font-size: 0.78rem; }

.orderBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.orderBadge--active { color: var(--gold); background: color-mix(in srgb, var(--gold) 18%, transparent); }
.orderBadge--done { color: var(--green); background: color-mix(in srgb, var(--green) 16%, transparent); }
.orderBadge--bad { color: var(--red); background: color-mix(in srgb, var(--red) 16%, transparent); }
.orderBadge--neutral { color: var(--muted); background: color-mix(in srgb, var(--muted) 18%, transparent); }

/* ---- trade preview (dry run) ---- */
.rebalancePreview {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 14px 16px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 0.86rem;
}

.rebalancePreview.isError { color: var(--red); }

.rebalancePreviewHead {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.rebalancePreviewHead strong { font-family: var(--font-display); font-weight: 500; font-size: 1rem; }
.rebalancePreviewHead span { color: var(--muted); font-variant-numeric: tabular-nums; }
.rebalancePreviewHead button { margin-left: auto; }

.rebalancePreviewTable { overflow-x: auto; }
.rebalancePreviewTable table {
  width: 100%;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
}
.rebalancePreviewTable th {
  position: static;
  padding: 8px 10px;
  text-align: right;
  font-size: 0.68rem;
  color: var(--muted);
  background: transparent;
  border-bottom: 1px solid var(--line);
  backdrop-filter: none;
}
.rebalancePreviewTable th:first-child,
.rebalancePreviewTable td:first-child { text-align: left; }
.rebalancePreviewTable td {
  padding: 8px 10px;
  text-align: right;
  font-size: 0.84rem;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.rebalancePreviewTable tbody tr:last-child td { border-bottom: 0; }

/* ---- forms ---- */
.formRow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 0 16px 16px;
}

@media (min-width: 768px) {
  .formRow {
    grid-template-columns: minmax(0, 1.7fr) 180px auto;
    gap: 12px;
    padding: 0 26px 20px;
  }
}

.formRow input,
.formRow select,
.settingsGrid input,
.settingsGrid select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--panel-soft);
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  min-height: 44px;
  font-size: 16px;
}

@media (min-width: 768px) {
  .formRow input,
  .formRow select,
  .settingsGrid input,
  .settingsGrid select {
    padding: 11px 13px;
    font-size: inherit;
  }
}

.formRow input:focus,
.formRow select:focus,
.settingsGrid input:focus,
.settingsGrid select:focus { border-color: color-mix(in srgb, var(--acid) 55%, var(--line)); box-shadow: var(--glow); }

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

@media (min-width: 768px) {
  .backtestGrid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
  }
}

.backtestSummary,
.backtestGraphWrap { padding: 18px; min-height: 220px; }

.summaryCard {
  display: grid;
  gap: 6px;
  padding: 15px 17px;
  border-radius: var(--r);
  background: var(--panel);
  border: 1px solid var(--line);
}

.summaryCard span {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.summaryCard strong { font-size: 1.02rem; font-weight: 600; font-variant-numeric: tabular-nums; font-feature-settings: var(--tnum); }

.backtestEmpty,
.backtestGraphPlaceholder,
.logEmpty {
  color: var(--muted);
  font-weight: 500;
}

.backtestGraphWrap img { width: 100%; display: block; border-radius: var(--r); }

/* ---- logs ---- */
.logsList { padding: 0; overflow: hidden; }

.logRow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .logRow {
    grid-template-columns: 190px 90px 150px minmax(0, 1fr);
    gap: 12px;
    padding: 13px 18px;
    font-size: 0.86rem;
  }
}

.logRow:last-child { border-bottom: 0; }
.logRow--debug { background: var(--panel-strong); }
.logRow--info { background: color-mix(in srgb, var(--cyan) 8%, var(--panel-strong)); }
.logRow--warn { background: color-mix(in srgb, var(--gold) 12%, var(--panel-strong)); }
.logRow--error { background: color-mix(in srgb, var(--red) 12%, var(--panel-strong)); }

.logEvent { font-weight: 600; color: var(--ink); }

.logBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.logBadge--debug { color: var(--muted); background: color-mix(in srgb, var(--muted) 20%, transparent); }
.logBadge--info { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 18%, transparent); }
.logBadge--warn { color: var(--gold); background: color-mix(in srgb, var(--gold) 20%, transparent); }
.logBadge--error { color: var(--red); background: color-mix(in srgb, var(--red) 20%, transparent); }
.logBadge--ok { color: var(--acid); background: color-mix(in srgb, var(--acid) 20%, transparent); }

.usersList { padding: 0 26px 22px; display: grid; gap: 10px; }

.userRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 10px);
  background: var(--panel-strong);
}
.userRow .panelControls { justify-content: flex-end; }

.logMeta {
  color: var(--muted);
  font-size: 0.84rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- settings ---- */
.settingsGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 14px 16px 20px;
}

@media (min-width: 768px) {
  .settingsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 16px 20px 24px;
  }
}

@media (min-width: 1024px) {
  .settingsGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 18px 26px 26px;
  }
}

.settingsGrid label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.settingsGrid label > span { color: var(--muted); }

.settingsGroup { border-top: 1px solid var(--line); }
.settingsGroup:first-of-type { border-top: none; }

.settingsGroupTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 26px;
  cursor: pointer;
  list-style: none;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  user-select: none;
}
.settingsGroupTitle::-webkit-details-marker { display: none; }
.settingsGroupTitle::after {
  content: '+';
  font-size: 1rem;
  color: var(--muted);
  transition: transform 200ms ease;
}
.settingsGroup[open] > .settingsGroupTitle::after { content: '\2212'; }
.settingsGroupTitle:hover { background: color-mix(in srgb, var(--acid) 6%, transparent); }
.settingsGroupTitle:focus-visible { outline: 2px solid var(--acid); outline-offset: -2px; }

.checkLabel { grid-template-columns: auto 1fr; align-items: center; }
.checkLabel input { width: auto; justify-self: start; accent-color: var(--acid); }

.settingsActions {
  margin: 22px 26px 26px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---- table (statement ledger) ---- */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 100%;
}

@media (min-width: 768px) {
  table {
    min-width: 1180px;
  }
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 15px 14px;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--panel-soft);
  border-bottom: 1px solid var(--hero-line);
  backdrop-filter: blur(14px);
}

th:first-child,
td:first-child { text-align: left; }

td {
  padding: 15px 14px;
  text-align: right;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--tnum);
  border-bottom: 1px solid var(--line);
  background: transparent;
}

tbody tr { transition: background-color 160ms ease; }
tbody tr:hover td { background: color-mix(in srgb, var(--acid) 5%, transparent); }

td.name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}

td.good,
.profit { color: var(--green); font-weight: 600; }

td.bad,
.loss { color: var(--red); font-weight: 600; }

/* proposal cells — soft tinted washes, not saturated blocks */
td.proposal { font-weight: 600; }
td.proposal.neutral { color: var(--ink); background: color-mix(in srgb, var(--neutral) 60%, transparent); }
td.proposal.green { color: var(--green); background: color-mix(in srgb, var(--green) 15%, transparent); }
td.proposal.greenDeep { color: var(--green); background: color-mix(in srgb, var(--green) 24%, transparent); }
td.proposal.red { color: var(--red); background: color-mix(in srgb, var(--red) 15%, transparent); }
td.proposal.redDeep { color: var(--red); background: color-mix(in srgb, var(--red) 24%, transparent); }

th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
th.sortable:focus-visible { outline: 2px solid var(--acid); outline-offset: -2px; }
th.sortable::after {
  content: " \2195";
  opacity: 0.35;
  margin-left: 4px;
  font-size: 0.75rem;
}
th.sortable[aria-sort="ascending"]::after { content: " \25B2"; opacity: 1; }
th.sortable[aria-sort="descending"]::after { content: " \25BC"; opacity: 1; }

tfoot td {
  padding: 15px 14px;
  text-align: right;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--tnum);
  background: var(--panel-soft);
  border-top: 1px solid var(--hero-line);
  border-bottom: 0;
  font-weight: 700;
  color: var(--ink);
}
tfoot td:first-child { text-align: left; }
tfoot td.totalsLabel {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  font-weight: 700;
}
tfoot td.good { color: var(--green); }
tfoot td.bad { color: var(--red); }

.tickerBuyForm {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px 18px;
  margin: 0 26px 20px;
}
/* Stack each label above its control so every field is the same height and the
   submit button lines up flush with the control row (no floating pill). */
.tickerBuyForm .controlLabel {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 150px;
}
.tickerBuyForm textarea,
.tickerBuyForm input,
.tickerBuyForm select {
  height: 42px;
  box-sizing: border-box;
}
.tickerBuyForm textarea {
  resize: vertical;
  padding-top: 9px;
  line-height: 1.3;
}
.tickerBuyForm .button {
  align-self: end;
  height: 42px;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
}

.top10Bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 26px 16px;
  flex-wrap: wrap;
}
#top10GenerateButton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.top10PromptEditor {
  margin: 0 26px 20px;
}
.top10PromptEditor textarea {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
}
.top10PromptActions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.panelSubHeader {
  margin: 8px 26px 8px;
}
/* ---- monthly P/L grid (year rows x month columns) ---- */
.monthlyGrid {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.monthlyGrid th,
.monthlyGrid td {
  padding: 6px 8px;
  text-align: center;
  white-space: nowrap;
}
.monthlyGrid thead th {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.monthlyGrid th.myYear {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
}
.monthlyGrid td.myCell {
  min-width: 62px;
}
.myBox {
  display: block;
  height: 6px;
  border-radius: 3px;
  margin-bottom: 4px;
}
.myBoxEmpty {
  background: var(--heatmap-missing, #cbd5e1);
  opacity: 0.35;
}
.myVal {
  font-variant-numeric: tabular-nums;
}
.myVal.profit,
.myTotal.profit { color: var(--profit, #12a05f); }
.myVal.loss,
.myTotal.loss { color: var(--loss, #d24747); }
.monthlyGrid td.myTotal {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--line, rgba(148, 163, 184, 0.22));
}
.monthlyGrid tbody tr + tr {
  border-top: 1px solid var(--line, rgba(148, 163, 184, 0.12));
}

/* ---- my credentials ---- */
.credentialsLede {
  margin: 0 26px 18px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
  max-width: 70ch;
}
.credState {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  margin-left: 6px;
}
.credSet { color: var(--green, #12a05f); }
.credUnset { color: var(--muted); opacity: 0.7; }
.credentialsNote { font-size: 0.8rem; color: var(--muted); align-self: center; }
#credentialsDeleteButton { color: var(--red, #d24747); }

.sessionSecurity {
  margin: 0 26px 22px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--red, #d24747) 30%, var(--line));
  border-radius: var(--r-md, 10px);
  display: grid;
  gap: 12px;
}
.sessionSecurity strong { color: var(--ink); }
#revokeSessionsButton { color: var(--red, #d24747); border-color: color-mix(in srgb, var(--red, #d24747) 45%, var(--line)); }
#revokeSessionsButton:hover { background: color-mix(in srgb, var(--red, #d24747) 8%, transparent); }

#logsEventFilter { max-width: 240px; }

/* ---- login ---- */
.loginShell {
  /* Was 100vh when this was the only thing on the page; now a header sits
     above it and a footer below, so 100vh would push the footer a full
     screen-height further down than necessary. */
  min-height: min(640px, 70vh);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.loginCard {
  width: 100%;
  max-width: 420px;
  padding: 40px 34px;
  border-radius: var(--r-lg, 20px);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  text-align: center;
}
.loginCard h1 {
  font-family: var(--font-display);
  margin: 4px 0 12px;
}
.loginTagline { color: var(--acid); font-weight: 600; margin: 0 0 12px; letter-spacing: 0.01em; }
.loginLede { color: var(--muted); margin: 0 0 24px; line-height: 1.5; }
.loginGoogle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: center;
  text-decoration: none;
  padding: 12px 18px;
}
.loginGoogle .gIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: #4285f4;
  font-weight: 800;
  font-family: var(--font-display);
}
.loginGoogle.isDisabled { opacity: 0.5; pointer-events: none; }
.loginError {
  margin: 0 0 18px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 0.85rem;
  color: #b02a2a;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.loginSetup {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  text-align: left;
}
.loginSetup p { margin: 6px 0 0; line-height: 1.5; }
.loginSetup code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.75rem; }
.loginFoot { margin: 22px 0 0; font-size: 0.75rem; color: var(--muted); }

/* ---- ticker tape ---- */
@keyframes tapeScroll {
  from { transform: translateX(0); }
  /* The track holds two identical copies; sliding exactly half resets seamlessly. */
  to { transform: translateX(-50%); }
}

.tape {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-lg, 18px);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.tapeViewSelect {
  flex: none;
  padding: 7px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--ink);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.tapeViewport {
  flex: 1;
  overflow: hidden;
  /* Fade the ends so cards enter and leave instead of popping. */
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

.tapeTrack {
  display: flex;
  gap: 10px;
  width: max-content;
  animation: tapeScroll 60s linear infinite;
}
.tapeViewport:hover .tapeTrack,
.tapeTrack:focus-within { animation-play-state: paused; }

/* On a phone, the view/range selects + config gear ate most of the bar's
   width, leaving the actual ticker cards a sliver to scroll in. Wrap into
   two rows instead: controls on top, cards get the full width below. */
@media (max-width: 640px) {
  .tape { flex-wrap: wrap; row-gap: 8px; }
  .tapeViewSelect { order: 1; }
  .tapeConfigButton { order: 2; }
  .tapeViewport { order: 3; flex: 1 1 100%; }
}

.tapeCard {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tapeArrow { font-size: 0.95rem; line-height: 1; }
.tapeBody { display: flex; flex-direction: column; gap: 2px; }
.tapeTop { display: flex; align-items: baseline; gap: 8px; }
.tapeName {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.tapeBottom { display: flex; align-items: baseline; gap: 8px; font-size: 0.72rem; color: var(--muted); }
.tapePct { font-size: 0.75rem; font-weight: 700; }
.tapeUp, .tapeUp .tapeArrow { color: var(--green, #12a05f); }
.tapeDown, .tapeDown .tapeArrow { color: var(--red, #d24747); }
.tapeFlat { color: var(--muted); }
.tapeEmpty { padding: 8px 14px; color: var(--muted); font-size: 0.8rem; }

.tapeSpark { flex: none; display: block; }
.tapeSparkUp { color: var(--green, #12a05f); }
.tapeSparkDown { color: var(--red, #d24747); }
.tapeSparkFlat { color: var(--muted); }

.tapeConfigButton {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  transition: color 0.15s ease, background 0.15s ease;
}
.tapeConfigButton:hover { color: var(--ink); background: var(--panel-strong); }

/* ---- ticker customize modal ---- */
.modalOverlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, black 55%, transparent);
  backdrop-filter: blur(3px);
  animation: modalFadeIn 180ms ease both;
}
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }

.modalCard {
  width: 100%;
  max-width: 520px;
  max-height: min(640px, 90vh);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: var(--r-lg, 18px);
  background: var(--panel-strong, var(--panel));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft), 0 24px 60px rgba(0, 0, 0, 0.35);
  animation: modalRiseIn 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes modalRiseIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
/* Flex items shrink to fit their column by default — without this, a chip
   list that outgrows the available space squeezes shorter instead of
   scrolling, and the rows it can't fit spill out over the sibling below
   (the add-input) rather than pushing it down. Lock every section to its
   natural size; .tapeChips gets its own scroll for when the list is long. */
.modalCard > * { flex-shrink: 0; }

.modalHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modalHeader h2 { margin: 4px 0 0; font-size: 1.3rem; }

.modalClose {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.modalClose:hover { color: var(--ink); background: var(--panel); }

.modalLede { margin: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.5; }
.modalLede code { font-size: 0.82em; color: var(--ink); }

.tapeCategoryTabs { display: flex; gap: 8px; }
.tapeCategoryTab {
  flex: 1;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.tapeCategoryTab:hover { color: var(--ink); }
.tapeCategoryTab[aria-selected="true"] {
  color: #f7f4ec;
  border-color: transparent;
  background: linear-gradient(180deg, var(--acid), var(--acid-deep));
}
:root[data-theme="light"] .tapeCategoryTab[aria-selected="true"] { color: #fbfaf5; }

.tapeCategoryHint { margin: -6px 0 0; font-size: 0.76rem; color: var(--muted); }

.tapeConfigButton[disabled] { opacity: 0.4; cursor: not-allowed; }
.tapeConfigButton[disabled]:hover { color: var(--muted); background: var(--panel-soft); }

.tapeChips {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  min-height: 38px;
  max-height: 168px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 10px);
  background: var(--panel-soft);
}
.tapeChipsEmpty { color: var(--muted); font-size: 0.82rem; align-self: center; }

.tapeChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 12px;
  border-radius: var(--r-pill);
  background: var(--panel-strong);
  border: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.tapeChipRemove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}
.tapeChipRemove:hover { color: var(--red, #d24747); background: color-mix(in srgb, var(--red, #d24747) 14%, transparent); }

.tapeAddWrap { position: relative; }
.tapeAddForm { display: flex; gap: 8px; }
.tapeAddForm input {
  flex: 1;
  padding: 10px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--ink);
  font: inherit;
}
.tapeAddForm input:focus { border-color: color-mix(in srgb, var(--acid) 55%, var(--line)); box-shadow: var(--glow); }

.tapeSuggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 66px;
  z-index: 10;
  max-height: 220px;
  overflow-y: auto;
  border-radius: var(--r-md, 10px);
  border: 1px solid var(--line);
  background: var(--panel-strong, var(--panel));
  box-shadow: var(--shadow-soft), 0 12px 30px rgba(0, 0, 0, 0.3);
}
.tapeSuggestion {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  border: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.84rem;
  text-align: left;
  cursor: pointer;
}
.tapeSuggestion strong { font-weight: 700; }
.tapeSuggestion span { color: var(--muted); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tapeSuggestion:hover,
.tapeSuggestion[aria-selected="true"] { background: color-mix(in srgb, var(--acid) 12%, transparent); }

.tapePresets { display: flex; flex-direction: column; gap: 8px; }
.tapePresetButtons { display: flex; flex-wrap: wrap; gap: 8px; }

.modalFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.modalFooterActions { display: flex; gap: 10px; }
.tapeConfigNote { font-size: 0.78rem; color: var(--red, #d24747); }
.tapeConfigCount { font-size: 0.78rem; color: var(--muted); margin-left: 10px; }

@media (prefers-reduced-motion: reduce) {
  /* The tape is explicitly an always-scrolling ticker; without this the blanket
     animation kill leaves it frozen. Hovering still pauses it. */
  .tapeTrack { animation: tapeScroll 60s linear infinite !important; }
}

/* Explicit pause control (public /ticker page) must win over the
   reduced-motion !important above — higher specificity beats equal
   !important regardless of media-query source order. WCAG 2.2.2: moving
   content needs a stop control reachable without hover, for people who
   can't hover (touch, some AT) or whose OS motion setting isn't reduced. */
.tapeTrack.tapePaused { animation-play-state: paused !important; }

/* ---- My Edge ---- */
.edgeNotice {
  margin: 0 26px 18px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.86rem;
}
.edgeNotice strong { color: var(--ink); display: block; margin-bottom: 4px; }
.edgeNotice p { margin: 0; line-height: 1.5; }
.edgeSummary { margin-bottom: 8px; }
.edgeTable { margin-bottom: 8px; }
.edgeTable th,
.edgeTable td { text-align: left; white-space: nowrap; vertical-align: middle; }
.edgeTable td.edgeWhy { white-space: normal; min-width: 220px; max-width: 380px; color: var(--muted); font-size: 12px; }
.edgeHeadline {
  margin: 0 26px 12px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--muted);
}
.edgeHeadline.profit { color: var(--green); }
.edgeTag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #0b7a4b;
  background: rgba(16, 185, 129, 0.16);
}
.edgeThin { opacity: 0.55; font-size: 11px; font-style: italic; }
.edgeVerdict {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.edgeStrong { color: #0b7a4b; background: rgba(16, 185, 129, 0.18); }
.edgePartial { color: #8a6d00; background: rgba(234, 179, 8, 0.18); }
.edgeAvoid { color: #b02a2a; background: rgba(239, 68, 68, 0.16); }
.edgeUnproven { color: var(--muted); background: rgba(127, 127, 127, 0.14); }

.subTabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 26px 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.1));
}
.subTabButton {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.subTabButton:hover {
  color: var(--text);
  background: rgba(127, 127, 127, 0.14);
}
.subTabButton.isActive {
  color: var(--text);
  background: rgba(127, 127, 127, 0.2);
  border-color: rgba(127, 127, 127, 0.35);
}
.ipoBadge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #7a3b00;
  background: linear-gradient(180deg, #ffd980, #ffb020);
  box-shadow: 0 0 0 1px rgba(255, 176, 32, 0.5), 0 0 10px rgba(255, 176, 32, 0.35);
  white-space: nowrap;
}
.srcCite {
  text-decoration: none;
  font-weight: 700;
  opacity: 0.65;
}
.srcCite:hover { opacity: 1; }
.envBadge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.env-green { color: #0b7a4b; background: rgba(16, 185, 129, 0.16); }
.env-yellow { color: #8a6d00; background: rgba(234, 179, 8, 0.18); }
.env-red { color: #b02a2a; background: rgba(239, 68, 68, 0.16); }
.scoreNeg { color: #d24747; font-weight: 700; }
.scorePos { color: #12a05f; font-weight: 700; }

/* These LLM tables are text-heavy and wide — override the global right-align /
   flex-name / 1180px table rules so columns read left-to-right and the wrapper
   scrolls horizontally instead of cramming everything. */
#top10Result table,
#ipoResult table,
#earningsResult table,
#breakoutResult table,
#marketSentimentResult table { min-width: max-content; }
#top10Result th,
#top10Result td,
#ipoResult th,
#ipoResult td,
#earningsResult th,
#earningsResult td,
#breakoutResult th,
#breakoutResult td,
#marketSentimentResult th,
#marketSentimentResult td {
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}
#top10Result td.top10Ticker,
#ipoResult td.top10Ticker,
#earningsResult td.top10Ticker,
#breakoutResult td.top10Ticker {
  display: table-cell;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
#top10Result td.catalystCell {
  white-space: normal;
  min-width: 220px;
  max-width: 340px;
}
#marketSentimentResult td.truthCell {
  white-space: normal;
  min-width: 300px;
  max-width: 440px;
}
#top10Result td.muted,
#ipoResult td.muted,
#earningsResult td.muted,
#breakoutResult td.muted { opacity: 0.45; text-align: center; }
#marketSentimentResult .tipValue {
  border-bottom: 1px dotted currentColor;
  cursor: help;
}

.manualSide {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.manualSideBuy {
  color: #0b7a4b;
  background: rgba(16, 185, 129, 0.14);
}
.manualSideSell {
  color: #b02a2a;
  background: rgba(239, 68, 68, 0.14);
}
td.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  opacity: 0.8;
}

.risk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--blue-soft);
  border: 1px solid var(--line);
  color: var(--ink);
}

.empty {
  padding: 40px;
  color: var(--muted);
  text-align: center;
  font-weight: 500;
}

td.name,
.historyMiniCard h3,
.summaryCard strong,
.kpi strong { letter-spacing: -0.02em; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .hero,
  .panelHeader { align-items: stretch; flex-direction: column; }
  .actions { justify-content: flex-start; }
  .utilityBar { flex-direction: column; align-items: flex-start; }
  .menuSystem { overflow-x: auto; }
  .menuPills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .formRow,
  .backtestGrid,
  .settingsGrid { grid-template-columns: 1fr; }
  .heatmapBody,
  .heatmapSummary { grid-template-columns: 1fr; }
  .wallToolbar,
  .wallCardHeader { flex-direction: column; align-items: stretch; }
  .wallGrid { grid-template-columns: 1fr; }
  .logRow { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rebalanceMetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rebalanceIntro { flex-direction: column; }
  .rebalanceStep { grid-template-columns: auto minmax(0, 1fr); }
  .rebalanceActions { grid-column: 1 / -1; justify-content: flex-start; }
  .orderRow { grid-template-columns: 1fr auto; }
  .analyticsGrid { grid-template-columns: 1fr; }
  .landingPanelHead { align-items: stretch; flex-direction: column; }
  .featureGrid { grid-template-columns: 1fr; }
}

/* ---- public /ticker landing page ---- */

/* Visually hidden until focused — first tab stop, so keyboard users can
   bypass the header/hero and land straight on the ticker/content. */
.skipLink {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-md, 10px);
  background: var(--panel-strong);
  color: var(--ink);
  border: 1px solid var(--acid);
  font-weight: 700;
  transition: top 120ms ease;
}
.skipLink:focus { top: 12px; }

.landingPanel { margin-bottom: 20px; padding: 26px; }
.landingPanel:last-of-type { margin-bottom: 0; }
.landingPanel h2 { margin: 26px 0 12px; }
.landingPanel h2:first-of-type { margin-top: 22px; }
.landingPanel p { color: var(--muted); line-height: 1.6; margin: 0 0 12px; }
.landingPanel p:last-child { margin-bottom: 0; }
.landingPanel ul { color: var(--muted); line-height: 1.6; margin: 0 0 12px; padding-left: 22px; }
.landingPanel ul li { margin-bottom: 6px; }
.landingPanel a { color: var(--acid); }
.landingPanel a:hover { text-decoration: none; }

/* ---- legal pages (/terms, /privacy, /contact, /sitemap) ---- */
.legalShell { max-width: 820px; }
.legalMeta { color: var(--muted); font-size: 0.8rem; margin: -6px 0 20px; }
.sitemapList { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; }
.sitemapList a { font-weight: 600; }

.landingPanelHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.landingPanelHead h2 { margin: 0; }

.tapeControls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tapeControls label { color: var(--muted); font-size: 0.78rem; font-weight: 600; }

.tapeStatus { margin: 10px 0 0; color: var(--muted); font-size: 0.8rem; min-height: 1.2em; }

.tapeTableWrap { margin-top: 18px; overflow-x: auto; }
.tapeTable { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.tapeTable th,
.tapeTable td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tapeTable th { color: var(--muted); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.tapeTable td.tapeTable-up { color: var(--green); }
.tapeTable td.tapeTable-down { color: var(--red); }

.tapeDisclaimer { margin: 14px 0 0; color: var(--muted); font-size: 0.72rem; }

.featureGrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.featureGrid li {
  padding: 16px;
  border-radius: var(--r-md, 10px);
  background: var(--panel-soft);
  border: 1px solid var(--line);
}
.featureGrid h3 { margin: 0 0 6px; font-size: 0.98rem; color: var(--ink); }
.featureGrid p { margin: 0; }

.faqList { display: grid; gap: 10px; }
.faqItem {
  padding: 14px 16px;
  border-radius: var(--r-md, 10px);
  background: var(--panel-soft);
  border: 1px solid var(--line);
}
.faqItem summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
}
.faqItem summary:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
.faqItem p { margin: 10px 0 0; }

.siteFooter {
  width: min(1500px, calc(100vw - 40px));
  margin: 0 auto;
  padding: 24px 4px 48px;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}
.siteFooter a { color: var(--muted); }
.siteFooter a:hover { color: var(--acid); }
.siteFooter p { margin: 4px 0; }
.footerLinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.footerLinks a { font-weight: 600; }
.footerLinks a:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }

.utilityBar a[aria-current="page"] {
  color: var(--ink);
  background: linear-gradient(180deg, var(--acid), var(--acid-deep));
  border-color: transparent;
}
.footerLinks a[aria-current="page"] { color: var(--acid); text-decoration: underline; }

/* ---- /ticker (and other landing pages) on small phones ---- */
@media (max-width: 480px) {
  .utilityBar { padding: 9px 12px; gap: 8px 10px; }
  .utilityItem { gap: 6px; }
  .utilityBar .button.buttonCompact { padding: 7px 11px; font-size: 0.78rem; }

  .heroWide h1 { font-size: clamp(1.7rem, 8vw, 2.2rem); max-width: 100%; }
  .hero { padding: 20px 16px; gap: 14px; }
  .hero .actions {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .hero .actions .button { text-align: center; }

  .landingPanel { padding: 18px; }
  .landingPanelHead { gap: 10px; }
  .tapeControls { width: 100%; }
  .tapeControls select,
  .tapeControls button { flex: 1 1 auto; }

  .tapeCard { padding: 7px 12px; gap: 8px; }
  .tapeSpark { display: none; } /* decorative on a card already this narrow */

  .featureGrid { gap: 12px; }
  .featureGrid li { padding: 14px; }

  .fgRow { flex-direction: column; }
}

/* ---- Fear & Greed (crypto + stock) ---- */
.fgRow {
  display: flex;
  gap: 12px;
}

.fgCard {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--r-lg, 18px);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  text-align: left;
}

.fgMain {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.fgSparkBlock {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.fgSparkLabel {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.75;
}

.fgSparkWrap {
  flex: none;
  display: flex;
  align-items: center;
  color: var(--muted);
}
.fgSpark { display: block; }
.fgCard[data-fg-level="extreme-fear"] .fgSparkWrap,
.fgCard[data-fg-level="fear"] .fgSparkWrap { color: var(--red); }
.fgCard[data-fg-level="neutral"] .fgSparkWrap { color: var(--muted); }
.fgCard[data-fg-level="greed"] .fgSparkWrap,
.fgCard[data-fg-level="extreme-greed"] .fgSparkWrap { color: var(--acid); }

.fgLabel {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fgProxyTag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--gold) 20%, transparent);
  color: var(--gold);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: none;
  cursor: help;
}

.fgValue {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.fgClass { font-size: 0.82rem; font-weight: 600; color: var(--muted); }

/* Value bands, applied via data-fg-level on .fgCard from JS. */
.fgCard[data-fg-level="extreme-fear"] .fgValue,
.fgCard[data-fg-level="extreme-fear"] .fgClass { color: var(--red); }
.fgCard[data-fg-level="fear"] .fgValue,
.fgCard[data-fg-level="fear"] .fgClass { color: color-mix(in srgb, var(--red) 60%, var(--gold)); }
.fgCard[data-fg-level="neutral"] .fgValue,
.fgCard[data-fg-level="neutral"] .fgClass { color: var(--muted); }
.fgCard[data-fg-level="greed"] .fgValue,
.fgCard[data-fg-level="greed"] .fgClass { color: color-mix(in srgb, var(--acid) 75%, var(--gold)); }
.fgCard[data-fg-level="extreme-greed"] .fgValue,
.fgCard[data-fg-level="extreme-greed"] .fgClass { color: var(--acid); }