:root {
            --brand: #7d2439;
            --brand-strong: #651b2e;
            --brand-soft: #f4e7e9;
            --ink: #171c26;
            --muted: #7c8493;
            --line: #dfe3ea;
            --surface: #ffffff;
            --cream: #fbf7f3;
            --peach: #f6dfcd;
            --danger: #b42318;
            --danger-bg: #fff2f0;
            --success: #147d4f;
            --success-bg: #eefaf4;
            --shadow: 0 28px 70px rgba(37, 31, 33, .11);
            --ease: cubic-bezier(.2,.8,.2,1);
        }

        * { box-sizing: border-box; }

        html, body { width: 100%; min-height: 100%; }

        body {
            margin: 0;
            min-width: 320px;
            min-height: 100vh;
            min-height: 100dvh;
            overflow: hidden;
            color: var(--ink);
            background: #fffaf7;
            font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        button, input { font: inherit; }
        button, a { -webkit-tap-highlight-color: transparent; }
        a { color: inherit; }

        .login-shell {
            position: relative;
            isolation: isolate;
            width: 100%;
            height: 100vh;
            height: 100dvh;
            display: grid;
            grid-template-columns: minmax(0, 1.04fr) minmax(520px, .96fr);
            overflow: hidden;
            /* A single continuous page background. The brand colour now fades naturally
               into the warm neutral canvas instead of reading as a separate maroon shape. */
            background:
                radial-gradient(ellipse 78% 92% at -10% 110%,
                    rgba(94,24,44,.96) 0%,
                    rgba(119,32,54,.90) 27%,
                    rgba(143,48,71,.68) 43%,
                    rgba(176,85,103,.30) 57%,
                    rgba(221,170,174,.10) 69%,
                    rgba(255,255,255,0) 80%),
                radial-gradient(circle at 12% 4%, rgba(247,225,211,.44), transparent 30%),
                radial-gradient(circle at 86% 17%, rgba(248,239,234,.70), transparent 29%),
                linear-gradient(112deg, #fff8f4 0%, #fffdfb 44%, #ffffff 72%, #fbfbfc 100%);
        }

        /* Soft ambient brand glow behind the catering artwork — no hard edge or circle. */
        .login-shell::before {
            content: "";
            position: absolute;
            z-index: 0;
            left: -12vw;
            bottom: -22vh;
            width: min(67vw, 1080px);
            height: min(92vh, 820px);
            pointer-events: none;
            background:
                radial-gradient(ellipse at 35% 68%,
                    rgba(112,29,50,.30) 0%,
                    rgba(137,43,66,.17) 38%,
                    rgba(185,105,119,.06) 59%,
                    rgba(125,36,57,0) 76%);
            filter: blur(26px);
            transform: none;
        }

        .login-shell::after {
            content: "";
            position: absolute;
            z-index: 0;
            inset: 0;
            pointer-events: none;
            background:
                radial-gradient(ellipse at 43% 47%, rgba(247,228,216,.13), transparent 33%),
                linear-gradient(90deg,
                    rgba(255,255,255,0) 29%,
                    rgba(255,255,255,.10) 41%,
                    rgba(255,255,255,.50) 58%,
                    rgba(255,255,255,.88) 74%,
                    rgba(255,255,255,.97) 100%);
        }

        /* ---------- VISUAL / BRAND AREA ---------- */
        .visual-panel {
            position: relative;
            z-index: 1;
            min-width: 0;
            overflow: hidden;
            background: transparent;
        }

        .visual-panel::before,
        .visual-panel::after {
            content: none;
        }

        .brand-lockup {
            position: absolute;
            z-index: 8;
            left: clamp(26px, 3.2vw, 54px);
            top: clamp(24px, 3vw, 46px);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .brand-lockup img {
            width: 48px;
            height: 48px;
            object-fit: contain;
            filter: drop-shadow(0 7px 12px rgba(125,36,57,.12));
        }

        .brand-copy { display: grid; gap: 1px; }
        .brand-copy strong {
            font-size: 15px;
            line-height: 1.15;
            font-weight: 800;
            letter-spacing: -.02em;
        }
        .brand-copy span {
            color: var(--brand);
            font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif;
            font-size: 10px;
            line-height: 1.4;
            font-weight: 600;
        }


        .illustration-stage {
            position: absolute;
            z-index: 5;
            left: 50%;
            bottom: clamp(-34px, -2vw, -12px);
            width: min(98%, 900px);
            transform: translateX(-50%);
            transform-origin: center bottom;
        }

        .illustration-stage::after {
            content: "";
            position: absolute;
            z-index: -1;
            left: 10%;
            right: 6%;
            bottom: 1.5%;
            height: 11%;
            border-radius: 50%;
            background: rgba(66,28,37,.15);
            filter: blur(24px);
            transform: scaleY(.44);
        }

        .catering-illustration {
            display: block;
            width: 100%;
            height: auto;
            user-select: none;
            pointer-events: none;
            filter: drop-shadow(0 26px 32px rgba(59, 31, 38, .11));
            /* Keep the illustration completely fixed. */
            transform: none !important;
            transition: none !important;
        }


        /* ---------- FORM AREA ---------- */
        .form-panel-wrap {
            position: relative;
            z-index: 2;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: clamp(28px, 4vw, 64px) clamp(34px, 5.2vw, 88px);
            background: transparent;
        }

        .form-panel-wrap::before {
            content: none;
        }

        .mobile-brand { display: none; }

        .login-panel {
            width: min(100%, 450px);
            transform: translateY(-1vh);
        }


        .login-title {
            margin: 0;
            color: #1d2430;
            font-size: clamp(36px, 3.15vw, 48px);
            line-height: 1.04;
            letter-spacing: -.055em;
            font-weight: 800;
        }

        .login-subtitle {
            margin: 12px 0 30px;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.65;
            font-weight: 500;
        }

        .alert-box {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin: -8px 0 20px;
            padding: 12px 14px;
            border: 1px solid transparent;
            border-radius: 13px;
            font-size: 12px;
            line-height: 1.5;
            font-weight: 700;
        }

        .alert-box svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; }
        .alert-error { color: var(--danger); background: var(--danger-bg); border-color: #ffd5cf; }
        .alert-success { color: var(--success); background: var(--success-bg); border-color: #ccebdc; }

        .field { margin-bottom: 18px; }
        .field-row {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 8px;
        }

        .field label {
            color: #252b35;
            font-size: 12.5px;
            font-weight: 800;
        }

        .field-control { position: relative; }
        .field-control .field-icon {
            position: absolute;
            z-index: 2;
            left: 16px;
            top: 50%;
            width: 18px;
            height: 18px;
            color: #a2a9b5;
            transform: translateY(-50%);
            pointer-events: none;
            transition: color .2s ease;
        }

        .form-input {
            --field-border-color: var(--line);
            width: 100%;
            height: 56px;
            padding: 0 50px 0 46px;
            border: 1px solid var(--field-border-color);
            outline: 0;
            border-radius: 13px;
            color: #202631;
            background: #fff;
            box-shadow: 0 1px 1px rgba(15,23,42,.02);
            font-size: 13.5px;
            font-weight: 600;
            transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
        }

        .form-input::placeholder { color: #b1b7c2; font-weight: 500; }
        /* Keep fields visually stable on mouse hover.
           Border emphasis is reserved for actual keyboard/mouse focus only. */
        .form-input:hover { border-color: var(--field-border-color); }
        .form-input:focus {
            border-color: rgba(125,36,57,.72);
            box-shadow: 0 0 0 4px rgba(125,36,57,.085);
            background: #fff;
        }
        .field-control:focus-within .field-icon { color: var(--brand); }
        .form-input:disabled { cursor: not-allowed; background: #f5f6f8; color: #8f96a1; }

        .password-toggle {
            position: absolute;
            z-index: 3;
            right: 7px;
            top: 50%;
            display: grid;
            place-items: center;
            width: 42px;
            height: 42px;
            margin: 0;
            padding: 0;
            border: 0;
            border-radius: 10px;
            color: #8f98a6;
            background: transparent;
            transform: translateY(-50%);
            cursor: pointer;
            transition: color .2s ease, background .2s ease;
        }
        .password-toggle:hover { color: var(--brand); background: #faf2f4; }
        .password-toggle svg { width: 18px; height: 18px; }

        .form-options {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin: 4px 0 22px;
        }

        .remember-label {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            color: #6f7785;
            font-size: 12.5px;
            font-weight: 600;
            cursor: pointer;
            user-select: none;
        }

        .remember-label input {
            appearance: none;
            width: 18px;
            height: 18px;
            margin: 0;
            border: 1.5px solid #bcc3ce;
            border-radius: 5px;
            background: #fff;
            cursor: pointer;
            display: grid;
            place-content: center;
            transition: .2s ease;
        }
        .remember-label input::before {
            content: "";
            width: 8px;
            height: 4px;
            border-left: 2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: translateY(-1px) rotate(-45deg) scale(0);
            transition: transform .15s ease;
        }
        .remember-label input:checked { border-color: var(--brand); background: var(--brand); }
        .remember-label input:checked::before { transform: translateY(-1px) rotate(-45deg) scale(1); }
        .remember-label input:focus-visible { outline: 3px solid rgba(125,36,57,.14); outline-offset: 2px; }
        .remember-label input:disabled { cursor: not-allowed; opacity: .55; }

        .forgot-link {
            color: var(--brand);
            font-size: 12.5px;
            font-weight: 800;
            text-decoration: none;
        }
        .forgot-link:hover { text-decoration: none; color: #6f1f34; }

        .login-button {
            width: 100%;
            height: 57px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            border: 0;
            border-radius: 13px;
            color: #fff;
            background: linear-gradient(135deg, #8b2a43, var(--brand));
            box-shadow: 0 13px 28px rgba(125,36,57,.22);
            font-size: 13.5px;
            font-weight: 800;
            cursor: pointer;
            transition: transform .2s var(--ease), box-shadow .2s ease, filter .2s ease;
        }
        .login-button:hover:not(:disabled) {
            transform: translateY(-1px);
            box-shadow: 0 17px 34px rgba(125,36,57,.26);
            filter: saturate(1.03);
        }
        .login-button:active:not(:disabled) { transform: translateY(0); }
        .login-button:focus-visible { outline: 4px solid rgba(125,36,57,.14); outline-offset: 3px; }
        .login-button:disabled { cursor: not-allowed; opacity: .62; box-shadow: none; }
        .login-button svg { width: 16px; height: 16px; transition: transform .2s ease; }
        .login-button:hover:not(:disabled) svg { transform: translateX(3px); }

        .contact-line {
            margin: 22px 0 0;
            text-align: center;
            color: #858c99;
            font-size: 12px;
            font-weight: 600;
        }
        .contact-line a {
            margin-left: 4px;
            color: var(--brand);
            font-weight: 800;
            text-decoration: none;
        }
        .contact-line a:hover { text-decoration: none; color: #6f1f34; }

        .form-footer {
            position: absolute;
            left: 50%;
            bottom: clamp(15px, 2vw, 28px);
            transform: translateX(-50%);
            width: calc(100% - 40px);
            color: #b1b6bf;
            text-align: center;
            font-size: 9.5px;
            font-weight: 600;
            white-space: nowrap;
        }

        .lockout-timer {
            margin: -9px 0 16px;
            color: var(--danger);
            font-size: 11.5px;
            text-align: center;
            font-weight: 700;
        }

        /* ---------- MODAL ---------- */
        .modal-overlay {
            position: fixed;
            z-index: 1000;
            inset: 0;
            display: grid;
            place-items: center;
            padding: 20px;
            background: rgba(25,20,22,.46);
            backdrop-filter: blur(9px);
            opacity: 0;
            visibility: hidden;
            transition: opacity .22s ease, visibility .22s ease;
        }
        .modal-overlay.active { opacity: 1; visibility: visible; }

        .modal-card {
            position: relative;
            width: min(100%, 430px);
            padding: 28px;
            border: 1px solid rgba(255,255,255,.7);
            border-radius: 22px;
            background: rgba(255,255,255,.97);
            box-shadow: 0 26px 70px rgba(23,17,19,.22);
            transform: translateY(12px) scale(.985);
            transition: transform .24s var(--ease);
        }
        .modal-overlay.active .modal-card { transform: translateY(0) scale(1); }

        .close-modal {
            position: absolute;
            right: 16px;
            top: 16px;
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            border: 0;
            border-radius: 11px;
            color: #68707d;
            background: #f3f4f6;
            cursor: pointer;
        }
        .close-modal svg { width: 16px; height: 16px; }

        .modal-kicker {
            margin: 0 0 8px;
            color: var(--brand);
            font-size: 10.5px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
        }
        .modal-title {
            margin: 0 44px 5px 0;
            color: #1f252f;
            font-size: 24px;
            line-height: 1.2;
            letter-spacing: -.035em;
            font-weight: 800;
        }
        .modal-desc {
            margin: 0 0 22px;
            color: #838b97;
            font-size: 12.5px;
            line-height: 1.6;
        }

        .contact-item {
            display: flex;
            align-items: center;
            gap: 13px;
            padding: 13px 0;
            border-top: 1px solid #edf0f3;
        }
        .contact-icon {
            flex: 0 0 auto;
            width: 40px;
            height: 40px;
            display: grid;
            place-items: center;
            border-radius: 12px;
            color: var(--brand);
            background: #f8ecef;
        }
        .contact-icon svg { width: 17px; height: 17px; }
        .contact-label { margin-bottom: 3px; color: #9aa0aa; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
        .contact-value { color: #353b45; font-size: 12.5px; line-height: 1.45; font-weight: 700; }

        .spinner {
            width: 17px;
            height: 17px;
            border: 2px solid rgba(255,255,255,.35);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin .7s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* ---------- TABLET / MOBILE ---------- */
        @media (max-width: 980px) {
            .login-shell { grid-template-columns: minmax(0, .9fr) minmax(470px, 1.1fr); }
            .illustration-stage { width: 112%; left: 47%; bottom: -28px; }
            .form-panel-wrap { padding-inline: 42px; }
        }

        @media (max-width: 820px) {
            html, body {
                width: 100%;
                min-height: 100%;
                background: #fff;
            }

            body {
                overflow: hidden;
                overscroll-behavior: none;
            }

            .login-shell {
                grid-template-columns: 1fr;
                grid-template-rows: clamp(330px, 43dvh, 420px) minmax(0, 1fr);
                min-height: 100vh;
                min-height: 100dvh;
                background:
                    radial-gradient(circle at 84% 5%, rgba(255,248,242,.98) 0%, rgba(255,248,242,.72) 24%, rgba(255,255,255,0) 47%),
                    linear-gradient(180deg, #f4d8d9 0%, #f8e8e3 25%, #fff8f4 43%, #ffffff 57%, #ffffff 100%);
            }

            /* Short, soft transition from the illustration into the form. */
            .login-shell::before {
                left: -26vw;
                top: -5vh;
                bottom: auto;
                width: 92vw;
                height: 44vh;
                background: radial-gradient(ellipse at 48% 48%, rgba(121,35,58,.30) 0%, rgba(142,54,77,.14) 43%, rgba(125,36,57,0) 73%);
                filter: blur(18px);
                opacity: .95;
                transform: none;
            }

            .login-shell::after {
                background: linear-gradient(180deg,
                    rgba(255,255,255,0) 30%,
                    rgba(255,255,255,.14) 37%,
                    rgba(255,255,255,.72) 45%,
                    rgba(255,255,255,.98) 52%,
                    #fff 60%);
            }

            .visual-panel {
                min-height: 0;
                overflow: hidden;
                background: transparent;
            }

            /* Decorative organic shapes inspired by the approved mobile mockup. */
            .visual-panel::before,
            .visual-panel::after {
                content: "";
                position: absolute;
                z-index: 1;
                pointer-events: none;
                background: rgba(142, 62, 82, .14);
            }

            .visual-panel::before {
                left: -24%;
                top: 28%;
                width: 66%;
                height: 52%;
                border-radius: 44% 56% 66% 34% / 48% 44% 56% 52%;
                transform: rotate(16deg);
            }

            .visual-panel::after {
                right: -23%;
                top: 39%;
                width: 58%;
                height: 42%;
                border-radius: 57% 43% 41% 59% / 54% 56% 44% 46%;
                transform: rotate(-14deg);
                background: rgba(153, 74, 92, .10);
            }

            /* Brand sits directly on the background: no card, pill, blur or shadow. */
            .brand-lockup {
                left: 50%;
                top: max(16px, env(safe-area-inset-top));
                transform: translateX(-50%);
                display: flex;
                align-items: center;
                gap: 10px;
                width: max-content;
                max-width: calc(100% - 32px);
                padding: 0;
                border: 0;
                border-radius: 0;
                background: transparent;
                box-shadow: none;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }

            .brand-lockup img {
                width: 48px;
                height: 48px;
                flex: 0 0 48px;
                object-fit: contain;
                filter: drop-shadow(0 4px 7px rgba(125,36,57,.10));
            }

            .brand-copy {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                justify-content: center;
                gap: 3px;
                min-width: 0;
            }

            .brand-copy strong {
                color: #111827;
                font-size: 16px;
                line-height: 1.08;
                font-weight: 800;
                letter-spacing: -.025em;
                white-space: nowrap;
            }

            .brand-copy span {
                display: block;
                color: var(--brand);
                font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif;
                font-size: 11.2px;
                line-height: 1.35;
                font-weight: 700;
                white-space: nowrap;
                text-align: right;
            }

            .illustration-stage {
                width: min(98vw, 440px);
                left: 50%;
                bottom: -18px;
                transform: translateX(-50%);
                z-index: 5;
            }

            .illustration-stage::after {
                left: 11%;
                right: 8%;
                bottom: 2%;
                height: 9%;
                background: rgba(74, 35, 44, .12);
                filter: blur(12px);
                opacity: .72;
            }

            .catering-illustration {
                filter: drop-shadow(0 18px 22px rgba(59,31,38,.10));
            }

            .form-panel-wrap {
                align-items: center;
                justify-content: flex-start;
                min-height: 0;
                padding:
                    clamp(16px, 2.3dvh, 24px)
                    max(24px, env(safe-area-inset-right))
                    max(32px, env(safe-area-inset-bottom))
                    max(24px, env(safe-area-inset-left));
                border-radius: 0;
                background: #fff;
                box-shadow: none;
            }

            .form-panel-wrap::before { display: none; }

            .login-panel {
                width: min(100%, 392px);
                margin: 0 auto;
                transform: none;
            }

            .login-title {
                font-size: clamp(34px, 8.8vw, 40px);
                line-height: 1.03;
                letter-spacing: -.055em;
                color: #0f1e31;
            }

            .login-subtitle {
                margin: 8px 0 22px;
                color: #7f899b;
                font-size: 12.8px;
                line-height: 1.5;
                font-weight: 500;
            }

            .alert-box {
                margin: -4px 0 14px;
                padding: 10px 12px;
                font-size: 11px;
            }

            .field { margin-bottom: 14px; }
            .field-row { margin-bottom: 7px; }
            .field label { color: #162236; font-size: 11.8px; font-weight: 800; }

            .field-control .field-icon {
                left: 16px;
                width: 18px;
                height: 18px;
                color: #99a4b5;
            }

            .form-input {
                --field-border-color: #d9e0ea;
                height: 56px;
                padding-left: 48px;
                border: 1px solid var(--field-border-color);
                border-radius: 13px;
                color: #182335;
                background: #fff;
                box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
                font-size: 13px;
                font-weight: 600;
            }

            .form-input::placeholder { color: #a6b0c0; }
            .form-input:focus {
                border-color: rgba(125,36,57,.72);
                box-shadow: 0 0 0 4px rgba(125,36,57,.08);
            }

            .password-toggle {
                right: 7px;
                width: 42px;
                height: 42px;
                border-radius: 10px;
                color: #8995a8;
            }

            .form-options {
                gap: 12px;
                margin: 2px 0 18px;
            }

            .remember-label,
            .forgot-link {
                font-size: 11.5px;
            }

            .remember-label input {
                width: 18px;
                height: 18px;
                border-radius: 5px;
            }

            .login-button {
                height: 56px;
                border-radius: 13px;
                background: linear-gradient(135deg, #902b47 0%, #7d2439 100%);
                box-shadow: 0 10px 22px rgba(125,36,57,.18);
                font-size: 13.5px;
            }

            .login-button:hover:not(:disabled) {
                box-shadow: 0 12px 26px rgba(125,36,57,.21);
            }

            .contact-line {
                margin-top: 16px;
                color: #7f899a;
                font-size: 11.2px;
            }

            .form-footer {
                bottom: max(10px, env(safe-area-inset-bottom));
                color: #9ea7b5;
                font-size: 9px;
            }
        }

        @media (max-width: 520px) {
            .login-shell {
                grid-template-rows: clamp(330px, 42dvh, 400px) minmax(0, 1fr);
            }

            .brand-lockup {
                top: max(15px, env(safe-area-inset-top));
                gap: 10px;
            }

            .brand-lockup img { width: 48px; height: 48px; flex-basis: 48px; }
            .brand-copy strong { font-size: 16px; }
            .brand-copy span { font-size: 11.2px; }

            .illustration-stage {
                width: min(102vw, 438px);
                bottom: -18px;
            }

            .form-panel-wrap {
                padding-top: 17px;
                padding-inline: max(22px, env(safe-area-inset-left));
                padding-bottom: max(30px, env(safe-area-inset-bottom));
            }
        }

        @media (max-width: 390px) {
            .login-shell {
                grid-template-rows: clamp(304px, 40dvh, 355px) minmax(0, 1fr);
            }

            .brand-lockup {
                top: max(13px, env(safe-area-inset-top));
                max-width: calc(100% - 24px);
            }

            .brand-lockup img { width: 44px; height: 44px; flex-basis: 44px; }
            .brand-copy strong { font-size: 15px; }
            .brand-copy span { display: block; font-size: 10.5px; }

            .illustration-stage {
                width: min(104vw, 400px);
                bottom: -15px;
            }

            .form-panel-wrap { padding-inline: 18px; }
            .login-title { font-size: 32px; }
            .login-subtitle { margin-bottom: 18px; font-size: 12px; }
            .remember-label, .forgot-link { font-size: 10.8px; }
        }

        @media (max-width: 820px) and (max-height: 720px) {
            .login-shell {
                grid-template-rows: clamp(205px, 35dvh, 245px) minmax(0, 1fr);
            }

            .brand-lockup { top: max(7px, env(safe-area-inset-top)); }
            .brand-lockup img { width: 40px; height: 40px; flex-basis: 40px; }
            .brand-copy strong { font-size: 14px; }
            .brand-copy span { font-size: 9.8px; }

            .illustration-stage {
                width: min(78vw, 315px);
                bottom: -16px;
            }

            .form-panel-wrap {
                justify-content: flex-start;
                padding-top: 10px;
                padding-bottom: 16px;
            }

            .login-panel { width: min(100%, 380px); }
            .login-title { font-size: 28px; }
            .login-subtitle { margin: 5px 0 13px; font-size: 11.5px; }
            .alert-box { margin-bottom: 10px; }
            .field { margin-bottom: 9px; }
            .field-row { margin-bottom: 5px; }
            .field label { font-size: 10.8px; }
            .form-input { height: 45px; border-radius: 11px; }
            .form-options { margin: 0 0 10px; }
            .remember-label, .forgot-link { font-size: 10.4px; }
            .login-button { height: 46px; border-radius: 11px; }
            .contact-line { margin-top: 9px; font-size: 10.3px; }
            .form-footer { display: none; }
        }

        /* Keyboard-safe mobile state */
        @media (max-width: 820px) {
            body.keyboard-open .login-shell { grid-template-rows: 0 minmax(0, 1fr); }
            body.keyboard-open .visual-panel { opacity: 0; pointer-events: none; }
            body.keyboard-open .form-panel-wrap {
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                padding-top: max(12px, env(safe-area-inset-top));
            }
            body.keyboard-open .form-footer { display: none; }
        }


        /* =========================================================
           2027 MOBILE HERO REFINEMENT
           - centered logo + bilingual brand
           - larger catering artwork
           - curved white sign-in sheet overlapping the hero
           ========================================================= */
        @media (max-width: 820px) {
            .login-shell {
                grid-template-rows: clamp(370px, 45.5dvh, 438px) minmax(0, 1fr);
                background:
                    radial-gradient(circle at 88% 3%, rgba(255,250,245,.96) 0%, rgba(255,250,245,.56) 24%, transparent 47%),
                    radial-gradient(ellipse 86% 58% at -3% 27%, rgba(141,55,77,.19) 0%, rgba(141,55,77,.08) 48%, transparent 72%),
                    linear-gradient(180deg, #f5dddd 0%, #f8e7e2 33%, #fff8f4 55%, #ffffff 72%, #ffffff 100%);
            }

            .login-shell::before {
                left: -32vw;
                top: 2vh;
                width: 112vw;
                height: 43vh;
                background: radial-gradient(ellipse at 47% 51%, rgba(122,36,58,.22) 0%, rgba(145,58,79,.10) 46%, rgba(125,36,57,0) 73%);
                filter: blur(20px);
            }

            .login-shell::after {
                background: linear-gradient(180deg,
                    rgba(255,255,255,0) 32%,
                    rgba(255,255,255,.04) 41%,
                    rgba(255,255,255,.22) 49%,
                    rgba(255,255,255,.54) 57%,
                    rgba(255,255,255,.88) 66%,
                    #fff 77%);
            }

            .visual-panel::before {
                left: -31%;
                top: 23%;
                width: 79%;
                height: 58%;
                border-radius: 48% 52% 68% 32% / 48% 42% 58% 52%;
                transform: rotate(14deg);
                background: rgba(132,45,68,.12);
            }

            .visual-panel::after {
                right: -31%;
                top: 37%;
                width: 72%;
                height: 46%;
                border-radius: 63% 37% 45% 55% / 58% 61% 39% 42%;
                transform: rotate(-13deg);
                background: rgba(147,65,84,.085);
            }

            .brand-lockup {
                left: 50%;
                top: max(22px, env(safe-area-inset-top));
                transform: translateX(-50%);
                gap: 12px;
                max-width: calc(100% - 28px);
                padding: 0;
                background: transparent;
                border: 0;
                box-shadow: none;
            }

            .brand-lockup img {
                width: 58px;
                height: 58px;
                flex: 0 0 58px;
                filter: drop-shadow(0 5px 9px rgba(125,36,57,.10));
            }

            .brand-copy {
                align-items: flex-end;
                gap: 4px;
            }

            .brand-copy strong {
                color: #111827;
                font-size: 20px;
                line-height: 1.02;
                font-weight: 800;
                letter-spacing: -.035em;
            }

            .brand-copy span {
                display: block;
                color: var(--brand);
                font-size: 13px;
                line-height: 1.25;
                font-weight: 700;
                letter-spacing: 0;
            }

            .illustration-stage {
                width: min(108vw, 472px);
                left: 50%;
                bottom: -6px;
                transform: translateX(-50%);
            }

            .illustration-stage::after {
                left: 10%;
                right: 8%;
                bottom: 1%;
                height: 8%;
                background: rgba(71,32,42,.11);
                filter: blur(12px);
                opacity: .72;
            }

            .form-panel-wrap {
                position: relative;
                z-index: 10;
                justify-content: flex-start;
                margin-top: -20px;
                padding:
                    30px
                    max(34px, env(safe-area-inset-right))
                    max(34px, env(safe-area-inset-bottom))
                    max(34px, env(safe-area-inset-left));
                border-radius: 38px 38px 0 0;
                background: #fff;
                box-shadow: 0 -12px 32px rgba(42, 29, 33, .035);
            }

            .login-panel {
                width: min(100%, 390px);
            }

            .login-title {
                color: #0b1e35;
                font-size: clamp(36px, 9.4vw, 42px);
                line-height: .98;
                letter-spacing: -.06em;
            }

            .login-subtitle {
                margin: 10px 0 23px;
                color: #818a9b;
                font-size: 12.6px;
                line-height: 1.5;
            }

            .field {
                margin-bottom: 14px;
            }

            .field-row {
                margin-bottom: 7px;
            }

            .field label {
                font-size: 11.6px;
            }

            .form-input {
                height: 55px;
                border-radius: 14px;
            }

            .form-options {
                margin: 2px 0 17px;
            }

            .login-button {
                height: 55px;
                border-radius: 14px;
                box-shadow: 0 12px 24px rgba(125,36,57,.17);
            }

            .contact-line {
                margin-top: 15px;
            }

            .form-footer {
                bottom: max(9px, env(safe-area-inset-bottom));
            }
        }

        @media (max-width: 520px) {
            .login-shell {
                grid-template-rows: clamp(356px, 44dvh, 422px) minmax(0, 1fr);
            }

            .brand-lockup {
                top: max(19px, env(safe-area-inset-top));
                gap: 11px;
            }

            .brand-lockup img {
                width: 54px;
                height: 54px;
                flex-basis: 54px;
            }

            .brand-copy strong { font-size: 18px; }
            .brand-copy span { font-size: 12px; }

            .illustration-stage {
                width: min(109vw, 466px);
                bottom: -6px;
            }

            .form-panel-wrap {
                margin-top: -18px;
                padding-top: 27px;
                padding-inline: max(22px, env(safe-area-inset-left));
                border-radius: 32px 32px 0 0;
            }

            .login-title { font-size: clamp(34px, 9.1vw, 39px); }
        }

        @media (max-width: 390px) {
            .login-shell {
                grid-template-rows: clamp(318px, 41.5dvh, 365px) minmax(0, 1fr);
            }

            .brand-lockup {
                top: max(15px, env(safe-area-inset-top));
                gap: 9px;
            }

            .brand-lockup img {
                width: 48px;
                height: 48px;
                flex-basis: 48px;
            }

            .brand-copy strong { font-size: 16px; }
            .brand-copy span { font-size: 10.6px; }

            .illustration-stage {
                width: min(110vw, 420px);
                bottom: -4px;
            }

            .form-panel-wrap {
                margin-top: -16px;
                padding-top: 23px;
                padding-inline: 18px;
                border-radius: 28px 28px 0 0;
            }

            .login-title { font-size: 32px; }
            .login-subtitle { margin-bottom: 18px; font-size: 11.8px; }
        }

        @media (max-width: 820px) and (max-height: 720px) {
            .login-shell {
                grid-template-rows: clamp(220px, 36dvh, 260px) minmax(0, 1fr);
            }

            .brand-lockup { top: max(7px, env(safe-area-inset-top)); }
            .brand-lockup img { width: 38px; height: 38px; flex-basis: 38px; }
            .brand-copy strong { font-size: 13.5px; }
            .brand-copy span { font-size: 9px; }

            .illustration-stage {
                width: min(80vw, 325px);
                bottom: -5px;
            }

            .form-panel-wrap {
                margin-top: -12px;
                padding-top: 15px;
                padding-bottom: 16px;
                border-radius: 24px 24px 0 0;
            }

            .login-title { font-size: 28px; }
            .login-subtitle { margin: 5px 0 12px; font-size: 11.3px; }
            .field { margin-bottom: 9px; }
            .field-row { margin-bottom: 5px; }
            .form-input { height: 45px; }
            .form-options { margin: 0 0 10px; }
            .login-button { height: 46px; }
            .contact-line { margin-top: 8px; }
            .form-footer { display: none; }
        }

        @media (max-width: 820px) {
            body.keyboard-open .form-panel-wrap {
                margin-top: 0;
                border-radius: 0;
                padding-top: max(14px, env(safe-area-inset-top));
            }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                scroll-behavior: auto !important;
                animation-duration: .001ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .001ms !important;
            }
        }
    

        /* =========================================================
           ALSADAH LOGIN — BUFFET VISUAL FINAL OVERRIDE
        ========================================================= */
        .login-shell {
            grid-template-columns: minmax(520px, 52%) minmax(520px, 48%) !important;
            background: #ffffff !important;
        }
        .login-shell::before,
        .login-shell::after { content: none !important; }

        .visual-panel {
            position: relative !important;
            overflow: hidden !important;
            isolation: isolate;
            background: #f8eee8 !important;
        }
        .buffet-visual {
            position: absolute;
            z-index: 1;
            inset: 0;
            overflow: hidden;
            pointer-events: none;
        }
        .buffet-visual img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 51% 50%;
            user-select: none;
            pointer-events: none;
            transform: none !important;
            transition: none !important;
            filter: none !important;
        }
        .visual-panel::before {
            content: "" !important;
            position: absolute !important;
            z-index: 3 !important;
            top: 0 !important;
            right: -1px !important;
            bottom: 0 !important;
            left: auto !important;
            width: clamp(110px, 15vw, 260px) !important;
            height: auto !important;
            pointer-events: none;
            background: linear-gradient(90deg,
                rgba(255,255,255,0) 0%,
                rgba(255,255,255,.10) 22%,
                rgba(255,255,255,.48) 58%,
                rgba(255,255,255,.90) 86%,
                #ffffff 100%) !important;
        }
        .visual-panel::after {
            content: "" !important;
            position: absolute !important;
            z-index: 2 !important;
            inset: 0 !important;
            pointer-events: none;
            background: linear-gradient(180deg, rgba(62,18,31,.025), rgba(62,18,31,0) 38%) !important;
        }

        .brand-lockup {
            z-index: 10 !important;
            left: clamp(28px, 3.25vw, 56px) !important;
            top: clamp(26px, 3vw, 46px) !important;
            transform: none !important;
            padding: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        .brand-lockup img {
            width: 48px !important;
            height: 48px !important;
            flex-basis: 48px !important;
            filter: drop-shadow(0 5px 12px rgba(66,28,38,.11));
        }
        .brand-copy strong {
            color: #151920 !important;
            text-shadow: 0 1px 12px rgba(255,255,255,.86);
        }
        .brand-copy span {
            color: var(--brand) !important;
            text-shadow: 0 1px 10px rgba(255,255,255,.90);
        }
        .illustration-stage,
        .catering-illustration { display: none !important; }

        .form-panel-wrap {
            z-index: 5 !important;
            justify-content: center !important;
            align-items: center !important;
            background: #ffffff !important;
            padding: clamp(34px, 4.2vw, 66px) clamp(42px, 5.3vw, 90px) !important;
        }
        .login-panel {
            width: min(100%, 455px) !important;
            margin: auto !important;
            transform: none !important;
        }

        @media (max-width: 1080px) and (min-width: 821px) {
            .login-shell { grid-template-columns: minmax(420px, 48%) minmax(470px, 52%) !important; }
            .visual-panel::before { width: 150px !important; }
            .buffet-visual img { object-position: 54% 50% !important; }
            .form-panel-wrap { padding-inline: 42px !important; }
        }

        @media (max-width: 820px) {
            body { overflow: hidden !important; background: #ffffff !important; }
            .login-shell {
                grid-template-columns: 1fr !important;
                grid-template-rows: clamp(230px, 34dvh, 320px) minmax(0, 1fr) !important;
                height: 100dvh !important;
                min-height: 100dvh !important;
                background: #ffffff !important;
            }
            .visual-panel { min-height: 0 !important; overflow: hidden !important; background: #f8eee8 !important; }
            .buffet-visual img { object-fit: cover !important; object-position: 50% 54% !important; }
            .visual-panel::before {
                left: 0 !important;
                right: 0 !important;
                top: auto !important;
                bottom: -1px !important;
                width: 100% !important;
                height: 42% !important;
                background: linear-gradient(180deg,
                    rgba(255,255,255,0) 0%,
                    rgba(255,255,255,.16) 30%,
                    rgba(255,255,255,.66) 68%,
                    #ffffff 100%) !important;
            }
            .visual-panel::after { background: linear-gradient(180deg, rgba(71,24,38,.035), transparent 48%) !important; }
            .brand-lockup {
                left: max(18px, env(safe-area-inset-left)) !important;
                top: max(14px, env(safe-area-inset-top)) !important;
                gap: 9px !important;
                padding: 7px 10px !important;
                border-radius: 14px !important;
                background: rgba(255,255,255,.84) !important;
                box-shadow: 0 8px 24px rgba(61,27,38,.10) !important;
                backdrop-filter: blur(10px) !important;
                -webkit-backdrop-filter: blur(10px) !important;
            }
            .brand-lockup img { width: 36px !important; height: 36px !important; flex-basis: 36px !important; }
            .brand-copy strong { font-size: 12.5px !important; }
            .brand-copy span { font-size: 8px !important; }
            .form-panel-wrap {
                min-height: 0 !important;
                align-items: center !important;
                justify-content: center !important;
                padding-top: clamp(20px, 3dvh, 32px) !important;
                padding-right: max(20px, env(safe-area-inset-right)) !important;
                padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 18px)) !important;
                padding-left: max(20px, env(safe-area-inset-left)) !important;
                overflow: hidden !important;
            }
            .login-panel { width: min(100%, 390px) !important; margin: auto !important; transform: none !important; }
            .login-title { font-size: clamp(30px, 8vw, 35px) !important; line-height: 1.06 !important; }
            .login-subtitle { margin: 7px 0 20px !important; font-size: 12.5px !important; }
            .field { margin-bottom: 13px !important; }
            .field-row { margin-bottom: 6px !important; }
            .form-input { height: 50px !important; }
            .form-options { margin: 1px 0 16px !important; }
            .login-button { height: 51px !important; }
            .contact-line { margin-top: 15px !important; }
            .form-footer { bottom: max(8px, env(safe-area-inset-bottom)) !important; }
        }

        @media (max-width: 520px) {
            .login-shell { grid-template-rows: clamp(205px, 31dvh, 270px) minmax(0, 1fr) !important; }
            .buffet-visual img { object-position: 51% 55% !important; }
            .brand-lockup {
                left: max(14px, env(safe-area-inset-left)) !important;
                top: max(11px, env(safe-area-inset-top)) !important;
            }
            .form-panel-wrap { padding-inline: 20px !important; }
        }

        @media (max-width: 390px) {
            .login-shell { grid-template-rows: clamp(188px, 29dvh, 235px) minmax(0, 1fr) !important; }
            .brand-copy span { display: block !important; }
            .brand-lockup img { width: 33px !important; height: 33px !important; flex-basis: 33px !important; }
            .brand-copy strong { font-size: 11.5px !important; }
            .brand-copy span { font-size: 7.2px !important; }
            .form-panel-wrap { padding-inline: 17px !important; }
        }

        @media (max-width: 820px) and (max-height: 720px) {
            .login-shell { grid-template-rows: 135px minmax(0, 1fr) !important; }
            .brand-lockup { top: max(7px, env(safe-area-inset-top)) !important; }
            .brand-lockup img { width: 30px !important; height: 30px !important; flex-basis: 30px !important; }
            .buffet-visual img { object-position: 50% 58% !important; }
            .form-panel-wrap { justify-content: center !important; padding-top: 12px !important; padding-bottom: 16px !important; }
            .login-title { font-size: 27px !important; }
            .login-subtitle { margin: 5px 0 13px !important; }
            .field { margin-bottom: 9px !important; }
            .form-input { height: 45px !important; }
            .form-options { margin-bottom: 10px !important; }
            .login-button { height: 46px !important; }
            .contact-line { margin-top: 10px !important; }
            .form-footer { display: none !important; }
        }

        @media (max-width: 820px) {
            body.keyboard-open .login-shell { grid-template-rows: 0 minmax(0, 1fr) !important; }
            body.keyboard-open .visual-panel { opacity: 0 !important; pointer-events: none !important; }
            body.keyboard-open .form-panel-wrap {
                justify-content: flex-start !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch;
                padding-top: max(12px, env(safe-area-inset-top)) !important;
            }
            body.keyboard-open .form-footer { display: none !important; }
        }



        /* =========================================================
           FINAL BRAND POSITION FIX
           Keep the Alsadah logo/name away from the busy flowers and
           anchor it on the clearer right side of the buffet visual.
        ========================================================= */
        .visual-panel .brand-lockup {
            left: auto !important;
            right: clamp(28px, 3.2vw, 54px) !important;
            top: clamp(24px, 3vw, 46px) !important;
            transform: none !important;
            width: max-content;
            max-width: calc(100% - 40px);
            padding: 0 !important;
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        .visual-panel .brand-copy {
            align-items: flex-start !important;
            text-align: left;
        }

        .visual-panel .brand-copy strong {
            color: #111827;
            text-shadow: 0 1px 5px rgba(255,255,255,.92), 0 0 12px rgba(255,255,255,.72);
        }

        .visual-panel .brand-copy span {
            text-shadow: 0 1px 5px rgba(255,255,255,.94), 0 0 12px rgba(255,255,255,.74);
        }

        .visual-panel .brand-lockup img {
            filter: drop-shadow(0 4px 9px rgba(255,255,255,.88)) drop-shadow(0 5px 10px rgba(125,36,57,.14));
        }

        @media (max-width: 820px) {
            .visual-panel .brand-lockup {
                left: auto !important;
                right: max(16px, env(safe-area-inset-right)) !important;
                top: max(14px, env(safe-area-inset-top)) !important;
                transform: none !important;
                max-width: calc(100% - 32px);
                gap: 9px !important;
            }

            .visual-panel .brand-lockup img {
                width: 44px !important;
                height: 44px !important;
                flex-basis: 44px !important;
            }

            .visual-panel .brand-copy strong {
                font-size: 15px !important;
            }

            .visual-panel .brand-copy span {
                display: block !important;
                font-size: 10px !important;
            }
        }

        @media (max-width: 390px) {
            .visual-panel .brand-lockup {
                right: max(12px, env(safe-area-inset-right)) !important;
                top: max(10px, env(safe-area-inset-top)) !important;
                gap: 7px !important;
            }

            .visual-panel .brand-lockup img {
                width: 38px !important;
                height: 38px !important;
                flex-basis: 38px !important;
            }

            .visual-panel .brand-copy strong {
                font-size: 13px !important;
            }

            .visual-panel .brand-copy span {
                font-size: 8.8px !important;
            }
        }


        /* =========================================================
           BRAND INSIDE SIGN-IN PANEL
           Logo + Alsadah Kitchen now belongs to the right/form side.
        ========================================================= */
        .form-panel-wrap .form-brand {
            position: static !important;
            inset: auto !important;
            left: auto !important;
            right: auto !important;
            top: auto !important;
            bottom: auto !important;
            transform: none !important;
            width: max-content !important;
            max-width: 100% !important;
            margin: 0 0 34px 0 !important;
            padding: 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 11px !important;
            border: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            z-index: auto !important;
        }

        .form-panel-wrap .form-brand img {
            width: 46px !important;
            height: 46px !important;
            flex: 0 0 46px !important;
            object-fit: contain;
            filter: none !important;
        }

        .form-panel-wrap .form-brand .brand-copy {
            display: grid !important;
            gap: 2px !important;
            align-items: start !important;
            text-align: left !important;
            min-width: 0;
        }

        .form-panel-wrap .form-brand .brand-copy strong {
            color: #151920 !important;
            font-size: 15px !important;
            line-height: 1.15 !important;
            font-weight: 800 !important;
            text-shadow: none !important;
            white-space: nowrap;
        }

        .form-panel-wrap .form-brand .brand-copy span {
            display: block !important;
            color: var(--brand) !important;
            font-size: 10px !important;
            line-height: 1.45 !important;
            font-weight: 600 !important;
            text-shadow: none !important;
            white-space: nowrap;
        }

        @media (max-width: 820px) {
            .form-panel-wrap .form-brand {
                margin-bottom: 22px !important;
                gap: 9px !important;
            }
            .form-panel-wrap .form-brand img {
                width: 40px !important;
                height: 40px !important;
                flex-basis: 40px !important;
            }
            .form-panel-wrap .form-brand .brand-copy strong { font-size: 13px !important; }
            .form-panel-wrap .form-brand .brand-copy span { font-size: 8.5px !important; }
        }

        @media (max-width: 520px) {
            .form-panel-wrap .form-brand { margin-bottom: 18px !important; }
        }

        /* =========================================================
           PAGE BRAND — FIXED TO TOP-RIGHT OF THE WHOLE PAGE
        ========================================================= */
        .page-brand {
            position: absolute !important;
            top: clamp(22px, 2.5vw, 38px) !important;
            right: clamp(26px, 3.2vw, 56px) !important;
            left: auto !important;
            bottom: auto !important;
            transform: none !important;
            z-index: 30 !important;
            width: max-content !important;
            max-width: calc(100vw - 40px) !important;
            margin: 0 !important;
            padding: 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 11px !important;
            background: transparent !important;
            border: 0 !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        .page-brand img {
            width: 46px !important;
            height: 46px !important;
            flex: 0 0 46px !important;
            object-fit: contain !important;
            filter: drop-shadow(0 4px 10px rgba(125,36,57,.08)) !important;
        }

        .page-brand .brand-copy {
            display: grid !important;
            gap: 2px !important;
            align-items: start !important;
            text-align: left !important;
            min-width: 0 !important;
        }

        .page-brand .brand-copy strong {
            color: #151920 !important;
            font-size: 15px !important;
            line-height: 1.15 !important;
            font-weight: 800 !important;
            white-space: nowrap !important;
            text-shadow: none !important;
        }

        .page-brand .brand-copy span {
            display: block !important;
            color: var(--brand) !important;
            font-size: 10px !important;
            line-height: 1.4 !important;
            font-weight: 600 !important;
            white-space: nowrap !important;
            text-shadow: none !important;
        }

        @media (max-width: 820px) {
            .page-brand {
                top: max(12px, env(safe-area-inset-top)) !important;
                right: max(16px, env(safe-area-inset-right)) !important;
                gap: 8px !important;
            }
            .page-brand img {
                width: 36px !important;
                height: 36px !important;
                flex-basis: 36px !important;
            }
            .page-brand .brand-copy strong { font-size: 12.5px !important; }
            .page-brand .brand-copy span { font-size: 8px !important; }
        }

        @media (max-width: 390px) {
            .page-brand {
                top: max(10px, env(safe-area-inset-top)) !important;
                right: max(12px, env(safe-area-inset-right)) !important;
            }
            .page-brand img {
                width: 32px !important;
                height: 32px !important;
                flex-basis: 32px !important;
            }
            .page-brand .brand-copy strong { font-size: 11.5px !important; }
            .page-brand .brand-copy span { display: none !important; }
        }

        /* =========================================================
           FINAL TOP-RIGHT BRAND OVERRIDE
           Text stays to the LEFT, logo is the far-right item.
        ========================================================= */
        .page-brand {
            position: fixed !important;
            top: 28px !important;
            right: 34px !important;
            left: auto !important;
            bottom: auto !important;
            transform: none !important;
            flex-direction: row-reverse !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 10px !important;
            width: max-content !important;
            max-width: calc(100vw - 40px) !important;
            margin: 0 !important;
            padding: 0 !important;
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
            z-index: 999 !important;
        }

        .page-brand .brand-copy {
            text-align: right !important;
            align-items: end !important;
            justify-items: end !important;
        }

        .page-brand .brand-copy strong,
        .page-brand .brand-copy span {
            text-align: right !important;
        }

        @media (max-width: 820px) {
            .page-brand {
                top: max(14px, env(safe-area-inset-top)) !important;
                right: max(16px, env(safe-area-inset-right)) !important;
                gap: 8px !important;
            }
        }

        @media (max-width: 390px) {
            .page-brand {
                top: max(10px, env(safe-area-inset-top)) !important;
                right: max(12px, env(safe-area-inset-right)) !important;
            }
            .page-brand .brand-copy span { display: block !important; }
        }

    

        /* =========================================================
           FINAL SMALL-SCREEN LAYOUT FIX
           Keeps the buffet visual balanced and centres the login area
           without the large empty gap seen on tall phones.
        ========================================================= */
        @media (max-width: 820px) {
            html,
            body {
                width: 100% !important;
                height: 100% !important;
                min-height: 100% !important;
                overflow: hidden !important;
                background: #ffffff !important;
            }

            .login-shell {
                width: 100% !important;
                height: 100svh !important;
                height: 100dvh !important;
                min-height: 100svh !important;
                min-height: 100dvh !important;
                grid-template-columns: 1fr !important;
                grid-template-rows: clamp(205px, 28.5dvh, 270px) minmax(0, 1fr) !important;
                overflow: hidden !important;
                background: #ffffff !important;
            }

            .visual-panel {
                min-height: 0 !important;
                overflow: hidden !important;
                background: #f6ebe5 !important;
            }

            .buffet-visual {
                inset: 0 !important;
                overflow: hidden !important;
            }

            .buffet-visual img {
                width: 100% !important;
                height: 100% !important;
                object-fit: cover !important;
                object-position: 50% 51% !important;
                transform: none !important;
            }

            /* Gentle fade only at the bottom of the buffet image. */
            .visual-panel::before {
                content: "" !important;
                position: absolute !important;
                z-index: 3 !important;
                left: 0 !important;
                right: 0 !important;
                top: auto !important;
                bottom: -1px !important;
                width: 100% !important;
                height: 30% !important;
                background: linear-gradient(180deg,
                    rgba(255,255,255,0) 0%,
                    rgba(255,255,255,.18) 38%,
                    rgba(255,255,255,.72) 76%,
                    #ffffff 100%) !important;
                pointer-events: none !important;
            }

            .visual-panel::after {
                content: none !important;
            }

            /* Brand stays at the top-right and does not affect layout. */
            .page-brand {
                position: fixed !important;
                top: max(12px, env(safe-area-inset-top)) !important;
                right: max(14px, env(safe-area-inset-right)) !important;
                left: auto !important;
                flex-direction: row-reverse !important;
                gap: 8px !important;
                max-width: calc(100vw - 28px) !important;
                z-index: 50 !important;
                pointer-events: none !important;
            }

            .page-brand img {
                width: 36px !important;
                height: 36px !important;
                flex: 0 0 36px !important;
            }

            .page-brand .brand-copy strong {
                font-size: 12.5px !important;
                line-height: 1.08 !important;
                text-shadow: 0 1px 8px rgba(255,255,255,.96), 0 0 16px rgba(255,255,255,.88) !important;
            }

            .page-brand .brand-copy span {
                display: block !important;
                font-size: 8.2px !important;
                line-height: 1.25 !important;
                text-shadow: 0 1px 8px rgba(255,255,255,.98), 0 0 15px rgba(255,255,255,.90) !important;
            }

            .form-panel-wrap {
                position: relative !important;
                z-index: 10 !important;
                min-height: 0 !important;
                margin-top: -14px !important;
                padding:
                    clamp(18px, 2.3dvh, 24px)
                    max(20px, env(safe-area-inset-right))
                    max(34px, calc(env(safe-area-inset-bottom) + 24px))
                    max(20px, env(safe-area-inset-left)) !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                overflow: hidden !important;
                border-radius: 28px 28px 0 0 !important;
                background: #ffffff !important;
                box-shadow: 0 -8px 26px rgba(50, 30, 36, .035) !important;
            }

            .login-panel {
                width: min(100%, 390px) !important;
                margin: auto !important;
                transform: translateY(-2.2dvh) !important;
            }

            .login-title {
                font-size: clamp(30px, 7.8vw, 35px) !important;
                line-height: 1.04 !important;
                letter-spacing: -.05em !important;
            }

            .login-subtitle {
                margin: 7px 0 20px !important;
                font-size: 12.3px !important;
                line-height: 1.48 !important;
            }

            .field {
                margin-bottom: 13px !important;
            }

            .field-row {
                margin-bottom: 6px !important;
            }

            .field label {
                font-size: 11.4px !important;
            }

            .form-input {
                height: 50px !important;
                border-radius: 12px !important;
                font-size: 13px !important;
            }

            .form-options {
                gap: 10px !important;
                margin: 1px 0 15px !important;
            }

            .remember-label,
            .forgot-link {
                font-size: 11.1px !important;
            }

            .login-button {
                height: 50px !important;
                border-radius: 12px !important;
                gap: 0 !important;
            }

            .login-button svg,
            .login-button #btnIcon {
                display: none !important;
            }

            .contact-line {
                margin-top: 14px !important;
                font-size: 10.8px !important;
            }

            .form-footer {
                bottom: max(7px, env(safe-area-inset-bottom)) !important;
                font-size: 7.8px !important;
            }
        }

        /* Tall phones (e.g. iPhone Pro Max): remove the oversized white gap. */
        @media (max-width: 520px) and (min-height: 780px) {
            .login-shell {
                grid-template-rows: clamp(205px, 27dvh, 258px) minmax(0, 1fr) !important;
            }

            .login-panel {
                transform: translateY(-3.2dvh) !important;
            }
        }

        /* Narrow phones. */
        @media (max-width: 390px) {
            .login-shell {
                grid-template-rows: clamp(185px, 26dvh, 228px) minmax(0, 1fr) !important;
            }

            .page-brand {
                top: max(9px, env(safe-area-inset-top)) !important;
                right: max(10px, env(safe-area-inset-right)) !important;
                gap: 6px !important;
            }

            .page-brand img {
                width: 31px !important;
                height: 31px !important;
                flex-basis: 31px !important;
            }

            .page-brand .brand-copy strong { font-size: 11.2px !important; }
            .page-brand .brand-copy span { font-size: 7.3px !important; }

            .form-panel-wrap {
                margin-top: -12px !important;
                padding-left: 17px !important;
                padding-right: 17px !important;
                border-radius: 24px 24px 0 0 !important;
            }

            .login-panel {
                transform: translateY(-1.8dvh) !important;
            }

            .login-title { font-size: 29px !important; }
            .login-subtitle { margin-bottom: 16px !important; font-size: 11.5px !important; }
            .form-input { height: 48px !important; }
            .login-button { height: 48px !important; }
            .remember-label,
            .forgot-link { font-size: 10.4px !important; }
            .contact-line { font-size: 10.2px !important; }
        }

        /* Short-height phones: prioritise access to every field without scrolling. */
        @media (max-width: 820px) and (max-height: 720px) {
            .login-shell {
                grid-template-rows: clamp(125px, 24dvh, 165px) minmax(0, 1fr) !important;
            }

            .page-brand img {
                width: 29px !important;
                height: 29px !important;
                flex-basis: 29px !important;
            }

            .page-brand .brand-copy strong { font-size: 10.8px !important; }
            .page-brand .brand-copy span { font-size: 7px !important; }

            .buffet-visual img { object-position: 50% 56% !important; }

            .form-panel-wrap {
                margin-top: -10px !important;
                justify-content: center !important;
                padding-top: 10px !important;
                padding-bottom: 14px !important;
                border-radius: 22px 22px 0 0 !important;
            }

            .login-panel {
                transform: none !important;
            }

            .login-title { font-size: 26px !important; }
            .login-subtitle { margin: 4px 0 11px !important; font-size: 10.8px !important; }
            .field { margin-bottom: 8px !important; }
            .field-row { margin-bottom: 4px !important; }
            .field label { font-size: 10.5px !important; }
            .form-input { height: 43px !important; font-size: 12px !important; }
            .form-options { margin: 0 0 9px !important; }
            .remember-label,
            .forgot-link { font-size: 10px !important; }
            .login-button { height: 44px !important; }
            .contact-line { margin-top: 8px !important; font-size: 9.8px !important; }
            .form-footer { display: none !important; }
        }

        /* Mobile landscape stays compact and balanced. */
        @media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
            .login-shell {
                grid-template-columns: minmax(210px, 40%) minmax(0, 60%) !important;
                grid-template-rows: 1fr !important;
            }

            .form-panel-wrap {
                margin-top: 0 !important;
                border-radius: 0 !important;
                padding: 12px max(18px, env(safe-area-inset-right)) 16px 22px !important;
            }

            .login-panel {
                width: min(100%, 420px) !important;
                transform: none !important;
            }

            .login-title { font-size: 25px !important; }
            .login-subtitle { display: none !important; }
            .field { margin-bottom: 7px !important; }
            .form-input { height: 42px !important; }
            .login-button { height: 43px !important; }
            .contact-line { margin-top: 7px !important; }
            .form-footer { display: none !important; }
        }

        /* Keyboard state: form becomes scroll-safe and image disappears. */
        @media (max-width: 820px) {
            body.keyboard-open .login-shell {
                grid-template-rows: 0 minmax(0, 1fr) !important;
            }

            body.keyboard-open .visual-panel {
                opacity: 0 !important;
                pointer-events: none !important;
            }

            body.keyboard-open .page-brand {
                display: none !important;
            }

            body.keyboard-open .form-panel-wrap {
                margin-top: 0 !important;
                border-radius: 0 !important;
                justify-content: flex-start !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch !important;
                padding-top: max(14px, env(safe-area-inset-top)) !important;
            }

            body.keyboard-open .login-panel {
                transform: none !important;
                margin: 0 auto !important;
            }

            body.keyboard-open .form-footer {
                display: none !important;
            }
        }


        /* =========================================================
           FINAL RESPONSIVE LAYOUT
           Desktop keeps the original split-screen design.
           Only small screens switch to the stacked mobile layout.
        ========================================================= */
        .mobile-form-brand {
            display: none;
        }

        @media (min-width: 821px) {
            /* Preserve the desktop design exactly as before. */
            .page-brand {
                display: flex !important;
            }
            .mobile-form-brand {
                display: none !important;
            }
            .form-panel-wrap {
                margin-top: 0 !important;
                border-radius: 0 !important;
                background: transparent !important;
                box-shadow: none !important;
            }
        }

        @media (max-width: 820px) {
            html,
            body {
                width: 100%;
                height: 100%;
                min-height: 100%;
                background: #ffffff;
            }

            body {
                min-width: 320px;
                overflow: hidden;
            }

            .login-shell {
                display: grid !important;
                grid-template-columns: 1fr !important;
                grid-template-rows: clamp(250px, 34dvh, 330px) minmax(0, 1fr) !important;
                width: 100% !important;
                height: 100vh !important;
                height: 100dvh !important;
                min-height: 0 !important;
                overflow: hidden !important;
                background: #ffffff !important;
            }

            .login-shell::before,
            .login-shell::after {
                display: none !important;
            }

            /* Desktop brand is hidden only on small screens. */
            .page-brand {
                display: none !important;
            }

            .visual-panel {
                position: relative !important;
                min-height: 0 !important;
                overflow: hidden !important;
                background: #f7eee9 !important;
            }

            .visual-panel::before,
            .visual-panel::after {
                content: none !important;
                display: none !important;
            }

            .buffet-visual {
                position: absolute !important;
                inset: 0 !important;
                width: 100% !important;
                height: 100% !important;
                overflow: hidden !important;
            }

            .buffet-visual img {
                display: block !important;
                width: 100% !important;
                height: 100% !important;
                max-width: none !important;
                object-fit: cover !important;
                object-position: 50% 50% !important;
                transform: none !important;
                filter: none !important;
            }

            /* White sheet overlaps the photo slightly and becomes the mobile form surface. */
            .form-panel-wrap {
                position: relative !important;
                z-index: 5 !important;
                width: 100% !important;
                min-height: 0 !important;
                margin-top: -22px !important;
                padding: 0 max(20px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)) !important;
                display: flex !important;
                align-items: center !important;
                justify-content: flex-start !important;
                overflow: hidden !important;
                border-radius: 28px 28px 0 0 !important;
                background: #ffffff !important;
                box-shadow: 0 -12px 34px rgba(49, 31, 36, .08) !important;
            }

            .form-panel-wrap::before {
                display: none !important;
            }

            .login-panel {
                width: min(100%, 390px) !important;
                margin: 0 auto !important;
                padding: 22px 0 8px !important;
                transform: none !important;
            }

            .mobile-form-brand {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                width: 100% !important;
                margin: 0 auto 18px !important;
                padding: 0 !important;
                gap: 5px !important;
                text-align: center !important;
            }

            .mobile-form-brand img {
                display: block !important;
                width: 48px !important;
                height: 48px !important;
                object-fit: contain !important;
                filter: drop-shadow(0 6px 12px rgba(125,36,57,.10)) !important;
            }

            .mobile-form-brand .brand-copy {
                display: grid !important;
                justify-items: center !important;
                gap: 1px !important;
                width: 100% !important;
                text-align: center !important;
            }

            .mobile-form-brand .brand-copy strong {
                color: #151920 !important;
                font-size: 13px !important;
                line-height: 1.15 !important;
                font-weight: 800 !important;
                letter-spacing: -.02em !important;
                white-space: nowrap !important;
            }

            .mobile-form-brand .brand-copy span {
                display: block !important;
                color: var(--brand) !important;
                font-size: 8.2px !important;
                line-height: 1.35 !important;
                font-weight: 600 !important;
                white-space: nowrap !important;
            }

            .login-title {
                margin: 0 !important;
                font-size: clamp(30px, 8.1vw, 36px) !important;
                line-height: 1.04 !important;
                letter-spacing: -.05em !important;
            }

            .login-subtitle {
                margin: 7px 0 20px !important;
                font-size: 12px !important;
                line-height: 1.45 !important;
            }

            .field {
                margin-bottom: 13px !important;
            }

            .field-row {
                margin-bottom: 6px !important;
            }

            .field label {
                font-size: 11.5px !important;
            }

            .form-input {
                height: 49px !important;
                border-radius: 12px !important;
                font-size: 12.5px !important;
            }

            .form-options {
                margin: 1px 0 14px !important;
                gap: 10px !important;
            }

            .remember-label,
            .forgot-link {
                font-size: 11px !important;
            }

            .login-button {
                height: 49px !important;
                border-radius: 12px !important;
                font-size: 13px !important;
            }

            .contact-line {
                margin-top: 13px !important;
                font-size: 10.5px !important;
            }

            .form-footer {
                bottom: max(6px, env(safe-area-inset-bottom)) !important;
                font-size: 7.5px !important;
            }
        }

        @media (max-width: 430px) {
            .login-shell {
                grid-template-rows: clamp(240px, 32dvh, 300px) minmax(0, 1fr) !important;
            }

            .buffet-visual img {
                object-position: 48% 50% !important;
            }

            .form-panel-wrap {
                margin-top: -20px !important;
                border-radius: 24px 24px 0 0 !important;
                padding-inline: 18px !important;
            }

            .login-panel {
                padding-top: 20px !important;
            }

            .mobile-form-brand {
                margin-bottom: 16px !important;
            }

            .mobile-form-brand img {
                width: 44px !important;
                height: 44px !important;
            }
        }

        @media (max-width: 390px) {
            .login-shell {
                grid-template-rows: clamp(220px, 30dvh, 275px) minmax(0, 1fr) !important;
            }

            .login-panel {
                padding-top: 16px !important;
            }

            .mobile-form-brand {
                margin-bottom: 13px !important;
            }

            .mobile-form-brand img {
                width: 40px !important;
                height: 40px !important;
            }

            .login-title {
                font-size: 29px !important;
            }

            .login-subtitle {
                margin-bottom: 16px !important;
                font-size: 11.4px !important;
            }

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

            .form-input {
                height: 46px !important;
            }

            .form-options {
                margin-bottom: 11px !important;
            }

            .login-button {
                height: 46px !important;
            }

            .contact-line {
                margin-top: 10px !important;
            }
        }

        @media (max-width: 820px) and (max-height: 740px) {
            .login-shell {
                grid-template-rows: 190px minmax(0, 1fr) !important;
            }

            .form-panel-wrap {
                margin-top: -18px !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch !important;
                padding-bottom: 14px !important;
            }

            .login-panel {
                padding-top: 13px !important;
                padding-bottom: 4px !important;
            }

            .mobile-form-brand {
                margin-bottom: 10px !important;
                gap: 2px !important;
            }

            .mobile-form-brand img {
                width: 34px !important;
                height: 34px !important;
            }

            .mobile-form-brand .brand-copy strong {
                font-size: 11.5px !important;
            }

            .mobile-form-brand .brand-copy span {
                font-size: 7px !important;
            }

            .login-title {
                font-size: 26px !important;
            }

            .login-subtitle {
                margin: 4px 0 12px !important;
                font-size: 10.8px !important;
            }

            .field {
                margin-bottom: 8px !important;
            }

            .field-row {
                margin-bottom: 4px !important;
            }

            .form-input,
            .login-button {
                height: 43px !important;
            }

            .form-options {
                margin-bottom: 9px !important;
            }

            .contact-line {
                margin-top: 8px !important;
            }

            .form-footer {
                display: none !important;
            }
        }

        @media (max-width: 820px) and (orientation: landscape) {
            .login-shell {
                grid-template-columns: minmax(220px, 40%) minmax(0, 60%) !important;
                grid-template-rows: 1fr !important;
            }

            .form-panel-wrap {
                margin-top: 0 !important;
                border-radius: 26px 0 0 26px !important;
                overflow-y: auto !important;
                padding: 12px max(18px, env(safe-area-inset-right)) 12px 22px !important;
            }

            .login-panel {
                width: min(100%, 390px) !important;
                padding: 8px 0 !important;
            }

            .mobile-form-brand {
                flex-direction: row !important;
                justify-content: flex-start !important;
                width: auto !important;
                margin: 0 0 8px !important;
                gap: 8px !important;
                text-align: left !important;
            }

            .mobile-form-brand img {
                width: 30px !important;
                height: 30px !important;
            }

            .mobile-form-brand .brand-copy {
                width: auto !important;
                justify-items: start !important;
                text-align: left !important;
            }
        }

        @media (max-width: 820px) {
            body.keyboard-open .login-shell {
                grid-template-rows: 0 minmax(0, 1fr) !important;
            }

            body.keyboard-open .visual-panel {
                opacity: 0 !important;
                pointer-events: none !important;
            }

            body.keyboard-open .form-panel-wrap {
                margin-top: 0 !important;
                border-radius: 0 !important;
                overflow-y: auto !important;
                padding-top: max(12px, env(safe-area-inset-top)) !important;
            }

            body.keyboard-open .mobile-form-brand {
                display: none !important;
            }

            body.keyboard-open .form-footer {
                display: none !important;
            }
        }

/* =========================================================
   PRODUCTION ACCESSIBILITY / SMALL-VIEWPORT SAFETY
   Keeps the normal no-scroll presentation, but allows content
   to remain reachable on very short screens and browser zoom.
   ========================================================= */
@media (max-height: 620px), (max-width: 420px) and (max-height: 700px) {
    html,
    body {
        min-height: 100%;
    }

    body {
        overflow-y: auto !important;
        overscroll-behavior-y: contain;
    }

    .login-shell {
        min-height: 100dvh !important;
        height: auto !important;
    }
}

.modal-overlay.active .modal-card:focus {
    outline: none;
}