/* Design system extracted verbatim from the bot dashboard
 * (dashboard.py <style> block) so the product looks identical to
 * the dashboard the owner already uses. Copied as TEXT, never
 * imported -- journal/ must stay free of bot modules.
 */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
    --bg:#0a0e16; --panel:#10151f; --panel2:#0d1117; --line:#1c2433;
    --txt:#e2e8f0; --mut:#64748b; --grn:#22c55e; --red:#ef4444;
    --amb:#f59e0b; --blu:#3b82f6;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', sans-serif;
    background:var(--bg); color:var(--txt); padding:0;
}
/* legacy header/nav (kept for safety; shell hides them) */
.header { display:none; }
.nav { display:none; }
.mode-live,.mode-paper,.mode-signal { display:none; }
.time { color:#555; font-size:12px; }

/* ─── App shell: fixed sidebar + main column ─────────────────────── */
.has-sidebar { display:flex; align-items:stretch; min-height:100vh; }
.sidebar {
    position:sticky; top:0; align-self:flex-start;
    width:218px; flex-shrink:0; height:100vh; overflow-y:auto;
    background:var(--panel2); border-right:1px solid var(--line);
    padding:16px 10px 12px 10px;
}
.sidebar-inner { display:flex; flex-direction:column; gap:2px; height:100%; }
.sidebar-brand {
    color:#fff; font-weight:700; font-size:15.5px;
    padding:2px 10px 14px 10px; letter-spacing:.2px;
}
.brand-bolt { color:var(--amb); }
.sb-sect {
    color:var(--mut); font-size:10.5px; font-weight:700; letter-spacing:1.2px;
    text-transform:uppercase; padding:14px 10px 5px 10px;
}
.sb-item {
    display:flex; align-items:center; gap:9px;
    color:#94a3b8; font-size:13px; padding:8px 10px;
    text-decoration:none; border-radius:8px; transition:all .12s;
    border:0; background:transparent; width:100%; cursor:pointer;
    font-family:inherit; text-align:left;
}
.sb-item:hover { color:#fff; background:#151c29; }
.sb-item.active { color:#fff; background:#1b2436; font-weight:600; }
.sb-ico { width:24px; height:24px; display:inline-flex; align-items:center;
           justify-content:center; font-size:12px; flex-shrink:0;
           background:#141b29; border-radius:6px; }
.sb-item.active .sb-ico { background:#243049; }
.ph-ico { display:inline-flex; align-items:center; justify-content:center;
           width:34px; height:34px; border-radius:9px; background:#1d4ed8;
           font-size:17px; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; }
.dot-red { background:var(--red); } .dot-blue { background:var(--blu); }
.sidebar-foot { margin-top:auto; padding-top:10px; border-top:1px solid var(--line); }

/* ── TWO-PANE SIDEBAR (user 2026-08-20) ────────────────────────────
   There are now NINE accounts. In one column that pushed ANALYTICS —
   Calendar, Trades, Range Stats — below the fold, so reaching a
   calendar meant scrolling past every account first. Split it the way
   a journal app does: a RAIL of destinations on the left, and the
   pages of whichever account is active in a second pane beside it.
   Both panes are sticky and scroll independently, so neither can push
   the other out of reach however many accounts get added. */
.sidebar { padding:0; width:auto; display:flex; }
.sb-pane {
    height:100vh; overflow-y:auto; padding:16px 10px 12px 10px;
    display:flex; flex-direction:column; gap:2px;
}
.sb-rail { width:206px; flex-shrink:0; border-right:1px solid var(--line); }
.sb-ctx  { width:196px; flex-shrink:0; border-right:1px solid var(--line);
            background:var(--panel); }
/* The context pane names the account it belongs to, so a Calendar link
   can never be read as belonging to whichever account you last saw. */
.sb-ctx-head {
    display:flex; align-items:center; gap:8px; padding:2px 10px 12px 10px;
    color:#fff; font-weight:700; font-size:13.5px;
    border-bottom:1px solid var(--line); margin-bottom:6px;
}
@media(max-width:1180px) { .sb-ctx { display:none; } }

/* collapsed sidebar (Collapse button) */
body.sb-min .sb-rail { width:58px; }
body.sb-min .sb-ctx { display:none; }
body.sb-min .sb-lbl, body.sb-min .sb-sect { display:none; }

.main-col { flex:1; min-width:0; padding:18px 22px 60px 22px; }

/* ─── Page head: title + market status + refresh ─────────────────── */
.page-head { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.page-head h1 { font-size:21px; color:#fff; font-weight:700; }
.page-head .ph-right { margin-left:auto; display:flex; align-items:center;
                        gap:16px; color:var(--mut); font-size:12.5px; }
.ph-refresh { cursor:pointer; background:none; border:none; color:var(--mut);
               font-size:16px; }
.ph-refresh:hover { color:#fff; }

/* ─── KPI strip ───────────────────────────────────────────────────── */
.kpi-strip {
    display:flex; align-items:center; gap:0; flex-wrap:wrap;
    background:var(--panel); border:1px solid var(--line); border-radius:14px;
    padding:14px 6px; margin-bottom:14px;
}
.kpi { flex:1; min-width:120px; text-align:center; padding:0 14px;
        border-right:1px solid var(--line); }
.kpi:last-child { border-right:none; }
.kpi .k-label { color:var(--mut); font-size:11px; letter-spacing:.4px; }
.kpi .k-value { font-size:19px; font-weight:700; margin-top:4px; }
.pill { display:inline-flex; align-items:center; gap:6px; font-size:12px;
         font-weight:700; padding:4px 12px; border-radius:20px; margin-top:3px; }

/* ─── Action row + dropdown ──────────────────────────────────────── */
.action-row { display:flex; align-items:center; gap:10px; margin-bottom:14px;
               flex-wrap:wrap; }
.abtn { display:inline-flex; align-items:center; gap:8px; border:none;
         border-radius:10px; padding:10px 20px; font-size:13.5px; font-weight:700;
         cursor:pointer; color:#fff; transition:filter .12s; font-family:inherit; }
.abtn:hover { filter:brightness(1.15); }
.abtn-green { background:#15803d; } .abtn-red { background:#b91c1c; }
.abtn-blue  { background:#1d4ed8; } .abtn-gray { background:#1e293b;
               border:1px solid var(--line); color:#cbd5e1; }
.dropdown { position:relative; }
.dropdown-menu {
    display:none; position:absolute; right:0; top:calc(100% + 6px); z-index:300;
    background:#0f1623; border:1px solid var(--line); border-radius:12px;
    min-width:200px; padding:6px; box-shadow:0 12px 34px rgba(0,0,0,.5);
}
.dropdown.open .dropdown-menu { display:block; }
.dd-item { display:flex; align-items:center; gap:10px; width:100%;
            background:none; border:none; color:#cbd5e1; font-size:13px;
            padding:9px 12px; border-radius:8px; cursor:pointer;
            font-family:inherit; text-align:left; text-decoration:none; }
.dd-item:hover { background:#1b2436; color:#fff; }
.dd-danger { color:#f87171; }

/* ─── Footer status bar ──────────────────────────────────────────── */
.foot-bar {
    position:fixed; left:0; right:0; bottom:0; z-index:200;
    display:flex; align-items:center; gap:22px;
    background:#0d1117ee; border-top:1px solid var(--line);
    padding:9px 22px; font-size:12px; color:var(--mut);
    backdrop-filter:blur(6px);
}
.hb-dot { display:inline-block; width:8px; height:8px; border-radius:50%;
           margin-right:6px; }
.foot-collapse { background:none;border:none;color:var(--mut);cursor:pointer;
                  font-size:12px;font-family:inherit; }
.foot-collapse:hover { color:#fff; }

/* ─── Mockup v2: unified KPI panel ───────────────────────────────── */
.kpi2 { display:flex; align-items:stretch; gap:0;
         background:var(--panel); border:1px solid var(--line);
         border-radius:14px; padding:14px 4px; margin-bottom:14px; flex-wrap:wrap; }
.kpi2 .cell { flex:1; min-width:150px; padding:2px 18px;
               border-right:1px solid var(--line); }
.kpi2 .cell:last-child, .kpi2 .cell.nob { border-right:none; }
.kpi2 .c-label { color:var(--mut); font-size:10.5px; letter-spacing:.8px;
                  text-transform:uppercase; font-weight:600; }
.kpi2 .c-value { font-size:21px; font-weight:700; margin-top:3px; }
.kpi2 .c-sub   { color:#475569; font-size:11px; margin-top:3px; }
.kpi2 .statebox { flex:0 0 auto; margin:0 5px; padding:8px 16px;
                   border:1px solid var(--line); border-radius:12px;
                   text-align:center; align-self:center; }

/* ─── Mockup v2: metric cards w/ area sparklines + donut ────────── */
.mrow { display:grid; grid-template-columns:repeat(5,1fr); gap:13px;
         margin-bottom:14px; }
@media(max-width:1100px) { .mrow { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.mcard { background:var(--panel); border:1px solid var(--line);
          border-radius:14px; padding:15px 15px 10px 15px; }
.mcard .m-label { color:var(--mut); font-size:10.5px; letter-spacing:.8px;
                   text-transform:uppercase; font-weight:600; }
.mcard .m-value { font-size:24px; font-weight:700; margin-top:5px; }
.mcard .m-cap   { color:#475569; font-size:10.5px; margin-top:2px; }

/* ─── Mockup v2: inline calendar ─────────────────────────────────── */
.calwrap { display:flex; gap:14px; align-items:flex-start; }
.calgrid { flex:1; min-width:0; }
.calgrid table { width:100%; border-collapse:separate; border-spacing:5px; }
.calgrid th { color:var(--mut); font-size:10.5px; font-weight:600;
               letter-spacing:.8px; padding:4px; }
.cday { background:#0d1320; border:1px solid #161e2d; border-radius:10px;
         min-height:64px; padding:7px 9px; vertical-align:top; }
.cday .dnum { color:#64748b; font-size:11px; font-weight:600; }
.cday .dpnl { font-size:13.5px; font-weight:700; margin-top:3px; }
.cday .dwr  { font-size:10.5px; color:#94a3b8; margin-top:1px; }
.cday.lg-gain { background:#0c2818; border-color:#14532d; }
.cday.sm-gain { background:#0d2014; border-color:#173824; }
.cday.brk     { background:#221a07; border-color:#54430f; }
.cday.sm-loss { background:#270f0f; border-color:#481a1a; }
.cday.lg-loss { background:#321010; border-color:#7f1d1d; }
.wkcol { width:158px; flex-shrink:0; display:flex; flex-direction:column; gap:8px; }
.wkcard { background:#0d1320; border:1px solid #161e2d; border-radius:10px;
           padding:9px 12px; }
.wkcard .w-t { color:var(--mut); font-size:10px; letter-spacing:.8px;
                font-weight:700; }
.wkcard .w-p { font-size:14.5px; font-weight:700; margin-top:2px; }
.wkcard .w-s { color:#475569; font-size:10.5px; margin-top:1px; }
.cal-legend { display:flex; gap:16px; flex-wrap:wrap; margin-top:10px;
               color:#64748b; font-size:10.5px; }
.cal-legend .sq { display:inline-block; width:9px; height:9px;
                   border-radius:2px; margin-right:5px; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:9px;
        overflow:hidden; }
.seg a { padding:5px 14px; font-size:12px; color:#94a3b8; text-decoration:none; }
.seg a.on { background:#1b2436; color:#fff; }

/* ─── Mockup v2: bottom two-column (summary | recent trades) ────── */
.bottom2 { display:grid; grid-template-columns:1.15fr 1fr; gap:14px; }
@media(max-width:1000px) { .bottom2 { grid-template-columns:1fr; } }
.rt-table { width:100%; border-collapse:collapse; font-size:13px; }
.rt-table th { color:var(--mut); font-size:10.5px; text-transform:uppercase;
                letter-spacing:.6px; text-align:left; padding:7px 8px;
                border-bottom:1px solid var(--line); }
.rt-table td { padding:9px 8px; border-bottom:1px solid #131c2b; }
.abtn-purple { background:#6d28d9; }
.help-box { background:#0d1320; border:1px solid #161e2d; border-radius:12px;
             padding:10px 6px; margin-top:8px; }

/* minmax(0,1fr), not 1fr: a grid item defaults to min-width:auto, so it
   REFUSES to shrink below its content and the row overflows instead of
   wrapping. Invisible until the two-pane sidebar narrowed the main
   column, at which point the 4th stat-card hung 16px off the page and
   the whole body scrolled sideways. */
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
          gap:14px; margin-bottom:18px; }
@media(max-width:1150px) { .stats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.stat-card { background:var(--panel); border-radius:14px; padding:18px;
              text-align:center; border:1px solid var(--line); }
.stat-card .label { color:var(--mut); font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
.stat-card .value { font-size:25px; font-weight:700; margin-top:6px; }

.green { color:#22c55e; } .red { color:#ef4444; }
.blue  { color:#3b82f6; } .white{ color:#fff; }
.orange{ color:#f59e0b; }

.section { background:var(--panel); border-radius:14px; padding:20px;
            margin-bottom:16px; border:1px solid var(--line); }
.section h2 { font-size:13px; color:var(--mut); text-transform:uppercase;
               letter-spacing:.8px; margin-bottom:14px; }

/* ── .data-table ────────────────────────────────────────────────────
   This class was used in 26 places and NEVER defined, so every one of
   those tables rendered as raw browser default: no cell padding, so the
   header words ran together into one unreadable string ("Ticker % Move
   RVOL VOL RVOL conf QUALITY Category Board") that lined up with nothing
   below it, and the table shrank to its content while the page had
   hundreds of px of unused width to the right.
   Defining it once fixes every table on the dashboard at the same time. */
.data-table { width:100%; border-collapse:collapse; font-size:13px;
               table-layout:auto; }
.data-table thead th {
    padding:9px 14px; text-align:left; white-space:nowrap;
    color:var(--mut); font-size:10.5px; font-weight:600;
    text-transform:uppercase; letter-spacing:.6px;
    border-bottom:1px solid var(--line);
    position:sticky; top:0; background:var(--panel); z-index:1; }
.data-table tbody td {
    padding:8px 14px; text-align:left; white-space:nowrap;
    border-bottom:1px solid rgba(255,255,255,.04); }
/* LEFT is the safe default and must stay the default: these 26 tables
   include genuinely textual columns (futures Dir/Strategy/Reason,
   /paper/levels Level and "Breakout -> re-entry"), which read as broken
   when right-aligned. Numeric columns opt IN via .num, applied by the
   renderer that knows its own column types. Header and cell carry the
   same class, so a column's header can never drift off its numbers. */
.data-table th.num, .data-table td.num { text-align:right; }
.data-table td.num { font-variant-numeric:tabular-nums; }
.data-table tbody tr:hover td { background:rgba(255,255,255,.035); }
.data-table tbody tr:last-child td { border-bottom:0; }
/* Wide tables scroll INSIDE their own box rather than pushing the page
   sideways (the body must never scroll horizontally). */
.table-wrap { width:100%; overflow-x:auto; }

/* ── .stat-grid ─────────────────────────────────────────────────────
   Same latent bug as .data-table: used on 4 account pages and never
   defined, so its .stat-card children fell back to block layout and
   stacked full-width down the page — four numbers eating ~700px of
   vertical space each time. auto-fit keeps them on one row on a wide
   screen and reflows to two (then one) as the window narrows, instead
   of a fixed column count that would either overflow or waste space. */
.stat-grid { display:grid; gap:14px; margin:12px 0 4px;
              grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }

/* Position cards */
.trade-card { background:#1a1a2e; border-radius:10px; padding:15px; margin-bottom:10px; }
.trade-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.ticker { font-size:20px; font-weight:bold; color:#fff; }
.direction { padding:3px 10px; border-radius:15px; font-size:12px; font-weight:bold; }
.calls { background:#1b5e20; color:#4CAF50; }
.puts  { background:#b71c1c33; color:#e53935; }
.live-badge  { padding:3px 10px; border-radius:15px; font-size:11px; background:#e53935; color:#fff; font-weight:bold; }
.paper-badge { padding:3px 10px; border-radius:15px; font-size:11px; background:#1565c0; color:#fff; font-weight:bold; }
.rejected-badge { padding:3px 10px; border-radius:15px; font-size:11px; background:#333; color:#e53935; font-weight:bold; }
.pending-badge  { padding:3px 10px; border-radius:15px; font-size:11px; background:#333; color:#FF9800; font-weight:bold; }
.trade-details { color:#aaa; font-size:13px; line-height:1.9; }
.trade-details strong { color:#fff; }
.pnl-positive { color:#4CAF50; font-weight:bold; }
.pnl-negative { color:#e53935; font-weight:bold; }
.small { color:#555; font-size:12px; }

/* Trade history rows */
.trade-row { display:flex; align-items:center; gap:12px; padding:10px;
              border-bottom:1px solid #111; font-size:13px; flex-wrap:wrap; }
.trade-row.win  { border-left:3px solid #4CAF50; }
.trade-row.loss { border-left:3px solid #e53935; }
.result-icon { width:24px; height:24px; border-radius:50%;
                display:flex; align-items:center; justify-content:center;
                font-size:11px; font-weight:bold; flex-shrink:0; }
.win  .result-icon { background:#1b5e20; color:#4CAF50; }
.loss .result-icon { background:#b71c1c33; color:#e53935; }
.ticker-sm { font-weight:bold; color:#fff; min-width:48px; }
.direction-sm { padding:2px 8px; border-radius:10px; font-size:11px; }
.pnl { font-weight:bold; min-width:55px; }
.win  .pnl { color:#4CAF50; } .loss .pnl { color:#e53935; }
.pnl-dollar { min-width:70px; color:#888; }
.reason { color:#555; font-size:12px; }
.trade-time { color:#444; font-size:11px; margin-left:auto; }

/* Signal rows */
.signal-row { display:flex; align-items:center; gap:10px; padding:9px;
               border-bottom:1px solid #111; font-size:13px; color:#aaa; flex-wrap:wrap; }
.score-a-plus { background:#1b5e20; color:#4CAF50; padding:2px 8px;
                  border-radius:10px; font-size:11px; font-weight:bold; }
.score-a      { background:#0d47a1; color:#2196F3; padding:2px 8px;
                  border-radius:10px; font-size:11px; font-weight:bold; }
.score-b      { background:#e65100; color:#FF9800; padding:2px 8px;
                  border-radius:10px; font-size:11px; font-weight:bold; }
.score-c      { background:#333;    color:#888;    padding:2px 8px;
                  border-radius:10px; font-size:11px; font-weight:bold; }
.level-support    { color:#4CAF50; font-size:11px; }
.level-resistance { color:#e53935; font-size:11px; }
.level-vwap       { color:#FF9800; font-size:11px; }

/* Signal performance rows */
.perf-row { display:flex; align-items:center; gap:10px; padding:10px;
             border-bottom:1px solid #111; font-size:13px; color:#aaa;
             flex-wrap:wrap; border-left:3px solid transparent; }
.perf-row.win      { border-left-color:#4CAF50; background:#0d1f0d; }
.perf-row.loss     { border-left-color:#e53935; background:#1f0d0d; }
.perf-row.open     { border-left-color:#2196F3; }
.perf-row.rejected { border-left-color:#555; opacity:.6; }
.perf-row.notrade  { border-left-color:#222; opacity:.55; }

.outcome-win      { background:#1b5e20; color:#4CAF50; padding:3px 10px;
                     border-radius:12px; font-size:11px; font-weight:bold; }
.outcome-loss     { background:#b71c1c33; color:#e53935; padding:3px 10px;
                     border-radius:12px; font-size:11px; font-weight:bold; }
.outcome-open     { background:#0d47a1; color:#2196F3; padding:3px 10px;
                     border-radius:12px; font-size:11px; font-weight:bold; }
.outcome-rejected { background:#333; color:#e53935; padding:3px 10px;
                     border-radius:12px; font-size:11px; font-weight:bold; }
.outcome-none     { background:#222; color:#555; padding:3px 10px;
                     border-radius:12px; font-size:11px; font-weight:bold; }

.perf-row-link { display:block; color:inherit; text-decoration:none; }
.perf-row-link:hover .perf-row { background:#181828 !important; }

.empty { color:#333; text-align:center; padding:30px; font-size:14px; }
.divider { border:none; border-top:1px solid #1a1a2e; margin:10px 0; }

@media(max-width:600px) { .stats { grid-template-columns:repeat(2,1fr); } }
/* ─────────────────────────────────────────────────────────────────────────
   Journal page components.

   The block above is the bot dashboard's stylesheet verbatim. The inner
   pages of this product (breakdowns, trades, upload, settings) predate the
   shell and use their own class names, so rather than rewrite every page's
   markup these map those names onto the SAME design tokens. One place to
   change, and the pages read as native dashboard pages.
   ───────────────────────────────────────────────────────────────────────── */

.main-col h1 { font-size:21px; color:#fff; font-weight:700; margin-bottom:14px; }
.main-col h2 { font-size:14px; color:#fff; font-weight:700; margin-bottom:11px; }

.card {
    background:var(--panel); border:1px solid var(--line); border-radius:12px;
    padding:16px 18px; margin-bottom:14px;
}
.card h2 { margin-bottom:12px; }

.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
        gap:12px; margin-bottom:14px; }
.stat { background:var(--panel); border:1px solid var(--line); border-radius:12px;
        padding:14px 16px; }
.stat .lbl { color:var(--mut); font-size:10.5px; text-transform:uppercase;
             letter-spacing:.8px; }
.stat .val { font-size:22px; font-weight:700; margin-top:6px; color:#fff; }

.muted { color:var(--mut); }
.pos   { color:var(--grn); }
.neg   { color:var(--red); }

.badge { display:inline-block; font-size:11px; padding:2px 9px; border-radius:20px;
         background:#141b29; border:1px solid var(--line); color:var(--mut);
         margin-left:7px; vertical-align:middle; }

/* Tab pills — the dashboard's .seg control, applied to the breakdown tabs. */
.tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.tabs a {
    padding:7px 14px; border:1px solid var(--line); border-radius:20px;
    color:#94a3b8; font-size:12.5px; text-decoration:none; background:var(--panel);
    transition:all .12s;
}
.tabs a:hover { color:#fff; background:#151c29; }
.tabs a.on { background:#1d4ed8; border-color:#1d4ed8; color:#fff; font-weight:600; }

/* Tables inside pages: match the dashboard's calendar/section table look. */
.main-col table { width:100%; border-collapse:collapse; font-size:12.5px; }
.main-col th {
    text-align:left; color:var(--mut); font-weight:700; font-size:10.5px;
    text-transform:uppercase; letter-spacing:.6px; padding:9px 11px;
    border-bottom:1px solid var(--line); white-space:nowrap;
}
.main-col td { padding:9px 11px; border-bottom:1px solid #131c2b; }
.main-col tbody tr:hover td, .main-col tr:hover td { background:#141b29; }
.main-col tr.thin td { opacity:.5; }

/* Forms */
.main-col input, .main-col select, .main-col textarea {
    background:#0d1117; border:1px solid var(--line); color:var(--txt);
    padding:10px 12px; border-radius:8px; font-size:14px; width:100%;
    font-family:inherit;
}
.main-col input:focus, .main-col select:focus { outline:none; border-color:#1d4ed8; }
.main-col label { display:block; margin:14px 0 6px; color:var(--mut); font-size:12px; }
.main-col input[type=file] { padding:9px; }

.btn {
    display:inline-flex; align-items:center; gap:8px; border:none; border-radius:10px;
    padding:10px 20px; font-size:13.5px; font-weight:700; cursor:pointer;
    color:#fff; background:#1d4ed8; font-family:inherit; margin-top:14px;
    text-decoration:none;
}
.btn:hover { filter:brightness(1.15); }
.btn.ghost  { background:#1e293b; border:1px solid var(--line); color:#cbd5e1; }
.btn.danger { background:#b91c1c; }

.flash { padding:11px 14px; border-radius:8px; margin-bottom:14px;
         border:1px solid var(--line); background:#141b29; font-size:13px; }
.flash.err { border-color:var(--red); color:var(--red); }
.flash.ok  { border-color:var(--grn); color:var(--grn); }

.narrow { max-width:420px; }

/* ── sidebar foot: account identity + logout ────────────────────────────────
   The footer bar is `position:fixed` across the full width, so it sits ON TOP
   of the bottom of the sidebar. Without clearance the Log out control ends up
   underneath it — visible but unclickable. */
.sb-pane { padding-bottom:52px; }

/* A long address must truncate rather than push the sidebar wider or spill
   over the rail edge. Email is arbitrary-length user input; the layout has to
   assume the worst case, not the demo account. */
.sidebar-foot .sb-sect {
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    text-transform:none; letter-spacing:0; font-size:11px;
    direction:ltr;
}
body.sb-min .sidebar-foot .sb-sect { display:none; }

/* ── narrow screens (Step 10 §25) ───────────────────────────────────────────
   The sidebar is 206px fixed. On a 375px phone that leaves ~160px of content,
   where every heading wraps to one word per line — unusable, not merely ugly.

   This is NOT a redesign: it reuses the icon-rail the Collapse button already
   produces, so the same styles serve both. Labels go, icons stay, and the
   content column gets the width back. */
@media (max-width: 760px) {
    .sb-rail { width: 56px; }
    .sb-ctx { display: none; }
    .sb-lbl, .sb-sect { display: none; }
    .sidebar-brand { padding: 2px 0 12px 0; text-align: center; font-size: 0; }
    .sidebar-brand .brand-bolt { font-size: 18px; }
    .sb-item { justify-content: center; padding: 9px 4px; }
    .sidebar-foot .sb-sect { display: none; }
    .main-col { padding: 14px 12px 64px 12px; }

    /* The page head carries market status and a timestamp that do not fit.
       The title is what identifies the page; the rest is ambient. */
    .page-head .ph-right span { display: none; }
    .page-head h1 { font-size: 17px; }
    .ph-ico { width: 28px; height: 28px; font-size: 14px; }

    /* Multi-column grids become one column rather than several unreadable
       slivers. */
    .kpi2, .mrow, .bottom2 { grid-template-columns: 1fr; display: grid; }
    .kpi2 .cell, .kpi2 .statebox { border-right: none;
        border-bottom: 1px solid var(--line); }

    /* Wide tables scroll INSIDE their card instead of stretching the page. */
    .section, .card { overflow-x: auto; }
    .calwrap { flex-direction: column; }
    .wkcol { flex-direction: row; overflow-x: auto; }
}

/* ── private beta: badge, feedback widget (Step 11) ──────────────────────── */
.beta-badge {
    display: inline-block; padding: 3px 9px; border-radius: 999px;
    background: #3b1d5e; color: #d8b4fe; border: 1px solid #6b21a8;
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
    text-decoration: none; white-space: nowrap;
}
.beta-badge:hover { background: #4c2578; color: #e9d5ff; }

.fb-fab {
    position: fixed; right: 18px; bottom: 46px; z-index: 60;
    padding: 9px 15px; border-radius: 999px; cursor: pointer;
    background: #1d4ed8; color: #fff; border: 1px solid #3b82f6;
    font-size: 12.5px; font-weight: 600;
    box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
.fb-fab:hover { background: #2563eb; }

.fb-back {
    display: none; position: fixed; inset: 0; z-index: 70;
    background: rgba(2,6,23,.72);
    align-items: center; justify-content: center; padding: 20px;
}
.fb-back.open { display: flex; }
.fb-modal {
    width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
    background: #0f172a; border: 1px solid #1e293b; border-radius: 12px;
    padding: 22px;
}
.fb-modal h2 { margin: 0 0 8px; font-size: 17px; }
.fb-note { color: #64748b; font-size: 11.5px; line-height: 1.55; margin: 0 0 14px; }
.fb-modal label {
    display: block; margin: 12px 0 5px; font-size: 12px; color: #94a3b8;
}
.fb-modal select, .fb-modal textarea {
    width: 100%; box-sizing: border-box; padding: 9px 10px;
    background: #0b1220; color: #e2e8f0;
    border: 1px solid #1e293b; border-radius: 7px; font-size: 13px;
    font-family: inherit;
}
.fb-modal textarea { resize: vertical; }
.fb-actions {
    display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px;
}

/* Onboarding / welcome */
.ob-grid {
    display: grid; gap: 14px; margin: 18px 0;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.ob-card {
    background: #0f172a; border: 1px solid #1e293b;
    border-radius: 10px; padding: 16px;
}
.ob-card h3 { margin: 0 0 6px; font-size: 14.5px; }
.ob-card p { margin: 0; color: #94a3b8; font-size: 12.5px; line-height: 1.6; }
.ob-soon {
    display: inline-block; margin-left: 6px; padding: 2px 7px;
    border-radius: 999px; background: #1e293b; color: #94a3b8;
    font-size: 10px; font-weight: 700; letter-spacing: .05em;
}
.ob-steps { list-style: none; padding: 0; margin: 16px 0; }
.ob-steps li {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 10px 0; border-bottom: 1px solid #131c2b;
}
.ob-steps .n {
    flex: 0 0 22px; height: 22px; border-radius: 999px;
    background: #1e293b; color: #94a3b8;
    font-size: 11.5px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.ob-steps .n.done { background: #14532d; color: #86efac; }

@media (max-width: 760px) {
    .fb-fab { right: 10px; bottom: 52px; padding: 8px 12px; font-size: 12px; }
    .beta-badge { display: none; }
}