/* ============================================================
   AI梦工厂 · 移动端统一视觉层 v1  (2026-09-26)
   作用域：仅 <=768px 手机屏。后置注入（在页面内联 <style> 之后）
   目标：间距紧凑 / 分区清晰 / 触控友好 / 安全区适配
   约束：不改任何功能、接口、文案、JS 逻辑
   ============================================================ */
@media (max-width: 768px) {
  :root{
    --m-pad:12px;      /* 容器内边距 */
    --m-gap:10px;      /* 区块间距 */
    --m-r:14px;        /* 卡片圆角 */
    --m-brand:#1F5AE0;
    --m-brand2:#6ea8ff;
    --m-line:rgba(148,163,184,.26);
    --m-shadow:0 2px 10px rgba(15,23,42,.07);
  }
  html{ -webkit-text-size-adjust:100%; }
  /* 底部导航占位 + iPhone 安全区 */
  body{ font-size:14px; line-height:1.55;
        padding-bottom:calc(62px + env(safe-area-inset-bottom,0px)) !important; }

  /* ---------- 1. 容器：左右留白收紧 ---------- */
  .wrap,.container,.main,.content,.page,.section,.sec,.inner,.shell,.body-inner{
    padding-left:var(--m-pad) !important;
    padding-right:var(--m-pad) !important;
  }
  .main,.content,.page,.sec,.body-inner{ padding-top:12px !important; padding-bottom:14px !important; }
  .header{ padding-top:10px !important; padding-bottom:10px !important; }

  /* ---------- 2. 字号阶梯：标题收敛，一屏看更多 ---------- */
  h1,.title,.hero h1,.hero-title,.ac-hero,.auth-brand,.page-title{
    font-size:20px !important; line-height:1.3 !important; margin-bottom:10px !important;
  }
  h2,.sub-hero,.subtitle,.sec-sub{ font-size:17px !important; line-height:1.35 !important; margin-bottom:8px !important; }
  h3{ font-size:15px !important; line-height:1.4 !important; margin-bottom:6px !important; }
  p,.desc,.tip,.note{ font-size:14px !important; line-height:1.6 !important; }
  small,.meta,.sub-info,.time{ font-size:12px !important; }

  /* ---------- 3. 分区标题：左侧色条，区块一眼可辨 ---------- */
  .sec-title,.section-title,.panel-t,.block-title,.sec-h{
    position:relative; padding-left:11px !important;
    font-size:16px !important; font-weight:700 !important;
    margin:14px 0 8px !important;
  }
  .sec-title::before,.section-title::before,.panel-t::before,.block-title::before,.sec-h::before{
    content:""; position:absolute; left:0; top:.22em; bottom:.22em;
    width:3px; border-radius:2px; background:var(--m-brand);
  }

  /* ---------- 4. 卡片统一：圆角 + 细边 + 轻阴影 ---------- */
  .card,.stat-card,.panel,.section,.vcard,.pbox,.charcard,.projcard,
  .pricing-card,.auth-card,.comm,.merch,.box,.shot,.fitem,.feature,
  .platform-card,.plan-card,.work-card,.gate-card,.codebox,.refbox,.up-zone,.empty{
    border-radius:var(--m-r) !important;
    padding:var(--m-pad) !important;
    margin-bottom:var(--m-gap) !important;
    box-shadow:var(--m-shadow) !important;
  }

  /* ---------- 5. 栅格：只收间距，不动列数（避免破坏原布局） ---------- */
  [class*="grid"],.feed,.feats,.flow,.channels,.agents,.agent-grid,
  .thumb-grid,.mgrid,.vgrid,.stat-grid,.platform-grid,.feature-grid,.frames{
    gap:10px !important;
  }
  /* 超大卡片类栅格在手机上强制单列，避免横向挤压 */
  .platform-grid,.pricing-grid,.plan-grid,.agent-grid,.agents{
    grid-template-columns:1fr !important;
  }

  /* ---------- 6. 触控规范：按钮/输入 44px，输入 16px 防 iOS 缩放 ---------- */
  .btn,.btn-primary,.btn-ghost,.use-btn,.sub-btn,.back-btn,button,
  input[type=submit],input[type=button],.seg,.tab,.chip{
    min-height:44px !important;
  }
  input,select,textarea,.chat-input{
    font-size:16px !important;
    min-height:44px !important;
    border-radius:12px !important;
  }
  select,.seg{ height:44px !important; }
  .btn,.btn-primary,.btn-ghost,.use-btn{ border-radius:12px !important; }

  /* ---------- 7. 大图标 / 大图收敛 ---------- */
  .platform-icon,.feat-icon,.icon-big,.hero-icon,.empty-icon{
    font-size:38px !important; line-height:1 !important; margin-bottom:8px !important;
  }
  .sec-banner{ border-radius:12px !important; margin:6px 0 14px !important; }
  .avatar,.user-avatar{ width:44px !important; height:44px !important; }

  /* ---------- 8. 底部快捷导航 ---------- */
  .m-tabbar{
    position:fixed !important; left:0; right:0; bottom:0; z-index:9998;
    display:flex !important; align-items:stretch;
    background:rgba(11,17,32,.94);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-top:1px solid rgba(255,255,255,.1);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .m-tabbar a{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    height:56px; gap:3px;
    color:#93a2bb; text-decoration:none; font-size:11px; font-weight:600;
    -webkit-tap-highlight-color:transparent;
  }
  .m-tabbar a svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2;
                   stroke-linecap:round; stroke-linejoin:round; }
  .m-tabbar a.on{ color:var(--m-brand2); }
  .m-tabbar a.on svg{ stroke:var(--m-brand2); }

  /* ---------- 9. 与导航共存的悬浮元素 ---------- */
  .toast{ bottom:calc(74px + env(safe-area-inset-bottom,0px)) !important; }
  .badgever{ display:none !important; }   /* 调试角标在手机上遮挡内容 */
  .back-to-top,.float-btn{ bottom:calc(70px + env(safe-area-inset-bottom,0px)) !important; }

  /* ---------- 10. 防横向溢出兜底 ---------- */
  html,body{ max-width:100% !important; overflow-x:hidden !important; }
  img,video,canvas{ max-width:100% !important; }
  pre,code,.mono,.hash,.addr,.copy-text{ word-break:break-all !important; overflow-wrap:anywhere !important; }
  pre{ white-space:pre-wrap !important; }
  table{ display:block !important; width:100% !important;
         overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
}

/* 平板/桌面：底部导航不出现 */
@media (min-width: 769px){
  .m-tabbar{ display:none !important; }
}