/* Component styles entrypoint (organized imports live in components/core/index.css) */
/* Shared UI foundations */
/* =============================================================================
   ACCESSIBILITY ENHANCEMENTS
   Easy mode & colorblind mode global styling
   ============================================================================= */
/* ─── COLORBLIND MODE ────────────────────────────────────────────────────── */
/* Enhanced contrast for all emerald/green accent colors */
.color-blind {
    /* Primary accent: Use brighter, more saturated emerald with higher contrast */
    --emerald-primary: #0d9488; /* Teal-600 - better contrast than emerald-500 */
    --emerald-hover: #0f766e; /* Teal-700 */
    --emerald-light: #5eead4; /* Teal-300 */
}
/* Buttons - Higher contrast backgrounds and borders */
.color-blind .bg-emerald-600,
.color-blind .bg-emerald-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)) !important; /* Teal-600 */
}
.color-blind .hover\:bg-emerald-700:hover,
.color-blind .hover\:bg-emerald-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1)) !important; /* Teal-700 */
}
/* Text colors - Enhanced visibility */
.color-blind .text-emerald-600,
.color-blind .text-emerald-500 {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1)) !important;
}
.dark .color-blind [class*="text-emerald-400"] {
    --tw-text-opacity: 1;
    color: rgb(94 234 212 / var(--tw-text-opacity, 1)) !important; /* Teal-300 */
}
/* Border colors */
.color-blind .border-emerald-400,
.color-blind .border-emerald-500 {
    --tw-border-opacity: 1;
    border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)) !important; /* Teal-500 */
}
/* Focus rings - More prominent */
.color-blind .focus\:ring-emerald-400:focus {
    --tw-ring-color: rgb(45 212 191 / 0.5) !important; /* Teal-400 with opacity */
}
/* Success states - Use blue instead of green to avoid red-green confusion */
.color-blind .bg-green-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(240 249 255 / var(--tw-bg-opacity, 1)) !important; /* Sky-50 */
}
.color-blind .text-green-600 {
    --tw-text-opacity: 1;
    color: rgb(2 132 199 / var(--tw-text-opacity, 1)) !important; /* Sky-600 */
}
/* Error states - Use orange/amber instead of pure red */
.color-blind .text-red-600 {
    --tw-text-opacity: 1;
    color: rgb(217 119 6 / var(--tw-text-opacity, 1)) !important; /* Amber-600 */
}
.dark .color-blind [class*="text-red-400"] {
    --tw-text-opacity: 1;
    color: rgb(251 191 36 / var(--tw-text-opacity, 1)) !important; /* Amber-400 */
}
.color-blind .bg-red-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1)) !important; /* Amber-50 */
}
/* Warning states - Enhanced amber */
.color-blind .text-yellow-600 {
    --tw-text-opacity: 1;
    color: rgb(217 119 6 / var(--tw-text-opacity, 1)) !important; /* Amber-600 */
    font-weight: 600; /* Extra emphasis */
}
/* Add patterns/icons to color-coded elements for extra distinction */
.color-blind [data-status="success"]::before,
.color-blind [data-status="completed"]::before {
    content: "✓ ";
    font-weight: bold;
}
.color-blind [data-status="error"]::before,
.color-blind [data-status="failed"]::before {
    content: "✗ ";
    font-weight: bold;
}
.color-blind [data-status="warning"]::before {
    content: "⚠ ";
    font-weight: bold;
}
/* Enhanced outline for focused elements */
.color-blind *:focus-visible {
    outline: 3px solid rgb(13 148 136 / 1) !important; /* Teal-600 */
    outline-offset: 2px;
}
/* Calendar heatmap - Use blue gradient instead of green */
.color-blind .calendar-heatmap [data-level="1"] {
    background-color: #dbeafe !important; /* Blue-100 */
}
.color-blind .calendar-heatmap [data-level="2"] {
    background-color: #93c5fd !important; /* Blue-300 */
}
.color-blind .calendar-heatmap [data-level="3"] {
    background-color: #3b82f6 !important; /* Blue-500 */
}
.color-blind .calendar-heatmap [data-level="4"] {
    background-color: #1d4ed8 !important; /* Blue-700 */
}
/* Progress bars - Add stripes for additional visual distinction */
.color-blind .progress-bar {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255, 255, 255, 0.1) 10px,
        rgba(255, 255, 255, 0.1) 20px
    );
}
/* Toggle switches - Make state more obvious */
.color-blind .pref-toggle__input:checked + .pref-toggle__track {
    background: rgb(13 148 136) !important; /* Teal-600 */
    border: 2px solid rgb(15 118 110) !important; /* Teal-700 */
}
.color-blind .pref-toggle__thumb {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Pills/Chips - Enhanced contrast */
.color-blind .pref-pill--active {
    background-color: rgb(204 251 241) !important; /* Teal-100 */
    border-color: rgb(13 148 136) !important; /* Teal-600 */
    border-width: 2px !important;
    font-weight: 600;
}
.color-blind .dark .pref-pill--active {
    background-color: rgb(19 78 74) !important; /* Teal-900 */
    border-color: rgb(94 234 212) !important; /* Teal-300 */
}
/* Links - Underline all links for better distinction */
.color-blind a:not(.btn):not(.card):not([role="button"]) {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}
.color-blind a:hover:not(.btn):not(.card):not([role="button"]) {
    text-decoration-thickness: 3px;
}
/* Chart colors - Use colorblind-safe palette */
.color-blind [data-chart-color="primary"] {
    fill: #0d9488 !important; /* Teal */
}
.color-blind [data-chart-color="secondary"] {
    fill: #f59e0b !important; /* Amber */
}
.color-blind [data-chart-color="tertiary"] {
    fill: #3b82f6 !important; /* Blue */
}
.color-blind [data-chart-color="quaternary"] {
    fill: #8b5cf6 !important; /* Violet */
}
/* Ensure adequate contrast for all interactive elements */
.color-blind button,
.color-blind .btn,
.color-blind input[type="submit"] {
    border-width: 2px;
    font-weight: 600;
}
/* ─── EASY MODE ──────────────────────────────────────────────────────────── */
/* Base text sizing is handled in base.html via th:classappend */
/* Additional spacing and padding enhancements */
body[data-easy-mode="on"] {
    /* Increased line height globally */
    line-height: 1.75;
}
body[data-easy-mode="on"] button,
body[data-easy-mode="on"] .btn,
body[data-easy-mode="on"] a[role="button"] {
    /* Larger tap targets - minimum 44x44px */
    min-height: 44px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
body[data-easy-mode="on"] input,
body[data-easy-mode="on"] select,
body[data-easy-mode="on"] textarea {
    /* Larger input fields */
    font-size: 1.125rem;
    padding: 0.875rem;
    min-height: 48px;
}
body[data-easy-mode="on"] label {
    /* Clearer labels */
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}
body[data-easy-mode="on"] .card,
body[data-easy-mode="on"] .panel,
body[data-easy-mode="on"] .section {
    /* More generous spacing */
    padding: 1.5rem;
}
body[data-easy-mode="on"] .gap-2 {
    gap: 0.75rem !important;
}
body[data-easy-mode="on"] .gap-3 {
    gap: 1rem !important;
}
body[data-easy-mode="on"] .gap-4 {
    gap: 1.25rem !important;
}
/* Enhanced focus indicators for keyboard navigation */
body[data-easy-mode="on"] *:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}
/* Clearer interactive state indicators */
body[data-easy-mode="on"] a,
body[data-easy-mode="on"] button {
    transition: all 0.2s ease;
}
body[data-easy-mode="on"] a:hover,
body[data-easy-mode="on"] button:hover {
    transform: scale(1.02);
}
/* ─── COMBINED EASY MODE + COLORBLIND MODE ───────────────────────────────── */
body[data-easy-mode="on"].color-blind *:focus-visible {
    /* Extra prominent focus for both modes active */
    outline: 4px solid rgb(13 148 136) !important;
    outline-offset: 4px;
    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.2);
}
/* Dark mode overrides */
html:not(.dark) .footer-redesign {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.dark .footer-redesign {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
  border-top: 2px solid rgba(100, 116, 139, 0.3);
}
.dark .footer-redesign::before {
  background: linear-gradient(
    90deg,
    rgba(16, 185, 129, 0.4) 0%,
    rgba(16, 185, 129, 0.6) 50%,
    rgba(16, 185, 129, 0.4) 100%
  );
}
.dark .footer-grid {
  border-bottom-color: rgba(100, 116, 139, 0.3);
}
.dark .footer-brand {
  border-right-color: rgba(100, 116, 139, 0.3);
}
.dark .footer-brand-name {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.dark .footer-brand-description {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.dark .footer-social-link {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.dark .footer-social-link:hover) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.dark .footer-social-link:hover) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.dark .footer-social-link:hover {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    background-color: rgb(6 78 59 / 0.2);
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}

.color-blind .dark .footer-social-link:hover {
    --tw-border-opacity: 1;
    border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); /* Teal-500 */
}
.dark .footer-section-heading {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
  border-bottom-color: #10b981;
}
.dark .footer-link {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.dark .footer-link:hover) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.dark .footer-link:hover) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.dark .footer-link:hover {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.dark .footer-copyright {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.dark .footer-legal-link {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.dark .footer-legal-link:hover) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.dark .footer-legal-link:hover) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.dark .footer-legal-link:hover {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.dark .footer-legal-link:not(:last-child)::after {
  color: #475569;
}
.dark .footer-system-status {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
@media (max-width: 1023px) {
  .dark .footer-brand {
    border-bottom-color: rgba(100, 116, 139, 0.3);
  }
}
/* Auth and profile */
/* Calendar and schedule surfaces */
/* ============================================
   CALENDAR MONTH VIEW - COMPLETE REDESIGN
   Premium white background + emerald accents
   ============================================ */
/* ===== MONTH GRID CONTAINER ===== */
.calendar-month-grid-wrapper {
  border: 2px solid rgb(226, 232, 240);
  border-radius: 1rem;
  padding: 1.5rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(248, 250, 252, 0.3));
}
.dark .calendar-month-grid-wrapper {
  border-color: rgb(51, 65, 85);
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0.3), rgba(30, 41, 59, 0.2));
}
/* ===== DAY CARD - COMPLETELY REDESIGNED ===== */
.calendar-day-card {
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: visible;
  border: 1.5px solid rgb(226, 232, 240);
  background: white;
  border-radius: 0.75rem;
}
.calendar-day-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    rgba(16, 185, 129, 0) 0%, 
    rgba(16, 185, 129, 0.6) 50%, 
    rgba(16, 185, 129, 0) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.calendar-day-card:hover::before {
  opacity: 1;
}
.calendar-day-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 40px -15px rgba(16, 185, 129, 0.15), 
              0 10px 20px -10px rgba(0, 0, 0, 0.1);
}
html:not(.dark) .calendar-day-card {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(248, 250, 252, 0.9) 100%);
  border: 1px solid rgba(226, 232, 240, 0.6);
  backdrop-filter: blur(10px);
}
.dark .calendar-day-card {
  background: linear-gradient(135deg, 
    rgba(15, 23, 42, 0.7) 0%, 
    rgba(30, 41, 59, 0.5) 100%);
  border: 1px solid rgba(71, 85, 105, 0.4);
  backdrop-filter: blur(12px);
}
/* Today indicator with emerald accent - enhanced glow effect */
.calendar-day-card.ring-2.ring-blue-500\/80 {
  border-color: rgb(16, 185, 129) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25),
              0 0 20px rgba(16, 185, 129, 0.15),
              0 8px 32px -8px rgba(16, 185, 129, 0.2);
  animation: pulse-today 2s ease-in-out infinite;
}
@keyframes pulse-today {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25),
                0 0 20px rgba(16, 185, 129, 0.15),
                0 8px 32px -8px rgba(16, 185, 129, 0.2);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.3),
                0 0 25px rgba(16, 185, 129, 0.2),
                0 8px 32px -8px rgba(16, 185, 129, 0.25);
  }
}
/* Tomorrow indicator - subtle emerald hint */
.calendar-day-card.ring-2.ring-emerald-500\/70 {
  border-color: rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15),
              0 4px 16px -4px rgba(16, 185, 129, 0.1);
}
/* Calendar items - enhanced task/event cards with modern design */
.calendar-item {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/* Subtle gradient overlay on hover */
.calendar-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(16, 185, 129, 0.03) 0%, 
    rgba(16, 185, 129, 0.01) 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.calendar-item:hover::after {
  opacity: 1;
}
.calendar-item:hover {
  transform: translateX(4px) scale(1.02);
  box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.1),
              0 2px 6px -1px rgba(0, 0, 0, 0.05);
}
html:not(.dark) .calendar-item {
  background: linear-gradient(to right, 
    rgba(255, 255, 255, 0.98) 0%, 
    rgba(249, 250, 251, 0.95) 100%);
  border-color: rgba(226, 232, 240, 0.5);
  border-left-width: 3px;
  border-left-color: rgba(148, 163, 184, 0.3);
}
.dark .calendar-item {
  background: linear-gradient(to right,
    rgba(30, 41, 59, 0.5) 0%,
    rgba(51, 65, 85, 0.4) 100%);
  border-color: rgba(71, 85, 105, 0.3);
  border-left-width: 3px;
  border-left-color: rgba(100, 116, 139, 0.4);
}
html:not(.dark) .calendar-item:hover {
  background: linear-gradient(to right,
    rgba(255, 255, 255, 1) 0%,
    rgba(236, 254, 255, 0.98) 100%);
  border-color: rgba(16, 185, 129, 0.25);
  border-left-color: rgba(16, 185, 129, 0.6);
}
.dark .calendar-item:hover {
  background: linear-gradient(to right,
    rgba(30, 41, 59, 0.7) 0%,
    rgba(6, 78, 59, 0.2) 100%);
  border-color: rgba(16, 185, 129, 0.3);
  border-left-color: rgba(16, 185, 129, 0.7);
}
/* Completed items with emerald accent - celebration style */
.calendar-item.border-emerald-400\/40 {
  background: linear-gradient(135deg,
    rgba(16, 185, 129, 0.1) 0%,
    rgba(16, 185, 129, 0.05) 100%) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  border-left-color: rgba(16, 185, 129, 0.8) !important;
  position: relative;
}
.calendar-item.border-emerald-400\/40::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom,
    rgba(16, 185, 129, 0.8) 0%,
    rgba(5, 150, 105, 0.6) 100%);
}
.dark .calendar-item.border-emerald-400\/40 {
  background: linear-gradient(135deg,
    rgba(16, 185, 129, 0.15) 0%,
    rgba(16, 185, 129, 0.08) 100%) !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
  border-left-color: rgba(16, 185, 129, 0.9) !important;
}
/* Schedule items - distinct styling for workout/schedule cards */
html:not(.dark) .calendar-item.bg-slate-50\/70 {
  background: linear-gradient(to right,
    rgba(241, 245, 249, 0.9) 0%,
    rgba(248, 250, 252, 0.85) 100%);
  border-left-color: rgba(100, 116, 139, 0.4);
}
.dark .calendar-item.bg-slate-50\/70 {
  background: linear-gradient(to right,
    rgba(51, 65, 85, 0.4) 0%,
    rgba(71, 85, 105, 0.3) 100%);
  border-left-color: rgba(148, 163, 184, 0.4);
}
html:not(.dark) .calendar-item.bg-slate-50\/70:hover {
  background: linear-gradient(to right,
    rgba(224, 242, 254, 0.95) 0%,
    rgba(240, 249, 255, 0.9) 100%);
  border-color: rgba(6, 182, 212, 0.3);
  border-left-color: rgba(6, 182, 212, 0.7);
}
.dark .calendar-item.bg-slate-50\/70:hover {
  background: linear-gradient(to right,
    rgba(8, 47, 73, 0.5) 0%,
    rgba(7, 89, 133, 0.3) 100%);
  border-color: rgba(6, 182, 212, 0.4);
  border-left-color: rgba(6, 182, 212, 0.8);
}
/* Improved hover effects for mobile */
@media (hover: none) {
  .calendar-day-card:hover {
    transform: none;
  }
  
  .calendar-item:hover {
    transform: none;
  }
}
/* Better mobile responsiveness - enhanced for touch devices */
@media (max-width: 640px) {
  .calendar-day-card {
    padding: 0.875rem;
    min-height: 11rem;
    border-radius: 1rem;
  }
  
  .calendar-item {
    padding: 0.625rem;
    font-size: 0.8125rem;
    border-radius: 0.75rem;
  }
  
  /* Improve touch targets */
  .calendar-item {
    min-height: 2.5rem;
  }
}
/* Better tablet responsiveness */
@media (min-width: 641px) and (max-width: 1024px) {
  .calendar-day-card {
    min-height: 12rem;
  }
}
/* Prevent text selection on day cards (improves touch interaction) */
.calendar-day-card {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
/* But allow text selection inside items */
.calendar-item {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}
/* Navigation buttons with emerald theme - enhanced premium style */
.btn--primary {
  background: linear-gradient(135deg, rgb(16, 185, 129) 0%, rgb(5, 150, 105) 100%);
  color: white;
  border: none;
  box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.3),
              0 2px 6px -1px rgba(0, 0, 0, 0.1);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn--primary:hover {
  background: linear-gradient(135deg, rgb(5, 150, 105) 0%, rgb(4, 120, 87) 100%);
  box-shadow: 0 6px 16px -3px rgba(16, 185, 129, 0.4),
              0 3px 8px -2px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}
.btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px -2px rgba(16, 185, 129, 0.3);
}
.dark .btn--primary {
  background: linear-gradient(135deg, rgb(16, 185, 129) 0%, rgb(5, 150, 105) 100%);
  box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.4),
              0 2px 6px -1px rgba(0, 0, 0, 0.2);
}
.dark .btn--primary:hover {
  background: linear-gradient(135deg, rgb(5, 150, 105) 0%, rgb(4, 120, 87) 100%);
  box-shadow: 0 6px 16px -3px rgba(16, 185, 129, 0.5),
              0 3px 8px -2px rgba(0, 0, 0, 0.25);
}
/* Week strip improvements - more interactive */
#week-strip > div {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0.75rem;
  position: relative;
}
#week-strip > div:hover {
  background: linear-gradient(135deg,
    rgba(16, 185, 129, 0.12) 0%,
    rgba(16, 185, 129, 0.08) 100%);
  transform: scale(1.05);
  box-shadow: 0 2px 8px -2px rgba(16, 185, 129, 0.2);
}
#week-strip > div::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgb(16, 185, 129) 50%,
    transparent 100%);
  transition: width 0.3s ease;
}
#week-strip > div:hover::after {
  width: 80%;
}
/* Smooth scrolling for calendar containers */
#week-slider {
  scroll-behavior: smooth;
}
/* Focus styles for accessibility - enhanced visibility */
.calendar-day-card:focus,
.calendar-item:focus {
  outline: 3px solid rgba(16, 185, 129, 0.6);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.15);
}
.calendar-day-card:focus-visible,
.calendar-item:focus-visible {
  outline: 3px solid rgb(16, 185, 129);
  outline-offset: 3px;
}
/* Loading states */
.calendar-day-card[data-loading="true"] {
  opacity: 0.6;
  pointer-events: none;
}
.calendar-day-card[data-loading="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
/* Empty state for calendar days - personal and friendly */
.calendar-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.calendar-empty-state:hover {
  opacity: 0.9;
}
.calendar-empty-state-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.5rem;
  color: rgba(148, 163, 184, 0.5);
}
.dark .calendar-empty-state-icon {
  color: rgba(148, 163, 184, 0.3);
}
/* Calendar item type indicators - better visual distinction */
.calendar-item[data-type="task"] {
  border-left-color: rgba(59, 130, 246, 0.6);
}
.calendar-item[data-type="workout"] {
  border-left-color: rgba(16, 185, 129, 0.6);
}
.calendar-item[data-type="nutrition"] {
  border-left-color: rgba(234, 179, 8, 0.6);
}
.calendar-item[data-type="event"] {
  border-left-color: rgba(168, 85, 247, 0.6);
}
/* Priority indicators for tasks */
.calendar-item[data-priority="high"] {
  border-left-width: 4px;
  border-left-color: rgba(239, 68, 68, 0.7);
}
.calendar-item[data-priority="medium"] {
  border-left-width: 4px;
  border-left-color: rgba(245, 158, 11, 0.7);
}
.calendar-item[data-priority="low"] {
  border-left-width: 4px;
  border-left-color: rgba(59, 130, 246, 0.5);
}
/* Time slot indicators - for better day planning */
.calendar-time-indicator {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(4px);
}
.dark .calendar-time-indicator {
  background: rgba(255, 255, 255, 0.05);
}
/* Category badges for calendar items */
.calendar-category-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(16, 185, 129, 0.1);
  color: rgb(5, 150, 105);
  border: 1px solid rgba(16, 185, 129, 0.2);
}
.dark .calendar-category-badge {
  background: rgba(16, 185, 129, 0.15);
  color: rgb(52, 211, 153);
  border-color: rgba(16, 185, 129, 0.3);
}
/* Streak indicator for consistent days */
.calendar-streak-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, 
    rgba(245, 158, 11, 0.15) 0%, 
    rgba(251, 191, 36, 0.1) 100%);
  border: 1px solid rgba(245, 158, 11, 0.3);
  font-size: 0.625rem;
  font-weight: 700;
  color: rgb(180, 83, 9);
  backdrop-filter: blur(4px);
}
.dark .calendar-streak-badge {
  background: linear-gradient(135deg,
    rgba(245, 158, 11, 0.2) 0%,
    rgba(251, 191, 36, 0.15) 100%);
  border-color: rgba(245, 158, 11, 0.4);
  color: rgb(251, 191, 36);
}
.calendar-streak-icon {
  width: 0.875rem;
  height: 0.875rem;
}
/* Overdue indicator - subtle but noticeable */
.calendar-item[data-overdue="true"] {
  border-left-color: rgba(239, 68, 68, 0.7) !important;
  background: linear-gradient(to right,
    rgba(254, 226, 226, 0.4) 0%,
    rgba(255, 255, 255, 0.95) 100%) !important;
}
.dark .calendar-item[data-overdue="true"] {
  background: linear-gradient(to right,
    rgba(127, 29, 29, 0.2) 0%,
    rgba(30, 41, 59, 0.5) 100%) !important;
}
/* Quick action buttons on calendar items */
.calendar-item-actions {
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}
.calendar-item:hover .calendar-item-actions {
  opacity: 1;
}
.calendar-item-action-btn {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.5);
  color: rgb(71, 85, 105);
  transition: all 0.15s ease;
  cursor: pointer;
}
.dark .calendar-item-action-btn {
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(71, 85, 105, 0.5);
  color: rgb(203, 213, 225);
}
.calendar-item-action-btn:hover {
  background: rgb(16, 185, 129);
  border-color: rgb(5, 150, 105);
  color: white;
  transform: scale(1.1);
}
/* Day summary card - personalized insights */
.calendar-day-summary {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg,
    rgba(239, 246, 255, 0.8) 0%,
    rgba(243, 244, 246, 0.6) 100%);
  border: 1px solid rgba(191, 219, 254, 0.5);
  font-size: 0.75rem;
  color: rgb(71, 85, 105);
}
.dark .calendar-day-summary {
  background: linear-gradient(135deg,
    rgba(30, 58, 138, 0.15) 0%,
    rgba(51, 65, 85, 0.1) 100%);
  border-color: rgba(59, 130, 246, 0.2);
  color: rgb(203, 213, 225);
}
/* Celebration effect for completed days */
@keyframes celebrate {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.05) rotate(-2deg);
  }
  75% {
    transform: scale(1.05) rotate(2deg);
  }
}
.calendar-day-card[data-completion="100"] {
  animation: celebrate 0.5s ease-out;
}
/* Calendar view mode transitions */
.calendar-view-transition {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Personal touches - motivational quotes container */
.calendar-motivation {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 1rem;
  background: linear-gradient(135deg,
    rgba(253, 224, 71, 0.1) 0%,
    rgba(252, 211, 77, 0.05) 100%);
  border: 1px solid rgba(250, 204, 21, 0.3);
  font-style: italic;
  text-align: center;
  font-size: 0.875rem;
  color: rgb(113, 63, 18);
}
.dark .calendar-motivation {
  background: linear-gradient(135deg,
    rgba(253, 224, 71, 0.15) 0%,
    rgba(252, 211, 77, 0.08) 100%);
  border-color: rgba(250, 204, 21, 0.4);
  color: rgb(253, 224, 71);
}
/* Enhanced card shadows for depth */
.calendar-card-shadow-sm {
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06),
              0 1px 2px -1px rgba(0, 0, 0, 0.04);
}
.calendar-card-shadow-md {
  box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.08),
              0 2px 4px -2px rgba(0, 0, 0, 0.05);
}
.calendar-card-shadow-lg {
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1),
              0 4px 8px -4px rgba(0, 0, 0, 0.06);
}
/* Responsive grid improvements */
@media (min-width: 1280px) {
  .calendar-day-card {
    min-height: 13rem;
  }
}
/* Print styles for calendar */
@media print {
  .calendar-day-card {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    page-break-inside: avoid;
  }
  
  .calendar-item-actions {
    display: none;
  }
}
/* ============================================
   CALENDAR MONTH VIEW - COMPLETE REDESIGN
   Premium white background + emerald accents
   Clean, structured, intentional
   ============================================ */
/* ===== MONTH GRID OUTER FRAME ===== */
.calendar-month-container {
  border: 2px solid rgb(226, 232, 240);
  border-radius: 1.25rem;
  padding: 1.5rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(248, 250, 252, 0.4));
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}
.dark .calendar-month-container {
  border-color: rgb(51, 65, 85);
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0.4), rgba(30, 41, 59, 0.3));
}
.calendar-month-view,
.calendar-week-view {
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}
.calendar-month-view *,
.calendar-week-view * {
  -webkit-user-drag: none;
}
.calendar-expand-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem;
  border-radius: 0.9rem;
  border: 1px solid rgb(226, 232, 240);
  background: rgba(248, 250, 252, 0.85);
}
.dark .calendar-expand-toggle {
  border-color: rgb(51, 65, 85);
  background: rgba(15, 23, 42, 0.5);
}
.calendar-expand-toggle__btn {
  padding: 0.55rem 1.1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: 0.7rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: white;
  color: rgb(30, 41, 59);
  transition: all 0.2s ease;
}
.calendar-expand-toggle__btn:hover {
  border-color: rgb(16, 185, 129);
  background: rgb(240, 253, 250);
  color: rgb(5, 150, 105);
}
.calendar-expand-toggle__btn.active,
.calendar-expand-toggle__btn[aria-pressed="true"] {
  border-color: rgb(16, 185, 129);
  background: rgb(236, 253, 245);
  color: rgb(5, 150, 105);
  box-shadow: 0 2px 8px -2px rgba(16, 185, 129, 0.35);
}
.dark .calendar-expand-toggle__btn {
  background: rgb(15, 23, 42);
  color: rgb(226, 232, 240);
  border-color: rgba(148, 163, 184, 0.3);
}
.dark .calendar-expand-toggle__btn:hover {
  background: rgba(6, 78, 59, 0.2);
  color: rgb(110, 231, 183);
}
.month-carousel {
  --month-carousel-gap: 1.5rem;
  overflow: hidden;
  border-radius: 1.25rem;
  touch-action: pan-y;
  cursor: grab;
}
.month-carousel.is-dragging {
  cursor: grabbing;
}
.month-carousel.is-expanded {
  overflow-x: auto;
  overflow-y: hidden;
  border: 2px solid rgba(16, 185, 129, 0.35);
  padding: 0.5rem;
  scroll-behavior: smooth;
  cursor: grab;
  touch-action: pan-y;
}
.month-carousel.is-expanded.is-dragging {
  cursor: grabbing;
}
.dark .month-carousel.is-expanded {
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(15, 23, 42, 0.4);
}
.month-carousel__track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--month-carousel-gap);
  align-items: stretch;
  transition: transform 0.4s ease;
}
.month-pane {
  flex: 0 0 100%;
  min-width: 0;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.month-carousel.is-expanded .month-pane {
  flex: 0 0 100%;
}
.month-pane--enter-left {
  opacity: 0;
  transform: translateX(-24px);
}
.month-pane--enter-right {
  opacity: 0;
  transform: translateX(24px);
}
.month-pane--enter-center {
  opacity: 0.85;
  transform: scale(0.985);
}
.month-carousel.is-opening .month-pane--enter-center,
.month-carousel.is-opening .month-pane--enter-left,
.month-carousel.is-opening .month-pane--enter-right {
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.month-pane--loading,
.month-pane--error {
  border: 1px dashed rgba(148, 163, 184, 0.5);
  border-radius: 1.25rem;
  min-height: 20rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 250, 252, 0.8);
}
.dark .month-pane--loading,
.dark .month-pane--error {
  border-color: rgba(71, 85, 105, 0.6);
  background: rgba(15, 23, 42, 0.6);
}
.month-pane--error button {
  border-radius: 0.6rem;
  padding: 0.5rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid rgba(37, 99, 235, 0.4);
  background: rgb(37, 99, 235);
  color: #fff;
}
.month-pane--error button:hover {
  background: rgb(29, 78, 216);
}
/* Day headers row */
.calendar-day-headers {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgb(226, 232, 240);
}
.dark .calendar-day-headers {
  border-bottom-color: rgb(51, 65, 85);
}
/* ===== DAY CARD - COMPLETELY REDESIGNED ===== */
.calendar-day-card {
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  border: 1.5px solid rgb(226, 232, 240);
  background: white;
  border-radius: 0.875rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}
.calendar-month-view .calendar-day-card {
  height: 16rem;
  max-height: 16rem;
}
.dark .calendar-day-card {
  border-color: rgb(51, 65, 85);
  background: rgb(15, 23, 42);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
.calendar-day-card--jump-target {
  border-color: rgb(16, 185, 129) !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.45), 0 12px 24px -12px rgba(16, 185, 129, 0.5) !important;
  animation: calendar-jump-pulse 1.2s ease;
}
.dark .calendar-day-card--jump-target {
  border-color: rgb(52, 211, 153) !important;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.45), 0 12px 24px -12px rgba(52, 211, 153, 0.35) !important;
}
@keyframes calendar-jump-pulse {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(0);
  }
}
/* Remove clipped edges - ensure proper gaps */
.calendar-month-grid {
  gap: 0.875rem;
}
/* Placeholder cells for days outside the current month */
.calendar-day-card--placeholder {
  opacity: 0.12;
  pointer-events: none;
  border-color: transparent;
  box-shadow: none;
  background: transparent;
}
.dark .calendar-day-card--placeholder {
  opacity: 0.08;
}
/* On small screens (2-col layout) minimise placeholder height to avoid wasted space */
@media (max-width: 640px) {
  .calendar-month-view .calendar-day-card--placeholder {
    min-height: 2rem !important;
    height: 2rem !important;
  }
}
@media (max-width: 1024px) and (min-width: 641px) {
  .calendar-month-view .calendar-day-card--placeholder {
    min-height: 3rem !important;
    height: 3rem !important;
  }
}
/* ===== STATUS BAR SYSTEM (Top Indicator) ===== */
.calendar-status-bar {
  height: 4px;
  width: 100%;
  border-radius: 0.875rem 0.875rem 0 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
/* Today - Emerald with enhanced glow */
.calendar-day-card[data-status="today"] {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.05) 100%);
  border-color: rgb(16, 185, 129) !important;
  box-shadow: 0 4px 14px -2px rgba(16, 185, 129, 0.25),
              0 2px 8px -1px rgba(16, 185, 129, 0.15),
              inset 0 1px 2px rgba(16, 185, 129, 0.1);
}
.dark .calendar-day-card[data-status="today"] {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.08) 100%);
  border-color: rgb(52, 211, 153) !important;
}
.calendar-day-card[data-status="today"] .calendar-status-bar {
  height: 6px;
  background: linear-gradient(90deg, rgb(16, 185, 129), rgb(5, 150, 105));
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}
/* Today label styling - emerald highlight */
.calendar-day-card[data-status="today"] .calendar-day-header {
  position: relative;
}
.calendar-day-card[data-status="today"] .calendar-day-number {
  color: rgb(5, 150, 105);
  text-shadow: 0 1px 2px rgba(16, 185, 129, 0.2);
}
.dark .calendar-day-card[data-status="today"] .calendar-day-number {
  color: rgb(52, 211, 153);
}
/* Tomorrow - Light blue line */
.calendar-day-card[data-status="tomorrow"] .calendar-status-bar {
  height: 4px;
  background: linear-gradient(90deg, rgb(59, 130, 246), rgb(37, 99, 235));
  box-shadow: 0 1px 4px rgba(59, 130, 246, 0.3);
}
/* Past + Incomplete - Red/Orange */
.calendar-day-card[data-status="past-incomplete"] .calendar-status-bar {
  background: linear-gradient(90deg, rgb(239, 68, 68), rgb(220, 38, 38));
}
/* Past + Zero Completion - Dark red */
.calendar-day-card[data-status="past-zero"] .calendar-status-bar {
  background: linear-gradient(90deg, rgb(220, 38, 38), rgb(185, 28, 28));
}
/* Past + Complete - Subtle gray (no pending) */
.calendar-day-card[data-status="past-complete"] .calendar-status-bar {
  background: rgb(226, 232, 240);
}
.dark .calendar-day-card[data-status="past-complete"] .calendar-status-bar {
  background: rgb(51, 65, 85);
}
/* Future days - Very subtle */
.calendar-day-card[data-status="future"] .calendar-status-bar {
  background: rgba(148, 163, 184, 0.3);
}
.dark .calendar-day-card[data-status="future"] .calendar-status-bar {
  background: rgba(100, 116, 139, 0.3);
}
/* ===== CARD HEADER (Date number + badges) ===== */
.calendar-day-header {
  padding: 0.875rem 1rem 0.625rem 1rem;
  margin-top: 4px; /* Account for status bar */
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.5rem;
}
.calendar-day-number {
  font-size: 1.25rem;
  font-weight: 700;
  color: rgb(15, 23, 42);
  line-height: 1;
}
.dark .calendar-day-number {
  color: rgb(248, 250, 252);
}
/* Past days - muted */
.calendar-day-card[data-is-past="true"] .calendar-day-number {
  color: rgb(100, 116, 139);
}
.dark .calendar-day-card[data-is-past="true"] .calendar-day-number {
  color: rgb(100, 116, 139);
}
.calendar-day-badge {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.calendar-day-badge.badge-today {
  background: rgba(16, 185, 129, 0.1);
  color: rgb(5, 150, 105);
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.dark .calendar-day-badge.badge-today {
  background: rgba(16, 185, 129, 0.15);
  color: rgb(52, 211, 153);
}
.calendar-day-badge.badge-tomorrow {
  background: rgba(59, 130, 246, 0.1);
  color: rgb(29, 78, 216);
  border: 1px solid rgba(59, 130, 246, 0.3);
}
.dark .calendar-day-badge.badge-tomorrow {
  background: rgba(59, 130, 246, 0.15);
  color: rgb(96, 165, 250);
}
/* ===== CARD CONTENT AREA ===== */
.calendar-day-content {
  flex: 1;
  padding: 0 1rem 0.875rem 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Empty state */
.calendar-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 8rem;
  opacity: 0.5;
  text-align: center;
}
.calendar-empty-state-icon {
  width: 4rem;
  height: 4rem;
  font-size: 3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(148, 163, 184);
}
.calendar-empty-state-text {
  font-size: 0.75rem;
  color: rgb(100, 116, 139);
}
.dark .calendar-empty-state-text {
  color: rgb(148, 163, 184);
}
/* ===== GROUPED MODE ===== */
.calendar-grouped-section {
  margin-bottom: 0.75rem;
}
.calendar-grouped-section:last-child {
  margin-bottom: 0;
}
.calendar-grouped-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid rgb(241, 245, 249);
}
.dark .calendar-grouped-header {
  border-bottom-color: rgb(30, 41, 59);
}
.calendar-grouped-label {
  display: none; /* Hide "Tasks" and "Workouts" labels in grouped mode */
}
.dark .calendar-grouped-label {
  color: rgb(148, 163, 184);
}
.calendar-grouped-count {
  font-size: 0.625rem;
  font-weight: 700;
  color: rgb(100, 116, 139);
  background: rgb(241, 245, 249);
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
}
.dark .calendar-grouped-count {
  background: rgb(30, 41, 59);
  color: rgb(148, 163, 184);
}
.calendar-grouped-counts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.calendar-grouped-count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.5rem;
  border-radius: 0.6rem;
  border: 1px solid rgb(226, 232, 240);
  background: rgb(248, 250, 252);
}
.dark .calendar-grouped-count-row {
  border-color: rgb(51, 65, 85);
  background: rgb(30, 41, 59);
}
.calendar-grouped-items {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.calendar-grouped-item {
  font-size: 0.75rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: rgb(248, 250, 252);
  border: 1px solid rgb(226, 232, 240);
  color: rgb(51, 65, 85);
  transition: all 0.15s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dark .calendar-grouped-item {
  background: rgb(30, 41, 59);
  border-color: rgb(51, 65, 85);
  color: rgb(203, 213, 225);
}
.calendar-grouped-item:hover {
  background: rgb(240, 253, 250);
  border-color: rgb(16, 185, 129);
}
.dark .calendar-grouped-item:hover {
  background: rgba(6, 78, 59, 0.2);
  border-color: rgb(52, 211, 153);
}
.calendar-grouped-item.completed {
  text-decoration: line-through;
  opacity: 0.7;
  background: rgba(16, 185, 129, 0.05);
  border-color: rgba(16, 185, 129, 0.3);
  color: rgb(5, 150, 105);
}
.dark .calendar-grouped-item.completed {
  background: rgba(16, 185, 129, 0.1);
  color: rgb(52, 211, 153);
}
.calendar-grouped-item .check-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: rgb(16, 185, 129);
}
/* ===== SINGULAR/DETAILED MODE ===== */
.calendar-singular-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 10rem;
  overflow-y: auto;
  padding-right: 0.25rem;
}
.calendar-detail-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  flex: 1;
  overflow: hidden; /* Contain child scrolling */
}
.calendar-detail-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  overflow: hidden; /* Support child scrolling */
}
.calendar-detail-header {
  display: none; /* Hide "Tasks" and "Workouts" labels */
}
.dark .calendar-detail-header {
  color: rgb(148, 163, 184);
}
.calendar-detail-count {
  font-size: 0.625rem;
  font-weight: 700;
  color: rgb(100, 116, 139);
  background: rgb(241, 245, 249);
  padding: 0.125rem 0.4rem;
  border-radius: 9999px;
}
.dark .calendar-detail-count {
  background: rgb(30, 41, 59);
  color: rgb(148, 163, 184);
}
.calendar-detail-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.25rem;
}
.calendar-detail-list::-webkit-scrollbar {
  width: 4px;
}
.calendar-detail-list::-webkit-scrollbar-track {
  background: rgb(241, 245, 249);
  border-radius: 2px;
}
.dark .calendar-detail-list::-webkit-scrollbar-track {
  background: rgb(30, 41, 59);
}
.calendar-detail-list::-webkit-scrollbar-thumb {
  background: rgb(203, 213, 225);
  border-radius: 2px;
}
.dark .calendar-detail-list::-webkit-scrollbar-thumb {
  background: rgb(71, 85, 105);
}
.calendar-detail-list::-webkit-scrollbar-thumb:hover {
  background: rgb(148, 163, 184);
}
/* Custom scrollbar for list */
.calendar-singular-list::-webkit-scrollbar {
  width: 4px;
}
.calendar-singular-list::-webkit-scrollbar-track {
  background: rgb(241, 245, 249);
  border-radius: 2px;
}
.dark .calendar-singular-list::-webkit-scrollbar-track {
  background: rgb(30, 41, 59);
}
.calendar-singular-list::-webkit-scrollbar-thumb {
  background: rgb(203, 213, 225);
  border-radius: 2px;
}
.dark .calendar-singular-list::-webkit-scrollbar-thumb {
  background: rgb(71, 85, 105);
}
.calendar-singular-list::-webkit-scrollbar-thumb:hover {
  background: rgb(148, 163, 184);
}
.calendar-item {
  border-radius: 0.625rem;
  padding: 0.625rem;
  border: 1px solid rgb(226, 232, 240);
  background: white;
  transition: all 0.15s ease;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  position: relative;
  border-left-width: 3px;
}
.dark .calendar-item {
  background: rgb(30, 41, 59);
  border-color: rgb(51, 65, 85);
}
/* Task items - blue accent */
.calendar-item[data-type="task"] {
  border-left-color: rgb(59, 130, 246);
}
/* Workout/schedule items - emerald accent */
.calendar-item[data-type="workout"],
.calendar-item[data-type="occurrence"] {
  border-left-color: rgb(16, 185, 129);
  background: rgb(249, 250, 251);
}
.dark .calendar-item[data-type="workout"],
.dark .calendar-item[data-type="occurrence"] {
  background: rgb(30, 41, 59);
}
/* Completed items */
.calendar-item.completed {
  background: rgba(16, 185, 129, 0.05);
  border-color: rgba(16, 185, 129, 0.4);
  border-left-color: rgb(16, 185, 129);
}
.dark .calendar-item.completed {
  background: rgba(16, 185, 129, 0.1);
}
.calendar-item.completed .calendar-item-title {
  text-decoration: line-through;
  opacity: 0.7;
}
.calendar-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.calendar-item-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(15, 23, 42);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dark .calendar-item-title {
  color: rgb(248, 250, 252);
}
.calendar-item-meta {
  font-size: 0.6875rem;
  color: rgb(100, 116, 139);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dark .calendar-item-meta {
  color: rgb(148, 163, 184);
}
.calendar-item-check {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  color: rgb(16, 185, 129);
  font-weight: 700;
  font-size: 1rem;
}
.calendar-item-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.calendar-item-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  background: rgba(226, 232, 240, 0.9);
  color: rgb(71, 85, 105);
}
.calendar-item-kind--task {
  background: rgba(59, 130, 246, 0.16);
  color: rgb(37, 99, 235);
}
.calendar-item-kind--workout {
  background: rgba(16, 185, 129, 0.16);
  color: rgb(5, 150, 105);
}
.dark .calendar-item-kind {
  background: rgba(148, 163, 184, 0.2);
  color: rgb(203, 213, 225);
}
.dark .calendar-item-kind--task {
  background: rgba(59, 130, 246, 0.2);
  color: rgb(147, 197, 253);
}
.dark .calendar-item-kind--workout {
  background: rgba(16, 185, 129, 0.2);
  color: rgb(110, 231, 183);
}
/* More items link */
.calendar-more-link {
  display: block;
  text-align: center;
  padding: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(16, 185, 129);
  background: rgb(240, 253, 250);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 0.5rem;
  transition: all 0.15s ease;
}
.dark .calendar-more-link {
  background: rgba(6, 78, 59, 0.2);
  color: rgb(52, 211, 153);
}
.calendar-more-link:hover {
  background: rgb(209, 250, 229);
  border-color: rgb(16, 185, 129);
  text-decoration: underline;
}
.dark .calendar-more-link:hover {
  background: rgba(6, 78, 59, 0.3);
}
/* Separator between tasks and schedules */
.calendar-content-separator {
  height: 1px;
  background: rgb(226, 232, 240);
  margin: 0.625rem 0;
}
.dark .calendar-content-separator {
  background: rgb(51, 65, 85);
}
/* ===== HEATMAP OVERLAY (kept subtle) ===== */
.calendar-heat-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 0.875rem;
}
.calendar-day-card.heat-low .calendar-heat-overlay {
  opacity: 0.05;
  background: linear-gradient(135deg, rgb(16, 185, 129) 0%, transparent 100%);
}
.calendar-day-card.heat-med .calendar-heat-overlay {
  opacity: 0.1;
  background: linear-gradient(135deg, rgb(245, 158, 11) 0%, transparent 100%);
}
.calendar-day-card.heat-high .calendar-heat-overlay {
  opacity: 0.15;
  background: linear-gradient(135deg, rgb(239, 68, 68) 0%, transparent 100%);
}
/* ===== HEATMAP ICONS (kept for workout/nutrition/PR indicators) ===== */
.calendar-heat-icons {
  position: absolute;
  bottom: 0.625rem;
  right: 0.625rem;
  display: flex;
  gap: 0.375rem;
  z-index: 10;
}
.calendar-icon {
  width: 1rem;
  height: 1rem;
  color: rgb(100, 116, 139);
  opacity: 0.6;
  transition: all 0.2s ease;
}
.dark .calendar-icon {
  color: rgb(148, 163, 184);
}
.calendar-icon:hover {
  opacity: 1;
  transform: scale(1.1);
}
.calendar-icon svg {
  width: 100%;
  height: 100%;
}
.calendar-icon-dot {
  width: 0.5rem;
  height: 0.5rem;
  background: rgb(16, 185, 129);
  border-radius: 50%;
  display: block;
}
.calendar-icon-pr {
  color: rgb(251, 191, 36);
}
/* ===== PREVIEW CARD (hover tooltip) ===== */
#preview-card {
  max-width: 20rem;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
  padding: 1rem;
  color: rgb(15, 23, 42);
  box-shadow: 0 18px 36px -12px rgba(15, 23, 42, 0.25), 0 6px 16px -8px rgba(15, 23, 42, 0.2);
  backdrop-filter: blur(14px);
  pointer-events: auto;
}
.dark #preview-card {
  border-color: rgba(71, 85, 105, 0.6);
  background: linear-gradient(140deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.92));
  color: rgb(248, 250, 252);
  box-shadow: 0 20px 40px -12px rgba(2, 6, 23, 0.6), 0 8px 20px -10px rgba(2, 6, 23, 0.4);
}
.calendar-preview-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.calendar-preview-action {
  border-radius: 0.65rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgb(15, 23, 42);
  color: white;
  padding: 0.45rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.2s ease;
  text-align: center;
}
.calendar-preview-action:hover {
  background: rgb(30, 41, 59);
}
.calendar-preview-action--ghost {
  background: transparent;
  color: rgb(15, 23, 42);
  border-color: rgba(148, 163, 184, 0.5);
}
.calendar-preview-action--ghost:hover {
  border-color: rgba(15, 23, 42, 0.2);
  background: rgba(148, 163, 184, 0.15);
}
.dark .calendar-preview-action {
  background: rgb(248, 250, 252);
  color: rgb(15, 23, 42);
  border-color: rgba(148, 163, 184, 0.4);
}
.dark .calendar-preview-action:hover {
  background: rgb(226, 232, 240);
}
.dark .calendar-preview-action--ghost {
  background: transparent;
  color: rgb(226, 232, 240);
  border-color: rgba(148, 163, 184, 0.5);
}
.dark .calendar-preview-action--ghost:hover {
  background: rgba(148, 163, 184, 0.15);
}
.calendar-log-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.calendar-log-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(6px);
}
.calendar-log-panel {
  position: relative;
  width: min(28rem, 100%);
  border-radius: 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgb(255, 255, 255);
  padding: 1.5rem;
  box-shadow: 0 24px 48px -20px rgba(15, 23, 42, 0.4);
}
.dark .calendar-log-panel {
  background: rgb(15, 23, 42);
  border-color: rgba(71, 85, 105, 0.6);
  box-shadow: 0 28px 52px -24px rgba(2, 6, 23, 0.7);
}
.calendar-log-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.calendar-log-kicker {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgb(100, 116, 139);
  font-weight: 600;
}
.dark .calendar-log-kicker {
  color: rgb(148, 163, 184);
}
.calendar-log-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: rgb(15, 23, 42);
}
.dark .calendar-log-title {
  color: rgb(248, 250, 252);
}
.calendar-log-close {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  color: rgb(71, 85, 105);
}
.dark .calendar-log-close {
  color: rgb(226, 232, 240);
  border-color: rgba(148, 163, 184, 0.4);
}
.calendar-log-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.calendar-log-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(71, 85, 105);
  margin-bottom: 0.35rem;
}
.dark .calendar-log-field label {
  color: rgb(148, 163, 184);
}
.calendar-log-field textarea,
.calendar-log-field select,
.calendar-log-field input {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgb(248, 250, 252);
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  color: rgb(15, 23, 42);
}
.dark .calendar-log-field textarea,
.dark .calendar-log-field select,
.dark .calendar-log-field input {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(71, 85, 105, 0.6);
  color: rgb(248, 250, 252);
}
.calendar-log-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem;
}
.calendar-log-workout-text {
  font-size: 0.9rem;
  color: rgb(71, 85, 105);
}
.dark .calendar-log-workout-text {
  color: rgb(203, 213, 225);
}
.calendar-log-workout-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.75rem;
  border-radius: 0.8rem;
  padding: 0.6rem 1rem;
  background: rgb(16, 185, 129);
  color: white;
  font-weight: 600;
  text-decoration: none;
}
.calendar-log-workout-link:hover {
  background: rgb(5, 150, 105);
}
.calendar-log-status {
  font-size: 0.8rem;
  color: rgb(71, 85, 105);
  min-height: 1rem;
}
.calendar-log-status.is-visible {
  opacity: 1;
}
.calendar-log-status.is-error {
  color: rgb(185, 28, 28);
}
.calendar-log-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.calendar-log-primary {
  border-radius: 0.75rem;
  border: none;
  background: rgb(15, 23, 42);
  color: white;
  padding: 0.6rem 1rem;
  font-weight: 600;
}
.calendar-log-primary:hover {
  background: rgb(30, 41, 59);
}
.calendar-log-secondary {
  border-radius: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: transparent;
  color: rgb(71, 85, 105);
  padding: 0.6rem 1rem;
  font-weight: 600;
}
.calendar-log-secondary:hover {
  background: rgba(148, 163, 184, 0.15);
}
.dark .calendar-log-primary {
  background: rgb(248, 250, 252);
  color: rgb(15, 23, 42);
}
.dark .calendar-log-secondary {
  color: rgb(226, 232, 240);
  border-color: rgba(148, 163, 184, 0.4);
}
/* ===== MONTH/WEEK TOGGLE REDESIGN ===== */
.calendar-view-toggle {
  display: flex;
  gap: 0.5rem;
  padding: 0.375rem;
  border-radius: 0.875rem;
  border: 1px solid rgb(226, 232, 240);
  background: rgba(248, 250, 252, 0.8);
}
.dark .calendar-view-toggle {
  border-color: rgb(51, 65, 85);
  background: rgba(15, 23, 42, 0.45);
}
.calendar-view-btn {
  position: relative;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.5rem;
  border: 1.5px solid rgb(226, 232, 240);
  background: white;
  color: rgb(71, 85, 105);
  transition: all 0.2s ease;
}
.dark .calendar-view-btn {
  border-color: rgb(51, 65, 85);
  background: rgb(15, 23, 42);
  color: rgb(203, 213, 225);
}
.calendar-view-btn:hover {
  border-color: rgb(16, 185, 129);
  background: rgb(240, 253, 250);
}
.dark .calendar-view-btn:hover {
  background: rgba(6, 78, 59, 0.15);
}
/* Active state - strong top indicator + frame */
.calendar-view-btn.active {
  border-color: rgb(16, 185, 129);
  background: white;
  color: rgb(5, 150, 105);
  box-shadow: 0 2px 8px -2px rgba(16, 185, 129, 0.3);
}
.dark .calendar-view-btn.active {
  background: rgb(15, 23, 42);
  color: rgb(52, 211, 153);
}
.calendar-view-btn.active::before {
  content: '';
  position: absolute;
  top: 0.125rem;
  left: 0.5rem;
  right: 0.5rem;
  height: 0.25rem;
  background: linear-gradient(90deg, rgb(16, 185, 129), rgb(5, 150, 105));
  border-radius: 9999px;
}
.calendar-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.375rem;
  padding: 0.55rem 0.95rem;
  border-radius: 0.7rem;
  border: 1px solid rgb(203, 213, 225);
  background: white;
  color: rgb(30, 41, 59);
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.calendar-action-btn:hover {
  border-color: rgb(16, 185, 129);
  background: rgb(240, 253, 250);
  color: rgb(5, 150, 105);
  box-shadow: 0 4px 10px -3px rgba(16, 185, 129, 0.25);
  transform: translateY(-1px);
}
.calendar-action-btn:focus-visible {
  outline: none;
  border-color: rgb(16, 185, 129);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.dark .calendar-action-btn {
  border-color: rgb(51, 65, 85);
  background: rgb(15, 23, 42);
  color: rgb(226, 232, 240);
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.35);
}
.dark .calendar-action-btn:hover {
  border-color: rgb(52, 211, 153);
  background: rgba(6, 78, 59, 0.25);
  color: rgb(110, 231, 183);
}
.calendar-action-btn--primary {
  border-color: rgb(16, 185, 129);
  background: linear-gradient(135deg, rgb(16, 185, 129), rgb(5, 150, 105));
  color: white;
  box-shadow: 0 6px 16px -6px rgba(16, 185, 129, 0.45);
}
.calendar-action-btn--primary:hover {
  border-color: rgb(5, 150, 105);
  background: linear-gradient(135deg, rgb(5, 150, 105), rgb(4, 120, 87));
  color: white;
}
.dark .calendar-action-btn--primary {
  border-color: rgb(52, 211, 153);
  color: rgb(240, 253, 250);
}
.calendar-action-btn--accent {
  border-color: rgb(147, 197, 253);
  background: linear-gradient(135deg, rgb(239, 246, 255), rgb(219, 234, 254));
  color: rgb(30, 64, 175);
}
.calendar-action-btn--accent:hover {
  border-color: rgb(96, 165, 250);
  background: linear-gradient(135deg, rgb(219, 234, 254), rgb(191, 219, 254));
  color: rgb(30, 58, 138);
}
.dark .calendar-action-btn--accent {
  border-color: rgb(59, 130, 246);
  background: linear-gradient(135deg, rgba(30, 64, 175, 0.3), rgba(30, 58, 138, 0.2));
  color: rgb(147, 197, 253);
}
.calendar-info-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.calendar-info-link__button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.calendar-info-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 9999px;
  border: 1px solid rgb(203, 213, 225);
  background: white;
  color: rgb(71, 85, 105);
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  transition: all 0.2s ease;
}
.calendar-info-link:hover .calendar-info-link__icon,
.calendar-info-link:focus-within .calendar-info-link__icon {
  border-color: rgb(16, 185, 129);
  background: rgb(236, 253, 245);
  color: rgb(5, 150, 105);
  box-shadow: 0 5px 14px -6px rgba(16, 185, 129, 0.45);
}
.dark .calendar-info-link__icon {
  border-color: rgb(51, 65, 85);
  background: rgb(15, 23, 42);
  color: rgb(203, 213, 225);
}
.dark .calendar-info-link:hover .calendar-info-link__icon,
.dark .calendar-info-link:focus-within .calendar-info-link__icon {
  border-color: rgb(52, 211, 153);
  background: rgba(6, 78, 59, 0.24);
  color: rgb(110, 231, 183);
}
.calendar-info-link__tip {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(0.125rem);
  white-space: normal;
  width: -moz-max-content;
  width: max-content;
  max-width: 18rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-radius: 0.5rem;
  border: 1px solid rgb(203, 213, 225);
  background: white;
  padding: 0.4rem 0.6rem;
  font-size: 0.69rem;
  font-weight: 600;
  color: rgb(71, 85, 105);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 8px 18px -10px rgba(15, 23, 42, 0.4);
  z-index: 15;
}
.calendar-info-link:hover .calendar-info-link__tip,
.calendar-info-link:focus-within .calendar-info-link__tip {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.calendar-info-link__tip-link {
  color: rgb(5, 150, 105);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.calendar-info-link__tip-link:hover {
  color: rgb(4, 120, 87);
}
.dark .calendar-info-link__tip {
  border-color: rgb(51, 65, 85);
  background: rgb(15, 23, 42);
  color: rgb(203, 213, 225);
}
.dark .calendar-info-link__tip-link {
  color: rgb(110, 231, 183);
}
.dark .calendar-info-link__tip-link:hover {
  color: rgb(167, 243, 208);
}
.calendar-jump-controls {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 1rem;
  padding: 0.875rem;
  border: 1px solid rgb(226, 232, 240);
  border-radius: 0.875rem;
  background: rgba(248, 250, 252, 0.7);
}
.dark .calendar-jump-controls {
  border-color: rgb(51, 65, 85);
  background: rgba(15, 23, 42, 0.35);
}
.calendar-jump-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.calendar-jump-field {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.5rem;
}
.calendar-jump-field--date {
  flex: 0 1 auto;
}
.calendar-jump-field--task {
  flex: 1 1 18rem;
  min-width: 15rem;
}
.calendar-jump-btn {
  white-space: nowrap;
}
.calendar-jump-input {
  min-height: 2.375rem;
  min-width: 9.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.7rem;
  border: 1px solid rgb(203, 213, 225);
  background: white;
  color: rgb(15, 23, 42);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.calendar-jump-input:focus {
  outline: none;
  border-color: rgb(16, 185, 129);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.dark .calendar-jump-input {
  border-color: rgb(51, 65, 85);
  background: rgb(15, 23, 42);
  color: rgb(226, 232, 240);
}
.dark .calendar-jump-input[type="date"] {
  color-scheme: dark;
}
.dark .calendar-jump-input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.9);
}
.calendar-schedule-card-title mark {
  background: rgba(16, 185, 129, 0.2);
  color: inherit;
  border-radius: 0.25rem;
  padding: 0 0.2rem;
}
.calendar-jump-field--task .calendar-jump-input {
  flex: 1 1 auto;
  min-width: 11rem;
}
.calendar-jump-status {
  min-height: 0;
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
  color: rgb(71, 85, 105);
  transition: opacity 0.2s ease, max-height 0.2s ease, margin-top 0.2s ease;
}
.dark .calendar-jump-status {
  color: rgb(148, 163, 184);
}
.calendar-jump-status.is-visible {
  margin-top: 0.15rem;
  max-height: 2.25rem;
  opacity: 1;
}
.calendar-jump-status.is-error {
  color: rgb(220, 38, 38);
}
.calendar-jump-status.is-success {
  color: rgb(5, 150, 105);
}
.dark .calendar-jump-status.is-error {
  color: rgb(248, 113, 113);
}
.dark .calendar-jump-status.is-success {
  color: rgb(52, 211, 153);
}
/* ===== NAVIGATION CONTROLS REDESIGN ===== */
.calendar-nav-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}
/* Enhanced nav controls in expand mode */
.calendar-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.625rem;
  border: 1.5px solid rgb(226, 232, 240);
  background: white;
  color: rgb(71, 85, 105);
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.dark .calendar-nav-btn {
  border-color: rgb(51, 65, 85);
  background: rgb(15, 23, 42);
  color: rgb(203, 213, 225);
}
.calendar-nav-btn:hover:not([aria-disabled="true"]) {
  border-color: rgb(16, 185, 129);
  background: rgb(240, 253, 250);
  transform: translateX(0);
  box-shadow: 0 2px 6px -1px rgba(16, 185, 129, 0.2);
}
.dark .calendar-nav-btn:hover:not([aria-disabled="true"]) {
  background: rgba(6, 78, 59, 0.15);
}
.calendar-nav-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Hide nav buttons in expand mode, show only the centered header */
/* Pulse animation for header updates */
@keyframes headerPulse {
  0% {
    box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.25), 0 8px 24px -4px rgba(16, 185, 129, 0.15);
  }
  50% {
    box-shadow: 0 6px 16px -2px rgba(16, 185, 129, 0.4), 0 12px 32px -4px rgba(16, 185, 129, 0.3);
  }
  100% {
    box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.25), 0 8px 24px -4px rgba(16, 185, 129, 0.15);
  }
}
.calendar-month-title {
  text-align: center;
  transition: all 0.3s ease;
}
/* Enhanced expand mode styling */
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.calendar-month-name {
  font-size: 1.875rem;
  font-weight: 700;
  background: linear-gradient(135deg, rgb(16, 185, 129), rgb(5, 150, 105));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}
.calendar-month-year {
  font-size: 1.25rem;
  color: rgb(100, 116, 139);
  font-weight: 600;
  transition: all 0.3s ease;
}
.dark .calendar-month-year {
  color: rgb(148, 163, 184);
}
/* ===== DISPLAY MODE INDICATOR ===== */
.calendar-mode-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: 9999px;
  border: 1px solid rgb(226, 232, 240);
  background: rgb(248, 250, 252);
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(71, 85, 105);
}
.dark .calendar-mode-indicator {
  border-color: rgb(51, 65, 85);
  background: rgb(30, 41, 59);
  color: rgb(203, 213, 225);
}
.calendar-mode-info-btn {
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgb(203, 213, 225);
  background: white;
  color: rgb(100, 116, 139);
  font-size: 0.625rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.dark .calendar-mode-info-btn {
  border-color: rgb(71, 85, 105);
  background: rgb(15, 23, 42);
  color: rgb(148, 163, 184);
}
.calendar-mode-info-btn:hover {
  border-color: rgb(16, 185, 129);
  background: rgb(240, 253, 250);
  color: rgb(5, 150, 105);
}
/* ===== MODE INFO MODAL ===== */
.calendar-mode-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}
.calendar-mode-modal.open {
  display: flex;
}
.calendar-mode-modal-content {
  max-width: 28rem;
  width: 90%;
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
}
.dark .calendar-mode-modal-content {
  background: rgb(15, 23, 42);
  border: 1px solid rgb(51, 65, 85);
}
.calendar-mode-modal-header {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgb(226, 232, 240);
}
.dark .calendar-mode-modal-header {
  border-bottom-color: rgb(51, 65, 85);
}
.calendar-mode-modal-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: rgb(15, 23, 42);
}
.dark .calendar-mode-modal-title {
  color: rgb(248, 250, 252);
}
.calendar-mode-modal-body {
  font-size: 0.875rem;
  color: rgb(71, 85, 105);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.dark .calendar-mode-modal-body {
  color: rgb(203, 213, 225);
}
.calendar-mode-modal-footer {
  display: flex;
  gap: 0.75rem;
}
.calendar-mode-modal-btn {
  flex: 1;
  padding: 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  transition: all 0.15s ease;
}
.calendar-mode-modal-btn-primary {
  background: linear-gradient(135deg, rgb(16, 185, 129), rgb(5, 150, 105));
  color: white;
  border: none;
}
.calendar-mode-modal-btn-primary:hover {
  background: linear-gradient(135deg, rgb(5, 150, 105), rgb(4, 120, 87));
  box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.3);
}
.calendar-mode-modal-btn-secondary {
  background: white;
  color: rgb(71, 85, 105);
  border: 1.5px solid rgb(226, 232, 240);
}
.dark .calendar-mode-modal-btn-secondary {
  background: rgb(30, 41, 59);
  color: rgb(203, 213, 225);
  border-color: rgb(51, 65, 85);
}
.calendar-mode-modal-btn-secondary:hover {
  border-color: rgb(16, 185, 129);
  background: rgb(240, 253, 250);
}
.dark .calendar-mode-modal-btn-secondary:hover {
  background: rgba(6, 78, 59, 0.15);
}
/* ===== SCHEDULE PANEL - LEFT SIDE SLIDING SHELF ===== */
.calendar-schedule-shelf {
  position: fixed;
  inset: 0;
  z-index: 40;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.24s;
}
.calendar-schedule-shelf.open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.calendar-schedule-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(6px) saturate(115%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.calendar-schedule-shelf.open .calendar-schedule-overlay {
  opacity: 1;
  pointer-events: auto;
}
.calendar-schedule-panel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  max-height: 100dvh;
  width: 28rem;
  max-width: 92vw;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
  border-right: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 0 1.25rem 1.25rem 0;
  box-shadow: 6px 0 30px -6px rgba(15, 23, 42, 0.22);
  transform: translateX(calc(-100% - 1.25rem));
  opacity: 0.98;
  pointer-events: auto;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, box-shadow 0.22s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dark .calendar-schedule-panel {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.96));
  border-right-color: rgba(16, 185, 129, 0.25);
}
.calendar-schedule-shelf.open .calendar-schedule-panel {
  transform: translateX(0);
  opacity: 1;
}
body.calendar-schedule-open main {
  filter: none;
}
body.calendar-schedule-open .calendar-month-view,
body.calendar-schedule-open .calendar-week-view {
  transition: opacity 0.22s ease;
  opacity: 0.96;
}
.calendar-schedule-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgb(226, 232, 240);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 8;
  background: inherit;
  flex-shrink: 0;
}
.calendar-schedule-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.25rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  overscroll-behavior: contain;
}
.dark .calendar-schedule-header {
  border-bottom-color: rgb(51, 65, 85);
}
.calendar-schedule-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: rgb(15, 23, 42);
}
.calendar-schedule-context {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.calendar-schedule-eyebrow {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgb(16, 185, 129);
}
.calendar-schedule-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
.calendar-schedule-context-item {
  border: 1px solid rgb(226, 232, 240);
  background: rgb(248, 250, 252);
  border-radius: 0.75rem;
  padding: 0.5rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.calendar-schedule-context-label {
  display: block;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgb(100, 116, 139);
  font-weight: 600;
}
.calendar-schedule-context-value {
  display: block;
  font-size: 0.78rem;
  color: rgb(15, 23, 42);
  font-weight: 600;
}
.calendar-schedule-scope {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.calendar-schedule-scope-btn {
  border: 1px solid rgb(203, 213, 225);
  background: white;
  color: rgb(51, 65, 85);
  border-radius: 999px;
  padding: 0.3rem 0.72rem;
  font-size: 0.72rem;
  font-weight: 600;
  transition: all 0.16s ease;
}
.calendar-schedule-scope-btn:hover {
  border-color: rgb(16, 185, 129);
  color: rgb(5, 150, 105);
  background: rgb(240, 253, 250);
}
.calendar-schedule-list {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.calendar-schedule-body [data-deploy-footer] {
  position: sticky;
  bottom: 0;
  z-index: 4;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.3) 0%, rgba(248, 250, 252, 0.92) 26%, rgba(248, 250, 252, 0.98) 100%);
  padding-top: 0.55rem;
}
.dark .calendar-schedule-body [data-deploy-footer] {
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.25) 0%, rgba(2, 6, 23, 0.92) 26%, rgba(2, 6, 23, 0.98) 100%);
}
.calendar-schedule-empty {
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px dashed rgb(203, 213, 225);
  background: rgb(248, 250, 252);
  color: rgb(71, 85, 105);
  font-size: 0.84rem;
}
.calendar-deploy-controls {
  margin-top: 0;
  border: 1px solid rgb(226, 232, 240);
  background: rgb(248, 250, 252);
  border-radius: 0.9rem;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.68rem;
  position: sticky;
  bottom: 0;
  z-index: 6;
}
.calendar-deploy-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}
.calendar-deploy-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.76rem;
  color: rgb(51, 65, 85);
  font-weight: 600;
}
.calendar-deploy-grid {
  display: grid;
  grid-template-columns: 1fr 0.5fr;
  gap: 0.55rem;
}
.calendar-deploy-label {
  display: inline-block;
  margin-bottom: 0.3rem;
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(100, 116, 139);
  font-weight: 700;
}
.calendar-deploy-strategy {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}
.calendar-deploy-strategy-btn {
  border: 1px solid rgb(203, 213, 225);
  background: white;
  color: rgb(51, 65, 85);
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
  font-size: 0.69rem;
  font-weight: 600;
  transition: all 0.16s ease;
}
.calendar-deploy-strategy-btn:hover {
  border-color: rgb(16, 185, 129);
  color: rgb(5, 150, 105);
}
.calendar-deploy-strategy-btn.is-active {
  border-color: rgb(16, 185, 129);
  background: rgba(16, 185, 129, 0.12);
  color: rgb(5, 150, 105);
}
.calendar-deploy-summary {
  border: 1px solid rgb(226, 232, 240);
  background: white;
  border-radius: 0.7rem;
  padding: 0.55rem;
  font-size: 0.73rem;
  color: rgb(51, 65, 85);
  line-height: 1.45;
}
.calendar-deploy-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.42rem;
}
.calendar-schedule-card.is-selected {
  border-color: rgb(16, 185, 129);
  box-shadow: 0 12px 24px -16px rgba(5, 150, 105, 0.55);
}
.calendar-preview-ghost {
  margin-top: 0.32rem;
  border: 1px dashed rgba(16, 185, 129, 0.62);
  background: rgba(16, 185, 129, 0.07);
  color: rgb(5, 150, 105);
  border-radius: 0.52rem;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.2rem 0.38rem;
}
.calendar-day-card--preview-conflict {
  box-shadow: inset 0 0 0 1.5px rgba(245, 158, 11, 0.6);
}
.calendar-day-card--deploy-conflict {
  box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0.64);
}
.calendar-apply-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 80;
  background: white;
  border: 1px solid rgb(226, 232, 240);
  border-radius: 0.9rem;
  box-shadow: 0 18px 34px -24px rgba(15, 23, 42, 0.55);
  padding: 0.65rem 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  max-width: min(92vw, 24rem);
}
.calendar-apply-toast-text {
  font-size: 0.78rem;
  color: rgb(30, 41, 59);
}
.calendar-apply-toast-undo {
  border: 1px solid rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.1);
  color: rgb(5, 150, 105);
  border-radius: 999px;
  padding: 0.24rem 0.62rem;
  font-size: 0.74rem;
  font-weight: 700;
}
.calendar-schedule-card {
  border: 1px solid rgb(226, 232, 240);
  background: white;
  border-radius: 0.95rem;
  padding: 0.85rem;
  box-shadow: 0 2px 9px -5px rgba(15, 23, 42, 0.22);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.calendar-schedule-card:hover {
  border-color: rgb(16, 185, 129);
  box-shadow: 0 8px 20px -14px rgba(5, 150, 105, 0.5);
  transform: translateY(-1px);
}
.calendar-schedule-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}
.calendar-schedule-card-title {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.2;
  font-weight: 700;
  color: rgb(15, 23, 42);
}
.calendar-schedule-card-subtitle {
  margin: 0.3rem 0 0;
  font-size: 0.74rem;
  color: rgb(100, 116, 139);
}
.calendar-schedule-favourite {
  border: 1px solid rgb(226, 232, 240);
  background: rgb(248, 250, 252);
  color: rgb(100, 116, 139);
  border-radius: 999px;
  min-width: 1.9rem;
  height: 1.9rem;
  font-size: 0.95rem;
  line-height: 1;
  transition: all 0.16s ease;
}
.calendar-schedule-favourite.is-favourite {
  color: rgb(16, 185, 129);
  border-color: rgba(16, 185, 129, 0.5);
  background: rgba(16, 185, 129, 0.08);
}
.calendar-schedule-metrics {
  margin-top: 0.7rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgb(241, 245, 249);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.48rem;
}
.calendar-schedule-card-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.calendar-schedule-pin {
  border: 1px solid rgb(226, 232, 240);
  background: rgb(248, 250, 252);
  color: rgb(100, 116, 139);
  border-radius: 999px;
  min-width: 1.9rem;
  height: 1.9rem;
  font-size: 0.78rem;
  line-height: 1;
  transition: all 0.16s ease;
}
.calendar-schedule-pin.is-pinned {
  color: rgb(16, 185, 129);
  border-color: rgba(16, 185, 129, 0.5);
  background: rgba(16, 185, 129, 0.08);
}
.calendar-drag-handle {
  margin-top: 0.58rem;
  border: 1px dashed rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.05);
  color: rgb(5, 150, 105);
  border-radius: 0.58rem;
  min-height: 1.9rem;
  width: 100%;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: grab;
}
.calendar-drag-handle:active {
  cursor: grabbing;
}
.calendar-day-card--drop-target {
  box-shadow: inset 0 0 0 1.4px rgba(16, 185, 129, 0.35);
}
.calendar-day-card--drop-hover {
  box-shadow: inset 0 0 0 2px rgba(16, 185, 129, 0.78);
}
.calendar-drag-badge {
  position: fixed;
  top: -9999px;
  left: -9999px;
  background: rgb(15, 23, 42);
  color: white;
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  font-size: 0.74rem;
  font-weight: 700;
  box-shadow: 0 8px 16px -10px rgba(15, 23, 42, 0.65);
}
.calendar-filter-panel {
  margin-top: 0;
  border: 1px solid rgb(226, 232, 240);
  background: white;
  border-radius: 0.85rem;
  padding: 0.58rem;
}
.calendar-filter-summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.76rem;
  font-weight: 700;
  color: rgb(51, 65, 85);
}
.calendar-filter-summary::-webkit-details-marker {
  display: none;
}
.calendar-filter-grid {
  margin-top: 0.58rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.calendar-filter-toggles {
  margin-top: 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.calendar-quick-access {
  margin-top: 0;
  border: 1px solid rgb(226, 232, 240);
  background: white;
  border-radius: 0.85rem;
  padding: 0.58rem;
}
.calendar-quick-access-title {
  margin: 0 0 0.42rem;
  font-size: 0.72rem;
  color: rgb(71, 85, 105);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.calendar-quick-chip-list {
  margin-bottom: 0.62rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.36rem;
}
.calendar-quick-chip {
  border: 1px solid rgb(203, 213, 225);
  background: rgb(248, 250, 252);
  color: rgb(51, 65, 85);
  border-radius: 999px;
  padding: 0.22rem 0.58rem;
  font-size: 0.68rem;
  font-weight: 600;
}
.calendar-quick-chip:hover {
  border-color: rgb(16, 185, 129);
  color: rgb(5, 150, 105);
}
.calendar-quick-chip-empty {
  font-size: 0.7rem;
  color: rgb(100, 116, 139);
}
.calendar-sim-panel {
  border: 1px solid rgb(226, 232, 240);
  background: white;
  border-radius: 0.72rem;
  padding: 0.5rem;
}
.calendar-sim-grid {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
.calendar-schedule-health {
  margin-top: 0.52rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.calendar-health-warning {
  border: 1px solid rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.12);
  color: rgb(146, 64, 14);
  border-radius: 999px;
  padding: 0.14rem 0.44rem;
  font-size: 0.65rem;
  font-weight: 700;
  cursor: help;
}
.calendar-preview-ghost--sim {
  border-style: solid;
  border-color: rgba(14, 165, 233, 0.48);
  background: rgba(14, 165, 233, 0.08);
  color: rgb(3, 105, 161);
}
.calendar-day-card--simulated {
  box-shadow: inset 0 0 0 1.5px rgba(14, 165, 233, 0.4);
}
.dark .calendar-filter-panel,
.dark .calendar-quick-access,
.dark .calendar-filter-summary,
.dark .calendar-quick-chip,
.dark .calendar-schedule-pin,
.dark .calendar-drag-handle,
.dark .calendar-sim-panel {
  background: rgb(15, 23, 42);
  border-color: rgb(51, 65, 85);
  color: rgb(226, 232, 240);
}
.dark .calendar-quick-chip-empty {
  color: rgb(148, 163, 184);
}
.calendar-schedule-action {
  border: 1px solid rgb(226, 232, 240);
  background: white;
  color: rgb(51, 65, 85);
  border-radius: 0.58rem;
  min-height: 2rem;
  font-size: 0.72rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.16s ease;
}
.calendar-schedule-action:hover {
  border-color: rgb(16, 185, 129);
  color: rgb(5, 150, 105);
  background: rgba(16, 185, 129, 0.09);
}
.calendar-schedule-action--primary {
  background: linear-gradient(135deg, rgb(16, 185, 129), rgb(5, 150, 105));
  border-color: transparent;
  color: white;
}
.calendar-schedule-action--primary:hover {
  color: white;
  background: linear-gradient(135deg, rgb(5, 150, 105), rgb(4, 120, 87));
}
.dark .calendar-schedule-context-item,
.dark .calendar-schedule-empty,
.dark .calendar-schedule-card,
.dark .calendar-schedule-search,
.dark .calendar-schedule-favourite,
.dark .calendar-schedule-metric,
.dark .calendar-schedule-action {
  background: rgb(15, 23, 42);
  border-color: rgb(51, 65, 85);
  color: rgb(226, 232, 240);
}
.dark .calendar-deploy-controls,
.dark .calendar-deploy-summary,
.dark .calendar-deploy-strategy-btn {
  background: rgb(15, 23, 42);
  border-color: rgb(51, 65, 85);
  color: rgb(226, 232, 240);
}
.dark .calendar-deploy-switch,
.dark .calendar-deploy-label {
  color: rgb(148, 163, 184);
}
.dark .calendar-preview-ghost {
  border-color: rgba(52, 211, 153, 0.65);
  background: rgba(16, 185, 129, 0.2);
  color: rgb(110, 231, 183);
}
.dark .calendar-apply-toast {
  background: rgb(15, 23, 42);
  border-color: rgb(51, 65, 85);
}
.dark .calendar-apply-toast-text {
  color: rgb(226, 232, 240);
}
@media (max-width: 1024px) {
  .calendar-schedule-panel {
    width: min(30rem, 92vw);
  }
}
@media (max-width: 768px) {
  .calendar-schedule-panel {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    height: min(92dvh, 52rem);
    border-right: none;
    border-top: 1px solid rgb(226, 232, 240);
    border-radius: 1rem 1rem 0 0;
    transform: translateY(105%);
  }

  .calendar-schedule-shelf.open .calendar-schedule-panel {
    transform: translateY(0);
  }

  .calendar-schedule-header {
    padding: 0.9rem 1rem 0.75rem;
  }

  .calendar-schedule-title {
    font-size: 1rem;
  }

  .calendar-schedule-body {
    padding: 0.9rem 1rem 1rem;
    gap: 0.65rem;
  }

  .calendar-schedule-scope {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .calendar-schedule-scope-btn {
    width: 100%;
    text-align: center;
  }

  .calendar-schedule-context-grid {
    grid-template-columns: 1fr;
  }

  .calendar-filter-grid,
  .calendar-deploy-grid {
    grid-template-columns: 1fr;
  }

  .calendar-deploy-preview-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .calendar-schedule-card {
    padding: 0.78rem;
  }

  .calendar-schedule-card-title {
    font-size: 0.88rem;
  }

  .calendar-schedule-card-subtitle {
    font-size: 0.72rem;
    line-height: 1.35;
  }

  .calendar-schedule-metrics {
    grid-template-columns: 1fr;
    gap: 0.38rem;
  }

  .calendar-schedule-card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .calendar-schedule-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendar-drag-handle {
    min-height: 2.1rem;
  }

  .calendar-preview-ghost {
    font-size: 0.64rem;
  }

  .calendar-deploy-actions {
    position: sticky;
    bottom: 0;
    background: inherit;
    padding-top: 0.25rem;
  }

  .calendar-apply-toast {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    max-width: none;
  }
}
.dark .calendar-schedule-context-label,
.dark .calendar-schedule-card-subtitle,
.dark .calendar-schedule-last-applied,
.dark .calendar-schedule-metric span {
  color: rgb(148, 163, 184);
}
.dark .calendar-schedule-context-value,
.dark .calendar-schedule-card-title,
.dark .calendar-schedule-metric strong {
  color: rgb(248, 250, 252);
}
.dark .calendar-schedule-scope-btn {
  border-color: rgb(51, 65, 85);
  background: rgb(15, 23, 42);
  color: rgb(203, 213, 225);
}
.dark .calendar-schedule-scope-btn.is-active {
  border-color: rgba(52, 211, 153, 0.45);
  background: rgba(16, 185, 129, 0.2);
  color: rgb(110, 231, 183);
}
.calendar-schedule-item {
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1.5px solid rgb(226, 232, 240);
  background: white;
  transition: all 0.2s ease;
}
.dark .calendar-schedule-item {
  border-color: rgb(51, 65, 85);
  background: rgb(30, 41, 59);
}
.calendar-schedule-item:hover {
  border-color: rgb(16, 185, 129);
  background: rgb(240, 253, 250);
  box-shadow: 0 2px 8px -2px rgba(16, 185, 129, 0.2);
}
.dark .calendar-schedule-item:hover {
  background: rgba(6, 78, 59, 0.15);
}
.calendar-schedule-item-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgb(15, 23, 42);
  margin-bottom: 0.625rem;
}
.dark .calendar-schedule-item-name {
  color: rgb(248, 250, 252);
}
.calendar-schedule-item-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(16, 185, 129);
  transition: all 0.15s ease;
}
.dark .calendar-schedule-item-link {
  color: rgb(52, 211, 153);
}
.calendar-schedule-item-link:hover {
  color: rgb(5, 150, 105);
  gap: 0.5rem;
}
.calendar-schedule-item-link svg {
  width: 0.75rem;
  height: 0.75rem;
}
.calendar-schedule-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(226, 232, 240);
}
.dark .calendar-schedule-actions {
  border-top-color: rgb(51, 65, 85);
}
/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 640px) {
  .calendar-month-container {
    padding: 1rem;
  }

  .calendar-month-grid {
    gap: 0.625rem;
  }

  .calendar-day-card {
    min-height: 9rem;
    border-radius: 0.75rem;
  }

  .calendar-day-header {
    padding: 0.75rem 0.75rem 0.5rem 0.75rem;
  }

  .calendar-day-number {
    font-size: 1.125rem;
  }

  .calendar-day-content {
    padding: 0 0.75rem 0.75rem 0.75rem;
  }

  .calendar-item {
    padding: 0.5rem;
    font-size: 0.75rem;
  }

  .calendar-singular-list {
    max-height: 8rem;
  }

  .calendar-month-name {
    font-size: 1.5rem;
  }

  .calendar-month-year {
    font-size: 1rem;
  }

  .calendar-nav-btn {
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
  }

  .calendar-jump-controls {
    padding: 0.625rem;
  }

  .calendar-jump-toolbar,
  .calendar-jump-field,
  .calendar-jump-field--date,
  .calendar-jump-field--task {
    width: 100%;
  }

  .calendar-jump-field {
    flex-wrap: wrap;
  }

  .calendar-jump-field .calendar-jump-input,
  .calendar-jump-field .calendar-action-btn {
    width: 100%;
  }

  .calendar-jump-field--task,
  .calendar-jump-field--task .calendar-jump-input {
    min-width: 0;
  }

  .calendar-schedule-panel {
    width: 100%;
    max-width: 100%;
  }
  
  /* View toggle remains visible on mobile - user can switch between month/week */
  .calendar-view-toggle {
    display: flex;
  }
  
  /* Hide mode indicator on small screens to save space */
  .calendar-mode-indicator {
    display: none;
  }
}
@media (max-width: 1024px) {
  .calendar-month-view .calendar-day-headers {
    display: none;
  }

  .calendar-month-view .calendar-month-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .calendar-month-view .calendar-day-card {
    min-height: 12.5rem;
    height: 12.5rem;
    max-height: 12.5rem;
  }

  .calendar-month-view .calendar-day-header {
    padding: 0.8rem 0.8rem 0.5rem 0.8rem;
  }
}
@media (max-width: 640px) {
  .calendar-month-view .calendar-month-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .calendar-month-view .calendar-day-card {
    min-height: 13.5rem;
    height: 13.5rem;
    max-height: 13.5rem;
  }

  .calendar-month-view .calendar-day-header {
    padding: 0.9rem 0.9rem 0.6rem 0.9rem;
  }

  .calendar-month-view .calendar-day-number {
    font-size: 1.2rem;
  }
}
@media (max-width: 768px) {
  /* View toggle stays visible on mobile */
  .calendar-view-toggle {
    width: 100%;
    justify-content: center;
  }
  
  .calendar-view-btn {
    flex: 1;
  }

  .calendar-info-link {
    margin-left: auto;
  }
  
  /* Stack controls vertically on mobile */
  .calendar-top-controls {
    flex-direction: column;
    gap: 0.75rem;
  }
}
/* ===== ACCESSIBILITY ===== */
.calendar-day-card:focus-visible {
  outline: 3px solid rgb(16, 185, 129);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.15);
}
.calendar-item:focus-visible {
  outline: 2px solid rgb(16, 185, 129);
  outline-offset: 2px;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .calendar-day-card,
  .calendar-item,
  .calendar-schedule-panel,
  .calendar-schedule-overlay,
  body.calendar-schedule-open main {
    transition: none;
  }
}
/* ===== WEEK VIEW SPECIFIC STYLES ===== */
/* Week strip - the horizontal day selector */
.calendar-week-strip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 1rem;
  border: 1px solid rgb(226, 232, 240);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.dark .calendar-week-strip {
  border-color: rgb(51, 65, 85);
  background: rgba(15, 23, 42, 0.4);
}
.calendar-week-strip-label {
  padding: 0 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(148, 163, 184);
}
.calendar-week-day-item {
  flex: 1;
  padding: 0.5rem;
  text-align: center;
  border-radius: 0.75rem;
  transition: all 0.2s ease;
  cursor: pointer;
}
.calendar-week-day-item:hover {
  background: rgba(16, 185, 129, 0.1);
}
.calendar-week-day-item.active {
  background: rgba(59, 130, 246, 0.15);
  color: rgb(29, 78, 216);
  font-weight: 600;
}
.dark .calendar-week-day-item.active {
  color: rgb(96, 165, 250);
}
/* Week view day cards are taller than month view */
.calendar-week-view .calendar-month-grid {
  gap: 0.75rem;
}
.calendar-week-view .calendar-week-card {
  min-height: 17.5rem;
  border-radius: 1rem;
}
.calendar-week-view .calendar-week-card-header {
  align-items: flex-start;
  gap: 0.45rem;
  min-height: 3.15rem;
  padding: 0.9rem 0.9rem 0.58rem 0.9rem;
}
.calendar-week-view .calendar-week-day-number {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  line-height: 1.02;
}
.calendar-week-view .calendar-week-day-name {
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgb(100, 116, 139);
}
.calendar-week-view .calendar-week-day-date {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: rgb(15, 23, 42);
}
.dark .calendar-week-view .calendar-week-day-date {
  color: rgb(248, 250, 252);
}
.calendar-week-view .calendar-week-day-badge {
  margin-top: 0.1rem;
  flex-shrink: 0;
  font-size: 0.62rem;
  line-height: 1;
  padding: 0.25rem 0.52rem;
  letter-spacing: 0.01em;
}
.calendar-week-view .calendar-day-content {
  padding: 0 0.9rem 0.9rem 0.9rem;
}
.calendar-week-view .calendar-empty-state {
  min-height: 7rem;
  justify-content: flex-start;
  padding-top: 1.1rem;
}
.calendar-week-view .calendar-empty-state-text {
  font-size: 0.78rem;
}
.calendar-week-view .calendar-singular-list {
  gap: 0.42rem;
  max-height: 11.25rem;
}
.calendar-week-view .calendar-item {
  padding: 0.46rem 0.54rem;
}
.calendar-week-view .calendar-item-title {
  line-height: 1.26;
}
@media (max-width: 1280px) {
  .calendar-week-view .calendar-week-card {
    min-height: 16.75rem;
  }

  .calendar-week-view .calendar-week-day-date {
    font-size: 1.72rem;
  }

  .calendar-week-view .calendar-week-day-badge {
    font-size: 0.58rem;
    padding: 0.22rem 0.46rem;
  }
}
@media (max-width: 1024px) {
  .calendar-week-view .calendar-month-grid,
  .calendar-week-grid {
    gap: 0.58rem;
  }

  .calendar-week-view .calendar-week-card {
    min-height: 15.25rem;
  }

  .calendar-week-view .calendar-week-card-header {
    padding: 0.78rem 0.72rem 0.5rem 0.72rem;
  }

  .calendar-week-view .calendar-day-content {
    padding: 0 0.72rem 0.72rem 0.72rem;
  }

  .calendar-week-view .calendar-week-day-date {
    font-size: 1.52rem;
  }
}
@media (max-width: 768px) {
  .calendar-week-view .calendar-month-container,
  .calendar-week-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .calendar-week-view .calendar-day-headers,
  .calendar-week-view .calendar-month-grid,
  .calendar-week-grid {
    /* 52rem gives 7 cols ~7.4rem each — readable on tablets without excess scroll */
    min-width: 52rem;
  }

  .calendar-week-view .calendar-month-grid,
  .calendar-week-grid {
    gap: 0.54rem;
  }

  .calendar-week-view .calendar-week-card {
    min-height: 13rem;
  }

  .calendar-week-view .calendar-week-day-name {
    font-size: 0.64rem;
  }

  .calendar-week-view .calendar-week-day-date {
    font-size: 1.3rem;
  }

  .calendar-week-view .calendar-singular-list {
    max-height: 9rem;
  }
}
@media (max-width: 480px) {
  .calendar-week-view .calendar-day-headers,
  .calendar-week-view .calendar-month-grid,
  .calendar-week-grid {
    min-width: 46rem;
  }

  .calendar-week-view .calendar-week-card {
    min-height: 12rem;
  }

  .calendar-week-view .calendar-week-day-date {
    font-size: 1.16rem;
  }

  .calendar-week-view .calendar-week-day-badge {
    font-size: 0.55rem;
    padding: 0.2rem 0.38rem;
  }
}
/* ===== WEEK VIEW: PHONE LAYOUT (≤640px) =====
 * Stack the 7 day-cards vertically (single column) so task/workout
 * names have full width and are readable on iPhone/small screens.
 * Must come AFTER the 480px block above so it takes precedence.
 */
@media (max-width: 640px) {
  /* Remove horizontal scroll — not needed in single-column layout */
  .calendar-week-view .calendar-month-container,
  .calendar-week-container {
    overflow-x: visible;
  }

  /* Hide the top Mon/Tue/…/Sun row — each card shows its own day name */
  .calendar-week-view .calendar-day-headers {
    display: none;
  }

  /* Single-column vertical stack, no forced min-width */
  .calendar-week-view .calendar-month-grid,
  .calendar-week-grid {
    min-width: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
  }

  /* Let cards grow to fit their content */
  .calendar-week-view .calendar-week-card {
    min-height: auto;
  }

  /* Allow item titles to wrap so full names are visible */
  .calendar-week-view .calendar-item-title {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  /* Allow grouped item labels to wrap */
  .calendar-week-view .calendar-grouped-item span {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  /* Remove max-height so all items can be seen by scrolling */
  .calendar-week-view .calendar-singular-list {
    max-height: none;
  }

  /* Keep the day header in a compact horizontal row */
  .calendar-week-view .calendar-week-card-header {
    flex-direction: row;
    align-items: center;
    min-height: auto;
    padding: 0.75rem;
  }

  .calendar-week-view .calendar-week-day-number {
    flex-direction: row;
    align-items: baseline;
    gap: 0.4rem;
  }

  .calendar-week-view .calendar-week-day-date {
    font-size: 1.25rem;
  }

  .calendar-week-view .calendar-week-day-name {
    font-size: 0.75rem;
  }

  .calendar-week-view .calendar-day-content {
    padding: 0 0.75rem 0.75rem 0.75rem;
  }
}
/* ===== MONTH VIEW: ITEM READABILITY ON MOBILE (≤640px) =====
 * In the 2-column grid on phones, cards are narrow (~120px content).
 * Allow item titles to wrap to 2 lines so more of the name shows.
 */
@media (max-width: 640px) {
  /* Slightly taller cards to accommodate 2-line titles */
  .calendar-month-view .calendar-day-card {
    min-height: 15rem;
    height: 15rem;
    max-height: 15rem;
  }

  /* Allow item title to show 2 lines instead of 1 */
  .calendar-month-view .calendar-item-title {
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: unset;
  }

  /* Allow grouped item labels to wrap to 2 lines */
  .calendar-month-view .calendar-grouped-item span {
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* Give singular list a bit more height for the taller items */
  .calendar-month-view .calendar-singular-list {
    max-height: 9rem;
  }
}
.calendar-preview-confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.08);
  color: rgb(15, 23, 42);
}
.dark .calendar-preview-confirm {
  border-color: rgba(45, 212, 191, 0.35);
  background: rgba(6, 95, 70, 0.35);
  color: rgb(226, 232, 240);
}
.calendar-preview-confirm-title {
  font-size: 0.85rem;
  font-weight: 700;
}
.calendar-preview-confirm-text {
  font-size: 0.78rem;
  color: rgb(71, 85, 105);
}
.dark .calendar-preview-confirm-text {
  color: rgb(203, 213, 225);
}
.calendar-preview-confirm-actions {
  display: flex;
  gap: 0.6rem;
}
.calendar-preview-confirm-secondary,
.calendar-preview-confirm-primary {
  border-radius: 0.6rem;
  padding: 0.55rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.calendar-preview-confirm-secondary {
  border: 1px solid rgba(15, 23, 42, 0.2);
  background: rgba(255, 255, 255, 0.7);
  color: rgb(30, 41, 59);
}
.dark .calendar-preview-confirm-secondary {
  border-color: rgba(148, 163, 184, 0.4);
  background: rgba(15, 23, 42, 0.7);
  color: rgb(226, 232, 240);
}
.calendar-preview-confirm-primary {
  border: none;
  background: linear-gradient(135deg, rgb(16, 185, 129), rgb(5, 150, 105));
  color: #ffffff;
}
/* ===== PRINT STYLES ===== */
@media print {
  .calendar-day-card {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    page-break-inside: avoid;
  }

  .calendar-heat-icons,
  .calendar-nav-controls,
  .calendar-view-toggle,
  .calendar-mode-indicator,
  .calendar-week-strip {
    display: none;
  }
}
/* ===== ACTIVITY STICKERS (MOTIVATION MODE) ===== */
.activity-sticker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px 0;
  min-height: 24px;
}
.activity-sticker {
  font-size: 14px;
  line-height: 1;
  cursor: default;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
  transition: transform 0.1s ease;
}
.activity-sticker:hover {
  transform: scale(1.3);
}
.activity-sticker--pending {
  opacity: 0.45;
  filter: grayscale(0.6);
}
.calendar-action-btn--active {
  border-color: rgb(234, 179, 8);
  background: linear-gradient(135deg, rgb(254, 249, 195), rgb(253, 230, 138));
  color: rgb(113, 63, 18);
}
.dark .calendar-action-btn--active {
  border-color: rgb(161, 98, 7);
  background: linear-gradient(135deg, rgba(113, 63, 18, 0.3), rgba(92, 45, 5, 0.2));
  color: rgb(253, 230, 138);
}
/* In motivation mode, the normal content is dimmed slightly */
.calendar-day-content.motivation-mode .calendar-singular-list,
.calendar-day-content.motivation-mode .space-y-3 {
  opacity: 0.4;
}
/* ===== WEEK VIEW: DISTINCT CONTAINER & GRID ===== */
/* Use a week-specific container so week & month can diverge freely */
.calendar-week-container {
  border-radius: 1.25rem;
  padding: 1.25rem;
  background: transparent;
}
.calendar-week-grid {
  gap: 0.875rem;
}
/* Week card: taller than month, with a stronger left-accent border */
.calendar-week-view .calendar-week-card {
  min-height: 17.5rem;
  border-radius: 1rem;
  border-left-width: 3px;
  border-left-color: rgba(148, 163, 184, 0.4);
}
/* Status-based left accent colours for week cards */
.calendar-week-view .calendar-day-card[data-status="today"] {
  border-left-color: rgb(16, 185, 129) !important;
}
.calendar-week-view .calendar-day-card[data-status="tomorrow"] {
  border-left-color: rgb(59, 130, 246) !important;
}
.calendar-week-view .calendar-day-card[data-status="past-incomplete"] {
  border-left-color: rgb(239, 68, 68) !important;
}
.calendar-week-view .calendar-day-card[data-status="past-complete"] {
  border-left-color: rgb(16, 185, 129) !important;
  opacity: 0.85;
}
/* Section divider between tasks and workouts in detailed week view */
.calendar-week-section-divider {
  height: 1px;
  margin: 0.5rem 0;
  border: none;
  background: linear-gradient(90deg, transparent 0%, rgb(226, 232, 240) 20%, rgb(226, 232, 240) 80%, transparent 100%);
}
.dark .calendar-week-section-divider {
  background: linear-gradient(90deg, transparent 0%, rgb(51, 65, 85) 20%, rgb(51, 65, 85) 80%, transparent 100%);
}
/* ===== WEEK STATS BAR ===== */
/* A compact bar above the slider that shows aggregate week activity */
.calendar-week-stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 1rem;
  border-radius: 0.875rem;
  border: 1px solid rgb(226, 232, 240);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  transition: opacity 0.3s ease;
}
.dark .calendar-week-stats-bar {
  border-color: rgb(51, 65, 85);
  background: rgba(15, 23, 42, 0.55);
}
.calendar-week-stats-bar__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.calendar-week-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(71, 85, 105);
  white-space: nowrap;
}
.dark .calendar-week-stat {
  color: rgb(148, 163, 184);
}
.calendar-week-stat__icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}
/* Mini bar chart in stats bar */
.calendar-week-stats-bar__chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 2rem;
  flex-shrink: 0;
}
.calendar-week-stats-bar__day {
  width: 0.5rem;
  height: 100%;
  display: flex;
  align-items: flex-end;
  border-radius: 0.25rem;
  background: rgb(241, 245, 249);
  overflow: hidden;
}
.dark .calendar-week-stats-bar__day {
  background: rgb(30, 41, 59);
}
.calendar-week-stats-bar__fill {
  width: 100%;
  border-radius: 0.25rem;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 2px;
}
.calendar-week-stats-bar__fill.heat-none {
  background: transparent;
  min-height: 0;
}
.calendar-week-stats-bar__fill.heat-low {
  background: rgb(110, 231, 183);
}
.calendar-week-stats-bar__fill.heat-med {
  background: rgb(245, 158, 11);
}
.calendar-week-stats-bar__fill.heat-high {
  background: rgb(239, 68, 68);
}
.dark .calendar-week-stats-bar__fill.heat-low {
  background: rgb(5, 150, 105);
}
/* ===== HEATMAP ICONS IN WEEK VIEW ===== */
/* Position icons in top-right of week cards */
.calendar-week-view .calendar-heat-icons {
  top: 0.5rem;
  right: 0.5rem;
  bottom: auto;
}
/* Make icons slightly larger in week view for better readability */
.calendar-week-view .calendar-icon {
  width: 1.1rem;
  height: 1.1rem;
  opacity: 0.75;
}
.calendar-week-view .calendar-icon-pr {
  color: rgb(251, 191, 36);
}
/* ===== WEEK VIEW RESPONSIVE: MEDIUM SCREENS (≤1024px) ===== */
@media (max-width: 1024px) {
  .calendar-week-grid {
    gap: 0.58rem;
  }

  .calendar-week-view .calendar-week-card {
    min-height: 15.25rem;
  }

  .calendar-week-view .calendar-week-card-header {
    padding: 0.78rem 0.72rem 0.5rem 0.72rem;
  }

  .calendar-week-view .calendar-day-content {
    padding: 0 0.72rem 0.72rem 0.72rem;
  }

  .calendar-week-view .calendar-week-day-date {
    font-size: 1.52rem;
  }
}
/* ===== WEEK VIEW RESPONSIVE: TABLET (≤768px) ===== */
/* Horizontal scroll with sticky headers */
@media (max-width: 768px) {
  .calendar-week-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.75rem 0;
  }

  .calendar-week-view .calendar-day-headers,
  .calendar-week-grid {
    min-width: 52rem;
  }

  .calendar-week-grid {
    gap: 0.54rem;
  }

  .calendar-week-view .calendar-week-card {
    min-height: 13rem;
  }

  .calendar-week-stats-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .calendar-week-stats-bar__chart {
    align-self: flex-end;
  }
}
/* ===== WEEK VIEW RESPONSIVE: PHONE (≤640px) ===== */
/* Single-column vertical stack so items are fully readable */
@media (max-width: 640px) {
  /* Remove horizontal scroll in single-column mode */
  .calendar-week-container {
    overflow-x: visible;
    padding: 0;
  }

  /* Hide the top Mon/Tue/.../Sun row — each card already shows its day name */
  .calendar-week-view .calendar-day-headers {
    display: none;
  }

  /* Single-column, no forced min-width */
  .calendar-week-grid {
    min-width: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
  }

  /* Cards grow to fit their content */
  .calendar-week-view .calendar-week-card {
    min-height: auto;
    border-left-width: 4px;
  }

  /* Allow item titles to wrap so full names are visible */
  .calendar-week-view .calendar-item-title {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  /* Allow grouped item labels to wrap */
  .calendar-week-view .calendar-grouped-item span {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  /* Remove max-height so all items are visible */
  .calendar-week-view .calendar-singular-list {
    max-height: none;
  }

  /* Compact horizontal header in phone single-column layout */
  .calendar-week-view .calendar-week-card-header {
    flex-direction: row;
    align-items: center;
    min-height: auto;
    padding: 0.75rem;
  }

  .calendar-week-view .calendar-week-day-number {
    flex-direction: row;
    align-items: baseline;
    gap: 0.4rem;
  }

  .calendar-week-view .calendar-week-day-date {
    font-size: 1.25rem;
  }

  .calendar-week-view .calendar-week-day-name {
    font-size: 0.75rem;
  }

  .calendar-week-view .calendar-day-content {
    padding: 0 0.75rem 0.75rem 0.75rem;
  }

  /* Stats bar: compact on phone */
  .calendar-week-stats-bar {
    padding: 0.5rem 0.75rem;
  }

  .calendar-week-stats-bar__chart {
    display: none;
  }
}
/* Day View Component - Modern, Inclusive & Smart Design */
/* Enhanced header with gradient accents and glass morphism */
.day-hub-header {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(248, 250, 252, 0.98) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 4px 24px -4px rgba(16, 185, 129, 0.08),
              0 2px 12px -2px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.day-view-wrapper {
  position: relative;
}
.day-secondary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.day-mode-segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: rgba(248, 250, 252, 0.9);
  padding: 0.25rem;
  box-shadow: 0 8px 22px -18px rgba(15, 23, 42, 0.4);
}
.dark .day-mode-segment {
  border-color: rgba(71, 85, 105, 0.75);
  background: rgba(15, 23, 42, 0.75);
}
.day-mode-segment__btn {
  border: 0;
  text-decoration: none;
  border-radius: 9999px;
  padding: 0.38rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgb(71, 85, 105);
  transition: all 0.2s ease;
}
.dark .day-mode-segment__btn {
  color: rgb(148, 163, 184);
}
.day-mode-segment__btn:hover {
  color: rgb(15, 23, 42);
  background: rgba(255, 255, 255, 0.8);
}
.dark .day-mode-segment__btn:hover {
  color: rgb(226, 232, 240);
  background: rgba(30, 41, 59, 0.7);
}
.day-mode-segment__btn.is-active {
  color: rgb(5, 150, 105);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.16) 0%, rgba(16, 185, 129, 0.08) 100%);
}
.dark .day-mode-segment__btn.is-active {
  color: rgb(52, 211, 153);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.23) 0%, rgba(16, 185, 129, 0.13) 100%);
}
.day-secondary-nav__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.day-today-btn-active {
  cursor: default;
  opacity: 1;
  pointer-events: none;
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.12);
  color: rgb(5, 150, 105);
}
.dark .day-today-btn-active {
  border-color: rgba(52, 211, 153, 0.45);
  background: rgba(16, 185, 129, 0.2);
  color: rgb(110, 231, 183);
}
.calendar-month-title {
  text-align: center;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.calendar-month-year {
  font-size: clamp(1.15rem, 2.4vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgb(15, 23, 42);
}
.dark .calendar-month-year {
  color: rgb(241, 245, 249);
}
.calendar-month-year-sub {
  margin-top: 0.2rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgb(100, 116, 139);
}
.dark .calendar-month-year-sub {
  color: rgb(148, 163, 184);
}
.day-main-progress {
  position: relative;
}
.day-main-progress-track {
  position: relative;
  height: 0.72rem;
  width: 100%;
  border-radius: 9999px;
  overflow: hidden;
  background: rgba(226, 232, 240, 0.95);
}
.dark .day-main-progress-track {
  background: rgba(51, 65, 85, 0.9);
}
.day-main-progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(90deg, rgb(148, 163, 184), rgb(100, 116, 139));
}
.day-main-progress-fill.is-gold { background: linear-gradient(90deg, rgb(251, 191, 36), rgb(245, 158, 11)); }
.day-main-progress-fill.is-blue { background: linear-gradient(90deg, rgb(59, 130, 246), rgb(37, 99, 235)); }
.day-main-progress-fill.is-emerald { background: linear-gradient(90deg, rgb(16, 185, 129), rgb(5, 150, 105)); }
.day-main-progress-fill.is-red { background: linear-gradient(90deg, rgb(239, 68, 68), rgb(220, 38, 38)); }
.day-main-progress-fill.is-slate { background: linear-gradient(90deg, rgb(148, 163, 184), rgb(100, 116, 139)); }
.day-main-progress-tooltip {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  border-radius: 0.625rem;
  background: rgb(15, 23, 42);
  color: rgb(241, 245, 249);
  padding: 0.48rem 0.62rem;
  font-size: 0.74rem;
  line-height: 1.3;
  box-shadow: 0 12px 24px -14px rgba(2, 6, 23, 0.8);
  opacity: 0;
  transform: translateY(-3px);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 18;
}
.dark .day-main-progress-tooltip {
  background: rgb(241, 245, 249);
  color: rgb(15, 23, 42);
}
.day-main-progress:hover .day-main-progress-tooltip,
.day-main-progress:focus-within .day-main-progress-tooltip {
  opacity: 1;
  transform: translateY(0);
}
#timed-focus-value {
  transition: color 0.25s ease;
}
#timed-focus-support {
  min-height: 1rem;
}
#day-main-content[data-time-theme-enabled="true"] .day-hub-header {
  box-shadow: 0 10px 36px -14px rgba(16, 185, 129, 0.35),
              0 14px 46px -30px rgba(14, 116, 144, 0.25);
}
#day-main-content[data-time-theme-enabled="true"] .day-main-progress-fill {
  box-shadow: 0 0 14px -4px rgba(16, 185, 129, 0.65);
}
#day-main-content[data-time-theme-enabled="true"] .day-focus-card {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease;
}
#day-main-content[data-time-theme-enabled="true"] .day-focus-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -20px rgba(16, 185, 129, 0.55);
}
#day-main-content[data-time-theme-enabled="false"] .day-hub-header::before,
#day-main-content[data-time-theme-enabled="false"] .day-status-bar::after,
#day-main-content[data-time-theme-enabled="false"] .animate-bounce-subtle,
#day-main-content[data-time-theme-enabled="false"] .animate-shimmer {
  animation: none !important;
}
#day-main-content[data-time-theme-enabled="false"] .day-hub-header {
  box-shadow: 0 4px 22px -18px rgba(2, 6, 23, 0.18);
}
.day-nav-leave-left {
  animation: dayNavLeaveLeft 180ms ease forwards;
}
.day-nav-leave-right {
  animation: dayNavLeaveRight 180ms ease forwards;
}
.day-nav-enter-left {
  animation: dayNavEnterLeft 210ms ease both;
}
.day-nav-enter-right {
  animation: dayNavEnterRight 210ms ease both;
}
@keyframes dayNavLeaveLeft {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-18px); }
}
@keyframes dayNavLeaveRight {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(18px); }
}
@keyframes dayNavEnterLeft {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes dayNavEnterRight {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .day-nav-leave-left,
  .day-nav-leave-right,
  .day-nav-enter-left,
  .day-nav-enter-right {
    animation: none !important;
  }
}
.dark .day-hub-header {
  background: linear-gradient(135deg, 
    rgba(15, 23, 42, 0.85) 0%, 
    rgba(30, 41, 59, 0.9) 100%);
  border: 1px solid rgba(71, 85, 105, 0.5);
  box-shadow: 0 4px 24px -4px rgba(16, 185, 129, 0.12),
              0 2px 12px -2px rgba(0, 0, 0, 0.2);
}
/* Animated gradient top border based on time theme */
.day-hub-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, 
    rgba(251, 191, 36, 0) 0%, 
    rgba(251, 191, 36, 0.8) 50%, 
    rgba(251, 191, 36, 0) 100%);
  opacity: 1;
  animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% {
    opacity: 0.7;
    transform: translateX(-10%);
  }
  50% {
    opacity: 1;
    transform: translateX(10%);
  }
}
/* Time-specific gradient colors */
.day-hub-header[data-time-theme="morning"]::before {
  background: linear-gradient(90deg, 
    rgba(251, 191, 36, 0) 0%, 
    rgba(251, 191, 36, 0.8) 50%, 
    rgba(251, 191, 36, 0) 100%);
}
.day-hub-header[data-time-theme="afternoon"]::before,
.day-hub-header[data-time-theme="midday"]::before {
  background: linear-gradient(90deg, 
    rgba(59, 130, 246, 0) 0%, 
    rgba(59, 130, 246, 0.8) 50%, 
    rgba(59, 130, 246, 0) 100%);
}
.day-hub-header[data-time-theme="evening"]::before {
  background: linear-gradient(90deg, 
    rgba(99, 102, 241, 0) 0%, 
    rgba(99, 102, 241, 0.8) 50%, 
    rgba(99, 102, 241, 0) 100%);
}
.day-hub-header[data-time-theme="night"]::before {
  background: linear-gradient(90deg, 
    rgba(16, 185, 129, 0) 0%, 
    rgba(16, 185, 129, 0.8) 50%, 
    rgba(16, 185, 129, 0) 100%);
}
/* Enhanced focus cards with hover effects */
.day-focus-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.day-focus-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0.75rem;
  background: radial-gradient(circle at top right, 
    rgba(16, 185, 129, 0.05) 0%, 
    transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.day-focus-card:hover::after {
  opacity: 1;
}
.day-focus-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -6px rgba(16, 185, 129, 0.15),
              0 4px 12px -3px rgba(0, 0, 0, 0.1);
}
/* Smart completion progress with pulsing animation */
.completion-dots-container {
  position: relative;
}
.completion-dot {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: pop-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) backwards;
}
.completion-dot.filled {
  animation: dot-fill 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) backwards,
             pulse-dot 2s ease-in-out infinite;
}
@keyframes pop-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes dot-fill {
  0% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes pulse-dot {
  0%, 100% {
    box-shadow: 0 0 0 0 currentColor;
  }
  50% {
    box-shadow: 0 0 0 2px currentColor;
    opacity: 0.8;
  }
}
/* Enhanced task cards with modern design */
.day-task-card {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.98) 0%, 
    rgba(248, 250, 252, 0.95) 100%);
}
.dark .day-task-card {
  background: linear-gradient(135deg, 
    rgba(15, 23, 42, 0.6) 0%, 
    rgba(30, 41, 59, 0.7) 100%);
}
.day-task-card:hover {
  transform: translateX(4px);
  box-shadow: -4px 0 12px -2px rgba(16, 185, 129, 0.15);
}
.day-task-card.completed {
  background: linear-gradient(135deg, 
    rgba(16, 185, 129, 0.08) 0%, 
    rgba(16, 185, 129, 0.04) 100%);
}
.dark .day-task-card.completed {
  background: linear-gradient(135deg, 
    rgba(16, 185, 129, 0.15) 0%, 
    rgba(16, 185, 129, 0.08) 100%);
}
/* Workout section with distinctive styling */
.day-workout-card {
  position: relative;
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.05) 0%, 
    rgba(59, 130, 246, 0.02) 100%);
  border-left: 4px solid rgb(59, 130, 246);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.dark .day-workout-card {
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.12) 0%, 
    rgba(59, 130, 246, 0.06) 100%);
}
.day-workout-card:hover {
  transform: translateX(6px);
  box-shadow: -6px 0 16px -4px rgba(59, 130, 246, 0.3);
  border-left-color: rgb(37, 99, 235);
}
/* Day overview section with ambient glow */
.day-overview-section {
  position: relative;
  overflow: hidden;
}
.day-overview-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, 
    rgba(251, 191, 36, 0.1) 0%, 
    transparent 70%);
  opacity: 0.6;
  animation: ambient-glow 8s ease-in-out infinite;
}
@keyframes ambient-glow {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translate(-10%, 10%) scale(1.1);
    opacity: 0.8;
  }
}
/* Smart action buttons with hover states */
.day-action-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.day-action-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}
.day-action-btn:hover::before {
  width: 300px;
  height: 300px;
}
.day-action-btn:active {
  transform: scale(0.97);
}
/* Enhanced status bar with progress animation */
.day-status-bar {
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.day-status-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%);
  animation: status-shimmer 3s ease-in-out infinite;
}
@keyframes status-shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
/* Day health section with attention-grabbing design */
.day-health-section {
  position: relative;
  overflow: hidden;
}
.day-health-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    rgba(234, 88, 12, 0) 0%, 
    rgba(234, 88, 12, 0.7) 50%, 
    rgba(234, 88, 12, 0) 100%);
  animation: health-pulse 2s ease-in-out infinite;
}
@keyframes health-pulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
/* Responsive enhancements */
@media (max-width: 640px) {
  .day-hub-header {
    backdrop-filter: blur(10px);
  }
  
  .day-task-card:hover {
    transform: translateX(2px);
  }
  
  .day-workout-card:hover {
    transform: translateX(3px);
  }
}
/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .day-hub-header::before,
  .completion-dot,
  .day-status-bar::after,
  .day-overview-section::before,
  .day-health-section::before {
    animation: none !important;
  }
  
  .day-task-card:hover,
  .day-workout-card:hover,
  .day-action-btn:hover {
    transform: none;
  }
}
/* Enhanced empty state with encouraging message */
.day-empty-state {
  position: relative;
  text-align: center;
  padding: 3rem 1.5rem;
  background: linear-gradient(135deg, 
    rgba(248, 250, 252, 0.5) 0%, 
    rgba(241, 245, 249, 0.3) 100%);
  border: 2px dashed rgba(203, 213, 225, 0.6);
  border-radius: 1rem;
  transition: all 0.3s ease;
}
.dark .day-empty-state {
  background: linear-gradient(135deg, 
    rgba(30, 41, 59, 0.3) 0%, 
    rgba(51, 65, 85, 0.2) 100%);
  border-color: rgba(71, 85, 105, 0.4);
}
.day-empty-state:hover {
  border-color: rgba(16, 185, 129, 0.5);
  background: linear-gradient(135deg, 
    rgba(16, 185, 129, 0.05) 0%, 
    rgba(16, 185, 129, 0.02) 100%);
}
.dark .day-empty-state:hover {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(135deg, 
    rgba(16, 185, 129, 0.1) 0%, 
    rgba(16, 185, 129, 0.05) 100%);
}
/* Today badge with pulse effect */
.today-badge {
  animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0);
  }
}
/* Quick stats cards */
.day-stat-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.9) 0%, 
    rgba(248, 250, 252, 0.95) 100%);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.dark .day-stat-card {
  background: linear-gradient(135deg, 
    rgba(30, 41, 59, 0.6) 0%, 
    rgba(51, 65, 85, 0.5) 100%);
  border: 1px solid rgba(71, 85, 105, 0.5);
}
.day-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(16, 185, 129, 0.6) 50%, 
    transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.day-stat-card:hover::before {
  opacity: 1;
}
.day-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.4);
}
/* Floating action hints */
.action-hint {
  position: relative;
  animation: float-hint 3s ease-in-out infinite;
}
@keyframes float-hint {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
/* ================================================================
   DAY VIEW REDESIGN — New Component Styles
   Week strip, progress ring, tabs, timeline, filter chips
   ================================================================ */
/* ===== HERO GRID ===== */
.day-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .day-hero-grid {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}
.day-hero-left {
  min-width: 0;
}
.day-hero-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
@media (max-width: 767px) {
  .day-hero-right {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    justify-content: center;
  }
}
/* ===== CIRCULAR PROGRESS RING ===== */
.day-progress-ring-wrap {
  position: relative;
  width: 8.5rem;
  height: 8.5rem;
  flex-shrink: 0;
}
.day-progress-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ring-track {
  stroke: rgba(226, 232, 240, 1);
}
.dark .ring-track {
  stroke: rgba(51, 65, 85, 0.8);
}
.ring-progress {
  stroke: rgb(59, 130, 246);
  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.ring-progress.ring-green {
  stroke: rgb(16, 185, 129);
}
/* Gold ring for fully completed day (GREEN status) */
.ring-progress.ring-gold {
  stroke: rgb(251, 191, 36);
}
/* Emerald ring for partially completed (ORANGE status) */
.ring-progress.ring-emerald {
  stroke: rgb(16, 185, 129);
}
/* Blue ring for today in-progress (BLUE status) */
.ring-progress.ring-blue {
  stroke: rgb(59, 130, 246);
}
.ring-progress.ring-orange {
  stroke: rgb(245, 158, 11);
}
.ring-progress.ring-red {
  stroke: rgb(239, 68, 68);
}
.ring-progress.ring-default {
  stroke: rgb(148, 163, 184);
}
.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ring-pct {
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1;
  color: rgb(15, 23, 42);
}
.dark .ring-pct {
  color: rgb(241, 245, 249);
}
.ring-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgb(100, 116, 139);
  margin-top: 0.25rem;
}
.dark .ring-label {
  color: rgb(148, 163, 184);
}
/* ===== QUICK STAT PILLS ===== */
.day-quick-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
@media (min-width: 768px) {
  .day-quick-stats {
    flex-direction: column;
    align-items: stretch;
    width: 8.5rem;
  }
}
.day-stat-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: 0.625rem;
  border: 1px solid rgba(226, 232, 240, 0.8);
  background: rgba(248, 250, 252, 0.9);
  padding: 0.375rem 0.625rem;
  min-width: 5.5rem;
}
.dark .day-stat-pill {
  border-color: rgba(51, 65, 85, 0.6);
  background: rgba(30, 41, 59, 0.5);
}
@media (min-width: 768px) {
  .day-stat-pill {
    min-width: 0;
    width: 100%;
  }
}
.stat-pill-val {
  font-size: 0.9375rem;
  font-weight: 700;
  color: rgb(15, 23, 42);
}
.dark .stat-pill-val {
  color: rgb(241, 245, 249);
}
.stat-pill-key {
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgb(100, 116, 139);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dark .stat-pill-key {
  color: rgb(148, 163, 184);
}
/* ===== WEEK CONTEXT STRIP ===== */
.day-week-strip {
  transition: border-color 0.2s ease;
}
.day-week-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  border-radius: 0.875rem;
  padding: 0.5rem 0.75rem;
  border: 1.5px solid transparent;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  min-width: 3.25rem;
  cursor: pointer;
}
.day-week-btn:hover {
  background: rgba(241, 245, 249, 0.9);
  border-color: rgba(203, 213, 225, 0.8);
}
.dark .day-week-btn:hover {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(71, 85, 105, 0.6);
}
.day-week-btn.active,
.day-week-btn[aria-current="page"] {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.06) 100%);
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 2px 8px -2px rgba(16, 185, 129, 0.25);
}
.dark .day-week-btn.active,
.dark .day-week-btn[aria-current="page"] {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, rgba(16, 185, 129, 0.1) 100%);
  border-color: rgba(16, 185, 129, 0.5);
}
.day-week-btn__name {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgb(100, 116, 139);
}
.dark .day-week-btn__name {
  color: rgb(148, 163, 184);
}
.day-week-btn.active .day-week-btn__name,
.day-week-btn[aria-current="page"] .day-week-btn__name {
  color: rgb(5, 150, 105);
}
/* ===== CONTAINED TAB WORKSPACE ===== */
.day-tabs-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 72rem;
}
.day-tab-panel > section,
.day-tab-panel > div {
  margin-left: auto;
  margin-right: auto;
  max-width: 72rem;
}
#tab-panel-overview .day-overview-section {
  max-height: 34rem;
  overflow-y: auto;
}
/* ===== UNIFIED ACTION SYSTEM ===== */
.day-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  padding: 0.5rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
.day-action-btn:hover {
  transform: translateY(-1px);
}
.day-action-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.28);
}
.day-action-btn--primary {
  background: linear-gradient(135deg, rgb(15, 23, 42), rgb(30, 41, 59));
  color: rgb(248, 250, 252);
}
.dark .day-action-btn--primary {
  background: linear-gradient(135deg, rgb(226, 232, 240), rgb(248, 250, 252));
  color: rgb(15, 23, 42);
}
.day-action-btn--secondary {
  border-color: rgba(203, 213, 225, 0.9);
  background: rgba(255, 255, 255, 0.95);
  color: rgb(15, 23, 42);
}
.dark .day-action-btn--secondary {
  border-color: rgba(71, 85, 105, 0.8);
  background: rgba(15, 23, 42, 0.7);
  color: rgb(226, 232, 240);
}
.day-action-btn--ghost {
  border-color: rgba(148, 163, 184, 0.5);
  background: transparent;
  color: rgb(71, 85, 105);
}
.dark .day-action-btn--ghost {
  border-color: rgba(100, 116, 139, 0.8);
  color: rgb(148, 163, 184);
}
.day-action-btn--danger {
  border-color: rgba(254, 202, 202, 0.9);
  background: rgba(255, 255, 255, 0.95);
  color: rgb(185, 28, 28);
}
.dark .day-action-btn--danger {
  border-color: rgba(127, 29, 29, 0.6);
  background: rgba(15, 23, 42, 0.65);
  color: rgb(252, 165, 165);
}
.day-action-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.35rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgb(5, 150, 105);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
}
/* ===== TASKS + WORKOUTS ROWS ===== */
.day-task-row,
.day-workout-row {
  position: relative;
  overflow: hidden;
}
.day-task-row::before,
.day-workout-row::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 60%);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.day-task-row:hover::before,
.day-workout-row:hover::before {
  opacity: 1;
}
/* ===== DRAWER TRANSITIONS ===== */
#task-drawer,
#workout-drawer {
  transition: opacity 0.2s ease;
}
#task-drawer .sm\:w-96,
#workout-drawer .sm\:w-\[28rem\] {
  transition: transform 0.24s ease;
}
#task-drawer.hidden .sm\:w-96,
#workout-drawer.hidden .sm\:w-\[28rem\] {
  transform: translateX(24px);
}
/* ===== TIMELINE DRAG AFFORDANCES ===== */
.timeline-event[draggable="true"] {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.timeline-slot.timeline-drop-over {
  border-radius: 0.6rem;
  background: rgba(16, 185, 129, 0.12);
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.35);
}
.timeline-event--workout {
  border-left: 3px solid rgba(16, 185, 129, 0.7);
}
.timeline-event--task {
  border-left: 3px solid rgba(59, 130, 246, 0.7);
}
.dark .day-week-btn.active .day-week-btn__name,
.dark .day-week-btn[aria-current="page"] .day-week-btn__name {
  color: rgb(52, 211, 153);
}
.day-week-btn__num {
  font-size: 1rem;
  font-weight: 700;
  color: rgb(30, 41, 59);
  line-height: 1.1;
}
.dark .day-week-btn__num {
  color: rgb(226, 232, 240);
}
.day-week-btn.active .day-week-btn__num,
.day-week-btn[aria-current="page"] .day-week-btn__num {
  color: rgb(5, 150, 105);
}
.dark .day-week-btn.active .day-week-btn__num,
.dark .day-week-btn[aria-current="page"] .day-week-btn__num {
  color: rgb(52, 211, 153);
}
/* ===== SECTION TABS ===== */
.day-tab-nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: 0.875rem 0.875rem 0 0;
  background: rgba(248, 250, 252, 0.8);
  border: 1px solid rgb(226, 232, 240);
  border-bottom: none;
  padding: 0.375rem 0.375rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.day-tab-nav::-webkit-scrollbar {
  display: none;
}
.dark .day-tab-nav {
  background: rgba(15, 23, 42, 0.7);
  border-color: rgb(51, 65, 85);
}
.day-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(71, 85, 105);
  border-radius: 0.625rem 0.625rem 0 0;
  border: 1.5px solid transparent;
  border-bottom: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  background: transparent;
  flex-shrink: 0;
}
.dark .day-tab-btn {
  color: rgb(148, 163, 184);
}
.day-tab-btn:hover {
  color: rgb(15, 23, 42);
  background: rgba(255, 255, 255, 0.7);
}
.dark .day-tab-btn:hover {
  color: rgb(226, 232, 240);
  background: rgba(30, 41, 59, 0.5);
}
.day-tab-btn.is-active,
.day-tab-btn[aria-selected="true"] {
  color: rgb(37, 99, 235);
  background: rgb(255, 255, 255);
  border-color: rgb(226, 232, 240);
  border-bottom-color: rgb(255, 255, 255);
  box-shadow: 0 -2px 8px -4px rgba(59, 130, 246, 0.2);
  margin-bottom: -1px;
  padding-bottom: calc(0.5rem + 1px);
}
.dark .day-tab-btn.is-active,
.dark .day-tab-btn[aria-selected="true"] {
  color: rgb(96, 165, 250);
  background: rgb(15, 23, 42);
  border-color: rgb(51, 65, 85);
  border-bottom-color: rgb(15, 23, 42);
}
.day-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: 9999px;
  background: rgba(226, 232, 240, 0.8);
  color: rgb(71, 85, 105);
}
.dark .day-tab-badge {
  background: rgba(51, 65, 85, 0.8);
  color: rgb(148, 163, 184);
}
.day-tab-btn.is-active .day-tab-badge,
.day-tab-btn[aria-selected="true"] .day-tab-badge {
  background: rgba(59, 130, 246, 0.15);
  color: rgb(37, 99, 235);
}
.dark .day-tab-btn.is-active .day-tab-badge,
.dark .day-tab-btn[aria-selected="true"] .day-tab-badge {
  background: rgba(59, 130, 246, 0.2);
  color: rgb(96, 165, 250);
}
/* Tab panel */
.day-tab-panel {
  animation: tabFadeIn 0.2s ease forwards;
}
.day-tab-panel.hidden {
  display: none;
}
@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ===== TASK FILTER CHIPS ===== */
.task-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  border: 1.5px solid rgba(203, 213, 225, 0.8);
  background: white;
  color: rgb(71, 85, 105);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.dark .task-filter-chip {
  border-color: rgba(71, 85, 105, 0.6);
  background: transparent;
  color: rgb(148, 163, 184);
}
.task-filter-chip:hover {
  border-color: rgb(148, 163, 184);
  color: rgb(15, 23, 42);
}
.dark .task-filter-chip:hover {
  border-color: rgb(100, 116, 139);
  color: rgb(226, 232, 240);
}
.task-filter-chip.is-active,
.task-filter-chip[aria-pressed="true"] {
  background: rgb(239, 246, 255);
  border-color: rgb(147, 197, 253);
  color: rgb(37, 99, 235);
}
.dark .task-filter-chip.is-active,
.dark .task-filter-chip[aria-pressed="true"] {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
  color: rgb(96, 165, 250);
}
/* ===== QUICK COMPLETE BUTTON ===== */
.quick-complete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid rgba(203, 213, 225, 0.8);
  background: white;
  color: rgb(203, 213, 225);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  flex-shrink: 0;
}
.dark .quick-complete-btn {
  border-color: rgba(71, 85, 105, 0.8);
  background: transparent;
  color: rgb(71, 85, 105);
}
.quick-complete-btn:hover {
  border-color: rgb(16, 185, 129);
  color: rgb(16, 185, 129);
  transform: scale(1.1);
}
.quick-complete-btn.is-done {
  border-color: rgb(16, 185, 129);
  background: rgb(16, 185, 129);
  color: white;
}
.quick-complete-btn.is-done:hover {
  background: rgb(5, 150, 105);
  transform: scale(1.05);
}
/* ===== TIMELINE VIEW ===== */
.day-timeline {
  max-height: 32rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
}
.timeline-hour-row {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 0;
  min-height: 3.5rem;
  position: relative;
}
.timeline-hour-row::before {
  content: '';
  position: absolute;
  left: 3.5rem;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(226, 232, 240, 0.7);
}
.dark .timeline-hour-row::before {
  background: rgba(51, 65, 85, 0.5);
}
.timeline-hour-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgb(148, 163, 184);
  padding-top: 0.5rem;
  text-align: right;
  padding-right: 0.75rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.dark .timeline-hour-label {
  color: rgb(100, 116, 139);
}
.timeline-slot {
  padding: 0.25rem 0.5rem;
  min-height: 3.5rem;
}
.timeline-event {
  margin-bottom: 0.25rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}
.timeline-event:hover {
  transform: translateX(2px);
  filter: brightness(0.95);
}
.timeline-event--task {
  background: rgba(239, 246, 255, 0.9);
  border: 1px solid rgba(147, 197, 253, 0.6);
  color: rgb(30, 64, 175);
  border-left: 3px solid rgb(59, 130, 246);
}
.dark .timeline-event--task {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.3);
  color: rgb(147, 197, 253);
  border-left-color: rgb(96, 165, 250);
}
.timeline-event--task.is-done {
  background: rgba(236, 253, 245, 0.9);
  border-color: rgba(110, 231, 183, 0.6);
  color: rgb(6, 78, 59);
  border-left-color: rgb(16, 185, 129);
  opacity: 0.8;
}
.dark .timeline-event--task.is-done {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.25);
  color: rgb(110, 231, 183);
  border-left-color: rgb(52, 211, 153);
}
.timeline-event--workout {
  background: rgba(236, 253, 245, 0.9);
  border: 1px solid rgba(110, 231, 183, 0.6);
  color: rgb(6, 78, 59);
  border-left: 3px solid rgb(16, 185, 129);
}
.dark .timeline-event--workout {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.25);
  color: rgb(110, 231, 183);
  border-left-color: rgb(52, 211, 153);
}
.timeline-now-indicator {
  position: relative;
  z-index: 10;
}
.timeline-now-indicator::after {
  content: '';
  position: absolute;
  left: 3.5rem;
  right: 0;
  top: 50%;
  height: 2px;
  background: rgb(239, 68, 68);
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
}
.timeline-now-dot {
  position: absolute;
  left: calc(3.5rem - 5px);
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(239, 68, 68);
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
  z-index: 11;
}
/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .day-tab-panel {
    animation: none;
  }
  .ring-progress {
    transition: none;
  }
  .day-week-btn,
  .quick-complete-btn,
  .timeline-event {
    transition: none;
  }
}
/* ===== ROOT-LEVEL TIME-OF-DAY THEMING ===== */
/* Applied by JS to <html data-time-theme="..."> based on user's local time */
:root[data-time-theme="morning"] .day-view-wrapper {
  --day-accent: 251 191 36; /* amber */
}
:root[data-time-theme="afternoon"] .day-view-wrapper,
:root[data-time-theme="midday"] .day-view-wrapper {
  --day-accent: 59 130 246; /* blue */
}
:root[data-time-theme="evening"] .day-view-wrapper {
  --day-accent: 99 102 241; /* indigo */
}
:root[data-time-theme="night"] .day-view-wrapper {
  --day-accent: 16 185 129; /* emerald */
}
/* Tab active indicator follows accent colour */
:root[data-time-theme="morning"] .day-tab-btn.is-active,
:root[data-time-theme="morning"] .day-tab-btn[aria-selected="true"] {
  color: rgb(180 83 9);
  box-shadow: 0 -2px 8px -4px rgba(251, 191, 36, 0.35);
}
:root[data-time-theme="evening"] .day-tab-btn.is-active,
:root[data-time-theme="evening"] .day-tab-btn[aria-selected="true"] {
  color: rgb(79 70 229);
  box-shadow: 0 -2px 8px -4px rgba(99, 102, 241, 0.35);
}
:root[data-time-theme="night"] .day-tab-btn.is-active,
:root[data-time-theme="night"] .day-tab-btn[aria-selected="true"] {
  color: rgb(5 150 105);
  box-shadow: 0 -2px 8px -4px rgba(16, 185, 129, 0.35);
}
/* Week strip active button follows accent */
:root[data-time-theme="morning"] .day-week-btn.active,
:root[data-time-theme="morning"] .day-week-btn[aria-current="page"] {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0.07) 100%);
  border-color: rgba(251, 191, 36, 0.55);
  box-shadow: 0 2px 8px -2px rgba(251, 191, 36, 0.3);
}
:root[data-time-theme="evening"] .day-week-btn.active,
:root[data-time-theme="evening"] .day-week-btn[aria-current="page"] {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.07) 100%);
  border-color: rgba(99, 102, 241, 0.55);
  box-shadow: 0 2px 8px -2px rgba(99, 102, 241, 0.3);
}
:root[data-time-theme="night"] .day-week-btn.active,
:root[data-time-theme="night"] .day-week-btn[aria-current="page"] {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, rgba(16, 185, 129, 0.09) 100%);
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 2px 8px -2px rgba(16, 185, 129, 0.3);
}
/* ===== FOCUS MODE ===== */
/* Activated by JS: #day-main-content[data-focus-mode="true"] */
#day-main-content[data-focus-mode="true"] .day-tab-nav {
  display: none;
}
#day-main-content[data-focus-mode="true"] #tab-panel-tasks,
#day-main-content[data-focus-mode="true"] #tab-panel-workouts,
#day-main-content[data-focus-mode="true"] #tab-panel-overview {
  display: none !important;
}
#day-main-content[data-focus-mode="true"] #tab-panel-timeline {
  display: block !important;
}
#day-main-content[data-focus-mode="true"] .day-timeline {
  max-height: calc(100vh - 14rem);
}
#day-main-content[data-focus-mode="true"] #focus-mode-btn {
  background: rgb(16 185 129 / 0.1);
  border-color: rgba(16, 185, 129, 0.5);
  color: rgb(5 150 105);
}
.dark #day-main-content[data-focus-mode="true"] #focus-mode-btn {
  background: rgb(16 185 129 / 0.15);
  border-color: rgba(16, 185, 129, 0.5);
  color: rgb(52 211 153);
}
/* ===== MICROINTERACTIONS ===== */
[data-task-item] {
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
[data-task-item]:hover {
  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}
[data-occurrence-item]:hover,
[data-workout-item]:hover {
  box-shadow: 0 4px 16px -4px rgba(16, 185, 129, 0.15);
  transform: translateY(-1px);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
/* Active press feedback */
[data-task-item]:active,
[data-occurrence-item]:active,
[data-workout-item]:active {
  transform: translateY(0);
  box-shadow: none;
}
/* Glow on focused task items */
[data-task-item]:focus-within {
  outline: 2px solid rgba(59, 130, 246, 0.4);
  outline-offset: 1px;
  border-radius: 0.25rem;
}
@media (prefers-reduced-motion: reduce) {
  [data-task-item],
  [data-occurrence-item],
  [data-workout-item] {
    transition: none;
  }

  [data-task-item]:hover,
  [data-occurrence-item]:hover,
  [data-workout-item]:hover {
    transform: none;
  }

  #day-main-content[data-focus-mode="true"] .day-timeline {
    max-height: 32rem;
  }
}
/* ===== ANIMATED TAB PILL INDICATOR ===== */
.day-tab-nav {
  position: relative; /* override existing - needed for pill */
}
.day-tab-pill {
  position: absolute;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, rgb(16, 185, 129), rgb(5, 150, 105));
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  will-change: transform, width;
}
@media (prefers-reduced-motion: reduce) {
  .day-tab-pill {
    transition: none;
  }
}
/* ===== SECTION TRANSITION ANIMATION ===== */
.day-tab-panel:not(.hidden) {
  animation: sectionEnter 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes sectionEnter {
  from {
    opacity: 0;
    transform: translateY(6px);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .day-tab-panel:not(.hidden) {
    animation: none;
  }
}
/* ===== TIMED FOCUS PULSE (active window) ===== */
[data-timed-focus-active="true"] {
  animation: timedFocusPulse 2.5s ease-in-out infinite;
}
@keyframes timedFocusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.3); }
  50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}
/* Countdown badge */
.timed-focus-countdown {
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgb(5, 150, 105);
  letter-spacing: 0.02em;
}
.dark .timed-focus-countdown {
  color: rgb(52, 211, 153);
}
/* ===== AI OPTIMISE MODAL ===== */
.ai-optimise-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn 0.15s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.ai-optimise-modal {
  width: 100%;
  max-width: 28rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(226, 232, 240, 0.8);
  background: white;
  padding: 1.5rem;
  box-shadow: 0 24px 48px -12px rgba(0,0,0,0.25);
  animation: scaleIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.dark .ai-optimise-modal {
  background: rgb(15, 23, 42);
  border-color: rgba(51, 65, 85, 0.8);
}
@keyframes scaleIn {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
/* ===== QUICK COMPLETE ANIMATION ===== */
@keyframes checkPop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.quick-complete-btn.is-done {
  animation: checkPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* ===== IMPROVED COMPLETED STATES ===== */
[data-task-item][data-task-status="done"] .task-title-text {
  text-decoration: line-through;
  opacity: 0.65;
}
[data-task-item][data-task-status="done"] {
  position: relative;
}
[data-task-item][data-task-status="done"]::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 0.375rem;
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.25);
}
/* Celebration micro-flash when completing a task */
@keyframes completeFlash {
  0%   { background-color: rgba(16, 185, 129, 0.18); }
  100% { background-color: transparent; }
}
[data-task-item].just-completed {
  animation: completeFlash 0.6s ease forwards;
}
/* ===== CUSTOM CHECKBOXES ===== */
.custom-cb-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.custom-cb-wrap input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.custom-cb-box {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 0.3125rem;
  border: 2px solid rgba(148, 163, 184, 0.8);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.dark .custom-cb-box {
  border-color: rgba(71, 85, 105, 0.9);
  background: transparent;
}
.custom-cb-wrap:hover .custom-cb-box {
  border-color: rgb(59, 130, 246);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.custom-cb-wrap:focus-within .custom-cb-box {
  outline: 2px solid rgb(59, 130, 246);
  outline-offset: 2px;
}
.custom-cb-wrap input:checked ~ .custom-cb-box {
  background: rgb(59, 130, 246);
  border-color: rgb(59, 130, 246);
}
.custom-cb-box svg {
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  width: 0.6875rem;
  height: 0.6875rem;
  stroke: white;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.custom-cb-wrap input:checked ~ .custom-cb-box svg {
  opacity: 1;
  transform: scale(1);
}
.custom-cb-label {
  font-size: 0.875rem;
  color: rgb(51, 65, 85);
  font-weight: 500;
}
.dark .custom-cb-label {
  color: rgb(203, 213, 225);
}
@media (prefers-reduced-motion: reduce) {
  .custom-cb-box,
  .custom-cb-box svg {
    transition: none;
  }
}
/* ===== PROGRESS BAR HOVER TOOLTIP ===== */
.progress-bar-wrap {
  position: relative;
}
.progress-bar-tooltip {
  position: absolute;
  top: -2.25rem;
  left: 50%;
  transform: translateX(-50%) scale(0.85);
  background: rgb(15, 23, 42);
  color: rgb(241, 245, 249);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 0.5rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 20;
}
.dark .progress-bar-tooltip {
  background: rgb(241, 245, 249);
  color: rgb(15, 23, 42);
}
.progress-bar-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgb(15, 23, 42);
}
.dark .progress-bar-tooltip::after {
  border-top-color: rgb(241, 245, 249);
}
.progress-bar-wrap:hover .progress-bar-tooltip {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
/* ===== TIME-OF-DAY TOGGLE BUTTON ===== */
.time-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  border: 1.5px solid rgba(203, 213, 225, 0.8);
  background: rgba(248, 250, 252, 0.9);
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(71, 85, 105);
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.dark .time-theme-toggle {
  border-color: rgba(71, 85, 105, 0.6);
  background: rgba(30, 41, 59, 0.6);
  color: rgb(148, 163, 184);
}
.time-theme-toggle:hover {
  border-color: rgb(99, 102, 241);
  color: rgb(67, 56, 202);
}
.dark .time-theme-toggle:hover {
  border-color: rgb(99, 102, 241);
  color: rgb(129, 140, 248);
}
.time-theme-toggle[aria-pressed="true"] {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.5);
  color: rgb(67, 56, 202);
}
.dark .time-theme-toggle[aria-pressed="true"] {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.5);
  color: rgb(129, 140, 248);
}
/* ===== TIMELINE QUICK COMPLETE ===== */
.timeline-event .timeline-qc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: transparent;
  opacity: 0.5;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.18s ease;
  margin-left: auto;
  padding: 0;
}
.timeline-event:hover .timeline-qc-btn {
  opacity: 1;
}
.timeline-event .timeline-qc-btn:hover {
  transform: scale(1.12);
  opacity: 1;
}
.timeline-event .timeline-qc-btn.is-done {
  background: currentColor;
  opacity: 1;
}
.timeline-event .timeline-qc-btn.is-done svg {
  stroke: white;
}
.dark .timeline-event .timeline-qc-btn.is-done svg {
  stroke: rgb(15, 23, 42);
}
/* ===== Status Bar Colour Classes ===== */
.day-status-gold {
  background: linear-gradient(90deg, rgb(251, 191, 36), rgb(245, 158, 11));
}
.day-status-blue {
  background: rgb(59, 130, 246);
}
.day-status-emerald {
  background: rgb(16, 185, 129);
}
/* ===== Golden Medal Badge ===== */
.day-gold-medal {
  animation: medal-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes medal-pop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
/* ===== Day Navigation Page Transition ===== */
.day-page-enter {
  animation: day-slide-in 0.25s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes day-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ===== Timeline: disable text selection ===== */
.day-timeline, .timeline-grid, .timeline-hour-row, .timeline-slot {
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}
/* ===== Workout Popup Close Button ===== */
#workout-popup .rounded-2xl {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes popup-fade-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ===== Live clock in Timed Focus ===== */
.timed-focus-clock {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
/* ===== Tab Slide Animations ===== */
.day-tab-panel {
  position: relative;
}
@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideOutToLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-20px);
  }
}
@keyframes slideOutToRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}
.tab-slide-in-left {
  animation: slideInFromLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.tab-slide-in-right {
  animation: slideInFromRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.tab-slide-out-left {
  animation: slideOutToLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.tab-slide-out-right {
  animation: slideOutToRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .tab-slide-in-left,
  .tab-slide-in-right,
  .tab-slide-out-left,
  .tab-slide-out-right {
    animation: none;
  }
}
/* ========== Greeting Animations ========== */
.animate-fade-in {
  animation: greeting-fade-in 0.6s ease-out forwards;
}
.animate-bounce-subtle {
  animation: bounce-subtle 2s ease-in-out infinite;
}
@keyframes greeting-fade-in {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes bounce-subtle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in,
  .animate-bounce-subtle {
    animation: none;
  }
}
/* ===== Progress Bar Shimmer Animation ===== */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.animate-shimmer {
  animation: shimmer 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .animate-shimmer {
    animation: none;
  }
}
/* ===== Timeline Drag and Drop Styles ===== */
.timeline-slot.timeline-drop-over {
  background-color: rgba(59, 130, 246, 0.1) !important;
  border: 2px dashed rgba(59, 130, 246, 0.4);
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}
.dark .timeline-slot.timeline-drop-over {
  background-color: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.5);
}
[data-draggable-task] {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
[data-draggable-task]:hover {
  transform: translateY(-1px);
}
[data-draggable-task][draggable="true"]:active {
  cursor: grabbing !important;
}
/* ===== Workspace Cohesion Overrides ===== */
.day-overview-scroll {
  max-height: 65vh;
  overflow-y: auto;
}
.day-task-row {
  cursor: pointer;
}
.day-task-row [data-quick-complete],
.day-task-row a,
.day-workout-row button,
.day-workout-row a {
  position: relative;
  z-index: 2;
}
.timeline-untimed-lane {
  margin-bottom: 0.75rem;
  border: 1px dashed rgba(148, 163, 184, 0.55);
  border-radius: 0.75rem;
  background: rgba(248, 250, 252, 0.75);
  padding: 0.55rem;
}
.dark .timeline-untimed-lane {
  border-color: rgba(71, 85, 105, 0.8);
  background: rgba(15, 23, 42, 0.45);
}
.timeline-untimed-head {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(100, 116, 139);
  margin-bottom: 0.45rem;
}
.dark .timeline-untimed-head {
  color: rgb(148, 163, 184);
}
.timeline-untimed-items {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.timeline-event--untimed {
  border-style: dashed;
}
.timeline-event.is-dragging {
  opacity: 0.58;
  transform: scale(0.98);
  cursor: grabbing !important;
}
.timeline-slot.timeline-drop-over {
  border-radius: 0.65rem;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(59, 130, 246, 0.1));
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.55), 0 0 0 1px rgba(16, 185, 129, 0.22);
}
.day-action-btn {
  min-height: 2.2rem;
  padding: 0.5rem 0.9rem;
  border-radius: 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 1px solid transparent;
}
.day-action-btn--primary {
  background: linear-gradient(135deg, rgb(16, 185, 129), rgb(5, 150, 105));
  color: white;
  border-color: rgba(5, 150, 105, 0.55);
}
.day-action-btn--secondary {
  background: rgba(255, 255, 255, 0.95);
  color: rgb(30, 41, 59);
  border-color: rgba(203, 213, 225, 0.8);
}
.dark .day-action-btn--secondary {
  background: rgba(15, 23, 42, 0.75);
  color: rgb(226, 232, 240);
  border-color: rgba(71, 85, 105, 0.85);
}
.day-action-btn--ghost {
  background: transparent;
  color: rgb(71, 85, 105);
  border-color: rgba(148, 163, 184, 0.55);
}
.dark .day-action-btn--ghost {
  color: rgb(148, 163, 184);
  border-color: rgba(100, 116, 139, 0.75);
}
.day-action-btn--danger {
  background: rgba(254, 242, 242, 0.95);
  color: rgb(153, 27, 27);
  border-color: rgba(252, 165, 165, 0.8);
}
.dark .day-action-btn--danger {
  background: rgba(127, 29, 29, 0.35);
  color: rgb(254, 202, 202);
  border-color: rgba(185, 28, 28, 0.7);
}
#task-drawer .sm\:w-96,
#workout-drawer .sm\:w-\[28rem\] {
  box-shadow: -12px 0 34px -22px rgba(15, 23, 42, 0.65);
}
/**
 * Detail/View Pages - Unified Component
 * 
 * Provides consistent layout, structure, and styling for all detail and view pages.
 * Key features:
 * - Prioritized metadata at the top
 * - Sticky action bar for primary actions
 * - Structured sections with clear visual separation
 * - Consistent spacing and hierarchy
 */
/* Container and Layout */
.detail-container {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 72rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
@media (min-width: 640px) {
    .detail-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .detail-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
/* Header Section - Metadata prioritized at top */
.detail-header {
    border-radius: 0.75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.5rem;
    --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);
    --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);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(226 232 240 / var(--tw-ring-opacity, 1));
}
.detail-header:is(.dark *) {
    background-color: rgb(15 23 42 / 0.4);
    --tw-ring-color: rgb(255 255 255 / 0.1);
}
.detail-header-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
body[data-easy-mode="on"] .detail-header-content {
    gap: 1.25rem;
}
@media (min-width: 768px) {
    .detail-header-content {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
}
.detail-header-meta {
    min-width: 0px;
    flex: 1 1 0%;
}
.detail-label {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.detail-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.detail-title {
    margin-top: 0.25rem;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.detail-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.detail-subtitle {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.detail-subtitle:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
/* Action Bar - Sticky and clearly visible */
.detail-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .detail-actions {
    gap: 0.75rem;
}
.detail-actions-sticky {
    position: sticky;
    top: 1rem;
    z-index: 10;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .detail-actions-sticky {
    gap: 0.75rem;
}
/* Action Buttons - Consistent styling */
.detail-btn-primary {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    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;
}
.detail-btn-primary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.detail-btn-primary:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.detail-btn-primary:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.detail-btn-secondary {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
    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;
}
.detail-btn-secondary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.detail-btn-secondary:is(.dark *) {
    border-color: rgb(255 255 255 / 0.2);
    background-color: rgb(255 255 255 / 0.05);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.detail-btn-secondary:hover:is(.dark *) {
    background-color: rgb(30 41 59 / 0.7);
}
.detail-btn-destructive {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    border-width: 1px;
    border-color: rgb(253 164 175 / 0.3);
    background-color: rgb(251 113 133 / 0.1);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(225 29 72 / var(--tw-text-opacity, 1));
    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;
}
.detail-btn-destructive:hover {
    background-color: rgb(251 113 133 / 0.15);
}
.detail-btn-destructive:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(254 205 211 / var(--tw-text-opacity, 1));
}
/* Content Sections - Structured with clear separation */
.detail-sections {
    margin-top: 1.5rem;
}
.detail-sections > :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));
}
.detail-section {
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.25rem;
    --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);
}
.detail-section:is(.dark *) {
    border-color: rgb(255 255 255 / 0.1);
    background-color: rgb(255 255 255 / 0.05);
}
.detail-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    padding-bottom: 0.75rem;
}
body[data-easy-mode="on"] .detail-section-header {
    gap: 1.25rem;
}
.detail-section-header:is(.dark *) {
    border-color: rgb(255 255 255 / 0.1);
}
.detail-section-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.detail-section-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.detail-section-content {
    margin-top: 1rem;
}
/* Grid Layouts for Sections */
.detail-grid-2 {
    display: grid;
    gap: 1rem;
}
body[data-easy-mode="on"] .detail-grid-2 {
    gap: 1.25rem;
}
@media (min-width: 1024px) {
    .detail-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.detail-grid-3 {
    display: grid;
    gap: 1rem;
}
body[data-easy-mode="on"] .detail-grid-3 {
    gap: 1.25rem;
}
@media (min-width: 1024px) {
    .detail-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.detail-grid-sidebar {
    display: grid;
    gap: 1rem;
}
body[data-easy-mode="on"] .detail-grid-sidebar {
    gap: 1.25rem;
}
@media (min-width: 1024px) {
    .detail-grid-sidebar {
        grid-template-columns: 1.2fr 0.8fr;
    }
}
/* Metadata Display - Definition List Styling */
.detail-metadata {
    display: grid;
    gap: 1rem;
}
body[data-easy-mode="on"] .detail-metadata {
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .detail-metadata {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.detail-metadata-item > :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));
}
.detail-metadata-label {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.detail-metadata-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.detail-metadata-value {
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.detail-metadata-value:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.detail-metadata-value-muted {
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.detail-metadata-value-muted:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
/* List Items */
.detail-list > :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));
}
.detail-list-item {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
    padding: 0.75rem;
}
.detail-list-item:is(.dark *) {
    border-color: rgb(255 255 255 / 0.1);
    background-color: rgb(255 255 255 / 0.05);
}
.detail-list-item-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.detail-list-item-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.detail-list-item-description {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.detail-list-item-description:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.detail-list-item-meta {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.detail-list-item-meta:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
/* Empty States */
.detail-empty {
    padding-top: 2rem;
    padding-bottom: 2rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.detail-empty:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.detail-empty-icon {
    margin-left: auto;
    margin-right: auto;
    height: 3rem;
    width: 3rem;
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.detail-empty-icon:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.detail-empty-text {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.detail-empty-text:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
/* Progress Indicators */
.detail-progress-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .detail-progress-bar {
    gap: 1rem;
}
.detail-progress-label {
    width: 6rem;
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.detail-progress-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.detail-progress-track {
    flex: 1 1 0%;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.detail-progress-track:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.detail-progress-fill {
    height: 0.5rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.detail-progress-value {
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.detail-progress-value:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
/* Status Badges */
.detail-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
}
.detail-badge-success {
    --tw-bg-opacity: 1;
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.detail-badge-success:is(.dark *) {
    background-color: rgb(6 78 59 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.detail-badge-warning {
    --tw-bg-opacity: 1;
    background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.detail-badge-warning:is(.dark *) {
    background-color: rgb(120 53 15 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.detail-badge-error {
    --tw-bg-opacity: 1;
    background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}
.detail-badge-error:is(.dark *) {
    background-color: rgb(136 19 55 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}
.detail-badge-info {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.detail-badge-info:is(.dark *) {
    background-color: rgb(30 58 138 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
/* Cards within sections */
.detail-card {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1rem;
}
.detail-card:is(.dark *) {
    border-color: rgb(255 255 255 / 0.1);
    background-color: rgb(15 23 42 / 0.4);
}
.detail-card-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.detail-card-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.detail-card-content {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.detail-card-content:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
/* Dividers */
.detail-divider {
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}
.detail-divider:is(.dark *) {
    border-color: rgb(255 255 255 / 0.1);
}
/* Responsive Utilities */
@media (max-width: 768px) {
    .detail-actions-sticky {
        position: static;
    }
    
    .detail-header-content {
        flex-direction: column;
    }
    
    .detail-actions {
        width: 100%;
        flex-wrap: wrap;
    }
    
    .detail-btn-primary,
    .detail-btn-secondary,
    .detail-btn-destructive {
        min-width: 120px;
        flex: 1 1 0%;
    }
}
/* Accessibility Enhancements */
.detail-btn-primary:focus-visible,
.detail-btn-secondary:focus-visible,
.detail-btn-destructive:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(52 211 153 / var(--tw-ring-opacity, 1));
    --tw-ring-offset-width: 2px;
}
.calendar-day-card.detail-btn-primary:focus-visible.ring-blue-500\/80,.calendar-day-card
.detail-btn-secondary:focus-visible.ring-blue-500\/80,.calendar-day-card
.detail-btn-destructive:focus-visible.ring-blue-500\/80 {
  border-color: rgb(16, 185, 129);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25),
              0 0 20px rgba(16, 185, 129, 0.15),
              0 8px 32px -8px rgba(16, 185, 129, 0.2);
  animation: pulse-today 2s ease-in-out infinite;
}
.calendar-day-card.detail-btn-primary:focus-visible.ring-emerald-500\/70,.calendar-day-card
.detail-btn-secondary:focus-visible.ring-emerald-500\/70,.calendar-day-card
.detail-btn-destructive:focus-visible.ring-emerald-500\/70 {
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15),
              0 4px 16px -4px rgba(16, 185, 129, 0.1);
}
.detail-btn-primary:focus-visible:is(.dark *),
.detail-btn-secondary:focus-visible:is(.dark *),
.detail-btn-destructive:focus-visible:is(.dark *) {
    --tw-ring-offset-color: #0f172a;
}
/* Loading States */
@keyframes pulse {
    50% {
        opacity: .5;
    }
}
.detail-loading {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    border-radius: 0.25rem;
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.detail-loading:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.detail-loading-title {
    height: 2rem;
    width: 16rem;
}
@keyframes pulse {
    50% {
        opacity: .5;
    }
}
.detail-loading-title {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    border-radius: 0.25rem;
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.detail-loading-title:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.detail-loading-text {
    height: 1rem;
    width: 100%;
}
@keyframes pulse {
    50% {
        opacity: .5;
    }
}
.detail-loading-text {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    border-radius: 0.25rem;
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.detail-loading-text:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.detail-loading-content {
    height: 8rem;
    width: 100%;
}
@keyframes pulse {
    50% {
        opacity: .5;
    }
}
.detail-loading-content {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    border-radius: 0.25rem;
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.detail-loading-content:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
/* Section Transitions */
.detail-section {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.detail-section: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);
}
/* Info Boxes */
.detail-info-box {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
    padding: 1rem;
}
.detail-info-box:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
    background-color: rgb(30 58 138 / 0.2);
}
.detail-info-box-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.detail-info-box-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}
.detail-info-box-content {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.detail-info-box-content:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}
.detail-warning-box {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
    padding: 1rem;
}
.detail-warning-box:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(146 64 14 / var(--tw-border-opacity, 1));
    background-color: rgb(120 53 15 / 0.2);
}
.detail-warning-box-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.detail-warning-box-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}
.detail-warning-box-content {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.detail-warning-box-content:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.detail-success-box {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
    padding: 1rem;
}
.detail-success-box:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
    background-color: rgb(6 78 59 / 0.2);
}
.detail-success-box-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}
.detail-success-box-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 250 229 / var(--tw-text-opacity, 1));
}
.detail-success-box-content {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.detail-success-box-content:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(167 243 208 / var(--tw-text-opacity, 1));
}
/* ============================================================
   STICKER CALENDAR — Motivation View
   Visually rewards completed workouts with sticker badges.
   ============================================================ */
/* ===== VIEW TOGGLE ===== */
.calendar-view-mode-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem;
  border-radius: 0.9rem;
  border: 1px solid rgb(226, 232, 240);
  background: rgba(248, 250, 252, 0.85);
  gap: 0.15rem;
}
.dark .calendar-view-mode-toggle {
  border-color: rgb(51, 65, 85);
  background: rgba(15, 23, 42, 0.5);
}
.calendar-view-mode-btn {
  padding: 0.45rem 0.95rem;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 0.65rem;
  border: 1px solid transparent;
  background: transparent;
  color: rgb(100, 116, 139);
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.calendar-view-mode-btn:hover {
  color: rgb(30, 41, 59);
  background: rgba(255, 255, 255, 0.7);
}
.dark .calendar-view-mode-btn:hover {
  color: rgb(226, 232, 240);
  background: rgba(51, 65, 85, 0.5);
}
.calendar-view-mode-btn.active {
  background: white;
  color: rgb(5, 150, 105);
  border-color: rgba(148, 163, 184, 0.4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.dark .calendar-view-mode-btn.active {
  background: rgb(30, 41, 59);
  color: rgb(52, 211, 153);
  border-color: rgb(51, 65, 85);
}
/* ===== STICKER VIEW PANEL ===== */
#sticker-view-panel {
  display: none;
}
#sticker-view-panel.sticker-view-active {
  display: block;
}
/* ===== MONTHLY TARGET BAR ===== */
.sticker-target-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-radius: 0.85rem;
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgb(226, 232, 240);
  margin-bottom: 1rem;
}
.dark .sticker-target-bar {
  background: rgba(15, 23, 42, 0.5);
  border-color: rgb(51, 65, 85);
}
.sticker-target-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(71, 85, 105);
  white-space: nowrap;
  flex-shrink: 0;
}
.dark .sticker-target-label {
  color: rgb(148, 163, 184);
}
.sticker-target-progress-wrap {
  flex: 1;
  height: 8px;
  border-radius: 99px;
  background: rgb(226, 232, 240);
  overflow: hidden;
  min-width: 60px;
}
.dark .sticker-target-progress-wrap {
  background: rgb(51, 65, 85);
}
.sticker-target-progress-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, rgb(16, 185, 129), rgb(5, 150, 105));
  transition: width 0.4s ease;
}
.sticker-target-progress-fill.near {
  background: linear-gradient(90deg, rgb(234, 179, 8), rgb(202, 138, 4));
}
.sticker-target-progress-fill.met {
  background: linear-gradient(90deg, rgb(16, 185, 129), rgb(52, 211, 153));
}
.sticker-target-count {
  font-size: 0.8125rem;
  font-weight: 700;
  color: rgb(30, 41, 59);
  white-space: nowrap;
  flex-shrink: 0;
}
.dark .sticker-target-count {
  color: rgb(226, 232, 240);
}
/* ===== PACK SELECTOR ===== */
.sticker-pack-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.sticker-pack-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(100, 116, 139);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sticker-pack-btn {
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 0.6rem;
  border: 1px solid rgb(226, 232, 240);
  background: white;
  color: rgb(71, 85, 105);
  cursor: pointer;
  transition: all 0.18s ease;
}
.dark .sticker-pack-btn {
  background: rgb(15, 23, 42);
  border-color: rgb(51, 65, 85);
  color: rgb(148, 163, 184);
}
.sticker-pack-btn:hover {
  border-color: rgb(52, 211, 153);
  color: rgb(5, 150, 105);
}
.sticker-pack-btn.active {
  border-color: rgb(16, 185, 129);
  background: rgb(240, 253, 250);
  color: rgb(5, 150, 105);
}
.dark .sticker-pack-btn.active {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgb(52, 211, 153);
  color: rgb(52, 211, 153);
}
/* ===== STICKER GRID — same structure as planning grid ===== */
.sticker-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
/* ===== STICKER DAY CELL ===== */
.sticker-day-cell {
  min-height: 90px;
  padding: 0.4rem;
  border: 1px solid rgb(241, 245, 249);
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: transparent;
  transition: background 0.15s ease;
}
.dark .sticker-day-cell {
  border-color: rgb(30, 41, 59);
}
.sticker-day-cell.sticker-today {
  border-color: rgb(16, 185, 129);
  background: rgba(16, 185, 129, 0.04);
}
.sticker-day-number {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(100, 116, 139);
  line-height: 1;
  margin-bottom: 0.15rem;
}
.dark .sticker-day-number {
  color: rgb(100, 116, 139);
}
.sticker-day-cell.sticker-today .sticker-day-number {
  color: rgb(5, 150, 105);
}
.sticker-placeholder {
  min-height: 90px;
}
/* ===== STICKER BADGE ===== */
.sticker-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  border: 2px solid transparent;
  flex-shrink: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.sticker-badge:hover,
.sticker-badge:focus {
  transform: scale(1.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  outline: none;
  z-index: 1;
}
/* Sticker colours by workout type */
.sticker-badge--legs {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.5);
}
.sticker-badge--push {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.45);
}
.sticker-badge--pull {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.45);
}
.sticker-badge--cardio {
  background: rgba(249, 115, 22, 0.12);
  border-color: rgba(249, 115, 22, 0.45);
}
.sticker-badge--core {
  background: rgba(234, 179, 8, 0.12);
  border-color: rgba(234, 179, 8, 0.45);
}
.sticker-badge--default {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.45);
}
/* Extra sticker when multiple sessions in one day */
.sticker-badge--extra {
  background: rgba(148, 163, 184, 0.15);
  border-color: rgba(148, 163, 184, 0.4);
  font-size: 0.65rem;
  font-weight: 700;
  color: rgb(71, 85, 105);
}
.dark .sticker-badge--extra {
  color: rgb(148, 163, 184);
}
/* ===== STICKER TOOLTIP ===== */
.sticker-tooltip {
  position: fixed;
  z-index: 9999;
  background: rgb(15, 23, 42);
  color: rgb(226, 232, 240);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.85rem;
  padding: 0.75rem 1rem;
  max-width: 220px;
  min-width: 160px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  font-size: 0.8125rem;
}
.sticker-tooltip.visible {
  opacity: 1;
}
.sticker-tooltip-title {
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: rgb(255, 255, 255);
  font-size: 0.875rem;
}
.sticker-tooltip-meta {
  font-size: 0.75rem;
  color: rgb(148, 163, 184);
}
/* ===== MOTIVATION INSIGHTS ===== */
.motivation-insights {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  margin-bottom: 1rem;
  border-radius: 0.85rem;
  border: 1px solid rgb(226, 232, 240);
  background: rgba(248, 250, 252, 0.9);
}
.dark .motivation-insights {
  border-color: rgb(51, 65, 85);
  background: rgba(15, 23, 42, 0.5);
}
.motivation-insights__stats {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.motivation-insights__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  min-width: 4rem;
}
.motivation-insights__stat-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: rgb(15, 23, 42);
  line-height: 1;
}
.dark .motivation-insights__stat-value {
  color: rgb(248, 250, 252);
}
.motivation-insights__stat-value--streak {
  color: rgb(217, 119, 6);
}
.dark .motivation-insights__stat-value--streak {
  color: rgb(251, 191, 36);
}
.motivation-insights__stat-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgb(100, 116, 139);
}
.motivation-insights__msg {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(71, 85, 105);
  padding-top: 0.5rem;
  border-top: 1px solid rgb(226, 232, 240);
}
.dark .motivation-insights__msg {
  color: rgb(203, 213, 225);
  border-top-color: rgb(51, 65, 85);
}
.motivation-insights__msg--gold {
  color: rgb(180, 83, 9);
}
.dark .motivation-insights__msg--gold {
  color: rgb(251, 191, 36);
}
.motivation-insights__msg--amber {
  color: rgb(146, 64, 14);
}
.dark .motivation-insights__msg--amber {
  color: rgb(252, 211, 77);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
  .sticker-badge {
    width: 1.65rem;
    height: 1.65rem;
    font-size: 0.95rem;
  }

  .sticker-day-cell {
    min-height: 70px;
    padding: 0.25rem;
  }

  .sticker-target-bar {
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
  }

  .motivation-insights {
    padding: 0.625rem 0.75rem;
  }

  .motivation-insights__stats {
    gap: 0.75rem;
  }
}
/* ========================================
   Training Structure Designer Component
   Premium Schedule Builder Redesign
   ======================================== */
/* Base Container */
.schedule-designer {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 80rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
@media (min-width: 640px) {
    .schedule-designer {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .schedule-designer {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
/* ========================================
   Schedule Type Selector
   ======================================== */
.schedule-type-selector {
    margin-bottom: 1.5rem;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.5rem;
    --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);
}
.schedule-type-selector:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    background-color: rgb(15 23 42 / 0.5);
}
.schedule-type-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .schedule-type-options {
    gap: 1rem;
}
@media (min-width: 640px) {
    .schedule-type-options {
        flex-direction: row;
    }
}
.schedule-type-option {
    position: relative;
    flex: 1 1 0%;
    cursor: pointer;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.schedule-type-option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
.schedule-type-card {
    display: block;
    width: 100%;
    border-radius: 0.75rem;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.25rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.schedule-type-card:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.schedule-type-card:hover {
    --tw-border-opacity: 1;
    border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
    --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);
}
.schedule-type-card:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(4 120 87 / var(--tw-border-opacity, 1));
}
.schedule-type-option input[type="radio"]:checked + .schedule-type-card {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --tw-gradient-from: #ecfdf5 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(236 253 245 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #fff var(--tw-gradient-to-position);
    --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);
}

.color-blind .schedule-type-option input[type="radio"]:checked + .schedule-type-card {
    --tw-border-opacity: 1;
    border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); /* Teal-500 */
}
.schedule-type-option input[type="radio"]:checked + .schedule-type-card:is(.dark *) {
    --tw-gradient-from: rgb(16 185 129 / 0.1) 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);
    --tw-gradient-to: #0f172a var(--tw-gradient-to-position);
}
.schedule-type-header {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .schedule-type-header {
    gap: 1rem;
}
.schedule-type-icon {
    display: flex;
    height: 2.5rem;
    width: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
    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: 300ms;
}
.schedule-type-icon:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.schedule-type-option input[type="radio"]:checked + .schedule-type-card .schedule-type-icon {
    --tw-bg-opacity: 1;
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .schedule-type-option input[type="radio"]:checked + .schedule-type-card .schedule-type-icon {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.schedule-type-option input[type="radio"]:checked + .schedule-type-card .schedule-type-icon:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.schedule-type-option input[type="radio"]:checked + .schedule-type-card .schedule-type-icon:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.schedule-type-option input[type="radio"]:checked + .schedule-type-card .schedule-type-icon:is(.dark *) {
    background-color: rgb(16 185 129 / 0.2);
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.schedule-type-title {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.schedule-type-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.schedule-type-description {
    font-size: 0.875rem;
    line-height: 1.25rem;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.schedule-type-description:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.schedule-type-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.schedule-type-badge:is(.dark *) {
    background-color: rgb(16 185 129 / 0.2);
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
/* Custom Day Count Controls */
.custom-day-controls {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .custom-day-controls {
    gap: 1rem;
}
.custom-day-input {
    width: 5rem;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.custom-day-input:focus {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 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(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);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
}
.custom-day-input:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.custom-day-label {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.custom-day-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
/* ========================================
   Template Library Modal/Section
   ======================================== */
.template-library-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.75rem;
    border-width: 2px;
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.color-blind .template-library-trigger {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
body[data-easy-mode="on"] .template-library-trigger {
    gap: 0.75rem;
}
.week-day-card:has(.template-library-trigger:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.template-library-trigger:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.template-library-trigger:hover {
    border-style: solid;
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.template-library-trigger:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(4 120 87 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.template-library-trigger:hover:is(.dark *) {
    background-color: rgb(16 185 129 / 0.1);
}
.template-library {
    margin-bottom: 1.5rem;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.5rem;
    --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);
}
.template-library:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    background-color: rgb(15 23 42 / 0.5);
}
.template-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}
body[data-easy-mode="on"] .template-grid {
    gap: 1.25rem;
}
@media (min-width: 768px) {
    .template-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .template-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.template-card {
    position: relative;
    cursor: pointer;
    border-radius: 0.75rem;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --tw-gradient-from: #f8fafc var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #fff var(--tw-gradient-to-position);
    padding: 1rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.template-card:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-gradient-from: rgb(30 41 59 / 0.5) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #0f172a var(--tw-gradient-to-position);
}
.template-card {
    /* Note: Add 'group' class directly in HTML for group-hover functionality */
}
.template-card: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));
    --tw-border-opacity: 1;
    border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
    --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);
}
.color-blind .template-card:hover {
    --tw-border-opacity: 1;
    border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); /* Teal-500 */
}
.template-card:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(5 150 105 / var(--tw-border-opacity, 1));
}
.template-card-header {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .template-card-header {
    gap: 1rem;
}
.template-card-title {
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.template-card-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.template-card-badge {
    flex-shrink: 0;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.template-card-badge:is(.dark *) {
    background-color: rgb(59 130 246 / 0.2);
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.template-card-description {
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.template-card-description:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.template-preview-days > :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));
}
.template-preview-day {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
}
body[data-easy-mode="on"] .template-preview-day {
    gap: 0.75rem;
}
.template-preview-day-label {
    min-width: 60px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.template-preview-day-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.template-preview-day-workout {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.template-preview-day-workout:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.template-select-btn {
    margin-top: 0.75rem;
    width: 100%;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.color-blind .template-select-btn {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
.color-blind .template-select-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1)); /* Teal-700 */
}
.group:hover .template-select-btn {
    opacity: 1;
}
.template-select-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}
/* ========================================
   Enhanced Day Cards
   ======================================== */
.schedule-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}
body[data-easy-mode="on"] .schedule-grid {
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .schedule-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .schedule-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}
.schedule-grid.custom-schedule {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 640px) {
    .schedule-grid.custom-schedule {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .schedule-grid.custom-schedule {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (min-width: 1280px) {
    .schedule-grid.custom-schedule {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}
.schedule-grid.daily-schedule {
    margin-left: auto;
    margin-right: auto;
    max-width: 28rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.schedule-day-card {
    overflow: hidden;
    border-radius: 0.75rem;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --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);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.schedule-day-card:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    background-color: rgb(15 23 42 / 0.5);
}
.schedule-day-card:hover {
    --tw-border-opacity: 1;
    border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
    --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);
}
.schedule-day-card:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(4 120 87 / var(--tw-border-opacity, 1));
}
.schedule-day-card.has-workouts {
    --tw-border-opacity: 1;
    border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}
.schedule-day-card.has-workouts:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
}
.schedule-day-card-header {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: #f8fafc var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #f1f5f9 var(--tw-gradient-to-position);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.schedule-day-card-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-gradient-from: rgb(30 41 59 / 0.5) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #1e293b var(--tw-gradient-to-position);
}
.schedule-day-card.has-workouts .schedule-day-card-header {
    --tw-border-opacity: 1;
    border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
    --tw-gradient-from: #ecfdf5 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(236 253 245 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(209 250 229 / 0.5) var(--tw-gradient-to-position);
}
.schedule-day-card.has-workouts .schedule-day-card-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
    --tw-gradient-from: rgb(16 185 129 / 0.1) 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);
    --tw-gradient-to: rgb(16 185 129 / 0.05) var(--tw-gradient-to-position);
}
.schedule-day-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.schedule-day-title {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.schedule-day-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.schedule-day-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.schedule-day-badge:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.schedule-day-card.has-workouts .schedule-day-badge {
    --tw-bg-opacity: 1;
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.schedule-day-card.has-workouts .schedule-day-badge:is(.dark *) {
    background-color: rgb(16 185 129 / 0.2);
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.schedule-day-badge-dot {
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 9999px;
    background-color: currentColor;
}
/* Drop Zone */
.schedule-drop-zone {
    min-height: 220px;
}
.schedule-drop-zone > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.schedule-drop-zone {
    padding: 0.75rem;
}
.schedule-drop-zone.drag-over {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --tw-gradient-from: #ecfdf5 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(236 253 245 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(209 250 229 / 0.5) var(--tw-gradient-to-position);
}
.schedule-drop-zone.drag-over:is(.dark *) {
    --tw-gradient-from: rgb(16 185 129 / 0.1) 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);
    --tw-gradient-to: rgb(16 185 129 / 0.2) var(--tw-gradient-to-position);
}
.schedule-drop-zone.drag-over::before {
    content: '+ Drop workout here';
    pointer-events: none;
    position: absolute;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .schedule-drop-zone.drag-over::before {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.schedule-drop-zone.drag-over:is(.dark *))::before {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.schedule-drop-zone.drag-over:is(.dark *))::before {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.schedule-drop-zone.drag-over:is(.dark *)::before {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
/* Rest Day State */
.schedule-day-rest-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
}
.schedule-day-rest-icon {
    margin-bottom: 0.75rem;
    height: 3rem;
    width: 3rem;
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.schedule-day-rest-icon:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.schedule-day-rest-label {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.schedule-day-rest-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.schedule-day-rest-action {
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .schedule-day-rest-action {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.schedule-day-rest-action:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.schedule-day-rest-action:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.schedule-day-rest-action:hover {
    text-decoration-line: underline;
}
.schedule-day-rest-action:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
/* ========================================
   Workout Chips in Schedule
   ======================================== */
.schedule-workout-chip {
    position: relative;
    display: flex;
    cursor: move;
    align-items: center;
    gap: 0.625rem;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --tw-gradient-from: #d1fae5 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(209 250 229 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #ecfdf5 var(--tw-gradient-to-position);
    padding: 0.75rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.schedule-workout-chip:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(4 120 87 / var(--tw-border-opacity, 1));
    --tw-gradient-from: rgb(16 185 129 / 0.15) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(16 185 129 / 0.05) var(--tw-gradient-to-position);
}
.schedule-workout-chip {
    /* Note: Add 'group' class directly in HTML for group-hover functionality */
}
.schedule-workout-chip:hover {
    --tw-border-opacity: 1;
    border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
    --tw-gradient-from: #a7f3d0 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(167 243 208 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #d1fae5 var(--tw-gradient-to-position);
    --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);
}
.color-blind .schedule-workout-chip:hover {
    --tw-border-opacity: 1;
    border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); /* Teal-500 */
}
.schedule-workout-chip:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(5 150 105 / var(--tw-border-opacity, 1));
    --tw-gradient-from: rgb(16 185 129 / 0.25) 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);
    --tw-gradient-to: rgb(16 185 129 / 0.1) var(--tw-gradient-to-position);
}
.schedule-workout-chip.dragging {
    --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));
    opacity: 0.4;
}
.schedule-workout-chip-drag-handle {
    flex-shrink: 0;
    --tw-text-opacity: 1;
    color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}

.color-blind .schedule-workout-chip-drag-handle {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.schedule-workout-chip-content {
    min-width: 0px;
    flex: 1 1 0%;
}
.schedule-workout-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}
.schedule-workout-chip-name:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 250 229 / var(--tw-text-opacity, 1));
}
.schedule-workout-chip-meta {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.schedule-workout-chip-meta:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.schedule-workout-chip-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.group:hover .schedule-workout-chip-actions {
    opacity: 1;
}
.schedule-workout-chip-action {
    border-radius: 0.25rem;
    padding: 0.25rem;
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
    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;
}
.schedule-workout-chip-action:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));
}
.schedule-workout-chip-action:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.schedule-workout-chip-action:hover:is(.dark *) {
    background-color: rgb(16 185 129 / 0.2);
}
.schedule-workout-chip-remove:hover {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.schedule-workout-chip-remove:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
/* Workout Preview Tooltip */
.auth-fields-block.workout-preview-tooltip {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
        pointer-events: none;
    }
.profile-phone-country-dropdown.workout-preview-tooltip {
        display: none;
    }
#profile-phone-country.workout-preview-tooltip {
        display: none;
    }
.workout-preview-tooltip {
    position: absolute;
    top: -0.5rem;
    left: 100%;
    z-index: 50;
    margin-left: 0.5rem;
    display: none;
    width: 16rem;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
    padding: 0.75rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --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);
}
#task-drawer.workout-preview-tooltip .sm\:w-96,
#workout-drawer.workout-preview-tooltip .sm\:w-\[28rem\] {
  transform: translateX(24px);
}
.day-tab-panel.workout-preview-tooltip {
  display: none;
}
.day-tab-panel:not(.workout-preview-tooltip) {
  animation: sectionEnter 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .day-tab-panel:not(.workout-preview-tooltip) {
    animation: none;
  }
}
.group:hover .workout-preview-tooltip {
    display: block;
}
.workout-preview-tooltip:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.workout-preview-tooltip::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 1rem;
    border-width: 8px;
    border-color: transparent;
    --tw-border-opacity: 1;
    border-right-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
}
.workout-preview-tooltip:is(.dark *)::before {
    --tw-border-opacity: 1;
    border-right-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
}
.workout-preview-title {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
}
.workout-preview-stat {
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
body[data-easy-mode="on"] .workout-preview-stat {
    gap: 0.75rem;
}
/* ========================================
   Intelligence Panel
   ======================================== */
.schedule-intelligence-panel {
    margin-top: 1.5rem;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.5rem;
    --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);
}
.schedule-intelligence-panel:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    background-color: rgb(15 23 42 / 0.5);
}
.intelligence-panel-header {
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .intelligence-panel-header {
    gap: 1rem;
}
.intelligence-panel-icon {
    display: flex;
    height: 2.5rem;
    width: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --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);
    --tw-gradient-to: #059669 var(--tw-gradient-to-position);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.intelligence-panel-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.intelligence-panel-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.intelligence-grid {
    margin-bottom: 1.25rem;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}
body[data-easy-mode="on"] .intelligence-grid {
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .intelligence-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .intelligence-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.intelligence-stat {
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --tw-gradient-from: #f8fafc var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #fff var(--tw-gradient-to-position);
    padding: 1rem;
}
.intelligence-stat:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-gradient-from: rgb(30 41 59 / 0.5) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #0f172a var(--tw-gradient-to-position);
}
.intelligence-stat-label {
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.intelligence-stat-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.intelligence-stat-value {
    margin-bottom: 0.25rem;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .intelligence-stat-value {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.intelligence-stat-value:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.intelligence-stat-value:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.intelligence-stat-value:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.intelligence-stat-description {
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.intelligence-stat-description:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.intelligence-insights > :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));
}

.calendar-day-content.motivation-mode .intelligence-insights {
  opacity: 0.4;
}
.intelligence-insight {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-radius: 0.5rem;
    padding: 0.75rem;
}
body[data-easy-mode="on"] .intelligence-insight {
    gap: 1rem;
}
.intelligence-insight.warning {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.intelligence-insight.warning:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(146 64 14 / var(--tw-border-opacity, 1));
    background-color: rgb(245 158 11 / 0.1);
}
.intelligence-insight.info {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.intelligence-insight.info:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
    background-color: rgb(59 130 246 / 0.1);
}
.intelligence-insight.success {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.intelligence-insight.success:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
    background-color: rgb(16 185 129 / 0.1);
}
.intelligence-insight-icon {
    margin-top: 0.125rem;
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;
}
.intelligence-insight.warning .intelligence-insight-icon {
    --tw-text-opacity: 1;
    color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.intelligence-insight.warning .intelligence-insight-icon:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.intelligence-insight.info .intelligence-insight-icon {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.intelligence-insight.info .intelligence-insight-icon:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.intelligence-insight.success .intelligence-insight-icon {
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .intelligence-insight.success .intelligence-insight-icon {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.intelligence-insight.success .intelligence-insight-icon:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.intelligence-insight.success .intelligence-insight-icon:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.intelligence-insight.success .intelligence-insight-icon:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.intelligence-insight-content {
    flex: 1 1 0%;
}
.intelligence-insight-title {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
}
.intelligence-insight.warning .intelligence-insight-title {
    --tw-text-opacity: 1;
    color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.intelligence-insight.warning .intelligence-insight-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}
.intelligence-insight.info .intelligence-insight-title {
    --tw-text-opacity: 1;
    color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.intelligence-insight.info .intelligence-insight-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}
.intelligence-insight.success .intelligence-insight-title {
    --tw-text-opacity: 1;
    color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}
.intelligence-insight.success .intelligence-insight-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 250 229 / var(--tw-text-opacity, 1));
}
.intelligence-insight-description {
    font-size: 0.75rem;
    line-height: 1rem;
}
.intelligence-insight.warning .intelligence-insight-description {
    --tw-text-opacity: 1;
    color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.intelligence-insight.warning .intelligence-insight-description:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.intelligence-insight.info .intelligence-insight-description {
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.intelligence-insight.info .intelligence-insight-description:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.intelligence-insight.success .intelligence-insight-description {
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.intelligence-insight.success .intelligence-insight-description:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
/* ========================================
   Advanced Controls Panel
   ======================================== */
.schedule-advanced-controls {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .schedule-advanced-controls {
    gap: 1rem;
}
.advanced-control-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
body[data-easy-mode="on"] .advanced-control-btn {
    gap: 0.75rem;
}
.advanced-control-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.advanced-control-btn:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.advanced-control-btn:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.advanced-control-btn:hover {
    --tw-border-opacity: 1;
    border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .advanced-control-btn:hover {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
    --tw-border-opacity: 1;
    border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); /* Teal-500 */
}
.week-day-card:has(.advanced-control-btn:hover:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.advanced-control-btn:hover:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.advanced-control-btn:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(5 150 105 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.advanced-control-btn.destructive {
    --tw-border-opacity: 1;
    border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.color-blind .advanced-control-btn.destructive {
    --tw-text-opacity: 1;
    color: rgb(217 119 6 / var(--tw-text-opacity, 1)); /* Amber-600 */
}
.advanced-control-btn.destructive:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(185 28 28 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.advanced-control-btn.destructive:hover {
    --tw-border-opacity: 1;
    border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.color-blind .advanced-control-btn.destructive:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1)); /* Amber-50 */
}
.advanced-control-btn.destructive:hover:is(.dark *) {
    background-color: rgb(239 68 68 / 0.1);
}
/* ========================================
   Save Panel with Timestamp
   ======================================== */
.schedule-save-panel {
    position: sticky;
    top: 1rem;
    z-index: 10;
    margin-bottom: 1.5rem;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.5rem;
    --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);
}
.schedule-save-panel:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    background-color: rgb(15 23 42 / 0.5);
}
.save-panel-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}
body[data-easy-mode="on"] .save-panel-content {
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .save-panel-content {
        flex-direction: row;
        align-items: flex-end;
    }
}
.save-panel-input-group {
    flex: 1 1 0%;
}
.save-panel-label {
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.save-panel-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.save-panel-input {
    width: 100%;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.save-panel-input::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.save-panel-input::placeholder {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.save-panel-input:focus {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 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(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);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
}
.save-panel-input:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.save-panel-input:is(.dark *)::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.save-panel-input:is(.dark *)::placeholder {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.save-panel-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .save-panel-actions {
    gap: 1rem;
}
.save-timestamp {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
body[data-easy-mode="on"] .save-timestamp {
    gap: 0.75rem;
}
.save-timestamp:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.save-success-indicator {
    height: 0.5rem;
    width: 0.5rem;
}
@keyframes pulse {
    50% {
        opacity: .5;
    }
}
.save-success-indicator {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}

.color-blind .save-success-indicator {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
/* ========================================
   Rotation Mode Controls
   ======================================== */
.rotation-mode-selector {
    margin-top: 1rem;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
    padding: 1rem;
}
.rotation-mode-selector:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    background-color: rgb(30 41 59 / 0.5);
}
.rotation-mode-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .rotation-mode-options {
    gap: 0.75rem;
}
.rotation-mode-option {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .rotation-mode-option {
    gap: 1rem;
}
.rotation-mode-radio {
    height: 1rem;
    width: 1rem;
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .rotation-mode-radio {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.rotation-mode-radio:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
}
.rotation-mode-label {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.rotation-mode-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.rotation-mode-description {
    margin-left: 1.75rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.rotation-mode-description:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
/* ========================================
   Animations
   ======================================== */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.schedule-day-card {
    animation: scaleIn 0.3s ease-out;
}
.schedule-workout-chip {
    animation: fadeIn 0.2s ease-out;
}
.intelligence-insight {
    animation: slideIn 0.3s ease-out;
}
/* ========================================
   Responsive Adjustments
   ======================================== */
@media (max-width: 1024px) {
    .schedule-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    @media (min-width: 640px) {
        .schedule-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    .auth-fields-block.workout-preview-tooltip {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
        pointer-events: none;
    }

    .profile-phone-country-dropdown.workout-preview-tooltip {
        display: none;
    }

    #profile-phone-country.workout-preview-tooltip {
        display: none;
    }
    
    .workout-preview-tooltip {
        display: none;
    }
#task-drawer.workout-preview-tooltip .sm\:w-96,
#workout-drawer.workout-preview-tooltip .sm\:w-\[28rem\] {
  transform: translateX(24px);
}
.day-tab-panel.workout-preview-tooltip {
  display: none;
}
.day-tab-panel:not(.workout-preview-tooltip) {
  animation: sectionEnter 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .day-tab-panel:not(.workout-preview-tooltip) {
    animation: none;
  }
}
}
@media (max-width: 640px) {
    .schedule-type-options {
        flex-direction: column;
    }
    
    .schedule-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    
    .intelligence-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    
    .schedule-advanced-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .advanced-control-btn {
        width: 100%;
        justify-content: center;
    }
}
/* ========================================
   Accessibility
   ======================================== */
.schedule-type-option input[type="radio"]:focus + .schedule-type-card {
    --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);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
    --tw-ring-offset-width: 2px;
}
.calendar-day-card.schedule-type-option input[type="radio"]:focus + .schedule-type-card.ring-blue-500\/80 {
  border-color: rgb(16, 185, 129);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25),
              0 0 20px rgba(16, 185, 129, 0.15),
              0 8px 32px -8px rgba(16, 185, 129, 0.2);
  animation: pulse-today 2s ease-in-out infinite;
}
.calendar-day-card.schedule-type-option input[type="radio"]:focus + .schedule-type-card.ring-emerald-500\/70 {
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15),
              0 4px 16px -4px rgba(16, 185, 129, 0.1);
}
.schedule-type-option input[type="radio"]:focus + .schedule-type-card:is(.dark *) {
    --tw-ring-offset-color: #0f172a;
}
.schedule-workout-chip: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);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
    --tw-ring-offset-width: 2px;
}
.calendar-day-card.schedule-workout-chip:focus.ring-blue-500\/80 {
  border-color: rgb(16, 185, 129);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25),
              0 0 20px rgba(16, 185, 129, 0.15),
              0 8px 32px -8px rgba(16, 185, 129, 0.2);
  animation: pulse-today 2s ease-in-out infinite;
}
.calendar-day-card.schedule-workout-chip:focus.ring-emerald-500\/70 {
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15),
              0 4px 16px -4px rgba(16, 185, 129, 0.1);
}
.schedule-workout-chip:focus:is(.dark *) {
    --tw-ring-offset-color: #0f172a;
}
/* ========================================
   Loading States
   ======================================== */
@keyframes pulse {
    50% {
        opacity: .5;
    }
}
.schedule-loading {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.schedule-skeleton {
    border-radius: 0.25rem;
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.schedule-skeleton:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
/* Schedule Studio (Training Flow Editor) Component Styles */
/* Professional, intelligent schedule editing interface */
/* ========================================
   Studio Container & Layout
   ======================================== */
.studio-container {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1800px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
@media (min-width: 640px) {
    .studio-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .studio-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
.studio-layout {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
}
@media (min-width: 1024px) {
    .studio-layout {
        grid-template-columns: 1fr 320px;
    }
}
.studio-main > :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));
}
.studio-sidebar > :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));
}
/* ========================================
   Studio Header (Document Editor Style)
   ======================================== */
.studio-header {
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.5rem;
    --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);
}
.studio-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    background-color: rgb(15 23 42 / 0.5);
}
.studio-header-top {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
body[data-easy-mode="on"] .studio-header-top {
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .studio-header-top {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
}
.studio-header-identity {
    flex: 1 1 0%;
}
.studio-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .studio-header-actions {
    gap: 0.75rem;
}
.studio-schedule-name {
    margin-bottom: 0.5rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.studio-schedule-name:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.studio-schedule-name {
    margin-left: -0.5rem;
    border-radius: 0.5rem;
    border-width: 2px;
    border-color: transparent;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.studio-schedule-name:hover {
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.studio-schedule-name:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    background-color: rgb(30 41 59 / 0.5);
}
.studio-schedule-name:focus {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-color: rgb(16 185 129 / 0.2);
}

.color-blind .studio-schedule-name:focus {
    --tw-border-opacity: 1;
    border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); /* Teal-500 */
}
.calendar-day-card.studio-schedule-name:focus.ring-blue-500\/80 {
  border-color: rgb(16, 185, 129);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25),
              0 0 20px rgba(16, 185, 129, 0.15),
              0 8px 32px -8px rgba(16, 185, 129, 0.2);
  animation: pulse-today 2s ease-in-out infinite;
}
.calendar-day-card.studio-schedule-name:focus.ring-emerald-500\/70 {
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15),
              0 4px 16px -4px rgba(16, 185, 129, 0.1);
}
.studio-schedule-name:focus:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.studio-schedule-name[contenteditable="true"] {
    cursor: text;
}
.studio-status-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}
body[data-easy-mode="on"] .studio-status-bar {
    gap: 1rem;
}
.studio-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 9999px;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-weight: 500;
}
.studio-status-badge.draft {
    --tw-bg-opacity: 1;
    background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.studio-status-badge.draft:is(.dark *) {
    background-color: rgb(245 158 11 / 0.1);
    --tw-text-opacity: 1;
    color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.studio-status-badge.applied {
    --tw-bg-opacity: 1;
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.studio-status-badge.applied:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.studio-status-badge.applied:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.studio-status-badge.applied:is(.dark *) {
    background-color: rgb(16 185 129 / 0.1);
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.studio-status-dot {
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 9999px;
}
.studio-status-badge.draft .studio-status-dot {
    --tw-bg-opacity: 1;
    background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.studio-status-badge.applied .studio-status-dot {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}

.color-blind .studio-status-badge.applied .studio-status-dot {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
.studio-timestamp {
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.studio-timestamp:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
/* ========================================
   Weekly Flow Builder (Visual Calendar)
   ======================================== */
.flow-builder-container {
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.5rem;
    --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);
}
.flow-builder-container:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    background-color: rgb(15 23 42 / 0.5);
}
.flow-builder-header {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.flow-builder-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.flow-builder-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.flow-builder-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}
body[data-easy-mode="on"] .flow-builder-grid {
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .flow-builder-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .flow-builder-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}
/* Day Column */
.flow-day-column {
    border-radius: 0.75rem;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.flow-day-column:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    background-color: rgb(30 41 59 / 0.3);
}
.flow-day-column {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.flow-day-column.active {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    --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);
    --tw-shadow-color: rgb(16 185 129 / 0.1);
    --tw-shadow: var(--tw-shadow-colored);
}

.color-blind .flow-day-column.active {
    --tw-border-opacity: 1;
    border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); /* Teal-500 */
}
.flow-day-header {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.flow-day-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
.flow-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.flow-day-name {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.flow-day-name:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.flow-day-count {
    display: flex;
    height: 1.5rem;
    width: 1.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.flow-day-count:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.flow-day-column.has-workouts .flow-day-count {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.color-blind .flow-day-column.has-workouts .flow-day-count {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
.flow-day-content {
    min-height: 280px;
}
.flow-day-content > :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));
}
.flow-day-content {
    padding: 0.75rem;
}
/* Workout Chip in Day Column */
.flow-workout-chip {
    position: relative;
    border-radius: 0.5rem;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.flow-workout-chip:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.flow-workout-chip {
    cursor: move;
    padding: 0.75rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.flow-workout-chip:hover {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    --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);
}
.flow-workout-chip.dragging {
    opacity: 0.4;
}
.flow-workout-chip: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));
}
.flow-workout-chip-header {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .flow-workout-chip-header {
    gap: 0.75rem;
}
.flow-workout-chip-name {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.flow-workout-chip-name:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.flow-workout-chip-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.flow-workout-chip:hover .flow-workout-chip-actions {
    opacity: 1;
}
.flow-workout-chip-btn {
    display: flex;
    height: 1.5rem;
    width: 1.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.flow-workout-chip-btn:hover {
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.flow-workout-chip-btn:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.flow-workout-chip-btn {
    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;
}
.flow-workout-chip-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.flow-workout-chip-btn:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.flow-workout-chip-btn.delete:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.flow-workout-chip-btn.delete:hover:is(.dark *) {
    background-color: rgb(239 68 68 / 0.1);
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.flow-workout-chip-preview > :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));
}
.flow-workout-chip-preview {
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.flow-workout-chip-preview:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.flow-workout-chip-preview.expanded {
    margin-top: 0.75rem;
}
.flow-workout-chip-preview.expanded > :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));
}
.flow-workout-chip-preview.expanded {
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    padding-top: 0.75rem;
}
.flow-workout-chip-preview.expanded:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
.flow-workout-chip-stat {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.flow-workout-chip-stat-icon {
    height: 0.875rem;
    width: 0.875rem;
    --tw-text-opacity: 1;
    color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}

.color-blind .flow-workout-chip-stat-icon {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
/* Rest Day Indicator */
.flow-rest-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
    text-align: center;
    border-radius: 0.5rem;
    border-width: 2px;
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.flow-rest-day:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}
.flow-rest-day-icon {
    margin-bottom: 0.5rem;
    height: 2.5rem;
    width: 2.5rem;
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.flow-rest-day-icon:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.flow-rest-day-label {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.flow-rest-day-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
/* Add Entry Button */
.flow-add-entry-btn {
    width: 100%;
    border-radius: 0.5rem;
    border-width: 2px;
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}
.flow-add-entry-btn:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}
.flow-add-entry-btn {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.flow-add-entry-btn:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.flow-add-entry-btn:hover:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.flow-add-entry-btn:hover:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.flow-add-entry-btn:hover {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.flow-add-entry-btn:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.flow-add-entry-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.flow-add-entry-btn:hover:is(.dark *) {
    background-color: rgb(16 185 129 / 0.05);
}
.flow-add-entry-btn {
    cursor: pointer;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.flow-add-entry-btn: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));
}
/* Drop Zone Feedback */
.flow-day-content.drag-over {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}

.color-blind .flow-day-content.drag-over {
    --tw-border-opacity: 1;
    border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); /* Teal-500 */
}
.flow-day-content.drag-over:is(.dark *) {
    background-color: rgb(16 185 129 / 0.05);
}
.flow-day-content.drag-over {
    --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);
    --tw-ring-color: rgb(16 185 129 / 0.2);
}
.calendar-day-card.flow-day-content.drag-over.ring-blue-500\/80 {
  border-color: rgb(16, 185, 129);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25),
              0 0 20px rgba(16, 185, 129, 0.15),
              0 8px 32px -8px rgba(16, 185, 129, 0.2);
  animation: pulse-today 2s ease-in-out infinite;
}
.calendar-day-card.flow-day-content.drag-over.ring-emerald-500\/70 {
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15),
              0 4px 16px -4px rgba(16, 185, 129, 0.1);
}
/* ========================================
   Insights Panel (Right Sidebar)
   ======================================== */
.insights-panel {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --tw-gradient-from: #ecfdf5 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(236 253 245 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #fff var(--tw-gradient-to-position);
}
.insights-panel:is(.dark *) {
    --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);
    --tw-gradient-to: rgb(15 23 42 / 0.5) var(--tw-gradient-to-position);
}
.insights-panel {
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
    padding: 1.5rem;
    --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);
}
.insights-panel:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
}
.insights-header {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
    padding-bottom: 1rem;
}
body[data-easy-mode="on"] .insights-header {
    gap: 0.75rem;
}
.insights-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
}
.insights-icon {
    height: 1.25rem;
    width: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .insights-icon {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.insights-icon:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.insights-icon:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.insights-icon:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.insights-title {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.insights-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.insights-grid > :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));
}
.insight-metric {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1rem;
}
.insight-metric:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    background-color: rgb(15 23 42 / 0.5);
}
.insight-metric-header {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.insight-metric-label {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.insight-metric-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.insight-metric-value {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .insight-metric-value {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.insight-metric-value:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.insight-metric-value:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.insight-metric-value:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.insight-metric-description {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.insight-metric-description:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.insight-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    border-radius: 0.5rem;
    padding: 0.75rem;
}
body[data-easy-mode="on"] .insight-warning {
    gap: 0.75rem;
}
.insight-warning {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.insight-warning:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(146 64 14 / var(--tw-border-opacity, 1));
    background-color: rgb(245 158 11 / 0.1);
}
.insight-warning-icon {
    margin-top: 0.125rem;
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
    --tw-text-opacity: 1;
    color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.insight-warning-icon:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.insight-warning-text {
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.insight-warning-text:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.insight-success {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    border-radius: 0.5rem;
    padding: 0.75rem;
}
body[data-easy-mode="on"] .insight-success {
    gap: 0.75rem;
}
.insight-success {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.insight-success:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
    background-color: rgb(16 185 129 / 0.1);
}
.insight-success-icon {
    margin-top: 0.125rem;
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .insight-success-icon {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.insight-success-icon:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.insight-success-icon:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.insight-success-icon:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.insight-success-text {
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}
.insight-success-text:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(167 243 208 / var(--tw-text-opacity, 1));
}
/* ========================================
   Apply to Calendar Modal
   ======================================== */
.modal-overlay {
    position: fixed;
    inset: 0px;
    z-index: 50;
    background-color: rgb(15 23 42 / 0.5);
    --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);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.modal-overlay.show {
    opacity: 1;
}
.modal-container {
    border-radius: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --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);
}
#workout-popup .modal-container {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.modal-container:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.modal-container {
    max-height: 90vh;
    width: 100%;
    max-width: 32rem;
    overflow-y: auto;
    --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));
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.modal-overlay.show .modal-container {
    --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));
}
.modal-header {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
.modal-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.modal-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.modal-close-btn {
    display: flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.modal-close-btn:hover {
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.modal-close-btn:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.modal-close-btn {
    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;
}
.modal-close-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.modal-close-btn:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.modal-body > :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));
}
.modal-body {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
.modal-description {
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.modal-description:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.modal-option-group > :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));
}

.calendar-day-content.motivation-mode .modal-option-group {
  opacity: 0.4;
}
.modal-option-label {
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.modal-option-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.modal-option-radio {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-radius: 0.75rem;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    padding: 1rem;
}
body[data-easy-mode="on"] .modal-option-radio {
    gap: 1rem;
}
.modal-option-radio:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
.modal-option-radio {
    cursor: pointer;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.modal-option-radio:hover {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.modal-option-radio:hover:is(.dark *) {
    background-color: rgb(16 185 129 / 0.05);
}
.modal-option-radio.selected {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}

.color-blind .modal-option-radio.selected {
    --tw-border-opacity: 1;
    border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); /* Teal-500 */
}
.modal-option-radio.selected:is(.dark *) {
    background-color: rgb(16 185 129 / 0.1);
}
.modal-option-radio-input {
    margin-top: 0.125rem;
    height: 1rem;
    width: 1rem;
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .modal-option-radio-input {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.modal-option-radio-input:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}
.modal-option-radio-input: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);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
}
.modal-option-content {
    flex: 1 1 0%;
}
.modal-option-title {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.modal-option-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.modal-option-description {
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.modal-option-description:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.modal-footer {
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
.modal-footer:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
}
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .modal-footer {
    gap: 1rem;
}
/* ========================================
   Version Control Panel
   ======================================== */
.version-control-panel {
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1rem;
    --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);
}
.version-control-panel:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    background-color: rgb(15 23 42 / 0.5);
}
.version-control-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .version-control-actions {
    gap: 0.75rem;
}
.version-control-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.version-control-btn:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.version-control-btn {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.version-control-btn:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}
.version-control-btn {
    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;
}
.version-control-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.version-control-btn:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.version-control-btn.undo:hover {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.version-control-btn.undo:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.version-control-btn.reset:hover {
    --tw-border-opacity: 1;
    border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.version-control-btn.reset:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.version-control-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
/* ========================================
   Advanced Controls Dropdown
   ======================================== */
.advanced-controls-dropdown {
    position: absolute;
    right: 0px;
    top: 100%;
    margin-top: 0.5rem;
    width: 16rem;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --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);
}
.advanced-controls-dropdown:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.advanced-controls-dropdown {
    visibility: hidden;
    transform-origin: top right;
    --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));
    opacity: 0;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    z-index: 50;
}
.advanced-controls-dropdown.show {
    visibility: visible;
    --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));
    opacity: 1;
}
.sticker-tooltip.advanced-controls-dropdown.show {
  opacity: 1;
}
.advanced-controls-menu {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.advanced-controls-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
}
body[data-easy-mode="on"] .advanced-controls-item {
    gap: 1rem;
}
.advanced-controls-item {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.advanced-controls-item:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.advanced-controls-item {
    cursor: pointer;
}
.advanced-controls-item:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.advanced-controls-item:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.advanced-controls-item {
    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;
}
.advanced-controls-item-icon {
    height: 1rem;
    width: 1rem;
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.advanced-controls-item.danger {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.color-blind .advanced-controls-item.danger {
    --tw-text-opacity: 1;
    color: rgb(217 119 6 / var(--tw-text-opacity, 1)); /* Amber-600 */
}
.advanced-controls-item.danger:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.advanced-controls-item.danger:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.advanced-controls-item.danger:hover:is(.dark *) {
    background-color: rgb(239 68 68 / 0.1);
}
.advanced-controls-item.danger .advanced-controls-item-icon {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.advanced-controls-divider {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}
.advanced-controls-divider:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
/* ========================================
   Action Buttons
   ======================================== */
.studio-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.75rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}
body[data-easy-mode="on"] .studio-btn-primary {
    gap: 0.75rem;
}
.studio-btn-primary {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --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);
    --tw-gradient-to: #059669 var(--tw-gradient-to-position);
}
.studio-btn-primary:hover {
    --tw-gradient-from: #059669 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(5 150 105 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #047857 var(--tw-gradient-to-position);
}
.studio-btn-primary {
    --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);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.studio-btn-primary: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);
}
.studio-btn-primary:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
    --tw-ring-offset-width: 2px;
}
.studio-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
body[data-easy-mode="on"] .studio-btn-secondary {
    gap: 0.75rem;
}
.studio-btn-secondary {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.studio-btn-secondary:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.studio-btn-secondary {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.studio-btn-secondary:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}
.studio-btn-secondary {
    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;
}
.studio-btn-secondary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.studio-btn-secondary:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.studio-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}
body[data-easy-mode="on"] .studio-btn-ghost {
    gap: 0.75rem;
}
.studio-btn-ghost {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.studio-btn-ghost:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.studio-btn-ghost {
    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;
}
.studio-btn-ghost:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.studio-btn-ghost:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
/* ========================================
   Animations
   ======================================== */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(10px);
    }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
.animate-slide-in {
    animation: slideIn 0.3s ease-out;
}
.animate-slide-out {
    animation: slideOut 0.3s ease-out;
}
.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}
.animate-shake {
    animation: shake 0.5s ease-out;
}
/* ========================================
   Mobile Optimizations
   ======================================== */
@media (max-width: 1024px) {
    .studio-layout {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    
    .studio-sidebar {
        order: -9999;
    }
}
@media (max-width: 640px) {
    .flow-builder-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    
    .flow-day-content {
        min-height: 200px;
    }
    
    .studio-header {
        padding: 1rem;
    }
    
    .flow-builder-container {
        padding: 1rem;
    }
    
    .insights-panel {
        padding: 1rem;
    }
}
/* Workout & Schedule System Component Styles */
/* Using emerald green (#10b981) as primary accent color */
/* ========================================
   Step Wizard Navigation
   ======================================== */
.workout-wizard {
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.5rem;
    --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);
}
.workout-wizard:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    background-color: rgb(15 23 42 / 0.5);
}
.workout-wizard-steps {
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.workout-wizard-step {
    position: relative;
    display: flex;
    flex: 1 1 0%;
    align-items: center;
}
.workout-wizard-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 1.5rem;
    left: 50%;
    right: 0px;
    z-index: -10;
    height: 0.125rem;
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.workout-wizard-step:not(:last-child):is(.dark *)::after {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.workout-wizard-step.active:not(:last-child)::after,
.workout-wizard-step.completed:not(:last-child)::after {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}

.color-blind .workout-wizard-step.active:not(:last-child)::after,
.color-blind 
.workout-wizard-step.completed:not(:last-child)::after {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
.workout-wizard-step-circle {
    display: flex;
    height: 3rem;
    width: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border-width: 2px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.workout-wizard-step-circle:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.workout-wizard-step.active .workout-wizard-step-circle {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .workout-wizard-step.active .workout-wizard-step-circle {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}

.color-blind .workout-wizard-step.active .workout-wizard-step-circle {
    --tw-border-opacity: 1;
    border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); /* Teal-500 */
}
.week-day-card:has(.workout-wizard-step.active .workout-wizard-step-circle:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.workout-wizard-step.active .workout-wizard-step-circle:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.workout-wizard-step.active .workout-wizard-step-circle:is(.dark *) {
    background-color: rgb(16 185 129 / 0.1);
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.workout-wizard-step.completed .workout-wizard-step-circle {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.color-blind .workout-wizard-step.completed .workout-wizard-step-circle {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
    --tw-border-opacity: 1;
    border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); /* Teal-500 */
}
.workout-wizard-step-label {
    position: absolute;
    top: 3.5rem;
    left: 0px;
    right: 0px;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.workout-wizard-step-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.workout-wizard-step.active .workout-wizard-step-label {
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .workout-wizard-step.active .workout-wizard-step-label {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.workout-wizard-step.active .workout-wizard-step-label:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.workout-wizard-step.active .workout-wizard-step-label:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.workout-wizard-step.active .workout-wizard-step-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
/* ========================================
   Exercise Cards
   ======================================== */
.exercise-card {
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1rem;
    --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);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.exercise-card:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    background-color: rgb(15 23 42 / 0.5);
}
.exercise-card:hover {
    --tw-border-opacity: 1;
    border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
    --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);
}
.exercise-card:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(4 120 87 / var(--tw-border-opacity, 1));
}
.exercise-card.selected {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    background-color: rgb(236 253 245 / 0.5);
}

.color-blind .exercise-card.selected {
    --tw-border-opacity: 1;
    border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); /* Teal-500 */
}
.exercise-card.selected:is(.dark *) {
    background-color: rgb(16 185 129 / 0.05);
}
.exercise-card-header {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .exercise-card-header {
    gap: 1rem;
}
.exercise-card-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.exercise-card-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.exercise-card-badge {
    border-radius: 0.375rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
}
.exercise-card-badge.badge-standard {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.exercise-card-badge.badge-standard:is(.dark *) {
    background-color: rgb(59 130 246 / 0.1);
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.exercise-card-badge.badge-custom {
    --tw-bg-opacity: 1;
    background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}
.exercise-card-badge.badge-custom:is(.dark *) {
    background-color: rgb(168 85 247 / 0.1);
    --tw-text-opacity: 1;
    color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.exercise-card-body {
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.exercise-card-body:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.exercise-card-footer {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    padding-top: 0.75rem;
}
body[data-easy-mode="on"] .exercise-card-footer {
    gap: 0.75rem;
}
.exercise-card-footer:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
}
.exercise-muscle-tag {
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.exercise-muscle-tag:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
/* ========================================
   Workout Preview Cards
   ======================================== */
.workout-preview-card {
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --tw-gradient-from: #ecfdf5 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(236 253 245 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #fff var(--tw-gradient-to-position);
    padding: 1rem;
    --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);
}
.workout-preview-card:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
    --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);
    --tw-gradient-to: rgb(15 23 42 / 0.5) var(--tw-gradient-to-position);
}
.workout-preview-header {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.workout-preview-title {
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.workout-preview-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.workout-preview-count {
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .workout-preview-count {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.workout-preview-count:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.workout-preview-count:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.workout-preview-count:is(.dark *) {
    background-color: rgb(16 185 129 / 0.1);
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.workout-preview-exercises {
    margin-bottom: 0.75rem;
}
.workout-preview-exercises > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.workout-preview-exercise {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
body[data-easy-mode="on"] .workout-preview-exercise {
    gap: 0.75rem;
}
.workout-preview-exercise:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.workout-preview-exercise::before {
    content: '•';
    --tw-text-opacity: 1;
    color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}

.color-blind .workout-preview-exercise::before {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.workout-preview-stats {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
    padding-top: 0.75rem;
}
body[data-easy-mode="on"] .workout-preview-stats {
    gap: 1rem;
}
.workout-preview-stats:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
}
.workout-preview-stat {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.workout-preview-stat:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.workout-preview-stat-icon {
    --tw-text-opacity: 1;
    color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}

.color-blind .workout-preview-stat-icon {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
/* ========================================
   Schedule Day Columns
   ======================================== */
.schedule-day-column {
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 0.75rem;
    --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);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.schedule-day-column:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    background-color: rgb(15 23 42 / 0.5);
}
.schedule-day-column:hover {
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    --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);
}
.schedule-day-column:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
.schedule-day-header {
    margin-bottom: 0.5rem;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.schedule-day-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.schedule-day-count {
    margin-left: 0.5rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .schedule-day-count {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.schedule-day-count:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.schedule-day-count:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.schedule-day-count:is(.dark *) {
    background-color: rgb(16 185 129 / 0.1);
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.schedule-drop-zone {
    min-height: 200px;
}
.schedule-drop-zone > :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));
}
.schedule-drop-zone {
    border-radius: 0.5rem;
    border-width: 2px;
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    padding: 0.5rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.schedule-drop-zone:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
.schedule-drop-zone.drag-over {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    background-color: rgb(236 253 245 / 0.5);
}

.color-blind .schedule-drop-zone.drag-over {
    --tw-border-opacity: 1;
    border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); /* Teal-500 */
}
.schedule-drop-zone.drag-over:is(.dark *) {
    background-color: rgb(16 185 129 / 0.05);
}
.schedule-drop-zone.has-workouts {
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    background-color: rgb(248 250 252 / 0.5);
}
.schedule-drop-zone.has-workouts:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    background-color: rgb(30 41 59 / 0.3);
}
.schedule-workout-item {
    cursor: move;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
    padding: 0.5rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.schedule-workout-item:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(4 120 87 / var(--tw-border-opacity, 1));
    background-color: rgb(16 185 129 / 0.1);
}
.schedule-workout-item:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));
    --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);
}
.schedule-workout-item:hover:is(.dark *) {
    background-color: rgb(16 185 129 / 0.2);
}
.schedule-workout-item-name {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}
.schedule-workout-item-name:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 250 229 / var(--tw-text-opacity, 1));
}
.schedule-workout-item-remove {
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.schedule-workout-item-remove:hover {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.schedule-workout-item-remove:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.schedule-workout-item-remove:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
/* ========================================
   Draggable Elements
   ======================================== */
.draggable-exercise,
.draggable-workout {
    cursor: move;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.draggable-exercise:hover,
.draggable-workout: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));
}
.dragging {
    opacity: 0.5;
}
/* ========================================
   Progress Indicators
   ======================================== */
.progress-bar {
    height: 0.5rem;
    width: 100%;
    overflow: hidden;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.progress-bar:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.progress-bar-fill {
    height: 100%;
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --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);
    --tw-gradient-to: #059669 var(--tw-gradient-to-position);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.progress-circle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.progress-circle svg {
    --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));
}
.progress-circle-bg {
    stroke: #e2e8f0;
}
.progress-circle-bg:is(.dark *) {
    stroke: #334155;
}
.progress-circle-fill {
    stroke: #10b981;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
    stroke-linecap: round;
}
/* ========================================
   Action Buttons
   ======================================== */
.workout-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --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);
    --tw-gradient-to: #059669 var(--tw-gradient-to-position);
}
.workout-btn-primary:hover {
    --tw-gradient-from: #059669 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(5 150 105 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #047857 var(--tw-gradient-to-position);
}
.workout-btn-primary {
    --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);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.workout-btn-primary: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);
}
.workout-btn-primary:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
    --tw-ring-offset-width: 2px;
}
.workout-btn-primary:focus:is(.dark *) {
    --tw-ring-offset-color: #0f172a;
}
.workout-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .workout-btn-secondary {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}

.color-blind .workout-btn-secondary {
    --tw-border-opacity: 1;
    border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); /* Teal-500 */
}
.week-day-card:has(.workout-btn-secondary:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.workout-btn-secondary:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.workout-btn-secondary:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.workout-btn-secondary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.workout-btn-secondary:hover:is(.dark *) {
    background-color: rgb(16 185 129 / 0.1);
}
.workout-btn-secondary {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.workout-btn-secondary:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
    --tw-ring-offset-width: 2px;
}
.workout-btn-secondary:focus:is(.dark *) {
    --tw-ring-offset-color: #0f172a;
}
.workout-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.workout-btn-ghost:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.workout-btn-ghost:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.workout-btn-ghost:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.workout-btn-ghost {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.workout-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.color-blind .workout-btn-danger {
    --tw-text-opacity: 1;
    color: rgb(217 119 6 / var(--tw-text-opacity, 1)); /* Amber-600 */
}
.workout-btn-danger:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.workout-btn-danger:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.workout-btn-danger:hover:is(.dark *) {
    background-color: rgb(239 68 68 / 0.1);
}
.workout-btn-danger {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
/* ========================================
   Form Inputs
   ======================================== */
.workout-input {
    width: 100%;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}
.workout-input:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
.workout-input {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.workout-input:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.workout-input::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.workout-input::placeholder {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.workout-input:is(.dark *)::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.workout-input:is(.dark *)::placeholder {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.workout-input:focus {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
}
.workout-input {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.workout-search-input {
    width: 100%;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}
.workout-search-input:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
.workout-search-input {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.workout-search-input:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.workout-search-input::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.workout-search-input::placeholder {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.workout-search-input:is(.dark *)::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.workout-search-input:is(.dark *)::placeholder {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.workout-search-input:focus {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
}
.workout-search-input {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.workout-filter-chip {
    cursor: pointer;
    border-radius: 9999px;
    border-width: 1px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.workout-filter-chip:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.workout-filter-chip:hover {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.workout-filter-chip:hover:is(.dark *) {
    background-color: rgb(16 185 129 / 0.1);
}
.workout-filter-chip.active {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.color-blind .workout-filter-chip.active {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
    --tw-border-opacity: 1;
    border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); /* Teal-500 */
}
/* ========================================
   Empty States
   ======================================== */
.empty-state {
    padding-top: 3rem;
    padding-bottom: 3rem;
    text-align: center;
}
.empty-state-icon {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    height: 4rem;
    width: 4rem;
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.empty-state-icon:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.empty-state-title {
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.empty-state-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.empty-state-description {
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.empty-state-description:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
/* ========================================
   Tooltips
   ======================================== */
.workout-tooltip {
    position: absolute;
    z-index: 50;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --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);
}
.workout-tooltip:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.workout-tooltip {
    visibility: hidden;
    opacity: 0;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.workout-tooltip.show {
    visibility: visible;
    opacity: 1;
}
.sticker-tooltip.workout-tooltip.show {
  opacity: 1;
}
/* ========================================
   Breadcrumbs
   ======================================== */
.workout-breadcrumb {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}
body[data-easy-mode="on"] .workout-breadcrumb {
    gap: 0.75rem;
}
.workout-breadcrumb-item {
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
    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;
}
.week-day-card:has(.workout-breadcrumb-item:hover:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.workout-breadcrumb-item:hover:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.workout-breadcrumb-item:hover {
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.workout-breadcrumb-item:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.workout-breadcrumb-item:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.workout-breadcrumb-item.active {
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .workout-breadcrumb-item.active {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.workout-breadcrumb-item.active:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.workout-breadcrumb-item.active:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.workout-breadcrumb-item.active:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.workout-breadcrumb-separator {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.workout-breadcrumb-separator:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
/* ========================================
   Loading States
   ======================================== */
@keyframes pulse {
    50% {
        opacity: .5;
    }
}
.workout-skeleton {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    border-radius: 0.25rem;
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.workout-skeleton:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.workout-spinner {
    display: inline-block;
    height: 1.25rem;
    width: 1.25rem;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.workout-spinner {
    animation: spin 1s linear infinite;
    border-radius: 9999px;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    border-top-color: transparent;
}

.color-blind .workout-spinner {
    --tw-border-opacity: 1;
    border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); /* Teal-500 */
}
/* ========================================
   Stats & Badges
   ======================================== */
.workout-stat-card {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --tw-gradient-from: #ecfdf5 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(236 253 245 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #fff var(--tw-gradient-to-position);
}
.workout-stat-card:is(.dark *) {
    --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);
    --tw-gradient-to: rgb(15 23 42 / 0.5) var(--tw-gradient-to-position);
}
.workout-stat-card {
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
    padding: 1rem;
    --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);
}
.workout-stat-card:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
}
.workout-stat-label {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.workout-stat-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.workout-stat-value {
    margin-top: 0.25rem;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .workout-stat-value {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.workout-stat-value:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.workout-stat-value:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.workout-stat-value:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.workout-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
}
.workout-badge.badge-success {
    --tw-bg-opacity: 1;
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.workout-badge.badge-success:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.workout-badge.badge-success:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.workout-badge.badge-success:is(.dark *) {
    background-color: rgb(16 185 129 / 0.1);
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.workout-badge.badge-info {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.workout-badge.badge-info:is(.dark *) {
    background-color: rgb(59 130 246 / 0.1);
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.workout-badge.badge-warning {
    --tw-bg-opacity: 1;
    background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.workout-badge.badge-warning:is(.dark *) {
    background-color: rgb(245 158 11 / 0.1);
    --tw-text-opacity: 1;
    color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
/* ========================================
   Responsive Adjustments
   ======================================== */
@media (max-width: 640px) {
    .workout-wizard-steps {
        flex-direction: column;
        gap: 1rem;
    }
body[data-easy-mode="on"] .workout-wizard-steps {
    gap: 1.25rem;
}

    .auth-fields-block.workout-wizard-step:not(:last-child)::after {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
        pointer-events: none;
    }

    .profile-phone-country-dropdown.workout-wizard-step:not(:last-child)::after {
        display: none;
    }

    #profile-phone-country.workout-wizard-step:not(:last-child)::after {
        display: none;
    }
    
    .workout-wizard-step:not(:last-child)::after {
        display: none;
    }
#task-drawer.workout-wizard-step:not(:last-child) .sm\:w-96::after,
#workout-drawer.workout-wizard-step:not(:last-child) .sm\:w-\[28rem\]::after {
  transform: translateX(24px);
}
.day-tab-panel.workout-wizard-step:not(:last-child)::after {
  display: none;
}
.day-tab-panel:not(.workout-wizard-step:not(:last-child))::after {
  animation: sectionEnter 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .day-tab-panel:not(.workout-wizard-step:not(:last-child))::after {
    animation: none;
  }
}
    
    .schedule-day-column {
        grid-column: span 1 / span 1;
    }
}
/* ============================================
   WORKOUT CREATION STUDIO
   Premium workout builder with modes, library,
   and suggested exercises
   ============================================ */
/* ============================================
   STUDIO CONTAINER
   ============================================ */
.workout-studio {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 80rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
/* ============================================
   MODE NAVIGATION
   Tabs for switching between modes
   ============================================ */
.studio-mode-nav {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 0.5rem;
    --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);
}
body[data-easy-mode="on"] .studio-mode-nav {
    gap: 0.75rem;
}
#workout-popup .studio-mode-nav {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.studio-mode-tab {
    flex: 1 1 0%;
    border-radius: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}
.studio-mode-tab:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.studio-mode-tab.active {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --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);
}

.color-blind .studio-mode-tab.active {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}

.color-blind .studio-mode-tab.active:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1)); /* Teal-700 */
}
.studio-mode-tab.active:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.studio-mode-tab .mode-icon {
    margin-right: 0.5rem;
    display: inline-block;
    height: 1rem;
    width: 1rem;
}
/* Mobile mode navigation - stacked on small screens */
@media (max-width: 640px) {
    .studio-mode-nav {
        flex-direction: column;
        padding: 0.25rem;
    }
    
    .studio-mode-tab {
        width: 100%;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}
/* ============================================
   MODE PANELS
   Each mode has its own panel
   ============================================ */
.auth-fields-block.studio-mode-panel {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
        pointer-events: none;
    }
.profile-phone-country-dropdown.studio-mode-panel {
        display: none;
    }
#profile-phone-country.studio-mode-panel {
        display: none;
    }
.studio-mode-panel {
    display: none;
}
#task-drawer.studio-mode-panel .sm\:w-96,
#workout-drawer.studio-mode-panel .sm\:w-\[28rem\] {
  transform: translateX(24px);
}
.day-tab-panel.studio-mode-panel {
  display: none;
}
.day-tab-panel:not(.studio-mode-panel) {
  animation: sectionEnter 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .day-tab-panel:not(.studio-mode-panel) {
    animation: none;
  }
}
.studio-mode-panel.active {
    display: block;
}
/* ============================================
   MY WORKOUTS MODE
   Dashboard view of user workouts
   ============================================ */
.my-workouts-grid {
    display: grid;
    gap: 1rem;
}
body[data-easy-mode="on"] .my-workouts-grid {
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .my-workouts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .my-workouts-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.workout-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.25rem;
    --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);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
#workout-popup .workout-card {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.workout-card:hover {
    --tw-border-opacity: 1;
    border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
    --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);
}
.workout-card-header {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .workout-card-header {
    gap: 1rem;
}
.workout-card-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.workout-card-date {
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.workout-card-description {
    margin-bottom: 1rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.workout-card-metadata {
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
body[data-easy-mode="on"] .workout-card-metadata {
    gap: 1rem;
}
.workout-card-metadata-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.workout-card-metadata-icon {
    height: 1rem;
    width: 1rem;
    --tw-text-opacity: 1;
    color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}

.color-blind .workout-card-metadata-icon {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.workout-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .workout-card-actions {
    gap: 0.75rem;
}
.workout-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.workout-card-btn-primary {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --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);
}

.color-blind .workout-card-btn-primary {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}

.color-blind .workout-card-btn-primary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1)); /* Teal-700 */
}
.workout-card-btn-primary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.workout-card-btn-secondary {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.workout-card-btn-secondary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.workout-card-btn-danger {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(254 205 211 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}
.workout-card-btn-danger:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}
.workout-empty-state {
    border-radius: 1rem;
    border-width: 2px;
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    text-align: center;
}
#workout-popup .workout-empty-state {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.workout-empty-icon {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    height: 3rem;
    width: 3rem;
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.workout-empty-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.workout-empty-description {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
/* ============================================
   EXERCISE LIBRARY MODE
   Searchable exercise database
   ============================================ */
.library-container > :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));
}
.library-search-bar {
    border-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1rem;
    --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);
}
#workout-popup .library-search-bar {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.library-search-input-wrapper {
    position: relative;
}
.library-search-input {
    width: 100%;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 2.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.library-search-input::-moz-placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(148 163 184 / var(--tw-placeholder-opacity, 1));
}
.library-search-input::placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(148 163 184 / var(--tw-placeholder-opacity, 1));
}
.library-search-input:focus {
    --tw-border-opacity: 1;
    border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-color: rgb(16 185 129 / 0.2);
}
.library-search-icon {
    pointer-events: none;
    position: absolute;
    left: 1rem;
    top: 50%;
    height: 1.25rem;
    width: 1.25rem;
    --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));
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.library-filters {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .library-filters {
    gap: 0.75rem;
}
.library-filter-tag {
    cursor: pointer;
    border-radius: 9999px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.library-filter-tag:hover {
    --tw-border-opacity: 1;
    border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.library-filter-tag.active {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.color-blind .library-filter-tag.active {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
    --tw-border-opacity: 1;
    border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); /* Teal-500 */
}
.library-filter-tag .filter-icon {
    margin-right: 0.25rem;
    display: inline-block;
    height: 0.75rem;
    width: 0.75rem;
}
.library-grid {
    display: grid;
    gap: 1rem;
}
body[data-easy-mode="on"] .library-grid {
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .library-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .library-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.exercise-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --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);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
#workout-popup .exercise-card {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.exercise-card:hover {
    --tw-border-opacity: 1;
    border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
    --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);
}
.exercise-card-image-wrapper {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --tw-gradient-from: #f1f5f9 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(241 245 249 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #e2e8f0 var(--tw-gradient-to-position);
}
.exercise-card-image {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.group:hover .exercise-card-image {
    --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));
}
.exercise-card-difficulty {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    border-radius: 9999px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --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);
}
.exercise-card-difficulty.difficulty-1 {
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.exercise-card-difficulty.difficulty-2 {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.exercise-card-difficulty.difficulty-3 {
    --tw-bg-opacity: 1;
    background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.exercise-card-difficulty.difficulty-4 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.exercise-card-favourite-btn {
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    display: flex;
    height: 2rem;
    width: 2rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgb(255 255 255 / 0.9);
    --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);
    --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);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.exercise-card-favourite-btn: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));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.exercise-card-favourite-icon {
    height: 1rem;
    width: 1rem;
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
    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: 200ms;
}
.exercise-card-favourite-btn.favourited .exercise-card-favourite-icon {
    fill: #f43f5e;
    --tw-text-opacity: 1;
    color: rgb(244 63 94 / var(--tw-text-opacity, 1));
}
.exercise-card-body {
    padding: 1rem;
}
.exercise-card-header {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .exercise-card-header {
    gap: 0.75rem;
}
.exercise-card-title {
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.exercise-card-category {
    margin-bottom: 0.5rem;
    display: inline-block;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.exercise-card-description {
    margin-bottom: 0.75rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.exercise-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
    padding-top: 0.75rem;
}
body[data-easy-mode="on"] .exercise-card-footer {
    gap: 0.75rem;
}
.exercise-card-type {
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.exercise-card-add-btn {
    display: flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --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);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.color-blind .exercise-card-add-btn {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}

.color-blind .exercise-card-add-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1)); /* Teal-700 */
}
.exercise-card-add-btn: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));
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.exercise-card-add-btn: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));
}
.exercise-card-add-icon {
    height: 1rem;
    width: 1rem;
}
/* ============================================
   BUILDER MODE
   Workout creation interface
   ============================================ */
.builder-container {
    display: grid;
    gap: 1.5rem;
}
@media (min-width: 1024px) {
    .builder-container {
        grid-template-columns: 2fr 1fr;
    }
}
.builder-main {
    border-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.5rem;
    --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);
}
#workout-popup .builder-main {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.builder-header {
    margin-bottom: 1.5rem;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
    padding-bottom: 1rem;
}
.builder-title {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.builder-subtitle {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.builder-form-section {
    margin-bottom: 1.5rem;
}
.builder-form-section > :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));
}
.builder-label {
    display: block;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.builder-input {
    margin-top: 0.375rem;
    width: 100%;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.builder-input:focus {
    --tw-border-opacity: 1;
    border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-color: rgb(16 185 129 / 0.2);
}
.builder-textarea {
    margin-top: 0.375rem;
    width: 100%;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.builder-textarea:focus {
    --tw-border-opacity: 1;
    border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-color: rgb(16 185 129 / 0.2);
}
.builder-exercises-section {
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
    padding: 1rem;
}
.builder-exercises-header {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.builder-exercises-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.builder-add-exercise-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --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);
}

.color-blind .builder-add-exercise-btn {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
.builder-add-exercise-btn {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.color-blind .builder-add-exercise-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1)); /* Teal-700 */
}
.builder-add-exercise-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.builder-exercises-list > :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));
}

.calendar-day-content.motivation-mode .builder-exercises-list {
  opacity: 0.4;
}
.builder-exercise-item {
    position: relative;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1rem;
    --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);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.builder-exercise-item:hover {
    --tw-border-opacity: 1;
    border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
    --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);
}
.builder-exercise-item.dragging {
    opacity: 0.5;
    --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);
}
.builder-exercise-drag-handle {
    position: absolute;
    left: -0.75rem;
    top: 50%;
    display: flex;
    height: 2.5rem;
    width: 1.5rem;
    --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));
    cursor: grab;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.group:hover .builder-exercise-drag-handle {
    opacity: 1;
}
.builder-exercise-drag-handle:active {
    cursor: grabbing;
}
.builder-exercise-grid {
    display: grid;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .builder-exercise-grid {
    gap: 1rem;
}
@media (min-width: 1024px) {
    .builder-exercise-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr auto;
    }
}
.builder-exercise-label {
    display: block;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.builder-exercise-input {
    margin-top: 0.25rem;
    width: 100%;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.builder-exercise-input:focus {
    --tw-border-opacity: 1;
    border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-color: rgb(16 185 129 / 0.2);
}
.builder-exercise-select {
    margin-top: 0.25rem;
    width: 100%;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.builder-exercise-select:focus {
    --tw-border-opacity: 1;
    border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-color: rgb(16 185 129 / 0.2);
}
.builder-exercise-remove-btn {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(254 205 211 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(225 29 72 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.builder-exercise-remove-btn:hover {
    --tw-border-opacity: 1;
    border-color: rgb(253 164 175 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}
.builder-exercise-notes {
    margin-top: 0.75rem;
}
.builder-save-section {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
    padding-top: 1.5rem;
}
body[data-easy-mode="on"] .builder-save-section {
    gap: 1.25rem;
}
.builder-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --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);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.color-blind .builder-save-btn {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
body[data-easy-mode="on"] .builder-save-btn {
    gap: 0.75rem;
}

.color-blind .builder-save-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1)); /* Teal-700 */
}
.builder-save-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
    --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);
}
.builder-save-btn: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));
}
.builder-save-success {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .builder-save-success {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
body[data-easy-mode="on"] .builder-save-success {
    gap: 0.75rem;
}
.builder-save-success-icon {
    height: 1.25rem;
    width: 1.25rem;
}
/* ============================================
   BUILDER SIDEBAR
   Live preview and stats
   ============================================ */
.builder-sidebar > :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));
}
.builder-sidebar-card {
    border-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.25rem;
    --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);
}
#workout-popup .builder-sidebar-card {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.builder-sidebar-card-title {
    margin-bottom: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.builder-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
body[data-easy-mode="on"] .builder-stats-grid {
    gap: 1rem;
}
.builder-stat-item {
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
    padding: 0.75rem;
    text-align: center;
}
.builder-stat-value {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .builder-stat-value {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.builder-stat-label {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.builder-preview-list > :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));
}
.builder-preview-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.builder-preview-exercise-name {
    flex: 1 1 0%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.builder-preview-exercise-sets {
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.builder-muscle-distribution > :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));
}
.builder-muscle-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .builder-muscle-bar {
    gap: 1rem;
}
.builder-muscle-label {
    width: 5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.builder-muscle-progress {
    height: 0.5rem;
    flex: 1 1 0%;
    overflow: hidden;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.builder-muscle-fill {
    height: 100%;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.color-blind .builder-muscle-fill {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
/* ============================================
   SUGGESTED EXERCISES PANEL
   AI-powered recommendations
   ============================================ */
.suggestions-panel {
    border-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --tw-gradient-from: #fff var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #f8fafc var(--tw-gradient-to-position);
    padding: 1.25rem;
    --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);
}
#workout-popup .suggestions-panel {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.suggestions-header {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.suggestions-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.suggestions-badge {
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.suggestions-description {
    margin-bottom: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.suggestions-grid {
    display: grid;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .suggestions-grid {
    gap: 1rem;
}
@media (min-width: 640px) {
    .suggestions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .suggestions-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.suggestion-card {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1rem;
    --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);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.suggestion-card:hover {
    --tw-border-opacity: 1;
    border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
    --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);
}
.suggestion-card-header {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .suggestion-card-header {
    gap: 0.75rem;
}
.suggestion-card-title {
    flex: 1 1 0%;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.suggestion-card-actions {
    display: flex;
    gap: 0.25rem;
}
.suggestion-card-action-btn {
    display: flex;
    height: 1.75rem;
    width: 1.75rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.suggestion-card-action-btn: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));
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.suggestion-card-action-btn.favourited {
    --tw-bg-opacity: 1;
    background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}
.suggestion-card-action-btn.favourited:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.suggestion-card-description {
    margin-bottom: 0.5rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.suggestion-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
body[data-easy-mode="on"] .suggestion-card-meta {
    gap: 0.75rem;
}
.suggestions-load-more {
    margin-top: 1rem;
    width: 100%;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.suggestions-load-more:hover {
    --tw-border-opacity: 1;
    border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.suggestions-load-more.premium {
    --tw-border-opacity: 1;
    border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: #fffbeb var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 251 235 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #fff7ed var(--tw-gradient-to-position);
    --tw-text-opacity: 1;
    color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.suggestions-load-more.premium:hover {
    --tw-gradient-from: #fef3c7 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(254 243 199 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #ffedd5 var(--tw-gradient-to-position);
}
.suggestions-completed {
    margin-top: 1rem;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
/* ============================================
   CUSTOM EXERCISE CREATION PANEL
   Slide-in panel for custom exercises
   ============================================ */
.auth-fields-block.custom-exercise-overlay {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
        pointer-events: none;
    }
.profile-phone-country-dropdown.custom-exercise-overlay {
        display: none;
    }
#profile-phone-country.custom-exercise-overlay {
        display: none;
    }
.custom-exercise-overlay {
    position: fixed;
    inset: 0px;
    z-index: 40;
    display: none;
    background-color: rgb(0 0 0 / 0.3);
    --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);
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
#task-drawer.custom-exercise-overlay .sm\:w-96,
#workout-drawer.custom-exercise-overlay .sm\:w-\[28rem\] {
  transform: translateX(24px);
}
.day-tab-panel.custom-exercise-overlay {
  display: none;
}
.day-tab-panel:not(.custom-exercise-overlay) {
  animation: sectionEnter 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .day-tab-panel:not(.custom-exercise-overlay) {
    animation: none;
  }
}
.custom-exercise-overlay.active {
    display: block;
}
.custom-exercise-panel {
    position: fixed;
    right: 0px;
    top: 0px;
    z-index: 50;
    height: 100%;
    width: 100%;
    max-width: 42rem;
    --tw-translate-x: 100%;
    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));
    overflow-y: auto;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --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);
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.custom-exercise-panel.active {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.custom-exercise-header {
    position: sticky;
    top: 0px;
    z-index: 10;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
.custom-exercise-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.custom-exercise-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.custom-exercise-close-btn {
    display: flex;
    height: 2.25rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.custom-exercise-close-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.custom-exercise-body {
    padding: 1.5rem;
}
.custom-exercise-form > :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));
}
.custom-exercise-form-group > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.custom-exercise-label {
    display: block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.custom-exercise-input {
    width: 100%;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.custom-exercise-input:focus {
    --tw-border-opacity: 1;
    border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-color: rgb(16 185 129 / 0.2);
}
.custom-exercise-textarea {
    width: 100%;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.custom-exercise-textarea:focus {
    --tw-border-opacity: 1;
    border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-color: rgb(16 185 129 / 0.2);
}
.custom-exercise-select {
    width: 100%;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.custom-exercise-select:focus {
    --tw-border-opacity: 1;
    border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-color: rgb(16 185 129 / 0.2);
}
.custom-exercise-footer {
    position: sticky;
    bottom: 0px;
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
.custom-exercise-actions {
    display: flex;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .custom-exercise-actions {
    gap: 1rem;
}
.custom-exercise-btn-cancel {
    flex: 1 1 0%;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.custom-exercise-btn-cancel:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.custom-exercise-btn-save {
    flex: 1 1 0%;
    border-radius: 0.75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --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);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.color-blind .custom-exercise-btn-save {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}

.color-blind .custom-exercise-btn-save:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1)); /* Teal-700 */
}
.custom-exercise-btn-save:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
    --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);
}
/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 1024px) {
    .builder-container {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    
    .builder-sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
body[data-easy-mode="on"] .builder-sidebar {
    gap: 1.25rem;
}
}
@media (max-width: 768px) {
    .builder-sidebar {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    
    .builder-exercise-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 0.5rem;
    }
body[data-easy-mode="on"] .builder-exercise-grid {
    gap: 0.75rem;
}
    
    .library-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    
    .my-workouts-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}
/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes slide-in-right {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes bounce-in {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
.animate-slide-in-right {
    animation: slide-in-right 0.3s ease-out;
}
.animate-fade-in {
    animation: fade-in 0.3s ease-out;
}
.animate-bounce-in {
    animation: bounce-in 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* ============================================
   EMERALD HIGHLIGHT FEEDBACK
   ============================================ */
@keyframes pulse {
    50% {
        opacity: .5;
    }
}
.emerald-highlight {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --tw-border-opacity: 1;
    border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
    background-color: rgb(236 253 245 / 0.5);
    --tw-shadow-color: #a7f3d0;
    --tw-shadow: var(--tw-shadow-colored);
}
.color-blind .emerald-highlight {
    --tw-border-opacity: 1;
    border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); /* Teal-500 */
}
/* Success pulse animation */
@keyframes success-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }
}
.success-pulse {
    animation: success-pulse 0.6s ease-out;
}
/* Training Control Centre Component Styles */
/* Cyber/Neon visual identity — glassmorphism + neon accents */
/* ========================================
   Control Centre Container
   ======================================== */
.tcc-container {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 80rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
@media (min-width: 640px) {
    .tcc-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .tcc-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
/* ========================================
   Insights Bar
   ======================================== */
.tcc-insights-bar {
    background: rgba(30, 36, 53, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 243, 255, 0.2);
    border-radius: 1rem;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.08), inset 0 0 40px rgba(0, 243, 255, 0.03);
    margin-bottom: 2rem;
    padding: 1.5rem;
}
.tcc-insights-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
body[data-easy-mode="on"] .tcc-insights-grid {
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .tcc-insights-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .tcc-insights-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}
.tcc-insight-item {
    position: relative;
    text-align: center;
}
.tcc-insight-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0px;
    top: 50%;
    height: 2rem;
    width: 1px;
    --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));
    background: rgba(0, 243, 255, 0.15);
}
.tcc-insight-value {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
}
@media (min-width: 640px) {
    .tcc-insight-value {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
}
.tcc-insight-value {
    color: #00f3ff;
    text-shadow: 0 0 12px rgba(0, 243, 255, 0.6);
}
.tcc-insight-label {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
}
@media (min-width: 640px) {
    .tcc-insight-label {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
}
.tcc-insight-label {
    color: rgba(148, 163, 184, 0.9);
    letter-spacing: 0.04em;
}
/* ========================================
   Active Schedule Status Panel
   ======================================== */
.tcc-active-panel {
    background: rgba(26, 26, 46, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 243, 255, 0.35);
    border-radius: 1rem;
    box-shadow: 0 0 24px rgba(0, 243, 255, 0.12), inset 0 0 0 1px rgba(0, 243, 255, 0.05);
    position: relative;
    margin-bottom: 2rem;
    overflow: hidden;
    padding: 1.5rem;
}
.tcc-active-panel::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 0.25rem;
    background: linear-gradient(180deg, #00f3ff 0%, #b537f2 100%);
    box-shadow: 0 0 12px rgba(0, 243, 255, 0.8);
}
.tcc-active-panel::after {
    content: '';
    pointer-events: none;
    position: absolute;
    inset: 0px;
    background: radial-gradient(ellipse at 0% 0%, rgba(0, 243, 255, 0.04) 0%, transparent 60%);
}
.tcc-active-header {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
body[data-easy-mode="on"] .tcc-active-header {
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .tcc-active-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
.tcc-active-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: #f1f5f9;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.2);
}
.tcc-active-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}
body[data-easy-mode="on"] .tcc-active-badge {
    gap: 0.75rem;
}
.tcc-active-badge {
    background: rgba(0, 243, 255, 0.1);
    border: 1px solid rgba(0, 243, 255, 0.3);
    color: #00f3ff;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    box-shadow: 0 0 8px rgba(0, 243, 255, 0.15);
}
.tcc-active-badge::before {
    content: '';
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 9999px;
    background: #00f3ff;
    box-shadow: 0 0 6px rgba(0, 243, 255, 0.9);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.tcc-active-meta {
    margin-bottom: 1rem;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
    padding-bottom: 1rem;
}
body[data-easy-mode="on"] .tcc-active-meta {
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .tcc-active-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.tcc-active-meta {
    border-bottom: 1px solid rgba(0, 243, 255, 0.1);
}
.tcc-active-meta-item {
    display: flex;
    flex-direction: column;
}
.tcc-active-meta-label {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: rgba(148, 163, 184, 0.7);
}
.tcc-active-meta-value {
    margin-top: 0.25rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: #e2e8f0;
}
.tcc-active-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .tcc-active-actions {
    gap: 0.75rem;
}
/* Empty state for active panel */
.tcc-active-empty {
    background: rgba(30, 36, 53, 0.5);
    backdrop-filter: blur(8px);
    border: 2px dashed rgba(0, 243, 255, 0.2);
    margin-bottom: 2rem;
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
}
#workout-popup .tcc-active-empty {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.tcc-active-empty-icon {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    height: 4rem;
    width: 4rem;
    color: rgba(0, 243, 255, 0.3);
}
.tcc-active-empty-title {
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: #e2e8f0;
}
.tcc-active-empty-text {
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgba(148, 163, 184, 0.8);
}
/* ========================================
   Status Tabs
   ======================================== */
.tcc-tabs {
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .tcc-tabs {
    gap: 0.75rem;
}
.tcc-tab {
    cursor: pointer;
    border-radius: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    background: rgba(30, 36, 53, 0.6);
    border: 1px solid rgba(0, 243, 255, 0.15);
    color: rgba(148, 163, 184, 0.9);
}
.tcc-tab:hover {
    border-color: rgba(0, 243, 255, 0.4);
    color: #00f3ff;
    background: rgba(0, 243, 255, 0.05);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.1);
}
.tcc-tab.active {
    background: rgba(0, 243, 255, 0.12);
    border-color: rgba(0, 243, 255, 0.5);
    color: #00f3ff;
    box-shadow: 0 0 14px rgba(0, 243, 255, 0.2);
}
.tcc-tab-count {
    margin-left: 0.5rem;
    border-radius: 9999px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    background: rgba(0, 243, 255, 0.15);
    color: rgba(0, 243, 255, 0.9);
}
.tcc-tab:not(.active) .tcc-tab-count {
    background: rgba(30, 36, 53, 0.8);
    color: rgba(148, 163, 184, 0.7);
}
/* ========================================
   Schedule Cards
   ======================================== */
.tcc-card-grid {
    display: grid;
    gap: 1rem;
}
body[data-easy-mode="on"] .tcc-card-grid {
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .tcc-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .tcc-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.tcc-card {
    background: rgba(26, 26, 46, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 243, 255, 0.15);
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    padding: 1.25rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
#workout-popup .tcc-card {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.tcc-card::before {
    content: '';
    pointer-events: none;
    position: absolute;
    inset: 0px;
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    background: radial-gradient(ellipse at 50% 0%, rgba(0, 243, 255, 0.06) 0%, transparent 70%);
}
.tcc-card:hover {
    border-color: rgba(0, 243, 255, 0.4);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.12), 0 8px 32px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}
.tcc-card:hover::before {
    opacity: 1;
}
.tcc-card-header {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .tcc-card-header {
    gap: 1rem;
}
.tcc-card-title {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
    color: #f1f5f9;
}
.tcc-card-status-badge {
    flex-shrink: 0;
    border-radius: 0.5rem;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
}
.tcc-card-status-badge.status-active {
    background: rgba(0, 243, 255, 0.1);
    border: 1px solid rgba(0, 243, 255, 0.3);
    color: #00f3ff;
}
.tcc-card-status-badge.status-draft {
    background: rgba(30, 36, 53, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: rgba(148, 163, 184, 0.8);
}
.tcc-card-status-badge.status-archived {
    background: rgba(181, 55, 242, 0.1);
    border: 1px solid rgba(181, 55, 242, 0.3);
    color: #b537f2;
}
.tcc-card-description {
    margin-bottom: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgba(148, 163, 184, 0.8);
}
.tcc-card-meta {
    margin-bottom: 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding-bottom: 1rem;
}
body[data-easy-mode="on"] .tcc-card-meta {
    gap: 1rem;
}
.tcc-card-meta {
    border-bottom: 1px solid rgba(0, 243, 255, 0.08);
}
.tcc-card-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .tcc-card-meta-item {
    gap: 0.75rem;
}
.tcc-card-meta-icon {
    height: 1rem;
    width: 1rem;
    color: #00f3ff;
    filter: drop-shadow(0 0 3px rgba(0, 243, 255, 0.5));
}
.tcc-card-meta-text {
    font-size: 0.75rem;
    line-height: 1rem;
    color: rgba(148, 163, 184, 0.8);
}
.tcc-card-tags {
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .tcc-card-tags {
    gap: 0.75rem;
}
.tcc-card-tag {
    border-radius: 0.375rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    background: rgba(30, 36, 53, 0.8);
    border: 1px solid rgba(0, 243, 255, 0.1);
    color: rgba(148, 163, 184, 0.8);
}
.tcc-card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .tcc-card-footer {
    gap: 0.75rem;
}
.tcc-card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.tcc-card-action:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.tcc-card-action-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.tcc-card-action-primary:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.tcc-card-action-primary {
    background: linear-gradient(135deg, rgba(0, 243, 255, 0.2) 0%, rgba(0, 243, 255, 0.12) 100%);
    border: 1px solid rgba(0, 243, 255, 0.4);
    color: #00f3ff;
    box-shadow: 0 0 8px rgba(0, 243, 255, 0.1);
}
.tcc-card-action-primary:hover {
    background: linear-gradient(135deg, rgba(0, 243, 255, 0.3) 0%, rgba(0, 243, 255, 0.2) 100%);
    border-color: rgba(0, 243, 255, 0.7);
    box-shadow: 0 0 16px rgba(0, 243, 255, 0.25);
    transform: scale(1.02);
}
.tcc-card-action-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.tcc-card-action-secondary:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.tcc-card-action-secondary {
    background: rgba(30, 36, 53, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: rgba(148, 163, 184, 0.9);
}
.tcc-card-action-secondary:hover {
    border-color: rgba(0, 243, 255, 0.3);
    color: #00f3ff;
    background: rgba(0, 243, 255, 0.06);
}
.tcc-card-action-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.tcc-card-action-danger:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.tcc-card-action-danger {
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: rgba(252, 165, 165, 0.9);
    background: rgba(239, 68, 68, 0.05);
}
.tcc-card-action-danger:hover {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}
/* ========================================
   Template Cards
   ======================================== */
.tcc-template-card {
    background: rgba(26, 26, 46, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 243, 255, 0.15);
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    padding: 1.25rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
#workout-popup .tcc-template-card {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.tcc-template-card::before {
    content: '';
    pointer-events: none;
    position: absolute;
    inset: 0px;
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    background: radial-gradient(ellipse at 50% 0%, rgba(0, 243, 255, 0.06) 0%, transparent 70%);
}
.tcc-template-card:hover {
    border-color: rgba(0, 243, 255, 0.4);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.12), 0 8px 32px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}
.tcc-template-card:hover::before {
    opacity: 1;
}
.tcc-template-card {
    border-color: rgba(181, 55, 242, 0.2);
    background: rgba(26, 20, 40, 0.65);
}
.tcc-template-card:hover {
    border-color: rgba(181, 55, 242, 0.45);
    box-shadow: 0 0 20px rgba(181, 55, 242, 0.12), 0 8px 32px rgba(0, 0, 0, 0.3);
}
.tcc-template-badge {
    border-radius: 0.5rem;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    background: rgba(181, 55, 242, 0.12);
    border: 1px solid rgba(181, 55, 242, 0.3);
    color: #b537f2;
    text-shadow: 0 0 6px rgba(181, 55, 242, 0.4);
}
/* ========================================
   Search & Filter Bar
   ======================================== */
.tcc-search-bar {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .tcc-search-bar {
    gap: 1rem;
}
@media (min-width: 640px) {
    .tcc-search-bar {
        flex-direction: row;
    }
}
.tcc-search-input {
    flex: 1 1 0%;
    border-radius: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    background: rgba(26, 26, 46, 0.7);
    border: 1px solid rgba(0, 243, 255, 0.15);
    color: #e2e8f0;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.tcc-search-input::-moz-placeholder {
    color: rgba(148, 163, 184, 0.5);
}
.tcc-search-input::placeholder {
    color: rgba(148, 163, 184, 0.5);
}
.tcc-search-input:focus {
    outline: none;
    border-color: rgba(0, 243, 255, 0.5);
    box-shadow: 0 0 12px rgba(0, 243, 255, 0.15);
    background: rgba(26, 26, 46, 0.85);
}
.tcc-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .tcc-filter-group {
    gap: 0.75rem;
}
.tcc-filter-chip {
    cursor: pointer;
    border-radius: 0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    background: rgba(30, 36, 53, 0.6);
    border: 1px solid rgba(0, 243, 255, 0.15);
    color: rgba(148, 163, 184, 0.9);
}
.tcc-filter-chip:hover {
    border-color: rgba(0, 243, 255, 0.4);
    color: #00f3ff;
    background: rgba(0, 243, 255, 0.06);
}
.tcc-filter-chip.active {
    background: rgba(0, 243, 255, 0.12);
    border-color: rgba(0, 243, 255, 0.5);
    color: #00f3ff;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.15);
}
/* ========================================
   Preview Modal
   ======================================== */
.tcc-preview-overlay {
    position: fixed;
    inset: 0px;
    z-index: 50;
    background: rgba(10, 10, 20, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.tcc-preview-modal {
    background: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 243, 255, 0.25);
    box-shadow: 0 0 40px rgba(0, 243, 255, 0.1), 0 25px 60px rgba(0, 0, 0, 0.5);
    max-height: 90vh;
    width: 100%;
    max-width: 56rem;
    overflow: hidden;
    border-radius: 1rem;
}
#workout-popup .tcc-preview-modal {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.tcc-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(0, 243, 255, 0.12);
    background: rgba(0, 243, 255, 0.02);
}
.tcc-preview-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: #f1f5f9;
    text-shadow: 0 0 6px rgba(0, 243, 255, 0.2);
}
.tcc-preview-close {
    border-radius: 0.75rem;
    padding: 0.5rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    color: rgba(148, 163, 184, 0.7);
    border: 1px solid transparent;
}
.tcc-preview-close:hover {
    border-color: rgba(0, 243, 255, 0.3);
    color: #00f3ff;
    background: rgba(0, 243, 255, 0.08);
}
.tcc-preview-body {
    max-height: calc(90vh - 10rem);
    overflow-y: auto;
    padding: 1.5rem;
}
.tcc-preview-week-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.75rem;
}
body[data-easy-mode="on"] .tcc-preview-week-grid {
    gap: 1rem;
}
@media (min-width: 640px) {
    .tcc-preview-week-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}
.tcc-preview-day {
    background: rgba(26, 26, 46, 0.6);
    border: 1px solid rgba(0, 243, 255, 0.1);
    border-radius: 0.75rem;
    padding: 0.75rem;
}
.tcc-preview-day-header {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: rgba(0, 243, 255, 0.9);
}
.tcc-preview-day-content > :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));
}
.tcc-preview-workout {
    background: rgba(0, 243, 255, 0.06);
    border: 1px solid rgba(0, 243, 255, 0.15);
    border-radius: 0.5rem;
    padding: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: rgba(226, 232, 240, 0.9);
}
.tcc-preview-rest {
    font-size: 0.75rem;
    line-height: 1rem;
    font-style: italic;
    color: rgba(148, 163, 184, 0.5);
}
/* ========================================
   Action Buttons
   ======================================== */
.tcc-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    background: linear-gradient(135deg, rgba(0, 243, 255, 0.2) 0%, rgba(0, 243, 255, 0.1) 100%);
    border: 1px solid rgba(0, 243, 255, 0.45);
    color: #00f3ff;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.12);
}
.tcc-btn-primary:hover {
    background: linear-gradient(135deg, rgba(0, 243, 255, 0.3) 0%, rgba(0, 243, 255, 0.18) 100%);
    border-color: rgba(0, 243, 255, 0.7);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.25), 0 0 40px rgba(0, 243, 255, 0.1);
    transform: translateY(-1px);
}
.tcc-btn-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 243, 255, 0.5);
}
.tcc-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    background: rgba(30, 36, 53, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: rgba(148, 163, 184, 0.9);
}
.tcc-btn-secondary:hover {
    border-color: rgba(0, 243, 255, 0.3);
    color: #00f3ff;
    background: rgba(0, 243, 255, 0.06);
}
.tcc-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: rgba(252, 165, 165, 0.9);
}
.tcc-btn-danger:hover {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.55);
    color: #fca5a5;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.15);
}
/* ========================================
   Toggle Switches
   ======================================== */
.tcc-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.75rem;
}
body[data-easy-mode="on"] .tcc-toggle-label {
    gap: 1rem;
}
.tcc-toggle-label {
    background: rgba(26, 26, 46, 0.6);
    border: 1px solid rgba(0, 243, 255, 0.12);
    cursor: pointer;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    color: rgba(226, 232, 240, 0.85);
}
.tcc-toggle-label:hover {
    border-color: rgba(0, 243, 255, 0.25);
    background: rgba(0, 243, 255, 0.04);
}
.tcc-toggle-switch {
    position: relative;
    display: inline-flex;
    height: 1.25rem;
    width: 2.25rem;
    align-items: center;
    border-radius: 9999px;
    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: 200ms;
    background: rgba(30, 36, 53, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.2);
}
.tcc-toggle-switch.checked {
    background: rgba(0, 243, 255, 0.25);
    border-color: rgba(0, 243, 255, 0.5);
    box-shadow: 0 0 8px rgba(0, 243, 255, 0.2);
}
.tcc-toggle-dot {
    display: inline-block;
    height: 1rem;
    width: 1rem;
    --tw-translate-x: 0.125rem;
    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));
    border-radius: 9999px;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    background: rgba(148, 163, 184, 0.5);
}
.tcc-toggle-switch.checked .tcc-toggle-dot,
.tcc-toggle-dot.checked {
    --tw-translate-x: 1rem;
    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));
    background: #00f3ff;
    box-shadow: 0 0 6px rgba(0, 243, 255, 0.8);
}
/* ========================================
   Responsive Adjustments
   ======================================== */
@media (max-width: 640px) {
    .tcc-insights-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .tcc-insight-item:not(:last-child)::after {
        display: none;
    }
    
    .tcc-card-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    
    .tcc-active-meta {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    
    .tcc-preview-week-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}
/* ========================================
   Utility Classes
   ======================================== */
.auth-fields-block.tcc-hidden {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
        pointer-events: none;
    }
.profile-phone-country-dropdown.tcc-hidden {
        display: none;
    }
#profile-phone-country.tcc-hidden {
        display: none;
    }
.tcc-hidden {
    display: none;
}
#task-drawer.tcc-hidden .sm\:w-96,
#workout-drawer.tcc-hidden .sm\:w-\[28rem\] {
  transform: translateX(24px);
}
.day-tab-panel.tcc-hidden {
  display: none;
}
.day-tab-panel:not(.tcc-hidden) {
  animation: sectionEnter 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .day-tab-panel:not(.tcc-hidden) {
    animation: none;
  }
}
.tcc-fade-enter {
    opacity: 0;
}
.tcc-fade-enter-active {
    opacity: 1;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.tcc-fade-exit {
    opacity: 1;
}
.tcc-fade-exit-active {
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
/* ========================================
   Page-level header (neon gradient)
   ======================================== */
.tcc-page-title {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #f1f5f9;
}
.tcc-page-subtitle {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgba(148, 163, 184, 0.75);
}
.tcc-section-title {
    margin-bottom: 1rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: #e2e8f0;
}
/* Product pages and widgets */
/**
 * Training Vault – Component Styles
 *
 * Premium knowledge system layout: metrics strip, sidebar filters,
 * card grid, hover actions, and smooth transitions.
 */
/* ── Metrics Strip ──────────────────────────────────────────── */
.vault-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
body[data-easy-mode="on"] .vault-metrics {
    gap: 1rem;
}
@media (min-width: 640px) {
    .vault-metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.vault-metric-card {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    --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);
}
.vault-metric-card:is(.dark *) {
    border-color: rgb(255 255 255 / 0.1);
    background-color: rgb(255 255 255 / 0.05);
}
.vault-metric-value {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    line-height: 1;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.vault-metric-value:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.vault-metric-label {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.vault-metric-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.vault-metric-accent {
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .vault-metric-accent {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.vault-metric-accent:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.vault-metric-accent:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.vault-metric-accent:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
/* ── Page Layout ────────────────────────────────────────────── */
.vault-layout {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 80rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
@media (min-width: 640px) {
    .vault-layout {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .vault-layout {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
.vault-body {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
@media (min-width: 1024px) {
    .vault-body {
        flex-direction: row;
        align-items: flex-start;
    }
}
/* ── Sidebar ────────────────────────────────────────────────── */
.vault-sidebar {
    width: 100%;
    flex-shrink: 0;
}
@media (min-width: 1024px) {
    .vault-sidebar {
        width: 16rem;
    }
}
.vault-sidebar-panel {
    position: sticky;
    top: 5rem;
    overflow: hidden;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --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);
}
.vault-sidebar-panel:is(.dark *) {
    border-color: rgb(255 255 255 / 0.1);
    background-color: rgb(255 255 255 / 0.05);
}
.vault-sidebar-section {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
    padding: 1rem;
}
.vault-sidebar-section:last-child {
    border-bottom-width: 0px;
}
.vault-sidebar-section:is(.dark *) {
    border-color: rgb(255 255 255 / 0.1);
}
.vault-sidebar-title {
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.vault-sidebar-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.vault-filter-btn {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
    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;
}
body[data-easy-mode="on"] .vault-filter-btn {
    gap: 0.75rem;
}
.vault-filter-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.vault-filter-btn:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.vault-filter-btn:hover:is(.dark *) {
    background-color: rgb(255 255 255 / 0.05);
}
.vault-filter-btn.active {
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.vault-filter-btn.active:is(.dark *) {
    background-color: rgb(16 185 129 / 0.1);
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.vault-filter-count {
    margin-left: auto;
    font-size: 0.75rem;
    line-height: 1rem;
    --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);
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.vault-filter-count:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
/* ── Main Panel ─────────────────────────────────────────────── */
.vault-main {
    min-width: 0px;
    flex: 1 1 0%;
}
.vault-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    --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);
}
body[data-easy-mode="on"] .vault-toolbar {
    gap: 1rem;
}
.vault-toolbar:is(.dark *) {
    border-color: rgb(255 255 255 / 0.1);
    background-color: rgb(255 255 255 / 0.05);
}
@media (min-width: 640px) {
    .vault-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
.vault-search-wrap {
    position: relative;
    min-width: 0px;
    flex: 1 1 0%;
}
.vault-search-icon {
    pointer-events: none;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0.75rem;
    display: flex;
    align-items: center;
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.vault-search-icon:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.vault-search-input {
    width: 100%;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 2.25rem;
    padding-right: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
    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;
}
.vault-search-input::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.vault-search-input::placeholder {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.vault-search-input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-color: rgb(52 211 153 / 0.4);
}
.vault-search-input:is(.dark *) {
    border-color: rgb(255 255 255 / 0.1);
    background-color: rgb(255 255 255 / 0.05);
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.vault-search-input:is(.dark *)::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.vault-search-input:is(.dark *)::placeholder {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.vault-toolbar-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .vault-toolbar-actions {
    gap: 0.75rem;
}
.vault-sort-select {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
    --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);
    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;
}
.vault-sort-select:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-color: rgb(52 211 153 / 0.4);
}
.vault-sort-select:is(.dark *) {
    border-color: rgb(255 255 255 / 0.1);
    background-color: rgb(255 255 255 / 0.05);
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.vault-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --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);
    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;
}
.color-blind .vault-new-btn {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
.color-blind .vault-new-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1)); /* Teal-700 */
}
.vault-new-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}
.vault-new-btn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-color: rgb(16 185 129 / 0.3);
}
/* ── Active Filters Bar ─────────────────────────────────────── */
.vault-active-filters {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .vault-active-filters {
    gap: 0.75rem;
}
.vault-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 9999px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.vault-filter-chip:is(.dark *) {
    border-color: rgb(4 120 87 / 0.4);
    background-color: rgb(16 185 129 / 0.1);
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.vault-filter-chip-remove {
    margin-left: 0.125rem;
    cursor: pointer;
    --tw-text-opacity: 1;
    color: rgb(16 185 129 / var(--tw-text-opacity, 1));
    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;
}

.color-blind .vault-filter-chip-remove {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.vault-filter-chip-remove:hover {
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.vault-filter-chip-remove:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(167 243 208 / var(--tw-text-opacity, 1));
}
/* ── Note Cards ─────────────────────────────────────────────── */
.vault-cards {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}
body[data-easy-mode="on"] .vault-cards {
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .vault-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.vault-card {
    position: relative;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.25rem;
    --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);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.vault-card:hover {
    --tw-translate-y: -0.125rem;
    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));
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    --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);
}
.vault-card:is(.dark *) {
    border-color: rgb(255 255 255 / 0.1);
    background-color: rgb(255 255 255 / 0.05);
}
.vault-card:hover:is(.dark *) {
    border-color: rgb(255 255 255 / 0.2);
}
.vault-card.pinned {
    --tw-border-opacity: 1;
    border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
    background-color: rgb(236 253 245 / 0.3);
}
.vault-card.pinned:is(.dark *) {
    border-color: rgb(5 150 105 / 0.3);
    background-color: rgb(16 185 129 / 0.05);
}
.vault-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .vault-card-header {
    gap: 0.75rem;
}
.vault-card-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}
.vault-type-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
}
.vault-type-badge.TRAINING {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.vault-type-badge.TRAINING:is(.dark *) {
    background-color: rgb(30 58 138 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.vault-type-badge.NUTRITION {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.vault-type-badge.NUTRITION:is(.dark *) {
    background-color: rgb(20 83 45 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}
.vault-type-badge.INJURY {
    --tw-bg-opacity: 1;
    background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}
.vault-type-badge.INJURY:is(.dark *) {
    background-color: rgb(136 19 55 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}
.vault-type-badge.GOAL {
    --tw-bg-opacity: 1;
    background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.vault-type-badge.GOAL:is(.dark *) {
    background-color: rgb(120 53 15 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.vault-type-badge.REFLECTION {
    --tw-bg-opacity: 1;
    background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}
.vault-type-badge.REFLECTION:is(.dark *) {
    background-color: rgb(88 28 135 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}
.vault-type-badge.CHECKIN {
    --tw-bg-opacity: 1;
    background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(3 105 161 / var(--tw-text-opacity, 1));
}
.vault-type-badge.CHECKIN:is(.dark *) {
    background-color: rgb(12 74 110 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(125 211 252 / var(--tw-text-opacity, 1));
}
.vault-pin-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.vault-pin-badge:is(.dark *) {
    background-color: rgb(6 78 59 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.vault-mood-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.vault-mood-badge:is(.dark *) {
    background-color: rgb(255 255 255 / 0.1);
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.vault-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(237 233 254 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(109 40 217 / var(--tw-text-opacity, 1));
}
.vault-ai-badge:is(.dark *) {
    background-color: rgb(76 29 149 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(196 181 253 / var(--tw-text-opacity, 1));
}
.vault-card-title {
    margin-top: 0.625rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    line-height: 1.375;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
    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;
}
.group:hover .vault-card-title {
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.vault-card-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.group:hover .vault-card-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.vault-card-preview {
    margin-top: 0.375rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.875rem;
    line-height: 1.25rem;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.vault-card-preview:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.vault-card-footer {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .vault-card-footer {
    gap: 0.75rem;
}
.vault-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.vault-tag {
    display: inline-flex;
    align-items: center;
    border-radius: 0.375rem;
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.vault-tag:is(.dark *) {
    background-color: rgb(255 255 255 / 0.1);
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.vault-card-date {
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.vault-card-date:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
/* Hover actions overlay */
.vault-card-actions {
    pointer-events: none;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
    border-bottom-right-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
    --tw-gradient-from: #fff var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.group:hover .vault-card-actions {
    pointer-events: auto;
    opacity: 1;
}
.vault-card-actions:is(.dark *) {
    --tw-gradient-from: rgb(15 23 42 / 0.8) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.vault-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
    --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);
    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: 100ms;
}
.vault-action-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.vault-action-btn:is(.dark *) {
    border-color: rgb(255 255 255 / 0.1);
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.vault-action-btn:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.vault-action-btn.destructive {
    --tw-border-opacity: 1;
    border-color: rgb(254 205 211 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}
.vault-action-btn.destructive:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}
.vault-action-btn.destructive:is(.dark *) {
    border-color: rgb(159 18 57 / 0.4);
    --tw-text-opacity: 1;
    color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}
.vault-action-btn.destructive:hover:is(.dark *) {
    background-color: rgb(136 19 55 / 0.2);
}
/* ── Empty State ────────────────────────────────────────────── */
.vault-empty {
    margin-top: 1rem;
    border-radius: 0.75rem;
    border-width: 2px;
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 2.5rem;
    text-align: center;
}
.vault-empty:is(.dark *) {
    border-color: rgb(255 255 255 / 0.1);
    background-color: rgb(255 255 255 / 0.05);
}
.vault-empty-icon {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    display: flex;
    height: 3.5rem;
    width: 3.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .vault-empty-icon {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.vault-empty-icon:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.vault-empty-icon:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.vault-empty-icon:is(.dark *) {
    background-color: rgb(16 185 129 / 0.1);
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.vault-empty-title {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.vault-empty-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.vault-empty-body {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.25rem;
    max-width: 20rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.vault-empty-body:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
/* ── AI Insight Panel (top of vault) ────────────────────────── */
.vault-ai-panel {
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(221 214 254 / var(--tw-border-opacity, 1));
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: #f5f3ff var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(245 243 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #fff var(--tw-gradient-to-position);
    padding: 1rem;
    --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);
}
.vault-ai-panel:is(.dark *) {
    border-color: rgb(109 40 217 / 0.3);
    --tw-gradient-from: rgb(76 29 149 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(76 29 149 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(255 255 255 / 0.05) var(--tw-gradient-to-position);
}
.vault-ai-panel-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(76 29 149 / var(--tw-text-opacity, 1));
}
body[data-easy-mode="on"] .vault-ai-panel-title {
    gap: 0.75rem;
}
.vault-ai-panel-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(221 214 254 / var(--tw-text-opacity, 1));
}
.vault-ai-panel-body {
    margin-top: 0.5rem;
    white-space: pre-wrap;
    font-size: 0.875rem;
    line-height: 1.25rem;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(91 33 182 / var(--tw-text-opacity, 1));
}
.vault-ai-panel-body:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(196 181 253 / var(--tw-text-opacity, 1));
}
/* ── Responsive Adjustments ─────────────────────────────────── */
@media (max-width: 640px) {
    .vault-cards {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .vault-card-actions {
        pointer-events: auto;
        position: static;
        margin-top: 0.75rem;
        justify-content: flex-start;
        border-radius: 0px;
        background-image: none;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        opacity: 1;
    }
}
/* ===== Timeline day tooltip (outside @layer to avoid specificity issues) ===== */
.cd-day-tooltip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    padding: 0.4rem 0.7rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    color: #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.cd-day-tooltip--visible {
    opacity: 1;
    transform: translateY(0);
}
.cd-tip-task  { color: #34d399; }
.cd-tip-workout { color: #60a5fa; }
.cd-tip-empty { color: #64748b; }
html:not(.dark) .cd-day-tooltip {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(0, 0, 0, 0.1);
    color: #1e293b;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
html:not(.dark) .cd-tip-task    { color: #059669; }
html:not(.dark) .cd-tip-workout { color: #2563eb; }
html:not(.dark) .cd-tip-empty   { color: #94a3b8; }
/* ===== Client Dashboard Professional Palette Override ===== */
[data-dashboard-role="CLIENT"] {
    color: #0f172a;
}
[data-dashboard-role="CLIENT"] .gradient-text {
    background: none !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: #0f172a !important;
}
[data-dashboard-role="CLIENT"] .card-neon,
[data-dashboard-role="CLIENT"] [class*="card--"] {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 8px 24px -16px rgba(15, 23, 42, 0.25) !important;
}
[data-dashboard-role="CLIENT"] .card--green {
    border-color: rgba(16, 185, 129, 0.38) !important;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.09), rgba(255, 255, 255, 0.98)) !important;
}
[data-dashboard-role="CLIENT"] .card--cyan,
[data-dashboard-role="CLIENT"] .card--blue,
[data-dashboard-role="CLIENT"] .card--purple {
    border-color: rgba(96, 165, 250, 0.32) !important;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.08), rgba(255, 255, 255, 0.98)) !important;
}
[data-dashboard-role="CLIENT"] .neon-bar {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.9), rgba(245, 158, 11, 0.9)) !important;
}
[data-dashboard-role="CLIENT"] .btn--primary {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border-color: rgba(5, 150, 105, 0.9) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px -12px rgba(16, 185, 129, 0.6) !important;
}
[data-dashboard-role="CLIENT"] .btn--primary:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
}
[data-dashboard-role="CLIENT"] .btn--secondary {
    border-color: rgba(96, 165, 250, 0.35) !important;
    background: rgba(96, 165, 250, 0.09) !important;
    color: #1d4ed8 !important;
}
[data-dashboard-role="CLIENT"] .btn--secondary:hover {
    background: rgba(96, 165, 250, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.45) !important;
}
[data-dashboard-role="CLIENT"] [class*="text-neon-green"] { color: #059669 !important; }
[data-dashboard-role="CLIENT"] [class*="text-neon-cyan"],
[data-dashboard-role="CLIENT"] [class*="text-neon-blue"],
[data-dashboard-role="CLIENT"] [class*="text-neon-purple"] { color: #3b82f6 !important; }
[data-dashboard-role="CLIENT"] [class*="text-neon-pink"] { color: #f59e0b !important; }
[data-dashboard-role="CLIENT"] [class*="bg-neon-green"] { background-color: rgba(16, 185, 129, 0.12) !important; }
[data-dashboard-role="CLIENT"] [class*="bg-neon-cyan"],
[data-dashboard-role="CLIENT"] [class*="bg-neon-blue"],
[data-dashboard-role="CLIENT"] [class*="bg-neon-purple"] { background-color: rgba(96, 165, 250, 0.12) !important; }
[data-dashboard-role="CLIENT"] [class*="bg-neon-pink"] { background-color: rgba(245, 158, 11, 0.14) !important; }
[data-dashboard-role="CLIENT"] [class*="border-neon-green"] { border-color: rgba(16, 185, 129, 0.38) !important; }
[data-dashboard-role="CLIENT"] [class*="border-neon-cyan"],
[data-dashboard-role="CLIENT"] [class*="border-neon-blue"],
[data-dashboard-role="CLIENT"] [class*="border-neon-purple"] { border-color: rgba(96, 165, 250, 0.36) !important; }
[data-dashboard-role="CLIENT"] [class*="border-neon-pink"] { border-color: rgba(245, 158, 11, 0.38) !important; }
[data-dashboard-role="CLIENT"] [class*="text-indigo-"] { color: #2563eb !important; }
[data-dashboard-role="CLIENT"] [class*="bg-indigo-"] { background-color: rgba(96, 165, 250, 0.12) !important; }
[data-dashboard-role="CLIENT"] [class*="border-indigo-"] { border-color: rgba(96, 165, 250, 0.34) !important; }
[data-dashboard-role="CLIENT"] [class*="ring-neon-"] {
    --tw-ring-color: rgba(96, 165, 250, 0.28) !important;
}
[data-dashboard-role="CLIENT"] [class*="shadow-neon-"] {
    box-shadow: 0 10px 24px -16px rgba(15, 23, 42, 0.28) !important;
}
[data-dashboard-role="CLIENT"] [class*="bg-cyber-"] {
    background: rgba(15, 23, 42, 0.04) !important;
}
[data-dashboard-role="CLIENT"] [class*="border-cyber-"] {
    border-color: rgba(15, 23, 42, 0.14) !important;
}
[data-dashboard-role="CLIENT"] [class*="from-neon-"] {
    --tw-gradient-from: rgba(96, 165, 250, 0.12) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(255, 255, 255, 0.98) var(--tw-gradient-to-position) !important;
}
[data-dashboard-role="CLIENT"] [class*="to-neon-"] {
    --tw-gradient-to: rgba(255, 255, 255, 0.98) var(--tw-gradient-to-position) !important;
}
.dark [data-dashboard-role="CLIENT"] {
    color: #f8fafc;
}
.dark [data-dashboard-role="CLIENT"] .card-neon,
.dark [data-dashboard-role="CLIENT"] [class*="card--"] {
    background: rgba(2, 6, 23, 0.84) !important;
    border-color: rgba(148, 163, 184, 0.24) !important;
    box-shadow: 0 10px 24px -16px rgba(2, 6, 23, 0.8) !important;
}
.dark [data-dashboard-role="CLIENT"] .card--green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(2, 6, 23, 0.86)) !important;
}
.dark [data-dashboard-role="CLIENT"] .card--cyan,
.dark [data-dashboard-role="CLIENT"] .card--blue,
.dark [data-dashboard-role="CLIENT"] .card--purple {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.16), rgba(2, 6, 23, 0.86)) !important;
}
.dark [data-dashboard-role="CLIENT"] .btn--secondary {
    background: rgba(96, 165, 250, 0.14) !important;
    color: #bfdbfe !important;
}
.dark [data-dashboard-role="CLIENT"] [class*="bg-cyber-"] {
    background: rgba(15, 23, 42, 0.68) !important;
}
.dark [data-dashboard-role="CLIENT"] [class*="border-cyber-"] {
    border-color: rgba(148, 163, 184, 0.28) !important;
}
/* ===== Typography & Spacing Refinement - Premium SaaS ===== */
[data-dashboard-role="CLIENT"] .cd-header__label {
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
}
[data-dashboard-role="CLIENT"] .cd-header__name {
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.15 !important;
    font-size: 2.5rem !important;
}
[data-dashboard-role="CLIENT"] .cd-header__subtitle {
    color: #64748b !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
}
[data-dashboard-role="CLIENT"] .cd-date-badge__label,
[data-dashboard-role="CLIENT"] .cd-date-badge__day {
    letter-spacing: 0.07em !important;
    font-weight: 700 !important;
}
[data-dashboard-role="CLIENT"] .cd-date-badge__date {
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
}
/* Stat Card Typography - Premium Hierarchy */
[data-dashboard-role="CLIENT"] .cd-stat {
    padding: 1.25rem !important;
}
[data-dashboard-role="CLIENT"] .cd-stat__value {
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
    font-size: 2.25rem !important;
    margin-bottom: 0.5rem !important;
}
[data-dashboard-role="CLIENT"] .cd-stat__label {
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    font-size: 0.7rem !important;
    color: #475569 !important;
}
[data-dashboard-role="CLIENT"] .cd-stat__cta {
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    font-size: 0.75rem !important;
    margin-top: 0.75rem !important;
}
/* Timeline Card Typography */
[data-dashboard-role="CLIENT"] .cd-day__label {
    font-weight: 700 !important;
    letter-spacing: 0.058em !important;
    font-size: 0.65rem !important;
    margin-bottom: 0.5rem !important;
}
[data-dashboard-role="CLIENT"] .cd-day__number {
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    margin-bottom: 0.75rem !important;
}
[data-dashboard-role="CLIENT"] .cd-day__badge {
    font-weight: 700 !important;
    letter-spacing: 0.005em !important;
    font-size: 0.7rem !important;
}
/* Section Headers - Premium Feel */
[data-dashboard-role="CLIENT"] .section-header {
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
}
[data-dashboard-role="CLIENT"] .section-subheader {
    font-weight: 600 !important;
    letter-spacing: 0.025em !important;
    color: #64748b !important;
    font-size: 0.875rem !important;
    margin-bottom: 1.5rem !important;
}
/* Button Typography Refinement */
[data-dashboard-role="CLIENT"] .btn--primary,
[data-dashboard-role="CLIENT"] .btn--secondary {
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
}
/* Activity Timeline Typography */
[data-dashboard-role="CLIENT"] .activity-item__title {
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: #0f172a !important;
}
[data-dashboard-role="CLIENT"] .activity-item__meta {
    font-weight: 500 !important;
    letter-spacing: 0.005em !important;
    color: #78909c !important;
    font-size: 0.8rem !important;
}
/* Card Title Refinement */
[data-dashboard-role="CLIENT"] .card-title {
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.3 !important;
    color: #0f172a !important;
}
[data-dashboard-role="CLIENT"] .card-subtitle {
    font-weight: 500 !important;
    color: #64748b !important;
    letter-spacing: 0.01em !important;
}
/* Dark Mode Typography Parity */
.dark [data-dashboard-role="CLIENT"] .cd-header__label,
.dark [data-dashboard-role="CLIENT"] .cd-date-badge__day,
.dark [data-dashboard-role="CLIENT"] .cd-day__label {
    color: #6ee7b7 !important;
}
.dark [data-dashboard-role="CLIENT"] .cd-stat__label,
.dark [data-dashboard-role="CLIENT"] .section-subheader,
.dark [data-dashboard-role="CLIENT"] .activity-item__meta {
    color: #cbd5e1 !important;
}
.dark [data-dashboard-role="CLIENT"] .card-title {
    color: #f1f5f9 !important;
}
/* Coach Bot Chat Widget - Premium AI Command Layer Design */
/* chat-page.css – Pro AI Command Centre styles */
/* ── Time-of-day CSS variables ───────────────────────────────────────────── */
/* Applied via body[data-time-theme="..."] or the #coachChatPage wrapper */
#coachChatPage {
  --chat-accent-h: 160;     /* emerald hue */
  --chat-glow-opacity: 0.06;
  transition: background 0.8s ease;
}
/* Morning: fresh, light, slate-cool */
body[data-time-theme="morning"] #coachChatPage,
#coachChatPage[data-chat-time="morning"] {
  --chat-accent-h: 190;
  --chat-glow-opacity: 0.07;
  background: linear-gradient(135deg,
    rgba(240, 249, 255, 0.6) 0%,
    rgba(224, 242, 254, 0.4) 100%);
}
/* Midday: neutral, bright */
body[data-time-theme="midday"] #coachChatPage,
#coachChatPage[data-chat-time="midday"] {
  --chat-accent-h: 160;
  --chat-glow-opacity: 0.06;
  background: transparent;
}
/* Evening: warm tones */
body[data-time-theme="evening"] #coachChatPage,
#coachChatPage[data-chat-time="evening"] {
  --chat-accent-h: 35;
  --chat-glow-opacity: 0.08;
  background: linear-gradient(135deg,
    rgba(255, 247, 237, 0.5) 0%,
    rgba(254, 243, 199, 0.3) 100%);
}
/* Night: dark, cool, subtle */
body[data-time-theme="night"] #coachChatPage,
#coachChatPage[data-chat-time="night"] {
  --chat-accent-h: 230;
  --chat-glow-opacity: 0.05;
  background: linear-gradient(135deg,
    rgba(15, 23, 42, 0.6) 0%,
    rgba(30, 41, 59, 0.4) 100%);
}
/* Dark mode: preserve tones, keep them subtle */
.dark body[data-time-theme="morning"] #coachChatPage,
.dark #coachChatPage[data-chat-time="morning"],
.dark body[data-time-theme="evening"] #coachChatPage,
.dark #coachChatPage[data-chat-time="evening"] {
  background: transparent;
}
/* ── Action chips ────────────────────────────────────────────────────────── */
.chat-action-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.06);
  color: rgb(5, 150, 105);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.chat-action-chip:hover {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.5);
  transform: translateY(-1px);
}
.chat-action-chip:active {
  transform: translateY(0);
}
.dark .chat-action-chip {
  border-color: rgba(52, 211, 153, 0.3);
  background: rgba(52, 211, 153, 0.08);
  color: rgb(52, 211, 153);
}
.dark .chat-action-chip:hover {
  background: rgba(52, 211, 153, 0.18);
  border-color: rgba(52, 211, 153, 0.5);
}
/* ── Focus Mode ──────────────────────────────────────────────────────────── */
#coachChatPage.focus-mode .chat-sidebar-left,
#coachChatPage.focus-mode .chat-sidebar-right {
  display: none;
}
#coachChatPage.focus-mode .chat-main {
  grid-column: 1 / -1;
}
/* ── Live Metrics panel ──────────────────────────────────────────────────── */
.metrics-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
}
.metrics-ring svg {
  transform: rotate(-90deg);
}
.metrics-ring__value {
  position: absolute;
  font-size: 0.625rem;
  font-weight: 700;
  color: rgb(5, 150, 105);
}
/* Metric card rows */
.metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  background: rgba(248, 250, 252, 0.8);
  border: 1px solid rgba(226, 232, 240, 0.7);
  font-size: 0.75rem;
  transition: background 0.15s ease;
}
.dark .metric-row {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(30, 41, 59, 0.6);
}
.metric-row__label {
  color: rgb(100, 116, 139);
  font-weight: 500;
}
.metric-row__value {
  font-weight: 700;
  color: rgb(15, 23, 42);
}
.dark .metric-row__value {
  color: rgb(241, 245, 249);
}
/* ── Greeting / zero-blank state card ───────────────────────────────────── */
.chat-greeting-card {
  border-radius: 1rem;
  border: 1px solid rgba(16, 185, 129, 0.2);
  background: linear-gradient(135deg,
    rgba(240, 253, 244, 0.9) 0%,
    rgba(255, 255, 255, 0.8) 100%);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 4px rgba(16, 185, 129, 0.08);
}
.dark .chat-greeting-card {
  background: linear-gradient(135deg,
    rgba(6, 78, 59, 0.2) 0%,
    rgba(15, 23, 42, 0.6) 100%);
  border-color: rgba(52, 211, 153, 0.2);
}
.chat-greeting-card__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgb(5, 150, 105);
}
.dark .chat-greeting-card__title {
  color: rgb(52, 211, 153);
}
.chat-greeting-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.chat-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  font-size: 0.7rem;
  color: rgb(4, 120, 87);
  font-weight: 500;
}
.dark .chat-stat-pill {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.25);
  color: rgb(52, 211, 153);
}
/* ── Focus mode toggle button ────────────────────────────────────────────── */
.chat-focus-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(226, 232, 240, 0.7);
  background: transparent;
  color: rgb(100, 116, 139);
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.chat-focus-btn:hover {
  background: rgba(226, 232, 240, 0.5);
  color: rgb(51, 65, 85);
}
.chat-focus-btn.active {
  background: rgba(15, 23, 42, 0.08);
  color: rgb(15, 23, 42);
  border-color: rgba(15, 23, 42, 0.2);
}
.dark .chat-focus-btn {
  border-color: rgba(51, 65, 85, 0.7);
  color: rgb(148, 163, 184);
}
.dark .chat-focus-btn:hover {
  background: rgba(51, 65, 85, 0.4);
  color: rgb(203, 213, 225);
}
.dark .chat-focus-btn.active {
  background: rgba(241, 245, 249, 0.1);
  color: rgb(241, 245, 249);
  border-color: rgba(241, 245, 249, 0.2);
}
/* Smooth sidebar transitions */
.chat-sidebar-left,
.chat-sidebar-right {
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#coachChatPage.focus-mode .chat-sidebar-left,
#coachChatPage.focus-mode .chat-sidebar-right {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: none;
}
/* Quick Actions Widget - Premium Design (Aligned with Chat Widget) */
/* ─── Workout Player ─────────────────────────────────────────── */
/* Pre-flight page */
.wp-preflight {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 42rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
@media (min-width: 640px) {
    .wp-preflight {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
.wp-preflight-header {
    margin-bottom: 1.5rem;
    border-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    --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);
}
#workout-popup .wp-preflight-header {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.wp-preflight-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.wp-preflight-label {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .wp-preflight-label {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.wp-preflight-label:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.wp-preflight-label:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.wp-preflight-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.wp-preflight-title {
    margin-top: 0.25rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.wp-preflight-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.wp-preflight-meta {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.wp-preflight-meta:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.wp-preflight-exercises {
    margin-bottom: 1.5rem;
    overflow: hidden;
    border-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --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);
}
#workout-popup .wp-preflight-exercises {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.wp-preflight-exercises:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.wp-preflight-exercise-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
body[data-easy-mode="on"] .wp-preflight-exercise-row {
    gap: 1rem;
}
.wp-preflight-exercise-row:last-child {
    border-bottom-width: 0px;
}
.wp-preflight-exercise-row:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
}
.wp-preflight-exercise-idx {
    display: flex;
    height: 1.5rem;
    width: 1.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.wp-preflight-exercise-idx:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.wp-preflight-exercise-name {
    flex: 1 1 0%;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.wp-preflight-exercise-name:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.wp-preflight-exercise-badge {
    border-radius: 9999px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
.wp-preflight-exercise-badge-cardio {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.wp-preflight-exercise-badge-cardio:is(.dark *) {
    background-color: rgb(30 58 138 / 0.4);
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.wp-preflight-exercise-badge-core {
    --tw-bg-opacity: 1;
    background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.wp-preflight-exercise-badge-core:is(.dark *) {
    background-color: rgb(120 53 15 / 0.4);
    --tw-text-opacity: 1;
    color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.wp-preflight-exercise-badge-strength {
    --tw-bg-opacity: 1;
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.wp-preflight-exercise-badge-strength:is(.dark *) {
    background-color: rgb(6 78 59 / 0.4);
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.wp-preflight-exercise-badge-default {
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.wp-preflight-exercise-badge-default:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.wp-preflight-exercise-badge-superset {
    --tw-bg-opacity: 1;
    background-color: rgb(237 233 254 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(109 40 217 / var(--tw-text-opacity, 1));
}
.wp-preflight-exercise-badge-superset:is(.dark *) {
    background-color: rgb(76 29 149 / 0.4);
    --tw-text-opacity: 1;
    color: rgb(196 181 253 / var(--tw-text-opacity, 1));
}
.wp-preflight-exercise-badge-dropset {
    --tw-bg-opacity: 1;
    background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.wp-preflight-exercise-badge-dropset:is(.dark *) {
    background-color: rgb(120 53 15 / 0.4);
    --tw-text-opacity: 1;
    color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
/* Start workout button */
.wp-start-btn {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --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);
    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;
}
.color-blind .wp-start-btn {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
.color-blind .wp-start-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1)); /* Teal-700 */
}
body[data-easy-mode="on"] .wp-start-btn {
    gap: 0.75rem;
}
#workout-popup .wp-start-btn {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.wp-start-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}
.wp-start-btn:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
    --tw-ring-offset-width: 2px;
}
.wp-start-btn: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));
}
/* ─── Player layout ──────────────────────────────────────────── */
.wp-player {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 48rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 6rem;
    padding-top: 1rem;
}
@media (min-width: 640px) {
    .wp-player {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
.wp-player-header {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .wp-player-header {
    gap: 1rem;
}
.wp-player-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.wp-player-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.wp-player-back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.wp-player-back:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.wp-player-back:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.wp-player-back:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
/* Progress bar */
.wp-progress-bar-track {
    margin-bottom: 1.25rem;
    height: 0.5rem;
    width: 100%;
    overflow: hidden;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.wp-progress-bar-track:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.wp-progress-bar-fill {
    height: 100%;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
}

.color-blind .wp-progress-bar-fill {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
/* Summary bar */
.wp-summary {
    margin-bottom: 1.25rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}
body[data-easy-mode="on"] .wp-summary {
    gap: 1rem;
}
.wp-summary-card {
    border-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 0.75rem;
    text-align: center;
    --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);
}
#workout-popup .wp-summary-card {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.wp-summary-card:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.wp-summary-value {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.wp-summary-value:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.wp-summary-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.wp-summary-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
/* Exercise cards */
.wp-exercise-card {
    margin-bottom: 1rem;
    overflow: hidden;
    border-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --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);
}
#workout-popup .wp-exercise-card {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.wp-exercise-card:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.wp-exercise-card.is-completed {
    --tw-border-opacity: 1;
    border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}
.wp-exercise-card.is-completed:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(4 120 87 / var(--tw-border-opacity, 1));
}
.wp-exercise-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
body[data-easy-mode="on"] .wp-exercise-card-header {
    gap: 1rem;
}
.wp-exercise-card-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
}
.wp-exercise-drag-handle {
    display: flex;
    flex-shrink: 0;
    cursor: grab;
    flex-direction: column;
    gap: 3px;
}
.wp-exercise-drag-handle:active {
    cursor: grabbing;
}
.wp-exercise-drag-dot {
    height: 3px;
    width: 1rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}
.wp-exercise-drag-dot:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}
.wp-exercise-name {
    flex: 1 1 0%;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.wp-exercise-name:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.wp-exercise-category-badge {
    border-radius: 9999px;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
.wp-reorder-btn {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
    padding: 0.25rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
    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;
}
.wp-reorder-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.wp-reorder-btn:disabled {
    opacity: 0.3;
}
.wp-reorder-btn:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.wp-reorder-btn:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
/* Timer panel */
.wp-timer-panel {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
body[data-easy-mode="on"] .wp-timer-panel {
    gap: 1rem;
}
.wp-timer-panel:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    background-color: rgb(15 23 42 / 0.6);
}
.wp-timer-display {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    --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);
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.wp-timer-display:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.wp-timer-start {
    border-radius: 0.75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.color-blind .wp-timer-start {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
.color-blind .wp-timer-start:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1)); /* Teal-700 */
}
.wp-timer-start:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}
.wp-timer-stop {
    border-radius: 0.75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.wp-timer-stop:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1));
}
.wp-timer-reset {
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.wp-timer-reset:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.wp-timer-reset:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.wp-timer-input {
    width: 5rem;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.wp-timer-input:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
/* Set table */
.wp-set-table {
    width: 100%;
    border-collapse: collapse;
}
.wp-set-th {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.wp-set-th:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.wp-set-row {
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
    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;
}
.wp-set-row:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
}
.wp-set-row.is-done {
    background-color: rgb(236 253 245 / 0.6);
}
.wp-set-row.is-done:is(.dark *) {
    background-color: rgb(6 78 59 / 0.1);
}
.wp-set-row.is-superset {
    background-color: rgb(245 243 255 / 0.6);
}
.wp-set-row.is-superset:is(.dark *) {
    background-color: rgb(76 29 149 / 0.1);
}
.wp-set-row.is-dropset {
    background-color: rgb(255 251 235 / 0.6);
}
.wp-set-row.is-dropset:is(.dark *) {
    background-color: rgb(120 53 15 / 0.1);
}
.wp-set-num {
    width: 2rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.wp-set-num:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.wp-set-type-badge {
    display: inline-block;
    border-radius: 0.375rem;
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
.wp-set-type-normal {
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.wp-set-type-normal:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.wp-set-type-superset {
    --tw-bg-opacity: 1;
    background-color: rgb(237 233 254 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(109 40 217 / var(--tw-text-opacity, 1));
}
.wp-set-type-superset:is(.dark *) {
    background-color: rgb(76 29 149 / 0.5);
    --tw-text-opacity: 1;
    color: rgb(196 181 253 / var(--tw-text-opacity, 1));
}
.wp-set-type-dropset {
    --tw-bg-opacity: 1;
    background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.wp-set-type-dropset:is(.dark *) {
    background-color: rgb(120 53 15 / 0.5);
    --tw-text-opacity: 1;
    color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.wp-set-input {
    width: 100%;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(30 41 59 / var(--tw-text-opacity, 1));
    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;
}
.wp-set-input:focus {
    --tw-border-opacity: 1;
    border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-color: rgb(52 211 153 / 0.3);
}
.wp-set-input:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.wp-set-done-checkbox {
    height: 1.25rem;
    width: 1.25rem;
    cursor: pointer;
    border-radius: 0.25rem;
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    accent-color: #059669;
}
.wp-set-done-checkbox:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}
.wp-set-type-select {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.wp-set-type-select:focus {
    --tw-border-opacity: 1;
    border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.wp-set-type-select:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.wp-set-delete-btn {
    border-radius: 0.5rem;
    padding: 0.25rem;
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
    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;
}
.wp-set-delete-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(244 63 94 / var(--tw-text-opacity, 1));
}
.wp-set-delete-btn:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.wp-set-delete-btn:hover:is(.dark *) {
    background-color: rgb(136 19 55 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}
/* Add set button */
.wp-add-set-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.75rem;
    border-width: 1px;
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
    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;
}
.week-day-card:has(.wp-add-set-btn:hover:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.wp-add-set-btn:hover:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.wp-add-set-btn:hover {
    --tw-border-opacity: 1;
    border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.wp-add-set-btn:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.wp-add-set-btn:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(5 150 105 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
/* Add exercise panel */
.wp-add-exercise-panel {
    margin-bottom: 1rem;
    overflow: hidden;
    border-radius: 1rem;
    border-width: 1px;
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --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);
}
#workout-popup .wp-add-exercise-panel {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.wp-add-exercise-panel:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.wp-add-exercise-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
    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;
}
body[data-easy-mode="on"] .wp-add-exercise-toggle {
    gap: 0.75rem;
}
.wp-add-exercise-toggle:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.wp-add-exercise-toggle:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.wp-add-exercise-toggle:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.wp-add-exercise-search {
    width: 100%;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.wp-add-exercise-search:focus {
    --tw-border-opacity: 1;
    border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-color: rgb(52 211 153 / 0.3);
}
.wp-add-exercise-search:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.wp-exercise-option {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    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;
}
.wp-exercise-option:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.wp-exercise-option:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.wp-exercise-option-name {
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.wp-exercise-option-name:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.wp-exercise-option-cat {
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.wp-exercise-option-cat:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
/* Finish workout sticky bar */
.wp-finish-bar {
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    background-color: rgb(255 255 255 / 0.9);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    --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);
}
body[data-easy-mode="on"] .wp-finish-bar {
    gap: 1.25rem;
}
.wp-finish-bar:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    background-color: rgb(2 6 23 / 0.9);
}
.wp-finish-btn {
    display: inline-flex;
    flex: 1 1 0%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --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);
    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;
}
.color-blind .wp-finish-btn {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
.color-blind .wp-finish-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1)); /* Teal-700 */
}
body[data-easy-mode="on"] .wp-finish-btn {
    gap: 0.75rem;
}
#workout-popup .wp-finish-btn {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.wp-finish-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}
.wp-finish-btn:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
}
.wp-finish-volume {
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.wp-finish-volume:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.wp-finish-volume-val {
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.wp-finish-volume-val:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
/* Rest timer sidebar card */
.wp-rest-card {
    border-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1rem;
    --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);
}
#workout-popup .wp-rest-card {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.wp-rest-card:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.wp-rest-display {
    margin-top: 0.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    --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);
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.wp-rest-display:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
/* ─── Workout Session UI ─────────────────────────────────────── */
/* Utility: hidden state */
.wsu-hidden { display: none !important; }
/* Root container */
.wsu-root {
    position: relative;
    min-height: 100vh;
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.wsu-root:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
}
/* ─── Start Screen ───────────────────────────────────────────── */
.wsu-start-screen {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
.wsu-start-card {
    width: 100%;
    max-width: 28rem;
    border-radius: 1.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 2rem;
    --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);
}
.wsu-start-card:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.wsu-start-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .wsu-start-label {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.wsu-start-label:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.wsu-start-label:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.wsu-start-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.wsu-start-title {
    margin-top: 0.5rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.wsu-start-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.wsu-start-meta {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.wsu-start-meta:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.wsu-tag-row {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .wsu-tag-row {
    gap: 0.75rem;
}
.wsu-tag {
    border-radius: 9999px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.wsu-tag:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.wsu-tag-more {
    --tw-border-opacity: 1;
    border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.wsu-tag-more:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(4 120 87 / var(--tw-border-opacity, 1));
    background-color: rgb(6 78 59 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.wsu-start-duration {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.wsu-start-duration:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.wsu-start-btn {
    margin-top: 1.5rem;
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --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);
    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;
}
.color-blind .wsu-start-btn {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
.color-blind .wsu-start-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1)); /* Teal-700 */
}
body[data-easy-mode="on"] .wsu-start-btn {
    gap: 0.75rem;
}
#workout-popup .wsu-start-btn {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.wsu-start-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}
.wsu-start-btn:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
    --tw-ring-offset-width: 2px;
}
.wsu-start-btn: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));
}
.wsu-cancel-link {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.wsu-cancel-link:hover {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.wsu-cancel-link:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.wsu-cancel-link:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
/* ─── Shared top-bar ─────────────────────────────────────────── */
.wsu-flow-back {
    display: flex;
    height: 2rem;
    width: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
    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;
}
.wsu-flow-back:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.wsu-flow-back:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.wsu-flow-back:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.wsu-flow-workout-name {
    flex: 1 1 0%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.wsu-flow-workout-name:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.wsu-flow-counter {
    flex-shrink: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --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);
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.wsu-flow-counter:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
/* ─── FLOW Template ──────────────────────────────────────────── */
.wsu-flow {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 32rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 7rem;
    padding-top: 1rem;
}
@media (min-width: 640px) {
    .wsu-flow {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
.wsu-flow-topbar {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .wsu-flow-topbar {
    gap: 1rem;
}
.wsu-flow-progress-track {
    margin-bottom: 1rem;
    height: 0.375rem;
    width: 100%;
    overflow: hidden;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.wsu-flow-progress-track:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.wsu-flow-progress-fill {
    height: 100%;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
}

.color-blind .wsu-flow-progress-fill {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
.wsu-flow-summary {
    margin-bottom: 1rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}
body[data-easy-mode="on"] .wsu-flow-summary {
    gap: 1rem;
}
.wsu-flow-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
}
#workout-popup .wsu-flow-chip {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.wsu-flow-chip:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.wsu-flow-chip-val {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
    --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);
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.wsu-flow-chip-val:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.wsu-flow-chip-lbl {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.wsu-flow-chip-lbl:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
/* Slides */
.wsu-flow-slides-wrapper {
    overflow: hidden;
}
.wsu-flow-slides {
    display: flex;
    transition-property: transform;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .wsu-flow-slides {
    transition: none;
  }
}
.wsu-flow-slide {
    width: 100%;
    flex-shrink: 0;
    border-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.25rem;
}
#workout-popup .wsu-flow-slide {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.wsu-flow-slide:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.wsu-flow-slide-header {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .wsu-flow-slide-header {
    gap: 1rem;
}
.wsu-flow-slide-num {
    display: flex;
    height: 2rem;
    width: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.wsu-flow-slide-num:is(.dark *) {
    background-color: rgb(6 78 59 / 0.4);
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.wsu-flow-slide-info {
    min-width: 0px;
    flex: 1 1 0%;
}
.wsu-flow-slide-name {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.wsu-flow-slide-name:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.wsu-flow-slide-cat {
    margin-top: 0.125rem;
    display: inline-block;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.wsu-flow-slide-cat:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
/* Set rows */
.wsu-flow-sets {
    margin-bottom: 1rem;
}
.wsu-flow-sets > :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));
}

.calendar-day-content.motivation-mode .wsu-flow-sets {
  opacity: 0.4;
}
.wsu-flow-set-row {
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
    padding: 0.75rem;
    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;
}
.wsu-flow-set-row:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    background-color: rgb(30 41 59 / 0.5);
}
.wsu-flow-set-row.wsu-set-done {
    --tw-border-opacity: 1;
    border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
    background-color: rgb(236 253 245 / 0.6);
}
.wsu-flow-set-row.wsu-set-done:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
    background-color: rgb(6 78 59 / 0.1);
}
.wsu-set-label {
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.wsu-set-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.wsu-set-inputs {
    margin-bottom: 0.75rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}
body[data-easy-mode="on"] .wsu-set-inputs {
    gap: 0.75rem;
}
.wsu-set-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 11px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.wsu-set-field:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.wsu-set-input {
    width: 100%;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(30 41 59 / var(--tw-text-opacity, 1));
    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;
}
.wsu-set-input:focus {
    --tw-border-opacity: 1;
    border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-color: rgb(52 211 153 / 0.3);
}
.wsu-set-input:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.wsu-set-complete-btn {
    width: 100%;
    border-radius: 0.75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
    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;
}
.wsu-set-complete-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.wsu-set-complete-btn:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.wsu-set-complete-btn:hover:is(.dark *) {
    background-color: rgb(6 78 59 / 0.4);
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.wsu-set-complete-btn--done {
    --tw-bg-opacity: 1;
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.wsu-set-complete-btn--done:is(.dark *) {
    background-color: rgb(6 78 59 / 0.4);
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.wsu-add-set-btn {
    margin-top: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.75rem;
    border-width: 1px;
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
    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;
}
.week-day-card:has(.wsu-add-set-btn:hover:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.wsu-add-set-btn:hover:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.wsu-add-set-btn:hover {
    --tw-border-opacity: 1;
    border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.wsu-add-set-btn:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.wsu-add-set-btn:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(5 150 105 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.wsu-flow-no-sets {
    border-radius: 0.75rem;
    border-width: 1px;
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.wsu-flow-no-sets:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.wsu-flow-notes {
    margin-top: 0.75rem;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.wsu-flow-notes:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    background-color: rgb(15 23 42 / 0.6);
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
/* Flow navigation */
.wsu-flow-nav {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
body[data-easy-mode="on"] .wsu-flow-nav {
    gap: 1.25rem;
}
.wsu-flow-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
    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;
}
#workout-popup .wsu-flow-nav-btn {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.wsu-flow-nav-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.wsu-flow-nav-btn:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}
.wsu-flow-nav-btn:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.wsu-flow-nav-btn:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.wsu-flow-next {
    margin-left: auto;
    --tw-border-opacity: 1;
    border-color: rgb(5 150 105 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.color-blind .wsu-flow-next {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
.color-blind .wsu-flow-next:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1)); /* Teal-700 */
}
.wsu-flow-next:hover {
    --tw-border-opacity: 1;
    border-color: rgb(4 120 87 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}
.wsu-flow-next:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(5 150 105 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.wsu-flow-next:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}
/* Finish bar */
.wsu-finish-bar {
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    background-color: rgb(255 255 255 / 0.9);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    --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);
}
body[data-easy-mode="on"] .wsu-finish-bar {
    gap: 1.25rem;
}
.wsu-finish-bar:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    background-color: rgb(2 6 23 / 0.9);
}
.wsu-finish-vol-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.wsu-finish-vol-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.wsu-finish-vol-val {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.wsu-finish-vol-val:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.wsu-finish-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --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);
    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;
}
.color-blind .wsu-finish-btn {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
.color-blind .wsu-finish-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1)); /* Teal-700 */
}
body[data-easy-mode="on"] .wsu-finish-btn {
    gap: 0.75rem;
}
#workout-popup .wsu-finish-btn {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.wsu-finish-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}
.wsu-finish-btn:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
}
/* ─── PROFESSIONAL Template ──────────────────────────────────── */
.wsu-professional {
    display: flex;
    height: 100vh;
    flex-direction: column;
    overflow: hidden;
}
.wsu-pro-topbar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.75rem;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
body[data-easy-mode="on"] .wsu-pro-topbar {
    gap: 1rem;
}
.wsu-pro-topbar:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.wsu-pro-topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .wsu-pro-topbar-right {
    gap: 1rem;
}
.wsu-pro-finish-inline {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 0.75rem;
    line-height: 1rem;
}
.wsu-pro-layout {
    display: flex;
    flex: 1 1 0%;
    overflow: hidden;
}
/* Left sidebar */
.wsu-pro-sidebar {
    display: flex;
    width: 16rem;
    flex-shrink: 0;
    flex-direction: column;
    overflow: hidden;
    border-right-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.wsu-pro-sidebar:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
@media (min-width: 1024px) {
    .wsu-pro-sidebar {
        width: 18rem;
    }
}
.wsu-pro-sidebar-header {
    display: flex;
    align-items: center;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.wsu-pro-sidebar-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.wsu-pro-exercise-list {
    flex: 1 1 0%;
    overflow-y: auto;
}
.wsu-pro-exercise-item {
    position: relative;
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: 0.5rem;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    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;
}
body[data-easy-mode="on"] .wsu-pro-exercise-item {
    gap: 0.75rem;
}
.wsu-pro-exercise-item:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.wsu-pro-exercise-item:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
}
.wsu-pro-exercise-item:hover:is(.dark *) {
    background-color: rgb(30 41 59 / 0.6);
}
.wsu-pro-exercise-item--active {
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.wsu-pro-exercise-item--active:is(.dark *) {
    background-color: rgb(6 78 59 / 0.2);
}
.wsu-pro-ex-check {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1.5rem;
    line-height: 1;
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.wsu-pro-ex-check:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.wsu-pro-ex-name {
    flex: 1 1 0%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.wsu-pro-ex-name:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.wsu-pro-ex-sets-count {
    flex-shrink: 0;
    font-size: 11px;
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.wsu-pro-ex-sets-count:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.wsu-pro-quick-add {
    margin-left: 0.25rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
    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;
}
.week-day-card:has(.wsu-pro-quick-add:hover:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.wsu-pro-quick-add:hover:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.wsu-pro-quick-add:hover {
    --tw-border-opacity: 1;
    border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.wsu-pro-quick-add:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.wsu-pro-quick-add:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(5 150 105 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
/* Right editor */
.wsu-pro-editor {
    flex: 1 1 0%;
    overflow-y: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
.wsu-pro-editor-placeholder {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.wsu-pro-editor-placeholder:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.wsu-pro-editor-header {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .wsu-pro-editor-header {
    gap: 1rem;
}
.wsu-pro-editor-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.wsu-pro-editor-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
/* Demo button for exercises with video URLs */
.wsu-demo-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.5rem;
    border-width: 1px;
    border-color: rgb(16 185 129 / 0.4);
    background-color: rgb(16 185 129 / 0.1);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
    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;
}
.week-day-card:has(.wsu-demo-btn:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.wsu-demo-btn:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.wsu-demo-btn:hover {
    background-color: rgb(16 185 129 / 0.2);
}
.wsu-demo-btn:is(.dark *) {
    border-color: rgb(52 211 153 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.wsu-demo-btn {
  text-decoration: none;
}
.wsu-demo-btn svg {
    height: 0.875rem;
    width: 0.875rem;
    flex-shrink: 0;
}
.wsu-pro-sets-container {
    margin-bottom: 1rem;
}
.wsu-pro-sets-container > :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));
}

.calendar-day-content.motivation-mode .wsu-pro-sets-container {
  opacity: 0.4;
}
/* ─── Rest Timer Overlay ─────────────────────────────────────── */
.wsu-rest-overlay {
    position: fixed;
    inset: 0px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(0 0 0 / 0.6);
    --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);
}
.wsu-rest-panel {
    display: flex;
    width: 18rem;
    flex-direction: column;
    align-items: center;
    border-radius: 1.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    --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);
}
.wsu-rest-panel:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
.wsu-rest-label {
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.wsu-rest-ring-wrapper {
    position: relative;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wsu-rest-ring {
    height: 9rem;
    width: 9rem;
}
.wsu-rest-ring-track {
    fill: none;
    stroke: #1e293b;
    stroke-width: 8;
}
.wsu-rest-ring-fill {
    fill: none;
    stroke: #10b981;
    stroke-width: 8;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 1s linear;
}
.wsu-rest-time {
    position: absolute;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    --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);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.wsu-rest-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}
body[data-easy-mode="on"] .wsu-rest-controls {
    gap: 1.25rem;
}
.wsu-rest-adj-btn {
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
    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;
}
.wsu-rest-adj-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.wsu-rest-skip-btn {
    border-radius: 0.75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    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;
}
.color-blind .wsu-rest-skip-btn {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
.color-blind .wsu-rest-skip-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1)); /* Teal-700 */
}
.wsu-rest-skip-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}
/* ─── Summary Panel ──────────────────────────────────────────── */
.wsu-summary-panel {
    position: fixed;
    inset: 0px;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(2 6 23 / 0.8);
    padding-left: 1rem;
    padding-right: 1rem;
    --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);
}
.wsu-summary-card {
    width: 100%;
    max-width: 28rem;
    border-radius: 1.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 2rem;
    text-align: center;
    --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);
}
.wsu-summary-card:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.wsu-summary-icon {
    margin-bottom: 0.5rem;
    font-size: 3rem;
    line-height: 1;
}
.wsu-summary-title {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 800;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.wsu-summary-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.wsu-summary-subtitle {
    margin-top: 0.125rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.wsu-summary-subtitle:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.wsu-summary-stats {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
body[data-easy-mode="on"] .wsu-summary-stats {
    gap: 1.25rem;
}
.wsu-summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.wsu-summary-stat-val {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.wsu-summary-stat-val:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.wsu-summary-stat-lbl {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.wsu-summary-stat-lbl:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.wsu-summary-compare {
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.wsu-summary-compare:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.wsu-summary-actions {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .wsu-summary-actions {
    gap: 1rem;
}
.wsu-summary-exit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --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);
    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;
}
.color-blind .wsu-summary-exit-btn {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
.color-blind .wsu-summary-exit-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1)); /* Teal-700 */
}
body[data-easy-mode="on"] .wsu-summary-exit-btn {
    gap: 0.75rem;
}
#workout-popup .wsu-summary-exit-btn {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.wsu-summary-exit-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}
.wsu-summary-exit-btn:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
}
.wsu-sum-add-log-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
    --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);
    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;
}
body[data-easy-mode="on"] .wsu-sum-add-log-btn {
    gap: 0.75rem;
}
#workout-popup .wsu-sum-add-log-btn {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.wsu-sum-add-log-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.wsu-sum-add-log-btn:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
}
.wsu-sum-add-log-btn:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.wsu-sum-add-log-btn:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
/* ─── Add Exercise button ────────────────────────────────────── */
.wsu-add-exercise-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
    --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);
    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;
}
.week-day-card:has(.wsu-add-exercise-btn:hover:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.wsu-add-exercise-btn:hover:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.wsu-add-exercise-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.wsu-add-exercise-btn:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
}
.wsu-add-exercise-btn:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.wsu-add-exercise-btn:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
/* ─── Exercise mode select ───────────────────────────────────── */
.wsu-ex-mode-controls {
    margin-left: auto;
    display: flex;
    align-items: center;
}
.wsu-ex-mode-select {
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.wsu-ex-mode-select:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
}
.wsu-ex-mode-select:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
/* ─── PLAIN Template ─────────────────────────────────────────── */
.wsu-plain {
    display: flex;
    height: 100vh;
    flex-direction: column;
    overflow: hidden;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.wsu-plain:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.wsu-plain-topbar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.75rem;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
body[data-easy-mode="on"] .wsu-plain-topbar {
    gap: 1rem;
}
.wsu-plain-topbar:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.wsu-plain-body {
    flex: 1 1 0%;
}
.wsu-plain-body > :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));
}
.wsu-plain-body {
    overflow-y: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 6rem;
}
.wsu-plain-exercise {
    border-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1rem;
    --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);
}
#workout-popup .wsu-plain-exercise {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.wsu-plain-exercise:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.wsu-plain-ex-header {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .wsu-plain-ex-header {
    gap: 0.75rem;
}
.wsu-plain-ex-num {
    display: flex;
    height: 1.5rem;
    width: 1.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.wsu-plain-ex-num:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.wsu-plain-ex-name {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.wsu-plain-ex-name:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.wsu-plain-ex-mode-badge {
    margin-left: 0.5rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    --tw-text-opacity: 1;
    color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.wsu-plain-ex-mode-badge:is(.dark *) {
    background-color: rgb(120 53 15 / 0.4);
    --tw-text-opacity: 1;
    color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
/* ─── FUTURISTIC styling ─────────────────────────────────────── */
.wsu-root[data-layout="FUTURISTIC_FLOW"],
.wsu-futuristic {
  --wsu-accent: #7c3aed;
}
.wsu-futuristic .wsu-flow-progress-fill,
.wsu-root[data-layout="FUTURISTIC_FLOW"] .wsu-flow-progress-fill {
    --tw-bg-opacity: 1;
    background-color: rgb(124 58 237 / var(--tw-bg-opacity, 1));
}
.wsu-futuristic .wsu-finish-btn,
.wsu-root[data-layout="FUTURISTIC_FLOW"] .wsu-finish-btn {
    --tw-bg-opacity: 1;
    background-color: rgb(124 58 237 / var(--tw-bg-opacity, 1));
}
.wsu-futuristic .wsu-finish-btn:hover,
.wsu-root[data-layout="FUTURISTIC_FLOW"] .wsu-finish-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(109 40 217 / var(--tw-bg-opacity, 1));
}
.wsu-futuristic .wsu-set-complete-btn--done,
.wsu-root[data-layout="FUTURISTIC_FLOW"] .wsu-set-complete-btn--done {
    --tw-bg-opacity: 1;
    background-color: rgb(124 58 237 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.wsu-futuristic .wsu-flow-topbar,
.wsu-root[data-layout="FUTURISTIC_FLOW"] .wsu-flow-topbar {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.wsu-futuristic .wsu-flow-topbar:is(.dark *),
.wsu-root[data-layout="FUTURISTIC_FLOW"] .wsu-flow-topbar:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
}
/* ─── Add Exercise Modal ─────────────────────────────────────── */
.wsu-modal-overlay {
    position: fixed;
    inset: 0px;
    z-index: 50;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-color: rgb(2 6 23 / 0.6);
}
@media (min-width: 640px) {
    .wsu-modal-overlay {
        align-items: center;
    }
}
.wsu-modal-panel {
    width: 100%;
    max-width: 28rem;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.5rem;
    --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);
}
.wsu-modal-panel:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
@media (min-width: 640px) {
    .wsu-modal-panel {
        border-radius: 1.5rem;
    }
}
.wsu-modal-header {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wsu-modal-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.wsu-modal-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.wsu-modal-close {
    border-radius: 9999px;
    padding: 0.25rem;
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.wsu-modal-close:hover {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.wsu-modal-close:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(148 163 184 / var(--tw-ring-opacity, 1));
}
.wsu-modal-close:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.wsu-modal-body > :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));
}

.calendar-day-content.motivation-mode .wsu-modal-body {
  opacity: 0.4;
}
.wsu-modal-footer {
    margin-top: 1.25rem;
}
/* Page-specific styles - loaded separately when needed */
/* calendar-heatmap.css - loaded in calendar/month.html and calendar/week.html */
*, ::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: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 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;
}
* {
    scrollbar-color: initial;
    scrollbar-width: initial;
}
/* Responsive navbar strategy:
     * 1. > 1400px: Normal text size
     * 2. 1200px-1400px: Reduced text size
     * 3. 1126px-1200px: Icon-only mode (text hidden but accessible)
     * 4. < 1125px: Mobile menu with grid layout
     */
/* Reduce text size progressively on smaller screens */
@media (max-width: 1400px) {
        .navheader {
            --nav-text-size: 0.8125rem; /* small */
        }
    }
/* Hide text labels on medium screens (show icons only) */
@media (max-width: 1200px) and (min-width: 1126px) {
        .navheader nav[aria-label="Primary navigation"] .navlink .navicon + span:not(.nav-notification-badge) {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }
        
        .navheader nav[aria-label="Primary navigation"] .navlink {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    }
@media (max-width: 365px) {
        .navheader {
            --nav-text-size: 0.6875rem; /* quite small */
        }
    }
/* Dropdown menu centering for collapsed navbar */
@media (max-width: 1125px) {
        .navheader [data-mobile-nav] .navlink {
        flex-direction: column;
        gap: 0.25rem;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
            justify-content: center;
            text-align: center;
    }

        .navheader [data-mobile-links] .navlink {
            width: 100%;
        }
        
        .navheader [data-mobile-nav] .navicon {
        height: 1.25rem;
        width: 1.25rem;
    }
    }
* {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
body {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
    background-image: 
      radial-gradient(circle at 20% 50%, rgba(0, 243, 255, 0.05) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(181, 55, 242, 0.05) 0%, transparent 50%);
    background-attachment: fixed;
}
/* Custom scrollbar styling - Emerald green mix */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
/* Light mode scrollbar */
::-webkit-scrollbar-track {
    background: transparent;
  }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
    border-radius: 5px;
  }
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #059669 0%, #047857 100%);
  }
/* Dark mode scrollbar */
html.dark ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #10b981 0%, #065f46 100%);
    border-radius: 5px;
  }
html.dark ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #059669 0%, #064e3b 100%);
  }
/* Selection styling */
::-moz-selection {
    --tw-bg-opacity: 1;
    background-color: rgb(125 211 252 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
::selection {
    --tw-bg-opacity: 1;
    background-color: rgb(125 211 252 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
/* Focus visible rings with neon glow */
*:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(125 211 252 / var(--tw-ring-opacity, 1));
}
.calendar-day-card*:focus-visible.ring-blue-500\/80 {
  border-color: rgb(16, 185, 129);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25),
              0 0 20px rgba(16, 185, 129, 0.15),
              0 8px 32px -8px rgba(16, 185, 129, 0.2);
  animation: pulse-today 2s ease-in-out infinite;
}
.calendar-day-card*:focus-visible.ring-emerald-500\/70 {
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15),
              0 4px 16px -4px rgba(16, 185, 129, 0.1);
}
.\!container {
    width: 100% !important;
}
.container {
    width: 100%;
}
@media (min-width: 640px) {
    .\!container {
        max-width: 640px !important;
    }
    .container {
        max-width: 640px;
    }
}
@media (min-width: 768px) {
    .\!container {
        max-width: 768px !important;
    }
    .container {
        max-width: 768px;
    }
}
@media (min-width: 1024px) {
    .\!container {
        max-width: 1024px !important;
    }
    .container {
        max-width: 1024px;
    }
}
@media (min-width: 1125px) {
    .\!container {
        max-width: 1125px !important;
    }
    .container {
        max-width: 1125px;
    }
}
@media (min-width: 1280px) {
    .\!container {
        max-width: 1280px !important;
    }
    .container {
        max-width: 1280px;
    }
}
@media (min-width: 1536px) {
    .\!container {
        max-width: 1536px !important;
    }
    .container {
        max-width: 1536px;
    }
}
.\!btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    overflow: hidden;
    border-radius: 0.75rem;
    font-weight: 600;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
body[data-easy-mode="on"] .\!btn {
    gap: 0.75rem;
}
.\!btn:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(125 211 252 / var(--tw-ring-opacity, 1));
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: #0f172a;
}
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    overflow: hidden;
    border-radius: 0.75rem;
    font-weight: 600;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
body[data-easy-mode="on"] .btn {
    gap: 0.75rem;
}
.btn:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(125 211 252 / var(--tw-ring-opacity, 1));
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: #0f172a;
}
.\!btn::before {
        content: '' !important;
    }
.btn::before {
        content: '';
    }
.\!btn::before {
    position: absolute;
    inset: 0px;
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --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);
    --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.btn::before {
    position: absolute;
    inset: 0px;
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --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);
    --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.\!btn::before {
        transform: translateX(-100%) !important;
    }
.btn::before {
        transform: translateX(-100%);
    }
.\!btn:hover::before {
    opacity: 0.1;
}
.btn:hover::before {
    opacity: 0.1;
}
.\!btn:hover::before {
        animation: shimmer 1.5s ease-in-out infinite !important;
    }
.btn:hover::before {
        animation: shimmer 1.5s ease-in-out infinite;
    }
@media (prefers-reduced-motion: reduce) {
        .\!btn:hover::before {
            animation: none !important;
        }
        .btn:hover::before {
            animation: none;
        }
        
        .btn--primary:hover, .btn--secondary:hover, .btn--ghost:hover, .btn--danger:hover, .btn--success:hover, .btn--purple:hover {
        --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));
    }
    }
@keyframes shimmer {
        0% {
            transform: translateX(-100%);
        }
        100% {
            transform: translateX(100%);
        }
    }
.btn--primary {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: #7dd3fc var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(125 211 252 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
    --tw-shadow: 0 0 10px rgba(125, 211, 252, 0.3), 0 0 20px rgba(125, 211, 252, 0.15);
    --tw-shadow-colored: 0 0 10px var(--tw-shadow-color), 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);
    --tw-shadow-color: #7dd3fc;
    --tw-shadow: var(--tw-shadow-colored);
}
.btn--primary: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));
    --tw-shadow: 0 0 10px rgba(16, 185, 129, 0.25), 0 0 20px rgba(16, 185, 129, 0.12);
    --tw-shadow-colored: 0 0 10px var(--tw-shadow-color), 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);
}
.btn--secondary {
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(125 211 252 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(125 211 252 / var(--tw-text-opacity, 1));
    --tw-shadow: 0 0 5px rgba(16, 185, 129, 0.2);
    --tw-shadow-colored: 0 0 5px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.btn--secondary: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));
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 0 10px rgba(16, 185, 129, 0.25), 0 0 20px rgba(16, 185, 129, 0.12);
    --tw-shadow-colored: 0 0 10px var(--tw-shadow-color), 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);
}
.btn--ghost {
    border-width: 1px;
    border-color: rgb(125 211 252 / 0.5);
    background-color: transparent;
    --tw-text-opacity: 1;
    color: rgb(125 211 252 / var(--tw-text-opacity, 1));
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.btn--ghost:hover {
    --tw-border-opacity: 1;
    border-color: rgb(125 211 252 / var(--tw-border-opacity, 1));
    background-color: rgb(125 211 252 / 0.1);
    --tw-shadow: 0 0 5px rgba(16, 185, 129, 0.2);
    --tw-shadow-colored: 0 0 5px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.btn--sm {
    height: 2.25rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.btn--md {
    height: 2.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.btn--xl {
    height: 3.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
}
/* Icon buttons */
.btn--icon.btn--sm {
    height: 2.25rem;
    width: 2.25rem;
}
.btn--icon.btn--md {
    height: 2.75rem;
    width: 2.75rem;
}
.field__label {
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.field__input {
    width: 100%;
    border-radius: 0.75rem;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.field__input::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.field__input::placeholder {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.field__input:hover {
    --tw-border-opacity: 1;
    border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}
.field__input:focus-visible {
    --tw-border-opacity: 1;
    border-color: rgb(125 211 252 / var(--tw-border-opacity, 1));
    --tw-shadow: 0 0 5px rgba(16, 185, 129, 0.2);
    --tw-shadow-colored: 0 0 5px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-color: rgb(125 211 252 / 0.3);
}
.field__input:focus {
    background-color: rgb(15 23 42 / 0.5);
}
/* Textarea */
/* Select */
/* Checkbox */
/* Radio */
/* Switch */
/* Success state */
/* Error state */
/* Disabled state */
.field__input:disabled {
    cursor: not-allowed;
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
    opacity: 0.5;
}
/* Light mode overrides */
html:not(.dark) .field__label {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
html:not(.dark) .field__input {
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
html:not(.dark) .field__input::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
html:not(.dark) .field__input::placeholder {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
html:not(.dark) .field__input:focus {
    --tw-border-opacity: 1;
    border-color: rgb(125 211 252 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.\!card {
    border-radius: 1rem;
    border-width: 1px;
    border-color: rgb(125 211 252 / 0.2);
    padding: 1.5rem;
    --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);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
#workout-popup .\!card {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
html:not(.dark) body .\!card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.card {
    border-radius: 1rem;
    border-width: 1px;
    border-color: rgb(125 211 252 / 0.2);
    padding: 1.5rem;
    --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);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
#workout-popup .card {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
html:not(.dark) body .card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.\!card:hover {
    border-color: rgb(125 211 252 / 0.4);
    --tw-shadow: 0 0 10px rgba(16, 185, 129, 0.25), 0 0 20px rgba(16, 185, 129, 0.12);
    --tw-shadow-colored: 0 0 10px var(--tw-shadow-color), 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);
}
.card:hover {
    border-color: rgb(125 211 252 / 0.4);
    --tw-shadow: 0 0 10px rgba(16, 185, 129, 0.25), 0 0 20px rgba(16, 185, 129, 0.12);
    --tw-shadow-colored: 0 0 10px var(--tw-shadow-color), 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);
}
.\!card:hover {
        transform: translateY(-2px) !important;
    }
.card:hover {
        transform: translateY(-2px);
    }
.card--cyan {
    border-color: rgb(125 211 252 / 0.3);
}
.card--cyan:hover {
    border-color: rgb(125 211 252 / 0.5);
        box-shadow: 0 0 15px rgba(0, 243, 255, 0.3), 0 0 30px rgba(0, 243, 255, 0.15);
}
.card--purple {
    border-color: rgb(139 92 246 / 0.3);
}
.card--purple:hover {
    border-color: rgb(139 92 246 / 0.5);
        box-shadow: 0 0 15px rgba(181, 55, 242, 0.3), 0 0 30px rgba(181, 55, 242, 0.15);
}
.card--green {
    border-color: rgb(16 185 129 / 0.3);
}
.card--green:hover {
    border-color: rgb(16 185 129 / 0.5);
        box-shadow: 0 0 15px rgba(57, 255, 20, 0.3), 0 0 30px rgba(57, 255, 20, 0.15);
}
/* Light mode cards */
html:not(.dark) body .\!card {
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    background-color: rgb(255 255 255 / 0.9);
}
html:not(.dark) body .card {
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    background-color: rgb(255 255 255 / 0.9);
}
html:not(.dark) body .\!card:hover {
    border-color: rgb(125 211 252 / 0.3);
    --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);
}
html:not(.dark) body .card:hover {
    border-color: rgb(125 211 252 / 0.3);
    --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);
}
.\!chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border-width: 1px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
body[data-easy-mode="on"] .\!chip {
    gap: 0.75rem;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border-width: 1px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
body[data-easy-mode="on"] .chip {
    gap: 0.75rem;
}
/* Light mode overrides */
.navheader {
    position: sticky;
    top: 0px;
    z-index: 50;
    width: 100%;
        background: rgba(249, 250, 251, 0.85);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(229, 231, 235, 0.6);
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
        min-height: 72px;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        
        /* Disable text selection across entire navbar */
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        
        /* Single source of truth for navbar text sizing */
        --nav-text-size: 0.875rem;
}
@media (min-width: 1280px) {
        .navheader {
            --nav-text-size: 0.9rem;
        }
    }
@media (min-width: 1600px) {
        .navheader {
            --nav-text-size: 0.9375rem;
        }
    }
.navheader.scrolled {
        background: rgba(249, 250, 251, 0.95);
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
    }
.accentstrip {
    height: 0.125rem;
    width: 100%;
        background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
        opacity: 0.15;
}
/* Desktop navigation container - hidden on mobile, flex on desktop */
.desktop-nav {
        min-width: 0;
    }
.navsurface {
    border-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    background-color: rgb(255 255 255 / 0.8);
    padding: 0.25rem;
    --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);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
#workout-popup .navsurface {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.navsurface {
        backdrop-filter: blur(8px);
    }
.navsurface:hover {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
        box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08);
}
.navlink {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    border-radius: 0.5rem;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.navlink:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.navlink:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.navlink:focus-visible {
    --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);
    --tw-ring-color: rgb(16 185 129 / 0.2);
}
.navlink {
        
        font-size: var(--nav-text-size);
        position: relative;
    }
.nav-overflow-item {
        max-width: 16rem;
        overflow: hidden;
        transition: max-width 180ms ease, opacity 140ms ease, transform 140ms ease,
                    margin 180ms ease, padding 180ms ease;
    }
.nav-overflow-item.is-collapsed {
        max-width: 0;
        opacity: 0;
        transform: translateY(-1px);
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        pointer-events: none;
    }
@media (min-width: 1280px) {
        .navlink {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    }
@media (min-width: 1600px) {
        .navlink {
        padding-left: 0.875rem;
        padding-right: 0.875rem;
    }
    }
.navlink::after {
        content: '';
        position: absolute;
        bottom: 0px;
        left: 50%;
        height: 0.125rem;
        width: 0px;
        background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        transform: translateX(-50%);
    }
.navlink:hover::after {
    width: 75%;
}
.navlink-active {
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .navlink-active {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.navlink-active::after {
    width: 100%;
}
.navicon {
    height: 0.875rem;
    width: 0.875rem;
    flex-shrink: 0;
    opacity: 0.7;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
@media (min-width: 1600px) {
        .navicon {
        height: 1rem;
        width: 1rem;
    }
    }
.navlink:hover .navicon,
    .navicon-active {
    opacity: 1;
}
.authsurface {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .authsurface {
    gap: 0.75rem;
}
.nav-premium-badge-group {
        position: relative;
        display: inline-flex;
        align-items: center;
    }
.nav-premium-badge {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 9999px;
        border: 1px solid rgba(234, 179, 8, 0.65);
        background: radial-gradient(circle at 35% 30%, rgba(254, 240, 138, 0.95) 0%, rgba(245, 158, 11, 0.92) 62%, rgba(217, 119, 6, 0.95) 100%);
        color: rgb(120, 53, 15);
        box-shadow: 0 0 0 2px rgba(254, 243, 199, 0.6), 0 2px 6px -2px rgba(120, 53, 15, 0.35);
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }
.nav-premium-badge:hover,
    .nav-premium-badge:focus-visible {
        transform: translateY(-1px) scale(1.03);
        box-shadow: 0 0 0 2px rgba(253, 230, 138, 0.75), 0 8px 16px -8px rgba(120, 53, 15, 0.55);
        outline: none;
    }
.nav-premium-badge__icon {
        width: 0.85rem;
        height: 0.85rem;
    }
html.dark .nav-premium-verified-tick {
        background: rgba(6, 78, 59, 0.95);
        color: rgb(110, 231, 183);
        border-color: rgba(52, 211, 153, 0.7);
        box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.75);
    }
.nav-premium-tooltip {
        position: absolute;
        top: calc(100% + 0.5rem);
        right: -0.2rem;
        z-index: 30;
        white-space: nowrap;
        border-radius: 0.7rem;
        border: 1px solid rgba(148, 163, 184, 0.45);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
        backdrop-filter: blur(8px);
        padding: 0.42rem 0.64rem;
        font-size: 0.7rem;
        font-weight: 700;
        color: rgb(51, 65, 85);
        opacity: 0;
        pointer-events: none;
        transform: translateY(0.15rem);
        transition: opacity 0.18s ease, transform 0.18s ease;
        box-shadow: 0 14px 24px -16px rgba(15, 23, 42, 0.45);
    }
.nav-premium-badge-group:hover .nav-premium-tooltip,
    .nav-premium-badge-group:focus-within .nav-premium-tooltip,
    .nav-premium-badge-group[data-open="true"] .nav-premium-tooltip {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
/* Pulsing border animation for logo hover */
@keyframes pulse-green-border {
        0%, 100% {
            border-color: rgba(5, 122, 85, 0.6); /* dark green */
            box-shadow: 0 0 0 2px rgba(5, 122, 85, 0.15);
        }
        50% {
            border-color: rgba(16, 185, 129, 0.9); /* neon green */
            box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25), 0 0 16px rgba(16, 185, 129, 0.4);
        }
    }
/* Brand link - strong border hover effect */
.nav-brand-link {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem; /* Increased spacing from 0.5rem */
        border-radius: 0.875rem;
        padding: 0.5rem 0.75rem;
        margin: -0.5rem -0.75rem;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        text-decoration: none;
        position: relative;
        overflow: visible;
        border: 2px solid transparent;
    }
.nav-brand-link:hover {
        border-color: rgba(5, 122, 85, 0.6);
        animation: pulse-green-border 2s ease-in-out infinite;
    }
.nav-brand-link:hover .nav-brand-logo {
        transform: scale(1.05);
    }
.nav-brand-link:hover .nav-brand-name {
        color: #10b981;
    }
.nav-brand-link:hover .nav-brand-name::after {
        transform: scaleX(1);
        opacity: 1;
    }
.nav-brand-logo {
        height: 3rem;
        width: auto;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        flex-shrink: 0;
        position: relative;
        z-index: 1;
    }
.nav-brand-name {
        transition: color 0.25s ease;
        font-size: 1.125rem; /* Increased from 0.875rem (14px) to 1.125rem (18px) */
        font-weight: 800;
        letter-spacing: 0.025em;
        color: rgb(15, 23, 42); /* slate-950 in light mode */
        position: relative;
        z-index: 1;
    }
.nav-brand-name::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, #10b981, #34d399);
        transform: scaleX(0);
        opacity: 0;
        transform-origin: left;
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    }
html.dark .nav-brand-name {
        color: rgb(241, 245, 249); /* slate-100 in dark mode */
    }
/* Dark mode border pulse animation */
@keyframes pulse-green-border-dark {
        0%, 100% {
            border-color: rgba(6, 78, 59, 0.7); /* darker green for dark mode */
            box-shadow: 0 0 0 2px rgba(6, 78, 59, 0.2);
        }
        50% {
            border-color: rgba(52, 211, 153, 0.9); /* neon green */
            box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.3), 0 0 20px rgba(52, 211, 153, 0.5);
        }
    }
html.dark .nav-brand-link:hover {
        border-color: rgba(6, 78, 59, 0.7);
        animation: pulse-green-border-dark 2s ease-in-out infinite;
    }
html.dark .nav-brand-link:hover .nav-brand-name {
        color: #34d399;
    }
html.dark .nav-brand-name::after {
        background: linear-gradient(90deg, #34d399, #6ee7b7);
    }
/* Dark mode overrides (keeping for compatibility) */
html.dark .navheader {
        background: rgba(15, 23, 42, 0.85);
        border-bottom-color: rgba(100, 116, 139, 0.55);
        box-shadow: 0 1px 0 rgba(148, 163, 184, 0.22), 0 8px 20px -16px rgba(2, 6, 23, 0.95);
    }
html.dark .navheader.scrolled {
        background: rgba(15, 23, 42, 0.97);
        border-bottom-color: rgba(148, 163, 184, 0.6);
        box-shadow: 0 1px 0 rgba(148, 163, 184, 0.28), 0 10px 24px -16px rgba(2, 6, 23, 0.95);
    }
html.dark .navsurface {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    background-color: rgb(30 41 59 / 0.8);
}
html.dark .navlink {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.week-day-card:has(html.dark .navlink:hover) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(html.dark .navlink:hover) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
html.dark .navlink:hover {
    background-color: rgb(30 41 59 / 0.5);
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.week-day-card:has(html.dark .navlink-active) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(html.dark .navlink-active) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
html.dark .navlink-active {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
html.dark .nav-premium-tooltip {
        border-color: rgba(71, 85, 105, 0.7);
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.94));
        color: rgb(226, 232, 240);
        box-shadow: 0 16px 28px -18px rgba(2, 6, 23, 0.9);
    }
/* Admin badge (red/crimson shield for PLATFORM_ADMIN / SUPER_ADMIN) */
html.dark .nav-admin-tooltip {
        border-color: rgb(51, 65, 85);
        background: rgb(15, 23, 42);
        color: rgb(203, 213, 225);
    }
/* Nav auth container - bordered frame for username, premium, role badge, and logout */
.nav-auth-container {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.5rem 0.875rem;
        border-radius: 0.75rem;
        border: 1.5px solid rgb(226, 232, 240);
        background: linear-gradient(to bottom, rgb(248, 250, 252), rgb(241, 245, 249));
        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 4px 8px -2px rgba(0, 0, 0, 0.05);
        transition: all 0.2s ease;
    }
.nav-auth-container:hover {
        border-color: rgb(203, 213, 225);
        box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.1), 0 8px 16px -4px rgba(0, 0, 0, 0.08);
    }
html.dark .nav-auth-container {
        border-color: rgb(51, 65, 85);
        background: linear-gradient(to bottom, rgb(30, 41, 59), rgb(15, 23, 42));
        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.3), 0 4px 8px -2px rgba(0, 0, 0, 0.2);
    }
html.dark .nav-auth-container:hover {
        border-color: rgb(71, 85, 105);
        box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.4), 0 8px 16px -4px rgba(0, 0, 0, 0.3);
    }
html:not(.dark) .navlink-active {
    --tw-text-opacity: 1;
    color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}

.color-blind html:not(.dark) .navlink-active {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
/* Footer - Professional, clean design with clear section dividers */
.footer-redesign {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    border-top: 2px solid #e5e7eb;
    position: relative;
}
/* Professional top accent stripe */
.footer-redesign::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
      90deg,
      rgba(16, 185, 129, 0.6) 0%,
      rgba(16, 185, 129, 0.8) 50%,
      rgba(16, 185, 129, 0.6) 100%
    );
  }
/* Footer container - more compact, professional spacing */
.footer-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 80rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
}
@media (min-width: 1024px) {
    .footer-container {
        padding-left: 2rem;
        padding-right: 2rem;
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
}
/* Main footer grid with visual separation */
.footer-grid {
    display: grid;
    gap: 2.5rem;
}
@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 3rem;
    }
}
.footer-grid {
    padding-bottom: 2rem;
    border-bottom: 1px solid #e5e7eb;
  }
/* Brand block - left side, more compact */
.footer-brand > :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));
}
@media (min-width: 1024px) {
    .footer-brand {
        grid-column: span 4 / span 4;
    }
}
.footer-brand {
    padding-right: 2rem;
    border-right: 1px solid #e5e7eb;
  }
/* Logo container - cleaner, smaller */
.footer-logo-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .footer-logo-container {
    gap: 0.75rem;
}
.footer-logo-img {
    height: 2rem;
    width: auto;
    filter: drop-shadow(0 1px 3px rgba(16, 185, 129, 0.25));
}
.footer-brand-name {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
    letter-spacing: -0.01em;
}
/* Tagline - more concise */
.footer-brand-description {
    font-size: 0.75rem;
    line-height: 1rem;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
    max-width: 280px;
}
/* Social icons - smaller, more refined */
.footer-social {
    display: flex;
    gap: 1rem;
}
body[data-easy-mode="on"] .footer-social {
    gap: 1.25rem;
}
.footer-social-link {
    display: flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.footer-social-link:hover {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .footer-social-link:hover {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}

.color-blind .footer-social-link:hover {
    --tw-border-opacity: 1;
    border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); /* Teal-500 */
}
.footer-social-link svg {
    height: 0.875rem;
    width: 0.875rem;
}
/* Link columns - right side with vertical dividers */
.footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}
@media (min-width: 1024px) {
    .footer-links {
        grid-column: span 8 / span 8;
    }
}
.footer-link-group > :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));
}

.calendar-day-content.motivation-mode .footer-link-group {
  opacity: 0.4;
}
.footer-link-group {
    position: relative;
  }
/* Add vertical dividers between link columns */
.footer-link-group:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -1rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      #e5e7eb 10%,
      #e5e7eb 90%,
      transparent 100%
    );
  }
/* Section headings - professional, understated */
.footer-section-heading {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    --tw-text-opacity: 1;
    color: rgb(30 41 59 / var(--tw-text-opacity, 1));
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 2px solid #10b981;
    display: inline-block;
}
/* Links - clean typography */
.footer-link-list > :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));
}
.footer-link {
    display: block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
    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;
}
.footer-link:hover {
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .footer-link:hover {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.footer-link:hover {
    padding-left: 4px;
  }
/* Legal section - minimal bottom bar */
.footer-legal {
    margin-top: 2rem;
    padding-top: 1.5rem;
}
.footer-legal-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: center;
}
body[data-easy-mode="on"] .footer-legal-container {
    gap: 1.25rem;
}
@media (min-width: 768px) {
    .footer-legal-container {
        flex-direction: row;
        text-align: left;
    }
}
/* Copyright - minimal */
.footer-copyright {
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
/* Legal links - separated with bullets */
.footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}
body[data-easy-mode="on"] .footer-legal-links {
    gap: 1.25rem;
}
.footer-legal-link {
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
    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;
}
.footer-legal-link:hover {
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .footer-legal-link:hover {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
/* Add separators between legal links */
.footer-legal-link:not(:last-child)::after {
    content: '•';
    margin-left: 1rem;
    color: #cbd5e1;
  }
/* System status - compact */
.footer-system-status {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.footer-system-indicator {
    height: 0.375rem;
    width: 0.375rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}

.color-blind .footer-system-indicator {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
.footer-system-indicator {
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
    animation: pulse-subtle 2s ease-in-out infinite;
  }
@keyframes pulse-subtle {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.7;
      transform: scale(1.1);
    }
  }
/* Mobile responsive - stack sections */
@media (max-width: 1023px) {
    .footer-brand {
        border-right-width: 0px;
        border-bottom-width: 1px;
        padding-bottom: 2rem;
      padding-right: 0;
    }

    .footer-grid {
        gap: 2rem;
    }

    .footer-links {
        gap: 1.5rem;
    }

    .footer-link-group:not(:last-child)::after {
      display: none;
    }
  }
@media (max-width: 767px) {
    .footer-links {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .footer-link-group {
        text-align: center;
    }

    .footer-section-heading {
      width: 100%;
    }

    .footer-brand {
        text-align: center;
    }

    .footer-logo-container {
        justify-content: center;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-brand-description {
        margin-left: auto;
        margin-right: auto;
    }
  }
/* Auth page container - clean background with emerald accents */
.auth-container {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    width: 100%;
    max-width: 28rem;
    align-items: flex-start;
    justify-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 640px) {
    .auth-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .auth-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
.auth-container {
        padding-top: 3rem;
        padding-bottom: 3rem;
        min-height: calc(100vh - 5rem);
        background: 
            radial-gradient(circle at 20% 20%, rgba(16, 185, 129, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 80% 80%, rgba(52, 211, 153, 0.03) 0%, transparent 50%);
    }
/* On larger screens, vertically centre the card */
@media (min-height: 600px) {
        .auth-container {
        align-items: center;
    }
    }
.auth-container--wide {
    max-width: 42rem;
}
/* Auth card with enhanced design */
.auth-card {
    position: relative;
    width: 100%;
    border-radius: 1.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 2rem;
}
@media (min-width: 640px) {
    .auth-card {
        padding: 2.5rem;
    }
}
.auth-card {
        box-shadow: 
            0 20px 25px -5px rgba(0, 0, 0, 0.05),
            0 10px 10px -5px rgba(0, 0, 0, 0.02),
            0 0 0 1px rgba(16, 185, 129, 0.05);
        animation: slideUp 0.5s ease-out;
    }
@keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(16px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
/* Emerald accent bar with glow */
.auth-accent-bar {
    position: absolute;
    top: -0px;
    left: 0px;
    height: 0.375rem;
    width: 100%;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
        background: linear-gradient(90deg, #10b981 0%, #34d399 50%, #10b981 100%);
        background-size: 200% 100%;
        animation: shimmer 3s linear infinite;
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}
@keyframes shimmer {
        0% {
            background-position: -200% 0;
        }
        100% {
            background-position: 200% 0;
        }
    }
/* Auth headings with better centering */
.auth-heading {
    text-align: center;
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px) {
    .auth-heading {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
}
.auth-heading {
        letter-spacing: -0.025em;
        line-height: 1.2;
    }
.auth-subheading {
    margin-top: 0.75rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
        letter-spacing: 0.01em;
}
/* Role slider for login with enhanced animations */
.role-slider {
    position: relative;
    display: inline-flex;
    width: 100%;
    border-radius: 9999px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
    padding: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}
.role-slider__option {
    position: relative;
    z-index: 10;
    flex: 1 1 0%;
    cursor: pointer;
    border-radius: 9999px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    text-align: center;
        transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
}
.role-slider__option.active {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --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);
    --tw-gradient-to: #34d399 var(--tw-gradient-to-position);
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.role-slider__option.\!active {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --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);
    --tw-gradient-to: #34d399 var(--tw-gradient-to-position);
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.role-slider__option.active {
        box-shadow: 
            0 4px 6px -1px rgba(16, 185, 129, 0.3),
            0 2px 4px -1px rgba(16, 185, 129, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
        transform: scale(1.04);
    }
.role-slider__option.\!active {
        box-shadow: 
            0 4px 6px -1px rgba(16, 185, 129, 0.3),
            0 2px 4px -1px rgba(16, 185, 129, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
        transform: scale(1.04) !important;
    }
.role-slider__option:not(.active):hover {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
        transform: scale(1.02);
}
.role-slider__option:not(.active):active {
        transform: scale(0.98);
    }
/* Password toggle button with smooth transitions */
.password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    --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));
    cursor: pointer;
    border-radius: 0.5rem;
    padding: 0.375rem;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.password-toggle:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}

.color-blind .password-toggle:hover {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.password-toggle:hover {
        transform: translateY(-50%) scale(1.1);
    }
.password-toggle:active {
        transform: translateY(-50%) scale(0.95);
    }
/* Auth form fields with floating labels */
.auth-field__label {
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
        letter-spacing: 0.01em;
}
.auth-field__input {
    width: 100%;
    border-radius: 0.75rem;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.auth-field__input::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.auth-field__input::placeholder {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.auth-field__input:hover {
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}
.auth-field__input:focus-visible {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.auth-field__input:focus {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.color-blind .auth-field__input:focus {
    --tw-border-opacity: 1;
    border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); /* Teal-500 */
}
.auth-field__input:focus {
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
        transform: translateY(-1px);
    }
.auth-field__input:hover:not(:focus) {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
/* Input with icon */
.auth-field__input-wrapper {
    position: relative;
}
.auth-field__input--with-icon {
    padding-right: 3rem;
}
/* Code input styling for trainer/gym codes */
.auth-field__code-input {
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1.125rem;
    line-height: 1.75rem;
    letter-spacing: 0.1em;
}
/* Multi-part code input with enhanced styling */
.code-input-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .code-input-group {
    gap: 0.75rem;
}
.code-input-part {
    max-width: 80px;
    flex: 1 1 0%;
    border-radius: 0.75rem;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1.125rem;
    line-height: 1.75rem;
    letter-spacing: 0.1em;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.code-input-part::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.code-input-part::placeholder {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.code-input-part:hover {
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}
.code-input-part:focus-visible {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.code-input-part:focus {
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
        transform: translateY(-1px) scale(1.02);
    }
.week-day-card:has(.code-input-separator) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.code-input-separator) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.code-input-separator {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
        text-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}
/* Auth buttons with ripple effect */
.auth-btn {
    position: relative;
    display: inline-flex;
    height: 3rem;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    overflow: hidden;
    border-radius: 0.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
body[data-easy-mode="on"] .auth-btn {
    gap: 0.75rem;
}
.auth-btn:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
    --tw-ring-offset-width: 2px;
}
.auth-btn::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }
.auth-btn:active::before {
        width: 300px;
        height: 300px;
    }
.auth-btn--primary {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --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);
    --tw-gradient-to: #34d399 var(--tw-gradient-to-position);
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        box-shadow: 
            0 4px 6px -1px rgba(16, 185, 129, 0.3),
            0 2px 4px -1px rgba(16, 185, 129, 0.2);
        position: relative;
}
.auth-btn--primary:hover {
        box-shadow: 
            0 10px 15px -3px rgba(16, 185, 129, 0.4),
            0 4px 6px -2px rgba(16, 185, 129, 0.3);
        transform: translateY(-2px);
    }
.auth-btn--primary:active {
        transform: translateY(0);
    }
.auth-btn--secondary {
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.auth-btn--secondary:hover {
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
    --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);
}
/* Alert messages with icons and better styling */
.auth-alert {
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-radius: 0.75rem;
    border-width: 2px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}
body[data-easy-mode="on"] .auth-alert {
    gap: 1rem;
}
.auth-alert {
        animation: slideIn 0.3s ease-out;
    }
@keyframes slideIn {
        from {
            opacity: 0;
            transform: translateX(-10px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
.auth-alert--success {
    border-color: rgb(16 185 129 / 0.4);
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
        box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.1);
}
.auth-alert--error {
    border-color: rgb(239 68 68 / 0.4);
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.color-blind .auth-alert--error {
    --tw-bg-opacity: 1;
    background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1)); /* Amber-50 */
}
.auth-alert--error {
        box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.1);
    }
/* Auth links with underline animation */
.auth-link {
    position: relative;
    display: inline-block;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.color-blind .auth-link {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.auth-link {
        text-decoration: none;
    }
.auth-link::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: -2px;
        left: 0;
        background: linear-gradient(90deg, #10b981, #34d399);
        transform: scaleX(1);
        transform-origin: bottom left;
        transition: transform 0.3s ease-out;
    }
.auth-link:hover {
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.auth-link:hover::after {
        transform: scaleX(1.05);
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    }
/* Choice cards for signup selection with enhanced interactions */
.auth-choice-card {
    position: relative;
    cursor: pointer;
    border-radius: 1rem;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.5rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
#workout-popup .auth-choice-card {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.auth-choice-card {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }
.auth-choice-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 1rem;
        padding: 2px;
        background: linear-gradient(135deg, transparent 0%, rgba(16, 185, 129, 0.3) 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
.auth-choice-card:hover {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}

.color-blind .auth-choice-card:hover {
    --tw-border-opacity: 1;
    border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); /* Teal-500 */
}
.auth-choice-card:hover {
        box-shadow: 
            0 20px 25px -5px rgba(0, 0, 0, 0.1),
            0 10px 10px -5px rgba(0, 0, 0, 0.04),
            0 0 0 1px rgba(16, 185, 129, 0.2);
        transform: translateY(-4px);
    }
.auth-choice-card:hover::before {
        opacity: 1;
    }
.auth-choice-card:active {
        transform: translateY(-2px);
    }
.auth-choice-card__icon {
    display: flex;
    height: 3.5rem;
    width: 3.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    --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);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.auth-choice-card__icon--client {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --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);
    --tw-gradient-to: #34d399 var(--tw-gradient-to-position);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}
.auth-choice-card__icon--trainer {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #60a5fa var(--tw-gradient-to-position);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
}
.auth-choice-card__icon--gym {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #c084fc var(--tw-gradient-to-position);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        box-shadow: 0 4px 14px rgba(168, 85, 247, 0.4);
}
.auth-choice-card:hover .auth-choice-card__icon {
        transform: scale(1.1) rotate(5deg);
        box-shadow: 0 8px 20px rgba(16, 185, 129, 0.5);
    }
.auth-choice-card__title {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
        letter-spacing: -0.01em;
}
.auth-choice-card__description {
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
        letter-spacing: 0.01em;
}
/* Dark mode support with enhanced polish */
html.dark .auth-container {
        background: 
            radial-gradient(circle at 20% 20%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
            radial-gradient(circle at 80% 80%, rgba(52, 211, 153, 0.08) 0%, transparent 50%);
    }
html.dark .auth-card {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
        box-shadow: 
            0 20px 25px -5px rgba(0, 0, 0, 0.3),
            0 10px 10px -5px rgba(0, 0, 0, 0.2),
            0 0 0 1px rgba(16, 185, 129, 0.1);
}
html.dark .auth-heading {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
html.dark .auth-subheading {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
html.dark .role-slider {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
html.dark .role-slider__option:not(.active):hover {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
html.dark .auth-field__label {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
html.dark .auth-field__input,
    html.dark .code-input-part {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
html.dark .auth-field__input::-moz-placeholder, html.dark .code-input-part::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
html.dark .auth-field__input::placeholder,
    html.dark .code-input-part::placeholder {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
html.dark .auth-field__input:focus,
    html.dark .code-input-part:focus {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.color-blind html.dark .auth-field__input:focus,
.color-blind 
    html.dark .code-input-part:focus {
    --tw-border-opacity: 1;
    border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); /* Teal-500 */
}
html.dark .auth-field__input:focus,
    html.dark .code-input-part:focus {
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
    }
html.dark .auth-field__input:hover,
    html.dark .code-input-part:hover {
    --tw-border-opacity: 1;
    border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
}
html.dark .password-toggle {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.week-day-card:has(html.dark .password-toggle:hover) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(html.dark .password-toggle:hover) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
html.dark .password-toggle:hover {
    background-color: rgb(6 78 59 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.week-day-card:has(html.dark .auth-alert--success) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(html.dark .auth-alert--success) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
html.dark .auth-alert--success {
    border-color: rgb(16 185 129 / 0.4);
    background-color: rgb(6 78 59 / 0.2);
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
html.dark .auth-alert--error {
    border-color: rgb(239 68 68 / 0.4);
    background-color: rgb(127 29 29 / 0.2);
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
html.dark .auth-alert--info {
    border-color: rgb(59 130 246 / 0.4);
    background-color: rgb(30 58 138 / 0.2);
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.week-day-card:has(html.dark .auth-link) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(html.dark .auth-link) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
html.dark .auth-link {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
html.dark .auth-link:hover {
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
html.dark .auth-choice-card {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
html.dark .auth-choice-card:hover {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}

.color-blind html.dark .auth-choice-card:hover {
    --tw-border-opacity: 1;
    border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); /* Teal-500 */
}
html.dark .auth-choice-card:hover {
        box-shadow: 
            0 20px 25px -5px rgba(0, 0, 0, 0.3),
            0 10px 10px -5px rgba(0, 0, 0, 0.2),
            0 0 0 1px rgba(16, 185, 129, 0.3);
    }
html.dark .auth-choice-card__title {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
html.dark .auth-choice-card__description {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
html.dark .auth-btn--secondary {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
html.dark .auth-btn--secondary:hover {
    --tw-border-opacity: 1;
    border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.week-day-card:has(html.dark .code-input-separator) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(html.dark .code-input-separator) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
html.dark .code-input-separator {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
/* Smooth transitions for form field blocks */
.auth-fields-block {
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, max-height 0.4s ease-in-out;
        overflow: hidden;
    }
.auth-fields-block.hidden {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
        pointer-events: none;
    }
.auth-fields-block:not(.hidden) {
        opacity: 1;
        transform: translateY(0);
        max-height: 1000px;
    }
/* Profile Page - App-style redesign */
/* Prevent profile image copying on live preview */
#profile-sidebar-avatar-image,
    .floating-profile-card__avatar img {
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-drag: none;
        pointer-events: none;
    }
/* Page Layout: sidebar + main content */
.profile-page-layout {
    margin-left: auto;
    margin-right: auto;
    max-width: 80rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
@media (min-width: 640px) {
    .profile-page-layout {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .profile-page-layout {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
.profile-page-layout {
        display: grid;
        gap: 2.5rem;
        grid-template-columns: 1fr;
        align-items: start;
    }
@media (min-width: 1024px) {
        .profile-page-layout {
            grid-template-columns: 320px 1fr;
            gap: 3rem;
        }
    }
/* Sidebar profile card - Enhanced and wider */
.profile-sidebar-card {
    border-radius: 1rem;
    border-width: 1px;
    border-color: rgb(226 232 240 / 0.6);
    padding: 1.5rem;
}
#workout-popup .profile-sidebar-card {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.profile-sidebar-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 253, 244, 0.95) 100%);
        backdrop-filter: blur(12px);
        display: flex;
        flex-direction: column;
        gap: 1.75rem;
        position: sticky;
        top: 5rem;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    }
html.dark .profile-sidebar-card {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
        background: linear-gradient(135deg, rgba(17, 24, 39, 0.86) 0%, rgba(15, 23, 42, 0.72) 100%);
        box-shadow: 0 10px 24px rgba(2, 6, 23, 0.45);
}
/* Main content area - Increased spacing */
.profile-main-content {
        display: flex;
        flex-direction: column;
        gap: 3rem;
        min-width: 0;
        align-self: start;
        margin-top: 0;
    }
.profile-main-content > :first-child {
        margin-top: 0;
    }
/* Settings Drawer */
.profile-settings-drawer {
        position: fixed;
        inset: 0;
        z-index: 60;
        pointer-events: none;
    }
.profile-settings-drawer.is-open {
        pointer-events: auto;
    }
.profile-settings-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        transition: opacity 0.3s ease;
        backdrop-filter: blur(2px);
    }
.profile-settings-drawer.is-open .profile-settings-overlay {
        opacity: 1;
    }
.profile-settings-panel {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(480px, 100vw);
        background: white;
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
    }
html.dark .profile-settings-panel {
        background: rgb(17, 24, 39);
        border-left: 1px solid rgba(51, 65, 85, 0.5);
    }
.profile-settings-drawer.is-open .profile-settings-panel {
        transform: translateX(0);
    }
.profile-settings-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-width: 1px;
    border-color: rgb(226 232 240 / 0.7);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
        flex-shrink: 0;
}
html.dark .profile-settings-panel-header {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
}
.profile-settings-panel-body {
    flex: 1 1 0%;
}
.profile-settings-panel-body > :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));
}
.profile-settings-panel-body {
    overflow-y: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.profile-settings-panel-section {
    border-radius: 1rem;
    border-width: 1px;
    border-color: rgb(226 232 240 / 0.6);
    padding: 1.5rem;
}
#workout-popup .profile-settings-panel-section {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.profile-settings-panel-section {
        background: rgba(248, 250, 252, 0.72);
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    }
html.dark .profile-settings-panel-section {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    background-color: rgb(15 23 42 / 0.4);
        box-shadow: 0 4px 14px rgba(2, 6, 23, 0.25);
}
.profile-settings-panel-section-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.profile-settings-panel-section-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.profile-settings-panel-section-subtitle {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.profile-settings-panel-section-subtitle:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.profile-settings-group > :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));
}
.profile-settings-category-title {
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.profile-settings-category-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
/* Profile Container (legacy, kept for compatibility) */
/* Profile Header Card - Premium glass style */
html.dark .profile-header {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
        background: linear-gradient(135deg, rgba(17, 24, 39, 0.7) 0%, rgba(30, 36, 53, 0.5) 100%);
}
/* Stat Cards with emerald accents */
html.dark .profile-stat-card {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    background-color: rgb(2 6 23 / 0.4);
}
html.dark .profile-stat-card:hover {
    border-color: rgb(16 185 129 / 0.3);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
}
/* Section Cards - Glass morphism */
.profile-section {
    border-radius: 1rem;
    border-width: 1px;
    border-color: rgb(226 232 240 / 0.6);
    padding: 1.5rem;
}
#workout-popup .profile-section {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.profile-section {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(8px);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    }
html.dark .profile-section {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
        background: rgba(17, 24, 39, 0.5);
}
/* Settings Cards with hover effects */
.profile-settings-card {
    border-radius: 1rem;
    border-width: 1px;
    border-color: rgb(226 232 240 / 0.6);
    padding: 1.5rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
#workout-popup .profile-settings-card {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.profile-settings-card {
        background: rgba(248, 250, 252, 0.72);
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    }
.profile-settings-card:hover {
    border-color: rgb(203 213 225 / 0.7);
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
html.dark .profile-settings-card {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    background-color: rgb(15 23 42 / 0.3);
}
html.dark .profile-settings-card:hover {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
        box-shadow: 0 6px 16px rgba(2, 6, 23, 0.35);
}
.profile-condition-card {
    display: flex;
    height: 100%;
    flex-direction: column;
    padding: 1.25rem;
}
.condition-input {
    margin-top: 0.25rem;
    width: 100%;
    border-radius: 0.5rem;
    border-width: 1px;
    border-color: rgb(226 232 240 / 0.8);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(30 41 59 / var(--tw-text-opacity, 1));
        box-shadow: none;
}
.condition-input:focus {
    --tw-border-opacity: 1;
    border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-color: rgb(167 243 208 / 0.6);
}
.color-blind .condition-input:focus {
    --tw-border-opacity: 1;
    border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); /* Teal-500 */
}
html.dark .condition-input {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
html.dark .condition-input:focus {
    border-color: rgb(16 185 129 / 0.6);
    --tw-ring-color: rgb(16 185 129 / 0.3);
}
/* Primary Buttons - Emerald gradient */
.profile-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --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);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
        background: linear-gradient(135deg, rgb(16, 185, 129) 0%, rgb(5, 150, 105) 100%);
        border: 1px solid rgba(5, 150, 105, 0.28);
}
.profile-btn-primary:hover {
        box-shadow: 0 6px 14px rgba(5, 150, 105, 0.24);
        filter: brightness(1.02);
    }
.profile-btn-primary:active {
        filter: brightness(0.98);
    }
/* Secondary Buttons - Outlined */
.profile-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    border-width: 1px;
    border-color: rgb(203 213 225 / 0.7);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(30 41 59 / var(--tw-text-opacity, 1));
    --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);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.profile-btn-secondary:hover {
    border-color: rgb(148 163 184 / 0.7);
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
html.dark .profile-btn-secondary {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    background-color: rgb(15 23 42 / 0.7);
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
html.dark .profile-btn-secondary:hover {
    --tw-border-opacity: 1;
    border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
    background-color: rgb(30 41 59 / 0.8);
    --tw-text-opacity: 1;
    color: rgb(248 250 252 / var(--tw-text-opacity, 1));
}
/* Small Buttons */
.profile-btn-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --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);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
        background: linear-gradient(135deg, rgb(16, 185, 129) 0%, rgb(5, 150, 105) 100%);
        color: white;
        border: 1px solid rgba(5, 150, 105, 0.28);
}
.profile-btn-small:hover {
        box-shadow: 0 6px 14px rgba(5, 150, 105, 0.24);
        filter: brightness(1.02);
    }
/* Danger Button - Rose */
.profile-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --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);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
        border: 1px solid rgba(190, 24, 93, 0.35);
}
.profile-btn-danger:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(190 18 60 / var(--tw-bg-opacity, 1));
        box-shadow: 0 6px 14px rgba(190, 24, 93, 0.28);
}
/* Danger Zone Card */
.profile-danger-zone {
    border-radius: 1rem;
    border-width: 1px;
    padding: 1.25rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
#workout-popup .profile-danger-zone {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.profile-danger-zone {
        border-color: rgba(225, 29, 72, 0.24);
        background: linear-gradient(135deg, rgba(255, 241, 242, 0.7), rgba(255, 228, 230, 0.45));
        box-shadow: 0 4px 12px rgba(190, 24, 93, 0.1);
    }
html.dark .profile-danger-zone {
        border-color: rgba(190, 24, 93, 0.42);
        background: linear-gradient(135deg, rgba(76, 5, 25, 0.42), rgba(63, 10, 18, 0.32));
    }
/* Avatar with hover overlay */
.profile-avatar {
    position: relative;
    display: flex;
    height: 7rem;
    width: 7rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --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);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
#workout-popup .profile-avatar {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.profile-identity-banner .profile-identity-banner__avatar.profile-avatar {
        background: rgba(15, 23, 42, 0.26);
        border-color: rgba(255, 255, 255, 0.72);
    }
.profile-avatar {
        cursor: default;
    }
#profile-shell[data-edit-mode='true'] .profile-avatar[data-avatar-button] {
        cursor: pointer;
    }
#profile-shell[data-edit-mode='true'] .profile-avatar[data-avatar-button]:hover {
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
        box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}
html.dark .profile-avatar {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
}
html.dark #profile-shell[data-edit-mode='true'] .profile-avatar[data-avatar-button]:hover {
    --tw-border-opacity: 1;
    border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}
.profile-inline-field {
        position: relative;
    }
.profile-inline-view {
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
.profile-inline-edit {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        visibility: hidden;
        transform: translateY(-4px);
        transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.2s ease;
    }
#profile-shell[data-edit-mode='true'] .profile-inline-view {
        display: none;
    }
#profile-shell[data-edit-mode='true'] .profile-inline-edit {
        max-height: 340px;
        opacity: 1;
        visibility: visible;
        overflow: visible;
        transform: translateY(0);
        margin-top: 0.5rem;
    }
.profile-edit-actions {
        display: none;
    }
#profile-shell[data-edit-mode='true'] .profile-edit-actions {
        display: flex;
    }
#profile-image-dropzone.is-drag-over {
    --tw-border-opacity: 1;
    border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
    background-color: rgb(236 253 245 / 0.7);
}
.color-blind #profile-image-dropzone.is-drag-over {
    --tw-border-opacity: 1;
    border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); /* Teal-500 */
}
#profile-image-dropzone.is-drag-over:is(.dark *) {
    border-color: rgb(16 185 129 / 0.6);
    background-color: rgb(6 78 59 / 0.2);
}
.profile-upload-thumb-button {
    border-radius: 1rem;
    border-width: 1px;
    border-color: transparent;
    padding: 0.125rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
#workout-popup .profile-upload-thumb-button {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.profile-upload-thumb-button:hover,
    .profile-upload-thumb-button:focus-visible {
    --tw-border-opacity: 1;
    border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}
.profile-upload-thumb-button:hover:is(.dark *),
    .profile-upload-thumb-button:focus-visible:is(.dark *) {
    border-color: rgb(16 185 129 / 0.6);
}
.profile-upload-thumb-button:hover,
    .profile-upload-thumb-button:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
    }
.profile-stats-strip {
    display: flex;
    align-items: stretch;
    border-radius: 1rem;
    background-color: rgb(248 250 252 / 0.9);
}
#workout-popup .profile-stats-strip {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.profile-stats-strip:is(.dark *) {
    background-color: rgb(15 23 42 / 0.45);
}
.profile-stat-segment {
    flex: 1 1 0%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    text-align: center;
}
.profile-stat-segment + .profile-stat-segment {
    border-left-width: 1px;
    border-color: rgb(226 232 240 / 0.7);
}
.profile-stat-segment + .profile-stat-segment:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
}
.profile-sidebar-actions .profile-btn-primary,
    .profile-sidebar-actions .profile-btn-secondary,
    .profile-sidebar-actions a,
    .profile-sidebar-actions button {
        width: 100%;
    }
/* Section Headers */
.profile-section-header {
    margin-bottom: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .profile-section-header {
    gap: 1rem;
}
@media (min-width: 640px) {
    .profile-section-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
.profile-section-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
html.dark .profile-section-title {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.profile-section-subtitle {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
html.dark .profile-section-subtitle {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
/* Settings Grid */
/* Alert Messages with emerald theme */
.profile-alert-success {
    border-radius: 0.75rem;
    border-width: 1px;
    border-color: rgb(167 243 208 / 0.7);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(6 95 70 / var(--tw-text-opacity, 1));
        background: rgba(209, 250, 229, 0.5);
}
.week-day-card:has(html.dark .profile-alert-success) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(html.dark .profile-alert-success) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
html.dark .profile-alert-success {
    border-color: rgb(6 78 59 / 0.5);
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
        background: rgba(6, 78, 59, 0.3);
}
.profile-alert-error {
    border-radius: 0.75rem;
    border-width: 1px;
    border-color: rgb(254 205 211 / 0.7);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(159 18 57 / var(--tw-text-opacity, 1));
        background: rgba(254, 226, 226, 0.5);
}
html.dark .profile-alert-error {
    border-color: rgb(136 19 55 / 0.5);
    --tw-text-opacity: 1;
    color: rgb(251 113 133 / var(--tw-text-opacity, 1));
        background: rgba(76, 5, 25, 0.3);
}
/* Accent Strip Divider */
/* Form Inputs with emerald focus */
.profile-input {
    margin-top: 0.5rem;
    width: 100%;
    border-radius: 0.75rem;
    border-width: 1px;
    border-color: rgb(203 213 225 / 0.8);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --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);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.profile-input:focus {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 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(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);
    --tw-ring-color: rgb(16 185 129 / 0.2);
}
.profile-username-status {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
        min-height: 1rem;
}
.profile-username-status.is-idle {
    color: transparent;
}
.profile-username-status.is-checking {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.profile-username-status.is-checking:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.profile-username-status.is-ok {
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .profile-username-status.is-ok {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.profile-username-status.is-ok:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.profile-username-status.is-ok:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.profile-username-status.is-ok:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.profile-username-status.is-error {
    --tw-text-opacity: 1;
    color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}
.profile-username-status.is-error:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}
html.dark .profile-input {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
}
html.dark .profile-input:focus {
    border-color: rgb(16 185 129 / 0.5);
}
.profile-input[type='color'] {
        margin-top: 0.35rem;
        height: 2.95rem;
        padding: 0.35rem;
        border-radius: 0.85rem;
        border-color: rgba(16, 185, 129, 0.45);
        background: linear-gradient(145deg, rgba(240, 253, 250, 0.92) 0%, rgba(236, 253, 245, 0.88) 100%);
        cursor: pointer;
    }
.profile-input[type='color']::-webkit-color-swatch-wrapper {
        padding: 0;
        border-radius: 0.62rem;
    }
.profile-input[type='color']::-webkit-color-swatch {
        border: 0;
        border-radius: 0.62rem;
        box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
    }
.profile-input[type='color']::-moz-color-swatch {
        border: 0;
        border-radius: 0.62rem;
        box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
    }
html.dark .profile-input[type='color'] {
        border-color: rgba(52, 211, 153, 0.5);
        background: linear-gradient(145deg, rgba(15, 23, 42, 0.92) 0%, rgba(2, 6, 23, 0.88) 100%);
    }
html.dark .profile-input[type='color']::-webkit-color-swatch,
    html.dark .profile-input[type='color']::-moz-color-swatch {
        box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.22);
    }
/* Settings checkbox wrapper styling - Hide native checkbox */
.profile-settings-panel-section .profile-checkbox {
        position: relative;
        display: block;
        width: 1.25rem;
        height: 1.25rem;
        margin: 0;
        padding: 0;
        opacity: 1;
        -webkit-appearance: none;
        -moz-appearance: none;
             appearance: none;
        background: white;
        border: 2px solid rgb(203, 213, 225);
        border-radius: 0.375rem;
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }
.profile-settings-panel-section .profile-checkbox:hover {
        border-color: rgb(16, 185, 129);
        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
    }
.profile-settings-panel-section .profile-checkbox:focus-visible {
        outline: 2px solid rgb(16, 185, 129);
        outline-offset: 2px;
        border-color: rgb(16, 185, 129);
    }
.profile-settings-panel-section .profile-checkbox:checked {
        background: linear-gradient(135deg, rgb(16, 185, 129) 0%, rgb(5, 150, 105) 100%);
        border-color: rgb(16, 185, 129);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    }
.profile-settings-panel-section .profile-checkbox:checked::after {
        content: '✓';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 0.75rem;
        font-weight: bold;
        line-height: 1;
    }
html.dark .profile-settings-panel-section .profile-checkbox {
        background: rgb(15, 23, 42);
        border-color: rgb(71, 85, 105);
    }
html.dark .profile-settings-panel-section .profile-checkbox:hover {
        border-color: rgb(16, 185, 129);
        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
    }
html.dark .profile-settings-panel-section .profile-checkbox:focus-visible {
        outline-color: rgb(16, 185, 129);
        border-color: rgb(16, 185, 129);
    }
html.dark .profile-settings-panel-section .profile-checkbox:checked {
        background: linear-gradient(135deg, rgb(16, 185, 129) 0%, rgb(5, 150, 105) 100%);
        border-color: rgb(16, 185, 129);
    }
.customiser-milestone-option {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    border-radius: 0.75rem;
    border-width: 1px;
    border-color: rgb(226 232 240 / 0.8);
    background-color: rgb(255 255 255 / 0.8);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    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;
}
body[data-easy-mode="on"] .customiser-milestone-option {
    gap: 0.75rem;
}
.customiser-milestone-option:is(.dark *) {
    border-color: rgb(51 65 85 / 0.7);
    background-color: rgb(15 23 42 / 0.4);
}
.customiser-milestone-option {
        cursor: pointer;
    }
.profile-field-heading {
        font-size: 0.82rem;
        line-height: 1.1;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgb(100, 116, 139);
    }
html.dark .profile-field-heading {
        color: rgb(148, 163, 184);
    }
.profile-field-label {
        font-size: 0.72rem;
        line-height: 1.1;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgb(148, 163, 184);
    }
html.dark .profile-field-label {
        color: rgb(148, 163, 184);
    }
.profile-input-prefix-wrap {
        position: relative;
        display: flex;
        align-items: center;
    }
.profile-input-prefix {
        position: absolute;
        left: 0.95rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.875rem;
        font-weight: 800;
        line-height: 1;
        color: rgb(15, 118, 110);
        pointer-events: none;
        z-index: 1;
        display: flex;
        align-items: center;
        height: 1em;
    }
.profile-input--prefixed {
        padding-left: 2rem;
    }
.profile-input-prefix-wrap .profile-input--prefixed {
        margin-top: 0;
    }
html.dark .profile-input-prefix {
        color: rgb(94, 234, 212);
    }
.profile-field-heading-with-info {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }
.profile-warning-hint {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.1rem;
        height: 1.1rem;
        border-radius: 9999px;
        border: 1px solid rgba(245, 158, 11, 0.45);
        background: rgba(254, 243, 199, 0.7);
        color: rgb(180, 83, 9);
        cursor: help;
        transition: all 0.18s ease;
    }
.profile-warning-hint__icon {
        width: 0.72rem;
        height: 0.72rem;
    }
.profile-warning-hint__tooltip {
        position: absolute;
        left: 50%;
        bottom: calc(100% + 0.4rem);
        transform: translateX(-50%) translateY(4px);
        width: -moz-max-content;
        width: max-content;
        max-width: min(18rem, calc(100vw - 2rem));
        border-radius: 0.6rem;
        border: 1px solid rgba(245, 158, 11, 0.35);
        background: rgba(255, 251, 235, 0.98);
        padding: 0.45rem 0.6rem;
        font-size: 0.68rem;
        line-height: 1.35;
        font-weight: 600;
        letter-spacing: 0.01em;
        color: rgb(120, 53, 15);
        opacity: 0;
        pointer-events: none;
        z-index: 45;
        box-shadow: 0 10px 18px -14px rgba(120, 53, 15, 0.6);
        transition: opacity 0.16s ease, transform 0.16s ease;
        white-space: normal;
        text-align: left;
    }
.profile-warning-hint:hover,
    .profile-warning-hint:focus-visible {
        background: rgba(254, 243, 199, 0.92);
        border-color: rgba(245, 158, 11, 0.6);
        outline: none;
    }
.profile-warning-hint:hover .profile-warning-hint__tooltip,
    .profile-warning-hint:focus-visible .profile-warning-hint__tooltip {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
html.dark .profile-warning-hint {
        border-color: rgba(251, 191, 36, 0.5);
        background: rgba(120, 53, 15, 0.35);
        color: rgb(253, 224, 71);
    }
html.dark .profile-warning-hint__tooltip {
        border-color: rgba(245, 158, 11, 0.42);
        background: rgba(41, 24, 12, 0.96);
        color: rgb(254, 243, 199);
        box-shadow: 0 14px 24px -18px rgba(15, 23, 42, 0.9);
    }
.profile-phone-field {
        position: relative;
        z-index: 40;
    }
.profile-phone-row {
        display: grid;
        grid-template-columns: minmax(7rem, 8rem) minmax(0, 1fr);
        gap: 0.75rem;
        align-items: end;
    }
.profile-phone-row__country,
    .profile-phone-row__number {
        min-width: 0;
        position: relative;
    }
.profile-drawer-toggle {
        position: relative;
    }
.profile-drawer-toggle__icon {
        position: relative;
        width: 1rem;
        height: 0.9rem;
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
        flex-shrink: 0;
    }
.profile-drawer-toggle__line {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
        transition: transform 0.2s ease, opacity 0.2s ease;
        transform-origin: center;
    }
.profile-drawer-toggle.is-open .profile-drawer-toggle__line:nth-child(1) {
        transform: translateY(0.38rem) rotate(45deg);
    }
.profile-drawer-toggle.is-open .profile-drawer-toggle__line:nth-child(2) {
        opacity: 0;
    }
.profile-drawer-toggle.is-open .profile-drawer-toggle__line:nth-child(3) {
        transform: translateY(-0.38rem) rotate(-45deg);
    }
.profile-search-select {
        position: relative;
        margin-top: 0.25rem;
    }
.profile-search-select__native {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        clip: rect(0, 0, 0, 0);
        overflow: hidden;
        white-space: nowrap;
    }
.profile-search-select__trigger {
    width: 100%;
    border-radius: 0.75rem;
    border-width: 1px;
    border-color: rgb(203 213 225 / 0.8);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(30 41 59 / var(--tw-text-opacity, 1));
    --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);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.profile-search-select__trigger:focus {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-color: rgb(16 185 129 / 0.2);
}
.profile-search-select__trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }
html.dark .profile-search-select__trigger {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.profile-search-select__trigger-icon {
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.profile-search-select__dropdown {
    position: absolute;
    left: 0px;
    right: 0px;
    z-index: 30;
    margin-top: 0.5rem;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 0.5rem;
    --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);
}
html.dark .profile-search-select__dropdown {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.profile-search-select__search {
    width: 100%;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.profile-search-select__search:focus {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --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);
    --tw-ring-color: rgb(16 185 129 / 0.2);
}
html.dark .profile-search-select__search {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.profile-search-select__list {
    margin-top: 0.5rem;
    max-height: 11rem;
}
.profile-search-select__list > :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));
}
.profile-search-select__list {
    overflow-y: auto;
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    scrollbar-width: none; /* Firefox */
}
.profile-search-select__list::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
  }
.profile-search-select__option {
    width: 100%;
    border-radius: 0.5rem;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: left;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
    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;
}
.profile-search-select__option:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
html.dark .profile-search-select__option {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
html.dark .profile-search-select__option:hover {
    background-color: rgb(6 78 59 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(167 243 208 / var(--tw-text-opacity, 1));
}
.profile-search-select__option.is-selected {
    --tw-bg-opacity: 1;
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}
html.dark .profile-search-select__option.is-selected {
    background-color: rgb(6 78 59 / 0.4);
    --tw-text-opacity: 1;
    color: rgb(167 243 208 / var(--tw-text-opacity, 1));
}
.profile-search-select__empty {
    border-radius: 0.5rem;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.customiser-milestone-box {
    margin-top: 0.125rem;
    height: 1rem;
    width: 1rem;
    border-radius: 0.25rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.customiser-milestone-box:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.customiser-milestone-box {
        flex-shrink: 0;
    }
.customiser-milestone-input:focus-visible + .customiser-milestone-box {
    --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);
    --tw-ring-color: rgb(16 185 129 / 0.3);
}
.calendar-day-card.customiser-milestone-input:focus-visible + .customiser-milestone-box.ring-blue-500\/80 {
  border-color: rgb(16, 185, 129);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25),
              0 0 20px rgba(16, 185, 129, 0.15),
              0 8px 32px -8px rgba(16, 185, 129, 0.2);
  animation: pulse-today 2s ease-in-out infinite;
}
.calendar-day-card.customiser-milestone-input:focus-visible + .customiser-milestone-box.ring-emerald-500\/70 {
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15),
              0 4px 16px -4px rgba(16, 185, 129, 0.1);
}
.customiser-milestone-input:checked + .customiser-milestone-box {
        border-color: rgb(16, 185, 129);
        background: linear-gradient(135deg, rgb(16, 185, 129) 0%, rgb(5, 150, 105) 100%);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    }
.customiser-milestone-input:checked + .customiser-milestone-box::after {
        content: "";
        display: block;
        width: 0.25rem;
        height: 0.5rem;
        margin: 0.18rem 0 0 0.32rem;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }
/* ───────────────────────────────────────────────────────────────────────── */
/* CUSTOM DATE PICKER STYLES (Universal Global) */
/* ───────────────────────────────────────────────────────────────────────── */
.custom-date-picker {
        position: fixed;
        inset: 0;
        z-index: 50;
        display: flex;
        align-items: flex-end;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        pointer-events: none;
    }
@media (min-width: 640px) {
        .custom-date-picker {
            align-items: center;
            justify-content: center;
        }
    }
.custom-date-picker.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
.custom-date-picker__backdrop {
        position: absolute;
        inset: 0;
        cursor: pointer;
    }
.custom-date-picker__panel {
        position: relative;
        z-index: 51;
        background: white;
        border-radius: 1.25rem 1.25rem 0 0;
        width: 100%;
        max-width: 28rem;
        max-height: 90vh;
        padding: 1.5rem;
        overflow-y: auto;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
        animation: datePickerSlideUp 0.3s ease;
    }
@media (min-width: 640px) {
        .custom-date-picker__panel {
            border-radius: 1.25rem;
            width: auto;
            margin: 0 auto;
        }
    }
@keyframes datePickerSlideUp {
        from {
            transform: translateY(2rem);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
html.dark .custom-date-picker__panel {
        background: rgb(15, 23, 42);
    }
.custom-date-picker__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid rgba(203, 213, 225, 0.3);
    }
.custom-date-picker__title {
        font-size: 0.875rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgb(100, 116, 139);
    }
html.dark .custom-date-picker__title {
        color: rgb(148, 163, 184);
    }
.custom-date-picker__close {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        border-radius: 0.625rem;
        border: 1px solid rgba(203, 213, 225, 0.3);
        background: transparent;
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        color: rgb(100, 116, 139);
        cursor: pointer;
        transition: all 0.2s ease;
    }
.custom-date-picker__close:hover {
        background: rgba(16, 185, 129, 0.1);
        border-color: rgb(16, 185, 129);
        color: rgb(16, 185, 129);
    }
html.dark .custom-date-picker__close {
        border-color: rgba(71, 85, 105, 0.3);
        color: rgb(148, 163, 184);
    }
html.dark .custom-date-picker__close:hover {
        background: rgba(16, 185, 129, 0.15);
        border-color: rgb(16, 185, 129);
        color: rgb(110, 231, 183);
    }
.custom-date-picker__nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
.custom-date-picker__month {
        flex: 1;
        text-align: center;
        font-size: 0.95rem;
        font-weight: 700;
        color: rgb(15, 23, 42);
    }
html.dark .custom-date-picker__month {
        color: rgb(226, 232, 240);
    }
.custom-date-picker__btn-nav {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border-radius: 0.625rem;
        border: 1px solid rgba(203, 213, 225, 0.3);
        background: transparent;
        color: rgb(100, 116, 139);
        cursor: pointer;
        transition: all 0.2s ease;
    }
.custom-date-picker__btn-nav:hover {
        background: rgba(16, 185, 129, 0.1);
        border-color: rgb(16, 185, 129);
        color: rgb(16, 185, 129);
    }
html.dark .custom-date-picker__btn-nav {
        border-color: rgba(71, 85, 105, 0.3);
    }
html.dark .custom-date-picker__btn-nav:hover {
        background: rgba(16, 185, 129, 0.15);
        border-color: rgb(16, 185, 129);
        color: rgb(110, 231, 183);
    }
.custom-date-picker__calendar {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 0.375rem;
    }
.custom-date-picker__day-header {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 2rem;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: rgb(148, 163, 184);
        text-align: center;
    }
.custom-date-picker__day-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 2.5rem;
        border-radius: 0.625rem;
        border: 1px solid transparent;
        background: transparent;
        font-size: 0.875rem;
        font-weight: 500;
        color: rgb(71, 85, 105);
        cursor: pointer;
        transition: all 0.15s ease;
    }
.custom-date-picker__day-btn:hover:not(:disabled) {
        background: rgba(16, 185, 129, 0.15);
        border-color: rgb(16, 185, 129);
        color: rgb(16, 185, 129);
    }
.custom-date-picker__day-btn:disabled {
        color: rgb(203, 213, 225);
        cursor: not-allowed;
        opacity: 0.5;
    }
.custom-date-picker__day-btn.is-today {
        border-color: rgb(16, 185, 129);
        color: rgb(16, 185, 129);
    }
.custom-date-picker__day-btn.is-selected {
        background: linear-gradient(135deg, rgb(16, 185, 129) 0%, rgb(5, 150, 105) 100%);
        border-color: rgb(16, 185, 129);
        color: white;
        font-weight: 600;
    }
html.dark .custom-date-picker__day-btn {
        color: rgb(148, 163, 184);
    }
html.dark .custom-date-picker__day-btn:hover:not(:disabled) {
        background: rgba(16, 185, 129, 0.2);
        border-color: rgb(16, 185, 129);
        color: rgb(110, 231, 183);
    }
html.dark .custom-date-picker__day-btn:disabled {
        color: rgb(71, 85, 105);
    }
html.dark .custom-date-picker__day-btn.is-today {
        border-color: rgb(16, 185, 129);
        color: rgb(110, 231, 183);
    }
.custom-date-picker__actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.75rem;
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(203, 213, 225, 0.3);
    }
.custom-date-picker__btn {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        border-radius: 0.625rem;
        border: 1px solid rgb(203, 213, 225);
        background: white;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: rgb(71, 85, 105);
        cursor: pointer;
        transition: all 0.2s ease;
    }
.custom-date-picker__btn:hover {
        background: rgb(248, 250, 252);
        border-color: rgb(148, 163, 184);
    }
.custom-date-picker__btn--primary {
        background: rgb(16, 185, 129);
        border-color: rgb(16, 185, 129);
        color: white;
    }
.custom-date-picker__btn--primary:hover {
        background: rgb(5, 150, 105);
        border-color: rgb(5, 150, 105);
    }
html.dark .custom-date-picker__btn {
        border-color: rgb(71, 85, 105);
        background: transparent;
        color: rgb(203, 213, 225);
    }
html.dark .custom-date-picker__btn:hover {
        background: rgba(71, 85, 105, 0.2);
        border-color: rgb(100, 116, 139);
    }
html.dark .custom-date-picker__btn--primary {
        background: rgb(16, 185, 129);
        border-color: rgb(16, 185, 129);
        color: rgb(15, 23, 42);
    }
html.dark .custom-date-picker__btn--primary:hover {
        background: rgb(5, 150, 105);
        border-color: rgb(5, 150, 105);
    }
@media (prefers-reduced-motion: reduce) {
        .custom-date-picker__panel {
            animation: none;
        }
    }
/* Icon Container */
.week-day-card:has(html.dark .profile-icon) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(html.dark .profile-icon) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
html.dark .profile-icon {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
/* Status Badge */
.profile-badge-verified {
    border-radius: 9999px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 10px;
    font-weight: 600;
        background: rgba(209, 250, 229, 0.8);
        color: rgb(6, 78, 59);
}
html.dark .profile-badge-verified {
        background: rgba(6, 78, 59, 0.5);
        color: rgb(167, 243, 208);
    }
.profile-badge-unverified {
    border-radius: 9999px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 10px;
    font-weight: 600;
        background: rgba(254, 243, 199, 0.8);
        color: rgb(120, 53, 15);
}
html.dark .profile-badge-unverified {
        background: rgba(120, 53, 15, 0.3);
        color: rgb(253, 224, 71);
    }
/* ── Theme Picker: segmented pill selector ─────────────────────────────── */
.profile-theme-picker {
        display: flex;
        align-items: center;
        gap: 0;
        padding: 3px;
        border-radius: 999px;
        background: rgba(241, 245, 249, 0.9);
        border: 1px solid rgba(203, 213, 225, 0.7);
        width: 100%;
    }
html.dark .profile-theme-picker {
        background: rgba(15, 23, 42, 0.8);
        border-color: rgba(51, 65, 85, 0.6);
    }
.profile-theme-option {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 6px 10px;
        border-radius: 999px;
        border: none;
        background: transparent;
        cursor: pointer;
        font-size: 0.75rem;
        font-weight: 500;
        color: rgb(100, 116, 139);
        transition: all 0.2s ease;
        white-space: nowrap;
        outline: none;
    }
html.dark .profile-theme-option {
        color: rgb(148, 163, 184);
    }
.profile-theme-option:hover:not([aria-pressed="true"]) {
        color: rgb(15, 23, 42);
        background: rgba(255, 255, 255, 0.7);
    }
html.dark .profile-theme-option:hover:not([aria-pressed="true"]) {
        color: rgb(226, 232, 240);
        background: rgba(30, 41, 59, 0.7);
    }
.profile-theme-option[aria-pressed="true"] {
        background: white;
        color: rgb(16, 185, 129);
        font-weight: 600;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(16, 185, 129, 0.2);
    }
html.dark .profile-theme-option[aria-pressed="true"] {
        background: rgb(15, 23, 42);
        color: rgb(52, 211, 153);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(52, 211, 153, 0.25);
    }
.profile-theme-option svg {
        flex-shrink: 0;
        width: 14px;
        height: 14px;
    }
/* Floating Profile Card - Draft Match (Desktop only) */
.floating-profile-card {
        display: none;
    }
@media (min-width: 1024px) {
        .floating-profile-card {
            display: block;
            position: fixed;
            top: 0.75rem;
            right: 1rem;
            z-index: 60;
            width: min(23.5rem, calc(100vw - 2rem));
            transform: translateY(0);
            transition: opacity 0.25s ease;
        }

        .floating-profile-card__shell {
            border-radius: 0.95rem;
            overflow: hidden;
            border: 1px solid rgba(15, 23, 42, 0.3);
            box-shadow: 0 10px 22px -16px rgba(2, 6, 23, 0.68);
        }

        .floating-profile-card__top {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            padding: 0.42rem 0.62rem;
            border-bottom: 1px solid rgba(2, 6, 23, 0.35);
            cursor: pointer;
            transition: border-radius 0.22s ease, box-shadow 0.22s ease;
        }

        .floating-profile-card__avatar-wrap {
            text-decoration: none;
        }

        .floating-profile-card__avatar {
            width: 2.45rem;
            height: 2.45rem;
            border-radius: 0.65rem;
            border: 2px solid rgba(255, 255, 255, 0.7);
            color: #f8fafc;
            font-size: 0.86rem;
            font-weight: 800;
            text-shadow: 0 1px 2px rgba(2, 6, 23, 0.7);
            box-shadow: 0 6px 14px -11px rgba(2, 6, 23, 0.78);
        }

        .floating-profile-card__identity {
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex: 1;
        }

        .floating-profile-card__handle {
            font-size: 1.02rem;
            line-height: 1.2;
            font-weight: 700;
            color: var(--profile-preview-name-color, #0f172a);
            text-decoration: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .floating-profile-card__premium {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            position: relative;
            z-index: 10;
        }

        .floating-profile-card__premium:hover {
            z-index: 50;
        }

        .floating-profile-card__logout {
            margin: 0;
            margin-left: auto;
            flex-shrink: 0;
        }

        .floating-profile-card__logout-btn {
            height: 1.75rem;
            padding: 0 0.6rem;
            border-radius: 0.58rem;
            border: 1px solid rgba(148, 163, 184, 0.8);
            background: rgba(248, 250, 252, 0.96);
            color: #0f172a;
            font-size: 0.74rem;
            font-weight: 700;
            transition: transform 0.18s ease, box-shadow 0.18s ease;
        }

        .floating-profile-card__logout-btn:hover,
        .floating-profile-card__logout-btn:focus-visible {
            transform: translateY(-1px);
            box-shadow: 0 8px 18px -12px rgba(15, 23, 42, 0.82);
            outline: none;
        }

        .floating-profile-card__bottom {
            background: transparent;
            padding: 0 0.62rem;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            pointer-events: none;
            transform: translateY(-0.45rem);
            transition: max-height 0.28s ease, opacity 0.22s ease, padding 0.28s ease, transform 0.28s ease;
        }

        .floating-profile-card.is-open .floating-profile-card__top {
            border-bottom-left-radius: 0.8rem;
            border-bottom-right-radius: 0.8rem;
            box-shadow: inset 0 -1px 0 rgba(2, 6, 23, 0.08);
        }

        .floating-profile-card.is-open .floating-profile-card__bottom {
            max-height: 24rem;
            opacity: 1;
            padding: 0.12rem 0.62rem 0.62rem;
            pointer-events: auto;
            transform: translateY(0);
        }

        .floating-profile-card__section {
            padding: 0.56rem 0;
            border-top: 1px solid rgba(226, 232, 240, 0.4);
        }

        .floating-profile-card__section:first-child {
            border-top: none;
        }

        .floating-profile-card__section-title {
            margin: 0;
            text-align: center;
            font-size: 0.72rem;
            line-height: 1;
            font-weight: 800;
            color: var(--profile-preview-copy-color, #e2e8f0);
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .floating-profile-card__bio,
        .floating-profile-card__stats-value {
            margin: 0.32rem auto 0;
            max-width: 100%;
            text-align: center;
            font-size: 0.74rem;
            color: var(--profile-preview-copy-color, rgba(226, 232, 240, 0.95));
            white-space: normal;
            line-height: 1.45;
        }
    }
.profile-preview-name {
        color: var(--profile-preview-name-color, inherit);
    }
.profile-preview-copy {
        color: var(--profile-preview-copy-color, inherit);
    }
.profile-preview-bio-block {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.55rem;
    }
.profile-preview-bio-block.is-collapsed [data-profile-bio] {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
.profile-preview-bio-block.is-expanded.is-scrollable [data-profile-bio] {
        max-height: 14rem;
        overflow-y: auto;
        padding-right: 0.3rem;
        scrollbar-width: none;
    }
.profile-preview-bio-block.is-expanded.is-scrollable [data-profile-bio]::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
.profile-preview-bio-block--compact.is-expanded.is-scrollable [data-profile-bio] {
        max-height: 10rem;
    }
.profile-preview-bio__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(148, 163, 184, 0.28);
        background: rgba(255, 255, 255, 0.78);
        color: rgb(15 23 42);
        border-radius: 999px;
        padding: 0.35rem 0.78rem;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }
.profile-preview-bio__toggle:hover,
    .profile-preview-bio__toggle:focus-visible {
        transform: translateY(-1px);
        border-color: rgba(16, 185, 129, 0.35);
        box-shadow: 0 10px 18px -14px rgba(15, 23, 42, 0.72);
        outline: none;
    }
.profile-preview-milestone-grid {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.6rem;
        margin-top: 0.55rem;
    }
.profile-preview-milestone-grid--compact {
        gap: 0.4rem;
    }
.profile-preview-milestone {
        min-width: 8.2rem;
        max-width: 10.8rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.22rem;
        text-align: center;
        border-radius: 1rem;
        border: 1px solid rgba(148, 163, 184, 0.22);
        padding: 0.65rem 0.8rem;
        background: rgba(248, 250, 252, 0.92);
    }
.profile-preview-milestone.is-achieved {
        border-color: rgba(16, 185, 129, 0.24);
        background: linear-gradient(180deg, rgba(236, 253, 245, 0.98), rgba(255, 255, 255, 0.96));
    }
.profile-preview-milestone.is-pending {
        border-style: dashed;
        background: rgba(241, 245, 249, 0.76);
    }
.profile-preview-milestone--empty {
        min-width: min(100%, 14rem);
        max-width: 100%;
        border-style: dashed;
        background: rgba(241, 245, 249, 0.82);
    }
.profile-preview-milestone--empty .profile-preview-milestone__status {
        color: rgb(71 85 105);
    }
.profile-preview-milestone__status {
        font-size: 0.63rem;
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgb(71 85 105);
    }
.profile-preview-milestone.is-achieved .profile-preview-milestone__status {
        color: rgb(5 150 105);
    }
.profile-preview-milestone__title {
        font-size: 0.76rem;
        line-height: 1.35;
        font-weight: 700;
        color: rgb(15 23 42);
    }
.profile-sidebar-bio {
        margin: 0;
        width: 100%;
        text-align: center;
        font-size: 0.92rem;
        line-height: 1.7;
    }
.profile-sidebar-milestones-panel {
        width: 100%;
        border-radius: 1rem;
        border: 1px solid rgba(148, 163, 184, 0.2);
        background: rgba(248, 250, 252, 0.72);
        padding: 0.9rem;
    }
.profile-sidebar-milestones-title {
        margin: 0;
        text-align: center;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }
.nav-premium-badge--expired {
        background: radial-gradient(circle at 35% 30%, rgba(254, 205, 205, 0.95) 0%, rgba(239, 68, 68, 0.85) 62%, rgba(185, 28, 28, 0.9) 100%);
        border-color: rgba(239, 68, 68, 0.5);
        color: rgb(127 29 29);
    }
html.dark .floating-profile-card__handle {
        color: var(--profile-preview-name-color, #f8fafc);
        text-shadow: 0 1px 2px rgba(2, 6, 23, 0.6);
    }
html.dark .floating-profile-card__logout-btn {
        background: rgba(15, 23, 42, 0.82);
        color: #e2e8f0;
        border-color: rgba(100, 116, 139, 0.7);
    }
html.dark .profile-preview-bio__toggle {
        background: rgba(15, 23, 42, 0.82);
        color: rgb(226 232 240);
        border-color: rgba(100, 116, 139, 0.45);
    }
html.dark .profile-preview-milestone {
        background: rgba(15, 23, 42, 0.72);
        border-color: rgba(100, 116, 139, 0.4);
    }
html.dark .profile-preview-milestone.is-achieved {
        background: linear-gradient(180deg, rgba(6, 95, 70, 0.44), rgba(15, 23, 42, 0.82));
        border-color: rgba(16, 185, 129, 0.34);
    }
html.dark .profile-preview-milestone--empty {
        background: rgba(15, 23, 42, 0.68);
        border-color: rgba(100, 116, 139, 0.44);
    }
html.dark .profile-preview-milestone__status {
        color: rgb(148 163 184);
    }
html.dark .profile-preview-milestone.is-achieved .profile-preview-milestone__status {
        color: rgb(110 231 183);
    }
html.dark .profile-preview-milestone__title {
        color: rgb(241 245 249);
    }
html.dark .profile-sidebar-milestones-panel {
        border-color: rgba(100, 116, 139, 0.32);
        background: rgba(15, 23, 42, 0.48);
    }
.profile-completion-widget {
        position: relative;
        cursor: default;
    }
.profile-completion-widget__surface {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(16, 185, 129, 0.2);
        border-radius: 1rem;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(236, 253, 245, 0.92));
        padding: 0.72rem 0.8rem;
        box-shadow: 0 12px 24px -20px rgba(15, 23, 42, 0.45);
    }
html.dark .profile-completion-widget__surface {
        border-color: rgba(16, 185, 129, 0.24);
        background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(6, 78, 59, 0.28));
    }
.profile-completion-widget__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }
.profile-completion-widget__eyebrow {
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgb(15, 118, 110);
    }
.profile-completion-widget__percent {
        font-size: 0.8rem;
        font-weight: 800;
        color: rgb(15, 23, 42);
    }
html.dark .profile-completion-widget__percent {
        color: rgb(240, 253, 250);
    }
.profile-completion-widget__track {
        position: relative;
        margin-top: 0.58rem;
        height: 0.58rem;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(203, 213, 225, 0.55);
    }
html.dark .profile-completion-widget__track {
        background: rgba(51, 65, 85, 0.8);
    }
.profile-completion-widget__fill {
        position: relative;
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(90deg, rgb(16, 185, 129), rgb(14, 165, 233), rgb(59, 130, 246));
        transition: width 0.45s ease;
    }
.profile-completion-widget__fill::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
        animation: profileCompletionSweep 2.4s linear infinite;
    }
.profile-completion-widget__glow {
        position: absolute;
        top: 50%;
        left: var(--profile-completion-progress, 80%);
        width: 0.85rem;
        height: 0.85rem;
        transform: translate(-50%, -50%);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.78);
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14), 0 0 18px rgba(14, 165, 233, 0.3);
        pointer-events: none;
    }
.profile-completion-widget__complete {
        margin-top: 0.58rem;
        border-radius: 999px;
        border: 1px solid rgba(16, 185, 129, 0.35);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(14, 165, 233, 0.16));
        color: rgb(6, 95, 70);
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-align: center;
        padding: 0.4rem 0.6rem;
    }
html.dark .profile-completion-widget__complete {
        border-color: rgba(16, 185, 129, 0.4);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.24), rgba(14, 165, 233, 0.2));
        color: rgb(167, 243, 208);
    }
.profile-completion-tooltip {
        position: absolute;
        left: 0;
        top: calc(100% + 0.45rem);
        width: 100%;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-6px);
        transition: opacity 0.16s ease, transform 0.16s ease;
        z-index: 20;
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 1rem;
        background: rgba(255, 255, 255, 0.98);
        padding: 0.9rem 0.95rem;
        box-shadow: 0 18px 35px -20px rgba(15, 23, 42, 0.5);
        backdrop-filter: blur(10px);
    }
.profile-completion-tooltip.is-visible {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
html.dark .profile-completion-tooltip {
        border-color: rgba(71, 85, 105, 0.45);
        background: rgba(15, 23, 42, 0.96);
        box-shadow: 0 22px 40px -22px rgba(2, 6, 23, 0.95);
    }
.profile-completion-tooltip__eyebrow {
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgb(14, 165, 233);
    }
.profile-completion-tooltip__title {
        margin-top: 0.42rem;
        font-size: 0.98rem;
        font-weight: 800;
        color: rgb(15, 23, 42);
    }
html.dark .profile-completion-tooltip__title {
        color: rgb(248, 250, 252);
    }
.profile-completion-tooltip__message {
        margin-top: 0.42rem;
        font-size: 0.82rem;
        line-height: 1.45;
        color: rgb(71, 85, 105);
    }
html.dark .profile-completion-tooltip__message {
        color: rgb(203, 213, 225);
    }
.profile-completion-tooltip__action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-top: 0.8rem;
        border-radius: 999px;
        background: linear-gradient(135deg, rgb(16, 185, 129), rgb(14, 165, 233));
        color: white;
        font-size: 0.78rem;
        font-weight: 700;
        padding: 0.5rem 0.85rem;
        text-decoration: none;
        box-shadow: 0 12px 22px -16px rgba(14, 165, 233, 0.55);
    }
.profile-completion-tooltip__action:hover {
        filter: brightness(1.05);
    }
#profile-sidebar-milestones-list {
        justify-content: center;
    }
.profile-milestone-chip-enter {
        animation: profileMilestoneChipIn 180ms ease-out;
        transform-origin: center;
    }
@keyframes profileMilestoneChipIn {
        0% {
            opacity: 0;
            transform: scale(0.92);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }
@keyframes profileCompletionSweep {
        0% {
            transform: translateX(-100%);
        }
        100% {
            transform: translateX(100%);
        }
    }
.profile-focus-highlight {
        outline: 2px solid rgba(59, 130, 246, 0.95);
        outline-offset: 3px;
        box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.2), 0 0 20px rgba(59, 130, 246, 0.35);
        transition: box-shadow 0.25s ease, outline-color 0.25s ease;
    }
.profile-preview-lock,
    .profile-preview-lock * {
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }
.profile-preview-lock img,
    .profile-preview-lock svg,
    #profile-sidebar-avatar-image {
        -webkit-user-drag: none;
        user-drag: none;
        pointer-events: none;
    }
/* Premium customizer locked state */
.profile-customiser-locked {
        position: relative;
        border-color: rgba(251, 191, 36, 0.3);
        border-width: 1px;
        border-radius: 0.5rem;
        padding: 1rem;
        margin: -1rem;
        background: linear-gradient(135deg, rgba(251, 191, 36, 0.04), rgba(217, 119, 6, 0.02));
    }
html.dark .profile-customiser-locked {
        border-color: rgba(180, 83, 9, 0.4);
        background: linear-gradient(135deg, rgba(120, 53, 15, 0.1), rgba(78, 22, 6, 0.05));
    }
.profile-input:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        background-color: rgba(0, 0, 0, 0.05);
    }
html.dark .profile-input:disabled {
        background-color: rgba(0, 0, 0, 0.2);
    }
/* Phone country custom select */
.profile-phone-country-wrapper {
        position: relative;
        display: inline-block;
        width: 100%;
        z-index: 200;
    }
.profile-phone-country-wrapper.is-open {
        z-index: 5000;
    }
.profile-phone-country-trigger {
        width: 100%;
        padding: 0.5rem 0.75rem;
        border: 1px solid rgba(148, 163, 184, 0.3);
        border-radius: 0.375rem;
        background: white;
        color: #1e293b;
        font-size: 0.875rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        cursor: pointer;
        transition: border-color 0.2s, background-color 0.2s;
    }
.profile-phone-country-trigger:hover {
        border-color: rgba(148, 163, 184, 0.5);
        background-color: rgba(248, 250, 252, 0.5);
    }
.profile-phone-country-trigger:focus {
        outline: none;
        border-color: #10b981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
    }
html.dark .profile-phone-country-trigger {
        background: #1e293b;
        color: #e2e8f0;
        border-color: rgba(71, 85, 105, 0.3);
    }
html.dark .profile-phone-country-trigger:hover {
        background-color: rgba(30, 41, 59, 0.7);
        border-color: rgba(71, 85, 105, 0.5);
    }
.profile-phone-country-text {
        flex: 1;
        text-align: left;
        font-weight: 500;
        min-width: 2rem;
    }
.profile-phone-country-icon {
        flex-shrink: 0;
        font-size: 0.75rem;
        opacity: 0.6;
    }
.profile-phone-country-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 0.25rem;
        background: white;
        border: 1px solid rgba(148, 163, 184, 0.3);
        border-radius: 0.375rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        max-height: 12rem;
        overflow-y: auto;
        z-index: 5001;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
.profile-phone-country-dropdown::-webkit-scrollbar {
        display: none;
    }
.profile-phone-country-list {
        max-height: 12rem;
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
.profile-phone-country-list::-webkit-scrollbar {
        display: none;
    }
.profile-phone-country-dropdown.hidden {
        display: none;
    }
html.dark .profile-phone-country-dropdown {
        background: #1e293b;
        border-color: rgba(71, 85, 105, 0.3);
    }
.profile-phone-country-option {
        width: 100%;
        padding: 0.5rem 0.75rem;
        text-align: left;
        border: none;
        background: transparent;
        color: #1e293b;
        cursor: pointer;
        font-size: 0.875rem;
        transition: background-color 0.15s;
        display: block;
    }
.profile-phone-country-option:hover {
        background-color: rgba(59, 130, 246, 0.1);
    }
.profile-phone-country-option.is-selected {
        background-color: rgba(59, 130, 246, 0.2);
        color: #2563eb;
        font-weight: 600;
    }
html.dark .profile-phone-country-option {
        color: #e2e8f0;
    }
html.dark .profile-phone-country-option:hover {
        background-color: rgba(59, 130, 246, 0.15);
    }
html.dark .profile-phone-country-option.is-selected {
        background-color: rgba(59, 130, 246, 0.25);
        color: #60a5fa;
    }
#profile-phone-country.hidden {
        display: none;
    }
/* Custom DOB Awareness Modal */
.dob-awareness-modal {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
.dob-awareness-modal.is-visible {
        opacity: 1;
        pointer-events: auto;
    }
.dob-awareness-modal__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(2, 6, 23, 0.65);
        backdrop-filter: blur(4px);
        animation: fadeInBackdrop 0.3s ease forwards;
    }
.dob-awareness-modal__container {
        position: relative;
        z-index: 10;
        width: min(28rem, 95vw);
        max-height: 90vh;
        overflow-y: auto;
        border-radius: 1.25rem;
        background: white;
        box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 
                    0 10px 30px -8px rgba(15, 23, 42, 0.15);
        animation: slideUpModal 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
html.dark .dob-awareness-modal__container {
        background: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(6, 24, 50, 0.96) 100%);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5),
                    0 10px 30px -8px rgba(0, 0, 0, 0.3);
    }
.dob-awareness-modal__content {
        padding: 2.5rem 2rem;
        text-align: center;
    }
.dob-awareness-modal__icon-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.5rem;
    }
.dob-awareness-modal__icon {
        width: 3.5rem;
        height: 3.5rem;
        color: rgb(239, 68, 68);
        filter: drop-shadow(0 4px 12px rgba(239, 68, 68, 0.2));
        animation: slideDown 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
.dob-awareness-modal__title {
        font-size: 1.5rem;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 1rem 0;
        letter-spacing: -0.02em;
    }
html.dark .dob-awareness-modal__title {
        color: #f1f5f9;
    }
.dob-awareness-modal__message {
        font-size: 0.95rem;
        line-height: 1.6;
        color: #475569;
        margin: 0 0 1.5rem 0;
    }
html.dark .dob-awareness-modal__message {
        color: #cbd5e1;
    }
.dob-awareness-modal__info-box {
        background: linear-gradient(135deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.92) 100%);
        border: 1.5px solid rgba(226, 232, 240, 0.8);
        border-radius: 0.875rem;
        padding: 1.25rem;
        margin: 0 0 2rem 0;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
html.dark .dob-awareness-modal__info-box {
        background: rgba(15, 23, 42, 0.6);
        border-color: rgba(71, 85, 105, 0.3);
    }
.dob-awareness-modal__info-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.9rem;
        color: #334155;
        text-align: left;
    }
html.dark .dob-awareness-modal__info-item {
        color: #cbd5e1;
    }
.dob-awareness-modal__info-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        background: rgba(16, 185, 129, 0.15);
        color: rgb(16, 185, 129);
        font-weight: bold;
        font-size: 0.75rem;
        flex-shrink: 0;
    }
.dob-awareness-modal__actions {
        display: flex;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
.dob-awareness-modal__btn {
        flex: 1;
        padding: 0.875rem 1.5rem;
        border-radius: 0.75rem;
        font-weight: 600;
        font-size: 0.95rem;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        outline: none;
    }
.dob-awareness-modal__btn:active {
        transform: scale(0.98);
    }
.dob-awareness-modal__btn--secondary {
        background: rgba(226, 232, 240, 0.8);
        color: #0f172a;
        border: 1px solid rgba(203, 213, 225, 0.5);
    }
.dob-awareness-modal__btn--secondary:hover {
        background: rgba(203, 213, 225, 0.5);
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
    }
html.dark .dob-awareness-modal__btn--secondary {
        background: rgba(71, 85, 105, 0.3);
        color: #e2e8f0;
        border-color: rgba(100, 116, 139, 0.4);
    }
html.dark .dob-awareness-modal__btn--secondary:hover {
        background: rgba(100, 116, 139, 0.2);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
.dob-awareness-modal__btn--primary {
        background: linear-gradient(135deg, rgb(59, 130, 246) 0%, rgb(37, 99, 235) 100%);
        color: white;
        font-weight: 700;
        box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    }
.dob-awareness-modal__btn--primary:hover {
        background: linear-gradient(135deg, rgb(37, 99, 235) 0%, rgb(29, 78, 216) 100%);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
        transform: translateY(-2px);
    }
.dob-awareness-modal__footer-note {
        font-size: 0.8rem;
        color: #94a3b8;
        margin: 0;
        font-weight: 500;
    }
html.dark .dob-awareness-modal__footer-note {
        color: #64748b;
    }
.profile-image-editor-modal {
        position: fixed;
        inset: 0;
        z-index: 10000;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
.profile-image-editor-modal.is-open {
        opacity: 1;
        pointer-events: auto;
    }
.profile-image-editor-modal__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(2, 6, 23, 0.78);
        backdrop-filter: blur(5px);
    }
.profile-image-editor-modal__dialog {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        height: min(92vh, 58rem);
        width: min(94vw, 74rem);
        margin: 4vh auto;
        border-radius: 1.2rem;
        border: 1px solid rgba(148, 163, 184, 0.3);
        background: linear-gradient(150deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.97) 100%);
        box-shadow: 0 28px 80px -45px rgba(15, 23, 42, 0.8);
        overflow: hidden;
    }
html.dark .profile-image-editor-modal__dialog {
        border-color: rgba(71, 85, 105, 0.55);
        background: linear-gradient(150deg, rgba(2, 6, 23, 0.98) 0%, rgba(15, 23, 42, 0.96) 100%);
        box-shadow: 0 28px 85px -45px rgba(0, 0, 0, 0.95);
    }
.profile-image-editor-modal__header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    }
html.dark .profile-image-editor-modal__header {
        border-bottom-color: rgba(51, 65, 85, 0.85);
    }
.profile-image-editor-modal__title {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 800;
        color: rgb(15, 23, 42);
    }
html.dark .profile-image-editor-modal__title {
        color: rgb(241, 245, 249);
    }
.profile-image-editor-modal__subtitle {
        margin: 0.25rem 0 0;
        font-size: 0.78rem;
        color: rgb(100, 116, 139);
    }
html.dark .profile-image-editor-modal__subtitle {
        color: rgb(148, 163, 184);
    }
.profile-image-editor-modal__close {
        width: 2rem;
        height: 2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.65rem;
        border: 1px solid rgba(203, 213, 225, 0.8);
        color: rgb(51, 65, 85);
        background: rgba(248, 250, 252, 0.9);
        transition: all 0.18s ease;
    }
.profile-image-editor-modal__close:hover,
    .profile-image-editor-modal__close:focus-visible {
        border-color: rgba(16, 185, 129, 0.6);
        color: rgb(5, 150, 105);
        outline: none;
    }
html.dark .profile-image-editor-modal__close {
        border-color: rgba(71, 85, 105, 0.8);
        color: rgb(148, 163, 184);
        background: rgba(15, 23, 42, 0.7);
    }
.profile-image-editor-modal__stage-wrap {
        position: relative;
        flex: 1;
        min-height: 20rem;
        padding: 0.75rem;
    }
.profile-image-editor-modal__stage {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 1rem;
        background:
            linear-gradient(45deg, rgba(148, 163, 184, 0.16) 25%, transparent 25%),
            linear-gradient(-45deg, rgba(148, 163, 184, 0.16) 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, 0.16) 75%),
            linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, 0.16) 75%);
        background-size: 20px 20px;
        background-position: 0 0, 0 10px, 10px -10px, -10px 0;
        cursor: grab;
        touch-action: none;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
    }
.profile-image-editor-modal__stage.is-dragging {
        cursor: grabbing;
    }
html.dark .profile-image-editor-modal__stage {
        background-color: rgba(15, 23, 42, 0.8);
    }
.profile-image-editor-modal__image {
        position: absolute;
        left: 50%;
        top: 50%;
        transform-origin: center center;
        will-change: transform;
        pointer-events: none;
        max-width: none;
        max-height: none;
    }
.profile-image-editor-modal__crop-frame {
        position: absolute;
        left: 50%;
        top: 50%;
        width: min(70vmin, 420px);
        height: min(70vmin, 420px);
        transform: translate(-50%, -50%);
        border-radius: 1rem;
        border: 2px solid rgba(16, 185, 129, 0.95);
        box-shadow: 0 0 0 9999px rgba(2, 6, 23, 0.45);
        pointer-events: none;
    }
.profile-image-editor-modal__controls {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.95rem 1.25rem;
        border-top: 1px solid rgba(226, 232, 240, 0.8);
    }
html.dark .profile-image-editor-modal__controls {
        border-top-color: rgba(51, 65, 85, 0.85);
    }
.profile-image-editor-modal__zoom-wrap {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex: 1;
        min-width: 0;
    }
.profile-image-editor-modal__zoom-label {
        font-size: 0.74rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgb(71, 85, 105);
    }
html.dark .profile-image-editor-modal__zoom-label {
        color: rgb(148, 163, 184);
    }
.profile-image-editor-modal__zoom {
        flex: 1;
    }
.profile-image-editor-modal__actions {
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
        padding: 0 1.25rem 1.15rem;
    }
@media (max-width: 768px) {
        .profile-image-editor-modal__dialog {
            width: 100vw;
            height: 100vh;
            margin: 0;
            border-radius: 0;
            border: 0;
        }

        .profile-image-editor-modal__crop-frame {
            width: min(82vmin, 340px);
            height: min(82vmin, 340px);
            border-radius: 0.9rem;
        }

        .profile-image-editor-modal__controls,
        .profile-image-editor-modal__actions {
            padding-left: 0.9rem;
            padding-right: 0.9rem;
        }
    }
@keyframes fadeInBackdrop {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
@keyframes slideUpModal {
        from {
            opacity: 0;
            transform: translateY(2rem);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
@keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-1rem);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
.profile-identity-banner {
        position: relative;
        overflow: hidden;
        border-radius: 1rem;
        border: 1px solid rgba(148, 163, 184, 0.36);
        padding: 0.85rem;
        background: linear-gradient(135deg, #0f766e 0%, #0f766e 30%, #0284c7 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 12px 24px -18px rgba(15, 23, 42, 0.7);
        --profile-identity-name-color: #f8fafc;
        --profile-identity-handle-color: rgba(241, 245, 249, 0.88);
    }
.profile-identity-banner::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.08) 0%, rgba(15, 23, 42, 0.38) 100%);
        pointer-events: none;
    }
.profile-identity-banner__row {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        min-height: 5.5rem;
    }
.profile-identity-banner__avatar {
        height: 3.9rem;
        width: 3.9rem;
        border-radius: 1rem;
        border: 2px solid rgba(255, 255, 255, 0.72);
        background: rgba(15, 23, 42, 0.26);
        backdrop-filter: blur(2px);
        box-shadow: 0 8px 18px -14px rgba(2, 6, 23, 0.85);
        flex-shrink: 0;
    }
.profile-identity-banner__text {
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.2rem;
    }
.profile-identity-banner__name-row {
        display: inline-flex;
        align-items: center;
        gap: 0.42rem;
        min-width: 0;
    }
.profile-identity-banner__name {
        margin: 0;
        color: var(--profile-identity-name-color);
        font-size: 1.04rem;
        font-weight: 700;
        line-height: 1.25;
        text-shadow: 0 1px 2px rgba(2, 6, 23, 0.65);
    }
.profile-identity-banner__handle {
        margin: 0;
        color: var(--profile-identity-handle-color);
        font-size: 0.78rem;
        font-weight: 500;
        line-height: 1.2;
    }
.profile-identity-premium-chip__tooltip {
        position: absolute;
        left: 50%;
        bottom: calc(100% + 0.42rem);
        transform: translate(-50%, 0.18rem);
        opacity: 0;
        pointer-events: none;
        white-space: nowrap;
        border-radius: 0.62rem;
        border: 1px solid rgba(148, 163, 184, 0.45);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
        color: rgb(51, 65, 85);
        padding: 0.3rem 0.5rem;
        font-size: 0.62rem;
        font-weight: 700;
        box-shadow: 0 12px 20px -14px rgba(15, 23, 42, 0.45);
        transition: opacity 0.18s ease, transform 0.18s ease;
        z-index: 6;
    }
html.dark .profile-identity-premium-chip__tooltip {
        border-color: rgba(71, 85, 105, 0.7);
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.95));
        color: rgb(226, 232, 240);
        box-shadow: 0 16px 24px -16px rgba(2, 6, 23, 0.9);
    }
.profile-identity-premium-chip:hover .profile-identity-premium-chip__tooltip,
    .profile-identity-premium-chip:focus .profile-identity-premium-chip__tooltip,
    .profile-identity-premium-chip:focus-within .profile-identity-premium-chip__tooltip,
    .profile-identity-premium-chip:active .profile-identity-premium-chip__tooltip,
    .profile-identity-banner__name-row .nav-premium-badge:hover .profile-identity-premium-chip__tooltip,
    .profile-identity-banner__name-row .nav-premium-badge:focus .profile-identity-premium-chip__tooltip,
    .profile-identity-banner__name-row .nav-premium-badge:focus-within .profile-identity-premium-chip__tooltip,
    .profile-identity-banner__name-row .nav-premium-badge:active .profile-identity-premium-chip__tooltip {
        opacity: 1;
        transform: translate(-50%, 0);
    }
.profile-identity-banner--compact .profile-identity-banner__row,
    .profile-identity-banner--compact {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        min-height: 0;
    }
.profile-identity-banner--compact .profile-identity-banner__name {
        font-size: 0.8rem;
        font-weight: 650;
        line-height: 1.1;
    }
.profile-banner-pill--none {
        background: linear-gradient(135deg, #ffffff 0%, #f8fbff 44%, #eaf2ff 100%);
        border-color: rgba(148, 163, 184, 0.6);
    }
.profile-banner-pill--none::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(148, 163, 184, 0.1) 100%);
    }
html.dark .profile-banner-pill--none {
        background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
        border-color: rgba(100, 116, 139, 0.72);
    }
.profile-banner-pill--aurora {
        background: linear-gradient(135deg, #0f766e 0%, #4c1d95 48%, #2563eb 100%);
    }
.profile-banner-pill--sunset {
        background: linear-gradient(135deg, #bfdbfe 0%, #fde68a 36%, #fb923c 72%, #f97316 100%);
    }
.profile-banner-pill--sunset::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(251, 146, 60, 0.2) 100%);
    }
.profile-banner-pill--ocean {
        background: linear-gradient(135deg, #dbeafe 0%, #93c5fd 42%, #3b82f6 100%);
    }
.profile-banner-pill--ocean::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(30, 64, 175, 0.2) 100%);
    }
.profile-banner-pill--rose {
        background: linear-gradient(135deg, #fbcfe8 0%, #f9a8d4 45%, #f472b6 100%);
    }
.profile-banner-pill--rose::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(190, 24, 93, 0.18) 100%);
    }
.profile-banner-pill--carbon {
        background: linear-gradient(135deg, #020617 0%, #1e293b 52%, #334155 100%);
    }
.profile-banner-pill--lagoon {
        background: linear-gradient(135deg, #99f6e4 0%, #67e8f9 45%, #0ea5e9 100%);
    }
.profile-banner-pill--lagoon::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(14, 116, 144, 0.18) 100%);
    }
.profile-banner-pill--meadow {
        background: linear-gradient(135deg, #dcfce7 0%, #86efac 46%, #22c55e 100%);
    }
.profile-banner-pill--meadow::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(22, 101, 52, 0.16) 100%);
    }
.profile-banner-pill--midnight {
        background: linear-gradient(135deg, #111827 0%, #312e81 42%, #1d4ed8 100%);
    }
.profile-avatar-ring {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
        isolation: isolate;
        --ring-core: rgba(148, 163, 184, 0.68);
        --ring-glow: rgba(59, 130, 246, 0.22);
        --ring-spark-a: rgba(148, 163, 184, 0.24);
        --ring-spark-b: rgba(248, 250, 252, 0.42);
        --ring-spin-dur: 8s;
        --ring-pulse-dur: 2.8s;
        --ring-sparkle-dur: 4.6s;
        border-color: var(--ring-core);
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--ring-core) 58%, transparent),
            0 8px 18px -14px rgba(15, 23, 42, 0.72);
        transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
    }
.profile-avatar-ring > img,
    .profile-avatar-ring > span {
        position: relative;
        z-index: 1;
    }
.profile-avatar-ring::before,
    .profile-avatar-ring::after {
        content: "";
        position: absolute;
        border-radius: inherit;
        pointer-events: none;
        z-index: 2;
    }
.profile-avatar-ring::before {
        inset: -0.18rem;
        border: 2px solid transparent;
        border-top-color: color-mix(in srgb, var(--ring-core) 82%, white);
        border-right-color: color-mix(in srgb, var(--ring-core) 72%, transparent);
        border-left-color: color-mix(in srgb, var(--ring-core) 62%, transparent);
        filter: drop-shadow(0 0 0.42rem var(--ring-glow));
        animation: ring-spin var(--ring-spin-dur) linear infinite;
    }
.profile-avatar-ring::after {
        inset: -0.36rem;
        background:
            radial-gradient(circle at 12% 18%, var(--ring-spark-b) 0 2px, transparent 2.4px),
            radial-gradient(circle at 84% 26%, var(--ring-spark-a) 0 1.7px, transparent 2.1px),
            radial-gradient(circle at 76% 82%, var(--ring-spark-b) 0 1.9px, transparent 2.3px),
            radial-gradient(circle at 18% 78%, var(--ring-spark-a) 0 1.8px, transparent 2.2px);
        animation: ring-sparkle var(--ring-sparkle-dur) ease-in-out infinite;
        opacity: 0.88;
    }
@keyframes ring-spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
@keyframes ring-breathe {
        0%,
        100% {
            box-shadow:
                0 0 0 1px color-mix(in srgb, var(--ring-core) 52%, transparent),
                0 0 0.4rem color-mix(in srgb, var(--ring-glow) 72%, transparent);
        }
        50% {
            box-shadow:
                0 0 0 2px color-mix(in srgb, var(--ring-core) 62%, transparent),
                0 0 0.76rem color-mix(in srgb, var(--ring-glow) 86%, transparent);
        }
    }
@keyframes ring-sparkle {
        0%,
        100% {
            opacity: 0.46;
            transform: scale(0.98);
        }
        50% {
            opacity: 1;
            transform: scale(1.04);
        }
    }
@media (prefers-reduced-motion: reduce) {
        .profile-avatar-ring::before,
        .profile-avatar-ring::after,
        .profile-preview-ring {
            animation: none;
        }
    }
.profile-avatar-ring--none {
        --ring-core: transparent;
        --ring-glow: transparent;
        --ring-spark-a: transparent;
        --ring-spark-b: transparent;
        border-color: inherit;
        box-shadow: none;
        animation: none;
    }
.profile-avatar-ring--none::before,
    .profile-avatar-ring--none::after {
        display: none;
        animation: none;
    }
.profile-avatar-ring--neon_dual {
        --ring-core: rgba(45, 212, 191, 0.92);
        --ring-glow: rgba(59, 130, 246, 0.42);
        --ring-spark-a: rgba(45, 212, 191, 0.62);
        --ring-spark-b: rgba(34, 211, 238, 0.74);
        --ring-spin-dur: 5.8s;
        --ring-pulse-dur: 2.2s;
        --ring-sparkle-dur: 3.4s;
    }
.profile-avatar-ring--solar_flare {
        --ring-core: rgba(251, 191, 36, 0.95);
        --ring-glow: rgba(249, 115, 22, 0.45);
        --ring-spark-a: rgba(254, 215, 170, 0.72);
        --ring-spark-b: rgba(251, 191, 36, 0.84);
        --ring-spin-dur: 6.6s;
        --ring-pulse-dur: 2.1s;
        --ring-sparkle-dur: 3.2s;
    }
.profile-avatar-ring--crystal {
        --ring-core: rgba(186, 230, 253, 0.98);
        --ring-glow: rgba(125, 211, 252, 0.42);
        --ring-spark-a: rgba(224, 242, 254, 0.82);
        --ring-spark-b: rgba(191, 219, 254, 0.72);
        --ring-spin-dur: 9.4s;
        --ring-pulse-dur: 2.9s;
        --ring-sparkle-dur: 3.9s;
    }
.profile-avatar-ring--starry_spark {
        --ring-core: rgba(167, 139, 250, 0.9);
        --ring-glow: rgba(96, 165, 250, 0.42);
        --ring-spark-a: rgba(255, 255, 255, 0.94);
        --ring-spark-b: rgba(196, 181, 253, 0.82);
        --ring-spin-dur: 10.8s;
        --ring-pulse-dur: 2.5s;
        --ring-sparkle-dur: 1.65s;
    }
.profile-avatar-ring--starry_spark::after {
        inset: -0.46rem;
        background:
            radial-gradient(circle at 9% 20%, rgba(255, 255, 255, 0.95) 0 1.9px, transparent 2.2px),
            radial-gradient(circle at 24% 82%, rgba(224, 231, 255, 0.9) 0 1.6px, transparent 2px),
            radial-gradient(circle at 72% 16%, rgba(255, 255, 255, 0.92) 0 2px, transparent 2.5px),
            radial-gradient(circle at 90% 52%, rgba(196, 181, 253, 0.95) 0 1.8px, transparent 2.2px),
            radial-gradient(circle at 63% 88%, rgba(255, 255, 255, 0.88) 0 1.7px, transparent 2.1px);
        animation: ring-sparkle 1.2s steps(2, end) infinite;
    }
.profile-avatar-ring--aurora_pulse {
        --ring-core: rgba(52, 211, 153, 0.92);
        --ring-glow: rgba(34, 197, 94, 0.36);
        --ring-spark-a: rgba(16, 185, 129, 0.68);
        --ring-spark-b: rgba(110, 231, 183, 0.82);
        --ring-spin-dur: 7.8s;
        --ring-pulse-dur: 1.85s;
        --ring-sparkle-dur: 3.1s;
    }
.profile-avatar-ring--aurora_pulse::before {
        border-top-color: rgba(167, 243, 208, 0.92);
        border-right-color: rgba(52, 211, 153, 0.72);
        border-left-color: rgba(20, 184, 166, 0.62);
    }
.profile-avatar-ring--aurora_pulse::after {
        inset: -0.52rem;
        background:
            radial-gradient(ellipse at 22% 24%, rgba(167, 243, 208, 0.74) 0 16%, transparent 34%),
            radial-gradient(ellipse at 78% 72%, rgba(94, 234, 212, 0.7) 0 14%, transparent 32%);
        animation: ring-sparkle 2.6s ease-in-out infinite;
    }
.profile-avatar-ring--comet_trail {
        --ring-core: rgba(56, 189, 248, 0.94);
        --ring-glow: rgba(14, 165, 233, 0.5);
        --ring-spark-a: rgba(224, 242, 254, 0.88);
        --ring-spark-b: rgba(125, 211, 252, 0.78);
        --ring-spin-dur: 3.6s;
        --ring-pulse-dur: 2.4s;
        --ring-sparkle-dur: 2.2s;
    }
.profile-avatar-ring--comet_trail::before {
        border-width: 2px;
        border-right-color: transparent;
        border-bottom-color: transparent;
        filter: drop-shadow(0 0 0.7rem rgba(56, 189, 248, 0.58));
    }
.profile-avatar-ring--comet_trail::after {
        inset: -0.56rem;
        background:
            radial-gradient(ellipse at 86% 30%, rgba(224, 242, 254, 0.86) 0 10%, rgba(125, 211, 252, 0.45) 18%, transparent 30%),
            radial-gradient(circle at 24% 78%, rgba(224, 242, 254, 0.74) 0 1.6px, transparent 2px);
        animation: ring-sparkle 1.9s ease-in-out infinite;
    }
.profile-avatar-ring--ember_crown {
        --ring-core: rgba(251, 146, 60, 0.95);
        --ring-glow: rgba(239, 68, 68, 0.48);
        --ring-spark-a: rgba(254, 215, 170, 0.72);
        --ring-spark-b: rgba(253, 186, 116, 0.84);
        --ring-spin-dur: 5.2s;
        --ring-pulse-dur: 1.9s;
        --ring-sparkle-dur: 2.5s;
    }
.profile-avatar-ring--ember_crown::before {
        border-top-color: rgba(254, 215, 170, 0.95);
        border-right-color: rgba(251, 146, 60, 0.72);
        border-left-color: rgba(239, 68, 68, 0.62);
    }
.profile-avatar-ring--ember_crown::after {
        inset: -0.48rem;
        background:
            radial-gradient(circle at 50% -6%, rgba(254, 215, 170, 0.9) 0 13%, transparent 25%),
            radial-gradient(circle at 22% 14%, rgba(251, 146, 60, 0.72) 0 8%, transparent 18%),
            radial-gradient(circle at 78% 18%, rgba(251, 113, 133, 0.66) 0 8%, transparent 18%);
    }
.profile-card-back-theme--none,
    .profile-preview-card-back--none {
        background: rgba(248, 250, 252, 0.78);
        border-color: rgba(148, 163, 184, 0.42);
        box-shadow: none;
        color: inherit;
    }
html.dark .profile-card-back-theme--none,
    html.dark .profile-preview-card-back--none {
        background: rgba(15, 23, 42, 0.56);
        border-color: rgba(100, 116, 139, 0.46);
        color: #e2e8f0;
    }
.profile-card-back-theme--glass,
    .profile-preview-card-back--glass {
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(226, 232, 240, 0.72) 100%);
        border-color: rgba(148, 163, 184, 0.38);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
html.dark .profile-preview-card-back--glass {
        background: linear-gradient(145deg, rgba(30, 41, 59, 0.86) 0%, rgba(51, 65, 85, 0.62) 100%);
        border-color: rgba(100, 116, 139, 0.52);
        color: #e2e8f0;
    }
.profile-card-back-theme--topo,
    .profile-preview-card-back--topo {
        background:
            radial-gradient(circle at 18% 24%, rgba(16, 185, 129, 0.25) 0%, transparent 38%),
            radial-gradient(circle at 82% 82%, rgba(14, 165, 233, 0.22) 0%, transparent 42%),
            linear-gradient(145deg, rgba(240, 253, 250, 0.96) 0%, rgba(236, 252, 203, 0.72) 100%);
        border-color: rgba(52, 211, 153, 0.4);
    }
html.dark .profile-preview-card-back--topo {
        background:
            radial-gradient(circle at 20% 24%, rgba(45, 212, 191, 0.26) 0%, transparent 42%),
            radial-gradient(circle at 82% 84%, rgba(56, 189, 248, 0.22) 0%, transparent 44%),
            linear-gradient(145deg, rgba(15, 23, 42, 0.95) 0%, rgba(22, 78, 99, 0.74) 100%);
        border-color: rgba(45, 212, 191, 0.45);
        color: #e2e8f0;
    }
.profile-card-back-theme--carbon,
    .profile-preview-card-back--carbon {
        background: linear-gradient(135deg, rgba(2, 6, 23, 0.9) 0%, rgba(15, 23, 42, 0.88) 46%, rgba(30, 41, 59, 0.92) 100%);
        border-color: rgba(71, 85, 105, 0.62);
    }
.profile-card-back-theme--carbon .profile-identity-banner__name,
    .profile-card-back-theme--carbon .profile-identity-banner__handle,
    .profile-card-back-theme--carbon .profile-identity-banner__theme,
    .profile-preview-card-back--carbon {
        color: #e2e8f0;
    }
.profile-card-back-theme--matrix,
    .profile-preview-card-back--matrix {
        background:
            linear-gradient(180deg, rgba(20, 83, 45, 0.18) 0%, rgba(20, 83, 45, 0.08) 100%),
            repeating-linear-gradient(90deg, rgba(16, 185, 129, 0.08) 0 1px, transparent 1px 8px),
            linear-gradient(145deg, rgba(6, 78, 59, 0.95) 0%, rgba(17, 94, 89, 0.9) 100%);
        border-color: rgba(16, 185, 129, 0.5);
    }
.profile-card-back-theme--matrix .profile-identity-banner__name,
    .profile-card-back-theme--matrix .profile-identity-banner__handle,
    .profile-card-back-theme--matrix .profile-identity-banner__theme,
    .profile-preview-card-back--matrix {
        color: #d1fae5;
    }
/* About Page Container */
.about-page {
    width: 100%;
}
.about-container {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 80rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 640px) {
    .about-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .about-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
/* Hero Section */
.about-hero {
    position: relative;
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --tw-gradient-from: #ecfdf5 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(236 253 245 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #fff var(--tw-gradient-to-position);
    padding-top: 5rem;
    padding-bottom: 5rem;
}
@media (min-width: 640px) {
    .about-hero {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
}
.about-hero {
        overflow: hidden;
    }
html.dark .about-hero {
    --tw-gradient-from: #0f172a var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #1e293b var(--tw-gradient-to-position);
}
.about-hero::before {
        content: '';
        position: absolute;
        inset: 0px;
        opacity: 0.05;
        background-image: radial-gradient(circle at 2px 2px, rgb(16, 185, 129) 1px, transparent 0);
        background-size: 40px 40px;
    }
.hero-content {
    position: relative;
    z-index: 10;
    margin-left: auto;
    margin-right: auto;
    max-width: 56rem;
    text-align: center;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.week-day-card:has(html.dark .hero-badge) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(html.dark .hero-badge) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
html.dark .hero-badge {
    border-color: rgb(4 120 87 / 0.5);
    background-color: rgb(6 78 59 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.hero-title {
    margin-top: 1.5rem;
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 700;
}
@media (min-width: 640px) {
    .hero-title {
        font-size: 3rem;
        line-height: 1;
    }
}
@media (min-width: 1024px) {
    .hero-title {
        font-size: 3.75rem;
        line-height: 1;
    }
}
.hero-title {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: #0f172a var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(6 95 70 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #065f46 var(--tw-gradient-via-position), var(--tw-gradient-to);
    --tw-gradient-to: #0f172a var(--tw-gradient-to-position);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
        line-height: 1.2;
}
html.dark .hero-title {
    --tw-gradient-from: #fff var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(52 211 153 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #34d399 var(--tw-gradient-via-position), var(--tw-gradient-to);
    --tw-gradient-to: #fff var(--tw-gradient-to-position);
}
.hero-subtitle {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5rem;
    max-width: 48rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px) {
    .hero-subtitle {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
}
html.dark .hero-subtitle {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
/* Section Styling */
.feature-section {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-top: 5rem;
    padding-bottom: 5rem;
}
@media (min-width: 640px) {
    .feature-section {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}
html.dark .feature-section {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.trainer-section {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
html.dark .trainer-section {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
/* Section Header */
.section-header {
    margin-bottom: 4rem;
    text-align: center;
}
.header-icon {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;
    display: flex;
    height: 4rem;
    width: 4rem;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
}
#workout-popup .header-icon {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.header-icon {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --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);
}
.member-icon {
    --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);
    --tw-gradient-to: #059669 var(--tw-gradient-to-position);
        box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
}
html.dark .member-icon {
        box-shadow: 0 10px 30px rgba(16, 185, 129, 0.2);
    }
.trainer-icon {
    --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
        box-shadow: 0 10px 30px rgba(147, 51, 234, 0.3);
}
html.dark .trainer-icon {
        box-shadow: 0 10px 30px rgba(147, 51, 234, 0.2);
    }
.icon-svg {
    height: 2rem;
    width: 2rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.section-title {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px) {
    .section-title {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
}
html.dark .section-title {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.section-subtitle {
    margin-top: 1rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
html.dark .section-subtitle {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
/* Features Grid */
.features-grid {
    display: grid;
    gap: 2rem;
}
@media (min-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.feature-card {
    position: relative;
    border-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 2rem;
    --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);
}
#workout-popup .feature-card {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.feature-card {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.feature-card:hover {
    --tw-translate-y: -0.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --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);
}
html.dark .feature-card {
    border-color: rgb(51 65 85 / 0.5);
    background-color: rgb(30 41 59 / 0.5);
        backdrop-filter: blur(8px);
}
.feature-card::before {
        content: '';
        position: absolute;
        inset: 0px;
        border-radius: 1rem;
        opacity: 0;
        transition-property: opacity;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 300ms;
    }
#workout-popup .feature-card::before {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.feature-card::before {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0.02) 100%);
    }
.feature-card:hover::before {
    opacity: 1;
}
.feature-icon {
    margin-bottom: 1.25rem;
    display: flex;
    height: 3rem;
    width: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.feature-card:hover .feature-icon {
    --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));
}
.feature-icon.emerald {
    --tw-bg-opacity: 1;
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .feature-icon.emerald {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.week-day-card:has(html.dark .feature-icon.emerald) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(html.dark .feature-icon.emerald) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
html.dark .feature-icon.emerald {
    background-color: rgb(6 78 59 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.feature-icon.purple {
    --tw-bg-opacity: 1;
    background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}
html.dark .feature-icon.purple {
    background-color: rgb(88 28 135 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.feature-icon svg {
    height: 1.5rem;
    width: 1.5rem;
}
.feature-title {
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
html.dark .feature-title {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.feature-description {
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
html.dark .feature-description {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
/* How It Works Section */
.how-it-works-section {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --tw-gradient-from: #ecfdf5 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(236 253 245 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #fff var(--tw-gradient-to-position);
    padding-top: 5rem;
    padding-bottom: 5rem;
}
@media (min-width: 640px) {
    .how-it-works-section {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}
html.dark .how-it-works-section {
    --tw-gradient-from: #0f172a var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #1e293b var(--tw-gradient-to-position);
}
.steps-grid {
    display: grid;
    gap: 2rem;
}
@media (min-width: 768px) {
    .steps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .steps-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.step-card {
    position: relative;
    text-align: center;
}
.step-number {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;
    display: flex;
    height: 4rem;
    width: 4rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --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);
    --tw-gradient-to: #059669 var(--tw-gradient-to-position);
    --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);
        box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3);
}
html.dark .step-number {
        box-shadow: 0 10px 25px rgba(16, 185, 129, 0.2);
    }
.step-title {
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
html.dark .step-title {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.step-description {
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
html.dark .step-description {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
/* Platform Features Section */
.platform-features-section {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-top: 5rem;
    padding-bottom: 5rem;
}
@media (min-width: 640px) {
    .platform-features-section {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}
html.dark .platform-features-section {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.platform-grid {
    display: grid;
    gap: 2rem;
}
@media (min-width: 768px) {
    .platform-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .platform-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.platform-feature {
    text-align: center;
}
.platform-icon {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.25rem;
    display: flex;
    height: 3.5rem;
    width: 3.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .platform-icon {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.platform-icon {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.platform-icon:hover {
    --tw-rotate: 6deg;
    --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));
}
.week-day-card:has(html.dark .platform-icon) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(html.dark .platform-icon) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
html.dark .platform-icon {
    background-color: rgb(6 78 59 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.platform-icon svg {
    height: 1.75rem;
    width: 1.75rem;
}
.platform-feature h4 {
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
html.dark .platform-feature h4 {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.platform-feature p {
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
html.dark .platform-feature p {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
/* CTA Section */
.cta-section {
    position: relative;
    overflow: hidden;
    padding-top: 5rem;
    padding-bottom: 5rem;
}
@media (min-width: 640px) {
    .cta-section {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
}
.cta-section {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --tw-gradient-from: #059669 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(5 150 105 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #047857 var(--tw-gradient-to-position);
}
html.dark .cta-section {
    --tw-gradient-from: #064e3b var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(6 78 59 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #065f46 var(--tw-gradient-to-position);
}
.cta-section::before {
        content: '';
        position: absolute;
        inset: 0px;
        opacity: 0.1;
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }
.cta-content {
    position: relative;
    z-index: 10;
    margin-left: auto;
    margin-right: auto;
    max-width: 56rem;
    text-align: center;
}
.cta-title {
    margin-bottom: 1.5rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px) {
    .cta-title {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
}
@media (min-width: 1024px) {
    .cta-title {
        font-size: 3rem;
        line-height: 1;
    }
}
.cta-subtitle {
    margin-bottom: 2.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    --tw-text-opacity: 1;
    color: rgb(209 250 229 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px) {
    .cta-subtitle {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
}
.cta-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
body[data-easy-mode="on"] .cta-buttons {
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .cta-buttons {
        flex-direction: row;
    }
}
/* Button Styles for About Page */
.btn--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.75rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
body[data-easy-mode="on"] .btn--primary {
    gap: 0.75rem;
}
.btn--primary {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
    --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);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.btn--primary: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));
    --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);
}
html.dark .btn--primary {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.color-blind html.dark .btn--primary {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
.btn--secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.75rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
body[data-easy-mode="on"] .btn--secondary {
    gap: 0.75rem;
}
.btn--secondary {
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
    background-color: transparent;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.btn--secondary: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));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
html.dark .btn--secondary {
    --tw-border-opacity: 1;
    border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}
html.dark .btn--secondary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(110 231 183 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}
.btn--xl {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.btn-icon {
    height: 1.5rem;
    width: 1.5rem;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
        .hero-title {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }

        .section-title {
        font-size: 1.5rem;
        line-height: 2rem;
    }

        .features-grid {
        gap: 1.5rem;
    }

        .feature-card {
        padding: 1.5rem;
    }

        .steps-grid {
        gap: 2.5rem;
    }

        .cta-title {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    }
/* Client Dashboard - Performance Command Centre */
/* Main container with increased spacing */
.dashboard-container {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 80rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 640px) {
    .dashboard-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .dashboard-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
.dashboard-container {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
/* Header Section - Emotional Anchor */
.dashboard-header {
    margin-bottom: 2.5rem;
    border-radius: 1rem;
    padding: 2rem;
}
#workout-popup .dashboard-header {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@media (min-width: 640px) {
    .dashboard-header {
        padding: 2.5rem;
    }
}
.dashboard-header {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
.dashboard-header__greeting {
    margin-bottom: 0.75rem;
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 700;
}
@media (min-width: 640px) {
    .dashboard-header__greeting {
        font-size: 3rem;
        line-height: 1;
    }
}
.dashboard-header__greeting {
        color: #1a1a1a;
        line-height: 1.2;
    }
.dashboard-header__subtitle {
    font-size: 1.125rem;
    line-height: 1.75rem;
        color: rgba(0, 0, 0, 0.6);
        margin-bottom: 1.5rem;
}
.dashboard-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
        background: linear-gradient(135deg, rgb(16, 185, 129) 0%, rgb(5, 150, 105) 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.dashboard-header__cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
    }
/* Grid Layout with better spacing */
.dashboard-grid {
    display: grid;
    gap: 2rem;
        grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
        .dashboard-grid {
            grid-template-columns: 2fr 1fr 1fr;
            gap: 2rem;
        }
    }
/* Zone Cards - Clean and Deliberate */
.dashboard-zone {
    border-radius: 1rem;
    padding: 2rem;
}
#workout-popup .dashboard-zone {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.dashboard-zone {
        background: white;
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }
.dashboard-zone:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
    }
.dashboard-zone__header {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .dashboard-zone__header {
    gap: 1rem;
}
.dashboard-zone__icon {
    border-radius: 0.75rem;
    padding: 0.75rem;
        background: rgba(16, 185, 129, 0.1);
}
.dashboard-zone__icon svg {
    height: 1.5rem;
    width: 1.5rem;
        color: rgb(16, 185, 129);
}
.dashboard-zone__title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
        color: #1a1a1a;
}
/* Today Focus Section - Most Important */
.focus-card {
    margin-bottom: 1rem;
    border-radius: 0.75rem;
    padding: 1.5rem;
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0.02) 100%);
        border: 1.5px solid rgba(16, 185, 129, 0.2);
        transition: all 0.3s ease;
}
.focus-card:hover {
        border-color: rgba(16, 185, 129, 0.4);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        transform: translateY(-1px);
    }
.focus-card__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
        width: 2rem;
        height: 2rem;
        background: rgba(16, 185, 129, 0.15);
        color: rgb(5, 150, 105);
}
.focus-card__content {
    font-size: 1rem;
    line-height: 1.5rem;
        color: rgba(0, 0, 0, 0.8);
        line-height: 1.6;
}
.focus-card__time {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
        color: rgb(59, 130, 246);
}
.focus-card--empty {
    padding-top: 3rem;
    padding-bottom: 3rem;
    text-align: center;
        background: rgba(0, 0, 0, 0.02);
        border: 1px dashed rgba(0, 0, 0, 0.15);
}
.focus-card--empty__message {
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
        color: rgba(0, 0, 0, 0.6);
}
.focus-card--empty__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .focus-card--empty__actions {
    gap: 1rem;
}
.focus-card--empty__link {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
        color: rgb(16, 185, 129);
}
.focus-card--empty__link:hover {
        text-decoration: underline;
    }
.focus-card--empty__separator {
    font-size: 0.875rem;
    line-height: 1.25rem;
        color: rgba(0, 0, 0, 0.3);
}
html.dark .focus-card--empty__separator {
        color: rgba(255, 255, 255, 0.3);
    }
/* Performance Snapshot - Analytics Feel */
.stat-card {
    border-radius: 0.75rem;
    padding: 1.5rem;
        background: white;
        border: 1px solid rgba(0, 0, 0, 0.08);
        margin-bottom: 1rem;
        transition: all 0.3s ease;
}
.stat-card:hover {
        border-color: rgba(16, 185, 129, 0.3);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }
.stat-card__label {
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
        color: rgba(0, 0, 0, 0.5);
}
.stat-card__value {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
        color: #1a1a1a;
}
.stat-card__value--accent {
        color: rgb(16, 185, 129);
    }
.stat-card__value--warning {
        color: rgb(234, 88, 12);
    }
.stat-card__time {
    margin-top: 0.5rem;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
        color: rgb(59, 130, 246);
}
/* Quick Actions - Modular and Tappable */
.action-tile {
    display: flex;
    flex-direction: column;
    border-radius: 0.75rem;
    padding: 1.25rem;
        background: white;
        border: 1px solid rgba(0, 0, 0, 0.08);
        margin-bottom: 1rem;
        transition: all 0.3s ease;
        cursor: pointer;
}
.action-tile:hover {
        border-color: rgba(16, 185, 129, 0.3);
        background: rgba(16, 185, 129, 0.03);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
.action-tile__icon {
    margin-bottom: 0.75rem;
}
.action-tile__icon svg {
    height: 1.75rem;
    width: 1.75rem;
        color: rgb(16, 185, 129);
}
.action-tile__title {
    margin-bottom: 0.25rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
        color: #1a1a1a;
}
.action-tile__subtitle {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
        color: rgba(0, 0, 0, 0.4);
}
/* Responsive Mobile Stacking */
@media (max-width: 1023px) {
        .dashboard-grid {
            gap: 2rem;
        }
        
        .dashboard-header {
            padding: 2rem 1.5rem;
        }
        
        .dashboard-header__greeting {
            font-size: 2rem;
        }
        
        .dashboard-zone {
            padding: 1.5rem;
        }
    }
/* Dark mode support */
html.dark .dashboard-header {
        background: linear-gradient(135deg, rgba(26, 26, 46, 0.8) 0%, rgba(26, 26, 46, 0.9) 100%);
        border-color: rgba(255, 255, 255, 0.1);
    }
html.dark .dashboard-header__greeting {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: #7dd3fc var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(125 211 252 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(139 92 246 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #8b5cf6 var(--tw-gradient-via-position), var(--tw-gradient-to);
    --tw-gradient-to: #ec4899 var(--tw-gradient-to-position);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
[data-dashboard-role="CLIENT"] html.dark .dashboard-header__greeting {
    background: none;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: #0f172a;
}
html.dark .dashboard-header__subtitle {
        color: rgba(255, 255, 255, 0.6);
    }
html.dark .dashboard-zone {
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
html:not(.dark) body html.dark .dashboard-zone {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
html.dark .dashboard-zone {
        border-color: rgba(255, 255, 255, 0.1);
    }
html.dark .dashboard-zone__title {
        color: #ffffff;
    }
html.dark .focus-card {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
html.dark .focus-card__content {
        color: rgba(255, 255, 255, 0.9);
    }
html.dark .stat-card {
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
html:not(.dark) body html.dark .stat-card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
html.dark .stat-card {
        border-color: rgba(255, 255, 255, 0.1);
    }
html.dark .stat-card__label {
        color: rgba(255, 255, 255, 0.5);
    }
html.dark .stat-card__value {
        color: #ffffff;
    }
html.dark .action-tile {
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
html:not(.dark) body html.dark .action-tile {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
html.dark .action-tile {
        border-color: rgba(255, 255, 255, 0.1);
    }
html.dark .action-tile:hover {
        border-color: rgba(16, 185, 129, 0.4);
        background: rgba(16, 185, 129, 0.1);
    }
html.dark .action-tile__title {
        color: #ffffff;
    }
/* Weekly progress and streak milestone animations */
.animate-fade-in {
        animation: animate-fade-in 0.6s ease-out;
    }
.streak-milestone-glow {
        animation: milestone-glow 2s ease-out;
    }
.streak-confetti-host {
        position: relative;
        overflow: hidden;
    }
.confetti-particle {
        position: absolute;
        width: 6px;
        height: 6px;
        background: var(--confetti-color, #00f5ff);
        top: 50%;
        left: 50%;
        opacity: 0;
        border-radius: 50%;
        animation: confetti-burst 1.5s ease-out forwards;
        animation-delay: var(--confetti-delay, 0s);
        transform: translate(-50%, -50%) rotate(var(--confetti-rot, 0deg));
    }
@keyframes milestone-glow {
        0%, 100% { box-shadow: none; }
        50% { box-shadow: 0 0 30px rgba(0, 245, 255, 0.4), 0 0 60px rgba(0, 245, 255, 0.2); }
    }
@keyframes confetti-burst {
        0% {
            opacity: 1;
            transform: translate(-50%, -50%) translateY(0) translateX(0) scale(0) rotate(var(--confetti-rot, 0deg));
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            transform: translate(-50%, -50%) translateY(var(--confetti-y, -100px)) translateX(var(--confetti-x, 0px)) scale(1) rotate(var(--confetti-rot, 0deg));
        }
    }
@keyframes animate-fade-in {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
@keyframes progress-grow {
        from { width: 0; }
    }
@keyframes subtle-pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }
/* Enhanced Dashboard Styles - Clean, Personal, and Engaging */
.dashboard-enhanced {
        animation: fadeIn 0.6s ease-out;
    }
@keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
/* Stat Cards with Subtle Animation */
.stat-pulse-card {
    border-radius: 0.75rem;
    padding: 1.5rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
        background: rgba(26, 26, 46, 0.6);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
}
.stat-pulse-card:hover {
        transform: translateY(-2px);
        border-color: rgba(16, 185, 129, 0.3);
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
    }
/* Week Day Cards - Clean and Engaging */
.week-day-card {
    cursor: pointer;
    border-radius: 0.75rem;
    padding: 1rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
        background: rgba(26, 26, 46, 0.6);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        min-height: 140px;
        display: flex;
        flex-direction: column;
}
.week-day-card:hover {
        transform: translateY(-4px) scale(1.02);
        border-color: rgba(16, 185, 129, 0.5);
        box-shadow: 0 8px 24px rgba(16, 185, 129, 0.2);
        background: rgba(26, 26, 46, 0.8);
    }
/* Active day (today) styling - emerald accent */
.week-day-card:has(.text-emerald-400) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
/* Quick Action Cards - Emerald Theme */
.quick-action-card {
    cursor: pointer;
    border-radius: 0.75rem;
    padding: 1.25rem;
    text-align: center;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
        background: rgba(26, 26, 46, 0.6);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
}
.quick-action-card:hover {
        transform: translateY(-4px);
        border-color: rgba(16, 185, 129, 0.4);
        box-shadow: 0 8px 24px rgba(16, 185, 129, 0.15);
    }
/* Card Variants - Simplified to 3 Color Theme */
.card--emerald {
        border-color: rgba(16, 185, 129, 0.3);
    }
.card--emerald:hover {
        border-color: rgba(16, 185, 129, 0.6);
        box-shadow: 0 0 30px rgba(16, 185, 129, 0.3);
    }
/* Pulse Glow Animation - Emerald Theme */
@keyframes pulse-glow {
        0%, 100% {
            box-shadow: 0 0 5px rgba(16, 185, 129, 0.4);
        }
        50% {
            box-shadow: 0 0 20px rgba(16, 185, 129, 0.8), 0 0 30px rgba(16, 185, 129, 0.4);
        }
    }
/* Stagger Animation for Cards */
.week-day-card:nth-child(1) { animation-delay: 0s; }
.week-day-card:nth-child(2) { animation-delay: 0.05s; }
.week-day-card:nth-child(3) { animation-delay: 0.1s; }
.week-day-card:nth-child(4) { animation-delay: 0.15s; }
.week-day-card:nth-child(5) { animation-delay: 0.2s; }
.week-day-card:nth-child(6) { animation-delay: 0.25s; }
.week-day-card:nth-child(7) { animation-delay: 0.3s; }
.quick-action-card:nth-child(1) { animation-delay: 0s; }
.quick-action-card:nth-child(2) { animation-delay: 0.05s; }
.quick-action-card:nth-child(3) { animation-delay: 0.1s; }
.quick-action-card:nth-child(4) { animation-delay: 0.15s; }
.quick-action-card:nth-child(5) { animation-delay: 0.2s; }
.week-day-card,
    .quick-action-card {
        animation: slideUp 0.5s ease-out backwards;
    }
@keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
/* Responsive Adjustments */
@media (max-width: 640px) {
        .week-day-card {
            min-height: 120px;
            padding: 0.75rem;
        }
        
        .quick-action-card {
            padding: 1rem;
        }
    }
/* Light Mode Support */
html:not(.dark) .stat-pulse-card,
    html:not(.dark) .week-day-card,
    html:not(.dark) .quick-action-card {
        background: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.1);
    }
html:not(.dark) .stat-pulse-card:hover,
    html:not(.dark) .week-day-card:hover,
    html:not(.dark) .quick-action-card:hover {
        background: rgba(255, 255, 255, 0.95);
        border-color: rgba(16, 185, 129, 0.3);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }
html:not(.dark) .week-day-card:has(.text-emerald-400) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
/* ===== CLIENT DASHBOARD REDESIGN (cd-*) ===== */
/* Section titles and links */
/* Header */
/* Stat cards */
/* Weekly Timeline */
.cd-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 0.75rem;
    padding: 0.5rem;
    text-decoration-line: none;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
@media (min-width: 640px) {
    .cd-day {
        padding: 0.75rem;
    }
}
.cd-day {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.06);
        min-height: 7rem;
        position: relative;
    }
.cd-day:hover {
        background: rgba(52, 211, 153, 0.07);
        border-color: rgba(52, 211, 153, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(52, 211, 153, 0.1);
    }
.cd-day__bar {
    height: 100%;
    border-radius: 9999px;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 700ms;
        background: linear-gradient(to right, #34d399, #059669);
        width: 0;
}
.cd-day--today .cd-day__bar {
        background: linear-gradient(to right, #34d399, #00f3ff);
    }
/* Quick Action Cards */
/* Stagger entrance animations for timeline days */
.cd-day:nth-child(1) { animation-delay: 0s; }
.cd-day:nth-child(2) { animation-delay: 0.04s; }
.cd-day:nth-child(3) { animation-delay: 0.08s; }
.cd-day:nth-child(4) { animation-delay: 0.12s; }
.cd-day:nth-child(5) { animation-delay: 0.16s; }
.cd-day:nth-child(6) { animation-delay: 0.2s; }
.cd-day:nth-child(7) { animation-delay: 0.24s; }
.cd-day,
    .cd-action,
    .cd-stat {
        animation: slideUp 0.4s ease-out backwards;
    }
/* ===== LIGHT MODE OVERRIDES for cd-* ===== */
html:not(.dark) .cd-day {
        background: #f8fafc;
        border-color: rgba(0, 0, 0, 0.07);
    }
html:not(.dark) .cd-day:hover {
        background: #f0fdf4;
        border-color: rgba(5, 150, 105, 0.35);
        box-shadow: 0 4px 12px rgba(5, 150, 105, 0.08);
    }
html:not(.dark) .cd-day__bar {
        background: linear-gradient(to right, #059669, #10b981);
    }
html:not(.dark) .cd-day--today .cd-day__bar {
        background: linear-gradient(to right, #059669, #0d9488);
    }
/* Responsive tweaks for small screens */
@media (max-width: 480px) {
        .cd-day {
            padding: 0.5rem 0.25rem;
            min-height: 6rem;
        }

        .cd-day__number {
            font-size: 1rem;
        }

        .cd-day__label {
            font-size: 0.6rem;
        }

        .cd-day__badge {
            font-size: 0.6rem;
            padding: 0.1rem 0.25rem;
        }
    }
/* ===== WEEKLY PROGRESS PANEL (cd-progress-*) ===== */
.cd-progress-stars {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .cd-progress-stars {
    gap: 0.75rem;
}
.cd-progress-stars {
        min-height: 2rem;
    }
.cd-progress-star {
        font-size: 1.6rem;
        line-height: 1;
        transition: transform 0.3s ease, opacity 0.3s ease;
        opacity: 0.25;
        filter: grayscale(1);
    }
.cd-progress-star--filled {
        opacity: 1;
        filter: grayscale(0);
        animation: starPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    }
@keyframes starPop {
        0% { transform: scale(0.5); opacity: 0; }
        100% { transform: scale(1); opacity: 1; }
    }
.cd-progress-star--done {
        filter: grayscale(0);
        opacity: 1;
        animation: starPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    }
.cd-target-editor {
    margin-top: 1rem;
    padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
}
/* ===== PREMIUM PANEL (cd-premium-*) ===== */
/* Light mode overrides for new panels */
html:not(.dark) .cd-target-editor {
        border-top-color: rgba(0, 0, 0, 0.07);
    }
@media (prefers-reduced-motion: reduce) {
        .cd-progress-star--filled,
        .cd-progress-star--done {
            animation: none;
        }
    }
.cd-panel,
    .cd-rail-card {
    border-radius: 28px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --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);
        box-shadow: 0 18px 38px rgba(15, 23, 42, 0.06);
}
.cd-panel {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
@media (min-width: 640px) {
    .cd-panel {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}
.cd-rail-card {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
@media (min-width: 640px) {
    .cd-rail-card {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }
}
.cd-panel__header,
    .cd-rail-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .cd-panel__header,body[data-easy-mode="on"] 
    .cd-rail-card__header {
    gap: 1rem;
}
.cd-panel__header,
    .cd-rail-card__header {
        padding-block: 0.15rem 0.8rem;
        border-top: 1px solid rgba(15, 23, 42, 0.08);
    }
.cd-panel__header--split,
    .cd-rail-card__header {
    flex-wrap: wrap;
}
.cd-kicker {
    margin-bottom: 0.25rem;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.cd-section-head {
    display: grid;
    gap: 0.375rem;
        min-width: 0;
        flex: 1 1 auto;
}
.cd-section-head--center {
    text-align: center;
}
.cd-panel__title,
    .cd-rail-card__title {
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1.25;
    --tw-text-opacity: 1;
    color: rgb(2 6 23 / var(--tw-text-opacity, 1));
        text-transform: capitalize;
}
.cd-panel__copy,
    .cd-rail-card__copy {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.cd-inline-link {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
    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: 200ms;
}
.cd-inline-link:hover,
    .cd-inline-link:focus-visible {
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.color-blind .cd-inline-link:hover,.color-blind 
    .cd-inline-link:focus-visible {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.cd-status-pill,
    .cd-meta-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    border-width: 1px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
        border-color: rgba(15, 23, 42, 0.08);
        color: rgb(15 23 42);
        background: rgba(255, 255, 255, 0.85);
}
.cd-status-pill.is-emerald {
        border-color: rgba(16, 185, 129, 0.28);
        color: rgb(4 120 87);
        background: rgba(236, 253, 245, 0.95);
    }
.cd-status-pill.is-outline,
    .cd-status-pill.is-slate {
        border-color: rgba(15, 23, 42, 0.12);
        color: rgb(51 65 85);
    }
.cd-button-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border-width: 1px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
        border-color: rgba(16, 185, 129, 0.35);
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}
.cd-button-chip:hover,
    .cd-button-chip:focus-visible {
        border-color: rgba(5, 150, 105, 0.65);
        color: rgb(5 150 105);
        transform: translateY(-1px);
        box-shadow: 0 16px 28px rgba(16, 185, 129, 0.12);
    }
.cd-button-chip--solid {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        background: linear-gradient(135deg, rgb(5 150 105), rgb(16 185 129));
        border-color: transparent;
}
.cd-button-chip--solid:hover,
    .cd-button-chip--solid:focus-visible {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        background: linear-gradient(135deg, rgb(4 120 87), rgb(5 150 105));
}
.cd-button-chip--ghost {
        background: rgba(248, 250, 252, 0.8);
    }
.cd-link-tile {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-radius: 22px;
    border-width: 1px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
body[data-easy-mode="on"] .cd-link-tile {
    gap: 1.25rem;
}
.cd-link-tile {
        border-color: rgba(16, 185, 129, 0.16);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
    }
.cd-link-tile-stack {
    margin-top: 1.25rem;
}
.cd-link-tile-stack > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.875rem * var(--tw-space-y-reverse));
}
.cd-link-tile:hover,
    .cd-link-tile:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(5, 150, 105, 0.4);
        box-shadow: 0 16px 28px rgba(16, 185, 129, 0.1);
    }
.cd-link-tile__icon {
    display: inline-flex;
    height: 2.75rem;
    width: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 900;
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
#workout-popup .cd-link-tile__icon {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.cd-link-tile__icon {
        background: rgba(236, 253, 245, 0.95);
    }
.cd-link-tile__body {
    min-width: 0px;
    flex: 1 1 0%;
}
.cd-link-tile__title {
    display: block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 900;
    --tw-text-opacity: 1;
    color: rgb(2 6 23 / var(--tw-text-opacity, 1));
}
.cd-link-tile__text {
    margin-top: 0.25rem;
    display: block;
    font-size: 0.75rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.cd-link-tile__arrow {
    display: inline-flex;
    height: 2.75rem;
    min-width: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border-width: 1px;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
        border-color: rgba(16, 185, 129, 0.16);
        background: rgba(255, 255, 255, 0.92);
}
.cd-primary-cta {
    position: relative;
    display: flex;
    min-height: 260px;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 30px;
    border-width: 1px;
    padding: 1.25rem;
    text-align: left;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
        border-color: rgba(16, 185, 129, 0.18);
        background:
                radial-gradient(circle at top right, rgba(16, 185, 129, 0.16), transparent 36%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
        box-shadow: 0 22px 42px rgba(15, 23, 42, 0.08);
        overflow: hidden;
}
.cd-primary-cta::after {
        content: "";
        position: absolute;
        inset: auto -18% -35% auto;
        width: 220px;
        height: 220px;
        border-radius: 999px;
        background: rgba(16, 185, 129, 0.08);
        filter: blur(10px);
    }
.cd-primary-cta:hover,
    .cd-primary-cta:focus-visible {
        transform: translateY(-3px);
        border-color: rgba(5, 150, 105, 0.42);
        box-shadow: 0 30px 55px rgba(16, 185, 129, 0.16);
    }
.cd-primary-cta__top,
    .cd-action-card__visual,
    .cd-upcoming-card__top,
    .cd-goal-card__header,
    .cd-week-preview__top,
    .cd-week-day-button__top,
    .cd-summary-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .cd-primary-cta__top,body[data-easy-mode="on"] 
    .cd-action-card__visual,body[data-easy-mode="on"] 
    .cd-upcoming-card__top,body[data-easy-mode="on"] 
    .cd-goal-card__header,body[data-easy-mode="on"] 
    .cd-week-preview__top,body[data-easy-mode="on"] 
    .cd-week-day-button__top,body[data-easy-mode="on"] 
    .cd-summary-card__header {
    gap: 1rem;
}
.cd-primary-cta__top {
        position: relative;
        justify-content: center;
        text-align: center;
        padding-block: 0.2rem 1rem;
        border-top: 1px solid rgba(15, 23, 42, 0.08);
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
        min-height: 6rem;
    }
.cd-primary-cta__header-stack {
        width: 100%;
        padding-inline: 3.75rem;
        margin-inline: auto;
    }
.cd-primary-cta__icon,
    .cd-action-card__icon {
    display: inline-flex;
    height: 3rem;
    min-width: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    --tw-text-opacity: 1;
    color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}
#workout-popup .cd-primary-cta__icon,#workout-popup 
    .cd-action-card__icon {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.cd-primary-cta__icon,
    .cd-action-card__icon {
        background: rgba(236, 253, 245, 0.95);
    }
.cd-primary-cta__icon {
        position: absolute;
        top: 0.1rem;
    }
.cd-primary-cta__icon--left {
        left: 0;
    }
.cd-primary-cta__icon--right {
        right: 0;
    }
.cd-primary-cta__title {
    font-size: 1.85rem;
    font-weight: 900;
    line-height: 1.25;
    --tw-text-opacity: 1;
    color: rgb(2 6 23 / var(--tw-text-opacity, 1));
        text-transform: capitalize;
}
.cd-primary-cta__content {
    position: relative;
    z-index: 1;
    margin-top: 1.5rem;
}
.cd-primary-cta__content > :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));
}
.cd-primary-cta__headline {
    font-size: 1.7rem;
    font-weight: 900;
    line-height: 1;
    --tw-text-opacity: 1;
    color: rgb(2 6 23 / var(--tw-text-opacity, 1));
}
.cd-primary-cta__subhead {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.cd-primary-cta__copy {
    padding-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.cd-ambience-card {
    position: relative;
    overflow: hidden;
        background:
                radial-gradient(circle at top right, rgba(16, 185, 129, 0.18), transparent 34%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 253, 250, 0.94));
}
.cd-ambience-card__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
body[data-easy-mode="on"] .cd-ambience-card__top {
    gap: 1.25rem;
}
.cd-ambience-card__body {
    margin-top: 1.25rem;
    display: grid;
    gap: 1rem;
}
body[data-easy-mode="on"] .cd-ambience-card__body {
    gap: 1.25rem;
}
@media (min-width: 860px) {
    .cd-ambience-card__body {
        grid-template-columns: minmax(0,1.1fr) minmax(240px,0.9fr);
    }
}
.cd-ambience-card__visual,
    .cd-ambience-card__controls {
    border-radius: 24px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    background-color: rgb(255 255 255 / 0.85);
    padding: 1rem;
}
.cd-ambience-card__visual {
    display: flex;
    align-items: center;
    gap: 1rem;
}
body[data-easy-mode="on"] .cd-ambience-card__visual {
    gap: 1.25rem;
}
.cd-ambience-card__icon {
    position: relative;
    height: 5rem;
    width: 5rem;
    border-radius: 24px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
        background: linear-gradient(180deg, rgba(236, 253, 245, 1), rgba(209, 250, 229, 0.92));
        overflow: hidden;
}
.cd-ambience-card__icon::before,
    .cd-ambience-card__icon::after {
        content: "";
        position: absolute;
        inset: auto;
        transition: transform 500ms ease, opacity 500ms ease, background 500ms ease;
    }
.cd-ambience-card__icon::before {
        top: 16px;
        left: 16px;
        width: 30px;
        height: 30px;
        border-radius: 999px;
        background: #facc15;
        box-shadow: 0 0 26px rgba(250, 204, 21, 0.45);
    }
.cd-ambience-card__icon::after {
        bottom: 10px;
        left: 12px;
        width: 56px;
        height: 24px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.78);
        box-shadow: 0 8px 14px rgba(15, 23, 42, 0.1);
    }
.cd-ambience-card__icon[data-weather="rain"]::after,
    .cd-ambience-card__icon[data-weather="storm"]::after {
        box-shadow: 0 8px 14px rgba(15, 23, 42, 0.18), 14px 24px 0 -8px rgba(37, 99, 235, 0.7), 26px 30px 0 -8px rgba(37, 99, 235, 0.62), 6px 32px 0 -8px rgba(37, 99, 235, 0.62);
    }
.cd-ambience-card__icon[data-weather="snow"]::after,
    .cd-ambience-card__icon[data-weather="frost"]::after {
        box-shadow: 0 8px 14px rgba(15, 23, 42, 0.12), 14px 26px 0 -8px rgba(226, 232, 240, 0.95), 28px 32px 0 -8px rgba(226, 232, 240, 0.92), 6px 34px 0 -8px rgba(226, 232, 240, 0.92);
    }
.cd-ambience-card__icon[data-weather="storm"]::before {
        background: #f59e0b;
        clip-path: polygon(48% 0, 66% 0, 54% 42%, 74% 42%, 34% 100%, 45% 58%, 28% 58%);
        width: 34px;
        height: 42px;
    }
.cd-ambience-card__period {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.cd-ambience-card__clock {
    margin-top: 0.25rem;
    font-size: 2rem;
    font-weight: 900;
    --tw-text-opacity: 1;
    color: rgb(2 6 23 / var(--tw-text-opacity, 1));
}
.cd-ambience-card__label {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.cd-ambience-card__weather {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.cd-chip-grid,
    .cd-chip-row {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .cd-chip-grid,body[data-easy-mode="on"] 
    .cd-chip-row {
    gap: 0.75rem;
}
.cd-stat-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    border-width: 1px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
        border-color: rgba(15, 23, 42, 0.08);
        background: rgba(248, 250, 252, 0.95);
}
.cd-action-hub {
    overflow: hidden;
}
.cd-action-hub__intro {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.cd-action-hub__route {
    display: grid;
    gap: 0.25rem;
    border-radius: 22px;
    border-width: 1px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
        max-width: 34rem;
        border-color: rgba(15, 23, 42, 0.08);
        background: rgba(248, 250, 252, 0.9);
}
.cd-action-hub__route-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.cd-action-hub__route-copy {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.cd-segmented {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    border-width: 1px;
    padding: 0.25rem;
        border-color: rgba(16, 185, 129, 0.22);
        background: rgba(248, 250, 252, 0.95);
}
.cd-segmented__button {
    border-radius: 9999px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 900;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.cd-segmented__button.is-active {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        background: linear-gradient(135deg, rgb(5 150 105), rgb(16 185 129));
        box-shadow: 0 10px 20px rgba(16, 185, 129, 0.28);
}
.cd-segmented--slider {
        position: relative;
        display: inline-grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        padding: 0.3rem;
        overflow: hidden;
    }
.cd-segmented--slider::before {
        content: "";
        position: absolute;
        top: 0.3rem;
        bottom: 0.3rem;
        left: 0.3rem;
        width: calc(50% - 0.3rem);
        border-radius: 999px;
        background: linear-gradient(135deg, rgb(5 150 105), rgb(16 185 129));
        box-shadow: 0 10px 20px rgba(16, 185, 129, 0.2);
        transform: translateX(0);
        transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
    }
.cd-segmented--slider[data-selected-mode="trend"]::before {
        transform: translateX(100%);
    }
.cd-segmented--slider[data-selected-tab="all"]::before {
        transform: translateX(100%);
    }
.cd-segmented--slider .cd-segmented__button {
        position: relative;
        z-index: 1;
        min-width: 0;
        background: transparent;
        box-shadow: none;
        color: rgb(71 85 105);
    }
.cd-segmented--slider .cd-segmented__button.is-active {
        color: white;
        background: transparent;
        box-shadow: none;
    }
.cd-action-slider {
    margin-top: 1rem;
    overflow: hidden;
}
.cd-action-slider__track {
    display: flex;
    align-items: flex-start;
        transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), height 320ms ease;
        will-change: transform, height;
}
.cd-action-view {
    display: block;
        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;
}
.cd-action-view[aria-hidden="true"] {
        pointer-events: none;
    }
.cd-action-layout {
    display: grid;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .cd-action-layout {
    gap: 1rem;
}
.cd-action-secondary-grid {
    display: grid;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .cd-action-secondary-grid {
    gap: 1rem;
}
@media (min-width: 768px) {
    .cd-action-secondary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1280px) {
    .cd-action-secondary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.cd-action-grid {
    display: grid;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .cd-action-grid {
    gap: 1rem;
}
@media (min-width: 640px) {
    .cd-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1280px) {
    .cd-action-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.cd-action-grid--all {
        max-width: 58rem;
        margin-inline: auto;
        justify-items: stretch;
    }
.cd-action-grid--all .cd-action-card {
        align-items: center;
        text-align: center;
    }
.cd-action-grid--all .cd-action-card__hero {
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.55rem;
    }
.cd-action-grid--all .cd-action-card__heading {
        justify-items: center;
    }
.cd-action-grid--all .cd-chip-grid,
    .cd-action-grid--all .cd-action-card__footer {
        justify-content: center;
    }
.cd-action-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    border-width: 1px;
    padding: 1rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
        border-color: rgba(15, 23, 42, 0.08);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
        box-shadow: 0 18px 28px rgba(15, 23, 42, 0.05);
        overflow: hidden;
}
.cd-action-card:hover,
    .cd-action-card:focus-visible {
        transform: translateY(-3px);
        box-shadow: 0 28px 40px rgba(16, 185, 129, 0.14);
    }
.cd-action-card--primary {
        min-height: 0;
        padding: 1.15rem 1.15rem 1rem;
    }
.cd-action-card--compact {
        min-height: 0;
        padding: 0.95rem 0.95rem 0.9rem;
    }
.cd-action-card.is-missed {
        border-color: rgba(245, 158, 11, 0.28);
        background:
                radial-gradient(circle at top right, rgba(245, 158, 11, 0.14), transparent 36%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 251, 235, 0.92));
    }
.cd-action-card__hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .cd-action-card__hero {
    gap: 1rem;
}
.cd-action-card__heading {
    display: grid;
    gap: 0.25rem;
}
.cd-action-card__metrics {
    margin-top: 0.75rem;
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .cd-action-card__metrics {
    gap: 1rem;
}
.cd-action-card__metrics--hero {
    align-items: flex-start;
    justify-content: space-between;
    border-radius: 20px;
    border-width: 1px;
    border-color: rgb(226 232 240 / 0.8);
    background-color: rgb(255 255 255 / 0.8);
    padding-left: 0.875rem;
    padding-right: 0.875rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.cd-action-card__eyebrow,
    .cd-upcoming-card__eyebrow,
    .cd-context-panel__label,
    .cd-summary-card__label,
    .cd-goal-card__meta,
    .cd-week-day-button__state {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.cd-action-card__title,
    .cd-upcoming-card__title,
    .cd-context-panel__title,
    .cd-week-preview__title,
    .cd-goal-card__title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 900;
    --tw-text-opacity: 1;
    color: rgb(2 6 23 / var(--tw-text-opacity, 1));
}
.cd-action-card__highlight {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    --tw-text-opacity: 1;
    color: rgb(2 6 23 / var(--tw-text-opacity, 1));
}
.cd-action-card__highlight-label,
    .cd-upcoming-card__status,
    .cd-goal-card__timeline,
    .cd-summary-card__meta,
    .cd-identity-stat__label,
    .cd-streak-card__label,
    .cd-week-preview__summary,
    .cd-week-day-button__date,
    .cd-week-day-button__stats {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.cd-action-card__countdown {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}
.cd-action-card__countdown-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.cd-action-card__countdown-value {
    margin-top: 0.25rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 900;
    --tw-text-opacity: 1;
    color: rgb(2 6 23 / var(--tw-text-opacity, 1));
}
.cd-action-card__text,
    .cd-context-panel__body,
    .cd-reveal-panel__copy,
    .cd-profile-card__bio,
    .cd-empty-state__copy,
    .cd-week-preview-item,
    .cd-summary-card__copy {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.cd-action-card__footer,
    .cd-upcoming-card__footer,
    .cd-cta-row,
    .cd-trainer-meta-row {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .cd-action-card__footer,body[data-easy-mode="on"] 
    .cd-upcoming-card__footer,body[data-easy-mode="on"] 
    .cd-cta-row,body[data-easy-mode="on"] 
    .cd-trainer-meta-row {
    gap: 1rem;
}
.cd-action-card__badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.cd-action-card.is-missed .cd-action-card__badge {
    --tw-border-opacity: 1;
    border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.cd-action-card__cta {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 900;
    --tw-text-opacity: 1;
    color: rgb(2 6 23 / var(--tw-text-opacity, 1));
}
.cd-upcoming-card,
    .cd-context-panel,
    .cd-week-preview,
    .cd-summary-card,
    .cd-goal-card,
    .cd-streak-card {
    border-radius: 26px;
    border-width: 1px;
    padding: 1rem;
        border-color: rgba(15, 23, 42, 0.08);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
}
.cd-upcoming-card {
        min-height: 0;
        border-color: rgba(16, 185, 129, 0.2);
        background:
                radial-gradient(circle at top right, rgba(16, 185, 129, 0.12), transparent 34%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(236, 253, 245, 0.8));
    }
.cd-upcoming-card--compact {
        padding: 0.95rem;
    }
.cd-upcoming-card__timer {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 900;
    --tw-text-opacity: 1;
    color: rgb(2 6 23 / var(--tw-text-opacity, 1));
}
.cd-upcoming-card__meta {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.cd-empty-state {
    border-radius: 24px;
    border-width: 1px;
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    text-align: center;
}
.cd-empty-state--panel {
    margin-top: 1rem;
}
.cd-empty-state--subtle {
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    background-color: rgb(248 250 252 / 0.9);
}
.cd-empty-state__title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 900;
    --tw-text-opacity: 1;
    color: rgb(2 6 23 / var(--tw-text-opacity, 1));
}
.cd-empty-note {
    font-size: 0.875rem;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.cd-reveal-card {
    margin-top: 1rem;
}
.cd-trainer-banner-shell {
    position: relative;
    border-radius: 28px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    background-color: rgb(248 250 252 / 0.8);
    padding: 0.5rem;
        overflow: hidden;
        cursor: pointer;
        transition: border-radius 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease;
}
.cd-identity-banner {
    border-radius: 24px;
}
.cd-reveal-panel {
    margin-top: 0.75rem;
    border-radius: 22px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    background-color: rgb(255 255 255 / 0.9);
    padding: 1rem;
        box-shadow: 0 18px 28px rgba(15, 23, 42, 0.06);
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transform: translateY(-10px);
        transition: opacity 240ms ease, transform 240ms ease, max-height 300ms ease;
}
.cd-reveal-card.is-open .cd-reveal-panel {
        opacity: 1;
        max-height: 360px;
        transform: translateY(0);
    }
.cd-identity-stats {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
body[data-easy-mode="on"] .cd-identity-stats {
    gap: 1rem;
}
.cd-identity-stats--wide {
    justify-content: center;
}
.cd-identity-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    background-color: rgb(255 255 255 / 0.9);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
}
.cd-identity-stat__value,
    .cd-streak-card__value {
    font-size: 1.7rem;
    font-weight: 900;
    line-height: 1;
    --tw-text-opacity: 1;
    color: rgb(2 6 23 / var(--tw-text-opacity, 1));
}
.cd-goal-card {
    display: block;
}
.cd-goal-section {
    border-radius: 24px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    background-color: rgb(248 250 252 / 0.7);
    padding: 0.75rem;
}
html:not(.dark) .calendar-item.cd-goal-section {
  background: linear-gradient(to right,
    rgba(241, 245, 249, 0.9) 0%,
    rgba(248, 250, 252, 0.85) 100%);
  border-left-color: rgba(100, 116, 139, 0.4);
}
.dark .calendar-item.cd-goal-section {
  background: linear-gradient(to right,
    rgba(51, 65, 85, 0.4) 0%,
    rgba(71, 85, 105, 0.3) 100%);
  border-left-color: rgba(148, 163, 184, 0.4);
}
html:not(.dark) .calendar-item.cd-goal-section:hover {
  background: linear-gradient(to right,
    rgba(224, 242, 254, 0.95) 0%,
    rgba(240, 249, 255, 0.9) 100%);
  border-color: rgba(6, 182, 212, 0.3);
  border-left-color: rgba(6, 182, 212, 0.7);
}
.dark .calendar-item.cd-goal-section:hover {
  background: linear-gradient(to right,
    rgba(8, 47, 73, 0.5) 0%,
    rgba(7, 89, 133, 0.3) 100%);
  border-color: rgba(6, 182, 212, 0.4);
  border-left-color: rgba(6, 182, 212, 0.8);
}
.cd-goal-section__header {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .cd-goal-section__header {
    gap: 1rem;
}
.cd-goal-section__title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 900;
    --tw-text-opacity: 1;
    color: rgb(2 6 23 / var(--tw-text-opacity, 1));
}
.cd-goal-section__count {
    display: inline-flex;
    height: 1.75rem;
    min-width: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 900;
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.cd-goal-stack > :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));
}

.calendar-day-content.motivation-mode .cd-goal-stack {
  opacity: 0.4;
}
.cd-goal-card__status {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.cd-goal-card.is-active {
        border-color: rgba(16, 185, 129, 0.18);
    }
.cd-goal-card.is-complete {
        border-color: rgba(34, 197, 94, 0.22);
        background: linear-gradient(180deg, rgba(236, 253, 245, 0.95), rgba(255, 255, 255, 0.96));
    }
.cd-goal-card.is-paused {
        border-color: rgba(245, 158, 11, 0.18);
        background: linear-gradient(180deg, rgba(255, 251, 235, 0.95), rgba(255, 255, 255, 0.96));
    }
.cd-progress-bar {
    margin-top: 0.75rem;
    height: 0.625rem;
    overflow: hidden;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.cd-progress-bar__fill {
    display: block;
    height: 100%;
    border-radius: 9999px;
        width: 0;
        background: linear-gradient(135deg, rgb(15 23 42), rgb(71 85 105));
        transition: width 600ms ease;
}
.cd-progress-bar__fill.is-emerald {
        background: linear-gradient(135deg, rgb(5 150 105), rgb(16 185 129));
    }
.cd-week-layout {
    margin-top: 1.25rem;
    display: grid;
    gap: 1rem;
}
body[data-easy-mode="on"] .cd-week-layout {
    gap: 1.25rem;
}
@media (min-width: 1028px) {
    .cd-week-layout {
        grid-template-columns: minmax(0,1.05fr) minmax(0,1.35fr);
    }
}
.cd-week-preview {
    overflow: hidden;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.cd-week-preview.is-updating {
        opacity: 0.65;
        transform: translateY(4px) scale(0.988);
    }
.cd-week-preview__lists {
    margin-top: 1.25rem;
    display: grid;
    gap: 1rem;
}
body[data-easy-mode="on"] .cd-week-preview__lists {
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .cd-week-preview__lists {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.cd-week-preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .cd-week-preview-list {
    gap: 0.75rem;
}
.cd-week-preview-item {
    display: inline-flex;
    align-items: center;
    border-radius: 18px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    background-color: rgb(255 255 255 / 0.9);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
        box-shadow: 0 10px 16px rgba(15, 23, 42, 0.04);
}
.cd-week-preview-item:hover,
    .cd-week-preview-item:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(5, 150, 105, 0.4);
        box-shadow: 0 16px 26px rgba(16, 185, 129, 0.12);
    }
.cd-week-strip-wrap {
    min-width: 0px;
    overflow: visible;
    padding-top: 0.75rem;
}
.cd-week-strip-shell {
    border-radius: 28px;
    border-width: 1px;
    padding: 0.5rem;
        border-color: rgba(15, 23, 42, 0.08);
        background: linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(255, 255, 255, 0.96));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.cd-week-strip {
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 1rem;
    padding-top: 0.5rem;
}
body[data-easy-mode="on"] .cd-week-strip {
    gap: 1rem;
}
.cd-week-strip {
        cursor: grab;
        overflow-y: visible;
        scrollbar-width: none;
    }
.cd-week-strip.dragging {
        cursor: grabbing;
    }
.cd-week-strip.\!dragging {
        cursor: grabbing !important;
    }
.cd-week-strip::-webkit-scrollbar {
        display: none;
    }
.cd-week-day-button {
    min-width: 152px;
    border-radius: 24px;
    border-width: 1px;
    padding: 1rem;
    text-align: left;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
        border-color: rgba(15, 23, 42, 0.08);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
        position: relative;
        overflow: visible;
}
.cd-week-day-button:hover,
    .cd-week-day-button:focus-visible,
    .cd-week-day-button.is-active,
    .cd-week-day-button[aria-selected="true"] {
        transform: translateY(-4px);
        border-color: rgba(5, 150, 105, 0.42);
        box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.18), 0 22px 34px rgba(16, 185, 129, 0.16);
    }
.cd-week-day-button::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        box-shadow: 0 16px 26px rgba(16, 185, 129, 0);
        transition: box-shadow 220ms ease;
        pointer-events: none;
    }
.cd-week-day-button:hover::after,
    .cd-week-day-button:focus-visible::after,
    .cd-week-day-button.is-active::after,
    .cd-week-day-button[aria-selected="true"]::after {
        box-shadow: 0 18px 32px rgba(16, 185, 129, 0.18);
    }
.cd-week-day-button__label {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 900;
    --tw-text-opacity: 1;
    color: rgb(2 6 23 / var(--tw-text-opacity, 1));
}
.cd-week-day-button__stats {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.cd-mini-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.cd-mini-badge--emerald {
    --tw-border-opacity: 1;
    border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.cd-summary-grid {
    margin-top: 1.25rem;
    display: grid;
    gap: 1rem;
}
body[data-easy-mode="on"] .cd-summary-grid {
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .cd-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.cd-summary-card {
    min-height: 170px;
}
.cd-profile-card__body,
    .cd-profile-card__section {
    margin-top: 1rem;
}
.cd-profile-card__section {
    text-align: center;
}
.cd-context-panel--profile {
    text-align: center;
}
.cd-streak-card {
    display: inline-flex;
    min-width: 140px;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .cd-streak-card {
    gap: 0.75rem;
}
.dashboard-rails-centered .cd-rail-card {
        box-shadow: 0 24px 42px rgba(15, 23, 42, 0.08);
    }
[data-dashboard-role="CLIENT"] {
        transition: background 700ms ease, color 700ms ease;
    }
[data-dashboard-role="CLIENT"][data-dashboard-immersive="true"][data-dashboard-period="morning"] {
        background: linear-gradient(180deg, rgba(255, 247, 237, 0.56), rgba(236, 253, 245, 0));
    }
[data-dashboard-role="CLIENT"][data-dashboard-immersive="true"][data-dashboard-period="midday"] {
        background: linear-gradient(180deg, rgba(224, 242, 254, 0.6), rgba(255, 255, 255, 0));
    }
[data-dashboard-role="CLIENT"][data-dashboard-immersive="true"][data-dashboard-period="evening"] {
        background: linear-gradient(180deg, rgba(255, 237, 213, 0.52), rgba(254, 242, 242, 0));
    }
[data-dashboard-role="CLIENT"][data-dashboard-immersive="true"][data-dashboard-period="night"] {
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0));
    }
[data-dashboard-role="CLIENT"][data-dashboard-immersive="true"][data-dashboard-weather="rain"] .cd-panel,
    [data-dashboard-role="CLIENT"][data-dashboard-immersive="true"][data-dashboard-weather="storm"] .cd-panel,
    [data-dashboard-role="CLIENT"][data-dashboard-immersive="true"][data-dashboard-weather="rain"] .cd-rail-card,
    [data-dashboard-role="CLIENT"][data-dashboard-immersive="true"][data-dashboard-weather="storm"] .cd-rail-card {
        box-shadow: 0 20px 40px rgba(37, 99, 235, 0.1);
    }
.cd-trainer-stage {
    margin-top: 1rem;
}
.cd-segmented--compact {
    padding: 0.125rem;
}
.cd-trainer-panel-stack {
    position: relative;
    margin-top: 1rem;
}
.auth-fields-block.cd-trainer-panel {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
        pointer-events: none;
    }
.profile-phone-country-dropdown.cd-trainer-panel {
        display: none;
    }
#profile-phone-country.cd-trainer-panel {
        display: none;
    }
.cd-trainer-panel {
    display: none;
    opacity: 0;
}
#task-drawer.cd-trainer-panel .sm\:w-96,
#workout-drawer.cd-trainer-panel .sm\:w-\[28rem\] {
  transform: translateX(24px);
}
.day-tab-panel.cd-trainer-panel {
  display: none;
}
.day-tab-panel:not(.cd-trainer-panel) {
  animation: sectionEnter 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .day-tab-panel:not(.cd-trainer-panel) {
    animation: none;
  }
}
.cd-trainer-panel {
        transform: translateY(8px);
        transition: opacity 240ms ease, transform 240ms ease;
    }
.cd-trainer-panel.is-active {
    display: block;
    opacity: 1;
        transform: translateY(0);
}
.cd-context-panel--trainer {
    margin-bottom: 1rem;
}
.cd-activity-feed > :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));
}

.calendar-day-content.motivation-mode .cd-activity-feed {
  opacity: 0.4;
}
.cd-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-radius: 22px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    background-color: rgb(255 255 255 / 0.9);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
body[data-easy-mode="on"] .cd-activity-item {
    gap: 1rem;
}
.cd-activity-item:hover,
    .cd-activity-item:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(5, 150, 105, 0.34);
        box-shadow: 0 16px 24px rgba(16, 185, 129, 0.1);
    }
.cd-activity-item.is-static {
        pointer-events: none;
    }
.cd-activity-item__icon {
    margin-top: 0.25rem;
    display: inline-flex;
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
#workout-popup .cd-activity-item__icon {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.cd-activity-item__icon {
        position: relative;
        flex-shrink: 0;
    }
.cd-activity-item__icon::before {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 18px;
        height: 18px;
        border-radius: 6px;
        border: 2px solid currentColor;
        color: rgb(4 120 87);
    }
.cd-activity-item__icon[data-kind="workout"]::before {
        width: 20px;
        height: 8px;
        border-radius: 999px;
        border-width: 2px;
    }
.cd-activity-item__icon[data-kind="plan"]::before {
        width: 14px;
        height: 18px;
        border-radius: 999px 999px 10px 10px;
    }
.cd-action-card__icon svg,
    .cd-primary-cta__icon svg {
        width: 1.4rem;
        height: 1.4rem;
    }
.cd-activity-item__body {
    min-width: 0px;
    flex: 1 1 0%;
}
.cd-activity-item__title {
    display: block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 900;
    --tw-text-opacity: 1;
    color: rgb(2 6 23 / var(--tw-text-opacity, 1));
}
.cd-activity-item__copy {
    margin-top: 0.25rem;
    display: block;
    font-size: 0.875rem;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.cd-activity-item__meta {
    margin-top: 0.25rem;
    display: block;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.cd-trainer-message-box {
    border-radius: 24px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    background-color: rgb(248 250 252 / 0.7);
    padding: 0.75rem;
}
html:not(.dark) .calendar-item.cd-trainer-message-box {
  background: linear-gradient(to right,
    rgba(241, 245, 249, 0.9) 0%,
    rgba(248, 250, 252, 0.85) 100%);
  border-left-color: rgba(100, 116, 139, 0.4);
}
.dark .calendar-item.cd-trainer-message-box {
  background: linear-gradient(to right,
    rgba(51, 65, 85, 0.4) 0%,
    rgba(71, 85, 105, 0.3) 100%);
  border-left-color: rgba(148, 163, 184, 0.4);
}
html:not(.dark) .calendar-item.cd-trainer-message-box:hover {
  background: linear-gradient(to right,
    rgba(224, 242, 254, 0.95) 0%,
    rgba(240, 249, 255, 0.9) 100%);
  border-color: rgba(6, 182, 212, 0.3);
  border-left-color: rgba(6, 182, 212, 0.7);
}
.dark .calendar-item.cd-trainer-message-box:hover {
  background: linear-gradient(to right,
    rgba(8, 47, 73, 0.5) 0%,
    rgba(7, 89, 133, 0.3) 100%);
  border-color: rgba(6, 182, 212, 0.4);
  border-left-color: rgba(6, 182, 212, 0.8);
}
.cd-trainer-message-list {
    max-height: 320px;
}
.cd-trainer-message-list > :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));
}
.cd-trainer-message-list {
    overflow-y: auto;
    padding-right: 0.25rem;
}

.calendar-day-content.motivation-mode .cd-trainer-message-list {
  opacity: 0.4;
}
.cd-trainer-message-list {
        scrollbar-width: thin;
    }
.cd-message-load {
    margin-bottom: 0.5rem;
    width: 100%;
}
.cd-trainer-message {
    border-radius: 22px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.cd-trainer-message.is-mine {
    --tw-border-opacity: 1;
    border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
    background-color: rgb(236 253 245 / 0.8);
        margin-left: 1.5rem;
}
.cd-trainer-message__body {
    font-size: 0.875rem;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.cd-trainer-message__meta {
    margin-top: 0.5rem;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.cd-trainer-message-form {
    margin-top: 0.75rem;
}
.cd-trainer-message-form > :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));
}

.calendar-day-content.motivation-mode .cd-trainer-message-form {
  opacity: 0.4;
}
.cd-trainer-message-form__input {
    width: 100%;
    border-radius: 20px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    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: 200ms;
        min-height: 88px;
}
.cd-trainer-message-form__input:focus {
        border-color: rgba(5, 150, 105, 0.46);
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
    }
.cd-trainer-message-form__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .cd-trainer-message-form__actions {
    gap: 1rem;
}
.cd-info-pop {
    position: relative;
}
.cd-info-pop__button {
    display: inline-flex;
    height: 2.5rem;
    width: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 900;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
        box-shadow: 0 10px 18px rgba(15, 23, 42, 0.04);
}
.cd-info-pop__button:hover,
    .cd-info-pop__button:focus-visible,
    .cd-info-pop.is-open .cd-info-pop__button {
        transform: translateY(-1px);
        border-color: rgba(5, 150, 105, 0.36);
        color: rgb(5 150 105);
    }
.cd-info-pop__panel {
    pointer-events: none;
    position: absolute;
    right: 0px;
    top: -0.75rem;
    z-index: 20;
    width: 18rem;
    border-radius: 22px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
    opacity: 0;
        transform: translateY(-100%) scale(0.98);
        box-shadow: 0 24px 34px rgba(15, 23, 42, 0.12);
        transition: opacity 220ms ease, transform 220ms ease;
}
.cd-info-pop.is-open .cd-info-pop__panel {
    pointer-events: auto;
    opacity: 1;
        transform: translateY(calc(-100% - 0.35rem)) scale(1);
}
[data-dashboard-role="CLIENT"] {
        position: relative;
        isolation: isolate;
        --cd-immersive-sky:
                radial-gradient(circle at top left, rgba(255, 255, 255, 0.72), transparent 28%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0));
        --cd-immersive-orb: rgba(16, 185, 129, 0.14);
        --cd-immersive-line: linear-gradient(90deg, rgba(16, 185, 129, 0), rgba(16, 185, 129, 0.52), rgba(16, 185, 129, 0));
        --cd-immersive-card-shadow: 0 20px 36px rgba(15, 23, 42, 0.08);
        transition: color 600ms ease;
    }
[data-dashboard-role="CLIENT"]::before,
    [data-dashboard-role="CLIENT"]::after {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: -2;
        transition: opacity 800ms ease, background 900ms ease, transform 1200ms ease;
    }
[data-dashboard-role="CLIENT"]::before {
        background:
                radial-gradient(circle at 12% 10%, var(--cd-immersive-orb), transparent 28%),
                radial-gradient(circle at 86% 12%, rgba(255, 255, 255, 0.46), transparent 20%),
                var(--cd-immersive-sky);
        opacity: 0.95;
    }
[data-dashboard-role="CLIENT"]::after {
        z-index: -1;
        opacity: 0;
        background:
                radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.3), transparent 22%),
                radial-gradient(circle at 80% 24%, rgba(255, 255, 255, 0.22), transparent 18%);
    }
[data-dashboard-role="CLIENT"][data-dashboard-immersive="false"]::before {
        opacity: 0.42;
    }
[data-dashboard-role="CLIENT"][data-dashboard-immersive="false"]::after {
        opacity: 0;
    }
[data-dashboard-role="CLIENT"][data-dashboard-immersive="true"][data-dashboard-period="morning"] {
        --cd-immersive-sky:
                radial-gradient(circle at top left, rgba(255, 247, 237, 0.76), transparent 32%),
                linear-gradient(180deg, rgba(255, 251, 235, 0.82), rgba(236, 253, 245, 0.12));
        --cd-immersive-orb: rgba(251, 191, 36, 0.16);
        --cd-immersive-line: linear-gradient(90deg, rgba(251, 191, 36, 0), rgba(251, 191, 36, 0.46), rgba(16, 185, 129, 0.42), rgba(16, 185, 129, 0));
    }
[data-dashboard-role="CLIENT"][data-dashboard-immersive="true"][data-dashboard-period="midday"] {
        --cd-immersive-sky:
                radial-gradient(circle at top left, rgba(224, 242, 254, 0.84), transparent 34%),
                linear-gradient(180deg, rgba(240, 249, 255, 0.86), rgba(255, 255, 255, 0.08));
        --cd-immersive-orb: rgba(59, 130, 246, 0.12);
        --cd-immersive-line: linear-gradient(90deg, rgba(59, 130, 246, 0), rgba(125, 211, 252, 0.52), rgba(16, 185, 129, 0.34), rgba(16, 185, 129, 0));
    }
[data-dashboard-role="CLIENT"][data-dashboard-immersive="true"][data-dashboard-period="evening"] {
        --cd-immersive-sky:
                radial-gradient(circle at top left, rgba(255, 237, 213, 0.78), transparent 30%),
                linear-gradient(180deg, rgba(255, 247, 237, 0.82), rgba(254, 242, 242, 0.1));
        --cd-immersive-orb: rgba(249, 115, 22, 0.15);
        --cd-immersive-line: linear-gradient(90deg, rgba(249, 115, 22, 0), rgba(249, 115, 22, 0.46), rgba(16, 185, 129, 0.34), rgba(16, 185, 129, 0));
    }
[data-dashboard-role="CLIENT"][data-dashboard-immersive="true"][data-dashboard-period="night"] {
        --cd-immersive-sky:
                radial-gradient(circle at top left, rgba(15, 23, 42, 0.9), transparent 36%),
                linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(15, 23, 42, 0.12));
        --cd-immersive-orb: rgba(96, 165, 250, 0.12);
        --cd-immersive-line: linear-gradient(90deg, rgba(96, 165, 250, 0), rgba(96, 165, 250, 0.44), rgba(16, 185, 129, 0.3), rgba(16, 185, 129, 0));
    }
[data-dashboard-role="CLIENT"][data-dashboard-immersive="true"][data-dashboard-weather="storm"]::after,
    [data-dashboard-role="CLIENT"][data-dashboard-immersive="true"][data-dashboard-weather="rain"]::after,
    [data-dashboard-role="CLIENT"][data-dashboard-immersive="true"][data-dashboard-weather="snow"]::after {
        opacity: 1;
    }
[data-dashboard-role="CLIENT"][data-dashboard-immersive="true"][data-dashboard-weather="rain"]::after {
        background:
                linear-gradient(125deg, rgba(37, 99, 235, 0.06) 18%, transparent 18.5%, transparent 50%, rgba(37, 99, 235, 0.05) 50.5%, transparent 70%);
        background-size: 180px 180px;
        animation: cd-rain-shift 18s linear infinite;
    }
[data-dashboard-role="CLIENT"][data-dashboard-immersive="true"][data-dashboard-weather="storm"]::after {
        background:
                radial-gradient(circle at 75% 18%, rgba(250, 204, 21, 0.16), transparent 12%),
                linear-gradient(125deg, rgba(59, 130, 246, 0.06) 18%, transparent 18.5%, transparent 50%, rgba(59, 130, 246, 0.05) 50.5%, transparent 70%);
        background-size: auto, 180px 180px;
        animation: cd-rain-shift 16s linear infinite;
    }
[data-dashboard-role="CLIENT"][data-dashboard-immersive="true"][data-dashboard-weather="snow"]::after {
        background:
                radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.3), transparent 10%),
                radial-gradient(circle at 65% 18%, rgba(255, 255, 255, 0.24), transparent 8%),
                radial-gradient(circle at 84% 34%, rgba(255, 255, 255, 0.26), transparent 9%);
        animation: cd-snow-drift 14s linear infinite;
    }
.cd-panel,
    .cd-rail-card,
    .cd-primary-cta,
    .cd-action-card,
    .cd-upcoming-card,
    .cd-context-panel,
    .cd-week-preview,
    .cd-summary-card,
    .cd-goal-card,
    .cd-streak-card,
    .cd-link-tile,
    .cd-week-day-button,
    .cd-trainer-banner-shell,
    .cd-reveal-panel {
        position: relative;
        overflow: visible;
        box-shadow: var(--cd-immersive-card-shadow);
    }
.cd-panel::before,
    .cd-rail-card::before,
    .cd-primary-cta::before,
    .cd-action-card::before,
    .cd-upcoming-card::before,
    .cd-context-panel::before,
    .cd-week-preview::before,
    .cd-summary-card::before,
    .cd-goal-card::before,
    .cd-streak-card::before,
    .cd-link-tile::before,
    .cd-week-day-button::before,
    .cd-trainer-banner-shell::before,
    .cd-reveal-panel::before {
        content: "";
        position: absolute;
        top: 0.85rem;
        left: 1.2rem;
        right: 1.2rem;
        height: 1px;
        background: var(--cd-immersive-line);
        opacity: 0.72;
        pointer-events: none;
    }
.cd-link-tile__icon {
        box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.18);
    }
.cd-link-tile__icon svg {
        width: 1.12rem;
        height: 1.12rem;
    }
.cd-link-tile__arrow {
    display: inline-flex;
    height: 2.25rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
        font-size: 1rem;
        box-shadow: 0 10px 18px rgba(15, 23, 42, 0.05);
}
.cd-cta-row--left {
        justify-content: flex-start;
    }
.cd-switch {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.15rem;
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.06);
        transition: background 240ms ease, box-shadow 240ms ease;
    }
.cd-switch[aria-checked="true"] {
        background: rgba(16, 185, 129, 0.14);
        box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.18);
    }
.cd-switch__track {
        position: relative;
        display: inline-flex;
        width: 3.35rem;
        height: 2rem;
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(226, 232, 240, 0.92));
        box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.08);
    }
.cd-switch__thumb {
        position: absolute;
        top: 0.22rem;
        left: 0.22rem;
        width: 1.56rem;
        height: 1.56rem;
        border-radius: 999px;
        background: linear-gradient(135deg, rgb(15 23 42), rgb(51 65 85));
        box-shadow: 0 8px 16px rgba(15, 23, 42, 0.16);
        transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), background 260ms ease;
    }
.cd-switch[aria-checked="true"] .cd-switch__thumb {
        transform: translateX(1.34rem);
        background: linear-gradient(135deg, rgb(5 150 105), rgb(16 185 129));
    }
.cd-ambience-card__title {
        font-size: clamp(1.65rem, 2vw, 2.1rem);
    }
.cd-ambience-card__body {
        margin-top: 1.1rem;
    }
.cd-ambience-card__visual,
    .cd-ambience-card__controls {
        background: rgba(255, 255, 255, 0.78);
        backdrop-filter: blur(10px);
    }
.cd-ambience-card__icon {
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.64), 0 20px 34px rgba(15, 23, 42, 0.08);
    }
.cd-ambience-card__icon[data-period="night"] {
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.94));
    }
.cd-ambience-card__icon[data-period="night"]::before {
        background: rgba(226, 232, 240, 0.92);
        box-shadow: 0 0 28px rgba(191, 219, 254, 0.28);
        clip-path: path("M15 0C7 2 3 9 5 17c3 11 15 12 22 7-12-1-18-11-12-24Z");
    }
.cd-ambience-card__icon[data-period="evening"]::before {
        background: #fb923c;
        box-shadow: 0 0 24px rgba(251, 146, 60, 0.4);
    }
.cd-ambience-card__icon[data-period="morning"]::before {
        background: #fbbf24;
        box-shadow: 0 0 24px rgba(251, 191, 36, 0.34);
    }
.cd-ambience-card__icon[data-weather="cloudy"]::after,
    .cd-ambience-card__icon[data-weather="overcast"]::after {
        background: rgba(226, 232, 240, 0.88);
    }
.cd-ambience-card__icon[data-weather="sunny"]::after {
        background: rgba(255, 255, 255, 0.76);
    }
.cd-ambience-card__clock {
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.04em;
    }
.cd-ambience-card__weather {
        margin-top: 0.45rem;
        font-size: 0.95rem;
        line-height: 1.5;
    }
.cd-ambience-card__forecast-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .cd-ambience-card__forecast-head {
    gap: 1rem;
}
.cd-ambience-card__meta {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.cd-ambience-card__summary {
        margin-top: 0.4rem;
        font-size: 0.92rem;
        line-height: 1.55;
        color: rgb(71 85 105);
    }
.cd-ambience-card__location-block {
        display: grid;
        justify-items: end;
        gap: 0.45rem;
    }
.cd-ambience-card__location-indicator {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.45rem 0.7rem;
        border-radius: 999px;
        border: 1px solid rgba(148, 163, 184, 0.22);
        background: rgba(248, 250, 252, 0.82);
        font-size: 0.76rem;
        font-weight: 700;
        color: rgb(51 65 85);
    }
.cd-ambience-card__location-dot {
        width: 0.45rem;
        height: 0.45rem;
        border-radius: 999px;
        background: rgb(59 130 246);
        box-shadow: 0 0 0 0.22rem rgba(59, 130, 246, 0.14);
    }
.cd-ambience-card__permission {
        margin-top: 1rem;
        padding: 0.95rem 1rem;
        border-radius: 1rem;
        border: 1px solid rgba(245, 158, 11, 0.26);
        background: rgba(255, 251, 235, 0.92);
        color: rgb(146 64 14);
        font-size: 0.9rem;
        line-height: 1.6;
    }
.cd-ambience-card__graph-toggle {
        margin-top: 1rem;
        width: min(100%, 25rem);
    }
.cd-ambience-timeline-wrap {
        margin-top: 1rem;
    }
.cd-ambience-timeline__strip,
    .cd-ambience-graph__scroller {
        display: flex;
        gap: 0.8rem;
        overflow-x: auto;
        scrollbar-width: none;
        cursor: grab;
        padding-bottom: 0.25rem;
    }
.cd-ambience-timeline__strip.dragging,
    .cd-ambience-graph__scroller.dragging {
        cursor: grabbing;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
    }
.cd-ambience-timeline__strip.\!dragging,
    .cd-ambience-graph__scroller.\!dragging {
        cursor: grabbing !important;
        -webkit-user-select: none !important;
           -moz-user-select: none !important;
                user-select: none !important;
    }
.cd-ambience-timeline__strip::-webkit-scrollbar,
    .cd-ambience-graph__scroller::-webkit-scrollbar {
        display: none;
    }
.cd-ambience-timeline__item {
        min-width: 5.25rem;
        display: grid;
        justify-items: center;
        gap: 0.42rem;
        padding: 0.9rem 0.75rem;
        border-radius: 1.25rem;
        border: 1px solid rgba(148, 163, 184, 0.18);
        background: rgba(248, 250, 252, 0.84);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }
.cd-ambience-timeline__time,
    .cd-ambience-graph__time {
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgb(71 85 105);
    }
.cd-ambience-timeline__glyph {
        font-size: 1.65rem;
        line-height: 1;
    }
.cd-ambience-timeline__temp,
    .cd-ambience-graph__temp {
        font-size: 1rem;
        font-weight: 800;
        color: rgb(15 23 42);
    }
.cd-ambience-timeline__condition,
    .cd-ambience-graph__meta {
        font-size: 0.72rem;
        line-height: 1.45;
        text-align: center;
        color: rgb(100 116 139);
    }
.cd-ambience-graph {
        overflow: hidden;
        border-radius: 1.35rem;
        border: 1px solid rgba(148, 163, 184, 0.16);
        background: linear-gradient(180deg, rgba(239, 246, 255, 0.84), rgba(248, 250, 252, 0.92));
    }
.cd-ambience-graph__inner {
        position: relative;
        min-height: 13.5rem;
    }
.cd-ambience-graph__svg {
        position: absolute;
        inset: 0 0 3.7rem;
        width: 100%;
        height: calc(100% - 3.7rem);
        overflow: visible;
    }
.cd-ambience-graph__line {
        fill: none;
        stroke: rgb(59 130 246);
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
        filter: drop-shadow(0 10px 18px rgba(59, 130, 246, 0.18));
        transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1);
    }
.cd-ambience-graph__line.is-visible {
        stroke-dashoffset: 0;
    }
.cd-ambience-graph__dot {
        fill: rgb(59 130 246);
        stroke: rgba(255, 255, 255, 0.92);
        stroke-width: 2.5;
        opacity: 0;
        transform-origin: center;
        animation: cd-ambience-dot-pop 320ms ease forwards;
        animation-delay: var(--dot-delay, 0ms);
    }
.cd-ambience-graph__columns {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 4.875rem;
        padding: 8.75rem 0 0.85rem;
    }
.cd-ambience-graph__column {
        display: grid;
        justify-items: center;
        gap: 0.32rem;
    }
.cd-ambience-graph__spacer {
        height: 0.2rem;
    }
@keyframes cd-ambience-dot-pop {
        from {
            opacity: 0;
            transform: scale(0.35);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
.cd-goal-slider {
        margin-top: 1rem;
    }
.cd-goal-slider__tabs {
        width: 100%;
        justify-content: space-between;
    }
.cd-goal-slider__mask {
        margin-top: 0.95rem;
        overflow: hidden;
        border-radius: 1.35rem;
    }
.cd-goal-slider__viewport {
        display: flex;
        width: 100%;
        transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), height 340ms ease;
        will-change: transform, height;
    }
.cd-goal-section {
        min-width: 100%;
        padding: 0.2rem;
        border: none;
        background: transparent;
    }
.cd-goal-card {
        transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
    }
.cd-goal-card:hover,
    .cd-goal-card:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 22px 34px rgba(16, 185, 129, 0.12);
    }
.cd-action-hub .cd-panel__header {
        align-items: flex-start;
        gap: 1rem;
    }
.cd-action-hub .cd-panel__title {
        font-size: clamp(1.7rem, 1.7vw, 2rem);
    }
.cd-action-slider__track {
        will-change: transform, height;
    }
.cd-action-layout {
        margin-top: 0.1rem;
    }
.cd-action-card {
        border-radius: 2rem;
    }
.cd-action-card--primary {
        min-height: 0;
        padding: 1.05rem;
    }
.cd-action-card--compact {
        min-height: 0;
        padding: 0.95rem;
    }
.cd-action-card__hero {
        gap: 0.8rem;
    }
.cd-action-card__title {
        margin-top: 0;
        font-size: clamp(1.1rem, 1.25vw, 1.55rem);
        line-height: 1.15;
    }
.cd-action-card__badge {
        align-self: flex-start;
    }
.cd-action-card__metrics {
        margin-top: 0.75rem;
    }
.cd-action-card__metrics--hero {
        gap: 0.8rem;
        border-style: solid;
        padding: 0.85rem 0.95rem;
    }
.cd-action-card__highlight {
        font-size: clamp(1.5rem, 1.7vw, 1.95rem);
        letter-spacing: -0.05em;
    }
.cd-action-card__highlight-label {
        display: inline-flex;
        margin-top: 0.28rem;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
    }
.cd-action-card__countdown-value {
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.03em;
    }
.cd-action-card__text {
        margin-top: 0.55rem;
        line-height: 1.48;
    }
.cd-chip-grid--metrics {
        gap: 0.45rem;
    }
.cd-stat-chip--strong {
        background: rgba(255, 255, 255, 0.96);
        border-color: rgba(16, 185, 129, 0.18);
        color: rgb(15 23 42);
    }
.cd-action-card__footer {
        margin-top: 0.8rem;
        padding-top: 0.7rem;
        border-top: 1px solid rgba(15, 23, 42, 0.08);
    }
.cd-action-card__cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.75rem;
        padding: 0.72rem 1rem;
        border-radius: 999px;
        border: 1px solid rgba(16, 185, 129, 0.24);
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 10px 18px rgba(15, 23, 42, 0.05);
        transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
    }
.cd-action-card:hover .cd-action-card__cta,
    .cd-action-card:focus-visible .cd-action-card__cta {
        transform: translateY(-1px);
        border-color: rgba(5, 150, 105, 0.42);
        color: rgb(5 150 105);
        box-shadow: 0 16px 26px rgba(16, 185, 129, 0.12);
    }
.cd-upcoming-card {
        min-height: 0;
        padding: 0.95rem;
    }
.cd-upcoming-card__title {
        margin-top: 0.18rem;
    }
.cd-upcoming-card__text {
        margin-top: 0.55rem;
        font-size: 0.88rem;
        line-height: 1.48;
    }
.cd-upcoming-card__footer {
        padding-top: 0.65rem;
        border-top: 1px solid rgba(15, 23, 42, 0.08);
    }
.cd-reveal-card {
        display: grid;
        gap: 0;
        overflow-anchor: none;
    }
.cd-trainer-banner-shell {
        padding: 0.55rem;
        border-radius: 2rem;
        cursor: pointer;
        background:
                radial-gradient(circle at top right, rgba(16, 185, 129, 0.12), transparent 40%),
                linear-gradient(180deg, rgba(248, 250, 252, 0.94), rgba(255, 255, 255, 0.96));
    }
.cd-reveal-card.is-open .cd-trainer-banner-shell {
        border-bottom-left-radius: 1.25rem;
        border-bottom-right-radius: 1.25rem;
        box-shadow: 0 18px 30px rgba(15, 23, 42, 0.08);
    }
.cd-reveal-panel-wrap {
        display: grid;
        grid-template-rows: 0fr;
        margin-top: 0;
        padding: 0 0.55rem 0.2rem;
        transition: grid-template-rows 360ms cubic-bezier(0.22, 1, 0.36, 1);
        overflow-anchor: none;
    }
.cd-reveal-panel {
        min-height: 0;
        margin-top: 0.2rem;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        padding-top: 1.2rem;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 240ms ease, transform 300ms ease;
    }
.cd-reveal-card.is-open .cd-reveal-panel-wrap {
        grid-template-rows: 1fr;
    }
.cd-reveal-card.is-open .cd-reveal-panel {
        opacity: 1;
        transform: translateY(0);
        max-height: none;
    }
.cd-profile-card__section--milestones {
        text-align: center;
    }
.cd-context-panel--trainer {
        margin-bottom: 0.9rem;
        padding: 1rem 1rem 0.95rem;
        background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
    }
.cd-context-panel--trainer .cd-context-panel__label {
        display: none;
    }
.cd-context-panel--trainer .cd-context-panel__title {
        font-size: 1rem;
    }
.cd-context-panel--trainer .cd-context-panel__body {
        margin-top: 0.45rem;
        font-size: 0.92rem;
    }
.cd-context-panel__meta {
        margin-top: 0.55rem;
        font-size: 0.74rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgb(100 116 139);
    }
.cd-activity-item {
        align-items: center;
        padding: 0.9rem;
    }
.cd-activity-item__main {
        display: flex;
        min-width: 0;
        flex: 1;
        gap: 0.8rem;
        align-items: center;
    }
.cd-activity-item__actions {
        display: inline-flex;
        gap: 0.45rem;
        margin-left: auto;
    }
.cd-activity-item__action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 999px;
        border: 1px solid rgba(15, 23, 42, 0.08);
        background: rgba(255, 255, 255, 0.96);
        color: rgb(51 65 85);
        transition: transform 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
    }
.cd-activity-item__action:hover,
    .cd-activity-item__action:focus-visible {
        transform: translateY(-1px);
        border-color: rgba(5, 150, 105, 0.38);
        color: rgb(5 150 105);
        box-shadow: 0 14px 22px rgba(16, 185, 129, 0.1);
    }
.cd-activity-item__action svg {
        width: 0.95rem;
        height: 0.95rem;
    }
.cd-activity-item.is-leaving {
        opacity: 0;
        transform: translateX(12px) scale(0.98);
        transition: opacity 220ms ease, transform 220ms ease;
    }
.cd-trainer-message-list {
        overscroll-behavior: contain;
    }
.cd-week-panel {
        overflow: visible;
    }
.cd-week-panel,
    .cd-week-panel * {
        -webkit-user-select: none;
        -moz-user-select: none;
             user-select: none;
    }
.cd-week-layout,
    .cd-week-strip-wrap {
        overflow: visible;
    }
.cd-week-preview {
        padding: 1.2rem;
        border-color: rgba(15, 23, 42, 0.1);
    }
.cd-week-preview__top {
        align-items: flex-start;
        padding-bottom: 0.9rem;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }
.cd-week-preview__summary {
        margin-top: 0.6rem;
        font-size: 0.95rem;
    }
.cd-week-preview__lists {
        gap: 1rem;
        margin-top: 1rem;
    }
.cd-week-preview__lists > div {
        padding-top: 1rem;
        border-top: 1px solid rgba(15, 23, 42, 0.08);
        display: grid;
        gap: 0.65rem;
    }
.cd-week-preview-list {
        display: grid;
        gap: 0.55rem;
    }
.cd-week-preview-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 0.35rem;
        width: 100%;
        min-height: 0;
        padding: 0.9rem 1rem;
        border-radius: 1.1rem;
        text-align: left;
        border: 1px solid rgba(15, 23, 42, 0.08);
        background: rgba(255, 255, 255, 0.92);
    }
.cd-week-preview-item__content {
        display: grid;
        gap: 0.28rem;
    }
.cd-week-preview-item__title {
        min-width: 0;
        font-size: 0.95rem;
        font-weight: 800;
        color: rgb(15 23 42);
        line-height: 1.35;
    }
.cd-week-preview-item__meta {
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgb(100 116 139);
    }
.cd-week-preview-item:hover,
    .cd-week-preview-item:focus-visible {
        transform: translateY(-1px);
    }
.cd-week-strip-wrap {
        padding-top: 0.55rem;
    }
.cd-week-strip-shell {
        padding: 0.55rem;
        border-radius: 2rem;
    }
.cd-week-strip {
        gap: 0.85rem;
        padding: 0.6rem 0.45rem 0.95rem;
        scroll-behavior: smooth;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
    }
.cd-week-day-button {
        min-width: 10.45rem;
        padding: 1.05rem 1rem 1.1rem;
        border-radius: 1.75rem;
        touch-action: pan-x;
    }
.cd-week-day-button:hover,
    .cd-week-day-button:focus-visible,
    .cd-week-day-button.is-active,
    .cd-week-day-button[aria-selected="true"] {
        transform: translateY(-1px);
        box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.16), 0 16px 24px rgba(16, 185, 129, 0.12);
    }
.cd-week-day-button::after {
        inset: -7px;
        border-radius: 2rem;
        filter: blur(10px);
        opacity: 0;
        transition: opacity 220ms ease, box-shadow 220ms ease;
    }
.cd-week-day-button:hover::after,
    .cd-week-day-button:focus-visible::after,
    .cd-week-day-button.is-active::after,
    .cd-week-day-button[aria-selected="true"]::after {
        opacity: 1;
        box-shadow: 0 10px 26px rgba(16, 185, 129, 0.12);
    }
.cd-week-day-button__top {
        align-items: center;
    }
.cd-week-day-button__date {
        margin-top: 0.6rem;
        font-size: 0.88rem;
    }
.cd-week-day-button__stats {
        margin-top: 0.8rem;
        gap: 0.18rem;
    }
.cd-week-day-button__stats span {
        display: block;
        padding-top: 0.45rem;
        border-top: 1px solid rgba(15, 23, 42, 0.06);
    }
.cd-week-day-button__state {
        margin-top: 0.8rem;
    }
.cd-mini-badge {
        min-width: 5.5rem;
        justify-content: center;
        padding: 0.42rem 0.65rem;
        font-size: 0.65rem;
    }
.cd-summary-card {
        overflow: hidden;
    }
.cd-info-pop__button svg {
        width: 1rem;
        height: 1rem;
    }
.cd-info-pop__panel {
        z-index: 30;
    }
html.dark .cd-panel,
    html.dark .cd-rail-card,
    html.dark .cd-action-card,
    html.dark .cd-upcoming-card,
    html.dark .cd-context-panel,
    html.dark .cd-week-preview,
    html.dark .cd-summary-card,
    html.dark .cd-goal-card,
    html.dark .cd-streak-card,
    html.dark .cd-link-tile,
    html.dark .cd-primary-cta,
    html.dark .cd-trainer-banner-shell,
    html.dark .cd-reveal-panel,
    html.dark .cd-empty-state,
    html.dark .cd-week-day-button,
    html.dark .cd-identity-stat {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
        background:
                linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(17, 24, 39, 0.92));
        box-shadow: 0 20px 34px rgba(2, 6, 23, 0.45);
}
html.dark .cd-panel__title,
    html.dark .cd-rail-card__title,
    html.dark .cd-primary-cta__title,
    html.dark .cd-primary-cta__headline,
    html.dark .cd-action-card__title,
    html.dark .cd-action-card__highlight,
    html.dark .cd-upcoming-card__title,
    html.dark .cd-context-panel__title,
    html.dark .cd-week-preview__title,
    html.dark .cd-goal-card__title,
    html.dark .cd-identity-stat__value,
    html.dark .cd-streak-card__value,
    html.dark .cd-empty-state__title,
    html.dark .cd-link-tile__title,
    html.dark .cd-week-day-button__label,
    html.dark .cd-goal-section__title,
    html.dark .cd-activity-item__title,
    html.dark .cd-action-card__countdown-value {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
html.dark .cd-panel__copy,
    html.dark .cd-rail-card__copy,
    html.dark .cd-primary-cta__copy,
    html.dark .cd-primary-cta__subhead,
    html.dark .cd-action-card__text,
    html.dark .cd-context-panel__body,
    html.dark .cd-summary-card__copy,
    html.dark .cd-profile-card__bio,
    html.dark .cd-empty-state__copy,
    html.dark .cd-link-tile__text,
    html.dark .cd-week-preview-item,
    html.dark .cd-upcoming-card__text,
    html.dark .cd-activity-item__copy,
    html.dark .cd-trainer-message__body,
    html.dark .cd-info-pop__panel {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
html.dark .cd-kicker,
    html.dark .cd-action-card__eyebrow,
    html.dark .cd-upcoming-card__eyebrow,
    html.dark .cd-context-panel__label,
    html.dark .cd-summary-card__label,
    html.dark .cd-goal-card__meta,
    html.dark .cd-week-day-button__state {
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
html.dark .cd-stat-chip,
    html.dark .cd-button-chip,
    html.dark .cd-status-pill,
    html.dark .cd-meta-pill,
    html.dark .cd-mini-badge,
    html.dark .cd-goal-card__status,
    html.dark .cd-goal-section,
    html.dark .cd-trainer-message-box,
    html.dark .cd-activity-item,
    html.dark .cd-info-pop__button,
    html.dark .cd-trainer-message,
    html.dark .cd-trainer-message-form__input {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    background-color: rgb(15 23 42 / 0.8);
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
html.dark .cd-action-card__metrics--hero,
    html.dark .cd-action-card__support {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    background-color: rgb(15 23 42 / 0.7);
}
html.dark .cd-info-pop__panel {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
}
html.dark .cd-button-chip:hover,
    html.dark .cd-button-chip:focus-visible {
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
html.dark .cd-button-chip--solid {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
html.dark .cd-primary-cta__icon,
    html.dark .cd-action-card__icon,
    html.dark .cd-link-tile__icon {
    background-color: rgb(6 78 59 / 0.5);
    --tw-text-opacity: 1;
    color: rgb(167 243 208 / var(--tw-text-opacity, 1));
}
html.dark .cd-progress-bar {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
html.dark .cd-action-card.is-missed {
        background:
                radial-gradient(circle at top right, rgba(245, 158, 11, 0.2), transparent 36%),
                linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(31, 41, 55, 0.92));
    }
html.dark [data-dashboard-role="CLIENT"][data-dashboard-immersive="true"][data-dashboard-period="night"] {
        --cd-immersive-line: linear-gradient(90deg, rgba(96, 165, 250, 0), rgba(96, 165, 250, 0.42), rgba(52, 211, 153, 0.28), rgba(52, 211, 153, 0));
    }
html.dark .cd-panel::before,
    html.dark .cd-rail-card::before,
    html.dark .cd-primary-cta::before,
    html.dark .cd-action-card::before,
    html.dark .cd-upcoming-card::before,
    html.dark .cd-context-panel::before,
    html.dark .cd-week-preview::before,
    html.dark .cd-summary-card::before,
    html.dark .cd-goal-card::before,
    html.dark .cd-streak-card::before,
    html.dark .cd-link-tile::before,
    html.dark .cd-week-day-button::before,
    html.dark .cd-trainer-banner-shell::before,
    html.dark .cd-reveal-panel::before {
        opacity: 0.62;
    }
html.dark .cd-switch {
        background: rgba(255, 255, 255, 0.08);
    }
html.dark .cd-switch__track {
        background: linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.9));
    }
html.dark .cd-switch__thumb {
        background: linear-gradient(135deg, rgb(226 232 240), rgb(148 163 184));
    }
html.dark .cd-action-card__kind {
        border-color: rgba(52, 211, 153, 0.24);
        background: rgba(6, 78, 59, 0.42);
        color: rgb(167 243 208);
    }
html.dark .cd-action-card__cta,
    html.dark .cd-link-tile__arrow {
        border-color: rgba(52, 211, 153, 0.18);
        background: rgba(15, 23, 42, 0.92);
        color: rgb(241 245 249);
    }
html.dark .cd-action-card:hover .cd-action-card__cta,
    html.dark .cd-action-card:focus-visible .cd-action-card__cta {
        color: rgb(110 231 183);
    }
html.dark .cd-week-preview__lists > div,
    html.dark .cd-week-day-button__stats span,
    html.dark .cd-action-card__footer,
    html.dark .cd-upcoming-card__footer {
        border-color: rgba(148, 163, 184, 0.16);
    }
html.dark .cd-panel__header,
    html.dark .cd-rail-card__header,
    html.dark .cd-primary-cta__top,
    html.dark .cd-week-preview__top,
    html.dark .cd-week-preview__lists > div {
        border-color: rgba(148, 163, 184, 0.16);
    }
html.dark .cd-week-strip-shell,
    html.dark .cd-week-preview-item {
        border-color: rgba(148, 163, 184, 0.16);
        background: rgba(15, 23, 42, 0.72);
    }
html.dark .cd-week-preview-item__title,
    html.dark .cd-ambience-card__clock,
    html.dark .cd-ambience-card__weather,
    html.dark .cd-context-panel__meta,
    html.dark .cd-ambience-card__summary,
    html.dark .cd-ambience-timeline__time,
    html.dark .cd-ambience-timeline__condition,
    html.dark .cd-ambience-graph__time,
    html.dark .cd-ambience-graph__meta {
        color: rgb(226 232 240);
    }
html.dark .cd-ambience-card__visual,
    html.dark .cd-ambience-card__controls,
    html.dark .cd-action-card__metrics--hero,
    html.dark .cd-action-card__support {
        background: rgba(15, 23, 42, 0.78);
    }
html.dark .cd-action-hub__route {
        border-color: rgba(148, 163, 184, 0.18);
        background: rgba(15, 23, 42, 0.72);
    }
html.dark .cd-action-hub__route-copy {
        color: rgb(203 213 225);
    }
html.dark .cd-ambience-card__location-indicator,
    html.dark .cd-ambience-timeline__item,
    html.dark .cd-ambience-graph {
        background: rgba(15, 23, 42, 0.78);
        border-color: rgba(148, 163, 184, 0.18);
    }
html.dark .cd-ambience-card__permission {
        background: rgba(120, 53, 15, 0.28);
        border-color: rgba(245, 158, 11, 0.22);
        color: rgb(253 230 138);
    }
html.dark .cd-ambience-timeline__temp,
    html.dark .cd-ambience-graph__temp {
        color: rgb(248 250 252);
    }
html.dark .cd-activity-item__action {
        border-color: rgba(148, 163, 184, 0.2);
        background: rgba(15, 23, 42, 0.92);
        color: rgb(226 232 240);
    }
html.dark .cd-link-tile__arrow {
        box-shadow: 0 10px 18px rgba(2, 6, 23, 0.24);
    }
@keyframes cd-rain-shift {
        from {
            background-position: 0 0;
        }
        to {
            background-position: -120px 220px;
        }
    }
@keyframes cd-snow-drift {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(18px);
        }
    }
@media (prefers-reduced-motion: reduce) {
        .cd-panel,
        .cd-rail-card,
        .cd-link-tile,
        .cd-button-chip,
        .cd-primary-cta,
        .cd-action-card,
        .cd-action-slider__track,
        .cd-week-day-button,
        .cd-progress-bar__fill,
        .cd-action-view {
            transition: none !important;
        }

        .cd-link-tile:hover,
        .cd-button-chip:hover,
        .cd-primary-cta:hover,
        .cd-action-card:hover,
        .cd-week-day-button:hover {
            transform: none !important;
        }
    }
:root {
    --chat-fab-size: clamp(3.25rem, 2.9rem + 1vw, 4rem);
    --chat-fab-offset: clamp(0.9rem, 0.6rem + 0.8vw, 1.5rem);
  }
/* === FLOATING CHAT BUTTON === */
.chat-fab-premium {
    /* Position - Fixed bottom-right with consistent margins */
    position: fixed;
    z-index: 10001;
    bottom: var(--chat-fab-offset);
    right: var(--chat-fab-offset);
    
    /* Size - Slightly larger than before */
    height: var(--chat-fab-size);
    width: var(--chat-fab-size);
    
    /* Shape - Fully circular */
    
    border-radius: 9999px;
    
    /* Base styling - Clean white with soft shadow */
    
    --tw-bg-opacity: 1;
    
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    
    border-width: 1px;
    
    border-color: rgb(226 232 240 / 0.6);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
    
    /* Content centering */
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    overflow: visible;
    
    /* Smooth transitions */
    
    transition-property: all;
    
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    
    transition-duration: 300ms;
    
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    
    /* Dark mode */
  }
.chat-fab-premium:is(.dark *) {
    border-color: rgb(51 65 85 / 0.6);
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.chat-fab-pulse-ring {
    position: absolute;
    inset: 0px;
    border-radius: 9999px;
    border: 2px solid rgba(16, 185, 129, 0.22);
    animation: chat-fab-pulse 2.4s ease-out infinite;
}
.chat-fab-premium:hover {
    /* Lift upward */
    transform: translateY(-4px);
    
    /* Emerald glow ring */
    box-shadow: 
      0 6px 24px rgba(0, 0, 0, 0.12), 
      0 4px 12px rgba(0, 0, 0, 0.08),
      0 0 0 4px rgba(16, 185, 129, 0.15);
    
    /* Subtle scale increase */
    transform: translateY(-4px) scale(1.05);
    border-color: rgb(16 185 129 / 0.4);
  }
.chat-fab-premium:active {
    /* Scale down micro interaction */
    transform: translateY(-2px) scale(0.97);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
.chat-fab-icon {
    position: relative;
    z-index: 2;
    border-radius: 9999px;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
}
.chat-fab-avatar {
    height: calc(var(--chat-fab-size) - 1.25rem);
    width: calc(var(--chat-fab-size) - 1.25rem);
    border-radius: 9999px;
    -o-object-fit: cover;
       object-fit: cover;
  }
/* Notification dot */
.chat-fab-notification-dot {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    height: 0.75rem;
    width: 0.75rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}

.color-blind .chat-fab-notification-dot {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
.chat-fab-notification-dot {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    z-index: 10003;
  }
.chat-fab-notification-dot.active {
    opacity: 1;
}
.chat-fab-notification-dot.\!active {
    opacity: 1;
}
/* === CHAT PANEL CONTAINER === */
.chat-panel-premium {
    /* Position - Bottom-right with proper spacing */
    position: fixed;
    z-index: 9998;
    bottom: calc(var(--chat-fab-offset) + var(--chat-fab-size) + 0.75rem);
    right: var(--chat-fab-offset);
    
    /* Size - Reduced max width for readability */
    
    width: 100%;
    max-width: min(24rem, calc(100vw - 2rem));
    height: clamp(22rem, 76vh, calc(100dvh - var(--chat-fab-size) - 2.25rem));
    max-height: calc(100dvh - var(--chat-fab-size) - 2.25rem);
    min-height: 20rem;
    
    /* Shape - Rounded corners */
    
    border-radius: 1rem;
  }
#workout-popup .chat-panel-premium {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.chat-panel-premium {
    
    /* Background - White with subtle border */
    
    --tw-bg-opacity: 1;
    
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    
    border-width: 1px;
    
    border-color: rgb(226 232 240 / 0.8);
    
    /* Elevation - Soft shadow for floating console feel */
    box-shadow: 
      0 12px 40px rgba(0, 0, 0, 0.08),
      0 4px 16px rgba(0, 0, 0, 0.04);
    
    /* Hide initially */
    
    pointer-events: none;
    
    opacity: 0;
    transform: translateY(12px);
    
    /* Smooth transitions */
    
    transition-property: all;
    
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    
    transition-duration: 300ms;
    
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    
    /* Dark mode */
  }
.chat-panel-premium:is(.dark *) {
    border-color: rgb(51 65 85 / 0.8);
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.chat-panel-premium {

    /* Internal layout */

    display: flex;

    flex-direction: column;
    overflow: hidden;
  }
.chat-panel-premium.open {
    /* Slide up and fade in */
  }
.chat-panel-premium.\!open {
    /* Slide up and fade in */
  }
.chat-panel-premium.open {
    pointer-events: auto;
    opacity: 1;
}
.chat-panel-premium.\!open {
    pointer-events: auto;
    opacity: 1;
}
.chat-panel-premium.open {
    transform: translateY(0);
  }
.chat-panel-premium.\!open {
    transform: translateY(0) !important;
  }
.chat-fab-unread-badge {
    z-index: 10020;
    top: -0.45rem;
    right: -0.45rem;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 10px 20px rgba(244, 63, 94, 0.4);
  }
html.dark .chat-fab-unread-badge {
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.96), 0 10px 20px rgba(244, 63, 94, 0.35);
  }
/* === HEADER SECTION === */
.chat-header-premium {
    /* Spacing - Increased padding */
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    
    /* Layout */
    
    display: flex;
    
    flex-direction: column;
    
    gap: 0.75rem;
  }
body[data-easy-mode="on"] .chat-header-premium {
    gap: 1rem;
}
.chat-header-premium {
    
    /* Separator - Subtle line */
    
    border-bottom-width: 1px;
    
    border-color: rgb(226 232 240 / 0.6);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(15, 23, 42, 0.03));
  }
.chat-header-premium:is(.dark *) {
    border-color: rgb(51 65 85 / 0.6);
}
.chat-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .chat-header-top {
    gap: 1rem;
}
.chat-title-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .chat-title-section {
    gap: 1rem;
}
.chat-badge-premium {
    /* Size */
    height: 2.5rem;
    width: 2.5rem;
    
    /* Shape */
    
    border-radius: 9999px;
    
    /* Styling - Subtle emerald tint */
    
    border-width: 1px;
    
    border-color: rgb(167 243 208 / 0.6);
    
    --tw-bg-opacity: 1;
    
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
    
    /* Content */
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    font-size: 0.875rem;
    
    line-height: 1.25rem;
    
    font-weight: 900;
    
    letter-spacing: 0.025em;
    
    --tw-text-opacity: 1;
    
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
    
    overflow: hidden;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
  }
.week-day-card:has(.chat-badge-premium:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.chat-badge-premium:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.chat-badge-premium:is(.dark *) {
    border-color: rgb(6 95 70 / 0.6);
    background-color: rgb(2 44 34 / 0.4);
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.chat-header-avatar {
    height: 100%;
    width: 100%;
    border-radius: 9999px;
    -o-object-fit: cover;
       object-fit: cover;
}
.chat-title-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.chat-title-main {
    /* Larger and more confident */
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
  }
.chat-title-main:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.chat-title-subtitle {
    /* Reduced weight */
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 400;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
  }
.chat-title-subtitle:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.chat-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .chat-header-actions {
    gap: 0.75rem;
}
.chat-icon-btn-premium {
    /* Size */
    height: 2rem;
    width: 2rem;
    
    /* Shape */
    
    border-radius: 0.75rem;
    
    /* Styling - Minimal border */
    
    border-width: 1px;
    
    border-color: rgb(226 232 240 / 0.6);
    
    background-color: transparent;
    
    --tw-text-opacity: 1;
    
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
    
    /* Layout */
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    /* Transitions */
    
    transition-property: all;
    
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    
    transition-duration: 200ms;
  }
.chat-icon-btn-premium:is(.dark *) {
    border-color: rgb(51 65 85 / 0.6);
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.chat-icon-btn-premium:hover {
    /* Emerald tint on hover */
    border-color: rgb(167 243 208 / 0.6);
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
  }
.color-blind .chat-icon-btn-premium:hover {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.chat-icon-btn-premium:hover {
    transform: translateY(-1px);
  }
.week-day-card:has(.chat-icon-btn-premium:hover:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.chat-icon-btn-premium:hover:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.chat-icon-btn-premium:hover:is(.dark *) {
    border-color: rgb(6 95 70 / 0.6);
    background-color: rgb(2 44 34 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.chat-icon-btn-premium:active {
    transform: translateY(0) scale(0.98);
  }
/* === TABS SECTION === */
.chat-tabs-premium {
    /* Spacing */
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0px;
    padding-bottom: 0px;
    
    /* Layout */
    
    display: flex;
    
    align-items: center;
    
    gap: 1rem;
  }
body[data-easy-mode="on"] .chat-tabs-premium {
    gap: 1.25rem;
}
.chat-tabs-premium {
    
    /* No border - clean separation via spacing */
  }
.chat-tab-btn {
    /* Base styling */
    position: relative;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    border-width: 0px;
    background-color: transparent;
    
    /* Inactive state */
    
    --tw-text-opacity: 1;
    
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
    
    transition-property: all;
    
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    
    transition-duration: 200ms;
  }
.chat-tab-btn:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.chat-tab-btn::after {
    /* Underline indicator */
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 0.125rem;
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
  }

.color-blind .chat-tab-btn::after {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
.chat-tab-btn::after {
    transform-origin: left;
    --tw-scale-x: 0;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.chat-tab-btn:hover {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.chat-tab-btn:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.chat-tab-btn.active {
    /* Active state - Emerald accent */
  }
.chat-tab-btn.\!active {
    /* Active state - Emerald accent */
  }
.chat-tab-btn.active {
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.chat-tab-btn.\!active {
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.chat-tab-btn.active:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.chat-tab-btn.\!active:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.chat-tab-btn.active::after {
    --tw-scale-x: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.chat-tab-btn.\!active::after {
    --tw-scale-x: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
/* === CONVERSATION AREA === */
.chat-panel-content-wrapper {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    min-height: 0;
}
#chatChatView {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    min-height: 0;
}
.chat-conversation-premium {
    /* Spacing */
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    
    /* Layout */
    
    display: flex;
    
    flex-direction: column;
    
    gap: 0.75rem;
  }
body[data-easy-mode="on"] .chat-conversation-premium {
    gap: 1rem;
}
.chat-conversation-premium {
    
    /* Scroll */
    
    overflow-y: auto;
    
    flex: 1 1 0%;
    min-height: 0;
  }
.chat-message-wrapper {
    display: flex;
}
.chat-message-wrapper.user {
    justify-content: flex-end;
}
.chat-message-wrapper.\!user {
    justify-content: flex-end;
}
.chat-message-wrapper.assistant {
    justify-content: flex-start;
}
.chat-message-bubble {
    max-width: 85%;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-radius: 1rem;
}
#workout-popup .chat-message-bubble {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.chat-message-bubble {
    
    /* Increased line-height for readability */
    
    font-size: 0.875rem;
    
    line-height: 1.25rem;
    
    line-height: 1.625;
    
    white-space: pre-wrap;
  }
.chat-message-wrapper.user .chat-message-bubble {
    /* User messages - Dark with white text */
  }
.chat-message-wrapper.\!user .chat-message-bubble {
    /* User messages - Dark with white text */
  }
.chat-message-wrapper.user .chat-message-bubble {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.chat-message-wrapper.\!user .chat-message-bubble {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.chat-message-wrapper.user .chat-message-bubble {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
}
.chat-message-wrapper.\!user .chat-message-bubble {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
}
.chat-message-wrapper.user .chat-message-bubble:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.chat-message-wrapper.\!user .chat-message-bubble:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.chat-message-wrapper.assistant .chat-message-bubble {
    /* AI messages - Minimal background tint */
    background-color: rgb(248 250 252 / 0.8);
    --tw-text-opacity: 1;
    color: rgb(30 41 59 / var(--tw-text-opacity, 1));
    border-width: 1px;
    border-color: rgb(226 232 240 / 0.6);
  }
.chat-message-wrapper.assistant .chat-message-bubble:is(.dark *) {
    border-color: rgb(51 65 85 / 0.6);
    background-color: rgb(30 41 59 / 0.6);
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.chat-message-wrapper.assistant .chat-message-bubble {
    background-image: linear-gradient(135deg, rgba(16, 185, 129, 0.09), rgba(255, 255, 255, 0));
  }
.chat-typing-indicator {
    display: flex;
    justify-content: flex-start;
}
.chat-typing-bubble {
    border-radius: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
#workout-popup .chat-typing-bubble {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.chat-typing-bubble {
    border-width: 1px;
    border-color: rgb(226 232 240 / 0.6);
    background-color: rgb(248 250 252 / 0.8);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-style: italic;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
    
    /* Clean pulsing animation */
    animation: pulse-subtle 2s ease-in-out infinite;
}
.chat-typing-bubble:is(.dark *) {
    border-color: rgb(51 65 85 / 0.6);
    background-color: rgb(30 41 59 / 0.6);
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
@keyframes pulse-subtle {
    0%, 100% {
      opacity: 0.7;
    }
    50% {
      opacity: 1;
    }
  }
/* Notifications view */
.chat-notifications-view {
    flex-direction: column;
    flex: 1 1 0%;
    min-height: 0;
}
/* === MESSAGE INPUT AREA === */
.chat-input-container {
    /* Spacing */
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    
    /* Layout */
    
    display: flex;
    
    align-items: center;
    
    gap: 0.5rem;
  }
body[data-easy-mode="on"] .chat-input-container {
    gap: 0.75rem;
}
.chat-input-container {
    
    /* Separator */
    
    border-top-width: 1px;
    
    border-color: rgb(226 232 240 / 0.6);
  }
.chat-input-container:is(.dark *) {
    border-color: rgb(51 65 85 / 0.6);
}
.chat-input-premium {
    /* Size - Increased height */
    height: 2.5rem;
    flex: 1 1 0%;
    
    /* Shape - Rounded and soft */
    
    border-radius: 0.75rem;
    
    /* Styling - Reduced border weight */
    
    border-width: 1px;
    
    border-color: rgb(226 232 240 / 0.8);
    
    --tw-bg-opacity: 1;
    
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    
    font-size: 0.875rem;
    
    line-height: 1.25rem;
    
    --tw-text-opacity: 1;
    
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
  }
.chat-input-premium::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.chat-input-premium::placeholder {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.chat-input-premium {
    
    /* Padding */
    
    padding-left: 1rem;
    
    padding-right: 1rem;
    
    /* Transitions */
    
    transition-property: all;
    
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    
    transition-duration: 200ms;
    
    /* Remove default focus */
    
    outline: 2px solid transparent;
    
    outline-offset: 2px;
  }
.chat-input-premium:is(.dark *) {
    border-color: rgb(51 65 85 / 0.8);
    --tw-bg-opacity: 1;
    background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.chat-input-premium:is(.dark *)::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.chat-input-premium:is(.dark *)::placeholder {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.chat-input-premium:focus {
    /* Subtle focus ring - Emerald accent */
    border-color: rgb(16 185 129 / 0.6);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08);
  }
.chat-send-btn-premium {
    /* Size - Slightly larger */
    height: 2.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    
    /* Shape - Rounded */
    
    border-radius: 0.75rem;
    
    /* Styling - Emerald primary accent */
    
    border-width: 1px;
    
    border-color: rgb(5 150 105 / 0.2);
    
    --tw-bg-opacity: 1;
    
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
  }

.color-blind .chat-send-btn-premium {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
.chat-send-btn-premium {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    
    /* Layout */
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    /* Transitions */
    
    transition-property: all;
    
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    
    transition-duration: 200ms;
    
    /* Remove outline */
    
    outline: 2px solid transparent;
    
    outline-offset: 2px;
}
.chat-send-btn-premium:hover {
    /* Subtle glow on hover */
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
  }
.color-blind .chat-send-btn-premium:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
.chat-send-btn-premium:hover {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
    
    /* Slight lift */
    transform: translateY(-1px);
  }
.chat-send-btn-premium:active {
    transform: translateY(0) scale(0.98);
  }
.chat-send-btn-premium:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
/* === RESPONSIVE DESIGN === */
@media (max-width: 640px) {
    .chat-fab-premium {
      /* Hide FAB button on mobile - accessible via navbar instead */
    }

    .auth-fields-block.chat-fab-premium {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
        pointer-events: none;
    }

    .profile-phone-country-dropdown.chat-fab-premium {
        display: none;
    }

    #profile-phone-country.chat-fab-premium {
        display: none;
    }
    .chat-fab-premium {
        display: none;
    }
#task-drawer.chat-fab-premium .sm\:w-96,
#workout-drawer.chat-fab-premium .sm\:w-\[28rem\] {
  transform: translateX(24px);
}
.day-tab-panel.chat-fab-premium {
  display: none;
}
.day-tab-panel:not(.chat-fab-premium) {
  animation: sectionEnter 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .day-tab-panel:not(.chat-fab-premium) {
    animation: none;
  }
}
    
    .chat-panel-premium {
      /* Expand nearly full width */
      left: 1rem;
      right: 1rem;
      max-width: calc(100vw - 2rem);
      bottom: 0.75rem;
      height: min(calc(100dvh - 1.5rem), 42rem);
      max-height: calc(100dvh - 1.5rem);
    }
    
    .chat-input-premium,
    .chat-send-btn-premium {
      /* Increase tap targets */
      height: 2.5rem;
    }

    .chat-header-premium {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }

    .chat-tabs-premium {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .chat-tab-btn {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        font-size: 0.75rem;
        line-height: 1rem;
    }

    .chat-icon-btn-premium {
        height: 1.75rem;
        width: 1.75rem;
      font-size: 0.85rem;
    }
  }
/* === ANIMATIONS === */
@keyframes slide-up-fade {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
@keyframes chat-fab-pulse {
    0% {
      transform: scale(1);
      opacity: 0.75;
    }
    70% {
      transform: scale(1.28);
      opacity: 0;
    }
    100% {
      transform: scale(1.28);
      opacity: 0;
    }
  }
/* === NAVIGATION ACTION BUTTONS === */
.chat-nav-actions {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .chat-nav-actions {
    gap: 0.75rem;
}
.chat-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    border-width: 1px;
    border-color: rgb(167 243 208 / 0.8);
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    text-decoration-line: none;
}
.week-day-card:has(.chat-nav-btn:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.chat-nav-btn:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.chat-nav-btn:is(.dark *) {
    border-color: rgb(6 95 70 / 0.6);
    background-color: rgb(2 44 34 / 0.4);
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.chat-nav-btn::before {
    content: '→';
    --tw-text-opacity: 1;
    color: rgb(16 185 129 / var(--tw-text-opacity, 1));
  }

.color-blind .chat-nav-btn::before {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.chat-nav-btn:hover {
    border-color: rgb(110 231 183 / 0.8);
    --tw-bg-opacity: 1;
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(6 95 70 / var(--tw-text-opacity, 1));
    transform: translateX(2px);
}
.chat-nav-btn:hover:is(.dark *) {
    border-color: rgb(4 120 87 / 0.6);
    background-color: rgb(6 78 59 / 0.4);
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
/* === QUICK-ACTION SUGGESTION CHIPS === */
.chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-top-width: 1px;
    border-color: rgb(226 232 240 / 0.6);
}
.chat-suggestions:is(.dark *) {
    border-color: rgb(51 65 85 / 0.6);
}
.chat-suggestion-chip {
    display: inline-flex;
    align-items: center;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    border-width: 1px;
    border-color: rgb(226 232 240 / 0.8);
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    cursor: pointer;
}
.chat-suggestion-chip:is(.dark *) {
    border-color: rgb(51 65 85 / 0.8);
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.chat-suggestion-chip:hover {
    border-color: rgb(167 243 208 / 0.8);
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.chat-suggestion-chip:hover:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.chat-suggestion-chip:hover:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.chat-suggestion-chip:hover:is(.dark *) {
    border-color: rgb(6 95 70 / 0.6);
    background-color: rgb(2 44 34 / 0.4);
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
/* === NOTIFICATION FILTER TABS === */
.chat-notif-filter-btn {
    border-radius: 9999px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    border-width: 1px;
    border-color: rgb(226 232 240 / 0.6);
    background-color: transparent;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.chat-notif-filter-btn:is(.dark *) {
    border-color: rgb(51 65 85 / 0.6);
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.chat-notif-filter-btn:hover {
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.chat-notif-filter-btn:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.chat-notif-filter-btn.active {
    border-color: rgb(110 231 183 / 0.8);
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.chat-notif-filter-btn.\!active {
    border-color: rgb(110 231 183 / 0.8);
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.chat-notif-filter-btn.active:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.chat-notif-filter-btn.active:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.chat-notif-filter-btn.active:is(.dark *) {
    border-color: rgb(4 120 87 / 0.6);
    background-color: rgb(2 44 34 / 0.4);
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.week-day-card:has(.chat-notif-filter-btn.\!active:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.chat-notif-filter-btn.\!active:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.chat-notif-filter-btn.\!active:is(.dark *) {
    border-color: rgb(4 120 87 / 0.6);
    background-color: rgb(2 44 34 / 0.4);
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
:root {
    --qa-fab-size: clamp(3.25rem, 2.9rem + 1vw, 4rem);
    --qa-fab-offset: clamp(0.9rem, 0.6rem + 0.8vw, 1.5rem);
  }
/* === FLOATING ACTION BUTTON === */
.quick-actions-fab-premium {
    /* Position - Fixed bottom-left */
    position: fixed;
    z-index: 9999;
    bottom: var(--qa-fab-offset);
    left: var(--qa-fab-offset);
    
    /* Size - Match chat button */
    height: var(--qa-fab-size);
    width: var(--qa-fab-size);
    
    /* Shape - Fully circular */
    
    border-radius: 9999px;
    
    /* Base styling - Clean white with soft shadow */
    
    --tw-bg-opacity: 1;
    
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    
    border-width: 1px;
    
    border-color: rgb(226 232 240 / 0.6);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
    
    /* Content centering */
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    /* Smooth transitions */
    
    transition-property: all;
    
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    
    transition-duration: 300ms;
    
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    
    /* Dark mode */
  }
.quick-actions-fab-premium:is(.dark *) {
    border-color: rgb(51 65 85 / 0.6);
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.quick-actions-fab-premium:hover {
    /* Lift upward */
    transform: translateY(-4px) scale(1.05);
    
    /* Emerald glow ring */
    box-shadow: 
      0 6px 24px rgba(0, 0, 0, 0.12), 
      0 4px 12px rgba(0, 0, 0, 0.08),
      0 0 0 4px rgba(16, 185, 129, 0.15);
    border-color: rgb(16 185 129 / 0.4);
  }
.quick-actions-fab-premium:active {
    /* Scale down micro interaction */
    transform: translateY(-2px) scale(0.97);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
.quick-actions-fab-icon {
    font-size: clamp(1.2rem, 1rem + 0.45vw, 1.5rem);
    line-height: 1;
  }
/* === QUICK ACTIONS PANEL CONTAINER === */
.quick-actions-panel-premium {
    /* Position - Bottom-left, above the toggle button */
    position: fixed;
    z-index: 9998;
    bottom: calc(var(--qa-fab-offset) + var(--qa-fab-size) + 0.75rem);
    left: var(--qa-fab-offset);
    
    /* Size - Match chat panel */
    
    width: 100%;
    max-width: min(24rem, calc(100vw - 2rem));
    height: clamp(22rem, 78vh, calc(100dvh - var(--qa-fab-size) - 2.25rem));
    max-height: calc(100dvh - var(--qa-fab-size) - 2.25rem);
    min-height: 20rem;
    
    /* Shape - Rounded corners */
    
    border-radius: 1rem;
  }
#workout-popup .quick-actions-panel-premium {
  animation: popup-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.quick-actions-panel-premium {
    
    /* Background - White with subtle border */
    
    --tw-bg-opacity: 1;
    
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    
    border-width: 1px;
    
    border-color: rgb(226 232 240 / 0.8);
    
    /* Elevation - Soft shadow for floating console feel */
    box-shadow: 
      0 12px 40px rgba(0, 0, 0, 0.08),
      0 4px 16px rgba(0, 0, 0, 0.04);
    
    /* Hide initially */
    
    pointer-events: none;
    
    opacity: 0;
    transform: translateY(12px);
    
    /* Smooth transitions */
    
    transition-property: all;
    
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    
    transition-duration: 300ms;
    
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    
    /* Dark mode */
  }
.quick-actions-panel-premium:is(.dark *) {
    border-color: rgb(51 65 85 / 0.8);
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.quick-actions-panel-premium {

    /* Internal layout */

    display: flex;

    flex-direction: column;
    overflow: hidden;
  }
.quick-actions-panel-premium.open {
    /* Slide up and fade in */
  }
.quick-actions-panel-premium.\!open {
    /* Slide up and fade in */
  }
.quick-actions-panel-premium.open {
    pointer-events: auto;
    opacity: 1;
}
.quick-actions-panel-premium.\!open {
    pointer-events: auto;
    opacity: 1;
}
.quick-actions-panel-premium.open {
    transform: translateY(0);
  }
.quick-actions-panel-premium.\!open {
    transform: translateY(0) !important;
  }
/* === HEADER SECTION === */
.quick-actions-header-premium {
    /* Spacing - Increased padding */
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    
    /* Layout */
    
    display: flex;
    
    flex-direction: column;
    
    gap: 0.75rem;
  }
body[data-easy-mode="on"] .quick-actions-header-premium {
    gap: 1rem;
}
.quick-actions-header-premium {
    
    /* Separator - Subtle line */
    
    border-bottom-width: 1px;
    
    border-color: rgb(226 232 240 / 0.6);
  }
.quick-actions-header-premium:is(.dark *) {
    border-color: rgb(51 65 85 / 0.6);
}
.quick-actions-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .quick-actions-header-top {
    gap: 1rem;
}
.quick-actions-title-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
body[data-easy-mode="on"] .quick-actions-title-section {
    gap: 1rem;
}
.quick-actions-badge-premium {
    /* Size */
    height: 2.5rem;
    width: 2.5rem;
    
    /* Shape */
    
    border-radius: 0.75rem;
    
    /* Styling - Subtle emerald tint */
    
    border-width: 1px;
    
    border-color: rgb(167 243 208 / 0.6);
    
    --tw-bg-opacity: 1;
    
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
    
    /* Content */
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    font-size: 1.25rem;
    
    line-height: 1.75rem;
  }
.quick-actions-badge-premium:is(.dark *) {
    border-color: rgb(6 95 70 / 0.6);
    background-color: rgb(2 44 34 / 0.4);
}
.quick-actions-title-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.quick-actions-title-main {
    /* Larger and more confident */
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
  }
.quick-actions-title-main:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.quick-actions-title-subtitle {
    /* Reduced weight */
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 400;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
  }
.quick-actions-title-subtitle:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.quick-actions-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
body[data-easy-mode="on"] .quick-actions-header-actions {
    gap: 0.75rem;
}
.quick-actions-icon-btn-premium {
    /* Size */
    height: 2.25rem;
    width: 2.25rem;
    
    /* Shape */
    
    border-radius: 0.75rem;
    
    /* Styling - Minimal border */
    
    border-width: 1px;
    
    border-color: rgb(226 232 240 / 0.6);
    
    background-color: transparent;
    
    --tw-text-opacity: 1;
    
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
    
    /* Layout */
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    /* Transitions */
    
    transition-property: all;
    
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    
    transition-duration: 200ms;
  }
.quick-actions-icon-btn-premium:is(.dark *) {
    border-color: rgb(51 65 85 / 0.6);
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.quick-actions-icon-btn-premium:hover {
    /* Emerald tint on hover */
    border-color: rgb(167 243 208 / 0.6);
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
  }
.color-blind .quick-actions-icon-btn-premium:hover {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.quick-actions-icon-btn-premium:hover {
    transform: translateY(-1px);
  }
.week-day-card:has(.quick-actions-icon-btn-premium:hover:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.quick-actions-icon-btn-premium:hover:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.quick-actions-icon-btn-premium:hover:is(.dark *) {
    border-color: rgb(6 95 70 / 0.6);
    background-color: rgb(2 44 34 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.quick-actions-icon-btn-premium:active {
    transform: translateY(0) scale(0.98);
  }
/* === CONTENT WRAPPER === */
.quick-actions-content-wrapper {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    min-height: 0;
}
/* === MAIN VIEW (Actions List) === */
.quick-actions-main-view {
    /* Spacing */
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    
    /* Layout */
    
    display: flex;
    
    flex-direction: column;
    
    gap: 0.5rem;
  }
body[data-easy-mode="on"] .quick-actions-main-view {
    gap: 0.75rem;
}
.quick-actions-main-view {
    
    /* Scroll */
    
    overflow-y: auto;
    
    flex: 1 1 0%;
    min-height: 0;
  }
.quick-actions-actions-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
    margin-bottom: 0.5rem;
}
.quick-actions-actions-list-header:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.5rem;
}
body[data-easy-mode="on"] .quick-actions-grid {
    gap: 0.75rem;
}
.quick-actions-grid {
    flex: 1 1 0%;
    overflow-y: auto;
    min-height: 0;
}
/* Empty state */
.quick-actions-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    text-align: center;
}
.quick-actions-empty-icon {
    margin-bottom: 0.75rem;
    font-size: 3rem;
    line-height: 1;
    opacity: 0.3;
}
.quick-actions-empty-text {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.quick-actions-empty-text:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.quick-actions-empty-subtext {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.quick-actions-empty-subtext:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
/* Message banner */
.quick-actions-message {
    margin-top: 0.75rem;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.quick-actions-message:is(.dark *) {
    border-color: rgb(146 64 14 / 0.4);
    background-color: rgb(69 26 3 / 0.4);
    --tw-text-opacity: 1;
    color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
/* === CUSTOMIZE VIEW === */
.quick-actions-customize-view {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    min-height: 0;
}
.quick-actions-search-section {
    border-bottom-width: 1px;
    border-color: rgb(226 232 240 / 0.6);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.quick-actions-search-section:is(.dark *) {
    border-color: rgb(51 65 85 / 0.6);
}
.quick-actions-customize-list-wrapper {
    flex: 1 1 0%;
    overflow: auto;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    min-height: 0;
}
.quick-actions-customize-list > :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));
}
.quick-actions-custom-ai-section {
    border-top-width: 1px;
    border-color: rgb(226 232 240 / 0.6);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.quick-actions-custom-ai-section:is(.dark *) {
    border-color: rgb(51 65 85 / 0.6);
}
.quick-actions-custom-ai-header {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.quick-actions-custom-ai-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.quick-actions-custom-ai-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.quick-actions-custom-ai-limit {
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.quick-actions-custom-ai-limit:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.quick-actions-custom-ai-form > :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));
}
/* === INPUT FIELDS === */
.quick-actions-input-premium {
    /* Size - Increased height */
    height: 2.75rem;
    width: 100%;
    
    /* Shape - Rounded and soft */
    
    border-radius: 0.75rem;
    
    /* Styling - Reduced border weight */
    
    border-width: 1px;
    
    border-color: rgb(226 232 240 / 0.8);
    
    --tw-bg-opacity: 1;
    
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    
    font-size: 0.875rem;
    
    line-height: 1.25rem;
    
    --tw-text-opacity: 1;
    
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
  }
.quick-actions-input-premium::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.quick-actions-input-premium::placeholder {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.quick-actions-input-premium {
    
    /* Padding */
    
    padding-left: 1rem;
    
    padding-right: 1rem;
    
    /* Transitions */
    
    transition-property: all;
    
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    
    transition-duration: 200ms;
    
    /* Remove default focus */
    
    outline: 2px solid transparent;
    
    outline-offset: 2px;
  }
.quick-actions-input-premium:is(.dark *) {
    border-color: rgb(51 65 85 / 0.8);
    --tw-bg-opacity: 1;
    background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.quick-actions-input-premium:is(.dark *)::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.quick-actions-input-premium:is(.dark *)::placeholder {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.quick-actions-input-premium:focus {
    /* Subtle focus ring - Emerald accent */
    border-color: rgb(16 185 129 / 0.6);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08);
  }
.quick-actions-textarea {
    height: auto;
    resize: none;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    min-height: 4.25rem;
    max-height: 7rem;
}
/* === PRIMARY BUTTON === */
.quick-actions-btn-premium {
    /* Size */
    height: 2.5rem;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    
    /* Shape - Rounded */
    
    border-radius: 0.75rem;
    
    /* Styling - Emerald primary accent */
    
    border-width: 1px;
    
    border-color: rgb(5 150 105 / 0.2);
    
    --tw-bg-opacity: 1;
    
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
  }

.color-blind .quick-actions-btn-premium {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
.quick-actions-btn-premium {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    
    /* Layout */
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    /* Transitions */
    
    transition-property: all;
    
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    
    transition-duration: 200ms;
    
    /* Remove outline */
    
    outline: 2px solid transparent;
    
    outline-offset: 2px;
}
.quick-actions-btn-premium:hover {
    /* Subtle glow on hover */
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
  }
.color-blind .quick-actions-btn-premium:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); /* Teal-600 */
}
.quick-actions-btn-premium:hover {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
    
    /* Slight lift */
    transform: translateY(-1px);
  }
.quick-actions-btn-premium:active {
    transform: translateY(0) scale(0.98);
  }
.quick-actions-btn-premium:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
/* === PREMIUM TEXT === */
.quick-actions-premium-text {
    text-align: center;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 300;
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.quick-actions-premium-text:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.quick-actions-premium-highlight {
    --tw-text-opacity: 1;
    color: rgb(16 185 129 / var(--tw-text-opacity, 1));
    text-decoration-line: underline;
}

.color-blind .quick-actions-premium-highlight {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.quick-actions-premium-highlight {
    text-decoration-color: rgba(16, 185, 129, 0.3);
    text-underline-offset: 2px;
  }
/* === RESPONSIVE DESIGN === */
@media (max-width: 640px) {
    .quick-actions-fab-premium {
      /* Hide FAB button on mobile - accessible via navbar instead */
    }

    .auth-fields-block.quick-actions-fab-premium {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
        pointer-events: none;
    }

    .profile-phone-country-dropdown.quick-actions-fab-premium {
        display: none;
    }

    #profile-phone-country.quick-actions-fab-premium {
        display: none;
    }
    .quick-actions-fab-premium {
        display: none;
    }
#task-drawer.quick-actions-fab-premium .sm\:w-96,
#workout-drawer.quick-actions-fab-premium .sm\:w-\[28rem\] {
  transform: translateX(24px);
}
.day-tab-panel.quick-actions-fab-premium {
  display: none;
}
.day-tab-panel:not(.quick-actions-fab-premium) {
  animation: sectionEnter 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .day-tab-panel:not(.quick-actions-fab-premium) {
    animation: none;
  }
}
    
    .quick-actions-panel-premium {
      /* Expand nearly full width */
      left: 1rem;
      right: 1rem;
      max-width: calc(100vw - 2rem);
      bottom: 0.75rem;
      height: min(calc(100dvh - 1.5rem), 42rem);
      max-height: calc(100dvh - 1.5rem);
    }
    
    .quick-actions-input-premium,
    .quick-actions-btn-premium {
      /* Increase tap targets */
      height: 2.5rem;
    }

    .quick-actions-grid {
        gap: 0.375rem;
    }
  }
/* Medium screens - side by side */
@media (min-width: 641px) and (max-width: 1024px) {
    .quick-actions-fab-premium {
      /* Keep side by side on tablets with proper spacing */
      left: calc(var(--qa-fab-offset) + var(--qa-fab-size) + 0.9rem);
    }

    .quick-actions-panel-premium {
      left: var(--qa-fab-offset);
      max-width: min(22rem, calc(100vw - 2rem));
    }
  }
/* === ANIMATIONS === */
@keyframes quick-actions-slide-up-fade {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* === UTILITY CLASSES === */
.quick-actions-item.dragging {
    opacity: 0.6;
}
.quick-actions-item.\!dragging {
    opacity: 0.6;
}
.quick-actions-handle {
    cursor: grab;
  }
.quick-actions-handle:active {
    cursor: grabbing;
  }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
.pointer-events-none {
    pointer-events: none;
}
.pointer-events-auto {
    pointer-events: auto;
}
.visible {
    visibility: visible;
}
.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-16 {
    bottom: -4rem;
}
.-bottom-40 {
    bottom: -10rem;
}
.-bottom-52 {
    bottom: -13rem;
}
.-bottom-56 {
    bottom: -14rem;
}
.-bottom-6 {
    bottom: -1.5rem;
}
.-left-2\.5 {
    left: -0.625rem;
}
.-left-40 {
    left: -10rem;
}
.-left-52 {
    left: -13rem;
}
.-left-56 {
    left: -14rem;
}
.-left-6 {
    left: -1.5rem;
}
.-right-40 {
    right: -10rem;
}
.-right-48 {
    right: -12rem;
}
.-top-24 {
    top: -6rem;
}
.-top-40 {
    top: -10rem;
}
.-top-44 {
    top: -11rem;
}
.-top-48 {
    top: -12rem;
}
.-top-8 {
    top: -2rem;
}
.bottom-0 {
    bottom: 0px;
}
.bottom-4 {
    bottom: 1rem;
}
.bottom-6 {
    bottom: 1.5rem;
}
.bottom-8 {
    bottom: 2rem;
}
.bottom-\[5rem\] {
    bottom: 5rem;
}
.bottom-full {
    bottom: 100%;
}
.left-0 {
    left: 0px;
}
.left-1\/2 {
    left: 50%;
}
.left-10 {
    left: 2.5rem;
}
.left-12 {
    left: 3rem;
}
.left-3 {
    left: 0.75rem;
}
.left-6 {
    left: 1.5rem;
}
.left-8 {
    left: 2rem;
}
.right-0 {
    right: 0px;
}
.right-16 {
    right: 4rem;
}
.right-2 {
    right: 0.5rem;
}
.right-4 {
    right: 1rem;
}
.right-6 {
    right: 1.5rem;
}
.top-0 {
    top: 0px;
}
.top-1\/2 {
    top: 50%;
}
.top-12 {
    top: 3rem;
}
.top-2 {
    top: 0.5rem;
}
.top-20 {
    top: 5rem;
}
.top-4 {
    top: 1rem;
}
.top-7 {
    top: 1.75rem;
}
.top-8 {
    top: 2rem;
}
.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-40 {
    z-index: 40;
}
.z-50 {
    z-index: 50;
}
.z-\[10000\] {
    z-index: 10000;
}
.z-\[60\] {
    z-index: 60;
}
.z-\[70\] {
    z-index: 70;
}
.z-\[80\] {
    z-index: 80;
}
.order-1 {
    order: 1;
}
.order-2 {
    order: 2;
}
.order-3 {
    order: 3;
}
.col-span-1 {
    grid-column: span 1 / span 1;
}
.col-span-10 {
    grid-column: span 10 / span 10;
}
.col-span-2 {
    grid-column: span 2 / span 2;
}
.col-span-4 {
    grid-column: span 4 / span 4;
}
.m-0 {
    margin: 0px;
}
.mx-1 {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}
.mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.my-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}
.my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}
.my-5 {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}
.\!mb-0 {
    margin-bottom: 0px !important;
}
.-ml-3 {
    margin-left: -0.75rem;
}
.-mt-1 {
    margin-top: -0.25rem;
}
.-mt-10 {
    margin-top: -2.5rem;
}
.-mt-8 {
    margin-top: -2rem;
}
.mb-0 {
    margin-bottom: 0px;
}
.mb-1 {
    margin-bottom: 0.25rem;
}
.mb-1\.5 {
    margin-bottom: 0.375rem;
}
.mb-10 {
    margin-bottom: 2.5rem;
}
.mb-12 {
    margin-bottom: 3rem;
}
.mb-16 {
    margin-bottom: 4rem;
}
.mb-2 {
    margin-bottom: 0.5rem;
}
.mb-20 {
    margin-bottom: 5rem;
}
.mb-3 {
    margin-bottom: 0.75rem;
}
.mb-4 {
    margin-bottom: 1rem;
}
.mb-5 {
    margin-bottom: 1.25rem;
}
.mb-6 {
    margin-bottom: 1.5rem;
}
.mb-8 {
    margin-bottom: 2rem;
}
.ml-1 {
    margin-left: 0.25rem;
}
.ml-1\.5 {
    margin-left: 0.375rem;
}
.ml-2 {
    margin-left: 0.5rem;
}
.ml-3 {
    margin-left: 0.75rem;
}
.ml-4 {
    margin-left: 1rem;
}
.ml-auto {
    margin-left: auto;
}
.mr-0\.5 {
    margin-right: 0.125rem;
}
.mr-1 {
    margin-right: 0.25rem;
}
.mr-1\.5 {
    margin-right: 0.375rem;
}
.mr-2 {
    margin-right: 0.5rem;
}
.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-16 {
    margin-top: 4rem;
}
.mt-2 {
    margin-top: 0.5rem;
}
.mt-20 {
    margin-top: 5rem;
}
.mt-3 {
    margin-top: 0.75rem;
}
.mt-4 {
    margin-top: 1rem;
}
.mt-5 {
    margin-top: 1.25rem;
}
.mt-6 {
    margin-top: 1.5rem;
}
.mt-7 {
    margin-top: 1.75rem;
}
.mt-8 {
    margin-top: 2rem;
}
.mt-auto {
    margin-top: auto;
}
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.\!block {
    display: block !important;
}
.block {
    display: block;
}
.inline-block {
    display: inline-block;
}
.inline {
    display: inline;
}
.flex {
    display: flex;
}
.inline-flex {
    display: inline-flex;
}
.table {
    display: table;
}
.\!grid {
    display: grid !important;
}
.grid {
    display: grid;
}
.contents {
    display: contents;
}
.hidden {
    display: none;
}
.aspect-\[16\/10\] {
    aspect-ratio: 16/10;
}
.aspect-\[4\/3\] {
    aspect-ratio: 4/3;
}
.aspect-video {
    aspect-ratio: 16 / 9;
}
.h-0 {
    height: 0px;
}
.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-28 {
    height: 7rem;
}
.h-3 {
    height: 0.75rem;
}
.h-3\.5 {
    height: 0.875rem;
}
.h-32 {
    height: 8rem;
}
.h-4 {
    height: 1rem;
}
.h-48 {
    height: 12rem;
}
.h-5 {
    height: 1.25rem;
}
.h-6 {
    height: 1.5rem;
}
.h-64 {
    height: 16rem;
}
.h-7 {
    height: 1.75rem;
}
.h-72 {
    height: 18rem;
}
.h-8 {
    height: 2rem;
}
.h-80 {
    height: 20rem;
}
.h-9 {
    height: 2.25rem;
}
.h-\[100\%\] {
    height: 100%;
}
.h-\[28rem\] {
    height: 28rem;
}
.h-\[30\%\] {
    height: 30%;
}
.h-\[30rem\] {
    height: 30rem;
}
.h-\[32rem\] {
    height: 32rem;
}
.h-\[34rem\] {
    height: 34rem;
}
.h-\[40\%\] {
    height: 40%;
}
.h-\[50\%\] {
    height: 50%;
}
.h-\[60\%\] {
    height: 60%;
}
.h-\[70vh\] {
    height: 70vh;
}
.h-\[75\%\] {
    height: 75%;
}
.h-\[85\%\] {
    height: 85%;
}
.h-\[90\%\] {
    height: 90%;
}
.h-\[90dvh\] {
    height: 90dvh;
}
.h-auto {
    height: auto;
}
.h-full {
    height: 100%;
}
.h-px {
    height: 1px;
}
.max-h-56 {
    max-height: 14rem;
}
.max-h-\[24rem\] {
    max-height: 24rem;
}
.max-h-\[32rem\] {
    max-height: 32rem;
}
.max-h-\[500px\] {
    max-height: 500px;
}
.max-h-\[520px\] {
    max-height: 520px;
}
.max-h-\[60vh\] {
    max-height: 60vh;
}
.max-h-\[90dvh\] {
    max-height: 90dvh;
}
.min-h-10 {
    min-height: 2.5rem;
}
.min-h-11 {
    min-height: 2.75rem;
}
.min-h-14 {
    min-height: 3.5rem;
}
.min-h-80 {
    min-height: 20rem;
}
.min-h-\[240px\] {
    min-height: 240px;
}
.min-h-\[60vh\] {
    min-height: 60vh;
}
.min-h-\[620px\] {
    min-height: 620px;
}
.min-h-\[70vh\] {
    min-height: 70vh;
}
.min-h-\[calc\(100vh-5rem\)\] {
    min-height: calc(100vh - 5rem);
}
.min-h-full {
    min-height: 100%;
}
.min-h-screen {
    min-height: 100vh;
}
.w-0\.5 {
    width: 0.125rem;
}
.w-1\.5 {
    width: 0.375rem;
}
.w-1\/5 {
    width: 20%;
}
.w-10 {
    width: 2.5rem;
}
.w-11 {
    width: 2.75rem;
}
.w-12 {
    width: 3rem;
}
.w-14 {
    width: 3.5rem;
}
.w-16 {
    width: 4rem;
}
.w-2 {
    width: 0.5rem;
}
.w-2\.5 {
    width: 0.625rem;
}
.w-2\/3 {
    width: 66.666667%;
}
.w-20 {
    width: 5rem;
}
.w-24 {
    width: 6rem;
}
.w-28 {
    width: 7rem;
}
.w-3 {
    width: 0.75rem;
}
.w-3\.5 {
    width: 0.875rem;
}
.w-3\/4 {
    width: 75%;
}
.w-32 {
    width: 8rem;
}
.w-4 {
    width: 1rem;
}
.w-40 {
    width: 10rem;
}
.w-5 {
    width: 1.25rem;
}
.w-6 {
    width: 1.5rem;
}
.w-64 {
    width: 16rem;
}
.w-7 {
    width: 1.75rem;
}
.w-72 {
    width: 18rem;
}
.w-8 {
    width: 2rem;
}
.w-80 {
    width: 20rem;
}
.w-9 {
    width: 2.25rem;
}
.w-\[22\.5rem\] {
    width: 22.5rem;
}
.w-\[28rem\] {
    width: 28rem;
}
.w-\[30rem\] {
    width: 30rem;
}
.w-\[32rem\] {
    width: 32rem;
}
.w-\[34rem\] {
    width: 34rem;
}
.w-\[min\(92vw\2c 28rem\)\] {
    width: min(92vw, 28rem);
}
.w-auto {
    width: auto;
}
.w-fit {
    width: -moz-fit-content;
    width: fit-content;
}
.w-full {
    width: 100%;
}
.w-max {
    width: -moz-max-content;
    width: max-content;
}
.w-px {
    width: 1px;
}
.min-w-0 {
    min-width: 0px;
}
.min-w-16 {
    min-width: 4rem;
}
.min-w-48 {
    min-width: 12rem;
}
.min-w-5 {
    min-width: 1.25rem;
}
.min-w-64 {
    min-width: 16rem;
}
.min-w-\[1\.25rem\] {
    min-width: 1.25rem;
}
.min-w-\[1200px\] {
    min-width: 1200px;
}
.min-w-\[12rem\] {
    min-width: 12rem;
}
.min-w-\[13rem\] {
    min-width: 13rem;
}
.min-w-\[160px\] {
    min-width: 160px;
}
.min-w-\[220px\] {
    min-width: 220px;
}
.min-w-\[50px\] {
    min-width: 50px;
}
.min-w-full {
    min-width: 100%;
}
.min-w-max {
    min-width: -moz-max-content;
    min-width: max-content;
}
.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-6xl {
    max-width: 72rem;
}
.max-w-72 {
    max-width: 18rem;
}
.max-w-7xl {
    max-width: 80rem;
}
.max-w-\[140px\] {
    max-width: 140px;
}
.max-w-\[42rem\] {
    max-width: 42rem;
}
.max-w-\[60\%\] {
    max-width: 60%;
}
.max-w-\[75\%\] {
    max-width: 75%;
}
.max-w-\[80\%\] {
    max-width: 80%;
}
.max-w-\[calc\(100vw-2rem\)\] {
    max-width: calc(100vw - 2rem);
}
.max-w-full {
    max-width: 100%;
}
.max-w-lg {
    max-width: 32rem;
}
.max-w-md {
    max-width: 28rem;
}
.max-w-screen-xl {
    max-width: 1280px;
}
.max-w-sm {
    max-width: 24rem;
}
.max-w-xl {
    max-width: 36rem;
}
.max-w-xs {
    max-width: 20rem;
}
.flex-1 {
    flex: 1 1 0%;
}
.flex-none {
    flex: none;
}
.flex-shrink {
    flex-shrink: 1;
}
.flex-shrink-0 {
    flex-shrink: 0;
}
.shrink-0 {
    flex-shrink: 0;
}
.flex-grow {
    flex-grow: 1;
}
.grow {
    flex-grow: 1;
}
.border-collapse {
    border-collapse: collapse;
}
.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-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-full {
    --tw-translate-x: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0 {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-1 {
    --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));
}
.translate-y-2 {
    --tw-translate-y: 0.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-3 {
    --tw-translate-y: 0.75rem;
    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-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));
}
.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));
}
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.animate-fade-in {
    animation: fade-in 0.5s ease-out;
}
@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 slide-in {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
.animate-slide-in {
    animation: slide-in 0.3s ease-out;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.animate-spin {
    animation: spin 1s linear infinite;
}
.cursor-default {
    cursor: default;
}
.cursor-move {
    cursor: move;
}
.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-y {
    resize: vertical;
}
.resize {
    resize: both;
}
.list-inside {
    list-style-position: inside;
}
.list-disc {
    list-style-type: disc;
}
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
}
.grid-cols-12 {
    grid-template-columns: repeat(12, 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-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.flex-col {
    flex-direction: column;
}
.flex-col-reverse {
    flex-direction: column-reverse;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-nowrap {
    flex-wrap: nowrap;
}
.place-items-center {
    place-items: center;
}
.items-start {
    align-items: flex-start;
}
.items-end {
    align-items: flex-end;
}
.items-center {
    align-items: center;
}
.items-baseline {
    align-items: baseline;
}
.items-stretch {
    align-items: stretch;
}
.justify-start {
    justify-content: flex-start;
}
.justify-end {
    justify-content: flex-end;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.gap-0 {
    gap: 0px;
}
.gap-0\.5 {
    gap: 0.125rem;
}
.gap-1 {
    gap: 0.25rem;
}
.gap-1\.5 {
    gap: 0.375rem;
}
.gap-10 {
    gap: 2.5rem;
}
.gap-16 {
    gap: 4rem;
}
.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-x-4 {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
}
.gap-x-8 {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
}
.gap-y-1\.5 {
    row-gap: 0.375rem;
}
.gap-y-4 {
    row-gap: 1rem;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-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-y-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.625rem * 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));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(241 245 249 / var(--tw-divide-opacity, 1));
}
.divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-divide-opacity, 1));
}
.divide-slate-200\/70 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(226 232 240 / 0.7);
}
.divide-white\/10 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(255 255 255 / 0.1);
}
.self-start {
    align-self: flex-start;
}
.self-end {
    align-self: flex-end;
}
.justify-self-start {
    justify-self: start;
}
.overflow-auto {
    overflow: auto;
}
.overflow-hidden {
    overflow: hidden;
}
.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;
}
.whitespace-pre-line {
    white-space: pre-line;
}
.whitespace-pre-wrap {
    white-space: pre-wrap;
}
.break-all {
    word-break: break-all;
}
.rounded {
    border-radius: 0.25rem;
}
.rounded-2xl {
    border-radius: 1rem;
}
.rounded-3xl {
    border-radius: 1.5rem;
}
.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-b-xl {
    border-bottom-right-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
}
.rounded-t-2xl {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}
.rounded-t-sm {
    border-top-left-radius: 0.125rem;
    border-top-right-radius: 0.125rem;
}
.rounded-tl-none {
    border-top-left-radius: 0px;
}
.rounded-tr-none {
    border-top-right-radius: 0px;
}
.rounded-tr-xl {
    border-top-right-radius: 0.75rem;
}
.border {
    border-width: 1px;
}
.border-2 {
    border-width: 2px;
}
.border-b {
    border-bottom-width: 1px;
}
.border-l {
    border-left-width: 1px;
}
.border-l-2 {
    border-left-width: 2px;
}
.border-l-4 {
    border-left-width: 4px;
}
.border-r {
    border-right-width: 1px;
}
.border-t {
    border-top-width: 1px;
}
.border-dashed {
    border-style: dashed;
}
.border-amber-200 {
    --tw-border-opacity: 1;
    border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-amber-200\/30 {
    border-color: rgb(253 230 138 / 0.3);
}
.border-amber-200\/40 {
    border-color: rgb(253 230 138 / 0.4);
}
.border-amber-200\/60 {
    border-color: rgb(253 230 138 / 0.6);
}
.border-amber-300 {
    --tw-border-opacity: 1;
    border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}
.border-amber-300\/50 {
    border-color: rgb(252 211 77 / 0.5);
}
.border-amber-300\/70 {
    border-color: rgb(252 211 77 / 0.7);
}
.border-amber-300\/80 {
    border-color: rgb(252 211 77 / 0.8);
}
.border-amber-400\/30 {
    border-color: rgb(251 191 36 / 0.3);
}
.border-amber-400\/50 {
    border-color: rgb(251 191 36 / 0.5);
}
.border-amber-500\/30 {
    border-color: rgb(245 158 11 / 0.3);
}
.border-amber-500\/50 {
    border-color: rgb(245 158 11 / 0.5);
}
.border-blue-200 {
    --tw-border-opacity: 1;
    border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-blue-300 {
    --tw-border-opacity: 1;
    border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.border-blue-400\/30 {
    border-color: rgb(96 165 250 / 0.3);
}
.border-cyber-700 {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
.border-cyber-800\/70 {
    border-color: rgb(30 41 59 / 0.7);
}
.border-emerald-100 {
    --tw-border-opacity: 1;
    border-color: rgb(209 250 229 / var(--tw-border-opacity, 1));
}
.border-emerald-200 {
    --tw-border-opacity: 1;
    border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}
.border-emerald-200\/70 {
    border-color: rgb(167 243 208 / 0.7);
}
.border-emerald-200\/75 {
    border-color: rgb(167 243 208 / 0.75);
}
.border-emerald-200\/80 {
    border-color: rgb(167 243 208 / 0.8);
}
.border-emerald-300 {
    --tw-border-opacity: 1;
    border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}
.border-emerald-300\/50 {
    border-color: rgb(110 231 183 / 0.5);
}
.border-emerald-300\/60 {
    border-color: rgb(110 231 183 / 0.6);
}
.border-emerald-300\/70 {
    border-color: rgb(110 231 183 / 0.7);
}
.border-emerald-400 {
    --tw-border-opacity: 1;
    border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}
.border-emerald-400\/30 {
    border-color: rgb(52 211 153 / 0.3);
}
.border-emerald-400\/40 {
    border-color: rgb(52 211 153 / 0.4);
}
.border-emerald-400\/50 {
    border-color: rgb(52 211 153 / 0.5);
}
.border-emerald-500 {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.border-emerald-500\/30 {
    border-color: rgb(16 185 129 / 0.3);
}
.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-green-200 {
    --tw-border-opacity: 1;
    border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}
.border-indigo-200 {
    --tw-border-opacity: 1;
    border-color: rgb(199 210 254 / var(--tw-border-opacity, 1));
}
.border-indigo-500\/30 {
    border-color: rgb(99 102 241 / 0.3);
}
.border-neon-cyan {
    --tw-border-opacity: 1;
    border-color: rgb(125 211 252 / var(--tw-border-opacity, 1));
}
.border-neon-cyan\/30 {
    border-color: rgb(125 211 252 / 0.3);
}
.border-neon-cyan\/40 {
    border-color: rgb(125 211 252 / 0.4);
}
.border-neon-green\/30 {
    border-color: rgb(16 185 129 / 0.3);
}
.border-neon-green\/40 {
    border-color: rgb(16 185 129 / 0.4);
}
.border-neon-purple {
    --tw-border-opacity: 1;
    border-color: rgb(139 92 246 / var(--tw-border-opacity, 1));
}
.border-neon-purple\/30 {
    border-color: rgb(139 92 246 / 0.3);
}
.border-neon-purple\/40 {
    border-color: rgb(139 92 246 / 0.4);
}
.border-orange-200 {
    --tw-border-opacity: 1;
    border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));
}
.border-orange-500\/30 {
    border-color: rgb(249 115 22 / 0.3);
}
.border-purple-200 {
    --tw-border-opacity: 1;
    border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));
}
.border-red-200 {
    --tw-border-opacity: 1;
    border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-red-300 {
    --tw-border-opacity: 1;
    border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}
.border-red-500\/30 {
    border-color: rgb(239 68 68 / 0.3);
}
.border-red-500\/40 {
    border-color: rgb(239 68 68 / 0.4);
}
.border-red-500\/50 {
    border-color: rgb(239 68 68 / 0.5);
}
.border-red-700\/50 {
    border-color: rgb(185 28 28 / 0.5);
}
.border-rose-200 {
    --tw-border-opacity: 1;
    border-color: rgb(254 205 211 / var(--tw-border-opacity, 1));
}
.border-rose-200\/40 {
    border-color: rgb(254 205 211 / 0.4);
}
.border-rose-300 {
    --tw-border-opacity: 1;
    border-color: rgb(253 164 175 / var(--tw-border-opacity, 1));
}
.border-rose-400\/50 {
    border-color: rgb(251 113 133 / 0.5);
}
.border-sky-500\/30 {
    border-color: rgb(14 165 233 / 0.3);
}
.border-slate-100 {
    --tw-border-opacity: 1;
    border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
}
.border-slate-200 {
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}
.border-slate-200\/50 {
    border-color: rgb(226 232 240 / 0.5);
}
.border-slate-200\/60 {
    border-color: rgb(226 232 240 / 0.6);
}
.border-slate-200\/70 {
    border-color: rgb(226 232 240 / 0.7);
}
.border-slate-200\/80 {
    border-color: rgb(226 232 240 / 0.8);
}
.border-slate-200\/90 {
    border-color: rgb(226 232 240 / 0.9);
}
.border-slate-300 {
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.border-slate-300\/80 {
    border-color: rgb(203 213 225 / 0.8);
}
.border-slate-400 {
    --tw-border-opacity: 1;
    border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
}
.border-slate-400\/30 {
    border-color: rgb(148 163 184 / 0.3);
}
.border-slate-50 {
    --tw-border-opacity: 1;
    border-color: rgb(248 250 252 / var(--tw-border-opacity, 1));
}
.border-slate-600 {
    --tw-border-opacity: 1;
    border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}
.border-slate-700 {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
.border-slate-700\/30 {
    border-color: rgb(51 65 85 / 0.3);
}
.border-slate-700\/40 {
    border-color: rgb(51 65 85 / 0.4);
}
.border-slate-700\/50 {
    border-color: rgb(51 65 85 / 0.5);
}
.border-slate-900 {
    --tw-border-opacity: 1;
    border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
}
.border-transparent {
    border-color: transparent;
}
.border-violet-100 {
    --tw-border-opacity: 1;
    border-color: rgb(237 233 254 / var(--tw-border-opacity, 1));
}
.border-violet-400\/50 {
    border-color: rgb(167 139 250 / 0.5);
}
.border-violet-500\/30 {
    border-color: rgb(139 92 246 / 0.3);
}
.border-white {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-white\/10 {
    border-color: rgb(255 255 255 / 0.1);
}
.border-white\/15 {
    border-color: rgb(255 255 255 / 0.15);
}
.border-white\/20 {
    border-color: rgb(255 255 255 / 0.2);
}
.border-white\/50 {
    border-color: rgb(255 255 255 / 0.5);
}
.border-yellow-200 {
    --tw-border-opacity: 1;
    border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
}
.border-l-amber-500 {
    --tw-border-opacity: 1;
    border-left-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}
.border-l-blue-500 {
    --tw-border-opacity: 1;
    border-left-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-l-emerald-500 {
    --tw-border-opacity: 1;
    border-left-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.border-l-green-500 {
    --tw-border-opacity: 1;
    border-left-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}
.border-l-purple-400 {
    --tw-border-opacity: 1;
    border-left-color: rgb(192 132 252 / var(--tw-border-opacity, 1));
}
.border-l-red-500 {
    --tw-border-opacity: 1;
    border-left-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-t-transparent {
    border-top-color: transparent;
}
.bg-amber-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-100\/30 {
    background-color: rgb(254 243 199 / 0.3);
}
.bg-amber-100\/70 {
    background-color: rgb(254 243 199 / 0.7);
}
.bg-amber-100\/80 {
    background-color: rgb(254 243 199 / 0.8);
}
.bg-amber-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.bg-amber-400\/10 {
    background-color: rgb(251 191 36 / 0.1);
}
.bg-amber-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-amber-50\/50 {
    background-color: rgb(255 251 235 / 0.5);
}
.bg-amber-50\/60 {
    background-color: rgb(255 251 235 / 0.6);
}
.bg-amber-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-amber-500\/10 {
    background-color: rgb(245 158 11 / 0.1);
}
.bg-amber-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.bg-amber-900\/80 {
    background-color: rgb(120 53 15 / 0.8);
}
.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.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-blue-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}
.bg-blue-400\/10 {
    background-color: rgb(96 165 250 / 0.1);
}
.bg-blue-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-50\/60 {
    background-color: rgb(239 246 255 / 0.6);
}
.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-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-cyan-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(34 211 238 / var(--tw-bg-opacity, 1));
}
.bg-cyber-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.bg-cyber-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.bg-cyber-900\/95 {
    background-color: rgb(15 23 42 / 0.95);
}
.bg-emerald-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.bg-emerald-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));
}
.bg-emerald-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(110 231 183 / var(--tw-bg-opacity, 1));
}
.bg-emerald-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.bg-emerald-400\/10 {
    background-color: rgb(52 211 153 / 0.1);
}
.bg-emerald-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50\/40 {
    background-color: rgb(236 253 245 / 0.4);
}
.bg-emerald-50\/50 {
    background-color: rgb(236 253 245 / 0.5);
}
.bg-emerald-50\/80 {
    background-color: rgb(236 253 245 / 0.8);
}
.bg-emerald-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500\/10 {
    background-color: rgb(16 185 129 / 0.1);
}
.bg-emerald-500\/15 {
    background-color: rgb(16 185 129 / 0.15);
}
.bg-emerald-500\/25 {
    background-color: rgb(16 185 129 / 0.25);
}
.bg-emerald-500\/5 {
    background-color: rgb(16 185 129 / 0.05);
}
.bg-emerald-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-emerald-900\/30 {
    background-color: rgb(6 78 59 / 0.3);
}
.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-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-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(240 253 244 / 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-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-indigo-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.bg-indigo-50\/70 {
    background-color: rgb(238 242 255 / 0.7);
}
.bg-indigo-500\/10 {
    background-color: rgb(99 102 241 / 0.1);
}
.bg-indigo-500\/5 {
    background-color: rgb(99 102 241 / 0.05);
}
.bg-neon-cyan {
    --tw-bg-opacity: 1;
    background-color: rgb(125 211 252 / var(--tw-bg-opacity, 1));
}
.bg-neon-cyan\/10 {
    background-color: rgb(125 211 252 / 0.1);
}
.bg-neon-green {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-neon-green\/10 {
    background-color: rgb(16 185 129 / 0.1);
}
.bg-neon-green\/20 {
    background-color: rgb(16 185 129 / 0.2);
}
.bg-neon-purple {
    --tw-bg-opacity: 1;
    background-color: rgb(139 92 246 / var(--tw-bg-opacity, 1));
}
.bg-neon-purple\/10 {
    background-color: rgb(139 92 246 / 0.1);
}
.bg-orange-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}
.bg-orange-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));
}
.bg-orange-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}
.bg-orange-500\/5 {
    background-color: rgb(249 115 22 / 0.05);
}
.bg-orange-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}
.bg-pink-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(244 114 182 / var(--tw-bg-opacity, 1));
}
.bg-purple-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(192 132 252 / var(--tw-bg-opacity, 1));
}
.bg-purple-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(147 51 234 / var(--tw-bg-opacity, 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-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-red-900\/40 {
    background-color: rgb(127 29 29 / 0.4);
}
.bg-red-900\/80 {
    background-color: rgb(127 29 29 / 0.8);
}
.bg-rose-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}
.bg-rose-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(251 113 133 / var(--tw-bg-opacity, 1));
}
.bg-rose-400\/10 {
    background-color: rgb(251 113 133 / 0.1);
}
.bg-rose-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}
.bg-rose-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
}
.bg-rose-500\/10 {
    background-color: rgb(244 63 94 / 0.1);
}
.bg-rose-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1));
}
.bg-sky-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(56 189 248 / var(--tw-bg-opacity, 1));
}
.bg-sky-400\/10 {
    background-color: rgb(56 189 248 / 0.1);
}
.bg-sky-500\/10 {
    background-color: rgb(14 165 233 / 0.1);
}
.bg-sky-500\/5 {
    background-color: rgb(14 165 233 / 0.05);
}
.bg-slate-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.bg-slate-100\/80 {
    background-color: rgb(241 245 249 / 0.8);
}
.bg-slate-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.bg-slate-200\/70 {
    background-color: rgb(226 232 240 / 0.7);
}
.bg-slate-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}
.bg-slate-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}
.bg-slate-400\/10 {
    background-color: rgb(148 163 184 / 0.1);
}
.bg-slate-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.bg-slate-50\/30 {
    background-color: rgb(248 250 252 / 0.3);
}
.bg-slate-50\/60 {
    background-color: rgb(248 250 252 / 0.6);
}
.bg-slate-50\/70 {
    background-color: rgb(248 250 252 / 0.7);
}
.bg-slate-50\/80 {
    background-color: rgb(248 250 252 / 0.8);
}
.bg-slate-500\/10 {
    background-color: rgb(100 116 139 / 0.1);
}
.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\/40 {
    background-color: rgb(30 41 59 / 0.4);
}
.bg-slate-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.bg-slate-900\/60 {
    background-color: rgb(15 23 42 / 0.6);
}
.bg-slate-900\/95 {
    background-color: rgb(15 23 42 / 0.95);
}
.bg-slate-950\/40 {
    background-color: rgb(2 6 23 / 0.4);
}
.bg-slate-950\/45 {
    background-color: rgb(2 6 23 / 0.45);
}
.bg-slate-950\/70 {
    background-color: rgb(2 6 23 / 0.7);
}
.bg-slate-950\/90 {
    background-color: rgb(2 6 23 / 0.9);
}
.bg-slate-950\/95 {
    background-color: rgb(2 6 23 / 0.95);
}
.bg-transparent {
    background-color: transparent;
}
.bg-violet-400\/10 {
    background-color: rgb(167 139 250 / 0.1);
}
.bg-violet-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(245 243 255 / var(--tw-bg-opacity, 1));
}
.bg-violet-500\/5 {
    background-color: rgb(139 92 246 / 0.05);
}
.bg-violet-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(124 58 237 / var(--tw-bg-opacity, 1));
}
.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
    background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/5 {
    background-color: rgb(255 255 255 / 0.05);
}
.bg-white\/60 {
    background-color: rgb(255 255 255 / 0.6);
}
.bg-white\/70 {
    background-color: rgb(255 255 255 / 0.7);
}
.bg-white\/75 {
    background-color: rgb(255 255 255 / 0.75);
}
.bg-white\/80 {
    background-color: rgb(255 255 255 / 0.8);
}
.bg-white\/90 {
    background-color: rgb(255 255 255 / 0.9);
}
.bg-white\/95 {
    background-color: rgb(255 255 255 / 0.95);
}
.bg-yellow-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.bg-yellow-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));
}
.bg-yellow-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}
.bg-opacity-50 {
    --tw-bg-opacity: 0.5;
}
.bg-\[linear-gradient\(to_right\2c rgba\(148\2c 163\2c 184\2c 0\.18\)_1px\2c transparent_1px\)\2c linear-gradient\(to_bottom\2c rgba\(148\2c 163\2c 184\2c 0\.18\)_1px\2c transparent_1px\)\] {
    background-image: linear-gradient(to right,rgba(148,163,184,0.18) 1px,transparent 1px),linear-gradient(to bottom,rgba(148,163,184,0.18) 1px,transparent 1px);
}
.bg-\[repeating-linear-gradient\(to_bottom\2c rgba\(255\2c 255\2c 255\2c 0\.08\)_0\2c rgba\(255\2c 255\2c 255\2c 0\.08\)_1px\2c transparent_1px\2c transparent_7px\)\] {
    background-image: repeating-linear-gradient(to bottom,rgba(255,255,255,0.08) 0,rgba(255,255,255,0.08) 1px,transparent 1px,transparent 7px);
}
.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-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-amber-300\/30 {
    --tw-gradient-from: rgb(252 211 77 / 0.3) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(252 211 77 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-50 {
    --tw-gradient-from: #eff6ff var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-400 {
    --tw-gradient-from: #34d399 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(52 211 153 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-400\/20 {
    --tw-gradient-from: rgb(52 211 153 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(52 211 153 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-400\/25 {
    --tw-gradient-from: rgb(52 211 153 / 0.25) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(52 211 153 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-50 {
    --tw-gradient-from: #ecfdf5 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(236 253 245 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-50\/90 {
    --tw-gradient-from: rgb(236 253 245 / 0.9) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(236 253 245 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-500\/0 {
    --tw-gradient-from: rgb(16 185 129 / 0) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-500\/10 {
    --tw-gradient-from: rgb(16 185 129 / 0.1) 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-indigo-500 {
    --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-sky-300\/25 {
    --tw-gradient-from: rgb(125 211 252 / 0.25) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(125 211 252 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-sky-500 {
    --tw-gradient-from: #0ea5e9 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(14 165 233 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-slate-100 {
    --tw-gradient-from: #f1f5f9 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(241 245 249 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-slate-300\/25 {
    --tw-gradient-from: rgb(203 213 225 / 0.25) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(203 213 225 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-slate-50 {
    --tw-gradient-from: #f8fafc var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-slate-50\/60 {
    --tw-gradient-from: rgb(248 250 252 / 0.6) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-slate-50\/80 {
    --tw-gradient-from: rgb(248 250 252 / 0.8) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-violet-500\/10 {
    --tw-gradient-from: rgb(139 92 246 / 0.1) 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-white {
    --tw-gradient-from: #fff var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white\/10 {
    --tw-gradient-from: rgb(255 255 255 / 0.1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-amber-50\/55 {
    --tw-gradient-to: rgb(255 251 235 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(255 251 235 / 0.55) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-amber-50\/60 {
    --tw-gradient-to: rgb(255 251 235 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(255 251 235 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-emerald-50\/40 {
    --tw-gradient-to: rgb(236 253 245 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(236 253 245 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-emerald-500 {
    --tw-gradient-to: rgb(16 185 129 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #10b981 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-indigo-500 {
    --tw-gradient-to: rgb(99 102 241 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #6366f1 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-sky-400\/10 {
    --tw-gradient-to: rgb(56 189 248 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(56 189 248 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-sky-500 {
    --tw-gradient-to: rgb(14 165 233 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #0ea5e9 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-white {
    --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-white\/90 {
    --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.9) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-amber-300\/20 {
    --tw-gradient-to: rgb(252 211 77 / 0.2) var(--tw-gradient-to-position);
}
.to-emerald-100\/80 {
    --tw-gradient-to: rgb(209 250 229 / 0.8) var(--tw-gradient-to-position);
}
.to-emerald-50\/70 {
    --tw-gradient-to: rgb(236 253 245 / 0.7) var(--tw-gradient-to-position);
}
.to-emerald-500 {
    --tw-gradient-to: #10b981 var(--tw-gradient-to-position);
}
.to-emerald-500\/0 {
    --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
}
.to-indigo-50 {
    --tw-gradient-to: #eef2ff var(--tw-gradient-to-position);
}
.to-indigo-500\/10 {
    --tw-gradient-to: rgb(99 102 241 / 0.1) var(--tw-gradient-to-position);
}
.to-orange-300\/20 {
    --tw-gradient-to: rgb(253 186 116 / 0.2) var(--tw-gradient-to-position);
}
.to-purple-500 {
    --tw-gradient-to: #a855f7 var(--tw-gradient-to-position);
}
.to-sky-50\/70 {
    --tw-gradient-to: rgb(240 249 255 / 0.7) var(--tw-gradient-to-position);
}
.to-slate-100 {
    --tw-gradient-to: #f1f5f9 var(--tw-gradient-to-position);
}
.to-slate-100\/60 {
    --tw-gradient-to: rgb(241 245 249 / 0.6) var(--tw-gradient-to-position);
}
.to-slate-200 {
    --tw-gradient-to: #e2e8f0 var(--tw-gradient-to-position);
}
.to-slate-300 {
    --tw-gradient-to: #cbd5e1 var(--tw-gradient-to-position);
}
.to-slate-300\/15 {
    --tw-gradient-to: rgb(203 213 225 / 0.15) var(--tw-gradient-to-position);
}
.to-slate-400\/15 {
    --tw-gradient-to: rgb(148 163 184 / 0.15) var(--tw-gradient-to-position);
}
.to-slate-50 {
    --tw-gradient-to: #f8fafc var(--tw-gradient-to-position);
}
.to-teal-50 {
    --tw-gradient-to: #f0fdfa var(--tw-gradient-to-position);
}
.to-transparent {
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.to-white {
    --tw-gradient-to: #fff var(--tw-gradient-to-position);
}
.to-white\/30 {
    --tw-gradient-to: rgb(255 255 255 / 0.3) var(--tw-gradient-to-position);
}
.bg-\[size\:32px_32px\] {
    background-size: 32px 32px;
}
.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-10 {
    padding: 2.5rem;
}
.p-12 {
    padding: 3rem;
}
.p-2 {
    padding: 0.5rem;
}
.p-2\.5 {
    padding: 0.625rem;
}
.p-3 {
    padding: 0.75rem;
}
.p-4 {
    padding: 1rem;
}
.p-5 {
    padding: 1.25rem;
}
.p-6 {
    padding: 1.5rem;
}
.p-7 {
    padding: 1.75rem;
}
.p-8 {
    padding: 2rem;
}
.p-\[1px\] {
    padding: 1px;
}
.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-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
.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-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}
.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}
.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.pb-0 {
    padding-bottom: 0px;
}
.pb-0\.5 {
    padding-bottom: 0.125rem;
}
.pb-16 {
    padding-bottom: 4rem;
}
.pb-2 {
    padding-bottom: 0.5rem;
}
.pb-20 {
    padding-bottom: 5rem;
}
.pb-3 {
    padding-bottom: 0.75rem;
}
.pb-4 {
    padding-bottom: 1rem;
}
.pb-6 {
    padding-bottom: 1.5rem;
}
.pb-8 {
    padding-bottom: 2rem;
}
.pl-10 {
    padding-left: 2.5rem;
}
.pl-3 {
    padding-left: 0.75rem;
}
.pl-4 {
    padding-left: 1rem;
}
.pl-5 {
    padding-left: 1.25rem;
}
.pl-8 {
    padding-left: 2rem;
}
.pl-9 {
    padding-left: 2.25rem;
}
.pr-1 {
    padding-right: 0.25rem;
}
.pr-3 {
    padding-right: 0.75rem;
}
.pr-4 {
    padding-right: 1rem;
}
.pt-0 {
    padding-top: 0px;
}
.pt-1 {
    padding-top: 0.25rem;
}
.pt-16 {
    padding-top: 4rem;
}
.pt-2 {
    padding-top: 0.5rem;
}
.pt-28 {
    padding-top: 7rem;
}
.pt-3 {
    padding-top: 0.75rem;
}
.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-middle {
    vertical-align: middle;
}
.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans {
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.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-\[0\.7rem\] {
    font-size: 0.7rem;
}
.text-\[10px\] {
    font-size: 10px;
}
.text-\[11px\] {
    font-size: 11px;
}
.text-\[8px\] {
    font-size: 8px;
}
.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-bold {
    font-weight: 700;
}
.font-extrabold {
    font-weight: 800;
}
.font-medium {
    font-weight: 500;
}
.font-normal {
    font-weight: 400;
}
.font-semibold {
    font-weight: 600;
}
.uppercase {
    text-transform: uppercase;
}
.capitalize {
    text-transform: capitalize;
}
.italic {
    font-style: italic;
}
.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-5 {
    line-height: 1.25rem;
}
.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-snug {
    line-height: 1.375;
}
.leading-tight {
    line-height: 1.25;
}
.tracking-\[0\.14em\] {
    letter-spacing: 0.14em;
}
.tracking-\[0\.15em\] {
    letter-spacing: 0.15em;
}
.tracking-\[0\.16em\] {
    letter-spacing: 0.16em;
}
.tracking-\[0\.18em\] {
    letter-spacing: 0.18em;
}
.tracking-\[0\.2em\] {
    letter-spacing: 0.2em;
}
.tracking-\[0\.35em\] {
    letter-spacing: 0.35em;
}
.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-amber-100 {
    --tw-text-opacity: 1;
    color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}
.text-amber-100\/80 {
    color: rgb(254 243 199 / 0.8);
}
.text-amber-200 {
    --tw-text-opacity: 1;
    color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.text-amber-300 {
    --tw-text-opacity: 1;
    color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.text-amber-400 {
    --tw-text-opacity: 1;
    color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-amber-500 {
    --tw-text-opacity: 1;
    color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.text-amber-600 {
    --tw-text-opacity: 1;
    color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-amber-700 {
    --tw-text-opacity: 1;
    color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-amber-800 {
    --tw-text-opacity: 1;
    color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-amber-900 {
    --tw-text-opacity: 1;
    color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.text-amber-900\/70 {
    color: rgb(120 53 15 / 0.7);
}
.text-amber-900\/80 {
    color: rgb(120 53 15 / 0.8);
}
.text-amber-900\/90 {
    color: rgb(120 53 15 / 0.9);
}
.text-blue-400 {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-blue-500 {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-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-blue-800 {
    --tw-text-opacity: 1;
    color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-blue-900 {
    --tw-text-opacity: 1;
    color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.text-cyber-900 {
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.text-emerald-300 {
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.text-emerald-400 {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.text-emerald-400\/60 {
    color: rgb(52 211 153 / 0.6);
}
.text-emerald-500 {
    --tw-text-opacity: 1;
    color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-emerald-500\/80 {
    color: rgb(16 185 129 / 0.8);
}
.text-emerald-600 {
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-emerald-700 {
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-emerald-700\/80 {
    color: rgb(4 120 87 / 0.8);
}
.text-emerald-700\/90 {
    color: rgb(4 120 87 / 0.9);
}
.text-emerald-800 {
    --tw-text-opacity: 1;
    color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}
.text-emerald-900 {
    --tw-text-opacity: 1;
    color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}
.text-emerald-900\/90 {
    color: rgb(6 78 59 / 0.9);
}
.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-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-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-700 {
    --tw-text-opacity: 1;
    color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.text-neon-cyan {
    --tw-text-opacity: 1;
    color: rgb(125 211 252 / var(--tw-text-opacity, 1));
}
.text-neon-green {
    --tw-text-opacity: 1;
    color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-neon-purple {
    --tw-text-opacity: 1;
    color: rgb(139 92 246 / var(--tw-text-opacity, 1));
}
.text-orange-600 {
    --tw-text-opacity: 1;
    color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.text-orange-700 {
    --tw-text-opacity: 1;
    color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}
.text-orange-800 {
    --tw-text-opacity: 1;
    color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}
.text-purple-800 {
    --tw-text-opacity: 1;
    color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}
.text-red-300 {
    --tw-text-opacity: 1;
    color: rgb(252 165 165 / 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-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-red-800 {
    --tw-text-opacity: 1;
    color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-red-900 {
    --tw-text-opacity: 1;
    color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}
.text-rose-200 {
    --tw-text-opacity: 1;
    color: rgb(254 205 211 / var(--tw-text-opacity, 1));
}
.text-rose-300 {
    --tw-text-opacity: 1;
    color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}
.text-rose-600 {
    --tw-text-opacity: 1;
    color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}
.text-rose-700 {
    --tw-text-opacity: 1;
    color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}
.text-rose-800 {
    --tw-text-opacity: 1;
    color: rgb(159 18 57 / var(--tw-text-opacity, 1));
}
.text-rose-900 {
    --tw-text-opacity: 1;
    color: rgb(136 19 55 / var(--tw-text-opacity, 1));
}
.text-sky-600 {
    --tw-text-opacity: 1;
    color: rgb(2 132 199 / var(--tw-text-opacity, 1));
}
.text-sky-700 {
    --tw-text-opacity: 1;
    color: rgb(3 105 161 / var(--tw-text-opacity, 1));
}
.text-slate-100 {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.text-slate-200 {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.text-slate-300 {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.text-slate-400 {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-slate-500 {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-slate-600 {
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.text-slate-700 {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.text-slate-800 {
    --tw-text-opacity: 1;
    color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.text-slate-900 {
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.text-slate-900\/70 {
    color: rgb(15 23 42 / 0.7);
}
.text-violet-500 {
    --tw-text-opacity: 1;
    color: rgb(139 92 246 / var(--tw-text-opacity, 1));
}
.text-violet-600 {
    --tw-text-opacity: 1;
    color: rgb(124 58 237 / var(--tw-text-opacity, 1));
}
.text-violet-700 {
    --tw-text-opacity: 1;
    color: rgb(109 40 217 / var(--tw-text-opacity, 1));
}
.text-violet-800 {
    --tw-text-opacity: 1;
    color: rgb(91 33 182 / var(--tw-text-opacity, 1));
}
.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/70 {
    color: rgb(255 255 255 / 0.7);
}
.text-white\/80 {
    color: rgb(255 255 255 / 0.8);
}
.text-yellow-400 {
    --tw-text-opacity: 1;
    color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.text-yellow-600 {
    --tw-text-opacity: 1;
    color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}
.text-yellow-700 {
    --tw-text-opacity: 1;
    color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}
.text-yellow-800 {
    --tw-text-opacity: 1;
    color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}
.text-yellow-900 {
    --tw-text-opacity: 1;
    color: rgb(113 63 18 / var(--tw-text-opacity, 1));
}
.underline {
    text-decoration-line: underline;
}
.line-through {
    text-decoration-line: line-through;
}
.decoration-emerald-300 {
    text-decoration-color: #6ee7b7;
}
.decoration-slate-300 {
    text-decoration-color: #cbd5e1;
}
.underline-offset-2 {
    text-underline-offset: 2px;
}
.underline-offset-4 {
    text-underline-offset: 4px;
}
.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.placeholder-blue-400::-moz-placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(96 165 250 / var(--tw-placeholder-opacity, 1));
}
.placeholder-blue-400::placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(96 165 250 / var(--tw-placeholder-opacity, 1));
}
.placeholder-slate-400::-moz-placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(148 163 184 / var(--tw-placeholder-opacity, 1));
}
.placeholder-slate-400::placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(148 163 184 / var(--tw-placeholder-opacity, 1));
}
.placeholder-slate-500::-moz-placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(100 116 139 / var(--tw-placeholder-opacity, 1));
}
.placeholder-slate-500::placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(100 116 139 / var(--tw-placeholder-opacity, 1));
}
.accent-emerald-500 {
    accent-color: #10b981;
}
.accent-slate-900 {
    accent-color: #0f172a;
}
.opacity-0 {
    opacity: 0;
}
.opacity-100 {
    opacity: 1;
}
.opacity-25 {
    opacity: 0.25;
}
.opacity-30 {
    opacity: 0.3;
}
.opacity-35 {
    opacity: 0.35;
}
.opacity-40 {
    opacity: 0.4;
}
.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;
}
.mix-blend-multiply {
    mix-blend-mode: multiply;
}
.mix-blend-overlay {
    mix-blend-mode: overlay;
}
.shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_8px_rgba\(52\2c 211\2c 153\2c 0\.7\)\] {
    --tw-shadow: 0 0 8px rgba(52,211,153,0.7);
    --tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-emerald-500\/10 {
    --tw-shadow-color: rgb(16 185 129 / 0.1);
    --tw-shadow: var(--tw-shadow-colored);
}
.shadow-neon-cyan\/25 {
    --tw-shadow-color: rgb(125 211 252 / 0.25);
    --tw-shadow: var(--tw-shadow-colored);
}
.shadow-neon-green\/30 {
    --tw-shadow-color: rgb(16 185 129 / 0.3);
    --tw-shadow: var(--tw-shadow-colored);
}
.outline {
    outline-style: solid;
}
.ring {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-4 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-amber-400\/20 {
    --tw-ring-color: rgb(251 191 36 / 0.2);
}
.ring-amber-400\/70 {
    --tw-ring-color: rgb(251 191 36 / 0.7);
}
.ring-blue-400 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity, 1));
}
.ring-blue-400\/50 {
    --tw-ring-color: rgb(96 165 250 / 0.5);
}
.ring-emerald-200 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(167 243 208 / var(--tw-ring-opacity, 1));
}
.ring-emerald-200\/70 {
    --tw-ring-color: rgb(167 243 208 / 0.7);
}
.ring-emerald-400 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(52 211 153 / var(--tw-ring-opacity, 1));
}
.ring-emerald-500\/20 {
    --tw-ring-color: rgb(16 185 129 / 0.2);
}
.ring-emerald-500\/30 {
    --tw-ring-color: rgb(16 185 129 / 0.3);
}
.ring-gray-200 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity, 1));
}
.ring-neon-cyan {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(125 211 252 / var(--tw-ring-opacity, 1));
}
.ring-orange-400\/60 {
    --tw-ring-color: rgb(251 146 60 / 0.6);
}
.ring-rose-400\/20 {
    --tw-ring-color: rgb(251 113 133 / 0.2);
}
.ring-slate-100 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(241 245 249 / var(--tw-ring-opacity, 1));
}
.ring-slate-200 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(226 232 240 / var(--tw-ring-opacity, 1));
}
.ring-slate-200\/70 {
    --tw-ring-color: rgb(226 232 240 / 0.7);
}
.ring-slate-900\/10 {
    --tw-ring-color: rgb(15 23 42 / 0.1);
}
.ring-slate-900\/20 {
    --tw-ring-color: rgb(15 23 42 / 0.2);
}
.ring-slate-900\/5 {
    --tw-ring-color: rgb(15 23 42 / 0.05);
}
.ring-white {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}
.ring-white\/10 {
    --tw-ring-color: rgb(255 255 255 / 0.1);
}
.ring-offset-2 {
    --tw-ring-offset-width: 2px;
}
.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-0 {
    --tw-blur: blur(0);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-2xl {
    --tw-blur: blur(40px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-3xl {
    --tw-blur: blur(64px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-sm {
    --tw-blur: blur(4px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.brightness-110 {
    --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);
}
.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);
}
.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-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-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-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-shadow {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.duration-1000 {
    transition-duration: 1000ms;
}
.duration-150 {
    transition-duration: 150ms;
}
.duration-200 {
    transition-duration: 200ms;
}
.duration-300 {
    transition-duration: 300ms;
}
.duration-500 {
    transition-duration: 500ms;
}
.duration-700 {
    transition-duration: 700ms;
}
.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.will-change-transform {
    will-change: transform;
}
.scrollbar-thin::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track);
    border-radius: var(--scrollbar-track-radius);
}
.scrollbar-thin::-webkit-scrollbar-track:hover {
    background-color: var(--scrollbar-track-hover, var(--scrollbar-track));
}
.scrollbar-thin::-webkit-scrollbar-track:active {
    background-color: var(--scrollbar-track-active, var(--scrollbar-track-hover, var(--scrollbar-track)));
}
.scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: var(--scrollbar-thumb-radius);
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover, var(--scrollbar-thumb));
}
.scrollbar-thin::-webkit-scrollbar-thumb:active {
    background-color: var(--scrollbar-thumb-active, var(--scrollbar-thumb-hover, var(--scrollbar-thumb)));
}
.scrollbar-thin::-webkit-scrollbar-corner {
    background-color: var(--scrollbar-corner);
    border-radius: var(--scrollbar-corner-radius);
}
.scrollbar-thin::-webkit-scrollbar-corner:hover {
    background-color: var(--scrollbar-corner-hover, var(--scrollbar-corner));
}
.scrollbar-thin::-webkit-scrollbar-corner:active {
    background-color: var(--scrollbar-corner-active, var(--scrollbar-corner-hover, var(--scrollbar-corner)));
}
.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
}
.scrollbar-thin::-webkit-scrollbar {
    display: block;
    width: 8px;
    height: 8px;
}
.scrollbar-track-transparent {
    --scrollbar-track: transparent !important;
}
.scrollbar-thumb-slate-300 {
    --scrollbar-thumb: #cbd5e1 !important;
}
/* Neon text effects */
/* Hide scrollbars while maintaining scroll functionality */
.text-neon-purple {
    color: #b537f2;
    text-shadow: 0 0 10px rgba(181, 55, 242, 0.8), 0 0 20px rgba(181, 55, 242, 0.5);
  }
.text-neon-green {
    color: #39ff14;
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.8), 0 0 20px rgba(57, 255, 20, 0.5);
  }
/* Neon border effects */
.border-neon-purple {
    border-color: #b537f2;
    box-shadow: 0 0 5px rgba(181, 55, 242, 0.5), inset 0 0 5px rgba(181, 55, 242, 0.2);
  }
/* Glassmorphism effect */
.glass {
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
/* Neon bar/divider */
.neon-bar {
    height: 0.25rem;
    width: 100%;
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --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);
    --tw-gradient-to: rgb(125 211 252 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #7dd3fc var(--tw-gradient-via-position), var(--tw-gradient-to);
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.6);
}
/* Card with neon glow */
.card-neon {
    border-radius: 0.75rem;
    padding: 1.5rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
html:not(.dark) body .card-neon {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.card-neon {
    border: 1px solid rgba(0, 243, 255, 0.3);
  }
.card-neon:hover {
    border-color: rgba(0, 243, 255, 0.6);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.3), 0 0 40px rgba(0, 243, 255, 0.1);
    transform: translateY(-2px);
  }
/* Gradient text */
.gradient-text {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: #7dd3fc var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(125 211 252 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(139 92 246 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #8b5cf6 var(--tw-gradient-via-position), var(--tw-gradient-to);
    --tw-gradient-to: #ec4899 var(--tw-gradient-to-position);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
/* Pulse animation for interactive elements */
@keyframes pulse-glow {
    0%, 100% {
      box-shadow: 0 0 5px rgba(0, 243, 255, 0.4);
    }
    50% {
      box-shadow: 0 0 15px rgba(0, 243, 255, 0.8), 0 0 25px rgba(0, 243, 255, 0.4);
    }
  }
/* Energy bar effect */
@keyframes energy-flow {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }
/* Futuristic Gym Theme - Neon & Cyber Styling */
/* Dark mode adjustments */
.dark {
  /* Dark mode is the default for this theme */
}
/* Dark mode readability: use slate-200 (light gray, #e2e8f0) as default text
   instead of slate-100 (#f1f5f9), reducing glare while keeping strong contrast */
html.dark body {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
  line-height: 1.65;
}
html.dark p,
html.dark li,
html.dark dd,
html.dark td,
html.dark label {
  font-weight: 500;
  line-height: 1.7;
}
/* Respect prefers-reduced-motion globally */
@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;
  }
}
/* Light mode overrides for accessibility */
html:not(.dark) body {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(0, 243, 255, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(181, 55, 242, 0.03) 0%, transparent 50%);
}
html:not(.dark) body .glass {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
html:not(.dark) body .card-neon {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 243, 255, 0.2);
}
/*
 * Global dark mode overrides
 *
 * Many page templates use inline Tailwind light-mode utility classes
 * (bg-white, text-slate-900, border-slate-200, etc.) without dark: counterparts.
 * These rules use attribute selectors ([class~="..."]) instead of class selectors
 * to avoid Tailwind's circular-dependency guard, while still targeting the same
 * elements.  They apply only when the user has selected the dark theme
 * (html.dark is set by base.html).
 */
/* Backgrounds */
html.dark [class~="bg-white"] {
  background-color: rgb(30, 41, 59); /* slate-800 */
}
html.dark [class~="bg-slate-50"],
html.dark [class~="bg-gray-50"] {
  background-color: rgb(15, 23, 42); /* slate-950 */
}
html.dark [class~="bg-slate-100"],
html.dark [class~="bg-gray-100"] {
  background-color: rgb(30, 41, 59); /* slate-800 */
}
/* Text */
html.dark [class~="text-slate-900"],
html.dark [class~="text-gray-900"] {
  color: rgb(241, 245, 249); /* slate-100 — off-white, not glaring pure white */
}
html.dark [class~="text-slate-800"],
html.dark [class~="text-gray-800"] {
  color: rgb(226, 232, 240); /* slate-200 */
}
html.dark [class~="text-slate-700"],
html.dark [class~="text-gray-700"] {
  color: rgb(203, 213, 225); /* slate-300 */
}
html.dark [class~="text-slate-600"],
html.dark [class~="text-gray-600"] {
  color: rgb(148, 163, 184); /* slate-400 */
}
/* Borders */
html.dark [class~="border-slate-200"],
html.dark [class~="border-gray-200"] {
  border-color: rgb(51, 65, 85); /* slate-700 */
}
/* Profile customiser runtime classes (kept outside @layer so JIT purge never strips them) */
.profile-banner-pill--none {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  border-color: rgba(148, 163, 184, 0.72);
}
html.dark .profile-banner-pill--none {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border-color: rgba(100, 116, 139, 0.72);
}
.profile-banner-pill--aurora {
  background: linear-gradient(135deg, #0f766e 0%, #4c1d95 48%, #2563eb 100%);
}
.profile-banner-pill--sunset {
  background: linear-gradient(135deg, #bfdbfe 0%, #fde68a 36%, #fb923c 72%, #f97316 100%);
}
.profile-banner-pill--sunset::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(251, 146, 60, 0.2) 100%);
}
.profile-banner-pill--ocean {
  background: linear-gradient(135deg, #dbeafe 0%, #93c5fd 42%, #3b82f6 100%);
}
.profile-banner-pill--ocean::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(30, 64, 175, 0.2) 100%);
}
.profile-banner-pill--rose {
  background: linear-gradient(135deg, #fbcfe8 0%, #f9a8d4 45%, #f472b6 100%);
}
.profile-banner-pill--rose::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(190, 24, 93, 0.18) 100%);
}
.profile-banner-pill--carbon {
  background: linear-gradient(135deg, #020617 0%, #1e293b 52%, #334155 100%);
}
.profile-banner-pill--lagoon {
  background: linear-gradient(135deg, #99f6e4 0%, #67e8f9 45%, #0ea5e9 100%);
}
.profile-banner-pill--lagoon::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(14, 116, 144, 0.18) 100%);
}
.profile-banner-pill--meadow {
  background: linear-gradient(135deg, #dcfce7 0%, #86efac 46%, #22c55e 100%);
}
.profile-banner-pill--meadow::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(22, 101, 52, 0.16) 100%);
}
.profile-banner-pill--midnight {
  background: linear-gradient(135deg, #111827 0%, #312e81 42%, #1d4ed8 100%);
}
.profile-avatar-ring--none {
  --ring-core: transparent;
  --ring-glow: transparent;
  --ring-spark-a: transparent;
  --ring-spark-b: transparent;
  border-color: inherit;
  box-shadow: none;
  animation: none;
}
.profile-avatar-ring--none::before,
.profile-avatar-ring--none::after {
  display: none;
  animation: none;
}
.profile-avatar-ring--neon_dual {
  --ring-core: rgba(45, 212, 191, 0.92);
  --ring-glow: rgba(59, 130, 246, 0.42);
  --ring-spark-a: rgba(45, 212, 191, 0.62);
  --ring-spark-b: rgba(34, 211, 238, 0.74);
  --ring-spin-dur: 5.8s;
  --ring-pulse-dur: 2.2s;
  --ring-sparkle-dur: 3.4s;
}
.profile-avatar-ring--solar_flare {
  --ring-core: rgba(251, 191, 36, 0.95);
  --ring-glow: rgba(249, 115, 22, 0.46);
  --ring-spark-a: rgba(252, 211, 77, 0.72);
  --ring-spark-b: rgba(254, 215, 170, 0.76);
  --ring-spin-dur: 6.6s;
  --ring-pulse-dur: 2.1s;
  --ring-sparkle-dur: 3.2s;
}
.profile-avatar-ring--crystal {
  --ring-core: rgba(186, 230, 253, 0.98);
  --ring-glow: rgba(125, 211, 252, 0.42);
  --ring-spark-a: rgba(224, 242, 254, 0.82);
  --ring-spark-b: rgba(191, 219, 254, 0.72);
  --ring-spin-dur: 9.4s;
  --ring-pulse-dur: 2.9s;
  --ring-sparkle-dur: 3.9s;
}
.profile-avatar-ring--starry_spark {
  --ring-core: rgba(167, 139, 250, 0.9);
  --ring-glow: rgba(129, 140, 248, 0.38);
  --ring-spark-a: rgba(199, 210, 254, 0.8);
  --ring-spark-b: rgba(233, 213, 255, 0.8);
  --ring-spin-dur: 10.8s;
  --ring-pulse-dur: 2.5s;
  --ring-sparkle-dur: 1.65s;
}
.profile-avatar-ring--starry_spark::after {
  animation: ring-sparkle 1.2s steps(2, end) infinite;
}
.profile-avatar-ring--aurora_pulse {
  --ring-core: rgba(52, 211, 153, 0.92);
  --ring-glow: rgba(34, 197, 94, 0.36);
  --ring-spark-a: rgba(16, 185, 129, 0.68);
  --ring-spark-b: rgba(110, 231, 183, 0.82);
  --ring-spin-dur: 7.8s;
  --ring-pulse-dur: 1.85s;
  --ring-sparkle-dur: 3.1s;
}
.profile-avatar-ring--aurora_pulse::before {
  border-top-color: rgba(167, 243, 208, 0.92);
  border-right-color: rgba(52, 211, 153, 0.72);
  border-left-color: rgba(20, 184, 166, 0.62);
}
.profile-avatar-ring--aurora_pulse::after {
  inset: -0.52rem;
  background:
    radial-gradient(ellipse at 22% 24%, rgba(167, 243, 208, 0.74) 0 16%, transparent 34%),
    radial-gradient(ellipse at 78% 72%, rgba(94, 234, 212, 0.7) 0 14%, transparent 32%);
  animation: ring-sparkle 2.6s ease-in-out infinite;
}
.profile-avatar-ring--comet_trail {
  --ring-core: rgba(56, 189, 248, 0.94);
  --ring-glow: rgba(14, 165, 233, 0.44);
  --ring-spark-a: rgba(125, 211, 252, 0.68);
  --ring-spark-b: rgba(186, 230, 253, 0.84);
  --ring-spin-dur: 3.6s;
  --ring-pulse-dur: 2.4s;
  --ring-sparkle-dur: 2.2s;
}
.profile-avatar-ring--comet_trail::before {
  border-top-color: rgba(186, 230, 253, 0.95);
  border-right-color: rgba(56, 189, 248, 0.72);
  border-bottom-color: rgba(14, 165, 233, 0.42);
}
.profile-avatar-ring--comet_trail::after {
  background:
    radial-gradient(circle at 6% 20%, rgba(224, 242, 254, 0.95) 0 2px, transparent 2.5px),
    radial-gradient(circle at 28% 36%, rgba(186, 230, 253, 0.75) 0 1.8px, transparent 2.3px),
    radial-gradient(circle at 58% 55%, rgba(125, 211, 252, 0.62) 0 1.6px, transparent 2.1px),
    radial-gradient(circle at 84% 78%, rgba(56, 189, 248, 0.52) 0 1.4px, transparent 2px);
  animation: ring-sparkle 1.9s ease-in-out infinite;
}
.profile-avatar-ring--ember_crown {
  --ring-core: rgba(251, 146, 60, 0.95);
  --ring-glow: rgba(249, 115, 22, 0.48);
  --ring-spark-a: rgba(251, 191, 36, 0.74);
  --ring-spark-b: rgba(254, 215, 170, 0.82);
  --ring-spin-dur: 5.2s;
  --ring-pulse-dur: 1.9s;
  --ring-sparkle-dur: 2.5s;
}
.profile-avatar-ring--ember_crown::before {
  border-top-color: rgba(254, 215, 170, 0.95);
  border-right-color: rgba(251, 146, 60, 0.76);
  border-left-color: rgba(245, 158, 11, 0.64);
}
.profile-avatar-ring--ember_crown::after {
  background:
    radial-gradient(circle at 20% 14%, rgba(254, 243, 199, 0.9) 0 2px, transparent 2.5px),
    radial-gradient(circle at 80% 18%, rgba(253, 186, 116, 0.8) 0 1.9px, transparent 2.4px),
    radial-gradient(circle at 52% 86%, rgba(251, 146, 60, 0.64) 0 2px, transparent 2.5px);
}
.profile-avatar-ring--king_crown {
  --ring-core: rgba(250, 204, 21, 0.95);
  --ring-glow: rgba(217, 119, 6, 0.52);
  --ring-spark-a: rgba(254, 240, 138, 0.74);
  --ring-spark-b: rgba(253, 224, 71, 0.84);
  --ring-spin-dur: 8.2s;
  --ring-pulse-dur: 1.9s;
  --ring-sparkle-dur: 2.9s;
}
.profile-avatar-ring--king_crown::before {
  inset: -0.48rem;
  border: 0;
  border-radius: 1rem;
  background:
    linear-gradient(180deg, transparent 0 16%, rgba(250, 204, 21, 0.95) 16% 22%, transparent 22% 100%),
    radial-gradient(circle at 10% 22%, rgba(250, 204, 21, 0.95) 0 11%, transparent 12%),
    radial-gradient(circle at 28% 5%, rgba(254, 240, 138, 0.92) 0 11%, transparent 12%),
    radial-gradient(circle at 50% -1%, rgba(253, 224, 71, 0.96) 0 12%, transparent 13%),
    radial-gradient(circle at 72% 5%, rgba(254, 240, 138, 0.92) 0 11%, transparent 12%),
    radial-gradient(circle at 90% 22%, rgba(250, 204, 21, 0.95) 0 11%, transparent 12%);
  filter: drop-shadow(0 0 0.48rem rgba(217, 119, 6, 0.45));
  animation: crown-bob 2.1s ease-in-out infinite;
}
.profile-avatar-ring--king_crown::after {
  inset: -0.54rem;
  background:
    radial-gradient(circle at 14% 34%, rgba(254, 243, 199, 0.88) 0 2px, transparent 2.6px),
    radial-gradient(circle at 86% 36%, rgba(254, 240, 138, 0.78) 0 2px, transparent 2.6px),
    radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.92) 0 1.8px, transparent 2.4px);
  animation: ring-sparkle 1.7s ease-in-out infinite;
}
.profile-avatar-ring--cyber_arms {
  --ring-core: rgba(56, 189, 248, 0.94);
  --ring-glow: rgba(59, 130, 246, 0.48);
  --ring-spark-a: rgba(125, 211, 252, 0.8);
  --ring-spark-b: rgba(165, 243, 252, 0.84);
  --ring-spin-dur: 5.5s;
  --ring-pulse-dur: 1.8s;
  --ring-sparkle-dur: 2.2s;
}
.profile-avatar-ring--cyber_arms::before {
  inset: -0.7rem;
  border: 0;
  border-radius: 1.2rem;
  background:
    linear-gradient(90deg, transparent 0 3%, rgba(34, 211, 238, 0.92) 3% 14%, transparent 14% 86%, rgba(34, 211, 238, 0.92) 86% 97%, transparent 97% 100%),
    linear-gradient(180deg, transparent 0 44%, rgba(96, 165, 250, 0.86) 44% 56%, transparent 56% 100%);
  filter: drop-shadow(0 0 0.5rem rgba(56, 189, 248, 0.45));
  animation: arms-pump 1.25s ease-in-out infinite;
}
.profile-avatar-ring--cyber_arms::after {
  inset: -0.44rem;
  background:
    radial-gradient(circle at 8% 50%, rgba(34, 211, 238, 0.88) 0 2.2px, transparent 2.8px),
    radial-gradient(circle at 92% 50%, rgba(34, 211, 238, 0.88) 0 2.2px, transparent 2.8px);
  animation: ring-sparkle 1.4s ease-in-out infinite;
}
.profile-avatar-ring--ufo_beam {
  --ring-core: rgba(110, 231, 183, 0.94);
  --ring-glow: rgba(45, 212, 191, 0.44);
  --ring-spark-a: rgba(167, 243, 208, 0.74);
  --ring-spark-b: rgba(209, 250, 229, 0.86);
  --ring-spin-dur: 7.2s;
  --ring-pulse-dur: 2s;
  --ring-sparkle-dur: 2.6s;
}
.profile-avatar-ring--ufo_beam::before {
  inset: -0.62rem;
  border: 0;
  border-radius: 1rem;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(187, 247, 208, 0.95) 0 19%, transparent 22%),
    linear-gradient(180deg, rgba(110, 231, 183, 0.62) 10%, rgba(16, 185, 129, 0.04) 55%, transparent 80%);
  animation: beam-scan 2.35s ease-in-out infinite;
}
.profile-avatar-ring--ufo_beam::after {
  inset: -0.5rem;
  background:
    radial-gradient(circle at 50% 10%, rgba(236, 253, 245, 0.96) 0 2px, transparent 2.6px),
    radial-gradient(circle at 34% 24%, rgba(167, 243, 208, 0.8) 0 1.7px, transparent 2.3px),
    radial-gradient(circle at 66% 24%, rgba(167, 243, 208, 0.8) 0 1.7px, transparent 2.3px);
  animation: ring-sparkle 2s ease-in-out infinite;
}
.profile-card-back-theme--none,
.profile-preview-card-back--none {
  background: rgba(248, 250, 252, 0.7);
  border-color: rgba(148, 163, 184, 0.42);
}
html.dark .profile-card-back-theme--none,
html.dark .profile-preview-card-back--none {
  background: rgba(15, 23, 42, 0.56);
  border-color: rgba(100, 116, 139, 0.46);
  color: #e2e8f0;
}
.profile-card-back-theme--glass,
.profile-preview-card-back--glass {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(226, 232, 240, 0.72) 100%);
  border-color: rgba(148, 163, 184, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
html.dark .profile-card-back-theme--glass,
html.dark .profile-preview-card-back--glass {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.86) 0%, rgba(51, 65, 85, 0.62) 100%);
  border-color: rgba(100, 116, 139, 0.52);
  color: #e2e8f0;
}
.profile-card-back-theme--topo,
.profile-preview-card-back--topo {
  background:
    radial-gradient(circle at 18% 24%, rgba(16, 185, 129, 0.25) 0%, transparent 38%),
    radial-gradient(circle at 82% 82%, rgba(14, 165, 233, 0.22) 0%, transparent 42%),
    linear-gradient(145deg, rgba(240, 253, 250, 0.96) 0%, rgba(236, 252, 203, 0.72) 100%);
  border-color: rgba(52, 211, 153, 0.4);
}
html.dark .profile-card-back-theme--topo,
html.dark .profile-preview-card-back--topo {
  background:
    radial-gradient(circle at 20% 24%, rgba(45, 212, 191, 0.26) 0%, transparent 42%),
    radial-gradient(circle at 82% 84%, rgba(56, 189, 248, 0.22) 0%, transparent 44%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.95) 0%, rgba(22, 78, 99, 0.74) 100%);
  border-color: rgba(45, 212, 191, 0.45);
  color: #e2e8f0;
}
.profile-card-back-theme--carbon,
.profile-preview-card-back--carbon {
  background: linear-gradient(135deg, rgba(2, 6, 23, 0.9) 0%, rgba(15, 23, 42, 0.88) 46%, rgba(30, 41, 59, 0.92) 100%);
  border-color: rgba(71, 85, 105, 0.62);
}
.profile-card-back-theme--carbon .profile-identity-banner__name,
.profile-card-back-theme--carbon .profile-identity-banner__handle,
.profile-card-back-theme--carbon .profile-identity-banner__theme,
.profile-preview-card-back--carbon {
  color: #e2e8f0;
}
.profile-card-back-theme--matrix,
.profile-preview-card-back--matrix {
  background:
    linear-gradient(180deg, rgba(20, 83, 45, 0.18) 0%, rgba(20, 83, 45, 0.08) 100%),
    repeating-linear-gradient(90deg, rgba(16, 185, 129, 0.08) 0 1px, transparent 1px 8px),
    linear-gradient(145deg, rgba(6, 78, 59, 0.95) 0%, rgba(17, 94, 89, 0.9) 100%);
  border-color: rgba(16, 185, 129, 0.5);
}
.profile-card-back-theme--matrix .profile-identity-banner__name,
.profile-card-back-theme--matrix .profile-identity-banner__handle,
.profile-card-back-theme--matrix .profile-identity-banner__theme,
.profile-preview-card-back--matrix {
  color: #d1fae5;
}
.profile-card-back-theme--nebula,
.profile-preview-card-back--nebula {
  background:
    radial-gradient(circle at 18% 18%, rgba(217, 70, 239, 0.3) 0%, transparent 38%),
    radial-gradient(circle at 82% 26%, rgba(56, 189, 248, 0.28) 0%, transparent 36%),
    radial-gradient(circle at 62% 84%, rgba(99, 102, 241, 0.3) 0%, transparent 40%),
    linear-gradient(145deg, rgba(17, 24, 39, 0.96) 0%, rgba(30, 41, 59, 0.9) 100%);
  border-color: rgba(168, 85, 247, 0.4);
}
.profile-card-back-theme--nebula .profile-identity-banner__name,
.profile-card-back-theme--nebula .profile-identity-banner__handle,
.profile-card-back-theme--nebula .profile-identity-banner__theme,
.profile-preview-card-back--nebula {
  color: #e9d5ff;
}
.profile-card-back-theme--circuit,
.profile-preview-card-back--circuit {
  background:
    repeating-linear-gradient(0deg, rgba(34, 197, 94, 0.08) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, rgba(34, 197, 94, 0.08) 0 1px, transparent 1px 18px),
    linear-gradient(145deg, rgba(6, 78, 59, 0.95) 0%, rgba(15, 118, 110, 0.9) 100%);
  border-color: rgba(34, 197, 94, 0.5);
}
.profile-card-back-theme--circuit .profile-identity-banner__name,
.profile-card-back-theme--circuit .profile-identity-banner__handle,
.profile-card-back-theme--circuit .profile-identity-banner__theme,
.profile-preview-card-back--circuit {
  color: #dcfce7;
}
.profile-card-back-theme--sunburst,
.profile-preview-card-back--sunburst {
  background:
    conic-gradient(from 210deg at 50% 50%, rgba(251, 146, 60, 0.82), rgba(250, 204, 21, 0.78), rgba(249, 115, 22, 0.8), rgba(251, 146, 60, 0.82)),
    linear-gradient(145deg, rgba(255, 247, 237, 0.92) 0%, rgba(254, 215, 170, 0.72) 100%);
  border-color: rgba(251, 146, 60, 0.52);
}
.profile-card-back-theme--sunburst .profile-identity-banner__name,
.profile-card-back-theme--sunburst .profile-identity-banner__handle,
.profile-card-back-theme--sunburst .profile-identity-banner__theme,
.profile-preview-card-back--sunburst {
  color: #7c2d12;
}
.profile-card-back-theme--retro_grid,
.profile-preview-card-back--retro_grid {
  background:
    linear-gradient(180deg, rgba(236, 72, 153, 0.14) 0%, rgba(139, 92, 246, 0.12) 48%, rgba(59, 130, 246, 0.14) 100%),
    repeating-linear-gradient(90deg, rgba(14, 165, 233, 0.16) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(0deg, rgba(14, 165, 233, 0.14) 0 1px, transparent 1px 20px),
    linear-gradient(145deg, rgba(30, 27, 75, 0.94) 0%, rgba(17, 24, 39, 0.9) 100%);
  border-color: rgba(56, 189, 248, 0.45);
}
.profile-card-back-theme--retro_grid .profile-identity-banner__name,
.profile-card-back-theme--retro_grid .profile-identity-banner__handle,
.profile-card-back-theme--retro_grid .profile-identity-banner__theme,
.profile-preview-card-back--retro_grid {
  color: #dbeafe;
}
@keyframes crown-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}
@keyframes arms-pump {
  0%,
  100% {
    transform: scaleX(1);
    opacity: 0.92;
  }
  50% {
    transform: scaleX(1.08);
    opacity: 1;
  }
}
@keyframes beam-scan {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.9;
  }
  50% {
    transform: translateY(2px);
    opacity: 1;
  }
}
html.dark [class~="border-slate-300"],
html.dark [class~="border-gray-300"] {
  border-color: rgb(71, 85, 105); /* slate-600 */
}
.week-day-card:has(.group:hover .group-hover\:text-emerald-400) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.group:hover .group-hover\:text-emerald-400) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.week-day-card:has(.dark\:text-emerald-400:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.dark\:text-emerald-400:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
.week-day-card:has(.dark\:hover\:text-emerald-400:hover:is(.dark *)) {
        border-color: rgba(16, 185, 129, 0.5);
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }
html:not(.dark) .week-day-card:has(.dark\:hover\:text-emerald-400:hover:is(.dark *)) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
@media (min-width: 640px) {

    .sm\:hidden.auth-fields-block {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
        pointer-events: none;
    }

    .sm\:hidden.profile-phone-country-dropdown {
        display: none;
    }

    .sm\:hidden#profile-phone-country {
        display: none;
    }
}
@media (min-width: 1024px) {

    .lg\:hidden.auth-fields-block {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
        pointer-events: none;
    }

    .lg\:hidden.profile-phone-country-dropdown {
        display: none;
    }

    .lg\:hidden#profile-phone-country {
        display: none;
    }
}
.file\:mr-4::file-selector-button {
    margin-right: 1rem;
}
.file\:rounded::file-selector-button {
    border-radius: 0.25rem;
}
.file\:border-0::file-selector-button {
    border-width: 0px;
}
.file\:bg-neon-cyan\/10::file-selector-button {
    background-color: rgb(125 211 252 / 0.1);
}
.file\:px-4::file-selector-button {
    padding-left: 1rem;
    padding-right: 1rem;
}
.file\:py-2::file-selector-button {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.file\:text-sm::file-selector-button {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.file\:font-semibold::file-selector-button {
    font-weight: 600;
}
.file\:text-neon-cyan::file-selector-button {
    --tw-text-opacity: 1;
    color: rgb(125 211 252 / var(--tw-text-opacity, 1));
}
.placeholder\:text-slate-400::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.placeholder\:text-slate-400::placeholder {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.placeholder\:text-slate-500::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.placeholder\:text-slate-500::placeholder {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.after\:absolute::after {
    content: var(--tw-content);
    position: absolute;
}
.after\:left-\[2px\]::after {
    content: var(--tw-content);
    left: 2px;
}
.after\:top-\[2px\]::after {
    content: var(--tw-content);
    top: 2px;
}
.after\:h-5::after {
    content: var(--tw-content);
    height: 1.25rem;
}
.after\:w-5::after {
    content: var(--tw-content);
    width: 1.25rem;
}
.after\:rounded-full::after {
    content: var(--tw-content);
    border-radius: 9999px;
}
.after\:border::after {
    content: var(--tw-content);
    border-width: 1px;
}
.after\:border-slate-300::after {
    content: var(--tw-content);
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.after\:bg-white::after {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.after\:transition-all::after {
    content: var(--tw-content);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.after\:content-\[\'\'\]::after {
    --tw-content: '';
    content: var(--tw-content);
}
.first\:pt-0:first-child {
    padding-top: 0px;
}
.last\:border-0:last-child {
    border-width: 0px;
}
.last\:border-b-0:last-child {
    border-bottom-width: 0px;
}
.last\:pb-0:last-child {
    padding-bottom: 0px;
}
.focus-within\:border-blue-500:focus-within {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.focus-within\:ring-1:focus-within {
    --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-within\:ring-blue-500:focus-within {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.group:focus-within .group-focus-within\:block {
    display: block;
}
.group:hover .group-hover\:block {
    display: block;
}
.group:hover .group-hover\:scale-y-110 {
    --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\:border-emerald-400 {
    --tw-border-opacity: 1;
    border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}
.group:hover .group-hover\:bg-amber-400\/20 {
    background-color: rgb(251 191 36 / 0.2);
}
.group:hover .group-hover\:bg-blue-400\/20 {
    background-color: rgb(96 165 250 / 0.2);
}
.group:hover .group-hover\:bg-emerald-400\/20 {
    background-color: rgb(52 211 153 / 0.2);
}
.group:hover .group-hover\:bg-emerald-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:bg-slate-400\/20 {
    background-color: rgb(148 163 184 / 0.2);
}
.group:hover .group-hover\:text-blue-700 {
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-emerald-400 {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-emerald-500 {
    --tw-text-opacity: 1;
    color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-slate-600 {
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-slate-900 {
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / 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\/conditions-tip:hover .group-hover\/conditions-tip\:opacity-100 {
    opacity: 1;
}
.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}
.group:hover .group-hover\: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);
}
.group:focus .group-focus\:block {
    display: block;
}
.peer:checked ~ .peer-checked\:bg-blue-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.peer:checked ~ .peer-checked\:after\:translate-x-full::after {
    content: var(--tw-content);
    --tw-translate-x: 100%;
    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));
}
.peer:checked ~ .peer-checked\:after\:border-white::after {
    content: var(--tw-content);
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.peer:focus ~ .peer-focus\:outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.peer:focus ~ .peer-focus\: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);
}
.peer:focus ~ .peer-focus\:ring-blue-500 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.aria-selected\:bg-slate-900[aria-selected="true"] {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.aria-selected\:text-white[aria-selected="true"] {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.aria-selected\:shadow-sm[aria-selected="true"] {
    --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);
}
.hover\:-translate-y-0\.5:hover {
    --tw-translate-y: -0.125rem;
    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-blue-300:hover {
    --tw-border-opacity: 1;
    border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.hover\:border-emerald-300:hover {
    --tw-border-opacity: 1;
    border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}
.hover\:border-emerald-400:hover {
    --tw-border-opacity: 1;
    border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}
.hover\:border-emerald-500:hover {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.hover\:border-indigo-300:hover {
    --tw-border-opacity: 1;
    border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}
.hover\:border-neon-cyan\/40:hover {
    border-color: rgb(125 211 252 / 0.4);
}
.hover\:border-slate-300:hover {
    --tw-border-opacity: 1;
    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.hover\:border-slate-400:hover {
    --tw-border-opacity: 1;
    border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
}
.hover\:bg-amber-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(4 120 87 / 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-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}
.hover\:bg-orange-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(194 65 12 / var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(126 34 206 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / 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-800\/60:hover {
    background-color: rgb(153 27 27 / 0.6);
}
.hover\:bg-rose-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}
.hover\:bg-rose-500\/20:hover {
    background-color: rgb(244 63 94 / 0.2);
}
.hover\:bg-rose-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(190 18 60 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-50\/50:hover {
    background-color: rgb(248 250 252 / 0.5);
}
.hover\:bg-slate-800:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-800\/30:hover {
    background-color: rgb(30 41 59 / 0.3);
}
.hover\:bg-slate-800\/60:hover {
    background-color: rgb(30 41 59 / 0.6);
}
.hover\:bg-slate-800\/70:hover {
    background-color: rgb(30 41 59 / 0.7);
}
.hover\:bg-slate-900:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.hover\:bg-violet-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(109 40 217 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white\/10:hover {
    background-color: rgb(255 255 255 / 0.1);
}
.hover\:bg-white\/5:hover {
    background-color: rgb(255 255 255 / 0.05);
}
.hover\:text-blue-300:hover {
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-600:hover {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-800:hover {
    --tw-text-opacity: 1;
    color: rgb(30 64 175 / 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-emerald-500:hover {
    --tw-text-opacity: 1;
    color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.hover\:text-emerald-600:hover {
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.hover\:text-emerald-700:hover {
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.hover\:text-emerald-800:hover {
    --tw-text-opacity: 1;
    color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}
.hover\:text-neon-purple:hover {
    --tw-text-opacity: 1;
    color: rgb(139 92 246 / var(--tw-text-opacity, 1));
}
.hover\:text-red-600:hover {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.hover\:text-rose-200:hover {
    --tw-text-opacity: 1;
    color: rgb(254 205 211 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-600:hover {
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-700:hover {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-800:hover {
    --tw-text-opacity: 1;
    color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-900:hover {
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.hover\:text-yellow-400:hover {
    --tw-text-opacity: 1;
    color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
    text-decoration-line: underline;
}
.hover\:decoration-slate-500:hover {
    text-decoration-color: #64748b;
}
.hover\:opacity-100:hover {
    opacity: 1;
}
.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-1: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(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);
}
.hover\:ring-emerald-400\/20:hover {
    --tw-ring-color: rgb(52 211 153 / 0.2);
}
.hover\:ring-emerald-400\/25:hover {
    --tw-ring-color: rgb(52 211 153 / 0.25);
}
.hover\:text-neon-purple:hover {
    color: #b537f2;
    text-shadow: 0 0 10px rgba(181, 55, 242, 0.8), 0 0 20px rgba(181, 55, 242, 0.5);
  }
.hover\:file\:bg-neon-cyan\/20::file-selector-button:hover {
    background-color: rgb(125 211 252 / 0.2);
}
.focus\:border-blue-500:focus {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.focus\:border-emerald-400:focus {
    --tw-border-opacity: 1;
    border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}
.focus\:border-emerald-500:focus {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.focus\:border-rose-400:focus {
    --tw-border-opacity: 1;
    border-color: rgb(251 113 133 / var(--tw-border-opacity, 1));
}
.focus\:border-rose-500:focus {
    --tw-border-opacity: 1;
    border-color: rgb(244 63 94 / var(--tw-border-opacity, 1));
}
.focus\:border-slate-400:focus {
    --tw-border-opacity: 1;
    border-color: rgb(148 163 184 / var(--tw-border-opacity, 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-emerald-400:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(52 211 153 / var(--tw-ring-opacity, 1));
}
.focus\:ring-emerald-400\/20:focus {
    --tw-ring-color: rgb(52 211 153 / 0.2);
}
.focus\:ring-emerald-400\/40:focus {
    --tw-ring-color: rgb(52 211 153 / 0.4);
}
.focus\:ring-emerald-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
}
.focus\:ring-emerald-500\/20:focus {
    --tw-ring-color: rgb(16 185 129 / 0.2);
}
.focus\:ring-emerald-500\/30:focus {
    --tw-ring-color: rgb(16 185 129 / 0.3);
}
.focus\:ring-emerald-500\/40:focus {
    --tw-ring-color: rgb(16 185 129 / 0.4);
}
.focus\:ring-emerald-600:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(5 150 105 / var(--tw-ring-opacity, 1));
}
.focus\:ring-red-600\/20:focus {
    --tw-ring-color: rgb(220 38 38 / 0.2);
}
.focus\:ring-rose-400\/20:focus {
    --tw-ring-color: rgb(251 113 133 / 0.2);
}
.focus\:ring-rose-500\/30:focus {
    --tw-ring-color: rgb(244 63 94 / 0.3);
}
.focus\:ring-slate-400:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(148 163 184 / var(--tw-ring-opacity, 1));
}
.focus\:ring-slate-400\/20:focus {
    --tw-ring-color: rgb(148 163 184 / 0.2);
}
.focus\:ring-slate-900\/10:focus {
    --tw-ring-color: rgb(15 23 42 / 0.1);
}
.focus\:ring-slate-900\/20:focus {
    --tw-ring-color: rgb(15 23 42 / 0.2);
}
.focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px;
}
.focus-visible\:not-sr-only:focus-visible {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}
.focus-visible\:fixed:focus-visible {
    position: fixed;
}
.focus-visible\:left-4:focus-visible {
    left: 1rem;
}
.focus-visible\:top-4:focus-visible {
    top: 1rem;
}
.focus-visible\:z-\[100\]:focus-visible {
    z-index: 100;
}
.focus-visible\:rounded-xl:focus-visible {
    border-radius: 0.75rem;
}
.focus-visible\:bg-white:focus-visible {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.focus-visible\:px-4:focus-visible {
    padding-left: 1rem;
    padding-right: 1rem;
}
.focus-visible\:py-2:focus-visible {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.focus-visible\:text-sm:focus-visible {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.focus-visible\:font-semibold:focus-visible {
    font-weight: 600;
}
.focus-visible\:text-slate-900:focus-visible {
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.focus-visible\:shadow-lg:focus-visible {
    --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);
}
.focus-visible\:outline-none:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.focus-visible\:ring-2:focus-visible {
    --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-visible\:ring-amber-500:focus-visible {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(245 158 11 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-blue-500:focus-visible {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-blue-600\/30:focus-visible {
    --tw-ring-color: rgb(37 99 235 / 0.3);
}
.focus-visible\:ring-emerald-400:focus-visible {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(52 211 153 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-emerald-500:focus-visible {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-emerald-500\/20:focus-visible {
    --tw-ring-color: rgb(16 185 129 / 0.2);
}
.focus-visible\:ring-emerald-500\/30:focus-visible {
    --tw-ring-color: rgb(16 185 129 / 0.3);
}
.focus-visible\:ring-emerald-500\/40:focus-visible {
    --tw-ring-color: rgb(16 185 129 / 0.4);
}
.focus-visible\:ring-purple-500:focus-visible {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-red-500:focus-visible {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-rose-300\/40:focus-visible {
    --tw-ring-color: rgb(253 164 175 / 0.4);
}
.focus-visible\:ring-slate-300:focus-visible {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(203 213 225 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-slate-400:focus-visible {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(148 163 184 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-slate-900\/10:focus-visible {
    --tw-ring-color: rgb(15 23 42 / 0.1);
}
.focus-visible\:ring-slate-900\/20:focus-visible {
    --tw-ring-color: rgb(15 23 42 / 0.2);
}
.focus-visible\:ring-slate-900\/30:focus-visible {
    --tw-ring-color: rgb(15 23 42 / 0.3);
}
.focus-visible\:ring-white\/30:focus-visible {
    --tw-ring-color: rgb(255 255 255 / 0.3);
}
.focus-visible\:ring-white\/40:focus-visible {
    --tw-ring-color: rgb(255 255 255 / 0.4);
}
.focus-visible\:ring-offset-2:focus-visible {
    --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-slate-900:focus-visible {
    --tw-ring-offset-color: #0f172a;
}
.focus-visible\:ring-offset-white:focus-visible {
    --tw-ring-offset-color: #fff;
}
.disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
}
.disabled\:bg-slate-50:disabled {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.disabled\:text-slate-400:disabled {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.disabled\:opacity-50:disabled {
    opacity: 0.5;
}
.disabled\:opacity-60:disabled {
    opacity: 0.6;
}
.dark\:divide-slate-800:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-divide-opacity, 1));
}
.dark\:divide-slate-800\/90:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(30 41 59 / 0.9);
}
.dark\:divide-white\/10:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(255 255 255 / 0.1);
}
.dark\:border-amber-700\/30:is(.dark *) {
    border-color: rgb(180 83 9 / 0.3);
}
.dark\:border-amber-700\/40:is(.dark *) {
    border-color: rgb(180 83 9 / 0.4);
}
.dark\:border-amber-700\/50:is(.dark *) {
    border-color: rgb(180 83 9 / 0.5);
}
.dark\:border-amber-800\/40:is(.dark *) {
    border-color: rgb(146 64 14 / 0.4);
}
.dark\:border-amber-800\/50:is(.dark *) {
    border-color: rgb(146 64 14 / 0.5);
}
.dark\:border-amber-800\/60:is(.dark *) {
    border-color: rgb(146 64 14 / 0.6);
}
.dark\:border-amber-900\/40:is(.dark *) {
    border-color: rgb(120 53 15 / 0.4);
}
.dark\:border-blue-700:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
}
.dark\:border-blue-800:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
}
.dark\:border-blue-800\/40:is(.dark *) {
    border-color: rgb(30 64 175 / 0.4);
}
.dark\:border-blue-900\/40:is(.dark *) {
    border-color: rgb(30 58 138 / 0.4);
}
.dark\:border-blue-900\/50:is(.dark *) {
    border-color: rgb(30 58 138 / 0.5);
}
.dark\:border-emerald-500\/20:is(.dark *) {
    border-color: rgb(16 185 129 / 0.2);
}
.dark\:border-emerald-500\/30:is(.dark *) {
    border-color: rgb(16 185 129 / 0.3);
}
.dark\:border-emerald-700\/40:is(.dark *) {
    border-color: rgb(4 120 87 / 0.4);
}
.dark\:border-emerald-700\/50:is(.dark *) {
    border-color: rgb(4 120 87 / 0.5);
}
.dark\:border-emerald-800:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
}
.dark\:border-emerald-800\/30:is(.dark *) {
    border-color: rgb(6 95 70 / 0.3);
}
.dark\:border-emerald-800\/40:is(.dark *) {
    border-color: rgb(6 95 70 / 0.4);
}
.dark\:border-emerald-800\/50:is(.dark *) {
    border-color: rgb(6 95 70 / 0.5);
}
.dark\:border-emerald-900\/40:is(.dark *) {
    border-color: rgb(6 78 59 / 0.4);
}
.dark\:border-emerald-900\/50:is(.dark *) {
    border-color: rgb(6 78 59 / 0.5);
}
.dark\:border-gray-600:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.dark\:border-green-800:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(22 101 52 / var(--tw-border-opacity, 1));
}
.dark\:border-green-900\/50:is(.dark *) {
    border-color: rgb(20 83 45 / 0.5);
}
.dark\:border-indigo-500\/20:is(.dark *) {
    border-color: rgb(99 102 241 / 0.2);
}
.dark\:border-orange-500\/20:is(.dark *) {
    border-color: rgb(249 115 22 / 0.2);
}
.dark\:border-orange-900\/50:is(.dark *) {
    border-color: rgb(124 45 18 / 0.5);
}
.dark\:border-purple-900\/50:is(.dark *) {
    border-color: rgb(88 28 135 / 0.5);
}
.dark\:border-red-800:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
}
.dark\:border-red-900\/40:is(.dark *) {
    border-color: rgb(127 29 29 / 0.4);
}
.dark\:border-red-900\/50:is(.dark *) {
    border-color: rgb(127 29 29 / 0.5);
}
.dark\:border-rose-800:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(159 18 57 / var(--tw-border-opacity, 1));
}
.dark\:border-rose-800\/50:is(.dark *) {
    border-color: rgb(159 18 57 / 0.5);
}
.dark\:border-rose-900\/40:is(.dark *) {
    border-color: rgb(136 19 55 / 0.4);
}
.dark\:border-sky-500\/20:is(.dark *) {
    border-color: rgb(14 165 233 / 0.2);
}
.dark\:border-slate-600:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}
.dark\:border-slate-700:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
.dark\:border-slate-700\/40:is(.dark *) {
    border-color: rgb(51 65 85 / 0.4);
}
.dark\:border-slate-700\/50:is(.dark *) {
    border-color: rgb(51 65 85 / 0.5);
}
.dark\:border-slate-700\/60:is(.dark *) {
    border-color: rgb(51 65 85 / 0.6);
}
.dark\:border-slate-700\/80:is(.dark *) {
    border-color: rgb(51 65 85 / 0.8);
}
.dark\:border-slate-800:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
}
.dark\:border-slate-800\/50:is(.dark *) {
    border-color: rgb(30 41 59 / 0.5);
}
.dark\:border-slate-800\/60:is(.dark *) {
    border-color: rgb(30 41 59 / 0.6);
}
.dark\:border-slate-900:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
}
.dark\:border-violet-500\/20:is(.dark *) {
    border-color: rgb(139 92 246 / 0.2);
}
.dark\:border-violet-700\/20:is(.dark *) {
    border-color: rgb(109 40 217 / 0.2);
}
.dark\:border-white\/10:is(.dark *) {
    border-color: rgb(255 255 255 / 0.1);
}
.dark\:border-white\/15:is(.dark *) {
    border-color: rgb(255 255 255 / 0.15);
}
.dark\:border-yellow-800:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(133 77 14 / var(--tw-border-opacity, 1));
}
.dark\:border-l-purple-500:is(.dark *) {
    --tw-border-opacity: 1;
    border-left-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}
.dark\:bg-amber-500:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.dark\:bg-amber-900\/20:is(.dark *) {
    background-color: rgb(120 53 15 / 0.2);
}
.dark\:bg-amber-900\/25:is(.dark *) {
    background-color: rgb(120 53 15 / 0.25);
}
.dark\:bg-amber-900\/30:is(.dark *) {
    background-color: rgb(120 53 15 / 0.3);
}
.dark\:bg-amber-950\/15:is(.dark *) {
    background-color: rgb(69 26 3 / 0.15);
}
.dark\:bg-amber-950\/30:is(.dark *) {
    background-color: rgb(69 26 3 / 0.3);
}
.dark\:bg-amber-950\/40:is(.dark *) {
    background-color: rgb(69 26 3 / 0.4);
}
.dark\:bg-black\/70:is(.dark *) {
    background-color: rgb(0 0 0 / 0.7);
}
.dark\:bg-blue-500:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.dark\:bg-blue-900\/20:is(.dark *) {
    background-color: rgb(30 58 138 / 0.2);
}
.dark\:bg-blue-900\/30:is(.dark *) {
    background-color: rgb(30 58 138 / 0.3);
}
.dark\:bg-blue-950\/30:is(.dark *) {
    background-color: rgb(23 37 84 / 0.3);
}
.dark\:bg-blue-950\/40:is(.dark *) {
    background-color: rgb(23 37 84 / 0.4);
}
.dark\:bg-emerald-400:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.dark\:bg-emerald-500:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.dark\:bg-emerald-500\/10:is(.dark *) {
    background-color: rgb(16 185 129 / 0.1);
}
.dark\:bg-emerald-600:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.dark\:bg-emerald-900:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(6 78 59 / var(--tw-bg-opacity, 1));
}
.dark\:bg-emerald-900\/20:is(.dark *) {
    background-color: rgb(6 78 59 / 0.2);
}
.dark\:bg-emerald-900\/30:is(.dark *) {
    background-color: rgb(6 78 59 / 0.3);
}
.dark\:bg-emerald-900\/40:is(.dark *) {
    background-color: rgb(6 78 59 / 0.4);
}
.dark\:bg-emerald-950:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(2 44 34 / var(--tw-bg-opacity, 1));
}
.dark\:bg-emerald-950\/20:is(.dark *) {
    background-color: rgb(2 44 34 / 0.2);
}
.dark\:bg-emerald-950\/30:is(.dark *) {
    background-color: rgb(2 44 34 / 0.3);
}
.dark\:bg-emerald-950\/40:is(.dark *) {
    background-color: rgb(2 44 34 / 0.4);
}
.dark\:bg-emerald-950\/50:is(.dark *) {
    background-color: rgb(2 44 34 / 0.5);
}
.dark\:bg-gray-700:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-900\/30:is(.dark *) {
    background-color: rgb(17 24 39 / 0.3);
}
.dark\:bg-green-900\/20:is(.dark *) {
    background-color: rgb(20 83 45 / 0.2);
}
.dark\:bg-green-900\/30:is(.dark *) {
    background-color: rgb(20 83 45 / 0.3);
}
.dark\:bg-green-950\/20:is(.dark *) {
    background-color: rgb(5 46 22 / 0.2);
}
.dark\:bg-green-950\/30:is(.dark *) {
    background-color: rgb(5 46 22 / 0.3);
}
.dark\:bg-green-950\/40:is(.dark *) {
    background-color: rgb(5 46 22 / 0.4);
}
.dark\:bg-indigo-500\/10:is(.dark *) {
    background-color: rgb(99 102 241 / 0.1);
}
.dark\:bg-indigo-900\/40:is(.dark *) {
    background-color: rgb(49 46 129 / 0.4);
}
.dark\:bg-orange-400:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));
}
.dark\:bg-orange-500\/10:is(.dark *) {
    background-color: rgb(249 115 22 / 0.1);
}
.dark\:bg-orange-900\/30:is(.dark *) {
    background-color: rgb(124 45 18 / 0.3);
}
.dark\:bg-orange-950\/30:is(.dark *) {
    background-color: rgb(67 20 7 / 0.3);
}
.dark\:bg-purple-950\/30:is(.dark *) {
    background-color: rgb(59 7 100 / 0.3);
}
.dark\:bg-purple-950\/40:is(.dark *) {
    background-color: rgb(59 7 100 / 0.4);
}
.dark\:bg-red-500:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.dark\:bg-red-900\/20:is(.dark *) {
    background-color: rgb(127 29 29 / 0.2);
}
.dark\:bg-red-900\/30:is(.dark *) {
    background-color: rgb(127 29 29 / 0.3);
}
.dark\:bg-red-950\/20:is(.dark *) {
    background-color: rgb(69 10 10 / 0.2);
}
.dark\:bg-red-950\/30:is(.dark *) {
    background-color: rgb(69 10 10 / 0.3);
}
.dark\:bg-rose-900\/20:is(.dark *) {
    background-color: rgb(136 19 55 / 0.2);
}
.dark\:bg-rose-900\/30:is(.dark *) {
    background-color: rgb(136 19 55 / 0.3);
}
.dark\:bg-rose-950:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(76 5 25 / var(--tw-bg-opacity, 1));
}
.dark\:bg-rose-950\/40:is(.dark *) {
    background-color: rgb(76 5 25 / 0.4);
}
.dark\:bg-sky-500\/10:is(.dark *) {
    background-color: rgb(14 165 233 / 0.1);
}
.dark\:bg-slate-100:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.dark\:bg-slate-600:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}
.dark\:bg-slate-700:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.dark\:bg-slate-700\/90:is(.dark *) {
    background-color: rgb(51 65 85 / 0.9);
}
.dark\:bg-slate-800:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.dark\:bg-slate-800\/30:is(.dark *) {
    background-color: rgb(30 41 59 / 0.3);
}
.dark\:bg-slate-800\/40:is(.dark *) {
    background-color: rgb(30 41 59 / 0.4);
}
.dark\:bg-slate-800\/50:is(.dark *) {
    background-color: rgb(30 41 59 / 0.5);
}
.dark\:bg-slate-800\/70:is(.dark *) {
    background-color: rgb(30 41 59 / 0.7);
}
.dark\:bg-slate-800\/80:is(.dark *) {
    background-color: rgb(30 41 59 / 0.8);
}
.dark\:bg-slate-900:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.dark\:bg-slate-900\/20:is(.dark *) {
    background-color: rgb(15 23 42 / 0.2);
}
.dark\:bg-slate-900\/25:is(.dark *) {
    background-color: rgb(15 23 42 / 0.25);
}
.dark\:bg-slate-900\/30:is(.dark *) {
    background-color: rgb(15 23 42 / 0.3);
}
.dark\:bg-slate-900\/40:is(.dark *) {
    background-color: rgb(15 23 42 / 0.4);
}
.dark\:bg-slate-900\/45:is(.dark *) {
    background-color: rgb(15 23 42 / 0.45);
}
.dark\:bg-slate-900\/50:is(.dark *) {
    background-color: rgb(15 23 42 / 0.5);
}
.dark\:bg-slate-900\/60:is(.dark *) {
    background-color: rgb(15 23 42 / 0.6);
}
.dark\:bg-slate-900\/70:is(.dark *) {
    background-color: rgb(15 23 42 / 0.7);
}
.dark\:bg-slate-900\/80:is(.dark *) {
    background-color: rgb(15 23 42 / 0.8);
}
.dark\:bg-slate-900\/95:is(.dark *) {
    background-color: rgb(15 23 42 / 0.95);
}
.dark\:bg-slate-950:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
}
.dark\:bg-slate-950\/10:is(.dark *) {
    background-color: rgb(2 6 23 / 0.1);
}
.dark\:bg-slate-950\/30:is(.dark *) {
    background-color: rgb(2 6 23 / 0.3);
}
.dark\:bg-slate-950\/40:is(.dark *) {
    background-color: rgb(2 6 23 / 0.4);
}
.dark\:bg-slate-950\/50:is(.dark *) {
    background-color: rgb(2 6 23 / 0.5);
}
.dark\:bg-slate-950\/60:is(.dark *) {
    background-color: rgb(2 6 23 / 0.6);
}
.dark\:bg-slate-950\/70:is(.dark *) {
    background-color: rgb(2 6 23 / 0.7);
}
.dark\:bg-slate-950\/80:is(.dark *) {
    background-color: rgb(2 6 23 / 0.8);
}
.dark\:bg-transparent:is(.dark *) {
    background-color: transparent;
}
.dark\:bg-violet-500\/10:is(.dark *) {
    background-color: rgb(139 92 246 / 0.1);
}
.dark\:bg-violet-900\/10:is(.dark *) {
    background-color: rgb(76 29 149 / 0.1);
}
.dark\:bg-violet-900\/30:is(.dark *) {
    background-color: rgb(76 29 149 / 0.3);
}
.dark\:bg-white:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.dark\:bg-white\/5:is(.dark *) {
    background-color: rgb(255 255 255 / 0.05);
}
.dark\:bg-yellow-800:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(133 77 14 / var(--tw-bg-opacity, 1));
}
.dark\:bg-yellow-900\/20:is(.dark *) {
    background-color: rgb(113 63 18 / 0.2);
}
.dark\:bg-yellow-900\/30:is(.dark *) {
    background-color: rgb(113 63 18 / 0.3);
}
.dark\:from-blue-900\/20:is(.dark *) {
    --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);
}
.dark\:from-emerald-500\/5:is(.dark *) {
    --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);
}
.dark\:from-emerald-900\/20:is(.dark *) {
    --tw-gradient-from: rgb(6 78 59 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(6 78 59 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-emerald-950\/40:is(.dark *) {
    --tw-gradient-from: rgb(2 44 34 / 0.4) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(2 44 34 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-slate-900:is(.dark *) {
    --tw-gradient-from: #0f172a var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-slate-900\/40:is(.dark *) {
    --tw-gradient-from: rgb(15 23 42 / 0.4) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-slate-950:is(.dark *) {
    --tw-gradient-from: #020617 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(2 6 23 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-slate-950\/30:is(.dark *) {
    --tw-gradient-from: rgb(2 6 23 / 0.3) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(2 6 23 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-slate-950\/40:is(.dark *) {
    --tw-gradient-from: rgb(2 6 23 / 0.4) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(2 6 23 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:via-amber-900\/10:is(.dark *) {
    --tw-gradient-to: rgb(120 53 15 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(120 53 15 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.dark\:via-slate-900:is(.dark *) {
    --tw-gradient-to: rgb(15 23 42 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #0f172a var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.dark\:via-slate-950\/30:is(.dark *) {
    --tw-gradient-to: rgb(2 6 23 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(2 6 23 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.dark\:via-slate-950\/60:is(.dark *) {
    --tw-gradient-to: rgb(2 6 23 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(2 6 23 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.dark\:via-slate-950\/80:is(.dark *) {
    --tw-gradient-to: rgb(2 6 23 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(2 6 23 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.dark\:to-emerald-900\/15:is(.dark *) {
    --tw-gradient-to: rgb(6 78 59 / 0.15) var(--tw-gradient-to-position);
}
.dark\:to-emerald-900\/20:is(.dark *) {
    --tw-gradient-to: rgb(6 78 59 / 0.2) var(--tw-gradient-to-position);
}
.dark\:to-emerald-950\/20:is(.dark *) {
    --tw-gradient-to: rgb(2 44 34 / 0.2) var(--tw-gradient-to-position);
}
.dark\:to-indigo-900\/20:is(.dark *) {
    --tw-gradient-to: rgb(49 46 129 / 0.2) var(--tw-gradient-to-position);
}
.dark\:to-slate-900:is(.dark *) {
    --tw-gradient-to: #0f172a var(--tw-gradient-to-position);
}
.dark\:to-slate-900\/30:is(.dark *) {
    --tw-gradient-to: rgb(15 23 42 / 0.3) var(--tw-gradient-to-position);
}
.dark\:to-slate-900\/50:is(.dark *) {
    --tw-gradient-to: rgb(15 23 42 / 0.5) var(--tw-gradient-to-position);
}
.dark\:to-slate-900\/80:is(.dark *) {
    --tw-gradient-to: rgb(15 23 42 / 0.8) var(--tw-gradient-to-position);
}
.dark\:to-slate-950:is(.dark *) {
    --tw-gradient-to: #020617 var(--tw-gradient-to-position);
}
.dark\:to-slate-950\/0:is(.dark *) {
    --tw-gradient-to: rgb(2 6 23 / 0) var(--tw-gradient-to-position);
}
.dark\:to-teal-950\/40:is(.dark *) {
    --tw-gradient-to: rgb(4 47 46 / 0.4) var(--tw-gradient-to-position);
}
.dark\:text-amber-100:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}
.dark\:text-amber-100\/70:is(.dark *) {
    color: rgb(254 243 199 / 0.7);
}
.dark\:text-amber-100\/80:is(.dark *) {
    color: rgb(254 243 199 / 0.8);
}
.dark\:text-amber-100\/90:is(.dark *) {
    color: rgb(254 243 199 / 0.9);
}
.dark\:text-amber-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.dark\:text-amber-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.dark\:text-amber-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-100:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.dark\:text-emerald-100:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 250 229 / var(--tw-text-opacity, 1));
}
.dark\:text-emerald-100\/90:is(.dark *) {
    color: rgb(209 250 229 / 0.9);
}
.dark\:text-emerald-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(167 243 208 / var(--tw-text-opacity, 1));
}
.dark\:text-emerald-200\/80:is(.dark *) {
    color: rgb(167 243 208 / 0.8);
}
.dark\:text-emerald-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.dark\:text-emerald-300\/90:is(.dark *) {
    color: rgb(110 231 183 / 0.9);
}
.dark\:text-emerald-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.dark\:text-green-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(187 247 208 / var(--tw-text-opacity, 1));
}
.dark\:text-green-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.dark\:text-indigo-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(199 210 254 / var(--tw-text-opacity, 1));
}
.dark\:text-indigo-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(165 180 252 / var(--tw-text-opacity, 1));
}
.dark\:text-indigo-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}
.dark\:text-orange-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(254 215 170 / var(--tw-text-opacity, 1));
}
.dark\:text-orange-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(253 186 116 / var(--tw-text-opacity, 1));
}
.dark\:text-orange-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.dark\:text-purple-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(233 213 255 / var(--tw-text-opacity, 1));
}
.dark\:text-red-100:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(254 226 226 / var(--tw-text-opacity, 1));
}
.dark\:text-red-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}
.dark\:text-red-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.dark\:text-red-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.dark\:text-rose-100:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 228 230 / var(--tw-text-opacity, 1));
}
.dark\:text-rose-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(254 205 211 / var(--tw-text-opacity, 1));
}
.dark\:text-rose-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}
.dark\:text-rose-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}
.dark\:text-sky-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(125 211 252 / var(--tw-text-opacity, 1));
}
.dark\:text-sky-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(56 189 248 / var(--tw-text-opacity, 1));
}
.dark\:text-slate-100:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.dark\:text-slate-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.dark\:text-slate-200\/80:is(.dark *) {
    color: rgb(226 232 240 / 0.8);
}
.dark\:text-slate-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.dark\:text-slate-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.dark\:text-slate-500:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.dark\:text-slate-600:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.dark\:text-slate-700:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.dark\:text-slate-900:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.dark\:text-violet-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(221 214 254 / var(--tw-text-opacity, 1));
}
.dark\:text-violet-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(196 181 253 / var(--tw-text-opacity, 1));
}
.dark\:text-violet-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(167 139 250 / var(--tw-text-opacity, 1));
}
.dark\:text-white:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dark\:text-yellow-100:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(254 249 195 / var(--tw-text-opacity, 1));
}
.dark\:text-yellow-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(254 240 138 / var(--tw-text-opacity, 1));
}
.dark\:text-yellow-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.dark\:decoration-slate-700:is(.dark *) {
    text-decoration-color: #334155;
}
.dark\:placeholder-blue-600:is(.dark *)::-moz-placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(37 99 235 / var(--tw-placeholder-opacity, 1));
}
.dark\:placeholder-blue-600:is(.dark *)::placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(37 99 235 / var(--tw-placeholder-opacity, 1));
}
.dark\:placeholder-slate-400:is(.dark *)::-moz-placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(148 163 184 / var(--tw-placeholder-opacity, 1));
}
.dark\:placeholder-slate-400:is(.dark *)::placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(148 163 184 / var(--tw-placeholder-opacity, 1));
}
.dark\:opacity-25:is(.dark *) {
    opacity: 0.25;
}
.dark\:mix-blend-screen:is(.dark *) {
    mix-blend-mode: screen;
}
.dark\:ring-1:is(.dark *) {
    --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);
}
.dark\:ring-amber-300\/50:is(.dark *) {
    --tw-ring-color: rgb(252 211 77 / 0.5);
}
.dark\:ring-blue-500\/50:is(.dark *) {
    --tw-ring-color: rgb(59 130 246 / 0.5);
}
.dark\:ring-emerald-500\/30:is(.dark *) {
    --tw-ring-color: rgb(16 185 129 / 0.3);
}
.dark\:ring-slate-100\/30:is(.dark *) {
    --tw-ring-color: rgb(241 245 249 / 0.3);
}
.dark\:ring-slate-700:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(51 65 85 / var(--tw-ring-opacity, 1));
}
.dark\:ring-slate-800:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(30 41 59 / var(--tw-ring-opacity, 1));
}
.dark\:ring-slate-900:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(15 23 42 / var(--tw-ring-opacity, 1));
}
.dark\:ring-slate-950:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(2 6 23 / var(--tw-ring-opacity, 1));
}
.dark\:ring-white\/10:is(.dark *) {
    --tw-ring-color: rgb(255 255 255 / 0.1);
}
.dark\:ring-white\/20:is(.dark *) {
    --tw-ring-color: rgb(255 255 255 / 0.2);
}
.dark\:scrollbar-thumb-slate-700:is(.dark *) {
    --scrollbar-thumb: #334155 !important;
}
.dark\:placeholder\:text-slate-500:is(.dark *)::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.dark\:placeholder\:text-slate-500:is(.dark *)::placeholder {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.group:hover .dark\:group-hover\:text-blue-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.group:hover .dark\:group-hover\:text-slate-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.dark\:aria-selected\:bg-slate-100[aria-selected="true"]:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.dark\:aria-selected\:text-slate-900[aria-selected="true"]:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.dark\:hover\:border-emerald-600:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(5 150 105 / var(--tw-border-opacity, 1));
}
.dark\:hover\:border-emerald-700:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(4 120 87 / var(--tw-border-opacity, 1));
}
.dark\:hover\:border-slate-500:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(100 116 139 / var(--tw-border-opacity, 1));
}
.dark\:hover\:bg-amber-600:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-blue-600:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-emerald-400:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-emerald-500:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-emerald-600:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-emerald-700:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-emerald-900\/50:hover:is(.dark *) {
    background-color: rgb(6 78 59 / 0.5);
}
.dark\:hover\:bg-emerald-950\/30:hover:is(.dark *) {
    background-color: rgb(2 44 34 / 0.3);
}
.dark\:hover\:bg-emerald-950\/50:hover:is(.dark *) {
    background-color: rgb(2 44 34 / 0.5);
}
.dark\:hover\:bg-red-600:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-red-950\/30:hover:is(.dark *) {
    background-color: rgb(69 10 10 / 0.3);
}
.dark\:hover\:bg-red-950\/50:hover:is(.dark *) {
    background-color: rgb(69 10 10 / 0.5);
}
.dark\:hover\:bg-slate-100:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-slate-200:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-slate-700:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-slate-800:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-slate-800\/30:hover:is(.dark *) {
    background-color: rgb(30 41 59 / 0.3);
}
.dark\:hover\:bg-slate-800\/50:hover:is(.dark *) {
    background-color: rgb(30 41 59 / 0.5);
}
.dark\:hover\:bg-slate-800\/60:hover:is(.dark *) {
    background-color: rgb(30 41 59 / 0.6);
}
.dark\:hover\:bg-slate-800\/70:hover:is(.dark *) {
    background-color: rgb(30 41 59 / 0.7);
}
.dark\:hover\:bg-slate-900:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-slate-900\/30:hover:is(.dark *) {
    background-color: rgb(15 23 42 / 0.3);
}
.dark\:hover\:bg-slate-900\/40:hover:is(.dark *) {
    background-color: rgb(15 23 42 / 0.4);
}
.dark\:hover\:bg-slate-900\/50:hover:is(.dark *) {
    background-color: rgb(15 23 42 / 0.5);
}
.dark\:hover\:bg-slate-950\/50:hover:is(.dark *) {
    background-color: rgb(2 6 23 / 0.5);
}
.dark\:hover\:bg-white:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-white\/10:hover:is(.dark *) {
    background-color: rgb(255 255 255 / 0.1);
}
.dark\:hover\:text-blue-400:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-emerald-300:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-emerald-400:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-slate-100:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-slate-200:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-slate-300:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.dark\:hover\:decoration-slate-400:hover:is(.dark *) {
    text-decoration-color: #94a3b8;
}
.dark\:focus\:border-blue-400:focus:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.dark\:focus\:ring-blue-400:focus:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity, 1));
}
.dark\:focus\:ring-blue-600:focus:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity, 1));
}
.dark\:focus\:ring-offset-slate-900:focus:is(.dark *) {
    --tw-ring-offset-color: #0f172a;
}
.dark\:focus-visible\:bg-slate-950:focus-visible:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
}
.dark\:focus-visible\:text-slate-100:focus-visible:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.dark\:focus-visible\:ring-slate-200\/20:focus-visible:is(.dark *) {
    --tw-ring-color: rgb(226 232 240 / 0.2);
}
.dark\:focus-visible\:ring-slate-200\/30:focus-visible:is(.dark *) {
    --tw-ring-color: rgb(226 232 240 / 0.3);
}
.dark\:focus-visible\:ring-offset-slate-950:focus-visible:is(.dark *) {
    --tw-ring-offset-color: #020617;
}
.dark\:disabled\:bg-slate-900:disabled:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.dark\:disabled\:text-slate-500:disabled:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px) {
    .sm\:inset-y-0 {
        top: 0px;
        bottom: 0px;
    }
    .sm\:bottom-\[6\.5rem\] {
        bottom: 6.5rem;
    }
    .sm\:left-auto {
        left: auto;
    }
    .sm\:right-0 {
        right: 0px;
    }
    .sm\:right-6 {
        right: 1.5rem;
    }
    .sm\:col-span-2 {
        grid-column: span 2 / span 2;
    }
    .sm\:col-span-4 {
        grid-column: span 4 / span 4;
    }
    .sm\:inline {
        display: inline;
    }
    .sm\:flex {
        display: flex;
    }
    .sm\:table-cell {
        display: table-cell;
    }
    .sm\:hidden {
        display: none;
    }
    .sm\:h-10 {
        height: 2.5rem;
    }
    .sm\:h-20 {
        height: 5rem;
    }
    .sm\:h-36 {
        height: 9rem;
    }
    .sm\:h-full {
        height: 100%;
    }
    .sm\:max-h-none {
        max-height: none;
    }
    .sm\:w-10 {
        width: 2.5rem;
    }
    .sm\:w-20 {
        width: 5rem;
    }
    .sm\:w-48 {
        width: 12rem;
    }
    .sm\:w-64 {
        width: 16rem;
    }
    .sm\:w-72 {
        width: 18rem;
    }
    .sm\:w-96 {
        width: 24rem;
    }
    .sm\:w-\[28rem\] {
        width: 28rem;
    }
    .sm\:w-auto {
        width: auto;
    }
    .sm\:max-w-\[calc\(100vw-3rem\)\] {
        max-width: calc(100vw - 3rem);
    }
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .sm\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .sm\:grid-cols-\[1\.4fr_0\.6fr_auto\] {
        grid-template-columns: 1.4fr 0.6fr auto;
    }
    .sm\:grid-cols-\[auto_1fr_1fr_1fr_auto\] {
        grid-template-columns: auto 1fr 1fr 1fr auto;
    }
    .sm\:flex-row {
        flex-direction: row;
    }
    .sm\:items-start {
        align-items: flex-start;
    }
    .sm\:items-end {
        align-items: flex-end;
    }
    .sm\:items-center {
        align-items: center;
    }
    .sm\:justify-end {
        justify-content: flex-end;
    }
    .sm\:justify-center {
        justify-content: center;
    }
    .sm\:justify-between {
        justify-content: space-between;
    }
    .sm\:rounded-none {
        border-radius: 0px;
    }
    .sm\:rounded-l-2xl {
        border-top-left-radius: 1rem;
        border-bottom-left-radius: 1rem;
    }
    .sm\:p-10 {
        padding: 2.5rem;
    }
    .sm\:p-6 {
        padding: 1.5rem;
    }
    .sm\:p-8 {
        padding: 2rem;
    }
    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .sm\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .sm\:py-12 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .sm\:pl-2 {
        padding-left: 0.5rem;
    }
    .sm\:pt-3 {
        padding-top: 0.75rem;
    }
    .sm\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .sm\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    .sm\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    .sm\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .sm\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    .sm\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
}
@media (min-width: 768px) {
    .md\:col-span-4 {
        grid-column: span 4 / span 4;
    }
    .md\:block {
        display: block;
    }
    .md\:flex {
        display: flex;
    }
    .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\:grid-cols-\[1\.2fr_1\.8fr\] {
        grid-template-columns: 1.2fr 1.8fr;
    }
    .md\:flex-row {
        flex-direction: row;
    }
}
@media (min-width: 1024px) {
    .lg\:sticky {
        position: sticky;
    }
    .lg\:top-6 {
        top: 1.5rem;
    }
    .lg\:col-span-1 {
        grid-column: span 1 / span 1;
    }
    .lg\:col-span-2 {
        grid-column: span 2 / span 2;
    }
    .lg\:col-span-3 {
        grid-column: span 3 / span 3;
    }
    .lg\:col-span-4 {
        grid-column: span 4 / span 4;
    }
    .lg\:col-span-5 {
        grid-column: span 5 / span 5;
    }
    .lg\:col-span-7 {
        grid-column: span 7 / span 7;
    }
    .lg\:col-span-8 {
        grid-column: span 8 / span 8;
    }
    .lg\:col-span-9 {
        grid-column: span 9 / span 9;
    }
    .lg\:block {
        display: block;
    }
    .lg\:flex {
        display: flex;
    }
    .lg\:grid {
        display: grid;
    }
    .lg\:hidden {
        display: none;
    }
    .lg\:h-12 {
        height: 3rem;
    }
    .lg\:h-24 {
        height: 6rem;
    }
    .lg\:w-12 {
        width: 3rem;
    }
    .lg\:w-24 {
        width: 6rem;
    }
    .lg\:-translate-y-4 {
        --tw-translate-y: -1rem;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
    .lg\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .lg\:grid-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
    .lg\:grid-cols-\[1\.05fr_0\.95fr\] {
        grid-template-columns: 1.05fr 0.95fr;
    }
    .lg\:grid-cols-\[1\.3fr_0\.7fr\] {
        grid-template-columns: 1.3fr 0.7fr;
    }
    .lg\:grid-cols-\[18rem_22rem_1fr\] {
        grid-template-columns: 18rem 22rem 1fr;
    }
    .lg\:grid-cols-\[1fr_0\.8fr\] {
        grid-template-columns: 1fr 0.8fr;
    }
    .lg\:grid-cols-\[1fr_18rem\] {
        grid-template-columns: 1fr 18rem;
    }
    .lg\:grid-cols-\[280px_minmax\(0\2c 1fr\)_260px\] {
        grid-template-columns: 280px minmax(0,1fr) 260px;
    }
    .lg\:grid-cols-\[2fr\2c 1fr\] {
        grid-template-columns: 2fr 1fr;
    }
    .lg\:grid-cols-\[2fr_1fr_1fr_1fr_1\.3fr_auto\] {
        grid-template-columns: 2fr 1fr 1fr 1fr 1.3fr auto;
    }
    .lg\:grid-cols-\[minmax\(0\2c 0\.85fr\)_minmax\(0\2c 1\.15fr\)\] {
        grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr);
    }
    .lg\:grid-cols-\[minmax\(0\2c 1\.15fr\)_minmax\(0\2c 0\.85fr\)\] {
        grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr);
    }
    .lg\:grid-cols-\[minmax\(0\2c 1fr\)_260px\] {
        grid-template-columns: minmax(0,1fr) 260px;
    }
    .lg\:flex-row {
        flex-direction: row;
    }
    .lg\:items-start {
        align-items: flex-start;
    }
    .lg\:items-center {
        align-items: center;
    }
    .lg\:justify-start {
        justify-content: flex-start;
    }
    .lg\:justify-between {
        justify-content: space-between;
    }
    .lg\:gap-10 {
        gap: 2.5rem;
    }
    .lg\:gap-3 {
        gap: 0.75rem;
    }
    .lg\:gap-4 {
        gap: 1rem;
    }
    .lg\:border-b-0 {
        border-bottom-width: 0px;
    }
    .lg\:border-r {
        border-right-width: 1px;
    }
    .lg\:p-12 {
        padding: 3rem;
    }
    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .lg\:py-14 {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
    .lg\:pb-28 {
        padding-bottom: 7rem;
    }
    .lg\:pt-36 {
        padding-top: 9rem;
    }
    .lg\:text-left {
        text-align: left;
    }
    .lg\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    .lg\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    .lg\:text-7xl {
        font-size: 4.5rem;
        line-height: 1;
    }
    .lg\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
}
@media (min-width: 1028px) {
    .min-\[1028px\]\:sticky {
        position: sticky;
    }
    .min-\[1028px\]\:top-24 {
        top: 6rem;
    }
    .min-\[1028px\]\:order-1 {
        order: 1;
    }
    .min-\[1028px\]\:order-2 {
        order: 2;
    }
    .min-\[1028px\]\:col-span-3 {
        grid-column: span 3 / span 3;
    }
    .min-\[1028px\]\:col-span-6 {
        grid-column: span 6 / span 6;
    }
    .min-\[1028px\]\:h-fit {
        height: -moz-fit-content;
        height: fit-content;
    }
    .min-\[1028px\]\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    .min-\[1028px\]\:gap-5 {
        gap: 1.25rem;
    }
    .min-\[1028px\]\:self-start {
        align-self: flex-start;
    }
}
@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));
    }
    .xl\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (min-width: 1536px) {
    .\32xl\:max-w-full {
        max-width: 100%;
    }
    .\32xl\:gap-8 {
        gap: 2rem;
    }
    .\32xl\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
.\[\&\.active\]\:bg-slate-900.active {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.\[\&\.active\]\:text-white.active {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.\[\&\.show\]\:pointer-events-auto.show {
    pointer-events: auto;
}
.\[\&\.show\]\:opacity-100.show {
    opacity: 1;
}