/* 云端静态版补充样式：只补"styles.css / tags.css 里没有的"那一块（详情弹层）。
   头部、导航、搜索框、登录弹窗、用户下拉、移动端抽屉、Footer、回到顶部
   全部改用与隧道版一致的 class，样式直接走 styles.css + mobile.css，
   这里不再重复定义，避免两版样式分叉。 */

.loading-text { padding: 40px; text-align: center; opacity: 0.7; }

/* 搜索结果页底部的进度提示：结果按分类陆续出现，没搜完时告诉用户还在跑，
   否则页面看起来像是卡住了 */
.search-progress { padding: 16px 40px 40px; font-size: 13px; opacity: 0.55; }

/* 首页分类快捷切换条：仅移动端生效（桌面已有顶部导航，避免重复）。
   轮播下方、卡片组上方，两排居中，可点击跳转 */
.cat-tabs { display: none; }

@media (max-width: 768px) {
  .cat-tabs {
    display: block;
    margin: 14px 0 18px;
  }

  /* 固定两排、每排 4 项：4 列网格，8 个分类恰好 2×4；左右 12px 与卡片网格边距对齐 */
  .cat-tabs-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 0 12px;
    box-sizing: border-box;
  }

  .cat-tab {
    display: block;
    padding: 8px 4px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 「深夜放映厅」配色：墨面胶囊 + 琥珀 active（呼应 mobile.css G 层；
   红色 #ff5c5c 退出移动端）。此组件桌面端 display:none，改动不影响桌面。 */
.cat-tab {
  flex: 0 0 auto;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.cat-tab.active,
.cat-tab:active {
  background: rgba(255, 158, 61, 0.16);
  border-color: rgba(255, 158, 61, 0.4);
  color: #ffcf7a;
}

/* 详情弹层（云端未引入隧道版 modal.js 的 36KB 查看器，
   这里保留本地实现，样式独立，不与 styles.css 的 .modal 冲突） */
.detail-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 40px 16px;
  background: rgba(0, 0, 0, 0.75);
}

.detail-box {
  position: relative;
  width: min(760px, 100%);
  /* margin:auto 让弹层在视口内垂直居中，内容超高时也能从顶部开始滚动而不被裁切 */
  margin: auto;
  padding: 22px;
  border-radius: 14px;
  background: #1c1c20;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
}

.detail-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 20px;
  cursor: pointer;
}

.detail-title { margin: 0 0 16px; font-size: 17px; line-height: 1.5; padding-right: 28px; }

/* 封面图 + 详情图：左右滑动切换，固定大小，图片跟随手指滚动 */
.detail-images {
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: 8px;
}
.detail-images::-webkit-scrollbar { display: none; }
.detail-images img {
  flex: 0 0 auto;
  width: 240px;
  height: 320px;
  object-fit: contain;
  background: #000;
  border-radius: 8px;
  scroll-snap-align: center;
  display: block;
}

.detail-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.detail-magnet {
  padding: 9px 16px;
  border: none;
  border-radius: 8px;
  background: #f0a020;
  color: #1a1a1a;
  font-weight: 600;
  cursor: pointer;
}

.detail-muted { opacity: 0.6; font-size: 14px; }

/* 提示条：显示逻辑沿用隧道版 .update-toast + .show */
.update-toast.show { display: block; }