.login{
  --login-glow:color-mix(in srgb,var(--accent) 22%,transparent);
  position:relative;
  isolation:isolate;
  min-height:100dvh;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:32px 20px;
  background-color:var(--bg);
  background-image:radial-gradient(color-mix(in srgb,var(--accent) 13%,transparent) 1px,transparent 1px),radial-gradient(ellipse at 12% 10%,var(--login-glow),transparent 37%),radial-gradient(ellipse at 88% 90%,color-mix(in srgb,#ef4444 9%,transparent),transparent 35%);
  background-size:24px 24px,auto,auto;
  font-family:Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,sans-serif;
}
.login:before,.login:after{position:absolute;z-index:0;content:"";pointer-events:none;border:1px solid color-mix(in srgb,var(--accent) 14%,transparent);border-radius:50%;animation:login-drift 14s ease-in-out infinite alternate}
.login:before{width:min(58vw,620px);aspect-ratio:1;top:-34%;right:-13%;box-shadow:0 0 0 42px color-mix(in srgb,var(--accent) 3%,transparent),0 0 0 84px color-mix(in srgb,var(--accent) 2%,transparent)}
.login:after{width:min(38vw,400px);aspect-ratio:1;bottom:-28%;left:-10%;animation-delay:-5s}
.login form{position:relative;z-index:1;width:min(440px,100%);padding:38px 40px 30px;background:color-mix(in srgb,var(--surface) 58%,transparent);border:1px solid color-mix(in srgb,var(--line) 62%,white);border-radius:26px;box-shadow:0 28px 80px rgb(22 37 66 / .22),0 2px 8px rgb(22 37 66 / .08);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);color:var(--text);animation:login-enter .7s cubic-bezier(.2,.8,.2,1) both}
.login form:before{position:absolute;top:-1px;left:12%;right:12%;height:3px;content:"";background:linear-gradient(90deg,#ff3158,#ffad32,#fbef5a,#45e3b2,#3ab7ff,#8b5cff,#ff3158);background-size:250% 100%;border-radius:50%;box-shadow:0 0 8px rgb(74 144 255 / .45),0 0 18px rgb(155 89 255 / .28);animation:login-led 2.4s linear infinite}
.login .brand{justify-content:center;gap:13px;margin-bottom:28px}
.login .brand-logo{width:104px;height:48px}
.login .brand span{font-size:17px}
.login .brand small{font-size:10px;letter-spacing:1.8px;margin-top:1px}
.login h1{margin:0 0 7px;text-align:center;background:linear-gradient(100deg,#2563eb 0%,#22b8cf 25%,#6275f5 50%,#22b8cf 75%,#2563eb 100%);background-size:300% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;font-size:26px;font-weight:800;line-height:1.25;letter-spacing:-.7px;text-shadow:0 0 18px color-mix(in srgb,var(--accent) 16%,transparent);animation:login-title-shift 3.5s linear infinite}
.login p{margin:0 0 28px;text-align:center;color:var(--muted);font-size:14px}
.login label{display:block;font-weight:700;font-size:12px;margin-bottom:8px}
.login .password-field{position:relative;margin-bottom:16px}
.login .password-field>.i{position:absolute;top:50%;left:14px;width:17px;height:17px;color:var(--muted);transform:translateY(-50%);pointer-events:none}
.login input{width:100%;height:50px;padding:0 14px 0 42px;margin:0;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--text);outline:0;transition:border-color .2s,box-shadow .2s,background .2s}
.login input::placeholder{color:color-mix(in srgb,var(--muted) 75%,transparent)}
.login input:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
.login .password-field:focus-within>.i{color:var(--accent);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 45%,transparent))}
.login .btn{position:relative;isolation:isolate;overflow:hidden;width:100%;height:48px;border-radius:12px;box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 24%,transparent);transition:transform .2s,box-shadow .2s,filter .2s}
.login .btn:before{position:absolute;z-index:-1;inset:0;content:"";background:linear-gradient(110deg,transparent 25%,rgb(255 255 255 / .2) 48%,transparent 70%);transform:translateX(-110%);transition:transform .65s}
.login .btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px color-mix(in srgb,var(--accent) 32%,transparent)}
.login .btn:hover:before{transform:translateX(110%)}
.login .err{padding:11px 13px;margin-bottom:16px;border:1px solid color-mix(in srgb,var(--danger) 20%,transparent);border-radius:10px;background:color-mix(in srgb,var(--danger) 10%,transparent);color:var(--danger);font-size:13px}
.login .login-foot{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:23px;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);color:var(--muted);font-size:11px}
.login .login-foot:before{width:7px;height:7px;content:"";border-radius:50%;background:var(--ok);box-shadow:0 0 9px color-mix(in srgb,var(--ok) 55%,transparent)}
.terminal-auth{height:100dvh;overflow:hidden}
.login.terminal-login{position:fixed;z-index:1;inset:0;display:block;width:100%;height:100dvh;min-height:0;margin:0;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));overflow:hidden;background:#000;color:#00ff00;font-family:"Courier New",Courier,monospace;font-size:16px;line-height:1.2;text-shadow:0 0 2px rgb(0 255 0 / .5);-webkit-font-smoothing:auto}
.login.terminal-login#loginBootScreen{position:fixed;z-index:10000;inset:0}
.login.terminal-login:before,.login.terminal-login:after{display:none}
.login.terminal-login form{position:static;width:100%;height:100%;min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:inherit;font:inherit;animation:none}
.login.terminal-login form:before{display:none}
.terminal-login #terminal{display:flex;flex-direction:column;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.terminal-login .log-line{white-space:pre-wrap;word-break:break-all;margin-bottom:2px}
.terminal-login #input-line{display:flex;align-items:center;min-width:0;max-width:100%}
.terminal-login #prompt{white-space:pre;margin-right:8px}
.terminal-login #cmd-input{flex:1 1 0;min-width:0;width:auto;height:auto;margin:0;padding:0;border:none;border-radius:0;background:transparent;color:#00ff00;font-family:"Courier New",Courier,monospace;font-size:16px;outline:none;text-shadow:inherit;box-shadow:none}
.terminal-login #cmd-input:focus{border:none;background:transparent;box-shadow:none}
.terminal-login #cmd-input[type=password]{color:transparent;text-shadow:none}
.terminal-login.fade-out{animation:terminal-fade-out 1s ease-in-out forwards}
.terminal-login .ok-status{color:#00ff00;font-weight:bold}
.terminal-login .fail-status{color:#ff0000;font-weight:bold}
.terminal-login .warn-status{color:#ffff00;font-weight:bold}
@keyframes terminal-fade-out{0%{opacity:1;filter:blur(0)}100%{opacity:0;filter:blur(5px)}}
@keyframes login-enter{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes login-drift{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(12px,-16px,0) rotate(8deg)}}
@keyframes login-led{to{background-position:250% 0}}
@keyframes login-title-shift{from{background-position:0% 50%}to{background-position:100% 50%}}
@media(max-width:720px){
  .login{padding:20px 16px}
  .login form{width:min(400px,100%);padding:32px 24px 24px;border-radius:22px}
  .login .brand{margin-bottom:25px}
  .login .brand-logo{width:92px;height:43px}
  .login h1{font-size:24px}
  .login.terminal-login form{width:100%;height:100%;min-height:0;padding:0;border:0;border-radius:0}
}
@media(prefers-reduced-motion:reduce){
  .login:before,.login:after{animation:none}
  .login form:before{animation-duration:8s}
  .login h1{animation:none;background-position:50% 50%}
}