/**
 * 教程站点通用移动端适配：安全区、防横向滚动、图片/表格、触控区域
 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

body {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

img,
video,
canvas {
  max-width: 100%;
  height: auto;
}

svg:not(:root) {
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;
}

table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

pre,
code {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

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

@media (max-width: 768px) {
  body {
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
  }

  /* 有顶部「返回」类按钮时，主内容区上移留白（无此类按钮的页面不受影响） */
  body:has(.home-button) .container {
    padding-top: max(52px, calc(env(safe-area-inset-top, 0px) + 40px)) !important;
  }

  .content-wrapper {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 标题不用 flex 拆行（易把中英文拆到两列）；改为块级 + 行内图标，配合 keep-all 减少怪换行 */
  .header h1 {
    display: block !important;
    font-size: clamp(1.05rem, 4.8vw, 1.75rem) !important;
    line-height: 1.35 !important;
    text-align: center;
    word-break: keep-all;
    overflow-wrap: break-word;
    text-wrap: balance;
  }

  .header h1 > i,
  .header h1 > svg {
    margin-right: 0.35em;
    vertical-align: -0.12em;
  }

  .header p {
    font-size: clamp(0.9rem, 3.6vw, 1.05rem) !important;
    padding: 0 4px;
  }

  .step {
    padding: 18px 16px !important;
  }

  .step h2 {
    display: block !important;
    font-size: clamp(0.95rem, 4vw, 1.22rem) !important;
    line-height: 1.38 !important;
    word-break: keep-all;
    overflow-wrap: break-word;
    text-wrap: balance;
  }

  .step h2 > i,
  .step h2 > svg {
    margin-right: 0.35em;
    vertical-align: -0.1em;
  }

  .step h3 {
    font-size: clamp(0.95rem, 4vw, 1.15rem) !important;
  }

  /* 英文专有名词尽量整段不换行 */
  .phrase {
    white-space: nowrap;
  }

  .home-button,
  a.home-button {
    top: max(10px, env(safe-area-inset-top, 0px)) !important;
    min-height: 44px;
    padding: 10px 14px !important;
    font-size: 0.875rem;
    box-sizing: border-box;
    z-index: 10000;
    align-items: center;
  }

  /* 首页链接到 babacf 的页面把「首页」放在左上角 */
  body:has(a.home-button[href*="babacf"]) .home-button {
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    right: auto !important;
  }

  /* 首页链接到 angwc 的页面把按钮放在右上角并避让刘海 */
  body:has(a.home-button[href*="angwc"]) .home-button {
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
  }

  .btn,
  .btn1,
  a.btn,
  a.btn1 {
    min-height: 48px;
    box-sizing: border-box;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .btn-speed-test,
  .btn-speed-test-all {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    min-height: 48px;
    padding: 14px 16px !important;
    font-size: 0.9rem !important;
    line-height: 1.35;
    box-sizing: border-box;
  }

  .btn-download {
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 14px !important;
    font-size: 1rem !important;
    min-height: 48px;
  }

  /* 「推荐」角标在窄屏居中，避免 right: calc(50% - 175px) 跑出视口 */
  .best-tag {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    top: -8px !important;
  }

  .btn-link {
    display: block !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    min-height: 44px;
    line-height: 1.4;
    padding: 12px 14px !important;
  }

  .note,
  .important-note {
    flex-wrap: wrap;
  }

  .note > div,
  .important-note > div {
    min-width: 0;
  }

  /* appdown：下载行在窄屏纵向堆叠 */
  .version-item {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px;
  }

  .version-item .download-btn {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    min-height: 44px;
    line-height: 1.3;
    padding: 12px 16px !important;
  }

  .platform-header {
    flex-wrap: wrap;
  }

  .platform-header h2 {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem) !important;
  }

  .client-name {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 6px;
  }
}

/* 极窄屏允许 .phrase 折行，避免撑出横向滚动 */
@media (max-width: 340px) {
  .phrase {
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .content-wrapper {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    border-radius: 14px !important;
  }

  .video-section {
    padding: 18px 14px !important;
  }
}