/* ==========================================================================
   Wire — WebSocket console + NinjaTrader-style chart pages
   Layered on Bootstrap 5.3. Light mode default; dark via data-bs-theme.

   Palette is limited to Microsoft (WPF Brushes / HTML named) colors wherever
   possible, matching NinjaTrader's Brushes:
     Accents: LimeGreen, Green, DodgerBlue, RoyalBlue, Crimson, Firebrick,
              DarkOrange, Goldenrod, DarkGoldenrod, Teal, LightSeaGreen
     Greys:   White, WhiteSmoke, Gainsboro, Silver, DarkGray, Gray, DimGray, Black
   ========================================================================== */

:root {
  --wire-font-ui: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --wire-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* light theme */
  --wire-bg: whitesmoke;             /* WhiteSmoke */
  --wire-surface: white;             /* White */
  --wire-ink: black;                 /* Black */
  --wire-line: gainsboro;            /* Gainsboro */
  --wire-muted: dimgray;             /* DimGray */
  --wire-row-hover: whitesmoke;

  /* brush accents (light variants lean darker for contrast on white) */
  --brush-green: green;              /* Green */
  --brush-blue: royalblue;           /* RoyalBlue */
  --brush-red: firebrick;            /* Firebrick */
  --brush-orange: darkorange;        /* DarkOrange */
  --brush-gold: darkgoldenrod;       /* DarkGoldenrod */
  --brush-teal: teal;                /* Teal */
  --brush-gray: gray;                /* Gray */

  /* NT chart chrome: neutral grey/black in both themes */
  --nt-panel: #262626;
  --nt-panel-line: #3f3f3f;
  --nt-btn: #383838;
  --nt-btn-hover: #474747;
  --nt-text: gainsboro;
  --nt-muted: darkgray;

  --bs-body-font-family: var(--wire-font-ui);
}

[data-bs-theme="dark"] {
  /* black/grey — no blue cast */
  --wire-bg: black;                  /* Black */
  --wire-surface: #1a1a1a;
  --wire-ink: gainsboro;             /* Gainsboro */
  --wire-line: #333333;
  --wire-muted: darkgray;            /* DarkGray */
  --wire-row-hover: #242424;

  /* brush accents (dark variants lean brighter for contrast on black) */
  --brush-green: limegreen;          /* LimeGreen */
  --brush-blue: dodgerblue;          /* DodgerBlue */
  --brush-red: crimson;              /* Crimson */
  --brush-orange: orange;            /* Orange */
  --brush-gold: goldenrod;           /* Goldenrod */
  --brush-teal: lightseagreen;       /* LightSeaGreen */
  --brush-gray: darkgray;            /* DarkGray */

  --nt-panel: #1f1f1f;
  --nt-panel-line: #363636;
}

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--wire-bg);
  color: var(--wire-ink);
  font-family: var(--wire-font-ui);
}

.btn-primary {
  --bs-btn-bg: var(--brush-teal);
  --bs-btn-border-color: var(--brush-teal);
  --bs-btn-hover-bg: color-mix(in srgb, var(--brush-teal) 82%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brush-teal) 82%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--brush-teal) 72%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--brush-teal) 72%, black);
  --bs-btn-disabled-bg: var(--brush-teal);
  --bs-btn-disabled-border-color: var(--brush-teal);
}

.pane-title {
  font-family: var(--wire-font-mono);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.pnl-pos { color: var(--brush-green); font-weight: 600; }
.pnl-neg { color: var(--brush-red); font-weight: 600; }

/* ==========================================================================
   Shell
   ========================================================================== */

.app-shell { display: flex; flex-direction: column; height: 100dvh; }

.app-header {
  background: var(--wire-surface);
  border-color: var(--wire-line) !important;
  padding: .55rem .75rem 0;
  padding-top: max(.55rem, env(safe-area-inset-top));
}

.header-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: 1280px;
  margin: 0 auto;
}

.brand-name { font-weight: 700; letter-spacing: .02em; }

.brand-mark {
  width: 10px; height: 10px;
  border-radius: 2px;
  background: var(--brush-teal);
  display: inline-block;
  transform: rotate(45deg);
}

.connect-form { flex: 1 1 auto; min-width: 0; }
.header-actions { display: flex; gap: .4rem; }
.icon-btn { line-height: 1; position: relative; }

.user-count-badge {
  position: absolute;
  top: -6px; right: -6px;
  font-size: .58rem;
  padding: .2em .4em;
}

.status-cell {
  gap: .45rem;
  font-family: var(--wire-font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  min-width: 6.2rem;
  justify-content: flex-start;
}

.status-led {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--brush-red);
  flex: 0 0 auto;
  transition: background-color .2s ease;
}

.status-cell[data-state="connecting"] .status-led {
  background: var(--brush-gold);
  animation: led-pulse 1s ease-in-out infinite;
}

.status-cell[data-state="connected"] .status-led {
  background: var(--brush-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brush-green) 25%, transparent);
}

@keyframes led-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@media (max-width: 575.98px) {
  .status-text { display: none; }
  .status-cell { min-width: auto; }
}

/* view pills */
.view-nav { max-width: 1280px; margin: .55rem auto 0; }

.view-pills { gap: .25rem; padding-bottom: .55rem; }

.view-pills .nav-link {
  font-family: var(--wire-font-mono);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--wire-muted);
  border-radius: .5rem;
  padding: .4rem .35rem;
}

.view-pills .nav-link:hover { background: var(--wire-row-hover); color: var(--wire-ink); }
.view-pills .nav-link.active { background: var(--brush-teal); color: white; }

.tab-badge { font-size: .6rem; vertical-align: middle; }

@media (min-width: 576px) { .view-pills { max-width: 42rem; } }

/* five pills on a 375px screen (iPhone SE) */
@media (max-width: 420px) {
  .view-pills { gap: .15rem; }
  .view-pills .nav-link { font-size: .64rem; padding: .38rem .2rem; letter-spacing: .02em; }
  .view-pills .nav-link .bi { display: none; }
}

/* main region */
.app-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem .75rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

.view-content { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; }
.view-content > .tab-pane { width: 100%; }

.view-pane {
  min-width: 0;
  background: var(--wire-surface);
  border: 1px solid var(--wire-line);
  border-radius: .75rem;
  overflow: hidden;
}

/* ==========================================================================
   Shared: position / account summary values
   ========================================================================== */

.sum-lbl {
  font-family: var(--wire-font-mono);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wire-muted);
}

.sum-val { font-family: var(--wire-font-mono); font-weight: 600; }

.sum-pos[data-side="long"]  { color: var(--brush-green); }
.sum-pos[data-side="short"] { color: var(--brush-red); }

/* ==========================================================================
   Console (+ users column)
   ========================================================================== */

.console-pane.active.show { display: flex; }

.console-layout { flex: 1 1 auto; min-height: 0; display: flex; width: 100%; }

.console-main {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.console-toolbar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .85rem;
  border-bottom: 1px solid var(--wire-line);
}

.msg-count { font-size: .75rem; }

.console-window {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.console-list {
  list-style: none;
  margin: 0;
  padding: .25rem 0;
  font-family: var(--wire-font-mono);
  font-size: .8rem;
}

.console-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: var(--wire-muted);
  padding: 2rem 1rem;
  text-align: center;
}

.console-empty .bi { font-size: 1.6rem; }

.msg-row { border-bottom: 1px dashed color-mix(in srgb, var(--wire-line) 70%, transparent); }

.msg-head {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  width: 100%;
  padding: .45rem .85rem;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
}

.msg-row.expandable .msg-head { cursor: pointer; }
.msg-row.expandable .msg-head:hover { background: var(--wire-row-hover); }

.msg-time { color: var(--wire-muted); font-size: .7rem; flex: 0 0 auto; }
.msg-dir { flex: 0 0 auto; font-weight: 600; font-size: .7rem; }

.msg-row[data-dir="in"]  .msg-dir { color: var(--brush-teal); }
.msg-row[data-dir="out"] .msg-dir { color: var(--brush-blue); }
.msg-row[data-dir="sys"] .msg-dir { color: var(--wire-muted); }
.msg-row[data-dir="err"] .msg-dir { color: var(--brush-red); }

.msg-row[data-dir="sys"] .msg-preview { color: var(--wire-muted); font-style: italic; }
.msg-row[data-dir="err"] .msg-preview { color: var(--brush-red); font-style: italic; }

.msg-preview {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-caret {
  flex: 0 0 auto;
  color: var(--wire-muted);
  font-size: .7rem;
  transition: transform .15s ease;
}

.msg-row.open .msg-caret { transform: rotate(90deg); }

.msg-body {
  display: none;
  margin: 0 .85rem .6rem;
  padding: .6rem .75rem;
  background: color-mix(in srgb, var(--wire-bg) 65%, var(--wire-surface));
  border: 1px solid var(--wire-line);
  border-radius: .5rem;
  overflow-x: auto;
}

.msg-row.open .msg-body { display: block; }

.msg-body pre {
  margin: 0;
  font-family: var(--wire-font-mono);
  font-size: .78rem;
  line-height: 1.55;
  white-space: pre;
}

.j-key  { color: var(--brush-blue); }
.j-str  { color: var(--brush-teal); }
.j-num  { color: var(--brush-orange); }
.j-bool { color: var(--brush-red); font-weight: 600; }
.j-null { color: var(--wire-muted); font-style: italic; }

.jump-latest {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 5.6rem;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  z-index: 5;
}

.send-bar {
  padding: .6rem .85rem;
  border-top: 1px solid var(--wire-line);
  background: var(--wire-surface);
}

.wrap-toggle { font-size: .72rem; }
.wrap-toggle.active { background: var(--brush-blue); border-color: var(--brush-blue); color: white; }
.wrap-hint { font-size: .7rem; margin-top: .35rem; }

.panel-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .55rem;
}

@media (min-width: 992px) {
  .user-pane { flex: 0 0 240px; border-left: 1px solid var(--wire-line); }
  .user-pane-body {
    padding: .85rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }
}

[data-bs-theme] .offcanvas-lg { --bs-offcanvas-bg: var(--wire-surface); }

.user-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.user-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .2rem;
  border-bottom: 1px dashed color-mix(in srgb, var(--wire-line) 70%, transparent);
  font-size: .82rem;
}

.user-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brush-gray);
  flex: 0 0 auto;
}

.user-dot[data-status="online"] { background: var(--brush-green); }
.user-dot[data-status="idle"],
.user-dot[data-status="away"] { background: var(--brush-orange); }
.user-dot[data-status="offline"] { background: var(--brush-red); }

.user-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--wire-font-mono);
}

.user-status { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }

.user-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  text-align: center;
  padding: 1.5rem .5rem;
  color: var(--wire-muted);
}

.user-empty .bi { font-size: 1.4rem; }

/* ==========================================================================
   Desktop chart (NT geometry)
   ========================================================================== */

.dashboard-pane.active.show { display: flex; }

.nt-window {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--nt-panel);
  color: var(--nt-text);
}

.nt-toolbar {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--nt-panel-line);
  flex-wrap: wrap;
}

.nt-chip {
  background: orangered;             /* OrangeRed brush, like NT's chart chip */
  color: white;
  font-weight: 700;
  font-size: .74rem;
  padding: .22rem .55rem;
  border-radius: .25rem;
  letter-spacing: .02em;
}

.nt-instrument {
  background: #191919;
  border: 1px solid var(--nt-panel-line);
  border-radius: .25rem;
  padding: .22rem .55rem;
  font-size: .76rem;
}

.nt-tf {
  width: auto;
  background: #191919;
  color: var(--nt-text);
  border-color: var(--nt-panel-line);
  font-size: .76rem;
}

.nt-toolbar .feed-stamp { font-family: var(--wire-font-mono); font-size: .68rem; color: var(--nt-muted) !important; }

/* position / account board — visual cards, styled like the old quote cards */
.pos-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--nt-panel-line);
}

@media (min-width: 768px) { .pos-board { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pos-card {
  background: #191919;
  border: 1px solid var(--nt-panel-line);
  border-radius: .45rem;
  padding: .5rem .6rem;
  min-width: 0;
}

.pc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem;
  margin-bottom: .1rem;
}

.pc-title {
  font-family: var(--wire-font-mono);
  font-size: .62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--nt-muted);
}

.pc-sub {
  font-family: var(--wire-font-mono);
  font-size: .6rem;
  color: var(--nt-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pc-big {
  font-family: var(--wire-font-mono);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--nt-text);
  margin-bottom: .25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pc-foot {
  display: flex;
  gap: .35rem;
  align-items: baseline;
  font-family: var(--wire-font-mono);
  font-size: .64rem;
  color: var(--nt-text);
  border-top: 1px dashed var(--nt-panel-line);
  padding-top: .3rem;
}

.pc-lbl {
  color: var(--nt-muted);
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.pc-side[data-side="long"]  { color: limegreen; }
.pc-side[data-side="short"] { color: crimson; }

.pos-board .sum-pos[data-side="long"],
.pos-board .sum-pnl.pnl-pos { color: limegreen; }
.pos-board .sum-pos[data-side="short"],
.pos-board .sum-pnl.pnl-neg { color: crimson; }

/* strategy toggles — top of the page, server-driven state */
.strategy-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--nt-panel-line);
}

@media (min-width: 768px) {
  .strategy-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.strat-btn, .strat-reset {
  font-size: .76rem;
  font-weight: 600;
  padding: .5rem .3rem;
  border-radius: .2rem;
  border: 1px solid var(--nt-panel-line);
  background: var(--nt-btn);
  color: var(--nt-muted);
}

.strat-btn:hover, .strat-reset:hover { background: var(--nt-btn-hover); color: var(--nt-text); }

/* each toggle gets its own Brush color when ON; gray when off */
.strat-btn[data-strat="trail"].on { background: dodgerblue; }
.strat-btn[data-strat="long"].on  { background: limegreen; }
.strat-btn[data-strat="short"].on { background: crimson; }
.strat-btn[data-strat="exit"].on  { background: darkorange; }
.strat-btn[data-strat="auto"].on  { background: lightseagreen; }

.strat-btn.on {
  color: white;
  border-color: rgba(0,0,0,.35);
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}

.strat-btn.on:hover { filter: brightness(1.08); color: white; }

.strat-reset { background: goldenrod; color: white; border-color: darkgoldenrod; }
.strat-reset:hover { background: darkgoldenrod; color: white; }

/* chart + trader geometry */
.nt-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) { .nt-body { flex-direction: row; } }

.chart-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 260px;
  border-bottom: 1px solid var(--nt-panel-line);
}

@media (min-width: 768px) {
  .chart-wrap { border-bottom: 0; border-right: 1px solid var(--nt-panel-line); }
}

.chart-host { position: absolute; inset: 0; }

.chart-overlay {
  position: absolute;
  left: .6rem;
  bottom: .6rem;
  z-index: 3;
  background: rgba(0, 0, 0, .8);
  color: gainsboro;
  font-family: var(--wire-font-mono);
  font-size: .62rem;
  line-height: 1.5;
  border-collapse: collapse;
  pointer-events: none;
  padding: .3rem;
}

.chart-overlay th, .chart-overlay td { padding: 0 .5rem 0 .35rem; font-weight: 400; text-align: left; }
.chart-overlay th { color: darkgray; }

@media (max-width: 575.98px) { .chart-overlay { font-size: .56rem; } }

.chart-trader {
  flex: 0 0 auto;
  padding: .55rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  background: var(--nt-panel);
}

@media (min-width: 768px) {
  .chart-trader { flex: 0 0 200px; overflow-y: auto; scrollbar-width: thin; }
}

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

.ct-btn {
  font-size: .78rem;
  font-weight: 600;
  padding: .5rem .3rem;
  border-radius: .2rem;
  border: 1px solid var(--nt-panel-line);
  background: var(--nt-btn);
  color: var(--nt-text);
}

.ct-btn:hover { background: var(--nt-btn-hover); color: white; }

.ct-buy  { box-shadow: inset 3px 0 0 limegreen; }
.ct-sell { box-shadow: inset 3px 0 0 crimson; }

.ct-position { border: 1px solid var(--nt-panel-line); border-radius: .2rem; overflow: hidden; }

.ct-pos-row { display: flex; }

.ct-pos-qty {
  flex: 0 0 38%;
  text-align: center;
  font-family: var(--wire-font-mono);
  font-weight: 700;
  padding: .35rem .2rem;
  background: gray;
  color: white;
}

.ct-pos-qty[data-side="long"]  { background: limegreen; }
.ct-pos-qty[data-side="short"] { background: crimson; }

.ct-pos-avg {
  flex: 1 1 auto;
  text-align: center;
  font-family: var(--wire-font-mono);
  padding: .35rem .2rem;
  background: #141414;
  color: gainsboro;
}

.ct-pos-pnl {
  text-align: center;
  font-family: var(--wire-font-mono);
  font-weight: 600;
  padding: .3rem .2rem;
  background: #141414;
  border-top: 1px solid var(--nt-panel-line);
  color: gainsboro;
}

.ct-pos-pnl.pnl-pos { color: limegreen; }
.ct-pos-pnl.pnl-neg { color: crimson; }

.ct-fields {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: .4rem .45rem;
}

.ct-field label {
  display: block;
  font-size: .64rem;
  color: var(--nt-muted);
  margin-bottom: .12rem;
}

.ct-field .form-control, .ct-field .form-select {
  background: #191919;
  color: var(--nt-text);
  border-color: var(--nt-panel-line);
  font-size: .76rem;
}

.ct-wide { grid-column: 1 / -1; }

.ct-book {
  border-top: 1px solid var(--nt-panel-line);
  padding-top: .45rem;
  font-size: .78rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.ct-book-row { display: flex; gap: .5rem; align-items: baseline; }
.ct-book-lbl { color: var(--nt-muted); flex: 0 0 1.2rem; }
.ct-book-size { margin-left: auto; color: var(--nt-muted); }

.quote-strip {
  display: flex;
  gap: 2px;
  padding: .4rem .6rem;
  border-top: 1px solid var(--nt-panel-line);
  overflow-x: auto;
  scrollbar-width: thin;
}

.quote-tab {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  background: var(--nt-btn);
  border: 1px solid var(--nt-panel-line);
  border-radius: .2rem;
  padding: .3rem .55rem;
  color: var(--nt-muted);
  min-width: 8.2rem;
  cursor: pointer;
  text-align: left;
}

.quote-tab:hover { background: var(--nt-btn-hover); color: var(--nt-text); }

.quote-tab.active {
  background: #141414;
  color: white;
  border-color: dodgerblue;
  box-shadow: inset 0 -2px 0 dodgerblue;
}

.qt-label { font-size: .68rem; font-weight: 600; }

.qt-last {
  font-family: var(--wire-font-mono);
  font-size: .82rem;
  font-weight: 600;
  border-radius: .2rem;
  padding: 0 .15rem;
  margin: 0 -.15rem;
}

.qt-ba {
  font-family: var(--wire-font-mono);
  font-size: .6rem;
  display: flex;
  gap: .25rem;
  align-items: baseline;
  color: var(--nt-muted);
}

.qt-bid { color: limegreen; }
.qt-ask { color: crimson; }
.qt-sep { opacity: .5; }
.qt-size::before { content: "\00d7"; opacity: .6; }

.flash-up   { animation: flash-up .5s ease-out; }
.flash-down { animation: flash-down .5s ease-out; }

@keyframes flash-up   { 0% { background: rgba(50,205,50,.45); } 100% { background: transparent; } }   /* LimeGreen */
@keyframes flash-down { 0% { background: rgba(220,20,60,.45); } 100% { background: transparent; } }   /* Crimson */

@media (prefers-reduced-motion: reduce) {
  .status-cell[data-state="connecting"] .status-led { animation: none; }
  .flash-up, .flash-down { animation: none; }
}

/* ==========================================================================
   Mobile chart — responsive-first
   ========================================================================== */

.mobile-pane.active.show { display: flex; }

/* tuned for iPhone SE (375×667): hero + quote + all six toggles above the fold */
.mobile-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: .6rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
}

/* hero: P/L dollars dominate, position badge beside */
.m-hero {
  display: flex;
  align-items: stretch;
  gap: .6rem;
  background: color-mix(in srgb, var(--wire-bg) 55%, var(--wire-surface));
  border: 1px solid var(--wire-line);
  border-radius: .6rem;
  padding: .65rem .75rem;
}

.m-hero-pnl {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.m-pnl-big {
  font-family: var(--wire-font-mono);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-hero-real { font-family: var(--wire-font-mono); font-size: .72rem; }

.m-hero-pos {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .12rem;
  border-left: 1px dashed var(--wire-line);
  padding-left: .65rem;
  justify-content: center;
}

.m-pos-badge {
  font-family: var(--wire-font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  min-width: 2.2rem;
  text-align: center;
  padding: .3rem .4rem;
  border-radius: .4rem;
  background: var(--brush-gray);
  color: white;
}

.m-pos-badge[data-side="long"]  { background: var(--brush-green); }
.m-pos-badge[data-side="short"] { background: var(--brush-red); }

.m-pos-side {
  font-family: var(--wire-font-mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .06em;
}

.m-hero-line { font-family: var(--wire-font-mono); font-size: .66rem; white-space: nowrap; }

.m-quote {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: color-mix(in srgb, var(--wire-bg) 55%, var(--wire-surface));
  border: 1px solid var(--wire-line);
  border-radius: .5rem;
  padding: .5rem .65rem;
}

.m-inst-select { max-width: 9rem; }

.m-quote-px {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  gap: .1rem;
}

.m-last {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.15;
  border-radius: .25rem;
  padding: 0 .2rem;
  margin: 0 -.2rem;
}

.m-ba { font-size: .72rem; display: flex; gap: .3rem; align-items: baseline; color: var(--wire-muted); }

/* the six buttons: the main event — large 2×3 thumb targets */
.mstrat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}

.mstrat {
  min-height: 4rem;
  font-size: 1rem;
  border-radius: .55rem;
}

/* off state on light surfaces: readable gray */
.mobile-scroll .strat-btn {
  background: var(--brush-gray);
  border-color: color-mix(in srgb, var(--brush-gray) 70%, black);
  color: white;
}

.mobile-scroll .strat-btn:hover { filter: brightness(1.08); color: white; }

/* ==========================================================================
   Trading
   ========================================================================== */

.trading-pane.active.show { display: flex; flex-direction: column; }

/* color-coded sub-tabs */
.trading-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--wire-line);
  padding: .45rem .6rem 0;
  --bs-nav-tabs-border-width: 0;
}

.trading-tabs .nav-link {
  font-family: var(--wire-font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--wire-muted);
  white-space: nowrap;
  border-radius: .4rem .4rem 0 0;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.tt-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.trading-tabs .nav-link[data-color="blue"]   .tt-dot { background: var(--brush-blue); }
.trading-tabs .nav-link[data-color="green"]  .tt-dot { background: var(--brush-green); }
.trading-tabs .nav-link[data-color="gold"]   .tt-dot { background: var(--brush-gold); }
.trading-tabs .nav-link[data-color="orange"] .tt-dot { background: var(--brush-orange); }
.trading-tabs .nav-link[data-color="red"]    .tt-dot { background: var(--brush-red); }
.trading-tabs .nav-link[data-color="gray"]   .tt-dot { background: var(--brush-gray); }
.trading-tabs .nav-link[data-color="teal"]   .tt-dot { background: var(--brush-teal); }

/* active: solid brush background, white text, dot flips white */
.trading-tabs .nav-link.active { color: white; }
.trading-tabs .nav-link.active .tt-dot { background: white; }

.trading-tabs .nav-link.active[data-color="blue"]   { background: var(--brush-blue); }
.trading-tabs .nav-link.active[data-color="green"]  { background: var(--brush-green); }
.trading-tabs .nav-link.active[data-color="gold"]   { background: var(--brush-gold); }
.trading-tabs .nav-link.active[data-color="orange"] { background: var(--brush-orange); }
.trading-tabs .nav-link.active[data-color="red"]    { background: var(--brush-red); }
.trading-tabs .nav-link.active[data-color="gray"]   { background: var(--brush-gray); }
.trading-tabs .nav-link.active[data-color="teal"]   { background: var(--brush-teal); }

.trading-content { flex: 1 1 auto; min-height: 0; display: flex; }
.trading-content > .tab-pane { width: 100%; }
.trading-grid-pane.active.show { display: flex; flex-direction: column; }

/* pane keeps a whisper of its tab color along the top edge */
.trading-grid-pane[data-color="blue"]   { box-shadow: inset 0 3px 0 var(--brush-blue); }
.trading-grid-pane[data-color="green"]  { box-shadow: inset 0 3px 0 var(--brush-green); }
.trading-grid-pane[data-color="gold"]   { box-shadow: inset 0 3px 0 var(--brush-gold); }
.trading-grid-pane[data-color="orange"] { box-shadow: inset 0 3px 0 var(--brush-orange); }
.trading-grid-pane[data-color="red"]    { box-shadow: inset 0 3px 0 var(--brush-red); }
.trading-grid-pane[data-color="gray"]   { box-shadow: inset 0 3px 0 var(--brush-gray); }
.trading-grid-pane[data-color="teal"]   { box-shadow: inset 0 3px 0 var(--brush-teal); }

.trading-grid-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
}

.trading-grid {
  --bs-table-bg: transparent;
  font-size: .78rem;
  margin: 0;
  min-width: 560px;
}

.trading-grid thead th {
  position: sticky;
  top: 0;
  background: var(--wire-surface);
  font-family: var(--wire-font-mono);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--wire-muted);
  border-bottom: 1px solid var(--wire-line);
  z-index: 2;
}

.trading-grid th, .trading-grid td {
  padding: .45rem .6rem;
  border-color: color-mix(in srgb, var(--wire-line) 60%, transparent);
}

.trading-grid tbody td { font-family: var(--wire-font-mono); }

.cell-buy { color: var(--brush-green); font-weight: 600; }
.cell-sell { color: var(--brush-red); font-weight: 600; }

.grid-action-col { width: 1%; white-space: nowrap; text-align: right; }

.grid-action-btn {
  font-size: .68rem;
  padding: .15rem .55rem;
  border: 1px solid var(--wire-line);
  color: var(--wire-ink);
}

.grid-action-btn:hover { background: var(--brush-gold); border-color: var(--brush-gold); color: white; }

.grid-note { font-size: .68rem; padding: .5rem .85rem; margin: 0; border-top: 1px solid var(--wire-line); }

/* ==========================================================================
   Workspace
   ========================================================================== */

.workspace-pane.active.show { display: flex; }

.workspace-placeholder {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  text-align: center;
  color: var(--wire-muted);
  padding: 3rem 1rem;
}

.workspace-placeholder .bi { font-size: 2rem; }

/* focus visibility */
.msg-head:focus-visible, .quote-tab:focus-visible, .strat-btn:focus-visible, .strat-reset:focus-visible {
  outline: 2px solid var(--brush-teal);
  outline-offset: -2px;
}