/* ==========================================================================
   盘搜 · 移动端样式层（mobile-first 覆盖）
   设计基调：小红书风（玫红 #ff2442 + 白底大圆角 + 药丸按钮）
   规则：本文件只在 ≤768px 生效，桌面样式（style.css）完全不受影响
   触控规范：iOS HIG / Material —— 可点元素 ≥44×44、输入框 ≥16px 防缩放、
             底部留 safe-area	inset
   日期：2026-10-25　作者：王主任
   ========================================================================== */

/* ---------- 设计令牌（移动端专用） ---------- */
:root{
  --tap:44px;              /* 最小触控尺寸 */
  --m-gap:12px;            /* 卡片间距 */
  --m-pad:14px;            /* 页面左右留白 */
  --r-m:16px;              /* 移动端圆角 */
  --tab-h:56px;            /* 底部 Tab 高度 */
  --safe-b:env(safe-area-inset-bottom, 0px);
  --sk:linear-gradient(90deg,#f2f2f4 25%,#e9e9ee 37%,#f2f2f4 63%);
}

/* 只在移动端出现、桌面必须隐藏的元素 —— 默认值写在所有媒体查询之前，
   否则同优先级下会把后面 @media 里的 show 规则盖掉（踩过这个坑） */
.hd-burger{ display: none; }
.hots-more{ display: none; }
.pfp{ display: none; }
.mact{ display: none; }
.tabbar{ display: none; }

/* ==========================================================================
   1. 全局：底部 Tab 占位 / 防横向溢出 / 点击反馈
   ========================================================================== */
@media (max-width: 768px){
  html, body { overflow-x: hidden; }
  body{
    padding-bottom: calc(var(--tab-h) + var(--safe-b) + 6px);
    -webkit-tap-highlight-color: transparent;
  }
  .wrap{ padding: 0 var(--m-pad); }

  /* 按键统一：去掉 iOS 圆角变形和长按菜单 */
  button, .btn, .btnx, .go, a{ -webkit-touch-callout: none; }
  button:active, .btn:active, .btnx:active, .go:active{ transform: scale(.97); }

  /* 输入框 16px：低于 16px iOS 会自动放大整个页面，这是手机端最常见的坑 */
  input[type=text], input[type=search], textarea, select{ font-size: 16px !important; }
}

/* ==========================================================================
   2. 顶栏：瘦身 + 汉堡菜单（原 5 项导航在手机上会压成竖排单字）
   ========================================================================== */
@media (max-width: 768px){
  .hd{ position: static; }                 /* 手机上顶栏滚走，把空间让给搜索 */
  .hd .wrap{
    height: 54px; padding: 0 var(--m-pad);
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: nowrap; gap: 10px;
  }
  .brand{ font-size: 17px; gap: 8px; white-space: nowrap; }
  .brand img{ width: 27px !important; height: 27px !important; }
  .hd nav{ display: none; }                /* 桌面导航整条隐藏，收进抽屉 */

  .hd-burger{
    display: grid; place-items: center;
    width: var(--tap); height: var(--tap);
    border: 0; background: transparent; border-radius: 12px;
    font-size: 24px; line-height: 1; color: #2b2b2b; cursor: pointer;
    margin-right: -8px; font-weight: 600;
  }
  .hd-burger:active{ background: #f5f5f7; }
}

/* ==========================================================================
   3. 功能入口条：两行 → 一行横滑
   ========================================================================== */
@media (max-width: 768px){
  .entries{ padding: 8px 0 10px; }
  .entries .wrap{
    display: flex; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .entries .wrap::-webkit-scrollbar{ display: none; }
  .entries a{
    flex: 0 0 auto; min-width: 0; white-space: nowrap;
    min-height: var(--tap); display: flex; align-items: center;
    padding: 0 16px; font-size: 13px;
  }
}

/* ==========================================================================
   4. 公告条：单行省略，不换行占位
   ========================================================================== */
@media (max-width: 768px){
  .notice-bar .wrap{ padding: 8px var(--m-pad); gap: 7px; }
  .main > .notice-bar:first-child{ margin-top: -14px; }
  .notice-bar .nb-text{ font-size: 12px; }
  /* 公告条上的「详情 / ×」也必须够大，否则拇指点不中 */
  .notice-bar .nb-more{
    min-height: var(--tap); min-width: 52px; padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12.5px;
  }
  .notice-bar .nb-x{
    min-height: var(--tap); min-width: var(--tap);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; padding: 0;
  }
  .notice-bar .wrap{ align-items: center; }
}

/* ==========================================================================
   5. 首页首屏：搜索框必须落在首屏 1/3
   ========================================================================== */
@media (max-width: 768px){
  .main{ padding: 12px 0 28px; }
  .hero-card{
    padding: 18px 14px 16px; border-radius: var(--r-m);
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
  }
  .hero-card h1{ font-size: 18px; line-height: 1.4; margin-bottom: 6px; letter-spacing: -.3px; }
  .hero-sub{ font-size: 12px; margin-bottom: 14px; }

  /* 搜索框：输入 + 按钮两行，按钮通栏 46px（拇指最好按） */
  .sbox{
    display: grid; grid-template-columns: 1fr;
    gap: 0; border-radius: 14px; border-width: 1.5px; overflow: hidden;
    box-shadow: 0 3px 14px rgba(255,36,66,.10);
  }
  .sbox select{
    order: 2; width: 100%; height: var(--tap); border: 0; border-top: 1px solid #f2f2f2;
    font-size: 14px; background: #fbfbfc; text-align: left; padding: 0 14px;
  }
  .sbox input{ order: 1; height: 50px; font-size: 16px; padding: 0 14px; }
  .sbox button{
    order: 3; margin: 8px; height: 46px; font-size: 16px; border-radius: 999px;
    width: calc(100% - 16px);
  }

  /* 热词：默认两行，超出折叠 */
  .hots{
    margin-top: 14px; gap: 7px; justify-content: flex-start;
    max-height: 95px; overflow: hidden; position: relative;
  }
  .hots.expanded{ max-height: none; }
  .hots .lab{ font-size: 12px; }
  .hots a{ font-size: 12.5px; padding: 0 14px; min-height: var(--tap); min-width: var(--tap);
    display: inline-flex; align-items: center; justify-content: center; }
  .hots-more{
    display: flex; align-items: center; justify-content: center;
    width: 100%; margin: 6px auto 0; padding: 0; min-height: var(--tap);
    border: 0; background: transparent; color: #ff2442;
    font-size: 12.5px; font-weight: 600; font-family: inherit;
  }
  .tips{ margin-top: 14px; font-size: 11.5px; }
  .tips span{ margin: 0 5px; }
}

/* ==========================================================================
   6. 资源卡片（首页/资源库）：双列更紧凑，触控区加大
   ========================================================================== */
@media (max-width: 768px){
  .cards{ column-count: 2; column-gap: var(--m-gap); }
  .card{ margin-bottom: var(--m-gap); border-radius: 14px; box-shadow: 0 1px 6px rgba(0,0,0,.06); }
  .card:hover{ transform: none; box-shadow: 0 1px 6px rgba(0,0,0,.06); }
  .card .cov{ aspect-ratio: 4/3; }
  .card .bd{ padding: 9px 10px 10px; gap: 5px; }
  .card .ti{ font-size: 13px; line-height: 1.45; -webkit-line-clamp: 2; min-height: var(--tap); }
  .card .sub{ font-size: 11px; -webkit-line-clamp: 1; }
  .card .ft{ margin-top: 6px; }
  .card .hits{ font-size: 10.5px; }
  .card .go{
    min-height: var(--tap); padding: 0 14px; font-size: 12.5px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* 首页“发现资源”标题栏 */
  .hsec-hd{ gap: 8px; margin-bottom: 10px; }
  .hsec-hd span[style*="font-size:19px"]{ font-size: 17px !important; }
  .hsec-meta{ display: none; }
  .hsec-hd .more{ font-size: 12.5px; }

  /* 搜索空态：给一个明确出口，而不是一句“换个词试试” */
  table.list tr.row-empty{ display: block; padding: 30px 18px; }
  table.list td[colspan]{
    display: block !important; grid-column: 1 / -1; text-align: center;
    font-size: 13.5px; line-height: 1.8;
  }
  .empty-sub{ margin-top: 6px; font-size: 12px; color: #b6bdc9; }
  .empty-act{ margin-top: 16px; }
  .empty-act .btn{ min-height: var(--tap); padding: 0 28px; font-size: 14.5px; }

  /* 分类胶囊横滑 */
  .catrow, .cats{
    display: flex !important; flex-wrap: nowrap !important; gap: 8px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-bottom: 14px; padding-bottom: 2px;
  }
  .catrow::-webkit-scrollbar, .cats::-webkit-scrollbar{ display: none; }
  .catrow a, .cats a{ flex: 0 0 auto !important; white-space: nowrap; min-height: var(--tap);
    display: inline-flex; align-items: center; padding: 0 14px; }
}

/* ==========================================================================
   7. 搜索结果：表格 → 卡片（关键改造）
   原表格在手机上把操作列 display:none 掉了，用户根本看不到「获取」按钮
   ========================================================================== */
@media (max-width: 768px){
  .sform2-wrap{
    position: sticky; top: 0; z-index: 35;
    background: #f7f7f9;
    margin: 0 calc(var(--m-pad) * -1) 12px;
    padding: 8px var(--m-pad) 9px;
    border-bottom: 1px solid rgba(0,0,0,.045);
  }
  .sform2{ padding: 5px 5px 5px 13px; gap: 6px; border-radius: 999px; }
  .sform2 .sico{ font-size: 14px; }
  .sform2 input{ font-size: 16px !important; padding: 0; min-height: var(--tap); }
  .sform2 select{ max-width: 86px; font-size: 12.5px !important; padding: 0 8px; min-height: var(--tap); }
  .sform2 button{ min-height: var(--tap); padding: 0 18px; font-size: 14px; border-radius: 999px; }

  .res-head{ margin-bottom: 10px; gap: 4px; }
  .res-head h2{ font-size: 16px; line-height: 1.45; word-break: break-all; }
  .res-head .meta{ font-size: 11.5px; }

  /* 筛选 chips 横滑 */
  .filters{
    display: flex; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: 0 calc(var(--m-pad) * -1) 12px; padding: 0 var(--m-pad) 2px;
  }
  .filters::-webkit-scrollbar{ display: none; }
  .filters a{
    flex: 0 0 auto; white-space: nowrap; min-height: var(--tap);
    display: inline-flex; align-items: center; padding: 0 16px; font-size: 13px;
    box-shadow: 0 1px 4px rgba(0,0,0,.03);
  }

  /* 表格整体去壳 */
  .panel{
    background: transparent; border: 0; border-radius: 0; overflow: visible;
    box-shadow: none;
  }
  table.list{ display: block; width: 100%; }
  table.list thead{ display: none; }
  table.list tbody{ display: block; }

  /* 每一行 = 一张卡片 */
  table.list tr{
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas: "nm op" "tm op";
    align-items: center; gap: 2px 10px;
    background: #fff; border-radius: var(--r-m);
    padding: 13px 14px; margin: 0 0 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
  }
  table.list tr:hover td{ background: transparent; }
  table.list td{ display: block; padding: 0; border: 0; }

  table.list td:first-child{ display: none; }        /* 文件夹图标列，手机上去掉 */
  table.list td.nm{ grid-area: nm; max-width: none; }
  table.list td.nm .t{ font-size: 14px; line-height: 1.5; font-weight: 600; }
  table.list td.nm .t .rt{ border-bottom: 0; }
  table.list td.nm .s{ font-size: 11.5px; color: #a8a8a8; margin-top: 3px;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

  /* 关键：把被隐藏的操作列放回来，做成右侧 44px 主按钮 */
  table.list td.op,
  table.list th:nth-child(3),
  table.list td:nth-child(3){
    display: flex !important; grid-area: op; align-items: center; justify-content: flex-end;
  }
  table.list td.op .act{ display: block; }
  table.list td.op .btnx{
    min-height: var(--tap); min-width: 78px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; padding: 0 16px; border-radius: 999px;
  }
  table.list td.op .btnx.q{ box-shadow: 0 3px 10px rgba(255,36,66,.26); }

  table.list td.tm{ grid-area: tm; font-size: 11.5px !important; color: #a8a8a8 !important; }
  /* 手机卡片里时间放标题下面一行：先网盘小徽章，再“更新 日期” */
  table.list td.tm::before{ content: "更新 "; color: #c4c4c4; }
  .pfp{
    display: inline-block; font-size: 10.5px; line-height: 1.6;
    padding: 0 7px; border-radius: 99px; margin-right: 5px;
    vertical-align: 1px; font-weight: 600;
  }
  .pfp.q{ background: #fff0f2; color: #ff2442; }
  .pfp.b{ background: #fff5f0; color: #ff8a3d; }

  .pill{ font-size: 10.5px; padding: 2px 8px; }
}

/* ==========================================================================
   8. 骨架屏（搜索等待 4.8 秒必须有反馈）
   ========================================================================== */
.skel{ display: none; }
@media (max-width: 768px){
  .skel{ display: block; }
  .skel-card{
    background: #fff; border-radius: var(--r-m); padding: 14px;
    margin-bottom: 10px; box-shadow: 0 1px 6px rgba(0,0,0,.05);
    display: grid; grid-template-columns: minmax(0,1fr) auto;
    gap: 8px 12px; align-items: center;
  }
  .skel-l{ display: block; border-radius: 6px; background: var(--sk);
    background-size: 400% 100%; animation: skwave 1.3s ease infinite; }
  .skel-t1{ height: 15px; width: 88%; }
  .skel-t2{ height: 15px; width: 55%; }
  .skel-m{ height: 11px; width: 38%; }
  .skel-b{ width: 78px; height: var(--tap); border-radius: 999px; }
  @keyframes skwave{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }
}

/* ==========================================================================
   9. 详情页：去掉占屏的封面大图 + 底部固定操作栏
   ========================================================================== */
@media (max-width: 768px){
  .crumb{ font-size: 12px !important; margin-bottom: 10px !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* 详情页模板里有内联 <style>，同优先级下会盖掉本文件，故统一 !important */
  .dt{ display: block !important; }
  .dt .cover{ display: none !important; }   /* 那个 390px 高的文件夹图标纯浪费首屏 */
  .dt h1{ font-size: 19px !important; line-height: 1.45 !important; margin: 0 0 10px !important; letter-spacing: -.2px; }
  .dt .chips{
    display: flex !important; flex-wrap: nowrap !important; gap: 7px !important; margin-bottom: 14px !important;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .dt .chips::-webkit-scrollbar{ display: none; }
  .dt .chips span, .dt .chips a{ flex: 0 0 auto; font-size: 12px !important; padding: 0 12px !important;
    min-height: 32px; display: inline-flex; align-items: center; }
  .dt .sum{ font-size: 14.5px !important; line-height: 1.85 !important; margin-bottom: 18px !important; }
  .dt .buy{ display: none !important; }     /* 页内按钮让位给底部固定栏 */
  .dt .note{ font-size: 11.5px !important; }
  .panel.panel-dt{ padding: 16px 14px; border-radius: var(--r-m); }

  .rel{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px !important; }
  .rel a{ border-radius: 12px; }
  .rel .rn{ font-size: 12.5px !important; padding: 8px 10px !important; }
  .panel h3{ font-size: 15.5px; margin: 0 0 10px; }
}

/* 顶部/底部通用 .panel h3（桌面也有，放这里因为只给移动端调） */
@media (max-width: 768px){
  .panel{ }
}

/* ==========================================================================
   10. 详情页底部固定操作栏
   ========================================================================== */
.mact{ display: none; }
@media (max-width: 768px){
  .mact{
    display: flex; gap: 10px; align-items: center;
    position: fixed; left: 0; right: 0; z-index: 46;
    bottom: calc(var(--tab-h) + var(--safe-b));   /* 停在 Tab 栏上方，不互相遮挡 */
    padding: 9px var(--m-pad);
    background: #ffffff;
    border-top: 1px solid #f0f0f0;
    box-shadow: 0 -4px 18px rgba(0,0,0,.05);
  }
  body.has-mact{ padding-bottom: calc(68px + var(--tab-h) + var(--safe-b) + 6px); }
  .mact-main{
    flex: 1 1 auto; min-height: 48px; border: 0; border-radius: 999px;
    background: linear-gradient(135deg,#ff2442,#ff5b6e); color: #fff;
    font-size: 16px; font-weight: 800; font-family: inherit; cursor: pointer;
    box-shadow: 0 6px 18px rgba(255,36,66,.3);
    display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .mact-main:active{ transform: scale(.98); }
  .mact-2{
    flex: 0 0 auto; min-width: 64px; min-height: 48px;
    border: 1.5px solid #ffd5dd; border-radius: 999px; background: #fff;
    color: #ff2442; font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 4px;
  }
}

/* ==========================================================================
   11. 底部 Tab 栏（移动端专属）
   ========================================================================== */
.tabbar{ display: none; }
@media (max-width: 768px){
  .tabbar{
    display: grid; grid-template-columns: repeat(4,1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    height: calc(var(--tab-h) + var(--safe-b));
    padding-bottom: var(--safe-b);
    background: #ffffff;
    border-top: 1px solid #efeff2;
    box-shadow: 0 -2px 14px rgba(0,0,0,.045);
  }
  .tabbar a{
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; color: #9a9aa2; font-size: 10.5px; text-decoration: none;
    min-height: var(--tap); padding-top: 3px;
  }
  .tabbar a .ti{ font-size: 19px; line-height: 1; filter: grayscale(1) opacity(.55); transition: .15s; }
  .tabbar a .tl{ letter-spacing: .2px; }
  .tabbar a.on{ color: #ff2442; font-weight: 700; }
  .tabbar a.on .ti{ filter: none; transform: translateY(-1px); }
  .tabbar a:active{ background: #fff6f8; }
}

/* ==========================================================================
   12. 抽屉菜单（汉堡打开）
   ========================================================================== */
.sheet-mask{
  position: fixed; inset: 0; background: rgba(20,20,24,.42);
  display: none; z-index: 60; opacity: 0; transition: opacity .2s;
}
.sheet-mask.on{ display: block; opacity: 1; }
.sheet{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  background: #fff; border-radius: 20px 20px 0 0;
  padding: 8px 0 calc(10px + var(--safe-b));
  transform: translateY(102%); transition: transform .26s cubic-bezier(.2,.9,.3,1);
  max-height: 82vh; overflow-y: auto;
}
.sheet.on{ transform: translateY(0); }
.sheet::before{
  content: ""; display: block; width: 40px; height: 4px; border-radius: 99px;
  background: #e6e6ea; margin: 6px auto 10px;
}
.sheet h4{ margin: 6px 18px 8px; font-size: 12px; color: #a8a8b0; font-weight: 600; }
.sheet a, .sheet button.sh-item{
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 52px; padding: 0 18px; box-sizing: border-box;
  border: 0; background: transparent; text-align: left;
  font-size: 15.5px; color: #1a1a1a; font-family: inherit; cursor: pointer;
  border-bottom: 1px solid #f6f6f8;
}
.sheet a:last-child, .sheet button.sh-item:last-child{ border-bottom: 0; }
.sheet .si{ font-size: 18px; width: 22px; text-align: center; }
.sheet a:active, .sheet button.sh-item:active{ background: #fafafa; }
.sheet .sh-cancel{
  margin: 10px 14px 0; min-height: 50px; border-radius: 14px;
  background: #f5f5f7; color: #4a4a4a; font-weight: 700; font-size: 15px;
  border: 0; width: calc(100% - 28px); font-family: inherit; cursor: pointer;
}

/* ==========================================================================
   13. 分页 / 页脚 / 弹窗（移动端适配）
   ========================================================================== */
@media (max-width: 768px){
  .pager{ gap: 6px; padding: 16px 0 6px; }
  .pager a, .pager span{ min-width: var(--tap); height: var(--tap); padding: 0 10px; font-size: 13.5px; }

  footer{ margin-top: 18px; padding: 18px 0 22px; }
  footer h4{ font-size: 13px; }
  footer p{ font-size: 11.5px; }

  /* 弹窗改底部抽屉式，拇指可达 */
  .mask{ align-items: flex-end; padding: 0; }
  .mask.on{ display: flex; }
  .modal{
    border-radius: 22px 22px 0 0; max-width: 100%; width: 100%;
    padding: 22px 18px calc(20px + var(--safe-b));
    max-height: 88vh; overflow-y: auto;
    animation: mslide .24s cubic-bezier(.2,.9,.3,1);
  }
  @keyframes mslide{ from{ transform: translateY(30px); opacity: .6 } to{ transform: translateY(0); opacity: 1 } }
  .modal-x{ top: 8px; right: 10px; min-width: 40px; min-height: 40px; }
  .modal .row{ gap: 10px; }
  .modal .btn{ min-height: var(--tap); flex: 1; padding: 0 18px; font-size: 14.5px; }
  .modal input{ min-height: var(--tap); font-size: 16px !important; }

  /* 获取成功弹窗里的两个大按钮 */
  .btn-open{ min-height: 50px; font-size: 15.5px; }
  .btn-copy{ min-height: 46px; }
  .linkcard .lc-val{ font-size: 12px; }
  .linkcard .lc-code .n{ font-size: 24px; }
  .copied-tip{ font-size: 14px; padding: 12px 24px; }
}

/* ==========================================================================
   14. 资源库页（resources）：搜索框通栏、筛选横滑
   ========================================================================== */
@media (max-width: 768px){
  /* 该页搜索表单是行内样式写的固定 280px，手机上必须放开 */
  .main form[action="/resources"]{
    display: flex !important; gap: 8px !important; margin: 10px 0 12px !important;
  }
  .main form[action="/resources"] input[type=text]{
    width: 100% !important; flex: 1 1 auto; min-height: var(--tap);
    padding: 0 16px !important; font-size: 16px !important;
  }
  .main form[action="/resources"] .btn{
    flex: 0 0 auto; min-height: var(--tap); padding: 0 18px !important; font-size: 14px;
  }
}

/* ==========================================================================
   15. 无障碍 / 动效偏好
   ========================================================================== */
@media (max-width: 768px) and (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* 键盘 focus 可见（手机外接键盘 / 桌面调试也有用） */
@media (max-width: 768px){
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
    outline: 2px solid #ff2442; outline-offset: 2px;
  }
}

/* ==========================================================================
   16. 无障碍对比度（WCAG AA 4.5:1）
   注意：卡片/公告条的样式写在各模板的内联 <style> 里，位置在本文件之后，
   同优先级会盖掉这里，所以这一块必须用 !important
   ========================================================================== */
@media (max-width: 768px){
  .hero-sub{ color: #6b6b6b !important; }
  .tips{ color: #6b6b6b !important; }
  .hots .lab{ color: #6b6b6b !important; }
  .hots a.c0{ background: #fff0f2 !important; color: #c21730 !important; }
  .hots a.c1{ background: #fff5f0 !important; color: #c2410c !important; }
  .hots a.c2{ background: #f2f7ff !important; color: #1d4ed8 !important; }
  .hots a.c3{ background: #f0fbf6 !important; color: #047857 !important; }
  .hots a.c4{ background: #faf3ff !important; color: #7c3aed !important; }
  .hots a.c5{ background: #f5f7ff !important; color: #4338ca !important; }
  .hots-more{ color: #c21730 !important; }
  .hsec-hd .more{ color: #c21730 !important; }

  /* 公告条：粉色底上必须用更深的字 */
  .notice-bar .nb-text{ color: #a83350 !important; }
  .notice-bar .nb-more{ color: #b8253f !important; }

  /* 卡片次要文字：原 #9b9b9b(2.77) / #c0c0c0(1.81) 都不达标 */
  .card .sub{ color: #6b6b6b !important; }
  .card .hits{ color: #6b6b6b !important; }

  /* 主色白字：#ff2442 只有 3.76:1，压深到 #e51e3a = 4.59:1 */
  .sbox button, .sform2 button, .card .go, .empty-act .btn, .modal .btn{
    background: #e51e3a !important;
  }
  .card .go.ready{ background: #047857 !important; }
  table.list td.op .btnx.q{ background: #e51e3a !important; }
  .filters a.on, .catrow a.on, .cats a.on{ background: #e51e3a !important; border-color: #e51e3a !important; }
  .tabbar a.on{ color: #d81b38 !important; }
  .mact-main{ background: linear-gradient(135deg,#e51e3a,#e8384f) !important; }
  footer p, .dt .note, .res-head .meta{ color: #6b6b6b !important; }

  /* 抽屉标题（h4 改 h2 后保持视觉一致） */
  .sheet h2{ margin: 6px 18px 8px; font-size: 12px; color: #6b6b6b; font-weight: 600; }
}

/* ==========================================================================
   17. 卡片列表改 CSS Grid（原来是 column-count 瀑布流）
   多列布局在图片加载后会整体重排，是 CLS 和布局耗时的主要来源
   ========================================================================== */
@media (max-width: 768px){
  .cards{
    column-count: unset !important; column-gap: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--m-gap);
    align-items: start;
  }
  .card{ display: block !important; margin: 0 !important; }
}

/* ==========================================================================
   18. 屏外卡片延迟渲染（第二版性能优化）
   content-visibility 让浏览器跳过视口外卡片的布局与绘制；
   不支持的老浏览器自动忽略，无副作用
   ========================================================================== */
@media (max-width: 768px){
  .card{
    content-visibility: auto;
    contain-intrinsic-size: auto 230px;
  }
  /* 首屏第一行不延迟，保证 LCP */
  .card:nth-child(-n+4){ content-visibility: visible; }
}

/* ==========================================================================
   19. 对比度收尾（第二版）
   ========================================================================== */
@media (max-width: 768px){
  .friend p{ color: #5f6672 !important; }        /* 站内说明，模板里是内联样式 */
  footer .cr{ color: #6b6b6b !important; }       /* 版权行 #c8c8c8 只有 1.67:1 */
  .tabbar a{ color: #5f5f68 !important; }        /* 未选中 Tab 文字 */
  .tabbar a.on{ color: #d81b38 !important; }
}