:root{color-scheme:dark;--ink:#fff;--muted:rgba(255,255,255,.7);--line:rgba(255,255,255,.18);--accent:#9982ff}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:#18133b;color:var(--ink);overflow-x:hidden}
.login-page{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;position:relative;isolation:isolate;padding:28px 16px;background:radial-gradient(circle at 14% 18%,rgba(123,101,234,.38),transparent 29%),radial-gradient(circle at 83% 76%,rgba(118,79,182,.32),transparent 33%),linear-gradient(135deg,#0f0c29 0%,#302b63 52%,#24243e 100%)}
.login-page::before,.login-page::after{content:"";position:absolute;z-index:-1;border:1px solid rgba(255,255,255,.07);border-radius:50%;pointer-events:none}
.login-page::before{width:min(90vw,680px);aspect-ratio:1;top:-350px;right:-150px}
.login-page::after{width:min(80vw,620px);aspect-ratio:1;bottom:-410px;left:-160px}
.login-card{width:100%;max-width:452px;min-width:0;padding:42px 40px 36px;border:1px solid rgba(255,255,255,.16);border-radius:24px;background:rgba(255,255,255,.07);box-shadow:0 30px 70px rgba(4,3,25,.4);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.form-container{width:100%;min-width:0}
.brand-section{text-align:center;margin-bottom:30px}
.brand-logo{display:block;width:172px;height:auto;max-height:82px;object-fit:contain;margin:0 auto 14px}
.login-title{margin:0;color:#fff;font-size:clamp(26px,4vw,31px);line-height:1.2;letter-spacing:-.025em;font-weight:750}
.login-subtitle{margin:8px 0 0;color:var(--muted);font-size:14px}
.login-form{width:100%;min-width:0}
.form-group{margin-bottom:19px}
.login-card .form-label{display:block;margin:0 0 8px;color:#fff;font-size:14px;font-weight:650}
.input-wrapper{position:relative;min-width:0}
.input-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#c8c2e8;font-size:17px;pointer-events:none}
.login-form .form-control{width:100%;min-width:0;height:50px;padding:10px 46px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.09);color:#fff;font-size:16px;box-shadow:none}
.login-form .form-control::placeholder{color:rgba(255,255,255,.46)}
.login-form .form-control:focus{background:rgba(255,255,255,.12);border-color:#ab9af9;box-shadow:0 0 0 3px rgba(153,130,255,.25);color:#fff}
.login-form .form-control:-webkit-autofill,.login-form .form-control:-webkit-autofill:focus{-webkit-text-fill-color:#fff;box-shadow:0 0 0 100px #3b3569 inset;border-color:#ab9af9}
.password-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:37px;height:37px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:#e3def8}
.password-toggle:hover,.password-toggle:focus-visible{background:rgba(255,255,255,.12);color:#fff}
.validation-error{display:block;min-height:0;margin-top:5px;color:#ffc1c9;font-size:13px}
.form-options{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin:6px 0 25px}
.remember-me{display:flex;align-items:center;gap:8px;white-space:nowrap}
.remember-me .form-check-input{float:none;margin:0;border-color:rgba(255,255,255,.6);background-color:rgba(255,255,255,.12)}
.remember-me .form-check-input:checked{background-color:#8063ee;border-color:#8063ee}
.remember-me .form-check-label,.forgot-link{font-size:13px;color:#f2efff}
.forgot-link{text-decoration:none;text-align:right}
.forgot-link:hover,.welcome-link a:hover{color:#fff;text-decoration:underline}
.login-button{width:100%;height:51px;display:flex;justify-content:center;align-items:center;border:0;border-radius:11px;color:#fff;background:linear-gradient(135deg,#7565eb,#8862d9);font-size:16px;font-weight:700;box-shadow:0 8px 22px rgba(77,58,174,.28);transition:transform .18s,box-shadow .18s,filter .18s}
.login-button:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.1);box-shadow:0 12px 26px rgba(77,58,174,.37)}
.login-button:disabled{opacity:.65;cursor:wait}
.welcome-link{text-align:center;margin:22px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.13);font-size:13px;line-height:1.6;color:var(--muted)}
.welcome-link a{color:#d9d0ff;text-decoration:none;font-weight:650}
.form-container>.alert{font-size:14px;border-radius:10px;border-width:1px}
.form-container>.alert-danger{background:rgba(220,53,69,.18);border-color:rgba(255,114,128,.42);color:#fff}
.form-container>.alert-success{background:rgba(39,161,107,.19);border-color:rgba(97,222,156,.45);color:#fff}
.modal{color:#20243b;color-scheme:light}
.modal-content{border:0;border-radius:17px;box-shadow:0 22px 60px rgba(9,5,37,.35)}
.modal-header,.modal-footer{border-color:#edf0f5}
.modal .btn-primary{background:#7565eb;border-color:#7565eb}
.modal .btn-primary:hover{background:#6352d7;border-color:#6352d7}
@media(max-width:520px){.login-page{padding:17px 13px}.login-card{padding:31px 23px 27px;border-radius:19px}.brand-section{margin-bottom:25px}.brand-logo{width:155px;margin-bottom:10px}.form-options{flex-direction:column;align-items:flex-start;gap:10px}.forgot-link{text-align:left}.welcome-link{margin-top:18px;padding-top:17px}}
@media(max-width:360px){.login-card{padding-inline:18px}}
@media(prefers-reduced-motion:reduce){.login-button{transition:none}.login-button:hover:not(:disabled){transform:none}}