:root{--color-blue-50: #e8f0fe;--color-blue-100: #d0e1fd;--color-blue-200: #a1c3fb;--color-blue-300: #7aa3e6;--color-blue-400: #4a6eaf;--color-blue-500: #4369a0;--color-blue-600: #3b5998;--color-blue-700: #2a4d7a;--color-blue-800: #1e3a5f;--color-blue-900: #132844;--color-blue-950: #0a1929;--color-indigo-50: #eef2ff;--color-indigo-100: #e0e7ff;--color-indigo-200: #c7d2fe;--color-indigo-300: #a5b4fc;--color-indigo-400: #818cf8;--color-indigo-500: #667eea;--color-indigo-600: #5b5bd6;--color-indigo-700: #4f46e5;--color-indigo-800: #3730a3;--color-indigo-900: #312e81;--color-indigo-950: #1e1b4b;--color-gray-0: #ffffff;--color-gray-50: #f8f9fa;--color-gray-100: #f1f3f5;--color-gray-150: #e9ecef;--color-gray-200: #dee2e6;--color-gray-300: #ced4da;--color-gray-400: #adb5bd;--color-gray-500: #6c757d;--color-gray-600: #495057;--color-gray-700: #343a40;--color-gray-800: #212529;--color-gray-900: #1e1e1e;--color-gray-950: #121212;--color-gray-1000: #000000;--color-green-50: #f0fdf4;--color-green-100: #dcfce7;--color-green-200: #bbf7d0;--color-green-300: #86efac;--color-green-400: #4ade80;--color-green-500: #28a745;--color-green-600: #16a34a;--color-green-700: #15803d;--color-green-800: #166534;--color-green-900: #14532d;--color-green-950: #052e16;--color-red-50: #fef2f2;--color-red-100: #fee2e2;--color-red-200: #fecaca;--color-red-300: #fca5a5;--color-red-400: #f87171;--color-red-500: #dc3545;--color-red-600: #dc2626;--color-red-700: #b91c1c;--color-red-800: #991b1b;--color-red-900: #7f1d1d;--color-red-950: #450a0a;--color-yellow-50: #fefce8;--color-yellow-100: #fef9c3;--color-yellow-200: #fef08a;--color-yellow-300: #fde047;--color-yellow-400: #facc15;--color-yellow-500: #ffc107;--color-yellow-600: #ca8a04;--color-yellow-700: #a16207;--color-yellow-800: #854d0e;--color-yellow-900: #713f12;--color-yellow-950: #422006;--color-orange-50: #fff7ed;--color-orange-100: #ffedd5;--color-orange-200: #fed7aa;--color-orange-300: #fdba74;--color-orange-400: #fb923c;--color-orange-500: #f97316;--color-orange-600: #ea580c;--color-orange-700: #c2410c;--color-orange-800: #9a3412;--color-orange-900: #7c2d12;--color-orange-950: #431407;--color-teal-50: #f0fdfa;--color-teal-100: #ccfbf1;--color-teal-200: #99f6e4;--color-teal-300: #5eead4;--color-teal-400: #2dd4bf;--color-teal-500: #17a2b8;--color-teal-600: #0d9488;--color-teal-700: #0f766e;--color-teal-800: #115e59;--color-teal-900: #134e4a;--color-teal-950: #042f2e;--color-lime-50: #f7fee7;--color-lime-100: #ecfccb;--color-lime-200: #d9f99d;--color-lime-300: #bef264;--color-lime-400: #a3e635;--color-lime-500: #84cc16;--color-lime-600: #65a30d;--color-lime-700: #4d7c0f;--color-lime-800: #3f6212;--color-lime-900: #365314;--color-lime-950: #1a2e05;--color-purple-50: #faf5ff;--color-purple-100: #f3e8ff;--color-purple-200: #e9d5ff;--color-purple-300: #d8b4fe;--color-purple-400: #c084fc;--color-purple-500: #a855f7;--color-purple-600: #9333ea;--color-purple-700: #764ba2;--color-purple-800: #6b21a8;--color-purple-900: #581c87;--color-purple-950: #3b0764;--color-google: #db4437;--color-facebook: #4267b2;--color-apple: #000000}:root{--cl-primary: var(--color-blue-500);--cl-primary-hover: var(--color-blue-700);--cl-primary-light: var(--color-blue-50);--cl-primary-lighter: var(--color-blue-100);--cl-primary-accent: var(--color-blue-300);--cl-primary-muted: var(--color-blue-400);--cl-secondary: var(--color-blue-700);--cl-secondary-hover: var(--color-blue-800);--cl-accent: var(--color-teal-500);--cl-bg: #f5f7fa;--cl-bg-card: var(--color-gray-0);--cl-bg-elevated: var(--color-gray-0);--cl-bg-muted: var(--color-gray-50);--cl-bg-subtle: var(--color-gray-100);--cl-bg-input: var(--color-gray-0);--cl-text: var(--color-gray-800);--cl-text-secondary: var(--color-gray-600);--cl-text-muted: var(--color-gray-500);--cl-text-placeholder: var(--color-gray-400);--cl-text-inverse: var(--color-gray-0);--cl-text-on-primary: var(--color-gray-0);--cl-border: var(--color-gray-200);--cl-border-light: var(--color-gray-150);--cl-border-input: var(--color-gray-200);--cl-border-focus: var(--cl-primary);--cl-success: var(--color-green-500);--cl-success-light: var(--color-green-50);--cl-info: var(--color-teal-500);--cl-info-light: var(--color-teal-50);--cl-warning: var(--color-yellow-500);--cl-warning-light: var(--color-yellow-50);--cl-danger: var(--color-red-500);--cl-danger-light: var(--color-red-50);--cl-link: var(--cl-primary);--cl-link-hover: var(--cl-primary-hover);--cl-focus-ring: rgba(67, 105, 160, .25);--cl-hover-overlay: rgba(0, 0, 0, .03);--cl-shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);--cl-shadow-sm: 0 2px 4px rgba(0, 0, 0, .06);--cl-shadow: 0 4px 12px rgba(0, 0, 0, .08);--cl-shadow-md: 0 6px 18px rgba(0, 0, 0, .12);--cl-shadow-lg: 0 10px 30px rgba(0, 0, 0, .1);--cl-shadow-header: 0 4px 12px rgba(0, 0, 0, .1);--cl-shadow-modal: 0 20px 60px rgba(0, 0, 0, .15), 0 8px 24px rgba(0, 0, 0, .1), 0 0 0 1px rgba(0, 0, 0, .04);--cl-shadow-modal-sheet: 0 -4px 32px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .04);--cl-shadow-float-xs: 0 2px 8px rgba(0, 0, 0, .06);--cl-shadow-float-sm: 0 2px 8px rgba(0, 0, 0, .15);--cl-shadow-float-md: 0 8px 24px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06);--cl-shadow-float-lg: 0 12px 40px rgba(0, 0, 0, .12), 0 4px 12px rgba(0, 0, 0, .06);--cl-highlight-yellow: rgba(255, 255, 0, .3);--cl-highlight-blue: rgba(0, 0, 255, .3);--cl-highlight-green: rgba(0, 255, 0, .3);--cl-highlight-pink: rgba(255, 0, 255, .3);--cl-highlight-purple: color-mix( in srgb, var(--color-purple-400) 30%, transparent );--cl-highlight-red: color-mix(in srgb, var(--color-red-300) 30%, transparent);--cl-words-of-christ: #d32f2f;--cl-gradient-primary: linear-gradient( 135deg, var(--color-indigo-500), var(--color-purple-700) );--cl-gradient-summary: linear-gradient( 145deg, var(--color-gray-0), var(--color-blue-50) );--cl-slider-track: var(--color-gray-200);--cl-slider-thumb: var(--color-blue-400);--cl-slider-thumb-hover: var(--color-blue-300);--cl-slider-progress: var(--color-blue-200);--cl-divider: rgba(0, 0, 0, .1);--cl-overlay: rgba(0, 0, 0, .5);--cl-scrollbar-thumb: color-mix( in srgb, var(--cl-primary), var(--cl-bg-card) 72% );--cl-scrollbar-track: color-mix( in srgb, var(--cl-bg-muted), var(--cl-bg-card) 68% );--cl-note-indicator: var(--color-yellow-500);--cl-note-indicator-hover: var(--color-orange-500);--cl-badge-bg: var(--color-blue-400);--cl-app-chrome-surface-start: var(--cl-primary);--cl-app-chrome-surface-mid: color-mix( in srgb, var(--cl-primary), var(--cl-secondary) 35% );--cl-app-chrome-surface-end: var(--cl-secondary);--cl-app-chrome-brand-bg: color-mix( in srgb, var(--cl-primary), var(--cl-secondary) 28% );--cl-app-chrome-border: color-mix( in srgb, var(--cl-text-on-primary), transparent 84% );--cl-app-chrome-border-soft: color-mix( in srgb, var(--cl-text-on-primary), transparent 88% );--cl-app-chrome-shadow: 2px 0 18px rgba(23, 44, 82, .3);--cl-app-chrome-sheen: linear-gradient( 90deg, color-mix(in srgb, var(--cl-text-on-primary), transparent 92%), transparent, color-mix(in srgb, var(--cl-text-on-primary), transparent 95%) );--cl-app-search-bg: color-mix( in srgb, var(--cl-primary), var(--cl-bg-card) 20% );--cl-app-search-border: color-mix( in srgb, var(--cl-text-on-primary), transparent 78% );--cl-app-search-inset: color-mix( in srgb, var(--cl-text-on-primary), transparent 92% );--cl-app-search-focus-border: color-mix( in srgb, var(--cl-text-on-primary), transparent 58% );--cl-app-search-focus-ring: color-mix( in srgb, var(--cl-text-on-primary), transparent 86% );--cl-app-nav-active-bg: color-mix( in srgb, var(--cl-secondary), transparent 18% );--cl-app-nav-active-border: color-mix( in srgb, var(--cl-text-on-primary), transparent 82% );--cl-app-footer-bg: color-mix( in srgb, var(--cl-secondary), var(--cl-primary) 42% );--cl-notification-badge-ring: var(--cl-primary);--cl-dashboard-card-shadow: 0 8px 24px rgba(27, 45, 79, .06);--cl-dashboard-hover-shadow: 0 10px 18px rgba(39, 50, 72, .08);--cl-dashboard-hero-bg: linear-gradient( 115deg, rgba(248, 244, 237, .9) 0%, rgba(242, 234, 223, .78) 55%, rgba(239, 221, 194, .68) 100% );--cl-dashboard-hero-before-bg: radial-gradient( circle at 30% 30%, rgba(255, 255, 255, .82), transparent 45% ), linear-gradient(145deg, rgba(183, 141, 90, .28), rgba(141, 112, 74, .18));--cl-dashboard-hero-after-bg: radial-gradient( circle, rgba(237, 206, 157, .24), transparent 68% );--cl-dashboard-continue-bg: color-mix( in srgb, var(--cl-bg-card), transparent 14% );--cl-dashboard-continue-shadow: 0 12px 28px rgba(45, 58, 83, .08);--cl-dashboard-explore-panel-bg: linear-gradient( 180deg, color-mix(in srgb, var(--cl-bg-card), transparent 8%), color-mix(in srgb, var(--cl-bg-muted), transparent 8%) );--cl-dashboard-explore-panel-glow: radial-gradient( circle at 12% 10%, color-mix(in srgb, var(--cl-primary), transparent 78%), transparent 40% );--cl-dashboard-chart-line: var(--color-blue-400);--cl-dashboard-chart-point: var(--color-orange-500);--cl-dashboard-chart-area: color-mix( in srgb, var(--color-blue-400), transparent 82% );--cl-dashboard-chart-point-border: var(--cl-bg-card);--cl-audio-panel-border: color-mix( in srgb, var(--cl-border), transparent 18% );--cl-audio-panel-border-strong: color-mix( in srgb, var(--cl-border), transparent 8% );--cl-audio-divider: color-mix(in srgb, var(--cl-border), transparent 16%);--cl-audio-surface-glow: color-mix( in srgb, var(--cl-primary), transparent 92% );--cl-audio-surface-accent: color-mix( in srgb, var(--cl-note-indicator), transparent 90% );--cl-audio-pill-bg: color-mix( in srgb, var(--cl-bg-card), var(--cl-bg-muted) 68% );--cl-audio-pill-border: color-mix( in srgb, var(--cl-border-light), transparent 10% );--cl-audio-pill-active-bg: linear-gradient( 180deg, var(--cl-primary-accent), var(--cl-primary) );--cl-audio-pill-active-text: var(--cl-text-on-primary);--cl-audio-slider-card-bg: color-mix( in srgb, var(--cl-bg-card), var(--cl-bg-muted) 58% );--cl-audio-slider-card-border: color-mix( in srgb, var(--cl-border), transparent 20% );--cl-audio-switch-bg: color-mix(in srgb, var(--cl-border), transparent 30%);--cl-audio-switch-active-bg: linear-gradient( 180deg, var(--cl-primary-accent), var(--cl-primary) );--cl-audio-switch-thumb: var(--cl-bg-card);--cl-audio-avatar-bg: linear-gradient( 180deg, var(--cl-primary-accent), var(--cl-primary) );--cl-audio-avatar-text: var(--cl-text-on-primary);--cl-audio-accent-surface: color-mix( in srgb, var(--cl-warning-light), var(--cl-bg-card) 28% );--cl-audio-accent-border: color-mix( in srgb, var(--cl-note-indicator), transparent 74% );--cl-audio-accent-text: color-mix( in srgb, var(--cl-note-indicator-hover), var(--cl-text) 38% );--cl-audio-verse-hover-bg: color-mix( in srgb, var(--cl-primary), transparent 94% );--cl-audio-verse-active-bg: linear-gradient( 135deg, color-mix(in srgb, var(--cl-warning), transparent 80%), color-mix(in srgb, var(--cl-warning-light), var(--cl-bg-card) 26%) );--cl-audio-verse-active-border: color-mix( in srgb, var(--cl-note-indicator), transparent 76% );--cl-audio-spotlight-bg: linear-gradient( 135deg, color-mix(in srgb, var(--cl-warning), transparent 82%), color-mix(in srgb, var(--cl-warning-light), var(--cl-bg-card) 22%) );--cl-audio-spotlight-shadow: var(--cl-shadow-sm);--cl-audio-indicator-bg: linear-gradient( 180deg, var(--cl-warning), var(--cl-note-indicator-hover) );--cl-audio-player-cta-bg: linear-gradient( 180deg, var(--cl-primary-accent), var(--cl-secondary) );--cl-audio-player-cta-bg-hover: linear-gradient( 180deg, var(--cl-primary), var(--cl-secondary-hover) );--cl-audio-player-cta-text: var(--cl-text-on-primary);--cl-audio-player-cta-shadow: var(--cl-shadow-md);--cl-audio-waveform-neutral: linear-gradient( 180deg, color-mix(in srgb, var(--cl-border-light), var(--cl-bg-card) 18%), color-mix(in srgb, var(--cl-border), transparent 36%) );--cl-audio-waveform-gold: linear-gradient( 180deg, color-mix(in srgb, var(--cl-warning), var(--cl-bg-card) 14%), var(--cl-note-indicator-hover) );--cl-audio-waveform-blue: linear-gradient( 180deg, color-mix(in srgb, var(--cl-primary-accent), var(--cl-bg-card) 10%), var(--cl-primary) );--cl-audio-waveform-shadow: 0 0 .35rem color-mix(in srgb, var(--cl-primary), transparent 72%);--cl-coming-soon-shadow: 0 14px 40px rgba(15, 23, 42, .08);--cl-coming-soon-badge-bg: var(--cl-text);--cl-coming-soon-badge-text: var(--cl-text-on-primary);--cl-coming-soon-btn-border: var(--cl-text);--cl-coming-soon-btn-bg: transparent;--cl-coming-soon-btn-text: var(--cl-text);--cl-coming-soon-btn-primary-bg: var(--cl-text);--cl-coming-soon-btn-primary-text: var(--cl-text-on-primary);--cl-coming-soon-btn-hover-shadow: 0 8px 22px rgba(15, 23, 42, .15);--cl-settings-page-backdrop: radial-gradient( circle at top right, color-mix(in srgb, var(--cl-warning), transparent 84%), transparent 34% ), radial-gradient( circle at 14% 18%, color-mix(in srgb, var(--cl-primary), transparent 90%), transparent 30% ), linear-gradient( 180deg, color-mix(in srgb, var(--cl-bg-card), transparent 20%), transparent );--cl-settings-shell-bg: linear-gradient( 180deg, color-mix(in srgb, var(--cl-bg-card), var(--cl-bg) 10%), color-mix(in srgb, var(--cl-bg-muted), var(--cl-bg-card) 36%) );--cl-settings-elevated-surface: color-mix( in srgb, var(--cl-bg-card), var(--cl-bg-muted) 22% );--cl-settings-panel-border: color-mix( in srgb, var(--cl-border), transparent 18% );--cl-settings-panel-shadow: var(--cl-shadow-lg);--cl-settings-divider: color-mix(in srgb, var(--cl-border), transparent 24%);--cl-settings-title: var(--cl-text);--cl-settings-copy-muted: var(--cl-text-secondary);--cl-settings-section-label: color-mix( in srgb, var(--cl-primary), var(--cl-warning) 32% );--cl-settings-chip-bg: color-mix( in srgb, var(--cl-bg-card), transparent 10% );--cl-settings-chip-text: var(--cl-text);--cl-settings-tab-bg: color-mix( in srgb, var(--cl-bg-card), var(--cl-bg-muted) 18% );--cl-settings-tab-bg-active: linear-gradient( 180deg, color-mix(in srgb, var(--cl-primary-light), var(--cl-bg-card) 36%), color-mix(in srgb, var(--cl-warning-light), var(--cl-bg-card) 18%) );--cl-settings-tab-border: color-mix( in srgb, var(--cl-border), transparent 20% );--cl-settings-tab-border-active: color-mix( in srgb, var(--cl-primary), transparent 58% );--cl-settings-tab-badge-bg: color-mix( in srgb, var(--cl-primary), transparent 84% );--cl-settings-tab-badge-text: var(--cl-text);--cl-settings-inner-border: color-mix( in srgb, var(--cl-border), transparent 26% );--cl-settings-hero-bg: linear-gradient( 150deg, color-mix(in srgb, var(--cl-primary), var(--cl-bg-card) 10%), color-mix(in srgb, var(--cl-secondary), var(--cl-warning) 16%) );--cl-settings-avatar-ring: color-mix( in srgb, var(--cl-text-on-primary), transparent 78% );--cl-settings-avatar-frame-bg: linear-gradient( 180deg, color-mix(in srgb, var(--cl-text-on-primary), transparent 90%), color-mix(in srgb, var(--cl-text-on-primary), transparent 96%) );--cl-settings-badge-bg: linear-gradient( 180deg, var(--cl-warning), color-mix(in srgb, var(--cl-warning), var(--cl-primary) 22%) );--cl-settings-badge-text: var(--cl-text-inverse);--cl-settings-input-bg: color-mix( in srgb, var(--cl-bg-input), var(--cl-bg-card) 22% );--cl-settings-input-border: color-mix( in srgb, var(--cl-border-input), transparent 14% );--cl-settings-input-border-focus: var(--cl-border-focus);--cl-settings-input-highlight: color-mix( in srgb, var(--cl-bg-card), transparent 10% );--cl-settings-focus-ring: color-mix( in srgb, var(--cl-focus-ring), transparent 8% );--cl-settings-primary-action-bg: linear-gradient( 180deg, var(--cl-primary-accent), var(--cl-primary) );--cl-settings-primary-action-text: var(--cl-text-on-primary);--cl-settings-secondary-action-bg: color-mix( in srgb, var(--cl-text-on-primary), transparent 88% );--cl-settings-secondary-action-border: color-mix( in srgb, var(--cl-text-on-primary), transparent 80% );--cl-settings-secondary-action-text: var(--cl-text-on-primary);--cl-settings-ghost-action-bg: color-mix( in srgb, var(--cl-bg-card), transparent 8% );--cl-settings-ghost-action-border: color-mix( in srgb, var(--cl-border), transparent 18% );--cl-settings-ghost-action-text: var(--cl-text);--cl-settings-status-pulse-bg: linear-gradient( 180deg, var(--cl-warning), color-mix(in srgb, var(--cl-warning), var(--cl-primary) 24%) )}body.dark-mode,.dark{--cl-primary: var(--color-blue-300);--cl-primary-hover: var(--color-blue-200);--cl-primary-light: rgba(122, 163, 230, .1);--cl-primary-lighter: rgba(122, 163, 230, .15);--cl-primary-accent: var(--color-blue-400);--cl-primary-muted: var(--color-blue-300);--cl-secondary: var(--color-blue-300);--cl-secondary-hover: var(--color-blue-200);--cl-accent: var(--color-teal-300);--cl-bg: var(--color-gray-950);--cl-bg-card: var(--color-gray-900);--cl-bg-elevated: var(--color-gray-700);--cl-bg-muted: rgba(255, 255, 255, .05);--cl-bg-subtle: rgba(255, 255, 255, .08);--cl-bg-input: var(--color-gray-700);--cl-text: #f0f0f0;--cl-text-secondary: #cccccc;--cl-text-muted: #aaaaaa;--cl-text-placeholder: #888888;--cl-text-inverse: var(--color-gray-900);--cl-text-on-primary: var(--color-gray-0);--cl-border: #333333;--cl-border-light: #2a2a2a;--cl-border-input: #444444;--cl-border-focus: var(--cl-primary);--cl-success: var(--color-green-400);--cl-success-light: rgba(40, 167, 69, .15);--cl-info: var(--color-teal-300);--cl-info-light: rgba(23, 162, 184, .15);--cl-warning: var(--color-yellow-400);--cl-warning-light: rgba(255, 193, 7, .15);--cl-danger: var(--color-red-400);--cl-danger-light: rgba(220, 53, 69, .15);--cl-link: var(--cl-primary);--cl-link-hover: var(--cl-primary-hover);--cl-focus-ring: rgba(122, 163, 230, .3);--cl-hover-overlay: rgba(255, 255, 255, .05);--cl-shadow-xs: 0 1px 2px rgba(0, 0, 0, .2);--cl-shadow-sm: 0 2px 4px rgba(0, 0, 0, .25);--cl-shadow: 0 4px 12px rgba(0, 0, 0, .3);--cl-shadow-md: 0 6px 18px rgba(0, 0, 0, .35);--cl-shadow-lg: 0 10px 30px rgba(0, 0, 0, .4);--cl-shadow-header: 0 4px 12px rgba(0, 0, 0, .3);--cl-shadow-modal: 0 20px 60px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .04);--cl-shadow-modal-sheet: 0 -4px 32px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .04);--cl-shadow-float-xs: 0 2px 8px rgba(0, 0, 0, .24);--cl-shadow-float-sm: 0 2px 8px rgba(0, 0, 0, .36);--cl-shadow-float-md: 0 8px 24px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);--cl-shadow-float-lg: 0 12px 40px rgba(0, 0, 0, .42), 0 4px 12px rgba(0, 0, 0, .34);--cl-highlight-yellow: rgba(255, 255, 0, .2);--cl-highlight-blue: rgba(80, 130, 255, .25);--cl-highlight-green: rgba(80, 220, 80, .25);--cl-highlight-pink: rgba(255, 80, 255, .25);--cl-words-of-christ: #ff6b6b;--cl-gradient-summary: linear-gradient( 145deg, var(--color-gray-900), var(--color-gray-800) );--cl-slider-track: #3a3a3a;--cl-slider-thumb: var(--color-blue-300);--cl-slider-thumb-hover: var(--color-blue-200);--cl-slider-progress: var(--color-blue-400);--cl-divider: rgba(255, 255, 255, .1);--cl-overlay: rgba(0, 0, 0, .7);--cl-note-indicator: var(--color-yellow-400);--cl-note-indicator-hover: var(--color-orange-400);--cl-badge-bg: var(--color-blue-300);--cl-app-chrome-surface-start: var(--color-gray-900);--cl-app-chrome-surface-mid: color-mix( in srgb, var(--color-gray-900), var(--color-gray-800) 42% );--cl-app-chrome-surface-end: var(--color-gray-950);--cl-app-chrome-brand-bg: color-mix( in srgb, var(--color-gray-900), var(--color-gray-950) 30% );--cl-app-chrome-border: color-mix( in srgb, var(--color-gray-0), transparent 90% );--cl-app-chrome-border-soft: color-mix( in srgb, var(--color-gray-0), transparent 92% );--cl-app-chrome-shadow: 2px 0 22px rgba(0, 0, 0, .55);--cl-app-chrome-sheen: linear-gradient( 90deg, color-mix(in srgb, var(--color-gray-0), transparent 97%), transparent, color-mix(in srgb, var(--color-gray-0), transparent 98%) );--cl-app-search-bg: color-mix( in srgb, var(--color-gray-900), var(--color-gray-800) 34% );--cl-app-search-border: color-mix( in srgb, var(--color-gray-0), transparent 88% );--cl-app-search-inset: color-mix( in srgb, var(--color-gray-0), transparent 97% );--cl-app-search-focus-border: color-mix( in srgb, var(--color-gray-0), transparent 78% );--cl-app-search-focus-ring: color-mix( in srgb, var(--color-gray-0), transparent 92% );--cl-app-nav-active-bg: color-mix( in srgb, var(--cl-primary), transparent 78% );--cl-app-nav-active-border: color-mix( in srgb, var(--color-gray-0), transparent 90% );--cl-app-footer-bg: color-mix( in srgb, var(--color-gray-900), var(--color-gray-800) 44% );--cl-notification-badge-ring: var(--color-gray-900);--cl-dashboard-card-shadow: 0 10px 30px rgba(0, 0, 0, .35);--cl-dashboard-hover-shadow: 0 12px 28px rgba(0, 0, 0, .4);--cl-dashboard-hero-bg: linear-gradient( 115deg, color-mix(in srgb, var(--color-gray-900), var(--color-orange-900) 8%) 0%, color-mix(in srgb, var(--color-gray-900), var(--color-orange-900) 13%) 55%, color-mix(in srgb, var(--color-gray-900), var(--color-orange-950) 18%) 100% );--cl-dashboard-hero-before-bg: radial-gradient( circle at 30% 30%, color-mix(in srgb, var(--color-gray-0), transparent 90%), transparent 45% ), linear-gradient( 145deg, color-mix(in srgb, var(--color-orange-500), transparent 86%), color-mix(in srgb, var(--color-orange-700), transparent 92%) );--cl-dashboard-hero-after-bg: radial-gradient( circle, color-mix(in srgb, var(--color-orange-300), transparent 90%), transparent 70% );--cl-dashboard-continue-bg: color-mix( in srgb, var(--cl-bg-card), transparent 4% );--cl-dashboard-continue-shadow: 0 12px 28px rgba(0, 0, 0, .35);--cl-dashboard-explore-panel-bg: linear-gradient( 180deg, color-mix(in srgb, var(--color-gray-900), var(--color-gray-800) 24%), color-mix(in srgb, var(--color-gray-900), var(--color-gray-800) 42%) );--cl-dashboard-explore-panel-glow: radial-gradient( circle at 12% 10%, color-mix(in srgb, var(--cl-primary), transparent 86%), transparent 44% );--cl-dashboard-chart-line: var(--color-blue-300);--cl-dashboard-chart-point: var(--color-orange-400);--cl-dashboard-chart-area: color-mix( in srgb, var(--color-blue-300), transparent 84% );--cl-dashboard-chart-point-border: var(--color-gray-900);--cl-scrollbar-thumb: color-mix( in srgb, var(--cl-primary), var(--cl-bg-card) 84% );--cl-scrollbar-track: color-mix( in srgb, var(--cl-bg-muted), var(--cl-bg-card) 84% );--cl-audio-panel-border: color-mix( in srgb, var(--cl-border), transparent 10% );--cl-audio-panel-border-strong: color-mix( in srgb, var(--cl-border), transparent 2% );--cl-audio-divider: color-mix(in srgb, var(--cl-border), transparent 12%);--cl-audio-surface-glow: color-mix( in srgb, var(--cl-primary), transparent 94% );--cl-audio-surface-accent: color-mix( in srgb, var(--cl-note-indicator), transparent 92% );--cl-audio-pill-bg: color-mix( in srgb, var(--cl-bg-card), var(--cl-bg-muted) 46% );--cl-audio-pill-border: color-mix(in srgb, var(--cl-border), transparent 6%);--cl-audio-pill-active-bg: linear-gradient( 180deg, color-mix(in srgb, var(--cl-primary-accent), var(--cl-bg-card) 10%), var(--cl-primary) );--cl-audio-pill-active-text: var(--cl-text-on-primary);--cl-audio-slider-card-bg: color-mix( in srgb, var(--cl-bg-card), var(--cl-bg-muted) 32% );--cl-audio-slider-card-border: color-mix( in srgb, var(--cl-border), transparent 8% );--cl-audio-switch-bg: color-mix(in srgb, var(--cl-border), transparent 18%);--cl-audio-switch-active-bg: linear-gradient( 180deg, color-mix(in srgb, var(--cl-primary-accent), var(--cl-bg-card) 8%), var(--cl-primary) );--cl-audio-switch-thumb: var(--cl-bg-card);--cl-audio-avatar-bg: linear-gradient( 180deg, color-mix(in srgb, var(--cl-primary-accent), var(--cl-bg-card) 8%), var(--cl-primary) );--cl-audio-avatar-text: var(--cl-text-on-primary);--cl-audio-accent-surface: color-mix( in srgb, var(--cl-warning-light), var(--cl-bg-card) 40% );--cl-audio-accent-border: color-mix( in srgb, var(--cl-note-indicator), transparent 70% );--cl-audio-accent-text: color-mix( in srgb, var(--cl-note-indicator), var(--cl-text) 28% );--cl-audio-verse-hover-bg: color-mix( in srgb, var(--cl-primary), transparent 92% );--cl-audio-verse-active-bg: linear-gradient( 135deg, color-mix(in srgb, var(--cl-warning), transparent 86%), color-mix(in srgb, var(--cl-warning-light), var(--cl-bg-card) 42%) );--cl-audio-verse-active-border: color-mix( in srgb, var(--cl-note-indicator), transparent 70% );--cl-audio-spotlight-bg: linear-gradient( 135deg, color-mix(in srgb, var(--cl-warning), transparent 88%), color-mix(in srgb, var(--cl-warning-light), var(--cl-bg-card) 44%) );--cl-audio-spotlight-shadow: var(--cl-shadow-sm);--cl-audio-indicator-bg: linear-gradient( 180deg, var(--cl-warning), var(--cl-note-indicator-hover) );--cl-audio-player-cta-bg: linear-gradient( 180deg, color-mix(in srgb, var(--cl-primary-accent), var(--cl-bg-card) 10%), var(--cl-secondary) );--cl-audio-player-cta-bg-hover: linear-gradient( 180deg, var(--cl-primary), var(--cl-secondary-hover) );--cl-audio-player-cta-text: var(--cl-text-on-primary);--cl-audio-player-cta-shadow: var(--cl-shadow-lg);--cl-audio-waveform-neutral: linear-gradient( 180deg, color-mix(in srgb, var(--cl-border-light), var(--cl-bg-card) 12%), color-mix(in srgb, var(--cl-border), transparent 28%) );--cl-audio-waveform-gold: linear-gradient( 180deg, color-mix(in srgb, var(--cl-warning), var(--cl-bg-card) 16%), var(--cl-note-indicator-hover) );--cl-audio-waveform-blue: linear-gradient( 180deg, color-mix(in srgb, var(--cl-primary-accent), var(--cl-bg-card) 12%), var(--cl-primary) );--cl-audio-waveform-shadow: 0 0 .35rem color-mix(in srgb, var(--cl-primary), transparent 68%);--cl-coming-soon-shadow: 0 18px 42px rgba(0, 0, 0, .45);--cl-coming-soon-badge-bg: color-mix( in srgb, var(--cl-primary), var(--color-gray-700) 72% );--cl-coming-soon-badge-text: var(--cl-text);--cl-coming-soon-btn-border: var(--cl-border);--cl-coming-soon-btn-bg: var(--cl-bg-card);--cl-coming-soon-btn-text: var(--cl-text);--cl-coming-soon-btn-primary-bg: var(--cl-primary);--cl-coming-soon-btn-primary-text: var(--cl-text-on-primary);--cl-coming-soon-btn-hover-shadow: 0 10px 24px rgba(0, 0, 0, .45);--cl-settings-page-backdrop: radial-gradient( circle at top right, color-mix(in srgb, var(--cl-warning), transparent 90%), transparent 36% ), radial-gradient( circle at 14% 18%, color-mix(in srgb, var(--cl-primary), transparent 92%), transparent 32% ), linear-gradient( 180deg, color-mix(in srgb, var(--cl-bg-card), transparent 6%), transparent );--cl-settings-shell-bg: linear-gradient( 180deg, color-mix(in srgb, var(--cl-bg-card), var(--cl-bg-muted) 12%), color-mix(in srgb, var(--cl-bg-card), var(--cl-bg-muted) 36%) );--cl-settings-elevated-surface: color-mix( in srgb, var(--cl-bg-card), var(--cl-bg-muted) 18% );--cl-settings-panel-border: color-mix( in srgb, var(--cl-border), transparent 8% );--cl-settings-panel-shadow: var(--cl-shadow-lg);--cl-settings-divider: color-mix(in srgb, var(--cl-border), transparent 12%);--cl-settings-title: var(--cl-text);--cl-settings-copy-muted: var(--cl-text-secondary);--cl-settings-section-label: color-mix( in srgb, var(--cl-primary), var(--cl-warning) 18% );--cl-settings-chip-bg: color-mix( in srgb, var(--cl-bg-card), var(--cl-bg-muted) 24% );--cl-settings-chip-text: var(--cl-text);--cl-settings-tab-bg: color-mix( in srgb, var(--cl-bg-card), var(--cl-bg-muted) 16% );--cl-settings-tab-bg-active: linear-gradient( 180deg, color-mix(in srgb, var(--cl-primary), transparent 88%), color-mix(in srgb, var(--cl-warning), transparent 92%) );--cl-settings-tab-border: color-mix( in srgb, var(--cl-border), transparent 6% );--cl-settings-tab-border-active: color-mix( in srgb, var(--cl-primary), transparent 68% );--cl-settings-tab-badge-bg: color-mix( in srgb, var(--cl-primary), transparent 82% );--cl-settings-tab-badge-text: var(--cl-text);--cl-settings-inner-border: color-mix( in srgb, var(--cl-border), transparent 10% );--cl-settings-hero-bg: linear-gradient( 150deg, color-mix(in srgb, var(--cl-primary), var(--color-gray-900) 28%), color-mix(in srgb, var(--cl-secondary), var(--color-orange-900) 16%) );--cl-settings-avatar-ring: color-mix( in srgb, var(--cl-text-on-primary), transparent 82% );--cl-settings-avatar-frame-bg: linear-gradient( 180deg, color-mix(in srgb, var(--cl-text-on-primary), transparent 94%), color-mix(in srgb, var(--cl-text-on-primary), transparent 97%) );--cl-settings-badge-bg: linear-gradient( 180deg, var(--cl-warning), color-mix(in srgb, var(--cl-warning), var(--cl-primary) 18%) );--cl-settings-badge-text: var(--cl-text-inverse);--cl-settings-input-bg: color-mix( in srgb, var(--cl-bg-input), var(--cl-bg-card) 10% );--cl-settings-input-border: color-mix( in srgb, var(--cl-border-input), transparent 4% );--cl-settings-input-border-focus: var(--cl-border-focus);--cl-settings-input-highlight: color-mix( in srgb, var(--cl-text-on-primary), transparent 98% );--cl-settings-focus-ring: color-mix( in srgb, var(--cl-focus-ring), transparent 12% );--cl-settings-primary-action-bg: linear-gradient( 180deg, color-mix(in srgb, var(--cl-primary-accent), var(--cl-bg-card) 14%), var(--cl-primary) );--cl-settings-primary-action-text: var(--cl-text-on-primary);--cl-settings-secondary-action-bg: color-mix( in srgb, var(--cl-text-on-primary), transparent 92% );--cl-settings-secondary-action-border: color-mix( in srgb, var(--cl-text-on-primary), transparent 88% );--cl-settings-secondary-action-text: var(--cl-text-on-primary);--cl-settings-ghost-action-bg: color-mix( in srgb, var(--cl-bg-card), var(--cl-bg-muted) 18% );--cl-settings-ghost-action-border: color-mix( in srgb, var(--cl-border), transparent 4% );--cl-settings-ghost-action-text: var(--cl-text);--cl-settings-status-pulse-bg: linear-gradient( 180deg, var(--cl-warning), color-mix(in srgb, var(--cl-warning), var(--cl-primary) 20%) )}:root{--font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--font-heading: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono: "Courier New", Consolas, "Liberation Mono", monospace;--font-dyslexia: "Open Dyslexic", sans-serif;--font-readable: "Atkinson Hyperlegible", sans-serif;--fw-light: 300;--fw-regular: 400;--fw-medium: 500;--fw-semibold: 600;--fw-bold: 700;--fs-xs: .75rem;--fs-sm: .8125rem;--fs-base: .875rem;--fs-md: 1rem;--fs-lg: 1.125rem;--fs-xl: 1.25rem;--fs-2xl: 1.5rem;--fs-3xl: 1.875rem;--fs-4xl: 2.25rem;--fs-5xl: 3rem;--bible-font-size: 1.125rem;--lh-tight: 1.25;--lh-snug: 1.375;--lh-normal: 1.5;--lh-relaxed: 1.625;--lh-loose: 1.8;--ls-tight: -.025em;--ls-normal: 0;--ls-wide: .025em;--ls-wider: .05em}body{font-family:var(--font-body);font-size:var(--fs-md);font-weight:var(--fw-regular);line-height:var(--lh-relaxed);color:var(--cl-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--fw-semibold);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);color:var(--cl-text);margin-bottom:.5em}h1{font-size:var(--fs-4xl)}h2{font-size:var(--fs-3xl)}h3{font-size:var(--fs-2xl)}h4{font-size:var(--fs-xl)}h5{font-size:var(--fs-lg)}h6{font-size:var(--fs-md)}p{margin-bottom:1rem;line-height:var(--lh-relaxed)}small,.text-sm{font-size:var(--fs-sm)}.text-xs{font-size:var(--fs-xs)}.text-base{font-size:var(--fs-base)}.text-md{font-size:var(--fs-md)}.text-lg{font-size:var(--fs-lg)}.text-xl{font-size:var(--fs-xl)}.text-2xl{font-size:var(--fs-2xl)}.text-3xl{font-size:var(--fs-3xl)}body.font-readable,.font-readable{font-family:var(--font-readable)}body.font-dyslexia,.font-dyslexia{font-family:var(--font-dyslexia)}:root{--space-0: 0;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--radius-sm: 4px;--radius: 8px;--radius-md: 10px;--radius-lg: 12px;--radius-xl: 16px;--radius-pill: 50px;--radius-full: 50%;--ease-default: cubic-bezier(.4, 0, .2, 1);--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--duration-fast: .15s;--duration: .25s;--duration-slow: .4s;--transition: all var(--duration) var(--ease-default);--sidebar-width: 250px;--sidebar-collapsed-width: 80px;--header-height: 60px;--max-width-content: 1200px;--max-width-narrow: 800px;--max-width-auth: 750px;--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-sidebar: 1040;--z-modal: 1050;--z-popover: 1060;--z-tooltip: 1070;--z-overlay: 1999;--z-toast: 3000}.btn-primary{background-color:var(--cl-primary);border-color:var(--cl-primary);color:var(--cl-text-on-primary);font-weight:var(--fw-medium);border-radius:var(--radius);transition:var(--transition)}.btn-primary:hover,.btn-primary:focus{background-color:var(--cl-primary-hover);border-color:var(--cl-primary-hover);color:var(--cl-text-on-primary);transform:translateY(-2px);box-shadow:var(--cl-shadow-sm)}.btn-primary:active{transform:translateY(0)}.btn-primary:focus-visible{box-shadow:0 0 0 .25rem var(--cl-focus-ring)}.btn-outline-primary{color:var(--cl-primary);border-color:var(--cl-primary);background-color:transparent;font-weight:var(--fw-medium);border-radius:var(--radius);transition:var(--transition)}.btn-outline-primary:hover,.btn-outline-primary:focus{background-color:var(--cl-primary);color:var(--cl-text-on-primary);transform:translateY(-2px);box-shadow:var(--cl-shadow-sm)}.btn-outline-primary:focus-visible{box-shadow:0 0 0 .25rem var(--cl-focus-ring)}.btn-secondary{background-color:var(--cl-secondary);border-color:var(--cl-secondary);color:var(--cl-text-on-primary);font-weight:var(--fw-medium);border-radius:var(--radius);transition:var(--transition)}.btn-secondary:hover,.btn-secondary:focus{background-color:var(--cl-secondary-hover);border-color:var(--cl-secondary-hover)}.btn-success{background-color:var(--cl-success);border-color:var(--cl-success);color:var(--cl-text-on-primary)}.btn-danger{background-color:var(--cl-danger);border-color:var(--cl-danger);color:var(--cl-text-on-primary)}.btn-warning{background-color:var(--cl-warning);border-color:var(--cl-warning)}.btn-info{background-color:var(--cl-info);border-color:var(--cl-info);color:var(--cl-text-on-primary)}.btn-light{background-color:var(--cl-bg-muted);border-color:var(--cl-border-light);color:var(--cl-text)}.card{background-color:var(--cl-bg-card);border-color:var(--cl-border);color:var(--cl-text);border-radius:var(--radius);box-shadow:var(--cl-shadow)}.card .card-header{background-color:var(--cl-bg-muted);border-bottom-color:var(--cl-border);color:var(--cl-text)}.card .card-footer{background-color:var(--cl-bg-muted);border-top-color:var(--cl-border)}.modal-content{background-color:var(--cl-bg-card);border-color:var(--cl-border);color:var(--cl-text);border-radius:var(--radius-lg);box-shadow:var(--cl-shadow-lg)}.modal-header{border-bottom-color:var(--cl-border)}.modal-footer{border-top-color:var(--cl-border)}.modal-backdrop{background-color:var(--cl-overlay)}.form-control{background-color:var(--cl-bg-input);border-color:var(--cl-border-input);color:var(--cl-text);border-radius:var(--radius);transition:var(--transition)}.form-control::placeholder{color:var(--cl-text-placeholder)}.form-control:focus{border-color:var(--cl-border-focus);box-shadow:0 0 0 .25rem var(--cl-focus-ring);background-color:var(--cl-bg-input);color:var(--cl-text)}.form-select{background-color:var(--cl-bg-input);border-color:var(--cl-border-input);color:var(--cl-text);border-radius:var(--radius)}.form-select:focus{border-color:var(--cl-border-focus);box-shadow:0 0 0 .25rem var(--cl-focus-ring)}.form-floating>.form-control:not(:placeholder-shown)~label,.form-floating>.form-control:focus~label{color:var(--cl-primary)}.input-group-text{background-color:var(--cl-bg-muted);border-color:var(--cl-border-input);color:var(--cl-text)}.dropdown-menu{background-color:var(--cl-bg-card);border-color:var(--cl-border);color:var(--cl-text);box-shadow:var(--cl-shadow);border-radius:var(--radius)}.dropdown-item{color:var(--cl-text);transition:var(--transition)}.dropdown-item:hover,.dropdown-item:focus{background-color:var(--cl-hover-overlay);color:var(--cl-primary)}.dropdown-item.active,.dropdown-item:active{background-color:var(--cl-primary-light);color:var(--cl-primary)}.dropdown-divider{border-top-color:var(--cl-border)}.nav-tabs{border-bottom-color:var(--cl-border)}.nav-tabs .nav-link{color:var(--cl-text-secondary);transition:var(--transition)}.nav-tabs .nav-link:hover{color:var(--cl-primary);border-color:transparent;background-color:var(--cl-primary-light)}.nav-tabs .nav-link.active{color:var(--cl-primary);background-color:var(--cl-bg-card);border-color:transparent;border-bottom:3px solid var(--cl-primary);font-weight:var(--fw-semibold)}.progress{background-color:var(--cl-primary-light);border-radius:var(--radius-sm)}.progress .progress-bar{background-color:var(--cl-primary)}.alert-success{background-color:var(--cl-success-light);color:var(--cl-success);border-color:var(--cl-success)}.alert-danger{background-color:var(--cl-danger-light);color:var(--cl-danger);border-color:var(--cl-danger)}.alert-warning{background-color:var(--cl-warning-light);color:var(--cl-warning);border-color:var(--cl-warning)}.alert-info{background-color:var(--cl-info-light);color:var(--cl-info);border-color:var(--cl-info)}.badge.bg-primary{background-color:var(--cl-primary)!important}.badge.bg-success{background-color:var(--cl-success)!important}.badge.bg-danger{background-color:var(--cl-danger)!important}.badge.bg-warning{background-color:var(--cl-warning)!important}.badge.bg-info{background-color:var(--cl-info)!important}.toast{background-color:var(--cl-bg-card);color:var(--cl-text);box-shadow:var(--cl-shadow);border-radius:var(--radius)}.table{color:var(--cl-text)}.table th{color:var(--cl-text);border-bottom-color:var(--cl-border)}.table td{border-bottom-color:var(--cl-border-light)}.table-striped tbody tr:nth-of-type(odd){background-color:var(--cl-hover-overlay)}.table-hover tbody tr:hover{background-color:var(--cl-hover-overlay)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--cl-scrollbar-track);border-radius:var(--radius-md)}::-webkit-scrollbar-thumb{background-color:var(--cl-scrollbar-thumb);border-radius:var(--radius-md)}.color-blue-50{color:var(--color-blue-50)!important}.bg-blue-50{background-color:var(--color-blue-50)!important}.color-blue-100{color:var(--color-blue-100)!important}.bg-blue-100{background-color:var(--color-blue-100)!important}.color-blue-200{color:var(--color-blue-200)!important}.bg-blue-200{background-color:var(--color-blue-200)!important}.color-blue-300{color:var(--color-blue-300)!important}.bg-blue-300{background-color:var(--color-blue-300)!important}.color-blue-400{color:var(--color-blue-400)!important}.bg-blue-400{background-color:var(--color-blue-400)!important}.color-blue-500{color:var(--color-blue-500)!important}.bg-blue-500{background-color:var(--color-blue-500)!important}.color-blue-600{color:var(--color-blue-600)!important}.bg-blue-600{background-color:var(--color-blue-600)!important}.color-blue-700{color:var(--color-blue-700)!important}.bg-blue-700{background-color:var(--color-blue-700)!important}.color-blue-800{color:var(--color-blue-800)!important}.bg-blue-800{background-color:var(--color-blue-800)!important}.color-blue-900{color:var(--color-blue-900)!important}.bg-blue-900{background-color:var(--color-blue-900)!important}.color-blue-950{color:var(--color-blue-950)!important}.bg-blue-950{background-color:var(--color-blue-950)!important}.color-indigo-50{color:var(--color-indigo-50)!important}.bg-indigo-50{background-color:var(--color-indigo-50)!important}.color-indigo-100{color:var(--color-indigo-100)!important}.bg-indigo-100{background-color:var(--color-indigo-100)!important}.color-indigo-200{color:var(--color-indigo-200)!important}.bg-indigo-200{background-color:var(--color-indigo-200)!important}.color-indigo-300{color:var(--color-indigo-300)!important}.bg-indigo-300{background-color:var(--color-indigo-300)!important}.color-indigo-400{color:var(--color-indigo-400)!important}.bg-indigo-400{background-color:var(--color-indigo-400)!important}.color-indigo-500{color:var(--color-indigo-500)!important}.bg-indigo-500{background-color:var(--color-indigo-500)!important}.color-indigo-600{color:var(--color-indigo-600)!important}.bg-indigo-600{background-color:var(--color-indigo-600)!important}.color-indigo-700{color:var(--color-indigo-700)!important}.bg-indigo-700{background-color:var(--color-indigo-700)!important}.color-indigo-800{color:var(--color-indigo-800)!important}.bg-indigo-800{background-color:var(--color-indigo-800)!important}.color-indigo-900{color:var(--color-indigo-900)!important}.bg-indigo-900{background-color:var(--color-indigo-900)!important}.color-indigo-950{color:var(--color-indigo-950)!important}.bg-indigo-950{background-color:var(--color-indigo-950)!important}.color-gray-50{color:var(--color-gray-50)!important}.bg-gray-50{background-color:var(--color-gray-50)!important}.color-gray-100{color:var(--color-gray-100)!important}.bg-gray-100{background-color:var(--color-gray-100)!important}.color-gray-200{color:var(--color-gray-200)!important}.bg-gray-200{background-color:var(--color-gray-200)!important}.color-gray-300{color:var(--color-gray-300)!important}.bg-gray-300{background-color:var(--color-gray-300)!important}.color-gray-400{color:var(--color-gray-400)!important}.bg-gray-400{background-color:var(--color-gray-400)!important}.color-gray-500{color:var(--color-gray-500)!important}.bg-gray-500{background-color:var(--color-gray-500)!important}.color-gray-600{color:var(--color-gray-600)!important}.bg-gray-600{background-color:var(--color-gray-600)!important}.color-gray-700{color:var(--color-gray-700)!important}.bg-gray-700{background-color:var(--color-gray-700)!important}.color-gray-800{color:var(--color-gray-800)!important}.bg-gray-800{background-color:var(--color-gray-800)!important}.color-gray-900{color:var(--color-gray-900)!important}.bg-gray-900{background-color:var(--color-gray-900)!important}.color-gray-950{color:var(--color-gray-950)!important}.bg-gray-950{background-color:var(--color-gray-950)!important}.color-green-50{color:var(--color-green-50)!important}.bg-green-50{background-color:var(--color-green-50)!important}.color-green-100{color:var(--color-green-100)!important}.bg-green-100{background-color:var(--color-green-100)!important}.color-green-200{color:var(--color-green-200)!important}.bg-green-200{background-color:var(--color-green-200)!important}.color-green-300{color:var(--color-green-300)!important}.bg-green-300{background-color:var(--color-green-300)!important}.color-green-400{color:var(--color-green-400)!important}.bg-green-400{background-color:var(--color-green-400)!important}.color-green-500{color:var(--color-green-500)!important}.bg-green-500{background-color:var(--color-green-500)!important}.color-green-600{color:var(--color-green-600)!important}.bg-green-600{background-color:var(--color-green-600)!important}.color-green-700{color:var(--color-green-700)!important}.bg-green-700{background-color:var(--color-green-700)!important}.color-green-800{color:var(--color-green-800)!important}.bg-green-800{background-color:var(--color-green-800)!important}.color-green-900{color:var(--color-green-900)!important}.bg-green-900{background-color:var(--color-green-900)!important}.color-green-950{color:var(--color-green-950)!important}.bg-green-950{background-color:var(--color-green-950)!important}.color-red-50{color:var(--color-red-50)!important}.bg-red-50{background-color:var(--color-red-50)!important}.color-red-100{color:var(--color-red-100)!important}.bg-red-100{background-color:var(--color-red-100)!important}.color-red-200{color:var(--color-red-200)!important}.bg-red-200{background-color:var(--color-red-200)!important}.color-red-300{color:var(--color-red-300)!important}.bg-red-300{background-color:var(--color-red-300)!important}.color-red-400{color:var(--color-red-400)!important}.bg-red-400{background-color:var(--color-red-400)!important}.color-red-500{color:var(--color-red-500)!important}.bg-red-500{background-color:var(--color-red-500)!important}.color-red-600{color:var(--color-red-600)!important}.bg-red-600{background-color:var(--color-red-600)!important}.color-red-700{color:var(--color-red-700)!important}.bg-red-700{background-color:var(--color-red-700)!important}.color-red-800{color:var(--color-red-800)!important}.bg-red-800{background-color:var(--color-red-800)!important}.color-red-900{color:var(--color-red-900)!important}.bg-red-900{background-color:var(--color-red-900)!important}.color-red-950{color:var(--color-red-950)!important}.bg-red-950{background-color:var(--color-red-950)!important}.color-yellow-50{color:var(--color-yellow-50)!important}.bg-yellow-50{background-color:var(--color-yellow-50)!important}.color-yellow-100{color:var(--color-yellow-100)!important}.bg-yellow-100{background-color:var(--color-yellow-100)!important}.color-yellow-200{color:var(--color-yellow-200)!important}.bg-yellow-200{background-color:var(--color-yellow-200)!important}.color-yellow-300{color:var(--color-yellow-300)!important}.bg-yellow-300{background-color:var(--color-yellow-300)!important}.color-yellow-400{color:var(--color-yellow-400)!important}.bg-yellow-400{background-color:var(--color-yellow-400)!important}.color-yellow-500{color:var(--color-yellow-500)!important}.bg-yellow-500{background-color:var(--color-yellow-500)!important}.color-yellow-600{color:var(--color-yellow-600)!important}.bg-yellow-600{background-color:var(--color-yellow-600)!important}.color-yellow-700{color:var(--color-yellow-700)!important}.bg-yellow-700{background-color:var(--color-yellow-700)!important}.color-yellow-800{color:var(--color-yellow-800)!important}.bg-yellow-800{background-color:var(--color-yellow-800)!important}.color-yellow-900{color:var(--color-yellow-900)!important}.bg-yellow-900{background-color:var(--color-yellow-900)!important}.color-yellow-950{color:var(--color-yellow-950)!important}.bg-yellow-950{background-color:var(--color-yellow-950)!important}.color-orange-50{color:var(--color-orange-50)!important}.bg-orange-50{background-color:var(--color-orange-50)!important}.color-orange-100{color:var(--color-orange-100)!important}.bg-orange-100{background-color:var(--color-orange-100)!important}.color-orange-200{color:var(--color-orange-200)!important}.bg-orange-200{background-color:var(--color-orange-200)!important}.color-orange-300{color:var(--color-orange-300)!important}.bg-orange-300{background-color:var(--color-orange-300)!important}.color-orange-400{color:var(--color-orange-400)!important}.bg-orange-400{background-color:var(--color-orange-400)!important}.color-orange-500{color:var(--color-orange-500)!important}.bg-orange-500{background-color:var(--color-orange-500)!important}.color-orange-600{color:var(--color-orange-600)!important}.bg-orange-600{background-color:var(--color-orange-600)!important}.color-orange-700{color:var(--color-orange-700)!important}.bg-orange-700{background-color:var(--color-orange-700)!important}.color-orange-800{color:var(--color-orange-800)!important}.bg-orange-800{background-color:var(--color-orange-800)!important}.color-orange-900{color:var(--color-orange-900)!important}.bg-orange-900{background-color:var(--color-orange-900)!important}.color-orange-950{color:var(--color-orange-950)!important}.bg-orange-950{background-color:var(--color-orange-950)!important}.color-teal-50{color:var(--color-teal-50)!important}.bg-teal-50{background-color:var(--color-teal-50)!important}.color-teal-100{color:var(--color-teal-100)!important}.bg-teal-100{background-color:var(--color-teal-100)!important}.color-teal-200{color:var(--color-teal-200)!important}.bg-teal-200{background-color:var(--color-teal-200)!important}.color-teal-300{color:var(--color-teal-300)!important}.bg-teal-300{background-color:var(--color-teal-300)!important}.color-teal-400{color:var(--color-teal-400)!important}.bg-teal-400{background-color:var(--color-teal-400)!important}.color-teal-500{color:var(--color-teal-500)!important}.bg-teal-500{background-color:var(--color-teal-500)!important}.color-teal-600{color:var(--color-teal-600)!important}.bg-teal-600{background-color:var(--color-teal-600)!important}.color-teal-700{color:var(--color-teal-700)!important}.bg-teal-700{background-color:var(--color-teal-700)!important}.color-teal-800{color:var(--color-teal-800)!important}.bg-teal-800{background-color:var(--color-teal-800)!important}.color-teal-900{color:var(--color-teal-900)!important}.bg-teal-900{background-color:var(--color-teal-900)!important}.color-teal-950{color:var(--color-teal-950)!important}.bg-teal-950{background-color:var(--color-teal-950)!important}.color-lime-50{color:var(--color-lime-50)!important}.bg-lime-50{background-color:var(--color-lime-50)!important}.color-lime-100{color:var(--color-lime-100)!important}.bg-lime-100{background-color:var(--color-lime-100)!important}.color-lime-200{color:var(--color-lime-200)!important}.bg-lime-200{background-color:var(--color-lime-200)!important}.color-lime-300{color:var(--color-lime-300)!important}.bg-lime-300{background-color:var(--color-lime-300)!important}.color-lime-400{color:var(--color-lime-400)!important}.bg-lime-400{background-color:var(--color-lime-400)!important}.color-lime-500{color:var(--color-lime-500)!important}.bg-lime-500{background-color:var(--color-lime-500)!important}.color-lime-600{color:var(--color-lime-600)!important}.bg-lime-600{background-color:var(--color-lime-600)!important}.color-lime-700{color:var(--color-lime-700)!important}.bg-lime-700{background-color:var(--color-lime-700)!important}.color-lime-800{color:var(--color-lime-800)!important}.bg-lime-800{background-color:var(--color-lime-800)!important}.color-lime-900{color:var(--color-lime-900)!important}.bg-lime-900{background-color:var(--color-lime-900)!important}.color-lime-950{color:var(--color-lime-950)!important}.bg-lime-950{background-color:var(--color-lime-950)!important}.color-purple-50{color:var(--color-purple-50)!important}.bg-purple-50{background-color:var(--color-purple-50)!important}.color-purple-100{color:var(--color-purple-100)!important}.bg-purple-100{background-color:var(--color-purple-100)!important}.color-purple-200{color:var(--color-purple-200)!important}.bg-purple-200{background-color:var(--color-purple-200)!important}.color-purple-300{color:var(--color-purple-300)!important}.bg-purple-300{background-color:var(--color-purple-300)!important}.color-purple-400{color:var(--color-purple-400)!important}.bg-purple-400{background-color:var(--color-purple-400)!important}.color-purple-500{color:var(--color-purple-500)!important}.bg-purple-500{background-color:var(--color-purple-500)!important}.color-purple-600{color:var(--color-purple-600)!important}.bg-purple-600{background-color:var(--color-purple-600)!important}.color-purple-700{color:var(--color-purple-700)!important}.bg-purple-700{background-color:var(--color-purple-700)!important}.color-purple-800{color:var(--color-purple-800)!important}.bg-purple-800{background-color:var(--color-purple-800)!important}.color-purple-900{color:var(--color-purple-900)!important}.bg-purple-900{background-color:var(--color-purple-900)!important}.color-purple-950{color:var(--color-purple-950)!important}.bg-purple-950{background-color:var(--color-purple-950)!important}.text-primary{color:var(--cl-primary)!important}.text-secondary{color:var(--cl-text-secondary)!important}.text-muted{color:var(--cl-text-muted)!important}.text-success{color:var(--cl-success)!important}.text-danger{color:var(--cl-danger)!important}.text-warning{color:var(--cl-warning)!important}.text-info{color:var(--cl-info)!important}.text-body{color:var(--cl-text)!important}.text-inverse{color:var(--cl-text-inverse)!important}.bg-primary{background-color:var(--cl-primary)!important}.bg-primary-light{background-color:var(--cl-primary-light)!important}.bg-body{background-color:var(--cl-bg)!important}.bg-card{background-color:var(--cl-bg-card)!important}.bg-muted{background-color:var(--cl-bg-muted)!important}.bg-subtle{background-color:var(--cl-bg-subtle)!important}.bg-success-light{background-color:var(--cl-success-light)!important}.bg-danger-light{background-color:var(--cl-danger-light)!important}.bg-warning-light{background-color:var(--cl-warning-light)!important}.bg-info-light{background-color:var(--cl-info-light)!important}.border-theme{border-color:var(--cl-border)!important}.border-theme-light{border-color:var(--cl-border-light)!important}.border-primary{border-color:var(--cl-primary)!important}.shadow-xs{box-shadow:var(--cl-shadow-xs)!important}.shadow-sm{box-shadow:var(--cl-shadow-sm)!important}.shadow{box-shadow:var(--cl-shadow)!important}.shadow-md{box-shadow:var(--cl-shadow-md)!important}.shadow-lg{box-shadow:var(--cl-shadow-lg)!important}.shadow-none{box-shadow:none!important}.rounded-sm{border-radius:var(--radius-sm)!important}.rounded-md{border-radius:var(--radius-md)!important}.rounded-lg{border-radius:var(--radius-lg)!important}.rounded-pill{border-radius:var(--radius-pill)!important}.fw-light{font-weight:var(--fw-light)!important}.fw-regular{font-weight:var(--fw-regular)!important}.fw-medium{font-weight:var(--fw-medium)!important}.fw-semibold{font-weight:var(--fw-semibold)!important}.fw-bold{font-weight:var(--fw-bold)!important}.highlight-yellow{background-color:var(--cl-highlight-yellow);padding:.1rem .2rem;border-radius:.2rem}.highlight-blue{background-color:var(--cl-highlight-blue);padding:.1rem .2rem;border-radius:.2rem}.highlight-green{background-color:var(--cl-highlight-green);padding:.1rem .2rem;border-radius:.2rem}.highlight-pink{background-color:var(--cl-highlight-pink);padding:.1rem .2rem;border-radius:.2rem}@media print{.no-print{display:none!important}}@media (min-width: 768px){.desktop-hidden{display:none!important}}@media (max-width: 767.98px){.mobile-hidden{display:none!important}}.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}body{background-color:var(--cl-bg);color:var(--cl-text);transition:var(--transition);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}a{color:var(--cl-link);text-decoration:none;transition:var(--transition)}a:hover{color:var(--cl-link-hover)}.login-container,.register-container,.reset-container{width:100%;background:var(--cl-bg-card);border-radius:var(--radius-lg);border:1px solid var(--cl-border-light);box-shadow:var(--cl-shadow-lg);overflow:hidden;animation:authFadeIn .5s cubic-bezier(.16,1,.3,1) forwards}.login-header,.register-header,.reset-header{background:var(--cl-primary);color:var(--cl-text-on-primary);padding:1.5rem 2rem;text-align:center;position:relative}.login-header h2,.login-header h3,.register-header h2,.register-header h3,.reset-header h2,.reset-header h3{margin:0;font-weight:var(--fw-bold);color:var(--cl-text-on-primary);letter-spacing:-.01em}.login-header h3,.reset-header h3{font-size:var(--fs-xl)}.register-header h3{font-size:var(--fs-2xl)}.reset-header .back-to-login,.register-header .login-link{position:absolute;left:1.25rem;top:50%;transform:translateY(-50%);color:var(--cl-text-on-primary);font-size:var(--fs-base);text-decoration:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:color-mix(in srgb,var(--cl-text-on-primary),transparent 85%);transition:all .2s ease}.reset-header .back-to-login:hover,.register-header .login-link:hover{background:color-mix(in srgb,var(--cl-text-on-primary),transparent 75%)}.login-body,.register-body,.reset-body{padding:2rem 2rem 1.5rem}.register-icon,.step-icon{width:56px;height:56px;border-radius:var(--radius-lg);background:var(--cl-primary-light);color:var(--cl-primary);display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem;font-size:1.25rem}.register-instructions,.step-instructions{text-align:center;margin-bottom:1.5rem;color:var(--cl-text-secondary);font-size:var(--fs-sm);line-height:1.6}.input-group-text{background:var(--cl-bg-card);border:1px solid var(--cl-border-input);border-left:none;padding:.75rem 1rem;border-radius:var(--radius);border-top-left-radius:0;border-bottom-left-radius:0;transition:border-color .2s ease}.input-group>.form-control{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}.input-group>.form-control:focus{z-index:3}.input-group:focus-within .input-group-text{border-color:var(--cl-primary)}.password-toggle{cursor:pointer;background:var(--cl-bg-card);border-left:none;color:var(--cl-text-muted);display:flex;align-items:center;transition:color .2s ease}.password-toggle:hover{color:var(--cl-primary)}.otp-input{text-align:center;font-size:var(--fs-2xl);font-weight:var(--fw-bold);letter-spacing:.6em;border:2px solid var(--cl-border-input);border-radius:var(--radius);transition:all .2s ease;background:var(--cl-bg-input);color:var(--cl-text);padding:.875rem 1rem}.otp-input:focus{border-color:var(--cl-primary);outline:none;box-shadow:0 0 0 3px var(--cl-focus-ring)}.otp-timer{text-align:center;font-size:var(--fs-sm);color:var(--cl-text-muted);margin-bottom:1rem;padding:.5rem 1rem;background:var(--cl-bg-muted);border-radius:var(--radius)}.otp-timer strong{color:var(--cl-primary);font-variant-numeric:tabular-nums}.otp-timer.expired{color:var(--cl-danger);background:var(--cl-danger-light)}.otp-timer.expired strong{color:var(--cl-danger)}.btn-login,.btn-register,.btn-reset{background:var(--cl-primary);color:var(--cl-text-on-primary);border:none;padding:.875rem 1.5rem;font-weight:var(--fw-semibold);font-size:var(--fs-base);border-radius:var(--radius);transition:all .2s ease;width:100%;cursor:pointer;text-align:center;position:relative;overflow:hidden}.btn-login:hover:not(:disabled),.btn-register:hover:not(:disabled),.btn-reset:hover:not(:disabled){background:var(--cl-primary-hover);transform:translateY(-1px);box-shadow:var(--cl-shadow-sm);color:var(--cl-text-on-primary)}.btn-login:active:not(:disabled),.btn-register:active:not(:disabled),.btn-reset:active:not(:disabled){transform:translateY(0);box-shadow:none}.btn-login:disabled,.btn-register:disabled,.btn-reset:disabled{opacity:.65;cursor:not-allowed}.password-strength{height:4px;background:var(--cl-bg-subtle);border-radius:2px;margin-top:.5rem;overflow:hidden}.password-strength-bar{height:100%;width:0;border-radius:2px;transition:all .4s cubic-bezier(.16,1,.3,1)}.password-strength-bar.weak{width:40%;background:linear-gradient(90deg,var(--cl-danger),var(--color-orange-500))}.password-strength-bar.strong{width:100%;background:linear-gradient(90deg,var(--cl-success),var(--color-teal-400))}.password-requirements{font-size:var(--fs-xs);color:var(--cl-text-muted);margin-top:.5rem}.password-requirements ul{padding-left:0;margin-bottom:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.25rem .75rem}.password-requirements li{display:flex;align-items:center;gap:.375rem;transition:color .2s ease}.password-requirements li i{font-size:.6rem;width:14px;text-align:center;color:var(--cl-text-muted);transition:color .2s ease}.password-requirements li.met,.password-requirements li.met i{color:var(--cl-success)}.terms-check{margin:1.25rem 0}.terms-check label{font-size:var(--fs-sm);color:var(--cl-text-secondary);margin-bottom:0}.terms-check a{color:var(--cl-primary);font-weight:var(--fw-semibold)}.terms-check a:hover{text-decoration:underline}.social-login,.social-register{display:flex;justify-content:center;gap:.75rem;margin-bottom:1.25rem}.social-btn{width:44px;height:44px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;color:var(--cl-text-on-primary);font-size:var(--fs-base);transition:all .2s ease;text-decoration:none;border:none}.social-btn:hover{transform:translateY(-2px);box-shadow:var(--cl-shadow-sm)}.social-btn.google{background:var(--color-google)}.social-btn.facebook{background:var(--color-facebook)}.social-btn.apple{background:var(--color-apple)}.divider{display:flex;align-items:center;margin:1.25rem 0}.divider:before,.divider:after{content:"";flex:1;border-bottom:1px solid var(--cl-border-light)}.divider-text{padding:0 .75rem;color:var(--cl-text-muted);font-size:var(--fs-sm)}.login-footer{text-align:center;padding:1rem 1.5rem;background:var(--cl-bg-muted);border-top:1px solid var(--cl-border-light);font-size:var(--fs-sm)}.login-footer a{color:var(--cl-text-muted);font-weight:var(--fw-medium)}.login-footer a:hover{color:var(--cl-primary)}.countdown-timer{text-align:center;margin:1rem 0;font-size:var(--fs-sm);color:var(--cl-text-muted)}.resend-link{text-align:center;margin-top:.75rem}.resend-link a{color:var(--cl-primary);font-weight:var(--fw-semibold);cursor:pointer;font-size:var(--fs-sm)}.resend-link a:hover{text-decoration:underline}.resend-link a.disabled{color:var(--cl-text-muted);pointer-events:none;cursor:default}.step-content{animation:authFadeIn .3s cubic-bezier(.16,1,.3,1)}@keyframes authFadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 575.98px){.login-body,.register-body,.reset-body{padding:1.5rem 1.25rem 1.25rem}.login-header,.register-header,.reset-header{padding:1.25rem 1rem}.register-header,.reset-header{padding-left:3.5rem}.password-requirements ul{grid-template-columns:1fr}}