:root{
    --brand:#4f46e5; --brand-deep:#312e81; --ink:#e2e8f0;
    --soft:#a5b4fc; --faint:#818cf8; --muted:#64748b; --dim:#475569;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{height:100%;}
  body{
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    background:linear-gradient(168deg,#312e81 0%,#1e1b4b 55%,#0b1020 100%);
    min-height:100dvh; display:flex; align-items:center; justify-content:center;
    padding:24px 20px calc(24px + env(safe-area-inset-bottom));
  }
  .wrap{width:100%;max-width:380px;}
  .brand h1{font-size:34px;font-weight:800;color:#fff;letter-spacing:.5px;}
  .brand .tag{font-size:14.5px;color:var(--soft);margin-top:4px;font-weight:600;font-style:italic;letter-spacing:.3px;}
  .hero{width:100%;height:auto;overflow:visible;margin-top:14px;}
  form{margin-top:22px;}
  label{display:block;font-size:9px;font-weight:700;letter-spacing:.8px;color:var(--faint);margin:14px 0 5px;text-transform:uppercase;}
  .field{position:relative;}
  input{
    width:100%;background:rgba(255,255,255,.07);
    border:0.5px solid rgba(165,180,252,.25);border-radius:12px;
    padding:13px 44px 13px 14px;font-size:14px;color:var(--ink);
    font-family:inherit;outline:none;
  }
  input:focus{border-color:var(--brand);box-shadow:0 0 0 2px rgba(199,210,254,.35);}
  input::placeholder{color:var(--muted);}
  .eye{position:absolute;right:13px;top:50%;transform:translateY(-50%);
    background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;}
  .signin{
    width:100%;background:var(--brand);color:#fff;border:none;border-radius:13px;
    padding:14px;font-size:15px;font-weight:700;margin-top:20px;cursor:pointer;
    box-shadow:0 6px 18px rgba(79,70,229,.4);font-family:inherit;transition:background .2s;
  }
  .signin:hover{background:#4338ca;}
  .signin:disabled{opacity:.75;cursor:wait;}
  .forgot{text-align:center;font-size:11px;color:var(--muted);margin-top:14px;}
  .forgot b{color:var(--soft);font-weight:600;}
  .status{text-align:center;font-size:11px;min-height:16px;margin-top:10px;color:var(--soft);}
  .status.ok{color:#34d399;font-weight:700;}
  footer{text-align:center;margin-top:26px;padding-top:12px;
    border-top:0.5px solid rgba(255,255,255,.06);
    font-size:9px;color:var(--dim);letter-spacing:.5px;}
  footer b{color:var(--muted);}
  @media (prefers-reduced-motion: reduce){
    .hero *{animation:none!important;}
    .hero animate, .hero animateMotion{display:none;}
  }

/* The one addition to the locked design: the colour a refusal is shown in.
   Everything above is the reference stylesheet, unchanged. */
.status.err{color:#f87171;font-weight:600;}