.auth-shell[hidden] { display: none; }
.auth-shell { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; padding: 20px; font-family: "Noto Sans SC", system-ui, sans-serif; }
.auth-backdrop { position: absolute; inset: 0; border: 0; background: rgba(3,7,10,.84); backdrop-filter: blur(10px); cursor: default; }
.auth-panel { position: relative; width: min(520px, 100%); padding: clamp(28px, 5vw, 48px); color: #cfe8ff; background: linear-gradient(145deg, #141d28, #0b1118 72%); border: 1px solid #2a3d4a; box-shadow: 0 24px 100px rgba(0,0,0,.7), inset 0 1px rgba(207,232,255,.1); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
.auth-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(89,216,255,.025) 0 1px, transparent 1px 42px); }
.auth-close { position: absolute; top: 14px; right: 18px; border: 0; background: none; color: #6f8aa5; font-size: 28px; cursor: pointer; }
.auth-eyebrow { display: flex; align-items: center; gap: 10px; color: #7dffb0; font: 700 11px/1 "JetBrains Mono", monospace; letter-spacing: .22em; }
.auth-eyebrow span { width: 7px; height: 7px; background: #7dffb0; box-shadow: 0 0 12px #7dffb0; }
.auth-panel h2 { margin: 18px 0 10px; color: #eaf5ff; font-size: clamp(26px, 5vw, 38px); letter-spacing: .06em; }
.auth-copy { margin: 0 0 28px; color: #7d94aa; font-size: 14px; line-height: 1.8; }
#auth-form { position: relative; display: grid; gap: 10px; }
#auth-form label { margin-top: 8px; color: #8298ab; font: 600 11px/1 "JetBrains Mono", monospace; letter-spacing: .16em; }
.auth-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
#auth-form input { min-width: 0; height: 50px; padding: 0 15px; color: #eaf5ff; background: #080d12; border: 1px solid #263846; border-radius: 0; font: 500 15px/1 "JetBrains Mono", monospace; outline: none; }
#auth-form input:focus { border-color: #59d8ff; box-shadow: 0 0 0 2px rgba(89,216,255,.12); }
#send-code { padding: 0 16px; border: 1px solid #355061; color: #8de8ff; background: #121c25; font-weight: 700; cursor: pointer; }
#send-code:disabled, .auth-submit:disabled { opacity: .55; cursor: wait; }
.auth-status { min-height: 22px; margin: 4px 0 0; color: #7dffb0; font-size: 13px; }
.auth-status.error { color: #ff6d76; }
.auth-submit { height: 56px; border: 0; color: #06120c; background: #7dffb0; font-size: 16px; font-weight: 900; letter-spacing: .08em; cursor: pointer; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.auth-submit span { margin-left: 10px; font: 600 11px/1 "JetBrains Mono", monospace; }
.auth-legal { position: relative; margin: 20px 0 0; color: #506677; font-size: 11px; line-height: 1.6; }
body.auth-open { overflow: hidden; }
@media (max-width: 560px) { .auth-row { grid-template-columns: 1fr; } #send-code { height: 44px; } .auth-panel { padding: 34px 22px 26px; } }