:root {
  --burgundy: #a73439;
  --burgundy-dark: #7c2529;
  --ink: #252322;
  --muted: #69635f;
  --surface: #f8f5f1;
  --white: #ffffff;
  --line: #d7cec6;
  --radius-control: 6px;
  --radius-surface: 8px;
  --shadow-floating: 0 10px 28px rgba(42, 31, 28, 0.09);
  --focus: #1758b5;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  background: var(--surface);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#authGate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.gate-card {
  width: min(100%, 420px);
  padding: 34px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-floating);
}

.gate-card img { display: block; height: 60px; margin: 0 auto 26px; }
.gate-card h1 { font-size: 24px; line-height: 1.2; margin-bottom: 9px; text-align: center; }
.gate-card > p { color: var(--muted); font-size: 15px; line-height: 1.55; margin-bottom: 22px; text-align: center; }
.gate-label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 700; }

#authInput {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
}

#authInput.error { border-color: var(--burgundy); }

#authGo {
  width: 100%;
  margin-top: 14px;
  padding: 13px 16px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--burgundy);
  color: var(--white);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

#authGo:hover { background: var(--burgundy-dark); }
#authGo:disabled { cursor: wait; opacity: 0.7; }
#authInput:focus-visible, #authGo:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.gate-card #authErr { margin: 10px 0 0; color: var(--burgundy); text-align: left; font-size: 14px; }
.gate-card .gate-note { margin: 18px 0 0; color: var(--muted); font-size: 13px; text-align: center; }

@media (max-width: 480px) {
  .gate-card { padding: 28px 22px; }
}