@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin-400-700.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin-400-700.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin-400-700.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin-400-700.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-600.woff2") format("woff2");
}
:root {
  color-scheme: dark;
  --bg: #090d13;
  --surface: #0d131c;
  --surface-raised: #111a26;
  --surface-soft: #131e2b;
  --line: #223044;
  --line-soft: #182436;
  --text: #edf3f7;
  --muted: #8a9bad;
  --muted-strong: #afbdc9;
  --cyan: #6fd9dd;
  --cyan-deep: #173f47;
  --positive: #4fd1a1;
  --negative: #ff765f;
  --put-wall: #ff8a00;
  --warning: #ffc857;
  --spot: #f5f7fa;
  --flip: #e8d44d;
  --radius: 10px;
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-data: "IBM Plex Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -30%, rgba(65, 116, 134, .18), transparent 42%),
    linear-gradient(180deg, #0a0f16 0, var(--bg) 420px);
  font-family: var(--font-display);
  font-size: 14px;
}
button, select { font: inherit; }
button { touch-action: manipulation; }
button:focus-visible, select:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  transform: translateY(-150%);
  padding: 10px 14px;
  color: #061014;
  background: var(--cyan);
  border-radius: 6px;
}
.skip-link:focus { transform: translateY(0); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mono { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

.topbar {
  height: 58px;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(9, 13, 19, .86);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-inner {
  width: min(1800px, 100%);
  min-width: 0;
  height: 100%;
  margin: 0 auto;
  padding: 0 clamp(14px, 2.4vw, 38px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}
.topbar > .auth-session-controls {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: auto;
  left: var(--account-anchor-x, calc(100% - 20px));
  margin-left: 0;
  padding-left: 16px;
  background: linear-gradient(90deg, rgba(9, 13, 19, 0), rgba(9, 13, 19, .98) 14px);
  transform: translate(-100%, -50%);
  white-space: nowrap;
}
.brand, .session { display: flex; align-items: center; }
.brand { gap: 10px; }
.brand-logo { position: relative; flex: 0 0 38px; width: 38px; height: 38px; overflow: hidden; border: 1px solid rgba(111, 217, 221, .28); border-radius: 7px; background: #faf9f7; box-shadow: 0 0 12px rgba(111, 217, 221, .12); }
.brand-logo img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); max-width: none; object-fit: contain; }
.brand-wordmark { display: block; width: 76px; height: auto; flex: 0 0 auto; }
.brand-edition { padding-left: 10px; border-left: 1px solid var(--line); color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.session { min-width: 0; margin-right: 8px; margin-left: auto; overflow: visible; gap: 8px; color: var(--muted-strong); font-family: var(--font-data); font-size: 11px; white-space: nowrap; }
.session-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 4px rgba(255, 200, 87, .08); }
.session-dot.is-live { background: var(--positive); box-shadow: 0 0 0 4px rgba(79, 209, 161, .09); }
.session-dot.is-error { background: var(--negative); }
.session-divider { width: 1px; height: 16px; margin: 0 4px; background: var(--line); }

.shell { width: min(1800px, 100%); margin: 0 auto; padding: 28px clamp(14px, 2.4vw, 38px) 48px; }
.command-bar { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.eyebrow { margin: 0 0 5px; color: var(--cyan); font: 500 10px/1 var(--font-data); text-transform: uppercase; letter-spacing: .16em; }
h1 { margin: 0; font-size: clamp(26px, 3vw, 40px); line-height: 1; letter-spacing: -.045em; font-weight: 600; }
.controls { display: flex; align-items: end; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.segmented { margin: 0; padding: 0; display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.segmented legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.segmented button, .action {
  min-height: 42px;
  border: 0;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.segmented button { position: relative; min-width: 60px; padding: 0 14px; color: var(--muted); background: var(--surface); border-right: 1px solid var(--line); font: 500 11px/1 var(--font-data); }
.segmented button::after { content: ""; position: absolute; right: 10px; bottom: 0; left: 10px; height: 2px; background: var(--cyan); border-radius: 2px 2px 0 0; box-shadow: 0 0 8px rgba(111, 217, 221, .7); opacity: 0; transform: scaleX(.35); transition: opacity 160ms ease, transform 160ms ease; }
.segmented button:last-child { border-right: 0; }
.segmented button:hover { color: var(--text); background: var(--surface-raised); }
.segmented button[aria-pressed="true"] { color: var(--cyan); background: rgba(23, 63, 71, .45); }
.segmented button[aria-pressed="true"]::after { opacity: 1; transform: scaleX(1); }
.segmented.compact button { min-width: 44px; padding: 0 12px; }
.segmented svg, .action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card-count-control { min-height: 42px; padding: 0 7px 0 12px; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.card-count-control span { font: 500 9px/1 var(--font-data); text-transform: uppercase; letter-spacing: .1em; }
.card-count-control select { min-width: 48px; min-height: 30px; padding: 0 6px; color: var(--text); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 5px; font: 600 11px/1 var(--font-data); cursor: pointer; }
.action { min-width: 110px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; font-weight: 600; }
#auto-button {
  min-width: 112px;
  padding: 0 14px;
  color: var(--positive);
  background: rgba(79, 209, 161, .055);
  border: 1px solid rgba(79, 209, 161, .62);
  box-shadow: 0 0 12px rgba(79, 209, 161, .08), inset 0 0 14px rgba(79, 209, 161, .035);
  font: 700 10px/1 var(--font-data);
  letter-spacing: .08em;
  text-shadow: 0 0 8px rgba(79, 209, 161, .65);
  text-transform: uppercase;
  white-space: nowrap;
}
#auto-button:hover { color: #72e5ba; background: rgba(79, 209, 161, .1); border-color: var(--positive); box-shadow: 0 0 16px rgba(79, 209, 161, .14), inset 0 0 14px rgba(79, 209, 161, .05); }
#auto-button[aria-pressed="false"] { color: var(--warning); background: rgba(255, 200, 87, .055); border-color: rgba(255, 200, 87, .62); box-shadow: 0 0 12px rgba(255, 200, 87, .08), inset 0 0 14px rgba(255, 200, 87, .035); text-shadow: 0 0 8px rgba(255, 200, 87, .65); }
#auto-button[aria-pressed="false"]:hover { color: var(--warning); background: rgba(255, 200, 87, .1); border-color: var(--warning); box-shadow: 0 0 16px rgba(255, 200, 87, .14), inset 0 0 14px rgba(255, 200, 87, .05); }
.connection-dot { width: 7px; height: 7px; flex: 0 0 7px; background: currentColor; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.action.secondary { color: var(--muted-strong); background: var(--surface); border: 1px solid var(--line); }
.action.secondary:hover { color: var(--text); border-color: #344860; }
.action.primary { color: #081411; background: var(--positive); }
.action.primary:hover { background: #66dfb3; }
.action.primary[aria-pressed="false"] { color: var(--muted-strong); background: var(--surface); border: 1px solid var(--line); }

.market-rail {
  min-height: 62px;
  margin-bottom: 14px;
  padding: 11px 16px;
  display: grid;
  grid-template-columns: 1.2fr .7fr 2fr;
  gap: 18px;
  align-items: center;
  background: linear-gradient(90deg, rgba(111, 217, 221, .055), transparent 34%), var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.market-rail > div:not(:last-child) { padding-right: 18px; border-right: 1px solid var(--line-soft); }
.rail-label { display: block; margin-bottom: 4px; color: var(--muted); font: 500 9px/1 var(--font-data); text-transform: uppercase; letter-spacing: .12em; }
.market-rail strong { font-size: 13px; font-weight: 600; }
#market-regime.is-positive { color: var(--positive); }
#market-regime.is-negative { color: var(--negative); }
#market-regime.is-neutral { color: var(--warning); }
.rail-legend { display: flex; justify-content: flex-end; gap: 16px; color: var(--muted-strong); font: 500 10px/1 var(--font-data); }
.rail-legend span { display: inline-flex; gap: 6px; align-items: center; }
.legend-swatch { width: 9px; height: 9px; border-radius: 2px; }
.legend-swatch.positive { background: var(--positive); }
.legend-swatch.negative { background: var(--negative); }
.legend-line { width: 14px; height: 0; border-top: 2px solid; }
.legend-line.spot { border-color: var(--spot); }
.legend-line.flip { border-color: var(--flip); border-top-style: dashed; }

.asset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.asset-card { min-width: 0; overflow: hidden; container: asset-card / inline-size; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: 0 16px 50px rgba(0,0,0,.12); }
.asset-header { min-height: 68px; padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); }
.asset-header > div:first-child { display: flex; align-items: center; gap: 10px; }
.ticker-select { min-height: 42px; padding: 0 34px 0 12px; color: var(--text); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 7px; font: 600 16px/1 var(--font-data); cursor: pointer; }
.asset-status { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font: 500 9px/1 var(--font-data); text-transform: uppercase; letter-spacing: .08em; }
.asset-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--warning); }
.asset-status.is-live i { background: var(--positive); }
.asset-status.is-error i { background: var(--negative); }
.spot-block { text-align: right; }
.spot-block span { display: block; margin-bottom: 3px; color: var(--muted); font: 500 9px/1 var(--font-data); text-transform: uppercase; letter-spacing: .12em; }
.spot-block strong { font: 600 22px/1 var(--font-data); font-variant-numeric: tabular-nums; }

@container asset-card (max-width: 780px) {
  .asset-header {
    min-height: 94px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: start;
    gap: 10px 16px;
  }
  .asset-header > div:first-child {
    min-width: 0;
    flex-wrap: wrap;
    align-content: flex-start;
    row-gap: 8px;
  }
  .asset-status { flex-basis: 100%; order: 4; }
  .spot-block { min-width: max-content; align-self: start; }
}

@container asset-card (max-width: 560px) {
  .asset-header {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .spot-block { min-width: 0; width: 100%; }
}

.metric-strip { min-height: 74px; padding: 11px 15px; display: grid; grid-template-columns: .95fr 1.3fr .95fr repeat(3, 1fr); gap: 12px; border-bottom: 1px solid var(--line-soft); }
.metric-strip > div { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.metric-strip > div + div { padding-left: 12px; border-left: 1px solid var(--line-soft); }
.metric-label { margin-bottom: 5px; color: var(--muted); font: 500 9px/1 var(--font-data); text-transform: uppercase; letter-spacing: .1em; }
.metric-strip strong { overflow: hidden; color: var(--muted-strong); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.regime-metric strong { font-size: 15px; color: var(--text); }
.regime-metric small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.regime-value.is-positive, .net-value.is-positive { color: var(--positive); }
.regime-value.is-negative, .net-value.is-negative { color: var(--negative); }
.regime-value.is-neutral { color: var(--warning); }
.profile-balance-value.is-call { color: var(--positive); }
.profile-balance-value.is-put { color: var(--negative); }
.profile-balance-value.is-neutral { color: var(--muted-strong); }
.gex-trends { min-height: 15px; margin-top: 3px; display: flex; align-items: center; gap: 6px; overflow: hidden; color: var(--muted-strong); font: 600 11px/1 var(--font-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gex-trend { display: inline-flex; align-items: baseline; gap: 1px; min-width: 0; }
.gex-trend-period { color: var(--muted-strong); font-weight: 500; }
.gex-trend-arrow { min-width: 10px; font-size: 15px; line-height: .8; text-align: center; }
.gex-trend.is-up .gex-trend-arrow { color: var(--positive); }
.gex-trend.is-down .gex-trend-arrow { color: var(--negative); }
.gex-trend.is-flat .gex-trend-arrow { color: var(--muted-strong); }
.gex-trend.is-pending { opacity: .78; }

@container asset-card (max-width: 700px) {
  .metric-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
  .metric-strip > div:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
}

.chart-stage { position: relative; height: 435px; flex: 1 0 auto; padding: 10px 9px 3px; background: linear-gradient(180deg, rgba(19, 30, 43, .42), transparent); }
.asset-card.is-vertical .chart-stage { height: 610px; }
.chart-stage canvas { position: relative; z-index: 2; }
.chart-zero { position: absolute; z-index: 1; top: 10px; bottom: 24px; left: 50%; width: 1px; background: rgba(138, 155, 173, .12); }
.chart-skeleton { position: absolute; inset: 18px 20px 28px; z-index: 3; display: flex; gap: 8px; align-items: end; background: var(--surface); }
.chart-skeleton span { flex: 1; min-width: 3px; background: linear-gradient(180deg, #1b2b3d, #152132); border-radius: 2px 2px 0 0; animation: breathe 1.5s ease-in-out infinite alternate; }
.chart-skeleton span:nth-child(1) { height: 38%; }.chart-skeleton span:nth-child(2) { height: 68%; }.chart-skeleton span:nth-child(3) { height: 48%; }.chart-skeleton span:nth-child(4) { height: 82%; }.chart-skeleton span:nth-child(5) { height: 57%; }
.asset-card:not([aria-busy="true"]) .chart-skeleton { display: none; }
.chart-error { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; background: rgba(13, 19, 28, .94); }
.chart-error[hidden] { display: none; }
.chart-error strong { color: var(--negative); }
.chart-error span { max-width: 75%; color: var(--muted); font-size: 12px; text-align: center; }
.chart-error button { min-height: 40px; margin-top: 4px; padding: 0 14px; color: var(--text); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }

.asset-footer[hidden] { display: none !important; }
.asset-footer { height: 42px; min-height: 42px; flex: 0 0 42px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line-soft); color: var(--muted); font: 500 10px/1 var(--font-data); }
.range-label { min-width: 0; overflow: hidden; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }

@keyframes breathe { from { opacity: .45; } to { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

@media (max-width: 1100px) {
  .topbar .auth-user { display: none; }
  .command-bar { align-items: flex-start; flex-direction: column; }
  .controls { justify-content: flex-start; }
  .market-rail { grid-template-columns: repeat(2, 1fr); }
  .market-rail > div:nth-child(2) { border-right: 0; }
  .rail-legend { display: none; }
  .asset-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .topbar { height: auto; min-height: 58px; }
  .topbar-inner { min-height: 58px; gap: 8px; }
  .brand-logo { flex-basis: 34px; width: 34px; height: 34px; }
  .brand-wordmark { width: 68px; }
  .brand-edition, .session-divider, #last-sync { display: none; }
  .shell { padding-top: 20px; }
  .controls { width: 100%; }
  .segmented:first-child { flex: 1; }
  .segmented:first-child button { flex: 1; min-width: 0; }
  .action { flex: 1; min-width: 125px; }
  .market-rail { grid-template-columns: 1fr 1fr; }
  .market-rail > div:nth-child(3) { display: none; }
  .market-rail > div:nth-child(2) { border-right: 0; }
  .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-strip > div:nth-child(4) { padding-left: 12px; border-left: 1px solid var(--line-soft); }
  .metric-strip > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .chart-stage { height: 393px; }
  .asset-card.is-vertical .chart-stage { height: 520px; }
}

@media (max-width: 420px) {
  .topbar-inner .session { display: none; }
}