/* Per-page CSS for static/gate.html — extracted from the
 * previous inline <style> block by the foundation bundle
 * auto-migration. Rules live here unchanged; if anything in
 * this file should instead live in gateway.css or
 * components.css, lift it in a follow-up pass — but do NOT
 * rewrite selectors here without a visual QA pass. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { min-height: 100vh;
  min-height: 100dvh; background: var(--bg-void); color: var(--text-primary); font-family: var(--font-ui); display: flex; flex-direction: column; justify-content: center; align-items: center; }

    .gate-logo {
      position: fixed;
      top: 24px;
      left: 24px;
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      z-index: 10;
    }
    .gate-logo-icon { width: 28px; height: 28px; filter: none; border-radius: var(--radius-xs); }
    [data-theme="dark"] .gate-logo-icon { filter: invert(1); }
    .gate-logo-text {
      font-family: var(--font-ui);
      font-weight: 500;
      font-size: 1.1rem;
      letter-spacing: -0.04em;
      color: var(--text-primary);
    }

    .gate-card { text-align: center; width: 100%; max-width: 340px; padding: 24px; }
    .gate-heading {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: 1.2rem;
      color: var(--text-primary);
      margin-bottom: 1.5rem;
    }
    .gate-input {
      width: 100%;
      height: 44px;
      padding: 0 16px;
      border: 1px solid var(--border-default);
      border-radius: var(--radius-sm);
      background: var(--bg-overlay);
      font-family: var(--font-ui);
      font-size: 0.9rem;
      color: var(--text-primary);
      outline: none;
      transition: border-color var(--duration-fast);
      -webkit-text-security: disc;
    }
    .gate-input:focus-visible { border-color: var(--border-strong); box-shadow: 0 0 0 3px rgba(240,240,240,0.04); }
    .gate-input::placeholder { color: var(--text-tertiary); }
    .gate-btn {
      width: 100%;
      height: 44px;
      margin-top: 10px;
      background: var(--interactive-bg);
      color: var(--interactive-text);
      border: none;
      border-radius: var(--radius-sm);
      font-family: var(--font-ui);
      font-size: 0.9rem;
      cursor: pointer;
      transition: background var(--duration-fast);
    }
    .gate-btn:hover { background: var(--interactive-hover); }
    .gate-error {
      font-size: 0.8rem;
      color: var(--text-secondary);
      margin-top: 10px;
      min-height: 20px;
    }
    .gate-error:empty { display: none; }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      15%, 45%, 75% { transform: translateX(-6px); }
      30%, 60%, 90% { transform: translateX(6px); }
    }
    .shake { animation: shake 0.4s ease-in-out; }