.auth-page{position:relative;display:grid;place-items:center;min-height:100vh;min-height:100svh;margin:0;padding:24px 16px;overflow-x:hidden;background:#13205c;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.auth-bg{position:fixed;inset:0;overflow:hidden;background:radial-gradient(120% 120% at 0% 0%,#2c3a87 0%,#13205c 55%,#0a1440 100%)}
.auth-bg span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:drift 18s ease-in-out infinite alternate}
.auth-bg span:nth-child(1){width:46vmax;height:46vmax;left:-12vmax;top:-14vmax;background:#0061c7}
.auth-bg span:nth-child(2){width:34vmax;height:34vmax;right:-10vmax;bottom:-12vmax;background:#38d200;opacity:.28;animation-duration:22s;animation-delay:-6s}
.auth-bg span:nth-child(3){width:26vmax;height:26vmax;right:18vmax;top:-10vmax;background:#29abe2;opacity:.3;animation-duration:26s;animation-delay:-12s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vmax,4vmax) scale(1.12)}100%{transform:translate(-4vmax,7vmax) scale(.94)}}

.auth-card{--mx:0;--my:0;position:relative;display:grid;grid-template-columns:1fr 1fr;width:min(900px,100%);height:560px;border-radius:30px;background:#fff;overflow:hidden;box-shadow:0 40px 80px -20px #050b2e99,0 0 0 1px #ffffff14;animation:cardIn .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes cardIn{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}

.auth-blob{position:absolute;z-index:2;top:0;left:-250%;width:300%;height:100%;border-radius:150px;background:linear-gradient(90deg,#2c3a87 0%,#2c3a87 80%,#0061c7 100%);animation:blobIn 1.5s cubic-bezier(.77,0,.18,1) .25s both}
@keyframes blobIn{from{left:-50%}to{left:-250%}}
.auth-card.is-leaving .auth-blob{animation:blobOut .85s cubic-bezier(.77,0,.18,1) forwards}
@keyframes blobOut{from{left:-250%}to{left:-50%}}

.auth-panel{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:30px;padding:40px;color:#fff;text-align:center;pointer-events:none}
.auth-mosaic{width:min(240px,70%);height:auto;overflow:visible;transform:translate(calc(var(--mx) * 14px),calc(var(--my) * 14px));transition:transform .4s ease-out}
.auth-mosaic .t{transform-box:fill-box;transform-origin:center;opacity:0;animation:tileIn .6s cubic-bezier(.2,.8,.2,1) forwards,float 6s ease-in-out infinite}
.auth-mosaic .t1{animation-delay:1.05s,1.7s}.auth-mosaic .t2{animation-delay:1.1s,2.1s}.auth-mosaic .t3{animation-delay:1.15s,1.9s}
.auth-mosaic .t4{animation-delay:1.2s,2.4s}.auth-mosaic .t5{animation-delay:1.25s,1.8s}.auth-mosaic .t6{animation-delay:1.3s,2.6s}
.auth-mosaic .t7{animation-delay:1.35s,2s}.auth-mosaic .t8{animation-delay:1.4s,2.8s}.auth-mosaic .t9{animation-delay:1.45s,2.2s}
.auth-mosaic .t10{animation-delay:1.5s,3s}.auth-mosaic .t11{animation-delay:1.55s,2.5s}.auth-mosaic .t12{animation-delay:1.6s,1.95s}
.auth-mosaic .t13{animation-delay:1.65s,2.7s}.auth-mosaic .t14{animation-delay:1.7s,2.3s}
@keyframes tileIn{from{opacity:0;transform:translateY(18px) rotate(-20deg) scale(.4)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -6px}}
.auth-panel-text{opacity:0;animation:fadeUp .7s cubic-bezier(.2,.8,.2,1) 1.25s forwards}
.auth-greet{margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#c3defa}
.auth-panel h2{margin:0;font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.auth-form{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;padding:48px 52px}
.auth-form>*{opacity:0;animation:fadeUp .6s cubic-bezier(.2,.8,.2,1) forwards}
.auth-form>:nth-child(1){animation-delay:1.1s}.auth-form>:nth-child(2){animation-delay:1.2s}.auth-form>:nth-child(3){animation-delay:1.3s}.auth-form>:nth-child(4){animation-delay:1.4s}
.login-logo{display:block;flex:none;width:177px;height:40px;margin:0 0 26px}
.auth-form h1{margin:0 0 24px;font-size:28px;font-weight:700;letter-spacing:-.025em;color:var(--sc-grey)}

.auth-error{display:flex;align-items:center;gap:10px;margin:-8px 0 18px;padding:11px 14px;border-radius:12px;background:var(--red-soft);color:var(--red);font-size:13px;font-weight:600}
.auth-error svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.auth-card.has-error{animation:cardIn .9s cubic-bezier(.2,.8,.2,1) both,shake .5s ease-in-out 1.7s}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}

.field{position:relative;margin-bottom:18px}
.field input{display:block;width:100%;height:56px;margin:0;padding:22px 48px 8px 48px;border:0;border-radius:14px;background:#f1f4f9;color:var(--sc-grey);font:500 15px 'Plus Jakarta Sans',system-ui,sans-serif;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .25s,background .25s}
.field input:hover{background:#ebeff6}
.field input:focus{outline:0;background:#fff;box-shadow:inset 0 0 0 1.5px var(--sc-blue),0 8px 24px -10px #0473ea66}
.field label{position:absolute;left:48px;top:50%;margin:0;transform:translateY(-50%);color:var(--sc-grey-70);font-size:14px;font-weight:500;pointer-events:none;transition:top .2s,font-size .2s,color .2s}
.field input:focus+label,.field input:not(:placeholder-shown)+label{top:17px;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--sc-blue)}
.field-icon{position:absolute;left:16px;top:50%;width:20px;height:20px;transform:translateY(-50%);fill:none;stroke:var(--sc-grey-70);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.field input:focus~.field-icon{stroke:var(--sc-blue)}
.field-eye{position:absolute;right:8px;top:50%;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:none;color:var(--sc-grey-70);transform:translateY(-50%);cursor:pointer;transition:background .2s,color .2s}
.field-eye:hover{background:#e3e9f3;color:var(--sc-grey)}
.field-eye[aria-pressed=true]{color:var(--sc-blue)}
.field-eye svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.auth-caps{display:flex;align-items:center;gap:8px;margin:-8px 0 14px 4px;color:#b54708;font-size:12px;font-weight:600}
.auth-caps:before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}

.auth-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;margin-top:8px;border:0;border-radius:14px;background:linear-gradient(90deg,#2c3a87,#0061c7);background-size:200% 100%;color:#fff;font:700 15px 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.01em;overflow:hidden;cursor:pointer;box-shadow:0 14px 28px -12px #0061c7aa;transition:background-position .5s,transform .15s,box-shadow .3s}
.auth-btn:hover{background-position:100% 0;box-shadow:0 18px 32px -12px #0061c7cc}
.auth-btn:active{transform:scale(.985)}
.auth-btn:focus-visible{outline:3px solid #c3defa;outline-offset:2px}
.auth-btn:after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffff40,transparent);transform:skewX(-18deg);transition:left .7s}
.auth-btn:hover:after{left:120%}
.auth-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.auth-btn:hover svg{transform:translateX(4px)}
.auth-spin{display:none;width:20px;height:20px;border:2.5px solid #ffffff55;border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
.auth-btn.is-loading span,.auth-btn.is-loading svg{display:none}
.auth-btn.is-loading .auth-spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:760px){
  .auth-page{padding:16px}
  .auth-card{grid-template-columns:1fr;grid-template-rows:190px 1fr;height:auto;min-height:min(680px,calc(100svh - 32px));border-radius:26px}
  .auth-blob{left:0;top:-270%;width:100%;height:300%;border-radius:22vw;background:linear-gradient(180deg,#2c3a87 0%,#2c3a87 80%,#0061c7 100%);animation-name:blobInY}
  @keyframes blobInY{from{top:-20%}to{top:-270%}}
  .auth-card.is-leaving .auth-blob{animation-name:blobOutY}
  @keyframes blobOutY{from{top:-270%}to{top:-20%}}
  .auth-panel{flex-direction:row;gap:18px;padding:22px 26px 34px;text-align:left}
  .auth-mosaic{width:96px}
  .auth-panel h2{font-size:22px}
  .auth-form{padding:30px 24px 32px}
  .login-logo{width:142px;height:32px;margin-bottom:20px}
  .auth-form h1{font-size:24px;margin-bottom:20px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .auth-mosaic{transform:none}
}