.hdr{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:var(--s4);padding:var(--s4) var(--s5);
  transition:background var(--dur) var(--ease),backdrop-filter var(--dur) var(--ease)}
.hdr[data-solid]{background:rgb(10 23 28 / .86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.hdr__brand{display:flex;align-items:center;gap:var(--s3)}
.hdr__word{height:22px;width:auto}
.hdr__nav{display:flex;gap:var(--s4);font-size:15px}
.hdr__nav i{display:block;font-style:normal;font-family:var(--font-latin);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim)}

.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hero__veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgb(10 23 28 / .35) 0%,rgb(10 23 28 / .55) 45%,var(--ink) 92%)}
.hero__inner{position:relative;padding:0 var(--s5) var(--s8);max-width:var(--maxw);margin:0 auto;width:100%}
.hero__title{font-size:clamp(30px,8.2vw,64px);line-height:1.24;font-weight:700;letter-spacing:-.01em}
.hero__sub{margin-top:var(--s3);color:var(--paper-dim);font-size:clamp(15px,4vw,19px)}
.kicker{font-family:var(--font-latin);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--amber);margin-bottom:var(--s3)}

.cta{display:inline-flex;align-items:center;gap:var(--s3);margin-top:var(--s5);
  background:var(--red);color:#fff;font-weight:600;font-size:17px;
  padding:var(--s3) var(--s5);border-radius:var(--r-pill);
  box-shadow:0 12px 32px -12px rgb(198 41 35 / .9);
  transition:transform .18s var(--ease),background .18s}
.cta:hover{background:var(--red-hot);transform:translateY(-1px)}
.cta__icon{width:20px;height:20px;flex:none}

.rail,.grid-sec,.cats,.about{margin-top:var(--s9);padding:0 var(--s5);max-width:var(--maxw);margin-inline:auto}
.sec__title{font-size:clamp(20px,5vw,28px);font-weight:700;margin-bottom:var(--s5)}
.rail__track{display:flex;gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:var(--s3);scrollbar-width:none}
.rail__track::-webkit-scrollbar{display:none}
.rail__track .card{flex:0 0 min(42%,260px);scroll-snap-align:start}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s3)}
@media (min-width:720px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1080px){.grid{grid-template-columns:repeat(5,1fr)}}

.card{position:relative;display:block;border-radius:var(--r-md);overflow:hidden;
  background:var(--ink-2);transition:transform .3s var(--ease)}
.card:hover{transform:translateY(-4px)}
.card__poster{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:var(--ink-3)}
.card__title{display:block;padding:var(--s3) var(--s3) 2px;font-weight:600;font-size:15px;line-height:1.4}
.card__meta{display:block;padding:0 var(--s3) var(--s3);color:var(--paper-dim);font-size:12px}

.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s5) 0}
.chip{display:inline-block;padding:6px 14px;border:1px solid var(--line-strong);
  border-radius:var(--r-pill);font-size:14px;transition:border-color .2s,color .2s}
.chip:hover{border-color:var(--paper)}
.chip--on{border-color:var(--red);color:#fff;background:var(--red)}

.cats__list{display:flex;flex-wrap:wrap;gap:var(--s2)}
.about__body{max-width:62ch;color:var(--paper-dim)}
.band{display:flex;flex-direction:column;align-items:center;gap:var(--s5);
  margin:var(--s9) 0 0;padding:var(--s8) var(--s5);background:var(--ink-2);text-align:center}

.page{max-width:var(--maxw);margin:0 auto;padding:calc(var(--s9) + 40px) var(--s5) var(--s9)}
.page--narrow{max-width:720px}
.page__title{font-size:clamp(26px,6vw,40px);font-weight:700;margin-bottom:var(--s4)}

.drama__media{position:relative;max-width:560px;margin:0 auto;background:var(--ink)}
/* 海报是 9:16 标题卡，按原始比例显示；用 max-height 裁切会切掉顶部字标 */
.drama__poster,.drama__video{display:block;width:100%;height:auto;object-fit:cover}
.drama__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;display:grid;place-items:center;border-radius:50%;
  background:rgb(10 23 28 / .6);border:2px solid rgb(245 245 243 / .85);color:#fff;
  transition:transform .2s var(--ease),background .2s}
.drama__play:hover{transform:translate(-50%,-50%) scale(1.06);background:var(--red)}
.drama__play svg{width:34px;height:34px;margin-left:5px}
.drama__body{max-width:var(--maxw);margin:0 auto;padding:var(--s6) var(--s5) 0}
.drama__title{font-size:clamp(24px,6.4vw,40px);line-height:1.3;font-weight:700}
.drama__en{color:var(--paper-dim);font-family:var(--font-latin);font-size:14px;margin-top:var(--s2)}
.drama__meta{color:var(--amber);font-size:14px;margin-top:var(--s2)}
.drama__syn{margin-top:var(--s5);color:var(--paper-dim)}

.sticky{position:sticky;bottom:0;padding:var(--s4) var(--s5) calc(var(--s4) + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,var(--ink) 38%);
  transition:transform .25s var(--ease),opacity .25s var(--ease)}
/* 播放中收起底部 CTA，别挡住进度条；暂停后自动回来 */
html.is-video-playing .sticky{transform:translateY(120%);opacity:0;pointer-events:none}
.sticky .cta{margin-top:0;width:100%;justify-content:center}

/* 免费试看：集数按钮 + Mux HLS 播放器（视频本身在对方 CDN，token 由 /api/play 换） */
.preview{max-width:var(--maxw);margin:var(--s7) auto 0;padding:0 var(--s5) var(--s6)}
.preview .kicker{margin-bottom:var(--s2)}
.preview__title{font-size:clamp(20px,5vw,28px);font-weight:700}
.preview__lead{margin-top:var(--s2);color:var(--paper-dim);font-size:15px}
.preview__player{position:relative;margin:var(--s5) auto 0;max-width:420px;
  border-radius:var(--r-md);overflow:hidden;background:#000}
.preview__video{display:block;width:100%;aspect-ratio:9/16;max-height:72svh;
  object-fit:contain;background:#000}
.preview__status{position:absolute;left:var(--s3);right:var(--s3);bottom:var(--s3);
  margin:0;padding:var(--s2) var(--s3);border-radius:var(--r-sm);
  background:rgb(10 23 28 / .9);color:var(--paper);font-size:13px;line-height:1.5;
  text-align:center;pointer-events:none}
.preview__eps{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));
  gap:var(--s2);margin:var(--s4) auto 0;max-width:420px}
.ep{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--ink-2);
  color:var(--paper);font:inherit;font-weight:700;line-height:1.2;cursor:pointer;
  transition:border-color .18s,background .18s}
.ep:hover{border-color:var(--paper)}
.ep__n{font-size:17px}
.ep__t{font-size:10px;font-weight:400;color:var(--paper-dim);letter-spacing:.02em}
.ep.is-active{border-color:var(--red);background:var(--red)}
.ep.is-active .ep__t{color:rgb(255 255 255 / .86)}

.dl__lockup{display:block;margin:0 auto var(--s6);width:180px;height:auto}
.dl__lead{text-align:center;color:var(--paper-dim);margin-bottom:var(--s5)}
.page--narrow .cta{display:flex;justify-content:center;margin:0 auto var(--s7)}
.faq__item{border-top:1px solid var(--line);padding:var(--s4) 0}
.faq__item summary{cursor:pointer;font-weight:600;list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item p{margin-top:var(--s3);color:var(--paper-dim)}

.prose h2{margin:var(--s8) 0 var(--s3);font-size:22px}
.prose p{margin-bottom:var(--s4);color:var(--paper-dim)}
.prose a{color:var(--amber);text-decoration:underline}

.ftr{display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  padding:var(--s9) var(--s5) var(--s7);border-top:1px solid var(--line);text-align:center}
.ftr__tag{color:var(--paper-dim);font-size:14px}
.ftr__links{display:flex;gap:var(--s4);font-size:14px;color:var(--paper-dim)}
.ftr__links a:hover{color:var(--paper)}
.ftr__copy{font-family:var(--font-latin);font-size:12px;color:var(--paper-dim);opacity:.7}

.toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,20px);
  background:var(--paper);color:var(--ink);padding:12px 20px;border-radius:var(--r-pill);
  font-size:15px;font-weight:600;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;z-index:99;max-width:88vw;text-align:center}
.toast[data-show]{opacity:1;transform:translate(-50%,0)}