/* ══════════════════════════════════════════════════════
           BASE
        ══════════════════════════════════════════════════════ */

          body {
            font-family: 'Poppins', sans-serif;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .font-display {
            font-family: 'Cormorant Garamond', serif;
        }

        .login-container {
            min-height: 100vh;
        }

        .branding-section {
            background: #ffffff;
        }

        .university-name {
            font-family: 'Cormorant Garamond', serif;
            font-weight: 700;
            letter-spacing: 0.3px;
        }

        .inncontrol-title {
            font-family: 'Cormorant Garamond', serif;
            font-weight: 600;
            letter-spacing: 0.3px;
        }

        .divider {
            height: 3px;
            background: #064e3b;
        }

        .login-background {
            background-image: url('/images/bg.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }


        /* ══════════════════════════════════════════════════════
           MAIN AUTH LAYOUT
        ══════════════════════════════════════════════════════ */

        .auth-shell {
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: 100vh;
            width: 100%;
            transition: background-color 0.6s ease;
        }

        .auth-panel {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;

            transition:
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.65s ease;

            will-change: transform, opacity;
        }

        .auth-visual-panel,
        .auth-form-panel {
            transform: translateX(0);
        }

        .auth-shell.is-register .auth-visual-panel {
            transform: translateX(100%);
            opacity: 1;
        }

        .auth-shell.is-register .auth-form-panel {
            transform: translateX(-100%);
            opacity: 1;
        }


        /* ══════════════════════════════════════════════════════
           DESKTOP BRANDING PANEL
        ══════════════════════════════════════════════════════ */

        .auth-visual-panel {
            background: #ffffff;
            padding: 40px 60px;
            z-index: 1;
        }

        .auth-form-panel {
            background-image: url('/images/bg.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            padding: 40px 30px;
            z-index: 2;
        }

        .branding-inner {
            width: min(100%, 460px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #064e3b;
            transition: all 0.7s ease;
        }

        .logo-mark {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }

        .logo-badge {
            width: 140px;
            height: 140px;
            border-radius: 24px;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            box-shadow: none;
            position: relative;
        }

        .logo-badge::before {
            content: "";
            position: absolute;
            inset: 10px;
            border: 2px solid rgba(255,255,255,0.3);
            border-radius: 18px;
        }

        .logo-book {
            width: 96px;
            height: 96px;
            border-radius: 22px;
            background: transparent;
            box-shadow: none;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .logo-book img.logo-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }

        .school-name {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(2rem, 2vw, 2.5rem);
            font-weight: 700;
            line-height: 1.1;
            letter-spacing: 0.8px;
            margin: 0;
            color: #064e3b;
        }

        .campus-name {
            margin-top: 4px;
            font-size: 1rem;
            color: #064e3b;
            font-weight: 500;
        }

        .brand-block {
            margin-top: 42px;
            width: 100%;
        }

        .brand-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(2.4rem, 3.6vw, 4.25rem);
            font-weight: 600;
            line-height: 0.95;
            color: #064e3b;
            margin: 0;
        }

        .brand-title-dash {
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
            font-weight: 400;
            letter-spacing: 0;
        }

        .brand-subtitle {
            font-size: 0.95rem;
            margin: 0.35rem 0 0;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #0f766e;
        }

        .brand-divider {
            width: min(100%, 360px);
            height: 3px;
            background: #064e3b;
            margin: 26px 0 30px;
        }

        .brand-copy {
            max-width: 420px;
            font-size: 1rem;
            line-height: 1.8;
            color: #064e3b;
            margin: 0;
        }


        /* ══════════════════════════════════════════════════════
           AUTH CARD
        ══════════════════════════════════════════════════════ */

        .auth-card {
            position: absolute;
            top: 50%;
            left: 50%;

            width: min(92%, 430px);

            background: rgba(255,255,255,0.96);

            border-radius: 16px;

            padding: 34px 30px;

            box-shadow:
                0 15px 35px rgba(0, 0, 0, 0.12),
                0 3px 10px rgba(0, 0, 0, 0.05);

            opacity: 0;
            pointer-events: none;

            transform:
                translate(-50%, -50%)
                translateX(40px)
                scale(0.98);

            transition:
                opacity 0.55s ease,
                transform 0.55s ease;

            will-change: transform, opacity;
        }

        .auth-card.active-card {
            opacity: 1;
            pointer-events: auto;

            transform:
                translate(-50%, -50%)
                translateX(0)
                scale(1);
        }

        .auth-shell.is-register .login-card {
            opacity: 0;
            pointer-events: none;

            transform:
                translate(-50%, -50%)
                translateX(-40px)
                scale(0.96);
        }

        .auth-shell.is-register .register-card {
            opacity: 1;
            pointer-events: auto;

            transform:
                translate(-50%, -50%)
                translateX(0)
                scale(1);
        }

        .login-card {
            z-index: 3;
        }

        .register-card {
            z-index: 4;
        }

        .login-card-brand {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 22px;
        }

        .login-card-brand-logo {
            width: 52px;
            height: 52px;
            object-fit: contain;
            flex-shrink: 0;
        }

        .login-card-brand-copy {
            display: flex;
            flex-direction: column;
            gap: 4px;
            text-align: left;
        }

        .login-card-brand-name {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.65rem;
            font-weight: 700;
            line-height: 1;
            color: #064e3b;
        }

        .login-card-brand-tag {
            font-size: 9px;
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #0f766e;
        }

        @media (min-width: 1024px) {
            .auth-card.login-card {
                width: min(94%, 560px);
                padding: 48px 48px 40px;
                min-height: 460px;
                box-sizing: border-box;
                border-radius: 20px;
                display: flex;
                flex-direction: column;
                align-items: stretch;
            }

            .auth-card.login-card .login-card-head {
                flex: 0 0 auto;
            }

            .auth-card.login-card .login-card-signin {
                position: relative;
                flex: 1 1 auto;
                display: flex;
                flex-direction: column;
                min-height: 0;
                margin-top: 8px;
            }

            .auth-card.login-card .login-card-signin-main {
                flex: 1 1 auto;
                display: flex;
                flex-direction: column;
                justify-content: center;
                min-height: 0;
                padding-bottom: 72px;
            }

            .auth-card.login-card .login-card-brand {
                margin-bottom: 26px;
            }

            .auth-card.login-card .login-card-brand-logo {
                width: 60px;
                height: 60px;
            }

            .auth-card.login-card .login-title {
                font-size: 34px;
            }

            .auth-card.login-card .login-subtitle {
                font-size: 14px;
                line-height: 1.6;
                margin-top: 12px;
            }

            .auth-card.login-card .google-button {
                height: 56px;
                font-size: 14px;
                border-radius: 12px;
            }

            .auth-card.login-card .login-card-signin-main .google-hint {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                margin-top: 0;
                padding: 12px 16px;
                text-align: center;
                font-size: 13px;
                font-weight: 500;
                line-height: 1.45;
                color: #064e3b;
                background: #ecfdf5;
                border: 1px solid #6ee7b7;
                border-radius: 12px;
                box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
            }

            .auth-card.login-card .login-card-signin-main .google-hint strong {
                font-weight: 700;
                color: #047857;
            }

            .auth-card.login-card .login-card-signin-main .google-hint.is-error {
                color: #991b1b;
                background: #fef2f2;
                border-color: #fecaca;
                box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
            }

            .auth-card.login-card .login-card-signin-main .google-hint.is-error strong {
                color: #b91c1c;
            }
        }

        @media (max-width: 1023px) {
            .auth-card.login-card {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                box-sizing: border-box;
                min-height: 0;
                padding: clamp(24px, 4.2vw, 36px) clamp(20px, 4vw, 32px) clamp(22px, 3.8vw, 32px);
                border-radius: 18px;
            }

            .auth-card.login-card .login-card-head {
                flex: 0 0 auto;
                text-align: center;
            }

            .auth-card.login-card .login-card-brand {
                display: none;
            }

            .auth-card.login-card .login-card-signin {
                position: relative;
                flex: 0 0 auto;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                min-height: 0;
                margin-top: clamp(18px, 3.2vw, 28px);
            }

            .auth-card.login-card .login-card-signin-main {
                flex: 0 0 auto;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                width: 100%;
                padding-top: 0;
                padding-bottom: 0;
                gap: 0;
            }

            .auth-card.login-card .login-card-signin-main.space-y-5 > * + * {
                margin-top: 0;
            }

            .auth-card.login-card .login-title {
                font-size: clamp(1.7rem, 4.2vw, 2.05rem);
                line-height: 1.15;
                letter-spacing: 0.01em;
            }

            .auth-card.login-card .login-subtitle {
                font-size: 13px;
                line-height: 1.5;
                margin-top: 12px;
                margin-left: auto;
                margin-right: auto;
                color: #4b5563;
            }

            .auth-card.login-card .google-button {
                height: clamp(46px, 12vw, 52px);
                font-size: 14px;
                font-weight: 600;
                border-radius: 12px;
                color: #111827;
            }

            .auth-card.login-card .login-card-signin-main .google-hint {
                position: static;
                left: auto;
                right: auto;
                bottom: auto;
                margin-top: clamp(14px, 3vw, 20px);
                padding: 12px 14px;
                text-align: center;
                font-size: 12px;
                font-weight: 500;
                line-height: 1.4;
                color: #065f46;
                background: #ecfdf5;
                border: 1px solid #6ee7b7;
                border-radius: 12px;
                box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
            }

            .auth-card.login-card .login-card-signin-main .google-hint strong {
                font-weight: 700;
                color: #047857;
            }

            .auth-card.login-card .login-card-signin-main .google-hint.is-error {
                color: #991b1b;
                background: #fef2f2;
                border-color: #fecaca;
                box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
            }

            .auth-card.login-card .login-card-signin-main .google-hint.is-error strong {
                color: #b91c1c;
            }
        }


        /* ══════════════════════════════════════════════════════
           LOGIN FORM
        ══════════════════════════════════════════════════════ */

        .login-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: 30px;
            line-height: 1;
            font-weight: 700;
            color: #064e3b;
        }

        .login-subtitle {
            font-size: 12px;
            color: #6b7280;
            margin-top: 4px;
        }

        .auth-card.login-card .login-subtitle {
            max-width: none;
            white-space: nowrap;
        }

        .form-label {
            display: block;
            font-size: 12px;
            font-weight: 600;
            color: #111827;
            margin-bottom: 8px;
        }

        .input-wrapper {
            position: relative;
        }

        .input-icon {
            position: absolute;
            left: 12px;
            top: 50%;

            transform: translateY(-50%);

            color: #6b7280;

            display: flex;
            align-items: center;
            justify-content: center;

            pointer-events: none;
        }

        .form-input {
            width: 100%;
            height: 38px;

            padding-left: 38px;
            padding-right: 12px;

            font-family: 'Poppins', sans-serif;
            font-size: 11px;

            color: #374151;

            background: #ffffff;

            border: 1px solid #d1d5db;
            border-radius: 10px;

            outline: none;

            box-shadow:
                0 1px 3px rgba(0, 0, 0, 0.08);

            transition: all 0.2s ease;
        }

        .form-input::placeholder {
            color: #9ca3af;
        }

        .form-input:focus {
            border-color: #064e3b;

            box-shadow:
                0 0 0 2px rgba(6, 78, 59, 0.10);
        }

        .form-input-plain {
            padding-left: 12px;
        }

        select.form-input {
            padding-left: 12px;
        }

        .remember-label {
            display: flex;
            align-items: center;

            font-size: 11px;
            color: #374151;

            cursor: pointer;
        }

        .remember-checkbox {
            appearance: none;

            width: 16px;
            height: 16px;

            border: 1px solid #6b7280;
            border-radius: 4px;

            margin-right: 7px;

            background: #ffffff;

            cursor: pointer;

            position: relative;
        }

        .remember-checkbox:checked {
            background: #064e3b;
            border-color: #064e3b;
        }

        .remember-checkbox:checked::after {
            content: "✓";

            position: absolute;

            color: white;

            font-size: 11px;
            font-weight: 600;

            left: 2px;
            top: -1px;
        }

        .forgot-password {
            font-size: 11px;

            color: #16a34a;

            text-decoration: none;

            transition: color 0.2s ease;
        }

        .forgot-password:hover {
            color: #064e3b;
            text-decoration: underline;
        }

        .register-text {
            margin-top: 16px;
            text-align: center;
            font-size: 11px;
            color: #374151;
        }

        .register-link {
            background: none;
            border: none;
            padding: 0;

            color: #16a34a;

            font-weight: 600;

            text-decoration: none;

            cursor: pointer;

            font: inherit;
        }

        .register-link:hover {
            color: #064e3b;
            text-decoration: underline;
        }

        .signin-button {
            width: 100%;
            height: 38px;

            background: #064e3b;
            color: white;

            border: none;
            border-radius: 10px;

            font-family: 'Poppins', sans-serif;

            font-size: 12px;
            font-weight: 600;

            cursor: pointer;

            box-shadow:
                0 2px 4px rgba(0, 0, 0, 0.12);

            transition: all 0.2s ease;
        }

        .signin-button:hover {
            background: #053f31;

            transform: translateY(-1px);

            box-shadow:
                0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .signin-button:active {
            transform: translateY(0);
        }

        .google-button {
            width: 100%;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: #ffffff;
            color: #1f2937;
            border: 1px solid #d1d5db;
            border-radius: 10px;
            font-family: 'Poppins', sans-serif;
            font-size: 12px;
            font-weight: 600;
            text-decoration: none;
            box-shadow: 0 1px 2px rgba(0,0,0,.06);
        }
        .google-button:hover { background: #f9fafb; }
        .google-hint {
            margin-top: 8px;
            text-align: center;
            font-size: 11px;
            color: #6b7280;
            font-family: 'Poppins', sans-serif;
        }

        .google-hint.is-error {
            color: #991b1b;
            background: #fef2f2;
            border: 1px solid #fecaca;
            border-radius: 10px;
            padding: 10px 12px;
        }
        .auth-divider {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 18px 0 8px;
            font-size: 10px;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: #9ca3af;
            font-family: 'Poppins', sans-serif;
        }
        .auth-divider::before,
        .auth-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: #e5e7eb;
        }


        /* ══════════════════════════════════════════════════════
           REGISTRATION STEPPER
        ══════════════════════════════════════════════════════ */

        .reg-stepper {
            display: flex;
            align-items: center;
            justify-content: center;

            margin-bottom: 24px;

            gap: 0;
        }

        .step-item {
            display: flex;
            flex-direction: column;
            align-items: center;

            position: relative;
            z-index: 1;
        }

        .step-circle {
            width: 28px;
            height: 28px;

            border-radius: 50%;

            border: 2px solid #d1d5db;

            background: #fff;

            display: flex;
            align-items: center;
            justify-content: center;

            font-size: 11px;
            font-weight: 600;

            color: #9ca3af;

            transition: all 0.3s ease;

            font-family: 'Poppins', sans-serif;
        }

        .step-circle.active {
            border-color: #064e3b;
            background: #064e3b;
            color: #fff;

            box-shadow:
                0 0 0 3px rgba(6,78,59,0.12);
        }

        .step-circle.done {
            border-color: #064e3b;
            background: #064e3b;
            color: #fff;
        }

        .step-label {
            font-size: 9px;
            font-weight: 500;

            color: #9ca3af;

            margin-top: 4px;

            white-space: nowrap;
            text-align: center;

            transition: color 0.3s ease;
        }

        .step-label.active,
        .step-label.done {
            color: #064e3b;
        }

        .step-line {
            flex: 1;

            height: 2px;

            background: #d1d5db;

            margin: 0 6px;
            margin-bottom: 14px;

            transition: background 0.3s ease;

            min-width: 36px;
        }

        .step-line.done {
            background: #064e3b;
        }


        /* ══════════════════════════════════════════════════════
           STEP PANELS
        ══════════════════════════════════════════════════════ */

        .step-panel {
            display: none;
        }

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

        .step-title {
            font-family: 'Poppins', sans-serif;

            font-size: 11px;
            font-weight: 600;

            color: #064e3b;

            text-transform: uppercase;

            letter-spacing: 0.5px;

            margin-bottom: 14px;

            padding-bottom: 8px;

            border-bottom: 1px solid #e5e7eb;
        }


        /* ══════════════════════════════════════════════════════
           WIZARD BUTTONS
        ══════════════════════════════════════════════════════ */

        .wizard-nav {
            display: flex;

            gap: 10px;

            margin-top: 18px;
        }

        .btn-back {
            flex: 1;

            height: 38px;

            background: #fff;

            color: #064e3b;

            border: 1.5px solid #064e3b;

            border-radius: 10px;

            font-family: 'Poppins', sans-serif;

            font-size: 12px;
            font-weight: 600;

            cursor: pointer;

            transition: all 0.2s ease;
        }

        .btn-back:hover {
            background: #f0fdf4;
        }

        .btn-next {
            flex: 1;

            height: 38px;

            background: #064e3b;

            color: #fff;

            border: none;

            border-radius: 10px;

            font-family: 'Poppins', sans-serif;

            font-size: 12px;
            font-weight: 600;

            cursor: pointer;

            box-shadow:
                0 2px 4px rgba(0,0,0,0.12);

            transition: all 0.2s ease;
        }

        .btn-next:hover {
            background: #053f31;

            transform: translateY(-1px);

            box-shadow:
                0 4px 8px rgba(0,0,0,0.15);
        }

        .btn-next:active {
            transform: translateY(0);
        }


        /* ══════════════════════════════════════════════════════
           RESPONSIVE LAYOUT
           
           Desktop  ≥ 1024px
           Tablet   640–1023px
           Mobile   < 640px
        ══════════════════════════════════════════════════════ */


        /* ══════════════════════════════════════════════════════
           TABLET + MOBILE
        ══════════════════════════════════════════════════════ */

        @media (max-width: 1023px) {

            /*
             * The page uses the viewport height but does not force
             * the auth shell itself to be 100vh.
             */
            body {
                height: 100vh;
                min-height: 0;
            }

            .auth-shell {
                display: flex;
                flex-direction: column;

                flex: 1;

                /*
                 * Important:
                 * Do not force another 100vh here because the
                 * footer is outside the auth shell.
                 */
                min-height: 0;
            }

            /* Disable desktop sliding animation */
            .auth-shell.is-register .auth-visual-panel,
            .auth-shell.is-register .auth-form-panel {
                transform: none !important;
            }

            /* Hide desktop branding panel */
            .auth-panel.auth-visual-panel {
                display: none;
            }

            /*
             * Form panel becomes the complete tablet/mobile page.
             */
            .auth-panel.auth-form-panel {
                flex: 1;

                display: flex;
                flex-direction: column;

                align-items: center;
                justify-content: flex-start;

                background: #eef4ef !important;
                background-image: none;

                padding: 0;

                min-height: 100%;

                position: relative;
            }

            .mob-page-decor {
                display: block !important;
                position: absolute;
                inset: 0;
                z-index: 0;
                overflow: hidden;
                pointer-events: none;
            }

            .mob-page-decor-shapes {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                height: min(70%, 520px);
            }

            /* Show mobile/tablet hero */
            .mob-hero-brand {
                display: flex !important;
                z-index: 1;
            }

            .mob-hero-inner {
                justify-content: center;
                padding-bottom: 40px;
            }

            .mob-hero-wave {
                display: block !important;
                position: absolute;
                left: 0;
                right: 0;
                bottom: -1px;
                width: 100%;
                height: 52px;
                z-index: 4;
                pointer-events: none;
                line-height: 0;
            }

            .mob-hero-wave svg {
                display: block;
                width: 100%;
                height: 100%;
            }

            .mob-logo-row {
                position: absolute;
                top: 10px;
                left: 16px;
                z-index: 3;
                align-self: auto;
            }

            .mob-brand-center {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                margin-top: 0;
            }

            .mob-product-logo {
                display: none !important;
            }

            /*
             * Cards are placed naturally below the hero.
             */
            .auth-card {
                position: relative !important;

                top: auto !important;
                left: auto !important;

                width: min(92%, 440px);

                margin-top: 2px;
                margin-bottom: 8px;

                display: none;

                opacity: 0;

                pointer-events: none;

                transform: none !important;

                transition: opacity 0.35s ease;

                z-index: 2;
            }

            .auth-card.active-card {
                display: block !important;

                opacity: 1 !important;

                pointer-events: auto !important;
            }

            .auth-card.login-card.active-card {
                display: flex !important;
                flex-direction: column;
            }

            /* Login card when registering */
            .auth-shell.is-register .login-card {
                display: none !important;

                opacity: 0 !important;

                pointer-events: none !important;

                transform: none !important;
            }

            /* Register card when registering */
            .auth-shell.is-register .register-card {
                display: block !important;

                opacity: 1 !important;

                pointer-events: auto !important;

                transform: none !important;
            }
        }


        /* ══════════════════════════════════════════════════════
           TABLET: 640–1023px
           
           IMPORTANT FIX:
           Hero is no longer a fixed 450px.
        ══════════════════════════════════════════════════════ */

        @media (min-width: 640px) and (max-width: 1023px) {

            /*
             * Responsive hero height.
             *
             * At 681px viewport height:
             * 681 × 35% ≈ 238px
             *
             * So the hero no longer consumes almost the
             * entire tablet screen.
             */
            .mob-hero-brand {
                flex: none;

                height: clamp(220px, 30vh, 280px);
            }

            .mob-inn-title {
                font-size: clamp(2.4rem, 5.5vw, 3.25rem);
            }

            .mob-inn-sub {
                font-size: 0.85rem;
            }

            .mob-school {
                font-size: 0.85rem;
            }

            .mob-campus {
                font-size: 0.7rem;
            }

            .mob-logo-img {
                width: 46px;
                height: 46px;
            }

            .auth-card {
                width: 94%;
                max-width: 680px;
            }

            .auth-card.login-card {
                min-height: 0;
                padding: 40px 44px 36px;
                width: min(92%, 680px);
                margin-left: auto;
                margin-right: auto;
                margin-top: 8px;
            }

            .auth-card.login-card .login-title {
                font-size: clamp(2rem, 3.6vw, 2.35rem);
            }

            .auth-card.login-card .login-subtitle {
                font-size: 15px;
                margin-top: 12px;
            }

            .auth-card.login-card .login-card-signin {
                margin-top: 24px;
            }

            .auth-card.login-card .login-card-signin-main {
                padding-top: 0;
                padding-bottom: 0;
                gap: 0;
            }

            .auth-card.login-card .google-button {
                height: 56px;
                font-size: 15px;
            }

            .auth-card.login-card .login-card-signin-main .google-hint {
                font-size: 14px;
                padding: 14px 18px;
            }

            .mob-hero-wave {
                height: 56px;
            }
        }


        /* ══════════════════════════════════════════════════════
           MOBILE: < 640px
        ══════════════════════════════════════════════════════ */

        @media (max-width: 639px) {

            /*
             * Compact hero on mobile.
             */
            .mob-hero-brand {
                height: clamp(188px, 28vh, 230px);
            }

            .mob-hero-wave {
                height: 48px;
            }

            .mob-inn-title {
                font-size: clamp(1.55rem, 7.5vw, 1.85rem);
            }

            .mob-inn-sub {
                font-size: 0.72rem;
            }

            .mob-school {
                font-size: 0.72rem;
            }

            .mob-campus {
                font-size: 0.6rem;
            }

            .mob-logo-img {
                width: 36px;
                height: 36px;
            }

            .auth-card {
                width: calc(100% - 32px);

                max-width: 400px;

                padding: 16px 16px;

                border-radius: 14px;

                margin-top: 2px;
            }

            .auth-card.login-card {
                width: calc(100% - 32px);
                max-width: 400px;
                min-height: 0;
                padding: 26px 20px 22px;
                margin-top: 2px;
                margin-bottom: 8px;
                border-radius: 16px;
            }

            .auth-card.login-card .login-card-head {
                padding-top: 2px;
            }

            .auth-card.login-card .login-title {
                font-size: clamp(1.55rem, 6.4vw, 1.85rem);
                line-height: 1.2;
            }

            .auth-card.login-card .login-subtitle {
                font-size: clamp(11px, 3.2vw, 13px);
                margin-top: 10px;
                white-space: normal;
            }

            .auth-card.login-card .login-card-signin {
                margin-top: 18px;
            }

            .auth-card.login-card .login-card-signin-main {
                padding-top: 0;
                padding-bottom: 0;
                gap: 0;
            }

            .auth-card.login-card .google-button {
                height: 50px;
                font-size: 14px;
            }

            .auth-card.login-card .login-card-signin-main .google-hint {
                font-size: 12px;
                padding: 10px 12px;
                line-height: 1.4;
                margin-top: 18px;
            }

            .step-label {
                font-size: 8px;
            }

            .step-line {
                min-width: 22px;
            }

            .step-circle {
                width: 26px;
                height: 26px;

                font-size: 10px;
            }

            .register-card .login-title {
                font-size: 22px;
            }

            .register-card .login-subtitle {
                font-size: 11px;
            }

            /*
             * Compact register form.
             */
            .register-card .mb-5 {
                margin-bottom: 10px !important;
            }

            .register-card .space-y-4 > * + * {
                margin-top: 10px !important;
            }

            .reg-stepper {
                margin-bottom: 16px;
            }

            .step-title {
                margin-bottom: 8px;
                padding-bottom: 4px;
            }

            .register-text {
                margin-top: 10px;
            }
        }


        /* ══════════════════════════════════════════════════════
           MOBILE / TABLET HERO
        ══════════════════════════════════════════════════════ */

        .mob-hero-brand {
            display: none;

            width: 100%;

            flex-shrink: 0;

            position: relative;

            background-image: url('/images/bg.jpg');

            background-size: cover;

            background-position: center 55%;

            overflow: hidden;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            text-align: center;
        }

        .mob-hero-brand::after {
            content: '';

            position: absolute;

            inset: 0;

            background: rgba(6, 78, 59, 0.54);
        }

        .mob-hero-wave {
            display: none;
        }

        .mob-page-decor {
            display: none;
        }

        .mob-hero-inner {
            position: relative;

            z-index: 2;

            color: #ffffff;

            padding: 10px 16px 24px;

            width: 100%;

            height: 100%;

            display: flex;

            flex-direction: column;
        }

        .mob-logo-row {
            display: flex;

            align-items: center;

            gap: 10px;

            align-self: flex-start;

            text-align: left;
        }

        .mob-logo-img {
            border-radius: 8px;

            object-fit: contain;

            flex-shrink: 0;
        }

        .mob-school {
            font-family: 'Cormorant Garamond', serif;

            font-weight: 700;

            color: #ffffff;

            line-height: 1.2;

            letter-spacing: 0.3px;

            margin: 0;
        }

        .mob-campus {
            color: rgba(255,255,255,0.8);

            font-weight: 500;

            margin: 0;
        }

        .mob-brand-center {
            flex: 1;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            margin-top: 0;
        }

        .mob-product-logo {
            height: 48px;
            width: auto;
            max-width: 64px;
            object-fit: contain;
            margin-bottom: 8px;
        }

        .mob-inn-title {
            font-family: 'Cormorant Garamond', serif;

            font-weight: 600;

            color: #ffffff;

            line-height: 1;

            margin: 0 0 6px;
        }

        .mob-inn-sub {
            color: rgba(255,255,255,0.82);

            font-weight: 400;

            margin: 0;

            line-height: 1.5;
        }


        /* ══════════════════════════════════════════════════════
           FOOTER (legacy external bar — tablet only legacy)
        ══════════════════════════════════════════════════════ */

        .site-footer {
            width: 100%;
            background: #064e3b;
            color: rgba(255,255,255,0.82);
            font-family: 'Poppins', sans-serif;
            font-size: 11px;
            padding: 14px 24px;
            display: none; /* replaced by .mob-login-footer on ≤1023px */
            align-items: center;
            justify-content: center;
            border-top: 1px solid rgba(255,255,255,0.15);
            box-sizing: border-box;
            flex-shrink: 0;
        }

        .site-footer p {
            margin: 0;
            line-height: 1.3;
        }

        .res {
            color: rgb(206, 162, 42);
        }

        .footer-copy {
            text-align: center;
        }

        /* ══════════════════════════════════════════════════════
           COMPACT MOBILE / TABLET LOGIN FOOTER
           Fills leftover lower whitespace without a thick bar.
        ══════════════════════════════════════════════════════ */

        .mob-login-footer {
            display: none;
        }

        /* Branded breathing space — ≤1023px only */
        .mob-breath-section {
            display: none;
        }

        @media (max-width: 1023px) {
            .auth-panel.auth-form-panel {
                background: #eef4ef !important;
            }

            .mob-breath-section {
                display: flex;
                position: relative;
                flex: 1 1 auto;
                align-items: center;
                justify-content: center;
                width: 100%;
                min-height: 96px;
                padding: 28px 24px 20px;
                box-sizing: border-box;
                overflow: hidden;
                pointer-events: none;
                background: transparent;
                z-index: 1;
            }

            .mob-breath-shapes {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                z-index: 0;
                pointer-events: none;
                opacity: 0.9;
            }

            .mob-breath-content {
                position: relative;
                z-index: 1;
                max-width: 320px;
                text-align: center;
            }

            .mob-breath-slogan {
                margin: 0;
                font-family: 'Cormorant Garamond', serif;
                font-size: clamp(1.2rem, 4.8vw, 1.45rem);
                font-weight: 700;
                letter-spacing: 0.01em;
                color: #1b4332;
                line-height: 1.25;
            }

            .mob-breath-sub {
                margin: 8px 0 0;
                font-family: 'Poppins', sans-serif;
                font-size: clamp(0.7rem, 3vw, 0.82rem);
                font-weight: 400;
                letter-spacing: 0.01em;
                color: #6b7280;
                line-height: 1.5;
            }

            .mob-login-footer {
                display: block;
                width: 100%;
                flex-shrink: 0;
                margin-top: 0;
                padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
                box-sizing: border-box;
                text-align: center;
                background: transparent;
                border-top: 1px solid rgba(27, 67, 50, 0.08);
                position: relative;
                z-index: 1;
            }

            .mob-login-footer-inner {
                max-width: 360px;
                margin: 0 auto;
            }

            .mob-login-footer-brand {
                margin: 0 0 4px;
                font-family: 'Poppins', sans-serif;
                font-size: 0.72rem;
                font-weight: 600;
                letter-spacing: 0.01em;
                color: #1b4332;
                line-height: 1.2;
            }

            .mob-login-footer-brand span {
                color: #1b4332;
                font-weight: 500;
            }

            .mob-login-footer-copy {
                margin: 0;
                font-family: 'Poppins', sans-serif;
                font-size: 0.65rem;
                font-weight: 400;
                letter-spacing: 0.01em;
                color: #9ca3af;
                line-height: 1.45;
            }
        }

        /* Taller tablets — same composition, more air */
        @media (min-width: 640px) and (max-width: 1023px) {
            .mob-breath-section {
                min-height: 120px;
                padding: 36px 36px 24px;
            }

            .mob-breath-slogan {
                font-size: clamp(1.28rem, 2.4vw, 1.5rem);
            }

            .mob-breath-sub {
                font-size: 0.8rem;
                display: block;
            }
        }

        /* Short viewports — keep the same structure, slightly tighter */
        @media (max-width: 1023px) and (max-height: 700px) {
            .mob-breath-section {
                min-height: 72px;
                padding: 16px 18px 12px;
            }

            .mob-breath-slogan {
                font-size: 1.15rem;
            }

            .mob-breath-sub {
                display: block;
                font-size: 0.68rem;
                margin-top: 6px;
            }
        }

        @media (max-width: 639px) {
            .mob-login-footer {
                padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
            }

            .auth-card {
                margin-bottom: 8px;
            }

            .mob-breath-content {
                max-width: 300px;
            }
        }