:root {
    color-scheme: dark;
    --olive-950: #06152f;
    --olive-900: #0b2f6b;
    --olive-800: #124c91;
    --olive-700: #1560bd;
    --beige-100: #edf8ff;
    --beige-200: #c9eaff;
    --beige-300: #8fd2fa;
    --gold: #72c2fb;
    --electric: #72c2fb;
    --electric-strong: #1560bd;
    --ink: #06152f;
}

* { box-sizing: border-box; }

html { min-height: 100%; overflow-x: hidden; background: var(--olive-950); }

body.login-3d-page {
    min-height: 100svh;
    margin: 0;
    overflow-x: hidden;
    display: grid;
    place-items: center;
    padding: clamp(12px, 2vh, 20px);
    font-family: "Cairo", system-ui, sans-serif;
    color: var(--beige-100);
    background:
        radial-gradient(circle at 75% 17%, rgba(114, 194, 251, .25), transparent 24%),
        linear-gradient(90deg, rgba(6, 21, 47, .99) 0 49.7%, rgba(21, 96, 189, .92) 50.3% 100%),
        var(--olive-900);
}

body.login-3d-page::before,
body.login-3d-page::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body.login-3d-page::before {
    opacity: .34;
    background-image:
        repeating-linear-gradient(93deg, transparent 0 8px, rgba(255,255,255,.028) 9px, transparent 10px 19px),
        repeating-linear-gradient(0deg, rgba(21, 22, 15, .08) 0 1px, transparent 1px 4px);
    mix-blend-mode: soft-light;
}

body.login-3d-page::after {
    box-shadow: inset 0 0 140px rgba(2, 10, 28, .72);
}

.login-stage {
    position: relative;
    width: min(100%, 460px);
    perspective: 1300px;
    isolation: isolate;
}

.ambient {
    position: absolute;
    z-index: -2;
    border-radius: 50%;
    filter: blur(28px);
    opacity: .35;
}

.ambient-one { width: 190px; height: 190px; top: 4%; right: -23%; background: #72c2fb; }
.ambient-two { width: 150px; height: 150px; bottom: 5%; left: -22%; background: #1560bd; }

.login-device {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: min(680px, calc(100svh - 64px));
    padding: clamp(28px, 5vh, 48px) clamp(26px, 7vw, 48px) 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(201, 234, 255, .78);
    border-radius: 66px;
    background:
        linear-gradient(111deg, rgba(8, 37, 82, .98) 0 49.5%, rgba(31, 111, 190, .9) 50.5% 100%);
    box-shadow:
        0 0 0 3px rgba(69, 114, 255, .68),
        0 0 0 6px rgba(143, 210, 250, .62),
        0 28px 55px rgba(2, 12, 34, .64),
        inset 18px 0 45px rgba(2, 16, 44, .5),
        inset -18px 0 38px rgba(201, 234, 255, .18),
        inset 0 1px 0 rgba(255,255,255,.85);
    transform: rotateX(1.4deg);
    transform-style: preserve-3d;
}

.login-device::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg, transparent 0 7px, rgba(255,255,255,.025) 8px, transparent 9px 15px),
        linear-gradient(124deg, transparent 0 42%, rgba(114, 194, 251, .18) 46%, transparent 53%);
    pointer-events: none;
}

.login-device::after {
    content: "";
    position: absolute;
    top: -12%;
    left: 46%;
    width: 2px;
    height: 126%;
    background: linear-gradient(transparent, #47a7ea 13%, #d9efff 50%, #1560bd 86%, transparent);
    box-shadow: 0 0 13px #72c2fb, 0 0 34px rgba(71, 167, 234, .8);
    transform: rotate(7deg);
    opacity: .92;
    pointer-events: none;
}

.device-shine {
    position: absolute;
    z-index: 0;
    top: 2%;
    left: -16%;
    width: 75%;
    height: 98%;
    border-radius: 48% 52% 42% 58%;
    border-right: 2px solid rgba(255, 220, 160, .88);
    background: radial-gradient(ellipse at 100% 45%, rgba(114, 194, 251, .22), transparent 50%);
    filter: drop-shadow(4px 0 13px rgba(255, 192, 101, .55));
    pointer-events: none;
}

.brand-orbit,
.login-brand,
.security-alert,
.login-form,
.login-footer { position: relative; z-index: 3; }

.brand-orbit {
    width: 118px;
    height: 118px;
    margin: 0 auto 12px;
    padding: 4px;
    border-radius: 50%;
    background: linear-gradient(145deg, #bfe7ff, #124c91 45%, #72c2fb 72%, #2f86d8);
    box-shadow: 0 0 0 2px rgba(4, 24, 58, .9), 0 0 18px rgba(114, 194, 251, .75), 0 18px 26px rgba(2, 13, 36, .48);
}

.brand-core {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.36);
    border-radius: inherit;
    background: radial-gradient(circle at 50% 36%, #1e65a8, #061a3d 68%);
    box-shadow: inset 0 9px 16px rgba(255,255,255,.08), inset 0 -10px 20px rgba(0,0,0,.42);
}

.brand-core span {
    direction: ltr;
    font-family: Inter, system-ui, sans-serif;
    font-size: 43px;
    line-height: 1;
    font-weight: 300;
    letter-spacing: -7px;
    color: transparent;
    -webkit-text-stroke: 2px #d9e5ff;
    text-shadow: 0 0 3px #fff, 0 0 8px var(--electric), 0 0 18px var(--electric-strong);
    transform: skewX(-8deg) translateX(-2px);
}

.login-brand { text-align: center; margin-bottom: 22px; }

.login-brand h1 {
    margin: 0;
    direction: ltr;
    font-family: Inter, "Cairo", sans-serif;
    font-size: clamp(34px, 8vw, 47px);
    line-height: 1.15;
    font-weight: 700;
    color: #f8fbff;
    letter-spacing: -.06em;
    text-shadow: 0 0 3px #fff, 0 0 10px var(--electric), 0 0 24px #3779ff;
}

.login-brand p {
    margin: 3px 0 7px;
    direction: ltr;
    font: 600 9px/1 Inter, sans-serif;
    letter-spacing: .19em;
    color: #b9ceff;
}

.brand-diamond {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #dbe7ff;
    transform: rotate(45deg);
    box-shadow: 0 0 7px #fff, 0 0 14px var(--electric);
}

.security-alert {
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 187, 164, .55);
    border-radius: 14px;
    background: rgba(83, 30, 24, .58);
    color: #ffe8df;
    text-align: center;
    font-size: 12px;
    backdrop-filter: blur(8px);
}

.security-alert-warning { background: rgba(93, 72, 25, .65); border-color: rgba(255, 218, 139, .65); color: #fff2cb; }
.security-alert strong { color: #fff; font-size: 13px; }

.login-form { display: grid; gap: 8px; }
.login-form label { margin: 0 12px -2px; font-size: 12px; color: rgba(237, 248, 255, .94); }

.field-shell {
    position: relative;
    height: 48px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(143, 210, 250, .62);
    border-radius: 22px;
    background: rgba(5, 33, 76, .52);
    box-shadow: inset 0 4px 9px rgba(0,0,0,.28), 0 5px 12px rgba(2,18,48,.22);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.field-shell:focus-within {
    border-color: #8eb1ff;
    background: rgba(7, 47, 107, .68);
    box-shadow: inset 0 4px 9px rgba(0,0,0,.24), 0 0 0 3px rgba(65, 123, 255, .17), 0 0 14px rgba(75, 133, 255, .48);
}

.field-shell input {
    width: 100%;
    height: 100%;
    padding: 0 44px 0 42px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #f4fbff;
    font: 500 13px "Cairo", sans-serif;
}

.field-shell input::placeholder { color: rgba(201, 234, 255, .58); }
.field-icon { position: absolute; right: 16px; color: #bfe7ff; font: 600 18px/1 Inter, sans-serif; }

.lock-icon { width: 12px; height: 11px; border: 1.5px solid #bfe7ff; border-radius: 2px; }
.lock-icon::before { content: ""; position: absolute; width: 7px; height: 7px; right: 1px; top: -7px; border: 1.5px solid #bfe7ff; border-bottom: 0; border-radius: 7px 7px 0 0; }

.password-toggle {
    position: absolute;
    left: 10px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.password-toggle span { position: absolute; inset: 9px 6px; border: 1.5px solid #bfe7ff; border-radius: 50% 15%; transform: rotate(45deg); }
.password-toggle span::after { content: ""; position: absolute; width: 4px; height: 4px; inset: 50% auto auto 50%; border-radius: 50%; background: #bfe7ff; transform: translate(-50%,-50%); }
.password-toggle[aria-pressed="true"] span::before { content: ""; position: absolute; width: 20px; height: 1.5px; top: 7px; left: -3px; background: #bfe7ff; }

.login-submit {
    min-height: 52px;
    margin-top: 14px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #a9c4ff;
    border-radius: 21px;
    background: linear-gradient(180deg, rgba(76, 132, 255, .96), rgba(34, 81, 187, .98));
    color: #fff;
    font: 700 16px "Cairo", sans-serif;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -7px 14px rgba(0,26,90,.25), 0 0 4px #d7e3ff, 0 0 14px #4985ff, 0 8px 18px rgba(13, 31, 74, .4);
    transition: transform .18s ease, filter .18s ease;
}

.login-submit:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); }
.login-submit:focus-visible { outline: 3px solid rgba(255,255,255,.8); outline-offset: 3px; }
.login-submit:disabled { cursor: wait; opacity: .55; filter: grayscale(.35); }
.submit-arrow { direction: ltr; font: 300 29px/1 Inter, sans-serif; }

.login-footer { margin-top: 19px; text-align: center; direction: ltr; color: #a9c5ff; font: 500 10px Inter, sans-serif; }
.login-footer span { color: var(--gold); padding: 0 5px; }

.device-base {
    position: relative;
    z-index: 1;
    width: 117%;
    height: 44px;
    margin: -7px -8.5% 0;
    border: 1px solid rgba(143, 210, 250, .78);
    border-radius: 50%;
    background: linear-gradient(180deg, #72c2fb, #1560bd 48%, #071a3d 50%, #2f86d8 72%, #0b2f6b);
    box-shadow: 0 4px 0 #315db5, 0 7px 12px rgba(0,0,0,.55), inset 0 2px 4px rgba(255,255,255,.34);
}

.device-base span { position: absolute; inset: 9px 9% auto; height: 12px; border-radius: 50%; background: rgba(3, 23, 55, .5); box-shadow: inset 0 2px 4px rgba(0,0,0,.5); }

@media (max-height: 760px) and (min-width: 520px) {
    .login-device { min-height: 580px; padding-top: 20px; padding-bottom: 18px; border-radius: 52px; }
    .brand-orbit { width: 92px; height: 92px; }
    .brand-core span { font-size: 35px; }
    .login-brand { margin-bottom: 13px; }
    .security-alert { padding: 7px 11px; margin-bottom: 8px; }
}

@media (max-width: 520px) {
    body.login-3d-page { padding: 15px; align-items: center; }
    .login-stage { width: min(100%, 390px); }
    .login-device { min-height: calc(100svh - 76px); max-height: 760px; border-radius: 48px; padding: 28px 24px 24px; }
    .brand-orbit { width: 96px; height: 96px; }
    .brand-core span { font-size: 35px; }
    .device-base { height: 34px; }
}

@media (max-width: 350px) {
    .login-device { border-radius: 38px; padding-inline: 19px; }
    .field-shell { height: 46px; }
    .login-submit { min-height: 48px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Al Sayad login — visual match for the approved blue glass identity. */
body.login-3d-page {
    padding: 10px;
    background:
        radial-gradient(circle at 82% 38%, rgba(27, 123, 255, .72), transparent 38%),
        radial-gradient(circle at 24% 95%, rgba(12, 73, 153, .23), transparent 34%),
        linear-gradient(106deg, #020f23 0%, #031a3a 47%, #096bd2 100%);
}

.login-stage { width: min(100%, 590px); }
.login-device {
    min-height: min(815px, calc(100svh - 38px));
    padding: clamp(24px, 4vh, 38px) clamp(38px, 7vw, 68px) 28px;
    justify-content: center;
    border-radius: 72px;
    border: 1px solid rgba(183, 224, 255, .64);
    background:
        linear-gradient(107deg, rgba(3, 27, 66, .94) 0 49%, rgba(10, 102, 207, .83) 51% 100%);
    box-shadow:
        0 0 0 4px rgba(59, 136, 255, .66),
        0 0 0 7px rgba(125, 198, 255, .4),
        0 28px 54px rgba(0, 9, 31, .68),
        inset 20px 0 50px rgba(0, 8, 31, .52),
        inset -18px 0 38px rgba(80, 181, 255, .18);
}
.login-device::after { left: 48%; opacity: .75; }
.device-shine { opacity: .58; }
.brand-orbit { width: 124px; height: 124px; margin-bottom: 9px; }
.brand-core span {
    direction: rtl;
    font-family: "Cairo", sans-serif;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0;
    color: #eef8ff;
    -webkit-text-stroke: 0;
    text-shadow: 0 0 4px #fff, 0 0 12px #58afff, 0 0 23px #1475e8;
    transform: none;
}
.login-brand { margin-bottom: 25px; }
.login-brand h1 {
    direction: rtl;
    font-family: "Cairo", sans-serif;
    font-size: clamp(42px, 8vw, 57px);
    letter-spacing: 0;
}
.login-brand p {
    margin-top: 4px;
    direction: rtl;
    font: 400 14px/1.6 "Cairo", sans-serif;
    letter-spacing: .08em;
}
.store-picker {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 24px;
    border: 1px solid rgba(155, 210, 255, .72);
    border-radius: 25px;
    background: rgba(5, 42, 99, .45);
    box-shadow: inset 0 4px 14px rgba(0, 12, 46, .24), 0 0 15px rgba(43, 128, 255, .38);
    overflow: hidden;
}
.store-choice {
    min-height: 58px;
    display: grid;
    place-items: center;
    color: #fff;
    font: 700 18px "Cairo", sans-serif;
    text-decoration: none;
    transition: background .18s ease, box-shadow .18s ease;
}
.store-choice.active {
    background: linear-gradient(180deg, rgba(44, 128, 255, .98), rgba(11, 83, 190, .98));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 16px rgba(60, 144, 255, .75);
}
.store-choice:hover { color: #fff; background-color: rgba(52, 139, 255, .34); }
.login-mode-title {
    position: relative;
    z-index: 3;
    margin: 0 6px 10px;
    color: #edf7ff;
    font-size: 20px;
    font-weight: 600;
}
.login-form { gap: 9px; }
.login-form label { font-size: 13px; font-weight: 500; }
.field-shell { height: 54px; border-radius: 27px; }
.field-icon { right: 18px; }
.user-icon { width: 17px; height: 17px; border-radius: 50%; background: #c2e4ff; }
.user-icon::after { content: ""; position: absolute; width: 24px; height: 12px; right: -4px; top: 13px; border-radius: 12px 12px 5px 5px; background: #c2e4ff; }
.login-submit { min-height: 64px; margin-top: 20px; border-radius: 27px; font-size: 19px; }
.login-footer { margin-top: 28px; direction: rtl; font-family: "Cairo", sans-serif; font-size: 11px; }
.device-base { width: 106%; }

@media (max-height: 760px) and (min-width: 600px) {
    .login-device { min-height: calc(100svh - 30px); padding-block: 18px; }
    .brand-orbit { width: 86px; height: 86px; }
    .brand-core span { font-size: 20px; }
    .login-brand h1 { font-size: 38px; }
    .login-brand { margin-bottom: 12px; }
    .store-picker { margin-bottom: 12px; }
    .store-choice { min-height: 48px; }
    .field-shell { height: 46px; }
    .login-submit { min-height: 52px; margin-top: 12px; }
    .login-footer { margin-top: 12px; }
}

@media (max-width: 575.98px) {
    body.login-3d-page { padding: 9px; }
    .login-stage { width: 100%; }
    .login-device { min-height: calc(100svh - 28px); padding-inline: 24px; border-radius: 42px; }
    .brand-orbit { width: 92px; height: 92px; }
    .brand-core span { font-size: 20px; }
    .login-brand h1 { font-size: 39px; }
}

/* Final responsive geometry: keep the complete card inside every viewport. */
body.login-3d-page {
    min-height: 100dvh;
    overflow-x: clip;
    overflow-y: auto;
    padding: clamp(16px, 3vh, 30px) clamp(14px, 3vw, 30px);
}

.login-stage {
    width: min(500px, calc(100vw - 32px));
    margin: auto;
}

.login-device {
    width: 100%;
    min-height: min(720px, calc(100dvh - 76px));
    padding: clamp(25px, 4vh, 36px) clamp(34px, 5vw, 52px) 25px;
    border-radius: clamp(46px, 4vw, 62px);
}

.brand-orbit { width: 104px; height: 104px; }
.login-brand { margin-bottom: 18px; }
.login-brand h1 { font-size: clamp(39px, 4vw, 49px); }
.login-brand p { font-size: 12px; }
.store-picker { display: grid; gap: 0; margin: 0 0 18px; }
.store-choice { min-height: 52px; font-size: 16px; }
.login-mode-title { margin-bottom: 8px; font-size: 18px; }
.field-shell { height: 50px; }
.login-submit { min-height: 56px; margin-top: 15px; font-size: 17px; }
.login-footer { margin-top: 18px; }
.device-base { width: 108%; height: 34px; margin-inline: -4%; }

@media (min-width: 1600px) and (min-height: 900px) {
    .login-stage { width: 520px; }
    .login-device { min-height: 750px; }
}

@media (max-width: 575.98px) {
    body.login-3d-page {
        display: grid;
        place-items: center;
        padding: 12px 10px 18px;
    }
    .login-stage {
        width: min(100%, 420px);
        margin: 0 auto;
    }
    .ambient { display: none; }
    .login-device {
        min-height: 0;
        padding: 22px clamp(19px, 7vw, 30px) 20px;
        border-radius: clamp(28px, 9vw, 40px);
        box-shadow:
            0 0 0 2px rgba(59, 136, 255, .66),
            0 0 0 4px rgba(125, 198, 255, .34),
            0 18px 36px rgba(0, 9, 31, .56),
            inset 12px 0 32px rgba(0, 8, 31, .42),
            inset -12px 0 26px rgba(80, 181, 255, .14);
        transform: none;
    }
    .brand-orbit { width: 78px; height: 78px; margin-bottom: 6px; }
    .brand-core span { font-size: 17px; }
    .login-brand { margin-bottom: 12px; }
    .login-brand h1 { font-size: clamp(32px, 10vw, 39px); }
    .login-brand p { margin: 1px 0 0; font-size: 10px; }
    .store-picker { margin-bottom: 12px; border-radius: 20px; }
    .store-choice { min-height: 46px; font-size: 15px; }
    .login-mode-title { margin: 0 4px 6px; font-size: 16px; }
    .login-form { gap: 6px; }
    .login-form label { margin-inline: 9px; font-size: 11px; }
    .field-shell { height: 46px; border-radius: 20px; }
    .field-shell input { padding-inline: 42px; font-size: 12px; }
    .login-submit { min-height: 50px; margin-top: 10px; border-radius: 21px; font-size: 15px; }
    .login-footer { margin-top: 12px; font-size: 9px; }
    .device-base { width: 94%; height: 24px; margin: -3px auto 0; }
}

@media (max-width: 360px) {
    body.login-3d-page { padding-inline: 8px; }
    .login-device { padding-inline: 16px; border-radius: 27px; }
    .brand-orbit { width: 68px; height: 68px; }
    .login-brand h1 { font-size: 30px; }
    .store-choice { min-height: 43px; }
}

@media (max-height: 680px) {
    body.login-3d-page { display: block; padding-block: 8px 14px; }
    .login-device { min-height: 0; padding-top: 14px; padding-bottom: 15px; }
    .brand-orbit { width: 62px; height: 62px; margin-bottom: 3px; }
    .brand-core span { font-size: 15px; }
    .login-brand { margin-bottom: 7px; }
    .login-brand h1 { font-size: 29px; }
    .login-brand p { font-size: 9px; line-height: 1.3; }
    .store-picker { margin-bottom: 7px; }
    .store-choice { min-height: 40px; font-size: 14px; }
    .login-mode-title { margin-bottom: 3px; font-size: 15px; }
    .login-form { gap: 4px; }
    .field-shell { height: 42px; }
    .login-submit { min-height: 46px; margin-top: 7px; }
    .login-footer { margin-top: 7px; }
    .device-base { height: 20px; }
}

.brand-core{overflow:hidden;background:#fff}.brand-core img{display:block;width:86%;height:86%;object-fit:contain;margin:auto}