/* 免域Pro 前台自适应增强（在既有响应式基础上叠加，保守规则，最后加载覆盖） */

html,
body {
  max-width: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
iframe {
  max-width: 100%;
}

@media (max-width: 992px) {
  .nav-container,
  .footer-container,
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .navbar .nav-links {
    gap: 12px;
  }
}

@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
  }

  img:not([width]):not([height]),
  video,
  iframe,
  table {
    max-width: 100%;
  }

  img:not([width]):not([height]) {
    height: auto;
  }

  .table-wrap,
  .table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .footer-content {
    flex-direction: column;
    gap: 20px;
  }

  .footer-features-container {
    flex-wrap: wrap;
    gap: 16px;
  }

  .footer-bottom-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .container,
  .nav-container,
  .footer-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .login-modal {
    align-items: flex-start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: max(12px, env(safe-area-inset-top, 12px)) 0 max(12px, env(safe-area-inset-bottom, 12px)) !important;
  }

  .login-modal-content {
    flex: 0 0 auto;
    width: min(480px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0 auto;
    max-height: none !important;
    overflow: visible !important;
  }

  .login-modal-overlay,
  .modal-overlay {
    padding: 0;
    align-items: flex-start;
  }

  .login-code-group {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .login-send-code-btn {
    width: 100%;
  }

  a,
  button,
  .btn {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
  }

  input,
  select,
  textarea,
  button {
    max-width: 100%;
    font-size: 16px;
  }

  pre,
  code,
  .bt-command,
  .command-text {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  [id] {
    scroll-margin-top: calc(58px + env(safe-area-inset-top, 0px));
  }

  .mobile-sidebar {
    top: 50px;
    height: calc(100svh - 50px);
    height: calc(100dvh - 50px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mobile-sidebar-header {
    display: none;
  }

  .mobile-sidebar-content,
  .mobile-nav-left,
  .mobile-nav-right {
    min-height: 0;
  }

  .mobile-nav-left,
  .mobile-nav-right {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-nav-left {
    width: 104px;
    flex: 0 0 104px;
    padding-top: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow-y: auto;
  }

  .mobile-nav-right {
    min-width: 0;
    padding-top: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mobile-nav-item,
  .mobile-section-group h4,
  .mobile-section-item {
    min-height: 44px;
  }

  .mxp-about-page,
  .mxp-company-page {
    padding-top: 50px;
  }

  .mxp-about-banner,
  .mxp-company-banner-inner {
    padding: 36px 16px 32px;
  }

  .mxp-about-banner h1,
  .mxp-company-banner h1 {
    font-size: 28px;
    line-height: 1.3;
  }

  .mxp-about-nav {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 12px 16px 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .mxp-about-nav::-webkit-scrollbar {
    display: none;
  }

  .mxp-about-nav a {
    flex: 0 0 auto;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  .mxp-about-section,
  .mxp-company-section {
    padding: 36px 16px 44px;
  }

  .mxp-about-card,
  .mxp-company-culture-card {
    border-radius: 8px;
    padding: 20px 16px;
  }

  .mxp-about-list-item {
    padding: 16px;
    flex-direction: column;
  }

  .mxp-company-banner {
    min-height: 220px;
  }

  .mxp-company-intro {
    gap: 24px;
  }

  .mxp-company-intro-visual,
  .mxp-company-intro-placeholder {
    min-height: 200px;
    height: auto;
  }

  .mxp-company-intro-visual img {
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .mxp-company-section-title {
    margin-bottom: 24px;
  }

  .mxp-company-section-title h2 {
    font-size: 24px;
  }

  .mxp-company-cta,
  .mxp-about-cta {
    padding: 36px 16px 44px;
  }

  .mxp-company-cta-btn,
  .mxp-about-cta .mxp-about-btn {
    width: 100%;
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: clamp(22px, 7vw, 32px);
    line-height: 1.3;
    word-break: break-word;
  }

  h2 {
    font-size: clamp(18px, 6vw, 26px);
    word-break: break-word;
  }

  .register-label-full {
    display: none;
  }

  .register-label-short {
    display: inline;
  }
}