@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --bg: #12141C;
  --panel: #1B1E2B;
  --panel-border: #2A2E42;
  --panel-border-soft: #232739;
  --text: #EDEBE5;
  --muted: #8B8D98;
  --accent: #D4A24C;

  --buy: #7FA88F;
  --sell: #C9A85B;
  --ce: #A883C9;
  --pe: #6FA0C9;
  --danger: #B2564A;
  --watch: #C9A227;

  /* Backward-compatible aliases — earlier panels (hedge, planned P&L, ITM/OTM,
     paper trades) reference these names inline. Keeping them means tonight's
     redesign doesn't require touching those already-working panels at all. */
  --green: var(--buy);
  --red: var(--danger);
  --yellow: var(--watch);
  --purple: var(--ce);
  --blue: var(--pe);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(ellipse 1200px 600px at 50% -10%, rgba(212,162,74,0.06), transparent),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  padding: 24px;
  -webkit-font-smoothing: antialiased;
}

.banner {
  background: #2B2410;
  color: var(--watch);
  border: 1px solid #4A3E14;
  padding: 9px 18px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 22px;
  text-align: center;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--panel-border-soft);
}

header h1 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.01em;
}

nav a {
  color: var(--muted);
  text-decoration: none;
  margin-right: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
nav a:hover { color: var(--text); }
nav a.active { color: var(--accent); border-bottom-color: var(--accent); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
}

/* The risk-stripe signature: a thin color-coded bar along the top of every
   card. Gold = neutral/watch, sage = defined-risk, brick = unbounded-risk.
   Encodes real risk information at a glance, not decoration. */
.panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--watch);
}
.panel.risk-safe::before { background: var(--buy); }
.panel.risk-danger::before { background: var(--danger); }
.panel.risk-neutral::before { background: var(--muted); }

.panel h2 {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 500;
  margin: 2px 0 16px 0;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--panel-border-soft);
  font-size: 14px;
}
.stat-row:last-child { border-bottom: none; }
.stat-row .label { color: var(--muted); font-size: 13px; }
.stat-row .value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.score-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
}
.score-bar .tag {
  width: 90px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.score-bar .track {
  flex: 1;
  height: 6px;
  background: var(--panel-border-soft);
  border-radius: 3px;
  overflow: hidden;
}
.score-bar .fill { height: 100%; border-radius: 3px; }
.score-bar .num { font-family: var(--font-mono); font-size: 13px; width: 40px; text-align: right; font-variant-numeric: tabular-nums; }

.fill.green { background: var(--buy); }
.fill.red { background: var(--danger); }
.fill.purple { background: var(--ce); }
.fill.blue { background: var(--pe); }

/* The hero: Final Signal is the one thing to look at first, sized like it. */
.signal-hero {
  text-align: center;
  padding: 40px 24px 32px;
  border-color: var(--accent);
}
.signal-hero::before { height: 3px; background: var(--accent); }
.signal-hero .badge {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.signal-hero .sub {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.unverified {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--watch);
  border: 1px solid #4A3E14;
  border-radius: 3px;
  padding: 2px 7px;
  margin-left: 8px;
  vertical-align: middle;
  text-transform: uppercase;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
th, td {
  text-align: left;
  padding: 9px 11px;
  border-bottom: 1px solid var(--panel-border-soft);
}
th {
  color: var(--muted);
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
}
td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}
.status-dot.running { background: var(--buy); box-shadow: 0 0 0 3px rgba(127,168,143,0.15); animation: pulse 2s ease-in-out infinite; }
.status-dot.waiting { background: var(--watch); }
.status-dot.error { background: var(--danger); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .status-dot.running { animation: none; }
}

.empty-state {
  color: var(--muted);
  text-align: center;
  padding: 40px 0;
  font-size: 14px;
  font-family: var(--font-mono);
}

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  body { padding: 14px; }
  .signal-hero .badge { font-size: 26px; }
  header { flex-direction: column; align-items: flex-start; }
  nav a { margin-right: 12px; }
  .panel { padding: 16px 16px; }
  .stat-row { flex-wrap: wrap; gap: 2px; }
  .stat-row .value { font-size: 13px; }
  .score-bar .tag { width: 72px; font-size: 11px; }

  /* The real bug: an inline grid-column: span 2 (on the ITM/OTM panel)
     forces that one panel to demand two columns' worth of width even
     though the grid should be single-column on mobile — which stretches
     the whole row and drags every sibling panel's layout along with it.
     !important is required here specifically to override the inline
     style, which otherwise always wins over an external stylesheet. */
  .grid > .panel { grid-column: span 1 !important; }

  /* Safety net: long numbers/text can't force horizontal overflow either. */
  .panel, .stat-row, .empty-state { overflow-wrap: anywhere; }
}

/* Tables never break the page layout on narrow screens — the TABLE scrolls
   horizontally within its own box, the page itself never does. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 6px;
}
.table-scroll table {
  min-width: 560px; /* forces scroll instead of illegible squished columns */
}
/* The Option Chain specifically has 11 columns with wide headers (CE Chg OI,
   CE Structure, etc.) — 560px would squish it uncomfortably even while
   scrolling. Give it its own realistic minimum instead. */
.table-scroll-wide table {
  min-width: 980px;
}
.table-scroll-wide th,
.table-scroll-wide td {
  white-space: nowrap;
}