:root {
  color-scheme: dark;
  --bg: #090b0e;
  --panel: #11161b;
  --panel-2: #161d23;
  --panel-3: #0d1115;
  --line: #27323b;
  --line-soft: #1d252d;
  --text: #edf3f7;
  --muted: #93a0aa;
  --buy: #42d082;
  --sell: #ff6b6b;
  --warn: #f1bf4b;
  --blue: #6ab8ff;
  --trap: #b58cff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

.shell {
  width: min(1880px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 14px 0 28px;
}

.topbar,
.control-band,
.focus-band,
.lane,
.decision-strip article {
  border: 1px solid var(--line);
  background: var(--panel);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 13px 15px;
}

.topbar > * {
  min-width: 0;
}

.eyebrow,
h1,
h2,
p {
  margin: 0;
}

.eyebrow {
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1 {
  font-size: 22px;
  line-height: 1.15;
}

h2 {
  font-size: 15px;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

nav a,
button,
input {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
}

nav a {
  flex: 0 0 auto;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.control-band {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
  padding: 11px 13px;
}

.decision-tools,
.replay-form,
.status {
  min-width: 0;
}

.symbol-picker,
.symbol-picker input {
  min-width: 0;
}

.status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.status span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #12321f;
  color: var(--buy);
  font-size: 11px;
  font-weight: 850;
}

.status span.replay {
  background: #35290f;
  color: var(--warn);
}

.status small {
  color: var(--muted);
  font-size: 12px;
}

.replay-form {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 8px;
}

label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
}

input,
button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
}

button {
  cursor: pointer;
}

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

.decision-strip article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 10px 12px;
}

.decision-strip span {
  color: var(--muted);
  font-size: 12px;
}

.decision-strip b {
  color: var(--blue);
  font-size: 21px;
}

.focus-band {
  margin-top: 10px;
  padding: 12px;
}

.premarket-radar {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(106, 184, 255, 0.32);
  background: #0d141b;
}

.premarket-radar.hidden {
  display: none;
}

.radar-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.radar-summary article,
.radar-grid article {
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--panel-3);
}

.radar-summary article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 9px;
}

.radar-summary span {
  color: var(--muted);
  font-size: 11px;
}

.radar-summary b {
  color: var(--blue);
  font-size: 16px;
  overflow-wrap: anywhere;
}

.radar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.radar-grid article {
  min-height: 140px;
  padding: 9px;
}

.radar-grid h3 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
}

.radar-list {
  display: grid;
  gap: 7px;
}

.radar-card {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  text-align: left;
}

.radar-card.bull {
  border-color: rgba(66, 208, 130, 0.34);
}

.radar-card.bear {
  border-color: rgba(255, 107, 107, 0.34);
}

.radar-card.neutral {
  border-color: rgba(241, 191, 75, 0.28);
}

.radar-card strong {
  font-size: 14px;
}

.radar-card em,
.radar-card small {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.radar-card b {
  color: var(--blue);
}

.radar-card .radar-head,
.radar-card .radar-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.radar-card .radar-stats {
  flex-wrap: wrap;
  justify-content: flex-start;
  color: var(--muted);
  font-size: 11px;
}

.radar-card .radar-checks {
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.section-title span {
  color: var(--muted);
  font-size: 12px;
}

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

.symbol-picker {
  display: block;
}

.symbol-picker input {
  width: 190px;
  min-height: 32px;
}

#autoDecisionButton.active {
  border-color: rgba(66, 208, 130, 0.55);
  background: #10311f;
  color: var(--buy);
}

.focus-panel {
  display: grid;
  gap: 10px;
}

.empty-focus,
.empty {
  padding: 13px;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 12px;
}

.focus-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.focus-head strong {
  margin-right: 8px;
  font-size: 22px;
}

.focus-head span,
.focus-head em {
  margin-right: 8px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.focus-head > b,
.row-head b {
  min-width: 92px;
  padding: 6px 8px;
  border-radius: 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 900;
}

.action-entry {
  background: #10311f;
  color: var(--buy);
}

.action-forming {
  background: #30270f;
  color: var(--warn);
}

.action-wait {
  background: #16202a;
  color: var(--blue);
}

.action-failed {
  background: #33151c;
  color: var(--sell);
}

.decision-grid,
.focus-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.decision-grid span,
.focus-grid span,
.row-metrics span {
  display: grid;
  gap: 3px;
  min-width: 0;
  border-radius: 6px;
  background: var(--panel-3);
  color: var(--muted);
}

.decision-grid span,
.focus-grid span {
  padding: 8px;
  font-size: 10px;
}

.decision-grid b,
.focus-grid b,
.row-metrics b {
  color: var(--text);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.decision-grid b {
  font-size: 13px;
}

.delta-up {
  color: #42d082;
}

.delta-down {
  color: #ff8a8a;
}

.open-mover-velocity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.open-mover-velocity-grid span {
  display: grid;
  gap: 2px;
  padding: 6px;
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 10px;
}

.open-mover-velocity-grid b {
  color: var(--text);
  font-size: 13px;
}

.focus-note {
  color: var(--muted);
  font-size: 13px;
}

.force-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 28px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text);
  background: #1b2228;
}

.force-bar b,
.force-bar strong {
  font-size: 12px;
  color: var(--text);
}

.force-bar span {
  white-space: nowrap;
}

.force-clean {
  background: rgba(66, 208, 130, 0.12);
  border-color: rgba(66, 208, 130, 0.42);
}

.force-trap {
  background: rgba(255, 107, 107, 0.13);
  border-color: rgba(255, 107, 107, 0.48);
}

.force-thin {
  background: rgba(132, 145, 155, 0.12);
  border-color: rgba(132, 145, 155, 0.32);
}

.force-noisy,
.force-building {
  background: rgba(241, 191, 75, 0.12);
  border-color: rgba(241, 191, 75, 0.42);
}

.force-divergence {
  box-shadow: inset 0 0 0 1px rgba(241, 191, 75, 0.55);
}

.force-footprint {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  background: var(--panel-3);
}

.force-footprint-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.force-footprint-head strong {
  font-size: 13px;
  text-transform: uppercase;
}

.force-footprint-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.force-footprint table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 11px;
}

.force-footprint th,
.force-footprint td {
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
  overflow-wrap: anywhere;
}

.force-footprint th {
  color: var(--muted);
  font-weight: 700;
}

.force-footprint td {
  color: var(--text);
  font-weight: 800;
}

.force-footprint p {
  margin: 0;
  color: var(--text);
  font-size: 12px;
}

.force-chip.force-clean {
  border-color: rgba(66, 208, 130, 0.42);
}

.force-chip.force-trap {
  border-color: rgba(255, 107, 107, 0.48);
}

.force-chip.force-thin {
  border-color: rgba(132, 145, 155, 0.40);
}

.force-chip.force-noisy,
.force-chip.force-building {
  border-color: rgba(241, 191, 75, 0.46);
}

.option-radar {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(106, 184, 255, 0.28);
  border-radius: 6px;
  background: #0b1218;
}

.option-radar-head,
.option-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.option-radar-head strong {
  font-size: 13px;
}

.option-radar-head span {
  color: var(--muted);
  font-size: 11px;
}

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

.option-summary span,
.option-table span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 7px;
  border-radius: 6px;
  background: var(--panel-3);
  color: var(--muted);
  font-size: 10px;
}

.option-summary b,
.option-table b {
  color: var(--text);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.option-table,
.option-term-table {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.option-term-table {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.option-table span.preferred {
  border: 1px solid rgba(66, 208, 130, 0.34);
  background: #0d1c15;
}

.option-table small,
.option-table em,
.option-term-table small,
.option-term-table em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  overflow-wrap: anywhere;
}

.option-table em.delta-up,
.option-term-table em.delta-up {
  color: #42d082;
}

.option-table em.delta-down,
.option-term-table em.delta-down {
  color: #ff8a8a;
}

.option-table em.delta-flat,
.option-term-table em.delta-flat {
  color: #9aa4b2;
}

.row-metrics b.delta-up,
.open-mover-velocity-grid b.delta-up,
.focus-grid b.delta-up {
  color: #42d082;
}

.row-metrics b.delta-down,
.open-mover-velocity-grid b.delta-down,
.focus-grid b.delta-down {
  color: #ff8a8a;
}

.option-term-table span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(106, 184, 255, 0.18);
  border-radius: 6px;
  background: var(--panel-3);
  color: var(--muted);
  font-size: 10px;
}

.option-term-table b {
  color: var(--text);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.option-flow-band {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

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

.option-flow-grid article {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(106, 184, 255, 0.20);
  border-radius: 6px;
  background: var(--panel-2);
}

.option-flow-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.option-flow-title h3 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
}

.option-flow-title span,
#optionFlowStatus {
  color: var(--muted);
  font-size: 11px;
}

.option-flow-table {
  display: grid;
  gap: 6px;
  max-height: 286px;
  overflow-y: auto;
}

.option-flow-row {
  display: grid;
  grid-template-columns: 46px minmax(88px, 0.8fr) minmax(138px, 1.25fr) repeat(4, minmax(72px, 0.7fr));
  gap: 6px;
  align-items: center;
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(132, 145, 155, 0.22);
  border-radius: 6px;
  background: var(--panel-3);
  color: var(--muted);
  font-size: 10px;
}

.option-flow-row.buy {
  border-color: rgba(66, 208, 130, 0.34);
}

.option-flow-row.sell {
  border-color: rgba(255, 107, 107, 0.34);
}

.option-flow-row b {
  color: var(--text);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.option-flow-row strong {
  color: var(--blue);
  font-size: 13px;
}

.option-flow-row small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.main-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
  min-width: 0;
}

.lower-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr 1fr;
  gap: 10px;
  margin-top: 10px;
  min-width: 0;
}

.main-grid > *,
.lower-grid > *,
.option-flow-grid > *,
.radar-grid > * {
  min-width: 0;
}

.lane {
  min-height: 280px;
  min-width: 0;
  padding: 12px;
}

.lane-list {
  display: grid;
  gap: 8px;
}

.setup-row {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 10px;
  text-align: left;
  background: var(--panel-2);
}

.setup-row.confirmed {
  border-color: rgba(66, 208, 130, 0.38);
}

.setup-row.forming {
  border-color: rgba(241, 191, 75, 0.32);
}

.setup-row.failed {
  border-color: rgba(255, 107, 107, 0.30);
}

.index-lane .setup-row {
  border-color: rgba(120, 158, 255, 0.34);
}

.setup-row:hover,
.feed-row:hover {
  border-color: #496273;
  background: #1a222a;
}

.row-head,
.row-meta,
.row-context,
.row-call {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.row-head {
  justify-content: space-between;
}

.row-head strong {
  font-size: 16px;
}

.row-meta {
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 11px;
}

.row-context {
  flex-wrap: wrap;
}

.row-meta em {
  color: var(--blue);
  font-style: normal;
}

.row-context,
.focus-context {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.live-age {
  color: var(--buy);
  font-weight: 850;
}

.row-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.row-metrics span {
  padding: 6px;
  font-size: 10px;
}

.row-call {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.tape-row {
  display: flex;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 2px;
}

.feed-row {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 10px;
  min-width: 170px;
  padding: 9px;
  text-align: left;
}

.feed-row small {
  color: var(--muted);
}

.feed-row b {
  color: var(--blue);
  text-align: right;
}

.family-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.family-board span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--panel-3);
  color: var(--muted);
  font-size: 12px;
}

.family-board b {
  color: var(--text);
  font-size: 16px;
}

.BUY_WATCH,
.BUY_IGNITION,
.BUY_CONVERTING,
.BUY_LOCKED,
.SURPRISE_SQUEEZE,
.SURPRISE_ACTIVATOR {
  color: var(--buy);
}

.SELL_WATCH,
.SELL_IGNITION,
.SELL_CONVERTING,
.SELL_LOCKED {
  color: var(--sell);
}

.ABSORBING {
  color: var(--warn);
}

.FLAT_CONVERTING,
.CONTRADICT {
  color: var(--warn);
}

.STORED_PRESSURE {
  color: var(--blue);
}

.GAP_TRAP,
.PREPARED_TRAP {
  color: var(--trap);
}

.confirmed-toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 20;
  max-width: min(360px, calc(100vw - 32px));
  padding: 10px 12px;
  border: 1px solid rgba(66, 208, 130, 0.45);
  border-radius: 6px;
  background: #0f2419;
  color: var(--buy);
  font-size: 12px;
  font-weight: 850;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.confirmed-toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1200px) {
  .topbar,
  .control-band {
    align-items: stretch;
    flex-direction: column;
  }

  nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }

  .main-grid,
  .lower-grid,
  .radar-grid,
  .decision-grid,
  .focus-grid,
  .option-summary,
  .option-table,
  .option-term-table {
    grid-template-columns: 1fr;
  }

  .option-flow-grid,
  .option-flow-row {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 760px) {
  .shell {
    width: min(1880px, calc(100vw - 16px));
    padding-top: 8px;
  }

  .topbar,
  .control-band,
  .focus-band {
    padding: 9px 10px;
  }

  h1 {
    font-size: 18px;
  }

  .option-flow-band,
  .premarket-radar,
  .main-grid,
  .lower-grid {
    margin-top: 8px;
  }
}

@media (max-width: 780px) {
  .shell {
    width: calc(100vw - 16px);
    padding-top: 8px;
  }

  .topbar,
  .control-band {
    align-items: stretch;
    flex-direction: column;
  }

  nav {
    flex-wrap: wrap;
    overflow: visible;
  }

  nav a,
  button,
  input {
    min-height: 32px;
  }

  .decision-strip,
  .radar-summary,
  .family-board,
  .row-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}