.login-shell{display:grid;place-items:center;min-height:calc(100vh - 76px);padding:40px 18px}
.login-card{position:relative;overflow:hidden}
.login-mark{display:flex;align-items:center;gap:12px;margin-bottom:24px;color:var(--gold2);font-size:11px;font-weight:800;letter-spacing:2px}
.login-mark img{width:48px;height:48px;border-radius:14px;box-shadow:0 8px 28px #0008;animation:logoHover 3.8s ease-in-out infinite}
.login-password{margin-top:15px}
.login-security{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;text-align:center}
.login-security span{color:var(--gold);font-size:10px;margin-right:5px}
#login-particles{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:1}
.login-page .topbar,.login-page .login-shell,.login-page footer{position:relative;z-index:1}

/* Force the login screen to use the mobile presentation at every viewport. */
.login-page{background-color:#080808;background-image:radial-gradient(circle at 15% 20%,#8a611f38 0,transparent 25%),radial-gradient(circle at 88% 76%,#d4a3382b 0,transparent 24%),linear-gradient(145deg,#080808,#0d0b07 55%,#080808);background-size:140% 140%,150% 150%,100% 100%;animation:loginBackgroundShift 14s ease-in-out infinite alternate}
.login-page::before{width:410px;height:410px;min-width:0;min-height:0;top:-180px;right:-190px;opacity:.34;background:radial-gradient(circle,#e4b23e48 0,#8c641516 42%,transparent 70%);animation:loginGlow 9s ease-in-out infinite alternate}
.login-page::after{width:330px;height:330px;min-width:0;min-height:0;left:-190px;bottom:-115px;opacity:.26;background:radial-gradient(circle,#c7922740 0,#76531512 45%,transparent 72%);animation:loginGlowTwo 12s ease-in-out infinite alternate}
.login-page .topbar{position:relative;height:66px;max-width:466px;margin:0 auto;background:transparent;border-bottom:0;padding:0 18px;padding-top:env(safe-area-inset-top)}
.login-page .topbar nav>a:not(.btn){display:none}
.login-page .topbar .btn{background:#201c13;color:var(--gold2)!important;border:1px solid #5d4922}
.login-shell{display:flex;align-items:center;width:100%;max-width:466px;min-height:calc(100svh - 66px);margin:0 auto;padding:22px 18px calc(28px + env(safe-area-inset-bottom))}
.login-card.form-card{width:100%;max-width:430px;margin:auto;padding:28px 22px;border:1px solid #4a3b21;border-radius:24px;background:linear-gradient(155deg,#1b1812ef,#0e0e0ef7 55%);box-shadow:0 30px 80px #000b,0 0 0 1px #e6b84c0a inset;backdrop-filter:blur(16px);animation:cardArrival .7s cubic-bezier(.2,.8,.2,1) both}
.login-card::before{content:"";position:absolute;width:120px;height:2px;top:0;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--gold2),transparent);box-shadow:0 0 20px var(--gold);animation:goldPulse 2.8s ease-in-out infinite}
.login-card h1{font-size:30px;line-height:1.1;margin-bottom:9px}
.login-card .muted{margin:0 0 24px}
.login-card input{min-height:52px;border-radius:12px;background:#090909cc;font-size:16px;padding:14px}
.login-actions{display:grid;grid-template-columns:1fr;margin-top:24px;text-align:center}
.login-actions .btn{position:relative;overflow:hidden;width:100%;min-height:52px;border-radius:12px;font-size:16px;box-shadow:0 10px 30px #c68f2538;transition:transform .2s ease,box-shadow .2s ease}
.login-actions .btn::after{content:"";position:absolute;top:-50%;left:-35%;width:24%;height:200%;background:linear-gradient(90deg,transparent,#fff8,transparent);transform:rotate(22deg);animation:buttonShine 4.2s ease-in-out infinite}
.login-actions .btn:active{transform:scale(.98);box-shadow:0 5px 16px #c68f252c}
.login-card input{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.login-card input:focus{transform:translateY(-1px);box-shadow:0 8px 24px #0007,0 0 0 3px #d9a62e24}
.login-actions a{padding:10px;min-height:44px}
.login-actions a[href="register.asp"]{display:none}
.login-page footer{max-width:466px;margin:0 auto;padding:18px 20px calc(18px + env(safe-area-inset-bottom));font-size:12px}

@media(max-width:700px){
  .login-page{background-color:#080808;background-image:radial-gradient(circle at 15% 20%,#8a611f38 0,transparent 25%),radial-gradient(circle at 88% 76%,#d4a3382b 0,transparent 24%),linear-gradient(145deg,#080808,#0d0b07 55%,#080808);background-size:140% 140%,150% 150%,100% 100%;animation:loginBackgroundShift 14s ease-in-out infinite alternate}
  .login-page::before{width:410px;height:410px;min-width:0;min-height:0;top:-180px;right:-190px;opacity:.34;background:radial-gradient(circle,#e4b23e48 0,#8c641516 42%,transparent 70%);animation:loginGlow 9s ease-in-out infinite alternate}
  .login-page::after{width:330px;height:330px;min-width:0;min-height:0;left:-190px;bottom:-115px;opacity:.26;background:radial-gradient(circle,#c7922740 0,#76531512 45%,transparent 72%);animation:loginGlowTwo 12s ease-in-out infinite alternate}
  .login-page .topbar{position:relative;height:66px;background:transparent;border-bottom:0;padding-top:env(safe-area-inset-top)}
  .login-page .topbar nav>a:not(.btn){display:none}
  .login-page .topbar .btn{background:#201c13;color:var(--gold2)!important;border:1px solid #5d4922}
  .login-shell{display:flex;align-items:center;min-height:calc(100svh - 66px);padding:22px 18px calc(28px + env(safe-area-inset-bottom))}
  .login-card.form-card{width:100%;max-width:430px;margin:auto;padding:28px 22px;border:1px solid #4a3b21;border-radius:24px;background:linear-gradient(155deg,#1b1812eF,#0e0e0ef7 55%);box-shadow:0 30px 80px #000b,0 0 0 1px #e6b84c0a inset;backdrop-filter:blur(16px)}
  .login-card::before{content:"";position:absolute;width:120px;height:2px;top:0;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--gold2),transparent);box-shadow:0 0 20px var(--gold)}
  .login-card h1{font-size:30px;line-height:1.1;margin-bottom:9px}
  .login-card .muted{margin:0 0 24px}
  .login-card input{min-height:52px;border-radius:12px;background:#090909cc;font-size:16px;padding:14px}
  .login-actions{display:grid;grid-template-columns:1fr;margin-top:24px;text-align:center}
  .login-actions .btn{width:100%;min-height:52px;border-radius:12px;font-size:16px;box-shadow:0 10px 30px #c68f2538}
  .login-actions a{padding:10px;min-height:44px}
  .login-page footer{padding:18px 20px calc(18px + env(safe-area-inset-bottom));font-size:12px}
}

@keyframes loginGlow{from{transform:translate3d(0,0,0) scale(.9)}to{transform:translate3d(-38px,70px,0) scale(1.12)}}
@keyframes loginGlowTwo{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(55px,-55px,0) scale(.86)}}
@keyframes loginBackgroundShift{0%{background-position:0% 0%,100% 100%,0 0}50%{background-position:42% 28%,60% 35%,0 0}100%{background-position:75% 62%,18% 12%,0 0}}
@keyframes cardArrival{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes logoHover{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes goldPulse{0%,100%{opacity:.45;width:80px}50%{opacity:1;width:150px}}
@keyframes buttonShine{0%,68%{left:-35%}88%,100%{left:120%}}
@media(prefers-reduced-motion:reduce){.login-page,.login-page::before,.login-page::after,.login-card,.login-card::before,.login-mark img,.login-actions .btn::after{animation:none}.login-card input,.login-actions .btn{transition:none}}