/* The /kinetiq password page (shared/gate/kinetiqGate.ts). Plain CSS on system fonts: the page is
   served by a function, outside the Vite build. */
:root {
  color-scheme: dark;
  --ink: #0e0d12;
  --ink-raised: #17151d;
  --line: rgba(240, 235, 225, 0.2);
  --text: #f0ebe1;
  --text-muted: rgba(240, 235, 225, 0.72);
  --accent: #b8a2ff;
  --accent-ink: #15111f;
  --error: #ffb1a6;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--ink);
  color: var(--text);
  font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.gate {
  width: min(420px, 100% - 32px);
  margin: 0 auto;
  padding: 18vh 0 48px;
}
.back {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
h1 {
  margin: 24px 0 8px;
  font: 600 2.5rem/1.1 Georgia, "Times New Roman", serif;
}
p {
  color: var(--text-muted);
}
form {
  display: grid;
  gap: 12px;
  margin-top: 32px;
}
label {
  font-weight: 600;
}
input {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  color: var(--text);
  background: var(--ink-raised);
  border: 1px solid var(--line);
  border-radius: 12px;
}
input[aria-invalid="true"] {
  border-color: var(--error);
}
.error {
  margin: 0;
  color: var(--error);
}
button {
  justify-self: start;
  margin-top: 8px;
  padding: 12px 22px;
  font: 600 1rem/1 system-ui, sans-serif;
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}