/* crinoidea-index-desktop-login-start */

:root {
  --crinoidea-login-mobile-bg: url("/assets/images/crinoidea_vpn_ocean_background_1080x2400.jpg");
  --crinoidea-login-desktop-bg: url("/assets/images/desk.png");
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0 !important;
  min-height: 100vh !important;
  color: #f2f7ff !important;
  font-family: Inter, "SF Pro Display", "Segoe UI", system-ui, -apple-system, sans-serif !important;
  background-color: #020d18 !important;
  background-image:
    linear-gradient(rgba(0, 8, 18, .18), rgba(0, 8, 18, .32)),
    var(--crinoidea-login-mobile-bg) !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}

body::before,
body::after {
  display: none !important;
}

/* Общий shell первого входа */
body > div,
main,
.wrapper,
.container {
  box-sizing: border-box !important;
}

/* Desktop: wide background и нормальная auth-композиция */
@media (min-width: 1024px) {
  body {
    background-image:
      radial-gradient(circle at 50% 15%, rgba(0, 224, 195, .10), transparent 34%),
      linear-gradient(rgba(0, 8, 18, .16), rgba(0, 8, 18, .30)),
      var(--crinoidea-login-desktop-bg) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
  }

  body > div:first-child,
  main:first-child,
  .wrapper,
  .container {
    min-height: 100vh !important;
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 72px 24px 40px !important;
    box-sizing: border-box !important;
  }

  h1 {
    font-size: 24px !important;
    line-height: 1.05 !important;
    letter-spacing: .2px !important;
    color: #f2f7ff !important;
    margin-bottom: 22px !important;
  }

  h2 {
    font-size: 22px !important;
    line-height: 1.15 !important;
    color: #f2f7ff !important;
  }

  .card,
  form,
  main > div,
  body > div:first-child > div {
    width: min(420px, 100%) !important;
    max-width: 420px !important;
    border-radius: 18px !important;
    padding: 20px !important;
    background: rgba(4, 34, 55, .72) !important;
    border: 1px solid rgba(0, 224, 195, .20) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .32) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-sizing: border-box !important;
  }

  button,
  .btn,
  a[class*="btn" i] {
    min-height: 46px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }
}

/* Mobile: оставить компактный вариант */
@media (max-width: 1023px) {
  body {
    background-image:
      linear-gradient(rgba(0, 8, 18, .12), rgba(0, 8, 18, .30)),
      var(--crinoidea-login-mobile-bg) !important;
    background-size: cover !important;
    background-position: center top !important;
  }
}

/* crinoidea-index-desktop-login-end */