/* ==========================================================================
   CryptonBot Pro+ — Investor Paper Dashboard theme
   CRYPTONBOT-PAPER-DASHBOARD-INVESTOR-RESPONSIVE-001

   Self-contained dark theme + responsive layout for /dashboard (binance_pro.html).
   No external fonts/CDN. Desktop dense (~70/30 chart/right split), tablet 2-col,
   mobile single column with swipeable ticker and card/scroller tables.
   ========================================================================== */

:root {
    --cb-bg: #0a0e14;
    --cb-bg-2: #0e131b;
    --cb-panel: #131a24;
    --cb-panel-2: #172130;
    --cb-border: #1e2a3a;
    --cb-border-soft: #223047;
    --cb-text: #e8edf4;
    --cb-text-2: #8a97a8;
    --cb-text-3: #5c6a7d;
    --cb-green: #26c281;
    --cb-green-dim: rgba(38, 194, 129, 0.14);
    --cb-red: #f0616d;
    --cb-red-dim: rgba(240, 97, 109, 0.14);
    --cb-amber: #f0b84c;
    --cb-cyan: #34c4e0;
    --cb-graygb: #4a5a70;
    --cb-radius: 8px;
    --cb-gap: 10px;
    --cb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --cb-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--cb-bg);
    color: var(--cb-text);
    font-family: var(--cb-font);
    font-size: 13px;
    line-height: 1.4;
    -webkit-text-size-adjust: 100%;
}

body.cb { overflow-x: hidden; }

b { font-weight: 600; }
u { text-decoration: none; color: var(--cb-text-3); font-size: 0.78em; font-weight: 500; }

.cb-muted { color: var(--cb-text-2); }
.cb-pos { color: var(--cb-green); }
.cb-neg { color: var(--cb-red); }
.cb-warn { color: var(--cb-amber); }

/* ---------------------------------------------------------------- header */
.cb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    background: var(--cb-bg-2);
    border-bottom: 1px solid var(--cb-border);
    position: sticky;
    top: 0;
    z-index: 30;
    flex-wrap: wrap;
}
.cb-header__left, .cb-header__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.cb-logo { color: var(--cb-green); display: inline-flex; }
.cb-brand { font-size: 15px; font-weight: 500; letter-spacing: 0.2px; }
.cb-brand b { color: var(--cb-green); }
.cb-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 3px 7px;
    border-radius: 4px;
}
.cb-badge--paper { background: rgba(52, 196, 224, 0.16); color: var(--cb-cyan); border: 1px solid rgba(52, 196, 224, 0.35); }
.cb-badge--muted { background: transparent; color: var(--cb-text-3); border: 1px solid var(--cb-border-soft); }
.cb-badge--warn { background: rgba(240, 184, 76, 0.16); color: var(--cb-amber); border: 1px solid rgba(240, 184, 76, 0.4); }
.cb-badge--off { background: var(--cb-red-dim); color: var(--cb-red); border: 1px solid rgba(240, 97, 109, 0.4); }
.cb-fresh { font-size: 9.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--cb-text-3); padding: 1px 5px; border-radius: 3px; border: 1px solid var(--cb-border-soft); }
.cb-fresh.is-live { color: var(--cb-green); border-color: rgba(38,194,129,0.4); }
.cb-fresh.is-stale { color: var(--cb-amber); border-color: rgba(240,184,76,0.4); }
.cb-fresh.is-cached { color: var(--cb-cyan); border-color: rgba(52,196,224,0.4); }
.cb-hstat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cb-text-2); }
.cb-hstat em { font-style: normal; }
.cb-conn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cb-text-2); }
.cb-clock { color: var(--cb-text-3); font-variant-numeric: tabular-nums; }
.cb-profile {
    font-size: 12px;
    color: var(--cb-text);
    background: var(--cb-panel);
    border: 1px solid var(--cb-border-soft);
    border-radius: 4px;
    padding: 3px 9px;
}
.cb-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cb-dot--green { background: var(--cb-green); box-shadow: 0 0 6px var(--cb-green); }
.cb-dot--amber { background: var(--cb-amber); }
.cb-dot--red { background: var(--cb-red); }

.cb-chip {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    display: inline-block;
}
.cb-chip--muted { background: var(--cb-panel); color: var(--cb-text-3); border: 1px solid var(--cb-border-soft); }
.cb-chip--ok { background: var(--cb-green-dim); color: var(--cb-green); }
.cb-chip--off { background: var(--cb-red-dim); color: var(--cb-red); }
.cb-chip--warn { background: rgba(240, 184, 76, 0.16); color: var(--cb-amber); }

/* ---------------------------------------------------------------- demo bar */
.cb-demo {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 7px 14px; background: var(--cb-bg-2); border-bottom: 1px solid var(--cb-border);
}
.cb-demo__modes { display: inline-flex; border: 1px solid var(--cb-border-soft); border-radius: 6px; overflow: hidden; }
.cb-demo__mode {
    background: transparent; color: var(--cb-text-2); border: none; cursor: pointer;
    font-size: 11px; font-weight: 700; letter-spacing: 0.4px; padding: 5px 12px; min-height: 30px;
}
.cb-demo__mode--active { background: var(--cb-panel-2); color: var(--cb-cyan); }
.cb-demo__controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cb-demo__controls[hidden] { display: none; }
.cb-demo__field { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--cb-text-3); }
.cb-demo__select {
    background: var(--cb-panel); color: var(--cb-text); border: 1px solid var(--cb-border-soft);
    border-radius: 4px; font-size: 11px; padding: 4px 6px; min-height: 30px;
}
.cb-demo__btn {
    background: var(--cb-panel-2); color: var(--cb-text); border: 1px solid var(--cb-border-soft);
    border-radius: 5px; font-size: 11px; font-weight: 600; padding: 6px 11px; cursor: pointer; min-height: 32px;
}
.cb-demo__btn--primary { background: var(--cb-green-dim); color: var(--cb-green); border-color: rgba(38,194,129,0.35); }
.cb-demo__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.cb-demo__status { font-size: 11px; color: var(--cb-text-2); font-variant-numeric: tabular-nums; }
.cb-demo__market { font-size: 10px; font-weight: 700; color: var(--cb-red); border: 1px solid rgba(240,97,109,0.4); border-radius: 4px; padding: 2px 6px; }
.cb-demo__market[hidden] { display: none; }

/* indicator toggles + bounded panes */
.cb-ind-toggles { display: inline-flex; gap: 12px; margin-left: auto; }
.cb-ind-toggles label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: var(--cb-text-3); }
.cb-ind-pane { margin-top: 6px; border-top: 1px solid var(--cb-border); padding-top: 4px; }
.cb-ind-pane[hidden] { display: none; }
.cb-ind-pane__label { font-size: 10px; font-weight: 700; letter-spacing: 0.4px; color: var(--cb-text-3); text-transform: uppercase; margin-bottom: 2px; }
.cb-ind-pane__chart { width: 100%; }
#rsi-chart { height: 92px; }
#atr-chart { height: 84px; }

/* ---------------------------------------------------------------- ticker */
.cb-ticker {
    background: var(--cb-bg-2);
    border-bottom: 1px solid var(--cb-border);
    overflow: hidden;
}
/* Running marquee. #ticker-track holds the live #ticker-seq plus aria-hidden,
   id-stripped clones (built by dashboard.js) so the horizontal loop is seamless.
   The shift distance (one repeat unit incl. gap) and the duration are set as CSS
   custom properties in JS from the measured sequence width, for constant speed
   at any viewport. Motion pauses on hover/focus and is disabled under
   prefers-reduced-motion (see the reduced-motion block below). */
.cb-ticker__track {
    display: flex;
    align-items: center;
    column-gap: 22px;
    padding: 8px 14px;
    width: max-content;
    animation: cb-marquee var(--cb-marquee-dur, 40s) linear infinite;
    will-change: transform;
}
.cb-ticker:hover .cb-ticker__track,
.cb-ticker:focus-within .cb-ticker__track { animation-play-state: paused; }
.cb-ticker__seq {
    display: flex;
    align-items: center;
    gap: 22px;
    white-space: nowrap;
    flex: none;
    font-variant-numeric: tabular-nums;
}
@keyframes cb-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-1 * var(--cb-marquee-shift, 50%))); }
}
.cb-tick { display: flex; flex-direction: column; gap: 1px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cb-tick em { font-style: normal; font-size: 9.5px; letter-spacing: 0.4px; color: var(--cb-text-3); }
.cb-tick b { font-size: 12.5px; font-weight: 600; }
.cb-tick--pair { flex-direction: row; align-items: baseline; gap: 8px; }
.cb-star { color: var(--cb-amber); font-size: 13px; }
.cb-tick__pair { font-weight: 700; font-size: 13px; }
.cb-tick__price { font-size: 16px; font-weight: 700; }
.cb-tick__change { font-size: 12px; font-weight: 600; }
.cb-tick--sep { border-left: 1px solid var(--cb-border-soft); padding-left: 22px; }
.cb-tick--markets { flex-direction: row; align-items: center; gap: 6px; }
.cb-tick--markets em { color: var(--cb-text-3); }
.cb-mk {
    font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
    background: var(--cb-panel); color: var(--cb-graygb); border: 1px solid var(--cb-border-soft);
}
.cb-mk--soon { opacity: 0.7; }

/* ---------------------------------------------------------------- layout */
.cb-main { padding: var(--cb-gap); display: flex; flex-direction: column; gap: var(--cb-gap); max-width: 2200px; margin: 0 auto; }

.cb-panel {
    background: var(--cb-panel);
    border: 1px solid var(--cb-border);
    border-radius: var(--cb-radius);
    padding: 12px;
    min-width: 0;
}
.cb-panel__head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-bottom: 10px;
}
.cb-panel__head--sub { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--cb-border); }
.cb-panel__title { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; color: var(--cb-text-2); text-transform: uppercase; }

/* KPI row */
.cb-kpis {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--cb-gap);
}
.cb-kpi {
    background: var(--cb-panel);
    border: 1px solid var(--cb-border);
    border-radius: var(--cb-radius);
    padding: 12px 14px;
    min-width: 0;
}
.cb-kpi__label { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; color: var(--cb-text-3); text-transform: uppercase; }
.cb-kpi__value { font-size: 21px; font-weight: 700; margin: 6px 0 3px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-kpi__sub { font-size: 11px; color: var(--cb-text-3); font-variant-numeric: tabular-nums; }

/* split: chart 70 / right 30 */
.cb-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: var(--cb-gap); }
.cb-rightcol { display: flex; flex-direction: column; gap: var(--cb-gap); min-width: 0; }

/* chart */
.cb-panel--chart { display: flex; flex-direction: column; }
.cb-chart-title { font-size: 13px; }
.cb-chart-title b { font-size: 14px; }
.cb-dot-sep { color: var(--cb-text-3); margin: 0 6px; }
.cb-chart-tools { display: flex; align-items: center; gap: 8px; }
.cb-tf { display: flex; gap: 2px; }
.cb-tf__btn {
    background: transparent; color: var(--cb-text-2);
    border: 1px solid transparent; border-radius: 4px;
    font-size: 11px; padding: 3px 9px; cursor: pointer; min-height: 26px;
}
.cb-tf__btn:hover { background: var(--cb-panel-2); }
.cb-tf__btn--active { background: var(--cb-panel-2); color: var(--cb-cyan); border-color: var(--cb-border-soft); }
.cb-tf__btn[disabled] { opacity: 0.4; cursor: not-allowed; }
#chart-fit { border-color: var(--cb-border-soft); }
.cb-chart-legend {
    display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; color: var(--cb-text-2);
    padding: 6px 0 8px;
}
.cb-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cb-chart-legend b { color: var(--cb-text); font-variant-numeric: tabular-nums; }
.lg { width: 12px; height: 0; border-top: 2px solid; display: inline-block; }
.lg--grid { border-top-style: dashed; color: var(--cb-graygb); }
.lg--buy { color: var(--cb-green); }
.lg--sell { color: var(--cb-red); }
.lg--avg { border-top-style: dashed; color: var(--cb-cyan); }
.lg--inv { color: var(--cb-text-3); }
.cb-chart-wrap { position: relative; flex: 1; min-height: 300px; }
#price-chart { width: 100%; height: 360px; display: block; }
.cb-chart-empty {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--cb-text-3); font-size: 12px;
}
.cb-chart-empty[hidden] { display: none; }
/* subtle separator between the price pane and the ~20% volume band at the
   bottom (Lightweight Charts v4 has no native pane divider). pointer-events
   none so it never blocks the crosshair. */
.cb-chart-wrap::after {
    content: ""; position: absolute; left: 0; right: 0; top: 74%; height: 1px;
    background: var(--cb-border-soft); opacity: 0.7; pointer-events: none; z-index: 1;
}
/* loading badge shown during a timeframe/interval OHLCV refetch */
.cb-chart-loading {
    position: absolute; top: 8px; left: 8px; z-index: 6;
    font-size: 10px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
    color: var(--cb-cyan); background: rgba(52, 196, 224, 0.12);
    border: 1px solid rgba(52, 196, 224, 0.35); border-radius: 4px; padding: 2px 7px;
}
.cb-chart-loading[hidden] { display: none; }
/* OHLCV crosshair tooltip (positioned by dashboard.js from crosshair events) */
.cb-chart-tip {
    position: absolute; z-index: 5; pointer-events: none;
    background: rgba(10, 14, 20, 0.94); border: 1px solid var(--cb-border-soft);
    border-radius: 6px; padding: 7px 9px; font-size: 11px; line-height: 1.5;
    font-variant-numeric: tabular-nums; color: var(--cb-text);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); white-space: nowrap; min-width: 132px;
}
.cb-chart-tip[hidden] { display: none; }
.cb-chart-tip .cb-tip__t { color: var(--cb-text-3); margin-bottom: 3px; }
.cb-chart-tip .cb-tip__r { display: flex; justify-content: space-between; gap: 16px; }
.cb-chart-tip .cb-tip__k { color: var(--cb-text-2); }
.cb-chart-foot { padding-top: 6px; font-size: 11px; }

/* order book — tabular, tight rows so 8–12 levels/side fit; strict 3-col grid. */
.cb-book { font-variant-numeric: tabular-nums; font-family: var(--cb-mono); font-size: 11px; }
.cb-book__cols, .cb-mtrades__cols {
    display: grid; grid-template-columns: 1.05fr 1fr 1.15fr; gap: 6px;
    color: var(--cb-text-3); font-size: 10px; padding-bottom: 4px; border-bottom: 1px solid var(--cb-border);
}
/* Price | Size | Total — Size and Total right-aligned for scan-ability. */
.cb-book__cols span:nth-child(2), .cb-book__cols span:nth-child(3) { text-align: right; }
/* trades header carries a 4th (Side) column; keep it aligned with the rows. */
.cb-mtrades__cols { grid-template-columns: 1fr 1fr 1fr auto; }
.cb-mtrades__cols span:last-child { text-align: right; }
.cb-book__side { display: flex; flex-direction: column; gap: 0; padding: 3px 0; }
.cb-book__row { display: grid; grid-template-columns: 1.05fr 1fr 1.15fr; gap: 6px; position: relative; padding: 0; line-height: 16px; }
.cb-book__row > span { position: relative; z-index: 1; }
.cb-book__row > span:nth-child(3), .cb-book__row > span:nth-child(4) { text-align: right; }
/* Depth bar is a decorative fill anchored to the price (right) side, width ∝
   normalised cumulative quote total. Keep it out of grid flow — the selector
   must out-specify `.cb-book__row > span` (0,1,1) or the bar claims a grid cell
   and wraps every row. Low opacity so numbers stay readable. */
.cb-book__row > span.cb-book__bar { position: absolute; top: 0; bottom: 0; right: 0; left: auto; z-index: 0; opacity: 0.22; border-radius: 1px; }
/* Price is the first value span (child 2); child 1 is the absolute depth bar,
   so `:first-child` here would miss the price and leave it uncoloured. */
.cb-book__side--asks .cb-book__row > span:nth-child(2) { color: var(--cb-red); }
.cb-book__side--asks .cb-book__bar { background: var(--cb-red); }
.cb-book__side--bids .cb-book__row > span:nth-child(2) { color: var(--cb-green); }
.cb-book__side--bids .cb-book__bar { background: var(--cb-green); }
/* dominant centre row: current price + direction, spread abs + percent. */
.cb-book__mid {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 2px; margin: 2px 0; border-top: 1px solid var(--cb-border); border-bottom: 1px solid var(--cb-border);
    background: rgba(255, 255, 255, 0.02);
}
.cb-book__mid-price { display: inline-flex; align-items: baseline; gap: 5px; }
.cb-book__mid-price b { color: var(--cb-text); font-size: 17px; font-weight: 700; }
.cb-book__dir { font-size: 12px; font-weight: 700; }
.cb-book__mid-spread { font-size: 10.5px; color: var(--cb-text-3); }
.cb-book__mid-spread b { color: var(--cb-text-2); font-weight: 600; }

/* market trades */
.cb-mtrades { display: flex; flex-direction: column; gap: 1px; font-family: var(--cb-mono); font-size: 11px; max-height: 230px; overflow-y: auto; }
.cb-mtrades__row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 4px; padding: 1px 0; font-variant-numeric: tabular-nums; }
.cb-mtrades__row .side-buy { color: var(--cb-green); text-align: right; }
.cb-mtrades__row .side-sell { color: var(--cb-red); text-align: right; }

/* lower + footer grids */
.cb-lower { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cb-gap); }
.cb-footpanels { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cb-gap); }

/* tables */
.cb-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cb-table { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.cb-table th {
    text-align: left; font-weight: 600; color: var(--cb-text-3); font-size: 10px;
    letter-spacing: 0.3px; padding: 4px 8px 6px; border-bottom: 1px solid var(--cb-border); white-space: nowrap;
}
.cb-table td { padding: 5px 8px; border-bottom: 1px solid var(--cb-border-soft); white-space: nowrap; }
.cb-table tr:last-child td { border-bottom: none; }
.cb-side--buy { color: var(--cb-green); font-weight: 600; }
.cb-side--sell { color: var(--cb-red); font-weight: 600; }
.cb-empty { color: var(--cb-text-3); text-align: center; padding: 14px 8px; }

.cb-filter, .cb-tf { display: flex; gap: 2px; }
.cb-filter__btn {
    background: transparent; color: var(--cb-text-2); border: 1px solid transparent;
    border-radius: 4px; font-size: 11px; padding: 3px 9px; cursor: pointer; min-height: 26px;
}
.cb-filter__btn--active { background: var(--cb-panel-2); color: var(--cb-cyan); border-color: var(--cb-border-soft); }

/* inventory / cycles / controller / strategy / risk grids */
.cb-invgrid, .cb-cyclegrid, .cb-strat-grid, .cb-ctrl-rows, .cb-risk-rows {
    display: grid; gap: 8px 12px; margin-bottom: 10px;
}
.cb-invgrid { grid-template-columns: 1fr 1fr; }
.cb-cyclegrid { grid-template-columns: 1fr 1fr 1fr; }
.cb-strat-grid { grid-template-columns: 1fr 1fr; }
.cb-ctrl-rows { grid-template-columns: 1fr; gap: 5px; }
.cb-risk-rows { grid-template-columns: 1fr 1fr; }
.cb-invgrid > div, .cb-cyclegrid > div, .cb-strat-grid > div, .cb-ctrl-rows > div, .cb-risk-rows > div {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.cb-invgrid b, .cb-cyclegrid b, .cb-strat-grid b, .cb-ctrl-rows b, .cb-risk-rows b { font-size: 12.5px; }
.cb-strat-name { font-size: 15px; font-weight: 700; color: var(--cb-cyan); margin-bottom: 10px; }

/* controller buttons — always visually disabled */
.cb-controller { margin-top: 4px; }
.cb-ctrl-btns { display: flex; gap: 8px; margin: 10px 0 8px; }
.cb-btn {
    flex: 1; padding: 9px 12px; border-radius: 6px; font-size: 12px; font-weight: 700;
    letter-spacing: 0.3px; border: 1px solid transparent; min-height: 44px;
}
.cb-btn--start { background: var(--cb-green-dim); color: var(--cb-green); border-color: rgba(38,194,129,0.3); }
.cb-btn--pause { background: rgba(240,184,76,0.14); color: var(--cb-amber); border-color: rgba(240,184,76,0.3); }
.cb-btn[disabled] { cursor: not-allowed; opacity: 0.55; filter: grayscale(0.2); }
.cb-ctrl-note {
    display: flex; align-items: flex-start; gap: 6px; margin: 0;
    font-size: 10.5px; color: var(--cb-text-3); line-height: 1.5;
}
.cb-ctrl-note svg { flex: none; margin-top: 2px; color: var(--cb-graygb); }

/* leverage cards */
.cb-levs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cb-lev {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 12px 4px; border-radius: 6px; border: 1px solid var(--cb-border-soft);
    background: var(--cb-panel-2);
}
.cb-lev b { font-size: 16px; }
.cb-lev span { font-size: 8.5px; font-weight: 700; letter-spacing: 0.4px; }
.cb-lev--active { border-color: var(--cb-cyan); background: rgba(52,196,224,0.1); }
.cb-lev--active b, .cb-lev--active span { color: var(--cb-cyan); }
.cb-lev--research { opacity: 0.75; }
.cb-lev--research span { color: var(--cb-text-2); }
.cb-lev--locked { opacity: 0.5; }
.cb-lev--locked b, .cb-lev--locked span { color: var(--cb-graygb); }

/* events */
.cb-events { display: flex; flex-direction: column; gap: 4px; max-height: 190px; overflow-y: auto; font-size: 11px; }
.cb-event { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid var(--cb-border-soft); }
.cb-event__ts { color: var(--cb-text-3); font-variant-numeric: tabular-nums; font-family: var(--cb-mono); font-size: 10px; white-space: nowrap; }
.cb-event__txt { color: var(--cb-text-2); }
.cb-event__txt b { color: var(--cb-text); }

.cb-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    color: var(--cb-text-3); font-size: 11px; padding: 4px 2px 12px;
}

/* ---------------------------------------------------------------- scrollbars */
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: var(--cb-border-soft); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* narrow desktop: keep the 7-across KPI strip until it can no longer stay
   readable, then fold to a 4-wide block (matches the approved full-width
   desktop terminal, which shows all seven KPIs in a single row). */
@media (max-width: 1180px) {
    .cb-kpis { grid-template-columns: repeat(4, 1fr); }
}

/* tablet landscape / small laptop */
@media (max-width: 1200px) {
    .cb-split { grid-template-columns: 1fr; }
    .cb-rightcol { flex-direction: row; }
    .cb-rightcol > .cb-panel { flex: 1; }
    .cb-lower { grid-template-columns: 1fr 1fr; }
    .cb-footpanels { grid-template-columns: 1fr 1fr; }
}

/* tablet portrait (768) */
@media (max-width: 900px) {
    .cb-kpis { grid-template-columns: repeat(3, 1fr); }
    .cb-kpi:nth-child(n) { grid-row: auto; }
    .cb-kpi__value { font-size: 18px; }
    .cb-rightcol { flex-direction: column; }
}

/* mobile */
@media (max-width: 640px) {
    html, body { font-size: 12.5px; }
    .cb-header { gap: 8px; padding: 8px 10px; }
    .cb-header__right { width: 100%; justify-content: flex-start; gap: 8px; row-gap: 4px; }
    .cb-hstat { font-size: 11px; }

    /* Paper banner first, then equity/pnl/status/controls before chart via order */
    .cb-main { display: flex; flex-direction: column; }
    .cb-kpis { order: 1; grid-template-columns: 1fr 1fr; gap: 8px; }
    .cb-kpi:nth-child(1) { grid-column: 1 / -1; }   /* Total Equity full width */
    .cb-kpi:nth-child(2) { order: 0; }               /* Net PnL prominent */
    .cb-split { order: 3; }
    .cb-lower { order: 4; grid-template-columns: 1fr; }
    .cb-footpanels { order: 5; grid-template-columns: 1fr; }
    .cb-foot { order: 6; }

    /* ticker keeps the marquee; tighten inter-item spacing on small screens */
    .cb-ticker__track { column-gap: 16px; }
    .cb-ticker__seq { gap: 16px; }
    .cb-tick--sep { padding-left: 16px; }

    #price-chart { height: 300px; }
    .cb-chart-wrap { min-height: 300px; }

    /* tables scroll locally; no page-level horizontal overflow */
    .cb-tablewrap { max-width: 100%; }
    .cb-cyclegrid { grid-template-columns: 1fr 1fr; }
    .cb-risk-rows { grid-template-columns: 1fr; }
    .cb-levs { grid-template-columns: repeat(5, 1fr); gap: 4px; }
    .cb-lev { padding: 10px 2px; }
    .cb-lev b { font-size: 14px; }

    .cb-ctrl-btns { flex-direction: column; }
}

@media (max-width: 360px) {
    .cb-kpis { grid-template-columns: 1fr; }
    .cb-kpi:nth-child(1) { grid-column: auto; }
    .cb-cyclegrid { grid-template-columns: 1fr; }
}

/* reduced motion — kill all animation (incl. the ticker marquee) and fall back
   to a static, manually swipeable ticker showing a single (non-duplicated)
   sequence. Honest data is unaffected. */
@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
    .cb-ticker { overflow-x: auto; }
    .cb-ticker__track { width: auto; transform: none !important; }
    .cb-ticker__seq--clone { display: none; }
}