/* ═══════════════════════════════════════════════════════════════════
   ПЛАШКА ВХОДА НА ПОДДОМЕН

   Первое, что видит человек, открывший tablo.ltc-start.ru, пока раздел в
   разработке. Нарочно без фона и без подробностей: страница должна
   открываться мгновенно и ничего не рассказывать о том, что за ней.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bg: #04121f;
  --ink: #eaf6ff;
  --ink-dim: rgba(214, 234, 252, .6);
  --accent: #7ee0ff;
  --accent-ink: #04202e;
  --bad: #ff8d7a;
  --line: rgba(150, 205, 240, .18);
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

.gate-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: radial-gradient(120% 80% at 50% 0%, #0b3c63 0, var(--bg) 60%), var(--bg);
}

.gate {
  width: 100%;
  max-width: 400px;
  padding: 34px 30px 30px;
  text-align: center;
  background: rgba(10, 32, 52, .72);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.gate__mark {
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--accent);
  margin-bottom: 18px;
}

.gate__title {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 700;
}

.gate__note {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-dim);
}

.gate__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gate__input {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: 17px;          /* меньше 16px — iOS зумит страницу при фокусе */
  text-align: center;
  letter-spacing: 1px;
  color: var(--ink);
  background: rgba(8, 26, 44, .8);
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: none;
}

.gate__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(126, 224, 255, .14);
}

.gate__btn {
  min-height: 50px;
  padding: 13px 20px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  border: none;
  border-radius: 11px;
  cursor: pointer;
}

.gate__btn:hover { filter: brightness(1.1); }
.gate__btn:disabled { opacity: .5; cursor: default; filter: none; }

.gate__msg {
  min-height: 22px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--bad);
}

/* Короткая встряска при неверном пароле: понятнее любой подписи */
.gate--no { animation: shake .3s ease; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-7px); }
  75%      { transform: translateX(7px); }
}

@media (prefers-reduced-motion: reduce) {
  .gate--no { animation: none; }
}