/* ============================================================
   移动端适配（手机 / 平板）— 全站统一
   作用：
   1) 通用基线：iOS 聚焦缩放防护、点击高亮清除、
      媒体/代码/表格横向溢出处理、刘海屏安全区。
   2) 栅格兜底：用 !important 把各页内联样式里的多列栅格
      （.hero / .grid / .layout / .split / .composer / .stats …
       ）在窄屏统一堆叠为单列，避免内容被挤窄或横向滚动。
   3) 手机端导航改为「左侧收缩抽屉」：上导航栏在 ≤760px 隐藏，
      由左上角汉堡按钮唤出从左滑入的抽屉；电脑端完全不变。
   请放在所有样式表之后加载（</head> 前）。
   ============================================================ */

/* ---------- 通用基线（全宽屏幕均生效，安全无副作用） ---------- */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
*,*::before,*::after{ -webkit-tap-highlight-color: transparent; }
img,video,iframe,canvas,svg,object{ max-width:100%; height:auto; }
pre,code,.article-body pre{ max-width:100%; overflow:auto; -webkit-overflow-scrolling:touch; }

/* 刘海屏安全区：导航与页面底部留出凹槽空间（桌面 env() 为 0，无影响） */
.nav, .nav-in, .nav-inner{
  padding-top: max(11px, env(safe-area-inset-top));
}

/* ---------- 汉堡按钮（默认隐藏，仅手机端显示，由 nav-drawer.js 注入） ---------- */
.nav-toggle{
  display:none;
  position:fixed;
  top: calc(env(safe-area-inset-top) + 10px);
  left: 12px;
  z-index: 1100;            /* 高于抽屉(.nav z-index:1000)，打开后仍可点 X 关闭 */
  width:44px; height:44px;
  padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border:1px solid var(--nav-line, rgba(255,255,255,.12));
  border-radius:14px;
  background: var(--nav-glass, rgba(10,14,22,.9));
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span{
  display:block; width:20px; height:2px; border-radius:2px;
  background: var(--nav-fg, #eaf0f8);
  transition: transform .25s var(--nav-ease, cubic-bezier(.22,.61,.36,1)), opacity .2s;
}
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- 平板：≤1024px ---------- */
@media (max-width:1024px){
  .layout{ grid-template-columns:1fr !important; }
  .tiles{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* ---------- 手机：≤760px ---------- */
@media (max-width:760px){
  html,body{ overflow-x:hidden; }

  .wrap{
    padding: 60px 14px calc(72px + env(safe-area-inset-bottom));
  }

  /* 多列栅格统一堆叠为单列 */
  .hero{ grid-template-columns:1fr !important; padding-top:24px !important; }
  .hero h1{ font-size:clamp(28px, 8.5vw, 42px) !important; overflow-wrap:break-word; word-break:break-word; }
  .hero p{ max-width:none; }
  .grid{ grid-template-columns:1fr !important; }
  .stats{ grid-template-columns:1fr 1fr !important; }
  .layout{ grid-template-columns:1fr !important; }
  .split,
  .composer{ grid-template-columns:1fr !important; }
  .cards{ grid-template-columns:1fr !important; }
  .specs{ grid-template-columns:1fr !important; }
  .sidebar{ position:static !important; }

  /* 卡片内边距收敛 */
  .card .pad,
  .pad{ padding:18px !important; }

  /* iOS 输入框聚焦自动放大防护 */
  input,select,textarea{ font-size:16px; }

  /* 触控目标更大、主操作占满一行 */
  .nav .pill,.nav .button,.nav .icon-btn,
  .button,.pill,.filter,.tag,.btn,.fav{
    min-height:40px;
  }
  .hero .actions,
  .cta-row{
    display:flex; flex-wrap:wrap; gap:10px;
  }
  .hero .actions .button,
  .cta-row .button{
    flex:1 1 auto; justify-content:center; text-align:center;
  }

  /* 表格在手机上横向滚动而非压扁 */
  table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* ===== 手机端导航：左侧折叠抽屉，点开后选项纵向堆叠、占满宽度、不需右滑 ===== */
  .nav{
    position:fixed !important;
    left:0 !important; top:0 !important; bottom:0 !important;
    height:100vh !important;
    height:100dvh !important;
    z-index:1000;
    width:82%; max-width:300px;
    display:flex !important; flex-direction:column !important;
    transform: translateX(-100%) !important;
    animation:none !important;                 /* 关闭桌面 navDrop，避免覆盖抽屉位移 */
    transition: transform .3s cubic-bezier(.22,.61,.36,1);
    overflow-y:auto; overflow-x:hidden;        /* 禁止横向滚动，杜绝右滑 */
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
    border-right:1px solid var(--nav-line, rgba(255,255,255,.1));
    /* 抽屉用稳定实色半透明底；不再被液态玻璃的 url() 折射接管，杜绝错位亮色块 */
    background: var(--nav-glass, rgba(10,14,22,.92)) !important;
    backdrop-filter: blur(14px) saturate(165%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(165%) !important;
  }
  .nav-inner, .nav-in{
    flex-direction:column !important; align-items:stretch !important;
    flex-wrap:nowrap !important; gap:12px;
    width:100%; height:auto; min-height:100%;
    overflow:visible;
    /* !important：盖过各页面内联 @media(max-width:720px) 的 padding，保留顶部 62px 给汉堡留位 */
    padding: calc(env(safe-area-inset-top) + 62px) 16px calc(20px + env(safe-area-inset-bottom)) !important;
  }
  .nav .brand{ align-self:stretch; width:100%; }
  .nav .nav-links{
    flex-direction:column !important; align-items:stretch !important;
    flex-wrap:nowrap !important; justify-content:flex-start !important;
    overflow:visible !important; gap:6px; width:100%;
    /* 关键修复：盖过 nav.css @media(max-width:1100px) 的 order:5 / flex:1 1 100%，
       否则在 column 抽屉里链接会被挤到最底部，造成顺序错位 */
    order:0 !important; flex:1 1 auto !important;
  }
  .nav .nav-links a{ display:block; width:100%; text-align:left; padding:12px 14px; font-size:15px; }
  .nav .nav-actions{
    flex-direction:column !important; align-items:stretch !important;
    flex-wrap:nowrap !important; gap:10px; width:100%;
  }
  .nav .nav-back{
    display:inline-flex !important; align-items:stretch; width:100%;
    margin:2px 0 4px; padding:11px 14px; font-size:14px;
    color: var(--nav-fg, rgba(235,240,248,.92));
    border:1px solid var(--nav-line, rgba(255,255,255,.12));
    background: var(--nav-glass-2, rgba(255,255,255,.06));
  }
  .nav .nav-back:hover{
    background: rgba(47,139,255,.18);
    border-color: rgba(47,139,255,.45);
    color:#fff;
  }
  .nav .pill,.nav .button,.nav .icon-btn{ justify-content:flex-start; width:100%; min-height:44px; }
  .theme-dropdown{ width:100%; }
  .theme-dropdown .pill{ width:100%; }

  .nav-toggle{ display:flex; }

  /* 抽屉打开态 */
  body.nav-open{ overflow:hidden; }
  body.nav-open .nav{ transform:none !important; }
  body.nav-open::after{
    content:""; position:fixed; inset:0; z-index:150;
    background: rgba(3,6,12,.55);
  }
}

/* ---------- 超小屏：≤480px ---------- */
@media (max-width:480px){
  .wrap{ padding-left:12px; padding-right:12px; }

  .nav-toggle{ top: calc(env(safe-area-inset-top) + 8px); left:10px; }

  .nav .brand small{ display:none; }
  .nav-inner,.nav-in{ padding-left:10px; padding-right:10px; gap:8px; }
  .nav .brand b{ font-size:13px; }
  .nav .nav-links a{ padding:7px 7px; font-size:12.5px; }
  .nav .nav-actions{ gap:6px; }
  .nav .pill,.nav .button,.nav .icon-btn{ padding:7px 10px; font-size:12.5px; }

  .tiles{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; grid-auto-rows:160px !important; }
  .hero h1{ font-size:clamp(26px, 9vw, 36px) !important; }
}