/* ============================================================
   8FO.COM Global Responsive Overlay  v1.0  2026-08-18
   适配手机(≤480) / 大屏手机(≤760) / 平板iPad(≤1024) / 桌面
   覆盖 v3 列表页 / v4 详情页 / v5 注册页 / 会员中心 / 超级后台
   ============================================================ */

/* ---- 0. 基础加固（所有宽度） ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{overflow-x:clip}
img,svg,video,iframe,canvas{max-width:100%;height:auto}
img{-max-width:100%}
pre,code{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
a,button,input,select,textarea{-webkit-tap-highlight-color:rgba(11,95,255,.15)}
input,select,textarea{font-size:16px}           /* iOS 聚焦不缩放 */
*{scrollbar-width:thin}
.table-scroll,.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* 跑马灯/滚动条容器：轨道超长必须裁剪 */
.ticker{max-width:100%;overflow:hidden;white-space:nowrap}

/* ---- 1. 平板 iPad（481–1024）：两栏收一栏的空间预留 ---- */
@media (max-width:1024px){
  .wrap{padding:0 16px}
  .hbar{gap:14px}
  .main{height:320px}
  .hrow{gap:16px}
  /* 语言栏在平板即允许横滑，防止溢出 */
  .langs{overflow-x:auto;flex-wrap:nowrap;max-width:100%;scrollbar-width:none}
  .langs::-webkit-scrollbar{display:none}
  .langs a{flex-shrink:0}
}

/* ---- 2. 手机横屏 / 大屏手机（≤760） ---- */
@media (max-width:760px){
  .wrap{padding:0 14px}
  /* 顶栏导航：允许横向滑动而不是溢出 */
  .hbar{overflow-x:auto;flex-wrap:nowrap;height:auto;min-height:52px;
        -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .hbar::-webkit-scrollbar{display:none}
  .hbar a{flex-shrink:0;padding:10px 2px}
  .langs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .langs::-webkit-scrollbar{display:none}
  .langs a{flex-shrink:0}
  /* 面包屑/工具条滑动 */
  .crumb,.toolbar{overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  .crumb::-webkit-scrollbar,.toolbar::-webkit-scrollbar{display:none}
  /* 表格：整体横向滚动 */
  table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  thead th{white-space:nowrap}
  /* 首图降高 */
  .main{height:230px;border-radius:8px}
  .hero{padding:26px 14px}
  .hrow{gap:10px}
  /* 两列表单单列 */
  .form2{grid-template-columns:1fr !important}
  /* 通用网格最小列宽收紧 */
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)) !important;gap:12px}
  .kv{grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important}
  /* 页脚多栏折两栏 */
  .fcols{grid-template-columns:repeat(2,1fr) !important;gap:16px}
  /* 触控目标加大 */
  .btn,button{min-height:42px}
  .btn.sm,button.sm{min-height:34px}
  a{touch-action:manipulation}
  /* 卡片内边距收紧 */
  .card{padding:14px}
  .stat{padding:12px}
  /* 抽屉/弹层全宽 */
  .drawer{width:100% !important;max-width:100% !important}
  .box{max-width:100% !important}
}

/* ---- 3. 小屏手机（≤480） ---- */
@media (max-width:480px){
  html{font-size:15px}
  .wrap{padding:0 12px}
  .main{height:190px}
  .hero{padding:20px 12px}
  .grid{grid-template-columns:1fr 1fr !important;gap:10px}
  .fcols{grid-template-columns:1fr 1fr !important}
  .stat{padding:10px}
  .btn{width:auto;min-height:44px;font-size:14.5px}
  h1{font-size:1.45em}
  h2{font-size:1.22em}
  h3{font-size:1.08em}
}

/* ---- 4. 超小屏（≤360） ---- */
@media (max-width:360px){
  .grid{grid-template-columns:1fr !important}
  .fcols{grid-template-columns:1fr !important}
}

/* ---- 5. 桌面大屏优化（≥1600）：内容容器适度放宽 ---- */
@media (min-width:1600px){
  .wrap{max-width:1280px}
}

/* ---- 6. 打印 ---- */
@media print{
  .hbar,.side,.toolbar,.langs,.btn,button{display:none !important}
  .wrap{max-width:100%;padding:0}
  body{overflow:visible}
  .card{border:1px solid #ddd;box-shadow:none}
}

/* ---- 7. 动效偏好 ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important}
}