:root {
  color-scheme: dark;
  --bg: #07090c;
  --panel: #0a0d11;
  --panel-2: #0e1217;
  --line: #1b222b;
  --line-bright: #2b3541;
  --text: #d7dde4;
  --muted: #687482;
  --bid: #19d3c5;
  --ask: #e93bd0;
  --buy: #2de28c;
  --sell: #ff5b69;
  --accent: #f0c86b;
  --site-nav-height: 44px;
  --topbar-height: 48px;
  --mattdom-scale: 1;
  --mattdom-viewport-width: 100vw;
  --mattdom-viewport-height: 100dvh;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}

body {
  min-width: 620px;
  width: var(--mattdom-viewport-width);
  height: var(--mattdom-viewport-height);
  transform: scale(var(--mattdom-scale));
  transform-origin: top left;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

button,
input,
select { font: inherit; }

button,
a,
input,
select { -webkit-tap-highlight-color: transparent; }

.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;
}

.site-nav {
  width: 100%;
  height: var(--site-nav-height);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
  background: #0b0e12;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.site-nav::-webkit-scrollbar { display: none; }
.auth-prompt { width:min(420px,calc(100vw - 32px)); border:1px solid #303844; border-radius:10px; background:#0b0e13; color:#e8edf4; padding:22px; box-shadow:0 24px 80px #000; }
.auth-prompt::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(4px); }
.auth-prompt form { display:grid; gap:10px; }
.auth-prompt h2,.auth-prompt p { margin:0 0 4px; }
.auth-prompt p { color:#9aa6b5; line-height:1.5; font-size:13px; }
.auth-prompt input,.auth-prompt button { box-sizing:border-box; width:100%; padding:10px; border:1px solid #303844; border-radius:6px; background:#11161e; color:#e8edf4; }
.auth-prompt button { cursor:pointer; }
.auth-prompt button[type="submit"] { background:#d946ef; border-color:#d946ef; color:#fff; font-weight:700; }
.auth-prompt-error { min-height:16px; color:#fb7185; font-size:12px; }

.site-brand {
  flex: 0 0 auto;
  color: rgba(226, 232, 240, .92);
  text-decoration: none;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
}

.site-links {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-links a {
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: rgba(226, 232, 240, .65);
  text-decoration: none;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
}

.site-links a:hover {
  border-color: rgba(148, 163, 184, .12);
  color: rgba(226, 232, 240, .95);
  background: rgba(30, 41, 59, .35);
}

.site-links a.active {
  border-color: rgba(34, 211, 238, .18);
  color: #a5f3fc;
  background: rgba(8, 145, 178, .12);
}

.topbar {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
  background: #0b0e12;
  white-space: nowrap;
  user-select: none;
}

.brand {
  height: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-right: 11px;
  border-right: 1px solid var(--line);
  color: #eef2f6;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
}

.brand-mark {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(25, 211, 197, .5);
  color: var(--bid);
  background: rgba(25, 211, 197, .06);
}

.connection {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 9px;
}

.connection-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d99a37;
}

.connection.is-live .connection-dot {
  background: var(--buy);
  box-shadow: 0 0 0 3px rgba(45, 226, 140, .08);
}

.connection.is-down .connection-dot { background: var(--sell); }

.symbol-form {
  display: inline-flex;
  height: 27px;
}

.symbol-form input,
.symbol-form button,
.size-control input,
.leverage-control input,
.leverage-control button,
.execution-control select,
.rows-control input,
.profile-control select,
.tick-control select {
  height: 27px;
  border: 1px solid var(--line-bright);
  color: var(--text);
  background: #080b0f;
  outline: none;
}

.symbol-form input {
  width: 104px;
  padding: 0 8px;
  border-right: 0;
  text-transform: uppercase;
  font-weight: 700;
}

.symbol-form input:focus { border-color: #526171; }

.size-control { display: inline-flex; align-items: center; gap: 4px; }
.size-control input { width: 84px; padding: 0 7px; outline: none; }
.size-control input:focus { border-color: var(--bid); }
.click-venue-control { display: inline-flex; align-items: center; gap: 4px; }
.click-venue-control select { height: 27px; max-width: 132px; padding: 0 5px; border: 1px solid var(--line-bright); color: var(--bid); background: #080b0f; font-size: 9px; font-weight: 700; }
.click-venue-control select:focus { border-color: var(--bid); outline: none; }
.leverage-control { display: inline-flex; align-items: center; gap: 3px; }
.leverage-control input { width: 45px; padding: 0 5px; outline: none; text-align: right; }
.leverage-control button { padding: 0 6px; color: var(--accent); cursor: pointer; }
.execution-control { display: inline-flex; align-items: center; gap: 3px; }
.execution-control select { height: 27px; border: 1px solid var(--line-bright); color: var(--text); background: #080b0f; }
.action-button.is-unavailable { opacity: .28; filter: saturate(.15); }
.venue-menu { position: relative; }
.venue-menu-button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.venue-menu-button span { color: var(--bid); font-variant-numeric: tabular-nums; }
.venue-menu-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 5px);
  right: 0;
  width: 310px;
  max-width: calc(100vw - 16px);
  padding: 8px;
  border: 1px solid var(--line-bright);
  background: #0b0e12;
  box-shadow: 0 14px 45px rgba(0, 0, 0, .72);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .12s, transform .12s, visibility .12s;
}
.venue-menu.is-open .venue-menu-panel,
.venue-menu:hover .venue-menu-panel,
.venue-menu:focus-within .venue-menu-panel { opacity: 1; visibility: visible; transform: none; }
.venue-menu-heading { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 5px 8px; color: var(--text); font-size: 9px; letter-spacing: .07em; }
.venue-menu-heading small { color: var(--dim); font-size: 8px; letter-spacing: 0; }
.venue-menu-row { display: grid; grid-template-columns: minmax(105px, 1fr) 58px 58px; align-items: center; gap: 7px; min-height: 35px; padding: 2px 5px; border-top: 1px solid var(--line); }
.venue-toggle { display: flex; align-items: center; gap: 7px; color: var(--muted); cursor: pointer; font-size: 9px; }
.venue-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.venue-switch { position: relative; width: 25px; height: 13px; border: 1px solid var(--line-bright); border-radius: 8px; background: #07090c; }
.venue-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); transition: .12s; }
.venue-toggle input:checked + .venue-switch { border-color: rgba(25, 211, 197, .5); background: rgba(25, 211, 197, .08); }
.venue-toggle input:checked + .venue-switch::after { left: 14px; background: var(--bid); }
.venue-toggle input:checked ~ span:last-child { color: var(--text); }
.venue-connection { color: var(--dim); font-size: 8px; text-align: right; }
.venue-menu-row.is-connected .venue-connection { color: var(--buy); }
.venue-menu-row.is-unavailable .venue-connection { color: var(--accent); }
.venue-manage { height: 23px; padding: 0 6px; border: 1px solid var(--line); color: var(--muted); background: transparent; cursor: pointer; font-size: 8px; }
.venue-manage:hover { color: var(--text); border-color: var(--line-bright); }
.trade-dialog textarea { width: 100%; padding: 8px 9px; resize: vertical; border: 1px solid var(--line-bright); color: var(--text); background: #07090c; outline: none; font: 9px "SFMono-Regular", Consolas, monospace; }
.trade-dialog { width: min(430px, calc(100vw - 30px)); border: 1px solid var(--line-bright); color: var(--text); background: #0b0e12; box-shadow: 0 20px 70px #000; }
.trade-dialog::backdrop { background: rgba(0, 0, 0, .72); }
.trade-dialog form { display: grid; gap: 13px; }
.trade-dialog p { margin: 0; color: var(--muted); line-height: 1.55; }
.trade-dialog label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; }
.trade-dialog input { height: 32px; padding: 0 9px; border: 1px solid var(--line-bright); color: var(--text); background: #07090c; outline: none; }
.dialog-title, .dialog-actions { display: flex; align-items: center; justify-content: space-between; }
.dialog-title button { border: 0; color: var(--muted); background: none; font-size: 22px; cursor: pointer; }
.dialog-status { min-height: 16px; color: var(--muted); }
.dialog-status.is-error { color: var(--sell); }
.dialog-actions { justify-content: flex-end; gap: 8px; }
.dialog-actions button { height: 30px; padding: 0 12px; border: 1px solid var(--line-bright); color: var(--text); background: transparent; cursor: pointer; }
.dialog-actions .primary-button { border-color: rgba(25,211,197,.5); color: var(--bid); }
.dialog-actions .danger-button { margin-right: auto; color: var(--sell); }
.trade-toast { position: fixed; z-index: 20; right: 18px; bottom: 18px; max-width: 420px; padding: 10px 13px; border: 1px solid var(--line-bright); color: var(--text); background: #10151b; opacity: 0; transform: translateY(8px); pointer-events: none; transition: .16s; }
.trade-toast.is-visible { opacity: 1; transform: none; }
.trade-toast.is-error { border-color: rgba(255,91,105,.55); color: #ff9ca5; }

.symbol-form button {
  padding: 0 7px;
  color: var(--bid);
  cursor: pointer;
}

.group-control,
.rows-control,
.profile-control,
.tick-control {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.signal-menu { position: relative; }
.signal-menu-button { color: var(--accent); border-color: rgba(240, 200, 107, .28); }
.signal-menu-panel {
  position: absolute; z-index: 45; top: calc(100% + 6px); left: 0; width: 280px; max-height: min(620px, calc(100vh - 92px)); overflow-y: auto; padding: 9px;
  border: 1px solid var(--line-bright); background: #0b0e12; box-shadow: 0 14px 45px rgba(0,0,0,.72);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .12s, transform .12s, visibility .12s;
}
.signal-menu.is-open .signal-menu-panel, .signal-menu:focus-within .signal-menu-panel { opacity: 1; visibility: visible; transform: none; }
.signal-menu-heading { display: flex; justify-content: space-between; padding: 3px 3px 8px; color: var(--text); font-size: 9px; letter-spacing: .06em; }
.signal-menu-heading small { color: var(--dim); font-size: 8px; letter-spacing: 0; }
.signal-menu-subheading { margin-top: 5px; padding-top: 9px; border-top: 1px solid var(--line-bright); }
.signal-menu-panel label { min-height: 31px; display: grid; grid-template-columns: 76px 38px 1fr; align-items: center; gap: 5px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; }
.signal-menu-panel label select { grid-column: 2 / 4; height: 23px; border: 1px solid var(--line-bright); color: var(--accent); background: #080b0f; }
.signal-menu-panel label > input[type="checkbox"] { grid-column: 3; justify-self: end; accent-color: var(--accent); }
.signal-menu-panel input[type="range"] { min-width: 0; accent-color: var(--accent); }
.signal-menu-panel output { color: var(--accent); text-align: right; }
.phase-signal-readout { margin: 5px 0 7px; padding: 8px; border: 1px solid rgba(240,200,107,.18); background: rgba(240,200,107,.035); }
.phase-signal-readout > div { display: flex; justify-content: space-between; align-items: baseline; min-height: 18px; color: var(--dim); font-size: 8px; letter-spacing: .06em; }
.phase-signal-readout strong { color: #9eabb8; font-size: 9px; }
.phase-signal-readout strong.is-bid { color: var(--bid); }
.phase-signal-readout strong.is-ask { color: var(--ask); }
.phase-signal-readout strong.is-risk { color: var(--sell); }
.phase-signal-readout small { display: block; margin-top: 4px; color: #71808d; font-size: 8px; line-height: 1.45; }

.control-label {
  margin-right: 3px;
  color: #55616e;
  font-size: 8px;
  letter-spacing: .08em;
}

.group-button,
.action-button,
.icon-button {
  height: 27px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.group-button {
  min-width: 31px;
  padding: 0 6px;
  font-size: 9px;
}

.group-button:hover,
.action-button:hover,
.icon-button:hover { color: var(--text); border-color: var(--line-bright); }

.group-button.is-active {
  color: var(--bid);
  border-color: rgba(25, 211, 197, .35);
  background: rgba(25, 211, 197, .05);
}

.rows-control input,
.profile-control select,
.tick-control select {
  width: 82px;
  padding: 0 5px;
  color: #8f9aa6;
  font-size: 9px;
}

.rows-control input { height: 27px; border: 1px solid var(--line-bright); background: #080b0f; }

.profile-control select {
  width: 48px;
  color: var(--accent);
}

.tick-control select {
  width: 43px;
  color: var(--bid);
}


.market-stats {
  align-self: stretch;
  display: flex;
  align-items: center;
  margin-left: auto;
  border-left: 1px solid var(--line);
}

.stat {
  min-width: 78px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 0 9px;
  border-right: 1px solid var(--line);
}

.stat span {
  color: #505c68;
  font-size: 8px;
  letter-spacing: .08em;
}

.stat strong {
  color: #c9d0d8;
  font-size: 11px;
  font-weight: 600;
}

.stat strong.is-bid { color: var(--bid); }
.stat strong.is-ask { color: var(--ask); }
.stat strong.is-warn { color: var(--accent); }
.stat strong.is-stale { color: var(--sell); }

.top-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.action-button {
  padding: 0 8px;
  font-size: 9px;
}

.action-button.is-active {
  color: var(--buy);
  border-color: rgba(45, 226, 140, .35);
}

.action-button.is-paused {
  color: var(--accent);
  border-color: rgba(240, 200, 107, .42);
}

.action-button.danger-action { color: #d58b92; border-color: rgba(255, 91, 105, .24); }
.action-button.danger-action:hover:not(:disabled) { color: #ff9ca5; border-color: rgba(255, 91, 105, .58); }
.action-button:disabled { opacity: .3; cursor: not-allowed; }

.automation-menu { position: relative; }
.automation-menu.is-open .automation-panel { display: block; }
.automation-menu.is-running > .action-button { color: var(--accent); border-color: rgba(240,200,107,.5); }
.automation-panel { display: none; position: absolute; z-index: 18; top: calc(100% + 7px); right: 0; width: min(640px, calc(100vw - 24px)); padding: 8px; border: 1px solid var(--line-bright); background: #0b0e12; box-shadow: 0 18px 55px rgba(0,0,0,.8); }
.automation-heading, .automation-footer { display: flex; align-items: center; justify-content: space-between; min-height: 28px; color: var(--accent); font-size: 9px; letter-spacing: .08em; }
.automation-heading small, .automation-tool small, #automationStatus { color: var(--muted); font-size: 8px; font-weight: 400; letter-spacing: 0; }
.automation-venue-picker { display: grid; grid-template-columns: auto minmax(170px,240px) 1fr; gap: 8px; align-items: center; padding: 6px 2px 8px; color: var(--muted); font-size: 8px; }
.automation-venue-picker select { height: 25px; padding: 0 5px; border: 1px solid var(--line-bright); color: var(--text); background: #07090c; font-size: 9px; }
.automation-venue-picker small { color: var(--muted); font-size: 8px; }
.automation-tool { display: grid; grid-template-columns: minmax(120px,1fr) repeat(3,minmax(90px,auto)) 54px; gap: 7px; align-items: end; padding: 8px 2px; border-top: 1px solid var(--line); }
.automation-tool[data-tool="stalker"] { grid-template-columns: minmax(120px,1fr) repeat(5,minmax(65px,auto)) 54px; }
.automation-tool[data-tool="liq_guard"] { grid-template-columns: minmax(220px,1fr) repeat(2,minmax(90px,auto)) 54px; }
.automation-tool > div { display: grid; gap: 3px; }
.automation-tool label { display: grid; gap: 3px; color: var(--muted); font-size: 7px; }
.automation-tool input, .automation-tool select { width: 100%; height: 25px; padding: 0 5px; border: 1px solid var(--line-bright); color: var(--text); background: #07090c; font-size: 9px; }
.automation-tool button, .automation-footer button { height: 25px; border: 1px solid rgba(45,226,140,.3); color: var(--buy); background: transparent; font-size: 8px; cursor: pointer; }
.automation-tool.is-running { background: rgba(240,200,107,.035); }
.automation-tool.is-running button { color: var(--sell); border-color: rgba(255,91,105,.35); }
.automation-footer { border-top: 1px solid var(--line); }
.automation-footer button { padding: 0 9px; color: var(--sell); border-color: rgba(255,91,105,.3); }
@media (max-width: 850px) { .automation-tool, .automation-tool[data-tool="stalker"], .automation-tool[data-tool="liq_guard"] { grid-template-columns: 1fr 1fr; } .automation-venue-picker { grid-template-columns: auto 1fr; } .automation-venue-picker small { grid-column: 1 / -1; } }

.sound-button.is-sounding {
  color: var(--bid);
  border-color: rgba(25, 211, 197, .35);
  background: rgba(25, 211, 197, .05);
}

.icon-button {
  width: 29px;
  display: grid;
  place-items: center;
}

.icon-button svg {
  width: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.charts-link {
  height: 27px;
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  color: #6e7985;
  text-decoration: none;
  font-size: 9px;
}

.charts-link:hover { color: var(--text); }

.workspace {
  width: 100%;
  height: calc(var(--mattdom-viewport-height) - var(--site-nav-height) - var(--topbar-height));
  display: grid;
  grid-template-columns: minmax(500px, 1fr) clamp(178px, 19vw, 255px);
  overflow: hidden;
  background: var(--bg);
}

.book-stage,
.tape-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--panel);
}

.book-stage { border-right: 1px solid var(--line-bright); }

.phase-hud {
  position: absolute; z-index: 6; left: 8px; bottom: 29px; display: flex; align-items: stretch; gap: 5px;
  max-width: calc(100% - 16px); pointer-events: none;
}
.phase-hud[hidden], .phase-hud-block[hidden] { display: none; }
.phase-hud-block {
  min-width: 132px; padding: 5px 7px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 8px;
  border: 1px solid rgba(126,150,174,.25); background: rgba(6,9,13,.88); box-shadow: 0 4px 18px rgba(0,0,0,.38);
  backdrop-filter: blur(5px); font-family: "SFMono-Regular", Consolas, monospace;
}
.phase-hud-block > span { color: #596775; font-size: 7px; letter-spacing: .08em; }
.phase-hud-block > strong { color: #aeb9c4; font-size: 9px; text-align: right; white-space: nowrap; }
.phase-hud-block > strong.is-bid { color: var(--bid); }
.phase-hud-block > strong.is-ask { color: var(--ask); }
.phase-hud-block > strong.is-risk { color: var(--sell); }
.phase-hud-analog { min-width: 315px; }
.phase-hud-analog small { grid-column: 1 / 3; color: #758391; font-size: 8px; white-space: nowrap; }
@media (max-width: 760px) {
  .phase-hud { right: 8px; flex-wrap: wrap; }
  .phase-hud-block, .phase-hud-analog { min-width: 0; max-width: 100%; }
  .phase-hud-analog small { overflow: hidden; text-overflow: ellipsis; }
}

.book-stage canvas,
.tape-stage canvas {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  contain: size layout paint;
  touch-action: none;
}

.book-stage canvas { height: 100%; }

.book-hint {
  position: absolute;
  right: 8px;
  bottom: 5px;
  color: rgba(104, 116, 130, .6);
  font-size: 8px;
  letter-spacing: .05em;
  pointer-events: none;
}

.empty-state {
  position: absolute;
  inset: 28px 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #53606d;
  pointer-events: none;
}

.empty-state[hidden] { display: none; }

.empty-state strong { color: #85919d; font-size: 11px; letter-spacing: .08em; }
.empty-state span:last-child { font-size: 9px; }

.empty-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bid);
  animation: empty-pulse 1.2s steps(2, end) infinite;
}

@keyframes empty-pulse { 50% { opacity: .2; } }

.tape-stage {
  display: grid;
  grid-template-rows: 34px minmax(0, 1fr);
}

.tape-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 9px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}

.tape-titlebar > div { display: flex; align-items: baseline; gap: 8px; }
.tape-titlebar strong { color: #9aa5b0; font-size: 9px; letter-spacing: .08em; }
.tape-titlebar span { color: #5f6b77; font-size: 8px; }
.tape-bias #buyVolume { color: rgba(45, 226, 140, .78); }
.tape-bias #sellVolume { color: rgba(255, 91, 105, .78); }
.tape-stage canvas { height: 100%; }

.paused-banner {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 4;
  display: none;
  transform: translateX(-50%);
  padding: 7px 11px;
  border: 1px solid rgba(240, 200, 107, .4);
  color: var(--accent);
  background: rgba(7, 9, 12, .94);
  font-size: 9px;
  letter-spacing: .08em;
  pointer-events: none;
}

.paused-banner.is-visible { display: block; }

@media (max-width: 1220px) {
  .render-stat,
  .rows-control .control-label,
  .profile-control .control-label,
  .tick-control .control-label,
  .connection span:last-child { display: none; }
  .stat { min-width: 70px; padding-inline: 7px; }
  .workspace { grid-template-columns: minmax(470px, 1fr) clamp(170px, 20vw, 225px); }
}

@media (max-width: 980px) {
  :root { --site-nav-height: 40px; --topbar-height: 44px; }
  .site-nav { gap: 10px; padding-inline: 10px; }
  .topbar { gap: 6px; padding-inline: 7px; }
  .brand { padding-right: 7px; }
  .brand span:last-child { display: none; }
  .latency-stat,
  .rows-control,
  .charts-link { display: none; }
  .profile-control .control-label,
  .control-label { display: none; }
  .symbol-form input { width: 90px; }
  .stat { min-width: 64px; }
  .workspace { grid-template-columns: minmax(445px, 1fr) clamp(165px, 21vw, 205px); }
}

@media (max-width: 760px) {
  .market-stats .stat:not(:first-child) { display: none; }
  .group-button[data-group="1"] { display: none; }
  .workspace { grid-template-columns: minmax(420px, 1fr) 170px; }
  .book-hint { display: none; }
  .sound-button { width: 29px; overflow: hidden; color: transparent; }
  .sound-button::after { content: "♪"; color: var(--muted); }
  .sound-button.is-sounding::after { color: var(--bid); }
}

@media (prefers-reduced-motion: reduce) {
  .empty-pulse { animation: none; }
}