/* 移动端响应式：仅 <=768px 手机区间生效，其余宽度一律走原版桌面布局。
   g2x：把堆叠断点从 1158 收回 768——980/1024 这类"宽屏"（手机浏览器电脑版模式）
   直接按原版 PC 布局渲染（固定 1158 设计宽，由浏览器自行缩放/横向滚动），
   不再做半流体重排，避免两边都不像 */
@media (max-width: 768px) {
  /* 容器流体三件套（手机上收窄到屏幕宽，勿删——删了 #logo_bar 会保持 1158 固定宽被裁切发黑） */
  .global_wrap { width: 100%; max-width: 1158px; }
  #logo_bar { width: 100%; max-width: 1158px; }
  .footer { width: 100%; max-width: 1158px; }
  .middle_wrap .wrap,
  .middle_wrap #lsidebar,
  #rsidebar,
  .middle_wrap .content {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    position: static !important;
  }
  .program .main .col1,
  .program .main .col2,
  .program .main .col3 {
    float: none !important;
    width: 100% !important;
  }
  /* 右栏(广告/评论)是 .global_wrap 直接子元素，堆叠后跑到正文前面——用 flex 排到正文之后 */
  .global_wrap { display: flex; flex-direction: column; }
  .global_wrap > .middle_wrap { order: 1; }
  .global_wrap > #rsidebar { order: 2; }
  /* 卡片紧凑排版：col1 整行(logo+状态徽章)，col2/col3 双栏并排，高度砍半 */
  /* g2k：col1 改块级流——缩略图在上，大 PAYING 状态牌贴合缩略图正下方；
     我们自己加的 ms-badge 徽章行(mon-status-line)绝对定位到卡片右上角 */
  .program .main { position: relative; }
  .program .main .col1 { display: block !important; text-align: left; }
  .program .main .col1 > a:first-child { display: inline-block; vertical-align: top; }
  /* g3l：手机端去掉缩略图下的大状态牌（.status），只保留右上角 ms-badge 徽章 */
  .program .main .col1 .status { display: none; }
  /* 状态牌图形在背景里固定偏移 28px（桌面栏宽 156 专用），手机上与缩略图错位——归零贴左对齐 */
  .program .main .col1 .status.status1,
  .program .main .col1 .status.status2,
  .program .main .col1 .status.status3,
  .program .main .col1 .status.status4,
  .program .main .col1 .status.status5 { background-position: center center; padding-left: 0; }
  /* g2n：ms-badge 徽章在缩略图右侧区域(125px 图宽之外)上下左右居中 */
  .program .main .mon-status-line {
    position: absolute; top: 5px; right: 9px; left: auto; height: auto;
    display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
    margin: 0; max-width: none;
  }
  .program .main .col2 { float: left !important; width: 55% !important; box-sizing: border-box; }
  .program .main .col3 { float: left !important; width: 45% !important; box-sizing: border-box; }
  /* g2o：移动端每张卡片加虚线边框（含下方 fmenu 操作条，框成一张完整卡片） */
  .program {
    border: 2px dashed #9fc4ae !important;
    border-bottom: none !important;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    margin-bottom: 0 !important;
  }
  .program + .clearall { display: none; }
  .fmenu {
    border: 2px dashed #9fc4ae !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px;
    margin: 0 0 14px;
  }
  .program .main .col2 > div, .program .main .col3 > div { word-break: break-word; }
  /* g3e：卡片主体改 Grid——col1 独占一行，col2/col3 并排两栏；
     支付方式/特性图标行与投资计划文字（已由模板移到 .main 末尾）各占整行；
     底色统一上移到 .main，三块内容同色 */
  .program .main {
    display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    column-gap: 10px; align-items: start;
    background: #f4f5f3 url(../images/col1bg.png) repeat-x bottom;
  }
  .program .main::after { display: none; }
  .program .main .col1 { grid-column: 1; grid-row: 1; float: none; background: transparent; }
  .program .main .col2 { grid-column: 1; grid-row: 2; float: none; width: auto !important; background: transparent; }
  /* g3g：右栏（最小投资那块）上提到卡片顶部，与 logo 并排；下方留出徽章高度
     g3h：右栏拉伸铺满跨行区域，内容整体贴底（底部与左栏对齐），多余空白留在顶部 */
  .program .main .col3 {
    grid-column: 2; grid-row: 1 / span 2; float: none; width: auto !important;
    background: transparent; padding-top: 26px;
    align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end;
  }
  .program .main .col3 > .clearall { display: none; }
  /* g3j：program.css 给 col2/col3 设了 min-height:150px/152px，手机上内容不够高时
     底部会空出一块（红框区域）——去掉最小高度，两栏底边才能真正对齐 */
  .program .main .col1,
  .program .main .col2,
  .program .main .col3 { min-height: 0 !important; }
  /* g3m：状态牌去掉后 logo 栏不再需要 152px 最小高度，按内容收缩消除空白 */
  .program .main .col1 { min-height: 126px !important; }
  .program .main > div:not([class]) { grid-column: 1 / -1; grid-row: 3; }
  .program .main > .percents { grid-column: 1 / -1; grid-row: 4; margin-top: 6px; }
  .program .main .percents p { font-size: 16px !important; margin: 6px 14px; line-height: 1.7; }
  /* g3f：投资方式回到中间栏，SSL/盾牌紧跟最后一个支付图标（同一行内流）
     g3g：恢复图标原尺寸 19px（不再压缩），折行由浏览器自然处理 */
  .program .paysystems { display: inline; }
  .program .options { display: inline; white-space: nowrap; }
  .home-intro .home-h1 { font-size: 18px; }
  .home-intro p { font-size: 13px; }
  #nav { width: 100%; margin-left: 0; }
  #logo { width: 100% !important; max-width: 490px; background-size: contain !important; background-repeat: no-repeat !important; }
  #logo_bar { height: auto; min-height: 90px; padding: 8px 0; }
  a[href*="/lang"] { display: none !important; }
  .ad img, .banner img, .textad img { max-width: 100% !important; height: auto !important; }
  /* 防溢出三件套：老模板固定宽度元素在手机上把布局视口撑到 1158px 导致整页错乱 */
  html, body { overflow-x: hidden !important; }
  .global_wrap > table { max-width: 100% !important; width: auto !important; }
  marquee { width: 100% !important; }
  .banner.solidbig, .banner.solidbig .ad.clearfix, .banner.solidbig .info { width: auto !important; max-width: 100% !important; }
  .banner.solidbig .adlink, .banner.solidbig a.adlink { width: auto !important; max-width: 100% !important; margin: 0 !important; }
  .banner.solidbig .adlink img, .banner.solidbig a.adlink img { width: 100% !important; max-width: 100% !important; height: auto !important; }
  .content { box-sizing: border-box; max-width: 100% !important; padding-left: 6px; padding-right: 6px; }
  .list, .program, .program .main { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
  .program .title { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
  .program .main .col1 img { max-width: 100% !important; height: auto !important; }
  .program .title a.name { white-space: normal; word-break: break-word; }
  .content table { max-width: 100% !important; }
  .content table td { word-break: break-word; }
  /* ===== 卡片操作菜单修复(g2h)：.fmenu 是 .program 的兄弟节点，原 CSS 高度写死 25px，
     ul 实际 52px，换行后的第二行链接(Whois/Report Scam/Get Code/Bookmark)溢出压到下一张卡标题上 ===== */
  .fmenu { height: auto !important; overflow: visible !important; clear: both !important; }
  .fmenu ul { display: flex; flex-wrap: wrap; height: auto !important; margin: 0; padding: 4px 2px; list-style: none; }
  .fmenu ul li { float: none !important; display: block; }
  .fmenu ul li a { padding: 3px 6px; }
  /* 顶部导航同样固定高度，第二行菜单(Advertise/Directory/Support)会压到首页 H1 上；
     手机/平板无悬停，下拉子菜单直接收起。header_menu 容器在 header.css 写死 height:54px，
     换行后必须放开，否则溢出的菜单压到正文 */
  .header_menu { height: auto !important; }
  .header_menu ul#nav { height: auto !important; overflow: visible !important; display: flex; flex-wrap: wrap; }
  .header_menu ul#nav > li { float: none !important; }
  .header_menu ul#nav ul.categories { display: none !important; }
  /* col1 在 363px 卡内实测 369px 轻微超宽，补盒模型 */
  .program .main .col1 { box-sizing: border-box; }
  /* g3a 起卡片主体走 Grid，浮动 clearfix 与 ::after 占位都不再需要 */
}

/* ===== 移动端(<=768px)纯净模式：隐藏广告与干扰，只留项目列表，PC 完全不受影响 ===== */
@media (max-width: 768px) {
  /* 顶部广告位（leaderboard / box / skyscraper 占位广告） */
  #banner,
  .banner.rotating,
  .banner.solidbig,
  .banner.rotatingbig,
  .banner.solid,
  .banner.textads,
  .adlink,
  .ad.clearfix,
  .textad { display: none !important; }
  /* 右侧栏整体（广告 + 评论区 + 投票 widget）全部隐藏 */
  #rsidebar { display: none !important; }
  /* 语言切换小旗等次要元素 */
  a[href*="/lang"] { display: none !important; }
  /* ===== 纯净模式 g2h：左栏(最新项目/返佣排行/投票)也隐藏，真正做到只剩项目列表 ===== */
  #lsidebar { display: none !important; }
  /* 滚动公告与顶部装饰表格 */
  marquee { display: none !important; }
  .global_wrap > table { display: none !important; }
  /* 站内搜索框上方的头部菜单在纯净模式下收敛为一行，减少干扰但保留核心导航 */
  .header_menu { padding-bottom: 4px; }
  /* 20261026：风险提示已从首屏移到页脚，手机端必须保留，改为紧凑样式 */
  .disclimer {
    display: block !important;
    margin: 8px 6px 0;
    padding: 12px 12px !important;
    font-size: 12px;
    line-height: 1.7;
  }
  /* g2r：页脚背景是两张横向图带，手机端版权文字换行后压在浅色带上看不清——改纯色深绿 */
  .footer {
    background: #1b4933 !important;
    min-height: 0 !important;
    padding-bottom: 10px;
  }
  .footer .copyright {
    background: transparent;
    padding: 14px 10px;
    line-height: 1.9;
  }
  .footer .copyright font,
  .footer .copyright b { color: #f4f7f4 !important; }
  .footer .copyright font[color='#f4ab00'] { color: #f4ab00 !important; }
  .footer .copyright a { color: #f4ab00 !important; }
  /* g2s：搜索框左右居中（原内联 150px 宽左对齐） */
  .header_menu .search { width: 100% !important; text-align: center; margin: 6px 0 2px; }
  .header_menu .search form { display: inline-block; margin: 0; }
  /* g2s：去掉右下角 TOP 按钮（内联锚点 a[href="#top"]） */
  a[href="#top"] { display: none !important; }
  /* g2t：手机端 logo 缩小居中（原 float:left + 490px 太宽）；g2y 再放大一档 72%/340px */
  #logo_bar { text-align: center; }
  #logo { float: none !important; display: inline-block; width: 72% !important; max-width: 340px; vertical-align: top; }
}

/* ===== g3e 桌面端（>=769px）：图标行与投资计划整行贯通 + 统一底色 =====
   percents / paysystems / options 已由 program_details.tpl 移到 .main 末尾（col3 之后）；
   这里把三栏改成 Grid（宽度沿用 program.css 原值 164/348/156），
   图标行与计划文字各占整行，列背景上移到 .main 统一底色 */
@media (min-width: 769px) {
  .program .main {
    display: grid;
    grid-template-columns: 164px 314px 190px;
    /* g3n：去掉 g3k 的 align-items:end——它把内容矮的栏整体压到行底，照片和徽章上方漏出空白。
       改为默认 stretch（三栏盒子等高撑满行），内容各自锚定：
       照片贴顶(col1)、徽章贴顶(col2)、状态牌紧跟缩略图下方(col1 内 flex-start)、右栏统计贴底(col3 flex-end)，
       底部对齐虚线的效果保持不变 */
    background: #f4f5f3 url(../images/col1bg.png) repeat-x bottom;
  }
  .program .main .col1 {
    grid-column: 1; grid-row: 1; float: none; width: auto; background: transparent;
    /* g3n：col1 拉伸到行高，logo 贴顶、PAYING 状态牌贴底（与虚线对齐） */
    display: flex; flex-direction: column; justify-content: flex-start;
  }
  /* g3p：g3n 把 col1 改成 flex 列后，原 text-align:center 失效、缩略图被挤成左对齐（align-self:flex-start）。
     这里让 <a> 在列内水平居中，缩略图与限宽 125px 居中状态牌左缘一致，二者真正居中对齐 */
  .program .main .col1 a { align-self: center; }
  /* g3o：状态牌相对缩略图左右居中——program.css 把牌面 gif 写死在 28px（156 栏宽专用），
     而图片 125px 是 text-align:center 居中的（左缘距栏约 16px），两者错位约 11px。
     改为：状态牌限宽 125px 与图片同宽、栏内居中，牌面 gif 在 125px 内居中 */
  /* g3q→fix11：用户要求状态牌紧跟缩略图正下方并左右居中，不再贴卡片底 */
  .program .main .col1 .status {
    width: 125px; align-self: center; padding-left: 0;
    background-position: center center; margin-top: 4px;
  }
  /* g3s：中间栏内容整体下沉贴底（用户指定，不要分散对齐）——
     内容块底部对齐虚线，空白集中在顶部；投资方式与 PAYING 牌底部同线 */
  .program .main .col2 {
    grid-column: 2; grid-row: 1; float: none; width: auto; background: transparent;
    display: flex; flex-direction: column; justify-content: flex-end;
  }
  /* g3t：徽章行钉在顶部（参考 Marsses 卡效果），数据行保持整体贴底，
     徽章与数据行之间的空隙由 auto margin 吸收 */
  .program .main .col2 .mon-status-line { margin-bottom: auto; }
  .program .main .col3 {
    grid-column: 3; grid-row: 1; float: none; width: auto; background: transparent;
    /* g3n：右栏内容贴底，底部与虚线对齐（同 g3k 效果，但盒子拉伸不再整体下移） */
    display: flex; flex-direction: column; justify-content: flex-end;
  }
  .program .main > div:not([class]) { grid-column: 1 / -1; grid-row: 2; }
  .program .main > .percents { grid-column: 1 / -1; grid-row: 3; }
  .program .main > .percents p { margin: 8px 16px; }
  /* g3f：投资方式在中间栏内，SSL/盾牌紧跟最后一个支付图标（同一行内流）
     g3g：恢复图标原尺寸 19px */
  .program .paysystems { display: inline; }
  .program .options { display: inline; white-space: nowrap; }
}

/* ===== g3u：投资计划文字参考 hyip.biz 详情页样式 =====
   原 <b>+12pt 内联样式已从模板移除；这里统一为常规字重、14px、深灰，
   "Plans: " 前缀砖红色加粗（PC 与手机共用） */
.program .percents p {
  font-weight: normal !important;
  font-size: 16px !important;
  color: #333 !important;
  line-height: 1.65;
}
.program .percents .plans-label {
  font-size: 18px !important;
  color: #c0503a;
  font-weight: bold;
}