/* Legacy Styles Imports */
/* styles/theme.css */
/* Light Mode (Default) - Unchanged */
:root,
[data-theme='light'] {
    --primary-color: #4f46e5;
    --primary-color-translucent: rgba(79, 70, 229, 0.1);
    --secondary-color: #64748b;
    --background-color: #f9fafb;
    --surface-color: #ffffff;
    --border-color: #e2e8f0;
    --text-color: #0f172a;
    --text-secondary-color: #64748b;
    --success-color: #10b981;
    --error-color: #ef4444;
    --carbs-color: #f59e0b;
    --protein-color: #10b981;
    --fat-color: #eab308;
    --gold-color: #fbbf24;

    /* 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;
    /* Star ratings, achievements */
}
/* Dark Mode - UPDATED to Match Production (Neutral Gray) */
[data-theme='dark'] {
    --primary-color: #6366f1;
    --primary-color-translucent: rgba(99, 102, 241, 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;

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

    --text-color: #f9fafc;
    --text-secondary-color: #a3a3a3;
    --success-color: #10b981;
    --error-color: #ef4444;
    --gold-color: #fbbf24;

    /* 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;
    /* Star ratings, achievements */
}
/* Base App Styles */
body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}
/* 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;
}
/* ============================================
   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;
}
/* styles/main.css */
/* 1. THEME & VARIABLES */
/* 2. CORE LAYOUT */
/* styles/layout.css */
/* 1. Top-level app container */
.app-container {
  display: grid;
  height: 100vh;
  height: 100svh;
  grid-template-rows: auto 1fr;
  /* Header, Main Content */
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main";
  overflow: hidden;
}
.app-container.desktop-with-sidebar {
  grid-template-columns: 80px 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: 100svh;
  overflow: hidden;
}
.app-container.desktop-with-sidebar .header {
  grid-area: header;
}
.app-container.desktop-with-sidebar .sidebar-nav {
  grid-area: sidebar;
}
/* Workout Sidebar Toggle (The "Clipboard" Icon) */
.workout-sidebar-toggle {
  background: none;
  border: none;
  color: var(--text-secondary-color);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  margin-left: 1rem;
  /* Space from settings icon */
  display: none;
  /* Hidden by default */
}
.workout-sidebar-toggle:hover {
  color: var(--text-color);
  background-color: var(--background-color);
}
/* UPDATED: Show button ONLY on workout view AND mobile (< 1200px) */
@media (max-width: 1199px) {
  .view-workout .workout-sidebar-toggle {
    display: block;
  }
}
/* Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background-color: var(--surface-color);
  border-bottom: 1px solid var(--border-color);
  z-index: 10;
  grid-row: 1 / 2;
}
.header h1 {
  font-size: 1.5rem;
  /* 24px */
  font-weight: 700;
  color: var(--primary-color);
  margin: 0;
}
.header-logo {
  height: 40px;
  width: auto;
  display: block;
}
.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;
  grid-row: 2 / 3;
  padding: 1.5rem;
  position: relative;
  height: 100%;
}
.main-content.desktop-main {
  grid-area: main;
}
/* Utility classes for content regions */
.mobile-view-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
/* 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.5rem;
  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 1200px to match utilities.css) */
@media (min-width: 1200px) {
  .desktop-grid-layout {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-flow: dense;
    gap: 2rem;
    padding: 0.5rem;
    height: auto;
    min-height: 0;
    align-content: start;
  }
}
/* --- MOBILE LAYOUT OVERRIDES --- */
@media (max-width: 1199px) {

  /* This rule now IGNORES trainer-mode, fixing the desktop bug */
  .app-container:not(.trainer-mode) {
    grid-template-rows: auto 1fr auto;
  }

  .app-container:not(.trainer-mode) .main-content {
    padding: 0.75rem;
    padding-bottom: 70px;
    overflow-y: auto;
  }

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

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

  .mobile-view-content {
    gap: 0.75rem;
  }

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

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

  .program-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .events-page-layout {
    grid-template-columns: 1fr;
  }

  .events-filter-sidebar {
    position: static;
    height: auto;
  }

  .filter-button-group {
    flex-direction: row;
    overflow-x: auto;
  }

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

  .marketplace-header {
    grid-template-columns: 1fr;
  }

  .events-page-layout {
    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;
}
/* 3. NAVIGATION */
/* 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;
  gap: 0.75rem;
  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.75rem;
  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-color: var(--primary-color-translucent);
}
.sidebar-btn.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background-color: var(--primary-color);
  border-radius: 0 4px 4px 0;
}
.sidebar-btn svg {
  margin-bottom: 0.3rem;
  width: 24px;
  height: 24px;
}
.sidebar-btn span {
  display: none;
}
/* --- 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.75rem 0.5rem;
  /* Increased padding for touch target */
  min-height: 48px;
  /* Minimum touch target */
  font-size: 0.75rem;
  border-radius: 10px;
  flex-shrink: 0;
  min-width: 80px;
  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);
}
.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: space-around;
    /* Better spacing for fixed nav */
    overflow-x: auto;
    padding: 0.5rem 0.25rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
    /* 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: 1000;

    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .tab-nav::-webkit-scrollbar {
    display: none;
  }
}
/* 4. BASE COMPONENTS */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: #FFFFFF;
  background-color: 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;
}
[data-theme='light'] .btn {
  color: #fff;
}
.btn:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px var(--primary-color-translucent);
}
.btn:active {
  transform: translateY(0);
}
.btn-secondary {
  background-color: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-color);
}
.btn-secondary:hover {
  background-color: var(--primary-color-translucent);
  border-color: var(--primary-color);
  color: var(--primary-color);
  transform: none;
  box-shadow: none;
}
[data-theme='light'] .btn-secondary {
  border-color: var(--text-color);
  color: var(--text-color);
}
[data-theme='light'] .btn-secondary:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #FFFFFF;
}
.btn-secondary.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  margin-top: 0;
}
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  align-items: flex-end;
}
.btn-group .btn {
  flex: 1 1 150px;
  width: auto;
}
.btn-icon-left {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.btn[disabled] {
  background-color: var(--border-color);
  border-color: var(--border-color);
  color: var(--text-secondary-color);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn[disabled]:hover {
  background-color: var(--border-color);
  opacity: 1;
}
.btn-icon {
  background: none;
  border: none;
  color: var(--text-secondary-color);
  cursor: pointer;
  padding: 0.5rem;
  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);
}
.card {
  background-color: var(--surface-color);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  padding: 1.5rem;
  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 1rem 0;
  flex-shrink: 0;
}
.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: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.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.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;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
}
.modal-content {
  background: var(--surface-color);
  border-radius: 8px;
  padding: 20px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 1001;
  color: var(--text-color);
}
.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-title {
  margin: 0;
  font-size: 1.5rem;
}
.modal-close-btn {
  background: none;
  border: none;
  color: var(--text-secondary-color);
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
@media (max-width: 1199px) {
  .card {
    padding: 1rem;
  }
}
/* --- 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;
    padding-top: calc(1rem + env(safe-area-inset-top));
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));

    display: flex;
    flex-direction: column;
  }
}
/* --- 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: 700px;
  max-width: 90vw;
}
/* 5. FORM COMPONENTS */
/* 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);
}
.form-group input,
.form-group select {
  width: 100%;
  box-sizing: border-box;
  font-size: 1rem;
  height: 50px;
  padding: 0 1rem;
  line-height: 50px;
  border-radius: 8px;
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  line-height: 1.6;
  border-radius: 8px;
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  resize: vertical;
}
.form-group select {
  line-height: normal;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-color-translucent);
}
.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;
  background: var(--background-color) url('https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80') 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;
}
.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 --- */
/* --- NEW FIX FOR INVISIBLE DATE PICKER ICON --- */
.form-group input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(100);
}
/* --- 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;
  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;
}
.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%;
}
/* 6. COMPLEX REUSABLE COMPONENTS */
/* styles/components/_chat.css */
.messaging-modal .modal-content { 
  height: 80vh; 
  max-height: 90vh; /* Respect device limits */
  display: flex;
  flex-direction: column;
  padding: 0; /* Remove padding from the modal itself */
  overflow: hidden; /* Stop the whole modal from scrolling */
  width: 500px; /* Set a consistent desktop width */
  max-width: 90vw;
}
/* --- FIX: Make modal full-screen on mobile --- */
@media (max-width: 1199px) {
  .messaging-modal .modal-content {
    width: 100%;
    height: 100vh;
    height: 100svh; /* Use dynamic view height */
    max-width: 100vw;
    max-height: 100svh;
    border-radius: 0;
  }
}
.chat-body { 
  flex-grow: 1; 
  overflow-y: auto; 
  padding: 1rem; /* Add padding here */
  display: flex; 
  flex-direction: column; 
  gap: 0.25rem;
}
.chat-message {
  display: flex;
  flex-direction: column;
  max-width: 75%;
}
.chat-message p { 
  margin: 0; 
  padding: 0.75rem 1rem;
  border-radius: 18px; /* Bubble radius */
  line-height: 1.5;
  word-break: break-word;
}
.chat-message small { 
  display: block; 
  font-size: 0.7rem; 
  margin-top: 0.25rem; 
  opacity: 0.7; 
}
.chat-message.sent { 
  align-self: flex-end;
  align-items: flex-end;
}
.chat-message.sent p {
  background-color: var(--primary-color);
  color: #FFFFFF;
  border-bottom-right-radius: 4px;
}
.chat-message.sent small {
  text-align: right; 
  margin-right: 0.25rem;
}
.chat-message.received { 
  align-self: flex-start;
  align-items: flex-start;
}
.chat-message.received p {
  background-color: var(--background-color);
  border-bottom-left-radius: 4px;
}
.chat-message.received small {
  text-align: left;
  margin-left: 0.25rem;
}
/* --- CHAT INPUT FIX --- */
.chat-input-form { 
  display: flex; 
  gap: 0.5rem; 
  margin-top: 0; 
  border-top: 1px solid var(--border-color); 
  padding: 1rem; 
  flex-shrink: 0; 
  align-items: center; /* Vertically align input and button */
}
.chat-input-form input {
  flex-grow: 1;
  padding: 0 1rem; /* Match form-group input */
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-color);
  font-size: 1rem;
  font-family: inherit;
  height: 50px; /* Force height */
  line-height: 50px; /* Align text vertically */
}
.chat-input-form input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-translucent); /* Add focus ring */
}
.btn-send { 
  width: auto; 
  height: 50px; /* Force height */
  padding: 0 1rem; /* Adjust padding for icon */
  display: flex; /* Use flex to center icon */
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* Prevent button from shrinking */
}
/* --- END CHAT INPUT FIX --- */
.btn-send svg {
    width: 20px;
    height: 20px;
    stroke: #FFFFFF;
}
/* Embedded chat styles */
.trainer-client-view .card .chat-input-form {
    margin-top: 1rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    flex-shrink: 0;
}
.trainer-client-view .card .chat-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0 0.5rem;
    min-height: 200px;
    max-height: 400px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.trainer-client-view .card .chat-body .placeholder-text {
    padding-top: 1rem;
}
.embedded-chat-card .chat-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 300px;
    max-height: 600px; 
}
.chat-date-divider {
    text-align: center;
    margin: 1rem 0 0.5rem;
    position: relative;
    color: var(--text-secondary-color);
    font-size: 0.8rem;
    font-weight: 500;
}
.chat-date-divider::before,
.chat-date-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background-color: var(--border-color);
}
.chat-date-divider::before { left: 0; }
.chat-date-divider::after { right: 0; }
.chat-date-divider span {
    background-color: var(--surface-color);
    padding: 0 0.5rem;
    position: relative;
    z-index: 1;
}
.btn-load-more {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    color: var(--text-secondary-color);
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    width: 50%;
    margin: 0.5rem auto;
    font-size: 0.85rem;
}
.btn-load-more:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
/* 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.7rem;
  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(60px, 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 Cards --- */
.achievement-premium-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.achievement-premium-card {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  transition: all 0.2s ease;
  cursor: default;
  position: relative;
  overflow: hidden;
}
.achievement-premium-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary-color-translucent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.achievement-premium-card.unlocked {
  background: linear-gradient(145deg, var(--surface-color), rgba(var(--primary-rgb), 0.05));
  border-color: var(--primary-color-translucent);
}
.achievement-premium-card.locked {
  opacity: 0.7;
  filter: grayscale(0.8);
}
.achievement-visual {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--background-color);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--secondary-color);
}
.achievement-premium-card.unlocked .achievement-visual {
  background: rgba(var(--secondary-rgb), 0.1);
  color: var(--secondary-color);
  box-shadow: 0 0 15px rgba(var(--secondary-rgb), 0.2);
}
.achievement-premium-card.locked .achievement-visual {
  background: var(--background-color);
  color: var(--text-secondary-color);
}
.lock-overlay {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: var(--surface-color);
  border-radius: 50%;
  padding: 4px;
  color: var(--text-secondary-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.achievement-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
}
.ach-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-color);
  line-height: 1.2;
}
.ach-xp {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--secondary-color);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.achievement-premium-card.locked .ach-xp {
  color: var(--text-secondary-color);
}
/* Category Headers */
.gamification-category-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.5rem 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary-color);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}
/* --- 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: 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;
}
/* styles/components/_workout-player.css */
.workout-player { text-align: center; }
.rest-timer .timer-circle { font-size: 4rem; font-weight: bold; margin: 1rem auto; width: 120px; height: 120px; border: 4px solid var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.exercise-display .current-set-info { display: flex; gap: 1rem; justify-content: center; margin: 2rem 0; }
.info-box { background: var(--background-color); padding: 1rem; border-radius: 8px; flex: 1; }
.info-box h3 { margin: 0 0 0.5rem 0; color: var(--text-secondary-color); font-size: 1rem; }
/* Workout Player Modal */
.workout-player-modal .modal-content {
    display: flex;
    flex-direction: column;
}
.workout-player {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    text-align: center;
    position: relative; /* For positioning the finish button */
}
.rest-timer h2 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 2rem;
}
.rest-timer p {
    color: var(--text-secondary-color);
    margin-top: 1rem;
}
.exercise-display h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}
.next-exercise-label {
    color: var(--text-secondary-color);
    margin-bottom: 2rem;
}
.info-box p {
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
}
.exercise-display .btn-group {
    justify-content: center;
    margin-top: 2rem;
}
.btn-finish-early {
    background: none;
    border: none;
    color: var(--text-secondary-color);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.9rem;
    margin-top: 1.5rem; /* Give it space */
    padding: 0.5rem;
}
.btn-finish-early:hover {
    color: var(--text-color);
}
.workout-player-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  background-color: var(--surface-color);
  border-bottom: 1px solid var(--border-color);
}
.block-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
}
.block-info strong {
  color: var(--primary-color);
  font-weight: 600;
}
.block-info span {
  color: var(--text-secondary-color);
}
.superset-indicator {
  font-size: 1rem;
  font-weight: 600;
  color: var(--secondary-color);
  margin-bottom: 1rem;
  letter-spacing: 1px;
}
.exercise-display .current-set-info {
    grid-template-columns: 1fr 1fr 1fr; /* 3 columns */
    display: grid; /* Use grid instead of flex */
}
/* --- UPDATED HEADER STYLES --- */
.workout-player-modal .modal-header {
    background-color: var(--surface-color);
    padding: 1.5rem;
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center; /* Center the title */
    align-items: center;
}
.workout-player-modal .modal-title {
    text-align: center;
    flex-grow: 1;
    margin: 0;
}
.workout-player-modal .modal-close-btn {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
}
/* --- VIDEO FRAME STYLES --- */
.video-frame {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    border-radius: 0.75rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 1rem;
    background-color: #000; /* Default Dark */
}
[data-theme='light'] .video-frame {
    background-color: #f3f4f6; /* Light gray for light theme */
    border: 1px solid var(--border-color);
    color: var(--text-secondary-color);
}
/* --- ACTION BUTTONS --- */
.player-action-buttons {
    display: flex;
    gap: 0.75rem;
}
.player-action-buttons .btn,
.player-action-buttons .btn-secondary {
    flex: 1;
    padding: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.workout-feedback-form {
  width: 450px; /* Give the form a solid width */
  max-width: 90vw; /* Ensure it's responsive */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.workout-feedback-form .form-group textarea {
  height: 120px; /* Give the textarea a bit more room */
}
.workout-feedback-form .unit-toggle button {
    font-size: 0.9rem;
    padding: 0.75rem;
}
.workout-feedback-form .unit-toggle button.active {
    border-color: var(--primary-color);
}
.workout-feedback-form .unit-toggle button[class*="easy"] {
    color: var(--secondary-color);
}
.workout-feedback-form .unit-toggle button[class*="easy"].active {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.workout-feedback-form .unit-toggle button[class*="right"] {
    color: var(--success-color);
}
.workout-feedback-form .unit-toggle button[class*="right"].active {
    background-color: var(--success-color);
    border-color: var(--success-color);
}
.workout-feedback-form .unit-toggle button[class*="hard"] {
    color: var(--error-color);
}
.workout-feedback-form .unit-toggle button[class*="hard"].active {
    background-color: var(--error-color);
    border-color: var(--error-color);
}
.exercise-display .current-set-info {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
}
.exercise-display .current-set-info .info-box.form-group {
    margin-bottom: 0;
}
.exercise-display .current-set-info .info-box label {
    font-size: 0.8rem;
    text-align: left;
    margin-bottom: 0.5rem;
}
.exercise-display .current-set-info .info-box input {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 0.75rem;
    height: auto;
    line-height: 1.2;
}
.exercise-display .current-set-info .info-box input::-moz-placeholder {
  font-size: 1rem;
  color: var(--text-secondary-color);
  opacity: 0.7;
}
.exercise-display .current-set-info .info-box input::placeholder {
  font-size: 1rem;
  color: var(--text-secondary-color);
  opacity: 0.7;
}
/* Form Check Modal */
.form-check-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.video-container {
    position: relative;
    width: 100%;
    max-width: 500px;
}
.recording-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}
.ai-feedback {
    width: 100%;
    background-color: var(--background-color);
    padding: 1rem;
    border-radius: 8px;
}
.ai-feedback h3 { margin-top: 0; color: var(--secondary-color); }
.ai-feedback pre { white-space: pre-wrap; word-break: break-word; font-family: inherit; }
/* styles/components/_workout-sidebar.css */
.workout-sidebar {
  position: fixed;
  inset-inline-end: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  z-index: 40;
  width: 24rem; /* 384px */
  max-width: 90vw;
  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: 30;
  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.9rem;
  font-weight: 600;
  text-align: 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.5rem;
}
.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;
  padding: 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: 50;     /* Ensure it sits above content */
    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 */
  }
}
/* 7. VIEW-SPECIFIC STYLES */
/* 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: center;
    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.25rem;
    font-size: 1.2rem;
    font-weight: bold;
}
.btn-icon:hover {
    color: var(--text-color);
}
.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: 1rem;
}
.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.75rem 0;
    border-bottom: 1px solid var(--border-color);
}
.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.5rem;
}
.history-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}
.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;
    justify-content: space-between;
    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;
}
.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: thin;
    scrollbar-color: var(--border-color) transparent;
}
.trainer-selector::-webkit-scrollbar {
    height: 4px;
}
.trainer-selector::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 2px;
}
.trainer-selector-card {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
.trainer-selector-card:hover {
    background-color: var(--background-color);
}
.trainer-selector-card.active {
    background-color: var(--surface-color);
    border-color: var(--border-color);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.trainer-selector-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid transparent;
}
.trainer-selector-avatar.active {
    border-color: var(--primary-color);
}
.trainer-selector-name {
    font-weight: 600;
    color: var(--text-color);
    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%;
    height: 50px;
    line-height: 50px;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}
.trainer-modal-search .search-input:focus {
    outline: none;
    border-color: var(--primary-color);
}
.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: 1200px) {

    /* --- Default Dashboard View Layout --- */
    /* This is the new, comprehensive layout */
    .dashboard-view .grid-item.daily-snapshot {
        grid-column: span 6;
    }

    .dashboard-view .grid-item.todays-focus {
        grid-column: span 6;
    }

    /* Connection Row (if visible) */
    .dashboard-view .grid-item.wearables-widget {
        grid-column: span 6;
    }

    .dashboard-view .grid-item.recovery-widget {
        grid-column: span 6;
    }

    /* Row 2 */
    .dashboard-view .grid-item.history {
        grid-column: span 6;
    }

    .dashboard-view .grid-item.progress-trends {
        grid-column: span 6;
    }

    /* Row 3 */
    .dashboard-view .grid-item.highlights {
        grid-column: span 6;
    }

    .dashboard-view .grid-item.upcoming-events {
        grid-column: span 6;
    }

    /* Row 4 */
    .dashboard-view .grid-item.goals {
        grid-column: span 6;
    }

    .dashboard-view .grid-item.personal-records {
        grid-column: span 6;
    }

    /* Row 5 */
    .dashboard-view .grid-item.body-measurements {
        grid-column: span 6;
    }

    .dashboard-view .grid-item.progress-photos {
        grid-column: span 6;
    }

    /* Row 6 */
    .dashboard-view .grid-item.gamification {
        grid-column: span 6;
    }

    .dashboard-view .grid-item.fitness-profile {
        grid-column: span 6;
    }

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

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


    /* --- Other View-Specific Layouts (Preserved) --- */
    .nutrition-view .grid-item.ai-meal {
        grid-column: 1 / 7;
    }

    .nutrition-view .grid-item.cookbook-container {
        grid-column: 7 / 13;
    }

    .nutrition-view .grid-item.grocery-list {
        grid-column: 1 / 7;
    }

    .nutrition-view .grid-item.nutrition-logger {
        grid-column: 7 / 13;
    }

    .nutrition-view .grid-item.nutrition-goals {
        grid-column: 1 / 7;
    }

    .nutrition-view .grid-item.history {
        grid-column: 7 / 13;
    }

    .nutrition-view .grid-item.goals,
    .nutrition-view .grid-item.gamification,
    .nutrition-view .grid-item.personal-records,
    .nutrition-view .grid-item.sleep,
    .nutrition-view .grid-item.body-measurements,
    .nutrition-view .grid-item.progress-photos {
        display: none;
    }

    /* --- 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 {
    justify-content: space-between;
    flex-wrap: wrap;
}
.pr-value-container {
    text-align: right;
}
.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: 12rem;
    background-color: var(--background-color);
    padding: 1rem;
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}
.chart-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.chart-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary-color);
}
.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.65rem;
    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);
}
/* 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/_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.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;
}
.set-item input:focus {
    outline: none;
    border-color: var(--primary-color);
}
.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: 1rem;
    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: 1rem 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;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 100%;
    padding: 0;
    margin-bottom: 0.25rem;
    cursor: pointer;
}
.input-block-title:focus {
    outline: none;
    text-decoration: underline;
}
.block-meta-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 24px;
}
.badge-superset {
    display: flex;
    align-items: center;
    gap: 4px;
    background-color: rgba(139, 92, 246, 0.1);
    /* Violet-100 */
    color: #7c3aed;
    /* Violet-600 */
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(139, 92, 246, 0.2);
    text-transform: uppercase;
}
.badge-superset svg {
    width: 10px;
    height: 10px;
}
.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;
}
.input-rounds {
    width: 30px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    padding: 0;
    color: var(--text-color);
}
.rounds-input-wrapper.is-superset .input-rounds {
    color: #7c3aed;
    border-bottom-color: rgba(139, 92, 246, 0.3);
    background-color: transparent;
    /* Changed from white */
    border-radius: 2px;
}
.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;
    gap: 0.5rem;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    color: var(--text-secondary-color);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-superset-toggle svg {
    width: 12px;
    height: 12px;
}
.btn-superset-toggle:hover {
    color: var(--primary-color);
    border-color: var(--primary-color-translucent);
}
.btn-superset-toggle.active {
    background-color: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
    border-color: rgba(139, 92, 246, 0.3);
}
.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: row;
    flex-wrap: wrap;
    /* Allow wrapping on narrow containers */
    align-items: center;
    justify-content: space-between;
    padding: 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.5rem;
}
.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);
}
.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.9rem;
    font-weight: 600;
    color: var(--text-color);
    background: transparent;
    border: none;
    width: 100%;
    padding: 0;
}
.input-exercise-name:focus {
    outline: none;
    text-decoration: underline;
}
.exercise-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 280px;
    /* Grow, shrink, base 280px (enough for inputs) */
    justify-content: flex-end;
    /* Removed max-width: 60% constraint */
}
.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 */
}
/* Left-align the Weight input so text like "Bodyweight" reads naturally */
.input-group-wide input {
    text-align: right;
}
.input-label {
    font-size: 0.6rem;
    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.9rem;
    font-weight: 500;
    color: var(--text-color);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    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(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.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);
}
.stat-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}
.stat-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary-color);
    letter-spacing: 0.5px;
}
.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;
}
.stat-value-large {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1;
}
.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;
    }
}
/* Mobile adjustments */
@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }

    .exercise-item-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .exercise-right {
        display: flex;
        flex-wrap: nowrap;
        /* Prevent wrapping so they stay in one line */
        width: 100%;
        max-width: 100%;
        justify-content: space-between;
        /* Space them evenly */
        gap: 0.5rem;
    }

    /* Allow weight/distance inputs to shrink slightly if needed but stay visible */
    .input-group-wide {
        flex: 1 1 auto !important;
        min-width: 80px;
        max-width: none;
    }

    /* Center labels on mobile */
    .input-label {
        text-align: center;
        width: 100%;
    }
}
@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 p {
    margin: 0.5rem 0 0 0;
    font-size: 0.9rem;
    color: var(--text-secondary-color);
    line-height: 1.5;
}
.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;
}
.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.8rem;
    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.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;
}
.set-item input:focus {
    outline: none;
    border-color: var(--primary-color);
}
.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: 1rem;
    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);
}
/* 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;
}
.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.75rem;
  line-height: 1.4;
}
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: 0 1rem;
  height: 50px;
  line-height: 50px;
  border-radius: 10px;
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}
.cookbook-controls .search-input:focus {
  outline: none;
  border-color: var(--primary-color);
}
.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: rgba(var(--surface-color-rgb, 26, 24, 35), 0.9);
    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;
}
/* 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/_program-marketplace.css */
.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: 1.5rem;
}
.marketplace-header-title p {
  margin: 0;
  color: var(--text-secondary-color);
}
.marketplace-controls {
  background-color: var(--surface-color);
  padding: 1.5rem;
  border-radius: 16px;
  /* Standardized */
  border: 1px solid var(--border-color);
  margin-bottom: 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(--background-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 --- */
.program-card {
  --card-radius: 12px;
  background: var(--surface-color);
  border-radius: var(--card-radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  /* Cap width to ensure consistency across cards */
}
.program-card.clickable {
  cursor: pointer;
}
.program-card.clickable:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
/* Image Section with 16:9 Aspect Ratio */
.program-card-image {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 aspect ratio */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.program-card-image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  pointer-events: none;
}
/* 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-image .fallback-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  opacity: 0.3;
  z-index: 1;
}
/* Badge Overlay on Image */
.program-card-image .image-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  z-index: 2;
}
/* Card Body */
.program-card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.5rem;
}
.program-card-body h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-color);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.program-card-trainer {
  font-size: 0.85rem;
  color: var(--text-secondary-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.program-card-trainer .rating {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.program-card-trainer .rating svg {
  width: 14px;
  height: 14px;
  fill: var(--carbs-color);
}
/* Meta Badges Row */
.program-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
}
.program-card-meta .badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: var(--background-color);
  color: var(--text-secondary-color);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.program-card-meta .badge.difficulty-beginner {
  background: rgba(76, 175, 80, 0.15);
  color: #4CAF50;
}
.program-card-meta .badge.difficulty-intermediate {
  background: rgba(255, 152, 0, 0.15);
  color: #FF9800;
}
.program-card-meta .badge.difficulty-advanced {
  background: rgba(244, 67, 54, 0.15);
  color: #F44336;
}
/* Footer Row */
.program-card-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.program-card-footer .price {
  font-weight: 600;
  color: var(--primary-color);
  font-size: 0.95rem;
}
.program-card-footer .price.free {
  color: var(--success-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;
}
/* --- Mobile Responsiveness --- */
@media (max-width: 1199px) {
  .marketplace-header {
    grid-template-columns: 1fr;
    /* Stack items vertically on smaller screens */
  }
}
/* --- Program List Grid Layout --- */
.program-list {
  display: grid;
  grid-template-columns: 1fr;
  /* Mobile: 1 card wide */
  gap: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
  justify-content: start;
  /* Left-align items when there are fewer than max columns */
}
@media (min-width: 768px) {
  .program-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .program-list {
    grid-template-columns: repeat(3, 1fr);
    /* Web: 3 cards wide */
  }
}
/* styles/views/_events-page.css */
.events-page-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.5rem;
  height: 100%;
}
.events-filter-sidebar {
  background-color: var(--surface-color);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  padding: 1.5rem;
  height: -moz-fit-content;
  height: fit-content;
  position: sticky;
  top: 1.5rem;
  z-index: 10;
}
.events-filter-sidebar .subheading {
  margin-top: 0;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}
.filter-button-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}
.filter-button {
  background: none;
  border: 1px solid transparent;
  color: var(--text-secondary-color);
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.95rem;
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
@media (hover: hover) {
  .filter-button:hover {
    background-color: var(--background-color);
    color: var(--text-color);
  }
}
.filter-button.active {
  background-color: var(--primary-color-translucent);
  color: var(--primary-color);
  font-weight: 600;
  border-color: var(--primary-color-translucent);
}
.event-list-content {
  overflow-y: auto;
  height: 100%;
}
.event-list-content .program-list {
  display: grid;
  grid-template-columns: 1fr;
  /* Mobile: 1 card wide */
  gap: 1.5rem;
}
/* Override max-width on program cards in event list so they fill grid cells */
.event-list-content .program-card {
  max-width: none;
  width: 100%;
}
/* Reduce event card image height (25% smaller by using 12:9 aspect ratio) */
.event-list-content .program-card-image {
  padding-top: 42%;
  /* Reduced from 56.25% (16:9) to ~12:9 */
}
@media (min-width: 768px) {
  .event-list-content .program-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .event-list-content .program-list {
    grid-template-columns: repeat(3, 1fr);
    /* Web: 3 cards wide as requested */
  }
}
/* --- Event Detail Modal --- */
.event-detail-modal .modal-content {
  max-width: 600px;
}
.event-detail-header {
  margin-bottom: 1rem;
}
.event-detail-header .program-trainer {
  font-size: 1rem;
  color: var(--text-secondary-color);
  display: block;
  margin-top: 0.75rem;
}
.event-description {
  line-height: 1.6;
  color: var(--text-secondary-color);
  margin-bottom: 1.5rem;
}
.event-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  background-color: var(--background-color);
  padding: 1rem;
  border-radius: 10px;
  margin-bottom: 1.5rem;
}
.event-detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.event-detail-item label {
  font-size: 0.8rem;
  color: var(--text-secondary-color);
  font-weight: 500;
  text-transform: uppercase;
}
.event-detail-item span {
  font-size: 1rem;
  color: var(--text-color);
  font-weight: 600;
}
.event-workout-preview .subheading {
  margin-top: 0;
}
/* --- Mobile Responsiveness --- */
@media (max-width: 1199px) {
  .events-page-layout {
    display: block;
    /* Removed grid to prevent blowout */
    width: 100%;
    height: auto;
    overflow-x: hidden;
    /* Force no horizontal scroll on page container */
  }

  .events-filter-sidebar {
    position: static;
    width: 100%;
    margin-bottom: 1.5rem;
    max-width: 100%;
    box-sizing: border-box;
    /* Ensure padding doesn't expand width */
  }

  /* Filter buttons scroll horizontally on mobile */
  .filter-button-group {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    /* Smooth scroll on iOS */
  }

  .filter-button {
    flex-shrink: 0;
    white-space: nowrap;
    border: 1px solid var(--border-color);
  }

  .event-list-content {
    height: auto;
    overflow-y: visible;
  }
}
/* 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/_settings-page.css */
.settings-page-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 1.5rem;
    /* Standardized gap */
    height: 100%;
    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: 100%;
}
.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: auto;
    padding-right: 5px;
    /* Space for scrollbar */
}
.settings-card {
    background-color: var(--surface-color);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    padding: 2rem;
    margin-bottom: 1.5rem;
}
.settings-card h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
}
/* 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: 100%;
    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: 0;
    right: 0;
    background-color: var(--primary-color);
    color: white;
    border: 2px solid var(--surface-color);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
}
.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;
        padding: 1rem;
        height: auto;
        align-items: center;
    }

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

    .settings-nav-list {
        flex-direction: row;
        width: 100%;
    }

    .settings-nav-item {
        flex-shrink: 0;
        white-space: nowrap;
    }
}
/* 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: 100%;
    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: 100%;
    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;
}
/* styles/views/_settings.css */
.settings-tabs { display: flex; gap: 0.5rem; border-bottom: 1px solid var(--border-color); margin-bottom: 1.5rem; flex-wrap: wrap; }
.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; }
.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.5rem 0;
}
.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; }
.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; }
.add-gear-form select { flex: 1; }
.toggle-group { display: flex; justify-content: space-between; align-items: center; background-color: var(--background-color); padding: 0.75rem; border-radius: 8px; cursor: pointer; }
.toggle-switch-wrapper { position: relative; display: inline-block; width: 50px; height: 28px; }
.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/_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; 
    }
}
/* styles/views/_social.css */
.social-view-container {
  display: grid;
  grid-template-columns: 1fr;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: var(--background-color);
}
/* Desktop Grid Layout */
@media (min-width: 1200px) {
  .social-view-container {
    grid-template-columns: 1fr 350px; /* Main Feed | Right Sidebar */
    gap: 1.5rem; /* Standardized Gap */
  }
}
/* --- Left Column (Feed & Circles) --- */
.social-main-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: none; 
  overflow: hidden;
  position: relative;
  gap: 1rem;
}
.social-header {
  background-color: var(--surface-color);
  border-radius: 1rem; /* Standardized to 16px */
  border: 1px solid var(--border-color);
  position: relative; 
  top: auto;
  z-index: 20;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  box-shadow: none; /* Removed inconsistent shadow */
}
[data-theme='light'] .social-header {
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.social-header h1 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-color);
  margin: 0;
  letter-spacing: -0.025em;
}
.social-header p {
  font-size: 0.875rem;
  color: var(--text-secondary-color);
  margin: 0;
}
.social-header-actions {
    display: flex;
    gap: 0.5rem;
}
.btn-circle-icon {
    padding: 0.5rem;
    border-radius: 50%;
    color: var(--text-secondary-color);
    transition: background-color 0.2s ease;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-circle-icon:hover {
    background-color: var(--background-color);
    color: var(--text-color);
}
/* Rounded Tabs Container */
.social-tabs-container {
    padding: 0 1.5rem;
    flex-shrink: 0;
    background-color: var(--surface-color);
    border-radius: 1rem; /* Standardized */
    border: 1px solid var(--border-color);
}
.social-tabs {
    display: flex;
    gap: 2rem;
}
.social-tab-btn {
    background: none;
    border: none;
    padding: 1rem 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary-color);
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}
.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 {
    flex: 1;
    overflow-y: auto;
    padding: 0 0.5rem 6rem 0; 
}
/* --- Feed Items --- */
.feed-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.feed-item {
    position: relative;
    border-radius: 1rem; /* Standardized */
    padding: 1.5rem;
    margin-bottom: 0;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    transition: box-shadow 0.2s ease;
}
.feed-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.feed-item.ai-summary {
    background: linear-gradient(135deg, var(--primary-color-dark), #1e1b4b);
    color: white;
    border-color: var(--primary-color);
}
[data-theme='light'] .feed-item.ai-summary {
     background: linear-gradient(135deg, var(--primary-color), #4f46e5);
}
.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: 3rem;
    height: 3rem;
    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);
}
.ai-summary .feed-avatar {
    background-color: rgba(255,255,255,0.1);
    color: white;
}
.feed-user-text p {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
}
.ai-summary .feed-user-text p { color: white; }
.feed-user-text span {
    font-weight: 400;
    color: var(--text-secondary-color);
}
.ai-summary .feed-user-text span { color: rgba(255,255,255,0.7); }
.feed-time {
    font-size: 0.75rem;
    color: var(--text-secondary-color);
    margin: 0;
}
.ai-summary .feed-time { color: rgba(255,255,255,0.5); }
.feed-content {
    margin-bottom: 1rem;
}
.feed-text-box {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-secondary-color);
    background-color: var(--background-color);
    padding: 1rem;
    border-radius: 0.75rem;
    font-style: italic;
}
.ai-summary .feed-text-box {
    color: rgba(255,255,255,0.9);
    background-color: transparent;
    padding: 0;
}
.feed-image-container {
    margin-bottom: 1rem;
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    height: 14rem;
    background-color: var(--background-color);
}
.feed-image-container img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.7s ease;
}
.feed-image-container:hover img {
    transform: scale(1.05);
}
.proof-badge {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.feed-stats-row {
    display: flex;
    gap: 1rem;
}
.feed-stat-pill {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background-color: var(--background-color);
}
.ai-summary .feed-stat-pill { background-color: rgba(255,255,255,0.1); }
.feed-stat-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-secondary-color);
}
.ai-summary .feed-stat-label { color: rgba(255,255,255,0.6); }
.feed-stat-value {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary-color);
}
.ai-summary .feed-stat-value { color: white; }
.feed-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
.ai-summary .feed-actions { border-top-color: rgba(255,255,255,0.1); }
.action-group { display: flex; gap: 1.5rem; }
.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.875rem;
    font-weight: 600;
}
.btn-feed-action:hover { color: var(--primary-color); }
.ai-summary .btn-feed-action { color: rgba(255,255,255,0.7); }
.ai-summary .btn-feed-action:hover { color: white; }
/* --- Circle Grid --- */
.circles-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.circle-card {
    background-color: var(--surface-color);
    padding: 1.25rem;
    border-radius: 1rem;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
}
.circle-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--primary-color-translucent);
}
.circle-card-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.circle-info-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.circle-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
.circle-details h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-color);
}
.circle-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary-color);
}
.admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background-color: rgba(245, 158, 11, 0.1); /* Amber-50 */
    color: #d97706; /* Amber-600 */
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    border: 1px solid rgba(245, 158, 11, 0.2);
}
/* --- Right Column (Sidebar) --- */
.social-sidebar {
    display: none; 
    background-color: var(--surface-color);
    
    /* Standardized Style */
    border: 1px solid var(--border-color);
    border-radius: 1rem; /* Standardized */
    padding: 1.5rem;
    overflow-y: auto;
    height: 100%; 
}
@media (min-width: 1200px) {
    .social-sidebar { display: block; }
}
.sidebar-section { margin-bottom: 2rem; }
.sidebar-title {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-color);
    margin-bottom: 1rem;
    margin-top: 0;
}
.goal-progress-card {
    background-color: var(--background-color);
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.goal-row-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.goal-bar-bg {
    width: 100%;
    height: 0.5rem;
    background-color: var(--border-color);
    border-radius: 999px;
}
.goal-bar-fill {
    height: 100%;
    border-radius: 999px;
    background-color: var(--primary-color);
}
.recommended-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.recommended-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.recommended-item:hover {
    background-color: var(--background-color);
}
.rec-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background-color: var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary-color);
}
.rec-info p { margin: 0; font-size: 0.875rem; font-weight: 700; color: var(--text-color); }
.rec-info span { font-size: 0.75rem; color: var(--text-secondary-color); }
.btn-rec-add {
    opacity: 0;
    color: var(--primary-color);
    background-color: var(--primary-color-translucent);
    padding: 0.25rem;
    border-radius: 0.5rem;
    transition: opacity 0.2s ease;
}
.recommended-item:hover .btn-rec-add { opacity: 1; }
.invite-box {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    padding: 1.25rem;
    border-radius: 1rem;
    color: white;
    box-shadow: 0 4px 15px var(--primary-color-translucent);
}
.invite-box h3 { margin: 0 0 0.25rem 0; font-size: 1.125rem; }
.invite-box p { margin: 0 0 1rem 0; font-size: 0.875rem; opacity: 0.9; }
.invite-box button {
    width: 100%;
    background-color: white;
    color: var(--primary-color);
    font-weight: 700;
    border: none;
    padding: 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
}
/* --- Battle Zone --- */
.battle-card {
    background: linear-gradient(to right, #0f172a, #1e293b);
    border-radius: 1rem;
    padding: 1.25rem;
    color: white;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.battle-bg-icon {
    position: absolute;
    top: 0; right: 0;
    padding: 1rem;
    opacity: 0.1;
    pointer-events: none;
}
.battle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}
.battle-title-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.battle-icon-box {
    background-color: rgba(255,255,255,0.1);
    padding: 0.35rem;
    border-radius: 0.5rem;
}
.battle-title h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
}
.battle-title span {
    font-size: 0.65rem;
    font-family: monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}
.battle-period-toggle {
    background-color: rgba(51, 65, 85, 0.5);
    padding: 0.25rem;
    border-radius: 0.5rem;
    display: flex;
    gap: 0.25rem;
}
.battle-toggle-btn {
    background: none;
    border: none;
    color: #94a3b8;
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}
.battle-toggle-btn.active {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.battle-scores {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
}
.score-left { color: #a5b4fc; display: flex; flex-direction: column; }
.score-right { color: #fda4af; display: flex; flex-direction: column; align-items: flex-end; }
.score-label { font-size: 0.7rem; text-transform: uppercase; opacity: 0.7; }
.score-val { font-size: 1.125rem; font-weight: 700; color: white; }
.battle-bar-container {
    height: 1rem;
    background-color: #334155;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    position: relative;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
}
.battle-bar-center-marker {
    position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: 2px;
    background-color: rgba(255,255,255,0.2);
    z-index: 2;
}
.battle-bar-us {
    height: 100%;
    background: linear-gradient(to right, #6366f1, #818cf8);
    position: relative;
    transition: width 1s ease-out;
}
.battle-bar-glow {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 4px;
    background-color: rgba(255,255,255,0.5);
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
}
.battle-bar-them {
    flex: 1;
    background: linear-gradient(to left, #f43f5e, #fb7185);
}
.battle-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    font-size: 0.75rem;
}
.battle-metric { color: #94a3b8; }
.battle-metric span { color: #cbd5e1; font-weight: 600; }
.battle-status { display: flex; align-items: center; gap: 0.25rem; font-weight: 700; }
.status-winning { color: #fbbf24; }
.status-losing { color: #f43f5e; }
/* Circle Detail Overrides */
.circle-detail-header {
    background-color: var(--surface-color);
    border-radius: 1rem; /* Standardized */
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}
.circle-detail-bg-icon {
    position: absolute;
    top: 0; right: 0;
    padding: 1.5rem;
    opacity: 0.05;
    pointer-events: none;
    color: var(--text-color);
}
.circle-detail-header h2 {
    font-size: 2rem;
    font-weight: 900;
    margin: 0.5rem 0;
}
.circle-detail-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}
/* Circle Chat Component */
.circle-chat-container {
    background-color: var(--surface-color);
    border-radius: 1rem; /* Standardized */
    border: 1px solid var(--border-color);
    height: 500px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.circle-chat-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--background-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.circle-chat-status {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-secondary-color);
}
.status-dot {
    width: 8px; height: 8px;
    background-color: var(--success-color);
    border-radius: 50%;
    margin-right: 0.5rem;
}
.circle-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.circle-chat-input-area {
    padding: 0.75rem;
    border-top: 1px solid var(--border-color);
    background-color: var(--surface-color);
    display: flex;
    gap: 0.5rem;
}
/* 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;
    }
}
/* --- NEW ONBOARDING STYLES --- */
/* --- TRAINER VIEW IMPORTS --- */
/* styles/views/_trainer-layout.css */
/* Trainer View Tabs */
.trainer-view-with-tabs {
  display: flex;
  flex-direction: column;
  height: 100%;
  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: auto;
  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: 100%;
}
.find-trainer-content>* {
  width: 100%;
  height: 100%;
}
.trainer-view {
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "list main";
  height: 100%;
  overflow: hidden;
  background-color: var(--background-color);
  gap: 1.5rem;
  padding: 0;
}
.trainer-view.no-sidebar {
  grid-template-columns: 80px 1fr;
  grid-template-areas: "sidebar main";
}
.trainer-dashboard-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  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-y: auto;
  box-sizing: border-box;
  height: 100%;
}
/* 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: hidden;
  }

  .trainer-view,
  .trainer-view.no-sidebar {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "main"
      "tabnav";
    height: 100%;
    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: 100%;
  }
}
/* 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: 0.65rem;
  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;
}
.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: auto;
    padding: 0 1rem;
}
.client-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-bottom: 1rem;
}
.client-card-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.client-card-item:hover {
    background-color: var(--background-color);
}
.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-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;
    height: 100%;
    width: 100%;
}
.trainer-view .client-dashboard {
    flex-grow: 1;
    overflow-y: auto;
}
.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);
}
.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;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.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: auto;
}
.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: 100%;
        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-programs.css */
.program-manager {
  flex-grow: 1;
}
.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;
}
.program-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1.5rem;
}
.program-card {
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 16px; /* Standardized from 12px */
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}
.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);
}
.program-card.clickable {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.program-card.clickable:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
[data-theme='dark'] .program-card.clickable:hover {
  border-color: var(--primary-color);
  box-shadow: 0 4px 20px var(--primary-color-translucent);
}
.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;
}
.program-day-content {
  overflow-y: auto;
  height: 100%;
  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: auto;
  height: 100%;
}
.program-day-sidebar h4 {
  margin-top: 0;
  color: var(--primary-color);
}
.program-week-list,
.program-day-list {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  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.9rem;
  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.9rem;
    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.9rem;
  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: 1rem;
    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;
}
/* --- MOVED RULES FROM 768px to 1199px --- */
@media (max-width: 1199px) {
    .program-day-editor-layout {
        grid-template-columns: 1fr;
    }
    .program-day-sidebar {
        height: 250px;
        order: -1;
    }
    
    /* --- 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: auto; /* 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: 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.6rem 0.75rem;
    font-size: 0.9rem;
    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-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-schedule.css */
.schedule-container {
  background-color: var(--background-color);
  /* Padding removed to rely on wrapper padding */
  padding: 0;
  min-height: 100%;
  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; text-align: center;
  background-color: var(--background-color); border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary-color); font-weight: 600; text-transform: uppercase;
}
.weekly-view-header.today { background-color: var(--primary-color-translucent); color: var(--primary-color); }
.weekly-view-header .day-number { display: block; font-size: 1.25rem; font-weight: 700; }
.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(--background-color); }
.weekly-view-cell { border-bottom: 1px solid var(--border-color); border-right: 1px solid var(--border-color); }
.weekly-view-cell.available { background-color: rgba(16, 185, 129, 0.1); cursor: pointer; }
.weekly-view-cell.available:hover { background-color: rgba(16, 185, 129, 0.2); }
.weekly-view-cell.booked { background-color: rgba(239, 68, 68, 0.1); }
.weekly-view-cell.unavailable { background-color: var(--background-color); }
.weekly-view-cell.selected { background-color: var(--primary-color-translucent); z-index: 5; }
.weekly-appointment-block {
  padding: 0.25rem 0.5rem; border-radius: 0.25rem; height: 100%; font-size: 0.75rem;
  background-color: var(--surface-color); border: 1px solid var(--border-color); border-left-width: 3px;
  overflow: hidden; cursor: pointer;
}
.weekly-appointment-block h5 { margin: 0; font-weight: 700; color: var(--text-color); }
.weekly-appointment-block p { margin: 0; color: var(--text-secondary-color); }
.weekly-appointment-block .block-badge {
  display: inline-block; padding: 1px 4px; border-radius: 4px; margin-top: 2px;
  font-size: 0.65rem; background-color: var(--background-color); color: var(--text-secondary-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-color); color: white; border-radius: 10px; font-size: 0.7rem; }
/* 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/_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-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;
}
/* styles/views/_performance-view.css */
.performance-hub-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1.5rem; /* Standardized to 1.5rem */
}
.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: 16px; /* Standardized */
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    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: 0.7rem;
    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 --- */
@media (min-width: 1200px) {
    .performance-hub-grid {
        grid-template-columns: 2fr 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: 0.75rem;
    }
    .analytics-section {
        padding: 1rem;
    }
}
.performance-hub-grid .grid-item-main.span-2 {
    grid-column: 1 / -1;
}
/* 8. UTILITIES */
/* 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 */
.z-top { z-index: 9999; }
.z-modal { z-index: 1000; }
/* 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: 1200px) {
  .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 */
}
/* View Styles */
*, ::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%;
}
@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}
@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}
@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}
@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}
@media (min-width: 1536px) {
    .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;
}
.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-0 {
    inset: 0px;
}
.inset-x-0 {
    left: 0px;
    right: 0px;
}
.inset-y-0 {
    top: 0px;
    bottom: 0px;
}
.-bottom-1 {
    bottom: -0.25rem;
}
.-bottom-6 {
    bottom: -1.5rem;
}
.-bottom-8 {
    bottom: -2rem;
}
.-right-1 {
    right: -0.25rem;
}
.-top-3 {
    top: -0.75rem;
}
.bottom-0 {
    bottom: 0px;
}
.bottom-2 {
    bottom: 0.5rem;
}
.bottom-44 {
    bottom: 11rem;
}
.bottom-52 {
    bottom: 13rem;
}
.bottom-\[10\%\] {
    bottom: 10%;
}
.bottom-\[20px\] {
    bottom: 20px;
}
.bottom-full {
    bottom: 100%;
}
.end-1 {
    inset-inline-end: 0.25rem;
}
.left-0 {
    left: 0px;
}
.left-1 {
    left: 0.25rem;
}
.left-1\/2 {
    left: 50%;
}
.left-10 {
    left: 2.5rem;
}
.left-2 {
    left: 0.5rem;
}
.left-3 {
    left: 0.75rem;
}
.left-4 {
    left: 1rem;
}
.left-5 {
    left: 1.25rem;
}
.left-7 {
    left: 1.75rem;
}
.left-\[-10\%\] {
    left: -10%;
}
.right-0 {
    right: 0px;
}
.right-16 {
    right: 4rem;
}
.right-2 {
    right: 0.5rem;
}
.right-28 {
    right: 7rem;
}
.right-3 {
    right: 0.75rem;
}
.right-4 {
    right: 1rem;
}
.right-5 {
    right: 1.25rem;
}
.right-\[-10\%\] {
    right: -10%;
}
.top-0 {
    top: 0px;
}
.top-1 {
    top: 0.25rem;
}
.top-1\/2 {
    top: 50%;
}
.top-12 {
    top: 3rem;
}
.top-16 {
    top: 4rem;
}
.top-2 {
    top: 0.5rem;
}
.top-3 {
    top: 0.75rem;
}
.top-3\.5 {
    top: 0.875rem;
}
.top-32 {
    top: 8rem;
}
.top-36 {
    top: 9rem;
}
.top-4 {
    top: 1rem;
}
.top-5 {
    top: 1.25rem;
}
.top-\[-10\%\] {
    top: -10%;
}
.top-\[280px\] {
    top: 280px;
}
.top-\[340px\] {
    top: 340px;
}
.top-full {
    top: 100%;
}
.isolate {
    isolation: isolate;
}
.z-0 {
    z-index: 0;
}
.z-10 {
    z-index: 10;
}
.z-20 {
    z-index: 20;
}
.z-30 {
    z-index: 30;
}
.z-50 {
    z-index: 50;
}
.z-\[10000\] {
    z-index: 10000;
}
.z-\[100\] {
    z-index: 100;
}
.z-\[101\] {
    z-index: 101;
}
.z-\[110\] {
    z-index: 110;
}
.z-\[150\] {
    z-index: 150;
}
.z-\[200\] {
    z-index: 200;
}
.z-\[60\] {
    z-index: 60;
}
.z-\[70\] {
    z-index: 70;
}
.z-\[80\] {
    z-index: 80;
}
.z-\[9999\] {
    z-index: 9999;
}
.order-2 {
    order: 2;
}
.col-span-2 {
    grid-column: span 2 / span 2;
}
.col-span-full {
    grid-column: 1 / -1;
}
.m-0 {
    margin: 0px;
}
.m-1 {
    margin: 0.25rem;
}
.m-10 {
    margin: 2.5rem;
}
.m-2 {
    margin: 0.5rem;
}
.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-6 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.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;
}
.-mb-px {
    margin-bottom: -1px;
}
.-mt-1 {
    margin-top: -0.25rem;
}
.-mt-16 {
    margin-top: -4rem;
}
.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-3 {
    margin-bottom: 0.75rem;
}
.mb-4 {
    margin-bottom: 1rem;
}
.mb-6 {
    margin-bottom: 1.5rem;
}
.mb-8 {
    margin-bottom: 2rem;
}
.mb-\[180px\] {
    margin-bottom: 180px;
}
.mb-\[210px\] {
    margin-bottom: 210px;
}
.me-1 {
    margin-inline-end: 0.25rem;
}
.ml-0\.5 {
    margin-left: 0.125rem;
}
.ml-1 {
    margin-left: 0.25rem;
}
.ml-2 {
    margin-left: 0.5rem;
}
.ml-3 {
    margin-left: 0.75rem;
}
.ml-4 {
    margin-left: 1rem;
}
.ml-5 {
    margin-left: 1.25rem;
}
.ml-auto {
    margin-left: auto;
}
.mr-1 {
    margin-right: 0.25rem;
}
.mr-2 {
    margin-right: 0.5rem;
}
.mr-3 {
    margin-right: 0.75rem;
}
.mr-4 {
    margin-right: 1rem;
}
.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-3 {
    margin-top: 0.75rem;
}
.mt-4 {
    margin-top: 1rem;
}
.mt-6 {
    margin-top: 1.5rem;
}
.mt-8 {
    margin-top: 2rem;
}
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.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;
}
.aspect-video {
    aspect-ratio: 16 / 9;
}
.h-0\.5 {
    height: 0.125rem;
}
.h-1 {
    height: 0.25rem;
}
.h-1\.5 {
    height: 0.375rem;
}
.h-10 {
    height: 2.5rem;
}
.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-3 {
    height: 0.75rem;
}
.h-32 {
    height: 8rem;
}
.h-4 {
    height: 1rem;
}
.h-40 {
    height: 10rem;
}
.h-48 {
    height: 12rem;
}
.h-5 {
    height: 1.25rem;
}
.h-6 {
    height: 1.5rem;
}
.h-64 {
    height: 16rem;
}
.h-8 {
    height: 2rem;
}
.h-9 {
    height: 2.25rem;
}
.h-\[20px\] {
    height: 20px;
}
.h-\[280px\] {
    height: 280px;
}
.h-\[360px\] {
    height: 360px;
}
.h-\[400px\] {
    height: 400px;
}
.h-\[420px\] {
    height: 420px;
}
.h-\[500px\] {
    height: 500px;
}
.h-\[600px\] {
    height: 600px;
}
.h-\[60vh\] {
    height: 60vh;
}
.h-\[70\%\] {
    height: 70%;
}
.h-\[75vw\] {
    height: 75vw;
}
.h-\[80\%\] {
    height: 80%;
}
.h-\[80vw\] {
    height: 80vw;
}
.h-full {
    height: 100%;
}
.h-px {
    height: 1px;
}
.h-screen {
    height: 100vh;
}
.max-h-48 {
    max-height: 12rem;
}
.max-h-64 {
    max-height: 16rem;
}
.max-h-96 {
    max-height: 24rem;
}
.max-h-\[176px\] {
    max-height: 176px;
}
.max-h-\[290px\] {
    max-height: 290px;
}
.max-h-\[320px\] {
    max-height: 320px;
}
.max-h-\[400px\] {
    max-height: 400px;
}
.max-h-\[70vh\] {
    max-height: 70vh;
}
.max-h-\[80vh\] {
    max-height: 80vh;
}
.max-h-\[90vh\] {
    max-height: 90vh;
}
.min-h-0 {
    min-height: 0px;
}
.min-h-\[140px\] {
    min-height: 140px;
}
.min-h-\[240px\] {
    min-height: 240px;
}
.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-1\/3 {
    width: 33.333333%;
}
.w-10 {
    width: 2.5rem;
}
.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-32 {
    width: 8rem;
}
.w-36 {
    width: 9rem;
}
.w-4 {
    width: 1rem;
}
.w-40 {
    width: 10rem;
}
.w-5 {
    width: 1.25rem;
}
.w-52 {
    width: 13rem;
}
.w-6 {
    width: 1.5rem;
}
.w-64 {
    width: 16rem;
}
.w-8 {
    width: 2rem;
}
.w-9 {
    width: 2.25rem;
}
.w-\[35\%\] {
    width: 35%;
}
.w-\[400px\] {
    width: 400px;
}
.w-\[420px\] {
    width: 420px;
}
.w-\[500px\] {
    width: 500px;
}
.w-\[60\%\] {
    width: 60%;
}
.w-\[600px\] {
    width: 600px;
}
.w-\[65\%\] {
    width: 65%;
}
.w-\[75vw\] {
    width: 75vw;
}
.w-\[80vw\] {
    width: 80vw;
}
.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-\[200px\] {
    min-width: 200px;
}
.min-w-\[220px\] {
    min-width: 220px;
}
.min-w-\[300px\] {
    min-width: 300px;
}
.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-\[200px\] {
    max-width: 200px;
}
.max-w-\[290px\] {
    max-width: 290px;
}
.max-w-\[320px\] {
    max-width: 320px;
}
.max-w-\[400px\] {
    max-width: 400px;
}
.max-w-\[90\%\] {
    max-width: 90%;
}
.max-w-full {
    max-width: 100%;
}
.max-w-lg {
    max-width: 32rem;
}
.max-w-md {
    max-width: 28rem;
}
.max-w-sm {
    max-width: 24rem;
}
.max-w-xs {
    max-width: 20rem;
}
.flex-1 {
    flex: 1 1 0%;
}
.flex-\[2\] {
    flex: 2;
}
.flex-shrink-0 {
    flex-shrink: 0;
}
.shrink-0 {
    flex-shrink: 0;
}
.flex-grow {
    flex-grow: 1;
}
.origin-bottom {
    transform-origin: bottom;
}
.-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-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\/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));
}
.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));
}
.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-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-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-not-allowed {
    cursor: not-allowed;
}
.cursor-pointer {
    cursor: pointer;
}
.select-none {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}
.select-all {
    -webkit-user-select: all;
       -moz-user-select: all;
            user-select: all;
}
.resize-none {
    resize: none;
}
.resize {
    resize: both;
}
.list-disc {
    list-style-type: disc;
}
.appearance-none {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
.columns-1 {
    -moz-columns: 1;
         columns: 1;
}
.columns-2 {
    -moz-columns: 2;
         columns: 2;
}
.columns-3 {
    -moz-columns: 3;
         columns: 3;
}
.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));
}
.flex-row {
    flex-direction: row;
}
.flex-row-reverse {
    flex-direction: row-reverse;
}
.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;
}
.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-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-4 {
    gap: 1rem;
}
.gap-5 {
    gap: 1.25rem;
}
.gap-6 {
    gap: 1.5rem;
}
.gap-8 {
    gap: 2rem;
}
.gap-px {
    gap: 1px;
}
.gap-x-2 {
    -moz-column-gap: 0.5rem;
         column-gap: 0.5rem;
}
.gap-y-1 {
    row-gap: 0.25rem;
}
.-space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(-0.125rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(-0.125rem * var(--tw-space-y-reverse));
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.25rem * var(--tw-space-x-reverse));
    margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.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-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * 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-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-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));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.space-x-reverse > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
}
.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));
}
.overflow-auto {
    overflow: auto;
}
.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;
}
.scroll-smooth {
    scroll-behavior: smooth;
}
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.whitespace-nowrap {
    white-space: nowrap;
}
.rounded {
    border-radius: 0.25rem;
}
.rounded-2xl {
    border-radius: 1rem;
}
.rounded-3xl {
    border-radius: 1.5rem;
}
.rounded-\[2\.5rem\] {
    border-radius: 2.5rem;
}
.rounded-\[2rem\] {
    border-radius: 2rem;
}
.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 {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}
.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;
}
.border {
    border-width: 1px;
}
.border-2 {
    border-width: 2px;
}
.border-4 {
    border-width: 4px;
}
.border-b {
    border-bottom-width: 1px;
}
.border-b-2 {
    border-bottom-width: 2px;
}
.border-l {
    border-left-width: 1px;
}
.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-dashed {
    border-style: dashed;
}
.border-none {
    border-style: none;
}
.border-\[var\(--border-color\)\] {
    border-color: var(--border-color);
}
.border-amber-500\/20 {
    border-color: rgb(245 158 11 / 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\/20 {
    border-color: rgb(59 130 246 / 0.2);
}
.border-blue-500\/30 {
    border-color: rgb(59 130 246 / 0.3);
}
.border-blue-500\/50 {
    border-color: rgb(59 130 246 / 0.5);
}
.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-cyan-500\/50 {
    border-color: rgb(6 182 212 / 0.5);
}
.border-gray-100 {
    --tw-border-opacity: 1;
    border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}
.border-gray-200 {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-gray-500 {
    --tw-border-opacity: 1;
    border-color: rgb(107 114 128 / 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 {
    --tw-border-opacity: 1;
    border-color: rgb(34 197 94 / 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-dark {
    --tw-border-opacity: 1;
    border-color: rgb(18 18 18 / var(--tw-border-opacity, 1));
}
.border-grit-gold {
    --tw-border-opacity: 1;
    border-color: rgb(212 175 55 / var(--tw-border-opacity, 1));
}
.border-grit-gold\/20 {
    border-color: rgb(212 175 55 / 0.2);
}
.border-grit-gold\/30 {
    border-color: rgb(212 175 55 / 0.3);
}
.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-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-purple-500 {
    --tw-border-opacity: 1;
    border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}
.border-purple-500\/30 {
    border-color: rgb(168 85 247 / 0.3);
}
.border-purple-500\/50 {
    border-color: rgb(168 85 247 / 0.5);
}
.border-red-500 {
    --tw-border-opacity: 1;
    border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-red-500\/30 {
    border-color: rgb(239 68 68 / 0.3);
}
.border-red-500\/50 {
    border-color: rgb(239 68 68 / 0.5);
}
.border-slate-700 {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
.border-slate-700\/50 {
    border-color: rgb(51 65 85 / 0.5);
}
.border-transparent {
    border-color: transparent;
}
.border-white\/10 {
    border-color: rgb(255 255 255 / 0.1);
}
.border-white\/20 {
    border-color: rgb(255 255 255 / 0.2);
}
.border-white\/5 {
    border-color: rgb(255 255 255 / 0.05);
}
.border-yellow-500 {
    --tw-border-opacity: 1;
    border-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
}
.border-yellow-500\/50 {
    border-color: rgb(234 179 8 / 0.5);
}
.border-zinc-800 {
    --tw-border-opacity: 1;
    border-color: rgb(39 39 42 / var(--tw-border-opacity, 1));
}
.border-opacity-30 {
    --tw-border-opacity: 0.3;
}
.bg-\[\#050505\] {
    --tw-bg-opacity: 1;
    background-color: rgb(5 5 5 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0c0c0c\] {
    --tw-bg-opacity: 1;
    background-color: rgb(12 12 12 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0f0f10\] {
    --tw-bg-opacity: 1;
    background-color: rgb(15 15 16 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0f0f11\] {
    --tw-bg-opacity: 1;
    background-color: rgb(15 15 17 / var(--tw-bg-opacity, 1));
}
.bg-\[\#121212\] {
    --tw-bg-opacity: 1;
    background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1));
}
.bg-\[\#18181b\] {
    --tw-bg-opacity: 1;
    background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
}
.bg-\[\#1a1a1a\] {
    --tw-bg-opacity: 1;
    background-color: rgb(26 26 26 / var(--tw-bg-opacity, 1));
}
.bg-\[\#1e1e1e\] {
    --tw-bg-opacity: 1;
    background-color: rgb(30 30 30 / var(--tw-bg-opacity, 1));
}
.bg-\[var\(--surface-card\)\] {
    background-color: var(--surface-card);
}
.bg-\[var\(--surface-color\)\] {
    background-color: var(--surface-color);
}
.bg-\[var\(--surface-ground\)\] {
    background-color: var(--surface-ground);
}
.bg-\[var\(--surface-hover\)\] {
    background-color: var(--surface-hover);
}
.bg-amber-500\/10 {
    background-color: rgb(245 158 11 / 0.1);
}
.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/20 {
    background-color: rgb(0 0 0 / 0.2);
}
.bg-black\/30 {
    background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/40 {
    background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/50 {
    background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/60 {
    background-color: rgb(0 0 0 / 0.6);
}
.bg-black\/70 {
    background-color: rgb(0 0 0 / 0.7);
}
.bg-black\/80 {
    background-color: rgb(0 0 0 / 0.8);
}
.bg-black\/90 {
    background-color: rgb(0 0 0 / 0.9);
}
.bg-black\/95 {
    background-color: rgb(0 0 0 / 0.95);
}
.bg-blue-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.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-blue-600\/80 {
    background-color: rgb(37 99 235 / 0.8);
}
.bg-blue-900\/20 {
    background-color: rgb(30 58 138 / 0.2);
}
.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\/20 {
    background-color: rgb(6 182 212 / 0.2);
}
.bg-cyan-500\/5 {
    background-color: rgb(6 182 212 / 0.05);
}
.bg-cyan-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(8 145 178 / var(--tw-bg-opacity, 1));
}
.bg-cyan-600\/10 {
    background-color: rgb(8 145 178 / 0.1);
}
.bg-emerald-500\/20 {
    background-color: rgb(16 185 129 / 0.2);
}
.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 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-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.bg-green-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.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-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-green-900\/20 {
    background-color: rgb(20 83 45 / 0.2);
}
.bg-grit-dark {
    --tw-bg-opacity: 1;
    background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1));
}
.bg-grit-dark\/90 {
    background-color: rgb(18 18 18 / 0.9);
}
.bg-grit-gold {
    --tw-bg-opacity: 1;
    background-color: rgb(212 175 55 / var(--tw-bg-opacity, 1));
}
.bg-grit-gold\/10 {
    background-color: rgb(212 175 55 / 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(32 33 36 / var(--tw-bg-opacity, 1));
}
.bg-grit-surface\/50 {
    background-color: rgb(32 33 36 / 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-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.bg-indigo-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
}
.bg-indigo-500\/5 {
    background-color: rgb(99 102 241 / 0.05);
}
.bg-orange-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 237 213 / 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\/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-900\/20 {
    background-color: rgb(124 45 18 / 0.2);
}
.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\/20 {
    background-color: rgb(168 85 247 / 0.2);
}
.bg-purple-500\/5 {
    background-color: rgb(168 85 247 / 0.05);
}
.bg-purple-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}
.bg-purple-600\/10 {
    background-color: rgb(147 51 234 / 0.1);
}
.bg-red-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}
.bg-red-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / 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\/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-slate-500\/20 {
    background-color: rgb(100 116 139 / 0.2);
}
.bg-slate-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.bg-slate-700\/50 {
    background-color: rgb(51 65 85 / 0.5);
}
.bg-slate-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.bg-slate-800\/50 {
    background-color: rgb(30 41 59 / 0.5);
}
.bg-teal-500\/10 {
    background-color: rgb(20 184 166 / 0.1);
}
.bg-transparent {
    background-color: transparent;
}
.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-yellow-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500\/10 {
    background-color: rgb(234 179 8 / 0.1);
}
.bg-yellow-500\/20 {
    background-color: rgb(234 179 8 / 0.2);
}
.bg-yellow-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
}
.bg-zinc-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(228 228 231 / var(--tw-bg-opacity, 1));
}
.bg-zinc-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(63 63 70 / 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\/80 {
    background-color: rgb(39 39 42 / 0.8);
}
.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\/80 {
    background-color: rgb(24 24 27 / 0.8);
}
.bg-zinc-900\/90 {
    background-color: rgb(24 24 27 / 0.9);
}
.bg-opacity-10 {
    --tw-bg-opacity: 0.1;
}
.bg-opacity-20 {
    --tw-bg-opacity: 0.2;
}
.bg-opacity-50 {
    --tw-bg-opacity: 0.5;
}
.bg-opacity-70 {
    --tw-bg-opacity: 0.7;
}
.bg-opacity-75 {
    --tw-bg-opacity: 0.75;
}
.bg-opacity-80 {
    --tw-bg-opacity: 0.8;
}
.bg-\[url\(\'https\:\/\/grainy-gradients\.vercel\.app\/noise\.svg\'\)\] {
    background-image: url('https://grainy-gradients.vercel.app/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));
}
.from-\[\#0c0c0c\] {
    --tw-gradient-from: #0c0c0c var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(12 12 12 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.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-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-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-blue-900\/20 {
    --tw-gradient-from: rgb(30 58 138 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-cyan-500 {
    --tw-gradient-from: #06b6d4 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-cyan-600 {
    --tw-gradient-from: #0891b2 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(8 145 178 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-cyan-600\/20 {
    --tw-gradient-from: rgb(8 145 178 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(8 145 178 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-cyan-600\/40 {
    --tw-gradient-from: rgb(8 145 178 / 0.4) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(8 145 178 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-cyan-600\/60 {
    --tw-gradient-from: rgb(8 145 178 / 0.6) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(8 145 178 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-cyan-900\/50 {
    --tw-gradient-from: rgb(22 78 99 / 0.5) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(22 78 99 / 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-green-500\/10 {
    --tw-gradient-from: rgb(34 197 94 / 0.1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-grit-dark {
    --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-grit-dark\/90 {
    --tw-gradient-from: rgb(18 18 18 / 0.9) 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-grit-gold\/20 {
    --tw-gradient-from: rgb(212 175 55 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(212 175 55 / 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\/10 {
    --tw-gradient-from: rgb(249 115 22 / 0.1) 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 {
    --tw-gradient-from: #ea580c 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-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-orange-600\/60 {
    --tw-gradient-from: rgb(234 88 12 / 0.6) 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-purple-600\/20 {
    --tw-gradient-from: rgb(147 51 234 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-600\/40 {
    --tw-gradient-from: rgb(147 51 234 / 0.4) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(147 51 234 / 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-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-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-cyan-500\/10 {
    --tw-gradient-to: rgb(6 182 212 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(6 182 212 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-grit-dark\/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-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-purple-500\/10 {
    --tw-gradient-to: rgb(168 85 247 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(168 85 247 / 0.1) 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);
}
.to-\[\#000\] {
    --tw-gradient-to: #000 var(--tw-gradient-to-position);
}
.to-amber-700 {
    --tw-gradient-to: #b45309 var(--tw-gradient-to-position);
}
.to-blue-600 {
    --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}
.to-blue-600\/20 {
    --tw-gradient-to: rgb(37 99 235 / 0.2) var(--tw-gradient-to-position);
}
.to-cyan-500 {
    --tw-gradient-to: #06b6d4 var(--tw-gradient-to-position);
}
.to-cyan-500\/10 {
    --tw-gradient-to: rgb(6 182 212 / 0.1) var(--tw-gradient-to-position);
}
.to-cyan-900\/20 {
    --tw-gradient-to: rgb(22 78 99 / 0.2) var(--tw-gradient-to-position);
}
.to-emerald-400 {
    --tw-gradient-to: #34d399 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: #121212 var(--tw-gradient-to-position);
}
.to-grit-gold {
    --tw-gradient-to: #D4AF37 var(--tw-gradient-to-position);
}
.to-grit-gold\/20 {
    --tw-gradient-to: rgb(212 175 55 / 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-red-500\/10 {
    --tw-gradient-to: rgb(239 68 68 / 0.1) 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);
}
.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-1 {
    padding: 0.25rem;
}
.p-1\.5 {
    padding: 0.375rem;
}
.p-12 {
    padding: 3rem;
}
.p-2 {
    padding: 0.5rem;
}
.p-3 {
    padding: 0.75rem;
}
.p-4 {
    padding: 1rem;
}
.p-5 {
    padding: 1.25rem;
}
.p-6 {
    padding: 1.5rem;
}
.p-8 {
    padding: 2rem;
}
.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.px-1\.5 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}
.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.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\.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-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-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.pb-0 {
    padding-bottom: 0px;
}
.pb-1 {
    padding-bottom: 0.25rem;
}
.pb-16 {
    padding-bottom: 4rem;
}
.pb-2 {
    padding-bottom: 0.5rem;
}
.pb-20 {
    padding-bottom: 5rem;
}
.pb-24 {
    padding-bottom: 6rem;
}
.pb-32 {
    padding-bottom: 8rem;
}
.pb-36 {
    padding-bottom: 9rem;
}
.pb-4 {
    padding-bottom: 1rem;
}
.pb-6 {
    padding-bottom: 1.5rem;
}
.pb-8 {
    padding-bottom: 2rem;
}
.pl-10 {
    padding-left: 2.5rem;
}
.pl-4 {
    padding-left: 1rem;
}
.pl-5 {
    padding-left: 1.25rem;
}
.pl-6 {
    padding-left: 1.5rem;
}
.pl-8 {
    padding-left: 2rem;
}
.pr-1 {
    padding-right: 0.25rem;
}
.pr-10 {
    padding-right: 2.5rem;
}
.pr-2 {
    padding-right: 0.5rem;
}
.pr-4 {
    padding-right: 1rem;
}
.pt-0 {
    padding-top: 0px;
}
.pt-1 {
    padding-top: 0.25rem;
}
.pt-10 {
    padding-top: 2.5rem;
}
.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;
}
.pt-8 {
    padding-top: 2rem;
}
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.align-top {
    vertical-align: top;
}
.align-bottom {
    vertical-align: bottom;
}
.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: 1.5rem;
    line-height: 2rem;
}
.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}
.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-\[10px\] {
    font-size: 10px;
}
.text-\[11px\] {
    font-size: 11px;
}
.text-\[12px\] {
    font-size: 12px;
}
.text-\[14px\] {
    font-size: 14px;
}
.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: 1.125rem;
    line-height: 1.75rem;
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}
.font-black {
    font-weight: 900;
}
.font-bold {
    font-weight: 700;
}
.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;
}
.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-6 {
    line-height: 1.5rem;
}
.leading-\[1\.1\] {
    line-height: 1.1;
}
.leading-none {
    line-height: 1;
}
.leading-relaxed {
    line-height: 1.625;
}
.leading-tight {
    line-height: 1.25;
}
.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-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-\[var\(--text-color\)\] {
    color: var(--text-color);
}
.text-\[var\(--text-secondary-color\)\] {
    color: var(--text-secondary-color);
}
.text-amber-300\/80 {
    color: rgb(252 211 77 / 0.8);
}
.text-amber-400 {
    --tw-text-opacity: 1;
    color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-black\/50 {
    color: rgb(0 0 0 / 0.5);
}
.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-400\/90 {
    color: rgb(96 165 250 / 0.9);
}
.text-blue-500 {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-blue-600 {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-cyan-400 {
    --tw-text-opacity: 1;
    color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}
.text-cyan-400\/90 {
    color: rgb(34 211 238 / 0.9);
}
.text-cyan-500 {
    --tw-text-opacity: 1;
    color: rgb(6 182 212 / var(--tw-text-opacity, 1));
}
.text-cyan-500\/50 {
    color: rgb(6 182 212 / 0.5);
}
.text-emerald-400 {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.text-emerald-400\/90 {
    color: rgb(52 211 153 / 0.9);
}
.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-700 {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / 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-green-800 {
    --tw-text-opacity: 1;
    color: rgb(22 101 52 / 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(18 18 18 / var(--tw-text-opacity, 1));
}
.text-grit-gold {
    --tw-text-opacity: 1;
    color: rgb(212 175 55 / 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-400\/90 {
    color: rgb(129 140 248 / 0.9);
}
.text-indigo-500 {
    --tw-text-opacity: 1;
    color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}
.text-indigo-600 {
    --tw-text-opacity: 1;
    color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.text-indigo-800 {
    --tw-text-opacity: 1;
    color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}
.text-orange-400 {
    --tw-text-opacity: 1;
    color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.text-orange-400\/90 {
    color: rgb(251 146 60 / 0.9);
}
.text-orange-500 {
    --tw-text-opacity: 1;
    color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.text-orange-600 {
    --tw-text-opacity: 1;
    color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.text-purple-200 {
    --tw-text-opacity: 1;
    color: rgb(233 213 255 / 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\/70 {
    color: rgb(192 132 252 / 0.7);
}
.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-red-400 {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-500 {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-500\/70 {
    color: rgb(239 68 68 / 0.7);
}
.text-red-500\/90 {
    color: rgb(239 68 68 / 0.9);
}
.text-red-600 {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700 {
    --tw-text-opacity: 1;
    color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-rose-400\/90 {
    color: rgb(251 113 133 / 0.9);
}
.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-teal-400 {
    --tw-text-opacity: 1;
    color: rgb(45 212 191 / var(--tw-text-opacity, 1));
}
.text-transparent {
    color: transparent;
}
.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/40 {
    color: rgb(255 255 255 / 0.4);
}
.text-white\/5 {
    color: rgb(255 255 255 / 0.05);
}
.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-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-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));
}
.underline {
    text-decoration-line: underline;
}
.overline {
    text-decoration-line: overline;
}
.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.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-blue-500 {
    accent-color: #3b82f6;
}
.accent-cyan-500 {
    accent-color: #06b6d4;
}
.accent-grit-gold {
    accent-color: #D4AF37;
}
.accent-yellow-500 {
    accent-color: #eab308;
}
.opacity-0 {
    opacity: 0;
}
.opacity-20 {
    opacity: 0.2;
}
.opacity-30 {
    opacity: 0.3;
}
.opacity-40 {
    opacity: 0.4;
}
.opacity-5 {
    opacity: 0.05;
}
.opacity-50 {
    opacity: 0.5;
}
.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_-20px_60px_rgba\(0\2c 0\2c 0\2c 0\.9\)\] {
    --tw-shadow: 0 -20px 60px rgba(0,0,0,0.9);
    --tw-shadow-colored: 0 -20px 60px 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\(234\2c 179\2c 8\2c 0\.2\)\] {
    --tw-shadow: 0 0 10px rgba(234,179,8,0.2);
    --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_rgba\(249\2c 115\2c 22\2c 0\.5\)\] {
    --tw-shadow: 0 0 10px rgba(249,115,22,0.5);
    --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_rgba\(34\2c 197\2c 94\2c 0\.5\)\] {
    --tw-shadow: 0 0 10px rgba(34,197,94,0.5);
    --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_rgba\(59\2c 130\2c 246\2c 0\.5\)\] {
    --tw-shadow: 0 0 10px rgba(59,130,246,0.5);
    --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_15px_rgba\(168\2c 85\2c 247\2c 0\.3\)\] {
    --tw-shadow: 0 0 15px rgba(168,85,247,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\(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\(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\(59\2c 130\2c 246\2c 0\.3\)\] {
    --tw-shadow: 0 0 15px rgba(59,130,246,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\(6\2c 182\2c 212\2c 0\.1\)\] {
    --tw-shadow: 0 0 20px rgba(6,182,212,0.1);
    --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\.3\)\] {
    --tw-shadow: 0 0 20px rgba(6,182,212,0.3);
    --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\(168\2c 85\2c 247\2c 0\.5\)\] {
    --tw-shadow: 0 0 30px rgba(168,85,247,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\(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_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-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-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\/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-green-500\/20 {
    --tw-shadow-color: rgb(34 197 94 / 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-purple-900\/40 {
    --tw-shadow-color: rgb(88 28 135 / 0.4);
    --tw-shadow: var(--tw-shadow-colored);
}
.shadow-red-900\/10 {
    --tw-shadow-color: rgb(127 29 29 / 0.1);
    --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-\[var\(--border-color\)\] {
    --tw-ring-color: var(--border-color);
}
.ring-grit-gold {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(212 175 55 / var(--tw-ring-opacity, 1));
}
.ring-white\/5 {
    --tw-ring-color: rgb(255 255 255 / 0.05);
}
.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-\[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-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);
}
.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_10px_rgba\(129\2c 140\2c 248\2c 0\.5\)\] {
    --tw-drop-shadow: drop-shadow(0 0 10px rgba(129,140,248,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\.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_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_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-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;
}
.delay-300 {
    transition-delay: 300ms;
}
.delay-500 {
    transition-delay: 500ms;
}
.duration-1000 {
    transition-duration: 1000ms;
}
.duration-200 {
    transition-duration: 200ms;
}
.duration-300 {
    transition-duration: 300ms;
}
.duration-500 {
    transition-duration: 500ms;
}
.duration-700 {
    transition-duration: 700ms;
}
.ease-\[cubic-bezier\(0\.34\2c 1\.56\2c 0\.64\2c 1\)\] {
    transition-timing-function: cubic-bezier(0.34,1.56,0.64,1);
}
.ease-in {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
    transition-timing-function: linear;
}
.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.selection\:bg-grit-gold *::-moz-selection {
    --tw-bg-opacity: 1;
    background-color: rgb(212 175 55 / var(--tw-bg-opacity, 1));
}
.selection\:bg-grit-gold *::selection {
    --tw-bg-opacity: 1;
    background-color: rgb(212 175 55 / 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(212 175 55 / var(--tw-bg-opacity, 1));
}
.selection\:bg-grit-gold::selection {
    --tw-bg-opacity: 1;
    background-color: rgb(212 175 55 / 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));
}
.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\:border-0:last-child {
    border-width: 0px;
}
.hover\:z-10:hover {
    z-index: 10;
}
.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-\[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\(--border-color\)\]:hover {
    border-color: var(--border-color);
}
.hover\:border-\[var\(--text-color\)\]:hover {
    border-color: var(--text-color);
}
.hover\:border-\[var\(--text-secondary-color\)\]:hover {
    border-color: var(--text-secondary-color);
}
.hover\:border-blue-500\/30:hover {
    border-color: rgb(59 130 246 / 0.3);
}
.hover\:border-gray-500:hover {
    --tw-border-opacity: 1;
    border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
}
.hover\:border-gray-600:hover {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.hover\:border-green-500\/30:hover {
    border-color: rgb(34 197 94 / 0.3);
}
.hover\:border-grit-gold:hover {
    --tw-border-opacity: 1;
    border-color: rgb(212 175 55 / var(--tw-border-opacity, 1));
}
.hover\:border-grit-gold\/30:hover {
    border-color: rgb(212 175 55 / 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\/30:hover {
    border-color: rgb(16 185 129 / 0.3);
}
.hover\:border-orange-500\/30:hover {
    border-color: rgb(249 115 22 / 0.3);
}
.hover\:border-slate-600\/50:hover {
    border-color: rgb(71 85 105 / 0.5);
}
.hover\:border-white\/10:hover {
    border-color: rgb(255 255 255 / 0.1);
}
.hover\:border-white\/20:hover {
    border-color: rgb(255 255 255 / 0.2);
}
.hover\:border-white\/5:hover {
    border-color: rgb(255 255 255 / 0.05);
}
.hover\:bg-\[\#202023\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(32 32 35 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[var\(--surface-hover\)\]:hover {
    background-color: var(--surface-hover);
}
.hover\:bg-black\/5:hover {
    background-color: rgb(0 0 0 / 0.05);
}
.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-blue-500\/10:hover {
    background-color: rgb(59 130 246 / 0.1);
}
.hover\:bg-blue-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.hover\:bg-cyan-500\/30:hover {
    background-color: rgb(6 182 212 / 0.3);
}
.hover\:bg-emerald-500\/30:hover {
    background-color: rgb(16 185 129 / 0.3);
}
.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-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(187 247 208 / 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-green-500\/10:hover {
    background-color: rgb(34 197 94 / 0.1);
}
.hover\:bg-green-500\/20:hover {
    background-color: rgb(34 197 94 / 0.2);
}
.hover\:bg-green-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}
.hover\:bg-grit-dark:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1));
}
.hover\:bg-grit-gold:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(212 175 55 / 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-indigo-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(199 210 254 / var(--tw-bg-opacity, 1));
}
.hover\:bg-orange-500\/10:hover {
    background-color: rgb(249 115 22 / 0.1);
}
.hover\:bg-orange-500\/30:hover {
    background-color: rgb(249 115 22 / 0.3);
}
.hover\:bg-purple-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-500\/30:hover {
    background-color: rgb(168 85 247 / 0.3);
}
.hover\:bg-red-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-500\/20:hover {
    background-color: rgb(239 68 68 / 0.2);
}
.hover\:bg-red-500\/30:hover {
    background-color: rgb(239 68 68 / 0.3);
}
.hover\:bg-red-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-950\/30:hover {
    background-color: rgb(69 10 10 / 0.3);
}
.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\/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-white\/50:hover {
    background-color: rgb(255 255 255 / 0.5);
}
.hover\:bg-yellow-400:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}
.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-opacity-80:hover {
    --tw-bg-opacity: 0.8;
}
.hover\:bg-opacity-90:hover {
    --tw-bg-opacity: 0.9;
}
.hover\:text-\[var\(--text-color\)\]:hover {
    color: var(--text-color);
}
.hover\:text-blue-600:hover {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / 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-emerald-300:hover {
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.hover\:text-green-300:hover {
    --tw-text-opacity: 1;
    color: rgb(134 239 172 / 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-dark:hover {
    --tw-text-opacity: 1;
    color: rgb(18 18 18 / var(--tw-text-opacity, 1));
}
.hover\:text-grit-gold:hover {
    --tw-text-opacity: 1;
    color: rgb(212 175 55 / 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-red-300:hover {
    --tw-text-opacity: 1;
    color: rgb(252 165 165 / 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-red-500:hover {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / 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\:text-zinc-300:hover {
    --tw-text-opacity: 1;
    color: rgb(212 212 216 / var(--tw-text-opacity, 1));
}
.hover\:text-zinc-400:hover {
    --tw-text-opacity: 1;
    color: rgb(161 161 170 / 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\: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-lg:hover {
    --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);
}
.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\:ring-2:hover {
    --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);
}
.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-blue-500:focus {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.focus\:border-grit-gold:focus {
    --tw-border-opacity: 1;
    border-color: rgb(212 175 55 / 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\:bg-white\/10:focus {
    background-color: rgb(255 255 255 / 0.1);
}
.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.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-2: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(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);
}
.focus\:ring-blue-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.focus\:ring-grit-teal:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
}
.focus\:ring-indigo-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
}
.focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px;
}
.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-white\/10:active {
    background-color: rgb(255 255 255 / 0.1);
}
.disabled\:cursor-default:disabled {
    cursor: default;
}
.disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
}
.disabled\:opacity-50:disabled {
    opacity: 0.5;
}
.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\:bg-blue-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:bg-blue-500\/30 {
    background-color: rgb(59 130 246 / 0.3);
}
.group:hover .group-hover\:bg-cyan-500\/10 {
    background-color: rgb(6 182 212 / 0.1);
}
.group:hover .group-hover\:bg-green-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:bg-green-500\/30 {
    background-color: rgb(34 197 94 / 0.3);
}
.group:hover .group-hover\:bg-indigo-500\/10 {
    background-color: rgb(99 102 241 / 0.1);
}
.group:hover .group-hover\:bg-orange-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:bg-orange-500\/30 {
    background-color: rgb(249 115 22 / 0.3);
}
.group:hover .group-hover\:bg-zinc-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(63 63 70 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:text-blue-400 {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-cyan-400 {
    --tw-text-opacity: 1;
    color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-green-400 {
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-orange-400 {
    --tw-text-opacity: 1;
    color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-purple-400 {
    --tw-text-opacity: 1;
    color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-red-500 {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:opacity-10 {
    opacity: 0.1;
}
.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}
@media (min-width: 640px) {
    .sm\:mx-0 {
        margin-left: 0px;
        margin-right: 0px;
    }
    .sm\:my-8 {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    .sm\:ml-3 {
        margin-left: 0.75rem;
    }
    .sm\:ml-4 {
        margin-left: 1rem;
    }
    .sm\:mt-0 {
        margin-top: 0px;
    }
    .sm\:block {
        display: block;
    }
    .sm\:inline-block {
        display: inline-block;
    }
    .sm\:flex {
        display: flex;
    }
    .sm\:h-10 {
        height: 2.5rem;
    }
    .sm\:h-screen {
        height: 100vh;
    }
    .sm\:w-10 {
        width: 2.5rem;
    }
    .sm\:w-32 {
        width: 8rem;
    }
    .sm\:w-44 {
        width: 11rem;
    }
    .sm\:w-auto {
        width: auto;
    }
    .sm\:max-w-lg {
        max-width: 32rem;
    }
    .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\:flex-row {
        flex-direction: row;
    }
    .sm\:flex-row-reverse {
        flex-direction: row-reverse;
    }
    .sm\:items-start {
        align-items: flex-start;
    }
    .sm\:p-0 {
        padding: 0px;
    }
    .sm\:p-6 {
        padding: 1.5rem;
    }
    .sm\:px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .sm\:pb-4 {
        padding-bottom: 1rem;
    }
    .sm\:pl-6 {
        padding-left: 1.5rem;
    }
    .sm\:pr-6 {
        padding-right: 1.5rem;
    }
    .sm\:text-left {
        text-align: left;
    }
    .sm\:align-middle {
        vertical-align: middle;
    }
    .sm\:text-\[14px\] {
        font-size: 14px;
    }
    .sm\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    .sm\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    .sm\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
}
@media (min-width: 768px) {
    .md\:my-0 {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .md\:ml-6 {
        margin-left: 1.5rem;
    }
    .md\:mt-0 {
        margin-top: 0px;
    }
    .md\:flex {
        display: flex;
    }
    .md\:h-24 {
        height: 6rem;
    }
    .md\:w-1\/2 {
        width: 50%;
    }
    .md\:w-1\/3 {
        width: 33.333333%;
    }
    .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-start {
        align-items: flex-start;
    }
    .md\:items-end {
        align-items: flex-end;
    }
    .md\:gap-12 {
        gap: 3rem;
    }
    .md\:gap-24 {
        gap: 6rem;
    }
    .md\: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)));
    }
    .md\: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));
    }
    .md\:p-10 {
        padding: 2.5rem;
    }
    .md\:pb-32 {
        padding-bottom: 8rem;
    }
    .md\:pl-10 {
        padding-left: 2.5rem;
    }
    .md\:pt-48 {
        padding-top: 12rem;
    }
    .md\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .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-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
}
@media (min-width: 1024px) {
    .lg\:col-span-1 {
        grid-column: span 1 / span 1;
    }
    .lg\:col-span-3 {
        grid-column: span 3 / span 3;
    }
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (min-width: 1280px) {
    .xl\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (prefers-color-scheme: dark) {
    .dark\:bg-zinc-700 {
        --tw-bg-opacity: 1;
        background-color: rgb(63 63 70 / var(--tw-bg-opacity, 1));
    }
}