/*
 * Ekran wejścia.
 *
 * Celowo nie wygląda jak kasyno: żadnej zieleni, złota, pików ani nazwy.
 * Zwykły ciemny panel logowania — po tym, co widać przed zalogowaniem,
 * nie da się poznać, co jest dalej.
 *
 * Paleta nadpisuje zmienne z base.css lokalnie, więc pola i przyciski
 * przemalowują się same, bez powtarzania ich reguł.
 */

.body--gate {
  --ink: #e3e6eb;
  --ink-dim: #858c99;
  --gold: #55779f;
  --gold-bright: #8fb0d8;
  --gold-dim: #3a5578;

  --panel: #171a20;
  --line: #272b34;

  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 28px 16px;
  background:
    radial-gradient(ellipse 80% 55% at 50% -10%, #1c2029 0%, #101216 55%, #0b0d10 100%);
  color: var(--ink);
}

.gate {
  width: 100%;
  max-width: 350px;
}

.gate__card {
  padding: 26px 24px 24px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 22px 55px rgba(0, 0, 0, .55);
}

.gate__note {
  margin: 0 0 18px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-dim);
}

/* ---------------------------------------------------------------- zakładki */

.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  padding: 4px;
  border-radius: 9px;
  background: #0f1116;
  border: 1px solid var(--line);
}

.tab {
  flex: 1;
  padding: 8px 6px;
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: background .15s, color .15s;
}

.tab:hover { color: var(--ink); }

.tab.is-on {
  background: #232833;
  color: var(--gold-bright);
}

/* ----------------------------------------------------------------- detale */

.body--gate .field__input {
  background: #0f1116;
  border-color: var(--line);
}

.body--gate .field__input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(85, 119, 159, .22);
}

.body--gate .field__input--code {
  letter-spacing: .3em;
}

.body--gate .btn--primary {
  margin-top: 4px;
  background: linear-gradient(180deg, #5d84b4, #3f5c86);
  border-color: #6f97c9;
  color: #f2f6fb;
  letter-spacing: .1em;
}

.body--gate .alert {
  background: rgba(120, 45, 45, .28);
  border-color: rgba(190, 100, 95, .45);
  color: #f0cfcc;
}