/* ============================================================
   喵呜中文网 全站响应式（对齐起点移动端行为）
   关键点：任何横向滚动容器都必须显式 width:100%，否则父级
   flex/grid 会被内容撑破，导致右侧内容被裁切（遮挡）。
   ============================================================ */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
*, *::before, *::after { box-sizing:border-box; }
body { overflow-x:hidden; }
img, video, table { max-width:100%; height:auto; }

/* 桌面：给可能溢出的弹性行留出安全边界 */
@media (max-width: 1240px) {
  .wrap { padding-left:12px; padding-right:12px; }
}

@media (max-width: 1100px) {
  body { min-width:0 !important; }
  .wrap {
    width:100% !important;
    max-width:100% !important;
    padding-left:12px; padding-right:12px;
  }

  /* ---------- 顶栏：两行独立，避免互相压行 ---------- */
  .topbar { height:auto !important; line-height:1.5; padding:0 !important; }
  .topbar .wrap {
    display:block !important;
    height:auto !important; padding:0 !important;
  }
  .topbar > .wrap > div {
    display:block !important; width:100% !important;
    padding:6px 12px; line-height:1.5;
  }
  .topbar > .wrap > div:first-child { border-bottom:1px solid #e6e6e6; }
  .topbar a {
    margin-left:0 !important; margin-right:14px; display:inline-block;
    white-space:nowrap; line-height:1.5; vertical-align:baseline;
  }

  /* ---------- 头部 / logo / 搜索 ---------- */
  .header { padding:12px 0 14px !important; }
  .header .wrap { flex-wrap:wrap; gap:10px; }
  .logo { width:auto !important; max-width:100%; flex:0 0 auto; }
  .logo img { width:46px !important; height:46px !important; }
  .logo .name b, .logo b { font-size:21px !important; letter-spacing:1px !important; }
  .search { padding:0 !important; width:100% !important; flex:1 1 100% !important; }
  .search input { font-size:14px !important; height:38px !important; }
  .hot { margin-top:7px; line-height:1.9; white-space:normal; }
  .hot a { margin-right:10px; white-space:nowrap; }
  .apps, .qr, .badge { display:none !important; }
  .hsearch { margin-left:0 !important; width:100% !important; display:flex !important; }
  .hsearch input { width:auto !important; flex:1 1 auto !important; min-width:0 !important; height:38px !important; }
  .hsearch button { width:56px !important; height:40px !important; flex:none; }

  /* ---------- 导航：单行横向滚动（起点的做法） ---------- */
  .nav { height:auto !important; }
  .nav .wrap {
    width:100% !important; max-width:100% !important; padding:0 !important;
    display:flex; flex-wrap:nowrap;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .nav .wrap::-webkit-scrollbar { display:none; height:0; }
  .nav a {
    flex:0 0 auto !important;
    padding:0 15px !important;
    font-size:15px !important;
    line-height:42px !important;
    white-space:nowrap;
    letter-spacing:0 !important;
  }

  /* 次级/页脚导航（若存在） */
  .subnav .wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .subnav .wrap::-webkit-scrollbar { display:none; }

  /* ---------- 三栏 → 单栏 ---------- */
  .main { flex-direction:column !important; gap:12px !important; margin-top:12px !important; }
  .side-l, .side-r, .side, .right-wrap, .catalog, .rank-side {
    width:100% !important; flex:none !important; order:2;
  }
  .center, .content, .main-col, .left-wrap { width:100% !important; order:1; }
  .side-l { border-top:1px solid #e6e6e6 !important; }

  /* ---------- 焦点图（起点：214px 高的图 + 36px 标签条） ---------- */
  .banner, .focus-wrap, .focus-slider {
    height:auto !important;
    min-height:0 !important;
  }
  .banner .slide, .focus-slider .slide {
    position:relative !important; inset:auto !important;
    display:none !important;
  }
  .banner .slide.on, .focus-slider .slide.on { display:block !important; }
  /* 移动端：焦点图改为「图 + 叠字」两层结构，标签条独立在下方 */
  .banner .slide { position:relative !important; }
  .banner .slide a { display:block; position:relative; height:auto !important; }
  .banner .slide img {
    width:100% !important; height:206px !important; object-fit:cover; display:block;
  }
  .banner .txt {
    position:absolute !important; left:0; right:0; top:auto !important; bottom:36px !important;
    padding:14px 14px 14px !important;
    background:linear-gradient(transparent, rgba(0,0,0,.72)) !important;
  }
  .banner .txt h2 { font-size:19px !important; line-height:1.35 !important; margin-bottom:5px !important; }
  .banner .txt p {
    font-size:12px !important; line-height:1.6 !important; max-height:38px; overflow:hidden;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  }
  .banner .tag { font-size:11px !important; line-height:18px !important;
    padding:0 7px !important; margin-bottom:7px !important; }
  .banner { height:auto !important; padding-bottom:0 !important; background:transparent !important; }
  .banner .s1, .banner .s2, .banner .s3 {
    flex-direction:initial !important; display:block !important;
    padding:0 !important; min-height:0 !important; text-align:left !important;
    background-image:none !important;
  }
  .banner .s1 img { display:none !important; }
  .banner .s1 .txt { margin-left:0 !important; }
  .banner .s1 h2, .banner .s2 h2, .banner .s3 h2 {
    font-size:20px !important; line-height:1.35 !important; letter-spacing:0 !important;
  }
  .banner .s1 p, .banner .s2 p, .banner .s3 p {
    font-size:12px !important; letter-spacing:0 !important; line-height:1.7 !important;
  }
  .banner .s1 p br, .banner .s2 p br, .banner .s3 p br { display:none !important; }
  .banner .tag { font-size:11px !important; padding:2px 8px !important; letter-spacing:0 !important; }
  .banner .thumbs { position:absolute !important; bottom:0 !important; height:36px !important; }
  .banner .thumbs a {
    font-size:12px !important; height:36px !important; line-height:36px !important;
    padding:0 4px !important; letter-spacing:0 !important;
  }
  .banner .thumbs a.more { flex:0 0 32px !important; }

  /* ---------- 网格 ---------- */
  .strong, .grid5, .grid, .list-grid { grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
  .top3 { grid-template-columns:1fr !important; gap:10px !important; }
  .book-card .cover { width:100% !important; }
  .book-card .t { font-size:15px !important; }

  /* 起点式横向书籍列表（图 72x96 + 文字） */
  .book-wrap { display:flex !important; padding:12px 0 !important; }
  .book-img { width:64px !important; height:86px !important; margin-right:10px !important; }
  .book-info { width:auto !important; flex:1; }

  /* ---------- 通用表格化列表：防溢出 ---------- */
  .list li, .rank-row { padding:10px 2px !important; }
  .list li .meta, .rank-row .meta { font-size:12px !important; }
  .sec { margin-top:20px !important; }
  .sec .hd h2 { font-size:17px !important; }

  /* ---------- 详情页（书封 + 简介） ---------- */
  .info { flex-direction:column !important; gap:16px !important; }
  .info .cover, .cover { width:104px !important; flex:none !important; }
  .cover img { width:104px !important; }
  .meta { padding-top:0 !important; }
  .meta h1 { font-size:22px !important; letter-spacing:0 !important; line-height:1.35; }
  .meta .au { font-size:13px !important; }
  .stat { line-height:2; }
  .stat span { margin-right:16px; display:inline-block; }
  .acts { flex-wrap:wrap !important; gap:10px !important; }
  .btn { padding:10px 22px !important; font-size:14px !important; letter-spacing:0 !important; }
  .intro p { font-size:14px !important; }
  .chap ul li a { padding:12px 2px !important; font-size:14px !important; }
  .cmt .av { width:32px !important; height:32px !important; line-height:32px !important; font-size:17px !important; }

  /* ---------- 阅读页 ---------- */
  .read-wrap, .read-box, .content-box { padding:16px 14px !important; width:100% !important; max-width:100% !important; }
  #content p, .read-content p { font-size:17px !important; line-height:1.9 !important; }
  .toolbar, .read-tool, .ctrl { flex-wrap:wrap !important; gap:8px !important; }
  .toolbar a, .read-tool a, .ctrl a { padding:8px 12px !important; font-size:13px !important; }

  /* ---------- 页脚 / 浮层 ---------- */
  .footer { padding:18px 12px 22px !important; }
  .footer .links { line-height:2.2; }
  .footer .links a { display:inline-block; margin:2px 6px; }
  .footer .copy { font-size:12px !important; }
  #toast { max-width:88vw; font-size:14px; padding:14px 18px; }
  #miaowu-pet { width:60px !important; height:60px !important; }
  #intro-skip { top:14px !important; right:14px !important; padding:6px 16px !important; font-size:13px !important; }
}

/* ---------- 窄屏微调 ---------- */
@media (max-width: 520px) {
  .logo .name i, .logo i, .logo .sub { display:none !important; }
  .logo .name b, .logo b { font-size:19px !important; }
  .search button { width:70px !important; letter-spacing:2px !important; font-size:14px !important; }
  .nav a { font-size:14px !important; padding:0 13px !important; }
  .banner .slide img { height:180px !important; }
  .banner .txt h2 { font-size:17px !important; }
  .banner .txt p { display:none !important; }
  .strong, .grid5, .grid { gap:8px !important; }
  .book-card .desc { display:none !important; }
  .book-img { width:58px !important; height:78px !important; }
  .crumb { font-size:12px !important; }
}

/* ---------- 触摸设备：去掉 hover 位移抖动 ---------- */
@media (hover: none) {
  .side-l li:hover .ico, .book-img a img:hover { transform:none !important; margin-left:10px !important; }
  .book-card:hover .cover { transform:none !important; }
}