/* Compact login card while preserving the original vertical content order. */
body:has(.skyline-card) .skyline-glow-wrap {
  width: min(380px, calc(100vw - 32px)) !important;
  margin-left: calc((370px - min(380px, calc(100vw - 32px))) / 2);
}

body:has(.skyline-card) .skyline-card {
  width: 100%;
  max-width: 380px;
  box-sizing: border-box;
  padding: 24px 20px 22px !important;
}

body:has(.skyline-card) .skyline-card > div:first-child img {
  width: 45px !important;
  height: 45px !important;
  border-radius: 0 !important;
  object-fit: cover;
}

/* Keep the original login control width inside the wider card. */
body:has(.skyline-card) .skyline-card > form,
body:has(.skyline-card) .skyline-card .login-btn {
  width: 100%;
  max-width: 314px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 700px) {
  body:has(.skyline-card) .skyline-glow-wrap {
    width: 100% !important;
    margin-left: 0;
  }

  body:has(.skyline-card) .skyline-card {
    padding: 22px 18px 20px !important;
  }

  body:has(.skyline-card) .skyline-card > form,
  body:has(.skyline-card) .skyline-card .login-btn {
    max-width: 314px;
  }
}