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

/* Login: keep the original 1152 x 800 design as a maximum, never a fixed viewport. */
.loginP[data-v-aa2e28af] {
  min-height: 100dvh !important;
  height: auto !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  overflow: auto !important;
}

.all-lottie[data-v-aa2e28af],
.all[data-v-aa2e28af] {
  width: min(1152px, 100%) !important;
  height: min(800px, calc(100dvh - 32px)) !important;
  min-height: 640px !important;
  flex-shrink: 0 !important;
}

.all .form-login[data-v-aa2e28af] {
  min-width: 0;
}

.all .form-login[data-v-aa2e28af] > * {
  flex-shrink: 0;
}

.all .form-login[data-v-aa2e28af] > img {
  margin-top: clamp(24px, calc(100dvh - 642px), 137px) !important;
}

.login-input[data-v-aa2e28af] {
  width: 100% !important;
  max-width: 480px !important;
}

/* Main navigation: keep actions reachable without overflowing narrow screens. */
@media (max-width: 900px) {
  .al-heard .left-heard {
    width: auto !important;
    flex: 1;
    min-width: 0;
  }

  .al-heard .left-heard img {
    height: 40px !important;
    max-width: 140px;
    object-fit: contain;
  }

  .al-heard .index-click {
    margin-left: 12px !important;
    font-size: 15px !important;
  }

  .al-heard .right-heard {
    width: auto !important;
    flex: none;
  }

  .al-heard .user-avatar {
    margin-right: 12px !important;
  }

  .al-heard .user-name,
  .al-heard .right-hearde-click {
    display: none !important;
  }

  .all-root[data-v-3ea38ca8] {
    width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box;
  }

  .show-name[data-v-3ea38ca8] {
    width: 100% !important;
    max-height: none !important;
    padding: 24px !important;
    box-sizing: border-box;
  }

  .show-card[data-v-3ea38ca8] {
    gap: 16px !important;
  }

  .show-card .card[data-v-3ea38ca8] {
    width: 100% !important;
    height: auto !important;
    min-height: 220px;
    padding: 24px !important;
    box-sizing: border-box;
  }

  .show-menu[data-v-3ea38ca8] {
    padding: 24px !important;
  }

  .show-menu .all-menu[data-v-3ea38ca8] {
    gap: 16px !important;
  }

  .show-menu .all-menu .menu-detail[data-v-3ea38ca8] {
    width: 100% !important;
    height: auto !important;
    min-height: 64px;
  }

  .all-lottie[data-v-aa2e28af],
  .all[data-v-aa2e28af] {
    width: min(520px, 100%) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 16px !important;
  }

  .all .form-login[data-v-aa2e28af] {
    width: 100% !important;
    height: auto !important;
    padding: 24px !important;
    box-sizing: border-box;
  }

  .all .img-login[data-v-aa2e28af] {
    display: none !important;
  }

  .all .form-login > img[data-v-aa2e28af] {
    width: min(100%, 329px) !important;
    height: auto !important;
    margin: 24px 0 0 !important;
  }

  .text1[data-v-aa2e28af] {
    width: auto !important;
    height: auto !important;
  }

  .login-prompt[data-v-aa2e28af] {
    margin-top: 20px !important;
  }
}

@media (max-width: 600px) {
  .al-heard .index-click {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .loginP[data-v-aa2e28af] {
    padding: 12px !important;
  }

  .all .form-login[data-v-aa2e28af] {
    padding: 20px !important;
  }

  .all .form-login > img[data-v-aa2e28af] {
    margin-top: 16px !important;
  }

  .show-name[data-v-3ea38ca8],
  .show-card .card[data-v-3ea38ca8],
  .show-menu[data-v-3ea38ca8] {
    padding: 20px !important;
  }
}