/* The app, rebuilt. Everything under .bl uses BackLab's own dark-theme tokens and component
   rules (styles/theme.css, styles.css, depth.css, settings.css, indicators.css): square corners,
   1px #5a5a5a hairlines, Menlo labels, inverted white for "on". Nothing here is a screenshot. */

.bl { --bg: #000; --panel: #000; --surface-2: #161616; --surface-3: #4e4e4e; --border: #5a5a5a; --border-soft: #4e4e4e; --border-hover: #6a6a6a;
  --text: #fff; --text-dim: #9a9a9a; --text-mute: #848484; --pos: #1b5e20; --pos-2: #31a247; --neg: #ff0014; --neg-2: #ff0014; --neg-solid: #e30012;
  --detail: #d4b36f; --gold: #ffb02e; --hbox: #1a1a1a; --hline: #4d4d4d;
  --font: "Segoe UI", Tahoma, Arial, sans-serif; --mono: Menlo, "SF Mono", Consolas, "Geist Mono", monospace;
  font-family: var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; line-height: normal; }
.bl *, .bl *::before, .bl *::after { box-sizing: border-box; }
.bl :where(button) { font: inherit; color: inherit; cursor: pointer; }
.bl :focus-visible { outline: 1px solid var(--detail); outline-offset: -1px; border-radius: 0; }

/* a fixed-size app window, scaled to fit its column like an image */
.fit { position: relative; width: 100%; }
.fit > .bl-win { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.bl-win { display: flex; flex-direction: column; border: 1px solid var(--border); overflow: hidden; }

/* toolbar — styles.css:96-565 */
.bl-toolbar { position: relative; height: 40px; flex: 0 0 40px; display: flex; align-items: center; gap: 8px; padding: 0 133px 0 8px; background: #000; border-bottom: 1px solid var(--border); }
.ct-group { display: flex; align-items: stretch; height: 28px; margin-right: 2px; border: 1px solid var(--text); overflow: hidden; }
.chart-tab { display: flex; align-items: center; padding: 0 12px; font-size: 14px; font-weight: 600; background: var(--neg-solid); border-right: 1px solid var(--text); }
.ct-split { display: flex; align-items: center; justify-content: center; padding: 0 10px; min-width: 34px; background: var(--neg-solid); font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; line-height: 1; }
.combo { height: 28px; display: flex; align-items: center; background: var(--hbox); border: 1px solid var(--hline); font-size: 14px; }
.combo-sym { min-width: 208px; }
.cs-nm { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-dim); padding: 0 11px; white-space: nowrap; }
.cs-px { display: flex; align-items: center; height: 100%; flex: 1 1 auto; justify-content: center; padding: 0 11px; border-left: 1px solid var(--hline); font-family: var(--mono); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.cs-px.up { color: var(--pos-2); } .cs-px.dn { color: var(--neg-2); }
.combo-tf { width: 136px; justify-content: space-between; }
.combo-text { padding: 0 8px; white-space: nowrap; }
.combo-btn { position: relative; width: 22px; height: 100%; border-left: 1px solid var(--border); background: var(--surface-2); }
.combo-btn::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -40%); border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--text); }
.mtf-time { display: flex; align-items: center; gap: 5px; }
.mt-box { height: 28px; display: flex; align-items: center; padding: 0 10px; background: var(--hbox); border: 1px solid var(--hline); }
.mt-clock { width: 128px; justify-content: center; font-family: var(--mono); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.5px; gap: 6px; line-height: 1; }
.mt-ses { font-weight: 800; letter-spacing: 0.9px; }
.mtf-cells { display: flex; gap: 3px; }
.mtf-cell { font-size: 9.5px; font-weight: 800; letter-spacing: 0.2px; line-height: 1; padding: 4px; min-width: 20px; text-align: center; color: var(--text-dim); background: var(--surface-2); border: 1px solid transparent; transition: background-color 150ms ease-out, border-color 150ms ease-out; }
.mtf-cell.up { color: #fff; background: var(--pos); border-color: var(--pos); }
.mtf-cell.down { color: #fff; background: var(--neg-solid); border-color: var(--neg-solid); }
.mtf-cell.cur { border-color: var(--text); }
.bl-icons { display: flex; gap: 1px; margin: 0 auto; }
.ic { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid transparent; }
.ic:hover { border-color: rgba(78,78,78,0.4); background: rgba(78,78,78,0.4); }
.ic.on { background: var(--surface-3); border-color: var(--surface-3); }
.ic svg { width: 24px; height: 24px; fill: #fff; stroke: #fff; }
.ic-mask { display: block; width: 20px; height: 20px; background-color: #fff; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.v2box { display: flex; align-items: center; gap: 4px; margin-left: 6px; padding: 3px 5px; border: 1px solid var(--hline); background: var(--hbox); }
.v2box .ic { width: 25px; height: 25px; }
.v2box .ic:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.45); }
.v2box .ic-mask { width: 19px; height: 19px; }
.wbtns { position: absolute; right: 8px; top: 7px; display: flex; gap: 5px; }
.wb { width: 29px; height: 25px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface-2); }
.wb-min span { width: 11px; height: 2px; background: #fff; }
.wb-max span { width: 11px; height: 10px; border: 1.5px solid #fff; }
.wb-close { font-size: 14px; line-height: 1; background: var(--neg); border-color: var(--neg); }

/* canvases */
.bl-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
.bl-pane { position: relative; flex: 1 1 auto; min-height: 0; }

/* Depth panel — depth.css */
.dd-head, .panel-head { flex: 0 0 30px; height: 30px; display: flex; align-items: center; gap: 12px; padding: 0 6px 0 11px; border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); }
.panel-head { border-top: 0; }
.dd-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; }
.dp-logo { width: 15px; height: 15px; background-color: #fff; -webkit-mask: url(/assets/app/depth-icon.svg) center / contain no-repeat; mask: url(/assets/app/depth-icon.svg) center / contain no-repeat; }
.dp-headr { display: flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 8px; }
.dp-sym { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
.dp-chip { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; padding: 2px 8px; line-height: 14px; border: 1px solid var(--border); color: var(--text-dim); }
.dp-chip.live { color: var(--text); border-color: var(--pos-2); }
.px-close { width: 24px; height: 22px; display: grid; place-items: center; color: var(--text-dim); font-size: 12px; }
.px-close:hover { background: var(--neg-solid); color: #fff; }
.dp-bar { flex: 0 0 48px; display: flex; align-items: center; gap: 16px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.dp-grp { display: flex; flex-direction: column; justify-content: center; gap: 4px; flex-shrink: 0; }
.dp-k { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute); line-height: 1; }
.dp-seg { display: inline-flex; border: 1px solid var(--border); }
.dp-seg-b { height: 24px; padding: 0 8px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-dim); background: var(--bg); border: 0; transition: background-color 150ms ease-out, color 150ms ease-out; }
.dp-seg-b + .dp-seg-b { border-left: 1px solid var(--border); }
.dp-seg-b:hover:not(.on) { color: var(--text); background: var(--surface-2); }
.dp-seg-b.on { color: var(--bg); background: var(--text); }
.dp-slider { -webkit-appearance: none; appearance: none; width: 72px; height: 16px; margin: 0; background: transparent; cursor: pointer; }
.dp-slider::-webkit-slider-runnable-track { height: 2px; background: var(--border); }
.dp-slider::-moz-range-track { height: 2px; background: var(--border); }
.dp-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 8px; height: 14px; margin-top: -6px; background: var(--text); border: 0; border-radius: 0; }
.dp-slider::-moz-range-thumb { width: 8px; height: 14px; background: var(--text); border: 0; border-radius: 0; }
.dp-slider:hover::-webkit-slider-thumb { background: var(--detail); }
.dp-togs { display: flex; border: 1px solid var(--border); }
.dp-tog { width: 28px; height: 28px; display: grid; place-items: center; color: var(--text-mute); background: var(--bg); border: 0; transition: background-color 150ms ease-out, color 150ms ease-out; }
.dp-tog + .dp-tog { border-left: 1px solid var(--border); }
.dp-tog svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; }
.dp-tog.on { color: var(--bg); background: var(--text); }
.dp-tog:hover:not(.on) { color: var(--text); background: var(--surface-2); }
.dp-sp { flex: 1; }
.dp-live { height: 28px; display: flex; align-items: center; gap: 8px; padding: 0 12px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; border: 1px solid var(--border); background: var(--bg); }
.dp-dot { width: 6px; height: 6px; background: var(--pos-2); }
.dp-kpis { flex: 0 0 56px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(0, 2fr); border-top: 1px solid var(--border); }
.dp-kpi { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 16px; border-left: 1px solid var(--border-soft); min-width: 0; }
.dp-kpi:first-child { border-left: 0; }
.dp-v { font-family: var(--mono); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.dp-v.pos { color: var(--pos-2); } .dp-v.neg { color: var(--neg-2); } .dp-v.gold { color: var(--detail); }
.dp-hv { font-weight: 400; color: var(--text-dim); }

/* settings — settings.css */
.set-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.set-nav { display: flex; flex-direction: column; gap: 16px; padding: 16px 12px; border-right: 1px solid var(--border); }
.set-find { height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border: 1px solid var(--border); }
.set-find span { flex: 1; font-size: 13px; color: var(--text-mute); }
.set-kbd { font-family: var(--mono); font-size: 9px; color: var(--text-mute); border: 1px solid var(--border-soft); padding: 0 4px; }
.set-bar { display: flex; flex-direction: column; gap: 2px; }
.set-bt { display: flex; align-items: center; gap: 12px; width: 100%; height: 32px; padding: 0 12px; font-size: 13px; font-weight: 600; text-align: left; color: var(--text-dim); background: transparent; border: 0; box-shadow: inset 2px 0 0 transparent; transition: color 150ms ease-out, background-color 150ms ease-out; }
.set-bt-n { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; color: var(--text-mute); }
.set-bt:hover:not(.on) { color: var(--text); background: var(--surface-2); }
.set-bt.on { color: var(--text); background: var(--surface-2); box-shadow: inset 2px 0 0 var(--detail); }
.set-bt.on .set-bt-n { color: var(--detail); }
.set-jump { display: flex; flex-direction: column; margin: 2px 0 8px 32px; border-left: 1px solid var(--border); }
.set-jump span { height: 24px; display: flex; align-items: center; padding: 0 12px; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); }
.set-pane { display: flex; flex-direction: column; gap: 16px; padding: 24px 32px 32px; min-width: 0; }
.set-ph-k { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--detail); }
.set-ph-t { margin: 4px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.set-ph-d { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.set-sec { padding: 0 16px; background: var(--surface-2); border: 1px solid var(--border); }
.set-sec-h { display: flex; justify-content: space-between; align-items: center; height: 40px; margin: 0 -16px; padding: 0 16px; border-bottom: 1px solid var(--border-soft); }
.set-sec-t { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); }
.set-sec-m { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; color: var(--text-mute); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 12px 0; border-top: 1px solid var(--border-soft); }
.set-sec-h + .set-row { border-top: 0; }
.set-row-lbl { font-size: 13px; font-weight: 600; line-height: 1.5; }
.set-row-sub { font-size: 11px; line-height: 1.5; color: var(--text-mute); }
.set-seg { display: inline-flex; border: 1px solid var(--border); }
.set-seg-b { height: 30px; padding: 0 12px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-dim); background: var(--bg); border: 0; transition: background-color 150ms ease-out, color 150ms ease-out; }
.set-seg-b + .set-seg-b { border-left: 1px solid var(--border); }
.set-seg-b:hover:not(.on) { color: var(--text); background: var(--surface-2); }
.set-seg-b.on { color: var(--bg); background: var(--text); }
.set-btn { height: 32px; padding: 0 16px; font-size: 11px; font-weight: 600; background: var(--bg); border: 1px solid var(--border); }
.set-btn:hover { border-color: var(--text-dim); }
.set-btn:active { background: var(--surface-3); }
.set-slider { width: 240px; display: grid; grid-template-columns: minmax(0, 1fr) 48px auto; align-items: center; column-gap: 12px; }
.set-slider-v { font-family: var(--mono); font-size: 11px; font-weight: 700; text-align: right; }
.set-slider input { -webkit-appearance: none; appearance: none; width: 100%; height: 16px; margin: 0; background: transparent; cursor: pointer; }
.set-slider input::-webkit-slider-runnable-track { height: 2px; background: var(--border); }
.set-slider input::-moz-range-track { height: 2px; background: var(--border); }
.set-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; background: var(--text-dim); border: 0; border-radius: 0; }
.set-slider input::-moz-range-thumb { width: 12px; height: 12px; background: var(--text-dim); border: 0; border-radius: 0; }
.set-slider input:hover::-webkit-slider-thumb { background: var(--text); }
.set-slider input:active::-webkit-slider-thumb { background: var(--detail); }

/* the shared square toggle — styles.css:48-69 */
.tog { position: relative; flex: none; width: 36px; height: 20px; padding: 0; border: 1px solid var(--border); background: var(--panel); transition: background-color 200ms ease-out, border-color 200ms ease-out; }
.tog i { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; background: var(--text-mute); transition: left 200ms ease-out, background-color 200ms ease-out, transform 150ms ease-out; }
.tog:hover { border-color: var(--border-hover); } .tog:hover i { background: var(--text-dim); }
.tog:active i { transform: scale(0.85); }
.tog[aria-checked="true"] { background: var(--pos); border-color: var(--pos); }
.tog[aria-checked="true"] i { left: 19px; background: #fff; }
.tog[aria-checked="true"]:hover { border-color: var(--pos-2); }

/* indicators popover — candles.css + indicators.css */
.cdl-pop { width: 300px; border: 1px solid var(--border); background: var(--panel); flex: none; }
.cdl-pop-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 13px; border-bottom: 1px solid var(--border); }
.cdl-pop-title { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; }
.cdl-pop-x { width: 20px; height: 20px; display: grid; place-items: center; color: var(--text-dim); font-size: 12px; }
.ind-find { margin: 12px 16px 8px; padding: 4px 7px; font-size: 11.5px; color: var(--text-mute); border: 1px solid var(--border); }
.ind-grp { padding: 12px 12px 4px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); border-bottom: 1px solid var(--border-soft); }
.ind-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border-soft); transition: background-color 150ms ease-out; }
.ind-row:hover { background: var(--surface-2); }
.ind-lab { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.ind-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ind-name { font-size: 12.5px; white-space: nowrap; }
.ind-gear { width: 22px; height: 22px; display: grid; place-items: center; color: var(--text-mute); font-size: 12px; }
.ind-note { padding: 9px 12px 7px; font-size: 10.5px; color: var(--text-mute); line-height: 1.5; }

/* site-side captions under a replica */
.readout { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 14px; font: 500 14px/1.5 var(--mono, monospace); color: #c2baae; min-height: 1.5em; }
.readout b { color: #ede6da; font-weight: 600; }