/* Desktop-only guest membership and login composition. Authentication logic,
   language behavior, and phone layouts remain unchanged. */
@media screen and (min-width: 901px) {
  /* Replace the oversized empty membership panel with two clear actions. */
  html body #root .guest-shell .hero-grid.guest > .guest-join-card {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 18px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: center !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: 12px !important;
    border-radius: 17px !important;
  }

  html body #root .guest-shell .guest-join-card > i {
    display: none !important;
  }

  html body #root .guest-shell .guest-join-card > .guest-join-action {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 82px !important;
    height: auto !important;
    padding: 12px 10px !important;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 9px !important;
    border: 1px solid rgba(205, 181, 128, 0.64) !important;
    border-radius: 14px !important;
    background: rgba(255, 252, 245, 0.84) !important;
    box-shadow: 0 5px 14px rgba(68, 54, 31, 0.05) !important;
    text-align: left !important;
  }

  html body #root .guest-shell .guest-join-card > .guest-join-action:first-child {
    border-color: rgba(191, 139, 31, 0.72) !important;
    background: linear-gradient(145deg, #fff9e9, #f6ead0) !important;
  }

  html body #root .guest-shell .guest-join-action > span {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 11px !important;
    background: rgba(245, 237, 216, 0.9) !important;
  }

  html body #root .guest-shell .guest-join-action > span svg {
    width: 24px !important;
    height: 24px !important;
  }

  html body #root .guest-shell .guest-join-action strong {
    min-width: 0 !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  /* Desktop login is a balanced two-column page instead of a stretched phone
     form. The existing fields and actions are only repositioned. */
  html body #root > .login-screen:not(.login-action-screen) {
    box-sizing: border-box !important;
    min-height: 100vh !important;
    height: auto !important;
    padding: 0 48px 30px !important;
    display: grid !important;
    grid-template-columns: minmax(320px, 0.9fr) minmax(440px, 1.1fr) !important;
    grid-template-rows: 72px minmax(0, 1fr) auto !important;
    column-gap: clamp(44px, 7vw, 100px) !important;
    row-gap: 14px !important;
    align-items: center !important;
  }

  html body #root > .login-screen:not(.login-action-screen) > .login-top {
    box-sizing: border-box !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-height: 64px !important;
    height: 64px !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--ruay-line) !important;
  }

  html body #root > .login-screen:not(.login-action-screen) > .login-logo {
    box-sizing: border-box !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 38px !important;
    display: grid !important;
    place-items: center !important;
    align-self: stretch !important;
    border: 1px solid rgba(218, 199, 158, 0.62) !important;
    border-radius: 24px !important;
    background: radial-gradient(circle at 50% 42%, #fffdf7, #f5ecda 78%) !important;
  }

  html body #root > .login-screen:not(.login-action-screen) > .login-logo
    .guest-login-brand-logo {
    width: min(88%, 430px) !important;
    max-width: 430px !important;
    height: auto !important;
    max-height: 220px !important;
    object-fit: contain !important;
  }

  html body #root > .login-screen:not(.login-action-screen) > .login-panel {
    box-sizing: border-box !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 30px 34px 28px !important;
    align-self: center !important;
    justify-self: start !important;
    border-radius: 22px !important;
  }

  html body #root > .login-screen:not(.login-action-screen) .login-fields {
    gap: 16px !important;
  }

  html body #root > .login-screen:not(.login-action-screen) .login-fields input,
  html body #root > .login-screen:not(.login-action-screen) .login-password-field input {
    min-height: 50px !important;
    height: 50px !important;
    font-size: 14px !important;
  }

  html body #root > .login-screen:not(.login-action-screen) .login-recovery-actions {
    margin-top: 11px !important;
  }

  html body #root > .login-screen:not(.login-action-screen) .login-actions {
    margin-top: 20px !important;
    gap: 10px !important;
  }

  html body #root > .login-screen:not(.login-action-screen) .login-actions > button {
    min-height: 48px !important;
    height: 48px !important;
    border-radius: 13px !important;
    font-size: 15px !important;
  }

  html body #root > .login-screen:not(.login-action-screen) > .login-assist-stack {
    grid-column: 2 !important;
    grid-row: 3 !important;
    width: min(100%, 560px) !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  html body #root > .login-screen:not(.login-action-screen)
    .login-assist-stack :is(.login-support, .login-telegram-button) {
    width: auto !important;
    min-width: 170px !important;
    min-height: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }
}