@layer components.header {
    .header {
        position: fixed;
        inset-block-start: 0;
        inset-inline: 0;
        block-size: var(--header-height);
        background: var(--bg-overlay);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        border-block-end: 1px solid var(--border-muted);
        z-index: var(--z-modal);

        & .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            block-size: 100%;
            padding-inline: var(--space-6);
            max-inline-size: var(--content-max-width);
            margin-inline: auto;
            position: relative;
        }

        & .logo {
            display: flex;
            align-items: center;
            gap: var(--space-3);

            & .logo-icon {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                animation: subtle-rotate 60s linear infinite;
                display: block;
                background: white;
                padding: 2px;
            }
            
            @keyframes subtle-rotate {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
            }

            & h1 {
                font-family: var(--font-display);
                font-size: var(--text-xl);
                font-weight: 900;
                color: var(--text-primary);
                margin: 0;
                letter-spacing: 0.02em;
                text-transform: uppercase;
            }
        }

        & .nav {
            display: flex;
            gap: var(--space-1);
            align-items: center;

            & .nav-link {
                padding: var(--space-2) var(--space-3);
                color: var(--text-tertiary);
                font-size: var(--text-sm);
                font-weight: 500;
                text-decoration: none;
                border-radius: var(--radius-md);
                transition: all var(--transition-fast);
                position: relative;

                &:hover {
                    color: var(--text-primary);
                    background: var(--gray-100);
                }

                &.active {
                    color: var(--text-primary);
                    background: var(--primary-light);
                    
                    &:hover {
                        background: light-dark(
                            oklch(94% 0.05 255),
                            oklch(28% 0.06 255)
                        );
                    }
                }
            }
        }
    }
    
    /* Language Selector */
    .language-selector {
        padding: var(--space-2) var(--space-3);
        margin-inline-start: var(--space-3);
        border-radius: var(--radius-md);
        background: var(--bg-secondary);
        border: 1px solid var(--border-default);
        color: var(--text-primary);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        cursor: pointer;
        transition: all var(--transition-fast);
        min-inline-size: 4.5rem;

        &:hover {
            background: var(--bg-tertiary);
            border-color: var(--border-strong);
        }

        &:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px light-dark(
                oklch(56% 0.21 255 / 0.1),
                oklch(68% 0.19 255 / 0.1)
            );
        }
    }
    
    /* Theme Toggle */
    .theme-toggle {
        inline-size: auto;
        min-inline-size: var(--space-12);
        block-size: var(--space-9);
        margin-inline-start: var(--space-2);
        padding-inline: var(--space-3);
        border-radius: var(--radius-full);
        background: var(--bg-secondary);
        border: 2px solid var(--border-default);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-1);
        cursor: pointer;
        transition: all var(--transition-fast);
        position: relative;
        overflow: hidden;

        &:hover {
            background: var(--bg-tertiary);
            border-color: var(--border-strong);
        }
        
        &:active {
            transform: scale(0.95);
        }

        & .theme-icon-auto,
        & .theme-icon-light,
        & .theme-icon-dark {
            font-size: 1rem;
            transition: all var(--transition-base);
            opacity: 0.4;
            transform: scale(0.9);
        }
        
        /* Theme indicator background */
        & .theme-indicator {
            position: absolute;
            inline-size: 1.75rem;
            block-size: 1.75rem;
            background: var(--primary-color);
            border-radius: var(--radius-full);
            transition: all var(--transition-base);
            z-index: -1;
            opacity: 0.15;
        }
    }
    
    /* Auto mode active */
    :root[data-theme="auto"] .theme-toggle {
        & .theme-icon-auto {
            opacity: 1;
            transform: scale(1);
        }
        
        & .theme-indicator {
            inset-inline-start: 0.25rem;
        }
    }
    
    /* Light mode active */
    :root[data-theme="light"] .theme-toggle {
        & .theme-icon-light {
            opacity: 1;
            transform: scale(1);
        }
        
        & .theme-indicator {
            inset-inline-start: 50%;
            transform: translateX(-50%);
        }
    }
    
    /* Dark mode active */
    :root[data-theme="dark"] .theme-toggle {
        & .theme-icon-dark {
            opacity: 1;
            transform: scale(1);
        }
        
        & .theme-indicator {
            inset-inline-end: 0.25rem;
            inset-inline-start: auto;
        }
    }
    
    /* Mobile Install Button */
    .mobile-install-btn {
        display: none;
        margin-inline-end: var(--space-2);
    }
    
    /* Mobile Login Button */
    .mobile-login-btn {
        display: none;
        margin-inline-end: var(--space-2);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-md);
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        font-weight: 600;
        font-size: 0.875rem;
        border: none;
        cursor: pointer;
        transition: all var(--transition-fast);
        min-inline-size: fit-content;
        white-space: nowrap;
        box-shadow: 0 2px 4px rgba(102, 126, 234, 0.15);
        
        &:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
            background: linear-gradient(135deg, #7c8ff0 0%, #8c5bb5 100%);
        }
        
        &:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(102, 126, 234, 0.15);
        }
    }
    
    /* Hamburger Menu Button */
    .hamburger-menu {
        display: none;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        inline-size: var(--space-10);
        block-size: var(--space-10);
        padding: 0;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: calc(var(--z-modal) + 10);
        
        & .hamburger-line {
            display: block;
            inline-size: 24px;
            block-size: 2px;
            background: var(--text-primary);
            border-radius: var(--radius-full);
            transition: all var(--transition-base);
            transform-origin: center;
        }
        
        /* Animate to X when active */
        &.active {
            & .hamburger-line:nth-child(1) {
                transform: translateY(6px) rotate(45deg);
            }
            
            & .hamburger-line:nth-child(2) {
                opacity: 0;
                transform: scaleX(0);
            }
            
            & .hamburger-line:nth-child(3) {
                transform: translateY(-6px) rotate(-45deg);
            }
        }
        
        &:hover .hamburger-line {
            background: var(--primary-color);
        }
    }
    
    /* Mobile Navigation Styles */
    @media (max-width: 900px) {
        .logo h1 {
            font-size: var(--text-base) !important;
        }
        .logo {
            zoom:0.8;
        }
        
        .header {
            & .container {
                padding-inline: var(--space-4);
            }
            
            & .mobile-install-btn {
                display: block;
            }
            
            & .mobile-login-btn {
                display: block;
            }
            
            & .hamburger-menu {
                display: flex;
            }
            
            & .nav {
                position: fixed;
                inset-block-start: var(--header-height);
                inset-inline-end: 0;
                inline-size: min(320px, 85vw);
                block-size: calc(100vh - var(--header-height));
                background: var(--bg-elevated);
                border-inline-start: 1px solid var(--border-default);
                
                /* Hide desktop install button in nav on mobile */
                & pwa-install-button {
                    display: none;
                }
                flex-direction: column;
                gap: 0;
                padding: var(--space-4);
                transition: transform var(--transition-base);
                overflow-y: auto;
                box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
                
                /* Direction-specific transforms for mobile menu slide */
                transform: translateX(100%);
                
                :root[dir="rtl"] & {
                    transform: translateX(-100%);
                    
                    &.active {
                        transform: translateX(0);
                    }
                }
                
                &.active {
                    transform: translateX(0);
                }
                
                & .nav-link {
                    display: block !important;
                    inline-size: 100%;
                    padding: var(--space-3) var(--space-4);
                    text-align: start;
                    border-radius: var(--radius-md);
                    margin-block-end: var(--space-2);
                    
                    &:hover {
                        background: var(--bg-tertiary);
                    }
                    
                    &.active {
                        background: var(--primary-light);
                    }
                }
                
                & .language-selector {
                    inline-size: 100%;
                    margin-inline-start: 0;
                    margin-block-start: var(--space-3);
                    padding: var(--space-3) var(--space-4);
                }
                
                & .theme-toggle {
                    inline-size: 100%;
                    block-size: var(--space-12);
                    margin-inline-start: 0;
                    margin-block-start: var(--space-3);
                    justify-content: center;
                    gap: var(--space-4);
                    
                    & .theme-icon-auto,
                    & .theme-icon-light,
                    & .theme-icon-dark {
                        font-size: 1.25rem;
                    }
                }
                
                & .login-btn {
                    display: none !important; /* Hide login button on mobile */
                }
            }
        }
        
        /* Mobile overlay when menu is open */
        .header::after {
            content: '';
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            opacity: 0;
            visibility: hidden;
            transition: opacity var(--transition-base), visibility var(--transition-base);
            z-index: calc(var(--z-modal) - 1);
        }
        
        .header.menu-open::after {
            opacity: 1;
            visibility: visible;
        }
    }
    @media (max-width: 400px) {
        .logo {
            zoom:0.65;
        }
    }
    /* Tablet adjustments */
    @media (min-width: 769px) and (max-width: 1024px) {
        .header {
            & .nav {
                gap: var(--space-0-5);
                
                & .nav-link {
                    padding: var(--space-2) var(--space-2-5);
                    font-size: var(--text-sm);
                }
            }
            
            & .language-selector {
                min-inline-size: 3.5rem;
                padding: var(--space-2) var(--space-2);
                font-size: var(--text-xs);
            }
            
            & .login-btn {
                padding: var(--space-2) var(--space-3);
                font-size: var(--text-sm);
            }
        }
    }
    
}