* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; font-family: -apple-system, "Segoe UI", system-ui, sans-serif; }
body {
  display: flex; align-items: center; justify-content: center;
  background: #f6f1e8;
}
.login-wrap { width: 100%; max-width: 380px; padding: 20px; }
.login-card {
  background: #fff;
  border: 1px solid #e3dccf;
  border-radius: 12px;
  padding: 40px 32px 32px;
  text-align: center;
}
.brand {
  font-size: 28px; font-weight: 800; letter-spacing: 2px; color: #141414;
}
.brand-sub {
  font-size: 13px; color: #999; margin-bottom: 32px; letter-spacing: 1px;
}
form { text-align: left; }
label {
  display: block; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.5px; color: #888; margin-bottom: 4px; margin-top: 16px;
}
input {
  width: 100%; padding: 10px 12px; border: 1px solid #e3dccf;
  border-radius: 6px; font-size: 15px; font-family: inherit;
  background: #fafaf7;
}
input:focus { outline: none; border-color: #141414; }
button {
  width: 100%; margin-top: 24px; padding: 12px;
  background: #141414; color: #f6f1e8; border: none;
  border-radius: 6px; font-size: 15px; font-weight: 600;
  cursor: pointer; letter-spacing: 0.5px;
}
button:hover { background: #2a2a2a; }
.error {
  background: #f3d9d6; color: #b3261e;
  padding: 10px 14px; border-radius: 6px;
  font-size: 13px; margin-bottom: 8px;
}