html, body { height: 100%; margin: 0; padding: 0; }

        /* ===== SPLIT LAYOUT ===== */
        .auth-split {
            display: flex;
            min-height: 100dvh;
        }

        /* ===== LEFT: HERO SLIDER (same as login) ===== */
        .auth-split__hero {
            display: none;
            position: relative;
            flex: 0 0 46%;
            overflow: hidden;
        }

        .hero-slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            background-size: cover;
            background-position: center;
        }

        .hero-slide.active { opacity: 1; }

        .hero-slide-1 {
            background: linear-gradient(145deg, rgba(20,45,120,0.88) 0%, rgba(37,99,235,0.80) 55%, rgba(59,130,246,0.72) 100%);
        }

        .hero-slide-2 {
            background-image: url('../images/auth/hospitalet_city.jpg');
        }

        .hero-slide-2::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(145deg, rgba(15,35,100,0.70) 0%, rgba(20,60,160,0.45) 100%);
        }

        .hero-slide-3 {
            background-image: url('../images/auth/hospitalet_map.jpg');
        }

        .hero-slide-3::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(145deg, rgba(15,35,100,0.65) 0%, rgba(20,60,160,0.35) 100%);
        }

        .hero-grid-overlay {
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
            background-size: 52px 52px;
            z-index: 2;
            pointer-events: none;
        }

        .hero-content {
            position: absolute;
            inset: 0;
            z-index: 3;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 48px 48px 52px;
        }

        .hero-icon {
            width: 58px; height: 58px;
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(8px);
            border: 1.5px solid rgba(255,255,255,0.30);
            border-radius: 16px;
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 24px;
        }

        .hero-icon svg {
            width: 26px; height: 26px;
            stroke: white; stroke-width: 2.2; fill: none;
        }

        .hero-title {
            font-size: clamp(1.6rem, 2.5vw, 2.1rem);
            font-weight: 800;
            color: white;
            line-height: 1.15;
            margin-bottom: 12px;
            text-shadow: 0 2px 12px rgba(0,0,0,0.25);
        }

        .hero-body {
            font-size: 0.9rem;
            color: rgba(255,255,255,0.82);
            line-height: 1.55;
            max-width: 320px;
            text-shadow: 0 1px 8px rgba(0,0,0,0.20);
        }

        .hero-dots { display: flex; gap: 7px; margin-top: 28px; }

        .hero-dot {
            height: 5px; border-radius: 3px;
            background: rgba(255,255,255,0.35);
            cursor: pointer;
            transition: all 0.3s ease;
            width: 20px;
        }

        .hero-dot.active {
            background: rgba(255,255,255,0.92);
            width: 32px;
        }

        /* ===== RIGHT FORM PANEL ===== */
        .auth-split__form {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
            padding: 20px 24px;
            overflow-y: auto;
        }

        .auth-form-box { width: 100%; max-width: 400px; }

        /* Desktop heading */
        .auth-desktop-heading {
            display: none;
            text-align: center;
            margin-bottom: 16px;
        }

        .auth-desktop-heading h1 {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--color-text);
            margin-bottom: 4px;
        }

        .auth-desktop-heading p {
            font-size: 0.8125rem;
            color: var(--color-text-muted);
        }

        /* Mobile brand */
        .auth-mobile-header { text-align: center; margin-bottom: 24px; }

        /* ===== COMPACT inputs for register (no scroll) ===== */
        .input-app-sm {
            padding: 10px 12px 10px 40px !important;
            font-size: 0.875rem !important;
        }

        .input-icon-sm {
            width: 16px !important;
            height: 16px !important;
            left: 12px !important;
        }

        .input-label-sm { font-size: 0.8125rem !important; margin-bottom: 4px; display:block; }

        .gap-compact { margin-bottom: 10px !important; }

        .auth-tabs { margin-bottom: 14px !important; }

        /* Smaller tab pills */
        .auth-tab { padding: 8px 14px !important; font-size: 0.875rem !important; }

        /* Smaller buttons */
        .btn-register { padding: 12px 24px !important; font-size: 0.9375rem !important; }

        /* ===== RESPONSIVE ===== */
        @media (min-width: 768px) {
            html, body { overflow: hidden; }
            .auth-split { height: 100dvh; }
            .auth-split__hero   { display: block; }
            .auth-desktop-heading { display: block; }
            .auth-mobile-header   { display: none; }
        }

        @media (max-width: 767px) {
            .auth-split { flex-direction: column; }
            .auth-split__form { padding: 32px 20px 48px; align-items: flex-start; }
            /* reset compact on mobile so it's readable */
            .input-app-sm { padding: 13px 14px 13px 42px !important; font-size: 0.9375rem !important; }
        }