:root { color-scheme:dark; --cyan:#00f3ff; --blue:#0055ff; --ink:#dffcff; --muted:#5b7d88; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; }
body { overflow:hidden; background:#01060d; color:var(--ink); font-family:"Share Tech Mono",monospace; }
body::before { content:""; position:fixed; inset:0; background:radial-gradient(circle at 50% 44%,rgba(0,85,255,.13),transparent 34%),radial-gradient(circle at 50% 48%,rgba(0,243,255,.045),transparent 58%); pointer-events:none; }
body::after { content:""; position:fixed; inset:0; background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px); pointer-events:none; }
#auth-field,.auth-grid { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; }
.auth-grid { opacity:.16; background-image:linear-gradient(rgba(0,243,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(0,243,255,.09) 1px,transparent 1px); background-size:54px 54px; mask-image:radial-gradient(circle at center,#000,transparent 75%); transform:perspective(700px) rotateX(58deg) scale(1.5) translateY(23%); transform-origin:center bottom; }
.auth-shell { min-height:100svh; display:grid; place-items:center; padding:24px; position:relative; z-index:1; }
.auth-card { width:min(440px,100%); padding:42px 42px 24px; position:relative; border:1px solid rgba(0,243,255,.2); background:linear-gradient(145deg,rgba(6,21,34,.82),rgba(2,9,18,.72)); box-shadow:0 0 0 1px rgba(0,85,255,.06),0 30px 90px rgba(0,0,0,.65),inset 0 0 70px rgba(0,85,255,.035); backdrop-filter:blur(18px); text-align:center; clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); }
.auth-card::before,.auth-card::after { content:""; position:absolute; width:70px; height:1px; top:-1px; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }.auth-card::before { left:18px; }.auth-card::after { right:0; top:auto; bottom:0; }
.auth-orb { width:92px; aspect-ratio:1; margin:0 auto 22px; position:relative; display:grid; place-items:center; border:1px solid rgba(0,243,255,.28); border-radius:50%; box-shadow:0 0 30px rgba(0,243,255,.14),inset 0 0 25px rgba(0,85,255,.16); }
.auth-orb::before,.auth-orb::after,.auth-orb i { content:""; position:absolute; inset:10px; border:1px dashed rgba(0,243,255,.3); border-radius:50%; animation:spin 13s linear infinite; }.auth-orb::after { inset:20px; border-style:solid; animation-direction:reverse; animation-duration:8s; }.auth-orb i:first-child { inset:-8px; opacity:.25; animation-duration:20s; }.auth-orb i:nth-child(2) { inset:29px; border-style:solid; background:radial-gradient(circle,#eaffff 0 5%,var(--cyan) 12%,var(--blue) 38%,#020914 72%); box-shadow:0 0 22px var(--cyan); animation:none; }
.auth-orb span { z-index:1; font:600 1rem Orbitron,sans-serif; text-shadow:0 0 10px #fff; }
.eyebrow,.subtitle { margin:0; color:var(--muted); font-size:.58rem; letter-spacing:.28em; }.auth-card h1 { margin:8px 0; font:600 1.55rem Orbitron,sans-serif; letter-spacing:.35em; padding-left:.35em; text-shadow:0 0 10px rgba(0,243,255,.75),0 0 35px rgba(0,85,255,.35); }.subtitle { color:var(--cyan); }
.security-line { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:11px; margin:28px 0 24px; color:#537781; font-size:.5rem; letter-spacing:.13em; }.security-line span { height:1px; background:linear-gradient(90deg,transparent,rgba(0,243,255,.25)); }.security-line span:last-child { transform:rotate(180deg); }
form { display:grid; gap:17px; text-align:left; }label span { display:block; margin-bottom:7px; color:#71929c; font-size:.55rem; letter-spacing:.18em; }input { width:100%; height:48px; padding:0 14px; border:1px solid rgba(0,243,255,.18); outline:0; background:rgba(0,8,16,.7); color:var(--ink); font:1rem "Share Tech Mono",monospace; letter-spacing:.08em; transition:.25s; }input::placeholder { color:#29434c; font-size:.7rem; }input:focus { border-color:rgba(0,243,255,.65); box-shadow:0 0 0 2px rgba(0,243,255,.04),inset 0 0 18px rgba(0,85,255,.07),0 0 18px rgba(0,243,255,.08); }
form button { height:50px; margin-top:4px; display:flex; align-items:center; justify-content:center; gap:14px; border:1px solid rgba(0,243,255,.52); background:linear-gradient(90deg,rgba(0,85,255,.15),rgba(0,243,255,.12),rgba(0,85,255,.15)); color:var(--cyan); font:600 .62rem Orbitron,sans-serif; letter-spacing:.2em; cursor:pointer; transition:.25s; }form button:hover,form button:focus-visible { background:rgba(0,243,255,.2); box-shadow:0 0 24px rgba(0,243,255,.16),inset 0 0 20px rgba(0,243,255,.08); outline:0; }form button i { font:normal 1rem sans-serif; }
.auth-error { padding:10px 12px; border-left:2px solid #ff5277; background:rgba(255,49,94,.08); color:#ff91a8; font-size:.68rem; line-height:1.4; }
.auth-card footer { display:flex; justify-content:space-between; margin-top:27px; padding-top:15px; border-top:1px solid rgba(0,243,255,.1); color:#385761; font-size:.48rem; letter-spacing:.12em; }.auth-card footer span:first-child { color:#557a83; }.auth-card footer i { display:inline-block; width:5px; height:5px; margin-right:5px; border-radius:50%; background:#4fffc1; box-shadow:0 0 7px #4fffc1; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:520px) { .auth-card { padding:34px 24px 22px; }.auth-card h1 { font-size:1.25rem; }.auth-orb { width:80px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; scroll-behavior:auto!important; } }