:root{
  --bg1:#c2b6ff; --bg2:#9ad0ff;        /* gradient */
  --card:#ffffff; --ink:#0b1220; --muted:#6b7280;
  --brand:#2563eb; --brand-2:#60a5fa; --ring:#a5b4fc;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;font:15.5px/1.5 Inter,system-ui,-apple-system,Segoe UI,Roboto}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}

/* full gradient background */
.auth-screen{
  min-height:100dvh;
  background:radial-gradient(120% 120% at 0% 0%, var(--bg1) 0%, var(--bg2) 50%, #c8e4ff 100%);
  display:grid; place-items:center; padding:24px;
}

/* centered card */
.card{
  width:min(92vw, 520px);
  background:var(--card); color:var(--ink);
  border-radius:16px; border:1px solid #e6eaf2;
  box-shadow:0 12px 40px rgba(20,30,60,.18);
  overflow:hidden;
}

/* header area with logo */
.card-head{padding:20px 24px 8px; text-align:center}
.brand-logo{
  width:96px; height:96px; margin:0 auto 8px; border-radius:18px;
  background:#eef3ff center/contain no-repeat;
}
.card-title{margin:6px 0 2px; font-weight:700; font-size:20px}
.card-sub{margin:0 0 6px; color:var(--muted); font-size:13px}

/* content */
.card-body{padding:16px 24px 24px}

/* form */
.form{display:grid; gap:14px}
.label{font-weight:600; font-size:13px; margin-bottom:6px}
.input{
  display:flex; align-items:center; gap:8px;
  border:1px solid #e5e7eb; background:#fff; color:#111827;
  border-radius:12px; padding:10px 12px;
}
.input:focus-within{border-color:var(--ring); box-shadow:0 0 0 3px rgba(165,180,252,.35)}
.input input{
  border:0; outline:0; width:100%; background:transparent; font:inherit; color:inherit;
}

/* button */
.btn{
  display:inline-block; width:100%; text-align:center;
  background:linear-gradient(180deg, var(--brand), var(--brand-2));
  color:#fff; border:0; border-radius:12px; padding:11px 14px; font-weight:700; cursor:pointer;
}
.btn:hover{filter:brightness(1.03)}

/* small links row */
.links{display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:13px}

/* message boxes */
.error,.info{border-radius:12px; padding:10px 12px; margin:8px 0}
.error{border:1px solid #fecaca; background:#fff1f2; color:#7f1d1d}
.info{border:1px solid #bae6fd; background:#eff6ff; color:#1e3a8a}

/* tiny progress bar accent (like screenshot) */
.accent-bar{height:4px; width:40px; background:var(--brand); border-radius:999px; margin:10px auto 0}