/* ============================================================
   刚好网 · 移动端独立样式层  mobile.css
   ------------------------------------------------------------
   定位：桌面用 style.css（大卡片/大图/大按钮/宽松留白）；
        手机用本文件（同一套 DOM，第二套尺寸规则）——
        卡片、预览图、文字、按钮整体缩小，网格加密，一屏放更多内容。
   原则：
     1) 纯前端样式，不改结构、不新增依赖、不加付费项目；
     2) 只作用于 ≤900px，桌面观感零改动；
     3) 图片一律 object-fit: cover（裁切不拉伸），禁止压扁/拉长；
     4) 单按钮宽度不超过屏宽 1/3~1/2，避免 CTA 占掉半屏。
   载入：<link rel="stylesheet" href="assets/css/mobile.css" media="(max-width:900px)">
         放在 style.css 之后（同优先级后到者胜，个别需压过旧规则的用 !important）。
   ============================================================ */

@media (max-width: 900px) {

  /* ---------- 1. 版式刻度：移动端专属字号与间距 ---------- */
  .container { padding: 0 14px; }
  .section { padding: 22px 0; }
  .section-sm { padding: 18px 0; }
  body { font-size: 14px; }
  p, .lead, .section-sub { font-size: 13px; line-height: 1.55; }
  h1, .hero h1 { font-size: 23px; line-height: 1.28; letter-spacing: -.01em; }
  h2, .section-title { font-size: 18px; line-height: 1.3; margin-bottom: 6px; }
  h3 { font-size: 15px; }
  .eyebrow { font-size: 10px; letter-spacing: .12em; margin-bottom: 4px; }
  .section-head { margin: 0 0 12px !important; }
  .section-head h2 { margin: 0 0 6px; }
  .section-sub, .section-head p { margin-bottom: 10px !important; }

  /* ---------- 2. 图片统一控形：裁切不拉伸 ---------- */
  img { max-width: 100%; height: auto; }
  .mat-cover > img, .mat-cover > video, .mat-card .mat-video,
  .case-stage img, .case-slide img, .case-tab img,
  .cat-card img, .gallery-item img, .gallery-grid img,
  .split .visual img, .ai-home-banner img, .page-hero img,
  .card > img, figure img, article img, .inv-card img, .dt-cover img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center center;
    display: block;
  }
  /* 品牌标志类：等比完整显示，不裁切 */
  .logo-mark, .brand img, .brand-mark, footer img.logo-mark {
    object-fit: contain; width: auto; height: 26px; max-height: 26px;
  }
  /* 背景图容器也统一 cover，防止小屏被拉变形 */
  .cat-card-bg, .big-entry-bg, .split .visual, .hero-bg,
  .page-hero--bg, .case-slide-scrim + * {
    background-size: cover; background-position: center;
  }

  /* ---------- 3. 按钮：小号、不占半屏 ---------- */
  .btn {
    height: 34px; padding: 0 13px; font-size: 12.5px; font-weight: 700;
    border-radius: 9px; max-width: 152px; white-space: nowrap;
  }
  .hero-actions { gap: 8px; }
  .hero-actions .btn, .section .btn, .case-slide-cta .btn, .cta-band .btn { max-width: 148px; height: 33px; font-size: 12px; }
  .btn-ghost { border-width: 1px; }
  .chip { font-size: 10.5px; padding: 4px 8px; }
  .mat-dl, .mat-more, .fav-btn { font-size: 10.5px; }

  /* ---------- 4. 素材卡：竖卡 + 两列密网格（京东 H5 式） ----------
     注意：style.css 的 DS-12 层在小屏把素材卡改成了「左封面 92px + 右文案」的
     行卡，并带 !important。第二套样式统一改为「封面在上、文案在下」的竖卡，
     靠后加载 + !important 覆盖，避免行卡 + 双列混排导致文案只剩 87px 宽。 */
  .mat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .mat-card { border-radius: 10px; flex-direction: column !important; }
  .mat-cover-link { flex: 0 0 auto !important; width: 100% !important; display: block !important; }
  .mat-cover {
    height: 0 !important; min-height: 0 !important;
    padding-bottom: 58% !important; aspect-ratio: auto !important;
  }
  .mat-cover--ph span { font-size: 20px; }
  .mat-body { padding: 6px 8px 7px !important; gap: 2px !important; }
  .mat-cat { font-size: 9.5px; letter-spacing: .02em; }
  .mat-title { font-size: 12.5px !important; line-height: 1.3; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .mat-meta { font-size: 10px !important; line-height: 1.25 !important; }
  .mat-badge { font-size: 9px; padding: 2px 5px; top: 5px; right: 5px; }
  .fav-btn { width: 22px; height: 22px; font-size: 10px; top: 4px; right: 4px; }
  /* DS-14g 把下载按钮拆到独立一行（卡片高 +30px）；两列密网格里改为单行并排 */
  .mat-foot { flex-wrap: nowrap !important; gap: 3px 5px !important; padding-top: 1px !important; }
  .mat-foot .mat-stat { white-space: nowrap; }
  .mat-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mat-foot .mat-stat { font-size: 9.5px !important; }
  /* 下载键压成 20px 胶囊，页脚从 27px 降到 21px */
  .mat-foot .mat-dl {
    flex: 0 1 auto !important; text-align: center;
    height: 20px !important; line-height: 20px !important;
    padding: 0 6px !important; font-size: 10px !important; border-radius: 6px;
    min-height: 0 !important;
  }
  /* meta 行里的「叶内推广」小胶囊（pages/library.html 自带 12px/3px10px）同行显示 */
  .mat-meta .lref-btn {
    font-size: 9px !important; padding: 1px 5px !important;
    margin-left: 4px !important; line-height: 1.25 !important; vertical-align: 1px;
  }
  .mat-play { width: 30px; height: 30px; font-size: 12px; }

  /* ---------- 5. 首屏：压成半屏，不做整屏空白画框 ---------- */
  .hero.hero--immersive { min-height: auto; padding: 40px 0 16px; }
  .hero-bg, .hero-scrim { width: calc(100% - 12px); height: 150px; border-radius: 12px; }
  .hero--immersive .container { padding-left: 14px; padding-right: 14px; }
  .hero-copy .eyebrow { font-size: 9.5px; }
  .hero .slogan, .hero--immersive .hero-copy .slogan {
    font-size: 12px; line-height: 1.45; margin-bottom: 10px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hero--immersive .hero-slider { margin: 10px 0 0; }
  .hero-slider .slide { border-radius: 10px; padding: 8px 10px; }
  .hero-slider .slide-title { font-size: 14px; }
  .hero-slider .slide-sub { font-size: 10.5px; margin-top: 3px; }

  /* ---------- 6. 首页其它区块：像素级收口 ---------- */
  /* AI 生成区 */
  .ai-home-banner img { height: 118px !important; border-radius: 10px; }
  .ai-home-grid { gap: 8px !important; }
  .ai-home-grid > .card { padding: 11px !important; border-radius: 10px; }
  .ai-home-grid > .card:last-child .ai-str { font-size: 11px !important; padding: 6px 5px !important; }
  .ai-home-grid > .card:last-child > div > label { font-size: 10px !important; }

  /* 四大入口 */
  .big-entries { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .big-entry { padding: 12px 8px !important; border-radius: 10px; min-height: 0 !important; }
  .big-entry-icon { font-size: 17px !important; margin-bottom: 2px; }
  .big-entry-text { gap: 1px; }
  .big-entry-text b { font-size: 13.5px !important; }
  .big-entry-text i { font-size: 10px !important; line-height: 1.35 !important; }

  /* 作品案例：舞台降到 200px，标签条压成小胶囊 */
  .case-rotator { gap: 8px; }
  .case-tabs { gap: 6px; padding-bottom: 2px; }
  .case-tab { padding: 5px 8px !important; border-radius: 8px; gap: 2px; }
  .case-tab b { font-size: 10.5px !important; }
  .case-tab-badge { font-size: 8.5px !important; }
  .case-stage { min-height: 196px !important; border-radius: 12px; }
  .case-slide-copy { max-width: 90%; padding: 12px; }
  .case-slide-copy h2 { font-size: 15px !important; line-height: 1.25; }
  .case-slide-copy p { font-size: 10.5px !important; }
  .case-slide-badge { font-size: 9px; padding: 2px 6px; }

  /* 八大类目 */
  .cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .cat-card--cover { min-height: 106px !important; padding: 8px 8px !important; border-radius: 10px; }
  .cat-card--cover .cat-card-icon { font-size: 16px !important; }
  .cat-card--cover .cat-card-name { font-size: 13px !important; }
  .cat-card-desc { font-size: 9.5px !important; line-height: 1.35 !important; -webkit-line-clamp: 1 !important; }
  .cat-card-count { font-size: 9.5px !important; padding-top: 2px; }

  /* 关于区：图文块压到 130px，勾选项紧凑 */
  .split { gap: 12px !important; }
  .split .visual { aspect-ratio: auto !important; height: 108px; border-radius: 10px; }
  .feature-list { gap: 6px; margin-top: 6px; }
  .feature-list li { padding: 8px 10px; border-radius: 8px; gap: 8px; }
  .feature-list .tick { width: 16px; height: 16px; margin-top: 1px; }
  .feature-list .tick svg { width: 9px; height: 9px; }
  .feature-list span { font-size: 11.5px !important; line-height: 1.45; }

  /* 联系区 */
  .contact-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .contact-card { padding: 9px 10px; border-radius: 8px; }
  .contact-card .k { font-size: 9.5px; letter-spacing: .04em; }
  .contact-card .v { font-size: 11.5px; margin-top: 3px; }

  /* ---------- 7. 页脚：两列紧凑 ---------- */
  .site-footer { margin-top: 14px; padding: 15px 0 12px; }
  .footer-top { gap: 12px 14px !important; margin-bottom: 12px; }
  .footer-note { font-size: 10.5px; line-height: 1.45; }
  .footer-links { gap: 6px 10px; }
  .footer-links a, .site-footer a { font-size: 11px; }
  .site-footer .brand-name b { font-size: 13px; }
  .footer-bottom { font-size: 10px; padding-top: 8px; }

  /* ---------- 8. 内页通用：page-hero / 列表 / 表单控件 ---------- */
  .page-hero { padding: 48px 0 22px !important; }
  .page-hero h1 { font-size: 21px !important; line-height: 1.28; }
  .page-hero p { font-size: 12px !important; margin-top: 6px; }
  .lib-search input, .lib-sort select, .ai-panel select, .ai-panel input[type="text"], .lm-form input {
    height: 34px; font-size: 16px; /* 16px 防 iOS 聚焦自动放大 */
  }
  .lib-toolbar, .lib-filters { gap: 6px !important; margin-bottom: 10px !important; }
  .lib-more { height: 34px !important; padding: 0 16px !important; font-size: 12px !important; }
  .lib-more-wrap { padding: 12px 0 4px !important; }
  .card { border-radius: 10px; }
  .grid-2, .grid-3, .grid-4, .gallery-grid { gap: 8px !important; }
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
  table { font-size: 11.5px; }
}

/* ---------- 9. 超小屏微调（iPhone SE / 360px 安卓） ---------- */
@media (max-width: 400px) {
  .container { padding: 0 12px; }
  .mat-grid, .cat-grid, .big-entries, .contact-grid { gap: 7px !important; }
  .mat-title { font-size: 12px !important; }
  .mat-body { padding: 6px 7px 7px; }
  .contact-grid { grid-template-columns: 1fr !important; }
  .btn { height: 32px; font-size: 12px; padding: 0 11px; }
}

/* ---------- 10. 大屏（≥901px）不加载本文件；此段仅作安全兜底 ---------- */
@media (min-width: 901px) {
  /* 若构建/预览误把本文件当全站样式，桌面保持原尺寸，不产生任何覆盖 */
}

/* ---------- 10. 营销位（hero-slider）手机紧凑版 ----------
   桌面单张 350px（图 187 + 文案 163）；手机压到 ~142px：
   图 72px + 标题 1 行 + 副标 1 行 + 22px 小胶囊按钮，一屏能看到「首屏 + 素材区开头」。 */
@media (max-width: 720px) {
  .hero-slider .slide { border-radius: 10px; overflow: hidden; }
  .slide-media, .slide-media .slide-img, .slide-media .slide-bg { height: 72px !important; }
  .slide-badge { font-size: 9px !important; padding: 2px 6px !important; top: 6px !important; left: 8px !important; }
  .slide-info { padding: 7px 10px 8px !important; gap: 2px !important; }
  .slide-title { font-size: 12.5px !important; line-height: 1.25 !important;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .slide-sub { font-size: 10px !important; line-height: 1.3 !important;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .slide-info .btn { height: 22px !important; min-height: 0 !important; margin-top: 4px !important;
    padding: 0 9px !important; font-size: 10.5px !important; border-radius: 6px !important; }
  /* 筛选芯片与工具条再收一层 */
  .chip { font-size: 10px !important; padding: 3px 7px !important; }
  .lib-chips { gap: 5px !important; }
  .lib-bar { gap: 6px !important; }
  .lib-tools { gap: 6px !important; }
}

/* ---------- 11. 素材库筛选条 + 页脚再收口 ---------- */
@media (max-width: 720px) {
  /* 筛选芯片：style.css 的 .chip-btn 是 46px 高/12px 16px 内边距，手机上改成
     单行横向滚动（H5 常见），高度 28px，一屏不再吃掉三行高度 */
  .lib-chips { flex-wrap: nowrap !important; overflow-x: auto !important; gap: 5px !important;
    padding-bottom: 2px !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .lib-chips::-webkit-scrollbar { display: none; }
  .chip-btn { height: 28px !important; min-height: 0 !important; padding: 0 9px !important;
    font-size: 10.5px !important; white-space: nowrap; flex: 0 0 auto; }
  /* 首页 AI 区大图 120 → 92，标题区留白收紧 */
  .ai-home-banner { height: 92px !important; margin: 8px 0 !important; }
  .ai-home-banner figcaption { font-size: 10px !important; padding: 6px 9px !important; }
  #aihomeSection .section-head { gap: 3px !important; }
  /* 页脚链接区：字号 10px、行高 1.25、两列紧凑，底部信息单行 */
  .footer-top { gap: 12px 10px !important; }
  .footer-top h4, .footer-top .footer-title { font-size: 11px !important; margin: 0 0 5px !important; }
  .footer-top a, .footer-top li, .footer-top p { font-size: 10px !important; line-height: 1.45 !important; }
  .footer-top ul { gap: 2px !important; }
  .footer-bottom { gap: 5px !important; padding-top: 7px !important; margin-top: 7px !important; }
  .footer-bottom, .footer-bottom a, .footer-bottom p { font-size: 9.5px !important; line-height: 1.4 !important; }
}

/* ---------- 12. 按钮红线：任何单按钮不得超过屏宽 1/3（375px → 125px） ---------- */
@media (max-width: 720px) {
  .btn, a.btn, button.btn { max-width: 118px !important; padding-left: 12px !important; padding-right: 12px !important; }
  /* 「加载更多」由通栏 163px 改为居中小胶囊 */
  #libMore, .lib-more, button.lib-more {
    width: auto !important; min-width: 0 !important; max-width: 132px !important;
    margin: 12px auto 0 !important; height: 30px !important; min-height: 0 !important;
    padding: 0 16px !important; font-size: 11.5px !important; border-radius: 999px !important;
  }
  /* 卡片封面用背景图填充（style.css 里 data-bg 走 background-image），
     统一 background-size: cover + center，禁止拉伸变形 */
  .mat-cover, .slide-img, .slide-bg, .cat-card--cover, .visual, .ai-home-banner figure > div {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}

/* ---------- 13. 内页首屏压缩：页头 + 搜索条 + 分段 tab ----------
   375px 首屏原本 183px 页头 + 44 搜索 + 46 tab + 21 计数 = 294px，
   卡片要到 330px 才出现，一屏只能看 2 张。压到 ~200px，一屏可见 3 行 6 张。 */
@media (max-width: 720px) {
  .page-hero--bg { padding: 34px 0 16px !important; }
  .page-hero--bg .eyebrow { font-size: 10px !important; padding: 3px 9px !important; letter-spacing: .1em !important; }
  .page-hero h1 { font-size: 19px !important; margin-bottom: 5px !important; }
  .page-hero p, .page-hero p.lead { font-size: 11px !important; line-height: 1.5 !important; margin-top: 4px !important;
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* 搜索框 44 → 34；控件字号保持 16px 防 iOS 放大，只压高度和内边距 */
  .lib-bar input, .lib-bar select, .lib-bar .lib-search input {
    height: 34px !important; min-height: 0 !important; padding: 0 11px !important; }
  .lib-bar { margin-bottom: 7px !important; }
  .lib-tools { margin-bottom: 4px !important; }
  .lib-tools button, .lib-tab { height: 30px !important; min-height: 0 !important; padding: 0 11px !important; font-size: 11px !important; }
  .lib-count, .lib-total { font-size: 11px !important; margin: 2px 0 7px !important; }
  .lib-chips { margin-bottom: 5px !important; }
}

/* ---------- 14. 内页头压缩到「一条标题带」 ----------
   内页 hero 在手机上是纯装饰：143px 高、占首屏 18%。压成 1 条标题带（~78px），
   版权免责句保留 1 行（合规文本不删，只收行数）。首屏因此多出近一整行卡片。 */
@media (max-width: 720px) {
  .page-hero--bg { padding: 18px 0 11px !important; }
  .page-hero--bg .eyebrow { font-size: 9px !important; padding: 2px 7px !important; }
  .page-hero h1 { font-size: 18px !important; line-height: 1.2 !important; margin: 4px 0 0 !important; }
  .page-hero p.lead { font-size: 10.5px !important; line-height: 1.35 !important; margin-top: 3px !important;
    -webkit-line-clamp: 1; }
  /* 素材卡封面由 66% 收到 58%，卡片整体再矮 ~14px，一屏多塞半行 */
  .mat-card .mat-cover { padding-bottom: 58% !important; }
}

/* ---------- 15. 根治：网格子项最小宽度导致右列出血 ----------
   卡片底部一行有「下载/赞/源文件」多个胶囊，min-content 撑到 190px+，
   grid 自动列宽跟着变宽 → 右列越过 375 屏宽被硬切（body overflow-x 隐藏所以量不到滚动条）。
   约束：列宽 forced 1fr（minmax(0,1fr) 的等效写法）+ 卡片自身 min-width:0 且裁剪超宽内容。 */
@media (max-width: 720px) {
  .mat-grid, .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .mat-grid > *, .cat-grid > * { min-width: 0 !important; max-width: 100% !important; }
  .mat-card { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; }
  .mat-card .mat-body, .mat-card .mat-foot { min-width: 0 !important; max-width: 100% !important; }
  .mat-foot { flex-wrap: wrap !important; overflow: hidden !important; }
  .mat-foot > * { flex: 0 1 auto !important; min-width: 0 !important; max-width: 100% !important; }
  .mat-title, .mat-by { max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; }
}

/* ---------- 16. 内页头再压 + 分类条改横滑单行 ----------
   .lib-chips 的内联 style 写了 flex-wrap:wrap，必须用 !important 才能横滑单行；
   内页 eyebrow（LIBRARY 之类小英文）在手机上删掉，说明句压到一行，让卡片尽早上屏。 */
@media (max-width: 720px) {
  .page-hero .eyebrow, .page-hero .kicker { display: none !important; }
  .page-hero .lead, .page-hero p {
    font-size: 10.5px !important; line-height: 1.45 !important; margin: 5px 0 0 !important;
    display: -webkit-box !important; -webkit-line-clamp: 1 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
  }
  #libChips {
    flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important;
    gap: 6px !important; margin-bottom: 8px !important; padding-bottom: 2px !important;
    scrollbar-width: none !important; -ms-overflow-style: none !important;
  }
  #libChips::-webkit-scrollbar { display: none !important; }
  #libChips > * { flex: 0 0 auto !important; white-space: nowrap !important; }
  .lib-bar { gap: 6px !important; margin-bottom: 8px !important; }
  .lib-sort { gap: 4px !important; }
  .lib-tools { margin: 4px 0 6px !important; }
  .lib-count { font-size: 11px !important; margin: 2px 0 6px !important; }
}

/* ---------- 17. 再提密度：封面 58% + 列表上移 ----------
   卡片总高 183 → 目标 ~160：封面比例 66%→58%，正文内边距收 2px，标题行高 1.25；
   同时把 banner 下沿到搜索框之间的全宽空白压掉（hero padding-bottom 归零 + 区块上边距 8px）。 */
@media (max-width: 720px) {
  .mat-card .mat-cover { padding-bottom: 58% !important; }
  .mat-card .mat-body { padding: 6px 7px 7px !important; }
  .mat-card .mat-title { font-size: 12px !important; line-height: 1.25 !important; margin-bottom: 2px !important; }
  .mat-card .mat-by { font-size: 10px !important; line-height: 1.2 !important; }
  .mat-card .mat-tag { font-size: 9px !important; padding: 1px 4px !important; }
  .page-hero { padding-bottom: 8px !important; }
  .section, .lib-section, main > section { padding-top: 8px !important; }
  .lib-bar { margin-top: 0 !important; }
}

/* ---------- 18. 搜索与排序并排 + 卡片底栏单行 ----------
   实测（390 视口）：hero 70 / 搜索+排序 90 / 分类条 30 / 工具行 44 / 计数 18 = 卡片从 340px 才开始，
   卡片本身 193px 偏高（底栏按钮换行）。目标：卡片起点 ≤240、卡高 ≤175，一屏 3 行 6 张。 */
@media (max-width: 720px) {
  .lib-bar { flex-wrap: nowrap !important; align-items: center !important; gap: 6px !important; margin-bottom: 6px !important; }
  .lib-search { flex: 1 1 auto !important; min-width: 0 !important; }
  .lib-search input { height: 34px !important; font-size: 12px !important; padding-left: 30px !important; }
  .lib-sort { flex: 0 0 auto !important; }
  .lib-sort > * { height: 32px !important; padding: 0 8px !important; font-size: 11px !important; }
  .lib-tools { margin: 3px 0 3px !important; }
  .lib-tools .btn { height: 30px !important; font-size: 11.5px !important; padding: 0 10px !important; }
  .lib-count { margin: 0 0 5px !important; font-size: 10.5px !important; line-height: 1.2 !important; }
  .mat-card .mat-foot { gap: 2px 4px !important; padding-top: 1px !important; }
  .mat-card .mat-foot > * { font-size: 9px !important; height: 20px !important; padding: 0 5px !important; line-height: 20px !important; }
  .mat-card .mat-foot svg { width: 11px !important; height: 11px !important; }
}

/* ---------- 19. 定位真因：.lib-bar 是 flex-direction:column ----------
   之前只改 flex-wrap 无效，因为方向是纵向，搜索框独占一行、排序掉到第二行（94px）。
   改 row 后搜索吃掉剩余宽度、排序固定 84px，整条 56→34px；同时隐藏卡内 .mat-cat
   （类型徽标已在封面上出现，正文重复占 16px），卡高 193→~172，一屏 3 行 6 张。 */
@media (max-width: 720px) {
  .lib-bar { flex-direction: row !important; align-items: center !important; height: auto !important; min-height: 0 !important; }
  .lib-search { height: 34px !important; padding: 0 !important; align-items: center !important; }
  .lib-search input { height: 34px !important; }
  .mat-card .mat-cat { display: none !important; }
  .mat-card .mat-body { gap: 2px !important; padding: 5px 7px 6px !important; }
  .mat-card .mat-foot { margin-top: 1px !important; }
}

/* ---------- 20. 最后一脚：卡片起点 272 → 265，凑出第三行 ----------
   3 行门槛 = 812 − 3×(174+7) = 269。只差 3px，把分类条下边距、工具行、计数各收 2~3px 即可。 */
@media (max-width: 720px) {
  #libChips { margin-bottom: 4px !important; padding-bottom: 0 !important; }
  .lib-tools { margin: 2px 0 2px !important; }
  .lib-tools .btn { height: 28px !important; line-height: 28px !important; }
  .lib-count { margin: 0 0 4px !important; font-size: 10px !important; }
}

/* ---------- 21. 第三行要落在可视区内（顶部固定头 52px 要扣掉） ----------
   实际可视高度 = 812 − 固定头 52 = 760；3 行门槛 = 760 − 3×(卡高+7)。
   卡高 174 → 168（封面 58%→50%），门槛 235；卡片起点 264 → 230（内页头 70→50、工具行 44→32）。 */
@media (max-width: 720px) {
  .mat-card .mat-cover { padding-bottom: 50% !important; }
  .page-hero { padding: 8px 0 6px !important; }
  .page-hero h1, .page-hero .page-title { font-size: 19px !important; line-height: 1.15 !important; margin: 0 0 2px !important; }
  .page-hero p, .page-hero .lead { font-size: 10.5px !important; line-height: 1.35 !important; margin: 0 !important; display: block !important;
    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  .lib-tools { margin: 1px 0 !important; }
  .lib-tools .btn { height: 26px !important; line-height: 26px !important; font-size: 11px !important; }
}