.login{padding-top:var(--space-20);padding-bottom:var(--space-24);min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.login-grid{display:grid;gap:var(--space-8)}
.login-copy h1{margin-bottom:var(--space-4)}
.login-copy h1 .hl{color:var(--accent)}
.login-copy p{color:var(--muted)}
.provider-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.provider-btn{display:flex;align-items:center;gap:var(--space-4);width:100%;min-height:56px;padding:var(--space-3) var(--space-5);background:var(--surface);border:var(--line-w) solid var(--line);border-radius:var(--radius-control);color:var(--text);text-decoration:none;font-weight:600;font-size:var(--text-sm)}
.provider-btn:hover{border-color:var(--accent);color:var(--text)}
.provider-btn[aria-disabled="true"]{opacity:0.55}
.provider-btn[data-provider="twitch"] .provider-mark{color:var(--brand-twitch)}
.provider-btn[data-provider="discord"] .provider-mark{color:var(--brand-discord)}
.provider-btn[data-provider="kick"] .provider-mark{color:var(--brand-kick)}
.provider-btn[data-provider="twitch"]:hover{border-color:var(--brand-twitch);box-shadow:0 0 16px var(--brand-twitch)}
.provider-btn[data-provider="discord"]:hover{border-color:var(--brand-discord);box-shadow:0 0 16px var(--brand-discord)}
.provider-btn[data-provider="kick"]:hover{border-color:var(--brand-kick);box-shadow:0 0 16px var(--brand-kick)}
.provider-btn[data-provider="youtube"]:hover{border-color:var(--brand-youtube);box-shadow:0 0 16px var(--brand-youtube)}
.provider-mark{width:20px;height:20px;flex:none}
.provider-hint{font-size:var(--text-sm);color:var(--muted);margin:var(--space-2) 0 0 0}
.login-status{border:var(--line-w) solid var(--line);border-radius:var(--radius-control);background:var(--surface);padding:var(--space-4);font-size:var(--text-sm);margin-top:var(--space-6)}
.login-terms{font-size:var(--text-sm);color:var(--muted);margin-top:var(--space-6);margin-bottom:var(--space-2);max-width:65ch}
@media(min-width:720px){
.login-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-4)}
.login-copy{grid-column:1 / span 5}
.login-panel{grid-column:7 / span 6}
}
@media(min-width:1024px){
.login-copy{grid-column:1 / span 4}
.login-panel{grid-column:6 / span 6}
}
.login-wait{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.login-wait[hidden]{display:none}
.login-wait-box{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center;padding:var(--space-6)}
.login-wait-box svg{width:56px;height:56px;overflow:visible}
.login-wait .logo-badge{animation:logo-pop .4s cubic-bezier(.2,.8,.2,1) both}
.login-wait .logo-a2{animation:logo-orbit-wait 2s cubic-bezier(.65,0,.35,1) .2s infinite}
.login-wait .logo-a1{animation:logo-orbit-wait 2s cubic-bezier(.65,0,.35,1) .5s infinite}
@keyframes logo-orbit-wait{0%{transform:rotate(0);opacity:0}8%{opacity:1}35%{transform:rotate(360deg);opacity:1}100%{transform:rotate(360deg);opacity:1}}
.login-wait-text{color:var(--muted);font-size:var(--text-sm);max-width:40ch;margin:0}
@media (prefers-reduced-motion:reduce){.login-wait .logo-badge,.login-wait .logo-a1,.login-wait .logo-a2{animation:none}}