* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Firefox scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb, #c1c1c6) transparent;
}

/* Disable transitions during theme switch for instant change */
.disable-transitions,
.disable-transitions *,
.disable-transitions *::before,
.disable-transitions *::after {
    transition: none !important;
}

/* Webkit scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Focus styles for accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent, #007aff);
    outline-offset: 2px;
}

/* Skip to main content link - WCAG 2.4.1 */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--on-color);
    padding: var(--space-sm, 8px) var(--space-md, 16px);
    border-radius: var(--radius-md, 8px);
    z-index: 9500; /* Tooltips/toasts layer */
    text-decoration: none;
    font-weight: 500;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: var(--space-md, 16px);
    outline: 2px solid var(--accent, #007aff);
    outline-offset: 2px;
}

/* Screen reader only utility class */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   SWISS/KINETIC DESIGN SYSTEM
   Clinical, editorial, data-rich aesthetic
   ============================================ */

/* Dark Theme (Default) */
[data-theme="dark"] {
    /* Core backgrounds */
    --bg: #0B0B0B;
    --bg2: #111111;
    --bg3: #181818;
    --bg-elevated: #111111;
    --card-bg: #111111;
    --secondary: #181818;
    --surface: #111111;
    --bg-secondary: #111111;
    --bg-tertiary: #181818;

    /* Core text - WCAG AA compliant (4.5:1 minimum) */
    --fg: #E8E8E8;
    --fg2: #A0A0A0;
    --fg3: #777777;
    --text: #E8E8E8;
    --text-primary: #E8E8E8;
    --text-secondary: #A0A0A0;
    --text-muted: #777777;
    --text-light: #777777;
    --text-tertiary: #666666;

    /* Accent - RED is the only accent */
    --red: #FF2D2D;
    --red-dim: rgba(255, 45, 45, 0.08);
    --red-mid: rgba(255, 45, 45, 0.15);
    --accent: #FF2D2D;
    --accent-dark: #CC2424;
    --accent-bg: rgba(255, 255, 255, 0.04);
    --accent-bg-hover: rgba(255, 255, 255, 0.07);

    /* Borders */
    --border: #222222;
    --border-light: #1a1a1a;
    --border-color: #222222;

    /* Navigation */
    --nav-bg: rgba(11, 11, 11, 0.9);

    /* Training zone colors - Swiss palette */
    --zone-1: #6B9AB0;  /* Recovery - steel blue (distinct from green) */
    --zone-2: #2E9E82;  /* Aerobic - green */
    --zone-3: #D4A843;  /* Tempo - gold */
    --zone-4: #E85454;  /* Threshold - coral red */
    --zone-5: #A02040;  /* VO2max/Anaerobic - burgundy */

    /* Zone colors for cards/badges - Swiss style flat colors */
    --zone-recovery-gradient: var(--zone-1);
    --zone-easy-gradient: var(--zone-2);
    --zone-aerobic-gradient: var(--zone-2);
    --zone-tempo-gradient: var(--zone-3);
    --zone-threshold-gradient: var(--zone-4);
    --zone-speed-gradient: var(--zone-5);

    /* Status colors - derived from accent */
    --success: #2E9E82;
    --success-light: #3AAE92;
    --success-dark: #248E72;
    --completed: #2E9E82;  /* Zone-2 green for logged workouts */
    --missed: #FF2D2D;     /* Red for missed workouts */
    --warning: #D4A843;
    --warning-dark: #C49833;
    --error: #FF2D2D;
    --error-dark: #CC2424;
    --info: #6CBFB0;
    --info-light: #7CCFC0;

    /* Status backgrounds */
    --success-bg: rgba(46, 158, 130, 0.15);
    --success-bg-dim: rgba(46, 158, 130, 0.08);
    --success-bg-strong: rgba(46, 158, 130, 0.20);
    --warning-bg: rgba(212, 168, 67, 0.15);
    --warning-bg-dim: rgba(212, 168, 67, 0.08);
    --warning-bg-strong: rgba(212, 168, 67, 0.20);
    --error-bg: rgba(255, 45, 45, 0.15);
    --error-bg-dim: rgba(255, 45, 45, 0.08);
    --error-bg-strong: rgba(255, 45, 45, 0.20);

    /* Zone backgrounds */
    --zone-1-bg: rgba(107, 154, 176, 0.15);   /* Matches --zone-1: #6B9AB0 */
    --zone-1-bg-dim: rgba(107, 154, 176, 0.08);
    --zone-2-bg: rgba(46, 158, 130, 0.15);
    --zone-2-bg-dim: rgba(46, 158, 130, 0.08);
    --zone-3-bg: rgba(212, 168, 67, 0.15);
    --zone-3-bg-dim: rgba(212, 168, 67, 0.08);
    --zone-4-bg: rgba(255, 45, 45, 0.15);
    --zone-4-bg-dim: rgba(255, 45, 45, 0.08);
    --zone-5-bg: rgba(255, 26, 26, 0.15);
    --zone-5-bg-dim: rgba(255, 26, 26, 0.08);

    /* Chart/Visualization Colors - Swiss palette using zone colors */
    --chart-pace: #8B6B9C;      /* Swiss purple - muted violet */
    --chart-gap: #6CBFB0;       /* Zone 1 teal */
    --chart-hr: #E07080;        /* Swiss pink - warm rose */
    --chart-cadence: #666666;   /* Neutral gray */
    --chart-elevation: #444444; /* Dark gray */
    --chart-elevation-fill: #2a2a2a;     /* Dark gray elevation area fill */
    --chart-elevation-fill-alt: #1a1a1a; /* Darker terrain base fill */
    --chart-route: #FF2D2D;     /* Red accent - route line */
    --chart-route-alt: #2E9E82; /* Zone 2 green - alternate route */
    --chart-set-line: #E8A838;      /* Warm amber - interval set boundaries */
    --chart-set-line-label: #E8A838; /* Set label text color */
    --map-route-line: #FF2D2D;  /* Red accent route polyline */
    --map-route-muted: #444444; /* Muted route background */

    /* Chart UI Elements - axis, grid, focus */
    --chart-axis-line: #444444;     /* Axis and grid lines */
    --chart-axis-text: #888888;     /* Axis label text */
    --chart-axis-text-dim: #666666; /* Dimmer axis text */
    --chart-grid-line: #333333;     /* Grid lines */
    --chart-focus-line: #999999;    /* Hover focus line */
    --chart-focus-dot-stroke: #ffffff; /* Focus dot outline */
    --chart-donut-stroke: rgba(0, 0, 0, 0.3); /* Donut segment separator */

    /* Chart Font Sizes */
    --chart-font-axis: 10px;        /* Primary axis label size */
    --chart-font-axis-sm: 9px;      /* Smaller axis labels (pace/hr) */

    /* Fallback/Neutral Colors */
    --color-fallback: #666666;      /* Default fallback when color lookup fails */
    --color-fallback-dim: #999999;  /* Dimmer fallback */

    /* Map UI Colors */
    --map-popup-text: #ffffff;      /* Map popup text color */
    --map-popup-bg: #333333;        /* Map popup background */

    /* Panel/Card Overlays */
    --panel-overlay-bg: rgba(255, 255, 255, 0.05); /* Subtle panel background */

    /* Theme Background (for JS theme detection) */
    --theme-bg-code: #1a1a1a;       /* Used by theme.js for code backgrounds */

    /* Segment Colors - using zone colors */
    --segment-power: #FF2D2D;   /* Zone 4/5 red - steep/power */
    --segment-hill: #D4A843;    /* Zone 3 gold - hills */
    --segment-flat: #2E9E82;    /* Zone 2 green - flat */

    /* Day of Week Colors - using zone-derived palette */
    --day-mon: #FF2D2D;         /* Red accent */
    --day-tue: #D4A843;         /* Zone 3 gold */
    --day-wed: #2E9E82;         /* Zone 2 green */
    --day-thu: #6CBFB0;         /* Zone 1 teal */
    --day-fri: #555555;         /* Neutral gray */
    --day-sat: #888888;         /* Light gray */
    --day-sun: #FF2D2D;         /* Red accent - weekend long run */

    /* Info/Blue backgrounds */
    --info-bg: rgba(108, 191, 176, 0.15);
    --info-bg-dim: rgba(108, 191, 176, 0.05);

    /* Strava backgrounds */
    --strava-bg: rgba(252, 76, 2, 0.15);
    --strava-bg-dim: rgba(252, 76, 2, 0.10);

    /* Modal/overlay */
    --modal-backdrop: rgba(11, 11, 11, 0.9);
    --img-overlay: rgba(11, 11, 11, 0.6);
    --cite-bg: #141414;

    /* Overlay on images/videos (always dark) */
    --overlay-heavy: rgba(0, 0, 0, 0.8);
    --overlay-medium: rgba(0, 0, 0, 0.5);
    --overlay-light: rgba(0, 0, 0, 0.3);
    --overlay-subtle: rgba(0, 0, 0, 0.1);

    /* Content on colored backgrounds (zones, gradients) */
    --on-color: #ffffff;
    --on-color-high: rgba(255, 255, 255, 0.9);
    --on-color-medium: rgba(255, 255, 255, 0.8);
    --on-color-low: rgba(255, 255, 255, 0.7);
    --on-color-muted: rgba(255, 255, 255, 0.6);
    --on-color-bg: rgba(255, 255, 255, 0.2);
    --on-color-bg-hover: rgba(255, 255, 255, 0.3);
    --on-color-border: rgba(255, 255, 255, 0.3);

    /* Scrollbar */
    --scrollbar-thumb: #333333;
    --scrollbar-thumb-hover: #444444;

    /* Hover states */
    --hover-bg: rgba(255, 255, 255, 0.05);
    --primary-bg: rgba(255, 255, 255, 0.03);

    /* Blank planner */
    --blank-empty-bg: rgba(255, 255, 255, 0.03);
    --blank-empty-border: rgba(255, 255, 255, 0.08);
    --blank-add-icon: var(--text-tertiary);
    --blank-add-icon-hover: var(--accent);
}

/* Light Theme */
[data-theme="light"] {
    /* Core backgrounds */
    --bg: #F0F0F0;
    --bg2: #E6E6E6;
    --bg3: #DADADA;
    --bg-elevated: #E6E6E6;
    --card-bg: #E6E6E6;
    --secondary: #DADADA;
    --surface: #E6E6E6;
    --bg-secondary: #E6E6E6;
    --bg-tertiary: #DADADA;

    /* Core text - WCAG AA compliant (4.5:1 minimum) */
    --fg: #111111;
    --fg2: #555555;
    --fg3: #666666;
    --text: #111111;
    --text-primary: #111111;
    --text-secondary: #555555;
    --text-muted: #666666;
    --text-light: #666666;
    --text-tertiary: #5A5A5A;  /* Darkened from #777777 for WCAG AA (5.2:1) */

    /* Accent - darker red for light mode contrast */
    --red: #D41D1D;
    --red-dim: rgba(212, 29, 29, 0.06);
    --red-mid: rgba(212, 29, 29, 0.10);
    --accent: #D41D1D;
    --accent-dark: #B01818;
    --accent-bg: rgba(0, 0, 0, 0.04);
    --accent-bg-hover: rgba(0, 0, 0, 0.07);

    /* Borders */
    --border: #CCCCCC;
    --border-light: #DDDDDD;
    --border-color: #CCCCCC;

    /* Navigation */
    --nav-bg: rgba(240, 240, 240, 0.92);

    /* Training zone colors - light mode (WCAG AA compliant) */
    --zone-1: #4A7A90;  /* Steel blue (distinct from green) - 5.0:1 contrast */
    --zone-2: #1E8E72;
    --zone-3: #9A7520;  /* Darkened from #C09030 for 5.0:1 contrast */
    --zone-4: #C44040;  /* Threshold - coral red */
    --zone-5: #8A1830;  /* VO2max/Anaerobic - burgundy */

    /* Zone gradients for cards/badges */
    /* Zone colors for cards/badges - Swiss style flat colors */
    --zone-recovery-gradient: var(--zone-1);
    --zone-easy-gradient: var(--zone-2);
    --zone-aerobic-gradient: var(--zone-2);
    --zone-tempo-gradient: var(--zone-3);
    --zone-threshold-gradient: var(--zone-4);
    --zone-speed-gradient: var(--zone-5);

    /* Status colors */
    --success: #1E8E72;
    --success-light: #2E9E82;
    --success-dark: #0E7E62;
    --completed: #16a34a;  /* Slightly darker green for light mode */
    --missed: #D41D1D;     /* Red for missed workouts */
    --warning: #9A7520;    /* Matches zone-3 for WCAG AA */
    --warning-dark: #8A6510;
    --error: #D41D1D;
    --error-dark: #B01818;
    --info: #3A8A7A;       /* Matches zone-1 for WCAG AA */
    --info-light: #4A9A8A;

    /* Status backgrounds */
    --success-bg: rgba(30, 142, 114, 0.12);
    --success-bg-dim: rgba(30, 142, 114, 0.06);
    --success-bg-strong: rgba(30, 142, 114, 0.18);
    --warning-bg: rgba(154, 117, 32, 0.12);   /* Matches --warning: #9A7520 */
    --warning-bg-dim: rgba(154, 117, 32, 0.06);
    --warning-bg-strong: rgba(154, 117, 32, 0.18);
    --error-bg: rgba(212, 29, 29, 0.12);
    --error-bg-dim: rgba(212, 29, 29, 0.06);
    --error-bg-strong: rgba(212, 29, 29, 0.18);

    /* Zone backgrounds */
    --zone-1-bg: rgba(74, 122, 144, 0.12);   /* Matches --zone-1: #4A7A90 */
    --zone-1-bg-dim: rgba(74, 122, 144, 0.06);
    --zone-2-bg: rgba(30, 142, 114, 0.12);
    --zone-2-bg-dim: rgba(30, 142, 114, 0.06);
    --zone-3-bg: rgba(154, 117, 32, 0.12);   /* Matches --zone-3: #9A7520 */
    --zone-3-bg-dim: rgba(154, 117, 32, 0.06);
    --zone-4-bg: rgba(212, 29, 29, 0.12);
    --zone-4-bg-dim: rgba(212, 29, 29, 0.06);
    --zone-5-bg: rgba(192, 16, 16, 0.12);
    --zone-5-bg-dim: rgba(192, 16, 16, 0.06);

    /* Chart/Visualization Colors - light mode Swiss palette */
    --chart-pace: #6B4B7C;      /* Swiss purple - muted violet (darkened for contrast) */
    --chart-gap: #3A8A7A;       /* Zone 1 teal (darkened for light mode) */
    --chart-hr: #C05060;        /* Swiss pink - warm rose (darkened for contrast) */
    --chart-cadence: #555555;   /* Neutral gray */
    --chart-elevation: #888888; /* Gray */
    --chart-elevation-fill: #d1d5db;     /* Light gray fill */
    --chart-elevation-fill-alt: #e5e7eb; /* Lighter gray fill */
    --chart-route: #D41D1D;     /* Red accent - route line */
    --chart-route-alt: #1E8E72; /* Zone 2 green - alternate route */
    --chart-set-line: #C88A20;      /* Warm amber - darkened for light mode */
    --chart-set-line-label: #996A10; /* Set label text - darker for readability */
    --map-route-line: #D41D1D;  /* Red accent route polyline */
    --map-route-muted: #9ca3af; /* Muted route background */

    /* Chart UI Elements - light mode */
    --chart-axis-line: #cccccc;     /* Axis and grid lines */
    --chart-axis-text: #666666;     /* Axis label text */
    --chart-axis-text-dim: #888888; /* Dimmer axis text */
    --chart-grid-line: #e5e5e5;     /* Grid lines */
    --chart-focus-line: #999999;    /* Hover focus line */
    --chart-focus-dot-stroke: #ffffff; /* Focus dot outline */
    --chart-donut-stroke: rgba(0, 0, 0, 0.2); /* Donut segment separator */

    /* Chart Font Sizes - same for both themes */
    --chart-font-axis: 10px;        /* Primary axis label size */
    --chart-font-axis-sm: 9px;      /* Smaller axis labels (pace/hr) */

    /* Fallback/Neutral Colors - light mode */
    --color-fallback: #888888;      /* Default fallback when color lookup fails */
    --color-fallback-dim: #aaaaaa;  /* Dimmer fallback */

    /* Map UI Colors - light mode */
    --map-popup-text: #ffffff;      /* Map popup text color */
    --map-popup-bg: #333333;        /* Map popup background */

    /* Panel/Card Overlays - light mode */
    --panel-overlay-bg: rgba(0, 0, 0, 0.03); /* Subtle panel background */

    /* Theme Background (for JS theme detection) */
    --theme-bg-code: #f5f5f5;       /* Used by theme.js for code backgrounds */

    /* Segment Colors - light mode using zone colors */
    --segment-power: #D41D1D;   /* Zone 4/5 red - steep/power */
    --segment-hill: #9A7520;    /* Zone 3 gold - hills */
    --segment-flat: #1E8E72;    /* Zone 2 green - flat */

    /* Day of Week Colors - light mode zone-derived palette */
    --day-mon: #D41D1D;         /* Red accent */
    --day-tue: #9A7520;         /* Zone 3 gold */
    --day-wed: #1E8E72;         /* Zone 2 green */
    --day-thu: #3A8A7A;         /* Zone 1 teal */
    --day-fri: #666666;         /* Neutral gray */
    --day-sat: #999999;         /* Light gray */
    --day-sun: #D41D1D;         /* Red accent - weekend long run */

    /* Info/Blue backgrounds */
    --info-bg: rgba(58, 138, 122, 0.12);     /* Matches --info: #3A8A7A */
    --info-bg-dim: rgba(58, 138, 122, 0.05);   /* Matches --info: #3A8A7A */

    /* Strava backgrounds */
    --strava-bg: rgba(252, 76, 2, 0.12);
    --strava-bg-dim: rgba(252, 76, 2, 0.08);

    /* Modal/overlay */
    --modal-backdrop: rgba(240, 240, 240, 0.92);
    --img-overlay: rgba(240, 240, 240, 0.65);
    --cite-bg: #E8E8E8;

    /* Overlay on images/videos (always dark regardless of theme) */
    --overlay-heavy: rgba(0, 0, 0, 0.8);
    --overlay-medium: rgba(0, 0, 0, 0.5);
    --overlay-light: rgba(0, 0, 0, 0.3);
    --overlay-subtle: rgba(0, 0, 0, 0.1);

    /* Content on colored backgrounds (zones, gradients) */
    --on-color: #ffffff;
    --on-color-high: rgba(255, 255, 255, 0.9);
    --on-color-medium: rgba(255, 255, 255, 0.8);
    --on-color-low: rgba(255, 255, 255, 0.7);
    --on-color-muted: rgba(255, 255, 255, 0.6);
    --on-color-bg: rgba(255, 255, 255, 0.2);
    --on-color-bg-hover: rgba(255, 255, 255, 0.3);
    --on-color-border: rgba(255, 255, 255, 0.3);

    /* Scrollbar */
    --scrollbar-thumb: #AAAAAA;
    --scrollbar-thumb-hover: #888888;

    /* Hover states */
    --hover-bg: rgba(0, 0, 0, 0.05);
    --primary-bg: rgba(0, 0, 0, 0.03);

    /* Blank planner */
    --blank-empty-bg: rgba(0, 0, 0, 0.02);
    --blank-empty-border: rgba(0, 0, 0, 0.08);
    --blank-add-icon: var(--text-tertiary);
    --blank-add-icon-hover: var(--accent);
}

/* Root defaults - shared across themes */
:root {
    /* Typography - Swiss style */
    --font-heading: "Instrument Serif", Georgia, serif;
    --font-display: "Instrument Serif", Georgia, serif;
    --font-body: "IBM Plex Mono", monospace;
    --font-mono: "IBM Plex Mono", monospace;

    /* Font sizes - compact Swiss scale */
    --font-xs: 0.5rem;    /* 8px - micro labels */
    --font-sm: 0.6rem;    /* 9.6px - labels, nav */
    --font-md: 0.7rem;    /* 11.2px - body text */
    --font-lg: 0.75rem;   /* 12px - body text */
    --font-xl: 0.8rem;    /* 12.8px - emphasis */
    --font-h4: 0.95rem;   /* 15.2px - analysis h4 */
    --font-h3: 1.1rem;    /* 17.6px - analysis h3 */
    --font-h2: 1.25rem;   /* 20px - analysis h2 */
    --font-2xl: 1.8rem;   /* 28.8px - section headers */
    --font-3xl: 2.5rem;   /* 40px - large headings */
    --font-4xl: 4rem;     /* 64px - hero display */

    /* Font weights - Swiss precision */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Border radius - SWISS: NO ROUNDED CORNERS */
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
    --radius: 0;
    --radius-full: 50%;  /* Exception for circular elements (dots, avatars) */

    /* Spacing scale - Swiss precision */
    --space-xs: 0.3rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 2.5rem;
    --space-3xl: 3.5rem;
    --space-4xl: 5rem;

    /* Shadows - SWISS: NO SHADOWS, borders only */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --card-shadow: none;
    --modal-shadow: none;
    --modal-shadow-lg: none;
    --btn-shadow-hover: none;
    --focus-ring: none;

    /* Card styling - Swiss */
    --card-border: 1px solid var(--border);
    --card-bg-gradient: none;

    /* Icon sizes */
    --icon-sm: 12px;
    --icon-md: 14px;
    --icon-lg: 18px;

    /* Select/Dropdown styles */
    --select-bg: var(--bg2);
    --select-border: var(--border);
    --select-border-hover: var(--fg3);
    --select-border-focus: var(--red);
    --select-text: var(--fg);
    --select-padding: 0.5rem 1rem;
    --select-radius: 0;
    --select-font-size: 0.6rem;
    --select-font-weight: 600;

    /* ============================================
       STANDARDIZED INPUT SYSTEM
       ============================================ */
    --input-bg: var(--bg);
    --input-border: var(--border);
    --input-border-hover: var(--fg3);
    --input-border-focus: var(--accent);
    --input-text: var(--fg);
    --input-placeholder: var(--fg3);
    --input-padding: 0.6rem 0.8rem;
    --input-font-size: var(--font-sm);
    --input-font-family: var(--font-mono);
    --input-font-weight: 500;
    --input-radius: 0;

    /* ============================================
       STANDARDIZED BUTTON SYSTEM
       ============================================ */
    /* Primary button */
    --btn-primary-bg: var(--accent);
    --btn-primary-bg-hover: var(--accent-dark);
    --btn-primary-text: #ffffff;
    --btn-primary-border: none;

    /* Secondary button */
    --btn-secondary-bg: transparent;
    --btn-secondary-bg-hover: var(--accent-bg);
    --btn-secondary-text: var(--fg);
    --btn-secondary-text-hover: var(--accent);
    --btn-secondary-border: 1px solid var(--border);
    --btn-secondary-border-hover: var(--accent);

    /* Ghost button */
    --btn-ghost-bg: transparent;
    --btn-ghost-bg-hover: var(--hover-bg);
    --btn-ghost-text: var(--fg2);
    --btn-ghost-text-hover: var(--fg);

    /* Button sizing */
    --btn-padding: 0.5rem 1.3rem;
    --btn-padding-sm: 0.35rem 0.8rem;
    --btn-padding-lg: 0.65rem 1.8rem;
    --btn-font-size: 0.6rem;
    --btn-font-weight: 700;
    --btn-letter-spacing: 0.08em;
    --btn-radius: 0;

    /* ============================================
       STANDARDIZED LABEL SYSTEM
       ============================================ */
    --label-font-size: 0.55rem;
    --label-font-weight: 700;
    --label-letter-spacing: 0.15em;
    --label-letter-spacing-sm: 0.1em;
    --label-color: var(--fg2);
    --label-color-accent: var(--accent);

    /* Transitions - Swiss: smooth theme transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.4s ease;
    --transition-theme: background 0.4s, color 0.4s, border-color 0.4s;

    /* Animation timing functions */
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
    --spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Semantic status mappings */
    --status-exceeding: var(--zone-1);
    --status-on-track: var(--success);
    --status-slightly-under: var(--warning);
    --status-behind: var(--error);
    --current-day: var(--red);

    /* Phase status */
    --phase-done: var(--success);
    --phase-current: var(--red);
    --phase-upcoming: var(--fg3);

    /* Polarization colors */
    --pol-low: var(--zone-1);
    --pol-mid: var(--zone-3);
    --pol-high: var(--zone-4);
    --pol-optimal: var(--zone-2);

    /* Status indicator aliases */
    --status-success: var(--success);
    --status-warning-light: var(--zone-3);
    --status-warning: var(--warning);
    --status-on-target-bg: var(--success-bg);
    --status-close-bg: var(--warning-bg);
    --status-needs-work-bg: var(--error-bg);

    /* Workout type colors - using Swiss zone palette */
    --workout-easy: var(--zone-1);
    --workout-easy-bg: rgba(108, 191, 176, 0.15);
    --workout-recovery: var(--zone-1);
    --workout-recovery-bg: rgba(108, 191, 176, 0.10);
    --workout-long: #1E6FA0;
    --workout-long-bg: rgba(30, 111, 160, 0.15);
    --workout-intervals: #9B59B6;
    --workout-intervals-bg: rgba(155, 89, 182, 0.15);
    --workout-hill-repeats: #E07040;
    --workout-hill-repeats-bg: rgba(224, 112, 64, 0.15);
    --workout-tempo: var(--zone-3);
    --workout-tempo-bg: rgba(212, 168, 67, 0.15);
    --workout-threshold: var(--zone-4);
    --workout-threshold-bg: rgba(255, 45, 45, 0.12);
    --workout-fartlek: var(--zone-3);
    --workout-fartlek-bg: rgba(212, 168, 67, 0.12);
    --workout-marathon-pace: var(--zone-2);
    --workout-marathon-pace-bg: rgba(46, 158, 130, 0.15);
    --workout-progression: var(--zone-3);
    --workout-progression-bg: rgba(212, 168, 67, 0.15);
    --workout-shakeout: var(--zone-1);
    --workout-shakeout-bg: rgba(108, 191, 176, 0.12);
    --workout-race: var(--zone-5);
    --workout-race-bg: rgba(255, 26, 26, 0.20);
    --workout-strides: var(--zone-2);
    --workout-strides-bg: rgba(46, 158, 130, 0.15);
    --workout-walk-run: var(--zone-1);
    --workout-walk-run-bg: rgba(108, 191, 176, 0.10);
    --workout-tuneup: #C56BDB;
    --workout-tuneup-bg: rgba(197, 107, 219, 0.15);

    /* Strava brand color */
    --strava: #fc4c02;
    --strava-dark: #e34402;

    /* Primary color aliases */
    --primary: var(--fg);
    --primary-dark: var(--fg);
    --primary-light: var(--fg2);

    /* Success light variant */
    --success-light-bg: var(--success-bg);

    /* ============================================
       STANDARDIZED COMPONENT SIZING
       Consistent heights across UI elements
       ============================================ */
    --component-height-xs: 24px;   /* Small badges, mini buttons */
    --component-height-sm: 32px;   /* Compact buttons, small inputs */
    --component-height-md: 40px;   /* Standard buttons, inputs */
    --component-height-lg: 48px;   /* Large buttons, touch targets */
    --component-height-xl: 56px;   /* Extra large, prominent CTAs */

    /* Toolbar-specific height for consistent toolbar elements */
    --toolbar-height: var(--component-height-sm);

    /* ============================================
       MODAL SIZE TIERS
       Consistent modal widths across the app
       ============================================ */
    --modal-width-sm: 400px;    /* Confirmations, simple forms */
    --modal-width-md: 600px;    /* Standard dialogs, medium forms */
    --modal-width-lg: 800px;    /* Complex forms, detailed views */
    --modal-width-xl: 1000px;   /* Data-heavy views, tables */
    --modal-width-full: 95vw;   /* Full-width with margin */
    --modal-max-height: 90vh;

    /* ============================================
       SPINNER SIZING
       Unified spinner component sizes
       ============================================ */
    --spinner-size-sm: 16px;
    --spinner-size-md: 24px;
    --spinner-size-lg: 32px;
    --spinner-size-xl: 48px;
    --spinner-stroke: 2px;
    --spinner-stroke-lg: 3px;

    /* ============================================
       ACCORDION DEFAULTS
       ============================================ */
    --accordion-header-padding: var(--space-md) var(--space-lg);
    --accordion-content-padding: var(--space-lg);
    --accordion-icon-size: 12px;
    --accordion-transition: var(--transition-fast);

    /* ============================================
       CARD VARIANTS
       ============================================ */
    --card-padding-sm: var(--space-sm);
    --card-padding-md: var(--space-md);
    --card-padding-lg: var(--space-lg);
    --card-padding-xl: var(--space-xl);
}

/* ==========================================================================
   GLOBAL ANIMATIONS - Cascading & Loading Effects
   ========================================================================== */

/* Unified spin animation (single source of truth) */
@keyframes spinner-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Fade in up animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade in scale animation */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Slide in from right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide in from left */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Pop in animation */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Cascade stagger delay classes */
.cascade-1 { animation-delay: 0.03s; }
.cascade-2 { animation-delay: 0.06s; }
.cascade-3 { animation-delay: 0.09s; }
.cascade-4 { animation-delay: 0.12s; }
.cascade-5 { animation-delay: var(--transition-fast); }
.cascade-6 { animation-delay: 0.18s; }
.cascade-7 { animation-delay: 0.21s; }

/* Skeleton loading shimmer */
@keyframes skeletonShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton-loading {
    background: linear-gradient(90deg, var(--secondary) 25%, var(--bg) 50%, var(--secondary) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

/* ==========================================================================
   STANDARDIZED COMPONENT SYSTEM
   ========================================================================== */

/* ============================================
   UNIFIED SPINNER COMPONENT
   Usage: <div class="spinner spinner--md"></div>
   ============================================ */
.spinner {
    display: inline-block;
    width: var(--spinner-size-md);
    height: var(--spinner-size-md);
    border: var(--spinner-stroke) solid var(--border);
    border-top-color: var(--accent);
    border-radius: var(--radius-full);
    animation: spinner-rotate 0.8s linear infinite;
}

.spinner--sm {
    width: var(--spinner-size-sm);
    height: var(--spinner-size-sm);
}

.spinner--lg {
    width: var(--spinner-size-lg);
    height: var(--spinner-size-lg);
    border-width: var(--spinner-stroke-lg);
}

.spinner--xl {
    width: var(--spinner-size-xl);
    height: var(--spinner-size-xl);
    border-width: var(--spinner-stroke-lg);
}

/* Spinner color variants */
.spinner--light {
    border-color: rgba(255, 255, 255, 0.2);
    border-top-color: #ffffff;
}

.spinner--muted {
    border-color: var(--bg3);
    border-top-color: var(--text-secondary);
}

/* Spinner inside buttons */
.btn .spinner,
button .spinner {
    margin-right: var(--space-sm);
}

/* Centered spinner container */
.spinner-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
}

.spinner-container--full {
    min-height: 200px;
}

/* ============================================
   MODAL SIZE TIERS
   Usage: <div class="modal modal--md">
   ============================================ */
.modal--sm {
    max-width: var(--modal-width-sm);
}

.modal--md {
    max-width: var(--modal-width-md);
}

.modal--lg {
    max-width: var(--modal-width-lg);
}

.modal--xl {
    max-width: var(--modal-width-xl);
}

.modal--full {
    max-width: var(--modal-width-full);
    width: var(--modal-width-full);
}

/* Modal with fixed footer */
.modal--fixed-footer {
    display: flex;
    flex-direction: column;
    max-height: var(--modal-max-height);
}

.modal--fixed-footer .modal-body {
    flex: 1;
    overflow-y: auto;
}

.modal--fixed-footer .modal-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    padding-top: var(--space-lg);
    margin-top: var(--space-lg);
}

/* ============================================
   STANDARD ACCORDION PATTERN
   Usage: <div class="accordion">
            <div class="accordion__header">Title</div>
            <div class="accordion__content">Content</div>
          </div>
   ============================================ */
.accordion {
    border: 1px solid var(--border);
}

.accordion + .accordion {
    border-top: none;
}

.accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--accordion-header-padding);
    cursor: pointer;
    background: var(--bg);
    transition: background var(--accordion-transition);
    user-select: none;
}

.accordion__header:hover {
    background: var(--bg2);
}

.accordion__title {
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text);
}

.accordion__icon {
    width: var(--accordion-icon-size);
    height: var(--accordion-icon-size);
    color: var(--text-muted);
    transition: transform var(--accordion-transition);
}

.accordion.is-open .accordion__icon {
    transform: rotate(180deg);
}

.accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--accordion-transition);
}

.accordion.is-open .accordion__content {
    max-height: 2000px; /* Large enough for most content */
}

.accordion__inner {
    padding: var(--accordion-content-padding);
    border-top: 1px solid var(--border);
}

/* Accordion variants */
.accordion--borderless {
    border: none;
}

.accordion--borderless + .accordion--borderless {
    border-top: 1px solid var(--border);
}

.accordion--compact .accordion__header {
    padding: var(--space-sm) var(--space-md);
}

.accordion--compact .accordion__inner {
    padding: var(--space-md);
}

/* ============================================
   CARD VARIANTS
   Usage: <div class="card card--md">
   ============================================ */
.card {
    background: var(--card-bg);
    border: var(--card-border);
}

.card--sm {
    padding: var(--card-padding-sm);
}

.card--md {
    padding: var(--card-padding-md);
}

.card--lg {
    padding: var(--card-padding-lg);
}

.card--xl {
    padding: var(--card-padding-xl);
}

/* Card with header */
.card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--border);
}

.card__title {
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
}

.card__actions {
    display: flex;
    gap: var(--space-sm);
}

/* Card states */
.card--interactive {
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.card--interactive:hover {
    border-color: var(--accent);
    background: var(--bg2);
}

.card--elevated {
    background: var(--bg-elevated);
}

.card--accent {
    border-color: var(--accent);
    border-width: 2px;
}

/* Card footer */
.card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-md);
    padding-top: var(--space-md);
    margin-top: var(--space-md);
    border-top: 1px solid var(--border);
}

/* ============================================
   COMPONENT HEIGHT UTILITIES
   ============================================ */
.h-xs { height: var(--component-height-xs); }
.h-sm { height: var(--component-height-sm); }
.h-md { height: var(--component-height-md); }
.h-lg { height: var(--component-height-lg); }
.h-xl { height: var(--component-height-xl); }

.min-h-xs { min-height: var(--component-height-xs); }
.min-h-sm { min-height: var(--component-height-sm); }
.min-h-md { min-height: var(--component-height-md); }
.min-h-lg { min-height: var(--component-height-lg); }
.min-h-xl { min-height: var(--component-height-xl); }

/* ============================================
   LOADING STATE UTILITIES
   ============================================ */
.is-loading {
    position: relative;
    pointer-events: none;
}

.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--spinner-size-md);
    height: var(--spinner-size-md);
    border: var(--spinner-stroke) solid var(--border);
    border-top-color: var(--accent);
    border-radius: var(--radius-full);
    animation: spinner-rotate 0.8s linear infinite;
}

.is-loading > * {
    opacity: 0.3;
}

/* Standardized Select/Dropdown Styling - Swiss */
select,
.select-styled {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: var(--select-padding);
    border: 1px solid var(--select-border);
    border-radius: 0;
    background-color: var(--select-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-md) center;
    padding-right: calc(var(--space-lg) + 16px);
    color: var(--select-text);
    font-size: var(--select-font-size);
    font-weight: var(--select-font-weight);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: border-color var(--transition-fast);
    width: 100%;
}

select:hover,
.select-styled:hover {
    border-color: var(--text-muted);
}

select:focus,
.select-styled:focus {
    outline: none;
    border-color: var(--accent);
}

/* ============================================
   STANDARDIZED INPUT TEMPLATE
   Use these classes for consistent styling
   ============================================ */
.input,
input[type="text"].input,
input[type="email"].input,
input[type="password"].input,
input[type="number"].input,
input[type="date"].input,
textarea.input {
    width: 100%;
    padding: var(--input-padding);
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    color: var(--input-text);
    font-size: var(--input-font-size);
    font-family: var(--input-font-family);
    font-weight: var(--input-font-weight);
    transition: border-color var(--transition-fast);
}

.input:hover {
    border-color: var(--input-border-hover);
}

.input:focus {
    outline: none;
    border-color: var(--input-border-focus);
}

.input::placeholder {
    color: var(--input-placeholder);
    opacity: 0.7;
}

.input[readonly],
.input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================
   STANDARDIZED LABEL TEMPLATE
   ============================================ */
.label,
.section-label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    letter-spacing: var(--label-letter-spacing);
    text-transform: uppercase;
    color: var(--label-color);
}

.label-accent {
    color: var(--label-color-accent);
}

/* Content loading state */
.content-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* View transition wrapper */
.view-transitioning {
    animation: fadeInUp 0.4s var(--ease-out-expo) forwards;
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--fg2);
    line-height: 1.7;
    font-size: 13px;  /* Swiss compact base */
    font-weight: 400;
    letter-spacing: normal;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    transition: var(--transition-theme);
}

/* Swiss: All themed elements should transition smoothly */
*, *::before, *::after {
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
/* ============================================
   SWISS BUTTON SYSTEM
   Monospace, uppercase, no border-radius
   ============================================ */

/* Base button styles - Swiss */
.btn,
button.btn-primary,
button.btn-secondary,
button.btn-outline,
button.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.5rem 1.3rem;
    border-radius: 0;  /* Swiss: no rounded corners */
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
    text-decoration: none;
    white-space: nowrap;
}

/* Primary button - RED accent */
.btn-primary {
    background: var(--red);
    color: #fff;
    border: none;
}

.btn-primary:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.btn-primary:disabled {
    background: var(--fg3);
    color: var(--bg);
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
}

/* Secondary/Ghost button - border style */
.btn-secondary,
.btn-ghost {
    background: transparent;
    color: var(--fg2);
    border: 1px solid var(--border);
}

.btn-secondary:hover,
.btn-ghost:hover {
    border-color: var(--fg2);
    color: var(--fg);
}

.btn-secondary:disabled,
.btn-ghost:disabled {
    color: var(--fg3);
    cursor: not-allowed;
    opacity: 0.5;
}

/* Outline button - subtle */
.btn-outline {
    background: transparent;
    color: var(--fg3);
    border: 1px solid var(--border);
}

.btn-outline:hover {
    color: var(--red);
    border-color: var(--red);
}

/* Danger button - for destructive actions */
.btn-danger {
    background: transparent;
    color: var(--red);
    border: 1px solid var(--red);
}

.btn-danger:hover {
    background: var(--red-dim);
}

/* Small button variant */
.btn-sm {
    padding: 0.35rem 0.8rem;
    font-size: 0.5rem;
}

/* Large button variant */
.btn-lg {
    padding: 0.7rem 1.8rem;
    font-size: 0.7rem;
}

/* Full width button */
.btn-block {
    width: 100%;
}

/* Icon-only button */
.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 0;  /* Swiss: no rounded corners */
}

.btn-icon i {
    font-size: 0.7rem;
}

/* ============================================
   SWISS TYPOGRAPHY
   Instrument Serif for display, IBM Plex Mono for everything else
   ============================================ */

h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 400;  /* Swiss: light weight for display */
    letter-spacing: -0.04em;  /* Swiss: tight tracking */
    line-height: 1.1;
    color: var(--fg);
    margin-bottom: var(--space-md);
}

/* Italic red emphasis in headings */
h1 em, h1 i {
    font-style: italic;
    color: var(--red);
}

h2 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.2;
    color: var(--fg);
    margin-bottom: var(--space-md);
}

h3 {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.4;
    color: var(--fg);
    margin-bottom: var(--space-sm);
}

h4, h5, h6 {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--fg);
    margin-bottom: var(--space-xs);
}

/* Swiss Section Label - red uppercase micro-label */
.section-label {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 0.8rem;
}

/* Swiss Badge/Tag */
.badge {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    font-weight: 700;
    color: var(--red);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid var(--red);
    padding: 0.15rem 0.4rem;
    border-radius: 0;  /* Swiss: no rounded corners */
}

.container {
    max-width: 980px;
    margin: 0 auto;
    padding: var(--space-3xl) var(--space-xl);
    padding-top: 60px; /* Account for fixed header (60px height) */
}

/* Container Toolbar - Sticky, full viewport width */
.container-toolbar {
    position: sticky;
    top: 60px; /* Below the fixed header (60px height) */
    z-index: 100;
    /* Break out to full viewport width */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-bottom: var(--space-lg);
    padding: var(--space-sm) var(--space-xl);
    background: var(--bg);
    transition: box-shadow var(--transition-fast), background var(--transition-fast);
}

.container-toolbar-inner {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
}

.container-toolbar.is-stuck {
    background: var(--nav-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    /* Swiss: no shadows */
}

/* Toolbar Left Group - keeps phase filter and pace zones together */
.toolbar-left-group {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Toolbar Pace Accordion */
.toolbar-pace-accordion {
    position: relative;
}

.toolbar-pace-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    height: var(--toolbar-height);
    padding: 0 1rem;
    background: var(--select-bg);
    border: 1px solid var(--select-border);
    border-radius: var(--select-radius);
    font-size: var(--select-font-size);
    font-weight: var(--select-font-weight);
    color: var(--select-text);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-sizing: border-box;
}

.toolbar-pace-trigger:hover {
    border-color: var(--text-muted);
}

.toolbar-pace-accordion.open .toolbar-pace-trigger {
    border-color: var(--primary);
}

.toolbar-pace-trigger i:first-child {
    color: var(--primary);
}

.toolbar-pace-arrow {
    font-size: var(--font-xs);
    color: var(--text-muted);
    transition: transform var(--transition-fast);
}

.toolbar-pace-accordion.open .toolbar-pace-arrow {
    transform: rotate(180deg);
}

.toolbar-pace-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 320px;
    max-width: 360px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    padding: var(--space-md);
    z-index: 101;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all var(--transition-fast);
}

.toolbar-pace-accordion.open .toolbar-pace-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.toolbar-pace-header {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border);
}

.toolbar-pace-goal {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.toolbar-pace-goal i {
    color: var(--accent);
}

.toolbar-pace-goal span {
    font-weight: 600;
    color: var(--text);
}

.toolbar-pace-hr-info {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.toolbar-pace-zone {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-light);
}

.toolbar-pace-zone:last-child {
    border-bottom: none;
}

.toolbar-pace-zone-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1;
}

.toolbar-pace-name {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text);
}

.toolbar-pace-desc {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.toolbar-pace-hr {
    font-size: var(--font-xs);
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.toolbar-pace-value {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.toolbar-pace-empty {
    font-size: var(--font-sm);
    color: var(--text-muted);
    padding: var(--space-sm);
    text-align: center;
}

/* Toolbar Pace Comparison Header */
.toolbar-pace-comparison {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border);
}

.pace-comparison-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xs);
}

.pace-stat {
    text-align: center;
}

.pace-stat-label {
    display: block;
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.pace-stat-value {
    font-size: var(--font-lg);
    font-weight: 700;
}

.pace-stat.current .pace-stat-value {
    color: var(--text-secondary);
}

.pace-stat.goal .pace-stat-value {
    color: var(--accent);
}

.pace-stat-unit {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.pace-comparison-arrow {
    color: var(--text-muted);
    font-size: var(--font-sm);
}

.pace-comparison-gap {
    text-align: center;
    font-size: var(--font-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-xs);
}

.pace-comparison-gap.on-target {
    background: var(--success-bg);
    color: var(--success);
}

.pace-comparison-gap.close {
    background: var(--warning-bg);
    color: var(--warning);
}

.pace-comparison-gap.needs-work {
    background: var(--error-bg);
    color: var(--error);
}

.pace-comparison-gap i {
    margin-right: var(--space-xs);
}

.pace-comparison-meta {
    text-align: center;
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.toolbar-pace-no-data {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: var(--space-xs);
}

.toolbar-pace-no-data i {
    color: var(--primary);
}

/* Toolbar Pace Zones Grid */
.toolbar-pace-zones-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.toolbar-zone {
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    text-align: center;
}

.toolbar-zone-name {
    font-size: var(--font-xs);
    font-weight: 600;
}

.toolbar-zone-hr {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-bottom: 2px;
}

.toolbar-zone-pace {
    font-size: var(--font-sm);
    font-weight: 700;
}

.toolbar-zone-current {
    font-size: var(--font-xs);
    color: var(--text-muted);
    font-style: italic;
    margin-top: 1px;
}

.toolbar-zone-bpm {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

/* Zone colors - using zone bg/text variables for dark mode compatibility */
.toolbar-zone.recovery {
    background: var(--zone-1-bg);
    color: var(--zone-1);
}

.toolbar-zone.easy {
    background: var(--zone-2-bg);
    color: var(--zone-2);
}

.toolbar-zone.aerobic {
    background: var(--zone-2-bg);
    color: var(--zone-2);
}

.toolbar-zone.tempo {
    background: var(--zone-3-bg);
    color: var(--zone-3);
}

.toolbar-zone.threshold {
    background: var(--zone-4-bg);
    color: var(--zone-4);
}

.toolbar-zone.speed {
    background: var(--zone-5-bg);
    color: var(--zone-5);
}

/* Toolbar Zones Comparison Table */
.toolbar-zones-comparison {
    margin-bottom: var(--space-sm);
}

.zones-comparison-header {
    display: grid;
    grid-template-columns: 1fr 80px 24px 80px;
    gap: var(--space-xs);
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-xs);
}

.zones-header-label {
    font-size: var(--font-xs);
    color: var(--text-muted);
    text-transform: uppercase;
}

.zones-header-current,
.zones-header-goal {
    font-size: var(--font-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    text-align: center;
}

.zones-header-arrow {
    width: 24px;
}

.zone-comparison-row {
    display: grid;
    grid-template-columns: 1fr 80px 24px 80px;
    gap: var(--space-xs);
    align-items: center;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--border-light);
}

.zone-comparison-row:last-child {
    border-bottom: none;
}

.zone-row-label {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.zone-row-name {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--text);
}

.zone-row-hr {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.zone-row-current {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
    padding: 4px 6px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
}

.zone-row-arrow {
    text-align: center;
    font-size: var(--font-xs);
}

.zone-row-arrow.on-target {
    color: var(--success);
}

.zone-row-arrow.shift {
    color: var(--text-muted);
}

.zone-row-goal {
    font-size: var(--font-xs);
    font-weight: 600;
    text-align: center;
    padding: 4px 8px;
    border-radius: 0;
}

/* Zone row goal colors - using zone bg/text variables for dark mode compatibility */
.zone-comparison-row.recovery .zone-row-goal {
    background: var(--zone-1-bg);
    color: var(--zone-1);
}

.zone-comparison-row.easy .zone-row-goal {
    background: var(--zone-2-bg);
    color: var(--zone-2);
}

.zone-comparison-row.aerobic .zone-row-goal {
    background: var(--zone-2-bg);
    color: var(--zone-2);
}

.zone-comparison-row.tempo .zone-row-goal {
    background: var(--zone-3-bg);
    color: var(--zone-3);
}

.zone-comparison-row.threshold .zone-row-goal {
    background: var(--zone-4-bg);
    color: var(--zone-4);
}

.zone-comparison-row.speed .zone-row-goal {
    background: var(--zone-5-bg);
    color: var(--zone-5);
}

/* Toolbar HR Footer */
.toolbar-hr-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    font-size: var(--font-xs);
    color: var(--text-muted);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border);
}

.toolbar-hr-footer i {
    color: var(--error);
}

/* Pace Zones Modal (mobile) */
.pace-modal-overlay {
    display: none;
}

.pace-modal-overlay.active {
    display: flex;
}

.pace-modal {
    width: 90%;
    max-width: 360px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 0;
}

/* Pace modal uses standard .modal-header with sticky positioning */
.pace-modal .modal-header {
    position: sticky;
    top: 0;
    padding: var(--space-md) var(--space-lg);
    margin-bottom: 0;
    padding-bottom: var(--space-md);
    background: var(--card-bg);
    z-index: 1;
    border-bottom: 1px solid var(--border);
}

.pace-modal-content {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
}

/* Custom Select Dropdown */
.custom-select {
    position: relative;
    min-width: 200px;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    height: var(--toolbar-height);
    padding: 0 1rem;
    border: 1px solid var(--select-border);
    border-radius: 0;
    background: var(--select-bg);
    color: var(--select-text);
    font-size: var(--select-font-size);
    font-weight: var(--select-font-weight);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: all var(--transition-fast);
    box-sizing: border-box;
}

.custom-select-value {
    flex: 1;
    min-width: 0;
}

.custom-select-trigger:hover {
    border-color: var(--text-muted);
}

.custom-select.open .custom-select-trigger {
    border-color: var(--accent);
}

.custom-select-arrow {
    font-size: var(--font-xs);
    color: var(--text-muted);
    transition: transform var(--transition-fast);
}

.custom-select.open .custom-select-arrow {
    transform: rotate(180deg);
}

.custom-select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    width: max-content;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition-fast);
    z-index: 100;
    max-height: 400px;
    overflow-y: auto;
}

.custom-select.open .custom-select-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-select-option {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-mono);
    font-size: var(--select-font-size);
    font-weight: var(--select-font-weight);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text);
    cursor: pointer;
    transition: background var(--transition-fast);
    white-space: nowrap;
}

.custom-select-option:first-child {
    border-radius: 0;
}

.custom-select-option:last-child {
    border-radius: 0;
}

.custom-select-option:hover {
    background: var(--accent);
    color: #fff;
}

.custom-select-option:hover .check-icon {
    color: #fff;
}

.custom-select-option.selected {
    background: var(--accent);
    color: #fff;
}

.custom-select-option .check-icon {
    width: 16px;
    font-size: var(--font-sm);
    opacity: 0;
}

.custom-select-option.selected .check-icon {
    opacity: 1;
}

.custom-select-divider {
    height: 1px;
    background: var(--border);
    margin: var(--space-xs) 0;
}

/* Phase Status Dots */
.phase-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 0;
    flex-shrink: 0;
}

.phase-status-done {
    background: var(--phase-done);
}

.phase-status-current {
    background: var(--phase-current);
}

.phase-status-upcoming {
    background: var(--phase-upcoming);
}

.phase {
    margin-bottom: var(--space-2xl);
    width: 100%;
}

.phase-header {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text);
    padding: var(--space-lg) 0;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    letter-spacing: -0.02em;
    border-bottom: 1px solid var(--border);
}

.phase-header:hover {
    color: var(--text-secondary);
}

.phase-header::after {
    content: "▼";
    font-size: var(--font-md);
    transition: transform var(--transition-fast);
    color: var(--text-muted);
}

.phase-header.collapsed::after {
    transform: rotate(-90deg);
}

.phase-content {
    max-height: none;
    overflow: visible;
    transition: max-height var(--transition-fast), opacity var(--transition-fast);
    opacity: 1;
}

.phase-content.collapsed {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}

.phase-description {
    color: var(--text-secondary);
    margin: var(--space-lg) 0 var(--space-2xl) var(--space-lg);
    padding-left: var(--space-lg);
    font-size: var(--font-md);
    line-height: 1.5;
}

/* ===== Shared Week Container Styles ===== */
/* Base styles used by list, calendar, and table views */

.view-week {
    background: var(--card-bg);
    border: 1px solid var(--border);
    margin-bottom: var(--space-lg);
    transition: all var(--transition-fast);
    width: 100%;
}

.view-week:hover {
    background: var(--bg-elevated);
}

.view-week.current-week {
    border-color: var(--accent);
}

.view-week-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    cursor: pointer;
    position: relative;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}

.view-week-header::after {
    content: "▼";
    font-size: 0.6rem;
    color: var(--text-muted);
    transition: transform var(--transition-fast);
    margin-left: var(--space-md);
}

.view-week-header.collapsed::after {
    transform: rotate(-90deg);
}

.view-week-header.collapsed {
    border-bottom: none;
}

.view-week-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
}

.view-week-dates {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-left: var(--space-sm);
}

.view-week-title-group {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.view-week-stats {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.view-week-days {
    font-size: 0.65rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.view-week-volume {
    padding: 0.2rem 0.6rem;
    font-weight: 600;
    font-size: 0.65rem;
    background: var(--completed);
    color: var(--on-color);
}

.view-week-volume.upcoming {
    background: var(--bg3);
    color: var(--text-muted);
}

.view-week-volume.current {
    background: var(--success-bg);
    color: var(--completed);
}

.view-week-volume.completed {
    background: var(--completed);
    color: var(--on-color);
}

.view-week-content {
    transition: max-height var(--transition-fast), opacity var(--transition-fast);
    overflow: hidden;
}

.view-week-content.collapsed {
    max-height: 0 !important;
    opacity: 0;
}

/* Legacy .week class - extends view-week */
.week {
    background: var(--card-bg);
    border: 1px solid var(--border);
    margin-bottom: var(--space-lg);
    transition: all var(--transition-fast);
    animation: fadeIn 0.5s ease forwards;
    opacity: 0;
}

.week:hover {
    background: var(--bg-elevated);
}

.week.current-week {
    border-color: var(--accent);
    border-width: 1px;
}

.week-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    cursor: pointer;
    position: relative;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}

.week-header::after {
    content: "▼";
    font-size: var(--font-sm);
    color: var(--text-muted);
    transition: transform var(--transition-fast);
    margin-left: var(--space-md);
}

.week-header.collapsed::after {
    transform: rotate(-90deg);
}

.week-title {
    font-size: var(--font-md);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--btn-letter-spacing);
    text-transform: uppercase;
    color: var(--text);
}

.week-stats {
    display: flex;
    gap: var(--space-lg);
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.week-stat {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.week-stat-value {
    font-weight: var(--font-weight-semibold);
    color: var(--text);
}

.week-content {
    max-height: 5000px;
    overflow: hidden;
    transition: max-height var(--transition-fast), opacity var(--transition-fast);
    opacity: 1;
    padding: 0 var(--space-xl) var(--space-xl) var(--space-xl);
}

.week-content.collapsed {
    max-height: 0;
    opacity: 0;
    padding: 0 var(--space-xl);
}

.days-grid {
    gap: var(--space-lg);
}

.day {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0;
    transition: all var(--transition-fast);
    position: relative;
    margin-bottom: var(--space-xl);
    opacity: 0;
    animation: fadeInUp 0.4s var(--ease-out-expo) forwards;
}

/* Staggered day card animations */
.day:nth-child(1) { animation-delay: 0.02s; }
.day:nth-child(2) { animation-delay: 0.04s; }
.day:nth-child(3) { animation-delay: 0.06s; }
.day:nth-child(4) { animation-delay: 0.08s; }
.day:nth-child(5) { animation-delay: 0.10s; }
.day:nth-child(6) { animation-delay: 0.12s; }
.day:nth-child(7) { animation-delay: 0.14s; }

.day:hover {
    background: var(--bg-tertiary);
}

/* Draggable day card styles */
.day[draggable="true"] {
    cursor: grab;
}

.day[draggable="true"]:active {
    cursor: grabbing;
}

/* Legacy drag states (keeping for compatibility) */
.day.dragging {
    opacity: 0.5;
    transform: scale(0.98);
    box-shadow: none;
}

.day.drag-over {
    background: var(--success-bg);
    border: 2px dashed var(--success);
}

.day.drag-invalid {
    background: var(--error-bg-dim);
    border: 2px dashed var(--error);
}

/* SortableJS drag states */
.sortable-ghost {
    opacity: 0.4;
    background: var(--bg-muted);
}

.sortable-ghost .day-details {
    display: none !important;
}

.sortable-chosen {
    box-shadow: none;
    z-index: 100;
}

.sortable-chosen .day-details {
    display: none !important;
}

.sortable-drag {
    opacity: 1 !important;
    box-shadow: none;
    z-index: 1000;
}

.sortable-drag .day-details {
    display: none !important;
}

/* Hide all accordion content during sorting */
body.is-sorting .day-details {
    display: none !important;
}

/* Prevent pointer events on body during sorting */
body.is-sorting button {
    pointer-events: none;
}

/* Visual feedback for sortable containers */
.days-grid.sortable-active {
    background: var(--success-bg-dim);
    border-radius: var(--radius-md);
}

.day-summary {
    padding: var(--space-lg);
    cursor: pointer;
}

/* Draggable day cards (not logged, not rest) - entire card is draggable */
.day:not(.logged):not(.rest) {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.day:not(.logged):not(.rest):hover {
    box-shadow: none;
}

.day:not(.logged):not(.rest).sortable-chosen {
    cursor: grabbing;
}

/* Prevent text selection during sorting */
body.is-sorting {
    user-select: none;
    -webkit-user-select: none;
}

.day-details {
    max-height: 2000px;
    overflow: hidden;
    transition: max-height var(--transition-fast), opacity var(--transition-fast), padding var(--transition-fast);
    opacity: 1;
    padding: 0 var(--space-lg) var(--space-lg) var(--space-lg);
}

.day-details.collapsed {
    max-height: 0;
    opacity: 0;
    padding: 0 var(--space-lg);
}

.day.current-day {
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    box-shadow: none;
}

.day.current-day .day-header {
    color: var(--text);
}

.day.current-day::before {
    content: "TODAY";
    display: block;
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--info);
    margin-bottom: var(--space-sm);
    padding-left: var(--space-lg);
    padding-top: var(--space-md);
}

.day.logged {
    border-color: var(--border);
    background: var(--bg-elevated);
}

.day-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding: 0 var(--space-lg) var(--space-lg) var(--space-lg);
}

.log-btn {
    flex: 1;
    background: var(--text);
    color: var(--bg);
    border: none;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    letter-spacing: -0.01em;
}

.log-btn:hover {
    background: var(--text-secondary);
}

.log-btn.logged {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    position: relative;
    padding-right: var(--space-3xl);
}

.log-btn.logged:hover {
    background: var(--border-light);
}

.log-btn.expired {
    background: var(--error-bg-dim);
    color: var(--error);
    border: 1px solid var(--error-bg);
}

.log-btn.expired:hover {
    background: var(--error-bg);
}

.delete-log-x {
    position: absolute;
    right: var(--space-sm);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-md);
    font-weight: 400;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 var(--space-xs);
    transition: all var(--transition-fast);
    line-height: 1;
}

.delete-log-x:hover {
    color: var(--error);
}

.view-log-btn {
    flex: 1;
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    letter-spacing: -0.01em;
}

.view-log-btn:hover:not(.disabled) {
    background: var(--bg);
}

.view-log-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Data Source Badges */
.strava-expiry-badge,
.data-source-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-xs);
    font-weight: 600;
    white-space: nowrap;
}

.strava-expiry-badge {
    background: var(--strava-bg-dim);
    color: var(--strava);
}

.strava-expiry-badge.expiring-soon {
    background: var(--warning-bg);
    color: var(--warning);
}

.strava-expiry-badge.expired {
    background: var(--error-bg-dim);
    color: var(--error);
}

/* Expired Strava data notice */
.log-summary.expired-notice {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-xl);
    background: var(--error-bg-dim);
    border: 1px dashed var(--error-bg);
    border-radius: var(--radius-lg);
}

.expired-message {
    text-align: center;
    color: var(--text-muted);
}

.expired-message i {
    font-size: var(--font-3xl);
    color: var(--error);
    margin-bottom: var(--space-sm);
}

.expired-message p {
    margin: 0;
    font-size: var(--font-md);
}

.expired-message p.hint {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin-top: var(--space-xs);
}

.logged-data {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.logged-stat {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
    font-size: var(--font-md);
}

.logged-stat:last-child {
    margin-bottom: 0;
}

.logged-label {
    color: var(--text-muted);
}

.logged-value {
    color: var(--text);
    font-weight: 600;
}

.logged-value.muted {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.85em;
}

.strava-refresh {
    margin-top: -0.25rem;
}

.logged-weather .logged-value {
    display: flex;
    align-items: center;
    gap: 0.35em;
}

.logged-weather .logged-value i {
    color: var(--text-secondary);
}

/* Multi-Activity Tabs (Day Card) */
.multi-activity-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-md);
    overflow-x: auto;
}

.multi-activity-tab {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.multi-activity-tab:hover {
    color: var(--text);
}

.multi-activity-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.multi-activity-panel {
    display: none;
}

.multi-activity-panel.active {
    display: block;
}

.multi-activity-total {
    display: flex;
    justify-content: space-between;
    padding-top: var(--space-sm);
    margin-top: var(--space-sm);
    border-top: 1px solid var(--border);
    font-size: var(--font-md);
}

/* Multi-Activity Tabs (Activity Modal) */
.log-activity-selector {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-lg);
    overflow-x: auto;
}

.log-activity-tab {
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: var(--space-sm) var(--space-lg);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.log-activity-tab:hover {
    color: var(--text);
}

.log-activity-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Modal Styles */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(33, 37, 41, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 8000; /* Modal overlays layer */
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), backdrop-filter var(--transition-fast);
}

.modal-overlay.active {
    display: flex;
    background: var(--modal-backdrop);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.modal {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    max-width: 1200px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: none;
    transform: scale(0.9) translateY(30px);
    opacity: 0;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.modal-overlay.active .modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Confirm dialog - appended directly to body by ui.js confirm() */
body > .modal.active {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--modal-backdrop);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: none;
    opacity: 1;
    max-height: none;
    overflow: visible;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    width: 100%;
    max-width: none;
}

body > .modal.active .modal-content {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    padding: var(--space-2xl);
    max-width: 400px;
    width: 90%;
    text-align: center;
}

body > .modal.active .confirm-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin: var(--space-md) 0;
}

body > .modal.active .confirm-message {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
}

body > .modal.active .confirm-icon {
    font-size: 1.5rem;
    margin-bottom: var(--space-sm);
}

body > .modal.active .confirm-icon.confirm-warning {
    color: var(--warning);
}

body > .modal.active .confirm-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
}

body > .modal.active .confirm-actions .btn {
    padding: var(--space-sm) var(--space-xl);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
}

body > .modal.active .confirm-actions .btn-primary {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--bg);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--border);
}

.modal-title {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
}

.modal-close {
    background: var(--bg-elevated);
    border: 2px solid var(--border);
    color: var(--text-muted);
    font-size: var(--font-h3);
    cursor: pointer;
    padding: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.modal-close:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.modal-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

/* Modal action buttons - Swiss button system */
.modal-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.5rem 1.3rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.modal-action-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.modal-action-btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.modal-action-btn.primary:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

.modal-action-btn i {
    font-size: 0.6rem;
}

/* Activity Modal (Combined Log + Route) */
.activity-modal {
    max-width: 900px;
    width: 95vw;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.activity-modal-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    padding: 0 var(--space-xl);
    flex-shrink: 0;
}

.activity-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    margin-bottom: -1px;
}

.activity-tab:hover {
    color: var(--text);
}

.activity-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.activity-tab i {
    font-size: var(--font-sm);
}

.activity-tab-content {
    display: none;
    flex: 1;
    overflow-y: auto;
}

.activity-tab-content.active {
    display: block;
}

#activityLogContent {
    padding: 0;
}

#activityRouteContent {
    padding: 0;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.form-input {
    width: 100%;
    padding: var(--input-padding);
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    color: var(--input-text);
    font-size: var(--input-font-size);
    font-family: var(--input-font-family);
    font-weight: var(--input-font-weight);
    transition: border-color var(--transition-fast);
}

.form-input:hover {
    border-color: var(--input-border-hover);
}

.form-input:focus {
    outline: none;
    border-color: var(--input-border-focus);
}

.form-input[readonly] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Save button - Swiss primary button style */
.btn-save {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 0.6rem var(--space-2xl);
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-save:hover {
    background: var(--accent-dark);
}

.log-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
    padding: var(--space-xl);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 0;
}
.log-summary[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.log-summary[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 480px) {
    .log-summary { grid-template-columns: repeat(2, 1fr); }
    .log-summary[data-cols="3"] { grid-template-columns: repeat(2, 1fr); }
    .log-summary[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
}

.log-summary-item {
    text-align: center;
}

.log-summary-value {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.25rem;
}

.log-summary-label {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.splits-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
}

.splits-table th {
    background: var(--bg);
    padding: 0.75rem;
    text-align: left;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
}

.splits-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.splits-table tr:hover {
    background: var(--bg);
}

.split-km {
    font-weight: 600;
    color: var(--primary);
}

.split-indicator {
    width: 24px;
    text-align: center;
    padding: 0.5rem 0.25rem !important;
}

.pace-indicator {
    font-size: var(--font-sm);
}

.pace-indicator.faster {
    color: var(--phase-done);
}

.pace-indicator.slower {
    color: var(--error);
}

.pace-indicator.level {
    color: var(--text-muted);
}

/* Interval Sets Section */
.interval-sets-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.interval-sets-section h3 {
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0;
}

/* Header with inline Auto/Input toggle */
.interval-sets-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.interval-sets-header h3 {
    margin-bottom: 0;
}

.interval-source-toggle {
    display: flex;
    gap: 0.35rem;
}

.interval-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--info-bg-dim);
    border-radius: var(--radius-md);
}

.interval-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.interval-stat .stat-label {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.interval-stat .stat-value {
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--primary);
}

.interval-sets-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-md);
}

.interval-sets-table th {
    background: var(--bg);
    padding: 0.5rem 0.4rem;
    text-align: center;
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
}

.interval-sets-table th[colspan="3"] {
    border-bottom: 1px solid var(--border);
}

.interval-sets-table .interval-subheader th {
    font-size: var(--font-xs);
    padding: 0.3rem 0.4rem;
    background: var(--bg);
}

.interval-sets-table td {
    padding: 0.5rem 0.4rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.interval-sets-table .set-number {
    font-weight: 600;
    color: var(--text-muted);
}

.interval-sets-table .hard-time,
.interval-sets-table .hard-pace {
    color: var(--zone-5);
    font-weight: 500;
}

.interval-sets-table .easy-pace {
    color: var(--zone-2);
}

.interval-set-row:hover {
    background: var(--bg);
}

/* WU/CD rows */
.interval-wu-row td,
.interval-cd-row td {
    background: var(--bg-tertiary);
    font-style: italic;
    color: var(--text-muted);
}

.interval-wu-row .set-label,
.interval-cd-row .set-label {
    font-weight: 600;
    font-style: normal;
    color: var(--text-secondary);
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 480px) {
    .interval-sets-table {
        font-size: var(--font-sm);
    }

    .interval-sets-table th,
    .interval-sets-table td {
        padding: 0.4rem 0.25rem;
    }

    .interval-stats {
        gap: 0.75rem;
    }
}

/* Interval Analysis Section */
.interval-analysis {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--info-bg-dim);
    border-radius: var(--radius-md);
    border: 1px solid var(--info-bg);
}

.interval-analysis h4 {
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.interval-analysis h4 i {
    color: var(--accent);
}

.interval-analysis-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.analysis-metric {
    text-align: center;
    padding: 0.5rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.analysis-metric .metric-label {
    display: block;
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.analysis-metric .metric-value {
    display: block;
    font-size: var(--font-h3);
    font-weight: 700;
    color: var(--primary);
}

.analysis-metric .metric-detail {
    display: block;
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.interval-insights {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.interval-insight {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: var(--font-sm);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--bg);
    border: 1px solid var(--border);
}

.interval-insight.positive {
    background: var(--success-bg-dim);
    color: var(--success-dark);
}

.interval-insight.warning {
    background: var(--warning-bg-dim);
    color: var(--warning-dark);
}

.interval-insight.neutral {
    background: var(--overlay-subtle);
    color: var(--text-muted);
}

.interval-insight .insight-icon {
    font-weight: 700;
    flex-shrink: 0;
}

.interval-insight .insight-text {
    line-height: 1.4;
}

@media (max-width: 600px) {
    .interval-analysis-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 380px) {
    .interval-analysis-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .analysis-metric .metric-value {
        font-size: var(--font-lg);
    }
}

/* Interval Science Analysis */
.interval-science-analysis {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--info-bg);
}

.interval-science-analysis h4 {
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.interval-science-analysis h4 i {
    color: var(--accent);
}

.interval-science-analysis .ai-para {
    margin-bottom: 0.75rem;
}

.interval-science-analysis .ai-para:last-child {
    margin-bottom: 0;
}

/* Interval Detection Badge */
.interval-detection-badge {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.interval-detection-badge i {
    color: var(--accent);
}

.auto-detection-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    font-size: var(--font-xs);
    color: var(--text-muted);
    line-height: 1.4;
}

.auto-detection-note i {
    color: var(--text-muted);
    margin-top: 0.1rem;
    flex-shrink: 0;
}

/* Workout Confirmation Prompt */
.workout-confirmation {
    margin: 0.5rem 0;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

.confirmation-question {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}

.confirmation-question i {
    color: var(--accent);
    font-size: 0.85rem;
}

.confirmation-buttons {
    display: flex;
    gap: 0.4rem;
}

.confirm-workout-btn {
    flex: 1;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: var(--font-xs);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    transition: all var(--transition-fast);
}

.confirm-workout-btn:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.confirm-workout-btn.confirm-yes:hover {
    background: var(--success-bg);
    border-color: var(--success);
    color: var(--success);
}

.confirm-workout-btn.confirm-no:hover {
    background: var(--error-bg);
    border-color: var(--error);
    color: var(--error);
}

/* Confirmed-yes state */
.workout-confirmation.confirmed-yes {
    display: block;
}

.confirmed-yes-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--font-sm);
    color: var(--success);
}

.confirmed-yes-header i {
    color: var(--success);
}

.workout-confirmation.confirmed-no {
    display: block;
}

/* Rest day with activity prompt */
.rest-activity-prompt {
    border-left: 3px solid var(--accent);
    background: var(--card-bg);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin: var(--space-md) 0;
}
.rest-activity-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 600;
    color: var(--accent);
    margin-bottom: var(--space-xs);
}
.rest-activity-question {
    color: var(--text-secondary);
    font-size: var(--font-sm);
    margin-bottom: var(--space-sm);
}

/* Confirmed-no header row */
.confirmed-no-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--font-sm);
    color: var(--text-muted);
    font-style: italic;
}

.confirmed-no-header i {
    color: var(--text-muted);
}

/* Change Workout button */
.change-workout-btn {
    margin-top: 0.4rem;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: var(--font-xs);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: all var(--transition-fast);
    width: 100%;
    justify-content: center;
}

.change-workout-btn:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

/* Confirmation dropdown wrapper — hidden by default */
.confirmation-dropdown-wrapper {
    display: none;
    margin-top: 0.4rem;
}

.confirmation-dropdown-wrapper.open {
    display: block;
}

/* Override dropdown positioning within confirmation context */
.confirmation-dropdown-wrapper .workout-type-dropdown {
    position: static;
    display: block;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0;
}

/* Update Day Card prompt — shown after type selection in confirmation dropdown */
.update-daycard-prompt {
    padding: var(--space-sm) 0;
}

.update-daycard-question {
    display: block;
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.update-daycard-buttons {
    display: flex;
    gap: var(--space-xs);
}

.update-daycard-btn {
    flex: 1;
    padding: 0.3rem 0.5rem;
    font-size: var(--font-xs);
    font-weight: 500;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

.update-daycard-btn:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.update-daycard-btn.update-daycard-yes:hover {
    background: var(--success-bg);
    border-color: var(--success);
    color: var(--success);
}

/* Update Day Card button in confirmed-yes-header */
.update-daycard-apply {
    margin-left: auto;
    padding: 0.2rem 0.5rem;
    font-size: var(--font-xs);
    font-weight: 500;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.update-daycard-apply:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

/* Interval Data Input Section */
.interval-data-input-section {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    background: var(--info-bg-dim);
    border-radius: var(--radius-md);
    border: 1px dashed var(--border);
}

.btn-toggle-interval-input {
    background: none;
    border: none;
    color: var(--accent);
    font-size: var(--font-sm);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    justify-content: center;
}

.btn-toggle-interval-input:hover {
    color: var(--accent-dark);
}

.interval-input-content {
    margin-top: var(--space-md);
}

.interval-input-hint {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}

.interval-csv-input {
    width: 100%;
    height: 120px;
    padding: var(--space-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    resize: vertical;
    background: var(--bg);
    color: var(--fg);
}

.interval-csv-input:focus {
    border-color: var(--accent);
    outline: none;
}

.btn-parse-intervals {
    margin-top: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--accent);
    color: var(--on-color);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-xs);
    font-weight: 600;
    cursor: pointer;
    width: 100%;
}

.btn-parse-intervals:hover {
    background: var(--accent-dark);
}

/* Activity Log Action Buttons */
.activity-log-actions {
    margin-top: var(--space-xl);
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

.btn-delete-activity {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    font-weight: 600;
    font-family: var(--font-mono);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: var(--btn-letter-spacing);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.btn-delete-activity:hover {
    background: var(--error-bg-dim);
    color: var(--error);
    border-color: var(--error);
}

/* Map Markers */
.map-marker-dot {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    border: 2px solid white;
    box-shadow: 0 1px 3px var(--overlay-light);
}

.map-marker-dot.start {
    background: var(--completed);
}

.map-marker-dot.finish {
    background: var(--error);
}

/* Map and Route Visualization */
#routeMap {
    width: 100%;
    height: 400px;
    flex-shrink: 0;
    border-radius: var(--radius-lg);
    margin: var(--space-lg) 0;
    border: 1px solid var(--border);
    overflow: hidden;
}

/* Dark map styling overrides */
#routeMap .leaflet-control-zoom a {
    background: var(--card-bg);
    color: var(--text);
    border-color: var(--border);
}

#routeMap .leaflet-control-zoom a:hover {
    background: var(--secondary);
}

#routeMap .leaflet-control-attribution {
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: var(--font-xs);
    padding: var(--space-xs) var(--space-sm);
}

#routeMap .leaflet-control-attribution a {
    color: var(--primary);
}

.leaflet-control-attribution,
.leaflet-control-layers,
.leaflet-bar {
    display: none !important;
}

/* Terrain Breakdown */
.terrain-breakdown {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    background: var(--bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
}

.terrain-breakdown h4 {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.terrain-breakdown h4 i {
    color: var(--text-muted);
}

.terrain-bar {
    display: flex;
    height: 12px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--border-light);
    margin-bottom: var(--space-md);
}

.terrain-segment {
    height: 100%;
    min-width: 2px;
}

.terrain-segment.power {
    background: var(--error);
}

.terrain-segment.hill {
    background: var(--warning);
}

.terrain-segment.flat {
    background: var(--success);
}

.terrain-segment.regular {
    background: var(--text-muted);
}

.terrain-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.terrain-legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.terrain-dot {
    width: 10px;
    height: 10px;
    border-radius: 0;
}

.terrain-dot.power {
    background: var(--error);
}

.terrain-dot.hill {
    background: var(--warning);
}

.terrain-dot.flat {
    background: var(--success);
}

.terrain-dot.regular {
    background: var(--text-muted);
}

.terrain-insight {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Segment Locations Accordion */
.segment-locations-accordion {
    margin-top: var(--space-lg);
    border-top: 1px solid var(--border-light);
    padding-top: var(--space-md);
}

.segment-locations-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    padding: var(--space-sm) 0;
    cursor: pointer;
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text);
}

.segment-locations-toggle:hover {
    color: var(--primary);
}

.segment-locations-toggle span {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.segment-locations-toggle .accordion-icon {
    transition: transform var(--transition-fast);
    color: var(--text-muted);
}

.segment-locations-accordion.open .accordion-icon {
    transform: rotate(180deg);
}

.segment-locations-content {
    display: none;
    padding-top: var(--space-md);
}

.segment-locations-accordion.open .segment-locations-content {
    display: block;
}

.segment-location-group {
    margin-bottom: var(--space-lg);
}

.segment-location-group:last-child {
    margin-bottom: 0;
}

.segment-location-group h5 {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text);
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.segment-location-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.segment-location-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: var(--secondary);
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
}

.segment-location-num {
    font-weight: 600;
    color: var(--text-muted);
    min-width: 24px;
}

.segment-location-range {
    color: var(--text-secondary);
    min-width: 100px;
}

.segment-location-stats {
    color: var(--text-muted);
    margin-left: auto;
}

/* Grouped segments by split */
.segment-split-group {
    margin-bottom: var(--space-sm);
}

.segment-split-group:last-child {
    margin-bottom: 0;
}

.segment-split-header {
    font-weight: 600;
    font-size: var(--font-sm);
    color: var(--text);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-xs);
}

.segment-split-items {
    padding-left: var(--space-sm);
    border-left: 2px solid var(--border);
    margin-left: var(--space-sm);
}

.segment-split-items .segment-location-item {
    padding: var(--space-xs) var(--space-sm);
    background: transparent;
    border-radius: 0;
}

.segment-split-items .segment-location-item:hover {
    background: var(--bg-secondary);
}

/* Metrics Chart Section */
.metrics-chart-section {
    margin: var(--space-2xl) 0;
    padding: var(--space-2xl);
    background: var(--bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.metrics-chart-scroll-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    border-radius: var(--radius-md);
    background: var(--bg);
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-sm);
}

/* On large screens, no horizontal scroll needed */
@media (min-width: 769px) {
    .metrics-chart-scroll-container {
        overflow-x: hidden;
    }
}

#metricsChart {
    height: 290px;
    border-radius: var(--radius-md);
    overflow: visible;
    width: 100%;
}

.chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 290px;
    color: var(--text-muted);
    font-size: var(--font-md);
    gap: 0.5rem;
    margin-bottom: var(--space-md);
}

.no-data-message {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-muted);
    font-size: var(--font-md);
    font-style: italic;
}

#routeMap .chart-loading {
    height: 300px;
}

#metricsChart svg {
    display: block;
    cursor: crosshair;
}

/* D3 Chart Lines */
#metricsChart .line-pace,
#metricsChart .line-gap,
#metricsChart .line-hr,
#metricsChart .line-cadence {
    transition: opacity var(--transition-fast);
}

#metricsChart .elevation-area {
    opacity: 0.9;
}

#metricsChart .elevation-line {
    stroke-linecap: round;
}

/* D3 Hover elements */
#metricsChart .focus circle {
    stroke: white;
    stroke-width: 2;
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.5));
}

#metricsChart .overlay {
    cursor: crosshair;
}

/* D3 Tooltip */
.d3-tooltip {
    position: fixed;
    z-index: 9500; /* Tooltips layer */
    pointer-events: none;
}

.metrics-toggles {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.metric-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: var(--font-md);
    color: var(--text);
    transition: opacity var(--transition-fast);
}

.metric-toggle:hover {
    opacity: 0.8;
}

.metric-toggle input {
    display: none;
}

.toggle-indicator {
    width: 44px;
    height: 24px;
    border-radius: 0;
    position: relative;
    background-color: var(--border);
    transition: background-color var(--transition-fast);
}

.toggle-indicator::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 0;
    background: white;
    transition: transform var(--transition-fast);
    will-change: transform;
}

.metric-toggle input:checked + .toggle-indicator::after {
    transform: translateX(20px);
}

.metric-toggle input:not(:checked) + .toggle-indicator {
    background-color: var(--border) !important;
}

/* Chart interaction mode toggle */
.chart-interaction-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.toggle-divider {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 0.25rem;
}

.interaction-mode-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: var(--font-xs);
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.interaction-mode-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text);
}

.interaction-mode-btn.active {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg);
    font-weight: 500;
}

.interaction-mode-btn i {
    font-size: var(--font-xs);
}

/* Click data panel */
.chart-click-data {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
}

.click-data-header {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.click-data-distance {
    font-weight: 600;
    color: var(--text);
}

.click-data-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.click-data-metric {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.click-data-label {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.click-data-value {
    font-size: var(--font-md);
    font-weight: 600;
}

.metrics-averages {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.metric-avg {
    font-size: var(--font-md);
    color: var(--text-muted);
}

.metric-avg strong {
    color: var(--text);
    margin-left: 0.25rem;
}

/* Athlete Intelligence */
.athlete-intelligence {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin: var(--space-2xl) 0;
}

.ai-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.ai-icon {
    font-size: var(--icon-lg);
}

.ai-title {
    font-weight: 600;
    font-size: var(--font-md);
    color: var(--text);
}

.ai-summary {
    font-size: var(--font-lg);
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
}

.ai-summary strong {
    color: var(--text);
}

.ai-summary p {
    margin: 0;
}

.ai-section {
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--border-light);
}

.ai-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ai-section:first-child {
    padding-top: 0;
}

.ai-section-title {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 var(--space-sm) 0;
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.ai-section-title i {
    color: var(--text-muted);
    font-size: 0.85em;
    opacity: 0.7;
}

.ai-para {
    margin: 0;
    font-size: var(--font-md);
    line-height: 1.7;
    color: var(--text-secondary);
}

.ai-para strong {
    color: var(--text);
    font-weight: 600;
}

.ai-para em {
    color: var(--text-secondary);
    font-style: italic;
}

/* Workout history section */
.ai-section.ai-workout-history {
    border-top: 1px solid var(--border-light);
    margin-top: var(--space-md);
}

.ai-section.ai-workout-history .ai-section-title {
    color: var(--primary);
}

.ai-section.ai-workout-history .ai-para {
    margin-bottom: var(--space-sm);
}

.ai-section.ai-workout-history .ai-para:last-child {
    margin-bottom: 0;
}

/* Workout history entry cards */
.workout-history-entries {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: var(--space-sm) 0;
}

.workout-history-entry {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-elevated, var(--bg));
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--border-color);
}

.workout-history-entry.current {
    border-left-color: var(--accent);
    background: var(--accent-bg-hover);
    font-weight: 600;
}

.workout-history-date {
    min-width: 4rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.workout-history-metrics {
    color: var(--text);
}

/* First line emphasis for overview sections */
.ai-section.ai-overview .ai-para::first-line {
    color: var(--text);
    font-weight: 500;
}

.ai-section.ai-marathon {
    background: var(--bg);
    margin: var(--space-md) calc(-1 * var(--space-lg));
    margin-bottom: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border-bottom: none;
}

.ai-section.ai-marathon .ai-section-title {
    color: var(--primary);
}

/* Day Weather Forecast (shared styling for list and modal) */
.day-weather-forecast {
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    margin: var(--space-md) 0;
}

.weather-forecast-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.weather-forecast-header .weather-icon {
    color: var(--text-secondary);
    font-size: var(--font-md);
}

.weather-forecast-temp {
    font-weight: 600;
    color: var(--text);
    font-size: var(--font-md);
}

.weather-forecast-condition {
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.weather-forecast-rain {
    color: var(--text-secondary);
    font-size: var(--font-sm);
    margin-left: auto;
}

.weather-forecast-rain i {
    margin-right: 0.25em;
}

.weather-heat-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    background: var(--bg);
}

.weather-heat-warning.warm {
    color: var(--warning);
}

.weather-heat-warning.hot {
    color: var(--warning);
}

.weather-heat-warning.extreme {
    color: var(--error-dark);
}

.heat-warning-icon {
    flex-shrink: 0;
    color: var(--text-secondary);
}

.heat-warning-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.heat-warning-pace {
    font-weight: 600;
    color: var(--text);
}

.heat-warning-advice {
    color: var(--text-secondary);
}

/* Zone Analysis - Shared styles for weekly and activity modal */

.analysis-effect strong {
    color: var(--text);
}

/* Chart Tooltip - Strava Style */
.chart-tooltip {
    position: fixed;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    pointer-events: none;
    box-shadow: none;
    z-index: 9500; /* Tooltips layer */
    min-width: 180px;
}

.tooltip-header {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid #444;
}

.tooltip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: var(--space-xs) 0;
}

.tooltip-label {
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.tooltip-value {
    font-size: var(--font-md);
    font-weight: 600;
    color: white;
}

/* Chart Vertical Line */
.chart-vertical-line {
    position: absolute;
    top: 0;
    width: 1px;
    background: var(--text-muted);
    pointer-events: none;
    display: none;
    z-index: 10;
}

#metricsChart {
    height: 280px;
    cursor: crosshair;
    margin-bottom: 1rem;
}

#metricsChart svg {
    display: block;
    overflow: visible;
}

.elevation-area {
    fill: #d4d4d4;
}

.y-axis-elevation path {
    stroke: none;
}

.y-axis-elevation line {
    stroke: var(--border);
    stroke-dasharray: 2, 2;
}

.y-axis-elevation text {
    fill: var(--text-muted);
    font-size: var(--font-xs);
}

/* Chart Axes */
#metricsChart .axis path,
#metricsChart .axis line {
    stroke: #ddd;
}

#metricsChart .x-axis text {
    fill: #666;
    font-size: var(--font-xs);
}

#metricsChart .y-axis-pace text {
    fill: var(--strava);
    font-size: var(--font-xs);
}

#metricsChart .y-axis-hr text {
    fill: #2563EB;
    font-size: var(--font-xs);
}

.modal-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1.5rem;
    align-items: start;
}

.modal-section {
    display: flex;
    flex-direction: column;
}

/* Make the map column sticky */
.modal-section:first-child {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
}

.modal-section h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: var(--font-h3);
    color: var(--primary);
}

@media (max-width: 900px) {
    .modal-content-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Disable sticky on mobile - stacks vertically */
    .modal-section:first-child {
        position: static;
        max-height: none;
        overflow-y: visible;
    }

    .modal {
        width: 98%;
        padding: 1.5rem;
    }

    #routeMap {
        height: 350px;
    }
}

/* Full screen modals on mobile */
@media (max-width: 600px) {
    .modal {
        position: relative;
        width: 100%;
        height: 100%;
        max-height: 100vh;
        max-width: 100%;
        border-radius: 0;
        padding: var(--space-md);
        padding-top: var(--space-3xl);
    }

    .modal-overlay {
        padding: 0;
    }

    .modal-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        margin-bottom: 0;
        padding: var(--space-md);
        background: var(--bg);
        border-bottom: 2px solid var(--border);
    }
}

.route-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.route-stat {
    background: var(--bg);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    text-align: center;
}

.route-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    font-family: var(--font-body);
}

.route-stat-label {
    font-size: var(--font-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--space-xs);
}


.day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.day-name {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--font-h3);
}

.day-date {
    font-size: var(--font-md);
    color: var(--text-muted);
}

.day-date-status {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 0;
    flex-shrink: 0;
}

.status-dot.done {
    background-color: var(--success);
}

.status-dot.missed {
    background-color: var(--error);
}

.status-dot.rest-with-activity {
    background-color: var(--primary);
    animation: pulse-rest-activity 2s ease-in-out infinite;
}

.status-dot.upcoming {
    background-color: var(--border);
}

.status-dot.placeholder {
    background-color: var(--secondary);
    opacity: 0.5;
}

/* Placeholder day styling (before plan starts) */
.day.placeholder {
    opacity: 0.4;
    pointer-events: none;
}

.day.placeholder .day-summary {
    min-height: auto;
    padding: 0.75rem;
}

.day.placeholder .day-name {
    color: var(--text-tertiary);
}

.day.placeholder .day-date {
    color: var(--text-tertiary);
}

/* Calendar view placeholder */
.calendar-dot.placeholder {
    background-color: var(--secondary) !important;
    opacity: 0.3;
    width: 8px !important;
    height: 8px !important;
    cursor: default;
    pointer-events: none;
}

.workout {
    margin-top: 0.5rem;
}

.workout-type {
    display: inline-block;
    background: var(--secondary);
    color: var(--text-secondary);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
    letter-spacing: 0.05em;
}

.workout-type.rest { background: var(--overlay-subtle); color: var(--text-muted); }
.workout-type.easy { background: var(--workout-easy-bg); color: var(--workout-easy); border: 1.5px solid var(--workout-easy); }
.workout-type.recovery { background: var(--workout-recovery-bg); color: var(--workout-recovery); border: 1.5px solid var(--workout-recovery); }
.workout-type.quality { background: var(--workout-tempo-bg); color: var(--workout-tempo); }
.workout-type.long { background: var(--workout-long-bg); color: var(--workout-long); border: 1.5px solid var(--workout-long); }
.workout-type.long_run { background: var(--workout-long-bg); color: var(--workout-long); border: 1.5px solid var(--workout-long); }
.workout-type.intervals { background: var(--workout-intervals-bg); color: var(--workout-intervals); border: 1.5px solid var(--workout-intervals); }
.workout-type.hill_repeats { background: var(--workout-hill-repeats-bg); color: var(--workout-hill-repeats); border: 1.5px solid var(--workout-hill-repeats); }
.workout-type.tempo { background: var(--workout-tempo-bg); color: var(--workout-tempo); }
.workout-type.threshold { background: var(--workout-threshold-bg); color: var(--workout-threshold); border: 1.5px solid var(--workout-threshold); }
.workout-type.fartlek { background: var(--workout-fartlek-bg); color: var(--workout-fartlek); border: 1.5px solid var(--workout-fartlek); }
.workout-type.marathon_pace { background: var(--workout-marathon-pace-bg); color: var(--workout-marathon-pace); }
.workout-type.race_pace { background: var(--workout-marathon-pace-bg); color: var(--workout-marathon-pace); border: 1.5px solid var(--workout-marathon-pace); }
.workout-type.strides { background: var(--workout-strides-bg); color: var(--workout-strides); border: 1.5px solid var(--workout-strides); }
.workout-type.progression { background: var(--workout-progression-bg); color: var(--workout-progression); border: 1.5px solid var(--workout-progression); }
.workout-type.shakeout { background: var(--workout-shakeout-bg); color: var(--workout-shakeout); }
.workout-type.race { background: var(--workout-race-bg); color: var(--workout-race); }
.workout-type.walk_run { background: var(--workout-walk-run-bg); color: var(--workout-walk-run); border: 1.5px solid var(--workout-walk-run); }
.workout-type.tuneup { background: var(--workout-tuneup-bg); color: var(--workout-tuneup); border: 1.5px solid var(--workout-tuneup); }

/* Workout type switch button and dropdown */
.workout-type-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    width: 26px;
    height: 26px;
    padding: 0;
    margin-left: 4px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    vertical-align: middle;
    transform: translate(0px, -4px);
}

.workout-type-switch:hover {
    background: var(--secondary);
    color: var(--text);
}

.workout-type-container {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.workout-type-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    min-width: 120px;
    padding: var(--space-xs);
    margin-top: 4px;
}

/* Allow dropdown to escape modal overflow when open */
.modal:has(.workout-type-dropdown.open) {
    overflow: visible;
}

.workout-type-dropdown.open {
    display: block;
}

.workout-type-option {
    display: block;
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    text-align: left;
    border: none;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    border-radius: 0;
    font-size: var(--font-sm);
    transition: background var(--transition-fast);
}

.workout-type-option:hover {
    background: var(--secondary);
}

.workout-type-option.active {
    background: var(--primary);
    color: var(--bg);
}

/* Workout type dropdown sections */
.workout-type-section {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-light);
}

.workout-type-section:last-child {
    border-bottom: none;
    padding-bottom: 4px;
}

.workout-type-section:first-child {
    padding-top: 4px;
}

.workout-type-label {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 8px 6px 8px;
}

/* Accordion headers for subtype sections */
.workout-accordion-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 0 8px;
    user-select: none;
}

.workout-accordion-header::after {
    content: '▶';
    font-size: 8px;
    color: var(--text-muted);
    transition: transform var(--transition-fast);
}

.workout-accordion-header.open::after {
    transform: rotate(90deg);
}

.workout-accordion-header i.fa-star {
    color: var(--warning);
}

.workout-accordion-content {
    display: none;
    padding-top: 10px;
}

.workout-accordion-content.open {
    display: grid;
}

/* Grid for workout subtypes */
.workout-subtype-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 0 4px;
}

.workout-subtype-option {
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
    font-weight: 500;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.workout-subtype-option:hover {
    background: var(--secondary);
    border-color: var(--text-muted);
}

.workout-subtype-option.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--bg);
}

/* Wider dropdown for subtypes */
.workout-type-dropdown {
    min-width: 240px;
}

/* Position container for dropdown */
.workout {
    position: relative;
}

.workout-details {
    color: var(--text);
    font-size: var(--font-lg);
    line-height: 1.5;
}

.workout-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.workout-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.workout-meta i {
    font-size: var(--font-xs);
    opacity: 0.8;
}

.workout-meta-distance {
    color: var(--primary);
    font-weight: 500;
}

.workout-meta-pace {
    color: var(--text);
}

.workout-meta-zone {
    font-weight: 500;
}

.workout-meta-zone i {
    animation: pulse-subtle 2s ease-in-out infinite;
}

@keyframes pulse-subtle {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

@keyframes pulse-rest-activity {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

.workout-pace {
    margin-top: 0.5rem;
    font-size: var(--font-md);
    color: var(--primary);
    font-weight: 600;
    font-family: var(--font-body);
    letter-spacing: 0.02em;
}

.workout-description {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--bg);
    border-radius: var(--radius-sm);
    font-size: var(--font-md);
    line-height: 1.6;
    color: var(--text-muted);
}

/* Structured workout display (warmup/main/cooldown) */
.workout-structure {
    margin-top: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.workout-line {
    padding: 0;
    font-size: var(--font-md);
    color: var(--text);
    line-height: 1.6;
}

.workout-label {
    font-weight: 600;
    color: var(--text);
}

/* Distance inline editor */
.distance-editable {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.distance-display {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.distance-edit-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    color: var(--text-muted);
    font-size: var(--font-sm);
    opacity: 0.6;
    transition: color var(--transition-fast), opacity var(--transition-fast);
}

.distance-edit-btn:hover {
    opacity: 1;
    color: var(--accent);
}

.distance-editor {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 0;
    overflow: hidden;
}

.distance-dec,
.distance-inc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--font-lg);
    font-weight: 500;
    user-select: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.distance-dec {
    border-right: 1px solid var(--border);
}

.distance-inc {
    border-left: 1px solid var(--border);
}

.distance-dec:hover,
.distance-inc:hover {
    background: var(--secondary);
    color: var(--text);
}

.distance-dec:active,
.distance-inc:active {
    background: var(--border);
}

.distance-value {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--font-md);
    min-width: 2.5em;
    text-align: center;
    padding: var(--space-xs) var(--space-sm);
    color: var(--text);
}

.distance-update {
    margin-left: var(--space-sm);
    padding: 0.35rem 0.8rem;
    border-radius: 0;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all var(--transition-fast);
}

.distance-update:hover {
    background: var(--red-dim);
}

.distance-cancel {
    padding: 0 0.6rem;
    border: none;
    border-left: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--font-sm);
    transition: all var(--transition-fast);
}

.distance-cancel:hover {
    background: var(--secondary);
    color: var(--text);
}

/* Workout Missed Banner */
.workout-missed-banner {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--error);
    color: white;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
    font-weight: 600;
    font-size: var(--font-md);
}

.workout-missed-banner i {
    font-size: var(--icon-md);
}

.missed-reason-section {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: var(--error-bg);
    margin-top: calc(-1 * var(--space-md));
    margin-bottom: var(--space-md);
}

.missed-reason-label {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.missed-reason-select {
    flex: 1;
    min-width: 0;
}

.missed-reason-select .custom-select-trigger {
    height: auto;
    padding: var(--space-xs) var(--space-sm);
    padding-right: calc(var(--space-sm) + 16px);
    font-size: var(--select-font-size);
    font-weight: var(--select-font-weight);
    background: var(--bg);
}

.missed-reason-select .custom-select-dropdown {
    min-width: 180px;
}

/* ============================================
   WORKOUT DISTANCE (standalone for Long/Easy)
   ============================================ */

.workout-distance {
    margin-top: var(--space-md);
    font-size: var(--font-xl);
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.workout-distance i {
    font-size: var(--icon-md);
    color: var(--text-muted);
}

/* ============================================
   WORKOUT ZONE INFO (Pace + HR Zone)
   ============================================ */

.workout-zone-info {
    margin-top: var(--space-md);
    display: flex;
    gap: var(--space-xl);
    padding: var(--space-md) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.workout-zone-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-md);
    color: var(--text);
}

.workout-zone-item i {
    color: var(--text-muted);
    font-size: var(--icon-sm);
}

.workout-zone-label {
    font-weight: 600;
    text-transform: uppercase;
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.workout-zone-value {
    font-family: var(--font-mono);
    font-size: var(--font-sm);
}

/* ============================================
   WORKOUT DESCRIPTION ACCORDION
   ============================================ */

.workout-desc-accordion {
    margin-top: var(--space-md);
}

.workout-desc-header {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) 0;
    user-select: none;
}

.workout-desc-header:hover {
    color: var(--text);
}

.workout-desc-header::after {
    content: "▼";
    font-size: var(--font-xs);
    transition: transform var(--transition-fast);
}

.workout-desc-header.collapsed::after {
    transform: rotate(-90deg);
}

.workout-desc-content {
    max-height: 200px;
    overflow: hidden;
    transition: max-height var(--transition-fast), opacity var(--transition-fast);
    opacity: 1;
}

.workout-desc-content.collapsed {
    max-height: 0;
    opacity: 0;
}

.workout-desc-content p {
    margin: 0;
    padding: var(--space-sm) 0;
    font-size: var(--font-md);
    line-height: 1.6;
    color: var(--text-muted);
    font-style: italic;
}

.science-tip {
    margin-top: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-tertiary);
    border-radius: 0;
    font-size: var(--font-md);
    line-height: 1.5;
    color: var(--text-muted);
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

.science-tip-icon {
    flex-shrink: 0;
    font-size: var(--icon-md);
}

.science-tip-text {
    font-style: italic;
}

/* Top Header - Swiss Navigation */
.top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--nav-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.5rem;
    z-index: 5000;
    transition: all var(--transition-fast);
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.header-title {
    font-family: var(--font-body);
    font-size: var(--font-xl);
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.02em;
}

.header-actions {
    display: flex;
    gap: var(--space-sm);
}

/* Header Theme Toggle Button */
.theme-toggle-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    border-radius: 0;
}

.theme-toggle-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.theme-toggle-btn i {
    font-size: var(--font-lg);
}

/* Header Language Selector */
.lang-sel { position: relative; }

.lang-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: 0.3s;
}

.lang-btn:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.lang-btn::after {
    content: '\25BE';
    font-size: 0.5rem;
    color: var(--text-tertiary);
}

.lang-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    min-width: 130px;
    z-index: 200;
    display: none;
    flex-direction: column;
    transition: all 0.4s;
}

.lang-menu.open { display: flex; }

.lang-opt {
    padding: 0.5rem 0.8rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.55rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border: 0;
    background: transparent;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.15s;
    border-bottom: 1px solid var(--border);
}

.lang-opt:last-child { border-bottom: none; }

.lang-opt:hover {
    background: rgba(128, 128, 128, 0.08);
    color: var(--text-primary);
}

.lang-opt.active {
    color: var(--accent);
    font-weight: 700;
}

.lang-native {
    color: var(--text-tertiary);
    margin-left: auto;
    font-size: 0.5rem;
}

.go-to-today-btn {
    background: var(--accent);
    color: var(--on-color);
    border: none;
    padding: 0.5rem 1.3rem;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.go-to-today-btn:hover {
    background: var(--accent-dark);
}

.go-to-today-btn:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .top-header {
        height: 60px;
        padding: 0 var(--space-sm);
    }

    .go-to-today-btn {
        padding: var(--space-xs) var(--space-sm);
        font-size: var(--font-xs);
    }

    .hamburger-btn {
        width: 40px;
        height: 40px;
    }

    .container {
        padding-top: 60px; /* Match header height on tablet */
    }

    .container-toolbar {
        top: 60px; /* Match header height on tablet */
    }

    /* Stack toolbar items vertically on mobile */
    .container-toolbar-inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
    }

    .toolbar-left-group {
        order: 1;
        justify-content: space-between;
    }

    .view-toggle-group {
        order: 2;
        justify-content: center;
    }

    /* Toolbar dropdowns on tablet/mobile */
    .custom-select {
        min-width: 0;
        flex: 1;
        max-width: 50%;
    }

    .custom-select-trigger {
        overflow: hidden;
    }

    .custom-select-trigger .custom-select-value {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        min-width: 0;
    }

    .custom-select-dropdown {
        width: max-content;
        max-width: calc(100vw - 2rem);
    }

    .toolbar-pace-dropdown {
        left: auto;
        right: 0;
        min-width: 0;
        width: calc(100vw - 2rem);
        max-width: 320px;
    }

    /* Metrics Chart Tablet */
    .metrics-chart-section {
        padding: var(--space-xl);
        margin: var(--space-xl) 0;
    }

    .metrics-toggles {
        gap: 1rem;
        flex-wrap: wrap;
    }

    .metrics-averages {
        gap: 1.5rem;
    }
}

/* Hamburger Menu - Swiss Style */
.hamburger-btn {
    position: relative;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    width: 32px;
    height: 32px;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: border-color var(--transition-fast);
}

.hamburger-btn:hover {
    border-color: var(--accent);
}

.hamburger-btn span {
    width: 16px;
    height: 1.5px;
    background: var(--text-secondary);
    border-radius: 0;
    transition: all var(--transition-fast);
}

.hamburger-btn:hover span {
    background: var(--accent);
}

.hamburger-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 5px);
}

.hamburger-btn.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(3px, -4px);
}

.menu-overlay {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    background: var(--bg-elevated);
    z-index: 1000;
    transition: left var(--transition-fast);
    overflow-y: auto;
    border-right: 1px solid var(--border);
    box-shadow: none;
}

.menu-overlay.active {
    left: 0;
}

.menu-content {
    padding: 80px 2rem 2rem 2rem;
}

.menu-section {
    margin-bottom: 2rem;
}

.menu-section-title {
    font-family: var(--font-body);
    font-size: var(--font-xl);
    font-weight: 600;
    color: var(--primary);
    margin-bottom: var(--space-lg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.menu-item {
    padding: var(--space-md) var(--space-lg);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text);
    text-decoration: none;
    display: block;
}

.menu-item:hover {
    background: var(--secondary);
    border-color: var(--border);
    transform: translateX(4px);
}

.data-btn {
    padding: 0.5rem 1.3rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
}

.data-btn:hover {
    background: var(--secondary);
}

.data-btn.danger-btn {
    color: var(--error);
    border-color: var(--error);
}

.data-btn.danger-btn:hover {
    background: var(--error);
    color: white;
}

.menu-routes-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    margin-top: var(--space-sm);
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--font-lg);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.menu-routes-btn:hover {
    background: var(--secondary);
}

.menu-routes-btn i:first-child {
    color: var(--primary);
    font-size: var(--icon-md);
}

.menu-routes-btn i:last-child {
    margin-left: auto;
    color: var(--text-muted);
    font-size: var(--font-sm);
}

/* Menu Quote Section */
.menu-quote-section {
    padding: var(--space-lg) var(--space-lg);
    padding-top: var(--space-xl);
    margin-top: var(--space-xl);
    text-align: center;
    border-top: 1px solid var(--border);
}

.menu-quote-text {
    font-size: var(--font-sm);
    font-style: italic;
    color: var(--text-muted);
    line-height: 1.5;
    letter-spacing: 0.02em;
}

.sync-status {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--font-md);
    text-align: center;
    display: none;
}

.sync-status.success {
    display: block;
    background: var(--success-bg-dim);
    border: 1px solid var(--success-bg);
    color: var(--success);
}

.sync-status.error {
    display: block;
    background: var(--error-bg-dim);
    border: 1px solid var(--error);
    color: var(--error);
}

.sync-status.info {
    display: block;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.strava-last-sync {
    margin-top: var(--space-sm);
    font-size: var(--font-sm);
    color: var(--text-muted);
    text-align: center;
}

.strava-connection-status {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border-radius: var(--radius-md);
}

.strava-connection-status .connection-icon {
    color: var(--error);
    font-size: 1.2em;
}

.strava-connection-status .connection-icon.connected {
    color: var(--success);
}

.strava-connection-status .connection-text {
    font-weight: 500;
    color: var(--text);
}

.strava-connect-btn {
    background: var(--strava) !important;
    color: white !important;
}

.strava-connect-btn:hover {
    background: var(--strava-dark) !important;
}

.strava-disconnect-btn {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border) !important;
}

.strava-disconnect-btn:hover {
    background: var(--error-bg-dim) !important;
    color: var(--error) !important;
    border-color: var(--error) !important;
}

.strava-reconnect-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    padding: 0.5rem 1.3rem;
    background: var(--strava);
    color: white;
    border: none;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.strava-reconnect-btn:hover {
    background: var(--strava-dark);
}

.strava-reconnect-btn i {
    font-size: var(--font-lg);
}

/* Strava Settings Layout */
.strava-settings {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.strava-settings .strava-connect-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    padding: 0.5rem 1.3rem;
    background: var(--strava);
    color: white;
    border: none;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.strava-settings .strava-connect-btn:hover {
    background: var(--strava-dark);
    transform: none;
}

.strava-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.strava-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 0.5rem 1.3rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.strava-action-btn:hover {
    background: var(--secondary);
    border-color: var(--border);
    color: var(--text);
}

.strava-action-btn--danger:hover {
    background: var(--error-bg-dim);
    border-color: var(--error);
    color: var(--error);
}

.strava-action-btn i {
    font-size: 0.9em;
}

.strava-sync-section {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.strava-sync-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.strava-sync-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.strava-sync-label {
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.strava-sync-section .strava-last-sync {
    margin: 0;
    font-size: var(--font-xs);
}

.strava-sync-header .toggle-setting {
    gap: var(--space-sm);
}

.strava-sync-header .toggle-label {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.strava-sync-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.strava-sync-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 0.5rem 1.3rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.strava-sync-btn:hover {
    background: var(--secondary);
}

.strava-sync-btn--primary {
    background: var(--strava);
    border-color: var(--strava);
    color: white;
}

.strava-sync-btn--primary:hover {
    background: var(--strava-dark);
    border-color: var(--strava-dark);
}

.strava-sync-btn--secondary {
    background: var(--card-bg);
    border-color: var(--strava);
    color: var(--strava);
}

.strava-sync-btn--secondary:hover {
    background: var(--strava);
    color: white;
}

.strava-sync-section .sync-status {
    margin-top: var(--space-sm);
}

/* Strava Profile Modal */
.strava-profile-modal {
    max-width: 450px;
    width: 90%;
}

.strava-profile-content {
    padding: var(--space-lg);
}

.strava-profile-header {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.strava-profile-image {
    width: 80px;
    height: 80px;
    border-radius: 0;
    object-fit: cover;
    border: 3px solid var(--strava);
}

.strava-profile-info {
    flex: 1;
}

.strava-profile-name {
    font-family: var(--font-heading);
    font-size: var(--font-xl);
    font-weight: 600;
    margin: 0 0 var(--space-xs) 0;
}

.strava-profile-location {
    color: var(--text-muted);
    font-size: var(--font-sm);
    margin: 0 0 var(--space-sm) 0;
}

.strava-profile-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--strava);
    font-size: var(--font-sm);
    font-weight: 500;
    text-decoration: none;
}

.strava-profile-link:hover {
    text-decoration: underline;
}

.strava-profile-stats {
    display: flex;
    justify-content: space-around;
    padding: var(--space-lg) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-lg);
}

.strava-stat {
    text-align: center;
}

.strava-stat-value {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--strava);
}

.strava-stat-label {
    font-size: var(--font-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.strava-ytd-stats,
.strava-all-time-stats {
    margin-bottom: var(--space-lg);
}

.strava-ytd-title,
.strava-all-time-title {
    font-family: var(--font-heading);
    font-size: var(--font-md);
    font-weight: 600;
    margin: 0 0 var(--space-md) 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.strava-ytd-title i {
    color: var(--strava);
}

.strava-all-time-title i {
    color: var(--warning);
}

.strava-ytd-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.strava-ytd-item {
    background: var(--bg);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    text-align: center;
}

.strava-ytd-value {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--font-lg);
    font-weight: 700;
}

.strava-ytd-label {
    font-size: var(--font-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pace-reference-menu {
    background: var(--bg);
    border: 1px solid var(--border);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
}

.pace-item-menu {
    display: flex;
    justify-content: space-between;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--font-lg);
}

.pace-item-menu:last-child {
    border-bottom: none;
}

.pace-label-menu {
    color: var(--text-muted);
}

.pace-value-menu {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--primary);
}

/* Menu Pace Reference - Current vs Goal Comparison */
.menu-pace-comparison {
    text-align: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.menu-pace-header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.menu-pace-stat {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.menu-pace-label {
    width: 100%;
    text-align: center;
    font-size: var(--font-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
}

.menu-pace-value {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
}

.menu-pace-stat.goal .menu-pace-value {
    color: var(--primary);
}

.menu-pace-unit {
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.menu-pace-arrow {
    color: var(--text-muted);
    font-size: var(--font-md);
}

.menu-pace-gap {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-xl);
    font-size: var(--font-sm);
    font-weight: 500;
    margin-bottom: 0.4rem;
}

.menu-pace-gap.on-target {
    background: var(--status-on-target-bg);
    color: var(--status-success);
}

.menu-pace-gap.close {
    background: var(--status-close-bg);
    color: var(--status-warning-light);
}

.menu-pace-gap.needs-work {
    background: var(--status-needs-work-bg);
    color: var(--status-warning);
}

.menu-pace-meta {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.menu-pace-header-simple {
    text-align: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.menu-pace-goal-only {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.menu-pace-goal-only i {
    color: var(--accent);
}

.menu-pace-no-data {
    font-size: var(--font-sm);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

/* Menu Zones Table */
.menu-zones-table {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.menu-zones-header {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) 65px 18px 70px;
    gap: 0.25rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--font-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.menu-zones-col-name {
    display: none;
}

.menu-zones-col-hr {
    display: none;
}

.menu-zones-col-current,
.menu-zones-col-goal {
    text-align: center;
}

.menu-zone-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-light, rgba(0,0,0,0.05));
}

.menu-zone-row:last-child {
    border-bottom: none;
}

.menu-zone-label {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.menu-zone-paces {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.menu-zone-name {
    font-weight: 600;
    font-size: var(--font-md);
    color: var(--text);
    white-space: nowrap;
}

.menu-zone-hr {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.menu-zone-current {
    text-align: center;
    font-size: var(--font-sm);
    color: var(--text-muted);
    white-space: nowrap;
}

.menu-zone-arrow {
    text-align: center;
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.menu-zone-goal {
    text-align: center;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--font-sm);
    padding: 0.25rem 0.4rem;
    border-radius: 0;
    white-space: nowrap;
}

/* Menu zone goal colors - using zone backgrounds */
.menu-zone-goal.recovery {
    background: var(--zone-1-bg);
    color: var(--zone-1);
}

.menu-zone-goal.easy {
    background: var(--zone-2-bg);
    color: var(--zone-2);
}

.menu-zone-goal.tempo {
    background: var(--zone-3-bg);
    color: var(--zone-3);
}

.menu-zone-goal.threshold {
    background: var(--zone-4-bg);
    color: var(--zone-4);
}

.menu-zone-goal.speed {
    background: var(--zone-5-bg);
    color: var(--zone-5);
}

/* Menu Zones Simple (no comparison) */
.menu-zones-simple {
    margin-bottom: 0.75rem;
}

.menu-zone-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-light, rgba(0,0,0,0.05));
}

.menu-zone-item:last-child {
    border-bottom: none;
}

.menu-zone-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.menu-zone-hr-detail {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.menu-zone-values {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
}

.menu-zone-pace {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--font-md);
    padding: 0.2rem 0.5rem;
    border-radius: 0;
}

/* Menu zone pace colors - same as goal */
.menu-zone-pace.recovery {
    background: var(--zone-1-bg);
    color: var(--zone-1);
}

.menu-zone-pace.easy {
    background: var(--zone-2-bg);
    color: var(--zone-2);
}

.menu-zone-pace.tempo {
    background: var(--zone-3-bg);
    color: var(--zone-3);
}

.menu-zone-pace.threshold {
    background: var(--zone-4-bg);
    color: var(--zone-4);
}

.menu-zone-pace.speed {
    background: var(--zone-5-bg);
    color: var(--zone-5);
}

.menu-zone-bpm {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

/* Menu HR Footer */
.menu-hr-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: var(--font-xs);
    color: var(--text-muted);
    padding-top: var(--space-md);
    margin-top: var(--space-md);
    border-top: 1px solid var(--border);
}

.menu-hr-footer i {
    color: var(--error);
}

/* Pace Reference Mobile Improvements */
@media (max-width: 480px) {
    .menu-pace-header-row {
        gap: 0.75rem;
    }

    .menu-pace-value {
        font-size: 1.75rem;
    }

    .menu-pace-comparison {
        padding-bottom: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .menu-zones-header {
        display: none;
    }

    .menu-zone-row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 0;
    }

    .menu-zone-label {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
    }

    .menu-zone-name {
        font-size: var(--font-md);
        font-weight: 600;
    }

    .menu-zone-name::after {
        content: none;
    }

    .menu-zone-hr {
        font-size: var(--font-xs);
        font-weight: 400;
        color: var(--text-muted);
    }

    .menu-zone-paces {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        flex-shrink: 0;
    }

    .menu-zone-current {
        font-size: var(--font-sm);
        font-weight: 500;
        color: var(--text-secondary);
        min-width: auto;
        text-align: right;
    }

    .menu-zone-arrow {
        font-size: var(--font-sm);
        color: var(--text-muted);
    }

    .menu-zone-goal {
        font-size: var(--font-sm);
        font-weight: 600;
        padding: 0.25rem 0.4rem;
    }

    .pace-reference-menu {
        padding: var(--space-md);
    }

    .menu-zones-table {
        margin-top: var(--space-xl);
        margin-bottom: var(--space-lg);
    }

    .menu-hr-footer {
        margin-top: var(--space-lg);
        padding-top: var(--space-md);
    }

    .race-predictor-btn {
        margin: var(--space-xl) 0 var(--space-lg) 0;
    }
}

/* Race Time Predictor Button */
.race-predictor-btn {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    margin: var(--space-lg) 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.race-predictor-btn:hover {
    border-color: var(--text-muted);
    background: var(--bg-tertiary);
}

.race-predictor-btn > i:first-child {
    font-size: var(--font-lg);
    color: var(--text-muted);
}

.race-predictor-btn-content {
    flex: 1;
    text-align: left;
}

.race-predictor-btn-title {
    display: block;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.race-predictor-btn-desc {
    display: block;
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.race-predictor-btn > i:last-child {
    color: var(--text-muted);
}

/* Race Predictor Modal */
.race-predictor-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8500; /* Above modals, below full page overlays */
    display: none;
}

.race-predictor-container.active {
    display: block;
}

.race-predictor-container .modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--modal-backdrop);
}

.race-predictor-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 480px;
    max-height: 85vh;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--modal-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Race predictor uses standard .modal-header with inverted color scheme */
.race-predictor-header {
    padding: var(--space-lg);
    margin-bottom: 0;
    padding-bottom: var(--space-lg);
    background: var(--fg);
    color: var(--bg);
}

.race-predictor-header .modal-title {
    color: inherit;
}

.race-predictor-header .modal-close {
    background: var(--on-color-bg);
    border-color: transparent;
    color: var(--on-color);
}

.race-predictor-header .modal-close:hover {
    background: var(--on-color-bg-hover);
    border-color: transparent;
    color: var(--on-color);
}

.race-predictor-content {
    padding: var(--space-lg);
    overflow-y: auto;
    flex: 1;
}

/* Confidence Badge */
.predictor-confidence {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    font-weight: 500;
    margin-bottom: var(--space-lg);
}

.predictor-confidence.high {
    background: var(--success-bg);
    color: var(--success);
}

.predictor-confidence.medium {
    background: var(--warning-bg);
    color: var(--warning);
}

.predictor-confidence.low {
    background: var(--error-bg);
    color: var(--error);
}

.confidence-detail {
    margin-left: auto;
    font-weight: 400;
    opacity: 0.8;
}

/* VDOT Display */
.predictor-vdot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

.vdot-label {
    font-size: var(--font-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vdot-value {
    font-family: var(--font-body);
    font-size: var(--font-3xl);
    font-weight: 700;
    color: var(--primary);
}

/* Prediction Times */
.predictor-times {
    margin-bottom: var(--space-lg);
}

.predictor-times h3 {
    font-family: var(--font-body);
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-md);
}

.prediction-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.prediction-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
    background: var(--bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.prediction-item.featured {
    background: var(--primary);
    color: var(--bg);
    border-color: var(--primary);
}

.prediction-distance {
    font-size: var(--font-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xs);
}

.prediction-item.featured .prediction-distance {
    color: var(--on-color-medium);
}

.prediction-time {
    font-family: var(--font-body);
    font-size: var(--font-xl);
    font-weight: 700;
}

.prediction-item.actual {
    border-color: var(--success);
    background: var(--success-bg);
    position: relative;
}

.prediction-item.actual.featured {
    background: var(--success);
    border-color: var(--success);
}

.prediction-badge {
    position: absolute;
    top: var(--space-xs);
    right: var(--space-xs);
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--success);
    background: var(--bg-surface);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.prediction-item.featured .prediction-badge {
    color: var(--success);
    background: var(--bg-surface);
}

.prediction-source {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: var(--space-xs);
}

.prediction-item.featured .prediction-source {
    color: var(--on-color-low);
}

/* Training Inputs */
.predictor-inputs {
    margin-bottom: var(--space-lg);
}

.predictor-inputs h3 {
    font-family: var(--font-body);
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-md);
}

.input-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.input-stat {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg);
    border-radius: var(--radius-sm);
}

.input-stat > i {
    color: var(--text-muted);
    font-size: var(--font-md);
    width: 20px;
    text-align: center;
}

.input-stat-content {
    display: flex;
    flex-direction: column;
}

.input-stat-value {
    font-weight: 600;
    font-size: var(--font-sm);
    color: var(--text);
}

.input-stat-label {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

/* Recent Race */
.predictor-recent-race {
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: var(--bg);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--accent);
}

.predictor-recent-race h3 {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xs);
}

.recent-race-info {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.recent-race-event {
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.recent-race-time {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--font-md);
    color: var(--text);
}

/* Disclaimer */
.predictor-disclaimer {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--accent-bg);
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
    color: var(--text-secondary);
    line-height: 1.5;
}

.predictor-disclaimer i {
    color: var(--accent);
    margin-top: var(--space-xs);
}

.predictor-disclaimer p {
    margin: 0;
}

/* Predictor Tabs */
.predictor-tabs {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
    padding: var(--space-xs);
    background: var(--bg);
    border-radius: var(--radius-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.predictor-tab {
    flex: 1;
    min-width: max-content;
    padding: var(--space-sm) var(--space-md);
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.predictor-tab:hover {
    background: var(--card-bg);
    color: var(--text);
}

.predictor-tab.active {
    background: var(--card-bg);
    color: var(--primary);
    box-shadow: var(--card-shadow);
}

.predictor-tab i {
    margin-right: var(--space-xs);
}

/* Race Input Section */
.race-input-section {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    border: 1px solid var(--border);
}

.race-input-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.race-input-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.race-input-badge {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--error);
    background: var(--error-bg);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.populate-btn {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--accent-bg);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--accent);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.populate-btn:hover {
    background: var(--accent-bg-hover);
}

.populate-btn.strava {
    background: var(--strava-bg-dim);
    color: var(--strava);
}

.populate-btn.strava:hover {
    background: var(--strava-bg);
}

.populate-btn i {
    font-size: var(--font-sm);
}

.populate-btns {
    display: flex;
    gap: var(--space-xs);
}

.race-input-desc {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.race-times-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.race-time-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.race-time-field label {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text);
}

.race-time-field input {
    width: 100%;
    padding: var(--space-md);
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--input-bg);
    font-size: var(--font-md);
    color: var(--text);
}

.race-time-field input::placeholder {
    color: var(--text-light);
}

.race-time-field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
    background: var(--card-bg);
}

/* Reference Race Input */
.reference-race-input {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.ref-distance,
.ref-time {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.ref-distance label,
.ref-time label {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text);
}

.ref-distance .custom-select {
    min-width: 0;
}

.ref-distance .custom-select-trigger {
    height: auto;
    padding: var(--input-padding);
    padding-right: calc(var(--input-padding) + 16px);
    font-size: var(--input-font-size);
    font-weight: var(--input-font-weight);
    border: 1px solid var(--input-border);
    background: var(--input-bg);
}

.ref-time input {
    width: 100%;
    padding: var(--input-padding);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    background: var(--input-bg);
    font-size: var(--input-font-size);
    font-weight: var(--input-font-weight);
    font-family: var(--input-font-family);
    color: var(--input-text);
    transition: border-color var(--transition-fast);
}

.ref-time input:hover {
    border-color: var(--input-border-hover);
}

.ref-time input:focus {
    outline: none;
    border-color: var(--select-border-focus);
    box-shadow: none;
}

/* Formula Explanation */
.formula-explanation {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px dashed var(--border-light);
}

.formula-box {
    background: var(--accent-bg);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.formula-box .formula-label {
    display: block;
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xs);
}

.formula-box code {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--font-lg);
    color: var(--text);
    margin-bottom: var(--space-sm);
}

.formula-box p {
    font-size: var(--font-sm);
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

.formula-box p strong {
    color: var(--text);
}

/* Reference Summary in Best Estimate */
.reference-summary {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--accent-bg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.reference-summary .ref-label {
    font-size: var(--font-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reference-summary .ref-value {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--accent);
}

/* Best Estimate Section */
.predictor-best-estimate {
    margin-bottom: var(--space-lg);
}

.best-estimate-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.best-estimate-header i {
    font-size: var(--font-xl);
    color: var(--warning);
}

.best-estimate-header h3 {
    font-family: var(--font-body);
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.best-estimate-desc {
    display: block;
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.formulas-used {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-light);
}

.formulas-used-label {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.formula-badge {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    background: var(--secondary);
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-secondary);
}

.best-estimate-note {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: var(--space-sm);
    font-style: italic;
}

/* Comparison Table */
.predictor-comparison {
    margin-bottom: var(--space-lg);
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-sm);
}

.comparison-table th,
.comparison-table td {
    padding: var(--space-sm) var(--space-md);
    text-align: center;
}

.comparison-table th {
    background: var(--bg);
    font-weight: 500;
    color: var(--text-muted);
    font-size: var(--font-xs);
    border-bottom: 1px solid var(--border);
}

.comparison-table th:first-child,
.comparison-table td:first-child {
    text-align: left;
}

.formula-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.formula-header span:first-child {
    font-weight: 600;
    color: var(--text);
}

.formula-subtitle {
    font-size: var(--font-xs);
    font-weight: 400;
    color: var(--text-muted);
}

.formula-header.best {
    color: var(--warning);
}

.formula-header.best i {
    margin-right: var(--space-xs);
}

.comparison-table tbody tr {
    border-bottom: 1px solid var(--border-light);
}

.comparison-table tbody tr:last-child {
    border-bottom: none;
}

.compare-distance {
    font-weight: 500;
    color: var(--text);
}

.compare-time {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--text);
}

.compare-time.disabled {
    color: var(--text-muted);
    font-weight: 400;
}

.compare-time.best {
    color: var(--primary);
    background: var(--primary-bg);
    border-radius: var(--radius-sm);
}

.comparison-note {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--accent-bg);
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
    color: var(--text-secondary);
}

.comparison-note i {
    color: var(--accent);
}

/* Single Formula View */
.predictor-single-formula {
    margin-bottom: var(--space-lg);
}

.formula-info {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

.formula-info > i {
    font-size: var(--font-xl);
    color: var(--accent);
    margin-top: var(--space-xs);
}

.formula-info h3 {
    font-family: var(--font-body);
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--text);
    margin: 0 0 var(--space-xs) 0;
}

.formula-info p {
    font-size: var(--font-xs);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.formula-needs-race {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl);
    background: var(--bg);
    border-radius: var(--radius-md);
    border: 2px dashed var(--border);
    text-align: center;
}

.formula-needs-race i {
    font-size: var(--font-2xl);
    color: var(--text-muted);
    margin-bottom: var(--space-md);
}

.formula-needs-race p {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin: 0;
}

.menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--modal-backdrop);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.menu-backdrop.active {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 768px) {
    .menu-overlay {
        max-width: 85%;
        /* Hide scrollbar on mobile while keeping scroll functionality */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }

    .menu-overlay::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
}

.race-card {
    background: linear-gradient(135deg, var(--text) 0%, var(--text-secondary) 100%);
    border: none;
    color: var(--bg);
    padding: var(--space-3xl);
    margin-bottom: var(--space-3xl);
    box-shadow: var(--modal-shadow);
}

.race-card .week-title {
    color: var(--bg);
    font-size: var(--font-3xl);
}

.race-card .week-volume {
    background: var(--on-color-bg-hover);
    color: var(--on-color);
}

.race-card .day {
    background: var(--overlay-light);
    border-color: var(--on-color-border);
}

.race-card .day:hover {
    background: var(--overlay-light);
    border-color: var(--on-color);
}

.race-card .workout-type {
    background: var(--on-color-bg);
    color: var(--on-color);
}

.race-card .workout-type.race {
    background: var(--on-color-high);
    color: var(--primary-dark);
    font-weight: 700;
    font-size: var(--font-md);
}

.race-card .day-name,
.race-card .day-date,
.race-card .workout-details {
    color: var(--on-color);
}

.race-card .phase-description {
    color: var(--on-color-high);
}

.pace-reference {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

.pace-reference h3 {
    font-family: var(--font-body);
    color: var(--primary);
    margin-bottom: var(--space-lg);
}

.pace-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.pace-item {
    display: flex;
    justify-content: space-between;
    padding: var(--space-sm);
    background: var(--bg);
    border-radius: var(--radius-sm);
}

.pace-label {
    color: var(--text-muted);
}

.pace-value {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--primary);
}

/* Tablet */
@media (max-width: 768px) {
    h1 {
        font-size: var(--font-h2);
    }

    .container {
        padding: 60px 1rem 1rem 1rem; /* Match header height (60px) on tablet */
    }

}

/* Mobile */
@media (max-width: 480px) {
    h1 {
        font-size: var(--font-h3);
    }

    .container {
        padding: 60px 0.75rem 0.75rem 0.75rem; /* Match header height (60px) on mobile */
    }

    .week {
        margin-bottom: 0.75rem;
    }

    .week-header {
        padding: 1rem;
    }

    .week-content {
        padding: 0 0.75rem 0.75rem 0.75rem;
    }

    .day-summary {
        padding: 0.75rem;
    }

    .day-details {
        padding: 0 0.75rem 0.75rem 0.75rem;
    }

    /* Metrics Chart Mobile */
    .metrics-chart-section {
        padding: var(--space-lg);
        margin: var(--space-lg) 0;
    }

    #metricsChart {
        height: 250px;
        margin: 0 -0.5rem var(--space-md) -0.5rem;
    }

    .metrics-toggles {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem 1rem;
        padding: 1rem 0;
        margin-top: 0.75rem;
    }

    .metric-toggle {
        font-size: var(--font-sm);
        justify-content: flex-start;
    }

    .toggle-indicator {
        width: 38px;
        height: 22px;
        flex-shrink: 0;
    }

    .toggle-indicator::after {
        width: 16px;
        height: 16px;
    }

    .metric-toggle input:checked + .toggle-indicator::after {
        transform: translateX(16px);
    }

    .metrics-averages {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem 1.5rem;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
    }

    .metric-avg {
        font-size: var(--font-sm);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .metric-avg strong {
        margin-left: 0;
        font-size: var(--font-md);
    }

    /* Toolbar mobile adjustments */
    .container-toolbar {
        padding: var(--space-sm) var(--space-md);
    }

    .toolbar-left-group {
        flex-wrap: wrap;
        gap: var(--space-xs);
    }

    .custom-select-trigger,
    .toolbar-pace-trigger {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--font-xs);
    }

    /* Hide dropdown on mobile - use modal instead */
    .toolbar-pace-dropdown {
        display: none !important;
    }

    .custom-select-dropdown {
        max-width: calc(100vw - 1.5rem);
    }
}

.loading {
    text-align: center;
    padding: 4rem 0;
    color: var(--text-muted);
}

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

.week:nth-child(1) { animation-delay: 0.1s; }
.week:nth-child(2) { animation-delay: var(--transition-fast); }
.week:nth-child(3) { animation-delay: var(--transition-fast); }
.week:nth-child(4) { animation-delay: 0.25s; }

/* Weekly Analysis Card - Swiss Style */
.week-analysis-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    margin-top: var(--space-lg);
    overflow: hidden;
}

.week-analysis-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-elevated);
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.week-analysis-header:hover {
    background: var(--secondary);
}

.week-analysis-header.active {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}

.week-analysis-header span {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.week-analysis-header .analysis-label {
    font-size: var(--font-sm);
    font-weight: var(--label-font-weight);
    letter-spacing: var(--label-letter-spacing-sm);
    text-transform: uppercase;
    color: var(--text-muted);
    padding-right: var(--space-sm);
    border-right: 1px solid var(--border);
}

.week-analysis-card .analysis-label {
    padding-right: 0;
    border-right: none;
}

.week-analysis-header .analysis-title {
    font-size: var(--font-sm);
    font-weight: var(--label-font-weight);
    letter-spacing: var(--label-letter-spacing-sm);
    text-transform: uppercase;
    color: var(--text);
}

.week-analysis-header span i {
    color: var(--accent);
    font-size: var(--font-md);
    opacity: 0.8;
}

.week-analysis-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.week-analysis-header .accordion-icon {
    font-size: 0.65rem;
    color: var(--text-muted);
    transition: transform var(--transition-fast);
}

.week-analysis-header.active .accordion-icon {
    transform: rotate(180deg);
    color: var(--text);
}

.refresh-analysis-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.refresh-analysis-btn:hover {
    background: var(--bg);
    color: var(--text);
    border-color: var(--text-muted);
}

.refresh-analysis-btn.spinning {
    animation: spin 0.5s ease;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.week-analysis-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-fast);
}

.week-analysis-content.active {
    max-height: 2000px;
    overflow-y: auto;
}

.week-analysis-inner {
    padding: var(--space-lg) var(--space-xl);
}

/* Phase Analysis Card - Swiss Style */
.phase-analysis-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    margin-top: var(--space-lg);
    overflow: hidden;
}

.phase-analysis-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-fast);
}

.phase-analysis-content.active {
    max-height: 5000px;
    overflow-y: visible;
}

/* Analysis modal header - injected on mobile when analysis opens as full-screen */
/* Analysis modal header is only injected on mobile, hidden by default */
.analysis-modal-header {
    display: none;
}

/* Mobile: analysis opens as full-screen modal */
@media (max-width: 600px) {
    .week-analysis-content.active,
    .phase-analysis-content.active {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-height: 100vh;
        z-index: 8000;
        background: var(--bg);
        overflow: hidden auto;
        -webkit-overflow-scrolling: touch;
        transition: none;
    }

    .week-analysis-content.active .week-analysis-inner,
    .phase-analysis-content.active .week-analysis-inner {
        padding-top: var(--space-md);
    }

    /* Analysis modal uses standard .modal-header with sticky positioning */
    .analysis-modal-header {
        display: flex;
        position: sticky;
        top: 0;
        z-index: 1;
        padding: var(--space-md) var(--space-xl);
        padding-bottom: var(--space-md);
        margin: 0 calc(-1 * var(--space-xl)) 0;
        margin-bottom: 0;
        border-bottom: 1px solid var(--border);
        background: var(--bg);
    }
}

.analysis-empty {
    text-align: center;
    padding: var(--space-xl);
    color: var(--text-muted);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

.analysis-loading {
    text-align: center;
    padding: var(--space-lg);
    color: var(--text-muted);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Analysis Stats */
.analysis-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.analysis-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.analysis-stat-label {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.analysis-stat-value {
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.analysis-stat .analysis-progress {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-top: var(--space-xs);
}

.analysis-stat .analysis-progress-bar {
    height: 100%;
    background: var(--primary);
    border-radius: var(--radius-sm);
    transition: width var(--transition-fast);
}

/* Week Footer Content - Groups zone bar and analysis card */
.week-footer-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border);
}

.week-footer-content .view-zone-bar {
    margin: 0;
}

.week-footer-content .view-zone-legend {
    margin-bottom: 0;
}

.week-footer-content .week-analysis-card {
    margin-top: var(--space-sm);
}

/* Week Zone Bar + Analysis Container */
.week-zone-bar-analysis-container .view-zone-bar {
    margin: 0;
}

.week-zone-bar-analysis-container .view-zone-legend {
    margin-bottom: var(--space-sm);
}

.week-zone-bar-analysis-container .week-analysis-card {
    margin-top: var(--space-sm);
}

/* Padding only in table view */
.table-week .week-zone-bar-analysis-container {
    padding: var(--space-lg);
}

/* Unified Zone Distribution Bar - All views */
.zone-bar-title {
    font-size: var(--font-sm);
    font-weight: var(--label-font-weight);
    letter-spacing: var(--label-letter-spacing-sm);
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: var(--space-xs);
}

.view-zone-bar {
    display: flex;
    height: 6px;
    gap: 2px;
    margin: var(--space-md) 0;
    overflow: hidden;
}

.view-zone-bar .zb {
    transition: flex var(--transition-fast);
}

.view-zone-bar .zb.z1 { background: var(--zone-1); }
.view-zone-bar .zb.z2 { background: var(--zone-2); }
.view-zone-bar .zb.z3 { background: var(--zone-3); }
.view-zone-bar .zb.z4 { background: var(--zone-4); }
.view-zone-bar .zb.z5 { background: var(--zone-5); }

/* Unified Zone Legend - All views */
.view-zone-legend {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.view-zone-legend-item {
    font-size: 0.55rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    letter-spacing: 0.05em;
}

.view-zone-legend-item::before {
    content: '';
    width: 8px;
    height: 4px;
}

.view-zone-legend-item.z1::before { background: var(--zone-1); }
.view-zone-legend-item.z2::before { background: var(--zone-2); }
.view-zone-legend-item.z3::before { background: var(--zone-3); }
.view-zone-legend-item.z4::before { background: var(--zone-4); }

.analysis-empty p {
    margin: var(--space-xs) 0;
}

.analysis-hint {
    font-size: var(--font-sm);
    opacity: 0.7;
}

.partial-week-note {
    font-size: var(--font-sm);
    color: var(--text-muted);
    font-style: italic;
}

.analysis-loading {
    text-align: center;
    color: var(--text-muted);
    padding: var(--space-xl);
}

.analysis-progress {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 0;
    padding: var(--space-lg);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xs);
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.progress-percent {
    font-family: var(--font-body);
    font-weight: 500;
}

.progress-percent.on-track { color: var(--status-on-track); }
.progress-percent.exceeding { color: var(--status-exceeding); }
.progress-percent.slightly-under { color: var(--status-slightly-under); }
.progress-percent.behind { color: var(--status-behind); }

.progress-bar-container {
    height: 6px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
}

.progress-bar {
    height: 100%;
    border-radius: var(--radius-sm);
    transition: width var(--transition-fast);
}

/* Swiss style - flat colors, no gradients */
.progress-bar.on-track { background: var(--zone-2); }
.progress-bar.exceeding { background: var(--zone-1); }
.progress-bar.slightly-under { background: var(--zone-3); }
.progress-bar.behind { background: var(--accent); }

/* Volume breakdown stacked bar */
.progress-bar-container.stacked {
    display: flex;
    height: 12px;
}

.volume-segment {
    height: 100%;
    transition: width var(--transition-fast);
}

.volume-segment:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.volume-segment:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.volume-segment:only-child {
    border-radius: var(--radius-sm);
}

.volume-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
    margin-top: var(--space-md);
}

.volume-legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-xs);
}

.volume-legend-color {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.volume-legend-label {
    color: var(--text);
    font-weight: 500;
}

.volume-legend-percent {
    color: var(--text-muted);
}

.volume-week-progress {
    font-size: var(--font-xs);
    font-weight: 400;
    color: var(--text-muted);
}

.volume-subtext {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}

/* Week progress rows for phase analysis */
.week-progress-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.week-progress-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-sm);
    padding: var(--space-xs) 0;
}

.week-label {
    width: 36px;
    font-weight: 600;
    color: var(--text);
    font-size: var(--font-sm);
}

.week-bar-container {
    flex: 1;
    height: 20px;
    background: transparent;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
}

/* Reference bar showing full 100% width */
.week-bar-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--border);
    border-radius: var(--radius-md);
}

.week-bar {
    height: 100%;
    border-radius: var(--radius-md);
    transition: width var(--transition-fast);
    background: var(--accent);
    position: relative;
    z-index: 1;
}

.week-stats {
    width: 85px;
    text-align: right;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    font-size: var(--font-sm);
}

.week-percent {
    width: 45px;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: var(--font-sm);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
}

.week-percent.on-track {
    color: var(--status-on-track);
    background: var(--success-bg);
}
.week-percent.slightly-under {
    color: var(--status-slightly-under);
    background: var(--warning-bg);
}
.week-percent.behind {
    color: var(--status-behind);
    background: var(--error-bg);
}

.week-bar-overflow {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    animation: pulse-overflow 1.5s ease-in-out infinite;
}

@keyframes pulse-overflow {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.progress-overflow {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--status-exceeding));
    opacity: 0.6;
}

.progress-status {
    font-size: var(--font-xs);
    font-weight: 500;
    text-align: right;
    margin-top: var(--space-xs);
}

.progress-status.on-track { color: var(--status-on-track); }
.progress-status.exceeding { color: var(--status-exceeding); }
.progress-status.slightly-under { color: var(--status-slightly-under); }
.progress-status.behind { color: var(--status-behind); }

.analysis-types {
    font-size: var(--font-sm);
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: var(--bg);
    border-radius: var(--radius-md);
}

.types-label {
    color: var(--text-muted);
    margin-right: var(--space-sm);
}

.types-value {
    color: var(--text);
}

.analysis-insight {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

.insight-icon {
    font-size: var(--icon-sm);
    flex-shrink: 0;
}

.insight-text {
    font-size: var(--font-sm);
    color: var(--text);
    line-height: 1.4;
}

.analysis-benefits {
    background: var(--success-bg-dim);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
}

.benefits-header {
    font-size: var(--font-xs);
    color: var(--status-on-track);
    font-weight: 500;
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.benefits-list {
    margin: 0;
    padding-left: var(--space-xl);
    font-size: var(--font-sm);
    color: var(--text);
}

.benefits-list li {
    margin: var(--space-xs) 0;
}

/* Weekly Intelligence Summary - inherits .ai-section/.ai-para styles for consistency with log view */
.week-intelligence-summary {
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: var(--bg);
    border-radius: var(--radius-md);
}

/* Week Zone Analysis Grid */
.week-zone-analysis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.zone-card {
    background: var(--card-bg-gradient);
    border: var(--card-border);
    border-radius: 0;
    padding: var(--space-md);
}

.zone-card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border);
}

.zone-icon {
    font-size: var(--icon-lg);
    color: var(--text-secondary);
    width: 24px;
    text-align: center;
}

.zone-card-header h5 {
    font-family: var(--font-body);
    font-size: var(--font-md);
    font-weight: 500;
    color: var(--text);
    margin: 0;
}

.zone-subtitle {
    font-size: var(--font-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.zone-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    align-items: stretch;
}

/* HR Donut */
.hr-donut-container {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}

.hr-zone-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.zone-legend-item {
    display: grid;
    grid-template-columns: 8px 45px 1fr auto auto auto;
    gap: var(--space-xs);
    align-items: center;
    font-size: var(--font-xs);
}

.zone-color {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-sm);
}

.zone-name {
    color: var(--text);
    font-weight: 500;
}

.zone-legend-item .zone-label {
    color: var(--text-muted);
    font-size: 0.55rem;
}

.zone-legend-item .zone-bpm {
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.55rem;
    text-align: right;
}

.zone-legend-item .zone-time {
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.55rem;
    text-align: right;
}

.zone-legend-item .zone-percent {
    color: var(--text);
    font-family: var(--font-body);
    font-weight: 500;
    text-align: right;
    min-width: 28px;
}

.zone-effect {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border);
    font-size: var(--font-xs);
    color: var(--text-secondary);
}

/* Pace Bars */
.pace-zones-card .zone-card-content {
    flex-direction: column;
}

.pace-bars-container {
    width: 100%;
}

.pace-bar-row {
    display: grid;
    grid-template-columns: 60px 1fr 55px 45px 35px;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.4rem;
}

.pace-bar-row .pace-label {
    font-size: var(--font-xs);
    color: var(--text-muted);
    text-align: right;
}

.pace-bar-wrapper {
    height: 16px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.pace-bar-wrapper .pace-bar {
    height: 100%;
    border-radius: var(--radius-sm);
    transition: width var(--transition-fast);
    min-width: 2px;
}

.pace-bar-row .pace-km {
    font-size: var(--font-xs);
    color: var(--text-muted);
    font-family: var(--font-body);
    text-align: right;
}

.pace-bar-row .pace-zone-name {
    font-size: var(--font-xs);
    font-family: var(--font-mono);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.pace-bar-row .pace-percent {
    font-size: var(--font-sm);
    color: var(--text);
    font-family: var(--font-body);
    font-weight: 500;
}

.pace-classification {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    background: var(--bg);
    border-radius: 0;
    border: var(--card-border);
}

.classification-label {
    font-size: var(--font-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
}

.classification-value {
    font-family: var(--font-body);
    font-size: var(--font-lg);
    font-weight: 500;
    color: var(--text);
}

.classification-detail {
    font-size: var(--font-xs);
    color: var(--text);
    margin: var(--space-xs) 0 0 0;
    line-height: 1.4;
}

.classification-detail strong {
    color: var(--primary);
}

@media (max-width: 768px) {
    .week-zone-analysis {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .week-analysis-inner {
        padding: var(--space-md);
    }

    .week-analysis-header {
        padding: var(--space-sm) var(--space-md);
    }

    .zone-card-content {
        flex-direction: column;
        align-items: center;
    }

    .hr-zone-legend {
        width: 100%;
    }

    .zone-legend-item {
        grid-template-columns: 8px 50px 1fr auto auto;
    }

    .zone-legend-item .zone-bpm {
        display: none;
    }
}

/* ===== Research Insights Section ===== */
.research-insights-section {
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.research-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.research-header i {
    color: var(--text-muted);
    font-size: var(--icon-md);
}

.research-header span {
    font-family: var(--font-body);
    font-size: var(--font-md);
    font-weight: 500;
    color: var(--text);
    letter-spacing: 0.5px;
}

.research-insights-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.research-insight-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    padding: var(--space-md);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
}

.insight-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 0;
    flex-shrink: 0;
    margin-top: 4px;
}

.research-insight-item.success .insight-status-dot,
.research-insight-item.optimal .insight-status-dot {
    background: var(--phase-done);
}

.research-insight-item.warning .insight-status-dot,
.research-insight-item.caution .insight-status-dot {
    background: var(--warning);
}

.research-insight-item.info .insight-status-dot {
    background: var(--info);
}

.research-insight-item.needs-attention .insight-status-dot,
.research-insight-item.error .insight-status-dot {
    background: var(--error);
}

.insight-content {
    flex: 1;
    min-width: 0;
}

.research-insight-item strong {
    color: var(--text);
}

/* ===== Metabolic Efficiency Section ===== */
.metabolic-efficiency-section {
    margin-top: var(--space-xl);
}

.efficiency-meters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
}

.efficiency-meter {
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    border: 1px solid var(--border-light);
}

.meter-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.meter-header i {
    color: var(--text-muted);
    font-size: var(--icon-md);
}

.meter-header span {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text);
}

.meter-bar-container {
    height: 8px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: var(--space-md);
}

.meter-bar {
    height: 100%;
    border-radius: var(--radius-sm);
    transition: width var(--transition-fast);
}

/* Swiss style - flat zone colors, no gradients */
.meter-bar.excellent {
    background: var(--zone-2);
}

.meter-bar.good {
    background: var(--zone-3);
}

.meter-bar.needs-work {
    background: var(--accent);
}

.meter-details {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.meter-score {
    font-family: var(--font-body);
    font-size: var(--font-xl);
    font-weight: 600;
    color: var(--text);
    min-width: 50px;
}

.meter-insight {
    font-size: var(--font-sm);
    color: var(--text-muted);
    line-height: 1.5;
}

.elevation-meter .meter-header i {
    color: var(--text-muted);
}

.research-insight-item .insight-title {
    margin-bottom: var(--space-xs);
}

.research-insight-item .insight-title strong {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text);
}

.research-insight-item p {
    margin: 0 0 var(--space-xs) 0;
    font-size: var(--font-sm);
    line-height: 1.5;
    color: var(--text-secondary);
}

.research-insight-item .insight-citation {
    font-size: var(--font-xs);
    color: var(--text-muted);
    font-style: italic;
}

/* ===== Polarization Meter ===== */
.polarization-meter {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 0;
    padding: var(--space-lg);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.polarization-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xs);
}

.polarization-description {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-md);
    line-height: 1.4;
}

.polarization-header span:first-child {
    font-size: var(--font-sm);
    color: var(--text);
    font-weight: 500;
}

.polarization-stacked-bar-wrapper {
    position: relative;
    margin-bottom: var(--space-lg);
    overflow: hidden;
}

.polarization-stacked-bar {
    display: flex;
    height: 10px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.pol-bar-segment {
    height: 100%;
    transition: width var(--transition-fast);
}

.pol-bar-segment.low {
    background: var(--info);
}

.pol-bar-segment.mid {
    background: var(--warning);
}

.pol-bar-segment.high {
    background: var(--error);
}

.pol-bar-marker {
    position: absolute;
    top: -2px;
    width: 2px;
    height: 14px;
    background: var(--text);
    border-radius: 0;
    opacity: 0.6;
}

.polarization-breakdown {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.pol-zone {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: var(--bg);
}

.pol-label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.pol-label::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 0;
    flex-shrink: 0;
}

.pol-zone.low .pol-label::before {
    background: var(--pol-low);
}

.pol-zone.mid .pol-label::before {
    background: var(--pol-mid);
}

.pol-zone.high .pol-label::before {
    background: var(--pol-high);
}

.pol-value {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-body);
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--text);
}

.pol-indicator {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin-right: 6px;
}

/* ===== Week-by-Week Progression ===== */
.week-progression-section {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border);
}

.week-progression-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text);
    margin-bottom: var(--space-lg);
}

.week-progression-header i {
    color: var(--text-muted);
    font-size: var(--font-xs);
}

.week-progression-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-md);
}

.week-progression-card.no-data {
    opacity: 0.6;
}

.week-progression-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.week-progression-label {
    font-weight: 600;
    font-size: var(--font-sm);
    color: var(--text);
    min-width: 55px;
}

.week-progression-dates {
    font-size: var(--font-xs);
    color: var(--text-muted);
    flex: 1;
}

.week-progression-badge {
    font-size: var(--font-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 0;
    white-space: nowrap;
}

.week-progression-badge.on-track {
    color: var(--status-on-track);
    background: color-mix(in srgb, var(--status-on-track) 12%, transparent);
}

.week-progression-badge.slightly-under {
    color: var(--status-slightly-under);
    background: color-mix(in srgb, var(--status-slightly-under) 12%, transparent);
}

.week-progression-badge.behind {
    color: var(--status-behind);
    background: color-mix(in srgb, var(--status-behind) 12%, transparent);
}

.week-progression-badge.pending,
.week-progression-badge.in-progress {
    color: var(--text-muted);
    background: var(--bg);
}

.week-progression-metrics {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.week-progression-metrics.compact {
    opacity: 0.8;
}

.week-metric {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: var(--font-sm);
    line-height: 1.4;
}

.week-metric-label {
    color: var(--text-muted);
    min-width: 80px;
    flex-shrink: 0;
}

.week-metric-value {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.week-metric-delta {
    font-size: var(--font-xs);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: var(--space-sm);
}

.week-metric-delta i {
    font-size: 0.6rem;
}

.week-metric-delta.positive {
    color: var(--status-on-track);
}

.week-metric-delta.negative {
    color: var(--status-behind);
}

.week-metric-delta.neutral {
    color: var(--text-muted);
}

/* Week Progression Zone Bar — uses same view-zone-bar as polarization */
.week-progression-zone-bar {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-light);
}

.week-progression-zone-bar .zone-bar-title {
    font-size: var(--font-xs);
    margin-bottom: 2px;
}

.week-progression-zone-bar .view-zone-bar {
    margin: var(--space-xs) 0;
}

.week-progression-zone-bar .view-zone-legend {
    margin-top: 2px;
    margin-bottom: 0;
}

/* Week Intensity Summary — contextual harder/easier/stable label */
.week-intensity-summary {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-xs);
    border-left: 3px solid var(--text-muted);
}

.week-intensity-label {
    font-weight: 600;
    white-space: nowrap;
}

.week-intensity-detail {
    color: var(--text-secondary);
}

.week-intensity-summary.harder {
    border-left-color: var(--zone-4);
}

.week-intensity-summary.harder .week-intensity-label {
    color: var(--zone-4);
}

.week-intensity-summary.easier {
    border-left-color: var(--zone-2);
}

.week-intensity-summary.easier .week-intensity-label {
    color: var(--zone-2);
}

.week-intensity-summary.stable {
    border-left-color: var(--text-muted);
}

.week-intensity-summary.stable .week-intensity-label {
    color: var(--text-muted);
}

.week-progression-insight {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--bg-elevated);
    border-left: 3px solid var(--text-muted);
    border-radius: 0;
}

.week-progression-insight p {
    margin: 0 0 8px 0;
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

.week-progression-insight p:last-child {
    margin-bottom: 0;
}

/* ===== Week Ahead Insight ===== */
.week-ahead-insight {
    background: var(--info-bg-dim);
    border: 1px solid var(--info-bg);
    border-radius: 0;
    padding: var(--space-md);
    margin-top: var(--space-md);
}

.week-ahead-insight i {
    color: var(--pol-low);
    margin-right: var(--space-sm);
}

.week-ahead-insight span {
    font-size: var(--font-sm);
    color: var(--text);
    line-height: 1.5;
}

/* ===== Polarization Status Classes ===== */
.polarization-optimal {
    color: var(--pol-optimal) !important;
}

.polarization-moderate {
    color: var(--pol-mid) !important;
}

.polarization-warning {
    color: var(--pol-high) !important;
}

/* Research Insights Responsive */
@media (max-width: 768px) {
    .research-insights-section {
        padding: var(--space-md);
    }

    .polarization-breakdown {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }

    .pol-zone {
        padding: var(--space-xs) var(--space-sm);
    }
}

@media (max-width: 480px) {
    .research-insight-item {
        padding: var(--space-sm);
        font-size: var(--font-xs);
    }
}

/* Toggle Setting */
.toggle-setting {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.toggle-label {
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text);
}

.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border);
    transition: background-color var(--transition-fast);
    border-radius: 0;
}

.toggle-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: transform var(--transition-fast);
    border-radius: 0;
    box-shadow: none;
    will-change: transform;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--accent);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

/* Theme toggle setting */
.theme-setting {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--space-md);
}

.theme-setting .toggle-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.theme-setting .toggle-label i {
    color: var(--accent);
    width: 16px;
    text-align: center;
}

/* Privacy toggle setting */
.privacy-setting {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--space-md);
}

.privacy-setting .toggle-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.privacy-setting .toggle-label i {
    color: var(--accent);
    width: 16px;
    text-align: center;
}

/* Privacy blur — gaussian overlay on all maps */
html[data-privacy-blur="true"] .leaflet-container {
    filter: blur(15px);
    -webkit-filter: blur(15px);
}

.athlete-settings-form .data-btn {
    width: 100%;
    margin-top: var(--space-sm);
}

/* Export hint text */
.export-hint {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin: var(--space-sm) 0 0 0;
    line-height: 1.4;
    padding: 0 var(--space-sm);
}

/* Menu Accordions - accordion-js customization */
.menu-accordion-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.menu-accordion-container .ac {
    margin: 0;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.menu-accordion-container .ac:has(.language-dropdown.open) {
    overflow: visible;
}

.menu-accordion-container .ac:has(.language-dropdown.open) .ac-panel {
    overflow: visible;
}

.menu-accordion-container .ac-header {
    margin: 0;
}

.menu-accordion-container .ac-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--font-lg);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.menu-accordion-container .ac-trigger:hover {
    background: var(--secondary);
}

.menu-accordion-container .ac-trigger i {
    color: var(--primary);
    font-size: var(--icon-md);
}

.menu-accordion-container .ac-trigger::after {
    content: '\f078' !important;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--text-muted);
    font-size: var(--font-sm);
    transition: transform var(--transition-fast);
}

.menu-accordion-container .ac.is-active .ac-trigger::after {
    transform: rotate(180deg);
}

.menu-accordion-container .ac.is-active .ac-trigger {
    background: var(--bg);
}

.menu-accordion-container .ac-panel {
    background: var(--bg);
    /* accordion-js handles height transitions internally */
}

.menu-accordion-container .ac-text {
    padding: var(--space-lg);
}

.accordion-subtitle {
    font-family: var(--font-body);
    font-size: var(--font-md);
    font-weight: 500;
    color: var(--primary);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.accordion-subtitle:not(:first-child) {
    margin-top: var(--space-lg);
}

.accordion-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--space-lg) 0;
}

/* Athlete Settings Form in Accordion */
.athlete-settings-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.setting-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.setting-row + .setting-row {
    margin-top: var(--space-md);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-light);
}

.setting-row label {
    font-size: var(--font-md);
    font-weight: 500;
    color: var(--text);
}

.setting-input-group {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.setting-input {
    flex: 1;
    padding: var(--input-padding);
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    color: var(--input-text);
    font-size: var(--input-font-size);
    font-family: var(--input-font-family);
    font-weight: var(--input-font-weight);
    transition: border-color var(--transition-fast);
}

.setting-input:hover {
    border-color: var(--input-border-hover);
}

.setting-input:focus {
    outline: none;
    border-color: var(--input-border-focus);
}

.setting-unit {
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.setting-hint {
    font-size: var(--font-xs);
    color: var(--text-muted);
    line-height: 1.4;
}

/* ========================================
   ROUTES PAGE STYLES
   ======================================== */

/* Routes Page Container (Full Page) */
.routes-page-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-elevated);
    z-index: 2000; /* Slide-in panels layer */
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.routes-page-container.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.routes-page-header {
    position: sticky;
    top: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: var(--space-md) var(--space-xl);
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    z-index: 500;
}

.routes-back-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.routes-back-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.routes-page-title {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text);
    margin: 0;
}

.routes-page-title i {
    margin-right: var(--space-sm);
}

.routes-page {
    padding: var(--space-xl);
    max-width: 1400px;
    margin: 0 auto;
}

/* Stats Bar */
.routes-stats-bar {
    display: flex;
    justify-content: center;
    gap: var(--space-2xl);
    padding: var(--space-lg);
    background: var(--secondary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
}

.routes-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.routes-stat-value {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
}

.routes-stat-label {
    font-size: var(--font-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Tab Navigation */
.routes-tabs {
    display: flex;
    gap: var(--space-xs);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-lg);
}

.routes-tab {
    padding: var(--space-sm) var(--space-lg);
    background: none;
    border: none;
    font-size: var(--font-md);
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
}

.routes-tab:hover {
    color: var(--text);
}

.routes-tab.active {
    color: var(--text);
    border-bottom-color: var(--text);
    font-weight: 500;
}

.routes-tab-content {
    display: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.routes-tab-content.active {
    display: block;
    opacity: 1;
}

/* Segment Tabs (inside route detail modal) */
.segment-tabs {
    display: flex;
    gap: var(--space-xs);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-md);
}

.segment-tab {
    padding: var(--space-sm) var(--space-md);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: var(--font-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.segment-tab:hover {
    color: var(--text);
}

.segment-tab.active {
    color: var(--text);
    border-bottom-color: var(--accent);
    font-weight: 500;
}

.segment-tab i {
    font-size: var(--font-xs);
}

.segment-tab-content {
    display: none;
}

.segment-tab-content.active {
    display: block;
}

/* Routes Grid */
.routes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-lg);
}

/* Routes Loading State */
.routes-loading-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl) var(--space-lg);
    text-align: center;
    color: var(--text-secondary);
}

.routes-loading-state .loading-spinner {
    font-size: var(--font-4xl);
    color: var(--primary);
    margin-bottom: var(--space-lg);
}

.routes-loading-state .loading-spinner i {
    animation: spin 1.5s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.routes-loading-state p {
    font-size: var(--text-base);
}

.route-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: var(--space-lg);
}

.route-card:hover {
    box-shadow: none;
    transform: translateY(-2px);
}

.route-card.highlight {
    animation: highlightPulse 0.5s ease-out 3;
    box-shadow: none;
}

@keyframes highlightPulse {
    0%, 100% {
        box-shadow: none;
    }
    50% {
        box-shadow: none;
    }
}

.route-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.route-card-date {
    font-size: var(--font-md);
    font-weight: 500;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.strava-badge {
    color: var(--strava);
    font-size: var(--font-sm);
}

.route-card-distance {
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--text);
}

.route-card-analysis {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.route-analysis-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.route-analysis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.route-analysis-label {
    font-size: var(--font-sm);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.route-analysis-label i {
    font-size: var(--font-xs);
}

.route-analysis-bar {
    height: 6px;
    background: var(--border-light);
    border-radius: var(--space-xs);
    overflow: hidden;
}

.route-analysis-fill {
    height: 100%;
    border-radius: var(--space-xs);
    transition: width var(--transition-fast);
}

.route-analysis-value {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
}

.route-analysis-value strong {
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--text);
}

.route-analysis-rating {
    font-size: var(--font-xs);
}

/* Route Card Map Thumbnail */
.route-card-map {
    height: 120px;
    background: var(--bg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    overflow: hidden;
}

/* Route Card Segment Bar */
.route-card-segments {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: var(--space-sm);
    background: var(--border-light);
}

.segment-bar-section {
    height: 100%;
    min-width: 3px;
    transition: width var(--transition-fast);
}

/* Route Card Terrain Breakdown Mini */
.route-terrain-breakdown {
    margin-top: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-light);
}

.terrain-bar-mini {
    display: flex;
    height: 8px;
    border-radius: var(--space-xs);
    overflow: hidden;
    background: var(--border-light);
    margin-bottom: var(--space-sm);
}

.terrain-legend-mini {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.terrain-tag {
    font-size: var(--font-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.terrain-tag.power {
    background: var(--error-bg-dim);
    color: var(--error);
}

.terrain-tag.hill {
    background: var(--warning-bg-dim);
    color: var(--warning);
}

.terrain-tag.flat {
    background: var(--success-bg-dim);
    color: var(--success);
}

.terrain-tag.regular {
    background: var(--overlay-subtle);
    color: var(--text-muted);
}

.terrain-insight-mini {
    font-size: var(--font-xs);
    color: var(--text-muted);
    font-style: italic;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.route-card-stats {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.route-card-stat {
    font-size: var(--font-md);
    font-weight: 500;
    color: var(--text);
}

.route-card-stat i {
    margin-right: var(--space-xs);
    color: var(--text-muted);
}

.route-card-badges {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.route-badge {
    font-size: var(--font-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.route-badge.power {
    background: var(--zone-5-bg-dim);
    color: var(--zone-5);
}

.route-badge.stride {
    background: var(--zone-4-bg-dim);
    color: var(--zone-4);
}

/* Empty State */
.routes-empty {
    text-align: center;
    padding: var(--space-2xl);
    color: var(--text-muted);
}

.routes-empty i {
    font-size: var(--font-4xl);
    margin-bottom: var(--space-lg);
    opacity: 0.3;
}

/* Best Spots Section */
.best-spots-section {
    margin-bottom: var(--space-2xl);
}

.best-spots-title {
    font-family: var(--font-body);
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-xs);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.best-spots-title i {
    color: var(--accent);
    font-size: var(--font-md);
}

.best-spots-subtitle {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-lg);
}

.spots-list {
    display: flex;
    gap: var(--space-md);
    overflow-x: auto;
    padding-bottom: var(--space-sm);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.spots-list::-webkit-scrollbar {
    height: 6px;
}

.spots-list::-webkit-scrollbar-track {
    background: var(--secondary);
    border-radius: 3px;
}

.spots-list::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.spots-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Spot Cards with Mini Map */
.spot-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    flex-shrink: 0;
    scroll-snap-align: start;
}

.spot-card:hover {
    border-color: var(--text-muted);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.spot-card-map {
    height: 100px;
    background: var(--secondary);
    border-bottom: 1px solid var(--border);
}

.spot-card-body {
    padding: var(--space-md);
}

.spot-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.spot-card-rank {
    font-family: var(--font-mono);
    font-size: var(--font-md);
    font-weight: 700;
    opacity: 0.6;
}

.spot-card[data-type="power"] .spot-card-rank {
    color: var(--workout-threshold);
}

.spot-card[data-type="hill"] .spot-card-rank {
    color: var(--success);
}

.spot-card[data-type="flat"] .spot-card-rank {
    color: var(--accent);
}

.spot-card[data-type="trail"] .spot-card-rank {
    color: var(--accent);
}

.spot-card-location {
    font-size: var(--font-xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.spot-card-stats {
    display: flex;
    gap: var(--space-md);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.spot-stat-main {
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--text);
}

.spot-stat {
    color: var(--text-muted);
}

.no-spots {
    color: var(--text-muted);
    font-size: var(--font-sm);
    padding: var(--space-lg);
    text-align: center;
    background: var(--secondary);
    border-radius: var(--radius-md);
}

/* Legacy spot-item for backward compatibility */
.spot-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.spot-item:hover {
    background: var(--bg-elevated);
}

/* Discover Tab - Trail Results (horizontal scroll, same as .spots-list) */
.trail-results {
    display: flex;
    gap: var(--space-md);
    overflow-x: auto;
    padding: var(--space-lg) 0 var(--space-sm) 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.trail-results::-webkit-scrollbar {
    height: 6px;
}

.trail-results::-webkit-scrollbar-track {
    background: var(--secondary);
    border-radius: 3px;
}

.trail-results::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.trail-results::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Discover Tab - Categorized Trail Results */
.trail-results:has(.discover-category) {
    display: block;
    overflow-x: visible;
    scroll-snap-type: none;
}

.discover-category {
    margin-bottom: var(--space-2xl);
}

.discover-category:last-child {
    margin-bottom: 0;
}

/* ============================================
   RUNNING RESOURCES PAGE
   ============================================ */

.resources-page-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-elevated);
    z-index: 2000; /* Slide-in panels layer */
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.resources-page-container.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.resources-page-header {
    position: sticky;
    top: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    z-index: 500;
}

.resources-back-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.resources-back-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.resources-page-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.02em;
}

.resources-page-title i {
    display: none;
}

.resources-page {
    padding: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

/* Resources intro text */
.resources-intro {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}

.resources-intro .lab {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.resources-intro p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 500px;
}

/* ============================================
   HELP PAGE
   ============================================ */

.help-page-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-elevated);
    z-index: 2000;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.help-page-container.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.help-page-header {
    position: sticky;
    top: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    z-index: 500;
}

.help-back-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.help-back-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.help-page-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: var(--font-2xl);
    font-weight: 400;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.02em;
}

.help-page {
    padding: var(--space-xl);
    max-width: 900px;
    margin: 0 auto;
}

.help-intro {
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--border);
}

.help-intro .lab {
    font-size: var(--font-sm);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--space-sm);
}

.help-intro p {
    font-size: var(--font-xl);
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 500px;
}

/* Help sections */
.help-sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

.help-section {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg);
}

.help-section-header {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-lg);
    align-items: center;
}

.help-section-icon {
    width: 80px;
    flex-shrink: 0;
}

.help-section-icon i {
    font-size: var(--font-h2);
    color: var(--text-muted);
}

.help-section-title-group {
    flex: 1;
    min-width: 0;
}

.help-section-title {
    font-size: var(--font-h3);
    font-weight: 500;
    color: var(--text);
    margin: 0 0 var(--space-xs) 0;
}

.help-section-desc {
    font-size: var(--font-sm);
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

.help-section-hero {
    width: 100%;
}

/* Rive animation placeholders */
.rive-placeholder {
    background: var(--secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.rive-1x1 {
    aspect-ratio: 1 / 1;
}

.rive-4x3 {
    aspect-ratio: 4 / 3;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
}

@media (max-width: 600px) {
    .help-page-header {
        padding: var(--space-md);
        gap: var(--space-md);
    }

    .help-page {
        padding: var(--space-md);
    }

    .help-page-title {
        font-size: var(--font-h2);
    }

    .help-section-header {
        padding: var(--space-md);
        gap: var(--space-md);
    }

    .help-section-icon {
        width: 60px;
    }

    .help-section-icon i {
        font-size: var(--font-h2);
    }

    .help-section-title {
        font-size: var(--font-h4);
    }
}

/* Help accordion sub-sections */
.help-sub-sections {
    border-top: 1px solid var(--border);
}

.help-accordion {
    border-bottom: 1px solid var(--border);
}

.help-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    transition: background var(--transition-fast);
}

.help-accordion__header:hover {
    background: var(--secondary);
}

.help-accordion__title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-sm);
    font-weight: 600;
}

.help-accordion__title i {
    color: var(--text-muted);
    width: 18px;
    text-align: center;
}

.help-accordion__chevron {
    color: var(--text-muted);
    font-size: var(--font-xs);
    transition: transform var(--transition-fast);
}

.help-accordion.is-open .help-accordion__chevron {
    transform: rotate(180deg);
}

.help-accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-fast);
}

.help-accordion.is-open .help-accordion__content {
    max-height: 500px;
}

.help-accordion__inner {
    padding: 0 var(--space-md) var(--space-md) calc(18px + var(--space-sm) + var(--space-md));
}

.help-accordion__inner p {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 600px) {
    .help-accordion__header {
        padding: var(--space-xs) var(--space-sm);
    }

    .help-accordion__title {
        font-size: var(--font-xs);
    }

    .help-accordion__inner {
        padding: 0 var(--space-sm) var(--space-sm) calc(18px + var(--space-sm) + var(--space-sm));
    }

    .help-accordion__inner p {
        font-size: var(--font-xs);
    }
}

/* ============================================
   WORKOUTS LIBRARY PAGE
   ============================================ */

.workouts-page-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-elevated);
    z-index: 2000;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.workouts-page-container.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.workouts-page-header {
    position: sticky;
    top: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    z-index: 500;
}

.workouts-back-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.workouts-back-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.workouts-page-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.02em;
}

.workouts-page-title i {
    display: none;
}

.workouts-page {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Workouts Tabs */
.workouts-tabs {
    display: flex;
    gap: var(--space-xs);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-lg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.workouts-tabs::-webkit-scrollbar {
    display: none;
}

.workouts-tab {
    padding: var(--space-sm) var(--space-lg);
    background: none;
    border: none;
    font-size: var(--font-md);
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.workouts-tab:hover {
    color: var(--text);
}

.workouts-tab.active {
    color: var(--text);
    border-bottom-color: var(--text);
    font-weight: 500;
}

.workouts-tab i {
    margin-right: 0.3rem;
}

.workouts-tab-content {
    display: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.workouts-tab-content.active {
    display: block;
    opacity: 1;
}

/* Workout Library Grid */
.workout-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-md);
}

/* Workout Library Card */
.workout-library-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    transition: border-color var(--transition-fast);
}

.workout-library-card:hover {
    border-color: var(--text-muted);
}

.workout-library-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.workout-library-header .workout-type {
    flex-shrink: 0;
    margin-bottom: 0;
}

.workout-library-name {
    font-weight: 600;
    font-size: var(--font-h4);
    color: var(--text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workout-favourite-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: var(--font-h4);
    padding: var(--space-xs);
    transition: color var(--transition-fast), transform var(--transition-fast);
    flex-shrink: 0;
}

.workout-favourite-btn:hover {
    color: var(--warning);
    transform: scale(1.15);
}

.workout-favourite-btn.active {
    color: var(--warning);
}

.workout-library-body {
    margin-bottom: var(--space-sm);
}

.workout-library-body .workout-structure {
    font-size: var(--font-xl);
    color: var(--text-secondary);
    line-height: 1.6;
}

.workout-library-body .workout-line {
    margin-bottom: 2px;
}

.workout-library-body .workout-label {
    font-weight: 600;
    color: var(--text);
    font-size: var(--font-lg);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.workout-library-meta {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
    flex-wrap: wrap;
}

.workout-library-meta-item {
    font-size: var(--font-lg);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.workout-library-meta-item i {
    font-size: var(--font-md);
}

.workout-library-about {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border);
}

.workout-library-about p {
    font-size: var(--font-xl);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Custom Workout Actions (edit/delete) */
.workout-library-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
}

.workout-action-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.workout-action-btn:hover {
    border-color: var(--text-muted);
    color: var(--text);
}

.workout-action-btn.delete:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Create New Workout Card */
.create-workout-card {
    border-style: dashed;
    border-color: var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.create-workout-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-xl) var(--space-md);
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: var(--font-xl);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.create-workout-trigger:hover {
    color: var(--text);
}

.create-workout-trigger i {
    font-size: var(--font-h2);
}

/* Create Workout Form */
.create-workout-form {
    padding: 0;
}

.create-field {
    margin-bottom: var(--space-md);
}

.create-field label {
    display: block;
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-xs);
}

.create-input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--font-xl);
    font-family: inherit;
    transition: border-color var(--transition-fast);
    box-sizing: border-box;
}

.create-input:focus {
    outline: none;
    border-color: var(--text-muted);
}

.create-textarea {
    resize: vertical;
    min-height: 2.5rem;
}

.create-field-row {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.create-field-row .create-field {
    flex: 1;
    margin-bottom: 0;
}

.create-field-narrow {
    flex: 0 0 70px !important;
}

/* Multi-interval row controls */
.create-interval-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.create-interval-row .create-field-row {
    margin-bottom: 0;
    align-items: flex-end;
}

.remove-interval-row-btn {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: all var(--transition-fast);
    margin-bottom: 0;
}

.remove-interval-row-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--bg-elevated);
}

.add-interval-row-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    background: none;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: 0.75rem;
    width: 100%;
    justify-content: center;
}

.add-interval-row-btn:hover {
    border-color: var(--text-muted);
    color: var(--text);
    background: var(--bg-elevated);
}

/* Interval mode toggle (Time / Distance) */
.interval-mode-toggle {
    display: flex;
    gap: 0;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.interval-mode-btn {
    flex: 1;
    padding: 0.35rem 0.75rem;
    background: none;
    border: none;
    border-right: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    transition: all var(--transition-fast);
}

.interval-mode-btn:last-child {
    border-right: none;
}

.interval-mode-btn:hover {
    background: var(--bg-elevated);
    color: var(--text);
}

.interval-mode-btn.active {
    background: var(--text);
    color: var(--bg);
    font-weight: 600;
}

.interval-mode-btn i {
    font-size: 0.7rem;
}

.create-workout-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.create-workout-save {
    flex: 1;
    padding: 0.5rem 1rem;
    background: var(--text);
    color: var(--bg);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.create-workout-save:hover {
    opacity: 0.85;
}

.create-workout-cancel {
    padding: 0.5rem 1rem;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.create-workout-cancel:hover {
    border-color: var(--text-muted);
    color: var(--text);
}

/* Empty State */
.workouts-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

.workouts-empty-state i {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    display: block;
}

.workouts-empty-state p {
    margin: 0.25rem 0;
    font-size: 0.9rem;
}

.workouts-empty-hint {
    font-size: 0.8rem !important;
    color: var(--text-muted);
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .workouts-page-header {
        padding: 1rem;
        gap: 0.75rem;
    }

    .workouts-page-title {
        font-size: 1.25rem;
    }

    .workouts-page {
        padding: 1rem;
    }

    .workouts-tabs {
        padding: 0 1rem;
    }

    .workouts-tab {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--font-sm);
    }

    .workout-library-grid {
        grid-template-columns: 1fr;
    }

    .create-field-row {
        flex-direction: column;
        gap: 0;
    }

    .create-field-narrow {
        flex: 1 !important;
    }

    .create-interval-row .create-field-row {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .create-interval-row .create-field-row .create-field {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 0;
    }

    .create-interval-row .create-field-row .create-field-narrow {
        flex: 0 0 60px !important;
    }

    .remove-interval-row-btn {
        align-self: flex-end;
        margin-bottom: 0.75rem;
    }
}

/* Calculator Cards Grid - Landing Page Style */
.calculator-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}

.calculator-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 180px;
    padding: 1.5rem;
    background: var(--bg-elevated);
    border: none;
    cursor: pointer;
    text-align: left;
    width: 100%;
    overflow: hidden;
    transition: all var(--transition-fast);
}

/* Gradient backgrounds for each card type */
.calculator-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: 0;
}

.calculator-card[data-calculator="pace"]::before {
    background: linear-gradient(135deg, rgba(108, 191, 176, 0.15) 0%, transparent 60%);
}
.calculator-card[data-calculator="fueling"]::before {
    background: linear-gradient(135deg, rgba(212, 168, 67, 0.15) 0%, transparent 60%);
}
.calculator-card[data-calculator="hydration"]::before {
    background: linear-gradient(135deg, rgba(46, 158, 130, 0.15) 0%, transparent 60%);
}
.calculator-card[data-calculator="hrzones"]::before {
    background: linear-gradient(135deg, rgba(255, 45, 45, 0.15) 0%, transparent 60%);
}
.calculator-card[data-calculator="vo2max"]::before {
    background: linear-gradient(135deg, rgba(108, 191, 176, 0.15) 0%, transparent 60%);
}
.calculator-card[data-calculator="agegrade"]::before {
    background: linear-gradient(135deg, rgba(212, 168, 67, 0.15) 0%, transparent 60%);
}
.calculator-card[data-calculator="mental"]::before {
    background: linear-gradient(135deg, rgba(255, 45, 45, 0.12) 0%, transparent 60%);
}

.calculator-card:hover::before {
    opacity: 1;
}

.calculator-card:hover {
    background: var(--secondary);
}

.calc-card-icon {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text-muted);
    font-size: var(--font-h2);
    flex-shrink: 0;
    transition: all var(--transition-fast);
    z-index: 1;
}

.calculator-card:hover .calc-card-icon {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(255, 45, 45, 0.08);
}

.calc-card-content {
    position: relative;
    z-index: 1;
}

.calc-card-content h3 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text);
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.calc-card-content p {
    font-size: 0.7rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    margin: 0;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.calc-card-arrow {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    color: var(--text-light);
    font-size: 0.75rem;
    transition: all var(--transition-fast);
    opacity: 0;
    transform: translateX(-8px);
    z-index: 1;
}

.calculator-card:hover .calc-card-arrow {
    color: var(--accent);
    opacity: 1;
    transform: translateX(0);
}

/* Calculator card as link */
a.calculator-card-link {
    text-decoration: none;
    color: inherit;
}

/* Mobile: single column */
@media (max-width: 600px) {
    .calculator-grid {
        grid-template-columns: 1fr;
    }
    .calculator-card {
        min-height: 140px;
    }
    .calc-card-content h3 {
        font-size: var(--font-h2);
    }
}

/* Calculator Modal */
.calculator-modal-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-elevated);
    z-index: 2000; /* Slide-in panels layer */
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.calculator-modal-container.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Calculator panel uses standard .modal-header with sticky positioning */
.calculator-panel-header {
    position: sticky;
    top: 0;
    padding: var(--space-md) var(--space-xl);
    margin-bottom: 0;
    padding-bottom: var(--space-md);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    z-index: 10;
}

.calculator-modal-content {
    padding: var(--space-xl);
    max-width: 800px;
    margin: 0 auto;
}

/* Calculator Section Styles */
.calc-section {
    margin-bottom: var(--space-xl);
}

.calc-section-title {
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--text);
    margin: 0 0 var(--space-md) 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.calc-section-title i {
    color: var(--accent);
}

/* Science Box */
.science-box {
    background: var(--info-bg-dim);
    border: 1px solid var(--info-bg);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.science-box-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.science-box-header i {
    color: var(--accent);
}

.science-box-header h4 {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--accent);
    margin: 0;
}

.science-box p {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-sm) 0;
    line-height: 1.6;
}

.science-box p:last-child {
    margin-bottom: 0;
}

.science-formula {
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    background: var(--secondary);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    display: inline-block;
    margin: var(--space-sm) 0;
}

.science-citation {
    font-size: var(--font-xs);
    color: var(--text-muted);
    font-style: italic;
    margin-top: var(--space-sm);
}

/* Calculator Input Grid */
.calc-input-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.calc-input-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.calc-input-group label {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-secondary);
}

.calc-input-group input {
    padding: var(--input-padding);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    font-size: var(--input-font-size);
    font-family: var(--input-font-family);
    font-weight: var(--input-font-weight);
    background: var(--input-bg);
    color: var(--input-text);
}

.calc-input-group .custom-select {
    min-width: 0;
}

.calc-input-group .custom-select-trigger {
    height: auto;
    padding: var(--space-md);
    padding-right: calc(var(--space-md) + 16px);
    font-size: var(--font-sm);
}

.calc-input-row {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

.calc-input-row input {
    flex: 1;
}

.calc-input-row .custom-select {
    width: 100px;
    min-width: 100px;
}

.calc-input-row .custom-select-trigger {
    height: auto;
    padding: var(--space-sm) var(--space-md);
    padding-right: calc(var(--space-md) + 16px);
    font-size: var(--font-sm);
}

/* Calculator Button - Swiss style */
.calc-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.5rem 1.3rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.calc-btn-primary:hover {
    background: var(--accent-dark);
}

/* Calculator Results */
.calc-results {
    display: none;
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--border);
}

.calc-results.active {
    display: block;
}

.calc-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.calc-result-card {
    background: var(--secondary);
    padding: var(--space-md);
    border: 1px solid var(--border);
    border-radius: 0;
    text-align: center;
}

.calc-result-value {
    font-family: var(--font-mono);
    font-size: var(--font-xl);
    font-weight: 600;
    color: var(--text);
    display: block;
}

.calc-result-label {
    font-size: var(--font-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* HR Zone Colors */
.zone-1 { background: var(--zone-1-bg); border-left: 3px solid var(--zone-1); }
.zone-2 { background: var(--zone-2-bg); border-left: 3px solid var(--zone-2); }
.zone-3 { background: var(--zone-3-bg); border-left: 3px solid var(--zone-3); }
.zone-4 { background: var(--zone-4-bg); border-left: 3px solid var(--zone-4); }
.zone-5 { background: var(--zone-5-bg); border-left: 3px solid var(--zone-5); }

.zone-card {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
}

.zone-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xs);
}

.zone-name {
    font-weight: 600;
    font-size: var(--font-sm);
}

.zone-range {
    font-family: var(--font-mono);
    font-size: var(--font-md);
    font-weight: 600;
}

.zone-desc {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

/* Fuel Schedule */
.fuel-schedule {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.fuel-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--secondary);
    border-radius: var(--radius-md);
    min-width: 70px;
}

.fuel-km {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: var(--font-md);
    color: var(--text);
}

.fuel-desc {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

/* HR Zones List */
.hr-zones-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

@media (max-width: 600px) {
    .calculator-grid {
        grid-template-columns: 1fr;
    }

    .calculator-modal-content {
        padding: var(--space-md);
    }

    .calc-input-grid {
        grid-template-columns: 1fr;
    }
}

/* Resource Card */
.resource-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.resource-card-header {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border);
}

.resource-card-header h2 {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 var(--space-xs) 0;
}

.resource-card-header h2 i {
    margin-right: var(--space-sm);
    color: var(--accent);
}

.resource-card-desc {
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin: 0;
}

/* Pace Calculator */
.pace-calculator {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.pace-calc-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

.pace-calc-input-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.pace-calc-input-group label {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-secondary);
}

.pace-calc-distance {
    display: flex;
    gap: var(--space-sm);
}

.pace-calc-distance input {
    flex: 1;
    padding: var(--space-md);
    border: 1px solid var(--border);
    border-radius: 0;
    font-size: var(--font-sm);
    font-family: var(--font-mono);
    background: var(--bg);
    color: var(--text);
}

.pace-calc-distance select {
    width: 80px;
}

.pace-calc-presets {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    margin-top: var(--space-xs);
}

.preset-btn {
    padding: var(--space-xs) var(--space-sm);
    background: var(--secondary);
    border: 1px solid var(--border);
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.preset-btn:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.pace-calc-time {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.pace-calc-time input {
    width: 60px;
    padding: var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--font-md);
    text-align: center;
    background: var(--bg);
}

.time-separator {
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--text-muted);
}

/* Pacing Strategy Section */
.pace-strategy-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.pace-strategy-section > label {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-secondary);
}

.pace-strategy-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.strategy-option {
    cursor: pointer;
}

.strategy-option input {
    display: none;
}

.strategy-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.strategy-option input:checked + .strategy-card {
    border-color: var(--accent);
    background: var(--accent-bg);
}

.strategy-card:hover {
    border-color: var(--text-muted);
}

.strategy-option input:checked + .strategy-card:hover {
    border-color: var(--accent);
}

.strategy-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--font-md);
}

.strategy-option input:checked + .strategy-card .strategy-icon {
    background: var(--accent);
    color: white;
}

.strategy-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.strategy-name {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text);
}

.strategy-desc {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

@media (max-width: 600px) {
    .pace-strategy-options {
        grid-template-columns: 1fr;
    }
}

.pace-calc-btn {
    padding: var(--space-md) var(--space-xl);
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-md);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    align-self: flex-start;
}

.pace-calc-btn:hover {
    background: var(--primary);
}

.pace-calc-btn i {
    margin-right: var(--space-sm);
}

/* Pace Calculator Results */
.pace-calc-results {
    display: none;
    flex-direction: column;
    gap: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border);
}

.pace-calc-results.active {
    display: flex;
}

.pace-result-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.pace-result-item {
    background: var(--secondary);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    text-align: center;
}

.pace-result-value {
    font-family: var(--font-mono);
    font-size: var(--font-xl);
    font-weight: 600;
    color: var(--text);
    display: block;
}

.pace-result-label {
    font-size: var(--font-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Strategy Info Box */
.strategy-info-box {
    background: var(--accent-bg);
    border: 1px solid var(--accent-bg-hover);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.strategy-info-box h4 {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--accent);
    margin: 0 0 var(--space-xs) 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.strategy-info-box p {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Splits Table */
.splits-section h3 {
    font-size: var(--font-md);
    font-weight: 500;
    color: var(--text);
    margin: 0 0 var(--space-md) 0;
}

.splits-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-sm);
}

.splits-table th,
.splits-table td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--border-light);
}

.splits-table th {
    font-weight: 500;
    color: var(--text-muted);
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.splits-table td {
    font-family: var(--font-mono);
    color: var(--text);
}

.splits-table tr:last-child td {
    border-bottom: none;
}

.splits-table .split-number {
    color: var(--text-muted);
}

.splits-table .cumulative {
    color: var(--text-secondary);
}

.splits-table .faster {
    color: var(--success);
}

.splits-table .slower {
    color: var(--warning);
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .pace-calc-inputs {
        grid-template-columns: 1fr;
    }

    .pace-result-summary {
        grid-template-columns: 1fr;
    }

    .resources-page {
        padding: var(--space-md);
    }

    .resource-card {
        padding: var(--space-lg);
    }
}

/* Spot Item Card with Mini Map */
.spot-item-card {
    display: flex;
    background: var(--secondary);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.spot-item-card.loading .spot-item-content {
    opacity: 0;
}

.spot-item-card .spot-item-content {
    transition: opacity var(--transition-fast);
}

.spot-item-card:hover {
    background: var(--bg-elevated);
}

.spot-mini-map {
    width: 120px;
    min-width: 120px;
    min-height: 80px;
    align-self: stretch;
    background: var(--bg);
    position: relative;
}

.spot-item-card.loading .spot-mini-map::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.spot-mini-map .leaflet-container {
    background: var(--bg) !important;
    height: 100% !important;
    width: 100% !important;
}

.spot-mini-map .leaflet-tile-pane {
    opacity: 0.7;
}

.spot-mini-map .leaflet-overlay-pane {
    filter: drop-shadow(0 0 2px rgba(255, 59, 48, 0.5));
}

.spot-item-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
}

.spot-rank {
    font-family: var(--font-body);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-muted);
    width: 30px;
}

.spot-info {
    flex: 1;
}

.spot-gradient {
    font-weight: 600;
    color: var(--text);
}

.spot-details {
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.spot-date {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

/* Discover Section */
.discover-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.discover-controls {
    display: flex;
    align-items: flex-end;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.discover-control-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.discover-control-group label {
    font-size: var(--font-sm);
    color: var(--text-muted);
}

/* Discover Location Input */
.discover-location-group {
    flex: 1;
    min-width: 200px;
    max-width: 350px;
    position: relative;
}

.discover-location-input-wrapper {
    display: flex;
    gap: var(--space-xs);
}

.discover-location-input {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--font-sm);
    font-family: var(--font-body);
}

.discover-location-input:focus {
    outline: none;
    border-color: var(--accent);
}

.discover-location-input::placeholder {
    color: var(--text-muted);
}

.discover-current-location-btn {
    padding: var(--space-sm);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.discover-current-location-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.discover-location-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-top: var(--space-xs);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: var(--shadow-lg);
}

.discover-location-results.active {
    display: block;
}

.discover-location-result {
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    font-size: var(--font-sm);
    color: var(--text);
    border-bottom: 1px solid var(--border);
}

.discover-location-result:last-child {
    border-bottom: none;
}

.discover-location-result:hover {
    background: var(--secondary);
}

.radius-slider-container {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.radius-slider {
    width: 150px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border);
    border-radius: 0;
    outline: none;
}

.radius-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--text);
    border-radius: 0;
    cursor: pointer;
    margin-top: -6px;
}

.radius-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--text);
    border: none;
    border-radius: 0;
    cursor: pointer;
}

.btn-discover {
    padding: var(--space-sm) var(--space-lg);
    background: var(--text);
    color: var(--bg);
    border: none;
    border-radius: 0;
    font-size: var(--font-md);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-discover:hover {
    background: var(--text-secondary);
}

.discover-map-container {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
}

.discover-map {
    width: 100%;
    height: 400px;
    background: var(--bg-elevated) !important;
}

.discover-map .leaflet-container {
    background: var(--bg-elevated) !important;
}

/* Discover center beacon marker */
.discover-beacon-icon {
    background: none !important;
    border: none !important;
}

.discover-beacon-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: var(--text);
    border: 2px solid var(--bg);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.discover-beacon-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid var(--text);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: discover-beacon-pulse 2s ease-out infinite;
    z-index: 1;
}

@keyframes discover-beacon-pulse {
    0% {
        width: 10px;
        height: 10px;
        opacity: 0.8;
    }
    100% {
        width: 40px;
        height: 40px;
        opacity: 0;
    }
}

/* Route Detail Modal */
.route-detail-modal {
    max-width: 900px;
    width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
}

.route-detail-content {
    padding: var(--space-lg);
}

.route-detail-map-container {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-lg);
    border: 1px solid var(--border);
}

.route-detail-map {
    width: 100%;
    height: 350px;
}

.route-no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 350px;
    color: var(--text-muted);
    text-align: center;
    gap: var(--space-md);
}
.route-no-data i {
    font-size: 2.5rem;
    opacity: 0.4;
}
.route-no-data p {
    font-size: 1rem;
    margin: 0;
    color: var(--text-secondary);
}
.route-no-data span {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Spot Detail Modal */
.spot-detail-modal {
    max-width: 600px;
    width: 95vw;
    max-height: 85vh;
    overflow-y: auto;
}

.spot-detail-content {
    padding: var(--space-lg);
}

.spot-detail-map-container {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-lg);
    border: 1px solid var(--border);
}

.spot-detail-map {
    width: 100%;
    height: 300px;
}

.spot-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.spot-stat {
    text-align: center;
    padding: var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.spot-stat-value {
    display: block;
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--text);
}

.spot-stat-label {
    display: block;
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: var(--space-xs);
}

.route-detail-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-2xl);
    padding: var(--space-lg);
    background: var(--secondary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
}

.route-detail-analysis {
    margin-bottom: var(--space-lg);
}

.route-analysis-section {
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--border-light);
}

.route-analysis-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.route-analysis-section:first-child {
    padding-top: 0;
}

.route-analysis-title {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 var(--space-sm) 0;
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.route-analysis-title i {
    color: var(--text-muted);
    font-size: 0.85em;
    opacity: 0.7;
}

.route-analysis-para {
    margin: 0;
    font-size: var(--font-md);
    line-height: 1.7;
    color: var(--text-secondary);
}

.route-analysis-para strong {
    color: var(--text);
    font-weight: 600;
}

.route-detail-analysis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.route-detail-analysis-grid .route-analysis-item {
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.route-detail-analysis-grid .route-terrain-breakdown {
    grid-column: span 2;
}

@media (max-width: 600px) {
    .route-detail-analysis-grid {
        grid-template-columns: 1fr;
    }

    .route-detail-analysis-grid .route-terrain-breakdown {
        grid-column: span 1;
    }
}

/* Route Detail Splits Table */
.route-detail-splits {
    margin-bottom: var(--space-lg);
}

.route-splits-section {
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.route-splits-section h4 {
    font-size: var(--font-md);
    font-weight: 500;
    color: var(--text);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.route-splits-section h4 i {
    color: var(--text-muted);
}

.route-splits-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-sm);
}

.route-splits-table thead th {
    text-align: left;
    padding: var(--space-sm) var(--space-md);
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.route-splits-table tbody tr {
    border-bottom: 1px solid var(--border-light);
}

.route-splits-table tbody tr:last-child {
    border-bottom: none;
}

.route-splits-table td {
    padding: var(--space-sm) var(--space-md);
    vertical-align: middle;
}

.route-splits-table .split-km {
    color: var(--text);
    width: 50px;
}

.split-pace {
    font-weight: 500;
    color: var(--text);
    width: 80px;
}

.split-hr {
    color: var(--text-secondary);
    width: 80px;
}

.split-terrain {
    min-width: 120px;
}

.split-terrain-bar {
    display: flex;
    height: 6px;
    border-radius: var(--space-xs);
    overflow: hidden;
    background: var(--border-light);
    margin-bottom: 2px;
}

.split-terrain-labels {
    display: flex;
    gap: var(--space-xs);
}

.terrain-micro {
    font-size: var(--font-xs);
    font-weight: 500;
    padding: 1px var(--space-xs);
    border-radius: var(--space-xs);
}

.terrain-micro.power {
    color: var(--error);
    background: var(--error-bg-dim);
}

.terrain-micro.hill {
    color: var(--warning);
    background: var(--warning-bg-dim);
}

.terrain-micro.flat {
    color: var(--success);
    background: var(--success-bg-dim);
}

@media (max-width: 600px) {
    .route-splits-table {
        font-size: var(--font-xs);
    }

    .route-splits-table td,
    .route-splits-table th {
        padding: var(--space-xs) var(--space-sm);
    }

    .split-terrain {
        min-width: 80px;
    }
}

.route-segments-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.segments-section {
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.segments-title {
    font-family: var(--font-body);
    font-size: var(--font-md);
    font-weight: 500;
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.segments-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.segment-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--secondary);
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.segment-item:hover {
    background: var(--bg-elevated);
}

/* Selectable segment buttons */
.segment-item-btn {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: var(--secondary);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}

.segment-item-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--border);
}

.segment-item-btn.selected {
    background: var(--accent-bg);
    border-color: var(--accent);
}

.segment-item-btn.selected .segment-rank {
    color: var(--accent);
}

.segment-item-btn.nearby {
    background: var(--bg);
    border: 1px dashed var(--border);
}

.segment-item-btn.nearby:hover {
    background: var(--secondary);
    border-style: solid;
}

.segment-main {
    display: flex;
    gap: var(--space-sm);
    flex: 1;
}

.segment-date {
    font-size: var(--font-xs);
    color: var(--text-muted);
    background: var(--secondary);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
}

.nearby-segments-header {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin: var(--space-md) 0 var(--space-sm);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.nearby-segments-header i {
    color: var(--accent);
}

/* Segment highlight animation on map */
.segment-highlight {
    animation: pulse-segment 1.5s ease-in-out infinite;
}

@keyframes pulse-segment {
    0%, 100% { stroke-opacity: 1; }
    50% { stroke-opacity: 0.5; }
}

.segment-rank {
    font-weight: 600;
    color: var(--text-muted);
    width: 24px;
}

.segment-gradient {
    font-weight: 600;
    color: var(--text);
}

.segment-length {
    color: var(--text-muted);
}

.segment-gain {
    color: var(--text-muted);
    margin-left: auto;
}

.segments-empty {
    text-align: center;
    color: var(--text-muted);
    padding: var(--space-lg);
    font-size: var(--font-sm);
}

/* Segment Colors for Map */
.segment-power-line {
    stroke: var(--zone-5);
}

.segment-stride-line {
    stroke: var(--zone-4);
}

.segment-flat-line {
    stroke: var(--zone-2);
}

/* Routes Mobile */
@media (max-width: 768px) {
    .routes-page-header {
        padding: var(--space-sm) var(--space-md);
    }

    .routes-page-title {
        font-size: 1.2rem;
    }

    .routes-page {
        padding: var(--space-md);
    }

    .routes-stats-bar {
        gap: var(--space-lg);
        padding: var(--space-md);
    }

    .routes-stat-value {
        font-size: 1.2rem;
    }

    .routes-tabs {
        overflow-x: auto;
    }

    .routes-tab {
        padding: var(--space-sm) var(--space-md);
        white-space: nowrap;
    }

    .routes-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: var(--space-md);
    }

    .route-thumbnail {
        height: 120px;
    }

    .route-card-content {
        padding: var(--space-sm);
    }

    .route-card-date {
        font-size: var(--font-xs);
    }

    .route-card-stats {
        gap: var(--space-sm);
    }

    .route-card-stat {
        font-size: var(--font-sm);
    }

    .route-segments-container {
        flex-direction: column;
    }

    .discover-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .discover-map {
        height: 300px;
    }

    .route-detail-map {
        height: 250px;
    }
}

/* ===== View Toggle Buttons ===== */
.view-toggle-group {
    display: flex;
    gap: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
}

.view-toggle-btn {
    flex: 1;
    height: var(--toolbar-height);
    padding: 0 1rem;
    border: none;
    background: var(--bg);
    color: var(--text-muted);
    font-size: var(--font-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-sizing: border-box;
}

.view-toggle-btn:first-child {
    border-right: 1px solid var(--border);
}

.view-toggle-btn.active {
    background: var(--fg);
    color: var(--bg);
}

.view-toggle-btn:hover:not(.active) {
    background: var(--secondary);
}

/* ===== Calendar View ===== */
.calendar-view {
    display: none;
}

.calendar-view.active {
    display: block;
}

/* Shared view container styles */
.list-view,
.calendar-view,
.table-view {
    width: 100%;
    max-width: 100%;
}

.list-view {
    display: block;
}

.list-view.hidden {
    display: none;
}

/* ===== Table View ===== */
.table-view {
    display: none;
}

.table-view.active {
    display: block;
}

/* Table Phase Section */
.table-phase {
    margin-bottom: var(--space-2xl);
    width: 100%;
}

/* Shared phase header styles */
.table-phase-header,
.calendar-phase-header {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text);
    letter-spacing: -0.02em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg) 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.table-phase-header:hover,
.calendar-phase-header:hover {
    color: var(--text-secondary);
}

.table-phase-header::after,
.calendar-phase-header::after {
    content: "▼";
    font-size: var(--font-md);
    color: var(--text-muted);
    transition: transform var(--transition-fast);
}

.table-phase-header.collapsed::after,
.calendar-phase-header.collapsed::after {
    transform: rotate(-90deg);
}

.table-phase-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 0;
}

.table-phase-badge {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid var(--accent);
    padding: 0.2rem 0.5rem;
}

.table-phase-content {
    transition: max-height var(--transition-fast), opacity var(--transition-fast);
    overflow: hidden;
}

.table-phase-content.collapsed {
    max-height: 0 !important;
    opacity: 0;
}

/* Table Week Card */
.table-week {
    border: 1px solid var(--border);
    margin-bottom: var(--space-lg);
    background: var(--card-bg);
    transition: all var(--transition-fast);
}

.table-week:hover {
    background: var(--bg-elevated);
}

.table-week.current-week {
    border-color: var(--accent);
}

.table-week-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}

.table-week-content {
    /* No collapse behavior - weeks always visible */
}

.table-week-title {
    font-size: var(--font-md);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--btn-letter-spacing);
    text-transform: uppercase;
    color: var(--text);
}

.table-week-stats {
    display: flex;
    gap: var(--space-lg);
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.table-week-stat {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.table-week-stat-value {
    font-weight: var(--font-weight-semibold);
    color: var(--text);
}

/* Table Day Rows */
.table-day-row {
    display: grid;
    grid-template-columns: 80px 1fr 60px 60px 50px;
    align-items: center;
    padding: 0.6rem var(--space-lg);
    border-bottom: 1px solid rgba(128, 128, 128, 0.08);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.table-day-row:last-child {
    border-bottom: none;
}

.table-day-row:hover {
    background: var(--bg-elevated);
}

.table-day-row.completed {
    opacity: 0.7;
}

.table-day-row.completed .table-day-desc {
    text-decoration: line-through;
    text-decoration-color: var(--text-muted);
}

.table-day-row.rest-with-activity .table-day-status {
    color: var(--primary);
}
.table-day-row.rest-with-activity .table-day-status i {
    animation: pulse-rest-activity 2s ease-in-out infinite;
}

.table-day-row.missed {
    opacity: 0.7;
}

.table-day-row.missed .table-day-desc {
    text-decoration: line-through;
    text-decoration-color: var(--text-muted);
}

.table-day-row.placeholder {
    opacity: 0.4;
    pointer-events: none;
}

.table-day-row.is-today {
    background: var(--accent-bg);
}

.table-day-row.is-today:hover {
    background: var(--accent-bg-hover);
}

.table-day-date {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text);
}

.table-day-date span {
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 0.3rem;
}

.table-day-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.table-day-zone {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    text-align: center;
}

.table-day-zone.z1 { color: var(--zone-1); }
.table-day-zone.z2 { color: var(--zone-2); }
.table-day-zone.z3 { color: var(--zone-3); }
.table-day-zone.z4 { color: var(--zone-4); }
.table-day-zone.z5 { color: var(--zone-5); }

.table-day-km {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-align: right;
}

.table-day-status {
    text-align: center;
    font-size: 0.7rem;
}

.table-day-status i {
    color: var(--zone-2);
}

.table-day-status i.missed {
    color: var(--missed);
}


/* Table View Zone Bar, Legend, and Analysis Card - Match calendar view constraints */
.table-week > .view-zone-bar,
.table-week > .view-zone-legend {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
}

.table-week > .view-zone-bar {
    margin-top: var(--space-md);
}

.table-week > .week-analysis-card {
    margin: var(--space-md) var(--space-lg);
}

#table-view .phase-analysis-card {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
}

/* Mobile responsive */
@media (max-width: 600px) {
    .table-day-row {
        grid-template-columns: 60px 1fr 50px 40px;
    }

    .table-day-status {
        display: none;
    }

    .table-week-header {
        flex-wrap: wrap;
        gap: var(--space-xs);
    }

    .table-week-stats {
        width: 100%;
        gap: var(--space-md);
        font-size: var(--font-xs);
    }

    .week-stats,
    .calendar-week-stats {
        display: none;
    }
}

/* Calendar Phase Section */
.calendar-phase {
    margin-bottom: var(--space-2xl);
    width: 100%;
}

.calendar-phase-content {
    transition: max-height var(--transition-fast), opacity var(--transition-fast);
    overflow: hidden;
}

.calendar-phase-content.collapsed {
    max-height: 0 !important;
    opacity: 0;
}

/* Calendar Phase Overview Accordion - styled like analysis cards */
.calendar-phase-overview {
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
    background: var(--card-bg);
    border: 1px solid var(--border);
    overflow: hidden;
}

.calendar-phase-overview-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-elevated);
    border: none;
    padding: var(--space-md) var(--space-lg);
    cursor: pointer;
    font-size: var(--font-sm);
    font-weight: var(--label-font-weight);
    letter-spacing: var(--label-letter-spacing-sm);
    text-transform: uppercase;
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.calendar-phase-overview-toggle:hover {
    background: var(--secondary);
}

.calendar-phase-overview-toggle span {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.calendar-phase-overview-toggle .toggle-icon {
    font-size: 0.65rem;
    color: var(--text-muted);
    transition: transform var(--transition-fast);
}

.calendar-phase-overview.expanded .toggle-icon {
    transform: rotate(180deg);
}

.calendar-phase-overview.expanded .calendar-phase-overview-toggle {
    border-bottom: 1px solid var(--border-light);
}

.calendar-phase-overview-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--transition-fast), opacity var(--transition-fast), padding var(--transition-fast);
    padding: 0 var(--space-lg);
}

.calendar-phase-overview.expanded .calendar-phase-overview-content {
    max-height: 600px;
    opacity: 1;
    padding: var(--space-md) var(--space-lg);
}

/* Calendar Week Row */
.calendar-week {
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    transition: all var(--transition-fast);
    /* Prevent text selection during drag-and-drop */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Cascade animation */
    opacity: 0;
    animation: fadeInUp 0.5s var(--ease-out-expo) forwards;
}

.calendar-week:hover {
    background: var(--bg-elevated);
}

.calendar-week.current-week {
    border-color: var(--accent);
}

/* Staggered week animations */
.calendar-week:nth-child(1) { animation-delay: 0.05s; }
.calendar-week:nth-child(2) { animation-delay: 0.10s; }
.calendar-week:nth-child(3) { animation-delay: var(--transition-fast); }
.calendar-week:nth-child(4) { animation-delay: 0.20s; }
.calendar-week:nth-child(5) { animation-delay: 0.25s; }
.calendar-week:nth-child(6) { animation-delay: 0.30s; }

.calendar-week:hover {
    box-shadow: none;
}

.calendar-week-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.calendar-week-content {
    /* No collapse behavior - weeks always visible */
}

.calendar-week-title {
    font-size: var(--font-md);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--btn-letter-spacing);
    text-transform: uppercase;
    color: var(--text);
}

.calendar-week-stats {
    display: flex;
    gap: var(--space-lg);
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.calendar-week-stat {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.calendar-week-stat-value {
    font-weight: var(--font-weight-semibold);
    color: var(--text);
}

/* Calendar week volume states */
.calendar-week-volume.upcoming {
    background: var(--bg3);
    color: var(--text-muted);
}

.calendar-week-volume.current {
    background: var(--success-bg);
    color: var(--completed);
}

.calendar-week-volume.completed {
    background: var(--completed);
    color: var(--on-color);
}

/* Day Headers Row */
.calendar-day-headers {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.calendar-day-header {
    text-align: center;
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
}

.calendar-day-header.today {
    background: var(--secondary);
    color: var(--text);
    border-radius: 0;
    width: 24px;
    height: 24px;
    margin: 0 auto;
    font-weight: 600;
}

/* Days Grid */
.calendar-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-sm);
}

/* Calendar Day Cell */
.calendar-day-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm);
    min-height: 70px;
}

/* Calendar Dot - Exception to Swiss style for visual clarity */
.calendar-dot {
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--on-color);
}

.calendar-dot:hover {
    transform: scale(1.15);
    box-shadow: none;
}

/* Draggable workout styles */
.calendar-dot[draggable="true"] {
    cursor: grab;
}

.calendar-dot[draggable="true"]:active {
    cursor: grabbing;
}

/* Legacy calendar drag states */
.calendar-dot.dragging {
    opacity: 0.5;
    transform: scale(0.9);
}

/* Drop target styles */
.calendar-day-cell.drag-over {
    background: var(--success-bg);
    border-radius: var(--radius-md);
    outline: 2px dashed var(--success);
    outline-offset: -2px;
}

.calendar-day-cell.drag-invalid {
    background: var(--error-bg);
    border-radius: var(--radius-md);
    outline: 2px dashed var(--error);
    outline-offset: -2px;
}

/* SortableJS calendar view states */
.calendar-day-cell.sortable-ghost {
    opacity: 0.3;
    background: var(--bg);
    border-radius: var(--radius-md);
}

.calendar-day-cell.sortable-chosen {
    background: var(--success-bg);
    border-radius: var(--radius-md);
    z-index: 100;
}

.calendar-day-cell.sortable-drag {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    box-shadow: none;
    z-index: 1000;
}

/* Prevent click events during calendar sorting */
body.is-sorting .calendar-dot {
    pointer-events: none;
}

/* Rest day - small black dot */
.calendar-dot.rest {
    width: 8px;
    height: 8px;
    background: var(--primary);
    font-size: 0;
}

.calendar-dot.rest-with-activity {
    background: var(--primary);
    animation: pulse-rest-activity 2s ease-in-out infinite;
    cursor: pointer;
}

/* Logged workout - vibrant green */
.calendar-dot.logged {
    background: var(--completed);
}

/* Missed workout - red (overrides type colors) */
.calendar-dot.missed {
    background: var(--missed);
    color: white;
}

/* Unlogged/Future workout - colored by workout type */
.calendar-dot.unlogged,
.calendar-dot.future {
    background: var(--border);
    color: var(--text-muted);
}

/* Workout type colors for unlogged/future dots */
.calendar-dot.type-easy { background: var(--workout-easy); color: var(--on-color); }
.calendar-dot.type-long,
.calendar-dot.type-long_run { background: var(--workout-long); color: var(--on-color); }
.calendar-dot.type-intervals { background: var(--workout-intervals); color: var(--on-color); }
.calendar-dot.type-hill_repeats { background: var(--workout-hill-repeats); color: var(--on-color); }
.calendar-dot.type-fartlek { background: var(--workout-fartlek); color: var(--on-color); }
.calendar-dot.type-tempo { background: var(--warning); color: var(--on-color); }
.calendar-dot.type-marathon_pace { background: var(--workout-marathon-pace); color: var(--on-color); }
.calendar-dot.type-shakeout { background: var(--workout-shakeout); color: var(--on-color); }
.calendar-dot.type-race { background: var(--workout-race); color: var(--on-color); }
.calendar-dot.type-strides { background: var(--workout-strides); color: var(--on-color); }
.calendar-dot.type-walk_run { background: var(--workout-walk-run); color: var(--on-color); }
.calendar-dot.type-tuneup { background: var(--workout-tuneup); color: var(--on-color); }

/* Dot sizes based on distance */
.calendar-dot.size-xs {
    width: 24px;
    height: 24px;
    font-size: var(--font-xs);
}

.calendar-dot.size-sm {
    width: 32px;
    height: 32px;
    font-size: var(--font-xs);
}

.calendar-dot.size-md {
    width: 40px;
    height: 40px;
    font-size: var(--font-xs);
}

.calendar-dot.size-lg {
    width: 48px;
    height: 48px;
    font-size: var(--font-sm);
}

.calendar-dot.size-xl {
    width: 56px;
    height: 56px;
    font-size: var(--font-sm);
}

/* Distance label inside dot */
.calendar-dot-distance {
    line-height: 1;
}

/* Current week highlight */
.calendar-week.current-week {
    border: 1px solid var(--border);
    background: var(--bg-elevated);
}

/* Analysis cards within calendar view */
#calendar-view .week-analysis-card,
#calendar-view .phase-analysis-card {
    margin-top: var(--space-md);
    margin-bottom: 0;
}

#calendar-view .phase-analysis-card {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
}

/* Analysis cards within table view */
#table-view .week-analysis-card,
#table-view .phase-analysis-card {
    margin-top: var(--space-md);
    margin-bottom: 0;
}

#table-view .phase-analysis-card {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
}

/* Mobile responsiveness for calendar */
@media (max-width: 600px) {
    .calendar-week {
        padding: var(--space-sm);
    }

    .calendar-days-grid {
        gap: 4px;
    }

    .calendar-day-cell {
        padding: var(--space-xs);
        min-height: 50px;
    }

    .calendar-dot.size-xs {
        width: 20px;
        height: 20px;
        font-size: var(--font-xs);
    }

    .calendar-dot.size-sm {
        width: 26px;
        height: 26px;
        font-size: var(--font-xs);
    }

    .calendar-dot.size-md {
        width: 32px;
        height: 32px;
        font-size: var(--font-xs);
    }

    .calendar-dot.size-lg {
        width: 38px;
        height: 38px;
        font-size: var(--font-xs);
    }

    .calendar-dot.size-xl {
        width: 44px;
        height: 44px;
        font-size: var(--font-xs);
    }

    .calendar-week-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }

    .calendar-day-header {
        font-size: var(--font-xs);
    }
}

/* ===== Day Modal Styles ===== */
.day-modal {
    max-width: 600px;
}

.day-modal #dayModalContent {
    padding: var(--space-lg);
}

/* ===== Bulk Upload Results Modal ===== */
.bulk-results-modal {
    max-width: 500px;
    width: 90%;
}

.bulk-results-content {
    padding: var(--space-lg);
}

.results-section {
    margin-bottom: var(--space-lg);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.results-section:last-of-type {
    margin-bottom: var(--space-md);
}

.results-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    font-weight: 600;
    font-size: var(--font-md);
}

.results-section.success .results-header {
    background: var(--success-bg-dim);
    color: var(--success);
}

.results-section.skipped .results-header {
    background: var(--warning-bg-dim);
    color: var(--warning);
}

.results-section.errors .results-header {
    background: var(--error-bg-dim);
    color: var(--error);
}

.results-list {
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
}

.result-item {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.result-item:last-child {
    border-bottom: none;
}

.result-filename {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.result-filename i {
    color: var(--text-muted);
    font-size: var(--font-sm);
}

.result-reason {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: 2px;
    padding-left: calc(12px + var(--space-xs));
}

.result-reason.error {
    color: var(--error);
}

.results-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-md);
}

/* ============================================
   TOAST NOTIFICATIONS
   Bottom-right corner alerts
   ============================================ */

.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9500; /* Tooltips/toasts layer */
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    pointer-events: none;
    max-width: 380px;
}

.toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: none;
    pointer-events: auto;
    animation: toastSlideIn var(--transition-fast);
    backdrop-filter: blur(10px);
    min-width: 280px;
    overflow: hidden;
}

.toast.toast-exit {
    animation: toastSlideOut var(--transition-fast) forwards;
}

@keyframes toastSlideIn {
    from {
        transform: translateX(120%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toastSlideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(120%);
        opacity: 0;
    }
}

.toast-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    font-size: var(--font-sm);
}

.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-weight: 600;
    font-size: var(--font-md);
    color: var(--text);
    margin-bottom: 2px;
}

.toast-message {
    font-size: var(--font-sm);
    color: var(--text-muted);
    line-height: 1.4;
}

.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--space-xs);
    margin: -4px -4px -4px 0;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    font-size: var(--font-md);
}

.toast-close:hover {
    color: var(--text);
    background: var(--hover-bg);
}

/* Toast variants */
.toast.toast-success .toast-icon {
    background: var(--success-bg);
    color: var(--success);
}

.toast.toast-success {
    border-color: var(--success-bg);
}

.toast.toast-error .toast-icon {
    background: var(--error-bg);
    color: var(--error);
}

.toast.toast-error {
    border-color: var(--error-bg);
}

.toast.toast-info .toast-icon {
    background: var(--info-bg);
    color: var(--accent);
}

.toast.toast-info {
    border-color: var(--info-bg);
}

.toast.toast-warning .toast-icon {
    background: var(--warning-bg);
    color: var(--warning);
}

.toast.toast-warning {
    border-color: var(--warning-bg);
}

.toast.toast-sync .toast-icon {
    background: var(--strava-bg);
    color: var(--accent);
}

.toast.toast-sync {
    border-color: var(--strava-bg);
}

/* Progress bar for auto-dismiss */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--accent);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    animation: toastProgress linear forwards;
}

@keyframes toastProgress {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

/* Mobile responsive */
@media (max-width: 480px) {
    .toast-container {
        left: 10px;
        right: 10px;
        bottom: 10px;
        max-width: none;
    }

    .toast {
        min-width: 0;
    }
}

/* ============================================
   AUTH STYLES
   ============================================ */

.auth-state {
    padding: var(--space-xs) 0;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-input {
    width: 100%;
    padding: var(--input-padding);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    background: var(--input-bg);
    color: var(--input-text);
    font-size: var(--input-font-size);
    font-family: var(--input-font-family);
    font-weight: var(--input-font-weight);
    transition: border-color var(--transition-fast);
}

.auth-input:hover {
    border-color: var(--input-border-hover);
}

.auth-input:focus {
    outline: none;
    border-color: var(--input-border-focus);
}

.auth-buttons {
    display: flex;
    gap: 8px;
}

.auth-btn {
    flex: 1;
}

.auth-btn.secondary {
    background: var(--secondary) !important;
    color: var(--text) !important;
}

.auth-btn.secondary:hover {
    background: var(--border) !important;
}

.auth-hint {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin-top: 4px;
    min-height: 16px;
}

.auth-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-md) 0;
    margin-bottom: 8px;
}

.auth-user-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.auth-user-image {
    width: 40px;
    height: 40px;
    border-radius: 0;
    object-fit: cover;
    border: 2px solid var(--accent);
}

.auth-user-icon {
    font-size: var(--font-2xl);
    color: var(--accent);
}

.auth-user-email {
    font-size: var(--font-md);
    color: var(--text);
    font-weight: 500;
}

/* Profile Picture Upload */
.avatar-edit-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: var(--overlay-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-fast);
    cursor: pointer;
}

.avatar-edit-overlay i {
    color: white;
    font-size: var(--font-md);
}

.auth-user-avatar:hover .avatar-edit-overlay {
    opacity: 1;
}

.auth-user-details {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* Change profile picture text link - hidden on desktop */
.change-profile-link {
    display: none;
    font-size: 0.65rem;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.change-profile-link:hover {
    color: var(--accent);
}

/* Touch devices - hide overlay, show text link instead */
@media (hover: none) {
    .avatar-edit-overlay {
        display: none;
    }

    .change-profile-link {
        display: block;
    }
}

.hidden-file-input {
    /* Visually hidden but keyboard accessible */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Location Setting */
.location-setting {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md) 0;
    border-top: 1px solid var(--border);
    margin-top: var(--space-sm);
}

.location-label {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.location-label i {
    color: var(--primary);
}

.location-input-wrapper {
    position: relative;
}

.location-input {
    width: 100%;
    padding: var(--input-padding);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    background: var(--input-bg);
    color: var(--input-text);
    font-size: var(--input-font-size);
    font-family: var(--input-font-family);
    font-weight: var(--input-font-weight);
    transition: border-color var(--transition-fast);
}

.location-input:hover {
    border-color: var(--input-border-hover);
}

.location-input:focus {
    outline: none;
    border-color: var(--input-border-focus);
}

.location-input::placeholder {
    color: var(--input-placeholder);
    opacity: 0.7;
}

.location-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
    display: none;
}

.location-suggestions.active {
    display: block;
}

.location-suggestion-item {
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    font-size: var(--font-sm);
    border-bottom: 1px solid var(--border);
    transition: background-color var(--transition-fast);
}

.location-suggestion-item:last-child {
    border-bottom: none;
}

.location-suggestion-item:hover {
    background: var(--secondary);
}

.location-suggestion-item .suggestion-name {
    font-weight: 500;
    color: var(--text);
}

.location-suggestion-item .suggestion-region {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

.location-current {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) 0;
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.location-current-name {
    font-weight: 500;
    color: var(--text);
}

.location-btn {
    margin-top: var(--space-xs);
}

.location-btn.success {
    background: var(--success);
    color: white;
}

/* Language Setting */
.language-setting {
    padding: var(--space-md) 0;
    border-top: 1px solid var(--border);
    margin-top: var(--space-sm);
}

.language-dropdown {
    position: relative;
}

.language-dropdown-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--transition-fast);
    font-family: var(--font-body);
}

.language-dropdown-trigger:hover {
    border-color: var(--text-muted);
}

.language-dropdown.open .language-dropdown-trigger {
    border-color: var(--primary);
}

.language-dropdown-label {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: auto;
}

.language-dropdown-value {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text);
    margin-right: var(--space-sm);
}

.language-dropdown-arrow {
    font-size: var(--font-sm);
    color: var(--text-muted);
    transition: transform var(--transition-fast);
}

.language-dropdown.open .language-dropdown-arrow {
    transform: rotate(180deg);
}

.language-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-xs));
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    z-index: 10;
    box-shadow: 0 4px 12px var(--shadow-color);
}

.language-dropdown.open .language-dropdown-menu {
    display: block;
}

.language-dropdown-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background var(--transition-fast);
    font-family: var(--font-body);
}

.language-dropdown-option:last-child {
    border-bottom: none;
}

.language-dropdown-option:hover {
    background: var(--secondary);
}

.language-dropdown-option.active {
    background: var(--secondary);
}

.language-dropdown-option-code {
    font-size: var(--font-xs);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    width: 24px;
    flex-shrink: 0;
}

.language-dropdown-option.active .language-dropdown-option-code {
    color: var(--primary);
}

.language-dropdown-option-name {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text);
}

/* ============================================
   LOCATION MODAL
   ============================================ */

.location-modal {
    max-width: 500px;
}

.location-modal-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.location-modal-desc {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.location-search-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.location-search-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.location-search-icon {
    position: absolute;
    left: var(--space-md);
    color: var(--text-muted);
    font-size: var(--font-sm);
    pointer-events: none;
}

.location-search-input {
    width: 100%;
    padding: var(--space-md) var(--space-md) var(--space-md) calc(var(--space-md) + 1.5em);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--input-text);
    font-size: var(--font-md);
    font-family: var(--font-mono);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.location-search-input:hover {
    border-color: var(--input-border-hover);
}

.location-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

.location-search-input::placeholder {
    color: var(--input-placeholder);
}

.location-search-status {
    position: absolute;
    right: var(--space-md);
    font-size: var(--font-xs);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.location-search-status i {
    font-size: 0.9em;
}

.location-search-status .search-status-loading {
    color: var(--primary);
}

.location-search-status .search-status-loading i {
    animation: spin 1s linear infinite;
}

.location-search-status .search-status-success {
    color: var(--success);
}

.location-search-status .search-status-error {
    color: var(--danger);
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.location-search-results {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    overflow: hidden;
    max-height: 280px;
    overflow-y: auto;
}

.location-search-results:empty {
    display: none;
}

.location-search-results.has-error {
    display: flex;
}

.location-result-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background-color var(--transition-fast);
}

.location-result-item:last-child {
    border-bottom: none;
}

.location-result-item:hover {
    background: var(--secondary);
}

.location-result-item.selected {
    background: var(--primary);
    color: white;
}

.location-result-item.selected .location-result-region {
    color: rgba(255, 255, 255, 0.8);
}

.location-result-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: var(--font-sm);
    flex-shrink: 0;
}

.location-result-item.selected .location-result-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.location-result-info {
    flex: 1;
    min-width: 0;
}

.location-result-name {
    font-weight: 600;
    color: var(--text);
    font-size: var(--font-sm);
}

.location-result-item.selected .location-result-name {
    color: white;
}

.location-result-region {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.location-result-coords {
    font-size: var(--font-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
    flex-shrink: 0;
}

.location-result-item.selected .location-result-coords {
    color: rgba(255, 255, 255, 0.7);
}

.location-no-results {
    padding: var(--space-lg);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-sm);
}

.location-no-results i {
    display: block;
    font-size: 1.5em;
    margin-bottom: var(--space-sm);
    opacity: 0.5;
}

.location-no-results.error {
    color: var(--danger);
}

.location-no-results.error i {
    opacity: 1;
}

.location-current-section {
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
}

.location-current-label {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
}

.location-current-display {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--secondary);
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
}

.location-current-display i {
    color: var(--success);
}

.location-current-display .location-current-name {
    font-weight: 600;
    color: var(--text);
}

/* ============================================
   PLANS LIST (Menu)
   ============================================ */

.plans-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

/* Plan Item Accordion */
.plan-item {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0;
    overflow: hidden;
    transition: all var(--transition-fast);
}

.plan-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.plan-item-header:hover {
    background: var(--bg-tertiary);
}

.plan-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.plan-item-name-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.plan-item-name {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text);
}

.plan-item-date {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.plan-item-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.plan-item-active-badge {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--phase-done);
    background: var(--success-bg);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Ensure badge stays in header when expanded */
.plan-item.expanded .plan-item-active-badge {
    position: static;
}

.plan-item-toggle {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.plan-item-toggle:hover {
    background: var(--border);
    color: var(--text);
}

.plan-item-toggle i {
    transition: transform var(--transition-fast);
}

.plan-item.expanded .plan-item-toggle i {
    transform: rotate(180deg);
}

/* Accordion Content - use display:none to exclude from parent scrollHeight */
.plan-item-content {
    display: none;
    padding: var(--space-md);
    border-top: 1px solid var(--border);
}

.plan-item.expanded .plan-item-content {
    display: block;
}

.plan-item-description {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin: 0 0 var(--space-sm) 0;
    line-height: 1.4;
}

/* Plan Stats Grid */
.plan-item-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
    margin-bottom: var(--space-sm);
}

.plan-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-xs);
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
}

.plan-stat i {
    font-size: var(--font-xs);
    opacity: 0.7;
}

/* Intensity Badge */
.plan-intensity-badge {
    display: inline-block;
    font-size: var(--font-xs);
    font-weight: 500;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
}

.plan-intensity-badge.beginner {
    background: var(--success-bg);
    color: var(--phase-done);
}

.plan-intensity-badge.intermediate {
    background: var(--info-bg);
    color: var(--info);
}

.plan-intensity-badge.advanced {
    background: var(--error-bg);
    color: var(--error);
}

/* Philosophy Badge (in header) */
.plan-philosophy-badge {
    display: inline-block;
    font-size: var(--font-xs);
    font-weight: 600;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.plan-philosophy-badge.polarized {
    background: var(--zone-3-bg);
    color: var(--workout-fartlek);
}

.plan-philosophy-badge.pyramidal {
    background: var(--warning-bg);
    color: var(--pol-mid);
}

/* Philosophy Toggle (in expanded content) */
.plan-philosophy-toggle {
    margin-bottom: var(--space-md);
    padding: 0;
    background: transparent;
}

.philosophy-toggle-label {
    display: block;
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
}

.philosophy-toggle-buttons {
    display: flex;
    gap: var(--space-xs);
}

.philosophy-toggle-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--space-sm) var(--space-xs);
    border: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.philosophy-toggle-btn:hover {
    border-color: var(--text-muted);
}

.philosophy-toggle-btn.active {
    border-width: 2px;
    border-color: var(--text-primary);
    background: transparent;
}

.philosophy-toggle-btn .philosophy-name {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--text-primary);
}

.philosophy-toggle-btn .philosophy-ratio {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.philosophy-toggle-btn.active .philosophy-name {
    color: var(--text-primary);
}

.philosophy-toggle-btn.active .philosophy-ratio {
    color: var(--text-muted);
}

/* Philosophy ratio inline (in analysis overview) */
.philosophy-ratio-inline {
    font-size: 0.85em;
    color: var(--text-muted);
    font-weight: normal;
}

/* Progress Bar */
.plan-item-progress {
    margin-bottom: var(--space-md);
}

.plan-progress-bar {
    height: 6px;
    background: var(--bg-tertiary);
    overflow: hidden;
    margin-bottom: 4px;
}

.plan-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 0;
    transition: width var(--transition-fast);
}

.plan-progress-label {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.plan-item-actions {
    display: flex;
    gap: var(--space-sm);
}

.plan-item-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.plan-item-btn i {
    font-size: var(--font-sm);
}

.plan-item-view {
    background: var(--accent);
    color: white;
}

.plan-item-view:hover {
    opacity: 0.85;
}

.plan-item-delete {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.plan-item-delete:hover {
    background: var(--error-bg);
    color: var(--error);
    border-color: var(--error-bg);
}

.plans-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.menu-item.primary-action {
    background: var(--accent);
    color: white;
    border: none;
}

.menu-item.primary-action:hover {
    background: var(--accent);
    opacity: 0.85;
}

/* Plan item responsive styles */
@media (max-width: 400px) {
    .plan-item-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .plan-stat {
        font-size: var(--font-sm);
        padding: 4px 8px;
        justify-content: center;
    }

    .plan-intensity-badge {
        font-size: var(--font-sm);
        padding: 4px 10px;
    }

    .plan-item-content {
        padding: var(--space-sm);
    }
}

/* ============================================
   LOGIN PAGE
   ============================================ */

.login-page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--bg) 0%, var(--secondary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000; /* Full page overlays layer */
}

.login-page.hidden {
    display: none;
}

.login-container {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: none;
    padding: var(--space-3xl);
    width: 100%;
    max-width: 380px;
    margin: var(--space-xl);
}

.login-page .login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-icon {
    font-size: var(--font-3xl);
    color: var(--accent);
    margin-bottom: 16px;
}

.login-header h1 {
    font-family: var(--font-display);
    font-size: var(--font-2xl);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.login-header p {
    color: var(--text-muted);
    font-size: var(--font-md);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-input {
    width: 100%;
    padding: var(--input-padding);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    background: var(--input-bg);
    color: var(--input-text);
    font-size: var(--input-font-size);
    font-family: var(--input-font-family);
    font-weight: var(--input-font-weight);
    transition: border-color var(--transition-fast);
}

.login-input:hover {
    border-color: var(--input-border-hover);
}

.login-input:focus {
    outline: none;
    border-color: var(--input-border-focus);
}

.login-btn {
    width: 100%;
    padding: var(--space-lg);
    border: none;
    border-radius: var(--radius);
    font-size: var(--font-lg);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.login-btn.primary {
    background: var(--accent);
    color: white;
}

.login-btn.primary:hover {
    background: var(--accent-dark);
    transform: translateY(-1px);
}

.login-btn.secondary {
    background: var(--secondary);
    color: var(--text);
    margin-top: 4px;
}

.login-btn.secondary:hover {
    background: var(--border);
}

.login-message {
    text-align: center;
    font-size: var(--font-md);
    color: var(--text-muted);
    min-height: 20px;
    margin-top: 8px;
}

.main-app {
    min-height: 100vh;
}

/* ============================================
   ONBOARDING PAGE
   ============================================ */

.onboarding-page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--modal-backdrop);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 9000; /* Full page overlays layer */
    overflow-y: auto;
    padding: var(--space-3xl) var(--space-xl);
}

.onboarding-page.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.onboarding-container {
    position: relative;
    background: var(--bg);
    border-radius: 0;
    box-shadow: none;
    border: 1px solid var(--border);
    padding: 3rem 2.5rem;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

.onboarding-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    background: transparent;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.7rem;
    transition: all var(--transition-fast);
    z-index: 1;
}

.onboarding-close-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.onboarding-header {
    text-align: left;
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-lg);
    border-bottom: 2px solid var(--accent);
}

.onboarding-icon {
    display: none;
}

.onboarding-header .tag {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.8rem;
    display: block;
}

.onboarding-header h1 {
    font-family: 'Instrument Serif', serif;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.15;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.onboarding-header p {
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.7;
}

.onboarding-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.onboarding-form > .onboarding-section {
    margin-top: var(--space-md);
}

.onboarding-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.onboarding-field > label {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.onboarding-input {
    width: 100%;
    padding: var(--input-padding);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    background: var(--input-bg);
    color: var(--input-text);
    font-size: var(--input-font-size);
    font-family: var(--input-font-family);
    font-weight: var(--input-font-weight);
    transition: border-color var(--transition-fast);
}

.onboarding-input.custom-select {
    padding: 0;
    border: none;
    background: transparent;
}

.onboarding-input.custom-select .custom-select-trigger {
    height: auto;
    padding: var(--input-padding);
    padding-right: calc(0.8rem + 16px);
    font-size: var(--input-font-size);
    font-weight: var(--input-font-weight);
    border: 1px solid var(--input-border);
    background: var(--input-bg);
}

.onboarding-input:hover {
    border-color: var(--input-border-hover);
}

.onboarding-input:focus {
    outline: none;
    border-color: var(--input-border-focus);
}

.onboarding-input::placeholder {
    color: var(--input-placeholder);
    opacity: 0.7;
}

/* Date input styling */
.onboarding-input[type="date"] {
    cursor: pointer;
}

.onboarding-input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

.onboarding-input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.onboarding-textarea {
    resize: vertical;
    min-height: 70px;
    line-height: 1.5;
}

.onboarding-slider-container {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.onboarding-slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border);
    border-radius: 0;
    outline: none;
}

.onboarding-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 0;
    cursor: pointer;
    transition: transform var(--transition-fast);
    margin-top: -6px;
}

.onboarding-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.onboarding-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--accent);
    border: none;
    border-radius: 0;
    cursor: pointer;
}

.onboarding-slider::-webkit-slider-runnable-track {
    height: 4px;
    background: var(--border);
    border-radius: 0;
}

.onboarding-slider::-moz-range-track {
    height: 4px;
    background: var(--border);
    border-radius: 0;
}

.slider-value {
    min-width: 80px;
    font-family: var(--font-mono);
    font-size: var(--font-lg);
    font-weight: 700;
}

.volume-weeks-slider {
    width: 100%;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-light);
}

.volume-weeks-slider label {
    font-weight: 500;
    display: block;
    margin-bottom: var(--space-sm);
}

.volume-weeks-slider .onboarding-slider {
    width: 100%;
}

.slider-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: var(--space-xs);
}

.onboarding-btn-group {
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
}

.onboarding-option-btn {
    flex: 1;
    padding: 0.6rem 0.5rem;
    border: 0;
    border-right: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-align: center;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
}

.onboarding-option-btn:last-child {
    border-right: none;
}

.onboarding-option-btn:hover {
    background: rgba(128, 128, 128, 0.08);
    color: var(--text);
}

.onboarding-option-btn.active {
    background: var(--accent);
    color: #fff;
}

.onboarding-option-btn.active:hover {
    background: var(--accent);
    color: #fff;
}

.onboarding-option-btn.active i {
    color: #fff;
}

/* Days per week - compact buttons */
.days-group .onboarding-option-btn {
    padding: 0.6rem 0.3rem;
    min-width: 40px;
}

/* Intensity buttons - vertical with icons */
.intensity-group .onboarding-option-btn {
    flex-direction: column;
    padding: 1rem 0.5rem;
    gap: 0.3rem;
}

.intensity-group .onboarding-option-btn i {
    font-size: 1.2rem;
    opacity: 0.7;
}

.intensity-group .onboarding-option-btn.active i {
    opacity: 1;
}

.intensity-group .onboarding-option-btn span {
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Plan type buttons (Goal/Race) */
.plan-type-group .onboarding-option-btn {
    flex-direction: column;
    padding: 1rem 0.5rem;
    gap: 0.3rem;
}

.plan-type-group .onboarding-option-btn i {
    font-size: 1rem;
    opacity: 0.7;
}

.plan-type-group .onboarding-option-btn.active i {
    opacity: 1;
}

.plan-type-group .onboarding-option-btn span {
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Distance buttons */
.distance-group .onboarding-option-btn {
    padding: 0.6rem 0.5rem;
    font-weight: 600;
}

/* Stack distance buttons on mobile */
@media (max-width: 500px) {
    .distance-group {
        flex-direction: column;
    }

    .distance-group .onboarding-option-btn {
        width: 100%;
    }
}

/* Fix contrast for inactive buttons in light mode */
[data-theme="light"] .onboarding-option-btn:not(.active) {
    color: var(--text-secondary);
    background: transparent;
}

[data-theme="light"] .onboarding-option-btn:not(.active):hover {
    background: rgba(128, 128, 128, 0.08);
    color: var(--text);
}

[data-theme="light"] .onboarding-option-btn:not(.active) i {
    color: var(--text-secondary);
}

/* Fix submit button contrast in light mode */
[data-theme="light"] .onboarding-submit-btn {
    background: var(--accent);
    color: #ffffff;
}

[data-theme="light"] .onboarding-submit-btn:hover {
    background: #1a1a1a;
}

.onboarding-section {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.section-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--space-sm) 0;
}

.onboarding-section-header {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: none;
}

.onboarding-section-header h3 {
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.optional-tag {
    font-size: 0.5rem;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border);
    padding: 0.15rem 0.4rem;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.required-tag {
    font-size: 0.5rem;
    font-weight: 600;
    color: var(--accent);
    background: transparent;
    border: 1px solid var(--accent);
    padding: 0.15rem 0.4rem;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.race-mode-intro {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--accent);
    line-height: 1.5;
}

.onboarding-hint {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin-top: var(--space-sm);
    line-height: 1.5;
}

.long-run-time-cap-note {
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-left: 3px solid var(--border);
    font-style: italic;
}

.long-run-time-cap-note i {
    margin-right: var(--space-xs);
    opacity: 0.7;
}

/* Volume Progression Toggle */
.onboarding-toggle-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
}

.onboarding-toggle-label {
    flex: 1;
}

.onboarding-toggle-label label {
    font-weight: 500;
    margin-bottom: var(--space-xs);
    display: block;
}

.onboarding-toggle {
    position: relative;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.onboarding-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.onboarding-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border);
    border-radius: 0;
    transition: background-color var(--transition-fast);
}

.onboarding-toggle-slider::before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 0;
    transition: transform var(--transition-fast);
    box-shadow: none;
    will-change: transform;
}

.onboarding-toggle input:checked + .onboarding-toggle-slider {
    background-color: var(--accent);
}

.onboarding-toggle input:checked + .onboarding-toggle-slider::before {
    transform: translateX(24px);
}

.never-ran-option .onboarding-toggle-slider {
    background-color: var(--bg-tertiary);
}

.never-ran-option .onboarding-toggle input:checked + .onboarding-toggle-slider {
    background-color: var(--success);
}

.onboarding-info-box {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--red-dim);
    border: 1px solid transparent;
    border-left: 3px solid var(--accent);
    border-radius: 0;
    margin-top: 1rem;
}

.onboarding-info-box i {
    color: var(--accent);
    font-size: 0.9rem;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: transparent;
    border-radius: 0;
}

.onboarding-info-box strong {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.onboarding-info-box p {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Intensity Info Boxes */
.intensity-info-box {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 0;
    margin-top: var(--space-lg);
}

.intensity-info-box i {
    font-size: var(--font-h2);
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 0;
}

.intensity-info-box strong {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: 600;
}

.intensity-info-box p {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

#intensityInfoBeginner {
    border-left: 3px solid var(--success);
    background: var(--success-bg-dim);
}

#intensityInfoBeginner i {
    color: var(--success);
    background: var(--success-bg);
}

#intensityInfoIntermediate {
    border-left: 3px solid var(--accent);
    background: var(--red-dim);
}

#intensityInfoIntermediate i {
    color: var(--accent);
    background: transparent;
}

#intensityInfoAdvanced {
    border-left: 3px solid var(--workout-threshold);
    background: var(--error-bg-dim);
}

#intensityInfoAdvanced i {
    color: var(--workout-threshold);
    background: var(--error-bg);
}

/* Never Ran Before Option */
.never-ran-option {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--success-bg-dim);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
}

.never-ran-option .toggle-option {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    cursor: pointer;
    user-select: none;
}

.never-ran-option .toggle-option input[type="checkbox"] {
    display: none;
}

.never-ran-option .toggle-checkbox {
    width: 44px;
    height: 24px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    position: relative;
    transition: background var(--transition-fast);
    flex-shrink: 0;
}

.never-ran-option .toggle-checkbox::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--bg-surface);
    border-radius: 0;
    top: 2px;
    left: 2px;
    transition: transform var(--transition-fast);
    box-shadow: none;
}

.never-ran-option input[type="checkbox"]:checked + .toggle-checkbox {
    background: var(--success);
}

.never-ran-option input[type="checkbox"]:checked + .toggle-checkbox::after {
    transform: translateX(20px);
}

.never-ran-option .toggle-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-md);
}

.never-ran-option .toggle-label i {
    color: var(--success);
}

.never-ran-info {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: var(--success-bg-dim);
    border: 1px solid var(--success-bg);
    border-radius: var(--radius-md);
    margin-top: var(--space-md);
}

.never-ran-info i {
    font-size: var(--font-h2);
    color: var(--success);
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--success-bg);
    border-radius: var(--radius);
}

.never-ran-info strong {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: 600;
    color: var(--success);
}

.never-ran-info p {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Training Feedback Box */
.training-feedback {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-lg);
    border-radius: 0;
    border: 1px solid var(--border);
    margin-top: var(--space-sm);
}

.training-feedback .feedback-icon {
    flex-shrink: 0;
}

.training-feedback .feedback-icon i {
    font-size: var(--font-h2);
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 0;
}

.training-feedback .feedback-content > strong {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: 600;
}

.training-feedback .feedback-content p {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Feedback variants */
.training-feedback.feedback-warning {
    background: var(--warning-bg-dim);
    border-left: 3px solid var(--warning);
}

.training-feedback.feedback-warning .feedback-icon i {
    color: var(--warning);
    background: var(--warning-bg);
}

.training-feedback.feedback-warning .feedback-content > strong {
    color: var(--warning-dark);
}

.training-feedback.feedback-danger {
    background: var(--error-bg-dim);
    border-left: 3px solid var(--error);
}

.training-feedback.feedback-danger .feedback-icon i {
    color: var(--error);
    background: var(--error-bg);
}

.training-feedback.feedback-danger .feedback-content > strong {
    color: var(--error-dark);
}

.training-feedback.feedback-success {
    background: var(--success-bg-dim);
    border-left: 3px solid var(--success);
}

.training-feedback.feedback-success .feedback-icon i {
    color: var(--success);
    background: var(--success-bg);
}

.training-feedback.feedback-success .feedback-content > strong {
    color: var(--success-dark);
}

.training-feedback.feedback-info {
    background: var(--info-bg-dim);
    border-left: 3px solid var(--primary);
}

.training-feedback.feedback-info .feedback-icon i {
    color: var(--primary);
    background: var(--info-bg);
}

.training-feedback.feedback-info .feedback-content > strong {
    color: var(--primary);
}

/* Enhanced feedback content */
.training-feedback .feedback-main {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin: 0 0 var(--space-md) 0;
    line-height: 1.5;
}

.training-feedback .feedback-details,
.training-feedback .feedback-recommendation {
    margin-top: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-tertiary);
    border-radius: 0;
    border-left: 2px solid var(--border);
}

.training-feedback .feedback-detail-label {
    display: block;
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
}

.training-feedback .feedback-detail-label i {
    margin-right: var(--space-xs);
}

.training-feedback .feedback-detail-text {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.training-feedback .feedback-citation {
    font-size: var(--font-xs);
    color: var(--text-muted);
    font-style: italic;
    margin: var(--space-md) 0 0 0;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border);
    line-height: 1.4;
}

/* Variant-specific accent colors for detail sections */
.training-feedback.feedback-danger .feedback-details,
.training-feedback.feedback-danger .feedback-recommendation {
    border-left-color: var(--error);
}

.training-feedback.feedback-warning .feedback-details,
.training-feedback.feedback-warning .feedback-recommendation {
    border-left-color: var(--warning);
}

.training-feedback.feedback-success .feedback-details,
.training-feedback.feedback-success .feedback-recommendation {
    border-left-color: var(--success);
}

.training-feedback.feedback-info .feedback-details,
.training-feedback.feedback-info .feedback-recommendation {
    border-left-color: var(--primary);
}

.plan-type-hint {
    margin-top: var(--space-md);
    text-align: center;
    font-style: italic;
}

/* Goal Focus Radio Options */
.goal-focus-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.goal-focus-option {
    display: block;
    cursor: pointer;
}

.goal-focus-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.goal-focus-content {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 0;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.goal-focus-option:hover .goal-focus-content {
    border-color: var(--accent);
    background: var(--bg-elevated);
}

.goal-focus-option input[type="radio"]:checked + .goal-focus-content {
    border-color: var(--accent);
    background: var(--bg-elevated);
    box-shadow: none;
}

.goal-focus-content i {
    font-size: var(--font-h2);
    color: var(--text);
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: var(--secondary);
    border-radius: 0;
    flex-shrink: 0;
}

.goal-focus-option:hover .goal-focus-content i {
    color: var(--accent);
    background: var(--bg-elevated);
}

.goal-focus-option input[type="radio"]:checked + .goal-focus-content i {
    color: #fff;
    background: var(--accent);
}

.goal-focus-content strong {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: 600;
    color: var(--text);
}

.goal-focus-content p {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Philosophy Toggle Options */
.philosophy-toggle-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

@media (max-width: 600px) {
    .philosophy-toggle-options {
        grid-template-columns: 1fr;
    }
}

.philosophy-toggle-option {
    display: block;
    cursor: pointer;
}

.philosophy-toggle-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.philosophy-toggle-content {
    padding: var(--space-md);
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
    height: 100%;
}

.philosophy-toggle-option:hover .philosophy-toggle-content {
    border-color: var(--primary);
    background: var(--bg-elevated);
}

.philosophy-toggle-option input[type="radio"]:checked + .philosophy-toggle-content {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: none;
}

.philosophy-toggle-option input[type="radio"]:checked + .philosophy-toggle-content .philosophy-header strong {
    color: var(--bg);
}

.philosophy-toggle-option input[type="radio"]:checked + .philosophy-toggle-content p {
    color: var(--on-color-high);
}

.philosophy-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.philosophy-header strong {
    font-weight: 600;
    color: var(--text);
}

.philosophy-badge {
    font-size: var(--font-xs);
    font-weight: 600;
    padding: 2px 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.philosophy-toggle-option input[type="radio"]:checked + .philosophy-toggle-content .philosophy-badge {
    background: var(--on-color-bg);
    border-color: var(--on-color-border);
    color: var(--on-color);
}

.philosophy-toggle-content p {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

/* Beginner Philosophy Info Box */
.philosophy-info-box {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: var(--info-bg-dim);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-md);
}

.philosophy-info-box.beginner {
    background: var(--success-bg-dim);
    border-left-color: var(--success);
}

.philosophy-info-icon {
    font-size: 1.5rem;
    color: var(--primary);
    flex-shrink: 0;
}

.philosophy-info-box.beginner .philosophy-info-icon {
    color: var(--success);
}

.philosophy-info-content {
    flex: 1;
}

.philosophy-info-content strong {
    display: block;
    margin-bottom: var(--space-sm);
    color: var(--text);
}

.philosophy-info-content p {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.philosophy-info-content p + p {
    margin-top: var(--space-sm);
}

.philosophy-info-content p.secondary {
    font-style: italic;
    opacity: 0.8;
}

.onboarding-times-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.onboarding-time-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.onboarding-time-field label {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-muted);
}

.time-input {
    padding: var(--space-md) var(--space-md);
    font-size: var(--font-md);
}

/* Counter Input - Hybrid text input with increment/decrement buttons */
.counter-input-wrapper {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--input-bg);
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.counter-input-wrapper:focus-within {
    border-color: var(--primary);
    box-shadow: none;
}

.counter-input-wrapper .counter-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: var(--space-md);
    font-size: var(--font-md);
    font-family: inherit;
    color: var(--text);
    text-align: center;
    min-width: 0;
}

.counter-input-wrapper .counter-input:focus {
    outline: none;
}

.counter-input-wrapper .counter-input::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

.counter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    background: var(--secondary);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    font-size: var(--font-lg);
    font-weight: 500;
    user-select: none;
    -webkit-user-select: none;
}

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

.counter-btn:active {
    background: var(--border-light);
}

.counter-btn.decrement {
    border-right: 1px solid var(--border-light);
}

.counter-btn.increment {
    border-left: 1px solid var(--border-light);
}

/* Remove default onboarding-input border when inside counter wrapper */
.counter-input-wrapper .onboarding-input {
    border: none;
    background: transparent;
    text-align: center;
}

.counter-input-wrapper .onboarding-input:focus {
    box-shadow: none;
}

/* Counter input in time fields */
.onboarding-time-field .counter-input-wrapper {
    width: 100%;
}

/* Counter input in race entry goal field */
.upcoming-race-entry .counter-input-wrapper {
    height: 100%;
}

/* Counter input in add race modal */
.add-race-field .counter-input-wrapper {
    width: 100%;
}

.counter-input-wrapper .add-race-input {
    border: none;
    background: transparent;
    text-align: center;
    padding: var(--space-md);
}

.counter-input-wrapper .add-race-input:focus {
    box-shadow: none;
}

/* Segmented Time Input - Individual H:M:S steppers */
.time-segments {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-xs);
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 0;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    overflow: hidden;
}

.time-segments:focus-within {
    border-color: var(--primary);
    box-shadow: none;
}

.time-segment {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    flex-shrink: 1;
    min-width: 0;
}

.segment-input {
    width: 36px;
    min-width: 28px;
    padding: var(--space-xs);
    border: 1px solid var(--border-light);
    border-radius: 0;
    background: var(--bg-elevated);
    color: var(--text);
    font-size: var(--font-sm);
    font-family: var(--input-font-family);
    text-align: center;
    font-variant-numeric: tabular-nums;
    flex-shrink: 1;
}

.segment-input:focus {
    outline: none;
    border-color: var(--primary);
}

.segment-input::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
    font-size: var(--font-sm);
}

.segment-btns {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-shrink: 0;
}

.segment-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 14px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    font-size: 8px;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
}

.segment-btn:hover {
    background: var(--secondary);
    color: var(--text);
}

.segment-btn:active {
    background: var(--border-light);
}

/* Hours field can be narrower */
.time-segment .segment-input[data-unit="hours"] {
    width: 24px;
    min-width: 24px;
}

.time-separator {
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--text-muted);
    padding: 0;
    align-self: center;
    flex-shrink: 0;
}

/* Make segments fill available width in onboarding fields */
.onboarding-time-field .time-segments,
.onboarding-field .time-segments,
.add-race-field .time-segments {
    width: 100%;
    justify-content: center;
}

.upcoming-races-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.upcoming-race-entry {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 80px 36px;
    gap: var(--space-sm);
    align-items: center;
}

.upcoming-race-entry .onboarding-input {
    padding: var(--space-md) var(--space-md);
    font-size: var(--font-md);
}

/* Upcoming race select inherits from global select styles */

.upcoming-race-entry .race-goal-input {
    text-align: center;
}

.race-hint {
    margin-top: var(--space-sm);
    font-style: italic;
}

.remove-race-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--error-bg);
    color: var(--error);
    border-radius: var(--radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
    flex-shrink: 0;
}

.remove-race-btn:hover {
    background: var(--error);
    color: white;
}

.add-race-btn {
    width: 100%;
    padding: var(--space-md);
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--font-md);
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.add-race-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.onboarding-submit-btn {
    width: 100%;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 0;
    background: var(--accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: background-color var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    box-shadow: none;
}

.onboarding-submit-btn:hover {
    background: var(--text);
    box-shadow: none;
}

.onboarding-submit-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.onboarding-plan-note {
    text-align: left;
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin: var(--space-sm) 0 0 0;
    line-height: 1.4;
}

.onboarding-plan-note i {
    margin-right: var(--space-xs);
}

.onboarding-message {
    text-align: center;
    font-size: var(--font-sm);
    color: var(--text-muted);
    min-height: var(--space-xl);
}

/* Dynamic Pace Zones Preview */
.pace-zones-preview {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: var(--bg);
    border-radius: 0;
    border: 1px solid var(--border);
}

.pace-zones-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.pace-zones-header h3 {
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.pace-zones-header h3 i {
    color: var(--accent);
}

.pace-zones-subtitle {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin-top: var(--space-xs);
}

/* Fitness Comparison */
.fitness-comparison {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}

.fitness-stat {
    text-align: center;
    min-width: 100px;
}

.fitness-stat .fitness-label {
    display: block;
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
}

.fitness-stat .fitness-value {
    display: block;
    font-size: var(--font-xl);
    font-weight: 700;
    line-height: 1.2;
}

.fitness-stat.current .fitness-value {
    color: var(--text-secondary);
}

.fitness-stat.goal .fitness-value {
    color: var(--accent);
}

.fitness-stat .fitness-pace {
    display: block;
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.fitness-arrow {
    font-size: var(--font-xl);
    color: var(--text-muted);
}

.fitness-improvement {
    width: 100%;
    text-align: center;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border);
    margin-top: var(--space-sm);
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.fitness-improvement span {
    font-weight: 600;
    color: var(--accent);
}

/* Pace Zones Grid */
.pace-zones-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
}

.pace-zone {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    text-align: center;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.pace-zone:hover {
    transform: translateY(-2px);
    box-shadow: none;
}

.pace-zone .zone-header {
    margin-bottom: var(--space-xs);
}

.pace-zone .zone-name {
    display: block;
    font-size: var(--font-sm);
    font-weight: 600;
    color: white;
}

.pace-zone .zone-hr {
    display: block;
    font-size: var(--font-xs);
    color: var(--on-color-medium);
}

.pace-zone .zone-pace {
    font-size: var(--font-md);
    font-weight: 700;
    color: var(--on-color);
    margin: var(--space-xs) 0;
}

.pace-zone .zone-hr-bpm {
    font-size: var(--font-xs);
    color: var(--on-color-high);
}

/* Zone colors */
.pace-zone.recovery {
    background: var(--zone-recovery-gradient);
}

.pace-zone.easy {
    background: var(--zone-easy-gradient);
}

.pace-zone.aerobic {
    background: var(--zone-aerobic-gradient);
}

.pace-zone.tempo {
    background: var(--zone-tempo-gradient);
}

.pace-zone.tempo .zone-name,
.pace-zone.tempo .zone-pace,
.pace-zone.tempo .zone-hr,
.pace-zone.tempo .zone-hr-bpm {
    color: var(--text);
}

.pace-zone.tempo .zone-hr {
    color: var(--on-color-muted);
}

.pace-zone.threshold {
    background: var(--zone-threshold-gradient);
}

.pace-zone.speed {
    background: var(--zone-speed-gradient);
}

/* Max HR Input */
.max-hr-input {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border);
}

.max-hr-input > label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--primary);
    margin-bottom: var(--space-sm);
}

.max-hr-input > label i {
    color: var(--error);
}

.max-hr-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    max-width: 150px;
}

.max-hr-row input {
    flex: 1;
    text-align: center;
}

.max-hr-unit {
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.max-hr-input .onboarding-hint {
    margin-top: var(--space-xs);
}

@media (max-width: 600px) {
    .pace-zones-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fitness-comparison {
        gap: var(--space-md);
    }

    .fitness-stat {
        min-width: 80px;
    }

    .fitness-stat .fitness-value {
        font-size: var(--font-lg);
    }
}

@media (max-width: 400px) {
    .pace-zones-grid {
        grid-template-columns: 1fr 1fr;
    }

    .pace-zone {
        padding: var(--space-sm);
    }

    .pace-zone .zone-pace {
        font-size: var(--font-sm);
    }
}

@media (max-width: 480px) {
    .onboarding-container {
        padding: 1.5rem 1.2rem;
    }

    .onboarding-header h1 {
        font-size: 1.4rem;
    }

    .onboarding-times-grid {
        grid-template-columns: 1fr;
    }

    .intensity-group {
        flex-wrap: wrap;
    }

    .intensity-group .onboarding-option-btn {
        min-width: calc(50% - 2px);
        flex: unset;
    }

    .upcoming-race-entry {
        grid-template-columns: 1fr 1fr 36px;
        grid-template-rows: auto auto;
    }

    .upcoming-race-entry .race-name-input {
        grid-column: 1 / 3;
    }

    .upcoming-race-entry .race-date-input {
        grid-column: 1 / 2;
    }

    .upcoming-race-entry .race-distance-input {
        grid-column: 2 / 3;
    }

    .upcoming-race-entry .race-goal-input {
        grid-column: 1 / 2;
        grid-row: 3;
    }

    .upcoming-race-entry .remove-race-btn {
        grid-column: 3;
        grid-row: 1 / 3;
    }
}

/* ============================================
   ADD RACE MODAL
   ============================================ */

.add-race-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--modal-backdrop);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9500; /* Above onboarding page (9000) */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast), backdrop-filter var(--transition-fast);
    padding: var(--space-xl);
}

.add-race-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.add-race-modal {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 400px;
    box-shadow: none;
    transform: scale(0.9) translateY(40px);
    opacity: 0;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.add-race-modal-overlay.active .add-race-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Add race modal uses standard .modal-header with custom padding */
.add-race-modal .modal-header {
    padding: var(--space-xl) var(--space-2xl);
    margin-bottom: 0;
    padding-bottom: var(--space-xl);
}

.add-race-modal-body {
    padding: var(--space-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.add-race-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.add-race-field label {
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* .optional-tag in add-race inherits from global .optional-tag */

.add-race-input {
    width: 100%;
    padding: var(--input-padding);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    background: var(--input-bg);
    color: var(--input-text);
    font-size: var(--input-font-size);
    font-family: var(--input-font-family);
    font-weight: var(--input-font-weight);
    transition: border-color var(--transition-fast);
}

.add-race-input.custom-select {
    padding: 0;
    border: none;
    background: transparent;
}

.add-race-input.custom-select .custom-select-trigger {
    height: auto;
    padding: var(--input-padding);
    padding-right: calc(var(--input-padding) + 16px);
    font-size: var(--input-font-size);
    font-weight: var(--input-font-weight);
    border: 1px solid var(--input-border);
    background: var(--input-bg);
}

.add-race-input:hover {
    border-color: var(--input-border-hover);
}

.add-race-input:focus {
    outline: none;
    border-color: var(--input-border-focus);
}

.add-race-input::placeholder {
    color: var(--input-placeholder);
    opacity: 0.7;
}

/* Date input styling for modal */
.add-race-input[type="date"] {
    cursor: pointer;
}

.add-race-input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

.add-race-input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Race Priority Options */
.race-priority-options {
    display: flex;
    gap: var(--space-sm);
}

.race-priority-option {
    flex: 1;
    cursor: pointer;
}

.race-priority-option input[type="radio"] {
    display: none;
}

.priority-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-md);
    border: 1px solid var(--border);
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.priority-label i {
    font-size: var(--font-sm);
}

.race-priority-option input[type="radio"]:checked + .priority-label {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--bg);
}

.priority-label:hover {
    border-color: var(--text-muted);
}

.race-priority-option input[type="radio"]:checked + .priority-label:hover {
    border-color: var(--primary-dark);
    background: var(--primary-dark);
}

/* Priority color indicators */
.priority-high i { color: var(--warning); }
.priority-medium i { color: var(--info); }
.priority-low i { color: var(--success); }

.race-priority-option input[type="radio"]:checked + .priority-label i {
    color: var(--bg);
}

.add-race-modal-footer {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-xl) var(--space-2xl);
    border-top: 1px solid var(--border);
    justify-content: flex-end;
}

.add-race-cancel-btn {
    padding: 0.5rem 1.3rem;
    border: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.add-race-cancel-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.add-race-save-btn {
    padding: 0.5rem 1.3rem;
    border: none;
    border-radius: 0;
    background: var(--accent);
    color: white;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.add-race-save-btn:hover {
    background: var(--accent-dark);
}

.add-race-save-btn:active {
    transform: scale(0.98);
}

/* Race card display in list */
.race-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-lg) var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    box-shadow: none;
}

.race-card-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1;
    min-width: 0;
}

.race-card-name {
    font-weight: 600;
    font-size: var(--font-md);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.race-card-details {
    font-size: var(--font-sm);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.race-card-details span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.race-card-priority {
    font-weight: 500;
}

.race-card-priority.priority-high {
    color: var(--warning);
}

.race-card-priority.priority-medium {
    color: var(--info);
}

.race-card-priority.priority-low {
    color: var(--success);
}

.race-card-goal {
    background: var(--accent);
    color: white;
    padding: var(--space-xs) 10px;
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    font-weight: 600;
    white-space: nowrap;
}

.race-card-actions {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    flex-shrink: 0;
}

.race-card-edit,
.race-card-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
}

.race-card-edit:hover {
    color: var(--primary);
    background: var(--info-bg-dim);
}

.race-card-remove:hover {
    color: var(--error);
    background: var(--error-bg-dim);
}

/* ==========================================================================
   Plan Switching Loading Overlay
   ========================================================================== */

.plan-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--modal-backdrop);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.plan-loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

.plan-loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: var(--radius-full);
    animation: plan-spinner-rotate 0.8s linear infinite;
}

@keyframes plan-spinner-rotate {
    to {
        transform: rotate(360deg);
    }
}

.plan-loading-text {
    margin-top: var(--space-lg);
    font-size: var(--font-lg);
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
}

/* ============================================
   ACCESSIBILITY: Reduced Motion Support
   WCAG 2.3.3 Animation from Interactions
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   MENTAL HEALTH / RESEARCH PAGE STYLES
   ============================================ */

/* Mental Health Page - Nav */
.mh-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0.8rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(10,10,10,.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    transition: all var(--transition-fast);
}

[data-theme="light"] .mh-nav {
    background: rgba(242,241,238,.94);
}

.mh-nav-l {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--text);
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    text-decoration: none;
}

.mh-nav-l span {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.5rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
}

.mh-nav-r {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.mh-nav-r a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    transition: color var(--transition-fast);
}

.mh-nav-r a:hover {
    color: var(--text);
}

.mh-nav-r a.active {
    color: var(--accent);
}

/* Mental Health Page - Hero */
.mh-hero {
    min-height: 100vh;
    padding: 0 2.5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    background: linear-gradient(to bottom,
        rgba(11, 11, 11, 0.3) 0%,
        rgba(11, 11, 11, 0.6) 50%,
        rgba(11, 11, 11, 0.95) 100%
    ), url('assets/img/photo-1552674605-db6ffd4facb5.jpeg') center/cover no-repeat;
    background-color: #0B0B0B;
}

.mh-hero-content {
    max-width: 700px;
    position: relative;
    z-index: 2;
}

.mh-hero-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(3.5rem, 10vw, 7rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
    color: #fff;
}

.mh-hero-title span {
    display: block;
}

.mh-hero-title em {
    font-style: italic;
    color: var(--accent);
}

.mh-hero-title .mh-typed-word {
    display: block;
    border-right: 0.08em solid var(--text);
    padding-right: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    animation: mh-cursor 0.75s step-end infinite;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    min-height: 1em;
}

@keyframes mh-cursor {
    0%, 50% { border-color: var(--text); }
    51%, 100% { border-color: transparent; }
}

.mh-hero-desc {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.8;
    max-width: 600px;
    border-left: 1px solid var(--border);
    padding-left: 1.5rem;
}

/* Mental Health Page - Table of Contents */
.mh-toc {
    padding: 3rem 2.5rem;
    max-width: 1400px;
    margin: 0 auto;
    border-bottom: 1px solid var(--border);
}

.mh-toc-header {
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.mh-toc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.mh-toc-item {
    padding: 1rem 1.5rem 1rem 0;
    border-right: 1px solid var(--border);
    transition: all var(--transition-fast);
}

.mh-toc-item:nth-child(4n) {
    border-right: none;
}

.mh-toc-item:nth-child(n+5) {
    border-top: 1px solid var(--border);
}

.mh-toc-item a {
    text-decoration: none;
    color: var(--text);
    display: block;
}

.mh-toc-item:hover {
    background: rgba(255, 45, 45, 0.06);
}

[data-theme="light"] .mh-toc-item:hover {
    background: rgba(196, 24, 24, 0.05);
}

.mh-toc-num {
    font-size: 0.5rem;
    color: var(--accent);
    letter-spacing: 0.15em;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.mh-toc-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 0.3rem;
}

.mh-toc-desc {
    font-size: 0.6rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Mental Health Page - Philosophy */
.mh-phil {
    padding: 5rem 2.5rem;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 4rem;
    border-bottom: 1px solid var(--border);
}

.mh-phil-left {
    border-right: 1px solid var(--border);
    padding-right: 2rem;
}

.mh-phil-kanji {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 5rem;
    line-height: 0.9;
    color: var(--text);
    margin-bottom: 1rem;
}

.mh-phil-rom {
    font-size: 0.55rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.mh-phil-def {
    font-size: 0.7rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

.mh-phil-def strong {
    color: var(--text);
    font-weight: 600;
}

.mh-phil-right h2 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.mh-phil-right h2 em {
    font-style: italic;
    color: var(--accent);
}

.mh-phil-body {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 2;
    max-width: 700px;
    margin-bottom: 2rem;
}

.mh-phil-principles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--border);
}

.mh-pp {
    padding: 1.2rem 1.5rem;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transition: background var(--transition-fast);
}

.mh-pp:nth-child(2n) {
    border-right: none;
}

.mh-pp:nth-child(n+3) {
    border-bottom: none;
}

.mh-pp:hover {
    background: rgba(255, 45, 45, 0.06);
}

[data-theme="light"] .mh-pp:hover {
    background: rgba(196, 24, 24, 0.05);
}

.mh-pp-head {
    font-size: 0.5rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.mh-pp-text {
    font-size: 0.7rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Mental Health Page - Research Section */
.mh-section {
    padding: 5rem 2.5rem;
    max-width: 1400px;
    margin: 0 auto;
    border-bottom: 1px solid var(--border);
}

.mh-section-header {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 2rem;
    align-items: start;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}

.mh-s-num {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 3.5rem;
    font-weight: 400;
    color: var(--accent);
    line-height: 0.85;
    letter-spacing: -0.03em;
}

.mh-s-tag {
    font-size: 0.5rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.mh-s-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 0.8rem;
}

.mh-s-finding {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.9;
    max-width: 700px;
    padding-left: 1.5rem;
    border-left: 2px solid var(--accent);
}

/* Mental Health Page - Research Grid */
.mh-research-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 3rem;
}

.mh-r-card {
    padding: 1.5rem;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transition: background var(--transition-fast);
}

.mh-r-card:nth-child(2n) {
    border-right: none;
}

.mh-r-card:hover {
    background: rgba(255, 45, 45, 0.06);
}

[data-theme="light"] .mh-r-card:hover {
    background: rgba(196, 24, 24, 0.05);
}

.mh-r-source {
    font-size: 0.5rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mh-r-year {
    color: var(--text-muted);
    letter-spacing: 0.08em;
}

.mh-r-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 0.6rem;
}

.mh-r-title a {
    color: var(--text);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.mh-r-title a:hover {
    color: var(--accent);
}

.mh-r-desc {
    font-size: 0.65rem;
    color: var(--text-muted);
    line-height: 1.7;
}

.mh-r-desc li {
    margin-bottom: 0.2rem;
    list-style: none;
    padding-left: 1em;
    position: relative;
}

.mh-r-desc li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--border);
}

/* Mental Health Page - Day Card Snippets */
.mh-snippets {
    margin-bottom: 2rem;
}

.mh-snippets-header {
    font-size: 0.5rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.mh-snippets-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.mh-snippet-group {
    margin-bottom: 1.5rem;
}

.mh-sg-label {
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.mh-sg-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.mh-sg-dot.easy { background: #3B82F6; }
.mh-sg-dot.long { background: #8B5CF6; }
.mh-sg-dot.hard { background: var(--accent); }
.mh-sg-dot.tanren { background: #F59E0B; }
.mh-sg-dot.any { background: var(--text-muted); }
.mh-sg-dot.morning { background: #F97316; }
.mh-sg-dot.rest { background: #10B981; }
.mh-sg-dot.interval { background: #EF4444; }

.mh-snippet-cards {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mh-snippet {
    padding: 0.6rem 1rem;
    background: var(--card-bg);
    border-left: 2px solid var(--border);
    font-size: 0.7rem;
    color: var(--text-secondary);
    line-height: 1.6;
    font-style: italic;
    transition: all var(--transition-fast);
}

.mh-snippet:hover {
    border-left-color: var(--accent);
    background: var(--bg-elevated);
    color: var(--text);
}

/* Mental Health Page - Tanren Connection Block */
.mh-tanren-block {
    background: rgba(255, 45, 45, 0.06);
    border: 1px solid rgba(255, 45, 45, 0.15);
    padding: 1.5rem 2rem;
    margin-top: 1rem;
}

[data-theme="light"] .mh-tanren-block {
    background: rgba(196, 24, 24, 0.05);
    border-color: rgba(196, 24, 24, 0.12);
}

.mh-tb-header {
    font-size: 0.5rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 0.8rem;
}

.mh-tb-items {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.mh-tb-item {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text);
    line-height: 1.5;
    padding-left: 1rem;
    border-left: 1px solid rgba(255, 45, 45, 0.15);
}

[data-theme="light"] .mh-tb-item {
    border-left-color: rgba(196, 24, 24, 0.12);
}

/* Mental Health Page - Implementation */
.mh-impl {
    padding: 5rem 2.5rem;
    max-width: 1400px;
    margin: 0 auto;
    border-bottom: 1px solid var(--border);
}

.mh-impl h2 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
}

.mh-impl-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--border);
    margin-bottom: 3rem;
}

.mh-impl-cell {
    padding: 1.2rem 1.5rem;
    border-right: 1px solid var(--border);
}

.mh-impl-cell:nth-child(4n) {
    border-right: none;
}

.mh-impl-cell:nth-child(n+5) {
    border-top: 1px solid var(--border);
}

.mh-ic-type {
    font-size: 0.5rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.mh-ic-type.easy { color: #3B82F6; }
.mh-ic-type.long { color: #8B5CF6; }
.mh-ic-type.tempo { color: #F59E0B; }
.mh-ic-type.rest { color: #10B981; }

.mh-ic-focus {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 0.4rem;
}

.mh-ic-tone {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Mental Health Page - References Table */
.mh-ref-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

.mh-ref-table th {
    font-size: 0.5rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    text-align: left;
    padding: 0.8rem 1rem;
    border-bottom: 2px solid var(--border);
}

.mh-ref-table td {
    font-size: 0.65rem;
    color: var(--text-secondary);
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border);
    line-height: 1.5;
    vertical-align: top;
}

.mh-ref-table tr:hover td {
    color: var(--text);
    background: rgba(255, 45, 45, 0.06);
}

[data-theme="light"] .mh-ref-table tr:hover td {
    background: rgba(196, 24, 24, 0.05);
}

.mh-ref-table td:first-child {
    font-weight: 600;
    color: var(--text);
}

.mh-ref-table td:nth-child(3) {
    color: var(--text-muted);
}

/* Mental Health Page - Summary */
.mh-summary {
    padding: 6rem 2.5rem;
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

.mh-summary-tag {
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.mh-summary h2 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin-bottom: 2rem;
}

.mh-summary h2 em {
    font-style: italic;
    color: var(--accent);
}

.mh-summary-body {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 2;
    max-width: 600px;
    margin: 0 auto 3rem;
}

.mh-summary-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    max-width: 900px;
    margin: 0 auto 3rem;
    border: 1px solid var(--border);
}

.mh-sp {
    padding: 2rem 1.5rem;
    border-right: 1px solid var(--border);
    text-align: center;
    transition: background var(--transition-fast);
}

.mh-sp:last-child {
    border-right: none;
}

.mh-sp:hover {
    background: rgba(255, 45, 45, 0.06);
}

[data-theme="light"] .mh-sp:hover {
    background: rgba(196, 24, 24, 0.05);
}

.mh-sp-icon {
    font-size: 1.5rem;
    margin-bottom: 0.8rem;
    opacity: 0.6;
}

.mh-sp-label {
    font-size: 0.5rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.mh-sp-text {
    font-size: 0.68rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.mh-summary-kanji {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 3.5rem;
    color: var(--text);
    opacity: 0.15;
    letter-spacing: 0.2em;
}

/* Mental Health Page - Footer */
.mh-footer {
    border-top: 1px solid var(--border);
    padding: 2rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.mh-ft-brand {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.mh-ft-links {
    display: flex;
    gap: 1.5rem;
}

.mh-ft-links a {
    font-size: 0.55rem;
    color: var(--text-muted);
    text-decoration: none;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    transition: color var(--transition-fast);
}

.mh-ft-links a:hover {
    color: var(--text);
}

/* Mental Health Page - Animations */
.mh-anim {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mh-anim.v {
    opacity: 1;
    transform: none;
}

.mh-anim-d1 { transition-delay: 0.1s; }
.mh-anim-d2 { transition-delay: var(--transition-fast); }
.mh-anim-d3 { transition-delay: var(--transition-fast); }
.mh-anim-d4 { transition-delay: 0.4s; }

/* Mental Health Page - Responsive */
@media (max-width: 1000px) {
    .mh-hero {
        padding: 0 1.5rem 2rem;
        min-height: 90vh;
    }

    .mh-hero-title {
        font-size: clamp(2.8rem, 12vw, 5rem);
    }

    .mh-hero-desc {
        font-size: 0.7rem;
    }

    .mh-toc-grid {
        grid-template-columns: 1fr 1fr;
    }

    .mh-toc-item:nth-child(2n) {
        border-right: none;
    }

    .mh-toc-item:nth-child(n+3) {
        border-top: 1px solid var(--border);
    }

    .mh-phil {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .mh-phil-left {
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding-right: 0;
        padding-bottom: 2rem;
    }

    .mh-research-grid {
        grid-template-columns: 1fr;
    }

    .mh-r-card {
        border-right: none;
    }

    .mh-impl-grid {
        grid-template-columns: 1fr 1fr;
    }

    .mh-impl-cell:nth-child(2n) {
        border-right: none;
    }

    .mh-impl-cell:nth-child(n+3) {
        border-top: 1px solid var(--border);
    }

    .mh-summary-pillars {
        grid-template-columns: 1fr;
    }

    .mh-sp {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .mh-sp:last-child {
        border-bottom: none;
    }
}

@media (max-width: 600px) {
    .mh-nav {
        padding: 0.8rem 1.2rem;
    }

    .mh-nav-l span {
        display: none;
    }

    .mh-nav-r a:not(.active) {
        display: none;
    }

    .mh-hero {
        padding: 0 1.2rem 2rem;
        min-height: 85vh;
    }

    .mh-hero-title {
        font-size: clamp(2.5rem, 14vw, 4rem);
    }

    .mh-hero-desc {
        font-size: 0.65rem;
        line-height: 1.7;
    }

    .mh-toc {
        padding: 2rem 1.2rem;
    }

    .mh-toc-grid {
        grid-template-columns: 1fr;
    }

    .mh-toc-item {
        border-right: none !important;
    }

    .mh-toc-item:nth-child(n+2) {
        border-top: 1px solid var(--border);
    }

    .mh-phil {
        padding: 3rem 1.2rem;
    }

    .mh-phil-principles {
        grid-template-columns: 1fr;
    }

    .mh-pp {
        border-right: none !important;
        border-bottom: 1px solid var(--border);
    }

    .mh-pp:last-child {
        border-bottom: none;
    }

    .mh-section {
        padding: 3rem 1.2rem;
    }

    .mh-section-header {
        grid-template-columns: 50px 1fr;
        gap: 1rem;
    }

    .mh-s-num {
        font-size: 2.5rem;
    }

    .mh-impl {
        padding: 3rem 1.2rem;
    }

    .mh-impl-grid {
        grid-template-columns: 1fr;
    }

    .mh-impl-cell {
        border-right: none !important;
    }

    .mh-summary {
        padding: 4rem 1.2rem;
    }

    .mh-footer {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        padding: 1.5rem 1.2rem;
    }

    .mh-ref-table {
        display: block;
        overflow-x: auto;
    }
}

/* ============================================
   BLANK PLANNER STYLES
   ============================================ */

/* Plan Type Choice Modal */
.plan-type-choice-modal {
    max-width: 480px;
}

.plan-type-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-xl) var(--space-xl) var(--space-lg);
}

.plan-type-option {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    border: 1px solid var(--border);
    background: var(--bg);
    cursor: pointer;
    text-align: left;
    transition: all var(--transition-fast);
    color: var(--text);
    font-family: inherit;
}

.plan-type-option:hover {
    border-color: var(--accent);
    background: var(--accent-bg);
}

.plan-type-option-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--accent);
    flex-shrink: 0;
}

.plan-type-option-info h3 {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 0.3rem;
}

.plan-type-option-info p {
    font-size: 0.6rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.plan-type-option > i.fa-chevron-right {
    color: var(--text-muted);
    font-size: 0.6rem;
    margin-left: auto;
    flex-shrink: 0;
}

/* Blank Plan Creation Modal */
.blank-plan-creation-modal {
    max-width: 480px;
}

.blank-plan-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-xl);
}

.blank-plan-goal-section {
    border-top: 1px solid var(--border);
    padding-top: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.blank-plan-section-label {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.blank-plan-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

/* Add Workout Modal */
.add-workout-modal {
    max-width: 480px;
}

.add-workout-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-xl);
}

.add-workout-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.add-workout-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-lg);
}

.add-workout-form-actions-right {
    display: flex;
    gap: var(--space-md);
}

#addWorkoutDeleteBtn {
    color: var(--danger);
    border-color: var(--danger);
}

#addWorkoutDeleteBtn:hover {
    background: var(--danger);
    color: var(--bg);
}

/* Subtype grid (in add-workout modal) */
.blank-planner-subtype-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.blank-planner-subtype-btn {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.blank-planner-subtype-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.blank-planner-subtype-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
}

/* Blank Plan Header */
.blank-plan-header {
    padding: var(--space-lg) 0;
    margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--border);
}

.blank-plan-header-info {
    display: flex;
    align-items: baseline;
    gap: var(--space-lg);
}

.blank-plan-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--text);
    margin: 0;
}

.blank-plan-goal {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

/* Blank Plan Empty Day Dot */
.calendar-dot.blank-empty {
    background: var(--blank-empty-bg);
    border: 1px dashed var(--blank-empty-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.calendar-dot.blank-empty:hover {
    border-color: var(--accent);
    border-style: solid;
    background: var(--accent);
}

.blank-add-icon {
    font-size: 0.45rem;
    color: var(--blank-add-icon);
    transition: color var(--transition-fast);
}

.calendar-dot.blank-empty:hover .blank-add-icon {
    color: var(--bg);
}

/* Blank Plan Table Row - Empty */
.table-day-row.blank-empty-row {
    opacity: 0.6;
}

.table-day-row.blank-empty-row:hover {
    opacity: 1;
}

.blank-add-workout-btn {
    background: none;
    border: 1px dashed var(--border);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    padding: 0.15rem 0.5rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.blank-add-workout-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Blank workout subtype label in table view */
.blank-workout-subtype {
    font-size: 0.55rem;
    color: var(--text-muted);
}

/* Plan Type Badge (sidebar) */
.plan-type-badge {
    font-family: var(--font-mono);
    font-size: 0.45rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.plan-type-badge.blank {
    border-color: var(--accent);
    color: var(--accent);
}

/* Blank Plan Races Section (in creation modal) */
.blank-plan-races-section {
    border-top: 1px solid var(--border);
    padding-top: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Workout Type Dropdown on Blank Plan Calendar Dots */
.calendar-day-cell[data-blank-plan="true"] {
    position: relative;
}

.calendar-day-cell[data-blank-plan="true"] .workout-type-dropdown {
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
}

/* Prevent dropdown overflow on edge columns of the 7-day grid */
/* First 3 columns (S, M, T): align left */
.calendar-days-grid > .calendar-day-cell[data-blank-plan="true"]:nth-child(-n+3) .workout-type-dropdown {
    left: 0;
    right: auto;
    transform: none;
}
/* Last 3 columns (T, F, S): align right */
.calendar-days-grid > .calendar-day-cell[data-blank-plan="true"]:nth-child(n+5) .workout-type-dropdown {
    left: auto;
    right: 0;
    transform: none;
}

/* Elevate calendar week when dropdown is open so it renders above sibling weeks */
.calendar-week:has(.workout-type-dropdown.open) {
    position: relative;
    z-index: 10;
}

/* Workout Type Dropdown on Blank Plan Table Rows */
.table-day-row[data-blank-plan="true"] .workout-type-container {
    position: relative;
}

/* Blank Plan Mobile Responsive */
@media (max-width: 480px) {
    .plan-type-choice-modal,
    .blank-plan-creation-modal {
        width: 100%;
        max-height: 95vh;
    }

    .blank-plan-header-info {
        flex-direction: column;
        gap: var(--space-sm);
    }

    /* Prevent dropdown overflow on small screens */
    .calendar-day-cell[data-blank-plan="true"] .workout-type-dropdown {
        left: 0;
        transform: none;
        min-width: 160px;
    }
}

/* ============================================
   PHASE EDITOR
   ============================================ */

#phase-editor-view {
    display: none;
    padding: var(--space-md) 0;
}

#phase-editor-view.active {
    display: block;
}

.phase-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}

.phase-editor-header h2 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text);
    letter-spacing: -0.02em;
    margin: 0;
}

.phase-editor-done-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.4rem 1rem;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.phase-editor-done-btn:hover {
    background: var(--btn-primary-bg-hover);
}

/* Phase Card */
.phase-editor-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    overflow: visible;
    transition: border-color var(--transition-fast), opacity var(--transition-fast);
}

/* Locked phase cards (contain past/in-progress weeks) — cannot be reordered */
.phase-editor-card.phase-editor-card-locked {
    /* No visual dimming — still fully interactive for week editing, just not draggable */
}

/* Hidden phase cards (phaseVisible=false) — faded to indicate not shown in plan view */
.phase-editor-card.phase-editor-card-hidden {
    opacity: 0.45;
}

/* Phase card drag handle */
.phase-editor-card-drag-handle {
    color: var(--text-muted);
    cursor: grab;
    font-size: var(--font-sm);
    opacity: 0.4;
    transition: opacity var(--transition-fast);
    padding: 2px 0;
}

.phase-editor-card-header:hover .phase-editor-card-drag-handle {
    opacity: 0.8;
}

/* Locked phase card drag handle — shows lock, not draggable */
.phase-editor-card-locked .phase-editor-card-drag-handle {
    cursor: default;
    opacity: 0.3;
}

.phase-editor-card-locked .phase-editor-card-drag-handle:hover {
    opacity: 0.3;
}

/* Phase card SortableJS states */
.phase-editor-card.phase-editor-card-ghost {
    opacity: 0.3;
    border-style: dashed;
}

.phase-editor-card.phase-editor-card-chosen {
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.phase-editor-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
}

.phase-editor-name-group {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex: 1;
}

.phase-editor-name {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--text);
    letter-spacing: -0.02em;
    margin: 0;
}

.phase-editor-rename-btn,
.phase-editor-delete-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    transition: color var(--transition-fast);
}

.phase-editor-rename-btn:hover {
    color: var(--text);
}

.phase-editor-delete-btn:hover {
    color: var(--accent);
}

.phase-editor-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.phase-editor-week-count {
    font-size: var(--font-xs);
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Week List (droppable container) */
.phase-editor-weeks {
    padding: 0 var(--space-xs);
}

/* Empty phase placeholder text */
.phase-editor-weeks:empty::after {
    content: "Drag weeks here";
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    color: var(--text-muted);
    font-size: var(--font-sm);
    font-style: italic;
    opacity: 0.6;
}

/* Week Row (draggable) */
.phase-editor-week-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    margin: var(--space-xs) 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: grab;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.phase-editor-week-row:hover {
    border-color: var(--text-muted);
}

.phase-editor-week-row:active {
    cursor: grabbing;
}

.phase-editor-week-drag-handle {
    color: var(--text-muted);
    cursor: grab;
    font-size: var(--font-sm);
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.phase-editor-week-row:hover .phase-editor-week-drag-handle {
    opacity: 1;
}

/* Locked weeks (past or in-progress) — cannot be dragged or rearranged */
.phase-editor-week-row.phase-editor-week-locked {
    cursor: default;
    opacity: 0.6;
}
.phase-editor-week-row.phase-editor-week-locked:hover {
    border-color: var(--border);
}
.phase-editor-week-row.phase-editor-week-locked:active {
    cursor: default;
}
.phase-editor-week-row.phase-editor-week-locked .phase-editor-week-drag-handle {
    cursor: default;
    opacity: 0.4;
}
.phase-editor-week-row.phase-editor-week-locked:hover .phase-editor-week-drag-handle {
    opacity: 0.4;
}

.phase-editor-week-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.phase-editor-week-label {
    font-weight: 600;
    font-size: var(--font-sm);
    color: var(--text);
    min-width: 65px;
}

.phase-editor-week-dates {
    color: var(--text-secondary);
    font-size: var(--font-xs);
}

.phase-editor-week-volume {
    color: var(--text-secondary);
    font-size: var(--font-xs);
    min-width: 55px;
    text-align: right;
    font-weight: 500;
}

.phase-editor-week-delete-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    font-size: var(--font-xs);
    opacity: 0;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}

.phase-editor-week-row:hover .phase-editor-week-delete-btn {
    opacity: 1;
}

.phase-editor-week-delete-btn:hover {
    color: var(--error);
}

/* Name Input (inline rename + create) */
.phase-editor-name-input {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    padding: 2px 8px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    outline: none;
    width: 220px;
}

.phase-editor-name-input::placeholder {
    color: var(--text-muted);
}

/* Create Phase Button */
.phase-editor-create-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    width: 100%;
    padding: var(--space-md);
    margin-top: var(--space-sm);
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--font-sm);
    font-weight: 500;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.phase-editor-create-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Add Week Button (inside each phase card) */
.phase-editor-add-week-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    width: 100%;
    padding: var(--space-sm);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--font-xs);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.phase-editor-add-week-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}

.phase-editor-add-week-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Create Input Wrapper */
.phase-editor-create-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    margin-top: var(--space-sm);
    border: 2px solid var(--accent);
    border-radius: var(--radius-md);
    background: var(--card-bg);
}

/* SortableJS ghost in phase editor */
.phase-editor-week-row.sortable-ghost {
    opacity: 0.3;
    border-style: dashed;
}

.phase-editor-week-row.sortable-chosen {
    border-color: var(--accent);
    background: var(--bg2);
}

/* Edit Phases option in phase filter dropdown */
.phase-edit-option {
    margin-top: 4px;
    padding-top: 8px;
}

.phase-edit-option i {
    margin-right: var(--space-xs);
    font-size: var(--font-xs);
}

/* Phase Delete Confirmation */
.phase-delete-confirm p {
    margin: 0 0 var(--space-md) 0;
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.phase-delete-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.phase-delete-options button {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast);
    width: 100%;
    justify-content: center;
}

.phase-delete-move-btn {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
}

.phase-delete-move-btn:hover {
    background: var(--btn-primary-bg-hover);
}

.phase-delete-remove-btn {
    background: none;
    border: 1px solid var(--accent);
    color: var(--accent);
}

.phase-delete-remove-btn:hover {
    background: var(--accent);
    color: var(--btn-primary-text);
}

.phase-delete-cancel-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.phase-delete-cancel-btn:hover {
    border-color: var(--text-secondary);
    color: var(--text);
}

/* Phase Editor — Overview & Analysis Sections */
.phase-editor-overview,
.phase-editor-analysis {
    padding: var(--space-xs);
}

.phase-editor-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-md);
    height: 36px;
    background: var(--bg);
    border: 1px solid var(--border);
}

.phase-editor-section-toggle {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    letter-spacing: var(--label-letter-spacing-sm);
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color var(--transition-fast);
}
.phase-editor-section-toggle:hover {
    color: var(--text);
}
.phase-editor-section-toggle > i:first-child {
    font-size: var(--font-xs);
    color: var(--text-muted);
}
.phase-editor-section-toggle .toggle-icon {
    font-size: 0.5rem;
    color: var(--text-muted);
    transition: transform var(--transition-fast);
    margin-left: 2px;
}
.phase-editor-overview.expanded .toggle-icon,
.phase-editor-analysis.expanded .toggle-icon {
    transform: rotate(180deg);
}

.phase-editor-section-controls {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.phase-editor-type-select {
    min-width: 0;
}

.phase-editor-type-select .custom-select-trigger {
    height: auto;
    padding: 3px 24px 3px 8px;
    font-size: var(--select-font-size);
    font-weight: var(--select-font-weight);
}

.phase-editor-type-select .custom-select-dropdown {
    min-width: 140px;
}

.phase-editor-visibility-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 3px 5px;
    border-radius: 0;
    font-size: var(--font-xs);
    transition: all var(--transition-fast);
}
.phase-editor-visibility-btn:hover {
    color: var(--text);
    border-color: var(--border);
}
.phase-editor-visibility-btn[data-visible="false"] {
    opacity: 0.35;
}
.phase-editor-visibility-btn[data-visible="false"]:hover {
    opacity: 0.7;
}

.phase-editor-section-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--transition-fast), opacity var(--transition-fast), padding var(--transition-fast);
    padding: 0 var(--space-md);
}
.phase-editor-overview.expanded .phase-editor-section-content,
.phase-editor-analysis.expanded .phase-editor-section-content {
    max-height: 5000px;
    opacity: 1;
    padding: var(--space-sm) var(--space-md) var(--space-md);
    overflow-y: visible;
}
.phase-editor-overview.expanded,
.phase-editor-analysis.expanded {
    border-bottom: 1px solid var(--border);
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .phase-editor-week-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .phase-editor-week-volume {
        text-align: right;
    }

    .phase-editor-name-input {
        width: 160px;
    }

    .phase-editor-create-input-wrapper {
        flex-wrap: wrap;
    }
}