:root{
    --brand:#0ea5e9; --brand-dark:#0369a1; --bg:#eef3f8; --surface:#ffffff;
    --text:#1e293b; --muted:#64748b; --border:#e2e8f0; --danger:#dc2626;
  }
  *{box-sizing:border-box;}
  body{
    margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(160deg,#0b3554 0%,#0ea5e9 55%,#7dd3fc 100%);
    font-family:'Inter',sans-serif; color:var(--text);
    padding:20px;
  }
  .card{
    width:100%; max-width:380px; background:var(--surface); border-radius:16px;
    padding:36px 32px; box-shadow:0 20px 50px rgba(3,20,40,.35);
  }
  .brand{ text-align:center; margin-bottom:6px; }
  .brand .mark{
    font-family:'Manrope',sans-serif; font-weight:800; font-size:15px; letter-spacing:.14em;
    color:var(--brand-dark); text-transform:uppercase;
  }
  h1{
    font-family:'Manrope',sans-serif; font-weight:800; font-size:24px; margin:4px 0 28px;
    text-align:center; color:var(--text);
  }
  label{ display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:6px; }
  .field{ margin-bottom:18px; }
  input{
    width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:10px;
    font-size:16px; font-family:inherit; transition:border-color .15s;
  }
  input:focus{ outline:none; border-color:var(--brand); }
  button{
    width:100%; padding:13px; border:none; border-radius:10px; background:var(--brand);
    color:#fff; font-size:15px; font-weight:700; cursor:pointer; margin-top:6px;
    transition:background .15s;
  }
  button:hover{ background:var(--brand-dark); }
  button:disabled{ opacity:.6; cursor:default; }
  .error{
    display:none; background:#fef2f2; color:var(--danger); border:1px solid #fecaca;
    border-radius:8px; padding:10px 12px; font-size:13.5px; margin-bottom:16px; font-weight:500;
  }
  .hint{ text-align:center; font-size:12.5px; color:var(--muted); margin-top:20px; }