﻿/* Megasoft login: ambient light, depth and gentle motion. */
body:not(.authenticated){background:#f6f4f7;isolation:isolate}
body:not(.authenticated)::before,body:not(.authenticated)::after{content:"";position:fixed;pointer-events:none;z-index:-1;width:65vw;height:65vw;max-width:950px;max-height:950px;border-radius:50%;filter:blur(12px);opacity:.8;will-change:transform}
body:not(.authenticated)::before{top:-42vw;left:-15vw;background:radial-gradient(circle,#f0a3ad55 0%,#f8d5df44 35%,transparent 67%);animation:megasoft-ambient 22s ease-in-out infinite alternate}
body:not(.authenticated)::after{bottom:-44vw;right:-20vw;background:radial-gradient(circle,#dbb6d64d 0%,#f2a8b82b 38%,transparent 68%);animation:megasoft-ambient 28s ease-in-out -9s infinite alternate-reverse}
body:not(.authenticated) header.app-header{background:#ffffffa8;border-bottom-color:#fff;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
body:not(.authenticated) .header-session{background:#ffffffa6;border:1px solid #e9e2e7;border-radius:30px;padding:8px 14px;color:#8c7380}
body:not(.authenticated) .header-session::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#cd3543;margin-right:8px;box-shadow:0 0 0 4px #cd354312}
body:not(.authenticated) main{position:relative}
.login-layout{border:1px solid #ffffff;border-radius:26px;box-shadow:0 30px 85px -28px #3d193329,0 6px 18px -8px #51203414;animation:megasoft-enter .85s cubic-bezier(.22,1,.36,1) both;overflow:hidden}
.login-brand-panel{isolation:isolate;background:linear-gradient(145deg,#fff3f5,#fff9fa 50%,#f2edf4);border-right:1px solid #efe3e980;overflow:hidden}
.login-brand-panel::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(#ce627322 .8px,transparent .8px);background-size:22px 22px;mask-image:linear-gradient(150deg,#0008,transparent 70%);pointer-events:none}
.login-brand-panel::after{content:"";position:absolute;z-index:-1;width:440px;height:440px;top:-145px;left:-175px;border:1px solid #dfb2c34d;border-radius:50%;box-shadow:0 0 0 45px #e4baca12,0 0 0 90px #e4baca0d;animation:megasoft-orbit 18s ease-in-out infinite alternate;pointer-events:none}
.brand-tag{display:inline-flex;align-items:center;align-self:flex-start;gap:8px;background:#fff9;border:1px solid #e8cad4;border-radius:30px;padding:8px 12px;letter-spacing:2px;font-size:9px;box-shadow:0 3px 12px #75465606}
.brand-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:#db3443}
.login-logo{position:relative}
.login-logo::before{content:"";position:absolute;width:190px;height:95px;bottom:15px;border-radius:50%;background:radial-gradient(ellipse,#bc576017,transparent 70%);transform:scaleX(1.2);animation:megasoft-logo-shadow 7s ease-in-out infinite;pointer-events:none}
.login-logo img{animation:megasoft-logo-float 7s ease-in-out infinite;filter:drop-shadow(0 10px 9px #812a3410)}
.login-brand-panel h1{letter-spacing:-1.4px;line-height:1.25}
.login-brand-panel>p{color:#8a7783;line-height:1.75}
.login-features{gap:10px;margin-top:22px}
.login-features span{border:1px solid #ffffffd9;border-radius:9px;padding:9px 12px;background:#ffffff62;box-shadow:0 2px 8px #61213b03;animation:megasoft-enter .7s cubic-bezier(.22,1,.36,1) both;transition:background .25s,box-shadow .25s,transform .25s;color:#796571}
.login-features span:nth-child(1){animation-delay:.18s}.login-features span:nth-child(2){animation-delay:.28s}.login-features span:nth-child(3){animation-delay:.38s}
.login-features span:hover{transform:translateX(4px);background:#fff;box-shadow:0 6px 14px #57223908}
.login-form-panel{background:linear-gradient(165deg,#fff,#fff 70%,#fffafb);position:relative}
.login-welcome{color:#c24350;letter-spacing:2px}.login-form-panel h2{font-weight:650;letter-spacing:-1px}.login-description{color:#8a8894}
.login-form-panel form>label{animation:megasoft-enter .65s cubic-bezier(.22,1,.36,1) both;animation-delay:.12s;transition:color .25s}
.login-form-panel form>label:nth-child(2){animation-delay:.20s}.login-form-panel form>label:nth-child(3){animation-delay:.28s}
.login-form-panel label:focus-within{color:#b1283a}
.login-form-panel input,.login-form-panel select{border:1px solid #e4e0e8;border-radius:10px;background:#faf9fc;transition:border-color .24s,box-shadow .24s,background .24s;color:#453b48;box-shadow:0 2px 4px #36334602}
.login-form-panel input:hover,.login-form-panel select:hover{border-color:#cfc3ce;background:#fdfcfe}
.login-form-panel input:focus,.login-form-panel select:focus{outline:none;border-color:#d16b79;background:#fff;box-shadow:0 0 0 4px #d72c360b,0 3px 12px #9c36400a}
.login-form-panel input::placeholder{color:#b0a8b3;transition:opacity .25s}.login-form-panel input:focus::placeholder{opacity:.65}
.password-field button{border-radius:7px;transition:background .2s,color .2s}.password-field button:hover{background:#f9e9ee;color:#b6273b}
.login-form-panel .login-submit{position:relative;overflow:hidden;background:linear-gradient(115deg,#c72338,#e53340 65%,#cb2539);background-size:160% 100%;border:1px solid #ce2c3e;border-radius:10px;box-shadow:0 7px 18px #ce24362a,inset 0 1px 0 #ffffff26;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,background-position .5s;animation:megasoft-enter .7s .35s cubic-bezier(.22,1,.36,1) both}
.login-form-panel .login-submit::after{content:"";position:absolute;inset:-70% -50%;background:linear-gradient(110deg,transparent 42%,#ffffff30 50%,transparent 58%);transform:translateX(-80%);pointer-events:none}
.login-form-panel .login-submit:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 12px 23px #ce243635,inset 0 1px 0 #ffffff30}
.login-form-panel .login-submit:hover::after{animation:megasoft-sheen 1s ease-out}
.login-form-panel .login-submit:active{transform:translateY(0);box-shadow:0 3px 9px #ce243628}
.login-submit span{transition:transform .25s}.login-submit:hover span{transform:translateX(4px)}
body.busy:not(.authenticated) .login-submit{transform:none;box-shadow:none}
body.busy:not(.authenticated) .login-submit::after{inset:auto;right:16px;top:15px;width:15px;height:15px;border:2px solid #ffffff55;border-top-color:white;background:none;border-radius:50%;animation:megasoft-spin .8s linear infinite}
body.busy:not(.authenticated) .login-submit span{opacity:0}
body:not(.authenticated) #status{border:1px solid #ffffffb3;background:#ffffff65;backdrop-filter:blur(8px);box-shadow:0 4px 12px #59304203;transition:background .3s,color .3s}
body:not(.authenticated) #status.error{background:#ffedf0;border-color:#edccd3;color:#a83144}
@keyframes megasoft-enter{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes megasoft-logo-float{0%,100%{transform:translateY(-10px)}50%{transform:translateY(-18px)}}
@keyframes megasoft-logo-shadow{0%,100%{opacity:.7;transform:scaleX(1.2)}50%{opacity:.4;transform:scaleX(1)}}
@keyframes megasoft-ambient{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(8vw,6vh,0) scale(1.12)}}
@keyframes megasoft-orbit{from{transform:translate3d(0,0,0)}to{transform:translate3d(30px,25px,0)}}
@keyframes megasoft-sheen{from{transform:translateX(-80%)}to{transform:translateX(80%)}}
@keyframes megasoft-spin{to{transform:rotate(360deg)}}
@media(max-width:700px){.login-layout{border-radius:20px}.login-brand-panel{padding-top:20px;padding-bottom:20px}.brand-tag{font-size:8px;padding:6px 9px}.login-logo::before{width:125px;height:55px;bottom:0}.login-brand-panel h1{font-size:23px;line-height:1.2}.login-form-panel{padding:26px}.login-brand-panel::after{width:280px;height:280px}.login-logo img{animation-duration:9s}body:not(.authenticated)::before,body:not(.authenticated)::after{width:110vw;height:110vw;filter:none}}
@media(prefers-reduced-motion:reduce){body:not(.authenticated)::before,body:not(.authenticated)::after,.login-layout,.login-layout *,.login-layout *::before,.login-layout *::after{animation:none!important;transition:none!important;will-change:auto!important}.login-logo img{transform:translateY(-10px)}.login-submit:hover,.login-features span:hover,.login-submit:hover span{transform:none}}
.login-form-panel .login-submit{animation-fill-mode:backwards}body.busy:not(.authenticated) .login-submit::after{transform:rotate(0deg)}
/* Login opens directly on the access card, without a top header. */
body:not(.authenticated) > header.app-header{display:none}
