/* The QUIT TRADING BOT app (runtime/quit/trading-bot.js), built from the approved redesign (bot-app/design/v1: S1 DESK,
   S2 SIGNALS, S3 TRADES, S4 FURNACE with the RECORD, S5 SECURITY; P1 and P2 on a phone) with the owner's D1 changes
   (LIVE or OFF, keys the holder signs in their own wallet, the security plate split into CAN and CANNOT, live data only).
   A terminal inside the $QUIT pixel office: near-black and forest-green steel with rivets (community-art/panel.webp), CRT
   glass with fine scanlines, mint for live and positive, safety orange for titles and actions, a muted red for losses
   only, cream paper, brass for the furnace and the vault. The art plates (bot-art/app-*.webp) carry no words; every word
   and figure is set here over them, in percent of the plate. The app's title, its big primary heading, in the design's
   heavy condensed pixel face (Jersey 20, /theme/fonts/jersey.css); every other title, tab, key, label and figure in the
   readable display face, lines and readouts
   in the body face (owner order, 25 Oct 2026: the pixel face only for really big primary headings; the body face is
   sized to VT323's metrics, so every line keeps its fit). The layout follows the app's
   own width (container qb): one row of header from 1240 px, two columns from 980 px, one column under that, and the
   phone frames (P1, P2) under 720 px. */
/* Keep the home plate and phone rail in the flow before mount and while the host is empty.
   The host can still grow when the app opens or its content needs more room. */
.q-bot-floor { container: qb-floor / inline-size; }
.q-bot-floor__host { min-height: calc(200cqw / 3); }
@container qb-floor (max-width: 719px) {
  .q-bot-floor__host { min-height: calc(200cqw / 3 + 269.3px); }
}

.qb-app {
  --qb-mint: #3ceb86;
  --qb-mint-hi: #7dffb4;
  --qb-mint-deep: #1f7a4a;
  --qb-orange: #ff6a13;
  --qb-orange-hi: #ff8a3d;
  --qb-orange-deep: #5c1d02;
  --qb-red: #ff4f5a;
  --qb-cream: #f1e6c8;
  --qb-brass: #c9a24b;
  --qb-steel: #0b120e;
  --qb-well: #040906;
  --qb-line: #24402f;
  --qb-muted: #a9bca9;
  --qb-title: "Jersey 20", "Arial Narrow", "Roboto Condensed", "Liberation Sans Narrow", "DejaVu Sans Condensed", Impact, sans-serif;
  --qb-display: var(--t-font-display, "QUIT Display", monospace);
  --qb-mono: var(--t-font-body, "IBM Plex Mono", monospace);
  /* The readable display face is wider than the condensed pixel face it replaces (.6 em a character against about .42):
     set at the pixel face's sizes, it is scaled to an x-height of .37 em (about .72 of its size), which keeps every word
     on its key, tab and plate. */
  --qb-display-adjust: .37;
  --qb-scan: repeating-linear-gradient(to bottom, rgb(255 255 255 / .028) 0 1px, transparent 1px 3px);
  --qb-rivets:
    radial-gradient(circle at 9px 9px, #5b625a 0 2px, #1a1f1b 2.5px 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 9px) 9px, #5b625a 0 2px, #1a1f1b 2.5px 3.5px, transparent 4px),
    radial-gradient(circle at 9px calc(100% - 9px), #5b625a 0 2px, #1a1f1b 2.5px 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #5b625a 0 2px, #1a1f1b 2.5px 3.5px, transparent 4px);
  box-sizing: border-box;
  position: relative;
  display: grid;
  gap: 10px;
  width: min(1536px, calc(100% - 24px));
  margin: 18px auto 24px;
  padding: 6px 8px 12px;
  border-style: solid;
  border-color: transparent;
  border-width: 22px 16px;
  border-image: url("community-art/panel.webp") 60 / 40px stretch;
  border-radius: 12px;
  background: radial-gradient(120% 60% at 50% 0%, rgb(255 106 19 / .05), transparent 60%), var(--qb-steel);
  color: var(--qb-cream);
  font: 400 22px/1.2 var(--qb-mono);
  container: qb / inline-size;
  scroll-margin-top: calc(var(--t-header-desktop, 72px) + 12px);
  font-size-adjust: none;
}
.qb-app[hidden] { display: none; }
.qb-app *, .qb-app *::before, .qb-app *::after { box-sizing: border-box; }
.qb-app :where(h3, h4, p, ol, ul, dl, dd, dt) { margin: 0; }
.qb-app :where(ol, ul) { padding: 0; list-style: none; }
.qb-app :where(a) { color: inherit; }
.qb-app :where(button, input) { font: inherit; }
.qb-app :is(a, button, input):focus-visible { outline: 3px solid #ffe36b; outline-offset: 2px; }
.qb-app [hidden] { display: none !important; }
.qb-app img { display: block; width: 100%; height: auto; }
.qb-app:focus { outline: none; }

/* ------------------------------------------------------------ keys */
.qb-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 18px 4px;
  border: 3px solid #071009;
  border-radius: 6px;
  background: linear-gradient(180deg, #1a2a1f, #0d1712);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / .12), inset 0 -4px 0 rgb(0 0 0 / .45), 0 3px 0 #020403;
  color: var(--qb-cream);
  font: 400 26px/1 var(--qb-display);
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-size-adjust: var(--qb-display-adjust);
}
.qb-key:disabled { cursor: not-allowed; filter: saturate(.35) brightness(.72); }
.qb-key--orange { border-color: #5c1d02; background: linear-gradient(180deg, var(--qb-orange-hi), var(--qb-orange) 55%, #c94505); color: #fff8ec; text-shadow: 0 2px 0 #7a2602; box-shadow: inset 0 3px 0 rgb(255 220 170 / .45), inset 0 -5px 0 rgb(120 35 0 / .55), 0 4px 0 #4a1701, 0 0 18px rgb(255 106 19 / .35); }
.qb-key--big { width: 100%; min-height: 96px; border-width: 4px; font-size: clamp(34px, 3.2cqw, 48px); text-shadow: 0 3px 0 #7a2602, 0 0 2px #7a2602; }
.qb-key--mint { border-color: var(--qb-mint); background: #062014; color: var(--qb-mint); box-shadow: inset 0 0 12px rgb(60 235 134 / .25); }
.qb-key--red { border-color: #b23a35; background: #1f0705; color: #ff6f66; box-shadow: inset 0 0 12px rgb(229 72 77 / .2); }
.qb-key--outline { border: 3px solid var(--qb-mint); background: rgb(3 18 10 / .6); color: var(--qb-mint); box-shadow: inset 0 0 10px rgb(60 235 134 / .18); }
.qb-key--brass { border-color: #4d3a0e; background: linear-gradient(180deg, #ecca76, var(--qb-brass) 55%, #8f6f22); color: #1b1304; text-shadow: 0 1px 0 rgb(255 240 200 / .5); box-shadow: inset 0 3px 0 rgb(255 245 210 / .5), inset 0 -5px 0 rgb(80 55 0 / .5), 0 4px 0 #3a2a06; }

/* ------------------------------------------------------------ plates: riveted steel around a scanlined well */
.qb-plate {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 14px 18px 16px;
  border: 3px solid #050806;
  border-radius: 10px;
  background: var(--qb-rivets), var(--qb-scan), var(--qb-well);
  box-shadow: inset 0 0 0 3px #1a241d, inset 0 0 0 5px #050806, 0 2px 0 #020403;
}
.qb-plate__title { color: var(--qb-orange); font: 400 clamp(32px, 2.6cqw, 40px)/.95 var(--qb-display); letter-spacing: .01em; text-shadow: 0 3px 0 var(--qb-orange-deep); font-size-adjust: var(--qb-display-adjust); }

/* ------------------------------------------------------------ the header (S1): portrait, title and chip, tabs, wallet */
.qb-head {
  display: grid;
  grid-template-columns: clamp(80px, 6.4cqw, 100px) auto minmax(0, 1fr) auto;
  grid-template-areas: "gary brand tabs auth";
  align-items: center;
  gap: 10px clamp(10px, 1cqw, 18px);
  padding: 8px 12px;
  border: 3px solid #050806;
  border-radius: 8px;
  background: var(--qb-rivets), linear-gradient(180deg, #121c16, #080e0a);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / .06), inset 0 -3px 0 rgb(0 0 0 / .5);
}
.qb-head__gary { grid-area: gary; width: 100%; border: 3px solid #2a3a2e; border-radius: 6px; box-shadow: 0 0 0 2px #050806; image-rendering: pixelated; }
.qb-head__brand { grid-area: brand; display: grid; gap: 6px; min-width: 0; }
.qb-head__title { color: var(--qb-orange); font: 400 clamp(40px, 3.25cqw, 52px)/.86 var(--qb-title); letter-spacing: .01em; text-shadow: 0 3px 0 var(--qb-orange-deep), 0 0 16px rgb(255 106 19 / .3); overflow-wrap: anywhere; font-size-adjust: none; }
.qb-head__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.qb-head__checked { color: var(--qb-cream); font: 400 clamp(21px, 1.65cqw, 26px)/1 var(--qb-mono); letter-spacing: .05em; white-space: nowrap; font-size-adjust: none; }
.qb-head__auth { grid-area: auth; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; padding: 6px; border: 3px solid #050806; border-radius: 8px; background: rgb(0 0 0 / .25); box-shadow: inset 0 0 0 2px #1a241d; }
.qb-head__wallet { display: inline-flex; align-items: center; min-height: 52px; padding: 4px 14px; border: 2px solid var(--qb-line); border-radius: 6px; background: var(--qb-well); color: var(--qb-mint); font: 400 clamp(24px, 1.9cqw, 30px)/1 var(--qb-display); white-space: nowrap; font-size-adjust: var(--qb-display-adjust); }
.qb-head__auth .qb-key { min-height: 52px; padding-inline: 14px; font-size: clamp(24px, 1.9cqw, 30px); white-space: nowrap; }
.qb-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 2px 12px 0;
  border: 2px solid var(--qb-mint);
  border-radius: 5px;
  color: var(--qb-mint);
  font: 400 26px/1 var(--qb-display);
  letter-spacing: .04em;
  white-space: nowrap;
  font-size-adjust: var(--qb-display-adjust);
}
.qb-chip::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.qb-chip:is([data-state="off"], [data-state="pending"]) { border-color: var(--qb-orange); color: var(--qb-orange); }
.qb-chip:is([data-state="unknown"], [data-state="unavailable"]) { border-color: var(--qb-red); color: var(--qb-red); }
.qb-tabs { grid-area: tabs; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-width: 0; padding: 6px; border: 3px solid #050806; border-radius: 8px; background: rgb(0 0 0 / .25); box-shadow: inset 0 0 0 2px #1a241d; }
.qb-tab {
  flex: 0 1 auto;
  min-width: 44px;
  min-height: 52px;
  padding: 4px clamp(9px, .85cqw, 14px) 0;
  border: 3px solid #050806;
  border-radius: 6px;
  background: linear-gradient(180deg, #19261c, #0b120d);
  box-shadow: inset 0 0 0 2px #2b3a2e, inset 0 3px 0 rgb(255 255 255 / .06), 0 3px 0 #020403;
  color: var(--qb-cream);
  font: 400 clamp(22px, 1.62cqw, 28px)/1 var(--qb-display);
  letter-spacing: .02em;
  cursor: pointer;
  font-size-adjust: var(--qb-display-adjust);
}
.qb-tab[aria-selected="true"] { border-color: #0c4a26; background: linear-gradient(180deg, #74f7aa, var(--qb-mint)); color: #04210f; box-shadow: inset 0 2px 0 rgb(255 255 255 / .45), 0 0 18px rgb(60 235 134 / .5), 0 3px 0 #04210f; }
.qb-banner { padding: 6px 16px 4px; border: 2px solid var(--qb-mint); border-radius: 6px; background: rgb(60 235 134 / .06); color: var(--qb-mint); font: 400 24px/1.15 var(--qb-mono); letter-spacing: .03em; font-size-adjust: none; }
.qb-banner:not([data-mode="live"]) { border-color: var(--qb-orange); background: rgb(255 106 19 / .07); color: var(--qb-orange-hi); }
.qb-message { color: var(--qb-muted); font-size: 22px; }
.qb-message:empty { display: none; }
.qb-message[data-tone="done"] { color: var(--qb-mint); }
.qb-message:is([data-tone="refused"], [data-tone="warn"]) { color: #ffb37f; }
.qb-status { color: var(--qb-muted); font-size: 21px; line-height: 1.2; }
.qb-status:empty { display: none; }
.qb-status[data-tone="done"] { color: var(--qb-mint); }
.qb-status[data-tone="refused"] { color: #ff8f84; }
.qb-status[data-tone="warn"] { color: #ffb37f; }
.qb-hint { color: var(--qb-muted); font-size: 21px; line-height: 1.2; text-align: center; }
.qb-hint:empty { display: none; }

/* The approved LIVE / PAPER keys use the existing terminal controls. */
.qb-head__chips { column-gap: 8px; }
.qb-head__checked { font-size: clamp(18px, 1.3cqw, 22px); }
.qb-book-key { min-width: 72px; min-height: 44px; padding: 4px 10px 2px; border: 2px solid var(--qb-mint); background: var(--qb-well); color: var(--qb-mint); font-size: 26px; }
.qb-book-key[data-bot-book="paper"] { border-color: var(--qb-orange); color: var(--qb-orange); }
.qb-book-key[aria-pressed="true"] { background: var(--qb-mint); color: #03180b; box-shadow: inset 0 2px 0 rgb(255 255 255 / .4), 0 0 12px rgb(60 235 134 / .3); }
.qb-book-key[data-bot-book="paper"][aria-pressed="true"] { background: var(--qb-orange); color: #1a0901; box-shadow: inset 0 2px 0 rgb(255 255 255 / .4), 0 0 12px rgb(255 106 19 / .3); }
.qb-book-key[aria-pressed="true"]::before { content: ""; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: currentColor; }
.qb-screen--desk[data-paper-ticket="true"] { grid-template-columns: minmax(0, 1.8fr) minmax(220px, .6fr) minmax(310px, 1fr); grid-template-areas: "clock ticket side" "strip strip strip"; }
.qb-paper-printer { grid-area: ticket; align-self: start; min-width: 0; padding: 88px 10px 18px; border: 3px solid #18251b; border-radius: 8px; background: url("bot-art/app-receipt-printer.webp") 50% -40px / 650% auto no-repeat, var(--qb-well); }
.qb-paper-receipt { min-width: 0; }
.qb-paper-receipt .qb-receipt__paper { gap: 12px; min-height: 360px; padding: 18px 12px 32px; font-size: 20px; }
.qb-paper-receipt .qb-receipt__row { gap: 8px; grid-template-columns: max-content minmax(0, 1fr); }
.qb-paper-receipt .qb-receipt__v { text-align: right; }
.qb-paper-receipt .qb-receipt__token { font-size: 24px; }
.qb-paper-receipt .qb-receipt__stamp { margin-top: 22px; padding: 6px 16px; border: 3px double #138a43; font-size: 42px; }

/* ------------------------------------------------------------ S1 DESK */
.qb-screen--desk { display: grid; grid-template-columns: minmax(0, 1.95fr) minmax(330px, 1fr); grid-template-areas: "clock side" "strip strip"; gap: 12px; }
.qb-clock { grid-area: clock; position: relative; align-self: start; min-width: 0; container: qbclock / inline-size; }
.qb-clock__art { border-radius: 10px; }
/* The plate's regions, measured on bot-art/app-wave-clock.webp (1545 by 1018): the skyline band, the dark screen, the
   digit window and the label well left of it. */
.qb-clock { --sky-x: 5.5; --sky-y: 7.5; --scr-x: 3.9; --scr-y: 25.7; --scr-w: 92.6; --scr-h: 51.1; --dig-x: 64.9; --dig-y: 82.8; --dig-w: 20.6; --dig-h: 9.8; --lab-x: 15.9; }
.qb-clock__head { position: absolute; left: calc(var(--sky-x) * 1%); top: calc(var(--sky-y) * 1%); display: grid; gap: .5cqw; max-width: 58%; padding: .8cqw 1.4cqw .7cqw; border-radius: 4px; background: rgb(3 8 5 / .78); }
.qb-clock__title { color: var(--qb-orange); font: 400 5.6cqw/.85 var(--qb-display); letter-spacing: .01em; text-shadow: 0 .3cqw 0 var(--qb-orange-deep); white-space: nowrap; font-size-adjust: var(--qb-display-adjust); }
.qb-clock__meta { display: flex; flex-wrap: wrap; gap: .3cqw 2.2cqw; color: var(--qb-cream); font: 400 max(17px, 2.5cqw)/1 var(--qb-mono); letter-spacing: .03em; font-size-adjust: none; }
.qb-clock__meta:empty { display: none; }
.qb-clock__venue { color: var(--qb-mint); }
.qb-clock__screen { position: absolute; left: calc(var(--scr-x) * 1%); top: calc(var(--scr-y) * 1%); width: calc(var(--scr-w) * 1%); height: calc(var(--scr-h) * 1%); }
.qb-clock__empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 4cqw 8cqw; color: var(--qb-mint); font: 400 max(20px, 3cqw)/1.2 var(--qb-mono); text-align: center; text-shadow: 0 0 8px rgb(60 235 134 / .45); font-size-adjust: none; }
.qb-chart { position: absolute; inset: 9% 3% 10% 13%; }
.qb-chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.qb-chart__grid { stroke: rgb(60 235 134 / .13); stroke-width: 1; vector-effect: non-scaling-stroke; }
.qb-chart__guard { fill: rgb(60 235 134 / .18); stroke: rgb(60 235 134 / .6); stroke-dasharray: 6 4; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.qb-chart__wave { stroke: rgb(125 255 180 / .55); stroke-width: 1.2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.qb-chart__signal { stroke: var(--qb-mint); stroke-width: 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgb(60 235 134 / .8)); }
.qb-chart__line { fill: none; stroke: var(--qb-mint); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgb(60 235 134 / .75)); }
.qb-chart__tag, .qb-chart__axis, .qb-chart__wait { position: absolute; font: 400 max(15px, 2.1cqw)/1 var(--qb-mono); white-space: nowrap; font-size-adjust: none; }
.qb-chart__tag { color: var(--qb-cream); }
.qb-chart__tag--signal { transform: translate(-50%, -110%); padding: .35cqw .8cqw .15cqw; background: var(--qb-mint); color: #03200f; font: 400 max(17px, 2.4cqw)/1 var(--qb-display); box-shadow: 0 0 .8cqw rgb(60 235 134 / .55); font-size-adjust: var(--qb-display-adjust); }
.qb-chart__tag--wave { display: grid; gap: .3em; padding: .1em .35em; transform: translate(.5cqw, -110%); border-radius: 2px; background: rgb(3 10 6 / .8); line-height: 1; text-align: left; }
.qb-chart__tag--wave .qb-chart__tag-line + .qb-chart__tag-line { color: var(--qb-mint); }
.qb-chart__tag--wave[data-row="1"] { margin-top: 2.6em; }
.qb-chart__tag--wave[data-row="2"] { margin-top: 5.2em; }
.qb-chart__tag--wave[data-row="3"] { margin-top: 7.8em; }
.qb-chart__tag--guard { transform: translate(-50%, -50%); color: var(--qb-cream); font: 400 max(16px, 2.2cqw)/1 var(--qb-display); letter-spacing: .03em; font-size-adjust: var(--qb-display-adjust); }
.qb-chart__axis--y { transform: translate(calc(-100% - .9cqw), -50%); color: var(--qb-mint); }
.qb-chart__axis--x { transform: translate(-50%, 1cqw); color: var(--qb-mint); }
.qb-chart__wait { transform: translate(-50%, -50%); color: var(--qb-muted); }
.qb-count { position: absolute; left: calc(var(--lab-x) * 1%); top: calc(var(--dig-y) * 1%); width: calc((var(--dig-x) + var(--dig-w) - var(--lab-x)) * 1%); height: calc(var(--dig-h) * 1%); display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--dig-w) / (var(--dig-x) + var(--dig-w) - var(--lab-x)) * 100%); align-items: center; }
.qb-count__label { padding-right: 2cqw; color: var(--qb-orange); font: 400 4.6cqw/.9 var(--qb-display); letter-spacing: 0; text-align: right; text-shadow: 0 .3cqw 0 var(--qb-orange-deep); font-size-adjust: .34; }
.qb-count__digits { display: grid; place-items: center; height: 100%; color: var(--qb-orange); font: 400 7.4cqw/1 var(--qb-display); letter-spacing: .04em; text-shadow: 0 0 10px rgb(255 106 19 / .6); font-size-adjust: var(--qb-display-adjust); }
.qb-count[data-state="open"] :is(.qb-count__label, .qb-count__digits) { color: var(--qb-mint); text-shadow: 0 0 10px rgb(60 235 134 / .6); }

.qb-desk__side { grid-area: side; display: grid; align-content: start; gap: 10px; min-width: 0; container: qbside / inline-size; }
.qb-wave { gap: 6px; }
.qb-wave__balance { color: var(--qb-mint); font: 400 clamp(46px, 15cqw, 76px)/.9 var(--qb-display); letter-spacing: .01em; text-shadow: 0 0 14px rgb(60 235 134 / .35); overflow-wrap: anywhere; font-size-adjust: var(--qb-display-adjust); }
.qb-wave__name { color: var(--qb-mint); font: 400 clamp(36px, 11.5cqw, 58px)/.9 var(--qb-display); letter-spacing: .02em; font-size-adjust: var(--qb-display-adjust); }
.qb-wave__line { color: var(--qb-cream); font: 400 26px/1.15 var(--qb-mono); letter-spacing: .02em; font-size-adjust: none; }
.qb-wave__read { color: var(--qb-muted); font: 400 21px/1.15 var(--qb-mono); font-size-adjust: none; }
.qb-wave__read:empty { display: none; }
.qb-wave:not([data-state="in"]) :is(.qb-wave__balance, .qb-wave__name) { color: var(--qb-cream); text-shadow: none; }
.qb-trade { grid-template-columns: minmax(110px, 40%) minmax(0, 1fr); align-items: center; column-gap: 16px; }
.qb-trade > .qb-plate__title { grid-column: 1 / -1; }
.qb-dial { position: relative; container: qbdial / inline-size; }
.qb-dial__art { border-radius: 50%; }
.qb-dial__marks { position: absolute; inset: 0; }
.qb-dial__mark { position: absolute; left: 50%; top: 50%; color: var(--qb-cream); font: 400 14cqw/1 var(--qb-display); transform: rotate(calc(var(--a) * 1deg)) translateY(-29cqw) rotate(calc(var(--a) * -1deg)); translate: -50% -50%; text-shadow: 0 0 4px #000, 0 1px 0 #000; font-size-adjust: var(--qb-display-adjust); }
.qb-dial__needle { position: absolute; left: 50%; top: 50%; width: 2.8cqw; height: 22cqw; margin-left: -1.4cqw; border-radius: 2cqw; background: linear-gradient(90deg, #ff9b8d, #e5484d 60%, #8f1f22); transform-origin: 50% 0; transform: rotate(calc(var(--a) * 1deg + 180deg)); box-shadow: 0 0 6px rgb(229 72 77 / .6); transition: transform .25s ease; }
.qb-dial__hub { position: absolute; left: 50%; top: 50%; width: 11cqw; height: 11cqw; margin: -5.5cqw 0 0 -5.5cqw; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f1d78a, var(--qb-brass) 55%, #6d5212); }
.qb-trade__stake { display: grid; gap: 6px; min-width: 0; container: qbstake / inline-size; }
.qb-trade__label { color: var(--qb-cream); font: 400 30px/1 var(--qb-display); letter-spacing: .04em; font-size-adjust: var(--qb-display-adjust); }
.qb-trade__amount { color: var(--qb-mint); font: 400 min(58px, 21cqw)/.9 var(--qb-display); letter-spacing: .01em; text-shadow: 0 0 12px rgb(60 235 134 / .3); font-size-adjust: var(--qb-display-adjust); }
.qb-trade__range { width: 100%; height: 44px; margin: 0; accent-color: var(--qb-orange); cursor: pointer; }
.qb-trade__range:disabled { cursor: not-allowed; }
.qb-trade__limits { padding-top: 6px; border-top: 2px solid var(--qb-mint-deep); color: var(--qb-cream); font: 400 23px/1.15 var(--qb-mono); font-size-adjust: none; }
.qb-trade__share { color: var(--qb-muted); font: 400 21px/1.15 var(--qb-mono); font-size-adjust: none; }
.qb-trade__share:empty { display: none; }

.qb-strip {
  grid-area: strip;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 1.2cqw;
  min-height: 84px;
  padding: 12px 1.4cqw;
  border: 3px solid #050806;
  border-radius: 8px;
  background: var(--qb-rivets), var(--qb-scan), #070b09;
  box-shadow: inset 0 0 0 3px #1a241d, inset 0 0 0 5px #050806;
}
.qb-strip > :is(.qb-strip__verdict, .qb-strip__trades, .qb-strip__net, .qb-strip__pf) { padding-left: 1.2cqw; border-left: 2px solid #2a3a2e; }
.qb-strip__label { color: var(--qb-cream); font: 400 clamp(32px, 2.6cqw, 42px)/1 var(--qb-display); letter-spacing: .02em; font-size-adjust: var(--qb-display-adjust); }
.qb-strip__verdict { color: var(--qb-red); font: 400 clamp(40px, 3.45cqw, 54px)/1 var(--qb-display); letter-spacing: .03em; overflow-wrap: anywhere; font-size-adjust: var(--qb-display-adjust); }
.qb-strip[data-verdict="pass"] .qb-strip__verdict { color: var(--qb-mint); }
.qb-strip[data-verdict="coming-soon"] .qb-strip__verdict { color: var(--qb-orange); }
/* COMING SOON over the bot while its desk is not live (the owner, 24 Oct 2026): the sign's still, its loop on top. */
.qb-soon { position: relative; margin: 0 0 14px; aspect-ratio: 1692 / 725; overflow: hidden; border: 3px solid #1a241d; border-radius: 8px; background: #030504; box-shadow: 0 0 0 2px var(--qb-orange-deep), 0 0 26px rgb(255 106 19 / .32); }
.qb-soon[hidden] { display: none; }
.qb-soon__art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.qb-strip__trades, .qb-strip__pf { color: var(--qb-cream); font: 400 clamp(24px, 2cqw, 30px)/1 var(--qb-mono); white-space: nowrap; font-size-adjust: none; }
.qb-strip__pf strong { margin-left: 12px; color: var(--qb-red); font-weight: 400; }
.qb-strip__pf[data-tone="up"] strong { color: var(--qb-mint); }
.qb-strip__net { color: var(--qb-red); font: 400 clamp(28px, 2.4cqw, 36px)/1 var(--qb-mono); white-space: nowrap; font-size-adjust: none; }
.qb-strip__net[data-tone="up"] { color: var(--qb-mint); }
.qb-strip__trades:empty, .qb-strip__net:empty, .qb-strip__pf:empty { display: none; }
.qb-strip .qb-key { margin-left: auto; min-height: 56px; padding-inline: 1.3cqw; font-size: clamp(24px, 1.9cqw, 30px); }

/* ------------------------------------------------------------ S2 SIGNALS */
.qb-screen--signals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 270px); grid-template-areas: "scan scan" "tape side"; gap: 12px; }
.qb-scan { grid-area: scan; position: relative; display: grid; grid-template-columns: 180px minmax(280px, 400px) minmax(0, 1fr); align-items: center; gap: 0 18px; min-height: 204px; padding: 12px; border: 3px solid #050806; border-radius: 10px; background: #070c09; overflow: hidden; box-shadow: inset 0 0 0 3px #1a241d; }
.qb-scan__radar { position: relative; z-index: 1; border-radius: 12px; }
.qb-scan__text { display: grid; align-content: center; gap: 12px; padding: 8px 0; }
.qb-scan__title { color: var(--qb-mint); font: 400 clamp(46px, 4.1cqw, 60px)/.9 var(--qb-display); letter-spacing: .02em; text-shadow: 0 0 14px rgb(60 235 134 / .35); font-size-adjust: var(--qb-display-adjust); }
.qb-scan__last { color: var(--qb-cream); font: 400 28px/1 var(--qb-mono); letter-spacing: .03em; font-size-adjust: none; }
.qb-scan__banner { align-self: stretch; height: 100%; min-height: 176px; object-fit: cover; object-position: 50% 82%; border-radius: 8px; box-shadow: 0 0 0 3px #050806; }
.qb-tape { grid-area: tape; display: grid; align-content: start; gap: 12px; min-width: 0; padding: 12px 16px 16px; border: 3px solid #050806; border-radius: 10px; background: var(--qb-rivets), var(--qb-scan), #070c09; box-shadow: inset 0 0 0 3px #1a241d; container: qbtape / inline-size; }
.qb-tape__title { color: var(--qb-orange); font: 400 clamp(60px, 6cqw, 80px)/.9 var(--qb-display); letter-spacing: .02em; text-shadow: 0 4px 0 var(--qb-orange-deep); font-size-adjust: var(--qb-display-adjust); }
.qb-tape__list { position: relative; display: grid; gap: 14px; }
.qb-tape__list:not(:empty)::before { content: ""; position: absolute; left: 92px; top: 0; bottom: 0; width: 5px; border-radius: 3px; background: var(--qb-mint); box-shadow: 0 0 12px rgb(60 235 134 / .75); }
.qb-tape__row { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: center; }
.qb-tape__time { position: relative; padding-right: 34px; color: var(--qb-mint); font: 400 30px/1 var(--qb-mono); font-size-adjust: none; }
.qb-tape__time::after { content: ""; position: absolute; right: 9px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border: 4px solid var(--qb-mint); border-radius: 50%; background: #031408; box-shadow: 0 0 10px rgb(60 235 134 / .8); }
.qb-tape__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 1.1cqw;
  min-width: 0;
  padding: 12px 1.6cqw;
  container: qbstrip / inline-size;
  border: 3px solid #050806;
  border-radius: 8px;
  background: var(--qb-scan), #0a120d;
  box-shadow: inset 0 0 0 2px #1f2e23;
}
.qb-tape__token { flex: 0 0 15.5cqw; display: grid; gap: 6px; min-width: 0; }
.qb-tape__mint { display: inline-flex; align-items: center; min-height: 44px; color: var(--qb-mint); font: 400 clamp(26px, 3.7cqw, 46px)/.9 var(--qb-display); letter-spacing: .01em; text-decoration: none; white-space: nowrap; font-size-adjust: var(--qb-display-adjust); }
.qb-tape__mint:hover { text-decoration: underline; text-underline-offset: 4px; }
.qb-tape__venue { color: var(--qb-cream); font: 400 clamp(20px, 2.7cqw, 28px)/1 var(--qb-display); letter-spacing: .04em; font-size-adjust: var(--qb-display-adjust); }
.qb-tape__spark { flex: 0 0 9cqw; height: 76px; border: 1px solid #1f2e23; background: repeating-linear-gradient(to right, rgb(60 235 134 / .06) 0 1px, transparent 1px 18px), repeating-linear-gradient(to bottom, rgb(60 235 134 / .06) 0 1px, transparent 1px 18px), #050a07; }
.qb-spark { width: 100%; height: 100%; }
.qb-spark__line { fill: none; stroke: var(--qb-mint); stroke-width: 2.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgb(60 235 134 / .7)); }
.qb-spark[data-tone="down"] .qb-spark__line { stroke: var(--qb-red); filter: drop-shadow(0 0 3px rgb(255 79 90 / .6)); }
.qb-tape__price { flex: 0 0 15cqw; display: grid; gap: 4px; min-width: 0; }
.qb-tape__exit:empty { display: none; }
.qb-tape__k { color: var(--qb-cream); font: 400 clamp(20px, 2.5cqw, 26px)/1 var(--qb-display); letter-spacing: .05em; font-size-adjust: var(--qb-display-adjust); }
.qb-tape__v { color: var(--qb-mint); font: 400 clamp(24px, 3.35cqw, 42px)/1 var(--qb-display); letter-spacing: .01em; white-space: nowrap; font-size-adjust: var(--qb-display-adjust); }
.qb-pips { flex: 0 0 11cqw; display: flex; justify-content: center; gap: 6px; }
.qb-pip { display: grid; justify-items: center; gap: 4px; }
.qb-pip__lamp { width: clamp(30px, 3.5cqw, 40px); height: clamp(30px, 3.5cqw, 40px); border: 3px solid #0d2416; border-radius: 7px; background: #47534c; box-shadow: inset 0 2px 0 rgb(255 255 255 / .12), 0 0 0 2px #040806; }
.qb-pip[data-state="opened"] .qb-pip__lamp { background: var(--qb-mint); box-shadow: 0 0 14px rgb(60 235 134 / .75), inset 0 2px 0 rgb(255 255 255 / .45), 0 0 0 2px #040806; }
.qb-pip[data-yours="true"] .qb-pip__lamp { outline: 3px solid var(--qb-orange); outline-offset: 2px; }
.qb-pip__label { color: var(--qb-cream); font: 400 clamp(19px, 2.3cqw, 24px)/1 var(--qb-display); letter-spacing: .04em; font-size-adjust: var(--qb-display-adjust); }
.qb-tape__status { flex: 0 0 12.5cqw; justify-content: center; min-height: 54px; padding: 6px 8px 4px; border-width: 3px; border-color: var(--qb-mint); font-size: clamp(19px, 2.6cqw, 28px); line-height: .95; text-align: center; white-space: normal; }
.qb-tape__status::before { display: none; }
.qb-tape__status:is([data-state="closed"], [data-state="missed"]) { border-color: var(--qb-cream); color: var(--qb-cream); }
.qb-tape__status[data-state="waiting"] { border-color: var(--qb-orange); color: var(--qb-orange); }
.qb-tape__move { flex: 0 0 auto; display: grid; gap: 4px; margin-left: auto; }
.qb-tape__move:empty { display: none; }
.qb-tape__move .qb-tape__v { font-size: clamp(30px, 4.6cqw, 54px); }
.qb-tape__move[data-tone="down"] .qb-tape__v { color: var(--qb-red); }
.qb-tape__act { flex: 0 0 auto; margin-left: auto; }
.qb-tape__act:empty { display: none; }
.qb-tape__act .qb-key { min-height: 64px; max-width: 21cqw; font-size: clamp(22px, 2.9cqw, 30px); line-height: .95; }
.qb-tape__note { flex: 1 0 100%; }
.qb-tape__empty { padding: 18px 4px 6px; color: var(--qb-cream); font: 400 26px/1.25 var(--qb-mono); font-size-adjust: none; }
.qb-signals__side { grid-area: side; display: grid; align-content: start; gap: 12px; min-width: 0; }
.qb-howto .qb-plate__title, .qb-waves .qb-plate__title { font-size: clamp(36px, 3cqw, 44px); }
.qb-howto__line { padding: 14px 4px; border-bottom: 2px solid #2a3a2e; color: var(--qb-cream); font: 400 25px/1.15 var(--qb-mono); font-size-adjust: none; }
.qb-howto__line:last-child { border-bottom: 0; }
.qb-waves__list { display: grid; gap: 8px; }
.qb-waves__row { display: grid; gap: 2px; padding: 8px 10px; border: 2px solid #1f2e23; border-radius: 6px; background: #071009; }
.qb-waves__row[data-yours="true"] { border-color: var(--qb-orange); box-shadow: 0 0 10px rgb(255 106 19 / .3); }
.qb-waves__hold { color: var(--qb-cream); font: 400 26px/1 var(--qb-display); letter-spacing: .03em; font-size-adjust: var(--qb-display-adjust); }
.qb-waves__name { color: var(--qb-mint); font: 400 30px/1 var(--qb-display); letter-spacing: .03em; font-size-adjust: var(--qb-display-adjust); }
.qb-waves__delay { color: var(--qb-muted); font: 400 21px/1.1 var(--qb-mono); font-size-adjust: none; }
.qb-waves__line { color: var(--qb-cream); font: 400 21px/1.2 var(--qb-mono); font-size-adjust: none; }
.qb-waves__buy { width: 100%; font-size: 26px; }

/* ------------------------------------------------------------ S3 TRADES */
.qb-printer { position: relative; container: qbprint / inline-size; }
.qb-printer__art { border-radius: 10px; }
/* Under the printer's three rolls (measured on bot-art/app-receipt-printer.webp, 1752 by 897): receipts hang from 27%. */
.qb-receipts { position: absolute; left: 25.8%; right: 25.4%; top: 27.5%; bottom: 2%; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 1.6cqw) / 3); align-items: start; gap: 1.6cqw; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--qb-brass) transparent; }
.qb-receipt { display: grid; align-content: start; gap: 1cqw; }
.qb-receipt__paper {
  display: grid;
  gap: .5cqw;
  padding: 1.8cqw 1.3cqw 2.6cqw;
  background: linear-gradient(180deg, rgb(0 0 0 / .16), transparent 2.2cqw), repeating-linear-gradient(to bottom, rgb(120 100 60 / .05) 0 1px, transparent 1px 4px), var(--qb-cream);
  color: #17160f;
  font: 400 max(17px, 1.55cqw)/1.05 var(--qb-mono);
  -webkit-mask: radial-gradient(.75cqw at 50% 100%, #0000 98%, #000) 50% / 1.5cqw 100% repeat-x;
  mask: radial-gradient(.75cqw at 50% 100%, #0000 98%, #000) 50% / 1.5cqw 100% repeat-x;
  box-shadow: 0 .6cqw 1.2cqw rgb(0 0 0 / .45);
  font-size-adjust: none;
}
.qb-receipt__opened, .qb-receipt__token { padding-bottom: .5cqw; border-bottom: .15cqw dashed #6b6658; }
.qb-receipt__token { font-size: max(19px, 2cqw); }
.qb-receipt__row { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .9cqw; }
.qb-receipt__v { white-space: nowrap; }
.qb-receipt__row[data-tone="up"] .qb-receipt__v, .qb-receipt__row[data-tone="open"] .qb-receipt__v { color: #138a43; }
.qb-receipt__row[data-tone="down"] .qb-receipt__v { color: #b3262b; }
.qb-receipt__furnace { padding-bottom: .5cqw; border-bottom: .15cqw dashed #6b6658; }
.qb-receipt__links { display: flex; flex-wrap: wrap; gap: 0 .6cqw; justify-content: center; }
.qb-receipt__tx { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 .4cqw; color: #138a43; font: 400 max(20px, 2cqw)/1 var(--qb-display); letter-spacing: .03em; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35cqw; font-size-adjust: var(--qb-display-adjust); }
.qb-receipt__pending { display: inline-flex; align-items: center; min-height: 44px; color: #6b6658; font: 400 max(18px, 1.6cqw)/1 var(--qb-display); letter-spacing: .03em; font-size-adjust: var(--qb-display-adjust); }
.qb-receipt__stamp { justify-self: center; margin-top: .4cqw; padding: .5cqw 1.1cqw .3cqw; border: .32cqw solid #138a43; border-radius: .6cqw; color: #138a43; font: 400 max(20px, 2.4cqw)/.95 var(--qb-display); letter-spacing: .03em; text-align: center; transform: rotate(-9deg); font-size-adjust: var(--qb-display-adjust); }
.qb-receipt__steps { display: grid; gap: .7cqw; justify-items: center; }
.qb-receipt__steps .qb-key { width: 100%; font-size: max(22px, 1.9cqw); line-height: .95; }
.qb-receipt__steps .qb-status { color: var(--qb-cream); text-align: center; font-size: max(18px, 1.5cqw); text-shadow: 0 1px 2px #000, 0 0 6px #000; }
.qb-receipts__empty { position: absolute; left: 28%; right: 28%; top: 42%; padding: 1.6cqw 1.8cqw; border: 3px solid #050806; border-radius: 8px; background: rgb(3 8 5 / .86); box-shadow: inset 0 0 0 2px #1a241d; color: var(--qb-cream); font: 400 max(20px, 2cqw)/1.2 var(--qb-mono); text-align: center; font-size-adjust: none; }
.qb-today { position: absolute; right: 1.2%; top: 2%; width: 15.5%; padding: 1cqw 1.2cqw; gap: .3cqw; }
.qb-today .qb-plate__title { font-size: 2.9cqw; }
.qb-today__count { color: var(--qb-mint); font: 400 3.3cqw/1 var(--qb-display); letter-spacing: .02em; font-size-adjust: var(--qb-display-adjust); }
.qb-today__breaker { color: var(--qb-cream); font: 400 max(18px, 1.9cqw)/1.1 var(--qb-mono); font-size-adjust: none; }

/* ------------------------------------------------------------ S4 FURNACE and RECORD */
.qb-screen--burns { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr); grid-template-areas: "furnace board" "notes board"; align-items: start; gap: 12px; }
.qb-burns__furnace { grid-area: furnace; }
.qb-board { grid-area: board; }
.qb-board-notes { grid-area: notes; }
.qb-burns__furnace { display: grid; align-content: start; gap: 10px; min-width: 0; }
.qb-furnace { position: relative; container: qbfurn / inline-size; }
.qb-furnace__art { border-radius: 10px; }
/* Measured on bot-art/app-furnace.webp (1672 by 941): the readout above the firebox, the two brass plates under it. */
.qb-furnace__screen { position: absolute; left: 30.68%; top: 20.19%; width: 37.62%; height: 21.25%; display: grid; place-content: center; justify-items: center; gap: .3cqw; }
.qb-furnace__label { color: #ffc35a; font: 400 4cqw/.9 var(--qb-display); letter-spacing: .03em; text-shadow: 0 0 8px rgb(255 160 40 / .45); font-size-adjust: var(--qb-display-adjust); }
.qb-furnace__quit { color: var(--qb-mint); font: 400 8.6cqw/.85 var(--qb-display); letter-spacing: .01em; text-shadow: 0 0 14px rgb(60 235 134 / .6); font-size-adjust: var(--qb-display-adjust); }
.qb-furnace__plate { position: absolute; top: 80.9%; width: 19.3%; height: 11.85%; display: grid; place-content: center; justify-items: center; gap: .2cqw; color: var(--qb-cream); text-align: center; }
.qb-furnace__plate--spend { left: 27.99%; }
.qb-furnace__plate--count { left: 52.57%; }
.qb-furnace__plate span { font: 400 2.4cqw/1 var(--qb-display); letter-spacing: .04em; font-size-adjust: var(--qb-display-adjust); }
.qb-furnace__plate strong { color: var(--qb-mint); font: 400 3.6cqw/1 var(--qb-display); font-weight: 400; font-size-adjust: var(--qb-display-adjust); }
.qb-furnace__plate--count strong { font-size: 3.8cqw; }
.qb-ledger { display: grid; gap: 8px; padding: 12px 16px; border: 3px solid #050806; border-radius: 10px; background: var(--qb-rivets), var(--qb-scan), #070c09; box-shadow: inset 0 0 0 3px #1a241d; }
.qb-ledger__list { display: grid; gap: 8px; }
.qb-ledger__list:empty { display: none; }
.qb-ledger__row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; align-items: center; gap: 8px; min-height: 56px; padding: 4px 16px; border: 2px solid #1f5a35; border-radius: 6px; background: #050b07; font: 400 30px/1 var(--qb-mono); font-size-adjust: none; }
.qb-ledger__quit { color: var(--qb-orange); font-family: var(--qb-display); font-size: 34px; letter-spacing: .02em; font-size-adjust: var(--qb-display-adjust); }
.qb-ledger__at { color: var(--qb-cream); }
.qb-ledger__tx { display: inline-flex; align-items: center; min-height: 44px; color: var(--qb-mint); font: 400 30px/1 var(--qb-display); letter-spacing: .03em; text-underline-offset: 4px; font-size-adjust: var(--qb-display-adjust); }
.qb-ledger__line { color: var(--qb-cream); font-size: 24px; }
.qb-ledger__solscan { justify-self: start; font-size: 26px; }
.qb-board { display: grid; align-content: start; gap: 8px; padding: 12px 14px 16px; border: 3px solid #050806; border-radius: 10px; background: var(--qb-rivets), #050806; box-shadow: inset 0 0 0 3px #1a241d; container: qbboard / inline-size; }
.qb-board__title { padding: 8px 14px 4px; border: 3px solid #1a241d; border-radius: 6px; background: #030504; color: var(--qb-orange); font: 400 clamp(48px, 14cqw, 76px)/.9 var(--qb-display); letter-spacing: .03em; text-shadow: 0 4px 0 var(--qb-orange-deep); text-align: center; font-size-adjust: var(--qb-display-adjust); }
.qb-board__rows { display: grid; gap: 6px; }
.qb-board__row { display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); align-items: center; gap: 10px; min-height: 52px; padding: 4px 8px; border: 3px solid #1a241d; border-radius: 6px; background: #0a0f0c; }
.qb-board__label { color: var(--qb-cream); font: 400 clamp(22px, 6.4cqw, 32px)/.95 var(--qb-display); letter-spacing: .03em; font-size-adjust: var(--qb-display-adjust); }
.qb-board__flaps { display: flex; flex-wrap: nowrap; gap: 2px; min-width: 0; overflow: hidden; container: qbflaps / inline-size; }
.qb-flap { display: inline-grid; flex: 0 0 auto; place-items: center; min-width: .92em; height: 1.32em; padding-top: .06em; border-radius: 3px; background: linear-gradient(180deg, #262b2d 0 48%, #0b0d0e 49% 52%, #1b1f21 53%); color: var(--qb-cream); font: 400 clamp(17px, calc((100cqw - var(--n, 9) * 2px) / (var(--n, 9) * .95)), 34px)/1 var(--qb-display); box-shadow: inset 0 1px 0 rgb(255 255 255 / .1); font-size-adjust: var(--qb-display-adjust); }
.qb-flap[data-gap] { min-width: .5em; background: #0d1011; }
.qb-board__row[data-tone="down"] .qb-flap { color: var(--qb-red); }
.qb-board__row[data-tone="up"] .qb-flap { color: var(--qb-mint); }
.qb-board__line, .qb-board__days { padding: 8px 12px; border: 3px solid #1a241d; border-radius: 6px; color: var(--qb-cream); font: 400 23px/1.2 var(--qb-mono); font-size-adjust: none; }
.qb-board__days:empty { display: none; }
.qb-board__evidence { color: var(--qb-muted); font: 400 19px/1.2 var(--qb-mono); overflow-wrap: anywhere; font-size-adjust: none; }
.qb-board__evidence:empty { display: none; }

/* ------------------------------------------------------------ S5 SECURITY */
.qb-screen--security { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr); align-items: start; gap: 12px; }
.qb-security__vault { display: grid; align-content: start; gap: 10px; min-width: 0; }
.qb-vault { position: relative; container: qbvault / inline-size; }
.qb-vault__art { border-radius: 10px; }
/* Measured on bot-art/app-vault.webp (1672 by 941): the window over the lever, the lever, the note well under it. */
.qb-vault__window { position: absolute; left: 72.79%; top: 24.65%; width: 18.66%; height: 15.3%; display: grid; place-items: center; padding: .6cqw; color: var(--qb-mint); font: 400 3.15cqw/.88 var(--qb-display); letter-spacing: .03em; text-align: center; text-shadow: 0 0 10px rgb(60 235 134 / .6); font-size-adjust: var(--qb-display-adjust); }
.qb-vault[data-switch="off"] .qb-vault__window { color: var(--qb-red); text-shadow: 0 0 10px rgb(229 72 77 / .5); }
.qb-vault:is([data-switch="out"], [data-switch="unknown"]) .qb-vault__window { color: var(--qb-cream); text-shadow: none; font-size: 2.7cqw; }
.qb-vault__lever { position: absolute; left: 74.16%; top: 41.23%; width: 15.25%; height: 32.09%; padding: 0; border: 0; border-radius: 1cqw; background: transparent; cursor: pointer; }
.qb-vault__lever:disabled { cursor: not-allowed; }
.qb-vault__lever:not(:disabled):hover { box-shadow: 0 0 0 .3cqw rgb(60 235 134 / .5); }
.qb-vault__lever-off { width: 100%; height: 100%; object-fit: cover; border-radius: 1cqw; }
.qb-vault__note { position: absolute; left: 72.37%; top: 73.75%; width: 19.44%; height: 14.03%; display: grid; place-items: center; padding: .7cqw; color: var(--qb-cream); font: 400 max(15px, 1.95cqw)/1 var(--qb-mono); text-align: left; font-size-adjust: none; }
.qb-vault__state { padding: 8px 14px 6px; border: 2px solid var(--qb-line); border-radius: 6px; background: var(--qb-well); color: var(--qb-cream); font: 400 23px/1.2 var(--qb-mono); font-size-adjust: none; }
.qb-vault__state:empty { display: none; }
.qb-keys__line { padding: 10px 2px; border-bottom: 2px solid #2a3a2e; color: var(--qb-cream); font: 400 24px/1.2 var(--qb-mono); font-size-adjust: none; }
.qb-keys__line:last-child { border-bottom: 0; }
.qb-security__side { display: grid; align-content: start; gap: 10px; min-width: 0; }
.qb-can { container: qbcan / inline-size; }
.qb-can .qb-plate__title { font-size: clamp(38px, 10.5cqw, 52px); }
.qb-can__head { margin-top: 6px; font: 400 28px/1 var(--qb-display); letter-spacing: .08em; font-size-adjust: var(--qb-display-adjust); }
.qb-can__head--can { color: var(--qb-mint); }
.qb-can__head--cannot { color: var(--qb-red); }
.qb-can__list { display: grid; gap: 8px; }
.qb-lamp { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px; border: 3px solid #4d3a0e; border-radius: 6px; background: radial-gradient(circle at 8px 8px, #3b2c0a 0 2px, transparent 3px), radial-gradient(circle at calc(100% - 8px) 8px, #3b2c0a 0 2px, transparent 3px), linear-gradient(180deg, #b8903a, #7a5c1c); box-shadow: inset 0 2px 0 rgb(255 240 200 / .35), 0 2px 0 #1a1305; }
.qb-lamp__light { justify-self: center; width: 40px; height: 40px; border: 3px solid #1a1a12; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c9ffe0, var(--qb-mint) 45%, #0f6b37); box-shadow: 0 0 14px rgb(60 235 134 / .85); }
.qb-lamp--red .qb-lamp__light { background: radial-gradient(circle at 35% 30%, #ffd0d2, var(--qb-red) 45%, #7a1418); box-shadow: 0 0 14px rgb(255 79 90 / .75); }
.qb-lamp__text { padding: 8px 12px; border-radius: 4px; background: #070b09; box-shadow: inset 0 0 0 2px #1a1305; color: var(--qb-cream); font: 400 24px/1.1 var(--qb-mono); font-size-adjust: none; }
.qb-can__line { color: var(--qb-muted); font-size: 20px; }
.qb-session__line { color: var(--qb-cream); font: 400 30px/1.15 var(--qb-mono); overflow-wrap: anywhere; font-size-adjust: none; }
.qb-session__line:empty { display: none; }
.qb-session__how { color: var(--qb-muted); font: 400 21px/1.2 var(--qb-mono); font-size-adjust: none; }
.qb-deskstate__lamp .qb-lamp { grid-template-columns: 52px minmax(0, 1fr); border: 0; background: none; box-shadow: none; padding: 0; }
.qb-deskstate__lamp .qb-lamp__text { padding: 0; background: none; box-shadow: none; color: var(--qb-mint); font: 400 40px/1 var(--qb-display); letter-spacing: .02em; font-size-adjust: var(--qb-display-adjust); }
.qb-deskstate[data-state="stopped"] .qb-lamp__text { color: var(--qb-red); }

/* ------------------------------------------------------------ narrower: the header's tabs take their own row */
@container qb (max-width: 1299px) {
  .qb-head { grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "gary brand auth" "tabs tabs tabs"; }
  .qb-head__gary { width: 96px; }
  .qb-tabs { justify-content: stretch; }
  .qb-tab { flex: 1 1 0; }
  .qb-strip { flex-wrap: wrap; }
}
/* Keep the desktop clock and its overlay regions as tall as the DESK row. */
@container qb (min-width: 980px) {
  .qb-clock { align-self: stretch; }
  .qb-clock .qb-clock__art { height: 100%; }
}
/* ------------------------------------------------------------ tablet: one column */
@container qb (max-width: 979px) {
  .qb-screen--desk, .qb-screen--desk[data-paper-ticket="true"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "clock" "side" "ticket" "strip"; }
  .qb-paper-printer { width: min(100%, 440px); justify-self: center; background-size: 500% auto; background-position: 50% -80px; padding: 100px 28px 18px; }
  .qb-screen--signals { grid-template-columns: minmax(0, 1fr); grid-template-areas: "scan" "tape" "side"; }
  .qb-screen--burns, .qb-screen--security { grid-template-columns: minmax(0, 1fr); }
  .qb-screen--burns { grid-template-areas: "furnace" "board" "notes"; }
  .qb-tape__token { flex-basis: 34cqw; }
  .qb-tape__spark { flex: 1 1 24cqw; }
  .qb-tape__price { flex-basis: 30cqw; }
  .qb-pips { flex-basis: auto; }
  .qb-tape__status { flex-basis: 26cqw; }
  .qb-tape__act .qb-key { max-width: none; }
  .qb-signals__side { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
/* ------------------------------------------------------------ phone (P1, P2) */
@container qb (max-width: 719px) {
  .qb-app { gap: 8px; }
  .qb-head { grid-template-columns: 70px minmax(0, 1fr); grid-template-areas: "gary brand" "tabs tabs" "auth auth"; gap: 8px 10px; padding: 8px; }
  .qb-head__gary { width: 70px; }
  .qb-head__title { font-size: clamp(30px, 9.6cqw, 46px); }
  .qb-head__chips { gap: 4px 10px; }
  .qb-app[data-book="paper"] [data-bot-buy] { font-size: clamp(20px, 6.4cqw, 30px); }
  .qb-chip { min-height: 30px; font-size: 23px; }
  .qb-head__checked { font-size: 19px; }
  /* Six tabs in one row would leave DESK under the 44 pixel touch size at 390, so a phone sets them three by two. */
  .qb-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; }
  .qb-tab { min-width: 0; min-height: 48px; padding: 4px 4px 0; font-size: clamp(20px, 6.6cqw, 28px); overflow-wrap: anywhere; }
  .qb-head__auth { justify-content: space-between; padding: 6px; }
  .qb-head__wallet { min-height: 48px; font-size: 26px; }
  .qb-head__auth .qb-key { min-height: 48px; font-size: 24px; }
  .qb-banner { font-size: 20px; }
  .qb-banner__why { display: none; }
  .qb-plate { padding: 12px 12px 14px; }
  .qb-plate__title { font-size: 34px; }
  /* P1: on a phone the clock is its own stack: the plate's skyline band under the title, a tall CRT for the chart, and
     the countdown in a bar of its own; the landscape plate itself would leave the chart a few pixels tall. */
  .qb-clock { display: grid; overflow: hidden; border: 3px solid #050806; border-radius: 10px; background: var(--qb-scan), #04110a; box-shadow: inset 0 0 0 3px #1a241d, 0 0 0 2px #2a3a2e; }
  .qb-clock .qb-clock__art { display: none; }
  .qb-clock__head { position: static; max-width: none; gap: 6px; padding: 14px 14px 12px; border-radius: 0; background: linear-gradient(90deg, rgb(3 8 5 / .82), rgb(3 8 5 / .35)), url("bot-art/app-wave-clock.webp") 50% 9% / 150% auto no-repeat; }
  .qb-clock__title { font-size: clamp(34px, 11cqw, 52px); }
  .qb-clock__meta { gap: 4px 14px; font-size: max(18px, 5.4cqw); }
  .qb-clock__screen { position: relative; left: auto; top: auto; width: auto; height: auto; aspect-ratio: 1 / .92; border-top: 3px solid #050806; background: radial-gradient(90% 70% at 50% 40%, rgb(60 235 134 / .07), transparent 70%); }
  .qb-chart { inset: 13% 4% 12% 23%; }
  .qb-chart__tag, .qb-chart__axis, .qb-chart__wait { font-size: max(13px, 3.4cqw); }
  .qb-chart__tag--signal, .qb-chart__tag--guard { font-size: max(14px, 3.8cqw); }
  .qb-clock__empty { font-size: max(18px, 4.4cqw); }
  .qb-count { position: static; width: auto; height: auto; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; border-top: 3px solid #050806; background: var(--qb-rivets), #070b09; }
  .qb-count__label { padding-right: 0; font-size: clamp(20px, 6.2cqw, 32px); text-align: left; }
  .qb-count__digits { min-width: 4.2em; padding: 4px 10px 0; border: 3px solid var(--qb-orange-deep); border-radius: 6px; background: #120602; font-size: clamp(40px, 13cqw, 60px); }
  .qb-count[data-state="open"] .qb-count__digits { border-color: var(--qb-mint-deep); background: #03140a; }
  .qb-wave__balance { font-size: clamp(40px, 15cqw, 64px); }
  .qb-wave__name { font-size: clamp(32px, 11cqw, 50px); }
  .qb-wave__line { font-size: 22px; }
  .qb-trade { grid-template-columns: 40% minmax(0, 1fr); }
  .qb-trade__label { font-size: 26px; }
  .qb-trade__limits { font-size: 20px; }
  .qb-key--big { min-height: 80px; font-size: clamp(30px, 9cqw, 42px); }
  .qb-strip { flex-wrap: wrap; gap: 8px 16px; padding: 12px; }
  .qb-strip > :is(.qb-strip__verdict, .qb-strip__trades, .qb-strip__net, .qb-strip__pf) { padding-left: 0; border-left: 0; }
  .qb-strip__label { font-size: 32px; }
  .qb-strip__verdict { font-size: 40px; }
  .qb-strip__trades, .qb-strip__pf { font-size: 24px; }
  .qb-strip__net { font-size: 28px; }
  .qb-strip .qb-key { width: 100%; margin-left: 0; font-size: 26px; }
  .qb-scan { grid-template-columns: 40% minmax(0, 1fr); grid-template-areas: "radar text" "banner banner"; gap: 10px; padding: 8px; }
  .qb-scan__radar { grid-area: radar; }
  .qb-scan__text { grid-area: text; padding: 4px 0; background: none; }
  .qb-scan__title { font-size: clamp(32px, 9.4cqw, 44px); }
  .qb-scan__last { font-size: 21px; }
  .qb-scan__banner { grid-area: banner; grid-column: 1 / -1; width: 100%; height: auto; min-height: 0; aspect-ratio: 2.2; object-position: 18% 85%; }
  .qb-tape { padding: 10px; }
  .qb-tape__title { font-size: 56px; }
  .qb-tape__list:not(:empty)::before { left: 52px; }
  .qb-tape__row { grid-template-columns: 64px minmax(0, 1fr); }
  .qb-tape__time { padding-right: 24px; font-size: 20px; }
  .qb-tape__time::after { right: 3px; width: 16px; height: 16px; margin-top: -8px; border-width: 3px; }
  .qb-tape__strip { gap: 10px; padding: 10px; }
  .qb-tape__token { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
  .qb-tape__spark { flex: 1 1 100%; height: 56px; }
  .qb-tape__price { flex: 1 1 40%; }
  .qb-pips { flex: 1 1 100%; justify-content: flex-start; }
  .qb-tape__status { flex: 0 0 auto; min-width: 96px; }
  .qb-tape__mint { font-size: clamp(30px, 13cqw, 44px); }
  .qb-tape__venue { font-size: 22px; }
  .qb-tape__k { font-size: 20px; }
  .qb-tape__v { font-size: clamp(24px, 10.6cqw, 34px); }
  .qb-tape__move .qb-tape__v { font-size: clamp(30px, 14cqw, 44px); }
  .qb-tape__act { flex: 1 1 140px; }
  .qb-tape__act .qb-key { width: 100%; max-width: none; font-size: 24px; }
  .qb-tape__status { font-size: 22px; }
  .qb-tape__empty { font-size: 22px; }
  .qb-howto__line { font-size: 22px; }
  .qb-receipts { position: static; display: grid; grid-auto-flow: row; grid-auto-columns: auto; gap: 14px; padding: 14px 6px; overflow: visible; }
  .qb-receipt__paper { padding: 18px 16px 26px; font-size: 21px; -webkit-mask-size: 16px 100%; mask-size: 16px 100%; }
  .qb-receipt__token, .qb-receipt__stamp { font-size: 24px; }
  .qb-receipt__row { grid-template-columns: 112px minmax(0, 1fr); }
  .qb-receipt__tx { font-size: 24px; }
  .qb-receipt__steps .qb-key { font-size: 24px; }
  .qb-receipt__steps .qb-status { font-size: 20px; }
  .qb-receipts__empty { position: static; margin: 14px 6px; font-size: 21px; }
  .qb-today { position: static; width: auto; margin: 0 6px; padding: 12px; }
  .qb-today .qb-plate__title { font-size: 30px; }
  .qb-today__count { font-size: 34px; }
  .qb-today__breaker { font-size: 21px; }
  .qb-furnace__label { font-size: max(14px, 4.4cqw); }
  .qb-furnace__plate span { font-size: max(13px, 3.1cqw); }
  .qb-furnace__plate strong { font-size: max(16px, 4.4cqw); }
  .qb-ledger__row { grid-template-columns: 1fr 1fr; row-gap: 4px; padding: 8px 12px; font-size: 24px; }
  .qb-ledger__quit { font-size: 28px; }
  .qb-ledger__tx { font-size: 26px; }
  .qb-board__title { font-size: clamp(40px, 13cqw, 60px); }
  .qb-board__row { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); }
  .qb-board__line, .qb-board__days { font-size: 20px; }
  .qb-board__evidence { font-size: 18px; }
  .qb-vault__window { font-size: max(13px, 3.9cqw); }
  .qb-vault:is([data-switch="out"], [data-switch="unknown"]) .qb-vault__window { font-size: max(12px, 3cqw); }
  .qb-vault__note { left: 0; top: auto; width: auto; height: auto; position: static; padding: 8px 4px 0; font-size: 20px; }
  .qb-lamp { grid-template-columns: 48px minmax(0, 1fr); }
  .qb-lamp__light { width: 32px; height: 32px; }
  .qb-lamp__text { font-size: 21px; }
  .qb-can__head { font-size: 26px; }
  .qb-keys__line { font-size: 21px; }
  .qb-session__line { font-size: 24px; }
  .qb-deskstate__lamp .qb-lamp__text { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .qb-dial__needle { transition: none; }
}

/* Wallet handoff uses the app's existing keys at both widths. */
.qb-wallet-help { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.qb-wallet-help[hidden], .qb-burn-due[hidden] { display: none; }
.qb-wallet-help .qb-status { flex-basis: 100%; }
.qb-wallet-help .qb-key { min-height: 44px; }
.qb-tape__book { color: var(--qb-muted); }
.qb-burn-due { position: relative; z-index: 1; margin-bottom: 16px; }

/* D11 AUTO TRADER: the approved vault, backed by the X7 control view. */
.qb-screen--security { grid-template-columns: minmax(0, 1.8fr) minmax(350px, 1fr); }
.qb-auto {
  container: qbauto / inline-size;
  display: grid;
  border: 14px solid transparent;
  border-image: url("community-art/panel.webp") 60 / 24px stretch;
  border-radius: 12px;
  background: var(--qb-well);
}
.qb-auto__vault { position: relative; min-width: 0; overflow: hidden; border-radius: 16px 16px 0 0; }
.qb-auto__art { display: block; width: 100%; height: auto; }
.qb-auto__window { position: absolute; left: 72.79%; top: 24.65%; width: 18.66%; height: 15.3%; display: grid; justify-items: center; align-content: center; gap: 2px; }
.qb-auto__title { color: var(--qb-orange); font: 400 max(14px, 3.25cqw)/1 var(--qb-display); white-space: nowrap; letter-spacing: .01em; text-shadow: 2px 2px #000; font-size-adjust: var(--qb-display-adjust); }
.qb-auto__lamp { width: max(14px, 2.8cqw); height: max(14px, 2.8cqw); border: 2px solid #362700; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff4ac, #ffb400 45%, #944000); box-shadow: 0 0 9px #ff9c00; }
.qb-auto__state { min-height: 1em; color: var(--qb-orange); font: 400 max(14px, 3cqw)/1 var(--qb-display); text-align: center; font-size-adjust: var(--qb-display-adjust); }
.qb-auto__lever { position: absolute; left: 74.16%; top: 41.23%; width: 15.25%; height: 32.09%; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.qb-auto__lever-off { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.qb-auto__lever-off[hidden] { display: none; }
.qb-auto__lever:disabled { cursor: not-allowed; }
.qb-auto__lever:focus-visible { outline: 3px solid var(--qb-cream); outline-offset: 4px; }
.qb-auto__key { width: calc(100% - 12px); margin: 0 6px; min-height: 64px; padding: 10px 8px; font-size: clamp(25px, 7cqw, 72px); line-height: .95; text-shadow: 3px 3px #4d1500; }
.qb-auto__key:disabled { opacity: 1; cursor: not-allowed; }
.qb-auto__copy { padding: 14px 8px 10px; color: var(--qb-cream); font: 400 max(16px, 2.7cqw)/1.15 var(--qb-mono); text-align: center; font-size-adjust: none; }
.qb-auto__note { padding: 6px 10px; text-align: center; font-size: max(16px, 2.6cqw); }
.qb-auto__note:empty { display: none; }
.qb-auto[data-state="active"] .qb-auto__lamp { background: radial-gradient(circle at 35% 30%, #c9ffe0, var(--qb-mint) 45%, #0f6b37); box-shadow: 0 0 14px var(--qb-mint); }
.qb-auto:is([data-state="pending"], [data-state="enrolling"], [data-state="revoking"]) .qb-auto__lamp { animation: qb-auto-wait 1.3s ease-in-out infinite alternate; }
.qb-auto[data-state="unknown"] .qb-auto__lamp, .qb-auto[data-state="refused"] .qb-auto__lamp { opacity: .35; box-shadow: none; }
.qb-security-trade { grid-template-columns: minmax(110px, .85fr) minmax(0, 1.3fr); container: qbsecuritytrade / inline-size; }
.qb-security-trade .qb-plate__title { grid-column: 1 / -1; }
.qb-security-trade .qb-trade__amount { min-width: 0; font-size: min(54px, 21cqw); }
.qb-security-trade .qb-trade__label { font-size: 24px; }
.qb-security-trade .qb-trade__limits { font-size: max(18px, 5cqw); }
.qb-security-trade .qb-trade__range { min-height: 44px; width: 100%; }
.qb-security__details { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(350px, 1fr); gap: 10px 12px; }
.qb-manual { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; grid-column: 1 / -1; padding: 12px; border: 2px solid var(--qb-line); border-radius: 8px; }
.qb-manual .qb-vault__window, .qb-manual .qb-vault__note { position: static; width: auto; height: auto; padding: 0; font-size: 22px; }
.qb-manual .qb-vault__window { color: var(--qb-mint); }
.qb-manual__lever { font: 400 22px/1.1 var(--qb-mono); min-height: 44px; font-size-adjust: none; }
.qb-security__details > .qb-vault__state, .qb-security__details > .qb-vault__status { grid-column: 1 / -1; }
.qb-security__details > .qb-vault__status:empty { display: none; }
.qb-security__side .qb-can__list { gap: 8px; }
.qb-security__side .qb-lamp__text { font-size: 22px; }
@keyframes qb-auto-wait { to { opacity: .45; } }
@container qb (max-width: 979px) {
  .qb-screen--security, .qb-security__details { grid-template-columns: minmax(0, 1fr); }
}
@container qb (max-width: 719px) {
  .qb-auto { border-width: 8px; border-image-width: 18px; }
  .qb-auto__title { font-size: max(12px, 3.55cqw); }
  .qb-auto__key { min-height: 54px; font-size: max(23px, 7cqw); margin-top: 0; }
  .qb-auto__copy { font-size: 16px; padding: 12px 5px; }
  .qb-auto__note { font-size: 18px; }
  .qb-auto__window { top: 24%; gap: 0; }
  .qb-auto__state { font-size: 14px; }
  .qb-auto__lamp { width: 14px; height: 14px; }
  .qb-security-trade .qb-dial { max-width: 125px; }
  .qb-security__side .qb-lamp__text { font-size: 21px; }
  .qb-security__details .qb-keys__line { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .qb-auto__lamp { animation: none !important; } }
.qb-auto__account { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; font-size: 22px; }
.qb-auto__account[hidden] { display: none; }
.qb-policy-details { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qb-policy-details__part { display: grid; align-content: start; gap: 10px; }
.qb-policy-details > .qb-can__line { grid-column: 1 / -1; }
@container qb (max-width: 719px) { .qb-policy-details { grid-template-columns: minmax(0, 1fr); } }
/* A2 keeps wallet controls above the two rows of tabs on SECURITY. */
@container qb (max-width: 719px) {
  .qb-app[data-tab="security"] .qb-head { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "gary brand" "auth auth" "tabs tabs"; gap: 6px 8px; padding: 6px; }
  .qb-app[data-tab="security"] .qb-head__gary { width: 56px; }
  .qb-app[data-tab="security"] .qb-head__title { font-size: clamp(27px, 8.8cqw, 36px); }
  .qb-app[data-tab="security"] .qb-head__checked { font-size: 14px; }
  .qb-app[data-tab="security"] .qb-head__auth .qb-key, .qb-app[data-tab="security"] .qb-head__wallet { min-height: 44px; font-size: 23px; }
  .qb-app[data-tab="security"] .qb-tab { min-height: 44px; font-size: clamp(18px, 5.6cqw, 22px); white-space: nowrap; }
  .qb-app[data-tab="security"] .qb-banner { font-size: 16px; line-height: 1.1; padding: 7px 10px; }
  .qb-auto__copy { font-size: 14px; }
  .qb-security__side .qb-can .qb-plate__title { font-size: 28px; }
  .qb-security__side .qb-lamp { grid-template-columns: 34px minmax(0, 1fr); padding: 5px 6px; gap: 6px; }
  .qb-security__side .qb-lamp__light { width: 28px; height: 28px; }
  .qb-security__side .qb-lamp__text { font-size: 17px; padding: 7px 9px; line-height: 1.05; }
  .qb-security__side .qb-deskstate .qb-lamp__text { font-size: 30px; }
  .qb-security-trade .qb-trade__label, .qb-security-trade .qb-trade__limits { font-size: 18px; }
}