/* Reference image: charcoal canvas, quiet grey frames, plum / rose / peach. */
:root {
  color-scheme: dark;
  --bg: #101419;
  --surface: #14181e;
  --panel: #191d23;
  --card: #191d23;
  --card2: #1e2229;
  --hover: #25232f;
  --border: #30343c;
  --border2: #41434e;
  --text: #e3e3e8;
  --text2: #b2b2bf;
  --text3: #8f909f;
  --muted: #aaaab7;
  --muted2: #8f909f;
  --accent: #bb92e6;
  --accent-d: rgba(173,117,216,.12);
  --a: #bb92e6;
  --a2: #8054a5;
  --blue: #bb92e6;
  --purple: #caa0e9;
  --cyan: #d7b0dc;
  --put: #e8949d;
  --warn: #f1c793;
  --orange: #f1c793;
  --r: 5px;
  --r2: 8px;
  --radius: 8px;
  --shadow: 0 8px 24px rgba(0,0,0,.16);
}
html, body, .workspace { background: var(--bg); }
body { -webkit-font-smoothing: antialiased; }
.workspace .eyebrow, .workspace .section-head, .workspace .card > span,
.workspace .card small, .sidebar nav button span, .brand b,
.filter-context small, .filter-context b, .filter-group > span,
.toggle button, .chart-reset, .surface-toolbar, .surface-readout,
.surface-footnote, .overall, .side-status {
  font-family: 'Segoe UI', Arial, sans-serif;
}
.sidebar, .header, .hub-header { background: #13171c; box-shadow: none; }
.card, .panel, .tool-card {
  background: #191d23;
  border-color: var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.workspace h1, .shell h1 { font-weight: 500; letter-spacing: -.035em; }
.section-head, .card-head, .eyebrow, .kicker { font-weight: 500; }
.card > span, .card small { letter-spacing: .075em; }
.metrics strong, .key strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.sidebar nav button { color: #a2a2b0; border-radius: 5px; }
.sidebar nav button:hover { background: #22232c; color: #e3e3e8; }
.sidebar nav button.active { background: rgba(173,117,216,.12); color: var(--a); box-shadow: inset 2px 0 var(--a); }
.view-filterbar { background: #171b21; border-color: var(--border); border-radius: 6px; box-shadow: none; }
.toggle button, .chart-reset { background: #1d2027; border-color: var(--border); border-radius: 4px; }
.toggle button.active { background: rgba(173,117,216,.14); border-color: #8054a5; color: #d1afea; }
.greeks div, .source-menu, .chart-tooltip { background: #171b21; border-color: var(--border); }
.surface-plot-shell { background: #101419; border-color: #353840; border-radius: 5px; }
.surface-mobile-scale i { background: linear-gradient(90deg,#352052,#562878,#7d3595,#b54e94,#e88b83,#f4d49a); }
.surface-mode { color: #d1afea; }
th { background: #1b1f25; }
.btn-run { background: #8054a5; }
.btn-run:hover { background: #9667bb; }
.tool-card:hover { border-color: #9d73bd; box-shadow: 0 8px 28px rgba(0,0,0,.22); }
.CodeMirror, .cm-s-dracula.CodeMirror, .cm-s-dracula .CodeMirror-gutters { background: #161a20; }
:where(button, a, input, select, summary):focus-visible { outline: 2px solid #caa0e9; outline-offset: 3px; }
::selection { background: #714994; color: #fff; }
* { scrollbar-color: #50505e #171b21; }

/* Directional market colors, separate from navigation and IV-surface accents. */
:root { --bull: #22c55e; --bear: #ef4444; }
#overviewCallWall, #gexCallWall, #callWall, #callWallOi, #overviewCallOi,
#totalCallOi, #callIv, .call-wall strong, .type.call { color: var(--bull); }
#overviewPutWall, #gexPutWall, #putWall, #putWallOi, #overviewPutOi,
#totalPutOi, #putIv, .put-wall strong, .put-accent strong, .type.put { color: var(--bear); }
.type.call { background: rgba(34,197,94,.10); }
.type.put { background: rgba(239,68,68,.10); }
.gex-legend .positive, .lw-up { background: var(--bull); }
.gex-legend .negative, .lw-down { background: var(--bear); }
.chart-tooltip b, .lw-ohlc .up, .lw-gex-flip.green { color: var(--bull); }
.chart-tooltip.negative b, .lw-ohlc .down, .lw-gex-flip.red { color: var(--bear); }
.lw-gamma-regime.long { color: var(--bull); border-color: rgba(34,197,94,.48); background: rgba(34,197,94,.08); box-shadow: inset 0 0 12px rgba(34,197,94,.05); }
.lw-gamma-regime.short { color: var(--bear); border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.08); box-shadow: inset 0 0 12px rgba(239,68,68,.05); }
.level-radar-row.above .radar-price small { color: var(--bull); }
.level-radar-row.below .radar-price small { color: var(--bear); }
.level-radar-row.above .radar-marker { background: var(--bull); box-shadow: 0 0 9px rgba(34,197,94,.45); }
.level-radar-row.below .radar-marker { background: var(--bear); box-shadow: 0 0 9px rgba(239,68,68,.45); }

#ndCalls, .nd-table td:nth-child(4) { color: var(--bull); }
#ndPuts, .nd-table td:nth-child(5) { color: var(--bear); }