#auth{
  position:fixed;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:20px;
  background:radial-gradient(ellipse at 50% 40%,#0a1830 0%,#060b14 70%);
  z-index:var(--z-toast);
}
.auth-title{
  font-family:'Orbitron',sans-serif;
  font-size:38px;color:var(--accent);
  letter-spacing:6px;
  text-shadow:0 0 40px rgba(0,212,255,.5),0 0 80px rgba(0,100,200,.3);
}
.auth-sub{font:600 11px/1 var(--u-font-ui);color:var(--u-label);letter-spacing:.24em;margin-top:-12px}
.auth-box{
  background:rgba(6,14,30,.95);
  border:1px solid var(--border);
  border-radius:12px;
  padding:30px 36px;
  display:flex;flex-direction:column;gap:14px;
  width:360px;
  box-shadow:0 0 60px rgba(0,80,180,.12);
}
.fl{display:flex;flex-direction:column;gap:5px}
.fl label{font:600 11px/1 var(--u-font-ui);color:var(--u-label);letter-spacing:.13em;text-transform:uppercase}
#authMsg{font:400 12px/1.4 var(--u-font-ui);color:var(--u-mute);text-align:center;min-height:16px}

/* ── Compact login (Phase 7) ──────────────────────
   On a landscape phone the wordmark and the box together are taller than the
   screen at desktop sizes; the title gives most of it back, and the box loses
   the padding it does not need. */
@media (max-height:520px){
  #auth{gap:12px}
  .auth-title{font-size:26px;letter-spacing:.14em}
  .auth-sub{font-size:10px;margin-top:-6px}
  .auth-box{padding:16px 20px;gap:10px;width:min(360px,86vw)}
}
@media (pointer: coarse){
  /* 16px is the size below which iOS zooms the page on focus. */
  input{font-size:16px;min-height:44px}
  #btnLaunch{min-height:48px}
}