/* Ekran bramki — paleta i typografia zgodne z landing page (landing/styles.css),
   żeby wejście do konsoli wyglądało jak część tej samej marki. */
:root {
  --navy-900: #0b1220;
  --navy-800: #131c2f;
  --line: rgba(255, 255, 255, 0.10);
  --ink: #eef3fb;
  --ink-dim: #a9b8d0;
  --orange: #f07d1a;
  --orange-soft: #f8a04b;
  --radius: 14px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: radial-gradient(1200px 600px at 50% -10%, #1a2740, var(--navy-900));
}

.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; }

.gate-card {
  width: min(440px, 100%);
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
  padding: 40px 36px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.gate-logo { height: 150px; width: auto; margin-bottom: 10px; }
.gate-card h1 { font-size: 24px; margin: 0 0 10px; }
.gate-card p { font-size: 14px; color: var(--ink-dim); margin: 0 0 22px; line-height: 1.5; }

.gate-card form { display: flex; gap: 10px; }

.gate-card input {
  flex: 1; min-width: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  padding: 12px 18px;
  font: inherit; font-size: 14px;
}
.gate-card input:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent; }

.gate-card button {
  border: 0; border-radius: 999px;
  background: var(--orange); color: #1b1206;
  font: inherit; font-size: 14px; font-weight: 700;
  padding: 12px 22px; cursor: pointer;
}
.gate-card button:hover { background: var(--orange-soft); }
.gate-card button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.gate-error { color: var(--orange-soft); font-weight: 600; margin: 16px 0 0 !important; }
.gate-foot { font-size: 12px; margin: 22px 0 0 !important; opacity: 0.75; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 420px) {
  .gate-card { padding: 28px 20px; }
  .gate-card form { flex-direction: column; }
  .gate-logo { height: 110px; }
}