*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --brand:    #818cf8;
      --brand2:   #34d399;
      --gold:     #fbbf24;
      --red:      #f87171;
      --bg:       #0a0a12;
      --sidebar:  #0f0f1a;
      --surface:  #141420;
      --surface2: #1a1a2e;
      --border:   rgba(255,255,255,0.07);
      --text:     #e2e8f0;
      --muted:    #64748b;
      --user-bg:  #1e1e35;
      --ai-bg:    transparent;
      /* brand derived — recomputed by applyColorTheme() */
      --brand-dk:  #6366f1;
      --brand2-dk: #059669;
      --brand-lt:  #a5b4fc;
      /* brand alpha variants — recomputed by applyColorTheme() */
      --b1-05: rgba(129,140,248,0.05);
      --b1-06: var(--b1-06);
      --b1-07: var(--b1-07);
      --b1-08: var(--b1-08);
      --b1-10: var(--b1-10);
      --b1-12: var(--b1-12);
      --b1-15: var(--b1-15);
      --b1-16: var(--b1-16);
      --b1-18: var(--b1-18);
      --b1-20: var(--b1-20);
      --b1-25: var(--b1-25);
      --b1-28: var(--b1-28);
      --b1-30: var(--b1-30);
      --b1-35: var(--b1-35);
      --b1-40: var(--b1-40);
      --b1-45: var(--b1-45);
      --b1-50: var(--b1-50);
      --b1-55: var(--b1-55);
      --b1-60: var(--b1-60);
      --b1-70: var(--b1-70);
      --b2-05: var(--b2-05);
      --b2-06: var(--b2-06);
      --b2-08: var(--b2-08);
      --b2-15: var(--b2-15);
      --b2-20: var(--b2-20);
      --b2-22: var(--b2-22);
      --b2-25: var(--b2-25);
      --b2-30: var(--b2-30);
      --b2-40: var(--b2-40);
      --b2-55: var(--b2-55);
      --b2-60: var(--b2-60);
    }

    body.light {
      /* --brand and --brand2 intentionally omitted — color theme inline style takes precedence */
      --red:      #dc2626;
      --bg:       #f8fafc;
      --sidebar:  #f1f5f9;
      --surface:  #ffffff;
      --surface2: #f1f5f9;
      --border:   rgba(0,0,0,0.08);
      --text:     #0f172a;
      --muted:    #64748b;
      --user-bg:  #eef2ff;
      --ai-bg:    transparent;
      /* --gold (#fbbf24) and --brand-lt (a pale tint meant for glowing text on a near-black
         background) both have very poor contrast against this theme's white/near-white
         surfaces — every hardcoded gold text color in the file was converted to var(--gold)
         specifically so this one override fixes all of them (nutrition macros, notifications,
         Auto Pilot "coming soon" badges, TriToken badge, etc.) instead of needing a body.light
         rule per selector. --brand-lt reuses the already-computed --brand-dk (a real darkened
         shade of the user's chosen brand color, computed in theme.js's applyColorTheme()) —
         this is what fixes the sidebar's "Recent" count badge and every other var(--brand-lt)
         text color (Auto Pilot config values, Finish Line Alert pills, dashboard workout tags,
         etc.), not just the one the user pointed out. */
      --gold:     #92400e;
      --brand-lt: var(--brand-dk);
      /* --brand2 (default #34d399, a light green) has the exact same problem as --gold/
         --brand-lt above — fine as glowing text on near-black, unreadable on white. It's used
         directly as text color across ~20 places including the Friends and Athletes/Coach
         panels (.friend-card, .fr-status-friends, .coach-athlete-badge, .coach-total-val), the
         AI message name, and various stat labels. Redirecting the whole variable to the
         already-computed --brand2-dk (theme.js's applyColorTheme(), same pattern as --brand-lt
         above) fixes all of them in one place instead of chasing each selector individually. A
         couple of decorative gradients that go FROM --brand2 TO --brand2-dk (e.g. line ~2342)
         become a flat single color in light mode as a side effect — a minor cosmetic
         simplification, not a bug. */
      --brand2:   var(--brand2-dk);
    }

    /* ── LIGHT-MODE TEXT CONTRAST FIXES ──
       These selectors' base (dark-theme) colors are near-white or pale — fine as glowing text
       on the near-black default background, unreadable on this theme's white/near-white
       surfaces. Grouped here rather than split across each component's own section so every
       light-mode contrast fix stays in one place. */
    body.light .nutri-title, body.light .nutri-meal-label { color: #0f172a; }
    body.light .nutri-food-name { color: #1e293b; }
    body.light .nutri-meal-cal { background: linear-gradient(135deg, #0f172a 30%, var(--gold) 100%); -webkit-background-clip: text; background-clip: text; }
    body.light .nutri-food-macros .nfm-p, body.light .nutri-meal-macros .nfm-p { color: #4f46e5; }
    body.light .nutri-food-macros .nfm-f, body.light .nutri-meal-macros .nfm-f { color: #db2777; }
    body.light .tv-cat-val { color: #0f172a; }
    body.light .tv-balance-num, body.light .tv-hist-plus, body.light .tv-bundle-tokens, body.light .tv-merch-btn { color: #92400e; }
    body.light .tv-balance-lbl { color: #a16207; }

    body.light .logo {
      background: linear-gradient(135deg, #4f46e5, #0f172a);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    body.light .logo span { -webkit-text-fill-color: var(--brand2); }
    body.light .qa-label {
      background: linear-gradient(135deg, #0f172a, #4f46e5 130%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    body.light .empty-heading {
      background: linear-gradient(135deg, #0f172a 0%, #4f46e5 60%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    body.light .msg-content strong { color: #0f172a; }
    body.light #userInput::placeholder { color: #94a3b8; }
    body.light .disclaimer { color: #94a3b8; }
    body.light #charCount { color: #94a3b8; }
    body.light .msg-content code { color: var(--brand2); background: rgba(0,0,0,0.06); }
    body.light .msg-content pre { background: #f1f5f9; border-color: var(--border); }
    body.light .chat-area::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); }
    body.light .chat-list::-webkit-scrollbar-thumb  { background: rgba(0,0,0,0.1); }
    body.light .msg-content h1 { background: linear-gradient(135deg,#0f172a,#4f46e5); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
    body.light .msg-content h2 { color: #0f172a; background: linear-gradient(90deg,rgba(99,102,241,0.1),transparent); border-color: #6366f1; }
    body.light .msg-content h3 { color: var(--brand2); }
    body.light .msg-content ol > li { background: linear-gradient(135deg,rgba(99,102,241,0.07),rgba(5,150,105,0.03)); border-color: rgba(99,102,241,0.2); }
    body.light .msg-content ul > li:hover { background: rgba(0,0,0,0.03); }

    /* ── LOGIN MODAL ── */
    .login-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(4px);
      z-index: 200;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none;
      transition: opacity 0.2s;
    }
    .login-overlay.open { opacity: 1; pointer-events: all; }
    .login-box {
      background: var(--surface);
      border: 1px solid var(--b1-25);
      border-radius: 18px;
      padding: 36px 32px 28px;
      width: 100%; max-width: 400px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.5);
      position: relative;
      transform: translateY(12px);
      transition: transform 0.2s;
    }
    .login-overlay.open .login-box { transform: translateY(0); }
    .login-box-close {
      position: absolute; top: 14px; right: 16px;
      background: none; border: none; color: var(--muted);
      font-size: 22px; cursor: pointer; line-height: 1;
      transition: color 0.12s;
    }
    .login-box-close:hover { color: var(--text); }
    .login-box-logo { font-size: 38px; text-align: center; margin-bottom: 12px; }
    .login-box h2 {
      text-align: center; font-size: 20px; font-weight: 800;
      letter-spacing: -0.4px; color: var(--text); margin-bottom: 4px;
    }
    .login-box-sub { text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 24px; }
    .login-error {
      background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3);
      border-radius: 8px; padding: 10px 14px; color: var(--red);
      font-size: 13px; margin-bottom: 16px; display: none;
    }
    .login-field { margin-bottom: 14px; }
    .login-field label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; letter-spacing: 0.5px; text-transform: uppercase; }
    .login-field input {
      width: 100%; background: var(--surface2); border: 1px solid var(--border);
      border-radius: 9px; padding: 10px 14px; color: var(--text);
      font-size: 14px; font-family: inherit; outline: none;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .login-field input:focus {
      border-color: var(--b1-50);
      box-shadow: 0 0 0 3px var(--b1-10);
    }
    .login-field input::placeholder { color: var(--muted); }
    .login-submit {
      width: 100%; padding: 11px; border-radius: 10px; border: none;
      background: linear-gradient(135deg, var(--brand), var(--brand-dk));
      color: white; font-size: 15px; font-weight: 700;
      cursor: pointer; margin-top: 6px;
      transition: opacity 0.15s, transform 0.12s, box-shadow 0.15s;
      box-shadow: 0 0 24px var(--b1-30);
    }
    .login-submit:hover:not(:disabled) { transform: scale(1.01); box-shadow: 0 0 32px var(--b1-45); }
    .login-submit:disabled { opacity: 0.5; cursor: not-allowed; }
    .login-forgot { display: block; text-align: center; margin-top: 14px; font-size: 13px; color: var(--muted); text-decoration: none; transition: color 0.12s; }
    .login-forgot:hover { color: var(--brand); }

    /* ── LOGIN BUTTON (guest state) ── */
    .btn-login {
      display: flex; align-items: center; gap: 7px;
      background: linear-gradient(135deg, var(--b1-15), var(--b1-08));
      border: 1px solid var(--b1-35);
      border-radius: 9px; color: var(--brand);
      font-size: 13px; font-weight: 700;
      padding: 7px 14px; cursor: pointer;
      transition: background 0.15s, box-shadow 0.15s;
      white-space: nowrap;
    }
    .btn-login:hover { background: var(--b1-25); box-shadow: 0 0 16px var(--b1-20); }

    /* Dim input area when not logged in */
    .input-area.locked { pointer-events: none; opacity: 0.4; user-select: none; }
    .login-prompt {
      text-align: center; padding: 10px 0 2px;
      font-size: 13px; color: var(--muted);
    }
    .login-prompt a { color: var(--brand); cursor: pointer; font-weight: 600; text-decoration: none; }
    .login-prompt a:hover { text-decoration: underline; }

    /* ── EMAIL GATE MODAL ── */
    .gate-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.78);
      backdrop-filter: blur(5px);
      z-index: 300;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none;
      transition: opacity 0.2s;
    }
    .gate-overlay.open { opacity: 1; pointer-events: all; }
    .gate-box {
      background: var(--surface);
      border: 1px solid var(--b1-25);
      border-radius: 18px;
      padding: 36px 32px 28px;
      width: calc(100% - 32px); max-width: 420px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.55);
      transform: translateY(14px);
      transition: transform 0.2s;
    }
    .gate-overlay.open .gate-box { transform: translateY(0); }
    .gate-box-logo { font-size: 38px; text-align: center; margin-bottom: 12px; }
    .gate-box h2 {
      text-align: center; font-size: 20px; font-weight: 800;
      letter-spacing: -0.4px; color: var(--text); margin-bottom: 6px;
    }
    .gate-box-sub { text-align: center; font-size: 14px; color: var(--muted); margin-bottom: 24px; line-height: 1.55; }
    .gate-error {
      background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3);
      border-radius: 8px; padding: 10px 14px; color: var(--red);
      font-size: 13px; margin-bottom: 16px; display: none;
    }
    .gate-field-row { display: flex; gap: 10px; }
    .gate-field-row .gate-field { flex: 1; min-width: 0; }
    .gate-optional { text-transform: none; font-weight: 500; letter-spacing: normal; }
    .gate-field { margin-bottom: 14px; }
    .gate-field label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; letter-spacing: 0.5px; text-transform: uppercase; }
    .gate-field input {
      width: 100%; background: var(--surface2); border: 1px solid var(--border);
      border-radius: 9px; padding: 10px 14px; color: var(--text);
      font-size: 14px; font-family: inherit; outline: none;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .gate-field input:focus { border-color: var(--b1-50); box-shadow: 0 0 0 3px var(--b1-10); }
    .gate-field input::placeholder { color: var(--muted); }
    .gate-submit {
      width: 100%; padding: 11px; border-radius: 10px; border: none;
      background: linear-gradient(135deg, var(--brand), var(--brand-dk));
      color: white; font-size: 15px; font-weight: 700;
      cursor: pointer; margin-top: 6px;
      transition: opacity 0.15s, transform 0.12s, box-shadow 0.15s;
      box-shadow: 0 0 24px var(--b1-30);
    }
    .gate-submit:hover:not(:disabled) { transform: scale(1.01); box-shadow: 0 0 32px var(--b1-45); }
    .gate-submit:disabled { opacity: 0.5; cursor: not-allowed; }
    .gate-success { text-align: center; padding: 8px 0; }
    .gate-success-icon { font-size: 42px; margin-bottom: 12px; }
    .gate-success h3 { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
    .gate-success p { font-size: 14px; color: var(--muted); line-height: 1.55; }
    .gate-alt-link {
      display: block; text-align: center; margin-top: 16px;
      font-size: 13px; color: var(--muted); cursor: pointer;
      transition: color 0.12s;
    }
    .gate-alt-link:hover { color: var(--brand); }
    @media (max-width: 640px) {
      .gate-box { padding: 28px 20px 22px; border-radius: 14px; }
      .gate-field input { font-size: 16px; }
    }

    /* ── THEME TOGGLE BUTTON ── */
    .btn-theme {
      display: flex;
      align-items: center;
      gap: 6px;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
      padding: 6px 11px;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .btn-theme:hover { background: rgba(255,255,255,0.1); color: var(--text); }
    body.light .btn-theme { background: rgba(0,0,0,0.04); }
    body.light .btn-theme:hover { background: rgba(0,0,0,0.08); }

    html {
      height: 100%;
      overflow: hidden;
      overflow-x: hidden;
      max-width: 100vw;
      touch-action: pan-y;
    }
    body {
      width: 100%;
      max-width: 100vw;
      height: 100svh;
      height: 100dvh;
      overflow: hidden;
      overflow-x: hidden;
      overscroll-behavior: none;
      touch-action: pan-y;
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      background: var(--bg);
      color: var(--text);
      display: flex;
      font-size: 15px;
      line-height: 1.6;
    }

    /* ── SIDEBAR ── */
    /* Scales with the viewport on laptop/desktop instead of a fixed 260px — noticeably roomier
       on a wide monitor, still reasonable on a smaller laptop screen. Mobile has its own
       width rule in the phone media query further down, untouched by this. */
    .sidebar {
      width: clamp(280px, 20vw, 420px);
      min-width: 280px;
      background: var(--sidebar);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
    }
    /* Expanded via the footer's width-toggle button — .main is flex:1/min-width:0 (see the
       ── MAIN ── rules below), so it just shrinks to fit whatever width the sidebar takes,
       same as it already does across every other viewport size. Higher specificity than the
       base .sidebar rule above wins on its own, no !important needed. */
    .sidebar.wide { width: clamp(480px, 34vw, 720px); }

    .sidebar-header {
      padding: 18px 16px 14px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .logo {
      font-size: 17px;
      font-weight: 800;
      letter-spacing: -0.4px;
      background: linear-gradient(135deg, var(--brand-lt), #f8fafc);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      flex-shrink: 0;
    }
    .logo span { -webkit-text-fill-color: var(--brand2); }

    .btn-new {
      display: flex;
      align-items: center;
      gap: 7px;
      background: var(--b1-12);
      border: 1px solid var(--b1-25);
      border-radius: 8px;
      color: var(--brand);
      font-size: 13px;
      font-weight: 600;
      padding: 7px 12px;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
      white-space: nowrap;
    }
    .btn-new:hover {
      background: var(--b1-20);
      border-color: var(--b1-40);
    }
    .btn-new svg { flex-shrink: 0; }

    /* ── SIDEBAR QUICK ACTIONS ── */
    .sidebar-quickactions {
      display: grid;
      /* Single column: at the sidebar's ~260px width, two columns only left ~55-60px for a
         bold 13px label — "Workout Builder"/"Delete Workout" etc had nowhere to go but wrap
         and get clipped by the button's own overflow:hidden. Full-width rows fit every label
         on one line, and as a bonus the taller quick-actions block uses more of the sidebar's
         height instead of leaving empty space below everything else. */
      grid-template-columns: 1fr;
      gap: 6px;
      padding: 10px 12px 4px;
      /* flex:1 fills whatever height the accordion gives this section when it's the one that's
         open (up to the sidebar's full height) — overflow-y:auto only kicks in if there's
         genuinely more content than that, rather than capping at a small fixed size. */
      flex: 1;
      min-height: 0;
      overflow-y: auto;
    }
    .sidebar-quickactions::-webkit-scrollbar { width: 5px; }
    .sidebar-quickactions::-webkit-scrollbar-thumb { background: var(--b1-25); border-radius: 4px; }
    /* Icon is a small fixed-size badge (emoji glyphs render oversized relative to their
       font-size, so a bare large emoji always dominated the button) — the label is what's
       meant to grab the eye now, big and bold, filling the rest of the button. */
    .qa-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01));
      border: 1px solid var(--b1-18);
      border-radius: 12px;
      padding: 10px 12px;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
      text-align: left;
      position: relative;
    }
    .qa-btn:hover {
      background: var(--b1-10);
      border-color: var(--b1-45);
      transform: translateY(-1px);
      box-shadow: 0 0 0 1px var(--b1-25), 0 4px 18px var(--b1-15);
    }
    .qa-btn:active { transform: translateY(0); }
    .qa-icon {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      line-height: 1;
      background: linear-gradient(135deg, var(--b1-18), var(--b2-15));
      border: 1px solid var(--b1-35);
      box-shadow: 0 0 10px var(--b1-20);
    }
    .qa-label {
      flex: 1;
      min-width: 0;
      font-size: 13px;
      font-weight: 800;
      color: var(--text);
      line-height: 1.2;
      letter-spacing: 0.1px;
      background: linear-gradient(135deg, #f8fafc, var(--brand-lt) 130%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .qa-badge-new {
      flex-shrink: 0;
      font-size: 9px; font-weight: 800; letter-spacing: 0.6px;
      color: #22d3ee; background: rgba(34,211,238,0.14); border: 1px solid rgba(34,211,238,0.4);
      border-radius: 100px; padding: 2px 7px; line-height: 1.4;
    }
    .qa-group-lbl {
      grid-column: 1 / -1;
      font-size: 9px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--muted); margin: 12px 2px 2px; padding-top: 10px; border-top: 1px solid var(--border);
    }
    .qa-group-lbl-first { margin-top: 0; padding-top: 0; border-top: none; }

    /* ── SHORT SCREENS (small laptops etc.) ── */
    /* Height-based, not width-based — a laptop at 1366×768 or similar is plenty wide (so it
       shouldn't get the phone drawer redesign, which is keyed off max-width) but not tall
       enough for 8 single-column quick-action rows to leave any room for the This Week volume/
       workouts panel below them. min-width keeps this from ever overlapping the phone
       breakpoint, so the two compact layouts never fight each other. */
    @media (max-height: 800px) and (min-width: 641px) {
      .sidebar-quickactions { grid-template-columns: 1fr 1fr; gap: 5px; padding: 8px 12px 4px; }
      .qa-btn { padding: 7px 9px; gap: 7px; border-radius: 9px; }
      .qa-icon { width: 22px; height: 22px; font-size: 11px; border-radius: 6px; }
      .qa-label { font-size: 11px; }
      .sidebar-header { padding: 10px 16px 8px; }
      .btn-new { padding: 5px 10px; font-size: 12px; }
      .sidebar-footer { padding: 8px 16px; }
      .dash-panel-head { padding: 8px 12px 0; }
      .dash-title { margin-bottom: 5px; }
      .dash-nav { margin-bottom: 6px; }
      .dash-tabs { margin-bottom: 6px; }
    }

    .sidebar-label-count {
      background: var(--b1-15);
      color: var(--brand-lt);
      border-radius: 20px;
      padding: 1px 7px;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: none;
    }

    /* ── SIDEBAR SECTIONS (collapsible + drag-to-reorder) ── */
    /* Every section is flex:1 now, not just This Week — combined with the accordion (only one
       section ever expanded at a time), whichever one is open claims the sidebar's ENTIRE
       remaining height instead of stopping at a small fixed cap and leaving empty space below
       it. A collapsed section (.sb-collapsed) drops back to flex:none, sized to just its
       header row, so it doesn't compete with the one that's actually open. */
    .sidebar-sections { display: flex; flex-direction: column; flex: 1; min-height: 0; }
    .sidebar-section { flex: 1; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
    .sidebar-section.sb-collapsed { flex: none; }
    .sidebar-section.sb-dragging {
      opacity: 0.5;
      background: var(--b1-05);
      box-shadow: 0 0 0 1px var(--b1-30) inset;
    }
    .sidebar-section-hdr {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 10px 14px;
      cursor: pointer;
      user-select: none;
      border-radius: 8px;
      transition: background-color 0.12s;
      touch-action: pan-y;
    }
    .sidebar-section-hdr:hover { background-color: var(--surface2); }
    /* Move up/down buttons replace the old press-and-hold drag — free-form dragging had to
       measure against each section's rendered height to decide where to drop, and only one
       section is ever expanded (flex:1, tall) at a time while the rest are thin header strips,
       which made the drop-zone math unreliable (could misjudge position, or make it effectively
       impossible to drag past whichever section happened to be open). A plain swap-with-neighbor
       button has no geometry to get wrong — every click is exactly one visible, predictable move,
       and repeating it walks a section all the way to the top or bottom. */
    .sb-move-btns { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
    .sb-move-btn {
      background: none; border: none; color: var(--muted); cursor: pointer;
      padding: 1px 3px; border-radius: 4px; display: flex; align-items: center; justify-content: center;
      transition: background 0.15s, color 0.15s;
    }
    .sb-move-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }
    .sb-move-btn:disabled { opacity: 0.25; cursor: default; }
    .sb-move-btn:disabled:hover { background: none; }
    .sb-section-title {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.2px;
      color: var(--text);
      flex-shrink: 0;
    }
    /* Small line icon in front of each section title (TriVault's coin icon predates this and
       keeps its own gold styling — this covers every other section: Quick Actions, Race Ready,
       Recent, Workout Metrics, Friends, Athletes, Auto Pilot). Sized and stroked to match the
       existing .sb-collapse-chevron icons already in every header for visual consistency. */
    .sb-section-icon {
      width: 13px;
      height: 13px;
      flex-shrink: 0;
      color: var(--brand-lt);
      opacity: 0.9;
    }
    .sb-collapse-btn {
      margin-left: auto;
      background: none;
      border: none;
      color: var(--muted);
      cursor: pointer;
      padding: 4px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s;
      flex-shrink: 0;
    }
    .sb-collapse-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }
    .sb-collapse-chevron { transition: transform 0.2s ease; }
    .sb-collapse-btn.collapsed .sb-collapse-chevron { transform: rotate(-90deg); }
    /* Non-scrolling flex passthrough — the actual scroll boundary lives one level deeper, on
       whichever content element is specific to that section (.sidebar-quickactions, .chat-list,
       .dash-panel-scroll), so each section only ever has ONE active scroll region, not two
       nested ones. */
    .sb-section-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
    .sb-section-body.collapsed { display: none; flex: none; }

    .chat-list {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 4px 8px 12px;
    }
    .chat-list::-webkit-scrollbar { width: 4px; }
    .chat-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }

    .chat-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 10px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.12s;
      position: relative;
      group: true;
    }
    .chat-item:hover { background: rgba(255,255,255,0.05); }
    .chat-item.active { background: var(--b1-12); }

    .chat-item-icon {
      font-size: 14px;
      opacity: 0.5;
      flex-shrink: 0;
    }
    .chat-item-title {
      font-size: 13px;
      color: #94a3b8;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
    }
    .chat-item.active .chat-item-title { color: var(--text); }

    .chat-item-del {
      display: none;
      background: none;
      border: none;
      color: var(--muted);
      cursor: pointer;
      padding: 2px 4px;
      border-radius: 4px;
      font-size: 16px;
      line-height: 1;
      flex-shrink: 0;
      transition: color 0.12s;
    }
    .chat-item-del:hover { color: var(--red); }
    .chat-item:hover .chat-item-del { display: flex; }

    .sidebar-footer {
      padding: 14px 16px;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: auto; /* pins to the bottom of the sidebar column instead of leaving a gap below it */
      flex-shrink: 0;
    }
    .model-badge {
      background: var(--b2-08);
      border: 1px solid var(--b2-20);
      border-radius: 6px;
      padding: 4px 8px;
      font-size: 11px;
      font-weight: 700;
      color: var(--brand2);
      letter-spacing: 0.3px;
      white-space: nowrap;
    }
    .model-label { font-size: 11px; color: var(--muted); }

    /* ── MAIN ── */
    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      min-width: 0;
      position: relative;
    }

    .topbar {
      padding: 14px 24px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--bg);
      flex-shrink: 0;
      position: sticky;
      top: 0;
      z-index: 10;
      overflow: hidden;
      max-width: 100%;
      box-sizing: border-box;
    }
    .topbar-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }
    .topbar-meta {
      font-size: 12px;
      color: var(--muted);
    }

    /* ── CHAT AREA ── */
    .chat-area {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0 0 8px;
      scroll-behavior: smooth;
      max-width: 100%;
      box-sizing: border-box;
    }
    .chat-area::-webkit-scrollbar { width: 6px; }
    .chat-area::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 6px; }

    /* ── EMPTY STATE ── */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 24px 20px;
      text-align: center;
      gap: 0;
    }
    .empty-logo {
      width: 320px;
      height: 320px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 0;
    }
    .empty-logo img {
      width: 320px;
      height: 320px;
      object-fit: contain;
    }
    .empty-heading {
      font-size: 26px;
      font-weight: 800;
      letter-spacing: -0.5px;
      margin-bottom: 8px;
      background: linear-gradient(135deg, #f8fafc 0%, var(--brand-lt) 60%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .empty-sub {
      font-size: 15px;
      color: var(--muted);
      max-width: 420px;
      line-height: 1.6;
      margin-bottom: 32px;
    }
    .starter-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      max-width: 560px;
      width: 100%;
    }
    .starter-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px 16px;
      cursor: pointer;
      text-align: left;
      transition: background 0.12s, border-color 0.12s;
      font-size: 13px;
      color: #94a3b8;
      line-height: 1.5;
    }
    .starter-card:hover {
      background: var(--surface2);
      border-color: var(--b1-25);
      color: var(--text);
    }
    .starter-card strong {
      display: block;
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 3px;
    }

    /* ── MESSAGES ── */
    .message-group {
      padding: 20px 24px;
      max-width: 780px;
      margin: 0 auto;
      width: 100%;
      box-sizing: border-box;
    }
    .message-group + .message-group {
      border-top: 1px solid rgba(255,255,255,0.04);
    }

    .msg {
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }

    .msg-avatar {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      margin-top: 1px;
    }
    .msg-avatar.user {
      background: linear-gradient(135deg, var(--brand), var(--brand-lt));
      color: white;
    }
    .msg-avatar.ai {
      background: linear-gradient(135deg, var(--b2-25), var(--b1-20));
      border: 1px solid var(--b2-20);
      font-size: 16px;
    }

    .msg-body { flex: 1; min-width: 0; }
    .msg-name {
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 6px;
    }
    .msg-name.user { color: var(--brand); }
    .msg-name.ai   { color: var(--brand2); }

    .msg-content {
      font-size: 15px;
      color: var(--text);
      line-height: 1.7;
      overflow-wrap: break-word;
      word-break: break-word;
      min-width: 0;
    }
    .msg-content p { margin-bottom: 10px; }
    .msg-content p:last-child { margin-bottom: 0; }
    /* ── STEP CARDS (ordered lists) ── */
    .msg-content ol {
      list-style: none;
      padding: 0;
      margin: 12px 0 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      counter-reset: step-counter;
    }
    .msg-content ol > li {
      counter-increment: step-counter;
      background: linear-gradient(135deg, rgba(129,140,248,0.07) 0%, rgba(52,211,153,0.03) 100%);
      border: 1px solid rgba(129,140,248,0.18);
      border-left: 3px solid #818cf8;
      border-radius: 10px;
      padding: 11px 14px 11px 48px;
      position: relative;
      margin: 0;
      line-height: 1.6;
      transition: border-color 0.15s, background 0.15s;
    }
    .msg-content ol > li:hover {
      border-color: rgba(129,140,248,0.35);
      background: linear-gradient(135deg, rgba(129,140,248,0.11) 0%, rgba(52,211,153,0.06) 100%);
    }
    .msg-content ol > li::before {
      content: counter(step-counter);
      position: absolute;
      left: 11px;
      top: 50%;
      transform: translateY(-50%);
      width: 23px; height: 23px;
      background: linear-gradient(135deg, #818cf8, #6366f1);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 800; color: #fff;
      box-shadow: 0 0 12px rgba(129,140,248,0.5);
    }
    /* ── BULLET LISTS ── */
    .msg-content ul {
      list-style: none;
      padding: 0;
      margin: 10px 0 14px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .msg-content ul > li {
      padding: 5px 10px 5px 22px;
      position: relative;
      border-radius: 6px;
      margin: 0;
      line-height: 1.6;
      transition: background 0.12s;
    }
    .msg-content ul > li:hover { background: rgba(255,255,255,0.03); }
    .msg-content ul > li::before {
      content: '→';
      position: absolute;
      left: 5px;
      color: var(--brand2);
      font-weight: 700;
      font-size: 12px;
    }
    .msg-content strong { color: #f1f5f9; font-weight: 700; }
    .msg-content em { color: #94a3b8; font-style: italic; }
    .msg-content code {
      background: rgba(255,255,255,0.08);
      border-radius: 4px;
      padding: 2px 6px;
      font-family: 'Consolas', 'Courier New', monospace;
      font-size: 13px;
      color: var(--brand2);
    }
    .msg-content pre {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px 16px;
      overflow-x: auto;
      margin-bottom: 10px;
      max-width: 100%;
      box-sizing: border-box;
    }
    .msg-content pre code {
      background: none;
      padding: 0;
      font-size: 13px;
    }
    /* ── FUTURISTIC DATA TABLES — any markdown table in a response renders like this ── */
    .msg-content .md-table-wrap {
      overflow-x: auto;
      margin: 12px 0;
      border-radius: 12px;
      border: 1px solid var(--b1-25);
      background: linear-gradient(180deg, var(--b1-05), transparent 60%);
      box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset, 0 4px 24px rgba(0,0,0,0.25);
    }
    .msg-content .md-table-wrap::-webkit-scrollbar { height: 5px; }
    .msg-content .md-table-wrap::-webkit-scrollbar-thumb { background: var(--b1-25); border-radius: 4px; }
    .msg-content table.md-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .msg-content .md-table thead th {
      background: linear-gradient(135deg, var(--b1-18), var(--b2-15));
      color: var(--brand-lt);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      font-size: 11px;
      text-align: left;
      padding: 10px 14px;
      border-bottom: 2px solid var(--b1-40);
      white-space: nowrap;
    }
    .msg-content .md-table thead th:first-child { border-top-left-radius: 11px; }
    .msg-content .md-table thead th:last-child { border-top-right-radius: 11px; }
    .msg-content .md-table tbody td {
      padding: 9px 14px;
      border-bottom: 1px solid var(--border);
      color: var(--text);
      white-space: nowrap;
    }
    .msg-content .md-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
    .msg-content .md-table tbody tr:hover { background: var(--b1-08); }
    .msg-content .md-table tbody tr:last-child td { border-bottom: none; }
    .msg-content .md-table tbody tr:last-child td:first-child { border-bottom-left-radius: 11px; }
    .msg-content .md-table tbody tr:last-child td:last-child { border-bottom-right-radius: 11px; }
    /* A "Total(s)" row (common in workout-breakdown tables) gets a glowing accent */
    .msg-content .md-table tbody tr.md-table-total { background: var(--b2-15); font-weight: 800; }
    .msg-content .md-table tbody tr.md-table-total td {
      color: var(--brand2);
      border-top: 2px solid var(--b2-30);
      box-shadow: inset 0 0 14px var(--b2-15);
    }
    body.light .msg-content .md-table thead th { color: var(--brand2-dk, var(--brand2)); }
    body.light .msg-content .md-table tbody tr:nth-child(even) { background: rgba(0,0,0,0.02); }
    /* ── SECTION HEADERS ── */
    .msg-content h1 {
      font-size: 18px; font-weight: 800;
      background: linear-gradient(135deg, #f8fafc 0%, #a5b4fc 80%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      margin: 20px 0 10px;
      letter-spacing: -0.3px;
    }
    .msg-content h2 {
      font-size: 14px; font-weight: 700;
      color: var(--text);
      background: linear-gradient(90deg, rgba(129,140,248,0.1), transparent);
      border-left: 3px solid #818cf8;
      border-radius: 0 8px 8px 0;
      padding: 8px 14px;
      margin: 18px 0 10px;
      letter-spacing: -0.1px;
    }
    .msg-content h3 {
      font-size: 12px; font-weight: 700;
      color: var(--brand2);
      padding: 5px 0 4px;
      margin: 14px 0 8px;
      border-bottom: 1px solid rgba(52,211,153,0.2);
      text-transform: uppercase; letter-spacing: 0.8px;
    }
    /* ── TIP / CALLOUT BOXES ── */
    .msg-content blockquote {
      background: linear-gradient(135deg, rgba(251,191,36,0.07), rgba(251,191,36,0.02));
      border: 1px solid rgba(251,191,36,0.22);
      border-left: 3px solid #fbbf24;
      border-radius: 10px;
      padding: 10px 14px;
      color: var(--text);
      margin: 12px 0;
      font-style: normal;
    }
    .msg-content blockquote::before { content: '💡 '; }
    .msg-content hr {
      border: none;
      border-top: 1px solid var(--border);
      margin: 16px 0;
      background: linear-gradient(90deg, transparent, rgba(129,140,248,0.3), transparent);
      height: 1px;
    }

    /* ── FUTURISTIC STAT CARDS ── */
    .stat-card {
      background: linear-gradient(145deg, rgba(13,13,30,0.98), rgba(8,8,20,0.99));
      border: 1px solid var(--b1-28);
      border-radius: 16px;
      padding: 18px 20px 16px;
      margin: 0 0 14px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 0 40px var(--b1-07), 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .stat-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, var(--b1-70) 50%, transparent 100%);
    }
    .stat-card::after {
      content: '';
      position: absolute;
      top: -60px; right: -60px;
      width: 180px; height: 180px;
      background: radial-gradient(circle, var(--b1-06) 0%, transparent 70%);
      pointer-events: none;
    }
    .stat-card.sleep-card {
      border-color: rgba(56,189,248,0.25);
      box-shadow: 0 0 40px rgba(56,189,248,0.06), 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .stat-card.sleep-card::before {
      background: linear-gradient(90deg, transparent 0%, rgba(56,189,248,0.6) 50%, transparent 100%);
    }
    .stat-card.sleep-card::after {
      background: radial-gradient(circle, rgba(56,189,248,0.05) 0%, transparent 70%);
    }
    .stat-card-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
    }
    .stat-card-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
    .stat-card-type {
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 3px;
      text-transform: uppercase;
    }
    .stat-card-date {
      margin-left: auto;
      font-size: 11px;
      color: var(--muted);
      font-weight: 500;
    }
    /* Highlights */
    .stat-highlights {
      display: flex;
      gap: 8px;
      align-items: baseline;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }
    .stat-hi-val {
      font-size: 28px;
      font-weight: 800;
      letter-spacing: -0.8px;
      background: linear-gradient(135deg, #f1f5f9 30%, var(--brand-lt) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1.1;
    }
    .stat-hi-sep { font-size: 18px; color: rgba(255,255,255,0.15); align-self: center; }
    /* Gauge */
    .gauge-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 4px 0 14px;
    }
    .gauge-wrap svg { width: 100%; max-width: 220px; height: auto; overflow: visible; }
    .gauge-value-text {
      font-family: 'Segoe UI', system-ui, sans-serif;
      font-size: 24px; font-weight: 800;
      fill: #f1f5f9;
    }
    .gauge-label-text {
      font-family: 'Segoe UI', system-ui, sans-serif;
      font-size: 9px; font-weight: 700;
      fill: #475569; letter-spacing: 2.5px;
    }
    .gauge-edge-text {
      font-family: 'Segoe UI', system-ui, sans-serif;
      font-size: 9px; fill: #334155;
    }
    /* Metric bars */
    .metric-bars { display: flex; flex-direction: column; gap: 9px; }
    .metric-bar { display: flex; align-items: center; gap: 10px; }
    .metric-label {
      font-size: 9px; font-weight: 800;
      letter-spacing: 1.5px; text-transform: uppercase;
      color: #475569; width: 34px; flex-shrink: 0; text-align: right;
    }
    .metric-track {
      flex: 1; height: 3px;
      background: rgba(255,255,255,0.06);
      border-radius: 2px; overflow: hidden;
    }
    @keyframes barFillIn { from { width: 0; } }
    .metric-fill {
      height: 100%; border-radius: 2px;
      background: var(--bar-color, #818cf8);
      box-shadow: 0 0 10px var(--bar-glow, var(--b1-70));
      animation: barFillIn 0.9s cubic-bezier(0.16,1,0.3,1) both;
    }
    .metric-val {
      font-size: 11px; font-weight: 700; color: var(--text);
      width: 72px; text-align: right; flex-shrink: 0;
    }
    /* Dual gauge row */
    .gauge-row { display:flex; gap:6px; align-items:flex-end; }
    .gauge-row .gauge-wrap { flex:1; min-width:0; }
    /* Pace gauge accent */
    .gauge-pace-label { fill:#94a3b8; }
    /* Lap section – collapsed by default */
    .lap-section { margin-top:14px; border-top:1px solid rgba(255,255,255,0.06); padding-top:11px; }
    .lap-sec-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; padding:2px 0; border-radius:3px; transition:background 0.12s; }
    .lap-sec-hdr:hover { background:rgba(255,255,255,0.03); }
    .lap-sec-title { font-size:9px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:#475569; transition:color 0.12s; }
    .lap-sec-hdr:hover .lap-sec-title { color:#64748b; }
    .lap-sec-cols { font-size:9px; color:#334155; letter-spacing:0.5px; }
    .lap-collapse-btn { background:none; border:none; color:#475569; font-size:11px; cursor:pointer; padding:0 4px; transition:color 0.12s; }
    .lap-rows-wrap { }
    .lap-rows-wrap.hidden { display:none; }
    .lap-hdr { display:flex; justify-content:space-between; margin-bottom:7px; }
    .lap-hdr-l { font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#334155; }
    .lap-hdr-r { font-size:9px; color:#334155; }
    .lap-row { display:flex; align-items:center; gap:5px; margin:2.5px 0; }
    .lap-num { font-size:8px; color:#334155; width:16px; text-align:right; flex-shrink:0; font-weight:800; font-variant-numeric:tabular-nums; }
    .lap-int-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
    .lap-bar-track { flex:1; height:18px; border-radius:3px; background:rgba(255,255,255,0.03); position:relative; overflow:hidden; }
    .lap-bar-fill { height:100%; border-radius:3px; }
    .lap-bar-label { position:absolute; left:6px; right:56px; top:0; bottom:0; display:flex; align-items:center; font-size:8px; font-weight:700; color:rgba(255,255,255,0.8); white-space:nowrap; overflow:hidden; gap:5px; pointer-events:none; }
    .lap-pace { position:absolute; right:4px; top:0; bottom:0; display:flex; align-items:center; font-size:8px; font-weight:700; color:rgba(255,255,255,0.55); white-space:nowrap; pointer-events:none; }
    .lap-meta { font-size:9px; color:#475569; min-width:52px; text-align:right; font-variant-numeric:tabular-nums; flex-shrink:0; }
    .lap-hr { width:28px; text-align:right; font-size:8px; color:#f87171; font-variant-numeric:tabular-nums; flex-shrink:0; }
    .lap-loading { font-size:11px; color:#475569; text-align:center; padding:10px; font-style:italic; }
    .lap-set-row { display:flex; align-items:center; gap:8px; margin:3px 0; padding:5px 7px; background:rgba(255,255,255,0.02); border-radius:4px; border-left:2px solid; }
    .lap-set-name { font-size:9px; font-weight:700; color:#94a3b8; flex:1; }
    .lap-set-reps { font-size:9px; color:#64748b; }

    /* ── FRIEND WORKOUT CARD — name header + fire/comment social footer ── */
    .wc-tabs { margin: 12px 0 2px; }
    .wc-tab-pane { margin-top: 10px; }
    .wc-friend-hdr { display:flex; align-items:center; gap:8px; margin:2px 0 10px; }
    .wc-friend-avatar {
      width:26px; height:26px; border-radius:50%; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      font-size:10px; font-weight:800; color:#06070f;
      background: var(--fc, var(--brand)); box-shadow: 0 0 8px color-mix(in srgb, var(--fc, var(--brand)) 60%, transparent);
    }
    .wc-friend-name { font-size:12.5px; font-weight:700; color:var(--text); }
    .wc-social { margin-top:14px; border-top:1px solid rgba(255,255,255,0.06); padding-top:12px; }
    .wc-fire-btn {
      display:inline-flex; align-items:center; gap:6px;
      background: rgba(251,146,60,0.08); border: 1px solid rgba(251,146,60,0.3);
      border-radius: 20px; color: #fb923c; font-size: 13px; font-weight: 800;
      padding: 6px 14px; cursor: pointer; transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
      margin-bottom: 10px;
    }
    .wc-fire-btn:hover { background: rgba(251,146,60,0.16); transform: translateY(-1px); }
    .wc-fire-btn.wc-fired {
      background: linear-gradient(135deg, #fb923c, #ef4444); color: #fff; border-color: transparent;
      box-shadow: 0 0 16px rgba(251,146,60,0.5);
    }
    .wc-comments { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; max-height:220px; overflow-y:auto; }
    .wc-comments::-webkit-scrollbar { width:4px; }
    .wc-comments::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius:4px; }
    .wc-comment-row { display:flex; gap:8px; }
    .wc-comment-avatar {
      width:22px; height:22px; border-radius:50%; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      font-size:8.5px; font-weight:800; color:#fff;
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      margin-top:1px;
    }
    .wc-comment-body { flex:1; min-width:0; }
    .wc-comment-name { font-size:10.5px; font-weight:700; color:var(--text); }
    .wc-comment-text { font-size:11.5px; color:#cbd5e1; line-height:1.4; word-break:break-word; }
    .wc-comment-empty { font-size:11px; color:var(--muted); font-style:italic; padding:2px 0; }

    /* ── WORKOUT ROUTE MAP (Leaflet) ── */
    /* Leaflet's own CSS gives its panes/controls z-index values up to 1000 (.leaflet-top,
       .leaflet-bottom) so they layer correctly *inside* the map. Those values aren't scoped to
       the map itself though — without something to contain them, they compare directly against
       the rest of the page's stacking order, which is how the map was rendering on top of the
       mobile sidebar drawer (z-index 50) regardless of which was actually on top in the DOM.
       `isolation: isolate` + `position: relative` makes .wc-map-wrap its own sealed stacking
       context: everything Leaflet puts inside it is now only ever compared against other things
       inside it, and the whole map participates in the page's stacking order as one atomic,
       unraised element — same fix, whichever sport's workout card the map is showing on. */
    .wc-map-wrap { position: relative; isolation: isolate; margin: 12px 0 2px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); }
    .wc-map-el { width: 100%; height: 220px; background: rgba(255,255,255,0.02); }
    .wc-map-el .leaflet-control-attribution { font-size: 8px; background: rgba(0,0,0,0.55); color: #94a3b8; }
    .wc-map-el .leaflet-control-attribution a { color: #cbd5e1; }
    body.light .wc-map-wrap { border-color: var(--border); }
    body.light .wc-map-el .leaflet-control-attribution { background: rgba(255,255,255,0.7); color: #334155; }
    body.light .wc-map-el .leaflet-control-attribution a { color: #0f172a; }
    .wc-comment-input-row { display:flex; gap:7px; }
    .wc-comment-input {
      flex:1; background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12);
      border-radius:20px; color:var(--text); padding:8px 14px; font-size:12.5px;
      font-family:inherit; outline:none; transition:border-color 0.15s;
    }
    .wc-comment-input:focus { border-color: var(--brand); }
    .wc-comment-input::placeholder { color:#475569; }
    .wc-comment-send {
      background: linear-gradient(135deg, var(--brand), var(--brand2)); color:#fff; border:none;
      border-radius:20px; padding:8px 16px; font-size:12px; font-weight:700; cursor:pointer;
      transition: opacity 0.15s, transform 0.12s;
    }
    .wc-comment-send:hover { opacity:0.88; transform:translateY(-1px); }
    /* Sleep timeline */
    .sleep-timeline { margin: 0 0 14px; }
    .sleep-hypno-wrap { margin: 6px 0 5px; }
    .sleep-hypno { display: block; width: 100%; height: auto; overflow: visible; }
    .hypno-row-label {
      font-family: 'Segoe UI', system-ui, sans-serif;
      font-size: 9px; font-weight: 700; fill: var(--muted);
    }
    .hypno-grid { stroke: rgba(255,255,255,0.08); stroke-width: 1; }
    .hypno-seg { animation: segIn 1s cubic-bezier(0.16,1,0.3,1) both; }
    @keyframes segIn { from { opacity: 0; } }
    .timeline-times {
      display: flex; justify-content: space-between;
      font-size: 10px; color: var(--muted); letter-spacing: 0.3px;
    }
    /* Sleep stats */
    .sleep-stats-row {
      display: flex; align-items: center; gap: 16px;
    }
    .sleep-donut-wrap { flex-shrink: 0; }
    .sleep-donut { width: 90px; height: 90px; overflow: visible; }
    .donut-score-text {
      font-family: 'Segoe UI', system-ui, sans-serif;
      font-size: 20px; font-weight: 800; fill: #f1f5f9;
    }
    .donut-qual-text {
      font-family: 'Segoe UI', system-ui, sans-serif;
      font-size: 7px; font-weight: 700; fill: #475569; letter-spacing: 2px;
    }
    .sleep-legend { flex: 1; display: flex; flex-direction: column; gap: 7px; }
    .legend-item {
      display: flex; align-items: center; gap: 8px;
      font-size: 12px;
    }
    .legend-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--dot-color, #818cf8);
      box-shadow: 0 0 6px var(--dot-color, #818cf8);
      flex-shrink: 0;
    }
    .legend-stage { color: #64748b; font-size: 11px; flex: 1; }
    .legend-dur { font-weight: 700; color: #f1f5f9; }
    .sleep-rhr {
      margin-top: 10px; font-size: 11px;
      color: #475569; display: flex; align-items: center; gap: 6px;
    }
    .sleep-rhr strong { color: #f1f5f9; font-weight: 700; }

    /* ── NUTRITION CARD ── */
    .stat-card.nutri-card {
      border-color: rgba(251,191,36,0.25);
      box-shadow: 0 0 40px rgba(251,191,36,0.06), 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .stat-card.nutri-card::before { background: linear-gradient(90deg, transparent 0%, rgba(251,191,36,0.6) 50%, transparent 100%); }
    .stat-card.nutri-card::after  { background: radial-gradient(circle, rgba(251,191,36,0.05) 0%, transparent 70%); }
    .nutri-title { font-size: 14px; font-weight: 800; color: #f1f5f9; margin-bottom: 12px; letter-spacing: -0.2px; }
    .nutri-meal + .nutri-meal { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06); }
    .nutri-meal-hdr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
    .nutri-meal-label { font-size: 13px; font-weight: 800; color: #f1f5f9; }
    .nutri-meal-timing {
      font-size: 10px; font-weight: 700; color: #94a3b8;
      background: rgba(255,255,255,0.06); border-radius: 20px; padding: 2px 9px; letter-spacing: 0.2px;
    }
    .nutri-meal-cal {
      margin-left: auto; font-size: 15px; font-weight: 800;
      background: linear-gradient(135deg, #f1f5f9 30%, #fbbf24 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .nutri-bar {
      display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px;
      background: rgba(255,255,255,0.03);
    }
    .nutri-seg { transition: filter 0.15s; min-width: 4px; }
    .nutri-seg:hover { filter: brightness(1.2); }
    .nutri-meal-macros { display: flex; gap: 12px; margin-top: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.2px; flex-wrap: wrap; }
    /* ── Per-food nutrition-facts mini cards ── */
    .nutri-food-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
      gap: 8px;
      margin-top: 10px;
    }
    .nutri-food {
      background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 10px;
      padding: 8px 10px 9px;
      transition: border-color 0.15s, background 0.15s, transform 0.12s;
    }
    .nutri-food:hover {
      border-color: rgba(251,191,36,0.35);
      background: linear-gradient(160deg, rgba(251,191,36,0.06), rgba(255,255,255,0.02));
      transform: translateY(-1px);
    }
    .nutri-food-plain { display: flex; align-items: center; }
    .nutri-food-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
    .nutri-food-name { font-size: 11.5px; font-weight: 700; color: #e2e8f0; line-height: 1.3; min-width: 0; overflow-wrap: break-word; }
    .nutri-food-cal {
      font-size: 11px; font-weight: 900; color: var(--gold); white-space: nowrap; flex-shrink: 0;
      display: flex; align-items: baseline; gap: 2px;
    }
    .nutri-food-cal i { font-size: 8px; font-weight: 700; font-style: normal; color: rgba(251,191,36,0.6); text-transform: uppercase; }
    .nutri-food-bar {
      display: flex; height: 6px; border-radius: 4px; overflow: hidden; gap: 1px;
      background: rgba(255,255,255,0.05);
    }
    .nutri-food-seg { min-width: 3px; transition: filter 0.15s; }
    .nutri-food-seg:hover { filter: brightness(1.35); }
    .nutri-food-macros { display: flex; gap: 9px; margin-top: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.2px; }
    .nutri-food-macros .nfm-c, .nutri-meal-macros .nfm-c { color: var(--gold); }
    .nutri-food-macros .nfm-p, .nutri-meal-macros .nfm-p { color: #818cf8; }
    .nutri-food-macros .nfm-f, .nutri-meal-macros .nfm-f { color: #f472b6; }
    .nutri-legend { display: flex; gap: 14px; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06); }
    .nutri-leg-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #64748b; font-weight: 600; }
    .nutri-leg-item i { display: inline-block; width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }
    .nutri-tip {
      margin-top: 12px; font-size: 12px; color: #cbd5e1; line-height: 1.5;
      background: rgba(251,191,36,0.06); border: 1px solid rgba(251,191,36,0.18);
      border-left: 3px solid #fbbf24; border-radius: 0 8px 8px 0; padding: 8px 12px;
    }
    .nutri-save-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
    .nutri-save-btn {
      background: linear-gradient(135deg, rgba(251,191,36,0.16), rgba(251,191,36,0.05));
      border: 1px solid rgba(251,191,36,0.4);
      color: #fde68a;
      font-size: 12px; font-weight: 800; letter-spacing: 0.2px;
      border-radius: 20px; padding: 7px 14px;
      cursor: pointer;
      box-shadow: 0 0 10px rgba(251,191,36,0.15);
      transition: background 0.15s, box-shadow 0.15s, transform 0.12s;
    }
    .nutri-save-btn:hover { box-shadow: 0 0 16px rgba(251,191,36,0.3); transform: translateY(-1px); }
    .nutri-save-btn:disabled { opacity: 0.7; cursor: default; transform: none; }
    .nutri-save-btn.nutri-save-done {
      background: rgba(52,211,153,0.14); border-color: rgba(52,211,153,0.4); color: var(--brand2);
      box-shadow: 0 0 10px rgba(52,211,153,0.2);
    }
    .nutri-save-status { font-size: 11px; font-weight: 600; color: var(--muted); }

    /* ── DATA GRAPHS (sleep & training week) ── */
    .trs-gc {
      background: linear-gradient(145deg, #080e1a 0%, #0f1729 100%);
      border: 1px solid rgba(99,102,241,.3);
      border-radius: 14px;
      padding: 14px 16px 12px;
      margin: 0 0 10px;
      position: relative;
      overflow: hidden;
      font-family: -apple-system, 'Segoe UI', sans-serif;
    }
    .trs-gc::before {
      content: '';
      position: absolute;
      top: -1px; left: 20%; right: 20%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(99,102,241,.75), transparent);
    }
    .trs-gc--activity { border-color: rgba(34,197,94,.28); }
    .trs-gc--activity::before { background: linear-gradient(90deg, transparent, rgba(34,197,94,.65), transparent); }
    .trs-gc-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
    .trs-gc-title { font-size:13px; font-weight:800; color:#e2e8f0; letter-spacing:.02em; }
    .trs-gc-sub { font-size:10px; color:rgba(148,163,184,.5); }
    .trs-gc-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:12px; }
    .trs-gc-stat {
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.06);
      border-radius:8px;
      padding:8px 4px 6px;
      text-align:center;
    }
    .trs-gc-si { font-size:14px; line-height:1; margin-bottom:4px; }
    .trs-gc-sv { font-size:12px; font-weight:800; color:#f1f5f9; line-height:1.2; }
    .trs-gc-sl { font-size:8px; color:rgba(148,163,184,.55); margin-top:2px; text-transform:uppercase; letter-spacing:.06em; }
    .trs-gc-wrap { margin: 0 -4px 8px; }
    .trs-gc-legend { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
    .trs-gc-li { display:flex; align-items:center; gap:5px; font-size:10px; color:rgba(148,163,184,.65); }
    .trs-gc-li i { display:inline-block; width:9px; height:9px; border-radius:2px; flex-shrink:0; }
    .trs-gc-li-note { font-size:10px; color:rgba(148,163,184,.3); margin-left:auto; }
    @media (max-width:420px) { .trs-gc-stats { grid-template-columns:repeat(2,1fr); } }

    /* ── TRAINING PLAN CARD ── */
    .plan-card {
      border-color: var(--b2-22);
      box-shadow: 0 0 40px var(--b2-06), 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
      padding-bottom: 14px;
    }
    .plan-card::before {
      background: linear-gradient(90deg, transparent 0%, var(--b2-55) 50%, transparent 100%);
    }
    .plan-card::after {
      background: radial-gradient(circle, var(--b2-05) 0%, transparent 70%);
    }
    .plan-header { margin-bottom: 10px; }
    .plan-title {
      font-size: 14px; font-weight: 800; letter-spacing: -0.2px;
      color: #f1f5f9; margin-bottom: 3px;
    }
    .plan-meta { font-size: 11px; color: #475569; }

    /* Chart */
    .plan-chart-wrap { width: 100%; overflow-x: auto; margin: 10px 0 8px; -webkit-overflow-scrolling: touch; }
    .plan-chart { width: 100%; min-width: 300px; display: block; overflow: visible; }

    /* SVG bar animation */
    @keyframes svgBarGrow { from { transform: scaleY(0); } }
    .plan-bar {
      transform-box: fill-box;
      transform-origin: bottom center;
      animation: svgBarGrow 0.65s cubic-bezier(0.16,1,0.3,1) both;
    }

    /* Legend */
    .plan-legend-row {
      display: flex; gap: 14px; flex-wrap: wrap;
      margin-bottom: 8px;
    }
    .plan-legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #64748b; }
    .plan-legend-dot {
      width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
    }

    /* Plan header + legend */
    .plan-header { margin-bottom: 10px; }
    .plan-title { font-size: 14px; font-weight: 800; color: #e2e8f0; letter-spacing: 0.3px; }
    .plan-meta { font-size: 10px; color: #475569; margin-top: 2px; letter-spacing: 0.5px; }
    .plan-legend-row {
      display: flex; flex-wrap: wrap; gap: 10px;
      margin-bottom: 6px; align-items: center;
      font-size: 10px; color: #64748b; font-weight: 600; letter-spacing: 0.5px;
    }
    .plan-legend-item { display: flex; align-items: center; gap: 5px; }
    .plan-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

    /* Week pills row */
    .plan-weeks-row {
      display: flex; gap: 5px; overflow-x: auto;
      padding: 4px 0 6px; margin-top: 8px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .plan-weeks-row::-webkit-scrollbar { display: none; }
    .plan-week-pill {
      flex-shrink: 0;
      border-radius: 7px;
      padding: 5px 8px;
      font-size: 10px; font-weight: 700;
      display: flex; flex-direction: column;
      align-items: center; gap: 2px;
      min-width: 40px; text-align: center;
      border: 1px solid transparent;
      transition: transform 0.15s;
      cursor: default;
    }
    .plan-week-pill:hover { transform: translateY(-2px); }
    .plan-week-num { font-size: 9px; opacity: 0.6; }
    .plan-week-focus { font-size: 9px; opacity: 0.85; white-space: nowrap; }

    /* Volume totals */
    .plan-stats-row {
      margin-top: 10px; padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,0.06);
      font-size: 11px; color: #475569;
      display: flex; gap: 14px; flex-wrap: wrap;
    }
    .plan-stat-item strong { color: #94a3b8; font-weight: 700; }

    /* ── TRAINING VOLUME CARD ── */
    .stat-card.volume-card {
      border-color: rgba(56,189,248,0.25);
      box-shadow: 0 0 40px rgba(56,189,248,0.06), 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .stat-card.volume-card::before { background: linear-gradient(90deg, transparent 0%, rgba(56,189,248,0.6) 50%, transparent 100%); }
    .stat-card.volume-card::after  { background: radial-gradient(circle, rgba(56,189,248,0.05) 0%, transparent 70%); }
    .vol-range-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
    .vol-range-btn {
      background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 20px; color: #94a3b8; font-size: 11px; font-weight: 700;
      padding: 5px 12px; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .vol-range-btn:hover { background: rgba(56,189,248,0.1); border-color: rgba(56,189,248,0.3); color: #e2e8f0; }
    .vol-range-btn.active {
      background: linear-gradient(135deg, #38bdf8, #0284c7); border-color: transparent;
      color: #fff; box-shadow: 0 0 14px rgba(56,189,248,0.4);
    }
    .vol-sport-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 12px; }
    .vol-sport-tile {
      display: flex; align-items: center; gap: 9px;
      background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
      border: 1px solid rgba(255,255,255,0.07); border-left: 3px solid var(--sc, #38bdf8);
      border-radius: 10px; padding: 9px 11px;
      transition: transform 0.12s, background 0.15s;
    }
    .vol-sport-tile:hover { transform: translateY(-1px); background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); }
    .vst-icon { font-size: 19px; filter: drop-shadow(0 0 4px var(--sc, transparent)); flex-shrink: 0; }
    .vst-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .vst-label { font-size: 9px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--sc, #64748b); }
    .vst-val { font-size: 14px; font-weight: 800; color: #f1f5f9; line-height: 1.2; }
    .vst-sub { font-size: 10.5px; color: #64748b; font-weight: 600; }
    .vol-total-row {
      margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.06);
      font-size: 12px; color: #94a3b8;
    }
    .vol-total-row strong { color: #38bdf8; font-weight: 800; }
    .vol-tooltip {
      position: fixed; z-index: 9500; display: none; pointer-events: none;
      background: linear-gradient(160deg, rgba(10,14,26,0.98), rgba(15,22,38,0.98));
      border: 1px solid rgba(56,189,248,0.35);
      border-radius: 10px; padding: 9px 13px;
      box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 20px rgba(56,189,248,0.15);
      font-family: -apple-system, 'Segoe UI', sans-serif;
      min-width: 148px;
    }
    .vol-tip-date { font-size: 10px; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 7px; white-space: nowrap; }
    .vol-tip-row { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #cbd5e1; padding: 2px 0; white-space: nowrap; }
    .vol-tip-row i { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }
    .vol-tip-row strong { margin-left: auto; padding-left: 14px; color: #f1f5f9; font-weight: 800; }

    /* ── WORKOUT CALENDAR CARD ── */
    .stat-card.calendar-card {
      border-color: var(--b1-28);
      box-shadow: 0 0 40px var(--b1-07), 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .stat-card.calendar-card::before { background: linear-gradient(90deg, transparent 0%, var(--b1-70) 50%, transparent 100%); }
    .stat-card.calendar-card::after  { background: radial-gradient(circle, var(--b1-06) 0%, transparent 70%); }
    .cal-nav {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 12px; gap: 10px;
    }
    .cal-nav-months { display: flex; align-items: center; justify-content: center; gap: 10px; }
    .cal-copyweek-btn {
      flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: var(--brand);
      background: var(--b1-08); border: 1px solid var(--b1-30);
      border-radius: 8px; padding: 6px 10px; cursor: pointer; white-space: nowrap;
      transition: background 0.15s, transform 0.12s;
    }
    .cal-copyweek-btn:hover { background: var(--b1-20); transform: scale(1.03); }
    .cal-nav-btn {
      width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
      background: var(--b1-08); border: 1px solid var(--b1-30); color: var(--brand);
      font-size: 16px; font-weight: 800; cursor: pointer; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.15s, transform 0.12s;
    }
    .cal-nav-btn:hover { background: var(--b1-20); transform: scale(1.08); }
    .cal-month-lbl { font-size: 13.5px; font-weight: 800; color: #f1f5f9; letter-spacing: 0.2px; }
    .cal-dow-row {
      display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
      margin-bottom: 4px;
    }
    .cal-dow-row span {
      text-align: center; font-size: 9px; font-weight: 800; letter-spacing: 0.6px;
      text-transform: uppercase; color: #475569; padding-bottom: 4px;
    }
    .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
    .cal-cell {
      position: relative; min-height: 64px; border-radius: 8px; padding: 4px 3px;
      background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05);
      cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.12s;
      display: flex; flex-direction: column; gap: 3px;
    }
    .cal-cell:hover { background: var(--b1-10); border-color: var(--b1-35); transform: translateY(-1px); }
    .cal-cell-empty { background: transparent; border-color: transparent; cursor: default; pointer-events: none; }
    .cal-cell-today { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), 0 0 12px -2px var(--b1-70); }
    .cal-cell-has { background: var(--b1-06); }
    /* Always-visible + button in each real day's corner — opens the builder for that exact date
       immediately, independent of clicking the cell body (which shows/edits what's already
       planned instead). stopPropagation() on its own onclick (workout-calendar.js) keeps a tap
       on + from also firing the cell's click handler underneath it. */
    .cal-cell-add {
      position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%;
      border: none; padding: 0; cursor: pointer; z-index: 1;
      background: var(--b1-15, rgba(129,140,248,0.15)); color: var(--brand);
      font-size: 12px; line-height: 1; font-weight: 800; display: flex; align-items: center; justify-content: center;
      opacity: 0.75; transition: opacity 0.15s, background 0.15s, transform 0.15s;
    }
    .cal-cell-add:hover { opacity: 1; background: var(--brand); color: #fff; transform: scale(1.12); }
    .cal-daynum { font-size: 10.5px; font-weight: 700; color: #94a3b8; }
    .cal-cell-today .cal-daynum { color: var(--brand); font-weight: 900; }
    .cal-pills { display: flex; flex-wrap: wrap; gap: 3px; }
    .cal-pill {
      font-size: 15px; line-height: 1; width: 24px; height: 24px; border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      background: color-mix(in srgb, var(--wc, #818cf8) 25%, transparent);
      filter: drop-shadow(0 0 3px var(--wc, transparent));
    }
    .cal-more { font-size: 9.5px; font-weight: 800; color: #64748b; align-self: center; }
    /* Completed activity pill — deliberately a different silhouette from a planned pill (round
       instead of square, glowing ring instead of a flat tint, small ✓ badge) so "this already
       happened" reads at a glance without hovering, and a pulsing glow instead of a static
       tinted square to feel alive/"done" rather than just scheduled. */
    .cal-pill-done {
      position: relative; border-radius: 50%; cursor: pointer;
      background: color-mix(in srgb, var(--wc, #818cf8) 35%, transparent);
      box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--wc, #818cf8) 70%, transparent), 0 0 8px -1px var(--wc, transparent);
      animation: calPillPulse 2.4s ease-in-out infinite;
    }
    .cal-pill-done:hover { animation-play-state: paused; filter: brightness(1.25); }
    @keyframes calPillPulse {
      0%, 100% { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--wc, #818cf8) 70%, transparent), 0 0 6px -1px var(--wc, transparent); }
      50%      { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--wc, #818cf8) 90%, transparent), 0 0 12px 1px var(--wc, transparent); }
    }
    .cal-pill-check {
      position: absolute; bottom: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%;
      background: #22c55e; color: #fff; font-size: 8px; font-weight: 900; line-height: 1;
      display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--bg, #0b1020);
    }
    .cal-legend { display: flex; justify-content: center; gap: 16px; margin-top: 8px; font-size: 9.5px; color: #64748b; }
    .cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
    .cal-pill-mini { width: 14px; height: 14px; animation: none; cursor: default; }
    .cal-hint { margin-top: 10px; font-size: 10.5px; color: #475569; text-align: center; letter-spacing: 0.2px; }

    /* Day panel (already-planned day) — existing workouts + a standing "add another" CTA */
    .cal-day-card { max-width: 460px; }
    .dw-row-btns { display: flex; gap: 6px; flex-shrink: 0; }
    .cal-copy-btn { color: var(--brand2); background: rgba(52,211,153,0.08); border-color: rgba(52,211,153,0.4); }
    .cal-copy-btn:hover:not(:disabled) { background: rgba(52,211,153,0.2); }

    /* Day panel — completed activities section: full labeled buttons (not just tiny grid pills)
       that open the same real-metrics workout card as the calendar's ✓ pills. */
    .cal-done-hdr { font-size: 11.5px; opacity: 0.85; }
    .cal-done-row {
      width: 100%; text-align: left; background: none; border: none; cursor: pointer;
      font-family: inherit; color: inherit;
    }
    .cal-done-row:hover { background: rgba(255,255,255,0.03); }
    .cal-done-tag {
      flex-shrink: 0; font-size: 9.5px; font-weight: 700; color: #22c55e;
      background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3);
      border-radius: 6px; padding: 4px 8px; white-space: nowrap;
    }
    /* Wraps each completed row + its own delete row, same reason planned workouts split Edit/Copy
       from Delete into separate rows — a <button> (.cal-done-row) can't nest another <button>.
       .dw-row already carries its own border-bottom separator, so no extra border needed here. */
    .cal-done-del-row { display: flex; align-items: center; gap: 8px; padding: 0 12px 8px 26px; }
    .cal-day-add-wrap { padding: 10px 12px 12px; }
    .cal-day-add-btn {
      position: relative; width: 100%; display: flex; align-items: center; justify-content: center;
      gap: 8px; padding: 11px 14px; border-radius: 10px; cursor: pointer; overflow: hidden;
      background: linear-gradient(135deg, rgba(129,140,248,0.16) 0%, rgba(52,211,153,0.16) 100%);
      border: 1px solid rgba(129,140,248,0.4);
      color: #f1f5f9; font-size: 12px; font-weight: 800; letter-spacing: 0.5px;
      box-shadow: 0 0 20px -8px rgba(129,140,248,0.6);
      transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .cal-day-add-btn::before {
      content: ''; position: absolute; inset: 0; border-radius: 10px; padding: 1px;
      background: linear-gradient(120deg, var(--brand), var(--brand2), var(--brand));
      background-size: 220% 220%;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
      animation: calAddShimmer 3.2s linear infinite;
      pointer-events: none;
    }
    .cal-day-add-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(52,211,153,0.6);
      box-shadow: 0 0 28px -4px rgba(52,211,153,0.65);
    }
    .cal-day-add-btn:active { transform: translateY(0); }
    .cal-add-icon { font-size: 12px; filter: drop-shadow(0 0 5px rgba(129,140,248,0.8)); animation: calAddPulse 1.8s ease-in-out infinite; }
    .cal-add-icon:last-child { animation-delay: 0.3s; }
    @keyframes calAddShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } }
    @keyframes calAddPulse { 0%, 100% { opacity: 0.55; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.15); } }

    /* ── ACTION CARDS (save-workout / create-plan) ── */
    .action-card {
      border-radius: 14px;
      border: 1px solid rgba(129,140,248,0.2);
      background: linear-gradient(135deg, rgba(15,23,42,0.95) 0%, rgba(30,41,59,0.9) 100%);
      box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
      overflow: hidden; margin: 8px 0;
    }
    .action-card-header {
      display: flex; justify-content: space-between; align-items: center;
      padding: 10px 14px 0;
      font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
      color: var(--brand); text-transform: uppercase;
    }
    .action-card-date { color: #64748b; font-weight: 600; }
    .action-card-body { padding: 8px 14px; }
    .action-card-title { font-size: 14px; font-weight: 800; color: #f1f5f9; margin-bottom: 4px; }
    .action-card-desc { font-size: 12px; color: #94a3b8; margin-bottom: 6px; }
    .action-card-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: #64748b; font-weight: 600; margin-top:8px; }
    /* Save-workout step list */
    .sw-step-list { margin: 8px 0 4px; display: flex; flex-direction: column; gap: 2px; }
    .sw-step { display:flex; align-items:center; gap:6px; padding:3px 0; flex-wrap:wrap; }
    .sw-step-inner { padding-left:16px; }
    .sw-step-swim-lbl { font-size:9px; color:#64748b; font-weight:700; }
    .sw-step-adv-row { padding:0 0 4px; }
    .sw-step-adv-row.sw-step-inner { padding-left:16px; }
    .sw-adv-toggle {
      background:none; border:none; color:#64748b; font-size:9.5px; font-weight:700;
      cursor:pointer; padding:1px 0; text-align:left;
    }
    .sw-adv-toggle:hover { color:#94a3b8; }
    .sw-adv-panel { display:flex; flex-direction:column; gap:4px; margin-top:4px; padding:6px 8px; background:rgba(255,255,255,0.02); border:1px dashed #334155; border-radius:6px; }
    .sw-target-block { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
    .sw-target-lbl { font-size:9px; color:#64748b; font-weight:700; min-width:88px; }
    .sw-step-desc-row { padding:0 0 5px; }
    .sw-step-desc-row.sw-step-inner { padding-left:16px; }
    .sw-step-desc-input {
      width:100%; box-sizing:border-box; background:rgba(255,255,255,0.03); border:1px dashed #334155;
      color:#94a3b8; border-radius:4px; padding:3px 7px; font-size:9.5px; font-style:italic;
      font-family:inherit; outline:none; transition:border-color 0.12s, color 0.12s;
    }
    .sw-step-desc-input::placeholder { color:#475569; }
    .sw-step-desc-input:focus { border-style:solid; border-color:#6366f1; color:#e2e8f0; }
    .sw-step-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
    .sw-step-name { font-size:11px; font-weight:700; color:#cbd5e1; min-width:68px; }
    .sw-step-dur  { font-size:11px; color:#94a3b8; font-variant-numeric:tabular-nums; }
    .sw-step-zone { font-size:10px; color:#475569; margin-left:auto; }
    .sw-repeat-group { border-left:2px solid rgba(139,92,246,0.35); margin:3px 0 3px 3px; padding-left:8px; }
    .sw-repeat-hdr { font-size:10px; font-weight:800; color:#7c3aed; letter-spacing:0.5px; margin-bottom:2px; text-transform:uppercase; display:flex; align-items:center; gap:3px; }
    .sw-name-edit { outline:none; border-bottom:1px dashed rgba(99,102,241,0.3); min-width:60px; cursor:text; }
    .sw-name-edit:focus { border-bottom-color:#6366f1; }
    .sw-desc-edit { cursor:text; }
    .sw-desc-edit:focus { outline:none; }
    .sw-date-input { background:rgba(255,255,255,0.04); border:1px solid #334155; color:#94a3b8; border-radius:4px; padding:2px 6px; font-size:11px; font-weight:600; cursor:pointer; }
    .sw-date-input:focus { outline:none; border-color:#6366f1; }
    .sw-athlete-bar {
      display: flex; align-items: center; gap: 8px;
      margin: 10px 10px 0; padding: 7px 10px;
      /* Solid-ish dark background, not a translucent tint over whatever's behind it — this bar
         gets embedded in cards with wildly different actual backgrounds (some hardcode dark
         regardless of site theme, some inherit the page's light/dark theme background), so its
         own light-colored text (#e2e8f0, used throughout this bar and its children below) needs
         a background it fully controls rather than one that varies by where it's dropped in. */
      background: linear-gradient(90deg, rgba(15,20,38,0.92), rgba(10,14,28,0.92));
      border: 1px solid rgba(129,140,248,0.45);
      border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
      border-radius: 9px;
      box-shadow: 0 0 14px -4px var(--brand-glow, rgba(129,140,248,0.35)) inset;
    }
    .sw-athlete-bar-icon { font-size: 13px; filter: drop-shadow(0 0 4px var(--brand-glow, transparent)); }
    .sw-athlete-bar-lbl {
      font-size: 9px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
      color: var(--brand); white-space: nowrap;
    }
    .sw-athlete-select-wrap { position: relative; flex: 1; min-width: 0; }
    .sw-athlete-select-fx {
      width: 100%; appearance: none; -webkit-appearance: none;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(129,140,248,0.55);
      border: 1px solid color-mix(in srgb, var(--brand) 55%, transparent);
      /* Fixed light color, not var(--text) — this sits inside cards (.plan-wizard-card, .dw-card)
         that hardcode a dark background regardless of site theme, so the theme's light-mode
         var(--text) (near-black) would be invisible against it. */
      color: #e2e8f0;
      font-size: 12px; font-weight: 700;
      padding: 5px 24px 5px 9px;
      border-radius: 6px; cursor: pointer;
      transition: box-shadow .15s ease, border-color .15s ease;
      background-image: linear-gradient(45deg, transparent 50%, var(--brand) 50%), linear-gradient(135deg, var(--brand) 50%, transparent 50%);
      background-position: calc(100% - 13px) center, calc(100% - 8px) center;
      background-size: 5px 5px, 5px 5px;
      background-repeat: no-repeat;
    }
    .sw-athlete-select-fx:hover, .sw-athlete-select-fx:focus {
      outline: none; border-color: var(--brand);
      box-shadow: 0 0 0 3px var(--brand-glow, rgba(129,140,248,0.25));
    }
    .sw-athlete-select-fx option { background: #0f172a; color: #e2e8f0; font-weight: 600; }
    .sw-athlete-check-wrap {
      display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px 10px;
      max-height: 180px; overflow-y: auto;
      /* Solid dark background of its own, not inherited — used inside .cpw-section (no background
         at all, just inherits whatever's behind it) as well as .sw-athlete-bar, so it can't rely
         on a parent to supply the dark surface its light, fixed-color text needs. */
      background: rgba(10,14,28,0.9); border-radius: 6px; padding: 6px;
    }
    .sw-athlete-check {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 12px; font-weight: 600; color: #e2e8f0; /* fixed light — see note above */
      cursor: pointer; white-space: nowrap;
    }
    .sw-athlete-check input { accent-color: var(--brand); cursor: pointer; margin: 0; }
    .sw-athlete-search {
      width: 100%; box-sizing: border-box; background: rgba(10,14,28,0.9);
      border: 1px solid rgba(129,140,248,0.4); border-radius: 6px;
      color: #e2e8f0; font-size: 12px; padding: 6px 9px; margin-bottom: 6px;
    }
    .sw-athlete-search::placeholder { color: #64748b; }
    .sw-athlete-search:focus { outline: none; border-color: var(--brand); }
    .sw-athlete-none { font-size: 11px; color: #64748b; padding: 4px 2px; }
    .sw-edit-input { background:rgba(255,255,255,0.04); border:1px solid #334155; color:#cbd5e1; border-radius:3px; padding:1px 4px; font-size:10px; text-align:center; width:44px; -moz-appearance:textfield; }
    .sw-edit-input::-webkit-outer-spin-button,.sw-edit-input::-webkit-inner-spin-button { -webkit-appearance:none; }
    .sw-edit-input:focus { outline:none; border-color:#6366f1; }
    .sw-edit-select { background:rgba(255,255,255,0.04); border:1px solid #334155; color:#94a3b8; border-radius:3px; padding:1px 3px; font-size:10px; cursor:pointer; }
    .sw-edit-select:focus { outline:none; border-color:#6366f1; }
    .sw-step-strength { flex-wrap: wrap; row-gap: 4px; }
    .sw-ex-name { width: 100%; text-align: left; flex-basis: 100%; order: 5; }
    .sw-ex-num { width: 40px !important; }
    .sw-ex-lbl { font-size: 9px; color: #64748b; }
    .sw-ex-wunit { width: 44px; }
    .sw-repeat-count-input { background:rgba(255,255,255,0.06); border:1px solid rgba(139,92,246,0.4); color:#a78bfa; border-radius:3px; padding:1px 4px; font-size:10px; width:28px; text-align:center; -moz-appearance:textfield; font-weight:800; }
    .sw-repeat-count-input::-webkit-outer-spin-button,.sw-repeat-count-input::-webkit-inner-spin-button { -webkit-appearance:none; }
    .sw-btn-rand { background:rgba(99,102,241,0.1); border:1px solid rgba(99,102,241,0.25); color:#818cf8; border-radius:6px; padding:6px 12px; font-size:11px; font-weight:700; cursor:pointer; transition:all 0.15s; }
    .sw-btn-rand:hover { background:rgba(99,102,241,0.2); color:#a5b4fc; }
    .sw-sport-switch { display:flex; gap:3px; }
    .sw-sport-switch button { background:rgba(255,255,255,0.03); border:1px solid #334155; border-radius:5px; padding:2px 6px; font-size:12px; line-height:1.3; cursor:pointer; opacity:0.45; transition:all 0.12s; }
    .sw-sport-switch button:hover { opacity:0.8; }
    .sw-sport-switch button.active { opacity:1; border-color:var(--brand); background:rgba(99,102,241,0.15); }
    .sw-step-tools { display:flex; align-items:center; gap:2px; margin-left:auto; flex-shrink:0; }
    .sw-step-tool-btn {
      background:rgba(255,255,255,0.03); border:1px solid #334155; color:#64748b;
      border-radius:3px; width:17px; height:17px; line-height:1; font-size:9px; padding:0;
      display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
    }
    .sw-step-tool-btn:hover:not(:disabled) { background:rgba(255,255,255,0.08); color:#cbd5e1; border-color:#475569; }
    .sw-step-tool-btn:disabled { opacity:0.25; cursor:default; }
    .sw-step-tool-del:hover:not(:disabled) { background:rgba(239,68,68,0.15); color:#f87171; border-color:rgba(239,68,68,0.35); }
    .sw-add-row { display:flex; gap:6px; margin-top:6px; }
    .sw-add-btn {
      flex:1; background:rgba(255,255,255,0.02); border:1px dashed #334155; color:#94a3b8;
      border-radius:6px; padding:5px 10px; font-size:10.5px; font-weight:700; cursor:pointer;
    }
    .sw-add-btn:hover { background:rgba(99,102,241,0.08); border-color:#6366f1; color:#a5b4fc; }
    .sw-add-btn-inner { width:100%; margin:2px 0 4px; font-size:9.5px; padding:3px 8px; }
    .sw-plan-laps { margin:8px 0 0; }
    .sw-plan-lap-hdr { font-size:9px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:#475569; margin-bottom:5px; }
    .action-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
    .action-grid-full { grid-column: span 2; }
    .action-label { font-size: 10px; color: #64748b; display: block; letter-spacing: 0.5px; text-transform: uppercase; }
    .action-value { font-size: 13px; color: #e2e8f0; font-weight: 700; }
    .action-input {
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px;
      color: #e2e8f0; font-size: 13px; font-weight: 700; padding: 4px 7px; width: 100%;
      box-sizing: border-box; font-family: inherit;
    }
    .action-input:focus { outline: none; border-color: var(--brand); }
    .cp-days-wrap { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
    .action-card-footer {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px 12px;
      border-top: 1px solid rgba(255,255,255,0.05);
    }
    .action-btn {
      background: var(--brand); color: #fff; border: none; border-radius: 8px;
      padding: 8px 16px; font-size: 12px; font-weight: 700;
      cursor: pointer; transition: opacity 0.15s, transform 0.1s;
    }
    .action-btn:hover { opacity: 0.85; transform: translateY(-1px); }
    .action-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
    .action-btn-primary { background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%); }
    .action-btn-success { background: #34d399 !important; }
    .action-status { font-size: 11px; color: #64748b; }
    .create-plan-card { border-color: rgba(52,211,153,0.2); }
    .create-plan-card .action-card-header { color: var(--brand2); }

    /* ── WORKOUT STRUCTURE GRAPH ── */
    .workout-graph { margin: 8px 0 4px; }
    .wg-title { font-size: 9px; color: #475569; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; margin-bottom: 5px; }
    .wg-bar { display: flex; height: 52px; border-radius: 8px; overflow: hidden; gap: 2px; }
    .wg-seg { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
              min-width: 28px; cursor: default; transition: filter 0.15s, transform 0.15s; }
    .wg-seg:hover { filter: brightness(1.25); transform: scaleY(1.04); }
    .wg-seg-label { font-size: 8px; font-weight: 800; color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 0.4px; line-height: 1; }
    .wg-seg-time  { font-size: 11px; font-weight: 900; color: #fff; line-height: 1.2; }
    .wg-legend { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 5px; }
    .wg-leg-item { display: flex; align-items: center; gap: 4px; font-size: 9px; color: #64748b; font-weight: 600; }
    .wg-leg-dot  { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }

    /* ── WORKOUT BUILDER WIZARD ── */
    .wb-card { border-color: rgba(99,102,241,0.35) !important; }
    .pw-sport-card[data-sport="RUNNING"]      { --sc:#f97316; }
    .pw-sport-card[data-sport="CYCLING"]      { --sc:#facc15; }
    .pw-sport-card[data-sport="LAP_SWIMMING"] { --sc:#22d3ee; }
    .pw-sport-card[data-sport="STRENGTH"]     { --sc:#a78bfa; }
    .wb-step-list { display:flex; flex-direction:column; gap:5px; margin-bottom:8px; min-height:10px; }
    .wb-step-item {
      border-radius:9px; overflow:hidden;
      background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07);
      animation: wbStepIn 0.2s ease;
    }
    @keyframes wbStepIn { from{opacity:0;transform:translateX(-6px)} to{opacity:1;transform:none} }
    .wb-step-collapsed {
      display:flex; align-items:center; gap:8px; padding:8px 10px; cursor:pointer;
      transition:background 0.12s;
    }
    .wb-step-collapsed:hover { background:rgba(255,255,255,0.04); }
    .wb-badge-wrap { border-radius:6px; overflow:hidden; flex-shrink:0; transition:background 0.2s; }
    .wb-badge-int { display:block; padding:4px 9px; font-size:10px; font-weight:800; color:#fff; text-transform:uppercase; letter-spacing:0.5px; white-space:nowrap; }
    .wb-step-dur-disp { font-size:13px; font-weight:700; color:#e2e8f0; flex-shrink:0; min-width:46px; }
    .wb-zone-pill { font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; letter-spacing:0.3px; white-space:nowrap; flex:1; text-align:right; }
    .wb-step-chevron { font-size:16px; color:#475569; transition:transform 0.15s,color 0.15s; flex-shrink:0; font-weight:300; line-height:1; user-select:none; }
    .wb-step-del {
      background:none; border:1px solid rgba(239,68,68,0.25);
      border-radius:6px; color:#f87171; padding:3px 8px; font-size:11px;
      cursor:pointer; flex-shrink:0; transition:background 0.1s,border-color 0.1s;
    }
    .wb-step-del:hover { background:rgba(239,68,68,0.15); border-color:rgba(239,68,68,0.55); }
    .wb-step-detail { padding:10px 10px 12px; border-top:1px solid rgba(255,255,255,0.06); background:rgba(0,0,0,0.18); }
    .wb-expand-grid { display:flex; flex-wrap:wrap; gap:8px; }
    .wb-expand-field { display:flex; flex-direction:column; gap:3px; flex:1; min-width:110px; }
    .wb-expand-full { flex:100%; }
    .wb-expand-lbl { font-size:9px; font-weight:700; color:#475569; text-transform:uppercase; letter-spacing:0.5px; }
    .wb-step-int {
      background:transparent; border:none; color:#fff; font-size:10px; font-weight:800;
      cursor:pointer; outline:none; padding:4px 7px; letter-spacing:0.4px; text-transform:uppercase; border-radius:6px;
    }
    .wb-step-int option { background:#1e293b; color:#e2e8f0; font-weight:600; }
    .wb-dur-wrap { display:flex; gap:5px; }
    .wb-step-dur {
      width:54px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12);
      border-radius:6px; color:#e2e8f0; padding:4px 7px; font-size:13px; font-weight:700;
      text-align:center; outline:none; -moz-appearance:textfield;
    }
    .wb-step-dur::-webkit-inner-spin-button,.wb-step-dur::-webkit-outer-spin-button { display:none; }
    .wb-step-dur:focus { border-color:var(--brand); }
    .wb-step-unit,.wb-zone-sel {
      background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
      border-radius:6px; color:#94a3b8; padding:4px 6px; font-size:11px; cursor:pointer; outline:none;
    }
    .wb-zone-sel { width:100%; }
    .wb-step-unit option,.wb-zone-sel option { background:#1e293b; }
    .wb-add-row {
      display:flex; align-items:center; gap:7px; padding:8px 0 4px;
      border-top:1px solid rgba(255,255,255,0.05); flex-wrap:wrap;
    }
    .wb-add-int {
      background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12);
      border-radius:7px; color:#e2e8f0; padding:6px 8px; font-size:12px; cursor:pointer; outline:none;
    }
    .wb-add-int option { background:#1e293b; }
    .wb-add-btn {
      background:rgba(99,102,241,0.14); border:1px solid rgba(99,102,241,0.38);
      border-radius:7px; color:var(--brand); padding:6px 13px; font-size:12px; font-weight:700;
      cursor:pointer; transition:background 0.12s; white-space:nowrap;
    }
    .wb-add-btn:hover { background:rgba(99,102,241,0.28); }
    .wb-total-row { font-size:11px; color:#475569; margin-top:6px; font-weight:600; }
    .wb-total-row strong { color:#94a3b8; }
    .wb-live-graph { margin-bottom:6px; }
    .wb-sport-graph { margin-bottom:8px; }
    .wb-sg-header { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
    .wb-sg-icon { font-size:15px; }
    .wb-sg-sport { font-size:10px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:0.6px; flex:1; }
    .wb-sg-time { font-size:11px; font-weight:800; color:#94a3b8; }
    .wb-sg-svg { width:100%; display:block; border-radius:8px; overflow:visible; }
    .wb-steps-toggle {
      width:100%; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
      border-radius:8px; color:#64748b; padding:7px 12px; font-size:11px; font-weight:700;
      cursor:pointer; margin:4px 0 6px; text-align:center; transition:all 0.12s; letter-spacing:0.3px;
      display:block;
    }
    .wb-steps-toggle:hover { background:rgba(99,102,241,0.1); border-color:rgba(99,102,241,0.3); color:var(--brand); }
    .wb-rest-step { display:flex; align-items:center; gap:7px; padding:3px 10px 3px 14px; margin:1px 0; }
    .wb-rest-dot { width:5px; height:5px; border-radius:50%; background:#334155; flex-shrink:0; }
    .wb-rest-label { font-size:10px; color:#475569; flex:1; font-style:italic; letter-spacing:0.2px; }
    .wb-repeat-item .wb-step-collapsed { display:flex; align-items:center; gap:7px; }
    .wb-reps-ctrl { display:flex; align-items:center; gap:4px; margin-left:4px; }
    .wb-reps-btn { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:4px; color:#64748b; padding:1px 7px; font-size:13px; font-weight:700; cursor:pointer; line-height:1.3; }
    .wb-reps-btn:hover { background:rgba(99,102,241,0.2); color:var(--brand); border-color:rgba(99,102,241,0.35); }
    .wb-reps-num { font-size:11px; font-weight:800; color:#94a3b8; min-width:18px; text-align:center; }
    .wb-empty { font-size:12px; color:#334155; text-align:center; padding:12px 0; font-style:italic; }
    .wb-save-btn {
      background:linear-gradient(135deg,var(--brand) 0%,var(--brand2) 100%);
      color:#fff; border:none; border-radius:9px; padding:10px 22px;
      font-size:13px; font-weight:800; cursor:pointer; transition:opacity 0.15s,transform 0.1s;
      white-space:nowrap; width:100%; margin-top:6px;
    }
    .wb-save-btn:hover { opacity:0.88; transform:translateY(-1px); }
    .wb-save-btn:disabled { opacity:0.45; cursor:default; transform:none; }
    .wb-save-status { font-size:11px; color:#64748b; margin-top:6px; }
    .wb-rand-btn {
      background:rgba(251,191,36,0.1); border:1px solid rgba(251,191,36,0.3);
      border-radius:7px; color:var(--gold); padding:7px 13px; font-size:12px; font-weight:700;
      cursor:pointer; transition:background 0.12s,transform 0.1s;
    }
    .wb-rand-btn:hover { background:rgba(251,191,36,0.22); transform:rotate(-8deg) scale(1.06); }
    .wb-target-bar { display:flex; align-items:center; gap:8px; margin-bottom:8px; padding:7px 10px; background:rgba(99,102,241,0.08); border:1px solid rgba(99,102,241,0.22); border-radius:8px; }
    .wb-tgt-lbl { font-size:9px; font-weight:700; color:#818cf8; text-transform:uppercase; letter-spacing:0.5px; flex-shrink:0; }
    .wb-tgt-val { font-size:15px; font-weight:900; color:#e2e8f0; flex:1; }
    .wb-tgt-edit-btn { background:none; border:1px solid rgba(99,102,241,0.35); border-radius:5px; color:#818cf8; padding:2px 9px; font-size:10px; font-weight:700; cursor:pointer; transition:background 0.1s; }
    .wb-tgt-edit-btn:hover { background:rgba(99,102,241,0.2); }
    .wb-tgt-inp-row { display:flex; align-items:center; gap:7px; margin-bottom:8px; padding:7px 10px; background:rgba(99,102,241,0.06); border:1px solid rgba(99,102,241,0.2); border-radius:8px; flex-wrap:wrap; }
    .wb-zone-sum {
      background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.06);
      border-radius:8px; padding:8px 10px; margin-bottom:8px;
    }
    .wb-zone-sum-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
    .wb-zsm-ttl { font-size:9px; font-weight:700; color:#475569; text-transform:uppercase; letter-spacing:0.5px; }
    .wb-zsm-val { font-size:15px; font-weight:900; color:#e2e8f0; }
    .wb-zone-sum-grid { display:flex; flex-wrap:wrap; gap:5px; }
    .wb-zstat { display:flex; align-items:center; gap:5px; background:rgba(255,255,255,0.03); border-radius:6px; padding:4px 8px; }
    .wb-zstat-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
    .wb-zstat-text { display:flex; align-items:center; gap:5px; }
    .wb-zstat-lbl { font-size:10px; color:#64748b; font-weight:600; }
    .wb-zstat-val { font-size:11px; color:#94a3b8; font-weight:800; }

    /* ── WEEKLY TRAINING CARDS ── */
    .week-training-wrap { margin: 10px 0; }
    .week-training-header {
      display: flex; justify-content: space-between; align-items: center;
      padding: 11px 14px;
      background: linear-gradient(135deg, rgba(10,18,36,0.98) 0%, rgba(20,30,50,0.98) 100%);
      border: 1px solid rgba(129,140,248,0.28); border-radius: 12px 12px 0 0; border-bottom: none;
    }
    .week-training-title { font-size: 11px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--brand); }
    .week-training-stats { display: flex; gap: 14px; }
    .week-stat { display: flex; flex-direction: column; align-items: flex-end; }
    .week-stat-val { font-size: 13px; font-weight: 800; color: #e2e8f0; }
    .week-stat-lbl { font-size: 9px; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }
    .week-workouts-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 1px;
      background: rgba(129,140,248,0.1);
      border: 1px solid rgba(129,140,248,0.2); border-top: none; border-radius: 0 0 12px 12px; overflow: hidden;
    }
    .week-wo-card {
      background: linear-gradient(160deg, rgba(13,20,40,0.99) 0%, rgba(18,28,48,0.99) 100%);
      padding: 11px 12px 10px; position: relative; overflow: hidden; transition: background 0.15s;
    }
    .week-wo-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: var(--wc,var(--brand)); box-shadow: 0 0 10px var(--wc,var(--brand));
    }
    .week-wo-card:hover { background: linear-gradient(160deg, rgba(18,28,52,0.99) 0%, rgba(22,34,58,0.99) 100%); }
    .week-wo-day { font-size: 9px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--wc,var(--brand)); margin-bottom: 5px; }
    .week-wo-sport-row { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
    .week-wo-icon { font-size: 18px; line-height: 1; }
    .week-wo-name { font-size: 12px; font-weight: 800; color: #f1f5f9; line-height: 1.25; }
    .week-wo-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
    .week-wo-pill {
      font-size: 10px; font-weight: 700; color: var(--wc,var(--brand));
      background: rgba(0,0,0,0.35); padding: 2px 7px; border-radius: 20px;
      border: 1px solid color-mix(in srgb, var(--wc,var(--brand)) 30%, transparent);
    }
    .week-wo-desc { font-size: 10px; color: #64748b; margin-top: 5px; line-height: 1.35; }

    /* ── COACH ATHLETE WEEK CARDS ── */
    .coach-week-wrap { margin: 10px 0; }
    .coach-week-header {
      padding: 11px 14px; font-size: 11px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--brand2);
      background: linear-gradient(135deg, rgba(10,18,36,0.98) 0%, rgba(16,28,46,0.98) 100%);
      border: 1px solid rgba(52,211,153,0.28); border-radius: 12px 12px 0 0; border-bottom: 1px solid rgba(52,211,153,0.1);
    }
    .coach-athletes-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1px;
      background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.2);
      border-top: none; border-radius: 0 0 12px 12px; overflow: hidden;
    }
    .coach-athlete-card {
      background: linear-gradient(160deg, rgba(13,20,40,0.99) 0%, rgba(16,26,44,0.99) 100%);
      padding: 11px 12px 10px;
    }
    .coach-athlete-name {
      font-size: 12px; font-weight: 800; color: #f1f5f9; margin-bottom: 7px;
      display: flex; justify-content: space-between; align-items: center;
    }
    .coach-athlete-badge { font-size: 9px; font-weight: 700; color: var(--brand2); background: rgba(52,211,153,0.12); padding: 2px 7px; border-radius: 20px; }
    .coach-athlete-wo-list { display: flex; flex-direction: column; gap: 2px; }
    .coach-athlete-wo-row {
      display: flex; align-items: center; gap: 7px; font-size: 10px; padding: 3px 0;
      border-bottom: 1px solid rgba(255,255,255,0.03);
    }
    .coach-athlete-wo-row:last-child { border-bottom: none; }
    .coach-wo-sport-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--wc,#64748b); box-shadow: 0 0 5px var(--wc,#64748b); }
    .coach-wo-day { color: #64748b; font-weight: 700; min-width: 26px; }
    .coach-wo-name { color: #cbd5e1; flex: 1; }
    .coach-wo-dur { color: #64748b; font-weight: 700; }
    .coach-athlete-totals {
      margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,0.05);
      display: flex; gap: 14px;
    }
    .coach-total-item { display: flex; flex-direction: column; }
    .coach-total-val { font-size: 13px; font-weight: 800; color: var(--brand2); }
    .coach-total-lbl { font-size: 9px; color: #64748b; text-transform: uppercase; letter-spacing: 0.4px; }

    /* ── PLAN WIZARD CARD ── */
    .plan-wizard-card {
      border-radius: 14px; border: 1px solid rgba(52,211,153,0.25);
      background: linear-gradient(135deg, rgba(10,18,36,0.98) 0%, rgba(15,28,48,0.98) 100%);
      box-shadow: 0 4px 28px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
      overflow: hidden; margin: 8px 0;
    }
    .pw-hdr {
      padding: 12px 16px 11px; font-size: 13px; font-weight: 800; color: var(--brand2);
      border-bottom: 1px solid rgba(255,255,255,0.05); letter-spacing: 0.2px;
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
    }
    .cw-hdr-btns { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
    .cw-restart-btn {
      font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; color: var(--muted);
      background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 100px; padding: 4px 10px; cursor: pointer; transition: color 0.12s, border-color 0.12s;
    }
    .cw-restart-btn:hover { color: var(--text); border-color: rgba(255,255,255,0.25); }
    .cw-restart-btn:disabled { opacity: 0.35; cursor: not-allowed; }
    .cw-restart-btn:disabled:hover { color: var(--muted); border-color: rgba(255,255,255,0.1); }
    .pw-row { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.04); }
    .pw-row.done { padding: 8px 16px; }
    .pw-label { font-size: 11px; font-weight: 700; color: #64748b; margin-bottom: 9px; text-transform: uppercase; letter-spacing: 0.5px; }
    .pw-chips { display: flex; flex-wrap: wrap; gap: 7px; }
    .pw-chips-col { flex-direction: column; align-items: flex-start; }
    .pw-sport-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    @media (max-width: 420px) { .pw-sport-grid { grid-template-columns: repeat(2, 1fr); } }
    .pw-sport-card {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 6px; padding: 14px 8px 12px;
      background: rgba(255,255,255,0.04); border-radius: 12px;
      border: 1.5px solid rgba(255,255,255,0.08);
      cursor: pointer; transition: transform 0.14s, border-color 0.14s, background 0.14s, box-shadow 0.14s;
      text-align: center; user-select: none;
    }
    .pw-sport-card:hover { transform: translateY(-2px); }
    .pw-sport-card .psc-icon { font-size: 28px; line-height: 1; }
    .pw-sport-card .psc-name { font-size: 11px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; }
    .pw-sport-card[data-sport="triathlon"]    { --sc:#34d399; }
    .pw-sport-card[data-sport="running"]      { --sc:#f97316; }
    .pw-sport-card[data-sport="cycling"]      { --sc:#facc15; }
    .pw-sport-card[data-sport="swimming"]     { --sc:#22d3ee; }
    .pw-sport-card[data-sport="weightlifting"]{ --sc:#a78bfa; }
    .pw-sport-card[data-sport="custom"]       { --sc:#f472b6; }
    .pw-sport-card[data-sport="trail_running"]{ --sc:#f97316; }
    .pw-sport-card[data-sport="road_cycling"] { --sc:#facc15; }
    .pw-sport-card[data-sport="gravel_cycling"]{ --sc:#eab308; }
    .pw-sport-card[data-sport="mountain_biking"]{ --sc:#84cc16; }
    .pw-sport-card[data-sport="hiking"]       { --sc:#34d399; }
    .pw-sport-card[data-sport="other"]        { --sc:#94a3b8; }

    /* ── COURSE WIZARD — start/end point picker ── */
    .cw-point-inputs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
    .cw-point-row { display: flex; align-items: center; gap: 8px; }
    .cw-point-row .pw-name-input { flex: 1; }
    .cw-point-arm {
      flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; font-size: 15px;
      background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.1);
      cursor: pointer; opacity: 0.55; transition: opacity 0.12s, border-color 0.12s, background 0.12s;
    }
    .cw-point-arm.active { opacity: 1; border-color: var(--brand); background: var(--b1-14); }
    .cw-prev-wrap:empty { display: none; }
    .cw-prev-wrap { margin-bottom: 10px; }
    .cw-route-summary:empty { display: none; }
    .cw-summary-tiles { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
    .cw-summary-tile {
      flex: 1 1 70px; text-align: center; background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 10px 6px;
    }
    .cw-summary-tile .cst-val { display: block; font-size: 16px; font-weight: 800; color: var(--text); }
    .cw-summary-tile .cst-lbl { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); margin-top: 2px; }

    /* ── COURSE WIZARD — address autocomplete ── */
    .cw-suggest-wrap { position: relative; flex: 1; }
    .cw-suggest-list {
      display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
      background: #131a2e; border: 1px solid rgba(255,255,255,0.12); border-radius: 9px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4); max-height: 200px; overflow-y: auto;
    }
    body.light .cw-suggest-list { background: #fff; border-color: var(--border); }
    .cw-suggest-item {
      padding: 8px 12px; font-size: 12.5px; color: var(--text); cursor: pointer;
      border-bottom: 1px solid rgba(255,255,255,0.05); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .cw-suggest-item:last-child { border-bottom: none; }
    .cw-suggest-item:hover { background: var(--b1-10); }

    /* ── COURSE WIZARD — waypoints + loop ── */
    .cw-loop-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; margin-left: 4px; white-space: nowrap; }
    .cw-loop-label input { accent-color: var(--brand); cursor: pointer; }
    .cw-waypoint-list:empty { display: none; }
    .cw-waypoint-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
    .cw-wp-chip {
      display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 6px 10px;
      font-size: 12px; color: var(--text);
    }
    .cw-wp-chip-num {
      flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: #fbbf24; color: #1c1400;
      font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center;
    }
    .cw-wp-chip { position: relative; }
    .cw-wp-chip button {
      margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer;
      font-size: 12px; padding: 2px 4px; flex-shrink: 0;
    }
    .cw-wp-chip button:hover { color: var(--error, #f87171); }
    .cw-wp-pin {
      width: 22px; height: 22px; border-radius: 50%; background: #fbbf24; color: #1c1400;
      font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
      border: 2px solid #fff; box-shadow: 0 0 6px rgba(0,0,0,0.4);
    }

    /* ── COURSE WIZARD — persistent Create Course button ── */
    .cw-create-footer { padding: 14px 16px 16px; border-top: 1px solid rgba(255,255,255,0.05); }
    .cw-create-btn {
      width: 100%; padding: 15px; border-radius: 12px; border: none; cursor: pointer;
      background: linear-gradient(135deg, #22d3ee, #7c3aed); color: #0b1020;
      font-size: 15px; font-weight: 800; letter-spacing: 0.2px;
      box-shadow: 0 0 20px rgba(34,211,238,0.25); transition: transform 0.12s, opacity 0.12s;
    }
    .cw-create-btn:hover:not(:disabled) { transform: translateY(-1px); }
    .cw-create-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
    .cw-create-btn.pw-gen-success { background: #34d399; }
    .cw-create-status { font-size: 12px; margin-top: 10px; text-align: center; }
    .cw-create-status:empty { display: none; }
    .pw-day-label.pw-custom-selected { background: color-mix(in srgb, var(--brand,#818cf8) 18%, transparent); border-color: color-mix(in srgb, var(--brand,#818cf8) 55%, transparent); color: #fff; }
    .pw-sport-card { color: var(--sc, #94a3b8); border-color: color-mix(in srgb, var(--sc,#94a3b8) 20%, transparent); }
    .pw-sport-card:hover { background: color-mix(in srgb, var(--sc,#94a3b8) 12%, transparent); border-color: color-mix(in srgb, var(--sc,#94a3b8) 60%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--sc,#94a3b8) 22%, transparent); }
    .pw-chip {
      background: rgba(129,140,248,0.1); color: #a5b4fc;
      border: 1px solid rgba(129,140,248,0.28); border-radius: 9px;
      padding: 7px 13px; font-size: 12px; font-weight: 700;
      cursor: pointer; transition: background 0.12s, border-color 0.12s, transform 0.1s;
    }
    .pw-chip:hover { background: rgba(129,140,248,0.2); border-color: rgba(129,140,248,0.55); transform: translateY(-1px); }
    .pw-chip-lg { padding: 10px 20px; font-size: 13px; }
    .pw-days-wrap { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
    .pw-day-label {
      display: flex; align-items: center; gap: 6px; user-select: none;
      background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
      border-radius: 8px; padding: 7px 11px; font-size: 12px; font-weight: 600;
      color: #94a3b8; cursor: pointer; transition: background 0.12s, border-color 0.12s;
    }
    .pw-day-label:hover { background: rgba(255,255,255,0.08); }
    .pw-day-label input[type=checkbox] { accent-color: var(--brand); cursor: pointer; }
    .pw-days-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
    .pw-none-hint { font-size: 11px; color: #475569; }
    .pw-next-btn {
      background: var(--brand); color: #fff; border: none; border-radius: 8px;
      padding: 8px 18px; font-size: 12px; font-weight: 700; cursor: pointer;
      transition: opacity 0.12s;
    }
    .pw-next-btn:hover { opacity: 0.84; }
    .pw-date-wrap { display: flex; flex-direction: column; gap: 10px; }
    .pw-date-row, .pw-end-row { display: flex; align-items: center; gap: 12px; }
    .pw-date-lbl, .pw-end-label { font-size: 11px; color: #475569; font-weight: 600; width: 72px; }
    .pw-date-input {
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
      border-radius: 8px; color: #e2e8f0; padding: 7px 11px; font-size: 13px;
      font-family: inherit; color-scheme: dark; outline: none;
    }
    .pw-date-input:focus { border-color: rgba(129,140,248,0.5); }
    .pw-end-date { font-size: 15px; font-weight: 800; color: var(--brand2); }
    .pw-name-wrap { display:flex; gap:8px; align-items:center; }
    /* Fixed light text, not var(--text) — .plan-wizard-card keeps a hardcoded dark background in
       every theme (see above), so in light mode var(--text) flips to near-black and the typed
       text becomes invisible against this card's always-dark input. */
    .pw-name-input { flex:1; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.15); border-radius:8px; color:#e2e8f0; padding:8px 12px; font-size:14px; outline:none; }
    .pw-name-input:focus { border-color:var(--brand); }
    /* Fixed light text, not var(--text) — same always-dark-card issue as .pw-name-input above. */
    .pw-save-chip { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.18); border-radius:20px; color:#e2e8f0; padding:8px 18px; font-size:13px; font-weight:700; cursor:pointer; transition:background 0.15s,border-color 0.15s; white-space:nowrap; }
    .pw-save-chip:hover { background:rgba(129,140,248,0.2); border-color:var(--brand); }
    .pw-edit-btn { background:none; border:1px solid rgba(255,255,255,0.18); border-radius:6px; color:#94a3b8; padding:2px 9px; font-size:11px; font-weight:600; cursor:pointer; margin-left:auto; flex-shrink:0; transition:border-color 0.15s,color 0.15s; }
    .pw-edit-btn:hover { border-color:var(--brand); color:var(--brand); }
    .pw-gen-btn {
      align-self: flex-start; background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%);
      color: #fff; border: none; border-radius: 10px;
      padding: 11px 24px; font-size: 13px; font-weight: 800;
      cursor: pointer; transition: opacity 0.15s, transform 0.1s;
    }
    .pw-gen-btn:hover { opacity: 0.88; transform: translateY(-1px); }
    .pw-gen-btn:disabled { opacity: 0.45; cursor: default; transform: none; }
    .pw-gen-success { background: #34d399 !important; }
    .pw-gen-status { font-size: 11px; color: #64748b; margin-top: 2px; }
    /* ── PLAN GENERATION PROGRESS BAR ── */
    .pw-prog-wrap { margin-top: 8px; }
    .pw-prog-track { height: 5px; background: rgba(100,116,139,0.15); border-radius: 3px; overflow: hidden; }
    .pw-prog-fill { height: 100%; background: linear-gradient(90deg,#6366f1,#34d399); border-radius: 3px; width: 0%; transition: width 1.2s linear; }
    .pw-prog-row { display: flex; align-items: center; gap: 7px; margin-top: 6px; }
    .pw-prog-dot { width: 6px; height: 6px; border-radius: 50%; background: #6366f1; flex-shrink: 0; animation: pwDotPulse 1.3s ease-in-out infinite; }
    .pw-prog-msg { font-size: 11px; color: #64748b; }
    .pw-prog-pct { font-size: 10px; color: #94a3b8; margin-left: auto; }
    @keyframes pwDotPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.35;transform:scale(0.65)} }
    .pw-done-row { display: flex; align-items: center; gap: 10px; }
    .pw-done-label { font-size: 10px; color: #334155; font-weight: 700; width: 110px; text-transform: uppercase; letter-spacing: 0.5px; }
    /* ── MANAGE PLAN CARD ── */
    .manage-plan-card { background: linear-gradient(135deg, rgba(129,140,248,0.06) 0%, rgba(52,211,153,0.04) 100%); border: 1px solid rgba(129,140,248,0.18); border-radius: 14px; padding: 18px; margin: 8px 0; }
    .mp-hdr { font-size: 15px; font-weight: 800; color: var(--brand); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
    .mp-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
    .mp-tab { flex: 1; padding: 8px; border-radius: 8px; border: 1px solid rgba(129,140,248,0.25); background: transparent; color: #94a3b8; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
    .mp-tab.active { background: rgba(129,140,248,0.15); color: var(--brand); border-color: var(--brand); }
    .mp-panel { display: flex; flex-direction: column; gap: 10px; }
    .mp-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .mp-lbl { font-size: 11px; color: #475569; font-weight: 600; width: 90px; text-transform: uppercase; letter-spacing: 0.4px; flex-shrink: 0; }
    .mp-date { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; color: #e2e8f0; padding: 7px 11px; font-size: 13px; font-family: inherit; color-scheme: dark; outline: none; }
    .mp-date:focus { border-color: rgba(129,140,248,0.5); }
    .mp-info { font-size: 12px; color: #64748b; min-height: 18px; }
    .mp-btn { width: 100%; padding: 11px; border-radius: 10px; border: none; font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity 0.15s, transform 0.1s; color: #fff; margin-top: 4px; }
    .mp-btn:disabled { opacity: 0.45; cursor: default; transform: none !important; }
    .mp-btn-delete { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); }
    .mp-btn-move   { background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%); }
    .mp-btn:hover:not(:disabled) { opacity: 0.87; transform: translateY(-1px); }
    .mp-status { font-size: 12px; color: #64748b; }
    .mp-plans-lbl { font-size: 9px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--brand); margin-bottom: 6px; }
    .mp-plans-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
    .mp-plans-loading { font-size: 11px; color: #64748b; padding: 6px 2px; }
    .mp-plan-row {
      display: flex; align-items: center; gap: 10px; padding: 9px 11px;
      background: rgba(129,140,248,0.06); border: 1px solid rgba(129,140,248,0.22);
      border-radius: 8px; transition: opacity 0.2s;
    }
    .mp-plan-mid { flex: 1; min-width: 0; }
    .mp-plan-name { font-size: 12px; font-weight: 700; color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mp-plan-meta { font-size: 10px; color: #64748b; margin-top: 2px; }
    .mp-plan-del-btn {
      flex-shrink: 0; font-size: 10px; font-weight: 700; color: #ef4444;
      background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.4);
      border-radius: 6px; padding: 5px 10px; cursor: pointer; transition: background 0.15s;
    }
    .mp-plan-del-btn:hover:not(:disabled) { background: rgba(239,68,68,0.2); }
    .mp-plan-del-btn:disabled { opacity: 0.5; cursor: default; }
    .mp-or-divider { font-size: 9px; color: #475569; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; margin: 4px 0 10px; position: relative; }
    .mp-danger-zone { margin-top: 14px; padding: 10px; border: 1px dashed rgba(239,68,68,0.4); border-radius: 10px; }
    .mp-danger-lbl { font-size: 9px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: #ef4444; margin-bottom: 6px; }
    .mp-btn-delete-all { background: transparent; border: 1px solid #ef4444; color: #ef4444; }
    .mp-btn-delete-all:hover:not(:disabled) { background: rgba(239,68,68,0.12); opacity: 1; }

    /* ── DELETE SINGLE WORKOUT CARD ── */
    .dw-card {
      max-width: 460px; border-radius: 14px; overflow: hidden;
      border: 1px solid rgba(129,140,248,0.28);
      box-shadow: 0 0 24px -8px var(--brand-glow, rgba(129,140,248,0.35));
      margin: 6px 0;
    }
    .dw-hdr {
      display: flex; align-items: center; gap: 8px; padding: 12px 14px;
      background: linear-gradient(135deg, rgba(10,18,36,0.98) 0%, rgba(20,30,50,0.98) 100%);
      border-bottom: 1px solid rgba(129,140,248,0.22);
      font-size: 12px; font-weight: 800; letter-spacing: 0.4px; color: var(--brand);
    }
    .dw-hdr-icon { font-size: 14px; }
    .dw-nav {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      padding: 8px 12px; background: rgba(129,140,248,0.05);
      border-bottom: 1px solid rgba(129,140,248,0.15);
    }
    .dw-nav-btn {
      font-size: 10px; font-weight: 700; color: var(--brand);
      background: rgba(129,140,248,0.1); border: 1px solid rgba(129,140,248,0.35);
      border-radius: 6px; padding: 5px 9px; cursor: pointer; white-space: nowrap;
      transition: background 0.15s;
    }
    .dw-nav-btn:hover { background: rgba(129,140,248,0.22); }
    .dw-nav-lbl { font-size: 10px; font-weight: 700; color: #94a3b8; text-align: center; flex: 1; }
    .dw-body {
      background: rgba(13,20,40,0.9);
      max-height: min(58vh, 480px); overflow-y: auto; -webkit-overflow-scrolling: touch;
      scrollbar-width: thin; scrollbar-color: rgba(129,140,248,0.5) transparent;
    }
    .dw-body::-webkit-scrollbar { width: 6px; }
    .dw-body::-webkit-scrollbar-thumb { background: rgba(129,140,248,0.4); border-radius: 3px; }
    .dw-loading { padding: 20px 14px; font-size: 12px; color: #64748b; text-align: center; }
    .dw-list { display: flex; flex-direction: column; }
    .dw-row {
      display: flex; align-items: center; gap: 10px; padding: 10px 14px;
      border-bottom: 1px solid rgba(129,140,248,0.1);
      position: relative; transition: opacity 0.2s;
    }
    .dw-row::before {
      content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
      background: var(--wc, var(--brand)); box-shadow: 0 0 8px var(--wc, var(--brand));
    }
    .dw-row-icon { font-size: 16px; filter: drop-shadow(0 0 3px var(--wc, transparent)); }
    .dw-row-mid { flex: 1; min-width: 0; }
    .dw-row-name { font-size: 12px; font-weight: 700; color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dw-row-meta { font-size: 10px; color: #64748b; margin-top: 2px; }
    .dw-del-btn {
      flex-shrink: 0; font-size: 10px; font-weight: 700; color: #ef4444;
      background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.4);
      border-radius: 6px; padding: 5px 10px; cursor: pointer; transition: background 0.15s;
    }
    .dw-del-btn:hover:not(:disabled) { background: rgba(239,68,68,0.2); }
    .dw-del-btn:disabled { opacity: 0.5; cursor: default; }
    .dw-del-btn-confirm { background: #ef4444; color: #fff; }
    .dw-del-btn-confirm:hover:not(:disabled) { background: #dc2626; }
    .dw-share-btn {
      flex-shrink: 0; font-size: 10px; font-weight: 700; color: var(--brand);
      background: var(--b1-08); border: 1px solid var(--b1-40);
      border-radius: 6px; padding: 5px 10px; cursor: pointer; transition: background 0.15s;
    }
    .dw-share-btn:hover:not(:disabled) { background: var(--b1-20); }
    .dw-share-btn:disabled { opacity: 0.5; cursor: default; }

    /* ── TRAINING PLANS CARD: per-plan workout preview ── */
    .tp-plan-block { display: flex; flex-direction: column; }
    .tp-preview-btn {
      flex-shrink: 0; font-size: 11px; font-weight: 700; color: #64748b;
      background: rgba(100,116,139,0.08); border: 1px solid rgba(100,116,139,0.3);
      border-radius: 6px; padding: 5px 9px; cursor: pointer; transition: background 0.15s;
    }
    .tp-preview-btn:hover { background: rgba(100,116,139,0.2); color: #f1f5f9; }
    .tp-preview-panel { display: flex; flex-direction: column; background: rgba(15,23,42,0.35); }
    .tp-preview-panel .dw-row:last-child { border-bottom: 1px solid rgba(129,140,248,0.1); }

    /* ── MANAGE TRAINING PLANS CARD (admin) ── */
    .mtp-list { display: flex; flex-direction: column; }
    .mtp-row {
      display: flex; flex-direction: column; gap: 6px; padding: 10px 14px;
      border-bottom: 1px solid rgba(129,140,248,0.1);
    }
    .mtp-row-name { font-size: 12px; font-weight: 700; color: #f1f5f9; }
    .mtp-row-meta { font-size: 10px; color: #64748b; }
    .mtp-row-fields { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
    .mtp-field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 140px; min-width: 0; }
    .mtp-field-price { flex: 0 0 80px; }
    .mtp-field-lbl { font-size: 9px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.03em; }
    .mtp-input {
      font-size: 11px; color: #f1f5f9; background: rgba(15,23,42,0.5);
      border: 1px solid rgba(129,140,248,0.25); border-radius: 6px; padding: 6px 8px;
      width: 100%; box-sizing: border-box;
    }
    .mtp-input:focus { outline: none; border-color: var(--brand); }
    .mtp-save-btn {
      flex-shrink: 0; font-size: 10px; font-weight: 700; color: var(--brand);
      background: var(--b1-08); border: 1px solid var(--b1-40);
      border-radius: 6px; padding: 6px 12px; cursor: pointer; transition: background 0.15s;
    }
    .mtp-save-btn:hover:not(:disabled) { background: var(--b1-20); }
    .mtp-save-btn:disabled { opacity: 0.5; cursor: default; }
    .mtp-status { font-size: 10px; min-height: 12px; }

    /* ── MOVE WORKOUT CARD ── */
    .mv-row { flex-direction: column; align-items: stretch; gap: 8px; }
    .mv-row-main { display: flex; align-items: center; gap: 10px; }
    .mv-move-btn {
      flex-shrink: 0; font-size: 10px; font-weight: 700; color: var(--brand2);
      background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.4);
      border-radius: 6px; padding: 5px 10px; cursor: pointer; transition: background 0.15s;
    }
    .mv-move-btn:hover:not(:disabled) { background: rgba(52,211,153,0.2); }
    .mv-move-btn:disabled { opacity: 0.5; cursor: default; }
    .mv-picker {
      display: none; align-items: center; gap: 8px;
      padding: 9px 10px; margin-left: 26px;
      background: rgba(52,211,153,0.05); border: 1px solid rgba(52,211,153,0.22);
      border-radius: 9px; animation: mvPickerIn 0.15s ease;
    }
    @keyframes mvPickerIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
    .cal-del-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; margin-left: 26px; }
    .mv-date-input {
      flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
      border-radius: 6px; color: #e2e8f0; padding: 6px 9px; font-size: 12px;
      font-family: inherit; color-scheme: dark; outline: none;
    }
    .mv-date-input:focus { border-color: var(--brand2); }
    .mv-confirm-btn {
      flex-shrink: 0; font-size: 10px; font-weight: 700; color: #06251b;
      background: linear-gradient(135deg,#34d399,#059669); border: none;
      border-radius: 6px; padding: 6px 12px; cursor: pointer; transition: opacity 0.15s;
    }
    .mv-confirm-btn:hover:not(:disabled) { opacity: 0.85; }
    .mv-confirm-btn:disabled { opacity: 0.5; cursor: default; }
    .mv-cancel-btn {
      flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
      border-radius: 6px; color: #94a3b8; cursor: pointer; font-size: 12px; line-height: 1;
    }
    .mv-cancel-btn:hover { background: rgba(255,255,255,0.1); }

    .pw-done-value { font-size: 13px; font-weight: 800; color: #64748b; }

    /* ── ADD FRIEND CARD ── */
    .friend-card { border-color: rgba(52,211,153,0.28); box-shadow: 0 0 24px -8px rgba(52,211,153,0.35); }
    .friend-card .dw-hdr { color: var(--brand2); border-bottom-color: rgba(52,211,153,0.22); }
    .fr-search-row { padding: 10px 12px; background: rgba(52,211,153,0.04); border-bottom: 1px solid rgba(52,211,153,0.15); }
    .fr-search-input {
      width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
      border-radius: 8px; color: var(--text); padding: 8px 12px; font-size: 13px;
      font-family: inherit; outline: none; transition: border-color 0.15s, box-shadow 0.15s;
    }
    .fr-search-input:focus { border-color: rgba(52,211,153,0.5); box-shadow: 0 0 0 3px rgba(52,211,153,0.12); }
    .fr-search-input::placeholder { color: #475569; }
    .fr-list { display: flex; flex-direction: column; }
    .fr-row {
      display: flex; align-items: center; gap: 10px; padding: 9px 12px;
      border-bottom: 1px solid rgba(52,211,153,0.08); transition: background 0.12s;
    }
    .fr-row:hover { background: rgba(52,211,153,0.04); }
    .fr-avatar {
      width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg, var(--brand2), var(--brand2-dk));
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 800; color: #06251b;
    }
    .fr-row-mid { flex: 1; min-width: 0; }
    .fr-row-name { font-size: 12.5px; font-weight: 700; color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fr-row-type { font-size: 10.5px; color: #64748b; margin-top: 1px; }
    .fr-add-btn {
      flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: var(--brand2);
      background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.4);
      border-radius: 6px; padding: 5px 11px; cursor: pointer; transition: background 0.15s;
    }
    .fr-add-btn:hover:not(:disabled) { background: rgba(52,211,153,0.22); }
    .fr-add-btn:disabled { opacity: 0.5; cursor: default; }
    .fr-status { flex-shrink: 0; font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
    .fr-status-friends { color: var(--brand2); background: rgba(52,211,153,0.1); }
    .fr-status-pending { color: #94a3b8; background: rgba(255,255,255,0.05); }

    /* ── CLEAR NOTIFICATIONS CARD ── */
    .notif-card { border-color: rgba(251,191,36,0.28); box-shadow: 0 0 24px -8px rgba(251,191,36,0.35); }
    .notif-card .dw-hdr { color: var(--gold); border-bottom-color: rgba(251,191,36,0.22); }
    .notif-desc { padding: 12px 14px 4px; font-size: 12.5px; color: #94a3b8; line-height: 1.55; }
    .notif-clear-btn {
      display: block; margin: 10px 14px 4px; width: calc(100% - 28px);
      background: linear-gradient(135deg, #fbbf24, #d97706); color: #1c1206;
      border: none; border-radius: 9px; padding: 10px; font-size: 13px; font-weight: 800;
      cursor: pointer; transition: opacity 0.15s, transform 0.1s;
    }
    .notif-clear-btn:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); }
    .notif-clear-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
    .notif-clear-btn.notif-clear-success { background: #34d399; color: #06251b; }
    .notif-status { padding: 0 14px 12px; font-size: 12px; min-height: 16px; }

    /* ── COPY WEEK CARD ── */
    .cpw-card .dw-hdr { color: var(--brand-lt); }
    .cpw-section { padding: 10px 14px; }
    .cpw-section-lbl {
      font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
      color: var(--muted); margin-bottom: 8px;
    }
    .cpw-arrow { text-align: center; font-size: 14px; color: var(--brand-lt); opacity: 0.7; }
    .cpw-warning {
      margin: 6px 14px 4px; font-size: 11.5px; color: var(--gold); line-height: 1.5;
      background: rgba(251,191,36,0.07); border: 1px solid rgba(251,191,36,0.2);
      border-radius: 8px; padding: 8px 10px;
    }
    .cpw-confirm-btn {
      display: block; margin: 10px 14px 4px; width: calc(100% - 28px);
      background: linear-gradient(135deg, var(--brand-lt), var(--brand)); color: #0c0e1a;
      border: none; border-radius: 9px; padding: 10px; font-size: 13px; font-weight: 800;
      cursor: pointer; transition: opacity 0.15s, transform 0.1s;
    }
    .cpw-confirm-btn:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); }
    .cpw-confirm-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
    .cpw-confirm-btn.cpw-done { background: #34d399; color: #06251b; }
    .cpw-status { padding: 0 14px 12px; font-size: 12px; min-height: 16px; }

    /* ── AUTO PILOT SIDEBAR LIST ── */
    /* flex:1/min-height:0/overflow-y:auto — same scroll pattern as .chat-list. Missing this was
       the actual bug: with 11 agents the list overflowed its container, and the parent
       .sb-section-body's overflow:hidden (a clipping boundary, not a scrollbar — every section's
       real scrolling happens in its own inner content div) just clipped the excess instead of
       scrolling to it, so anything past Recovery Nudge/Coach Roster Digest was simply invisible. */
    .ap-list { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; flex: 1; min-height: 0; overflow-y: auto; }
    .ap-group-lbl { cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; }
    .ap-group-chevron { transition: transform 0.15s; font-size: 10px; opacity: 0.6; }
    .ap-group-chevron.collapsed { transform: rotate(-90deg); }
    .ap-card {
      display: flex; align-items: center; gap: 10px; text-align: left;
      background: linear-gradient(135deg, rgba(129,140,248,0.05), rgba(255,255,255,0.01));
      border: 1px solid var(--b1-18); border-radius: 12px; padding: 10px 12px;
      cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.12s;
    }
    .ap-card:hover { background: var(--b1-10); border-color: var(--b1-40); transform: translateY(-1px); }
    .ap-card-icon {
      flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px;
      display: flex; align-items: center; justify-content: center; font-size: 16px;
      background: linear-gradient(135deg, var(--b1-18), var(--b2-15));
      border: 1px solid var(--b1-35); box-shadow: 0 0 10px var(--b1-20);
    }
    .ap-card-mid { flex: 1; min-width: 0; }
    .ap-card-name { font-size: 12.5px; font-weight: 800; color: var(--text); }
    .ap-card-tagline { font-size: 10.5px; color: var(--muted); margin-top: 2px; line-height: 1.3; }
    .ap-card-status {
      flex-shrink: 0; font-size: 9px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
      padding: 3px 8px; border-radius: 20px;
    }
    .ap-card-status.on { background: rgba(52,211,153,0.15); color: var(--brand2); box-shadow: 0 0 8px rgba(52,211,153,0.2); }
    .ap-card-status.off { background: rgba(255,255,255,0.05); color: var(--muted); }
    .ap-card-status.soon { background: rgba(251,191,36,0.12); color: var(--gold); }

    /* ── AUTO PILOT WIZARD ── */
    .ap-wizard-overlay {
      display: none; position: fixed; inset: 0; z-index: 200;
      background: rgba(5,6,15,0.75); backdrop-filter: blur(4px);
      align-items: center; justify-content: center; padding: 20px;
    }
    .ap-wizard-overlay.open { display: flex; }
    .ap-wizard-modal {
      /* This modal's own background is a fixed dark gradient regardless of the site's light/dark
         theme toggle (deliberate — the "premium AI wizard" look). Everything inside it (titles,
         athlete/workout list items, toggle labels, etc.) is styled with var(--text)/var(--border)/
         var(--gold)/var(--brand-lt)/var(--brand2) though, and body.light flips those to near-black
         text / near-black borders for contrast against the rest of the site's white surfaces —
         which made every one of them render as near-invisible dark-on-dark inside this modal
         specifically, in light mode (reported: athlete picker + workout list unreadable). Pinning
         these back to their dark-theme values, scoped to just this modal, fixes every descendant
         rule that already reads them without touching each one individually, and doesn't change
         dark-mode appearance at all (same values dark mode already had).
      */
      --text:      #e2e8f0;
      --border:    rgba(255,255,255,0.07);
      --gold:      #fbbf24;
      --brand-lt:  #a5b4fc;
      --brand2:    #34d399;
      position: relative; width: 100%; max-width: 380px;
      background: linear-gradient(160deg, #0f1120 0%, #151832 100%);
      border: 1px solid var(--b1-30); border-radius: 18px;
      box-shadow: 0 0 60px rgba(99,102,241,0.15), 0 20px 60px rgba(0,0,0,0.5);
      padding: 28px 26px 22px;
    }
    .ap-wizard-close {
      position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,0.06);
      border: none; color: var(--muted); width: 28px; height: 28px; border-radius: 50%;
      font-size: 16px; cursor: pointer; transition: background 0.15s, color 0.15s;
    }
    .ap-wizard-close:hover { background: rgba(255,255,255,0.12); color: var(--text); }
    .ap-wizard-steps { display: flex; justify-content: center; gap: 8px; margin-bottom: 22px; }
    .ap-step-dot {
      width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.12);
      transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
    }
    .ap-step-dot.active { background: var(--brand-lt); box-shadow: 0 0 10px var(--brand); transform: scale(1.3); }
    .ap-step-dot.done { background: #34d399; }
    .ap-wizard-body { min-height: 160px; }
    .ap-wizard-icon {
      width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 14px;
      display: flex; align-items: center; justify-content: center; font-size: 26px;
      background: linear-gradient(135deg, var(--b1-18), var(--b2-15));
      border: 1px solid var(--b1-35); box-shadow: 0 0 20px var(--b1-25);
    }
    .ap-wizard-title { font-size: 17px; font-weight: 800; color: var(--text); text-align: center; margin-bottom: 8px; }
    .ap-wizard-desc { font-size: 13px; color: var(--muted); text-align: center; line-height: 1.6; }
    .ap-soon-note {
      margin-top: 14px; font-size: 11.5px; color: var(--gold); line-height: 1.5; text-align: left;
      background: rgba(251,191,36,0.07); border: 1px solid rgba(251,191,36,0.2);
      border-radius: 10px; padding: 10px 12px;
    }
    .ap-toggle-row, .ap-config-row {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      padding: 12px 0; border-bottom: 1px solid var(--border);
    }
    .ap-config-row { flex-direction: column; align-items: stretch; gap: 8px; }
    .ap-toggle-lbl { display: flex; flex-direction: column; gap: 2px; }
    .ap-toggle-lbl strong { font-size: 13px; color: var(--text); }
    .ap-toggle-lbl span { font-size: 11px; color: var(--muted); }
    .ap-toggle {
      flex-shrink: 0; width: 44px; height: 25px; border-radius: 14px; position: relative;
      background: rgba(255,255,255,0.1); border: 1px solid var(--border); cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
    }
    .ap-toggle.on { background: linear-gradient(135deg, var(--brand-lt), var(--brand)); border-color: var(--brand); box-shadow: 0 0 12px var(--b1-35); }
    .ap-toggle-knob {
      position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%;
      background: #fff; transition: transform 0.2s; box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    }
    .ap-toggle.on .ap-toggle-knob { transform: translateX(19px); }
    .ap-config-input-wrap { display: flex; align-items: center; gap: 10px; }
    .ap-config-input-wrap input[type="range"] { flex: 1; accent-color: var(--brand); }
    .ap-config-val { font-size: 12px; font-weight: 800; color: var(--brand-lt); min-width: 40px; text-align: right; }
    .ap-confirm-summary { margin-top: 4px; }
    .ap-confirm-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--border);
      border-radius: 9px; margin-bottom: 6px; font-size: 12.5px; color: var(--muted);
    }
    .ap-wizard-footer { display: flex; gap: 10px; margin-top: 20px; }
    .ap-btn-ghost {
      flex: 1; background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text);
      border-radius: 9px; padding: 10px; font-size: 13px; font-weight: 700; cursor: pointer;
      transition: background 0.15s;
    }
    .ap-btn-ghost:hover { background: rgba(255,255,255,0.09); }
    .ap-btn-primary {
      flex: 1; background: linear-gradient(135deg, var(--brand-lt), var(--brand)); color: #0c0e1a;
      border: none; border-radius: 9px; padding: 10px; font-size: 13px; font-weight: 800; cursor: pointer;
      transition: opacity 0.15s, transform 0.1s; box-shadow: 0 0 16px var(--b1-25);
    }
    .ap-btn-primary:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }
    .ap-btn-primary:disabled { opacity: 0.5; cursor: default; transform: none; }

    /* ── FINISH LINE ALERT (workout watcher manager) ── */
    .fla-modal { max-width: 440px; }
    .fla-list { margin-top: 4px; max-height: 340px; overflow-y: auto; }
    .fla-empty { font-size: 12.5px; color: var(--muted); text-align: center; padding: 18px 0; }
    .fla-row {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      padding: 11px 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--border);
      border-radius: 10px; margin-bottom: 8px;
    }
    .fla-row-info { min-width: 0; }
    .fla-row-name { font-size: 12.5px; font-weight: 700; color: var(--text); }
    .fla-row-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
    .fla-row-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .fla-pill {
      font-size: 9px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
      padding: 3px 8px; border-radius: 20px; white-space: nowrap;
    }
    .fla-pill.watching { background: rgba(99,102,241,0.15); color: var(--brand-lt); box-shadow: 0 0 8px var(--b1-25); }
    .fla-pill.completed { background: rgba(52,211,153,0.15); color: var(--brand2); box-shadow: 0 0 8px rgba(52,211,153,0.2); }
    .fla-pill.missed { background: rgba(255,255,255,0.05); color: var(--muted); }
    .fla-icon-btn {
      background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--muted);
      width: 26px; height: 26px; border-radius: 7px; font-size: 12px; cursor: pointer;
      display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s;
    }
    .fla-icon-btn:hover { background: rgba(255,255,255,0.1); color: var(--text); }
    .fla-add-btn {
      width: 100%; margin-top: 4px; padding: 11px; border-radius: 10px; cursor: pointer;
      background: rgba(255,255,255,0.03); border: 1px dashed var(--b1-35); color: var(--brand-lt);
      font-size: 12.5px; font-weight: 700; transition: background 0.15s;
    }
    .fla-add-btn:hover { background: rgba(255,255,255,0.06); }
    .fla-back-link {
      background: none; border: none; color: var(--muted); font-size: 12px; cursor: pointer;
      padding: 0 0 12px; text-align: left; display: block;
    }
    .fla-back-link:hover { color: var(--text); }
    .fla-field-lbl { font-size: 11px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
    .fla-workout-list { max-height: 260px; overflow-y: auto; margin-top: 4px; }
    .fla-picker-item {
      display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
      padding: 10px 12px; border-radius: 9px; border: 1px solid var(--border);
      background: rgba(255,255,255,0.03); margin-bottom: 7px; cursor: pointer; transition: background 0.15s, border-color 0.15s;
    }
    .fla-picker-item:hover { background: rgba(255,255,255,0.07); border-color: var(--b1-35); }
    .fla-picker-item.active { border-color: var(--brand-lt); background: rgba(99,102,241,0.1); box-shadow: 0 0 10px var(--b1-25); }
    .fla-workout-icon { font-size: 16px; flex-shrink: 0; }
    .fla-workout-name { font-size: 12.5px; font-weight: 700; color: var(--text); }
    .fla-workout-date { font-size: 11px; color: var(--muted); margin-top: 1px; }

    /* ── MY RECORDS (streak / PRs / gear odometer sidebar panel) ── */
    .rec-panel-inner { padding-top: 10px; }
    .rec-period-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
    .rec-period-pills {
      display: flex; gap: 2px; padding: 3px; border-radius: 10px;
      background: rgba(255,255,255,0.03); border: 1px solid var(--border);
    }
    .rec-period-pill {
      background: none; border: none; color: var(--muted); font-size: 10.5px; font-weight: 700;
      letter-spacing: 0.2px; padding: 5px 10px; border-radius: 7px; cursor: pointer;
      transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    }
    .rec-period-pill:hover { color: var(--text); }
    .rec-period-pill.active {
      background: linear-gradient(135deg, var(--brand-lt), var(--brand));
      color: #0c0e1a; box-shadow: 0 0 14px var(--b1-35);
    }
    .rec-period-nav { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
    .rec-period-step {
      background: rgba(255,255,255,0.04); border: 1px solid var(--b1-25); color: var(--brand-lt);
      width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: background 0.15s, box-shadow 0.15s;
    }
    .rec-period-step:hover:not(:disabled) { background: var(--b1-15); box-shadow: 0 0 10px var(--b1-25); }
    .rec-period-step:disabled { opacity: 0.3; cursor: default; }
    .rec-period-label { font-size: 10.5px; font-weight: 800; color: var(--text); min-width: 62px; text-align: center; white-space: nowrap; }
    .rec-streak-card {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px; margin-bottom: 10px; border-radius: 12px;
      background: linear-gradient(135deg, rgba(251,146,60,0.12), rgba(248,113,113,0.06));
      border: 1px solid rgba(251,146,60,0.25);
    }
    .rec-streak-icon { font-size: 26px; flex-shrink: 0; }
    .rec-streak-num { font-size: 17px; font-weight: 800; color: var(--text); line-height: 1.2; }
    .rec-streak-lbl { font-size: 11px; color: var(--muted); margin-top: 2px; }
    .rec-pr-card {
      padding: 11px 12px; margin-bottom: 8px; border-radius: 10px;
      background: rgba(255,255,255,0.03); border: 1px solid var(--border);
    }
    .rec-pr-hdr { font-size: 12.5px; font-weight: 800; color: var(--text); margin-bottom: 7px; }
    .rec-pr-row {
      display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; color: var(--muted);
      padding: 3px 0;
    }
    .rec-pr-row strong { color: var(--brand-lt); font-size: 12px; }
    .rec-pr-date { margin-left: auto; font-size: 10px; color: var(--muted); opacity: 0.75; flex-shrink: 0; white-space: nowrap; }
    .rec-gear-bar { height: 5px; border-radius: 3px; background: var(--b1-15); margin-top: 8px; overflow: hidden; }
    .rec-gear-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--brand-lt), var(--brand)); }

    /* ── UPLOAD LACTATE CARD ── */
    .lactate-card { border-color: rgba(248,113,113,0.28); box-shadow: 0 0 24px -8px rgba(248,113,113,0.35); }
    .lactate-card .dw-hdr { color: #f87171; border-bottom-color: rgba(248,113,113,0.22); }
    .lac-pick-btn { flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: #f87171; }
    .lac-selected-bar {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      padding: 10px 14px; background: rgba(248,113,113,0.06); border-bottom: 1px solid rgba(248,113,113,0.18);
      font-size: 12.5px; font-weight: 700; color: #f1f5f9;
    }
    .lac-change-btn {
      flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: #94a3b8;
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
      border-radius: 6px; padding: 4px 9px; cursor: pointer; transition: background 0.15s;
    }
    .lac-change-btn:hover { background: rgba(255,255,255,0.1); }
    .lac-form { padding: 14px; display: flex; flex-direction: column; gap: 6px; }
    .lac-lbl { font-size: 10px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: #64748b; margin-top: 6px; }
    .lac-lbl:first-child { margin-top: 0; }
    .lac-input, .lac-file-input {
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
      border-radius: 8px; color: var(--text); padding: 8px 12px; font-size: 13px;
      font-family: inherit; outline: none; transition: border-color 0.15s, box-shadow 0.15s;
    }
    .lac-input:focus { border-color: rgba(248,113,113,0.5); box-shadow: 0 0 0 3px rgba(248,113,113,0.12); }
    .lac-file-input { padding: 6px 10px; color: #94a3b8; }
    .lac-submit-btn {
      margin-top: 6px; background: linear-gradient(135deg, #f87171, #b91c1c); color: #fff;
      border: none; border-radius: 9px; padding: 10px; font-size: 13px; font-weight: 800;
      cursor: pointer; transition: opacity 0.15s, transform 0.1s;
    }
    .lac-submit-btn:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); }
    .lac-submit-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
    .lac-submit-btn.lac-submit-success { background: #34d399; }
    .lac-status { font-size: 12px; min-height: 16px; }

    /* ── WORKOUT DEEP DIVE CARD ── */
    .dd-card { border-color: rgba(34,211,238,0.28); box-shadow: 0 0 24px -8px rgba(34,211,238,0.35); }
    .dd-card .dw-hdr { color: #22d3ee; border-bottom-color: rgba(34,211,238,0.22); }
    .dd-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .dd-chip {
      display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--text);
      background: rgba(255,255,255,0.05); border: 1px solid var(--wc); border-radius: 999px; padding: 4px 6px 4px 10px;
    }
    .dd-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wc); flex-shrink: 0; }
    .dd-chip-x {
      background: none; border: none; color: #64748b; font-size: 14px; line-height: 1; cursor: pointer;
      padding: 2px 4px; border-radius: 50%; transition: background 0.12s, color 0.12s;
    }
    .dd-chip-x:hover { background: rgba(255,255,255,0.1); color: var(--text); }
    .dd-add-chip {
      font-size: 11px; font-weight: 700; color: #22d3ee; background: rgba(34,211,238,0.08);
      border: 1px dashed rgba(34,211,238,0.4); border-radius: 999px; padding: 4px 12px; cursor: pointer; transition: background 0.12s;
    }
    .dd-add-chip:hover { background: rgba(34,211,238,0.16); }
    .dd-back-btn {
      display: block; margin: 10px 14px 0; font-size: 11.5px; font-weight: 700; color: #94a3b8;
      background: none; border: none; cursor: pointer; padding: 0;
    }
    .dd-back-btn:hover { color: var(--text); }
    .dd-summary { padding: 10px 14px; font-size: 11.5px; color: #64748b; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .dd-metric-row { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .dd-metric-row:last-child { border-bottom: none; }
    .dd-metric-hdr { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
    .dd-metric-label { font-size: 12.5px; font-weight: 700; color: var(--text); }
    .dd-zoom-reset {
      font-size: 10px; font-weight: 700; color: #22d3ee; background: rgba(34,211,238,0.08);
      border: 1px solid rgba(34,211,238,0.3); border-radius: 6px; padding: 3px 8px; cursor: pointer;
    }
    .dd-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
    .dd-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: #94a3b8; }
    .dd-legend-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wc); flex-shrink: 0; }
    .dd-chart-wrap { position: relative; }
    .dd-spark { display: block; width: 100%; height: 86px; touch-action: none; cursor: crosshair; }
    /* Docked inside the chart's own top-right corner rather than floating above the cursor —
       a floating tooltip positioned via translate(-100%) is exactly the kind of thing an
       ancestor's overflow:hidden (card corners, message bubble clipping) can silently eat, and
       that's not practical to verify without a real browser. A fixed on-chart readout panel
       can't be clipped that way since it never leaves the chart's own bounds. */
    .dd-tooltip {
      position: absolute; top: 4px; right: 4px; max-width: calc(100% - 8px); z-index: 5; pointer-events: none;
      background: #0f172a; border: 1px solid rgba(34,211,238,0.35); border-radius: 8px; padding: 6px 10px;
      font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      box-shadow: 0 6px 18px -6px rgba(0,0,0,0.5);
    }
    .dd-tip-time { font-size: 9.5px; color: #64748b; font-weight: 700; margin-bottom: 3px; }
    /* Fixed light color, not var(--text) — the tooltip box itself is a hardcoded dark navy
       regardless of theme (deliberate, for contrast against either light or dark chart lines),
       but var(--text) turns dark in light mode for contrast against light-mode's own light
       backgrounds. Using it here put dark text on this tooltip's dark background in light mode —
       invisible, while the fixed-gray time label stayed visible, matching exactly what was seen. */
    .dd-tip-row { display: flex; align-items: center; gap: 5px; color: #e2e8f0; white-space: nowrap; }
    /* A plain span, deliberately not <strong> — .msg-content strong is styled app-wide for
       readable bold markdown text in the normal chat flow (light gray in dark mode, near-black
       in light mode) and wins over any color this component sets on it, since a rule targeting
       an element directly always beats an inherited value. In light mode that color happens to
       be #0f172a — identical to this tooltip's own fixed dark background. A span with its own
       class is never touched by that rule at all. */
    .dd-tip-val { font-weight: 800; color: #e2e8f0; }
    .dd-tip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

    /* ── THINKING INDICATOR ── */
    .thinking {
      display: flex;
      gap: 5px;
      align-items: center;
      padding: 4px 0;
    }
    .thinking span {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--brand2);
      opacity: 0.4;
      animation: bounce 1.2s ease-in-out infinite;
    }
    .thinking span:nth-child(2) { animation-delay: 0.15s; }
    .thinking span:nth-child(3) { animation-delay: 0.3s; }
    @keyframes bounce {
      0%, 80%, 100% { transform: scale(0.8); opacity: 0.3; }
      40%            { transform: scale(1.1); opacity: 1; }
    }
    .thinking-q-card {
      margin-top: 10px;
      padding: 10px 13px;
      background: var(--b1-07);
      border: 1px solid var(--b1-20);
      border-radius: 10px;
      animation: tqFadeIn 0.3s ease;
    }
    @keyframes tqFadeIn {
      from { opacity: 0; transform: translateY(5px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .thinking-q-text {
      font-size: 13px;
      color: var(--text);
      margin-bottom: 8px;
      font-weight: 500;
    }
    .thinking-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .thinking-chip {
      padding: 4px 11px;
      border-radius: 99px;
      border: 1px solid var(--b1-35);
      background: var(--b1-08);
      color: var(--brand);
      font-size: 12px;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
      font-family: inherit;
    }
    .thinking-chip:hover { background: var(--b1-18); }
    .thinking-chip.selected {
      background: var(--b1-28);
      border-color: var(--brand);
      font-weight: 600;
    }
    .thinking-label {
      font-size: 13px;
      color: var(--muted);
      font-style: normal;
      margin-left: 8px;
      animation: thinkFade 2s ease-in-out infinite;
    }
    @keyframes thinkFade {
      0%, 100% { opacity: 0.5; }
      50%       { opacity: 1; }
    }

    /* ── STREAMING CURSOR ── */
    .msg-content.streaming-active::after {
      content: '▌';
      display: inline;
      color: var(--brand2);
      animation: blink 0.7s step-end infinite;
      margin-left: 1px;
    }
    @keyframes blink {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0; }
    }

    /* ── ERROR MSG ── */
    .error-msg {
      background: rgba(248,113,113,0.08);
      border: 1px solid rgba(248,113,113,0.2);
      border-radius: 10px;
      padding: 12px 16px;
      color: var(--red);
      font-size: 14px;
    }

    /* ── SCROLL TO BOTTOM BUTTON ── */
    .btn-scroll-bottom {
      align-self: center;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
      cursor: pointer;
      z-index: 5;
      white-space: nowrap;
      box-shadow: 0 2px 12px rgba(0,0,0,0.3);
      transition: background 0.12s;
      margin: 6px 0;
    }
    .btn-scroll-bottom:hover { background: var(--surface); }

    /* ── INPUT AREA ── */
    .input-area {
      padding: 10px 24px;
      background: var(--bg);
      border-top: 1px solid var(--border);
      flex-shrink: 0;
      max-width: 100%;
      box-sizing: border-box;
      overflow: hidden;
    }

    /* ChatGPT-style single row: attach + textarea + char badge + mic + send all inline,
       buttons pinned to the bottom as the textarea grows upward for multi-line messages. */
    .input-wrap {
      max-width: 780px;
      width: 100%;
      margin: 0 auto;
      background: var(--surface);
      border: 1px solid var(--b1-20);
      border-radius: 26px;
      padding: 6px 8px 6px 14px;
      display: flex;
      align-items: flex-end;
      gap: 6px;
      transition: border-color 0.15s, box-shadow 0.15s;
      box-sizing: border-box;
    }
    .input-wrap:focus-within {
      border-color: var(--b1-40);
      box-shadow: 0 0 0 3px var(--b1-08);
    }

    #userInput {
      flex: 1;
      min-width: 0;
      background: none;
      border: none;
      outline: none;
      color: var(--text);
      font-family: inherit;
      font-size: 15px;
      line-height: 1.5;
      resize: none;
      max-height: 120px;
      min-height: 22px;
      padding: 7px 0;
    }
    #userInput::placeholder { color: #334155; }

    /* ── MIC BUTTON (now inline next to send) ── */
    .btn-mic {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.05);
      color: var(--muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
      flex-shrink: 0;
    }
    .btn-mic:hover { background: rgba(255,255,255,0.1); color: var(--text); border-color: rgba(255,255,255,0.2); }
    .btn-mic.listening {
      background: rgba(248,113,113,0.15);
      color: var(--red);
      border-color: rgba(248,113,113,0.3);
      animation: micPulse 1.2s ease-in-out infinite;
    }
    @keyframes micPulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(248,113,113,0.4); }
      50%      { box-shadow: 0 0 0 7px rgba(248,113,113,0); }
    }

    /* ── SIDEBAR DASHBOARD ── */
    /* Desktop: dash-panel grows to fill whatever's left of the sidebar column below it (flex:1)
       instead of stopping at a fixed height and leaving empty space — the workout list itself
       scrolls internally once it outgrows that space. This flex:1/min-height:0 sizing is safe
       here specifically because desktop's .sidebar isn't position:fixed; the mobile media query
       below still overrides both of these back to a non-flex, non-nested-scroll layout (mobile's
       .sidebar itself is the single scroll container there — see the comment further down for
       why nested overflow:auto regions inside a position:fixed drawer caused real bugs on iOS). */
    .dash-panel {
      border-top: 1px solid var(--border);
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      background: linear-gradient(180deg, var(--b1-05), transparent 45%);
      position: relative;
    }
    .dash-panel-head { flex-shrink: 0; padding: 12px 12px 0; }
    .dash-panel-scroll {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      touch-action: pan-y;
      padding: 0 12px 10px;
    }
    .dash-panel-scroll::-webkit-scrollbar { width: 5px; }
    .dash-panel-scroll::-webkit-scrollbar-thumb { background: var(--b1-25); border-radius: 4px; }
    .dash-title {
      font-size: 9px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase;
      color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
    }
    .dash-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
    .dash-week-date { font-size: 9px; font-weight: 600; letter-spacing: 0.5px; text-transform: none; color: var(--muted); }

    /* Range selector — 1 week / 1 month / 3 months / 6 months / 1 year */
    .dash-range-row { display: flex; gap: 4px; margin-bottom: 8px; }
    .dash-range-chip {
      flex: 1; background: rgba(255,255,255,0.03); border: 1px solid var(--border); color: var(--muted);
      border-radius: 8px; padding: 4px 2px; font-size: 10px; font-weight: 800; letter-spacing: 0.3px;
      cursor: pointer; transition: all 0.15s;
    }
    .dash-range-chip.active {
      background: var(--b1-18); border-color: var(--b1-45); color: var(--brand-lt);
      box-shadow: 0 0 8px var(--b1-25);
    }

    /* Week pager — reuses the same nav look as the other week-paged cards */
    .dash-nav {
      display: flex; align-items: center; justify-content: space-between;
      gap: 6px; margin-bottom: 10px;
    }
    .dash-nav-btn {
      background: var(--b1-10); border: 1px solid var(--b1-25); color: var(--brand-lt);
      border-radius: 7px; padding: 4px 8px; font-size: 11px; font-weight: 700;
      cursor: pointer; transition: background 0.15s; flex-shrink: 0;
    }
    .dash-nav-btn:hover { background: var(--b1-22); }
    .dash-nav-btn:disabled { opacity: 0.3; cursor: default; }
    .dash-nav-lbl { font-size: 11px; font-weight: 700; color: var(--text); text-align: center; flex: 1; }

    /* Tabs — futuristic underline switcher */
    .dash-tabs { display: flex; gap: 4px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
    .dash-tab-btn {
      background: none; border: none; color: var(--muted); font-size: 11px; font-weight: 700;
      letter-spacing: 0.4px; padding: 6px 4px 8px; cursor: pointer; position: relative; flex: 1;
      transition: color 0.15s;
    }
    .dash-tab-btn::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
      background: var(--brand); border-radius: 2px 2px 0 0;
      opacity: 0; transform: scaleX(0.4); transition: opacity 0.18s, transform 0.18s;
      box-shadow: 0 0 8px var(--brand);
    }
    .dash-tab-btn.active { color: var(--text); }
    .dash-tab-btn.active::after { opacity: 1; transform: scaleX(1); }

    /* Volume tab: stat tiles + a futuristic 7-day bar graph */
    .dash-vol-row {
      display: flex; gap: 6px; margin-bottom: 12px;
    }
    .dash-vol-item {
      flex: 1; background: rgba(255,255,255,0.03); border: 1px solid var(--border);
      border-radius: 10px; padding: 10px 10px; display: flex; flex-direction: column; gap: 4px;
      transition: box-shadow 0.2s;
    }
    .dash-vol-icon { font-size: 18px; line-height: 1; }
    .dash-vol-val { font-size: 19px; font-weight: 800; color: var(--text); line-height: 1.1; }
    .dash-vol-unit { font-size: 10.5px; color: var(--muted); font-weight: 700; letter-spacing: 0.4px; }
    .dash-vol-bar-wrap { height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px; margin-top: 6px; overflow: hidden; }
    .dash-vol-bar { height: 100%; border-radius: 2px; box-shadow: 0 0 6px currentColor; }

    .dash-graph-total {
      font-size: 13px; color: var(--text); text-align: right; margin-bottom: 10px;
    }
    /* Columns get a fixed, readable minimum width instead of being squeezed by flex to fit
       whatever the panel's width happens to be — that's what was crushing the date/duration/
       distance text down to unreadable sizes (or truncating them to just a month name) once a
       range had more than 7-9 bars. The graph itself scrolls horizontally instead: at 7 bars
       (1 week) or ~5 (1 month) everything still fits with no scrollbar, but 13 bars (3 months)
       or 12 (1 year) scroll rather than shrink. */
    .dash-graph {
      display: flex; align-items: flex-end; gap: 5px; height: 140px; width: 100%;
      padding: 8px 6px 0; background: rgba(255,255,255,0.02); border: 1px solid var(--border);
      border-radius: 10px; margin-bottom: 4px; overflow-x: auto; overflow-y: hidden;
      box-sizing: border-box;
    }
    .dash-graph::-webkit-scrollbar { height: 5px; }
    .dash-graph::-webkit-scrollbar-thumb { background: var(--b1-25); border-radius: 4px; }
    .dash-graph-col {
      flex: 0 0 auto; width: 56px; display: flex; flex-direction: column; align-items: center;
      justify-content: flex-end; gap: 3px; height: 100%;
    }
    /* 1-week view: always exactly 7 bars, which comfortably fit the panel width — stretch them
       to fill it edge-to-edge like before instead of scrolling. Denser ranges (13 bars for 3
       months, 12 for 1 year) keep the fixed-width scrolling columns above. */
    .dash-graph.fit { overflow-x: hidden; }
    .dash-graph.fit .dash-graph-col { flex: 1 1 0; width: auto; min-width: 0; }
    .dash-graph-bar-track {
      width: 100%; flex: 1; display: flex; align-items: flex-end; justify-content: center;
    }
    /* Multi-workout days: one narrow bar per activity instead of a single aggregate bar —
       each sized to its own duration and colored by sport, so a day with 3 short workouts
       doesn't get rendered as if it were one long one. */
    .dash-graph-bar-track-multi { gap: 2px; justify-content: flex-start; }
    .dash-graph-bar {
      width: 60%; min-height: 2px; border-radius: 3px 3px 0 0;
      background: linear-gradient(180deg, var(--brand-lt), var(--brand));
      box-shadow: 0 0 6px var(--b1-40);
      transition: height 0.5s cubic-bezier(0.22,1,0.36,1);
    }
    .dash-graph-bar-click {
      flex: 1 1 0; width: auto; min-width: 3px; cursor: pointer;
      transition: height 0.5s cubic-bezier(0.22,1,0.36,1), filter 0.15s, transform 0.15s;
    }
    .dash-graph-bar-click:hover { filter: brightness(1.3); transform: scaleY(1.03); }
    .dash-graph-more {
      align-self: flex-end; font-size: 8px; font-weight: 800; color: var(--muted);
      margin: 0 0 2px 1px; flex: 0 0 auto;
    }
    .dash-graph-col.today .dash-graph-bar {
      background: linear-gradient(180deg, #6ee7f9, var(--brand2));
      box-shadow: 0 0 10px var(--brand2), 0 0 2px #fff;
    }
    .dash-graph-lbl {
      font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: 0.2px;
      max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .dash-graph-col.today .dash-graph-lbl { color: var(--brand2); }
    .dash-graph-sub {
      font-size: 9.5px; font-weight: 700; color: var(--muted); letter-spacing: 0.1px;
      line-height: 1.2; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    }
    .dash-graph-sub.dist { color: var(--brand2); }

    /* Workouts tab: planned/completed filter chips + scannable list */
    .dash-filter-row { display: flex; gap: 6px; margin-bottom: 8px; }
    .dash-filter-chip {
      background: rgba(255,255,255,0.03); border: 1px solid var(--border); color: var(--muted);
      border-radius: 20px; padding: 4px 10px; font-size: 10px; font-weight: 700; cursor: pointer;
      transition: all 0.15s;
    }
    .dash-filter-chip.active {
      background: var(--b1-18); border-color: var(--b1-45); color: var(--brand-lt);
      box-shadow: 0 0 8px var(--b1-25);
    }
    .dash-workouts { display: flex; flex-direction: column; gap: 6px; }
    .dash-workout-row {
      display: flex; align-items: flex-start; gap: 9px;
      padding: 8px 9px; border-radius: 9px;
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.04);
      transition: background 0.12s;
      position: relative;
    }
    .dash-workout-row:hover { background: rgba(255,255,255,0.05); }
    .dash-wo-icon {
      width: 28px; height: 28px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; flex-shrink: 0; position: relative;
      margin-top: 1px;
    }
    /* Completed: glowing neon ring + checkmark badge — the "futuristic" done-state */
    .dash-workout-row.completed .dash-wo-icon {
      box-shadow: 0 0 0 2px rgba(52,211,153,0.55), 0 0 10px rgba(52,211,153,0.55);
    }
    .dash-wo-check {
      position: absolute; bottom: -2px; right: -2px; width: 13px; height: 13px; border-radius: 50%;
      background: #34d399; border: 2px solid var(--sidebar); color: #06281c;
      font-size: 8px; font-weight: 900; display: flex; align-items: center; justify-content: center;
      box-shadow: 0 0 6px rgba(52,211,153,0.8);
    }
    /* Planned: dashed outline + upcoming tag — clearly "not done yet" */
    .dash-workout-row.planned {
      border-style: dashed; border-color: var(--b1-35); background: rgba(255,255,255,0.015);
    }
    .dash-workout-row.planned .dash-wo-icon { opacity: 0.8; box-shadow: 0 0 0 1px var(--b1-35) inset; }
    .dash-wo-info { flex: 1; min-width: 0; }
    .dash-wo-toprow { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
    .dash-wo-type {
      flex: 1; min-width: 0; font-size: 11px; font-weight: 700; color: var(--text);
      letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .dash-wo-tag {
      font-size: 8px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
      padding: 1px 5px; border-radius: 4px; flex-shrink: 0;
    }
    .dash-wo-tag.done { background: rgba(52,211,153,0.15); color: var(--brand2); }
    .dash-wo-tag.upcoming { background: var(--b1-12); color: var(--brand-lt); }
    .dash-wo-day { font-size: 9px; color: var(--muted); flex-shrink: 0; font-weight: 600; }

    /* Time/distance as mini glowing bar-graphs — the actual numbers plus a relative-length
       bar (scaled against the busiest workout in the visible list), instead of tiny text. */
    .dash-wo-metrics { display: flex; flex-direction: column; gap: 5px; }
    .dash-wo-metric { display: flex; align-items: center; gap: 7px; }
    .dash-wo-metric-ico { font-size: 10px; flex-shrink: 0; width: 13px; text-align: center; opacity: 0.85; }
    .dash-wo-metric-bar-wrap {
      flex: 1; height: 6px; border-radius: 4px;
      background: rgba(255,255,255,0.06); overflow: hidden;
    }
    .dash-wo-metric-bar {
      height: 100%; border-radius: 4px; min-width: 3px;
      box-shadow: 0 0 6px currentColor;
      transition: width 0.4s cubic-bezier(0.22,1,0.36,1);
    }
    .dash-wo-metric-bar.time { background: linear-gradient(90deg, var(--brand-dk), var(--brand-lt)); color: var(--brand); }
    .dash-wo-metric-bar.dist { background: linear-gradient(90deg, #0d9488, #34d399); color: var(--brand2); }
    .dash-wo-metric-val {
      font-size: 11px; font-weight: 800; color: var(--text);
      flex-shrink: 0; min-width: 46px; text-align: right;
    }
    .dash-empty { font-size: 11px; color: var(--muted); text-align: center; padding: 10px 0 4px; opacity: 0.7; }

    /* ── FRIENDS SIDEBAR — friend picker chips + friend-colored workout rows ── */
    .friend-search-row { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
    .friend-search-row .fr-search-input { margin: 0; }
    .friend-search-clear {
      flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
      color: var(--muted); font-size: 12px; cursor: pointer; transition: background 0.15s, color 0.15s;
    }
    .friend-search-clear:hover { background: rgba(255,255,255,0.1); color: var(--text); }
    .friend-chip-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
    .friend-chip {
      background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 20px; color: var(--muted); font-size: 11px; font-weight: 700;
      padding: 5px 11px; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    }
    .friend-chip:hover { background: rgba(255,255,255,0.07); color: var(--text); }
    .friend-chip.active {
      background: color-mix(in srgb, var(--fc, var(--brand)) 22%, transparent);
      border-color: var(--fc, var(--brand)); color: var(--text);
      box-shadow: 0 0 10px color-mix(in srgb, var(--fc, var(--brand)) 45%, transparent);
    }
    .friend-wo-row { cursor: pointer; }
    .friend-wo-avatar {
      width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 10.5px; font-weight: 800; color: #06070f;
      background: var(--fc, var(--brand)); box-shadow: 0 0 8px color-mix(in srgb, var(--fc, var(--brand)) 60%, transparent);
      margin-top: 1px;
    }
    .friend-wo-sublabel { font-weight: 600; color: var(--muted); font-size: 10.5px; }

    /* ── SIDEBAR WIDTH TOGGLE ── */
    .btn-sidebar-width {
      margin-left: auto;
      background: none; border: none;
      color: var(--muted); cursor: pointer;
      padding: 6px; border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.12s, color 0.12s;
      flex-shrink: 0;
    }
    .btn-sidebar-width:hover { background: rgba(255,255,255,0.07); color: var(--text); }

    /* ── SETTINGS BUTTON ── */
    .btn-settings {
      margin-left: auto;
      background: none; border: none;
      color: var(--muted); cursor: pointer;
      padding: 6px; border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.12s, color 0.12s;
      flex-shrink: 0;
    }
    .btn-settings:hover { background: rgba(255,255,255,0.07); color: var(--text); }
    .settings-alert-dot {
      position: absolute; top: 1px; right: 1px; width: 12px; height: 12px; border-radius: 50%;
      background: #ef4444; color: #fff; font-size: 9px; font-weight: 900; line-height: 12px;
      text-align: center; border: 1.5px solid var(--sidebar); pointer-events: none;
    }
    .tri-token-badge {
      display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 800;
      color: var(--gold); background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.3);
      border-radius: 999px; padding: 1px 7px 1px 5px; line-height: 1.5; white-space: nowrap;
      transition: transform 0.15s;
    }
    .tri-token-badge.tri-token-bump { transform: scale(1.15); }

    /* ── SETTINGS MODAL ── */
    .settings-overlay {
      position: fixed; inset: 0; z-index: 9000;
      background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
      display: none; align-items: center; justify-content: center; padding: 20px;
    }
    .settings-overlay.open { display: flex; }
    .settings-modal {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 20px; width: 100%; max-width: 540px;
      max-height: 88vh; overflow-y: auto;
      padding: 28px 28px 24px;
      position: relative;
      box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px var(--b1-10);
    }
    .settings-modal::-webkit-scrollbar { width: 4px; }
    .settings-modal::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
    .settings-close {
      position: absolute; top: 16px; right: 16px;
      background: rgba(255,255,255,0.06); border: none;
      color: var(--muted); cursor: pointer; width: 32px; height: 32px;
      border-radius: 8px; font-size: 18px; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.12s, color 0.12s;
    }
    .settings-close:hover { background: rgba(255,255,255,0.12); color: var(--text); }
    .settings-heading {
      font-size: 20px; font-weight: 800; color: var(--text);
      letter-spacing: -0.3px; margin-bottom: 6px;
    }
    .settings-sub {
      font-size: 12px; color: var(--muted); margin-bottom: 24px;
    }
    .settings-section-title {
      font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
      color: var(--muted); margin-bottom: 12px; margin-top: 20px;
    }
    .settings-profile-row {
      display: flex; align-items: center; gap: 14px;
      padding: 14px; background: rgba(255,255,255,0.03);
      border: 1px solid var(--border); border-radius: 12px; margin-bottom: 4px;
    }
    .settings-avatar {
      width: 44px; height: 44px; border-radius: 50%;
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; font-weight: 800; color: white; flex-shrink: 0;
    }
    .settings-user-name { font-size: 15px; font-weight: 700; color: var(--text); }
    .settings-user-email { font-size: 12px; color: var(--muted); }

    /* Connected Devices (Garmin) */
    .settings-garmin-row {
      display: flex; align-items: center; justify-content: space-between; gap: 14px;
      padding: 14px; background: rgba(255,255,255,0.03);
      border: 1px solid var(--border); border-radius: 12px; margin-bottom: 4px;
    }
    .settings-garmin-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .settings-garmin-icon { font-size: 24px; flex-shrink: 0; }
    .settings-garmin-name { font-size: 14px; font-weight: 700; color: var(--text); }
    .settings-garmin-status { font-size: 12px; color: var(--muted); margin-top: 2px; }
    .settings-garmin-status.connected { color: var(--brand2); font-weight: 700; }
    .settings-garmin-btn {
      flex-shrink: 0; background: linear-gradient(135deg, var(--brand), var(--brand2)); color: #fff;
      border: none; border-radius: 9px; padding: 9px 16px; font-size: 12.5px; font-weight: 700;
      text-decoration: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
      transition: opacity 0.15s, transform 0.1s; white-space: nowrap;
    }
    .settings-garmin-btn:hover { opacity: 0.88; transform: translateY(-1px); }

    /* ── GARMIN CONNECT PROMPT (standalone, for returning not-yet-connected users) ── */
    .garmin-prompt-overlay {
      position: fixed; inset: 0; z-index: 8500;
      background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
      display: none; align-items: center; justify-content: center; padding: 20px;
    }
    .garmin-prompt-overlay.open { display: flex; }
    .garmin-prompt-box {
      background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
      width: 100%; max-width: 380px; padding: 32px 28px 26px; text-align: center; position: relative;
      box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px var(--b1-10);
    }
    .garmin-prompt-close {
      position: absolute; top: 14px; right: 14px;
      background: rgba(255,255,255,0.06); border: none;
      color: var(--muted); cursor: pointer; width: 28px; height: 28px;
      border-radius: 8px; font-size: 16px; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.12s, color 0.12s;
    }
    .garmin-prompt-close:hover { background: rgba(255,255,255,0.12); color: var(--text); }
    .garmin-prompt-icon { font-size: 40px; margin-bottom: 10px; }
    .garmin-prompt-box h2 { font-size: 19px; font-weight: 800; color: var(--text); margin: 0 0 8px; }
    .garmin-prompt-sub { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0 0 22px; }
    .garmin-prompt-btn {
      display: block; background: linear-gradient(135deg, var(--brand), var(--brand2)); color: #fff;
      border-radius: 10px; padding: 13px; font-size: 14.5px; font-weight: 700; text-decoration: none;
      margin-bottom: 10px; transition: opacity 0.15s, transform 0.1s;
    }
    .garmin-prompt-btn:hover { opacity: 0.88; transform: translateY(-1px); }
    .garmin-prompt-skip {
      width: 100%; background: none; border: 1px solid var(--border); color: var(--muted);
      border-radius: 9px; padding: 10px; font-size: 13px; cursor: pointer; font-family: inherit;
    }

    /* ── TRAINING ZONES (Settings) ── */
    .zones-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
    .zones-tab {
      flex: 1; min-width: 70px; background: rgba(255,255,255,0.03); border: 1px solid var(--border);
      color: var(--muted); border-radius: 9px; padding: 8px 10px; font-size: 12px; font-weight: 700;
      cursor: pointer; font-family: inherit; transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .zones-tab.active {
      background: linear-gradient(135deg, var(--brand), var(--brand2)); color: #fff; border-color: transparent;
    }
    .zones-panel { margin-bottom: 4px; }
    .zones-loading, .zones-empty {
      padding: 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--border);
      border-radius: 12px; font-size: 12.5px; color: var(--muted); text-align: center;
    }
    .zones-calc-note {
      padding: 9px 12px; margin-bottom: 8px; background: rgba(251,191,36,0.1);
      border: 1px solid rgba(251,191,36,0.3); border-radius: 10px;
      font-size: 11.5px; color: #fbbf24; line-height: 1.4;
    }
    .zones-threshold-row {
      display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px;
      background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px;
    }
    .zones-threshold-main { flex: 1; min-width: 0; }
    .zones-threshold-inputs { display: flex; align-items: center; gap: 6px; }
    .zones-threshold-check {
      flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
      background: rgba(52,211,153,0.15); color: #34d399; font-size: 12px; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
    }
    .zones-calc-btn {
      flex-shrink: 0; background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text);
      border-radius: 8px; padding: 7px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer;
      font-family: inherit; white-space: nowrap; transition: background 0.15s, border-color 0.15s;
    }
    .zones-calc-btn:hover { background: rgba(255,255,255,0.09); border-color: var(--brand); }
    .zones-calc-overlay {
      position: fixed; inset: 0; z-index: 9500; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
      display: flex; align-items: center; justify-content: center; padding: 20px;
    }
    .zones-calc-modal {
      width: 100%; max-width: 380px; background: var(--panel, #111827); border: 1px solid var(--border);
      border-radius: 16px; padding: 20px; max-height: 85vh; overflow-y: auto;
    }
    .zones-calc-modal-title { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
    .zones-calc-modal-sub { font-size: 12px; color: var(--muted); line-height: 1.4; margin-bottom: 14px; }
    .zones-calc-modal-rows {
      display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px;
      max-height: 260px; overflow-y: auto;
    }
    .zones-calc-popup-row {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      padding: 8px 10px; background: rgba(255,255,255,0.03); border-radius: 8px; font-size: 12.5px;
    }
    .zones-calc-popup-zone { color: var(--muted); font-weight: 700; }
    .zones-calc-popup-range { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
    .zones-calc-modal-btns { display: flex; gap: 10px; }
    .zones-calc-cancel-btn {
      flex: 1; background: none; border: 1px solid var(--border); color: var(--muted);
      border-radius: 9px; padding: 10px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
    }
    .zones-calc-confirm-btn {
      flex: 1; background: linear-gradient(135deg, var(--brand), var(--brand2)); color: #fff; border: none;
      border-radius: 9px; padding: 10px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
    }
    .zones-field-lbl {
      font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
      color: var(--muted); display: block; margin-bottom: 4px;
    }
    .zones-threshold-input, .zones-threshold-unit-input, .zones-row-input {
      background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text);
      border-radius: 7px; padding: 7px 9px; font-size: 12.5px; font-family: inherit; width: 100%;
    }
    .zones-threshold-unit-input { max-width: 90px; }
    .zones-rows { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
    .zones-row {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 10px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 10px;
    }
    .zones-row-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; margin-top: 9px; }
    .zones-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
    .zones-row-name {
      max-width: 160px; font-weight: 700; background: rgba(255,255,255,0.05); border: 1px solid var(--border);
      color: var(--text); border-radius: 7px; padding: 7px 9px; font-size: 12.5px; font-family: inherit;
    }
    .zones-row-fields { display: flex; gap: 8px; flex-wrap: wrap; }
    .zones-row-field { flex: 1; min-width: 90px; }
    .zones-pace-inputs { display: flex; align-items: center; gap: 4px; }
    .zones-pace-min, .zones-pace-sec {
      background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text);
      border-radius: 7px; padding: 7px 6px; font-size: 12.5px; font-family: inherit; width: 100%; min-width: 0;
    }
    .zones-pace-sep { color: var(--muted); font-weight: 700; flex-shrink: 0; }
    .zones-save-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
    .zones-save-btn {
      background: linear-gradient(135deg, var(--brand), var(--brand2)); color: #fff; border: none;
      border-radius: 9px; padding: 9px 16px; font-size: 12.5px; font-weight: 700; cursor: pointer;
      font-family: inherit; transition: opacity 0.15s;
    }
    .zones-save-btn:disabled { opacity: 0.6; cursor: default; }
    .zones-save-status { font-size: 12px; font-weight: 600; }
    .zones-save-status.ok { color: #34d399; }
    .zones-save-status.err { color: var(--error, #f87171); }

    /* Theme grid */
    .theme-grid {
      display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
    }
    .theme-swatch {
      border-radius: 10px; padding: 8px 6px; cursor: pointer;
      display: flex; flex-direction: column; align-items: center; gap: 5px;
      border: 2px solid transparent;
      transition: border-color 0.15s, transform 0.12s;
      background: rgba(255,255,255,0.03);
    }
    .theme-swatch:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.15); }
    .theme-swatch.active { border-color: var(--brand); }
    .theme-swatch .sw-dots {
      display: flex; gap: 3px;
    }
    .sw-dot { width: 10px; height: 10px; border-radius: 50%; }
    .theme-swatch .sw-name {
      font-size: 8px; font-weight: 700; letter-spacing: 0.5px; color: var(--muted);
      text-align: center; line-height: 1.2;
    }
    .settings-save-row { margin-top: 24px; display: flex; justify-content: flex-end; gap: 10px; }
    .btn-settings-cancel {
      padding: 9px 18px; border-radius: 9px; border: 1px solid var(--border);
      background: transparent; color: var(--muted); font-size: 13px; font-weight: 600;
      cursor: pointer; transition: background 0.12s;
    }
    .btn-settings-cancel:hover { background: rgba(255,255,255,0.05); }
    .btn-settings-save {
      padding: 9px 22px; border-radius: 9px; border: none;
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      color: white; font-size: 13px; font-weight: 700; cursor: pointer;
      transition: opacity 0.12s, transform 0.12s;
    }
    .btn-settings-save:hover { opacity: 0.88; transform: translateY(-1px); }

    /* 20 themes — applied as body[data-theme] overrides */
    body[data-theme="cyber"]      { --brand:#22d3ee; --brand2:#0ea5e9; --brand-glow:rgba(34,211,238,0.35); }
    body[data-theme="rose"]       { --brand:#fb7185; --brand2:#f43f5e; --brand-glow:rgba(251,113,133,0.35); }
    body[data-theme="violet"]     { --brand:#a78bfa; --brand2:#8b5cf6; --brand-glow:rgba(167,139,250,0.35); }
    body[data-theme="solar"]      { --brand:#fb923c; --brand2:#f97316; --brand-glow:rgba(251,146,60,0.35); }
    body[data-theme="lime"]       { --brand:#a3e635; --brand2:#84cc16; --brand-glow:rgba(163,230,53,0.35); }
    body[data-theme="arctic"]     { --brand:#67e8f9; --brand2:#06b6d4; --brand-glow:rgba(103,232,249,0.35); }
    body[data-theme="cherry"]     { --brand:#f9a8d4; --brand2:#ec4899; --brand-glow:rgba(249,168,212,0.35); }
    body[data-theme="gold"]       { --brand:#fbbf24; --brand2:#f59e0b; --brand-glow:rgba(251,191,36,0.35); }
    body[data-theme="ocean"]      { --brand:#38bdf8; --brand2:#0284c7; --brand-glow:rgba(56,189,248,0.35); }
    body[data-theme="toxic"]      { --brand:#4ade80; --brand2:#16a34a; --brand-glow:rgba(74,222,128,0.35); }
    body[data-theme="sunset"]     { --brand:#f87171; --brand2:#ef4444; --brand-glow:rgba(248,113,113,0.35); }
    body[data-theme="galaxy"]     { --brand:#c084fc; --brand2:#9333ea; --brand-glow:rgba(192,132,252,0.35); }
    body[data-theme="mint"]       { --brand:#6ee7b7; --brand2:#10b981; --brand-glow:rgba(110,231,183,0.35); }
    body[data-theme="copper"]     { --brand:#fdba74; --brand2:#ea580c; --brand-glow:rgba(253,186,116,0.35); }
    body[data-theme="steel"]      { --brand:#93c5fd; --brand2:#3b82f6; --brand-glow:rgba(147,197,253,0.35); }
    body[data-theme="magenta"]    { --brand:#f0abfc; --brand2:#d946ef; --brand-glow:rgba(240,171,252,0.35); }
    body[data-theme="teal"]       { --brand:#2dd4bf; --brand2:#0d9488; --brand-glow:rgba(45,212,191,0.35); }
    body[data-theme="amber"]      { --brand:#fcd34d; --brand2:#d97706; --brand-glow:rgba(252,211,77,0.35); }
    body[data-theme="ruby"]       { --brand:#fca5a5; --brand2:#b91c1c; --brand-glow:rgba(252,165,165,0.35); }
    /* default = indigo/green (no data-theme needed) */
    body[data-theme="default"]    { --brand:#818cf8; --brand2:#34d399; --brand-glow:var(--b1-35); }

    /* ── RESPONSE ACTION BUTTONS ── */
    .msg-actions {
      display: flex;
      gap: 6px;
      margin-top: 12px;
      flex-wrap: wrap;
    }
    .btn-action {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 11px;
      border-radius: 7px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.03);
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.12s, color 0.12s, border-color 0.12s;
      white-space: nowrap;
    }
    .btn-action:hover {
      background: rgba(255,255,255,0.07);
      color: var(--text);
      border-color: rgba(255,255,255,0.14);
    }
    .btn-action svg { width: 13px; height: 13px; flex-shrink: 0; }
    .btn-action.success { color: var(--brand2); border-color: var(--b2-30); background: var(--b2-06); }
    .btn-action.speaking { color: var(--brand); border-color: var(--b1-30); background: var(--b1-06); }
    .btn-branch:hover { color: var(--brand); border-color: var(--b1-40); background: var(--b1-06); }
    .user-actions { opacity: 1; }

    /* ── LONG-PRESS CONTEXT MENU ── */
    #msgContextMenu {
      position: fixed;
      z-index: 9999;
      background: #1a1a2e;
      border: 1px solid rgba(255,255,255,0.13);
      border-radius: 13px;
      padding: 6px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.6);
      display: none;
      flex-direction: column;
      gap: 2px;
      min-width: 150px;
    }
    #msgContextMenu.visible { display: flex; }
    .ctx-menu-item {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 11px 14px;
      border-radius: 8px;
      border: none;
      background: transparent;
      color: var(--text);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      text-align: left;
      width: 100%;
      transition: background 0.1s;
    }
    .ctx-menu-item:hover, .ctx-menu-item:active { background: rgba(255,255,255,0.09); }
    .ctx-menu-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); }

    /* ── FOLLOW-UP SUGGESTION CHIPS ── */
    .follow-up-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }
    .follow-up-chip {
      padding: 7px 14px;
      border-radius: 99px;
      border: 1px solid var(--b1-30);
      background: var(--b1-07);
      color: var(--brand);
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, transform 0.1s;
      text-align: left;
      line-height: 1.4;
    }
    .follow-up-chip:hover {
      background: var(--b1-16);
      border-color: var(--b1-55);
      transform: translateY(-1px);
    }
    @media (max-width: 640px) {
      .follow-up-chip { font-size: 12px; padding: 6px 12px; }
    }

    /* ── ATTACH BUTTON ── */
    .btn-attach {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px dashed var(--border);
      background: none;
      color: var(--muted);
      cursor: pointer;
      font-size: 18px;
      line-height: 1;
      transition: background 0.12s, color 0.12s, border-color 0.12s;
      flex-shrink: 0;
      margin-bottom: 3px;
    }
    .btn-attach:hover { background: var(--b1-10); color: var(--brand); border-color: var(--brand); }

    /* ── IMAGE PREVIEW STRIP ── */
    .image-preview-strip {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      max-width: 780px;
      margin: 0 auto 8px;
      padding: 0;
    }
    .img-thumb {
      position: relative;
      width: 60px;
      height: 60px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid var(--border);
      flex-shrink: 0;
    }
    .img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .img-thumb-remove {
      position: absolute;
      top: 3px;
      right: 3px;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      background: rgba(0,0,0,0.75);
      border: none;
      color: white;
      font-size: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }
    .img-thumb-remove:hover { background: var(--red); }

    /* ── CHAT IMAGE THUMBNAILS (in message bubbles) ── */
    .msg-images {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }
    .msg-images img {
      max-width: 200px;
      max-height: 160px;
      border-radius: 8px;
      border: 1px solid var(--border);
      object-fit: cover;
      cursor: pointer;
    }

    /* Only ever shows text once the user is near the 4000-char limit (see JS) — a plain empty
       span the rest of the time, so it costs no visual space in the single-line row. */
    #charCount {
      font-size: 10px;
      color: var(--muted);
      flex-shrink: 0;
      align-self: center;
      white-space: nowrap;
    }

    .btn-mic, .btn-send {
      margin-bottom: 3px;
    }
    .btn-send {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      background: linear-gradient(135deg, var(--brand2), var(--brand2-dk));
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.15s, transform 0.12s, box-shadow 0.15s;
      box-shadow: 0 0 20px var(--b2-25);
      flex-shrink: 0;
    }
    .btn-send:hover:not(:disabled) {
      transform: scale(1.05);
      box-shadow: 0 0 28px var(--b2-40);
    }
    .btn-send:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      box-shadow: none;
    }
    .btn-send svg { display: block; }

    .disclaimer {
      text-align: center;
      font-size: 10px;
      color: #1e293b;
      margin-top: 6px;
      max-width: 780px;
      margin-left: auto;
      margin-right: auto;
    }

    /* ── HOME MODE: content + input centered together, not pinned to bottom ── */
    .main.home-mode .chat-area {
      flex: 0 0 auto;
      overflow: visible;
      margin-top: auto;   /* pushes the content+input group down from topbar */
    }
    .main.home-mode .input-area {
      flex: 0 0 auto;
      border-top: none;
      padding-top: 8px;
      margin-bottom: auto; /* pushes the content+input group up from bottom */
    }

    /* ── TOPBAR USER INFO & RIGHT GROUP ── */
    #userInfoBar { flex-shrink: 0; }
    #topbarRight { flex-shrink: 0; }

    /* ── HAMBURGER (desktop hidden) ── */
    .btn-hamburger {
      display: none;
      background: none;
      border: none;
      color: var(--muted);
      cursor: pointer;
      padding: 6px;
      border-radius: 8px;
      flex-shrink: 0;
      transition: background 0.12s;
    }
    .btn-hamburger:hover { background: rgba(255,255,255,0.06); color: var(--text); }

    /* ── SIDEBAR BACKDROP (mobile overlay) ── */
    .sidebar-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.65);
      z-index: 40;
      backdrop-filter: blur(2px);
    }

    /* ── MOBILE ── */
    @media (max-width: 640px) {
      /* Sidebar: slide-in drawer, hidden off left edge. Wide + large text so it's
         readable on a phone (low-vision friendly) — takes up most of the screen width. */
      /* The whole drawer is ONE scroll container on mobile — no nested overflow:auto boxes
         inside it. Nested scroll regions inside a position:fixed ancestor are what caused every
         round of the "can't reach the bottom / snaps back" bug (WebKit historically mishandles
         that combination in several different ways). .dash-panel-head is pinned via
         position:sticky further down instead of living in its own scroll box, and .chat-list no
         longer scrolls independently either — everything scrolls together, reliably. */
      .sidebar {
        position: fixed;
        top: 0;
        left: -100vw;
        width: 420px;
        max-width: 95vw;
        height: 100svh;
        z-index: 50;
        transition: left 0.25s cubic-bezier(0.4,0,0.2,1);
        box-shadow: none;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        touch-action: pan-y;
      }
      .sidebar.open {
        left: 0;
        box-shadow: 8px 0 32px rgba(0,0,0,0.6);
      }
      .sidebar-backdrop.open { display: block; }

      /* Bigger everything inside the mobile sidebar for readability */
      .sidebar-header { padding: 20px 18px 16px; }
      .logo { font-size: 22px; }
      .btn-new { font-size: 15px; padding: 9px 14px; }
      .btn-new svg { width: 18px; height: 18px; }

      /* Mobile sidebar is wide enough (95vw) to keep the original 2-column grid. No max-height
         here (unlike an earlier version of this rule) — mobile has no internal scrollboxes at
         all, the whole sidebar scrolls as one unit, so a capped height + overflow:visible (set
         further down) meant tall content just spilled out and rendered on top of whatever
         section came after it instead of being contained or scrolled. */
      .sidebar-quickactions { grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 14px 6px; }
      .qa-btn { padding: 14px 12px; border-radius: 14px; gap: 10px; }
      .qa-icon { width: 34px; height: 34px; border-radius: 10px; font-size: 17px; }
      .qa-label { font-size: 19px; font-weight: 800; line-height: 1.15; }
      .qa-group-lbl { font-size: 13px; letter-spacing: 1px; margin-top: 16px; padding-top: 14px; }
      .qa-group-lbl-first { margin-top: 0; padding-top: 0; }

      /* Sections: bigger drag/collapse chrome for touch, and — same reasoning as the dash-panel
         reset below — every bit of desktop's flex:1/min-height:0 sizing gets explicitly reset
         back to normal in-flow sizing so nothing here can reintroduce a nested scroll region
         inside the position:fixed drawer. */
      .sidebar-sections { flex: none; }
      .sidebar-section-hdr { padding: 14px 16px; gap: 10px; }
      .sb-section-title { font-size: 15px; gap: 8px; }
      .sb-section-icon { width: 15px; height: 15px; }
      .sb-move-btn { padding: 3px 6px; }
      .sb-move-btn svg { width: 12px; height: 12px; }
      .sb-collapse-btn { padding: 6px; }
      .sb-collapse-btn svg { width: 14px; height: 14px; }

      .chat-list { flex: none; overflow: visible; max-height: none; padding: 6px 10px 16px; }
      .chat-item { padding: 13px 12px; gap: 10px; border-radius: 10px; }
      .chat-item-icon { font-size: 18px; }
      .chat-item-title { font-size: 16px; }
      .chat-item-del { font-size: 20px; padding: 4px 6px; }
      .sidebar-quickactions { flex: none; min-height: auto; overflow: visible; }
      .ap-list { flex: none; min-height: auto; overflow: visible; }
      .tv-panel { flex: none; min-height: auto; overflow: visible; }
      .tv-hist-list { max-height: none; overflow: visible; }

      /* No section has its own scrollbox on mobile — every one is plain in-flow content inside
         the sidebar's single overall scroll (This Week's head stays pinned via position:sticky,
         set further down). Explicitly resets ALL of desktop's flex:1/min-height:0 sizing back to
         normal in-flow sizing on every section (not just This Week, and not just the properties
         that differ) — leaving any of it active here risks reintroducing the nested-scroll-in-
         position:fixed bugs that took several rounds to fix. */
      .sidebar-section { flex: none; display: block; }
      .sb-section-body { flex: none; min-height: auto; display: block; overflow: visible; }
      .dash-panel { flex: none; }
      .dash-panel-head {
        position: sticky;
        top: 0;
        z-index: 3;
        background: var(--sidebar);
      }
      .dash-panel-scroll { flex: none; min-height: auto; max-height: none; overflow: visible; padding-bottom: 6px; }

      /* Workout time/distance bars: bigger numbers + thicker bars for readability */
      .dash-wo-type { font-size: 13px; }
      .dash-wo-metric-val { font-size: 13px; min-width: 56px; }
      .dash-wo-metric-ico { font-size: 12px; width: 15px; }
      .dash-wo-metric-bar-wrap { height: 8px; }
      .dash-wo-icon { width: 32px; height: 32px; font-size: 15px; }

      .dash-range-chip { font-size: 12px; padding: 6px 2px; }
      .dash-graph { height: 160px; }
      .dash-graph-col { width: 64px; }
      .dash-graph-lbl { font-size: 12px; }
      .dash-graph-sub { font-size: 11px; }
      /* Per-workout bars need a wider touch target than the desktop hover-driven size — a
         64-90px mobile column split into up to 6 bars is still tight, so widen the gap and
         floor width so a finger can land on one bar without also catching its neighbor. */
      .dash-graph-bar-track-multi { gap: 3px; }
      .dash-graph-bar-click { min-width: 8px; touch-action: manipulation; }
      .dash-graph-more { font-size: 10px; }

      .sidebar-footer { padding: 16px 18px; gap: 12px; }
      .model-badge { font-size: 13px; padding: 6px 10px; }
      .model-label { font-size: 13px; }
      /* Mobile's sidebar is already a fixed-width slide-in drawer (see .sidebar rules above) —
         a "wider" toggle has nothing meaningful to do there. */
      .btn-sidebar-width { display: none; }

      /* Show hamburger */
      .btn-hamburger { display: flex; }

      /* Main: exactly the viewport width, nothing can escape */
      .main {
        width: 100vw;
        max-width: 100vw;
        min-width: 0;
        overflow: hidden;
        flex: 1;
        height: 100%;
        touch-action: pan-y;
      }

      /* Topbar: must fit entirely within viewport row */
      .topbar {
        width: 100%;
        max-width: 100%;
        padding: 10px 12px;
        gap: 8px;
        overflow: hidden;
        box-sizing: border-box;
        flex-shrink: 0;
      }
      .topbar-meta { display: none; }

      /* User info: avatar + logout only, hide all text */
      #userInfoBar { flex-shrink: 0; gap: 6px; max-width: none; }
      #userDisplayName, #userAthleteType { display: none; }

      /* Right controls: icon-only */
      #topbarRight { flex-shrink: 0; gap: 6px; }
      .btn-theme span { display: none; }
      .btn-theme { padding: 5px 7px; min-width: 0; }
      .btn-login { padding: 6px 10px; font-size: 12px; }

      /* Chat area: vertical pan only — touch-action is the iOS kill switch for horizontal scroll */
      .chat-area {
        overflow-x: hidden;
        overflow-y: auto;
        touch-action: pan-y;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }

      /* Messages */
      .message-group {
        padding: 14px 12px;
        overflow: hidden;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
      }

      /* Message rows */
      .msg { max-width: 100%; overflow: hidden; }
      .msg-body { overflow: hidden; max-width: 100%; min-width: 0; }

      /* Message text: always wraps, never overflows */
      .msg-content {
        max-width: 100%;
        overflow: hidden;
        overflow-wrap: break-word;
        word-break: break-word;
      }

      /* Code blocks: wrap on mobile instead of creating wide pre elements */
      .msg-content pre {
        max-width: 100%;
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-word;
        box-sizing: border-box;
        touch-action: pan-x pan-y;
      }
      .msg-content pre code { white-space: pre-wrap; word-break: break-word; }
      .msg-content img { max-width: 100%; height: auto; display: block; }

      /* Data tables: never squish text to fit — scroll sideways within the card instead */
      .msg-content .md-table-wrap { max-width: 100%; touch-action: pan-x pan-y; }
      .msg-content .md-table { font-size: 14px; }
      .msg-content .md-table thead th, .msg-content .md-table tbody td { padding: 11px 14px; }
      .msg-content table { max-width: 100%; width: 100%; display: block; overflow-x: auto; }

      /* Input area — ChatGPT-style compact single row. Dropping the disclaimer line and the
         old two-row footer (hint text + separate button row) is what actually buys back screen
         height here; the row itself only needs to be tall enough for one line of text. */
      .input-area {
        padding: 6px 10px;
        padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
        overflow: visible;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      .input-wrap { max-width: 100%; width: 100%; box-sizing: border-box; padding: 5px 6px 5px 12px; }

      /* 16px minimum prevents iOS from auto-zooming the page when the input is focused */
      #userInput { font-size: 16px; }

      /* Disclaimer takes real vertical space away from the response on a phone screen — drop it
         entirely on mobile; it stays visible on desktop where that isn't a constraint. */
      .disclaimer { display: none; }

      /* Empty state */
      .empty-state { padding: 0 12px; overflow: hidden; }
      .empty-logo { width: 220px; height: 220px; margin-bottom: 0; }
      .empty-logo img { width: 220px; height: 220px; }
      .empty-heading { font-size: 20px; }
      .empty-sub { font-size: 13px; margin-bottom: 20px; }
      .starter-grid { grid-template-columns: 1fr; gap: 8px; width: 100%; }
      .starter-card { padding: 12px 14px; }

      /* Login form inputs also need 16px to prevent iOS zoom */
      .login-field input { font-size: 16px; }

      /* Mobile home-mode: fill space with chat area so input stays at bottom */
      .main.home-mode .chat-area {
        flex: 1 1 auto;
        overflow-y: auto;
        margin-top: 0;
      }
      .main.home-mode .input-area {
        flex: 0 0 auto;
        margin-bottom: 0;
      }
    }

    /* ── TRIVAULT (TriTokens: earn + redeem) ── */
    /* flex:1/min-height:0/overflow-y:auto — same fix already applied to .ap-list (Auto Pilot)
       above: .sb-section-body's overflow:hidden is a hard clipping boundary, not a scrollbar —
       every section needs its OWN inner scroll region or anything taller than the sidebar's
       current flex-allocated height for that section (the Redeem tab's merch grid, past the
       token bundles) just gets cut off instead of being reachable by scrolling to it. */
    .tv-panel { padding: 12px 14px 16px; flex: 1; min-height: 0; overflow-y: auto; }
    .tv-tabs { display: flex; gap: 6px; margin-bottom: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 3px; }
    .tv-tab {
      flex: 1; background: none; border: none; border-radius: 8px; padding: 8px 10px;
      font-size: 11.5px; font-weight: 800; letter-spacing: 0.4px; color: #64748b; cursor: pointer;
      transition: all 0.15s;
    }
    .tv-tab:hover { color: #94a3b8; }
    .tv-tab.active { background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%); color: #fff; box-shadow: 0 0 16px -4px var(--brand-glow, rgba(129,140,248,0.6)); }

    .tv-balance { display: flex; justify-content: center; margin: 6px 0 16px; }
    .tv-balance-ring {
      position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
      width: 128px; height: 128px; border-radius: 50%;
      background: radial-gradient(circle at 50% 40%, rgba(251,191,36,0.16) 0%, rgba(10,14,26,0.4) 72%);
      border: 2px solid rgba(251,191,36,0.45);
      box-shadow: 0 0 30px -6px rgba(251,191,36,0.55), inset 0 0 24px -10px rgba(251,191,36,0.4);
    }
    .tv-balance-num { font-size: 30px; font-weight: 900; color: #fde68a; text-shadow: 0 0 18px rgba(251,191,36,0.7); font-variant-numeric: tabular-nums; }
    .tv-balance-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #d4a72c; margin-top: 2px; }
    .tv-balance-sm { margin: 0 0 14px; }
    .tv-balance-ring-sm { width: 92px; height: 92px; }
    .tv-balance-ring-sm .tv-balance-num { font-size: 20px; }

    .tv-cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 16px; }
    .tv-cat-chip {
      display: flex; flex-direction: column; align-items: center; gap: 2px;
      background: color-mix(in srgb, var(--tvc, #818cf8) 8%, rgba(255,255,255,0.02));
      border: 1px solid color-mix(in srgb, var(--tvc, #818cf8) 30%, transparent);
      border-radius: 10px; padding: 8px 4px 7px;
    }
    .tv-cat-icon { font-size: 15px; filter: drop-shadow(0 0 4px var(--tvc, transparent)); }
    .tv-cat-val { font-size: 13px; font-weight: 900; color: #f1f5f9; font-variant-numeric: tabular-nums; }
    .tv-cat-lbl { font-size: 7.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: #64748b; }
    .tv-cat-bar { width: 100%; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.08); margin-top: 3px; overflow: hidden; }
    .tv-cat-bar-fill { height: 100%; background: var(--tvc, #818cf8); box-shadow: 0 0 6px var(--tvc, transparent); border-radius: 2px; }

    .tv-hist-hdr { font-size: 10px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: #475569; margin: 4px 0 8px; }
    .tv-hist-list {
      display: flex; flex-direction: column; gap: 8px;
      max-height: 360px; overflow-y: auto; padding-right: 4px;
      scrollbar-width: thin; scrollbar-color: rgba(251,191,36,0.5) transparent;
    }
    .tv-hist-list::-webkit-scrollbar { width: 6px; }
    .tv-hist-list::-webkit-scrollbar-track { background: transparent; }
    .tv-hist-list::-webkit-scrollbar-thumb { background: rgba(251,191,36,0.4); border-radius: 4px; }
    .tv-hist-list::-webkit-scrollbar-thumb:hover { background: rgba(251,191,36,0.6); }
    /* Taller bubble, explicit line-heights, and a real flex gap (not a margin, which can collapse
       in ways that are easy to get subtly wrong) between the name and meta lines — the previous
       version was cramped enough that the two lines visually ran into each other. */
    .tv-hist-row {
      position: relative; display: flex; align-items: center; gap: 10px;
      background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px; padding: 12px 12px; min-height: 52px; box-sizing: border-box;
    }
    .tv-hist-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tvc, #818cf8); box-shadow: 0 0 8px var(--tvc, transparent); }
    .tv-hist-icon { font-size: 17px; filter: drop-shadow(0 0 4px var(--tvc, transparent)); flex-shrink: 0; }
    .tv-hist-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    .tv-hist-name { font-size: 12.5px; line-height: 1.3; font-weight: 700; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tv-hist-meta { font-size: 10px; line-height: 1.3; color: #94a3b8; }
    .tv-hist-plus { font-size: 12px; font-weight: 900; color: #fde68a; text-shadow: 0 0 8px rgba(251,191,36,0.6); flex-shrink: 0; }
    .tv-loadmore-btn {
      width: 100%; margin-top: 10px; padding: 8px; border-radius: 8px; cursor: pointer;
      background: rgba(129,140,248,0.08); border: 1px solid rgba(129,140,248,0.3); color: var(--brand);
      font-size: 10.5px; font-weight: 800;
    }
    .tv-loadmore-btn:hover:not(:disabled) { background: rgba(129,140,248,0.16); }
    .tv-loadmore-btn:disabled { opacity: 0.6; cursor: default; }

    .tv-redeem-hdr { font-size: 10px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: #475569; margin: 0 0 8px; }
    .tv-bundle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .tv-bundle-card {
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      background: linear-gradient(160deg, rgba(251,191,36,0.1) 0%, rgba(255,255,255,0.02) 100%);
      border: 1px solid rgba(251,191,36,0.3); border-radius: 12px; padding: 10px 6px;
    }
    .tv-bundle-tokens { font-size: 13px; font-weight: 900; color: #fde68a; text-shadow: 0 0 8px rgba(251,191,36,0.5); }
    .tv-bundle-label { font-size: 8.5px; font-weight: 700; color: #94a3b8; text-align: center; }
    .tv-bundle-buy {
      width: 100%; margin-top: 4px; padding: 6px 4px; border-radius: 7px; cursor: pointer;
      background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%); border: none; color: #fff;
      font-size: 10.5px; font-weight: 800;
    }
    .tv-bundle-buy:hover:not(:disabled) { filter: brightness(1.1); }
    .tv-bundle-buy:disabled { opacity: 0.6; cursor: default; }
    .tv-redeem-status { margin-top: 8px; font-size: 10.5px; font-weight: 700; text-align: center; min-height: 14px; }

    .tv-merch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .tv-merch-card {
      display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px;
      background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px; padding: 12px 8px 10px;
    }
    /* Real product photography (logo composited onto tee/cap/glass/stickers/bottle, assets/img/merch/),
       fixed to the same footprint the old SVG placeholder used so it can't blow out the card. */
    .tv-merch-art {
      position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden;
      margin: 0 auto 4px; box-shadow: 0 0 14px -4px rgba(56,189,248,0.45), inset 0 0 0 1px rgba(56,189,248,0.25);
    }
    .tv-merch-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .tv-merch-name { font-size: 11px; font-weight: 800; color: #e2e8f0; }
    .tv-merch-desc { font-size: 9px; color: #64748b; line-height: 1.3; }
    .tv-merch-btn {
      width: 100%; margin-top: 6px; padding: 6px 4px; border-radius: 7px; cursor: pointer;
      background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.4); color: #fde68a;
      font-size: 10.5px; font-weight: 800;
    }
    .tv-merch-btn:hover { background: rgba(251,191,36,0.22); }
    .tv-redeem-note { margin-top: 12px; font-size: 9.5px; color: #475569; text-align: center; line-height: 1.4; }

    body.light .tv-hist-row, body.light .tv-merch-card { background: rgba(0,0,0,0.02); border-color: var(--border); }
    body.light .tv-hist-name, body.light .tv-merch-name { color: #0f172a; }
    body.light .tv-cat-chip { background: color-mix(in srgb, var(--tvc, #818cf8) 6%, rgba(0,0,0,0.015)); }

    /* ── TRIVAULT CHECKOUT MODAL (Stripe Embedded Checkout, mounted inline) ── */
    .tv-checkout-overlay {
      display: none; position: fixed; inset: 0; z-index: 9200;
      background: rgba(4,7,15,0.72); backdrop-filter: blur(3px);
      align-items: center; justify-content: center; padding: 20px;
    }
    .tv-checkout-overlay.open { display: flex; }
    .tv-checkout-modal {
      width: 100%; max-width: 480px; max-height: 88vh; display: flex; flex-direction: column;
      background: linear-gradient(180deg, rgba(10,14,26,0.98) 0%, rgba(8,12,22,0.98) 100%);
      border: 1px solid rgba(56,189,248,0.35); border-radius: 16px; overflow: hidden;
      box-shadow: 0 0 50px -8px rgba(56,189,248,0.4), 0 20px 60px -10px rgba(0,0,0,0.7);
      animation: tvModalIn 0.22s cubic-bezier(0.16,1,0.3,1);
    }
    @keyframes tvModalIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
    .tv-checkout-hdr {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 16px; font-size: 13px; font-weight: 800; letter-spacing: 0.4px; color: #7dd3fc;
      background: linear-gradient(90deg, rgba(56,189,248,0.1), rgba(52,211,153,0.06));
      border-bottom: 1px solid rgba(56,189,248,0.2);
    }
    .tv-checkout-close {
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #94a3b8;
      width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 12px; line-height: 1;
    }
    .tv-checkout-close:hover { background: rgba(255,255,255,0.12); color: #e2e8f0; }
    .tv-checkout-mount { flex: 1; overflow-y: auto; background: #fff; min-height: 320px; }
    body.light .tv-checkout-modal { background: #fff; border-color: var(--border); }
    body.light .tv-checkout-hdr { color: #0f172a; background: rgba(56,189,248,0.08); }

    /* ── TRICOACH AI SIDEBAR PANEL ── uses the same --brand/--brand2/--b1-*/--b2-* variables
       theme.js sets per color theme, so it re-skins automatically with the rest of the app. */
    .tc-soon-badge {
      font-size: 8px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
      color: #0a0a12; background: linear-gradient(135deg, var(--brand), var(--brand2));
      padding: 2px 6px; border-radius: 100px; margin-left: 5px; vertical-align: 1px;
    }
    .tc-block {
      padding: 10px 12px; border-bottom: 1px solid var(--border);
    }
    .tc-block:last-child { border-bottom: none; }
    .tc-block-title {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
      color: var(--muted); margin-bottom: 8px;
    }
    .tc-mini-btn {
      font-size: 10.5px; font-weight: 700; color: var(--brand); background: none; border: none;
      cursor: pointer; padding: 2px 4px; text-transform: none; letter-spacing: 0;
    }
    .tc-mini-btn:disabled { opacity: 0.5; cursor: not-allowed; }

    /* Hero / countdown */
    .tc-hero { background: linear-gradient(135deg, var(--b1-10), var(--b2-8)); border-radius: 10px; margin: 8px; padding: 10px 12px; border-bottom: none !important; }
    .tc-hero-empty { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
    .tc-hero-name { font-size: 13.5px; font-weight: 800; color: var(--text); }
    .tc-hero-meta { font-size: 11px; color: var(--muted); margin: 2px 0 6px; }
    .tc-countdown { font-size: 12px; color: var(--text); margin-bottom: 8px; }
    .tc-cd-num { font-weight: 800; color: var(--brand-lt); font-size: 15px; }
    .tc-pill-row { display: flex; gap: 5px; flex-wrap: wrap; }
    .tc-pill {
      font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 100px;
      background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--text);
      cursor: pointer; white-space: nowrap;
    }
    .tc-pill.active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--b1-30) inset; }
    .tc-pill.tc-add { color: var(--brand); border-style: dashed; }
    body.light .tc-pill { background: rgba(0,0,0,0.04); }

    /* Readiness */
    .tc-readiness-row { display: flex; align-items: center; gap: 12px; }
    .tc-ring {
      --pct: 70; width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
      background: conic-gradient(var(--ring-color, var(--brand)) calc(var(--pct) * 1%), rgba(255,255,255,0.08) 0);
      display: flex; align-items: center; justify-content: center; position: relative;
    }
    .tc-ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--bg); }
    .tc-ring span { position: relative; z-index: 1; font-size: 11.5px; font-weight: 800; color: var(--text); }
    .tc-readiness-headline { font-size: 12.5px; font-weight: 700; color: var(--text); }
    .tc-readiness-explain { font-size: 10.5px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
    .tc-factors { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
    .tc-factor { font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--border); }
    .tc-factor.pos { color: var(--brand2); border-color: var(--b2-25); background: var(--b2-8); }
    .tc-factor.neg { color: var(--red); border-color: rgba(248,113,113,0.3); background: rgba(248,113,113,0.08); }

    /* Periodization phase strip (Base -> Build -> Peak -> Taper -> Race Week) */
    .tc-phase-strip { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; margin-bottom: 6px; }
    .tc-phase-chip { font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 100px; color: var(--muted); border: 1px solid var(--border); }
    .tc-phase-chip.current { color: #0a0a12; background: linear-gradient(135deg, var(--brand), var(--brand2)); border-color: transparent; }
    .tc-phase-arrow { color: var(--muted); font-size: 10px; }
    .tc-phase-meta { font-size: 11px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
    .tc-phase-desc { font-size: 10px; color: var(--muted); line-height: 1.4; }
    .tc-phase-tag {
      display: inline-block; font-size: 8px; font-weight: 800; text-transform: uppercase;
      color: var(--brand-lt); border: 1px solid var(--b1-30); background: var(--b1-10);
      padding: 1px 5px; border-radius: 100px; margin-left: 4px; vertical-align: 1px;
    }
    .tc-row-desc { font-size: 9.5px; color: var(--muted); line-height: 1.4; margin-top: 3px; white-space: pre-wrap; }

    /* Adaptive loop */
    .tc-loop-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 10.5px; }
    .tc-loop-stage { padding: 3px 7px; border-radius: 100px; border: 1px solid var(--border); color: var(--muted); font-weight: 700; }
    .tc-loop-stage.done { color: var(--brand2); border-color: var(--b2-25); background: var(--b2-8); }
    .tc-loop-stage.current { color: var(--brand-lt); border-color: var(--b1-40); background: var(--b1-10); }
    .tc-loop-arrow { color: var(--muted); font-size: 12px; }

    /* Quick actions */
    .tc-qa-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .tc-qa-btn {
      font-size: 11px; font-weight: 700; padding: 7px 6px; border-radius: 8px;
      border: 1px solid var(--border); background: rgba(255,255,255,0.03); color: var(--text);
      cursor: pointer; text-align: center;
    }
    .tc-qa-btn:hover { background: rgba(255,255,255,0.07); }
    .tc-qa-btn:disabled { opacity: 0.6; cursor: not-allowed; }

    /* Key/value rows */
    .tc-kv { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
    .tc-kv b { color: var(--text); }
    .tc-kv-note { font-size: 10.5px; color: var(--muted); line-height: 1.5; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }

    /* Row items (goals/injuries/suggestions) */
    .tc-row-item { display: flex; align-items: flex-start; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--border); }
    .tc-row-item:last-child { border-bottom: none; }
    .tc-row-main { flex: 1; min-width: 0; }
    .tc-row-title { font-size: 11.5px; font-weight: 700; color: var(--text); }
    .tc-row-sub { font-size: 10px; color: var(--muted); margin-top: 1px; }
    .tc-suggestion { border-left: 2px solid var(--brand); padding-left: 6px; }
    .tc-icon-btn {
      width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--border);
      background: transparent; color: var(--muted); cursor: pointer; font-size: 11px;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .tc-icon-btn.danger:hover { color: var(--red); border-color: rgba(248,113,113,0.4); }
    .tc-badge-sev { font-size: 8.5px; font-weight: 800; text-transform: uppercase; padding: 1px 5px; border-radius: 100px; }
    .tc-badge-sev.mild { color: var(--gold); background: rgba(251,191,36,0.1); }
    .tc-badge-sev.moderate { color: #fb923c; background: rgba(251,146,60,0.1); }
    .tc-badge-sev.severe { color: var(--red); background: rgba(248,113,113,0.1); }
    /* #fb923c (moderate-severity orange) also reads too light on this theme's white surface —
       same class of issue --gold/--red fix above, just without an existing shared variable for
       it since this is the only place in the app using this exact shade. */
    body.light .tc-badge-sev.moderate { color: #c2410c; }
    .tc-empty-hint { font-size: 10.5px; color: var(--muted); padding: 2px 0; }

    /* Weekly availability grid — horizontally scrolls inside the narrow sidebar */
    .tc-week-grid { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
    .tc-day-col { flex: 0 0 auto; width: 58px; text-align: center; border: 1px solid var(--border); border-radius: 8px; padding: 5px 3px; opacity: 1; }
    .tc-day-col.off { opacity: 0.4; }
    .tc-day-name { font-size: 9px; font-weight: 800; margin-bottom: 4px; color: var(--muted); }
    .tc-day-toggle {
      width: 22px; height: 13px; border-radius: 100px; background: rgba(255,255,255,0.1);
      border: none; cursor: pointer; position: relative; margin: 0 auto 4px; display: block;
    }
    .tc-day-toggle::after { content: ''; position: absolute; top: 1.5px; left: 1.5px; width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; transition: transform 0.15s; }
    .tc-day-toggle.on { background: linear-gradient(135deg, var(--brand), var(--brand2)); }
    .tc-day-toggle.on::after { transform: translateX(9px); background: white; }
    .tc-day-sports { display: flex; flex-direction: column; gap: 2px; }
    .tc-sport-chip {
      font-size: 8.5px; font-weight: 700; padding: 2px 0; border-radius: 4px; cursor: pointer;
      border: 1px solid var(--border); background: transparent; color: var(--muted);
      width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .tc-sport-chip.on { color: #0a0a12; background: linear-gradient(135deg, var(--brand), var(--brand2)); border-color: transparent; }

    /* Race strategy output */
    .tc-strategy-output { font-size: 11.5px; line-height: 1.6; color: var(--text); }
    .tc-strategy-output h2 { font-size: 11px; font-weight: 800; color: var(--brand-lt); margin: 10px 0 4px; text-transform: uppercase; letter-spacing: 0.4px; }
    .tc-strategy-output h2:first-child { margin-top: 0; }
    .tc-strategy-output ul { padding-left: 16px; margin-bottom: 6px; }
    .tc-strategy-output p { margin-bottom: 6px; }

    /* Modals — same shell as .settings-overlay/.settings-modal */
    .tc-modal-overlay {
      position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
      display: none; align-items: center; justify-content: center; padding: 20px;
    }
    .tc-modal-overlay.open { display: flex; }
    .tc-modal {
      background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
      width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto;
      padding: 24px 24px 20px; position: relative;
      box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px var(--b1-10);
    }
    .tc-modal h3 { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 16px; }
    .tc-field { margin-bottom: 12px; }
    .tc-field label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }
    .tc-field input, .tc-field select, .tc-field textarea {
      width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
      padding: 9px 11px; color: var(--text); font-size: 13.5px; font-family: inherit; outline: none;
    }
    .tc-field input:focus, .tc-field select:focus, .tc-field textarea:focus { border-color: var(--brand); }
    .tc-field textarea { resize: vertical; min-height: 60px; }
    .tc-field-row { display: flex; gap: 10px; }
    .tc-field-row .tc-field { flex: 1; }
    .tc-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }

    /* ── WEEKLY WORKOUT BAR — sits right under the topbar, visible to every signed-in user.
       Animated glow border (same masked-gradient shimmer technique as .cal-day-add-btn) so
       "what do I have this week" reads as an always-on live readout, not a static banner. ── */
    .tw-strip { flex-shrink: 0; position: relative; border-bottom: 1px solid var(--border); }
    .tw-week-hdr {
      position: relative; width: 100%; display: flex; align-items: center; gap: 8px;
      padding: 7px 24px 4px; cursor: pointer; overflow: hidden;
      background: linear-gradient(90deg, var(--b1-10) 0%, var(--b2-8) 60%, transparent 100%);
      color: var(--text);
    }
    .tw-strip-scan {
      position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(100deg, transparent 40%, var(--b1-15) 50%, transparent 60%);
      background-size: 220% 100%; animation: twScan 4.5s linear infinite;
    }
    @keyframes twScan { 0% { background-position: 140% 0; } 100% { background-position: -60% 0; } }
    .tw-strip-label {
      display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
      font-size: 10.5px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--brand-lt); position: relative; z-index: 1;
    }
    .tw-strip-dot {
      width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
      background: var(--brand2); box-shadow: 0 0 8px 2px var(--b2-60, rgba(52,211,153,0.6));
      animation: twDotPulse 1.8s ease-in-out infinite;
    }
    @keyframes twDotPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }
    .tw-strip-chevron { flex-shrink: 0; color: var(--muted); position: relative; z-index: 1; transition: transform 0.2s; }
    .tw-strip.open .tw-strip-chevron { transform: rotate(180deg); }

    /* Collapsed state (the "Hide" button) — drops the athlete switcher, the 7-day chip row and
       the detail dropdown, leaving just the one header line. The week isn't lost, it's condensed:
       .tw-strip-summary fills with a "5 planned · 3 done" readout that only renders while
       collapsed (empty and therefore invisible otherwise, no layout shift when expanded). */
    .tw-strip-summary {
      font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; color: var(--muted);
      text-transform: none; white-space: nowrap; position: relative; z-index: 1;
    }
    .tw-strip-summary:not(:empty)::before { content: '·'; margin-right: 6px; opacity: 0.5; }
    .tw-strip.tw-collapsed .tw-athlete-switch-wrap,
    .tw-strip.tw-collapsed .tw-week-bar,
    .tw-strip.tw-collapsed .tw-strip-detail { display: none; }

    .tw-strip.tw-collapsed .tw-week-hdr { padding-bottom: 7px; cursor: default; }
    .tw-strip.tw-collapsed .tw-strip-chevron { display: none; }

    /* Coach athlete-switcher chips — avatar + full name pill (gradient "Me" star + initials per
       athlete) instead of a dropdown, scrollable if the roster is long. Selected chip gets a
       glowing brand-colored ring, same visual language as .tw-day-chip.selected below. Each
       athlete chip is a wrapper <div> around two separate <button>s (main switch button + star
       toggle) since a <button> can't nest inside another <button>. */
    .tw-athlete-switch-wrap {
      display: flex; align-items: center; gap: 4px; padding: 2px 24px 8px;
      position: relative; z-index: 1;
      /* max-height/overflow exist purely so .tw-focus below can animate this row shut — 60px is
         a ceiling comfortably above the real ~42px height, not a layout constraint. */
      overflow: hidden; max-height: 60px; opacity: 1;
      transition: max-height 0.22s ease, opacity 0.18s ease, padding 0.22s ease;
    }
    /* Focus mode (added by _twSelectDay, cleared by _twMinimize/_twToggle) — while a workout is
       open the roster row folds away: you're reading one athlete's day, and the detail panel is
       anchored to the bottom of the strip, so removing ~50px of chrome above it hands that space
       straight to the workout content. The 7-day chips deliberately stay put — switching days is
       the one control you still need mid-read. */
    .tw-strip.tw-focus .tw-athlete-switch-wrap {
      max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0;
    }
    .tw-athlete-switch {
      display: flex; align-items: center; gap: 6px; padding: 0 2px;
      overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
      scroll-behavior: smooth; flex: 1; min-width: 0;
    }
    .tw-athlete-switch::-webkit-scrollbar { display: none; }
    .tw-athlete-scroll-btn {
      flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
      background: var(--b1-10); border: 1px solid var(--b1-30); color: var(--brand);
      font-size: 14px; font-weight: 800; line-height: 1; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.12s, transform 0.12s;
    }
    .tw-athlete-scroll-btn:hover { background: var(--b1-20); transform: scale(1.08); }
    .tw-athlete-chip {
      flex-shrink: 0; display: flex; align-items: center; gap: 2px;
      background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 100px;
      padding: 3px 4px; transition: background 0.15s, border-color 0.15s, transform 0.12s;
    }
    .tw-athlete-chip:hover { transform: translateY(-1px); background: var(--b1-10); }
    .tw-athlete-chip.selected {
      background: linear-gradient(160deg, var(--b1-18), var(--b2-10)); border-color: var(--brand);
      box-shadow: 0 0 12px -2px var(--b1-50);
    }
    .tw-athlete-chip-main {
      flex-shrink: 0; display: flex; align-items: center; gap: 6px;
      background: none; border: none; padding: 0 2px 0 0; cursor: pointer; color: var(--text);
    }
    .tw-athlete-avatar {
      flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,0.06); border: 1.5px solid var(--border);
      font-size: 10px; font-weight: 800; color: var(--muted); line-height: 1;
      transition: border-color 0.15s;
    }
    .tw-athlete-avatar-me {
      background: linear-gradient(135deg, var(--brand), var(--brand2)); color: #0a0a12; border-color: transparent;
    }
    .tw-athlete-chip-name {
      font-size: 11.5px; font-weight: 700; color: var(--text); white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis; max-width: 110px;
    }
    .tw-athlete-star {
      flex-shrink: 0; background: none; border: none; cursor: pointer; padding: 3px;
      font-size: 12.5px; color: var(--muted); line-height: 1; transition: transform 0.12s, color 0.12s;
    }
    .tw-athlete-star:hover { transform: scale(1.25); }
    .tw-athlete-star.starred { color: #fbbf24; text-shadow: 0 0 6px rgba(251,191,36,0.55); }

    /* 7-day chip row — always visible, collapsed or not */
    .tw-week-bar {
      position: relative; z-index: 1; display: grid; grid-template-columns: repeat(7, 1fr);
      gap: 6px; padding: 4px 24px 9px;
    }
    .tw-day-chip {
      display: flex; flex-direction: column; align-items: center; gap: 3px;
      padding: 6px 2px 7px; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
      transition: border-color 0.15s, background 0.15s, transform 0.1s;
    }
    .tw-day-chip:hover { background: var(--surface2); }
    .tw-day-chip:active { transform: scale(0.96); }
    .tw-day-chip.today { border-color: var(--b1-30); box-shadow: 0 0 12px -4px var(--b1-40); }
    .tw-day-chip.selected { background: linear-gradient(160deg, var(--b1-15), var(--b2-8)); border-color: var(--brand); }
    .tw-day-chip-name { font-size: 9.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); }
    .tw-day-chip.today .tw-day-chip-name { color: var(--brand-lt); }
    .tw-day-chip-num { font-size: 13px; font-weight: 800; color: var(--text); line-height: 1.1; }
    .tw-day-chip-icons { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 22px; }
    .tw-day-chip-icon-wrap { position: relative; display: inline-flex; }
    .tw-day-chip-icon { font-size: 16px; filter: drop-shadow(0 0 3px var(--b1-40)); }
    .tw-day-chip-icon.tw-day-chip-icon-done { filter: drop-shadow(0 0 4px #22c55e); }
    .tw-day-chip-check {
      position: absolute; bottom: -3px; right: -4px; width: 11px; height: 11px; border-radius: 50%;
      background: #22c55e; color: #fff; font-size: 7px; font-weight: 900; line-height: 1;
      display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--bg, #0b1020);
    }
    .tw-day-chip-empty { color: var(--muted); font-size: 12px; opacity: 0.5; }

    .tw-strip-detail {
      max-height: 0; overflow: hidden; transition: max-height 0.25s ease;
      background: var(--surface); position: relative; z-index: 1;
    }
    /* OVERLAY, not an inline panel. Previously this pushed the chat down: the strip is
       flex-shrink:0 above a flex:1 chat area, so a 420px detail panel plus ~125px of fixed
       chrome above it (header + athlete switcher + 7-day chips, on a coach account) ate ~545px
       of a ~700px laptop viewport and left the chat unusable the moment you clicked a workout.
       Merely shrinking the panel just traded one problem for another — less workout detail AND
       still a squeezed chat. Floating it instead means it consumes ZERO layout space: the chat
       keeps its full height at all times and the panel drops over it like a menu, so it can
       afford to be taller (70vh) than it ever was when inline. Anchors to .tw-strip, which is
       already position:relative. z-index 60 clears the chat area (which comes later in the DOM)
       while staying well under the 8500+ range every real modal/overlay in this file uses. */
    .tw-strip.open { z-index: 60; }
    .tw-strip.open .tw-strip-detail {
      position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
      max-height: min(70vh, 560px); overflow-y: auto;
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
      box-shadow: 0 18px 40px -12px rgba(0,0,0,0.65);
    }
    /* Explicit close control for the day-detail dropdown (planned + completed for whichever
       day is selected) — sticky so it stays reachable regardless of scroll position inside the
       420px-tall panel, separate from the header's own click-anywhere-to-toggle behavior. */
    .tw-strip-detail-hdr {
      position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end;
      padding: 6px 24px 0; background: var(--surface);
    }
    .tw-minimize-btn {
      flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: var(--muted); cursor: pointer;
      background: var(--surface2); border: 1px solid var(--border); border-radius: 100px;
      padding: 3px 11px; transition: background 0.12s, border-color 0.12s, color 0.12s;
    }
    .tw-minimize-btn:hover { background: var(--b1-10); border-color: var(--b1-30); color: var(--text); }
    .tw-detail { padding: 12px 24px; border-top: 1px solid var(--border); }
    .tw-detail:first-child { border-top: none; }
    .tw-detail-hdr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
    .tw-detail-icon {
      width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, var(--brand), var(--brand2)); font-size: 12px; flex-shrink: 0;
      box-shadow: 0 0 12px -2px var(--b1-40);
    }
    .tw-detail-name { font-size: 13.5px; font-weight: 800; color: var(--text); }
    .tw-detail-meta { font-size: 11px; color: var(--muted); font-weight: 600; flex: 1; }
    .tw-detail-desc { font-size: 12.5px; color: var(--muted); line-height: 1.6; padding-left: 32px; }
    .tw-edit-btn {
      flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: var(--brand-lt); cursor: pointer;
      background: var(--b1-10); border: 1px solid var(--b1-30); border-radius: 100px;
      padding: 3px 11px; transition: background 0.12s, border-color 0.12s;
    }
    .tw-edit-btn:hover { background: var(--b1-20); border-color: var(--brand); }
    .tw-copy-btn { color: var(--brand2); background: rgba(52,211,153,0.08); border-color: rgba(52,211,153,0.4); }
    .tw-copy-btn:hover { background: rgba(52,211,153,0.2); border-color: var(--brand2); }
    .tw-share-btn { color: #c084fc; background: rgba(192,132,252,0.08); border-color: rgba(192,132,252,0.4); }
    .tw-share-btn:hover { background: rgba(192,132,252,0.2); border-color: #c084fc; }
    .tw-picker { margin-left: 32px; margin-top: 8px; }
    /* Share picker copies onto one or more athlete calendars — needs a checkbox list ABOVE the
       date+confirm row, so unlike the single-row Copy picker it stacks vertically. */
    .tw-share-picker {
      background: rgba(192,132,252,0.05); border-color: rgba(192,132,252,0.22);
      flex-direction: column; align-items: stretch; gap: 8px;
    }
    .tw-share-athletes { display: flex; flex-wrap: wrap; gap: 6px 16px; }
    .tw-share-check {
      display: flex; align-items: center; gap: 6px; font-size: 12px; color: #e2e8f0;
      cursor: pointer; user-select: none;
    }
    .tw-share-check-input { width: 14px; height: 14px; accent-color: #c084fc; cursor: pointer; }
    .tw-share-check-type { color: var(--muted); font-size: 10.5px; }
    .tw-share-row2 { display: flex; align-items: center; gap: 8px; }

    /* Delete — its own row below Edit/Copy/Share (not squeezed into that header row), same
       in-row-confirm pattern as everything else here instead of a native confirm() dialog
       (browsers silently suppress repeated confirm()/alert() calls after the first couple of
       uses — see delete-workout.js's _dwAskDelete for the fuller rationale). */
    .tw-del-row { margin-left: 32px; margin-top: 6px; display: flex; align-items: center; gap: 8px; }
    .tw-del-btn {
      flex-shrink: 0; font-size: 10.5px; font-weight: 700; cursor: pointer;
      border-radius: 100px; padding: 3px 11px; transition: background 0.12s, border-color 0.12s;
      color: #f87171; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.35);
    }
    .tw-del-btn:hover:not(:disabled) { background: rgba(239,68,68,0.2); border-color: #f87171; }
    .tw-del-btn:disabled { opacity: 0.5; cursor: default; }
    .tw-del-btn-confirm { background: #ef4444; color: #fff; border-color: #ef4444; }
    .tw-del-btn-confirm:hover:not(:disabled) { background: #dc2626; border-color: #dc2626; }
    .tw-del-confirm-text { font-size: 11.5px; color: var(--muted); }

    /* Completed activities — full labeled buttons (not just chip icons), opening the same
       real-metrics workout card as the calendar's ✓ pills via _dashOpenWorkoutCard. */
    .tw-completed-hdr {
      font-size: 10.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
      color: var(--muted); padding: 10px 24px 2px;
    }
    .tw-done-row {
      width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 24px;
      border-top: 1px solid var(--border); background: none; border-left: none; border-right: none; border-bottom: none;
      cursor: pointer; font-family: inherit; color: inherit; text-align: left;
    }
    .tw-done-row:hover { background: var(--surface2); }
    .tw-done-tag {
      flex-shrink: 0; font-size: 9.5px; font-weight: 700; color: #22c55e;
      background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3);
      border-radius: 6px; padding: 4px 8px; white-space: nowrap;
    }
    /* Wraps each completed row + its own delete row, same shape as a planned .tw-detail
       wrapping .tw-detail-hdr + .tw-del-row, so Delete never sits inside the clickable
       .tw-done-row button itself (a <button> can't nest another <button>). */
    .tw-done-item { border-top: 1px solid var(--border); }
    .tw-done-item .tw-done-row { border-top: none; }
    .tw-done-del-row { padding: 0 24px 8px 56px; display: flex; align-items: center; gap: 8px; }

    /* Empty-day message (button lives in .tw-add-row below, always present) */
    .tw-empty-day { padding: 12px 24px 2px; }
    .tw-empty-msg { font-size: 12.5px; color: var(--muted); }
    .tw-add-row { padding: 10px 24px 14px; }
    .tw-add-btn {
      flex-shrink: 0; font-size: 12px; font-weight: 700; color: #0a0a12; cursor: pointer;
      background: linear-gradient(135deg, var(--brand), var(--brand2)); border: none;
      border-radius: 100px; padding: 7px 16px; box-shadow: 0 0 16px -4px var(--b1-50);
      transition: transform 0.12s, box-shadow 0.15s;
    }
    .tw-add-btn:hover { transform: translateY(-1px); box-shadow: 0 0 22px -2px var(--b1-60); }
    .tw-add-btn:active { transform: translateY(0); }

    /* Prev / Today / Next week navigation, in the header row */
    /* flex-wrap + justify-end so a full row of pill buttons (Today/Month/Copy Week) wraps onto a
       second line on a narrow screen instead of overflowing or clipping — same reason the
       athlete-switch strip below got scroll buttons instead of relying on everything fitting. */
    .tw-week-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; position: relative; z-index: 1; flex-shrink: 0; }
    .tw-nav-btn {
      width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--border);
      background: rgba(255,255,255,0.04); color: var(--text); font-size: 13px; font-weight: 700;
      line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: background 0.12s, border-color 0.12s;
    }
    .tw-nav-btn:hover { background: var(--b1-15); border-color: var(--b1-30); }
    /* Shared "futuristic pill" treatment — glowing gradient, auto-width, real text — for Today,
       Month, and Copy Week alike, so the whole nav row reads as one cohesive button family
       instead of Today being a near-invisible 7px dot next to two full-size CTAs. */
    .tw-nav-btn.tw-nav-pill {
      width: auto; height: auto; border-radius: 100px; padding: 7px 16px;
      font-size: 12.5px; font-weight: 800; color: #0a0a12; white-space: nowrap;
      background: linear-gradient(135deg, var(--brand), var(--brand2)); border: none;
      box-shadow: 0 0 14px -3px var(--b1-50); gap: 6px;
      transition: transform 0.12s, box-shadow 0.15s;
    }
    .tw-nav-btn.tw-nav-pill:hover { background: linear-gradient(135deg, var(--brand), var(--brand2)); transform: translateY(-1px); box-shadow: 0 0 20px -2px var(--b1-60); }
    .tw-nav-btn.tw-nav-month { margin-left: 4px; }

    @media (max-width: 640px) {
      .tw-week-hdr { padding: 6px 12px 3px; }
      .tw-week-bar { padding: 3px 8px 8px; gap: 3px; }
      .tw-day-chip { padding: 5px 1px 6px; border-radius: 8px; }
      .tw-day-chip-name { font-size: 8.5px; }
      .tw-day-chip-num { font-size: 11.5px; }
      .tw-day-chip-icons { gap: 3px; }
      .tw-day-chip-icon { font-size: 15px; }
      .tw-strip-label-text { display: none; }
      .tw-detail, .tw-detail-desc, .tw-empty-day, .tw-add-row { padding-left: 12px; padding-right: 12px; }
      .tw-detail-desc { padding-left: 0; margin-top: 4px; }
      .tw-athlete-switch-wrap { padding-left: 12px; padding-right: 12px; }
    }

/* ── Create account: Athlete / Coach 3D selector ─────────────────────────── */
.acct-type { display: flex; gap: 12px; margin-top: 2px; }
.acct-tile {
  flex: 1; text-align: left; cursor: pointer; font-family: inherit;
  padding: 12px 12px 11px; border-radius: 16px; color: var(--text);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface2), var(--surface));
  box-shadow: 0 1px 0 rgba(0,0,0,.35) inset;
  transform: translateY(3px);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.acct-tile .acct-ico { font-size: 22px; display: block; margin-bottom: 8px; filter: grayscale(.4); opacity: .8; }
.acct-tile .acct-name { display: block; font-size: 15px; font-weight: 800; letter-spacing: .3px; }
.acct-tile .acct-cap { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.25; text-transform: none; letter-spacing: 0; font-weight: 500; }
.acct-tile .acct-check { float: right; opacity: 0; font-size: 15px; color: #fff; transition: opacity .2s; }
.acct-tile.on {
  color: #fff; transform: translateY(-2px);
  border-color: rgba(255,255,255,.4);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 78%, #fff), var(--brand) 55%, color-mix(in srgb, var(--brand) 70%, #000));
  box-shadow: 0 5px 0 color-mix(in srgb, var(--brand) 40%, #000), 0 10px 24px color-mix(in srgb, var(--brand) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
}
.acct-tile.on .acct-ico { filter: none; opacity: 1; }
.acct-tile.on .acct-cap { color: rgba(255,255,255,.9); }
.acct-tile.on .acct-check { opacity: 1; }
.acct-tile[data-type="coach"].on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand2, var(--brand)) 78%, #fff), var(--brand2, var(--brand)) 55%, color-mix(in srgb, var(--brand2, var(--brand)) 70%, #000));
  box-shadow: 0 5px 0 color-mix(in srgb, var(--brand2, var(--brand)) 40%, #000), 0 10px 24px color-mix(in srgb, var(--brand2, var(--brand)) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
}