/* ================================================================
   DEALERMAP  ·  V7 Options Intelligence Platform
   Casino-dark design  ·  emerald green / lime accent palette
   ================================================================ */

/* ─── Token system: dark (default) ──────────────────────────── */
:root {
  --bg:          #040a07;
  --bg-up:       #060e08;
  --bg-panel:    rgba(4, 12, 6, 0.96);
  --bg-card:     rgba(4, 10, 6, 0.98);
  --line:        rgba(0, 200, 83, 0.12);
  --line-s:      rgba(0, 200, 83, 0.26);
  --text:        #e8f0ea;
  --bright:      #ffffff;
  --muted:       #507060;
  --faint:       rgba(230, 240, 234, 0.24);
  --teal:        #00c853;                       /* PRIMARY: casino green */
  --teal-d:      rgba(0, 200, 83, 0.14);
  --amber:       #84cc16;                       /* SECONDARY: lime accent */
  --amber-d:     rgba(132, 204, 22, 0.14);
  --green:       #28c870;
  --red:         #ff2244;
  --shadow:      0 28px 72px rgba(0, 0, 0, 0.80), 0 0 0 1px rgba(0, 200, 83, 0.07);
  --shadow-sm:   0 8px 26px rgba(0, 0, 0, 0.60);
  --r-xl:        24px;
  --r-lg:        18px;
  --r-md:        12px;
  --r-sm:        8px;
}

/* ─── Token system: light override ──────────────────────────── */
html[data-theme="light"] {
  --bg:          #e4f0e6;
  --bg-up:       #d8e8da;
  --bg-panel:    rgba(248, 255, 250, 0.90);
  --bg-card:     rgba(250, 255, 252, 0.98);
  --line:        rgba(0, 140, 58, 0.10);
  --line-s:      rgba(0, 140, 58, 0.20);
  --text:        #101e12;
  --bright:      #040a06;
  --muted:       #587a60;
  --faint:       rgba(16, 30, 20, 0.26);
  --teal:        #008a3a;
  --teal-d:      rgba(0, 138, 58, 0.10);
  --amber:       #6a9e10;
  --amber-d:     rgba(106, 158, 16, 0.10);
  --green:       #168a6d;
  --red:         #c0203a;
  --shadow:      0 20px 52px rgba(10, 50, 20, 0.14);
  --shadow-sm:   0 6px 18px rgba(10, 50, 20, 0.08);
}

:root,
html[data-theme="dark"][data-color-scheme="emerald"] {
  --bg: #050706;
  --bg-up: #080b09;
  --bg-panel: rgba(9, 13, 11, 0.96);
  --bg-card: rgba(8, 11, 9, 0.94);
  --line: rgba(0, 200, 83, 0.12);
  --line-s: rgba(0, 200, 83, 0.26);
  --text: #e8f0ea;
  --bright: #ffffff;
  --muted: #6f8578;
  --faint: rgba(232, 240, 234, 0.24);
  --teal: #00c853;
  --teal-d: rgba(0, 200, 83, 0.14);
  --amber: #84cc16;
  --amber-d: rgba(132, 204, 22, 0.14);
  --green: #28c870;
  --red: #ff5c74;
  --shadow: 0 28px 72px rgba(0, 0, 0, 0.78), 0 0 0 1px rgba(0, 200, 83, 0.06);
  --shadow-sm: 0 8px 26px rgba(0, 0, 0, 0.58);
  --accent-primary: #00c853;
  --accent-primary-deep: #00923d;
  --accent-primary-rgb: 0, 200, 83;
  --accent-secondary: #84cc16;
  --accent-secondary-deep: #5c9110;
  --accent-secondary-rgb: 132, 204, 22;
  --grid-line: rgba(0, 200, 83, 0.032);
  --grid-animation: gridPan 30s linear infinite;
  --ambient-flares:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(0, 200, 83, 0.09) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(132, 204, 22, 0.07) 0%, transparent 50%);
}

html[data-theme="light"][data-color-scheme="emerald"] {
  --bg: #f3f6f4;
  --bg-up: #edf2ef;
  --bg-panel: rgba(255, 255, 255, 0.9);
  --bg-card: rgba(255, 255, 255, 0.98);
  --line: rgba(0, 138, 58, 0.1);
  --line-s: rgba(0, 138, 58, 0.2);
  --text: #111816;
  --bright: #060907;
  --muted: #65736d;
  --faint: rgba(17, 24, 22, 0.26);
  --teal: #008a3a;
  --teal-d: rgba(0, 138, 58, 0.1);
  --amber: #6a9e10;
  --amber-d: rgba(106, 158, 16, 0.1);
  --green: #168a6d;
  --red: #c0203a;
  --shadow: 0 20px 52px rgba(20, 34, 26, 0.1);
  --shadow-sm: 0 6px 18px rgba(20, 34, 26, 0.07);
  --accent-primary: #008a3a;
  --accent-primary-deep: #006d2d;
  --accent-primary-rgb: 0, 138, 58;
  --accent-secondary: #6a9e10;
  --accent-secondary-deep: #4f770b;
  --accent-secondary-rgb: 106, 158, 16;
  --grid-line: rgba(0, 138, 58, 0.05);
  --grid-animation: none;
  --ambient-flares:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(0, 138, 58, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(106, 158, 16, 0.06) 0%, transparent 50%);
}

html[data-theme="dark"][data-color-scheme="classic"] {
  --bg: #070506;
  --bg-up: #0a0708;
  --bg-panel: rgba(13, 9, 10, 0.96);
  --bg-card: rgba(11, 8, 9, 0.94);
  --line: rgba(212, 0, 20, 0.12);
  --line-s: rgba(212, 0, 20, 0.26);
  --text: #efe5e4;
  --bright: #ffffff;
  --muted: #927976;
  --faint: rgba(239, 229, 228, 0.24);
  --teal: #d40014;
  --teal-d: rgba(212, 0, 20, 0.14);
  --amber: #c49010;
  --amber-d: rgba(196, 144, 16, 0.14);
  --green: #28c870;
  --red: #ff5c74;
  --shadow: 0 28px 72px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(212, 0, 20, 0.07);
  --shadow-sm: 0 8px 26px rgba(0, 0, 0, 0.6);
  --accent-primary: #d40014;
  --accent-primary-deep: #aa000e;
  --accent-primary-rgb: 212, 0, 20;
  --accent-secondary: #c49010;
  --accent-secondary-deep: #9a7808;
  --accent-secondary-rgb: 196, 144, 16;
  --grid-line: rgba(212, 0, 20, 0.032);
  --grid-animation: gridPan 30s linear infinite;
  --ambient-flares:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(212, 0, 20, 0.09) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(196, 144, 16, 0.07) 0%, transparent 50%);
}

html[data-theme="light"][data-color-scheme="classic"] {
  --bg: #f6f0e8;
  --bg-up: #efe7dd;
  --bg-panel: rgba(255, 252, 246, 0.9);
  --bg-card: rgba(255, 250, 248, 0.98);
  --line: rgba(168, 0, 15, 0.1);
  --line-s: rgba(168, 0, 15, 0.2);
  --text: #201411;
  --bright: #0a0605;
  --muted: #7c6659;
  --faint: rgba(32, 20, 17, 0.26);
  --teal: #a8000f;
  --teal-d: rgba(168, 0, 15, 0.1);
  --amber: #9a7208;
  --amber-d: rgba(154, 114, 8, 0.1);
  --green: #168a6d;
  --red: #c0203a;
  --shadow: 0 20px 52px rgba(50, 26, 10, 0.12);
  --shadow-sm: 0 6px 18px rgba(50, 26, 10, 0.08);
  --accent-primary: #a8000f;
  --accent-primary-deep: #880010;
  --accent-primary-rgb: 168, 0, 15;
  --accent-secondary: #9a7208;
  --accent-secondary-deep: #806208;
  --accent-secondary-rgb: 154, 114, 8;
  --grid-line: rgba(140, 0, 10, 0.05);
  --grid-animation: none;
  --ambient-flares:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(168, 0, 15, 0.1) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(154, 114, 8, 0.08) 0%, transparent 50%);
}

html[data-theme="dark"][data-color-scheme="mono"] {
  --bg: #0a0a0a;
  --bg-up: #111111;
  --bg-panel: rgba(18, 18, 18, 0.96);
  --bg-card: rgba(14, 14, 14, 0.98);
  --line: rgba(255, 255, 255, 0.07);
  --line-s: rgba(255, 255, 255, 0.14);
  --text: #e8e8e8;
  --bright: #ffffff;
  --muted: #7a7a7a;
  --faint: rgba(232, 232, 232, 0.20);
  --teal: #22c55e;
  --teal-d: rgba(34, 197, 94, 0.14);
  --amber: #ef4444;
  --amber-d: rgba(239, 68, 68, 0.14);
  --green: #22c55e;
  --red: #ef4444;
  --shadow: 0 28px 72px rgba(0, 0, 0, 0.82), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-sm: 0 8px 26px rgba(0, 0, 0, 0.60);
  --accent-primary: #22c55e;
  --accent-primary-deep: #16a34a;
  --accent-primary-rgb: 34, 197, 94;
  --accent-secondary: #ef4444;
  --accent-secondary-deep: #dc2626;
  --accent-secondary-rgb: 239, 68, 68;
  --grid-line: rgba(255, 255, 255, 0.035);
  --grid-animation: none;
  --ambient-flares: none;
}

html[data-theme="light"][data-color-scheme="mono"] {
  --bg: #f9f9f9;
  --bg-up: #f0f0f0;
  --bg-panel: rgba(255, 255, 255, 0.92);
  --bg-card: rgba(255, 255, 255, 0.98);
  --line: rgba(0, 0, 0, 0.07);
  --line-s: rgba(0, 0, 0, 0.14);
  --text: #111111;
  --bright: #000000;
  --muted: #666666;
  --faint: rgba(0, 0, 0, 0.18);
  --teal: #16a34a;
  --teal-d: rgba(22, 163, 74, 0.10);
  --amber: #dc2626;
  --amber-d: rgba(220, 38, 38, 0.10);
  --green: #16a34a;
  --red: #dc2626;
  --shadow: 0 20px 52px rgba(0, 0, 0, 0.10);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.07);
  --accent-primary: #16a34a;
  --accent-primary-deep: #15803d;
  --accent-primary-rgb: 22, 163, 74;
  --accent-secondary: #dc2626;
  --accent-secondary-deep: #b91c1c;
  --accent-secondary-rgb: 220, 38, 38;
  --grid-line: rgba(0, 0, 0, 0.05);
  --grid-animation: none;
  --ambient-flares: none;
}

:root {
  --accent-gradient-50: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, transparent 100%);
  --accent-gradient-55: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-secondary) 55%, transparent 100%);
  --accent-gradient-60: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-secondary) 60%, transparent 100%);
  --accent-gradient-primary: linear-gradient(90deg, var(--accent-primary), transparent);
  --button-primary-gradient: linear-gradient(135deg, var(--accent-primary-deep), var(--accent-primary));
  --button-secondary-gradient: linear-gradient(135deg, var(--accent-secondary-deep), var(--accent-secondary));
  --button-primary-shadow: 0 4px 24px rgba(var(--accent-primary-rgb), 0.4);
  --button-secondary-shadow: 0 4px 18px rgba(var(--accent-secondary-rgb), 0.32);
  --accent-focus-ring: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.14);
  --accent-active-border: rgba(var(--accent-primary-rgb), 0.28);
  --accent-panel-glow: rgba(var(--accent-primary-rgb), 0.06);
  --accent-panel-glow-soft: rgba(var(--accent-primary-rgb), 0.05);
  --accent-logo-glow: rgba(var(--accent-primary-rgb), 0.45);
  --accent-logo-glow-strong: rgba(var(--accent-primary-rgb), 0.5);
  --accent-scan: rgba(var(--accent-primary-rgb), 0.04);
  --accent-badge-bg: rgba(var(--accent-primary-rgb), 0.12);
  --accent-badge-border: rgba(var(--accent-primary-rgb), 0.24);
  --accent-secondary-border: rgba(var(--accent-secondary-rgb), 0.24);
}

/* ─── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: "Aptos", "Segoe UI Variable Text", "Segoe UI", sans-serif;
  font-size: 15px;
  color: var(--text);
  background-color: var(--bg);
}

a { color: inherit; }

/* ─── Static grid background ──────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 200, 83, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 200, 83, 0.032) 1px, transparent 1px);
  background-size: 52px 52px;
  animation: none;
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(212, 0, 20, 0.09) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(196, 144, 16, 0.07) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

html[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(140, 0, 10, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 0, 10, 0.05) 1px, transparent 1px);
  animation: none;
}

html[data-theme="light"] body::after {
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(168, 0, 15, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(154, 114, 8, 0.08) 0%, transparent 50%);
}

body::before {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  animation: none;
}

body::after {
  background: var(--ambient-flares);
}

.ambient {
  position: fixed;
  top: max(108px, 12vh);
  bottom: 52px;
  display: block;
  width: clamp(70px, 5.8vw, 108px);
  border-radius: 999px;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  opacity: 0.88;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.16);
  background:
    linear-gradient(180deg, rgba(var(--accent-primary-rgb), 0.10), rgba(var(--accent-primary-rgb), 0.025) 24%, rgba(var(--accent-secondary-rgb), 0.06) 52%, rgba(var(--accent-primary-rgb), 0.10)),
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 0 28px rgba(var(--accent-primary-rgb), 0.12);
  backdrop-filter: blur(14px);
  filter: saturate(118%);
}

.ambient::before,
.ambient::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: inherit;
}

.ambient::before {
  inset-inline: 18px;
  background:
    linear-gradient(180deg, transparent 0%, rgba(var(--accent-primary-rgb), 0.34) 16%, transparent 34%, rgba(var(--accent-secondary-rgb), 0.18) 58%, transparent 76%, rgba(var(--accent-primary-rgb), 0.26) 100%),
    repeating-linear-gradient(180deg, rgba(var(--accent-primary-rgb), 0) 0 18px, rgba(var(--accent-primary-rgb), 0.32) 18px 19px, rgba(var(--accent-primary-rgb), 0) 19px 36px);
  opacity: 0.82;
  animation: ambientSweep 9.5s linear infinite;
}

.ambient::after {
  background:
    radial-gradient(circle at 50% 12%, rgba(var(--accent-primary-rgb), 0.95) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 32%, rgba(var(--accent-secondary-rgb), 0.72) 0 3px, transparent 4px),
    radial-gradient(circle at 50% 54%, rgba(var(--accent-primary-rgb), 0.78) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 76%, rgba(var(--accent-secondary-rgb), 0.82) 0 3px, transparent 4px),
    radial-gradient(circle at 50% 92%, rgba(var(--accent-primary-rgb), 0.92) 0 2px, transparent 3px);
  filter: drop-shadow(0 0 10px rgba(var(--accent-primary-rgb), 0.42));
  animation: ambientNodes 12s ease-in-out infinite alternate;
}

.ambient-a {
  left: clamp(14px, 2vw, 30px);
  animation: ambientFloatLeft 18s ease-in-out infinite;
}

.ambient-b {
  right: clamp(14px, 2vw, 30px);
  animation: ambientFloatRight 15s ease-in-out infinite -5s;
}

html[data-theme="light"] .ambient {
  opacity: 0.74;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 24px rgba(var(--accent-primary-rgb), 0.08);
}

@keyframes ambientSweep {
  0% {
    background-position: 0 0, 0 0;
  }
  100% {
    background-position: 0 180px, 0 64px;
  }
}

@keyframes ambientNodes {
  0% {
    transform: translateY(-10px) scale(0.98);
    opacity: 0.76;
  }
  100% {
    transform: translateY(12px) scale(1.02);
    opacity: 1;
  }
}

@keyframes ambientFloatLeft {
  0%, 100% {
    transform: translateY(0) rotate(-7deg) scaleY(0.98);
  }
  50% {
    transform: translateY(-18px) rotate(-3deg) scaleY(1.02);
  }
}

@keyframes ambientFloatRight {
  0%, 100% {
    transform: translateY(0) rotate(7deg) scaleY(0.98);
  }
  50% {
    transform: translateY(-14px) rotate(3deg) scaleY(1.02);
  }
}

/* ─── Core layout ────────────────────────────────────────────── */
.site-shell {
  position: relative;
  z-index: 1;
  width: min(1520px, calc(100% - 40px));
  margin: 0 auto;
  padding: 24px 0 48px;
}

.site-shell-auth {
  min-height: 100vh;
  display: grid;
  align-items: center;
}

/* ─── Panel base ──────────────────────────────────────────────── */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
}

/* ─── Typography system ───────────────────────────────────────── */
.landing-kicker,
.auth-eyebrow,
.platform-brand-kicker,
.summary-label,
.chart-kicker,
.field-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--teal);
}

/* ─── Buttons ────────────────────────────────────────────────── */
.btn-primary,
.btn-secondary,
.btn-tertiary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: opacity 0.15s, transform 0.12s;
}

.btn-primary:active,
.btn-secondary:active { transform: scale(0.98); }

.btn-primary {
  background: var(--button-primary-gradient);
  color: #ffffff;
  box-shadow: var(--button-primary-shadow);
}

.btn-secondary {
  background: var(--button-secondary-gradient);
  color: #08110d;
  box-shadow: var(--button-secondary-shadow);
}

.btn-tertiary {
  border-color: var(--line-s);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.btn-tertiary.is-active {
  border-color: rgba(var(--accent-secondary-rgb), 0.55);
  background: rgba(var(--accent-secondary-rgb), 0.16);
  color: var(--bright);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-secondary-rgb), 0.14);
}

html[data-theme="light"] .btn-primary {
  color: #fff;
}

html[data-theme="light"] .btn-secondary {
  color: #08110d;
}

html[data-theme="light"] .btn-tertiary {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--line-s);
}

/* ─── Form elements ───────────────────────────────────────────── */
.field-group {
  display: grid;
  gap: 8px;
}

.field-input-static {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
}

.field-help {
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.35;
}

.expiration-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.expiration-chip {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 2, 10, 0.65);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color 0.14s, transform 0.12s, background 0.14s;
}

.expiration-chip:hover {
  border-color: var(--line-s);
}

.expiration-chip:active {
  transform: scale(0.98);
}

.expiration-chip.is-selected {
  border-color: var(--teal);
  background: rgba(var(--accent-primary-rgb), 0.14);
  color: var(--bright);
  box-shadow: var(--accent-focus-ring);
}

html[data-theme="light"] .expiration-chip {
  background: rgba(255, 255, 255, 0.82);
}

.field-input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(8, 2, 10, 0.65);
  color: var(--text);
  font: inherit;
  color-scheme: light;
  transition: border-color 0.15s, box-shadow 0.15s;
}

html[data-theme="light"] .field-input {
  background: rgba(255, 255, 255, 0.65);
}

.field-input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: var(--accent-focus-ring);
}

.field-input option,
.panel-filter-select option {
  color: #111111;
  background: #ffffff;
}

/* ─── Flash / status banners ─────────────────────────────────── */
.flash-stack { display: grid; gap: 10px; }

.flash-banner,
.status-banner {
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  line-height: 1.5;
  font-size: 0.88rem;
}

.flash-success, .status-banner[data-tone="success"] {
  border-color: rgba(40, 200, 112, 0.28);
  background: rgba(40, 200, 112, 0.07);
  color: #28c870;
}

.flash-error, .status-banner[data-tone="error"] {
  border-color: rgba(var(--accent-primary-rgb), 0.3);
  background: rgba(var(--accent-primary-rgb), 0.08);
  color: var(--accent-primary);
}

.status-banner[data-tone="info"] {
  border-color: rgba(var(--accent-secondary-rgb), 0.26);
  background: rgba(var(--accent-secondary-rgb), 0.08);
  color: var(--amber);
}

/* ================================================================
   DASHBOARD
   ================================================================ */

.site-shell-app {
  display: grid;
  gap: 14px;
}

/* ─── Platform header ─────────────────────────────────────────── */
.platform-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 20px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-panel);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.platform-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent-gradient-50);
  opacity: 0.80;
}

.platform-brand {
  display: flex;
  align-items: center;
  gap: 20px;
}

.platform-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 14px var(--accent-logo-glow));
}

.platform-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.platform-brand-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
}

@keyframes livePulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 8px 2px var(--accent-primary); }
  50%       { opacity: 0.4; box-shadow: 0 0 4px 1px var(--accent-primary); }
}

.platform-brand-kicker::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-primary);
  box-shadow: 0 0 6px 1px var(--accent-primary);
  animation: none;
}

.platform-title {
  margin: 0;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--bright);
}

.platform-subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.6;
  max-width: 72ch;
}

.platform-header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.platform-nav-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.platform-user {
  color: var(--muted);
  font-size: 0.80rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ─── Control bar ─────────────────────────────────────────────── */
.control-bar {
  padding: 16px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  box-shadow: var(--shadow-sm);
}

.control-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 220px)) auto;
  gap: 12px;
  align-items: end;
}

.control-grid-v7 {
  grid-template-columns: minmax(0, 220px) minmax(0, 240px) minmax(180px, 220px) auto;
}

.control-actions {
  display: flex;
  justify-content: flex-end;
}

.field-group-v7-toggle {
  align-content: start;
}

.v7-source-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(10, 4, 14, 0.60);
  color: var(--text);
  font: inherit;
}

.v7-source-toggle input {
  width: 17px;
  height: 17px;
  accent-color: var(--teal);
}

html[data-theme="light"] .v7-source-toggle {
  background: rgba(255, 255, 255, 0.65);
}

/* ─── Summary grid ────────────────────────────────────────────── */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 12px;
  overflow: visible;
}

.summary-grid-v7-workbench {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}

[data-page="v7-dashboard"] .summary-grid-v7-workbench .summary-card {
  padding: 26px 28px 24px;
  min-height: 170px;
  border-radius: 24px;
}

[data-page="v7-dashboard"] .summary-grid-v7-workbench .summary-label {
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #a9d8ff;
}

[data-page="v7-dashboard"] .summary-grid-v7-workbench .summary-value {
  margin-top: 14px;
  font-size: clamp(2rem, 1.5vw + 1.4rem, 2.55rem);
}

[data-page="v7-dashboard"] .summary-grid-v7-workbench .summary-detail {
  margin-top: 18px;
  font-size: 0.92rem;
  line-height: 1.45;
}

.summary-grid-spot-only {
  grid-template-columns: minmax(220px, 320px);
  justify-content: start;
}

.summary-card {
  position: relative;
  overflow: hidden;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s;
}

.summary-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--accent-gradient-50);
  opacity: 0.45;
}

.summary-card:hover {
  border-color: var(--line-s);
}

.summary-label {
  font-size: 0.62rem;
  margin-bottom: 2px;
}

.summary-value {
  display: block;
  margin-top: 6px;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--bright);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.summary-detail {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* ─── Chart stack ─────────────────────────────────────────────── */
.chart-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.chart-stack-v5-workbench {
  grid-template-columns: minmax(0, 2.2fr) minmax(300px, 0.8fr);
  gap: 18px;
  align-items: stretch;
}

.chart-stack-v7-workbench {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.chart-stack-v7-retail {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 18px;
}

.chart-stack-v8-trades {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 18px;
}

.chart-stack-v8-fair {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 18px;
}

.chart-stack-v8-feed {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 18px;
}

.chart-panel-v7-primary,
.chart-panel-v5-primary,
.chart-panel-v5-side,
.chart-panel-v7-side,
.chart-panel-v7-retail,
.chart-panel-v8-feed,
.chart-panel-v8-fair,
.chart-panel-v8-trades {
  min-width: 0;
}

.chart-panel {
  position: relative;
  overflow: visible;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-panel);
  box-shadow: var(--shadow);
  min-width: 0;
  transition: border-color 0.2s;
}

.chart-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent-gradient-55);
  opacity: 0.60;
}

.chart-panel:hover {
  border-color: var(--line-s);
}

/* legacy classes — kept for JS references, no-op in single-column layout */
.chart-panel-wide  { }
.chart-panel-half  { }

.chart-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.chart-head-actions {
  display: grid;
  gap: 8px;
  justify-items: end;
  min-width: 0;
  overflow: visible;
}

.chart-kicker {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--teal);
}

.chart-title {
  margin: 8px 0 0;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--bright);
}

.chart-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
  text-align: right;
  font-variant-numeric: tabular-nums;
  max-width: min(100%, 560px);
  overflow-wrap: anywhere;
}

.chart-shell {
  min-height: 600px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(4, 2, 6, 0.60);
  overflow: visible;
  position: relative;
  isolation: isolate;
}

html[data-theme="light"] .chart-shell {
  background: rgba(255, 255, 255, 0.40);
}

.chart-shell-primary  { min-height: 860px; }
.chart-shell-heatmap  { min-height: 860px; }
.chart-shell-vgex-bar { min-height: 860px; }
.chart-shell-compact  { min-height: 500px; }
.chart-shell-debug    { min-height: 360px; }
.chart-shell-tall     { min-height: 820px; }
.chart-shell-v7-workbench { min-height: 820px; }
.chart-shell-v7-method { min-height: 560px; }
.chart-shell-v7-retail { min-height: 520px; }
.chart-shell-v8-fair { min-height: 500px; }
.chart-shell-surface-classifier {
  min-height: 520px;
  border-color: rgba(86, 74, 58, 0.18);
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54);
}

[data-page="v7-dashboard"] .chart-shell-v7-workbench,
[data-page="v7-dashboard"] .chart-shell-v7-method,
[data-page="v7-dashboard"] .chart-shell-v7-retail,
[data-page="v7-dashboard"] .chart-shell-v8-fair {
  background:
    radial-gradient(circle at top left, rgba(85, 132, 187, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(8, 14, 22, 0.96), rgba(8, 13, 20, 0.92));
}

html[data-theme="light"] [data-page="v7-dashboard"] .chart-shell-v7-workbench,
html[data-theme="light"] [data-page="v7-dashboard"] .chart-shell-v7-method,
html[data-theme="light"] [data-page="v7-dashboard"] .chart-shell-v7-retail,
html[data-theme="light"] [data-page="v7-dashboard"] .chart-shell-v8-fair {
  background:
    radial-gradient(circle at top left, rgba(85, 132, 187, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 249, 252, 0.92));
}

.chart-head-v8-table {
  align-items: flex-start;
}

.v8-table-toolbar {
  display: grid;
  gap: 10px;
  justify-items: end;
  min-width: 0;
}

.v8-table-toolbar-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.v8-table-pager-buttons {
  display: inline-flex;
  gap: 8px;
  margin-left: 12px;
}

.field-group-v8-table {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.field-group-v8-chart {
  display: grid;
  gap: 6px;
  justify-items: end;
  min-width: 132px;
}

.field-input-v8-chart {
  min-width: 132px;
}

.field-input-v8-table {
  min-width: 108px;
}

.v8-issues {
  padding: 0 24px 10px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.v8-live-trades {
  display: grid;
  gap: 10px;
}

.v8-live-trades-empty {
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
}

.v8-live-trade-row {
  display: grid;
  grid-template-columns: 88px 94px minmax(84px, 96px) minmax(88px, 120px) 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.v8-live-trade-time,
.v8-live-trade-strike,
.v8-live-trade-contracts {
  color: var(--bright);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.v8-live-trade-price {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.v8-live-trade-method {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.v8-live-trade-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1;
  white-space: nowrap;
}

.v8-live-trade-chip--buy {
  color: #b7f4b2;
  border-color: rgba(143, 227, 136, 0.38);
  background: rgba(143, 227, 136, 0.10);
}

.v8-live-trade-chip--sell {
  color: #ffb0b8;
  border-color: rgba(239, 106, 119, 0.38);
  background: rgba(239, 106, 119, 0.10);
}

.v8-live-trade-chip--neutral {
  color: #ffd98c;
  border-color: rgba(240, 185, 73, 0.34);
  background: rgba(240, 185, 73, 0.10);
}

.v8-live-trade-chip--flag {
  color: var(--bright);
}

.v8-table-wrap {
  overflow: auto;
  max-height: 760px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.v8-trade-table {
  width: 100%;
  border-collapse: collapse;
}

.v8-trade-table th,
.v8-trade-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-align: left;
  white-space: nowrap;
}

.v8-trade-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(5, 12, 18, 0.98);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
}

.v8-trade-table tbody tr:hover td {
  background: rgba(143, 227, 136, 0.06);
}

.v8-trade-table td.v8-side-buy {
  color: #8fe388;
  font-weight: 700;
}

.v8-trade-table td.v8-side-sell {
  color: #ef6a77;
  font-weight: 700;
}

.v8-trade-table td.v8-side-neutral {
  color: #f0b949;
  font-weight: 700;
}

#iv-surface-classifier-chart {
  min-height: 520px;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.88), transparent 32%),
    linear-gradient(180deg, rgba(248, 245, 239, 0.98), rgba(236, 231, 223, 0.98));
  border-radius: 14px;
}

html[data-theme="light"] #iv-surface-classifier-chart {
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.92), transparent 32%),
    linear-gradient(180deg, rgba(250, 248, 243, 0.99), rgba(238, 233, 225, 0.98));
}

.surface-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(320px, 0.88fr);
  gap: 24px;
  align-items: start;
}

.surface-showcase-visual,
.surface-showcase-copy {
  min-width: 0;
}

.surface-showcase-visual {
  display: grid;
  gap: 14px;
  padding: 18px 18px 14px;
  border-radius: 22px;
  border: 1px solid rgba(86, 74, 58, 0.14);
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.72), transparent 33%),
    linear-gradient(180deg, rgba(246, 242, 235, 0.97), rgba(233, 227, 217, 0.96));
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.surface-showcase-copy {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 20px 18px;
  border-radius: 22px;
  border: 1px solid rgba(86, 74, 58, 0.10);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(244, 240, 233, 0.84)),
    rgba(248, 244, 237, 0.92);
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

html[data-theme="light"] .surface-showcase-copy {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(246, 241, 235, 0.92)),
    rgba(248, 244, 237, 0.96);
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

.surface-showcase-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a7a69;
}

.surface-showcase-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.4vw, 2.7rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: #221b15;
  max-width: 10ch;
}

.surface-showcase-text {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.58;
  color: #332a22;
  max-width: 33ch;
}

.surface-showcase-text-emphasis {
  color: #607be5;
}

html[data-theme="light"] .surface-showcase-text-emphasis {
  color: #4d63cb;
}

.surface-showcase-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.surface-showcase-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid rgba(86, 74, 58, 0.10);
  background: rgba(255, 255, 255, 0.68);
  color: #3b3128;
}

.surface-showcase-pill-neutral {
  background: rgba(58, 55, 51, 0.10);
  border-color: rgba(58, 55, 51, 0.12);
}

.surface-showcase-pill-call {
  background: rgba(186, 52, 56, 0.10);
  border-color: rgba(186, 52, 56, 0.16);
  color: #99272c;
}

.surface-showcase-pill-guide {
  background: rgba(57, 82, 212, 0.10);
  border-color: rgba(57, 82, 212, 0.16);
  color: #3145aa;
}

.surface-showcase-pill-put {
  background: rgba(103, 101, 98, 0.10);
  border-color: rgba(103, 101, 98, 0.14);
  color: #5e5a55;
}

.surface-showcase-pill-signal {
  background: rgba(64, 157, 102, 0.10);
  border-color: rgba(64, 157, 102, 0.16);
  color: #2f7a4f;
}

html[data-theme="light"] .surface-showcase-pill {
  background: rgba(255, 255, 255, 0.72);
}

html[data-theme="light"] .surface-showcase-pill-neutral {
  background: rgba(58, 55, 51, 0.08);
  border-color: rgba(58, 55, 51, 0.10);
}

html[data-theme="light"] .surface-showcase-pill-call {
  color: #9a262c;
}

html[data-theme="light"] .surface-showcase-pill-guide {
  color: #3145aa;
}

html[data-theme="light"] .surface-showcase-pill-put {
  color: #5e5a55;
}

.surface-showcase-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.surface-showcase-stat {
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid rgba(86, 74, 58, 0.10);
  background: rgba(255, 255, 255, 0.60);
}

html[data-theme="light"] .surface-showcase-stat {
  background: rgba(255, 255, 255, 0.74);
}

.surface-showcase-stat-label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a7a69;
}

.surface-showcase-stat-value {
  margin-top: 8px;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.1;
  color: #221b15;
}

.surface-showcase-stat-detail {
  margin-top: 5px;
  font-size: 0.77rem;
  line-height: 1.4;
  color: #6d6054;
}

.chart-subsection {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}

.chart-subhead {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: end;
  flex-wrap: wrap;
}

.chart-subtitle {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.chart-meta-inline {
  text-align: left;
  max-width: none;
}

.iv-surface-debug-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.iv-debug-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(8, 6, 10, 0.54);
  padding: 12px 14px;
  min-width: 0;
}

html[data-theme="light"] .iv-debug-card {
  background: rgba(255, 255, 255, 0.52);
}

.iv-debug-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.iv-debug-value {
  margin-top: 8px;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--bright);
}

.iv-debug-detail {
  margin-top: 6px;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.vgex-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  padding: 10px 12px 12px;
}

.vgex-field {
  display: grid;
  gap: 6px;
  flex: 1 1 170px;
  min-width: 150px;
}

.vgex-label {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.vgex-input {
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(8, 2, 10, 0.65);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  color-scheme: dark;
  text-transform: uppercase;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

select.vgex-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2300c853' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 36px;
}

.vgex-input-date {
  color-scheme: dark;
  text-transform: none;
  cursor: pointer;
}

html[data-theme="light"] .vgex-input {
  color-scheme: light;
}

html[data-theme="light"] .vgex-input-date {
  color-scheme: light;
}

html[data-theme="light"] select.vgex-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23008a3a' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
}

.vgex-input:focus {
  outline: none;
  border-color: var(--teal);
}

.vgex-load-button {
  min-height: 42px;
  padding: 0 18px;
  align-self: end;
  flex: 0 0 auto;
  white-space: nowrap;
}

.vgex-futures-toggle {
  min-height: 42px;
  padding: 0 18px;
  align-self: end;
  flex: 0 0 auto;
  white-space: nowrap;
}

.vgex-view-toggle {
  min-height: 42px;
  padding: 0 18px;
  align-self: end;
  flex: 0 0 auto;
  white-space: nowrap;
}

.vgex-futures-toggle.is-active {
  border-color: rgba(var(--accent-primary-rgb), 0.42);
  background: linear-gradient(
    135deg,
    rgba(var(--accent-primary-rgb), 0.24),
    rgba(var(--accent-secondary-rgb), 0.14)
  );
  color: var(--bright);
}

.vgex-view-toggle.is-active {
  border-color: rgba(var(--accent-primary-rgb), 0.42);
  background: linear-gradient(
    135deg,
    rgba(var(--accent-primary-rgb), 0.24),
    rgba(var(--accent-secondary-rgb), 0.14)
  );
  color: var(--bright);
}

.vgex-futures-toggle:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.vgex-view-toggle:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.vgex-price-window-field {
  flex: 0 1 128px;
  min-width: 118px;
}

.vgex-inline-meta {
  display: flex;
  flex: 1 0 100%;
  gap: 12px 18px;
  min-height: 42px;
  align-items: flex-end;
  justify-content: space-between;
  min-width: 0;
}

.vgex-help {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
  flex: 1 1 420px;
  max-width: 760px;
}

.vgex-spot-display {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  min-height: 1.2em;
  margin-left: auto;
  text-align: right;
}

.vgex-style-controls {
  margin: 0 12px 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(
    145deg,
    rgba(var(--accent-primary-rgb), 0.08),
    rgba(var(--accent-secondary-rgb), 0.04)
  );
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 12px;
}

.vgex-style-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 3px;
}

.vgex-style-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.vgex-style-reset {
  min-height: 34px;
  padding: 0 14px;
}

.vgex-style-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.vgex-input-color {
  width: 100%;
  min-height: 42px;
  border-radius: 11px;
  padding: 4px;
  text-transform: none;
  background: rgba(8, 2, 10, 0.65);
}

.vgex-slider-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.vgex-input-range {
  min-height: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0;
  text-transform: none;
  appearance: auto;
  -webkit-appearance: auto;
}

.vgex-slider-value {
  min-width: 3.2ch;
  text-align: right;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text);
}

.vgex-style-toggle {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 9px 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(8, 2, 10, 0.48);
}

.vgex-style-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
}

html[data-theme="light"] .vgex-input {
  background: rgba(255, 255, 255, 0.86);
}

html[data-theme="light"] .vgex-style-controls {
  background: linear-gradient(
    145deg,
    rgba(var(--accent-primary-rgb), 0.1),
    rgba(var(--accent-secondary-rgb), 0.06)
  );
}

html[data-theme="light"] .vgex-input-color,
html[data-theme="light"] .vgex-style-toggle {
  background: rgba(255, 255, 255, 0.84);
}

@media (max-width: 1080px) {
  .vgex-style-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vgex-inline-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .vgex-spot-display {
    margin-left: 0;
    text-align: left;
  }
}

@media (max-width: 720px) {
  .vgex-style-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .vgex-style-head {
    flex-wrap: wrap;
  }

  .vgex-field,
  .vgex-price-window-field {
    flex-basis: 100%;
    min-width: 0;
  }

  .vgex-load-button,
  .vgex-futures-toggle,
  .vgex-view-toggle {
    width: 100%;
  }
}

/* ─── Panel filter controls ───────────────────────────────────── */
.panel-filter {
  display: grid;
  gap: 6px;
  min-width: 180px;
}

.panel-filter-inline { min-width: 160px; }

.panel-filter-label {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.panel-filter-select,
.panel-check {
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(8, 2, 10, 0.65);
  color: var(--text);
  font: inherit;
  font-size: 0.87rem;
  color-scheme: light;
  transition: border-color 0.14s;
}

.panel-filter-select:focus {
  outline: none;
  border-color: var(--teal);
}

.panel-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.panel-check input {
  width: 15px; height: 15px;
  accent-color: var(--teal);
}

html[data-theme="light"] .panel-filter-select,
html[data-theme="light"] .panel-check {
  background: rgba(255, 255, 255, 0.82);
}

/* ─── Top trades ──────────────────────────────────────────────── */
.top-trades {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  overflow: visible;
}

.top-trade-card {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--bg-card);
}

.top-trade-rank {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 5px;
}

.top-trade-structure {
  font-size: 0.81rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--text);
}

.top-trade-strike {
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
  color: var(--bright);
  font-variant-numeric: tabular-nums;
}

.top-trade-legs {
  font-size: 0.71rem;
  color: var(--muted);
  margin-bottom: 7px;
  line-height: 1.4;
}

.top-trade-premium            { font-size: 0.87rem; font-weight: 700; }
.top-trade-premium-spent      { color: var(--teal); }
.top-trade-premium-received   { color: var(--green); }

/* ─── Theme switcher ──────────────────────────────────────────── */
.theme-switcher {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px;
  border: 1px solid var(--line-s);
  border-radius: 24px;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.theme-switch-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}

.theme-switch-label {
  padding: 0 8px 0 6px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

html[data-theme="light"] .theme-switch-group {
  background: rgba(0, 0, 0, 0.03);
}

.theme-switch-button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.80rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.theme-switch-button.is-active {
  background: var(--teal-d);
  border-color: var(--accent-active-border);
  color: var(--teal);
}

/* ================================================================
   LOGIN / AUTH PAGE
   ================================================================ */

.login-shell {
  min-height: 100vh;
  padding-top: 20px;
  position: relative;
  z-index: 1;
}

/* ─── Login topbar ────────────────────────────────────────────── */
.login-topbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 24px;
}

.login-brandline {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.login-brandline-kicker {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

.login-brandline-engine {
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.05em;
  padding-left: 14px;
  border-left: 1px solid var(--line-s);
}

.login-topbar-note {
  font-size: 0.80rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ─── Login stage layout ──────────────────────────────────────── */
.login-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(390px, 0.85fr);
  gap: 18px;
  align-items: stretch;
}

.login-story { display: grid; gap: 14px; }

/* ─── Hero card ───────────────────────────────────────────────── */
.login-hero-card {
  position: relative;
  overflow: hidden;
  padding: 44px 50px;
  border: 1px solid var(--line-s);
  border-radius: 28px;
  background: var(--bg-panel);
  box-shadow: var(--shadow), 0 0 100px var(--accent-panel-glow);
  backdrop-filter: blur(22px);
  min-height: 440px;
}

/* casino table image blended into card */
.login-hero-ambient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0.13;
  mix-blend-mode: luminosity;
  pointer-events: none;
  border-radius: 27px;
  z-index: 0;
}

/* keep all hero content above the ambient layer */
.login-hero-inner {
  position: relative;
  z-index: 1;
}

/* Red-to-gold top accent bar */
.login-hero-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent-gradient-55);
  opacity: 0.85;
}

/* Scanning beam */
.login-hero-card::after {
  content: '';
  position: absolute;
  top: 0; left: -45%;
  width: 35%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, var(--accent-scan) 50%, transparent 100%);
  animation: heroScan 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes heroScan {
  0%   { left: -45%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

.login-hero-inner {
  position: relative;
  z-index: 1;
}

/* Logo in hero */
.login-logo-img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  display: block;
  margin-bottom: 16px;
  filter: drop-shadow(0 0 28px var(--accent-logo-glow-strong)) drop-shadow(0 4px 12px rgba(0,0,0,0.60));
}

.login-hero-overline {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.login-hero-overline::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 32px; height: 1px;
  background: var(--teal);
}

.login-hero-title {
  max-width: 18ch;
  margin: 0 0 16px;
  font-size: clamp(2.2rem, 4vw, 4.2rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.05em;
  color: var(--bright);
}

.login-hero-copy {
  max-width: 48rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.75;
}

/* ─── Stat strip ──────────────────────────────────────────────── */
.login-stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin-top: 28px;
}

.login-stat-chip {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-card);
  position: relative;
  overflow: hidden;
}

.login-stat-chip::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--accent-gradient-primary);
  opacity: 0.4;
}

.login-stat-label {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.login-stat-chip strong {
  display: block;
  margin-top: 8px;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--bright);
  letter-spacing: -0.02em;
}

.login-stat-chip small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.5;
}

/* ─── Widget grid ─────────────────────────────────────────────── */
.login-widget-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.login-widget {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.login-widget-large {
  grid-column: 1 / -1;
  border-color: var(--line-s);
  background:
    radial-gradient(ellipse 70% 55% at 0% 50%, rgba(var(--accent-primary-rgb), 0.08) 0%, transparent 55%),
    var(--bg-card);
}

.login-widget-kicker {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--teal);
}

.login-widget-title {
  margin: 10px 0 0;
  max-width: 22ch;
  font-size: clamp(1.4rem, 2.2vw, 2.1rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: var(--bright);
}

.login-widget-mini-title {
  margin: 10px 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--bright);
}

.login-widget-copy,
.auth-station-copy {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.68;
}

/* ─── Auth station ────────────────────────────────────────────── */
.auth-station { display: grid; }

.auth-station-frame {
  position: relative;
  overflow: hidden;
  padding: 30px;
  display: grid;
  gap: 18px;
  align-self: stretch;
  border: 1px solid var(--line-s);
  border-radius: 26px;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(var(--accent-primary-rgb), 0.07) 0%, transparent 55%),
    var(--bg-card);
  box-shadow: var(--shadow), 0 0 70px var(--accent-panel-glow-soft);
  backdrop-filter: blur(22px);
}

.auth-station-frame::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent-gradient-60);
  opacity: 0.70;
}

html[data-theme="light"] .auth-station-frame {
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(var(--accent-primary-rgb), 0.05) 0%, transparent 55%),
    var(--bg-card);
}

.auth-station-head { /* container */ }

.auth-station-kicker {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
}

.auth-station-title {
  margin: 10px 0 0;
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: var(--bright);
}

/* ─── Auth forms ──────────────────────────────────────────────── */
.auth-stack { display: grid; gap: 14px; }

.auth-surface {
  padding: 20px 22px;
  display: grid;
  gap: 13px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--bg-panel);
}

.auth-surface-primary {
  border-color: var(--line-s);
  background: rgba(10, 2, 12, 0.72);
}

.auth-surface-whop {
  border-color: rgba(var(--accent-secondary-rgb), 0.42);
  background:
    radial-gradient(ellipse 65% 80% at 100% 0%, rgba(var(--accent-secondary-rgb), 0.12) 0%, transparent 70%),
    var(--bg-panel);
}

html[data-theme="light"] .auth-surface-primary {
  background: rgba(255, 250, 248, 0.90);
}

html[data-theme="light"] .auth-surface-whop {
  border-color: rgba(var(--accent-secondary-rgb), 0.34);
  background:
    radial-gradient(ellipse 70% 80% at 100% 0%, rgba(var(--accent-secondary-rgb), 0.10) 0%, transparent 72%),
    var(--bg-panel);
}

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

.auth-surface-kicker {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--teal);
}

.auth-surface-title {
  margin: 7px 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--bright);
}

.auth-surface-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--accent-badge-bg);
  border: 1px solid var(--accent-badge-border);
  color: var(--teal);
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.auth-surface-badge-soft {
  background: var(--amber-d);
  border-color: var(--accent-secondary-border);
  color: var(--amber);
}

.auth-submit {
  width: 100%;
  margin-top: 4px;
}

.auth-whop-help {
  margin: 0;
}

.auth-surface .auth-submit[disabled] {
  opacity: 0.70;
  cursor: not-allowed;
}

.login-flash-stack { margin-bottom: 2px; }

/* ─── Theme switcher for login ───────────────────────────────── */
.theme-switcher-login {
  left: auto;
  right: 20px;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 1200px) {
  .login-stage {
    grid-template-columns: 1fr;
  }

  .login-stat-strip,
  .login-widget-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .control-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .chart-stack {
    grid-template-columns: 1fr;
  }

  .chart-stack-v5-workbench {
    grid-template-columns: 1fr;
  }

  .chart-panel-wide,
  .chart-panel-half {
    grid-column: auto;
  }

  .platform-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .platform-header-actions {
    align-items: flex-start;
  }
}

@media (max-width: 760px) {
  .site-shell {
    width: calc(100% - 16px);
    padding: 10px 0 80px;
  }

  .platform-header,
  .control-bar,
  .chart-panel {
    padding: 16px 18px;
  }

  .platform-logo {
    width: 52px;
    height: 52px;
  }

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

  [data-page="v7-dashboard"] .control-grid-v7 {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-page="v7-dashboard"] .control-actions {
    width: 100%;
    justify-content: flex-start;
  }

  [data-page="v7-dashboard"] .control-actions .btn-primary {
    width: 100%;
  }

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

  .summary-grid-v7-workbench {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .summary-grid-spot-only {
    grid-template-columns: minmax(0, 1fr);
  }

  .chart-head {
    align-items: start;
  }

  .surface-showcase {
    grid-template-columns: minmax(0, 1fr);
  }

  .surface-showcase-title,
  .surface-showcase-text {
    max-width: none;
  }

  .surface-showcase-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .chart-head-actions {
    width: 100%;
    justify-items: start;
  }

  .login-stat-strip,
  .login-widget-grid {
    grid-template-columns: 1fr;
  }

  .login-logo-img {
    width: 140px;
    height: 140px;
  }

  .login-hero-card {
    padding: 24px 22px;
  }

  .chart-shell         { min-height: 440px; }
  .chart-shell-primary { min-height: 560px; }
  .chart-shell-heatmap { min-height: 700px; }
  .chart-shell-vgex-bar { min-height: 520px; }
  .chart-shell-compact { min-height: 380px; }
  .chart-shell-v7-workbench { min-height: 460px; }
  .chart-shell-v7-method { min-height: 460px; }
  .chart-shell-v7-retail { min-height: 420px; }
  .chart-shell-v8-fair { min-height: 420px; }
  .chart-shell-surface-classifier { min-height: 400px; }
  #iv-surface-classifier-chart { min-height: 400px; }
  .chart-shell-debug   { min-height: 300px; }
  .chart-shell-tall    { min-height: 580px; }
  [data-page="v7-dashboard"] #dealer-chart { min-height: 460px; }
  [data-page="v7-dashboard"] #retail-chart { min-height: 460px; }
  [data-page="v7-dashboard"] #retail-position-chart { min-height: 420px; }
  [data-page="v7-dashboard"] #fair-edge-chart { min-height: 420px; }
  [data-page="v7-dashboard"] .chart-meta { max-width: none; }
  .v8-table-toolbar,
  .v8-table-toolbar-controls,
  .field-group-v8-table {
    width: 100%;
    justify-items: start;
    justify-content: flex-start;
  }

  .theme-switcher {
    left: 12px;
    right: 12px;
    bottom: 12px;
    justify-content: center;
  }

  .theme-switch-group {
    flex: 1 1 100%;
    justify-content: center;
  }

  .login-topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .auth-station-frame {
    padding: 20px 22px;
  }

  .login-hero-title {
    font-size: clamp(2.2rem, 11vw, 3.6rem);
  }

  .auth-surface-head { flex-direction: column; }

  .theme-switcher-login {
    left: 12px;
    right: 12px;
  }
}

@media (max-width: 1120px) {
  .chart-stack-v5-workbench {
    grid-template-columns: minmax(0, 1fr);
  }

  .summary-grid-v7-workbench {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .chart-stack-v7-workbench {
    grid-template-columns: minmax(0, 1fr);
  }

  .chart-stack-v7-retail {
    grid-template-columns: minmax(0, 1fr);
  }

  .chart-stack-v8-trades {
    grid-template-columns: minmax(0, 1fr);
  }

  .chart-stack-v8-fair {
    grid-template-columns: minmax(0, 1fr);
  }

  .chart-stack-v8-feed {
    grid-template-columns: minmax(0, 1fr);
  }

  .surface-showcase {
    grid-template-columns: minmax(0, 1fr);
  }

  .surface-showcase-copy {
    order: 2;
  }

  .surface-showcase-title,
  .surface-showcase-text {
    max-width: none;
  }

  .v8-live-trade-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .v8-live-trade-method {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* ================================================================
   DEALERMAP BRAND OVERRIDE
   ================================================================ */

:root {
  --font-body: "Manrope", "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --font-display: "Sora", "Aptos", sans-serif;
  --brand-logo-image: url("data:image/png;base64,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");
}

html,
body {
  font-family: var(--font-body);
  letter-spacing: -0.01em;
}

h1,
h2,
h3,
.platform-title,
.login-hero-title,
.auth-station-title,
.login-widget-title,
.chart-title {
  font-family: var(--font-display);
}

html[data-theme="dark"][data-color-scheme="classic"] {
  --bg: #091214;
  --bg-up: #0d1a1d;
  --bg-panel: rgba(11, 22, 25, 0.82);
  --bg-card: rgba(17, 31, 35, 0.88);
  --line: rgba(107, 181, 176, 0.17);
  --line-s: rgba(146, 211, 205, 0.28);
  --text: #d8e3e0;
  --bright: #f6fbfa;
  --muted: #92a7a3;
  --faint: rgba(216, 227, 224, 0.2);
  --teal: #76b8b2;
  --teal-d: rgba(118, 184, 178, 0.16);
  --amber: #caa06c;
  --amber-d: rgba(202, 160, 108, 0.16);
  --green: #85ceb8;
  --red: #d7796b;
  --shadow: 0 30px 80px rgba(2, 11, 13, 0.56), 0 0 0 1px rgba(118, 184, 178, 0.05);
  --shadow-sm: 0 14px 36px rgba(2, 11, 13, 0.36);
  --accent-primary: #76b8b2;
  --accent-primary-deep: #4a8f89;
  --accent-primary-rgb: 118, 184, 178;
  --accent-secondary: #caa06c;
  --accent-secondary-deep: #9b7649;
  --accent-secondary-rgb: 202, 160, 108;
  --grid-line: rgba(118, 184, 178, 0.055);
  --ambient-flares:
    radial-gradient(circle at 10% 12%, rgba(118, 184, 178, 0.18), transparent 38%),
    radial-gradient(circle at 88% 16%, rgba(202, 160, 108, 0.12), transparent 34%),
    radial-gradient(circle at 76% 80%, rgba(75, 122, 122, 0.18), transparent 32%);
}

html[data-theme="dark"][data-color-scheme="emerald"] {
  --bg: #071519;
  --bg-up: #0a1c22;
  --bg-panel: rgba(8, 24, 29, 0.82);
  --bg-card: rgba(13, 31, 37, 0.89);
  --line: rgba(102, 209, 202, 0.18);
  --line-s: rgba(134, 225, 219, 0.3);
  --text: #d9ece9;
  --bright: #f6ffff;
  --muted: #8ba9aa;
  --faint: rgba(217, 236, 233, 0.22);
  --teal: #67d2cb;
  --teal-d: rgba(103, 210, 203, 0.16);
  --amber: #9fc2bf;
  --amber-d: rgba(159, 194, 191, 0.16);
  --green: #92d8c6;
  --red: #d97871;
  --shadow: 0 32px 88px rgba(1, 10, 13, 0.58), 0 0 0 1px rgba(103, 210, 203, 0.05);
  --shadow-sm: 0 16px 38px rgba(1, 10, 13, 0.38);
  --accent-primary: #67d2cb;
  --accent-primary-deep: #359f98;
  --accent-primary-rgb: 103, 210, 203;
  --accent-secondary: #9fc2bf;
  --accent-secondary-deep: #688e8b;
  --accent-secondary-rgb: 159, 194, 191;
  --grid-line: rgba(103, 210, 203, 0.05);
  --ambient-flares:
    radial-gradient(circle at 16% 14%, rgba(103, 210, 203, 0.18), transparent 36%),
    radial-gradient(circle at 84% 18%, rgba(159, 194, 191, 0.14), transparent 32%),
    radial-gradient(circle at 74% 82%, rgba(42, 104, 107, 0.2), transparent 30%);
}

html[data-theme="light"][data-color-scheme="classic"] {
  --bg: #f2eee7;
  --bg-up: #ebe6dd;
  --bg-panel: rgba(255, 250, 245, 0.82);
  --bg-card: rgba(255, 253, 249, 0.9);
  --line: rgba(63, 114, 110, 0.14);
  --line-s: rgba(63, 114, 110, 0.26);
  --text: #253231;
  --bright: #101819;
  --muted: #6b7d79;
  --faint: rgba(37, 50, 49, 0.18);
  --teal: #3c7f7a;
  --teal-d: rgba(60, 127, 122, 0.12);
  --amber: #9a764d;
  --amber-d: rgba(154, 118, 77, 0.12);
  --green: #3d8f78;
  --red: #be6d5d;
  --shadow: 0 24px 64px rgba(47, 63, 58, 0.12), 0 0 0 1px rgba(60, 127, 122, 0.04);
  --shadow-sm: 0 10px 28px rgba(47, 63, 58, 0.09);
  --accent-primary: #3c7f7a;
  --accent-primary-deep: #2b625f;
  --accent-primary-rgb: 60, 127, 122;
  --accent-secondary: #9a764d;
  --accent-secondary-deep: #7a5d3d;
  --accent-secondary-rgb: 154, 118, 77;
  --grid-line: rgba(60, 127, 122, 0.065);
  --ambient-flares:
    radial-gradient(circle at 8% 10%, rgba(60, 127, 122, 0.12), transparent 35%),
    radial-gradient(circle at 92% 8%, rgba(154, 118, 77, 0.12), transparent 32%),
    radial-gradient(circle at 78% 84%, rgba(174, 205, 201, 0.22), transparent 28%);
}

html[data-theme="light"][data-color-scheme="emerald"] {
  --bg: #eef5f4;
  --bg-up: #e7efee;
  --bg-panel: rgba(255, 255, 255, 0.84);
  --bg-card: rgba(251, 255, 255, 0.92);
  --line: rgba(42, 125, 122, 0.14);
  --line-s: rgba(42, 125, 122, 0.24);
  --text: #1f3031;
  --bright: #0f1b1d;
  --muted: #657f80;
  --faint: rgba(31, 48, 49, 0.18);
  --teal: #2e8b86;
  --teal-d: rgba(46, 139, 134, 0.12);
  --amber: #6b8f8b;
  --amber-d: rgba(107, 143, 139, 0.12);
  --green: #3f9f8f;
  --red: #be6b64;
  --shadow: 0 24px 64px rgba(32, 61, 66, 0.11), 0 0 0 1px rgba(46, 139, 134, 0.04);
  --shadow-sm: 0 10px 28px rgba(32, 61, 66, 0.08);
  --accent-primary: #2e8b86;
  --accent-primary-deep: #226d69;
  --accent-primary-rgb: 46, 139, 134;
  --accent-secondary: #6b8f8b;
  --accent-secondary-deep: #4f706c;
  --accent-secondary-rgb: 107, 143, 139;
  --grid-line: rgba(46, 139, 134, 0.06);
  --ambient-flares:
    radial-gradient(circle at 10% 10%, rgba(46, 139, 134, 0.12), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(107, 143, 139, 0.12), transparent 30%),
    radial-gradient(circle at 80% 84%, rgba(185, 225, 220, 0.24), transparent 28%);
}

html[data-theme="dark"][data-color-scheme="mono"] {
  --bg: #0a0a0a;
  --bg-up: #111111;
  --bg-panel: rgba(18, 18, 18, 0.82);
  --bg-card: rgba(14, 14, 14, 0.88);
  --line: rgba(255, 255, 255, 0.07);
  --line-s: rgba(255, 255, 255, 0.13);
  --text: #e8e8e8;
  --bright: #ffffff;
  --muted: #7a7a7a;
  --faint: rgba(232, 232, 232, 0.18);
  --teal: #22c55e;
  --teal-d: rgba(34, 197, 94, 0.14);
  --amber: #ef4444;
  --amber-d: rgba(239, 68, 68, 0.14);
  --green: #22c55e;
  --red: #ef4444;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.70), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-sm: 0 14px 36px rgba(0, 0, 0, 0.50);
  --accent-primary: #22c55e;
  --accent-primary-deep: #16a34a;
  --accent-primary-rgb: 34, 197, 94;
  --accent-secondary: #ef4444;
  --accent-secondary-deep: #dc2626;
  --accent-secondary-rgb: 239, 68, 68;
  --grid-line: rgba(255, 255, 255, 0.035);
  --ambient-flares: none;
}

html[data-theme="light"][data-color-scheme="mono"] {
  --bg: #f9f9f9;
  --bg-up: #f0f0f0;
  --bg-panel: rgba(255, 255, 255, 0.84);
  --bg-card: rgba(255, 255, 255, 0.92);
  --line: rgba(0, 0, 0, 0.07);
  --line-s: rgba(0, 0, 0, 0.13);
  --text: #111111;
  --bright: #000000;
  --muted: #666666;
  --faint: rgba(0, 0, 0, 0.16);
  --teal: #16a34a;
  --teal-d: rgba(22, 163, 74, 0.10);
  --amber: #dc2626;
  --amber-d: rgba(220, 38, 38, 0.10);
  --green: #16a34a;
  --red: #dc2626;
  --shadow: 0 24px 64px rgba(0, 0, 0, 0.09), 0 0 0 1px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.07);
  --accent-primary: #16a34a;
  --accent-primary-deep: #15803d;
  --accent-primary-rgb: 22, 163, 74;
  --accent-secondary: #dc2626;
  --accent-secondary-deep: #b91c1c;
  --accent-secondary-rgb: 220, 38, 38;
  --grid-line: rgba(0, 0, 0, 0.05);
  --ambient-flares: none;
}

:root,
html[data-theme][data-color-scheme] {
  --accent-gradient-50: linear-gradient(90deg, rgba(var(--accent-primary-rgb), 0.9), rgba(var(--accent-secondary-rgb), 0.75));
  --accent-gradient-55: linear-gradient(90deg, rgba(var(--accent-primary-rgb), 0.95), rgba(var(--accent-secondary-rgb), 0.72));
  --accent-gradient-60: linear-gradient(90deg, rgba(var(--accent-primary-rgb), 0.95), rgba(var(--accent-secondary-rgb), 0.82));
  --accent-gradient-primary: linear-gradient(90deg, rgba(var(--accent-primary-rgb), 0.9), rgba(var(--accent-primary-rgb), 0.04));
  --button-primary-gradient: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.92), rgba(var(--accent-secondary-rgb), 0.88));
  --button-secondary-gradient: linear-gradient(135deg, rgba(var(--accent-secondary-rgb), 0.92), rgba(var(--accent-primary-rgb), 0.7));
  --button-primary-shadow: 0 14px 32px rgba(var(--accent-primary-rgb), 0.22);
  --button-secondary-shadow: 0 14px 28px rgba(var(--accent-secondary-rgb), 0.18);
  --accent-focus-ring: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.18);
  --accent-active-border: rgba(var(--accent-primary-rgb), 0.36);
  --accent-panel-glow: rgba(var(--accent-primary-rgb), 0.09);
  --accent-panel-glow-soft: rgba(var(--accent-primary-rgb), 0.06);
  --accent-logo-glow: rgba(var(--accent-primary-rgb), 0.28);
  --accent-logo-glow-strong: rgba(var(--accent-primary-rgb), 0.34);
  --accent-scan: rgba(var(--accent-primary-rgb), 0.08);
  --accent-badge-bg: rgba(var(--accent-primary-rgb), 0.12);
  --accent-badge-border: rgba(var(--accent-primary-rgb), 0.22);
  --accent-secondary-border: rgba(var(--accent-secondary-rgb), 0.24);
}

body {
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.03), transparent 42%),
    linear-gradient(180deg, var(--bg-up) 0%, var(--bg) 100%);
}

body::before {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.78;
}

body::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 28%),
    var(--ambient-flares);
  filter: saturate(115%);
}

.site-shell {
  width: min(1740px, calc(100% - 44px));
  padding: 22px 0 52px;
}

.ambient {
  top: max(96px, 11vh);
  bottom: 34px;
  width: clamp(32px, 3.1vw, 52px);
  border-radius: 32px;
  opacity: 0.78;
}

.ambient::before,
.ambient::after {
  inset: 8px;
}

.ambient::before {
  inset-inline: 8px;
  background:
    linear-gradient(180deg, transparent 0%, rgba(var(--accent-primary-rgb), 0.36) 18%, transparent 36%, rgba(var(--accent-secondary-rgb), 0.2) 58%, transparent 80%, rgba(var(--accent-primary-rgb), 0.24) 100%),
    repeating-linear-gradient(180deg, rgba(var(--accent-primary-rgb), 0) 0 15px, rgba(var(--accent-primary-rgb), 0.28) 15px 16px, rgba(var(--accent-primary-rgb), 0) 16px 31px);
  opacity: 0.74;
}

.ambient::after {
  background:
    radial-gradient(circle at 50% 10%, rgba(var(--accent-primary-rgb), 0.94) 0 1.8px, transparent 3px),
    radial-gradient(circle at 50% 28%, rgba(var(--accent-secondary-rgb), 0.72) 0 2.4px, transparent 4px),
    radial-gradient(circle at 50% 48%, rgba(var(--accent-primary-rgb), 0.78) 0 1.8px, transparent 3px),
    radial-gradient(circle at 50% 68%, rgba(var(--accent-secondary-rgb), 0.82) 0 2.4px, transparent 4px),
    radial-gradient(circle at 50% 88%, rgba(var(--accent-primary-rgb), 0.9) 0 1.8px, transparent 3px);
  filter: drop-shadow(0 0 8px rgba(var(--accent-primary-rgb), 0.34));
}

.ambient-a {
  left: clamp(8px, 1vw, 16px);
}

.ambient-b {
  right: clamp(8px, 1vw, 16px);
}

.panel,
.chart-panel,
.control-bar,
.summary-card,
.login-hero-card,
.auth-station-frame,
.auth-surface,
.login-widget,
.login-stat-chip,
.theme-switcher {
  backdrop-filter: blur(18px);
}

.btn-primary,
.btn-secondary {
  color: #f7fbfb;
  letter-spacing: 0;
}

.btn-primary {
  box-shadow: var(--button-primary-shadow);
}

.btn-secondary {
  box-shadow: var(--button-secondary-shadow);
}

.btn-tertiary {
  background: rgba(var(--accent-primary-rgb), 0.08);
  border-color: rgba(var(--accent-primary-rgb), 0.18);
}

.btn-tertiary:hover {
  border-color: rgba(var(--accent-primary-rgb), 0.32);
  background: rgba(var(--accent-primary-rgb), 0.14);
}

.btn-tertiary.is-active {
  border-color: rgba(var(--accent-primary-rgb), 0.38);
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.2), rgba(var(--accent-secondary-rgb), 0.16));
  color: var(--bright);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.field-input,
.vgex-input,
.panel-filter-select,
.field-input-static {
  border-color: rgba(var(--accent-primary-rgb), 0.18);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.035);
}

html[data-theme="light"] .field-input,
html[data-theme="light"] .vgex-input,
html[data-theme="light"] .panel-filter-select,
html[data-theme="light"] .field-input-static {
  background: rgba(255, 255, 255, 0.82);
}

.field-input:focus,
.vgex-input:focus,
.panel-filter-select:focus {
  border-color: rgba(var(--accent-primary-rgb), 0.46);
  box-shadow: var(--accent-focus-ring);
}

.platform-header-hero,
.login-hero-card,
.auth-station-frame,
.chart-panel,
.control-bar,
.summary-card {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%),
    linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.06), rgba(var(--accent-secondary-rgb), 0.02) 62%, transparent 100%);
}

.platform-header {
  padding: 28px 30px;
  border-color: rgba(var(--accent-primary-rgb), 0.22);
}

.platform-header::before,
.chart-panel::before,
.summary-card::before,
.login-hero-card::before,
.auth-station-frame::before {
  height: 3px;
  opacity: 0.8;
}

.platform-brand {
  align-items: flex-start;
  gap: 24px;
}

.platform-brand-mark {
  flex-shrink: 0;
}

.brand-plaque {
  position: relative;
  display: grid;
  width: 100%;
  padding: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 36%),
    radial-gradient(circle at 18% 18%, rgba(var(--accent-primary-rgb), 0.18), transparent 44%),
    var(--brand-logo-image),
    linear-gradient(135deg, rgba(5, 15, 17, 0.98), rgba(7, 18, 24, 0.9));
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto, auto, cover, cover;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.24);
  border-radius: 24px;
  box-shadow:
    0 20px 44px rgba(4, 12, 14, 0.24),
    0 0 0 1px rgba(var(--accent-primary-rgb), 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.brand-plaque.has-image {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 36%),
    radial-gradient(circle at 18% 18%, rgba(var(--accent-primary-rgb), 0.18), transparent 44%),
    linear-gradient(135deg, rgba(5, 15, 17, 0.98), rgba(7, 18, 24, 0.9));
  background-size: auto, auto, cover;
}

.brand-plaque::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, transparent 22%, rgba(255, 255, 255, 0.08) 50%, transparent 78%);
  opacity: 0.42;
  transform: translateX(-42%);
  animation: brandPlaqueSweep 7.5s ease-in-out infinite;
}

.brand-plaque-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.06) contrast(1.04);
}

.brand-plaque-image:not([src]),
.brand-plaque-image[src=""] {
  display: none;
}

.brand-plaque-header {
  width: clamp(280px, 17vw, 332px);
  min-height: 124px;
  height: 124px;
  border-radius: 22px;
}

.brand-plaque-hero {
  width: min(100%, 334px);
  min-height: 132px;
  height: 132px;
  margin-bottom: 18px;
}

.brand-plaque-image-header {
  min-height: 100%;
}

.brand-plaque-image-hero {
  min-height: 100%;
}

@keyframes brandPlaqueSweep {
  0%, 100% {
    transform: translateX(-42%);
  }
  50% {
    transform: translateX(42%);
  }
}

.platform-brand-text {
  gap: 0;
}

.platform-brand-kicker {
  margin-bottom: 10px;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
}

.platform-brand-kicker::before {
  width: 34px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--accent-primary-rgb), 1), rgba(var(--accent-primary-rgb), 0));
  box-shadow: none;
}

.platform-title {
  font-size: clamp(1.9rem, 3vw, 3rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.platform-title-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 0.22rem 0.62rem;
  border-radius: 999px;
  background: rgba(var(--accent-primary-rgb), 0.14);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.24);
  font-size: 0.52em;
  letter-spacing: 0.08em;
  vertical-align: middle;
}

.platform-subtitle {
  margin-top: 10px;
  max-width: 68ch;
  font-size: 0.92rem;
  line-height: 1.72;
}

.platform-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.platform-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.18);
  background:
    linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.12), rgba(var(--accent-secondary-rgb), 0.08)),
    rgba(255, 255, 255, 0.02);
  color: var(--bright);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.platform-header-actions {
  gap: 12px;
}

.platform-nav-tabs {
  gap: 10px;
}

.platform-user {
  min-width: min(280px, 100%);
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
}

.platform-user-label {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.platform-user strong {
  color: var(--bright);
  font-size: 0.96rem;
}

.summary-grid {
  gap: 14px;
}

.summary-card {
  padding: 18px 20px;
  border-color: rgba(var(--accent-primary-rgb), 0.16);
}

.summary-card-feature {
  background-image:
    radial-gradient(circle at 0% 50%, rgba(var(--accent-primary-rgb), 0.12), transparent 45%),
    linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.08), rgba(var(--accent-secondary-rgb), 0.06)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%);
  border-color: rgba(var(--accent-primary-rgb), 0.28);
}

.summary-card-feature .summary-value {
  font-size: clamp(2rem, 3vw, 2.75rem);
}

.chart-panel {
  padding: 24px 26px;
  border-color: rgba(var(--accent-primary-rgb), 0.18);
}

.chart-head {
  margin-bottom: 18px;
}

.chart-title {
  letter-spacing: -0.045em;
}

.chart-meta {
  color: var(--muted);
}

.chart-shell {
  border-radius: 20px;
  border-color: rgba(var(--accent-primary-rgb), 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 32%),
    linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.05), transparent 48%),
    rgba(6, 15, 17, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="light"] .chart-shell {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 32%),
    linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.05), transparent 48%),
    rgba(255, 255, 255, 0.46);
}

.vgex-controls {
  margin-bottom: 14px;
  padding: 14px 14px 16px;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.025);
}

html[data-theme="light"] .vgex-controls {
  background: rgba(255, 255, 255, 0.46);
}

.vgex-controls select.vgex-input,
#vgex-ticker-input.vgex-input {
  appearance: menulist !important;
  -webkit-appearance: menulist !important;
  background: rgba(255, 255, 255, 0.92) !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-size: auto !important;
  color: #173133 !important;
  color-scheme: light !important;
  padding-right: 13px !important;
  text-transform: none !important;
}

html[data-theme="dark"] .vgex-controls select.vgex-input,
html[data-theme="dark"] #vgex-ticker-input.vgex-input {
  background: rgba(18, 37, 39, 0.92) !important;
  color: #edf5f4 !important;
  border-color: rgba(var(--accent-primary-rgb), 0.22) !important;
}

.theme-switcher {
  padding: 10px;
  border-radius: 26px;
  border-color: rgba(var(--accent-primary-rgb), 0.2);
  background: rgba(12, 25, 28, 0.76);
}

html[data-theme="light"] .theme-switcher {
  background: rgba(255, 255, 255, 0.78);
}

.theme-switch-group {
  border-color: rgba(var(--accent-primary-rgb), 0.14);
  background: rgba(255, 255, 255, 0.03);
}

html[data-theme="light"] .theme-switch-group {
  background: rgba(15, 37, 38, 0.04);
}

.theme-switch-button {
  padding: 0 15px;
}

.theme-switch-button.is-active {
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.22), rgba(var(--accent-secondary-rgb), 0.16));
  border-color: rgba(var(--accent-primary-rgb), 0.24);
  color: var(--bright);
}

.login-shell {
  padding-top: 26px;
}

.login-topbar {
  padding: 2px 2px 4px;
  margin-bottom: 20px;
}

.login-brandline {
  gap: 16px;
}

.login-brandline-kicker {
  font-family: var(--font-display);
  letter-spacing: 0.18em;
  color: var(--bright);
}

.login-brandline-engine {
  padding-left: 16px;
}

.login-stage {
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
  gap: 20px;
}

.login-hero-card {
  min-height: 500px;
  padding: 42px 46px;
  border-color: rgba(var(--accent-primary-rgb), 0.24);
  border-radius: 30px;
}

.login-hero-ambient {
  opacity: 0.14;
  mix-blend-mode: soft-light;
}

.login-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.login-hero-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--bright);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.login-hero-overline::before {
  width: 36px;
  background: linear-gradient(90deg, rgba(var(--accent-primary-rgb), 1), rgba(var(--accent-primary-rgb), 0));
}

.login-hero-title {
  max-width: 15ch;
  letter-spacing: -0.06em;
}

.login-hero-copy {
  max-width: 52rem;
  font-size: 0.95rem;
}

.login-preview {
  margin: 26px 0 24px;
  padding: 12px;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.18);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 30%),
    rgba(5, 15, 17, 0.44);
  box-shadow: 0 24px 42px rgba(1, 10, 13, 0.24);
}

html[data-theme="light"] .login-preview {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 30%),
    rgba(255, 255, 255, 0.82);
}

.login-preview-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.14);
  box-shadow: 0 18px 34px rgba(1, 10, 13, 0.26);
}

.login-preview-caption {
  margin-top: 10px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--muted);
}

.login-stat-chip,
.login-widget,
.auth-surface {
  border-radius: 20px;
  border-color: rgba(var(--accent-primary-rgb), 0.14);
  background: rgba(255, 255, 255, 0.035);
}

html[data-theme="light"] .login-stat-chip,
html[data-theme="light"] .login-widget,
html[data-theme="light"] .auth-surface {
  background: rgba(255, 255, 255, 0.74);
}

.login-widget-large {
  background:
    radial-gradient(circle at 0% 40%, rgba(var(--accent-primary-rgb), 0.12), transparent 40%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 36%),
    rgba(255, 255, 255, 0.04);
}

.auth-station-frame {
  padding: 32px;
  border-radius: 30px;
  border-color: rgba(var(--accent-primary-rgb), 0.22);
  box-shadow: var(--shadow), 0 0 60px var(--accent-panel-glow-soft);
}

.auth-surface-primary {
  background:
    linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.12), rgba(var(--accent-secondary-rgb), 0.06)),
    rgba(255, 255, 255, 0.04);
}

html[data-theme="light"] .auth-surface-primary {
  background:
    linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.07), rgba(var(--accent-secondary-rgb), 0.04)),
    rgba(255, 255, 255, 0.82);
}

.status-banner,
.flash-banner {
  backdrop-filter: blur(16px);
}

@media (max-width: 1200px) {
  .login-stage {
    grid-template-columns: 1fr;
  }

  .platform-header {
    align-items: flex-start;
  }

  .platform-header-actions {
    width: 100%;
    align-items: flex-start;
  }
}

@media (max-width: 1500px) {
  .ambient {
    display: none;
  }
}

@media (max-width: 760px) {
  .site-shell {
    width: calc(100% - 16px);
    padding: 14px 0 88px;
  }

  .platform-header,
  .chart-panel,
  .control-bar,
  .login-hero-card,
  .auth-station-frame {
    padding-left: 20px;
    padding-right: 20px;
  }

  .platform-brand {
    flex-direction: column;
    gap: 18px;
  }

  .brand-plaque-header {
    width: min(100%, 322px);
    min-height: 116px;
    height: 116px;
  }

  .brand-plaque-hero {
    width: min(100%, 292px);
    min-height: 118px;
    height: 118px;
  }

  .brand-plaque-image-header {
    min-height: 100%;
  }

  .brand-plaque-image-hero {
    min-height: 100%;
  }

  .platform-title {
    font-size: clamp(1.8rem, 9vw, 2.6rem);
  }

  .platform-title-tag {
    margin-left: 0;
    margin-top: 8px;
  }

  .platform-user {
    width: 100%;
    text-align: left;
  }

  .login-hero-card {
    min-height: 0;
    padding-top: 30px;
    padding-bottom: 28px;
  }

  .login-hero-title {
    max-width: 16ch;
  }

  .login-preview {
    margin: 22px 0 20px;
    padding: 10px;
    border-radius: 20px;
  }

  .theme-switcher {
    background: rgba(12, 25, 28, 0.9);
  }

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

@media (prefers-reduced-motion: reduce) {
  .ambient,
  .ambient::before,
  .ambient::after,
  .brand-plaque::after {
    animation: none;
  }
}

/* ================================================================
   V8 VISUAL UPGRADES
   ================================================================ */

/* ─── Typography: Manrope as body font ───────────────────────── */
html, body {
  font-family: "Manrope", "Aptos", "Segoe UI Variable Text", "Segoe UI", sans-serif;
}

/* ─── Smooth scroll + focus rings ────────────────────────────── */
html {
  scroll-behavior: smooth;
}

:focus-visible {
  outline: none;
  box-shadow: var(--accent-focus-ring);
}

/* ─── Button hover-lift ───────────────────────────────────────── */
.btn-primary,
.btn-secondary {
  transition: opacity 0.15s, transform 0.16s, box-shadow 0.16s;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--button-primary-shadow), 0 10px 36px rgba(var(--accent-primary-rgb), 0.28);
}

.btn-secondary:hover {
  transform: translateY(-1px);
  box-shadow: var(--button-secondary-shadow), 0 10px 32px rgba(var(--accent-secondary-rgb), 0.24);
}

.platform-nav-tabs .btn-tertiary {
  transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
}

.platform-nav-tabs .btn-tertiary:hover:not(.is-active) {
  transform: translateY(-1px);
}

/* ─── Platform header sticky compact ─────────────────────────── */
.platform-header-hero {
  transition: padding 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              border-radius 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              max-height 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.platform-header--compact {
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: var(--r-lg);
}

.platform-header--compact .platform-subtitle,
.platform-header--compact .platform-pill-row {
  display: none;
}

/* On mobile, go much further: collapse to a slim single-row pill */
@media (max-width: 760px) {
  .platform-header--compact {
    padding: 8px 14px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    border-radius: var(--r-md);
  }

  /* Hide everything except nav tabs + sign-out */
  .platform-header--compact .platform-brand-mark,
  .platform-header--compact .platform-brand-kicker,
  .platform-header--compact .platform-title,
  .platform-header--compact .platform-user {
    display: none;
  }

  /* Collapse brand text so nav buttons sit flush */
  .platform-header--compact .platform-brand {
    flex-direction: row;
    gap: 0;
    flex: 0 0 auto;
  }

  .platform-header--compact .platform-brand-text {
    display: none;
  }

  /* Nav fills the freed space */
  .platform-header--compact .platform-header-actions {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    flex: 1;
    justify-content: flex-end;
  }

  .platform-header--compact .platform-nav-tabs {
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: flex-end;
  }

  /* Shrink nav buttons further */
  .platform-header--compact .btn-tertiary {
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.76rem;
  }
}

/* OI topbar mobile compact — slim it down when scrolled */
@media (max-width: 760px) {
  .topbar {
    top: 4px;
    padding: 10px 14px;
  }

  .topbar-meta {
    display: none;
  }
}

/* ─── Chart panel entrance animation ─────────────────────────── */
@keyframes panelEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.chart-panel {
  animation: panelEnter 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.chart-panel:nth-child(2) { animation-delay: 0.08s; }
.chart-panel:nth-child(3) { animation-delay: 0.15s; }
.chart-panel:nth-child(4) { animation-delay: 0.22s; }
.chart-panel:nth-child(5) { animation-delay: 0.28s; }

/* ─── Chart panel live glow on data update ───────────────────── */
@keyframes panelLivePulse {
  0%   { box-shadow: var(--shadow); border-color: var(--line); }
  22%  {
    box-shadow: var(--shadow),
                0 0 0 2px rgba(var(--accent-primary-rgb), 0.30),
                0 0 36px rgba(var(--accent-primary-rgb), 0.14);
    border-color: rgba(var(--accent-primary-rgb), 0.34);
  }
  100% { box-shadow: var(--shadow); border-color: var(--line); }
}

.chart-panel--live-pulse {
  animation: panelLivePulse 1.6s ease-out forwards;
}

/* ─── Summary spot value flash ────────────────────────────────── */
@keyframes spotFlashUp {
  0%   { color: var(--green); text-shadow: 0 0 20px rgba(40, 200, 112, 0.65); }
  100% { color: var(--bright); text-shadow: none; }
}

@keyframes spotFlashDown {
  0%   { color: var(--red); text-shadow: 0 0 20px rgba(255, 34, 68, 0.55); }
  100% { color: var(--bright); text-shadow: none; }
}

.summary-value--flash-up   { animation: spotFlashUp   1.1s ease-out forwards; }
.summary-value--flash-down { animation: spotFlashDown 1.1s ease-out forwards; }

/* ─── Skeleton shimmer for "Waiting for data" chart metas ────── */
@keyframes skeletonShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.chart-meta--waiting {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--accent-primary-rgb), 0.14) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.9s linear infinite;
  border-radius: 6px;
  color: transparent !important;
  user-select: none;
  min-width: 140px;
  display: inline-block;
}

/* ─── Live indicator dot on chart-meta ───────────────────────── */
@keyframes liveDot {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.4; transform: scale(0.80); }
}

.chart-meta--live::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 7px rgba(40, 200, 112, 0.70);
  margin-right: 7px;
  vertical-align: middle;
  flex-shrink: 0;
  animation: liveDot 2.2s ease-in-out infinite;
}

/* ─── Film grain / noise overlay ─────────────────────────────── */
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

html[data-theme="light"] .noise-overlay { opacity: 0.012; }

/* ─── View-transition crossfade for theme/palette switch ────── */
@keyframes vtFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes vtFadeIn  { from { opacity: 0; } to { opacity: 1; } }

::view-transition-old(root) { animation: 0.20s ease-out both vtFadeOut; }
::view-transition-new(root) { animation: 0.20s ease-out both vtFadeIn;  }

/* ─── Login hero title one-shot shimmer ──────────────────────── */
@keyframes titleShimmer {
  from { background-position:  200% center; }
  to   { background-position: -200% center; }
}

@supports (-webkit-background-clip: text) {
  .login-hero-title {
    background: linear-gradient(
      90deg,
      var(--bright) 20%,
      var(--teal)   50%,
      var(--bright) 80%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: titleShimmer 2.6s ease-out 0.6s both;
  }
}

/* ─── Login preview image parallax ───────────────────────────── */
.login-preview {
  perspective: 900px;
}

.login-preview-image {
  transform-origin: center center;
  will-change: transform;
  transition: transform 0.10s ease-out;
}

/* ─── Extended prefers-reduced-motion ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .chart-panel,
  .chart-panel--live-pulse,
  .summary-value--flash-up,
  .summary-value--flash-down,
  .chart-meta--waiting,
  .chart-meta--live::before,
  .platform-header-hero,
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
    transition: none !important;
  }

  @supports (-webkit-background-clip: text) {
    .login-hero-title {
      animation: none !important;
      background-position: 200% center;
    }
  }

  .login-preview-image {
    transition: none !important;
    transform: none !important;
  }
}

/* ================================================================
   OI DASHBOARD  (oi_dashboard.html  — all classes were unstyled)
   ================================================================ */

/* ─── Shell / page wrapper ────────────────────────────────────── */
.shell {
  position: relative;
  z-index: 1;
  max-width: 1480px;
  margin: 0 auto;
  padding: 20px 20px 52px;
  display: grid;
  gap: 14px;
}

/* ─── Topbar ──────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 8px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  overflow: hidden;
  transition: padding 0.25s ease, border-radius 0.25s ease;
}

.topbar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent-gradient-55);
  opacity: 0.75;
}

/* ─── Brand + live dot ───────────────────────────────────────── */
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.0rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
  flex-shrink: 0;
}

@keyframes oiLivePulse {
  0%, 100% { opacity: 1;   transform: scale(1);    box-shadow: 0 0 8px 2px rgba(var(--accent-primary-rgb), 0.70); }
  50%       { opacity: 0.4; transform: scale(0.76); box-shadow: 0 0 3px 1px rgba(var(--accent-primary-rgb), 0.28); }
}

.live-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 8px 2px rgba(var(--accent-primary-rgb), 0.70);
  animation: oiLivePulse 2s ease-in-out infinite;
}

/* ─── Topbar meta ─────────────────────────────────────────────── */
.topbar-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--muted);
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
  min-width: 0;
}

.meta-ticker {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--bright);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.meta-div {
  color: var(--faint);
  font-size: 1.1rem;
  line-height: 1;
}

.meta-view {
  color: var(--text);
  font-weight: 600;
}

.meta-regime {
  color: var(--teal);
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 10px;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.22);
  border-radius: 999px;
  background: rgba(var(--accent-primary-rgb), 0.08);
}

/* ─── Topbar nav ──────────────────────────────────────────────── */
.topbar-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--line-s);
  border-radius: 999px;
  background: rgba(var(--accent-primary-rgb), 0.08);
  color: var(--text);
  font: inherit;
  font-size: 0.80rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.nav-btn:hover {
  background: rgba(var(--accent-primary-rgb), 0.16);
  border-color: rgba(var(--accent-primary-rgb), 0.34);
  transform: translateY(-1px);
}

.nav-dim {
  color: var(--muted);
  background: transparent;
  border-color: var(--line);
}

/* ─── Control bar ─────────────────────────────────────────────── */
.ctrl-bar {
  padding: 16px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px);
}

.ctrl-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.ctrl-field {
  display: grid;
  gap: 6px;
  min-width: 120px;
}

.ctrl-field > span {
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.ctrl-field input[type="text"],
.ctrl-field input[type="date"],
.ctrl-field select {
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  color-scheme: dark;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ctrl-field input:focus,
.ctrl-field select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: var(--accent-focus-ring);
}

html[data-theme="light"] .ctrl-field input,
html[data-theme="light"] .ctrl-field select {
  background: rgba(255, 255, 255, 0.82);
  color-scheme: light;
}

.ctrl-field.is-hidden { display: none; }

.ctrl-foot {
  margin-top: 8px;
  font-size: 0.76rem;
  color: var(--muted);
}

.refresh-status { display: block; }
.refresh-status.is-error { color: var(--red); }

/* ─── KPI strip ───────────────────────────────────────────────── */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 12px;
}

.kpi-card {
  position: relative;
  overflow: hidden;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px);
  transition: border-color 0.18s;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%),
    linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.05), transparent 70%);
  animation: panelEnter 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.kpi-card:nth-child(2) { animation-delay: 0.05s; }
.kpi-card:nth-child(3) { animation-delay: 0.09s; }
.kpi-card:nth-child(4) { animation-delay: 0.13s; }
.kpi-card:nth-child(5) { animation-delay: 0.17s; }
.kpi-card:nth-child(6) { animation-delay: 0.21s; }
.kpi-card:nth-child(7) { animation-delay: 0.25s; }

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--accent-gradient-50);
  opacity: 0.40;
}

.kpi-card:hover { border-color: var(--line-s); }

.kpi-label {
  display: block;
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}

.kpi-value {
  display: block;
  font-size: 1.30rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--bright);
  font-variant-numeric: tabular-nums;
}

/* ─── Ladder panel ────────────────────────────────────────────── */
.ladder-panel {
  padding: 22px 24px;
  animation: panelEnter 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}

.ladder-hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.panel-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 5px;
}

.panel-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--bright);
}

.ladder-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.74rem;
  color: var(--muted);
  text-align: right;
}

.dim { color: var(--muted); }
.sm  { font-size: 0.74rem; }

.show-all-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text);
  user-select: none;
}

.show-all-label input {
  accent-color: var(--teal);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.chart-loading {
  padding: 16px 0;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
}

.chart-loading.is-hidden { display: none; }

/* ─── Ladder scroll + table ───────────────────────────────────── */
.ladder-scroll {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(4, 2, 6, 0.55);
}

html[data-theme="light"] .ladder-scroll {
  background: rgba(255, 255, 255, 0.45);
}

.ladder-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}

.ladder-table thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  background: rgba(var(--accent-primary-rgb), 0.04);
}

.ladder-table thead th:not(:first-child):not(:nth-child(2)) {
  text-align: right;
}

.ladder-table tbody tr {
  border-bottom: 1px solid rgba(var(--accent-primary-rgb), 0.055);
  transition: background 0.10s;
}

.ladder-table tbody tr:last-child { border-bottom: none; }

.ladder-table tbody tr:hover {
  background: rgba(var(--accent-primary-rgb), 0.07);
}

.ladder-table tbody tr.is-spot-row {
  background: rgba(var(--accent-primary-rgb), 0.10);
  border-top: 1px solid rgba(var(--accent-primary-rgb), 0.22);
  border-bottom: 1px solid rgba(var(--accent-primary-rgb), 0.22);
}

.ladder-table tbody tr.is-spot-row:hover {
  background: rgba(var(--accent-primary-rgb), 0.15);
}

.ladder-table tbody tr.is-spot-row .ladder-strike {
  color: var(--teal);
  font-weight: 800;
}

.ladder-table tbody tr.is-spot-row .ladder-strike::after {
  content: ' ◀';
  font-size: 0.65em;
  opacity: 0.60;
  margin-left: 2px;
}

.ladder-strike {
  padding: 9px 14px;
  font-weight: 700;
  font-size: 0.87rem;
  color: var(--bright);
  white-space: nowrap;
}

.ladder-num {
  padding: 9px 14px;
  text-align: right;
  color: var(--text);
}

.ladder-num.pos { color: var(--green); }
.ladder-num.neg { color: var(--red);   }

.ladder-empty {
  padding: 28px;
  text-align: center;
  color: var(--muted);
  font-size: 0.86rem;
}

/* ─── Bar chart cell ──────────────────────────────────────────── */
.ladder-bar-cell {
  padding: 6px 14px;
  min-width: 130px;
  width: 170px;
}

.ladder-bar-track {
  position: relative;
  height: 20px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

html[data-theme="light"] .ladder-bar-track {
  background: rgba(0, 0, 0, 0.05);
}

.ladder-bar-oi-bg {
  position: absolute;
  top: 0; bottom: 0;
  background: rgba(var(--accent-primary-rgb), 0.07);
  border-radius: 2px;
}

.ladder-bar-mid {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(var(--accent-primary-rgb), 0.30);
}

.ladder-bar-fill {
  position: absolute;
  top: 3px; bottom: 3px;
  border-radius: 3px;
  transition: width 0.18s ease, left 0.18s ease;
}

.ladder-bar-fill.pos {
  background: linear-gradient(90deg, rgba(40, 200, 112, 0.42), rgba(40, 200, 112, 0.88));
  box-shadow: 0 0 8px rgba(40, 200, 112, 0.26);
}

.ladder-bar-fill.neg {
  background: linear-gradient(270deg, rgba(255, 92, 116, 0.42), rgba(255, 92, 116, 0.88));
  box-shadow: 0 0 8px rgba(255, 92, 116, 0.24);
}

/* ─── Table loading opacity ───────────────────────────────────── */
.shell.is-loading .ladder-table {
  opacity: 0.48;
  pointer-events: none;
  transition: opacity 0.2s;
}

/* ─── OI responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .topbar {
    flex-wrap: wrap;
    gap: 10px;
  }

  .topbar-meta {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
  }

  .kpi-row {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
}

@media (max-width: 600px) {
  .shell {
    padding: 14px 12px 80px;
  }

  .topbar {
    padding: 12px 16px;
  }

  .ladder-panel {
    padding: 16px 14px;
  }
}

/* ─── Debug chart description paragraphs ─────────────────────── */
.chart-debug-desc {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-left: 2px solid rgba(var(--accent-primary-rgb), 0.30);
  background: rgba(var(--accent-primary-rgb), 0.04);
  border-radius: 0 8px 8px 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.65;
}

/* ─── OI reduced-motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .live-dot,
  .kpi-card,
  .ladder-panel,
  .ladder-bar-fill {
    animation: none !important;
    transition: none !important;
  }
}

/* ================================================================
   POLISH PASS — applied across all pages
   ================================================================ */

/* ─── Thin custom scrollbar (ladder + chart shells) ──────────── */
.ladder-scroll,
.chart-shell {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-primary-rgb), 0.28) transparent;
}

.ladder-scroll::-webkit-scrollbar,
.chart-shell::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.ladder-scroll::-webkit-scrollbar-thumb,
.chart-shell::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-primary-rgb), 0.30);
  border-radius: 999px;
}

.ladder-scroll::-webkit-scrollbar-track,
.chart-shell::-webkit-scrollbar-track {
  background: transparent;
}

/* ─── Summary cards entrance animation ───────────────────────── */
.summary-card {
  animation: panelEnter 0.40s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.summary-grid .summary-card:nth-child(2) { animation-delay: 0.05s; }
.summary-grid .summary-card:nth-child(3) { animation-delay: 0.09s; }
.summary-grid .summary-card:nth-child(4) { animation-delay: 0.13s; }
.summary-grid .summary-card:nth-child(5) { animation-delay: 0.17s; }
.summary-grid .summary-card:nth-child(6) { animation-delay: 0.21s; }
.summary-grid .summary-card:nth-child(7) { animation-delay: 0.25s; }
.summary-grid .summary-card:nth-child(8) { animation-delay: 0.29s; }

/* ─── Spot feature card — pulse ring on hover ─────────────────── */
.summary-card-feature {
  transition: border-color 0.2s, box-shadow 0.2s;
}

.summary-card-feature:hover {
  border-color: rgba(var(--accent-primary-rgb), 0.40);
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(var(--accent-primary-rgb), 0.18), 0 0 28px rgba(var(--accent-primary-rgb), 0.10);
}

/* ─── Login preview image — stronger accent glow ─────────────── */
.login-preview-image {
  box-shadow:
    0 18px 34px rgba(1, 10, 13, 0.30),
    0 0 0 1px rgba(var(--accent-primary-rgb), 0.16),
    0 0 40px rgba(var(--accent-primary-rgb), 0.08);
}

html[data-theme="light"] .login-preview-image {
  box-shadow:
    0 12px 24px rgba(10, 30, 20, 0.14),
    0 0 0 1px rgba(var(--accent-primary-rgb), 0.14);
}

/* ─── Chart head separator line ───────────────────────────────── */
.chart-head {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(var(--accent-primary-rgb), 0.08);
}

/* ─── OI ctrl-bar and kpi-row entrance ────────────────────────── */
.ctrl-bar {
  animation: panelEnter 0.38s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
}

.kpi-row {
  animation: panelEnter 0.38s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

/* ─── OI refresh button loading shimmer ──────────────────────── */
@keyframes btnShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.shell.is-loading #oi-refresh-button {
  background: linear-gradient(
    90deg,
    var(--accent-primary-deep) 0%,
    var(--accent-primary)      50%,
    var(--accent-primary-deep) 100%
  );
  background-size: 200% 100%;
  animation: btnShimmer 1.2s linear infinite;
  opacity: 0.85;
}

/* ─── Chart meta live dot alignment ──────────────────────────── */
.chart-meta--live {
  display: inline-flex;
  align-items: center;
}

/* ─── Summary value tabular nums + letter-spacing cleanup ─────── */
.kpi-value,
.summary-value {
  font-feature-settings: "tnum" 1, "ss01" 1;
}

/* ─── Polish reduced-motion additions ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .summary-card,
  .summary-card-feature,
  .ctrl-bar,
  .kpi-row,
  .shell.is-loading #oi-refresh-button {
    animation: none !important;
    transition: none !important;
  }
}

/* ================================================================
   HOME UHAUL REDESIGN
   ================================================================ */

.home-uhaul-shell {
  padding-top: 18px;
}

.home-uhaul-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-radius: 18px;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.18);
  background:
    radial-gradient(130% 130% at 0% 0%, rgba(var(--accent-primary-rgb), 0.12) 0%, transparent 55%),
    var(--bg-panel);
}

.home-uhaul-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.home-uhaul-brand-plaque {
  width: 58px;
  height: 58px;
  border-radius: 14px;
}

.home-uhaul-brand-image {
  width: 88%;
  height: 88%;
}

.home-uhaul-brand-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.home-uhaul-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.home-uhaul-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.22);
  background: rgba(var(--accent-primary-rgb), 0.08);
  color: var(--bright);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-uhaul-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(390px, 0.92fr);
  gap: 18px;
  align-items: start;
}

.home-uhaul-story {
  display: grid;
  gap: 14px;
}

.home-uhaul-hero-card {
  min-height: 560px;
  padding: 34px 36px;
  background:
    radial-gradient(120% 110% at 100% 0%, rgba(var(--accent-secondary-rgb), 0.16) 0%, transparent 60%),
    radial-gradient(120% 120% at 0% 100%, rgba(var(--accent-primary-rgb), 0.15) 0%, transparent 62%),
    var(--bg-panel);
}

.home-uhaul-hero-badges {
  margin-bottom: 14px;
}

.home-uhaul-metrics {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.home-uhaul-metric {
  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.16);
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  gap: 6px;
}

.home-uhaul-metric-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.home-uhaul-metric strong {
  color: var(--bright);
  font-size: 0.92rem;
  letter-spacing: -0.02em;
}

.home-uhaul-metric small {
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.45;
}

.home-uhaul-widget-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.home-uhaul-widget {
  padding: 18px 18px 16px;
  border-radius: 16px;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.16);
  background: rgba(255, 255, 255, 0.03);
}

.home-uhaul-widget-wide {
  grid-column: 1 / -1;
  background:
    radial-gradient(90% 120% at 0% 40%, rgba(var(--accent-primary-rgb), 0.12) 0%, transparent 58%),
    rgba(255, 255, 255, 0.03);
}

.home-uhaul-auth-station .auth-station-frame {
  padding: 26px 24px;
}

html[data-theme="light"] .home-uhaul-topbar {
  background:
    radial-gradient(130% 130% at 0% 0%, rgba(var(--accent-primary-rgb), 0.08) 0%, transparent 55%),
    var(--bg-panel);
}

html[data-theme="light"] .home-uhaul-metric,
html[data-theme="light"] .home-uhaul-widget {
  background: rgba(255, 255, 255, 0.72);
}

@media (max-width: 1320px) {
  .home-uhaul-grid {
    grid-template-columns: 1fr;
  }

  .home-uhaul-status-row {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .home-uhaul-topbar {
    grid-template-columns: 1fr;
  }

  .home-uhaul-metrics {
    grid-template-columns: 1fr;
  }

  .home-uhaul-widget-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   APRIL 2026 VISUAL REFRESH
   ================================================================ */

html[data-theme="dark"][data-color-scheme="classic"] {
  --bg: #081019;
  --bg-up: #0d1825;
  --bg-panel: rgba(11, 20, 31, 0.84);
  --bg-card: rgba(15, 27, 40, 0.9);
  --line: rgba(131, 176, 220, 0.16);
  --line-s: rgba(173, 205, 235, 0.28);
  --text: #d7e4f1;
  --bright: #f7fbff;
  --muted: #8fa6bf;
  --faint: rgba(215, 228, 241, 0.18);
  --teal: #88b7e4;
  --teal-d: rgba(136, 183, 228, 0.16);
  --amber: #d4a56b;
  --amber-d: rgba(212, 165, 107, 0.16);
  --green: #87d7b2;
  --red: #ee867f;
  --shadow: 0 30px 82px rgba(3, 8, 17, 0.56), 0 0 0 1px rgba(136, 183, 228, 0.05);
  --shadow-sm: 0 16px 38px rgba(3, 8, 17, 0.4);
  --accent-primary: #88b7e4;
  --accent-primary-deep: #5d86b4;
  --accent-primary-rgb: 136, 183, 228;
  --accent-secondary: #d4a56b;
  --accent-secondary-deep: #aa7b42;
  --accent-secondary-rgb: 212, 165, 107;
  --grid-line: rgba(136, 183, 228, 0.042);
  --ambient-flares:
    radial-gradient(circle at 10% 10%, rgba(136, 183, 228, 0.22), transparent 34%),
    radial-gradient(circle at 88% 16%, rgba(212, 165, 107, 0.18), transparent 30%),
    radial-gradient(circle at 74% 82%, rgba(66, 98, 150, 0.2), transparent 28%);
}

html[data-theme="light"][data-color-scheme="classic"] {
  --bg: #eef3f8;
  --bg-up: #f7f8fb;
  --bg-panel: rgba(255, 255, 255, 0.84);
  --bg-card: rgba(255, 255, 255, 0.92);
  --line: rgba(91, 122, 158, 0.14);
  --line-s: rgba(91, 122, 158, 0.24);
  --text: #1d2a39;
  --bright: #0b1522;
  --muted: #607286;
  --faint: rgba(29, 42, 57, 0.16);
  --teal: #5b7a9e;
  --teal-d: rgba(91, 122, 158, 0.12);
  --amber: #b37b3c;
  --amber-d: rgba(179, 123, 60, 0.12);
  --green: #26806a;
  --red: #c9655f;
  --shadow: 0 26px 68px rgba(13, 28, 48, 0.11), 0 0 0 1px rgba(91, 122, 158, 0.04);
  --shadow-sm: 0 10px 28px rgba(13, 28, 48, 0.08);
  --accent-primary: #5b7a9e;
  --accent-primary-deep: #456282;
  --accent-primary-rgb: 91, 122, 158;
  --accent-secondary: #b37b3c;
  --accent-secondary-deep: #8b5f2d;
  --accent-secondary-rgb: 179, 123, 60;
  --grid-line: rgba(91, 122, 158, 0.055);
  --ambient-flares:
    radial-gradient(circle at 8% 10%, rgba(91, 122, 158, 0.16), transparent 34%),
    radial-gradient(circle at 92% 10%, rgba(179, 123, 60, 0.14), transparent 30%),
    radial-gradient(circle at 80% 86%, rgba(186, 207, 229, 0.24), transparent 26%);
}

html[data-theme="dark"][data-color-scheme="emerald"] {
  --bg: #061217;
  --bg-up: #0a1b22;
  --bg-panel: rgba(8, 24, 31, 0.84);
  --bg-card: rgba(12, 32, 40, 0.9);
  --line: rgba(108, 224, 209, 0.16);
  --line-s: rgba(165, 229, 235, 0.28);
  --text: #d9f0ed;
  --bright: #f7fffe;
  --muted: #8daead;
  --faint: rgba(217, 240, 237, 0.18);
  --teal: #6fe0d1;
  --teal-d: rgba(111, 224, 209, 0.16);
  --amber: #9ed2df;
  --amber-d: rgba(158, 210, 223, 0.16);
  --green: #7ce0b5;
  --red: #eb8e85;
  --shadow: 0 30px 82px rgba(1, 10, 14, 0.56), 0 0 0 1px rgba(111, 224, 209, 0.05);
  --shadow-sm: 0 16px 38px rgba(1, 10, 14, 0.4);
  --accent-primary: #6fe0d1;
  --accent-primary-deep: #3ca595;
  --accent-primary-rgb: 111, 224, 209;
  --accent-secondary: #9ed2df;
  --accent-secondary-deep: #6e99a7;
  --accent-secondary-rgb: 158, 210, 223;
  --grid-line: rgba(111, 224, 209, 0.042);
  --ambient-flares:
    radial-gradient(circle at 16% 12%, rgba(111, 224, 209, 0.22), transparent 34%),
    radial-gradient(circle at 84% 18%, rgba(158, 210, 223, 0.18), transparent 30%),
    radial-gradient(circle at 74% 82%, rgba(39, 118, 122, 0.22), transparent 28%);
}

html[data-theme="light"][data-color-scheme="emerald"] {
  --bg: #ecf7f6;
  --bg-up: #f7fbfb;
  --bg-panel: rgba(255, 255, 255, 0.84);
  --bg-card: rgba(255, 255, 255, 0.92);
  --line: rgba(46, 133, 130, 0.14);
  --line-s: rgba(46, 133, 130, 0.24);
  --text: #183133;
  --bright: #09171a;
  --muted: #5f7d7e;
  --faint: rgba(24, 49, 51, 0.16);
  --teal: #2e8582;
  --teal-d: rgba(46, 133, 130, 0.12);
  --amber: #547f9c;
  --amber-d: rgba(84, 127, 156, 0.12);
  --green: #2f8c6b;
  --red: #c66a62;
  --shadow: 0 26px 68px rgba(18, 48, 50, 0.11), 0 0 0 1px rgba(46, 133, 130, 0.04);
  --shadow-sm: 0 10px 28px rgba(18, 48, 50, 0.08);
  --accent-primary: #2e8582;
  --accent-primary-deep: #216866;
  --accent-primary-rgb: 46, 133, 130;
  --accent-secondary: #547f9c;
  --accent-secondary-deep: #3f627b;
  --accent-secondary-rgb: 84, 127, 156;
  --grid-line: rgba(46, 133, 130, 0.055);
  --ambient-flares:
    radial-gradient(circle at 10% 10%, rgba(46, 133, 130, 0.16), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(84, 127, 156, 0.14), transparent 30%),
    radial-gradient(circle at 80% 84%, rgba(192, 231, 229, 0.25), transparent 26%);
}

html[data-theme="dark"][data-color-scheme="mono"] {
  --bg: #0b1017;
  --bg-up: #121924;
  --bg-panel: rgba(15, 21, 31, 0.84);
  --bg-card: rgba(20, 27, 39, 0.9);
  --line: rgba(181, 197, 222, 0.14);
  --line-s: rgba(201, 214, 232, 0.26);
  --text: #d9e1ee;
  --bright: #fbfdff;
  --muted: #95a1b4;
  --faint: rgba(217, 225, 238, 0.16);
  --teal: #c7d2e5;
  --teal-d: rgba(199, 210, 229, 0.14);
  --amber: #8190a8;
  --amber-d: rgba(129, 144, 168, 0.14);
  --green: #7dd2b0;
  --red: #ef8b8b;
  --shadow: 0 30px 82px rgba(3, 8, 16, 0.56), 0 0 0 1px rgba(199, 210, 229, 0.05);
  --shadow-sm: 0 16px 38px rgba(3, 8, 16, 0.4);
  --accent-primary: #c7d2e5;
  --accent-primary-deep: #9daac0;
  --accent-primary-rgb: 199, 210, 229;
  --accent-secondary: #8190a8;
  --accent-secondary-deep: #637088;
  --accent-secondary-rgb: 129, 144, 168;
  --grid-line: rgba(199, 210, 229, 0.036);
  --ambient-flares:
    radial-gradient(circle at 14% 10%, rgba(199, 210, 229, 0.18), transparent 32%),
    radial-gradient(circle at 84% 14%, rgba(129, 144, 168, 0.16), transparent 30%),
    radial-gradient(circle at 76% 84%, rgba(77, 90, 114, 0.22), transparent 28%);
}

html[data-theme="light"][data-color-scheme="mono"] {
  --bg: #f3f6fb;
  --bg-up: #fafbfe;
  --bg-panel: rgba(255, 255, 255, 0.84);
  --bg-card: rgba(255, 255, 255, 0.92);
  --line: rgba(79, 93, 117, 0.12);
  --line-s: rgba(79, 93, 117, 0.22);
  --text: #202a37;
  --bright: #0b1017;
  --muted: #667386;
  --faint: rgba(32, 42, 55, 0.16);
  --teal: #4f5d75;
  --teal-d: rgba(79, 93, 117, 0.12);
  --amber: #8a97ab;
  --amber-d: rgba(138, 151, 171, 0.12);
  --green: #2d7f67;
  --red: #c86a70;
  --shadow: 0 26px 68px rgba(22, 32, 46, 0.1), 0 0 0 1px rgba(79, 93, 117, 0.04);
  --shadow-sm: 0 10px 28px rgba(22, 32, 46, 0.07);
  --accent-primary: #4f5d75;
  --accent-primary-deep: #3e4a5f;
  --accent-primary-rgb: 79, 93, 117;
  --accent-secondary: #8a97ab;
  --accent-secondary-deep: #6b778a;
  --accent-secondary-rgb: 138, 151, 171;
  --grid-line: rgba(79, 93, 117, 0.05);
  --ambient-flares:
    radial-gradient(circle at 10% 10%, rgba(79, 93, 117, 0.14), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(138, 151, 171, 0.12), transparent 30%),
    radial-gradient(circle at 80% 86%, rgba(210, 219, 232, 0.24), transparent 26%);
}

body {
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--accent-primary-rgb), 0.14), transparent 30%),
    radial-gradient(circle at 100% 0%, rgba(var(--accent-secondary-rgb), 0.1), transparent 28%),
    linear-gradient(180deg, var(--bg-up) 0%, var(--bg) 100%);
}

body::before {
  background-size: 88px 88px;
  opacity: 0.6;
}

body::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 24%),
    var(--ambient-flares);
  filter: saturate(118%);
}

.platform-header,
.topbar,
.home-uhaul-topbar,
.chart-panel,
.summary-card,
.control-bar,
.ctrl-bar,
.ladder-panel,
.home-uhaul-widget,
.home-uhaul-metric,
.kpi-card,
.auth-station-frame,
.auth-surface,
.theme-switcher {
  box-shadow:
    0 24px 60px rgba(5, 10, 20, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

html[data-theme="light"] .platform-header,
html[data-theme="light"] .topbar,
html[data-theme="light"] .home-uhaul-topbar,
html[data-theme="light"] .chart-panel,
html[data-theme="light"] .summary-card,
html[data-theme="light"] .control-bar,
html[data-theme="light"] .ctrl-bar,
html[data-theme="light"] .ladder-panel,
html[data-theme="light"] .home-uhaul-widget,
html[data-theme="light"] .home-uhaul-metric,
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .auth-station-frame,
html[data-theme="light"] .auth-surface,
html[data-theme="light"] .theme-switcher {
  box-shadow:
    0 24px 60px rgba(18, 34, 60, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.platform-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 392px);
  align-items: center;
  gap: 22px 24px;
  padding: 24px 26px;
  border-radius: 28px;
  border-color: rgba(var(--accent-primary-rgb), 0.18);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 34%),
    radial-gradient(132% 150% at 0% 0%, rgba(var(--accent-primary-rgb), 0.16) 0%, transparent 50%),
    radial-gradient(100% 120% at 100% 0%, rgba(var(--accent-secondary-rgb), 0.14) 0%, transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 22%),
    var(--bg-panel);
}

.platform-header::before {
  height: 3px;
  opacity: 1;
  background: linear-gradient(90deg, rgba(var(--accent-primary-rgb), 0.98), rgba(var(--accent-secondary-rgb), 0.82), transparent 88%);
}

.platform-header::after {
  content: "";
  position: absolute;
  inset: 0 0 0 52%;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.045) 14%, transparent 58%),
    radial-gradient(circle at 84% 24%, rgba(var(--accent-secondary-rgb), 0.16), transparent 34%);
  opacity: 0.68;
  pointer-events: none;
}

.platform-brand {
  align-items: start;
  gap: clamp(16px, 1.6vw, 24px);
}

.platform-brand-mark {
  padding-top: 4px;
}

.brand-plaque {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.08), transparent 34%),
    radial-gradient(circle at 16% 18%, rgba(var(--accent-primary-rgb), 0.24), transparent 42%),
    var(--brand-logo-image),
    linear-gradient(140deg, rgba(6, 14, 22, 0.98), rgba(12, 24, 36, 0.92));
  border-color: rgba(var(--accent-primary-rgb), 0.24);
  box-shadow:
    0 24px 44px rgba(3, 10, 18, 0.26),
    0 0 0 1px rgba(var(--accent-primary-rgb), 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.brand-plaque::after {
  opacity: 0.54;
}

.brand-plaque-header {
  width: clamp(164px, 11vw, 188px);
  min-height: 92px;
  height: 92px;
  border-radius: 24px;
}

.platform-brand-text {
  gap: 8px;
}

.platform-brand-kicker {
  width: max-content;
  margin-bottom: 0;
  padding: 7px 12px 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.2);
  background: rgba(var(--accent-primary-rgb), 0.08);
  color: var(--bright);
  backdrop-filter: blur(12px);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
}

.platform-brand-kicker::before {
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 1), rgba(var(--accent-secondary-rgb), 0.92));
  box-shadow: 0 0 0 4px rgba(var(--accent-primary-rgb), 0.16);
}

.platform-title {
  max-width: 12ch;
  font-size: clamp(1.95rem, 3.35vw, 3.2rem);
  line-height: 0.94;
  letter-spacing: -0.065em;
}

.platform-title-tag {
  margin-left: 12px;
  padding: 0.28rem 0.68rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(var(--accent-primary-rgb), 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.platform-subtitle {
  margin-top: 0;
  max-width: 58ch;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text);
  opacity: 0.8;
}

.platform-pill-row {
  gap: 8px;
  margin-top: 4px;
}

.platform-pill {
  min-height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  border-color: rgba(var(--accent-primary-rgb), 0.16);
  background:
    linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.14), rgba(var(--accent-secondary-rgb), 0.1)),
    rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-size: 0.72rem;
}

html[data-theme="light"] .platform-pill {
  background:
    linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.12), rgba(var(--accent-secondary-rgb), 0.08)),
    rgba(255, 255, 255, 0.78);
}

.platform-header-actions {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  align-content: start;
  justify-items: end;
  gap: 10px 12px;
  padding: 10px;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.14);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 38%),
    rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.platform-nav-tabs {
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="light"] .platform-nav-tabs {
  background: rgba(255, 255, 255, 0.72);
}

.platform-nav-tabs .btn-tertiary {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 14px;
  border-color: transparent;
  background: transparent;
  color: var(--text);
  opacity: 0.72;
  font-size: 0.8rem;
}

.platform-nav-tabs .btn-tertiary:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(var(--accent-primary-rgb), 0.12);
  color: var(--bright);
  opacity: 1;
}

.platform-nav-tabs .btn-tertiary.is-active {
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.2), rgba(var(--accent-secondary-rgb), 0.14));
  border-color: rgba(var(--accent-primary-rgb), 0.22);
  color: var(--bright);
  opacity: 1;
  box-shadow: 0 12px 28px rgba(var(--accent-primary-rgb), 0.14);
}

.platform-user {
  width: 100%;
  max-width: 300px;
  padding: 14px 16px;
  border-radius: 16px;
  border-color: rgba(var(--accent-primary-rgb), 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 100%),
    rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--text);
  text-align: left;
}

html[data-theme="light"] .platform-user {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), transparent 100%),
    rgba(255, 255, 255, 0.7);
}

.platform-user strong {
  font-size: 0.96rem;
}

.platform-header-actions > .btn-tertiary {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 14px;
  border-color: rgba(var(--accent-primary-rgb), 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  justify-self: end;
  font-size: 0.8rem;
}

.platform-header-actions > .btn-tertiary:hover {
  background: rgba(var(--accent-primary-rgb), 0.12);
  border-color: rgba(var(--accent-primary-rgb), 0.22);
  color: var(--bright);
}

.platform-header--compact {
  padding-top: 12px;
  padding-bottom: 12px;
}

.platform-header--compact .brand-plaque-header {
  width: 144px;
  min-height: 72px;
  height: 72px;
  border-radius: 20px;
}

.platform-header--compact .platform-title {
  max-width: none;
  font-size: 1.45rem;
}

.platform-header--compact .platform-user {
  padding-top: 10px;
  padding-bottom: 10px;
}

.summary-card,
.chart-panel,
.control-bar,
.ctrl-bar,
.ladder-panel,
.home-uhaul-widget,
.home-uhaul-metric,
.auth-surface {
  border-color: rgba(var(--accent-primary-rgb), 0.15);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 34%),
    linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.08), rgba(var(--accent-secondary-rgb), 0.04) 65%, transparent 100%);
}

.summary-card:hover,
.kpi-card:hover,
.home-uhaul-widget:hover,
.home-uhaul-metric:hover {
  border-color: rgba(var(--accent-primary-rgb), 0.24);
}

.chart-shell {
  border-radius: 22px;
  border-color: rgba(var(--accent-primary-rgb), 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 24%),
    linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.08), transparent 42%),
    rgba(7, 17, 26, 0.36);
}

html[data-theme="light"] .chart-shell {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.44), transparent 24%),
    linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.08), transparent 42%),
    rgba(255, 255, 255, 0.58);
}

.theme-switcher {
  left: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 28px);
  gap: 10px;
  padding: 10px;
  border-radius: 24px;
  border-color: rgba(var(--accent-primary-rgb), 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 28%),
    var(--bg-panel);
}

.theme-switch-group {
  gap: 6px;
  padding: 5px;
  border-radius: 18px;
  border-color: rgba(var(--accent-primary-rgb), 0.14);
  background: rgba(255, 255, 255, 0.04);
}

.theme-switch-label {
  padding: 0 10px 0 8px;
  color: var(--text);
  opacity: 0.74;
}

.theme-switch-button {
  min-height: 36px;
  border-radius: 14px;
  color: var(--text);
  opacity: 0.74;
}

.theme-switch-button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--bright);
  opacity: 1;
}

.theme-switch-button.is-active {
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.22), rgba(var(--accent-secondary-rgb), 0.16));
  border-color: rgba(var(--accent-primary-rgb), 0.22);
  color: var(--bright);
  box-shadow: 0 12px 24px rgba(var(--accent-primary-rgb), 0.12);
}

.home-uhaul-topbar {
  gap: 16px;
  padding: 16px 18px;
  border-radius: 24px;
  border-color: rgba(var(--accent-primary-rgb), 0.18);
  background:
    radial-gradient(140% 160% at 0% 0%, rgba(var(--accent-primary-rgb), 0.14) 0%, transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 30%),
    var(--bg-panel);
}

.home-uhaul-brand {
  gap: 16px;
}

.home-uhaul-brand-plaque {
  width: 64px;
  height: 64px;
  border-radius: 20px;
}

.home-uhaul-brand-text {
  gap: 2px;
}

.home-uhaul-status-pill {
  min-height: 34px;
  padding: 0 14px;
  border-color: rgba(var(--accent-primary-rgb), 0.18);
  background:
    linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.14), rgba(var(--accent-secondary-rgb), 0.1)),
    rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.login-topbar-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.18);
  background: rgba(var(--accent-primary-rgb), 0.08);
  color: var(--bright);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-uhaul-hero-card {
  min-height: 610px;
  padding: 40px;
  border-radius: 34px;
  background:
    radial-gradient(120% 110% at 100% 0%, rgba(var(--accent-secondary-rgb), 0.18) 0%, transparent 56%),
    radial-gradient(120% 120% at 0% 100%, rgba(var(--accent-primary-rgb), 0.16) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 28%),
    var(--bg-panel);
}

.home-uhaul-metric,
.home-uhaul-widget {
  border-radius: 20px;
}

.home-uhaul-widget-wide {
  background:
    radial-gradient(90% 120% at 0% 40%, rgba(var(--accent-primary-rgb), 0.14) 0%, transparent 58%),
    rgba(255, 255, 255, 0.04);
}

.login-preview {
  padding: 14px;
  border-radius: 26px;
}

.auth-station-frame {
  padding: 36px 34px;
  border-radius: 32px;
  background:
    radial-gradient(110% 120% at 100% 0%, rgba(var(--accent-secondary-rgb), 0.12) 0%, transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 30%),
    var(--bg-panel);
}

.auth-surface {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 28%),
    rgba(255, 255, 255, 0.035);
}

html[data-theme="light"] .auth-surface {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), transparent 28%),
    rgba(255, 255, 255, 0.72);
}

.shell {
  max-width: 1520px;
  gap: 16px;
  padding: 24px 20px 60px;
}

.topbar {
  top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 18px;
  align-items: center;
  padding: 18px 22px;
  border-radius: 28px;
  border-color: rgba(var(--accent-primary-rgb), 0.18);
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(var(--accent-primary-rgb), 0.14) 0%, transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 28%),
    var(--bg-panel);
}

.topbar::before {
  height: 3px;
  opacity: 1;
}

.topbar-brand {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  gap: 12px;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  color: var(--bright);
}

.topbar-meta {
  grid-column: 1;
  grid-row: 2;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 2px;
}

.meta-regime {
  background:
    linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.16), rgba(var(--accent-secondary-rgb), 0.1)),
    rgba(255, 255, 255, 0.03);
  color: var(--bright);
}

.topbar-nav {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.nav-btn {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 14px;
  border-color: rgba(var(--accent-primary-rgb), 0.16);
  background: rgba(255, 255, 255, 0.04);
}

.nav-btn:hover {
  background: rgba(var(--accent-primary-rgb), 0.12);
}

.ctrl-bar {
  padding: 18px 22px;
  border-radius: 22px;
  border-color: rgba(var(--accent-primary-rgb), 0.16);
}

.kpi-card {
  border-radius: 20px;
  border-color: rgba(var(--accent-primary-rgb), 0.16);
}

.ladder-panel {
  padding: 24px 26px;
  border-radius: 24px;
}

.ladder-scroll {
  border-radius: 18px;
  border-color: rgba(var(--accent-primary-rgb), 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 24%),
    rgba(6, 12, 20, 0.34);
}

html[data-theme="light"] .ladder-scroll {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 24%),
    rgba(255, 255, 255, 0.6);
}

@media (max-width: 1160px) {
  .platform-header {
    grid-template-columns: 1fr;
  }

  .platform-header-actions {
    width: 100%;
    justify-items: start;
  }

  .platform-nav-tabs {
    justify-content: flex-start;
  }
}

@media (max-width: 1500px) {
  .ambient {
    display: block;
    width: clamp(28px, 2.8vw, 42px);
    opacity: 0.72;
  }

  .site-shell {
    width: min(1640px, calc(100% - 40px));
  }
}

@media (max-width: 1240px) {
  .ambient {
    width: 26px;
    opacity: 0.6;
  }

  .site-shell {
    width: calc(100% - 28px);
  }
}

@media (max-width: 1080px) {
  .ambient {
    display: none;
  }
}

@media (max-width: 900px) {
  .topbar {
    grid-template-columns: 1fr;
  }

  .topbar-brand,
  .topbar-meta,
  .topbar-nav {
    grid-column: 1;
    grid-row: auto;
  }

  .topbar-nav {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .site-shell {
    width: calc(100% - 16px);
    padding: 14px 0 88px;
  }

  .platform-header {
    padding: 20px 18px;
    border-radius: 24px;
  }

  .platform-header-actions {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .platform-nav-tabs {
    justify-content: stretch;
  }

  .platform-nav-tabs .btn-tertiary {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
  }

  .platform-user,
  .platform-header-actions > .btn-tertiary {
    max-width: none;
    justify-self: stretch;
  }

  .platform-title {
    max-width: none;
  }

  .home-uhaul-topbar {
    padding: 14px;
  }

  .login-topbar-note {
    justify-self: start;
  }

  .home-uhaul-hero-card {
    min-height: 0;
    padding: 30px 24px;
  }

  .topbar {
    padding: 16px 16px 14px;
    border-radius: 22px;
  }

  .ctrl-bar,
  .ladder-panel {
    padding-left: 16px;
    padding-right: 16px;
  }
}