/* Login + first-time setup screens */
:root{--bg:#01060c;--cy:#2ee6ff;--cy2:#8af5ff;--cy-d:rgba(46,230,255,.18);--cy-m:rgba(46,230,255,.45);--amber:#ffb547;--red:#ff4d5e;--green:#3dffa8;--text:#cfefff;--mute:#5f8ea3}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{padding-top:env(safe-area-inset-top)!important;background:radial-gradient(ellipse at 50% 45%,#05263d 0%,#021320 40%,var(--bg) 78%);color:var(--text);font-family:'Rajdhani',system-ui,sans-serif;display:grid;place-items:center;overflow:hidden;padding:16px}
.grid{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(46,230,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(46,230,255,.05) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at center,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse at center,#000 25%,transparent 75%);animation:grid 30s linear infinite}
@keyframes grid{to{background-position:44px 44px}}
.scan{position:fixed;left:0;right:0;top:-160px;height:160px;pointer-events:none;background:linear-gradient(transparent,rgba(46,230,255,.06),transparent);animation:scan 6s linear infinite}
@keyframes scan{to{transform:translateY(calc(100vh + 160px))}}
.gate{position:relative;width:min(400px,100%);text-align:center;animation:in .9s ease both}
@keyframes in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.rings{position:relative;width:170px;height:170px;margin:0 auto 26px}
.rings i{position:absolute;border-radius:50%;border:2px solid transparent}
.rings i:nth-child(1){inset:0;border-color:var(--cy-m) transparent var(--cy-m) transparent;animation:spin 6s linear infinite}
.rings i:nth-child(2){inset:14px;border:1px dashed var(--cy-m);animation:spin 14s linear infinite reverse}
.rings i:nth-child(3){inset:30px;border-color:var(--cy) transparent transparent var(--cy);border-width:3px;animation:spin 3s linear infinite}
.rings i:nth-child(4){inset:52px;background:radial-gradient(circle,rgba(255,255,255,.9) 0,var(--cy) 30%,rgba(46,230,255,.15) 65%,transparent 72%);box-shadow:0 0 40px var(--cy-m);animation:pulse 2.4s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{transform:scale(.88);opacity:.75}}
h1{font-family:'Orbitron',sans-serif;font-weight:800;letter-spacing:.42em;color:var(--cy);font-size:28px;text-shadow:0 0 20px var(--cy-m);margin-right:-.42em}
.sub{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:.32em;color:var(--mute);margin:10px 0 26px}
.card{position:relative;background:rgba(4,22,34,.6);border:1px solid var(--cy-d);padding:22px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));backdrop-filter:blur(6px)}
label{display:block;text-align:left;font-family:'Orbitron',sans-serif;font-size:9.5px;letter-spacing:.25em;color:var(--mute);margin:0 0 6px}
input{width:100%;background:rgba(1,10,18,.8);border:1px solid var(--cy-d);color:#eafcff;font:inherit;font-size:17px;padding:12px;outline:none;margin-bottom:14px;letter-spacing:.06em;transition:.2s}
input:focus{border-color:var(--cy);box-shadow:0 0 14px rgba(46,230,255,.25)}
button{width:100%;font-family:'Orbitron',sans-serif;font-size:12px;letter-spacing:.3em;padding:14px;color:var(--cy2);background:rgba(46,230,255,.1);border:1px solid var(--cy-m);cursor:pointer;transition:.2s}
button:hover{background:rgba(46,230,255,.2);box-shadow:0 0 18px rgba(46,230,255,.25)}
button:disabled{opacity:.5;cursor:wait}
.msg{min-height:22px;margin-top:14px;font-family:'Orbitron',sans-serif;font-size:10.5px;letter-spacing:.2em;color:var(--mute)}
.msg.err{color:var(--red)}.msg.ok{color:var(--green)}
.code{font-family:'Orbitron',sans-serif;font-size:40px;font-weight:600;letter-spacing:.3em;color:#eafcff;text-shadow:0 0 18px var(--cy-m);margin:6px 0 10px 0.3em}
.hint{font-size:15px;line-height:1.45;color:var(--text);margin-bottom:6px}
.small{font-size:13px;color:var(--mute);margin-top:-6px;margin-bottom:14px;text-align:left;line-height:1.4}
.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.granted .rings i:nth-child(4){background:radial-gradient(circle,#fff 0,var(--green) 30%,rgba(61,255,168,.15) 65%,transparent 72%);box-shadow:0 0 50px rgba(61,255,168,.6)}
.hidden{display:none}