/* =========================================================
   Flight Ops — LOGIN THEME (polished)
   Works with your current index.php markup.
   ========================================================= */

/* ---------- Theme vars ---------- */
:root{
  --bg-top:#0b1a2e; --bg-mid:#061220; --bg-bot:#040b14;
  --text:#d8f2ff; --muted:#bfefff;
  --panel1:rgba(9,21,40,.66); --panel2:rgba(9,21,40,.46);
  --border:rgba(94,232,255,.28);
  --neon:#5ee8ff; --accent1:#00d2ff; --accent2:#3a7bd5;
  --danger:#ff9fa3;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body.login-body{
  font-family:'Rajdhani',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 600px at 50% -10%,var(--bg-top) 0%,var(--bg-mid) 45%,var(--bg-bot) 100%);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* Optional starfield canvas + scanlines you already use */
#stars{position:fixed;inset:0;z-index:-2}
.scanlines{
  pointer-events:none;position:fixed;inset:0;z-index:-1;opacity:.25;
  background:linear-gradient(rgba(255,255,255,.03) 50%, rgba(0,0,0,.05) 50%);
  background-size:100% 2px;mix-blend-mode:overlay;
}

/* ---------- Wrapper panel ---------- */
.login-wrap{
  position:relative; width:min(1200px,94vw); margin:54px auto 48px;
  padding:26px 26px 22px; border-radius:20px;
  background:linear-gradient(180deg,var(--panel1),var(--panel2));
  border:1px solid var(--border);
  box-shadow:
    0 30px 110px rgba(0,0,0,.5),
    inset 0 0 140px rgba(71,184,255,.12);
  backdrop-filter:saturate(120%) blur(3px);
}
.login-wrap::after{
  content:""; position:absolute; inset:-1px; border-radius:22px; pointer-events:none;
  border:1px dashed rgba(94,232,255,.16);
}

/* HUD decorative corners (you already output 4 divs) */
.hud-corner{position:absolute;width:36px;height:36px;pointer-events:none;opacity:.7}
.hud-corner::before,.hud-corner::after{
  content:""; position:absolute; background:linear-gradient(90deg,var(--neon),transparent 70%);
  filter:drop-shadow(0 0 10px rgba(94,232,255,.45));
}
.hud-corner::after{background:linear-gradient(180deg,var(--neon),transparent 70%)}
.hud-corner-tl{top:10px;left:10px}
.hud-corner-tl::before{left:0;top:0;width:24px;height:2px}
.hud-corner-tl::after{left:0;top:0;width:2px;height:24px}
.hud-corner-tr{top:10px;right:10px;transform:scaleX(-1)}
.hud-corner-tr::before{left:0;top:0;width:24px;height:2px}
.hud-corner-tr::after{left:0;top:0;width:2px;height:24px}
.hud-corner-bl{bottom:10px;left:10px;transform:scaleY(-1)}
.hud-corner-bl::before{left:0;top:0;width:24px;height:2px}
.hud-corner-bl::after{left:0;top:0;width:2px;height:24px}
.hud-corner-br{bottom:10px;right:10px;transform:scale(-1)}
.hud-corner-br::before{left:0;top:0;width:24px;height:2px}
.hud-corner-br::after{left:0;top:0;width:2px;height:24px}

/* ---------- Title + subtitle ---------- */
h1.glitch{
  margin:0 0 6px; font-family:'Orbitron',monospace; letter-spacing:.8px;
  font-size:clamp(36px,6.2vw,72px); text-transform:uppercase;
  position:relative; text-shadow:0 0 22px rgba(94,232,255,.55);
}
h1.glitch::before, h1.glitch::after{
  content:attr(data-text); position:absolute; left:0; top:0; width:100%; overflow:hidden;
  clip-path:inset(0 0 0 0); pointer-events:none; opacity:.85;
}
h1.glitch::before{color:#ff4d6d; transform:translate(1px,0); mix-blend-mode:screen; animation:glh 3s infinite linear}
h1.glitch::after{color:#00e8ff; transform:translate(-1px,0); mix-blend-mode:screen; animation:glv 2.8s infinite linear}
@keyframes glh { 0%{clip-path:inset(0 0 75% 0)} 10%{clip-path:inset(0 0 5% 0)}
  20%{clip-path:inset(60% 0 0 0)} 30%{clip-path:inset(10% 0 50% 0)}
  40%{clip-path:inset(85% 0 0 0)} 50%{clip-path:inset(0 0 90% 0)}
  60%{clip-path:inset(0 0 20% 0)} 70%{clip-path:inset(70% 0 0 0)}
  80%{clip-path:inset(40% 0 0 0)} 90%{clip-path:inset(0 0 60% 0)} 100%{clip-path:inset(0 0 0 0)} }
@keyframes glv { 0%{clip-path:inset(80% 0 0 0)} 10%{clip-path:inset(0 0 40% 0)}
  20%{clip-path:inset(10% 0 0 0)} 30%{clip-path:inset(0 0 90% 0)}
  40%{clip-path:inset(50% 0 0 0)} 60%{clip-path:inset(20% 0 0 0)}
  80%{clip-path:inset(0 0 30% 0)} 100%{clip-path:inset(0 0 0 0)} }

.sub{
  margin:0 0 18px; color:var(--muted); opacity:.92;
  font-size:clamp(16px,2.6vw,22px);
}

/* ---------- Alerts ---------- */
.alert-error{
  display:inline-block; margin:6px 0 12px; padding:10px 12px; border-radius:12px;
  color:#fff; background:linear-gradient(180deg,rgba(255,93,110,.22),rgba(255,93,110,.12));
  border:1px solid rgba(255,93,110,.35);
  box-shadow:0 8px 24px rgba(255,93,110,.25);
  animation:shake .24s ease;
}
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(4px)} 75%{transform:translateX(-4px)} }

/* ---------- Form layout (precise areas, fixes misalignment) ---------- */
.login-form{
  display:grid; align-items:center;
  grid-template-columns:
    max-content minmax(280px,520px)
    28px
    max-content minmax(280px,520px)
    1fr
    max-content;
  grid-template-areas: "el ei . pl pi . sb";
  column-gap:16px; row-gap:14px;
}
.login-form label{
  color:var(--muted); font-weight:700; letter-spacing:.6px; padding:6px 0;
  white-space:nowrap;
}
.login-form label:nth-of-type(1){ grid-area: el; }
.login-form label:nth-of-type(2){ grid-area: pl; }
.login-form input[type="email"]{ grid-area: ei; }
.login-form input[type="password"]{ grid-area: pi; }

/* Inputs */
.login-form input[type="email"],
.login-form input[type="password"]{
  width:100%; font:inherit; font-weight:700; letter-spacing:.5px; color:#eaf9ff;
  padding:16px 18px; border-radius:16px; outline:none;
  border:1px solid rgba(94,232,255,.35);
  background:linear-gradient(180deg,rgba(11,25,44,.88),rgba(8,21,38,.76));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.38);
  transition: box-shadow .2s ease, border-color .2s ease, transform .12s ease, filter .2s ease;
  backdrop-filter: blur(2px);
}
.login-form input::placeholder{color:rgba(191,239,255,.55)}
.login-form input:hover{transform:translateY(-1px)}
.login-form input:focus{
  border-color:rgba(94,232,255,.88);
  box-shadow:
    0 0 0 3px rgba(94,232,255,.2),
    0 16px 40px rgba(0,210,255,.18),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Chrome/Edge autofill */
input:-webkit-autofill{
  -webkit-text-fill-color:#eaf9ff;
  -webkit-box-shadow:0 0 0 30px rgba(11,25,44,.96) inset !important;
  box-shadow:0 0 0 30px rgba(11,25,44,.96) inset !important;
  caret-color:#eaf9ff;
}

/* Submit button */
.btn-primary{
  grid-area: sb;
  cursor:pointer; font-weight:700; letter-spacing:1px; white-space:nowrap;
  border:none; color:#07121f; font-size:clamp(16px,2.2vw,20px);
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  padding:16px 26px; border-radius:18px;
  box-shadow:
    0 18px 42px rgba(0,210,255,.34),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 80px rgba(0,210,255,.18);
  transition:transform .15s ease, filter .2s ease, box-shadow .25s ease;
  position:relative; isolation:isolate;
}
.btn-primary::before{
  content:""; position:absolute; inset:-12px; z-index:-1; border-radius:28px;
  background:radial-gradient(220px 120px at 30% 30%, rgba(0,210,255,.22), transparent 60%);
  opacity:.9; transition:opacity .2s ease;
}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn-primary:active{transform:translateY(0) scale(.99)}
.btn-primary:focus-visible{outline:2px solid var(--neon); outline-offset:3px}

/* Footer */
.foot-note{margin-top:16px; opacity:.65}

/* ---------- Responsive ---------- */
@media (max-width:1200px){
  .login-form{
    grid-template-columns:1fr;
    grid-template-areas:
      "el" "ei"
      "pl" "pi"
      "sb";
  }
  .btn-primary{justify-self:start; margin-top:6px}
}
@media (max-width:560px){
  .login-wrap{padding:18px;margin:38px auto 32px}
  h1.glitch{font-size:clamp(30px,8vw,52px)}
}

/* ---------- Launch / warp transition (CSS only; idle until triggered) ---------- */
.launch-overlay{
  position:fixed; inset:0; pointer-events:none; opacity:0; z-index:9999;
  background:
    radial-gradient(1200px 600px at 50% 70%, rgba(0,210,255,.15), transparent 65%),
    radial-gradient(1400px 700px at 50% -10%, rgba(0,210,255,.09), rgba(0,0,0,.8) 70%);
  mix-blend-mode:screen;
  transition:opacity .25s ease;
}
body.login-launching .launch-overlay{ opacity:1; animation:warp 1.2s ease forwards; }
@keyframes warp {
  0% { backdrop-filter:blur(0px) saturate(100%); transform:scale(1); }
  60%{ backdrop-filter:blur(8px) saturate(140%); transform:scale(1.03); }
  100%{ backdrop-filter:blur(12px) saturate(160%); transform:scale(1.06); opacity:0; }
}

/* ---------- Utility ---------- */
.hidden{display:none!important}