:root {
    color-scheme: light;
    --surface-1:      #fcfcfb;
    --page-plane:     #f9f9f7;
    --text-primary:   #0b0b0b;
    --text-secondary: #52514e;
    --text-muted:     #898781;
    --grid:           #e1e0d9;
    --border:         rgba(11,11,11,0.10);
    --good-text:      #006300;
    --status-warning: #fab219;
    --status-critical:#d03b3b;
    --slot-1: #2a78d6; --slot-2: #eb6834;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      color-scheme: dark;
      --surface-1:      #1a1a19;
      --page-plane:     #0d0d0d;
      --text-primary:   #ffffff;
      --text-secondary: #c3c2b7;
      --text-muted:     #898781;
      --grid:           #2c2c2a;
      --border:         rgba(255,255,255,0.10);
      --good-text:      #0ca30c;
      --slot-1: #3987e5; --slot-2: #d95926;
    }
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--page-plane); color: var(--text-primary);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px; line-height: 1.4;
    display: flex; align-items: flex-start; min-height: 100vh;
  }

  .sidebar {
    flex: 0 0 210px; width: 210px; min-height: 100vh; position: sticky; top: 0;
    background: var(--surface-1); border-right: 1px solid var(--border);
    padding: 35px 14px; display: flex; flex-direction: column; gap: 8px;
    transition: flex-basis 0.15s ease, width 0.15s ease;
  }
  .sidebar.collapsed { flex-basis: 60px; width: 60px; padding: 35px 10px; }
  .sidebar-header {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 16px 0; padding-bottom: 14px; border-bottom: 1px solid var(--border);
  }
  .sidebar h1 { font-size: 15px; font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; }
  .sidebar.collapsed h1 { display: none; }
  .sidebar-toggle {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-start; padding: 9px 12px;
    border-radius: 8px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer;
  }
  .sidebar-toggle:hover { background: color-mix(in srgb, var(--text-primary) 6%, transparent); }
  .sidebar.collapsed .sidebar-toggle { width: 100%; padding: 9px 0; justify-content: center; }
  .nav-btn {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; padding: 9px 12px;
    border-radius: 8px; border: none; background: transparent; color: var(--text-secondary);
    cursor: pointer; font-size: 13.5px; font-weight: 500;
  }
  .nav-icon { width: 16px; height: 16px; flex: 0 0 16px; }
  .nav-icon-wrap { position: relative; display: inline-flex; flex: 0 0 16px; }
  .nav-badge {
    position: absolute; top: -4px; right: -8px; width: 7px; height: 7px;
    border-radius: 999px; background: var(--status-critical);
  }
  .nav-btn:hover { background: color-mix(in srgb, var(--text-primary) 6%, transparent); }
  .nav-btn.active { background: var(--slot-1); color: #fff; }
  .sidebar.collapsed .nav-btn { justify-content: center; padding: 9px 0; }
  .sidebar.collapsed .nav-btn > span:not(.nav-icon-wrap) { display: none; }

  .page-area { flex: 1 1 auto; min-width: 0; padding: 24px; }
  .page { display: none; }
  .page.active { display: block; }

  .stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
  .stat-tile {
    background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
    padding: 12px 16px; min-width: 175px; flex: 1 1 175px;
  }
  .stat-tile .label { color: var(--text-secondary); font-size: 12px; margin-bottom: 4px; }
  /* A big value ("+93,301.65 USD") wrapping the currency code onto its own
     line reads as broken, not responsive - happens once the sidebar being
     expanded leaves each tile less room. nowrap forces the whole tile to
     drop to the next flex-wrap row instead (see .stats above) rather than
     wrapping its own text, which is the same reflow every other tile width
     change already relies on. */
  .stat-tile .value { font-size: 22px; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
  .stat-tile .value.good { color: var(--good-text); }
  .stat-tile .value.bad { color: var(--status-critical); }

  .filters {
    display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
    margin-bottom: 14px; padding: 10px 12px; background: var(--surface-1);
    border: 1px solid var(--border); border-radius: 10px;
  }
  /* Each label + its dropdown is one flex item, not two - otherwise, once
     the bar has enough filters to wrap, a label can end up as the last
     thing on one line while its own control drops alone to the next,
     reading as visually disconnected. */
  .filter-group { display: flex; align-items: center; gap: 4px; }
  .filters label { font-size: 12px; color: var(--text-secondary); }

  .msel { position: relative; }
  .msel-btn {
    font: inherit; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--page-plane); color: var(--text-primary); cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; width: 96px;
  }
  /* min-width: 0 overrides flex items' default min-width:auto (their
     content's natural size) - without it, text-overflow:ellipsis below has
     no effect, since the flex item refuses to shrink past its full text. */
  .msel-btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; text-align: left; }
  .msel-btn::after { content: "\25BE"; color: var(--text-muted); font-size: 13px; flex: none; }
  .msel-panel {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
    background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px;
    padding: 6px; min-width: 200px; max-height: 260px; overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    /* Without this, scrolling past the last option (mouse still over the
       panel) "chains" into scrolling the page behind it once the panel hits
       its own scroll end - contain stops the scroll gesture at the panel's
       edge instead of handing it off. */
    overscroll-behavior: contain;
  }
  .msel.open .msel-panel { display: block; }
  .msel-option {
    display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 5px;
    font-size: 13px; cursor: pointer; white-space: nowrap;
  }
  .msel-option:hover { background: color-mix(in srgb, var(--text-primary) 6%, transparent); }
  .msel-option input { margin: 0; }
  .msel-select-all { font-weight: 600; }
  .msel-divider { height: 1px; background: var(--grid); margin: 4px 2px; }
  .msel-search {
    display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 13px;
    padding: 5px 8px; margin-bottom: 4px; border-radius: 5px; border: 1px solid var(--border);
    background: var(--page-plane); color: var(--text-primary);
  }
  .msel-option.msel-option-hidden { display: none; }
  .msel-empty { padding: 5px 8px; font-size: 13px; color: var(--text-muted); }

  .daterange-custom { display: flex; flex-direction: column; gap: 6px; padding: 4px 8px 2px; }
  .daterange-custom label {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 12px; color: var(--text-secondary);
  }
  .daterange-custom input[type="date"] {
    font: inherit; font-size: 12px; padding: 3px 6px; border-radius: 5px;
    border: 1px solid var(--border); background: var(--page-plane); color: var(--text-primary);
  }

  /* A native <select> doesn't reliably honor text-align in its closed state
     in Chromium, so the strategy picker is a plain button + custom dropdown
     panel (same open/close mechanics as the .msel filters above) instead -
     that gives real control over centering the label. The panel itself
     isn't nested inside the button's own wrapper the way the other .msel
     dropdowns are - see the #strategy-pick-panel rule below for why. */
  .strategy-pick-btn {
    appearance: none; -webkit-appearance: none; font: inherit; font-size: 12px; font-weight: 600;
    padding: 3px 22px 3px 10px; border-radius: 999px; border: 1px solid var(--border); cursor: pointer;
    max-width: 170px; width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
    background-color: var(--surface-1); color: var(--text-primary);
    display: flex; align-items: center; justify-content: center;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                       linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 11px top 55%, right 7px top 55%;
    background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
  }
  .strategy-pick-btn.unassigned {
    background-color: transparent; color: var(--text-muted);
    border: 1px dashed var(--border);
  }
  .strategy-pick { position: relative; }
  /* Same size/shape as .nav-badge (the red Issues dot), just orange -
     flags rows whose strategy still needs to be assigned. Absolutely
     positioned (rather than laid out next to the button) so it doesn't
     shrink the button - the "unassigned" pill stays exactly as wide as
     every other strategy pill, the dot just floats in the cell's own
     padding to its left. */
  .strategy-unassigned-dot {
    position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
    width: 7px; height: 7px; border-radius: 999px;
    background: var(--status-warning);
  }
  /* A single shared panel (one instance for the whole table, positioned via
     JS from the clicked button's own coordinates) instead of one absolutely
     positioned panel per row. Every row lives inside .table-scroll, whose
     overflow-x:auto forces its overflow-y to also compute as "auto" (a
     scrolling ancestor can't leave the cross axis "visible") - a per-row
     panel would get silently clipped there whenever a short/filtered table
     left it no room below, instead of just opening downward over the empty
     space past the table like it should. Living outside .table-scroll in
     the DOM (see the template's <div id="strategy-pick-panel"> right after
     </main>) sidesteps that clipping entirely, position:fixed included. */
  #strategy-pick-panel {
    display: none; position: fixed; z-index: 30;
    background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px;
    /* Tall enough that the full strategy list (currently 25+) shows without
       scrolling on any normal-height screen - 260px only fit ~8 at a time.
       overflow-y stays as a safety net for whenever the list eventually
       does outgrow even this, not the everyday case. */
    padding: 6px; min-width: 180px; max-height: 85vh; overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    overscroll-behavior: contain; /* same scroll-chaining fix as .msel-panel */
  }
  #strategy-pick-panel.open { display: block; }
  .strategy-option {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 5px 8px; border-radius: 5px; font-size: 13px; cursor: pointer; white-space: nowrap;
  }
  .strategy-option:hover { background: color-mix(in srgb, var(--text-primary) 6%, transparent); }
  .strategy-option.active { background: color-mix(in srgb, var(--text-primary) 10%, transparent); font-weight: 600; }

  .table-scroll {
    overflow-x: auto; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface-1);
  }
  table { width: 100%; min-width: 960px; border-collapse: collapse; }
  /* Percent widths (see COLUMN_WIDTH_WEIGHTS/updateColumnWidths()) only take
     effect with a fixed layout - auto layout would keep re-deriving widths
     from cell content instead, ignoring what we compute. Scoped to the
     trades table only; .legs-table stays on the default auto layout. */
  #trades-table { table-layout: fixed; }
  thead th {
    text-align: left; font-size: 12px; color: var(--text-secondary); font-weight: 600;
    padding: 10px 12px; border-bottom: 1px solid var(--grid);
  }
  thead th.sortable { cursor: pointer; user-select: none; }
  thead th.sortable:hover { color: var(--text-primary); }
  .sort-indicator { display: inline-block; margin-left: 4px; font-size: 9px; color: var(--text-muted); }
  #trades-table .col-hidden { display: none; }
  tbody td { padding: 10px 12px; border-bottom: 1px solid var(--grid); vertical-align: top; }
  tbody tr.struct-row { cursor: pointer; }
  tbody tr.struct-row:hover { background: color-mix(in srgb, var(--text-primary) 4%, transparent); }
  .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
  .pnl.good { color: var(--good-text); font-weight: 600; }
  .pnl.bad { color: var(--status-critical); font-weight: 600; }
  .pnl.neutral { color: var(--text-muted); }

  .chevron { display: inline-block; transition: transform 0.15s; color: var(--text-muted); width: 14px; }
  tr.expanded .chevron { transform: rotate(90deg); }

  .detail-row td { padding: 0; }
  .detail-wrap { display: none; padding: 4px 12px 14px 32px; background: var(--page-plane); }
  tr.expanded + .detail-row .detail-wrap { display: block; }

  .legs-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
  .legs-table th { text-align: left; color: var(--text-muted); font-weight: 600; font-size: 11px;
                   padding: 4px 8px; border-bottom: 1px solid var(--grid); }
  .legs-table th.num { text-align: right; }
  .legs-table td { padding: 4px 8px; border-bottom: 1px solid var(--grid); }
  .legs-table th.col-qty, .legs-table td.col-qty { padding-left: 28px; }
  .side-long { color: var(--slot-1); font-weight: 600; }
  .side-short { color: var(--slot-2); font-weight: 600; }
  .closure-line { color: var(--text-muted); font-size: 12px; padding-left: 16px; }
  .opened-at { color: var(--text-muted); font-size: 12px; margin-bottom: 4px; }
  /* max-width caps this column's contribution to the table's auto layout -
     without it, a long accumulated stock position (many buys joined by "/")
     stretches this column (and squeezes every other column) for the whole
     table, not just that one row. */
  .strikes {
    font-variant-numeric: tabular-nums; color: var(--text-secondary); font-size: 12.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    /* No max-width here anymore - the column's actual width now comes from
       its proportional share (see COLUMN_WIDTH_WEIGHTS/updateColumnWidths()
       and #trades-table's table-layout:fixed), which already gives this
       column more room than the others on purpose. A fixed px cap here
       would just claw that back on wide windows. */
    /* A smaller font has proportionally less half-leading above the glyph
       than the row's default 14px text, so at the same vertical-align:top
       it visually sits a bit higher - nudge it down to compensate instead
       of matching the font size (the smaller size is deliberate/preferred). */
    padding-top: 11.5px;
  }
  .shares-held { margin-top: 8px; font-size: 12.5px; color: var(--text-secondary); }
  .shares-held strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
  .notes { margin-top: 8px; font-size: 12px; color: var(--status-warning); }
  .notes::before { content: "\26A0  "; }

  .sync-conflict-banner {
    /* fixed, not sticky/static - body is a flex row (.sidebar + main), so
       any child sitting in normal document flow becomes a flex ITEM there
       (a narrow column squeezed next to the sidebar) instead of a full-
       width bar. Taking it out of flow entirely sidesteps that. */
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center; gap: 16px;
    padding: 10px 20px; background: var(--status-critical); color: #fff;
    font-size: 13px; font-weight: 600; text-align: center;
  }
  .sync-conflict-banner button {
    flex: 0 0 auto; padding: 5px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.6);
    background: transparent; color: #fff; font-weight: 600; font-size: 12.5px; cursor: pointer;
  }
  .sync-conflict-banner button:hover { background: rgba(255,255,255,0.15); }

  #trades-table .col-select { width: 34px; text-align: center; }
  .row-select, #select-all-trades { cursor: pointer; }

  .bulk-action-bar {
    /* Same "escape body's flex row" reasoning as .sync-conflict-banner -
       fixed to the top like those, right underneath them. */
    position: fixed; top: 0; left: 0; right: 0; z-index: 49;
    display: flex; align-items: center; justify-content: center; gap: 14px;
    padding: 12px 20px; background: var(--slot-1); color: #fff;
    font-size: 13px; font-weight: 600;
  }
  .bulk-action-bar select {
    /* Same dark-surface styling every other input/select on the dashboard
       uses (settings-add-row input etc.) - a hardcoded white background
       here left white text-on-white in dark mode (--text-primary is white
       there), unreadable the moment a strategy was actually picked. */
    padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--page-plane); color: var(--text-primary); font-size: 13px; font-weight: 500;
  }
  .bulk-action-bar button {
    padding: 6px 14px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.6);
    background: transparent; color: #fff; font-weight: 600; font-size: 12.5px; cursor: pointer;
  }
  .bulk-action-bar button:hover { background: rgba(255,255,255,0.15); }
  .bulk-action-bar button:disabled { opacity: 0.5; cursor: not-allowed; }

  .flags-list { list-style: none; margin: 0; padding: 0; }
  .flags-list li {
    font-size: 12.5px; color: var(--text-secondary); background: var(--surface-1);
    border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px;
  }
  /* A flag with a known structure_id gets an inline expand/collapse, same
     idea as a Trades-table row - opens right here instead of navigating
     away, since a flag is something to resolve on the spot (relabel,
     inspect the legs), not just a fact to go look up elsewhere. */
  .flags-list li.flag-item { padding: 0; cursor: pointer; }
  .flags-list li.flag-item .flag-row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; }
  .flags-list li.flag-item .flag-text { flex: 1 1 auto; }
  .flags-list li.flag-item .chevron { flex: 0 0 auto; margin-top: 1px; }
  .flags-list li.flag-item.expanded .chevron { transform: rotate(90deg); }
  .flags-list .flag-detail { display: none; padding: 2px 14px 14px 32px; border-top: 1px solid var(--border); }
  .flags-list li.flag-item.expanded .flag-detail { display: block; }
  .flags-list .flag-strategy {
    margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-primary);
  }
  .empty-state { padding: 40px; text-align: center; color: var(--text-muted); }

  .settings-card {
    max-width: 480px; background: var(--surface-1); border: 1px solid var(--border);
    border-radius: 10px; padding: 18px 20px; margin-bottom: 16px;
  }
  .settings-card h3 { font-size: 14px; font-weight: 600; margin: 0 0 14px; }
  .settings-add-row { display: flex; gap: 8px; margin-bottom: 14px; }
  .settings-add-row input {
    flex: 1 1 auto; font: inherit; font-size: 13px; padding: 7px 10px;
    border-radius: 6px; border: 1px solid var(--border); background: var(--page-plane); color: var(--text-primary);
  }
  .settings-add-row button {
    font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 6px;
    border: none; background: var(--slot-1); color: #fff; cursor: pointer;
  }
  .settings-add-row button:hover { opacity: 0.9; }
  .settings-strategy-list { list-style: none; margin: 0; padding: 0; }
  .settings-strategy-list li {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; padding: 8px 4px; border-bottom: 1px solid var(--grid);
  }
  .settings-strategy-list li:last-child { border-bottom: none; }
  .settings-strategy-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .settings-rename-btn {
    flex: 0 0 auto; font: inherit; font-size: 13px; border: none; background: none;
    color: var(--text-muted); cursor: pointer; padding: 4px 6px; border-radius: 4px;
  }
  .settings-rename-btn:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 10%, transparent); }
  .settings-delete-btn {
    flex: 0 0 auto; font: inherit; font-size: 13px; border: none; background: none;
    color: var(--text-muted); cursor: pointer; padding: 4px 6px; border-radius: 4px;
  }
  .settings-delete-btn:hover { color: var(--status-critical); background: color-mix(in srgb, var(--status-critical) 12%, transparent); }

  .wheel-add-card { margin-bottom: 20px; }
  .wheel-card { max-width: none; margin-bottom: 20px; }
  .wheel-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .wheel-card-head h3 { margin: 0; }
  /* Box-centering two different font sizes still LOOKS top-heavy (the
     larger ticker's cap-height sits well above the smaller price's) -
     aligning both to their shared text baseline instead reads as "on the
     same line", which is what actually looks centered to the eye. */
  .wheel-card-head h3, .wheel-card-head .wheel-current-price { align-self: baseline; }
  .wheel-current-price { font-size: 12.5px; color: var(--text-secondary); }
  .wheel-card-head .settings-delete-btn { margin-left: auto; }
  .wheel-config-row { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 12px; }
  .wheel-config-row label {
    display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--text-muted);
  }
  .wheel-config-row input {
    font: inherit; font-size: 13px; padding: 6px 8px; width: 110px;
    border-radius: 6px; border: 1px solid var(--border); background: var(--page-plane); color: var(--text-primary);
  }
  .wheel-summary { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 10px; }
  .wheel-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12.5px; }
  .wheel-table th {
    text-align: left; color: var(--text-muted); font-weight: 600; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.02em; padding: 4px 10px; border-bottom: 1px solid var(--border);
  }
  .wheel-table td { padding: 5px 10px; border-bottom: 1px solid var(--grid); }
  /* Extra right-hand padding on right-aligned columns specifically - without
     it, a right-aligned number and the next (left-aligned) column's text
     both sit flush against the shared border, so they visually run into
     each other even though the column boundary itself is evenly spaced. */
  .wheel-table th.num, .wheel-table td.num { text-align: right; padding-right: 18px; }
  .wheel-table th, .wheel-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  tr.wheel-filled { color: var(--text-primary); }
  tr.wheel-open { color: var(--text-muted); }
  tr.wheel-filled td:first-child { font-weight: 600; }

  .dash-grid { display: flex; flex-direction: column; gap: 20px; max-width: 1200px; }
  .dash-row { display: flex; gap: 20px; align-items: stretch; }
  .dash-row .chart-card { flex: 1 1 0; min-width: 0; height: 460px; display: flex; flex-direction: column; }
  .page-nav { display: flex; align-items: center; gap: 6px; position: absolute; top: 16px; right: 18px; }
  .page-nav-btn {
    font: inherit; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--page-plane); color: var(--text-secondary); cursor: pointer;
  }
  .page-nav-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--text-primary) 6%, transparent); }
  .page-nav-btn:disabled { opacity: 0.35; cursor: default; }
  .page-nav-label { font-size: 11px; color: var(--text-muted); min-width: 34px; text-align: center; }
  .chart-card {
    background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
    padding: 16px 18px; position: relative;
  }
  .chart-card h2 { font-size: 14px; font-weight: 600; margin: 0 0 22px; }
  .chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
  .chart-tooltip {
    position: absolute; pointer-events: none; transform: translate(-50%, -115%);
    background: var(--surface-1); border: 1px solid var(--border); border-radius: 6px;
    padding: 5px 8px; font-size: 12px; color: var(--text-primary);
    box-shadow: 0 4px 14px rgba(0,0,0,0.25); display: none; white-space: nowrap; z-index: 5;
  }
  .axis-label { fill: var(--text-muted); font-size: 10px; }
  .grid-line { stroke: var(--grid); stroke-width: 1; }
  .zero-line { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; }

  .bar-chart { display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .bar-row { display: flex; flex-direction: column; gap: 5px; }
  .bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .bar-label {
    font-size: 12.5px; color: var(--text-secondary); font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .bar-track {
    position: relative; height: 7px; width: 100%; border-radius: 3.5px;
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  }
  .bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3.5px; opacity: 0.7; }
  .bar-fill.good { background: var(--good-text); }
  .bar-fill.bad { background: var(--status-critical); }
  .bar-value {
    flex: 0 0 auto; font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 500; text-align: right;
  }
  /* Neutral on purpose (same gray as .bar-label) - the bar's own fill color
     (.bar-fill.good/.bad below) already carries the win/loss signal for
     P&L by Strategy, Average P&L per Day, and Monthly P&L, all three of
     which share this component; repeating it in the number too is
     redundant. The top stat tiles (.stat-tile) keep their own color. */
  .bar-value.good, .bar-value.bad { color: var(--text-secondary); }

  .calendar-nav {
    display: flex; align-items: center; gap: 6px; position: absolute; top: 16px; right: 18px;
  }
  .cal-nav-btn {
    font: inherit; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--page-plane); color: var(--text-secondary); cursor: pointer;
  }
  .cal-nav-btn:hover { background: color-mix(in srgb, var(--text-primary) 6%, transparent); }
  .calendar-title { font-size: 11px; color: var(--text-muted); min-width: 84px; text-align: center; }
  .calendar-dow-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .calendar-grid {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 6px;
    flex: 1 1 auto; min-height: 0; overflow: hidden;
  }
  .cal-dow { font-size: 11px; color: var(--text-muted); text-align: center; padding-bottom: 4px; }
  .cal-day {
    border-radius: 8px; padding: 6px 6px;
    background: var(--page-plane); border: 1px solid var(--border);
    display: flex; flex-direction: column; justify-content: space-between;
    min-width: 0; min-height: 0; overflow: hidden;
  }
  .cal-day.empty { visibility: hidden; }
  .cal-day-num { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
  .cal-day-pnl {
    font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cal-day-pnl.good { color: var(--good-text); }
  .cal-day-pnl.bad { color: var(--status-critical); }
  .cal-day.clickable { cursor: pointer; }
  .cal-day.clickable:hover { border-color: var(--slot-1); }