:root {
      /* ── Surface palette ── */
      --bg:      #0D0F14;
      --bg2:     #161A22;
      --bg3:     #1C2130;
      --bg4:     #232B3A;
      /* ── Borders ── */
      --border:  rgba(255,255,255,0.06);
      --border2: rgba(255,255,255,0.10);
      --border3: rgba(255,255,255,0.18);
      /* ── Text ── */
      --text:    #E5E7EB;
      --muted:   #6B7280;
      --muted2:  #9CA3AF;
      --muted3:  #D1D5DB;
      /* ── Semantic color: good/positive ── */
      --green:      #2dd4bf;
      --green-dim:  rgba(45,212,191,0.10);
      --green-glow: rgba(45,212,191,0.14);
      /* ── Semantic color: caution/warning ── */
      --amber:      #FBBF24;
      --amber-dim:  rgba(251,191,36,0.10);
      /* ── Semantic color: bad/critical — soft coral per spec ── */
      --red:        #FF6B6B;
      --red-dim:    rgba(255,107,107,0.10);
      /* ── Brand accent: electric green ── */
      --accent:      #C8F135;
      --accent-dim:  rgba(200,241,53,0.12);
      --accent-glow: rgba(200,241,53,0.20);
      --accent-ink:  #1a2200;
      /* ── Aliases (legacy; kept for backward compat) ── */
      --blue:       #C8F135;
      --blue-dim:   rgba(200,241,53,0.12);
      --purple:     #C8F135;
      --purple-dim: rgba(200,241,53,0.12);
      --orange:     #fb923c;
      --orange-dim: rgba(251,146,60,0.10);
      /* ── Typography ── */
      --font-sans: 'Inter', 'DM Sans', system-ui, -apple-system, sans-serif;
      --font-num:  'Inter', 'DM Sans', ui-monospace, monospace;
      --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
      /* ── Type weights ── */
      --fw-regular:  400;
      --fw-medium:   500;
      --fw-semibold: 600;
      --fw-bold:     700;
      --fw-black:    800;
      /* ── Type scale ── */
      --fs-page-title: 24px;
      --fs-cockpit:    22px;
      --fs-stat:       32px;
      --fs-card-title: 17px;
      --fs-title:      15px;
      --fs-body:       14px;
      --fs-body-sm:    13px;
      --fs-label:      12px;
      --fs-caption:    11px;
      --fs-micro:      10px;
      /* ── Line heights ── */
      --lh-tight: 1.1;
      --lh-snug:  1.5;
      --lh-body:  1.65;
      --lh-loose: 1.75;
      /* ── Spacing scale ── */
      --space-1:  4px;  --space-2:  6px;  --space-3:  8px;
      --space-4:  10px; --space-5:  12px; --space-6:  14px;
      --space-7:  16px; --space-8:  18px; --space-9:  20px;
      --space-10: 22px; --space-12: 28px; --space-14: 36px; --space-16: 44px;
      /* ── Grid gaps ── */
      --gap-grid:  10px;
      --gap-panel: 14px;
      --gap-tile:  8px;
      /* ── Component padding ── */
      --pad-card:    20px;
      --pad-panel:   20px 22px;
      --pad-bigcard: 28px 30px;
      --pad-tile:    10px 12px;
      --pad-input:   10px 13px;
      --pad-btn:     9px 14px;
      /* ── Border radii ── */
      --radius-xs:   6px;
      --radius:      8px;
      --radius-md:   10px;
      --radius-lg:   12px;
      --radius-xl:   16px;
      --radius-2xl:  20px;
      --radius-pill: 99px;
      /* ── Bars ── */
      --bar-h:    3px;
      --bar-h-lg: 5px;
      /* ── Layout ── */
      --sidebar-w:   260px;
      --content-max: 1180px;
      /* ── Shadows & elevation ── */
      --shadow-none:    none;
      --shadow-card:    0 4px 24px rgba(0,0,0,0.40);
      --shadow-raised:  0 8px 32px -4px rgba(0,0,0,0.60), 0 2px 8px rgba(0,0,0,0.30);
      --shadow-popover: 0 8px 32px rgba(0,0,0,0.50);
      --shadow-overlay: 0 24px 64px -12px rgba(0,0,0,0.75);
      --edge-top:        inset 0 1px 0 rgba(255,255,255,0.05);
      --edge-top-strong: inset 0 1px 0 rgba(255,255,255,0.08);
      --elev-hero:       inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 32px -4px rgba(0,0,0,0.60);
      --glow-accent: 0 0 0 3px var(--accent-glow);
      --glow-good:   0 0 0 3px var(--green-glow);
      --glow-ring:   0 0 48px -4px var(--accent-glow);
      /* ── Card micro-gradient (top-edge highlight) ── */
      --card-grad: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 40%);
    }

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

    body {
      font-family: var(--font-sans);
      background:
        radial-gradient(1400px 520px at 75% -200px, rgba(200,241,53,0.04), transparent 65%),
        radial-gradient(800px 600px at 5% 80%, rgba(45,212,191,0.025), transparent 60%),
        var(--bg);
      background-attachment: fixed;
      color: var(--text);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }

    @keyframes traning-fade-up {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .shell { display:flex; min-height:100vh; position:relative; z-index:1; }
    .mobile-actions { display:none; }

    /* ─── ANIMATIONS ─── */
    @keyframes pulse-ring {
      0%   { box-shadow: 0 0 0 0 rgba(200,241,53,0.45); }
      70%  { box-shadow: 0 0 0 6px rgba(200,241,53,0); }
      100% { box-shadow: 0 0 0 0 rgba(200,241,53,0); }
    }
    @keyframes pulse-dot-breathe {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0.4; }
    }

    /* ─── SIDEBAR ─── */
    .sidebar {
      width: var(--sidebar-w);
      flex-shrink: 0;
      background: var(--bg2);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      position: fixed;
      top:0; left:0; bottom:0;
      z-index: 20;
    }
    .sidebar-logo {
      padding: 22px 20px 18px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .sidebar-logo-mark {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .sidebar-logo-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .sidebar-logo-title {
      font-size: 14px;
      font-weight: 800;
      letter-spacing: -0.3px;
      color: var(--text);
    }
    .sidebar-logo-sub {
      font-size: 9.5px;
      color: var(--muted);
      font-family: var(--font-mono);
      letter-spacing: 0.03em;
    }
    .sidebar-live-badge {
      display: flex;
      align-items: center;
      gap: 5px;
      background: rgba(200,241,53,0.06);
      border: 1px solid rgba(200,241,53,0.15);
      border-radius: 99px;
      padding: 3px 8px 3px 6px;
      font-size: 9.5px;
      font-family: var(--font-mono);
      color: var(--accent);
      font-weight: 600;
      letter-spacing: 0.04em;
      flex-shrink: 0;
    }
    .live-pulse-dot {
      display: inline-block;
      width: 6px; height: 6px;
      background: var(--accent);
      border-radius: 50%;
      animation: pulse-ring 2s ease-out infinite;
    }
    .nav {
      flex: 1;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      overflow-y: auto;
    }
    .nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      color: var(--muted2);
      transition: background 0.15s, color 0.15s, border-color 0.15s;
      border: 1px solid transparent;
      user-select: none;
      position: relative;
    }
    .nav-item:hover { background: var(--bg3); color: var(--muted3); }
    .nav-item.active {
      background: rgba(200,241,53,0.06);
      color: var(--text);
      border-color: rgba(200,241,53,0.12);
      font-weight: 600;
    }
    .nav-item.active::before {
      content: '';
      position: absolute;
      left: 0; top: 18%; bottom: 18%;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: var(--accent);
    }
    .nav-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      flex-shrink: 0;
      color: currentColor;
      opacity: 0.7;
    }
    .nav-item.active .nav-icon { opacity: 1; color: var(--accent); }
    .sidebar-bottom {
      padding: 14px 16px 18px;
      border-top: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .garmin-sync-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4px;
    }
    .garmin-sync-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .live-dot {
      width: 7px; height: 7px;
      background: var(--accent);
      border-radius: 50%;
      flex-shrink: 0;
      animation: pulse-dot-breathe 2.4s ease-in-out infinite;
    }
    .live-label {
      font-size: 10px;
      font-family: var(--font-mono);
      color: var(--muted3);
      letter-spacing: 0.08em;
      font-weight: 600;
    }
    .live-sublabel {
      font-size: 9.5px;
      font-family: var(--font-mono);
      color: var(--muted);
      margin-top: 1px;
    }
    /* Ghost buttons (sidebar actions) */
    .ghost-btn {
      width: 100%;
      background: transparent;
      border: 1px solid var(--border2);
      border-radius: 10px;
      padding: 9px 14px;
      color: var(--muted2);
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
    }
    .ghost-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-dim);
      box-shadow: 0 0 16px rgba(200,241,53,0.12);
    }
    .ghost-btn:disabled { opacity:0.45; cursor:not-allowed; }
    /* Keep .refresh-btn working in other parts of the app */
    .refresh-btn {
      width: 100%;
      background: var(--bg3);
      border: 1px solid var(--border2);
      border-radius: 10px;
      padding: 9px 14px;
      color: var(--muted2);
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      text-align: center;
    }
    .refresh-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); box-shadow: 0 0 16px rgba(200,241,53,0.1); }
    .refresh-btn:disabled { opacity:0.45; cursor:not-allowed; }
    .mobile-actions .refresh-btn, .mobile-actions .ghost-btn { margin: 0; }
    .ac-control-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-top: 18px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }
    .ac-loop-status {
      font-size: 12px;
      color: var(--muted2);
      font-family: 'IBM Plex Mono', monospace;
      line-height: 1.5;
    }
    .ac-loop-btn {
      background: var(--bg3);
      border: 1px solid var(--border2);
      border-radius: 8px;
      color: var(--muted2);
      cursor: pointer;
      flex-shrink: 0;
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 700;
      padding: 9px 14px;
      transition: all 0.2s;
    }
    .ac-loop-btn:hover { border-color: var(--amber); color: var(--amber); background: var(--amber-dim); }
    .ac-loop-btn.is-on { border-color: rgba(74,222,128,0.35); color: var(--green); background: var(--green-dim); }
    .ac-loop-btn.is-off { border-color: rgba(248,113,113,0.35); color: var(--red); background: var(--red-dim); }
    .ac-loop-btn:disabled { opacity:0.45; cursor:not-allowed; }
    .ac-setpoint-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
      flex-wrap: wrap;
    }
    .ac-setpoint-label {
      font-size: 11px;
      color: var(--muted);
      font-family: 'IBM Plex Mono', monospace;
      letter-spacing: 0.05em;
    }
    .ac-setpoint-input {
      width: 68px;
      background: var(--bg3);
      border: 1px solid var(--border2);
      border-radius: 6px;
      color: var(--fg);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 13px;
      padding: 4px 8px;
      text-align: center;
    }
    .ac-setpoint-input:focus { outline: none; border-color: var(--blue); }
    .ac-setpoint-btn {
      background: var(--bg3);
      border: 1px solid var(--border2);
      border-radius: 6px;
      color: var(--muted3);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.06em;
      padding: 4px 12px;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .ac-setpoint-btn:hover { border-color: var(--blue); color: var(--blue); background: rgba(59,130,246,0.08); }
    .ac-setpoint-btn:disabled { opacity:0.45; cursor:not-allowed; }
    .ac-setpoint-status {
      font-size: 11px;
      color: var(--muted);
      font-family: 'IBM Plex Mono', monospace;
    }
    .climate-control-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin-bottom: 24px;
    }
    .ac-time-input {
      width: 92px;
    }
    .ac-manual-grid {
      display: grid;
      grid-template-columns: minmax(84px, 0.7fr) minmax(118px, 1fr) auto;
      gap: 10px;
      align-items: end;
      margin-top: 12px;
    }
    .ac-field {
      display: flex;
      flex-direction: column;
      gap: 5px;
      min-width: 0;
    }
    .ac-field span {
      color: var(--muted);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .ac-select {
      width: 100%;
      background: var(--bg3);
      border: 1px solid var(--border2);
      border-radius: 6px;
      color: var(--fg);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      padding: 6px 8px;
    }
    .ac-select:focus {
      outline: none;
      border-color: var(--blue);
    }

    /* ─── APPBAR ─── */
    .appbar {
      position: sticky; top: 0; z-index: 10;
      display: flex; align-items: center; gap: 20px;
      padding: 20px 44px;
      background: rgba(22,26,34,0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .appbar-greet { display: flex; flex-direction: column; gap: 4px; }
    .appbar-hi { font-size: 28px; font-weight: 800; letter-spacing: -0.8px; line-height: 1.05; }
    .appbar-date { font-size: 12px; color: var(--muted2); font-family: var(--font-mono); letter-spacing: 0.02em; }
    .appbar-stats { display: flex; align-items: stretch; gap: 0; margin-left: auto; }
    .appbar-stat { display: flex; flex-direction: column; gap: 3px; padding: 0 18px; border-left: 1px solid var(--border); }
    .appbar-stat:first-child { border-left: none; }
    .appbar-stat-label { font-size: 9.5px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
    .appbar-stat-val { font-size: 16px; font-weight: 700; font-family: var(--font-num); line-height: 1; font-variant-numeric: tabular-nums; }
    .appbar-search {
      display: flex; align-items: center; gap: 8px;
      background: var(--bg2); border: 1px solid var(--border2);
      border-radius: 10px; padding: 8px 12px; width: 210px;
      color: var(--muted); font-size: 12.5px; cursor: text;
      transition: border-color 0.2s;
    }
    .appbar-search:hover { border-color: var(--border3); }
    .appbar-kbd { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--muted); border: 1px solid var(--border2); border-radius: 5px; padding: 1px 5px; }
    @media (max-width: 1080px) {
      .appbar-stats { display: none; }
      .appbar { padding-left: 24px; padding-right: 24px; }
    }

    /* ─── MAIN ─── */
    .main {
      margin-left: var(--sidebar-w);
      flex: 1;
      max-width: calc(100vw - var(--sidebar-w));
      min-width: 0;
    }
    .content {
      padding: 28px 44px 80px;
    }

    /* ─── PAGE HEADER ─── */
    .page-header { margin-bottom: 36px; }
    .page-header h2 {
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.6px;
      line-height: 1.1;
    }
    .page-header p {
      font-size: 13px;
      color: var(--muted2);
      margin-top: 6px;
      line-height: 1.5;
    }

    /* ─── PAGES ─── */
    .page { display:none; }
    .page.active { display:block; animation: traning-fade-up 0.32s ease both; }
    @keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

    /* ─── SECTION HEADER "Kroppen rapporterar" style ─── */
    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      margin-top: 4px;
    }
    .section-header-label {
      font-size: 11px;
      font-family: var(--font-mono);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.10em;
      color: var(--muted2);
    }

    /* ─── SECTION LABEL ─── */
    .sl {
      font-size: 12px;
      letter-spacing: 0;
      color: var(--muted2);
      margin-bottom: 12px;
      font-weight: 600;
    }

    /* ─── MICRO-GRADIENT on all card surfaces ─── */
    .panel,
    .card,
    .bigcard,
    .cockpit-card,
    .hg-card,
    .cns-card,
    .chat-wrap,
    .cal-week,
    .goal-card,
    .strength-session,
    .record-card {
      background: var(--card-grad), var(--bg2);
      box-shadow: var(--shadow-card);
    }

    /* ─── HEM-LAYOUT (Whoop-inspirerad) ─── */
    .home-hero { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; align-items:stretch; }
    .home-cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; align-items:stretch; }
    .panel { position:relative; overflow:hidden; background:var(--card-grad), var(--bg2); border:1px solid var(--border); border-radius:var(--radius-xl); padding:22px 24px; display:flex; flex-direction:column; box-shadow:var(--shadow-card); }
    .panel.hero { border-color:var(--border2); box-shadow:var(--elev-hero); }
    .panel.flat { box-shadow:var(--shadow-card), var(--edge-top); }
    .panel-accent-bar { position:absolute; inset:0 auto 0 0; width:3px; background:linear-gradient(180deg, var(--accent), rgba(194,240,74,0)); border-radius:0; }
    .panel-eyebrow { font-size:12px; font-weight:600; color:var(--muted2); margin-bottom:16px; display:flex; align-items:center; gap:10px; }
    .recovery-wrap { display:flex; align-items:center; gap:22px; }
    .contrib-row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:auto; padding-top:18px; border-top:1px solid var(--border); }
    .contrib-label { font-size:11px; color:var(--muted2); margin-bottom:7px; }
    .contrib-val { font-size:20px; font-weight:700; font-family:var(--font-num); line-height:1; }
    .contrib-sub { font-size:10.5px; color:var(--muted); margin-top:4px; }
    .contrib .bar { margin-top:9px; }
    @media (max-width:880px){ .home-hero, .home-cols { grid-template-columns:1fr; } }

    /* ─── STAT CARDS ─── */
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
      gap: 12px;
      margin-bottom: 32px;
    }
    .card {
      background: var(--card-grad), var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 20px 20px 16px;
      transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
      cursor: default;
    }
    .card:hover { border-color: var(--border2); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
    .card-label {
      font-size: 12px;
      color: var(--muted2);
      margin-bottom: 12px;
      letter-spacing: 0;
      font-weight: 500;
    }
    .card-val {
      font-size: 32px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: -1px;
      font-family: var(--font-num);
      font-variant-numeric: tabular-nums;
    }
    .card-sub {
      font-size: 11.5px;
      color: var(--muted);
      margin-top: 8px;
    }
    .bar {
      height: 3px;
      background: var(--border);
      border-radius: 99px;
      margin-top: 12px;
      overflow: hidden;
    }
    .bar-fill {
      height: 100%;
      border-radius: 99px;
      transition: width 1s ease;
    }

    /* ─── COLORS ─── */
    .cg { color: var(--green); }
    .ca { color: var(--amber); }
    .cr { color: var(--red); }
    .cb { color: var(--blue); }
    .cp { color: var(--blue); }
    .co { color: var(--orange); }

    /* ─── DUAL GOALS ─── */
    .goals-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 32px;
    }
    @media(max-width:900px) { .goals-row { grid-template-columns: 1fr; } }

    .goal-card {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 26px 28px;
      position: relative;
      overflow: hidden;
      transition: border-color 0.2s;
    }
    .goal-card:hover { border-color: var(--border2); }
    .goal-card::after {
      content: '';
      position: absolute;
      top:0; left:0; right:0;
      height: 1px;
    }
    .goal-card.run::after  { background: linear-gradient(90deg, var(--green) 0%, transparent 60%); }
    .goal-card.lift::after { background: linear-gradient(90deg, var(--orange) 0%, transparent 60%); }

    .goal-card-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 18px;
    }
    .goal-card-label {
      font-size: 10px;
      font-family: 'IBM Plex Mono', monospace;
      color: var(--muted);
      letter-spacing: 0.12em;
      font-weight: 500;
      margin-bottom: 6px;
    }
    .goal-card-title {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: -0.3px;
    }
    .goal-card-time {
      font-size: 28px;
      font-weight: 800;
      font-family: 'IBM Plex Mono', monospace;
      letter-spacing: -1px;
      font-variant-numeric: tabular-nums;
    }
    .goal-card.run  .goal-card-time { color: var(--green); }
    .goal-card.lift .goal-card-time { color: var(--orange); }

    .goal-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 16px;
    }
    .goal-stat-label {
      font-size: 10px;
      font-family: 'IBM Plex Mono', monospace;
      color: var(--muted);
      margin-bottom: 3px;
      letter-spacing: 0.08em;
    }
    .goal-stat-val { font-size: 18px; font-weight: 800; letter-spacing: -0.5px; }
    .bigbar { height: 5px; background: var(--border); border-radius: 99px; overflow: hidden; }
    .bigbar-fill {
      height: 100%;
      border-radius: 99px;
      transition: width 1.4s cubic-bezier(.4,0,.2,1);
    }
    .goal-card.run  .bigbar-fill { background: var(--green); }
    .goal-card.lift .bigbar-fill { background: var(--orange); }

    /* ─── BIG CARDS ─── */
    .bigcard {
      background: var(--card-grad), var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 28px 30px;
      margin-bottom: 12px;
      position: relative;
      overflow: hidden;
      box-shadow: var(--shadow-card);
    }
    .bigcard::after {
      content: '';
      position: absolute;
      top:0; left:0; right:0;
      height: 1px;
    }
    .bigcard.accent-amber::after { background: linear-gradient(90deg, var(--amber) 0%, transparent 60%); }
    .bigcard.accent-green::after  { background: linear-gradient(90deg, var(--green) 0%, transparent 60%); }
    .bigcard.accent-orange::after { background: linear-gradient(90deg, var(--orange) 0%, transparent 60%); }
    .bigcard h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.3px; }
    .bigcard p  { font-size: 14px; color: var(--muted3); line-height: 1.75; }

    /* Journal */
    .journal-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr);
      gap: 18px;
      align-items: start;
    }
    .journal-editor,
    .journal-history {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-card);
    }
    .journal-editor {
      padding: 22px;
    }
    .journal-history {
      overflow: hidden;
    }
    .journal-editor-top,
    .journal-history-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 18px;
    }
    .journal-history-head {
      padding: 18px 18px 14px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 0;
    }
    .journal-kicker {
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    .journal-editor h3,
    .journal-history h3 {
      font-size: 18px;
      line-height: 1.2;
      margin: 0;
    }
    #journal-count {
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 11px;
      white-space: nowrap;
      margin-top: 3px;
    }
    .journal-field-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1.1fr;
      gap: 10px;
      margin-bottom: 12px;
    }
    .journal-field {
      background: var(--bg3);
      border: 1px solid var(--border2);
      border-radius: var(--radius);
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 7px;
      min-width: 0;
    }
    .journal-field span {
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .journal-field input,
    .journal-field select {
      width: 100%;
      background: transparent;
      border: 0;
      color: var(--text);
      color-scheme: dark;
      font: 600 13px var(--font-sans);
      outline: none;
    }
    .journal-field select option {
      background: var(--bg3);
      color: var(--text);
    }
    .journal-field select option:checked {
      background: var(--accent);
      color: var(--accent-ink);
    }
    .journal-field input[type="range"] {
      accent-color: var(--accent);
      cursor: pointer;
    }
    .journal-field strong {
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
    }
    .journal-textarea {
      width: 100%;
      min-height: 280px;
      background: var(--bg3);
      border: 1px solid var(--border2);
      border-radius: var(--radius);
      color: var(--text);
      font: 14px/1.65 var(--font-sans);
      outline: none;
      padding: 14px 15px;
      resize: vertical;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .journal-textarea:focus {
      border-color: rgba(200,241,53,0.42);
      box-shadow: var(--glow-accent);
    }
    .journal-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 12px;
    }
    .journal-actions span {
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 11px;
    }
    .journal-actions .refresh-btn {
      width: auto;
      min-width: 140px;
      color: var(--accent);
    }
    .journal-list {
      display: flex;
      flex-direction: column;
      max-height: 620px;
      overflow-y: auto;
    }
    .journal-entry {
      padding: 15px 18px;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      transition: background 0.15s;
    }
    .journal-entry:hover {
      background: var(--bg3);
    }
    .journal-entry-top {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }
    .journal-entry-date {
      color: var(--text);
      font-size: 13px;
      font-weight: 800;
    }
    .journal-pill {
      border: 1px solid var(--border2);
      border-radius: var(--radius-pill);
      color: var(--muted2);
      font-family: var(--font-mono);
      font-size: 10px;
      padding: 3px 7px;
    }
    .journal-delete {
      background: transparent;
      border: 0;
      color: var(--muted);
      cursor: pointer;
      font-size: 15px;
      line-height: 1;
      margin-left: auto;
      padding: 1px 3px;
    }
    .journal-delete:hover {
      color: var(--red);
    }
    .journal-entry-text {
      color: var(--muted3);
      display: -webkit-box;
      font-size: 13px;
      line-height: 1.55;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      white-space: pre-line;
    }
    .journal-empty {
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 12px;
      padding: 18px;
    }
    @media (max-width: 960px) {
      .journal-layout {
        grid-template-columns: 1fr;
      }
      .journal-list {
        max-height: none;
      }
    }
    @media (max-width: 720px) {
      .journal-editor {
        padding: 16px;
      }
      .journal-field-grid {
        grid-template-columns: 1fr;
      }
      .journal-editor-top,
      .journal-history-head,
      .journal-actions {
        flex-direction: column;
        align-items: stretch;
      }
      .journal-actions .refresh-btn {
        width: 100%;
      }
      .journal-entry-top {
        align-items: flex-start;
        flex-wrap: wrap;
      }
    }

    /* TRAINING COCKPIT */
    .cockpit {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
      gap: 12px;
      margin-bottom: 32px;
    }
    .cockpit-card {
      background: var(--card-grad), var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 22px;
      min-width: 0;
      box-shadow: var(--shadow-card);
    }
    .cockpit-card.primary {
      position: relative;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(200,241,53,0.05) 0%, rgba(0,0,0,0) 50%), var(--card-grad), var(--bg2);
      border-color: var(--border2);
      box-shadow: var(--elev-hero);
    }
    .cockpit-card.primary::before {
      content: '';
      position: absolute;
      inset: 0 auto 0 0;
      width: 3px;
      background: var(--cockpit-color, var(--amber));
    }

    /* Metric tiles (raised tiles inside cockpit) */
    .metric-tile { background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:10px 12px; }
    .metric-tile-label { color:var(--muted); font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px; }
    .metric-tile-val { font-size:17px; font-weight:800; }

    /* Week rows (upcoming sessions list) */
    .week-row { display:grid; grid-template-columns:92px minmax(0,1fr) auto; align-items:center; gap:10px; padding:11px 10px; border-radius:8px; transition:background 0.15s; margin:0 -10px; cursor:default; }
    .week-row:hover { background:var(--bg3); }
    .week-day { color:var(--muted); font-family:var(--font-mono); font-size:10px; text-transform:uppercase; }
    .week-title { color:var(--muted3); font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .week-sub { color:var(--muted); font-family:var(--font-mono); font-size:10px; margin-top:2px; }

    /* Contributor cells */
    .contrib-cell { background:var(--bg3); border:1px solid var(--border); border-radius:12px; padding:13px 14px; }

    /* Tag / chip */
    .tag { display:inline-block; font-family:var(--font-mono); font-size:10px; font-weight:700; padding:3px 8px; border-radius:var(--radius-pill); white-space:nowrap; border:1px solid var(--border2); color:var(--muted2); background:transparent; }
    .tag.good { color:var(--green); background:var(--green-dim); border-color:rgba(45,212,191,0.25); }
    .tag.warn { color:var(--amber); background:var(--amber-dim); border-color:rgba(245,158,11,0.25); }
    .tag.bad  { color:var(--red);   background:var(--red-dim);   border-color:rgba(248,113,113,0.25); }
    .tag.filled { background:var(--bg3); }

    /* Insight rows (new design) */
    .insight-row { display:flex; gap:11px; background:var(--bg3); border:1px solid var(--border); border-radius:12px; padding:14px 16px; box-shadow:var(--edge-top); }
    .insight-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; margin-top:5px; }
    .insight-row-title { font-size:13.5px; font-weight:700; margin-bottom:5px; }
    .insight-row-body { font-size:12.5px; color:var(--muted3); line-height:1.6; }
    .cockpit-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
    }
    .cockpit-kicker {
      color: var(--muted);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
    }
    .cockpit-title {
      font-size: 22px;
      font-weight: 800;
      line-height: 1.1;
      margin-top: 6px;
    }
    .cockpit-score {
      color: var(--cockpit-color, var(--amber));
      font-family: 'IBM Plex Mono', monospace;
      font-size: 34px;
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
    }
    .cockpit-copy {
      color: var(--muted3);
      font-size: 14px;
      line-height: 1.65;
      margin-bottom: 16px;
    }
    .cockpit-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }
    .cockpit-metric {
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 12px;
      min-width: 0;
    }
    .cockpit-metric-label {
      color: var(--muted);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 9.5px;
      margin-bottom: 4px;
      text-transform: uppercase;
    }
    .cockpit-metric-value {
      font-size: 17px;
      font-weight: 800;
      overflow-wrap: anywhere;
    }
    .cockpit-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .cockpit-row {
      display: grid;
      grid-template-columns: 76px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
    }
    .cockpit-row:last-child { border-bottom: none; }
    .cockpit-row-day {
      color: var(--muted);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      text-transform: uppercase;
    }
    .cockpit-row-title {
      color: var(--muted3);
      font-size: 13px;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .cockpit-row-sub {
      color: var(--muted);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      margin-top: 2px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .cockpit-tag {
      border: 1px solid var(--border2);
      border-radius: 99px;
      color: var(--muted2);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      font-weight: 700;
      padding: 3px 8px;
      white-space: nowrap;
    }
    .cockpit-tag.good { background: var(--green-dim); border-color: rgba(45,212,191,0.25); color: var(--green); }
    .cockpit-tag.warn { background: var(--amber-dim); border-color: rgba(245,158,11,0.25); color: var(--amber); }
    .cockpit-tag.bad  { background: var(--red-dim); border-color: rgba(248,113,113,0.25); color: var(--red); }
    .cockpit-limiter-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 16px;
    }
    .cockpit-limiter {
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 99px;
      color: var(--muted2);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      padding: 5px 9px;
    }
    .cockpit-limiter.good { color: var(--green); border-color: rgba(45,212,191,0.22); background: var(--green-dim); }
    .cockpit-limiter.warn { color: var(--amber); border-color: rgba(245,158,11,0.22); background: var(--amber-dim); }
    .cockpit-limiter.bad  { color: var(--red); border-color: rgba(248,113,113,0.22); background: var(--red-dim); }

    /* ─── TODAY HEADER ─── */
    .today-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 18px;
      gap: 12px;
    }
    .today-badge {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.07em;
      padding: 4px 10px;
      border-radius: var(--radius-pill);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .badge-amber  { background: var(--amber-dim);  color: var(--amber);  border: 1px solid rgba(245,158,11,0.20); }
    .badge-green  { background: var(--green-dim);  color: var(--green);  border: 1px solid rgba(45,212,191,0.20); }
    .badge-red    { background: var(--red-dim);    color: var(--red);    border: 1px solid rgba(248,113,113,0.20); }
    .badge-blue   { background: var(--blue-dim);   color: var(--blue);   border: 1px solid rgba(77,159,255,0.20); }
    .badge-orange { background: var(--orange-dim); color: var(--orange); border: 1px solid rgba(251,146,60,0.20); }
    .badge-accent { background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(194,240,74,0.25); }

    /* ─── TEMPO TABLE ─── */
    .tempo-table {
      background: var(--bg3);
      border-radius: 12px;
      padding: 16px 20px;
      margin-top: 20px;
      border: 1px solid var(--border);
    }
    .tempo-label-top {
      font-size: 10px;
      font-family: 'IBM Plex Mono', monospace;
      color: var(--muted);
      letter-spacing: 0.12em;
      margin-bottom: 14px;
      font-weight: 500;
    }
    .tempo-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
    }
    .tempo-row:last-child { border-bottom:none; padding-bottom:0; }
    .tempo-name { font-size: 13px; color: var(--muted3); }
    .tempo-val  { font-size: 14px; font-weight: 600; font-family: 'IBM Plex Mono', monospace; }

    /* ─── INSIGHT BOX ─── */
    .insight-box {
      background: var(--bg3);
      border: 1px solid var(--border2);
      border-radius: 12px;
      padding: 14px 18px;
      margin-top: 20px;
    }
    .insight-label {
      font-size: 10px;
      font-family: 'IBM Plex Mono', monospace;
      color: var(--muted);
      letter-spacing: 0.12em;
      margin-bottom: 6px;
      font-weight: 500;
    }
    .insight-text { font-size: 13.5px; color: var(--muted3); line-height: 1.7; }

    /* ─── SESSION LIST ─── */
    .session-list { display:flex; flex-direction:column; gap:10px; }
    .session {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px 20px;
      display: flex;
      gap: 16px;
      align-items: flex-start;
      transition: border-color 0.2s, transform 0.2s;
    }
    .session:hover { border-color: var(--border2); transform: translateX(2px); }
    .session-stripe { width:3px; align-self:stretch; border-radius:99px; flex-shrink:0; }
    .session-week {
      font-size: 10px;
      font-family: 'IBM Plex Mono', monospace;
      color: var(--muted);
      min-width: 52px;
      padding-top: 2px;
      line-height: 1.7;
      font-weight: 500;
    }
    .session-body { flex:1; }
    .session-title { font-size: 14px; font-weight: 700; margin-bottom: 5px; letter-spacing: -0.2px; }
    .session-desc  { font-size: 13px; color: var(--muted3); line-height: 1.6; }
    .session-type {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
      font-family: 'IBM Plex Mono', monospace;
      padding: 2px 8px;
      border-radius: 99px;
      font-weight: 600;
      margin-bottom: 6px;
    }
    .st-run   { background: var(--green-dim);  color: var(--green);  border: 1px solid rgba(0,229,160,0.2); }
    .st-lift  { background: var(--orange-dim); color: var(--orange); border: 1px solid rgba(255,140,66,0.2); }
    .st-rest  { background: var(--blue-dim);   color: var(--blue);   border: 1px solid rgba(77,159,255,0.2); }
    .pills { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
    .pill {
      font-size: 10.5px;
      font-family: 'IBM Plex Mono', monospace;
      padding: 3px 9px;
      border-radius: 99px;
      border: 1px solid var(--border2);
      color: var(--muted2);
      font-weight: 500;
    }

    /* ─── HISTORY TABLE ─── */
    .history-table-unused {
      font-size: 10px;
      font-family: 'IBM Plex Mono', monospace;
      color: var(--muted);
      letter-spacing: 0.10em;
      text-align: left;
      padding: 0 14px 12px;
      text-transform: uppercase;
      font-weight: 500;
    }
    .history-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }
    .history-table th:nth-child(1) { width: 40%; }
    .history-table th:nth-child(2) { width: 14%; }
    .history-table th:nth-child(3) { width: 14%; }
    .history-table th:nth-child(4) { width: 14%; }
    .history-table th:nth-child(5) { width: 14%; }
    .history-table td {
      font-size: 13px;
      padding: 12px 14px;
      border-top: 1px solid var(--border);
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .history-table tr:hover td { background: rgba(255,255,255,0.015); }

    /* ─── RECORDS ─── */
    .records-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 10px;
      margin-bottom: 32px;
    }
    .record-card {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 22px 20px;
      transition: border-color 0.2s, transform 0.2s;
    }
    .record-card:hover { border-color: var(--border2); transform: translateY(-1px); }
    .record-type {
      font-size: 10px;
      font-family: 'IBM Plex Mono', monospace;
      color: var(--muted);
      margin-bottom: 10px;
      letter-spacing: 0.08em;
      font-weight: 500;
    }
    .record-val { font-size: 28px; font-weight: 800; letter-spacing: -0.8px; font-variant-numeric: tabular-nums; }
    .record-sub { font-size: 11px; color: var(--muted2); margin-top: 6px; }

    /* ─── HERO ─── */
    .hero { text-align: center; padding: 52px 20px 44px; }
    .hero h2 {
      font-size: 44px;
      font-weight: 900;
      letter-spacing: -2.5px;
      line-height: 1.05;
      margin-bottom: 14px;
    }
    .hero p {
      font-size: 15px;
      color: var(--muted3);
      max-width: 460px;
      margin: 0 auto 40px;
      line-height: 1.75;
    }
    .hero-nav {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
      gap: 10px;
      max-width: 820px;
      margin: 0 auto;
    }
    .hero-card {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 22px 20px;
      cursor: pointer;
      transition: all 0.2s;
      text-align: left;
    }
    .hero-card:hover { border-color: var(--border3); transform: translateY(-2px); background: var(--bg3); }
    .hero-card-icon  { font-size: 22px; margin-bottom: 12px; }
    .hero-card-title { font-size: 14px; font-weight: 700; margin-bottom: 5px; letter-spacing: -0.2px; }
    .hero-card-desc  { font-size: 11.5px; color: var(--muted2); }

    /* ─── CNS-SCORE & HRV TRAFFIC LIGHT ─── */
    .cns-card {
      background: var(--card-grad), var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 22px 24px 20px;
      margin-bottom: 0;
      position: relative;
      overflow: hidden;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow-card);
    }
    .cns-metrics { align-content: start; }
    .cns-card::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, var(--cns-color, var(--green)) 0%, transparent 55%);
    }
    .cns-top { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 14px; }
    .cns-score-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 72px; }
    .cns-score {
      font-size: 48px;
      font-weight: 800;
      font-family: 'IBM Plex Mono', monospace;
      letter-spacing: -2px;
      line-height: 1;
      color: var(--cns-color, var(--green));
    }
    .cns-label { font-size: 9px; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; }
    .cns-right { flex: 1; }
    .cns-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.2px; }
    .cns-desc  { font-size: 12px; color: var(--muted2); line-height: 1.5; }
    .cns-bar-wrap { margin-bottom: 14px; }
    .cns-bar { height: 5px; background: var(--bg3); border-radius: 99px; overflow: hidden; }
    .cns-bar-fill { height: 100%; border-radius: 99px; background: var(--cns-color, var(--green)); transition: width 1.2s cubic-bezier(.4,0,.2,1); }

    /* HRV Traffic Light */
    .hrv-light-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; }
    .hrv-dot {
      width: 10px; height: 10px; border-radius: 50%;
      background: var(--bg3);
      transition: background 0.3s, box-shadow 0.3s;
    }
    .hrv-dot.active-green { background: var(--green); }
    .hrv-dot.active-amber { background: var(--amber); }
    .hrv-dot.active-red   { background: var(--red);   }
    .hrv-light-label { font-size: 11px; color: var(--muted2); }

    /* CNS delmetriker */
    .cns-metrics {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: 14px;
      border-top: 1px solid var(--border);
    }
    .cns-metric {
      border-bottom: 1px solid var(--border);
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      padding: 12px 0;
      align-items: center;
    }
    .cns-metric:last-child {
      border-bottom: none;
    }
    .cns-metric-name  {
      color: var(--muted3);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: -0.1px;
      text-transform: none;
    }
    .cns-metric-val {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 18px;
      font-weight: 800;
      line-height: 1.1;
      text-align: right;
      white-space: nowrap;
    }
    .cns-metric-sub {
      color: var(--muted2);
      font-size: 11px;
      line-height: 1.35;
      max-width: 220px;
    }
    .cns-metric-name,
    .cns-metric-sub {
      grid-column: 1;
    }
    .cns-metric-val {
      grid-column: 2;
      grid-row: 1 / span 2;
    }

    .cns-drivers {
      background: rgba(255,255,255,0.018);
      border: 1px solid var(--border);
      border-radius: 12px;
      margin-top: 14px;
      padding: 13px 14px 14px;
      display: flex;
      flex-direction: column;
      gap: 11px;
    }
    .cns-drivers-head,
    .cns-driver-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .cns-drivers-head span {
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .cns-drivers-head strong {
      color: var(--muted2);
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      text-align: right;
    }
    .cns-driver-row {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .cns-driver-top span {
      color: var(--muted3);
      font-size: 11.5px;
      font-weight: 650;
    }
    .cns-driver-top strong {
      color: var(--text);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 750;
    }
    .cns-driver-bar {
      height: 5px;
      background: rgba(255,255,255,0.045);
      border-radius: 99px;
      overflow: hidden;
    }
    .cns-driver-bar > div {
      width: 0%;
      height: 100%;
      background: var(--cns-color, var(--green));
      border-radius: 99px;
      transition: width 1.2s cubic-bezier(.4,0,.2,1), background 0.2s;
    }

    
    .sleep-debt-row {
      display: flex; align-items: center; justify-content: space-between;
      background: var(--bg3); border-radius: 10px; padding: 10px 14px; margin-top: 10px;
    }
    .sleep-debt-label { font-size: 11px; color: var(--muted2); text-transform: uppercase; letter-spacing: 0.08em; }
    .sleep-debt-val   { font-size: 15px; font-weight: 700; font-family: 'IBM Plex Mono', monospace; }
    .sleep-flag-row   { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
    .sleep-flag {
      font-size: 10px; font-family: 'IBM Plex Mono', monospace;
      padding: 3px 9px; border-radius: 99px; font-weight: 600;
    }
    .sleep-flag.ok   { background: rgba(74,222,128,0.12); color: var(--green); }
    .sleep-flag.warn { background: rgba(251,191,36,0.12); color: var(--amber); }
    .sleep-flag.bad  { background: rgba(248,113,113,0.12); color: var(--red); }

    /* ─── STYRKA ─── */
    .strength-tabs { display:flex; gap:8px; margin-bottom: 20px; }
    .strength-tab {
      background: var(--bg2);
      border: 1px solid var(--border);
      color: var(--muted2);
      border-radius: 10px;
      padding: 9px 16px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
    }
    .strength-tab:hover { color: var(--muted3); border-color: var(--border2); }
    .strength-tab.active { background: var(--green-dim); color: var(--green); border-color: rgba(45,212,191,0.3); }
    .strength-session {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      margin-bottom: 10px;
      overflow: hidden;
      transition: border-color 0.2s;
    }
    .strength-session:hover { border-color: var(--border2); }
    .strength-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 22px;
      cursor: pointer;
      user-select: none;
    }
    .strength-header-left { display:flex; flex-direction:column; gap:5px; }
    .strength-title { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; }
    .strength-meta  { font-size: 11px; color: var(--muted2); }
    .strength-chevron { font-size: 14px; color: var(--muted); transition: transform 0.2s; }
    .strength-session.open .strength-chevron { transform: rotate(180deg); }
    .strength-body { display:none; padding: 0 22px 20px; }
    .strength-session.open .strength-body { display:block; }
    .ex-list { margin-bottom: 16px; }
    .ex-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 9px 0;
      border-bottom: 1px solid var(--border);
      font-size: 13px;
    }
    .ex-row:last-child { border-bottom: none; }
    .ex-name   { flex:1; font-weight:600; }
    .ex-detail { font-size: 12px; color: var(--muted2); }
    .ex-del {
      background: none;
      border: none;
      color: var(--muted);
      cursor: pointer;
      font-size: 17px;
      padding: 0 2px;
      line-height: 1;
      transition: color 0.15s;
    }
    .ex-del:hover { color: var(--red); }
    .add-ex-form {
      background: var(--bg3);
      border-radius: 12px;
      padding: 16px 18px;
      border: 1px solid var(--border);
    }
    .add-ex-form .form-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
    .add-ex-form input {
      background: var(--bg4);
      border: 1px solid var(--border2);
      border-radius: 8px;
      padding: 9px 12px;
      color: var(--text);
      font-family: var(--font-sans);
      font-size: 13px;
      outline: none;
      transition: border-color 0.15s;
    }
    .add-ex-form input:focus { border-color: var(--orange); }
    .add-ex-form input.ex-input-name { flex:2; min-width:140px; }
    .add-ex-form input.ex-input-sm   { width:72px; }
    .add-ex-form input.ex-input-note { flex:1; min-width:120px; }
    .add-ex-btn {
      background: var(--orange-dim);
      border: 1px solid rgba(255,140,66,0.25);
      border-radius: 8px;
      padding: 9px 20px;
      color: var(--orange);
      font-family: var(--font-sans);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
    }
    .add-ex-btn:hover { background: rgba(255,140,66,0.15); }
    .strength-rx {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
    }
    .strength-rx-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 4px;
    }
    .strength-rx-head span {
      color: var(--orange);
      font: 700 10px var(--font-mono);
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .strength-rx-head em {
      color: var(--muted);
      font: 500 10px var(--font-mono);
      font-style: normal;
    }
    .strength-rx-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      padding: 11px 0;
      border-top: 1px solid rgba(255,255,255,0.05);
    }
    .strength-rx-row:first-child { border-top: none; }
    .strength-rx-main { min-width: 0; }
    .strength-rx-name {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text);
      font-size: 12px;
      font-weight: 700;
    }
    .strength-rx-name span {
      color: var(--green);
      font: 700 8px var(--font-mono);
      letter-spacing: 0.08em;
    }
    .strength-rx-row.new .strength-rx-name span { color: var(--blue); }
    .strength-rx-row.caution .strength-rx-name span { color: var(--red); }
    .strength-rx-value {
      margin-top: 3px;
      color: var(--orange);
      font: 700 13px var(--font-mono);
      line-height: 1.45;
    }
    .strength-rx-row.caution .strength-rx-value { color: var(--amber); }
    .strength-rx-last {
      margin-top: 3px;
      color: var(--muted2);
      font-size: 10px;
      line-height: 1.4;
    }
    .strength-rx-use {
      min-height: 32px;
      padding: 6px 10px;
      border: 1px solid rgba(251,146,60,0.28);
      border-radius: 7px;
      background: var(--orange-dim);
      color: var(--orange);
      font: 700 10px var(--font-sans);
      cursor: pointer;
    }
    .strength-rx-use:hover { background: rgba(251,146,60,0.16); }
    .no-sessions { color: var(--muted); font-size: 13px; padding: 20px 0; }
    .strength-analysis-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 14px;
    }
    .strength-metric-card,
    .strength-panel {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-card);
    }
    .strength-metric-card {
      padding: 16px 18px;
      display: flex;
      flex-direction: column;
      gap: 5px;
      min-height: 104px;
    }
    .strength-metric-card span,
    .strength-panel-head span {
      color: var(--muted);
      font: 600 10px 'IBM Plex Mono', monospace;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .strength-metric-card strong {
      color: var(--text);
      font-size: 28px;
      line-height: 1;
      letter-spacing: 0;
    }
    .strength-metric-card em {
      color: var(--muted2);
      font-size: 12px;
      font-style: normal;
    }
    .strength-analysis-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
      gap: 14px;
      margin-bottom: 14px;
    }
    .strength-panel {
      padding: 18px;
      margin-bottom: 14px;
    }
    .strength-panel-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: baseline;
      margin-bottom: 16px;
    }
    .strength-panel-head h3 {
      margin: 0;
      font-size: 15px;
      letter-spacing: 0;
    }
    .strength-week-chart {
      height: 160px;
      display: grid;
      grid-template-columns: repeat(8, minmax(26px, 1fr));
      align-items: end;
      gap: 8px;
      padding-top: 8px;
    }
    .strength-week {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: 8px;
      min-width: 0;
    }
    .strength-week-bar {
      border-radius: 6px 6px 2px 2px;
      background: linear-gradient(180deg, var(--green), rgba(45,212,191,0.32));
      min-height: 8px;
      transition: height 0.2s;
    }
    .strength-week-label {
      color: var(--muted2);
      font-size: 10px;
      text-align: center;
      white-space: nowrap;
    }
    .strength-rank-list,
    .strength-pr-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .strength-rank-row,
    .strength-pr {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      border-bottom: 1px solid var(--border);
      padding-bottom: 8px;
      font-size: 13px;
    }
    .strength-rank-row:last-child,
    .strength-pr:last-child { border-bottom: 0; padding-bottom: 0; }
    .strength-rank-row span,
    .strength-pr span {
      color: var(--muted2);
      display: block;
      font-size: 11px;
      margin-top: 3px;
    }
    .strength-rank-row strong,
    .strength-pr b {
      color: var(--green);
      font-size: 13px;
      white-space: nowrap;
    }
    .strength-empty {
      color: var(--muted);
      font-size: 12px;
      padding: 4px 0;
    }
    .strength-table-wrap { overflow-x: auto; }
    .strength-analysis-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      min-width: 620px;
    }
    .strength-analysis-table th {
      color: var(--muted);
      font: 600 10px 'IBM Plex Mono', monospace;
      letter-spacing: 0.1em;
      text-align: left;
      text-transform: uppercase;
      padding: 0 10px 10px 0;
    }
    .strength-analysis-table td {
      border-top: 1px solid var(--border);
      padding: 11px 10px 11px 0;
      color: var(--text);
      vertical-align: middle;
      white-space: nowrap;
    }
    .strength-analysis-table td:first-child {
      white-space: normal;
      min-width: 180px;
    }
    .strength-analysis-table td strong,
    .strength-analysis-table td span {
      display: block;
    }
    .strength-analysis-table td span {
      color: var(--muted2);
      font-size: 11px;
      margin-top: 3px;
    }
    .trend-up { color: var(--green) !important; }
    .trend-down { color: var(--red) !important; }
    .trend-flat { color: var(--muted2) !important; }

    /* ─── CHAT ─── */
    .chat-wrap { background: var(--card-grad), var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-card); }
    .coach-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 16px;
      align-items: start;
    }
    .chat-top {
      padding: 18px 22px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .chat-dot { width:8px; height:8px; background:var(--blue); border-radius:50%; }
    .chat-title { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
    .chat-sub   { font-size: 10.5px; color: var(--muted); margin-left: auto; }
    .qprompts   { display:flex; gap:7px; flex-wrap:wrap; padding:14px 22px 6px; }
    .qp {
      font-size: 11px;
      font-family: 'IBM Plex Mono', monospace;
      padding: 5px 12px;
      border-radius: 99px;
      border: 1px solid var(--border2);
      color: var(--muted2);
      cursor: pointer;
      background: none;
      transition: all 0.15s;
      font-weight: 500;
    }
    .qp:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-dim); }
    .messages {
      padding: 18px 22px;
      min-height: 200px;
      max-height: 380px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .messages::-webkit-scrollbar { width:3px; }
    .messages::-webkit-scrollbar-thumb { background:var(--border2); border-radius:99px; }
    .msg { font-size: 14px; line-height: 1.7; max-width: 82%; }
    .msg.user {
      align-self: flex-end;
      background: var(--bg4);
      border: 1px solid var(--border2);
      border-radius: 8px;
      padding: 11px 15px;
    }
    .msg.ai {
      align-self: flex-start;
      background: var(--bg3);
      border: 1px solid var(--border2);
      border-radius: 8px;
      padding: 11px 15px;
    }
    .msg-from { font-size:9.5px; font-family:'IBM Plex Mono',monospace; color:var(--muted); margin-bottom:5px; font-weight:600; }
    .chat-input { display:flex; gap:10px; padding:16px 22px; border-top:1px solid var(--border); }
    .chat-input input {
      flex:1;
      background: var(--bg3);
      border: 1px solid var(--border2);
      border-radius: 10px;
      padding: 11px 16px;
      color: var(--text);
      font-family: var(--font-sans);
      font-size: 14px;
      outline: none;
      transition: border-color 0.2s;
    }
    .chat-input input:focus { border-color: var(--blue); }
    .chat-input input::placeholder { color: var(--muted); }
    .send-btn {
      background: var(--blue);
      border: none;
      border-radius: 8px;
      padding: 11px 18px;
      color: #081018;
      font-family: var(--font-sans);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: opacity 0.2s, transform 0.15s;
    }
    .send-btn:hover { opacity:0.92; }

    /* ─── HÄLSOGRUPPER ─── */
    .hg-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      align-items: stretch;
      gap: 12px;
      margin-bottom: 32px;
    }
    @media(max-width:960px) { .hg-row { grid-template-columns: 1fr; } }

    .humidity-card {
      margin-bottom: 24px;
    }
    .humidity-meter {
      width: 100%;
      height: 8px;
      margin-top: 16px;
      overflow: hidden;
      border-radius: 999px;
      background: var(--bg2);
      border: 1px solid var(--border2);
    }
    .humidity-fill {
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--amber), var(--green), var(--blue));
      transition: width 0.3s ease;
    }
    .humidity-meta {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-top: 10px;
      color: var(--muted3);
      font-size: 12px;
      font-family: 'IBM Plex Mono', monospace;
    }

    .hg-card {
      background: var(--card-grad), var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      overflow: hidden;
      transition: border-color 0.2s, box-shadow 0.2s;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow-card);
    }
    .hg-card:hover { border-color: var(--border2); box-shadow: var(--shadow-raised); }

    .hg-top {
      padding: 22px 24px 18px;
      position: relative;
    }
    .hg-top::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
    }
    .hg-card.c-recovery .hg-top::after { background: linear-gradient(90deg, var(--green)  0%, transparent 55%); }
    .hg-card.c-sleep    .hg-top::after { background: linear-gradient(90deg, var(--blue) 0%, transparent 55%); }
    .hg-card.c-energy   .hg-top::after { background: linear-gradient(90deg, var(--amber)  0%, transparent 55%); }
    .hg-card.c-stress   .hg-top::after { background: linear-gradient(90deg, var(--red)  0%, transparent 55%); }

    .hg-cat {
      font-size: 10px;
      font-family: 'IBM Plex Mono', monospace;
      color: var(--muted);
      letter-spacing: 0.14em;
      font-weight: 500;
      text-transform: uppercase;
      margin-bottom: 14px;
    }
    .hg-score-row {
      display: flex;
      align-items: flex-end;
      gap: 14px;
      margin-bottom: 14px;
    }
    .hg-score {
      font-size: 64px;
      font-weight: 900;
      letter-spacing: -4px;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .hg-score-right { display: flex; flex-direction: column; gap: 5px; padding-bottom: 4px; }
    .hg-status {
      font-size: 11px;
      font-family: 'IBM Plex Mono', monospace;
      padding: 3px 10px;
      border-radius: 99px;
      font-weight: 700;
      letter-spacing: 0.06em;
      display: inline-block;
    }
    .hs-great  { background: var(--green-dim);  color: var(--green);  border: 1px solid rgba(0,229,160,0.2); }
    .hs-ok     { background: var(--amber-dim);  color: var(--amber);  border: 1px solid rgba(245,166,35,0.2); }
    .hs-low    { background: var(--red-dim);    color: var(--red);    border: 1px solid rgba(255,77,109,0.2); }
    .hs-purple { background: var(--blue-dim); color: var(--blue); border: 1px solid rgba(96,165,250,0.2); }

    .hg-summary {
      font-size: 13px;
      color: var(--muted3);
      line-height: 1.5;
    }
    .hg-bar-wrap { margin-top: 14px; }
    .hg-bar {
      height: 5px;
      background: var(--border);
      border-radius: 99px;
      overflow: hidden;
    }
    .hg-bar-fill {
      height: 100%;
      border-radius: 99px;
      transition: width 1.2s cubic-bezier(.4,0,.2,1);
    }
    .hg-card.c-recovery .hg-bar-fill { background: linear-gradient(90deg, var(--green), var(--blue)); }
    .hg-card.c-sleep    .hg-bar-fill { background: linear-gradient(90deg, var(--blue), var(--green)); }
    .hg-card.c-energy   .hg-bar-fill { background: linear-gradient(90deg, var(--amber), var(--green)); }
    .hg-card.c-stress   .hg-bar-fill { background: linear-gradient(90deg, var(--green), var(--amber), var(--red)); }

    /* Detaljer */
    .hg-toggle {
      width: 100%;
      background: none;
      border: none;
      border-top: 1px solid var(--border);
      padding: 10px 24px;
      color: var(--muted2);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      font-weight: 500;
      cursor: pointer;
      text-align: left;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: color 0.15s, background 0.15s;
      letter-spacing: 0.06em;
    }
    .hg-toggle:hover { color: var(--text); background: var(--bg3); }
    .hg-toggle-arrow { transition: transform 0.2s; }
    .hg-card.open .hg-toggle-arrow { transform: rotate(180deg); }

    .hg-details {
      display: flex;
      padding: 0 24px 18px;
      flex-direction: column;
      gap: 0;
      flex: 1;
    }

    .hg-metric {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 11px 0;
      border-bottom: 1px solid var(--border);
    }
    .hg-metric:last-child { border-bottom: none; }
    .hg-metric-body { flex: 1; }
    .hg-metric-name {
      font-size: 11.5px;
      font-weight: 600;
      color: var(--muted3);
      margin-bottom: 2px;
    }
    .hg-metric-desc { font-size: 11px; color: var(--muted); }
    .hg-metric-right { text-align: right; }
    .hg-metric-val {
      font-size: 17px;
      font-weight: 800;
      letter-spacing: -0.5px;
      font-variant-numeric: tabular-nums;
    }
    .hg-metric-status {
      font-size: 10px;
      font-family: 'IBM Plex Mono', monospace;
      color: var(--muted2);
      margin-top: 2px;
    }

    /* ─── INSIGHT CARDS (Whoop-style) ─── */
    .stress-chart-wrap {
      padding: 14px 0 0;
      border-top: 1px solid var(--border);
      margin-top: 4px;
    }
    #stress-history-chart {
      width: 100%;
      height: 132px;
      display: block;
      overflow: hidden;
    }
    .stress-chart-bg {
      fill: rgba(255,255,255,0.018);
    }
    .stress-grid-line {
      stroke: rgba(255,255,255,0.055);
      stroke-width: 1;
      vector-effect: non-scaling-stroke;
    }
    .stress-avg-line {
      stroke: rgba(156,163,175,0.46);
      stroke-width: 1;
      stroke-dasharray: 5 7;
      vector-effect: non-scaling-stroke;
    }
    .stress-area {
      fill: url(#stress-area-grad);
    }
    .stress-line-shadow {
      fill: none;
      stroke: rgba(0,0,0,0.36);
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }
    .stress-line {
      fill: none;
      stroke: var(--amber);
      stroke-width: 2.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }
    .stress-end-dot {
      fill: var(--amber);
      opacity: 0.55;
    }
    .stress-current-halo {
      fill: var(--amber);
      opacity: 0.16;
    }
    .stress-current-dot {
      stroke: var(--bg2);
      stroke-width: 1.8;
      vector-effect: non-scaling-stroke;
    }
    .stress-chart-label,
    .stress-current-label {
      fill: var(--muted2);
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.02em;
    }
    .stress-current-label {
      fill: var(--text);
      font-size: 11px;
      font-weight: 800;
    }

    .insight-card {
      display: flex; background: var(--bg3); border-radius: 12px;
      overflow: hidden; margin-bottom: 8px; border: 1px solid var(--border);
      box-shadow: 0 2px 12px rgba(0,0,0,0.3);
      transition: border-color 0.15s, transform 0.15s;
    }
    .insight-card:hover { border-color: var(--border2); transform: translateX(2px); }
    .insight-bar { width: 4px; flex-shrink: 0; }
    .insight-bar.green { background: var(--accent); }
    .insight-bar.amber { background: var(--amber); }
    .insight-bar.red   { background: var(--red); }
    .insight-body { padding: 10px 13px; flex: 1; min-width: 0; }
    .insight-top { display: flex; align-items: baseline; gap: 7px; margin-bottom: 2px; flex-wrap: wrap; }
    .insight-icon { font-size: 13px; line-height: 1; }
    .insight-title { font-size: 13px; font-weight: 700; color: var(--fg); flex: 1; }
    .insight-value { font-size: 11px; font-family: 'IBM Plex Mono', monospace; font-weight: 600; white-space: nowrap; }
    .insight-value.green { color: var(--green); }
    .insight-value.amber { color: var(--amber); }
    .insight-value.red   { color: var(--red); }
    .insight-detail { font-size: 12px; color: var(--muted3); line-height: 1.5; margin-bottom: 6px; }
    .insight-action {
      display: inline-flex; align-items: center; gap: 4px; font-size: 11px;
      font-weight: 600; color: var(--green); background: var(--green-dim);
      border-radius: 5px; padding: 2px 8px;
    }
    .insights-hl { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .insights-hl h3 { margin: 0; font-size: 15px; }
    .insights-refresh {
      background: none; border: 1px solid var(--border2); border-radius: 6px;
      color: var(--muted2); font-size: 10px; font-family: 'IBM Plex Mono', monospace;
      padding: 3px 9px; cursor: pointer; transition: border-color 0.15s;
    }
    .insights-refresh:hover { border-color: var(--muted2); }

    /* ─── TOOLTIP ─── */
    .tip-box {
      position: fixed;
      z-index: 999;
      background: var(--bg4);
      border: 1px solid var(--border3);
      border-radius: 12px;
      padding: 14px 16px;
      width: 260px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.5);
      pointer-events: none;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.15s, transform 0.15s;
    }
    .tip-box.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .tip-title {
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 6px;
      letter-spacing: -0.2px;
    }
    .tip-desc {
      font-size: 12px;
      color: var(--muted3);
      line-height: 1.6;
      margin-bottom: 10px;
    }
    .tip-ranges {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .tip-range {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11px;
      font-family: 'IBM Plex Mono', monospace;
    }
    .tip-range-label { color: var(--muted2); }
    .tip-range-val   { font-weight: 600; }

    /* ─── COACH LAYOUT ─── */
    @media (max-width: 900px) {
      .coach-layout { grid-template-columns: 1fr; }
    }

    /* ─── KALENDER ─── */
    .cal-tabs {
      display: inline-flex;
      gap: 4px;
      padding: 4px;
      margin: 0 0 14px;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: var(--edge-top);
    }
    .cal-tab {
      appearance: none;
      border: 0;
      border-radius: 7px;
      background: transparent;
      color: var(--muted2);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      padding: 8px 12px;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }
    .cal-tab:hover {
      color: var(--text);
      background: var(--bg3);
    }
    .cal-tab.active {
      color: var(--accent);
      background: var(--accent-dim);
    }
    .cal-empty {
      padding: 18px;
      color: var(--muted2);
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      font-size: 13px;
      font-family: var(--font-mono);
    }
    .cal-week {
      margin-bottom: 10px;
      background: var(--card-grad), var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      overflow: hidden;
      box-shadow: var(--shadow-card);
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .cal-week:hover { border-color: var(--border2); }
    .cal-week-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 18px;
      border-bottom: 1px solid var(--border);
      background: var(--bg3);
    }
    .cal-week-num {
      font-size: 10px;
      font-family: var(--font-mono);
      color: var(--accent);
      font-weight: 700;
      min-width: 36px;
    }
    .cal-week-range {
      font-size: 12px;
      font-family: var(--font-mono);
      color: var(--muted2);
    }
    .cal-week-badges {
      display: flex;
      gap: 6px;
      margin-left: auto;
    }
    .cal-week-badge {
      font-size: 10px;
      font-family: 'IBM Plex Mono', monospace;
      padding: 2px 8px;
      border-radius: 99px;
      font-weight: 600;
    }
    .cwb-run  { background: var(--green-dim);  color: var(--green);  border: 1px solid rgba(0,229,160,0.2); }
    .cwb-lift { background: var(--orange-dim); color: var(--orange); border: 1px solid rgba(255,140,66,0.2); }
    .cwb-race { background: var(--red-dim);    color: var(--red);    border: 1px solid rgba(255,77,109,0.2); }
    .cwb-km   { background: var(--bg4);        color: var(--muted3); border: 1px solid var(--border2); }
    .cwb-work { background: var(--blue-dim);   color: var(--blue);   border: 1px solid rgba(77,159,255,0.2); }
    .csp-work { background: var(--blue-dim);   color: var(--blue);   border: 1px solid rgba(77,159,255,0.2); font-style: normal; }

    .cal-days {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
    }
    .cal-day {
      padding: 12px 10px;
      border-right: 1px solid var(--border);
      min-height: 72px;
      position: relative;
    }
    .cal-day:last-child { border-right: none; }
    .cal-day-header {
      display: flex;
      flex-direction: column;
      margin-bottom: 8px;
    }
    .cal-day-name {
      font-size: 9px;
      font-family: 'IBM Plex Mono', monospace;
      color: var(--muted);
      letter-spacing: 0.1em;
      font-weight: 500;
      text-transform: uppercase;
    }
    .cal-day-num {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: -0.5px;
      line-height: 1.2;
      color: var(--muted2);
    }
    .cal-day.today .cal-day-num {
      color: var(--text);
    }
    .cal-day.today { background: var(--bg3); }
    .cal-today-bar { position:absolute; top:0; bottom:0; left:0; width:2.5px; background:var(--accent); border-radius:0 2px 2px 0; }
    .cal-day.today::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: var(--accent);
    }
    .cal-day.today .cal-day-name { color: var(--accent); }
    .cal-day.past .cal-day-num  { color: var(--muted); opacity: 0.5; }
    .cal-day.past .cal-session-pill { opacity: 0.45; }

    .cal-session-pill {
      display: block;
      font-size: 10px;
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 600;
      padding: 3px 7px;
      border-radius: 6px;
      margin-bottom: 4px;
      line-height: 1.4;
      cursor: default;
    }
    .cal-session-list {
      min-width: 0;
    }
    .csp-run  { background: var(--green-dim);  color: var(--green);  border: 1px solid rgba(0,229,160,0.18); }
    .csp-easy { background: rgba(0,229,160,0.04); color: var(--muted2); border: 1px solid rgba(0,229,160,0.1); }
    .csp-lift { background: var(--orange-dim); color: var(--orange); border: 1px solid rgba(255,140,66,0.18); }
    .csp-race { background: var(--red-dim);    color: var(--red);    border: 1px solid rgba(255,77,109,0.2); }
    .csp-rest { background: var(--blue-dim);   color: var(--blue);   border: 1px solid rgba(77,159,255,0.18); }
    .csp-done { background: var(--green-dim);  color: var(--green);  border: 1px solid var(--green); font-weight: 700; }
    .csp-actual { box-shadow: inset 3px 0 0 currentColor; }
    .cal-day.past .cal-session-pill.csp-done { opacity: 1; }
    .csp-modified { outline: 1px dashed rgba(255,200,80,0.5); }

    /* Tooltip hanteras via JS tipBox istället */

    @media (max-width: 900px) {
      .cal-days { grid-template-columns: repeat(7, minmax(0,1fr)); }
      .cal-tabs { display: flex; width: 100%; }
      .cal-tab { flex: 1; padding: 8px 6px; }
      .cal-session-pill { font-size: 9px; padding: 2px 5px; }
      .cal-day { padding: 8px 6px; min-height: 60px; }
      .cal-day-num { font-size: 13px; }
    }

    /* Cal pill aliases (new design tokens) */
    .cal-pill { display:block; font-size:10px; font-family:var(--font-mono); padding:4px 7px; border-radius:6px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:5px; }
    .cal-pill.run  { background:var(--green-dim);  color:var(--green);  border:1px solid rgba(45,212,191,0.3); }
    .cal-pill.lift { background:var(--orange-dim); color:var(--orange); border:1px solid rgba(251,146,60,0.3); }
    .cal-pill.race { background:var(--red-dim);    color:var(--red);    border:1px solid rgba(248,113,113,0.3); }
    .cal-pill.rest { background:var(--bg3);        color:var(--muted);  border:1px solid var(--border); }
    .cal-pill.gcal { background:var(--bg4);        color:var(--muted2); border:1px solid var(--border2); }
    .cal-pill.done { opacity:0.5; text-decoration:line-through; }

    /* ─── HÄLSOSKÄRM (health screen) ─── */
    .health-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:stretch; }
    .health-cns { background:var(--bg2); border:1px solid var(--border2); border-radius:18px; padding:20px 22px; box-shadow:var(--elev-hero); }
    .health-group { background:var(--bg2); border:1px solid var(--border); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-card), var(--edge-top); }
    .health-group-header { padding:20px 22px; }
    .health-metric { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 22px; border-top:1px solid var(--border); }

    /* ─── SCROLLBAR ─── */
    ::-webkit-scrollbar { width:9px; height:9px; }
    ::-webkit-scrollbar-thumb { background:var(--border3); border-radius:99px; border:2px solid var(--bg); }
    ::-webkit-scrollbar-thumb:hover { background:var(--muted); }
    ::-webkit-scrollbar-track { background:transparent; }

    /* ─── MOBILE ─── */
    @media (max-width: 1024px) {
      .content {
        padding: 24px 28px 78px;
      }
      .bigcard,
      .goal-card,
      .hg-card,
      .cns-card,
      .chat-wrap {
        border-radius: 12px;
      }
      .card-val { font-size: 28px; }
      .goal-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (max-width: 720px) {
      :root { --sidebar-w: 0px; }
      body { padding-bottom: 70px; }
      .sidebar {
        width:100%; height:70px; flex-direction:row;
        position:fixed; top:auto; bottom:0; left:0; right:0;
        border-right:none; border-top:1px solid var(--border);
        background: rgba(13,15,20,0.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
      }
      .sidebar-logo { display:none; }
      .nav {
        flex-direction:row;
        padding:6px 8px;
        gap:2px;
        justify-content:flex-start;
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .nav::-webkit-scrollbar { display:none; }
      .nav-item {
        flex: 0 0 auto;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 66px;
        min-height: 54px;
        padding: 6px 8px;
        font-size: 9.5px;
        text-align: center;
        white-space: nowrap;
        border-radius: 10px;
        border: none;
      }
      .nav-item.active {
        background: rgba(200,241,53,0.08);
        border: none;
      }
      .nav-item.active::before { display:none; }
      .nav-icon { width: auto; opacity: 1; }
      .sidebar-bottom { display:none; }
      .main { margin-left:0; max-width:100vw; width:100%; }
      .content { padding:20px 14px 20px; }
      .mobile-actions {
        display:grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 0 0 18px;
      }
      .mobile-actions .refresh-btn {
        min-height: 42px;
        padding: 10px 8px;
        font-size: 11px;
        border-radius: 8px;
      }
      .page-header { margin-bottom: 22px; }
      .page-header h2 { font-size: 22px; }
      .page-header p { white-space: normal; line-height: 1.45; }
      .hero h2 { font-size:32px; }
      .grid,
      .records-grid,
      .hero-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .cockpit {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 24px;
      }
      .cockpit-card {
        padding: 18px 16px;
      }
      .cockpit-top {
        align-items: flex-start;
      }
      .cockpit-title {
        font-size: 20px;
      }
      .cockpit-score {
        font-size: 30px;
      }
      .cockpit-metrics {
        grid-template-columns: 1fr;
      }
      .cockpit-row {
        grid-template-columns: 42px minmax(0, 1fr);
      }
      .cockpit-row .cockpit-tag {
        grid-column: 2;
        justify-self: start;
      }
      .cockpit-row-title,
      .cockpit-row-sub {
        white-space: normal;
      }
      .card,
      .record-card {
        padding: 16px 14px 14px;
      }
      .card-label,
      .record-type {
        font-size: 9.5px;
        overflow-wrap: anywhere;
      }
      .card-val,
      .record-val {
        font-size: 25px;
      }
      .goals-row { grid-template-columns:1fr; }
      .goal-card,
      .bigcard {
        padding: 20px 16px;
        border-radius: 12px;
      }
      .today-header {
        align-items: flex-start;
        flex-wrap: wrap;
      }
      .today-header h3 {
        min-width: 0;
        overflow-wrap: anywhere;
      }
      #today-session-card {
        align-items:flex-start !important;
        gap:12px !important;
        padding:16px !important;
      }
      #today-session-detail {
        white-space:normal !important;
        overflow:visible !important;
      }
      .ac-control-row {
        align-items: stretch;
        flex-direction: column;
      }
      .ac-loop-btn {
        width: 100%;
        min-height: 42px;
      }
      .climate-control-grid,
      .ac-manual-grid {
        grid-template-columns: 1fr;
      }
      .ac-field .ac-setpoint-input,
      .ac-time-input {
        width: 100%;
      }
      #ac-graph { overflow-x: auto; }
      #ac-graph svg { min-width: 500px; }
      .hg-row,
      .coach-layout {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .cns-top {
        align-items: flex-start;
        flex-direction: column;
      }
      .cns-score-wrap {
        align-items: flex-start;
        min-width: 0;
      }
      .goal-stats {
        grid-template-columns: 1fr;
      }
      .session {
        gap: 12px;
        padding: 16px;
      }
      .session-week {
        min-width: 42px;
      }
      .tempo-table,
      .insight-box {
        padding: 14px;
      }
      .history-table {
        min-width: 620px;
      }
      .history-table-wrapper,
      .history-wrap,
      .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      .chat-top,
      .qprompts,
      .messages,
      .chat-input {
        padding-left: 14px;
        padding-right: 14px;
      }
      .chat-sub { display:none; }
      .messages {
        min-height: 240px;
        max-height: 50vh;
      }
      .msg {
        max-width: 94%;
        font-size: 13.5px;
      }
      .chat-input {
        flex-direction: column;
      }
      .send-btn {
        width: 100%;
        min-height: 42px;
      }
      .add-ex-form input,
      .add-ex-form input.ex-input-name,
      .add-ex-form input.ex-input-sm,
      .add-ex-form input.ex-input-note,
      .add-ex-btn {
        width: 100%;
      }
      .tip-box {
        left: 12px !important;
        right: 12px;
        width: auto;
        max-width: none;
      }
      .cal-week-header {
        align-items:flex-start;
        flex-wrap:wrap;
        gap:8px;
        padding:12px 14px;
      }
      .cal-week-badges {
        width:100%;
        margin-left:0;
        flex-wrap:wrap;
      }
      .cal-days {
        grid-template-columns: 1fr;
      }
      .cal-day {
        display:grid;
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        min-height: 0;
        padding: 12px 14px;
        border-right: none;
        border-bottom: 1px solid var(--border);
      }
      .cal-day:last-child { border-bottom:none; }
      .cal-day-header { margin-bottom:0; }
      .cal-session-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .cal-session-pill {
        margin-bottom: 0;
        padding: 7px 9px;
        font-size: 10.5px;
        line-height: 1.45;
        overflow-wrap: anywhere;
        white-space: normal;
      }
    }

    @media (max-width: 380px) {
      .grid,
      .records-grid,
      .hero-nav {
        grid-template-columns: 1fr;
      }
      .content { padding-left: 12px; padding-right: 12px; }
      .nav-item { min-width: 66px; font-size: 10px; }
    }

    /* Hide appbar on mobile */
    @media (max-width: 720px) {
      .appbar { display: none; }
    }

    /* ── SLEEP PAGE ─────────────────────────────────────── */
    .sleep-metrics-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 24px;
      align-items: stretch;
    }

    .sleep-metric-card {
      background: var(--card-grad), var(--bg2);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 18px 18px 16px;
      min-height: 220px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.32);
    }

    .sleep-metric-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted2);
      margin-bottom: 2px;
    }

    .sleep-metric-val {
      font-size: 48px;
      font-weight: 800;
      line-height: 1;
      color: var(--text);
      font-family: var(--font-sans);
    }

    .sleep-metric-val-total {
      font-size: 36px;
      font-weight: 800;
      line-height: 1.1;
    }

    .sleep-metric-sub {
      font-size: 12px;
      color: var(--muted2);
      margin-top: 2px;
    }

    .sleep-metric-sub-center {
      text-align: center;
    }

    /* Arc gauge — Sömnpoäng */
    .sleep-metric-score-card {
      align-items: center;
      text-align: center;
      justify-content: center;
    }

    .sleep-gauge-wrap {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
    }

    #sleep-score-gauge {
      width: min(100%, 340px);
      max-height: 156px;
      height: auto;
      display: block;
    }

    .sleep-gauge-track {
      stroke: rgba(255,255,255,0.08);
    }

    .sleep-gauge-fill {
      stroke: #C8F135;
      transition: stroke-dashoffset 0.8s cubic-bezier(0.4,0,0.2,1), stroke 0.4s ease;
    }

    /* Number lives inside the SVG so it scales with the gauge width
       — identical proportion on phone and desktop. */
    .sleep-gauge-num {
      font-family: var(--font-sans);
      font-size: 34px;
      font-weight: 800;
      fill: #C8F135;
      transition: fill 0.4s ease;
    }

    .sleep-metrics-grid > .sleep-metric-card:nth-child(2) {
      justify-content: center;
    }

    .sleep-metrics-grid > .sleep-metric-card:nth-child(2) .sleep-metric-label,
    .sleep-metrics-grid > .sleep-metric-card:nth-child(2) .sleep-metric-sub {
      align-self: flex-start;
    }

    .sleep-metrics-grid > .sleep-metric-card:nth-child(2) .sleep-progress-bar {
      width: 100%;
    }

    /* Radial ring cards */
    .sleep-metric-ring-card {
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .sleep-ring-wrap {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
    }

    .sleep-ring-wrap svg {
      width: 116px;
      height: 116px;
    }

    .sleep-ring-track {
      stroke: rgba(255,255,255,0.08);
    }

    .sleep-ring-fill {
      stroke: #4F46E5;
      transition: stroke-dashoffset 0.8s cubic-bezier(0.4,0,0.2,1);
    }

    .sleep-ring-rem {
      stroke: #A78BFA;
    }

    .sleep-ring-val {
      position: absolute;
      font-size: 24px;
      font-weight: 800;
      color: var(--text);
      text-align: center;
      line-height: 1;
    }

    /* Progress bar — Total sömn */
    .sleep-progress-bar {
      height: 4px;
      background: rgba(255,255,255,0.08);
      border-radius: 2px;
      margin-top: 10px;
      overflow: hidden;
    }

    .sleep-progress-fill {
      height: 100%;
      border-radius: 2px;
      transition: width 0.6s ease;
    }

    .sleep-fill-green {
      background: var(--green);
    }

    /* Sleep stage SVG chart hover */
    .sleep-seg {
      cursor: default;
      transition: opacity 0.1s;
    }
    .sleep-seg:hover {
      opacity: 0.75;
    }

    @media (max-width: 520px) {
      .sleep-metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }
      .sleep-metric-card {
        min-height: 178px;
        padding: 16px 14px 12px;
      }
      .sleep-metric-val {
        font-size: 36px;
      }
      .sleep-metric-val-total {
        font-size: 28px;
      }
      #sleep-score-gauge {
        width: min(100%, 210px);
      }
      .sleep-gauge-num {
        font-size: 38px;
      }
      .sleep-ring-wrap svg {
        width: 88px;
        height: 88px;
      }
      .sleep-ring-val {
        font-size: 18px;
      }
    }

    @media (max-width: 720px) {
      .strength-analysis-grid,
      .strength-analysis-layout {
        grid-template-columns: 1fr;
      }
      .strength-panel-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
      }
      .strength-week-chart {
        height: 130px;
        gap: 5px;
      }
      .strength-metric-card {
        min-height: 88px;
      }
    }
    .nav-item:focus-visible,
    [data-action]:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 2px;
    }

    #note-input:focus {
      border-color: var(--blue) !important;
    }

    .note-save-btn:hover {
      background: rgba(96, 165, 250, 0.15) !important;
    }

    .note-delete:hover {
      color: var(--red) !important;
    }