/* =========================================================
   STARSCREEN V2 · 组件层
   ========================================================= */

/* section */
body[data-tone] .section{padding-top:58px}
body[data-tone] .section-head{align-items:flex-end;gap:24px;margin-bottom:20px}
body[data-tone] .section-head h2{
  font-family:var(--font-display);font-size:clamp(24px,2.6vw,34px);font-weight:500;letter-spacing:-.025em;
}
body[data-tone] .section-head .eyebrow{margin-bottom:5px}

/* movie card */
body[data-tone] .video-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:28px 16px}
body[data-tone] .video-card{min-width:0}
body[data-tone] .video-card-link{display:block}
body[data-tone] .video-card-poster{
  position:relative;aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:var(--ss-surface-2);
  border:1px solid var(--ss-line);box-shadow:0 10px 24px rgba(0,0,0,.18);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s;
}
body[data-tone] .video-card-link:hover .video-card-poster{
  transform:translateY(-6px) scale(1.018);border-color:var(--ss-line-strong);
  box-shadow:0 24px 48px rgba(0,0,0,.32);
}
body[data-tone] .video-card-poster img{transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .4s}
body[data-tone] .video-card-link:hover .video-card-poster img{transform:scale(1.045)}
body[data-tone] .video-card-shade{
  background:linear-gradient(0deg,rgba(0,0,0,.68),transparent 42%);
}
body[data-tone] .video-card-body{padding:9px 1px 0}
body[data-tone] .video-card-body h3{
  font-size:12.5px;font-weight:600;line-height:1.4;letter-spacing:0;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
body[data-tone] .video-card-body p{
  margin-top:3px;color:var(--ss-muted);font-size:9.5px;line-height:1.5;letter-spacing:.01em;
}
body[data-tone] .quality-badge,body[data-tone] .rating-badge,body[data-tone] .pay-badge{
  border-radius:3px;background:rgba(8,8,8,.72);color:#f2f0e9;border:1px solid rgba(255,255,255,.18);
  font-size:8px;letter-spacing:.04em;padding:3px 5px;backdrop-filter:blur(8px);
}
body[data-tone] .rating-badge{color:#f2f0e9}
body[data-tone] .quality-badge{top:8px;left:8px}
body[data-tone] .card-rank{
  top:8px;right:8px;left:auto;background:rgba(8,8,8,.72);color:#f2f0e9;border:1px solid rgba(255,255,255,.18);
  font-size:9px;border-radius:3px;padding:3px 6px;
}
body[data-tone] .pay-badge{bottom:8px;left:8px;right:auto;top:auto}
body[data-tone] .card-play{
  width:38px;height:38px;margin:-19px 0 0 -19px;background:var(--ss-text);color:var(--ss-bg);
  box-shadow:0 10px 26px rgba(0,0,0,.35);
}
body[data-tone] .card-progress{background:rgba(255,255,255,.2)}
body[data-tone] .card-progress i{background:var(--ss-text)}

/* horizontal rail */
body[data-tone] .ss-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:205px;gap:16px;
  overflow-x:auto;overscroll-behavior-inline:contain;padding:2px 1px 14px;
  scroll-snap-type:x proximity;scrollbar-width:none;
}
body[data-tone] .ss-rail::-webkit-scrollbar{display:none}
body[data-tone] .ss-rail>*{scroll-snap-align:start}
body[data-tone] .ss-section{position:relative}
body[data-tone] .ss-section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px;
}
body[data-tone] .ss-section-head h2{
  font-family:var(--font-display);font-size:clamp(22px,2.3vw,31px);font-weight:500;line-height:1.1;
}
body[data-tone] .ss-section-head .eyebrow{margin-bottom:4px}
body[data-tone] .ss-section-head .ss-link{font-size:10px;color:var(--ss-muted);letter-spacing:.05em;white-space:nowrap}
body[data-tone] .ss-section-head .ss-link:hover{color:var(--ss-text)}

/* chips / tags */
body[data-tone] .genre-strip{
  display:flex;align-items:center;gap:22px;padding:22px 0;margin:0 auto;border-top:1px solid var(--ss-line);border-bottom:1px solid var(--ss-line);
}
body[data-tone] .genre-strip-head h2{font-family:var(--font-display);font-size:20px;font-weight:500}
body[data-tone] .genre-chips{gap:7px}
body[data-tone] .genre-chips a{
  padding:6px 11px;border-radius:100px;border:1px solid var(--ss-line);background:transparent;
  color:var(--ss-muted);font-size:10px;
}
body[data-tone] .genre-chips a:hover{background:var(--ss-text);border-color:var(--ss-text);color:var(--ss-bg)}
body[data-tone] .category-sort a{
  border-radius:100px;border:1px solid var(--ss-line);background:transparent;color:var(--ss-muted);font-size:10px;
}
body[data-tone] .category-sort a.is-active{background:var(--ss-text);border-color:var(--ss-text);color:var(--ss-bg)}
body[data-tone] .category-sort>span{color:var(--ss-muted-2)}

/* empty / notice */
body[data-tone] .empty-state{
  border:1px dashed var(--ss-line-strong);border-radius:8px;background:transparent;color:var(--ss-muted);
  padding:56px 24px;
}
body[data-tone] .empty-state h2{font-family:var(--font-display);font-size:26px;font-weight:500;color:var(--ss-text)}
body[data-tone] .empty-state p{font-size:12px}
body[data-tone] .notice-line,body[data-tone] .player-notice{
  border:1px solid var(--ss-line);background:var(--ss-surface);color:var(--ss-muted);border-radius:6px;
}

/* ads */
body[data-tone] .site-ad,body[data-tone] .site-ad-house{
  border:1px solid var(--ss-line);border-radius:7px;background:var(--ss-surface);box-shadow:none;
}
body[data-tone] .site-ad-label{background:transparent;border:1px solid var(--ss-line);color:var(--ss-muted)}
body[data-tone] .site-ad-house-cta{background:var(--ss-text);color:var(--ss-bg);border-radius:4px}
body[data-tone] .site-ad-house-icon{color:var(--ss-text)}

/* hero */
body[data-tone] .hero-section{padding:calc(var(--header-h) + 34px) 0 0}
body[data-tone] .hero-layout{grid-template-columns:minmax(0,1fr) 300px;gap:18px}
body[data-tone] .hero-stage{
  min-height:570px;border-radius:10px;border:1px solid var(--ss-line);box-shadow:var(--ss-shadow-soft);
}
body[data-tone] .hero-bg{filter:saturate(.65) contrast(1.02);transform:scale(1.01)}
body[data-tone] .hero-slide.is-active .hero-bg{transform:scale(1.06)}
body[data-tone] .hero-vignette{
  background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.62) 42%,rgba(0,0,0,.06) 78%),linear-gradient(0deg,rgba(0,0,0,.92) 0%,transparent 48%);
}
body[data-tone] .hero-content{padding:46px 46px 86px;gap:24px}
body[data-tone] .hero-copy{max-width:620px}
body[data-tone] .hero-title{
  font-family:var(--font-display);font-weight:500;font-size:clamp(40px,4.2vw,66px);letter-spacing:-.03em;line-height:1.02;
}
body[data-tone] .hero-sub{font-size:12.5px;line-height:1.8;color:rgba(255,255,255,.68);max-width:500px}
body[data-tone] .hero-meta{color:rgba(255,255,255,.62);font-size:10.5px;gap:6px 14px;margin-bottom:22px}
body[data-tone] .hero-rating{color:#fff}
body[data-tone] .hero-poster{width:178px}
body[data-tone] .hero-poster-frame{border-radius:7px;border:1px solid rgba(255,255,255,.2);box-shadow:0 20px 50px rgba(0,0,0,.5)}
body[data-tone] .hero-poster-label{background:rgba(0,0,0,.6);border-radius:3px;font-size:8px}
body[data-tone] .hero-actions .btn-primary{background:#f2f0e9;color:#0a0a0a}
body[data-tone] .hero-actions .btn-glass{border-color:rgba(255,255,255,.35);color:#fff;background:rgba(0,0,0,.2)}
body[data-tone] .hero-controls{position:absolute;left:46px;right:46px;bottom:22px}
body[data-tone] .hero-dot span{background:rgba(255,255,255,.3)}
body[data-tone] .hero-dot.is-active span{background:#fff}
body[data-tone] .hero-thumb{width:34px;border-radius:3px;border:1px solid rgba(255,255,255,.18);opacity:.5}
body[data-tone] .hero-thumb.is-active{opacity:1;border-color:#fff}
body[data-tone] .rank-panel{background:var(--ss-surface);border:1px solid var(--ss-line);border-radius:10px;padding:18px}
body[data-tone] .rank-head h2{font-family:var(--font-display);font-size:23px;font-weight:500}
body[data-tone] .rank-live{display:none}
body[data-tone] .rank-item{padding:10px 0;border-top:1px solid var(--ss-line);grid-template-columns:24px 42px 1fr}
body[data-tone] .rank-num{font-family:var(--font-display);font-size:14px;color:var(--ss-muted-2)}
body[data-tone] .rank-item img{width:42px;height:58px;border-radius:4px;object-fit:cover}
body[data-tone] .rank-copy strong{font-size:11.5px}
body[data-tone] .rank-copy small,body[data-tone] .rank-views{font-size:9px;color:var(--ss-muted)}
body[data-tone] .rank-more{color:var(--ss-muted);font-size:10px;border-top:1px solid var(--ss-line);padding-top:12px}
body[data-tone] .rank-paid{background:transparent;border:1px solid var(--ss-line);color:var(--ss-muted)}

/* card meta tags */
body[data-tone] .video-card-meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;color:var(--ss-muted);font-size:8.5px}
body[data-tone] .video-card-meta span{padding:1px 5px;border:1px solid var(--ss-line);border-radius:2px;line-height:1.5}


/* hero sits on a dark image in both themes */
body[data-tone] .hero-copy{color:#f2f0e9}
body[data-tone] .hero-title,body[data-tone] .hero-copy h1,body[data-tone] .hero-copy h2{color:#f2f0e9}
body[data-tone] .hero-sub{color:rgba(242,240,233,.72)}
body[data-tone] .hero-meta{color:rgba(242,240,233,.64)}
body[data-tone] .hero-rating{color:#fff}


/* 卡片装饰：内框线 + 章节短线 + 悬浮强调 */
body[data-tone] .video-card-poster::before{
  content:"";position:absolute;inset:7px;z-index:2;pointer-events:none;
  border:1px solid rgba(255,255,255,.16);border-radius:5px;opacity:.55;transition:.25s ease;
}
body[data-tone] .video-card-link:hover .video-card-poster::before{
  inset:6px;border-color:color-mix(in srgb,var(--ss-accent) 70%,transparent);opacity:1;
}
body[data-tone] .video-card-body{position:relative;padding-top:11px}
body[data-tone] .video-card-body::before{
  content:"";position:absolute;left:0;top:0;width:18px;height:1px;background:var(--ss-line-strong);transition:.25s ease;
}
body[data-tone] .video-card-link:hover .video-card-body::before{width:42px;background:var(--ss-accent)}
body[data-tone] .video-card-link:hover .video-card-body h3{color:var(--ss-accent)}
body[data-tone] .category-hot-item{position:relative}
body[data-tone] .category-hot-item::before{
  content:"";position:absolute;left:0;top:9px;bottom:9px;width:2px;border-radius:2px;
  background:var(--ss-accent);opacity:0;transition:.2s ease;
}
body[data-tone] .category-hot-item:hover::before{opacity:1}
body[data-tone] .category-card{position:relative}
body[data-tone] .category-card::after{
  content:"";position:absolute;left:10px;right:10px;bottom:8px;height:1px;
  background:linear-gradient(90deg,var(--cat,var(--ss-accent)),transparent);opacity:.5;
}

/* =========================================================
   Pagination 2.0 · 只给真正的按钮和页码加框
   ========================================================= */
body[data-tone] .pagination{
  display:flex;align-items:center;justify-content:center;
  gap:8px;margin-top:44px;padding:0;flex-wrap:wrap;
}
body[data-tone] .page-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:0;height:40px;padding:0 15px;
  border:1px solid var(--ss-line);border-radius:7px;
  background:transparent;color:var(--ss-muted);
  font-size:11px;font-weight:600;line-height:1;
  transition:border-color .2s,color .2s,background .2s;
}
body[data-tone] .page-btn:hover{
  border-color:color-mix(in srgb,var(--ss-accent) 45%,var(--ss-line));
  background:var(--ss-accent-soft);color:var(--ss-text);
}
body[data-tone] .page-btn .icon{width:15px;height:15px;flex:0 0 15px}
body[data-tone] .page-btn>span{
  display:inline;min-width:0;width:auto;height:auto;
  padding:0;border:0;border-radius:0;background:transparent;
  color:inherit;font-size:inherit;line-height:inherit;
}
body[data-tone] .page-btn.is-disabled{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  color:var(--ss-muted-2);opacity:.32;
}
body[data-tone] .page-numbers{display:flex;align-items:center;gap:6px}
body[data-tone] .page-number{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;min-width:38px;padding:0;
  border:1px solid var(--ss-line);border-radius:7px;
  color:var(--ss-muted);font-size:11.5px;font-weight:550;
  background:transparent;transition:.2s;
}
body[data-tone] .page-number:hover{
  border-color:color-mix(in srgb,var(--ss-accent) 45%,var(--ss-line));
  color:var(--ss-text);background:var(--ss-accent-soft);
}
body[data-tone] .page-number.is-current{
  border-color:var(--ss-accent);background:var(--ss-accent);
  color:var(--ss-accent-ink);font-weight:750;cursor:default;
}
body[data-tone] .page-ellipsis{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:38px;min-width:22px;padding:0;border:0;background:transparent;
  color:var(--ss-muted-2);font-size:12px;
}
@media(max-width:680px){
  body[data-tone] .pagination{gap:5px;margin-top:32px}
  body[data-tone] .page-btn{height:36px;padding:0 10px;font-size:10px}
  body[data-tone] .page-btn>span{display:none}
  body[data-tone] .page-number{width:34px;height:34px;min-width:34px;font-size:11px}
  body[data-tone] .page-ellipsis{width:18px;height:34px;min-width:18px}
}