/* Legacy Styles Imports */
/* styles/theme.css */
/* Tell the browser which scheme its NATIVE controls should use.
 *
 * Nothing in the app declared color-scheme, so Chrome drew every native widget it owns -- select
 * popups, scrollbars, date pickers, spinners, the text-selection handles -- in LIGHT mode, on
 * top of our dark surfaces. On a Pixel that turned category dropdowns into black boxes with
 * light-mode chrome. This one declaration hands the platform the information it was missing, and
 * it must track data-theme rather than be hardcoded, because the app has a real light mode.
 */
:root,
[data-theme='light'] {
    color-scheme: light;
}
[data-theme='dark'] {
    color-scheme: dark;
}
/* Light Mode (Default) - Unchanged */
:root,
[data-theme='light'] {
    --primary-color: #10b981;
    --primary-color-rgb: 16, 185, 129;
    /* RGB channel lists, for rgba() composition.
       Fifteen of these were referenced across the app and two were defined, so every
       rgba(var(--...-rgb), ...) built on a missing one resolved to an invalid colour, the whole
       declaration was dropped, and the background it was meant to paint silently disappeared -
       which is how the Health sub-nav ended up as three green bars on no track (2026-09-17).
       The doubled names (--primary-rgb / --primary-color-rgb) are naming drift in the
       components; both spellings are defined so neither one breaks. */
    --primary-rgb: 16, 185, 129;
    --secondary-color-rgb: 100, 116, 139;
    --secondary-rgb: 100, 116, 139;
    --accent-color-rgb: 16, 185, 129;
    --accent-rgb: 16, 185, 129;
    --background-rgb: 249, 250, 251;
    --surface-color-rgb: 255, 255, 255;
    --text-color-rgb: 15, 23, 42;
    --text-secondary-color-rgb: 100, 116, 139;
    --success-color-rgb: 16, 185, 129;
    --success-rgb: 16, 185, 129;
    --error-color-rgb: 239, 68, 68;
    --error-rgb: 239, 68, 68;
    --primary-color-translucent: rgba(16, 185, 129, 0.15);
    --secondary-color: #64748b;
    --background-color: #f9fafb;
    --surface-color: #ffffff;
    --surface-color-hover: #f1f5f9;
    --border-color: #e2e8f0;
    --text-color: #0f172a;
    --text-secondary-color: #64748b;
    --success-color: #10b981;
    --error-color: #ef4444;
    /* Used by 19 components and defined nowhere until 2026-10-09: a "Fair" nutrition score drew
       no ring at all. Amber 700 keeps 4.5:1 as text on the light surfaces. */
    --warning-color: #b45309;
    --primary-color-10: rgba(16, 185, 129, 0.10);
    --primary-color-20: rgba(16, 185, 129, 0.20);
    --carbs-color: #f59e0b;
    /* Text-weight steps of the brand and warning hues (UX-13): the bright fills are 2.5:1 and
       2.2:1 as text on white. The button fill is the same deep emerald so white text on it is
       5.5:1 (UX-03); rings, bars and tints keep --primary-color. */
    --primary-text: #047857;
    --warning-text: #b45309;
    --primary-fill: #047857;
    /* An inner panel on a card. #f1f5f9 (the hover step) took secondary text to 4.3:1; this
       keeps it at 4.5:1. Dark: the hover step, where contrast is ample. */
    --surface-inset: #f8fafc;
    /* Two names components used and no sheet declared, so their backgrounds were transparent
       (UX-16). New code uses --surface-color-hover. */
    --surface-hover: var(--surface-color-hover);
    --surface-bg-hover: var(--surface-color-hover);
    /* Protein had the brand emerald, so a protein bar read as "primary" (audit NU-17). Blue and
       red are their own hues; both pass 4.5:1 as text on the light surfaces. */
    --protein-color: #2563eb;
    --protein-color-rgb: 37, 99, 235;
    --calories-color: #dc2626;
    --calories-color-rgb: 220, 38, 38;
    --fat-color: #ec4899;
    --gold-color: #fbbf24;

    /* Input & Form Control Tokens (Light Mode) */
    --input-bg: #ffffff;
    --input-border: #d1d5db;
    --input-border-hover: #9ca3af;
    --input-focus-border: #10b981;
    --input-focus-glow: rgba(16, 185, 129, 0.15);
    --input-placeholder: #9ca3af;
    --caret-color: #0f172a;

    /* Mobile Safe Area Insets */
    --safe-area-top: env(safe-area-inset-top, var(--safe-area-inset-top, 0px));
    --safe-area-bottom: env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px));

    /* ============================================
       DESIGN SCALES — added 2026-07-24
       The palette was tokenized; type/space/radius/elevation were not, so every
       component improvised. Live audit found 21 font sizes, 10 radii and 17 shadows
       on the dashboard alone, and 58 text nodes below 11px.
       Use ONLY these. See VISUAL_DESIGN_PROMPTS.md.
       ============================================ */

    /* Type — 12px is a hard floor (iOS HIG minimum is ~11pt). Never go below --text-2xs. */
    --text-2xs: 0.75rem;    /* 12px — smallest permitted; labels, units */
    --text-xs: 0.8125rem;   /* 13px — captions, metadata */
    --text-sm: 0.875rem;    /* 14px — secondary body */
    --text-md: 1rem;        /* 16px — body default */
    --text-lg: 1.125rem;    /* 18px — emphasis, card titles */
    --text-xl: 1.5rem;      /* 24px — section titles */
    --text-2xl: 2rem;       /* 32px — page titles, hero stats */
    --text-3xl: 3rem;       /* 48px — display only */

    /* Weight */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Radius — four values. Cards are --radius-md; pills are --radius-full. */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    /* Spacing — 4px base, 8px rhythm */
    --space-1: 0.25rem;  /* 4  */
    --space-2: 0.5rem;   /* 8  */
    --space-3: 0.75rem;  /* 12 */
    --space-4: 1rem;     /* 16 */
    --space-5: 1.5rem;   /* 24 */
    --space-6: 2rem;     /* 32 */
    --space-8: 3rem;     /* 48 */

    /* Elevation — three levels, theme-aware (redefined for dark below) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10);

    /* Z-Index Hierarchy & Layout Constants */
    --z-content: 10;
    --z-nav: 100;
    --z-modal-overlay: 1000;
    --z-modal-content: 1001;
    --z-toast: 2000;
    --tab-nav-height: 70px;

    /* New UI Variables */
    --success-active: #10b981;
    --success-active-dark: #059669;
    --error-bg: rgba(239, 68, 68, 0.1);
    --surface-rgb: 255, 255, 255;
    --text-light: #ffffff;

    /* Event Page Overlay */
    --event-card-overlay: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.7) 100%);
}
/* Dark Mode - UPDATED to Match Production (Neutral Gray) */
[data-theme='dark'] {
    --primary-color: #34d399;
    --primary-color-rgb: 52, 211, 153;
    --primary-rgb: 52, 211, 153;
    --secondary-color-rgb: 163, 163, 163;
    --secondary-rgb: 163, 163, 163;
    --accent-color-rgb: 52, 211, 153;
    --accent-rgb: 52, 211, 153;
    --background-rgb: 18, 18, 18;
    --surface-color-rgb: 32, 33, 36;
    --text-color-rgb: 249, 250, 252;
    --text-secondary-color-rgb: 163, 163, 163;
    --success-color-rgb: 16, 185, 129;
    --success-rgb: 16, 185, 129;
    --error-color-rgb: 239, 68, 68;
    --error-rgb: 239, 68, 68;
    --primary-color-translucent: rgba(52, 211, 153, 0.2);

    --secondary-color: #a3a3a3;

    /* Keep background very dark */
    --background-color: #121212;

    /* CHANGE THIS: From #1E1E1E (Warm Gray) to #202124 (Cooler/Cleaner Gray) */
    --surface-color: #202124;
    --surface-color-hover: #2d2e30;

    /* Optional: Lighten border slightly for better contrast */
    --border-color: #3a3a3a;

    --text-color: #f9fafc;
    --text-secondary-color: #a3a3a3;
    --success-color: #10b981;
    --error-color: #ef4444;
    --warning-color: #f59e0b;
    --primary-color-10: rgba(52, 211, 153, 0.10);
    --primary-text: #34d399;
    --warning-text: #f59e0b;
    --primary-fill: #34d399;
    --surface-inset: #2d2e30;
    --surface-hover: var(--surface-color-hover);
    --surface-bg-hover: var(--surface-color-hover);
    --primary-color-20: rgba(52, 211, 153, 0.20);
    --gold-color: #fbbf24;

    /* Lighter steps of the same hues: 6.3:1 and 5.8:1 on the dark surface. */
    --protein-color: #60a5fa;
    --protein-color-rgb: 96, 165, 250;
    --calories-color: #f87171;
    --calories-color-rgb: 248, 113, 113;

    /* New UI Variables */
    --success-active: #10b981;
    --success-active-dark: #059669;
    --error-bg: rgba(239, 68, 68, 0.2);
    --surface-rgb: 32, 33, 36;
    --text-light: #ffffff;

    /* Input & Form Control Tokens (Dark Mode) */
    --input-bg: rgba(255, 255, 255, 0.05);
    --input-border: rgba(255, 255, 255, 0.12);
    --input-border-hover: rgba(255, 255, 255, 0.22);
    --input-focus-border: #34d399;
    --input-focus-glow: rgba(52, 211, 153, 0.20);
    --input-placeholder: rgba(255, 255, 255, 0.35);
    --caret-color: #ffffff;

    /* Event Page Overlay */
    --event-card-overlay: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.8) 100%);

    /* Elevation — deeper in dark mode; light shadows read as mud on dark surfaces */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
}
/* Base App Styles */
html {
    background-color: var(--surface-color); /* Safe-area matching color for top edge on mobile */
}
body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    font-size: clamp(14px, 1rem + 0.5vw, 18px);
    line-height: 1.5;
    transition: background-color 0.3s ease, color 0.3s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overscroll-behavior-y: none;
    min-height: 100vh;
    box-sizing: border-box;
    overflow-x: hidden;
}
/* Universal Text Selection & Caret Color */
::-moz-selection {
    background-color: var(--primary-color-translucent, rgba(52, 211, 153, 0.35));
    color: #ffffff;
}
::selection {
    background-color: var(--primary-color-translucent, rgba(52, 211, 153, 0.35));
    color: #ffffff;
}
input, textarea, [contenteditable="true"] {
    caret-color: var(--caret-color, #ffffff);
}
/* Onboarding scroll unlock — applied via JS when needsOnboarding is true */
html.onboarding-active,
html.onboarding-active body,
html.onboarding-active #app {
    height: auto !important;
    min-height: 100vh !important;
    overflow: auto !important;
    overscroll-behavior-y: auto !important;
    position: static !important;
}
/* Utilities moved from index.html */
.hero-text-shadow {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
[x-cloak] {
    display: none !important;
}
/* Landing Page Overlay */
#landing-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    overflow-y: auto;
    background-color: #121212;
    display: block;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
}
/* ============================================
   Section headers — added 2026-07-24 (VD3)
   Replaces the centered ~20-24px <h2> pattern used across every tab, which is
   the single most dated element in the UI and wastes vertical space. Modern data
   products (Linear, Stripe, Oura, Whoop, Strava) use left-aligned, small,
   letter-spaced labels.
   ============================================ */
/* ============================================
   Master Section & Card Header Standardization
   Enforces consistent size (1.25rem / 20px), weight (900 / font-black),
   color (var(--text-color)), tracking-tight, and CENTERED alignment app-wide.
   ============================================ */
.section-header,
.card-header,
.widget-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    margin: 0 0 var(--space-4) 0;
    text-align: center;
}
.section-header__title,
.card-title,
.section-title,
.app-section-title,
.card-header h2,
.card-header h3,
.widget-header h2,
.widget-header h3,
.glass-card-title {
    font-size: 1.25rem !important; /* 20px - matches Today's Focus */
    font-weight: 900 !important; /* font-black */
    letter-spacing: -0.025em !important; /* tracking-tight */
    text-transform: none !important;
    text-align: center !important;
    color: var(--text-color) !important;
    margin: 0 auto !important;
    padding: 0 !important;
}
.section-header--prominent .section-header__title {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.025em !important;
}
/* ============================================
   Typography & Arbitrary Font-Size Overrides
   Ensures text-[var(--text-*)] expands to font-size rather than color.
   ============================================ */
[class*="text-[var(--text-2xs)]"] { font-size: var(--text-2xs) !important; }
[class*="text-[var(--text-xs)]"] { font-size: var(--text-xs) !important; }
[class*="text-[var(--text-sm)]"] { font-size: var(--text-sm) !important; }
[class*="text-[var(--text-md)]"] { font-size: var(--text-md) !important; }
[class*="text-[var(--text-lg)]"] { font-size: var(--text-lg) !important; }
[class*="text-[var(--text-xl)]"] { font-size: var(--text-xl) !important; }
[class*="text-[var(--text-2xl)]"] { font-size: var(--text-2xl) !important; }
/* Uppercase card label sizing safeguards */
label.uppercase,
span.uppercase.tracking-widest,
span.uppercase.tracking-wider,
span.uppercase.tracking-tight,
div.uppercase.tracking-wider {
    font-size: var(--text-2xs);
}
/* ============================================
   Universal Card Styles (Apply to both modes)
   ============================================ */
.admin-dashboard,
.admin-card,
.admin-stat-card,
.admin-panel,
.stat-card,
.metric-card,
.chart-container,
.analytics-chart {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 12px;
    /* Ensure consistency */
}
/* Shadow only for light mode to add depth */
[data-theme='light'] .admin-card,
[data-theme='light'] .stat-card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
/* Tab navigation in admin section */
[data-theme='light'] .admin-tabs,
[data-theme='light'] .admin-tab-nav {
    background-color: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
}
[data-theme='light'] .admin-tab-btn {
    color: var(--text-secondary-color);
}
[data-theme='light'] .admin-tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}
/* ============================================
   Accessibility Styles (WCAG 2.1 AA)
   ============================================ */
/* Screen-reader only content */
.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;
}
/* Focus visible styles for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--primary-color-translucent);
}
/* Remove focus outline for mouse users */
*:focus:not(:focus-visible) {
    outline: none;
}
/* High contrast focus for dark mode */
[data-theme='dark'] *:focus-visible {
    outline-color: #818cf8;
    box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.3);
}
/* Reduced motion for users who prefer it */
@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;
    }
}
/* Skip link styles */
.skip-link:focus {
    position: absolute !important;
    top: 0 !important;
    left: 16px;
    z-index: 9999;
    padding: 12px 24px;
    background: var(--primary-color);
    color: white;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* Ensure sufficient color contrast on interactive elements */
.btn-primary,
.btn-add,
.btn-success {
    font-weight: 600;
}
/* Loading spinner accessibility */
.loader[role="status"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* Workout player surfaces (owner decision 2026-10-11: every player follows the app theme).
 * The cardio players were drawn in fixed dark utilities (bg-zinc-900, text-white, border-white/10),
 * so they stayed black in light mode. They now use these. Dark keeps the cockpit look exactly as
 * it was; light gets the same structure on light surfaces. */
:root,
[data-theme='light'] {
    --player-bg: #f4f6f8;
    --player-panel: #ffffff;
    --player-tile: #eef1f5;
    --player-tile-strong: #e2e8f0;
    --player-line: #dde3ea;
    --player-scrim: rgba(255, 255, 255, 0.88);
    --player-text: #0f172a;
    --player-muted: #64748b;
    --player-faint: #94a3b8;
}
[data-theme='dark'] {
    --player-bg: #09090b;
    --player-panel: #121214;
    --player-tile: rgba(255, 255, 255, 0.05);
    --player-tile-strong: rgba(255, 255, 255, 0.10);
    --player-line: rgba(255, 255, 255, 0.08);
    --player-scrim: rgba(0, 0, 0, 0.6);
    --player-text: #ffffff;
    --player-muted: #a1a1aa;
    --player-faint: #52525b;
}
/* styles/main.css */
/* Content moved to src/styles/tailwind-input.css for unified build */
/* styles/layout.css */
/* 0. Global Mobile App Resets */
* {
  -webkit-tap-highlight-color: transparent;
}
html, body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}
/* Re-enable text selection for actual readable content areas if needed, 
   but for an app-like experience, keeping it off globally is common.
   We will enable it for inputs. */
input, textarea, p, h1, h2, h3, h4, h5, h6, span.selectable {
  -webkit-user-select: auto;
  -moz-user-select: auto;
       user-select: auto;
}
/* 1. Top-level app container */
.app-container {
  display: grid;
  height: 100vh;
  height: 100dvh;
  min-height: 100%;
  grid-template-rows: auto 1fr;
  /* Header, Main Content */
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main";
  overflow: hidden;
}
/* Desktop with sidebar layout: ONLY applies on desktop screens (>= 1024px) or mobile landscape (orientation: landscape) */
@media (min-width: 1024px), (orientation: landscape) {
  .app-container.desktop-with-sidebar {
    grid-template-columns: 90px 1fr;
    /* Fixed Sidebar width + remaining space */
    grid-template-rows: auto 1fr;
    /* Header row + Content row */
    grid-template-areas:
      "header header"
      /* Header spans both columns */
      "sidebar main";
    /* Sidebar left, Main right */
    height: 100vh;
    height: 100dvh;
    min-height: 100%;
    overflow: hidden;
  }

  .app-container.desktop-with-sidebar .header {
    grid-area: header;
  }

  .app-container.desktop-with-sidebar .sidebar-nav {
    grid-area: sidebar;
  }
}
/* Strict Mobile Portrait Guard: If device is under 1024px and in portrait, NEVER show sidebar grid */
@media (max-width: 1023px) and (orientation: portrait) {
  .app-container.desktop-with-sidebar {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    grid-template-areas:
      "header"
      "main" !important;
    height: 100vh;
    height: 100dvh;
    min-height: 100%;
  }

  .app-container.desktop-with-sidebar .sidebar-nav {
    display: none !important;
  }
}
/* Workout Sidebar Toggle (The "Clipboard" Icon) */
.workout-sidebar-toggle {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  color: var(--text-secondary-color);
  cursor: pointer;
  padding: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.workout-sidebar-toggle:hover {
  color: var(--text-color);
  background-color: rgba(255, 255, 255, 0.09);
}
/* Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1rem;
  padding-top: calc(0.65rem + env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
  min-height: calc(3.5rem + env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
  background-color: var(--surface-color);
  border-bottom: 1px solid var(--border-color);
  z-index: 100;
  grid-row: 1 / 2;
  box-sizing: border-box;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  color: var(--text-secondary-color);
  cursor: pointer;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 12px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  padding: 0;
  flex-shrink: 0;
  box-sizing: border-box;
}
.header-icon-btn:hover {
  color: var(--text-color);
  background-color: rgba(255, 255, 255, 0.09);
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.16);
}
.header-icon-btn:active {
  transform: scale(0.96);
}
.header-icon-btn svg,
.header-icon-btn i {
  width: 18px;
  height: 18px;
  display: block;
}
.header-streak-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 52px;
  width: auto;
  height: 38px;
  padding: 0 12px 0 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  flex-shrink: 0;
  border: 1px solid rgba(249, 115, 22, 0.3);
  background: rgba(249, 115, 22, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  box-sizing: border-box;
}
.header-streak-badge:hover {
  transform: translateY(-1px);
  background: rgba(249, 115, 22, 0.16);
  border-color: rgba(249, 115, 22, 0.55);
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.25);
}
.header-streak-badge:active {
  transform: scale(0.96);
}
.header-streak-badge.earned-today {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(234, 88, 12, 0.16) 100%);
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}
.header-streak-badge .streak-flame {
  font-size: 1.05rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.6));
  transition: transform 0.2s ease;
}
.header-streak-badge:hover .streak-flame {
  transform: scale(1.15);
}
.header-streak-badge .streak-count {
  font-family: 'Outfit', Inter, system-ui, -apple-system, sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #f97316;
  transition: color 0.2s ease;
}
.header-streak-badge.earned-today .streak-count {
  color: #f59e0b;
}
.header h1 {
  font-size: 1.5rem;
  /* 24px */
  font-weight: 700;
  color: var(--primary-color);
  margin: 0;
}
.header-logo {
  height: 42px;
  width: auto;
  display: block;
  background: transparent !important;
  -o-object-fit: contain;
     object-fit: contain;
}
.settings-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--text-secondary-color);
}
.settings-btn:hover {
  color: var(--text-color);
}
/* Sidebar nav placement */
.sidebar-nav {
  grid-area: sidebar;
  background-color: var(--surface-color);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 0;
  overflow-y: auto;
  height: 100%;
}
/* Main content area */
.main-content {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  grid-row: 2 / 3;
  padding: 1.25rem;
  position: relative;
  height: 100%;
}
.main-content.desktop-main {
  grid-area: main;
}
/* Utility classes for content regions */
.mobile-view-content {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  gap: 1.25rem;
}
/* Adjustments for special modes */
.app-container.company-mode {
  grid-template-rows: 1fr;
}
.app-container.company-mode .main-content {
  grid-row: 1 / 2;
  padding: 0;
}
.app-container.trainer-mode .main-content {
  padding: 0;
}
/* Desktop Grid Layout System */
/* Default: Mobile Stack (Single Column) */
.desktop-grid-layout {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0;
  width: 100%;
}
.desktop-grid-layout .grid-item {
  display: flex;
  flex-direction: column;
}
.desktop-grid-layout .grid-item>.card {
  flex-grow: 1;
  height: 100%;
}
/* Desktop Grid System (activates at 1024px to match utilities.css) */
@media (min-width: 1024px) {
  .desktop-grid-layout {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-flow: dense;
    gap: 1.25rem;
    padding: 0.5rem;
    height: auto;
    min-height: 0;
    align-content: start;
  }
}
/* --- MOBILE LAYOUT OVERRIDES --- */
@media (max-width: 1023px) {

  /* Apply mobile layout to ALL users (client and trainer) */
  .app-container {
    grid-template-rows: auto 1fr auto;
  }

  .app-container .main-content {
    padding: 0;
    overflow-y: auto;
  }

  /* Very small screens (< 375px) */
  @media (max-width: 374px) {
    .app-container .main-content {
      padding: 0;
    }

    .desktop-grid-layout {
      gap: 0.25rem;
    }
  }

  .mobile-view-content {
    padding: 0;
    gap: 0.25rem;
  }

  .desktop-grid-layout {
    padding: 0;
    gap: 0.25rem;
  }

  /* --- Mobile fixes for other user dashboard pages --- */
  .marketplace-header {
    grid-template-columns: 1fr;
  }

  .program-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* --- Phone-Specific Grid Fix --- */
@media (max-width: 767px) {
  .program-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .marketplace-header {
    grid-template-columns: 1fr;
  }
}
/* Simple scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: #9ca3af;
  /* gray-400 */
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
  /* gray-500 */
}
::-webkit-scrollbar-track {
  background: #f3f4f6;
  /* gray-100 */
}
/* Prevent text selection while dragging (for Weekly View) */
.disable-select {
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  /* IE10+/Edge */
  user-select: none;
  /* Standard */
}
.social-view .grid-item.social {
  grid-column: 1 / 13 !important;
  height: 100%;
  min-height: 0;
  /* Allow scrolling within the component */
  display: block;
}
/* Hide all other dashboard widgets when in Social View */
.social-view .grid-item.goals,
.social-view .grid-item.workout-logger,
.social-view .grid-item.nutrition-logger,
.social-view .grid-item.workout-planner,
.social-view .grid-item.history,
.social-view .grid-item.body-measurements,
.social-view .grid-item.personal-records,
.social-view .grid-item.progress-photos,
.social-view .grid-item.trainer,
.social-view .grid-item.cookbook,
.social-view .grid-item.ai-meal,
.social-view .grid-item.sleep,
.social-view .grid-item.gamification,
.social-view .grid-item.nutrition-goals,
.social-view .grid-item.program-marketplace,
.social-view .grid-item.events,
.social-view .grid-item.lifecoach,
.social-view .grid-item.performance,
.social-view .grid-item.user-workout-library,
.social-view .grid-item.workout-analytics {
  display: none !important;
}
/* styles/navigation.css */
/* --- Desktop Sidebar --- */
.sidebar-nav {
  background-color: var(--surface-color);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 0;
  overflow-y: auto;
  height: 100%;
}
.sidebar-logo {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 2rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-color-translucent);
  border-radius: 10px;
  flex-shrink: 0;
}
.sidebar-links {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}
.sidebar-btn {
  background: none;
  border: none;
  color: var(--text-secondary-color);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 0;
  width: 100%;
  border-radius: 0;
  font-size: 0.875rem;
  transition: background-color 0.2s ease, color 0.2s ease;
  position: relative;
}
.sidebar-btn:hover {
  color: var(--text-color);
  background-color: var(--background-color);
}
.sidebar-btn.active {
  color: var(--primary-color);
  font-weight: 600;
  background: linear-gradient(to right, var(--primary-color-translucent) 0%, transparent 100%);
}
.sidebar-btn.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 50%;
  background-color: var(--primary-color);
  border-radius: 0 4px 4px 0;
  box-shadow: 2px 0 10px var(--primary-color);
}
.sidebar-btn.active svg {
  filter: drop-shadow(0 0 4px var(--primary-color-translucent));
}
.sidebar-btn svg {
  margin-bottom: 0.3rem;
  width: 24px;
  height: 24px;
}
.sidebar-btn .nav-label {
  display: block;
  font-size: 0.7rem;
  margin-top: 0.25rem;
  font-weight: 600;
  white-space: nowrap;
}
/* --- Mobile Tab Navigation --- */
.tab-nav {
  display: none;
}
.tab-btn {
  background: none;
  border: none;
  color: var(--text-secondary-color);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.25rem;
  /* Increased padding for touch target */
  min-height: 50px;
  /* Minimum touch target */
  font-size: 0.75rem; /* Smaller font to fit */
  border-radius: 10px;
  flex: 1 0 82px; /* Increased min-width from 72 to 82 for text */
  min-width: 82px;
  white-space: nowrap; /* Prevent text wrapping */
  transition: background-color 0.2s ease, color 0.2s ease;
}
.tab-btn svg {
  margin-bottom: 0.25rem;
}
.tab-btn.active {
  color: var(--primary-color);
  background-color: var(--primary-color-translucent);
  font-weight: 700;
  position: relative;
}
.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  width: 4px;
  height: 4px;
  background-color: var(--primary-color);
  border-radius: 50%;
  box-shadow: 0 0 5px var(--primary-color);
}
.tab-btn.active svg {
  filter: drop-shadow(0 0 2px var(--primary-color-translucent));
}
.tab-btn:hover {
  background-color: var(--background-color);
  color: var(--text-color);
}
[data-theme='light'] .tab-btn:hover {
  background-color: var(--background-color-light);
}
/* --- Mobile Media Query --- */
@media (max-width: 1199px) {
  .app-container {
    /* This makes the .tab-nav stick to the bottom */
    grid-template-rows: auto 1fr auto;
  }

  .tab-nav {
    display: flex;
    justify-content: flex-start;
    /* Better spacing for fixed nav */
    overflow-x: auto;
    padding: 0.5rem 0.25rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
    /* Safe Area Support */
    background-color: var(--surface-color);
    border-top: 1px solid var(--border-color);

    /* Fixed Positioning Logic */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav, 100);
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .tab-nav::-webkit-scrollbar {
    display: none;
  }
}
/* Hide tab nav when keyboard is open on mobile */
@media (max-height: 500px) and (max-width: 1199px) {
  .app-container:not(.trainer-mode) {
    grid-template-rows: auto 1fr !important;
  }
  .app-container:not(.trainer-mode) .main-content {
    padding-bottom: 0 !important;
  }
  .tab-nav {
    display: none !important;
  }
}
/* Mobile portrait navigation: strictly hide sidebar-nav */
@media (max-width: 1023px) and (orientation: portrait) {
  .sidebar-nav {
    display: none !important;
  }
}
/* --- Mobile Landscape Navigation Sidebar --- */
@media (max-width: 1199px) and (orientation: landscape) {
  .app-container.desktop-with-sidebar {
    grid-template-columns: 70px 1fr !important;
    grid-template-rows: auto 1fr !important;
    grid-template-areas:
      "header header"
      "sidebar main" !important;
  }
  
  .sidebar-nav {
    grid-area: sidebar !important;
    display: flex !important;
    padding: 0.5rem 0 !important;
  }
  
  .sidebar-links {
    gap: 4px !important;
  }
  
  .sidebar-btn {
    padding: 0.35rem 0 !important;
  }
  
  .sidebar-btn svg {
    width: 20px !important;
    height: 20px !important;
    margin-bottom: 0.15rem !important;
  }
  
  .sidebar-btn .nav-label {
    font-size: 0.6rem !important;
    margin-top: 0.1rem !important;
  }
}
/* --- AI Chat Widget Styling --- */
.ai-chat-bubble-btn {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
}
@media (max-width: 1199px) {
  .ai-chat-bubble-btn {
    bottom: calc(90px + env(safe-area-inset-bottom, 16px)) !important;
    right: 16px !important;
  }
}
@media (max-width: 1199px) and (orientation: landscape) {
  .ai-chat-bubble-btn {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
  }
}
/* One corner, one lane of floating buttons. The trainer-chat bubble (only for an athlete with a
   coach) holds the bottom slot; the page's own button (Smart Hero on Home, AI coach on Workout)
   stacks 68px above it. All three used to sit on the same pixel, and Smart Hero's z-index 9999
   hid the trainer chat on Home. UserMessagingWidget sets body.has-trainer-chat while its
   bubble shows. */
.messaging-widget-bubble,
.smart-hero-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
}
@media (max-width: 1199px) {
  .messaging-widget-bubble,
  .smart-hero-fab {
    bottom: calc(90px + env(safe-area-inset-bottom, 16px));
    right: 16px;
  }
}
@media (max-width: 1199px) and (orientation: landscape) {
  .messaging-widget-bubble,
  .smart-hero-fab {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}
body.has-trainer-chat .ai-chat-bubble-btn,
body.has-trainer-chat .smart-hero-fab {
  bottom: calc(24px + 68px) !important;
}
@media (max-width: 1199px) {
  body.has-trainer-chat .ai-chat-bubble-btn,
  body.has-trainer-chat .smart-hero-fab {
    bottom: calc(90px + 68px + env(safe-area-inset-bottom, 16px)) !important;
  }
}
@media (max-width: 1199px) and (orientation: landscape) {
  body.has-trainer-chat .ai-chat-bubble-btn,
  body.has-trainer-chat .smart-hero-fab {
    bottom: calc(16px + 68px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
/* The chat bubble is fixed at z-index 1000 over the scroll container, which reserved no space
   for it — so it sat on top of the last card (observed covering a chart's "Max" label on
   desktop and the Sleep card on mobile). Reserve its footprint at the end of the scroll area.
   FAB is 56px tall; the offsets below mirror the positioning rules above. */
.main-content {
  padding-bottom: calc(56px + 24px + var(--space-4, 1rem));
}
@media (max-width: 1199px) {
  .main-content {
    padding-bottom: calc(56px + 90px + env(safe-area-inset-bottom, 16px) + var(--space-4, 1rem));
  }
}
@media (max-width: 1199px) and (orientation: landscape) {
  .main-content {
    padding-bottom: calc(56px + 16px + env(safe-area-inset-bottom, 0px) + var(--space-4, 1rem));
  }
}
/* Two stacked buttons need one more slot of room at the end of the page. */
body.has-trainer-chat .main-content {
  padding-bottom: calc(56px + 68px + 24px + var(--space-4, 1rem));
}
@media (max-width: 1199px) {
  body.has-trainer-chat .main-content {
    padding-bottom: calc(56px + 68px + 90px + env(safe-area-inset-bottom, 16px) + var(--space-4, 1rem));
  }
}
@media (max-width: 1199px) and (orientation: landscape) {
  body.has-trainer-chat .main-content {
    padding-bottom: calc(56px + 68px + 16px + env(safe-area-inset-bottom, 0px) + var(--space-4, 1rem));
  }
}
.ai-chat-widget-window {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 400px !important;
  height: 600px !important;
  max-height: 85vh !important;
  max-width: calc(100vw - 32px) !important;
  background: var(--surface-color) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 9999 !important;
  overflow: hidden !important;
  border: 1px solid var(--border-color) !important;
}
@media (max-width: 1199px) {
  .ai-chat-widget-window {
    bottom: calc(80px + env(safe-area-inset-bottom, 16px)) !important;
    max-height: calc(100vh - 100px - env(safe-area-inset-bottom, 16px)) !important;
    right: 16px !important;
  }
}
@media (max-width: 1199px) and (orientation: landscape) {
  .ai-chat-widget-window {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100vh - 40px - env(safe-area-inset-bottom, 0px)) !important;
    height: 90vh !important;
    right: 16px !important;
  }
}
/* --- One button contract (Health wave 4, UX-03..06/14/21) ------------------------------------
   .btn is the primary action: --primary-fill with --on-primary-color text, which passes 4.5:1 in
   both themes (white on the light theme's #10b981 was 2.5:1, white on the dark #34d399 1.9:1).
   .btn-secondary is one look in both themes, .btn-sm is a real 44px auto-width size for every
   variant, .btn-chip is the one chip. .btn stays full width by default: many screens rely on it. */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--radius-md, 12px);
  min-height: 44px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--on-primary-color, #FFFFFF);
  background-color: var(--primary-fill, var(--primary-color));
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  width: 100%;
  text-align: center;
  margin-top: auto;
}
.btn.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.2rem;
}
@media (hover: hover) {
  .btn:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--primary-color-translucent);
  }
}
.btn:active {
  transform: scale(0.98);
  box-shadow: none;
}
/* .btn + .btn-primary is the one CTA per card (trainer wave 6). .btn already IS the primary fill,
   so .btn-primary adds no rule of its own: a two-class rule here would outrank the utility
   classes that some call sites put on their primary buttons, and a bare .btn-primary elsewhere
   (journeys, fridge, form replay) keeps its local styling. */
.btn-secondary {
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}
/* Destructive action: an outline in the error colour, never a fill (trainer wave 6, TU-06/TU-25).
   One class weight on purpose, so a screen's own utility classes still win where a call site
   already draws its own solid red (DigitalFridgeCard's Discard). Text uses --error-text, which
   keeps 4.5:1 in both themes (#ef4444 on white is 3.8:1). */
.btn-danger {
  background-color: transparent;
  border: 1px solid var(--error-color);
  color: var(--error-text, var(--error-color));
}
:where(.btn-danger):hover {
  background-color: rgba(var(--error-color-rgb, 239, 68, 68), 0.1);
}
@media (hover: hover) {
  .btn.btn-danger:hover {
    box-shadow: none;
  }
}
/* Used by five screens and defined nowhere, so it fell back to the primary fill (UX-18). */
.btn-outline {
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}
/* Quiet variant: no fill, no outline. Eleven call sites asked for .btn-ghost and no stylesheet
   defined it, so every one of them fell back to .btn's primary fill - which is how the Health
   sub-nav rendered all three of its segments as the selected one (2026-09-17). */
.btn-ghost {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary-color);
  box-shadow: none;
}
[data-theme='light'] .btn-ghost {
  color: var(--text-secondary-color);
}
@media (hover: hover) {
  .btn-ghost:hover {
    background-color: var(--surface-color-hover);
    color: var(--text-color);
    transform: none;
    box-shadow: none;
  }
  .btn-secondary:hover {
    background-color: var(--primary-color-translucent);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: none;
    box-shadow: none;
  }
}
/* The light theme outlined secondaries in near-black, which every Health fix then overrode one
   button at a time (UX-04). One secondary now, in both themes. */
@media (hover: hover) {
  .btn-secondary:hover {
    color: var(--primary-text, var(--primary-color));
  }
}
.btn.btn-sm {
  width: auto;
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-size: var(--text-sm, 0.875rem);
  margin-top: 0;
}
.btn.btn-block {
  width: 100%;
}
/* A button with an icon beside its label. */
.btn.btn-inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
/* One chip: filters, tags, feelings, sound categories. Selected with .active, .is-active or
   aria-pressed="true". */
.btn-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid var(--border-color);
  background-color: var(--surface-color);
  color: var(--text-color);
  font-family: inherit;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
.btn-chip.active,
.btn-chip.is-active,
.btn-chip[aria-pressed='true'] {
  background-color: rgba(var(--primary-color-rgb), 0.12);
  border-color: var(--primary-color);
  color: var(--primary-text, var(--primary-color));
}
/* One tab / filter switch (trainer wave 6, TU §3). Moved here from _program-marketplace.css and
   _trainer-programs.css, which each had a copy. Plain <button>s inside it are the segments; the
   selected one carries .active, .is-active, aria-selected="true" or aria-pressed="true". It
   scrolls sideways instead of overflowing a phone (TU-12). --fill stretches the segments to
   share the row. Dark: the selected segment is --primary-fill with --on-primary-color (white on
   #34d399 was 1.9:1). */
.segmented-control {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--border-color);
  background-color: var(--background-color);
  box-sizing: border-box;
}
.segmented-control::-webkit-scrollbar {
  display: none;
}
.segmented-control.segmented-control--fill {
  width: 100%;
}
.segmented-control button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-sm, 6px);
  border: none;
  background: transparent;
  color: var(--text-secondary-color);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.segmented-control.segmented-control--fill button {
  flex: 1 1 0;
  min-width: -moz-max-content;
  min-width: max-content;
}
.segmented-control button.active,
.segmented-control button.is-active,
.segmented-control button[aria-selected='true'],
.segmented-control button[aria-pressed='true'] {
  background-color: var(--surface-color);
  color: var(--primary-text, var(--primary-color));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
[data-theme='dark'] .segmented-control button.active,
[data-theme='dark'] .segmented-control button.is-active,
[data-theme='dark'] .segmented-control button[aria-selected='true'],
[data-theme='dark'] .segmented-control button[aria-pressed='true'] {
  background-color: var(--primary-fill, var(--primary-color));
  color: var(--on-primary-color, #052e1f);
}
.segmented-control button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.segmented-control button:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
}
.btn-chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-chip:focus-visible,
.btn-icon:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  align-items: flex-end;
}
.btn-group .btn {
  flex: 1 1 120px;
  width: auto;
  min-width: 0; /* Prevent overflow on small screens */
}
.btn-icon-left {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
/* Disabled keeps its own look, dimmed: a disabled primary and a disabled secondary were the
   same grey block (UX-04 "E"). */
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
@media (hover: hover) {
  .btn[disabled]:hover {
    opacity: 0.45;
    transform: none;
    box-shadow: none;
  }
}
.btn-icon {
  background: none;
  border: none;
  color: var(--text-secondary-color);
  cursor: pointer;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}
.btn-icon:hover {
  color: var(--primary-color);
  background-color: var(--primary-color-translucent);
}
.btn-icon:disabled,
.btn-icon[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  background: none;
}
.card {
  background-color: var(--surface-color);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
[data-theme='light'] .card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.card-header {
  cursor: move;
  padding: 0;
  margin: 0 0 0.5rem 0; /* Reduced from 1rem */
  flex-shrink: 0;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.card-content {
  flex-grow: 1;
  overflow: visible;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.card h2,
.card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-color);
  margin-top: 0;
  margin-bottom: 0.5rem; /* Reduced from 1rem */
  display: flex;
  align-items: center;
  gap: 0.4rem; /* Standardized icon gap */
  justify-content: center; /* Centered */
  width: 100%;
}
.card h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.5rem;
}
.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.loader.loader-inline {
  display: inline-flex;
  padding: 0;
  width: auto;
  height: auto;
}
.loader.full-page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--background-color);
  z-index: 9999;
}
.loader-spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid var(--border-color);
  border-top: 4px solid var(--primary-color);
  animation: spin 1s linear infinite;
}
.loader-spinner.extra-small {
  width: 14px;
  height: 14px;
  border-width: 2px;
}
.loader-spinner.small {
  width: 20px;
  height: 20px;
  border-width: 2px;
}
.loader-spinner.large {
  width: 60px;
  height: 60px;
  border-width: 6px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.modal-overlay {
  position: fixed;
  inset: 0;
  overscroll-behavior: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: var(--z-modal-overlay, 2000);
}
.modal-content {
  background: var(--surface-color);
  border-radius: 8px;
  padding: 20px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Dragging past the top used to stretch the whole panel with it (Android's overscroll effect)
     and pass the gesture on to whatever was behind. The scroll stops at the ends instead. */
  overscroll-behavior: none;
  z-index: var(--z-modal-content, 2001);
  color: var(--text-color);
  width: min(500px, 100%);
  /* Default width */
}
/* Wide Modal variant for Content Library, etc. */
.modal-content.modal-large {
  width: min(1000px, 95vw);
  max-width: 95vw;
}
/* New: Total Immersion Full screen variant */
.modal-content.modal-full {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.modal-content.modal-full-bleed,
.modal-content.modal-full.modal-full-bleed {
  padding: 0 !important;
}
.modal-content.workout-player-modal {
  background-color: var(--background-color);
  max-width: 100vw;
  width: 100%;
  height: 100vh;
  border-radius: 0;
  overflow: hidden;
  padding: 0;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
/* Modal titles read like card titles: 24px at weight 400 sat under 20/900 card headings (UX-19). */
.modal-title {
  margin: 0;
  font-size: var(--text-lg, 1.125rem);
  font-weight: 800;
}
.modal-close-btn {
  background: none;
  border: none;
  color: var(--text-secondary-color);
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1199px) {
  .card {
    padding: 0.15rem 0.5rem 0.5rem 0.5rem;
    border-radius: 10px;
  }

  .card-header {
    margin-bottom: 0; /* Extra tight on mobile */
  }

  .card h2,
  .card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.4rem;
  }
}
/* --- Mobile Modals --- */
@media (max-width: 768px) {
  .modal-content {
    /* Full Screen on Mobile */
    max-width: 100vw !important;
    width: 100% !important;
    height: 100dvh !important;
    /* Use dynamic viewport height */
    max-height: 100dvh !important;
    border-radius: 0 !important;

    /* Safe Area Padding */
    padding: 1rem;
    /* The 52px floor was clearance for the status bar the web view used to draw under.
       The view now starts below it, so the floor was only dead space. */
    padding-top: calc(1rem + env(safe-area-inset-top, var(--safe-area-inset-top, 0px))) !important;
    padding-bottom: max(calc(1rem + env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px))), 24px) !important;

    display: flex;
    flex-direction: column;
  }

  /* Hide floating AI assistant when any modal or dialog is open */
  body:has(.modal-overlay) .ai-widget-container,
  body:has([role="dialog"]) .ai-widget-container,
  body:has(.modal-overlay) .ai-chat-widget-window {
    display: none !important;
  }

  .modal-content.fullscreen {
    padding-left: 0;
    padding-right: 0;
  }

  .modal-content.fullscreen .modal-header,
  .modal-content.fullscreen .schedule-header {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
/* --- Specific Modal Overrides moved from JS --- */
.modal-content.workout-player-modal,
/* Fallback if class is just workout-player */
.modal-content.workout-player {
  background-color: var(--background-color);
  max-width: 100vw;
  width: 100%;
  height: 100vh;
  border-radius: 0;
  overflow: hidden;
  padding: 0;
}
.modal-content.trainer-application-modal {
  width: min(700px, 90vw);
  max-width: 90vw;
}
/* --- Workout Player Layout --- */
.workout-body-layout { 
  flex: 1; 
  display: flex; 
  flex-wrap: nowrap; 
  min-height: 0; 
  overflow: hidden; 
}
@media (max-width: 1023px) { 
  .workout-body-layout { 
    flex-direction: column; 
    overflow-y: auto; 
    overflow-x: hidden;
  } 
  .workout-exercise-panel { 
    flex: none; 
    width: 100%; 
    border-right: none; 
    border-bottom: 1px solid rgba(255,255,255,0.05); 
    padding: 1.25rem; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
    height: auto; 
    min-height: auto;
  } 
  .workout-sidebar-schedule { 
    flex: none; 
    width: 100%; 
    border-left: none; 
    background-color: #161616; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
  } 
}
/* --- Premium Analytics Modal --- */
.analytics-modal.premium-modal .modal-content {
  width: min(650px, 95vw);
  background: linear-gradient(135deg, var(--surface-color) 0%, #1a1a1a 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.analytics-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.kpi-card {
  background: rgba(255, 255, 255, 0.03);
  padding: 1rem;
  border-radius: 12px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100px;
}
.kpi-label {
  font-size: 0.75rem;
  color: var(--text-secondary-color);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-color);
}
.kpi-value small {
  font-size: 0.8rem;
  margin-left: 4px;
  color: var(--text-secondary-color);
}
.highlight-section {
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.1) 0%, rgba(var(--accent-color-rgb), 0.1) 100%);
  padding: 1.25rem;
  border-radius: 16px;
  border: 1px solid rgba(var(--primary-color-rgb), 0.2);
}
.insight-card {
  padding: 0.5rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-color);
}
.telemetry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
}
.telemetry-card {
  background: rgba(255, 255, 255, 0.02);
  padding: 1rem;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tel-label {
  font-size: 0.85rem;
  color: var(--text-secondary-color);
}
.tel-value {
  font-weight: 600;
  font-size: 1.1rem;
}
.tel-value small {
  font-size: 0.75rem;
  color: var(--text-secondary-color);
}
.cardio-prs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.cardio-pr-badge {
  background: rgba(255, 255, 255, 0.05);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  min-width: 100px;
}
.pr-badge-label {
  font-size: 0.7rem;
  color: var(--text-secondary-color);
  text-transform: uppercase;
}
.pr-badge-value {
  font-weight: 700;
  margin: 2px 0;
}
.pr-badge-date {
  font-size: 0.65rem;
  color: var(--text-secondary-color);
}
.history-item {
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  margin-bottom: 8px;
  border-left: 3px solid var(--primary-color);
}
.history-item-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}
.history-name {
  font-size: 0.8rem;
  color: var(--text-secondary-color);
}
.history-summary {
  display: block;
  opacity: 0.8;
}
/* Workout Detail Modal - Hierarchical Layout */
.workout-hero {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.hero-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.workout-type-badge {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--primary-color);
  background: rgba(255, 69, 58, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
}
.source-badge {
  font-size: 0.75rem;
  color: var(--text-secondary-color);
}
.workout-title {
  font-size: 1.5rem;
  margin: 0 0 0.5rem 0;
  font-weight: 700;
}
.workout-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--text-secondary-color);
  margin-bottom: 1rem;
}
.workout-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hero-kpi-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  background: rgba(0, 0, 0, 0.2);
  padding: 1rem;
  border-radius: 10px;
}
.kpi-item {
  display: flex;
  flex-direction: column;
}
.kpi-item .kpi-label {
  font-size: 0.75rem;
  color: var(--text-secondary-color);
  text-transform: uppercase;
}
.kpi-item .kpi-val {
  font-size: 1.25rem;
  font-weight: 700;
}
.kpi-item .kpi-val small {
  font-size: 0.8rem;
  margin-left: 2px;
  opacity: 0.7;
}
.highlights-strip {
  margin-bottom: 1.5rem;
}
.highlights-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.75rem;
  color: #FFD700;
}
.highlights-cards {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 8px;
}
.highlight-card {
  background: linear-gradient(145deg, rgba(255,215,0,0.1), rgba(255,215,0,0.02));
  border: 1px solid rgba(255, 215, 0, 0.2);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  min-width: 120px;
}
.highlight-card.is-new {
  border-color: #FFD700;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}
.hl-label {
  font-size: 0.7rem;
  color: var(--text-secondary-color);
  margin-bottom: 4px;
}
.hl-value {
  font-weight: 700;
  font-size: 1.1rem;
}
.analysis-module {
  margin-bottom: 1.5rem;
}
.module-title {
  font-size: 1rem;
  margin: 0 0 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding-bottom: 0.5rem;
}
.strength-table {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  overflow: hidden;
}
.st-header, .st-row {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 1rem;
}
.st-header {
  background: rgba(0, 0, 0, 0.2);
  font-size: 0.8rem;
  color: var(--text-secondary-color);
  text-transform: uppercase;
}
.st-row {
  border-bottom: 1px solid rgba(255,255,255,0.02);
  font-size: 0.9rem;
}
.muscle-tag {
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
}
.comparison-card {
  background: rgba(255, 255, 255, 0.02);
  padding: 1rem;
  border-radius: 8px;
}
.comp-header {
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  color: var(--text-secondary-color);
}
.comp-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.comp-stat {
  display: flex;
  flex-direction: column;
}
.comp-stat label {
  font-size: 0.75rem;
  color: var(--text-secondary-color);
}
.comp-stat span {
  font-weight: 600;
}
.coach-insight-strip {
  display: flex;
  gap: 1rem;
  background: linear-gradient(90deg, rgba(var(--primary-color-rgb), 0.1), transparent);
  border-left: 4px solid var(--primary-color);
  padding: 1rem;
  border-radius: 4px;
  margin-top: 2rem;
}
.insight-text {
  font-size: 0.9rem;
  line-height: 1.4;
}
@media (max-width: 600px) {
  .analytics-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) { 
  .workout-body-layout { 
    flex-direction: row; 
  } 
  .workout-exercise-panel { 
    flex: 1 1 60%; 
    min-width: 400px; 
    padding: 2rem; 
    border-right: 1px solid rgba(255,255,255,0.05); 
    border-bottom: none; 
    display: flex; 
    flex-direction: column; 
    overflow-y: auto; 
    height: 100%; 
  } 
  .workout-sidebar-schedule { 
    flex: 1 1 40%; 
    min-width: 300px; 
    border-left: 1px solid rgba(255,255,255,0.05); 
    background-color: #161616; 
    display: flex; 
    flex-direction: column; 
    overflow-y: auto; 
    height: 100%; 
  } 
}
/* ==============================================
   Branded Full-Page Loader (Unified with Native Splash)
   ============================================== */
.brand-loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--background-color, #0a0a0c);
  transition: opacity 0.4s ease-out;
}
.brand-loader-logo-wrapper {
  width: 96px;
  height: 96px;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.brand-loader-logo-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.brand-loader-title {
  margin: 0 0 0.5rem 0;
  font-size: 2.25rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #ffffff;
}
.brand-loader-title span {
  background: linear-gradient(135deg, #d4af37 0%, #f3e5ab 50%, #aa771c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand-loader-spinner {
  margin-top: 1.5rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(16, 185, 129, 0.25);
  border-top-color: #10b981;
  animation: spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .brand-loader-logo-wrapper {
    animation: none;
  }
  .brand-loader-spinner {
    animation: none;
    border-top-color: #10b981;
  }
}
/* styles/forms.css */
.form-group {
  margin-bottom: 1rem;
}
.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary-color);
}
/* Universal Base Styling for All Form Inputs, Textareas & Selects across the app */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]),
select,
textarea,
.input,
.form-control,
.form-group input,
.form-group select {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5; /* CRITICAL: natural line-height prevents stretched caret and flipped teardrop */
  min-height: 44px;
  height: 44px;
  padding: 10px 14px;
  border-radius: var(--radius-md, 10px);
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-color);
  caret-color: var(--caret-color, #ffffff);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
/* Hover state for all inputs */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]):hover,
select:hover,
textarea:hover,
.input:hover,
.form-control:hover,
.form-group input:hover,
.form-group select:hover {
  border-color: var(--input-border-hover);
}
/* Focus state for all inputs */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]):focus,
select:focus,
textarea:focus,
.input:focus,
.form-control:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px var(--input-focus-glow);
  background-color: var(--input-bg);
}
/* Universal Textarea */
textarea,
.form-group textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  line-height: 1.6;
  min-height: 84px;
  height: auto;
  border-radius: var(--radius-md, 10px);
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-color);
  caret-color: var(--caret-color, #ffffff);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  resize: vertical;
}
textarea:hover,
.form-group textarea:hover {
  border-color: var(--input-border-hover);
}
textarea:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px var(--input-focus-glow);
}
/* Universal Select Dropdowns */
select,
.form-group select,
.custom-select,
.select-dropdown {
  line-height: 1.5 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: var(--input-bg, rgba(255, 255, 255, 0.05)) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px 16px !important;
  padding: 10px 42px 10px 14px !important;
  min-height: 44px !important;
  height: 44px !important;
  border: 1px solid var(--input-border, rgba(255, 255, 255, 0.12)) !important;
  border-radius: var(--radius-md, 10px) !important;
  color: var(--text-color, #ffffff) !important;
  caret-color: var(--caret-color, #ffffff) !important;
  font-family: inherit !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
[data-theme='light'] select,
[data-theme='light'] .form-group select,
[data-theme='light'] .custom-select,
[data-theme='light'] .select-dropdown {
  background-color: var(--input-bg, #ffffff) !important;
  border-color: var(--input-border, #d1d5db) !important;
  color: var(--text-color, #111827) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
select:hover,
.form-group select:hover,
.custom-select:hover,
.select-dropdown:hover {
  border-color: var(--input-border-hover, rgba(255, 255, 255, 0.22)) !important;
}
select:focus,
.form-group select:focus,
.custom-select:focus,
.select-dropdown:focus {
  outline: none !important;
  border-color: var(--input-focus-border, #34d399) !important;
  box-shadow: 0 0 0 3px var(--input-focus-glow, rgba(52, 211, 153, 0.20)) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme='light'] select:focus,
[data-theme='light'] .form-group select:focus,
[data-theme='light'] .custom-select:focus,
[data-theme='light'] .select-dropdown:focus {
  border-color: var(--input-focus-border, #10b981) !important;
  box-shadow: 0 0 0 3px var(--input-focus-glow, rgba(16, 185, 129, 0.15)) !important;
  background-color: #ffffff !important;
}
select option,
.form-group select option,
.custom-select option,
.select-dropdown option {
  background-color: var(--surface-color, #202124) !important;
  color: var(--text-color, #f9fafc) !important;
}
[data-theme='light'] select option,
[data-theme='light'] .form-group select option,
[data-theme='light'] .custom-select option,
[data-theme='light'] .select-dropdown option {
  background-color: #ffffff !important;
  color: #111827 !important;
}
/* Universal Placeholder */
::-moz-placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}
::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}
/* Hide Number Input Spin Buttons */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}
/* Universal Date & Time Inputs */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value {
  text-align: left;
  min-height: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  margin: 0;
  padding: 0;
  flex: 1;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(1) brightness(95%);
  opacity: 0.75;
  padding: 4px;
  margin-left: 8px;
  border-radius: 4px;
  -webkit-transition: opacity 0.2s ease, transform 0.2s ease;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
[data-theme='light'] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme='light'] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme='light'] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0) brightness(30%);
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  transform: scale(1.08);
}
.form-group small {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-secondary-color);
}
.role-selector {
  display: flex;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  background-color: var(--background-color);
}
.role-selector button {
  flex: 1;
  padding: 0.6rem;
  background-color: transparent;
  border: none;
  color: var(--text-secondary-color);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.role-selector button:not(:last-child) {
  border-right: 1px solid var(--border-color);
}
.role-selector button:hover {
  background-color: var(--surface-color);
  color: var(--text-color);
}
.role-selector button.active {
  background-color: var(--primary-color);
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: 0 2px 8px var(--primary-color-translucent);
}
.login-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Updated background to premium dark gym aesthetic */
  background: linear-gradient(rgba(10, 10, 10, 0.7), rgba(10, 10, 10, 0.85)), 
              url('https://images.unsplash.com/photo-1581009146145-b5ef050c2e1e?q=80&w=2670&auto=format&fit=crop') center/cover no-repeat;
  z-index: 9999;

  /* Enable Scrolling */
  overflow-y: auto;
  padding: 1rem;
  /* Ensures space at top/bottom on small screens */
}
.login-box {
  /* Formatting Fix (Black Box) */
  background-color: rgba(30, 30, 30, 0.95);
  padding: 2.5rem;
  border-radius: 12px;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  text-align: center;
  color: #ffffff;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);

  /* Safe Centering for Scroll */
  margin: auto;
}
@media (max-width: 600px) {
  .login-box {
    padding: 1.5rem;
    width: 95%;
  }
}
.login-box .form-group {
  margin-bottom: 0;
}
.login-box input {
  width: 100%;
  padding: 0.75rem;
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-color);
  font-size: 1rem;
  font-family: inherit;
}
.login-box input:focus {
  outline: none;
  border-color: var(--primary-color);
}
.login-box h1 {
  color: var(--primary-color);
  margin: 0 0 0.5rem 0;
  font-size: 2rem;
  font-weight: 700;
}
.login-box p {
  color: var(--text-secondary-color);
  margin: 0 0 2rem 0;
  font-size: 1rem;
}
.login-box form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.login-hint {
  font-size: 0.8rem;
  margin-top: 1rem;
  color: var(--text-secondary-color);
}
.login-form-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.form-link {
  color: var(--primary-color);
  text-decoration: none;
  font-size: 0.9rem;
}
.form-link:hover {
  text-decoration: underline;
}
.error-message {
  color: var(--error-color);
  background-color: rgba(207, 102, 121, 0.1);
  border: 1px solid var(--error-color);
  padding: 0.75rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  text-align: center;
  font-weight: 500;
  display: block;
}
.btn-google {
  background-color: #fff;
  color: #757575;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 500;
}
.btn-google:hover {
  background-color: #f5f5ff;
  opacity: 1;
  transform: none;
  box-shadow: none;
}
.btn-google svg {
  margin-top: -2px;
}
.divider {
  color: var(--text-secondary-color);
  margin: 1.5rem 0;
  position: relative;
  text-align: center;
}
.divider::before,
.divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background-color: var(--border-color);
}
.divider::before {
  left: 0;
}
.divider::after {
  right: 0;
}
/* --- NEW ONBOARDING STYLES --- */
.onboarding-header {
  margin-bottom: 2rem;
}
.onboarding-progress-bar {
  width: 100%;
  height: 8px;
  background-color: var(--border-color);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 1rem;
}
.onboarding-progress-bar-inner {
  height: 100%;
  background-color: var(--primary-color);
  border-radius: 4px;
  transition: width 0.3s ease-in-out;
}
.onboarding-content {
  text-align: left;
}
.onboarding-step {
  display: none;
  /* Hidden by default */
  flex-direction: column;
  gap: 1.5rem;
  animation: fadeIn 0.3s ease-in-out;
}
.onboarding-step.active {
  display: flex;
  /* Shown when active */
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.btn-group-onboarding {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  border-top: 1px solid var(--border-color);
  padding-top: 1.5rem;
}
.btn-group-onboarding .btn,
.btn-group-onboarding .btn-secondary {
  width: auto;
  flex: 1;
}
/* --- NEW Checkbox Tile Grid System --- */
.checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 0.5rem;
}
.checkbox-label {
  /* Core flex behavior for centering */
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start;
  /* Ensure left alignment */
  gap: 12px;
  /* Clear space between box and text */

  /* Box styling */
  padding: 12px 16px;
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;

  /* Text styling */
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-secondary-color);
  line-height: 1.2;
}
.checkbox-label:hover {
  border-color: var(--primary-color);
  color: var(--text-color);
  background-color: var(--surface-color);
}
/* Active state triggered by TSX logic */
.checkbox-label.active {
  background-color: var(--primary-color-translucent);
  border-color: var(--primary-color);
  color: var(--primary-color);
  font-weight: 600;
}
/* Input styling fix */
.checkbox-label input[type="checkbox"] {
  /* Reset default input styles that might add margin */
  margin: 0;
  padding: 0;

  /* Visual sizing */
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  /* Prevent squishing */

  /* Color override */
  accent-color: var(--primary-color);
  cursor: pointer;
}
/* --- NEW Selectable Card/Pill Styles (Used in Onboarding) --- */
/* --- Selection Styles moved to _onboarding.css to prevent duplicates --- */
/* --- Responsive Grid & Layout Helpers --- */
.form-group-split {
  display: flex;
  gap: 1rem;
}
@media (max-width: 768px) {
  .form-group-split {
    flex-direction: column;
    gap: 0;
  }

  .selection-grid {
    grid-template-columns: 1fr 1fr;
    /* Force 2 columns on mobile for standard grids */
  }

  .selection-grid.columns-3,
  .selection-grid.columns-4 {
    grid-template-columns: 1fr 1fr;
    /* Collapse larger grids to 2 columns */
  }
}
@media (max-width: 480px) {

  .selection-grid,
  .selection-grid.columns-3,
  .selection-grid.columns-4 {
    grid-template-columns: 1fr;
    /* Stack on very small screens if needed, or keep 2 if items are small */
  }

  /* Override for specific items that fit 2-up even on small screens */
  .selection-grid.columns-4 {
    grid-template-columns: 1fr 1fr;
  }
}
/* --- Switch Toggle Styles --- */
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  min-width: 48px;
  height: 24px;
  flex-shrink: 0;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-color);
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
}
input:checked+.slider {
  background-color: var(--primary-color);
}
input:focus+.slider {
  box-shadow: 0 0 1px var(--primary-color);
}
input:checked+.slider:before {
  transform: translateX(24px);
}
.slider.round {
  border-radius: 24px;
}
.slider.round:before {
  border-radius: 50%;
}
/* --- iOS Input Zoom Fix --- */
@media (max-width: 768px) {
  input, select, textarea, .input, .form-control, .set-item input {
    font-size: 16px !important;
  }
}
/* utilities.css
   -- Small helpers, scrollbars, spacing utilities
*/
/* Scrollbars (non-invasive) */
*::-webkit-scrollbar { height: 8px; width: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 8px; }
/* Small spacing helpers */
.mt-sm { margin-top: 0.5rem; }
.mt-md { margin-top: 1rem; }
.mb-md { margin-bottom: 1rem; }
/* Centering utilities */
.center { display:flex; align-items:center; justify-content:center; }
/* Z-index helpers (aligned with theme.css hierarchy) */
.z-top { z-index: 9999; }
/* Reserved for full-page loader/landing only */
.z-modal { z-index: var(--z-modal-overlay, 1000); }
.z-toast { z-index: var(--z-toast, 2000); }
/* Tiny animation utilities */
.fade-in { animation: fadeIn .18s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* --- GRID UTILITIES (Fix for Squished Layouts) --- */
/* These classes align with the 12-column grid system in layout.css */
@media (min-width: 768px) {
  .span-6  { grid-column: span 6; }
  .span-12 { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .span-1  { grid-column: span 1; }
  .span-2  { grid-column: span 2; }
  .span-3  { grid-column: span 3; }
  .span-4  { grid-column: span 4; }
  .span-5  { grid-column: span 5; }
  .span-6  { grid-column: span 6; }
  .span-7  { grid-column: span 7; }
  .span-8  { grid-column: span 8; }
  .span-9  { grid-column: span 9; }
  .span-10 { grid-column: span 10; }
  .span-11 { grid-column: span 11; }
  .span-12 { grid-column: 1 / -1; } /* Force full width */
}
/* Ensure grid items take up full width of their assigned span */
.grid-item {
    width: 100%;
    min-width: 0; /* Prevent overflow blowout */
}
/* --- Scrollbar utilities for Touch Devices --- */
@media (hover: none) and (pointer: coarse) {
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}
/* Spin animation */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spinner {
  animation: spin 1s linear infinite;
}
/* View Styles */
/* styles/views/_onboarding.css */
/* --- Onboarding Container (Glass Effect override) --- */
.login-box {
    /* Ensure the container has the glass effect if not already */
    background: rgba(var(--surface-rgb), 0.7) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}
/* --- Selection Grids --- */
.selection-grid {
    display: grid;
    gap: 12px;
    margin-top: 8px;
}
.selection-grid.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}
.selection-grid.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}
.selection-grid.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}
/* Mobile Responsive Grids */
@media (max-width: 600px) {

    .selection-grid.columns-3,
    .selection-grid.columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* --- Selection Cards (The "Glass" Buttons) --- */
.selection-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    color: var(--text-secondary-color);
    font-weight: 500;
    min-height: 80px;
}
.selection-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-light);
}
/* Hide the actual checkbox/radio */
.selection-card input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
/* Active State (Selected) */
.selection-card.active {
    background: var(--success-active);
    /* Solid primary color for max contrast */
    border-color: var(--success-active-dark);
    color: var(--text-light) !important;
    /* Force white text */
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    transform: translateY(-2px);
}
.selection-card.active span {
    font-weight: bold;
    color: var(--text-light);
}
/* --- Form Groups --- */
.form-group-split {
    display: flex;
    gap: 16px;
}
.form-group-split .form-group {
    flex: 1;
}
/* --- Insight Bar Specifics --- */
.insight-pill {
    transition: transform 0.2s ease;
}
.insight-pill:active {
    transform: scale(0.95);
}
/* --- Space for Sticky Footer --- */
.onboarding-content {
    padding-bottom: 120px;
    /* Ensure content isn't hidden behind the insight bar */
}
/* --- Typography Overrides for Onboarding --- */
.onboarding-header h1 {
    font-size: 1.8rem;
    background: linear-gradient(135deg, var(--text-light) 0%, var(--text-secondary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}
.onboarding-benefit {
    color: var(--text-secondary-color);
    font-size: 0.9rem;
    margin: 0 0 12px 0;
    font-style: italic;
}
.onboarding-step-indicator {
    color: var(--text-secondary-color);
    font-size: 0.85rem;
    margin: 0 0 8px 0;
}
/* --- Columns 1 for full-width cards --- */
.selection-grid.columns-1 {
    grid-template-columns: 1fr;
}
/* --- Motivation Scale --- */
.motivation-scale {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin-top: 12px;
}
.motivation-pill {
    flex: 1;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-secondary-color);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.motivation-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-light);
}
.motivation-pill.active {
    background: var(--success-active);
    border-color: var(--success-active-dark);
    color: var(--text-light);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    transform: scale(1.05);
}
.motivation-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--text-secondary-color);
}
.motivation-encouragement {
    margin-top: 12px;
    padding: 12px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    color: #93C5FD;
    font-size: 0.85rem;
    text-align: center;
}
/* --- Identity Cards --- */
.identity-card {
    text-align: left;
    padding: 16px 20px;
    min-height: auto;
}
.identity-card span {
    font-size: 0.95rem;
    line-height: 1.4;
}
/* --- Involvement Cards --- */
.involvement-card {
    flex-direction: row;
    justify-content: flex-start;
    padding: 16px 20px;
    min-height: auto;
    gap: 12px;
}
.involvement-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}
.involvement-content strong {
    font-size: 1rem;
}
.involvement-content span {
    font-size: 0.8rem;
    color: var(--text-secondary-color);
}
.involvement-card.active .involvement-content span {
    color: rgba(255, 255, 255, 0.8);
}
/* --- Calibration Section --- */
.calibration-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* --- Quick Win Section --- */
.quick-win-section {
    margin-bottom: 24px;
}
.breathing-exercise {
    text-align: center;
    padding: 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
}
.breathing-exercise p {
    color: var(--text-secondary-color);
    margin-bottom: 20px;
}
.breathing-start-btn {
    font-size: 1rem;
    padding: 14px 28px;
}
.breathing-circle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 180px;
}
.breathing-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--success-color) 0%, var(--success-active-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 4s ease-in-out;
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.4);
}
.breathing-circle.inhale {
    animation: breatheIn 4s ease-in-out forwards;
}
.breathing-circle.hold {
    transform: scale(1.5);
}
.breathing-circle.exhale {
    animation: breatheOut 4s ease-in-out forwards;
}
@keyframes breatheIn {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.5);
    }
}
@keyframes breatheOut {
    0% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}
.breathing-text {
    color: var(--text-light);
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
}
.quick-win-complete {
    text-align: center;
    padding: 24px;
    background: var(--primary-color-translucent);
    border: 1px solid var(--success-active);
    border-radius: 16px;
}
.quick-win-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--success-active);
    border-radius: 50%;
    color: var(--text-light);
    font-size: 1.5rem;
    margin-bottom: 12px;
}
.quick-win-complete p {
    color: var(--success-active);
    margin: 4px 0;
}
.quick-win-complete p:last-child {
    color: var(--text-secondary-color);
    font-size: 0.9rem;
}
/* --- Identity Pledge Section --- */
.identity-pledge-section {
    margin-bottom: 24px;
}
.pledge-card {
    padding: 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s ease;
}
.pledge-card.accepted {
    background: var(--primary-color-translucent);
    border-color: var(--success-active);
}
.pledge-intro {
    color: var(--text-secondary-color);
    font-size: 0.85rem;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.pledge-text {
    font-size: 1.1rem;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0 0 20px 0;
    padding: 0;
    border: none;
    font-style: italic;
}
.pledge-text strong {
    color: var(--success-active);
    font-style: normal;
}
.pledge-btn {
    font-size: 1.1rem;
    padding: 14px 40px;
    background: linear-gradient(135deg, var(--success-active) 0%, var(--success-active-dark) 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}
.pledge-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}
.pledge-accepted-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--success-active);
    border-radius: 8px;
    color: var(--text-light);
    font-weight: 600;
}
.pledge-accepted-badge span {
    font-size: 1.2rem;
}
/* --- Plan Preview --- */
.plan-preview {
    padding: 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
}
.plan-preview h3 {
    color: var(--text-light);
    font-size: 1rem;
    margin: 0 0 16px 0;
    text-align: center;
}
.preview-stats {
    display: flex;
    justify-content: space-around;
    gap: 16px;
}
.preview-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.preview-stat .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--success-color);
}
.preview-stat .stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* --- Mobile Responsive --- */
@media (max-width: 500px) {
    .motivation-scale {
        flex-wrap: wrap;
    }

    .motivation-pill {
        flex: 0 0 calc(25% - 6px);
        padding: 10px 6px;
        font-size: 0.9rem;
    }

    .preview-stats {
        flex-direction: column;
        gap: 12px;
    }

    .preview-stat {
        flex-direction: row;
        justify-content: space-between;
        padding: 12px;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 8px;
    }

    .preview-stat .stat-value {
        font-size: 1.2rem;
    }

    .breathing-circle {
        width: 100px;
        height: 100px;
    }

    .breathing-text {
        font-size: 0.8rem;
    }
}
/* styles/views/_dashboard.css */
/* Contains styles for all cards on the default user dashboard */
/* --- Grid Layouts --- */
/* --- Grid Layouts defined in layout.css --- */
/* --- Activity Feed --- */
.activity-feed {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.activity-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}
.activity-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.activity-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background-color);
    font-size: 1.25rem;
}
.activity-icon.lifting {
    background-color: var(--primary-color);
}
.activity-icon.run {
    background-color: var(--secondary-color);
}
.activity-details {
    flex-grow: 1;
    min-width: 0;
}
.overflow-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.activity-title {
    margin: 0 0 0.25rem 0;
    font-weight: 600;
}
.activity-source {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-left: 0.5rem;
    vertical-align: middle;
}
.activity-source.strava {
    background-color: #FC4C02;
    color: white;
}
.activity-source.gritfit {
    background-color: var(--primary-color);
    color: #FFFFFF;
}
.activity-stats {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary-color);
}
.activity-date {
    font-size: 0.8rem;
    color: var(--text-secondary-color);
    white-space: nowrap;
}
/* --- Goal List --- */
.goal-list {
    flex-grow: 1;
}
.goal-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    gap: 1rem;
}
.goal-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.goal-content {
    flex-grow: 1;
    min-width: 0;
}
.goal-content p {
    margin: 0 0 0.5rem 0;
}
.goal-content small {
    color: var(--text-secondary-color);
    font-size: 0.8rem;
}
/* For due date */
.goal-edit-input {
    width: 100%;
}
.progress-bar-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.progress-bar-container {
    flex-grow: 1;
    height: 8px;
    background-color: var(--background-color);
    border-radius: 4px;
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    background-color: var(--secondary-color);
    border-radius: 4px;
    transition: width 0.3s ease;
}
.progress-bar-wrapper span {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary-color);
}
.goal-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.btn-icon {
    background: none;
    border: none;
    color: var(--text-secondary-color);
    cursor: pointer;
    padding: 0.15rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 6px;
}
.btn-icon:hover {
    color: var(--text-color);
    background-color: rgba(255, 255, 255, 0.05);
}
.btn-icon.mini {
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: var(--text-2xs);
    position: relative;
}
/* A 36px hit area around the 20px glyph, without moving the row's layout (DB-58). */
.btn-icon.mini::after {
    content: '';
    position: absolute;
    inset: -8px;
}
.btn-icon.mini:hover {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}
.btn-icon.warning { color: #f59e0b; }
.btn-icon.warning:hover { background-color: rgba(245, 158, 11, 0.1); color: #fbbf24; }
.btn-icon.success { color: #10b981; }
.btn-icon.success:hover { background-color: rgba(16, 185, 129, 0.1); color: #34d399; }
.btn-icon.danger { color: #ef4444; }
.btn-icon.danger:hover { background-color: rgba(239, 68, 68, 0.1); color: #f87171; }
.add-goal-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}
.add-goal-form input {
    flex-grow: 1;
    padding: 0.75rem;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 1rem;
    font-family: inherit;
}
.add-goal-form input[type="text"] {
    flex-basis: 200px;
}
/* Base width for text input */
.add-goal-form input[type="date"] {
    flex-basis: 150px;
}
/* Base width for date input */
.add-goal-form input:focus {
    outline: none;
    border-color: var(--primary-color);
}
.btn-add {
    background-color: var(--primary-color);
    border: none;
    color: #FFFFFF;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
}
.goal-due-date {
    font-size: 0.8rem;
    color: var(--text-secondary-color);
    margin-top: 0.25rem;
    display: block;
}
.goal-date-input {
    flex-basis: 130px;
    flex-grow: 0;
}
/* --- History List --- */
.history-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.history-controls .btn-secondary {
    width: auto;
    flex-grow: 1;
}
.history-list {
    flex-grow: 1;
    max-height: 500px;
    /* Adjust this value to visually fit ~10 rows */
    overflow-y: auto;
    /* Enable vertical scrollbar only when needed */
    padding-right: 5px;
    /* Prevent scrollbar overlapping content */
}
.history-list::-webkit-scrollbar {
    width: 6px;
}
.history-list::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 3px;
}
.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.2s ease;
    border-radius: 8px;
    margin: 0 -0.5rem;
}
.history-item.cursor-pointer {
    cursor: pointer;
}
.history-item:hover {
    background-color: rgba(255, 255, 255, 0.03);
}
.history-item:last-child {
    border-bottom: none;
}
.history-item-content {
    flex-grow: 1;
    min-width: 0;
}
.history-item-content strong {
    display: block;
}
.history-item-content small {
    display: block;
    color: var(--text-secondary-color);
    font-size: 0.8rem;
}
.history-item-date {
    font-weight: 500;
    color: var(--text-color);
}
/* Style for the added date */
.history-item-actions {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    padding: 0.15rem 0.4rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.history-item-actions.compact {
    gap: 0.15rem;
}
.metric-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    backdrop-filter: blur(4px);
}
.metric-badge svg {
    flex-shrink: 0;
}
.metric-badge.effort {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}
.metric-badge.calories {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.metric-badge.duration {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.2);
}
.metric-badge.distance {
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.2);
}
.metric-badge.rpe {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
    border: 1px solid rgba(168, 85, 247, 0.2);
}
.metric-badge.protein {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.2);
}
.metric-badge.carbs {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}
.metric-badge.fat {
    background: rgba(234, 179, 10, 0.1);
    color: #facc15;
    border: 1px solid rgba(234, 179, 10, 0.2);
}
/* Cardio Analytics Enhancements */
.cardio-prs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    margin-bottom: 1.5rem;
}
.cardio-pr-badge {
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 12px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.2s ease;
}
.cardio-pr-badge:hover {
    transform: translateY(-2px);
    background: rgba(255, 215, 0, 0.08);
}
.pr-badge-label {
    font-size: 9px;
    text-transform: uppercase;
    color: var(--text-secondary-color);
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.pr-badge-value {
    font-size: 15px;
    font-weight: 800;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
.pr-badge-date {
    font-size: 9px;
    color: var(--text-secondary-color);
    margin-top: 4px;
    opacity: 0.7;
}
.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 1.5rem;
}
.comparison-card {
    padding: 16px 12px;
    border-radius: 16px;
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.comparison-card.better { border-color: rgba(34, 197, 94, 0.3); background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, transparent 100%); }
.comparison-card.worse { border-color: rgba(239, 68, 68, 0.3); background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, transparent 100%); }
@media (max-width: 480px) {
    .comparison-grid {
        grid-template-columns: 1fr;
    }
}
.comp-label { font-size: 11px; color: var(--text-secondary-color); text-transform: uppercase; letter-spacing: 0.05em; }
.comp-value { font-size: 24px; font-weight: 800; color: var(--text-color); }
.comp-sub { font-size: 10px; opacity: 0.8; font-weight: 500; }
.better .comp-value { color: #4ade80; }
.worse .comp-value { color: #f87171; }
.telemetry-row {
    display: flex;
    justify-content: space-around;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}
.telemetry-item { text-align: center; }
.tel-label { display: block; font-size: 10px; color: var(--text-secondary-color); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.tel-value { font-size: 20px; font-weight: 700; color: var(--text-color); }
.tel-value small { font-size: 12px; color: var(--text-secondary-color); font-weight: 400; margin-left: 2px; }
.splits-table-container {
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.2);
    margin-bottom: 1.5rem;
}
.splits-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.splits-table th {
    background: rgba(255, 255, 255, 0.03);
    padding: 12px;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary-color);
    border-bottom: 1px solid var(--border-color);
}
.splits-table td {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-color);
}
.splits-table td small { color: var(--text-secondary-color); margin-left: 2px; }
.splits-table tr:last-child td { border-bottom: none; }
.splits-table tr:hover { background: rgba(255, 255, 255, 0.03); }
.history-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.time-range-selector {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}
.time-range-selector button {
    background: transparent;
    border: none;
    color: var(--text-secondary-color);
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    border-left: 1px solid var(--border-color);
}
.time-range-selector button:first-child {
    border-left: none;
}
.time-range-selector button.active {
    background: var(--primary-color);
    color: #FFFFFF;
}
/* --- Personal Records --- */
.pr-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.pr-item {
    display: flex;
    flex-direction: column;
    background-color: var(--background-color);
    padding: 0.75rem;
    border-radius: 8px;
}
/* --- Body Measurements --- */
.measurement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    /* Responsive columns */
    gap: 1rem;
}
.measurement-item {
    display: flex;
    flex-direction: column;
    /* Stack label and value */
    background-color: var(--background-color);
    padding: 0.75rem;
    border-radius: 8px;
}
.measurement-item span {
    font-size: 0.8rem;
    color: var(--text-secondary-color);
    margin-bottom: 0.25rem;
}
.measurement-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
/* --- Progress Photos --- */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-bottom: 1rem;
}
.photo-thumbnail {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--border-color);
}
.photo-thumbnail img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.vault-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.vault-overlay svg {
    width: 32px;
    height: 32px;
}
.photo-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.photo-actions .btn {
    width: auto;
}
.view-photo-modal .modal-content {
    max-width: 90vw;
    max-height: 90vh;
}
.view-photo-large {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    -o-object-fit: contain;
       object-fit: contain;
    margin: 0 auto 1rem auto;
    border-radius: 8px;
}
.view-photo-details {
    text-align: center;
}
/* --- Sleep Tracker --- */
.sleep-summary {
    text-align: center;
    margin: 1rem 0;
}
.sleep-quality.good {
    color: var(--secondary-color);
}
.sleep-quality.fair {
    color: var(--carbs-color);
}
.sleep-quality.poor {
    color: var(--error-color);
}
/* --- Social View --- */
.subheading {
    color: var(--text-secondary-color);
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}
.friend-list,
.circle-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.friend-item,
.circle-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.circle-item {
    justify-content: space-between;
    padding: 1rem;
    background-color: var(--background-color);
    border-radius: 8px;
    cursor: pointer;
}
.circle-item:hover {
    background-color: var(--border-color);
}
.circle-avatars {
    display: flex;
}
.friend-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--text-color);
    flex-shrink: 0;
}
.friend-avatar.mini {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
    margin-left: -8px;
    border: 2px solid var(--surface-color);
}
.friend-item:nth-child(1) .friend-avatar,
.activity-feed .activity-item:nth-child(1) .friend-avatar {
    background-color: var(--trainer-color-1);
}
.friend-item:nth-child(2) .friend-avatar,
.activity-feed .activity-item:nth-child(2) .friend-avatar {
    background-color: var(--trainer-color-2);
}
.friend-item:nth-child(3) .friend-avatar,
.activity-feed .activity-item:nth-child(3) .friend-avatar {
    background-color: var(--trainer-color-3);
}
.circle-item:nth-child(1) .friend-avatar {
    background-color: var(--trainer-color-4);
}
.circle-item:nth-child(2) .friend-avatar {
    background-color: var(--trainer-color-5);
}
.circle-detail-view .member-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.circle-detail-view .activity-feed .friend-avatar {
    width: 32px;
    height: 32px;
}
.placeholder-text {
    text-align: center;
    color: var(--text-secondary-color);
    margin: 2rem 0;
}
.placeholder-text.small {
    margin: 1rem 0;
}
.btn-connect {
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
    margin-top: 0;
    align-self: center;
    height: -moz-fit-content;
    height: fit-content;
}
/* --- Trainer (User-Side) View --- */
/* --- NEW: Multi-Trainer View Layout (from sample) --- */
.trainer-client-view-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap: 1rem;
}
.trainer-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.5rem;
    /* Small padding */
}
.trainer-view-h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
}
.trainer-view-all-btn {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-color);
    background: none;
    border: none;
    cursor: pointer;
}
.trainer-view-divider {
    border-color: var(--border-color);
    margin: 0.5rem 0;
}
/* Horizontal Trainer Selector */
.trainer-selector-container {
    flex-shrink: 0;
}
.trainer-selector {
    display: flex;
    align-items: center;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    /* Custom scrollbar */
    scrollbar-width: none;
    scrollbar-color: var(--border-color) transparent;
}
.trainer-selector-card {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: var(--surface-color-secondary);
    color: var(--text-color);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    font-weight: normal;
}
.trainer-selector-card:hover {
    background-color: var(--background-color);
}
.trainer-selector-card.active {
    background: var(--grit-gold);
    color: var(--grit-dark);
    border-color: var(--grit-gold);
    font-weight: bold;
}
.trainer-selector-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--surface-color);
    overflow: hidden;
}
.trainer-selector-avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.trainer-selector-name {
    font-weight: inherit;
    color: inherit;
    font-size: 0.9rem;
    margin: 0;
}
.trainer-selector-specialty {
    font-size: 0.875rem;
    color: var(--text-secondary-color);
    margin: 0;
}
.trainer-selector-card.add-new {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: 94px;
    /* Fixed width */
    height: 94px;
    /* Match height of other cards */
    background-color: var(--background-color);
    border: 1px dashed var(--border-color);
}
.trainer-selector-card.add-new:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.trainer-selector-card.add-new p {
    font-size: 0.8rem;
    font-weight: 500;
    margin: 0;
}
/* Main Content Layout */
.trainer-view-main-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex-grow: 1;
    min-height: 0;
    /* Important for flex-grow */
}
.trainer-dashboard-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.trainer-chat-column {
    flex-grow: 1;
    min-height: 400px;
    /* Give chat a min height on mobile */
    display: flex;
    flex-direction: column;
}
.trainer-chat-panel {
    flex-grow: 1;
    /* Make chat card fill space */
}
/* Desktop 2-Column Layout */
@media (min-width: 1200px) {
    .trainer-view-main-content {
        flex-direction: row;
    }

    .trainer-dashboard-column {
        flex: 1;
        /* <-- THIS IS THE FIX */
        min-width: 0;
    }

    .trainer-chat-column {
        flex: 1;
        /* <-- THIS IS THE FIX */
        min-height: 0;
        /* Reset min height */
    }
}
/* Chat Header Styles */
.chat-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: default;
}
.trainer-chat-avatar {
    position: relative;
}
.trainer-chat-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}
.trainer-chat-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background-color: var(--success-color);
    border: 2px solid var(--surface-color);
    border-radius: 50%;
}
.trainer-chat-info strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
}
.trainer-chat-info small {
    font-size: 0.85rem;
    color: var(--text-secondary-color);
}
.trainer-chat-panel .chat-body {
    flex-grow: 1;
    min-height: 0;
}
.trainer-chat-panel .card-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
/* --- FIX: Styles for Trainer Actions Card --- */
.trainer-actions-card .card-content {
    /* This makes the card content a row, so we can push the box to the right */
    display: flex;
    flex-direction: column;
    /* REMOVED flex-grow and min-height */
}
.trainer-actions-card .btn-group {
    display: flex;
    flex-direction: row;
    /* Makes buttons side-by-side */
    gap: 1rem;
    margin-top: 0;
    /* REMOVED margin-top: auto */
    padding-top: 0;
    /* REMOVED padding-top: 1rem */
}
/* --- END FIX --- */
.file-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.file-item {
    background-color: var(--background-color);
    padding: 0.75rem 1rem;
    border-radius: 8px;
}
.file-item a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
}
.file-item a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}
.file-item small {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary-color);
    margin-top: 0.25rem;
}
.trainer-client-view .message-preview {
    cursor: pointer;
    /* Indicates the preview is clickable */
}
/* In-Card Booking */
.booking-schedule-card {}
.booking-schedule {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.booking-day h4 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: var(--secondary-color);
    font-size: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.time-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.btn-time-slot {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
}
.btn-time-slot:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.no-slots {
    color: var(--text-secondary-color);
    font-style: italic;
    font-size: 0.9rem;
    margin: 0;
}
/* Booking Modal */
.trainer-client-view-wrapper .modal-content.fullscreen {
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    padding: 0;
}
.trainer-client-view-wrapper .modal-content.fullscreen .modal-header {
    padding: 1.5rem;
}
/* "View All" Modal Styles */
.trainer-modal .modal-content {
    max-width: 600px;
    width: 90vw;
}
.trainer-modal-search .search-input {
    width: 100%;
    min-height: 44px;
    height: 44px;
    line-height: 1.5;
    padding: 10px 14px;
    border-radius: 10px;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-color);
    caret-color: var(--caret-color, #ffffff);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.trainer-modal-search .search-input:focus {
    outline: none;
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 3px var(--input-focus-glow);
}
.trainer-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.5rem;
    margin-top: 1rem;
}
.trainer-modal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
}
.trainer-modal-card:hover {
    border-color: var(--primary-color);
    background-color: var(--primary-color-translucent);
}
.trainer-modal-card.add-new {
    border-style: dashed;
    justify-content: center;
}
.trainer-modal-name {
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}
.trainer-modal-specialty {
    font-size: 0.8rem;
    color: var(--text-secondary-color);
    margin: 0;
}
.trainer-modal-add-icon {
    color: var(--primary-color);
    width: 40px;
    height: 40px;
}
.trainer-modal-add-icon svg {
    width: 100%;
    height: 100%;
}
/* --- END NEW Multi-Trainer Styles --- */
/* --- Dashboard View-Specific Grid Layouts --- */
/* Component Placement (Default Fallback) */
.grid-item.goals {
    grid-column: 1 / 5;
}
.grid-item.workout-logger {
    grid-column: 5 / 9;
}
.grid-item.nutrition-logger {
    grid-column: 9 / 13;
}
.grid-item.workout-planner {
    grid-column: 1 / 9;
}
.grid-item.history {
    grid-column: 9 / 13;
}
.grid-item.body-measurements {
    grid-column: 1 / 5;
}
.grid-item.personal-records {
    grid-column: 5 / 9;
}
.grid-item.wearables-widget {
    grid-column: 1 / 5;
}
/* New */
.grid-item.recovery-widget {
    grid-column: 5 / 9;
}
/* New */
.grid-item.progress-photos {
    grid-column: 1 / 9;
}
.grid-item.trainer {
    grid-column: 1 / 5;
}
.grid-item.social {
    grid-column: 5 / 9;
}
.grid-item.cookbook {
    grid-column: 9 / 13;
}
.grid-item.ai-meal {
    grid-column: 9 / 13;
}
.grid-item.sleep {
    grid-column: 9 / 13;
}
.grid-item.gamification {
    grid-column: 1 / 9;
}
.grid-item.program-marketplace {
    grid-column: 1 / 13;
}
.grid-item.nutrition-goals {
    grid-column: 5 / 9;
}
.grid-item.workout-logger {
    grid-column: 9 / 13;
}
/* Desktop-Only View Overrides */
@media (min-width: 1024px) {

    /* --- Default Dashboard View Layout (True 12-Column Grid) --- */
    .dashboard-view .desktop-grid-layout {
        display: grid !important;
        grid-template-columns: repeat(12, 1fr) !important;
        -moz-column-count: initial !important;
             column-count: initial !important;
        gap: 1.25rem !important;
        align-items: start !important;
    }
    
    .dashboard-view .desktop-grid-layout > .grid-item {
        width: 100% !important;
        margin-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Force span-12 items to span across all columns seamlessly */
    .dashboard-view .desktop-grid-layout > .grid-item.span-12,
    .dashboard-view .desktop-grid-layout > .grid-item[style*="1 / 13"],
    .dashboard-view .desktop-grid-layout > .grid-item[style*="1 / -1"],
    .dashboard-view .desktop-grid-layout > .grid-item.training-schedule,
    .dashboard-view .desktop-grid-layout > .grid-item.workout-analytics {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        display: block !important;
        margin-bottom: 0 !important;
    }

    /* 6-Column Equal Split Items */
    .dashboard-view .desktop-grid-layout > .grid-item.span-6,
    .dashboard-view .grid-item.physiological-status,
    .dashboard-view .grid-item.daily-snapshot,
    .dashboard-view .grid-item.todays-focus,
    .dashboard-view .grid-item.wearables-widget,
    .dashboard-view .grid-item.recovery-widget,
    .dashboard-view .grid-item.history,
    .dashboard-view .grid-item.progress-trends,
    .dashboard-view .grid-item.highlights,
    .dashboard-view .grid-item.upcoming-events,
    .dashboard-view .grid-item.goals,
    .dashboard-view .grid-item.personal-records,
    .dashboard-view .grid-item.body-measurements,
    .dashboard-view .grid-item.progress-photos,
    .dashboard-view .grid-item.gamification,
    .dashboard-view .grid-item.fitness-profile {
        grid-column: span 6 !important;
    }

    /* Full Width Items (Optional - change to span 6 if you want them split too) */
    .dashboard-view .grid-item.workout-analytics {
        grid-column: 1 / -1 !important;
    }

    /* --- End Default Dashboard --- */


    /* --- Nutrition View Layout (12-col grid) --- */
    .nutrition-view .desktop-grid-layout {
        display: grid !important;
        grid-template-columns: repeat(12, 1fr) !important;
        -moz-column-count: initial !important;
             column-count: initial !important;
        gap: 1.25rem !important;
        align-items: start !important;
    }

    .nutrition-view .desktop-grid-layout > .grid-item.ai-meal {
        grid-column: 1 / 7 !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    .nutrition-view .desktop-grid-layout > .grid-item.nutrition-right-col {
        grid-column: 7 / 13 !important;
        width: 100% !important;
        margin-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem !important;
    }

    .nutrition-view .grid-item.cookbook-container-v2,
    .nutrition-view .grid-item.nutrition-intelligence,
    .nutrition-view .grid-item.water-tracker-panel,
    .nutrition-view .grid-item.weekly-coaching,
    .nutrition-view .grid-item.grocery-list {
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    /* --- UPDATED WORKOUT VIEW LAYOUT --- */
    .workout-view .grid-item.workout-analytics {
        grid-column: 1 / 13;
    }

    /* Top Row */
    .workout-view .grid-item.workout-planner {
        grid-column: 1 / 13;
    }

    /* Bottom Row */

    /* Hide everything else on this page */
    .workout-view .grid-item.personal-records,
    .workout-view .grid-item.user-workout-library,
    .workout-view .grid-item.goals,
    .workout-view .grid-item.gamification,
    .workout-view .grid-item.sleep,
    .workout-view .grid-item.body-measurements,
    .workout-view .grid-item.progress-photos,
    .workout-view .grid-item.workout-logger,
    .workout-view .grid-item.history {
        display: none;
    }

    .lifecoach-view .grid-item.ai-life-coach {
        grid-column: 1 / 7;
        grid-row: 1 / 3;
    }

    .lifecoach-view .grid-item.gratitude-journal {
        grid-column: 7 / 13;
        grid-row: 1 / 2;
    }

    .lifecoach-view .grid-item.mindset-goals {
        grid-column: 7 / 13;
        grid-row: 2 / 3;
    }

    .lifecoach-view .grid-item.goals,
    .lifecoach-view .grid-item.gamification,
    .lifecoach-view .grid-item.history,
    .lifecoach-view .grid-item.personal-records,
    .lifecoach-view .grid-item.sleep,
    .lifecoach-view .grid-item.body-measurements,
    .lifecoach-view .grid-item.progress-photos,
    .lifecoach-view .grid-item.workout-planner,
    .lifecoach-view .grid-item.workout-logger,
    .lifecoach-view .grid-item.user-workout-library,
    .lifecoach-view .grid-item.ai-meal,
    .lifecoach-view .grid-item.nutrition-logger,
    .lifecoach-view .grid-item.cookbook,
    .lifecoach-view .grid-item.nutrition-goals,
    .lifecoach-view .grid-item.program-marketplace,
    .lifecoach-view .grid-item.social,
    .lifecoach-view .grid-item.user-trainer {
        display: none;
    }

    .user-trainer-view .grid-item.workout-analytics,
    .user-trainer-view .grid-item.goals,
    .user-trainer-view .grid-item.gamification,
    .user-trainer-view .grid-item.history,
    .user-trainer-view .grid-item.personal-records,
    .user-trainer-view .grid-item.sleep,
    .user-trainer-view .grid-item.body-measurements,
    .user-trainer-view .grid-item.progress-photos,
    .user-trainer-view .grid-item.workout-planner,
    .user-trainer-view .grid-item.workout-logger,
    .user-trainer-view .grid-item.user-workout-library,
    .user-trainer-view .grid-item.ai-meal,
    .user-trainer-view .grid-item.nutrition-logger,
    .user-trainer-view .grid-item.cookbook,
    .user-trainer-view .grid-item.nutrition-goals,
    .user-trainer-view .grid-item.program-marketplace,
    .user-trainer-view .grid-item.social,
    .user-trainer-view .grid-item.ai-life-coach,
    .user-trainer-view .grid-item.gratitude-journal,
    .user-trainer-view .grid-item.mindset-goals {
        display: none;
    }

    .desktop-grid-layout.user-trainer-view .grid-item.user-trainer {
        grid-column: 1 / 13;
        height: 100%;
        overflow: hidden;
    }

    .performance-view .grid-item.goals,
    .performance-view .grid-item.gamification,
    .performance-view .grid-item.history,
    .performance-view .grid-item.personal-records,
    .performance-view .grid-item.sleep,
    .performance-view .grid-item.body-measurements,
    .performance-view .grid-item.progress-photos,
    .performance-view .grid-item.workout-planner,
    .performance-view .grid-item.workout-logger,
    .performance-view .grid-item.user-workout-library,
    .performance-view .grid-item.ai-meal,
    .performance-view .grid-item.nutrition-logger,
    .performance-view .grid-item.cookbook,
    .performance-view .grid-item.nutrition-goals,
    .performance-view .grid-item.program-marketplace,
    .performance-view .grid-item.social,
    .performance-view .grid-item.user-trainer,
    .performance-view .grid-item.ai-life-coach,
    .performance-view .grid-item.gratitude-journal,
    .performance-view .grid-item.mindset-goals {
        display: none;
    }

    .desktop-grid-layout.performance-view .grid-item.performance-hub {
        grid-column: 1 / 13;
    }
}
.analytics-modal .modal-content {
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
}
.analytics-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.analytics-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}
.analytics-kpi-grid .kpi-card {
    text-align: center;
}
.analytics-kpi-grid .kpi-value.positive {
    color: var(--success-color);
}
.analytics-kpi-grid .kpi-value.negative {
    color: var(--error-color);
}
.analytics-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.pr-chart {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.pr-chart-row {
    display: grid;
    grid-template-columns: 80px 1fr 100px;
    align-items: center;
    gap: 1rem;
}
.pr-label {
    font-weight: 500;
    text-align: right;
}
.pr-bar-container {
    background: var(--border-color);
    border-radius: 8px;
    height: 32px;
    position: relative;
    overflow: hidden;
}
.pr-bar {
    background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
    height: 100%;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.5rem;
    min-width: 80px;
    transition: width 0.3s ease;
}
.pr-value {
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
}
.pr-date {
    font-size: 0.75rem;
    color: var(--text-secondary-color);
}
.volume-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem;
    height: 200px;
    padding: 1rem;
    background: var(--surface-color);
    border-radius: 8px;
}
.volume-bar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
}
.volume-bar-container {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
}
.volume-bar {
    width: 100%;
    background: linear-gradient(180deg, var(--primary-color), var(--secondary-color));
    border-radius: 4px 4px 0 0;
    position: relative;
    transition: height 0.3s ease;
    min-height: 4px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.25rem;
}
.volume-value {
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
}
.volume-label {
    font-size: 0.7rem;
    color: var(--text-secondary-color);
    text-align: center;
    transform: rotate(-45deg);
    transform-origin: center;
    white-space: nowrap;
}
.insight-box {
    background: var(--surface-color);
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
}
.insight-box p {
    margin: 0;
    line-height: 1.6;
}
.pr-item {
    flex-direction: column;
    gap: 0.25rem;
}
.pr-value-container {
    text-align: left;
}
.pr-value-container strong {
    display: block;
}
.pr-value-container .pr-date {
    font-size: 0.75rem;
    color: var(--text-secondary-color);
}
.snapshot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
}
.snapshot-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.snapshot-header {
    width: 100%;
    text-align: center;
}
.snapshot-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.snapshot-circle-container {
    position: relative;
    width: 120px;
    height: 120px;
}
.snapshot-circle {
    width: 100%;
    height: 100%;
    transform: rotate(0deg);
}
.snapshot-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.snapshot-percent {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-color);
}
.snapshot-details {
    text-align: center;
}
.snapshot-subtext {
    font-size: 0.85rem;
    color: var(--text-secondary-color);
}
/* --- Today's Focus Styles --- */
.focus-section {
    margin-bottom: 1.5rem;
}
.focus-section:last-child {
    margin-bottom: 0;
}
.focus-header {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.focus-header strong {
    font-size: 1rem;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.workout-preview {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.workout-preview h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-color);
}
.workout-description {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary-color);
    line-height: 1.5;
}
.exercise-preview {
    margin: 0.5rem 0;
}
.exercise-preview small {
    color: var(--text-secondary-color);
    font-size: 0.85rem;
}
.placeholder-message {
    text-align: center;
    padding: 2rem 1rem;
    background-color: var(--background-color);
    border-radius: 8px;
}
.placeholder-message p {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    color: var(--text-color);
}
.placeholder-message small {
    color: var(--text-secondary-color);
    font-size: 0.85rem;
}
.macro-summary {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.macro-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background-color: var(--background-color);
    border-radius: 8px;
}
.macro-icon {
    font-size: 1.5rem;
    margin-right: 0.5rem;
}
.macro-label {
    flex-grow: 1;
    font-weight: 500;
    color: var(--text-color);
}
.macro-value {
    font-weight: 600;
    color: var(--text-color);
    text-align: right;
}
/* --- Progress Trends & Charts (Refactored) --- */
.report-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.trends-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
.trends-grid.dual-view {
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {

    .report-stats-grid,
    .trends-grid.dual-view {
        grid-template-columns: 1fr;
    }
}
.data-card-subtitle {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    margin-top: 0;
}
.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.chart-select {
    padding: 0.25rem;
    border-radius: 6px;
    background: var(--background-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    font-size: 0.8rem;
    cursor: pointer;
}
.chart-container-box {
    height: 10.75rem;
    background: var(--surface-color-hover);
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    overflow: visible;
    position: relative;
    box-sizing: border-box;
}
.chart-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: var(--text-2xs, 0.75rem);
    font-weight: 700;
    line-height: 1.2;
}
.chart-tooltip {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-color);
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 6px;
    animation: fadeIn 0.15s ease-out;
}
.chart-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.chart-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.65rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-color);
    padding: 0 2px;
    line-height: 1.3;
}
.activity-chart-container {
    height: 12rem;
    background-color: var(--background-color);
    padding: 1rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4px;
    box-sizing: border-box;
}
.activity-bar {
    width: 100%;
    background-color: var(--primary-color-translucent);
    border-radius: 4px 4px 0 0;
    min-width: 4px;
    /* Ensure visibility on tiny screens */
}
.activity-empty-state {
    height: 12rem;
    background-color: var(--background-color);
    padding: 1rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.activity-empty-state p {
    font-size: 0.875rem;
    color: var(--text-secondary-color);
    text-align: center;
    margin: 0;
}
.chart-caption {
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-secondary-color);
    margin-top: 0.5rem;
}
/* --- Progression & Gamification Card --- */
.gamification-view .card-header h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.gamification-header-stats {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.user-main-level {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.level-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark, #1a73e8));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 12px var(--primary-color-translucent);
    flex-shrink: 0;
}
.level-value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
}
.level-text {
    font-size: 0.7rem;
    font-weight: 700;
    opacity: 0.9;
}
.xp-master-bar {
    height: 12px !important;
    background: var(--input-bg) !important;
    border-radius: 6px !important;
    overflow: hidden;
    margin-top: 0.5rem;
}
.xp-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary-color);
}
/* --- Achievement Premium Grid --- */
.achievement-premium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}
.achievement-premium-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.2s ease;
    cursor: default;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.achievement-premium-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.achievement-visual {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--background-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    position: relative;
    transition: all 0.3s ease;
}
.achievement-premium-card.unlocked .achievement-visual {
    background: var(--primary-color-translucent);
    color: var(--primary-color);
    box-shadow: 0 0 15px var(--primary-color-translucent);
}
.achievement-premium-card.locked .achievement-visual {
    filter: grayscale(1);
    opacity: 0.6;
}
.lock-overlay {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.achievement-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.ach-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.2;
}
.ach-xp {
    font-size: 0.75rem;
    font-weight: 700;
    color: #22c55e;
}
/* --- Workout Library --- */
.user-workout-library-container {
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.library-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.library-content {
    flex: 1;
    overflow-y: auto;
}
.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}
.workout-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.workout-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.type-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    background: var(--surface-color-hover);
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-secondary-color);
    border: 1px solid transparent;
}
.workout-card:hover .type-badge {
    background: var(--background-color);
    border-color: var(--border-color);
}
.card-actions {
    margin-top: auto;
    padding-top: 0.5rem;
    display: flex;
    justify-content: flex-end;
}
.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary-color);
    background: var(--surface-color);
    border-radius: 12px;
    border: 1px dashed var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
/* Modal Selection Cards */
.type-select-modal .modal-content {
    max-width: 800px;
}
.btn-card {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-color);
    height: 100%;
}
.btn-card:hover {
    background: var(--surface-color-hover);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.btn-card svg {
    color: var(--primary-color);
}
/* --- Custom Exercise Manager --- */
.custom-exercise-manager {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.manager-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.section-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}
.section-subtitle {
    margin: 0.25rem 0 0 0;
    color: var(--text-secondary-color);
    font-size: 0.9rem;
}
.manager-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
    background: var(--background-color);
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
.search-bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary-color);
}
.search-bar input {
    background: transparent;
    border: none;
    color: var(--text-color);
    font-size: 0.95rem;
    width: 100%;
}
.search-bar input:focus {
    outline: none;
}
.filter-dropdown {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 1rem;
    border-left: 1px solid var(--border-color);
    color: var(--text-secondary-color);
}
.filter-dropdown select {
    background: transparent;
    border: none;
    color: var(--text-color);
    font-weight: 500;
    cursor: pointer;
}
.filter-dropdown select:focus {
    outline: none;
}
.exercise-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.exercise-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 0.2s ease;
    cursor: default;
}
.exercise-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.exercise-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.exercise-type-tag {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    background: var(--surface-color-hover);
    color: var(--text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.exercise-type-tag.lifting {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}
.exercise-type-tag.cardio {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}
.exercise-type-tag.plyometrics {
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
}
.exercise-type-tag.stretching {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}
.exercise-actions {
    display: flex;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.2s;
}
.exercise-card:hover .exercise-actions {
    opacity: 1;
}
.btn-icon-small {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary-color);
    padding: 4px;
    border-radius: 4px;
    display: flex;
}
.btn-icon-small:hover {
    background: var(--surface-color-hover);
    color: var(--primary-color);
}
.btn-icon-small.delete:hover {
    color: var(--error-color);
}
.exercise-name {
    margin: 0.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
}
.exercise-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary-color);
}
.video-link {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--primary-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    background: var(--primary-color-translucent);
    border-radius: 6px;
    width: -moz-fit-content;
    width: fit-content;
    font-weight: 500;
}
.video-link:hover {
    background: var(--primary-color);
    color: white;
}
/* Modal Styles specific to Exercise Manager */
.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
/* History multi-select (DB-44): the one accent, not orange. */
.history-item--selected { border-color: rgba(var(--primary-rgb), 0.5) !important; background: rgba(var(--primary-rgb), 0.05); }
.history-select-dot { border-color: var(--border-color); }
.history-select-dot--on { background: var(--primary-color); border-color: var(--primary-color); }
/* styles/views/_company-view.css */
.company-view {
    display: grid;
    grid-template-columns: 250px 1fr;
    height: 100vh;
    height: 100svh;
}
.company-nav {
    background-color: var(--surface-color);
    border-right: 1px solid var(--border-color);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}
.company-nav h3 {
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.3rem;
}
.company-nav-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: auto; /* Pushes logout button down */
}
.company-nav-links button {
    background: none;
    border: none;
    color: var(--text-secondary-color);
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.company-nav-links button:hover {
    background-color: var(--background-color);
    color: var(--text-color);
}
.company-nav-links button.active {
    background-color: var(--primary-color-translucent);
    color: var(--primary-color);
    font-weight: 600;
}
.btn-logout {
    background: none;
    border: 1px solid var(--error-color);
    color: var(--error-color);
    padding: 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1rem;
    width: 100%;
}
.btn-logout:hover {
    background-color: rgba(207, 102, 121, 0.1);
}
.company-content {
    overflow-y: auto;
    padding: 2rem;
}
.company-dashboard-view h2 {
    color: var(--text-color);
    margin-bottom: 0.5rem;
}
.company-performance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem; /* Standardized */
    margin-top: 2rem;
}
.kpi-card {
    background-color: var(--surface-color);
    border-radius: 16px; /* Standardized from 12px */
    padding: 1.5rem;
    border: 1px solid var(--border-color);
}
.kpi-card h3 {
    margin-top: 0;
    font-size: 1rem;
    color: var(--text-secondary-color);
    font-weight: 500;
}
.kpi-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0.5rem 0;
}
.kpi-card small {
    color: var(--text-secondary-color);
}
.company-card {
     background-color: var(--surface-color);
     border-radius: 16px; /* Standardized from 12px */
     padding: 1.5rem;
     border: 1px solid var(--border-color);
     grid-column: span 1; /* Default span */
}
.company-card.list-card {
    grid-column: span 2; /* Make leaderboard wider on larger grids */
}
.company-card h3 {
    margin-top: 0;
    font-size: 1.2rem;
    color: var(--secondary-color);
}
.company-card .leaderboard-list { margin-top: 1rem; }
.trainer-management-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.trainer-management-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--background-color);
    padding: 1rem;
    border-radius: 8px;
}
.trainer-management-item .friend-avatar {
    width: 40px;
    height: 40px;
}
.trainer-management-item .trainer-info {
    flex-grow: 1;
}
.trainer-management-item .trainer-info strong {
    display: block;
}
.trainer-management-item .trainer-info small {
    color: var(--text-secondary-color);
}
.trainer-management-item .btn {
    width: auto;
    flex-shrink: 0;
}
.kpi-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.kpi-summary-grid .kpi-card {
  padding: 1rem;
}
.kpi-summary-grid .kpi-card h3 {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  text-transform: none;
  border-bottom: none;
  color: var(--text-secondary-color);
}
.kpi-summary-grid .kpi-card .kpi-value {
  font-size: 2rem;
  margin: 0;
}
/* styles/views/_events-page.css */
.events-page-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem;
  height: auto;
  width: 100%;
  box-sizing: border-box;
}
.premium-layout {
  padding: 0 !important;
  /* Shell provides 1.5rem gutters; removing double padding */
}
/* Polished horizontal filter bar */
.events-filter-sidebar {
  display: flex !important;
  flex-direction: column !important;
  /* Managed by rows */
  gap: 1.5rem;
  background: var(--surface-color);
  padding: 1.25rem 1.5rem;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.filter-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-end;
  width: 100%;
}
@media (min-width: 1024px) {
  .filter-row {
    flex-wrap: nowrap !important;
  }

  .filter-row.grid-row-2 {
    display: grid !important;
    grid-template-columns: 120px 1fr 1fr auto;
    align-items: end;
    gap: 1.5rem;
  }
}
.premium-filter-card {
  border: 1px solid var(--border-color);
  background: var(--surface-color);
}
.filter-card-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.75rem;
}
.clear-filters-btn {
  background: none;
  border: none;
  color: var(--primary-color);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
}
.clear-filters-btn:hover {
  background-color: var(--primary-color-translucent);
}
.events-filter-sidebar .form-group {
  flex: 1 1 200px;
  min-width: 0;
  margin-bottom: 0;
}
.events-filter-sidebar .form-group label {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--text-secondary-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  display: block;
}
.events-filter-sidebar input,
.events-filter-sidebar select {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  padding: 10px 14px;
  border-radius: 12px;
  width: 100%;
  box-sizing: border-box;
  font-size: 0.95rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.events-filter-sidebar input:hover,
.events-filter-sidebar select:hover {
  border-color: var(--primary-color-translucent);
}
.events-filter-sidebar input:focus,
.events-filter-sidebar select:focus {
  border-color: var(--primary-color);
  outline: none;
  background: var(--surface-color);
  box-shadow: 0 0 0 3px var(--primary-color-translucent);
}
.filter-button-group {
  display: flex !important;
  flex-direction: row !important;
  gap: 0.5rem !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}
.filter-button {
  padding: 9px 18px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-secondary-color);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.filter-button.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}
.filter-actions-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  margin-top: auto;
}
/* List/Map Toggle Styling */
.view-toggle-container {
  display: flex;
  background: var(--input-bg);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}
.view-toggle-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-secondary-color);
  cursor: pointer;
  font-weight: 700;
  font-size: 0.85rem;
  transition: all 0.2s;
}
.view-toggle-btn.active {
  background: var(--primary-color);
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}
/* Hide mobile-only controls on desktop */
.mobile-events-controls,
.mobile-filter-chips {
  display: none !important;
}
.events-filter-sidebar .grid-span-2 {
  flex: 2 1 min(400px, 100%);
  /* Increased basis to prevent date squishing */
  min-width: min(350px, 100%);
}
/* --- Event Card Premium Refinement --- */
.event-card {
  background: var(--surface-color) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid var(--border-color) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  min-height: auto !important;
  /* Reset legacy min-height */
}
.event-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
  border-color: var(--primary-color-translucent) !important;
}
.event-card-image-wrapper {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}
.event-card-image {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s ease;
}
.event-card:hover .event-card-image {
  transform: scale(1.05);
}
.event-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
}
.card-category-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: white;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.event-card-content {
  padding: 1.25rem !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  background: var(--surface-color) !important;
  backdrop-filter: none !important;
  /* Remove legacy blur */
}
.card-main-info {
  flex: 1;
}
.card-brand-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--primary-color);
  letter-spacing: 1.5px;
  margin-bottom: 4px;
  opacity: 0.9;
}
.event-card-title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--text-color) !important;
  line-height: 1.3 !important;
  margin-bottom: 8px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  /* Standard property for compatibility */
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.card-trainer-info {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.trainer-name {
  font-size: 0.85rem;
  color: var(--text-secondary-color);
  font-weight: 500;
}
.card-price-tag {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--success-color);
  margin-top: 4px;
}
.card-footer-meta {
  border-top: 1px solid var(--border-color);
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-secondary-color);
  font-weight: 600;
}
.meta-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .event-list-content .program-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1200px) {
  .event-list-content .program-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* --- Event Detail Modal (Premium Refinement) --- */
.event-detail-modal .modal-content {
  max-width: 800px;
  width: 95%;
  padding: 0;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  background: var(--surface-color);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
  animation: modalScaleUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modalScaleUp {
  from {
    transform: scale(0.9) translateY(40px);
    opacity: 0;
  }

  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
.event-detail-modal .modal-header {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 100;
  margin: 0;
}
.event-detail-modal .modal-close-btn {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.event-detail-modal .modal-close-btn:hover {
  background: var(--error-color);
  transform: rotate(90deg) scale(1.1);
}
.event-detail-modal .modal-title {
  display: none;
}
.event-detail-glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 1.5rem;
  animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
[data-theme='light'] .event-detail-glass {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.event-meta-pill {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.event-meta-pill:hover {
  border-color: var(--primary-color);
  transform: translateY(-4px) scale(1.02);
  background: var(--primary-color-translucent);
  box-shadow: 0 8px 24px rgba(var(--primary-color-rgb), 0.1);
}
.event-meta-pill label {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--primary-color);
  letter-spacing: 1px;
  margin-bottom: 0.25rem;
  display: block;
}
.event-meta-pill strong {
  font-size: 1.1rem;
  color: var(--text-color);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.event-detail-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  background: rgba(var(--surface-rgb), 0.5);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-color);
  gap: 1.5rem;
}
.report-button-subtle {
  background: none;
  border: none;
  color: var(--text-secondary-color);
  font-size: 0.9rem;
  opacity: 0.6;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 0.6rem 1rem;
  border-radius: 12px;
}
.report-button-subtle:hover {
  opacity: 1;
  background: rgba(var(--error-color-rgb), 0.1);
  color: var(--error-color);
}
/* --- Responsive Utility Classes --- */
.mobile-only {
  display: none !important;
}
@media (max-width: 1023px) {
  .mobile-only {
    display: block !important;
  }

  .desktop-only {
    display: none !important;
  }
}
/* --- Map View (Desktop) --- */
.event-list-content.full-height {
  height: calc(100vh - 280px);
  min-height: 600px;
}
.map-view-wrapper {
  height: calc(100vh - 300px);
  min-height: 620px;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.event-map-container {
  height: 100% !important;
  min-height: 620px !important;
  width: 100% !important;
  position: relative;
  border-radius: 16px !important;
  overflow: hidden;
}
/* --- Mobile Responsiveness --- */
@media (max-width: 1023px) {
  .events-page-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.25rem;
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
  }

  .events-filter-sidebar {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 80vh;
    margin-bottom: 0;
    border-radius: 32px 32px 0 0;
    padding: 1.25rem;
    gap: 0.75rem;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2000;
    overflow-y: visible;
    overflow-x: hidden;
    background: var(--surface-color);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.4);
    display: none !important;
    box-sizing: border-box;
  }

  .events-filter-sidebar.show-mobile {
    position: fixed !important;
    transform: translateY(0);
    display: flex !important;
    flex-direction: column;
    z-index: 2001 !important;
    background: var(--surface-color) !important;
  }

  .drawer-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
  }

  .drawer-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--primary-color);
  }

  .close-drawer {
    background: var(--input-bg);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    font-size: 1.2rem;
    cursor: pointer;
  }

  .drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1999;
    animation: fadeInOverlay 0.3s ease;
  }

  @keyframes fadeInOverlay {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .filter-row {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .filter-row .form-group {
    flex: 1 1 100% !important;
    min-width: 0;
    margin-bottom: 0 !important;
  }

  .date-range-inputs {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .date-range-inputs input {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .filter-row-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 0.25rem 0.75rem !important;
  }

  .filter-row-2>label:nth-child(3) {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  .filter-row-2>div:nth-child(7) {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
  }

  .filter-row-2>label:nth-child(4) {
    display: none !important;
  }


  /* Mobile Events Controls Bar */
  .mobile-events-controls,
  div.mobile-events-controls,
  div.mobile-events-controls.mobile-only {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.35rem !important;
    width: 100% !important;
    margin-bottom: 0.5rem !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
  }

  .mobile-view-toggle {
    display: inline-flex !important;
    align-items: center !important;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 2px;
    gap: 2px;
    flex-shrink: 0;
  }

  .mobile-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px;
    padding: 6px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--text-secondary-color);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1;
    min-height: 32px;
    box-sizing: border-box;
  }

  .mobile-toggle-btn.active {
    background: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb, 16, 185, 129), 0.25);
  }

  .mobile-actions-cluster {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    flex-shrink: 0;
  }

  .mobile-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px;
    height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-sizing: border-box;
    line-height: 1;
  }

  .mobile-filter-btn {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
  }

  .mobile-filter-btn:active {
    background: var(--input-bg);
  }

  .mobile-filter-btn.has-active {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(var(--primary-rgb, 16, 185, 129), 0.08);
  }

  .filter-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--primary-color);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    margin-left: 2px;
  }

  .mobile-submit-btn {
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb, 16, 185, 129), 0.25);
  }

  .mobile-submit-btn:active {
    filter: brightness(1.08);
  }

  .chip {
    padding: 0.45rem 0.9rem;
    border-radius: 16px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-secondary-color);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s;
    cursor: pointer;
  }

  .chip.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px var(--primary-color-translucent);
  }

  /* Responsive styling for sponsored hero banner */
  .sponsored-hero-banner {
    min-height: 180px !important;
    padding: 16px 18px !important;
    border-radius: 14px !important;
    margin-bottom: 0.5rem;
  }

  .sponsored-hero-banner h2 {
    font-size: 1.3rem !important;
  }

  .event-list-content.full-height {
    height: calc(100vh - 250px);
    min-height: 400px;
  }

  .map-view-wrapper {
    height: calc(100vh - 250px) !important;
    min-height: 480px !important;
    margin-top: 0;
    position: relative;
    z-index: 5;
  }

  .event-map-container {
    height: 100% !important;
    min-height: 480px !important;
    border-radius: 24px !important;
  }
}
@media (max-width: 480px) {
  .events-page-layout {
    padding: 0.25rem;
  }

  .event-list-content .program-list {
    grid-template-columns: 1fr;
  }

  .event-card {
    min-height: 280px !important;
  }

  .event-card-image-wrapper {
    height: 150px;
  }
}
.map-toggle-bar {
  display: flex;
  background: var(--surface-color);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 1rem;
  border: 1px solid var(--border-color);
}
.map-toggle-btn {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary-color);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.map-toggle-btn.active {
  background: var(--primary-color);
  color: white;
  box-shadow: 0 4px 12px var(--primary-color-translucent);
}
/* Standard Inputs */
.events-filter-sidebar input,
.events-filter-sidebar select {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  padding: 10px 14px;
  border-radius: 12px;
  width: 100%;
  transition: all 0.3s;
}
.events-filter-sidebar input:focus {
  background: var(--input-bg);
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 4px var(--primary-color-translucent);
}
.events-page-header {
  margin-bottom: 0.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--surface-color);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 1199px) {
  .events-page-header {
    padding: 0.75rem 1rem;
    margin-bottom: 0;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }

  .events-page-header h1 {
    font-size: 1.4rem !important;
  }

  .events-page-header p {
    display: none !important;
  }
}
/* --- Modern Event Card System --- */
.modern-event-card {
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s ease !important;
}
.modern-event-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
}
.modern-event-card:active {
  transform: translateY(-1px) !important;
}
/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.events-hero-header {
  margin-bottom: 0.25rem;
}
.filter-badge {
  background: var(--primary-color);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 9999px;
  margin-left: 4px;
}
/* The Official/Trainer filter took this margin from the old marketplace copy of
   .segmented-control. Kept when the control moved to components.css (trainer wave 6) so the
   Events toolbar does not shift; it sits the switch 12px above the search field's centre line. */
.events-discovery-hub .segmented-control {
  margin-bottom: 1.5rem;
}
/* ==========================================================================================
   Events tab, wave 5 (programs+events review): one button system and one card.
   Buttons are the shared .btn / .btn-secondary / .btn-ghost / .btn-sm / .btn-chip /
   .segmented-control (styles/components.css); the primary fill is --primary-fill with
   --on-primary-color, which passes contrast in both themes (PU-04). Everything here is 44px+.
   Category hues are tokens, never hex in the components (EV-35).
   ========================================================================================== */
:root,
[data-theme='light'] {
  --tone-event-run: #047857; --tone-event-trail: #4d7c0f; --tone-event-ultra: #6d28d9;
  --tone-event-tri: #0369a1; --tone-event-ride: #0e7490; --tone-event-ocr: #b91c1c;
  --tone-event-station: #a16207; --tone-event-strength: #334155;
  --event-scrim: rgba(0, 0, 0, 0.62);
}
[data-theme='dark'] {
  --tone-event-run: #34d399; --tone-event-trail: #a3e635; --tone-event-ultra: #a78bfa;
  --tone-event-tri: #38bdf8; --tone-event-ride: #22d3ee; --tone-event-ocr: #f87171;
  --tone-event-station: #facc15; --tone-event-strength: #94a3b8;
  --event-scrim: rgba(0, 0, 0, 0.66);
}
.ev-page { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; }
.ev-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ev-between { justify-content: space-between; }
.ev-end { justify-content: flex-end; }
.ev-flex { flex: 1 1 0; min-width: 0; }
.ev-center { display: flex; justify-content: center; margin: var(--space-6) 0 var(--space-4); }
.ev-muted { margin: 0; color: var(--text-secondary-color); font-size: var(--text-sm); }
.ev-mono { font-variant-numeric: tabular-nums; }
.ev-label { display: block; font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary-color); text-transform: uppercase; letter-spacing: 0.04em; }
.ev-loading { padding: 4rem 0; display: flex; justify-content: center; }
/* Header: a title on phones too (PU-17), and controls that line up (PU-09). */
.ev-header { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.ev-title { margin: 0; font-size: var(--text-2xl); font-weight: 900; color: var(--text-color); letter-spacing: -0.02em; }
.ev-subtitle { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-secondary-color); }
.ev-header .segmented-control { margin: 0; }
/* Inputs: 16px so iOS never zooms, 44px tall. */
.ev-input {
  width: 100%; min-height: 44px; padding: 0 var(--space-3); box-sizing: border-box;
  border-radius: var(--radius-md); border: 1px solid var(--border-color);
  background: var(--surface-color); color: var(--text-color); font: inherit; font-size: var(--text-md);
}
.ev-textarea { min-height: 110px; padding: var(--space-3); resize: vertical; }
.ev-select { width: auto; min-width: 120px; padding-right: var(--space-6); }
.ev-input-wrap { position: relative; display: flex; align-items: center; }
.ev-input-search { padding-left: 40px; padding-right: 44px; }
.ev-input-leading { position: absolute; left: 12px; color: var(--text-secondary-color); display: inline-flex; pointer-events: none; }
.ev-input-trailing { position: absolute; right: 0; top: 0; bottom: 0; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.ev-icon-plain { background: none; border: none; color: var(--text-secondary-color); cursor: pointer; }
.ev-icon-plain:focus-visible { outline: 2px solid var(--primary-color); outline-offset: -2px; }
.ev-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Discovery: search, segments, chips, the filter panel. */
.ev-discovery { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--border-color); background: var(--surface-color); }
.ev-discovery .segmented-control { margin-bottom: 0; }
.ev-search-row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.ev-search-row .btn { flex-shrink: 0; }
.ev-chip-row { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ev-chip-row::-webkit-scrollbar { display: none; }
.ev-chip-row.ev-wrap { flex-wrap: wrap; overflow: visible; margin-top: 6px; }
.ev-filter-panel { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-color); }
.ev-filter-panel > .btn { align-self: flex-start; }
.ev-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.ev-filter-panel input[type='range'] { width: 100%; min-height: 44px; accent-color: var(--primary-fill); }
.ev-results-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); flex-wrap: wrap; }
.ev-sort { display: inline-flex; align-items: center; gap: var(--space-2); }
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: var(--space-4); width: 100%; }
/* The event card IS the program card (enhancements.css .program-card, wave 6: PU-33): these add
   only the sport tone and icon under the photo (a failed photo leaves them, PU-03). */
.ev-media-card { background: var(--ev-tone, var(--primary-fill)); color: var(--on-image-color); }
.ev-media-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 12%; color: rgba(255, 255, 255, 0.82); }
.ev-card-img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.ev-banner:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
/* "2 friends going" on the photo: readable on the scrim in both themes. */
.ev-media-friends:empty { display: none; }
.ev-media-friends > div { color: var(--on-image-color) !important; margin: 2px 0 0 !important; font-size: var(--text-xs) !important; }
.ev-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ev-tag { font-size: var(--text-xs); font-weight: 700; padding: 2px 8px; border-radius: var(--radius-full); border: 1px solid var(--border-color); color: var(--text-secondary-color); background: var(--background-color); }
.ev-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-full);
  background: var(--event-scrim); color: var(--on-image-color); font-size: var(--text-xs); font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; box-shadow: inset 3px 0 0 var(--ev-tone, transparent);
}
.ev-badge-intent { background: var(--primary-fill); color: var(--on-primary-color); box-shadow: none; }
/* Featured banner. */
.ev-banner { position: relative; min-height: 200px; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; display: flex; align-items: flex-end; background: var(--ev-tone, var(--primary-fill)); }
.ev-banner-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.2) 100%); }
.ev-banner-close { position: absolute; top: 8px; right: 8px; z-index: 2; }
.ev-banner-content { position: relative; z-index: 1; padding: var(--space-5) var(--space-6); color: var(--on-image-color); max-width: 720px; }
.ev-banner-title { margin: var(--space-2) 0 4px; font-size: var(--text-2xl); font-weight: 900; line-height: 1.15; color: var(--on-image-color); }
.ev-banner-desc { margin: 0; font-size: var(--text-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Icon buttons on a photo: 44px, labelled (EV-34). */
.ev-icon-btn {
  width: 44px; height: 44px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center;
  background: var(--event-scrim); color: var(--on-image-color); border: 1px solid rgba(255, 255, 255, 0.25); cursor: pointer; flex-shrink: 0;
}
.ev-icon-btn:focus-visible { outline: 2px solid var(--on-image-color); outline-offset: 2px; }
/* My races (EV-28/EV-48). */
.ev-my-races { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--border-color); background: var(--surface-color); }
.ev-section-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.ev-section-head h2 { margin: 0; font-size: var(--text-lg); font-weight: 800; color: var(--text-color); }
.ev-race-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ev-race-row {
  width: 100%; min-height: 56px; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--background-color);
  color: var(--text-color); font: inherit; text-align: left; cursor: pointer;
}
.ev-race-row:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.ev-race-date { display: flex; flex-direction: column; align-items: center; min-width: 40px; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; color: var(--primary-text, var(--primary-color)); }
.ev-race-date strong { font-size: var(--text-lg); color: var(--text-color); line-height: 1; }
.ev-race-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ev-race-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-race-meta { font-size: var(--text-sm); color: var(--text-secondary-color); }
.ev-race-action { font-size: var(--text-sm); font-weight: 700; color: var(--primary-text, var(--primary-color)); white-space: nowrap; }
/* Virtual races. */
.ev-virtual { margin-top: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--border-color); overflow: hidden; background: var(--surface-color); }
.ev-virtual-head { width: 100%; min-height: 52px; display: flex; justify-content: space-between; align-items: center; padding: 0 var(--space-4); border: none; background: none; color: var(--text-color); font: inherit; font-weight: 800; cursor: pointer; }
.ev-virtual-grid { padding: var(--space-4); border-top: 1px solid var(--border-color); }
.ev-count { padding: 0 8px; border-radius: var(--radius-full); border: 1px solid var(--border-color); font-size: var(--text-xs); color: var(--text-secondary-color); }
/* Map. */
.ev-map-wrap { width: 100%; height: calc(100vh - 280px); min-height: 420px; }
.ev-map-wrap .event-map-container { min-height: 420px !important; }
.event-map-canvas { width: 100%; height: 100%; min-height: 420px; }
.event-map-failed { display: flex; align-items: center; justify-content: center; padding: var(--space-6); }
.event-marker { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid var(--on-image-color); box-shadow: var(--shadow-sm); cursor: pointer; }
/* Mapbox draws its popup on white in both themes. */
.event-map-popup { color: #111827; padding: 4px; min-width: 140px; font-size: 13px; }
.event-map-popup-tag { display: inline-block; margin-top: 4px; padding: 2px 6px; border-radius: 4px; background: #e5e7eb; color: #374151; font-weight: 700; font-size: 12px; }
/* Event detail: the overlay closes it (EV-34); a sheet on phones, a dialog on desktop. */
.ev-detail-overlay {
  display: flex; justify-content: center; align-items: center; position: fixed; inset: 0; z-index: 99999;
  background: rgba(0, 0, 0, 0.55); pointer-events: auto;
  padding: env(safe-area-inset-top, 0px) 0 0;
}
.ev-detail {
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 92vh;
  margin: auto; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-color); color: var(--text-color);
  box-shadow: var(--shadow-lg); animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 640px) {
  .ev-detail-overlay { align-items: flex-end; }
  .ev-detail { max-height: calc(100vh - env(safe-area-inset-top, 0px) - 12px); border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin: 0; }
}
.ev-detail-hero { position: relative; height: 220px; flex-shrink: 0; background: var(--ev-tone, var(--primary-fill)); }
.ev-detail-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.05) 45%, rgba(0, 0, 0, 0.7) 100%); }
.ev-detail-hero-top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: var(--space-3); z-index: 2; }
.ev-detail-hero-bottom { position: absolute; left: var(--space-4); bottom: var(--space-3); display: flex; gap: var(--space-2); z-index: 2; }
.ev-detail-body { padding: var(--space-4) var(--space-5); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4); flex: 1; }
.ev-detail-title { margin: 0 0 4px; font-size: var(--text-2xl); font-weight: 900; line-height: 1.2; letter-spacing: -0.02em; }
.ev-detail-org { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-sm); color: var(--text-secondary-color); }
.ev-detail-org strong { color: var(--text-color); }
.ev-trust { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); font-size: var(--text-xs); font-weight: 700; }
.ev-trust.is-verified { border-color: var(--primary-color); color: var(--primary-text, var(--primary-color)); }
.ev-facts { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--background-color); }
.ev-fact { display: flex; align-items: center; gap: var(--space-3); }
.ev-fact-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: var(--primary-color-translucent); color: var(--primary-text, var(--primary-color)); font-weight: 800; }
.ev-fact-label { font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary-color); text-transform: uppercase; letter-spacing: 0.04em; }
.ev-fact-value { font-weight: 700; font-size: var(--text-md); }
.ev-link-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0; border: none; background: none; color: var(--primary-text, var(--primary-color)); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.ev-detail-about h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: 800; }
.ev-detail-about p { margin: 0 0 var(--space-3); line-height: 1.6; color: var(--text-secondary-color); }
.ev-workout { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--primary-color); background: var(--primary-color-translucent); }
.ev-result { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ev-result .btn { width: 100%; }
.ev-report-row { display: flex; justify-content: center; }
/* The footer is the program detail's action bar (enhancements.css .program-action-bar, wave 6);
   the intent switch, its help and the goal row take a full line each. */
.ev-action-bar > .segmented-control, .ev-action-bar > .ev-intent-help, .ev-action-bar > .ev-goal-row { flex: 1 1 100%; }
.ev-intent-help { margin: 0; font-size: var(--text-sm); color: var(--text-secondary-color); text-align: center; }
.ev-goal-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary-color); }
.ev-goal-on { display: inline-flex; align-items: center; gap: 4px; color: var(--primary-text, var(--primary-color)); font-weight: 700; }
.ev-report { position: absolute; inset: 0; z-index: 10; background: var(--surface-color); padding: var(--space-6); display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); }
.ev-report-head { text-align: center; }
.ev-report-head h3 { margin: var(--space-2) 0 4px; font-size: var(--text-xl); font-weight: 800; }
.ev-report-head p { margin: 0; color: var(--text-secondary-color); font-size: var(--text-sm); }
.ev-report-icon { display: inline-flex; color: var(--error-text, var(--error-color)); }
/* Forms (suggest a race). */
.ev-form { display: flex; flex-direction: column; gap: var(--space-3); }
.ev-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.ev-form-grid-3 { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 480px) {
  .ev-form-grid, .ev-form-grid-3 { grid-template-columns: 1fr; }
}
.ev-error { margin: 0; color: var(--error-text, var(--error-color)); font-size: var(--text-sm); }
.ev-notice { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--primary-color); background: var(--primary-color-translucent); color: var(--text-color); font-weight: 700; margin-bottom: var(--space-3); }
/* The race's logo: a small badge beside its sport chip and title, never the cover. */
.ev-chip-group { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.ev-logo-badge { width: 28px; height: 28px; border-radius: var(--radius-sm); -o-object-fit: contain; object-fit: contain; background: var(--on-image-color); padding: 2px; box-sizing: border-box; flex-shrink: 0; }
.ev-logo-badge-lg { width: 44px; height: 44px; border: 1px solid var(--border-color); }
.ev-detail-title-row { display: flex; align-items: center; gap: var(--space-3); }
/* A replaced listing (WITHDRAWN/DUPLICATE) opened from My races. */
.ev-replaced { flex: 1 1 100%; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--background-color); font-size: var(--text-sm); color: var(--text-secondary-color); }
.ev-replaced strong { color: var(--text-color); font-size: var(--text-md); }
/* --- Wave 7 (EV-41/45/51/53, PX-37) ------------------------------------------------------------ */
/* "Use my location" in one tap, and where the ZIP lookup goes. */
.ev-near-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.ev-field-note { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--text-secondary-color); line-height: 1.4; }
.ev-small { font-size: var(--text-xs); }
.ev-fact-sub { margin-top: 2px; text-transform: none; letter-spacing: 0; }
/* The challenge card's header is its toggle (collapsed after the first view). */
.hc-toggle { width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; flex-wrap: nowrap; }
.hc-toggle:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; border-radius: var(--radius-sm); }
.hc-toggle-hint { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.hc-card--collapsed { padding-top: var(--space-2); padding-bottom: var(--space-2); }
/* Programs for this race: the marketplace's program cards, in a scrolling row. */
.ev-race-programs h3, .ev-conditions h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: 800; }
.ev-race-programs-list { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 78%); gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-1); }
.ev-race-programs-list > li { scroll-snap-align: start; min-width: 0; }
.ev-race-program { padding: 0; font: inherit; text-align: left; background: var(--surface-color); color: inherit; min-height: 160px; }
.ev-race-program-timing { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Course & conditions: one pin, the forecast, the fuel plan link. */
.ev-conditions { display: flex; flex-direction: column; gap: var(--space-2); }
.ev-pin-map { width: 100%; height: 160px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-color); background: var(--background-color); }
.ev-forecast { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--background-color); font-size: var(--text-sm); color: var(--text-color); }
.ev-fuel-link { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-color); }
/* styles/views/_health-view.css */
.health-view-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem; /* Standardized to 1.5rem */
    width: 100%;
    height: 100%; 
}
.health-main-col {
    grid-column: 1 / 9; /* Span 8 columns (Desktop) */
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.health-side-col {
    grid-column: 9 / 13; /* Span 4 columns (Desktop) */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}
.health-main-col .card,
.health-side-col .card {
    width: 100%;
    height: 100%;
}
.health-side-col .card {
    justify-content: center; 
}
@media (max-width: 1199px) {
    .health-view-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    
    .health-main-col, 
    .health-side-col {
        width: 100%;
        grid-column: auto;
    }

    .health-side-col {
        flex-direction: row; 
        flex-wrap: wrap;
    }
    
    .health-side-col > * {
        flex: 1 1 200px;
    }
}
/* One card contract on the Health tab (UX-07): the GlassCard numbers for every .card here, in
   both themes. Raw .card dropped to a 10px radius and 0.15rem padding on phones (the global
   max-width:1199px rule other tabs rely on), and the dark theme gave it a translucent blur, so
   Mood and Energy looked like another app beside the GlassCards. Scoped, not global. */
[data-theme] .health-view-container .card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
/* Size at single-class weight (:where adds none) and before enhancements.css, so a card that sets
   its own padding (the Sleep Hub's sections) keeps it. */
:where(.health-view-container) .card {
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}
/* A card inside a Health sheet sits on the sheet's own surface colour in the dark theme, with
   only a hairline between them (UX-23): one step lighter. */
[data-theme] .health-view-container .modal-content .card {
    background: var(--surface-inset);
}
/* The global .card h3 is an uppercase 14px label with a rule under it; Health cards title with
   the GlassCard title, and an h3 inside one (an empty state) is plain text. */
[data-theme] .health-view-container .card h3 {
    text-transform: none;
    letter-spacing: normal;
    border-bottom: none;
    padding-bottom: 0;
}
/* styles/views/_lifecoach-view.css */
.life-coach-tip { font-style: italic; color: var(--text-secondary-color); border-left: 3px solid var(--secondary-color); padding-left: 1rem; margin: 1rem 0; }
.custom-prompt-textarea { height: 60px; }
/* --- Gratitude Journal --- */
.gratitude-inputs {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.gratitude-input-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.gratitude-number {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary-color);
}
/* --- FIX: Added background/color/border variables for inputs --- */
.gratitude-input-group input {
  flex-grow: 1;
  padding: 0.75rem;
  border-radius: 10px;
  height: auto; 
  line-height: 1.4;
  background-color: var(--background-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  transition: border-color 0.2s ease;
}
.gratitude-input-group input:focus {
    outline: none;
    border-color: var(--primary-color);
}
/* --- AI Coach Prompt Starters --- */
.prompt-starter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1rem;
}
.prompt-starter-btn {
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-secondary-color);
  padding: 1rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
}
.prompt-starter-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}
/* styles/views/_mobile-dashboard.css */
.mobile-dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* Matches your mobile gap */
}
/* --- Welcome Header --- */
.welcome-header {
  padding: 0.25rem 0.5rem;
}
.welcome-header h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 0 0 0.25rem 0;
}
.welcome-header p {
  font-size: 1rem;
  color: var(--text-secondary-color);
  margin: 0;
}
/* --- Use existing streak display --- */
.mobile-dashboard-container .streak-display {
  margin-top: 0;
  gap: 1rem;
}
.mobile-dashboard-container .streak-item {
  font-size: 0.9rem;
  gap: 0.5rem;
}
.mobile-dashboard-container .streak-item svg {
  width: 20px;
  height: 20px;
}
/* --- Today's Plan Card --- */
.todays-plan-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: var(--surface-color);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  padding: 1rem;
}
.todays-plan-card h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.plan-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background-color: var(--background-color);
  padding: 1rem;
  border-radius: 10px;
}
.plan-item-info {
  min-width: 0; /* for ellipsis */
}
.plan-item-info strong {
  display: block;
  font-size: 1rem;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-item-info small {
  display: block;
  font-size: 0.85rem;
  color: var(--text-secondary-color);
}
.plan-item-row .btn {
  width: auto;
  flex-shrink: 0;
  font-size: 0.9rem;
  padding: 0.75rem 1rem;
}
/* --- Top Goal Card --- */
.top-goal-card {
  /* We can just re-use the .goal-item style */
}
.top-goal-card .goal-item {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.top-goal-card .card-header {
  cursor: default; /* Disable move cursor */
}
/* styles/views/_nutrition-view.css */
/* --- Nutrition Goals --- */
.nutrition-targets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding-top: 0.5rem;
}
.target-item {
  background-color: var(--background-color);
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  border-left: 4px solid var(--border-color);
}
.target-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.target-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary-color);
  text-transform: uppercase;
}
.target-item.calories {
  grid-column: 1 / -1;
  /* Span full width */
  border-color: var(--primary-color);
  color: var(--primary-color);
}
.target-item.protein {
  border-color: var(--protein-color);
  color: var(--protein-color);
}
.target-item.carbs {
  border-color: var(--carbs-color);
  color: var(--carbs-color);
}
.target-item.fat {
  border-color: var(--fat-color);
  color: var(--fat-color);
}
/* --- AI Meal Planner --- */
.structured-meal-plan {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 1024px) {
  .structured-meal-plan {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .meal-plan-item {
    padding: 0.75rem;
  }
  .meal-plan-header {
    margin-bottom: 0.5rem;
  }
  .meal-plan-header h4 {
    font-size: 1rem;
  }
  .meal-plan-details {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
  }
}
.meal-plan-item {
  background-color: var(--background-color);
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
}
.meal-plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  cursor: pointer;
}
.meal-plan-header h4 {
  margin: 0;
  color: var(--primary-color);
  font-size: 1.1rem;
  text-transform: capitalize;
}
.meal-plan-header .btn-cook,
.meal-plan-header .btn-save-meal {
  width: auto;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.meal-plan-item p {
  font-size: 0.95rem;
  color: var(--text-color);
  font-weight: 500;
  margin: 0;
}
.meal-plan-item.expanded {
  border-color: var(--primary-color);
}
.meal-plan-details {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}
.subheading-small {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary-color);
  text-transform: uppercase;
  margin: 0 0 0.75rem 0;
}
.meal-plan-details ul,
.meal-plan-details ol {
  padding-left: 1.25rem;
  margin: 0 0 1rem 0;
  color: var(--text-secondary-color);
}
.meal-plan-details li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}
/* Recipe List */
.recipe-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.recipe-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  border-radius: 8px;
}
.recipe-item.clickable {
  cursor: pointer;
}
.recipe-item.clickable:hover {
  background-color: var(--background-color);
}
.star-rating {
  color: var(--text-secondary-color);
}
.star-rating span {
  cursor: pointer;
}
.star-rating.large {
  font-size: 1.5rem;
}
.star-rating span.filled {
  color: var(--gold-color);
}
.recipe-detail-content .btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}
.recipe-detail-content .btn-group .btn,
.recipe-detail-content .btn-group .btn-secondary {
  flex: 1;
}
/* Cooking Guide Modal */
.cooking-guide-modal .modal-content {
  max-width: 500px;
  width: 90vw;
}
.cooking-guide-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}
.total-time-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary-color);
}
.total-time-chip svg {
  width: 16px;
  height: 16px;
}
.cooking-guide-layout {
  display: flex;
  flex-direction: column;
  height: 60vh;
  min-height: 400px;
}
.cooking-guide-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1rem;
  background-color: var(--background-color);
  border-radius: 10px;
}
.cooking-guide-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color);
  margin-top: 1.5rem;
}
.cooking-guide-nav .btn-group .btn {
  width: auto;
  flex: 0 1 120px;
}
.cooking-guide-step {
  text-align: center;
}
.step-counter {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 1rem;
}
.cooking-guide-step h2 {
  font-size: 1.5rem;
  line-height: 1.4;
  min-height: 80px;
  color: var(--text-color);
  margin-top: 0;
  margin-bottom: 1rem;
}
.step-instruction {
  font-size: 1.1rem;
  color: var(--text-secondary-color);
  line-height: 1.6;
  min-height: 100px;
}
.timer-section {
  margin-top: 2rem;
}
.timer-display {
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--secondary-color);
  margin-bottom: 1rem;
}
.timer-section .btn {
  width: auto;
  padding: 0.75rem 1.5rem;
}
.cooking-guide-ingredients.visible {
  display: block;
}
.cooking-guide-ingredients .subheading {
  margin-top: 0;
  border-bottom: none;
  color: var(--primary-color);
}
.cooking-guide-ingredients ul {
  list-style-type: disc;
  padding-left: 1.5rem;
}
.cooking-guide-ingredients li {
  font-size: 1rem;
  color: var(--text-secondary-color);
  margin-bottom: 0.5rem;
  line-height: 1.5;
}
/* Daily Summary */
.daily-summary-item {
  margin-bottom: 1rem;
}
.daily-summary-item:last-child {
  margin-bottom: 0;
}
.summary-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
}
.summary-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color);
}
.summary-values {
  font-size: 0.9rem;
  color: var(--text-secondary-color);
}
.summary-values strong {
  color: var(--text-color);
}
.macro-progress-bar-container {
  width: 100%;
  height: 10px;
  background-color: var(--background-color);
  border-radius: 5px;
  overflow: hidden;
  display: flex;
}
.macro-progress-bar {
  height: 100%;
  border-radius: 5px;
  transition: width 0.3s ease;
}
.macro-progress-bar.calories {
  background-color: var(--primary-color);
}
.macro-progress-bar.protein {
  background-color: var(--protein-color);
}
.macro-progress-bar.carbs {
  background-color: var(--carbs-color);
}
.macro-progress-bar.fat {
  background-color: var(--fat-color);
}
.macro-progress-bar.over-goal {
  background-color: var(--error-color);
}
.daily-summary-total {
  text-align: center;
  padding: 1rem;
  background-color: var(--background-color);
  border-radius: 10px;
  margin-bottom: 1.5rem;
}
.total-calories-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1.1;
}
.total-calories-label {
  font-size: 0.9rem;
  color: var(--text-secondary-color);
  margin-bottom: 0.5rem;
}
.total-calories-remaining {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color);
}
.total-calories-remaining.over-goal {
  color: var(--error-color);
}
/* Recipe Helpers */
.recipe-list-image {
  width: 50px;
  height: 50px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
.recipe-list-name {
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  flex-grow: 1;
  margin: 0 1rem;
}
.recipe-detail-image {
  width: 100%;
  height: 250px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 12px;
  margin-bottom: 1rem;
  border: 1px solid var(--border-color);
}
.recipe-detail-content .subheading {
  margin-top: 1.5rem;
}
.recipe-source-link {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--primary-color);
  text-decoration: none;
}
.recipe-source-link:hover {
  text-decoration: underline;
}
.recipe-nutrition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.75rem;
  background-color: var(--background-color);
  padding: 1rem;
  border-radius: 10px;
}
.nutrition-item {
  display: flex;
  flex-direction: column;
}
.nutrition-item span {
  font-size: 0.8rem;
  color: var(--text-secondary-color);
  text-transform: capitalize;
}
.nutrition-item strong {
  font-size: 1.1rem;
  color: var(--text-color);
}
.ai-chef-chat .form-group {
  margin-bottom: 0.75rem;
}
.chat-message-item .ai-response {
  white-space: pre-wrap;
}
.ai-suggestion-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background-color: var(--background-color);
  padding: 1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
}
.ai-suggestion-list .subheading-small {
  margin-bottom: 0.25rem;
}
.suggestion-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 8px;
  background-color: var(--surface-color);
  cursor: pointer;
}
.suggestion-checkbox:hover {
  background-color: var(--border-color);
}
.suggestion-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}
.suggestion-text {
  display: flex;
  flex-direction: column;
}
.suggestion-text strong {
  color: var(--text-color);
  line-height: 1.4;
}
.suggestion-text small {
  color: var(--text-secondary-color);
  line-height: 1.4;
  margin-top: 0.25rem;
  font-style: italic;
}
.chat-message-item strong {
  display: block;
  font-size: 0.9rem;
  color: var(--primary-color);
  margin-bottom: 0.25rem;
}
.chat-message-item.ai-response strong {
  color: var(--secondary-color);
}
.chat-message-item.ai-response div>p:first-child {
  margin-top: 0;
}
.chat-message-item.ai-response div>p:last-child {
  margin-bottom: 0;
}
.suggestion-nutrition-preview {
  margin-top: 1rem;
  padding: 0.75rem;
  background-color: var(--surface-color);
  border-radius: 8px;
  border: 1px solid var(--primary-color);
}
.suggestion-nutrition-preview .subheading-small {
  color: var(--primary-color);
  margin-bottom: 0.75rem;
}
.grocery-list-controls {
  display: flex;
  flex: 1 1 150px;
  gap: 0.5rem;
  margin-bottom: 0 !important;
}
.grocery-list-controls select {
  width: auto;
  flex-grow: 1;
  height: 50px;
}
.grocery-list-controls .btn-secondary {
  width: auto;
  flex-grow: 2;
  margin-top: 0;
  height: 50px;
}
.grocery-list-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.grocery-list-category .subheading-small {
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.5rem;
  color: var(--primary-color);
}
ul.grocery-list {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}
li.grocery-item {
  color: var(--text-secondary-color);
  margin-bottom: 0.375rem;
  line-height: 1.4;
}
@media (max-width: 768px) {
  li.grocery-item {
    margin-bottom: 0.1875rem;
  }
}
li.grocery-item label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}
li.grocery-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  accent-color: var(--primary-color);
}
li.grocery-item .item-text {
  transition: color 0.2s ease, -webkit-text-decoration 0.2s ease;
  transition: color 0.2s ease, text-decoration 0.2s ease;
  transition: color 0.2s ease, text-decoration 0.2s ease, -webkit-text-decoration 0.2s ease;
}
li.grocery-item input[type="checkbox"]:checked+.item-text {
  color: var(--text-secondary-color);
  opacity: 0.6;
  text-decoration: line-through;
}
.meal-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.health-score-chip {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 12px;
  border: 1px solid;
}
.health-score-chip.good {
  color: var(--success-color);
  border-color: var(--success-color);
}
.health-score-chip.fair {
  color: var(--carbs-color);
  border-color: var(--carbs-color);
}
.health-score-chip.poor {
  color: var(--error-color);
  border-color: var(--error-color);
}
.health-rationale {
  font-size: 0.9rem;
  color: var(--text-secondary-color);
  margin: 0 0 1rem 0;
}
.grocery-list-controls .btn {
  width: auto;
  flex-grow: 2;
  margin-top: 0;
  height: 50px;
}
.plan-controls-group {
  display: flex;
  flex: 2 1 300px;
  gap: 0.5rem;
  margin-bottom: 0 !important;
}
.plan-controls-group select {
  width: auto;
  flex: 1;
  height: 50px;
}
.plan-controls-group .btn {
  width: auto;
  flex: 1;
  margin-top: 0;
  height: 50px;
}
.plan-controls-group .btn-secondary {
  width: auto;
  flex: 1;
  margin-top: 0;
  height: 50px;
}
.recipe-list-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.health-score-chip.small {
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  font-weight: 600;
}
.recipe-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 0.5rem 0;
}
.recipe-meta-row .health-score-chip {
  flex-shrink: 0;
}
/* --- AI Meal Planner --- */
.meal-macros {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border-color);
}
.meal-macros span {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary-color);
}
.meal-macros span:first-child {
  color: var(--text-color);
  font-weight: 600;
}
.nutrition-targets.daily-totals {
  margin-bottom: 1rem;
  gap: 0.75rem;
  grid-template-columns: 1fr 1fr 1fr;
}
.nutrition-targets.daily-totals .target-item {
  padding: 0.75rem;
}
.nutrition-targets.daily-totals .target-value {
  font-size: 1.25rem;
}
.nutrition-targets.daily-totals .target-label {
  font-size: 0.75rem;
}
.btn-group .btn-secondary {
  flex-basis: 150px;
}
.grid-item.cookbook-container {
  padding: 1.5rem;
  background-color: var(--surface-color);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  overflow: visible;
}
.cookbook-header h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cookbook-header .btn-group {
  margin: 0;
  flex-shrink: 0;
  flex-wrap: nowrap;
  gap: 0.75rem;
}
.cookbook-header .btn-group .btn,
.cookbook-header .btn-group .btn-secondary {
  width: auto;
  margin: 0;
  flex: 0 1 auto;
}
.cookbook-content-wrapper .recipe-list {
  flex-grow: 1;
  overflow: visible;
  /* Allow expansion */
  padding-right: 0;
  /* Removed scroll padding */
  margin-bottom: 1rem;
}
/* Add this new rule for scrolling in add/import views */
.form-wrapper {
  overflow-y: auto;
  height: 100%;
  padding-right: 1rem;
}
/* Add this new rule for scrolling in detail view */
.recipe-detail-content {
  overflow: visible;
  /* Allow expansion */
  height: auto;
  /* Allow expansion */
  padding-right: 0;
}
.recipe-list-center {
  flex-grow: 1;
  margin: 0 1rem;
  min-width: 0;
  /* for ellipsis */
}
.recipe-list-macros {
  display: flex;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-secondary-color);
  margin-top: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recipe-list-macros span {
  flex-shrink: 0;
  /* Prevent macros from shrinking */
}
.recipe-list-macros span:first-child {
  color: var(--text-color);
  font-weight: 500;
}
.cookbook-controls {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-shrink: 0;
}
.cookbook-controls .search-input {
  width: 100%;
  font-size: 1rem;
  padding: 10px 1rem;
  min-height: 44px;
  height: 44px;
  line-height: 1.5;
  border-radius: 10px;
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-color);
  caret-color: var(--caret-color, #ffffff);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cookbook-controls .search-input:focus {
  outline: none;
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px var(--input-focus-glow);
}
.cookbook-controls select {
  width: 100%;
  font-size: 1rem;
  padding: 0 1rem;
  height: 50px;
  border-radius: 10px;
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}
.cookbook-controls select:focus {
  outline: none;
  border-color: var(--primary-color);
}
@media (max-width: 1199px) {
  .cookbook-controls {
    flex-direction: column;
    gap: 0.75rem;
  }
}
/* --- New Cookbook Category View --- */
.cookbook-category-view {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 0.5rem;
}
.category-group .subheading {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text-secondary-color);
  font-weight: 600;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}
.category-group:first-child .subheading {
  margin-top: 0;
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.category-card {
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 80px;
  text-align: left;
}
.category-card:hover {
  border-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px var(--primary-color-translucent);
}
.category-card:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  border-color: var(--border-color);
}
.category-card:disabled:hover {
  border-color: var(--border-color);
}
.category-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color);
}
.category-count {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary-color);
  margin-top: 0.25rem;
}
.cookbook-header.filtered-list-header {
  gap: 1rem;
  flex-wrap: nowrap;
}
.cookbook-header.filtered-list-header h2 {
  margin: 0;
  font-size: 1.125rem;
  color: var(--text-secondary-color);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cookbook-header.filtered-list-header .btn {
  flex-shrink: 0;
}
/* --- Advanced Filter Modal --- */
.advanced-filter-modal .modal-content {
  max-width: 500px;
}
.advanced-filter-modal .form-wrapper {
  padding-right: 0;
  overflow-y: visible;
}
.advanced-filter-modal .modal-footer {
  margin-top: 1.5rem;
}
.advanced-filter-modal .form-group {
  margin-bottom: 1rem;
}
.advanced-filter-modal .form-group-split .form-group {
  margin-bottom: 0;
}
.advanced-filter-modal .modal-footer .btn-secondary {
  border-color: var(--error-color);
  color: var(--error-color);
}
.advanced-filter-modal .modal-footer .btn-secondary:hover {
  background-color: rgba(207, 102, 121, 0.1);
  color: var(--error-color);
}
.filter-field label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary-color);
}
.filter-field input {
  width: 100%;
}
.filter-field small {
  font-size: 0.8rem;
  color: var(--text-secondary-color);
  margin-top: 0.5rem;
}
/* --- Applied Filter Tags --- */
.applied-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}
.filter-tag {
  background-color: var(--primary-color-translucent);
  color: var(--primary-color);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--primary-color);
}
/* --- Favorite Button --- */
.btn-favorite {
  background: none;
  border: none;
  color: var(--text-secondary-color);
  cursor: pointer;
  font-size: 1.25rem;
  padding: 0.25rem;
  line-height: 1;
  transition: color 0.2s ease, transform 0.2s ease;
}
.btn-favorite:hover {
  color: var(--gold-color);
}
.btn-favorite.favorite {
  color: var(--gold-color);
  transform: scale(1.1);
}
.create-collection-modal .modal-content {
  max-width: 400px;
}
.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.category-header .subheading {
  margin-bottom: 1rem;
}
.category-header .btn-icon {
  margin-bottom: 1rem;
  color: var(--primary-color);
}
.category-header .btn-icon:hover {
  background-color: var(--primary-color-translucent);
}
.category-grid .placeholder-text {
  margin: 0;
  grid-column: 1 / -1;
  text-align: left;
}
/* --- Add to Collection Button --- */
.recipe-list-right .btn-add-to-collection {
  color: var(--text-secondary-color);
  padding: 0.25rem;
}
.recipe-list-right .btn-add-to-collection:hover {
  color: var(--primary-color);
  background-color: var(--primary-color-translucent);
}
/* --- Add to Collection Modal --- */
.add-to-collection-modal .modal-content {
  max-width: 400px;
}
.collection-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.collection-checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 8px;
  background-color: var(--background-color);
  cursor: pointer;
}
.collection-checkbox-item:hover {
  background-color: var(--border-color);
}
.collection-checkbox-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--primary-color);
}
.collection-checkbox-item .collection-name {
  flex-grow: 1;
  font-weight: 500;
  color: var(--text-color);
}
.collection-checkbox-item .collection-count {
  font-size: 0.85rem;
  color: var(--text-secondary-color);
}
.meal-plan-header .btn-substitute {
  width: auto;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  flex-shrink: 0;
  border-color: var(--secondary-color);
  color: var(--secondary-color);
}
.meal-plan-header .btn-substitute:hover {
  background-color: var(--secondary-color-translucent);
}
/* --- Cookbook Picker Modal --- */
.cookbook-picker-modal .modal-content {
  max-width: 800px;
  width: 90vw;
  height: 80vh;
  display: flex;
  flex-direction: column;
}
/* Share wrapper styles from main Cookbook component */
.cookbook-picker-modal .cookbook-content-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.cookbook-picker-modal .recipe-list {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 0.5rem;
}
.cookbook-picker-modal .cookbook-category-view {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 0.5rem;
}
.cookbook-picker-modal .cookbook-header {
  margin-bottom: 1rem;
  flex-shrink: 0;
}
.cookbook-picker-modal .cookbook-header h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}
.cookbook-picker-modal .cookbook-controls {
  margin-bottom: 1rem;
}
/* --- AI Meal Planner Reroll Button --- */
.meal-header-right .btn-reroll {
  padding: 0.5rem;
  font-size: 0.9rem;
  flex-shrink: 0;
  width: auto;
  border-color: var(--carbs-color);
  color: var(--carbs-color);
}
.meal-header-right .btn-reroll:hover {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--carbs-color);
}
.meal-loader-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: color-mix(in srgb, var(--surface-color, rgba(26, 24, 35, 1)) 85%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  gap: 1rem;
}
.meal-loader-overlay .loader-spinner.small {
  width: 30px;
  height: 30px;
  border-width: 3px;
}
.meal-loader-overlay span {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary-color);
}
/* --- Add to Collection Modal "Create New" Form --- */
.create-collection-in-modal {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}
.create-collection-in-modal .subheading-small {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: var(--text-color);
  text-transform: none;
  font-weight: 600;
}
.create-collection-in-modal .add-goal-form input {
  height: 44px;
  /* Make input smaller */
  padding: 0 0.75rem;
  font-size: 0.9rem;
}
.create-collection-in-modal .add-goal-form .btn-add {
  height: 44px;
  width: 44px;
  /* Make button smaller */
  padding: 0.75rem;
}
.recipe-collections-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}
.recipe-collections-list strong {
  font-size: 0.9rem;
  color: var(--text-secondary-color);
  margin-right: 0.25rem;
}
.collection-tag {
  background-color: var(--background-color);
  color: var(--text-secondary-color);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}
.no-collections-tag {
  font-size: 0.9rem;
  color: var(--text-secondary-color);
  font-style: italic;
}
.btn-manage-collections {
  margin-left: 0.5rem;
  color: var(--text-secondary-color);
}
.btn-manage-collections:hover {
  color: var(--primary-color);
  background-color: var(--primary-color-translucent);
}
/* --- Grocery List Header --- */
.grocery-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.grocery-list-actions {
  display: flex;
  gap: 0.5rem;
}
.grocery-list-actions .btn-icon {
  color: var(--text-secondary-color);
}
.grocery-list-actions .btn-icon:hover {
  color: var(--primary-color);
  background-color: var(--primary-color-translucent);
}
/* Style for the reorganize button */
.grocery-list-actions .btn-icon:nth-child(1) {
  color: var(--secondary-color);
}
.grocery-list-actions .btn-icon:nth-child(1):hover {
  color: var(--secondary-color);
  background-color: var(--secondary-color-translucent);
}
/* Style for Uncategorized text */
.grocery-list-category .subheading-small.uncategorized {
  color: var(--carbs-color);
  /* Yellowish color */
  font-style: italic;
}
.grocery-list-actions .btn-icon.shared {
  color: var(--success-color);
}
.grocery-list-actions .btn-icon.shared:hover {
  background-color: rgba(40, 167, 69, 0.1);
}
.share-list-modal .modal-content {
  max-width: 450px;
}
.share-list-modal .collection-list {
  max-height: 40vh;
  overflow-y: auto;
}
.share-list-modal .collection-checkbox-item {
  border: 2px solid var(--border-color);
}
.share-list-modal .collection-checkbox-item:hover {
  border-color: var(--primary-color);
}
.share-list-modal .collection-checkbox-item[style*="--primary-color-translucent"] {
  border-color: var(--primary-color);
  box-shadow: 0 0 10px var(--primary-color-translucent);
}
/* Style for the reorganize button */
.grocery-list-actions .btn-reorganize {
  color: var(--carbs-color);
}
.grocery-list-actions .btn-reorganize:hover {
  color: var(--carbs-color);
  background-color: rgba(245, 158, 11, 0.1);
}
.grocery-list-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Ensures the card itself fills the grid space */
}
.grocery-list-card .card-content {
  flex-grow: 1;
  /* Allows the content to expand */
  overflow-y: auto;
  /* Makes the list scrollable */
  min-height: 200px;
  /* Ensures it has a minimum height */
}
.grocery-list-card .add-goal-form {
  margin-top: auto;
  /* Pushes this form to the bottom */
  flex-shrink: 0;
  /* Prevents the form from shrinking */
}
/* --- NEW CAMERA STYLES FOR NUTRITION LOGGER --- */
.camera-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.camera-video-feed {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  /* This makes it fill the screen */
  position: absolute;
  top: 0;
  left: 0;
}
.camera-ui-top {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2001;
}
.camera-close-btn {
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  font-size: 2rem;
  font-weight: 300;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.camera-ui-bottom {
  position: absolute;
  bottom: 2rem;
  left: 0;
  right: 0;
  z-index: 2001;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 1rem;
}
.camera-capture-btn {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: white;
  border: 4px solid rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: transform 0.1s ease;
}
.camera-capture-btn:active {
  transform: scale(0.9);
}
.camera-switch-btn,
.camera-gallery-btn {
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.camera-switch-btn svg,
.camera-gallery-btn svg {
  width: 24px;
  height: 24px;
}
/* ==============================================
   QUICK LOG SECTION
   ============================================== */
.quick-log-section {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1.25rem;
}
.quick-log-list {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
@media (hover: none) and (pointer: coarse) {
  .quick-log-list::-webkit-scrollbar {
    display: none;
  }
}
.quick-log-chip {
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.quick-log-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.quick-log-chip:active {
  transform: scale(0.96);
}
/* ==============================================
   MEAL HISTORY / FOOD DIARY
   ============================================== */
.meal-history-card {
  overflow: hidden;
}
.meal-history-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.meal-history-card .date-navigator {
  display: flex;
  align-items: center;
}
.meal-history-entry {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.meal-history-entry:hover {
  border-color: var(--primary-color) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.meal-history-list {
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: thin;
}
/* ==============================================
   RESTAURANT MENU SCANNER
   ============================================== */
.restaurant-scanner-view {
  padding: 0 0.25rem;
}
.restaurant-scanner-view .menu-results {
  max-height: 550px;
  overflow-y: auto;
  scrollbar-width: thin;
}
/* ==============================================
   GRID ITEM SIZING
   ============================================== */
.grid-item.meal-history {
  min-width: 0;
}
.grid-item.nutrition-intelligence {
  min-width: 0;
}
/* ==============================================
   I ATE THIS BUTTON - MEAL PLANNER
   ============================================== */
.meal-plan-item .btn-group .btn.btn-sm {
  transition: all 0.2s ease;
}
/* ==============================================
   MOBILE: Nutrition Tab Ordering
   Ensures the most-used cards appear first on
   mobile (where layout is a single flex column)
   ============================================== */
@media (max-width: 768px) {
  /* Removed hardcoded order to allow React inline gridRow to control layout */

  /* Food Diary: reduce max-height on mobile */
  .meal-history-list {
    max-height: 300px;
  }

  /* Quick log chips: slightly smaller on mobile */
  .quick-log-chip {
    font-size: 0.75rem !important;
    padding: 0.35rem 0.6rem !important;
  }

  /* Restaurant scanner: full bleed */
  .restaurant-scanner-view {
    padding: 0;
  }
}
/* styles/views/_performance-view.css */
/* --- Stats page header ------------------------------------------------- */
.stats-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 0.25rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}
.stats-header__verdict {
    flex: 1 1 16rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.9rem;
    border-left: 3px solid var(--border-color);
    background: color-mix(in srgb, var(--surface-color) 70%, transparent);
    border-radius: var(--radius-md);
}
.stats-header__verdict-label {
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.2;
}
.stats-header__verdict-detail {
    font-size: 0.78rem;
    color: var(--text-secondary-color);
    line-height: 1.35;
}
.stats-header__stats {
    display: flex;
    gap: 1.75rem;
    flex: 0 0 auto;
}
.stats-header__stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.stats-header__value {
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.1;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}
.stats-header__label {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary-color);
    white-space: nowrap;
}
@media (max-width: 720px) {
    .stats-header {
        gap: 0.85rem;
    }
    .stats-header__stats {
        width: 100%;
        justify-content: space-between;
        gap: 0.65rem;
        min-width: 0;
    }
    .stats-header__stat {
        align-items: flex-start;
        min-width: 0;
        flex: 1 1 0;
    }
    /* Let the caption wrap rather than push the page sideways. */
    .stats-header__label {
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .stats-header__verdict {
        flex-basis: 100%;
    }
}
.performance-hub-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1.25rem; /* Standard dashboard gap */
}
.performance-hub-grid .grid-item-main {
    grid-column: 1 / -1;
}
.performance-hub-grid .grid-item-side {
    grid-column: 1 / -1;
}
.analytics-section {
    background-color: var(--surface-color);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: 1.25rem; /* Standard dashboard padding */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}
.analytics-section .subheading {
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.line-chart-container {
    height: 250px;
    position: relative;
    padding-bottom: 20px;
}
.line-chart {
    width: 100%;
    height: 100%;
}
.line-chart polyline {
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.line-chart-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-secondary-color);
    padding-top: 0.25rem;
}
.line-chart-yaxis {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-secondary-color);
}
.heatmap-container {
    display: flex;
    gap: 0.5rem;
}
.heatmap-days {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: var(--text-2xs);
    color: var(--text-secondary-color);
}
.heatmap-grid {
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    width: 100%;
    overflow-x: auto;
}
.heatmap-cell {
    aspect-ratio: 1 / 1;
    background-color: var(--background-color);
    border-radius: 2px;
}
.heatmap-cell.active {
    background-color: var(--success-color);
}
.predictor-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.predictor-form p {
    font-size: 0.9rem;
    color: var(--text-secondary-color);
    margin: 0;
}
.predictor-form .form-group {
    margin: 0;
}
.time-input-group {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
}
.time-input-group input {
    text-align: center;
}
.predictions-list {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.predictions-list .pr-item {
    background-color: var(--background-color);
    padding: 0.75rem 1rem;
}
/* --- DESKTOP OVERRIDE (Equal 6 and 6 layout matching all dashboard views) --- */
@media (min-width: 1024px) {
    .performance-hub-grid {
        grid-template-columns: 1fr 1fr;
    }
    .performance-hub-grid .grid-item-main {
        grid-column: 1 / 2;
    }
    .performance-hub-grid .grid-item-side {
        grid-column: 2 / 3;
    }
}
/* --- MOBILE STYLES (SHARED) --- */
@media (max-width: 1199px) {
    .performance-hub-grid {
        gap: 1.25rem; /* Standard dashboard mobile gap */
    }
    .analytics-section {
        padding: 1.25rem;
        border-radius: var(--radius-lg);
    }
}
.performance-hub-grid .grid-item-main.span-2 {
    grid-column: 1 / -1;
}
/* Performance Forecast Stats Grid */
.forecast-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}
@media (max-width: 600px) {
    .forecast-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.forecast-tile {
    padding: 0.9rem 0.75rem;
    border-radius: var(--radius-md);
    background: rgba(var(--primary-color-rgb), 0.08);
    border: 1px solid rgba(var(--primary-color-rgb), 0.18);
    text-align: center;
    min-width: 0;
}
.forecast-tile__label {
    font-size: var(--text-2xs);
    color: var(--text-secondary-color);
    margin-bottom: var(--space-1);
}
.forecast-tile__value {
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--text-color);
    line-height: 1.1;
}
.forecast-tile__caption {
    font-size: var(--text-2xs);
    color: var(--text-secondary-color);
    margin-top: 2px;
}
.forecast-day-chip {
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: rgba(var(--primary-color-rgb), 0.12);
    color: var(--primary-color);
    font-size: var(--text-2xs);
    font-weight: 700;
}
/* "What is load?" under the Stats header: plain words for a unitless number (PH-50). */
.stats-header__explain {
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-secondary-color);
    text-align: center;
}
.stats-header__explain summary {
    cursor: pointer;
    color: var(--primary-color);
    font-weight: 600;
    list-style: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.stats-header__explain summary::-webkit-details-marker { display: none; }
.stats-header__explain p {
    margin: 0 auto;
    max-width: 36rem;
    line-height: 1.45;
}
/* Honesty note under an inferred (not measured) chart. */
.stats-estimate-note {
    margin: 0.75rem 0 0;
    padding-top: 0.65rem;
    border-top: 1px dashed var(--border-color);
    font-size: var(--text-2xs);
    line-height: 1.45;
    color: var(--text-secondary-color);
    text-align: center;
}
/* --- Muscle Training Map ------------------------------------------------
   Untrained tissue and the figure scaffold are theme variables. They used to
   be hard-coded rgba(255,255,255,0.04) inline, which is invisible on the light
   theme — the body rendered as a floating torso and two legs. */
.muscle-map {
    --mm-inactive: rgba(15, 23, 42, 0.17);
    --mm-inactive-stroke: rgba(15, 23, 42, 0.26);
    --mm-scaffold: rgba(15, 23, 42, 0.05);
    --mm-scaffold-stroke: rgba(15, 23, 42, 0.13);
}
[data-theme='dark'] .muscle-map {
    --mm-inactive: rgba(255, 255, 255, 0.20);
    --mm-inactive-stroke: rgba(255, 255, 255, 0.34);
    --mm-scaffold: rgba(255, 255, 255, 0.05);
    --mm-scaffold-stroke: rgba(255, 255, 255, 0.14);
}
.mm-controls__hint {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--text-secondary-color);
}
.mm-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.mm-toggle {
    display: flex;
    gap: 3px;
    padding: 3px;
    border-radius: 9999px;
    background: var(--mm-scaffold);
    border: 1px solid var(--border-color);
}
.mm-toggle__btn {
    padding: 6px 16px;
    font-size: 0.75rem;
    font-weight: 700;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary-color);
    transition: all 0.2s ease;
}
.mm-toggle__btn:hover {
    color: var(--text-color);
}
.mm-toggle__btn.is-active {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}
/* Figure beside its own data */
.mm-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.75rem;
}
.mm-figure-wrap {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    width: 380px;
    max-width: 50%;
    background: var(--surface-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}
.mm-figure-cell {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.mm-figure-label {
    font-size: var(--text-2xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary-color);
}
.mm-figure {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}
.mm-scaffold {
    fill: #f1f5f9;
    stroke: #cbd5e1;
    stroke-width: 1.2;
    stroke-linejoin: round;
}
[data-theme='dark'] .mm-figure-wrap {
    background: #141923;
}
[data-theme='dark'] .mm-scaffold {
    fill: #1e2430;
    stroke: #2e3848;
}
.mm-muscle {
    stroke: #cbd5e1;
    stroke-width: 1;
    stroke-linejoin: round;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.mm-muscle:hover {
    filter: drop-shadow(0 2px 8px currentColor);
    stroke: #0f172a;
    stroke-width: 1.4;
}
.mm-muscle.is-dimmed {
    opacity: 0.35;
}
.mm-muscle.is-active {
    stroke: #0f172a;
    stroke-width: 1.8;
    filter: drop-shadow(0 2px 10px currentColor);
}
[data-theme='dark'] .mm-muscle {
    stroke: #263142;
}
[data-theme='dark'] .mm-muscle:hover,
[data-theme='dark'] .mm-muscle.is-active {
    stroke: #ffffff;
}
.mm-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    font-size: var(--text-2xs);
    color: var(--text-secondary-color);
}
.mm-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.mm-legend__swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    border: 1px solid transparent;
}
.mm-side {
    flex: 1 1 0;
    min-width: 0;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-shadow: var(--shadow-sm);
}
.mm-side__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-color);
}
.mm-side__title {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-color);
}
.mm-side__action {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--primary-color);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.mm-rank {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mm-rank__row {
    display: grid;
    grid-template-columns: 1.25rem minmax(4.5rem, 6rem) 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.mm-rank__row:hover,
.mm-rank__row.is-active {
    background: var(--mm-scaffold);
}
.mm-rank__num {
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--text-secondary-color);
    font-variant-numeric: tabular-nums;
}
.mm-rank__name {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mm-rank__track {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--mm-scaffold);
    overflow: hidden;
}
.mm-rank__bar {
    display: block;
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}
.mm-rank__value {
    font-size: var(--text-2xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary-color);
    white-space: nowrap;
}
/* Push vs Pull Balance Gauge */
.mm-balance {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0.9rem;
    background: var(--mm-scaffold);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
.mm-balance__ring-wrap {
    width: 58px;
    height: 58px;
    position: relative;
    flex-shrink: 0;
}
.mm-balance__info {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.mm-balance__title {
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary-color);
}
.mm-balance__stats {
    display: flex;
    gap: 0.75rem;
    font-size: var(--text-2xs);
}
.mm-balance__status {
    font-size: var(--text-2xs);
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    display: inline-block;
    width: -moz-fit-content;
    width: fit-content;
}
.mm-detail {
    margin-top: 0.25rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--mm-scaffold);
}
.mm-detail__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.mm-detail__name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-color);
}
.mm-detail__badge {
    font-size: var(--text-2xs);
    font-weight: 700;
    padding: 2px 8px;
    border: 1px solid;
    border-radius: 999px;
}
.mm-detail__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    font-size: var(--text-2xs);
    color: var(--text-secondary-color);
}
.mm-detail__stats strong {
    color: var(--text-color);
}
.mm-detail__empty {
    margin: 0;
    font-size: var(--text-2xs);
    color: var(--text-secondary-color);
}
.mm-imbalances {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.mm-imbalance {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    font-size: var(--text-2xs);
    color: var(--warning-color, #b45309);
    background: color-mix(in srgb, var(--warning-color, #f59e0b) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning-color, #f59e0b) 30%, transparent);
}
.mm-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: 1rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border-color);
    font-size: var(--text-2xs);
    color: var(--text-secondary-color);
}
.mm-footer strong {
    color: var(--text-color);
}
.mm-footer__summary {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.mm-footer__hot {
    color: var(--primary-color);
    font-weight: 700;
}
.mm-empty {
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--text-secondary-color);
}
.mm-empty svg { opacity: 0.4; }
.mm-empty p { margin: 0; font-size: 0.875rem; }
@media (max-width: 640px) {
    .mm-body {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    .mm-figure-wrap {
        width: 100%;
        max-width: 320px;
    }
    .mm-side {
        width: 100%;
    }
    .mm-rank__row {
        grid-template-columns: minmax(4.5rem, 6.5rem) 1fr auto;
    }
}
/* --- Personal Records board (PH-32/PH-56) --- */
.pr-board__tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-color-hover);
}
.pr-board__tabs button {
    flex: 1;
    min-height: 40px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary-color);
    font-size: var(--text-xs);
    font-weight: 700;
    cursor: pointer;
}
.pr-board__tabs button.is-active { background: var(--primary-color); color: #fff; }
.pr-board__count { opacity: 0.75; font-weight: 600; }
.pr-board__list { list-style: none; margin: 0; padding: 0; }
.pr-board__list > li { border-bottom: 1px solid var(--border-color); }
.pr-board__list > li.pr-board__divider { height: var(--space-2); border-bottom: 1px dashed var(--border-color); }
.pr-board__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 52px;
    padding: var(--space-2) 0;
    border: none;
    background: transparent;
    color: var(--text-color);
    text-align: left;
    cursor: pointer;
}
.pr-board__row:disabled { cursor: default; opacity: 1; color: var(--text-color); }
.pr-board__title { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 800; font-size: var(--text-sm); }
.pr-board__title small { font-weight: 500; font-size: var(--text-2xs); color: var(--text-secondary-color); margin-top: 2px; }
.pr-board__value { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-board__chev { color: var(--text-secondary-color); display: inline-flex; }
.pr-board__detail { padding: 0 0 var(--space-3); }
.pr-board__table { width: 100%; border-collapse: collapse; margin-top: var(--space-2); font-size: var(--text-xs); }
.pr-board__table caption { text-align: left; font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary-color); padding-bottom: 4px; }
.pr-board__table th, .pr-board__table td { padding: 4px 0; text-align: left; font-weight: 500; color: var(--text-color); font-variant-numeric: tabular-nums; }
.pr-board__table td:last-child { text-align: right; color: var(--text-secondary-color); }
.pr-board__note { margin: var(--space-1) 0 var(--space-2); font-size: var(--text-2xs); color: var(--text-secondary-color); }
.pr-board__more { width: 100%; margin-top: var(--space-3); min-height: 44px; }
/* --- Strength Standards (PH-32) --- */
.strength-row { padding: var(--space-2) 0; border-bottom: 1px solid var(--border-color); }
.strength-row:last-of-type { border-bottom: none; }
.strength-row__head { display: flex; align-items: baseline; gap: var(--space-2); }
.strength-row__name { flex: 1; font-weight: 800; font-size: var(--text-sm); color: var(--text-color); }
.strength-row__level { font-size: var(--text-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.strength-row__value { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-color); }
.strength-row__meta { font-size: var(--text-2xs); color: var(--text-secondary-color); margin-top: 2px; }
.strength-row__bar { height: 6px; margin-top: 6px; border-radius: var(--radius-full); background: var(--surface-color-hover); border: 1px solid var(--border-color); overflow: hidden; }
.strength-row__bar > div { height: 100%; background: var(--primary-color); border-radius: inherit; }
.strength-bw-prompt { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); margin-bottom: var(--space-2); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color-hover); }
.strength-bw-prompt label { font-size: var(--text-xs); font-weight: 700; color: var(--text-color); }
.strength-bw-prompt__row { display: flex; align-items: center; gap: var(--space-2); }
.strength-bw-prompt__row input { flex: 1; min-width: 0; min-height: 44px; font-size: 16px; padding: 0 var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--input-bg, var(--surface-color)); color: var(--text-color); }
.strength-bw-prompt__row span { font-size: var(--text-xs); color: var(--text-secondary-color); }
.strength-bw-prompt__row .btn { min-height: 44px; width: auto; }
.strength-bw-prompt small { font-size: var(--text-2xs); color: var(--text-secondary-color); }
/* --- Race Forecast (PH-32/PH-57) --- */
.forecast-goal { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); margin-bottom: var(--space-3); border-radius: var(--radius-md); border: 1px solid rgba(var(--primary-color-rgb), 0.3); background: rgba(var(--primary-color-rgb), 0.06); }
.forecast-goal__label { font-size: var(--text-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--primary-color); }
.forecast-goal__text { font-weight: 700; color: var(--text-color); font-size: var(--text-sm); }
.forecast-goal__verdict { font-size: var(--text-xs); color: var(--text-secondary-color); }
.forecast-list { list-style: none; margin: 0; padding: 0; }
.forecast-list li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "label time confidence" "reason reason pace";
    -moz-column-gap: var(--space-3);
         column-gap: var(--space-3);
    row-gap: 2px;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-color);
}
.forecast-list li.is-goal .forecast-list__label { color: var(--primary-color); }
.forecast-list__label { grid-area: label; font-weight: 800; font-size: var(--text-sm); color: var(--text-color); }
.forecast-list__time { grid-area: time; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-color); text-align: right; }
.forecast-list__confidence { grid-area: confidence; font-size: var(--text-2xs); font-weight: 700; text-align: right; min-width: 5.5rem; }
.forecast-list__pace { grid-area: pace; font-size: var(--text-2xs); color: var(--text-secondary-color); text-align: right; font-variant-numeric: tabular-nums; }
.forecast-list__reason { grid-area: reason; font-size: var(--text-2xs); color: var(--text-secondary-color); }
.forecast-vo2 { margin-top: var(--space-4); }
.forecast-vo2__head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.forecast-vo2__head span { font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary-color); }
.forecast-vo2__head strong { font-size: var(--text-xl); font-weight: 900; color: var(--text-color); }
.forecast-vo2__head small { font-size: var(--text-2xs); color: var(--text-secondary-color); }
.forecast-vo2__chart svg { width: 100%; height: 96px; display: block; margin-top: var(--space-2); }
.forecast-vo2__axis, .form-card__axis { display: flex; justify-content: space-between; font-size: var(--text-2xs); color: var(--text-secondary-color); margin-top: 4px; }
/* --- Fitness and Form (PH-55) --- */
.form-card__verdict { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); border-left: 3px solid; border-radius: var(--radius-sm); background: var(--surface-color-hover); }
.form-card__verdict span { font-weight: 800; font-size: var(--text-base, 1rem); }
.form-card__verdict small { font-size: var(--text-xs); color: var(--text-secondary-color); }
.form-card__stats { display: flex; align-items: flex-end; gap: var(--space-4); margin: var(--space-3) 0 var(--space-2); }
.form-card__stats > div:not(.form-card__date) { display: flex; flex-direction: column; }
.form-card__stats strong { font-size: var(--text-lg, 1.125rem); font-weight: 900; color: var(--text-color); font-variant-numeric: tabular-nums; }
.form-card__stats span { font-size: var(--text-2xs); color: var(--text-secondary-color); }
.form-card__date { margin-left: auto; font-size: var(--text-2xs); color: var(--text-secondary-color); }
.form-card__chart { touch-action: pan-y; }
.form-card__chart svg { width: 100%; height: 160px; display: block; }
.form-card__legend { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); font-size: var(--text-2xs); color: var(--text-secondary-color); }
.form-card__legend i { display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; border-radius: 2px; }
.form-card__legend i.is-dashed { background: transparent; border-top: 2px dashed; height: 0; }
/* styles/views/_program-marketplace.css */
/* .segmented-control lives in styles/components.css (trainer wave 6). */
.marketplace-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  padding: 0;
  background-color: transparent;
  border: none;
}
.marketplace-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 0.5rem;
  margin-top: 0;
}
.marketplace-header-title {
  background-color: var(--surface-color);
  border-radius: 16px;
  /* Standardized */
  border: 1px solid var(--border-color);
  padding: 1rem;
}
@media (min-width: 768px) {
  .marketplace-header-title {
    padding: 1.5rem;
  }
}
.marketplace-header-title p {
  margin: 0;
  color: var(--text-secondary-color);
}
.marketplace-controls {
  background-color: var(--surface-color);
  padding: 1rem;
  border-radius: 16px;
  /* Standardized */
  border: 1px solid var(--border-color);
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .marketplace-controls {
    padding: 1.5rem;
  }
}
.search-input-wrapper {
  margin-bottom: 1rem;
}
.search-input {
  width: 100%;
  font-size: 1rem;
  padding: 0.875rem 1rem;
  border-radius: 10px;
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  line-height: 1.5;
}
.search-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-color-translucent);
}
/* --- Enhanced Program Card Styling --- */
/* Core layout now handled via inline styles in ProgramMarketplace.tsx to ensure full-bleed and bypass cascade conflicts */
.premium-program-card {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.premium-program-card.clickable:hover {
  transform: translateY(-4px) translateZ(0);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}
/* Category Fallback Gradients */
.program-card-image.fallback-strength {
  background: linear-gradient(135deg, #FF6B35 0%, #8B2500 100%);
}
.program-card-image.fallback-running,
.program-card-image.fallback-cardio {
  background: linear-gradient(135deg, #4FC3F7 0%, #1565C0 100%);
}
.program-card-image.fallback-yoga,
.program-card-image.fallback-flexibility {
  background: linear-gradient(135deg, #CE93D8 0%, #7B1FA2 100%);
}
.program-card-image.fallback-nutrition {
  background: linear-gradient(135deg, #81C784 0%, #2E7D32 100%);
}
.program-card-image.fallback-hiit {
  background: linear-gradient(135deg, #FF5252 0%, #B71C1C 100%);
}
.program-card-image.fallback-default {
  background: linear-gradient(135deg, #90A4AE 0%, #37474F 100%);
}
.program-card-meta .badge.difficulty-beginner {
  background: rgba(76, 175, 80, 0.4);
  color: #fff;
  border-color: #4CAF50;
}
.program-card-meta .badge.difficulty-intermediate {
  background: rgba(255, 152, 0, 0.4);
  color: #fff;
  border-color: #FF9800;
}
.program-card-meta .badge.difficulty-advanced {
  background: rgba(244, 67, 54, 0.4);
  color: #fff;
  border-color: #F44336;
}
/* Footer Row (Removed explicit footer, kept for legacy cleanup) */
.program-card-footer {
  display: none;
}
.program-card-footer .price.free {
  color: var(--primary-color);
}
.program-card-footer .action-btn {
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  background: var(--primary-color);
  color: #000;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.program-card-footer .action-btn:hover {
  opacity: 0.9;
}
/* Skeleton Loading */
.program-card.skeleton .program-card-image {
  background: var(--border-color);
  animation: skeleton-pulse 1.5s infinite;
}
.program-card.skeleton .skeleton-text {
  background: var(--border-color);
  border-radius: 4px;
  animation: skeleton-pulse 1.5s infinite;
}
.program-card.skeleton .skeleton-title {
  height: 1.2rem;
  width: 80%;
}
.program-card.skeleton .skeleton-subtitle {
  height: 0.9rem;
  width: 60%;
}
@keyframes skeleton-pulse {

  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}
.tag.focus-tag {
  background-color: var(--secondary-color-translucent);
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}
.filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}
.filter-group {
  display: flex;
  flex-direction: column;
}
.filter-group label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary-color);
  margin-bottom: 0.5rem;
}
.filter-group select {
  font-size: 0.9rem;
  padding: 0.75rem;
  border-radius: 10px;
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}
.filter-group select:focus {
  outline: none;
  border-color: var(--primary-color);
}
/* ... Program Detail Styles ... */
.program-detail-modal .modal-content {
  max-width: 600px;
}
.program-detail-header {
  margin-bottom: 1rem;
}
.program-detail-header .program-trainer {
  font-size: 1rem;
  color: var(--text-secondary-color);
  display: block;
  margin-top: 0.75rem;
}
.program-description {
  line-height: 1.6;
  color: var(--text-secondary-color);
  margin-bottom: 1.5rem;
}
.workout-preview-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: var(--background-color);
  border-radius: 10px;
  padding: 1rem;
  max-height: 250px;
  overflow-y: auto;
}
.workout-preview-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-color);
}
.workout-preview-item:last-child {
  border-bottom: none;
}
.workout-preview-item .day-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary-color);
}
.workout-preview-item .day-title {
  font-weight: 600;
  color: var(--text-color);
}
.program-date {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary-color);
  font-style: italic;
  margin-top: 0.25rem;
}
.tag.subscribed {
  background-color: var(--primary-color-translucent);
  color: var(--primary-color);
  border-color: var(--primary-color);
}
.review-submission-form {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color);
}
.review-submission-form .subheading {
  margin-top: 0;
}
.review-submission-form .form-group textarea {
  height: 100px;
}
.program-reviews-modal .modal-content {
  max-width: 600px;
}
.reviews-summary {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--background-color);
  padding: 1.5rem;
  border-radius: 10px;
  margin-bottom: 1.5rem;
}
.average-rating-display {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.average-rating-display .rating-value {
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--text-color);
}
.average-rating-display .star-rating {
  font-size: 1.5rem;
}
.average-rating-display .star-rating span.filled {
  color: var(--carbs-color);
}
.average-rating-display .rating-count {
  font-size: 0.9rem;
  color: var(--text-secondary-color);
  margin-left: 0.25rem;
}
.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 50vh;
  overflow-y: auto;
  padding-right: 0.5rem;
}
.review-item {
  background-color: var(--background-color);
  padding: 1rem;
  border-radius: 8px;
}
.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.review-header strong {
  color: var(--text-color);
}
.review-header .star-rating {
  font-size: 0.9rem;
}
.review-header .star-rating span.filled {
  color: var(--carbs-color);
}
.review-comment {
  color: var(--text-secondary-color);
  line-height: 1.5;
  margin: 0.5rem 0;
}
.review-date {
  font-size: 0.8rem;
  color: var(--text-secondary-color);
  opacity: 0.7;
}
.ai-summary-box {
  background-color: var(--background-color);
  padding: 1rem;
  border-radius: 8px;
  border-left: 3px solid var(--secondary-color);
  margin-bottom: 1.5rem;
}
.ai-summary-box .subheading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  border: none;
}
.ai-summary-box p {
  color: var(--text-secondary-color);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 1199px) {
  .marketplace-header {
    grid-template-columns: 1fr;
    /* Stack items vertically on smaller screens */
  }
}
/* --- Program List Grid Layout (Matching Events Page) --- */
.marketplace-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Mobile: 1 card wide */
  gap: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
  width: 100%;
}
@media (min-width: 768px) {
  .marketplace-grid {
    grid-template-columns: repeat(2, 1fr);
    /* Tablet: 2 cards wide */
  }
}
@media (min-width: 1200px) {
  .marketplace-grid {
    grid-template-columns: repeat(4, 1fr);
    /* Desktop: 4 cards wide */
  }
}
/* styles/views/_settings-page.css */
.settings-page-layout {
    display: grid;
    grid-template-columns: 285px minmax(0, 1fr);
    gap: 1.5rem;
    /* Standardized gap */
    height: auto;
    overflow: hidden;
}
/* Left Navigation Sidebar */
.settings-sidebar-nav {
    background-color: var(--surface-color);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: auto;
}
.settings-sidebar-nav h2 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: var(--text-color);
}
.settings-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    /* Standardized inner radius */
    color: var(--text-secondary-color);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}
.settings-nav-item svg {
    width: 20px;
    height: 20px;
}
.settings-nav-item:hover {
    background-color: var(--background-color);
    color: var(--text-color);
}
.settings-nav-item.active {
    background-color: var(--primary-color-translucent);
    color: var(--primary-color);
    border-color: var(--primary-color-translucent);
    font-weight: 600;
}
/* Right Content Area */
.settings-content-area {
    overflow-y: visible;
    padding-right: 5px;
    /* Space for scrollbar */
}
.settings-card {
    background-color: var(--surface-color);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    max-width: 1100px;
    margin-left: 0;
    margin-right: auto;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .settings-card {
        padding: 2rem;
    }
}
@media (min-width: 1200px) {
    .settings-card {
        padding: 2.5rem;
    }
}
.settings-section-header {
    margin-bottom: 1.5rem;
}
.settings-section-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 0.35rem 0;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.settings-section-title svg {
    width: 24px;
    height: 24px;
    color: var(--primary-color);
}
.settings-section-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary-color);
    margin: 0;
    line-height: 1.4;
}
.settings-card h3 {
    margin-top: 0;
    margin-bottom: 1.25rem;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: left;
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.settings-card h3 svg {
    width: 20px;
    height: 20px;
    color: var(--primary-color);
}
.settings-card h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.05rem;
    font-weight: 600;
    text-align: left;
    color: var(--text-color);
}
/* Single-Line Action Rows */
.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
    gap: 1rem;
}
.settings-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.settings-row:first-child {
    padding-top: 0;
}
.settings-row-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}
.settings-row-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--surface-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary-color);
    border: 1px solid var(--border-color);
}
.settings-row-icon svg {
    width: 20px;
    height: 20px;
}
.settings-row-text {
    flex: 1;
    min-width: 0;
}
.settings-row-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 0.2rem 0;
}
.settings-row-desc {
    font-size: 0.8rem;
    color: var(--text-secondary-color);
    margin: 0;
    line-height: 1.35;
}
.settings-row-action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}
/* Profile Header Styling */
.profile-header-large {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.profile-pic-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
}
.profile-pic-wrapper img,
.profile-placeholder {
    width: 100%;
    height: auto;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
    border: 2px solid var(--primary-color);
}
.profile-placeholder {
    background-color: var(--background-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary-color);
}
.btn-edit-pic {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background-color: var(--primary-color);
    color: white;
    border: 3px solid var(--surface-color);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.version-text-mobile {
    display: none !important;
}
.profile-text-info h4 {
    font-size: 1.5rem;
    margin: 0 0 0.25rem 0;
    color: var(--text-color);
}
.profile-text-info .text-muted {
    color: var(--text-secondary-color);
    margin: 0;
}
.friend-code-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--background-color);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--text-secondary-color);
    margin-top: 0.5rem;
    border: 1px solid var(--border-color);
}
.settings-divider {
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: 2rem 0;
}
.toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.toggle-row:hover {
    background-color: var(--background-color);
}
.btn-logout-large {
    background-color: transparent;
    border: 1px solid var(--error-color);
    color: var(--error-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}
.btn-logout-large:hover {
    background-color: rgba(207, 102, 121, 0.1);
}
/* Mobile Adjustments */
@media (max-width: 768px) {
    .settings-page-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
        display: flex;
        flex-direction: column;
    }

    .settings-sidebar-nav {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 1rem;
        height: 75px;
        min-height: 75px;
        align-items: center;
        -ms-overflow-style: none;
        scrollbar-width: none;
        white-space: nowrap;
    }

    @media (hover: none) and (pointer: coarse) {
        .settings-sidebar-nav::-webkit-scrollbar {
            display: none;
        }
    }

    .settings-sidebar-nav h2 {
        display: none;
    }

    .settings-nav-list {
        flex-direction: row;
        width: 100%;
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        gap: 0.35rem;
        padding: 0.25rem 0;
    }

    @media (hover: none) and (pointer: coarse) {
        .settings-nav-list::-webkit-scrollbar {
            display: none;
        }
    }

    .settings-nav-item {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 0.825rem;
        padding: 0.45rem 0.8rem;
        gap: 0.45rem;
        border-radius: 8px;
        border-right: 1px solid var(--border-color);
    }

    .settings-nav-item:last-child {
        border-right: none;
    }

    .settings-nav-item svg {
        width: 15px;
        height: 15px;
    }

    .settings-card {
        padding: 1.25rem;
        margin-bottom: 1rem;
        border-radius: 12px;
    }

    .settings-section-title {
        font-size: 1.25rem;
    }

    .settings-card h3 {
        font-size: 1.05rem;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }

    .profile-header-large {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.5rem;
    }

    .profile-pic-wrapper {
        flex-shrink: 0;
        width: 120px;
        height: 120px;
        margin: 0 auto;
    }
    
    .version-text-nav {
        display: none !important;
    }
    
    .version-text-mobile {
        display: flex !important;
        justify-content: center;
        padding: 1.5rem 1rem;
    }

    .profile-text-info {
        width: 100%;
        min-width: 0;
    }

    .profile-text-info h4 {
        font-size: 1.5rem;
        word-break: break-word;
    }

    .profile-text-info .text-muted {
        font-size: 0.9rem;
        word-break: break-all;
    }
}
/* Camera Guide Overlay - Updated Size */
.camera-face-guide {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Increased size: 350px max, or 80% of viewport width for mobile */
    width: max(350px, 50vw);
    height: max(350px, 50vw);
    /* Keep aspect ratio 1:1 */
    border: 3px solid rgba(255, 255, 255, 0.8);
    /* Thicker border for visibility */
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.8);
    /* Darker dim for better contrast */
    pointer-events: none;
    z-index: 20;
}
/* Image Cropper Styles */
.image-cropper-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    height: auto;
    justify-content: center;
    padding: 0.5rem;
}
.cropper-view-area {
    position: relative;
    /* Slightly larger cropper area to match the new camera guide feel */
    width: 280px;
    height: 280px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--primary-color);
    background-color: #000;
    cursor: move;
    touch-action: none;
    flex-shrink: 0;
    z-index: 10;
}
.cropper-circle-mask {
    width: 100%;
    height: auto;
    position: relative;
}
.cropper-target-image {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: none;
    max-height: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    pointer-events: none;
    transform-origin: center;
    will-change: transform;
}
.cropper-controls {
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.slider-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0.5rem;
}
.zoom-slider {
    flex: 1;
    accent-color: var(--primary-color);
    cursor: pointer;
    height: 4px;
}
.zoom-label {
    color: var(--text-secondary-color);
    font-size: 1.5rem;
    /* Larger touch target */
    font-weight: bold;
    width: 30px;
    text-align: center;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cropper-instruction {
    font-size: 0.75rem;
    color: var(--text-secondary-color);
    text-align: center;
    margin: 0;
    opacity: 0.8;
}
/* Helper to ensure modal content doesn't scroll unnecessarily */
.modal-content:has(.image-cropper-wrapper) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* Pricing Comparison Styles */
.pricing-comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}
.pricing-tier-card {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pricing-tier-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.pricing-tier-card.premium {
    border: 2px solid var(--primary-color);
    background: linear-gradient(145deg, var(--surface-color) 0%, rgba(106, 17, 203, 0.05) 100%);
}
.premium-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.tier-header {
    text-align: center;
    margin-bottom: 2rem;
}
.tier-header h4 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--text-color);
}
.tier-price {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-top: 1rem;
}
.tier-price span {
    font-size: 1rem;
    color: var(--text-secondary-color);
    font-weight: 400;
}
.tier-features {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}
.tier-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: var(--text-color);
    font-size: 0.95rem;
}
.tier-features li svg {
    color: var(--success-color);
    flex-shrink: 0;
}
.tier-features li.disabled {
    color: var(--text-secondary-color);
    opacity: 0.5;
}
.tier-features li.disabled svg {
    color: var(--text-secondary-color);
}
.pricing-tier-card.current-plan {
    background-color: var(--surface-color);
    box-shadow: 0 0 20px var(--primary-color-translucent);
    border: 2px solid var(--primary-color);
}
.pricing-tier-card.current-plan .btn-secondary {
    background-color: var(--primary-color-translucent);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    cursor: default;
}
/* ==========================================
   Workout Availability Desktop Styles (Approach A)
   ========================================== */
/* Outer wrapper max width and centering on desktop */
@media (min-width: 1200px) {
    .availability-editor-card {
        /* Inherits standard settings-card desktop styles */
    }
    
    /* Approach A: Sectioned Dashboard Grid */
    .availability-dashboard-grid {
        display: grid;
        grid-template-columns: 380px 1fr;
        gap: 1.75rem;
        align-items: start;
        margin-top: 1.5rem;
    }

    .availability-sidebar-controls {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .availability-patterns-main {
        display: flex;
        flex-direction: column;
    }

    .availability-projections-full {
        grid-column: span 2;
        margin-top: 2rem;
        border-top: 1px solid var(--border-color);
        padding-top: 2rem;
    }
}
/* Fallback for smaller screens */
@media (max-width: 1199px) {
    .availability-dashboard-grid {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    .availability-sidebar-controls,
    .availability-patterns-main {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
}
/* Base button rules to override global width: 100% stretching */
.availability-editor-card .btn {
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
}
/* Quick Presets Compact Grid (2x2 on desktop sidebar) */
.presets-compact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.presets-compact-grid .btn {
    width: 100% !important;
    justify-content: center;
    padding: 0.55rem 0.5rem;
    font-size: 0.8rem;
    border-radius: 8px;
    margin-top: 0;
    line-height: 1.2;
    height: 100%;
    text-align: center;
    white-space: normal;
}
/* Sidebar Overrides Form Card styling */
.override-form-card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    background: var(--surface-bg-hover, rgba(255, 255, 255, 0.01));
}
.override-form-row {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.override-form-row .btn {
    width: 100% !important;
    margin-top: 0.5rem;
    padding: 0.7rem 1rem;
    border-radius: 8px;
}
/* Sub-card pattern styling */
.capacity-pattern-card {
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    padding: 1.15rem 1.25rem;
    margin-bottom: 1rem;
    background: var(--surface-color, rgba(30, 41, 59, 0.5)) !important;
    backdrop-filter: blur(8px);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.capacity-pattern-card:hover {
    border-color: rgba(16, 185, 129, 0.35) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
}
.pattern-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.85rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    gap: 0.75rem;
}
.pattern-card-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.pattern-badge {
    font-size: 0.725rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-color);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pattern-badge.active {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
    color: #34d399;
}
.pattern-badge.biweekly {
    background: rgba(14, 165, 233, 0.15);
    border-color: rgba(14, 165, 233, 0.3);
    color: #38bdf8;
}
.pattern-badge.rest {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}
.pattern-compact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 0.85rem;
}
.pattern-capacity-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    margin-top: 0.65rem;
}
.pattern-time-window-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
    border-radius: 8px;
    padding: 0.4rem 0.65rem;
    margin-bottom: 0.4rem;
}
/* Add Pattern Button Row Grid */
.pattern-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.pattern-actions-grid .btn {
    width: 100% !important;
    justify-content: center;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
}
/* Horizontal spacing for forms on pattern settings */
.pattern-row-inputs {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
}
.pattern-row-inputs > div {
    flex: 1;
    min-width: 140px;
}
/* 14-Day Calendar Projections Grid styling */
.projection-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 columns for calendar feel */
    gap: 8px;
    margin-top: 1.2rem;
}
@media (max-width: 991px) {
    .projection-calendar-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 576px) {
    .projection-calendar-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.projection-day-card {
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: default;
}
.projection-day-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
.projection-day-card.rest-day {
    background: rgba(255, 255, 255, 0.015) !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
    opacity: 0.65;
}
/* styles/views/_settings.css */
.settings-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1.5rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
@media (hover: none) and (pointer: coarse) {
  .settings-tabs::-webkit-scrollbar {
    display: none;
  }
}
.settings-tab-btn {
  background: none;
  border: none;
  padding: 0.75rem 1rem;
  color: var(--text-secondary-color);
  cursor: pointer;
  font-size: 1rem;
  border-bottom: 2px solid transparent;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
.settings-tab-btn.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}
.theme-selector,
.unit-toggle {
  display: flex;
  gap: 0.5rem;
}
.theme-selector button,
.unit-toggle button {
  flex: 1;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background-color: var(--surface-color);
  color: var(--text-color);
  cursor: pointer;
}
.theme-selector button.active,
.unit-toggle button.active {
  background-color: var(--primary-color);
  color: #FFFFFF;
  border-color: var(--primary-color);
}
.unit-toggle-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}
.setting-toggle-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border-color);
  gap: 1rem;
}
.setting-toggle-group:last-child {
  border-bottom: none;
}
.setting-toggle-group > div:first-child,
.setting-toggle-group > label:first-child {
  flex: 1;
  min-width: 0;
  padding-right: 0.5rem;
}
.integrations-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.integrations-list .toggle-group label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.integration-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}
.integration-icon.strava {
  background-color: #FC4C02;
}
.integration-icon.garmin {
  background-color: #007CC3;
}
.settings-explanation {
  font-size: 0.9rem;
  color: var(--text-secondary-color);
  margin-bottom: 1.5rem;
}
.trainer-application-section,
.friend-code-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color);
}
.friend-code-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--background-color);
  padding: 0.75rem 1rem;
  border-radius: 8px;
}
.friend-code-display button {
  width: auto;
}
.gear-list {
  margin-bottom: 1rem;
}
.gear-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
}
.add-gear-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  /* Added to allow stacking */
}
.add-gear-form input,
.add-gear-form select {
  padding: 0.75rem;
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-color);
  font-size: 1rem;
  font-family: inherit;
}
.add-gear-form input:focus,
.add-gear-form select:focus {
  outline: none;
  border-color: var(--primary-color);
}
.add-gear-form input {
  flex: 2 1 150px;
  /* Allow shrinking/growing with min basis */
}
.add-gear-form select {
  flex: 1 1 120px;
}
.toggle-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--background-color);
  padding: 0.85rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  gap: 1rem;
  box-sizing: border-box;
}
.toggle-group > div:first-child,
.toggle-group > label:first-child {
  flex: 1;
  min-width: 0;
  padding-right: 0.5rem;
}
.toggle-switch-wrapper {
  position: relative;
  display: inline-block;
  width: 50px;
  min-width: 50px;
  height: 28px;
  flex-shrink: 0;
}
.toggle-switch-wrapper .toggle-switch {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-color);
  transition: .4s;
  border-radius: 28px;
}
.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
.toggle-switch:checked+.toggle-slider {
  background-color: var(--primary-color);
}
.toggle-switch:focus+.toggle-slider {
  box-shadow: 0 0 1px var(--primary-color);
}
.toggle-switch:checked+.toggle-slider:before {
  transform: translateX(22px);
}
.btn-icon-only {
  width: auto;
  padding: 0.875rem;
  /* Match input height */
  line-height: 1;
  /* For better icon centering */
}
.btn-icon-only svg {
  width: 16px;
  height: 16px;
  margin: 0;
}
.qr-code-modal-content {
  padding: 1rem;
  max-width: 300px;
}
.friend-code-display .btn-group {
  flex-shrink: 0;
  /* Prevent the button group from shrinking */
}
.form-message {
  padding: 0.75rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-weight: 500;
}
.form-message.error {
  background-color: rgba(207, 102, 121, 0.1);
  border: 1px solid var(--error-color);
  color: var(--error-color);
}
.form-message.success {
  background-color: rgba(40, 167, 69, 0.1);
  border: 1px solid var(--success-color);
  color: var(--success-color);
}
.invite-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}
.invite-container .form-message {
  width: 100%;
  text-align: center;
}
.invite-container .btn-secondary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
/* styles/views/_social.css */
.social-view-container {
  display: block;
  height: auto;
  width: 100%;
  overflow-y: visible;
  overflow-x: hidden;
  background-color: var(--background-color);
}
.social-tabs {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 4px;
}
.social-tabs::-webkit-scrollbar {
  display: none;
}
.social-tab-btn {
  background: none;
  border: none;
  padding: 0.75rem 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary-color);
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.social-tab-btn:hover {
  color: var(--text-color);
}
.social-tab-btn.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}
.social-content-scroll {
  padding-bottom: 0;
}
/* --- Feed Items --- */
.feed-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.feed-item {
  position: relative;
  transition: transform 0.2s ease;
}
.feed-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.feed-user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.feed-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  background-color: var(--primary-color-translucent);
  color: var(--primary-color);
}
.feed-user-text p {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
}
.feed-time {
  font-size: 0.75rem;
  color: var(--text-secondary-color);
  margin: 0;
}
.feed-content {
  margin-bottom: 1rem;
}
.feed-stats-row {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}
.feed-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.75rem;
}
.action-group {
  display: flex;
  gap: 1.25rem;
}
.btn-feed-action {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary-color);
  cursor: pointer;
  transition: color 0.2s ease;
  font-size: 0.85rem;
  font-weight: 600;
}
.btn-feed-action:hover {
  color: var(--primary-color);
}
/* --- Circles --- */
.circles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.circle-card {
  cursor: pointer;
  transition: all 0.2s ease;
}
.circle-card:hover {
  transform: translateY(-2px);
}
.circle-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
}
.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background-color: var(--warning-color-translucent);
  color: var(--warning-color);
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
}
.settings-tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}
.settings-tab-btn {
  background: none;
  border: none;
  padding: 0.75rem 0.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-secondary-color);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
}
.settings-tab-btn.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}
/* --- Battle Zone --- */
.battle-bar-container {
  height: 0.75rem;
  background-color: var(--border-color);
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  width: 100%;
}
.battle-bar-us {
  height: auto;
  background: var(--primary-color);
  transition: width 0.5s ease-out;
}
.battle-bar-them {
  flex: 1;
  background: var(--error-color);
  opacity: 0.5;
}
/* --- Circle Chat --- */
.circle-chat-container {
  height: 60vh;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}
.circle-chat-body {
  flex: 1;
  overflow-y: visible;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.circle-chat-input-area {
  padding: 1rem;
  display: flex;
  gap: 0.75rem;
}
.circle-detail-view {
  width: 100%;
}
.trainer-view .client-list-sidebar-card {
    grid-area: list;
    width: 280px;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    margin: 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: calc(100% - 3rem);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.client-list-header {
    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
    flex-shrink: 0;
}
.client-list-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
    letter-spacing: -0.02em;
}
.client-search-wrapper {
    padding: 0.5rem 1.5rem 1rem 1.5rem;
}
.client-search-wrapper input {
    width: 100%;
    padding: 0.6rem 1rem;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-color);
    font-size: 0.9rem;
    transition: all 0.2s ease;
}
.client-search-wrapper input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-translucent);
}
.client-list-scroll-area {
    flex-grow: 1;
    overflow-y: visible;
    padding: 0 1rem;
}
.client-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-bottom: 1rem;
}
.client-card-item {
    display: flex;
    /* The card is laid out as a column, so `align-items: center` centred every child on the
       HORIZONTAL axis and shrank it to content width — which is why the risk-driver chip and the
       action buttons floated mid-card with dead space either side, breaking the top-to-bottom
       reading order (who → what's wrong → metrics → action). Stretch restores the spine. */
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* The identity row is the one part that genuinely reads horizontally. */
.client-card-item > div:first-child {
    align-items: center;
}
.client-card-item:hover {
    background-color: var(--primary-color-translucent);
    transform: scale(1.02);
}
.client-card-item.active {
    background-color: var(--primary-color);
    color: white;
}
.client-avatar-wrapper {
    flex-shrink: 0;
}
.client-card-item .friend-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    background: var(--primary-color-translucent);
    color: var(--primary-color);
}
.client-card-item.active .friend-avatar {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}
.client-card-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.client-name {
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.client-last-active {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: -2px;
}
/* --- Client Telemetry & Pro Roster Extensions --- */
.client-telemetry-grid {
    display: grid;
    /* 130px was too narrow for value text like "Last workout — None logged", which the chip
       then clipped to "None lo…". Widen the track and let each chip stack label over value. */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-2);
    width: 100%;
}
.telemetry-chip {
    display: flex;
    /* Label above value: reads as a metric rather than a run-on sentence, and removes the
       horizontal pressure that caused the ellipsis. */
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: var(--space-2);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-sm);
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--text-color);
    min-width: 0;
}
.telemetry-chip .chip-label {
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary-color);
    line-height: 1.2;
}
.telemetry-chip .chip-value {
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.25;
    /* Wrap rather than clip — a truncated metric is worse than a two-line one. */
    overflow-wrap: anywhere;
    min-width: 0;
}
.telemetry-chip.chip-adherence {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}
.telemetry-chip.chip-sleep {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.2);
    color: #818cf8;
}
.telemetry-chip.chip-workout {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}
.telemetry-chip.chip-meal {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.2);
    color: #10b981;
}
.quick-action-bar {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.quick-action-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: var(--text-2xs, 0.75rem);
    font-weight: 700;
    border: 1px solid var(--border-color);
    background: var(--surface-color, rgba(255, 255, 255, 0.05));
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s ease;
}
.quick-action-btn:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}
.trainer-copilot-banner {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.client-list-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--surface-color);
}
.add-client-premium-btn {
    width: 100%;
    padding: 0.75rem;
    background: var(--primary-color-translucent);
    color: var(--primary-color);
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.add-client-premium-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-1px);
}
.trainer-view .client-dashboard-wrapper {
    grid-area: main;
    transition: width 0.3s ease;
    position: relative;
    overflow-x: hidden;
    overflow-y: visible;
    height: auto;
    width: 100%;
}
.trainer-view .client-dashboard {
    flex-grow: 1;
    overflow-y: visible;
}
.client-detail-view {
    /* Safe-area aware padding so bottom content is never hidden by nav bar or home indicator */
    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
}
.main-content-placeholder {
    flex-grow: 1;
    align-items: center;
    justify-content: center;
}
.client-list-header {
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}
.client-list-header h3 {
    color: var(--primary-color);
    margin: 0;
}
.trainer-sidebar-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.trainer-sidebar-tabs button {
    flex: 1;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    color: var(--text-secondary-color);
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
}
.trainer-sidebar-tabs button.active {
    background: var(--primary-color);
    color: var(--background-color);
    border-color: var(--primary-color);
}
[data-theme='light'] .trainer-sidebar-tabs button.active {
    color: white;
}
.client-search-wrapper {
    margin-bottom: 1rem;
}
.client-search-wrapper input {
    width: 100%;
    padding: 0.75rem;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 1rem;
    font-family: inherit;
}
.client-search-wrapper input:focus {
    outline: none;
    border-color: var(--primary-color);
}
.client-list {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.client-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.client-item.active,
.client-item:hover {
    background-color: var(--background-color);
    transform: scale(1.02);
}
.client-item.active {
    background-color: var(--primary-color-translucent);
    color: var(--primary-color);
    font-weight: 600;
    border-left: none;
    padding-left: 1rem;
}
.client-item.active:hover {
    background-color: var(--primary-color-translucent);
}
.client-item .friend-avatar {
    width: 36px;
    height: 36px;
}
.client-info {
    flex-grow: 1;
}
.client-info strong {
    display: block;
}
.client-info small {
    color: var(--text-secondary-color);
}
.client-dashboard-wrapper.panel-open {
    width: calc(100% - 400px);
}
@media (min-width: 1200px) {
    .client-dashboard-header {
        display: none;
        margin-bottom: 0;
    }

    .trainer-view .client-dashboard-wrapper {
        padding: 0;
    }
}
.client-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.client-dashboard-header:empty {
    display: none;
}
.client-dashboard-header h2 {
    margin: 0;
}
.client-dashboard-header .btn {
    width: auto;
}
.trainer-dashboard-layout {
    display: flex;
    width: 100%;
}
.trainer-dashboard-layout.desktop-clients-layout {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "list main";
}
.trainer-col-overview {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    overflow-y: visible;
    height: auto;
    flex: 3;
    min-width: 0;
}
.trainer-col-chat {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    flex: 4;
    min-width: 0;
}
.workout-suggestion-panel {
    width: 400px;
    flex-shrink: 0;
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    background-color: var(--surface-color);
}
.panel-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.panel-header h3 {
    margin: 0;
    font-size: 1.2rem;
}
.panel-content {
    flex-grow: 1;
    padding: 1.5rem;
    overflow-y: visible;
}
.ai-workout-textarea {
    width: 100%;
    height: 100%;
    background: var(--background-color);
    border: none;
    border-radius: 8px;
    padding: 1rem;
    color: var(--text-color);
    font-family: inherit;
    resize: none;
}
.panel-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
}
@media (max-width: 1199px) {

    .trainer-view .client-list-sidebar,
    .trainer-view .client-dashboard-wrapper {
        margin: 0;
        border-radius: 0;
        border: none;
        height: auto;
        width: 100%;
    }

    .trainer-view .trainer-dashboard-layout {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        height: auto;
    }

    .trainer-view .trainer-col-overview {
        height: auto;
        overflow-y: visible;
        min-height: 0;
        display: contents;
        flex-direction: column;
        gap: 0.75rem;
    }

    .trainer-view .trainer-col-chat {
        height: auto;
        overflow-y: visible;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .trainer-view .client-dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        display: flex;
        margin-bottom: 0.75rem;
    }

    .trainer-view .client-dashboard-header .btn-secondary {
        width: 100%;
    }
}
/* styles/views/_trainer-events.css */
/* Styles for the Trainer Event Manager tab */
/* --- Event Card Overrides --- */
/* (These styles are shared with user-facing event cards) */
.event-card .program-card-tags .tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.event-card .program-card-tags .tag svg {
  width: 14px;
  height: 14px;
}
.event-card .program-card-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 0.5rem; /* Smaller padding */
  margin-top: 0.5rem; /* Smaller margin */
  border-top: 1px solid var(--border-color);
  font-size: 0.9rem;
  color: var(--text-secondary-color);
}
.event-card .stat-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
/* styles/views/_trainer-layout.css */
/* Trainer View Tabs */
.trainer-view-with-tabs {
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
  overflow: hidden;
}
.trainer-view-header {
  background-color: var(--surface-color);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.trainer-view-tabs {
  display: flex;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
}
.trainer-tab-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background-color: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-secondary-color);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.trainer-tab-btn:hover {
  background-color: var(--background-color);
  color: var(--text-color);
}
.trainer-tab-btn.active {
  background-color: var(--primary-color);
  color: var(--text-on-primary);
}
.trainer-tab-btn svg {
  width: 20px;
  height: 20px;
}
.trainer-tab-content {
  flex: 1;
  overflow-y: visible;
  overflow-x: hidden;
}
/* My Trainers Tab Styling */
.my-trainers-content .trainer-client-view-wrapper {
  padding: 1.5rem;
}
.my-trainers-content .trainer-view-divider {
  margin: 1.5rem 0;
  border: none;
  border-top: 1px solid var(--border-color);
}
/* Find Trainer Tab Styling - Full width, no constraints */
.find-trainer-content {
  padding: 0;
  background-color: var(--background-color);
  width: 100%;
  height: auto;
}
.find-trainer-content>* {
  width: 100%;
  height: auto;
}
.trainer-view {
  background-color: var(--background-color);
  padding: 0;
}
.trainer-view.no-sidebar {
  /* intentionally empty or grid styles if needed, but no overflow manipulation */
}
.trainer-dashboard-container {
  width: 100%;
  height: auto;
  overflow: visible;
  position: relative;
}
/* Sidebar is now handled by app-level Navigation.tsx */
/* Only apply layout padding/structure to the main wrappers */
.trainer-view .client-list-sidebar,
.trainer-view .client-dashboard-wrapper {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow: visible;
  box-sizing: border-box;
  height: auto;
}
/* Removed redundant rules targeting inner components (.program-manager, etc.) 
   since they are now wrapped by .client-dashboard-wrapper which handles the padding. */
@media (max-width: 1199px) {
  .app-container.trainer-mode {
    height: 100vh;
    height: 100svh;
  }

  .app-container.trainer-mode .main-content {
    padding: 0;
    overflow-y: auto;
  }

  .trainer-view,
  .trainer-view.no-sidebar {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "main"
      "tabnav";
    gap: 0;
    padding: 0;
  }

  .trainer-view .client-list-sidebar,
  .trainer-view .client-dashboard-wrapper {
    grid-area: main;
    width: 100%;
    border-right: none;
    padding: 0.75rem;
    gap: 0.75rem;
    margin: 0;
    height: auto;
    overflow: visible;
  }
}
/* Appointment list styles */
.appointment-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.appointment-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border-radius: 12px;
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.appointment-item:hover {
  background-color: var(--background-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.appointment-date-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.date-month {
  font-size: var(--text-2xs, 0.75rem);
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1;
}
.date-day {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-color);
  line-height: 1.1;
  margin-top: 2px;
}
.appointment-details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.appointment-details strong {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.appointment-details small {
  font-size: 0.875rem;
  color: var(--text-secondary-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-cancel-text {
  background: none;
  border: none;
  padding: 0.25rem;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary-color);
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 4px;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.btn-cancel-text:hover {
  color: var(--error-color);
  background-color: rgba(207, 102, 121, 0.1);
  text-decoration: none;
}
/* A segmented control whose segments do not fit a phone wraps onto a second row instead of
   scrolling sideways behind a hidden scrollbar, where the last segments were invisible (wave 6
   verify, yellow 3: leads filters, storefront tabs, nutrition target type, client filter). Opt in
   with .segmented-control--wrap; the control itself stays defined once, in components.css. */
@media (max-width: 480px) {
  .segmented-control.segmented-control--wrap {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .segmented-control.segmented-control--wrap button {
    flex: 1 1 auto;
  }
}
/* styles/views/_trainer-marketplace.css */
/* Styling for TrainerMarketplace component */
/* Force the marketplace to fill available space */
.find-trainer-content {
    display: flex;
    flex-direction: column;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}
/* Container - full width for trainer marketplace in tab */
.find-trainer-content .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    padding: 1.5rem;
    box-sizing: border-box;
}
.find-trainer-content .container.mx-auto {
    margin: 0 !important;
}
/* Regular container for other uses */
.container {
    width: 100%;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
/* Grid layouts */
.grid {
    display: grid;
}
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.gap-6 {
    gap: 1.5rem;
}
/* Trainer Marketplace layout - sidebar + content - 2 column layout */
.find-trainer-content .grid.grid-cols-1.lg\:grid-cols-4 {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 1.5rem;
    width: 100%;
}
.find-trainer-content .lg\:col-span-1 {
    grid-column: 1 / 2;
    width: 280px;
    min-width: 280px;
    max-width: 280px;
}
.find-trainer-content .lg\:col-span-3 {
    grid-column: 2 / 3;
    width: 100%;
    min-width: 0;
}
/* Mobile: stack vertically */
@media (max-width: 1023px) {
    .find-trainer-content .grid.grid-cols-1.lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    .find-trainer-content .lg\:col-span-1,
    .find-trainer-content .lg\:col-span-3 {
        grid-column: 1 / -1;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}
/* Make trainer cards grid properly */
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}
@media (min-width: 640px) {
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* XL breakpoint for trainer cards */
@media (min-width: 1280px) {
    .xl\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xl\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* Flexbox utilities */
.flex {
    display: flex;
}
.items-center {
    align-items: center;
}
.justify-center {
    justify-content: center;
}
.space-x-4 > * + * {
    margin-left: 1rem;
}
.flex-wrap {
    flex-wrap: wrap;
}
/* Spacing utilities */
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.mb-2 {
    margin-bottom: 0.5rem;
}
.mb-4 {
    margin-bottom: 1rem;
}
.mb-6 {
    margin-bottom: 1.5rem;
}
.mb-8 {
    margin-bottom: 2rem;
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.p-2 {
    padding: 0.5rem;
}
.p-6 {
    padding: 1.5rem;
}
/* Sizing utilities */
.w-full {
    width: 100%;
}
.min-h-screen {
    min-height: 100vh;
}
/* Typography */
.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.font-bold {
    font-weight: 700;
}
.font-medium {
    font-weight: 500;
}
.text-white {
    color: var(--text-primary, #ffffff);
}
.text-gray-300 {
    color: var(--text-secondary-color, #d1d5db);
}
.text-gray-400 {
    color: var(--text-tertiary-color, #9ca3af);
}
/* Background colors */
.bg-grit-dark {
    background-color: var(--background-color, #1a1a1a);
}
.bg-grit-dark-light {
    background-color: var(--surface-color, #2a2a2a);
}
.bg-grit-gold {
    background-color: var(--primary-color, #f59e0b);
}
/* Border utilities */
.rounded {
    border-radius: 0.25rem;
}
.rounded-lg {
    border-radius: 0.5rem;
}
.border {
    border-width: 1px;
}
.border-gray-700 {
    border-color: var(--border-color, #374151);
}
/* Position utilities */
.sticky {
    position: sticky;
}
.top-4 {
    top: 1rem;
}
/* Block */
.block {
    display: block;
}
/* Outline */
.outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
/* Focus utilities */
.focus\:border-grit-gold:focus {
    border-color: var(--primary-color, #f59e0b);
}
/* Transition utilities */
.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
/* Premium GRIT Buttons */
.grit-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 18px;
    padding: 0 1rem;
    position: relative;
    overflow: hidden;
}
.grit-button:hover {
    border-color: var(--primary-color);
    background-color: var(--background-color);
    box-shadow: 0 0 15px var(--primary-color-translucent);
    transform: translateY(-1px);
}
.grit-button:active {
    transform: translateY(0);
}
.grit-button.primary-glow {
    background-color: var(--primary-color);
    color: var(--background-color);
    border-color: var(--primary-color);
}
.grit-button.primary-glow:hover {
    background-color: #fcd34d; /* Amber-300 */
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}
.grit-button.secondary-glow:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
/* Numerical formatting - hide spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
            appearance: textfield;
}
/* --- Mobile Filter Modernization (Adapted from Events Page) --- */
.mobile-only {
    display: none !important;
}
.desktop-only {
    display: block !important;
}
@media (max-width: 1023px) {
    .mobile-only {
        display: block !important;
    }

    .desktop-only {
        display: none !important;
    }
}
/* Drawer & Chips Styles */
.mobile-filter-chips {
    display: none;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    width: 100%;
}
@media (max-width: 1023px) {
    .mobile-filter-chips {
        display: flex;
    }
}
.filter-chips-scroll {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    flex: 1;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 2px 0;
}
.filter-chips-scroll::-webkit-scrollbar {
    display: none;
}
.chip {
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-secondary-color);
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    transition: all 0.2s;
    cursor: pointer;
}
.chip.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px var(--primary-color-translucent);
}
.mobile-filter-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.6rem 1rem;
    border-radius: 20px;
    background: var(--surface-color);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    position: relative;
}
.filter-badge {
    width: 8px;
    height: 8px;
    background: var(--error-color);
    border-radius: 50%;
    position: absolute;
    top: -2px;
    right: -2px;
    border: 2px solid var(--surface-color);
}
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1100; /* Higher than shell but lower than modals if any */
}
.trainer-filter-sidebar {
    background: var(--surface-color);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    box-sizing: border-box;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 1023px) {
    .trainer-filter-sidebar.show-mobile {
        position: fixed !important;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 85vh;
        z-index: 1101 !important;
        border-radius: 32px 32px 0 0;
        transform: translateY(0);
        display: flex !important;
        flex-direction: column;
        overflow-y: visible;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.4);
    }

    .trainer-filter-sidebar:not(.show-mobile) {
        transform: translateY(100%);
        pointer-events: none;
        display: none !important;
    }
}
.drawer-header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}
.drawer-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-color);
    font-weight: 900;
}
.close-drawer {
    background: var(--input-bg);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    font-size: 1.2rem;
    cursor: pointer;
}
.mobile-filter-actions {
    display: flex;
    gap: 12px;
    padding: 1.25rem;
    background: rgba(18, 18, 18, 0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-color);
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    margin-top: auto;
}
.mobile-filter-actions .grit-button {
    flex: 1;
    height: 48px;
    border-radius: 24px;
    font-weight: 700;
    font-size: 0.9rem;
}
/* --- Premium Sliding Pill Navigation --- */
.view-mode-toggle {
    display: flex;
    position: relative;
    padding: 3px;
    border-radius: 14px;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    width: 100%;
}
.sliding-indicator {
    position: absolute;
    top: 3px;
    bottom: 3px;
    width: calc(50% - 3px);
    background: var(--primary-color);
    border-radius: 11px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}
.view-mode-btn {
    flex: 1;
    padding: 10px 4px;
    position: relative;
    z-index: 1;
    border: none;
    background: transparent;
    color: var(--text-secondary-color);
    font-weight: 900;
    font-size: 0.75rem;
    cursor: pointer;
    transition: color 0.3s;
    text-transform: uppercase;
}
.view-mode-btn.active {
    color: #fff;
}
/* --- Refinement Chips --- */
.refinement-chips-container {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.refinement-chips-container::-webkit-scrollbar {
    display: none;
}
.refinement-chip {
    padding: 8px 16px;
    border-radius: 20px;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--border-color);
    background: var(--background-color);
    color: var(--text-secondary-color);
}
.refinement-chip.active {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 10px var(--primary-color-translucent);
}
/* styles/views/_trainer-performance.css */
.trainer-performance-view {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
/* --- Mobile Overrides for Performance Tab --- */
@media (max-width: 1199px) {
    .trainer-view .gamification-view .streak-display {
        flex-direction: column;
        gap: 0.75rem;
    }
}
/* styles/views/_trainer-programs.css */
.program-manager {
  flex-grow: 1;
}
.library-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.library-section-card {
  background: var(--surface-color);
  padding: 2rem;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.program-manager-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  gap: 2rem;
}
.program-manager-header h2 {
  margin: 0;
}
.program-manager-header .btn {
  width: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* --- KPI Summary --- */
.kpi-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.75rem !important;
  margin-bottom: 1rem !important;
}
.kpi-card {
  background-color: var(--surface-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  padding: 0.5rem 0.75rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.15rem !important;
  align-items: center !important;
  text-align: center !important;
  min-height: 0 !important;
  box-shadow: none !important;
}
.kpi-card h3 {
  margin: 0 !important;
  font-size: var(--text-2xs, 0.75rem) !important;
  font-weight: 700 !important;
  color: var(--text-secondary-color) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  line-height: 1.2 !important;
}
.kpi-value {
  margin: 0 !important;
  font-size: 1.125rem !important;
  font-weight: 900 !important;
  color: var(--primary-color) !important;
  line-height: 1 !important;
}
.program-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1.5rem;
}
.trainer-programs-view .program-card {
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.trainer-programs-view .program-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: var(--primary-color);
  box-shadow: 0 12px 24px var(--primary-color-translucent);
}
.program-card-info h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: var(--text-color);
}
.program-card-info p {
  font-size: 0.9rem;
  color: var(--text-secondary-color);
  margin-bottom: 1rem;
  line-height: 1.5;
}
.program-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tag {
  background-color: var(--background-color);
  color: var(--text-secondary-color);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}
.program-card-actions {
  display: flex;
  gap: 1rem;
  margin-top: auto;
}
.program-card-actions .btn {
  width: 100%;
  flex: 1;
}
/* --- NEW DELETE BUTTON STYLE --- */
.program-card-actions .btn-delete {
  flex-grow: 0;
  flex-basis: 50px;
  color: var(--error-color);
  border-color: var(--error-color);
}
.program-card-actions .btn-delete:hover {
  background-color: rgba(207, 102, 121, 0.1);
  color: var(--error-color);
}
.program-card-actions .btn-delete:disabled {
  color: var(--border-color);
  border-color: var(--border-color);
  background-color: transparent;
}
/* --- END NEW STYLE --- */
.program-card-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.9rem;
  color: var(--text-secondary-color);
}
.stat-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.stat-item.subscribers {
  color: var(--primary-color);
}
.stat-item.rating {
  color: var(--carbs-color);
}
.star-rating.small-stars {
  font-size: 1rem;
  color: var(--border-color);
}
.star-rating.small-stars span.filled {
  color: var(--carbs-color);
}
.tag.published {
  background-color: var(--success-color);
  color: #fff;
  border-color: var(--success-color);
}
/* --- TAB SWITCHER: .segmented-control lives in styles/components.css (trainer wave 6). --- */
.program-card-actions .btn-secondary {
  background-color: var(--background-color);
}
.tag.subscribers {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background-color: var(--primary-color-translucent);
  color: var(--primary-color);
  border-color: var(--primary-color);
}
.tag.subscribers svg {
  width: 14px;
  height: 14px;
}
.tag.intensity-beginner {
  background-color: var(--secondary-color-translucent);
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}
.tag.intensity-intermediate {
  background-color: rgba(245, 158, 11, 0.1);
  /* --carbs-color */
  color: var(--carbs-color);
  border-color: var(--carbs-color);
}
.tag.intensity-advanced {
  background-color: rgba(207, 102, 121, 0.1);
  /* --error-color */
  color: var(--error-color);
  border-color: var(--error-color);
}
.tag.focus-tag {
  background-color: var(--secondary-color-translucent);
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}
/* --- Program Editor Modal --- */
.program-editor-modal .modal-content {
  width: 90vw;
  max-width: 1200px;
  height: 85vh;
  display: flex;
  flex-direction: column;
}
.program-day-editor-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1.5rem;
  flex-grow: 1;
  overflow: hidden;
}
@media (max-width: 768px) {
  .program-day-editor-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    overflow-y: visible;
    overflow-x: hidden;
  }

  .program-editor-modal .modal-content {
      height: 95vh;
      width: 100vw;
  }
}
.program-day-content {
  overflow-y: visible;
  height: auto;
  padding-right: 1rem;
}
.modal-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color);
}
.program-day-sidebar {
  background-color: var(--background-color);
  border-radius: 10px;
  padding: 1rem;
  overflow-y: visible;
  height: auto;
}
/* --- Equipment Selector --- */
.equipment-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.equipment-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  background: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}
.equipment-option:hover {
  border-color: var(--primary-color);
  background: var(--primary-color-translucent);
}
.equipment-option.selected {
  background: var(--primary-color-translucent);
  border-color: var(--primary-color);
  font-weight: 600;
}
.equipment-option input {
  pointer-events: none;
}
.program-day-sidebar h4 {
  margin-top: 0;
  color: var(--primary-color);
}
.program-week-list,
.program-day-list {
  display: flex;
  flex-direction: column;
  overflow-y: visible;
  gap: 0.25rem;
}
.program-day-list:not(.continuous) {
  height: calc(100% - 2rem);
}
.week-list-item {
  width: 100%;
  padding: 0.75rem 1rem;
  margin-bottom: 0.25rem;
  background: none;
  border: none;
  color: var(--text-secondary-color);
  cursor: pointer;
  border-radius: 8px;
  text-align: left;
  font-size: 1rem;
}
.week-list-item:hover {
  background-color: var(--surface-color);
  color: var(--text-color);
}
.week-list-item.active {
  background-color: var(--secondary-color);
  color: #fff;
  font-weight: 600;
}
.program-day-sidebar .day-list-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 0.5rem 1rem;
  margin-bottom: 0.25rem;
  background: none;
  border: none;
  color: var(--text-secondary-color);
  cursor: pointer;
  border-radius: 8px;
  text-align: left;
}
.program-day-sidebar .day-list-item small {
  font-size: 0.8rem;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.program-day-sidebar .day-list-item:hover {
  background-color: var(--surface-color);
  color: var(--text-color);
}
.program-day-sidebar .day-list-item.active {
  background-color: var(--primary-color-translucent);
  color: var(--primary-color);
  font-weight: 600;
}
/* --- Workout Builder --- */
.workout-builder-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.workout-builder-header .subheading {
  margin: 0;
  border-bottom: none;
  padding-bottom: 0;
}
.estimated-time-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary-color);
}
.block-builder-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 0;
}
.block-builder-item {
  background-color: var(--surface-color);
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}
/* --- BLOCK HEADER STYLES (DESKTOP) --- */
.block-header {
  display: flex;
  align-items: flex-end;
  /* Align to bottom of inputs */
  gap: 1rem;
  flex-wrap: wrap;
}
.block-reorder-controls {
  margin-bottom: 0.5rem;
  /* Tweak alignment */
}
.block-header-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-color);
  text-transform: uppercase;
  margin-right: auto;
  /* Pushes inputs to the right */
  margin-bottom: 0.5rem;
  /* Tweak alignment */
}
.block-header .form-group {
  margin-bottom: 0;
}
.block-title-group {
  flex: 3 1 200px;
  /* Allow shrinking but grow more */
}
.block-rounds-group {
  flex: 1 1 80px;
  /* Allow shrinking, grow less */
}
.block-header .form-group input {
  height: 40px;
  padding: 0 0.75rem;
}
.block-header .btn-icon {
  margin-bottom: 0.5rem;
  /* Tweak alignment */
  flex-shrink: 0;
}
/* --- END BLOCK HEADER STYLES --- */
.exercise-group-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.exercise-group-item {
  background-color: var(--background-color);
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  position: relative;
}
.exercise-group-item.superset {
  border-left: 3px solid var(--secondary-color);
}
.group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.group-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.group-title {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--primary-color);
}
.exercise-group-item.superset .group-title {
  color: var(--secondary-color);
}
.group-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.group-actions .btn-icon {
  color: var(--text-secondary-color);
}
.exercise-item-wrapper {
  margin-top: 0;
}
.exercise-item-wrapper:first-child {
  margin-top: 0;
}
.exercise-input-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.exercise-input-row:hover {
  background-color: var(--surface-color);
}
.exercise-input-row.expanded {
  background-color: var(--surface-color);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.exercise-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-grow: 1;
  min-width: 0;
}
/* --- NEW CSS GRID LAYOUT --- */
.compact-metric-display {
  display: grid;
  /* Sets | Reps | Rest | Arrow */
  grid-template-columns: auto 1fr auto auto;
  align-items: flex-start;
  gap: 1rem;
  flex-shrink: 0;
  margin-left: 1rem;
  min-width: 0;
}
.compact-metric {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-secondary-color);
  text-align: right;
}
.compact-metric svg {
  width: 14px;
  height: 14px;
  color: var(--text-secondary-color);
  flex-shrink: 0;
}
.compact-metric .metric-value-unit {
  font-weight: 500;
  color: var(--text-color);
  white-space: normal;
  word-break: break-word;
}
.compact-metric.metric-sets,
.compact-metric.metric-rest {
  justify-content: flex-end;
}
.compact-metric.metric-reps {
  text-align: left;
  min-width: 0;
  /* Allows this grid column to shrink */
  justify-content: flex-start;
}
/* --- FIX: CSS-based alignment for Cardio/Other --- */
.compact-metric.metric-duration,
.compact-metric.metric-other {
  grid-column: 3 / 4;
  /* Place it in the 3rd column */
  justify-content: flex-end;
  /* Align it to the right, like .metric-rest */
}
.compact-metric.metric-other {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text-secondary-color);
}
/* --- END CSS FIX --- */
.btn-toggle-expand {
  justify-self: flex-end;
  align-self: center;
  /* Center the arrow vertically */
}
/* --- END NEW CSS GRID LAYOUT --- */
.exercise-number {
  font-size: 0.8rem;
  color: var(--text-secondary-color);
  font-weight: 500;
  margin-left: 0.25rem;
}
.exercise-name-input.compact {
  background: none;
  border: none;
  padding: 0;
  margin: 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-color);
  line-height: 1.5;
  height: auto;
}
.exercise-name-input.compact:focus {
  box-shadow: none;
  border-bottom: 1px solid var(--primary-color);
  border-radius: 0;
}
.exercise-detail-content {
  background-color: var(--surface-color);
  padding: 1rem;
  border-radius: 0 0 10px 10px;
  border-top: 1px solid var(--border-color);
}
.exercise-detail-content .form-group input,
.exercise-detail-content .form-group select,
.exercise-detail-content .form-group textarea {
  background-color: var(--background-color);
  border-color: var(--border-color);
  border-radius: 8px;
}
.exercise-detail-content .form-group-split {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.exercise-detail-content .form-group-split .form-group {
  flex: 1;
  min-width: 150px;
}
.label-with-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.label-with-icon svg {
  width: 16px;
  height: 16px;
}
.btn-icon-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-icon-group.vertical {
  flex-direction: column;
  gap: 0.25rem;
}
.btn-icon.btn-trash {
  color: var(--error-color);
}
.btn-icon.btn-trash:hover {
  background-color: rgba(207, 102, 121, 0.1);
  color: var(--error-color);
}
.btn-icon[disabled] {
  color: var(--border-color);
  cursor: not-allowed;
  background-color: transparent;
  opacity: 0.5;
}
/* --- UPDATED DROPDOWN FIX --- */
.exercise-list-condensed {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  /* overflow: hidden; <-- THIS WAS THE PROBLEM */
}
/* Apply radius to children instead of parent */
.exercise-list-condensed .exercise-item-wrapper:first-child .exercise-input-row {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.exercise-list-condensed .exercise-item-wrapper:last-child .exercise-input-row {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
/* Handle expanded case for last item */
.exercise-list-condensed .exercise-item-wrapper:last-child .exercise-input-row.expanded {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.exercise-list-condensed .exercise-item-wrapper:last-child .exercise-detail-content {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
/* --- END UPDATED DROPDOWN FIX --- */
.exercise-list-condensed .exercise-item-wrapper {
  border-bottom: 1px solid var(--border-color);
}
.exercise-list-condensed .exercise-item-wrapper:last-child {
  border-bottom: none;
}
.exercise-group-item .btn,
.exercise-group-item .btn-secondary,
.block-builder-item .btn-secondary {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: auto;
}
/* --- DOM-Based Mobile Navigation --- */
.mobile-day-navigation {
  display: none;
}
/* --- MOVED RULES FROM 768px to 1199px --- */
@media (max-width: 1199px) {
  .program-day-editor-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    overflow: hidden;
    gap: 0;
  }

  .program-day-sidebar {
    display: none !important;
  }

  .program-day-content {
      padding-top: 1rem;
      padding-right: 0;
  }

  .mobile-day-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.5rem;
    margin-bottom: 1.5rem;
  }

  .mobile-day-navigation .nav-arrow {
    background: transparent;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background-color 0.2s;
  }

  .mobile-day-navigation .nav-arrow:disabled {
    color: var(--border-color);
    opacity: 0.5;
  }

  .mobile-day-navigation .nav-center-selector {
    position: relative;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
  }

  .mobile-day-navigation .nav-center-selector select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
  }

  .mobile-day-navigation .nav-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* --- BLOCK HEADER MOBILE STYLES --- */
  .block-header {
    flex-direction: row;
    /* Force single row */
    flex-wrap: nowrap;
    /* Prevent wrapping */
    align-items: center;
    /* Center vertically */
    gap: 0.5rem;
  }

  .block-header .block-reorder-controls {
    display: flex;
    margin-bottom: 0;
  }

  .block-header .block-header-label {
    /* Hide "BLOCK 1" text */
    display: none;
  }

  .block-header .form-group label {
    /* Hide "Block Title" and "Rounds" labels */
    display: none;
  }

  .block-header .form-group {
    margin-bottom: 0;
  }

  .block-title-group {
    flex: 1 1 auto;
    /* Take up remaining space */
  }

  .block-rounds-group {
    flex: 0 1 80px;
    /* Shrink to fit content, max 80px */
  }

  .block-header .form-group input {
    height: 44px;
    /* Slightly taller for mobile tap */
    padding: 0 0.75rem;
  }

  .block-header .btn-trash {
    margin-bottom: 0;
    /* Reset margin */
  }

  /* --- END BLOCK HEADER MOBILE STYLES --- */

  .exercise-input-row {
    flex-direction: column;
    align-items: stretch;
  }

  .exercise-input-wrapper {
    min-width: 0;
  }

  .compact-metric-display {
    /* Use grid here too */
    grid-template-columns: auto 1fr auto auto;
    justify-content: space-between;
    margin-top: 0.75rem;
    margin-left: 0;
    gap: 0.75rem;
    flex-basis: auto;
  }

  .exercise-detail-content .form-group-split {
    flex-direction: column;
    gap: 1rem;
  }

  /* --- PADDING RULES (from 768) --- */
  .block-builder-item {
    padding: 0.75rem;
  }

  .exercise-group-list {
    gap: 0.75rem;
    margin-top: 1rem;
  }

  .exercise-group-item {
    padding: 0.75rem;
  }

  .group-header {
    margin-bottom: 0.75rem;
  }

  .exercise-input-row {
    padding: 0.5rem;
  }

  .block-builder-list {
    gap: 0.75rem;
  }
}
/* --- This query is now just for smaller tweaks if needed --- */
@media (max-width: 768px) {
  /* (All block-header rules were moved to 1199px) */

  /* This rule was original and can stay */
  .block-header-inputs {
    flex-direction: column;
  }
}
.block-builder-list .btn {
  width: 100%;
  padding: 1rem;
  border-radius: 16px;
  border: 2px dashed var(--border-color);
  color: var(--text-secondary-color);
  background-color: transparent;
  font-size: 1rem;
  margin-top: 0;
  /* Override default margin */
}
.block-builder-list .btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background-color: var(--primary-color-translucent);
  transform: none;
  box-shadow: none;
}
.block-builder-list .btn-secondary {
  /* Reset for "Add Exercise Group" button */
  width: auto;
  padding: 0.875rem 1.5rem;
  border: 1px solid var(--border-color);
  color: var(--text-color);
  background-color: var(--surface-color);
  font-size: 0.9375rem;
  margin-top: auto;
}
.block-builder-list .btn-secondary:hover {
  background-color: var(--primary-color-translucent);
  border-color: var(--primary-color);
  color: var(--primary-color);
}
/* Block Header Realignment (from sample) */
.block-header {
  display: flex;
  flex-wrap: nowrap;
  /* Force single row */
  align-items: center;
  /* Center vertically */
  gap: 0.5rem;
  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  background-color: var(--background-color);
  border-radius: 12px;
}
.block-header .block-reorder-controls {
  margin-bottom: 0;
  flex-shrink: 0;
}
.block-header .block-header-label {
  display: none;
  /* Hide "BLOCK 1" on all screens */
}
.block-header .form-group {
  margin-bottom: 0;
  flex-grow: 1;
}
.block-header .form-group label {
  display: none;
  /* Hide "Block Title" and "Rounds" labels */
}
.block-title-group {
  flex: 1 1 auto;
  /* Take up remaining space */
}
.block-rounds-group {
  flex: 0 1 80px;
  /* Shrink to fit content, max 80px */
}
.block-header .form-group input {
  height: 44px;
  padding: 0 0.75rem;
  background-color: var(--surface-color);
  /* Match sample */
}
.block-header .btn-icon {
  margin-bottom: 0;
  flex-shrink: 0;
}
/* Exercise Rationale Label (from sample) */
.label-with-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.label-with-icon svg {
  width: 16px;
  height: 16px;
}
/* Compact Exercise Row Fixes */
.exercise-input-row {
  align-items: flex-start;
  /* Align top */
  padding: 0.75rem 0.5rem;
}
.exercise-input-wrapper {
  gap: 0.75rem;
  align-items: flex-start;
  padding-top: 0.25rem;
  /* Align grabber with text */
}
.exercise-number {
  padding-top: 0.25rem;
  /* Align number with text */
}
.exercise-name-input.compact {
  margin: 0;
  padding-top: 0.125rem;
}
.compact-metric-display {
  align-items: flex-start;
  padding-top: 0.25rem;
  /* Align metrics with text */
}
.btn-toggle-expand {
  align-self: flex-start;
  /* Align arrow to top */
}
/* Mobile fine-tuning */
@media (max-width: 1199px) {
  .block-header {
    padding: 0.5rem;
  }

  .compact-metric-display {
    gap: 0.5rem;
    grid-template-columns: auto 1fr auto auto;
  }
}
.input-wrapper-name {
  position: relative;
  flex-grow: 1;
  /* Ensure it takes up available width in the flex container */
}
/* 2. The floating dropdown menu */
.exercise-dropdown {
  position: absolute;
  top: 100%;
  /* Position directly below the input */
  left: 0;
  right: 0;
  max-height: 250px;
  /* Limit height */
  overflow-y: visible;
  /* Enable scrolling */
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 0 0 8px 8px;
  z-index: 50;
  /* Ensure it floats ABOVE other elements */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-top: 2px;
}
/* 3. Group Headers (e.g., "Chest", "Triceps") */
.dropdown-group-label {
  padding: 0.5rem 0.75rem;
  font-size: var(--text-2xs, 0.75rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary-color);
  background-color: var(--background-color);
  /* Distinct background */
  position: sticky;
  /* Keeps header visible while scrolling within group */
  top: 0;
}
/* 4. Clickable Exercise Items */
.dropdown-item {
  padding: 0.4rem 0.6rem;
  font-size: var(--text-2xs, 0.75rem);
  color: var(--text-color);
  cursor: pointer;
  transition: background-color 0.15s ease;
  border-bottom: 1px solid var(--border-color);
}
/* Remove border from the very last item */
.dropdown-item:last-child {
  border-bottom: none;
}
.dropdown-item:hover {
  background-color: var(--primary-color-translucent);
  color: var(--primary-color);
}
/* styles/views/_trainer-schedule.css */
.schedule-container {
  background-color: var(--background-color);
  /* Padding removed to rely on wrapper padding */
  padding: 0;
  min-height: auto;
  color: var(--text-color);
}
.schedule-header { margin-bottom: 1.5rem; }
.schedule-header h1 { font-size: 2rem; font-weight: 700; color: var(--text-color); }
.schedule-header-controls {
  display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin-top: 1rem;
}
@media (min-width: 768px) { .schedule-header-controls { flex-direction: row; } }
.schedule-nav-buttons {
  display: flex; align-items: center; background-color: var(--surface-color);
  padding: 0.25rem; border-radius: 0.5rem; border: 1px solid var(--border-color);
}
.schedule-nav-buttons button {
  padding: 0.5rem; border-radius: 0.375rem; color: var(--text-secondary-color);
  background: none; border: none; cursor: pointer;
}
.schedule-nav-buttons button:hover { background-color: var(--background-color); color: var(--text-color); }
.schedule-nav-buttons .today-btn { padding: 0.5rem 1rem; font-weight: 600; color: var(--text-color); }
.schedule-view-tabs {
  display: flex; background-color: var(--border-color); padding: 0.25rem; border-radius: 0.5rem;
}
.schedule-view-tabs button {
  padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; border-radius: 0.375rem;
  background-color: transparent; color: var(--text-secondary-color); border: none; cursor: pointer;
}
.schedule-view-tabs button.active {
  background-color: var(--surface-color); color: var(--text-color); box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* Daily Focus Card */
.daily-focus-card {
  background-color: var(--surface-color); padding: 1.5rem; border-radius: 0.5rem;
  border: 1px solid var(--border-color); margin-bottom: 2rem;
}
.daily-focus-card h2 { font-size: 1.5rem; font-weight: 700; color: var(--text-color); margin-bottom: 1rem; }
.focus-stats-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .focus-stats-grid { grid-template-columns: 1fr 1fr 1fr; } }
.focus-stat-item {
  background-color: var(--background-color); padding: 1rem; border-radius: 0.5rem;
  border: 1px solid var(--border-color);
}
.focus-stat-item span { display: block; font-size: 0.875rem; color: var(--text-secondary-color); margin-bottom: 0.5rem; }
.focus-stat-item strong { display: block; font-size: 1.5rem; font-weight: 700; color: var(--text-color); }
/* Daily Schedule Lists */
.daily-schedule-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1024px) { .daily-schedule-grid { grid-template-columns: 1fr 1fr; } }
.schedule-section-header {
  font-size: 1.25rem; font-weight: 600; color: var(--text-color);
  margin-bottom: 1rem; border-bottom: 2px solid var(--border-color); padding-bottom: 0.5rem;
}
.lunch-break-banner {
  margin: 1rem 0; padding: 1rem; background-color: var(--background-color);
  border-radius: 0.5rem; text-align: center; color: var(--text-secondary-color);
  border: 1px dashed var(--border-color);
}
/* Schedule Entries */
.schedule-entry {
  margin-bottom: 1rem; padding: 1rem; border-radius: 0.5rem;
  background-color: var(--surface-color); border: 1px solid var(--border-color);
  border-left-width: 4px; transition: transform 0.2s;
}
.schedule-entry:hover { transform: translateX(4px); }
.entry-header { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
.entry-time { font-weight: 600; color: var(--text-secondary-color); font-size: 0.875rem; }
.entry-type-badge {
  font-size: 0.75rem; padding: 0.1rem 0.5rem; border-radius: 999px;
  background-color: var(--background-color); color: var(--text-color); border: 1px solid var(--border-color);
}
.entry-title { font-size: 1.1rem; font-weight: 700; color: var(--text-color); margin: 0; }
.entry-details p { margin: 0.25rem 0; font-size: 0.875rem; color: var(--text-secondary-color); }
.entry-location { font-size: 0.75rem; font-style: italic; margin-top: 0.5rem; }
/* Weekly View */
.weekly-view {
  background-color: var(--surface-color); border-radius: 0.5rem; border: 1px solid var(--border-color);
  overflow-x: auto;
}
.weekly-view-grid { display: grid; }
.weekly-view-header {
  position: sticky; top: 0; z-index: 10; padding: 0.75rem 0.5rem; text-align: center;
  background-color: var(--surface-color, #1a1a1e); border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary-color); font-weight: 700; text-transform: uppercase; font-size: 0.75rem;
}
/* Today in the accent, not amber: one accent (trainer wave 6, TU-09). */
.weekly-view-header.today {
  background: rgba(var(--primary-color-rgb, 16, 185, 129), 0.12);
  color: var(--primary-text, var(--primary-color));
  border-bottom: 2px solid var(--primary-color);
}
.weekly-view-header .day-number {
  display: block; font-size: 1.25rem; font-weight: 800; margin-top: 2px;
}
.weekly-view-time-col {
  padding: 0.5rem; text-align: right; font-size: 0.75rem; font-weight: 600;
  color: var(--text-secondary-color); border-right: 1px solid var(--border-color);
  background-color: var(--surface-color);
}
.weekly-view-time-col.sticky-col { position: sticky; left: 0; z-index: 20; background-color: var(--surface-color); }
.weekly-view-cell {
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.06));
  border-right: 1px solid var(--border-color, rgba(255,255,255,0.06));
  transition: background-color 0.15s ease;
}
.weekly-view-cell.available { background-color: transparent; cursor: pointer; }
.weekly-view-cell.available:hover { background-color: rgba(245, 158, 11, 0.08); }
.weekly-view-cell.booked { background-color: rgba(239, 68, 68, 0.08); }
.weekly-view-cell.unavailable { background-color: rgba(0, 0, 0, 0.15); opacity: 0.6; }
.weekly-view-cell.selected { background-color: rgba(245, 158, 11, 0.2); z-index: 5; }
.weekly-appointment-block {
  padding: 0.35rem 0.5rem; border-radius: 8px; height: 100%; font-size: 0.75rem;
  background-color: var(--surface-color, #1f1f23); border: 1px solid var(--border-color); border-left-width: 4px;
  overflow: hidden; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.weekly-appointment-block:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.weekly-appointment-block h5 { margin: 0; font-weight: 700; color: var(--text-color); font-size: 0.8rem; }
.weekly-appointment-block p { margin: 1px 0 0 0; color: var(--text-secondary-color); font-size: var(--text-2xs, 0.75rem); }
.weekly-appointment-block .block-badge {
  display: inline-block; padding: 2px 6px; border-radius: 6px; margin-top: 4px;
  font-size: var(--text-2xs, 0.75rem); font-weight: 700; background-color: var(--background-color); color: var(--text-color);
}
/* Session Colors (Applied to entries/blocks) */
.session-type-assessment { border-left-color: #3b82f6; background-color: rgba(59, 130, 246, 0.1); }
.session-type-rehab { border-left-color: #10b981; background-color: rgba(16, 185, 129, 0.1); }
.session-type-virtual { border-left-color: #8b5cf6; background-color: rgba(139, 92, 246, 0.1); }
.session-type-hyrox { border-left-color: #ef4444; background-color: rgba(239, 68, 68, 0.1); }
.session-type-marathon { border-left-color: #f59e0b; background-color: rgba(245, 158, 11, 0.1); }
.session-type-unavailable { background-color: var(--border-color); color: var(--text-secondary-color); opacity: 0.7; }
/* Monthly View */
.monthly-view-container { background-color: var(--surface-color); border-radius: 0.5rem; border: 1px solid var(--border-color); }
.monthly-view-header-row { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border-color); }
.month-header-cell { padding: 0.75rem; text-align: center; font-weight: 600; color: var(--text-secondary-color); background-color: var(--background-color); }
.monthly-view-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.month-day-cell {
  min-height: 100px; padding: 0.5rem; border-bottom: 1px solid var(--border-color); border-right: 1px solid var(--border-color);
  cursor: pointer; background-color: var(--surface-color);
}
.month-day-cell:hover { background-color: var(--background-color); }
.month-day-cell.other-month { background-color: var(--background-color); color: var(--text-secondary-color); opacity: 0.5; }
.month-day-cell.today { background-color: var(--primary-color-translucent); }
.day-number { font-weight: 600; color: var(--text-color); }
.dot-badge { display: inline-block; padding: 2px 6px; background-color: var(--primary-fill, var(--primary-color)); color: var(--on-primary-color, #fff); border-radius: var(--radius-full, 9999px); font-size: var(--text-2xs, 0.75rem); }
/* --- Mobile Breakout overrides --- */
@media (max-width: 768px) {
  .weekly-view,
  .monthly-view-container {
    /* Break out of layout padding */
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    width: auto !important;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}
/* Availability Settings */
.availability-card { background-color: var(--surface-color); border-radius: 0.5rem; padding: 1.5rem; border: 1px solid var(--border-color); }
.availability-card h2 { color: var(--text-color); }
.availability-card p { color: var(--text-secondary-color); }
.availability-day-row {
  padding: 1rem; background-color: var(--background-color); border-radius: 0.5rem;
  margin-bottom: 1rem; border: 1px solid var(--border-color);
}
.availability-day-row .row-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.availability-day-row h3 { margin: 0; color: var(--text-color); font-size: 1.1rem; }
.availability-toggle { display: flex; align-items: center; gap: 1rem; }
.status-label { font-size: 0.9rem; font-weight: 600; }
.status-label.available { color: var(--success-color); }
.status-label.unavailable { color: var(--text-secondary-color); }
/* Toggle Switch CSS */
.switch { position: relative; display: inline-block; width: 48px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--border-color); transition: .4s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--primary-color); }
input:checked + .slider:before { transform: translateX(24px); }
.slots-container { display: flex; flex-direction: column; gap: 0.5rem; }
.time-slot-row { display: flex; align-items: center; gap: 0.5rem; }
.time-slot-row select {
  padding: 0.5rem; border-radius: 0.375rem; background-color: var(--surface-color);
  color: var(--text-color); border: 1px solid var(--border-color);
}
.btn-icon.remove-slot { color: var(--error-color); cursor: pointer; font-size: 1.2rem; }
.add-slot-btn { width: auto; margin-top: 0.5rem; }
.action-row { margin-top: 2rem; text-align: right; }
/* styles/views/_workout-view.css */
/* --- Workout Logger (Manual Log) --- */
.sets-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.set-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.set-number {
    font-weight: 500;
    color: var(--text-secondary-color);
    width: 80px;
}
.set-item input {
    padding: 0.65rem 0.75rem;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm, 8px);
    color: var(--text-color);
    caret-color: var(--caret-color, #ffffff);
    font-size: 1rem;
    line-height: 1.4;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.set-item input:focus {
    outline: none;
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 2px var(--input-focus-glow);
}
.set-item .input-reps {
    flex: 1 1 40%;
    min-width: 80px;
}
.set-item .input-weight {
    flex: 2 1 60%;
    min-width: 80px;
}
.input-anomaly {
    border-color: var(--error-color) !important;
    background-color: rgba(207, 102, 121, 0.1);
}
.input-anomaly:focus {
    box-shadow: 0 0 0 3px rgba(207, 102, 121, 0.3) !important;
}
/* --- AI Workout Planner (Non-Editable View) --- */
.workout-planner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.date-navigator {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ai-plan-text {
    background-color: var(--background-color);
    padding: 1rem;
    border-radius: 4px;
    font-family: inherit;
    line-height: 1.6;
    color: var(--text-secondary-color);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 400px;
    overflow-y: auto;
}
.ai-plan-text h3 {
    color: var(--secondary-color);
    font-size: 1.1rem;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}
.ai-plan-text p {
    margin-bottom: 0.5rem;
}
.ai-plan-text p.workout-step {
    color: var(--text-color);
    margin-bottom: 0.5rem;
}
.ai-plan-text ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 1.5em;
    list-style-position: outside;
}
.ai-plan-text li {
    margin-left: 0;
    padding-left: 0.5rem;
    margin-bottom: 0.15rem;
}
.ai-plan-text li.workout-exercise {
    list-style-type: none;
    margin-left: 1rem;
    color: var(--text-secondary-color);
}
.ai-plan-text strong {
    color: var(--text-color);
    font-weight: 600;
}
.ai-plan-text h3:first-child {
    margin-top: 0;
}
.ai-structured-plan {
    background-color: var(--background-color);
    padding: 0.125rem;
    border-radius: 10px;
    padding-bottom: 0.25rem;
}
.ai-structured-plan .subheading {
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0.25rem;
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.ai-plan-text+h4.subheading {
    padding-top: 0.25rem;
}
.exercise-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.exercise-item {
    background-color: var(--surface-color);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border-left: 3px solid var(--secondary-color);
}
.exercise-name {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}
.exercise-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.exercise-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 250px;
    overflow-y: auto;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 0 0 8px 8px;
    /* FIX: High z-index to float above other blocks */
    z-index: 999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: 2px;
}
.detail-chip {
    background-color: var(--background-color);
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    /* Pill shape */
    font-size: 0.8rem;
    color: var(--text-secondary-color);
    border: 1px solid var(--border-color);
}
.exercise-rationale {
    font-size: 0.85rem;
    color: var(--text-secondary-color);
    margin: 0.25rem 0 0 0;
    padding-left: 0.5rem;
    border-left: 2px solid var(--border-color);
}
.ai-recommendation-box {
    background-color: var(--background-color);
    padding: 1rem;
    border-radius: 8px;
    border-left: 3px solid var(--secondary-color);
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary-color);
    line-height: 1.5;
}
.ai-recommendation-box strong {
    color: var(--secondary-color);
    display: block;
    margin-bottom: 0.25rem;
}
/* --- User Workout Library --- */
.user-workout-library-card .card-content {
    max-height: 500px;
    overflow-y: auto;
    margin-bottom: 1.5rem;
    padding-right: 0.5rem;
}
.template-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.template-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--background-color);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
.template-list-item span {
    font-weight: 500;
    color: var(--text-color);
}
.exercise-name-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.exercise-name {
    margin-bottom: 0;
}
.btn-analyze-exercise {
    flex-shrink: 0;
    padding: 0.25rem;
    color: var(--text-secondary-color);
}
.btn-analyze-exercise:hover {
    color: var(--primary-color);
    background-color: var(--primary-color-translucent);
}
.btn-analyze-exercise svg {
    width: 18px;
    height: 18px;
}
/* --- Analytics Grid --- */
.workout-analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.analytics-stat-card {
    background-color: var(--background-color);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
}
.analytics-stat-card.span-2 {
    grid-column: 1 / -1;
}
.stat-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary-color);
    margin-bottom: 0.5rem;
    font-weight: 500;
}
.stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1.2;
}
.stat-unit {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-secondary-color);
}
.exercise-context-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.metric-box {
    background-color: var(--background-color);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
}
.metric-box span {
    font-size: 0.75rem;
    color: var(--text-secondary-color);
    display: block;
}
.metric-box strong {
    font-size: 1rem;
    color: var(--text-color);
}
/* ==========================================================================
   NEW WORKOUT BUILDER STYLES (Replacing "Trainer Editable Planner")
   ========================================================================== */
.workout-builder-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.template-header-input label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary-color);
    margin-bottom: 0.25rem;
}
.template-header-input input {
    width: 100%;
    font-size: 1.5rem;
    font-weight: 700;
    border: none;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    padding: 0.5rem 0;
    color: var(--text-color);
}
.template-header-input input:focus {
    outline: none;
    border-color: var(--primary-color);
}
.block-container {
    background-color: transparent;
    /* Seamless blend into the main card */
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: visible;
    box-shadow: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    margin-bottom: 1.25rem;
    position: relative;
}
.block-container:hover {
    border-color: var(--primary-color-translucent);
    background-color: rgba(var(--surface-rgb), 0.3);
}
/* --- Block Header --- */
.block-header {
    padding: 0.5rem 1.25rem;
    background-color: transparent;
    /* No double background */
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-radius: 16px 16px 0 0;
}
.block-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}
.btn-expand {
    background: none;
    border: none;
    color: var(--text-secondary-color);
    cursor: pointer;
    padding: 0;
    display: flex;
}
.block-title-wrapper {
    flex: 1;
    min-width: 0;
}
.input-block-title {
    background: transparent;
    border: none;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-color);
    caret-color: var(--caret-color, #ffffff);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 100%;
    padding: 0;
    margin-bottom: 0px;
    cursor: pointer;
}
.input-block-title:focus {
    outline: none;
    text-decoration: underline;
}
.block-meta-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 28px !important;
}
/* SuperSet Badge removed per user preference */
.badge-superset { display: none !important; }
.rounds-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-secondary-color);
}
.rounds-input-wrapper.is-superset {
    background-color: rgba(139, 92, 246, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(139, 92, 246, 0.1);
}
.rounds-input-wrapper svg {
    width: 12px;
    height: 12px;
}
.rounds-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}
.rounds-input-wrapper.is-superset .rounds-label {
    color: #7c3aed !important;
}
.rounds-input-wrapper.is-superset .input-rounds {
    color: #7c3aed !important;
    border-bottom: 2px solid #7c3aed !important;
    background-color: transparent !important;
    border-radius: 2px !important;
}
.input-rounds {
    width: 30px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    padding: 0;
    color: var(--text-color);
    caret-color: var(--caret-color, #ffffff);
}
.input-rounds:focus {
    outline: none;
    border-color: var(--primary-color);
}
.block-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.btn-superset-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    border-radius: 4px;
}
.btn-superset-toggle svg {
    width: 15px !important;
    height: 15px !important;
    stroke-width: 2.2px !important;
    color: #94a3b8 !important;
    transition: all 0.2s ease;
    transform: rotate(45deg); /* Align horizontal */
}
.btn-superset-toggle.active svg {
    color: #7c3aed !important;
    filter: drop-shadow(0 0 2px rgba(124, 58, 237, 0.3));
}
.btn-superset-toggle.active {
    background-color: rgba(139, 92, 246, 0.1);
    transform: scale(1.1);
}
.divider-vertical {
    width: 1px;
    height: 16px;
    background-color: var(--border-color);
    margin: 0 0.25rem;
}
.btn-icon {
    background: none;
    border: none;
    color: var(--text-secondary-color);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
}
.btn-icon:hover {
    background-color: var(--background-color);
    color: var(--text-color);
}
.btn-delete-block:hover {
    color: var(--error-color);
    background-color: rgba(207, 102, 121, 0.1);
}
.grab-handle {
    color: var(--border-color);
    cursor: grab;
    display: flex;
}
.grab-handle:hover {
    color: var(--text-secondary-color);
}
/* --- Block Content --- */
.block-content {
    padding: 0.5rem 1rem 1rem 1rem;
    background-color: var(--surface-color);
}
.group-container {
    padding-left: 1rem;
    margin-top: 0.5rem;
    border-left: 2px solid var(--border-color);
    transition: all 0.2s ease;
}
.group-container.superset-border {
    border-left-color: #a78bfa;
    /* Violet-400 */
}
/* --- Exercise Row --- */
.exercise-item-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0.65rem 0.75rem;
    background-color: var(--surface-color);
    border: 1px solid transparent;
    border-radius: 12px;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
    gap: 0.4rem;
    width: 100%;
    box-sizing: border-box;
}
.exercise-row-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
    min-height: 32px;
}
.exercise-item-row:hover {
    background-color: var(--background-color);
    border-color: var(--border-color);
}
.exercise-item-row.superset-exercise {
    background-color: rgba(139, 92, 246, 0.03);
    /* Very faint violet */
    border-color: rgba(139, 92, 246, 0.1);
}
/* --- Compact Exercise Row (AI View) --- */
.exercise-item-compact {
    display: flex;
    align-items: center;
    padding: 0.35rem 0.6rem;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 0.35rem;
    transition: all 0.2s ease;
    gap: 0.6rem;
    cursor: pointer;
}
.exercise-item-compact:hover {
    background-color: var(--background-color);
    border-color: var(--primary-color-translucent);
}
.exercise-item-compact.superset-exercise {
    background-color: rgba(139, 92, 246, 0.03);
    border-color: rgba(139, 92, 246, 0.2);
}
.exercise-item-compact.cardio-exercise {
    background-color: rgba(244, 63, 94, 0.03);
    border-color: rgba(244, 63, 94, 0.2);
}
.compact-thumbnail-container {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background-color: var(--background-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
}
.compact-thumbnail {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.compact-thumbnail-placeholder {
    color: var(--text-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.compact-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.compact-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.compact-summary {
    font-size: 0.75rem;
    color: var(--text-secondary-color);
    font-weight: 500;
    line-height: 1.2;
}
.compact-instructions {
    font-size: 0.75rem;
    color: var(--text-secondary-color);
    margin-top: 4px;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.compact-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
/* --- Compact Block Specifics --- */
.block-container.compact-block {
    padding: 0.125rem !important;
    margin-bottom: 0.4rem; /* Reduced from 0.75rem */
    /* Visible, not hidden: the exercise swap list hangs below its card, and clipping it to the
       block cut it off in any block of one or two exercises (2026-10-03). */
    overflow: visible;
}
.block-container.compact-block .block-header {
    margin-bottom: 0.25rem;
    padding: 0.25rem 0.5rem;
    align-items: flex-start; /* Ensure top alignment for grip/chev/title */
}
.block-container.compact-block .block-title-wrapper {
    gap: 0.25rem;
}
.block-container.compact-block .input-block-title {
    font-size: 0.85rem;
}
.block-container.compact-block .block-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 0.125rem;
}
.block-container.compact-block .rounds-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
}
.block-container.compact-block .input-rounds {
    width: 28px;
    height: 18px;
    font-size: 0.75rem;
    padding: 0 2px;
    text-align: center;
    -moz-appearance: textfield;
}
.block-container.compact-block .input-rounds::-webkit-outer-spin-button,
.block-container.compact-block .input-rounds::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.block-container.compact-block .compact-action {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    max-width: 36px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-secondary-color) !important;
    transition: all 0.2s ease;
    cursor: pointer;
}
.block-container.compact-block .compact-action:hover {
    color: var(--primary-color) !important;
    background: rgba(var(--primary-rgb), 0.1) !important;
    border-radius: 4px;
}
.block-container.compact-block .btn-superset-toggle.active {
    background-color: var(--secondary-color-translucent);
    border-color: var(--secondary-color) !important;
    color: var(--secondary-color);
}
.block-container.compact-block .btn-delete-block:hover {
    background-color: var(--error-color-translucent);
    border-color: var(--error-color) !important;
}
.block-container.compact-block .block-header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.block-container.compact-block .compact-grip {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}
.block-container.compact-block .compact-grip:hover {
    opacity: 1;
}
/* Compact Add Buttons */
.btn-add-exercise.compact-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    margin: 0.25rem auto 0;
    width: auto;
    min-width: 140px;
}
.btn-add-block.compact-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}
.compact-controls .btn-icon-small {
    background: none;
    border: none;
    color: var(--text-secondary-color);
    padding: 2px; /* Reduced from 4px */
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.compact-controls .btn-icon-small:hover {
    color: var(--error-color);
    background-color: rgba(207, 102, 121, 0.1);
}
.compact-controls .grab-handle {
    cursor: grab;
    color: var(--border-color);
    padding: 2px; /* Reduced from 4px */
    display: flex;
}
.compact-controls .grab-handle:hover {
    color: var(--text-secondary-color);
}
.exercise-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 200px;
    /* Grow, shrink, base 200px */
    min-width: 200px;
    /* Force wrap if < 200px */
}
.btn-type-toggle {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--surface-color);
    color: var(--text-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.btn-type-toggle svg {
    width: 16px;
    height: 16px;
}
.btn-type-toggle:hover {
    border-color: var(--text-secondary-color);
    color: var(--text-color);
}
.btn-type-toggle.is-cardio {
    background-color: rgba(244, 63, 94, 0.05);
    /* Rose-50 */
    color: #e11d48;
    /* Rose-600 */
    border-color: rgba(244, 63, 94, 0.2);
}
.input-exercise-name {
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-color);
    caret-color: var(--caret-color, #ffffff);
    background: transparent;
    border: none;
    width: 100%;
    padding: 0;
}
.input-exercise-name:focus {
    outline: none;
    text-decoration: underline;
}
.exercise-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    width: 100%;
}
.exercise-right .input-group:not(.input-group-narrow):not(.input-group-wide) {
    flex: 1.5 1 100px;
    /* Match alignment of wider inputs */
    min-width: 80px;
}
.input-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Default behavior for unspecified groups */
    flex: 1;
    min-width: 60px;
}
/* 2. Sets & Reps: Fixed, narrow width */
.input-group-narrow {
    flex: 0 0 65px !important;
    /* Increased from 45px to 65px */
    min-width: 65px;
}
/* 3. LBS / Weight: Flexible width to fit text like "Moderate dumbbells" */
.input-group-wide {
    /* Changed from flex: 3 to flex: 1.5 to reduce width dominance */
    flex: 1.5 1 100px !important;
    min-width: 100px;
    /* Reduced min-width slightly */
    max-width: 200px;
    /* Added max-width to prevent it from getting too huge */
}
/* 4. Input Alignment */
.input-group input {
    text-align: center;
    /* Center Sets & Reps numbers */
    padding: 0 0.25rem;
    /* Smaller padding */
    min-width: 0;
    text-overflow: ellipsis;
}
/* Left-align the Weight input so text like "Bodyweight" reads naturally */
.input-group-wide input {
    text-align: right;
}
.input-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-secondary-color);
    text-transform: uppercase;
    margin-bottom: 2px;
    width: 100%;
    /* Ensure label takes full width for alignment */
    text-align: right;
    /* Align labels to match inputs */
}
.input-val {
    width: 100%;
    /* Fill the group container */
    /* text-align is handled by specific group styles above */
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-color);
    caret-color: var(--caret-color, #ffffff);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--input-border);
    padding: 0 0.25rem;
}
.input-val:focus {
    outline: none;
    border-bottom-color: var(--primary-color);
}
.input-val:hover {
    border-bottom-color: var(--text-secondary-color);
}
.btn-add-block,
.btn-add-exercise {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-add-exercise {
    margin-top: 0.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary-color);
    font-size: 0.8rem;
    justify-content: flex-start;
    padding-left: 0;
}
.btn-add-exercise:hover {
    color: var(--primary-color);
}
.btn-add-exercise svg {
    width: 14px;
    height: 14px;
}
.btn-add-block {
    margin-top: 1rem;
    background-color: transparent;
    border: 2px dashed var(--border-color);
    color: var(--text-secondary-color);
    height: 50px;
}
.btn-add-block:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: var(--primary-color-translucent);
}
/* --- New Stats Row Styles --- */
.workout-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
    gap: 1rem;
    margin-bottom: 1.5rem;
}
/* Mobile: 2x2 Grid Layout for space efficiency (Up to Tablet/Large Phone) */
@media (max-width: 1199px) {
    .dashboard-view .workout-stats-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        margin-bottom: 1.25rem !important;
        padding: 0 !important;
        align-items: stretch !important;
    }
}
.stat-card {
    background-color: var(--surface-color);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
@media (max-width: 1199px) {
    .dashboard-view .workout-stats-row .stat-card {
        padding: 0.75rem 0.5rem !important;
        border-radius: 12px !important;
        min-height: 85px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* Focus card spans both columns */
    .dashboard-view .workout-stats-row .stat-card:nth-child(3) {
        grid-column: span 2 !important;
        min-height: 75px !important;
    }
}
.stat-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}
@media (max-width: 1199px) {
    .stat-card-header {
        margin-bottom: 4px !important;
        justify-content: center !important;
    }
}
.stat-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary-color);
    letter-spacing: 0.5px;
}
@media (max-width: 768px) {
    .stat-title {
        font-size: 0.65rem;
    }
}
.stat-icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stat-icon-circle svg {
    width: 16px;
    height: 16px;
}
/* Icon Colors */
.stat-icon-circle.green {
    background-color: rgba(16, 185, 129, 0.1);
    /* Emerald-50 */
    color: #10B981;
    /* Emerald-500 */
}
.stat-icon-circle.purple {
    background-color: rgba(139, 92, 246, 0.1);
    /* Violet-50 */
    color: #8B5CF6;
    /* Violet-500 */
}
.stat-icon-circle.blue {
    background-color: rgba(59, 130, 246, 0.1);
    /* Blue-50 */
    color: #3B82F6;
    /* Blue-500 */
}
.stat-value-container {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}
@media (max-width: 1199px) {
    .stat-value-container {
        justify-content: center !important;
    }
}
.stat-value-large {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1;
}
@media (max-width: 1199px) {
    .stat-value-large {
        font-size: 1.25rem !important;
        line-height: 1.1 !important;
    }
}
.stat-value-large.capitalize {
    text-transform: capitalize;
}
.stat-unit {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary-color);
}
/* --- LAYOUT OVERRIDES --- */
/* Force 50/50 split on desktop and wider screens (Laptop/Desktop) */
@media (min-width: 992px) {

    /* Left Column: Workout Planner (50%) */
    .workout-view .grid-item.workout-planner {
        grid-column: 1 / 7 !important;
        min-width: 0;
        /* Prevents 1fr expansion from large content */
    }

    /* Right Column: Workout Logger (50%) */
    .workout-view .grid-item.workout-logger {
        grid-column: 7 / 13 !important;
        display: flex !important;
        /* Ensure it is visible */
        min-width: 0;
        /* Prevents 1fr expansion */
    }

    /* Top Row: Analytics (Full Width) */
    .workout-view .grid-item.workout-analytics {
        grid-column: 1 / 13 !important;
    }
}
/* Radical padding reduction for AI Workout Planner card */
.ai-workout-planner-card {
    padding: 0.125rem !important; /* Even smaller desktop fallback */
}
.ai-workout-planner-card .workout-builder-container {
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    gap: 0.5rem; /* Tighter gap between components */
}
/* Mobile adjustments - Ultra Compact */
@media (max-width: 768px) {
    .ai-workout-planner-card {
        padding: 0 !important;
    }
    
    .ai-workout-planner-card .workout-builder-container {
        margin-left: -0.375rem;
        margin-right: -0.375rem;
        gap: 0.4rem; /* Ultra tight vertical gap */
    }

    .desktop-only {
        display: none;
    }

    .exercise-item-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.25rem;
        padding: 0.5rem 0.35rem;
        height: -moz-max-content !important;
        height: max-content !important;
        margin-bottom: 0.4rem;
    }

    .exercise-row-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 0.25rem;
    }

    .exercise-left {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 0.25rem;
        flex: 1 1 auto;
    }

    .exercise-right {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0.25rem;
        margin-top: 0.25rem;
    }

    .compact-controls {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.25rem;
        flex-shrink: 0;
    }

    .exercise-left {
        min-width: 0;
        flex: 1 1 auto !important;
        height: -moz-max-content !important;
        height: max-content !important;
        max-height: -moz-max-content !important;
        max-height: max-content !important;
        gap: 0.25rem;
        /* Tight space between grab handle, chevrons, and text */
        align-items: center;
    }

    /* Completely hide the purely visual type icon (dumbbell/flame) on mobile to save ~30px */
    .exercise-left .btn-type-toggle {
        display: none !important;
    }

    /* Remove padding from the expand button to save ~8px */
    .exercise-left .btn-expand-exercise {
        padding: 0 !important;
        margin: 0 !important;
    }

    .grab-handle {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Reduce icon block size to reclaim text area */
    .exercise-left .btn-type-toggle {
        width: 24px;
        height: 24px;
        border-radius: 4px;
    }

    .exercise-left .btn-type-toggle svg {
        width: 14px;
        height: 14px;
    }

    .grab-handle svg {
        width: 16px;
        height: 16px;
    }

    .exercise-right {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100%;
        justify-content: space-between;
        gap: 0.25rem;
        flex: 1 1 auto !important;
        height: -moz-max-content !important;
        height: max-content !important;
        max-height: -moz-max-content !important;
        max-height: max-content !important;
        margin-top: 0.25rem;
        /* Give a tiny bit of breathing room from the name */
    }

    .input-group-wide {
        flex: 1 1 auto !important;
        min-width: 70px;
        max-width: none;
    }

    .input-group-narrow {
        flex: 0 0 60px !important;
        min-width: 60px;
    }

    .input-label {
        text-align: center;
        width: 100%;
        font-size: 0.65rem;
    }

    /* Aggressively remove nested padding from containers to reclaim left edge */
    .block-header {
        padding: 0.75rem 0.5rem !important;
        /* Push block title closer to the edge */
    }

    .block-content {
        padding: 0.25rem 0 0.5rem 0 !important;
        /* Total removal of L/R padding */
    }

    .group-container {
        padding-left: 0.25rem !important;
        /* Minimal space for the visual border line */
        margin-left: 0.25rem !important;
        /* Align border near to the card edge */
        margin-top: 0.25rem;
        border-left-width: 2px !important;
    }

    /* Prevent workout blocks from stretching in flex parents */
    .workout-day-block,
    .block-wrapper {
        flex: 0 0 auto;
        height: auto;
    }
}
@media (max-width: 1199px) {
    .block-container {
        overflow: visible;
        /* Ensure it stays visible on mobile too */
    }
}
.exercise-expanded-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding: 1rem;
    background-color: var(--surface-color);
    border-top: 1px solid var(--border-color);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
.exercise-video-column {
    display: flex;
    flex-direction: column;
}
.exercise-info-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.exercise-rationale-section {
    background-color: var(--background-color);
    padding: 0.75rem;
    border-radius: 8px;
    border-left: 3px solid var(--secondary-color);
}
.exercise-rationale-section h5 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    color: var(--text-secondary-color);
}
.exercise-rationale-section p {
    margin: 0.35rem 0 0 0;
    font-size: 0.8rem;
    color: var(--text-secondary-color);
    line-height: 1.4;
}
.exercise-history-section {
    flex-grow: 1;
    background-color: var(--background-color);
    border-radius: 8px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.8rem;
}
.exercise-history-section small {
    font-size: 0.75rem;
    color: var(--text-secondary-color);
    line-height: 1.4;
}
.history-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-color);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.history-header svg {
    width: 14px;
    height: 14px;
}
.history-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 150px;
    overflow-y: auto;
}
.history-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-color);
}
.history-date {
    color: var(--text-secondary-color);
}
.history-summary {
    font-weight: 500;
}
/* Mobile Stack */
@media (max-width: 1199px) {
    .exercise-expanded-details {
        grid-template-columns: 1fr;
    }
}
/* --- Workout Logger (Manual Log) --- */
.sets-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
/* ... (rest of the file remains unchanged) ... */
.set-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.set-number {
    font-weight: 500;
    color: var(--text-secondary-color);
    width: 80px;
}
.set-item input {
    padding: 0.65rem 0.75rem;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm, 8px);
    color: var(--text-color);
    caret-color: var(--caret-color, #ffffff);
    font-size: 0.9rem;
    line-height: 1.4;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.set-item input:focus {
    outline: none;
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 2px var(--input-focus-glow);
}
.set-item .input-reps {
    flex: 1 1 40%;
    min-width: 80px;
}
.set-item .input-weight {
    flex: 2 1 60%;
    min-width: 80px;
}
.input-anomaly {
    border-color: var(--error-color) !important;
    background-color: rgba(207, 102, 121, 0.1);
}
.input-anomaly:focus {
    box-shadow: 0 0 0 3px rgba(207, 102, 121, 0.3) !important;
}
/* --- AI Workout Planner (Non-Editable View) --- */
.workout-planner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.date-navigator {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ai-plan-text {
    background-color: var(--background-color);
    padding: 1rem;
    border-radius: 4px;
    font-family: inherit;
    line-height: 1.6;
    color: var(--text-secondary-color);
    white-space: pre-wrap;
    word-break: break-word;
    /* REMOVED MAX-HEIGHT and OVERFLOW-Y to allow expansion */
}
.ai-plan-text h3 {
    color: var(--secondary-color);
    font-size: 1.1rem;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}
.ai-plan-text p {
    margin-bottom: 0.5rem;
}
.ai-plan-text p.workout-step {
    color: var(--text-color);
    margin-bottom: 0.5rem;
}
.ai-plan-text ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 1.5em;
    list-style-position: outside;
}
.ai-plan-text li {
    margin-left: 0;
    padding-left: 0.5rem;
    margin-bottom: 0.15rem;
}
.ai-plan-text li.workout-exercise {
    list-style-type: none;
    margin-left: 1rem;
    color: var(--text-secondary-color);
}
.ai-plan-text strong {
    color: var(--text-color);
    font-weight: 600;
}
.ai-plan-text h3:first-child {
    margin-top: 0;
}
.ai-structured-plan {
    background-color: var(--background-color);
    padding: 0.125rem;
    border-radius: 10px;
    padding-bottom: 0.25rem;
}
.ai-structured-plan .subheading {
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0.25rem;
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.ai-plan-text+h4.subheading {
    padding-top: 0.25rem;
}
.exercise-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.exercise-item {
    background-color: var(--surface-color);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border-left: 3px solid var(--secondary-color);
}
.exercise-name {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}
.exercise-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.exercise-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 250px;
    overflow-y: auto;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 0 0 8px 8px;
    /* FIX: High z-index to float above other blocks */
    z-index: 999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: 2px;
}
.detail-chip {
    background-color: var(--background-color);
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    /* Pill shape */
    font-size: 0.75rem;
    color: var(--text-secondary-color);
    border: 1px solid var(--border-color);
}
.exercise-rationale {
    font-size: 0.8rem;
    color: var(--text-secondary-color);
    margin: 0.25rem 0 0 0;
    padding-left: 0.5rem;
    border-left: 2px solid var(--border-color);
}
.ai-recommendation-box {
    background-color: var(--background-color);
    padding: 1rem;
    border-radius: 8px;
    border-left: 3px solid var(--secondary-color);
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary-color);
    line-height: 1.5;
}
.ai-recommendation-box strong {
    color: var(--secondary-color);
    display: block;
    margin-bottom: 0.25rem;
}
/* --- User Workout Library --- */
.user-workout-library-card .card-content {
    max-height: 500px;
    overflow-y: auto;
    margin-bottom: 1.5rem;
    padding-right: 0.5rem;
}
.template-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.template-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--background-color);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
.template-list-item span {
    font-weight: 500;
    color: var(--text-color);
}
.exercise-name-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.exercise-name {
    margin-bottom: 0;
}
.btn-analyze-exercise {
    flex-shrink: 0;
    padding: 0.25rem;
    color: var(--text-secondary-color);
}
.btn-analyze-exercise:hover {
    color: var(--primary-color);
    background-color: var(--primary-color-translucent);
}
.btn-analyze-exercise svg {
    width: 18px;
    height: 18px;
}
/* --- Analytics Grid --- */
.workout-analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.analytics-stat-card {
    background-color: var(--background-color);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
}
.analytics-stat-card.span-2 {
    grid-column: 1 / -1;
}
.stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary-color);
    margin-bottom: 0.5rem;
    font-weight: 500;
}
.stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1.2;
}
.stat-unit {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-secondary-color);
}
.exercise-context-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.metric-box {
    background-color: var(--background-color);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
}
.metric-box span {
    font-size: 0.7rem;
    color: var(--text-secondary-color);
    display: block;
}
.metric-box strong {
    font-size: 1rem;
    color: var(--text-color);
}
@media (max-width: 1199px) {

    .section-card-glow .card,
    .workout-planner .card,
    .training-schedule .card,
    .workout-analytics .card,
    .workout-logger .card {
        padding: 0.25rem;
    }
}
/* ==========================================================================
   MOBILE RESPONSIVE OVERRIDES — Workout Builder
   ========================================================================== */
@media (max-width: 1199px) {

    /* Tighter block containers */
    .block-container {
        margin-bottom: 0.5rem;
        border-radius: 8px;
    }

    /* Compact block headers — stack vertically to prevent ANY overlap on narrow screens */
    .block-header {
        padding: 0.5rem 0.75rem;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem;
    }

    .block-header-left {
        gap: 0.35rem;
        width: 100%;
    }

    .block-header-right {
        width: 100%;
        justify-content: flex-end;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border-color);
    }

    /* Reduce block content side padding aggressively */
    .block-content {
        padding: 0.25rem 0.25rem 0.4rem 0.25rem;
    }

    /* Eliminate the group left indent — use border only for hierarchy */
    .group-container {
        padding-left: 0.25rem;
        margin-top: 0.35rem;
    }

    /* Compact exercise rows - Ultra Tight */
    .exercise-item-row {
        padding: 0.25rem 0.35rem; /* Reduced from 0.4rem */
        gap: 0.25rem;
        border-radius: 6px;
        margin-bottom: 0.15rem; /* Radical margin reduction */
    }

    .exercise-left {
        gap: 0.4rem;
        min-width: 120px;
        flex: 1 1 120px;
    }

    /* Compact AI view exercise items - Ultra Tight */
    .exercise-item-compact {
        padding: 0.15rem 0.25rem; /* Significantly reduced */
        gap: 0.3rem;
        border-radius: 6px;
        margin-bottom: 0.15rem;
    }

    .compact-thumbnail-container {
        display: none !important;
    }

    /* Template header tighter */
    .template-header-input input {
        font-size: 0.9rem; /* Smaller title */
    }

    /* Reduce builder container gap */
    .workout-builder-container {
        gap: 0.75rem;
    }

    /* compact-block overrides - even tighter for mobile */
    .block-container.compact-block {
        padding: 0 !important;
    }

    .block-container.compact-block .block-header {
        padding: 0.2rem 0.25rem;
    }

    /* Superset toggle smaller on mobile */
    .btn-superset-toggle {
        padding: 0.25rem 0.4rem;
        font-size: 0.65rem;
    }
    .btn-superset-toggle svg {
        width: 24px !important;
        height: 24px !important;
        stroke-width: 2.5px !important;
    }

    /* Header action buttons tighter */
    .block-header-right {
        gap: 0.25rem;
    }

    /* Structured plan tighter padding */
    .ai-structured-plan {
        padding: 0;
    }

    .exercise-item {
        padding: 0.4rem 0.5rem;
    }

    /* Workout analytics grid tighter */
    .workout-analytics-grid {
        gap: 0.5rem;
    }

    .analytics-stat-card {
        padding: 0.5rem;
    }

    /* Exercise detail chips tighter */
    .exercise-details {
        gap: 0.25rem;
    }

    .detail-chip {
        padding: 0.15rem 0.4rem;
        font-size: 0.75rem;
    }

    /* Radically reduce indent inside workout blocks */
    .block-content {
        padding: 0.125rem 0.125rem 0.125rem 0.125rem !important;
    }

    .group-container {
        padding-left: 0.125rem !important;
        margin-top: 0.125rem !important;
    }
}
/* --- Post-Implementation Polish & Parity Fixes --- */
/* 1. Normalize Dropdown Typography */
.exercise-dropdown .dropdown-item {
    font-size: 0.7rem !important;
    padding: 0.5rem 0.75rem !important;
}
/* 2. Enforce Icon Sizing Consistency */
.compact-controls svg {
    width: 14px !important;
    height: 14px !important;
}
.exercise-dropdown .dropdown-item {
    font-size: 0.7rem !important;
}
/* Set Log Checkboxes */
.set-log-toggle {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 8px;
}
.set-log-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.set-checkbox-label {
    height: 20px;
    width: 20px;
    background-color: var(--bg-secondary, rgba(0, 0, 0, 0.03));
    border: 2px solid var(--border-color, rgba(0, 0, 0, 0.2));
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.set-log-toggle input:checked ~ .set-checkbox-label {
    background: var(--gold-gradient, linear-gradient(135deg, #FFD700, #B8860B));
    border-color: transparent;
}
.set-checkbox-label::after {
    content: "";
    display: none;
    width: 5px;
    height: 10px;
    border: solid white; /* Checkmark should be white on the gold background */
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}
.set-log-toggle input:checked ~ .set-checkbox-label::after {
    display: block;
}
.set-log-toggle:hover .set-checkbox-label {
    border-color: var(--primary-color);
    background-color: rgba(59, 130, 246, 0.05);
}
/* 3. Quick Log Summary Hero - Premium Light Theme */
.completion-hero {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}
.completion-hero h2 {
    color: #0f172a !important;
}
.completion-hero span {
    color: #475569 !important;
}
/* Ensure controls don't shift on mobile when expanded */
@media (max-width: 768px) {
    .exercise-item-row.is-expanded {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
}
/* ==========================================================================
   WORKOUT DETAIL MODAL (Wireframe Match)
   ========================================================================== */
.workout-detail-modal.modal-content {
    background-color: var(--surface-color);
    border-radius: 16px;
    padding: 0;
    overflow-y: auto;
    max-width: 500px;
    width: 100%;
}
@media (min-width: 768px) {
    .workout-detail-modal.modal-content {
        max-width: 800px;
    }
}
.wireframe-hero {
    padding: max(calc(env(safe-area-inset-top, 0px) + 1rem), 1.5rem) 1.5rem 0 1.5rem;
    display: flex;
    flex-direction: column;
}
.wireframe-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.wireframe-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-color);
    margin: 0;
}
.wireframe-close {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    margin-top: -4px;
    margin-right: -4px;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wireframe-close:hover {
    background: var(--surface-color);
    color: var(--text-color);
    border-color: var(--text-color);
}
.wireframe-subtitle {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wireframe-date {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0;
}
.wireframe-source {
    font-size: 0.85rem;
    color: #9ca3af;
    margin: 0;
}
.wireframe-source-badge {
    display: inline-block;
    background-color: #f3f4f6;
    color: #6b7280;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    margin-left: 8px;
    font-weight: 500;
}
.wireframe-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.wireframe-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.wireframe-stat-val {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1;
}
.wireframe-stat-val small {
    font-size: 1rem;
    font-weight: 600;
    margin-left: 2px;
}
.wireframe-stat-lbl {
    font-size: 0.85rem;
    font-weight: 400;
    color: #6b7280;
    margin-top: 0.5rem;
}
.wireframe-calories {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    color: #6b7280;
    margin-bottom: 1.5rem;
}
.wireframe-calories svg {
    color: #f97316;
}
.wireframe-map-container {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    margin-bottom: 1rem;
    background-color: #2d2d2d;
}
.wireframe-map-legend {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 2rem;
}
.wireframe-map-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.legend-dot.start {
    background-color: #10b981;
}
.legend-dot.finish {
    background-color: #ef4444;
}
/* Add padding to the rest of the modal content since we stripped it from .modal-content */
.workout-detail-content-inner {
    padding: 0 1.5rem 1.5rem 1.5rem;
}
/* Hide Mapbox UI pill / watermark */
.workout-detail-modal .mapboxgl-ctrl-bottom-right,
.workout-detail-modal .mapboxgl-ctrl-bottom-left {
    display: none !important;
}
/* Premium Workout Recap Stylings */
.recap-hero-card {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    margin: 1rem 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.recap-stats-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    text-align: center;
}
.recap-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.recap-stat-val {
    font-size: clamp(1.4rem, 1.8rem, 2.2rem);
    font-weight: 800;
    color: var(--text-color);
    line-height: 1.1;
}
.recap-stat-val small {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary-color);
    margin-left: 2px;
}
.recap-stat-lbl {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary-color);
    margin-top: 6px;
}
/* Splits Table enhancements */
.recap-splits-card {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1rem;
}
.recap-split-header {
    display: grid;
    grid-template-columns: 0.8fr 2fr 2fr 1fr;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    margin-bottom: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary-color);
}
.recap-split-row {
    display: grid;
    grid-template-columns: 0.8fr 2fr 2fr 1fr;
    padding: 8px 4px;
    font-size: 0.85rem;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,0.02);
}
[data-theme='dark'] .recap-split-row {
    border-bottom: 1px solid rgba(255,255,255,0.02);
}
.recap-split-row:last-child {
    border-bottom: none;
}
.recap-split-row.is-fastest {
    background: rgba(16, 185, 129, 0.04);
    border-radius: 6px;
}
.recap-split-row.is-slowest {
    background: rgba(239, 68, 68, 0.04);
    border-radius: 6px;
}
.pace-bar-container {
    display: flex;
    align-items: center;
    width: 85%;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
}
/* Effort Telemetry Card styling */
.recap-telemetry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 1rem;
}
@media (max-width: 600px) {
    .recap-telemetry-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.recap-telemetry-card {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}
/* Tomorrow's Plan Impact Box styling */
.plan-impact-banner {
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.plan-impact-banner.high-strain {
    background-color: rgba(249, 115, 22, 0.06);
    border: 1px solid rgba(249, 115, 22, 0.15);
}
.plan-impact-banner.recovery-strain {
    background-color: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.15);
}
/* styles/components/_habits.css */
.habit-card {
    position: relative;
    background: var(--surface-card-color);
    border: 1px solid var(--border-color);
    border-radius: 1.25rem;
    padding: 1.25rem;
    overflow: hidden;
}
.habit-glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.habit-progress-ring {
    position: relative;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.habit-progress-ring circle {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.habit-progress-ring .ring-bg {
    stroke: var(--border-color);
}
.habit-progress-ring .ring-progress {
    stroke: var(--primary-color);
}
.habit-progress-ring.completed .ring-progress {
    stroke: var(--success-color);
}
.habit-progress-ring .check-icon {
    position: absolute;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: var(--success-color);
}
.habit-progress-ring.completed .check-icon {
    opacity: 1;
    transform: scale(1.1);
}
.habit-progress-ring.completed .plus-icon {
    opacity: 0;
    transform: scale(0.5);
}
.streak-flame {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(255, 149, 0, 0.1);
    color: #FF9500;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.8rem;
    animation: flame-pulse 2s infinite;
}
@keyframes flame-pulse {
    0% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 0.9; }
}
.hero-banner-habits {
    padding: 2rem;
    border-radius: 2rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, #6366f1 100%);
    color: white;
    box-shadow: 0 20px 40px -15px rgba(var(--primary-rgb), 0.4);
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}
.hero-banner-habits::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    pointer-events: none;
}
.habit-sparkline {
    width: 100px;
    height: 30px;
    opacity: 0.6;
}
.habits-today-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
}
@media (max-width: 768px) {
    .habits-today-grid {
        grid-template-columns: 1fr;
    }
}
/* List Item Layout */
.habit-list-item {
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.habit-list-item:last-child {
    border-bottom: none;
}
.habit-list-item h4 {
    letter-spacing: -0.01em;
}
/* Completion State */
.habit-list-item.completed h4 {
    opacity: 0.6;
    text-decoration: line-through;
    text-decoration-color: var(--success-color);
}
/* styles/components/_workout-sidebar.css */
.workout-sidebar {
  position: fixed;
  inset-inline-end: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  z-index: var(--z-nav, 100);
  width: min(24rem, 100vw); /* 384px but never wider than screen */
  max-width: 100vw;
  background-color: var(--surface-color);
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 20px rgba(0,0,0,0.1);
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}
.workout-sidebar.open {
  transform: translateX(0);
}
.workout-sidebar-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: calc(var(--z-nav, 100) - 1);
  backdrop-filter: blur(4px);
  transition: opacity 0.3s ease-in-out;
}
.workout-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding: 0.75rem 1.5rem;
  flex-shrink: 0;
}
.workout-sidebar-tabs {
  display: flex;
  gap: 0.5rem;
}
.workout-sidebar-tab-btn {
    flex: 1;
    padding: 0.75rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    text-align: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    letter-spacing: 0.01em;
}
.workout-sidebar-tab-btn:hover {
  color: var(--text-color);
}
.workout-sidebar-tab-btn.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}
.btn-close-sidebar {
  color: var(--text-secondary-color);
}
.btn-close-sidebar:hover {
  color: var(--text-color);
  background-color: var(--background-color);
}
.workout-sidebar-content {
    flex-grow: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px)) 1.5rem;
}
/* --- History Tab --- */
.sidebar-history-controls {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sidebar-history-controls .settings-tabs {
  margin-bottom: 0;
}
.sidebar-history-controls .settings-tab-btn {
  flex-grow: 1;
  font-size: 0.9rem;
}
/* --- Log Tab --- */
/* (Re-uses .form-group, .sets-list, etc. from forms.css and workout-view.css) */
.workout-sidebar-content .form-group {
  margin-bottom: 1rem;
}
.workout-sidebar-content .subheading {
  margin: 1.5rem 0 1rem 0;
  font-size: 0.8rem;
}
/* --- Responsive --- */
@media (min-width: 1200px) {
  /* We want the sidebar to behave like a drawer (overlay) even on desktop now */
  .workout-sidebar {
    position: fixed; /* Changed from static to fixed */
    right: 0;        /* Ensure it sticks to the right */
    top: 0;
    bottom: 0;
    width: 24rem;
    z-index: var(--z-nav, 100); /* Match mobile z-index */
    border-left: 1px solid var(--border-color);
    
    /* Keep the slide animation */
    transform: translateX(100%); 
  }
  
  .workout-sidebar.open {
    transform: translateX(0);
    box-shadow: -10px 0 20px rgba(0,0,0,0.05); /* Add shadow for depth */
  }

  /* Re-enable the overlay so clicking outside closes it */
  .workout-sidebar-overlay {
    display: block; /* Changed from none to block */
  }
  
  /* Ensure the close button inside the sidebar is visible on desktop now */
  .btn-close-sidebar {
    display: block; /* Changed from none to block */
  }
}
/* styles/components/_gamification.css */
/* --- Gamification Styling --- */
.gamification-view .card-header {
  margin-bottom: 0;
}
.gamification-view {
  display: flex;
  flex-direction: column;
}
.user-progress-summary {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.level-display {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid var(--primary-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.level-number {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
}
.level-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary-color);
  text-transform: uppercase;
}
.xp-bar-container {
  flex-grow: 1;
}
.xp-bar-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-secondary-color);
  margin-bottom: 0.25rem;
}
.xp-bar-wrapper {
  background-color: var(--background-color);
  border-radius: 8px;
  overflow: hidden;
  height: 12px;
}
.xp-bar {
  background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
  height: 100%;
  border-radius: 8px;
  transition: width 0.5s ease-in-out;
}
.streak-display {
  display: flex;
  gap: 1.5rem;
  margin-top: 1rem;
  padding: 1rem;
  background-color: var(--background-color);
  border-radius: 8px;
}
.streak-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
}
.streak-item svg {
  color: var(--primary-color);
  width: 24px;
  height: 24px;
}
.gamification-content {
  margin-top: 1.5rem;
}
.achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 1rem;
}
.achievement-badge {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background-color);
  border: 2px solid var(--border-color);
  filter: grayscale(80%);
  opacity: 0.6;
  transition: all 0.3s ease;
  cursor: help;
  /* Indicate tooltip */
}
.achievement-badge.unlocked {
  filter: grayscale(0%);
  opacity: 1;
  border-color: var(--secondary-color);
  box-shadow: 0 0 10px var(--secondary-color-translucent);
}
.achievement-badge .achievement-icon svg {
  width: 32px;
  height: 32px;
  color: var(--text-secondary-color);
}
.achievement-badge.unlocked .achievement-icon svg {
  color: var(--secondary-color);
}
.achievement-badge .achievement-lock {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  color: var(--text-color);
}
.achievement-badge.unlocked .achievement-lock {
  display: none;
}
.challenges-view {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.challenge-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--background-color);
  border-radius: 8px;
  border-left: 4px solid var(--primary-color);
  margin-bottom: 0.75rem;
}
.challenge-card.complete {
  border-left-color: var(--success-color);
}
.challenge-info p {
  font-size: 0.9rem;
  color: var(--text-secondary-color);
  margin: 0.25rem 0;
}
.challenge-info small {
  font-weight: bold;
  color: var(--secondary-color);
}
.challenge-action {
  min-width: 120px;
  text-align: right;
}
.challenge-progress span {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary-color);
  display: block;
  /* Ensure it takes full width */
  margin-bottom: 0.25rem;
}
.btn-claim {
  background-color: var(--success-color);
  color: #fff;
  /* Ensure text is readable */
  margin-top: 0.5rem;
  width: 100%;
  /* Make claim button full width */
}
.leaderboard {
  margin-top: 1rem;
}
.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.leaderboard-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
}
.leaderboard-item .rank {
  font-weight: bold;
  color: var(--text-secondary-color);
  width: 20px;
  text-align: right;
}
.leaderboard-item .name {
  flex-grow: 1;
}
.leaderboard-item .xp {
  font-weight: bold;
  color: var(--secondary-color);
}
.leaderboard-item.current-user {
  background-color: var(--primary-color-translucent);
  border-radius: 8px;
}
.leaderboard-item .friend-avatar {
  width: 32px;
  height: 32px;
  font-size: 0.9rem;
}
/* --- Premium Achievement Medallion Cards --- */
.achievement-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
@media (max-width: 640px) {
  .achievement-badge-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}
.achievement-badge-card {
  border-radius: 16px;
  padding: 1.15rem 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.achievement-badge-card:hover {
  transform: translateY(-3px);
}
.achievement-badge-card.is-unlocked {
  border-color: rgba(255, 255, 255, 0.2);
}
.achievement-badge-card.is-locked {
  opacity: 0.72;
}
.achievement-badge-card.is-locked:hover {
  opacity: 0.95;
}
.achievement-badge-medallion {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 0.75rem;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.achievement-badge-card:hover .achievement-badge-medallion {
  transform: scale(1.08);
}
.achievement-lock-pill {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: #18181b;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.achievement-badge-info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  flex: 1;
  margin-bottom: 0.75rem;
}
.achievement-badge-title {
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.achievement-badge-desc {
  font-size: var(--text-2xs);
  color: var(--text-muted, #a1a1aa);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.achievement-badge-footer {
  margin-top: auto;
  width: 100%;
  display: flex;
  justify-content: center;
}
.achievement-unlocked-tag {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 9999px;
  border: 1px solid transparent;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.achievement-xp-tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.25);
  padding: 3px 10px;
  border-radius: 9999px;
  letter-spacing: 0.02em;
}
/* Category Headers & Filter Row */
.achievement-filter-tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
  scrollbar-width: none;
}
.achievement-filter-tabs::-webkit-scrollbar {
  display: none;
}
.achievement-filter-tab {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted, #a1a1aa);
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.achievement-filter-tab:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}
.achievement-filter-tab.active {
  background: linear-gradient(135deg, var(--primary-color, #f97316), #ea580c);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(249, 115, 22, 0.3);
}
/* --- Challenges Modern Styling --- */
.challenges-view-container {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.community-challenges-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #064e3b 0%, #047857 50%, #0f766e 100%);
  border-radius: 20px;
  padding: 1.5rem;
  border: 1px solid rgba(16, 185, 129, 0.3);
  box-shadow: 0 10px 30px -10px rgba(16, 185, 129, 0.35);
}
.community-hero-glow {
  position: absolute;
  top: -50%;
  right: -20%;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.3) 0%, transparent 70%);
  pointer-events: none;
}
.community-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.community-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 4px 10px;
  border-radius: 9999px;
  width: -moz-fit-content;
  width: fit-content;
  color: #a7f3d0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.community-hero-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.02em;
}
.community-hero-subtitle {
  margin: 0 0 0.5rem 0;
  font-size: 0.85rem;
  color: #d1fae5;
  line-height: 1.4;
  max-width: 550px;
}
.community-browse-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: #065f46;
  border: none;
  padding: 9px 18px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  width: -moz-fit-content;
  width: fit-content;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
.community-browse-btn:hover {
  transform: translateY(-2px);
  background: #ecfdf5;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.challenges-filter-row {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}
.filter-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted, #a1a1aa);
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.filter-pill:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}
.filter-pill.active {
  background: #f97316;
  color: #ffffff;
  border-color: #f97316;
  box-shadow: 0 2px 10px rgba(249, 115, 22, 0.25);
}
.challenges-category-section {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.challenges-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.challenges-section-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-color, #ffffff);
}
.section-badge {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.04em;
}
.section-badge.monthly {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}
.section-badge.weekly {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}
.section-badge.daily {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.challenges-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
@media (max-width: 640px) {
  .challenges-cards-grid {
    grid-template-columns: 1fr;
  }
}
.challenge-modern-card {
  background: var(--surface-color, #18181b);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.challenge-modern-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.challenge-modern-card.is-active {
  border-color: rgba(249, 115, 22, 0.4);
  background: linear-gradient(145deg, var(--surface-color, #18181b), rgba(249, 115, 22, 0.03));
}
.challenge-modern-card.is-complete {
  border-color: rgba(16, 185, 129, 0.5);
  background: linear-gradient(145deg, var(--surface-color, #18181b), rgba(16, 185, 129, 0.06));
}
.challenge-modern-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.challenge-type-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}
.challenge-scope-tag {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted, #a1a1aa);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 7px;
  border-radius: 6px;
}
.challenge-xp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 9999px;
}
.challenge-modern-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}
.challenge-modern-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-color, #ffffff);
  line-height: 1.25;
}
.challenge-modern-desc {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted, #a1a1aa);
  line-height: 1.4;
}
.challenge-progress-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.challenge-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 700;
}
.challenge-progress-ratio {
  color: var(--text-color, #ffffff);
}
.challenge-progress-percent {
  color: #f97316;
}
.challenge-progress-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  overflow: hidden;
}
.challenge-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f97316 0%, #fbbf24 100%);
  border-radius: 9999px;
  transition: width 0.5s ease;
}
.challenge-modern-actions {
  margin-top: auto;
  padding-top: 0.25rem;
}
.btn-accept-challenge {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-color, #ffffff);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-accept-challenge:hover {
  background: #f97316;
  border-color: #f97316;
  color: #ffffff;
  transform: translateY(-1px);
}
.btn-claim-reward {
  width: 100%;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  animation: pulseClaim 2s infinite;
}
@keyframes pulseClaim {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}
.challenge-active-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fb923c;
  padding: 6px 10px;
  background: rgba(249, 115, 22, 0.08);
  border-radius: 8px;
  border: 1px solid rgba(249, 115, 22, 0.2);
}
.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f97316;
  animation: pulseDot 1.5s infinite;
}
@keyframes pulseDot {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.4); }
  100% { opacity: 1; transform: scale(1); }
}
/* --- Podium & Leaderboard Modern Styling --- */
.leaderboard-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.leaderboard-tabs-bar {
  display: flex;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 4px;
  border-radius: 14px;
}
.leaderboard-metric-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--text-muted, #a1a1aa);
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.leaderboard-metric-tab:hover {
  color: #ffffff;
}
.leaderboard-metric-tab.active {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.podium-showcase {
  padding: 1.25rem 0.5rem 0.5rem 0.5rem;
}
.podium-grid {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.85rem;
  max-width: 480px;
  margin: 0 auto;
}
.podium-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}
.podium-avatar-wrapper {
  position: relative;
  margin-bottom: 0.5rem;
}
.podium-crown {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 6px rgba(234, 179, 8, 0.6));
  animation: crownFloat 2s ease-in-out infinite alternate;
}
@keyframes crownFloat {
  from { transform: translateX(-50%) translateY(0); }
  to { transform: translateX(-50%) translateY(-3px); }
}
.podium-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--surface-color, #27272a);
  border: 2px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.2rem;
  color: #ffffff;
  overflow: hidden;
}
.podium-column.rank-1 .podium-avatar {
  width: 66px;
  height: 66px;
  border: 3px solid #eab308;
  box-shadow: 0 0 20px rgba(234, 179, 8, 0.4);
}
.podium-column.rank-2 .podium-avatar {
  border: 2.5px solid #cbd5e1;
  box-shadow: 0 0 16px rgba(203, 213, 225, 0.3);
}
.podium-column.rank-3 .podium-avatar {
  border: 2.5px solid #d97706;
  box-shadow: 0 0 16px rgba(217, 119, 6, 0.3);
}
.podium-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.podium-medal-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  font-size: 1rem;
  line-height: 1;
}
.podium-user-name {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-color, #ffffff);
  max-width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.podium-user-level {
  font-size: 0.68rem;
  color: var(--text-muted, #a1a1aa);
  font-weight: 600;
}
.podium-user-score {
  font-size: 0.82rem;
  font-weight: 900;
  color: var(--primary-color, #f97316);
  margin-bottom: 0.5rem;
}
.podium-pedestal {
  width: 100%;
  border-radius: 12px 12px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.podium-column.rank-1 .podium-pedestal {
  height: 90px;
  background: linear-gradient(180deg, rgba(234, 179, 8, 0.25) 0%, rgba(234, 179, 8, 0.05) 100%);
  border-color: rgba(234, 179, 8, 0.4);
}
.podium-column.rank-2 .podium-pedestal {
  height: 65px;
  background: linear-gradient(180deg, rgba(203, 213, 225, 0.2) 0%, rgba(203, 213, 225, 0.04) 100%);
  border-color: rgba(203, 213, 225, 0.35);
}
.podium-column.rank-3 .podium-pedestal {
  height: 48px;
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.2) 0%, rgba(217, 119, 6, 0.04) 100%);
  border-color: rgba(217, 119, 6, 0.35);
}
.pedestal-number {
  font-size: 1.5rem;
  font-weight: 900;
  opacity: 0.4;
  color: #ffffff;
}
.leaderboard-list-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.leaderboard-list-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted, #a1a1aa);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 0.75rem;
}
.leaderboard-list-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.leaderboard-row-card {
  background: var(--surface-color, #18181b);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  transition: all 0.2s ease;
}
.leaderboard-row-card:hover {
  transform: translateX(2px);
  border-color: rgba(255, 255, 255, 0.16);
}
.leaderboard-row-card.is-self {
  background: linear-gradient(145deg, var(--surface-color, #18181b), rgba(249, 115, 22, 0.06));
  border-color: rgba(249, 115, 22, 0.4);
}
.row-rank-badge {
  width: 24px;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-muted, #a1a1aa);
  text-align: center;
}
.row-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: #ffffff;
  overflow: hidden;
  flex-shrink: 0;
}
.row-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.row-user-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.row-user-title {
  display: flex;
  align-items: center;
  gap: 6px;
}
.row-name {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-color, #ffffff);
}
.self-tag {
  font-size: 0.62rem;
  font-weight: 800;
  background: #f97316;
  color: #ffffff;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.03em;
}
.row-user-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}
.level-chip {
  font-size: 0.7rem;
  color: var(--text-muted, #a1a1aa);
}
.streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #f97316;
  background: rgba(249, 115, 22, 0.1);
  padding: 1px 5px;
  border-radius: 4px;
}
.row-score {
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--primary-color, #f97316);
  text-align: right;
  white-space: nowrap;
}
.leaderboard-social-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.social-card-content {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.social-icon-bubble {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.social-card-text h4 {
  margin: 0 0 0.25rem 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-color, #ffffff);
}
.social-card-text p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted, #a1a1aa);
  line-height: 1.35;
}
.social-card-actions {
  display: flex;
  gap: 0.75rem;
}
.btn-share-invite {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #f97316;
  border: none;
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-share-invite:hover {
  background: #ea580c;
  transform: translateY(-1px);
}
.btn-browse-social {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-color, #ffffff);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-browse-social:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
/* --- Achievement Toast Notification --- */
.achievement-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--surface-color);
  color: var(--text-color);
  padding: 1rem 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--secondary-color);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: var(--z-toast, 2000);
  animation: slideInUp 0.5s ease forwards;
}
@keyframes slideInUp {
  from {
    transform: translate(-50%, 100px);
    opacity: 0;
  }

  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}
.toast-icon {
  color: var(--secondary-color);
  flex-shrink: 0;
}
.toast-icon svg {
  width: 28px;
  height: 28px;
}
.toast-content strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}
.toast-content p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary-color);
}
.toast-close {
  background: none;
  border: none;
  color: var(--text-secondary-color);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0 0.5rem;
  margin-left: 1rem;
}
.nutrition-streak-mini {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.mini-streak-info {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.mini-streak-info strong {
  font-size: 1.1rem;
  color: var(--text-color);
}
.mini-streak-info span {
  font-size: 0.75rem;
  color: var(--text-secondary-color);
  text-transform: uppercase;
  font-weight: 500;
}
/* UI Enhancements (glassmorphism, skeleton, overload, mobile) */
/* ============================================================
   Grit FIT UI Enhancements
   - Glassmorphism, skeleton loading, transitions, typography
   - Progressive overload suggestions, resume banner
   - Mobile responsive overrides
   ============================================================ */
/* Text on a photo (under a dark scrim) or on the accent fill stays white in both themes.
   --surface-color was used for it, which is #202124 in dark mode: unreadable (audit PT-08). */
:root {
    --on-image-color: #ffffff;
    --on-primary-color: #ffffff;
    /* Error as TEXT (the .btn-danger label): #ef4444 is 3.8:1 on white; red 700 is 6.5:1. */
    --error-text: #b91c1c;
}
/* White on the dark theme's #34d399 was 1.92:1 on every primary button (UX-03); this is 7.7:1. */
[data-theme='dark'] {
    --on-primary-color: #052e1f;
    /* Red 400 on the dark surface #202124: 5.8:1. */
    --error-text: #f87171;
}
/* --- Glassmorphism Cards --- */
[data-theme='dark'] .card {
    background: rgba(32, 33, 36, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
[data-theme='light'] .card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.card {
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
    transform: translateY(-1px);
}
/* --- Universal Card Title Hierarchy --- */
.glass-card-title,
.section-header__title,
.card-header h2,
.card-header h3,
.card-header h4 {
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    text-align: center !important;
    letter-spacing: -0.01em !important;
    color: var(--text-color) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
}
.section-label {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary-color);
    font-weight: 600;
}
/* --- History Item Transitions --- */
.history-item {
    transition: background-color 0.15s ease;
    border-radius: 8px;
}
.history-item:hover {
    background-color: var(--surface-color-hover);
}
/* --- Skeleton Loading --- */
@keyframes premium-shimmer {
    0% {
        background-position: -400px 0;
    }

    100% {
        background-position: 400px 0;
    }
}
.skeleton-shimmer {
    background-color: var(--surface-color);
    background-image: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0,
            rgba(255, 255, 255, 0.08) 40px,
            rgba(255, 255, 255, 0) 80px);
    background-size: 600px 100%;
    background-repeat: no-repeat;
    animation: premium-shimmer 1.5s infinite linear;
    border-radius: 4px;
}
[data-theme='light'] .skeleton-shimmer {
    background-color: #f1f5f9;
    background-image: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0,
            rgba(255, 255, 255, 0.6) 40px,
            rgba(255, 255, 255, 0) 80px);
}
.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
    border-radius: 4px;
    background-color: var(--surface-color);
}
/* --- Resume Workout Banner --- */
.resume-workout-banner {
    background: var(--primary-color);
    color: white;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    animation: fadeIn 0.3s ease-out;
}
.resume-workout-banner .banner-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
.resume-workout-banner button {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    border: none;
}
/* --- Overload Suggestion --- */
.exercise-instructions-bar {
    animation: fadeSlideIn 0.2s ease-out;
    font-size: 0.55rem;
    padding: 0.15rem 0.5rem;
    background-color: rgba(var(--primary-rgb), 0.08);
    color: var(--primary-color);
    border-radius: 4px;
    margin-top: 0.25rem;
    font-weight: 600;
    font-style: italic;
    line-height: 1.2;
}
.overload-suggestion {
    font-size: 0.8125rem; /* 13px - mobile minimum for secondary labels */
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 2px;
    font-weight: 600;
}
.overload-suggestion.increase {
    color: #10B981;
    background: rgba(16, 185, 129, 0.1);
}
.overload-suggestion.maintain {
    color: #FBBF24;
    background: rgba(251, 191, 36, 0.1);
}
.overload-suggestion.deload {
    color: #EF4444;
    background: rgba(239, 68, 68, 0.1);
}
/* --- Last Weight Hint --- */
.last-weight-hint {
    font-size: 0.75rem; /* 12px minimum for hint text */
    color: var(--text-secondary-color);
    margin-top: 2px;
    opacity: 0.7;
}
/* --- PR Badge --- */
.pr-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #1a1a1a;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
@keyframes prCelebrate {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}
/* --- Exercise Instructions Bar --- */
@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.compact-instructions {
    font-size: 0.55rem;
    color: var(--text-secondary-color);
    margin-top: 2px;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* --- Strength Completion Modal --- */
.strength-completion-modal .stat-card {
    text-align: center;
    padding: 1rem;
    background: var(--surface-color);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
.strength-completion-modal .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}
.strength-completion-modal .stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* --- Micro-interactions --- */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}
/* --- Touch Targets (Mobile) --- */
@media (max-width: 768px) {
    .input-val {
        min-height: 44px;
    }

    .btn-icon {
        min-width: 44px;
        min-height: 44px;
    }

    .card:hover {
        transform: none;
    }
}
/* --- Mobile Responsive Overrides --- */
@media (max-width: 480px) {

    /* WorkoutLogger set-row: stack on very small screens */
    .set-row {
        grid-template-columns: 30px 1fr 1fr 50px !important;
        gap: 0.25rem !important;
        padding: 0.35rem !important;
    }

    .set-row input {
        font-size: 0.85rem;
        padding: 0.35rem 0.5rem;
    }

    /* Schedule calendar: tighter spacing */
    .schedule-overview-calendar {
        gap: 2px !important;
    }

    /* Resume banner: stack on mobile */
    .resume-workout-banner {
        flex-direction: column;
        text-align: center;
    }

    /* Progressive overload table: smaller text */
    .card table {
        font-size: 0.8rem;
    }

    .card table th,
    .card table td {
        padding: 0.5rem 0.35rem;
    }
}
@media (max-width: 360px) {

    /* Very small screens: further compact set-row */
    .set-row {
        grid-template-columns: 24px 1fr 1fr 44px !important;
    }
}
/* Toast Animations */
@keyframes toastFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* --- View Transitions & Fade-in Reveal --- */
/* Fill "backwards", never "both" (trainer wave 6, TU-03): a forwards fill kept
   transform: translateY(0) on the view after the animation, and any transform makes the element
   the containing block for position: fixed children. Every un-portaled overlay inside a view
   (coach directives, the client workout drawer, the batch bar) then scrolled with the content and
   sat thousands of pixels off-screen. Backwards still holds the "from" frame through any delay;
   once the animation ends the view has no transform and fixed means the viewport again. */
.dashboard-view,
.mobile-view-content {
    animation: dashboardFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
@keyframes dashboardFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Prevent layout jump when header or main content renders */
.main-content {
    transition: opacity 0.3s ease;
}
/* ============================================================
   AI Prompt Bar & Voice Dictation Styles
   ============================================================ */
.ai-prompt-bar {
    display: flex;
    align-items: flex-end;
    padding: 0.625rem 0.875rem;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    gap: 0.5rem;
    position: relative;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    width: 100%;
}
.ai-prompt-bar:focus-within {
    border-color: rgba(var(--primary-color-rgb), 0.5);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.15);
}
.ai-prompt-bar--recording {
    border-color: rgba(239, 110, 110, 0.4) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1) !important;
}
.ai-prompt-textarea {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    color: var(--text-color);
    font-size: 16px; /* iOS zooms into anything smaller on focus (WK-42) */
    line-height: 1.4;
    padding: 0;
    margin: 0;
    font-family: inherit;
    min-height: 20px;
    max-height: 120px;
    vertical-align: bottom;
}
.ai-prompt-textarea::-moz-placeholder {
    color: var(--text-secondary-color);
    opacity: 0.5;
}
.ai-prompt-textarea::placeholder {
    color: var(--text-secondary-color);
    opacity: 0.5;
}
.ai-prompt-mic-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary-color);
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}
.ai-prompt-mic-btn:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-color);
}
.ai-prompt-mic-btn.recording {
    color: #ef4444 !important;
    background-color: rgba(239, 68, 68, 0.12) !important;
}
.ai-prompt-mic-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    border: 1.5px solid #ef4444;
    opacity: 0;
    pointer-events: none;
}
.ai-prompt-mic-btn.recording .ai-prompt-mic-glow {
    opacity: 0.4;
}
@media (prefers-reduced-motion: no-preference) {
    @keyframes micPulse {
        0% { transform: scale(1); opacity: 0.5; }
        50% { transform: scale(1.3); opacity: 0; }
        100% { transform: scale(1); opacity: 0.5; }
    }
    .ai-prompt-mic-btn.recording .ai-prompt-mic-glow {
        animation: micPulse 1.8s infinite ease-out;
    }
}
.ai-prompt-interim-preview {
    font-size: 0.75rem;
    color: var(--text-secondary-color);
    opacity: 0.75;
    font-style: italic;
    padding: 2px 0.5rem;
    display: flex;
    align-items: center;
    animation: fadeIn 0.2s ease-out;
}
.ai-prompt-interim-text {
    color: var(--text-color);
    font-weight: 500;
}
.ai-prompt-chip {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    color: var(--text-secondary-color);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: var(--text-2xs);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}
.ai-prompt-chip:hover {
    background-color: rgba(var(--primary-color-rgb), 0.08);
    border-color: rgba(var(--primary-color-rgb), 0.3);
    color: var(--primary-color);
}
/* --- Verification Badges --- */
.gf-nutrition-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}
.gf-nutrition-badge--verified {
    background: rgba(16, 185, 129, 0.1);
    color: var(--primary-color);
    border: 1px solid rgba(16, 185, 129, 0.2);
}
.gf-nutrition-badge--ai {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.2);
}
.gf-nutrition-badge--global {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
    border: 1px solid rgba(249, 115, 22, 0.2);
}
/* --- Phase 3 Visual Excellence & Micro-Animations --- */
@keyframes checkmarkBounce {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(56, 189, 248, 0.2); }
    50% { box-shadow: 0 0 25px rgba(56, 189, 248, 0.45); }
}
@keyframes floatCard {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
.hover-lift {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover {
    transform: translateY(-2px);
}
.btn-glow {
    animation: pulseGlow 3s infinite ease-in-out;
}
.glass-card {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
/* --- Desktop Training View: 12-Column Schedule & 50/50 Split --- */
@media (min-width: 1200px) {
    .dashboard-view .desktop-grid-layout > .grid-item.training-schedule,
    .grid-item.training-schedule {
        -moz-column-span: all !important;
             column-span: all !important;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        display: block !important;
        margin-bottom: 1.25rem !important;
    }

    .dashboard-view .desktop-grid-layout > .grid-item.workout-planner,
    .grid-item.workout-planner {
        grid-column: 1 / 7 !important;
        width: 100% !important;
        -moz-column-break-inside: avoid !important;
             break-inside: avoid-column !important;
    }

    .dashboard-view .desktop-grid-layout > .grid-item.workout-logger,
    .grid-item.workout-logger {
        grid-column: 7 / 13 !important;
        width: 100% !important;
        -moz-column-break-inside: avoid !important;
             break-inside: avoid-column !important;
        display: flex !important;
    }
}
/* --- Dark Mode Browser Autofill Preservation & Auth Form Protection --- */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
    box-shadow: 0 0 0 1000px #18191c inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    color: #ffffff !important;
    -webkit-transition: background-color 50000s ease-in-out 0s;
    transition: background-color 50000s ease-in-out 0s;
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:active {
    box-shadow: 0 0 0 1000px #18191c inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    color: #ffffff !important;
    -webkit-transition: background-color 50000s ease-in-out 0s;
    transition: background-color 50000s ease-in-out 0s;
}
input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active,
textarea:autofill,
textarea:autofill:hover,
textarea:autofill:focus,
textarea:autofill:active {
    box-shadow: 0 0 0 1000px #18191c inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    color: #ffffff !important;
    transition: background-color 50000s ease-in-out 0s;
}
#modal-auth,
#modal-auth form,
#modal-auth input {
    color-scheme: dark !important;
}
#modal-auth input {
    background-color: #18191c !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
}
#modal-auth input:focus {
    background-color: #18191c !important;
    border-color: #fbbf24 !important;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.25) !important;
    outline: none !important;
}
/* --- Events Page Discovery & Sponsored Hero Banner --- */
.sponsored-hero-banner {
    position: relative;
    width: 100%;
    min-height: 220px;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px 28px;
    box-sizing: border-box;
    background: #111827;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
@media (max-width: 640px) {
    .sponsored-hero-banner {
        min-height: 180px;
        padding: 16px;
        border-radius: 14px;
    }
    .sponsored-hero-banner h2 {
        font-size: 1.35rem !important;
    }
}
/* --- Universal Refined Modal Close Button --- */
.modal-close-btn {
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    color: var(--text-secondary-color) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
.modal-close-btn:hover {
    background: var(--surface-color) !important;
    color: var(--text-color) !important;
    border-color: var(--text-color) !important;
}
/* --- AI Coach Chat Bubble Formatting --- */
.ai-chat-bubble-content,
.chat-message,
.chat-body,
.ai-chat-widget-window {
    -moz-user-select: text !important;
         user-select: text !important;
    -webkit-user-select: text !important;
}
.ai-chat-bubble-content p {
    margin: 0 0 0.5rem 0;
    line-height: 1.5;
    -moz-user-select: text !important;
         user-select: text !important;
    -webkit-user-select: text !important;
}
.ai-chat-bubble-content p:last-child {
    margin-bottom: 0;
}
.ai-chat-bubble-content ul {
    margin: 0.25rem 0 0.5rem 1.25rem;
    list-style-type: disc;
}
.ai-chat-bubble-content li {
    margin-bottom: 0.25rem;
    line-height: 1.4;
}
.ai-chat-bubble-content strong {
    font-weight: 700;
}
/* --- Muscle Training Map (MuscleHeatmap.tsx) ---
   Colour = hard sets a week against fixed landmarks (audit PH-05): one green ramp up to the
   10-20 growth range, amber above 20, red only past 30. Everything else is theme tokens, so
   light and dark both follow the app. */
.mm-root {
    --mm-low: color-mix(in srgb, var(--primary-color) 35%, transparent);
    --mm-maintenance: color-mix(in srgb, var(--primary-color) 65%, transparent);
    --mm-target: var(--primary-color);
    --mm-high: var(--gold-color);
    --mm-veryHigh: var(--error-color);
    --mm-none: color-mix(in srgb, var(--text-color) 12%, transparent);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--text-color);
}
.mm-silhouette {
    fill: color-mix(in srgb, var(--text-color) 8%, var(--surface-color));
    stroke: color-mix(in srgb, var(--text-color) 18%, transparent);
    stroke-width: 1px;
    stroke-linejoin: round;
}
.mm-muscle-base {
    fill: color-mix(in srgb, var(--text-color) 16%, var(--surface-color));
    stroke: color-mix(in srgb, var(--text-color) 22%, transparent);
    stroke-width: 1px;
    stroke-linejoin: round;
}
.mm-muscle {
    cursor: pointer;
    stroke: transparent;
    stroke-width: 2px;
    stroke-linejoin: round;
    transition: fill 0.2s ease, stroke 0.15s ease;
}
.mm-muscle.is-hovered { stroke: color-mix(in srgb, var(--text-color) 55%, transparent); }
.mm-muscle.is-selected { stroke: var(--text-color); stroke-width: 3px; }
.mm-fill-none { fill: transparent; }
.mm-fill-low { fill: var(--mm-low); }
.mm-fill-maintenance { fill: var(--mm-maintenance); }
.mm-fill-target { fill: var(--mm-target); }
.mm-fill-high { fill: var(--mm-high); }
.mm-fill-veryHigh { fill: var(--mm-veryHigh); }
.mm-bg-none { background: var(--mm-none); }
.mm-bg-low { background: var(--mm-low); }
.mm-bg-maintenance { background: var(--mm-maintenance); }
.mm-bg-target { background: var(--mm-target); }
.mm-bg-high { background: var(--mm-high); }
.mm-bg-veryHigh { background: var(--mm-veryHigh); }
.mm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
}
.mm-segmented {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border-radius: var(--radius-full, 9999px);
    background: color-mix(in srgb, var(--text-color) 6%, transparent);
    border: 1px solid var(--border-color);
}
.mm-segmented button {
    min-height: 36px;
    padding: 0 0.9rem;
    border: none;
    border-radius: var(--radius-full, 9999px);
    background: transparent;
    color: var(--text-secondary-color);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold, 600);
    cursor: pointer;
}
.mm-segmented button.is-active {
    background: var(--surface-color);
    color: var(--text-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.mm-summary {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--text-secondary-color);
}
.mm-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}
@media (min-width: 1024px) {
    .mm-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.mm-col { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.mm-map {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    aspect-ratio: 650 / 610;
}
.mm-map svg { width: 100%; height: 100%; display: block; }
.mm-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 0.85rem;
    font-size: var(--text-2xs);
    color: var(--text-color);
}
.mm-legend li { display: inline-flex; align-items: center; gap: 0.35rem; }
.mm-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-color) 15%, transparent);
}
.mm-muted { color: var(--text-secondary-color); }
.mm-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    flex: none;
    display: inline-block;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-color) 15%, transparent);
}
.mm-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 2px 8px;
    border-radius: var(--radius-full, 9999px);
    border: 1px solid var(--border-color);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold, 600);
    color: var(--text-color);
    white-space: nowrap;
}
.mm-detail {
    padding: 0.85rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--text-color) 3%, var(--surface-color));
    scroll-margin: 1rem;
}
.mm-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.mm-detail-title {
    margin: 0;
    font-size: var(--text-md);
    font-weight: var(--weight-bold, 700);
    color: var(--text-color);
}
.mm-detail-figure {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.5rem 0 0.4rem;
}
.mm-detail-figure strong { font-size: var(--text-xl); font-weight: var(--weight-bold, 700); }
.mm-detail-figure span { font-size: var(--text-xs); color: var(--text-secondary-color); }
.mm-detail-text {
    margin: 0.5rem 0 0;
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--text-color);
}
.mm-detail-text.mm-muted { color: var(--text-secondary-color); }
.mm-scale {
    position: relative;
    height: 16px;
    font-size: var(--text-2xs);
    color: var(--text-secondary-color);
}
.mm-scale span { position: absolute; top: 2px; transform: translateX(-50%); }
.mm-scale span:first-child { left: 0; transform: none; }
.mm-ex-list {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    border-top: 1px solid var(--border-color);
}
.mm-ex-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--text-xs);
}
.mm-ex-name { color: var(--text-color); min-width: 0; overflow-wrap: anywhere; }
.mm-ex-sets { color: var(--text-secondary-color); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mm-bar {
    display: block;
    position: relative;
    height: 8px;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--text-color) 8%, transparent);
    overflow: hidden;
}
/* The 10-20 growth range, so every bar carries its own reference. */
.mm-bar-band {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--primary-color) 55%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--primary-color) 55%, transparent);
}
.mm-bar-fill {
    display: block;
    position: relative;
    height: 100%;
    border-radius: 9999px;
    transition: width 0.3s ease;
}
.mm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.mm-row {
    width: 100%;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-color);
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.mm-row:hover { background: var(--surface-color-hover); }
.mm-row.is-selected { border-color: var(--border-color); background: var(--surface-color-hover); }
.mm-row:focus-visible, .mm-segmented button:focus-visible, .mm-link:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
.mm-row-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.mm-row-name { font-size: var(--text-sm); font-weight: var(--weight-semibold, 600); }
.mm-row-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: var(--text-2xs);
    color: var(--text-secondary-color);
    font-variant-numeric: tabular-nums;
}
.mm-link {
    align-self: flex-start;
    min-height: 36px;
    padding: 0 0.25rem;
    border: none;
    background: none;
    color: var(--primary-color);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold, 600);
    cursor: pointer;
}
.mm-balance {
    padding: 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}
.mm-balance-head {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold, 600);
    margin-bottom: 0.5rem;
}
.mm-balance-head .mm-muted { font-weight: var(--weight-normal, 400); }
.mm-balance-bar {
    height: 8px;
    border-radius: 9999px;
    overflow: hidden;
    background: var(--secondary-color);
}
.mm-balance-push { background: var(--primary-color); }
.mm-balance-bar .mm-balance-push { height: 100%; }
.mm-balance-pull { background: var(--secondary-color); }
.mm-balance-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    margin-top: 0.45rem;
    font-size: var(--text-2xs);
    color: var(--text-secondary-color);
}
.mm-balance-legend > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.mm-footnote {
    margin: 0;
    font-size: var(--text-2xs);
    line-height: 1.5;
    color: var(--text-secondary-color);
}
/* Sleep sounds player mobile modal safe-viewport handling */
@media (max-width: 768px) {
    .modal-content.sleep-player-modal {
        padding: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}
/* Universal suppression of floating AI widget during open modal dialogs */
body:has(.modal-overlay) .ai-widget-container,
body:has([role="dialog"]) .ai-widget-container,
body:has(.modal-overlay) .ai-chat-widget-window {
    display: none !important;
}
/* Modernized native select dropdowns for Android and mobile web */
select,
.form-group select,
.custom-select,
.select-dropdown {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: var(--input-bg, rgba(255, 255, 255, 0.05)) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px 16px !important;
    padding: 10px 42px 10px 14px !important;
    min-height: 44px !important;
    height: 44px !important;
    border: 1px solid var(--input-border, rgba(255, 255, 255, 0.12)) !important;
    border-radius: var(--radius-md, 10px) !important;
    color: var(--text-color, #ffffff) !important;
    caret-color: var(--caret-color, #ffffff) !important;
    font-size: 1rem !important;
    font-family: inherit !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}
[data-theme='light'] select,
[data-theme='light'] .form-group select,
[data-theme='light'] .custom-select,
[data-theme='light'] .select-dropdown {
    background-color: var(--input-bg, #ffffff) !important;
    border-color: var(--input-border, #d1d5db) !important;
    color: var(--text-color, #111827) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
select:hover,
.form-group select:hover,
.custom-select:hover,
.select-dropdown:hover {
    border-color: var(--input-border-hover, rgba(255, 255, 255, 0.22)) !important;
}
select:focus,
.form-group select:focus,
.custom-select:focus,
.select-dropdown:focus {
    border-color: var(--input-focus-border, #34d399) !important;
    box-shadow: 0 0 0 3px var(--input-focus-glow, rgba(52, 211, 153, 0.20)) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    outline: none !important;
}
[data-theme='light'] select:focus,
[data-theme='light'] .form-group select:focus,
[data-theme='light'] .custom-select:focus,
[data-theme='light'] .select-dropdown:focus {
    border-color: var(--input-focus-border, #10b981) !important;
    box-shadow: 0 0 0 3px var(--input-focus-glow, rgba(16, 185, 129, 0.15)) !important;
    background-color: #ffffff !important;
}
select option,
.form-group select option,
.custom-select option,
.select-dropdown option {
    background-color: var(--surface-color, #202124) !important;
    color: var(--text-color, #ffffff) !important;
}
[data-theme='light'] select option,
[data-theme='light'] .form-group select option,
[data-theme='light'] .custom-select option {
    background-color: #ffffff !important;
    color: #111827 !important;
}
/* --- Ultra-Premium Workout Completed Modal --- */
/* --- Mobile Nested Scroll Trap Fix --- */
@media (max-width: 768px) {
    /* Embedded feed and history lists expand to natural page flow on mobile so the parent window scrolls smoothly */
    .dashboard-grid .history .history-list,
    .mobile-view-content .history .history-list,
    .grid-item.history .history-list {
        max-height: none !important;
        overflow-y: visible !important;
    }
}
/* Isolate scroll chaining so inner containers don't jerk parent page momentum */
.history-list,
.meal-history-list {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}
/* --- Ultra-Premium Photo Meal Capture Modal --- */
.photo-meal-capture-modal.modal-content {
    background: #090a0f !important;
    background: radial-gradient(circle at 50% 0%, #151d2a 0%, #090a0f 85%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 28px !important;
    color: #ffffff !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.85), 0 0 50px rgba(16, 185, 129, 0.08) !important;
    max-width: min(520px, 94vw) !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 640px) {
    .photo-meal-capture-modal.modal-content {
        max-width: 100vw !important;
        border-radius: 24px 24px 0 0 !important;
        /* Sit on the bottom edge and stop short of the status bar: centred at 94dvh its close
           button landed under the notification bar (2026-10-16). */
        align-self: flex-end;
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 8px) !important;
    }
}
/* --- Events Page Unified Controls Single-Row Guarantee --- */
@media (max-width: 1023px) {
    .mobile-events-controls,
    div.mobile-events-controls,
    div.mobile-events-controls.mobile-only {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 0.35rem !important;
    }
}
/* --- Sleep Hub (2026-10-10, HZ-10/13/14/20/21/24) -------------------------------------
   One hub, top to bottom: Tonight (always shown), tonight's wind-down near bedtime, the routine,
   the week's bed and wake times, then the alarm. Theme tokens only, 44px targets, 16px inputs.
   The sticky "Save routine" bar is gone: the routine saves itself like everything else. */
.sleep-hub { display: flex; flex-direction: column; gap: var(--space-3); }
.sleep-hub-card {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.sleep-hub-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 44px;
}
.sleep-hub-center { text-align: center; }
.sleep-hub-muted {
    display: block;
    font-size: var(--text-2xs);
    line-height: 1.4;
    color: var(--text-secondary-color);
}
.sleep-hub-body {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-secondary-color);
}
.sleep-hub-body strong { color: var(--text-color); }
/* Tonight: need | lights out | alarm */
.sleep-hub-tonight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--background-color);
    text-align: center;
}
.sleep-hub-tonight-grid > div { padding: var(--space-2) var(--space-1); min-width: 0; }
.sleep-hub-tonight-grid > div + div { border-left: 1px solid var(--border-color); }
.sleep-hub-figure {
    display: block;
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--text-color);
    line-height: 1.3;
}
.sleep-hub-figure.is-off { color: var(--text-secondary-color); }
.sleep-hub-add { display: block; font-size: var(--text-2xs); font-weight: 700; color: var(--text-secondary-color); }
.sleep-hub-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: rgba(var(--primary-color-rgb), 0.08);
    font-size: var(--text-sm);
    color: var(--text-color);
}
/* Buttons */
.sleep-hub-btn {
    min-height: 44px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}
.sleep-hub-btn.is-primary {
    border-color: var(--primary-fill);
    background: var(--primary-fill);
    color: var(--on-primary-color);
}
.sleep-hub-btn:disabled { opacity: 0.6; cursor: default; }
.sleep-hub-icon-btn {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.sleep-hub-icon-btn:disabled { opacity: 0.35; cursor: default; }
.sleep-hub-icon-btn.is-danger { color: var(--error-color); }
.sleep-hub-btn:focus-visible,
.sleep-hub-icon-btn:focus-visible,
.sleep-hub-disclosure:focus-visible,
.sleep-hub-step:focus-visible,
.sleep-hub-day:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
/* A header that folds a section: a real button, keyboard reachable (HZ-34) */
.sleep-hub-disclosure {
    width: 100%;
    min-height: 44px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-color);
    font-family: inherit;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    cursor: pointer;
}
/* Settings rows */
.sleep-hub-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 44px;
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-color);
}
.sleep-hub-row-label { flex: 1; min-width: 0; font-size: var(--text-sm); font-weight: 600; color: var(--text-color); }
.sleep-hub-stepper { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
.sleep-hub-stepper .sleep-hub-icon-btn { border-color: var(--border-color); background: var(--surface-color-hover); color: var(--text-color); }
.sleep-hub-stepper-value { min-width: 44px; text-align: center; font-weight: 700; font-size: var(--text-sm); color: var(--text-color); }
.sleep-hub-input,
.sleep-hub-select {
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: var(--text-md); /* 16px: iOS zooms anything smaller (HE-42) */
    box-sizing: border-box;
}
/* Banners */
.sleep-hub-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    width: 100%;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: var(--text-sm);
    line-height: 1.45;
    text-align: left;
}
button.sleep-hub-banner { cursor: pointer; }
.sleep-hub-banner.is-warning { border-color: var(--warning-color); }
.sleep-hub-banner.is-warning svg { color: var(--warning-color); flex-shrink: 0; }
.sleep-hub-banner.is-error { border-color: var(--error-color); }
.sleep-hub-banner.is-error svg { color: var(--error-color); flex-shrink: 0; }
/* Cycle timeline */
.sleep-hub-timeline {
    position: relative;
    height: 20px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
}
.sleep-hub-timeline > span { position: absolute; top: 0; bottom: 0; }
.sleep-hub-cycle {
    background: rgba(var(--primary-color-rgb), 0.45);
    border-left: 1px solid var(--surface-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--text-color);
}
.sleep-hub-cycle.is-partial { background: rgba(var(--primary-color-rgb), 0.2); }
.sleep-hub-window { background: rgba(var(--success-color-rgb), 0.2); border-left: 1px dashed var(--success-color); pointer-events: none; }
.sleep-hub-alarm-mark { width: 2px; background: var(--text-color); pointer-events: none; }
/* Wind-down steps */
.sleep-hub-progress { height: 6px; border-radius: var(--radius-full, 999px); background: var(--surface-color-hover); overflow: hidden; }
.sleep-hub-progress > div { height: 100%; transition: width 0.3s ease; }
.sleep-hub-step {
    width: 100%;
    min-height: 52px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-color);
    color: var(--text-color);
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
}
.sleep-hub-step.is-done { border-color: var(--success-color); opacity: 0.75; }
.sleep-hub-step.is-done .sleep-hub-step-name { text-decoration: line-through; color: var(--text-secondary-color); }
.sleep-hub-step-name { display: block; font-size: var(--text-sm); font-weight: 600; }
.sleep-hub-check {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--text-secondary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--on-primary-color);
}
.sleep-hub-step.is-done .sleep-hub-check { border-color: var(--success-color); background: var(--success-color); }
.sleep-hub-done {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--success-color);
}
/* Routine editor */
.sleep-hub-activity {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-color);
}
.sleep-hub-chip {
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full, 999px);
    background: var(--surface-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
}
/* The week */
.sleep-hub-day {
    width: 100%;
    min-height: 44px;
    padding: 0 var(--space-2);
    border: none;
    border-radius: var(--radius-md);
    background: none;
    color: var(--text-color);
    font-family: inherit;
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    text-align: left;
}
.sleep-hub-day-name { width: 44px; font-weight: 700; }
.sleep-hub-day.is-off { color: var(--text-secondary-color); }
.sleep-hub-day-row { display: flex; align-items: center; gap: var(--space-2); border-top: 1px solid var(--border-color); }
.sleep-hub-day-row:first-of-type { border-top: none; }
.sleep-hub-time-btn {
    width: 100%;
    flex: 1;
    min-height: 52px;
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-md);
    background: rgba(var(--primary-color-rgb), 0.08);
    color: var(--text-color);
    font-family: inherit;
    font-size: var(--text-lg);
    font-weight: 700;
    cursor: pointer;
}
.sleep-hub-label { display: block; margin-bottom: var(--space-1); font-size: var(--text-xs); color: var(--text-secondary-color); }
.sleep-hub-switch-scale { margin: 0; flex-shrink: 0; }
/* Week rows: the day name and each time are their own targets (2026-10-19). */
div.sleep-hub-day { cursor: default; padding: 0; }
.sleep-hub-day .sleep-hub-day-name,
.sleep-hub-day-time {
    min-height: 44px;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0 var(--space-2);
    border-radius: var(--radius-md);
    touch-action: manipulation;
}
.sleep-hub-day .sleep-hub-day-name { text-align: left; }
.sleep-hub-day-time { font-variant-numeric: tabular-nums; }
.sleep-hub-day .sleep-hub-day-name:focus-visible,
.sleep-hub-day-time:focus-visible,
.sleep-week-chip:focus-visible,
.sleep-week-preset:focus-visible,
.clock-dial button:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.sleep-hub-time-btn.is-active { background: rgba(var(--primary-color-rgb), 0.2); }
.sleep-hub-banner .sleep-hub-btn { flex-shrink: 0; align-self: center; }
.sleep-hub-banner { flex-wrap: wrap; }
/* Week sheet: pick mornings */
.sleep-week-chips { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-1); }
.sleep-week-chip {
    min-height: 44px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: none;
    color: var(--text-color);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}
.sleep-week-chip.is-on { background: var(--primary-color); border-color: var(--primary-color); color: var(--text-on-primary, #fff); }
.sleep-week-presets { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.sleep-week-preset {
    flex: 1;
    min-height: 36px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: none;
    color: var(--text-secondary-color);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
}
.sleep-week-preset.is-on { border-color: var(--primary-color); color: var(--text-color); }
/* Clock dial (src/components/shared/ClockDial.tsx) */
.clock-dial { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.clock-dial-readout { display: flex; align-items: center; gap: var(--space-1); font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.clock-dial-seg {
    min-width: 56px;
    min-height: 48px;
    border: none;
    border-radius: var(--radius-md);
    background: none;
    color: var(--text-secondary-color);
    font: inherit;
    cursor: pointer;
}
.clock-dial-seg.is-active { background: rgba(var(--primary-color-rgb), 0.15); color: var(--text-color); }
.clock-dial-meridiem { display: inline-flex; flex-direction: column; gap: 2px; margin-left: var(--space-2); }
.clock-dial-meridiem button {
    min-width: 44px;
    min-height: 26px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    background: none;
    color: var(--text-secondary-color);
    font-size: var(--text-xs);
    font-weight: 700;
    cursor: pointer;
}
.clock-dial-meridiem button.is-active { border-color: var(--primary-color); color: var(--text-color); background: rgba(var(--primary-color-rgb), 0.15); }
.clock-dial-face { width: min(240px, 100%); height: auto; touch-action: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: pointer; }
.clock-dial-bg { fill: rgba(var(--primary-color-rgb), 0.06); }
.clock-dial-hand { stroke: var(--primary-color); stroke-width: 2; }
.clock-dial-pivot, .clock-dial-knob { fill: var(--primary-color); }
.clock-dial-knob { opacity: 0.35; }
.clock-dial-num { fill: var(--text-color); font-size: 15px; pointer-events: none; }
.clock-dial-num.is-inner { fill: var(--text-secondary-color); font-size: 12px; }
.clock-dial-num.is-selected { font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
    .sleep-hub-progress > div { transition: none; }
}
/* --- Daily Momentum Modal Enhancement (Light & Dark Mode) --- */
.daily-bonus-modal.modal-content {
    border-radius: 24px !important;
    border: 1px solid var(--border-color) !important;
    padding: 1rem 1.25rem 1.25rem !important;
    background: var(--surface-color) !important;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.25) !important;
    max-width: min(440px, 94vw) !important;
}
/* Full height on a phone, and this card's own padding replaced the sheet's status-bar clearance:
   the title and close button sat under the notification bar (2026-10-16). */
@media (max-width: 768px) {
    .daily-bonus-modal.modal-content {
        padding-top: calc(1rem + env(safe-area-inset-top, var(--safe-area-inset-top, 0px))) !important;
    }
}
.daily-bonus-modal .modal-header {
    border-bottom: 1px solid var(--border-color) !important;
    padding-bottom: 0.65rem !important;
    margin-bottom: 0.85rem !important;
}
.daily-bonus-modal .modal-title {
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.025em !important;
    color: var(--text-color) !important;
}
.daily-bonus-modal .modal-close-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--surface-color-hover, transparent) !important;
    color: var(--text-secondary-color) !important;
    transition: all 0.2s ease !important;
}
.daily-bonus-modal .modal-close-btn:hover {
    color: var(--text-color) !important;
    border-color: var(--text-secondary-color) !important;
}
/* Light mode fine-tuning */
[data-theme='light'] .daily-bonus-modal.modal-content {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
[data-theme='light'] .daily-bonus-modal .modal-header {
    border-bottom-color: #f1f5f9 !important;
}
[data-theme='light'] .daily-bonus-modal .modal-title {
    color: #0f172a !important;
}
[data-theme='light'] .daily-bonus-modal .modal-close-btn {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #64748b !important;
}
[data-theme='light'] .daily-bonus-modal .modal-close-btn:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}
/* Dark mode fine-tuning */
[data-theme='dark'] .daily-bonus-modal.modal-content {
    background: #18181b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75) !important;
}
[data-theme='dark'] .daily-bonus-modal .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme='dark'] .daily-bonus-modal .modal-title {
    color: #f9fafc !important;
}
[data-theme='dark'] .daily-bonus-modal .modal-close-btn {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #94a3b8 !important;
}
[data-theme='dark'] .daily-bonus-modal .modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}
/* ---------------------------------------------------------------------------
   Interface iconography (2026-09-20)

   These SVG icons replaced emoji characters that were standing in for icons.
   Astral-plane emoji (U+1F300 and up) fall back to the font's .notdef box on
   any device without a colour-emoji font -- headless Chromium, some Android
   WebViews, stripped Linux images -- so a streak pill read as a box next to a
   number. An inline SVG renders the same everywhere and takes currentColor.

   The class only fixes the baseline: an SVG is inline and sits ON the text
   baseline, where the emoji it replaced sat slightly below it.
   --------------------------------------------------------------------------- */
.glyph-icon {
    display: inline-block;
    vertical-align: -0.15em;
    flex-shrink: 0;
}
/* A metric with no reading: an em-dash, muted, never the ASCII "--" plus a unit. */
.metric-empty {
    color: var(--text-tertiary-color, var(--text-secondary-color));
    opacity: 0.55;
    font-weight: 600;
}
/* --- Calendar Modal Animation --- */
@keyframes calendarFadeIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* --- Universal High-Priority Form Input & Caret Styling --- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]),
select,
textarea,
.input,
.form-control,
.form-group input {
    background-color: var(--input-bg, rgba(255, 255, 255, 0.06)) !important;
    border: 1px solid var(--input-border, rgba(255, 255, 255, 0.12)) !important;
    color: var(--text-color, #ffffff) !important;
    caret-color: var(--caret-color, #ffffff) !important;
    border-radius: var(--radius-md, 10px) !important;
    line-height: 1.5 !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]):focus,
select:focus,
textarea:focus,
.input:focus,
.form-control:focus,
.form-group input:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--input-focus-border, #34d399) !important;
    box-shadow: 0 0 0 3px var(--input-focus-glow, rgba(52, 211, 153, 0.25)) !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
/* --- Header Branding & Layout --- */
.header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    flex-shrink: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.header-brand:hover {
    opacity: 0.9;
}
.header-brand:active {
    transform: scale(0.98);
}
.header-brand-title {
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
}
@media (max-width: 380px) {
    .header-brand-title {
        display: none;
    }
}
/* Unfinished workout prompt (UnfinishedSessionPrompt): a live session the app lost before Finish. */
.unfinished-session-prompt {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    z-index: 9000;
    max-width: 520px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--surface-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.unfinished-session-text {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.85rem;
}
.unfinished-session-text span {
    color: var(--text-secondary-color);
}
.unfinished-session-actions {
    display: flex;
    gap: 0.5rem;
}
/* Session profile (SessionProfile.tsx): workout graph + folded steps for a cardio session. */
.session-profile {
    --z1: #3b82f6;
    --z2: #22c55e;
    --z3: #eab308;
    --z4: #f97316;
    --z5: #ef4444;
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
}
.session-profile-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.session-profile-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary-color);
}
.session-profile-total {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}
.session-profile-hard {
    font-weight: 500;
    color: var(--text-secondary-color);
}
.session-profile-load {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary-color);
    font-variant-numeric: tabular-nums;
}
.session-profile-load strong {
    font-size: 1rem;
    color: var(--text-color);
    margin-right: 0.2rem;
}
.session-profile-graph {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 64px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--border-color);
}
.session-profile-bar {
    flex-basis: 0;
    min-width: 3px;
    border-radius: 3px 3px 0 0;
    opacity: 0.9;
}
.session-profile-bar.zone-1 { background: var(--z1); }
.session-profile-bar.zone-2 { background: var(--z2); }
.session-profile-bar.zone-3 { background: var(--z3); }
.session-profile-bar.zone-4 { background: var(--z4); }
.session-profile-bar.zone-5 { background: var(--z5); }
.session-profile-steps {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.session-profile-step {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}
.session-profile-repeat {
    flex: 0 0 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-color);
}
.session-profile-parts {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}
.session-profile-part {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    background: var(--background-color);
}
.session-profile-zone {
    flex: 0 0 auto;
    min-width: 2rem;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.15rem 0.35rem;
    border-radius: 6px;
    color: #fff;
}
.session-profile-zone.zone-1 { background: var(--z1); }
.session-profile-zone.zone-2 { background: var(--z2); }
.session-profile-zone.zone-3 { background: var(--z3); color: #1f2937; }
.session-profile-zone.zone-4 { background: var(--z4); }
.session-profile-zone.zone-5 { background: var(--z5); }
.session-profile-label,
.session-profile-target {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.session-profile-label {
    flex: 1 1 auto;
    min-width: 0;
}
.session-profile-label strong,
.session-profile-target strong {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-color);
}
.session-profile-label span,
.session-profile-target span {
    font-size: 0.7rem;
    color: var(--text-secondary-color);
}
.session-profile-target {
    flex: 0 0 auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* Planner inline-edit fields read as text, not form boxes. The global input:not(...) rule in
   app.css outranks these classes on specificity, so every block title and exercise name was a
   16px bordered 44px box (2026-10-04). Phones keep 16px: smaller makes iOS zoom on focus.
   :not(#_) adds ID weight, which is the only way past that rule's stack of :not([type]). */
.block-container input.input-block-title:not(#_),
.block-container input.input-exercise-name:not(#_) {
    border: 1px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0.2rem 0.4rem !important;
    border-radius: 6px !important;
}
.block-container input.input-block-title:not(#_):hover,
.block-container input.input-exercise-name:not(#_):hover {
    border-color: var(--border-color) !important;
}
.block-container input.input-block-title:not(#_):focus,
.block-container input.input-exercise-name:not(#_):focus {
    border-color: var(--input-focus-border, var(--primary-color)) !important;
    background: var(--input-bg) !important;
}
.block-container input.input-block-title:not(#_) {
    letter-spacing: 0.04em;
}
@media (min-width: 768px) {
    .block-container input.input-block-title:not(#_) {
        font-size: 0.85rem !important;
    }
    .block-container input.input-exercise-name:not(#_) {
        font-size: 0.95rem !important;
    }
}
.session-profile-label strong,
.session-profile-label span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 480px) {
    .session-profile {
        padding: 0.7rem 0.6rem;
    }
    .session-profile-part {
        gap: 0.45rem;
        padding: 0.4rem 0.5rem;
    }
    .session-profile-repeat {
        flex-basis: 1.4rem;
    }
    /* Watts stay; % FTP and cadence are the first thing to give way on a phone. */
    .session-profile-target span {
        display: none;
    }
}
/* Set table (2026-10-05): one pill per value, the unit inside it, a load chip for band and
   bodyweight lifts. :not(#_) gets past the global input:not([type]) rule's specificity. */
.wb-set-table {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.5rem;
}
.wb-set-head,
.wb-set-row {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: center;
    gap: 0.5rem;
}
.wb-set-head span {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary-color);
    text-align: center;
}
.wb-set-head span:first-child { text-align: center; }
/* "lbs per hand ⇄": tap to count the pair as a total instead. */
.wb-load-basis {
    margin-left: 0.3rem;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    background: transparent;
    color: var(--grit-green, #10b981);
    font: inherit;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}
.wb-set-head em {
    font-style: normal;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.3rem;
}
.wb-set-num {
    width: 1.6rem;
    height: 1.6rem;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-secondary-color);
    background: var(--background-color);
    border: 1px solid var(--border-color);
    font-variant-numeric: tabular-nums;
}
.wb-stepper {
    display: flex;
    align-items: center;
    height: 2.4rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wb-stepper:focus-within {
    border-color: var(--input-focus-border, var(--primary-color));
    box-shadow: 0 0 0 3px var(--input-focus-glow, rgba(59, 130, 246, 0.15));
}
.wb-stepper-btn {
    flex: 0 0 2.1rem;
    height: 100%;
    border: none;
    background: transparent;
    color: var(--text-secondary-color);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.wb-stepper-btn:hover {
    background: var(--background-color);
    color: var(--text-color);
}
.wb-stepper input.wb-stepper-input:not(#_) {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 0.15rem !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center;
    font-weight: 700;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}
.wb-stepper-unit {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary-color);
    padding-right: 0.15rem;
}
.wb-load-chip {
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px dashed var(--border-color);
    color: var(--text-secondary-color);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 0.5rem;
}
.wb-coach {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.25rem;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    background: var(--background-color);
    font-size: 0.78rem;
    color: var(--text-color);
}
.wb-coach-label {
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-color);
}
/* The demo opens full width; the details below it stack. */
.exercise-expanded-details:has(.exercise-demo) {
    display: flex !important;
    flex-direction: column;
    gap: 0.75rem;
}
.exercise-demo {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}
.exercise-demo-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
}
.exercise-demo-frame .video-container,
.exercise-demo-frame .video-placeholder {
    min-height: 0 !important;
    height: 100% !important;
}
.exercise-demo-toggle {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-color);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}
.exercise-demo-toggle:hover {
    background: var(--background-color);
}
@media (max-width: 480px) {
    .wb-set-head,
    .wb-set-row {
        grid-template-columns: 1.7rem minmax(0, 1fr) minmax(0, 1.2fr);
        gap: 0.35rem;
    }
    .wb-stepper-btn {
        flex-basis: 1.8rem;
    }
}
/* Rounds: a small field, not a 44px form box. */
.block-container input.input-rounds:not(#_) {
    width: 3rem !important;
    height: 2rem !important;
    min-height: 0 !important;
    padding: 0 0.25rem !important;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border-radius: 8px !important;
}
/* Cardio and mobility cards (2026-10-05): the same pills as the lift table, a zone-coloured
   target, "each side" as a tag, and the cue as a Coach line. */
.exercise-right.wb-metrics-host {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
}
.wb-metrics {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 0.5rem;
    align-items: end;
    margin-top: 0.4rem;
}
.wb-metric {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.wb-metric-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary-color);
    padding-left: 0.2rem;
}
.wb-target {
    --zone: var(--text-secondary-color);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    height: 2.4rem;
    padding: 0 0.6rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    box-shadow: inset 3px 0 0 var(--zone);
}
.wb-target:focus-within {
    border-color: var(--input-focus-border, var(--primary-color));
}
.wb-target.zone-1 { --zone: #3b82f6; }
.wb-target.zone-2 { --zone: #22c55e; }
.wb-target.zone-3 { --zone: #eab308; }
.wb-target.zone-4 { --zone: #f97316; }
.wb-target.zone-5 { --zone: #ef4444; }
.wb-target-dot {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--zone);
}
.wb-target input.wb-target-input:not(#_) {
    flex: 1 1 auto;
    min-width: 0;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 700;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
}
.wb-coach.wb-coach-card {
    margin: 0.5rem 0 0;
}
/* Mobility: its own quiet look, not the cardio pink. */
.exercise-item-container.mobility-exercise,
.exercise-item-compact.mobility-exercise {
    background: var(--surface-color) !important;
    border-color: var(--border-color) !important;
}
.btn-type-toggle.is-mobility {
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
}
@media (max-width: 480px) {
    .wb-metrics {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    }
    .wb-metric-target {
        grid-column: 1 / -1;
    }
}
/* Mobility has two fields; no empty third column. */
.wb-metrics:not(:has(.wb-metric-target)) {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    max-width: 26rem;
}
/* Strength player logging panel (WorkoutActiveConsole, 2026-10-05). */
.pl-console {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1rem;
    border-radius: 1.1rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.pl-console.is-compact { padding: 0.8rem; }
.pl-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
}
.pl-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.pl-field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0 0.15rem;
}
.pl-field-head span {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary-color);
}
.pl-field-head em {
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pl-stepper {
    display: flex;
    align-items: center;
    height: 3.4rem;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--background-color);
    overflow: hidden;
}
.pl-stepper:focus-within {
    border-color: var(--input-focus-border, var(--primary-color));
    box-shadow: 0 0 0 3px var(--input-focus-glow, rgba(16, 185, 129, 0.15));
}
.pl-step {
    flex: 0 0 2.6rem;
    height: 100%;
    border: none;
    background: transparent;
    color: var(--text-secondary-color);
    font-size: 1.3rem;
    font-weight: 600;
    cursor: pointer;
}
.pl-step:active { background: var(--surface-color); color: var(--text-color); }
.pl-stepper input:not(#_) {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center;
    font-size: 1.5rem !important;
    font-weight: 900;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}
.pl-unit {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary-color);
}
.pl-chip {
    height: 3.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px dashed var(--border-color);
    color: var(--text-secondary-color);
    font-weight: 700;
}
.pl-hint { font-size: var(--text-2xs); font-weight: 700; color: var(--text-secondary-color); padding-left: 0.15rem; }
/* Last time, plates per side and the warm-up ramp beside the set (WK-59). */
.pl-lift-notes { display: flex; flex-direction: column; gap: 4px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color); }
.pl-lift-note { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; font-size: var(--text-xs); }
.pl-lift-note span { flex: 0 0 5.8rem; white-space: nowrap; font-size: var(--text-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary-color); }
.pl-lift-note strong { min-width: 0; font-weight: 700; color: var(--text-color); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* "Last time" opens the lift's last 5 sessions. */
.pl-lift-note-toggle { width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.pl-lift-note-toggle strong { flex: 1 1 auto; }
.pl-lift-note-toggle em { flex: 0 0 auto; font-style: normal; font-size: var(--text-2xs); font-weight: 700; color: var(--primary-color); white-space: nowrap; }
.pl-lift-history { list-style: none; margin: 2px 0 4px; padding: 0 0 0 0.6rem; border-left: 2px solid var(--border-color); display: flex; flex-direction: column; gap: 3px; }
.pl-lift-history li { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; font-size: var(--text-xs); }
.pl-lift-history li span { flex: 0 0 5.2rem; white-space: nowrap; font-size: var(--text-2xs); font-weight: 700; color: var(--text-secondary-color); }
.pl-lift-history li strong { min-width: 0; font-weight: 600; color: var(--text-color); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pl-hint.is-up { color: var(--primary-color); }
.pl-hint.is-down { color: #f59e0b; }
.pl-coach { margin: 0; }
.pl-actions { display: flex; gap: 0.6rem; }
.pl-camera {
    flex: 0 0 3.2rem;
    height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--background-color);
    color: var(--primary-color);
    cursor: pointer;
}
.pl-complete {
    flex: 1 1 auto;
    height: 3.2rem;
    margin: 0 !important;
    border-radius: 14px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
}
.pl-complete:disabled { opacity: 0.55; cursor: not-allowed; }
/* Swap sheet (WorkoutSwapSheet) */
.pl-swap { display: flex; flex-direction: column; gap: var(--space-3); }
.pl-swap-hint { margin: 0; font-size: var(--text-sm); color: var(--text-secondary-color); line-height: 1.45; }
.pl-swap-search { width: 100%; box-sizing: border-box; min-height: 44px; font-size: var(--text-md); padding: 0 var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-color); }
.pl-swap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); max-height: 50vh; overflow-y: auto; }
.pl-swap-option { width: 100%; min-height: 48px; text-align: left; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--surface-color); color: var(--text-color); font-size: var(--text-md); font-weight: 700; cursor: pointer; }
.pl-swap-option:active { border-color: var(--primary-color); }
.pl-swap-empty { margin: 0; font-size: var(--text-sm); color: var(--text-secondary-color); }
.pl-queue {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.2rem 0.1rem;
}
.pl-queue-title {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary-color);
    padding-left: 0.2rem;
}
.pl-queue-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.65rem 0.8rem;
    border-radius: 12px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    opacity: 0.7;
}
.pl-queue-item.is-next { opacity: 1; border-color: rgba(16, 185, 129, 0.35); }
.pl-queue-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-color);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pl-queue-dose {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--text-secondary-color);
    font-variant-numeric: tabular-nums;
}
/* Strength player rest + RPE panel (WorkoutRestOverlay, 2026-10-05). Same surface as the console
   below it; the clock turns amber for the last 10 s. */
.pl-rest {
    --pl-rest-accent: var(--primary-color);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1rem;
    border-radius: 1.1rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    text-align: left;
}
.pl-rest.is-ending { --pl-rest-accent: #f59e0b; }
/* The panel sits in the video slot, which is capped at 190px and dark on phones. */
.workout-exercise-panel .video-frame:has(> .pl-rest) {
    max-height: none;
    flex: 0 0 auto;
    overflow: visible;
    background: transparent;
    border: none;
}
.pl-rest-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.pl-rest-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pl-rest-accent);
}
.pl-rest-of {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary-color);
    font-variant-numeric: tabular-nums;
}
.pl-rest-clock {
    font-size: clamp(3rem, 15vw, 4.25rem);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--text-color);
    text-align: center;
}
.pl-rest.is-ending .pl-rest-clock { color: var(--pl-rest-accent); }
.pl-rest-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--background-color);
    overflow: hidden;
}
.pl-rest-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--pl-rest-accent);
    transition: width 1s linear, background-color 0.3s;
}
.pl-rest-controls {
    display: grid;
    grid-template-columns: 4.2rem minmax(0, 1fr) 4.2rem;
    gap: 0.5rem;
}
.pl-rest-controls > :only-child { grid-column: 1 / -1; }
.pl-rest-adjust,
.pl-rest-skip,
.pl-rpe-skip {
    height: 2.9rem;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--background-color);
    color: var(--text-color);
    font-size: 0.9rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.pl-rest-skip {
    border-color: transparent;
    background: var(--primary-color);
    color: #fff;
}
.pl-rest-adjust:active,
.pl-rest-skip:active,
.pl-rpe-option:active,
.pl-rpe-skip:active { transform: scale(0.97); }
.pl-rest-sets {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.pl-rest-set {
    display: grid;
    grid-template-columns: 4.4rem minmax(0, 1fr);
    grid-template-areas: "tag name" "tag dose";
    align-items: center;
    -moz-column-gap: 0.5rem;
         column-gap: 0.5rem;
    row-gap: 0.1rem;
    padding: 0.55rem 0.7rem;
    border-radius: 12px;
    background: var(--background-color);
    font-size: 0.8rem;
}
.pl-rest-set.is-next { box-shadow: inset 3px 0 0 var(--primary-color); }
.pl-rest-tag {
    grid-area: tag;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary-color);
}
.pl-rest-set.is-next .pl-rest-tag { color: var(--primary-color); }
.pl-rest-name {
    grid-area: name;
    font-size: 0.85rem;
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pl-rest-dose {
    grid-area: dose;
    font-size: 0.75rem;
    color: var(--text-secondary-color);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pl-rest-coach {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-secondary-color);
}
.pl-rpe-set {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.6rem;
    font-size: 0.85rem;
}
.pl-rpe-set span { color: var(--text-secondary-color); font-variant-numeric: tabular-nums; }
.pl-rpe-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}
.pl-rpe-option {
    --pl-rpe: var(--primary-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.8rem 0.4rem;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--pl-rpe);
    background: var(--background-color);
    color: var(--text-color);
    cursor: pointer;
}
.pl-rpe-option.is-rpe-7 { --pl-rpe: #3b82f6; }
.pl-rpe-option.is-rpe-9 { --pl-rpe: #ef4444; }
.pl-rpe-option b { font-size: 0.95rem; font-weight: 800; }
.pl-rpe-option span {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary-color);
}
.pl-rpe-skip {
    height: 2.4rem;
    border-color: transparent;
    background: transparent;
    color: var(--text-secondary-color);
    font-size: 0.8rem;
}
/* Cardio workout-complete screen (CardioCompletionModal, 2026-10-05): follows the app theme,
   clears the status bar, and scrolls. It was hard-coded dark (#09090b) with overflow hidden, so
   Save sat under the fold with no way to reach it. */
.cardio-completion-modal.modal-content {
    background: var(--background-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 24px !important;
    max-width: min(540px, 94vw) !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
    .cardio-completion-modal.modal-content {
        border-radius: 0 !important;
        border: none !important;
        max-width: 100vw !important;
        width: 100vw !important;
        height: 100dvh !important;
    }
}
.cardio-completion-modal .modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--background-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: calc(env(safe-area-inset-top, 0px) + 0.85rem) 1.25rem 0.85rem !important;
}
.cardio-completion-modal .modal-title {
    color: var(--text-color) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
}
.cc-content {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.25rem 1.1rem calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
}
.cc-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.45rem; }
.cc-trophy {
    width: 4rem; height: 4rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 18px;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.cc-badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: #d97706;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.cc-title { margin: 0; font-size: 1.4rem; font-weight: 900; letter-spacing: -0.02em; color: var(--text-color); }
.cc-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
@media (min-width: 640px) { .cc-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cc-metric {
    display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
    padding: 0.8rem 0.5rem;
    border-radius: 16px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
}
.cc-metric-label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 600; color: var(--text-secondary-color); }
.cc-metric-value { font-size: 1.5rem; font-weight: 900; color: var(--text-color); font-variant-numeric: tabular-nums; }
.cc-metric-value span { font-size: 0.72rem; font-weight: 600; margin-left: 0.15rem; color: var(--text-secondary-color); }
.cc-card {
    display: flex; flex-direction: column; gap: 0.5rem;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
}
.cc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.cc-card-title {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-color);
}
.cc-text { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--text-secondary-color); }
.cc-muted .cc-card-title { color: var(--text-secondary-color); }
.cc-pill { padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 800; }
.cc-pill.is-warn { color: #d97706; background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.3); }
.cc-pill.is-ok { color: #059669; background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.3); }
.cc-records { border-color: rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.06); }
.cc-records .cc-card-title { color: #d97706; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cc-chip {
    padding: 0.3rem 0.65rem; border-radius: 10px;
    font-size: 0.78rem; font-weight: 700;
    color: var(--text-color);
    background: var(--background-color);
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.cc-segments { display: flex; flex-direction: column; gap: 0.4rem; }
.cc-segment { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; }
.cc-segment-num {
    width: 1.4rem; height: 1.4rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.68rem; font-weight: 800; background: var(--background-color); border: 1px solid var(--border-color);
}
.cc-segment-name { flex: 1 1 auto; font-weight: 700; color: var(--text-color); }
.cc-segment-dose { color: var(--text-secondary-color); font-variant-numeric: tabular-nums; }
.cc-notes textarea:not(#_) {
    width: 100%;
    min-height: 3.5rem;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 16px;
    color: var(--text-color);
    resize: none;
}
.cc-actions { display: flex; flex-direction: column; gap: 0.6rem; padding-top: 0.2rem; }
.cc-save {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    height: 3.2rem; border: none; border-radius: 16px;
    font-size: 0.95rem; font-weight: 900; color: #111827;
    background: linear-gradient(90deg, #f59e0b, #eab308);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.25);
    cursor: pointer;
}
.cc-save:disabled { opacity: 0.6; }
.cc-share {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    height: 3rem; border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-color);
    font-weight: 700; cursor: pointer;
}
.cc-discard {
    padding: 0.4rem; border: none; background: transparent;
    color: var(--text-secondary-color); font-size: 0.8rem; cursor: pointer;
}
.cc-discard:hover { color: var(--error-color, #ef4444); }
/* The coach button stays out of full-screen dialogs (Month Wrapped, workout complete): it
   floated over their own controls (2026-10-05). Its open chat window is not affected. */
body:has(.modal-overlay) .ai-widget-container {
    display: none !important;
}
/* GLP-1 Companion card (GLP1CompanionCard, 2026-10-05): the app's surface and accent, not purple. */
.glp1-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    border-radius: var(--radius-md);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    color: var(--text-color);
}
.glp1-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.glp1-title { margin: 0; font-size: var(--text-md); font-weight: 800; }
.glp1-sub { font-size: var(--text-2xs); font-weight: 700; color: var(--primary-color); }
.glp1-dose { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.glp1-dose-status, .glp1-floor-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary-color);
}
.glp1-floor { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--background-color); }
.glp1-floor-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.glp1-floor-value { font-size: var(--text-sm); font-weight: 800; font-variant-numeric: tabular-nums; }
.glp1-bar { height: 8px; border-radius: 999px; background: var(--border-color); overflow: hidden; }
.glp1-bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary-color); transition: width 0.6s ease; }
.glp1-note, .glp1-tip, .glp1-disclaimer { margin: 0; font-size: var(--text-2xs); line-height: 1.45; color: var(--text-secondary-color); }
.glp1-tip { padding: var(--space-3); border-radius: var(--radius-md); background: var(--background-color); color: var(--text-color); }
.glp1-actions { display: flex; gap: var(--space-2); }
.glp1-actions > * { flex: 1 1 0; }
.glp1-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 40px; padding: 0 var(--space-3);
    border-radius: var(--radius-md); border: 1px solid var(--border-color);
    background: transparent; color: var(--text-color);
    font-size: var(--text-xs); font-weight: 700; cursor: pointer;
}
.glp1-btn-primary { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; min-height: 40px; margin: 0 !important; font-size: var(--text-xs) !important; }
/* Shared grocery list invite (audit NU-09): nothing changes until the athlete taps Join. */
.grocery-invite-card {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-4);
    background: var(--surface-color);
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-lg);
    color: var(--text-color);
}
.grocery-invite-icon {
    flex: 0 0 auto;
    color: var(--primary-color);
    padding-top: 2px;
}
.grocery-invite-body { flex: 1; min-width: 0; }
.grocery-invite-title {
    margin: 0 0 var(--space-1);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-color);
}
.grocery-invite-detail {
    margin: 0 0 var(--space-1);
    font-size: var(--text-sm);
    color: var(--text-secondary-color);
}
.grocery-invite-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: var(--space-2);
}
.grocery-invite-actions .btn { min-height: 44px; }
/* "List cleared" with an Undo, under the grocery list header (audit NU-11). */
.grocery-undo-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--text-color);
}
.grocery-undo-bar button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    padding: 0 var(--space-3);
    background: none;
    border: none;
    color: var(--primary-color);
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
}
/* Share & Sync: pick who gets an invite. */
.share-list-members {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-3);
    max-height: 35vh;
    overflow-y: auto;
}
.share-list-members label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text-color);
    font-size: var(--text-sm);
    cursor: pointer;
}
.share-list-members input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
}
/* Which briefing path and length a planner session was built for (WK-08, 2026-10-05). */
.planner-request-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: var(--space-2) 0 var(--space-3);
    padding: 4px 10px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(var(--primary-color-rgb), 0.3);
    background: rgba(var(--primary-color-rgb), 0.1);
    color: var(--primary-color);
    font-size: var(--text-2xs);
    font-weight: 700;
    max-width: 100%;
}
/* Sleep card stage bar (Health, 2026-10-05): the night's recorded stage totals. */
.sleep-stage-bar { display: flex; gap: 2px; height: 14px; border-radius: 999px; overflow: hidden; background: var(--border-color); }
.sleep-stage-bar i { display: block; flex-basis: 0; min-width: 4px; }
.sleep-stage-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--text-2xs); font-weight: 700; color: var(--text-color); }
.sleep-stage-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sleep-stage-legend b { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sleep-stage-legend em { font-style: normal; color: var(--text-secondary-color); font-weight: 600; }
.sleep-stage-none { margin: 0; font-size: var(--text-xs); color: var(--text-secondary-color); }
/* Progress photos (2026-10-05): thumbnails are buttons now, and load from Storage one by one. */
.photo-thumbnail { display: block; width: 100%; padding: 0; font: inherit; }
.photo-thumbnail:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.progress-photo-placeholder {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; min-height: 80px;
    background: var(--input-bg, var(--surface-color));
    color: var(--text-secondary-color);
    border-radius: inherit;
}
.progress-photo-placeholder.view-photo-large { min-height: 240px; }
@media (prefers-reduced-motion: no-preference) {
    .progress-photo-placeholder.is-loading { animation: progress-photo-pulse 1.4s ease-in-out infinite; }
}
@keyframes progress-photo-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.progress-photo-poses { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.progress-photo-pose {
    flex: 1; min-width: 72px; min-height: 44px;
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    background: var(--surface-color); color: var(--text-color);
    font-size: var(--text-xs); font-weight: 600; cursor: pointer;
}
.progress-photo-pose.is-active {
    border-color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--primary-color);
}
.progress-photo-pose:disabled { opacity: 0.6; cursor: default; }
/* Hybrid challenges (SO-22): trainer builder, leaderboard, athlete join card. Tokens only, so
   both themes follow the switch. */
.hc-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.hc-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 640px) { .hc-grid { grid-template-columns: 1fr 1fr; } }
.hc-field label {
    display: block; margin-bottom: var(--space-1);
    font-size: var(--text-2xs); font-weight: var(--weight-bold);
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-secondary-color);
}
.hc-input {
    width: 100%; min-width: 0; box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    font-size: var(--text-md); /* 16px: smaller zooms the page on iOS */
    background: var(--input-bg, var(--surface-color));
    border: 1px solid var(--input-border, var(--border-color));
    border-radius: var(--radius-sm);
    color: var(--text-color);
}
.hc-input:focus {
    outline: none;
    border-color: var(--input-focus-border, var(--primary-color));
    box-shadow: 0 0 0 3px var(--input-focus-glow, transparent);
}
.hc-panel {
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    padding: var(--space-3); background: var(--surface-color);
}
.hc-card {
    display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-4); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); background: var(--surface-color);
}
.hc-code-form { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; }
.hc-muted { color: var(--text-secondary-color); font-size: var(--text-xs); }
.hc-error { color: var(--error-color); font-size: var(--text-xs); }
.hc-success {
    border: 1px solid var(--primary-color); background: var(--primary-color-translucent);
    border-radius: var(--radius-md); padding: var(--space-4);
}
.hc-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.hc-segments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); max-height: 260px; overflow-y: auto; }
.hc-segment { display: flex; gap: var(--space-2); align-items: baseline; font-size: var(--text-sm); color: var(--text-color); }
.hc-segment-num { min-width: 1.75rem; color: var(--text-secondary-color); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.hc-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--text-xl); font-weight: var(--weight-bold);
    letter-spacing: 0.2em; color: var(--text-color);
}
.hc-pill {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
    border-radius: var(--radius-full); border: 1px solid var(--border-color);
    font-size: var(--text-2xs); font-weight: var(--weight-bold); color: var(--text-secondary-color);
    white-space: nowrap;
}
.hc-pill.is-live { color: var(--primary-color); border-color: var(--primary-color); }
.hc-board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.hc-board-row {
    display: grid; grid-template-columns: 2rem 1fr auto; gap: var(--space-2); align-items: center;
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
    background: var(--surface-color-hover); color: var(--text-color); font-size: var(--text-sm);
}
.hc-board-row.is-me { box-shadow: inset 0 0 0 2px var(--primary-color); }
.hc-link-row {
    width: 100%; grid-template-columns: 1fr auto auto; border: none; cursor: pointer;
    font: inherit; font-size: var(--text-sm); text-align: left;
}
.hc-rank { font-weight: var(--weight-bold); text-align: center; font-variant-numeric: tabular-nums; }
.hc-time { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
/* Squads & Circles (2026-10-05). The circle screen used these classes with no rules behind them:
   the sub-tabs ran together as "OVERVIEWCHATCHALLENGESMEMBERS", stats and badges were bare text,
   and the chat never scrolled. */
.circle-detail-header-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 16px);
    padding: var(--space-4, 1rem);
}
.circle-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--primary-color-translucent);
    color: var(--primary-color);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--space-2, 0.5rem);
}
.circle-inner-nav {
    display: flex;
    gap: 4px;
    margin-top: var(--space-4, 1rem);
    padding: 4px;
    border-radius: var(--radius-md, 12px);
    background: var(--background-color);
    overflow-x: auto;
    scrollbar-width: none;
}
.inner-nav-btn {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 0 6px;
    border: none;
    border-radius: var(--radius-sm, 8px);
    background: transparent;
    color: var(--text-secondary-color);
    font-size: var(--text-2xs);
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
}
.inner-nav-btn.active {
    background: var(--surface-color);
    color: var(--primary-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.circle-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3, 0.75rem);
}
.stat-card-glass {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3, 0.75rem);
    border-radius: var(--radius-md, 12px);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
}
.stat-card-glass .stat-label {
    font-size: var(--text-2xs);
    color: var(--text-secondary-color);
    font-weight: 600;
}
.stat-card-glass .stat-val {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-color);
}
.circles-tab-container .badge,
.circle-members-tab .badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
}
.circle-chat-container {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 16px);
    margin-top: var(--space-4, 1rem);
    overflow: hidden;
}
.circle-chat-header {
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    border-bottom: 1px solid var(--border-color);
}
.circle-chat-container .circle-chat-body {
    overflow-y: auto;
    min-height: 0;
}
.circle-chat-container .circle-chat-input-area {
    border-top: 1px solid var(--border-color);
    padding: var(--space-3, 0.75rem);
}
/* Planner notice for a day the overnight re-plan changed (schedule day planChange, 2026-10-16).
   The athlete sees what it was and why, and can keep the original. */
.wb-plan-change {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 12px 14px 12px 16px;
    margin-bottom: var(--space-3, 12px);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--warning-color, #d97706);
    border-radius: 12px;
    background: var(--surface-color);
    font-size: var(--text-sm, 0.875rem);
}
.wb-plan-change__text { flex: 1 1 240px; min-width: 0; }
.wb-plan-change__why {
    display: block;
    margin-top: 4px;
    color: var(--text-secondary-color);
}
.wb-plan-change .btn { width: auto; flex: 0 0 auto; }
/* The nightly re-plan asks first (2026-10-19): its suggestion waits on today's planner for Apply or
   Keep my plan. The edge and icon take the kind of session that started it: harder, different, missed. */
:root { --tone-replan-harder: #ea580c; --tone-replan-different: #0284c7; --tone-replan-missed: #7c3aed; }
[data-theme='dark'] { --tone-replan-harder: #fb923c; --tone-replan-different: #38bdf8; --tone-replan-missed: #a78bfa; }
.wb-plan-change--ask { --replan-tone: var(--tone-replan-missed); align-items: flex-start; border-left-color: var(--replan-tone); }
.wb-plan-change--ask[data-kind='harder'] { --replan-tone: var(--tone-replan-harder); }
.wb-plan-change--ask[data-kind='different'] { --replan-tone: var(--tone-replan-different); }
.wb-plan-change__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--replan-tone);
    background: color-mix(in srgb, var(--replan-tone) 14%, transparent);
}
.wb-plan-change__days { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.wb-plan-change--ask .wb-plan-change__text { flex: 1 1 0; }
.wb-plan-change__days li { display: grid; grid-template-columns: 2.75em 1fr; gap: 6px; align-items: baseline; font-variant-numeric: tabular-nums; }
.wb-plan-change__day { font-weight: 600; }
.wb-plan-change__swap { display: flex; flex-wrap: wrap; gap: 2px 6px; min-width: 0; }
.wb-plan-change__before { color: var(--text-secondary-color); }
.wb-plan-change__after { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.wb-plan-change__arrow { color: var(--replan-tone); flex: 0 0 auto; }
.wb-plan-change__actions { display: flex; gap: 8px; flex: 1 0 100%; justify-content: flex-end; }
.wb-plan-change__actions .btn { white-space: nowrap; }
@media (max-width: 480px) {
    .wb-plan-change__actions .btn { flex: 1 1 0; }
}
/* Planner session list (SessionCards.tsx). Each card used two full-fill green buttons: .btn is
   width:100% and .btn-outline was never defined, so "Log" and "Select Session" both took the
   primary fill and the label wrapped to two lines (2026-10-06). One primary action per card now,
   a quiet Log beside it, and the buttons drop under the text on a phone. */
.wb-session-card {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 14px 16px 14px 18px;
    margin-bottom: 10px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}
.wb-session-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary-color);
}
.wb-session-card.is-done::before { background: var(--success-color); }
.wb-session-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 220px;
    min-width: 0;
}
.wb-session-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--primary-color-translucent);
    color: var(--primary-color);
}
.wb-session-text { min-width: 0; }
.wb-session-slot {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary-color);
}
.wb-session-name {
    margin: 2px 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-color);
    overflow-wrap: anywhere;
}
.wb-session-meta {
    font-size: 0.85rem;
    color: var(--text-secondary-color);
}
.wb-session-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
}
.wb-session-actions .btn.wb-session-btn,
.wb-session-dup .btn.wb-session-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-width: 0;
    min-height: 38px;
    margin-top: 0;
    padding: 8px 16px;
    border: 1px solid var(--primary-color);
    border-radius: 9px;
    background: var(--primary-color);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.wb-session-actions .btn.wb-session-btn--quiet,
.wb-session-dup .btn.wb-session-btn--quiet {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-color);
}
.wb-session-dup .btn.wb-session-btn--warn {
    border-color: var(--warning-color, #f59e0b);
    color: var(--warning-color, #f59e0b);
    min-height: 32px;
    padding: 6px 12px;
}
@media (hover: hover) {
    .wb-session-actions .btn.wb-session-btn--quiet:hover {
        background: var(--surface-color-hover);
        transform: none;
    }
}
.wb-session-done {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--success-color);
    font-size: 0.9rem;
    font-weight: 600;
}
.wb-session-note {
    flex-basis: 100%;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    font-size: 0.8rem;
    color: var(--text-secondary-color);
}
.wb-session-dup {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--warning-color, #f59e0b);
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.08);
}
.wb-session-dup-text {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--warning-color, #f59e0b);
}
.wb-session-dup-text strong { display: block; font-size: 0.8rem; }
.wb-session-dup-text span { display: block; font-size: 0.75rem; color: var(--text-secondary-color); }
@media (max-width: 480px) {
    .wb-session-actions {
        flex-basis: 100%;
        margin-left: 0;
    }
    .wb-session-actions .btn.wb-session-btn { flex: 1 1 0; }
}
/* Empty-state titles keep sentence case inside cards: `.card h3` uppercases every heading, which
   made "No sleep recorded yet" shout (HE-41, 2026-10-06). */
.card .empty-state-card h3 { text-transform: none; letter-spacing: normal; }
/* Home: Daily Snapshot tiles are buttons (DB-58); hover and keyboard focus without white-alpha fills. */
.snapshot-tile { transition: border-color 0.2s ease, transform 0.2s ease; }
.snapshot-tile:hover { border-color: var(--primary-color) !important; }
.snapshot-tile:active { transform: scale(0.98); }
.snapshot-tile:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
/* ---- Shell, wave 4 audit (SH-30, SH-69) ---- */
/* Names used across the app that no stylesheet defined, so every use fell back to its hard-coded
   (usually dark) colour or to nothing: light mode got navy cards and invisible text (SH-69). */
:root {
    --card-bg: var(--surface-color);
    --card-background: var(--surface-color);
    --surface-card: var(--surface-color);
    --surface-card-color: var(--surface-color);
    --text-primary: var(--text-color);
    --text-primary-color: var(--text-color);
    --text-muted: var(--text-secondary-color);
    --text-color-secondary: var(--text-secondary-color);
    --text-submit: var(--text-secondary-color);
    --border-color-dim: var(--border-color);
    --grit-teal: var(--primary-color);
}
/* Header buttons draw at 38px so the row fits a 375px phone, but answer taps across 44px (SH-30). */
.header-icon-btn::after,
.header-streak-badge::after {
    content: '';
    position: absolute;
    inset: -3px;
}
/* "How hard was it?" on the workout recaps (RpePicker.tsx, WK-35). Five a row on a phone. */
.rpe-picker { display: flex; flex-direction: column; gap: 0.5rem; margin-top: var(--space-4, 1rem); }
.rpe-picker-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.rpe-picker-title { font-weight: 700; font-size: var(--text-sm, 0.875rem); color: var(--text-color); }
.rpe-picker-value { font-size: var(--text-xs, 0.75rem); color: var(--text-secondary-color); font-variant-numeric: tabular-nums; }
.rpe-picker-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; }
@media (min-width: 480px) { .rpe-picker-scale { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.rpe-picker-chip:not(#_) {
    min-height: 44px; min-width: 0; margin: 0; padding: 0;
    border-radius: var(--radius-md, 10px);
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-color);
    font-size: 0.95rem; font-weight: 800; font-variant-numeric: tabular-nums;
    box-shadow: none; cursor: pointer;
}
.rpe-picker-chip.is-on:not(#_) {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--on-primary-color, #ffffff);
}
/* "Any pain?" on both workout recaps: a quiet link, not another button competing with Save. */
.recap-pain-link:not(#_) {
    display: inline-flex; align-items: center; gap: 6px;
    align-self: flex-start;
    min-height: 44px; margin: 0.25rem 0 0; padding: 0 0.25rem;
    border: none; background: transparent; box-shadow: none;
    color: var(--text-secondary-color);
    font-size: 0.85rem; font-weight: 700;
    text-decoration: underline; text-underline-offset: 3px;
    cursor: pointer;
}
.recap-pain-link:not(#_):hover, .recap-pain-link:not(#_):focus-visible { color: var(--primary-color); }
.recap-pain-intro { margin: 0 0 0.75rem; font-size: 0.85rem; line-height: 1.45; color: var(--text-secondary-color); }
/* Settings search (SH-77): above the section, results open the section at the card. */
.settings-search { position: relative; margin-bottom: 1rem; }
.settings-search input[type="search"]:not(#_) { width: 100%; min-height: 44px; font-size: 16px; box-sizing: border-box; }
.settings-search-results {
    list-style: none; margin: 0.35rem 0 0; padding: 0.35rem;
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    background: var(--surface-color); box-shadow: var(--shadow-lg);
}
.settings-search-results button {
    width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.5rem 0.75rem; border: none; border-radius: var(--radius-sm); background: none;
    color: var(--text-color); font: inherit; text-align: left; cursor: pointer;
}
.settings-search-results button:hover, .settings-search-results button:focus-visible { background: var(--surface-color-hover); }
.settings-search-title { font-weight: 600; font-size: 0.95rem; }
.settings-search-section { flex-shrink: 0; font-size: 0.8rem; color: var(--text-secondary-color); }
.settings-search-empty { padding: 0.6rem 0.75rem; font-size: 0.9rem; color: var(--text-secondary-color); }
.settings-search-hit { outline: 2px solid var(--primary-color); outline-offset: 2px; transition: outline-color 0.3s; }
/* Auto-share on a workout recap (SH-14): what Save will post, and "Don't share this one". */
.recap-auto-share {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
    margin: 0.5rem 0 0; padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    background: var(--surface-color);
    color: var(--text-secondary-color); font-size: 0.85rem; line-height: 1.4;
}
.recap-auto-share > svg { color: var(--primary-color); flex-shrink: 0; }
.recap-auto-share-text { flex: 1 1 12rem; min-width: 0; }
.recap-auto-share-skip:not(#_) {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; margin: 0; cursor: pointer;
    color: var(--text-color); font-weight: 600; font-size: 0.85rem;
}
.recap-auto-share-skip input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary-color); }
/* A fit.grit.bot link opened in the phone app: the live viewer or Strava's return, over the app
   and under the lock screen (z-index 99999), clear of the status bar and the home indicator. */
.in-app-link-screen {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; flex-direction: column;
    padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
    background: var(--background-color);
    color: var(--text-color);
}
.in-app-link-screen--map { background: #000; }
.in-app-link-screen > * { flex: 1; min-height: 0; }
.in-app-link-screen > .full-page-loader {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
/* Weekly Recap: the newest weekly review and monthly recap (DB-67). :not(#_) outranks the global
   button rules, the way .recap-pain-link does. */
.recap-link:not(#_) {
    display: flex; align-items: center; gap: 0.75rem; width: 100%;
    min-height: 44px; padding: 0.75rem; margin: 0;
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    background: var(--surface-color-hover); box-shadow: none;
    color: var(--text-color); text-align: left; cursor: pointer;
}
.recap-link:not(#_):focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.recap-link__icon {
    width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md); background: rgba(var(--primary-rgb), 0.12); color: var(--primary-color);
}
.recap-link__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.recap-link__title { font-size: var(--text-xs); font-weight: 700; }
.recap-link__sub { font-size: var(--text-2xs); color: var(--text-secondary-color); line-height: 1.35; }
.recap-link:not(#_) > svg { color: var(--text-secondary-color); flex: none; }
/* Weekly Recap: fitness, fatigue and form today (DB-65). Three equal cells, fine at 375px. */
.pmc-strip {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2);
    margin-top: var(--space-3);
}
.pmc-strip__cell {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
    padding: var(--space-2) var(--space-1);
    border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color-hover);
}
.pmc-strip__label { font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary-color); }
.pmc-strip__value { font-size: var(--text-xl); font-weight: 800; color: var(--text-color); line-height: 1.1; font-variant-numeric: tabular-nums; }
.pmc-strip__sub { font-size: var(--text-2xs); color: var(--text-secondary-color); line-height: 1.3; }
/* Personal Records: a lift's estimated 1RM over 12 weeks under its name (DB-68). */
.pr-e1rm {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 4px;
    font-size: var(--text-2xs); font-weight: 600; color: var(--text-secondary-color);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pr-e1rm__row { display: inline-flex; align-items: center; gap: 6px; }
/* Brick legs entered by hand (WK-12): the entry form, and the recap's "entered" / "not recorded". */
.cc-segment-tag {
    margin-left: 0.4rem; padding: 1px 6px; border-radius: 999px;
    border: 1px solid var(--border-color); color: var(--text-secondary-color);
    font-size: var(--text-2xs); font-weight: 700; vertical-align: middle;
}
.cc-segment-missing .cc-segment-name, .cc-segment-missing .cc-segment-dose { color: var(--text-secondary-color); font-weight: 600; }
.brick-entry { display: flex; flex-direction: column; gap: var(--space-4); text-align: left; }
.brick-entry-title { margin: 0; font-size: var(--text-xl); font-weight: 900; color: var(--text-color); }
.brick-entry-intro { margin: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--text-secondary-color); }
.brick-entry-leg { margin: 0; padding: var(--space-3) var(--space-4) var(--space-4); border: 1px solid var(--border-color); border-radius: var(--radius-md); min-width: 0; }
.brick-entry-leg-name { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; font-weight: 800; color: var(--text-color); }
.brick-entry-planned { font-size: var(--text-2xs); font-weight: 600; color: var(--text-secondary-color); }
.brick-entry-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-3); }
.brick-entry-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary-color); }
.brick-entry-field input {
    min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-sm);
    border: 1px solid var(--border-color); background: var(--background-color); color: var(--text-color);
    font-size: 16px; font-weight: 700; width: 100%; box-sizing: border-box;
}
.brick-entry-field input:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 1px; }
.brick-entry-error { margin: var(--space-2) 0 0; font-size: var(--text-xs); font-weight: 700; color: var(--error-color); }
.brick-entry-actions { display: flex; flex-direction: column; gap: var(--space-3); }
.brick-entry-actions .btn { min-height: 48px; width: 100%; }
/* "Already did this?" on the planner (WK-15): a recorded workout offered as a plan's completion. */
.plan-match { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0; }
.plan-match-card {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--primary-color) 35%, var(--border-color));
    background: color-mix(in srgb, var(--primary-color) 7%, var(--surface-color));
    color: var(--text-color); text-align: left;
}
.plan-match-card.is-done { border-color: var(--border-color); background: var(--surface-color); }
.plan-match-icon { flex: 0 0 auto; margin-top: 2px; color: var(--primary-color); }
.plan-match-text { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plan-match-text strong { font-size: var(--text-sm); font-weight: 800; }
.plan-match-text span { font-size: var(--text-xs); line-height: 1.4; color: var(--text-secondary-color); }
.plan-match-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: 1 1 100%; justify-content: flex-end; }
.plan-match-btn { min-height: 44px; padding: 0 var(--space-4); font-size: var(--text-sm); font-weight: 700; }
/* The interval builder in Track Cardio (WK-17). */
.ib { display: flex; flex-direction: column; gap: var(--space-4); color: var(--text-color); }
.ib-section { display: flex; flex-direction: column; gap: var(--space-2); }
.ib-section-title { font-size: var(--text-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary-color); }
.ib-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
.ib-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; padding: 0; border: none; font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary-color); }
.ib-field legend { padding: 0; margin-bottom: 4px; }
.ib-field select, .ib-number input, .ib-note-field input {
    min-height: 44px; width: 100%; box-sizing: border-box; padding: 0 var(--space-3);
    border-radius: var(--radius-sm); border: 1px solid var(--border-color);
    background: var(--background-color); color: var(--text-color); font-size: 16px; font-weight: 700;
}
/* The app's select padding (14px / 42px) cut "Z1 Recovery" to "Z1 Reco..." in a half-width column. */
.ib .ib-field select:not(#_) { padding: 0 30px 0 10px !important; font-weight: 600; text-overflow: ellipsis; background-position: right 8px center !important; }
.ib-number { position: relative; display: flex; align-items: center; min-width: 0; }
.ib-number input { padding-right: 2.6rem; }
.ib-suffix { position: absolute; right: var(--space-3); font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary-color); pointer-events: none; }
.ib-note-field { margin-top: var(--space-3); }
.ib-note-field input { font-weight: 500; }
.ib-duration-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.ib-field select:focus-visible, .ib-number input:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 1px; }
.ib-summary { margin: 0; font-size: var(--text-sm); font-weight: 800; color: var(--text-color); }
.ib-note { margin: 0; font-size: var(--text-xs); line-height: 1.45; color: var(--text-secondary-color); }
/* Timed cues inside the work bout (TrainerRoad-style workout text), 2026-10-17. */
.ib-cues { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.ib-cues-head { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary-color); }
.ib-cues-count { font-variant-numeric: tabular-nums; }
.ib-cue { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--border-color); }
.ib-cue-late { border-color: #eab308; }
.ib-cue-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) 44px; gap: var(--space-2); align-items: center; }
.ib-cue-at { font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary-color); }
.ib-cue-text { min-height: 44px; width: 100%; box-sizing: border-box; padding: 0 var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--background-color); color: var(--text-color); font-size: 16px; font-weight: 500; }
.ib-cue-remove { min-width: 44px; min-height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary-color); font-size: 20px; font-weight: 700; line-height: 1; }
.ib-cue-add { align-self: flex-start; min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-sm); border: 1px dashed var(--border-color); background: transparent; color: var(--primary-color); font-size: var(--text-sm); font-weight: 800; }
.ib-cue-warn { font-size: var(--text-xs); font-weight: 700; color: #eab308; }
.ib-cue-text:focus-visible, .ib-cue-remove:focus-visible, .ib-cue-add:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 1px; }
/* Coach crisis / disordered-eating reply: the helplines as buttons (PH-58). Calm, not alarm red. */
.crisis-card {
    margin-top: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid rgba(var(--primary-color-rgb), 0.35);
    background: rgba(var(--primary-color-rgb), 0.08);
    color: var(--text-color);
    white-space: normal;
}
.crisis-card__head { display: flex; align-items: center; gap: var(--space-2); font-weight: 800; font-size: var(--text-sm); color: var(--primary-color); }
.crisis-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.crisis-card__btn {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 0 var(--space-4);
    border-radius: var(--radius-full);
    background: var(--primary-color); color: #fff;
    font-weight: 700; font-size: var(--text-sm); text-decoration: none;
}
.crisis-card__btn:hover, .crisis-card__btn:focus-visible { filter: brightness(1.08); color: #fff; }
.crisis-card__note { margin: var(--space-2) 0 0; font-size: var(--text-2xs); color: var(--text-secondary-color); line-height: 1.45; }
/* Daily Journal: past entries and the journaling/sleep line (PH-61). */
.journal-history { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-color); }
.journal-history__stat { margin: 0 0 var(--space-2); font-size: var(--text-xs); line-height: 1.45; color: var(--text-secondary-color); }
.journal-history__toggle {
    min-height: 44px; padding: 0; border: none; background: transparent;
    color: var(--primary-color); font-weight: 700; font-size: var(--text-sm); cursor: pointer;
}
.journal-history__list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.journal-history__list li { padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-color-hover); border: 1px solid var(--border-color); }
.journal-history__list strong { display: block; font-size: var(--text-xs); color: var(--text-secondary-color); margin-bottom: 4px; }
.journal-history__grateful { display: block; font-size: var(--text-sm); color: var(--text-color); }
.journal-history__list p { margin: 6px 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--text-color); white-space: pre-wrap; }
/* Illness & pain on the Health tab (HE-30, 2026-10-08): IllnessPainCard, IllnessReporter, PainReporter, BodyMap. */
.illness-card { display: flex; flex-direction: column; gap: var(--space-3); }
.illness-empty, .illness-intro { margin: 0; font-size: var(--text-sm); color: var(--text-secondary-color); line-height: 1.45; }
.illness-active {
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-3); border-radius: var(--radius-md);
    background: var(--background-color); border: 1px solid var(--carbs-color);
}
.illness-active-head { display: flex; align-items: center; gap: var(--space-2); color: var(--carbs-color); }
.illness-active-head > div { display: flex; flex-direction: column; }
.illness-active-head strong { font-size: var(--text-md); color: var(--text-color); }
.illness-active-head span { font-size: var(--text-xs); color: var(--text-secondary-color); }
.illness-symptoms { margin: 0; font-size: var(--text-sm); color: var(--text-color); }
.illness-effect { margin: 0; font-size: var(--text-sm); font-weight: 700; color: var(--text-color); }
.illness-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.illness-actions > .btn { flex: 1 1 0; min-height: 44px; margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; }
.illness-pain-list, .illness-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.illness-pain-list li {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
    background: var(--background-color); border: 1px solid var(--border-color); color: var(--text-color);
}
.illness-pain-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.illness-pain-text strong { font-size: var(--text-sm); }
.illness-pain-text span { font-size: var(--text-xs); color: var(--text-secondary-color); }
.illness-pain-list .btn { min-height: 44px; width: auto; margin: 0; }
.illness-history-toggle {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 0; border: none; background: none; cursor: pointer;
    font-size: var(--text-xs); font-weight: 700; color: var(--primary-color);
}
.illness-history li { display: flex; flex-direction: column; font-size: var(--text-xs); color: var(--text-secondary-color); }
.illness-history li strong { font-size: var(--text-sm); color: var(--text-color); }
.illness-disclaimer { margin: 0; font-size: var(--text-2xs); color: var(--text-secondary-color); line-height: 1.4; }
.illness-form { display: flex; flex-direction: column; gap: var(--space-4); color: var(--text-color); }
.illness-fieldset { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.illness-fieldset legend, .illness-field > span:first-child {
    display: inline-flex; align-items: center; gap: 6px; padding: 0; margin-bottom: var(--space-2);
    font-size: var(--text-sm); font-weight: 700; color: var(--text-color);
}
.illness-field > span:first-child { margin-bottom: 0; }
.illness-field { display: flex; flex-direction: column; gap: var(--space-2); }
.illness-field input, .illness-field select, .illness-field textarea, .illness-temp input {
    font-size: 16px; padding: 10px 12px; border-radius: var(--radius-md);
    border: 1px solid var(--input-border, var(--border-color)); background: var(--input-bg, var(--surface-color));
    color: var(--text-color); min-height: 44px; box-sizing: border-box; width: 100%;
}
.illness-field input[type="range"] { padding: 0; border: none; background: none; accent-color: var(--primary-color); }
.illness-field textarea { resize: vertical; font-family: inherit; }
.illness-range-ends { display: flex; justify-content: space-between; font-size: var(--text-2xs); color: var(--text-secondary-color); }
.illness-temp { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-xs); color: var(--text-secondary-color); }
.illness-temp-input { display: flex; align-items: center; gap: var(--space-2); max-width: 180px; color: var(--text-color); font-size: var(--text-sm); }
.illness-hint { margin: 0; font-size: var(--text-xs); color: var(--text-secondary-color); line-height: 1.4; }
.illness-error { margin: 0; font-size: var(--text-xs); font-weight: 700; color: var(--error-color); }
.health-chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.health-chip {
    min-height: 44px; padding: 0 14px; border-radius: var(--radius-full); cursor: pointer;
    border: 1px solid var(--border-color); background: transparent; color: var(--text-color);
    font-size: var(--text-xs); font-weight: 700;
}
.health-chip.selected { background: rgba(var(--primary-color-rgb), 0.12); border-color: var(--primary-color); color: var(--primary-text); }
.health-segmented { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-md); background: var(--background-color); border: 1px solid var(--border-color); }
.health-segmented button {
    flex: 1 1 0; min-height: 44px; border: none; border-radius: var(--radius-sm); cursor: pointer;
    background: transparent; color: var(--text-secondary-color); font-size: var(--text-sm); font-weight: 700;
}
.health-segmented button.active { background: var(--primary-fill); color: var(--on-primary-color); }
.health-safety-note {
    display: flex; gap: var(--space-2); align-items: flex-start;
    padding: var(--space-3); border-radius: var(--radius-md);
    background: var(--background-color); border: 1px solid var(--border-color);
    font-size: var(--text-xs); line-height: 1.45; color: var(--text-secondary-color);
}
.health-safety-note svg { flex: 0 0 auto; color: var(--warning-text); margin-top: 1px; }
.body-map { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); width: 100%; }
.body-map-toggle { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-md); background: var(--background-color); border: 1px solid var(--border-color); }
.body-map-toggle button {
    min-height: 44px; min-width: 88px; border: none; border-radius: var(--radius-sm); cursor: pointer;
    background: transparent; color: var(--text-secondary-color); font-size: var(--text-sm); font-weight: 700;
}
.body-map-toggle button.active { background: var(--primary-fill); color: var(--on-primary-color); }
.body-map-svg { width: 100%; max-width: 280px; height: auto; }
/* Joints (HM-17): a dot with a transparent 32-unit hit circle, about 45px at 280px wide. */
.body-map-joint { cursor: pointer; outline: none; }
.body-map-hit { fill: transparent; }
.body-map-dot { fill: var(--surface-color); stroke: var(--text-secondary-color); stroke-width: 1.5; transition: fill 0.15s ease; }
.body-map-joint:hover .body-map-dot { fill: var(--primary-color-translucent, var(--border-color)); }
.body-map-joint:focus-visible .body-map-hit { stroke: var(--primary-color); stroke-width: 2; }
.body-map-joint.selected .body-map-dot { fill: var(--primary-color); stroke: var(--text-color); }
.body-map-silhouette { fill: var(--background-color); stroke: var(--border-color); stroke-width: 1.2; }
.body-map-region { fill: var(--surface-color-hover, var(--surface-color)); stroke: var(--text-secondary-color); stroke-opacity: 0.5; stroke-width: 0.8; stroke-linejoin: round; cursor: pointer; transition: fill 0.15s ease; }
.body-map-region:hover { fill: var(--primary-color-translucent, var(--border-color)); }
.body-map-region:focus-visible { outline: none; stroke: var(--primary-color); stroke-width: 2; stroke-opacity: 1; }
.body-map-region.selected { fill: var(--primary-color); stroke: var(--text-color); stroke-opacity: 1; stroke-width: 1.5; }
.body-map-caption { margin: 0; min-height: 1.5em; font-size: var(--text-sm); color: var(--text-secondary-color); }
.body-map-caption strong { color: var(--primary-color); }
.body-map-side { fill: var(--text-secondary-color); font-size: 14px; font-weight: 800; }
/* The night's stages in order (HE-48, HypnogramChart). Labels are HTML so the stretched SVG never squashes them. */
.hypnogram { display: grid; grid-template-columns: auto minmax(0, 1fr); -moz-column-gap: var(--space-2); column-gap: var(--space-2); row-gap: 4px; }
.hypnogram-lanes { display: grid; grid-template-rows: repeat(4, 1fr); height: 100px; }
.hypnogram-lanes span { display: flex; align-items: center; font-size: var(--text-2xs); font-weight: 700; color: var(--text-secondary-color); }
.hypnogram-svg { width: 100%; min-width: 0; height: 100px; display: block; overflow: hidden; }
.hypnogram-grid { stroke: var(--border-color); stroke-width: 1; stroke-dasharray: 2 3; }
.hypnogram-times { grid-column: 2; display: flex; justify-content: space-between; font-size: var(--text-2xs); color: var(--text-secondary-color); font-weight: 600; }
/* Readiness contributors (HE-49/HE-50): what is behind the number, and the athlete's usual range. */
.readiness-contributors { padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--border-color); background: var(--surface-color); color: var(--text-color); }
.readiness-contributors .rc-title { margin-bottom: var(--space-3); }
.readiness-contributors ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.readiness-contributors li { display: flex; flex-direction: column; gap: 4px; padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-color); }
.readiness-contributors li:last-child { border-bottom: none; padding-bottom: 0; }
.rc-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.rc-label { font-size: var(--text-sm); font-weight: 700; }
.rc-value { font-size: var(--text-md); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.readiness-contributors li.concern .rc-value { color: var(--warning-text); }
.rc-detail { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: var(--text-xs); color: var(--text-secondary-color); line-height: 1.4; }
.rc-basis { font-size: var(--text-2xs); font-weight: 800; padding: 1px 8px; border-radius: var(--radius-full); border: 1px solid var(--border-color); white-space: nowrap; }
.rc-basis-measured { color: var(--primary-text); border-color: currentColor; }
.rc-basis-self { color: var(--primary-text); border-color: currentColor; }
/* Trend weight under the weight chart (HE-52). */
.weight-trend-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary-color); }
.weight-trend-row strong { color: var(--text-color); font-weight: 800; }
/* "Share with your doctor" under the vitals tiles (HE-53). */
/* Layout only: its colours are the shared .btn-secondary (UX-04). */
.health-doctor-btn { margin-top: var(--space-3); font-size: var(--text-sm); }
/* Gemini consent for older accounts (AiConsentSheet, App Review 5.1.2(i)). */
.ai-consent-backdrop { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: flex-end; justify-content: center; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: rgba(0, 0, 0, 0.55); }
.ai-consent-sheet { width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box; padding: 1.25rem; background: var(--surface-color); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
.ai-consent-sheet h2 { margin: 0 0 0.75rem; font-size: 1.15rem; font-weight: 800; }
.ai-consent-sheet p { margin: 0 0 0.75rem; font-size: 0.9rem; line-height: 1.45; }
.ai-consent-sheet .ai-consent-note { color: var(--text-secondary-color); font-size: 0.85rem; }
.ai-consent-sheet a { color: var(--primary-color); text-decoration: underline; }
.ai-consent-icon { width: 44px; height: 44px; margin-bottom: 0.75rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--primary-color); background: rgba(var(--primary-color-rgb), 0.12); }
.ai-consent-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }
.ai-consent-actions .btn { flex: 1 1 0; min-height: 44px; }
@media (min-width: 600px) { .ai-consent-backdrop { align-items: center; } }
/* =============================================================================================
   Nutrition tab (Wave 3A, review 2026-10-09 §4): Today · Plan · Cookbook · Groceries · Trends.
   Owned by NutritionTab.tsx, NutritionLeftToday.tsx, NutritionTrends.tsx, FuelingCard.tsx and
   AIMealPlanner.tsx. Colours come from the theme variables so the light theme works.
   ============================================================================================= */
.nutrition-tab { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.nutrition-subnav { position: sticky; top: 0; z-index: 20; margin: 0 calc(-1 * var(--space-2)); padding: var(--space-2); background: var(--background-color); }
.nutrition-subnav.is-desktop { position: static; margin: 0; padding: 0; background: transparent; }
.nutrition-subnav-track { display: flex; gap: 4px; padding: 4px; overflow-x: auto; scrollbar-width: none; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.nutrition-subnav-track::-webkit-scrollbar { display: none; }
.nutrition-subnav-btn { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 6px 12px; border: none; border-radius: calc(var(--radius-lg) - 4px); background: transparent; color: var(--text-secondary-color); font-size: var(--text-sm); font-weight: 700; cursor: pointer; white-space: nowrap; }
.nutrition-subnav-btn.active { background: var(--primary-color); color: #fff; }
.nutrition-subnav-btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
@media (max-width: 420px) { .nutrition-subnav-btn { padding: 6px 8px; font-size: var(--text-xs); } .nutrition-subnav-btn svg { display: none; } }
.nutrition-subtab-panel { min-width: 0; }
/* The meal box, shortcuts and suggestions sat flush to the screen edge on a phone and the box's
   buttons were cut off (2026-10-26). A small side inset; min-width 0 lets the chip rows scroll. */
.quick-log-inset { margin-inline: var(--space-2); min-width: 0; }
.nutrition-stack { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.nutrition-narrow { max-width: 760px; width: 100%; margin: 0 auto; }
.nutrition-today-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5); align-items: start; }
.nutrition-today-main, .nutrition-today-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.nutrition-card-heading { margin: 0 0 var(--space-3); text-align: center; color: var(--text-color); font-size: 1.25rem; font-weight: 900; letter-spacing: -0.01em; }
/* One card heading for every Nutrition card (owner review 2026-10-10): the GlassCard title look,
   centered. A status badge sits at the right of the heading row, as GlassCard's headerAction does. */
.nutrition-card-head { position: relative; display: flex; justify-content: center; align-items: center; min-height: 1.75rem; margin-bottom: var(--space-3); }
/* The global .glass-card-title rule sets padding: 0 !important, so the badge gutter needs !important too:
   equal gutters on both sides keep the title centred and clear of the badge. */
.nutrition-card-head .nutrition-card-heading { margin: 0 !important; padding: 0 5.5rem !important; box-sizing: border-box; }
.nutrition-card-badge { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: var(--text-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.15rem 0.55rem; border-radius: 999px; border: 1px solid var(--border-color); color: var(--text-secondary-color); white-space: nowrap; }
@media (max-width: 520px) { .nutrition-card-head { flex-direction: column; gap: 6px; } .nutrition-card-head .nutrition-card-heading { padding: 0 !important; } .nutrition-card-badge { position: static; transform: none; } }
/* A group label inside a card (not a card title): small, muted, centred, the same at every width. */
.nutrition-subhead { margin: 0 !important; text-align: center; font-size: var(--text-xs) !important; font-weight: 800 !important; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4 !important; color: var(--text-secondary-color) !important; }
.nutrition-today-date { margin: 0; text-align: center; font-size: var(--text-sm); font-weight: 700; color: var(--text-secondary-color); }
.nutrition-ask-coach { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; width: 100%; }
/* "Left today" strip */
.nutrition-left-today { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.nutrition-left-today > .nutrition-card-heading { margin-bottom: 0 !important; }
.nlt-cal-number { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.nlt-big { font-size: 2rem; font-weight: 900; color: var(--text-color); font-variant-numeric: tabular-nums; line-height: 1; }
.nlt-cal-number.is-over .nlt-big { color: var(--error-color); }
.nlt-unit { font-size: var(--text-sm); font-weight: 700; color: var(--text-secondary-color); }
.nlt-cal-caption { text-align: center; font-size: var(--text-xs); color: var(--text-secondary-color); margin-top: 2px; }
.nlt-bar { height: 6px; border-radius: 999px; background: var(--input-bg); overflow: hidden; margin-top: 6px; }
.nlt-bar.small { height: 4px; margin-top: 4px; }
.nlt-bar > span { display: block; height: 100%; border-radius: inherit; }
.nlt-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.nlt-macro-value { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; }
.nlt-macro-value strong { font-size: 1.05rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.nlt-macro-value span { font-size: var(--text-xs); color: var(--text-secondary-color); font-weight: 600; }
.nlt-breakdown { text-align: center; font-size: var(--text-xs); color: var(--text-secondary-color); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Teaching empty states */
.nutrition-empty-teach { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); }
.nutrition-empty-teach.compact { padding: var(--space-4) var(--space-3); background: var(--input-bg); border: 1px dashed var(--border-color); border-radius: var(--radius-lg); }
.net-icon { color: var(--primary-color); display: inline-flex; }
.net-title { margin: 0; font-weight: 800; font-size: var(--text-md); color: var(--text-color); }
.net-body { margin: 0; max-width: 460px; font-size: var(--text-sm); line-height: 1.5; color: var(--text-secondary-color); }
.net-progress { display: flex; gap: 6px; margin-top: var(--space-2); }
.net-progress span { width: 36px; height: 8px; border-radius: 999px; background: var(--input-bg); border: 1px solid var(--border-color); }
.net-progress span.done { background: var(--primary-color); border-color: var(--primary-color); }
.net-count { margin: 0; font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary-color); }
.net-action { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; width: auto; margin-top: var(--space-2); }
/* Trends */
.nutrition-trends-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.ntg-item { min-width: 0; }
@media (max-width: 1024px) { .nutrition-trends-grid { grid-template-columns: minmax(0, 1fr); } }
/* Fuelling card */
/* One compact card (owner review round 2, 2026-10-11): day chip, targets line, one before/after
   row with at most two short foods, and "Why this plan" collapsed. */
.fueling-empty { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: var(--text-sm); color: var(--text-secondary-color); line-height: 1.45; }
.fuel-body { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); min-width: 0; }
.fuel-day { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; min-width: 0; }
.fuel-day-chip { --fuel-accent: var(--primary-color); display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--fuel-accent) 45%, transparent); background: color-mix(in srgb, var(--fuel-accent) 10%, transparent); color: var(--text-color); font-size: var(--text-sm); font-weight: 700; min-width: 0; }
.fuel-day-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 999px; background: var(--fuel-accent); }
.fuel-day-text { min-width: 0; overflow-wrap: anywhere; }
.fuel-day-delta { font-size: var(--text-xs); font-weight: 800; color: var(--text-secondary-color); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fuel-targets { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 8px; margin: 0; font-size: var(--text-sm); color: var(--text-secondary-color); font-variant-numeric: tabular-nums; }
.fuel-targets strong { color: var(--text-color); font-weight: 900; }
.fuel-sep { color: var(--text-secondary-color); }
.fuel-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); min-width: 0; }
@media (max-width: 480px) { .fuel-sides { grid-template-columns: minmax(0, 1fr); } }
.fuel-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: var(--space-2) var(--space-3); background: var(--input-bg); border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.fuel-side-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; color: var(--text-color); }
.fuel-side-head strong { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); }
.fuel-side-when { font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary-color); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fuel-side-amount { font-size: var(--text-xs); font-weight: 600; color: var(--text-color); }
.fuel-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin-top: 2px; }
.fuel-chip { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; min-height: 36px; padding: 4px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--primary-color) 45%, transparent); background: var(--surface-color); color: var(--primary-color); font-size: var(--text-xs); font-weight: 700; cursor: pointer; }
.fuel-chip > span { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fuel-chip.is-static { cursor: default; min-height: 0; border-color: var(--border-color); color: var(--text-color); }
.fuel-during { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: var(--text-xs); color: var(--text-secondary-color); }
.fuel-why { border-top: 1px solid var(--border-color); padding-top: var(--space-2); }
.fuel-why > summary { display: flex; align-items: center; justify-content: center; min-height: 36px; cursor: pointer; font-size: var(--text-xs); font-weight: 800; color: var(--primary-color); list-style: none; }
.fuel-why > summary::-webkit-details-marker { display: none; }
.fuel-why > summary::after { content: '+'; margin-left: 6px; font-weight: 900; }
.fuel-why[open] > summary::after { content: '−'; }
.fuel-why-body { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-1); font-size: var(--text-sm); line-height: 1.5; color: var(--text-secondary-color); }
.fuel-why-body p { margin: 0; }
.fuel-why-drivers { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: var(--text-xs); }
.fuel-why-drivers dt { font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary-color); }
.fuel-why-drivers dd { margin: 0; color: var(--text-color); overflow-wrap: anywhere; }
.fuel-why-note { font-size: var(--text-xs); }
/* Session carb coding (Wave 5A): the meal chip and the day's carb plan in the Fuelling card */
.meal-carb-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; max-width: 100%; font-size: var(--text-xs); line-height: 1.3; }
.meal-carb-chip-code { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-weight: 800; letter-spacing: 0.02em; border: 1px solid var(--border-color); color: var(--text-color); background: var(--input-bg); white-space: nowrap; }
.meal-carb-chip.is-high .meal-carb-chip-code { border-color: var(--primary-color); color: var(--primary-color); }
.meal-carb-chip.is-low .meal-carb-chip-code { color: var(--text-secondary-color); }
.meal-carb-chip-role { color: var(--text-secondary-color); }
/* Race fuel plan (DEKA / HYROX) */
.race-fuel-card .rf-body { display: flex; flex-direction: column; gap: var(--space-3); }
.rf-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
@media (max-width: 560px) { .rf-inputs { grid-template-columns: minmax(0, 1fr); } }
.rf-inputs label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary-color); min-width: 0; }
.rf-inputs input, .rf-inputs select { min-height: 44px; width: 100%; box-sizing: border-box; }
.rf-summary { margin: 0; font-size: var(--text-sm); color: var(--text-color); line-height: 1.45; }
.rf-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.rf-step { padding: var(--space-3); background: var(--input-bg); border: 1px solid var(--border-color); border-radius: var(--radius-md); min-width: 0; }
.rf-step-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rf-step-head strong { color: var(--text-color); font-size: var(--text-sm); }
.rf-step-when { font-size: var(--text-xs); color: var(--text-secondary-color); }
.rf-step p { margin: 4px 0 0; font-size: var(--text-sm); color: var(--text-color); line-height: 1.45; overflow-wrap: anywhere; }
.rf-doses { margin: 6px 0 0; padding-left: 1.1rem; font-size: var(--text-sm); color: var(--text-color); }
.rf-warnings { margin: 0; padding-left: 1.1rem; font-size: var(--text-xs); color: var(--text-secondary-color); line-height: 1.45; }
.rf-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rf-actions .btn { min-height: 44px; flex: 1 1 160px; }
.rf-disclaimer { margin: 0; font-size: var(--text-xs); color: var(--text-secondary-color); }
/* Fuel taken during a workout (players) */
.intra-fuel { position: fixed; left: 12px; top: calc(env(safe-area-inset-top, 0px) + 45vh); z-index: 2100; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.intra-fuel-btn { min-height: 44px; min-width: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--primary-color); background: var(--surface-color); color: var(--primary-color); font-weight: 800; font-size: var(--text-sm); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); cursor: pointer; }
.intra-fuel.is-inline { position: static; flex-direction: row; align-items: center; gap: 6px; z-index: auto; }
.intra-fuel.is-inline .intra-fuel-btn { min-height: 44px; padding: 6px 12px; box-shadow: none; white-space: nowrap; }
.intra-fuel.is-inline .intra-fuel-meta { box-shadow: none; background: transparent; color: var(--text-secondary-color); padding: 0; white-space: nowrap; max-width: 38vw; overflow: hidden; text-overflow: ellipsis; }
.intra-fuel-meta { padding: 2px 8px; border-radius: 999px; background: var(--surface-color); color: var(--text-color); font-size: var(--text-xs); font-weight: 700; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
.intra-fuel-sheet { display: flex; flex-direction: column; gap: var(--space-3); }
.intra-fuel-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.intra-fuel-presets .btn { min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.intra-fuel-presets small { font-weight: 500; color: var(--text-secondary-color); }
.intra-fuel-custom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.intra-fuel-custom label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary-color); min-width: 0; }
.intra-fuel-custom input { min-height: 44px; width: 100%; box-sizing: border-box; }
.intra-fuel-list { margin: 0; padding-left: 1.1rem; font-size: var(--text-sm); color: var(--text-color); }
.recap-fuel { margin-top: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--input-bg); font-size: var(--text-sm); color: var(--text-color); }
.recap-fuel strong { display: block; margin-bottom: 4px; }
/* Meal plan (AIMealPlanner) */
/* One primary action, two small secondaries on one row (owner review round 2, 2026-10-11). */
.meal-plan-actions-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-4); }
.meal-plan-actions-row .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; }
.meal-plan-actions-row .mpa-primary { flex: 0 0 auto; min-height: 44px; padding: 0 1.25rem; font-size: var(--text-sm); font-weight: 800; }
.mpa-secondary { display: flex; gap: var(--space-2); min-width: 0; }
.mpa-secondary .btn { flex: 0 0 auto; min-height: 40px; padding: 0 0.85rem; font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
@media (max-width: 520px) {
    .meal-plan-actions-row .mpa-primary { flex: 1 1 100%; }
    .mpa-secondary { flex: 1 1 100%; }
    .mpa-secondary .btn { flex: 1 1 0; min-width: 0; padding: 0 0.5rem; }
}
.meal-plan-card .fueling-card { margin-bottom: var(--space-3); height: auto !important; }
.meal-plan-working { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); background: var(--input-bg); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.mpw-title { font-size: 0.95rem; font-weight: 700; color: var(--text-color); }
.mpw-detail { font-size: var(--text-xs); color: var(--text-secondary-color); margin-top: 2px; line-height: 1.45; }
.meal-plan-error { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--error-color); border-radius: var(--radius-md); color: var(--error-color); background: var(--input-bg); font-size: var(--text-sm); }
.meal-plan-stale { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--carbs-color); border-radius: var(--radius-md); color: var(--text-color); background: var(--input-bg); font-size: var(--text-sm); }
.meal-plan-stale > span { flex: 1 1 14rem; }
.meal-plan-warning { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--warning-color, #f59e0b); color: var(--text-color); font-size: var(--text-sm); font-weight: 700; }
.meal-plan-note { display: flex; align-items: flex-start; gap: 0.6rem; flex-wrap: wrap; padding: 0.65rem 0.85rem; margin-bottom: var(--space-2); background: var(--input-bg); border: 1px dashed var(--border-color); border-radius: var(--radius-lg); }
.mpn-title { font-weight: 800; font-size: 0.82rem; color: var(--text-color); }
.mpn-body { margin: 0.15rem 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--text-secondary-color); }
.plan-vs-target { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px; padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary-color); background: var(--input-bg); border-radius: var(--radius-md); }
.plan-vs-target strong { color: var(--text-color); font-weight: 900; }
.pvt-delta { font-weight: 800; color: var(--success-color); font-variant-numeric: tabular-nums; }
.pvt-delta.is-over { color: var(--warning-color, #f59e0b); }
.meal-plan-headcount { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.5rem 0.75rem; margin-bottom: var(--space-2); background: var(--input-bg); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.mph-title { font-size: 0.78rem; font-weight: 700; color: var(--text-color); }
.mph-sub { display: block; font-size: var(--text-2xs); color: var(--text-secondary-color); }
.mph-stepper { display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0; }
.mph-stepper .btn { width: auto; min-width: 40px; min-height: 40px; padding: 2px 8px; }
.mph-count { min-width: 20px; text-align: center; font-weight: 800; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.meal-plan-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); flex-wrap: wrap; }
.meal-plan-name { flex: 1 1 160px; min-width: 0; }
.meal-plan-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.35rem; margin-left: auto; }
.meal-plan-actions .btn { min-height: 36px; }
.meal-icon-btn { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; border-radius: var(--radius-md); color: var(--text-color); }
.meal-detail-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); }
@media (max-width: 480px) { .meal-detail-columns { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } }
.meal-detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.meal-plan-footer { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-color); }
.meal-plan-footer .btn { flex: 1 1 140px; min-height: 44px; }
.meal-plan-prep { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border-color); }
.plan-sheet { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-2) var(--space-1); color: var(--text-color); }
.plan-sheet-intro, .plan-sheet-note { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--text-secondary-color); }
.plan-sheet-note { font-size: var(--text-xs); }
.plan-sheet-options { display: flex; flex-direction: column; gap: var(--space-3); }
.plan-sheet-toggle { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); background: var(--input-bg); border: 1px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; }
.plan-sheet-toggle input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--primary-color); }
.plan-sheet-toggle span { display: flex; flex-direction: column; gap: 2px; }
.plan-sheet-toggle small { color: var(--text-secondary-color); font-size: var(--text-xs); }
.plan-sheet-select { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary-color); }
.plan-sheet-select select { min-height: 44px; }
.plan-sheet-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.plan-sheet-buttons .btn { flex: 1 1 200px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; }
.meal-group-chips span { white-space: nowrap; }
/* Log Sleep (Health.tsx): the quality picker had no rules at all and rendered as run-together
   text with no selected state (UX-02). */
.range-wrapper { display: flex; align-items: center; gap: var(--space-3); }
.range-wrapper input[type="range"] { flex: 1; min-height: 44px; accent-color: var(--primary-color); }
.range-wrapper .range-val { min-width: 4.5em; text-align: right; font-weight: 800; color: var(--text-color); font-size: var(--text-sm); }
.quality-selector { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.quality-btn {
    min-height: 44px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-color);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
}
.quality-btn.active {
    background: rgba(var(--primary-color-rgb), 0.14);
    border-color: var(--primary-color);
    color: var(--primary-text);
}
@media (max-width: 380px) { .quality-selector { grid-template-columns: repeat(2, 1fr); } }
/* ── Sleep sounds: library, player, mixer, mini-player (SS-17/19/23/24/25/30, 2026-10-10) ──
   Theme tokens only, so light mode no longer gets white-on-white glass (SS-19). Every control is
   44 px; the mix-name input is 16 px so iOS does not zoom (SS-24). One chip and one button shape
   for the whole surface (SS-25). These replace the inline <style> blocks the components injected
   on every render (SS-30). */
.ss-section-title { margin: 0 0 8px; font-size: var(--text-sm); font-weight: 700; color: var(--text-color); }
.ss-muted { color: var(--text-secondary-color); font-size: var(--text-xs); line-height: 1.45; margin: 0; }
.ss-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ss-row::-webkit-scrollbar { display: none; }
.ss-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
    border-radius: var(--radius-full); border: 1px solid var(--border-color);
    background: var(--surface-color); color: var(--text-color);
    font-size: var(--text-sm); font-weight: 600; white-space: nowrap; flex-shrink: 0; cursor: pointer;
}
.ss-chip.active { border-color: var(--primary-color); background: rgba(var(--primary-color-rgb), 0.14); }
.ss-chip:disabled { opacity: 0.5; cursor: not-allowed; }
.ss-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: var(--radius-md);
    border: 1px solid var(--border-color); background: var(--surface-color); color: var(--text-color);
    font-size: var(--text-sm); font-weight: 600; cursor: pointer;
}
.ss-btn.primary { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.ss-btn.danger { color: var(--error-color); }
.ss-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ss-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border-radius: var(--radius-full); border: none; background: transparent; color: var(--text-secondary-color); cursor: pointer; flex-shrink: 0;
}
.ss-icon-btn:hover { color: var(--text-color); }
.ss-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ss-card {
    position: relative; height: 168px; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer;
    border: none; padding: 0; text-align: left; background: #1d2433; color: #fff; width: 100%;
}
.ss-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ss-card-bg.noise { background-image: linear-gradient(135deg, #334155, #0f172a); }
.ss-card-bg.fan { background-image: linear-gradient(135deg, #3f3a5c, #12101f); }
.ss-card-bg.nature { background-image: linear-gradient(135deg, #14532d, #052e16); }
.ss-card-bg.soundscape { background-image: linear-gradient(135deg, #3b2f63, #111827); }
.ss-card-bg.binaural { background-image: linear-gradient(135deg, #1e3a5f, #0b1220); }
.ss-card-bg.meditation { background-image: linear-gradient(135deg, #4c3a2a, #1c1410); }
.ss-card-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.85) 100%); }
/* Text on the photo is always white: the dark gradient is the same in both themes (SS-06). */
.ss-card-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px; color: #fff; }
.ss-card-title { margin: 0 0 2px; font-size: 1rem; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.ss-card-desc { margin: 0; font-size: var(--text-2xs); line-height: 1.3; opacity: 0.9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-card-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.ss-card-fav {
    position: absolute; top: 4px; right: 4px; z-index: 2; width: 44px; height: 44px; border-radius: var(--radius-full);
    border: none; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ss-card-fav span { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-full); background: rgba(0,0,0,0.45); }
.ss-card-fav.on { color: var(--error-color); }
.ss-panel { background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px; }
.ss-pro-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-full); background: rgba(var(--primary-color-rgb), 0.14); color: var(--primary-color); font-size: var(--text-2xs); font-weight: 700; }
.ss-error { margin: 0; padding: 10px 12px; border-radius: var(--radius-md); background: rgba(239, 68, 68, 0.1); color: var(--text-color); font-size: var(--text-sm); }
/* Player sheet */
.ss-player { display: flex; flex-direction: column; gap: 20px; padding: max(calc(env(safe-area-inset-top, 0px) + 8px), 16px) 16px max(calc(env(safe-area-inset-bottom, 0px) + 24px), 24px); background: var(--background-color); color: var(--text-color); min-height: 100%; box-sizing: border-box; }
.ss-player-head { display: flex; align-items: center; justify-content: space-between; }
.ss-player-art, .ss-player-art.ss-card-bg { position: relative; inset: auto; flex-shrink: 0; }
.ss-player-art { width: min(220px, 56vw); aspect-ratio: 1; margin: 0 auto; border-radius: 28px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
.ss-player-title { margin: 0; font-size: 1.4rem; font-weight: 700; text-align: center; }
.ss-player-desc { margin: 4px 0 0; text-align: center; color: var(--text-secondary-color); font-size: var(--text-sm); }
.ss-play {
    width: 76px; height: 76px; margin: 0 auto; border-radius: var(--radius-full); border: none;
    background: var(--text-color); color: var(--background-color); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ss-play:disabled { opacity: 0.7; cursor: wait; }
.ss-spinner { width: 28px; height: 28px; border: 3px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; }
.ss-slider { width: 100%; height: 44px; accent-color: var(--primary-color); background: transparent; margin: 0; }
.ss-tone { display: flex; align-items: center; gap: 8px; }
.ss-tone .ss-slider { flex: 1; min-width: 0; }
.ss-tone .ss-muted { font-size: 12px; flex-shrink: 0; }
.ss-layer { padding: 8px 4px 0 12px; border-radius: var(--radius-md); background: var(--surface-color); border: 1px solid var(--border-color); }
.ss-layer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--text-sm); font-weight: 600; }
.ss-input { flex: 1; min-width: 0; min-height: 44px; font-size: 16px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--surface-color); color: var(--text-color); }
.ss-addlist { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color); }
.ss-addlist button { min-height: 44px; padding: 0 12px; text-align: left; border: none; border-bottom: 1px solid var(--border-color); background: transparent; color: var(--text-color); font-size: var(--text-sm); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.ss-addlist button:last-child { border-bottom: none; }
/* Mini-player: stays on every tab while something plays (SS-17). */
.ss-mini {
    position: fixed; left: 16px; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 8500;
    max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px;
    background: var(--surface-color); color: var(--text-color); border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.ss-mini-open { flex: 1; min-width: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; border: none; background: transparent; color: inherit; text-align: left; cursor: pointer; padding: 0; }
.ss-mini-title { font-size: var(--text-sm); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-mini-sub { font-size: var(--text-2xs); color: var(--text-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 769px) { .ss-mini { bottom: 24px; } }
body:has(.modal-overlay) .ss-mini { display: none; }
/* Sleep night model (Health wave 2, A1): Log Sleep hours line, the details modal's data-led
   lines and duplicate-night list, delete buttons in tokens (SI-14/29/31), and Sleep Insights. */
.sleep-log-hours { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: 700; color: var(--text-color); }
.sleep-detail-lines { list-style: none; margin: 0; padding: 12px 16px; width: 100%; box-sizing: border-box; text-align: left;
    background: var(--surface-secondary-color, var(--surface-color)); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 6px; }
.sleep-detail-lines li { font-size: var(--text-sm); line-height: 1.45; color: var(--text-color); }
.sleep-detail-note { width: 100%; box-sizing: border-box; padding: 12px 16px; border: 1px dashed var(--border-color); border-radius: var(--radius-md);
    color: var(--text-secondary-color); font-size: var(--text-sm); line-height: 1.4; text-align: center; }
.sleep-detail-copies { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-color); display: flex; flex-direction: column; gap: var(--space-2); }
.sleep-detail-copies__title { font-size: var(--text-sm); font-weight: 700; color: var(--text-secondary-color); }
.sleep-detail-copy { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 10px 14px;
    border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--surface-color); }
.sleep-delete-btn { color: var(--error-color); min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; }
.sleep-delete-btn--block { width: 100%; border: 1px solid var(--error-color); border-radius: var(--radius-md); background: transparent; }
.sleep-insights { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-5); }
.sleep-insights__skeleton { height: 96px; border-radius: var(--radius-md); background: var(--surface-secondary-color, var(--border-color)); animation: pulse 1.4s ease-in-out infinite; }
.sleep-insights__empty { padding: var(--space-6); border: 1px dashed var(--border-color); text-align: center; color: var(--primary-color); }
.sleep-insights__empty h4 { margin: var(--space-3) 0 8px; font-size: var(--text-lg); color: var(--text-color); }
.sleep-insights__empty p { margin: 0; font-size: var(--text-sm); color: var(--text-secondary-color); line-height: 1.5; }
.sleep-insights__card { padding: var(--space-5); }
.sleep-insights__title { margin: 0 0 4px; font-size: var(--text-md); color: var(--text-color); display: flex; align-items: center; gap: var(--space-2); }
.sleep-insights__title svg { color: var(--primary-color); }
.sleep-insights__meta { margin: 0 0 var(--space-4); font-size: var(--text-xs); color: var(--text-secondary-color); }
.sleep-insights__list { display: flex; flex-direction: column; gap: var(--space-3); }
.sleep-insights__finding { border-left: 3px solid var(--primary-color); padding: 8px 14px; border-radius: 0 8px 8px 0; background: var(--surface-secondary-color, var(--surface-color)); }
.sleep-insights__finding--good { border-left-color: var(--success-color); }
.sleep-insights__finding--watch { border-left-color: var(--carbs-color); }
.sleep-insights__finding--poor { border-left-color: var(--error-color); }
.sleep-insights__headline { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--text-color); line-height: 1.45; }
.sleep-insights__detail { margin: 4px 0 0; font-size: var(--text-sm); color: var(--text-secondary-color); line-height: 1.45; }
/* Mood log (MoodLogModal on the shared Modal, Health wave 4). */
.mood-log { display: flex; flex-direction: column; gap: var(--space-4); }
.mood-log-section { display: flex; flex-direction: column; gap: var(--space-2); }
.mood-log-label { font-size: var(--text-sm); font-weight: 700; color: var(--text-color); }
.mood-rating-readout { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mood-rating-readout strong { font-size: 2.25rem; font-weight: 800; line-height: 1; }
.mood-rating-readout span { font-size: var(--text-sm); font-weight: 700; }
.mood-range { width: 100%; min-height: 44px; accent-color: var(--primary-color); }
.mood-range-ends { display: flex; justify-content: space-between; font-size: var(--text-2xs); color: var(--text-secondary-color); }
.mood-axes { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-inset); border: 1px solid var(--border-color); }
.mood-axis-head { display: flex; justify-content: space-between; font-size: var(--text-sm); font-weight: 700; color: var(--text-color); }
/* Illness & pain with nothing active: one row (HM-14). */
.illness-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
:where(.health-view-container) .card.illness-row { padding: var(--space-3) var(--space-4); }
.illness-row-text { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary-color); min-width: 0; }
.illness-row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.illness-row .illness-history { flex-basis: 100%; }
/* "How do you feel?" (HowYouFeelCard, HM-13): four check-ins, one card, rows on inset panels. */
.hyf { display: flex; flex-direction: column; gap: var(--space-3); }
.hyf-row { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-inset); border: 1px solid var(--border-color); }
.hyf-row-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.hyf-row-title { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-md); font-weight: 800; color: var(--text-color); }
.hyf-row-note { margin: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--text-secondary-color); }
.hyf-row-note strong { color: var(--text-color); }
.hyf-done { color: var(--primary-text); flex-shrink: 0; }
.hyf-moods { display: flex; justify-content: space-between; gap: var(--space-2); }
.btn-chip.hyf-mood { flex: 1 1 0; min-width: 44px; padding: 0; }
.hyf-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-color); }
.hyf-upsell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); border: 1px dashed var(--border-color); font-size: var(--text-sm); color: var(--text-secondary-color); }
.hyf-analysis { padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--surface-color); }
.hyf-analysis p { margin: var(--space-2) 0; font-size: var(--text-sm); line-height: 1.5; color: var(--text-color); }
.hyf-analysis-head { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 800; color: var(--primary-text); }
.hyf-insights { align-self: center; }
.hyf-disclaimer { margin: 0; text-align: center; font-size: var(--text-xs); color: var(--text-secondary-color); line-height: 1.5; }
.ai-label { display: inline-flex; align-items: center; padding: 0 6px; border-radius: var(--radius-full); border: 1px solid currentColor; font-size: var(--text-2xs); font-weight: 800; line-height: 1.5; color: var(--text-secondary-color); }
/* Health wave 5: the Today header, one row of tools, the Log sheet and the debrief. */
.health-anchor { scroll-margin-top: var(--space-5); }
.today-header { display: flex; flex-direction: column; gap: var(--space-3); }
.today-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.today-chip {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; min-height: 44px;
    padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border-color);
    background: var(--surface-inset); color: var(--text-color); font-family: inherit; text-align: left; cursor: pointer;
}
.today-chip:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.today-chip[aria-expanded='true'] { border-color: var(--primary-color); }
.today-chip-label { font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary-color); }
.today-chip-value { font-size: 1.75rem; font-weight: 900; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.today-chip-value small { font-size: var(--text-2xs); font-weight: 700; color: var(--text-secondary-color); margin-left: 2px; letter-spacing: 0; }
.today-chip-bar { display: block; width: 100%; height: 4px; border-radius: var(--radius-full); background: var(--border-color); overflow: hidden; }
.today-chip-bar i { display: block; height: 100%; border-radius: inherit; }
.today-chip-word { font-size: var(--text-xs); font-weight: 800; line-height: 1.2; max-width: 100%; overflow-wrap: anywhere; }
.today-narrative { margin: 0; font-size: var(--text-md); font-weight: 700; line-height: 1.4; color: var(--text-color); }
.today-details-toggle { align-self: flex-start; }
.today-details { display: flex; flex-direction: column; gap: var(--space-3); }
.today-details .readiness-contributors { border: none; padding: 0; background: transparent; }
.health-tools { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
.health-tool {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 60px;
    padding: var(--space-2) 2px; border-radius: var(--radius-md); border: 1px solid var(--border-color);
    background: var(--surface-color); color: var(--text-color); font-family: inherit; font-size: var(--text-2xs); font-weight: 700; cursor: pointer;
}
.health-tool svg { color: var(--primary-text); }
.health-tool span { max-width: 100%; line-height: 1.15; text-align: center; }
.health-tool:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
@media (hover: hover) { .health-tool:hover { background: var(--surface-inset); } }
.health-sheet-backdrop { position: fixed; inset: 0; z-index: var(--z-modal-overlay, 2000); display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.55); }
.health-sheet {
    width: 100%; max-width: 520px; box-sizing: border-box; background: var(--surface-color); color: var(--text-color);
    border: 1px solid var(--border-color); border-bottom: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--space-4); padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}
.health-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.health-log-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.health-log-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; min-width: 0;
    padding: var(--space-2); border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--surface-inset);
    color: var(--text-color); font-family: inherit; font-size: var(--text-xs); font-weight: 700; text-align: center; cursor: pointer;
}
.health-log-tile svg { color: var(--primary-text); }
.health-log-tile:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
@media (max-width: 360px) { .health-log-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sleep-debrief .debrief-facts { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 800; text-align: center; }
.debrief-debt { color: var(--text-secondary-color); font-weight: 700; }
.debrief-tip { margin: 0 0 var(--space-3); font-size: var(--text-sm); line-height: 1.5; color: var(--text-color); }
.debrief-coach { padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-inset); border: 1px solid var(--border-color); margin-bottom: var(--space-3); }
.debrief-coach p { margin: var(--space-2) 0 0; font-size: var(--text-sm); line-height: 1.55; color: var(--text-color); }
.debrief-coach-head { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 800; color: var(--primary-text); }
.debrief-upsell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); border: 1px dashed var(--border-color); font-size: var(--text-sm); color: var(--text-secondary-color); }
.debrief-upsell strong { color: var(--text-color); }
.debrief-ask { align-self: flex-start; }
/* Mood and workouts (MoodIntelligence, HM-18/26). */
.mood-intel { display: flex; flex-direction: column; gap: var(--space-3); }
.mood-intel-summary { margin: 0; font-size: var(--text-md); font-weight: 700; line-height: 1.45; color: var(--text-color); }
.mood-intel-note { margin: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--text-secondary-color); }
.mood-intel-bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; height: 140px; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-inset); border: 1px solid var(--border-color); }
.mood-intel-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.mood-intel-bar i { display: block; width: 100%; max-width: 16px; border-radius: 4px 4px 0 0; background: var(--primary-color); }
.mood-intel-mark { height: 12px; color: var(--primary-text); display: flex; }
.mood-intel-day { font-size: var(--text-2xs); color: var(--text-secondary-color); }
.mood-intel-legend { display: flex; justify-content: center; gap: var(--space-4); font-size: var(--text-2xs); color: var(--text-secondary-color); }
.mood-intel-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mood-intel-legend b { width: 10px; height: 10px; border-radius: var(--radius-sm); background: var(--primary-color); display: inline-block; }
/* Sleep Hub card titles read like every other Health card title (20/900, sentence case). The
   global `.card h3` rule made them small, grey, upper case and underlined. */
.sleep-hub-card h3 {
    font-size: 1.25rem; /* .glass-card-title */
    font-weight: 900;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--text-color);
    border-bottom: 0;
    padding-bottom: 0;
    margin: 0;
    justify-content: center;
    text-align: center;
}
.sleep-hub-card .sleep-hub-card-head h3 { justify-content: flex-start; text-align: left; }
/* Health category colours (owner, 2026-10-11: "we used to have some colors"). One hue per kind of
   reading, used for icons, tinted icon circles, sparklines and tile accents: never for text. Light
   values are the 600 shades, dark the 400s, so icons stay clear on both surfaces. */
:root {
    --tone-sleep: #4f46e5; --tone-weight: #0284c7; --tone-bp: #e11d48; --tone-glucose: #db2777;
    --tone-headache: #7c3aed; --tone-mood: #d97706; --tone-pain: #ea580c; --tone-devices: #0891b2;
    --tone-sounds: #9333ea; --tone-insights: #ca8a04; --tone-log: var(--primary-fill, #047857);
}
[data-theme='dark'] {
    --tone-sleep: #818cf8; --tone-weight: #38bdf8; --tone-bp: #fb7185; --tone-glucose: #f472b6;
    --tone-headache: #a78bfa; --tone-mood: #fbbf24; --tone-pain: #fb923c; --tone-devices: #22d3ee;
    --tone-sounds: #c084fc; --tone-insights: #facc15; --tone-log: var(--primary-color);
}
[data-tone='sleep'] { --tone: var(--tone-sleep); }
[data-tone='weight'] { --tone: var(--tone-weight); }
[data-tone='bp'] { --tone: var(--tone-bp); }
[data-tone='glucose'] { --tone: var(--tone-glucose); }
[data-tone='headache'] { --tone: var(--tone-headache); }
[data-tone='mood'] { --tone: var(--tone-mood); }
[data-tone='pain'] { --tone: var(--tone-pain); }
[data-tone='devices'] { --tone: var(--tone-devices); }
[data-tone='sounds'] { --tone: var(--tone-sounds); }
[data-tone='insights'] { --tone: var(--tone-insights); }
[data-tone='log'] { --tone: var(--tone-log); }
.health-tone-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border-radius: var(--radius-full, 999px); color: var(--tone, var(--primary-text));
    background: color-mix(in srgb, var(--tone, var(--primary-color)) 14%, transparent);
}
.health-tool .health-tone-icon svg, .health-log-tile .health-tone-icon svg { color: inherit; }
@media (hover: hover) {
    .health-log-tile[data-tone]:hover, .health-tool[data-tone]:hover {
        border-color: color-mix(in srgb, var(--tone) 45%, var(--border-color));
    }
}
.biometric-tile[data-tone] { border-top: 3px solid var(--tone) !important; }
/* The Log picker is a centred dialog at every width. It sat at the foot of the screen as a
   bottom sheet, which on a desktop read as a broken modal. */
.health-sheet-backdrop { align-items: center; padding: var(--space-4); box-sizing: border-box; }
.health-sheet {
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding-bottom: var(--space-4);
    max-height: calc(100vh - 2 * var(--space-4));
    overflow-y: auto;
    box-shadow: var(--shadow-lg, 0 20px 40px rgba(0, 0, 0, 0.25));
}
/* Pain body map on the Muscle Training Map's anatomy (BodyMap.tsx, 2026-10-11): muscles drawn
   like the Stats map, the chosen spot in the pain colour. */
.body-map-svg { max-width: 300px; }
.body-map .mm-silhouette { stroke-width: 1.2px; }
.body-map-region {
    fill: color-mix(in srgb, var(--text-color) 16%, var(--surface-color));
    stroke: color-mix(in srgb, var(--text-color) 30%, transparent);
    stroke-opacity: 1; stroke-width: 1px;
}
.body-map-region:hover { fill: color-mix(in srgb, var(--tone-pain) 35%, var(--surface-color)); }
.body-map-region.selected { fill: var(--tone-pain); stroke: var(--text-color); stroke-width: 1.5px; }
.body-map-region:focus-visible { stroke: var(--tone-pain); stroke-width: 2.5px; }
.body-map-dot { stroke: var(--tone-pain); stroke-width: 2.5; }
.body-map-joint:hover .body-map-dot { fill: color-mix(in srgb, var(--tone-pain) 35%, var(--surface-color)); }
.body-map-joint.selected .body-map-dot { fill: var(--tone-pain); stroke: var(--text-color); }
.body-map-joint:focus-visible .body-map-hit { stroke: var(--tone-pain); }
.body-map-side { font-size: 18px; }
.body-map-caption strong { color: var(--tone-pain); }
/* "What's behind it" + Recovery trends (owner, 2026-10-11): two cards side by side on a desktop,
   stacked on a phone; the contributors are a real card again (padding was stripped to 0). */
.today-details { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
@media (min-width: 1024px) { .today-details { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.today-details .readiness-contributors,
.readiness-contributors {
    padding: var(--space-5); margin: 0; border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    background: var(--surface-color); box-shadow: none;
}
.readiness-contributors .rc-title { margin-bottom: var(--space-4); }
.readiness-contributors ul { gap: 0; }
.readiness-contributors li {
    flex-direction: row; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-3) 0; border-bottom: 1px solid var(--border-color);
}
.readiness-contributors li:first-child { padding-top: 0; }
.readiness-contributors li:last-child { padding-bottom: 0; }
.readiness-contributors .health-tone-icon { flex-shrink: 0; }
.rc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rc-value { font-size: var(--text-lg); }
.rc-value.is-empty { color: var(--text-secondary-color); font-weight: 600; }
.rc-basis-estimated { color: var(--warning-text); border-color: currentColor; }
.rc-basis-none { color: var(--text-secondary-color); }
.rt-chart { margin-bottom: var(--space-3); }
.rt-plot {
    display: flex; align-items: stretch; gap: 3px; height: 96px; padding: 0 2px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(to top, transparent calc(66% - 1px), color-mix(in srgb, var(--text-color) 10%, transparent) 66%, transparent calc(66% + 1px));
}
.rt-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.rt-bar { width: 100%; border-radius: 4px 4px 0 0; transition: height 0.3s ease; }
.rt-bar.is-estimated { opacity: 0.35; }
.rt-bar.is-today { box-shadow: 0 0 0 2px var(--text-color) inset; }
.rt-dates { display: flex; gap: 3px; padding: 4px 2px 0; }
.rt-dates span { flex: 1; min-width: 0; text-align: center; font-size: var(--text-2xs); color: var(--text-secondary-color); white-space: nowrap; overflow: visible; }
.rt-insights { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.rt-insight { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-xs); line-height: 1.45; color: var(--text-secondary-color); }
.rt-insight strong { color: var(--text-color); font-weight: 700; }
.rt-insight svg { flex-shrink: 0; margin-top: 1px; }
.rt-insight.is-positive svg { color: var(--primary-text); }
.rt-insight.is-warning svg { color: var(--warning-text); }
.rt-insight.is-info svg { color: var(--tone-devices); }
/* End sheet for live cardio sessions (EndSessionSheet) */
.end-sheet { display: flex; flex-direction: column; gap: var(--space-3); }
.end-sheet-copy { margin: 0; font-size: var(--text-sm); color: var(--text-secondary-color); line-height: 1.45; }
.end-sheet-btn { min-height: 52px; width: 100%; font-size: var(--text-md); font-weight: 800; }
.end-sheet-discard { min-height: 44px; width: 100%; background: transparent; border: none; color: var(--text-secondary-color); font-weight: 700; font-size: var(--text-sm); text-decoration: underline; cursor: pointer; }
.end-sheet-discard.is-armed { color: var(--error-color); }
/* Program cover fallback (programs wave 3): a program with no picture gets its sport's hue and
   icon instead of a keyword-guessed photo. The cover sits under white overlay text in both themes,
   so it uses deep (700) shades in both. */
:root {
    --tone-prog-run: #c2410c; --tone-prog-ride: #0369a1; --tone-prog-swim: #0e7490;
    --tone-prog-strength: #334155; --tone-prog-team: #15803d; --tone-prog-combat: #b91c1c;
    --tone-prog-mind: #7e22ce; --tone-prog-outdoor: #4d7c0f; --tone-prog-multi: #1d4ed8;
    --tone-prog-conditioning: #a16207;
}
.program-cover-fallback[data-program-tone='run'] { --tone: var(--tone-prog-run); }
.program-cover-fallback[data-program-tone='ride'] { --tone: var(--tone-prog-ride); }
.program-cover-fallback[data-program-tone='swim'] { --tone: var(--tone-prog-swim); }
.program-cover-fallback[data-program-tone='strength'] { --tone: var(--tone-prog-strength); }
.program-cover-fallback[data-program-tone='team'] { --tone: var(--tone-prog-team); }
.program-cover-fallback[data-program-tone='combat'] { --tone: var(--tone-prog-combat); }
.program-cover-fallback[data-program-tone='mind'] { --tone: var(--tone-prog-mind); }
.program-cover-fallback[data-program-tone='outdoor'] { --tone: var(--tone-prog-outdoor); }
.program-cover-fallback[data-program-tone='multi'] { --tone: var(--tone-prog-multi); }
.program-cover-fallback[data-program-tone='conditioning'] { --tone: var(--tone-prog-conditioning); }
.program-cover-fallback {
    background:
        radial-gradient(120% 90% at 85% 15%, color-mix(in srgb, var(--tone, #334155) 70%, #ffffff 0%) 0%, transparent 60%),
        linear-gradient(135deg, var(--tone, #334155) 0%, color-mix(in srgb, var(--tone, #334155) 55%, #000000) 100%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12%;
}
.program-cover-fallback__icon { color: rgba(255, 255, 255, 0.82); }
/* === Programs + Journeys visual uniformity (programs+events wave 6, W6) ===================
   One card, one chip, one action bar for the Programs tab and the program detail. Tokens only:
   radius --radius-md (buttons, inputs) / --radius-lg (cards) / --radius-full (chips), the type
   scale, and the accent pair --primary-fill + --on-primary-color for any filled accent (white on
   the bright --primary-color was 2.5:1 in light, 1.9:1 in dark: PU-04). */
/* The program cover: the sport's tone and icon always, the picture over them when it loads (a
   404 leaves the tone, never a blank grey card: PU-02). */
.program-cover-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.program-marketplace-panel {
    padding: var(--space-5) var(--space-4);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.program-marketplace__title {
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--text-color);
    margin: 0 0 var(--space-5);
}
/* --- Shelf card (PU-15, PU-33): 16:10 cover, chips on top, title clamped to two lines, one
   ellipsised meta line. Text sits on a dark scrim, so it is --on-image-color in both themes. */
.program-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    min-height: 180px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    isolation: isolate;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) {
    .program-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
}
.program-card:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
.program-card__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.88) 100%);
}
.program-card__top {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    right: var(--space-3);
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-2);
}
.program-card__body {
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
.program-card__title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 800;
    line-height: 1.2;
    color: var(--on-image-color);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.program-card__meta {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--on-image-color);
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.program-card__note {
    margin: var(--space-1) 0 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    align-self: flex-start;
    max-width: 100%;
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--on-primary-color);
    background: var(--primary-fill, var(--primary-color));
    border-radius: var(--radius-full);
    padding: 2px var(--space-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.program-card__icon-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--on-image-color);
    cursor: pointer;
}
/* One chip on a picture (level, focus) and its accent form (price, "Your plan"). */
.program-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-width: 60%;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-2xs);
    font-weight: 700;
    line-height: 1.5;
    color: var(--on-image-color);
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.program-chip--accent {
    color: var(--on-primary-color);
    background: var(--primary-fill, var(--primary-color));
    border-color: transparent;
}
/* The same chip off a picture (detail page facts). */
.program-chip--plain {
    color: var(--text-secondary-color);
    background: var(--surface-inset, var(--background-color));
    border: 1px solid var(--border-color);
    backdrop-filter: none;
    max-width: 100%;
}
.program-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-4);
}
.program-section-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 44px;
    margin: 0 auto var(--space-3);
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
}
.program-section-rule {
    margin: var(--space-6) 0 var(--space-5);
    border: none;
    border-top: 1px solid var(--border-color);
}
/* --- Program detail (PU-08, PU-25, PU-26, PU-27, PM-27) --- */
.program-detail-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    min-height: 240px;
    max-height: 420px;
    overflow: hidden;
}
@media (min-width: 769px) {
    .program-detail-hero { aspect-ratio: 21 / 9; min-height: 300px; }
}
.program-detail-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.35) 100%);
}
.program-detail-hero__close {
    position: absolute;
    top: max(calc(env(safe-area-inset-top, 0px) + var(--space-3)), var(--space-4));
    right: var(--space-4);
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--on-image-color);
    cursor: pointer;
}
.program-detail-hero__close:focus-visible { outline: 2px solid var(--on-image-color); outline-offset: 2px; }
.program-detail-hero__text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
@media (min-width: 769px) {
    .program-detail-hero__text { padding: var(--space-6) var(--space-6) var(--space-5); }
}
.program-detail-hero__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.program-detail-hero__title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 800;
    line-height: 1.15;
    color: var(--on-image-color);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (min-width: 769px) {
    .program-detail-hero__title { font-size: var(--text-2xl); }
}
.program-detail-hero__credit {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--on-image-color);
}
.program-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-2xs);
    font-weight: 800;
    color: var(--on-primary-color);
    background-color: var(--primary-fill, var(--primary-color));
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
}
/* A detail section: a plain card in both themes (the "glass" here was white-on-white in light). */
.program-section {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    background: var(--surface-inset, var(--background-color));
}
.program-section__label {
    margin: 0 0 var(--space-2);
    font-size: var(--text-2xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary-text, var(--primary-color));
}
/* Weekly volume (PM-35): one bar per week, a single hue, 4px rounded tops on the baseline, a 2px
   gap between bars. Locked weeks are drawn lighter: their count is known, their content is not. */
.program-volume {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 96px;
    padding-top: var(--space-1);
    border-bottom: 1px solid var(--border-color);
}
.program-volume__bar {
    flex: 1 1 0;
    min-width: 4px;
    border-radius: 4px 4px 0 0;
    background: var(--primary-fill, var(--primary-color));
}
.program-volume__bar--locked { opacity: 0.45; }
.program-volume__bar--rest { background: var(--border-color); min-height: 2px; }
.program-volume__axis {
    display: flex;
    gap: 2px;
    margin-top: var(--space-1);
    font-size: var(--text-2xs);
    color: var(--text-secondary-color);
}
/* The detail's one action bar, pinned to the bottom of the sheet with the safe area (PU-08,
   PU-35): what it costs or where you are on the left, the one action on the right. Close is the
   hero's X, never a second footer button. */
.program-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: var(--surface-color);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08);
}
.program-action-bar__info {
    flex: 1 1 200px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.program-action-bar__status {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-color);
}
.program-action-bar__note {
    font-size: var(--text-xs);
    color: var(--text-secondary-color);
    line-height: 1.35;
}
.program-action-bar__actions {
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.program-action-bar__actions .btn { width: auto; flex: 1 1 180px; margin-top: 0; }
.program-action-bar__date {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary-color);
    white-space: nowrap;
}
.program-action-bar__date input {
    min-height: 44px;
    font-size: var(--text-md);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-color);
}
@media (max-width: 768px) {
    .program-action-bar { padding-top: var(--space-2); }
    .program-action-bar__actions { flex-basis: 100%; }
    .program-action-bar__actions .btn { flex: 1 1 100%; }
    .program-action-bar__date { flex: 1 1 100%; justify-content: space-between; }
}
.program-volume__axis > span { flex: 1 1 0; min-width: 4px; text-align: center; overflow: visible; white-space: nowrap; }
/* "For you" (PM-34): a grid on wide screens, a swipeable row on phones so the catalog stays near. */
.program-shelf-row {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
@media (max-width: 767px) {
    .program-shelf-row {
        display: flex;
        gap: var(--space-3);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: var(--space-2);
        scrollbar-width: thin;
    }
    .program-shelf-row > * { flex: 0 0 85%; scroll-snap-align: start; }
}
.program-sort {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 220px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary-color);
    white-space: nowrap;
}
/* Strength player: logged sets of the current exercise (WorkoutSetList) and timed sets */
.pl-setlist { display: flex; flex-direction: column; gap: var(--space-2); }
.pl-setrow { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color); }
.pl-setrow.is-editing { flex-wrap: wrap; padding: var(--space-2) var(--space-3); }
.pl-setnum { font-size: var(--text-xs); font-weight: 800; color: var(--text-secondary-color); min-width: 3.2rem; }
.pl-setval { flex: 1; font-size: var(--text-md); font-weight: 800; color: var(--text-color); font-variant-numeric: tabular-nums; }
.pl-setval em { font-style: normal; font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary-color); margin-left: 4px; }
.pl-setbtn { min-height: 44px; min-width: 44px; padding: 0 var(--space-2); background: transparent; border: none; color: var(--primary-color); font-weight: 800; font-size: var(--text-sm); cursor: pointer; }
.pl-setbtn.is-primary { color: var(--primary-color); }
.pl-setbtn.is-danger { color: var(--error-color); }
.pl-setbtn:disabled { opacity: 0.5; cursor: not-allowed; }
.pl-setinput { width: 5rem; min-height: 44px; font-size: var(--text-md); text-align: center; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text-color); }
.pl-setx { color: var(--text-secondary-color); font-weight: 800; }
.pl-addset { min-height: 44px; border: 1px dashed var(--border-color); border-radius: var(--radius-md); background: transparent; color: var(--primary-color); font-weight: 800; font-size: var(--text-sm); cursor: pointer; }
.pl-addset:disabled { opacity: 0.5; }
.pl-timed-running { flex: 1 1 auto; display: flex; align-items: center; gap: var(--space-3); }
.pl-timed-clock { flex: 1; text-align: center; font-size: var(--text-2xl); font-weight: 900; color: var(--text-color); font-variant-numeric: tabular-nums; }
.pl-timed-done { height: 3.2rem; min-width: 6rem; margin: 0 !important; border-radius: 14px !important; font-weight: 800 !important; }
/* Pocket lock for the cardio players (PocketLock.tsx) */
.pocket-lock-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--player-line, var(--border-color)); background: var(--player-tile, var(--surface-color)); color: var(--player-text, var(--text-color)); font-weight: 800; font-size: var(--text-sm); cursor: pointer; }
.pocket-lock-btn.is-compact { padding: 0; width: 44px; }
.pocket-lock-layer { position: fixed; inset: 0; z-index: 10040; background: rgba(0, 0, 0, 0.08); display: flex; align-items: flex-end; justify-content: center; padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px)); touch-action: none; }
.pocket-lock-pill { position: relative; overflow: hidden; width: 100%; max-width: 420px; min-height: 64px; border-radius: 999px; border: 2px solid var(--primary-color); background: var(--player-panel, var(--surface-color)); color: var(--player-text, var(--text-color)); font-weight: 900; font-size: var(--text-md); cursor: pointer; -moz-user-select: none; user-select: none; -webkit-user-select: none; }
.pocket-lock-pill::before { content: ''; position: absolute; inset: 0; width: var(--hold, 0%); background: color-mix(in srgb, var(--primary-color) 30%, transparent); }
.pocket-lock-pill span { position: relative; }
/* Empty (freestyle) workout and its "what next" card */
.pl-empty { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-2) 0; }
.pl-empty p { margin: 0; font-size: var(--text-md); color: var(--text-secondary-color); line-height: 1.5; }
.pl-empty-btn { min-height: 52px; font-size: var(--text-md); font-weight: 800; }
.pl-next-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--surface-color); }
.pl-next-card strong { font-size: var(--text-lg); color: var(--text-color); }
.pl-next-card span { font-size: var(--text-sm); color: var(--text-secondary-color); }
.pl-next-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.pl-next-actions .btn { flex: 1; min-height: 48px; font-weight: 800; }
/* Exercises I avoid (2026-10-13): the swap sheet's avoid action, Settings, and the planner's
   "why this exercise" line. Colours are the shared tokens; the buttons are the shared .btn system. */
.pl-swap-avoid { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border-color); }
.pl-swap-avoid .btn { min-height: 44px; align-self: flex-start; }
.pl-swap-error { margin: 0; font-size: var(--text-sm); color: var(--error-color); }
.avoid-card .avoid-intro { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--text-secondary-color); line-height: 1.45; }
.avoid-styles { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.avoid-style { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 44px; }
.avoid-style-label { display: block; margin-bottom: 2px; font-weight: 600; color: var(--text-color); }
.avoid-switch { flex: 0 0 auto; position: relative; width: 52px; height: 32px; min-width: 52px; padding: 0; border-radius: 999px; border: 1px solid var(--border-color); background: var(--input-bg); cursor: pointer; }
.avoid-switch::before { content: ''; position: absolute; inset: -6px; }
.avoid-switch-thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--text-secondary-color); transition: transform 0.2s ease, background 0.2s ease; }
.avoid-switch[aria-checked="true"] { background: var(--primary-color); border-color: var(--primary-color); }
.avoid-switch[aria-checked="true"] .avoid-switch-thumb { transform: translateX(20px); background: var(--surface-color); }
.avoid-switch:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; }
.avoid-style-desc { display: block; font-size: var(--text-sm); color: var(--text-secondary-color); }
.avoid-list-head { font-weight: 700; font-size: var(--text-sm); color: var(--text-color); margin-bottom: var(--space-2); }
.avoid-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.avoid-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); min-height: 48px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color); }
.avoid-row-name { display: flex; flex-direction: column; min-width: 0; font-weight: 700; color: var(--text-color); overflow-wrap: anywhere; }
.avoid-row-name small { font-weight: 400; font-size: var(--text-xs); color: var(--text-secondary-color); }
.avoid-row .btn { min-height: 44px; flex: 0 0 auto; }
.avoid-empty { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--text-secondary-color); }
.avoid-search { margin-bottom: var(--space-2); }
.avoid-results { max-height: 40vh; }
.wb-why { margin-top: 2px; font-size: var(--text-xs); color: var(--text-secondary-color); line-height: 1.4; }
.wb-why-avoided { color: var(--error-color); }
/* --- Full-screen sheets clear the status bar (device test 2026-10-19, item 2) ---
   Edge-to-edge Android draws the web view under the status bar. A phone sheet (.modal-content,
   100dvh below 769px) took its clearance as padding-top on the element that scrolls, and padding
   scrolls with the content: the title bar slid away and the content ran up under the clock and
   notification icons, below a padded gap that looked empty. The app header never had this
   because it is a solid bar outside the scroller.
   A titled sheet now carries the clearance on its own title bar, which stays put. A sheet
   without one (hero sheets such as the event editor) and the morning Brief get a scrim that
   fills in behind the status bar once the content scrolls. */
@media (max-width: 768px) {
    .modal-content:has(> .modal-header):not(.cardio-completion-modal) {
        padding-top: 0 !important;
    }
    .modal-content:not(.cardio-completion-modal) > .modal-header {
        position: sticky;
        top: 0;
        z-index: 20;
        flex-shrink: 0;
        margin: 0 -1rem 1rem;
        padding: 0.25rem 1rem;
        padding-top: calc(0.25rem + env(safe-area-inset-top, var(--safe-area-inset-top, 0px))) !important;
        background: inherit;
        border-bottom: 1px solid var(--border-color);
    }
    /* Sheets that drop the side padding keep the bar inside their own edges. */
    .modal-content.fullscreen > .modal-header,
    .modal-content.modal-full-bleed > .modal-header,
    .modal-content.sleep-player-modal > .modal-header,
    .modal-content.workout-detail-modal > .modal-header {
        margin-left: 0;
        margin-right: 0;
    }
}
@supports (animation-timeline: scroll()) {
    @keyframes status-bar-scrim-in { to { opacity: 1; } }
    @media (max-width: 768px) {
        .modal-content:not(.modal-full-bleed) { --scrim-bleed: 1rem; }
        .status-bar-scrim::before,
        .modal-content:not(:has(> .modal-header)):not(.photo-meal-capture-modal)::before {
            content: '';
            display: block;
            position: sticky;
            top: 0;
            z-index: 9;
            flex: 0 0 auto;
            align-self: stretch;
            height: env(safe-area-inset-top, var(--safe-area-inset-top, 0px));
            /* Takes no room: the sheet's own top padding or hero still sits under the bar at rest. */
            margin-bottom: calc(-1 * env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
            /* Out to the edges through the host's side padding. */
            margin-left: calc(-1 * var(--scrim-bleed, 0px));
            margin-right: calc(-1 * var(--scrim-bleed, 0px));
            background: var(--scrim-color, var(--surface-color));
            box-shadow: 0 1px 0 var(--border-color);
            pointer-events: none;
            opacity: 0;
            animation: status-bar-scrim-in linear both;
            animation-timeline: scroll(nearest block);
            animation-range: 0 48px;
        }
    }
}
/* --- Real-food planning (owner decision 2026-10-10) --- */
.meal-source-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--surface-color-hover, var(--input-bg)); color: var(--text-secondary-color); font-size: var(--text-2xs); font-weight: 700; white-space: nowrap; }
.meal-source-chip.is-leftover { color: var(--warning-color, #b45309); border-color: color-mix(in srgb, var(--warning-color, #b45309) 40%, transparent); }
.meal-source-chip.is-ai { color: var(--primary-color); border-color: color-mix(in srgb, var(--primary-color) 35%, transparent); }
.meal-missing-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: var(--text-xs); color: var(--text-secondary-color); }
.meal-missing-add { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 8px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: transparent; color: var(--primary-color); font-weight: 700; font-size: var(--text-xs); cursor: pointer; }
.meal-open-slot { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 2px dashed var(--border-color); border-radius: var(--radius-md); background: var(--input-bg); }
.mos-text { font-size: 0.8rem; color: var(--text-secondary-color); }
.mos-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mos-actions .btn { width: auto; flex: 0 1 auto; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); }
.mos-actions .mos-ai { color: var(--primary-color); }
.real-food-teach { margin-bottom: var(--space-3); }
.rft-steps { margin: var(--space-1) 0 0; padding-left: 1.2rem; max-width: 460px; text-align: left; font-size: var(--text-sm); line-height: 1.5; color: var(--text-secondary-color); }
.rft-steps li { margin-bottom: 4px; }
.rft-steps strong { color: var(--text-color); }
.rft-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.rft-link { background: none; border: none; padding: 0; color: var(--primary-color); font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.plan-sheet-ai { border-top: 1px solid var(--border-color); padding-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
.plan-sheet-ai > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: var(--text-sm); font-weight: 800; color: var(--primary-color); min-height: 40px; }
.plan-sheet-ai[open] > summary { margin-bottom: var(--space-3); }
.plan-sheet-ai .plan-sheet-buttons { margin-top: var(--space-3); }
@media (max-width: 480px) { .mos-actions .btn { flex: 1 1 100%; justify-content: center; } }
/* --- Nutrition Today: compact hydration row (owner review 2026-10-10) --- */
.water-compact { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.water-compact .nutrition-card-heading { margin-bottom: var(--space-1); }
.water-compact-summary { display: flex; justify-content: center; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.water-compact-count { display: inline-flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.water-compact-count strong { font-size: 1.5rem; font-weight: 900; color: var(--primary-color); line-height: 1; }
.water-compact-count span { font-size: var(--text-sm); font-weight: 700; color: var(--text-secondary-color); }
.water-compact-done { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 800; color: var(--success-color); }
.water-compact-bar { height: 6px; border-radius: 999px; background: var(--input-bg); overflow: hidden; }
.water-compact-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--primary-color); transition: width 0.4s ease-out; }
.water-compact-note { margin: 0; text-align: center; font-size: var(--text-xs); color: var(--text-secondary-color); line-height: 1.45; }
.water-compact-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: stretch; }
.water-compact-actions .water-quick-add { flex: 1 1 0; min-width: 64px; width: auto; min-height: 40px; padding: 0.4rem 0.5rem; font-size: var(--text-sm); font-weight: 800; }
.water-custom-input { flex: 1 1 96px; min-width: 0; min-height: 40px; padding: 0 var(--space-2); border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-color); font-size: 16px; text-align: center; }
/* Visible in both themes (owner review round 2): a border a shade stronger than the card's, a real placeholder. */
.water-compact-actions .water-custom-input { border: 1px solid color-mix(in srgb, var(--text-secondary-color) 65%, var(--border-color)) !important; background: var(--input-bg) !important; color: var(--text-color) !important; }
.water-custom-input::-moz-placeholder { color: var(--text-secondary-color); opacity: 1; }
.water-custom-input::placeholder { color: var(--text-secondary-color); opacity: 1; }
.water-custom-input:focus { outline: 2px solid var(--primary-color); outline-offset: 1px; }
.water-compact-actions .water-custom-add { flex: 0 0 auto; width: auto; min-height: 40px; padding: 0 1rem; }
.water-history-toggle { align-self: center; background: none; border: none; padding: 4px 8px; min-height: 32px; font-size: var(--text-xs); font-weight: 700; color: var(--primary-color); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.water-history { display: flex; justify-content: space-between; align-items: flex-end; gap: 4px; padding: 0 var(--space-2); }
.water-history-day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.water-history-track { position: relative; width: 8px; height: 28px; border-radius: var(--radius-sm); background: var(--border-color); overflow: hidden; }
.water-history-track > span { position: absolute; left: 0; bottom: 0; width: 100%; border-radius: inherit; background: var(--primary-color); }
.water-history-track > span.is-met { background: var(--success-color); }
.water-history-label { font-size: var(--text-xs); color: var(--text-secondary-color); font-weight: 600; }
.water-history-day.is-today .water-history-label { color: var(--primary-color); font-weight: 800; }
/* --- Nutrition Today: meals as a list, not cards in a card (owner review 2026-10-10) --- */
.nutrition-today-meals .meal-plan-item { border: none !important; border-radius: 0 !important; background: transparent !important; padding: 0.75rem 0 !important; box-shadow: none !important; }
.nutrition-today-meals .meal-plan-item + .meal-plan-item { border-top: 1px solid var(--border-color) !important; }
.nutrition-today-meals .meal-plan-item.consumed-item { padding-left: 0.75rem !important; border-left: 3px solid var(--success-color) !important; }
.nutrition-today-meals .meal-plan-item.hover-lift:hover { transform: none; }
.nutrition-today-meals .meal-plan-item.empty-slot { border: 1px dashed var(--border-color) !important; border-radius: var(--radius-md) !important; padding: var(--space-3) !important; }
.meal-sides-list { list-style: none; margin: 2px 0 0; padding: 0 0 0 var(--space-2); display: flex; flex-direction: column; gap: 2px; }
.meal-sides-list li { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-secondary-color); font-weight: 600; }
.meal-sides-list li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.meal-prep-nudge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 700; color: var(--warning-text-color, var(--warning-color)); }
/* Strength recap: "Total lifted" and an object of about that weight (WorkoutVolumeCard.tsx,
   2026-10-26). The object's category hue tints the icon circle and the left edge. */
.workout-volume-card {
    display: flex; align-items: center; gap: var(--space-4); text-align: left;
    padding: var(--space-4); margin-bottom: var(--space-6);
    background: var(--surface-color); border: 1px solid var(--border-color);
    border-left: 4px solid var(--tone, var(--primary-color)); border-radius: var(--radius-lg);
}
.workout-volume-icon { width: 52px; height: 52px; flex-shrink: 0; }
.workout-volume-text { min-width: 0; }
.workout-volume-label {
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-secondary-color);
}
.workout-volume-total { font-size: 1.6rem; font-weight: 800; color: var(--text-color); line-height: 1.2; font-variant-numeric: tabular-nums; }
.workout-volume-eq { font-size: 0.95rem; font-weight: 600; color: var(--text-secondary-color); margin-top: 2px; }
*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}
::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}
/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Inter, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.\!container {
    width: 100% !important;
}
.container {
    width: 100%;
}
@media (min-width: 640px) {
    .\!container {
        max-width: 640px !important;
    }
    .container {
        max-width: 640px;
    }
}
@media (min-width: 768px) {
    .\!container {
        max-width: 768px !important;
    }
    .container {
        max-width: 768px;
    }
}
@media (min-width: 1024px) {
    .\!container {
        max-width: 1024px !important;
    }
    .container {
        max-width: 1024px;
    }
}
@media (min-width: 1280px) {
    .\!container {
        max-width: 1280px !important;
    }
    .container {
        max-width: 1280px;
    }
}
@media (min-width: 1536px) {
    .\!container {
        max-width: 1536px !important;
    }
    .container {
        max-width: 1536px;
    }
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
.pointer-events-none {
    pointer-events: none;
}
.pointer-events-auto {
    pointer-events: auto;
}
.\!visible {
    visibility: visible !important;
}
.visible {
    visibility: visible;
}
.invisible {
    visibility: hidden;
}
.collapse {
    visibility: collapse;
}
.static {
    position: static;
}
.fixed {
    position: fixed;
}
.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.sticky {
    position: sticky;
}
.-inset-1 {
    inset: -0.25rem;
}
.inset-0 {
    inset: 0px;
}
.inset-12 {
    inset: 3rem;
}
.inset-\[-8px\] {
    inset: -8px;
}
.inset-x-0 {
    left: 0px;
    right: 0px;
}
.inset-y-0 {
    top: 0px;
    bottom: 0px;
}
.-bottom-1 {
    bottom: -0.25rem;
}
.-bottom-24 {
    bottom: -6rem;
}
.-bottom-6 {
    bottom: -1.5rem;
}
.-left-24 {
    left: -6rem;
}
.-right-1 {
    right: -0.25rem;
}
.-right-16 {
    right: -4rem;
}
.-right-24 {
    right: -6rem;
}
.-top-1 {
    top: -0.25rem;
}
.-top-12 {
    top: -3rem;
}
.-top-16 {
    top: -4rem;
}
.-top-24 {
    top: -6rem;
}
.bottom-0 {
    bottom: 0px;
}
.bottom-2\.5 {
    bottom: 0.625rem;
}
.bottom-3 {
    bottom: 0.75rem;
}
.bottom-4 {
    bottom: 1rem;
}
.bottom-6 {
    bottom: 1.5rem;
}
.bottom-\[10\%\] {
    bottom: 10%;
}
.bottom-full {
    bottom: 100%;
}
.left-0 {
    left: 0px;
}
.left-1 {
    left: 0.25rem;
}
.left-1\/2 {
    left: 50%;
}
.left-2\.5 {
    left: 0.625rem;
}
.left-3 {
    left: 0.75rem;
}
.left-3\.5 {
    left: 0.875rem;
}
.left-4 {
    left: 1rem;
}
.left-5 {
    left: 1.25rem;
}
.left-6 {
    left: 1.5rem;
}
.left-\[-10\%\] {
    left: -10%;
}
.right-0 {
    right: 0px;
}
.right-1 {
    right: 0.25rem;
}
.right-16 {
    right: 4rem;
}
.right-2 {
    right: 0.5rem;
}
.right-2\.5 {
    right: 0.625rem;
}
.right-28 {
    right: 7rem;
}
.right-3 {
    right: 0.75rem;
}
.right-4 {
    right: 1rem;
}
.right-5 {
    right: 1.25rem;
}
.right-6 {
    right: 1.5rem;
}
.right-8 {
    right: 2rem;
}
.right-\[-10\%\] {
    right: -10%;
}
.top-0 {
    top: 0px;
}
.top-1 {
    top: 0.25rem;
}
.top-1\/2 {
    top: 50%;
}
.top-16 {
    top: 4rem;
}
.top-2 {
    top: 0.5rem;
}
.top-2\.5 {
    top: 0.625rem;
}
.top-20 {
    top: 5rem;
}
.top-3 {
    top: 0.75rem;
}
.top-3\.5 {
    top: 0.875rem;
}
.top-32 {
    top: 8rem;
}
.top-4 {
    top: 1rem;
}
.top-5 {
    top: 1.25rem;
}
.top-6 {
    top: 1.5rem;
}
.top-8 {
    top: 2rem;
}
.top-\[-10\%\] {
    top: -10%;
}
.top-full {
    top: 100%;
}
.isolate {
    isolation: isolate;
}
.-z-0 {
    z-index: 0;
}
.z-0 {
    z-index: 0;
}
.z-10 {
    z-index: 10;
}
.z-20 {
    z-index: 20;
}
.z-30 {
    z-index: 30;
}
.z-40 {
    z-index: 40;
}
.z-50 {
    z-index: 50;
}
.z-\[10000\] {
    z-index: 10000;
}
.z-\[10001\] {
    z-index: 10001;
}
.z-\[100\] {
    z-index: 100;
}
.z-\[110\] {
    z-index: 110;
}
.z-\[150\] {
    z-index: 150;
}
.z-\[200\] {
    z-index: 200;
}
.z-\[250\] {
    z-index: 250;
}
.z-\[400\] {
    z-index: 400;
}
.z-\[60\] {
    z-index: 60;
}
.z-\[70\] {
    z-index: 70;
}
.z-\[80\] {
    z-index: 80;
}
.z-\[90\] {
    z-index: 90;
}
.z-\[99999\] {
    z-index: 99999;
}
.z-\[9999\] {
    z-index: 9999;
}
.m-0 {
    margin: 0px;
}
.m-1 {
    margin: 0.25rem;
}
.m-4 {
    margin: 1rem;
}
.mx-1 {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}
.mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.my-0\.5 {
    margin-top: 0.125rem;
    margin-bottom: 0.125rem;
}
.my-1\.5 {
    margin-top: 0.375rem;
    margin-bottom: 0.375rem;
}
.my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}
.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.my-5 {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}
.my-6 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}
.-mr-2 {
    margin-right: -0.5rem;
}
.-mt-1 {
    margin-top: -0.25rem;
}
.-mt-2 {
    margin-top: -0.5rem;
}
.mb-0 {
    margin-bottom: 0px;
}
.mb-0\.5 {
    margin-bottom: 0.125rem;
}
.mb-1 {
    margin-bottom: 0.25rem;
}
.mb-1\.5 {
    margin-bottom: 0.375rem;
}
.mb-12 {
    margin-bottom: 3rem;
}
.mb-16 {
    margin-bottom: 4rem;
}
.mb-2 {
    margin-bottom: 0.5rem;
}
.mb-2\.5 {
    margin-bottom: 0.625rem;
}
.mb-3 {
    margin-bottom: 0.75rem;
}
.mb-4 {
    margin-bottom: 1rem;
}
.mb-5 {
    margin-bottom: 1.25rem;
}
.mb-6 {
    margin-bottom: 1.5rem;
}
.mb-8 {
    margin-bottom: 2rem;
}
.mb-\[150px\] {
    margin-bottom: 150px;
}
.mb-\[180px\] {
    margin-bottom: 180px;
}
.mb-\[210px\] {
    margin-bottom: 210px;
}
.ml-0\.5 {
    margin-left: 0.125rem;
}
.ml-1 {
    margin-left: 0.25rem;
}
.ml-2 {
    margin-left: 0.5rem;
}
.ml-auto {
    margin-left: auto;
}
.mt-0\.5 {
    margin-top: 0.125rem;
}
.mt-1 {
    margin-top: 0.25rem;
}
.mt-1\.5 {
    margin-top: 0.375rem;
}
.mt-10 {
    margin-top: 2.5rem;
}
.mt-12 {
    margin-top: 3rem;
}
.mt-2 {
    margin-top: 0.5rem;
}
.mt-2\.5 {
    margin-top: 0.625rem;
}
.mt-3 {
    margin-top: 0.75rem;
}
.mt-4 {
    margin-top: 1rem;
}
.mt-5 {
    margin-top: 1.25rem;
}
.mt-6 {
    margin-top: 1.5rem;
}
.mt-8 {
    margin-top: 2rem;
}
.mt-auto {
    margin-top: auto;
}
.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.\!block {
    display: block !important;
}
.block {
    display: block;
}
.inline-block {
    display: inline-block;
}
.inline {
    display: inline;
}
.flex {
    display: flex;
}
.inline-flex {
    display: inline-flex;
}
.table {
    display: table;
}
.grid {
    display: grid;
}
.contents {
    display: contents;
}
.hidden {
    display: none;
}
.h-1 {
    height: 0.25rem;
}
.h-1\.5 {
    height: 0.375rem;
}
.h-10 {
    height: 2.5rem;
}
.h-11 {
    height: 2.75rem;
}
.h-12 {
    height: 3rem;
}
.h-14 {
    height: 3.5rem;
}
.h-16 {
    height: 4rem;
}
.h-2 {
    height: 0.5rem;
}
.h-2\.5 {
    height: 0.625rem;
}
.h-20 {
    height: 5rem;
}
.h-24 {
    height: 6rem;
}
.h-28 {
    height: 7rem;
}
.h-3 {
    height: 0.75rem;
}
.h-3\.5 {
    height: 0.875rem;
}
.h-32 {
    height: 8rem;
}
.h-36 {
    height: 9rem;
}
.h-4 {
    height: 1rem;
}
.h-40 {
    height: 10rem;
}
.h-44 {
    height: 11rem;
}
.h-48 {
    height: 12rem;
}
.h-5 {
    height: 1.25rem;
}
.h-52 {
    height: 13rem;
}
.h-6 {
    height: 1.5rem;
}
.h-64 {
    height: 16rem;
}
.h-7 {
    height: 1.75rem;
}
.h-8 {
    height: 2rem;
}
.h-80 {
    height: 20rem;
}
.h-9 {
    height: 2.25rem;
}
.h-\[100px\] {
    height: 100px;
}
.h-\[120px\] {
    height: 120px;
}
.h-\[14px\] {
    height: 14px;
}
.h-\[20px\] {
    height: 20px;
}
.h-\[26vh\] {
    height: 26vh;
}
.h-\[280px\] {
    height: 280px;
}
.h-\[28px\] {
    height: 28px;
}
.h-\[360px\] {
    height: 360px;
}
.h-\[400px\] {
    height: 400px;
}
.h-\[40vh\] {
    height: 40vh;
}
.h-\[500px\] {
    height: 500px;
}
.h-\[52px\] {
    height: 52px;
}
.h-\[600px\] {
    height: 600px;
}
.h-\[64px\] {
    height: 64px;
}
.h-\[70\%\] {
    height: 70%;
}
.h-\[80\%\] {
    height: 80%;
}
.h-auto {
    height: auto;
}
.h-full {
    height: 100%;
}
.h-px {
    height: 1px;
}
.h-screen {
    height: 100vh;
}
.max-h-40 {
    max-height: 10rem;
}
.max-h-48 {
    max-height: 12rem;
}
.max-h-56 {
    max-height: 14rem;
}
.max-h-60 {
    max-height: 15rem;
}
.max-h-96 {
    max-height: 24rem;
}
.max-h-\[140px\] {
    max-height: 140px;
}
.max-h-\[220px\] {
    max-height: 220px;
}
.max-h-\[260px\] {
    max-height: 260px;
}
.max-h-\[300px\] {
    max-height: 300px;
}
.max-h-\[320px\] {
    max-height: 320px;
}
.max-h-\[340px\] {
    max-height: 340px;
}
.max-h-\[380px\] {
    max-height: 380px;
}
.max-h-\[400px\] {
    max-height: 400px;
}
.max-h-\[40vh\] {
    max-height: 40vh;
}
.max-h-\[70vh\] {
    max-height: 70vh;
}
.max-h-\[80vh\] {
    max-height: 80vh;
}
.max-h-\[85vh\] {
    max-height: 85vh;
}
.max-h-\[90vh\] {
    max-height: 90vh;
}
.min-h-0 {
    min-height: 0px;
}
.min-h-6 {
    min-height: 1.5rem;
}
.min-h-\[120px\] {
    min-height: 120px;
}
.min-h-\[140px\] {
    min-height: 140px;
}
.min-h-\[150px\] {
    min-height: 150px;
}
.min-h-\[180px\] {
    min-height: 180px;
}
.min-h-\[200px\] {
    min-height: 200px;
}
.min-h-\[22px\] {
    min-height: 22px;
}
.min-h-\[240px\] {
    min-height: 240px;
}
.min-h-\[300px\] {
    min-height: 300px;
}
.min-h-\[32px\] {
    min-height: 32px;
}
.min-h-\[330px\] {
    min-height: 330px;
}
.min-h-\[36px\] {
    min-height: 36px;
}
.min-h-\[40px\] {
    min-height: 40px;
}
.min-h-\[44px\] {
    min-height: 44px;
}
.min-h-\[48px\] {
    min-height: 48px;
}
.min-h-\[52px\] {
    min-height: 52px;
}
.min-h-\[56px\] {
    min-height: 56px;
}
.min-h-\[70px\] {
    min-height: 70px;
}
.min-h-\[90px\] {
    min-height: 90px;
}
.min-h-screen {
    min-height: 100vh;
}
.w-0\.5 {
    width: 0.125rem;
}
.w-1 {
    width: 0.25rem;
}
.w-1\.5 {
    width: 0.375rem;
}
.w-1\/2 {
    width: 50%;
}
.w-10 {
    width: 2.5rem;
}
.w-11 {
    width: 2.75rem;
}
.w-12 {
    width: 3rem;
}
.w-14 {
    width: 3.5rem;
}
.w-16 {
    width: 4rem;
}
.w-2 {
    width: 0.5rem;
}
.w-2\.5 {
    width: 0.625rem;
}
.w-20 {
    width: 5rem;
}
.w-24 {
    width: 6rem;
}
.w-28 {
    width: 7rem;
}
.w-3 {
    width: 0.75rem;
}
.w-3\.5 {
    width: 0.875rem;
}
.w-32 {
    width: 8rem;
}
.w-4 {
    width: 1rem;
}
.w-40 {
    width: 10rem;
}
.w-44 {
    width: 11rem;
}
.w-48 {
    width: 12rem;
}
.w-5 {
    width: 1.25rem;
}
.w-6 {
    width: 1.5rem;
}
.w-64 {
    width: 16rem;
}
.w-7 {
    width: 1.75rem;
}
.w-72 {
    width: 18rem;
}
.w-8 {
    width: 2rem;
}
.w-80 {
    width: 20rem;
}
.w-9 {
    width: 2.25rem;
}
.w-\[14px\] {
    width: 14px;
}
.w-\[1px\] {
    width: 1px;
}
.w-\[240px\] {
    width: 240px;
}
.w-\[26\%\] {
    width: 26%;
}
.w-\[28\%\] {
    width: 28%;
}
.w-\[28px\] {
    width: 28px;
}
.w-\[35\%\] {
    width: 35%;
}
.w-\[400px\] {
    width: 400px;
}
.w-\[40px\] {
    width: 40px;
}
.w-\[45px\] {
    width: 45px;
}
.w-\[48px\] {
    width: 48px;
}
.w-\[500px\] {
    width: 500px;
}
.w-\[52px\] {
    width: 52px;
}
.w-\[58px\] {
    width: 58px;
}
.w-\[60\%\] {
    width: 60%;
}
.w-\[600px\] {
    width: 600px;
}
.w-\[65\%\] {
    width: 65%;
}
.w-\[70px\] {
    width: 70px;
}
.w-\[90\%\] {
    width: 90%;
}
.w-\[90px\] {
    width: 90px;
}
.w-\[92\%\] {
    width: 92%;
}
.w-\[95\%\] {
    width: 95%;
}
.w-\[calc\(100\%-4rem\)\] {
    width: calc(100% - 4rem);
}
.w-fit {
    width: -moz-fit-content;
    width: fit-content;
}
.w-full {
    width: 100%;
}
.w-px {
    width: 1px;
}
.w-screen {
    width: 100vw;
}
.min-w-0 {
    min-width: 0px;
}
.min-w-6 {
    min-width: 1.5rem;
}
.min-w-\[10rem\] {
    min-width: 10rem;
}
.min-w-\[200px\] {
    min-width: 200px;
}
.min-w-\[220px\] {
    min-width: 220px;
}
.min-w-\[300px\] {
    min-width: 300px;
}
.min-w-\[44px\] {
    min-width: 44px;
}
.min-w-\[45px\] {
    min-width: 45px;
}
.min-w-\[620px\] {
    min-width: 620px;
}
.min-w-\[76px\] {
    min-width: 76px;
}
.min-w-\[92px\] {
    min-width: 92px;
}
.min-w-\[9rem\] {
    min-width: 9rem;
}
.max-w-2xl {
    max-width: 42rem;
}
.max-w-3xl {
    max-width: 48rem;
}
.max-w-4xl {
    max-width: 56rem;
}
.max-w-5xl {
    max-width: 64rem;
}
.max-w-7xl {
    max-width: 80rem;
}
.max-w-\[110px\] {
    max-width: 110px;
}
.max-w-\[150px\] {
    max-width: 150px;
}
.max-w-\[200px\] {
    max-width: 200px;
}
.max-w-\[340px\] {
    max-width: 340px;
}
.max-w-\[400px\] {
    max-width: 400px;
}
.max-w-\[500px\] {
    max-width: 500px;
}
.max-w-\[85\%\] {
    max-width: 85%;
}
.max-w-\[90\%\] {
    max-width: 90%;
}
.max-w-\[92vw\] {
    max-width: 92vw;
}
.max-w-full {
    max-width: 100%;
}
.max-w-lg {
    max-width: 32rem;
}
.max-w-md {
    max-width: 28rem;
}
.max-w-none {
    max-width: none;
}
.max-w-sm {
    max-width: 24rem;
}
.max-w-xl {
    max-width: 36rem;
}
.max-w-xs {
    max-width: 20rem;
}
.flex-1 {
    flex: 1 1 0%;
}
.flex-\[2\] {
    flex: 2;
}
.flex-none {
    flex: none;
}
.flex-shrink {
    flex-shrink: 1;
}
.flex-shrink-0 {
    flex-shrink: 0;
}
.shrink {
    flex-shrink: 1;
}
.shrink-0 {
    flex-shrink: 0;
}
.flex-grow {
    flex-grow: 1;
}
.grow {
    flex-grow: 1;
}
.basis-full {
    flex-basis: 100%;
}
.border-collapse {
    border-collapse: collapse;
}
.origin-left {
    transform-origin: left;
}
.-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-1\/4 {
    --tw-translate-x: -25%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-12 {
    --tw-translate-y: -3rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1 {
    --tw-translate-x: 0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1\/2 {
    --tw-translate-x: 50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1\/4 {
    --tw-translate-x: 25%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-6 {
    --tw-translate-x: 1.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0 {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-1\/2 {
    --tw-translate-y: 50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-1\/4 {
    --tw-translate-y: 25%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-90 {
    --tw-rotate: -90deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-100 {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-105 {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-110 {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-75 {
    --tw-scale-x: .75;
    --tw-scale-y: .75;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-95 {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-\[1\.02\] {
    --tw-scale-x: 1.02;
    --tw-scale-y: 1.02;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-x-0 {
    --tw-scale-x: 0;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-x-150 {
    --tw-scale-x: 1.5;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform-gpu {
    transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8,0,1,1);
    }
    50% {
        transform: none;
        animation-timing-function: cubic-bezier(0,0,0.2,1);
    }
}
.animate-bounce {
    animation: bounce 1s infinite;
}
@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}
.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes pulse {
    50% {
        opacity: .5;
    }
}
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.animate-spin {
    animation: spin 1s linear infinite;
}
.cursor-default {
    cursor: default;
}
.cursor-grab {
    cursor: grab;
}
.cursor-not-allowed {
    cursor: not-allowed;
}
.cursor-pointer {
    cursor: pointer;
}
.select-none {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}
.select-text {
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
}
.select-all {
    -webkit-user-select: all;
       -moz-user-select: all;
            user-select: all;
}
.resize-none {
    resize: none;
}
.resize-y {
    resize: vertical;
}
.resize {
    resize: both;
}
.snap-x {
    scroll-snap-type: x var(--tw-scroll-snap-strictness);
}
.list-disc {
    list-style-type: disc;
}
.list-none {
    list-style-type: none;
}
.appearance-none {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
.columns-4 {
    -moz-columns: 4;
         columns: 4;
}
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.flex-row {
    flex-direction: row;
}
.flex-col {
    flex-direction: column;
}
.flex-wrap {
    flex-wrap: wrap;
}
.items-start {
    align-items: flex-start;
}
.items-end {
    align-items: flex-end;
}
.items-center {
    align-items: center;
}
.items-baseline {
    align-items: baseline;
}
.items-stretch {
    align-items: stretch;
}
.justify-start {
    justify-content: flex-start;
}
.justify-end {
    justify-content: flex-end;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.justify-around {
    justify-content: space-around;
}
.justify-evenly {
    justify-content: space-evenly;
}
.gap-0\.5 {
    gap: 0.125rem;
}
.gap-1 {
    gap: 0.25rem;
}
.gap-1\.5 {
    gap: 0.375rem;
}
.gap-12 {
    gap: 3rem;
}
.gap-2 {
    gap: 0.5rem;
}
.gap-2\.5 {
    gap: 0.625rem;
}
.gap-3 {
    gap: 0.75rem;
}
.gap-3\.5 {
    gap: 0.875rem;
}
.gap-4 {
    gap: 1rem;
}
.gap-5 {
    gap: 1.25rem;
}
.gap-6 {
    gap: 1.5rem;
}
.gap-8 {
    gap: 2rem;
}
.gap-\[2px\] {
    gap: 2px;
}
.gap-x-2 {
    -moz-column-gap: 0.5rem;
         column-gap: 0.5rem;
}
.gap-x-4 {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
}
.gap-y-1 {
    row-gap: 0.25rem;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-3\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.875rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.divide-x > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-\[var\(--border-color\)\] > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--border-color);
}
.self-start {
    align-self: flex-start;
}
.self-end {
    align-self: flex-end;
}
.self-stretch {
    align-self: stretch;
}
.overflow-hidden {
    overflow: hidden;
}
.overflow-visible {
    overflow: visible;
}
.overflow-x-auto {
    overflow-x: auto;
}
.overflow-y-auto {
    overflow-y: auto;
}
.overflow-x-hidden {
    overflow-x: hidden;
}
.overscroll-contain {
    overscroll-behavior: contain;
}
.scroll-smooth {
    scroll-behavior: smooth;
}
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.text-ellipsis {
    text-overflow: ellipsis;
}
.whitespace-normal {
    white-space: normal;
}
.whitespace-nowrap {
    white-space: nowrap;
}
.whitespace-pre-wrap {
    white-space: pre-wrap;
}
.break-words {
    overflow-wrap: break-word;
}
.break-all {
    word-break: break-all;
}
.rounded {
    border-radius: 0.25rem;
}
.rounded-2xl {
    border-radius: 1rem;
}
.rounded-3xl {
    border-radius: 1.5rem;
}
.rounded-\[2\.5rem\] {
    border-radius: 2.5rem;
}
.rounded-\[24px\] {
    border-radius: 24px;
}
.rounded-\[2rem\] {
    border-radius: 2rem;
}
.rounded-\[32px\] {
    border-radius: 32px;
}
.rounded-\[40px\] {
    border-radius: 40px;
}
.rounded-full {
    border-radius: 9999px;
}
.rounded-lg {
    border-radius: 0.5rem;
}
.rounded-md {
    border-radius: 0.375rem;
}
.rounded-sm {
    border-radius: 0.125rem;
}
.rounded-xl {
    border-radius: 0.75rem;
}
.rounded-l-2xl {
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
}
.rounded-r-2xl {
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}
.rounded-t-3xl {
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
}
.rounded-t-\[28px\] {
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
}
.rounded-t-lg {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}
.rounded-t-sm {
    border-top-left-radius: 0.125rem;
    border-top-right-radius: 0.125rem;
}
.rounded-tl-lg {
    border-top-left-radius: 0.5rem;
}
.border {
    border-width: 1px;
}
.border-0 {
    border-width: 0px;
}
.border-2 {
    border-width: 2px;
}
.border-4 {
    border-width: 4px;
}
.border-\[3px\] {
    border-width: 3px;
}
.border-x {
    border-left-width: 1px;
    border-right-width: 1px;
}
.border-y {
    border-top-width: 1px;
    border-bottom-width: 1px;
}
.border-b {
    border-bottom-width: 1px;
}
.border-b-2 {
    border-bottom-width: 2px;
}
.border-l-2 {
    border-left-width: 2px;
}
.border-l-4 {
    border-left-width: 4px;
}
.border-r {
    border-right-width: 1px;
}
.border-r-0 {
    border-right-width: 0px;
}
.border-t {
    border-top-width: 1px;
}
.border-solid {
    border-style: solid;
}
.border-dashed {
    border-style: dashed;
}
.border-none {
    border-style: none;
}
.border-\[\#10B981\] {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.border-\[\#10B981\]\/20 {
    border-color: rgb(16 185 129 / 0.2);
}
.border-\[\#10B981\]\/30 {
    border-color: rgb(16 185 129 / 0.3);
}
.border-\[\#f59e0b\]\/20 {
    border-color: rgb(245 158 11 / 0.2);
}
.border-\[\#f59e0b\]\/30 {
    border-color: rgb(245 158 11 / 0.3);
}
.border-\[var\(--border\)\] {
    border-color: var(--border);
}
.border-\[var\(--border-color\)\] {
    border-color: var(--border-color);
}
.border-\[var\(--error-color\)\] {
    border-color: var(--error-color);
}
.border-\[var\(--player-line\)\] {
    border-color: var(--player-line);
}
.border-\[var\(--primary-color\)\] {
    border-color: var(--primary-color);
}
.border-amber-400\/20 {
    border-color: rgb(251 191 36 / 0.2);
}
.border-amber-500\/20 {
    border-color: rgb(245 158 11 / 0.2);
}
.border-amber-500\/30 {
    border-color: rgb(245 158 11 / 0.3);
}
.border-amber-500\/40 {
    border-color: rgb(245 158 11 / 0.4);
}
.border-amber-500\/50 {
    border-color: rgb(245 158 11 / 0.5);
}
.border-black\/20 {
    border-color: rgb(0 0 0 / 0.2);
}
.border-blue-400 {
    --tw-border-opacity: 1;
    border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.border-blue-500 {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-blue-500\/25 {
    border-color: rgb(59 130 246 / 0.25);
}
.border-blue-500\/30 {
    border-color: rgb(59 130 246 / 0.3);
}
.border-cyan-400 {
    --tw-border-opacity: 1;
    border-color: rgb(34 211 238 / var(--tw-border-opacity, 1));
}
.border-cyan-500 {
    --tw-border-opacity: 1;
    border-color: rgb(6 182 212 / var(--tw-border-opacity, 1));
}
.border-cyan-500\/30 {
    border-color: rgb(6 182 212 / 0.3);
}
.border-emerald-400\/20 {
    border-color: rgb(52 211 153 / 0.2);
}
.border-emerald-400\/40 {
    border-color: rgb(52 211 153 / 0.4);
}
.border-emerald-400\/80 {
    border-color: rgb(52 211 153 / 0.8);
}
.border-emerald-500 {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.border-emerald-500\/20 {
    border-color: rgb(16 185 129 / 0.2);
}
.border-emerald-500\/25 {
    border-color: rgb(16 185 129 / 0.25);
}
.border-emerald-500\/30 {
    border-color: rgb(16 185 129 / 0.3);
}
.border-emerald-500\/40 {
    border-color: rgb(16 185 129 / 0.4);
}
.border-emerald-500\/50 {
    border-color: rgb(16 185 129 / 0.5);
}
.border-gray-400 {
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}
.border-gray-600 {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.border-gray-700 {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.border-gray-800 {
    --tw-border-opacity: 1;
    border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
}
.border-green-500\/20 {
    border-color: rgb(34 197 94 / 0.2);
}
.border-green-500\/30 {
    border-color: rgb(34 197 94 / 0.3);
}
.border-green-500\/50 {
    border-color: rgb(34 197 94 / 0.5);
}
.border-grit-gold {
    --tw-border-opacity: 1;
    border-color: rgb(197 155 83 / var(--tw-border-opacity, 1));
}
.border-grit-gold\/20 {
    border-color: rgb(197 155 83 / 0.2);
}
.border-grit-gold\/30 {
    border-color: rgb(197 155 83 / 0.3);
}
.border-grit-gold\/40 {
    border-color: rgb(197 155 83 / 0.4);
}
.border-grit-lilac\/20 {
    border-color: rgb(167 139 250 / 0.2);
}
.border-grit-orange\/20 {
    border-color: rgb(245 158 11 / 0.2);
}
.border-grit-purple\/20 {
    border-color: rgb(139 92 246 / 0.2);
}
.border-grit-teal {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.border-grit-teal\/20 {
    border-color: rgb(16 185 129 / 0.2);
}
.border-grit-teal\/30 {
    border-color: rgb(16 185 129 / 0.3);
}
.border-grit-teal\/40 {
    border-color: rgb(16 185 129 / 0.4);
}
.border-indigo-500\/20 {
    border-color: rgb(99 102 241 / 0.2);
}
.border-indigo-500\/25 {
    border-color: rgb(99 102 241 / 0.25);
}
.border-orange-500 {
    --tw-border-opacity: 1;
    border-color: rgb(249 115 22 / var(--tw-border-opacity, 1));
}
.border-orange-500\/20 {
    border-color: rgb(249 115 22 / 0.2);
}
.border-orange-500\/30 {
    border-color: rgb(249 115 22 / 0.3);
}
.border-orange-500\/40 {
    border-color: rgb(249 115 22 / 0.4);
}
.border-purple-500 {
    --tw-border-opacity: 1;
    border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}
.border-purple-500\/20 {
    border-color: rgb(168 85 247 / 0.2);
}
.border-purple-500\/30 {
    border-color: rgb(168 85 247 / 0.3);
}
.border-purple-500\/40 {
    border-color: rgb(168 85 247 / 0.4);
}
.border-red-500 {
    --tw-border-opacity: 1;
    border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-red-500\/10 {
    border-color: rgb(239 68 68 / 0.1);
}
.border-red-500\/20 {
    border-color: rgb(239 68 68 / 0.2);
}
.border-red-500\/30 {
    border-color: rgb(239 68 68 / 0.3);
}
.border-red-500\/40 {
    border-color: rgb(239 68 68 / 0.4);
}
.border-red-500\/50 {
    border-color: rgb(239 68 68 / 0.5);
}
.border-rose-500 {
    --tw-border-opacity: 1;
    border-color: rgb(244 63 94 / var(--tw-border-opacity, 1));
}
.border-rose-500\/20 {
    border-color: rgb(244 63 94 / 0.2);
}
.border-rose-500\/30 {
    border-color: rgb(244 63 94 / 0.3);
}
.border-sky-500 {
    --tw-border-opacity: 1;
    border-color: rgb(14 165 233 / var(--tw-border-opacity, 1));
}
.border-sky-500\/20 {
    border-color: rgb(14 165 233 / 0.2);
}
.border-sky-500\/30 {
    border-color: rgb(14 165 233 / 0.3);
}
.border-slate-600 {
    --tw-border-opacity: 1;
    border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}
.border-slate-700 {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
.border-slate-700\/60 {
    border-color: rgb(51 65 85 / 0.6);
}
.border-slate-700\/80 {
    border-color: rgb(51 65 85 / 0.8);
}
.border-slate-800 {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
}
.border-transparent {
    border-color: transparent;
}
.border-violet-500\/30 {
    border-color: rgb(139 92 246 / 0.3);
}
.border-white\/10 {
    border-color: rgb(255 255 255 / 0.1);
}
.border-white\/15 {
    border-color: rgb(255 255 255 / 0.15);
}
.border-white\/20 {
    border-color: rgb(255 255 255 / 0.2);
}
.border-white\/30 {
    border-color: rgb(255 255 255 / 0.3);
}
.border-white\/5 {
    border-color: rgb(255 255 255 / 0.05);
}
.border-yellow-500\/30 {
    border-color: rgb(234 179 8 / 0.3);
}
.border-yellow-500\/50 {
    border-color: rgb(234 179 8 / 0.5);
}
.border-zinc-100 {
    --tw-border-opacity: 1;
    border-color: rgb(244 244 245 / var(--tw-border-opacity, 1));
}
.border-zinc-200 {
    --tw-border-opacity: 1;
    border-color: rgb(228 228 231 / var(--tw-border-opacity, 1));
}
.border-zinc-700\/30 {
    border-color: rgb(63 63 70 / 0.3);
}
.border-zinc-700\/80 {
    border-color: rgb(63 63 70 / 0.8);
}
.border-zinc-800 {
    --tw-border-opacity: 1;
    border-color: rgb(39 39 42 / var(--tw-border-opacity, 1));
}
.border-zinc-800\/40 {
    border-color: rgb(39 39 42 / 0.4);
}
.border-zinc-800\/60 {
    border-color: rgb(39 39 42 / 0.6);
}
.border-zinc-800\/80 {
    border-color: rgb(39 39 42 / 0.8);
}
.border-zinc-800\/90 {
    border-color: rgb(39 39 42 / 0.9);
}
.border-l-\[\#4dabf7\] {
    --tw-border-opacity: 1;
    border-left-color: rgb(77 171 247 / var(--tw-border-opacity, 1));
}
.border-l-\[\#ff8787\] {
    --tw-border-opacity: 1;
    border-left-color: rgb(255 135 135 / var(--tw-border-opacity, 1));
}
.border-l-\[\#ffd43b\] {
    --tw-border-opacity: 1;
    border-left-color: rgb(255 212 59 / var(--tw-border-opacity, 1));
}
.border-l-\[var\(--border-color\)\] {
    border-left-color: var(--border-color);
}
.border-l-\[var\(--primary-color\)\] {
    border-left-color: var(--primary-color);
}
.border-l-sky-500\/50 {
    border-left-color: rgb(14 165 233 / 0.5);
}
.border-t-grit-teal {
    --tw-border-opacity: 1;
    border-top-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.border-t-transparent {
    border-top-color: transparent;
}
.bg-\[\#0a0a0a\] {
    --tw-bg-opacity: 1;
    background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0f0f11\] {
    --tw-bg-opacity: 1;
    background-color: rgb(15 15 17 / var(--tw-bg-opacity, 1));
}
.bg-\[\#10B981\] {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-\[\#10B981\]\/10 {
    background-color: rgb(16 185 129 / 0.1);
}
.bg-\[\#121212\] {
    --tw-bg-opacity: 1;
    background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1));
}
.bg-\[\#171a21\] {
    --tw-bg-opacity: 1;
    background-color: rgb(23 26 33 / var(--tw-bg-opacity, 1));
}
.bg-\[\#18191c\] {
    --tw-bg-opacity: 1;
    background-color: rgb(24 25 28 / var(--tw-bg-opacity, 1));
}
.bg-\[\#1a1a1a\] {
    --tw-bg-opacity: 1;
    background-color: rgb(26 26 26 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f59e0b\]\/10 {
    background-color: rgb(245 158 11 / 0.1);
}
.bg-\[\#f59e0b\]\/20 {
    background-color: rgb(245 158 11 / 0.2);
}
.bg-\[\#fc4c02\]\/10 {
    background-color: rgb(252 76 2 / 0.1);
}
.bg-\[var\(--background-color\)\] {
    background-color: var(--background-color);
}
.bg-\[var\(--border-color\)\] {
    background-color: var(--border-color);
}
.bg-\[var\(--carbs-color\)\] {
    background-color: var(--carbs-color);
}
.bg-\[var\(--error-bg\)\] {
    background-color: var(--error-bg);
}
.bg-\[var\(--fat-color\)\] {
    background-color: var(--fat-color);
}
.bg-\[var\(--input-bg\)\] {
    background-color: var(--input-bg);
}
.bg-\[var\(--player-bg\)\] {
    background-color: var(--player-bg);
}
.bg-\[var\(--player-panel\)\] {
    background-color: var(--player-panel);
}
.bg-\[var\(--player-scrim\)\] {
    background-color: var(--player-scrim);
}
.bg-\[var\(--player-text\)\] {
    background-color: var(--player-text);
}
.bg-\[var\(--player-tile\)\] {
    background-color: var(--player-tile);
}
.bg-\[var\(--player-tile-strong\)\] {
    background-color: var(--player-tile-strong);
}
.bg-\[var\(--primary-color\)\] {
    background-color: var(--primary-color);
}
.bg-\[var\(--primary-color-translucent\)\] {
    background-color: var(--primary-color-translucent);
}
.bg-\[var\(--protein-color\)\] {
    background-color: var(--protein-color);
}
.bg-\[var\(--success-color\)\] {
    background-color: var(--success-color);
}
.bg-\[var\(--surface-card\)\] {
    background-color: var(--surface-card);
}
.bg-\[var\(--surface-color\)\] {
    background-color: var(--surface-color);
}
.bg-\[var\(--surface-color-hover\)\] {
    background-color: var(--surface-color-hover);
}
.bg-\[var\(--surface-hover\)\] {
    background-color: var(--surface-hover);
}
.bg-\[var\(--text-color\)\] {
    background-color: var(--text-color);
}
.bg-\[var\(--text-secondary-color\)\] {
    background-color: var(--text-secondary-color);
}
.bg-amber-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.bg-amber-400\/10 {
    background-color: rgb(251 191 36 / 0.1);
}
.bg-amber-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-amber-500\/10 {
    background-color: rgb(245 158 11 / 0.1);
}
.bg-amber-500\/15 {
    background-color: rgb(245 158 11 / 0.15);
}
.bg-amber-500\/20 {
    background-color: rgb(245 158 11 / 0.2);
}
.bg-amber-500\/5 {
    background-color: rgb(245 158 11 / 0.05);
}
.bg-amber-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/10 {
    background-color: rgb(0 0 0 / 0.1);
}
.bg-black\/20 {
    background-color: rgb(0 0 0 / 0.2);
}
.bg-black\/25 {
    background-color: rgb(0 0 0 / 0.25);
}
.bg-black\/30 {
    background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/40 {
    background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/5 {
    background-color: rgb(0 0 0 / 0.05);
}
.bg-black\/50 {
    background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/60 {
    background-color: rgb(0 0 0 / 0.6);
}
.bg-black\/80 {
    background-color: rgb(0 0 0 / 0.8);
}
.bg-black\/85 {
    background-color: rgb(0 0 0 / 0.85);
}
.bg-black\/90 {
    background-color: rgb(0 0 0 / 0.9);
}
.bg-blue-500\/10 {
    background-color: rgb(59 130 246 / 0.1);
}
.bg-blue-500\/20 {
    background-color: rgb(59 130 246 / 0.2);
}
.bg-blue-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-blue-600\/10 {
    background-color: rgb(37 99 235 / 0.1);
}
.bg-current {
    background-color: currentColor;
}
.bg-cyan-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(34 211 238 / var(--tw-bg-opacity, 1));
}
.bg-cyan-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(6 182 212 / var(--tw-bg-opacity, 1));
}
.bg-cyan-500\/10 {
    background-color: rgb(6 182 212 / 0.1);
}
.bg-cyan-500\/15 {
    background-color: rgb(6 182 212 / 0.15);
}
.bg-cyan-500\/20 {
    background-color: rgb(6 182 212 / 0.2);
}
.bg-cyan-500\/30 {
    background-color: rgb(6 182 212 / 0.3);
}
.bg-cyan-500\/90 {
    background-color: rgb(6 182 212 / 0.9);
}
.bg-cyan-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(8 145 178 / var(--tw-bg-opacity, 1));
}
.bg-emerald-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.bg-emerald-400\/10 {
    background-color: rgb(52 211 153 / 0.1);
}
.bg-emerald-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500\/10 {
    background-color: rgb(16 185 129 / 0.1);
}
.bg-emerald-500\/15 {
    background-color: rgb(16 185 129 / 0.15);
}
.bg-emerald-500\/20 {
    background-color: rgb(16 185 129 / 0.2);
}
.bg-emerald-500\/25 {
    background-color: rgb(16 185 129 / 0.25);
}
.bg-emerald-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-emerald-600\/10 {
    background-color: rgb(5 150 105 / 0.1);
}
.bg-gray-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
.bg-gray-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.bg-gray-600\/50 {
    background-color: rgb(75 85 99 / 0.5);
}
.bg-green-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
}
.bg-green-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-green-500\/10 {
    background-color: rgb(34 197 94 / 0.1);
}
.bg-green-500\/20 {
    background-color: rgb(34 197 94 / 0.2);
}
.bg-green-500\/30 {
    background-color: rgb(34 197 94 / 0.3);
}
.bg-green-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-green-600\/80 {
    background-color: rgb(22 163 74 / 0.8);
}
.bg-grit-dark {
    --tw-bg-opacity: 1;
    background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1));
}
.bg-grit-dark\/90 {
    background-color: rgb(10 10 10 / 0.9);
}
.bg-grit-gold {
    --tw-bg-opacity: 1;
    background-color: rgb(197 155 83 / var(--tw-bg-opacity, 1));
}
.bg-grit-gold\/10 {
    background-color: rgb(197 155 83 / 0.1);
}
.bg-grit-lilac\/10 {
    background-color: rgb(167 139 250 / 0.1);
}
.bg-grit-orange\/10 {
    background-color: rgb(245 158 11 / 0.1);
}
.bg-grit-purple\/10 {
    background-color: rgb(139 92 246 / 0.1);
}
.bg-grit-surface {
    --tw-bg-opacity: 1;
    background-color: rgb(18 18 22 / var(--tw-bg-opacity, 1));
}
.bg-grit-surface\/50 {
    background-color: rgb(18 18 22 / 0.5);
}
.bg-grit-teal {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-grit-teal\/10 {
    background-color: rgb(16 185 129 / 0.1);
}
.bg-grit-teal\/20 {
    background-color: rgb(16 185 129 / 0.2);
}
.bg-indigo-500\/10 {
    background-color: rgb(99 102 241 / 0.1);
}
.bg-neutral-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
}
.bg-orange-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.bg-orange-500\/10 {
    background-color: rgb(249 115 22 / 0.1);
}
.bg-orange-500\/15 {
    background-color: rgb(249 115 22 / 0.15);
}
.bg-orange-500\/20 {
    background-color: rgb(249 115 22 / 0.2);
}
.bg-orange-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}
.bg-orange-600\/10 {
    background-color: rgb(234 88 12 / 0.1);
}
.bg-orange-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(194 65 12 / var(--tw-bg-opacity, 1));
}
.bg-purple-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}
.bg-purple-500\/10 {
    background-color: rgb(168 85 247 / 0.1);
}
.bg-purple-500\/15 {
    background-color: rgb(168 85 247 / 0.15);
}
.bg-purple-500\/20 {
    background-color: rgb(168 85 247 / 0.2);
}
.bg-purple-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}
.bg-red-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-500\/10 {
    background-color: rgb(239 68 68 / 0.1);
}
.bg-red-500\/15 {
    background-color: rgb(239 68 68 / 0.15);
}
.bg-red-500\/20 {
    background-color: rgb(239 68 68 / 0.2);
}
.bg-red-500\/5 {
    background-color: rgb(239 68 68 / 0.05);
}
.bg-red-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-red-600\/90 {
    background-color: rgb(220 38 38 / 0.9);
}
.bg-rose-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
}
.bg-rose-500\/10 {
    background-color: rgb(244 63 94 / 0.1);
}
.bg-rose-500\/15 {
    background-color: rgb(244 63 94 / 0.15);
}
.bg-rose-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1));
}
.bg-sky-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(14 165 233 / var(--tw-bg-opacity, 1));
}
.bg-sky-500\/10 {
    background-color: rgb(14 165 233 / 0.1);
}
.bg-sky-500\/15 {
    background-color: rgb(14 165 233 / 0.15);
}
.bg-slate-500\/5 {
    background-color: rgb(100 116 139 / 0.05);
}
.bg-slate-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.bg-slate-700\/40 {
    background-color: rgb(51 65 85 / 0.4);
}
.bg-slate-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.bg-slate-800\/30 {
    background-color: rgb(30 41 59 / 0.3);
}
.bg-slate-800\/40 {
    background-color: rgb(30 41 59 / 0.4);
}
.bg-slate-800\/60 {
    background-color: rgb(30 41 59 / 0.6);
}
.bg-slate-800\/80 {
    background-color: rgb(30 41 59 / 0.8);
}
.bg-slate-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.bg-slate-900\/60 {
    background-color: rgb(15 23 42 / 0.6);
}
.bg-slate-900\/90 {
    background-color: rgb(15 23 42 / 0.9);
}
.bg-slate-950 {
    --tw-bg-opacity: 1;
    background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
}
.bg-slate-950\/80 {
    background-color: rgb(2 6 23 / 0.8);
}
.bg-transparent {
    background-color: transparent;
}
.bg-violet-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(167 139 250 / var(--tw-bg-opacity, 1));
}
.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
    background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/20 {
    background-color: rgb(255 255 255 / 0.2);
}
.bg-white\/5 {
    background-color: rgb(255 255 255 / 0.05);
}
.bg-white\/95 {
    background-color: rgb(255 255 255 / 0.95);
}
.bg-yellow-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500\/15 {
    background-color: rgb(234 179 8 / 0.15);
}
.bg-yellow-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
}
.bg-zinc-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1));
}
.bg-zinc-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(161 161 170 / var(--tw-bg-opacity, 1));
}
.bg-zinc-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
}
.bg-zinc-800\/30 {
    background-color: rgb(39 39 42 / 0.3);
}
.bg-zinc-800\/40 {
    background-color: rgb(39 39 42 / 0.4);
}
.bg-zinc-800\/80 {
    background-color: rgb(39 39 42 / 0.8);
}
.bg-zinc-800\/90 {
    background-color: rgb(39 39 42 / 0.9);
}
.bg-zinc-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
}
.bg-zinc-900\/50 {
    background-color: rgb(24 24 27 / 0.5);
}
.bg-zinc-900\/90 {
    background-color: rgb(24 24 27 / 0.9);
}
.bg-zinc-900\/95 {
    background-color: rgb(24 24 27 / 0.95);
}
.bg-zinc-950 {
    --tw-bg-opacity: 1;
    background-color: rgb(9 9 11 / var(--tw-bg-opacity, 1));
}
.bg-zinc-950\/60 {
    background-color: rgb(9 9 11 / 0.6);
}
.bg-zinc-950\/95 {
    background-color: rgb(9 9 11 / 0.95);
}
.bg-\[url\(\'\/noise\.svg\'\)\] {
    background-image: url('/noise.svg');
}
.bg-gold-gradient {
    background-image: linear-gradient(135deg, #D4AF37 0%, #FCD34D 100%);
}
.bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-l {
    background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.bg-gradient-to-tr {
    background-image: linear-gradient(to top right, var(--tw-gradient-stops));
}
.from-\[\#121212\] {
    --tw-gradient-from: #121212 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(18 18 18 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#1A1C23\] {
    --tw-gradient-from: #1A1C23 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(26 28 35 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[var\(--background-color\)\] {
    --tw-gradient-from: var(--background-color) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[var\(--card-background\)\] {
    --tw-gradient-from: var(--card-background) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[var\(--player-panel\)\] {
    --tw-gradient-from: var(--player-panel) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[var\(--surface-color\)\] {
    --tw-gradient-from: var(--surface-color) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-400 {
    --tw-gradient-from: #fbbf24 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(251 191 36 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-500 {
    --tw-gradient-from: #f59e0b var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-500\/20 {
    --tw-gradient-from: rgb(245 158 11 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-500\/25 {
    --tw-gradient-from: rgb(245 158 11 / 0.25) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black {
    --tw-gradient-from: #000 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/90 {
    --tw-gradient-from: rgb(0 0 0 / 0.9) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-500\/20 {
    --tw-gradient-from: rgb(59 130 246 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-600 {
    --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-400 {
    --tw-gradient-from: #34d399 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(52 211 153 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-500 {
    --tw-gradient-from: #10b981 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-500\/15 {
    --tw-gradient-from: rgb(16 185 129 / 0.15) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-500\/20 {
    --tw-gradient-from: rgb(16 185 129 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-600\/40 {
    --tw-gradient-from: rgb(5 150 105 / 0.4) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(5 150 105 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-900\/50 {
    --tw-gradient-from: rgb(6 78 59 / 0.5) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(6 78 59 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-grit-dark\/90 {
    --tw-gradient-from: rgb(10 10 10 / 0.9) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(10 10 10 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-grit-gold\/20 {
    --tw-gradient-from: rgb(197 155 83 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(197 155 83 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-grit-purple {
    --tw-gradient-from: #8B5CF6 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(139 92 246 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-grit-teal {
    --tw-gradient-from: #10B981 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-grit-teal\/20 {
    --tw-gradient-from: rgb(16 185 129 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-grit-teal\/5 {
    --tw-gradient-from: rgb(16 185 129 / 0.05) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-500\/20 {
    --tw-gradient-from: rgb(249 115 22 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-600\/40 {
    --tw-gradient-from: rgb(234 88 12 / 0.4) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(234 88 12 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-500 {
    --tw-gradient-from: #ef4444 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-500\/10 {
    --tw-gradient-from: rgb(239 68 68 / 0.1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-500\/20 {
    --tw-gradient-from: rgb(239 68 68 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-600 {
    --tw-gradient-from: #dc2626 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(220 38 38 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-transparent {
    --tw-gradient-from: transparent var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white\/30 {
    --tw-gradient-from: rgb(255 255 255 / 0.3) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-yellow-500\/20 {
    --tw-gradient-from: rgb(234 179 8 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-yellow-600 {
    --tw-gradient-from: #ca8a04 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(202 138 4 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[\#0D0E12\] {
    --tw-gradient-to: rgb(13 14 18 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #0D0E12 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-\[\#121212\]\/80 {
    --tw-gradient-to: rgb(18 18 18 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(18 18 18 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-black\/40 {
    --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-black\/80 {
    --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-emerald-500\/10 {
    --tw-gradient-to: rgb(16 185 129 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(16 185 129 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-grit-dark\/80 {
    --tw-gradient-to: rgb(10 10 10 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(10 10 10 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-orange-500\/10 {
    --tw-gradient-to: rgb(249 115 22 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(249 115 22 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-red-500\/50 {
    --tw-gradient-to: rgb(239 68 68 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(239 68 68 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-teal-500 {
    --tw-gradient-to: rgb(20 184 166 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #14b8a6 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-teal-500\/10 {
    --tw-gradient-to: rgb(20 184 166 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(20 184 166 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-transparent {
    --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-white\/10 {
    --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-white\/20 {
    --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-yellow-400 {
    --tw-gradient-to: rgb(250 204 21 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #facc15 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-yellow-500 {
    --tw-gradient-to: rgb(234 179 8 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #eab308 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-yellow-500\/10 {
    --tw-gradient-to: rgb(234 179 8 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(234 179 8 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-yellow-500\/15 {
    --tw-gradient-to: rgb(234 179 8 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(234 179 8 / 0.15) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[var\(--background-color\)\] {
    --tw-gradient-to: var(--background-color) var(--tw-gradient-to-position);
}
.to-amber-500 {
    --tw-gradient-to: #f59e0b var(--tw-gradient-to-position);
}
.to-amber-600\/15 {
    --tw-gradient-to: rgb(217 119 6 / 0.15) var(--tw-gradient-to-position);
}
.to-amber-700 {
    --tw-gradient-to: #b45309 var(--tw-gradient-to-position);
}
.to-black {
    --tw-gradient-to: #000 var(--tw-gradient-to-position);
}
.to-black\/10 {
    --tw-gradient-to: rgb(0 0 0 / 0.1) var(--tw-gradient-to-position);
}
.to-black\/20 {
    --tw-gradient-to: rgb(0 0 0 / 0.2) var(--tw-gradient-to-position);
}
.to-black\/40 {
    --tw-gradient-to: rgb(0 0 0 / 0.4) var(--tw-gradient-to-position);
}
.to-blue-500 {
    --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);
}
.to-cyan-400 {
    --tw-gradient-to: #22d3ee var(--tw-gradient-to-position);
}
.to-emerald-400 {
    --tw-gradient-to: #34d399 var(--tw-gradient-to-position);
}
.to-emerald-500 {
    --tw-gradient-to: #10b981 var(--tw-gradient-to-position);
}
.to-emerald-500\/10 {
    --tw-gradient-to: rgb(16 185 129 / 0.1) var(--tw-gradient-to-position);
}
.to-emerald-500\/20 {
    --tw-gradient-to: rgb(16 185 129 / 0.2) var(--tw-gradient-to-position);
}
.to-emerald-500\/5 {
    --tw-gradient-to: rgb(16 185 129 / 0.05) var(--tw-gradient-to-position);
}
.to-emerald-600 {
    --tw-gradient-to: #059669 var(--tw-gradient-to-position);
}
.to-grit-blue {
    --tw-gradient-to: #3B82F6 var(--tw-gradient-to-position);
}
.to-grit-dark {
    --tw-gradient-to: #0a0a0a var(--tw-gradient-to-position);
}
.to-grit-gold\/20 {
    --tw-gradient-to: rgb(197 155 83 / 0.2) var(--tw-gradient-to-position);
}
.to-indigo-600 {
    --tw-gradient-to: #4f46e5 var(--tw-gradient-to-position);
}
.to-orange-500 {
    --tw-gradient-to: #f97316 var(--tw-gradient-to-position);
}
.to-orange-500\/10 {
    --tw-gradient-to: rgb(249 115 22 / 0.1) var(--tw-gradient-to-position);
}
.to-orange-500\/20 {
    --tw-gradient-to: rgb(249 115 22 / 0.2) var(--tw-gradient-to-position);
}
.to-orange-600 {
    --tw-gradient-to: #ea580c var(--tw-gradient-to-position);
}
.to-purple-500\/20 {
    --tw-gradient-to: rgb(168 85 247 / 0.2) var(--tw-gradient-to-position);
}
.to-red-500\/10 {
    --tw-gradient-to: rgb(239 68 68 / 0.1) var(--tw-gradient-to-position);
}
.to-red-500\/20 {
    --tw-gradient-to: rgb(239 68 68 / 0.2) var(--tw-gradient-to-position);
}
.to-teal-500 {
    --tw-gradient-to: #14b8a6 var(--tw-gradient-to-position);
}
.to-teal-600 {
    --tw-gradient-to: #0d9488 var(--tw-gradient-to-position);
}
.to-transparent {
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.to-white\/40 {
    --tw-gradient-to: rgb(255 255 255 / 0.4) var(--tw-gradient-to-position);
}
.to-yellow-500 {
    --tw-gradient-to: #eab308 var(--tw-gradient-to-position);
}
.bg-cover {
    background-size: cover;
}
.bg-clip-text {
    -webkit-background-clip: text;
            background-clip: text;
}
.bg-center {
    background-position: center;
}
.fill-current {
    fill: currentColor;
}
.object-contain {
    -o-object-fit: contain;
       object-fit: contain;
}
.object-cover {
    -o-object-fit: cover;
       object-fit: cover;
}
.p-0 {
    padding: 0px;
}
.p-0\.5 {
    padding: 0.125rem;
}
.p-1 {
    padding: 0.25rem;
}
.p-1\.5 {
    padding: 0.375rem;
}
.p-10 {
    padding: 2.5rem;
}
.p-12 {
    padding: 3rem;
}
.p-2 {
    padding: 0.5rem;
}
.p-2\.5 {
    padding: 0.625rem;
}
.p-3 {
    padding: 0.75rem;
}
.p-3\.5 {
    padding: 0.875rem;
}
.p-4 {
    padding: 1rem;
}
.p-5 {
    padding: 1.25rem;
}
.p-6 {
    padding: 1.5rem;
}
.p-8 {
    padding: 2rem;
}
.px-0\.5 {
    padding-left: 0.125rem;
    padding-right: 0.125rem;
}
.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.px-1\.5 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}
.px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}
.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.px-3\.5 {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}
.py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
}
.py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}
.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}
.py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}
.py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}
.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.py-3\.5 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.py-px {
    padding-top: 1px;
    padding-bottom: 1px;
}
.pb-0 {
    padding-bottom: 0px;
}
.pb-0\.5 {
    padding-bottom: 0.125rem;
}
.pb-1 {
    padding-bottom: 0.25rem;
}
.pb-12 {
    padding-bottom: 3rem;
}
.pb-16 {
    padding-bottom: 4rem;
}
.pb-2 {
    padding-bottom: 0.5rem;
}
.pb-2\.5 {
    padding-bottom: 0.625rem;
}
.pb-3 {
    padding-bottom: 0.75rem;
}
.pb-4 {
    padding-bottom: 1rem;
}
.pb-6 {
    padding-bottom: 1.5rem;
}
.pl-1 {
    padding-left: 0.25rem;
}
.pl-10 {
    padding-left: 2.5rem;
}
.pl-4 {
    padding-left: 1rem;
}
.pl-5 {
    padding-left: 1.25rem;
}
.pl-6 {
    padding-left: 1.5rem;
}
.pl-7 {
    padding-left: 1.75rem;
}
.pl-9 {
    padding-left: 2.25rem;
}
.pr-0\.5 {
    padding-right: 0.125rem;
}
.pr-1 {
    padding-right: 0.25rem;
}
.pr-10 {
    padding-right: 2.5rem;
}
.pr-11 {
    padding-right: 2.75rem;
}
.pr-2 {
    padding-right: 0.5rem;
}
.pr-3 {
    padding-right: 0.75rem;
}
.pr-4 {
    padding-right: 1rem;
}
.pr-8 {
    padding-right: 2rem;
}
.pt-0\.5 {
    padding-top: 0.125rem;
}
.pt-1 {
    padding-top: 0.25rem;
}
.pt-1\.5 {
    padding-top: 0.375rem;
}
.pt-2 {
    padding-top: 0.5rem;
}
.pt-3 {
    padding-top: 0.75rem;
}
.pt-32 {
    padding-top: 8rem;
}
.pt-4 {
    padding-top: 1rem;
}
.pt-5 {
    padding-top: 1.25rem;
}
.pt-6 {
    padding-top: 1.5rem;
}
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.font-\[\'Outfit\'\] {
    font-family: 'Outfit';
}
.font-\[system-ui\] {
    font-family: system-ui;
}
.font-display {
    font-family: Montserrat, sans-serif;
}
.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans {
    font-family: Inter, sans-serif;
}
.text-2xl {
    font-size: var(--text-2xl);
    line-height: 1.3;
}
.text-2xs {
    font-size: var(--text-2xs);
    line-height: 1.2;
}
.text-3xl {
    font-size: var(--text-3xl);
    line-height: 1.2;
}
.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}
.text-5xl {
    font-size: 3rem;
    line-height: 1;
}
.text-6xl {
    font-size: 3.75rem;
    line-height: 1;
}
.text-7xl {
    font-size: 4.5rem;
    line-height: 1;
}
.text-8xl {
    font-size: 6rem;
    line-height: 1;
}
.text-\[0\.65rem\] {
    font-size: 0.65rem;
}
.text-\[0\.8rem\] {
    font-size: 0.8rem;
}
.text-\[10px\] {
    font-size: 10px;
}
.text-\[11px\] {
    font-size: 11px;
}
.text-\[12px\] {
    font-size: 12px;
}
.text-\[13px\] {
    font-size: 13px;
}
.text-\[14px\] {
    font-size: 14px;
}
.text-\[8\.5px\] {
    font-size: 8.5px;
}
.text-\[8px\] {
    font-size: 8px;
}
.text-\[8rem\] {
    font-size: 8rem;
}
.text-\[9px\] {
    font-size: 9px;
}
.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}
.text-lg {
    font-size: var(--text-lg);
    line-height: 1.5;
}
.text-sm {
    font-size: var(--text-sm);
    line-height: 1.35;
}
.text-xl {
    font-size: var(--text-xl);
    line-height: 1.4;
}
.text-xs {
    font-size: var(--text-xs);
    line-height: 1.25;
}
.font-black {
    font-weight: 900;
}
.font-bold {
    font-weight: 700;
}
.font-extrabold {
    font-weight: 800;
}
.font-light {
    font-weight: 300;
}
.font-medium {
    font-weight: 500;
}
.font-normal {
    font-weight: 400;
}
.font-semibold {
    font-weight: 600;
}
.uppercase {
    text-transform: uppercase;
}
.lowercase {
    text-transform: lowercase;
}
.capitalize {
    text-transform: capitalize;
}
.normal-case {
    text-transform: none;
}
.italic {
    font-style: italic;
}
.ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-\[1\.1\] {
    line-height: 1.1;
}
.leading-\[1\.2\] {
    line-height: 1.2;
}
.leading-none {
    line-height: 1;
}
.leading-normal {
    line-height: 1.5;
}
.leading-relaxed {
    line-height: 1.625;
}
.leading-snug {
    line-height: 1.375;
}
.leading-tight {
    line-height: 1.25;
}
.tracking-\[0\.08em\] {
    letter-spacing: 0.08em;
}
.tracking-\[0\.15em\] {
    letter-spacing: 0.15em;
}
.tracking-\[0\.25em\] {
    letter-spacing: 0.25em;
}
.tracking-\[0\.2em\] {
    letter-spacing: 0.2em;
}
.tracking-\[0\.3em\] {
    letter-spacing: 0.3em;
}
.tracking-\[0\.5em\] {
    letter-spacing: 0.5em;
}
.tracking-normal {
    letter-spacing: 0em;
}
.tracking-tight {
    letter-spacing: -0.025em;
}
.tracking-tighter {
    letter-spacing: -0.05em;
}
.tracking-wide {
    letter-spacing: 0.025em;
}
.tracking-wider {
    letter-spacing: 0.05em;
}
.tracking-widest {
    letter-spacing: 0.1em;
}
.text-\[\#10B981\] {
    --tw-text-opacity: 1;
    color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-\[\#f59e0b\] {
    --tw-text-opacity: 1;
    color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.text-\[\#fc4c02\] {
    --tw-text-opacity: 1;
    color: rgb(252 76 2 / var(--tw-text-opacity, 1));
}
.text-\[var\(--background-color\)\] {
    color: var(--background-color);
}
.text-\[var\(--carbs-color\)\] {
    color: var(--carbs-color);
}
.text-\[var\(--error-color\)\] {
    color: var(--error-color);
}
.text-\[var\(--error-color\2c \#ef4444\)\] {
    color: var(--error-color,#ef4444);
}
.text-\[var\(--fat-color\)\] {
    color: var(--fat-color);
}
.text-\[var\(--on-primary-color\)\] {
    color: var(--on-primary-color);
}
.text-\[var\(--player-faint\)\] {
    color: var(--player-faint);
}
.text-\[var\(--player-muted\)\] {
    color: var(--player-muted);
}
.text-\[var\(--player-text\)\] {
    color: var(--player-text);
}
.text-\[var\(--primary-color\)\] {
    color: var(--primary-color);
}
.text-\[var\(--protein-color\)\] {
    color: var(--protein-color);
}
.text-\[var\(--success-color\)\] {
    color: var(--success-color);
}
.text-\[var\(--text-2xs\)\] {
    color: var(--text-2xs);
}
.text-\[var\(--text-color\)\] {
    color: var(--text-color);
}
.text-\[var\(--text-light\)\] {
    color: var(--text-light);
}
.text-\[var\(--text-main\)\] {
    color: var(--text-main);
}
.text-\[var\(--text-secondary-color\)\] {
    color: var(--text-secondary-color);
}
.text-\[var\(--text-sub\)\] {
    color: var(--text-sub);
}
.text-\[var\(--warning-color\)\] {
    color: var(--warning-color);
}
.text-amber-300 {
    --tw-text-opacity: 1;
    color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.text-amber-400 {
    --tw-text-opacity: 1;
    color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-amber-400\/80 {
    color: rgb(251 191 36 / 0.8);
}
.text-amber-400\/90 {
    color: rgb(251 191 36 / 0.9);
}
.text-amber-500 {
    --tw-text-opacity: 1;
    color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.text-amber-500\/80 {
    color: rgb(245 158 11 / 0.8);
}
.text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-blue-300 {
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.text-blue-400 {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-blue-500 {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-cyan-400 {
    --tw-text-opacity: 1;
    color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}
.text-cyan-500 {
    --tw-text-opacity: 1;
    color: rgb(6 182 212 / var(--tw-text-opacity, 1));
}
.text-cyan-600 {
    --tw-text-opacity: 1;
    color: rgb(8 145 178 / var(--tw-text-opacity, 1));
}
.text-emerald-100\/90 {
    color: rgb(209 250 229 / 0.9);
}
.text-emerald-300 {
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.text-emerald-400 {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.text-emerald-400\/70 {
    color: rgb(52 211 153 / 0.7);
}
.text-emerald-500 {
    --tw-text-opacity: 1;
    color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-emerald-600 {
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-gray-200 {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-400 {
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.text-green-500 {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-green-600 {
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-grit-blue {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-grit-dark {
    --tw-text-opacity: 1;
    color: rgb(10 10 10 / var(--tw-text-opacity, 1));
}
.text-grit-gold {
    --tw-text-opacity: 1;
    color: rgb(197 155 83 / var(--tw-text-opacity, 1));
}
.text-grit-lilac {
    --tw-text-opacity: 1;
    color: rgb(167 139 250 / var(--tw-text-opacity, 1));
}
.text-grit-orange {
    --tw-text-opacity: 1;
    color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.text-grit-purple {
    --tw-text-opacity: 1;
    color: rgb(139 92 246 / var(--tw-text-opacity, 1));
}
.text-grit-teal {
    --tw-text-opacity: 1;
    color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-indigo-400 {
    --tw-text-opacity: 1;
    color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}
.text-indigo-500 {
    --tw-text-opacity: 1;
    color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}
.text-inherit {
    color: inherit;
}
.text-orange-400 {
    --tw-text-opacity: 1;
    color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.text-orange-400\/70 {
    color: rgb(251 146 60 / 0.7);
}
.text-orange-500 {
    --tw-text-opacity: 1;
    color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.text-orange-500\/80 {
    color: rgb(249 115 22 / 0.8);
}
.text-orange-600 {
    --tw-text-opacity: 1;
    color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.text-purple-300 {
    --tw-text-opacity: 1;
    color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}
.text-purple-400 {
    --tw-text-opacity: 1;
    color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.text-purple-400\/90 {
    color: rgb(192 132 252 / 0.9);
}
.text-purple-500 {
    --tw-text-opacity: 1;
    color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}
.text-purple-500\/80 {
    color: rgb(168 85 247 / 0.8);
}
.text-purple-600 {
    --tw-text-opacity: 1;
    color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}
.text-red-400 {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-400\/90 {
    color: rgb(248 113 113 / 0.9);
}
.text-red-500 {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-rose-300 {
    --tw-text-opacity: 1;
    color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}
.text-rose-400 {
    --tw-text-opacity: 1;
    color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}
.text-rose-600 {
    --tw-text-opacity: 1;
    color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}
.text-sky-400 {
    --tw-text-opacity: 1;
    color: rgb(56 189 248 / var(--tw-text-opacity, 1));
}
.text-sky-500 {
    --tw-text-opacity: 1;
    color: rgb(14 165 233 / var(--tw-text-opacity, 1));
}
.text-sky-500\/80 {
    color: rgb(14 165 233 / 0.8);
}
.text-slate-100 {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.text-slate-200 {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.text-slate-300 {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.text-slate-400 {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-slate-500 {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-slate-600 {
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.text-slate-900 {
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.text-slate-950 {
    --tw-text-opacity: 1;
    color: rgb(2 6 23 / var(--tw-text-opacity, 1));
}
.text-transparent {
    color: transparent;
}
.text-violet-400 {
    --tw-text-opacity: 1;
    color: rgb(167 139 250 / var(--tw-text-opacity, 1));
}
.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/20 {
    color: rgb(255 255 255 / 0.2);
}
.text-white\/30 {
    color: rgb(255 255 255 / 0.3);
}
.text-white\/40 {
    color: rgb(255 255 255 / 0.4);
}
.text-white\/5 {
    color: rgb(255 255 255 / 0.05);
}
.text-white\/50 {
    color: rgb(255 255 255 / 0.5);
}
.text-white\/60 {
    color: rgb(255 255 255 / 0.6);
}
.text-white\/70 {
    color: rgb(255 255 255 / 0.7);
}
.text-white\/80 {
    color: rgb(255 255 255 / 0.8);
}
.text-white\/90 {
    color: rgb(255 255 255 / 0.9);
}
.text-white\/95 {
    color: rgb(255 255 255 / 0.95);
}
.text-yellow-400 {
    --tw-text-opacity: 1;
    color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.text-yellow-500 {
    --tw-text-opacity: 1;
    color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}
.text-zinc-100 {
    --tw-text-opacity: 1;
    color: rgb(244 244 245 / var(--tw-text-opacity, 1));
}
.text-zinc-200 {
    --tw-text-opacity: 1;
    color: rgb(228 228 231 / var(--tw-text-opacity, 1));
}
.text-zinc-300 {
    --tw-text-opacity: 1;
    color: rgb(212 212 216 / var(--tw-text-opacity, 1));
}
.text-zinc-400 {
    --tw-text-opacity: 1;
    color: rgb(161 161 170 / var(--tw-text-opacity, 1));
}
.text-zinc-500 {
    --tw-text-opacity: 1;
    color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}
.text-zinc-600 {
    --tw-text-opacity: 1;
    color: rgb(82 82 91 / var(--tw-text-opacity, 1));
}
.text-zinc-700 {
    --tw-text-opacity: 1;
    color: rgb(63 63 70 / var(--tw-text-opacity, 1));
}
.text-zinc-900 {
    --tw-text-opacity: 1;
    color: rgb(24 24 27 / var(--tw-text-opacity, 1));
}
.text-zinc-950 {
    --tw-text-opacity: 1;
    color: rgb(9 9 11 / var(--tw-text-opacity, 1));
}
.underline {
    text-decoration-line: underline;
}
.line-through {
    text-decoration-line: line-through;
}
.no-underline {
    text-decoration-line: none;
}
.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.placeholder-gray-500::-moz-placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(107 114 128 / var(--tw-placeholder-opacity, 1));
}
.placeholder-gray-500::placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(107 114 128 / var(--tw-placeholder-opacity, 1));
}
.placeholder-slate-500::-moz-placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(100 116 139 / var(--tw-placeholder-opacity, 1));
}
.placeholder-slate-500::placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(100 116 139 / var(--tw-placeholder-opacity, 1));
}
.placeholder-slate-600::-moz-placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(71 85 105 / var(--tw-placeholder-opacity, 1));
}
.placeholder-slate-600::placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(71 85 105 / var(--tw-placeholder-opacity, 1));
}
.placeholder-opacity-50::-moz-placeholder {
    --tw-placeholder-opacity: 0.5;
}
.placeholder-opacity-50::placeholder {
    --tw-placeholder-opacity: 0.5;
}
.accent-\[var\(--primary-color\)\] {
    accent-color: var(--primary-color);
}
.accent-blue-500 {
    accent-color: #3b82f6;
}
.accent-cyan-500 {
    accent-color: #06b6d4;
}
.accent-rose-500 {
    accent-color: #f43f5e;
}
.opacity-0 {
    opacity: 0;
}
.opacity-100 {
    opacity: 1;
}
.opacity-20 {
    opacity: 0.2;
}
.opacity-25 {
    opacity: 0.25;
}
.opacity-30 {
    opacity: 0.3;
}
.opacity-35 {
    opacity: 0.35;
}
.opacity-40 {
    opacity: 0.4;
}
.opacity-45 {
    opacity: 0.45;
}
.opacity-5 {
    opacity: 0.05;
}
.opacity-50 {
    opacity: 0.5;
}
.opacity-55 {
    opacity: 0.55;
}
.opacity-60 {
    opacity: 0.6;
}
.opacity-70 {
    opacity: 0.7;
}
.opacity-75 {
    opacity: 0.75;
}
.opacity-80 {
    opacity: 0.8;
}
.opacity-90 {
    opacity: 0.9;
}
.mix-blend-screen {
    mix-blend-mode: screen;
}
.mix-blend-overlay {
    mix-blend-mode: overlay;
}
.shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_10px_rgba\(6\2c 182\2c 212\2c 0\.8\)\] {
    --tw-shadow: 0 0 10px rgba(6,182,212,0.8);
    --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_10px_white\] {
    --tw-shadow: 0 0 10px white;
    --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_12px_rgba\(239\2c 68\2c 68\2c 0\.3\)\] {
    --tw-shadow: 0 0 12px rgba(239,68,68,0.3);
    --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_12px_rgba\(6\2c 182\2c 212\2c 0\.6\)\] {
    --tw-shadow: 0 0 12px rgba(6,182,212,0.6);
    --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_15px_rgba\(212\2c 175\2c 55\2c 0\.3\)\] {
    --tw-shadow: 0 0 15px rgba(212,175,55,0.3);
    --tw-shadow-colored: 0 0 15px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_15px_rgba\(220\2c 38\2c 38\2c 0\.3\)\] {
    --tw-shadow: 0 0 15px rgba(220,38,38,0.3);
    --tw-shadow-colored: 0 0 15px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_15px_rgba\(239\2c 68\2c 68\2c 0\.3\)\] {
    --tw-shadow: 0 0 15px rgba(239,68,68,0.3);
    --tw-shadow-colored: 0 0 15px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_15px_rgba\(6\2c 182\2c 212\2c 0\.3\)\] {
    --tw-shadow: 0 0 15px rgba(6,182,212,0.3);
    --tw-shadow-colored: 0 0 15px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_15px_rgba\(6\2c 182\2c 212\2c 0\.5\)\] {
    --tw-shadow: 0 0 15px rgba(6,182,212,0.5);
    --tw-shadow-colored: 0 0 15px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_20px_rgba\(16\2c 185\2c 129\2c 0\.4\)\] {
    --tw-shadow: 0 0 20px rgba(16,185,129,0.4);
    --tw-shadow-colored: 0 0 20px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_20px_rgba\(245\2c 158\2c 11\2c 0\.25\)\] {
    --tw-shadow: 0 0 20px rgba(245,158,11,0.25);
    --tw-shadow-colored: 0 0 20px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_20px_rgba\(6\2c 182\2c 212\2c 0\.6\)\] {
    --tw-shadow: 0 0 20px rgba(6,182,212,0.6);
    --tw-shadow-colored: 0 0 20px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_30px_rgba\(16\2c 185\2c 129\2c 0\.3\)\] {
    --tw-shadow: 0 0 30px rgba(16,185,129,0.3);
    --tw-shadow-colored: 0 0 30px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_30px_rgba\(16\2c 185\2c 129\2c 0\.4\)\] {
    --tw-shadow: 0 0 30px rgba(16,185,129,0.4);
    --tw-shadow-colored: 0 0 30px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_30px_rgba\(212\2c 175\2c 55\2c 0\.25\)\] {
    --tw-shadow: 0 0 30px rgba(212,175,55,0.25);
    --tw-shadow-colored: 0 0 30px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_30px_rgba\(249\2c 115\2c 22\2c 0\.5\)\] {
    --tw-shadow: 0 0 30px rgba(249,115,22,0.5);
    --tw-shadow-colored: 0 0 30px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_30px_rgba\(6\2c 182\2c 212\2c 0\.5\)\] {
    --tw-shadow: 0 0 30px rgba(6,182,212,0.5);
    --tw-shadow-colored: 0 0 30px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_35px_rgba\(245\2c 158\2c 11\2c 0\.3\)\] {
    --tw-shadow: 0 0 35px rgba(245,158,11,0.3);
    --tw-shadow-colored: 0 0 35px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_40px_rgba\(16\2c 185\2c 129\2c 0\.15\)\] {
    --tw-shadow: 0 0 40px rgba(16,185,129,0.15);
    --tw-shadow-colored: 0 0 40px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_50px_-12px_rgba\(255\2c 204\2c 0\2c 0\.15\)\] {
    --tw-shadow: 0 0 50px -12px rgba(255,204,0,0.15);
    --tw-shadow-colored: 0 0 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_50px_rgba\(0\2c 0\2c 0\2c 0\.5\)\] {
    --tw-shadow: 0 0 50px rgba(0,0,0,0.5);
    --tw-shadow-colored: 0 0 50px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_6px_\#10b981\] {
    --tw-shadow: 0 0 6px #10b981;
    --tw-shadow-colored: 0 0 6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_8px_rgba\(52\2c 211\2c 153\2c 0\.8\)\] {
    --tw-shadow: 0 0 8px rgba(52,211,153,0.8);
    --tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_10px_30px_rgba\(0\2c 0\2c 0\2c 0\.5\)\] {
    --tw-shadow: 0 10px 30px rgba(0,0,0,0.5);
    --tw-shadow-colored: 0 10px 30px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_10px_30px_rgba\(6\2c 182\2c 212\2c 0\.25\)\] {
    --tw-shadow: 0 10px 30px rgba(6,182,212,0.25);
    --tw-shadow-colored: 0 10px 30px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_12px_24px_-8px_rgba\(var\(--primary-rgb\)\2c 0\.5\)\] {
    --tw-shadow: 0 12px 24px -8px rgba(var(--primary-rgb),0.5);
    --tw-shadow-colored: 0 12px 24px -8px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_20px_40px_-10px_rgba\(6\2c 182\2c 212\2c 0\.5\)\] {
    --tw-shadow: 0 20px 40px -10px rgba(6,182,212,0.5);
    --tw-shadow-colored: 0 20px 40px -10px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_32px_64px_-16px_rgba\(0\2c 0\2c 0\2c 0\.6\)\] {
    --tw-shadow: 0 32px 64px -16px rgba(0,0,0,0.6);
    --tw-shadow-colored: 0 32px 64px -16px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_4px_20px_rgba\(239\2c 68\2c 68\2c 0\.1\)\] {
    --tw-shadow: 0 4px 20px rgba(239,68,68,0.1);
    --tw-shadow-colored: 0 4px 20px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_8px_16px_rgba\(var\(--primary-rgb\)\2c 0\.3\)\] {
    --tw-shadow: 0 8px 16px rgba(var(--primary-rgb),0.3);
    --tw-shadow-colored: 0 8px 16px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-inner {
    --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-blue-500\/10 {
    --tw-shadow-color: rgb(59 130 246 / 0.1);
    --tw-shadow: var(--tw-shadow-colored);
}
.shadow-blue-500\/20 {
    --tw-shadow-color: rgb(59 130 246 / 0.2);
    --tw-shadow: var(--tw-shadow-colored);
}
.shadow-cyan-500\/20 {
    --tw-shadow-color: rgb(6 182 212 / 0.2);
    --tw-shadow: var(--tw-shadow-colored);
}
.shadow-cyan-600\/20 {
    --tw-shadow-color: rgb(8 145 178 / 0.2);
    --tw-shadow: var(--tw-shadow-colored);
}
.shadow-emerald-500\/20 {
    --tw-shadow-color: rgb(16 185 129 / 0.2);
    --tw-shadow: var(--tw-shadow-colored);
}
.shadow-emerald-500\/25 {
    --tw-shadow-color: rgb(16 185 129 / 0.25);
    --tw-shadow: var(--tw-shadow-colored);
}
.shadow-orange-500\/10 {
    --tw-shadow-color: rgb(249 115 22 / 0.1);
    --tw-shadow: var(--tw-shadow-colored);
}
.shadow-orange-500\/20 {
    --tw-shadow-color: rgb(249 115 22 / 0.2);
    --tw-shadow: var(--tw-shadow-colored);
}
.shadow-purple-500\/20 {
    --tw-shadow-color: rgb(168 85 247 / 0.2);
    --tw-shadow: var(--tw-shadow-colored);
}
.shadow-purple-900\/20 {
    --tw-shadow-color: rgb(88 28 135 / 0.2);
    --tw-shadow: var(--tw-shadow-colored);
}
.shadow-red-900\/20 {
    --tw-shadow-color: rgb(127 29 29 / 0.2);
    --tw-shadow: var(--tw-shadow-colored);
}
.outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.outline {
    outline-style: solid;
}
.ring {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-4 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-amber-500 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(245 158 11 / var(--tw-ring-opacity, 1));
}
.ring-amber-500\/10 {
    --tw-ring-color: rgb(245 158 11 / 0.1);
}
.ring-emerald-400 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(52 211 153 / var(--tw-ring-opacity, 1));
}
.ring-orange-500 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(249 115 22 / var(--tw-ring-opacity, 1));
}
.ring-purple-500 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity, 1));
}
.ring-sky-500 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(14 165 233 / var(--tw-ring-opacity, 1));
}
.ring-offset-2 {
    --tw-ring-offset-width: 2px;
}
.ring-offset-transparent {
    --tw-ring-offset-color: transparent;
}
.blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-2xl {
    --tw-blur: blur(40px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-3xl {
    --tw-blur: blur(64px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[100px\] {
    --tw-blur: blur(100px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[120px\] {
    --tw-blur: blur(120px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[150px\] {
    --tw-blur: blur(150px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[1px\] {
    --tw-blur: blur(1px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[60px\] {
    --tw-blur: blur(60px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-md {
    --tw-blur: blur(12px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-sm {
    --tw-blur: blur(4px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-xl {
    --tw-blur: blur(24px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.brightness-200 {
    --tw-brightness: brightness(2);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.brightness-75 {
    --tw-brightness: brightness(.75);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow {
    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-2xl {
    --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_0_15px_rgba\(6\2c 182\2c 212\2c 0\.5\)\] {
    --tw-drop-shadow: drop-shadow(0 0 15px rgba(6,182,212,0.5));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_0_15px_rgba\(6\2c 182\2c 212\2c 0\.8\)\] {
    --tw-drop-shadow: drop-shadow(0 0 15px rgba(6,182,212,0.8));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_0_20px_rgba\(34\2c 211\2c 238\2c 0\.5\)\] {
    --tw-drop-shadow: drop-shadow(0 0 20px rgba(34,211,238,0.5));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_0_20px_rgba\(var\(--primary-rgb\)\2c 0\.3\)\] {
    --tw-drop-shadow: drop-shadow(0 0 20px rgba(var(--primary-rgb),0.3));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_0_30px_rgba\(249\2c 115\2c 22\2c 0\.6\)\] {
    --tw-drop-shadow: drop-shadow(0 0 30px rgba(249,115,22,0.6));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_0_8px_rgba\(249\2c 115\2c 22\2c 0\.6\)\] {
    --tw-drop-shadow: drop-shadow(0 0 8px rgba(249,115,22,0.6));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_0_8px_rgba\(59\2c 130\2c 246\2c 0\.6\)\] {
    --tw-drop-shadow: drop-shadow(0 0 8px rgba(59,130,246,0.6));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_0_8px_rgba\(6\2c 182\2c 212\2c 0\.8\)\] {
    --tw-drop-shadow: drop-shadow(0 0 8px rgba(6,182,212,0.8));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_2px_8px_rgba\(245\2c 158\2c 11\2c 0\.5\)\] {
    --tw-drop-shadow: drop-shadow(0 2px 8px rgba(245,158,11,0.5));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-lg {
    --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-md {
    --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-sm {
    --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-\[2px\] {
    --tw-backdrop-blur: blur(2px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-md {
    --tw-backdrop-blur: blur(12px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-xl {
    --tw-backdrop-blur: blur(24px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-\[stroke-dashoffset\] {
    transition-property: stroke-dashoffset;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.duration-1000 {
    transition-duration: 1000ms;
}
.duration-150 {
    transition-duration: 150ms;
}
.duration-200 {
    transition-duration: 200ms;
}
.duration-300 {
    transition-duration: 300ms;
}
.duration-500 {
    transition-duration: 500ms;
}
.duration-700 {
    transition-duration: 700ms;
}
.duration-\[1500ms\] {
    transition-duration: 1500ms;
}
.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.\[-ms-overflow-style\:\'none\'\] {
    -ms-overflow-style: 'none';
}
.\[a-z_\:\2c \] {
    a-z_: ,;
}
.\[scrollbar-width\:\'none\'\] {
    scrollbar-width: 'none';
}
.\[scrollbar-width\:none\] {
    scrollbar-width: none;
}
.selection\:bg-grit-gold *::-moz-selection {
    --tw-bg-opacity: 1;
    background-color: rgb(197 155 83 / var(--tw-bg-opacity, 1));
}
.selection\:bg-grit-gold *::selection {
    --tw-bg-opacity: 1;
    background-color: rgb(197 155 83 / var(--tw-bg-opacity, 1));
}
.selection\:text-black *::-moz-selection {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.selection\:text-black *::selection {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.selection\:bg-grit-gold::-moz-selection {
    --tw-bg-opacity: 1;
    background-color: rgb(197 155 83 / var(--tw-bg-opacity, 1));
}
.selection\:bg-grit-gold::selection {
    --tw-bg-opacity: 1;
    background-color: rgb(197 155 83 / var(--tw-bg-opacity, 1));
}
.selection\:text-black::-moz-selection {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.selection\:text-black::selection {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.placeholder\:text-\[var\(--text-secondary-color\)\]::-moz-placeholder {
    color: var(--text-secondary-color);
}
.placeholder\:text-\[var\(--text-secondary-color\)\]::placeholder {
    color: var(--text-secondary-color);
}
.before\:mt-0\.5::before {
    content: var(--tw-content);
    margin-top: 0.125rem;
}
.before\:flex-1::before {
    content: var(--tw-content);
    flex: 1 1 0%;
}
.before\:border-t::before {
    content: var(--tw-content);
    border-top-width: 1px;
}
.before\:border-white\/10::before {
    content: var(--tw-content);
    border-color: rgb(255 255 255 / 0.1);
}
.after\:mt-0\.5::after {
    content: var(--tw-content);
    margin-top: 0.125rem;
}
.after\:flex-1::after {
    content: var(--tw-content);
    flex: 1 1 0%;
}
.after\:border-t::after {
    content: var(--tw-content);
    border-top-width: 1px;
}
.after\:border-white\/10::after {
    content: var(--tw-content);
    border-color: rgb(255 255 255 / 0.1);
}
.last\:mb-0:last-child {
    margin-bottom: 0px;
}
.last\:border-0:last-child {
    border-width: 0px;
}
.last\:pb-0:last-child {
    padding-bottom: 0px;
}
.hover\:-translate-y-1:hover {
    --tw-translate-y: -0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-105:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-110:hover {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-125:hover {
    --tw-scale-x: 1.25;
    --tw-scale-y: 1.25;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-\[1\.01\]:hover {
    --tw-scale-x: 1.01;
    --tw-scale-y: 1.01;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-\[1\.02\]:hover {
    --tw-scale-x: 1.02;
    --tw-scale-y: 1.02;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-\[var\(--primary-color\)\]:hover {
    border-color: var(--primary-color);
}
.hover\:border-amber-500:hover {
    --tw-border-opacity: 1;
    border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}
.hover\:border-amber-500\/40:hover {
    border-color: rgb(245 158 11 / 0.4);
}
.hover\:border-amber-500\/50:hover {
    border-color: rgb(245 158 11 / 0.5);
}
.hover\:border-blue-500\/50:hover {
    border-color: rgb(59 130 246 / 0.5);
}
.hover\:border-emerald-500\/40:hover {
    border-color: rgb(16 185 129 / 0.4);
}
.hover\:border-gray-500:hover {
    --tw-border-opacity: 1;
    border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
}
.hover\:border-grit-gold\/30:hover {
    border-color: rgb(197 155 83 / 0.3);
}
.hover\:border-grit-lilac\/30:hover {
    border-color: rgb(167 139 250 / 0.3);
}
.hover\:border-grit-orange\/30:hover {
    border-color: rgb(245 158 11 / 0.3);
}
.hover\:border-grit-purple\/30:hover {
    border-color: rgb(139 92 246 / 0.3);
}
.hover\:border-grit-teal:hover {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.hover\:border-grit-teal\/30:hover {
    border-color: rgb(16 185 129 / 0.3);
}
.hover\:border-orange-500:hover {
    --tw-border-opacity: 1;
    border-color: rgb(249 115 22 / var(--tw-border-opacity, 1));
}
.hover\:border-purple-500:hover {
    --tw-border-opacity: 1;
    border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}
.hover\:border-sky-500:hover {
    --tw-border-opacity: 1;
    border-color: rgb(14 165 233 / var(--tw-border-opacity, 1));
}
.hover\:border-slate-600:hover {
    --tw-border-opacity: 1;
    border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}
.hover\:border-white\/10:hover {
    border-color: rgb(255 255 255 / 0.1);
}
.hover\:border-white\/15:hover {
    border-color: rgb(255 255 255 / 0.15);
}
.hover\:border-white\/20:hover {
    border-color: rgb(255 255 255 / 0.2);
}
.hover\:border-white\/30:hover {
    border-color: rgb(255 255 255 / 0.3);
}
.hover\:border-zinc-600:hover {
    --tw-border-opacity: 1;
    border-color: rgb(82 82 91 / var(--tw-border-opacity, 1));
}
.hover\:bg-\[var\(--background-color\)\]:hover {
    background-color: var(--background-color);
}
.hover\:bg-\[var\(--player-scrim\)\]:hover {
    background-color: var(--player-scrim);
}
.hover\:bg-\[var\(--player-tile\)\]:hover {
    background-color: var(--player-tile);
}
.hover\:bg-\[var\(--player-tile-strong\)\]:hover {
    background-color: var(--player-tile-strong);
}
.hover\:bg-\[var\(--primary-color-10\)\]:hover {
    background-color: var(--primary-color-10);
}
.hover\:bg-\[var\(--primary-color-translucent\)\]:hover {
    background-color: var(--primary-color-translucent);
}
.hover\:bg-\[var\(--surface-color\)\]:hover {
    background-color: var(--surface-color);
}
.hover\:bg-\[var\(--surface-color-hover\)\]:hover {
    background-color: var(--surface-color-hover);
}
.hover\:bg-\[var\(--surface-hover\)\]:hover {
    background-color: var(--surface-hover);
}
.hover\:bg-black\/10:hover {
    background-color: rgb(0 0 0 / 0.1);
}
.hover\:bg-black\/5:hover {
    background-color: rgb(0 0 0 / 0.05);
}
.hover\:bg-black\/70:hover {
    background-color: rgb(0 0 0 / 0.7);
}
.hover\:bg-black\/80:hover {
    background-color: rgb(0 0 0 / 0.8);
}
.hover\:bg-blue-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-cyan-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(6 182 212 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-400:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-500\/15:hover {
    background-color: rgb(16 185 129 / 0.15);
}
.hover\:bg-emerald-500\/20:hover {
    background-color: rgb(16 185 129 / 0.2);
}
.hover\:bg-emerald-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-800:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.hover\:bg-grit-teal:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.hover\:bg-neutral-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
}
.hover\:bg-neutral-900:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
}
.hover\:bg-orange-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.hover\:bg-orange-500\/20:hover {
    background-color: rgb(249 115 22 / 0.2);
}
.hover\:bg-orange-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-500\/10:hover {
    background-color: rgb(239 68 68 / 0.1);
}
.hover\:bg-red-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.hover\:bg-rose-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
}
.hover\:bg-rose-600\/80:hover {
    background-color: rgb(225 29 72 / 0.8);
}
.hover\:bg-slate-500\/10:hover {
    background-color: rgb(100 116 139 / 0.1);
}
.hover\:bg-slate-500\/5:hover {
    background-color: rgb(100 116 139 / 0.05);
}
.hover\:bg-slate-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-800:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white\/10:hover {
    background-color: rgb(255 255 255 / 0.1);
}
.hover\:bg-white\/15:hover {
    background-color: rgb(255 255 255 / 0.15);
}
.hover\:bg-white\/20:hover {
    background-color: rgb(255 255 255 / 0.2);
}
.hover\:bg-white\/5:hover {
    background-color: rgb(255 255 255 / 0.05);
}
.hover\:bg-zinc-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(228 228 231 / var(--tw-bg-opacity, 1));
}
.hover\:bg-zinc-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(63 63 70 / var(--tw-bg-opacity, 1));
}
.hover\:bg-zinc-700\/90:hover {
    background-color: rgb(63 63 70 / 0.9);
}
.hover\:bg-zinc-800:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
}
.hover\:from-amber-400:hover {
    --tw-gradient-from: #fbbf24 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(251 191 36 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-emerald-300:hover {
    --tw-gradient-from: #6ee7b7 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(110 231 183 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-emerald-400:hover {
    --tw-gradient-from: #34d399 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(52 211 153 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-emerald-600:hover {
    --tw-gradient-from: #059669 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(5 150 105 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:to-cyan-300:hover {
    --tw-gradient-to: #67e8f9 var(--tw-gradient-to-position);
}
.hover\:to-teal-400:hover {
    --tw-gradient-to: #2dd4bf var(--tw-gradient-to-position);
}
.hover\:to-teal-700:hover {
    --tw-gradient-to: #0f766e var(--tw-gradient-to-position);
}
.hover\:to-yellow-400:hover {
    --tw-gradient-to: #facc15 var(--tw-gradient-to-position);
}
.hover\:text-\[var\(--error-color\)\]:hover {
    color: var(--error-color);
}
.hover\:text-\[var\(--player-muted\)\]:hover {
    color: var(--player-muted);
}
.hover\:text-\[var\(--player-text\)\]:hover {
    color: var(--player-text);
}
.hover\:text-\[var\(--primary-color\)\]:hover {
    color: var(--primary-color);
}
.hover\:text-\[var\(--text-color\)\]:hover {
    color: var(--text-color);
}
.hover\:text-amber-300:hover {
    --tw-text-opacity: 1;
    color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.hover\:text-cyan-300:hover {
    --tw-text-opacity: 1;
    color: rgb(103 232 249 / var(--tw-text-opacity, 1));
}
.hover\:text-cyan-400:hover {
    --tw-text-opacity: 1;
    color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}
.hover\:text-cyan-500:hover {
    --tw-text-opacity: 1;
    color: rgb(6 182 212 / var(--tw-text-opacity, 1));
}
.hover\:text-green-400:hover {
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.hover\:text-grit-blue:hover {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.hover\:text-grit-gold:hover {
    --tw-text-opacity: 1;
    color: rgb(197 155 83 / var(--tw-text-opacity, 1));
}
.hover\:text-grit-purple:hover {
    --tw-text-opacity: 1;
    color: rgb(139 92 246 / var(--tw-text-opacity, 1));
}
.hover\:text-grit-teal:hover {
    --tw-text-opacity: 1;
    color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.hover\:text-orange-300:hover {
    --tw-text-opacity: 1;
    color: rgb(253 186 116 / var(--tw-text-opacity, 1));
}
.hover\:text-red-400:hover {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-200:hover {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:text-yellow-400:hover {
    --tw-text-opacity: 1;
    color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
    text-decoration-line: underline;
}
.hover\:accent-cyan-400:hover {
    accent-color: #22d3ee;
}
.hover\:opacity-100:hover {
    opacity: 1;
}
.hover\:opacity-70:hover {
    opacity: 0.7;
}
.hover\:opacity-80:hover {
    opacity: 0.8;
}
.hover\:opacity-90:hover {
    opacity: 0.9;
}
.hover\:shadow-2xl:hover {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-md:hover {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:brightness-110:hover {
    --tw-brightness: brightness(1.1);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.focus\:border-\[var\(--primary-color\)\]:focus {
    border-color: var(--primary-color);
}
.focus\:border-blue-500:focus {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.focus\:border-cyan-500:focus {
    --tw-border-opacity: 1;
    border-color: rgb(6 182 212 / var(--tw-border-opacity, 1));
}
.focus\:border-gray-500:focus {
    --tw-border-opacity: 1;
    border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
}
.focus\:border-grit-gold:focus {
    --tw-border-opacity: 1;
    border-color: rgb(197 155 83 / var(--tw-border-opacity, 1));
}
.focus\:border-grit-teal:focus {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.focus\:border-red-500:focus {
    --tw-border-opacity: 1;
    border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.focus\:border-red-500\/50:focus {
    border-color: rgb(239 68 68 / 0.5);
}
.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.focus\:ring-0:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-1:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-\[var\(--primary-color\)\]:focus {
    --tw-ring-color: var(--primary-color);
}
.focus\:ring-blue-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.focus\:ring-red-500\/50:focus {
    --tw-ring-color: rgb(239 68 68 / 0.5);
}
.active\:scale-90:active {
    --tw-scale-x: .9;
    --tw-scale-y: .9;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-95:active {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-\[0\.98\]:active {
    --tw-scale-x: 0.98;
    --tw-scale-y: 0.98;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-\[0\.99\]:active {
    --tw-scale-x: 0.99;
    --tw-scale-y: 0.99;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:bg-\[var\(--player-tile-strong\)\]:active {
    background-color: var(--player-tile-strong);
}
.disabled\:bg-\[var\(--surface-color-hover\)\]:disabled {
    background-color: var(--surface-color-hover);
}
.disabled\:text-\[var\(--text-secondary-color\)\]:disabled {
    color: var(--text-secondary-color);
}
.disabled\:opacity-20:disabled {
    opacity: 0.2;
}
.disabled\:opacity-40:disabled {
    opacity: 0.4;
}
.disabled\:opacity-50:disabled {
    opacity: 0.5;
}
.disabled\:opacity-60:disabled {
    opacity: 0.6;
}
.group[open] .group-open\:rotate-180 {
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:flex {
    display: flex;
}
.group:hover .group-hover\:scale-105 {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-110 {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-125 {
    --tw-scale-x: 1.25;
    --tw-scale-y: 1.25;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-x-100 {
    --tw-scale-x: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:text-\[var\(--primary-color\)\] {
    color: var(--primary-color);
}
.group:hover .group-hover\:text-blue-500 {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-green-500 {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-orange-500 {
    --tw-text-opacity: 1;
    color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-white\/50 {
    color: rgb(255 255 255 / 0.5);
}
.group:hover .group-hover\:opacity-10 {
    opacity: 0.1;
}
.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}
.group:hover .group-hover\:opacity-20 {
    opacity: 0.2;
}
.group:hover .group-hover\:opacity-50 {
    opacity: 0.5;
}
.group:hover .group-hover\:blur-\[2px\] {
    --tw-blur: blur(2px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.group:hover .group-hover\:duration-200 {
    transition-duration: 200ms;
}
.dark\:bg-black\/40:is(.dark *) {
    background-color: rgb(0 0 0 / 0.4);
}
.dark\:bg-white\/10:is(.dark *) {
    background-color: rgb(255 255 255 / 0.1);
}
.dark\:bg-white\/5:is(.dark *) {
    background-color: rgb(255 255 255 / 0.05);
}
.dark\:bg-white\/\[0\.02\]:is(.dark *) {
    background-color: rgb(255 255 255 / 0.02);
}
.dark\:text-cyan-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(103 232 249 / var(--tw-text-opacity, 1));
}
.dark\:text-cyan-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}
.dark\:text-emerald-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.dark\:text-green-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.dark\:text-orange-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.dark\:text-purple-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.dark\:text-red-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.dark\:text-white:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dark\:hover\:bg-white\/10:hover:is(.dark *) {
    background-color: rgb(255 255 255 / 0.1);
}
.dark\:hover\:text-white:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px) {
    .sm\:left-auto {
        left: auto;
    }
    .sm\:top-20 {
        top: 5rem;
    }
    .sm\:top-4 {
        top: 1rem;
    }
    .sm\:col-span-2 {
        grid-column: span 2 / span 2;
    }
    .sm\:block {
        display: block;
    }
    .sm\:flex {
        display: flex;
    }
    .sm\:hidden {
        display: none;
    }
    .sm\:h-5 {
        height: 1.25rem;
    }
    .sm\:h-52 {
        height: 13rem;
    }
    .sm\:max-h-none {
        max-height: none;
    }
    .sm\:w-32 {
        width: 8rem;
    }
    .sm\:w-5 {
        width: 1.25rem;
    }
    .sm\:w-80 {
        width: 20rem;
    }
    .sm\:w-auto {
        width: auto;
    }
    .sm\:max-w-\[280px\] {
        max-width: 280px;
    }
    .sm\:max-w-md {
        max-width: 28rem;
    }
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .sm\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .sm\:flex-row {
        flex-direction: row;
    }
    .sm\:items-center {
        align-items: center;
    }
    .sm\:gap-3 {
        gap: 0.75rem;
    }
    .sm\:gap-4 {
        gap: 1rem;
    }
    .sm\:gap-8 {
        gap: 2rem;
    }
    .sm\:divide-x > :not([hidden]) ~ :not([hidden]) {
        --tw-divide-x-reverse: 0;
        border-right-width: calc(1px * var(--tw-divide-x-reverse));
        border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
    }
    .sm\:divide-y-0 > :not([hidden]) ~ :not([hidden]) {
        --tw-divide-y-reverse: 0;
        border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
        border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
    }
    .sm\:self-auto {
        align-self: auto;
    }
    .sm\:rounded-3xl {
        border-radius: 1.5rem;
    }
    .sm\:p-2 {
        padding: 0.5rem;
    }
    .sm\:p-3 {
        padding: 0.75rem;
    }
    .sm\:p-3\.5 {
        padding: 0.875rem;
    }
    .sm\:p-4 {
        padding: 1rem;
    }
    .sm\:p-5 {
        padding: 1.25rem;
    }
    .sm\:p-8 {
        padding: 2rem;
    }
    .sm\:px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .sm\:py-3\.5 {
        padding-top: 0.875rem;
        padding-bottom: 0.875rem;
    }
    .sm\:pl-6 {
        padding-left: 1.5rem;
    }
    .sm\:pr-6 {
        padding-right: 1.5rem;
    }
    .sm\:text-2xl {
        font-size: var(--text-2xl);
        line-height: 1.3;
    }
    .sm\:text-2xs {
        font-size: var(--text-2xs);
        line-height: 1.2;
    }
    .sm\:text-3xl {
        font-size: var(--text-3xl);
        line-height: 1.2;
    }
    .sm\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    .sm\:text-7xl {
        font-size: 4.5rem;
        line-height: 1;
    }
    .sm\:text-\[13px\] {
        font-size: 13px;
    }
    .sm\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .sm\:text-lg {
        font-size: var(--text-lg);
        line-height: 1.5;
    }
    .sm\:text-sm {
        font-size: var(--text-sm);
        line-height: 1.35;
    }
    .sm\:text-xl {
        font-size: var(--text-xl);
        line-height: 1.4;
    }
    .sm\:text-xs {
        font-size: var(--text-xs);
        line-height: 1.25;
    }
}
@media (min-width: 768px) {
    .md\:my-0 {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .md\:block {
        display: block;
    }
    .md\:inline {
        display: inline;
    }
    .md\:flex {
        display: flex;
    }
    .md\:hidden {
        display: none;
    }
    .md\:h-24 {
        height: 6rem;
    }
    .md\:w-1\/2 {
        width: 50%;
    }
    .md\:w-\[280px\] {
        width: 280px;
    }
    .md\:w-\[31\%\] {
        width: 31%;
    }
    .md\:w-auto {
        width: auto;
    }
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .md\:flex-row {
        flex-direction: row;
    }
    .md\:items-center {
        align-items: center;
    }
    .md\:gap-12 {
        gap: 3rem;
    }
    .md\:gap-20 {
        gap: 5rem;
    }
    .md\:gap-24 {
        gap: 6rem;
    }
    .md\:p-10 {
        padding: 2.5rem;
    }
    .md\:p-8 {
        padding: 2rem;
    }
    .md\:px-10 {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
    .md\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .md\:py-2 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .md\:pb-32 {
        padding-bottom: 8rem;
    }
    .md\:pt-48 {
        padding-top: 12rem;
    }
    .md\:text-2xl {
        font-size: var(--text-2xl);
        line-height: 1.3;
    }
    .md\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    .md\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    .md\:text-7xl {
        font-size: 4.5rem;
        line-height: 1;
    }
    .md\:text-\[10rem\] {
        font-size: 10rem;
    }
    .md\:text-\[14rem\] {
        font-size: 14rem;
    }
    .md\:text-\[16rem\] {
        font-size: 16rem;
    }
    .md\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .md\:text-xl {
        font-size: var(--text-xl);
        line-height: 1.4;
    }
    .md\:text-xs {
        font-size: var(--text-xs);
        line-height: 1.25;
    }
}
@media (min-width: 1024px) {
    .lg\:mb-1 {
        margin-bottom: 0.25rem;
    }
    .lg\:h-32 {
        height: 8rem;
    }
    .lg\:h-9 {
        height: 2.25rem;
    }
    .lg\:h-\[270px\] {
        height: 270px;
    }
    .lg\:h-\[300px\] {
        height: 300px;
    }
    .lg\:w-32 {
        width: 8rem;
    }
    .lg\:w-9 {
        width: 2.25rem;
    }
    .lg\:scale-150 {
        --tw-scale-x: 1.5;
        --tw-scale-y: 1.5;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
    .lg\:scale-\[2\] {
        --tw-scale-x: 2;
        --tw-scale-y: 2;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lg\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .lg\:gap-2 {
        gap: 0.5rem;
    }
    .lg\:gap-3 {
        gap: 0.75rem;
    }
    .lg\:p-3 {
        padding: 0.75rem;
    }
    .lg\:p-4 {
        padding: 1rem;
    }
    .lg\:p-6 {
        padding: 1.5rem;
    }
    .lg\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .lg\:text-lg {
        font-size: var(--text-lg);
        line-height: 1.5;
    }
    .lg\:text-sm {
        font-size: var(--text-sm);
        line-height: 1.35;
    }
    .lg\:text-xl {
        font-size: var(--text-xl);
        line-height: 1.4;
    }
    .lg\:tracking-\[0\.2em\] {
        letter-spacing: 0.2em;
    }
}
@media (min-width: 1280px) {
    .xl\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .xl\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
    display: none;
}