.guest{min-height:100vh;display:grid;place-items:center;background:linear-gradient(180deg,#edf7fd,#f7fbfe)}
.loginBox{width:min(410px,calc(100% - 28px));background:#fff;border:1px solid var(--line);padding:26px;border-radius:8px;box-shadow:0 16px 42px rgba(15,23,42,.12)}
.statusBox{width:min(760px,calc(100% - 28px));display:grid;gap:14px}
.loginMark{font-weight:900;letter-spacing:.08em}
.loginBox h1{margin:10px 0 6px;font-size:28px}
.roleExitActions{display:flex;justify-content:center;margin-top:16px}
.roleExitBtn{width:100%;justify-content:center}
.roleExitBtn svg{width:18px;height:18px}
.roleLockedHint{margin:12px 0 0;color:#64748b;font-size:13px;line-height:1.35;text-align:center}
.guestLogin{display:block;min-height:100vh;background:#05070b;color:#e9f1f8;overflow-x:hidden}
.guestLogin:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.42;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.loginGlitchShell{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1.05fr .95fr;background:#05070b;color:#e9f1f8;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}
.loginGlitchStage{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:56px;background:radial-gradient(120% 90% at 50% 40%,rgba(80,171,241,.13),transparent 60%),linear-gradient(160deg,#090d14,#05070b 72%);border-right:1px solid rgba(120,160,205,.14)}
.loginGlitchStage:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 120% at 50% 45%,transparent 52%,rgba(0,0,0,.6))}
.loginCorner{position:absolute;width:26px;height:26px;border:2px solid rgba(120,160,205,.22);z-index:2}
.loginCorner.a{top:24px;left:24px;border-right:0;border-bottom:0}
.loginCorner.b{top:24px;right:24px;border-left:0;border-bottom:0}
.loginCorner.c{bottom:24px;left:24px;border-right:0;border-top:0}
.loginCorner.d{bottom:24px;right:24px;border-left:0;border-top:0}
.loginHud{position:absolute;z-index:3;color:#4c5868;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;text-transform:uppercase;letter-spacing:.16em}
.loginHud b{color:#50abf1}
.loginHud.top{top:34px;left:38px}
.loginHud.bottom{right:38px;bottom:34px;text-align:right;line-height:1.6}
.loginBrandScene{position:relative;z-index:2;display:grid;place-items:center}
.loginHalo{position:absolute;width:540px;height:540px;border-radius:999px;background:radial-gradient(circle,rgba(80,171,241,.22),transparent 62%);filter:blur(6px);animation:loginPulse 6s steps(1) infinite}
.loginFrame{position:absolute;width:360px;height:360px;border:1px solid rgba(120,160,205,.24)}
.loginFrame:before{content:"";position:absolute;inset:-9px;border:1px solid rgba(120,160,205,.12)}
.loginMorph{position:relative;width:clamp(220px,28vw,360px);aspect-ratio:1;animation:loginJitter 6s steps(1) infinite}
.loginMorphIcon{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 44px rgba(0,0,0,.28))}
.loginMorphIcon.cyan{opacity:0;mix-blend-mode:screen;filter:none;animation:loginCyan 6s steps(1) infinite}
.loginMorphIcon.magenta{opacity:0;mix-blend-mode:screen;filter:hue-rotate(128deg) saturate(1.9);animation:loginMagenta 6s steps(1) infinite}
.loginScan{position:absolute;inset:-4%;background:repeating-linear-gradient(0deg,rgba(0,233,255,.05) 0 2px,transparent 2px 5px);mix-blend-mode:screen;opacity:.55}
.loginStageCopy{position:relative;z-index:2;text-align:center;margin-top:46px}
.loginStageCopy strong{position:relative;display:inline-block;font-weight:900;font-size:clamp(20px,2.2vw,30px);text-transform:uppercase;color:#e9f1f8}
.loginStageCopy strong:before,.loginStageCopy strong:after{content:attr(data-text);position:absolute;inset:0;overflow:hidden;opacity:0}
.loginStageCopy strong:before{color:#00e9ff;clip-path:inset(0 0 55% 0);animation:loginTextC 4s steps(1) infinite}
.loginStageCopy strong:after{color:#ff2bd6;clip-path:inset(55% 0 0 0);animation:loginTextM 4s steps(1) infinite}
.loginStageCopy p{margin:14px 0 0;color:#79859a;font-size:13.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.6}
.loginGlitchPanel{display:flex;align-items:center;justify-content:center;padding:48px;background:radial-gradient(130% 80% at 100% 0%,rgba(80,171,241,.06),transparent 55%),#05070b}
.loginGlitchCard{position:relative;width:min(100%,408px);display:grid;gap:16px;padding:2px;color:#e9f1f8;animation:loginRise .8s cubic-bezier(.16,1,.3,1) both}
.loginCardCorner{position:absolute;width:16px;height:16px;border:2px solid rgba(120,160,205,.24);pointer-events:none}
.loginCardCorner.a{top:-10px;left:-10px;border-right:0;border-bottom:0}
.loginCardCorner.b{top:-10px;right:-10px;border-left:0;border-bottom:0}
.loginCardCorner.c{bottom:-10px;left:-10px;border-right:0;border-top:0}
.loginCardCorner.d{bottom:-10px;right:-10px;border-left:0;border-top:0}
.loginMobileBrand{display:none}
.loginEyebrow{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#50abf1;font-weight:800}
.loginEyebrow span{color:#4c5868}
.loginFullLogo{width:min(260px,78%);height:auto;object-fit:contain;margin:2px 0 4px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.28))}
.loginGlitchCard h1{margin:0;font-size:34px;line-height:1;text-transform:uppercase;font-weight:950;color:#f8fbff}
.loginSub{margin:-6px 0 8px;color:#79859a;font-size:14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.loginError{margin:0;background:rgba(127,29,29,.34);color:#fee2e2;border-color:rgba(248,113,113,.34)}
.loginField{display:grid;gap:9px;color:#79859a;font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.loginInput{display:flex;align-items:center;background:rgba(255,255,255,.02);border:1px solid rgba(120,160,205,.22);border-radius:8px;transition:border-color .2s,background .2s,box-shadow .2s}
.loginInput:focus-within{border-color:#50abf1;background:rgba(80,171,241,.06);box-shadow:0 0 0 3px rgba(80,171,241,.12),-3px 0 0 rgba(0,233,255,.4),3px 0 0 rgba(255,43,214,.4)}
.loginInput svg{width:18px;height:18px;margin-left:14px;color:#4c5868;flex:0 0 auto}
.loginInput:focus-within svg{color:#50abf1}
.loginInput input{flex:1;min-height:48px;border:0;background:transparent;color:#e9f1f8;font-size:15px;padding:12px 14px 12px 11px;outline:0}
.loginInput input::placeholder{color:#4c5868}
.loginEye{width:42px;min-height:42px;margin:0 4px 0 0;padding:0;background:transparent;color:#4c5868;display:grid;place-items:center}
.loginEye:hover{color:#00e9ff;filter:none}
.loginEye svg{margin:0}
.loginSubmit{min-height:52px;border-radius:8px;background:#50abf1;color:#04121f;font-weight:950;text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 0 0 rgba(0,0,0,0);transition:transform .12s,box-shadow .2s,filter .2s}
.loginSubmit:hover{transform:translateY(-1px);box-shadow:-3px 0 0 #00e9ff,3px 0 0 #ff2bd6,0 14px 34px -12px rgba(80,171,241,.7);filter:none}
.loginSubmit i{display:none;width:18px;height:18px;border:2px solid rgba(4,18,31,.3);border-top-color:#04121f;border-radius:50%;animation:loginRot .7s linear infinite}
.loginGlitchCard.is-loading .loginSubmit span{opacity:.36}
.loginGlitchCard.is-loading .loginSubmit i{display:block}
.loginFoot{text-align:center;margin:12px 0 0;color:#4c5868;font-size:12px;line-height:1.8;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.loginFoot span{color:#50abf1}
@keyframes loginPulse{0%,49%{opacity:.7}50%,100%{opacity:1}}
@keyframes loginJitter{0%,44%{transform:translate(0,0)}45%{transform:translate(-3px,1px)}47%{transform:translate(2px,-2px)}49%{transform:translate(-2px,1px)}51%{transform:translate(0,0)}96%{transform:translate(2px,-1px)}98%{transform:translate(-3px,1px)}100%{transform:translate(0,0)}}
@keyframes loginCyan{0%,7%{opacity:0;transform:none}8%{opacity:.7;transform:translate(7px,-2px)}10%{opacity:0;transform:none}45%{opacity:.9;transform:translate(14px,-3px)}47%{transform:translate(-11px,2px)}52%{opacity:0;transform:none}96%{opacity:.85;transform:translate(-13px,2px)}99%{opacity:0;transform:none}}
@keyframes loginMagenta{0%,7%{opacity:0;transform:none}8%{opacity:.65;transform:translate(-7px,2px)}10%{opacity:0;transform:none}45%{opacity:.85;transform:translate(-14px,3px)}47%{transform:translate(11px,-2px)}52%{opacity:0;transform:none}96%{opacity:.8;transform:translate(13px,-2px)}99%{opacity:0;transform:none}}
@keyframes loginTextC{0%,90%{transform:none;opacity:0}92%{transform:translateX(-4px);opacity:.9}94%{transform:translateX(3px)}96%{opacity:0;transform:none}}
@keyframes loginTextM{0%,90%{transform:none;opacity:0}92%{transform:translateX(4px);opacity:.9}94%{transform:translateX(-3px)}96%{opacity:0;transform:none}}
@keyframes loginRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes loginRot{to{transform:rotate(360deg)}}
@media (max-width:880px){
  .loginGlitchShell{grid-template-columns:1fr}
  .loginGlitchStage{display:none}
  .loginGlitchPanel{min-height:100dvh;align-items:flex-start;padding:38px 20px calc(40px + env(safe-area-inset-bottom))}
  .loginGlitchCard{margin:auto 0}
  .loginCardCorner{display:none}
  .loginMobileBrand{display:flex;justify-content:center;margin-bottom:10px}
  .loginMobileIcon{width:132px;height:132px;object-fit:contain;filter:drop-shadow(0 20px 45px rgba(80,171,241,.24))}
  .loginFullLogo{width:min(270px,86%);justify-self:start}
  .loginGlitchCard h1{font-size:30px}
  .loginInput input{font-size:16px}
}
@media (max-width:400px){
  .loginGlitchCard h1{font-size:26px}
  .loginFullLogo{width:min(245px,88%)}
}
@media (prefers-reduced-motion:reduce){
  .loginMorph,.loginMorphIcon,.loginStageCopy strong:before,.loginStageCopy strong:after,.loginGlitchCard,.loginSubmit i{animation-duration:.001s!important;animation-iteration-count:1!important}
  .loginMorphIcon.cyan,.loginMorphIcon.magenta{display:none}
}