/* Luminous — вход для ведущих: «Закулисье». Программка с двумя корешками-вкладками.
   Основа — theatre.css. */

.page-login {
  background:
    radial-gradient(60% 46% at 50% -6%, rgba(255, 233, 176, 0.2), transparent 70%),
    radial-gradient(42% 62% at -8% 46%, rgba(140, 21, 41, 0.42), transparent 70%),
    radial-gradient(42% 62% at 108% 46%, rgba(140, 21, 41, 0.42), transparent 70%),
    var(--night);
  background-attachment: fixed;
}

.login-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  grid-template-areas:
    'intro card'
    'note card';
  align-items: start;
  gap: 18px 64px;
  padding: 64px 0 72px;
}

.login-intro {
  grid-area: intro;
  display: grid;
  gap: 14px;
  align-self: end;
}

.login-intro .kicker {
  font-size: 22px;
  animation: drop-in 600ms var(--ease-out) 500ms backwards;
}

.login-intro h1 {
  font-size: clamp(48px, 6.4vw, 92px);
  color: var(--ivory);
  animation: rise-in 700ms var(--ease-out) 580ms backwards;
}

.login-intro p:not(.kicker) {
  max-width: 520px;
  font-size: 19px;
  animation: fade-in 700ms ease 700ms backwards;
}

.privacy-note {
  grid-area: note;
  max-width: 520px;
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.85;
  animation: fade-in 700ms ease 820ms backwards;
}

/* ---------- Программка ---------- */

.privacy-note a {
  color: var(--gold-light);
  font-weight: 700;
}

.login-card {
  grid-area: card;
  padding: 18px 30px 32px;
  animation: programme-in 800ms var(--ease-out) 560ms backwards;
}

.login-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 -12px 26px;
  border-bottom: 1.5px dashed rgba(143, 106, 34, 0.55);
}

.login-tab {
  position: relative;
  min-height: 56px;
  padding: 10px 12px 12px;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  transition: color 200ms ease;
}

.login-tab::after {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: -2px;
  height: 4px;
  border-radius: 4px 4px 0 0;
  background: var(--gold-leaf);
  transform: scaleX(0);
  transition: transform 320ms var(--ease-out);
}

.login-tab[aria-selected='true'] {
  color: var(--ink);
}

.login-tab[aria-selected='true']::after {
  transform: scaleX(1);
}

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

.login-tab:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
  border-radius: var(--radius-sm);
}

.login-form {
  display: grid;
  gap: 18px;
}

.login-form .btn-block {
  margin-top: 6px;
}

.field-hint {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* Ловушка для ботов вне экрана (display: none боты распознают). */
.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Текстовая кнопка-ссылка под формой */
.link-btn {
  justify-self: center;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--velvet);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(140, 21, 41, 0.35);
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}

.link-btn:hover {
  color: var(--velvet-deep);
  text-decoration-color: currentColor;
}

.link-btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.form-head {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

.form-head .kicker {
  color: var(--gold-deep);
}

.form-head h2 {
  font-size: 28px;
  color: var(--ink);
}

.input-code {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.input-code::placeholder {
  text-transform: none;
}

.recover-contact {
  text-align: center;
}

.recover-contact a {
  color: var(--velvet);
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* ---------- Резервный код ---------- */

.backup-step {
  display: grid;
  gap: 14px;
  padding-top: 8px;
}

.backup-step .kicker {
  color: var(--gold-deep);
}

.backup-step h2 {
  font-size: 30px;
  color: var(--ink);
}

.backup-code {
  margin: 6px 0 0;
  padding: 18px 14px;
  border: 1.5px dashed var(--gold-deep);
  border-radius: var(--radius-sm);
  background: #fffaf0;
  color: var(--ink);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  user-select: all;
}

/* Перенос строки — только между группами кода. */
.backup-code span {
  white-space: nowrap;
}

.backup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.check {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  cursor: pointer;
}

.check input {
  flex: none;
  width: 22px;
  height: 22px;
  accent-color: var(--velvet);
  color-scheme: light;
}

/* ---------- Узкие экраны ---------- */

@media (max-width: 860px) {
  .login-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'intro'
      'card'
      'note';
    gap: 26px;
    padding: 36px 0 56px;
  }

  .login-intro,
  .privacy-note {
    justify-self: center;
    text-align: center;
    justify-items: center;
  }
}

@media (max-width: 520px) {
  .login-card {
    padding: 12px 18px 26px;
  }

  .login-tabs {
    margin-inline: -6px;
  }

  .topbar .btn-small {
    padding-inline: 12px;
    font-size: 14px;
  }
}

/* Узкий телефон: короткая подпись кнопки в шапке. */
@media (max-width: 400px) {
  .topbar .wide-only {
    display: none;
  }
}