:root {
  --red: #AC1F24;
  --gray: #58595B;
  --ink: #272531;
  --muted: #777777;
  --line: #D8D8D8;
  --danger: #A32D2D;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink); background: #f3f3f3;
  display: flex; align-items: center; justify-content: center;
}

.card {
  width: 100%; max-width: 340px;
  background: #fff; border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  padding: 1.75rem;
}

.brand { text-align: center; margin-bottom: 1.5rem; }
.brand-mark { display: block; font-weight: 700; font-size: 1.5rem; color: var(--red); letter-spacing: 0.06em; }
.brand-sub { display: block; font-size: 0.9rem; color: var(--gray); margin-top: 0.15rem; }
.app-version {
  display: inline-block; margin-top: 0.45rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--muted); padding: 0.1rem 0.4rem; border-radius: 3px;
  background: #eee;
}

form { display: flex; flex-direction: column; gap: 1rem; }
label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; color: var(--gray); font-weight: 700; }
input {
  font: inherit; font-size: 1rem; padding: 0.5rem 0.6rem;
  border: 1px solid var(--line); border-radius: 4px; color: var(--ink);
}
input:focus { outline: 2px solid var(--red); outline-offset: 1px; }

button {
  font: inherit; font-weight: 700; font-size: 1rem; color: #fff;
  background: var(--red); border: none; border-radius: 4px;
  padding: 0.6rem; cursor: pointer;
}
button:hover { background: #8f191d; }
button:disabled { opacity: 0.6; cursor: default; }

.error { color: var(--danger); font-size: 0.85rem; margin: -0.25rem 0 0; }