/* ============================================================
   CC短剧 duanju —— 首页「找剧」样式
   仅本页私有样式；设计令牌与共用组件见 base.css，勿在此重定义变量。
   ============================================================ */

.dj-home .dj-app{
  /* App 式布局：外壳固定满屏、不滚动；顶栏 flex:none，内容滚动交给 .dj-scroll。
     这样固定顶栏不参与滚动重绘（消除抖动），橡皮筋过冲基准为顶栏底部。 */
  height:100vh;
  height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ---------- 1+2. 固定顶部容器（搜索栏 + 导航 tab，flex:none 不滚动） ---------- */
.dj-topbar{
  flex:none;z-index:30;
  background:var(--dj-bg);
  box-shadow:0 1px 0 var(--dj-line, rgba(0,0,0,.06));
}

/* ---------- 顶栏下方唯一滚动区 ---------- */
.dj-scroll{
  flex:1 1 auto;
  min-height:0;                 /* flex 子项允许收缩，否则内容撑破外壳 */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;/* 橡皮筋过冲局限在本容器，不冒泡到 body */
  padding-bottom:calc(var(--dj-safe-b) + 8px);
}
#dj-view{ display:block; }

/* ---------- 1. 搜索栏 ---------- */
.dj-search-bar{
  display:flex;align-items:center;gap:8px;
  background:var(--dj-bg);
  padding:calc(var(--dj-safe-t) + 10px) 12px 8px;
}
.dj-search-ico{font-size:19px;color:var(--dj-text-sub)}
/* 顶栏内真输入框：布局细节复用全局 .dj-search-form/.dj-search-input/.dj-search-submit（见下方搜索区样式），此处只调高度 */
.dj-search-bar .dj-search-form{height:44px}

/* ---------- 2. 导航 tab ---------- */
.dj-tabs{
  display:flex;align-items:flex-end;gap:20px;
  padding:4px 14px 2px;
  overflow-x:auto;white-space:nowrap;
}
.dj-tab{
  position:relative;flex:none;
  padding:6px 1px 9px;line-height:1.2;
  font-size:var(--dj-fs-lead);color:var(--dj-text-sub);
  transition:color .18s ease;
}
.dj-tab.is-active,
body[data-tab="home"] .dj-tab[data-tab="home"],
body[data-tab="new"] .dj-tab[data-tab="new"],
body[data-tab="rank"] .dj-tab[data-tab="rank"],
body[data-tab="61"] .dj-tab[data-tab="61"],
body[data-tab="63"] .dj-tab[data-tab="63"]{
  color:var(--dj-text);
  font-size:var(--dj-fs-title);font-weight:800;letter-spacing:.5px;
}
.dj-tab.is-active::after,
body[data-tab="home"] .dj-tab[data-tab="home"]::after,
body[data-tab="new"] .dj-tab[data-tab="new"]::after,
body[data-tab="rank"] .dj-tab[data-tab="rank"]::after,
body[data-tab="61"] .dj-tab[data-tab="61"]::after,
body[data-tab="63"] .dj-tab[data-tab="63"]::after{
  content:"";position:absolute;left:50%;bottom:2px;
  width:22px;height:3px;border-radius:3px;
  background:var(--dj-grad);
  transform:translateX(-50%);transform-origin:center;
  animation:dj-underline .26s var(--dj-ease);
}
@keyframes dj-underline{
  from{transform:translateX(-50%) scaleX(0);opacity:.3}
  to{transform:translateX(-50%) scaleX(1);opacity:1}
}

/* ---------- 3. 快捷入口 ---------- */
.dj-quick{display:flex;gap:8px;padding:10px 12px 4px}
.dj-quick-item{
  flex:1;min-width:0;
  display:flex;align-items:center;justify-content:center;gap:6px;
  height:46px;
  background:var(--dj-card);border-radius:var(--dj-radius);
  transition:transform .12s ease;
}
.dj-quick-item:active{transform:scale(.97)}
.dj-quick-ico{
  width:26px;height:26px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;color:#fff;font-size:15px;
}
.dj-quick-txt{
  font-size:var(--dj-fs-cap);font-weight:600;color:var(--dj-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qi-filter{background:#7C6CFF}
.qi-rank{background:linear-gradient(135deg,var(--dj-accent),var(--dj-accent-2))}
.qi-new{background:linear-gradient(135deg,#12B6C8,#0FA0C0)}
.qi-book{background:#9A9AA4}

/* ---------- 4. 继续观看 ---------- */
.dj-resume{
  display:flex;align-items:center;gap:12px;
  margin:8px 12px 10px;padding:10px 12px;
  background:linear-gradient(120deg,rgba(255,46,99,.16),rgba(255,46,99,.06));
  border:.5px solid rgba(255,46,99,.28);
  border-radius:var(--dj-radius-lg);
  transition:transform .14s var(--dj-ease);
}
.dj-resume:active{transform:scale(.99)}
.dj-resume-pic{
  width:52px;height:68px;flex:none;
  border-radius:8px;overflow:hidden;background:var(--dj-fill);
  box-shadow:var(--dj-shadow-card);
}
.dj-resume-pic img{width:100%;height:100%;object-fit:cover;display:block}
.dj-resume-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.dj-resume-name{
  font-size:var(--dj-fs-body);font-weight:600;color:var(--dj-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dj-resume-sub{font-size:var(--dj-fs-cap);color:var(--dj-text-sub)}
.dj-resume-btn{
  flex:none;display:inline-flex;align-items:center;gap:4px;
  padding:8px 15px;border-radius:100px;
  background:var(--dj-grad);color:#fff;
  font-size:var(--dj-fs-cap);font-weight:700;
  box-shadow:var(--dj-shadow-cta);
}
.dj-resume-btn .dj-icon{font-size:13px}

/* ---------- 5. 瀑布流 ---------- */
.dj-waterfall{
  columns:2;column-gap:12px;
  padding:8px 12px 4px;
}
/* 浏览态卡片纵向间距（不影响播放器 feed 的裸 .dj-card） */
.dj-waterfall .dj-card{margin-bottom:16px}
/* .dj-card / .dj-card-pic / .dj-hits 等均来自 base.css */

/* ---------- 6. 加载更多 ---------- */
#dj-paging{display:none}
.dj-more-wrap{
  padding:6px 12px calc(var(--dj-safe-b) + 20px);
  text-align:center;
}
.dj-more{
  display:inline-block;min-width:150px;
  padding:11px 26px;border-radius:100px;
  background:var(--dj-card);color:var(--dj-text-sub);
  font-size:var(--dj-fs-cap);font-weight:600;
  box-shadow:var(--dj-shadow-card);
  transition:transform .14s var(--dj-ease);
}
.dj-more:active{transform:scale(.98)}
.dj-more.is-loading{opacity:.6;pointer-events:none}

/* 窄屏微调（≤340）：快捷入口收紧，避免文字挤压 */
@media (max-width:340px){
  .dj-quick{gap:6px;padding-left:10px;padding-right:10px}
  .dj-quick-ico{width:24px;height:24px;font-size:14px}
  .dj-quick-txt{font-size:var(--dj-fs-micro)}
  .dj-tabs{gap:16px}
}

/* ============ 搜索页 / 分类页 / 筛选页 共用顶栏与结果 ============ */
.dj-home-btn,.dj-type-back{
  flex:none;width:32px;height:32px;display:grid;place-items:center;
  font-size:20px;color:var(--dj-text);
}
.dj-search-form{
  flex:1;display:flex;align-items:center;gap:6px;
  background:var(--dj-fill);border-radius:100px;padding:0 6px 0 12px;height:38px;
}
.dj-search-form .dj-search-ico{font-size:16px;color:var(--dj-text-sub);flex:none}
.dj-search-input{
  flex:1;border:0;background:transparent;outline:none;
  font-size:var(--dj-fs-body);color:var(--dj-text);min-width:0;
}
.dj-search-submit{
  flex:none;height:30px;padding:0 15px;border-radius:100px;
  background:var(--dj-grad);color:#fff;font-size:var(--dj-fs-cap);font-weight:700;
  box-shadow:0 3px 10px rgba(255,46,99,.32);
}
.dj-search-tip{padding:14px 16px 4px;font-size:var(--dj-fs-cap);color:var(--dj-text-sub);font-weight:600}

/* ---------- 搜索态（body[data-mode=search]）：tab 收起、首页键出现 ---------- */
body:not([data-mode="search"]) .dj-home-btn{display:none}
body[data-mode="search"] .dj-tabs{display:none}

/* ---------- 搜索历史 ---------- */
.dj-shistory{padding:14px 16px 0}
.dj-shistory-head{display:flex;align-items:center;justify-content:space-between}
.dj-shistory-title{font-size:var(--dj-fs-cap);color:var(--dj-text-sub);font-weight:600}
.dj-shistory-clear{background:none;border:0;padding:4px;font-size:var(--dj-fs-cap);color:var(--dj-text-weak)}
.dj-shistory-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.dj-shistory-tag{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:var(--dj-fill);color:var(--dj-text);border:0;border-radius:100px;
  padding:7px 14px;font-size:var(--dj-fs-cap);
}

/* 分类/筛选页顶栏 */
.dj-type-head{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:6px;
  padding:calc(var(--dj-safe-t) + 8px) 12px 8px;
  background:var(--dj-card);border-bottom:1px solid var(--dj-line);
}
.dj-type-title{
  flex:1;margin:0;font-size:var(--dj-fs-lead);font-weight:700;color:var(--dj-text);
  text-align:center;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.dj-type-search{
  flex:none;width:32px;height:32px;display:grid;place-items:center;
  font-size:19px;color:var(--dj-text);
}

/* 排序切换（筛选页） */
.dj-sort{
  display:flex;gap:18px;overflow-x:auto;
  padding:10px 16px;background:var(--dj-card);
  border-bottom:1px solid var(--dj-line);
}
.dj-sort-item{
  flex:none;font-size:var(--dj-fs-body);color:var(--dj-text-sub);
  position:relative;padding-bottom:4px;
}
.dj-sort-item.is-active{color:var(--dj-text);font-weight:700}
.dj-sort-item.is-active::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:18px;height:3px;border-radius:3px;background:var(--dj-grad);
}

/* ---------- PJAX 轻提示（搜索限频等） ---------- */
#dj-toast{
  position:fixed;left:50%;top:18%;transform:translate(-50%,-8px);
  z-index:100;max-width:80vw;
  background:rgba(0,0,0,.76);color:#fff;
  padding:9px 18px;border-radius:100px;
  font-size:var(--dj-fs-cap);text-align:center;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}
#dj-toast.is-show{opacity:1;transform:translate(-50%,0)}

/* ============ 排行榜页（label/rank） ============ */
.dj-rank-tabs{
  display:flex;gap:8px;padding:12px 12px 4px;
}
.dj-rank-tab{
  flex:none;padding:7px 16px;border:0;border-radius:100px;
  background:var(--dj-card);color:var(--dj-text-sub);
  font-size:var(--dj-fs-cap);font-weight:600;
  box-shadow:var(--dj-shadow-card);
  transition:transform .14s var(--dj-ease);
}
.dj-rank-tab:active{transform:scale(.96)}
.dj-rank-tab.is-active{
  background:var(--dj-grad);
  color:#fff;box-shadow:var(--dj-shadow-cta);
}

.dj-rank-list{list-style:none;margin:0;padding:8px 12px 0}
.dj-rank-item{margin-bottom:10px}
.dj-rank-link{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;background:var(--dj-card);border-radius:var(--dj-radius-lg);
  box-shadow:var(--dj-shadow-card);
  transition:transform .14s var(--dj-ease);
}
.dj-rank-link:active{transform:scale(.985)}
/* 序号：条形展示数字，票根/影院计数感 */
.dj-rank-no{
  flex:none;width:34px;text-align:center;
  font-family:var(--dj-font-num);
  font-size:30px;font-weight:700;line-height:1;
  color:var(--dj-text-weak);font-variant-numeric:tabular-nums;
}
/* 前三名：渐变数字（background-clip:text）。
   #1 用电光青签名色（榜首唯一高光，符合青纪律：每屏至多一处），#2 品红、#3 金。 */
.dj-rank-item:nth-child(1) .dj-rank-no,
.dj-rank-item:nth-child(2) .dj-rank-no,
.dj-rank-item:nth-child(3) .dj-rank-no{
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.dj-rank-item:nth-child(1) .dj-rank-no{background-image:linear-gradient(120deg,#5BF0DE,#22E0C8)}
.dj-rank-item:nth-child(2) .dj-rank-no{background-image:var(--dj-grad)}
.dj-rank-item:nth-child(3) .dj-rank-no{background-image:linear-gradient(120deg,var(--dj-gold),#FF9A2E)}
.dj-rank-pic{
  flex:none;width:58px;height:76px;
  border-radius:var(--dj-radius-sm);overflow:hidden;background:var(--dj-fill);
  box-shadow:var(--dj-shadow-card);
}
.dj-rank-pic img{width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .4s var(--dj-ease)}
.dj-rank-pic img.is-loaded{opacity:1}
.dj-rank-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.dj-rank-name{
  font-size:var(--dj-fs-body);font-weight:700;color:var(--dj-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dj-rank-sub{
  font-size:var(--dj-fs-cap);color:var(--dj-text-sub);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dj-rank-hot{
  display:inline-flex;align-items:center;gap:4px;
  font-size:var(--dj-fs-micro);font-weight:700;color:var(--dj-accent);
}
.dj-rank-hot .dj-icon{font-size:12px;color:var(--dj-gold)}
.dj-rank-hot .js-hits{font-family:var(--dj-font-num);letter-spacing:.2px}
.dj-rank-hot .js-hits:empty::before{content:"—";color:var(--dj-text-weak)}