:root {
  --bg: #f5f7fb;
  --card: #ffffff;
  --text: #1f2d3d;
  --muted: #6b7b93;
  --primary: #2563eb;
  --danger: #ef4444;
  --border: #e5e7eb;
}

* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg); color: var(--text);
}

.center { min-height: 100vh; display: grid; place-items: center; padding: 16px; }

.card {
  width: 100%; max-width: 380px; background: var(--card);
  border: 1px solid var(--border); border-radius: 16px; padding: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
}

h1 { margin: 0 0 16px; font-size: 22px; }

label { display:block; margin: 12px 0 6px; font-size: 14px; color: var(--muted); }
input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 10px; font-size: 16px; outline: none;
}
input:focus { border-color: var(--primary); }

button {
  width: 100%; margin-top: 16px; padding: 12px 16px; font-weight: 600;
  background: var(--primary); color: #fff; border: 0; border-radius: 12px; cursor: pointer;
}
button:hover { filter: brightness(1.05); }

.alert {
  padding: 10px 12px; border-radius: 10px; font-size: 14px; margin-bottom: 10px;
}
.alert.error { background: #fee2e2; color: #991b1b; }
.alert.info { background: #e0ecff; color: #1e3a8a; }

.blocked h1 { color: var(--danger); }
.link {
  display:inline-block; margin-top:12px; color: var(--primary); text-decoration:none;
}
.link:hover { text-decoration: underline; }