:root{
    --bg:#020713;
    --panel:#061326;
    --line:rgba(120,166,224,.42);
    --muted:#8795ab;
    --blue:#139dff;
    --blue2:#1849f2;
    --green:#43d9aa;
}

*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{font-family:Inter,"Segoe UI",Arial,sans-serif;background:var(--bg);color:#edf5ff}
button,input{font:inherit}

.login-page{
    width:100vw;
    height:100dvh;
    min-height:0;
    display:grid;
    grid-template-columns:minmax(0,58%) minmax(460px,42%);
    overflow:hidden;
    background:
        radial-gradient(circle at 18% 44%,rgba(0,87,196,.10),transparent 34%),
        linear-gradient(90deg,#020817 0 58%,#020713 58% 100%);
    transition:opacity .42s ease,filter .42s ease,transform .42s ease;
}
.login-page.is-leaving{opacity:0;filter:blur(7px);transform:scale(1.006)}

/* LEFT VISUAL ------------------------------------------------------------ */
.login-visual{
    min-width:0;
    min-height:0;
    position:relative;
    display:grid;
    place-items:center;
    overflow:hidden;
    padding:clamp(18px,2.2vw,44px);
}
.login-visual::after{
    content:"";
    position:absolute;
    top:0;right:-1px;bottom:0;
    width:clamp(70px,8vw,180px);
    background:linear-gradient(90deg,transparent,#020713 92%);
    pointer-events:none;
    z-index:4;
}
.login-visual-stage{
    position:relative;
    width:min(54vw,calc((100dvh - clamp(36px,4.4vw,88px)) * 1.1663));
    max-width:1180px;
    aspect-ratio:1045/896;
    flex:none;
    transform:translateX(-1.5%);
}
.login-visual-image{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    user-select:none;
    pointer-events:none;
}
.login-visual-vignette{
    position:absolute;
    inset:-1px;
    z-index:2;
    pointer-events:none;
    background:
        radial-gradient(circle at 52.6% 49.7%,transparent 58%,rgba(2,7,19,.03) 76%,rgba(2,7,19,.16) 100%);
}

/* Overlay is anchored to the artwork, so it cannot drift by resolution. */
.shield-interaction{
    position:absolute;
    z-index:3;
    left:52.6%;
    top:49.7%;
    width:23.4%;
    aspect-ratio:1;
    transform:translate(-50%,-50%);
    border-radius:50%;
    pointer-events:auto;
    transition:transform .28s ease,filter .28s ease;
}
.shield-interaction::before{
    content:"";
    position:absolute;
    z-index:-1;
    left:50%;top:50%;
    width:96%;
    aspect-ratio:1;
    border-radius:50%;
    border:1px solid rgba(77,201,255,.27);
    box-shadow:0 0 30px rgba(0,137,255,.12),inset 0 0 20px rgba(0,137,255,.06);
    opacity:0;
    transform:translate(-50%,-50%) scale(.76);
    animation:shield-radar-pulse 6.8s ease-out infinite;
}
.shield-interaction:hover{transform:translate(-50%,calc(-50% - 2px));filter:drop-shadow(0 0 22px rgba(0,174,255,.30))}
.is-authenticating .shield-interaction{filter:drop-shadow(0 0 28px rgba(0,157,255,.42))}
.is-authenticating .shield-interaction::before{animation-duration:2.1s;border-color:rgba(104,224,255,.5)}

.shield-segment{
    position:absolute;
    inset:15%;
    border-radius:34%;
    opacity:.015;
    background:radial-gradient(circle,rgba(99,221,255,.85),rgba(0,118,255,.05) 66%,transparent 72%);
    filter:blur(7px);
    animation:shield-idle 7s ease-in-out infinite;
    transition:opacity .22s ease,filter .22s ease;
}
.shield-segment:nth-child(2){animation-delay:-1.1s}.shield-segment:nth-child(3){animation-delay:-2.2s}
.shield-segment:nth-child(4){animation-delay:-3.3s}.shield-segment:nth-child(5){animation-delay:-4.4s}
.shield-segment:nth-child(6){animation-delay:-5.5s}
.shield-segment.is-auth-active{opacity:.42;filter:blur(4px) drop-shadow(0 0 18px rgba(73,210,255,.9))}
.shield-segment.is-auth-complete{opacity:.34;filter:blur(4px) drop-shadow(0 0 22px rgba(73,210,255,.95))}
.shield-complete-ring{
    position:absolute;inset:7%;border-radius:50%;border:1px solid rgba(113,229,255,.78);opacity:0;
}
.shield-interaction.is-complete .shield-complete-ring{animation:shield-complete .75s ease-out both}

/* RIGHT PANEL ------------------------------------------------------------ */
.login-panel{
    min-width:0;
    min-height:0;
    height:100dvh;
    display:grid;
    place-items:center;
    overflow:hidden;
    padding:clamp(18px,2.4vw,48px) clamp(28px,4vw,92px) clamp(18px,2.4vw,48px) clamp(20px,2vw,42px);
    background:
        radial-gradient(circle at 45% 42%,rgba(9,47,91,.18),transparent 42%),
        #020713;
}
.login-panel-inner{
    position:relative;
    width:clamp(430px,28vw,560px);
    max-width:100%;
    max-height:calc(100dvh - clamp(36px,4.8vw,96px));
    padding:clamp(28px,3.1vh,48px) clamp(30px,2.5vw,48px) clamp(24px,2.8vh,42px);
    border:1px solid rgba(111,154,210,.48);
    border-radius:24px;
    background:linear-gradient(145deg,rgba(9,25,48,.88),rgba(3,12,27,.92));
    box-shadow:0 28px 80px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.025);
    overflow:hidden;
}
.login-panel-inner::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(110deg,transparent 0 42%,rgba(73,163,255,.035) 52%,transparent 62%);
    transform:translateX(-110%);animation:panel-sheen 9s ease-in-out infinite;
}
.login-heading{
    position:relative;z-index:1;
    display:grid;
    grid-template-columns:clamp(62px,4.3vw,78px) auto;
    align-items:center;
    justify-content:center;
    column-gap:14px;
    margin-bottom:clamp(20px,2.5vh,34px);
}
.login-product-mark{width:clamp(60px,4.1vw,74px);height:clamp(66px,4.6vw,82px);display:grid;place-items:center;filter:drop-shadow(0 0 18px rgba(0,140,255,.42))}
.login-product-mark img{width:100%;height:100%;object-fit:contain;display:block}
.login-product-copy>div{font-size:clamp(32px,2.4vw,44px);line-height:.95;letter-spacing:-1.5px;color:#e9f1ff}
.login-product-copy strong{font-weight:700}.login-product-copy b{color:#126dff;font-weight:800}
.login-product-copy small{display:block;margin-top:9px;font-size:clamp(9px,.7vw,12px);letter-spacing:4px;color:#d4deed}
.login-heading p{grid-column:1/-1;margin:clamp(16px,2vh,24px) 0 0;text-align:center;color:#8997ad;font-size:clamp(14px,1vw,17px)}

.login-message{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;margin-bottom:clamp(16px,2vh,24px);padding:13px 15px;border-radius:9px;font-size:12px}
.login-message-success{border:1px solid rgba(42,202,151,.42);background:rgba(13,94,76,.22);color:#73e0bd}
.login-message-error{border:1px solid rgba(255,92,112,.42);background:rgba(113,23,38,.25);color:#ff9eac}
.login-message strong{font-size:12px}.login-message span{font-size:11px}

.login-form{position:relative;z-index:1;display:grid;gap:clamp(16px,1.8vh,22px)}
.login-form>label{display:grid;gap:9px;color:#d6e1f1;font-size:13px}
.login-input-shell{height:clamp(48px,5.1vh,58px);display:grid;grid-template-columns:28px 1fr;align-items:center;padding:0 16px;border:1px solid rgba(102,143,196,.45);border-radius:9px;background:#eaf2ff;color:#10203a;box-shadow:inset 0 1px 1px rgba(255,255,255,.55)}
.login-input-shell:focus-within{border-color:#1d9eff;box-shadow:0 0 0 2px rgba(29,158,255,.18)}
.login-input-shell svg{width:19px;height:19px;fill:none;stroke:#74869f;stroke-width:1.7}
.login-input-shell input{width:100%;height:100%;border:0;outline:0;background:transparent;color:#101b2d;font-size:14px}
.login-password-field{grid-template-columns:28px 1fr 30px}.login-password-toggle{border:0;background:transparent;cursor:pointer;padding:4px}.login-password-toggle svg{width:20px;height:20px}
.login-options{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#7d8ba2;font-size:12px}
.login-remember{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:10px!important;cursor:pointer}.login-remember input{width:17px;height:17px;margin:0;accent-color:#168dff}
.login-submit{height:clamp(50px,5.3vh,60px);border:1px solid rgba(61,144,255,.85);border-radius:8px;background:linear-gradient(100deg,#14a7f5,#1849ed);color:white;font-weight:700;font-size:clamp(15px,1vw,18px);cursor:pointer;box-shadow:0 12px 28px rgba(0,88,255,.18);transition:transform .18s ease,filter .18s ease}
.login-submit:hover{filter:brightness(1.08);transform:translateY(-1px)}.login-submit:disabled{cursor:wait}.login-submit-icon{margin-right:12px;font-size:22px}

.login-boot{display:none;position:relative;z-index:1;margin-top:16px;padding:15px;border:1px solid rgba(31,143,255,.38);border-radius:9px;background:rgba(3,18,39,.82);font-size:12px}
.login-boot.is-visible{display:block}.login-boot strong{color:#dbeaff}.login-boot ul{list-style:none;padding:8px 0 3px;margin:0;display:grid;gap:5px;color:#8090a8}.login-boot li span{opacity:.25;margin-right:7px}.login-boot li.is-complete{color:#69ddba}.login-boot li.is-complete span{opacity:1}.login-boot small{color:#6e829d}
.login-divider{position:relative;z-index:1;display:flex;align-items:center;gap:14px;margin:clamp(18px,2.2vh,28px) 0;color:#68778f;font-size:12px}.login-divider::before,.login-divider::after{content:"";height:1px;flex:1;background:rgba(116,145,184,.28)}
.login-sso{position:relative;z-index:1;width:100%;height:clamp(48px,5vh,56px);border:1px solid rgba(25,129,255,.7);border-radius:8px;background:rgba(3,13,29,.28);color:#4ca6ff;font-size:15px;cursor:pointer}.login-sso span{margin-right:12px}
.login-footer{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;margin-top:clamp(22px,3vh,38px);color:#6f7d93;font-size:11px}.login-footer span:first-child{display:flex;align-items:center;gap:9px;color:#4dd6a7}.login-footer i{width:9px;height:9px;border-radius:50%;background:#35d59d;box-shadow:0 0 0 3px rgba(53,213,157,.16),0 0 13px rgba(53,213,157,.8)}

@keyframes shield-idle{0%,100%{opacity:.01}42%{opacity:.08}62%{opacity:.025}}
@keyframes shield-radar-pulse{0%{opacity:0;transform:translate(-50%,-50%) scale(.76)}9%{opacity:.22}55%{opacity:.08}100%{opacity:0;transform:translate(-50%,-50%) scale(1.62)}}
@keyframes shield-complete{0%{opacity:0;transform:scale(.78)}35%{opacity:1}100%{opacity:0;transform:scale(1.34)}}
@keyframes panel-sheen{0%,68%{transform:translateX(-110%)}88%,100%{transform:translateX(110%)}}

/* Height first: keeps the whole page fixed like UniFi, without scrolling. */
@media (max-height:820px){
    .login-panel-inner{width:clamp(410px,27vw,520px);padding:24px 30px 22px;border-radius:20px}
    .login-heading{margin-bottom:16px}.login-heading p{margin-top:12px}.login-message{margin-bottom:13px;padding:10px 12px}
    .login-form{gap:13px}.login-input-shell{height:46px}.login-submit{height:48px}.login-divider{margin:15px 0}.login-sso{height:46px}.login-footer{margin-top:18px}
}
@media (max-height:700px){
    .login-product-mark{width:54px;height:60px}.login-product-copy>div{font-size:31px}.login-heading p{font-size:13px}
    .login-panel-inner{padding:18px 26px 16px}.login-message{display:none}.login-footer{margin-top:13px}
}
@media (min-width:2400px){
    .login-page{grid-template-columns:minmax(0,60%) minmax(560px,40%)}
    .login-visual-stage{width:min(56vw,calc((100dvh - 70px) * 1.1663));max-width:1320px}
    .login-panel-inner{width:clamp(500px,27vw,590px)}
}
@media (max-width:1180px){
    .login-page{grid-template-columns:54% 46%}.login-panel{padding:20px 28px 20px 18px}.login-visual{padding:18px}.login-visual-stage{width:min(58vw,calc((100dvh - 36px) * 1.1663))}
}
@media (max-width:900px){
    .login-page{grid-template-columns:1fr}.login-visual{position:absolute;inset:0;opacity:.25;padding:18px}.login-visual::after{display:none}.login-visual-stage{width:min(94vw,calc((100dvh - 36px) * 1.1663));transform:none}.login-panel{position:relative;z-index:5;padding:16px}.login-panel-inner{width:min(520px,100%)}.shield-interaction{display:none}
}
@media (max-width:540px){
    .login-panel-inner{padding:22px 20px 18px;border-radius:18px}.login-heading{grid-template-columns:56px auto}.login-product-copy>div{font-size:31px}.login-options,.login-footer{font-size:10px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* RC5.4 Step 7.10: seamless artwork + native vector brand shield */
.login-page{
    background:
        radial-gradient(circle at 25% 48%,rgba(0,99,220,.11),transparent 35%),
        radial-gradient(circle at 72% 46%,rgba(7,43,86,.10),transparent 31%),
        #020713;
}
.login-panel{background:transparent}
.login-visual::after{
    width:clamp(110px,10vw,240px);
    background:linear-gradient(90deg,transparent 0%,rgba(2,7,19,.28) 54%,#020713 100%);
}
.login-visual-stage{
    isolation:isolate;
}
.login-visual-image{
    opacity:.98;
    -webkit-mask-image:radial-gradient(ellipse 82% 78% at 52% 49%,#000 0%,#000 58%,rgba(0,0,0,.96) 69%,rgba(0,0,0,.55) 82%,transparent 100%);
    mask-image:radial-gradient(ellipse 82% 78% at 52% 49%,#000 0%,#000 58%,rgba(0,0,0,.96) 69%,rgba(0,0,0,.55) 82%,transparent 100%);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    filter:saturate(.98) contrast(1.015);
}
.login-visual-vignette{
    background:
        radial-gradient(ellipse 72% 70% at 52.6% 49.7%,transparent 55%,rgba(2,7,19,.10) 74%,rgba(2,7,19,.48) 100%);
}
.login-product-mark{
    width:clamp(62px,4.2vw,76px);
    height:clamp(70px,4.8vw,86px);
    filter:none;
}
.login-product-mark img{display:none}
.trustit-shield-svg{
    width:100%;
    height:100%;
    display:block;
    overflow:visible;
    filter:drop-shadow(0 0 10px rgba(0,140,255,.36));
}
.logo-shield-part{
    transform-box:fill-box;
    transform-origin:center;
    animation:brand-shield-breathe 6.8s ease-in-out infinite;
}
.logo-shield-top-right{animation-delay:-1.1s}.logo-shield-mid-right{animation-delay:-2.2s}
.logo-shield-bottom-right{animation-delay:-3.3s}.logo-shield-bottom-left{animation-delay:-4.4s}
.logo-shield-mid-left{animation-delay:-5.5s}.logo-shield-core{opacity:.98}
.login-heading:hover .trustit-shield-svg{filter:drop-shadow(0 0 15px rgba(23,168,255,.48))}
.is-authenticating .trustit-shield-svg{animation:brand-auth-glow 1.15s ease-in-out infinite}
@keyframes brand-shield-breathe{0%,100%{opacity:.86}50%{opacity:1}}
@keyframes brand-auth-glow{0%,100%{filter:drop-shadow(0 0 10px rgba(0,140,255,.38))}50%{filter:drop-shadow(0 0 22px rgba(54,203,255,.78))}}

/* RC5.4 Step 7.11: final artwork composition ---------------------------- */
.login-page{
    grid-template-columns:minmax(0,61%) minmax(440px,39%);
    background:
        radial-gradient(circle at 31% 48%,rgba(0,103,238,.09),transparent 34%),
        radial-gradient(circle at 72% 43%,rgba(15,71,142,.08),transparent 28%),
        #020713;
}
.login-visual{
    padding:0;
    place-items:stretch;
}
.login-visual::after{
    right:-2px;
    width:clamp(120px,10vw,250px);
    background:linear-gradient(90deg,transparent 0%,rgba(2,7,19,.28) 44%,#020713 100%);
}
.login-visual-stage{
    width:100%;
    height:100%;
    max-width:none;
    aspect-ratio:auto;
    transform:none;
}
.login-visual-image{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    opacity:1;
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 82%,rgba(0,0,0,.86) 88%,rgba(0,0,0,.32) 96%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0%,#000 82%,rgba(0,0,0,.86) 88%,rgba(0,0,0,.32) 96%,transparent 100%);
    filter:saturate(1.02) contrast(1.015);
}
.login-visual-vignette{
    background:
        radial-gradient(ellipse 72% 66% at 53% 46%,transparent 62%,rgba(2,7,19,.08) 82%,rgba(2,7,19,.30) 100%),
        linear-gradient(180deg,rgba(2,7,19,.06),transparent 18%,transparent 78%,rgba(2,7,19,.18));
}
.shield-interaction{
    left:52.2%;
    top:46.0%;
    width:27.2%;
}
.login-panel{
    padding:clamp(22px,3vw,58px) clamp(42px,5vw,110px) clamp(22px,3vw,58px) clamp(24px,2.4vw,48px);
    background:transparent;
}
.login-panel-inner{
    width:clamp(430px,27vw,540px);
    border-color:rgba(112,166,225,.50);
    background:
        linear-gradient(145deg,rgba(8,24,47,.90),rgba(3,12,28,.94));
    box-shadow:0 30px 90px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.03);
}
.login-heading{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0;
    margin-bottom:clamp(20px,2.5vh,34px);
}
.login-product-mark{display:none!important}
.login-product-copy{text-align:center}
.login-product-copy>div{
    font-size:clamp(38px,2.65vw,50px);
    line-height:.94;
    letter-spacing:-1.8px;
}
.login-product-copy small{
    margin-top:12px;
    font-size:clamp(10px,.72vw,13px);
    letter-spacing:5.4px;
}
.login-brand-spark{
    position:relative;
    width:88px;
    height:1px;
    margin:18px 0 0;
    background:linear-gradient(90deg,transparent,rgba(33,174,255,.72),transparent);
}
.login-brand-spark::after{
    content:"";
    position:absolute;
    left:50%;top:50%;
    width:5px;height:5px;
    border-radius:50%;
    background:#37cfff;
    box-shadow:0 0 8px #30bfff,0 0 18px rgba(0,132,255,.9);
    transform:translate(-50%,-50%);
    animation:brand-spark-pulse 4.8s ease-in-out infinite;
}
.login-heading p{
    margin:clamp(16px,2vh,24px) 0 0;
    text-align:center;
}
@keyframes brand-spark-pulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.8)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}}

@media (min-width:2400px){
    .login-page{grid-template-columns:minmax(0,62%) minmax(560px,38%)}
    .login-panel{padding-right:clamp(90px,7vw,190px)}
    .login-panel-inner{width:clamp(500px,26vw,585px)}
}
@media (max-width:1180px){
    .login-page{grid-template-columns:56% 44%}
    .login-panel{padding:20px 28px 20px 20px}
}
@media (max-width:900px){
    .login-page{grid-template-columns:1fr}
    .login-visual{position:absolute;inset:0;opacity:.30}
    .login-visual-image{object-position:42% center;-webkit-mask-image:none;mask-image:none}
    .login-panel{position:relative;z-index:5;padding:16px}
    .login-panel-inner{width:min(520px,100%)}
}

/* RC5.4 Step 7.12: capped artwork scale for ultrawide displays ----------- */
/* Keep the login card untouched; only constrain and center the left artwork. */
.login-visual{
    place-items:center;
    padding:clamp(24px,3vw,64px);
}
.login-visual-stage{
    width:min(52vw,1250px);
    height:auto;
    max-width:calc(100% - clamp(28px,3vw,72px));
    max-height:calc(100dvh - clamp(48px,6vw,128px));
    aspect-ratio:1050/941;
    transform:none;
}
.login-visual-image{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    -webkit-mask-image:radial-gradient(ellipse 92% 91% at 50% 50%,#000 0%,#000 72%,rgba(0,0,0,.92) 82%,rgba(0,0,0,.38) 94%,transparent 100%);
    mask-image:radial-gradient(ellipse 92% 91% at 50% 50%,#000 0%,#000 72%,rgba(0,0,0,.92) 82%,rgba(0,0,0,.38) 94%,transparent 100%);
}
.login-visual-vignette{
    background:radial-gradient(ellipse 83% 82% at 50% 50%,transparent 64%,rgba(2,7,19,.08) 82%,rgba(2,7,19,.28) 100%);
}

@media (min-width:2400px){
    .login-visual-stage{
        width:min(44vw,1250px);
        max-height:calc(100dvh - 110px);
    }
}

@media (max-width:1180px){
    .login-visual{padding:20px}
    .login-visual-stage{
        width:min(54vw,980px);
        max-width:100%;
        max-height:calc(100dvh - 40px);
    }
}

@media (max-width:900px){
    .login-visual-stage{
        width:min(94vw,900px);
        max-height:calc(100dvh - 32px);
    }
}

/* RC5.4 Step 7.13: broad-wave artwork + seamless right blend ------------ */
/* The interactive login card remains untouched. */
.login-page{
    grid-template-columns:minmax(0,62%) minmax(440px,38%);
    background:
        radial-gradient(circle at 30% 44%,rgba(0,87,205,.10),transparent 36%),
        #020713;
}
.login-visual{
    padding:clamp(22px,2.4vw,54px) 0 clamp(18px,2vw,42px) clamp(18px,2vw,44px);
    place-items:center;
}
.login-visual-stage{
    width:min(58vw,1550px,calc((100dvh - 82px) * 1.5318627451));
    height:auto;
    max-width:100%;
    max-height:calc(100dvh - 58px);
    aspect-ratio:1250/816;
    transform:translateX(-1.5%);
}
.login-visual-image{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    opacity:1;
    filter:saturate(1.02) contrast(1.015);
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 77%,rgba(0,0,0,.98) 82%,rgba(0,0,0,.78) 89%,rgba(0,0,0,.25) 97%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0%,#000 77%,rgba(0,0,0,.98) 82%,rgba(0,0,0,.78) 89%,rgba(0,0,0,.25) 97%,transparent 100%);
}
.login-visual::after{
    right:-2px;
    width:clamp(150px,12vw,310px);
    background:linear-gradient(90deg,transparent 0%,rgba(2,7,19,.10) 34%,rgba(2,7,19,.55) 72%,#020713 100%);
}
.login-visual-vignette{
    background:
        linear-gradient(180deg,rgba(2,7,19,.06),transparent 16%,transparent 82%,rgba(2,7,19,.10)),
        radial-gradient(ellipse 92% 88% at 48% 46%,transparent 72%,rgba(2,7,19,.12) 90%,rgba(2,7,19,.28) 100%);
}
.shield-interaction{
    left:50.24%;
    top:45.22%;
    width:22.2%;
}
@media (min-width:2400px){
    .login-page{grid-template-columns:minmax(0,63%) minmax(560px,37%)}
    .login-visual-stage{
        width:min(53vw,1550px,calc((100dvh - 96px) * 1.5318627451));
        max-height:calc(100dvh - 70px);
    }
}
@media (max-width:1180px){
    .login-page{grid-template-columns:57% 43%}
    .login-visual{padding:18px 0 18px 14px}
    .login-visual-stage{
        width:min(60vw,1120px,calc((100dvh - 44px) * 1.5318627451));
        max-height:calc(100dvh - 34px);
    }
}
@media (max-width:900px){
    .login-visual-stage{
        width:min(110vw,1050px,calc((100dvh - 28px) * 1.5318627451));
        transform:translateX(-8%);
    }
    .login-visual-image{-webkit-mask-image:none;mask-image:none}
}

/* RC5.4 Step 7.14: final left + bottom edge blend ------------------------ */
/* Only softens the artwork boundary; login card and shield geometry stay unchanged. */
.login-visual-image{
    -webkit-mask-image:
        linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 2.5%,rgba(0,0,0,.72) 7%,#000 13%,#000 100%),
        linear-gradient(0deg,transparent 0%,rgba(0,0,0,.20) 3%,rgba(0,0,0,.78) 8%,#000 15%,#000 100%),
        linear-gradient(90deg,#000 0%,#000 77%,rgba(0,0,0,.98) 82%,rgba(0,0,0,.78) 89%,rgba(0,0,0,.25) 97%,transparent 100%);
    -webkit-mask-composite:source-in,source-in;
    mask-image:
        linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 2.5%,rgba(0,0,0,.72) 7%,#000 13%,#000 100%),
        linear-gradient(0deg,transparent 0%,rgba(0,0,0,.20) 3%,rgba(0,0,0,.78) 8%,#000 15%,#000 100%),
        linear-gradient(90deg,#000 0%,#000 77%,rgba(0,0,0,.98) 82%,rgba(0,0,0,.78) 89%,rgba(0,0,0,.25) 97%,transparent 100%);
    mask-composite:intersect;
}
.login-visual-vignette{
    background:
        linear-gradient(90deg,#020713 0%,rgba(2,7,19,.68) 3.5%,rgba(2,7,19,.16) 10%,transparent 18%),
        linear-gradient(0deg,#020713 0%,rgba(2,7,19,.62) 4%,rgba(2,7,19,.12) 11%,transparent 19%),
        linear-gradient(180deg,rgba(2,7,19,.06),transparent 16%,transparent 82%,rgba(2,7,19,.10)),
        radial-gradient(ellipse 92% 88% at 48% 46%,transparent 72%,rgba(2,7,19,.12) 90%,rgba(2,7,19,.28) 100%);
}

/* RC5.4 Step 7.16: premium living shield animation --------------------- */
.shield-interaction{
    overflow:visible;
    filter:drop-shadow(0 0 10px rgba(0,137,255,.20));
    animation:shield-presence 5.8s ease-in-out infinite;
}
.shield-segment{
    inset:16% 18% 15%;
    border-radius:0;
    opacity:.055;
    background:linear-gradient(145deg,rgba(120,235,255,.95),rgba(17,132,255,.62) 48%,rgba(0,52,150,.12) 82%);
    filter:blur(2.4px) drop-shadow(0 0 8px rgba(35,169,255,.35));
    mix-blend-mode:screen;
    animation:shield-facet-wave 6.6s ease-in-out infinite;
    transition:opacity .22s ease,filter .22s ease,transform .22s ease;
}
.shield-segment-top{clip-path:polygon(19% 9%,50% 0,81% 9%,69% 27%,50% 34%,31% 27%)}
.shield-segment-upper-right{clip-path:polygon(81% 9%,100% 24%,94% 55%,72% 48%,69% 27%)}
.shield-segment-lower-right{clip-path:polygon(72% 48%,94% 55%,82% 78%,50% 100%,50% 72%)}
.shield-segment-bottom{clip-path:polygon(28% 48%,72% 48%,50% 72%,50% 100%,18% 78%)}
.shield-segment-lower-left{clip-path:polygon(6% 55%,28% 48%,50% 72%,50% 100%,18% 78%)}
.shield-segment-upper-left{clip-path:polygon(0 24%,19% 9%,31% 27%,28% 48%,6% 55%)}
.shield-segment:nth-child(1){animation-delay:0s}
.shield-segment:nth-child(2){animation-delay:-1.1s}
.shield-segment:nth-child(3){animation-delay:-2.2s}
.shield-segment:nth-child(4){animation-delay:-3.3s}
.shield-segment:nth-child(5){animation-delay:-4.4s}
.shield-segment:nth-child(6){animation-delay:-5.5s}
.shield-interaction:hover .shield-segment{opacity:.14;filter:blur(1.8px) drop-shadow(0 0 13px rgba(76,207,255,.58))}
.is-authenticating .shield-interaction{animation:shield-auth-presence 1.15s ease-in-out infinite}
.is-authenticating .shield-segment{animation-duration:1.3s;opacity:.18}
.shield-segment.is-auth-active{opacity:.58;transform:scale(1.018);filter:blur(1.2px) drop-shadow(0 0 22px rgba(94,225,255,.98))}
.shield-segment.is-auth-complete{opacity:.42;filter:blur(1.4px) drop-shadow(0 0 20px rgba(73,210,255,.92))}

@keyframes shield-facet-wave{
    0%,100%{opacity:.035;filter:blur(2.7px) drop-shadow(0 0 6px rgba(0,117,255,.22));transform:scale(.992)}
    40%{opacity:.08;filter:blur(2px) drop-shadow(0 0 12px rgba(38,177,255,.42));transform:scale(1.006)}
    52%{opacity:.16;filter:blur(1.5px) drop-shadow(0 0 19px rgba(92,224,255,.66));transform:scale(1.014)}
    68%{opacity:.07;filter:blur(2.1px) drop-shadow(0 0 10px rgba(21,145,255,.34));transform:scale(1.002)}
}
@keyframes shield-presence{
    0%,100%{filter:drop-shadow(0 0 8px rgba(0,116,255,.16)) brightness(.98)}
    50%{filter:drop-shadow(0 0 18px rgba(0,174,255,.34)) brightness(1.045)}
}
@keyframes shield-auth-presence{
    0%,100%{filter:drop-shadow(0 0 18px rgba(0,157,255,.35)) brightness(1)}
    50%{filter:drop-shadow(0 0 34px rgba(74,216,255,.68)) brightness(1.12)}
}