:root{
  --blue:#003399;
  --blue-dark:#00277a;
  --ink:#16201a;
  --muted:#677066;
  --bg:#fbfdfb;
  --field-border:#e1ebe3;
  --card-border:#e4ece6;
  --danger:#d92d20;
  --danger-bg:#fef3f2;
  --success:#16a34a;
  --success-bg:#f0fdf4;
}
*{box-sizing:border-box;}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
}
.card{
  width:100%;
  max-width:400px;
  background:#fff;
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:32px;
  box-shadow:0 4px 20px rgba(0,0,0,.05);
}
.card h1{font-size:1.25rem;margin:0 0 8px;color:var(--blue-dark);}
.card p.desc{color:var(--muted);font-size:.9rem;margin:0 0 24px;line-height:1.5;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:6px;}
.field input{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--field-border);
  border-radius:10px;
  font-size:1rem;
  outline:none;
}
.field input:focus{border-color:var(--blue);}
.btn{
  width:100%;
  margin-top:8px;
  padding:14px;
  background:var(--blue);
  color:#fff;
  border:none;
  border-radius:10px;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
}
.btn:hover{background:var(--blue-dark);}
.error{
  background:var(--danger-bg);
  color:var(--danger);
  border-radius:8px;
  padding:10px 14px;
  font-size:.85rem;
  margin-bottom:16px;
}
.success{
  background:var(--success-bg);
  color:var(--success);
  border-radius:8px;
  padding:10px 14px;
  font-size:.85rem;
  margin-bottom:16px;
  line-height:1.5;
}
.back{display:block;text-align:center;margin-top:16px;font-size:.85rem;color:var(--muted);text-decoration:none;}
.back:hover{text-decoration:underline;}