@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Noto+Serif+SC:wght@300;400;600&display=swap');

:root {
  --primary:   #c9a84c;
  --primary2:  #e8d5a3;
  --bg:        #0a0a0f;
  --card:      #13131e;
  --card2:     #1a1a28;
  --text:      #e8e0d0;
  --dim:       #6e6a60;
  --accent:    #c0392b;
  --border:    rgba(201,168,76,.12);
  --font-d:    'Playfair Display', serif;
  --font-b:    'Noto Serif SC', sans-serif;
  --radius:    3px;
  --shadow:    0 4px 20px rgba(0,0,0,.3);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.5);
}

/* ── RESET & BASE ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:14px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  font-weight: 300;
  overflow-x: hidden;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; transition: color .2s; }
button { font-family: var(--font-b); cursor: pointer; transition: all .2s; }
img { max-width:100%; display:block; }
input, textarea { font-family: var(--font-b); }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--primary); opacity:.5; border-radius:3px; }

/* ── TYPOGRAPHY ── */
.font-display { font-family: var(--font-d); }
.text-primary { color: var(--primary); }
.text-dim { color: var(--dim); }
.text-accent { color: var(--accent); }

/* ── LAYOUT ── */
.container { max-width:1400px; margin:0 auto; padding:0 40px; }
.page-wrap { display:grid; grid-template-columns:1fr 300px; gap:0; }
.page-wrap.full { grid-template-columns:1fr; }

/* ── NAV ── */
.site-nav {
  position: sticky; top:0; z-index:500;
  background: rgba(0,0,0,0); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.site-nav { background-color: color-mix(in srgb, var(--bg) 95%, transparent); }
.nav-top {
  height:62px; display:flex; align-items:center;
  justify-content:space-between; padding:0 40px;
}
.site-logo {
  font-family: var(--font-d); font-size:20px; font-weight:900;
  color: var(--primary); letter-spacing:4px; text-decoration:none;
}
.site-logo span, .site-logo em {
  color: var(--text); font-weight:400; font-style:normal;
}
.site-logo sup {
  font-size:10px; color:var(--accent); vertical-align:super; letter-spacing:1px;
}
/* 搜索 */
.search-form {
  display:flex; align-items:stretch;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border: 1px solid var(--border); overflow:hidden;
}
.search-form input {
  background:none; border:none; color:var(--text);
  padding:8px 16px; font-size:13px; outline:none; width:240px;
}
.search-form input::placeholder { color:var(--dim); }
.search-form button {
  background:var(--primary); border:none; color:var(--bg);
  padding:8px 18px; font-size:12px; font-weight:700; letter-spacing:1px;
}
.search-form button:hover { background:var(--primary2); }
/* 右侧按钮 */
.nav-actions { display:flex; gap:8px; align-items:center; }
.btn-ghost {
  background:none; border:1px solid var(--border); color:var(--dim);
  padding:6px 16px; font-size:12px; border-radius:var(--radius); letter-spacing:1px;
}
.btn-ghost:hover { border-color:var(--primary); color:var(--primary); }
.btn-primary {
  background: linear-gradient(135deg,
    color-mix(in srgb,var(--primary) 60%,#000),
    var(--primary));
  color:var(--bg); border:none;
  padding:7px 18px; font-size:12px; font-weight:700;
  border-radius:var(--radius); letter-spacing:1px;
}
.btn-primary:hover { opacity:.9; transform:translateY(-1px); }

/* ── 27个栏目导航条 ── */
.nav-cats {
  background: color-mix(in srgb, var(--bg) 80%, var(--card));
  border-bottom: 1px solid var(--border);
  padding: 0 40px;
  display: flex; align-items:stretch;
  overflow-x: auto; scrollbar-width:none;
}
.nav-cats::-webkit-scrollbar { display:none; }
.cat-group {
  display:flex; align-items:stretch; flex-shrink:0;
  border-right:1px solid var(--border);
  padding:0 4px;
}
.cat-group:last-child { border-right:none; }
.cat-link {
  display:flex; align-items:center; padding:0 11px; height:42px;
  color:var(--dim); font-size:12px; letter-spacing:.8px; white-space:nowrap;
  border-bottom:2px solid transparent; position:relative; transition:all .2s;
}
.cat-link:hover { color:var(--text); }
.cat-link.active { color:var(--primary); border-bottom-color:var(--primary); }
.cat-badge {
  position:absolute; top:6px; right:2px;
  background:var(--accent); color:#fff;
  font-size:8px; padding:1px 4px; border-radius:2px; letter-spacing:0;
  font-weight:700;
}
.cat-badge.primary { background:var(--primary); color:var(--bg); }

/* ── 面包屑 ── */
.breadcrumb {
  padding:10px 40px; font-size:11px; color:var(--dim);
  display:flex; align-items:center; gap:8px;
  border-bottom:1px solid var(--border);
  background: color-mix(in srgb,var(--card) 60%,transparent);
  position:relative; z-index:1;
}
.breadcrumb a:hover { color:var(--primary); }
.breadcrumb .sep { opacity:.4; }

/* ── NOTICE BAR ── */
.notice-bar {
  background: color-mix(in srgb,var(--accent) 10%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 20%,transparent);
  padding:7px 40px; font-size:12px; color:var(--dim);
  display:flex; align-items:center; gap:14px; overflow:hidden;
}
.notice-tag {
  background:var(--accent); color:#fff;
  padding:1px 8px; font-size:10px; letter-spacing:2px;
  flex-shrink:0; font-weight:700;
}
.notice-scroll {
  white-space:nowrap; animation:marquee 35s linear infinite;
}
@keyframes marquee {
  0%{ transform:translateX(80vw); }
  100%{ transform:translateX(-100%); }
}

/* ── VIP BANNER ── */
.vip-banner {
  background: linear-gradient(135deg,
    color-mix(in srgb,var(--primary) 8%,var(--card)),
    color-mix(in srgb,var(--primary) 4%,var(--card2)));
  border:1px solid var(--border); padding:22px 32px;
  display:flex; align-items:center; justify-content:space-between;
  position:relative; overflow:hidden; margin-bottom:28px;
}
.vip-banner::before {
  content:''; position:absolute; top:0; left:32px; right:32px; height:1px;
  background:linear-gradient(90deg,transparent,var(--primary),transparent);
}
.vip-banner h3 { font-family:var(--font-d); font-size:20px; margin-bottom:4px; }
.vip-banner p { font-size:12px; color:var(--dim); }
.vip-feats { display:flex; gap:24px; }
.vip-feat { text-align:center; }
.vip-feat-icon { font-size:22px; margin-bottom:4px; }
.vip-feat-label { font-size:10px; color:var(--dim); letter-spacing:1px; }

/* ── SECTION HEADERS ── */
.section { padding:32px 40px; position:relative; z-index:1; }
.section.alt { background:color-mix(in srgb,var(--card) 60%,var(--bg)); }
.sh {
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid var(--border);
}
.sh h2 {
  font-family:var(--font-d); font-size:20px; font-weight:700;
  color:var(--text); display:flex; align-items:center; gap:8px;
}
.sh h2 em { color:var(--primary); font-style:normal; }
.sh-more { font-size:11px; color:var(--dim); letter-spacing:1px; transition:.2s; }
.sh-more:hover { color:var(--primary); }

/* ── TABS ── */
.tabs {
  display:flex; gap:0; margin-bottom:18px;
  border-bottom:1px solid var(--border);
}
.tab-btn {
  padding:8px 18px; color:var(--dim); background:none; border:none;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  font-size:12px; letter-spacing:.8px; transition:.2s;
}
.tab-btn:hover { color:var(--text); }
.tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); }

/* ── MOVIE CARDS ── */
.cards-grid { display:grid; gap:14px; }
.cards-7 { grid-template-columns:repeat(7,1fr); }
.cards-6 { grid-template-columns:repeat(6,1fr); }
.cards-5 { grid-template-columns:repeat(5,1fr); }
.cards-4 { grid-template-columns:repeat(4,1fr); }
.cards-3 { grid-template-columns:repeat(3,1fr); }

.movie-card { cursor:pointer; position:relative; }
.mc-thumb {
  aspect-ratio:2/3; background:var(--card);
  border:1px solid var(--border); overflow:hidden; position:relative;
  transition:all .3s;
}
.movie-card:hover .mc-thumb {
  border-color:var(--primary);
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(0,0,0,.4),0 0 0 1px color-mix(in srgb,var(--primary) 30%,transparent);
}
.mc-img {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:38px;
  background:linear-gradient(135deg,var(--card),var(--card2));
  transition:.4s;
  overflow:hidden;
}
.mc-img img { width:100%; height:100%; object-fit:cover; display:block; transition:.4s; }
.movie-card:hover .mc-img img { transform:scale(1.05); }
.movie-card:hover .mc-img { transform:scale(1.05); }
.mc-badge {
  position:absolute; top:0; left:0;
  background:var(--accent); color:#fff;
  padding:2px 8px; font-size:9px; letter-spacing:1px; font-weight:700;
}
.mc-badge.vip {
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--primary) 50%,#000),var(--primary));
  color:var(--bg);
}
.mc-badge.new { background:var(--blue,#2980b9); }
.mc-quality {
  position:absolute; top:0; right:0;
  background:color-mix(in srgb,var(--primary) 90%,#000);
  color:var(--bg); padding:2px 6px; font-size:9px; font-weight:700;
}
.mc-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.88),transparent 55%);
  opacity:0; transition:.3s;
  display:flex; align-items:center; justify-content:center;
}
.movie-card:hover .mc-overlay { opacity:1; }
.mc-play {
  width:40px; height:40px; background:var(--primary); border:none;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--bg); font-size:14px;
}
.mc-play:hover { transform:scale(1.1); background:var(--primary2); }
.mc-info { padding:8px 0; }
.mc-name {
  font-size:12px; color:var(--text); margin-bottom:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:.3px;
}
.mc-sub { display:flex; justify-content:space-between; font-size:10px; color:var(--dim); }
.mc-score { color:var(--primary); font-family:var(--font-d); font-size:13px; font-weight:700; }

/* ── RANK LIST ── */
.rank-list { display:flex; flex-direction:column; gap:7px; }
.rank-item {
  display:flex; align-items:center; gap:10px; padding:9px;
  background:var(--card); border:1px solid var(--border);
  cursor:pointer; transition:.2s;
}
.rank-item:hover { border-color:color-mix(in srgb,var(--primary) 40%,transparent); background:var(--card2); }
.rank-n {
  font-family:var(--font-d); font-size:18px; font-weight:900;
  color:color-mix(in srgb,var(--primary) 20%,transparent);
  width:26px; text-align:center; flex-shrink:0;
}
.rank-item:nth-child(1) .rank-n { color:var(--primary); }
.rank-item:nth-child(2) .rank-n { color:#c0c0c0; }
.rank-item:nth-child(3) .rank-n { color:#cd7f32; }
.rank-thumb {
  width:38px; height:54px; background:var(--card2); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.rank-info { flex:1; min-width:0; }
.rank-name { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-meta { font-size:10px; color:var(--dim); margin-top:2px; }
.rank-score { font-family:var(--font-d); color:var(--primary); font-size:13px; font-weight:700; flex-shrink:0; }

/* ── FILTER BAR ── */
.filter-bar {
  background:var(--card); border:1px solid var(--border); margin-bottom:22px;
}
.filter-row {
  display:flex; align-items:stretch; border-bottom:1px solid var(--border); min-height:40px;
}
.filter-row:last-child { border-bottom:none; }
.filter-label {
  width:70px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--dim); letter-spacing:1px;
  background:color-mix(in srgb,var(--primary) 5%,transparent);
  border-right:1px solid var(--border);
}
.filter-options { display:flex; flex-wrap:wrap; align-items:center; padding:5px 8px; gap:3px; flex:1; }
.filter-btn {
  background:none; border:none; color:var(--dim); padding:4px 12px;
  font-size:11px; letter-spacing:.5px; border-radius:2px; transition:.2s;
}
.filter-btn:hover { color:var(--text); background:color-mix(in srgb,var(--primary) 8%,transparent); }
.filter-btn.active { color:var(--primary); background:color-mix(in srgb,var(--primary) 12%,transparent); }

/* ── PAGER ── */
.pager { display:flex; align-items:center; justify-content:center; gap:6px; padding:28px 0; }
.page-btn {
  min-width:34px; height:34px; background:var(--card); border:1px solid var(--border);
  color:var(--dim); font-size:12px; padding:0 8px; border-radius:var(--radius);
}
.page-btn:hover { border-color:var(--primary); color:var(--primary); }
.page-btn.active { background:var(--primary); border-color:var(--primary); color:var(--bg); font-weight:700; }
.page-btn.disabled { opacity:.3; cursor:not-allowed; }

/* ── SIDEBAR ── */
.sidebar { padding:24px 20px; border-left:1px solid var(--border); }
.side-section { margin-bottom:26px; }
.side-h {
  font-family:var(--font-d); font-size:16px; font-weight:700;
  color:var(--text); margin-bottom:12px; padding-bottom:8px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:8px;
}
.side-h em { color:var(--primary); font-style:normal; }

/* ── HEAT CHART ── */
.heat-chart { background:var(--card); border:1px solid var(--border); padding:12px; }
.heat-bar-wrap { display:flex; align-items:flex-end; gap:3px; height:56px; margin-bottom:6px; }
.heat-bar {
  flex:1; background:color-mix(in srgb,var(--primary) 25%,transparent);
  border-radius:2px 2px 0 0; transition:height .8s ease; cursor:pointer;
  height:var(--h,40%);
}
.heat-bar:hover, .heat-bar.today { background:var(--primary); }
.heat-dates { display:flex; justify-content:space-between; font-size:9px; color:var(--dim); }

/* ── HOT TAGS ── */
.hot-tags { display:flex; flex-wrap:wrap; gap:6px; }
.hot-tag {
  background:var(--card); border:1px solid var(--border); color:var(--dim);
  padding:3px 10px; font-size:10px; letter-spacing:.5px; transition:.2s;
}
.hot-tag:hover { border-color:var(--primary); color:var(--primary); }
.hot-tag.hot { border-color:color-mix(in srgb,var(--accent) 40%,transparent); color:var(--accent); }

/* ── DETAIL PAGE ── */
.detail-hero {
  background: linear-gradient(135deg,var(--card),var(--card2));
  padding:36px 40px; display:grid; grid-template-columns:200px 1fr;
  gap:32px; border-bottom:1px solid var(--border); position:relative; z-index:1;
}
.detail-poster {
  width:200px; aspect-ratio:2/3; background:var(--card2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:72px;
  flex-shrink:0; position:relative;
}
.poster-badge {
  position:absolute; top:0; right:0; background:var(--primary);
  color:var(--bg); padding:3px 8px; font-size:10px; font-weight:700;
}
.detail-title {
  font-family:var(--font-d); font-size:34px; font-weight:900;
  color:var(--text); margin-bottom:4px; line-height:1.1;
}
.detail-title-en { font-size:13px; color:var(--dim); margin-bottom:12px; letter-spacing:1px; }
.detail-badges { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.d-badge { padding:2px 10px; font-size:10px; letter-spacing:1px; border:1px solid; }
.d-badge.hot { background:color-mix(in srgb,var(--accent) 15%,transparent); border-color:color-mix(in srgb,var(--accent) 40%,transparent); color:var(--accent); }
.d-badge.update { background:color-mix(in srgb,#2980b9 15%,transparent); border-color:color-mix(in srgb,#2980b9 40%,transparent); color:#4ab5e8; }
.d-badge.vip { background:color-mix(in srgb,var(--primary) 15%,transparent); border-color:color-mix(in srgb,var(--primary) 40%,transparent); color:var(--primary); }
/* 评分块 */
.score-block {
  text-align:center; background:var(--card); border:1px solid var(--border);
  padding:16px 22px; min-width:110px; flex-shrink:0;
}
.score-num {
  font-family:var(--font-d); font-size:46px; font-weight:900;
  color:var(--primary); line-height:1;
}
.score-stars { color:var(--primary); font-size:13px; margin:4px 0; }
.score-count { font-size:10px; color:var(--dim); }
/* meta 表格 */
.meta-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:14px; }
.meta-item { background:color-mix(in srgb,var(--primary) 4%,transparent); border:1px solid var(--border); padding:7px 10px; }
.meta-label { font-size:9px; color:var(--dim); letter-spacing:1px; margin-bottom:2px; text-transform:uppercase; }
.meta-value { font-size:12px; color:var(--text); }
.meta-value a { color:var(--primary); }
.meta-value a:hover { text-decoration:underline; }
/* 简介 */
.detail-desc {
  font-size:13px; line-height:2; color:color-mix(in srgb,var(--text) 70%,transparent);
  margin-bottom:16px; font-weight:300;
}
/* 操作按钮 */
.detail-actions { display:flex; gap:8px; flex-wrap:wrap; }
.btn-play-main {
  display:flex; align-items:center; gap:8px;
  background:var(--primary); color:var(--bg); border:none;
  padding:11px 26px; font-size:13px; font-weight:700; letter-spacing:1px;
  border-radius:var(--radius);
}
.btn-play-main:hover { background:var(--primary2); transform:translateY(-1px); }
.btn-action {
  background:var(--card); border:1px solid var(--border); color:var(--dim);
  padding:10px 16px; font-size:11px; letter-spacing:.8px; border-radius:var(--radius);
}
.btn-action:hover { border-color:var(--primary); color:var(--primary); }
.btn-fav.active { color:var(--accent); border-color:var(--accent); }

/* ── CAST ── */
.cast-section { padding:20px 40px; border-bottom:1px solid var(--border); position:relative; z-index:1; }
.cast-section h3 {
  font-family:var(--font-d); font-size:16px; margin-bottom:14px;
  padding-bottom:8px; border-bottom:1px solid var(--border);
}
.cast-section h3 em { color:var(--primary); font-style:normal; }
.cast-scroll {
  display:flex; gap:14px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px;
}
.cast-scroll::-webkit-scrollbar { display:none; }
.cast-card { flex-shrink:0; width:76px; text-align:center; cursor:pointer; }
.cast-avatar {
  width:72px; height:72px; border-radius:50%; background:var(--card2);
  border:2px solid var(--border); display:flex; align-items:center;
  justify-content:center; font-size:26px; margin:0 auto 6px; transition:.2s;
}
.cast-card:hover .cast-avatar { border-color:var(--primary); }
.cast-name { font-size:11px; margin-bottom:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cast-role { font-size:9px; color:var(--dim); }

/* ── EPISODE LIST ── */
.ep-section { margin-bottom:28px; }
.ep-section h3 { font-family:var(--font-d); font-size:16px; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.ep-section h3 em { color:var(--primary); font-style:normal; }
.ep-tabs { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.ep-tab {
  background:var(--card); border:1px solid var(--border); color:var(--dim);
  padding:4px 14px; font-size:11px; transition:.2s; border-radius:2px;
}
.ep-tab:hover, .ep-tab.active { border-color:var(--primary); color:var(--primary); background:color-mix(in srgb,var(--primary) 8%,transparent); }
.ep-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:5px; }
.ep-btn {
  background:var(--card); border:1px solid var(--border); color:var(--dim);
  padding:7px 4px; font-size:11px; text-align:center; transition:.2s;
}
.ep-btn:hover { border-color:var(--primary); color:var(--primary); }
.ep-btn.current { background:var(--primary); border-color:var(--primary); color:var(--bg); font-weight:700; }
.ep-btn.vip-lock { color:color-mix(in srgb,var(--text) 30%,transparent); position:relative; }
.ep-btn.vip-lock::after { content:'V'; font-size:7px; color:var(--primary); display:block; }

/* ── NEWS ── */
.news-list { display:flex; flex-direction:column; gap:12px; margin-bottom:28px; }
.news-item {
  display:flex; gap:12px; padding:12px; background:var(--card);
  border:1px solid var(--border); cursor:pointer; transition:.2s;
}
.news-item:hover { border-color:color-mix(in srgb,var(--primary) 35%,transparent); background:var(--card2); }
.news-thumb {
  width:96px; height:62px; flex-shrink:0; background:var(--card2);
  display:flex; align-items:center; justify-content:center; font-size:22px;
}
.news-body { flex:1; min-width:0; }
.news-title {
  font-size:13px; line-height:1.5; margin-bottom:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.news-meta { display:flex; gap:10px; font-size:10px; color:var(--dim); }
.news-source { color:var(--primary); }

/* ── COMMENTS ── */
.comment-section { margin-bottom:28px; }
.comment-section h3 {
  font-family:var(--font-d); font-size:16px; margin-bottom:16px;
  padding-bottom:8px; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:baseline;
}
.comment-section h3 em { color:var(--primary); font-style:normal; }
.comment-count { font-size:11px; color:var(--dim); font-weight:300; }
/* 评分分布 */
.score-dist {
  background:var(--card); border:1px solid var(--border);
  padding:18px; margin-bottom:18px;
  display:grid; grid-template-columns:100px 1fr; gap:18px; align-items:center;
}
.sd-big { font-family:var(--font-d); font-size:52px; font-weight:900; color:var(--primary); line-height:1; text-align:center; }
.sd-stars { color:var(--primary); font-size:14px; text-align:center; margin:4px 0; }
.sd-total { font-size:10px; color:var(--dim); text-align:center; }
.sd-bars { display:flex; flex-direction:column; gap:5px; }
.sd-row { display:flex; align-items:center; gap:7px; font-size:11px; }
.sd-label { color:var(--dim); width:22px; text-align:right; flex-shrink:0; }
.sd-track { flex:1; background:color-mix(in srgb,var(--primary) 10%,transparent); height:5px; border-radius:3px; overflow:hidden; }
.sd-fill { height:100%; background:var(--primary); border-radius:3px; }
.sd-pct { color:var(--dim); width:30px; text-align:right; flex-shrink:0; }
/* 写评论 */
.comment-input { margin-bottom:18px; }
.comment-input textarea {
  width:100%; background:var(--card); border:1px solid var(--border);
  color:var(--text); padding:12px; font-size:12px; resize:vertical; min-height:80px;
  outline:none; transition:.2s;
}
.comment-input textarea:focus { border-color:var(--primary); }
.comment-input textarea::placeholder { color:var(--dim); }
.comment-input-footer { display:flex; justify-content:space-between; align-items:center; margin-top:7px; }
/* 星级 */
.star-rating-input { display:flex; gap:4px; cursor:pointer; }
.star-item {
  font-size:20px; color:var(--dim); transition:.2s; user-select:none;
}
.star-item.hover, .star-item.selected { color:var(--primary); }
.btn-submit {
  background:var(--primary); color:var(--bg); border:none;
  padding:7px 20px; font-size:12px; font-weight:700; letter-spacing:1px;
  border-radius:var(--radius);
}
.btn-submit:hover { background:var(--primary2); }
/* 评论列表 */
.comment-list { display:flex; flex-direction:column; gap:14px; }
.comment-item {
  padding:14px; background:var(--card); border:1px solid var(--border);
}
.ci-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
}
.ci-user { display:flex; align-items:center; gap:8px; }
.ci-avatar {
  width:30px; height:30px; border-radius:50%; background:var(--card2);
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.ci-name { font-size:12px; font-weight:600; }
.ci-stars { color:var(--primary); font-size:10px; margin-left:5px; }
.ci-time { font-size:10px; color:var(--dim); }
.ci-content { font-size:12px; line-height:1.8; color:color-mix(in srgb,var(--text) 75%,transparent); margin-bottom:8px; }
.ci-footer { display:flex; gap:14px; font-size:10px; color:var(--dim); }
.ci-action { cursor:pointer; transition:.2s; display:flex; align-items:center; gap:3px; }
.ci-action:hover { color:var(--primary); }
.btn-load-more {
  display:block; width:100%; background:none; border:1px solid var(--border);
  color:var(--dim); padding:10px; font-size:12px; letter-spacing:1px;
  margin-top:14px; transition:.2s;
}
.btn-load-more:hover { border-color:var(--primary); color:var(--primary); }

/* ── RELATED LIST (sidebar) ── */
.related-list { display:flex; flex-direction:column; gap:9px; }
.rel-item { display:flex; gap:9px; cursor:pointer; transition:.2s; }
.rel-thumb {
  width:52px; height:74px; background:var(--card2); border:1px solid var(--border);
  flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px;
  transition:.2s;
}
.rel-item:hover .rel-thumb { border-color:var(--primary); }
.rel-info { flex:1; min-width:0; }
.rel-name { font-size:12px; margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rel-meta { font-size:10px; color:var(--dim); margin-bottom:2px; }
.rel-score { font-family:var(--font-d); color:var(--primary); font-size:12px; font-weight:700; }

/* ── SCORE RANK (sidebar) ── */
.score-rank { display:flex; flex-direction:column; gap:7px; }
.sr-item {
  display:flex; align-items:center; gap:8px;
  cursor:pointer; padding:5px; transition:.2s; border-radius:2px;
}
.sr-item:hover { background:var(--card); }
.sr-n { font-family:var(--font-d); font-size:16px; font-weight:700; color:color-mix(in srgb,var(--primary) 20%,transparent); width:20px; text-align:center; flex-shrink:0; }
.sr-item:nth-child(1) .sr-n { color:var(--primary); }
.sr-item:nth-child(2) .sr-n { color:#c0c0c0; }
.sr-item:nth-child(3) .sr-n { color:#cd7f32; }
.sr-thumb { width:34px; height:48px; background:var(--card); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; }
.sr-info { flex:1; min-width:0; }
.sr-name { font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sr-sub { font-size:10px; color:var(--dim); }
.sr-score { font-family:var(--font-d); color:var(--primary); font-size:13px; font-weight:700; flex-shrink:0; }

/* ── CATEGORY BANNER ── */
.cat-banner {
  height:120px; background:var(--card2); padding:0 40px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border); position:relative; overflow:hidden; z-index:1;
}
.cat-banner::after {
  content:attr(data-deco); position:absolute; right:60px; font-size:96px;
  opacity:.05; pointer-events:none;
}
.cat-banner-left h1 {
  font-family:var(--font-d); font-size:30px; font-weight:900;
  margin-bottom:5px; display:flex; align-items:center; gap:10px;
}
.cat-banner-left h1 em { color:var(--primary); font-style:normal; }
.cat-banner-left p { font-size:12px; color:var(--dim); display:flex; gap:20px; }
.cat-sort { display:flex; align-items:center; gap:8px; }
.sort-label { font-size:11px; color:var(--dim); }
.sort-btn {
  background:none; border:1px solid var(--border); color:var(--dim);
  padding:5px 12px; font-size:11px; transition:.2s;
}
.sort-btn.active, .sort-btn:hover { border-color:var(--primary); color:var(--primary); }

/* ── FOOTER ── */
footer {
  background:color-mix(in srgb,var(--bg) 80%,#000);
  border-top:1px solid var(--border); padding:36px 40px 20px;
  position:relative; z-index:1;
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:28px; margin-bottom:24px; }
.footer-logo {
  font-family:var(--font-d); font-size:18px; font-weight:900;
  color:var(--primary); display:block; margin-bottom:10px; letter-spacing:3px;
}
.footer-logo span, .footer-logo em { color:var(--text); font-weight:400; font-style:normal; }
.footer-desc { font-size:11px; color:var(--dim); line-height:2; margin-bottom:12px; }
.footer-cat-list { display:flex; flex-wrap:wrap; gap:5px; }
.footer-cat {
  font-size:10px; color:var(--dim); border:1px solid var(--border);
  padding:2px 8px; transition:.2s;
}
.footer-cat:hover { color:var(--primary); border-color:var(--primary); }
.footer-col h4 { font-size:11px; letter-spacing:2px; color:var(--primary); margin-bottom:12px; font-weight:700; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:8px; }
.footer-links a { font-size:11px; color:var(--dim); transition:.2s; }
.footer-links a:hover { color:var(--primary); }
.footer-bottom {
  border-top:1px solid var(--border); padding-top:14px;
  display:flex; justify-content:space-between; font-size:10px; color:var(--dim);
}
.footer-bottom-links { display:flex; gap:14px; }
.footer-bottom-links a { color:var(--dim); font-size:10px; transition:.2s; }
.footer-bottom-links a:hover { color:var(--primary); }

/* ── BACK TO TOP ── */
.back-top {
  position:fixed; bottom:28px; right:28px; width:40px; height:40px;
  background:var(--primary); color:var(--bg); border:none; font-size:16px;
  border-radius:50%; opacity:0; transform:translateY(20px); pointer-events:none;
  transition:all .3s; z-index:900; font-weight:700;
}
.back-top.show { opacity:1; transform:translateY(0); pointer-events:auto; }
.back-top:hover { background:var(--primary2); transform:scale(1.1); }

/* ── HERO (index) ── */
.hero-slider { position:relative; height:500px; overflow:hidden; }
.hero-slide {
  position:absolute; inset:0;
  background:var(--card2);
  display:flex; align-items:flex-end; padding:0 60px 50px;
  opacity:0; transition:opacity .6s; pointer-events:none;
}
.hero-slide.active { opacity:1; pointer-events:auto; }
.hero-bg-deco {
  position:absolute; inset:0; display:flex; align-items:center;
  justify-content:flex-end; padding-right:80px; font-size:180px;
  opacity:.08; pointer-events:none;
}
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to right,rgba(0,0,0,.9) 40%,rgba(0,0,0,.1));
}
.hero-content { position:relative; z-index:2; max-width:580px; }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:6px;
  background:color-mix(in srgb,var(--accent) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  color:var(--accent); padding:3px 12px; font-size:10px; letter-spacing:3px;
  margin-bottom:12px;
}
.hero-eyebrow::before { content:'●'; font-size:7px; animation:blink 1.5s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.hero-title {
  font-family:var(--font-d); font-size:52px; font-weight:900; line-height:1.05;
  color:#fff; margin-bottom:10px;
}
.hero-meta { display:flex; gap:14px; align-items:center; font-size:12px; color:rgba(255,255,255,.55); margin-bottom:12px; }
.hero-rating { font-family:var(--font-d); font-size:24px; font-weight:700; color:var(--primary); }
.hero-tags { display:flex; gap:6px; margin-bottom:12px; }
.hero-tag { background:color-mix(in srgb,var(--primary) 12%,transparent); border:1px solid color-mix(in srgb,var(--primary) 30%,transparent); color:var(--primary); padding:2px 10px; font-size:10px; }
.hero-desc { font-size:13px; line-height:1.9; color:rgba(255,255,255,.6); margin-bottom:22px; }
.hero-btns { display:flex; gap:10px; }
.hero-dots {
  position:absolute; bottom:18px; right:40px; display:flex; gap:6px; z-index:2;
}
.hero-dot { width:22px; height:3px; background:rgba(255,255,255,.25); cursor:pointer; transition:.2s; }
.hero-dot.active { background:var(--primary); width:36px; }

/* ── RESPONSIVE ── */
@media (max-width:1200px) {
  .cards-7 { grid-template-columns:repeat(5,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width:900px) {
  .page-wrap { grid-template-columns:1fr; }
  .sidebar { border-left:none; border-top:1px solid var(--border); }
  .detail-hero { grid-template-columns:140px 1fr; gap:20px; }
  .cards-6, .cards-7 { grid-template-columns:repeat(4,1fr); }
  .ep-grid { grid-template-columns:repeat(6,1fr); }
}