:root {
    --bg: #0a0b0e;
    --surface: #111318;
    --surface2: #171b22;
    --surface3: #1e2330;
    --border: #252b38;
    --border2: #2e3547;
    --text: #e8eaf0;
    --text2: #8b94a8;
    --text3: #4a5368;
    --green: #00d97e;
    --green-dim: #00d97e22;
    --green-mid: #00d97e44;
    --red: #ff4757;
    --red-dim: #ff475722;
    --red-mid: #ff475744;
    --blue: #4a9eff;
    --blue-dim: #4a9eff15;
    --mono: 'JetBrains Mono', monospace;
    --display: 'Poppins', sans-serif;
    --title: 'Inter', sans-serif;
  }

  /* ── Light (classic) mode ── */
  html.light, body.light {
    --bg: #f0f2f5;
    --surface: #ffffff;
    --surface2: #f7f8fa;
    --surface3: #eef0f4;
    --border: #e2e5ec;
    --border2: #d0d4de;
    --text: #111827;
    --text2: #4b5563;
    --text3: #9ca3af;
    --green: #00b868;
    --green-dim: #00b86815;
    --green-mid: #00b86830;
    --red: #e53e3e;
    --red-dim: #e53e3e15;
    --red-mid: #e53e3e30;
    --blue: #2563eb;
    --blue-dim: #2563eb15;
  }

  /* ── Warm (beige) mode ── */
  html.warm, body.warm {
    --bg: #f2ede8;
    --surface: #faf7f4;
    --surface2: #f5f0eb;
    --surface3: #ede7e0;
    --border: #ddd6ce;
    --border2: #cec6bc;
    --text: #1c1917;
    --text2: #57534e;
    --text3: #a8a29e;
    --green: #059669;
    --green-dim: #05966915;
    --green-mid: #05966930;
    --red: #dc2626;
    --red-dim: #dc262615;
    --red-mid: #dc262630;
    --blue: #2563eb;
    --blue-dim: #2563eb15;
  }

  /* ── Dark mode ── */
  html.dark, body.dark {
    --bg: #13151a;
    --surface: #1a1d25;
    --surface2: #1f2330;
    --surface3: #252b38;
  }

  /* Theme selector */
  /* ── Theme picker inside user menu ── */
  .user-menu-section-label {
    padding: 6px 12px 4px;
    font-size: 10px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--text3);
    font-family: var(--title);
  }
  .user-menu-theme-row {
    display: flex; gap: 4px; padding: 2px 8px 6px;
  }
  .user-theme-btn {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    flex: 1; padding: 8px 4px; border-radius: 7px; border: 1px solid var(--border);
    background: var(--surface3); cursor: pointer;
    font-family: var(--title); font-size: 10px; font-weight: 600;
    color: var(--text3); transition: all 0.12s;
  }
  .user-theme-btn:hover { border-color: var(--border2); color: var(--text2); }
  .user-theme-btn.active { border-color: var(--green); color: var(--text); background: var(--surface); }
  .user-theme-btn .dot { width: 14px; height: 14px; border-radius: 50%; }


  * { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--title); }

  html {
    background: var(--bg);
    min-height: 100%;
  }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--title);
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* Keep monospace on numeric / ticker elements */
  .av-row-pnl, .av-sum-value, .av-breakdown-cell-pnl, .day-pnl,
  .sp-pnl-badge, .ticker-sym,
  input[type="number"], input[type="text"].mono,
  .day-cell .pnl, .month-pnl, .streak-val,
  .cm-pnl, .cm-stat-val { font-family: var(--title); }

    body::before {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
  }

  .app {
    position: relative; z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 24px;
  }

  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    padding-top: 24px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--border);
    flex-wrap: nowrap;
    gap: 12px;
  }

  .logo { display: flex; align-items: center; gap: 12px; }

  .logo .auth-brand-icon { flex-shrink: 0; }

  .logo h1 { font-family: var(--title); font-size: 20px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.2; }
  .logo span { font-size: 9px; color: var(--text3); letter-spacing: 2px; text-transform: uppercase; display: block; margin-top: 1px; white-space: nowrap; }

  .header-nav { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }

  /* ── Hamburger button (mobile only — hidden on desktop) ── */
  .hamburger-btn {
    width: 36px; height: 36px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    background: transparent; border: 1px solid var(--border);
    border-radius: 8px; cursor: pointer; transition: all 0.15s; flex-shrink: 0;
  }
  .hamburger-btn:hover { border-color: var(--border2); background: var(--surface3); }
  .hamburger-btn span {
    display: block; width: 16px; height: 1.5px;
    background: var(--text2); border-radius: 2px; transition: all 0.2s;
  }

  /* ── Sidebar overlay ── */
  .sidebar-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.45); z-index: 400;
    backdrop-filter: blur(2px);
  }
  .sidebar-overlay.open { display: block; }

  /* ── Sidebar panel (base — mobile defaults, desktop overridden below) ── */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 260px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    z-index: 500;
    display: flex; flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 4px 0 32px rgba(0,0,0,0.35);
  }
  .sidebar.open { transform: translateX(0); }

  .sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 20px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .sidebar-logo {
    display: flex; align-items: center; gap: 12px;
    min-width: 0;
  }
  .sidebar-brand-icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--green-dim);
    border: 1px solid var(--green-mid);
  }
  .sidebar-brand-text {
    display: flex; flex-direction: column; min-width: 0;
  }
  .sidebar-logo-text {
    font-family: var(--title); font-size: 21px; font-weight: 700;
    letter-spacing: -0.5px; white-space: nowrap;
    line-height: 1; color: var(--text);
  }
  .sidebar-close {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--border);
    border-radius: 6px; cursor: pointer; color: var(--text3);
    font-size: 14px; transition: all 0.15s;
  }
  .sidebar-close:hover { border-color: var(--border2); color: var(--text); background: var(--surface3); }

  .sidebar-nav {
    flex: 1; overflow-y: auto; padding: 12px 10px;
    display: flex; flex-direction: column; gap: 2px;
  }

  .sidebar-section-label {
    font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--text3);
    padding: 10px 10px 4px;
    font-family: var(--title);
    white-space: nowrap;
  }

  .sidebar-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 8px;
    background: transparent; border: none; cursor: pointer;
    font-family: var(--title); font-size: 13px; font-weight: 500;
    color: var(--text2); text-align: left; width: 100%;
    transition: all 0.12s; position: relative;
    white-space: nowrap; overflow: hidden;
  }
  .sidebar-item:hover { background: var(--surface2); color: var(--text); }
  .sidebar-item.active { background: var(--surface2); color: var(--text); }
  .sidebar-item.active::before {
    content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
    width: 3px; background: var(--green); border-radius: 0 2px 2px 0;
  }
  .sidebar-item-icon { width: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text3); }
  .sidebar-item.active .sidebar-item-icon { color: var(--green); }
  .sidebar-item:hover .sidebar-item-icon { color: var(--text2); }
  .sidebar-item.active:hover .sidebar-item-icon { color: var(--green); }
  .sidebar-item-badge {
    margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
    padding: 2px 6px; border-radius: 4px;
    background: var(--surface3); color: var(--text3); border: 1px solid var(--border);
  }
  /* "NEW" variant — bright green to highlight newly launched features. */
  .sidebar-item-badge.sidebar-item-badge-new {
    background: rgba(14, 221, 138, 0.15);
    color: var(--green);
    border-color: rgba(14, 221, 138, 0.35);
  }

  /* Coming-soon items: visually dimmed to signal not-yet-available. */
  .sidebar-item.sidebar-item-soon {
    opacity: 0.5;
  }
  .sidebar-item.sidebar-item-soon:hover {
    opacity: 0.7;
  }

  .sidebar-sub {
    display: flex; flex-direction: column; gap: 1px;
    padding-left: 20px;
  }
  .sidebar-sub-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px; border-radius: 6px;
    background: transparent; border: none; cursor: pointer;
    font-family: var(--title); font-size: 12px; font-weight: 500;
    color: var(--text3); text-align: left; width: 100%;
    transition: all 0.12s; position: relative;
  }
  .sidebar-sub-item:hover { background: var(--surface2); color: var(--text2); }
  .sidebar-sub-item.active { color: var(--green); }
  .sidebar-sub-item.active::before {
    content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
    width: 2px; background: var(--green); border-radius: 0 2px 2px 0;
  }

  .sidebar-divider { height: 1px; background: var(--border); margin: 8px 10px; }

  .sidebar-footer {
    padding: 12px 10px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }

  /* ═══════════════════════════════════════════════════════════════
     DESKTOP SIDEBAR: always visible, collapsed (icons only),
     expands on hover. Only applies >768px.
     ═══════════════════════════════════════════════════════════════ */
  @media (min-width: 769px) {
    /* Hide hamburger on desktop */
    .hamburger-btn { display: none !important; }

    /* Hide overlay on desktop (sidebar is persistent) */
    .sidebar-overlay { display: none !important; }

    /* Sidebar: always visible, collapsed to 56px */
    .sidebar {
      width: 56px;
      transform: translateX(0);
      transition: width 0.22s cubic-bezier(0.4,0,0.2,1);
      box-shadow: none;
      overflow: hidden;
    }
    .sidebar:hover {
      width: 260px;
      box-shadow: 4px 0 24px rgba(0,0,0,0.25);
    }

    /* Header: logo always in fixed position */
    .sidebar .sidebar-header {
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
      overflow: hidden;
      position: relative;
    }
    .sidebar:hover .sidebar-header {
      padding: 10px 0;
    }

    /* Logo container: fixed left position, never moves */
    .sidebar .sidebar-logo {
      position: relative;
      left: 9px;
      gap: 8px;
    }
    .sidebar:hover .sidebar-logo {
      left: 9px;
    }

    /* Brand icon: fixed size always */
    .sidebar .sidebar-brand-icon {
      width: 38px; height: 38px;
    }

    /* Brand text: hidden when collapsed, visible on hover */
    .sidebar .sidebar-brand-text {
      opacity: 0; width: 0; max-width: 0; overflow: hidden;
      white-space: nowrap;
    }
    .sidebar:hover .sidebar-brand-text {
      opacity: 1; width: auto; max-width: 200px;
    }

    /* Close button: not needed on desktop */
    .sidebar .sidebar-close { display: none; }

    /* Nav padding: same vertical, only horizontal changes */
    .sidebar .sidebar-nav { padding: 12px 0; }
    .sidebar:hover .sidebar-nav { padding: 12px 10px; }

    /* Section labels: invisible but same height when collapsed */
    .sidebar .sidebar-section-label {
      opacity: 0;
      transition: opacity 0.18s;
    }
    .sidebar:hover .sidebar-section-label {
      opacity: 1;
    }

    /* Items: perfectly centered icon when collapsed */
    .sidebar .sidebar-item {
      display: flex;
      align-items: center;
      padding: 9px 16px;
      min-height: 40px;
      border-radius: 10px;
      font-size: 0;
      color: transparent;
      width: auto;
      margin: 0;
      box-sizing: border-box;
    }
    .sidebar .sidebar-item .sidebar-item-icon {
      font-size: 13px;
      width: 24px;
      display: flex; align-items: center; justify-content: center;
    }
    .sidebar .sidebar-item .sidebar-item-icon svg {
      width: 22px; height: 22px;
    }
    .sidebar:hover .sidebar-item {
      justify-content: flex-start;
      padding: 9px 12px;
      font-size: 13px;
      color: var(--text2);
      width: auto;
      margin: 0;
    }
    .sidebar:hover .sidebar-item:hover { color: var(--text); }
    .sidebar:hover .sidebar-item.active { color: var(--text); }

    /* Hide child elements (badges etc) when collapsed */
    .sidebar .sidebar-item > *:not(.sidebar-item-icon) {
      opacity: 0; width: 0; overflow: hidden;
      transition: opacity 0.15s;
    }
    .sidebar:hover .sidebar-item > *:not(.sidebar-item-icon) {
      opacity: 1; width: auto;
    }

    /* Active bar: adjust position for collapsed */
    .sidebar .sidebar-item.active::before { left: 0; }

    /* Sub-items: hidden when collapsed */
    .sidebar .sidebar-sub { display: none; }
    .sidebar:hover .sidebar-sub { display: flex; }

    /* Divider: same vertical margin, only horizontal changes */
    .sidebar .sidebar-divider { margin: 8px 4px; }
    .sidebar:hover .sidebar-divider { margin: 8px 10px; }

    /* Account panel: hidden when collapsed */
    /* Upgrade CTA — solid green, prominent, placed right below the logo */
    .sidebar-upgrade {
      padding: 10px 10px;         /* fixed vertical padding — identical in both states */
      flex-shrink: 0;
      margin-bottom: 4px;         /* subtle air between button and nav below */
    }
    .sidebar-upgrade-btn {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%;
      height: 40px;               /* FIXED height — same in both states, no vertical shift */
      padding: 0 14px;
      background: var(--green);                 /* solid green, high visibility */
      border: 1px solid var(--green);
      border-radius: 10px; cursor: pointer;
      font-family: var(--title); font-size: 13px; font-weight: 700;
      color: #0a0d12;                            /* black text on green = max contrast */
      letter-spacing: 0.1px;
      transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
      white-space: nowrap; overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 217, 126, 0.15);
    }
    .sidebar-upgrade-btn:hover {
      background: #00f090;                       /* brighter green on hover */
      border-color: #00f090;
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(0, 217, 126, 0.30);
    }
    .sidebar-upgrade-btn svg { flex-shrink: 0; stroke: #0a0d12; }

    /* Collapsed: show only centered icon, SAME height as expanded */
    .sidebar .sidebar-upgrade { padding: 10px 8px; }
    .sidebar:hover .sidebar-upgrade { padding: 10px 10px; }
    .sidebar .sidebar-upgrade-btn {
      justify-content: center;
      padding: 0;
      gap: 0;
      height: 40px;                              /* same fixed height */
      width: 40px;                               /* square icon button when collapsed */
      margin: 0 auto;
    }
    .sidebar:hover .sidebar-upgrade-btn {
      justify-content: center;
      padding: 0 14px;
      gap: 8px;
      height: 40px;                              /* same fixed height */
      width: 100%;
    }
    .sidebar .sidebar-upgrade-text {
      opacity: 0; width: 0; overflow: hidden;
    }
    .sidebar:hover .sidebar-upgrade-text {
      opacity: 1; width: auto;
    }
    /* Hide upgrade for Pro/Founder users (controlled by JS) */
    .sidebar-upgrade.hidden { display: none; }

    /* Sidebar bottom action buttons */
    .sidebar-bottom-actions {
      padding: 8px 0;
      border-top: 1px solid var(--border);
      flex-shrink: 0;
      display: flex; flex-direction: column; gap: 2px;
    }
    .sidebar-bottom-btn {
      display: flex; align-items: center; justify-content: center;
      padding: 9px 0; min-height: 40px; border-radius: 10px;
      font-size: 0; color: transparent; gap: 0;
      background: none; border: none; cursor: pointer;
      font-family: var(--title); font-weight: 500;
      width: auto; margin: 0; box-sizing: border-box;
      transition: background 0.12s;
      white-space: nowrap; overflow: hidden;
    }
    .sidebar-bottom-btn:hover { background: var(--surface2); }
    .sidebar-bottom-btn .sidebar-item-icon { color: var(--text3); }
    .sidebar-bottom-btn:hover .sidebar-item-icon { color: var(--text2); }
    .sidebar-signout-btn .sidebar-item-icon { color: var(--red); }
    .sidebar-signout-btn:hover { background: var(--red-dim); }
    .sidebar-signout-btn:hover .sidebar-item-icon { color: var(--red); }
    .sidebar-bottom-label {
      font-size: 13px; color: var(--text2);
      display: none;
    }
    .sidebar-signout-btn .sidebar-bottom-label { color: var(--red); }
    .sidebar:hover .sidebar-bottom-btn {
      justify-content: flex-start; padding: 9px 12px; font-size: 13px; gap: 10px;
    }
    .sidebar:hover .sidebar-bottom-label { display: inline; }

    /* Offset main content to account for collapsed sidebar.
       Extra top padding compensates for the hidden <header> on desktop,
       giving the calendar / panels breathing room at the top of the page. */
    .app {
      padding-left: 80px; /* 56px sidebar + 24px original padding */
      padding-top: 72px;  /* 32px base + 40px compensation for hidden header */
    }

    /* Header is now empty on desktop — its controls moved into
       .month-nav / .year-nav. The hamburger button only matters on mobile.
       Hide the whole <header> on desktop to reclaim vertical space. */
    header {
      display: none;
    }
  }



  .view-toggle {
    display: flex;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
  }

  .view-btn {
    padding: 6px 14px;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: var(--text3);
    font-family: var(--title);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .view-btn.active { background: var(--surface3); color: var(--text); border: 1px solid var(--border2); }
  .view-btn:hover:not(.active) { color: var(--text2); }

  /* ── In-calendar Mensual/Anual toggle ── */
  .cal-view-toggle {
    display: flex;
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 8px; padding: 3px; gap: 2px; flex-shrink: 0;
  }

  /* ── Panel controls (Monthly/Annual toggle + Import) ────────────
     Grouped block shown inside .month-nav and .year-nav, aligned
     to the right edge of the row. Replaces the old header layout.
     ─────────────────────────────────────────────────────────────── */
  .panel-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;       /* push to the right of the nav row */
    flex-shrink: 0;
  }
  .cal-view-btn {
    padding: 5px 14px; border-radius: 5px; border: none;
    background: transparent; color: var(--text3);
    font-family: var(--title); font-size: 11px; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
    letter-spacing: 0.8px; text-transform: uppercase; white-space: nowrap;
  }
  .cal-view-btn.active { background: var(--surface3); color: var(--text); border: 1px solid var(--border2); }
  .cal-view-btn:hover:not(.active) { color: var(--text2); }
  .cal-toggle-sep { width: 1px; background: var(--border); margin: 3px 2px; flex-shrink: 0; }
  .cal-view-btn-hoy { color: var(--green); letter-spacing: 0.5px; }
  .cal-view-btn-hoy:hover { color: #00f090 !important; }

  .btn {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text2);
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--title);
    font-size: 12px;
    transition: all 0.15s;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .btn:hover { border-color: var(--border2); color: var(--text); background: var(--surface3); }

  .btn-primary { background: var(--green); border-color: var(--green); color: #000; font-weight: 600; }
  .btn-primary:hover { background: #00f090; border-color: #00f090; color: #000; }

  .nav-btn {
    width: 36px; height: 36px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text2);
    border-radius: 6px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    transition: all 0.15s;
  }

  .nav-btn:hover { background: var(--surface3); border-color: var(--border2); color: var(--text); }

  .view-panel { display: none; }
  .view-panel.active { display: block; }

  /* ── View loading spinner (Analysis) ── */
  .view-loader {
    display: none;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    width: 100%;
  }
  .view-loader.active {
    display: flex;
  }
  .view-loader-wrap {
    display: flex;
    align-items: center;
  }
  .view-loader-dots {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .view-loader-dots span {
    width: 8px; height: 8px;
    border-radius: 3px;
    background: var(--green);
    opacity: 0.15;
    animation: dotFade 1.6s ease-in-out infinite;
  }
  .view-loader-dots span:nth-child(1) { animation-delay: 0s; }
  .view-loader-dots span:nth-child(2) { animation-delay: 0.25s; }
  .view-loader-dots span:nth-child(3) { animation-delay: 0.5s; }
  @keyframes dotFade {
    0%, 100% { opacity: 0.15; }
    40% { opacity: 0.8; }
  }

  /* ── Net/Gross switch overlay — cubre el panelAnalysis durante el re-render ── */
  #ngSwitchOverlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0,0,0,0.45);
    justify-content: center;
    align-items: center;
    pointer-events: none;
  }
  #ngSwitchOverlay.active {
    display: flex;
    pointer-events: all;
  }
  /* Analysis panel: same max-width/padding as .app for visual consistency */
  #panelAnalysis { max-width: 1400px; margin: -32px auto 0; padding: 0 24px 32px; box-sizing: border-box; transition: opacity 0.18s ease; }

  /* ════ MONTHLY ════ */
  .month-nav { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
  .account-size-wrap { display: flex; align-items: center; gap: 8px; margin-left: auto; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; }
  .account-size-label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text3); font-weight: 600; white-space: nowrap; }
  .account-size-input { background: transparent; border: none; outline: none; color: var(--text); font-family: var(--title); font-size: 14px; font-weight: 700; width: 90px; text-align: right; }
  .account-size-input::placeholder { color: var(--text3); font-weight: 400; }
  .account-size-currency { font-size: 13px; font-weight: 700; color: var(--text3); }

  .month-title { font-family: var(--title); font-size: 32px; font-weight: 800; letter-spacing: -1px; min-width: 260px; }
  .month-title span { color: var(--text3); font-weight: 400; }

  .stats-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 28px; }

  .stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 20px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s;
  }

  .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent-color, var(--border2)); }
  .stat-card:hover { border-color: var(--border2); }
  .stat-label { font-size: 10px; color: var(--text3); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px; }
  .stat-value { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; }
  .stat-sub { font-size: 10px; color: var(--text3); margin-top: 4px; }
  .stat-positive { --accent-color: var(--green); }
  .stat-positive .stat-value { color: var(--green); }
  .stat-negative { --accent-color: var(--red); }
  .stat-negative .stat-value { color: var(--red); }

  .calendar-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
  .weekdays { display: grid; grid-template-columns: repeat(5, 1fr) 1.3fr; border-bottom: 1px solid var(--border); }
  .weekday { padding: 12px; text-align: center; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text3); }
  .calendar-grid { display: grid; grid-template-columns: repeat(5, 1fr) 1.3fr; }

  .day-cell {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    min-height: 110px;
    padding: 10px;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
    overflow: hidden;
  }

  .day-cell:nth-child(6n) { border-right: none; }
  .day-cell:hover { background: var(--surface2); }
  .day-cell.empty { background: var(--bg); cursor: default; opacity: 0.3; }

  .day-cell.today .day-num {
    background: var(--green); color: #000; border-radius: 4px;
    width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  }

  .day-cell.positive { background: var(--green-dim); }
  .day-cell.positive::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--green); }
  .day-cell.positive:hover { background: var(--green-mid); }
  .day-cell.negative { background: var(--red-dim); }
  .day-cell.negative::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--red); }
  .day-cell.negative:hover { background: var(--red-mid); }

  .day-num { font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 8px; }
  .day-pnl { font-size: 16px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 4px; }
  .day-pnl.pos { color: var(--green); }
  .day-pnl.neg { color: var(--red); }

  .day-meta { display: flex; gap: 6px; flex-wrap: wrap; }
  .tag { font-size: 9px; padding: 2px 6px; border-radius: 3px; font-weight: 500; letter-spacing: 0.3px; }
  .tag-trades { background: var(--blue-dim); color: var(--blue); border: 1px solid #4a9eff22; }
  .tag-wr { background: #ffffff08; color: var(--text3); border: 1px solid var(--border); }
  .tag-pct.pos { background: var(--green-dim); color: var(--green); border: 1px solid #00d97e22; }
  .tag-pct.neg { background: var(--red-dim); color: var(--red); border: 1px solid #ff475722; }
  .day-note-icon { position: absolute; bottom: 8px; right: 8px; font-size: 12px; opacity: 0.5; }

  /* ── Weekly recap (Week column cell) ── */
  .day-cell.week-recap-cell {
    cursor: default !important;
  }
  .day-cell.week-recap-cell:hover { background: var(--surface2); }

  .week-recap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 5px;
    padding: 6px 4px;
  }
  .week-recap-num {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--text);
  }
  .week-recap-pnl {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1;
  }
  .week-recap-pnl.pos { color: var(--green); }
  .week-recap-pnl.neg { color: var(--red); }
  .week-recap-trades {
    font-size: 10px;
    color: var(--text3);
    font-weight: 500;
  }
  .week-recap-empty {
    opacity: 0.25;
  }

  .streak-badge { position: absolute; top: 8px; right: 8px; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.5px; }
  .streak-win { background: var(--green-dim); color: var(--green); border: 1px solid #00d97e33; }
  .streak-loss { background: var(--red-dim); color: var(--red); border: 1px solid #ff475733; }

  .analysis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
  .analysis-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
  .analysis-title { font-family: var(--title); font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text3); margin-bottom: 16px; }
  .streak-list { display: flex; flex-direction: column; gap: 8px; }

  .streak-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; background: var(--surface2); border-radius: 6px; border: 1px solid var(--border);
  }

  .streak-info { font-size: 12px; color: var(--text2); }
  .streak-days { font-size: 18px; font-weight: 700; }
  .streak-days.pos { color: var(--green); }
  .streak-days.neg { color: var(--red); }

  .equity-wrap { margin-top: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
  .equity-title { font-family: var(--title); font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text3); margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
  canvas#equityChart { width: 100% !important; display: block; }

  .weekday-perf { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .wd-item { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 12px 8px; text-align: center; }
  .wd-name { font-size: 10px; color: var(--text3); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
  .wd-val { font-size: 13px; font-weight: 700; }

  .empty-prompt { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 60px; color: var(--text3); font-size: 11px; gap: 4px; opacity: 0; transition: opacity 0.15s; }
  .day-cell:hover .empty-prompt { opacity: 1; }
  .empty-prompt-icon { font-size: 18px; }

  /* ════ ANNUAL ════ */
  .year-nav { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }

  .year-title { font-family: var(--title); font-size: 42px; font-weight: 800; letter-spacing: -2px; line-height: 1; }

  .year-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-left: 8px; }

  .year-pill {
    padding: 5px 12px; border-radius: 20px; border: 1px solid var(--border);
    background: var(--surface2); color: var(--text3);
    font-family: var(--title); font-size: 12px; cursor: pointer; transition: all 0.15s; font-weight: 500;
  }

  .year-pill:hover { border-color: var(--border2); color: var(--text2); }
  .year-pill.active { background: var(--green); border-color: var(--green); color: #000; font-weight: 700; }

  .annual-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 28px; }

  .annual-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; position: relative; overflow: hidden; }
  .annual-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent-color, var(--border2)); }

  .months-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

  .month-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: visible; transition: border-color 0.2s; }
  .month-card:hover { border-color: var(--border2); }

  .month-card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    cursor: pointer; transition: background 0.15s;
    border-radius: 12px 12px 0 0;
  }

  .month-card-header:hover { background: var(--surface2); }

  .month-card-name { font-family: var(--title); font-size: 14px; font-weight: 700; letter-spacing: -0.3px; }
  .month-card-pnl { font-size: 13px; font-weight: 700; }
  .month-card-pnl.pos { color: var(--green); }
  .month-card-pnl.neg { color: var(--red); }
  .month-card-pnl.neutral { color: var(--text3); }

  .month-card-meta { font-size: 9px; color: var(--text3); padding: 0 16px 6px; display: flex; gap: 10px; }

  .mini-cal { padding: 8px 10px 10px; }
  .mini-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
  .mini-wd { text-align: center; font-size: 8px; color: var(--text3); padding: 2px 0; letter-spacing: 0.5px; }
  .mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

  .mini-day {
    aspect-ratio: 1;
    border-radius: 3px;
    cursor: pointer;
    transition: transform 0.1s;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    font-size: 8px; font-weight: 500;
    overflow: visible;
  }

  .mini-day:hover { transform: scale(1.35); z-index: 10; }
  .mini-day:hover .mini-tooltip { display: flex; }

  .mini-day.md-empty { background: transparent; cursor: default; pointer-events: none; }
  .mini-day.md-blank { background: var(--surface3); color: var(--text3); }
  .mini-day.md-blank:hover { background: var(--border2); }
  .mini-day.mini-day.md-pos { background: var(--green); opacity: 0.55; }
  .mini-day.md-pos:hover { opacity: 1; }
  .mini-day.md-neg { background: var(--red); opacity: 0.45; }
  .mini-day.md-neg:hover { opacity: 1; }
  .mini-day .md-num { position: absolute; font-size: clamp(7px, 0.85vw, 13px); font-weight: 500;
    line-height: 1; pointer-events: none;
    top: 50%; left: 50%; transform: translate(-50%,-50%);
    white-space: nowrap; z-index: 1; }

  .mini-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface3);
    border: 1px solid var(--border2);
    border-radius: 6px;
    padding: 6px 8px;
    white-space: nowrap;
    font-size: 10px;
    color: var(--text);
    z-index: 200;
    flex-direction: column;
    gap: 2px;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  }

  .mini-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--border2); }
  .tt-date { color: var(--text3); font-size: 9px; margin-bottom: 2px; }
  .tt-pnl { font-weight: 700; font-size: 12px; }
  .tt-pnl.pos { color: var(--green); }
  .tt-pnl.neg { color: var(--red); }
  .tt-trades { color: var(--text3); font-size: 9px; }

  .month-pnl-bar { height: 3px; margin: 0 10px 8px; background: var(--border); border-radius: 2px; overflow: hidden; }
  .month-pnl-fill { height: 100%; border-radius: 2px; }

  .annual-equity-wrap { margin-top: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
  canvas#annualChart { width: 100% !important; height: 140px !important; }

  /* ── Analysis View ── */
  .analysis-view-header { margin-bottom: 24px; }
  .analysis-view-title { font-family: var(--title); font-size: 32px; font-weight: 800; letter-spacing: -1px; margin-bottom: 6px; }
  .analysis-view-subtitle { font-size: 12px; color: var(--text3); }

  /* ── Enrichment banner: shown while background queues are fetching data ── */
  .av-enrich-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient(90deg, rgba(0, 217, 126, 0.08), rgba(0, 217, 126, 0.02));
    border: 1px solid var(--green-mid);
    border-left: 3px solid var(--green);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 20px;
  }
  .av-enrich-banner-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
  }
  .av-enrich-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--green-mid);
    border-top-color: var(--green);
    border-radius: 50%;
    animation: av-enrich-spin 0.8s linear infinite;
    flex-shrink: 0;
  }
  @keyframes av-enrich-spin {
    to { transform: rotate(360deg); }
  }
  .av-enrich-banner-text {
    min-width: 0;
  }
  .av-enrich-banner-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.3px;
    margin-bottom: 2px;
  }
  .av-enrich-banner-sub {
    font-size: 11px;
    color: var(--text3);
    line-height: 1.4;
  }
  .av-enrich-banner-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }
  .av-enrich-progress-bar {
    width: 120px;
    height: 4px;
    background: var(--surface2);
    border-radius: 2px;
    overflow: hidden;
  }
  .av-enrich-progress-fill {
    height: 100%;
    background: var(--green);
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 0%;
  }
  .av-enrich-progress-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--green);
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    text-align: right;
  }
  @media (max-width: 600px) {
    .av-enrich-banner { flex-direction: column; align-items: flex-start; }
    .av-enrich-banner-progress { width: 100%; }
    .av-enrich-progress-bar { flex: 1; width: auto; }
  }

  /* ── Delisted tickers note: discreet informational pill shown below banner ── */
  .av-delisted-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255, 175, 0, 0.06);
    border: 1px solid rgba(255, 175, 0, 0.2);
    border-radius: 8px;
    color: var(--amber, #ffaf00);
    font-size: 11.5px;
    font-weight: 500;
    margin-bottom: 16px;
    line-height: 1.4;
  }
  .av-delisted-note svg {
    flex-shrink: 0;
    opacity: 0.85;
  }

  /* ── Analysis filter bar ── */
  .av-filter-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 20px;
    flex-wrap: wrap; }
  /* Each filter: label + custom select wrapper */
  .av-flt { position: relative; display: flex; align-items: center; gap: 0; }
  .av-flt-label { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700;
    color: var(--text3); padding: 0 8px 0 0; white-space: nowrap; }
  .av-flt-select { appearance: none; -webkit-appearance: none;
    background: var(--surface); border: 1px solid var(--border); border-radius: 7px;
    color: var(--text); font-family: var(--title); font-size: 11px;
    padding: 6px 28px 6px 10px; cursor: pointer; outline: none;
    transition: border-color 0.12s; min-width: 90px; }
  .av-flt-select:hover  { border-color: var(--text2); }
  .av-flt-select:focus  { border-color: var(--green); }
  .av-flt-select.active { border-color: var(--green); color: var(--green); font-weight: 700; }
  .av-flt-arrow { position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
    pointer-events: none; font-size: 9px; color: var(--text3); }
  .av-flt-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; flex-shrink: 0; }
  .av-flt-reset { background: none; border: none; color: var(--text3); font-family: var(--title);
    font-size: 10px; padding: 6px 8px; cursor: pointer; border-radius: 6px; transition: all 0.12s; }
  .av-flt-reset:hover { color: var(--text); background: var(--surface); }
  .av-top-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--green);
    color: #fff;
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1.6;
  }

  /* Vertical bar chart (day of week) */
  .av-bar-chart-wrap { min-height: 180px; }
  .av-vbar-chart { display: flex; align-items: flex-end; gap: 6px; height: 200px; padding-top: 10px; }
  .av-vbar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
  .av-vbar-value { font-size: 13px; font-weight: 700; letter-spacing: -0.3px; white-space: nowrap; }
  .av-vbar-track { flex: 1; width: 100%; max-width: 48px; background: var(--border); border-radius: 4px; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end; }
  .av-vbar-fill { border-radius: 4px 4px 0 0; transition: height 0.4s ease; min-height: 2px; }
  .av-vbar-label { font-size: 12px; font-weight: 700; color: var(--text); margin-top: 2px; }
  .av-vbar-sub { font-size: 9px; color: var(--text3); }

  /* Horizontal bar chart (hour) */
  .av-hbar-chart { display: flex; flex-direction: column; gap: 4px; }
  .av-hbar-row { display: grid; grid-template-columns: 42px 1fr auto auto; gap: 8px; align-items: center; padding: 5px 0;
    border-bottom: 1px solid var(--border); }
  .av-hbar-row:last-child { border-bottom: none; }
  .av-hbar-label { font-size: 11px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
  .av-hbar-track { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
  .av-hbar-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; min-width: 2px; }
  .av-hbar-value { font-size: 12px; font-weight: 700; letter-spacing: -0.3px; text-align: right; white-space: nowrap;
    font-variant-numeric: tabular-nums; min-width: 50px; }
  .av-hbar-sub { font-size: 9px; color: var(--text3); text-align: right; white-space: nowrap; min-width: 52px; }

  /* ── Unified KPI row: Results + Execution side by side ──────────
     Single horizontal row that combines the 4 summary cards (results)
     and the 3 execution quality metrics, separated by a subtle vertical
     divider. Both groups share the same card base style for visual
     cohesion; the divider signals the conceptual split.
     ─────────────────────────────────────────────────────────────── */
  .av-kpi-row {
    display: flex;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 24px;
  }
  .av-kpi-group {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .av-kpi-group-results { flex-grow: 4; }   /* 4 cards inside → more width */
  .av-kpi-group-execution { flex-grow: 3; } /* 3 cards inside → less width */
  .av-kpi-group-label {
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text3);
    font-weight: 600;
    margin-bottom: 8px;
    padding-left: 2px;
  }
  .av-kpi-divider {
    width: 1px;
    background: var(--border);
    flex-shrink: 0;
    align-self: stretch;
    margin-top: 22px;  /* align with card tops (skip the group label) */
  }

  .av-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    flex: 1;
  }
  .av-sum-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    min-width: 0;
  }
  .av-sum-label {
    font-size: 9px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text3);
    margin-bottom: 6px;
    font-weight: 600;
  }
  .av-sum-value {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.5px;
    font-feature-settings: "tnum" 1;
  }
  .av-sum-sub {
    font-size: 10px;
    color: var(--text3);
    margin-top: 3px;
  }

  /* ── Execution Quality — same card style as summary for cohesion ── */
  .av-exec-quality {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    flex: 1;
  }
  .av-eq-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    min-width: 0;
  }
  .av-eq-label {
    font-size: 9px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text3);
    margin-bottom: 6px;
    font-weight: 600;
  }
  .av-eq-value {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text);
    font-feature-settings: "tnum" 1;
  }
  .av-eq-sub {
    font-size: 10px;
    color: var(--text3);
    margin-top: 3px;
  }

  .av-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .av-table-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px; }
  .av-table-title { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text3); font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

  /* Stack container: lets the right column contain 2 stacked cards
     so its total height matches the taller left column (By Sector). */
  .av-table-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }

  /* ── Streaks: 4 cards side-by-side, closes the trend-analysis block
     (Cumulative PnL → Drawdown → Streaks). Full-width row layout.
     ─────────────────────────────────────────────────────────────── */
  .av-streaks-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 6px;
  }
  .av-streak-cell {
    padding: 4px 20px;
    border-left: 1px solid var(--border);
    min-width: 0;
  }
  .av-streak-cell:first-child {
    padding-left: 0;
    border-left: none;
  }
  .av-streak-cell:last-child {
    padding-right: 0;
  }
  .av-streak-cell-label {
    font-size: 9px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text3);
    font-weight: 600;
    margin-bottom: 8px;
  }
  .av-streak-cell-value {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--text);
    font-feature-settings: "tnum" 1;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
  }
  .av-streak-cell-value .av-streak-unit {
    font-size: 11px;
    font-weight: 500;
    color: var(--text3);
    letter-spacing: 0;
  }
  .av-streak-cell-value .av-streak-arrow {
    font-size: 12px;
    font-weight: 700;
  }
  .av-streak-cell-value.pos { color: var(--green); }
  .av-streak-cell-value.neg { color: var(--red); }
  .av-streak-cell-sub {
    font-size: 10px;
    color: var(--text3);
    margin-top: 6px;
    font-family: var(--mono, monospace);
  }
  .av-chart-legend { display: inline-flex; align-items: center; gap: 14px; letter-spacing: 0.3px; text-transform: none; font-size: 10px; font-weight: 500; color: var(--text3); }
  .av-legend-item { display: inline-flex; align-items: center; gap: 6px; }
  .av-legend-dot { display: inline-block; flex-shrink: 0; }
  .av-legend-bar { width: 8px; height: 8px; background: var(--text3); border-radius: 2px; opacity: 0.55; }
  .av-legend-line { width: 14px; height: 2px; background: var(--green); border-radius: 2px; }

  .av-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center;
    padding: 10px 0; border-bottom: 1px solid var(--border); }
  .av-row:last-child { border-bottom: none; }
  .av-row-name { font-size: 12px; font-weight: 600; color: var(--text); }
  .av-row-sub { font-size: 10px; color: var(--text3); margin-top: 2px; }
  .av-row-trades { font-size: 10px; color: var(--text3); text-align: right; white-space: nowrap; }
  .av-row-wr { font-size: 10px; color: var(--text3); text-align: right; white-space: nowrap; }
  .av-row-pnl { font-size: 13px; font-weight: 700; text-align: right; white-space: nowrap; }
  .av-row-pnl.pos { color: var(--green); }
  .av-row-pnl.neg { color: var(--red); }
  .av-bar-wrap { height: 3px; background: var(--border); border-radius: 2px; margin-top: 6px; overflow: hidden; grid-column: 1/-1; }
  .av-bar-fill { height: 100%; border-radius: 2px; }

  .av-empty { text-align: center; padding: 40px 20px; color: var(--text3); font-size: 12px; line-height: 1.8; }


  @media (max-width: 1024px) {
    /* At narrower widths, the 7-card row gets too cramped.
       Stack Results + Execution vertically, each keeping its grid. */
    .av-kpi-row {
      flex-direction: column;
      gap: 16px;
    }
    .av-kpi-divider { display: none; }
    .av-kpi-group-label { margin-bottom: 8px; }
  }
  @media (max-width: 768px) {
    .av-tables { grid-template-columns: 1fr; }
    .av-summary { grid-template-columns: repeat(2,1fr); }
    .av-exec-quality { grid-template-columns: repeat(3, 1fr); }
    .av-streaks-row { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .av-streak-cell {
      padding: 0;
      border-left: none;
    }
  }
  @media (max-width: 480px) {
    .av-exec-quality { grid-template-columns: 1fr; }
    .av-streaks-row { grid-template-columns: 1fr; }
  }

  .monthly-summary-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin-top: 20px; }

  .msr-item { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 8px; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
  .msr-item:hover { border-color: var(--border2); background: var(--surface2); }
  .msr-name { font-size: 9px; color: var(--text3); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
  .msr-pnl { font-size: 12px; font-weight: 700; }
  .msr-pnl.pos { color: var(--green); }
  .msr-pnl.neg { color: var(--red); }
  .msr-pnl.neutral { color: var(--text3); }
  .msr-bar-wrap { height: 3px; background: var(--border); border-radius: 2px; margin-top: 6px; overflow: hidden; }
  .msr-bar-fill { height: 100%; border-radius: 2px; }

  /* ════ MODAL ════ */
  .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); z-index: 100; align-items: center; justify-content: center; }
  .modal-overlay.active { display: flex; }

  .modal {
    background: var(--surface); border: 1px solid var(--border2); border-radius: 16px;
    width: 480px; max-width: 95vw; padding: 28px; position: relative;
    animation: slideUp 0.2s ease;
  }

  @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

  .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
  .modal-date { font-family: var(--title); font-size: 20px; font-weight: 700; }

  .modal-close { width: 30px; height: 30px; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; color: var(--text2); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
  .modal-close:hover { background: var(--surface3); color: var(--text); }

  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
  .form-group { display: flex; flex-direction: column; gap: 6px; }
  .form-group.full { grid-column: span 2; }

  label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text3); }

  input, textarea {
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    color: var(--text); font-family: var(--title); font-size: 13px; padding: 10px 12px;
    transition: border-color 0.15s; outline: none; width: 100%;
  }

  input:focus, textarea:focus { border-color: var(--green); }
  textarea { resize: vertical; min-height: 80px; }
  input::placeholder, textarea::placeholder { color: var(--text3); }

  .modal-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 20px; }
  .modal-actions .btn { height: 36px; display: flex; align-items: center; justify-content: center; padding: 0 16px; }
  .btn-delete { background: var(--red-dim); border-color: var(--red); color: var(--red); margin-right: auto; }
  .btn-delete:hover { background: var(--red-mid); }

  .btn-das { background: #1a1f2e; border-color: var(--amber); color: var(--amber); font-weight: 600; }
  .btn-das:hover { background: #22293a; border-color: #ffb830; color: #ffb830; }
  body.light .btn-das { background: #fffbf0; border-color: #d97706; color: #b45309; }
  body.light .btn-das:hover { background: #fef3c7; border-color: #b45309; color: #92400e; }
  body.warm  .btn-das { background: #fef3e2; border-color: #c2840a; color: #92400e; }
  body.warm  .btn-das:hover { background: #fde8c4; border-color: #92400e; color: #78350f; }

  /* ════ DAS IMPORT MODAL ════ */
  .das-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(6px); z-index: 200; align-items: center; justify-content: center; padding: 20px; }
  .das-overlay.active { display: flex; }

  .das-modal {
    background: var(--surface); border: 1px solid var(--border2); border-radius: 18px;
    width: 720px; max-width: 100%; max-height: 90vh; overflow-y: auto;
    padding: 32px; position: relative; animation: slideUp 0.2s ease;
  }

  .das-modal-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 16px; }

  .das-title { font-family: var(--title); font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
  .das-subtitle { font-size: 11px; color: var(--text3); margin-top: 4px; letter-spacing: 0.5px; }

  .das-dropzone {
    border: 2px dashed var(--border2);
    border-radius: 12px;
    padding: 40px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 20px;
    background: var(--bg);
  }

  .das-dropzone:hover, .das-dropzone.drag-over { border-color: var(--amber); background: #1a1600; }

  .das-dropzone-icon { font-size: 36px; margin-bottom: 12px; }
  .das-dropzone-text { font-size: 14px; color: var(--text2); margin-bottom: 6px; }
  .das-dropzone-hint { font-size: 11px; color: var(--text3); }

  /* ── Broker selector ── */
  .broker-selector-wrap {
    margin-bottom: 20px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
  }
  .broker-selector-label {
    display: flex; align-items: center; gap: 7px;
    font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--text2);
    margin-bottom: 10px;
  }
  .broker-selector-icon { font-size: 14px; }
  .broker-selector-row {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  }
  .broker-selector {
    background: var(--bg);
    border: 1px solid var(--border2);
    border-radius: 7px;
    color: var(--text);
    font-family: var(--title);
    font-size: 14px;
    font-weight: 600;
    padding: 9px 14px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
    min-width: 220px;
    appearance: auto;
  }
  .broker-selector:focus { border-color: var(--green); }
  .broker-selector option:disabled { color: var(--text3); }
  .broker-hint {
    font-size: 11px;
    color: var(--text3);
    font-family: var(--title);
    transition: color 0.2s;
  }

  .das-formats {
    background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
    padding: 16px 20px; margin-bottom: 20px; font-size: 11px; color: var(--text3); line-height: 1.8;
  }

  .das-formats strong { color: var(--amber); font-weight: 600; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; display: block; margin-bottom: 8px; }

  .das-formats code { background: var(--bg); color: var(--text2); padding: 1px 5px; border-radius: 3px; font-family: var(--title); font-size: 10px; }

  /* Preview table */
  .das-preview { margin-bottom: 20px; }
  .das-preview-title { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text3); margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
  .das-preview-count { background: var(--green-dim); color: var(--green); border: 1px solid #00d97e33; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; }
  .das-preview-count.warn { background: var(--amber-dim, #ffa50220); color: var(--amber); border-color: #ffa50233; }

  .das-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }

  .das-table { width: 100%; border-collapse: collapse; font-size: 11px; }
  .das-table th { padding: 8px 12px; text-align: left; background: var(--surface2); color: var(--text3); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; border-bottom: 1px solid var(--border); font-weight: 500; }
  .das-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--text2); }
  .das-table tr:last-child td { border-bottom: none; }
  .das-table tr:hover td { background: var(--surface2); }
  .td-pos { color: var(--green) !important; font-weight: 600; }
  .td-neg { color: var(--red) !important; font-weight: 600; }
  .td-date { color: var(--text); font-weight: 500; }

  /* Conflict warning */
  .das-conflict { background: #ffa50211; border: 1px solid #ffa50244; border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; font-size: 12px; color: var(--amber); display: none; }
  .das-conflict.visible { display: block; }
  .das-conflict strong { display: block; margin-bottom: 4px; }

  /* Merge options */
  .das-merge-opts { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }

  .merge-opt {
    flex: 1; min-width: 140px;
    padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface2); cursor: pointer; transition: all 0.15s; text-align: left;
  }

  .merge-opt:hover { border-color: var(--border2); }
  .merge-opt.selected { border-color: var(--amber); background: #1a1600; }
  .merge-opt-label { font-size: 11px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
  .merge-opt-desc { font-size: 10px; color: var(--text3); line-height: 1.4; }

  .das-error { background: var(--red-dim); border: 1px solid var(--red); border-radius: 8px; padding: 14px 16px; font-size: 12px; color: var(--red); margin-bottom: 16px; display: none; white-space: pre-wrap; }
  .das-error.visible { display: block; }

  .das-actions { display: flex; gap: 8px; justify-content: flex-end; }
  .das-actions .btn-cancel { margin-right: auto; }

  .progress-bar { height: 3px; background: var(--border); border-radius: 2px; margin-top: 12px; overflow: hidden; display: none; }
  .progress-fill { height: 100%; background: var(--amber); border-radius: 2px; width: 0; transition: width 0.3s; }

  .das-success { text-align: center; padding: 20px; display: none; }
  .das-success.visible { display: block; }
  .das-success-icon { font-size: 48px; margin-bottom: 12px; }
  .das-success-text { font-family: var(--title); font-size: 18px; font-weight: 700; margin-bottom: 6px; color: var(--green); }
  .das-success-sub { font-size: 12px; color: var(--text3); }

  .export-hint { text-align: center; padding: 16px; font-size: 11px; color: var(--text3); letter-spacing: 0.5px; }

  @media (max-width: 1100px) {
    .months-grid { grid-template-columns: repeat(2, 1fr); }
    .annual-stats { grid-template-columns: repeat(3, 1fr); }
    .monthly-summary-row { grid-template-columns: repeat(6, 1fr); }
  }

  @media (max-width: 700px) {
    .stats-bar { grid-template-columns: repeat(2, 1fr); }
    .months-grid { grid-template-columns: 1fr; }
    .analysis-grid { grid-template-columns: 1fr; }
    .month-title { font-size: 22px; min-width: auto; }
    .day-cell { min-height: 70px; padding: 6px; }
    .tag { display: none; }
    .monthly-summary-row { grid-template-columns: repeat(4, 1fr); }
    .annual-stats { grid-template-columns: repeat(2, 1fr); }
  }

  /* ════ DAY DETAIL SIDE PANEL ════ */
  .side-panel-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(2px);
    z-index: 150;
  }
  .side-panel-backdrop.active { display: block; }

  .side-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 520px; max-width: 100vw;
    background: var(--surface);
    border-left: 1px solid var(--border2);
    z-index: 151;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
    overflow: hidden;
  }
  .side-panel.open { transform: translateX(0); }

  .sp-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .sp-header-left { display: flex; flex-direction: column; gap: 4px; }
  .sp-date { font-family: var(--title); font-size: 18px; font-weight: 700; }
  .sp-pnl-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 20px; font-weight: 700; letter-spacing: -0.5px;
  }
  .sp-pnl-badge.pos { color: var(--green); }
  .sp-pnl-badge.neg { color: var(--red); }
  .sp-meta { font-size: 11px; color: var(--text3); margin-top: 2px; }
  .sp-close {
    width: 32px; height: 32px; background: var(--surface2);
    border: 1px solid var(--border); border-radius: 6px;
    color: var(--text2); cursor: pointer; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; flex-shrink: 0;
  }
  .sp-close:hover { background: var(--surface3); color: var(--text); }

  .sp-body { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 20px; }
  .sp-body::-webkit-scrollbar { width: 4px; }
  .sp-body::-webkit-scrollbar-track { background: transparent; }
  .sp-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

  .sp-section-title {
    font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--text3); margin-bottom: 10px;
  }

  /* ── Equity curve (side panel + trade detail) ── */
  .sp-equity-section {
    margin-bottom: 16px;
  }
  .sp-equity-wrap {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 8px 6px;
    overflow: hidden;
  }
  .td-equity-section {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 8px 6px;
    margin-bottom: 12px;
  }
  .td-equity-label {
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text3);
    margin-bottom: 6px;
    padding-left: 4px;
  }

  /* ticker cards */
  .ticker-list { display: flex; flex-direction: column; gap: 8px; }
  .ticker-card {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 10px; padding: 14px 16px;
    cursor: pointer; transition: border-color 0.15s, background 0.15s;
    position: relative; overflow: hidden;
  }
  .ticker-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tc-color, var(--border2)); }
  .ticker-card:hover { border-color: var(--border2); background: var(--surface3); }
  .ticker-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .ticker-sym { font-family: var(--title); font-size: 15px; font-weight: 700; letter-spacing: 0.5px; }
  .ticker-pnl { font-size: 16px; font-weight: 700; }
  .ticker-pnl.pos { color: var(--green); }
  .ticker-pnl.neg { color: var(--red); }
  .ticker-stats { display: flex; gap: 10px; flex-wrap: wrap; }
  .ticker-stat { font-size: 10px; color: var(--text3); }
  .ticker-stat span { color: var(--text2); font-weight: 600; }
  .ticker-chevron { font-size: 12px; color: var(--text3); margin-left: 8px; }

  /* trade list (per ticker) */
  .sp-back-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--surface2); border: 1px solid var(--border);
    color: var(--text2); padding: 6px 12px; border-radius: 6px;
    cursor: pointer; font-family: var(--title); font-size: 11px;
    transition: all 0.15s; letter-spacing: 0.5px; margin-bottom: 4px;
  }
  .sp-back-btn:hover { background: var(--surface3); color: var(--text); }

  .sp-ticker-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
  }
  .sp-ticker-name { font-family: var(--title); font-size: 22px; font-weight: 700; }
  .sp-ticker-pnl { font-size: 18px; font-weight: 700; }
  .sp-ticker-pnl.pos { color: var(--green); }
  .sp-ticker-pnl.neg { color: var(--red); }

  .trade-list { display: flex; flex-direction: column; gap: 8px; }
  .trade-row {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 8px; padding: 12px 14px;
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 12px;
  }
  .trade-num {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--surface3); border: 1px solid var(--border2);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: var(--text3);
    flex-shrink: 0;
  }
  .trade-info { display: flex; flex-direction: column; gap: 4px; }
  .trade-prices { font-size: 12px; color: var(--text2); }
  .trade-prices .entry { color: var(--blue); font-weight: 600; }
  .trade-prices .exit { font-weight: 600; }
  .trade-prices .exit.pos { color: var(--green); }
  .trade-prices .exit.neg { color: var(--red); }
  .trade-meta { font-size: 10px; color: var(--text3); }
  .trade-pnl { font-size: 15px; font-weight: 700; text-align: right; white-space: nowrap; }
  .trade-pnl.pos { color: var(--green); }
  .trade-pnl.neg { color: var(--red); }

  .trade-side-badge {
    display: inline-flex; align-items: center;
    font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 3px;
    letter-spacing: 0.5px; margin-right: 6px;
  }
  .trade-side-badge.long { background: #4a9eff18; color: var(--blue); border: 1px solid #4a9eff33; }
  .trade-side-badge.short { background: #ffa50218; color: var(--amber); border: 1px solid #ffa50233; }

  /* intraday chart */
  .intraday-wrap {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 10px; padding: 16px; margin-top: 4px;
  }
  .intraday-title-row {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
  }
  .intraday-sym-label { font-family: var(--title); font-size: 12px; font-weight: 700; color: var(--text2); }
  .intraday-status { font-size: 10px; color: var(--text3); }
  canvas#intradayChart { width: 100% !important; height: 160px !important; display: block; }

  .chart-legend { display: flex; gap: 14px; margin-top: 8px; }
  .legend-item { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text3); }
  .legend-dot { width: 8px; height: 8px; border-radius: 50%; }

  .sp-no-data {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 32px; gap: 8px; color: var(--text3); font-size: 12px; text-align: center;
  }
  .sp-no-data-icon { font-size: 28px; opacity: 0.5; }

  /* ════ FULLSCREEN CHART MODAL ════ */
  .chart-modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.92); backdrop-filter: blur(8px);
    z-index: 300; align-items: center; justify-content: center;
    padding: 20px;
  }
  .chart-modal-overlay.active { display: flex; }

  .chart-modal {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 16px;
    width: 100%; max-width: 1100px;
    max-height: 90vh;
    display: flex; flex-direction: column;
    animation: slideUp 0.2s ease;
    overflow: hidden;
  }

  .cm-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px; border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .cm-header-left { display: flex; align-items: center; gap: 16px; }
  .cm-sym { font-family: var(--title); font-size: 20px; font-weight: 700; letter-spacing: 0.5px; }
  .cm-date { font-size: 12px; color: var(--text3); }
  .cm-pnl { font-size: 14px; font-weight: 700; }
  .cm-pnl.pos { color: var(--green); }
  .cm-pnl.neg { color: var(--red); }
  .cm-interval-btns { display: flex; gap: 4px; }
  .cm-interval-btn {
    padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border);
    background: transparent; color: var(--text3);
    font-family: var(--title); font-size: 10px; cursor: pointer;
    transition: all 0.15s; letter-spacing: 0.5px;
  }
  .cm-interval-btn.active { background: var(--surface3); color: var(--text); border-color: var(--border2); }
  .cm-interval-btn:hover:not(.active) { color: var(--text2); }

  .cm-body {
    flex: 1; padding: 20px 24px; display: flex; flex-direction: column; gap: 12px;
    overflow: hidden; min-height: 0;
  }
  .cm-chart-area { flex: 1; position: relative; min-height: 0; }
  canvas#chartModalCanvas { width: 100% !important; display: block; cursor: crosshair; }

  .cm-status { font-size: 10px; color: var(--text3); text-align: right; }

  .cm-legend { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
  .cm-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text3); }
  .cm-legend-dot { width: 10px; height: 10px; border-radius: 50%; }
  .cm-legend-line { width: 18px; height: 2px; border-radius: 1px; }

  .cm-trades-row {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding-top: 12px; border-top: 1px solid var(--border);
    flex-shrink: 0;
  }
  .cm-trade-pill {
    display: flex; align-items: center; gap: 6px;
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 6px; padding: 6px 10px; font-size: 11px;
    cursor: pointer; transition: border-color 0.15s;
  }
  .cm-trade-pill:hover { border-color: var(--border2); }
  .cm-trade-pill .pill-num {
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700;
  }
  .cm-trade-pill .pill-entry { color: var(--blue); font-weight: 600; }
  .cm-trade-pill .pill-exit { font-weight: 600; }
  .cm-trade-pill .pill-pnl { font-weight: 700; }
  .cm-trade-pill .pill-pnl.pos { color: var(--green); }
  .cm-trade-pill .pill-pnl.neg { color: var(--red); }

  /* expand button in side panel */
  .intraday-expand-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--surface3); border: 1px solid var(--border2);
    color: var(--text2); padding: 5px 10px; border-radius: 5px;
    cursor: pointer; font-family: var(--title); font-size: 10px;
    transition: all 0.15s; letter-spacing: 0.3px;
  }
  .intraday-expand-btn:hover { color: var(--text); border-color: var(--green); }
  /* Hide number input spinners */
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

  /* ── Trade Drilldown Panel ── */
  .dd-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(2px);
    z-index: 160;
  }
  .dd-backdrop.active { display: block; }

  .dd-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 620px; max-width: 100vw;
    background: var(--surface);
    border-left: 1px solid var(--border2);
    z-index: 161;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
    overflow: hidden;
  }
  .dd-panel.open { transform: translateX(0); }

  .dd-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .dd-header-left { display: flex; flex-direction: column; gap: 4px; }
  .dd-title { font-family: var(--title); font-size: 16px; font-weight: 700; color: var(--text); }
  .dd-pnl { font-size: 20px; font-weight: 700; letter-spacing: -0.5px; }
  .dd-pnl.pos { color: var(--green); }
  .dd-pnl.neg { color: var(--red); }
  .dd-meta { font-size: 11px; color: var(--text3); margin-top: 2px; }

  .dd-body {
    flex: 1; overflow-y: auto; padding: 0;
  }
  .dd-body::-webkit-scrollbar { width: 4px; }
  .dd-body::-webkit-scrollbar-track { background: transparent; }
  .dd-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

  .dd-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: var(--title); }
  .dd-table thead { position: sticky; top: 0; z-index: 2; }
  .dd-table th {
    padding: 10px 14px; text-align: left;
    font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--text3); background: var(--surface2); border-bottom: 1px solid var(--border);
    cursor: pointer; user-select: none; white-space: nowrap;
    transition: color 0.15s;
  }
  .dd-table th:hover { color: var(--text); }
  .dd-table th.dd-sorted { color: var(--text); }
  .dd-table th .dd-sort-arrow { margin-left: 4px; font-size: 9px; opacity: 0.4; }
  .dd-table th.dd-sorted .dd-sort-arrow { opacity: 1; color: var(--green); }

  .dd-table td {
    padding: 10px 14px; border-bottom: 1px solid var(--border);
    white-space: nowrap; color: var(--text2);
  }
  .dd-table tr.dd-row { cursor: pointer; transition: background 0.12s; }
  .dd-table tr.dd-row:hover { background: var(--surface2); }
  .dd-table td.dd-sym { font-weight: 700; color: var(--text); letter-spacing: 0.3px; }
  .dd-table td.dd-pnl-cell { font-weight: 700; }
  .dd-table td.dd-pnl-cell.pos { color: var(--green); }
  .dd-table td.dd-pnl-cell.neg { color: var(--red); }

  @media (max-width: 700px) {
    .dd-panel { width: 100vw; }
    .dd-table th, .dd-table td { padding: 8px 10px; font-size: 11px; }
  }

  /* Clickable summary card hover */
  .av-sum-card[data-dd-all] { transition: border-color 0.15s, transform 0.15s; }
  .av-sum-card[data-dd-all]:hover { border-color: var(--border2); transform: translateY(-1px); }

  /* ── Trade Detail Modal ── */
  .td-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.78); backdrop-filter: blur(4px);
    z-index: 250; align-items: center; justify-content: center; padding: 20px;
  }
  .td-overlay.active { display: flex; }

  .td-modal {
    background: var(--surface); border: 1px solid var(--border2);
    border-radius: 14px; width: 780px; max-width: 100%;
    max-height: calc(100vh - 40px); overflow-y: auto;
    position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }
  .td-modal::-webkit-scrollbar { width: 4px; }
  .td-modal::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

  .td-close {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    width: 30px; height: 30px; background: var(--surface2);
    border: 1px solid var(--border); border-radius: 6px;
    color: var(--text2); cursor: pointer; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
  }
  .td-close:hover { background: var(--surface3); color: var(--text); }

  /* ── 🟢 A. HERO (Result) ── */
  .td-hero {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 20px 22px 16px; gap: 16px;
  }
  .td-hero-left { flex: 1; min-width: 0; padding-right: 40px; }
  .td-sym { font-family: var(--title); font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
  .td-company { font-size: 11px; color: var(--text3); margin-top: 2px; }
  .td-date { font-size: 11px; color: var(--text3); }
  .td-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
  .td-pill {
    font-size: 9px; font-weight: 600; padding: 2px 8px; border-radius: 12px;
    background: var(--surface2); color: var(--text3); border: 1px solid var(--border);
    white-space: nowrap; letter-spacing: 0.3px;
  }
  .td-hero-right { text-align: right; flex-shrink: 0; padding-top: 14px; }
  .td-hero-pnl {
    font-family: var(--title); font-size: 32px; font-weight: 800;
    letter-spacing: -1px; line-height: 1;
  }
  .td-hero-pnl.pos { color: var(--green); }
  .td-hero-pnl.neg { color: var(--red); }
  .td-hero-wr { font-size: 12px; font-weight: 600; margin-top: 6px; color: var(--text3); }

  /* ── 🟡 B. SETUP BAR ── */
  .td-setup-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
    padding: 10px 22px;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    font-family: var(--title);
  }
  .td-setup-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
  .td-setup-lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; color: var(--text3); }
  .td-setup-val { font-size: 13px; font-weight: 700; color: var(--text); }
  .td-setup-sep { color: var(--border2); margin: 0 8px; font-size: 11px; }

  /* ── Chart ── */
  .td-chart-wrap { padding: 4px 0 0; border-bottom: 1px solid var(--border); }
  .td-chart-loading { padding: 60px 0; text-align: center; color: var(--text3); font-size: 12px; }
  .td-chart-toolbar { display: flex; gap: 4px; padding: 8px 22px 4px; }
  .td-tf-btn {
    padding: 3px 10px; border-radius: 4px;
    border: 1px solid var(--border); background: transparent;
    color: var(--text3); font-family: var(--title); font-size: 11px;
    font-weight: 600; cursor: pointer; transition: all 0.15s;
  }
  .td-tf-btn:hover { color: var(--text2); border-color: var(--border2); }
  .td-tf-btn.active { background: var(--surface3); color: var(--text); border-color: var(--border2); }

  /* ── 🔵 C. EXECUTIONS ── */
  .td-exec-details { border-top: 1px solid var(--border); }
  .td-exec-summary {
    padding: 12px 22px; cursor: pointer; user-select: none;
    font-size: 11px; color: var(--text3);
    list-style: none; display: flex; align-items: center; gap: 8px;
    transition: color 0.15s;
  }
  .td-exec-summary:hover { color: var(--text2); }
  .td-exec-summary > span:first-child {
    font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  }
  .td-exec-summary::before { content: '\25B8'; font-size: 10px; transition: transform 0.2s; }
  .td-exec-details[open] > .td-exec-summary::before { transform: rotate(90deg); }
  .td-exec-summary::-webkit-details-marker { display: none; }
  .td-exec-stats { font-size: 11px; color: var(--text3); margin-left: auto; }

  .td-exec-wrap { padding: 0 22px 16px; overflow-x: auto; }
  .td-exec-table { width: 100%; border-collapse: collapse; font-size: 11px; font-family: var(--title); }
  .td-exec-tr { border-bottom: 1px solid var(--border); }
  .td-exec-tr:last-child { border-bottom: none; }
  .td-exec-table td { padding: 6px 6px; white-space: nowrap; color: var(--text2); }
  .td-exec-n { width: 20px; color: var(--text3); font-size: 10px; font-weight: 600; }
  .td-exec-price { font-weight: 600; }
  .td-exec-price.pos { color: var(--green); }
  .td-exec-price.neg { color: var(--red); }
  .td-exec-dim { color: var(--text3); font-size: 10px; }
  .td-exec-pnl { font-weight: 700; text-align: right; }
  .td-exec-pnl.pos { color: var(--green); }
  .td-exec-pnl.neg { color: var(--red); }

  @media (max-width: 700px) {
    .td-overlay { padding: 8px; }
    .td-modal { border-radius: 10px; }
    .td-hero { flex-direction: column; gap: 8px; padding: 16px 16px 12px; }
    .td-hero-left { padding-right: 40px; }
    .td-hero-pnl { font-size: 26px; }
    .td-setup-bar { padding: 8px 16px; }
    .td-exec-summary { padding: 12px 16px; }
    .td-exec-wrap { padding: 0 16px 16px; }
  }
  /* ── Account Settings Modal ── */
  .account-modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.5); z-index: 1000;
    justify-content: center; align-items: center;
    backdrop-filter: blur(4px);
  }
  .account-modal-overlay.active { display: flex; }
  .account-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    width: 380px; max-width: 90vw;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  }
  .account-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
  }
  .account-modal-header h3 {
    font-family: var(--title); font-size: 16px; font-weight: 700;
    color: var(--text); margin: 0;
  }
  .account-modal-close {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--border);
    border-radius: 6px; cursor: pointer; color: var(--text3);
    font-size: 14px; transition: all 0.15s;
  }
  .account-modal-close:hover { border-color: var(--border2); color: var(--text); background: var(--surface3); }
  .account-modal-body { padding: 20px 24px 24px; }
  .account-modal-user {
    display: flex; align-items: center; gap: 12px;
  }
  .account-modal-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--green); flex-shrink: 0;
  }
  .account-modal-info { display: flex; flex-direction: column; gap: 4px; }
  .account-modal-email {
    font-family: var(--title); font-size: 14px; font-weight: 600; color: var(--text);
  }
  .account-modal-plan {
    display: inline-block; width: fit-content;
    font-size: 9px; font-weight: 700; letter-spacing: 1px;
    padding: 2px 8px; border-radius: 8px;
    background: var(--surface2); color: var(--text3);
    border: 1px solid var(--border);
  }
  .account-modal-plan[data-plan="pro"] {
    background: var(--green-dim); color: var(--green); border-color: var(--green-mid);
  }
  .account-modal-plan[data-plan="founder"] {
    background: rgba(217,119,6,0.12); color: #d97706; border-color: rgba(217,119,6,0.3);
  }
  .account-modal-divider { height: 1px; background: var(--border); margin: 16px 0; }
  .account-modal-section { display: flex; flex-direction: column; gap: 10px; }
  .account-modal-label {
    font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--text3);
    font-family: var(--title);
  }
  .account-modal-themes { display: flex; gap: 8px; }
  .account-modal-theme-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 8px;
    background: var(--surface2); border: 1px solid var(--border);
    cursor: pointer; font-family: var(--title);
    font-size: 12px; font-weight: 500; color: var(--text2);
    transition: all 0.15s;
  }
  .account-modal-theme-btn:hover {
    border-color: var(--border2); color: var(--text); background: var(--surface3);
  }
  .account-modal-theme-dot {
    width: 12px; height: 12px; border-radius: 50%;
    border: 1.5px solid; flex-shrink: 0;
  }
  .account-modal-action {
    display: flex; align-items: center; width: 100%;
    padding: 10px 14px; border-radius: 8px;
    background: var(--surface2); border: 1px solid var(--border);
    cursor: pointer; font-family: var(--title);
    font-size: 13px; font-weight: 500; color: var(--text2);
    transition: all 0.15s;
  }
  .account-modal-action:hover {
    border-color: var(--border2); color: var(--text); background: var(--surface3);
  }



  /* ═══════════════════════════════════════════════════════════════════
     UNIFIED BREAKDOWN SYSTEM — Edge Finder
     ─────────────────────────────────────────────────────────────────
     A single visual language for all 6 analysis breakdowns
     (RVOL, Gap %, Float, Market Cap, Stock Price, Sector).
     Data-first, dense-but-balanced, tabular-nums for perfect alignment.
     ═══════════════════════════════════════════════════════════════════ */

  /* ── Card container (wraps each breakdown) ────────────────── */
  .av-table-card.av-breakdown-card {
    padding: 16px 18px 14px;
  }

  /* ── Title row: label + optional status hint ──────────────── */
  .av-breakdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    min-height: 18px;
  }
  .av-breakdown-title {
    font-family: var(--title);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text3);
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  /* Featured variant (RVOL): slightly larger, brighter color, no gradient */
  .av-breakdown-title-featured {
    font-size: 11.5px;
    color: var(--text);
    letter-spacing: 1.8px;
  }
  /* Secondary inline text, e.g. "(relative volume)" */
  .av-breakdown-title-sub {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.8px;
    color: var(--text3);
    text-transform: none;
  }

  /* ── Breakdown table body ─────────────────────────────────── */
  .av-breakdown {
    display: flex;
    flex-direction: column;
  }

  /* Row = grid of 4 data cells + a bar below spanning all columns */
  .av-breakdown-row {
    display: grid;
    grid-template-columns: 1.5fr 0.7fr 1fr 0.55fr;
    column-gap: 14px;
    align-items: center;
    padding: 9px 10px;
    border-bottom: 1px solid var(--border);
    transition: background 0.12s ease;
    position: relative;
  }
  .av-breakdown-row:last-child {
    border-bottom: none;
  }

  /* Header row: uppercase labels, no bar, no hover */
  .av-breakdown-head-row {
    padding-top: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border2, var(--border));
    cursor: default;
  }
  .av-breakdown-head-row .av-breakdown-cell {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text3);
  }

  /* Cells */
  .av-breakdown-cell {
    display: flex;
    align-items: center;
    min-width: 0;
    font-family: var(--title);
    font-size: 12.5px;
    color: var(--text);
  }
  .av-breakdown-cell-name {
    font-weight: 600;
    gap: 8px;
    flex-wrap: wrap;
  }
  .av-breakdown-cell-trades {
    justify-content: flex-end;
    color: var(--text2);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
  }
  .av-breakdown-cell-pnl {
    justify-content: flex-end;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
  }
  .av-breakdown-cell-pnl.pos { color: var(--green); }
  .av-breakdown-cell-pnl.neg { color: var(--red); }
  .av-breakdown-cell-wr {
    justify-content: flex-end;
    color: var(--text2);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
  }

  /* Intensity bar (spans all columns, sits below the row content) */
  .av-breakdown-bar {
    grid-column: 1 / -1;
    height: 2px;
    background: var(--border);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
  }
  .av-breakdown-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.25s ease;
  }

  /* TOP bucket: subtle green tint — no borders, no shadows, stays in flow */
  .av-breakdown-row-top {
    background: rgba(0, 217, 126, 0.04);
  }
  .av-breakdown-row-top:hover {
    background: rgba(0, 217, 126, 0.07);
  }

  /* Empty bucket (fixed-order slot with no data) */
  .av-breakdown-row-empty {
    opacity: 0.42;
  }
  .av-breakdown-row-empty .av-breakdown-cell-name {
    font-weight: 500;
    color: var(--text2);
  }
  .av-breakdown-row-empty .av-breakdown-cell {
    color: var(--text3);
  }

  /* Clickable row (drilldown) */
  .av-breakdown-row-clickable {
    cursor: pointer;
  }
  .av-breakdown-row-clickable:hover {
    background: var(--surface2);
  }
  .av-breakdown-row-top.av-breakdown-row-clickable:hover {
    background: rgba(0, 217, 126, 0.09);
  }

  /* Empty-state message (when the whole breakdown has zero data) */
  .av-breakdown-empty {
    text-align: center;
    padding: 28px 16px;
    color: var(--text3);
    font-size: 12px;
    line-height: 1.6;
  }

  /* ── Mobile: tighter padding, smaller fonts ───────────────── */
  @media (max-width: 640px) {
    .av-table-card.av-breakdown-card {
      padding: 14px 14px 12px;
    }
    .av-breakdown-row {
      grid-template-columns: 1.4fr 0.7fr 1fr 0.55fr;
      column-gap: 8px;
      padding: 9px 6px;
    }
    .av-breakdown-cell { font-size: 11.5px; }
    .av-breakdown-cell-pnl { font-size: 12px; }
    .av-breakdown-cell-trades,
    .av-breakdown-cell-wr { font-size: 11px; }
    .av-breakdown-head-row .av-breakdown-cell {
      font-size: 9px;
      letter-spacing: 0.5px;
    }
  }

  /* ═══════════════════════════════════════════════════════════════════
     BREAKDOWN CARDS (4-column grid)
     Used by Gap %, Float, Market Cap, Stock Price breakdowns.
     ═══════════════════════════════════════════════════════════════════ */
  .av-gap-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border-radius: 8px;
    overflow: hidden;
  }
  .av-gap-card {
    background: var(--surface);
    padding: 14px 16px;
    transition: background 0.12s ease;
  }
  .av-gap-card-name {
    font-family: var(--title);
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .av-gap-card-pnl {
    font-family: var(--title);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.4px;
    font-variant-numeric: tabular-nums;
  }
  .av-gap-card-pnl.pos { color: var(--green); }
  .av-gap-card-pnl.neg { color: var(--red); }
  .av-gap-card-sub {
    font-family: var(--title);
    font-size: 10px;
    color: var(--text3);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
  }
  .av-gap-card-bar {
    height: 3px;
    background: var(--border2, var(--border));
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
  }
  .av-gap-card-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.25s ease;
  }
  /* TOP bucket card: subtle green tint, no border-clipping issues */
  .av-card-top {
    background: rgba(0, 217, 126, 0.06);
  }
  /* Empty placeholder card */
  .av-gap-card-empty {
    opacity: 0.5;
  }

  /* Mobile: stack to 2 columns */
  @media (max-width: 640px) {
    .av-gap-grid { grid-template-columns: repeat(2, 1fr); }
    .av-gap-card { padding: 12px 12px; }
    .av-gap-card-pnl { font-size: 16px; }
  }

  /* ═══════════════════════════════════════════════════════════════════
     BY SECTOR — INTERACTIVE TREEMAP
     Size = number of trades, color = P&L intensity.
     ═══════════════════════════════════════════════════════════════════ */
  .av-treemap-wrap {
    position: relative;
    width: 100%;
  }
  .av-treemap-wrap canvas {
    display: block;
    width: 100%;
    max-width: 100%;
    border-radius: 6px;
  }
  .av-treemap-empty {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text3);
    font-family: var(--title);
    font-size: 12px;
    text-align: center;
    padding: 24px;
  }
  .av-treemap-tooltip {
    position: absolute;
    display: none;
    pointer-events: none;
    background: var(--surface);
    border: 1px solid var(--border2, var(--border));
    border-radius: 8px;
    padding: 10px 12px;
    font-family: var(--title);
    font-size: 11px;
    color: var(--text);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    min-width: 160px;
    z-index: 20;
    line-height: 1.45;
  }
  .av-treemap-tip-name {
    font-weight: 700;
    font-size: 12.5px;
    color: var(--text);
    margin-bottom: 6px;
    letter-spacing: 0.2px;
  }
  .av-treemap-tip-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 11px;
    padding: 1px 0;
    font-variant-numeric: tabular-nums;
  }
  .av-treemap-tip-row > span:first-child { color: var(--text3); }
  .av-treemap-tip-row > span.pos { color: var(--green); font-weight: 700; }
  .av-treemap-tip-row > span.neg { color: var(--red);   font-weight: 700; }

  /* ═══════════════════════════════════════════════════════════════════
     EDGE FINDER — VIEW TOGGLE (Summary / Detailed)
     Sits above the breakdowns block. Persists to localStorage.
     ═══════════════════════════════════════════════════════════════════ */
  .av-view-toggle-wrap {
    display: flex;
    justify-content: flex-end;
  }
  .av-view-toggle {
    display: inline-flex;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
  }
  .av-view-toggle-btn {
    font-family: var(--title);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--text3);
    background: transparent;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .av-view-toggle-btn:hover {
    color: var(--text);
  }
  .av-view-toggle-btn.is-active {
    background: var(--surface2);
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  }

  /* ═══════════════════════════════════════════════════════════════════
     EDGE FINDER — SUMMARY VIEW ("My Edge" / "My Weakness")
     One row per dimension showing best (winners) or worst (losers) bucket.
     ═══════════════════════════════════════════════════════════════════ */
  .av-edge-summary-card {
    padding: 16px 18px;
  }
  .av-edge-summary-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }
  .av-edge-summary-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--title);
  }
  #avSummaryTitleText {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.3px;
  }
  /* Mode mini-toggle (Winners / Losers) */
  .av-edge-summary-mode {
    display: inline-flex;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 2px;
    gap: 2px;
  }
  .av-edge-summary-mode-btn {
    font-family: var(--title);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--text3);
    background: transparent;
    border: none;
    padding: 5px 11px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .av-edge-summary-mode-btn:hover {
    color: var(--text);
  }
  .av-edge-summary-mode-btn[data-mode="winners"].is-active {
    background: rgba(0, 217, 126, 0.12);
    color: var(--green);
  }
  .av-edge-summary-mode-btn[data-mode="losers"].is-active {
    background: rgba(255, 71, 87, 0.12);
    color: var(--red);
  }

  /* Summary table body */
  .av-edge-summary {
    display: flex;
    flex-direction: column;
  }
  .av-edge-summary-row {
    display: grid;
    grid-template-columns: 1fr 1.1fr 0.7fr 1fr;
    column-gap: 14px;
    align-items: center;
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
    transition: background 0.12s ease;
    position: relative;
  }
  .av-edge-summary-row:last-child {
    border-bottom: none;
  }
  /* Subtle hover interaction for affordance (no click action yet) */
  .av-edge-summary-row:hover {
    background: var(--surface2);
  }
  .av-edge-summary-row-empty {
    opacity: 0.45;
  }
  .av-edge-summary-dim {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  .av-edge-summary-dim-label {
    font-family: var(--title);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text3);
  }
  .av-edge-summary-dim-sub {
    font-family: var(--title);
    font-size: 9.5px;
    font-weight: 500;
    color: var(--text3);
    opacity: 0.75;
    letter-spacing: 0.3px;
    text-transform: lowercase;
  }
  .av-edge-summary-bucket {
    font-family: var(--title);
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.2px;
  }
  .av-edge-summary-pnl {
    font-family: var(--title);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
  }
  .av-edge-summary-pnl.pos { color: var(--green); }
  .av-edge-summary-pnl.neg { color: var(--red); }
  .av-edge-summary-meta {
    font-family: var(--title);
    font-size: 11px;
    color: var(--text2);
    font-variant-numeric: tabular-nums;
    text-align: right;
  }
  .av-edge-summary-bar {
    grid-column: 1 / -1;
    height: 2px;
    background: var(--border);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
  }
  .av-edge-summary-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
  }

  /* Mobile layout */
  @media (max-width: 640px) {
    .av-edge-summary-row {
      grid-template-columns: 1fr 1fr;
      row-gap: 4px;
      padding: 10px 6px;
    }
    .av-edge-summary-bucket { grid-column: 2; text-align: right; }
    .av-edge-summary-pnl    { grid-column: 1; text-align: left; }
    .av-edge-summary-meta   { grid-column: 2; }
  }

/* ── Long / Short Analysis cards ──────────────────────────────────── */
#avLongShortSection {
  grid-template-columns: 1fr 1fr;
}
.av-ls-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
.av-ls-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.av-ls-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 4px;
}
.av-ls-badge--long  { background: rgba(0,200,100,0.15); color: var(--green); }
.av-ls-badge--short { background: rgba(220,60,60,0.15);  color: var(--red);   }
.av-ls-pnl {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.av-ls-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 4px;
}
.av-ls-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.av-ls-metric-label {
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.av-ls-metric-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text1);
}
.av-ls-chart-wrap {
  position: relative;
  height: 110px;
  margin-top: 4px;
}
.av-ls-chart-wrap canvas {
  display: block;
  width: 100%;
  height: 110px;
}
.av-ls-chart-empty {
  display: none;
  align-items: center;
  justify-content: center;
  height: 110px;
  font-size: 12px;
  color: var(--text3);
}
@media (max-width: 768px) {
  #avLongShortSection {
    grid-template-columns: 1fr;
  }
}

/* ── Net / Gross toggle ────────────────────────────────────────────── */
  .av-ng-toggle {
    display: flex;
    align-items: center;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
  }
  .av-ng-btn {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--text3);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    line-height: 1.6;
  }
  .av-ng-btn.active {
    background: var(--surface3);
    color: var(--text1);
  }
  .av-ng-btn:hover:not(.active) {
    color: var(--text2);
  }

/* ── Calendar Net / Gross toggle ───────────────────────────────────── */
  .cal-ng-toggle {
    margin-left: 4px;
  }

/* ══════════════════════════════════════════════════════════════════
   Trade Replay — Fullscreen mode (Bloque scan_gaps v4, redesign 2)
   ══════════════════════════════════════════════════════════════════
   Premium "Bloomberg-style" layout:

   ┌──────────────────────────────────────────────────────────────┐
   │  TOPBAR 44px: SYM · DATE · stats · EQUITY · [⛶]              │
   │  TF BAR 36px: 1m 2m 5m 15m 30m 1h                            │
   ├──────────────────────────────────────────────────────────────┤
   │                                                              │
   │              CHART (100% width, protagonist)                 │
   │                                                              │
   │                                                              │
   │                                              ┌─────────────┐ │
   │                                              │ HOTKEYS    ⌨│ │
   │                                              │ B  Buy      │ │
   │                                              │ S  Sell     │ │
   │                                              │ 0-5 Risk    │ │
   │                                              │ ↕  Drag SL/T│ │
   │                                              │ Esc Exit    │ │
   │                                              └─────────────┘ │
   ├──────────────────────────────────────────────────────────────┤
   │  BOTTOM 56px: play · speed · time · campaign actions          │
   │  SLIDER 24px                                                  │
   │  SKIP ROW 36px (Pre-Open · Loop)                              │
   ├──────────────────────────────────────────────────────────────┤
   │  ▲ Active trades (N)   ← collapsed by default, click expands  │
   └──────────────────────────────────────────────────────────────┘

   No right sidebar. Trades are created via hotkeys (B/S) which
   use the user's current risk% + default ±10% stop/target.
   ══════════════════════════════════════════════════════════════════ */

/* CSS custom props for fullscreen sizing — easy to tweak in one place */
body.tr-fullscreen-mode {
  --trfs-topbar-h:      44px;
  --trfs-tfbar-h:       36px;
  --trfs-bottombar-h:   56px;
  --trfs-slider-h:      24px;
  --trfs-pad:           12px;
  --trfs-border:        rgba(255, 255, 255, 0.06);
  --trfs-bg-deep:       #07090f;
  --trfs-bg-panel:      #0e1219;
  --trfs-bg-hover:      rgba(255, 255, 255, 0.04);
  --trfs-strip-h:       36px;   /* collapsed strip height */
  --trfs-strip-h-open:  180px;  /* expanded strip height */
}

/* Lock the viewport */
body.tr-fullscreen-mode,
html:has(body.tr-fullscreen-mode) {
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}

/* Hide app chrome */
body.tr-fullscreen-mode .sidebar,
body.tr-fullscreen-mode .sidebar-overlay,
body.tr-fullscreen-mode header,
body.tr-fullscreen-mode .app-header,
body.tr-fullscreen-mode .sidebar-bottom-actions {
  display: none !important;
}

/* Kill the 1400px max-width on .app and all panel ancestors */
body.tr-fullscreen-mode .app,
body.tr-fullscreen-mode #appRoot {
  max-width: none !important;
  width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}

/* The Trade Replay panel itself: fixed to the viewport, full screen.
   Bloque FS-fix v2: banner and strip are now children of #panelReplay
   (position: absolute), so the panel occupies the full viewport with
   inset: 0. The strip overlays the chart's bottom area gracefully — that's
   intentional (trades > chart in that moment). Position: relative would
   conflict with position: fixed; we rely on the fact that a
   positioned ancestor (fixed counts) is the containing block for
   absolutely-positioned children. */
body.tr-fullscreen-mode #panelReplay {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 9999;
  background: var(--trfs-bg-deep);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Hide the outer Trade Replay header (title/tabs) and Symbol/Date bar */
body.tr-fullscreen-mode .tr-header,
body.tr-fullscreen-mode .tr-setup {
  display: none !important;
}

/* Hide session log — uncluttered chart focus */
body.tr-fullscreen-mode .tr-session-log {
  display: none !important;
}

/* The shell is a flex column inside the panel. Bloque FS-fix v2: the
   strip and banner are now ABSOLUTE children of the panel, overlaying the
   shell. We reserve padding-bottom = strip height so the chart bottom
   controls (TF buttons, slider, skip row) are NOT covered by the strip
   when collapsed. When the strip expands it overlays the chart — that's
   the intentional UX choice (trades > chart in that moment). */
body.tr-fullscreen-mode .tr-shell {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 0 var(--trfs-strip-h, 36px) 0 !important;
  margin: 0 !important;
  overflow: hidden;
  background: var(--trfs-bg-deep);
  box-sizing: border-box;
}

/* Bloque FS-fix v4: #trContent is the section that wraps the chart shell.
   It had no fullscreen styles → defaulted to intrinsic content height
   (~773px), squashing everything below the chart into a small slice.
   Force it to stretch via flex so the chart-section can use the full
   viewport height. */
body.tr-fullscreen-mode .tr-content,
body.tr-fullscreen-mode #trContent {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Chart section fills the full width and stretches via flex. We removed
   `height: 100% !important` (Bloque FS-fix v4) — it was being interpreted
   as "100% of intrinsic content height" because the parent (#trContent)
   wasn't flexing, blocking grow. With #trContent now flexing properly,
   `flex: 1 1 auto` alone does the right thing here. */
body.tr-fullscreen-mode .tr-chart-section {
  flex: 1 1 auto;
  width: 100% !important;
  max-width: 100% !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── TOP BAR ───────────────────────────────────────────────────── */
body.tr-fullscreen-mode .tr-chart-header {
  flex: 0 0 auto;
  height: var(--trfs-topbar-h);
  display: flex !important;
  align-items: center;
  gap: 18px;
  padding: 0 16px !important;
  border-bottom: 1px solid var(--trfs-border);
  background: var(--trfs-bg-panel);
  overflow: hidden;
}

body.tr-fullscreen-mode .tr-chart-info {
  display: flex !important;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

body.tr-fullscreen-mode .tr-chart-symbol {
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: 0.3px;
}

body.tr-fullscreen-mode .tr-chart-date {
  font-size: 12px !important;
  opacity: 0.75;
  font-weight: 500;
}

body.tr-fullscreen-mode .tr-chart-meta {
  display: none !important;
}

body.tr-fullscreen-mode .tr-tz-toggle,
body.tr-fullscreen-mode .tr-fullscreen-toggle {
  height: 26px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  border-radius: 5px !important;
}

body.tr-fullscreen-mode .tr-chart-stats {
  display: flex !important;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  flex: 0 0 auto;
}

body.tr-fullscreen-mode .tr-chart-stats .tr-stat {
  font-size: 11px !important;
  display: inline-flex !important;
  align-items: baseline;
  gap: 6px;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

body.tr-fullscreen-mode .tr-chart-stats .tr-stat-label {
  font-size: 10px !important;
  opacity: 0.55;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

body.tr-fullscreen-mode .tr-chart-stats .tr-stat-value {
  font-size: 12px !important;
  font-weight: 700;
}

body.tr-fullscreen-mode .tr-stat-account .tr-account-input {
  width: 72px;
  font-size: 11px !important;
  padding: 3px 6px !important;
}

body.tr-fullscreen-mode .tr-stat-equity {
  background: rgba(14, 221, 138, 0.08) !important;
  border: 1px solid rgba(14, 221, 138, 0.18) !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1px !important;
  line-height: 1.15 !important;
  margin-right: 8px;
}

body.tr-fullscreen-mode .tr-stat-equity .tr-stat-label {
  font-size: 9px !important;
  margin: 0 !important;
}

body.tr-fullscreen-mode .tr-stat-equity .tr-stat-value {
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

body.tr-fullscreen-mode .tr-stat-equity .tr-stat-delta {
  font-size: 10px !important;
  opacity: 0.85;
  white-space: nowrap !important;
}

/* Ensure chart-stats container doesn't crowd the equity badge */
body.tr-fullscreen-mode .tr-chart-stats {
  padding-right: 4px;
  min-width: 0;
}

/* ── TF SELECTOR ───────────────────────────────────────────────── */
body.tr-fullscreen-mode .tr-chart-toolbar {
  flex: 0 0 auto;
  height: var(--trfs-tfbar-h);
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 0 16px !important;
  border-bottom: 1px solid var(--trfs-border);
  background: var(--trfs-bg-panel);
}

body.tr-fullscreen-mode .tr-tf-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

body.tr-fullscreen-mode .tr-tf-btn {
  height: 24px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  border-radius: 4px !important;
}

body.tr-fullscreen-mode .tr-overlay-legend {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.7;
}

/* ── CHART BODY: chart fills entirely (no trade panel here) ────── */
body.tr-fullscreen-mode .tr-chart-body {
  flex: 1 1 auto;
  width: 100% !important;
  max-width: 100% !important;
  flex-direction: row !important;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--trfs-bg-deep);
}

body.tr-fullscreen-mode .tr-chart-container {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide the in-flow trade panel — we use hotkeys in fullscreen */
body.tr-fullscreen-mode .tr-trade-panel {
  display: none !important;
}

/* ── BOTTOM CONTROLS ───────────────────────────────────────────── */
body.tr-fullscreen-mode .tr-replay-controls {
  flex: 0 0 auto;
  width: 100% !important;
  max-width: 100% !important;
  background: var(--trfs-bg-panel);
  border-top: 1px solid var(--trfs-border);
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}

body.tr-fullscreen-mode .tr-replay-row {
  height: var(--trfs-bottombar-h);
  display: flex !important;
  align-items: center;
  gap: 16px;
  padding: 0 16px !important;
}

body.tr-fullscreen-mode .tr-replay-buttons {
  display: flex;
  gap: 4px;
}

body.tr-fullscreen-mode .tr-replay-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  padding: 0 !important;
}

body.tr-fullscreen-mode .tr-replay-play {
  width: 38px !important;
  height: 38px !important;
}

body.tr-fullscreen-mode .tr-replay-speed {
  display: flex;
  gap: 3px;
}

body.tr-fullscreen-mode .tr-speed-btn {
  height: 26px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  border-radius: 4px !important;
}

body.tr-fullscreen-mode .tr-replay-time {
  font-size: 13px !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
  opacity: 0.9;
  margin-left: 12px;
}

body.tr-fullscreen-mode .tr-replay-campaign-slot {
  margin-left: auto !important;
  display: flex !important;
  gap: 6px;
  align-items: center;
}

body.tr-fullscreen-mode .tr-replay-campaign-slot .tr-cb-btn {
  height: 30px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  border-radius: 5px !important;
}

/* Bloque honest-replay v2: Next button disabled state — applied via the
   .tr-cb-btn-disabled class AND the native [disabled] attribute, so this
   works whether the user reaches it via click or via assistive tech.
   Scoped to .tr-cb-btn so it inherits the existing button look but
   muted. Works in both fullscreen and normal mode. */
.tr-cb-btn[disabled],
.tr-cb-btn-disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

body.tr-fullscreen-mode .tr-replay-slider {
  height: var(--trfs-slider-h);
  margin: 0 16px 6px 16px !important;
  width: calc(100% - 32px);
}

body.tr-fullscreen-mode .tr-skip-row {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 8px 16px !important;
}

body.tr-fullscreen-mode .tr-skip-btn,
body.tr-fullscreen-mode .tr-loop-btn {
  height: 26px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  border-radius: 5px !important;
}

body.tr-fullscreen-mode .tr-loop-btn {
  margin-left: auto;
}

/* Subtle hint on the toggle that fullscreen is active */
body.tr-fullscreen-mode #trFullscreenToggle {
  background: rgba(14, 221, 138, 0.12) !important;
  border-color: rgba(14, 221, 138, 0.35) !important;
  color: var(--green, #0edd8a) !important;
}

/* ══════════════════════════════════════════════════════════════════
   HOTKEY BANNER — floating bottom-right cheat-sheet, always visible
   ══════════════════════════════════════════════════════════════════ */
.tr-fs-hotkey-banner {
  /* Bloque FS-fix v2: was position:fixed at body level. Now child of
     #panelReplay → use position:absolute relative to the panel. The panel
     occupies the full viewport (inset:0), so visually it's equivalent —
     but now it's immune to ancestor stacking-context bugs. */
  position: absolute;
  /* Sits above the strip + bottom controls (bottombar + slider + skip row).
     Strip is at bottom:0 of the panel. */
  bottom: calc(var(--trfs-strip-h, 36px) + var(--trfs-bottombar-h, 56px) + var(--trfs-slider-h, 24px) + 36px + 16px);
  right: 16px;
  width: 240px;
  background: rgba(14, 18, 25, 0.92);
  border: 1px solid var(--trfs-border, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 12px 14px;
  z-index: 10001;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  pointer-events: none;  /* don't intercept chart clicks */
  user-select: none;
  /* Bloque scan_gaps v4: fade-in for confirmation that mount succeeded */
  animation: trFsBannerFadeIn 0.24s ease-out;
}

@keyframes trFsBannerFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tr-fs-hotkey-banner .tr-fs-hk-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  opacity: 0.5;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.tr-fs-hotkey-banner .tr-fs-hk-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tr-fs-hotkey-banner .tr-fs-hk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
}

.tr-fs-hotkey-banner .tr-fs-hk-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  font-weight: 700;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.9);
}

.tr-fs-hotkey-banner .tr-fs-hk-key-buy {
  background: rgba(14, 221, 138, 0.15);
  border-color: rgba(14, 221, 138, 0.3);
  color: var(--green, #0edd8a);
}

.tr-fs-hotkey-banner .tr-fs-hk-key-sell {
  background: rgba(240, 82, 82, 0.15);
  border-color: rgba(240, 82, 82, 0.3);
  color: var(--red, #f05252);
}

.tr-fs-hotkey-banner .tr-fs-hk-key-drag {
  background: rgba(74, 158, 255, 0.15);
  border-color: rgba(74, 158, 255, 0.3);
  color: var(--blue, #4a9eff);
}

.tr-fs-hotkey-banner .tr-fs-hk-keys {
  display: inline-flex;
  gap: 2px;
}

.tr-fs-hotkey-banner .tr-fs-hk-lbl {
  font-family: var(--title, 'Inter', sans-serif);
  font-size: 11px;
  opacity: 0.7;
  font-weight: 500;
}

/* Bloque scan_gaps v4 (banner interactivity): flash animation triggered
   when the matching hotkey is pressed. Briefly brightens the key with
   a soft white glow + scale-up. Auto-removes after the animation ends. */
.tr-fs-hotkey-banner .tr-fs-hk-key.tr-fs-hk-key-flash {
  animation: trFsKeyFlash 0.28s ease-out;
}

@keyframes trFsKeyFlash {
  0% {
    transform: scale(1);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
  35% {
    transform: scale(1.18);
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.35);
    color: #fff;
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

/* Flash variants that preserve the colored tint for the special keys */
.tr-fs-hotkey-banner .tr-fs-hk-key-buy.tr-fs-hk-key-flash {
  animation: trFsKeyFlashBuy 0.28s ease-out;
}
@keyframes trFsKeyFlashBuy {
  0%   { transform: scale(1); }
  35%  {
    transform: scale(1.18);
    background: rgba(14, 221, 138, 0.55);
    box-shadow: 0 0 14px 2px rgba(14, 221, 138, 0.55);
    color: #fff;
  }
  100% { transform: scale(1); }
}

.tr-fs-hotkey-banner .tr-fs-hk-key-sell.tr-fs-hk-key-flash {
  animation: trFsKeyFlashSell 0.28s ease-out;
}
@keyframes trFsKeyFlashSell {
  0%   { transform: scale(1); }
  35%  {
    transform: scale(1.18);
    background: rgba(240, 82, 82, 0.55);
    box-shadow: 0 0 14px 2px rgba(240, 82, 82, 0.55);
    color: #fff;
  }
  100% { transform: scale(1); }
}

.tr-fs-hotkey-banner .tr-fs-hk-key-limit.tr-fs-hk-key-flash {
  animation: trFsKeyFlashLimit 0.28s ease-out;
}
@keyframes trFsKeyFlashLimit {
  0%   { transform: scale(1); }
  35%  {
    transform: scale(1.18);
    background: rgba(34, 211, 238, 0.55);
    box-shadow: 0 0 14px 2px rgba(34, 211, 238, 0.55);
    color: #fff;
  }
  100% { transform: scale(1); }
}

/* ══════════════════════════════════════════════════════════════════
   ACTIVE TRADES STRIP — collapsed by default at the bottom
   ══════════════════════════════════════════════════════════════════ */
.tr-fs-active-strip {
  /* Bloque FS-fix v2: was position:fixed at body level. Now child of
     #panelReplay → position:absolute relative to the panel. */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--trfs-strip-h, 36px);
  background: var(--trfs-bg-panel, #0e1219);
  border-top: 1px solid var(--trfs-border, rgba(255,255,255,0.08));
  z-index: 10000;
  transition: height 0.18s ease;
  overflow: hidden;
}

.tr-fs-active-strip.tr-fs-active-strip-expanded {
  height: var(--trfs-strip-h-open, 180px);
}

.tr-fs-active-strip .tr-fs-as-header {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--trfs-strip-h, 36px);
  padding: 0 16px;
  cursor: pointer;
  font-family: var(--title, 'Inter', sans-serif);
  user-select: none;
}

.tr-fs-active-strip .tr-fs-as-header:hover {
  background: var(--trfs-bg-hover, rgba(255,255,255,0.04));
}

.tr-fs-active-strip .tr-fs-as-toggle {
  font-size: 10px;
  opacity: 0.5;
  transition: transform 0.18s ease;
}

.tr-fs-active-strip.tr-fs-active-strip-expanded .tr-fs-as-toggle {
  transform: rotate(180deg);
}

.tr-fs-active-strip .tr-fs-as-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.7;
}

.tr-fs-active-strip .tr-fs-as-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  opacity: 0.7;
}

.tr-fs-active-strip .tr-fs-as-count.has-trades {
  background: rgba(14, 221, 138, 0.15);
  color: var(--green, #0edd8a);
  opacity: 1;
}

.tr-fs-active-strip .tr-fs-as-list {
  padding: 4px 16px 12px 16px;
  max-height: calc(var(--trfs-strip-h-open, 180px) - var(--trfs-strip-h, 36px));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tr-fs-active-strip .tr-fs-as-trade {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--trfs-border, rgba(255,255,255,0.06));
  border-radius: 6px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
}

.tr-fs-active-strip .tr-fs-as-side {
  font-weight: 700;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}

.tr-fs-active-strip .tr-fs-as-side-long {
  background: rgba(14, 221, 138, 0.15);
  color: var(--green, #0edd8a);
}

.tr-fs-active-strip .tr-fs-as-side-short {
  background: rgba(240, 82, 82, 0.15);
  color: var(--red, #f05252);
}

.tr-fs-active-strip .tr-fs-as-qty {
  font-weight: 600;
  min-width: 140px;
}

.tr-fs-active-strip .tr-fs-as-stop {
  color: var(--red, #f05252);
  opacity: 0.8;
}

.tr-fs-active-strip .tr-fs-as-target {
  color: var(--green, #0edd8a);
  opacity: 0.8;
}

.tr-fs-active-strip .tr-fs-as-pnl {
  margin-left: auto;
  font-weight: 700;
  font-size: 12px;
  min-width: 80px;
  text-align: right;
}

.tr-fs-active-strip .tr-fs-as-pnl.pos { color: var(--green, #0edd8a); }
.tr-fs-active-strip .tr-fs-as-pnl.neg { color: var(--red, #f05252); }
.tr-fs-active-strip .tr-fs-as-pnl.flat { opacity: 0.6; }

.tr-fs-active-strip .tr-fs-as-close-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  font-family: var(--title, 'Inter', sans-serif);
}

.tr-fs-active-strip .tr-fs-as-close-btn:hover {
  background: rgba(240, 82, 82, 0.15);
  border-color: rgba(240, 82, 82, 0.3);
  color: var(--red, #f05252);
}

.tr-fs-active-strip .tr-fs-as-pending {
  margin-left: auto;
  opacity: 0.5;
  font-size: 10px;
  font-style: italic;
}

/* ── Trade Replay: hide Symbol/Date setup bar during campaigns ─────
   The symbol & date are pre-determined by the campaign queue, so the
   setup bar is just noise during practice. _trRenderCampaignBanner()
   toggles this class on .tr-setup when an active campaign is loaded
   and removes it when the campaign ends/exits. */
.tr-setup.tr-setup-campaign-mode {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════════════
   LIMIT ORDER DRAG MODE (Bloque scan_gaps v4)
   ══════════════════════════════════════════════════════════════════
   Activated when the user presses L (long limit) or K (short limit) in
   fullscreen. A draggable cyan price line appears + a floating chip with
   instructions. Enter confirms, Esc cancels. */

/* The cyan-tinted L/K keys in the hotkeys banner */
.tr-fs-hotkey-banner .tr-fs-hk-key-limit {
  background: rgba(34, 211, 238, 0.15);
  border-color: rgba(34, 211, 238, 0.3);
  color: #22d3ee;
}

/* Hit zone for the limit line (transparent overlay band on the chart) */
.tr-limit-hitzone {
  /* All positioning done inline via JS (top + height). Just the look here. */
}

/* The floating chip showing proposed price + Enter/Esc instructions */
.tr-limit-chip {
  background: rgba(14, 18, 25, 0.95);
  border: 1px solid rgba(34, 211, 238, 0.4);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  min-width: 220px;
  pointer-events: none;  /* don't intercept drag */
  user-select: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(34, 211, 238, 0.1);
  animation: trLimitChipFadeIn 0.18s ease-out;
}

@keyframes trLimitChipFadeIn {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}

.tr-limit-chip-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.tr-limit-chip-side {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #22d3ee;
  opacity: 0.85;
}

.tr-limit-chip-price {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.tr-limit-chip-hint {
  font-size: 10px;
  opacity: 0.65;
  font-family: var(--title, 'Inter', sans-serif);
}

.tr-limit-chip-key {
  display: inline-block;
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  font-weight: 700;
  margin: 0 2px;
}


/* ══════════════════════════════════════════════════════════════════
   Trade Replay — BETA badge + disclaimer (Bloque scan_gaps v4)
   ══════════════════════════════════════════════════════════════════
   Visible in the Trade Replay header so users know the feature is
   still being developed and bugs are expected. */

.tr-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tr-beta-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.08));
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  border-radius: 4px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  cursor: help;
  user-select: none;
  position: relative;
  top: -1px;
}

.tr-beta-disclaimer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(245, 158, 11, 0.05);
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-radius: 6px;
  color: rgba(251, 191, 36, 0.85);
  font-family: var(--title, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  max-width: 640px;
}

/* Hide the disclaimer in fullscreen (header is hidden anyway, but defensive) */
body.tr-fullscreen-mode .tr-beta-disclaimer,
body.tr-fullscreen-mode .tr-beta-badge {
  display: none !important;
}

/* ══ TICKER SEARCH IN CALENDAR ═══════════════════════════════════ */
.cal-ticker-search {
  position: relative;
  display: flex;
  align-items: center;
}

.cal-ticker-input {
  height: 30px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface2);
  color: var(--text);
  font-family: var(--title);
  font-size: 12px;
  font-weight: 600;
  width: 140px;
  outline: none;
  transition: border-color 0.15s, width 0.2s;
  text-transform: uppercase;
}

.cal-ticker-input:focus {
  border-color: var(--blue);
  width: 180px;
}

.cal-ticker-input::placeholder {
  color: var(--text3);
  text-transform: none;
  font-weight: 400;
}

.cal-ticker-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  line-height: 1;
  transition: color 0.15s;
}

.cal-ticker-clear:hover { color: var(--text2); }

/* Results panel */
.cal-ticker-results {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 20px;
  overflow: hidden;
}

.cal-ticker-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}

.cal-ticker-sym {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.8px;
}

.cal-ticker-meta {
  font-family: var(--title);
  font-size: 11px;
  color: var(--text3);
}

.cal-ticker-meta .pos { color: var(--green); font-weight: 600; }
.cal-ticker-meta .neg { color: var(--red); font-weight: 600; }

.cal-ticker-rows {
  display: flex;
  flex-direction: column;
}

.cal-ticker-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
  width: 100%;
  box-sizing: border-box;
}

.cal-ticker-row:last-child { border-bottom: none; }
.cal-ticker-row:hover { background: rgba(255,255,255,0.02); }

.cal-ticker-row-main {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 16px;
  flex: 1;
  cursor: pointer;
  min-width: 0;
}

.cal-ticker-row-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
  min-width: 52px;
  letter-spacing: 0.3px;
}

.cal-ticker-row-pnl {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  min-width: 76px;
}

.cal-ticker-row-pnl.pos { color: var(--green); }
.cal-ticker-row-pnl.neg { color: var(--red); }

.cal-ticker-row-trades {
  font-family: var(--title);
  font-size: 11px;
  color: var(--text3);
  flex: 1;
}

.cal-ticker-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px 0 0;
  opacity: 0;
  transition: opacity 0.15s;
}

.cal-ticker-row:hover .cal-ticker-row-actions { opacity: 1; }

.cal-ticker-action-btn {
  height: 26px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  font-family: var(--title);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: all 0.13s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.cal-ticker-action-btn:hover {
  border-color: var(--border2);
  color: var(--text);
  background: var(--surface3);
}

.cal-ticker-action-btn.replay {
  border-color: rgba(74,158,255,0.3);
  color: var(--blue);
  background: rgba(74,158,255,0.06);
}

.cal-ticker-action-btn.replay:hover {
  border-color: var(--blue);
  background: rgba(74,158,255,0.12);
}

.cal-ticker-empty {
  padding: 14px 16px;
  font-family: var(--title);
  font-size: 12px;
  color: var(--text3);
  text-align: center;
}

.cal-ticker-empty strong { color: var(--text2); }