:root,
[data-theme="light"]{
    --bg:#F5F8FC;
    --page-gradient:linear-gradient(180deg,#F8FAFD 0%,#F3F7FB 100%);
    --page-glow:rgba(108,145,203,.08);
    --surface:#FFFFFF;
    --surface-alt:#EEF4FF;
    --ink:#142137;
    --ink-strong:#16243A;
    --muted:#5E6E84;
    --muted-soft:#77859A;
    --line:#CFD9E6;
    --line-soft:#E0EBFB;
    --card-border:#F0F3F7;
    --card-shadow:rgba(30,54,86,.085);
    --primary:#1765D1;
    --primary-hover:#0E58BD;
    --primary-gradient:linear-gradient(180deg,#1765D1,#115DC6);
    --primary-gradient-hover:linear-gradient(180deg,#1C6DDE,#0F59BD);
    --success:#2A8A6B;
    --success-soft:#EAF7F2;
    --success-border:#CAE9DC;
    --danger:#C75862;
    --danger-soft:#FCEDEF;
    --danger-border:#F2CED3;
    --icon-stroke:#5E6F85;
    --input-border:#C8D4E2;
    --sso-border:#C8D7E9;
    --sso-hover-bg:#F8FBFF;
    --divider-line:#D8E0EA;
}

[data-theme="dark"]{
    --bg:#0B0E17;
    --page-gradient:linear-gradient(180deg,#0B0E17 0%,#0D111C 100%);
    --page-glow:rgba(59,130,246,.10);
    --surface:#151926;
    --surface-alt:#1B2030;
    --ink:#E7EAF2;
    --ink-strong:#F3F5FA;
    --muted:#9AA3B8;
    --muted-soft:#828DA3;
    --line:#262B3D;
    --line-soft:#2B3247;
    --card-border:#232A3D;
    --card-shadow:rgba(0,0,0,.45);
    --primary:#3B82F6;
    --primary-hover:#60A5FA;
    --primary-gradient:linear-gradient(180deg,#3B82F6,#2E6FDB);
    --primary-gradient-hover:linear-gradient(180deg,#4C90FA,#3B82F6);
    --success:#8FE0B8;
    --success-soft:rgba(31,157,99,.14);
    --success-border:rgba(31,157,99,.32);
    --danger:#F5A9A0;
    --danger-soft:rgba(197,53,53,.14);
    --danger-border:rgba(197,53,53,.32);
    --icon-stroke:#9AA3B8;
    --input-border:#2E3648;
    --sso-border:#2E3648;
    --sso-hover-bg:#1B2030;
    --divider-line:#262B3D;
}

*{box-sizing:border-box}

html,body{
    margin:0;
    min-height:100%;
    overflow-x:hidden;
}

body{
    background:var(--bg);
    color:var(--ink);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}

button,input{
    font:inherit;
}

button{
    cursor:pointer;
}

.theme-toggle-btn{
    position:fixed;
    top:22px;
    right:26px;
    z-index:20;
    width:40px;
    height:40px;
    border-radius:10px;
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--muted);
    display:grid;
    place-items:center;
    font-size:16px;
    box-shadow:0 4px 14px var(--card-shadow);
}

.theme-toggle-btn:hover{
    color:var(--primary);
}

.theme-toggle-btn .icon-sun{ display:none; line-height:1; }
.theme-toggle-btn .icon-moon{ display:inline; line-height:1; }
[data-theme="dark"] .theme-toggle-btn .icon-sun{ display:inline; }
[data-theme="dark"] .theme-toggle-btn .icon-moon{ display:none; }

.page{
    width:100%;
    min-height:100vh;
    margin:0;
    display:grid;
    grid-template-columns:50% 50%;
    overflow:hidden;
    background:
        radial-gradient(circle at 18% 9%,var(--page-glow),transparent 26%),
        var(--page-gradient);
}

.left{
    position:relative;
    padding:clamp(12px,calc(-28.48px + 6.747vh),40px) 56px clamp(9px,calc(-6.90px + 2.651vh),20px);
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.logo-row{
    display:flex;
    align-items:center;
    gap:12px;
}

.brand-logo{
    height:40px;
    width:auto;
    display:block;
}

.brand-suffix{
    font-size:24px;
    font-weight:800;
    letter-spacing:-.035em;
    color:var(--primary);
}

.intro{
    margin-top:clamp(11px,calc(-74.30px + 14.217vh),70px);
    max-width:555px;
    width:100%;
    position:relative;
    z-index:2;
}

.intro h1{
    margin:0;
    font-size:clamp(36px,calc(18.65px + 2.892vh),48px);
    line-height:1.06;
    letter-spacing:-.045em;
    font-weight:800;
    color:var(--ink);
}

.intro h1 span{
    display:inline-block;
    margin-top:4px;
    color:var(--primary);
}

.intro>p{
    margin:clamp(8px,calc(-0.675px + 1.446vh),14px) 0 0;
    max-width:515px;
    color:var(--muted);
    font-size:17px;
    line-height:1.57;
    letter-spacing:.002em;
}

.features{
    display:grid;
    gap:clamp(6px,calc(-5.57px + 1.928vh),14px);
    margin-top:clamp(8px,calc(-12.24px + 3.373vh),22px);
}

.feature{
    display:flex;
    align-items:center;
    gap:16px;
}

.feature-icon{
    width:clamp(38px,calc(20.65px + 2.892vh),50px);
    height:clamp(38px,calc(20.65px + 2.892vh),50px);
    flex:0 0 clamp(38px,calc(20.65px + 2.892vh),50px);
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--surface-alt);
    border:1px solid var(--line-soft);
    color:var(--primary);
    font-size:20px;
    font-weight:700;
}

.feature h3{
    margin:0;
    font-size:15px;
    line-height:1.25;
    font-weight:750;
    color:var(--ink);
}

.feature p{
    margin:4px 0 0;
    color:var(--muted);
    font-size:12px;
}

/* Wrapper: owns layout (margin/sizing budget that keeps the page scroll-free
   at any viewport height - see the clamp() note above) and clips the glow/
   light overlays to the artwork's own footprint. The wrapper is sized purely
   by its content (the <img>), so it never affects the fluid height math. */
.city-scene{
    position:relative;
    margin:clamp(6px,calc(-20.02px + 4.337vh),24px) 0 0;
    max-width:100%;
    overflow:hidden;
    border-radius:16px;
    z-index:1;
    user-select:none;
    pointer-events:none;
}

/* The approved artwork itself - untouched pixels, only a barely-perceptible
   position drift is animated (2-3px, see cityFloat below). */
.city-art{
    position:relative;
    display:block;
    width:auto;
    max-width:100%;
    max-height:clamp(90px,calc(-242.53px + 55.42vh),320px);
    height:auto;
    z-index:2;
    transform:translate3d(0,0,0);
    transform-origin:center bottom;
    animation:cityFloat 16s ease-in-out infinite;
}

/* Soft ambient glow behind the skyline - a slow "breathing" light, never a
   hard shape, so it can never be mistaken for part of the artwork itself. */
.city-glow{
    position:absolute;
    inset:10% 10% 0;
    background:radial-gradient(circle at 45% 50%,rgba(90,150,230,.14),transparent 55%);
    filter:blur(20px);
    z-index:1;
    animation:glowPulse 12s ease-in-out infinite;
}

/* A faint diagonal highlight that drifts across the scene once per cycle,
   like light catching glass - mostly invisible, briefly visible mid-sweep. */
.city-light{
    position:absolute;
    top:12%;
    bottom:6%;
    left:-25%;
    width:18%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
    transform:skewX(-12deg);
    z-index:3;
    animation:lightSweep 9s ease-in-out infinite;
}

@keyframes cityFloat{
    0%,100%{ transform:translate3d(0,0,0); }
    50%{ transform:translate3d(3px,-1px,0); }
}

@keyframes glowPulse{
    0%,100%{ opacity:.35; transform:scale(1); }
    50%{ opacity:.65; transform:scale(1.04); }
}

@keyframes lightSweep{
    0%,35%{ left:-25%; opacity:0; }
    45%{ opacity:.35; }
    70%,100%{ left:115%; opacity:0; }
}

@media (prefers-reduced-motion:reduce){
    .city-art,
    .city-glow,
    .city-light{
        animation:none !important;
        transform:none !important;
    }

    .card-flip-inner{
        transition:none !important;
    }
}

footer{
    position:relative;
    margin-top:auto;
    padding-top:clamp(6px,calc(-9.90px + 2.651vh),17px);
    z-index:5;
    display:flex;
    align-items:center;
    gap:14px;
    color:var(--muted);
    font-size:11px;
    white-space:nowrap;
}

footer a{
    color:var(--muted-soft);
    text-decoration:none;
}

footer a:hover{
    color:var(--primary);
}

footer i{
    color:var(--line);
    font-style:normal;
}

.right{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(18px,calc(-35.49px + 8.916vh),55px) 74px;
    min-width:0;
}

.card-flip{
    width:min(602px,100%);
    max-width:100%;
    min-width:0;
    perspective:2000px;
}

.card-flip-inner{
    display:grid;
    grid-template-areas:"card";
    transition:transform .6s cubic-bezier(.4,.15,.2,1);
    transform-style:preserve-3d;
}

.card-flip.flipped .card-flip-inner{
    transform:rotateY(180deg);
}

.card-face{
    grid-area:card;
    min-width:0;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

.card-face.card-back{
    transform:rotateY(180deg);
}

.login-card{
    width:100%;
    min-width:0;
    padding:clamp(20px,calc(-33.49px + 8.916vh),57px) 54px clamp(18px,calc(-31.16px + 8.193vh),52px);
    border-radius:25px;
    background:var(--surface);
    border:1px solid var(--card-border);
    box-shadow:0 18px 52px var(--card-shadow);
}

.card-back .login-card{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.flip-links{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    margin-top:clamp(14px,calc(-10px + 3vh),24px);
}

.link-btn{
    border:0;
    background:none;
    color:var(--primary);
    font-size:14px;
    padding:0;
}

.link-btn:hover{
    text-decoration:underline;
}

#backToSignInFromForgot,
#backToSignInFromReset{
    color:var(--muted-soft);
}

.login-card h2{
    margin:0;
    font-size:33px;
    line-height:1.15;
    letter-spacing:-.04em;
    color:var(--ink);
}

.sub{
    margin:clamp(6px,calc(-4.12px + 1.687vh),13px) 0 clamp(14px,calc(-33.71px + 7.952vh),47px);
    color:var(--muted);
    font-size:14px;
}

.field{
    margin-bottom:clamp(10px,calc(-17.47px + 4.578vh),29px);
}

.field label{
    display:block;
    margin-bottom:clamp(4px,calc(-6.12px + 1.687vh),11px);
    color:var(--ink-strong);
    font-size:14px;
    font-weight:700;
}

.input-box{
    position:relative;
}

.input-box input{
    width:100%;
    height:clamp(42px,calc(14.53px + 4.578vh),61px);
    border:1px solid var(--input-border);
    border-radius:9px;
    background:var(--surface);
    color:var(--ink);
    padding:0 55px;
    font-size:15px;
    outline:none;
    transition:border-color .15s,box-shadow .15s,background .15s;
}

.input-box input::placeholder{
    color:var(--muted-soft);
}

.input-box input:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(23,101,209,.08);
}

[data-theme="dark"] .input-box input:focus{
    box-shadow:0 0 0 4px rgba(59,130,246,.16);
}

.input-box input.invalid{
    border-color:var(--danger);
    box-shadow:0 0 0 4px rgba(199,88,98,.07);
}

.icon{
    position:absolute;
    left:18px;
    top:50%;
    width:20px;
    height:17px;
    transform:translateY(-50%);
    z-index:2;
}

.icon.mail{
    border:2px solid var(--icon-stroke);
    border-radius:3px;
}

.icon.mail:after,
.icon.mail:before{
    content:"";
    position:absolute;
    top:2px;
    width:9px;
    height:2px;
    background:var(--icon-stroke);
}

.icon.mail:before{
    left:0;
    transform:rotate(31deg);
    transform-origin:left center;
}

.icon.mail:after{
    right:0;
    transform:rotate(-31deg);
    transform-origin:right center;
}

.icon.lock{
    width:16px;
    height:15px;
    left:20px;
    border:2px solid var(--icon-stroke);
    border-radius:3px;
    top:53%;
}

.icon.lock:before{
    content:"";
    position:absolute;
    left:2px;
    top:-10px;
    width:8px;
    height:10px;
    border:2px solid var(--icon-stroke);
    border-bottom:0;
    border-radius:7px 7px 0 0;
}

.icon.lock:after{
    content:"";
    position:absolute;
    left:5px;
    top:4px;
    width:3px;
    height:5px;
    background:var(--icon-stroke);
    border-radius:2px;
}

.eye{
    position:absolute;
    top:7px;
    right:7px;
    width:47px;
    height:47px;
    border:0;
    background:transparent;
}

.eye:before{
    content:"";
    position:absolute;
    left:11px;
    top:15px;
    width:20px;
    height:12px;
    border:2px solid var(--icon-stroke);
    border-radius:70% 30%;
    transform:rotate(-22deg);
}

.eye span{
    position:absolute;
    left:20px;
    top:19px;
    width:6px;
    height:6px;
    border:1.5px solid var(--icon-stroke);
    border-radius:50%;
    background:var(--surface);
}

.eye:after{
    content:"";
    position:absolute;
    left:8px;
    top:22px;
    width:27px;
    height:2px;
    background:var(--icon-stroke);
    transform:rotate(35deg);
}

.options{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px 18px;
    margin:-2px 0 clamp(10px,calc(-20.36px + 5.060vh),31px);
}

.remember{
    display:flex;
    align-items:center;
    gap:11px;
    color:var(--ink-strong);
    font-size:14px;
    cursor:pointer;
}

.remember input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.check{
    width:20px;
    height:20px;
    border:2px solid #7AA7EF;
    border-radius:4px;
    background:var(--surface);
    position:relative;
}

.remember input:checked + .check{
    background:var(--primary);
    border-color:var(--primary);
}

.remember input:checked + .check:after{
    content:"";
    position:absolute;
    left:5px;
    top:1px;
    width:5px;
    height:10px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

.forgot{
    border:0;
    background:none;
    color:var(--primary);
    font-size:14px;
    padding:0;
    text-decoration:none;
}

.sign-in{
    width:100%;
    height:clamp(42px,calc(17.42px + 4.096vh),59px);
    border:1px solid var(--primary-hover);
    border-radius:8px;
    background:var(--primary-gradient);
    color:#fff;
    font-size:16px;
    font-weight:700;
    box-shadow:0 8px 16px rgba(23,101,209,.14);
}

.sign-in:hover{
    background:var(--primary-gradient-hover);
}

.divider{
    display:flex;
    align-items:center;
    gap:17px;
    margin:clamp(10px,calc(-29.04px + 6.506vh),37px) 0 clamp(10px,calc(-16.02px + 4.337vh),28px);
    color:var(--muted-soft);
    font-size:13px;
}

.divider span{
    flex:1;
    height:1px;
    background:var(--divider-line);
}

.divider b{
    font-weight:500;
}

.sso{
    width:100%;
    height:clamp(42px,calc(17.42px + 4.096vh),59px);
    border:1px solid var(--sso-border);
    border-radius:8px;
    background:var(--surface);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:13px;
    font-size:15px;
    text-decoration:none;
}

.sso:hover{
    background:var(--sso-hover-bg);
}

.sso-shield{
    font-size:21px;
    line-height:1;
}

.priority{
    display:flex;
    gap:20px;
    align-items:center;
    margin-top:clamp(12px,calc(-24.14px + 6.024vh),37px);
}

.priority-icon{
    width:clamp(40px,calc(-23.61px + 10.602vh),84px);
    height:clamp(40px,calc(-23.61px + 10.602vh),84px);
    border-radius:50%;
    background:var(--surface-alt);
    border:1px solid var(--line-soft);
    display:grid;
    place-items:center;
    color:var(--primary);
    font-size:35px;
    flex:0 0 clamp(40px,calc(-23.61px + 10.602vh),84px);
}

.priority h3{
    margin:0;
    font-size:15px;
    font-weight:750;
    color:var(--ink);
}

.priority p{
    margin:7px 0 0;
    max-width:350px;
    color:var(--muted);
    font-size:12px;
    line-height:1.55;
}

.field-error{
    display:block;
    color:var(--danger);
    font-size:11px;
    margin-top:6px;
    min-height:0;
}

.message{
    padding:11px 13px;
    border-radius:8px;
    margin:-20px 0 24px;
    font-size:12px;
}

.message.error{
    background:var(--danger-soft);
    border:1px solid var(--danger-border);
    color:var(--danger);
}

.message.success{
    background:var(--success-soft);
    border:1px solid var(--success-border);
    color:var(--success);
}

@media (max-width:1200px){
    .left{padding-left:40px;padding-right:40px}
    .right{padding-left:38px;padding-right:38px}
    .intro h1{font-size:43px}
    .login-card{padding-left:42px;padding-right:42px}
}

@media (max-width:900px){
    .page{
        grid-template-columns:1fr;
    }

    .left{
        min-height:640px;
        min-width:0;
        order:2;
    }

    .right{
        min-height:auto;
        min-width:0;
        padding:40px 24px 55px;
        align-items:flex-start;
        order:1;
    }

    .intro{
        margin-top:70px;
    }

    .city-scene{
        max-width:70%;
    }
}

@media (max-width:560px){
    .left{
        min-height:560px;
        padding:28px 24px 20px;
    }

    .logo-row{
        transform:scale(.92);
        transform-origin:left top;
    }

    .intro{
        margin-top:60px;
    }

    .intro h1{
        font-size:34px;
    }

    .intro>p{
        font-size:14px;
    }

    .features{
        gap:15px;
        margin-top:24px;
    }

    .feature-icon{
        width:42px;
        height:42px;
        flex-basis:42px;
        font-size:17px;
    }

    .feature h3{
        font-size:14px;
    }

    .feature p{
        font-size:11px;
    }

    .city-scene{
        max-width:94%;
    }

    footer{
        margin-top:25px;
        padding-top:0;
        white-space:normal;
        flex-wrap:wrap;
        gap:8px;
    }

    footer i{
        display:none;
    }

    .right{
        padding:18px 14px 36px;
    }

    .login-card{
        padding:30px 22px 28px;
        border-radius:20px;
    }

    .login-card h2{
        font-size:29px;
    }

    .sub{
        font-size:13px;
        margin-bottom:34px;
    }

    .input-box input{
        height:57px;
        font-size:14px;
    }

    .sign-in,
    .sso{
        height:56px;
    }

    .priority{
        align-items:flex-start;
    }

    .priority-icon{
        width:64px;
        height:64px;
        flex-basis:64px;
        font-size:27px;
    }

    .theme-toggle-btn{
        top:14px;
        right:14px;
    }
}

/* NOTE: the vertical rhythm above (.left/.right padding, .intro/.features/.city
   margins, field/button heights, etc.) uses clamp(min, Nvh, max) instead of a
   couple of fixed max-height breakpoints. Real browser viewport heights vary
   continuously across devices, OS taskbar/DPI-scaling combinations and zoom
   levels, so a handful of fixed breakpoints inevitably misses some real
   height in between them. Scaling every gap off the actual viewport height
   (vh) instead means the page always fits exactly one screen, at any height,
   without a vertical scrollbar. See each rule above for its clamp() value. */