:root {
  --color-background: #f3f5f8;
  --color-border: #d6dce5;
  --color-danger: #963329;
  --color-focus: #8fb5ff;
  --color-muted: #526075;
  --color-primary: #234f98;
  --color-secondary: #e8eef7;
  --color-surface: #ffffff;
  --color-text: #182538;
  --radius: 0.65rem;
  --space-small: 0.5rem;
  --space-medium: 1rem;
  --space-large: 1.5rem;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }

.gate-page {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
}
.gate-shell {
  display: grid;
  gap: var(--space-large);
  margin: var(--space-large) auto;
  max-width: 40rem;
  padding: var(--space-medium);
}
.gate-brand { font-size: 1.5rem; font-weight: 750; }
.gate-brand__caption { color: var(--color-muted); font-size: 1rem; font-weight: 400; }
.gate-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  display: grid;
  gap: var(--space-medium);
  padding: var(--space-large);
}
.gate-title { font-size: 1.6rem; line-height: 1.25; margin: 0; }
.gate-text, .gate-note { margin: 0; overflow-wrap: anywhere; }
.gate-note, .gate-footer { color: var(--color-muted); font-size: 0.9rem; }
.gate-form, .gate-field { display: grid; gap: var(--space-small); }
.gate-form { gap: var(--space-medium); }
.gate-form--compact { align-items: end; }
.gate-input {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  min-width: 0;
  padding: 0.7em;
  width: 100%;
}
.gate-button {
  background-color: var(--color-primary);
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--color-surface);
  cursor: pointer;
  padding: 0.75em 1em;
}
.gate-button--secondary { background-color: var(--color-secondary); color: var(--color-text); }
.gate-button--danger { background-color: var(--color-danger); }
.gate-input:focus-visible, .gate-button:focus-visible, .gate-link:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
.gate-link { color: var(--color-primary); overflow-wrap: anywhere; }
.gate-qr { justify-self: center; max-width: 100%; width: 18rem; }
.gate-secret { display: block; overflow-wrap: anywhere; padding-block: var(--space-medium); }
.gate-services { display: flex; flex-wrap: wrap; gap: var(--space-medium); }
.gate-browser-list { display: grid; gap: var(--space-medium); }
.gate-browser {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  display: grid;
  gap: var(--space-medium);
  padding: var(--space-medium);
}
.gate-browser__title { font-size: 1.1rem; margin: 0; overflow-wrap: anywhere; }
.gate-browser--revoked { background-color: var(--color-background); }