/* PRQI sign-in page. Same layout as the hazards portal's login (card, Google
   button for Ignitia staff, email + password form), in the dashboard's own
   navy palette and green accent (static/dashboard.css). */
:root{
  color-scheme:dark;
  --page:#061225; --glow:#123067;
  --surface:#0b1a33; --surface2:#0f2446;
  --ink:#e7f0ff; --muted:rgba(231,240,255,.70); --faint:rgba(231,240,255,.55);
  --ring:rgba(255,255,255,.12); --ring2:rgba(255,255,255,.18);
  --accent:#00d493; --accent-bg:#00c88c; --accent-bg-hover:#19dca2; --on-accent:#032018;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{
  background:var(--page) radial-gradient(1200px 700px at 30% -10%, var(--glow) 0%, var(--page) 55%) no-repeat;
  color:var(--ink);
  font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:14px; line-height:1.45;
  display:flex; align-items:center; justify-content:center; padding:24px 16px;
}
.wrap{width:100%; max-width:400px}
.card{background:var(--surface); border:1px solid var(--ring); border-radius:14px;
  padding:30px 28px 24px; box-shadow:0 10px 30px rgba(0,0,0,.35)}
.logo{font-weight:700; font-size:20px; letter-spacing:.2px; margin-bottom:18px}
.logo span{color:var(--accent)}
h1{font-size:17px; font-weight:650; line-height:1.3}
.sub{color:var(--muted); font-size:12.5px; margin:5px 0 20px}

/* Google sign-in (Ignitia staff): a link styled as a button. */
.gbtn{display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px;
  color:var(--ink); background:var(--surface2); border:1px solid var(--ring2); border-radius:9px;
  text-decoration:none; font-weight:600; font-size:14px; line-height:1.2; margin-bottom:14px}
.gbtn:hover{border-color:var(--accent)}
.gbtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.gbtn svg{flex:none}
.gbtn span{flex:1}
.gbtn small{font-weight:500; font-size:11px; color:var(--faint)}
.or{display:flex; align-items:center; gap:10px; margin:0 0 16px; color:var(--faint);
  font-size:10.5px; text-transform:uppercase; letter-spacing:.8px}
.or::before,.or::after{content:""; flex:1; height:1px; background:var(--ring)}

label{display:block; font-size:11.5px; color:var(--muted); text-transform:uppercase;
  letter-spacing:.6px; margin-bottom:13px}
input{display:block; width:100%; margin-top:5px; padding:10px 12px;
  font-family:inherit; font-size:15px; line-height:1.3;
  color:var(--ink); background:var(--surface2); border:1px solid var(--ring2); border-radius:9px;
  text-transform:none; letter-spacing:0}
input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,200,140,.18)}
button{width:100%; margin-top:6px; padding:11px 12px; font-family:inherit; font-weight:700;
  font-size:14px; line-height:1; color:var(--on-accent); background:var(--accent-bg);
  border:none; border-radius:9px; cursor:pointer}
button:hover:not(:disabled){background:var(--accent-bg-hover)}
button:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
button:disabled{opacity:.6; cursor:progress}
.err{background:rgba(208,59,59,.14); border:1px solid rgba(208,59,59,.5); color:#ffc2c2;
  border-radius:8px; padding:8px 11px; font-size:12.5px; margin-bottom:12px}
.foot{margin-top:18px; padding-top:14px; border-top:1px solid var(--ring);
  font-size:11.5px; color:var(--faint); line-height:1.5}
@media (max-width:420px){ .card{padding:24px 18px 20px} }