: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: 68%; top: 62%; }.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); }
.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: 62px 1fr; align-items: center; gap: 4px; padding: 0 9px; border-top: 1px solid #263029; }.mini-pnl span { color: #837969; font: 400 6px var(--pixel); }.mini-pnl svg { width: 100%; height: 37px; }.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-button:nth-child(2) { display: none; }.hud-right .hud-stat { display: none; }.hud-clock { font-size: 7px; }
  .main-stack { grid-template-rows: 36px 96px 18px 24px minmax(0,1fr); }.wall-monitors { grid-template-columns: 220px 180px 165px 170px 78px 65px; }.floor-background, .floor-layer { min-width: 820px; }.floor-prop { font-size: 5px; }
}

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