/* ===========================================================
 * OKAY 广告后台 - 移动端样式优化
 * 仅在视口 <= 768px 时生效，PC 端布局完全不受影响
 * 适配页面: /ad/dashboard /ad/videos /ad/stats
 * =========================================================== */

@media (max-width: 768px) {
  /* ---------- 全局基础 ---------- */
  html,
  body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  /* 防止 iOS 输入框聚焦自动放大页面 */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  /* 容器收窄左右内边距 */
  .max-w-7xl,
  main.max-w-7xl,
  .max-w-6xl {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  main {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  /* 全局卡片圆角与边距收紧 */
  .rounded-2xl {
    border-radius: 12px !important;
  }
  .rounded-xl {
    border-radius: 10px !important;
  }

  /* ---------- 顶部 Header（dashboard / videos 共用） ---------- */
  header {
    padding: 0 !important;
  }

  /* dashboard header 的 max-w 容器 */
  header > .max-w-7xl,
  header .max-w-7xl {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* header 主区域：title + 按钮组 */
  header .h-16 {
    height: auto !important;
    min-height: 56px !important;
    padding: 8px 0 !important;
    gap: 8px !important;
  }

  /* h1 标题：移动端缩字号 + 不允许被挤压换行 ("OKAY 广告后台" 不再撕成两行) */
  header h1 {
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  /* 左侧 logo + 标题 整组不允许收缩, 给右边按钮组留出滚动空间 */
  header > .max-w-7xl > .flex > .flex.items-center.gap-3:first-child,
  header > .max-w-7xl > .flex > .flex.items-center.gap-4:first-child {
    flex-shrink: 0 !important;
    gap: 6px !important;
  }
  /* logo 圆方块缩小 */
  header > .max-w-7xl > .flex > .flex.items-center.gap-3:first-child > div.w-8.h-8,
  header div.w-8.h-8.rounded-lg.bg-primary {
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
  }

  /* dashboard header 右侧按钮组 → 横向滚动 */
  header .flex.items-center.gap-3:last-child,
  header > .max-w-7xl > .flex > .flex.items-center.gap-3:last-child {
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    padding-bottom: 4px;
  }
  header .flex.items-center.gap-3::-webkit-scrollbar {
    display: none;
  }

  /* header 内的按钮再紧凑些, 保留触摸目标 */
  header button,
  header a.flex {
    flex-shrink: 0 !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
    min-height: 34px !important;
    white-space: nowrap;
    gap: 4px !important;
  }
  header button svg,
  header a svg {
    width: 13px !important;
    height: 13px !important;
  }

  /* 拦截记录小红点徽章: 4 位数 (例如 1971) 也能装下不溢出 */
  header #blockCount {
    top: -4px !important;
    right: -4px !important;
    min-width: 16px !important;
    height: 14px !important;
    padding: 0 3px !important;
    font-size: 9px !important;
    line-height: 14px !important;
  }

  /* dashboard header 中的「今日/昨日拦截」紧凑 */
  header .flex-col.items-end.gap-0\.5 {
    display: none !important;
  }

  /* ---------- videos.html header 专属紧凑（h1/副标题/VPN 状态） ---------- */
  /* "视频管理中心" 标题：移动端缩小避免和右侧 VPN 状态挤一行 */
  header h1.text-xl {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  /* 副标题"资源抓取 · 转码发布 · 内容管理" 移动端隐藏，省一行避免挤压 */
  header h1.text-xl + p {
    display: none !important;
  }
  /* 返回按钮和分隔线之间间距收紧 */
  header .flex.items-center.gap-4 {
    gap: 8px !important;
  }
  /* 返回按钮里的"返回"文字：在很窄屏隐藏只留箭头 */
  header a[href="/ad/dashboard"] {
    padding: 6px 8px !important;
    gap: 2px !important;
  }
  /* VPN 状态按钮（NordVPN下载 ...） */
  #vpnStatusBtn {
    padding: 4px 8px !important;
    gap: 4px !important;
  }
  #vpnStatusText {
    font-size: 10px !important;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---------- Dashboard 顶部统计卡片（6 列） ---------- */
  /* 从 sm:grid-cols-2 / lg:grid-cols-6 → 强制 2 列 */
  main .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .stat-card {
    padding: 12px !important;
  }
  .stat-card .text-2xl,
  .stat-card .text-3xl {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }
  .stat-card .text-xs {
    font-size: 10px !important;
  }
  .stat-card svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* dashboard 功能卡片（2 列 → 1 列） */
  .feature-card {
    padding: 16px !important;
  }
  .feature-card:hover {
    transform: none !important;
  }
  .feature-card .text-xl,
  .feature-card .text-2xl {
    font-size: 16px !important;
  }

  /* dashboard 主标题 */
  main h2,
  main h3 {
    font-size: 16px !important;
  }

  /* ---------- videos.html 的 TAB 导航 ---------- */
  /* TAB 容器：移动端改为 grid 2 行 3 列布局，6 个按钮一屏全可见 */
  main > .border-b.border-border.mb-6 > .flex.gap-2,
  .border-b.border-border.mb-6 .flex.gap-2 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    overflow: visible !important;
    flex-wrap: unset !important;
    padding-bottom: 4px !important;
  }

  .tab-btn {
    padding: 8px 4px !important;
    font-size: 13px !important;
    min-height: 38px !important;
    white-space: nowrap;
    text-align: center;
    letter-spacing: 0 !important;
    /* grid 布局下取消 flex-shrink 影响 */
    flex-shrink: unset !important;
  }

  /* 视频管理 / 资源抓取 子分类标签：进一步压缩 */
  .category-tab,
  .crawler-category-tab {
    padding: 4px 6px !important;
    font-size: 11px !important;
    gap: 2px !important;
  }
  .category-tab .cat-num,
  .crawler-category-tab .cat-count {
    font-size: 9px !important;
    padding: 0 4px !important;
  }
  /* 子分类容器横向滚动，去掉滚动条，紧凑间距 */
  .category-tabs-wrap {
    gap: 2px !important;
  }

  /* ---------- 拦截记录列表（dashboard #blockedPanel） ---------- */
  /* 表头 9 列在移动端塞不下，整体隐藏（每条记录卡片化后无需表头） */
  #blockedListHeader {
    display: none !important;
  }
  /* blockedPanel 容器 padding 收紧 */
  #blockedPanel {
    padding: 0 6px !important;
  }

  /* 顶部筛选区（服务器选择 + 访问最多 + 9 个分类徽章 + 时间筛选 + 搜索）
     字号收紧, 与下方记录卡片风格一致 */
  /* 容器整体 gap 收紧 */
  #blockTabNav {
    gap: 4px !important;
  }
  /* 所有筛选按钮 / 输入框 统一基础尺寸 (一次覆盖所有 inline style padding/font-size) */
  #blockTabNav .block-tab,
  #blockTabNav #serverFilterBtn,
  #blockTabNav #sortByCountBtn,
  #blockTabNav .date-filter-btn,
  #blockTabNav #domainSearchInput,
  #blockTabNav button[onclick*="searchDomain"] {
    padding: 4px 8px !important;
    font-size: 10px !important;
    min-height: 26px !important;
  }
  /* 9 个分类按钮 + 服务器筛选 + 访问最多 内部 flex gap 收紧 */
  #blockTabNav .block-tab,
  #blockTabNav #serverFilterBtn,
  #blockTabNav #sortByCountBtn {
    gap: 3px !important;
  }
  /* 各按钮内嵌的数字徽章 (例如 statTotalBlocks / statBackdoorBlocks ...) */
  #blockTabNav span[id^="stat"][id$="Blocks"],
  #blockTabNav span[id="statTotalBlocks"] {
    font-size: 9px !important;
    padding: 0 4px !important;
    line-height: 1.3 !important;
  }
  /* 域名搜索输入框宽度收紧, 让一行能放下「全部 / 输入框 / 搜索」 */
  #blockTabNav #domainSearchInput {
    width: auto !important;
    flex: 1 1 130px;
    min-width: 110px;
  }
  /* 每条拦截记录：9 列 grid → 4 行多列卡片，无需横向滚动 */
  #blockedDetailList > div[style*="grid-template-columns"] {
    grid-template-columns: 56px 1fr auto !important;
    grid-template-areas:
      'time   type    count'
      'ip     ip      status'
      'server path    path'
      'ua     ua      ua' !important;
    gap: 3px 8px !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
    align-items: center !important;
  }
  /* 9 个 span 按 nth-child 投影到对应 grid-area */
  #blockedDetailList > div[style*="grid-template-columns"] > span:nth-child(1) {
    grid-area: time;
    font-size: 10px !important;
    line-height: 1.15 !important;
    text-align: left !important;
  }
  #blockedDetailList > div[style*="grid-template-columns"] > span:nth-child(2) {
    grid-area: type;
    justify-self: start;
    font-size: 10px !important;
    padding: 1px 5px !important;
  }
  #blockedDetailList > div[style*="grid-template-columns"] > span:nth-child(3) {
    grid-area: server;
    font-size: 10px !important;
    color: #c9d1d9 !important;
    max-width: 100px;
  }
  #blockedDetailList > div[style*="grid-template-columns"] > span:nth-child(4) {
    grid-area: status;
    text-align: right !important;
  }
  #blockedDetailList > div[style*="grid-template-columns"] > span:nth-child(4) > span {
    font-size: 10px !important;
  }
  #blockedDetailList > div[style*="grid-template-columns"] > span:nth-child(5) {
    grid-area: ip;
    font-size: 11px !important;
    font-weight: 600;
  }
  /* 第 6 列「地区」移动端隐藏（IP 已经能定位） */
  #blockedDetailList > div[style*="grid-template-columns"] > span:nth-child(6) {
    display: none !important;
  }
  #blockedDetailList > div[style*="grid-template-columns"] > span:nth-child(7) {
    grid-area: path;
    font-size: 10px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #blockedDetailList > div[style*="grid-template-columns"] > span:nth-child(8) {
    grid-area: count;
    font-size: 10px !important;
    text-align: right !important;
  }
  #blockedDetailList > div[style*="grid-template-columns"] > span:nth-child(9) {
    grid-area: ua;
    font-size: 9px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.85;
  }

  /* TAB 内主内容区 padding 收紧 */
  .tab-panel {
    padding: 0 !important;
  }
  .tab-panel .space-y-6 > * + *,
  .tab-panel .space-y-4 > * + * {
    margin-top: 12px !important;
  }

  /* TAB 内的 grid 大多是 PC 4-6 列 → 移动端 2 列 */
  .tab-panel .grid.grid-cols-2.md\:grid-cols-4,
  .tab-panel .grid.grid-cols-2.lg\:grid-cols-4,
  .tab-panel .grid.grid-cols-1.md\:grid-cols-3,
  .tab-panel .grid.grid-cols-1.md\:grid-cols-4,
  .tab-panel .grid.grid-cols-1.lg\:grid-cols-3,
  .tab-panel .grid.grid-cols-1.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* 写死的 grid-cols-3 / grid-cols-4 / grid-cols-5（无响应式前缀） → 移动端 2 列
     典型：自动抓取配置、PikPak 账号、广告位等 */
  .tab-panel .grid.grid-cols-3:not([class*='md:']):not([class*='lg:']),
  .tab-panel .grid.grid-cols-4:not([class*='md:']):not([class*='lg:']),
  .tab-panel .grid.grid-cols-5:not([class*='md:']):not([class*='lg:']),
  .tab-panel .grid.grid-cols-6:not([class*='md:']):not([class*='lg:']) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* 视频缩略图卡片网格 */
  .tab-panel .grid.grid-cols-2.sm\:grid-cols-3.md\:grid-cols-4.lg\:grid-cols-6,
  .tab-panel .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  /* ---------- 视频管理「文件夹视图」卡片（PC 2 列 → 移动端 1 列） ---------- */
  /* 卡片是 flex 布局：左边缩略图 + 右边信息区，2 列时右侧只剩 ~38px 太挤 */
  #folderList.grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* 缩略图缩小一点：w-32 h-44 → w-24 h-36，给右侧更多空间 */
  #folderList .w-32 {
    width: 6rem !important; /* 96px */
  }
  #folderList .h-44 {
    height: 9rem !important; /* 144px */
  }
  #folderList .w-28 {
    width: 6rem !important;
  }

  /* 右侧信息区收紧 padding */
  #folderList .flex-1.p-3 {
    padding: 8px 10px !important;
  }
  /* 标题文字略大、行数限制 */
  #folderList h4.text-sm {
    font-size: 13px !important;
  }
  /* 已发布 / 切换按钮区不要换行挤下去 */
  #folderList .flex.items-center.justify-between {
    gap: 8px !important;
  }

  /* ---------- 自动抓取配置卡片（grid-cols-4 强制写死） ---------- */
  /* 进一步收紧每个分类卡片内部 */
  #autoCrawlConfig .grid.grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  /* 单个分类卡片：分类名横排（不竖向折），开关右对齐 */
  #autoCrawlConfig .p-3 {
    padding: 10px !important;
  }
  /* 数量输入框 + "条/次" 单位 */
  #autoCrawlConfig input[type='number'].w-20 {
    width: 56px !important;
    padding: 4px 6px !important;
  }
  /* 「综合小说」卡片中的子分类列表（都市激情/校园情事…）
     原本 flex-wrap 但每个 chip 会被压窄 → 改用更紧凑的 inline-flex */
  #autoCrawlConfig .flex.flex-wrap.gap-1 {
    gap: 4px !important;
  }
  #autoCrawlConfig .flex.flex-wrap.gap-1 > span {
    flex: 0 0 calc(50% - 2px) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 「自动抓取配置」标题区（含「立即执行」+「抓取中」按钮）允许换行 */
  #tab-crawler .bg-card .p-4.border-b.border-border {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  /* 2026-05-29 改: crawlIntervalPicker 已删 → dailyCrawlStatus 紧凑显示 */
  #dailyCrawlStatus {
    max-width: 100%;
    flex-wrap: wrap;
  }
  /* 「📦 抓取下载 N」徽章和按钮组在小屏不被挤压 */
  #totalCrawlDownloadCount,
  #crawlActionBtn {
    white-space: nowrap;
  }

  /* ---------- 任务队列 TAB（#tab-tasks）顶部工具栏 ---------- */
  /* 5 个按钮：💧 水印配置 / 🔥 批量重转早期视频 / 📖 文档 / ⚙️ 转码配置 / 上限 X/X
     原本 flex justify-end gap-2 不换行 → 在小屏挤成竖向单字 */
  #processorStatusBar {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  #processorStatusBar button,
  #processorStatusBar > .relative.group > button {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
  }
  /* 转码配置悬浮提示框（420px 宽）在小屏改为接近全屏宽 */
  #processorStatusBar .absolute.right-0.bottom-full {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    right: 0 !important;
  }

  /* ---------- 任务面板：BT下载 / FF下载 / 转码中 / 图水印 主 Tab ---------- */
  /* 这些按钮所在容器是 inline-style flex；用 :has() 命中父容器，强制横向滚动
     避免按钮宽度被压缩导致中文竖向折行（"BT 下 载"） */
  #tab-tasks div:has(> button[id^='mainTab']),
  #tab-tasks div:has(> button[id^='subTab']) {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px;
  }
  #tab-tasks div:has(> button[id^='mainTab'])::-webkit-scrollbar,
  #tab-tasks div:has(> button[id^='subTab'])::-webkit-scrollbar {
    display: none;
  }

  /* 所有主 / 子 Tab 按钮：永不竖向折行 + 不被压缩 */
  #tab-tasks button[id^='mainTab'],
  #tab-tasks button[id^='subTab'] {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 8px 12px !important;
  }
  #tab-tasks button[id^='mainTab'] {
    font-size: 12px !important;
  }
  #tab-tasks button[id^='subTab'] {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }
  /* 按钮内部的图标 + 文字 + 徽章数字也保持单行 */
  #tab-tasks button[id^='mainTab'] span,
  #tab-tasks button[id^='subTab'] span {
    white-space: nowrap !important;
  }

  /* ---------- 广告配置 TAB 顶部 banner ---------- */
  /* banner 样式由"通用 TAB banner"规则统一处理（见后段） */
  /* iframe 在移动端 height: calc(100vh - 280px) 减得过多，调整 */
  #tab-ads .bg-card.border.border-border.rounded-xl.overflow-hidden[style*='100vh'] {
    height: calc(100vh - 200px) !important;
    min-height: 500px !important;
  }

  /* ---------- campaigns.html (广告活动管理 iframe 内) ---------- */
  /* 用 body.page-campaigns 命名空间区分（campaigns.html 的 body 加了这个 class） */

  /* 顶部 header (📢 广告活动管理 + 创建广告 按钮) → 紧凑化并和下方筛选块视觉融合 */
  body.page-campaigns header {
    border-bottom: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.page-campaigns header > .max-w-\[1600px\] {
    padding: 0 12px !important;
  }
  body.page-campaigns header .h-16 {
    height: 40px !important;
    min-height: 40px !important;
  }
  body.page-campaigns header span.text-lg {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  }
  body.page-campaigns header button.btn-primary {
    padding: 5px 10px !important;
    font-size: 11px !important;
    height: 28px !important;
    border-radius: 8px !important;
    gap: 3px !important;
  }
  body.page-campaigns header button.btn-primary svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* main 容器收紧 padding，紧贴 header */
  body.page-campaigns main.max-w-\[1600px\] {
    padding: 0 12px 12px !important;
  }
  body.page-campaigns main.space-y-6 > * + * {
    margin-top: 8px !important;
  }

  /* 筛选面板顶部按钮（折叠开关 + 统计） */
  body.page-campaigns .flex.items-center.justify-between.p-4 {
    padding: 10px 12px !important;
  }
  body.page-campaigns .type-filter-btn,
  body.page-campaigns .icon-category-btn,
  body.page-campaigns .text-category-btn,
  body.page-campaigns .text-label-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
    min-height: 32px;
    flex: 0 0 auto;
  }

  /* 批量操作栏（已选 N 个 + 输入框 + 4 按钮）
     → 移动端用 grid 拆成 3 行：
       第1行: 已选 N 个
       第2行: [旧值输入]   [新值输入]   ← 隐藏 → 箭头
       第3行: [替换][启动][暂停][删除]   ← 4 按钮等分一行 */
  body.page-campaigns
    .bg-card.border.border-border.rounded-lg
    > .flex.items-center.gap-3.p-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-areas:
      'count count count count'
      'old   old   new   new'
      'b1    b2    b3    b4' !important;
    gap: 8px 6px !important;
    padding: 10px !important;
  }
  /* 内层 div(input+arrow+input+按钮) display:contents 拍扁，让子元素直接参与外层 grid */
  body.page-campaigns
    .bg-card.border.border-border.rounded-lg
    > .flex.items-center.gap-3.p-4
    > .flex.items-center.gap-2.flex-1 {
    display: contents !important;
  }
  /* 已选 N 个：第一行靠左 */
  body.page-campaigns #panel-selected-count {
    grid-area: count !important;
    justify-self: start !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
  }
  /* 输入框：第 2 行各占 2 列 */
  body.page-campaigns input#bulk-old-url {
    grid-area: old !important;
    flex: none !important;
  }
  body.page-campaigns input#bulk-new-url {
    grid-area: new !important;
    flex: none !important;
  }
  body.page-campaigns input[id^='bulk-'] {
    padding: 8px 10px !important;
    font-size: 12px !important;
    min-width: 0 !important;
  }
  /* 隐藏 → 箭头和分隔线 */
  body.page-campaigns
    .bg-card.border.border-border.rounded-lg
    > .flex.items-center.gap-3.p-4
    span.text-muted-foreground,
  body.page-campaigns
    .bg-card.border.border-border.rounded-lg
    > .flex.items-center.gap-3.p-4
    > .h-8.w-px {
    display: none !important;
  }
  /* 4 个按钮统一：等分占整行 */
  body.page-campaigns
    .bg-card.border.border-border.rounded-lg
    > .flex.items-center.gap-3.p-4
    button[onclick*='executeBulkLink'] {
    grid-area: b1 !important;
  }
  body.page-campaigns
    .bg-card.border.border-border.rounded-lg
    > .flex.items-center.gap-3.p-4
    > button:nth-of-type(1) {
    grid-area: b2 !important;
  }
  body.page-campaigns
    .bg-card.border.border-border.rounded-lg
    > .flex.items-center.gap-3.p-4
    > button:nth-of-type(2) {
    grid-area: b3 !important;
  }
  body.page-campaigns
    .bg-card.border.border-border.rounded-lg
    > .flex.items-center.gap-3.p-4
    > button:nth-of-type(3) {
    grid-area: b4 !important;
  }
  body.page-campaigns
    .bg-card.border.border-border.rounded-lg
    > .flex.items-center.gap-3.p-4
    button {
    padding: 8px 4px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* === 关键：广告列表 8 列表格 → 卡片化 === */
  body.page-campaigns table.w-full,
  body.page-campaigns table {
    display: block !important;
  }
  body.page-campaigns thead {
    display: none !important; /* 表头在移动端没意义 */
  }
  body.page-campaigns tbody {
    display: block !important;
  }
  body.page-campaigns tr.ad-row {
    display: grid !important;
    grid-template-areas:
      'check order pos status'
      'media media media media'
      'url url url url'
      'advertiser advertiser advertiser advertiser'
      'actions actions actions actions';
    grid-template-columns: auto auto 1fr auto;
    gap: 6px 8px;
    padding: 12px 10px !important;
    border: 1px solid #30363d;
    border-radius: 10px;
    margin-bottom: 8px;
    background: #161b22;
  }
  body.page-campaigns tr.ad-row > td {
    padding: 0 !important;
    border: 0 !important;
    display: flex;
    align-items: center;
  }
  /* 每个 td 按内容定位到对应 grid area */
  body.page-campaigns tr.ad-row > td:nth-child(1) {
    grid-area: check;
  }
  body.page-campaigns tr.ad-row > td:nth-child(2) {
    grid-area: order;
    font-size: 14px;
    font-weight: 600;
  }
  body.page-campaigns tr.ad-row > td:nth-child(3) {
    grid-area: pos;
    justify-self: start;
  }
  body.page-campaigns tr.ad-row > td:nth-child(4) {
    grid-area: media;
  }
  body.page-campaigns tr.ad-row > td:nth-child(5) {
    grid-area: url;
    max-width: 100% !important;
    font-size: 11px;
    color: #8b949e;
    word-break: break-all;
    white-space: normal !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  body.page-campaigns tr.ad-row > td:nth-child(6) {
    grid-area: advertiser;
  }
  body.page-campaigns tr.ad-row > td:nth-child(6) input {
    width: 100% !important;
  }
  body.page-campaigns tr.ad-row > td:nth-child(7) {
    grid-area: status;
    justify-self: end;
  }
  body.page-campaigns tr.ad-row > td:nth-child(8) {
    grid-area: actions;
    border-top: 1px solid #30363d;
    padding-top: 8px !important;
    margin-top: 4px;
    width: 100%;
  }
  /* 4 个图标按钮 grid 等分撑满整行（不再靠右） */
  body.page-campaigns tr.ad-row > td:nth-child(8) > div {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    width: 100% !important;
    justify-content: stretch !important;
  }
  body.page-campaigns tr.ad-row > td:nth-child(8) > div > button,
  body.page-campaigns tr.ad-row > td:nth-child(8) > div > .drag-handle {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* 图片区域：图片缩小 */
  body.page-campaigns tr.ad-row img.h-12 {
    height: 56px !important;
    max-width: 96px !important;
  }
  /* 名称 + 标签区域 */
  body.page-campaigns tr.ad-row p.font-medium {
    max-width: 100% !important;
    font-size: 13px;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  /* 操作按钮加大触摸目标 */
  body.page-campaigns tr.ad-row td:nth-child(8) button,
  body.page-campaigns tr.ad-row td:nth-child(8) .drag-handle {
    padding: 8px !important;
    min-width: 36px;
    min-height: 36px;
  }

  /* 模态框（创建广告 / 编辑广告）适配 */
  body.page-campaigns [class*='modal-content'],
  body.page-campaigns .modal-backdrop > div {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 92vh !important;
  }
  body.page-campaigns .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* 文字广告专用列表 #text-ad-rows */
  body.page-campaigns #text-ad-rows .grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  /* TAB 内的 padding-large 卡片 */
  .tab-panel .p-6,
  .tab-panel .rounded-2xl.p-6 {
    padding: 14px !important;
  }

  /* ---------- 表格通用收紧（stats.html / videos 任务表 / 站点表） ---------- */
  table {
    font-size: 12px !important;
  }
  table th,
  table td {
    padding: 8px 6px !important;
    white-space: nowrap;
  }
  /* 表格容器横向滚动 */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }

  /* stats 大数字稍微缩 */
  table td.text-lg {
    font-size: 14px !important;
  }
  table td.text-2xl,
  table td.text-3xl {
    font-size: 18px !important;
  }

  /* stats 顶部「30 分钟趋势图」的 lg:col-span-2 在小屏占满整行已经默认，不动 */

  /* ---------- 模态框（白名单 / 防御中心 / 媒体服务器添加 / 部署进度） ---------- */
  /* 兼容内联 style 的固定 max-width */
  [id$='Panel'] > div,
  [id$='Modal'] > div,
  [class*='modal-content'],
  [class*='Modal'] > div[style*='max-width'] {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 92vh !important;
  }

  /* 2026-05-08 修复 modal 内容溢出穿透问题:
       之前只限制 max-height: 92vh 但没加 overflow-y: auto, 内容超长时溢出
       到卡片外, 叠在外层 bg-black/50 半透明蒙版上, 后面页面内容(如视频列表
       缩略图)直接透出来 → 视觉上像卡片"半透明"。
       注意: 不能套到 Panel 上(vpnPanel 自己已经有专门的 fixed 全屏样式)。 */
  [id$='Modal'] > div,
  [class*='Modal'] > div[style*='max-width'] {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background-color: #161b22 !important;
  }

  /* 底部按钮区不要被挤到屏幕外 */
  [id$='Panel'] [style*='justify-content: flex-end'],
  [id$='Modal'] [style*='justify-content: flex-end'] {
    flex-wrap: wrap;
    gap: 8px !important;
  }
  [id$='Panel'] button,
  [id$='Modal'] button {
    min-height: 40px !important;
  }

  /* 模态框内部网格在小屏统一变 1 列 */
  [id$='Panel'] .grid.grid-cols-2,
  [id$='Modal'] .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* ---------- 拦截记录大面板（dashboard 的 BlockedPanel） ---------- */
  /* 拦截记录通常是宽表格，启用横向滚动 */
  #blockedPanel,
  #blockedRecordsPanel {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #blockedPanel table,
  #blockedRecordsPanel table {
    min-width: 720px;
  }

  /* 顶部「全部服务器/搜索/分类」筛选栏：换行 */
  #blockedPanel .flex.items-center.gap-2,
  #blockedRecordsPanel .flex.items-center.gap-2 {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* ---------- 表单/输入区域 ---------- */
  textarea {
    min-height: 100px;
  }

  /* 通用按钮触摸目标 */
  button {
    min-height: 36px;
  }

  /* ---------- Toast / 通知位置（防止贴边） ---------- */
  .toast,
  .toast-container {
    left: 8px !important;
    right: 8px !important;
    max-width: calc(100vw - 16px) !important;
    bottom: 12px !important;
  }
  .toast {
    font-size: 13px !important;
    padding: 10px 14px !important;
  }

  /* ---------- 搜索/抓取条等水平排列的输入组 ---------- */
  .tab-panel .flex.items-center.gap-4 {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .tab-panel .flex.items-center.gap-3 {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* 视频管理 / 任务队列里的「分页+刷新+搜索」按钮组 */
  .tab-panel .flex.justify-between {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ---------- VPN 控制面板（videos header 内嵌） ---------- */
  /* 移动端改为「全屏覆盖」式: header 下方铺满到屏幕底部, 用 ID 选择器
     保证优先级压过 Tailwind w-96/absolute/right-0/top-full/overflow-hidden */
  /* 修复 2026-05-08:
     - 之前用 bottom:0 + max-height:85vh 抽屉式, 在某些设备上滚动条停在底部
       导致用户只看到「断开连接/刷新」两个按钮.
     - 之前用 body:has() 加遮罩, 但 :has() 旧浏览器不支持 (Safari < 15.4),
       会让整段 CSS 被忽略导致面板根本不显示.
     - Tailwind 的 .overflow-hidden 可能覆盖 overflow-y:auto, 导致内部不滚动. */
  /* 兜底：禁用 sticky header 的 backdrop-filter，避免它创建 containing block
     导致 vpnPanel 的 position:fixed 不能相对 viewport 全屏（CSS 规范陷阱）。
     - JS 已在移动端把 panel 移到 body 下，这条作为双保险。 */
  body > header.sticky.backdrop-blur,
  body > header[class*='backdrop-'] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #vpnPanel:not(.hidden) {
    position: fixed !important;
    display: block !important;
    top: 64px !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    overflow: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 9999 !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4) !important;
    background: var(--card, #1a1a1a) !important;
  }
  /* 地区按钮 grid: 桌面 5 列, 移动端 5 列旗帜在 375px 屏太挤, 改成 4 列 */
  #vpnPanel #vpnQuickRegions.grid-cols-5 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  /* 收藏节点按钮稍微加大点击区 */
  #vpnPanel .grid.grid-cols-2 button {
    padding: 8px 6px !important;
    font-size: 12px !important;
  }

  /* ---------- 媒体服务器卡片（dashboard 底部） ---------- */
  #mediaServersList .grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* ---------- 字体降级 ---------- */
  .text-2xl {
    font-size: 18px !important;
  }
  .text-3xl {
    font-size: 22px !important;
  }
  .text-4xl {
    font-size: 24px !important;
  }
  .text-5xl {
    font-size: 30px !important;
  }

  /* ---------- 视频缩略图比例锁定 ---------- */
  .tab-panel img.aspect-video,
  .tab-panel .aspect-video img {
    width: 100% !important;
    height: auto !important;
  }

  /* ---------- 「资源抓取」搜索 + 操作区 ---------- */
  #tab-crawler .flex.items-center.gap-4 input[type='text'],
  #tab-crawler .flex.items-center.gap-4 input[type='search'] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  /* ===========================================================
   * 任务队列 (#tab-tasks) 9 宫格状态卡片紧凑化
   * 默认 grid-cols-4: 单行 4 个, 单卡从 ~80px 高压到 ~52px
   * =========================================================== */
  #tab-tasks > .grid.grid-cols-4 {
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  #tab-tasks > .grid.grid-cols-4 > div {
    padding: 6px 8px !important;
    border-radius: 9px !important;
  }
  /* 顶行: emoji + 文字标题 + 角标(暂停中/刷新) */
  #tab-tasks > .grid.grid-cols-4 > div > .flex.items-center.gap-2.mb-1 {
    margin-bottom: 2px !important;
    gap: 3px !important;
  }
  #tab-tasks > .grid.grid-cols-4 > div .text-sm {
    font-size: 11px !important;
  }
  #tab-tasks > .grid.grid-cols-4 > div .text-xs.text-muted-foreground {
    font-size: 10px !important;
    line-height: 1.15 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* 大数字: text-xl(20px) → 16px */
  #tab-tasks > .grid.grid-cols-4 > div p.text-xl {
    font-size: 16px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }
  /* 服务器监控卡片底部「HLS 5703 | 完成 63%」副文字 */
  #tab-tasks > .grid.grid-cols-4 > div p.text-xs.text-muted-foreground {
    font-size: 9px !important;
    margin-top: 1px !important;
  }
  /* "暂停中" 小徽章压缩 */
  #tab-tasks > .grid.grid-cols-4 #downloadPausedBadge,
  #tab-tasks > .grid.grid-cols-4 #transcodePausedBadge {
    font-size: 8px !important;
    padding: 0 3px !important;
    line-height: 1.4 !important;
    border-radius: 4px !important;
  }
  /* 转码失败卡片内的「重试」按钮 */
  #tab-tasks #retryFailedBtn {
    padding: 2px 6px !important;
    font-size: 9px !important;
    min-height: 18px !important;
  }
  #tab-tasks > .grid.grid-cols-4 > div .flex.items-center.gap-2:last-child {
    gap: 4px !important;
  }

  /* ===========================================================
   * 任务工具栏：5 个按钮 grid 等分撑满整行
   * 💧 水印配置 / 🔥 重转旧片(MB)/批量重转早期视频(PC) / 📖 文档 / ⚙️ 转码配置 / 上限 X/X
   * =========================================================== */
  #processorStatusBar {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 4px !important;
    padding: 6px !important;
    margin-bottom: 10px !important;
    overflow: visible !important;
    align-items: stretch !important;
  }
  #processorStatusBar > button,
  #processorStatusBar > button[onclick*='openConcurrentModal'] {
    width: 100% !important;
    min-width: 0 !important;
    padding: 6px 4px !important;
    font-size: 10px !important;
    min-height: 32px !important;
    border-radius: 8px !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    gap: 2px !important;
  }
  /* .relative.group 是「转码配置」按钮的悬浮包装容器，本身要撑满 grid 列 */
  #processorStatusBar > .relative.group {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
  }
  #processorStatusBar > .relative.group > button {
    width: 100% !important;
    padding: 6px 4px !important;
    font-size: 10px !important;
    min-height: 32px !important;
    border-radius: 8px !important;
    justify-content: center !important;
    white-space: nowrap !important;
    gap: 2px !important;
  }
  #processorStatusBar #concurrentValue,
  #processorStatusBar #downloadConcurrentBadge,
  #processorStatusBar #transcodeConcurrentBadge,
  #processorStatusBar span.text-xs {
    font-size: 10px !important;
  }

  /* ===========================================================
   * 自动抓取配置卡片：单卡内部全面紧凑化
   * 每张分类卡片从 ~120px 压到 ~85px
   * =========================================================== */
  #autoCrawlConfig {
    padding: 8px !important;
  }
  #autoCrawlConfig .grid.grid-cols-4 {
    gap: 6px !important;
  }
  /* 卡片本体 padding 收紧 */
  #autoCrawlConfig .grid > div.p-3 {
    padding: 8px !important;
    border-radius: 10px !important;
  }
  /* 顶行: emoji + 分类名 + 开关 */
  #autoCrawlConfig .grid > div .flex.items-center.justify-between.mb-2 {
    margin-bottom: 4px !important;
    gap: 4px !important;
  }
  #autoCrawlConfig .grid > div .text-sm.font-medium {
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 开关再小一点 */
  #autoCrawlConfig label.relative .w-8.h-4 {
    width: 26px !important;
    height: 14px !important;
  }
  /* 中间行: 数量输入框 + 条/次 + 下载量 */
  #autoCrawlConfig input[type='number'].w-20 {
    width: 44px !important;
    padding: 2px 4px !important;
    font-size: 12px !important;
  }
  #autoCrawlConfig .grid > div .text-xs {
    font-size: 10px !important;
  }
  /* 抓取源切换行 (1024 / T66Y / JM) */
  #autoCrawlConfig .border-t.border-border\/50 {
    margin-top: 6px !important;
    padding-top: 6px !important;
  }
  #autoCrawlConfig .border-t.border-border\/50 button {
    padding: 2px 5px !important;
    min-height: 20px !important;
    font-size: 10px !important;
  }
  /* 综合小说卡片中的 8 个子分类开关 */
  #autoCrawlConfig .flex.flex-wrap.gap-1 {
    margin-top: 4px !important;
    gap: 3px !important;
  }
  #autoCrawlConfig .flex.flex-wrap.gap-1 > span {
    font-size: 9px !important;
  }

  /* ===========================================================
   * 「自动抓取配置」标题区：4 元素单行紧凑
   * [🤖 自动抓取配置] [📦 4515] [▶立即执行▼] [🚀抓取并下载]
   * =========================================================== */
  #tab-crawler .bg-card .p-4.border-b.border-border {
    padding: 6px 8px !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    align-items: center !important;
    overflow: hidden !important;
  }
  /* A 块（图标 + 标题）：可压缩、文字 ellipsis */
  #tab-crawler
    .bg-card
    .p-4.border-b.border-border
    > .flex.items-center.gap-3 {
    gap: 4px !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  #tab-crawler
    .bg-card
    .p-4.border-b.border-border
    > .flex.items-center.gap-3
    > span.text-xl {
    font-size: 13px !important;
    flex-shrink: 0 !important;
  }
  #tab-crawler .bg-card .p-4.border-b.border-border h3 {
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* 副标题在移动端隐藏 */
  #tab-crawler
    .bg-card
    .p-4.border-b.border-border
    .flex.items-center.gap-3
    > div
    > p.text-xs {
    display: none !important;
  }
  /* B 块（徽章）：固定不压缩 */
  #tab-crawler
    .bg-card
    .p-4.border-b.border-border
    > .flex.items-center.gap-4.text-xs {
    flex: 0 0 auto !important;
    gap: 0 !important;
  }
  #totalCrawlDownloadCount,
  #tab-crawler
    .bg-card
    .p-4.border-b.border-border
    span.bg-green-500\/20 {
    font-size: 9px !important;
    padding: 2px 5px !important;
    white-space: nowrap !important;
  }
  /* C 块（自动调度状态 + 立即执行按钮）：固定不压缩，紧凑显示 */
  #tab-crawler
    .bg-card
    .p-4.border-b.border-border
    > .flex.gap-2.items-center {
    flex: 0 0 auto !important;
    gap: 4px !important;
    display: flex !important;
    width: auto !important;
    flex-wrap: wrap !important;
  }
  /* 2026-05-29: 每日 00:00 自动调度状态标签 */
  #dailyCrawlStatus {
    font-size: 9px !important;
    padding: 4px 6px !important;
    gap: 3px !important;
    min-height: 26px !important;
    line-height: 1.2 !important;
  }
  #dailyCrawlStatus span {
    font-size: 9px !important;
  }
  /* 「下次: Xh Ym」副文字稍小 */
  #dailyCrawlNext {
    font-size: 9px !important;
    padding-left: 4px !important;
  }
  #crawlActionBtn {
    padding: 4px 6px !important;
    font-size: 9px !important;
    min-width: 0 !important;
    width: auto !important;
    gap: 2px !important;
    min-height: 26px !important;
    white-space: nowrap !important;
    justify-content: center !important;
  }
  #crawlActionBtn span {
    font-size: 9px !important;
  }
  /* 「🚀」图标稍小 */
  #crawlActionIcon {
    font-size: 11px !important;
  }

  /* ===========================================================
   * 通用：所有 TAB 顶部渐变 banner（crawler/sites/ads/videos）
   * 单行紧凑：[图标 标题] [4 按钮] 全部并排
   * =========================================================== */
  .tab-panel > .space-y-6 > div.bg-gradient-to-r:first-child {
    padding: 8px 10px !important;
    border-radius: 12px !important;
  }
  .tab-panel
    > .space-y-6
    > div.bg-gradient-to-r:first-child
    > .flex.items-center.gap-4 {
    gap: 6px !important;
    margin-bottom: 0 !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }
  /* 图标盒子 48×48 → 28×28 */
  .tab-panel
    > .space-y-6
    > div.bg-gradient-to-r:first-child
    .w-12.h-12 {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }
  .tab-panel
    > .space-y-6
    > div.bg-gradient-to-r:first-child
    .text-2xl {
    font-size: 14px !important;
  }
  /* 标题区可压缩 */
  .tab-panel
    > .space-y-6
    > div.bg-gradient-to-r:first-child
    > .flex.items-center.gap-4
    > .flex-1 {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  /* 标题统一缩小 + ellipsis */
  .tab-panel > .space-y-6 > div.bg-gradient-to-r:first-child h2 {
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* 副标题在移动端隐藏，省一行 */
  .tab-panel > .space-y-6 > div.bg-gradient-to-r:first-child h2 + p {
    display: none !important;
  }
  /* banner 按钮组：固定不压缩，flex 紧凑 */
  .tab-panel
    > .space-y-6
    > div.bg-gradient-to-r:first-child
    > .flex.items-center.gap-4
    > .flex.gap-2 {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    width: auto !important;
    margin-top: 0 !important;
  }
  /* banner 按钮统一紧凑 */
  .tab-panel
    > .space-y-6
    > div.bg-gradient-to-r:first-child
    button,
  .tab-panel > .space-y-6 > div.bg-gradient-to-r:first-child a {
    min-width: 0 !important;
    padding: 4px 6px !important;
    font-size: 9px !important;
    min-height: 26px !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    gap: 2px !important;
    border-radius: 7px !important;
    flex-shrink: 0 !important;
  }

  /* ===========================================================
   * 一级 TAB（资源抓取/服务器监控/任务队列/视频管理/站点配置/广告配置）
   * 已存在 grid 3 列布局，进一步压缩
   * =========================================================== */
  .tab-btn {
    padding: 6px 2px !important;
    font-size: 11px !important;
    min-height: 34px !important;
  }

  /* ===========================================================
   * 自动抓取配置卡片再压一档（每张卡片高度从 ~85 → ~72px）
   * =========================================================== */
  #autoCrawlConfig {
    padding: 6px !important;
  }
  #autoCrawlConfig .grid.grid-cols-4 {
    gap: 4px !important;
  }
  #autoCrawlConfig .grid > div.p-3 {
    padding: 6px 7px !important;
    border-radius: 9px !important;
  }
  #autoCrawlConfig .grid > div .flex.items-center.justify-between.mb-2 {
    margin-bottom: 3px !important;
  }
  /* 综合小说 8 个子分类开关再缩 */
  #autoCrawlConfig .flex.flex-wrap.gap-1 > span {
    font-size: 8px !important;
  }
  /* 抓取源切换行（1024/T66Y/JM）padding 再小一档 */
  #autoCrawlConfig .border-t.border-border\/50 {
    margin-top: 4px !important;
    padding-top: 4px !important;
  }
  #autoCrawlConfig .border-t.border-border\/50 button {
    padding: 1px 4px !important;
    min-height: 18px !important;
    font-size: 9px !important;
  }
  /* 抓取源标签"抓取源" */
  #autoCrawlConfig .border-t.border-border\/50 span.text-muted-foreground {
    font-size: 9px !important;
  }

  /* ===========================================================
   * 抓取下载记录表格 (11 列) → 移动端卡片化
   * 表头隐藏，每行改 grid-template-areas 卡片布局：
   *   ┌────┬─────────────┬──────┐
   *   │封面│视频名称       │ 状态 │
   *   │    ├──────────┬───┴──────┤
   *   │    │抓取源     │  时间    │
   *   ├────┴──────────┴──────────┤
   *   │ 下载进度条                  │
   *   ├──────────────────────────┤
   *   │ 热搜标签徽章群               │
   *   └──────────────────────────┘
   * =========================================================== */
  /* 表头隐藏（不带 .crawler-row 的就是表头） */
  #tab-crawler .grid[class*='grid-cols-\\[50px']:not(.crawler-row) {
    display: none !important;
  }
  /* 数据行：覆盖原来的 11 列 grid，改成 3 区域卡片 */
  #crawlerHistory > .grid.crawler-row {
    display: grid !important;
    grid-template-columns: 56px 1fr auto !important;
    grid-template-areas:
      'cover title    status'
      'cover meta     time'
      'tags  tags     tags'
      'progress progress progress' !important;
    gap: 4px 8px !important;
    padding: 8px 10px !important;
    margin-bottom: 6px !important;
    border: 1px solid #30363d !important;
    border-radius: 8px !important;
    background: #161b22 !important;
    align-items: center !important;
    font-size: 10px !important;
  }
  /* 封面（第 1 列）：跨 2 行 */
  #crawlerHistory > .grid.crawler-row > div:nth-child(1) {
    grid-area: cover !important;
    align-self: start !important;
  }
  /* 抓取源（第 2 列）→ meta */
  #crawlerHistory > .grid.crawler-row > div:nth-child(2) {
    grid-area: meta !important;
    font-size: 10px !important;
    text-align: left !important;
  }
  /* 类目（第 3 列）：移动端隐藏（次要） */
  #crawlerHistory > .grid.crawler-row > div:nth-child(3) {
    display: none !important;
  }
  /* 视频名称（第 4 列）→ title */
  #crawlerHistory > .grid.crawler-row > div:nth-child(4) {
    grid-area: title !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #crawlerHistory > .grid.crawler-row > div:nth-child(4) > span {
    font-size: 12px !important;
  }
  /* 热搜标签（第 5 列）→ tags */
  #crawlerHistory > .grid.crawler-row > div:nth-child(5) {
    grid-area: tags !important;
    text-align: left !important;
    font-size: 9px !important;
    line-height: 1.5 !important;
  }
  /* 大小（第 6 列）：移动端隐藏 */
  #crawlerHistory > .grid.crawler-row > div:nth-child(6) {
    display: none !important;
  }
  /* 时长（第 7 列）：移动端隐藏 */
  #crawlerHistory > .grid.crawler-row > div:nth-child(7) {
    display: none !important;
  }
  /* 下载进度（第 8 列）→ progress */
  #crawlerHistory > .grid.crawler-row > div:nth-child(8) {
    grid-area: progress !important;
    text-align: left !important;
    font-size: 9px !important;
  }
  /* 整理按钮（第 9 列）：移动端隐藏（按钮可在详情进入） */
  #crawlerHistory > .grid.crawler-row > div:nth-child(9) {
    display: none !important;
  }
  /* 时间（第 10 列）→ time */
  #crawlerHistory > .grid.crawler-row > div:nth-child(10) {
    grid-area: time !important;
    text-align: right !important;
    font-size: 9px !important;
    white-space: nowrap !important;
  }
  /* 状态（第 11 列）→ status */
  #crawlerHistory > .grid.crawler-row > div:nth-child(11) {
    grid-area: status !important;
    text-align: right !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
  }
  /* 封面图片缩小 */
  #crawlerHistory > .grid.crawler-row img {
    width: 56px !important;
    height: 56px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
  }
  /* 热搜标签徽章紧凑 */
  #crawlerHistory > .grid.crawler-row .text-xs.text-center span,
  #crawlerHistory > .grid.crawler-row > div:nth-child(5) span {
    font-size: 9px !important;
    padding: 1px 4px !important;
  }

  /* ===========================================================
   * 任务面板（#tab-tasks 下半部分）整体紧凑化
   * 容器: <div style="background: #0d1117; ... padding: 1rem">
   * 内含: 主Tab(BT/FF/转码/图水印) + 子Tab(正在下载/故障/...) + 表头 + 任务行
   * =========================================================== */
  /* 任务面板外壳 padding 1rem → 8px */
  #tab-tasks > div[style*='background: #0d1117'] {
    padding: 8px !important;
  }

  /* --- 主 Tab 行（4 按钮 grid 等分撑满）--- */
  #tab-tasks > div[style*='background: #0d1117'] > div:first-child {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
    overflow: visible !important;
  }
  #tab-tasks button[id^='mainTab'] {
    width: 100% !important;
    min-width: 0 !important;
    padding: 7px 4px !important;
    font-size: 11px !important;
    gap: 3px !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #tab-tasks button[id^='mainTab'] span {
    font-size: 11px !important;
  }
  /* 主 Tab 内徽章数字 */
  #tab-tasks #btDownloadTotalBadge,
  #tab-tasks #downloadTotalBadge,
  #tab-tasks #transcodeTotalBadge,
  #tab-tasks #imageWmTotalBadge {
    font-size: 9px !important;
    padding: 1px 5px !important;
  }

  /* --- 子 Tab 行（5 按钮 grid 等分撑满）--- */
  #btDownloadPanel > div:first-child,
  #downloadPanel > div:first-child,
  #transcodePanel > div:first-child,
  #imageWmPanel > div:first-child {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 3px !important;
    margin-bottom: 6px !important;
    overflow: visible !important;
  }
  #tab-tasks button[id^='subTab'] {
    width: 100% !important;
    min-width: 0 !important;
    padding: 5px 2px !important;
    font-size: 10px !important;
    gap: 2px !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #tab-tasks button[id^='subTab'] span {
    font-size: 10px !important;
  }
  #tab-tasks button[id^='subTab'] span[id$='Badge'] {
    font-size: 8px !important;
    padding: 0 3px !important;
  }

  /* --- 表头：移动端隐藏（字段意义在任务行里仍可辨识） --- */
  #btDownloadPanel > div[style*='border-bottom'][style*='font-size: 0.7rem'],
  #downloadPanel > div[style*='border-bottom'][style*='font-size: 0.7rem'],
  #transcodePanel > div[style*='border-bottom'][style*='font-size: 0.7rem'],
  #imageWmPanel > div[style*='border-bottom'][style*='font-size: 0.7rem'] {
    display: none !important;
  }

  /* --- 任务行：从横向 flex 改为可换行紧凑卡片 --- */
  /* 选中所有任务列表容器内的子 div（每条任务一行） */
  #btDownloadTaskList > div,
  #downloadTaskList > div,
  #transcodeTaskList > div,
  #imageWmTaskList > div {
    flex-wrap: wrap !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
    gap: 4px 6px !important;
    align-items: center !important;
  }
  /* #ID: 70px → 36px，字号缩到 10px */
  #btDownloadTaskList > div > div:nth-child(1),
  #downloadTaskList > div > div:nth-child(1),
  #transcodeTaskList > div > div:nth-child(1),
  #imageWmTaskList > div > div:nth-child(1) {
    width: 36px !important;
    font-size: 10px !important;
  }
  /* 文件名: 独占整行剩余空间，字号略大便于阅读 */
  #btDownloadTaskList > div > div:nth-child(2),
  #downloadTaskList > div > div:nth-child(2),
  #transcodeTaskList > div > div:nth-child(2),
  #imageWmTaskList > div > div:nth-child(2) {
    flex: 1 1 calc(100% - 50px) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
  }
  /* 分类: 100px → 60px */
  #btDownloadTaskList > div > div[style*='width: 100px'],
  #downloadTaskList > div > div[style*='width: 100px'],
  #transcodeTaskList > div > div[style*='width: 100px'],
  #imageWmTaskList > div > div[style*='width: 100px'] {
    width: 60px !important;
    font-size: 10px !important;
  }
  /* 来源: 55px 不变，字号略缩 */
  #btDownloadTaskList > div > div[style*='width: 55px'],
  #downloadTaskList > div > div[style*='width: 55px'] {
    width: 42px !important;
    font-size: 9px !important;
  }
  /* 时长: 70px → 50px */
  #btDownloadTaskList > div > div[style*='width: 70px'],
  #downloadTaskList > div > div[style*='width: 70px'],
  #transcodeTaskList > div > div[style*='width: 70px'] {
    width: 50px !important;
    font-size: 10px !important;
  }
  /* 进度: 80px → 70px（进度条+百分比） */
  #btDownloadTaskList > div > div[style*='width: 80px'],
  #downloadTaskList > div > div[style*='width: 80px'],
  #transcodeTaskList > div > div[style*='width: 80px'] {
    width: 70px !important;
  }
  /* 进度内联进度条也缩窄 */
  #btDownloadTaskList > div div[style*='width: 80px'][style*='display: flex'],
  #downloadTaskList > div div[style*='width: 80px'][style*='display: flex'],
  #transcodeTaskList > div div[style*='width: 80px'][style*='display: flex'] {
    width: 60px !important;
  }
  /* 转码任务的 源文件 / HLS: 50px 不变（只是 emoji 不需要缩） */
  /* 时间: 75px → 56px */
  #btDownloadTaskList > div > div[style*='width: 75px'],
  #downloadTaskList > div > div[style*='width: 75px'],
  #transcodeTaskList > div > div[style*='width: 75px'] {
    width: 56px !important;
    font-size: 9px !important;
  }
  /* 操作: 50px → 36px */
  #btDownloadTaskList > div > div[style*='width: 50px'],
  #downloadTaskList > div > div[style*='width: 50px'],
  #transcodeTaskList > div > div[style*='width: 50px'] {
    width: 36px !important;
  }
  #btDownloadTaskList > div button[onclick^='deleteTask'],
  #downloadTaskList > div button[onclick^='deleteTask'],
  #transcodeTaskList > div button[onclick^='deleteTask'] {
    padding: 2px 4px !important;
    font-size: 10px !important;
  }

  /* --- 分页按钮区紧凑 --- */
  #btDownloadPageBtns,
  #downloadPageBtns,
  #transcodePageBtns,
  #imageWmPageBtns {
    margin-top: 4px !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
  }
  #btDownloadPageBtns button,
  #downloadPageBtns button,
  #transcodePageBtns button,
  #imageWmPageBtns button {
    padding: 4px 8px !important;
    font-size: 10px !important;
    min-height: 28px !important;
  }

  /* 「显示 N 条」文字 */
  #tab-tasks div[style*='font-size: 0.75rem'][style*='color: #6b7280'],
  #tab-tasks div[style*='color: #6b7280'][style*='text-align: center'] {
    font-size: 10px !important;
  }

  /* ===========================================================
   * #tab-videos（视频管理）紧凑布局
   * =========================================================== */
  /* 顶部筛选条：搜索整行 + 4 元素 grid 等分（select+刷新+自动化+重置） */
  #tab-videos > div.flex.items-center.gap-4.mb-6 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
  }
  #tab-videos > div.flex.items-center.gap-4.mb-6 > .relative.flex-1 {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  #tab-videos > div.flex.items-center.gap-4.mb-6 > .relative.flex-1 input {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 12px !important;
  }
  #tab-videos > div.flex.items-center.gap-4.mb-6 > select,
  #tab-videos > div.flex.items-center.gap-4.mb-6 > button,
  #tab-videos > div.flex.items-center.gap-4.mb-6 > .relative.group {
    width: 100% !important;
    min-width: 0 !important;
  }
  #tab-videos > div.flex.items-center.gap-4.mb-6 select,
  #tab-videos > div.flex.items-center.gap-4.mb-6 > button,
  #tab-videos > div.flex.items-center.gap-4.mb-6 > .relative.group > button {
    width: 100% !important;
    padding: 6px 4px !important;
    font-size: 10px !important;
    min-height: 32px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    gap: 2px !important;
  }
  /* 自动化按钮跨 2 列（避免「自动化运行中 + 倒计时」被截断） */
  #tab-videos > div.flex.items-center.gap-4.mb-6 > .relative.group {
    grid-column: span 2 !important;
  }
  /* 重置模拟数据按钮放第三行整行 */
  #tab-videos
    > div.flex.items-center.gap-4.mb-6
    > button[onclick*='resetAllSimulatedData'] {
    grid-column: 1 / -1 !important;
  }
  /* 启动自动化按钮里的子 span 收紧 */
  #tab-videos #btnAutoSync > span {
    font-size: 10px !important;
  }
  #tab-videos #autoSyncTimer {
    font-size: 9px !important;
    padding: 0 4px !important;
  }
  /* 自动化悬浮提示在窄屏防止越界 */
  #tab-videos > div.flex.items-center.gap-4.mb-6 .relative.group > div.absolute {
    width: calc(100vw - 32px) !important;
    max-width: 320px !important;
    left: auto !important;
    right: 0 !important;
  }

  /* --- 分类 TAB + 右侧操作组：拆成上下两行 --- */
  #tab-videos > div.flex.items-center.justify-between.mb-6 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  /* 分类 TAB 布局：左侧「全部分类」跨 2 行 + 右侧 4 列 × 2 行 = 8 个分类
     适用于 #tab-videos 和 #tab-crawler 两个 TAB 的分类切换栏 */
  #tab-videos
    > div.flex.items-center.justify-between.mb-6
    > .category-tabs-wrap,
  #tab-crawler #crawlerCategoryTabs.category-tabs-wrap {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1.1fr repeat(4, 1fr) !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 4px !important;
    overflow: visible !important;
    grid-auto-flow: row !important;
  }
  /* 第一个「全部分类」按钮：跨整个第 1 列、占 2 行 */
  #tab-videos
    > div.flex.items-center.justify-between.mb-6
    > .category-tabs-wrap
    > .category-tab:first-child,
  #tab-crawler
    #crawlerCategoryTabs.category-tabs-wrap
    > .crawler-category-tab:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    flex-direction: column !important;
    gap: 3px !important;
    font-weight: 600 !important;
  }
  /* 每个分类 tab 撑满列宽，紧凑显示 */
  #tab-videos
    > div.flex.items-center.justify-between.mb-6
    > .category-tabs-wrap
    > .category-tab,
  #tab-crawler
    #crawlerCategoryTabs.category-tabs-wrap
    > .crawler-category-tab {
    width: 100% !important;
    min-width: 0 !important;
    padding: 5px 2px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
  }
  /* 徽章数字 */
  #tab-videos
    > div.flex.items-center.justify-between.mb-6
    > .category-tabs-wrap
    > .category-tab
    .cat-num,
  #tab-crawler
    #crawlerCategoryTabs.category-tabs-wrap
    > .crawler-category-tab
    .cat-count {
    font-size: 8px !important;
    padding: 0 3px !important;
    flex-shrink: 0 !important;
  }
  /* 「全部分类」徽章数字字号略大 */
  #tab-videos
    > div.flex.items-center.justify-between.mb-6
    > .category-tabs-wrap
    > .category-tab:first-child
    .cat-num,
  #tab-crawler
    #crawlerCategoryTabs.category-tabs-wrap
    > .crawler-category-tab:first-child
    .cat-count {
    font-size: 10px !important;
    padding: 1px 6px !important;
  }

  /* --- 「📥 抓取下载记录」标题行紧凑布局 --- */
  /* 标题独占一行 + 3 个操作按钮（全部状态/清理失败/刷新）grid 等分一行 */
  #tab-crawler
    .bg-card
    .p-4.border-b.border-border
    > .flex.items-center.justify-between.mb-4 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
  }
  #tab-crawler
    .bg-card
    .p-4.border-b.border-border
    > .flex.items-center.justify-between.mb-4
    h3 {
    font-size: 12px !important;
  }
  #tab-crawler
    .bg-card
    .p-4.border-b.border-border
    > .flex.items-center.justify-between.mb-4
    > .flex.items-center.gap-2 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    width: 100% !important;
  }
  #tab-crawler
    .bg-card
    .p-4.border-b.border-border
    > .flex.items-center.justify-between.mb-4
    > .flex.items-center.gap-2
    > select,
  #tab-crawler
    .bg-card
    .p-4.border-b.border-border
    > .flex.items-center.justify-between.mb-4
    > .flex.items-center.gap-2
    > button {
    width: 100% !important;
    min-width: 0 !important;
    padding: 5px 6px !important;
    font-size: 10px !important;
    min-height: 30px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    justify-content: center !important;
    text-align: center !important;
  }
  /* 右侧操作组 (2026-06-15 v3, 移动端单排紧凑布局)
     ===================================================
     DOM (videos.html 2650+):
       .flex.flex-col.gap-2.shrink-0             ← 外层 (桌面端竖向, 移动端横向)
         > .flex.items-center.gap-2.flex-wrap     ← 第 1 行容器
           > .flex.items-center.bg-muted...       ← 一体框
             > button (🌐 资源域名: xxx)
             > label (🤖 自动购买 toggle)
         > .flex.items-center.gap-2.flex-wrap     ← 第 2 行容器
           > label (📊 真实数据 toggle)
           > button (📖 文档)

     用户期望 (2026-06-15): 移动端把 2 行合成 1 排:
       [🌐 资源域名]  [📊 真实]  [📖 文档]
     (自动购买 toggle 还挂在资源域名按钮旁的一体框里)

     策略: 外层从 flex-col 改成 flex-row, 让 2 个内部容器并排,
     第 1 行(资源域名一体框)用 flex:1 撑开 + 域名 ellipsis,
     第 2 行(真实数据+文档)固定内容宽度贴右. */
  #tab-videos
    > div.flex.items-center.justify-between.mb-6
    > .flex.flex-col.gap-2.shrink-0 {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  /* 第 1 行容器: 撑满剩余宽度 */
  #tab-videos
    > div.flex.items-center.justify-between.mb-6
    > .flex.flex-col.gap-2.shrink-0
    > .flex.items-center.gap-2:first-child {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }

  /* 第 2 行容器: 内容宽度, 贴右 */
  #tab-videos
    > div.flex.items-center.justify-between.mb-6
    > .flex.flex-col.gap-2.shrink-0
    > .flex.items-center.gap-2:nth-child(2) {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }

  /* 第 1 行的一体框 (资源域名 + 自动购买 toggle): 占满第 1 行容器 */
  #tab-videos
    > div.flex.items-center.justify-between.mb-6
    > .flex.flex-col.gap-2.shrink-0
    > .flex.items-center.gap-2:first-child
    > .flex.items-center {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding-right: 6px !important;
    gap: 4px !important;
  }

  /* 资源域名按钮: 撑开剩余空间, 长域名截断 */
  #tab-videos
    > div.flex.items-center.justify-between.mb-6
    > .flex.flex-col.gap-2.shrink-0
    > .flex.items-center.gap-2:first-child
    > .flex.items-center
    > button {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    min-height: 36px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    justify-content: flex-start !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(56, 189, 248, 0.25) !important;
    cursor: pointer !important;
  }
  #tab-videos
    > div.flex.items-center.justify-between.mb-6
    > .flex.flex-col.gap-2.shrink-0
    > .flex.items-center.gap-2:first-child
    > .flex.items-center
    > button
    > #currentResourceDomain {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    pointer-events: none !important;
  }
  #tab-videos
    > div.flex.items-center.justify-between.mb-6
    > .flex.flex-col.gap-2.shrink-0
    > .flex.items-center.gap-2:first-child
    > .flex.items-center
    > button:active {
    background-color: rgba(56, 189, 248, 0.25) !important;
    transform: scale(0.98);
  }
  /* 自动购买 toggle: 不压缩 */
  #tab-videos
    > div.flex.items-center.justify-between.mb-6
    > .flex.flex-col.gap-2.shrink-0
    > .flex.items-center.gap-2:first-child
    > .flex.items-center
    > label {
    flex: 0 0 auto !important;
    align-self: center !important;
    margin: 0 !important;
  }

  /* 真实数据 label: 内容宽度, 文字小 */
  #tab-videos
    > div.flex.items-center.justify-between.mb-6
    > .flex.flex-col.gap-2.shrink-0
    > .flex.items-center.gap-2:nth-child(2)
    > label {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 5px 6px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    touch-action: manipulation !important;
  }
  #tab-videos
    > div.flex.items-center.justify-between.mb-6
    > .flex.flex-col.gap-2.shrink-0
    > .flex.items-center.gap-2:nth-child(2)
    > label
    > span:first-child {
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  #tab-videos
    > div.flex.items-center.justify-between.mb-6
    > .flex.flex-col.gap-2.shrink-0
    > .flex.items-center.gap-2:nth-child(2)
    > label
    > .relative {
    flex-shrink: 0 !important;
    align-self: center !important;
  }
  /* 「真实/模拟」状态文字隐藏 (toggle 颜色已表达, 节省横向空间) */
  #tab-videos
    > div.flex.items-center.justify-between.mb-6
    > .flex.flex-col.gap-2.shrink-0
    > .flex.items-center.gap-2:nth-child(2)
    > label
    > #realDataStatus {
    display: none !important;
  }
  /* 文档按钮: 不压缩 */
  #tab-videos
    > div.flex.items-center.justify-between.mb-6
    > .flex.flex-col.gap-2.shrink-0
    > .flex.items-center.gap-2:nth-child(2)
    > button {
    flex: 0 0 auto !important;
    padding: 5px 6px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    min-height: 36px !important;
    white-space: nowrap !important;
    touch-action: manipulation !important;
  }

  /* --- 视频表格紧凑 --- */
  #tab-videos #videoTableView {
    overflow-x: auto !important;
  }
  #tab-videos #videoTableView table {
    min-width: 720px !important;
    font-size: 11px !important;
  }
  #tab-videos #videoTableView th,
  #tab-videos #videoTableView td {
    padding: 6px 4px !important;
  }
  /* 文件夹卡片视图收紧 */
  #tab-videos #folderGroupView {
    padding: 4px !important;
  }
  /* 分页 */
  #tab-videos #videoPagination {
    gap: 4px !important;
    flex-wrap: wrap !important;
    margin-top: 8px !important;
  }
  #tab-videos #videoPagination button {
    padding: 4px 8px !important;
    font-size: 10px !important;
    min-height: 28px !important;
  }

  /* ===========================================================
   * #tab-sites（落地站点管理）紧凑布局
   * =========================================================== */
  /* 「快速说明」浅色卡片 padding 收紧 */
  #tab-sites > .space-y-6 > div.bg-purple-500\/10 {
    padding: 10px !important;
    border-radius: 10px !important;
  }
  #tab-sites > .space-y-6 > div.bg-purple-500\/10 .text-xl {
    font-size: 16px !important;
  }
  #tab-sites > .space-y-6 > div.bg-purple-500\/10 .text-sm {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  /* 站点列表/永久域名/API 接口 卡片 */
  #tab-sites > .space-y-6 > div.bg-card.border.border-border.rounded-xl {
    border-radius: 10px !important;
  }
  #tab-sites
    > .space-y-6
    > div.bg-card
    > div.p-4.border-b.border-border {
    padding: 8px 10px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #tab-sites
    > .space-y-6
    > div.bg-card
    > div.p-4.border-b.border-border
    h3 {
    font-size: 12px !important;
  }
  #tab-sites
    > .space-y-6
    > div.bg-card
    > div.p-4.border-b.border-border
    > div.flex.items-center.gap-3
    p.text-xs {
    display: none !important;
  }
  #tab-sites
    > .space-y-6
    > div.bg-card
    > div.p-4.border-b.border-border
    .text-lg {
    font-size: 14px !important;
  }
  #tab-sites
    > .space-y-6
    > div.bg-card
    > div.p-4.border-b.border-border
    button {
    padding: 4px 8px !important;
    font-size: 10px !important;
    min-height: 28px !important;
  }

  /* 公共 API 接口列表：左右 → 上下堆叠 */
  #tab-sites .flex.items-center.justify-between.py-2 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 8px 10px !important;
  }
  #tab-sites .flex.items-center.justify-between.py-2 > div {
    width: 100% !important;
  }
  #tab-sites .flex.items-center.justify-between.py-2 .text-white {
    font-size: 11px !important;
  }
  #tab-sites .flex.items-center.justify-between.py-2 .text-xs.text-muted-foreground {
    display: block !important;
    margin-left: 0 !important;
    margin-top: 2px !important;
    font-size: 10px !important;
  }
  #tab-sites .flex.items-center.justify-between.py-2 code {
    align-self: flex-start !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
    word-break: break-all !important;
    white-space: normal !important;
  }
  /* 站点列表内容 padding */
  #tab-sites #sitesList,
  #tab-sites #permanentDomainsList {
    padding: 0 !important;
  }
  /* 负责人筛选 TAB 行 */
  #tab-sites #ownerFilterTabs {
    padding: 6px 8px !important;
    gap: 4px !important;
  }
  #tab-sites #ownerFilterTabs button {
    padding: 4px 8px !important;
    font-size: 10px !important;
    min-height: 26px !important;
    border-radius: 7px !important;
  }

  /* --- 站点卡片紧凑重设计 --- */
  /* 卡片整体 padding 压缩 */
  #tab-sites #sitesList > div.p-4,
  #tab-sites #permanentDomainsList > div.p-4 {
    padding: 8px 10px !important;
  }
  /* 卡片改单行布局：地球图标 + 域名 + [编辑] [证书] 全部塞一行 */
  #tab-sites #sitesList > div.p-4 > .flex.items-center.justify-between,
  #tab-sites
    #permanentDomainsList
    > div.p-4
    > .flex.items-center.justify-between {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  /* 左侧：地球图标 + 文字容器，占据可收缩的剩余空间 */
  #tab-sites
    #sitesList
    > div.p-4
    > .flex.items-center.justify-between
    > .flex.items-center.gap-4,
  #tab-sites
    #permanentDomainsList
    > div.p-4
    > .flex.items-center.justify-between
    > .flex.items-center.gap-4 {
    gap: 8px !important;
    align-items: center !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }
  /* 地球图标缩小到 28x28，作为站点视觉锚点 */
  #tab-sites #sitesList .w-10.h-10,
  #tab-sites #permanentDomainsList .w-10.h-10 {
    display: flex !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
    flex-shrink: 0 !important;
  }
  #tab-sites #sitesList .w-10.h-10 .text-lg,
  #tab-sites #permanentDomainsList .w-10.h-10 .text-lg {
    font-size: 14px !important;
  }
  /* 文字外层容器：单行不换行，[👤负责人] [id] [📊 自有统计] [域名] 全部塞一行
     域名过长时截断显示省略号 */
  #tab-sites
    #sitesList
    > div.p-4
    > .flex.items-center.justify-between
    > .flex.items-center.gap-4
    > div:not([class*='w-10']),
  #tab-sites
    #permanentDomainsList
    > div.p-4
    > .flex.items-center.justify-between
    > .flex.items-center.gap-4
    > div:not([class*='w-10']) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    column-gap: 6px !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  /* 隐藏旧版站点名（兜底） */
  #tab-sites #sitesList .font-medium,
  #tab-sites #permanentDomainsList .font-medium {
    display: none !important;
  }
  /* badges 容器变透明：让 name + 各 badges + 域名 直接成为外层 flex 子元素，
     全部一行 wrap 显示 */
  #tab-sites #sitesList .flex.items-center.gap-2.flex-wrap,
  #tab-sites #permanentDomainsList .flex.items-center.gap-2.flex-wrap {
    display: contents !important;
  }
  /* 隐藏所有 badges（负责人/ID/自有统计/发布页/未配置域名提示） */
  #tab-sites
    #sitesList
    > div.p-4
    > .flex.items-center.justify-between
    > .flex.items-center.gap-4
    > div:not([class*='w-10'])
    > span,
  #tab-sites
    #permanentDomainsList
    > div.p-4
    > .flex.items-center.justify-between
    > .flex.items-center.gap-4
    > div:not([class*='w-10'])
    > span {
    display: none !important;
  }
  /* 域名 a 链接：唯一可见的文字，可收缩 + ellipsis */
  #tab-sites
    #sitesList
    > div.p-4
    > .flex.items-center.justify-between
    > .flex.items-center.gap-4
    > div:not([class*='w-10'])
    > a,
  #tab-sites
    #permanentDomainsList
    > div.p-4
    > .flex.items-center.justify-between
    > .flex.items-center.gap-4
    > div:not([class*='w-10'])
    > a {
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* 隐藏旧版 p.text-sm 域名行（兜底） */
  #tab-sites #sitesList p.text-sm,
  #tab-sites #permanentDomainsList p.text-sm {
    display: none !important;
  }
  /* 右侧按钮组：自然 flex（不再等分占满整行），紧凑显示 */
  #tab-sites
    #sitesList
    > div.p-4
    > .flex.items-center.justify-between
    > .flex.items-center.gap-2,
  #tab-sites
    #permanentDomainsList
    > div.p-4
    > .flex.items-center.justify-between
    > .flex.items-center.gap-2 {
    display: flex !important;
    flex-direction: row !important;
    flex-shrink: 0 !important;
    gap: 6px !important;
    width: auto !important;
  }
  #tab-sites
    #sitesList
    > div.p-4
    > .flex.items-center.justify-between
    > .flex.items-center.gap-2
    > button,
  #tab-sites
    #permanentDomainsList
    > div.p-4
    > .flex.items-center.justify-between
    > .flex.items-center.gap-2
    > button {
    padding: 0 10px !important;
    font-size: 11px !important;
    height: 28px !important;
    min-height: 28px !important;
    min-width: 0 !important;
    justify-content: center !important;
    white-space: nowrap !important;
    gap: 3px !important;
    border-radius: 7px !important;
    line-height: 1 !important;
  }
  /* 隐藏「📖 部署指南」按钮，合并到「站点部署说明」区域提示 */
  #tab-sites button[onclick*='showSiteDeployGuide'] {
    display: none !important;
  }

  /* ===========================================================
   * #tab-ads（广告配置）补充：折叠技术说明区域紧凑
   * =========================================================== */
  #tg-ad-tech-note {
    padding: 10px !important;
  }
  #tg-ad-tech-note .text-xs {
    font-size: 10px !important;
  }
  #tg-ad-tech-note pre {
    font-size: 9px !important;
    line-height: 1.3 !important;
    padding: 6px !important;
  }
}

/* ===========================================================
 * 极小屏（<=380px）进一步压缩
 * =========================================================== */
@media (max-width: 380px) {
  .max-w-7xl,
  main.max-w-7xl {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* dashboard 6 卡片 → 1 列以确保数字完整显示 */
  main .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-6 {
    grid-template-columns: 1fr !important;
  }

  header h1 {
    font-size: 14px !important;
  }
  header button {
    padding: 6px 8px !important;
    font-size: 11px !important;
  }
}

/* ===========================================================
 * 「资源抓取」列表卡片化（v20260508）
 * --------------------------------------------------------
 * 桌面端是 11 列写死网格 grid-cols-[50px_80px_80px_2fr_130px_70px_60px_130px_50px_90px_60px]
 *   1=封面 2=抓取源 3=类目 4=视频名称 5=热搜标签 6=大小 7=时长 8=下载进度 9=整理 10=时间 11=状态
 *
 * 移动端把表头隐藏，每行重排成「左封面 + 右 4 行字段」的卡片：
 *   ┌──────┬──────────────────────────────────┐
 *   │ 封面 │ 视频名称 (2 行截断)        [状态] │   ← row 1
 *   │ 50×  │ 🌐 JavMenu               05/08    │   ← row 2 (源 / 时间)
 *   │  70  │ [tag1][tag2][tag3] (溢出截断)     │   ← row 3 (热搜标签)
 *   │      │ 进度 100%               [整理图标] │   ← row 4
 *   └──────┴──────────────────────────────────┘
 * 隐藏：类目（顶部 TAB 已有）/ 大小 / 时长（信息密度低）
 * =========================================================== */
@media (max-width: 768px) {
  /* 表头：11 列在窄屏完全无意义，整个隐藏 */
  #tab-crawler [class*="grid-cols-[50px_80px_80px_2fr_130px"]:not(.crawler-row) {
    display: none !important;
  }

  /* 数据行：grid 模板覆盖（attribute selector 选中带这串 class 的元素） */
  #tab-crawler .crawler-row[class*="grid-cols-[50px_80px"] {
    display: grid !important;
    grid-template-columns: 52px 1fr auto !important;
    grid-template-rows: auto auto auto auto !important;
    column-gap: 8px !important;
    row-gap: 3px !important;
    padding: 8px 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    align-items: start !important;
  }

  /* col1：封面 跨 4 行 */
  #tab-crawler .crawler-row > div:nth-child(1) {
    grid-row: 1 / span 4 !important;
    grid-column: 1 !important;
    align-self: start !important;
  }
  #tab-crawler .crawler-row > div:nth-child(1) img,
  #tab-crawler .crawler-row > div:nth-child(1) > div {
    width: 50px !important;
    height: 70px !important;
  }

  /* row1 col2：视频名称 — 2 行截断 */
  #tab-crawler .crawler-row > div:nth-child(4) {
    grid-row: 1 !important;
    grid-column: 2 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word !important;
    align-self: start !important;
  }
  #tab-crawler .crawler-row > div:nth-child(4) span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* row1 col3：状态 — 右上角 */
  #tab-crawler .crawler-row > div:nth-child(11) {
    grid-row: 1 !important;
    grid-column: 3 !important;
    font-size: 10px !important;
    text-align: right !important;
    white-space: nowrap !important;
    align-self: start !important;
    padding-left: 4px !important;
  }

  /* row2 col2：抓取源 */
  #tab-crawler .crawler-row > div:nth-child(2) {
    grid-row: 2 !important;
    grid-column: 2 !important;
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
  }
  /* row2 col3：时间 */
  #tab-crawler .crawler-row > div:nth-child(10) {
    grid-row: 2 !important;
    grid-column: 3 !important;
    font-size: 9px !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  /* row3 col2-3：热搜标签 */
  #tab-crawler .crawler-row > div:nth-child(5) {
    grid-row: 3 !important;
    grid-column: 2 / span 2 !important;
    text-align: left !important;
    overflow: hidden !important;
    max-height: 22px !important;
  }
  #tab-crawler .crawler-row > div:nth-child(5) span {
    font-size: 8px !important;
    padding: 1px 4px !important;
    line-height: 1.3 !important;
  }
  #tab-crawler .crawler-row > div:nth-child(5) .flex {
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    gap: 3px !important;
  }

  /* row4 col2：下载进度 */
  #tab-crawler .crawler-row > div:nth-child(8) {
    grid-row: 4 !important;
    grid-column: 2 !important;
    font-size: 10px !important;
    text-align: left !important;
  }
  /* row4 col3：整理 */
  #tab-crawler .crawler-row > div:nth-child(9) {
    grid-row: 4 !important;
    grid-column: 3 !important;
    font-size: 11px !important;
    text-align: right !important;
  }

  /* 隐藏次要字段：类目/大小/时长 */
  #tab-crawler .crawler-row > div:nth-child(3),
  #tab-crawler .crawler-row > div:nth-child(6),
  #tab-crawler .crawler-row > div:nth-child(7) {
    display: none !important;
  }

  /* crawlerHistory 容器在窄屏放宽 max-height + 取消水平滚动 */
  #crawlerHistory {
    max-height: 70vh !important;
    overflow-x: hidden !important;
  }
}

/* ===========================================================
 * 落地池自动化「每个负责人卡片」横滑布局 (v20260615)
 * --------------------------------------------------------
 * 用户反馈: /ad/videos#sites 落地池在移动端 2 列, seo-a/seo-c 等
 * 多个负责人挤在一起, 单卡内的跳转域 / 域池 / 备用域 / 拦截统计
 * 看不清.
 * 改进: 移动端改成 一负责人一排 (一屏 1 卡, 满屏宽度), 整体可
 * 横向滑动展示后续负责人. scroll-snap 让每张卡正好停在屏幕中.
 * =========================================================== */
@media (max-width: 768px) {
  /* 父容器需要 relative, 给 ::before / 滚动条上方的视觉指示器锚定参考 */
  #landingPoolCard {
    position: relative;
  }

  #landingPoolGroupsGrid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    /* v3(2026-06-15) 用户反馈 (二轮): 文字 chip "👈 滑动查看其他负责人 👉" 不好看,
       想要"滚轮 UI"直观提示可往右滚.
       策略 (替换文字 chip 为 mini-scrollbar 指示器):
         1. scrollbar 显式显示 + 美化 (webkit / firefox 都支持)
         2. 顶部用 ::before 画一条「迷你滚动条」: 圆角胶囊轨道 + 一段渐变滑块
            自动来回滑动 (background-position 动画), 一眼看出可滑 — 无文字
         3. 左右两侧用 mask 渐隐 14px, 暗示边缘还有更多内容 */
    scrollbar-width: thin !important;
    scrollbar-color: rgba(245, 158, 11, 0.65) rgba(245, 158, 11, 0.12) !important;
    gap: 10px !important;
    /* 上方 22px 留给 hint chip; 底部 14px 留给 scrollbar (scroll-margin) */
    padding: 22px 0 14px !important;
    margin-top: 4px !important;
    position: relative;
    /* 左右两侧 14px 渐隐, 暗示横向有更多内容 (mask-image 双向 fade) */
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      black 14px,
      black calc(100% - 14px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      black 14px,
      black calc(100% - 14px),
      transparent 100%
    );
  }

  /* webkit 系 (iOS Safari, Chrome): 显式细条 scrollbar 始终可见 */
  #landingPoolGroupsGrid::-webkit-scrollbar {
    display: block !important;
    height: 6px !important;
  }
  #landingPoolGroupsGrid::-webkit-scrollbar-track {
    background: rgba(245, 158, 11, 0.12) !important;
    border-radius: 3px !important;
  }
  #landingPoolGroupsGrid::-webkit-scrollbar-thumb {
    background: linear-gradient(
      to right,
      rgba(245, 158, 11, 0.7),
      rgba(251, 146, 60, 0.7)
    ) !important;
    border-radius: 3px !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
  }
  #landingPoolGroupsGrid::-webkit-scrollbar-thumb:hover,
  #landingPoolGroupsGrid::-webkit-scrollbar-thumb:active {
    background: linear-gradient(
      to right,
      rgba(245, 158, 11, 0.95),
      rgba(251, 146, 60, 0.95)
    ) !important;
  }

  /* 顶部「迷你滚动条」指示器 — 圆角胶囊轨道 + 渐变滑块来回滑动
     视觉直观: 一眼读出"这里可横向滚动", 比文字提示更小巧/不抢镜 */
  #landingPoolCard::before {
    content: "";
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%);

    /* 轨道: 圆角胶囊 + 半透明琥珀色, inset shadow 制造凹陷感 */
    width: 72px;
    height: 8px;
    border-radius: 4px;
    background-color: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    box-shadow:
      inset 0 1px 2px rgba(0, 0, 0, 0.25),
      0 0 8px rgba(245, 158, 11, 0.25);

    /* 滑块: 一段 32px 宽的渐变, 通过 background-position 在轨道内左右移动.
       两端 transparent 让滑块边缘平滑融入轨道 */
    background-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(245, 158, 11, 0.95) 30%,
      rgba(251, 146, 60, 1) 50%,
      rgba(245, 158, 11, 0.95) 70%,
      transparent 100%
    );
    background-size: 32px 100%;
    background-repeat: no-repeat;
    background-position: 0% center;
    pointer-events: none;
    z-index: 5;
    animation: lpScrollIndicator 2.2s ease-in-out infinite;
  }

  /* 滑块来回滑动: background-position 从 0%(贴左) 到 100%(贴右) 等价
     于在容器内移动 (容器宽 - 图片宽) = 72-32 = 40px */
  @keyframes lpScrollIndicator {
    0%, 100% {
      background-position: 0% center;
    }
    50% {
      background-position: 100% center;
    }
  }

  /* 每张负责人卡 = 一屏宽度 (减去左右容器 padding 24+24 = 48px),
     scroll-snap-align: start 让滑动停在每卡起点 */
  #landingPoolGroupsGrid > * {
    flex: 0 0 calc(100vw - 48px) !important;
    min-width: 0 !important;
    scroll-snap-align: start !important;
  }

  /* 提示行 (col-span-full 在 flex 下失效, 改成铺满 100%) */
  #landingPoolGroupsGrid > .col-span-full {
    flex-basis: 100% !important;
    flex-grow: 1 !important;
  }
}

/* ===========================================================
 * 落地站点管理 / CF Worker / 落地池自动化 头部紧凑化 (v20260615)
 * --------------------------------------------------------
 * 用户反馈: /ad/videos#sites 顶部一系列字段 (落地站点管理 / 🤖 自动化
 * / ➕ 添加负责人 / 🔗 永久域名 / 📚 文档与工具 / CF Worker 状态 /
 * 🤖 落地池自动化 / 3 chip / 调度状态 / 4 张统计卡) 在移动端字号大、
 * 上下空白多, 期望紧凑成一排, 好看一点.
 * =========================================================== */
@media (max-width: 768px) {
  /* ---- 「落地站点管理」标题区 (青色 gradient 卡) — v2 单排版 ----
     用户反馈: icon + 标题 + 自动化 toggle + 3 个按钮 全部做成一排,
     自动化开关字段也要小一点. 实现:
       1. 外层 div 改成 flex row + nowrap + overflow-x:auto 兜底
       2. 内层两个子 div (.gap-4 第一行, .mt-4 按钮组) 也都 flex 横排
       3. 标题 'h2 落地站点管理' 在窄屏隐藏 (顶部 tab nav 已显示 #sites 标识)
       4. 自动化 toggle: '🤖 自动化' label 隐藏只保留 emoji,
          '已启用' label 缩极小, toggle 滑块 44x22 → 26x14 */
  #tab-sites > .space-y-6 > div.bg-gradient-to-r.from-cyan-500\/10 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  #tab-sites > .space-y-6 > div.bg-gradient-to-r.from-cyan-500\/10::-webkit-scrollbar {
    display: none !important;
  }

  /* 内部第一行 (icon + 标题 + toggle): 改 flex inline, 不收缩 */
  #tab-sites > .space-y-6 > div.bg-gradient-to-r.from-cyan-500\/10 > div.flex.items-center.gap-4 {
    gap: 6px !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
  }

  /* 🌐 icon 缩小 48 → 28px */
  #tab-sites > .space-y-6 > div.bg-gradient-to-r.from-cyan-500\/10 .w-12.h-12 {
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
    flex-shrink: 0 !important;
  }

  #tab-sites > .space-y-6 > div.bg-gradient-to-r.from-cyan-500\/10 .w-12.h-12 .text-2xl {
    font-size: 14px !important;
  }

  /* 标题 '落地站点管理' + 副标题 整段隐藏 (顶部 tab nav 已经是 sites) */
  #tab-sites > .space-y-6 > div.bg-gradient-to-r.from-cyan-500\/10 > div.flex.items-center.gap-4 > div.flex-1 {
    display: none !important;
  }

  /* 🤖 自动化 toggle label 紧凑成 emoji + 小滑块 */
  #tab-sites > .space-y-6 > div.bg-gradient-to-r.from-cyan-500\/10 label[title*="落地池自动化"] {
    padding: 3px 6px !important;
    gap: 3px !important;
    border-radius: 7px !important;
    flex-shrink: 0 !important;
  }

  /* '🤖 自动化' label: 隐藏文字只剩 emoji */
  #tab-sites > .space-y-6 > div.bg-gradient-to-r.from-cyan-500\/10 label[title*="落地池自动化"] > span.text-amber-300 {
    font-size: 0 !important;
  }

  #tab-sites > .space-y-6 > div.bg-gradient-to-r.from-cyan-500\/10 label[title*="落地池自动化"] > span.text-amber-300::before {
    content: "🤖";
    font-size: 12px !important;
  }

  /* '已启用 / 未启用' 文字也缩极小 */
  #tab-sites > .space-y-6 > div.bg-gradient-to-r.from-cyan-500\/10 #switchLandingPoolLabel {
    font-size: 9px !important;
    min-width: auto !important;
    line-height: 1 !important;
  }

  /* toggle 滑块 44x24 → 26x14 */
  #tab-sites > .space-y-6 > div.bg-gradient-to-r.from-cyan-500\/10 label[title*="落地池自动化"] .w-11 {
    width: 26px !important;
    height: 14px !important;
  }

  #tab-sites > .space-y-6 > div.bg-gradient-to-r.from-cyan-500\/10 label[title*="落地池自动化"] .w-5.h-5 {
    width: 10px !important;
    height: 10px !important;
  }

  /* peer-checked: thumb 移动距离从 translate-x-5 (20px) 调整为 14px */
  #tab-sites > .space-y-6 > div.bg-gradient-to-r.from-cyan-500\/10 label[title*="落地池自动化"] input:checked ~ .w-5 {
    transform: translateX(14px) !important;
  }

  /* 按钮组合并到同一行 (mt-4 → 0), 紧凑 */
  #tab-sites > .space-y-6 > div.bg-gradient-to-r.from-cyan-500\/10 > div.flex.flex-wrap.gap-2.mt-4 {
    gap: 4px !important;
    margin-top: 0 !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
  }

  #tab-sites > .space-y-6 > div.bg-gradient-to-r.from-cyan-500\/10 > div.flex.flex-wrap.gap-2.mt-4 > button,
  #tab-sites > .space-y-6 > div.bg-gradient-to-r.from-cyan-500\/10 > div.flex.flex-wrap.gap-2.mt-4 .relative > button {
    padding: 4px 8px !important;
    font-size: 10.5px !important;
    min-height: 26px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* ---- ☁️ CF Worker 卡 紧凑 ---- */
  #tab-sites > .space-y-6 > div.bg-orange-500\/10.border-orange-500\/30 {
    padding: 8px 10px !important;
  }

  #tab-sites > .space-y-6 > div.bg-orange-500\/10 .text-sm.font-medium {
    font-size: 11.5px !important;
  }

  #cfCloakStatusBadge {
    font-size: 9.5px !important;
    padding: 1px 5px !important;
  }

  #cfCloakActiveCard {
    padding: 5px 8px !important;
  }

  #cfCloakActiveDomain {
    font-size: 11px !important;
  }

  #cfCloakHealth,
  #cfCloakLastSync {
    font-size: 9px !important;
  }

  /* CF 操作按钮行: 实测 / 同步 KV / 手动配置 紧凑 */
  #tab-sites > .space-y-6 > div.bg-orange-500\/10 .flex.flex-wrap.gap-1\.5 button {
    padding: 3px 7px !important;
    font-size: 10px !important;
  }

  /* 自动同步状态 1 行 */
  #cfCloakAutoSyncBox {
    font-size: 9.5px !important;
  }

  /* ---- 🤖 落地池自动化 头部 紧凑成一排 ---- */
  #landingPoolCard {
    padding: 12px !important;
  }

  /* 标题行 (🤖 落地池自动化 + 3 chip + 调度状态徽章) — 一排显示 */
  #landingPoolCard > .flex.items-center.justify-between.flex-wrap {
    gap: 4px !important;
    margin-bottom: 8px !important;
    align-items: center !important;
  }

  /* 标题左半 (🤖 落地池自动化 + 3 chip) — flex-wrap 但尽量同行 */
  #landingPoolCard > .flex.items-center.justify-between.flex-wrap > div.flex.items-center.gap-2 {
    gap: 4px !important;
    flex-wrap: wrap !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* 标题 "🤖 落地池自动化" 缩字号 */
  #landingPoolCard span.text-base.font-semibold.text-amber-300 {
    font-size: 11.5px !important;
  }

  /* 3 个 chip (麒麟 3min 检测 / 风险 → 顶替+TG+补满 / 每人 7+6=13 域) 缩小 */
  #landingPoolCard span.text-\[10px\].px-1\.5 {
    font-size: 8.5px !important;
    padding: 1px 4px !important;
    line-height: 1.4 !important;
  }

  /* 调度状态徽章 */
  #landingPoolSchedulerBadge {
    font-size: 8.5px !important;
    padding: 1px 4px !important;
  }

  /* 自动化规则 details 紧凑 */
  #landingPoolCard > details.text-xs {
    margin-bottom: 8px !important;
  }

  #landingPoolCard > details.text-xs > summary {
    font-size: 10.5px !important;
  }

  /* ---- 总览统计 4 卡: 移动端从 2x2 改成 1x4 一排 ---- */
  #landingPoolCard > .grid.grid-cols-2.md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin-bottom: 10px !important;
  }

  #landingPoolCard > .grid.grid-cols-2.md\:grid-cols-4 > div {
    padding: 4px 6px !important;
    border-radius: 6px !important;
  }

  /* 卡片标题 "目标库存" / "备用就绪" / "当前活跃" / "缺货 / 被风控" 缩字 */
  #landingPoolCard > .grid.grid-cols-2.md\:grid-cols-4 p.text-\[10px\] {
    font-size: 8px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 数字 39 / 18 / 21 / 0 缩 */
  #landingPoolCard > .grid.grid-cols-2.md\:grid-cols-4 p.text-lg {
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin-top: 1px !important;
  }
}