/* ===========================================
   Auth Page - Standalone Styles
   =========================================== */

/* === EMAIL VERIFICATION PAGE === */
.loading-spinner {
    text-align: center;
    padding: 40px 20px;
}

.loading-spinner .spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-light);
    border-top-color: var(--primary-500);
    border-right-color: var(--secondary-500);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 20px;
    box-shadow: 0 2px 8px rgba(48, 110, 140, 0.2);
}

.loading-spinner p {
    color: var(--text-secondary);
    font-size: var(--text-base);
    margin-top: 16px;
}

.success-message,
.error-message {
    text-align: center;
    padding: 40px 20px;
}

.success-message i,
.error-message i {
    font-size: 64px;
    margin-bottom: 20px;
}

.success-message i {
    color: var(--secondary-500);
    filter: drop-shadow(0 2px 4px rgba(140, 191, 86, 0.3));
}

.error-message i {
    color: #ef4444;
    filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.3));
}

.success-message h2,
.error-message h2 {
    font-size: var(--text-2xl);
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.success-message p,
.error-message p {
    color: var(--text-secondary);
    font-size: var(--text-base);
    margin-bottom: 24px;
}

.error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    background: var(--brand-gradient);
    color: white;
    min-width: 120px;
    position: relative;
    overflow: hidden;
}

.auth-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--brand-gradient);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.auth-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(48, 110, 140, 0.3);
}

.auth-btn:hover::before {
    opacity: 1;
}

.auth-btn span {
    position: relative;
    z-index: 1;
}

.auth-btn.secondary {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}

.auth-btn.secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-medium);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* === RESET === */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === CSS VARIABLES === */
:root {
    /* Color System - KidAi Theme */
    --primary-50: #f0f9ff;
    --primary-100: #e0f2fe;
    --primary-500: #306E8C; /* KidAi Blue */
    --primary-600: #24556e; /* KidAi Dark Blue */
    --secondary-500: #8CBF56; /* KidAi Green */
    --secondary-600: #76a346; /* KidAi Dark Green */
    
    --pink-50: #fffbeb;
    --pink-100: #fef3c7;
    --pink-500: #f59e0b; /* KidAi Amber/Yellow (was Pink) */
    --pink-600: #d97706;
    
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #e5e5e5;
    --gray-300: #d4d4d4;
    --gray-400: #a3a3a3;
    --gray-500: #737373;
    --gray-600: #525252;
    --gray-700: #404040;
    --gray-800: #262626;
    --gray-900: #171717;
    
    /* Light Theme */
    --bg-base: #ffffff;
    --bg-elevated: #fafafa;
    --bg-overlay: rgba(255, 255, 255, 0.8);
    --bg-hover: #f5f5f5;
    
    --text-primary: #171717;
    --text-secondary: #525252;
    --text-tertiary: #a3a3a3;
    
    --border-subtle: #f0f0f0;
    --border-light: #e5e5e5;
    --border-medium: #d4d4d4;
    
    --brand-primary: var(--primary-500);
    --brand-secondary: var(--secondary-500);
    --brand-gradient: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-500) 100%);
    --brand-gradient-subtle: linear-gradient(135deg, rgba(48, 110, 140, 0.1) 0%, rgba(140, 191, 86, 0.1) 100%);
    
    --accent: var(--brand-primary);
    --accent-hover: var(--primary-600);
    
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    
    /* Spacing Scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    
    /* Border Radius */
    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Typography */
    --font-body: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Prompt', var(--font-body);
    
    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
}

[data-theme="dark"] {
    --bg-base: #1f1f1f;
    --bg-elevated: #2a2a2a;
    --bg-overlay: rgba(10, 10, 10, 0.8);
    --bg-hover: #2f2f2f;
    
    --text-primary: #fafafa;
    --text-secondary: #a3a3a3;
    --text-tertiary: #737373;
    
    --border-subtle: #2f2f2f;
    --border-light: #3a3a3a;
    --border-medium: #404040;
    
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.7);
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    /* Support for safe areas (notch) */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-base);
    /* Modern Polka Dot Pattern - Same as index.html */
    background-image: radial-gradient(var(--gray-300) 1.5px, transparent 1.5px);
    background-size: 32px 32px;
    background-position: 0 0;
    transition: background-color var(--transition-base), color var(--transition-base);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    position: relative;
    min-height: 100vh;
    /* Support for safe areas */
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

[data-theme="dark"] body {
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1.5px, transparent 1.5px);
}

/* === AUTH PAGE SPECIFIC STYLES === */
.auth-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: var(--bg-base);
    position: relative;
    width: 100%;
    max-width: 100vw;
    /* Support for safe areas */
    padding-left: max(var(--space-4), env(safe-area-inset-left, 0));
    padding-right: max(var(--space-4), env(safe-area-inset-right, 0));
    padding-top: max(var(--space-4), calc(var(--space-4) + env(safe-area-inset-top, 0)));
    /* Add bottom padding to account for fixed footer */
    padding-bottom: max(calc(120px + var(--space-4)), calc(120px + var(--space-4) + env(safe-area-inset-bottom, 0)));
    box-sizing: border-box;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-base);
    margin-bottom: 0; /* Footer is fixed, no need for margin */
    box-sizing: border-box;
    /* Prevent overflow */
    overflow: hidden;
    position: relative;
}

[data-theme="dark"] .auth-card {
    background: rgba(42, 42, 42, 0.95);
    border-color: var(--border-medium);
}
        
        [data-theme="dark"] .auth-card {
            background: var(--bg-elevated-dark);
            border-color: var(--border-dark);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        }
        
        .auth-header {
            text-align: center;
            margin-bottom: var(--space-6);
        }
        
        .auth-back-btn {
            position: fixed;
            top: max(var(--space-4), calc(var(--space-4) + env(safe-area-inset-top, 0)));
            left: max(var(--space-4), calc(var(--space-4) + env(safe-area-inset-left, 0)));
            z-index: 1000;
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-4);
            color: var(--text-secondary);
            text-decoration: none;
            font-size: var(--text-sm);
            border-radius: var(--radius-md);
            transition: all var(--transition-fast);
            background: var(--bg-elevated);
            border: 1px solid var(--border-light);
            box-shadow: var(--shadow-sm);
            backdrop-filter: blur(8px);
            /* Touch-friendly size */
            min-height: 44px;
            min-width: 44px;
        }
        
        .auth-back-btn:hover {
            color: var(--accent);
            background: var(--bg-hover);
            border-color: var(--accent);
            box-shadow: var(--shadow-md);
            transform: translateY(-1px);
        }
        
        .auth-back-btn:active {
            transform: translateY(0) scale(0.98);
        }
        
        .auth-back-btn svg {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
        }
        
        .auth-back-btn span {
            font-weight: 500;
        }
        
        @media (max-width: 480px) {
            .auth-back-btn {
                top: var(--space-3);
                left: var(--space-3);
                padding: var(--space-2) var(--space-3);
            }
            
            .auth-back-btn span {
                display: none;
            }
        }
        
        .auth-logo {
            width: 64px;
            height: 64px;
            margin: 0 auto var(--space-4);
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--brand-gradient-subtle);
            border: 2px solid rgba(48, 110, 140, 0.3);
            box-shadow: 0 4px 12px rgba(48, 110, 140, 0.15);
            transition: all var(--transition-base);
        }
        
        .auth-logo:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 16px rgba(48, 110, 140, 0.25);
        }
        
        .auth-logo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .auth-title {
            font-family: var(--font-heading);
            font-size: var(--text-2xl);
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: var(--space-2);
        }
        
        .auth-subtitle {
            font-size: var(--text-sm);
            color: var(--text-secondary);
        }
        
        .auth-tabs {
            display: flex;
            gap: var(--space-2);
            margin-bottom: var(--space-5);
            border-bottom: 1px solid var(--border-light);
        }
        
        [data-theme="dark"] .auth-tabs {
            border-bottom-color: var(--border-dark);
        }
        
        .auth-tab {
            flex: 1;
            padding: var(--space-3) var(--space-4);
            background: transparent;
            border: none;
            border-bottom: 2px solid transparent;
            color: var(--text-secondary);
            font-size: var(--text-base);
            font-weight: 500;
            cursor: pointer;
            transition: all var(--transition-base);
            font-family: var(--font-body);
        }
        
        .auth-tab:hover {
            color: var(--accent);
        }
        
        .auth-tab.active {
            color: var(--accent);
            border-bottom-color: var(--accent);
        }
        
        .auth-form {
            display: none;
        }
        
        .auth-form.active {
            display: block;
        }
        
        .form-group {
            margin-bottom: var(--space-5);
            position: relative;
        }
        
        .form-label {
            display: block;
            font-size: var(--text-sm);
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: var(--space-2);
        }
        
        .form-input {
            width: 100%;
            padding: var(--space-3) var(--space-4);
            font-size: var(--text-base);
            font-family: var(--font-body);
            color: var(--text-primary);
            background: var(--bg-base);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-md);
            transition: all var(--transition-base);
            outline: none;
            box-sizing: border-box;
            /* Prevent zoom on iOS */
            font-size: 16px;
            /* Touch-friendly */
            min-height: 48px;
            display: block;
            position: relative;
            z-index: 1;
        }
        
        [data-theme="dark"] .form-input {
            background: var(--bg-base-dark);
            border-color: var(--border-dark);
            color: var(--text-primary-dark);
        }
        
        .form-input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(48, 110, 140, 0.1);
        }
        
        /* Placeholder text - visible with darker color */
        .form-input::placeholder {
            color: var(--text-secondary) !important;
            opacity: 0.7 !important;
        }
        
        .form-input::-webkit-input-placeholder {
            color: var(--text-secondary) !important;
            opacity: 0.7 !important;
        }
        
        .form-input::-moz-placeholder {
            color: var(--text-secondary) !important;
            opacity: 0.7 !important;
        }
        
        .form-input:-ms-input-placeholder {
            color: var(--text-secondary) !important;
            opacity: 0.7 !important;
        }
        
        .form-input:-moz-placeholder {
            color: var(--text-secondary) !important;
            opacity: 0.7 !important;
        }
        
        [data-theme="dark"] .form-input::placeholder {
            color: var(--text-secondary) !important;
            opacity: 0.8 !important;
        }
        
        [data-theme="dark"] .form-input::-webkit-input-placeholder {
            color: var(--text-secondary) !important;
            opacity: 0.8 !important;
        }
        
        [data-theme="dark"] .form-input::-moz-placeholder {
            color: var(--text-secondary) !important;
            opacity: 0.8 !important;
        }
        
        /* Hide browser validation tooltips and messages */
        .form-input:invalid {
            box-shadow: none;
        }
        
        .form-input:invalid:not(:focus):not(:placeholder-shown) {
            border-color: var(--border-light);
        }
        
        /* Hide validation message bubble */
        .form-input::-webkit-validation-bubble-message {
            display: none !important;
        }
        
        /* Prevent browser validation UI */
        .form-input:required:invalid {
            box-shadow: none;
        }
        
        /* Form error styles removed - using toast notifications instead */
        .form-error {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        
        .form-actions {
            margin-top: var(--space-6);
            margin-bottom: var(--space-4);
        }
        
        .btn-auth {
            width: 100%;
            padding: var(--space-4) var(--space-5);
            font-size: var(--text-base);
            font-weight: 500;
            font-family: var(--font-body);
            border: none;
            border-radius: var(--radius-lg);
            cursor: pointer;
            transition: all var(--transition-base);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            /* Touch-friendly size */
            min-height: 52px;
            box-sizing: border-box;
            position: relative;
            z-index: 1;
        }
        
        .btn-auth-primary {
            background: var(--brand-gradient);
            color: white;
            position: relative;
            overflow: hidden;
        }
        
        .btn-auth-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, var(--primary-600) 0%, var(--secondary-600) 100%);
            opacity: 0;
            transition: opacity var(--transition-base);
        }
        
        .btn-auth-primary:hover:not(:disabled)::before {
            opacity: 1;
        }
        
        .btn-auth-primary:hover:not(:disabled) {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(48, 110, 140, 0.3);
        }
        
        .btn-auth-primary span,
        .btn-auth-primary i {
            position: relative;
            z-index: 1;
        }
        
        .btn-auth-primary:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        
        .btn-auth-secondary {
            background: var(--bg-hover);
            color: var(--text-primary);
            border: 1px solid var(--border-light);
        }
        
        [data-theme="dark"] .btn-auth-secondary {
            background: var(--bg-hover-dark);
            border-color: var(--border-dark);
        }
        
        .btn-auth-secondary:hover {
            background: var(--bg-hover);
            transform: translateY(-1px);
        }
        
        .auth-divider {
            display: flex;
            align-items: center;
            margin: var(--space-5) 0;
            color: var(--text-tertiary);
            font-size: var(--text-sm);
        }
        
        .auth-divider::before,
        .auth-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--border-light);
        }
        
        [data-theme="dark"] .auth-divider::before,
        [data-theme="dark"] .auth-divider::after {
            background: var(--border-dark);
        }
        
        .auth-divider span {
            padding: 0 var(--space-3);
        }
        
        .auth-footer {
            text-align: center;
            margin-top: var(--space-6);
            padding-top: var(--space-4);
            border-top: 1px solid var(--border-subtle);
            font-size: var(--text-sm);
            color: var(--text-secondary);
        }
        
        .auth-footer a {
            color: var(--accent);
            text-decoration: none;
            font-weight: 500;
            display: inline-block;
            margin: 0 var(--space-2);
        }
        
        .auth-footer a:hover {
            text-decoration: underline;
        }
        
        .loading-spinner-small {
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .back-link {
            position: absolute;
            top: var(--space-4);
            left: var(--space-4);
            display: flex;
            align-items: center;
            gap: var(--space-2);
            color: var(--text-secondary);
            text-decoration: none;
            font-size: var(--text-sm);
            transition: all var(--transition-base);
        }
        
        .back-link:hover {
            color: var(--accent);
        }
        
        /* Modal Styles */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 10000;
            display: none;
            align-items: center;
            justify-content: center;
        }
        
        .modal.active {
            display: flex;
        }
        
        .modal-backdrop {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px);
        }
        
        .modal-dialog {
            position: relative;
            z-index: 1;
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            background: var(--bg-elevated);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-xl);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            margin: var(--space-4);
            /* Support for safe areas */
            max-height: calc(90vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0) - var(--space-8));
            box-sizing: border-box;
        }
        
        [data-theme="dark"] .modal-dialog {
            background: var(--bg-elevated);
        }
        
        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-5);
            border-bottom: 1px solid var(--border-light);
        }
        
        [data-theme="dark"] .modal-header {
            border-bottom-color: var(--border-dark);
        }
        
        .modal-title {
            font-family: var(--font-heading);
            font-size: var(--text-xl);
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
        }
        
        .modal-close {
            background: transparent;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            padding: var(--space-2);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all var(--transition-base);
        }
        
        .modal-close:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }
        
        .modal-body {
            padding: var(--space-5);
            overflow-y: auto;
            flex: 1;
        }
        
        .modal-description {
            font-size: var(--text-sm);
            color: var(--text-secondary);
            margin-bottom: var(--space-4);
            line-height: 1.6;
        }
        
        .auth-footer-section {
            position: fixed !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            text-align: center;
            padding: var(--space-5) var(--space-4) var(--space-6) !important;
            border-top: 1px solid var(--border-light);
            background: var(--bg-base) !important;
            z-index: 10;
            width: 100% !important;
            max-width: 100vw !important;
            /* Support for safe areas */
            padding-bottom: max(var(--space-6), calc(var(--space-6) + env(safe-area-inset-bottom, 0))) !important;
            padding-left: max(var(--space-4), calc(var(--space-4) + env(safe-area-inset-left, 0))) !important;
            padding-right: max(var(--space-4), calc(var(--space-4) + env(safe-area-inset-right, 0))) !important;
            box-sizing: border-box !important;
            /* Prevent any movement */
            transform: translateZ(0);
            -webkit-transform: translateZ(0);
            will-change: auto;
            /* Ensure it stays at bottom */
            margin: 0 !important;
            top: auto !important;
        }
        
        [data-theme="dark"] .auth-footer-section {
            border-top-color: var(--border-dark);
            background: var(--bg-base-dark);
        }
        
        .auth-footer-links {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: var(--space-2);
            margin-bottom: var(--space-3);
        }
        
        .auth-footer-link {
            color: var(--text-secondary);
            text-decoration: none;
            font-size: var(--text-sm);
            transition: all var(--transition-base);
            padding: var(--space-1) var(--space-2);
            border-radius: var(--radius-sm);
        }
        
        .auth-footer-link:hover {
            color: var(--accent);
            background: rgba(48, 110, 140, 0.1);
        }
        
        .auth-footer-separator {
            color: var(--text-tertiary);
            font-size: var(--text-sm);
        }
        
        .auth-footer-copyright {
            font-size: var(--text-xs);
            color: var(--text-tertiary);
            margin: 0;
        }
        
        .modal-content-text {
            color: var(--text-primary);
            line-height: 1.8;
        }
        
        .modal-content-text h3 {
            font-family: var(--font-heading);
            font-size: var(--text-lg);
            font-weight: 600;
            color: var(--text-primary);
            margin-top: var(--space-5);
            margin-bottom: var(--space-2);
        }
        
        .modal-content-text h3:first-child {
            margin-top: 0;
        }
        
        .modal-content-text p {
            margin-bottom: var(--space-4);
            color: var(--text-secondary);
        }
        
        .modal-content-text ul {
            margin-left: var(--space-5);
            margin-bottom: var(--space-4);
            color: var(--text-secondary);
        }
        
        .modal-content-text li {
            margin-bottom: var(--space-2);
        }
        
        .form-checkbox-label {
            display: flex;
            align-items: flex-start;
            gap: var(--space-2);
            cursor: pointer;
            font-size: var(--text-sm);
            color: var(--text-secondary);
            line-height: 1.6;
        }
        
        .form-checkbox {
            width: 18px;
            height: 18px;
            margin-top: 2px;
            cursor: pointer;
            flex-shrink: 0;
            accent-color: var(--accent);
        }
        
        .form-checkbox-text {
            flex: 1;
        }
        
        .form-checkbox-link {
            color: var(--accent);
            text-decoration: none;
            font-weight: 500;
            transition: all var(--transition-base);
        }
        
        .form-checkbox-link:hover {
            text-decoration: underline;
        }
        
        /* Toast Notification */
        .toast-container {
            position: fixed;
            top: max(var(--space-4), calc(var(--space-4) + env(safe-area-inset-top, 0)));
            right: max(var(--space-4), calc(var(--space-4) + env(safe-area-inset-right, 0)));
            z-index: 10000;
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
            max-width: 400px;
            width: auto;
            margin: 0;
            margin-left: auto;
            pointer-events: none;
        }
        
        .toast-container > * {
            pointer-events: auto;
        }
        
        .toast {
            background: var(--bg-elevated);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-lg);
            padding: var(--space-4);
            box-shadow: var(--shadow-lg);
            display: flex;
            align-items: center;
            gap: var(--space-3);
            animation: toastSlideIn 0.3s ease-out;
            min-width: 280px;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        
        [data-theme="dark"] .toast {
            background: var(--bg-elevated-dark);
            border-color: var(--border-dark);
        }
        
        @keyframes toastSlideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        .toast-icon {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
        }
        
        .toast-content {
            flex: 1;
        }
        
        .toast-message {
            font-size: var(--text-sm);
            color: var(--text-primary);
            font-weight: 500;
        }
        
        .toast-close {
            background: transparent;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            padding: var(--space-1);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all var(--transition-base);
        }
        
        .toast-close:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }
        
        /* Password Strength Bar */
        .password-strength-bar {
            width: 100%;
            height: 4px;
            background: var(--border-light);
            border-radius: var(--radius-full);
            margin-top: 0;
            margin-bottom: 0;
            overflow: hidden;
            display: none;
        }
        
        .password-strength-bar.has-content {
            display: block;
            margin-top: var(--space-2);
        }
        
        [data-theme="dark"] .password-strength-bar {
            background: var(--border-dark);
        }
        
        .password-strength-fill {
            height: 100%;
            width: 0%;
            transition: all var(--transition-base);
            border-radius: var(--radius-full);
        }
        
        .password-strength-fill.weak {
            width: 33%;
            background: #ef4444;
        }
        
        .password-strength-fill.medium {
            width: 66%;
            background: #f59e0b;
        }
        
        .password-strength-fill.strong {
            width: 100%;
            background: #10b981;
        }
        
        .password-strength-text {
            font-size: var(--text-xs);
            color: var(--text-tertiary);
            margin-top: var(--space-1);
            margin-bottom: 0;
            min-height: 0;
            height: 0;
            overflow: hidden;
            transition: min-height var(--transition-base), margin-top var(--transition-base);
        }
        
        .password-strength-text.has-content {
            min-height: 16px;
            height: auto;
            margin-top: var(--space-1);
        }
        
        .password-strength-text.weak {
            color: #ef4444;
        }
        
        .password-strength-text.medium {
            color: #f59e0b;
        }
        
        .password-strength-text.strong {
            color: #10b981;
        }
        
        /* Force hide any session timer bar elements */
        .session-timer-bar,
        #sessionTimerBar,
        [id*="sessionTimer"],
        [class*="session-timer"] {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            height: 0 !important;
            width: 0 !important;
            max-height: 0 !important;
            max-width: 0 !important;
            overflow: hidden !important;
            position: absolute !important;
            left: -9999px !important;
            top: -9999px !important;
            z-index: -9999 !important;
            pointer-events: none !important;
        }
        
        /* Mobile Responsive */
        @media (max-width: 768px) {
            html {
                font-size: 15px;
            }
            
            .auth-container {
                padding: var(--space-3);
                padding-top: max(calc(60px + var(--space-3)), calc(60px + var(--space-3) + env(safe-area-inset-top, 0)));
                padding-bottom: max(calc(100px + var(--space-3)), calc(100px + var(--space-3) + env(safe-area-inset-bottom, 0)));
            }
            
            .auth-card {
                padding: var(--space-5);
                max-width: 100%;
                margin-bottom: 80px;
            }
            
            .auth-title {
                font-size: clamp(var(--text-lg), 4vw, var(--text-2xl));
            }
            
            .auth-subtitle {
                font-size: var(--text-xs);
            }
            
            .auth-tab {
                padding: var(--space-2) var(--space-3);
                font-size: var(--text-sm);
            }
            
            .form-input {
                padding: var(--space-3);
                font-size: 16px; /* Prevent zoom on iOS */
            }
            
            .btn-auth {
                padding: var(--space-4);
                font-size: var(--text-base);
                min-height: 48px;
            }
            
            .modal-dialog {
                width: calc(100% - var(--space-4));
                margin: var(--space-2);
                max-width: calc(100vw - var(--space-4) - env(safe-area-inset-left, 0) - env(safe-area-inset-right, 0));
            }
            
            .modal-header,
            .modal-body {
                padding: var(--space-4);
            }
            
            .toast-container {
                left: var(--space-2);
                right: var(--space-2);
                width: calc(100% - var(--space-4));
                max-width: calc(100vw - var(--space-4) - env(safe-area-inset-left, 0) - env(safe-area-inset-right, 0));
            }
            
            .toast {
                min-width: auto;
                width: 100%;
            }
        }
        
        @media (max-width: 480px) {
            html {
                font-size: 14px;
            }
            
            .auth-container {
                padding: var(--space-2);
                padding-top: max(calc(50px + var(--space-2)), calc(50px + var(--space-2) + env(safe-area-inset-top, 0)));
            }
            
            .auth-card {
                padding: var(--space-4);
                border-radius: var(--radius-lg);
                margin-bottom: 70px;
            }
            
            .auth-back-btn {
                top: max(var(--space-2), calc(var(--space-2) + env(safe-area-inset-top, 0)));
                left: max(var(--space-2), calc(var(--space-2) + env(safe-area-inset-left, 0)));
                padding: var(--space-2);
                min-width: 40px;
                width: 40px;
                height: 40px;
            }
            
            .auth-back-btn span {
                display: none;
            }
            
            .auth-logo {
                width: 56px;
                height: 56px;
                margin-bottom: var(--space-3);
            }
            
            .auth-title {
                font-size: var(--text-xl);
                margin-bottom: var(--space-1);
            }
            
            .auth-subtitle {
                font-size: var(--text-xs);
            }
            
            .auth-tabs {
                margin-bottom: var(--space-4);
            }
            
            .auth-tab {
                padding: var(--space-2);
                font-size: var(--text-xs);
            }
            
            .form-group {
                margin-bottom: var(--space-3);
            }
            
            .form-label {
                font-size: var(--text-xs);
                margin-bottom: var(--space-1);
            }
            
            .form-input {
                padding: var(--space-2) var(--space-3);
                font-size: 16px; /* Prevent zoom on iOS */
                min-height: 44px;
            }
            
            .btn-auth {
                padding: var(--space-3);
                font-size: var(--text-sm);
                min-height: 44px;
            }
            
            .form-checkbox-label {
                font-size: var(--text-xs);
            }
            
            .form-checkbox {
                width: 16px;
                height: 16px;
            }
            
            .auth-footer-section {
                padding: var(--space-3);
                padding-bottom: max(var(--space-4), calc(var(--space-4) + env(safe-area-inset-bottom, 0)));
            }
            
            .auth-footer-link {
                font-size: var(--text-xs);
                padding: var(--space-1);
            }
            
            .auth-footer-copyright {
                font-size: 0.7rem;
            }
            
            .modal-dialog {
                width: calc(100% - var(--space-2));
                margin: var(--space-2);
                border-radius: var(--radius-lg);
            }
            
            .modal-header {
                padding: var(--space-3);
            }
            
            .modal-title {
                font-size: var(--text-lg);
            }
            
            .modal-body {
                padding: var(--space-3);
            }
            
            .toast-container {
                top: max(var(--space-2), calc(var(--space-2) + env(safe-area-inset-top, 0)));
                right: var(--space-2);
                left: auto;
                width: calc(100% - var(--space-4));
                max-width: 400px;
            }
        }
        
        @media (max-width: 360px) {
            html {
                font-size: 13px;
            }
            
            .auth-card {
                padding: var(--space-3);
            }
            
            .auth-title {
                font-size: var(--text-lg);
            }
        }
        
        /* Landscape Orientation */
        @media (max-height: 500px) and (orientation: landscape) {
            .auth-container {
                padding-top: max(var(--space-2), calc(var(--space-2) + env(safe-area-inset-top, 0)));
                padding-bottom: max(var(--space-2), calc(var(--space-2) + env(safe-area-inset-bottom, 0)));
            }
            
            .auth-card {
                margin-bottom: 60px;
                padding: var(--space-4);
            }
            
            .auth-logo {
                width: 48px;
                height: 48px;
                margin-bottom: var(--space-2);
            }
            
            .auth-title {
                font-size: var(--text-lg);
                margin-bottom: var(--space-1);
            }
            
            .auth-subtitle {
                display: none;
            }
            
            .form-group {
                margin-bottom: var(--space-2);
            }
        }

/* === reCAPTCHA v3 Badge - Hidden === */
/* Hide reCAPTCHA badge (Terms of Service allows this with proper notice) */
.grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    display: none !important;
}

/* Alternative selector if the above doesn't work */
div[data-sitekey] + div.grecaptcha-badge,
iframe[src*="recaptcha"] {
    visibility: hidden !important;
    opacity: 0 !important;
    display: none !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Hide any reCAPTCHA elements */
.grecaptcha-badge,
.grecaptcha-logo,
iframe[title*="reCAPTCHA"] {
    display: none !important;
    visibility: hidden !important;
}

/* === RESET PASSWORD PAGE === */
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper input {
    padding-right: 48px;
}

.toggle-password {
    position: absolute;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
    z-index: 2;
}

.toggle-password:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.form-hint {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
    margin-bottom: 0;
}

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