:root{
  --primary:#1e293b;
  --primary-dark:#0f172a;
  --secondary:#fbbf24;
  --light:#f8fafc;
  --light-gray:#e2e8f0;
  --gray:#64748b;
  --text:#1e293b;
  --white:#ffffff;
  --shadow-sm:0 2px 8px rgba(15,23,42,.06);
  --shadow-md:0 6px 18px rgba(15,23,42,.12);
  --radius:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  color:var(--text);
  background:var(--light-gray);
  padding:28px 16px;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

body > h1{
  max-width:420px;
  margin:0 auto 14px;
  font-size:1.6rem;
  font-weight:800;
  color:var(--primary-dark);
  text-align:center;
  letter-spacing:.2px;
}

.flashes{list-style:none;max-width:420px;margin:0 auto 12px;padding:0}
.flashes .alert,
.flashes .flash{
  background:var(--white);
  border:1px solid var(--light-gray);
  border-radius:12px;
  box-shadow:var(--shadow-sm);
  padding:10px 12px;
  margin:8px 0;
  font-size:.95rem;
}
.alert-success,.flash.success{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.alert-danger,.flash.danger{background:#fef2f2;border-color:#fecaca;color:#7f1d1d}
.alert-warning,.flash.warning{background:#fffbeb;border-color:#fde68a;color:#78350f}
.alert-info,.flash.info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}

form{
  max-width:420px;
  margin:0 auto;
  background:var(--white);
  border:1px solid var(--light-gray);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  padding:16px;
  display:grid;
  gap:12px;
}
input[type="email"],
input[type="password"],
input[type="text"]{
  width:100%;
  padding:12px;
  border:1px solid var(--light-gray);
  border-radius:12px;
  background:var(--light);
  color:var(--text);
  font-size:1rem;
  outline:none;
  transition:border-color .2s, box-shadow .2s, background-color .2s;
}
input::placeholder{color:#94a3b8}
input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(30,41,59,.12);
  background:#fff;
}
button[type="submit"]{
  border:0;
  border-radius:999px;
  padding:12px 16px;
  background:var(--primary);
  color:#fff;
  font-weight:700;
  font-size:1rem;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(15,23,42,.18);
  transition:transform .1s ease, background-color .2s ease, box-shadow .2s ease;
}
button[type="submit"]:hover{background:var(--primary-dark);transform:translateY(-1px)}
button[type="submit"]:active{transform:translateY(0);box-shadow:0 6px 14px rgba(15,23,42,.16)}

body > p{
  max-width:420px;
  margin:12px auto 0;
  text-align:center;
  color:var(--gray);
}
body > p a{font-weight:700}

a:focus-visible,button:focus-visible,input:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(251,191,36,.45)
}

@media (max-width:480px){
  body{padding:22px 12px}
  body > h1{font-size:1.45rem}
}