/* =============================== */
/*      MOBILE FIXES (FINAL)       */
/* =============================== */

/* Основные правки для смартфонов */
@media (max-width: 768px) {

  /* Разрешаем нормальный скролл */
  html,
  body {
    height: auto;
    min-height: 100vh;
    overflow-y: auto !important;
    overflow-x: hidden;
  }

  /* Убираем center-flex, чтобы всё не прилипало к середине */
  body {
    display: block !important;
    padding: 0;
  }

  /* Обёртка страницы */
  .login-wrap {
    min-height: 100vh;
    padding: 16px 12px 24px;
    display: block;
  }

  /* Основная карточка */
  .login-card {
    width: 100%;
    max-width: 420px;
    margin: 32px auto 20px;   /* ближе к верхней части экрана */
    padding: 22px 16px 18px;
    border-radius: 16px;
  }

  /* Внутренний контейнер инпутов */
  .login-form-shell {
    padding: 12px 10px;
    border-radius: 16px;
  }

  /* Поля + иконки уменьшаем */
  .field input {
    padding: 12px 38px;
    font-size: 0.92rem;
  }
  .field label {
    left: 38px;
  }
  .field .icon {
    left: 10px;
    width: 16px;
    height: 16px;
  }
  .field::after {
    left: 38px;
    right: 10px;
  }

  /* Верхний блок приветствия */
  .brand-mark {
    width: 40px;
    height: 40px;
  }
  .brand-title {
    font-size: 1.35rem;
  }
  .brand-sub {
    font-size: 0.82rem;
  }

  /* Login button — на всю ширину */
  .brand-btn {
    width: 100%;
    padding: 11px 14px;
    font-size: 0.95rem;
  }

  /* Блок "Remember + Forgot" — в две строки */
  .login-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
  }

  /* Ссылка "Forgot password" */
  .login-meta .link-muted {
    align-self: flex-start;
    font-size: 0.82rem;
  }

  /* Passkey блок */
  .passkey-block {
    margin-top: 12px;
  }
  .passkey-hint {
    font-size: 0.78rem;
  }

  /* Меньшие blobs, чтобы не занимали весь экран */
  .blob.b1,
  .blob.b2 {
    width: 340px;
    height: 340px;
    filter: blur(30px);
  }
  .blob.b1 {
    top: -140px;
    left: -120px;
  }
  .blob.b2 {
    bottom: -150px;
    right: -120px;
  }
}

/* EXTREME SMALL DEVICES (iPhone SE, small Android) */
@media (max-width: 400px) {

  .login-card {
    padding: 18px 12px 14px;
    margin: 24px auto 16px;
  }

  .login-form-shell {
    padding: 10px 8px;
  }

  .login-form {
    gap: 12px;
  }

  .remember-label,
  .link-muted {
    font-size: 0.78rem;
  }

  .brand-btn {
    padding: 10px 12px;
    font-size: 0.9rem;
  }
}

/* Если экран очень маленький, убираем сетку */
@media (max-width: 480px) {
  #cyber-net {
    display: none !important;
  }
}