:root { color-scheme: light dark }
* { box-sizing: border-box }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #f6f7f9; color: #1c1e21;
}
.card {
  background: #fff; width: min(92vw, 360px); padding: 32px;
  border: 1px solid #e4e6eb; border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.brand { font-size: 28px; font-weight: 700; letter-spacing: -.5px; color: #1877f2 }
.sub { margin: 4px 0 20px; color: #606770 }
label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px }
input {
  width: 100%; padding: 11px 12px; font-size: 15px;
  border: 1px solid #ccd0d5; border-radius: 8px;
}
input:focus { outline: none; border-color: #1877f2; box-shadow: 0 0 0 2px rgba(24,119,242,.2) }
button {
  width: 100%; margin-top: 20px; padding: 11px; border: 0; border-radius: 8px;
  background: #1877f2; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer;
}
button:hover { background: #166fe5 }
.muted { margin: 16px 0 0; text-align: center; font-size: 13px }
a { color: #1877f2; text-decoration: none }
a:hover { text-decoration: underline }
footer { margin-top: 24px; color: #8a8d91; font-size: 12px }
@media (prefers-color-scheme: dark) {
  body { background: #18191a; color: #e4e6eb }
  .card { background: #242526; border-color: #3a3b3c }
  .sub { color: #b0b3b8 }
  input { background: #3a3b3c; border-color: #4e4f50; color: #e4e6eb }
}