html, body { height: 100%; margin: 0; }
        body {
            font-family: 'Source Sans 3', sans-serif;
            background: #0d1b2a;
            color: white;
        }
        .login-layout {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            min-height: 100vh;
        }
        @media (max-width: 900px) {
            .login-layout { grid-template-columns: 1fr; }
            .hero-side { display: none; }
        }

        /* Left side: hero image */
        .hero-side {
            position: relative;
            overflow: hidden;
        }
        .hero-image {
            position: absolute;
            inset: 0;
            background-image: url('/images/login-hero.jpg');
            background-size: cover;
            background-position: center;
            transform: scale(1.05);
        }
        .hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg,
                rgba(13, 27, 42, 0.75) 0%,
                rgba(13, 27, 42, 0.55) 40%,
                rgba(243, 73, 19, 0.35) 100%);
        }
        .hero-content {
            position: relative;
            z-index: 2;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 3rem;
            color: white;
        }
        .hero-brand {
            display: flex;
            align-items: center;
            gap: 0.875rem;
        }
        .hero-brand img {
            width: 48px;
            height: 48px;
            filter: drop-shadow(0 4px 12px rgba(243, 73, 19, 0.5));
        }
        .hero-brand-text {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 1.75rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .hero-headline {
            max-width: 520px;
        }
        .hero-tag {
            display: inline-block;
            background: #f34913;
            color: white;
            font-family: 'Bebas Neue', sans-serif;
            font-size: 0.85rem;
            letter-spacing: 0.15em;
            padding: 0.4rem 1rem;
            border-radius: 4px;
            text-transform: uppercase;
            margin-bottom: 1.25rem;
        }
        .hero-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(2.5rem, 5vw, 4rem);
            line-height: 1;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            margin-bottom: 1.25rem;
        }
        .hero-title .accent {
            color: #f34913;
            display: block;
        }
        .hero-sub {
            font-size: 1.05rem;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.8);
            max-width: 460px;
        }
        .hero-footer {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 0.8rem;
            letter-spacing: 0.15em;
            color: rgba(255, 255, 255, 0.5);
            text-transform: uppercase;
            border-left: 3px solid #f34913;
            padding-left: 0.875rem;
        }

        /* Right side: form */
        .form-side {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2.5rem 2rem;
            background:
                radial-gradient(circle at 80% 0%, rgba(243, 73, 19, 0.12) 0%, transparent 50%),
                #0d1b2a;
        }
        .form-card {
            width: 100%;
            max-width: 400px;
        }
        .form-mobile-brand {
            display: none;
            flex-direction: column;
            align-items: center;
            margin-bottom: 2rem;
        }
        @media (max-width: 900px) {
            .form-mobile-brand { display: flex; }
        }
        .form-mobile-brand img {
            width: 64px;
            height: 64px;
            margin-bottom: 0.75rem;
            filter: drop-shadow(0 4px 16px rgba(243, 73, 19, 0.5));
        }
        .form-mobile-brand .name {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 2rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .form-eyebrow {
            font-family: 'Bebas Neue', sans-serif;
            color: #f34913;
            font-size: 0.85rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            margin-bottom: 0.5rem;
        }
        .form-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 2.5rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            line-height: 1;
            margin-bottom: 0.5rem;
        }
        .form-subtitle {
            color: rgba(255, 255, 255, 0.55);
            font-size: 0.95rem;
            margin-bottom: 2rem;
        }
        .login-input {
            width: 100%;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 0.5rem;
            color: white;
            padding: 0.875rem 1rem;
            font-size: 1rem;
            font-family: 'Source Sans 3', sans-serif;
            min-height: 48px;
            transition: all 150ms;
            box-sizing: border-box;
        }
        .login-input::placeholder { color: rgba(255, 255, 255, 0.35); }
        .login-input:focus {
            outline: none;
            border-color: #f34913;
            background: rgba(255, 255, 255, 0.08);
            box-shadow: 0 0 0 3px rgba(243, 73, 19, 0.18);
        }
        .login-label {
            display: block;
            font-family: 'Bebas Neue', sans-serif;
            color: #f34913;
            font-size: 0.85rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            margin-bottom: 0.4rem;
        }
        .login-btn {
            width: 100%;
            background: #f34913;
            color: white;
            border: none;
            border-radius: 0.5rem;
            padding: 0.95rem;
            font-family: 'Bebas Neue', sans-serif;
            font-size: 1.15rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            cursor: pointer;
            min-height: 50px;
            transition: all 200ms;
            box-shadow: 0 4px 16px rgba(243, 73, 19, 0.35);
        }
        .login-btn:hover {
            background: #d93d0e;
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(243, 73, 19, 0.5);
        }
        .alert-error {
            background: rgba(220, 38, 38, 0.12);
            border: 1px solid rgba(220, 38, 38, 0.3);
            border-left: 3px solid #dc2626;
            color: #fca5a5;
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            font-size: 0.875rem;
            margin-bottom: 1.25rem;
        }
        .alert-info {
            background: rgba(34, 197, 94, 0.12);
            border: 1px solid rgba(34, 197, 94, 0.3);
            border-left: 3px solid #22c55e;
            color: #86efac;
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            font-size: 0.875rem;
            margin-bottom: 1.25rem;
        }
        .form-field { margin-bottom: 1.25rem; }
        .form-field-last { margin-bottom: 1.75rem; }