:root { --charcoal:#22252B; --ivory:#F5F0E3; --brass:#B8934E; --grey:#8A8D93; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  font-family: "Poppins", Arial, sans-serif; background: var(--charcoal); color: var(--ivory);
  padding: 16px;
}
.card { width: 100%; max-width: 340px; }
.brand { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; }
.brand .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--ivory); flex-shrink: 0; }
.brand .bar { width: 6px; height: 16px; border-radius: 2px; background: var(--brass); flex-shrink: 0; }
.brand .label { font-size: 15px; font-weight: 600; }
h1 { font-size: 18px; font-weight: 600; margin: 0 0 20px; }
label { display: block; font-size: 11.5px; color: var(--grey); margin-bottom: 5px; }
input {
  width: 100%; font-family: inherit; font-size: 14px; color: var(--charcoal);
  background: var(--ivory); border: none; border-radius: 4px; padding: 10px 12px; margin-bottom: 16px;
}
input:focus { outline: 2px solid var(--brass); }
button {
  width: 100%; font-family: inherit; font-size: 13.5px; font-weight: 600;
  background: var(--brass); color: var(--charcoal); border: none; border-radius: 4px;
  padding: 11px; cursor: pointer;
}
button:hover { opacity: 0.9; }
button:disabled { opacity: 0.6; cursor: default; }
.error {
  font-size: 12.5px; color: #E88; background: rgba(200,50,50,0.12);
  border-left: 3px solid #C33; padding: 8px 10px; border-radius: 3px; margin-bottom: 16px;
}
.error[hidden] { display: none; }