/* ============================================================================
   VPN-HUB · v3/login.css: вход через Telegram, каркас /v3 (/v3/login).

   Не трогает app.css/tokens.css (запрещено заданием). Слои фиксированы в app.css:
   `@layer reset, base, layout, nav, components, article, forms, states, util, v3;`,
   здесь объявлен новый именованный слой `login`, который браузер добавляет в конец
   этого списка (после v3), правила ниже старше по каскаду и могут уточнять
   .card/.btn/.error-box каркаса, не трогая исходники (тот же приём, что в v3/pro.css).

   Один экран, одно действие: крупная кнопка «Войти через Telegram» и ничего
   лишнего. За неделю форму регистрации открыли 361 человек, дошли до конца 72
   (разведка в шапке main.py::v3_login). Остальные способы входа (код из бота,
   логин-пароль, оба боевые, без изменений) спрятаны под <details>, чтобы не
   спорить с главным действием на экране.
   ========================================================================== */

@layer login {
  .login-wrap { max-width: 440px; margin-inline: auto; padding-top: clamp(1.25rem, 6vw, 3.5rem); }

  .login-card { text-align: center; }

  .login-head { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
    margin-bottom: var(--sp-5); }
  .login-badge { width: 52px; height: 52px; border-radius: var(--r-pill); display: flex;
    align-items: center; justify-content: center; background: var(--accent-bg);
    color: var(--accent-ink); font-size: 24px; margin-bottom: var(--sp-1); }
  .login-head h1 { font-size: var(--fs-xl); }
  .login-head p { font-size: var(--fs-body); max-width: 34ch; }

  .login-err { margin-bottom: var(--sp-4); text-align: left; font-size: var(--fs-sm); }
  .login-err--warn { border: 1px solid color-mix(in oklab, var(--warning) 40%, var(--border));
    border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); color: var(--warning); }

  .login-tg-btn { min-height: 56px; font-size: var(--fs-md); font-weight: 700; }
  .login-tg-btn .ti { font-size: 22px; }
  .login-tg-btn:disabled { opacity: .55; cursor: default; }

  .login-hint { margin-top: var(--sp-3); font-size: var(--fs-sm); }

  .login-more { margin-top: var(--sp-6); text-align: left; }
  .login-more summary { cursor: pointer; text-align: center; font-size: var(--fs-sm);
    color: var(--text-muted); list-style: none; }
  .login-more summary::-webkit-details-marker { display: none; }
  .login-more summary::marker { content: ""; }
  .login-more summary:hover { color: var(--text-2); }
  .login-more[open] summary { margin-bottom: var(--sp-3); }
  .login-more-body { display: flex; flex-direction: column; gap: var(--sp-2); }

  @media (max-width: 520px) {
    .login-wrap { padding-inline: 0; }
  }
}


/* LOGINORDER-010926: служебный вход (логин+пароль) для админов и модераторов —
   второй уровень вложенности, чтобы не мозолил глаза обычному посетителю. */
.login-staff { margin-top: var(--sp-3); }
.login-staff > summary {
  color: var(--text-muted); font-size: var(--fs-caption); cursor: pointer;
  list-style: none; padding: 4px 0;
}
.login-staff > summary::-webkit-details-marker { display: none; }
.login-staff > summary:hover { color: var(--text-2); }
.login-staff[open] > summary { margin-bottom: var(--sp-2); }