/* ===== LOGIN PAGE STYLES ===== */

        /* Center the login card on the page */
        .login-wrapper {
            position: relative;
            min-height: 80vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem 1rem;
        }

        /* Golden-hour soldier silhouette hero — desktop only */
        @media (min-width: 900px) {
            .login-wrapper {
                background-image: url('/images/login-hero.jpg');
                background-size: cover;
                background-position: center 35%;
                background-repeat: no-repeat;
                min-height: calc(100vh - 140px);
            }
            .login-wrapper::before {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(90deg, rgba(10,14,20,0.72) 0%, rgba(10,14,20,0.45) 50%, rgba(10,14,20,0.15) 100%);
                pointer-events: none;
            }
            .login-wrapper .login-card {
                position: relative;
                z-index: 1;
                margin-left: 4vw;
                margin-right: auto;
            }
        }
        /* Keep dark-mode contrast safe */
        [data-theme="dark"] .login-wrapper::before {
            background: linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.2) 100%);
        }

        /* The card that holds the form */
        .login-card {
            background: var(--color-card);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-card);
            width: 100%;
            max-width: 440px;
            padding: 2.5rem 2rem;
        }

        /* Value proposition above the form */
        .login-header {
            text-align: center;
            margin-bottom: 2rem;
        }

        .login-logo {
            display: block;
            margin: 0 auto 1rem;
            width: 72px;
            height: 72px;
            border-radius: 16px;
        }

        .login-header h2 span { color: #F97316; }
        [data-theme="dark"] .login-header h2 span { color: #FB923C; }

        .login-header h2 {
            font-family: var(--font-heading);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-primary);
            margin: 0 0 0.5rem;
            line-height: 1.3;
        }

        [data-theme="dark"] .login-header h2 {
            color: var(--color-text);
        }

        .login-header p {
            font-family: var(--font-body);
            font-size: 0.95rem;
            color: var(--color-text-light);
            margin: 0;
            line-height: 1.5;
        }

        /* Tab switcher: "Sign In" / "Create Account" */
        .auth-tabs {
            display: flex;
            border-bottom: 2px solid var(--color-border);
            margin-bottom: 1.75rem;
        }

        .auth-tab {
            flex: 1;
            background: none;
            border: none;
            padding: 0.75rem 0;
            font-family: var(--font-body);
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--color-text-light);
            cursor: pointer;
            border-bottom: 3px solid transparent;
            margin-bottom: -2px;
            transition: color 0.2s, border-color 0.2s;
        }

        .auth-tab.active {
            color: var(--color-accent);
            border-bottom-color: var(--color-accent);
        }

        /* Form panels — only the active one is shown */
        .auth-panel {
            display: none;
        }

        .auth-panel.active {
            display: block;
        }

        /* Label + input grouping */
        .form-group {
            margin-bottom: 1.25rem;
        }

        .form-group label {
            display: block;
            font-family: var(--font-body);
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--color-text);
            margin-bottom: 0.4rem;
        }

        .form-group input {
            width: 100%;
            padding: 0.7rem 0.9rem;
            font-family: var(--font-body);
            font-size: 1rem;
            background: var(--color-bg);
            color: var(--color-text);
            border: 1.5px solid var(--color-border);
            border-radius: var(--radius-sm);
            box-sizing: border-box;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .form-group input:focus {
            outline: none;
            border-color: var(--color-accent);
            box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.15);
        }

        /* Primary action button */
        .btn-auth-primary {
            width: 100%;
            padding: 0.8rem 1rem;
            background: var(--color-accent);
            color: #ffffff;
            border: none;
            border-radius: var(--radius-sm);
            font-family: var(--font-body);
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.2s, box-shadow 0.2s;
            margin-top: 0.25rem;
        }

        .btn-auth-primary:hover {
            background: var(--color-accent-hover);
            box-shadow: var(--shadow-hover);
        }

        .btn-auth-primary:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        /* Divider between email form and Google button */
        .auth-divider {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin: 1.25rem 0;
            color: var(--color-text-light);
            font-family: var(--font-body);
            font-size: 0.85rem;
        }

        .auth-divider::before,
        .auth-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--color-border);
        }

        /* Google OAuth button */
        .btn-google {
            width: 100%;
            padding: 0.75rem 1rem;
            background: var(--color-card);
            color: var(--color-text);
            border: 1.5px solid var(--color-border);
            border-radius: var(--radius-sm);
            font-family: var(--font-body);
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
        }

        .btn-google:hover {
            background: var(--color-muted);
            border-color: var(--color-text-light);
            box-shadow: var(--shadow-card);
        }

        .google-logo {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
        }

        /* Feedback message (success / error) */
        .auth-message {
            margin-top: 1rem;
            padding: 0.75rem 1rem;
            border-radius: var(--radius-sm);
            font-family: var(--font-body);
            font-size: 0.9rem;
            display: none;
        }

        .auth-message.success {
            background: #D1FAE5;
            color: #065F46;
            border: 1px solid #6EE7B7;
            display: block;
        }

        .auth-message.error {
            background: #FEE2E2;
            color: #991B1B;
            border: 1px solid #FCA5A5;
            display: block;
        }

        [data-theme="dark"] .auth-message.success {
            background: #064E3B;
            color: #A7F3D0;
            border-color: #059669;
        }

        [data-theme="dark"] .auth-message.error {
            background: #7F1D1D;
            color: #FECACA;
            border-color: #EF4444;
        }

        /* Legal fine-print below the form */
        .auth-legal {
            text-align: center;
            font-family: var(--font-body);
            font-size: 0.8rem;
            color: var(--color-text-light);
            margin-top: 1.5rem;
            line-height: 1.5;
        }

        .auth-legal a {
            color: var(--color-accent);
            text-decoration: none;
        }

        .auth-legal a:hover {
            text-decoration: underline;
        }

        /* "Already have an account? Sign in" switch link */
        .auth-switch {
            text-align: center;
            font-family: var(--font-body);
            font-size: 0.875rem;
            color: var(--color-text-light);
            margin-top: 1.25rem;
        }

        .auth-switch button {
            background: none;
            border: none;
            color: var(--color-accent);
            font-family: var(--font-body);
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            padding: 0;
            text-decoration: underline;
        }

        /* Guest link below the card */
        .auth-guest {
            text-align: center;
            margin-top: 1.25rem;
            font-family: var(--font-body);
            font-size: 0.875rem;
            color: var(--color-text-light);
        }

        .auth-guest a {
            color: var(--color-text-light);
            text-decoration: underline;
        }

        .auth-guest a:hover {
            color: var(--color-text);
        }

        /* Spinner shown inside submit button while waiting */
        .btn-spinner {
            display: inline-block;
            width: 14px;
            height: 14px;
            border: 2px solid rgba(255,255,255,0.4);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin 0.7s linear infinite;
            vertical-align: middle;
            margin-right: 0.4rem;
        }

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

        /* Responsive */
        @media (max-width: 480px) {
            .login-card {
                padding: 2rem 1.25rem;
            }
        }