:root {
  --wood: #3b2a1a;
  --panel: #0e1412;
  --panel-2: #151c18;
  --panel-3: #1d251f;
  --black: #080b0a;
  --brass: #c4a35a;
  --brass-dark: #6f582e;
  --paper: #e7dfce;
  --muted: #82796a;
  --up: #3ddc84;
  --down: #e25555;
  --cyan: #65aeb1;
  --violet: #8d72e7;
  --pixel: "Press Start 2P", ui-monospace, monospace;
  --terminal: "VT323", ui-monospace, monospace;
}

* { box-sizing: border-box; border-radius: 0 !important; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #050706; color: var(--paper); font-family: var(--terminal); letter-spacing: 0; }
button, input { color: inherit; font: inherit; }
button { cursor: pointer; }

.trading-console {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--black);
}

.main-stack {
  min-width: 0;
  display: grid;
  grid-template-rows: 36px 96px 18px 24px minmax(0, 1fr);
  height: 100dvh;
  overflow: hidden;
}

#topHud, #wall, #plaque, #ticker, #walkFloor { min-width: 0; min-height: 0; }
#walkFloor { min-height: 0; overflow: hidden; }

.top-hud {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 0 10px;
  border: 2px solid #27302a;
  border-top: 0;
  background: #0a0e0c;
  overflow: hidden;
}

.hud-brand, .hud-market, .hud-actions, .hud-right { display: flex; align-items: center; white-space: nowrap; }
.hud-brand { gap: 9px; flex: 0 0 auto; }
.hud-brand strong, .hud-brand span, .desk-handle { font: 400 8px var(--pixel); }
.hud-brand strong { color: var(--paper); }.hud-brand .firm { color: var(--brass); }
.live-label { display: inline-flex; align-items: center; gap: 5px; color: var(--up) !important; }
.live-label i { width: 6px; height: 6px; background: var(--down); box-shadow: 0 0 8px var(--down); animation: pixelBlink 1s steps(2) infinite; }
.overnight { padding: 4px 6px; border: 1px solid #31473d; color: #7eb19b !important; background: #101b17; }
.desk-handle { color: var(--brass); }
.hud-actions { gap: 5px; margin-left: 8px; }
.hud-button { height: 25px; padding: 0 8px; border: 1px solid var(--brass-dark); background: #141713; color: var(--brass); font: 400 7px var(--pixel); white-space: nowrap; }
.hud-link { display: inline-flex; align-items: center; text-decoration: none; }
.hud-button:hover, .hud-button.active { border-color: var(--brass); background: #282314; color: #f0d991; }
.hud-right { gap: 13px; margin-left: auto; min-width: 0; color: #8b8274; font: 400 7px var(--pixel); }
.hud-stat b { margin-left: 4px; color: var(--paper); font-weight: 400; }.hud-stat .up { color: var(--up); }.hud-stat .down { color: var(--down); }
.hud-clock { color: var(--brass); font-size: 9px; }

.wall-monitors {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1.32fr) minmax(0,1.08fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.45fr) minmax(0,.34fr);
  min-width: 0;
  min-height: 0;
  height: 96px;
  overflow: hidden;
  border-bottom: 2px solid #1c1712;
  background: #493829;
}
.wall-monitors::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(20,15,11,.16) 0 3px, transparent 3px 18px); }
.monitor-cell { position: relative; z-index: 1; min-width: 0; min-height: 0; padding: 8px; border-right: 2px solid #2a2118; overflow: hidden; }
.monitor-label { color: var(--brass); font: 400 6px var(--pixel); }
.window-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; height: 100%; }
.night-window { position: relative; border: 4px solid #2a1a16; background: #0d1830; overflow: hidden; }
.night-window::before { content: ""; position: absolute; width: 16px; height: 16px; top: 13px; right: 18px; background: #e5d68b; box-shadow: 6px -5px 0 #0d1830; }
.night-window::after { content: ""; position: absolute; inset: auto 0 0; height: 32px; background: repeating-linear-gradient(90deg, #14213a 0 14px, #0a1020 14px 22px); border-top: 2px solid #243452; }
.main-chart svg { width: 100%; height: 48px; margin-top: 3px; overflow: visible; }.main-chart polyline { fill: none; stroke: var(--up); stroke-width: 3; vector-effect: non-scaling-stroke; }.chart-axis { stroke: #665948; stroke-width: 1; }.chart-meta { display: flex; justify-content: space-between; color: #c5baa5; font-size: 14px; line-height: 13px; }.chart-meta b { color: var(--up); font-weight: 400; }
.heat-wrap { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; gap: 3px; height: 46px; margin: 4px 0 3px; }.heat-wrap i { display: grid; place-items: center; font: normal 11px var(--terminal); color: #101310; background: var(--heat); border: 1px solid rgba(0,0,0,.25); }
.heat-meta { display: flex; justify-content: space-between; font-size: 12px; line-height: 12px; color: #b7ab98; }.heat-meta b { color: var(--up); font-weight: 400; }
.quote-table { width: 100%; table-layout: fixed; margin-top: 2px; border-collapse: collapse; font-size: 10px; line-height: 9px; }.quote-table th { color: #817766; font-weight: 400; text-align: left; }.quote-table th:nth-child(2), .quote-table td:nth-child(2) { width: 52px; }.quote-table th:nth-child(3), .quote-table td:nth-child(3) { width: 64px; }.quote-table td { height: 10px; overflow: hidden; white-space: nowrap; text-overflow: clip; }.quote-table td:nth-child(n+2), .quote-table th:nth-child(n+2) { text-align: right; }.quote-table .up { color: var(--up); }.quote-table .down { color: var(--down); }
.clock-cell { display: grid; place-items: center; padding: 5px; }.pixel-clock { position: relative; width: 64px; height: 64px; border: 5px solid #201b17; border-radius: 50% !important; background: #d8d0bf; box-shadow: inset 0 0 0 2px #766b5b; }.clock-mark { position: absolute; color: #51493e; font: 400 5px var(--pixel); }.mark-12 { top: 5px; left: 50%; transform: translateX(-50%); }.mark-3 { top: 26px; right: 5px; }.mark-6 { bottom: 4px; left: 50%; transform: translateX(-50%); }.mark-9 { top: 26px; left: 5px; }.clock-hand { position: absolute; left: 29px; bottom: 29px; z-index: 2; width: 3px; transform-origin: 50% 100%; background: #2b2520; }.clock-hand.hour { height: 16px; }.clock-hand.minute { height: 22px; background: #80483d; }.clock-hand.second { left: 30px; bottom: 29px; width: 1px; height: 25px; background: #b64d43; }.clock-pin { position: absolute; z-index: 3; left: 26px; top: 26px; width: 7px; height: 7px; background: #2b2520; border-radius: 50% !important; }
.bell-cell { display: grid; place-items: center; padding: 4px; }.brass-bell { display: grid; place-items: center; align-content: center; gap: 3px; width: 58px; height: 72px; padding: 4px; border: 2px solid #594016; background: #231b10; color: var(--brass); box-shadow: inset 0 0 0 3px #7a5e26; }.brass-bell:hover { background: #3a2d16; color: #f3d879; }.brass-bell small { font: 400 5px var(--pixel); }.bell-shape { position: relative; display: block; width: 36px; height: 39px; }.bell-shape i { position: absolute; display: block; background: currentColor; }.bell-crown { top: 1px; left: 14px; width: 8px; height: 5px; }.bell-body { top: 6px; left: 7px; width: 22px; height: 24px; clip-path: polygon(30% 0,70% 0,100% 100%,0 100%); }.bell-lip { top: 29px; left: 3px; width: 30px; height: 5px; }.bell-clapper { top: 34px; left: 14px; width: 8px; height: 5px; }
.capital-plaque { display: flex; align-items: center; max-width: 420px; width: max-content; height: 18px; max-height: 18px; overflow: hidden; padding: 2px 14px; border: 2px solid #56411d; background: #3a2a1c; color: var(--brass); font: 400 6px var(--pixel); line-height: 10px; white-space: nowrap; }
#plaque { position: relative; z-index: 10; isolation: isolate; display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; background: #3a2a1c; }

.ticker-tape { display: flex; align-items: center; width: 100%; height: 24px; min-height: 24px; overflow: hidden; border-block: 2px solid #2b2418; background: #080a09; }
.ticker-track { display: flex; flex: none; min-width: 100%; }.ticker-track.paused { opacity: .78; }
.ticker-item { display: flex; align-items: center; gap: 7px; min-width: 125px; height: 20px; padding: 0 10px; border-right: 1px solid #29271f; font: 400 7px var(--pixel); }.ticker-symbol { color: var(--brass); }.ticker-price { color: #bdb4a2; }.ticker-change.up { color: var(--up); }.ticker-change.down { color: var(--down); }

.walk-floor { position: relative; width: 100%; height: 100%; min-height: 0; overflow: auto; background: var(--wood); touch-action: pan-x pan-y; }
.floor-background { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 820px; min-height: 480px; object-fit: fill; image-rendering: pixelated; user-select: none; pointer-events: none; }
.floor-layer { position: absolute; inset: 0; min-width: 820px; min-height: 480px; }
.floor-layer::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(6,4,3,.1) 3px 4px); }
.workstation-name { position: absolute; z-index: 12; transform: translate(-50%, -50%); min-width: 54px; padding: 4px 6px 3px; border: 2px solid #4e3817; background: #b59246; color: #26180b; font: 400 6px var(--pixel); text-align: center; white-space: nowrap; pointer-events: none; }
.agent-piece { position: absolute; width: 80px; height: 108px; padding: 0; border: 0; background: transparent; transform: translate(-50%, -100%); will-change: left, top; }
.agent-piece .sprite { position: absolute; left: 4px; top: 20px; width: 72px; height: 72px; background-repeat: no-repeat; background-size: 360px 72px; image-rendering: pixelated; transform-origin: center; }
.agent-piece .selection-ring { position: absolute; left: 2px; bottom: 0; width: 76px; height: 23px; border: 3px solid var(--brass); border-radius: 50% !important; opacity: 0; box-shadow: 0 0 8px rgba(196,163,90,.8); }
.agent-piece.selected .selection-ring { opacity: 1; animation: ringPulse 1.1s steps(2) infinite; }
.agent-piece .agent-tag { position: absolute; left: 50%; top: 94px; transform: translateX(-50%); padding: 3px 4px 2px; border: 1px solid var(--agent-color); background: #0b0d0c; color: var(--agent-color); font: 400 5px var(--pixel); white-space: nowrap; }
.agent-piece[data-agent="tape"], .agent-piece[data-agent="quant"], .agent-piece[data-agent="risk"], .agent-piece[data-agent="flow"] { transform: translate(-50%, calc(-100% + 56px)); }
.speech-bubble { position: absolute; left: 50%; bottom: 108px; transform: translateX(-50%); min-width: max-content; padding: 5px 7px 4px; border: 2px solid #5c441d; background: #e1c06c; color: #281a0d; font: 400 6px var(--pixel); opacity: 0; pointer-events: none; }
.speech-bubble::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 7px; height: 7px; border-right: 2px solid #5c441d; border-bottom: 2px solid #5c441d; background: #e1c06c; transform: translateX(-50%) rotate(45deg); }
.speech-bubble.show { opacity: 1; }
.floor-prop { position: absolute; z-index: 14; transform: translate(-50%, -50%); padding: 5px 7px 4px; border: 2px solid #59421b; background: #17140e; color: var(--brass); font: 400 6px var(--pixel); white-space: nowrap; }.floor-prop:hover { background: var(--brass); color: #26190b; }
.prop-offer { left: 80%; top: 72%; }.prop-risk { left: 74%; top: 54%; }.prop-call { left: 84%; top: 91%; }.prop-comms { left: 88%; top: 20%; }.prop-comms.lit { color: #f3d879; border-color: #d6b15a; box-shadow: 0 0 8px rgba(61,220,132,.8); }
.screen-animation { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; }
.desk-props { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.desk-prop { position: absolute; width: 24px; height: 14px; transform: translate(-50%, -50%); border: 2px solid #273a35; background: #08100e; box-shadow: inset 0 0 0 2px #15231e; }
.desk-prop::before { content: ""; position: absolute; left: 4px; right: 4px; top: 4px; height: 2px; background: #3ddc84; box-shadow: 3px 4px #e25555; }
.desk-prop::after { content: ""; position: absolute; right: -5px; bottom: -4px; width: 7px; height: 3px; background: #b8953f; }
.routing-marker { position: absolute; z-index: 13; width: 18px; height: 18px; transform: translate(-50%,-50%) rotate(45deg); border: 3px solid var(--brass); opacity: 0; pointer-events: none; }.routing-marker.show { opacity: 1; animation: routePing .8s steps(2) infinite; }

.side-dock { width: 300px; min-width: 300px; height: 100%; min-height: 0; display: flex; flex-direction: column; border-left: 2px solid #2c352f; background: var(--panel); overflow: hidden; }
.dock-handle { display: none; }
.dock-section { min-width: 0; min-height: 0; border-bottom: 2px solid #2a332d; background: var(--panel); overflow: hidden; }
.dock-heading { display: flex; align-items: center; justify-content: space-between; height: 29px; padding: 0 9px; border-bottom: 1px solid #29322c; color: var(--brass); font: 400 7px var(--pixel); }.dock-heading em { color: var(--muted); font: normal 12px var(--terminal); }.squawk-tools { display: flex; align-items: center; gap: 7px; }.squawk-all { height: 19px; padding: 0 5px; border: 1px solid var(--brass-dark); background: #141713; color: var(--muted); font: 400 6px var(--pixel); }.squawk-all:hover, .squawk-all.active { border-color: var(--brass); color: var(--brass); background: #282314; }
.bot-card { flex: 0 0 104px; min-height: 104px; padding: 8px 10px; }.bot-ident { display: flex; align-items: flex-start; gap: 9px; }.bot-avatar { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border: 2px solid var(--brass); background: #18241d; color: var(--brass); font: 400 8px var(--pixel); }.bot-ident div { min-width: 0; }.bot-ident strong, .bot-role, .bot-location { display: block; }.bot-ident strong { font: 400 7px var(--pixel); white-space: nowrap; }.bot-role { color: var(--paper); font: 400 15px var(--terminal); line-height: 1; white-space: normal; }.bot-location { color: var(--up); font-size: 15px; line-height: 1; white-space: normal; }.bot-charter { margin: 6px 0 0; color: #a9a08e; font-size: 13px; line-height: 1.05; white-space: normal; overflow-wrap: anywhere; }
.roster { flex: 0 0 225px; overflow: hidden; }.roster-list { display: grid; }.roster-row { display: grid; grid-template-columns: 9px 72px minmax(0,1fr) 54px; align-items: center; gap: 7px; height: 28px; min-height: 28px; padding: 0 9px; border: 0; border-bottom: 1px solid #232b26; background: transparent; text-align: left; }.roster-row:hover { background: #19211c; }.roster-row.selected { box-shadow: inset 3px 0 var(--agent-color); background: #1b241e; }.roster-color { width: 8px; height: 8px; background: var(--agent-color); }.roster-row b { overflow: visible; font: 400 6px var(--pixel); white-space: nowrap; }.roster-row span { min-width: 0; color: #8f8676; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.roster-row em { color: var(--pnl-color); font-style: normal; font-size: 13px; white-space: nowrap; text-align: right; }
.squawk { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }.squawk-list { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow-y: auto; padding: 5px 8px; }.squawk-line { display: grid; flex: 1 0 22px; grid-template-columns: 37px 48px minmax(0,1fr); align-items: center; gap: 5px; min-height: 22px; color: #8b8274; font-size: 12px; line-height: 1.15; }.squawk-line time { color: #575f58; }.squawk-line b { color: var(--log-color); font-weight: 400; white-space: nowrap; }.squawk-line span { min-width: 0; overflow-wrap: anywhere; }
.order-panel { flex: 0 0 244px; flex-shrink: 0; min-height: 244px; display: grid; grid-template-rows: 29px 1fr 56px 28px; }.book-table { width: 100%; min-height: 0; padding: 5px 9px; font-size: 12px; }.book-row { display: grid; grid-template-columns: 1fr 1fr 1fr; position: relative; text-align: right; height: 14px; }.book-row i { position: absolute; right: 0; top: 1px; bottom: 1px; width: var(--depth); background: var(--book-color); opacity: .12; }.book-row span:first-of-type { text-align: left; }.book-row.ask span:nth-of-type(2) { color: var(--down); }.book-row.bid span:nth-of-type(2) { color: var(--up); }
.mini-pnl { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; align-items: start; gap: 0; padding: 4px 9px 0; border-top: 1px solid #263029; overflow: hidden; }.mini-pnl span { z-index: 2; color: #837969; font: 400 6px var(--pixel); white-space: nowrap; }.mini-pnl svg { grid-area: 1; align-self: end; width: 100%; height: 27px; }.mini-pnl polyline { fill: none; stroke: var(--up); stroke-width: 2; vector-effect: non-scaling-stroke; }
.market-progress { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; padding: 0 9px; border-top: 1px solid #263029; color: #827866; font: 400 6px var(--pixel); }.progress-track { height: 5px; background: #28302b; }.progress-track i { display: block; width: var(--progress); height: 100%; background: var(--brass); }

.brief-modal { position: fixed; z-index: 1000; inset: 0; display: none; place-items: center; padding: 18px; background: rgba(4,6,5,.86); }.brief-modal.open { display: grid; }.brief-dialog { width: min(620px, 100%); border: 2px solid var(--brass); background: var(--panel); box-shadow: 10px 10px #040605; }.brief-header { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 11px; border-bottom: 2px solid #3e3420; color: var(--brass); font: 400 8px var(--pixel); }.brief-actions { display: flex; align-items: center; gap: 5px; }.brief-action { height: 25px; border: 1px solid #5f4b28; background: #171b17; color: var(--brass); padding: 0 7px; font: 400 6px var(--pixel); }.brief-action:disabled { color: #817766; border-color: #3e3420; }.brief-close { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #5f4b28; background: #171b17; color: var(--paper); font-size: 18px; }.brief-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }.brief-copy, .brief-signals { padding: 16px; }.brief-copy { border-right: 1px solid #30382f; }.brief-kicker { color: var(--up); font: 400 7px var(--pixel); }.brief-body h2 { margin: 12px 0; font: 400 15px var(--pixel); }.brief-body p { color: #afa590; font-size: 18px; line-height: 1.25; }.brief-signal { display: flex; justify-content: space-between; min-height: 28px; align-items: center; border-bottom: 1px solid #283029; color: #8c8271; font-size: 15px; }.brief-signal b { color: var(--paper); font-weight: 400; }

@keyframes pixelBlink { 50% { opacity: .2; } }
@keyframes ringPulse { 50% { opacity: .35; } }
@keyframes routePing { 50% { transform: translate(-50%,-50%) rotate(45deg) scale(1.35); opacity: .35; } }

@media (max-width: 1300px) {
  .trading-console { grid-template-columns: minmax(0,1fr) 300px; }.hud-brand .firm, .overnight, .desk-handle { display: none; }.hud-right { gap: 8px; }.hud-actions { margin-left: 0; }
  .prop-risk { left: 79%; top: 58%; }
}

@media (max-width: 820px) {
  .trading-console { display: block; }.main-stack { width: 100%; }.top-hud { gap: 6px; padding: 0 6px; overflow-x: auto; }.hud-brand strong, .hud-brand span, .desk-handle { font-size: 6px; }.desk-handle { display: none; }.hud-actions { order: 3; }.hud-button { padding-inline: 6px; font-size: 6px; }.hud-right { margin-left: auto; }.hud-stat:nth-child(-n+3) { display: none; }
  .wall-monitors { grid-template-columns: 235px 190px 170px 180px 85px 70px; overflow-x: auto; }.capital-plaque { left: 365px; transform: none; }
  .walk-floor { padding-bottom: 36px; }.floor-background, .floor-layer { min-width: 940px; }
  .side-dock { position: fixed; z-index: 500; left: 0; right: 0; bottom: 0; width: 100%; height: min(62dvh, 620px); grid-template-rows: 88px 180px minmax(70px,1fr) 165px; border: 2px solid #3c493f; border-bottom: 0; overflow: visible; transform: translateY(100%); transition: transform .22s steps(4); }.side-dock.open { transform: translateY(0); }.dock-handle { position: absolute; z-index: 3; top: -36px; left: 50%; display: flex; align-items: center; justify-content: center; gap: 8px; width: 160px; height: 36px; transform: translateX(-50%); border: 2px solid #3c493f; border-bottom: 0; background: var(--panel); color: var(--brass); font: 400 6px var(--pixel); }.dock-handle::before { content: ""; width: 8px; height: 8px; background: var(--up); }
  .brief-body { grid-template-columns: 1fr; }.brief-copy { border-right: 0; border-bottom: 1px solid #30382f; }
}

@media (max-width: 520px) {
  .hud-brand .live-label { display: none; }.hud-right .hud-stat { display: none; }.hud-clock { font-size: 7px; }
  .main-stack { grid-template-rows: 36px 96px 18px 24px auto; }.wall-monitors { grid-template-columns: 220px 180px 165px 170px 78px 65px; }.walk-floor { height: min(calc(100vw * .667), calc(100dvh - 174px)); overflow: hidden; }.floor-background, .floor-layer { min-width: 0; min-height: 0; width: 100%; height: 100%; }.floor-layer { --floor-scale: .45; }.agent-piece { transform: translate(-50%, -100%) scale(var(--floor-scale, 1)); }.agent-piece[data-agent="tape"], .agent-piece[data-agent="quant"], .agent-piece[data-agent="risk"], .agent-piece[data-agent="flow"] { transform: translate(-50%, calc(-100% + 56px)) scale(var(--floor-scale, 1)); }.workstation-name, .floor-prop { font-size: 4px; }.floor-prop { padding: 3px 4px; border-width: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track, .live-label i, .agent-piece.selected .selection-ring, .routing-marker.show { animation: none !important; }
}

/* Operations console refresh: preserve the floor art while sharpening the data surfaces. */
:root {
  --wood: #26383b;
  --panel: #0d171d;
  --panel-2: #14232b;
  --panel-3: #1c3037;
  --black: #060d12;
  --brass: #f0bd68;
  --brass-dark: #8a6631;
  --paper: #e8f1ef;
  --muted: #789094;
  --up: #46e6a0;
  --down: #ff6b73;
  --cyan: #5fd5da;
  --violet: #b49cff;
}

body { background: #060d12; }
.trading-console { grid-template-columns: minmax(0, 1fr) 344px; gap: 12px; padding: 12px; background: #060d12; }
.main-stack { grid-template-rows: 56px 118px 34px minmax(0, 1fr); gap: 8px; height: calc(100dvh - 24px); }
#topHud, #wall, #plaque, #ticker, #walkFloor { border: 1px solid #263d46; border-radius: 8px !important; }

.top-hud { height: 56px; padding: 0 16px; gap: 16px; border: 1px solid #2a4650; border-radius: 8px !important; background: #101c24; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.hud-brand { gap: 10px; }
.hud-brand strong { color: var(--paper); font-size: 9px; }
.hud-brand .firm { color: var(--cyan); font-size: 7px; }
.live-label { padding: 5px 7px; border: 1px solid #245e52; border-radius: 5px !important; background: #10271f; font-size: 7px !important; }
.live-label i { width: 7px; height: 7px; background: var(--up); box-shadow: 0 0 10px rgba(70,230,160,.8); }
.overnight { border-color: #35515a; border-radius: 4px !important; color: var(--cyan) !important; background: #152630; }
.hud-actions { gap: 7px; margin-left: 4px; }
.hud-button { height: 30px; padding: 0 10px; border: 1px solid #35515b; border-radius: 5px !important; background: #14242c; color: #b8d1d1; font-size: 6px; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.hud-button:hover, .hud-button.active { border-color: var(--cyan); background: #18343a; color: #e6ffff; }
.hud-right { gap: 14px; color: var(--muted); }
.hud-stat b { color: var(--paper); }
.hud-clock { color: var(--brass); }

.wall-monitors { height: 118px; grid-template-columns: minmax(0,1.28fr) minmax(0,1.18fr) minmax(0,1.06fr) minmax(0,1fr) 86px 70px; border: 1px solid #2b4650; border-radius: 8px !important; background: #13242b; }
.wall-monitors::before { background: repeating-linear-gradient(90deg, rgba(95,213,218,.035) 0 1px, transparent 1px 20px); }
.monitor-cell { padding: 10px; border-right: 1px solid #29434a; }
.monitor-label { color: var(--cyan); font-size: 6px; letter-spacing: .4px; }
.night-window { border: 3px solid #1c333d; background: #0c1b29; }
.night-window::before { background: #f3d88d; box-shadow: 6px -5px 0 #0c1b29; }
.night-window::after { background: repeating-linear-gradient(90deg, #122b3a 0 14px, #0a1721 14px 22px); border-top-color: #24424e; }
.night-window::before { display: none; }
.night-window svg { position: absolute; z-index: 2; inset: 5px 6px 7px; width: calc(100% - 12px); height: calc(100% - 12px); }
.night-window polyline { fill: none; stroke: var(--up); stroke-width: 2.2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 2px rgba(56,227,158,.65)); }
.night-window b { position: absolute; z-index: 3; left: 5px; top: 4px; color: var(--cyan); font: 400 5px var(--pixel); white-space: nowrap; }
@keyframes windowSignal { 50% { transform: scaleX(.72); transform-origin: left; opacity: .72; } }
.main-chart { display: grid; grid-template-rows: auto 1fr auto; row-gap: 4px; }
.main-chart svg { height: 62px; margin-top: 0; }
.main-chart polyline { stroke: var(--cyan); stroke-width: 2.5; }
.chart-axis { stroke: #39515a; }
.chart-meta { color: #c0d4d4; font-size: 11px; line-height: 12px; letter-spacing: .15px; }
.chart-meta span { color: #a9c1c2; }
.chart-meta b { min-width: 42px; text-align: right; }
.heat-wrap i { border-color: rgba(255,255,255,.13); }
.heat-meta { color: #91a9ab; }
.quote-table th { color: #6f898e; }
.quote-table td { height: 13px; }
.clock-cell { background: #0f1e25; }
.pixel-clock { border-color: #1a3038; background: #d9e4df; box-shadow: inset 0 0 0 2px #789095; }
.bell-cell { background: #14252c; }
.brass-bell { border-color: #785a2d; background: #17242a; box-shadow: inset 0 0 0 3px #9b7437; }

#plaque { background: #0f1b22; }
.capital-plaque { height: 22px; max-height: 22px; padding: 3px 13px; border: 1px solid #3b5b61; border-radius: 5px !important; background: #162a31; color: var(--brass); font-size: 6px; }
.ticker-tape { height: 34px; min-height: 34px; border: 1px solid #29464d; border-radius: 8px !important; background: #0b151b; }
.ticker-item { min-width: 176px; height: 32px; padding: 0 14px; border-right: 1px solid #243b42; gap: 9px; font-size: 7px; }
.ticker-symbol { color: var(--brass); }
.ticker-price { color: #d5e4e1; }

.walk-floor { border-color: #2b4650 !important; border-radius: 8px !important; box-shadow: 0 12px 30px rgba(0,0,0,.24); }
.floor-layer::after { background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(7,14,18,.12) 3px 4px); }
.workstation-name { border: 1px solid #3b5f63; border-radius: 4px !important; background: #1a3438; color: #bce5dc; }
.floor-prop { border: 1px solid #416269; border-radius: 5px !important; background: #102027; color: var(--cyan); }
.floor-prop:hover { background: #1d4650; color: #e7ffff; }
.agent-piece .agent-tag { border-radius: 4px !important; background: #0e1b21; }
.speech-bubble { border: 1px solid #558187; border-radius: 5px !important; background: #d9ba6d; }

.side-dock { width: 344px; min-width: 344px; border: 1px solid #2a4650; border-radius: 8px !important; background: #0c171d; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.dock-section { border-bottom: 1px solid #243e46; background: #0c171d; }
.dock-heading { height: 36px; padding: 0 13px; border-bottom-color: #29434a; color: var(--cyan); font-size: 7px; }
.dock-heading em { color: #6e888d; }
.squawk-all { height: 23px; border: 1px solid #35555d; border-radius: 4px !important; background: #12242b; color: #8eaaad; }
.squawk-all:hover, .squawk-all.active { border-color: var(--cyan); background: #183740; color: #e6ffff; }
.bot-card { flex-basis: 116px; min-height: 116px; padding: 12px 13px; }
.bot-avatar { width: 42px; height: 42px; flex-basis: 42px; border: 1px solid var(--brass); border-radius: 6px !important; background: #173039; }
.bot-role { color: var(--paper); font-size: 17px; }
.bot-location { color: var(--up); }
.bot-charter { color: #9cb4b5; }
.roster { flex-basis: 132px; }
.roster-row { height: 30px; min-height: 30px; padding: 0 13px; border-bottom-color: #20363d; }
.roster-row:hover, .roster-row.selected { background: #152a31; }
.roster-color { border-radius: 2px !important; }
.squawk-list { padding: 7px 12px; }
.squawk-line { grid-template-columns: 40px 58px minmax(0,1fr); min-height: 24px; font-size: 13px; }
.squawk-line time { color: #5c777c; }
.order-panel { flex-basis: 260px; min-height: 260px; }
.book-table { padding: 7px 13px; }
.mini-pnl, .market-progress { padding-inline: 13px; border-top-color: #243e46; }
.mini-pnl > span, .market-progress > span { white-space: nowrap; }
.progress-track { background: #1b343b; }

@media (max-width: 1300px) {
  .trading-console { grid-template-columns: minmax(0,1fr) 320px; }
  .side-dock { width: 320px; min-width: 320px; }
  .hud-right { gap: 8px; }
}

@media (max-width: 820px) {
  .trading-console { padding: 7px; gap: 7px; }
  .main-stack { height: calc(100dvh - 14px); gap: 6px; grid-template-rows: 48px 104px 26px 30px minmax(0,1fr); }
  .top-hud { height: 48px; padding: 0 10px; gap: 8px; }
  .hud-button { height: 27px; padding-inline: 8px; }
  .wall-monitors { height: 104px; }
  .monitor-cell { padding: 8px; }
  .ticker-tape { height: 30px; min-height: 30px; }
  .ticker-item { height: 28px; min-width: 160px; padding-inline: 11px; }
  .side-dock { width: 100%; min-width: 0; left: 0; right: 0; border-radius: 8px 8px 0 0 !important; }
}

/* Keep the trading-floor composition intact in narrow preview panes; users can scroll horizontally. */
@media (max-width: 820px) {
  body { overflow-x: auto; }
  .trading-console { min-width: 1080px; grid-template-columns: minmax(0, 1fr) 344px; }
  .main-stack { height: calc(100dvh - 14px); }
  .side-dock { position: static; width: 344px; min-width: 344px; height: 100%; transform: none; border-radius: 8px !important; }
  .dock-handle { display: none; }
}