/* SX Agency CRM — V6.4 mobile login, 27 October 2026.
   Design-only mobile override: replace the stacked split login with one
   full-viewport, space-backed login. Desktop and authentication unchanged. */
.sx-mobile-login-brand { display: none; }

@media (max-width: 770px) {
  /* Scope to the actual sign-in form: setup and connection error flows stay as-is. */
  .auth-page:has(#login-form) {
    display: block;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background: transparent;
  }

  /* The top half is intentionally absent on mobile, not merely shortened. */
  .auth-page:has(#login-form) > .auth-art {
    display: none !important;
  }

  .auth-page:has(#login-form) > .auth-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: calc(28px + env(safe-area-inset-top, 0px))
             clamp(20px, 6vw, 28px)
             calc(30px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    background: transparent !important;
    box-sizing: border-box;
  }

  /* No opaque replacement card: the deep-space background extends edge to edge. */
  .auth-page:has(#login-form) .auth-card {
    flex: 0 1 auto;
    width: 100%;
    max-width: 440px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .auth-page:has(#login-form) .sx-mobile-login-brand {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-bottom: clamp(33px, 6.5dvh, 57px);
    font-size: 24px;
    font-weight: 780;
    letter-spacing: -.065em;
    color: #f6f7f9;
  }
  .auth-page:has(#login-form) .sx-mobile-login-brand .sx-brand-point {
    color: #a9b2c1;
  }
  .auth-page:has(#login-form) .sx-mobile-login-brand .sx-brand-context {
    font-size: 15px;
    font-weight: 520;
    letter-spacing: -.035em;
    color: #adb5c2;
  }

  .auth-page:has(#login-form) .auth-card > .eyebrow {
    font-size: 10px;
    letter-spacing: .23em;
    color: #b8c1cf;
    margin-bottom: 15px;
  }
  .auth-page:has(#login-form) .auth-card h2 {
    font-size: clamp(34px, 9.4vw, 42px);
    line-height: 1.08;
    letter-spacing: -.052em;
    margin: 0 0 13px;
    text-wrap: balance;
    color: #f8f9fb;
  }
  .auth-page:has(#login-form) .auth-card p {
    max-width: 340px;
    font-size: 14px;
    line-height: 1.55;
    color: #b7c0ce;
    margin: 0 0 30px;
  }
  .auth-page:has(#login-form) .auth-card .field { margin-bottom: 19px; }
  .auth-page:has(#login-form) .auth-card label {
    font-size: 13px;
    font-weight: 630;
    letter-spacing: .005em;
    color: #d5dbe4;
    margin-bottom: 9px;
  }
  .auth-page:has(#login-form) .auth-card input {
    height: 54px;
    min-height: 54px;
    padding: 14px 16px;
    font-size: 16px !important;
    border-radius: 14px;
    background: rgba(12, 17, 27, .79) !important;
    border: 1px solid rgba(202, 214, 231, .36) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .035);
  }
  .auth-page:has(#login-form) .auth-card input:focus-visible {
    border-color: rgba(231, 240, 254, .80) !important;
  }
  .auth-page:has(#login-form) .auth-card .btn-primary {
    min-height: 56px;
    margin-top: 9px;
    padding: 15px 18px;
    border-radius: 15px;
    font-size: 15px;
    font-weight: 700;
  }
  .auth-page:has(#login-form) .auth-card .sidebar-btn {
    display: block;
    min-height: 44px;
    margin: 11px 0 0;
    padding: 10px;
    font-size: 13px;
    color: #c2cad5;
  }
  .auth-page:has(#login-form) .auth-card .fine {
    max-width: 420px;
    margin-top: 25px;
    font-size: 11px;
    line-height: 1.65;
    color: #a3adba;
  }
}

/* Short-screen phones and landscape still allow scrolling and keyboard access. */
@media (max-width: 770px) and (max-height: 730px) {
  .auth-page:has(#login-form) > .auth-panel {
    justify-content: flex-start;
    padding-top: calc(24px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }
  .auth-page:has(#login-form) .sx-mobile-login-brand { margin-bottom: 26px; }
  .auth-page:has(#login-form) .auth-card p { margin-bottom: 22px; }
}

@media (max-width: 360px) {
  .auth-page:has(#login-form) > .auth-panel { padding-inline: 18px; }
  .auth-page:has(#login-form) .auth-card h2 { font-size: 34px; }
}