/* DELIGHT-FOCUSED DESIGN SYSTEM - Morning Routine Excellence */
:root {
    /* DELIGHT PSYCHOLOGY COLORS - Growth, Energy, Calm */
    /* Primary: Deep Forest Green - Growth, stability, nature */
    --forest-deep: #1A4D3A;
    --forest-medium: #2D6B47;
    --forest-light: #4A8B6A;
    --forest-pale: #E8F5E8;
    
    /* Secondary: Warm Gold - Energy, optimism, achievement */
    --gold-rich: #D4AF37;
    --gold-medium: #E6C547;
    --gold-light: #F4E19C;
    --gold-pale: #FDF6E3;
    
    /* Accent: Soft Sage - Calm, balance, mindfulness */
    --sage-deep: #7A9B7A;
    --sage-medium: #9CAF88;
    --sage-light: #B8C9A8;
    --sage-pale: #F0F8F0;
    
    /* Background: Cream - Warmth, comfort, clarity */
    --cream-rich: #FDFCF8;
    --cream-medium: #FAF8F3;
    --cream-light: #F7F5F0;
    --cream-pale: #F4F2ED;
    
    /* Text: Rich Charcoal - Readability, sophistication */
    --charcoal-rich: #2C3E50;
    --charcoal-medium: #34495E;
    --charcoal-light: #5D6D7E;
    --charcoal-muted: #85929E;
    
    /* High Contrast & Accessibility */
    --text-primary: #2C3E50;
    --text-secondary: #34495E;
    --text-muted: #85929E;
    --background-primary: #FDFCF8;
    --background-secondary: #FAF8F3;
    --border-light: #E8E8E8;
    --border-medium: #D5D5D5;
    
    /* DELIGHT-FOCUSED GRADIENTS */
    --gradient-growth: linear-gradient(135deg, var(--forest-deep) 0%, var(--forest-medium) 50%, var(--forest-light) 100%);
    --gradient-energy: linear-gradient(135deg, var(--gold-rich) 0%, var(--gold-medium) 50%, var(--gold-light) 100%);
    --gradient-calm: linear-gradient(135deg, var(--sage-deep) 0%, var(--sage-medium) 50%, var(--sage-light) 100%);
    --gradient-premium: linear-gradient(135deg, var(--forest-deep) 0%, var(--sage-medium) 25%, var(--gold-medium) 50%, var(--gold-rich) 75%, var(--forest-medium) 100%);
    --gradient-glass: linear-gradient(135deg, rgba(253,252,248,0.15) 0%, rgba(253,252,248,0.08) 100%);
    --gradient-warm: linear-gradient(135deg, var(--cream-rich) 0%, var(--cream-medium) 50%, var(--cream-light) 100%);
    
    /* DELIGHT-FOCUSED SHADOWS */
    --shadow-soft: 0 4px 20px rgba(26, 77, 58, 0.08);
    --shadow-medium: 0 8px 30px rgba(26, 77, 58, 0.12);
    --shadow-hover: 0 12px 40px rgba(26, 77, 58, 0.18);
    --shadow-premium: 0 20px 60px rgba(26, 77, 58, 0.25);
    --shadow-glow: 0 0 30px rgba(212, 175, 55, 0.3);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-warm: 0 4px 20px rgba(253,252,248, 0.3);
    
    /* DELIGHT-FOCUSED TEXT GRADIENTS */
    --text-gradient-growth: linear-gradient(135deg, var(--forest-deep) 0%, var(--forest-medium) 100%);
    --text-gradient-energy: linear-gradient(135deg, var(--gold-rich) 0%, var(--gold-medium) 100%);
    --text-gradient-calm: linear-gradient(135deg, var(--sage-deep) 0%, var(--sage-medium) 100%);
    --text-gradient-premium: linear-gradient(135deg, var(--forest-deep) 0%, var(--sage-medium) 50%, var(--gold-medium) 100%);
    --breathing-gradient: linear-gradient(135deg, var(--cream-rich), var(--sage-pale), var(--cream-rich));
    
    /* DELIGHT-FOCUSED INTERACTIVE ELEMENTS */
    --ripple-color: rgba(212, 175, 55, 0.2);
    --hover-overlay: rgba(253,252,248, 0.08);
    --focus-ring: rgba(212, 175, 55, 0.4);
    --active-glow: 0 0 20px rgba(212, 175, 55, 0.3);
    
    /* SELECTIVE GLASSMORPHISM SYSTEM */
    --glass-bg: rgba(253, 252, 248, 0.15);
    --glass-bg-strong: rgba(253, 252, 248, 0.25);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-border-strong: rgba(255, 255, 255, 0.3);
    --glass-shadow: 0 8px 32px rgba(26, 77, 58, 0.1);
    --glass-shadow-strong: 0 12px 40px rgba(26, 77, 58, 0.15);
    --backdrop-blur: blur(16px);
    --backdrop-blur-strong: blur(24px);
    
    /* DYNAMIC ADAPTIVE THEMES */
    /* Morning Theme (5AM - 10AM) - Warm Golds */
    --morning-primary: #D4AF37;
    --morning-secondary: #E6C547;
    --morning-accent: #F4E19C;
    --morning-background: #FDF6E3;
    --morning-text: #2C3E50;
    
    /* Day Theme (10AM - 6PM) - Forest Greens */
    --day-primary: #1A4D3A;
    --day-secondary: #2D6B47;
    --day-accent: #4A8B6A;
    --day-background: #FDFCF8;
    --day-text: #2C3E50;
    
    /* Evening Theme (6PM - 10PM) - Cool Sages */
    --evening-primary: #7A9B7A;
    --evening-secondary: #9CAF88;
    --evening-accent: #B8C9A8;
    --evening-background: #F0F8F0;
    --evening-text: #34495E;
    
    /* Night Theme (10PM - 5AM) - Deep Charcoals */
    --night-primary: #2C3E50;
    --night-secondary: #34495E;
    --night-accent: #5D6D7E;
    --night-background: #1A1A1A;
    --night-text: #E8E8E8;
    
    /* Mood-Based Themes */
    /* Energized - High Energy, Pleasant */
    --energized-primary: #D4AF37;
    --energized-secondary: #E6C547;
    --energized-accent: #F4E19C;
    
    /* Calm - Low Energy, Pleasant */
    --calm-primary: #7A9B7A;
    --calm-secondary: #9CAF88;
    --calm-accent: #B8C9A8;
    
    /* Focused - High Energy, Neutral */
    --focused-primary: #1A4D3A;
    --focused-secondary: #2D6B47;
    --focused-accent: #4A8B6A;
    
    /* Restful - Low Energy, Neutral */
    --restful-primary: #5D6D7E;
    --restful-secondary: #85929E;
    --restful-accent: #A0A0A0;
    
    /* PROPORTIONAL SPACING SYSTEM - Intentional Asymmetry */
    --space-micro: 0.125rem;    /* 2px - Fine details */
    --space-tiny: 0.25rem;      /* 4px - Micro spacing */
    --space-small: 0.5rem;      /* 8px - Small spacing */
    --space-base: 1rem;         /* 16px - Base spacing */
    --space-large: 1.5rem;      /* 24px - Large spacing */
    --space-xl: 2rem;           /* 32px - Extra large */
    --space-2xl: 2.5rem;        /* 40px - Double XL */
    --space-3xl: 3rem;          /* 48px - Triple XL */
    --space-4xl: 4rem;          /* 64px - Quadruple XL */
    --space-5xl: 6rem;          /* 96px - Massive */
    --space-6xl: 8rem;          /* 128px - Hero spacing */
    
    /* ASYMMETRICAL LAYOUT VARIABLES */
    --asymmetry-offset: 2rem;   /* Intentional offset for visual interest */
    --asymmetry-offset-large: 4rem;
    --asymmetry-offset-small: 1rem;
    --golden-ratio: 1.618;
    --golden-ratio-inverse: 0.618;
    
    /* iOS Touch Targets */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;
    --touch-target-large: 56px;
    
    /* VARIABLE & EXPRESSIVE TYPOGRAPHY SCALE */
    --font-tiny: 0.75rem;      /* 12px - Fine print */
    --font-small: 0.875rem;    /* 14px - Captions */
    --font-base: 1rem;         /* 16px - Body text */
    --font-large: 1.125rem;    /* 18px - Large body */
    --font-xl: 1.25rem;        /* 20px - Small headings */
    --font-2xl: 1.5rem;        /* 24px - Section headings */
    --font-3xl: 1.875rem;      /* 30px - Page titles */
    --font-4xl: 2.25rem;       /* 36px - Hero subtitles */
    --font-5xl: 2.75rem;       /* 44px - Hero titles */
    --font-6xl: 3.25rem;       /* 52px - Large hero */
    --font-7xl: 3.75rem;       /* 60px - Massive hero */
    
    /* FONT FAMILIES - UI vs Content */
    --font-family-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-content: 'Lora', 'Georgia', 'Times New Roman', serif;
    --font-family-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
    --font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    
    /* DYNAMIC FONT EXPRESSIONS */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* FONT OPTICAL SIZING */
    --font-optical-sizing: auto;
    
    /* VARIABLE FONT FEATURES */
    --font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
    
    /* Border Radius Scale */
    --radius-none: 0;
    --radius-sm: 0.25rem;
    --radius-base: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 2rem;
    --radius-3xl: 3rem;
    --radius-full: 9999px;
    
    /* Premium Transitions */
    --transition-instant: 100ms ease-out;
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-premium: 500ms cubic-bezier(0.23, 1, 0.32, 1);
    --transition-bounce: 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Light Mode */
html {
    background-color: var(--linen-white);
    color: var(--charcoal);
}

/* Dark Mode */
html.dark {
    background-color: #1a1a1a;
    color: #d1d1d1;
}

html.dark .bg-linen-white { background-color: #1a1a1a; }
html.dark .text-charcoal { color: #d1d1d1; }
html.dark .text-forest-green { color: #86b596; }
html.dark .text-earthy-gold { color: #dcb981; }
html.dark .border-earthy-gold { border-color: #dcb981; }
html.dark .bg-light-gold { background-color: #3a3021; }
html.dark .bg-light-green { background-color: #2c3a32; }
html.dark .bg-charcoal { background-color: #111; }
html.dark .fill-charcoal { fill: #d1d1d1; }
html.dark nav, html.dark footer {
     background-color: #111;
     border-color: #444;
}
html.dark .hover\:bg-gray-100:hover {
    background-color: #333;
}
 html.dark .logo-path {
    stroke: var(--linen-white);
}

.logo-path {
    transition: all 0.3s ease;
    animation: iconWiggle 8s ease-in-out infinite;
}
html.dark .prose-p\:text-charcoal\/80 p { color: #d1d1d1; }
html.dark .border-black\/5 { border-color: #ffffff1a; }

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.8;
    font-size: 18px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Performance optimizations */
* {
    box-sizing: border-box;
}

/* Mobile-specific performance optimizations */
@media (max-width: 768px) {
    /* Reduce animations on mobile for better performance */
    .floating-particle {
        animation-duration: 8s;
    }
    
    /* Optimize transitions for mobile */
    * {
        transition-duration: 0.2s !important;
    }
    
    /* Reduce complex animations */
    .group:hover .group-hover\:scale-110 {
        transform: scale(1.05);
    }
    
    /* Optimize scrolling performance */
    .overflow-y-auto {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    .ambient-breathe {
        animation-duration: 6s;
    }
    
    .ambient-float {
        animation-duration: 10s;
    }
    
    /* Optimize hover effects for touch devices */
    .hover\:scale-105:hover {
        transform: scale(1.02);
    }
    
    .hover\:shadow-2xl:hover {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }
    
    /* Better touch feedback */
    .touch-manipulation {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Improved mobile scrolling */
    .overflow-y-auto {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Better mobile focus states */
    .focus\:ring-4:focus {
        box-shadow: 0 0 0 3px rgba(74, 108, 85, 0.3);
    }
    
    /* Enhanced mobile accessibility */
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    
    /* Better mobile text selection */
    ::selection {
        background-color: rgba(74, 108, 85, 0.2);
        color: inherit;
    }
    
    /* Improved mobile button states */
    button:active {
        transform: scale(0.98);
    }
    
    /* Better mobile link states */
    a:active {
        transform: scale(0.99);
    }
    
    /* Enhanced mobile scrolling */
    body {
        -webkit-overflow-scrolling: touch;
    }
}

/* Global Enhancements */
.btn-primary { 
    padding: 0.75rem 1.5rem;
    color: white;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    transform: scale(1);
    background: var(--gradient-primary);
    box-shadow: var(--shadow-soft);
    display: inline-block !important;
    visibility: visible !important;
}
.btn-primary:hover {
    transform: scale(1.05);
}

/* Ensure all start buttons are visible */
#timer-start-btn, #journal-start-btn, #workout-start-btn, #start-recording-btn {
    background-color: #2d5016 !important;
    color: white !important;
    display: inline-block !important;
    visibility: visible !important;
    border: 2px solid #2d5016 !important;
    font-weight: bold !important;
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
}

#timer-start-btn:hover, #journal-start-btn:hover, #workout-start-btn:hover, #start-recording-btn:hover {
    background-color: #1a3009 !important;
    border-color: #1a3009 !important;
}
.btn-primary:hover {
    box-shadow: var(--shadow-hover);
}
.btn-secondary { 
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: 2px solid var(--earthy-gold);
    color: var(--earthy-gold);
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    transform: scale(1);
    background: linear-gradient(135deg, transparent 0%, rgba(185, 139, 76, 0.05) 100%);
}
.btn-secondary:hover {
    transform: scale(1.05);
}
.btn-secondary:hover {
    background: var(--gradient-secondary);
    color: white;
    border-color: transparent;
}

.main-nav-link, .timer-duration-btn, button, .card-link {
    transition: all 0.4s ease-in-out;
}
.card-link {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, box-shadow;
}
.card-link:hover {
     transform: translateY(-6px) scale(1.02);
     box-shadow: var(--shadow-hover);
}
 html.dark .card-link:hover {
     box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 6px 12px rgba(0,0,0,0.2);
}
button:active {
    transform: scale(0.97);
}

.main-nav-link {
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, color;
}

.main-nav-link:hover {
    transform: translateY(-1px);
}
.main-nav-link::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--forest-green);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
}
.main-nav-link:hover::before {
    width: 100%;
}
.main-nav-link.active {
    font-weight: 700;
    color: var(--forest-green);
}
.main-nav-link.active::before {
    width: 100%;
}
html.dark .main-nav-link.active { color: #86b596; }
html.dark .main-nav-link::before { background: #86b596; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--earthy-gold);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Enhanced focus indicators for mobile */
@media (max-width: 768px) {
    a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
        outline: 3px solid var(--earthy-gold);
        outline-offset: 3px;
        box-shadow: 0 0 0 6px rgba(74, 108, 85, 0.2);
    }
    
    /* Better touch feedback */
    button:active, a:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* Skip link styling */
#skip-to-content {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
#skip-to-content:focus {
    position: fixed;
    top: 1rem;
    left: 1rem;
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    background: var(--charcoal);
    color: var(--linen-white);
    z-index: 1000;
    border-radius: 6px;
}

/* Custom UI Elements */
.article-content blockquote {
    border-left: 4px solid var(--earthy-gold);
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    font-family: 'Lora', serif;
    letter-spacing: 0.025em;
    color: #555;
}
html.dark .article-content blockquote {
    border-left-color: #dcb981;
    color: #aaa;
}

.call-out-box {
    background-color: var(--light-green);
    border-left: 4px solid var(--forest-green);
    padding: 1.5rem;
    margin: 2rem 0;
    border-radius: 0 8px 8px 0;
}
html.dark .call-out-box {
    background-color: #2c3a32;
    border-left-color: #86b596;
}

#progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--forest-green) 0%, var(--sage-deep) 100%);
    width: 0%;
    z-index: 100;
    transition: width 0.1s linear;
    box-shadow: 0 2px 8px rgba(26, 77, 58, 0.2);
    animation: subtleGlow 3s ease-in-out infinite;
}
html.dark #progress-bar {
    background-color: #86b596;
}

.fade-in {
    animation: fadeIn 0.6s ease-in-out;
}
.stagger-in > * {
    animation: fadeIn 0.6s ease-in-out both;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Typography Enhancements */
h1, h2, h3, h4, h5, h6, .font-lora {
    font-family: 'Lora', serif;
}

/* Smooth scrolling enhancement */
html {
    scroll-behavior: smooth;
}

/* Enhanced focus indicators for better accessibility */
*:focus-visible {
    outline: 2px solid #4A6C55;
    outline-offset: 2px;
}

/* Improved button states */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.btn:disabled:hover {
    transform: none !important;
}

/* Enhanced text selection */
::selection {
    background: linear-gradient(135deg, rgba(45, 80, 22, 0.2), rgba(184, 134, 11, 0.2));
    color: #2d5016;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

::-moz-selection {
    background: linear-gradient(135deg, rgba(45, 80, 22, 0.2), rgba(184, 134, 11, 0.2));
    color: #2d5016;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* Premium Animation Classes */
.animate-fade-up {
    animation: fadeUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
    transform: translateY(30px);
}

.animate-fade-in {
    animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
}

.animate-slide-left {
    animation: slideLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
    transform: translateX(-50px);
}

.animate-slide-right {
    animation: slideRight 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
    transform: translateX(50px);
}

.animate-scale-in {
    animation: scaleIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
    transform: scale(0.9);
}

.animate-rotate-in {
    animation: rotateIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
    transform: rotate(-10deg) scale(0.9);
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes slideLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rotateIn {
    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

/* User-Friendly Button System */
.btn-premium {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 14px 28px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--cream-rich);
    background: var(--gradient-premium);
    border: 2px solid transparent;
    border-radius: 14px;
    box-shadow: var(--shadow-medium);
    cursor: pointer;
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(12px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    user-select: none;
    transform: translateY(0);
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

/* Button Size Variants - iOS Optimized */
.btn-premium.btn-sm {
    padding: 8px 16px;
    font-size: var(--font-small);
    border-radius: var(--radius-md);
    min-height: var(--touch-target-min);
}

.btn-premium.btn-lg {
    padding: 14px 24px;
    font-size: var(--font-large);
    border-radius: var(--radius-lg);
    min-height: var(--touch-target-comfortable);
}

.btn-premium.btn-xl {
    padding: 16px 32px;
    font-size: var(--font-xl);
    border-radius: var(--radius-xl);
    min-height: var(--touch-target-large);
}

/* Button State Variants - Delight-Focused */
.btn-premium.btn-primary {
    background: var(--gradient-premium);
    color: var(--cream-rich);
    border-color: var(--forest-medium);
}

.btn-premium.btn-secondary {
    background: var(--gradient-energy);
    color: var(--charcoal-rich);
    border-color: var(--gold-medium);
}

.btn-premium.btn-success {
    background: linear-gradient(135deg, #34C759 0%, #30A46C 100%);
    color: white;
}

.btn-premium.btn-warning {
    background: linear-gradient(135deg, #FF9500 0%, #FF8C00 100%);
    color: white;
}

.btn-premium.btn-error {
    background: linear-gradient(135deg, #FF3B30 0%, #D70015 100%);
    color: white;
}

.btn-premium.btn-outline {
    background: transparent;
    color: var(--forest-deep);
    border-color: var(--forest-medium);
}

.btn-premium.btn-ghost {
    background: rgba(255, 255, 255, 0.1);
    color: var(--charcoal);
    backdrop-filter: blur(10px);
}

/* Button Loading State */
.btn-premium.btn-loading {
    pointer-events: none;
    opacity: 0.7;
}

.btn-premium.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Button Disabled State */
.btn-premium:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Button Icon Support */
.btn-premium .btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-premium .btn-icon-left {
    margin-right: 8px;
}

.btn-premium .btn-icon-right {
    margin-left: 8px;
}

.btn-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left var(--transition-slow);
    z-index: 1;
}

.btn-premium::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-glass);
    border-radius: inherit;
    opacity: 0;
    transition: opacity var(--transition-base);
    z-index: 2;
}

.btn-premium:hover::before {
    left: 100%;
}

.btn-premium:hover::after {
    opacity: 1;
}

.btn-premium:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: var(--shadow-hover), var(--active-glow);
    border-color: var(--gold-medium);
    background: var(--gradient-premium);
}

.btn-premium:active {
    transform: translateY(-2px) scale(1.01);
    transition: all var(--transition-instant);
}

.btn-premium:focus {
    outline: none;
    box-shadow: var(--shadow-medium), 0 0 0 4px var(--focus-ring);
}

/* Premium Card Animations */
.card-premium {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-medium);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transform: translateZ(0); /* Hardware acceleration */
    will-change: transform, box-shadow;
}

.card-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(74, 108, 85, 0.05) 0%, rgba(184, 139, 76, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card-premium:hover::before {
    opacity: 1;
}

.card-premium:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Premium Loading Animations */
.loading-premium {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(74, 108, 85, 0.1);
    border-left: 4px solid #4A6C55;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-premium::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid #B98B4C;
    border-radius: 50%;
    animation: spin 0.5s linear infinite reverse;
}

/* Premium Progress Animations */
.progress-premium {
    position: relative;
    height: 8px;
    background: rgba(74, 108, 85, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.progress-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, #4A6C55, #6B8E6B, #B98B4C);
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-premium::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Premium Notification Animations */
.notification-premium {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 400px;
}

.notification-info {
    background: rgba(59, 130, 246, 0.95);
    color: white;
    border-color: rgba(59, 130, 246, 0.3);
}

.notification-success {
    background: rgba(34, 197, 94, 0.95);
    color: white;
    border-color: rgba(34, 197, 94, 0.3);
}

.notification-warning {
    background: rgba(245, 158, 11, 0.95);
    color: white;
    border-color: rgba(245, 158, 11, 0.3);
}

.notification-error {
    background: rgba(239, 68, 68, 0.95);
    color: white;
    border-color: rgba(239, 68, 68, 0.3);
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Premium Ripple Effect */
.ripple-premium {
    position: relative;
    overflow: hidden;
}

.ripple-premium::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;
    pointer-events: none;
}

.ripple-premium:active::before {
    width: 300px;
    height: 300px;
}

/* Premium Glass Morphism */
.glass-premium {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Premium Gradient Text */
.gradient-text-premium {
    background: var(--text-gradient-premium);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* Ultra-Premium Typography System */
.text-premium {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.heading-premium {
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--charcoal);
}

.heading-premium h1 {
    font-size: var(--font-6xl);
    margin-bottom: var(--space-xl);
}

.heading-premium h2 {
    font-size: var(--font-4xl);
    margin-bottom: var(--space-lg);
}

.heading-premium h3 {
    font-size: var(--font-2xl);
    margin-bottom: var(--space-base);
}

.body-premium {
    font-size: var(--font-base);
    line-height: 1.6;
    color: var(--charcoal);
    font-weight: 400;
}

.caption-premium {
    font-size: var(--font-small);
    color: var(--warm-gray);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Ultra-Premium Animation Keyframes */
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes floatPremium {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-10px) rotate(1deg); }
    66% { transform: translateY(-5px) rotate(-1deg); }
}

@keyframes shimmerPremium {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes pulsePremium {
    0%, 100% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.05);
        opacity: 0.8;
    }
}

@keyframes glowPremium {
    0%, 100% {
        box-shadow: var(--shadow-medium), 0 0 20px rgba(212, 175, 55, 0.3);
    }
    50% {
        box-shadow: var(--shadow-premium), 0 0 40px rgba(212, 175, 55, 0.6);
    }
}

@keyframes morphingBackground {
    0%, 100% {
        background: var(--gradient-premium);
    }
    25% {
        background: linear-gradient(135deg, #4A6C55 0%, #9CAF88 50%, #D4AF37 100%);
    }
    50% {
        background: linear-gradient(135deg, #9CAF88 0%, #D4AF37 50%, #B8860B 100%);
    }
    75% {
        background: linear-gradient(135deg, #D4AF37 0%, #B8860B 50%, #CD7F32 100%);
    }
}

@keyframes breathing {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.02);
        opacity: 0.9;
    }
}

@keyframes liquidFlow {
    0% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
}

@keyframes magneticPull {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(var(--mouse-x, 0), var(--mouse-y, 0));
    }
}

/* Ultra-Premium Interactive Elements */
.float-premium {
    animation: floatPremium 6s ease-in-out infinite;
}

.shimmer-premium {
    position: relative;
    overflow: hidden;
}

.shimmer-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: shimmerPremium 2s infinite;
}

.glow-premium {
    animation: glowPremium 3s ease-in-out infinite;
}

.pulse-premium {
    animation: pulsePremium 2s ease-in-out infinite;
}

.breathing-premium {
    animation: breathing 4s ease-in-out infinite;
}

.morphing-premium {
    animation: morphingBackground 8s ease-in-out infinite;
}

.liquid-premium {
    animation: liquidFlow 6s ease-in-out infinite;
}

/* Ultra-Premium Ripple Effect */
.ripple-premium {
    position: relative;
    overflow: hidden;
    transition: all var(--transition-fast);
}

.ripple-premium::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--ripple-color);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.ripple-premium:active::after {
    width: 300px;
    height: 300px;
}

/* Premium Magnetic Effect */
.magnetic-premium {
    transition: transform var(--transition-base);
    cursor: pointer;
}

.magnetic-premium:hover {
    transform: scale(1.05) rotate(1deg);
}

/* Ultra-Premium Glass Morphism */
.glass-premium {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-medium);
}

.glass-premium-dark {
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-medium);
}

/* Premium Loading States */
.loading-premium {
    position: relative;
    overflow: hidden;
}

.loading-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmerPremium 1.5s infinite;
}

/* Ultra-Premium Scroll Animations */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all var(--transition-premium);
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Premium Focus States */
.focus-premium:focus {
    outline: none;
    box-shadow: 0 0 0 4px var(--focus-ring);
    transform: scale(1.02);
}

/* Ultra-Premium Hover States */
.hover-lift {
    transition: transform var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-8px);
}

.hover-glow:hover {
    box-shadow: var(--shadow-premium), var(--shadow-glow);
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-rotate:hover {
    transform: rotate(2deg);
}

/* Ultra-Premium Progress Bars */
.progress-premium {
    height: 8px;
    background: rgba(74, 108, 85, 0.1);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(10px);
}

.progress-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-premium);
    border-radius: inherit;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-slow);
}

.progress-premium[style*="width"]::before {
    transform: scaleX(1);
}

/* Premium Form Elements */
.input-premium {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(74, 108, 85, 0.2);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    font-size: var(--font-base);
    font-family: 'Inter', sans-serif;
    transition: all var(--transition-base);
    backdrop-filter: blur(10px);
}

.input-premium:focus {
    outline: none;
    border-color: var(--forest-green);
    box-shadow: 0 0 0 4px var(--focus-ring);
    background: rgba(255, 255, 255, 0.95);
}

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

/* Premium Select Elements */
.select-premium {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(74, 108, 85, 0.2);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    font-size: var(--font-base);
    font-family: 'Inter', sans-serif;
    transition: all var(--transition-base);
    backdrop-filter: blur(10px);
    cursor: pointer;
}

.select-premium:focus {
    outline: none;
    border-color: var(--forest-green);
    box-shadow: 0 0 0 4px var(--focus-ring);
    background: rgba(255, 255, 255, 0.95);
}

/* Premium Textarea */
.textarea-premium {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(74, 108, 85, 0.2);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    font-size: var(--font-base);
    font-family: 'Inter', sans-serif;
    transition: all var(--transition-base);
    backdrop-filter: blur(10px);
    resize: none;
    min-height: 120px;
}

.textarea-premium:focus {
    outline: none;
    border-color: var(--forest-green);
    box-shadow: 0 0 0 4px var(--focus-ring);
    background: rgba(255, 255, 255, 0.95);
}

/* Ultra-Premium Loading Spinner */
.spinner-premium {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(74, 108, 85, 0.1);
    border-left: 4px solid var(--forest-green);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Premium Status Indicators */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-size: var(--font-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-indicator.success {
    background: rgba(52, 199, 89, 0.1);
    color: #34C759;
    border: 1px solid rgba(52, 199, 89, 0.2);
}

.status-indicator.warning {
    background: rgba(255, 149, 0, 0.1);
    color: #FF9500;
    border: 1px solid rgba(255, 149, 0, 0.2);
}

.status-indicator.error {
    background: rgba(255, 59, 48, 0.1);
    color: #FF3B30;
    border: 1px solid rgba(255, 59, 48, 0.2);
}

.status-indicator.info {
    background: rgba(0, 122, 255, 0.1);
    color: #007AFF;
    border: 1px solid rgba(0, 122, 255, 0.2);
}

/* Ultra-Premium Navigation System */
.nav-item-premium {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--transition-base);
    backdrop-filter: blur(10px);
    border: 1px solid transparent;
    overflow: hidden;
}

.nav-item-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-glass);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.nav-item-premium:hover::before {
    opacity: 1;
}

.nav-item-premium:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
    border-color: rgba(74, 108, 85, 0.2);
}

.nav-icon {
    font-size: 18px;
    transition: transform var(--transition-base);
}

.nav-text {
    font-weight: 600;
    font-size: var(--font-base);
    color: var(--charcoal);
    transition: color var(--transition-base);
}

.nav-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    background: var(--forest-green);
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all var(--transition-base);
}

.nav-item-premium:hover .nav-icon {
    transform: scale(1.1);
}

.nav-item-premium:hover .nav-text {
    color: var(--forest-green);
}

.nav-item-premium:hover .nav-badge {
    background: var(--earthy-gold);
    transform: scale(1.05);
}

/* Active Navigation State */
.nav-item-premium.active {
    background: rgba(74, 108, 85, 0.1);
    border-color: rgba(74, 108, 85, 0.3);
}

.nav-item-premium.active .nav-text {
    color: var(--forest-green);
    font-weight: 700;
}

.nav-item-premium.active .nav-badge {
    background: var(--earthy-gold);
    animation: pulsePremium 2s ease-in-out infinite;
}

/* Premium Breadcrumb System */
.breadcrumb-premium {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: var(--font-small);
    color: var(--warm-gray);
}

.breadcrumb-premium a {
    color: var(--warm-gray);
    text-decoration: none;
    transition: color var(--transition-base);
}

.breadcrumb-premium a:hover {
    color: var(--forest-green);
}

.breadcrumb-premium .separator {
    color: var(--warm-gray);
    opacity: 0.5;
}

.breadcrumb-premium .current {
    color: var(--charcoal);
    font-weight: 600;
}

/* Premium Tab System */
.tab-system {
    display: flex;
    border-bottom: 2px solid rgba(74, 108, 85, 0.1);
    margin-bottom: 24px;
}

.tab-item {
    padding: 12px 24px;
    border-bottom: 2px solid transparent;
    color: var(--warm-gray);
    text-decoration: none;
    font-weight: 600;
    transition: all var(--transition-base);
    position: relative;
}

.tab-item:hover {
    color: var(--forest-green);
    background: rgba(74, 108, 85, 0.05);
}

.tab-item.active {
    color: var(--forest-green);
    border-bottom-color: var(--forest-green);
}

.tab-item.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-premium);
    border-radius: 1px;
}

/* Premium Search System */
.search-premium {
    position: relative;
    max-width: 400px;
}

.search-premium input {
    width: 100%;
    padding: 12px 16px 12px 48px;
    border: 2px solid rgba(74, 108, 85, 0.2);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    font-size: var(--font-base);
    transition: all var(--transition-base);
}

.search-premium input:focus {
    outline: none;
    border-color: var(--forest-green);
    box-shadow: 0 0 0 4px var(--focus-ring);
    background: rgba(255, 255, 255, 0.95);
}

.search-premium .search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--warm-gray);
    pointer-events: none;
}

.search-premium input:focus + .search-icon {
    color: var(--forest-green);
}

@keyframes floatPremium {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-10px) rotate(1deg); }
    50% { transform: translateY(-5px) rotate(-1deg); }
    75% { transform: translateY(-15px) rotate(0.5deg); }
}

/* Premium Pulse Animation */
.pulse-premium {
    animation: pulsePremium 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulsePremium {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

/* Premium Bounce Animation */
.bounce-premium {
    animation: bouncePremium 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

@keyframes bouncePremium {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* Premium Rotation Animation */
.rotate-premium {
    animation: rotatePremium 20s linear infinite;
}

@keyframes rotatePremium {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Premium Scale Animation */
.scale-premium {
    animation: scalePremium 2s ease-in-out infinite;
}

@keyframes scalePremium {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Premium Glow Effect */
.glow-premium {
    box-shadow: 0 0 20px rgba(74, 108, 85, 0.3);
    transition: box-shadow 0.3s ease;
}

.glow-premium:hover {
    box-shadow: 0 0 30px rgba(74, 108, 85, 0.5);
}

/* Premium Skeleton Loading */
.skeleton-premium {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s infinite;
    border-radius: 8px;
}

@keyframes skeletonLoading {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .breathing-bg,
    .card-breathe,
    .floating-particle,
    .group-hover\:scale-110,
    .animate-fade-up,
    .animate-fade-in,
    .animate-slide-left,
    .animate-slide-right,
    .animate-scale-in,
    .animate-rotate-in,
    .float-premium,
    .pulse-premium,
    .bounce-premium,
    .rotate-premium,
    .scale-premium {
        animation: none !important;
        transform: none !important;
    }
    
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Advanced Accessibility Features */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .btn-premium {
        border: 3px solid currentColor;
        background: white;
        color: black;
    }
    
    .card-premium {
        border: 2px solid currentColor;
        background: white;
        color: black;
    }
}

/* Focus Management */
.focus-visible {
    outline: 3px solid var(--forest-green);
    outline-offset: 2px;
}

/* Skip Links */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--forest-green);
    color: white;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1000;
}

.skip-link:focus {
    top: 6px;
}

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

/* Micro-Interactions */
.micro-bounce:hover {
    animation: microBounce 0.3s ease-in-out;
}

@keyframes microBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.micro-shake:hover {
    animation: microShake 0.5s ease-in-out;
}

@keyframes microShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

.micro-glow:hover {
    animation: microGlow 1s ease-in-out infinite alternate;
}

@keyframes microGlow {
    0% { box-shadow: 0 0 5px rgba(74, 108, 85, 0.3); }
    100% { box-shadow: 0 0 20px rgba(74, 108, 85, 0.6); }
}

/* Smart Hover Effects */
.smart-hover {
    position: relative;
    overflow: hidden;
}

.smart-hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.smart-hover:hover::before {
    left: 100%;
}

/* Loading States */
.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Success Animations */
.success-checkmark {
    animation: successCheckmark 0.6s ease-in-out;
}

@keyframes successCheckmark {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Error Animations */
.error-shake {
    animation: errorShake 0.5s ease-in-out;
}

@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Enhanced Visual Hierarchy */
.hero-title {
    font-size: clamp(2rem, 8vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
}

.section-title {
    font-size: clamp(1.5rem, 6vw, 2rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
}

.card-title {
    font-size: clamp(1.125rem, 4vw, 1.25rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.005em;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
}

.body-text {
    font-size: clamp(0.95rem, 3vw, 1rem);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.005em;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
}

.caption-text {
    font-size: clamp(0.875rem, 2.5vw, 0.9rem);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.01em;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
}

/* Enhanced Mobile-First Touch Target Optimizations */
@media screen and (max-width: 768px) {
    /* iOS Safe Area Handling */
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    /* Enhanced touch targets for all interactive elements */
    .btn-premium {
        min-height: 48px;
        min-width: 48px;
        padding: 14px 20px;
        font-size: 16px; /* Prevent zoom on iOS */
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    .btn-sm {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
        font-size: 14px;
    }
    
    .btn-lg {
        min-height: 52px;
        min-width: 52px;
        padding: 16px 24px;
        font-size: 18px;
    }
    
    .btn-xl {
        min-height: 56px;
        min-width: 56px;
        padding: 18px 28px;
        font-size: 20px;
    }
    
    /* Navigation touch targets */
    .nav-item-premium {
        min-height: 48px;
        min-width: 48px;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
    }
    
    .nav-icon {
        min-height: 44px;
        min-width: 44px;
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Timer controls touch targets */
    .timer-control {
        min-height: 56px;
        min-width: 56px;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
    }
    
    .timer-button {
        min-height: 64px;
        min-width: 64px;
        padding: 20px;
        font-size: 20px;
        touch-action: manipulation;
    }
    
    /* Journal touch targets */
    .journal-button {
        min-height: 48px;
        min-width: 48px;
        padding: 14px 24px;
        touch-action: manipulation;
    }
    
    .mood-selector {
        min-height: 56px;
        min-width: 56px;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
    }
    
    /* Workout touch targets */
    .workout-button {
        min-height: 52px;
        min-width: 52px;
        padding: 16px 24px;
        touch-action: manipulation;
    }
    
    .exercise-item {
        min-height: 56px;
        padding: 16px 20px;
        touch-action: manipulation;
    }
    
    /* Clarity touch targets */
    .clarity-button {
        min-height: 52px;
        min-width: 52px;
        padding: 16px 24px;
        touch-action: manipulation;
    }
    
    .recording-control {
        min-height: 64px;
        min-width: 64px;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
    }
    
    /* Floating action buttons */
    .floating-action-button {
        min-height: 56px;
        min-width: 56px;
        padding: 16px;
        touch-action: manipulation;
    }
    
    .contextual-action {
        min-height: 48px;
        min-width: 48px;
        padding: 14px;
        touch-action: manipulation;
    }
    
    /* Mobile card spacing */
    .card-premium {
        padding: var(--space-large);
        margin: var(--space-base);
        border-radius: var(--radius-xl);
        touch-action: manipulation;
    }
    
    .card-interactive {
        min-height: 56px;
        padding: 20px;
        cursor: pointer;
        touch-action: manipulation;
    }
    
    /* Mobile typography adjustments */
    .hero-title {
        font-size: clamp(1.75rem, 10vw, 2.5rem);
        margin-bottom: var(--space-large);
        line-height: 1.2;
    }
    
    .section-title {
        font-size: clamp(1.25rem, 8vw, 1.75rem);
        margin-bottom: var(--space-base);
        line-height: 1.3;
    }
    
    /* Mobile grid adjustments */
    .grid {
        gap: var(--space-base);
    }
    
    /* Mobile form elements */
    input, textarea, select {
        font-size: 16px; /* Prevent zoom on iOS */
        min-height: 48px;
        touch-action: manipulation;
        -webkit-appearance: none;
        border-radius: 8px;
    }
    
    input[type="checkbox"], input[type="radio"] {
        min-height: 44px;
        min-width: 44px;
        transform: scale(1.2);
    }
    
    /* Enhanced tap feedback */
    .btn-premium:active,
    .nav-item-premium:active,
    .card-interactive:active,
    .timer-control:active,
    .journal-button:active,
    .workout-button:active,
    .clarity-button:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
    
    /* Container and layout optimizations */
    .container {
        padding: 16px;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    .page-container {
        padding: 16px;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    
    /* Improved spacing for mobile */
    .mobile-spacing {
        margin-bottom: 16px;
    }
    
    .mobile-spacing-lg {
        margin-bottom: 24px;
    }
    
    .mobile-spacing-xl {
        margin-bottom: 32px;
    }
}

/* iPhone-specific optimizations */
@media screen and (max-width: 428px) {
    /* Enhanced iPhone layout optimizations */
    .hero-title {
        font-size: clamp(1.5rem, 12vw, 2.25rem);
        line-height: 1.1;
        margin-bottom: 20px;
    }
    
    .section-title {
        font-size: clamp(1.125rem, 10vw, 1.5rem);
        line-height: 1.2;
        margin-bottom: 16px;
    }
    
    .card-premium {
        padding: 16px;
        margin: 12px;
        border-radius: 16px;
    }
    
    .btn-premium.btn-xl {
        padding: 18px 28px;
        font-size: 18px;
        min-height: 56px;
    }
    
    /* iPhone-specific touch targets */
    .timer-button {
        min-height: 72px;
        min-width: 72px;
        padding: 24px;
        font-size: 24px;
    }
    
    .recording-control {
        min-height: 72px;
        min-width: 72px;
        padding: 24px;
    }
    
    .floating-action-button {
        min-height: 60px;
        min-width: 60px;
        padding: 18px;
    }
    
    /* iPhone-specific spacing */
    .container {
        padding: 12px;
    }
    
    .page-container {
        padding: 12px;
    }
    
    /* iPhone-specific grid */
    .grid {
        gap: 12px;
        grid-template-columns: 1fr;
    }
    
    /* iPhone-specific navigation */
    .nav-item-premium {
        min-height: 52px;
        padding: 14px 18px;
        font-size: 16px;
    }
    
    /* iPhone-specific form elements */
    input, textarea, select {
        min-height: 52px;
        font-size: 16px;
        padding: 14px 16px;
    }
    
    /* iPhone-specific mood selector */
    .mood-selector {
        min-height: 60px;
        min-width: 60px;
        padding: 18px;
    }
    
    /* iPhone-specific exercise items */
    .exercise-item {
        min-height: 60px;
        padding: 18px 20px;
        font-size: 16px;
    }
}

/* iPad-specific optimizations */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .hero-title {
        font-size: clamp(2.25rem, 6vw, 3rem);
        line-height: 1.1;
    }
    
    .section-title {
        font-size: clamp(1.75rem, 4vw, 2.25rem);
        line-height: 1.2;
    }
    
    .card-premium {
        padding: var(--space-2xl);
        margin: var(--space-large);
    }
    
    /* iPad-specific touch targets */
    .btn-premium {
        min-height: 52px;
        min-width: 52px;
        padding: 16px 24px;
        font-size: 18px;
    }
    
    .timer-button {
        min-height: 72px;
        min-width: 72px;
        padding: 24px;
        font-size: 24px;
    }
    
    .nav-item-premium {
        min-height: 52px;
        padding: 16px 20px;
        font-size: 18px;
    }
}

/* Landscape orientation optimizations */
@media screen and (max-width: 768px) and (orientation: landscape) {
    /* Landscape-specific layout adjustments */
    .hero-title {
        font-size: clamp(1.25rem, 8vw, 1.75rem);
        margin-bottom: 12px;
    }
    
    .section-title {
        font-size: clamp(1rem, 6vw, 1.25rem);
        margin-bottom: 8px;
    }
    
    .card-premium {
        padding: 12px;
        margin: 8px;
    }
    
    .container {
        padding: 8px;
    }
    
    .page-container {
        padding: 8px;
    }
    
    /* Landscape-specific touch targets */
    .btn-premium {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 16px;
        font-size: 14px;
    }
    
    .timer-button {
        min-height: 56px;
        min-width: 56px;
        padding: 16px;
        font-size: 18px;
    }
    
    .nav-item-premium {
        min-height: 44px;
        padding: 10px 14px;
        font-size: 14px;
    }
    
    /* Landscape-specific spacing */
    .mobile-spacing {
        margin-bottom: 8px;
    }
    
    .mobile-spacing-lg {
        margin-bottom: 12px;
    }
    
    .mobile-spacing-xl {
        margin-bottom: 16px;
    }
}

/* Portrait orientation optimizations */
@media screen and (max-width: 768px) and (orientation: portrait) {
    /* Portrait-specific layout adjustments */
    .hero-title {
        font-size: clamp(1.75rem, 10vw, 2.5rem);
        margin-bottom: 20px;
    }
    
    .section-title {
        font-size: clamp(1.25rem, 8vw, 1.75rem);
        margin-bottom: 16px;
    }
    
    .card-premium {
        padding: 20px;
        margin: 16px;
    }
    
    .container {
        padding: 16px;
    }
    
    .page-container {
        padding: 16px;
    }
    
    /* Portrait-specific touch targets */
    .btn-premium {
        min-height: 52px;
        min-width: 52px;
        padding: 16px 24px;
        font-size: 16px;
    }
    
    .timer-button {
        min-height: 72px;
        min-width: 72px;
        padding: 24px;
        font-size: 24px;
    }
    
    .nav-item-premium {
        min-height: 52px;
        padding: 16px 20px;
        font-size: 16px;
    }
    
    /* Portrait-specific spacing */
    .mobile-spacing {
        margin-bottom: 16px;
    }
    
    .mobile-spacing-lg {
        margin-bottom: 24px;
    }
    
    .mobile-spacing-xl {
        margin-bottom: 32px;
    }
}

/* Loading States & Skeleton Screens */
.skeleton-content {
    animation: skeletonPulse 1.5s ease-in-out infinite alternate;
}

@keyframes skeletonPulse {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.slide-up {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Enhanced Loading States */
.btn-premium.loading {
    pointer-events: none;
    opacity: 0.7;
}

.btn-premium.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Toast Notifications */
.toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    padding: 12px 20px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
}

.toast-notification.show {
    transform: translateX(0);
}

.toast-notification.success {
    background: linear-gradient(135deg, #10B981, #059669);
}

.toast-notification.error {
    background: linear-gradient(135deg, #EF4444, #DC2626);
}

.toast-notification.warning {
    background: linear-gradient(135deg, #F59E0B, #D97706);
}

.toast-notification.info {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
}

/* Perfect Spacing System */
.space-vertical-rhythm > * + * {
    margin-top: 1.5rem;
}

.space-vertical-tight > * + * {
    margin-top: 1rem;
}

.space-vertical-loose > * + * {
    margin-top: 2rem;
}

/* Visual Flow Optimization */
.visual-flow {
    display: grid;
    gap: 2rem;
}

.visual-flow-tight {
    display: grid;
    gap: 1rem;
}

.visual-flow-loose {
    display: grid;
    gap: 3rem;
}

/* Color Psychology Enhancements */
.primary-accent {
    color: var(--forest-green);
    background: linear-gradient(135deg, var(--forest-green), var(--forest-green-light));
}

.secondary-accent {
    color: var(--earthy-gold);
    background: linear-gradient(135deg, var(--earthy-gold), var(--warm-gold));
}

.neutral-accent {
    color: var(--charcoal);
    background: linear-gradient(135deg, var(--charcoal), var(--charcoal));
}

/* Eye Movement Optimization */
.f-pattern {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    align-items: start;
}

.z-pattern {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Alignment Perfection */
.align-baseline {
    align-items: baseline;
}

.align-center {
    align-items: center;
}

.align-start {
    align-items: flex-start;
}

.align-end {
    align-items: flex-end;
}

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

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

/* Grid System Perfection */
.grid-perfect {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    align-items: start;
}

.grid-perfect-tight {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    align-items: start;
}

.grid-perfect-loose {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 3rem;
    align-items: start;
}

/* ========================================
   SELECTIVE GLASSMORPHISM SYSTEM
   ======================================== */

/* Base glassmorphism classes */
.glass {
    background: var(--glass-bg);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.glass-strong {
    background: var(--glass-bg-strong);
    backdrop-filter: var(--backdrop-blur-strong);
    -webkit-backdrop-filter: var(--backdrop-blur-strong);
    border: 1px solid var(--glass-border-strong);
    box-shadow: var(--glass-shadow-strong);
}

/* Floating control panels - key interactive layers */
.glass-control {
    background: var(--glass-bg);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 16px;
    padding: 20px;
    position: relative;
    z-index: 10;
}

.glass-control-strong {
    background: var(--glass-bg-strong);
    backdrop-filter: var(--backdrop-blur-strong);
    -webkit-backdrop-filter: var(--backdrop-blur-strong);
    border: 1px solid var(--glass-border-strong);
    box-shadow: var(--glass-shadow-strong);
    border-radius: 20px;
    padding: 24px;
    position: relative;
    z-index: 10;
}

/* Timer control panel - hero element */
.glass-timer-control {
    background: var(--glass-bg-strong);
    backdrop-filter: var(--backdrop-blur-strong);
    -webkit-backdrop-filter: var(--backdrop-blur-strong);
    border: 2px solid var(--glass-border-strong);
    box-shadow: var(--glass-shadow-strong);
    border-radius: 24px;
    padding: 32px;
    position: relative;
    z-index: 20;
    margin: 0 auto;
    max-width: 400px;
}

/* Navigation glassmorphism - subtle depth */
.glass-nav {
    background: var(--glass-bg);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 4px 20px rgba(26, 77, 58, 0.08);
}

/* Modal glassmorphism - strong depth for focus */
.glass-modal {
    background: var(--glass-bg-strong);
    backdrop-filter: var(--backdrop-blur-strong);
    -webkit-backdrop-filter: var(--backdrop-blur-strong);
    border: 2px solid var(--glass-border-strong);
    box-shadow: var(--glass-shadow-strong);
    border-radius: 24px;
    padding: 32px;
    position: relative;
    z-index: 50;
}

/* Card glassmorphism - subtle depth for content */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
}

.glass-card:hover {
    background: var(--glass-bg-strong);
    box-shadow: var(--glass-shadow-strong);
    transform: translateY(-2px);
}

/* Button glassmorphism - interactive feedback */
.glass-btn {
    background: var(--glass-bg);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 12px;
    padding: 12px 24px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.glass-btn:hover {
    background: var(--glass-bg-strong);
    box-shadow: var(--glass-shadow-strong);
    transform: translateY(-1px);
}

.glass-btn:active {
    transform: translateY(0);
    box-shadow: var(--glass-shadow);
}

/* Input glassmorphism - form elements */
.glass-input {
    background: var(--glass-bg);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 12px;
    padding: 12px 16px;
    transition: all 0.3s ease;
}

.glass-input:focus {
    background: var(--glass-bg-strong);
    border-color: var(--glass-border-strong);
    box-shadow: var(--glass-shadow-strong);
    outline: none;
}

/* Progress bar glassmorphism */
.glass-progress {
    background: var(--glass-bg);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 8px;
    height: 8px;
    overflow: hidden;
    position: relative;
}

.glass-progress-fill {
    background: var(--gradient-premium);
    height: 100%;
    border-radius: 8px;
    transition: width 0.5s ease;
    position: relative;
    overflow: hidden;
}

.glass-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Notification glassmorphism */
.glass-notification {
    background: var(--glass-bg-strong);
    backdrop-filter: var(--backdrop-blur-strong);
    -webkit-backdrop-filter: var(--backdrop-blur-strong);
    border: 1px solid var(--glass-border-strong);
    box-shadow: var(--glass-shadow-strong);
    border-radius: 16px;
    padding: 16px 20px;
    position: relative;
    z-index: 50;
}

/* Flow Start specific glassmorphism */
.glass-flow-preview {
    background: var(--glass-bg-strong);
    backdrop-filter: var(--backdrop-blur-strong);
    -webkit-backdrop-filter: var(--backdrop-blur-strong);
    border: 2px solid var(--glass-border-strong);
    box-shadow: var(--glass-shadow-strong);
    border-radius: 24px;
    padding: 32px;
    position: relative;
    z-index: 10;
}

/* Timer page specific glassmorphism */
.glass-timer-display {
    background: var(--glass-bg);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 20px;
    padding: 24px;
    position: relative;
    z-index: 10;
}

/* Journal page specific glassmorphism */
.glass-journal-editor {
    background: var(--glass-bg);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 16px;
    padding: 20px;
    position: relative;
    z-index: 10;
}

/* Workout page specific glassmorphism */
.glass-workout-controls {
    background: var(--glass-bg-strong);
    backdrop-filter: var(--backdrop-blur-strong);
    -webkit-backdrop-filter: var(--backdrop-blur-strong);
    border: 2px solid var(--glass-border-strong);
    box-shadow: var(--glass-shadow-strong);
    border-radius: 20px;
    padding: 24px;
    position: relative;
    z-index: 10;
}

/* Responsive glassmorphism adjustments */
@media (max-width: 768px) {
    .glass-control,
    .glass-control-strong,
    .glass-timer-control,
    .glass-modal {
        margin: 16px;
        padding: 20px;
    }
    
    .glass-flow-preview {
        margin: 16px;
        padding: 24px;
    }
}

/* Accessibility improvements for glassmorphism */
@media (prefers-reduced-motion: reduce) {
    .glass,
    .glass-strong,
    .glass-control,
    .glass-card,
    .glass-btn {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--glass-bg-strong);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .glass,
    .glass-strong,
    .glass-control,
    .glass-card {
        background: var(--glass-bg-strong);
        border: 2px solid var(--glass-border-strong);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* ========================================
   DYNAMIC ADAPTIVE THEMES
   ======================================== */

/* Theme Application Classes */
.theme-morning {
    --color-primary: var(--morning-primary);
    --color-secondary: var(--morning-secondary);
    --color-accent: var(--morning-accent);
    --color-background: var(--morning-background);
    --color-text: var(--morning-text);
}

.theme-day {
    --color-primary: var(--day-primary);
    --color-secondary: var(--day-secondary);
    --color-accent: var(--day-accent);
    --color-background: var(--day-background);
    --color-text: var(--day-text);
}

.theme-evening {
    --color-primary: var(--evening-primary);
    --color-secondary: var(--evening-secondary);
    --color-accent: var(--evening-accent);
    --color-background: var(--evening-background);
    --color-text: var(--evening-text);
}

.theme-night {
    --color-primary: var(--night-primary);
    --color-secondary: var(--night-secondary);
    --color-accent: var(--night-accent);
    --color-background: var(--night-background);
    --color-text: var(--night-text);
}

/* Mood-Based Theme Classes */
.theme-energized {
    --color-primary: var(--energized-primary);
    --color-secondary: var(--energized-secondary);
    --color-accent: var(--energized-accent);
}

.theme-calm {
    --color-primary: var(--calm-primary);
    --color-secondary: var(--calm-secondary);
    --color-accent: var(--calm-accent);
}

.theme-focused {
    --color-primary: var(--focused-primary);
    --color-secondary: var(--focused-secondary);
    --color-accent: var(--focused-accent);
}

.theme-restful {
    --color-primary: var(--restful-primary);
    --color-secondary: var(--restful-secondary);
    --color-accent: var(--restful-accent);
}

/* Dynamic Theme Transitions */
.theme-transition {
    transition: 
        background-color 0.8s ease-in-out,
        color 0.8s ease-in-out,
        border-color 0.8s ease-in-out,
        box-shadow 0.8s ease-in-out;
}

/* Theme-Aware Elements */
.theme-aware {
    background-color: var(--color-background);
    color: var(--color-text);
    border-color: var(--color-secondary);
}

.theme-aware-primary {
    background-color: var(--color-primary);
    color: white;
}

.theme-aware-secondary {
    background-color: var(--color-secondary);
    color: white;
}

.theme-aware-accent {
    background-color: var(--color-accent);
    color: var(--color-text);
}

/* Theme-Aware Glassmorphism */
.theme-glass {
    background: color-mix(in srgb, var(--color-background) 15%, transparent);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    box-shadow: 0 8px 32px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.theme-glass-strong {
    background: color-mix(in srgb, var(--color-background) 25%, transparent);
    backdrop-filter: var(--backdrop-blur-strong);
    -webkit-backdrop-filter: var(--backdrop-blur-strong);
    border: 2px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
    box-shadow: 0 12px 40px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

/* Theme-Aware Gradients */
.theme-gradient-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 50%, var(--color-accent) 100%);
}

.theme-gradient-secondary {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent) 100%);
}

/* Theme-Aware Text Gradients */
.theme-text-gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Theme-Aware Shadows */
.theme-shadow {
    box-shadow: 0 4px 20px color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.theme-shadow-strong {
    box-shadow: 0 8px 30px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.theme-shadow-hover {
    box-shadow: 0 12px 40px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* Theme-Aware Interactive Elements */
.theme-interactive {
    background-color: var(--color-primary);
    color: white;
    transition: all 0.3s ease;
}

.theme-interactive:hover {
    background-color: var(--color-secondary);
    transform: translateY(-2px);
    box-shadow: var(--theme-shadow-hover);
}

.theme-interactive:active {
    transform: translateY(0);
    box-shadow: var(--theme-shadow);
}

/* Theme-Aware Form Elements */
.theme-input {
    background-color: color-mix(in srgb, var(--color-background) 80%, transparent);
    border: 2px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    color: var(--color-text);
    transition: all 0.3s ease;
}

.theme-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
    outline: none;
}

/* Theme-Aware Progress Bars */
.theme-progress {
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    border-radius: 8px;
    overflow: hidden;
}

.theme-progress-fill {
    background: var(--theme-gradient-primary);
    height: 100%;
    border-radius: 8px;
    transition: width 0.5s ease;
}

/* Theme-Aware Notifications */
.theme-notification {
    background-color: color-mix(in srgb, var(--color-background) 95%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
    color: var(--color-text);
    box-shadow: var(--theme-shadow-strong);
}

/* Responsive Theme Adjustments */
@media (max-width: 768px) {
    .theme-transition {
        transition-duration: 0.6s;
    }
}

/* Accessibility for Dynamic Themes */
@media (prefers-reduced-motion: reduce) {
    .theme-transition {
        transition: none;
    }
}

/* High Contrast Mode for Dynamic Themes */
@media (prefers-contrast: high) {
    .theme-morning,
    .theme-day,
    .theme-evening,
    .theme-night {
        --color-primary: #000000;
        --color-secondary: #333333;
        --color-accent: #666666;
        --color-background: #FFFFFF;
        --color-text: #000000;
    }
}

/* ========================================
   ASYMMETRICAL & SPACED LAYOUTS
   ======================================== */

/* Asymmetrical Layout System */
.asymmetrical-left {
    margin-left: var(--asymmetry-offset);
    margin-right: 0;
}

.asymmetrical-right {
    margin-right: var(--asymmetry-offset);
    margin-left: 0;
}

.asymmetrical-top {
    margin-top: var(--asymmetry-offset);
    margin-bottom: 0;
}

.asymmetrical-bottom {
    margin-bottom: var(--asymmetry-offset);
    margin-top: 0;
}

/* Golden Ratio Layouts */
.golden-ratio-left {
    width: calc(100% * var(--golden-ratio-inverse));
    margin-right: var(--space-large);
}

.golden-ratio-right {
    width: calc(100% * var(--golden-ratio-inverse));
    margin-left: var(--space-large);
}

/* Intentional Offset Layouts */
.offset-left {
    transform: translateX(calc(var(--asymmetry-offset) * -1));
}

.offset-right {
    transform: translateX(var(--asymmetry-offset));
}

.offset-top {
    transform: translateY(calc(var(--asymmetry-offset) * -1));
}

.offset-bottom {
    transform: translateY(var(--asymmetry-offset));
}

/* Asymmetrical Grid Systems */
.asymmetrical-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-large);
    align-items: start;
}

.asymmetrical-grid-reverse {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-large);
    align-items: start;
}

.asymmetrical-grid-three {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: var(--space-large);
    align-items: start;
}

/* Proportional Spacing Classes */
.space-micro { margin: var(--space-micro); }
.space-tiny { margin: var(--space-tiny); }
.space-small { margin: var(--space-small); }
.space-base { margin: var(--space-base); }
.space-large { margin: var(--space-large); }
.space-xl { margin: var(--space-xl); }
.space-2xl { margin: var(--space-2xl); }
.space-3xl { margin: var(--space-3xl); }
.space-4xl { margin: var(--space-4xl); }
.space-5xl { margin: var(--space-5xl); }
.space-6xl { margin: var(--space-6xl); }

/* Directional Spacing */
.space-x-micro { margin-left: var(--space-micro); margin-right: var(--space-micro); }
.space-x-tiny { margin-left: var(--space-tiny); margin-right: var(--space-tiny); }
.space-x-small { margin-left: var(--space-small); margin-right: var(--space-small); }
.space-x-base { margin-left: var(--space-base); margin-right: var(--space-base); }
.space-x-large { margin-left: var(--space-large); margin-right: var(--space-large); }
.space-x-xl { margin-left: var(--space-xl); margin-right: var(--space-xl); }

.space-y-micro { margin-top: var(--space-micro); margin-bottom: var(--space-micro); }
.space-y-tiny { margin-top: var(--space-tiny); margin-bottom: var(--space-tiny); }
.space-y-small { margin-top: var(--space-small); margin-bottom: var(--space-small); }
.space-y-base { margin-top: var(--space-base); margin-bottom: var(--space-base); }
.space-y-large { margin-top: var(--space-large); margin-bottom: var(--space-large); }
.space-y-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }

/* Eye Movement Optimization */
.f-pattern {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-2xl);
    align-items: start;
}

.z-pattern {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

.diagonal-flow {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    gap: var(--space-large);
    align-items: start;
}

.diagonal-flow > *:nth-child(2) {
    transform: translateY(var(--asymmetry-offset-small));
}

/* Visual Hierarchy with Asymmetry */
.hierarchy-primary {
    margin-bottom: var(--space-3xl);
    padding-left: var(--asymmetry-offset-small);
}

.hierarchy-secondary {
    margin-bottom: var(--space-xl);
    padding-right: var(--asymmetry-offset-small);
}

.hierarchy-tertiary {
    margin-bottom: var(--space-large);
    padding-left: var(--asymmetry-offset);
}

/* Timer Page Asymmetrical Layout */
.timer-asymmetrical {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-4xl);
    align-items: center;
    min-height: 60vh;
}

.timer-controls-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-large);
    padding-right: var(--asymmetry-offset);
}

.timer-visual-right {
    position: relative;
    padding-left: var(--asymmetry-offset);
}

/* Journal Page Asymmetrical Layout */
.journal-asymmetrical {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-4xl);
    align-items: start;
}

.journal-editor-left {
    padding-right: var(--asymmetry-offset);
}

.journal-prompts-right {
    padding-left: var(--asymmetry-offset-small);
    position: sticky;
    top: var(--space-2xl);
}

/* Workout Page Asymmetrical Layout */
.workout-asymmetrical {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
}

.workout-controls-left {
    padding-right: var(--asymmetry-offset-small);
}

.workout-main-center {
    text-align: center;
}

.workout-progress-right {
    padding-left: var(--asymmetry-offset-small);
    position: sticky;
    top: var(--space-2xl);
}

/* Clarity Page Asymmetrical Layout */
.clarity-asymmetrical {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-4xl);
    align-items: center;
}

.clarity-prompt-left {
    padding-right: var(--asymmetry-offset);
}

.clarity-recording-right {
    padding-left: var(--asymmetry-offset);
}

/* Responsive Asymmetrical Adjustments */
@media (max-width: 1024px) {
    .asymmetrical-grid,
    .asymmetrical-grid-reverse,
    .asymmetrical-grid-three {
        grid-template-columns: 1fr;
        gap: var(--space-large);
    }
    
    .timer-asymmetrical,
    .journal-asymmetrical,
    .workout-asymmetrical,
    .clarity-asymmetrical {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    
    .asymmetrical-left,
    .asymmetrical-right,
    .asymmetrical-top,
    .asymmetrical-bottom {
        margin: var(--space-base);
    }
    
    .offset-left,
    .offset-right,
    .offset-top,
    .offset-bottom {
        transform: none;
    }
}

@media (max-width: 768px) {
    .asymmetry-offset {
        --asymmetry-offset: var(--space-small);
    }
    
    .space-4xl,
    .space-5xl,
    .space-6xl {
        margin: var(--space-2xl);
    }
    
    .hierarchy-primary,
    .hierarchy-secondary,
    .hierarchy-tertiary {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: var(--space-large);
    }
}

/* Accessibility for Asymmetrical Layouts */
@media (prefers-reduced-motion: reduce) {
    .offset-left,
    .offset-right,
    .offset-top,
    .offset-bottom {
        transform: none;
    }
    
    .diagonal-flow > *:nth-child(2) {
        transform: none;
    }
}

/* ========================================
   VARIABLE & EXPRESSIVE TYPOGRAPHY
   ======================================== */

/* Font Loading and Optimization */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: local('Inter'), local('Inter-Regular'), local('system-ui'), local('-apple-system'), local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto'), local('Helvetica Neue'), local('Arial'), sans-serif;
    font-feature-settings: var(--font-feature-settings);
    font-optical-sizing: var(--font-optical-sizing);
}

@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: local('Lora'), local('Lora-Regular'), local('Georgia'), local('Times New Roman'), serif;
    font-feature-settings: var(--font-feature-settings);
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: local('Playfair Display'), local('PlayfairDisplay-Regular'), local('Georgia'), local('Times New Roman'), serif;
    font-feature-settings: var(--font-feature-settings);
}

/* Typography System Classes */
.font-ui {
    font-family: var(--font-family-ui);
    font-feature-settings: var(--font-feature-settings);
    font-optical-sizing: var(--font-optical-sizing);
}

.font-content {
    font-family: var(--font-family-content);
    font-feature-settings: var(--font-feature-settings);
    line-height: 1.7;
    letter-spacing: -0.01em;
}

.font-display {
    font-family: var(--font-family-display);
    font-feature-settings: var(--font-feature-settings);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.font-mono {
    font-family: var(--font-family-mono);
    font-feature-settings: 'kern' 1;
    font-variant-ligatures: none;
}

/* Dynamic Font Expressions */
.font-expressive {
    font-variation-settings: 'wght' var(--font-weight-medium, 500);
    transition: font-variation-settings 0.3s ease;
}

.font-expressive:hover {
    font-variation-settings: 'wght' var(--font-weight-bold, 700);
}

.font-expressive:active {
    font-variation-settings: 'wght' var(--font-weight-extrabold, 800);
}

/* Timer Number Dynamic Expression */
.timer-expressive {
    font-family: var(--font-family-ui);
    font-variation-settings: 'wght' 400;
    transition: font-variation-settings 0.5s ease;
    font-feature-settings: 'tnum' 1, 'kern' 1;
}

.timer-expressive.counting {
    font-variation-settings: 'wght' 600;
}

.timer-expressive.final-countdown {
    font-variation-settings: 'wght' 800;
    animation: pulse-expressive 1s ease-in-out infinite;
}

@keyframes pulse-expressive {
    0%, 100% { font-variation-settings: 'wght' 800; }
    50% { font-variation-settings: 'wght' 900; }
}

/* Heading Typography */
.heading-hero {
    font-family: var(--font-family-display);
    font-size: var(--font-7xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-feature-settings: var(--font-feature-settings);
}

.heading-page {
    font-family: var(--font-family-display);
    font-size: var(--font-5xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.heading-section {
    font-family: var(--font-family-display);
    font-size: var(--font-3xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.heading-subsection {
    font-family: var(--font-family-ui);
    font-size: var(--font-xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
}

/* Body Typography */
.body-hero {
    font-family: var(--font-family-content);
    font-size: var(--font-xl);
    font-weight: var(--font-weight-normal);
    line-height: 1.7;
    letter-spacing: -0.005em;
}

.body-content {
    font-family: var(--font-family-content);
    font-size: var(--font-base);
    font-weight: var(--font-weight-normal);
    line-height: 1.7;
    letter-spacing: -0.005em;
}

.body-caption {
    font-family: var(--font-family-ui);
    font-size: var(--font-small);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
    letter-spacing: 0.01em;
}

/* UI Typography */
.ui-button {
    font-family: var(--font-family-ui);
    font-size: var(--font-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    font-size: 0.875rem;
}

.ui-label {
    font-family: var(--font-family-ui);
    font-size: var(--font-small);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ui-caption {
    font-family: var(--font-family-ui);
    font-size: var(--font-tiny);
    font-weight: var(--font-weight-normal);
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: var(--text-muted);
}

/* Typography Responsive Scaling */
@media (max-width: 768px) {
    .heading-hero {
        font-size: var(--font-5xl);
        line-height: 1.1;
    }
    
    .heading-page {
        font-size: var(--font-3xl);
        line-height: 1.2;
    }
    
    .heading-section {
        font-size: var(--font-2xl);
        line-height: 1.3;
    }
    
    .body-hero {
        font-size: var(--font-large);
        line-height: 1.6;
    }
}

/* Typography Theme Integration */
.theme-aware .font-content {
    color: var(--color-text);
}

.theme-aware .heading-hero,
.theme-aware .heading-page,
.theme-aware .heading-section {
    color: var(--color-text);
}

.theme-aware .ui-caption {
    color: var(--color-text);
    opacity: 0.7;
}

/* Typography Animations */
.typography-fade-in {
    animation: fadeInUp 0.8s ease-out;
}

.typography-scale-in {
    animation: scaleIn 0.6s ease-out;
}

.typography-slide-in {
    animation: slideInLeft 0.7s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Typography Accessibility */
@media (prefers-reduced-motion: reduce) {
    .typography-fade-in,
    .typography-scale-in,
    .typography-slide-in {
        animation: none;
    }
    
    .font-expressive,
    .timer-expressive {
        transition: none;
    }
}

/* High Contrast Typography */
@media (prefers-contrast: high) {
    .font-content,
    .body-content {
        font-weight: var(--font-weight-medium);
    }
    
    .ui-caption {
        opacity: 1;
    }
}

/* ========================================
   ORGANIC ICONOGRAPHY SYSTEM
   ======================================== */

/* Organic Icon Base Styles */
.icon-organic {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Organic Icon Sizes */
.icon-organic-sm {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
}

.icon-organic-md {
    font-size: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
}

.icon-organic-lg {
    font-size: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
}

.icon-organic-xl {
    font-size: 2rem;
    width: 2rem;
    height: 2rem;
}

.icon-organic-2xl {
    font-size: 3rem;
    width: 3rem;
    height: 3rem;
}

/* Organic Icon Animations */
.icon-organic:hover {
    transform: scale(1.1) rotate(2deg);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

.icon-organic:active {
    transform: scale(0.95) rotate(-1deg);
}

/* Flowing Icon Animations */
.icon-flowing {
    animation: flow-gentle 3s ease-in-out infinite;
}

.icon-floating {
    animation: float-organic 4s ease-in-out infinite;
}

.icon-breathing {
    animation: breathe-icon 2s ease-in-out infinite;
}

@keyframes flow-gentle {
    0%, 100% { 
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
    25% { 
        transform: translateX(2px) rotate(1deg);
        opacity: 0.9;
    }
    50% { 
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
    75% { 
        transform: translateX(-2px) rotate(-1deg);
        opacity: 0.9;
    }
}

@keyframes float-organic {
    0%, 100% { 
        transform: translateY(0) rotate(0deg);
    }
    33% { 
        transform: translateY(-3px) rotate(1deg);
    }
    66% { 
        transform: translateY(0) rotate(-1deg);
    }
}

@keyframes breathe-icon {
    0%, 100% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.05);
        opacity: 0.8;
    }
}

/* Organic Icon States */
.icon-organic-active {
    color: var(--forest-deep);
    transform: scale(1.1);
    filter: drop-shadow(0 3px 6px rgba(26, 77, 58, 0.2));
}

.icon-organic-inactive {
    color: var(--charcoal-light);
    opacity: 0.6;
}

.icon-organic-success {
    color: var(--forest-green);
    animation: pulse-success 1s ease-in-out;
}

.icon-organic-warning {
    color: var(--gold-rich);
    animation: pulse-warning 1s ease-in-out;
}

.icon-organic-error {
    color: var(--sage-deep);
    animation: shake-gentle 0.5s ease-in-out;
}

@keyframes pulse-success {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

@keyframes pulse-warning {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(2deg); }
    50% { transform: scale(1.2) rotate(0deg); }
    75% { transform: scale(1.1) rotate(-2deg); }
}

@keyframes shake-gentle {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

/* Organic Icon Groups */
.icon-group-organic {
    display: flex;
    gap: var(--space-small);
    align-items: center;
}

.icon-group-organic .icon-organic {
    transition-delay: calc(var(--i) * 0.1s);
}

.icon-group-organic:hover .icon-organic {
    animation-delay: calc(var(--i) * 0.1s);
    animation: flow-gentle 2s ease-in-out infinite;
}

/* Theme-Aware Organic Icons */
.theme-aware .icon-organic-active {
    color: var(--color-primary);
}

.theme-aware .icon-organic-inactive {
    color: var(--color-text);
    opacity: 0.6;
}

.theme-aware .icon-organic-success {
    color: var(--color-primary);
}

/* Organic Icon Container */
.icon-container-organic {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-small);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.icon-container-organic:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.icon-container-organic .icon-organic {
    filter: none;
}

/* Organic Icon with Text */
.icon-text-organic {
    display: flex;
    align-items: center;
    gap: var(--space-small);
    font-family: var(--font-family-ui);
    font-weight: var(--font-weight-medium);
    color: var(--charcoal);
    transition: all 0.3s ease;
}

.icon-text-organic:hover {
    color: var(--forest-deep);
    transform: translateX(2px);
}

.icon-text-organic .icon-organic {
    transition: all 0.3s ease;
}

/* Organic Icon Navigation */
.nav-icon-organic {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    overflow: hidden;
}

.nav-icon-organic::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.nav-icon-organic:hover::before {
    transform: translateX(100%);
}

.nav-icon-organic:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nav-icon-organic .icon-organic {
    font-size: 1.5rem;
    filter: none;
}

/* Organic Icon Loading States */
.icon-organic-loading {
    animation: spin-organic 2s linear infinite;
}

@keyframes spin-organic {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.icon-organic-pulse {
    animation: pulse-organic 2s ease-in-out infinite;
}

@keyframes pulse-organic {
    0%, 100% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.1);
        opacity: 0.7;
    }
}

/* Responsive Organic Icons */
@media (max-width: 768px) {
    .icon-organic-2xl {
        font-size: 2.5rem;
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .nav-icon-organic {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .nav-icon-organic .icon-organic {
        font-size: 1.25rem;
    }
}

/* Accessibility for Organic Icons */
@media (prefers-reduced-motion: reduce) {
    .icon-organic,
    .icon-flowing,
    .icon-floating,
    .icon-breathing,
    .icon-organic-loading,
    .icon-organic-pulse {
        animation: none;
        transition: none;
    }
    
    .icon-organic:hover {
        transform: none;
    }
    
    .icon-container-organic:hover {
        transform: none;
    }
}

/* High Contrast Organic Icons */
@media (prefers-contrast: high) {
    .icon-organic {
        filter: none;
        text-shadow: 0 0 0 currentColor;
    }
    
    .icon-container-organic {
        background: rgba(0, 0, 0, 0.1);
        border: 2px solid currentColor;
    }
}

/* ========================================
   GESTURE-FIRST NAVIGATION SYSTEM
   ======================================== */

/* Gesture Indicator Animations */
@keyframes gesture-pulse {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

@keyframes gesture-swipe {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.1) rotate(5deg);
        opacity: 0.8;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 0;
    }
}

@keyframes gesture-circular {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    25% {
        transform: scale(1.2) rotate(90deg);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.3) rotate(180deg);
        opacity: 0.8;
    }
    75% {
        transform: scale(1.2) rotate(270deg);
        opacity: 0.9;
    }
    100% {
        transform: scale(1) rotate(360deg);
        opacity: 0;
    }
}

/* Gesture-Enabled Elements */
.gesture-container {
    touch-action: pan-x pan-y;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.swipeable {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.swipeable.swiping {
    transition: none;
}

.swipeable.swipe-left {
    transform: translateX(-100%);
}

.swipeable.swipe-right {
    transform: translateX(100%);
}

.swipeable.swipe-up {
    transform: translateY(-100%);
}

.swipeable.swipe-down {
    transform: translateY(100%);
}

/* Circular Gesture Elements */
.circular-gesture {
    position: relative;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.circular-gesture:hover {
    transform: scale(1.05);
}

.circular-gesture.rotating {
    animation: rotate-gentle 2s ease-in-out infinite;
}

@keyframes rotate-gentle {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(5deg);
    }
}

/* Long Press Targets */
.long-press-target {
    position: relative;
    transition: transform 0.2s ease;
}

.long-press-target.long-pressing {
    transform: scale(0.95);
    animation: long-press-pulse 0.8s ease-in-out;
}

@keyframes long-press-pulse {
    0%, 100% {
        transform: scale(0.95);
        opacity: 1;
    }
    50% {
        transform: scale(0.9);
        opacity: 0.8;
    }
}

/* Gesture Feedback Overlays */
.gesture-feedback {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(26, 77, 58, 0.9);
    color: white;
    padding: 1rem 2rem;
    border-radius: 1rem;
    font-family: var(--font-family-ui);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-base);
    z-index: 1000;
    pointer-events: none;
    animation: gesture-feedback-fade 2s ease-out;
}

@keyframes gesture-feedback-fade {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    80% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}

/* Swipe Navigation Indicators */
.swipe-indicator {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 100;
    pointer-events: none;
}

.swipe-indicator-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgba(26, 77, 58, 0.3);
    transition: all 0.3s ease;
}

.swipe-indicator-dot.active {
    background: var(--forest-deep);
    transform: scale(1.2);
}

/* Gesture Hints */
.gesture-hint {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(26, 77, 58, 0.2);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-family: var(--font-family-ui);
    font-size: var(--font-small);
    color: var(--charcoal);
    z-index: 100;
    animation: gesture-hint-fade 3s ease-out;
}

@keyframes gesture-hint-fade {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    20% {
        opacity: 1;
        transform: translateY(0);
    }
    80% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Responsive Gesture Adjustments */
@media (max-width: 768px) {
    .gesture-container {
        touch-action: manipulation;
    }
    
    .swipeable {
        transition-duration: 0.2s;
    }
    
    .gesture-feedback {
        font-size: var(--font-small);
        padding: 0.75rem 1.5rem;
    }
    
    .swipe-indicator {
        bottom: 1rem;
    }
    
    .gesture-hint {
        top: 0.5rem;
        right: 0.5rem;
        font-size: var(--font-tiny);
        padding: 0.25rem 0.5rem;
    }
}

/* Accessibility for Gestures */
@media (prefers-reduced-motion: reduce) {
    .swipeable,
    .circular-gesture,
    .long-press-target {
        transition: none;
    }
    
    .circular-gesture.rotating {
        animation: none;
    }
    
    .long-press-target.long-pressing {
        animation: none;
    }
    
    .gesture-feedback,
    .gesture-hint {
        animation: none;
    }
}

/* High Contrast Gesture Indicators */
@media (prefers-contrast: high) {
    .gesture-feedback {
        background: rgba(0, 0, 0, 0.9);
        color: white;
        border: 2px solid white;
    }
    
    .gesture-hint {
        background: rgba(0, 0, 0, 0.9);
        color: white;
        border: 2px solid white;
    }
    
    .swipe-indicator-dot {
        background: rgba(0, 0, 0, 0.5);
        border: 1px solid white;
    }
    
    .swipe-indicator-dot.active {
        background: white;
    }
}

/* ========================================
   PHYSICS-BASED SPRING ANIMATIONS
   ======================================== */

/* Spring Animation Keyframes */
@keyframes spin-spring {
    0% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(90deg) scale(1.1);
    }
    50% {
        transform: rotate(180deg) scale(1);
    }
    75% {
        transform: rotate(270deg) scale(1.1);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes spring-bounce {
    0% {
        transform: scale(0.8) translateY(0);
    }
    20% {
        transform: scale(1.1) translateY(-10px);
    }
    40% {
        transform: scale(0.95) translateY(5px);
    }
    60% {
        transform: scale(1.05) translateY(-3px);
    }
    80% {
        transform: scale(0.98) translateY(2px);
    }
    100% {
        transform: scale(1) translateY(0);
    }
}

@keyframes spring-overshoot {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.15) rotate(2deg);
    }
    70% {
        transform: scale(0.95) rotate(-1deg);
    }
    85% {
        transform: scale(1.05) rotate(0.5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

@keyframes spring-settle {
    0% {
        transform: translateY(0) scale(1);
    }
    30% {
        transform: translateY(-8px) scale(1.02);
    }
    60% {
        transform: translateY(4px) scale(0.98);
    }
    80% {
        transform: translateY(-2px) scale(1.01);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes spring-wobble {
    0% {
        transform: rotate(0deg) scale(1);
    }
    15% {
        transform: rotate(5deg) scale(1.05);
    }
    30% {
        transform: rotate(-3deg) scale(0.98);
    }
    45% {
        transform: rotate(2deg) scale(1.02);
    }
    60% {
        transform: rotate(-1deg) scale(0.99);
    }
    75% {
        transform: rotate(0.5deg) scale(1.01);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}

/* Physics-Based Element Classes */
.spring-gentle {
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.spring-medium {
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.spring-strong {
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.spring-bouncy {
    transition: transform 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.spring-wobbly {
    transition: transform 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Physics Hover Effects */
.physics-hover:hover {
    transform: translateY(-4px) scale(1.02);
}

.physics-hover:active {
    transform: translateY(2px) scale(0.98);
}

/* Physics Magnetic Effects */
.physics-magnetic {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.physics-magnetic:hover {
    transform: translateY(-2px) scale(1.05);
}

/* Physics Button Interactions */
.physics-button {
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.physics-button:active {
    transform: scale(0.95);
}

.physics-button:hover {
    transform: scale(1.05);
}

/* Physics Card Interactions */
.physics-card {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.physics-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Physics Navigation Items */
.physics-nav {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.physics-nav:hover {
    transform: translateX(4px) scale(1.05);
}

/* Physics Loading States */
.physics-loading {
    animation: spin-spring 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

.physics-pulse {
    animation: spring-pulse 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

@keyframes spring-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* Physics Page Transitions */
.physics-page-transition {
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.physics-page-transition.slide-left {
    transform: translateX(-100%);
}

.physics-page-transition.slide-right {
    transform: translateX(100%);
}

.physics-page-transition.slide-up {
    transform: translateY(-100%);
}

.physics-page-transition.slide-down {
    transform: translateY(100%);
}

/* Physics Notification Animations */
.physics-notification {
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.physics-notification.slide-in {
    animation: spring-slide-in 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.physics-notification.bounce-in {
    animation: spring-bounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes spring-slide-in {
    0% {
        transform: translateX(100%) scale(0.8);
        opacity: 0;
    }
    50% {
        transform: translateX(-10px) scale(1.05);
        opacity: 0.8;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

/* Physics Progress Bars */
.physics-progress {
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.physics-progress-fill {
    transition: width 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Physics Form Elements */
.physics-input {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.physics-input:focus {
    transform: scale(1.02);
}

.physics-input:invalid {
    animation: spring-wobble 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Physics Modal Animations */
.physics-modal {
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.physics-modal.show {
    animation: spring-scale-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes spring-scale-in {
    0% {
        transform: scale(0.8) translateY(20px);
        opacity: 0;
    }
    50% {
        transform: scale(1.05) translateY(-5px);
        opacity: 0.8;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* Physics Tooltip Animations */
.physics-tooltip {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.physics-tooltip.show {
    animation: spring-bounce 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Physics Parallax Elements */
.physics-parallax {
    transition: transform 0.1s ease-out;
}

/* Physics Intersection Animations */
.physics-intersection {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.physics-intersection.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Physics Adjustments */
@media (max-width: 768px) {
    .physics-hover:hover {
        transform: translateY(-2px) scale(1.01);
    }
    
    .physics-card:hover {
        transform: translateY(-4px) scale(1.01);
    }
    
    .physics-nav:hover {
        transform: translateX(2px) scale(1.02);
    }
    
    .spring-gentle,
    .spring-medium,
    .spring-strong,
    .spring-bouncy,
    .spring-wobbly {
        transition-duration: 0.4s;
    }
}

/* Accessibility for Physics Animations */
@media (prefers-reduced-motion: reduce) {
    .spring-gentle,
    .spring-medium,
    .spring-strong,
    .spring-bouncy,
    .spring-wobbly,
    .physics-hover,
    .physics-magnetic,
    .physics-button,
    .physics-card,
    .physics-nav,
    .physics-loading,
    .physics-pulse,
    .physics-page-transition,
    .physics-notification,
    .physics-progress,
    .physics-progress-fill,
    .physics-input,
    .physics-modal,
    .physics-tooltip,
    .physics-parallax,
    .physics-intersection {
        transition: none;
        animation: none;
    }
    
    .physics-hover:hover,
    .physics-magnetic:hover,
    .physics-button:hover,
    .physics-card:hover,
    .physics-nav:hover {
        transform: none;
    }
}

/* High Contrast Physics Elements */
@media (prefers-contrast: high) {
    .physics-card:hover {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        border: 2px solid currentColor;
    }
    
    .physics-button:hover {
        border: 2px solid currentColor;
    }
    
    .physics-nav:hover {
        border: 1px solid currentColor;
    }
}

/* ========================================
   HAPTIC STORYTELLING & AMBIENT FEEDBACK
   ======================================== */

/* Ambient Feedback Container */
.ambient-feedback {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Breathing Pattern Animation */
.ambient-breathing {
    animation: ambient-breathe 4s ease-in-out infinite;
}

@keyframes ambient-breathe {
    0%, 100% {
        opacity: 0.05;
        transform: scale(1);
    }
    50% {
        opacity: 0.1;
        transform: scale(1.02);
    }
}

/* Writing Rhythm Animation */
.ambient-writing {
    animation: ambient-write 2s ease-in-out infinite;
}

@keyframes ambient-write {
    0%, 100% {
        opacity: 0.03;
        transform: translateX(0);
    }
    50% {
        opacity: 0.06;
        transform: translateX(2px);
    }
}

/* Energy Pattern Animation */
.ambient-energy {
    animation: ambient-energize 1.5s ease-in-out infinite;
}

@keyframes ambient-energize {
    0%, 100% {
        opacity: 0.08;
        transform: scale(1);
    }
    50% {
        opacity: 0.15;
        transform: scale(1.05);
    }
}

/* Focus Pattern Animation */
.ambient-focus {
    animation: ambient-focus 1s ease-in-out infinite;
}

@keyframes ambient-focus {
    0%, 100% {
        opacity: 0.04;
        transform: rotate(0deg);
    }
    50% {
        opacity: 0.08;
        transform: rotate(180deg);
    }
}

/* Haptic Feedback Visual Indicators */
.haptic-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(26, 77, 58, 0.1);
    pointer-events: none;
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.haptic-indicator.active {
    opacity: 1;
    animation: haptic-pulse 0.5s ease-out;
}

@keyframes haptic-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

/* Haptic Intensity Indicators */
.haptic-intensity-gentle {
    background: rgba(26, 77, 58, 0.05);
    border: 1px solid rgba(26, 77, 58, 0.1);
}

.haptic-intensity-medium {
    background: rgba(26, 77, 58, 0.1);
    border: 1px solid rgba(26, 77, 58, 0.2);
}

.haptic-intensity-strong {
    background: rgba(26, 77, 58, 0.15);
    border: 1px solid rgba(26, 77, 58, 0.3);
}

/* Activity-Specific Ambient Effects */
.meditation-ambient {
    background: radial-gradient(circle, rgba(26, 77, 58, 0.08) 0%, transparent 70%);
    animation: meditation-flow 6s ease-in-out infinite;
}

@keyframes meditation-flow {
    0%, 100% {
        opacity: 0.05;
        transform: scale(1);
    }
    50% {
        opacity: 0.1;
        transform: scale(1.03);
    }
}

.journal-ambient {
    background: linear-gradient(45deg, rgba(26, 77, 58, 0.06) 0%, transparent 50%);
    animation: journal-rhythm 3s ease-in-out infinite;
}

@keyframes journal-rhythm {
    0%, 100% {
        opacity: 0.04;
        transform: translateX(0);
    }
    50% {
        opacity: 0.08;
        transform: translateX(1px);
    }
}

.workout-ambient {
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    animation: workout-energy 2s ease-in-out infinite;
}

@keyframes workout-energy {
    0%, 100% {
        opacity: 0.08;
        transform: scale(1);
    }
    50% {
        opacity: 0.15;
        transform: scale(1.04);
    }
}

.clarity-ambient {
    background: conic-gradient(from 0deg, rgba(26, 77, 58, 0.06) 0%, transparent 50%);
    animation: clarity-focus 2.5s ease-in-out infinite;
}

@keyframes clarity-focus {
    0%, 100% {
        opacity: 0.05;
        transform: rotate(0deg);
    }
    50% {
        opacity: 0.1;
        transform: rotate(180deg);
    }
}

/* Haptic Feedback States */
.haptic-success {
    background: rgba(26, 77, 58, 0.2);
    animation: haptic-success 0.8s ease-out;
}

@keyframes haptic-success {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

.haptic-error {
    background: rgba(139, 69, 19, 0.2);
    animation: haptic-error 0.6s ease-out;
}

@keyframes haptic-error {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    25% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.8;
    }
    75% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

.haptic-warning {
    background: rgba(212, 175, 55, 0.2);
    animation: haptic-warning 0.7s ease-out;
}

@keyframes haptic-warning {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

/* Haptic Feedback Controls */
.haptic-controls {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 100;
}

.haptic-control-button {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(26, 77, 58, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.haptic-control-button:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

.haptic-control-button.active {
    background: rgba(26, 77, 58, 0.1);
    border-color: rgba(26, 77, 58, 0.3);
}

/* Haptic Intensity Selector */
.haptic-intensity-selector {
    position: fixed;
    bottom: 6rem;
    right: 2rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(26, 77, 58, 0.2);
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 100;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.haptic-intensity-selector.show {
    opacity: 1;
    transform: translateY(0);
}

.haptic-intensity-option {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: 500;
}

.haptic-intensity-option:hover {
    background: rgba(26, 77, 58, 0.1);
}

.haptic-intensity-option.active {
    background: rgba(26, 77, 58, 0.2);
    color: var(--forest-deep);
}

/* Responsive Haptic Adjustments */
@media (max-width: 768px) {
    .haptic-indicator {
        width: 40px;
        height: 40px;
    }
    
    .haptic-controls {
        bottom: 1rem;
        right: 1rem;
    }
    
    .haptic-control-button {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }
    
    .haptic-intensity-selector {
        bottom: 5rem;
        right: 1rem;
        padding: 0.75rem;
    }
    
    .haptic-intensity-option {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* Accessibility for Haptic Feedback */
@media (prefers-reduced-motion: reduce) {
    .ambient-feedback,
    .ambient-breathing,
    .ambient-writing,
    .ambient-energy,
    .ambient-focus,
    .meditation-ambient,
    .journal-ambient,
    .workout-ambient,
    .clarity-ambient,
    .haptic-indicator,
    .haptic-success,
    .haptic-error,
    .haptic-warning {
        animation: none;
        transition: none;
    }
    
    .haptic-control-button:hover {
        transform: none;
    }
}

/* High Contrast Haptic Indicators */
@media (prefers-contrast: high) {
    .ambient-feedback {
        background: rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .haptic-indicator {
        background: rgba(0, 0, 0, 0.2);
        border: 2px solid white;
    }
    
    .haptic-control-button {
        background: rgba(0, 0, 0, 0.9);
        color: white;
        border: 2px solid white;
    }
    
    .haptic-intensity-selector {
        background: rgba(0, 0, 0, 0.9);
        color: white;
        border: 2px solid white;
    }
}

/* ========================================
   CONTEXTUAL ACTIONS & ADAPTIVE INTELLIGENCE
   ======================================== */

/* Floating Actions Container */
.floating-actions-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    pointer-events: none;
}

/* Main Floating Action Button */
.floating-action-button {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--forest-deep) 0%, var(--sage-deep) 100%);
    box-shadow: 0 8px 32px rgba(26, 77, 58, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 1.5rem;
    color: white;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.floating-action-button:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 40px rgba(26, 77, 58, 0.4);
}

.floating-action-button:active {
    transform: scale(0.95) rotate(0deg);
    box-shadow: 0 4px 16px rgba(26, 77, 58, 0.3);
}

/* Contextual Actions */
.contextual-action {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(26, 77, 58, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 1.2rem;
    color: var(--forest-deep);
    user-select: none;
    opacity: 0;
    transform: translateY(20px);
}

.contextual-action:hover {
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 8px 24px rgba(26, 77, 58, 0.2);
    background: rgba(255, 255, 255, 1);
}

.contextual-action:active {
    transform: translateY(0) scale(0.95);
    box-shadow: 0 4px 12px rgba(26, 77, 58, 0.15);
}

/* Smart Suggestions Panel */
.smart-suggestions-panel {
    position: fixed;
    bottom: 8rem;
    right: 2rem;
    width: 20rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(26, 77, 58, 0.2);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 20px 40px rgba(26, 77, 58, 0.15);
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

.smart-suggestions-panel.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.smart-suggestions-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(26, 77, 58, 0.1);
}

.smart-suggestions-title {
    font-family: var(--font-family-ui);
    font-size: var(--font-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--forest-deep);
    margin: 0;
}

.smart-suggestions-icon {
    font-size: 1.25rem;
}

.smart-suggestion-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
}

.smart-suggestion-item:hover {
    background: rgba(26, 77, 58, 0.05);
    transform: translateX(4px);
}

.smart-suggestion-icon {
    font-size: 1.25rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(26, 77, 58, 0.1);
}

.smart-suggestion-content {
    flex: 1;
}

.smart-suggestion-title {
    font-family: var(--font-family-ui);
    font-size: var(--font-base);
    font-weight: var(--font-weight-medium);
    color: var(--forest-deep);
    margin: 0 0 0.25rem 0;
}

.smart-suggestion-description {
    font-family: var(--font-family-ui);
    font-size: var(--font-sm);
    color: var(--charcoal-light);
    margin: 0;
    line-height: 1.4;
}

/* Adaptive UI Elements */
.adaptive-element {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.adaptive-element.context-aware {
    background: rgba(26, 77, 58, 0.05);
    border: 1px solid rgba(26, 77, 58, 0.1);
}

.adaptive-element.mood-aware {
    background: rgba(212, 175, 55, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.1);
}

.adaptive-element.time-aware {
    background: rgba(122, 155, 122, 0.05);
    border: 1px solid rgba(122, 155, 122, 0.1);
}

/* Intelligent Empty States */
.intelligent-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 1rem;
    border: 2px dashed rgba(26, 77, 58, 0.2);
}

.intelligent-empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.6;
}

.intelligent-empty-state-title {
    font-family: var(--font-family-display);
    font-size: var(--font-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--forest-deep);
    margin: 0 0 0.5rem 0;
}

.intelligent-empty-state-description {
    font-family: var(--font-family-content);
    font-size: var(--font-base);
    color: var(--charcoal-light);
    margin: 0 0 1.5rem 0;
    line-height: 1.6;
}

.intelligent-empty-state-action {
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--forest-deep) 0%, var(--sage-deep) 100%);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-family: var(--font-family-ui);
    font-size: var(--font-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.3s ease;
}

.intelligent-empty-state-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(26, 77, 58, 0.3);
}

/* Contextual Tooltips */
.contextual-tooltip {
    position: absolute;
    background: rgba(26, 77, 58, 0.95);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-family: var(--font-family-ui);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-medium);
    z-index: 1001;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.2s ease;
    pointer-events: none;
    white-space: nowrap;
}

.contextual-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

.contextual-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(26, 77, 58, 0.95);
}

/* Adaptive Loading States */
.adaptive-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 1rem;
}

.adaptive-loading-spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid rgba(26, 77, 58, 0.2);
    border-top: 2px solid var(--forest-deep);
    border-radius: 50%;
    animation: adaptive-spin 1s linear infinite;
}

@keyframes adaptive-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.adaptive-loading-text {
    font-family: var(--font-family-ui);
    font-size: var(--font-sm);
    color: var(--charcoal-light);
    text-align: center;
}

/* Responsive Contextual Actions */
@media (max-width: 768px) {
    .floating-actions-container {
        bottom: 1rem;
        right: 1rem;
        gap: 0.75rem;
    }
    
    .floating-action-button {
        width: 3.5rem;
        height: 3.5rem;
        font-size: 1.25rem;
    }
    
    .contextual-action {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }
    
    .smart-suggestions-panel {
        bottom: 6rem;
        right: 1rem;
        left: 1rem;
        width: auto;
        padding: 1rem;
    }
    
    .smart-suggestion-item {
        padding: 0.5rem;
    }
    
    .smart-suggestion-icon {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 1rem;
    }
}

/* Accessibility for Contextual Actions */
@media (prefers-reduced-motion: reduce) {
    .floating-action-button,
    .contextual-action,
    .smart-suggestions-panel,
    .smart-suggestion-item,
    .intelligent-empty-state-action,
    .contextual-tooltip,
    .adaptive-loading-spinner {
        transition: none;
        animation: none;
    }
    
    .floating-action-button:hover,
    .contextual-action:hover,
    .smart-suggestion-item:hover,
    .intelligent-empty-state-action:hover {
        transform: none;
    }
}

/* High Contrast Contextual Actions */
@media (prefers-contrast: high) {
    .floating-action-button {
        background: var(--forest-deep);
        border: 2px solid white;
    }
    
    .contextual-action {
        background: white;
        border: 2px solid var(--forest-deep);
        color: var(--forest-deep);
    }
    
    .smart-suggestions-panel {
        background: white;
        border: 2px solid var(--forest-deep);
        color: var(--forest-deep);
    }
    
    .intelligent-empty-state {
        background: white;
        border: 2px solid var(--forest-deep);
        color: var(--forest-deep);
    }
    
    .contextual-tooltip {
        background: var(--forest-deep);
        border: 1px solid white;
        color: white;
    }
}

/* ========================================
   WELCOME SCREEN - THE TRUST COVENANT
   ======================================== */

/* Welcome Screen Container */
.welcome-screen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 2rem 1.5rem;
    position: relative;
    overflow: hidden;
}

/* Privacy-First Header */
.welcome-header {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.privacy-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(26, 77, 58, 0.1);
    padding: 0.75rem 1.5rem;
    border-radius: 2rem;
    border: 1px solid rgba(26, 77, 58, 0.2);
    backdrop-filter: blur(10px);
}

.privacy-icon {
    color: var(--forest-deep);
    flex-shrink: 0;
}

.privacy-text {
    font-family: var(--font-family-ui);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-medium);
    color: var(--forest-deep);
}

/* Welcome Content */
.welcome-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.welcome-logo {
    margin-bottom: 2rem;
    animation: welcomeLogoFloat 3s ease-in-out infinite;
}

.welcome-logo-icon {
    filter: drop-shadow(0 8px 24px rgba(26, 77, 58, 0.2));
}

@keyframes welcomeLogoFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

.welcome-title {
    font-family: var(--font-family-display);
    font-size: clamp(2rem, 8vw, 3.5rem);
    font-weight: var(--font-weight-bold);
    color: var(--forest-deep);
    margin: 0 0 2rem 0;
    line-height: 1.1;
    text-align: center;
}

/* Trust Covenant */
.trust-covenant {
    margin-bottom: 3rem;
    max-width: 500px;
}

.trust-message {
    font-family: var(--font-family-content);
    font-size: var(--font-lg);
    font-weight: var(--font-weight-medium);
    color: var(--charcoal-light);
    margin: 0 0 1rem 0;
    line-height: 1.6;
}

/* Privacy Features */
.privacy-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 3rem;
    width: 100%;
    max-width: 400px;
}

.privacy-feature {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(26, 77, 58, 0.1);
    border-radius: 1rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.privacy-feature:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(26, 77, 58, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(26, 77, 58, 0.1);
}

.feature-icon {
    color: var(--forest-deep);
    flex-shrink: 0;
}

.privacy-feature span {
    font-family: var(--font-family-ui);
    font-size: var(--font-base);
    font-weight: var(--font-weight-medium);
    color: var(--forest-deep);
}

/* Welcome Breath Section */
.welcome-breath-section {
    margin-bottom: 3rem;
    text-align: center;
}

.breath-intro {
    margin-bottom: 2rem;
}

.breath-title {
    font-family: var(--font-family-display);
    font-size: var(--font-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--forest-deep);
    margin: 0 0 0.5rem 0;
}

.breath-subtitle {
    font-family: var(--font-family-content);
    font-size: var(--font-base);
    color: var(--charcoal-light);
    margin: 0;
}

/* Breath Circle */
.breath-circle-container {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.breath-circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(26, 77, 58, 0.1) 0%, rgba(122, 155, 122, 0.1) 100%);
    border: 3px solid rgba(26, 77, 58, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
}

.breath-circle-inner {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--forest-deep) 0%, var(--sage-deep) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.breath-circle.breathing {
    animation: breathPulse 4s ease-in-out infinite;
}

.breath-circle.breathing .breath-circle-inner {
    animation: breathInner 4s ease-in-out infinite;
}

@keyframes breathPulse {
    0%, 100% { 
        transform: scale(1);
        border-color: rgba(26, 77, 58, 0.2);
    }
    50% { 
        transform: scale(1.1);
        border-color: rgba(26, 77, 58, 0.4);
    }
}

@keyframes breathInner {
    0%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(0.9);
    }
}

.breath-text {
    font-family: var(--font-family-ui);
    font-size: var(--font-lg);
    font-weight: var(--font-weight-semibold);
    color: white;
    text-align: center;
}

/* Breath Controls */
.breath-controls {
    margin-bottom: 2rem;
}

.breath-start-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--forest-deep) 0%, var(--sage-deep) 100%);
    color: white;
    border: none;
    border-radius: 2rem;
    font-family: var(--font-family-ui);
    font-size: var(--font-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(26, 77, 58, 0.3);
}

.breath-start-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(26, 77, 58, 0.4);
}

.breath-start-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 16px rgba(26, 77, 58, 0.3);
}

.breath-start-btn.breathing {
    background: linear-gradient(135deg, var(--sage-deep) 0%, var(--forest-deep) 100%);
}

/* Welcome Actions */
.welcome-actions {
    margin-bottom: 2rem;
}

.begin-flow-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 2.5rem;
    background: linear-gradient(135deg, var(--forest-deep) 0%, var(--sage-deep) 100%);
    color: white;
    border: none;
    border-radius: 2rem;
    font-family: var(--font-family-ui);
    font-size: var(--font-lg);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 12px 32px rgba(26, 77, 58, 0.3);
    min-height: 56px;
}

.begin-flow-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(26, 77, 58, 0.4);
}

.begin-flow-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(26, 77, 58, 0.3);
}

.btn-icon {
    transition: transform 0.3s ease;
}

.begin-flow-btn:hover .btn-icon {
    transform: translateX(4px);
}

/* Welcome Footer */
.welcome-footer {
    text-align: center;
    margin-top: auto;
}

.trust-footer-text {
    font-family: var(--font-family-ui);
    font-size: var(--font-sm);
    color: var(--charcoal-light);
    margin: 0;
    opacity: 0.8;
}

/* Mobile Optimizations for Welcome Screen */
@media screen and (max-width: 768px) {
    .welcome-screen {
        padding: 1.5rem 1rem;
    }
    
    .welcome-title {
        font-size: clamp(1.75rem, 10vw, 2.5rem);
        margin-bottom: 1.5rem;
    }
    
    .trust-message {
        font-size: var(--font-base);
        margin-bottom: 0.75rem;
    }
    
    .privacy-features {
        margin-bottom: 2rem;
    }
    
    .privacy-feature {
        padding: 0.875rem 1.25rem;
    }
    
    .breath-circle {
        width: 160px;
        height: 160px;
    }
    
    .breath-circle-inner {
        width: 100px;
        height: 100px;
    }
    
    .breath-text {
        font-size: var(--font-base);
    }
    
    .breath-start-btn {
        padding: 0.875rem 1.75rem;
        font-size: var(--font-base);
    }
    
    .begin-flow-btn {
        padding: 1rem 2rem;
        font-size: var(--font-base);
        min-height: 52px;
    }
}

/* iPhone-specific Welcome Screen Optimizations */
@media screen and (max-width: 428px) {
    .welcome-screen {
        padding: 1rem 0.75rem;
    }
    
    .privacy-badge {
        padding: 0.5rem 1rem;
    }
    
    .privacy-text {
        font-size: var(--font-xs);
    }
    
    .welcome-title {
        font-size: clamp(1.5rem, 12vw, 2rem);
        margin-bottom: 1rem;
    }
    
    .trust-message {
        font-size: var(--font-sm);
    }
    
    .privacy-feature {
        padding: 0.75rem 1rem;
    }
    
    .breath-circle {
        width: 140px;
        height: 140px;
    }
    
    .breath-circle-inner {
        width: 80px;
        height: 80px;
    }
    
    .breath-text {
        font-size: var(--font-sm);
    }
}

/* ========================================
   SEAMLESS FLOW ENGINE - THE INVISIBLE HAND
   ======================================== */

/* Flow Overlay */
.flow-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 249, 250, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem;
}

.flow-overlay-content {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 20px 60px rgba(26, 77, 58, 0.15);
    max-width: 500px;
    width: 100%;
    border: 1px solid rgba(26, 77, 58, 0.1);
}

/* Flow Progress */
.flow-progress {
    margin-bottom: 2rem;
}

.flow-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(26, 77, 58, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.flow-progress-fill {
    height: 100%;
    background: linear-gradient(135deg, var(--forest-deep) 0%, var(--sage-deep) 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
    width: 0%;
}

.flow-progress-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flow-current-activity {
    font-family: var(--font-family-ui);
    font-size: var(--font-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--forest-deep);
}

.flow-progress-counter {
    font-family: var(--font-family-ui);
    font-size: var(--font-sm);
    color: var(--charcoal-light);
    background: rgba(26, 77, 58, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
}

/* Flow Controls */
.flow-controls {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.flow-control-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: 1rem;
    font-family: var(--font-family-ui);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
}

.flow-pause-btn {
    background: linear-gradient(135deg, var(--forest-deep) 0%, var(--sage-deep) 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(26, 77, 58, 0.3);
}

.flow-pause-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(26, 77, 58, 0.4);
}

.flow-skip-btn {
    background: rgba(26, 77, 58, 0.1);
    color: var(--forest-deep);
    border: 1px solid rgba(26, 77, 58, 0.2);
}

.flow-skip-btn:hover {
    background: rgba(26, 77, 58, 0.15);
    transform: translateY(-1px);
}

.flow-stop-btn {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.2);
}

.flow-stop-btn:hover {
    background: rgba(220, 38, 38, 0.15);
    transform: translateY(-1px);
}

/* Selah Overlay */
.selah-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 249, 250, 0.95);
    backdrop-filter: blur(15px);
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.selah-content {
    background: white;
    border-radius: 2rem;
    padding: 3rem;
    text-align: center;
    box-shadow: 0 25px 80px rgba(26, 77, 58, 0.2);
    max-width: 400px;
    width: 100%;
    border: 1px solid rgba(26, 77, 58, 0.1);
}

.selah-icon {
    margin-bottom: 1.5rem;
    animation: selahFloat 3s ease-in-out infinite;
}

@keyframes selahFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

.selah-title {
    font-family: var(--font-family-display);
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--forest-deep);
    margin: 0 0 0.5rem 0;
}

.selah-subtitle {
    font-family: var(--font-family-content);
    font-size: var(--font-base);
    color: var(--charcoal-light);
    margin: 0 0 2rem 0;
}

/* Selah Timer */
.selah-timer {
    margin-bottom: 2rem;
}

.selah-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(26, 77, 58, 0.1) 0%, rgba(122, 155, 122, 0.1) 100%);
    border: 3px solid rgba(26, 77, 58, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto;
}

.selah-circle-fill {
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--forest-deep);
    border-right-color: var(--sage-deep);
    transition: stroke-dashoffset 1s ease;
    stroke-dasharray: 100%;
    stroke-dashoffset: 100%;
}

.selah-timer-text {
    font-family: var(--font-family-ui);
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--forest-deep);
    z-index: 1;
}

/* Selah Actions */
.selah-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.selah-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border: none;
    border-radius: 1.5rem;
    font-family: var(--font-family-ui);
    font-size: var(--font-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 48px;
}

.selah-continue-btn {
    background: linear-gradient(135deg, var(--forest-deep) 0%, var(--sage-deep) 100%);
    color: white;
    box-shadow: 0 8px 24px rgba(26, 77, 58, 0.3);
}

.selah-continue-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(26, 77, 58, 0.4);
}

.selah-linger-btn {
    background: rgba(26, 77, 58, 0.1);
    color: var(--forest-deep);
    border: 1px solid rgba(26, 77, 58, 0.2);
}

.selah-linger-btn:hover {
    background: rgba(26, 77, 58, 0.15);
    transform: translateY(-1px);
}

/* Linger Overlay */
.linger-overlay {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 12px 32px rgba(26, 77, 58, 0.15);
    z-index: 1200;
    display: none;
    border: 1px solid rgba(26, 77, 58, 0.1);
    max-width: 300px;
}

.linger-content {
    text-align: center;
}

.linger-icon {
    margin-bottom: 1rem;
    color: var(--forest-deep);
}

.linger-text {
    font-family: var(--font-family-ui);
    font-size: var(--font-sm);
    color: var(--charcoal-light);
    margin: 0 0 1rem 0;
}

.linger-actions {
    display: flex;
    justify-content: center;
}

.linger-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--forest-deep) 0%, var(--sage-deep) 100%);
    color: white;
    border: none;
    border-radius: 1rem;
    font-family: var(--font-family-ui);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
}

.linger-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(26, 77, 58, 0.3);
}

/* Flow Completion Overlay */
.flow-completion-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 249, 250, 0.95);
    backdrop-filter: blur(15px);
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.flow-completion-content {
    background: white;
    border-radius: 2rem;
    padding: 3rem;
    text-align: center;
    box-shadow: 0 25px 80px rgba(26, 77, 58, 0.2);
    max-width: 400px;
    width: 100%;
    border: 1px solid rgba(26, 77, 58, 0.1);
    animation: completionSlideIn 0.6s ease;
}

@keyframes completionSlideIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.completion-icon {
    margin-bottom: 1.5rem;
    animation: completionPulse 2s ease-in-out infinite;
}

@keyframes completionPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.completion-title {
    font-family: var(--font-family-display);
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--forest-deep);
    margin: 0 0 0.5rem 0;
}

.completion-subtitle {
    font-family: var(--font-family-content);
    font-size: var(--font-base);
    color: var(--charcoal-light);
    margin: 0 0 2rem 0;
}

.completion-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

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

.stat-number {
    display: block;
    font-family: var(--font-family-display);
    font-size: var(--font-xl);
    font-weight: var(--font-weight-bold);
    color: var(--forest-deep);
}

.stat-label {
    font-family: var(--font-family-ui);
    font-size: var(--font-sm);
    color: var(--charcoal-light);
}

.completion-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--forest-deep) 0%, var(--sage-deep) 100%);
    color: white;
    border: none;
    border-radius: 1.5rem;
    font-family: var(--font-family-ui);
    font-size: var(--font-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 48px;
}

.completion-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(26, 77, 58, 0.4);
}

/* Mobile Optimizations for Seamless Flow */
@media screen and (max-width: 768px) {
    .flow-overlay {
        padding: 1rem;
    }
    
    .flow-overlay-content {
        padding: 1.5rem;
        border-radius: 1rem;
    }
    
    .flow-controls {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .flow-control-btn {
        padding: 0.75rem 1.25rem;
        font-size: var(--font-sm);
    }
    
    .selah-overlay {
        padding: 1rem;
    }
    
    .selah-content {
        padding: 2rem;
        border-radius: 1.5rem;
    }
    
    .selah-circle {
        width: 100px;
        height: 100px;
    }
    
    .selah-timer-text {
        font-size: var(--font-xl);
    }
    
    .selah-action-btn {
        padding: 0.875rem 1.75rem;
        font-size: var(--font-sm);
    }
    
    .linger-overlay {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
        max-width: none;
    }
    
    .flow-completion-content {
        padding: 2rem;
        border-radius: 1.5rem;
    }
    
    .completion-stats {
        gap: 1.5rem;
    }
}

/* iPhone-specific Seamless Flow Optimizations */
@media screen and (max-width: 428px) {
    .flow-overlay-content {
        padding: 1rem;
    }
    
    .flow-current-activity {
        font-size: var(--font-base);
    }
    
    .flow-progress-counter {
        font-size: var(--font-xs);
        padding: 0.2rem 0.6rem;
    }
    
    .selah-content {
        padding: 1.5rem;
    }
    
    .selah-title {
        font-size: var(--font-xl);
    }
    
    .selah-circle {
        width: 80px;
        height: 80px;
    }
    
    .selah-timer-text {
        font-size: var(--font-lg);
    }
    
    .selah-action-btn {
        padding: 0.75rem 1.5rem;
        font-size: var(--font-sm);
    }
    
    .linger-overlay {
        padding: 1rem;
    }
    
    .flow-completion-content {
        padding: 1.5rem;
    }
    
    .completion-title {
        font-size: var(--font-xl);
    }
    
    .completion-stats {
        gap: 1rem;
    }
    
    .stat-number {
        font-size: var(--font-lg);
    }
}

/* ========================================
   PRODIGAL CHILD WELCOME - THE OPEN ARMS
   ======================================== */

/* Prodigal Welcome Overlay */
.prodigal-welcome-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 249, 250, 0.95);
    backdrop-filter: blur(15px);
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.4s ease;
}

.prodigal-welcome-overlay.show {
    opacity: 1;
    transform: scale(1);
}

.prodigal-welcome-overlay.hide {
    opacity: 0;
    transform: scale(0.9);
}

.prodigal-welcome-content {
    background: white;
    border-radius: 2rem;
    padding: 3rem;
    text-align: center;
    box-shadow: 0 25px 80px rgba(26, 77, 58, 0.2);
    max-width: 500px;
    width: 100%;
    border: 1px solid rgba(26, 77, 58, 0.1);
    animation: prodigalSlideIn 0.6s ease;
}

@keyframes prodigalSlideIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.prodigal-welcome-icon {
    margin-bottom: 1.5rem;
    animation: prodigalFloat 3s ease-in-out infinite;
}

@keyframes prodigalFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

.prodigal-welcome-title {
    font-family: var(--font-family-display);
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--forest-deep);
    margin: 0 0 1rem 0;
}

.prodigal-welcome-message {
    font-family: var(--font-family-content);
    font-size: var(--font-lg);
    font-weight: var(--font-weight-medium);
    color: var(--charcoal-rich);
    margin: 0 0 1rem 0;
    line-height: 1.6;
}

.prodigal-welcome-encouragement {
    font-family: var(--font-family-content);
    font-size: var(--font-base);
    color: var(--charcoal-light);
    margin: 0 0 2rem 0;
    font-style: italic;
    opacity: 0.8;
}

.prodigal-welcome-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.prodigal-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(26, 77, 58, 0.1);
    border-radius: 1rem;
    border: 1px solid rgba(26, 77, 58, 0.2);
}

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

.stat-text {
    font-family: var(--font-family-ui);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-medium);
    color: var(--forest-deep);
}

.prodigal-welcome-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.prodigal-continue-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--forest-deep) 0%, var(--sage-deep) 100%);
    color: white;
    border: none;
    border-radius: 1.5rem;
    font-family: var(--font-family-ui);
    font-size: var(--font-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 48px;
    box-shadow: 0 8px 24px rgba(26, 77, 58, 0.3);
}

.prodigal-continue-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(26, 77, 58, 0.4);
}

.prodigal-continue-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 16px rgba(26, 77, 58, 0.3);
}

.btn-icon {
    transition: transform 0.3s ease;
}

.prodigal-continue-btn:hover .btn-icon {
    transform: translateX(4px);
}

.prodigal-gentle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 2rem;
    background: rgba(26, 77, 58, 0.1);
    color: var(--forest-deep);
    border: 1px solid rgba(26, 77, 58, 0.2);
    border-radius: 1.5rem;
    font-family: var(--font-family-ui);
    font-size: var(--font-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
}

.prodigal-gentle-btn:hover {
    background: rgba(26, 77, 58, 0.15);
    transform: translateY(-1px);
}

/* Gentle Breathing Overlay */
.gentle-breathing-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 249, 250, 0.95);
    backdrop-filter: blur(15px);
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.4s ease;
}

.gentle-breathing-overlay.show {
    opacity: 1;
    transform: scale(1);
}

.gentle-breathing-overlay.hide {
    opacity: 0;
    transform: scale(0.9);
}

.gentle-breathing-content {
    background: white;
    border-radius: 2rem;
    padding: 3rem;
    text-align: center;
    box-shadow: 0 25px 80px rgba(26, 77, 58, 0.2);
    max-width: 400px;
    width: 100%;
    border: 1px solid rgba(26, 77, 58, 0.1);
}

.gentle-breathing-icon {
    margin-bottom: 1.5rem;
    color: var(--forest-deep);
    animation: gentleBreathe 4s ease-in-out infinite;
}

@keyframes gentleBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.gentle-breathing-title {
    font-family: var(--font-family-display);
    font-size: var(--font-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--forest-deep);
    margin: 0 0 0.5rem 0;
}

.gentle-breathing-message {
    font-family: var(--font-family-content);
    font-size: var(--font-base);
    color: var(--charcoal-light);
    margin: 0 0 2rem 0;
}

.gentle-breathing-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(26, 77, 58, 0.1) 0%, rgba(122, 155, 122, 0.1) 100%);
    border: 3px solid rgba(26, 77, 58, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem auto;
    position: relative;
    transition: all 0.3s ease;
}

.gentle-breathing-circle.breathing {
    animation: gentleBreathPulse 4s ease-in-out infinite;
}

@keyframes gentleBreathPulse {
    0%, 100% { 
        transform: scale(1);
        border-color: rgba(26, 77, 58, 0.2);
    }
    50% { 
        transform: scale(1.1);
        border-color: rgba(26, 77, 58, 0.4);
    }
}

.gentle-breathing-inner {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--forest-deep) 0%, var(--sage-deep) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.gentle-breathing-inner.breathing {
    animation: gentleBreathInner 4s ease-in-out infinite;
}

@keyframes gentleBreathInner {
    0%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(0.9);
    }
}

.gentle-breathing-text {
    font-family: var(--font-family-ui);
    font-size: var(--font-base);
    font-weight: var(--font-weight-semibold);
    color: white;
    text-align: center;
}

.gentle-breathing-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gentle-breathing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--forest-deep) 0%, var(--sage-deep) 100%);
    color: white;
    border: none;
    border-radius: 1.5rem;
    font-family: var(--font-family-ui);
    font-size: var(--font-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 48px;
    box-shadow: 0 8px 24px rgba(26, 77, 58, 0.3);
}

.gentle-breathing-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(26, 77, 58, 0.4);
}

.gentle-skip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 2rem;
    background: rgba(26, 77, 58, 0.1);
    color: var(--forest-deep);
    border: 1px solid rgba(26, 77, 58, 0.2);
    border-radius: 1.5rem;
    font-family: var(--font-family-ui);
    font-size: var(--font-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
}

.gentle-skip-btn:hover {
    background: rgba(26, 77, 58, 0.15);
    transform: translateY(-1px);
}

/* Mobile Optimizations for Prodigal Welcome */
@media screen and (max-width: 768px) {
    .prodigal-welcome-overlay {
        padding: 1rem;
    }
    
    .prodigal-welcome-content {
        padding: 2rem;
        border-radius: 1.5rem;
    }
    
    .prodigal-welcome-title {
        font-size: var(--font-xl);
    }
    
    .prodigal-welcome-message {
        font-size: var(--font-base);
    }
    
    .prodigal-welcome-stats {
        flex-direction: column;
        gap: 1rem;
    }
    
    .prodigal-stat {
        padding: 0.625rem 1.25rem;
    }
    
    .prodigal-continue-btn {
        padding: 0.875rem 1.75rem;
        font-size: var(--font-sm);
    }
    
    .prodigal-gentle-btn {
        padding: 0.75rem 1.75rem;
        font-size: var(--font-sm);
    }
    
    .gentle-breathing-overlay {
        padding: 1rem;
    }
    
    .gentle-breathing-content {
        padding: 2rem;
        border-radius: 1.5rem;
    }
    
    .gentle-breathing-circle {
        width: 100px;
        height: 100px;
    }
    
    .gentle-breathing-inner {
        width: 70px;
        height: 70px;
    }
    
    .gentle-breathing-text {
        font-size: var(--font-sm);
    }
    
    .gentle-breathing-btn {
        padding: 0.875rem 1.75rem;
        font-size: var(--font-sm);
    }
    
    .gentle-skip-btn {
        padding: 0.75rem 1.75rem;
        font-size: var(--font-sm);
    }
}

/* iPhone-specific Prodigal Welcome Optimizations */
@media screen and (max-width: 428px) {
    .prodigal-welcome-content {
        padding: 1.5rem;
    }
    
    .prodigal-welcome-title {
        font-size: var(--font-lg);
    }
    
    .prodigal-welcome-message {
        font-size: var(--font-sm);
    }
    
    .prodigal-welcome-encouragement {
        font-size: var(--font-sm);
    }
    
    .prodigal-stat {
        padding: 0.5rem 1rem;
    }
    
    .stat-icon {
        font-size: var(--font-base);
    }
    
    .stat-text {
        font-size: var(--font-xs);
    }
    
    .prodigal-continue-btn {
        padding: 0.75rem 1.5rem;
        font-size: var(--font-sm);
    }
    
    .prodigal-gentle-btn {
        padding: 0.625rem 1.5rem;
        font-size: var(--font-sm);
    }
    
    .gentle-breathing-content {
        padding: 1.5rem;
    }
    
    .gentle-breathing-title {
        font-size: var(--font-lg);
    }
    
    .gentle-breathing-circle {
        width: 80px;
        height: 80px;
    }
    
    .gentle-breathing-inner {
        width: 60px;
        height: 60px;
    }
    
    .gentle-breathing-text {
        font-size: var(--font-xs);
    }
}

/* ========================================
   TEMPORAL ECHO - THE GENTLE MIRROR
   ======================================== */

/* Temporal Echo Overlay */
.temporal-echo-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 249, 250, 0.95);
    backdrop-filter: blur(15px);
    z-index: 1600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.4s ease;
}

.temporal-echo-overlay.show {
    opacity: 1;
    transform: scale(1);
}

.temporal-echo-overlay.hide {
    opacity: 0;
    transform: scale(0.9);
}

.temporal-echo-content {
    background: white;
    border-radius: 2rem;
    padding: 3rem;
    text-align: center;
    box-shadow: 0 25px 80px rgba(26, 77, 58, 0.2);
    max-width: 600px;
    width: 100%;
    border: 1px solid rgba(26, 77, 58, 0.1);
    animation: temporalEchoSlideIn 0.6s ease;
}

@keyframes temporalEchoSlideIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.temporal-echo-header {
    margin-bottom: 2rem;
}

.temporal-echo-icon {
    margin-bottom: 1.5rem;
    animation: temporalEchoFloat 3s ease-in-out infinite;
}

@keyframes temporalEchoFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

.temporal-echo-title {
    font-family: var(--font-family-display);
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--forest-deep);
    margin: 0 0 0.5rem 0;
}

.temporal-echo-subtitle {
    font-family: var(--font-family-content);
    font-size: var(--font-base);
    color: var(--charcoal-light);
    margin: 0;
    font-style: italic;
}

.temporal-echo-body {
    margin-bottom: 2rem;
    text-align: left;
}

/* Journal Entry Echo */
.journal-echo-content {
    background: rgba(26, 77, 58, 0.05);
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid rgba(26, 77, 58, 0.1);
}

.journal-echo-date {
    font-family: var(--font-family-ui);
    font-size: var(--font-sm);
    color: var(--charcoal-light);
    margin-bottom: 1rem;
    text-align: center;
    font-style: italic;
}

.journal-echo-text {
    font-family: var(--font-family-content);
    font-size: var(--font-lg);
    color: var(--charcoal-rich);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-style: italic;
    text-align: center;
}

.journal-echo-mood,
.journal-echo-gratitude {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(26, 77, 58, 0.1);
    border-radius: 0.5rem;
    font-family: var(--font-family-ui);
    font-size: var(--font-sm);
}

.mood-label,
.gratitude-label {
    font-weight: var(--font-weight-medium);
    color: var(--forest-deep);
}

.mood-value,
.gratitude-value {
    color: var(--charcoal-rich);
}

/* Curated Quote Echo */
.quote-echo-content {
    background: rgba(26, 77, 58, 0.05);
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid rgba(26, 77, 58, 0.1);
}

.quote-echo-text {
    font-family: var(--font-family-content);
    font-size: var(--font-xl);
    color: var(--charcoal-rich);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-style: italic;
    text-align: center;
}

.quote-echo-author {
    font-family: var(--font-family-ui);
    font-size: var(--font-base);
    color: var(--forest-deep);
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.5rem;
    text-align: center;
}

.quote-echo-category {
    font-family: var(--font-family-ui);
    font-size: var(--font-sm);
    color: var(--charcoal-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    opacity: 0.8;
}

/* Temporal Echo Actions */
.temporal-echo-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.temporal-echo-continue-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--forest-deep) 0%, var(--sage-deep) 100%);
    color: white;
    border: none;
    border-radius: 1.5rem;
    font-family: var(--font-family-ui);
    font-size: var(--font-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 48px;
    box-shadow: 0 8px 24px rgba(26, 77, 58, 0.3);
}

.temporal-echo-continue-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(26, 77, 58, 0.4);
}

.temporal-echo-continue-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 16px rgba(26, 77, 58, 0.3);
}

.temporal-echo-reflect-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: rgba(26, 77, 58, 0.1);
    color: var(--forest-deep);
    border: 1px solid rgba(26, 77, 58, 0.2);
    border-radius: 1.5rem;
    font-family: var(--font-family-ui);
    font-size: var(--font-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
}

.temporal-echo-reflect-btn:hover {
    background: rgba(26, 77, 58, 0.15);
    transform: translateY(-1px);
}

/* Mobile Optimizations for Temporal Echo */
@media screen and (max-width: 768px) {
    .temporal-echo-overlay {
        padding: 1rem;
    }
    
    .temporal-echo-content {
        padding: 2rem;
        border-radius: 1.5rem;
    }
    
    .temporal-echo-title {
        font-size: var(--font-xl);
    }
    
    .temporal-echo-subtitle {
        font-size: var(--font-sm);
    }
    
    .journal-echo-content,
    .quote-echo-content {
        padding: 1.5rem;
    }
    
    .journal-echo-text {
        font-size: var(--font-base);
    }
    
    .quote-echo-text {
        font-size: var(--font-lg);
    }
    
    .temporal-echo-continue-btn {
        padding: 0.875rem 1.75rem;
        font-size: var(--font-sm);
    }
    
    .temporal-echo-reflect-btn {
        padding: 0.75rem 1.75rem;
        font-size: var(--font-sm);
    }
}

/* iPhone-specific Temporal Echo Optimizations */
@media screen and (max-width: 428px) {
    .temporal-echo-content {
        padding: 1.5rem;
    }
    
    .temporal-echo-title {
        font-size: var(--font-lg);
    }
    
    .temporal-echo-subtitle {
        font-size: var(--font-xs);
    }
    
    .journal-echo-content,
    .quote-echo-content {
        padding: 1rem;
    }
    
    .journal-echo-date {
        font-size: var(--font-xs);
    }
    
    .journal-echo-text {
        font-size: var(--font-sm);
    }
    
    .quote-echo-text {
        font-size: var(--font-base);
    }
    
    .quote-echo-author {
        font-size: var(--font-sm);
    }
    
    .quote-echo-category {
        font-size: var(--font-xs);
    }
    
    .journal-echo-mood,
    .journal-echo-gratitude {
        padding: 0.375rem 0.75rem;
        font-size: var(--font-xs);
    }
    
    .temporal-echo-continue-btn {
        padding: 0.75rem 1.5rem;
        font-size: var(--font-sm);
    }
    
    .temporal-echo-reflect-btn {
        padding: 0.625rem 1.5rem;
        font-size: var(--font-sm);
    }
}

/* ==========================================================================
   CLARITY - A SANCTUARY FOR YOUR VOICE
   ========================================================================== */

/* Clarity Sanctuary Layout */
.clarity-sanctuary {
    background: linear-gradient(135deg, 
        rgba(122, 155, 122, 0.03) 0%, 
        rgba(26, 77, 58, 0.05) 50%, 
        rgba(122, 155, 122, 0.03) 100%);
    min-height: 100vh;
}

/* Prompt Hero - The Center of Attention */
.prompt-hero {
    padding: 2rem 0;
}

.prompt-container {
    max-width: 56rem; /* 896px */
}

.prompt-text {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--forest-deep);
    text-shadow: 0 1px 2px rgba(26, 77, 58, 0.1);
}

.prompt-subtitle {
    font-weight: 500;
    color: var(--charcoal);
    opacity: 0.6;
    letter-spacing: 0.02em;
}

/* Recording Interface */
.recording-interface {
    margin-top: 3rem;
}

/* Record Button - The Invitation */
.record-button {
    background: linear-gradient(135deg, 
        var(--sage-deep) 0%, 
        var(--forest-deep) 100%);
    box-shadow: 
        0 20px 40px rgba(26, 77, 58, 0.2),
        0 8px 16px rgba(122, 155, 122, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.record-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.2), 
        transparent);
    transition: left 0.6s;
}

.record-button:hover::before {
    left: 100%;
}

.record-button:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 
        0 32px 64px rgba(26, 77, 58, 0.3),
        0 16px 32px rgba(122, 155, 122, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.record-button:active {
    transform: translateY(-2px) scale(1.02);
    transition: all 0.1s;
}

/* Stop Button - The Completion */
.stop-button {
    background: linear-gradient(135deg, 
        #ef4444 0%, 
        #dc2626 100%);
    box-shadow: 
        0 20px 40px rgba(239, 68, 68, 0.2),
        0 8px 16px rgba(220, 38, 38, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.stop-button:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 
        0 32px 64px rgba(239, 68, 68, 0.3),
        0 16px 32px rgba(220, 38, 38, 0.2);
}

/* Waveform Visualizer */
.waveform-container {
    margin: 2rem 0;
}

.waveform {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.wave-bar {
    height: 1rem;
    background: linear-gradient(to top, 
        var(--sage-deep) 0%, 
        var(--forest-deep) 100%);
    border-radius: 0.125rem;
    transition: all 0.1s ease;
    animation: wavePulse 1.5s ease-in-out infinite;
}

.wave-bar:nth-child(odd) {
    animation-delay: 0.1s;
}

.wave-bar:nth-child(even) {
    animation-delay: 0.2s;
}

@keyframes wavePulse {
    0%, 100% { 
        height: 1rem; 
        opacity: 0.6;
    }
    50% { 
        height: 2.5rem; 
        opacity: 1;
    }
}

/* Breath Pacer - The Anti-Timer */
.breath-pacer-container {
    margin-top: 2rem;
    padding: 0 1rem;
}

.breath-pacer-track {
    height: 0.25rem;
    background: rgba(122, 155, 122, 0.2);
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
}

.breath-pacer-fill {
    height: 100%;
    background: linear-gradient(90deg, 
        var(--sage-deep) 0%, 
        var(--forest-deep) 100%);
    border-radius: 9999px;
    transition: width 90s linear;
    position: relative;
}

.breath-pacer-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0.5rem;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        transparent 100%);
    animation: breathPacerShimmer 2s ease-in-out infinite;
}

@keyframes breathPacerShimmer {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* Playback & Reflection State */
.playback-state {
    margin-top: 3rem;
}

.audio-player {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(122, 155, 122, 0.1);
    border-radius: 1rem;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.play-button {
    background: linear-gradient(135deg, 
        var(--sage-deep) 0%, 
        var(--forest-deep) 100%);
    box-shadow: 
        0 8px 16px rgba(26, 77, 58, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.play-button:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
        0 12px 24px rgba(26, 77, 58, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Progress Bar */
.progress-container {
    margin-bottom: 1rem;
}

.progress-track {
    height: 0.5rem;
    background: rgba(122, 155, 122, 0.2);
    border-radius: 9999px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, 
        var(--sage-deep) 0%, 
        var(--forest-deep) 100%);
    border-radius: 9999px;
    transition: width 0.1s ease;
}

/* Reflection Input */
.reflection-input {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(122, 155, 122, 0.1);
    border-radius: 1rem;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.reflection-textarea {
    background: transparent;
    border: 1px solid rgba(122, 155, 122, 0.2);
    border-radius: 0.5rem;
    color: var(--charcoal);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.6;
    resize: none;
    transition: all 0.3s ease;
}

.reflection-textarea:focus {
    outline: none;
    border-color: var(--sage-deep);
    box-shadow: 
        0 0 0 3px rgba(122, 155, 122, 0.1),
        inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.reflection-textarea::placeholder {
    color: rgba(60, 60, 60, 0.5);
}

/* Privacy Toggle */
.privacy-toggle {
    background: rgba(122, 155, 122, 0.2);
    border-radius: 9999px;
    position: relative;
    transition: all 0.3s ease;
}

.privacy-toggle-handle {
    background: var(--sage-deep);
    border-radius: 9999px;
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#privacy-checkbox:checked + .privacy-toggle {
    background: var(--sage-deep);
}

#privacy-checkbox:checked + .privacy-toggle .privacy-toggle-handle {
    transform: translateX(1.5rem);
    background: white;
}

/* Save Button */
.save-button {
    background: linear-gradient(135deg, 
        var(--sage-deep) 0%, 
        var(--forest-deep) 100%);
    box-shadow: 
        0 8px 16px rgba(26, 77, 58, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.save-button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        0 12px 24px rgba(26, 77, 58, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Gentle Guidance */
.gentle-guidance {
    margin-top: 2rem;
}

.guidance-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(122, 155, 122, 0.08);
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}

.guidance-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(122, 155, 122, 0.15);
    transform: translateY(-2px);
}

.guidance-icon {
    opacity: 0.8;
}

/* Prompt Navigation */
.prompt-navigation {
    margin-top: 2rem;
}

.navigation-hint {
    color: rgba(60, 60, 60, 0.5);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.nav-button {
    background: rgba(122, 155, 122, 0.1);
    border: 1px solid rgba(122, 155, 122, 0.1);
    transition: all 0.3s ease;
}

.nav-button:hover {
    background: rgba(122, 155, 122, 0.2);
    border-color: rgba(122, 155, 122, 0.2);
    transform: translateY(-1px);
}

/* Prompt Selection Modal */
.prompts-modal {
    z-index: 50;
}

.glass-modal {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(122, 155, 122, 0.1);
    border-radius: 1.5rem;
    box-shadow: 
        0 32px 64px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.prompt-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(122, 155, 122, 0.08);
    border-radius: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.prompt-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(122, 155, 122, 0.15);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 
        0 16px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.close-button {
    background: rgba(122, 155, 122, 0.1);
    border: 1px solid rgba(122, 155, 122, 0.1);
    transition: all 0.3s ease;
}

.close-button:hover {
    background: rgba(122, 155, 122, 0.2);
    border-color: rgba(122, 155, 122, 0.2);
    transform: scale(1.1);
}

.cancel-button {
    background: rgba(122, 155, 122, 0.1);
    border: 1px solid rgba(122, 155, 122, 0.1);
    transition: all 0.3s ease;
}

.cancel-button:hover {
    background: rgba(122, 155, 122, 0.2);
    border-color: rgba(122, 155, 122, 0.2);
    transform: translateY(-1px);
}

.select-button {
    background: linear-gradient(135deg, 
        var(--sage-deep) 0%, 
        var(--forest-deep) 100%);
    box-shadow: 
        0 8px 16px rgba(26, 77, 58, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.select-button:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 12px 24px rgba(26, 77, 58, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .prompt-text {
        font-size: 2rem;
        line-height: 1.3;
    }
    
    .record-button {
        width: 8rem;
        height: 8rem;
    }
    
    .stop-button {
        width: 8rem;
        height: 8rem;
    }
    
    .waveform {
        width: 16rem;
    }
    
    .breath-pacer-container {
        padding: 0 2rem;
    }
    
    .guidance-cards {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .prompts-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .prompt-hero {
        padding: 1rem 0;
    }
    
    .prompt-text {
        font-size: 1.75rem;
    }
    
    .record-button {
        width: 7rem;
        height: 7rem;
    }
    
    .stop-button {
        width: 7rem;
        height: 7rem;
    }
    
    .waveform {
        width: 14rem;
    }
}

/* ==========================================================================
   SACRED GATEWAY - THE PATH OF LEAST RESISTANCE
   ========================================================================== */

/* Sacred Gateway Layout */
.sacred-gateway {
    background: linear-gradient(135deg, 
        rgba(122, 155, 122, 0.02) 0%, 
        rgba(26, 77, 58, 0.03) 50%, 
        rgba(122, 155, 122, 0.02) 100%);
    min-height: 100vh;
}

/* Zone 1: Gentle Greeting */
.greeting-zone {
    padding-top: 2rem;
}

.greeting-content {
    animation: fadeInUp 0.8s ease-out;
}

.greeting-text {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--charcoal);
    text-shadow: 0 1px 2px rgba(60, 60, 60, 0.1);
    animation: gentleBounce 6s ease-in-out infinite;
}

.greeting-subtitle {
    font-weight: 500;
    color: var(--charcoal);
    opacity: 0.6;
    letter-spacing: 0.01em;
}

/* Zone 2: Day's Intention */
.intention-zone {
    padding: 2rem 0;
}

.intention-container {
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.intention-title {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--forest-deep);
    text-shadow: 0 1px 2px rgba(26, 77, 58, 0.1);
}

.intention-input {
    font-family: inherit;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 12px rgba(26, 77, 58, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.intention-input:focus {
    transform: translateY(-2px);
    box-shadow: 
        0 8px 24px rgba(26, 77, 58, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.intention-suggestions {
    animation: slideDown 0.3s ease-out;
    z-index: 10;
}

.suggestion-item {
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(122, 155, 122, 0.1);
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    transform: translateX(4px);
}

/* Golden Thread Display */
.golden-thread-display {
    animation: fadeInUp 0.6s ease-out;
}

.thread-container {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(122, 155, 122, 0.2);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.thread-icon {
    animation: gentleFloat 3s ease-in-out infinite;
}

.thread-word {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--forest-deep);
    text-shadow: 0 1px 2px rgba(26, 77, 58, 0.1);
    animation: scaleIn 0.6s ease-out;
    transition: all 0.3s ease;
}

.thread-word:hover {
    transform: scale(1.05);
    text-shadow: 0 2px 4px rgba(26, 77, 58, 0.15);
}

/* Zone 3: Single Path Forward */
.flow-zone {
    padding-bottom: 2rem;
}

.flow-container {
    animation: fadeInUp 0.8s ease-out 0.4s both;
}

/* Sacred Flow Button */
.sacred-flow-button {
    position: relative;
    background: linear-gradient(135deg, 
        var(--sage-deep) 0%, 
        var(--forest-deep) 100%);
    box-shadow: 
        0 20px 40px rgba(26, 77, 58, 0.2),
        0 8px 16px rgba(122, 155, 122, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    transform: translateZ(0); /* Hardware acceleration */
    will-change: transform, box-shadow;
}

.sacred-flow-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.2), 
        transparent);
    transition: left 0.8s;
}

.sacred-flow-button:hover::before {
    left: 100%;
}

.sacred-flow-button:hover:not(:disabled) {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 
        0 32px 64px rgba(26, 77, 58, 0.3),
        0 16px 32px rgba(122, 155, 122, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    filter: brightness(1.05) saturate(1.1);
}

.sacred-flow-button:active:not(:disabled) {
    transform: translateY(-2px) scale(1.02);
    transition: all 0.1s;
}

.button-pulse {
    animation: sacredPulse 2s ease-in-out infinite;
}

@keyframes sacredPulse {
    0%, 100% { 
        opacity: 0.2;
        transform: scale(1);
    }
    50% { 
        opacity: 0.4;
        transform: scale(1.02);
    }
}

/* Flow Preview */
.flow-preview {
    animation: fadeInUp 0.6s ease-out;
}

.flow-steps {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.flow-step {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.flow-step:hover {
    opacity: 1;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gentleFloat {
    0%, 100% { 
        transform: translateY(0px);
    }
    50% { 
        transform: translateY(-8px);
    }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .greeting-text {
        font-size: 2.5rem;
        line-height: 1.3;
    }
    
    .intention-title {
        font-size: 1.5rem;
        line-height: 1.4;
    }
    
    .intention-input {
        font-size: 1rem;
        padding: 1rem 1.5rem;
    }
    
    .sacred-flow-button {
        width: 14rem;
        height: 3.5rem;
        font-size: 1.125rem;
    }
    
    .thread-container {
        padding: 1.5rem;
    }
    
    .thread-word {
        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {
    .greeting-zone {
        padding-top: 1.5rem;
    }
    
    .greeting-text {
        font-size: 2rem;
    }
    
    .intention-title {
        font-size: 1.25rem;
    }
    
    .intention-input {
        font-size: 0.9rem;
        padding: 0.875rem 1.25rem;
    }
    
    .sacred-flow-button {
        width: 12rem;
        height: 3rem;
        font-size: 1rem;
    }
    
    .flow-steps {
        font-size: 0.7rem;
    }
}

/* ==========================================================================
   SANCTUARY DEEPENING - TIMER, JOURNAL, GRATITUDE
   ========================================================================== */

/* Timer Sanctuary */
.timer-sanctuary {
    background: linear-gradient(135deg, 
        rgba(26, 77, 58, 0.02) 0%, 
        rgba(122, 155, 122, 0.03) 50%, 
        rgba(26, 77, 58, 0.02) 100%);
    min-height: 100vh;
}

.golden-thread-header {
    animation: fadeInDown 0.8s ease-out;
}

.thread-label {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(122, 155, 122, 0.2);
    border-radius: 1rem;
    padding: 0.5rem 1rem;
    display: inline-block;
}

.thread-text {
    font-size: 0.875rem;
    letter-spacing: 0.01em;
}

.thread-word {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.sanctuary-heading {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--forest-deep);
    text-shadow: 0 1px 2px rgba(26, 77, 58, 0.1);
}

.sanctuary-subtitle {
    font-weight: 500;
    color: var(--charcoal);
    opacity: 0.7;
    letter-spacing: 0.01em;
}

/* Breathing Circle Animation */
.animate-breathing {
    animation: breathing 4s ease-in-out infinite;
}

@keyframes breathing {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.4;
    }
    50% { 
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.duration-adjust-btn {
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: 500;
}

.duration-adjust-btn:hover {
    transform: translateY(-1px);
}

/* Journal Sanctuary */
.journal-sanctuary {
    background: linear-gradient(135deg, 
        rgba(255, 254, 247, 0.8) 0%, 
        rgba(255, 254, 247, 0.9) 50%, 
        rgba(255, 254, 247, 0.8) 100%);
    min-height: 100vh;
}

.breathing-preparation {
    animation: fadeIn 0.5s ease-out;
}

.emotion-wheel-wrapper {
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.emotion-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(122, 155, 122, 0.1);
}

.emotion-btn:hover {
    border-color: rgba(122, 155, 122, 0.3);
    box-shadow: 0 4px 12px rgba(122, 155, 122, 0.15);
}

.emotion-btn.selected {
    background: rgba(122, 155, 122, 0.1);
    border-color: rgba(122, 155, 122, 0.4);
    transform: scale(1.05);
}

.writing-area {
    position: relative;
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.golden-thread-watermark {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: 0.05em;
    transition: opacity 0.3s ease;
}

.golden-thread-watermark.active {
    opacity: 0.6;
}

#journal-textarea {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

#journal-textarea:focus {
    box-shadow: 0 0 0 3px rgba(122, 155, 122, 0.1);
}

/* Selah Completion Ritual */
.selah-completion {
    animation: fadeIn 0.5s ease-out;
}

.selah-word {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Gratitude Sanctuary */
.gratitude-sanctuary {
    background: linear-gradient(135deg, 
        rgba(212, 175, 55, 0.02) 0%, 
        rgba(255, 254, 247, 0.9) 50%, 
        rgba(212, 175, 55, 0.02) 100%);
    min-height: 100vh;
}

.gratitude-input-container {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.gratitude-input-container.revealed {
    opacity: 1;
    transform: translateY(0);
}

.light-point {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    animation: gentlePulse 2s ease-in-out infinite;
}

@keyframes gentlePulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.8;
    }
    50% { 
        transform: scale(1.1);
        opacity: 1;
    }
}

/* Delightful Micro-Animations */
@keyframes subtleGlow {
    0%, 100% { 
        box-shadow: 
            0 0 20px rgba(122, 155, 122, 0.1),
            0 0 40px rgba(26, 77, 58, 0.05);
    }
    50% { 
        box-shadow: 
            0 0 30px rgba(122, 155, 122, 0.15),
            0 0 60px rgba(26, 77, 58, 0.08);
    }
}

@keyframes gentleBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@keyframes textShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes iconWiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-2deg); }
    75% { transform: rotate(2deg); }
}

@keyframes scaleIn {
    from { 
        opacity: 0; 
        transform: scale(0.95); 
    }
    to { 
        opacity: 1; 
        transform: scale(1); 
    }
}

@keyframes slideInLeft {
    from { 
        opacity: 0; 
        transform: translateX(-20px); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

@keyframes slideInRight {
    from { 
        opacity: 0; 
        transform: translateX(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

/* Subtle Parallax Effect */
.morphing-premium {
    animation: morphingBackground 20s ease-in-out infinite;
    transform: translateZ(0);
}

/* Enhanced Focus States */
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--sage-deep);
    box-shadow: 0 0 0 3px rgba(122, 155, 122, 0.1);
    transition: all 0.3s ease;
}

/* CLS Prevention - Reserve space for dynamic content */
.logo, .icon, .avatar {
    width: 64px;
    height: 64px;
    aspect-ratio: 1 / 1;
}

.banner, .hero-image {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.weather-card, .prediction-card {
    min-height: 120px;
    aspect-ratio: 3 / 2;
}

/* Subtle Loading States */
.loading-shimmer {
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(255, 255, 255, 0.2) 50%, 
        rgba(255, 255, 255, 0.1) 100%);
    background-size: 200% 100%;
    animation: textShimmer 2s ease-in-out infinite;
}

/* Delightful Button Enhancements */
button, .btn-premium, .sacred-flow-button {
    position: relative;
    overflow: hidden;
}

button::after, .btn-premium::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

button:active::after, .btn-premium:active::after {
    width: 200px;
    height: 200px;
}

/* Subtle Scroll Indicator */
.scroll-indicator {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 100px;
    background: rgba(122, 155, 122, 0.2);
    border-radius: 1px;
    z-index: 50;
}

.scroll-indicator::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20%;
    background: var(--sage-deep);
    border-radius: 1px;
    animation: gentleBounce 2s ease-in-out infinite;
}

/* User Anticipation System Styles */
.anticipation-message {
    backdrop-filter: blur(20px);
    border: 1px solid rgba(122, 155, 122, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    animation: slideInLeft 0.4s ease-out;
}

.anticipation-trigger {
    position: relative;
}

.anticipation-trigger:hover::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(122, 155, 122, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: anticipationPulse 0.6s ease-out;
}

@keyframes anticipationPulse {
    0% {
        width: 0;
        height: 0;
        opacity: 0.8;
    }
    100% {
        width: 100px;
        height: 100px;
        opacity: 0;
    }
}

/* Writing Mode Enhancements */
body.writing-mode {
    filter: brightness(0.98);
    transition: filter 0.3s ease;
}

body.writing-mode .writing-area-container {
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

/* Meditation Mode Enhancements */
body.meditation-mode {
    filter: brightness(0.95) saturate(0.9);
    transition: filter 0.5s ease;
}

/* Gratitude Mode Enhancements */
body.gratitude-mode {
    filter: brightness(1.05) saturate(1.1);
    transition: filter 0.5s ease;
}

/* Auto-save Indicator */
.auto-save-indicator {
    backdrop-filter: blur(10px);
    border: 1px solid rgba(122, 155, 122, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    animation: scaleIn 0.3s ease-out;
}

/* Prompt Suggestion */
.prompt-suggestion {
    backdrop-filter: blur(20px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: 0 8px 32px rgba(212, 175, 55, 0.1);
    animation: slideInUp 0.4s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Enhanced Focus States for Anticipation */
.anticipation-trigger:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(122, 155, 122, 0.2);
    border-color: var(--sage-deep);
    transition: all 0.3s ease;
}

/* Subtle Loading States */
.anticipation-loading {
    position: relative;
    overflow: hidden;
}

.anticipation-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: anticipationShimmer 2s infinite;
}

@keyframes anticipationShimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Smart Predictions System Styles */
.smart-prediction {
    backdrop-filter: blur(20px);
    border: 1px solid rgba(122, 155, 122, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    animation: slideInLeft 0.4s ease-out;
}

.smart-prediction::before {
    content: '🧠';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    opacity: 0.7;
}

/* Prediction Type Styles */
.smart-prediction.morning {
    border-left: 3px solid var(--forest-deep);
}

.smart-prediction.afternoon {
    border-left: 3px solid var(--gold-rich);
}

.smart-prediction.evening {
    border-left: 3px solid var(--sage-deep);
}

/* Enhanced Anticipation Messages */
.anticipation-message.suggestion::before {
    content: '💡';
    margin-right: 8px;
}

.anticipation-message.insight::before {
    content: '✨';
    margin-right: 8px;
}

.anticipation-message.encouragement::before {
    content: '🌟';
    margin-right: 8px;
}

.anticipation-message.celebration::before {
    content: '🎉';
    margin-right: 8px;
}

.anticipation-message.guidance::before {
    content: '🧘';
    margin-right: 8px;
}

.anticipation-message.reflection::before {
    content: '💭';
    margin-right: 8px;
}

.anticipation-message.thought::before {
    content: '💫';
    margin-right: 8px;
}

.anticipation-message.prompt::before {
    content: '📝';
    margin-right: 8px;
}

.anticipation-message.flow::before {
    content: '🌊';
    margin-right: 8px;
}

.anticipation-message.progress::before {
    content: '📈';
    margin-right: 8px;
}

/* Smart Contextual Hints */
.contextual-hint {
    position: absolute;
    background: rgba(122, 155, 122, 0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1000;
}

.anticipation-trigger:hover .contextual-hint {
    opacity: 1;
}

/* Learning Indicators */
.learning-indicator {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: rgba(122, 155, 122, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(10px);
}

.learning-indicator.show {
    opacity: 1;
}

.learning-indicator::before {
    content: '🎯';
    margin-right: 6px;
}

/* Accessibility Enhancements */
.accessibility-panel {
    backdrop-filter: blur(20px);
    border: 2px solid var(--sage-deep);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    max-width: 300px;
}

.accessibility-toggle {
    width: 18px;
    height: 18px;
    accent-color: var(--sage-deep);
}

.accessibility-toggle:checked {
    background-color: var(--sage-deep);
    border-color: var(--sage-deep);
}

#font-size-slider {
    accent-color: var(--sage-deep);
}

/* High Contrast Mode */
body.high-contrast {
    --forest-deep: #000000;
    --forest-medium: #333333;
    --forest-light: #666666;
    --sage-deep: #000000;
    --sage-medium: #333333;
    --charcoal: #000000;
    --charcoal-medium: #333333;
    --linen-white: #ffffff;
    --cream-rich: #ffffff;
    background: #ffffff !important;
    color: #000000 !important;
}

body.high-contrast * {
    background-color: transparent !important;
    color: #000000 !important;
    border-color: #000000 !important;
}

body.high-contrast .card-premium,
body.high-contrast .sacred-flow-button,
body.high-contrast button {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}

body.high-contrast .anticipation-message,
body.high-contrast .smart-prediction {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}

/* Large Text Mode */
body.large-text {
    --font-size-multiplier: 1.2;
}

body.large-text * {
    font-size: calc(1em * var(--font-size-multiplier, 1.2)) !important;
}

body.large-text .text-xs { font-size: calc(0.75rem * var(--font-size-multiplier, 1.2)) !important; }
body.large-text .text-sm { font-size: calc(0.875rem * var(--font-size-multiplier, 1.2)) !important; }
body.large-text .text-base { font-size: calc(1rem * var(--font-size-multiplier, 1.2)) !important; }
body.large-text .text-lg { font-size: calc(1.125rem * var(--font-size-multiplier, 1.2)) !important; }
body.large-text .text-xl { font-size: calc(1.25rem * var(--font-size-multiplier, 1.2)) !important; }
body.large-text .text-2xl { font-size: calc(1.5rem * var(--font-size-multiplier, 1.2)) !important; }
body.large-text .text-3xl { font-size: calc(1.875rem * var(--font-size-multiplier, 1.2)) !important; }
body.large-text .text-4xl { font-size: calc(2.25rem * var(--font-size-multiplier, 1.2)) !important; }

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

/* Enhanced Focus Indicators for Accessibility */
.keyboard-navigable:focus {
    outline: 3px solid var(--sage-deep) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(122, 155, 122, 0.3) !important;
}

/* Voice Command Indicator */
.voice-command-active {
    position: relative;
}

.voice-command-active::after {
    content: '🎤';
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 12px;
    background: var(--sage-deep);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse 1s infinite;
}

/* Accessibility Announcements */
#live-region,
#urgent-live-region {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Skip Links */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--sage-deep);
    color: white;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1000;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 6px;
}

/* Reduced Motion Overrides */
@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;
    }
}

/* High Contrast Media Query */
@media (prefers-contrast: high) {
    body {
        --forest-deep: #000000;
        --sage-deep: #000000;
        --charcoal: #000000;
        --linen-white: #ffffff;
    }
    
    .card-premium,
    .sacred-flow-button,
    button {
        border: 2px solid currentColor !important;
    }
}

.gratitude-input {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 12px rgba(212, 175, 55, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.gratitude-input:focus {
    transform: translateY(-2px);
    box-shadow: 
        0 8px 24px rgba(212, 175, 55, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-color: var(--gold-rich);
    animation: subtleGlow 1.5s ease-in-out;
}

.illuminate-button {
    position: relative;
    background: linear-gradient(135deg, 
        var(--gold-rich) 0%, 
        var(--gold-medium) 100%);
    box-shadow: 
        0 20px 40px rgba(212, 175, 55, 0.2),
        0 8px 16px rgba(212, 175, 55, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.illuminate-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent);
    transition: left 0.8s;
}

.illuminate-button:hover::before {
    left: 100%;
}

.illuminate-button:hover:not(:disabled) {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 
        0 32px 64px rgba(212, 175, 55, 0.3),
        0 16px 32px rgba(212, 175, 55, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.lights-animation {
    animation: fadeInUp 0.6s ease-out;
}

.lights-container .light-1,
.lights-container .light-2,
.lights-container .light-3 {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

@keyframes animate-gentle-pulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.7;
    }
    50% { 
        transform: scale(1.2);
        opacity: 1;
    }
}

@keyframes wave-pulse {
    0%, 100% {
        height: 0.25rem;
        opacity: 0.4;
    }
    50% {
        height: 1.5rem;
        opacity: 1;
    }
}

.animate-wave-pulse {
    animation: wave-pulse 1.5s ease-in-out infinite;
}

/* Enhanced Global Micro-interactions */
.button-shimmer {
    pointer-events: none;
}

/* Performance Optimizations */
.animate-gentle-pulse,
.animate-wave-pulse,
.animate-shimmer,
.float-premium,
.pulse-premium {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* GPU Acceleration for Animations */
.sacred-flow-button,
.illuminate-button,
.control-btn,
.record-button,
.stop-button {
    will-change: transform, box-shadow;
    transform: translateZ(0);
}

/* Optimize Heavy Animations */
@keyframes breathing,
@keyframes wavePulse,
@keyframes shimmer {
    will-change: transform, opacity;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    /* Reduce animations on mobile for better performance */
    .animate-gentle-pulse,
    .animate-wave-pulse,
    .float-premium {
        animation-duration: 3s; /* Slower animations on mobile */
    }
    
    /* Ensure proper touch targets */
    button, .btn, [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Optimize scrolling */
    .overflow-y-auto {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    
    /* Reduce motion for users who prefer it */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* Improved Focus States */
*:focus-visible {
    outline: 2px solid var(--sage-deep);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Enhanced Focus for Interactive Elements */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--sage-deep);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(139, 169, 93, 0.1);
}

/* Skip Links for Accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--sage-deep);
    color: white;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1000;
}

.skip-link:focus {
    top: 6px;
}

/* Tooltip System */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: var(--charcoal);
    color: white;
    text-align: center;
    border-radius: 8px;
    padding: 8px 12px;
    position: absolute;
    z-index: 1000;
    bottom: 125%;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.875rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--charcoal) transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Enhanced Button States */
.btn-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn-loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Loading States */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(139, 169, 93, 0.3);
    border-top: 4px solid var(--sage-deep);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Error States */
.error-message {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #dc2626;
    padding: 12px 16px;
    border-radius: 8px;
    margin: 8px 0;
}

.success-message {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #16a34a;
    padding: 12px 16px;
    border-radius: 8px;
    margin: 8px 0;
}

/* Enhanced Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(212, 175, 55, 0.1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--sage-deep);
    border-radius: 4px;
}

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

/* Smooth Page Transitions */
.page-transition {
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

.page-transition.entering {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
}

.page-transition.entered {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Enhanced Page Load Animation */
@keyframes pageSlideIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.page-slide-in {
    animation: pageSlideIn 0.5s ease-out;
}

/* Enhanced Loading States */
@keyframes shimmer-loading {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.loading-shimmer {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    background-size: 200px 100%;
    animation: shimmer-loading 1.5s infinite;
}

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

.content-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    background-size: 200px 100%;
    animation: shimmer-loading 1.5s infinite;
}

/* Subtle Pulse for Interactive Elements */
.interactive-pulse {
    animation: gentle-pulse 2s ease-in-out infinite;
}

@keyframes gentle-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

/* Improved Selection */
::selection {
    background: var(--sage-deep);
    color: white;
}

::-moz-selection {
    background: var(--sage-deep);
    color: white;
}

/* Flow Progress Indicator */
.flow-step-indicator.active {
    background: var(--sage-deep);
    transform: scale(1.2);
}

.flow-step-indicator.completed {
    background: var(--forest-deep);
}

.flow-step-indicator {
    transition: all 0.3s ease-in-out;
    box-shadow: 0 2px 8px rgba(122, 155, 122, 0.1);
}

.flow-step-indicator.active {
    animation: subtleGlow 2s ease-in-out infinite;
}

.flow-step-indicator:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile Optimizations for Sanctuaries */
@media (max-width: 768px) {
    .sanctuary-heading {
        font-size: 2.5rem;
        line-height: 1.3;
    }
    
    .thread-label {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }
    
    .breathing-circle {
        width: 8rem;
        height: 8rem;
    }
    
    .emotion-wheel {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .emotion-btn {
        padding: 0.75rem;
    }
    
    .gratitude-input {
        font-size: 1rem;
        padding: 0.875rem 1.25rem;
    }
    
    .illuminate-button {
        width: 14rem;
        height: 3.5rem;
        font-size: 1.125rem;
    }
    
    .selah-word {
        font-size: 4rem;
    }
}

@media (max-width: 480px) {
    .sanctuary-heading {
        font-size: 2rem;
    }
    
    .thread-label {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }
    
    .breathing-circle {
        width: 6rem;
        height: 6rem;
    }
    
    .emotion-wheel {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .emotion-btn {
        padding: 0.5rem;
    }
    
    .gratitude-input {
        font-size: 0.9rem;
        padding: 0.75rem 1rem;
    }
    
    .illuminate-button {
        width: 12rem;
        height: 3rem;
        font-size: 1rem;
    }
    
    .selah-word {
        font-size: 3rem;
    }
}

/* ==========================================================================
   MIRROR OF DUALITY 2.0 - THE WISDOM ENGINE
   ========================================================================== */

/* Mirror of Duality Modal */
.mirror-duality-modal {
    animation: fadeIn 0.5s ease-out;
}

.insight-modal {
    animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 32px 64px rgba(0, 0, 0, 0.2),
        0 16px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.mirror-duality-modal.show .insight-modal {
    animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.insight-header {
    position: relative;
}

.insight-icon {
    animation: gentleFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.insight-title {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.insight-text {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.insight-actions {
    gap: 1rem;
}

.save-insight-btn,
.resonates-btn {
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.save-insight-btn::before,
.resonates-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.2), 
        transparent);
    transition: left 0.6s;
}

.save-insight-btn:hover::before,
.resonates-btn:hover::before {
    left: 100%;
}

.save-insight-btn:hover,
.resonates-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.close-insight-btn {
    transition: all 0.2s ease;
}

.close-insight-btn:hover {
    transform: scale(1.1);
    background: rgba(60, 60, 60, 0.2);
}

/* Wisdom Collection Display */
.wisdom-collection {
    background: linear-gradient(135deg, 
        rgba(212, 175, 55, 0.05) 0%, 
        rgba(255, 254, 247, 0.9) 50%, 
        rgba(212, 175, 55, 0.05) 100%);
    min-height: 100vh;
}

.wisdom-header {
    text-align: center;
    padding: 2rem 0;
}

.wisdom-title {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--forest-deep);
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.wisdom-subtitle {
    font-size: 1.125rem;
    color: var(--charcoal);
    opacity: 0.7;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.wisdom-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.wisdom-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 1.5rem;
    padding: 2rem;
    border: 1px solid rgba(122, 155, 122, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.wisdom-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold-rich), var(--gold-medium));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.wisdom-card:hover::before {
    opacity: 1;
}

.wisdom-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

.wisdom-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.wisdom-card-icon {
    font-size: 2rem;
    margin-right: 1rem;
    animation: gentleFloat 3s ease-in-out infinite;
}

.wisdom-card-title {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--forest-deep);
    line-height: 1.3;
}

.wisdom-card-content {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--charcoal);
    opacity: 0.8;
    margin-bottom: 1.5rem;
}

.wisdom-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: var(--charcoal);
    opacity: 0.6;
}

.wisdom-card-date {
    font-style: italic;
}

.wisdom-card-resonant {
    display: flex;
    align-items: center;
    color: var(--gold-rich);
    font-weight: 500;
}

.wisdom-card-resonant::before {
    content: '✨';
    margin-right: 0.5rem;
}

/* Animations */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gentleFloat {
    0%, 100% { 
        transform: translateY(0px);
    }
    50% { 
        transform: translateY(-8px);
    }
}

/* Mobile Optimizations for Mirror of Duality */
@media (max-width: 768px) {
    .insight-modal {
        margin: 1rem;
        padding: 1.5rem;
        max-width: calc(100vw - 2rem);
    }
    
    .insight-title {
        font-size: 1.75rem;
    }
    
    .insight-text {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    .insight-actions {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .save-insight-btn,
    .resonates-btn {
        width: 100%;
        padding: 0.75rem 1.5rem;
    }
    
    .wisdom-title {
        font-size: 2rem;
    }
    
    .wisdom-cards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1rem;
    }
    
    .wisdom-card {
        padding: 1.5rem;
    }
    
    .wisdom-card-title {
        font-size: 1.125rem;
    }
    
    .wisdom-card-content {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .insight-modal {
        padding: 1rem;
        margin: 0.5rem;
    }
    
    .insight-title {
        font-size: 1.5rem;
    }
    
    .insight-text {
        font-size: 0.9rem;
    }
    
    .wisdom-title {
        font-size: 1.75rem;
    }
    
    .wisdom-card {
        padding: 1rem;
    }
    
    .wisdom-card-icon {
        font-size: 1.5rem;
    }
    
    .wisdom-card-title {
        font-size: 1rem;
    }
}

/* ==========================================================================
   POLISH & REFINEMENT - COMPREHENSIVE ENHANCEMENTS
   ========================================================================== */

/* Performance Optimizations */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(122, 155, 122, 0.2);
    border-left: 4px solid var(--sage-deep);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Visual Polish - Micro-interactions */
.ripple-container {
    position: relative;
    overflow: hidden;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.shimmer {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Hover Effects */
.hover-glow {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(122, 155, 122, 0.3);
    transform: translateY(-2px);
}

.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-tilt {
    transition: transform 0.3s ease;
}

.hover-tilt:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(5deg) translateZ(10px);
}

/* Loading States */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-content {
    text-align: center;
}

.loading-logo {
    margin-bottom: 1.5rem;
}

.loading-logo .logo-animation {
    width: 4rem;
    height: 4rem;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--sage-deep), var(--forest-deep));
    border-radius: 1rem;
    animation: logo-float 3s ease-in-out infinite;
}

@keyframes logo-float {
    0%, 100% { 
        transform: translateY(0px) scale(1); 
    }
    50% { 
        transform: translateY(-10px) scale(1.05); 
    }
}

.loading-text {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--forest-deep);
    margin-bottom: 1rem;
}

.loading-progress {
    width: 12rem;
    height: 0.25rem;
    background: rgba(122, 155, 122, 0.2);
    border-radius: 0.5rem;
    margin: 0 auto;
    overflow: hidden;
}

.loading-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sage-deep), var(--forest-deep));
    border-radius: 0.5rem;
    animation: progress-fill 2s ease-in-out infinite;
}

@keyframes progress-fill {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

/* Accessibility Enhancements */
.focus-ring {
    position: relative;
}

.focus-ring::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid var(--sage-deep);
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.focus-ring:focus::after {
    opacity: 1;
}

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

.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* High Contrast Mode */
.high-contrast * {
    background-color: white !important;
    color: black !important;
    border-color: black !important;
}

.high-contrast .text-forest-deep,
.high-contrast .text-sage-deep {
    color: black !important;
}

.high-contrast .bg-gradient-to-r {
    background: white !important;
}

/* Reduced Motion */
.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

/* Production Features */
.update-notification {
    background: white;
    border: 1px solid rgba(122, 155, 122, 0.2);
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 50;
}

.install-prompt {
    background: white;
    border: 1px solid rgba(122, 155, 122, 0.2);
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 50;
}

.offline-indicator {
    background: #f59e0b;
    color: white;
    text-align: center;
    padding: 0.5rem;
    z-index: 50;
}

/* Font Size Adjustments */
.font-size-small {
    font-size: 0.875rem;
}

.font-size-large {
    font-size: 1.125rem;
}

.font-size-extra-large {
    font-size: 1.25rem;
}

/* Skip Links */
.skip-links {
    position: absolute;
    top: -40px;
    left: 6px;
    z-index: 100;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--sage-deep);
    color: white;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 100;
}

.skip-link:focus {
    top: 6px;
}

/* Character Count */
.character-count {
    position: absolute;
    bottom: -20px;
    right: 0;
    font-size: 0.75rem;
    color: #666;
    transition: color 0.3s ease;
}

.character-count.warning {
    color: #e74c3c;
}

/* Floating Labels */
.floating-label {
    position: relative;
}

.floating-label label {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    color: #666;
    transition: all 0.3s ease;
    pointer-events: none;
    background: white;
    padding: 0 0.25rem;
}

.floating-label label.floating {
    top: 0;
    font-size: 0.75rem;
    color: var(--sage-deep);
}

.floating-label input:focus + label,
.floating-label textarea:focus + label {
    top: 0;
    font-size: 0.75rem;
    color: var(--sage-deep);
}

/* Progress Indicators */
.progress-bar {
    width: 100%;
    height: 0.5rem;
    background: rgba(122, 155, 122, 0.2);
    border-radius: 0.25rem;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sage-deep), var(--forest-deep));
    border-radius: 0.25rem;
    transition: width 0.3s ease;
}

/* Error States */
.error-state {
    color: #e74c3c;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.low-contrast {
    border: 2px dashed #e74c3c;
    background: rgba(231, 76, 60, 0.1);
}

/* Voice Commands */
.voice-commands {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background: var(--sage-deep);
    color: white;
    border: none;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.voice-commands:hover {
    background: var(--forest-deep);
    transform: scale(1.1);
}

.voice-commands.listening {
    background: #e74c3c;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Mobile Optimizations for Polish */
@media (max-width: 768px) {
    .loading-progress {
        width: 8rem;
    }
    
    .update-notification,
    .install-prompt {
        margin: 1rem;
        padding: 0.75rem;
    }
    
    .voice-commands {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.25rem;
    }
    
    .skip-link {
        font-size: 0.875rem;
        padding: 0.5rem;
    }
}

@media (max-width: 480px) {
    .loading-logo .logo-animation {
        width: 3rem;
        height: 3rem;
    }
    
    .loading-text {
        font-size: 1rem;
    }
    
    .loading-progress {
        width: 6rem;
    }
    
    .update-notification,
    .install-prompt {
        margin: 0.5rem;
        padding: 0.5rem;
    }
    
    .voice-commands {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }
}

/* ==========================================================================
   ANALYTICS & OPTIMIZATION - COMPREHENSIVE MONITORING
   ========================================================================== */

/* Analytics Dashboard */
.analytics-dashboard {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    min-height: 100vh;
}

.dashboard-header {
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #e2e8f0;
}

.status-indicator {
    display: flex;
    align-items: center;
}

.status-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.refresh-btn {
    background: #f1f5f9;
    color: #475569;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.refresh-btn:hover {
    background: #e2e8f0;
    transform: translateY(-1px);
}

.refresh-icon {
    transition: transform 0.3s ease;
}

/* Metric Cards */
.metric-card {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.performance-gauge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.performance-gauge svg {
    width: 4rem;
    height: 4rem;
    transform: rotate(-90deg);
}

.performance-gauge .absolute {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Charts */
.chart-container {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    padding: 1.5rem;
}

.chart-period-btn {
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    background: transparent;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chart-period-btn:hover {
    background: #f1f5f9;
    color: #475569;
}

.chart-period-btn.active {
    background: #7A9B7A;
    color: white;
    border-color: #7A9B7A;
}

.chart-placeholder {
    height: 16rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Metrics Sections */
.metrics-section {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    padding: 1.5rem;
}

.metric-item {
    margin-bottom: 1rem;
}

.progress-bar {
    width: 100%;
    height: 0.5rem;
    background: #e2e8f0;
    border-radius: 0.25rem;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 0.25rem;
    transition: all 0.3s ease;
}

/* Alerts */
.alerts-section {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    padding: 1.5rem;
}

.alert-item {
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    border: 1px solid;
}

.alert-item:last-child {
    margin-bottom: 0;
}

.alert-icon {
    font-size: 1.25rem;
    margin-right: 0.75rem;
}

.alert-time {
    font-size: 0.75rem;
    opacity: 0.6;
}

/* A/B Testing Styles */
.ab-testing-indicator {
    position: fixed;
    top: 1rem;
    right: 1rem;
    background: rgba(122, 155, 122, 0.9);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.experiment-variant {
    position: relative;
}

.experiment-variant::after {
    content: 'A/B Test';
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    background: #f59e0b;
    color: white;
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    z-index: 10;
}

/* Performance Indicators */
.performance-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.performance-indicator.excellent {
    color: #059669;
}

.performance-indicator.good {
    color: #0d9488;
}

.performance-indicator.needs-improvement {
    color: #d97706;
}

.performance-indicator.poor {
    color: #dc2626;
}

/* Trend Indicators */
.trend-up {
    color: #059669;
}

.trend-down {
    color: #dc2626;
}

.trend-stable {
    color: #6b7280;
}

/* Loading States for Analytics */
.analytics-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.analytics-loading .loading-spinner {
    margin-right: 0.75rem;
}

/* Mobile Optimizations for Analytics */
@media (max-width: 768px) {
    .dashboard-header {
        padding: 1rem 0;
    }
    
    .dashboard-header .max-w-7xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .metric-card {
        padding: 1rem;
    }
    
    .chart-container,
    .metrics-section,
    .alerts-section {
        padding: 1rem;
    }
    
    .chart-placeholder {
        height: 12rem;
    }
    
    .performance-gauge svg {
        width: 3rem;
        height: 3rem;
    }
    
    .chart-period-btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .dashboard-header h1 {
        font-size: 1.5rem;
    }
    
    .dashboard-header p {
        font-size: 0.875rem;
    }
    
    .metric-card {
        padding: 0.75rem;
    }
    
    .metric-card .text-3xl {
        font-size: 1.875rem;
    }
    
    .chart-container,
    .metrics-section,
    .alerts-section {
        padding: 0.75rem;
    }
    
    .chart-placeholder {
        height: 10rem;
    }
    
    .performance-gauge svg {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .alert-item {
        padding: 0.75rem;
    }
}

/* ===== NEW SYSTEMS STYLES ===== */

/* Progress Visualization System */
.progress-dashboard {
    background: linear-gradient(135deg, var(--cream-rich) 0%, var(--sage-pale) 100%);
    min-height: 100vh;
}

.streak-card, .activity-charts, .insights-section, .trends-section, .recommendations-section, .milestones-section {
    backdrop-filter: blur(20px);
    border: 1px solid var(--sage-deep)/10;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.streak-card:hover, .activity-charts:hover, .insights-section:hover, .trends-section:hover, .recommendations-section:hover, .milestones-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.mini-chart {
    transition: all 0.3s ease;
}

.mini-chart:hover {
    transform: scale(1.05);
    background: var(--sage-pale)/50;
}

.insight-card {
    transition: all 0.3s ease;
}

.insight-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.trend-indicator {
    animation: pulse 2s infinite;
}

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

/* Goal System Styles */
.goal-card {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.goal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(122, 155, 122, 0.1), transparent);
    transition: left 0.5s;
}

.goal-card:hover::before {
    left: 100%;
}

.goal-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.milestone-dot {
    transition: all 0.3s ease;
}

.milestone-dot:hover {
    transform: scale(1.2);
}

.template-item {
    transition: all 0.3s ease;
    cursor: pointer;
}

.template-item:hover {
    transform: translateX(4px);
    background: var(--sage-pale)/60;
}

.completed-goal {
    transition: all 0.3s ease;
}

.completed-goal:hover {
    transform: translateX(4px);
    background: linear-gradient(135deg, var(--gold-pale)/40, var(--sage-pale)/40);
}

/* Milestone Celebration Styles */
.milestone-celebration {
    animation: scaleIn 0.5s ease-out, bounce 1s ease-out 0.5s;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
    40% { transform: translateY(-10px) translateX(-50%); }
    60% { transform: translateY(-5px) translateX(-50%); }
}

.goal-completion {
    animation: scaleIn 0.5s ease-out;
}

.confetti {
    animation: confettiFall 3s linear forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(-10px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

/* Audio System Styles */
.audio-control-panel {
    backdrop-filter: blur(20px);
    border: 1px solid var(--sage-deep)/20;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.audio-control-panel:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.sound-btn {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.sound-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(122, 155, 122, 0.1), transparent);
    transition: left 0.5s;
}

.sound-btn:hover::before {
    left: 100%;
}

.sound-btn:hover {
    transform: scale(1.05);
    border-color: var(--sage-deep)/60;
}

.sound-btn.active {
    background: var(--sage-pale)/40;
    border-color: var(--sage-deep)/60;
    transform: scale(1.05);
}

.audio-toggle-btn {
    backdrop-filter: blur(20px);
    border: 1px solid var(--sage-deep)/20;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.audio-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Volume Controls */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-track {
    background: var(--sage-deep)/20;
    height: 4px;
    border-radius: 2px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: var(--sage-deep);
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    background: var(--forest-deep);
}

input[type="range"]::-moz-range-track {
    background: var(--sage-deep)/20;
    height: 4px;
    border-radius: 2px;
    border: none;
}

input[type="range"]::-moz-range-thumb {
    background: var(--sage-deep);
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.2);
    background: var(--forest-deep);
}

/* Weather Integration Styles */
.weather-widget {
    backdrop-filter: blur(20px);
    border: 1px solid var(--sage-deep)/20;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    transition: all 0.3s ease;
    max-width: 320px;
    min-width: 280px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
}

/* Responsive weather widget positioning */
@media (max-width: 767px) {
    .weather-widget {
        max-width: none;
        min-width: auto;
        left: 0.5rem !important;
        right: 0.5rem !important;
        top: 4rem !important; /* Below header on mobile */
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .weather-widget {
        max-width: 300px;
        min-width: 280px;
    }
}

@media (min-width: 1024px) {
    .weather-widget {
        max-width: 320px;
        min-width: 300px;
    }
}

/* Ensure weather widget doesn't overlap with header */
@media (max-width: 639px) {
    .weather-widget {
        top: 5rem !important; /* Extra space below mobile header */
    }
}

.weather-widget:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Minimized weather widget */
.weather-widget.minimized {
    transition: height 0.3s ease, overflow 0.3s ease;
}

/* Activity mode weather widget */
.weather-widget.activity-mode {
    transition: opacity 0.3s ease, transform 0.3s ease, display 0.3s ease;
}

/* Weather toggle button */
#weather-toggle-btn {
    transition: all 0.3s ease;
    cursor: pointer;
}

#weather-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.weather-widget.minimized .temperature-graph,
.weather-widget.minimized .weather-recommendation,
.weather-widget.minimized .weather-actions {
    display: none;
}

.weather-widget.minimized .weather-header {
    margin-bottom: 0;
}

/* Weather widget content responsive adjustments */
.weather-widget .weather-header {
    flex-direction: row;
    align-items: flex-start;
}

.weather-widget .weather-icon {
    font-size: 1.5rem;
}

.weather-widget .weather-temp {
    font-size: 1.125rem;
    line-height: 1.2;
}

.weather-widget .temp-range {
    font-size: 0.75rem;
    margin-top: 0.125rem;
}

.weather-widget .weather-condition {
    font-size: 0.875rem;
}

.weather-widget .weather-description {
    font-size: 0.75rem;
    line-height: 1.3;
}

.weather-widget .graph-container {
    height: 3rem;
}

.weather-widget .weather-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.weather-widget .weather-actions button {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    background: rgba(139, 195, 74, 0.1);
    border: 1px solid rgba(139, 195, 74, 0.2);
    transition: all 0.2s ease;
}

.weather-widget .weather-actions button:hover {
    background: rgba(139, 195, 74, 0.2);
    transform: translateY(-1px);
}

/* Mobile-specific weather widget adjustments */
@media (max-width: 767px) {
    .weather-widget .weather-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.5rem;
    }
    
    .weather-widget .weather-details {
        text-align: center;
    }
    
    .weather-widget .weather-actions {
        justify-content: center;
    }
    
    .weather-widget .weather-actions button {
        flex: 1;
        min-width: 0;
        text-align: center;
    }
    
    .weather-widget .recommendation-text {
        text-align: center;
        font-size: 0.8125rem;
    }
    
    .weather-widget .mood-impact {
        text-align: center;
        font-size: 0.6875rem;
    }
}

/* Tablet-specific adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
    .weather-widget .weather-header {
        gap: 0.75rem;
    }
    
    .weather-widget .weather-actions {
        gap: 0.375rem;
    }
}

.weather-recommendation-message {
    backdrop-filter: blur(20px);
    border: 1px solid var(--sage-deep)/30;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    animation: slideInDown 0.5s ease-out;
}

@keyframes slideInDown {
    from {
        transform: translate(-50%, -100%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

@keyframes slideOutUp {
    from {
        transform: translate(-50%, 0);
        opacity: 1;
    }
    to {
        transform: translate(-50%, -100%);
        opacity: 0;
    }
}

.weather-details-modal .modal-content {
    backdrop-filter: blur(20px);
    border: 1px solid var(--sage-deep)/20;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.weather-item {
    transition: all 0.3s ease;
}

.weather-item:hover {
    transform: scale(1.05);
    background: var(--sage-pale)/30;
    border-radius: 8px;
    padding: 8px;
}

.forecast-item {
    transition: all 0.3s ease;
}

.forecast-item:hover {
    transform: translateX(4px);
    background: var(--sage-pale)/50;
}

/* Goal Creation Modal Styles */
.create-goal-modal .modal-content {
    backdrop-filter: blur(20px);
    border: 1px solid var(--sage-deep)/20;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.goal-form input, .goal-form textarea, .goal-form select {
    transition: all 0.3s ease;
    border: 1px solid var(--sage-deep)/20;
}

.goal-form input:focus, .goal-form textarea:focus, .goal-form select:focus {
    border-color: var(--sage-deep);
    box-shadow: 0 0 0 3px var(--sage-deep)/20;
    transform: translateY(-1px);
}

/* Enhanced Animations for New Systems */
@keyframes scaleIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes gentleBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes subtleGlow {
    0%, 100% { box-shadow: 0 0 20px var(--sage-deep)/20; }
    50% { box-shadow: 0 0 30px var(--sage-deep)/30; }
}

/* Responsive Design for New Systems */
@media (max-width: 768px) {
    .progress-dashboard {
        padding: 1rem;
    }
    
    .goals-grid {
        grid-template-columns: 1fr;
    }
    
    .templates-grid {
        grid-template-columns: 1fr;
    }
    
    .audio-control-panel {
        left: 1rem;
        right: 1rem;
        width: auto;
    }
    
    .weather-widget {
        left: 1rem !important;
        right: 1rem !important;
        width: auto;
        max-width: none;
        top: 5rem !important;
    }
    
    .weather-recommendation-message {
        left: 1rem;
        right: 1rem;
        transform: none;
        text-align: center;
    }
}

/* Accessibility Enhancements for New Systems */
@media (prefers-reduced-motion: reduce) {
    .goal-card::before,
    .sound-btn::before,
    .template-item,
    .completed-goal,
    .weather-widget,
    .mini-chart,
    .insight-card,
    .forecast-item,
    .weather-item {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    
    .confetti,
    .milestone-celebration,
    .goal-completion {
        animation: none !important;
    }
}

@media (prefers-contrast: high) {
    .streak-card,
    .activity-charts,
    .insights-section,
    .trends-section,
    .recommendations-section,
    .milestones-section,
    .goal-card,
    .audio-control-panel,
    .weather-widget {
        border: 2px solid var(--forest-deep);
        background: white;
    }
    
    .mini-chart,
    .insight-card,
    .template-item,
    .completed-goal,
    .forecast-item,
    .weather-item {
        border: 1px solid var(--forest-deep);
        background: white;
    }
}