*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;min-height:100%}.login-page{width:100%;min-height:100vh;min-height:100dvh;display:flex;align-items:flex-start;justify-content:center;position:relative;overflow-x:hidden;overflow-y:auto;padding:40px 20px;background:linear-gradient(135deg,#082f49bd,#0e74909e,#1665348f),url(/images/login-bg.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;-webkit-overflow-scrolling:touch}.floating-circle{position:fixed;border-radius:50%;pointer-events:none;opacity:.14;filter:blur(6px);animation:floating 8s ease-in-out infinite}.circle-one{width:180px;height:180px;top:-90px;left:-70px;background:#38bdf8}.circle-two{width:220px;height:220px;right:-100px;bottom:-100px;background:#22c55e;animation-delay:2s}.circle-three{width:100px;height:100px;top:15%;right:12%;background:#60a5fa;animation-delay:4s}@keyframes floating{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.login-container{position:relative;z-index:5;width:100%;max-width:400px;min-width:0;display:flex;flex-direction:column;align-items:center;flex-shrink:0;margin:0 auto}.login-card{position:relative;width:100%;height:auto;min-height:0;min-width:0;padding:30px 32px 26px;background:#f8fcfff7;border:1px solid rgba(219,234,254,.95);border-radius:24px;box-shadow:0 20px 55px #0020374d;transition:transform .3s ease,box-shadow .3s ease}.login-card:hover{transform:translateY(-3px);box-shadow:0 25px 65px #0020375c,0 8px 25px #22c55e14}.login-card:before{content:"";position:absolute;top:0;left:12%;width:76%;height:4px;border-radius:0 0 10px 10px;background:linear-gradient(90deg,#2563eb,#0ea5e9 48%,#16a34a)}.login-skeleton{position:absolute;inset:0;z-index:20;padding:30px 32px 26px;background:#f8fcff;border-radius:24px;transition:opacity .35s ease,visibility .35s ease}.login-skeleton.hidden{opacity:0;visibility:hidden;pointer-events:none}.skeleton-shimmer{position:relative;overflow:hidden;background:#e2edf5;border-radius:9px}.skeleton-shimmer:after{content:"";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);animation:skeletonShimmer 1.25s infinite}@keyframes skeletonShimmer{to{transform:translate(100%)}}.skeleton-logo{width:72px;height:72px;margin:0 auto 18px;border-radius:50%}.skeleton-title{width:150px;height:24px;margin:0 auto 9px}.skeleton-text{width:230px;height:12px;margin:0 auto 25px}.skeleton-label{width:90px;height:11px;margin-bottom:7px}.skeleton-input{width:100%;height:46px;margin-bottom:14px;border-radius:11px}.skeleton-options{width:100%;height:15px;margin-bottom:16px}.skeleton-button{width:100%;height:46px;border-radius:11px}.logo-section{display:flex;justify-content:center;margin-bottom:16px}.logo-wrapper{position:relative;width:76px;height:76px;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;border-radius:50%;border:3px solid #d1fae5;box-shadow:0 8px 22px #2563eb2e,0 0 18px #22c55e1f;animation:logoFloat 4s ease-in-out infinite}.logo-wrapper img{position:relative;z-index:2;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:50%;display:block}.logo-background{position:absolute;inset:0;background:#fff;border-radius:50%}@keyframes logoFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.login-heading{width:100%;text-align:center;margin-bottom:22px}.login-heading h1{margin:0;color:#172033;font-size:27px;line-height:1.15;font-weight:750;letter-spacing:-.4px}.login-heading p{margin:6px auto 0;max-width:290px;color:#64748b;font-size:12px;line-height:1.5}.login-heading span{background:linear-gradient(90deg,#2563eb,#0ea5e9,#16a34a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:750}.login-form{width:100%;display:flex;flex-direction:column;gap:15px}.form-group{width:100%;min-width:0}.form-group label{display:block;margin-bottom:7px;color:#334155;font-size:12px;font-weight:650}.input-wrapper{position:relative;width:100%;min-width:0}.input-wrapper input{display:block;width:100%;height:46px;padding:0 42px;color:#1e293b;background:#f8fafc;border:1px solid #d7e0ea;border-radius:11px;outline:none;font-size:12px;font-family:inherit;transition:border-color .25s ease,box-shadow .25s ease,background .25s ease}.input-wrapper input::-moz-placeholder{color:#94a3b8}.input-wrapper input::placeholder{color:#94a3b8}.input-wrapper input:hover{border-color:#93c5fd;background:#fff}.input-wrapper input:focus{background:#fff;border-color:#0ea5e9;box-shadow:0 0 0 3px #0ea5e91a,0 0 12px #22c55e0f}.input-icon{position:absolute;top:50%;left:14px;width:16px;height:16px;color:#94a3b8;transform:translateY(-50%);pointer-events:none;transition:color .2s ease}.input-wrapper:focus-within .input-icon{color:#0ea5e9}.password-toggle{position:absolute;top:50%;right:7px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#94a3b8;background:transparent;border:none;border-radius:8px;cursor:pointer;transform:translateY(-50%);transition:color .2s ease,background .2s ease}.password-toggle:hover{color:#2563eb;background:#eff6ff}.password-toggle svg{width:16px;height:16px}.input-error{margin-top:4px;color:#dc2626;font-size:10px}.login-options{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:-2px}.remember-label{display:flex;align-items:center;gap:7px;color:#64748b;font-size:11px;cursor:pointer;min-width:0}.remember-label input{width:15px;height:15px;flex-shrink:0;accent-color:#16a34a;cursor:pointer}.forgot-link{color:#2563eb;font-size:11px;font-weight:600;text-decoration:none;white-space:nowrap;transition:color .2s ease}.forgot-link:hover{color:#16a34a;text-decoration:underline}.login-button{position:relative;width:100%;height:46px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:7px;overflow:hidden;color:#fff;background:linear-gradient(90deg,#2563eb,#0ea5e9 48%,#16a34a);border:none;border-radius:11px;font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 7px 17px #2563eb38,0 5px 15px #16a34a1f;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}.login-button:hover{background:linear-gradient(90deg,#1d4ed8,#0284c7 45%,#15803d);transform:translateY(-2px);box-shadow:0 10px 24px #2563eb4d,0 8px 20px #16a34a2e}.login-button:active{transform:translateY(0) scale(.98)}.login-button:disabled{opacity:.7;cursor:not-allowed;transform:none}.login-button:before{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transform:skew(-20deg);transition:left .65s ease}.login-button:hover:before{left:140%}.login-button svg{width:16px;height:16px}.spinner{width:17px;height:17px;animation:spin .8s linear infinite}.spinner.hidden{display:none}.spinner-circle{opacity:.3}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.secure-footer{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:16px;color:#94a3b8;font-size:9px;text-align:center}.secure-footer svg{width:13px;height:13px;color:#16a34a;flex-shrink:0}.copyright{width:100%;margin:12px 0 0;padding:0 5px;color:#ffffffd1;font-size:9px;font-weight:600;letter-spacing:.6px;text-align:center}@media(min-width:601px)and (max-width:1024px){.login-page{padding:32px 24px}.login-container{max-width:400px}.login-card{padding:30px 32px 26px}}@media(max-width:600px){.login-page{align-items:flex-start;padding:24px 16px 28px}.login-container{width:100%;max-width:400px}.login-card{width:100%;padding:27px 25px 23px;border-radius:21px}.login-skeleton{padding:27px 25px 23px;border-radius:21px}.logo-wrapper{width:68px;height:68px}.login-heading{margin-bottom:20px}.login-heading h1{font-size:25px}}@media(max-width:380px){.login-page{padding:16px 12px 24px}.login-container{max-width:100%}.login-card,.login-skeleton{padding:23px 18px 20px;border-radius:19px}.logo-section{margin-bottom:13px}.logo-wrapper{width:62px;height:62px}.login-heading{margin-bottom:18px}.login-heading h1{font-size:23px}.login-heading p{max-width:260px;font-size:11px}.login-form{gap:13px}.input-wrapper input{height:44px;padding-left:40px;padding-right:40px}.login-button{height:44px}.login-options{gap:8px}.remember-label,.forgot-link{font-size:10px}}@media(max-height:700px){.login-page{padding-top:12px;padding-bottom:18px}.logo-section{margin-bottom:10px}.logo-wrapper{width:58px;height:58px}.login-heading{margin-bottom:14px}.login-heading h1{font-size:22px}.login-heading p{margin-top:4px}.login-form{gap:11px}.secure-footer{margin-top:11px}.copyright{margin-top:8px}}@media(max-height:560px){.login-page{padding:8px 12px 14px}.logo-section{margin-bottom:7px}.logo-wrapper{width:50px;height:50px}.login-heading{margin-bottom:10px}.login-heading h1{font-size:20px}.login-heading p{font-size:10px}.login-form{gap:9px}.form-group label{margin-bottom:5px;font-size:10px}.input-wrapper input{height:40px;font-size:11px}.login-button{height:40px}.secure-footer{margin-top:8px}.copyright{margin-top:5px}}@media(max-width:900px)and (orientation:landscape){.login-page{align-items:flex-start;padding:12px 16px 20px}.login-container{max-width:390px}.login-card{padding:20px 24px 18px}.logo-wrapper{width:54px;height:54px}.logo-section{margin-bottom:8px}.login-heading{margin-bottom:12px}.login-heading h1{font-size:22px}.login-form{gap:10px}}@media(hover:none)and (pointer:coarse){.login-card:hover{transform:none;box-shadow:0 20px 55px #0020374d}.login-button:hover{transform:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@supports (padding: max(0px)){.login-page{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:max(28px,env(safe-area-inset-bottom))}}