:root{
  --bg:#f4f7fb;
  --card:#ffffff;
  --accent:#1976d2;
  --muted:#666;
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Arial,Helvetica,sans-serif;background:var(--bg);margin:0;color:#222}
.container{max-width:520px;padding:20px;margin:48px auto}
.card{background:var(--card);padding:20px;border-radius:8px;box-shadow:0 6px 18px rgba(20,30,50,0.08)}
h1,h2{margin:0 0 12px}
.form-group{margin:12px 0}
label{display:block;margin-bottom:6px;color:var(--muted);font-size:14px}
input[type=text],input[type=password]{width:100%;padding:10px 12px;border:1px solid #d9e2ef;border-radius:6px;font-size:15px}
button{background:var(--accent);color:#fff;border:none;padding:10px 14px;border-radius:6px;font-size:15px;cursor:pointer}
.error{color:#b00020;font-size:14px;min-height:18px}

@media (max-width:520px){
  .container{margin:20px;padding:12px}
}