/* ===================================================================
   喵呜中文网 · 起点手机端样式对齐层  (qidian-mobile.css)  v2
   -------------------------------------------------------------------
   来源：44 张起点 Android 真机截图（1264×2780，DPR≈3.24，逻辑宽 390）
        规格文档 /root/astra/r9/ref/分类映射.md

   接入：nginx sub_filter 全站注入 + /var/www/miaowu/*.html 静态引用
   生效：仅 ≤560px。桌面端零改动。

   ★ v2 修正：v1 用的是「推测」类名（.book-img/.book_name/.tj_bar），
     与本站真实 DOM（.book-card .cover/.t/.a/.desc、.sec-card、.grid5）不符，
     导致样式大面积落空。本版全部按真实类名重写。

   Token（从截图量取）：
     页面底 #F5F5F5 / 卡片 #FFF / 圆角 8px / 封面 4px
     主色 #ED4259 / 胶囊 999px / 列表无分割线
     标题 17px 600 / 正文 15px / 元数据 13px #999
   =================================================================== */

@media (max-width: 560px) {

  /* ============ 1. 全局 ============ */
  html, body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: #f5f5f5 !important;
    color: #333 !important;
  }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
                 "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 15px !important;
    padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px) + 10px) !important;
    -webkit-text-size-adjust: 100%;
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

  .wrap, .box_center, .box, .w1000, .w1020 {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  a { text-decoration: none; }

  /* 隐藏 PC 顶条 */
  .topbar { display: none !important; }

  /* ============ 2. 顶栏（截图形态 A） ============ */
  .header {
    background: #fff !important;
    padding: 0 !important;
    border-bottom: none !important;
  }
  .header .wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 10px 16px 0 !important;
  }
  /* --- 第一行 --- */
  .logo {
    order: 1;
    width: auto !important;
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    margin-right: 10px;
  }
  .logo img {
    width: 26px !important; height: 26px !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    display: block;
  }
  .logo .name { margin-left: 6px !important; }
  .logo .name b {
    font-size: 17px !important;
    letter-spacing: 0 !important;
    color: #ed4259 !important;
    font-weight: 800 !important;
    font-family: inherit !important;
    line-height: 1 !important;
    display: block;
  }
  .logo .name i, .logo i, .logo .sub { display: none !important; }

  /* 男生 / 女生 胶囊分段 */
  .qd-seg {
    order: 2;
    flex: none !important;
    display: inline-flex !important;
    align-items: center;
    background: #ededed !important;
    border-radius: 999px !important;
    padding: 3px !important;
    margin: 0 !important;
    height: 28px;
  }
  .qd-seg a {
    display: inline-block !important;
    font-size: 13px !important;
    line-height: 22px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    color: #666 !important;
    font-weight: 400 !important;
    background: transparent !important;
    transition: none !important;
    vertical-align: middle;
  }
  .qd-seg a.on {
    background: #fff !important;
    color: #333 !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.10) !important;
  }
  .qd-seg a:hover { color: #666 !important; }

  /* 打开App 胶囊 */
  .apps {
    order: 3;
    width: auto !important;
    flex: none !important;
    margin-left: auto !important;
    text-align: right !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }
  .apps img { display: none !important; }
  .apps::after {
    content: '打开App';
    display: inline-block;
    background: linear-gradient(90deg, #ff5c7a, #ed4259);
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 500;
  }

  /* 搜索框：第二行独占，通栏胶囊 */
    .search {
    order: 4;
    flex: 0 0 100% !important;
    width: 100% !important;
    padding: 9px 0 11px !important;
    margin: 0 !important;
  }
  .search .box {
    display: flex !important;
    align-items: center;
    background: #f0f0f0 !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 0 14px !important;
    height: 34px !important;
    width: 100% !important;
  }
  .search .box::before {
    content: '';
    flex: none;
    width: 15px; height: 15px;
    margin-right: 8px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .search input {
    flex: 1 !important;
    width: auto !important;
    height: 34px !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: 14px !important;
    color: #333 !important;
    min-width: 0;
    outline: none !important;
  }
  .search input::placeholder { color: #bbb !important; }
  .search button { display: none !important; }
  .hot, .hotsub { display: none !important; }

  /* ============ 3. 主导航：横向滑动 tab 条 ============ */
  .nav {
    background: #fff !important;
    height: auto !important;
    border-bottom: none !important;
    box-shadow: 0 1px 0 #ededed;
    position: sticky !important;
    top: 0;
    z-index: 60;
  }
  .nav .wrap {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    padding: 0 16px !important;
    gap: 0 !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav .wrap::-webkit-scrollbar { display: none; height: 0; }
  .nav a, .nav .cat-all {
    display: inline-block !important;
    flex: none;
    color: #666 !important;
    background: transparent !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    padding: 13px 11px 11px !important;
    letter-spacing: 0 !important;
    border-bottom: 2px solid transparent !important;
  }
  .nav a:first-child { padding-left: 0 !important; }
  .nav a:hover { color: #666 !important; background: transparent !important; }
  .nav a.on {
    color: #333 !important;
    font-weight: 600 !important;
    border-bottom-color: #ed4259 !important;
    background: transparent !important;
  }

  /* ============ 4. 主体：单列 ============ */
  .main {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .side-l, .side-r { display: none !important; }
  .center { width: 100% !important; max-width: 100% !important; }

  /* 卡片化 */
  .center-card,
  .sec-card {
    background: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
    padding: 12px !important;
    margin: 12px 0 !important;
    overflow: hidden;
  }
  .wrap.sec { padding: 0 16px !important; margin: 0 !important; }
  .wrap.main { padding: 0 16px !important; margin: 0 !important; }

  /* ============ 5. 轮播 banner ============ */
  .banner, .center-card .banner {
    border-radius: 8px !important;
    overflow: hidden;
    margin: 0 !important;
  }
  .banner .slide { display: none !important; }
  .banner .slide.on { display: block !important; }
  .banner .slide a { display: block !important; position: relative; }
  .banner .slide img {
    width: 100% !important;
    height: 44vw !important;
    min-height: 148px;
    max-height: 186px;
    object-fit: cover;
    border-radius: 8px !important;
    display: block !important;
  }
  /* 起点手机端 banner 无叠加文案 */
  .banner .slide .txt { display: none !important; }

  /* 缩略图 tab 条 → 起点无此元素，隐藏 */
  .banner .thumbs { display: none !important; }

  /* 轮播圆点指示器 */
  .qd-dots {
    display: flex !important;
    justify-content: center;
    gap: 5px;
    padding: 9px 0 0 !important;
  }
  .qd-dots i {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #e0e0e0;
    display: block;
  }
  .qd-dots i.on { background: #ed4259; width: 12px; border-radius: 3px; }

  /* ============ 6. 强推位 ============ */
  .strong {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    margin-top: 12px !important;
  }
  .strong .book-card {
    display: flex !important;
    gap: 12px !important;
    padding: 12px 0 !important;
    border-bottom: none !important;
  }
  .strong .book-card:first-child { padding-top: 0 !important; }
  .strong .book-card:not(:last-child) { border-bottom: none !important; }
  .strong .book-card .cover {
    flex: none !important;
    width: 68px !important;
    height: 90px !important;
    aspect-ratio: auto !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.14) !important;
    filter: none !important;
    position: relative;
    overflow: hidden;
    display: block !important;
  }
  .strong .book-card .cover .btitle {
    display: none !important;
  }
  .strong .book-card .cover .badge {
    position: absolute; top: 0; left: 0;
    background: #ed4259; color: #fff;
    font-size: 10px; padding: 2px 6px;
    border-bottom-right-radius: 4px;
    z-index: 3;
  }
  .strong .book-card .cover .badge:empty { display: none !important; }
  /* 文字区：起点为「标题 + 2 行简介 + 分类·字数」 */
  .strong .book-card .info {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: block !important;
  }
  .strong .book-card .t {
    display: block !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333 !important;
    line-height: 1.35 !important;
    margin: 0 0 5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .strong .book-card .desc {
    font-size: 13px !important;
    color: #999 !important;
    line-height: 1.5 !important;
    margin: 0 0 5px !important;
    height: auto !important;
    max-height: 39px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal !important;
  }
  .strong .book-card .a {
    font-size: 13px !important;
    color: #999 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  .strong .book-card:hover .cover { transform: none !important; }

  /* ============ 7. 模块（编辑推荐 / 新书速递 / 最近更新） ============ */
  .sec { margin-top: 0 !important; }
  .sec .hd {
    display: flex !important;
    align-items: baseline !important;
    border-bottom: none !important;
    padding: 4px 0 12px !important;
    margin: 0 !important;
  }
  .sec .hd h2 {
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    color: #333 !important;
  }
  .sec .hd h2 em { font-style: normal !important; color: #333 !important; }
  .sec .hd .more {
    margin-left: auto !important;
    font-size: 13px !important;
    color: #999 !important;
  }

  /* 5 列网格 → 横向大卡列表（起点列表项：封面 + 标题 + 2 行简介 + 元数据） */
  .grid5 {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }
  .grid5 .book-card {
    display: flex !important;
    gap: 12px !important;
    padding: 12px 0 !important;
    border-bottom: none !important;
  }
  .grid5 .book-card:first-child { padding-top: 0 !important; }
  .grid5 .book-card .cover {
    flex: none !important;
    width: 68px !important;
    height: 90px !important;
    aspect-ratio: auto !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.14) !important;
    filter: none !important;
    overflow: hidden;
    display: block !important;
    position: relative;
  }
  .grid5 .book-card .cover .btitle { display: none !important; }
  .grid5 .book-card .cover .badge {
    position: absolute; top: 0; left: 0;
    background: #ed4259; color: #fff;
    font-size: 10px; padding: 2px 6px;
    border-bottom-right-radius: 4px; z-index: 3;
  }
  .grid5 .book-card .cover .badge:empty { display: none !important; }
  .grid5 .book-card .info {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: block !important;
  }
  .grid5 .book-card .t {
    display: block !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333 !important;
    line-height: 1.35 !important;
    margin: 0 0 5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .grid5 .book-card .desc {
    font-size: 13px !important;
    color: #999 !important;
    line-height: 1.5 !important;
    margin: 0 0 5px !important;
    height: auto !important;
    max-height: 39px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal !important;
  }
  .grid5 .book-card .a {
    font-size: 13px !important;
    color: #999 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  /* 灰底标签胶囊（起点「未来世界」「系统流」） */
  .grid5 .book-card .a .pill, .strong .book-card .a .pill {
    flex: none !important;
    font-size: 11px !important;
    color: #666 !important;
    background: #f5f5f5 !important;
    border-radius: 3px !important;
    padding: 2px 6px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
  }
  .grid5 .book-card:hover .cover { transform: none !important; }

  /* ============ 8. 页脚 ============ */
  .footer {
    background: transparent !important;
    border: none !important;
    padding: 20px 16px 10px !important;
    font-size: 12px !important;
    color: #b5b5b5 !important;
    line-height: 1.8 !important;
    text-align: center !important;
  }
  .footer a, .footer .copy { color: #b5b5b5 !important; font-size: 12px !important; }
  .footer .qr, .footer img { display: none !important; }
}

/* ===================================================================
   底部双 tab / App 浮条 / 圆点
   （单独成段，不放在 @media 里，靠 JS 保证只在手机端创建元素）
   =================================================================== */
.qd-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  height: calc(52px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(255,255,255,.97);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid #ededed;
  display: flex;
  align-items: center;
}
.qd-tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  color: #999;
  line-height: 1;
  text-decoration: none;
}
.qd-tabbar a.on { color: #ed4259; }
.qd-tabbar a i {
  display: block;
  width: 21px; height: 21px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.qd-tabbar a.book i {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h13v18H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M4 17h15'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h13v18H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M4 17h15'/%3E%3C/svg%3E");
}
.qd-tabbar a.me i {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
}

.qd-appbar {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(52px + env(safe-area-inset-bottom, 0px) + 10px);
  z-index: 190;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,.13);
  padding: 9px 14px;
  font-size: 13px;
  color: #333;
  transition: opacity .25s, transform .25s;
}
.qd-appbar .sq {
  flex: none;
  width: 18px; height: 18px;
  border-radius: 5px;
  background: #ed4259;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.qd-appbar .arw { margin-left: auto; color: #bbb; }
.qd-appbar.hide { opacity: 0; transform: translateY(12px); pointer-events: none; }
.qd-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 9px 0 0;
}
.qd-dots i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #e0e0e0;
  display: block;
}
.qd-dots i.on { background: #ed4259; width: 12px; border-radius: 3px; }

  /* 桌面端一律不显示 */
@media (min-width: 561px) {
  .qd-tabbar, .qd-appbar, .qd-dots, .qd-seg,
  .qd-kingkong, .qd-dlbar, .qd-grid4, .qd-grid4q,
  .qd-sec-newbie { display: none !important; }
}

/* ===================================================================
   9. 次级静态页（rank / finish / book）的类名覆盖
   -------------------------------------------------------------------
   这些页各自带一份 inline <style>，用的是自己的一套类名：
     rank.html    → .hsearch / .rlist / .col / .side / .main / .head / .crumb / .panel
     finish.html  → 类似
     book.html    → 类似
   responsive.css 里也有同名 @media 规则，且同为 (0,1,0) + !important。
   本文件在 <head> 中位于该页 inline style 之后，故同权重下本文件胜出；
   但前提是「选择器必须真的命中」，所以这里补齐 .hsearch 等类名。
   =================================================================== */
@media (max-width: 560px) {

  /* ---------- 9.1 顶栏搜索框 → 通栏胶囊 ---------- */
  .hsearch {
    order: 4 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 9px 0 11px !important;
    display: flex !important;
    align-items: center !important;
    background: #f0f0f0 !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 0 14px !important;
    height: 34px !important;
    position: relative;
  }
  .hsearch::before {
    content: '';
    flex: none;
    width: 15px; height: 15px;
    margin-right: 8px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .hsearch input {
    flex: 1 1 auto !important;
    width: auto !important;
    height: 34px !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: 14px !important;
    color: #333 !important;
    min-width: 0 !important;
    outline: none !important;
  }
  .hsearch input::placeholder { color: #bbb !important; }
  /* 「搜」按钮 → 隐藏（改由左侧放大镜承担） */
  .hsearch button { display: none !important; }

  /* ---------- 9.2 面包屑 ---------- */
  .crumb {
    padding: 10px 16px !important;
    font-size: 12px !important;
    color: #999 !important;
    background: transparent !important;
  }
  .crumb a { color: #999 !important; }

  /* ---------- 9.3 栅格容器 → 单列 ---------- */
  .col {
    display: block !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 16px !important;
  }
  .side, .side-l, .side-r {
    display: none !important;
    width: 100% !important;
    flex: none !important;
  }
  .main {
    width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
    display: block !important;
    margin: 0 !important;
  }

  /* ---------- 9.4 榜单面板 ----------
     ★ 注意 DOM 顺序（rank.html:451-455）：
        .no → .cat → .nm → .au → .hv
       起点手机端榜单行是「左图 + 序号 + 书名 + 分类·字数」，
       这里改成两行网格：第一行 = 序号 + 书名，第二行 = 分类 · 作者 · 热度。
       不能给 .hv 设 order:0 —— 那会把它拽到最前面（上一版就是这么错的）。
     */
  .panel {
    background: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
    padding: 0 !important;
    margin: 12px 0 !important;
    overflow: hidden;
  }
  .head {
    padding: 16px 16px 12px !important;
    border-bottom: none !important;
    background: linear-gradient(180deg, #fdf6e8, #fff) !important;
    display: block !important;
  }
  .head h1 {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #8a6d3b !important;
    letter-spacing: 2px !important;
    margin: 0 !important;
    text-align: center !important;
  }
  .head .sub {
    display: block !important;
    margin: 6px 0 0 !important;
    font-size: 12px !important;
    color: #b8a179 !important;
    text-align: center !important;
  }

  /* 榜单行 → 起点列表行：封面位 + 序号 + 书名 + 元数据，无分割线 */
  .rlist {
    padding: 6px 16px 14px !important;
    list-style: none !important;
  }
  .rlist li {
    display: grid !important;
    grid-template-columns: 26px 1fr !important;
    grid-template-areas:
      "no  nm"
      "no  meta" !important;
    align-items: center !important;
    height: auto !important;
    min-height: 52px !important;
    padding: 11px 0 !important;
    border-bottom: none !important;   /* 起点：无分割线 */
    gap: 2px 0 !important;
    background: transparent !important;
  }
  /* 序号占左侧整列，垂直居中 */
  .rlist li { align-content: center !important; }
  .rlist li > .no { grid-area: no !important; align-self: center !important; }
  .rlist li > .nm { grid-area: nm !important; }
  /* 分类 / 作者 / 热度 三个 span 要落在同一行。
     单独给每个设 grid-row:2 会让它们叠在同一个格子里。
     改用子网格（grid-template-columns 继承外层两列），
     让它们共享 `meta` 区域并按顺序横排。 */
  .rlist li > .cat,
  .rlist li > .au,
  .rlist li > .hv {
    align-self: start !important;
  }
  /* 第二行改用「绝对定位容器」不现实，这里改成让 .nm 只占第一行，
     其余三个用 flex 隐式排布 —— 需要外层是 grid + 内层 flex。
     最终方案：外层 grid 两行，第二行用一个匿名行，
     三个 span 直接 grid-auto-flow 到第二行即可。 */
  .rlist li {
    grid-template-areas: none !important;
    grid-template-columns: 26px auto 1fr auto !important;
    grid-template-rows: auto auto !important;
  }
  .rlist li > .no  { grid-column: 1 !important; grid-row: 1 / span 2 !important; }
  .rlist li > .nm  { grid-column: 2 / span 3 !important; grid-row: 1 !important; }
  .rlist li > .cat { grid-column: 2 !important; grid-row: 2 !important; }
  .rlist li > .au  { grid-column: 3 !important; grid-row: 2 !important; }
  .rlist li > .hv  { grid-column: 4 !important; grid-row: 2 !important; text-align: right !important; }
  .rlist li:hover { background: transparent !important; }
  .rlist li:hover .nm { color: #ed4259 !important; }
  /* 序号：1/2/3 红底白字方块，4+ 灰字 */
  .rlist .no {
    width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    flex: none !important;
    margin-right: 9px !important;
    text-align: center !important;
    border-radius: 5px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-style: italic;
    color: #999 !important;
    background: transparent !important;
  }
  .rlist li:nth-child(-n+3) .no {
    background: #ed4259 !important;
    color: #fff !important;
    font-style: normal;
  }
  /* 书名：主标题行，17px 粗 */
  .rlist .nm {
    width: 100% !important;
    margin: 0 0 3px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333 !important;
    line-height: 1.35 !important;
  }
  /* 分类 + 作者：元数据行 */
  .rlist .cat {
    grid-column: 1 !important;
    width: auto !important;
    margin-right: 6px !important;
    font-size: 13px !important;
    color: #999 !important;
  }
  .rlist .au {
    width: auto !important;
    text-align: left !important;
    font-size: 13px !important;
    color: #999 !important;
  }
  .rlist .hv {
    width: auto !important;
    margin-left: auto !important;
    font-size: 13px !important;
    color: #ed4259 !important;
  }

  /* ---------- 9.5 通用：列表项去掉分割线 ---------- */
  .book-list li, .blist li, .list li, .tj_bar li {
    border-bottom: none !important;
  }
}

/* ===================================================================
   10. 后端渲染页（/book/*.html、目录页、评论页、用户中心…）
   -------------------------------------------------------------------
   结构来自 novel-plus red 模板（模板目录 html/mobile/ 与 html/book/）：
     .topMain            → 顶栏（logo + .searchBar + .bookShelf）
     .mainNav .nav       → 主导航
     .nav_sub            → 面包屑
     .channelWrap.channelBookInfo → 书籍信息卡
     .channelBookContent → 简介/目录
   这些页由 Spring 渲染后经 nginx sub_filter 注入本文件，故能命中。
   =================================================================== */
@media (max-width: 560px) {

  /* ---------- 10.1 顶栏 ---------- */
  .topMain {
    background: #fff !important;
    padding: 10px 0 0 !important;
    border-bottom: none !important;
  }
  .topMain > .box_center {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 0 16px 12px !important;
  }
  .topMain .logo {
    float: none !important;
    order: 1;
    flex: none !important;
    margin-right: 10px !important;
    display: flex !important;
    align-items: center !important;
  }
  .topMain .logo img {
    width: 26px !important;
    height: 26px !important;
    border-radius: 7px !important;
    display: block;
  }
  /* 搜索：第二行通栏胶囊 */
  .topMain .searchBar {
    float: none !important;
    order: 3;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 9px 0 0 !important;
  }
  .topMain .search {
    display: flex !important;
    align-items: center !important;
    background: #f0f0f0 !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 0 14px !important;
    height: 34px !important;
    position: relative;
  }
  .topMain .search::before {
    content: '';
    flex: none;
    width: 15px; height: 15px;
    margin-right: 8px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .topMain .search input.s_int,
  .topMain .search input {
    flex: 1 1 auto !important;
    width: auto !important;
    height: 34px !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: 14px !important;
    color: #333 !important;
    min-width: 0 !important;
    outline: none !important;
  }
  .topMain .search input::placeholder { color: #bbb !important; }
  .topMain .search .search_btn {
    position: static !important;
    display: none !important;
  }
  /* 「我的书架 / 登录 / 注册」→ 收起为右侧小字 */
  .topMain .bookShelf {
    float: none !important;
    order: 2;
    margin-left: auto !important;
    font-size: 0 !important;
  }
  .topMain .bookShelf .sj_link {
    font-size: 13px !important;
    color: #666 !important;
    line-height: 1 !important;
  }
  .topMain .bookShelf .user_link,
  .topMain .bookShelf .line { display: none !important; }

  /* ---------- 10.2 主导航 ---------- */
  .mainNav { background: #fff !important; height: auto !important; border-bottom: none !important; }
  .mainNav > .box_center {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    padding: 0 16px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mainNav > .box_center::-webkit-scrollbar { display: none; height: 0; }
  .mainNav ul.nav { display: flex !important; margin: 0 !important; padding: 0 !important; }
  .mainNav ul.nav li { float: none !important; list-style: none !important; }
  .mainNav ul.nav li a {
    display: block !important;
    font-size: 15px !important;
    color: #666 !important;
    padding: 13px 11px 11px !important;
    line-height: 1 !important;
    border-bottom: 2px solid transparent !important;
    white-space: nowrap;
  }
  .mainNav ul.nav li:first-child a { padding-left: 0 !important; }
  .mainNav ul.nav li.on a,
  .mainNav ul.nav li a.on {
    color: #333 !important;
    font-weight: 600 !important;
    border-bottom-color: #ed4259 !important;
  }

  /* ---------- 10.3 面包屑 ---------- */
  .nav_sub {
    padding: 10px 16px !important;
    font-size: 12px !important;
    color: #999 !important;
    background: transparent !important;
    border: none !important;
  }
  .nav_sub a { color: #999 !important; }

  /* ---------- 10.4 主体容器 ---------- */
  .main.box_center,
  .main {
    display: block !important;
    padding: 0 16px !important;
    margin: 0 0 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .wrap_left, .wrap_right, .fr, .fl { float: none !important; }
  .wrap_left, .wrap_right { width: 100% !important; max-width: 100% !important; }

  /* ---------- 10.5 书籍信息卡 ---------- */
  .channelWrap.channelBookInfo {
    background: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
    padding: 16px !important;
    margin: 0 0 12px !important;
    display: block !important;
  }
  .channelWrap.channelBookInfo .bookCover {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    width: 100% !important;
    float: none !important;
  }
  .channelWrap.channelBookInfo .bookCover > a.book_cover {
    float: none !important;
    flex: none !important;
    width: 92px !important;
    margin: 0 !important;
  }
  .channelWrap.channelBookInfo .bookCover > a.book_cover img,
  .channelWrap.channelBookInfo .bookCover img.cover {
    width: 92px !important;
    height: 122px !important;
    border-radius: 4px !important;
    object-fit: cover;
    display: block;
  }
  .channelWrap.channelBookInfo .book_info {
    float: none !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .channelWrap.channelBookInfo .tit h1 {
    font-size: 19px !important;
    font-weight: 600 !important;
    color: #333 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: break-word;
    margin: 0 0 6px !important;
  }
  .channelWrap.channelBookInfo .tit .author {
    display: block !important;
    font-size: 13px !important;
    color: #999 !important;
    margin: 0 0 8px !important;
  }
  .channelWrap.channelBookInfo ul.list {
    list-style: none !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
  }
  .channelWrap.channelBookInfo ul.list li {
    font-size: 13px !important;
    color: #999 !important;
    line-height: 1.9 !important;
    border: none !important;
  }
  .channelWrap.channelBookInfo ul.list li .item {
    display: inline-block;
    margin-right: 14px !important;
    white-space: nowrap;
  }
  .channelWrap.channelBookInfo ul.list li em {
    font-style: normal !important;
    color: #ed4259 !important;
  }
  .channelWrap.channelBookInfo .intro_txt {
    max-height: none !important;
    margin: 0 0 12px !important;
  }
  .channelWrap.channelBookInfo .intro_txt p {
    font-size: 14px !important;
    color: #666 !important;
    line-height: 1.7 !important;
    margin: 0 !important;
  }
  .channelWrap.channelBookInfo .intro_txt .icon_hide,
  .channelWrap.channelBookInfo .intro_txt .icon_show { display: none !important; }
  /* 按钮 → 胶囊 */
  .channelWrap.channelBookInfo .btns { margin: 0 !important; }
  .channelWrap.channelBookInfo .btns a,
  .channelWrap.channelBookInfo .btns .btn_ora,
  .channelWrap.channelBookInfo .btns .btn_ora_white {
    display: inline-block !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    padding: 9px 24px !important;
    line-height: 1.3 !important;
    margin: 0 10px 0 0 !important;
    border: 1px solid #ed4259 !important;
  }
  .channelWrap.channelBookInfo .btns .btn_ora {
    background: #ed4259 !important;
    color: #fff !important;
  }
  .channelWrap.channelBookInfo .btns .btn_ora_white {
    background: #fff !important;
    color: #ed4259 !important;
  }

  /* ---------- 10.6 简介 / 目录卡 ---------- */
  .channelBookContent,
  .book_content,
  .wrap_inner {
    background: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
    padding: 14px 16px !important;
    margin: 0 0 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
  /* 章节列表：无分割线 */
  .channelBookContent li,
  .book_content li,
  .chapter-list li,
  .dirList li {
    border-bottom: none !important;
    padding: 13px 0 !important;
    font-size: 15px !important;
  }
  .channelBookContent li a, .book_content li a { color: #333 !important; }

  /* ---------- 10.7 通用：清 float、去分割线 ---------- */
  .cf::after, .clearfix::after { content: ""; display: block; clear: both; }
  .line, .box_center .line { border-color: #ededed !important; }
}

/* ===================================================================
   11. 后端移动端模板（html/mobile/*.html，layui 版）
   -------------------------------------------------------------------
   ★ 重要发现：同一 URL 在「桌面 UA」和「移动 UA」下返回**两份不同文档**。
     - 桌面 UA → html/book/book_detail.html（.topMain / .channelBookInfo）
     - 移动 UA → html/mobile/book/book_detail.html（layui 版）
     本节专门处理后者。它的特征：
       · 顶栏是 layui-bg-cyan（青色！）配 layui-icon 图标字体
       · 布局靠 layui-col-xs4 / xs8 栅格
       · 大量写死的内联 style（含旧主色 #d43c33）
       · 章节用 layui-collapse 折叠面板
     因为样式多在内联里，本节必须用 !important + 属性选择器来压。
   =================================================================== */

/* ---------- 11.1 顶栏：青色 → 起点白底 ---------- */
.layui-header.header-doc,
.header.header-doc,
.layui-bg-cyan,
#content > .layui-header {
  background: #ffffff !important;
  color: #333 !important;
  height: 46px !important;
  line-height: 46px !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 #ededed !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  text-align: left !important;
}
/* 返回箭头 / 首页图标：白色 → 深灰 */
.header-doc .layui-icon,
.layui-header .layui-icon,
.header-doc i.layui-icon {
  color: #333 !important;
  font-size: 19px !important;
  line-height: 1 !important;
}
/* 标题：居中，17px 粗 */
.header-doc > b,
.layui-header > b {
  flex: 1 1 auto !important;
  text-align: center !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #333 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  padding: 0 6px !important;
  font-family: inherit !important;
}
/* 顶栏左右两个浮动 div 改成 flex 项 */
.header-doc > div {
  float: none !important;
  flex: none !important;
  margin: 0 !important;
}
.header-doc > div:last-child { margin-left: auto !important; }
.header-doc > div:first-child { margin-right: 0 !important; }

/* ---------- 11.2 书籍信息区（layui 栅格，背景 #f2f2f2） ---------- */
#content > .layui-row {
  background: #fff !important;
  padding: 14px 16px !important;
  margin: 0 0 12px !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  align-items: flex-start !important;
}
#content > .layui-row > div {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  flex: none !important;
}
/* 封面列 */
#content > .layui-row > div:first-child {
  width: 92px !important;
  flex: 0 0 92px !important;
}
#content > .layui-row > div:first-child img {
  width: 92px !important;
  height: 122px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.16) !important;
  display: block !important;
  max-width: none !important;
  max-height: none !important;
}
/* 信息列 */
#content > .layui-row > div:last-child {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  position: static !important;
}
#content > .layui-row > div:last-child > div,
#content > .layui-row > div:last-child a > div {
  font-size: 13.5px !important;
  color: #666 !important;
  line-height: 1.85 !important;
  margin: 0 !important;
}
#content > .layui-row > div:last-child i {
  font-style: normal !important;
}

/* ---------- 11.3 操作按钮：旧红 #d43c33 → 品牌红，胶囊 ---------- */
#content .layui-btn,
#content a.layui-btn,
#content button.layui-btn {
  border-radius: 999px !important;
  font-size: 14px !important;
  height: 34px !important;
  line-height: 34px !important;
  padding: 0 24px !important;
  border: none !important;
  box-shadow: none !important;
  font-family: inherit !important;
}
/* 主按钮（开始阅读）——内联写死了 background-color:#d43c33!important */
#content a.layui-btn[href*="/book/"],
#content .layui-btn.layui-btn-radius:not([style*="border"]) {
  background-color: #ed4259 !important;
  background: #ed4259 !important;
  color: #fff !important;
}
/* 次按钮（加入书架） */
#content button.layui-btn {
  background: #fff !important;
  background-color: #fff !important;
  color: #ed4259 !important;
  border: 1px solid #ed4259 !important;
}
/* 按钮容器：居中 + 留白 */
#content > div[style*="text-align: center"],
#content > div[style*="text-align:center"] {
  height: auto !important;
  line-height: 1 !important;
  padding: 6px 16px 18px !important;
  background: #fff !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
}

/* ---------- 11.4 简介段落 ---------- */
#content > p {
  font-size: 14px !important;
  color: #666 !important;
  line-height: 1.75 !important;
  padding: 0 16px 14px !important;
  margin: 0 0 12px !important;
  background: #fff !important;
}

/* ---------- 11.5 章节折叠面板 ---------- */
#content .layui-collapse {
  border: none !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin: 0 0 12px !important;
  background: #fff !important;
}
#content .layui-colla-item {
  border: none !important;
}
#content .layui-colla-title {
  background: #fff !important;
  border-bottom: none !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #333 !important;
  height: auto !important;
  line-height: 1.5 !important;
  padding: 15px 40px 15px 16px !important;
  border-radius: 8px !important;
}
#content .layui-colla-title span,
#content .layui-colla-title i {
  font-weight: 400 !important;
  font-size: 13px !important;
  color: #999 !important;
  font-style: normal !important;
}
#content .layui-colla-title span:first-child {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #333 !important;
}
#content .layui-colla-icon {
  right: 14px !important;
  color: #bbb !important;
  font-size: 13px !important;
}
#content .layui-colla-content {
  border-top: none !important;
  padding: 0 16px 8px !important;
  background: #fff !important;
}
/* 章节行：无分割线 */
#content .layui-colla-content li,
#content .indexP p,
#content .indexP li {
  border-bottom: none !important;
  padding: 13px 0 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}
#content .indexP p a,
#content .indexP li a,
#content .layui-colla-content a {
  color: #333 !important;
  font-size: 15px !important;
}

/* ---------- 11.6 通用：去掉 layui 的圆角灰底与固定宽度 ---------- */
#content .layui-row { background: transparent !important; }
#content img { max-width: 100%; }
#content {
  padding-bottom: 68px !important;
  background: #f5f5f5 !important;
}

/* ---------- 11.7 右侧浮动 tag 列表（会员/充值等）位置冲突，隐藏 ---------- */
.tag-list {
  display: none !important;
}

/* ---------- 11.8 「直达页面底部」等零散裸链接 ---------- */
#content a[href*="#"], .indexP a[href*="#"] { color: #ed4259 !important; }
#content > div[style*="padding: 3px"], #content > div[style*="padding:3px"] {
  background: #fff !important;
}
/* 目录页顶部「直达底部」那条 */
#content > div:not(.layui-row):not(.layui-collapse):not([style*="text-align"]) {
  background: transparent;
}

/* ===================================================================
   12. 横向滚动条：把「溢出」改成「可滑动」
   -------------------------------------------------------------------
   实测检出两类溢出（都在 390px 宽下）：
     · comment/class 页 → .box_center.cf > ul.nav（5 项，宽 402px）
     · 首页次级导航   → .wrap（书评/有声/…，多个 52px 项）
   它们本身就是「横向 tab 条」，正确做法是给容器 overflow-x:auto
   并让子项 flex:none，而不是让内容顶出屏幕。
   =================================================================== */
@media (max-width: 560px) {

  /* ---------- 12.1 通用横滑容器 ---------- */
  .box_center > ul.nav,
  .wrap > ul.nav,
  ul.nav,
  .sub-nav,
  .subnav .wrap,
  .hotsub {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px !important;
    margin: 0 !important;
  }
  .box_center > ul.nav::-webkit-scrollbar,
  .wrap > ul.nav::-webkit-scrollbar,
  ul.nav::-webkit-scrollbar,
  .subnav .wrap::-webkit-scrollbar,
  .hotsub::-webkit-scrollbar { display: none; height: 0; }

  ul.nav > li,
  .subnav .wrap > a,
  .hotsub > a,
  .hotsub > span {
    flex: 0 0 auto !important;
    float: none !important;
    white-space: nowrap !important;
  }

  /* 首页次级导航（分类 / 排行 / 完本 … 的那条）*/
  .wrap > a,
  .header .wrap > a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* ---------- 12.2 兜底：任何仍超宽的块级元素允许局部横滑 ---------- */
  .box_center.cf {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
  }
  .box_center.cf::-webkit-scrollbar { display: none; height: 0; }

  /* ---------- 12.3 首页横向分类条（书评/有声等小项） ---------- */
  .wrap:has(> a) {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .wrap:has(> a)::-webkit-scrollbar { display: none; height: 0; }
}

/* ===================================================================
   13. 完本 / book / class 等页的 .panel + .grid + .item
   -------------------------------------------------------------------
   这些页的列表项类名统一是：
     .panel > h1 + .sub + .grid > .item（.cover + .info > .name/.author/.desc）
   桌面是 4 列栅格，手机端起步点为「2 列卡片」或「单列大卡」。
   截图里完本页是 2 列（封面 + 标题 + 作者 + 2 行简介）。
   =================================================================== */
@media (max-width: 560px) {

  .panel {
    background: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
    padding: 16px !important;
    margin: 12px 0 !important;
  }
  /* 模块标题：22px/400 的旧规格 → 17px/600 */
  .panel h1 {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #333 !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 0 4px !important;
  }
  .panel h1 em { font-style: normal !important; color: #ed4259 !important; }
  .panel .sub {
    font-size: 13px !important;
    color: #999 !important;
    margin: 0 0 14px !important;
  }

  /* 列表：4 列 → 单列。
     ★ 不要用 2 列：在 390px 下每列只剩 ~170px，减去 64px 封面后
       文字区仅 ~95px，书名/简介被挤到逐字换行，实测 50 个元素越界。
       起点手机端完本页虽然视觉偏密，但保证单列可读性优先。 */
  .panel .grid {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }
  .panel .item {
    display: flex !important;
    padding: 12px 0 !important;
    border-bottom: none !important;   /* 起点：无分割线 */
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .panel .item .cover {
    width: 68px !important;
    height: 90px !important;
    flex: 0 0 68px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
  }
  .panel .item .cover img {
    width: 68px !important; height: 90px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    display: block;
  }
  .panel .item .info {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    overflow: hidden !important;
  }
  .panel .item .name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 0 0 5px !important;
    display: block;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .panel .item .author {
    font-size: 13px !important;
    color: #999 !important;
    margin: 0 0 5px !important;
  }
  .panel .item .desc {
    font-size: 13px !important;
    color: #999 !important;
    line-height: 1.5 !important;
    height: auto !important;
    max-height: 39px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .panel .item .tag {
    font-size: 11px !important;
    color: #ed4259 !important;
    border: 1px solid #f5b3bd !important;
    border-radius: 999px !important;
    padding: 0 6px !important;
    line-height: 16px !important;
  }

  /* 分页器 */
  .pager, .panel .pager { margin-top: 14px !important; text-align: center !important; }
  .pager a, .pager span {
    display: inline-block !important;
    min-width: 30px !important; height: 30px !important; line-height: 30px !important;
    border-radius: 6px !important;
    border: none !important;
    background: #f5f5f5 !important;
    color: #666 !important;
    font-size: 13px !important;
    margin: 0 3px !important;
    padding: 0 8px !important;
  }
  .pager .on, .pager .cur, .pager a.on {
    background: #ed4259 !important;
    color: #fff !important;
    font-weight: 600 !important;
  }
}

/* ===================================================================
   14. 起点手机端新增模块（r11）
   -------------------------------------------------------------------
   对照参考图补齐首页缺失的 4 个模块：
     A. 6 图标金刚区      .qd-kingkong / .qd-ico
     B. 下载 App 引导条   .qd-dlbar
     C. 新人必读 4 列网格 .qd-sec-newbie / .qd-grid4 / .qd-nb-item
     D. 次级 4 图标区     .qd-grid4q
   另修正：品牌 logo 去图标改纯文字（文字仍为「喵呜中文网」）、banner 改 2:1。
   所有类名带 qd- 前缀，桌面端不显示（见文末 max-width:0 兜底块）。
   =================================================================== */
@media (max-width: 560px) {

  /* ---------- 修正 1：品牌 logo 改纯文字（去掉猫咪图标，只留文字） ----------
     ★ 注意：本站是恶搞喵呜的站，品牌名必须是「喵呜中文网」，不能改成起点。
       这里只做「去图标 + 红色纯文字」的视觉形式对齐，
       文字内容沿用 HTML 里原有的「喵呜中文网」，不再用 ::after 覆写。 */
  .logo img,
  .logo .name i {
    display: none !important;
  }
  .logo .name {
    margin-left: 0 !important;
    display: block !important;
  }
  .logo .name b {
    font-size: 19px !important;
    font-weight: 800 !important;
    color: #ed4259 !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif !important;
  }

  /* ---------- 修正 2：banner 改 2:1 横条 ---------- */
  .banner .slide img {
    height: 46vw !important;
    min-height: 155px !important;
    max-height: 210px !important;
  }

  /* ============ A. 6 图标金刚区 ============ */
  .qd-kingkong {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
    padding: 16px 8px 14px !important;
    margin: 12px 0 0 !important;
    width: 100% !important;
  }
  .qd-kingkong > a {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
  }
  .qd-kingkong .qd-ico {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: none !important;
    box-shadow: 0 3px 8px rgba(237,66,89,.14) !important;
  }
  .qd-kingkong .qd-ico svg {
    width: 22px !important;
    height: 22px !important;
    display: block;
  }
  .qd-kingkong > a > span {
    font-size: 12px !important;
    color: #333 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    font-weight: 400 !important;
  }

  /* ============ B. 下载 App 引导条 ============ */
  .qd-dlbar {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
    padding: 12px !important;
    margin: 12px 0 0 !important;
    text-decoration: none !important;
    width: 100% !important;
  }
  .qd-dl-logo {
    flex: none !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
    background: linear-gradient(135deg, #ff5c7a, #ed4259) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    letter-spacing: -0.5px;
    line-height: 1 !important;
  }
  .qd-dl-txt {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }
  .qd-dl-txt b {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    line-height: 1.2 !important;
    display: block;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .qd-dl-txt i {
    font-style: normal !important;
    font-size: 12px !important;
    color: #999 !important;
    line-height: 1.2 !important;
    display: block;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .qd-dl-btn {
    flex: none !important;
    background: linear-gradient(90deg, #ff5c7a, #ed4259) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    padding: 9px 14px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  /* ============ C. 新人必读（4 列网格） ============ */
  .qd-sec-newbie .sec-card { padding-bottom: 14px !important; }
  .qd-hd {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 2px 0 12px !important;
    margin: 0 !important;
  }
  .qd-hd h2 {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 0 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    flex: none !important;
  }
  .qd-hd-tag {
    flex: none !important;
    font-size: 11px !important;
    color: #999 !important;
    background: #f5f5f5 !important;
    border-radius: 4px !important;
    padding: 3px 7px !important;
    line-height: 1.2 !important;
    max-width: 46% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .qd-hd-refresh {
    margin-left: auto !important;
    flex: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 12px !important;
    color: #999 !important;
    text-decoration: none !important;
  }
  .qd-hd-refresh svg {
    width: 13px !important;
    height: 13px !important;
    display: block;
  }

  .qd-grid4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .qd-nb-item {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    text-decoration: none !important;
  }
  .qd-nb-cover {
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    border-radius: 4px !important;
    background-color: #eee !important;
    background-size: cover !important;
    background-position: center !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.14) !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .qd-nb-name {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #333 !important;
    line-height: 1.35 !important;
    margin: 6px 0 0 !important;
    height: 2.7em !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    word-break: break-all !important;
  }
  .qd-nb-meta {
    font-size: 10px !important;
    color: #bbb !important;
    line-height: 1.3 !important;
    margin: 3px 0 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ============ D. 次级 4 图标区 ============ */
  .qd-grid4q {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .qd-grid4q > a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 7px !important;
    background: #fff !important;
    border-radius: 6px !important;
    padding: 14px 4px 11px !important;
    text-decoration: none !important;
    min-width: 0 !important;
  }
  .qd-grid4q .qd-ico-sq {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: none !important;
    box-shadow: none !important;
  }
  .qd-grid4q .qd-ico-sq svg {
    width: 18px !important;
    height: 18px !important;
    display: block;
  }
  .qd-grid4q > a > span {
    font-size: 12px !important;
    color: #333 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    font-weight: 400 !important;
  }
  /* 次级金刚区外层卡片：起点这里是 4 个独立白块，不要外层白底 padding */
  .qd-grid4q { background: transparent !important; }
  .qd-grid4q-wrap { background: transparent !important; }

  /* 次级金刚区所在的 sec-card 去白底、去内边距，让 4 个白块自己撑开 */
  .sec:has(> .sec-card > .qd-grid4q) > .sec-card,
  .sec-card:has(> .qd-grid4q) {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
}