/* ============================================================
   SKEYESETUP — Login (cinematic)  ·  drop-in for app/static/login.css
   Self-contained: defines its own tokens + fonts.
   Pairs with the new app/templates/login.html + app/static/login.js
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  --bg-1:#070d16; --cyan:#22e3d4; --cyan-bright:#5af3e6; --cyan-deep:#0bb8ab;
  --blue:#3b82f6; --blue-deep:#1d5fd6; --ok:#34d399; --danger:#fb6f7a;
  --tx:#e9f1fb; --tx-soft:#aebed4; --tx-mute:#6c809a; --tx-dim:#46586f;
  --hair:rgba(120,170,220,.10); --hair-2:rgba(120,170,220,.18); --hair-strong:rgba(140,190,240,.28);
  --glass-2:rgba(13,24,40,.72);
  --font-display:'Space Grotesk',sans-serif; --font-ui:'Manrope',sans-serif; --font-mono:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.4,.14,.18,1);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font-ui);background:var(--bg-1);color:var(--tx);overflow:hidden;-webkit-font-smoothing:antialiased;}
::selection{background:rgba(34,227,212,.28);color:#fff;}

.skeye-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(1200px 700px at 78% -8%,rgba(34,227,212,.10),transparent 60%),radial-gradient(1000px 800px at -6% 100%,rgba(59,130,246,.10),transparent 55%),linear-gradient(180deg,#060b13,#05090f 60%);}
.topline{position:fixed;top:0;left:0;right:0;height:2px;z-index:9;background:linear-gradient(90deg,transparent,var(--cyan) 50%,transparent);background-size:55% 100%;background-repeat:no-repeat;animation:topslide 6.5s linear infinite;opacity:.7;}
@keyframes topslide{0%{background-position:-55% 0;}100%{background-position:155% 0;}}

.login{position:relative;z-index:1;display:grid;grid-template-columns:1.32fr .9fr;min-height:100vh;}
@media(max-width:1080px){.login{grid-template-columns:1fr;}.login-hero{display:none;}}

/* hero */
.login-hero{position:relative;overflow:hidden;border-right:1px solid var(--hair);background:linear-gradient(140deg,#06101c 0%,#081627 55%,#05111d 100%);}
#telemetry{position:absolute;inset:0;width:100%;height:100%;}
.hero-vig{position:absolute;inset:0;background:radial-gradient(900px 600px at 70% 32%,transparent,rgba(5,9,15,.6) 82%);pointer-events:none;}
.hero-edge{position:absolute;inset:0;box-shadow:inset 0 0 130px 24px rgba(5,9,15,.62);pointer-events:none;}
.scanline{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(34,227,212,.5),transparent);filter:blur(1px);animation:scan 7s linear infinite;opacity:.5;}
@keyframes scan{0%{top:-2%;}100%{top:102%;}}
.hud-br{position:absolute;width:30px;height:30px;border:1.5px solid rgba(34,227,212,.4);z-index:3;pointer-events:none;}
.hud-br.tl{top:30px;left:30px;border-right:none;border-bottom:none;border-radius:5px 0 0 0;}
.hud-br.tr{top:30px;right:30px;border-left:none;border-bottom:none;border-radius:0 5px 0 0;}
.hud-br.bl{bottom:30px;left:30px;border-right:none;border-top:none;border-radius:0 0 0 5px;}
.hud-br.brr{bottom:30px;right:30px;border-left:none;border-top:none;border-radius:0 0 5px 0;}
.reticle{position:absolute;top:21%;right:17%;width:78px;height:78px;z-index:3;pointer-events:none;opacity:.85;}
.reticle .ring{position:absolute;inset:0;border:1px solid rgba(34,227,212,.45);border-radius:50%;animation:spin 9s linear infinite;}
.reticle .ring::before,.reticle .ring::after{content:"";position:absolute;background:rgba(34,227,212,.6);}
.reticle .ring::before{top:50%;left:-5px;right:-5px;height:1px;}
.reticle .ring::after{left:50%;top:-5px;bottom:-5px;width:1px;}
.reticle .core{position:absolute;inset:30%;border:1px solid rgba(90,243,230,.8);border-radius:50%;box-shadow:0 0 12px rgba(34,227,212,.6);animation:pulse-dot 2.2s infinite;}
.reticle .lbl{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;color:var(--cyan);white-space:nowrap;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes pulse-dot{0%{box-shadow:0 0 0 0 rgba(34,227,212,.5);}70%{box-shadow:0 0 0 9px rgba(34,227,212,0);}100%{box-shadow:0 0 0 0 rgba(34,227,212,0);}}

.hero-top{position:absolute;top:56px;left:62px;right:62px;z-index:4;display:flex;align-items:flex-start;justify-content:space-between;}
.hero-brand{display:flex;align-items:center;gap:18px;}
.hero-brand .mk{width:64px;height:64px;border-radius:17px;display:grid;place-items:center;background:radial-gradient(circle at 35% 25%,rgba(34,227,212,.3),rgba(9,18,30,.9));border:1px solid rgba(34,227,212,.42);box-shadow:0 0 40px rgba(34,227,212,.32);}
.hero-brand .mk svg{width:38px;height:38px;}
.hero-wordmark{font-family:var(--font-display);font-weight:700;font-size:31px;letter-spacing:.04em;line-height:1;}
.hero-wordmark .t{color:var(--cyan);text-shadow:0 0 24px rgba(34,227,212,.55);}
.hero-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.34em;color:var(--tx-mute);text-transform:uppercase;margin-top:9px;}
.corner-tag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;color:var(--tx-dim);text-transform:uppercase;text-align:right;line-height:1.7;}
.corner-tag .dot{color:var(--ok);} .corner-tag .coord{color:var(--tx-mute);}

.readouts{position:absolute;left:62px;bottom:64px;z-index:4;display:flex;flex-direction:column;gap:14px;width:256px;}
.ro{display:flex;align-items:center;gap:14px;padding:15px 17px;border-radius:15px;background:rgba(8,16,28,.6);border:1px solid var(--hair-2);backdrop-filter:blur(12px);box-shadow:0 18px 40px -24px rgba(0,0,0,.9);animation:rise .6s var(--ease) both;}
.ro:nth-child(2){animation-delay:.1s;}.ro:nth-child(3){animation-delay:.2s;}
.ro .ro-ic{width:39px;height:39px;border-radius:11px;display:grid;place-items:center;background:rgba(34,227,212,.1);border:1px solid rgba(34,227,212,.22);color:var(--cyan);flex:0 0 auto;}
.ro .ro-ic svg{width:19px;height:19px;}
.ro .ro-lab{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-mute);}
.ro .ro-val{font-family:var(--font-display);font-weight:600;font-size:20px;margin-top:1px;}
.ro .ro-val .on{color:var(--ok);font-size:14px;}
.bars{display:flex;align-items:flex-end;gap:2px;height:20px;margin-left:auto;}
.bars i{width:3px;background:var(--cyan);border-radius:2px;animation:eq 1.2s ease-in-out infinite;opacity:.9;box-shadow:0 0 6px rgba(34,227,212,.6);}
@keyframes eq{0%,100%{height:25%;}50%{height:100%;}}
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

.hero-headline{position:absolute;right:62px;bottom:72px;z-index:4;text-align:right;max-width:440px;}
.hero-headline .hk{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.28em;color:var(--cyan);text-transform:uppercase;margin-bottom:14px;}
.hero-headline h2{font-family:var(--font-display);font-weight:600;font-size:32px;letter-spacing:-.02em;line-height:1.1;margin:0;}
.hero-headline h2 b{color:var(--cyan);}
.hero-headline p{color:var(--tx-soft);font-size:13.5px;margin:13px 0 0;line-height:1.6;}

/* auth */
.auth-side{position:relative;display:flex;align-items:center;justify-content:center;padding:48px;background:linear-gradient(180deg,rgba(7,13,22,.35),rgba(5,9,15,.72));}
.auth-side::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(120,170,220,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,220,.045) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(560px 480px at 50% 42%,#000,transparent 82%);-webkit-mask-image:radial-gradient(560px 480px at 50% 42%,#000,transparent 82%);}
.auth-aura{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.auth-aura .ring{position:absolute;top:50%;left:50%;border:1px solid rgba(34,227,212,.07);border-radius:50%;transform:translate(-50%,-50%);}
.auth-aura .ring.r1{width:520px;height:520px;border-style:dashed;animation:spin 60s linear infinite;}
.auth-aura .ring.r2{width:760px;height:760px;animation:spin 90s linear infinite reverse;}
.auth-aura .ring.r3{width:1020px;height:1020px;border-style:dashed;opacity:.6;animation:spin 120s linear infinite;}
.auth-aura .glow{position:absolute;top:14%;left:50%;width:460px;height:300px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(34,227,212,.13),transparent 70%);}
.auth-aura .dot{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(90,243,230,.6);box-shadow:0 0 8px rgba(34,227,212,.7);animation:floaty 7s ease-in-out infinite;}
@keyframes floaty{0%,100%{transform:translateY(0);opacity:.4;}50%{transform:translateY(-16px);opacity:.9;}}

.auth-wrap{position:relative;z-index:1;width:100%;max-width:438px;animation:rise .6s var(--ease) both;}
.auth-card{position:relative;border-radius:26px;padding:38px 40px 34px;background:linear-gradient(160deg,rgba(17,30,49,.74),rgba(9,16,29,.66));border:1px solid var(--hair-2);box-shadow:0 50px 120px -45px rgba(0,0,0,.92),0 0 0 1px rgba(34,227,212,.05),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);overflow:hidden;}
.auth-card::before{content:"";position:absolute;top:0;left:28px;right:28px;height:1px;background:linear-gradient(90deg,transparent,rgba(34,227,212,.7),transparent);}
.auth-card::after{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:120px;background:radial-gradient(280px 120px at 50% -40px,rgba(34,227,212,.16),transparent 70%);pointer-events:none;}
.cbr{position:absolute;width:18px;height:18px;border:1.5px solid rgba(34,227,212,.35);z-index:2;}
.cbr.a{top:14px;left:14px;border-right:none;border-bottom:none;border-radius:6px 0 0 0;}
.cbr.b{top:14px;right:14px;border-left:none;border-bottom:none;border-radius:0 6px 0 0;}
.cbr.c{bottom:14px;left:14px;border-right:none;border-top:none;border-radius:0 0 0 6px;}
.cbr.d{bottom:14px;right:14px;border-left:none;border-top:none;border-radius:0 0 6px 0;}

.auth-status{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;position:relative;z-index:1;}
.auth-badge{display:flex;align-items:center;gap:11px;}
.auth-badge .bb{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(34,227,212,.1);border:1px solid rgba(34,227,212,.28);color:var(--cyan);box-shadow:0 0 22px -6px rgba(34,227,212,.5);}
.auth-badge .bb svg{width:21px;height:21px;}
.auth-badge .bl1{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-mute);}
.auth-badge .bl2{font-weight:700;font-size:14px;color:var(--tx);margin-top:2px;}
.auth-online{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ok);}
.auth-online .live-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:pulse-dot 2.4s infinite;}

.auth-card h1{position:relative;z-index:1;font-family:var(--font-display);font-weight:600;font-size:31px;letter-spacing:-.025em;margin:0 0 7px;}
.auth-card .sub{position:relative;z-index:1;color:var(--tx-mute);font-size:14px;margin:0 0 28px;}
.auth-card form{position:relative;z-index:1;}

.field{margin-bottom:18px;}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--tx-soft);margin-bottom:8px;}
.input-icon{position:relative;}
.input-icon .lead{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--cyan);pointer-events:none;}
.input-icon .lead svg{width:19px;height:19px;}
.input{width:100%;font-family:var(--font-ui);font-size:14.5px;color:var(--tx);background:rgba(5,10,18,.6);border:1px solid var(--hair-2);border-radius:12px;padding:13px 15px 13px 46px;transition:.2s var(--ease);}
.input::placeholder{color:var(--tx-dim);}
.input:focus{outline:none;border-color:rgba(34,227,212,.55);box-shadow:0 0 0 3px rgba(34,227,212,.14),0 0 22px -6px rgba(34,227,212,.4);background:rgba(7,14,24,.85);}
.eye{position:absolute;right:15px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--tx-mute);cursor:pointer;}
.eye svg{width:19px;height:19px;} .eye:hover{color:var(--cyan);}

.auth-row{display:flex;align-items:center;justify-content:space-between;margin:-2px 0 22px;}
.auth-row .forgot{color:var(--cyan);font-size:13px;font-weight:700;text-decoration:none;}
.auth-row .forgot:hover{text-decoration:underline;}
.check{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;font-size:13.5px;color:var(--tx-soft);}
.check .box{width:19px;height:19px;border-radius:6px;border:1.5px solid var(--hair-strong);display:grid;place-items:center;transition:.18s var(--ease);background:rgba(5,10,18,.5);}
.check input{display:none;}
.check input:checked+.box{background:linear-gradient(135deg,var(--cyan-bright),var(--cyan-deep));border-color:var(--cyan);box-shadow:0 0 12px rgba(34,227,212,.5);}
.check .box svg{width:13px;height:13px;color:#04161a;opacity:0;transition:.15s;}
.check input:checked+.box svg{opacity:1;}

.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;cursor:pointer;border:none;font-family:var(--font-ui);font-weight:700;font-size:15.5px;padding:15px 28px;border-radius:14px;color:#03161a;background:linear-gradient(135deg,var(--cyan-bright),var(--cyan-deep));box-shadow:0 8px 26px -8px rgba(34,227,212,.6),inset 0 1px 0 rgba(255,255,255,.4);transition:.22s var(--ease);position:relative;overflow:hidden;}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 34px -8px rgba(34,227,212,.75),inset 0 1px 0 rgba(255,255,255,.5);}
.btn-primary.sheen::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-22deg);animation:sheen 3.6s ease-in-out infinite;}
@keyframes sheen{0%,55%{left:-70%;}100%{left:160%;}}

.auth-foot{margin-top:24px;text-align:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--tx-dim);position:relative;z-index:1;}

.err{display:none;align-items:center;gap:10px;padding:11px 15px;border-radius:11px;margin-bottom:18px;background:rgba(251,111,122,.1);border:1px solid rgba(251,111,122,.32);color:#ffc4c9;font-size:13px;font-weight:600;}
.err.show{display:flex;animation:shake .4s;}
.err svg{width:16px;height:16px;flex:0 0 auto;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-6px);}75%{transform:translateX(6px);}}

.spinner{width:17px;height:17px;border:2px solid rgba(3,22,26,.3);border-top-color:#03161a;border-radius:50%;animation:spin .7s linear infinite;}