:root{color-scheme:dark;font-family:Inter,"Segoe UI",Arial,sans-serif;color:#bfdfdf;background:#07151b;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
[hidden]{display:none!important}
.login-page{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:32px 0;position:relative;isolation:isolate}
.login-backdrop{position:fixed;inset:0;z-index:-1;background:#07151b url('/login-background.webp') center/cover no-repeat}
.login-backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,18,24,.97) 0%,rgba(5,18,24,.92) 29%,rgba(5,18,24,.55) 48%,rgba(5,18,24,.03) 78%),linear-gradient(0deg,rgba(5,18,24,.45),transparent 40%),radial-gradient(ellipse at 74% 37%,rgba(18,101,99,.16),transparent 65%)}
.login-content{flex:none;width:min(350px,calc(100% - 48px));margin:0 0 0 clamp(32px,16.15vw,360px)}
.wordmark{display:flex;align-items:center;justify-content:center;gap:13px;margin:0 0 36px;font-size:40px;line-height:1;font-weight:650;letter-spacing:-1.5px;color:#bfdfdf}
.brand-shield{flex:none;width:80px;height:74px;filter:drop-shadow(0 9px 14px rgba(0,0,0,.24))}
.telegram-button{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;min-height:54px;padding:12px 20px;border:1px solid rgba(177,255,235,.35);border-radius:13px;background:#7de2ca;color:#092d30;font:400 20px/1.35 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:-.35px;text-decoration:none;box-shadow:0 0 30px rgba(72,229,199,.26),0 0 65px rgba(54,194,172,.12);cursor:pointer;transition:background .18s ease,box-shadow .18s ease,transform .18s ease}
.telegram-button svg{width:27px;height:27px;flex:none}
.telegram-button:hover{background:#95eed7;box-shadow:0 0 35px rgba(72,229,199,.4),0 0 75px rgba(54,194,172,.16);transform:translateY(-1px)}
.telegram-button:active{transform:translateY(0)}
.telegram-button:focus-visible,input:focus-visible{outline:2px solid #b3ffeb;outline-offset:6px}
.telegram-button:disabled{cursor:wait;opacity:.65}
.login-status,.login-note{font-size:14px;line-height:1.6;color:#9bb8bd;text-align:center}
.login-status{margin:0;padding:16px 0}
.login-note{margin:20px 0 0}
.login-error{color:#ffb5b5;font-size:14px;line-height:1.6;text-align:center;margin:18px 0 0}
.login-error:empty{display:none}
#local-login{display:grid;gap:12px;padding:20px;border:1px solid #294449;border-radius:14px;background:rgba(8,24,31,.86);backdrop-filter:blur(12px)}
#local-login label{font-size:14px;color:#c8e4e3}
#local-code{width:100%;padding:12px 14px;border:1px solid #35555b;border-radius:8px;background:#0a1d24;color:#e0f4ef;font:inherit}
#local-login .login-note{margin:0;text-align:left;font-size:12px}
.local-button{font-size:16px;min-height:46px;margin-top:6px}
@media(min-width:1800px){.login-content{margin-left:calc(50vw - 466px)}}
@media(max-width:700px){
  .login-backdrop{background-position:76% center}
  .login-backdrop::after{background:linear-gradient(90deg,rgba(6,21,27,.6),rgba(6,21,27,.2)),linear-gradient(0deg,rgba(6,21,27,.94),rgba(6,21,27,.18) 80%),radial-gradient(ellipse at 50% 50%,rgba(6,21,27,.65),transparent 72%)}
  .login-content{margin:0 auto}
  .wordmark{font-size:36px;gap:10px;margin-bottom:30px}
  .brand-shield{width:70px;height:65px}
  .telegram-button{font-size:18px;min-height:54px}
}
@media(max-height:520px){.wordmark{margin-bottom:24px;font-size:34px}.brand-shield{width:65px;height:60px}}
@media(prefers-reduced-motion:reduce){.telegram-button{transition:none}}