:root { color-scheme: dark; }
.login-page { background:#07080d; color:#f8f9ff; min-height:100vh; }
.login-main { align-items:center; background:#000; box-sizing:border-box; display:flex; justify-content:center; min-height:calc(100vh - 138px); padding:clamp(2.2rem,6vw,5rem) 1.25rem; }
.login-panel { background:linear-gradient(145deg,rgba(21,28,43,.94),rgba(7,8,13,.96)); border:2px solid transparent; border-radius:26px; box-shadow:0 0 0 1px rgba(76,245,255,.78),0 0 34px rgba(76,245,255,.2),inset 0 0 50px rgba(0,0,0,.38); box-sizing:border-box; isolation:isolate; max-width:500px; overflow:hidden; padding:clamp(2rem,5vw,3.3rem); position:relative; text-align:center; width:min(100%,500px); }
.login-panel__glow { background:linear-gradient(100deg,#4cf5ff,#638eff,#9a55ff,#f64ac9,#ff9d37); filter:blur(50px); height:130px; left:25%; opacity:.16; position:absolute; top:-70px; width:50%; z-index:-1; }
.login-form { display:grid; gap:1rem; margin:0 auto; max-width:390px; text-align:left; }
.login-form input[type=text],.login-form input[type=password] { background:rgba(5,7,12,.86); border:2px solid rgba(99,142,255,.74); border-radius:12px; box-sizing:border-box; color:#fff; font:inherit; min-height:56px; outline:none; padding:.8rem 1rem; transition:border-color .2s,box-shadow .2s; width:100%; }
.login-form input::placeholder { color:#fff; opacity:1; }
.login-form input:focus { border-color:#4cf5ff; box-shadow:0 0 0 3px rgba(76,245,255,.14),0 0 20px rgba(76,245,255,.25); }
.login-submit { background:rgba(7,8,13,.48); border:2px solid #4cf5ff; border-radius:13px; box-shadow:0 0 20px rgba(76,245,255,.28),inset 0 0 17px rgba(76,245,255,.06); color:#fff; cursor:pointer; font:800 1.1rem/1 system-ui,sans-serif; margin-top:.2rem; min-height:55px; padding:.9rem 1.5rem; transition:filter .2s,transform .2s,box-shadow .2s; }
.login-submit:hover,.login-submit:focus-visible { box-shadow:0 0 32px rgba(76,245,255,.64),0 0 50px rgba(246,74,201,.2),inset 0 0 18px rgba(76,245,255,.14); filter:brightness(1.15); outline:none; transform:translateY(-2px); }
.login-links { display:grid; gap:.75rem; margin:1rem auto 0; max-width:390px; }
.login-link-button { background:transparent; border:1px solid rgba(246,74,201,.82); border-radius:12px; color:#fff; font-size:1rem; font-weight:800; min-height:48px; padding:.8rem 1rem; text-decoration:none; transition:background .2s,box-shadow .2s,transform .2s; }
.login-link-button:last-child { border-color:rgba(255,157,55,.86); }
.login-link-button:hover,.login-link-button:focus-visible { background:rgba(255,255,255,.07); box-shadow:0 0 21px rgba(246,74,201,.36); outline:none; transform:translateY(-1px); }
.login-link-button:last-child:hover,.login-link-button:last-child:focus-visible { box-shadow:0 0 21px rgba(255,157,55,.36); }
@media (max-width:640px) { .login-main { min-height:calc(100vh - 192px); padding:2rem 1rem 3rem; } .login-panel { border-radius:21px; padding:2rem 1.25rem; } }