:root {{
  --bg: #07111f;
  --panel: rgba(15, 23, 42, 0.82);
  --panel2: rgba(8, 15, 31, 0.72);
  --line: rgba(255,255,255,0.10);
  --text: #e5eefb;
  --muted: #9fb1c6;
  --blue: #4f46e5;
  --cyan: #06b6d4;
  --gold: #d97706;
  --shadow: 0 24px 80px rgba(0,0,0,.35);
  --radius: 24px;
}
* {{ box-sizing: border-box; }}
html {{ scroll-behavior: smooth; }}
body {{ margin: 0; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Noto Sans CJK SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; background:
  radial-gradient(circle at top left, rgba(79,70,229,.18), transparent 32%),
  radial-gradient(circle at 80% 20%, rgba(6,182,212,.12), transparent 30%),
  linear-gradient(180deg, #050b15 0%, #09111f 30%, #060b14 100%);
  color: var(--text); min-height: 100vh; overflow-x: hidden; }}
a {{ color: inherit; text-decoration: none; }}
img {{ max-width: 100%; display: block; }}
.container {{ width: min(1240px, calc(100% - 32px)); margin: 0 auto; }}
.site-header {{ position: sticky; top: 0; z-index: 40; backdrop-filter: blur(18px); background: rgba(5,10,20,.72); border-bottom: 1px solid rgba(255,255,255,.07); }}
.header-inner {{ display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 72px; }}
.brand {{ display:flex; align-items:center; gap: 12px; font-weight: 800; letter-spacing:.5px; }}
.brand-mark {{ width: 44px; height: 44px; border-radius: 16px; background: linear-gradient(135deg, rgba(79,70,229,.95), rgba(6,182,212,.95)); display:grid; place-items:center; box-shadow: 0 10px 30px rgba(79,70,229,.35); }}
.brand-mark span {{ font-size: 20px; }}
.brand-text {{ display:flex; flex-direction:column; line-height:1.1; }}
.brand-text strong {{ font-size: 16px; }}
.brand-text small {{ color: var(--muted); font-size: 12px; }}
.nav {{ display:flex; flex-wrap: wrap; gap: 10px; align-items:center; }}
.nav a {{ padding: 10px 14px; border-radius: 999px; color: #dce8ff; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); transition: .2s; }}
.nav a:hover, .nav a.active {{ transform: translateY(-1px); background: rgba(79,70,229,.18); border-color: rgba(79,70,229,.45); }}
.menu-btn {{ display:none; border:0; background: rgba(255,255,255,.06); color: var(--text); border-radius: 14px; width: 42px; height: 42px; }}
.hero {{ position: relative; padding: 28px 0 8px; }}
.hero-shell {{ position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background:
  linear-gradient(135deg, rgba(79,70,229,.16), rgba(6,182,212,.12) 44%, rgba(8,15,31,.92) 100%);
  box-shadow: var(--shadow); border-radius: 34px; }}
.hero-shell::before {{ content:''; position:absolute; inset:0; background: radial-gradient(circle at 16% 16%, rgba(255,255,255,.18), transparent 24%), radial-gradient(circle at 86% 14%, rgba(255,255,255,.12), transparent 18%); pointer-events:none; }}
.hero-grid {{ display:grid; grid-template-columns: 1.25fr .95fr; gap: 24px; padding: 30px; position:relative; }}
.hero-title {{ margin: 0; font-size: clamp(32px, 5vw, 60px); line-height: 1.02; }}
.hero-title .accent {{ background: linear-gradient(90deg, #fff, #9fe8ff 35%, #8d7bff 70%, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }}
.hero-sub {{ color: #d9e5f7; max-width: 60ch; line-height: 1.8; font-size: 15px; margin: 16px 0 0; }}
.hero-kpi {{ display:flex; gap: 16px; flex-wrap: wrap; margin-top: 18px; }}
.kpi {{ padding: 12px 16px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }}
.kpi b {{ display:block; font-size: 20px; }}
.kpi span {{ color: var(--muted); font-size: 12px; }}
.searchbar {{ margin-top: 20px; display:flex; gap: 10px; flex-wrap: wrap; }}
.searchbar input {{ flex: 1 1 260px; min-height: 56px; border: 1px solid rgba(255,255,255,.12); background: rgba(5,10,20,.52); color: var(--text); border-radius: 18px; padding: 0 18px; outline: none; }}
.searchbar input::placeholder {{ color: #8ea4c6; }}
.btn {{ min-height: 56px; padding: 0 18px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); color: var(--text); display:inline-flex; align-items:center; justify-content:center; gap: 10px; cursor:pointer; transition: .22s; }}
.btn.primary {{ background: linear-gradient(135deg, rgba(79,70,229,.96), rgba(6,182,212,.92)); border: 0; box-shadow: 0 16px 32px rgba(79,70,229,.28); }}
.btn:hover {{ transform: translateY(-2px); }}
.hero-meta {{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }}
.pill {{ padding: 8px 12px; border-radius: 999px; font-size: 13px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: #d9e5f7; }}
.hero-cards {{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content:start; }}
.feature-card {{ position: relative; overflow: hidden; border-radius: 26px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.06); box-shadow: 0 14px 40px rgba(0,0,0,.24); min-height: 240px; }}
.feature-card.big {{ grid-column: 1 / -1; min-height: 364px; }}
.feature-card img {{ width:100%; height:100%; object-fit: cover; }}
.feature-card .overlay {{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.68)); }}
.feature-card .content {{ position:absolute; inset: auto 0 0 0; padding: 16px; }}
.feature-card h3 {{ margin: 0 0 6px; font-size: 18px; line-height: 1.2; }}
.feature-card p {{ margin: 0; color: rgba(255,255,255,.82); font-size: 13px; line-height: 1.5; }}
.feature-strip {{ display:flex; gap: 12px; overflow-x:auto; padding: 18px 2px 0; scroll-snap-type: x proximity; }}
.feature-strip .mini {{ flex: 0 0 168px; scroll-snap-align: start; }}
.section {{ padding: 20px 0 8px; }}
.section-head {{ display:flex; align-items:end; justify-content: space-between; gap: 14px; margin-bottom: 14px; }}
.section-head h2 {{ margin: 0; font-size: 24px; }}
.section-head p {{ margin: 0; color: var(--muted); font-size: 13px; }}
.grid {{ display:grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }}
.card {{ position: relative; background: var(--panel); border: 1px solid rgba(255,255,255,.07); border-radius: 22px; overflow:hidden; box-shadow: 0 14px 30px rgba(0,0,0,.22); transition: .22s; }}
.card:hover {{ transform: translateY(-4px); border-color: rgba(79,70,229,.45); }}
.poster {{ position: relative; aspect-ratio: 2/3; overflow: hidden; }}
.poster img {{ width:100%; height:100%; object-fit: cover; transition:.35s; }}
.card:hover .poster img {{ transform: scale(1.05); }}
.badge {{ position:absolute; left: 12px; top: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(8,15,31,.72); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); font-size: 12px; }}
.card-body {{ padding: 14px; }}
.card-title {{ margin: 0; font-size: 15px; line-height: 1.35; min-height: 2.7em; }}
.card-meta {{ display:flex; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 12px; margin-top: 8px; }}
.card-desc {{ color: #c7d4e8; font-size: 12px; line-height: 1.6; margin-top: 10px; min-height: 3.2em; }}
.section-box {{ padding: 22px; background: rgba(8,15,31,.68); border: 1px solid rgba(255,255,255,.08); border-radius: 28px; box-shadow: var(--shadow); }}
.tag-row {{ display:flex; gap: 10px; flex-wrap: wrap; }}
.tag-row a, .tag-row span {{ display:inline-flex; align-items:center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: #dbe7fa; }}
.rank-list {{ display:grid; gap: 12px; }}
.rank-item {{ display:grid; grid-template-columns: 68px 1fr auto; gap: 14px; align-items:center; padding: 12px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }}
.rank-num {{ width: 52px; height: 52px; border-radius: 16px; display:grid; place-items:center; background: linear-gradient(135deg, rgba(79,70,229,.95), rgba(6,182,212,.9)); font-weight: 800; }}
.rank-main b {{ display:block; margin-bottom: 4px; }}
.rank-main small {{ color: var(--muted); }}
.footer {{ margin-top: 36px; padding: 28px 0 40px; color: var(--muted); }}
.footer-inner {{ padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); display:flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }}
.detail {{ padding: 30px 0 10px; }}
.detail-shell {{ display:grid; grid-template-columns: 330px 1fr; gap: 24px; align-items:start; }}
.detail-poster {{ position: sticky; top: 92px; }}
.detail-poster .card {{ border-radius: 28px; }}
.detail-main {{ display:grid; gap: 18px; }}
.detail-header {{ padding: 24px; background: rgba(8,15,31,.68); border: 1px solid rgba(255,255,255,.08); border-radius: 28px; box-shadow: var(--shadow); }}
.detail-header h1 {{ margin: 0 0 10px; font-size: clamp(28px, 4vw, 44px); line-height:1.1; }}
.detail-kv {{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }}
.detail-kv span {{ padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); color:#dce8f8; }}
.player {{ overflow:hidden; border-radius: 26px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow); }}
.player video {{ width:100%; display:block; background:#000; aspect-ratio: 16/9; }}
.player-bar {{ display:flex; justify-content:space-between; gap: 14px; padding: 14px 18px; color: var(--muted); font-size: 13px; flex-wrap: wrap; }}
.copy-block {{ display:grid; gap: 12px; padding: 22px; background: rgba(8,15,31,.68); border: 1px solid rgba(255,255,255,.08); border-radius: 28px; box-shadow: var(--shadow); }}
.copy-block h3 {{ margin: 0; font-size: 20px; }}
.copy-block p {{ margin: 0; color: #d8e5f7; line-height:1.9; }}
.related-grid {{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }}
.search-wrap {{ padding: 30px 0 18px; }}
.search-panel {{ padding: 22px; border-radius: 28px; background: rgba(8,15,31,.68); border: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow); }}
.search-panel .controls {{ display:flex; gap: 12px; flex-wrap: wrap; }}
.search-panel input {{ flex: 1 1 300px; min-height: 56px; border-radius: 18px; border: 1px solid rgba(255,255,255,.12); background: rgba(5,10,20,.5); color: var(--text); padding: 0 16px; outline:none; }}
.muted {{ color: var(--muted); }}
.backtop {{ position: fixed; right: 18px; bottom: 18px; width: 48px; height: 48px; border: 0; border-radius: 16px; background: linear-gradient(135deg, rgba(79,70,229,.94), rgba(6,182,212,.92)); color:#fff; box-shadow: var(--shadow); display:grid; place-items:center; opacity:0; transform: translateY(8px); pointer-events:none; transition:.2s; z-index: 50; }}
.backtop.show {{ opacity:1; transform:none; pointer-events:auto; }}
.page-tools {{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }}
.page-note {{ font-size: 13px; color: var(--muted); line-height: 1.8; }}
.list-page {{ display:grid; gap: 14px; }}
.list-row {{ display:grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items:center; padding: 14px 16px; border-radius: 20px; border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); }}
.list-rank {{ font-size: 24px; font-weight:800; color: #9fdcff; }}
.small-grid {{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }}
.hero-slider {{ display:flex; gap: 14px; overflow:auto; scrollbar-width: none; }}
.hero-slider::-webkit-scrollbar {{ display:none; }}
.hero-slide {{ min-width: 210px; }}
@media (max-width: 1100px) {{
  .hero-grid {{ grid-template-columns: 1fr; }}
  .grid {{ grid-template-columns: repeat(4, 1fr); }}
  .related-grid {{ grid-template-columns: repeat(3, 1fr); }}
  .small-grid {{ grid-template-columns: repeat(3, 1fr); }}
  .detail-shell {{ grid-template-columns: 1fr; }}
  .detail-poster {{ position: static; }}
}}
@media (max-width: 760px) {{
  .header-inner {{ min-height: 66px; }}
  .menu-btn {{ display:inline-grid; place-items:center; }}
  .nav {{ display:none; width:100%; padding-bottom: 14px; }}
  .nav.open {{ display:flex; }}
  .hero {{ padding-top: 16px; }}
  .hero-shell {{ border-radius: 28px; }}
  .hero-grid {{ padding: 20px; gap: 18px; }}
  .hero-cards {{ grid-template-columns: 1fr; }}
  .grid {{ grid-template-columns: repeat(2, 1fr); gap: 12px; }}
  .related-grid {{ grid-template-columns: repeat(2, 1fr); }}
  .small-grid {{ grid-template-columns: repeat(2, 1fr); }}
  .rank-item, .list-row {{ grid-template-columns: 56px 1fr; }}
  .rank-item .rank-end, .list-row .rank-end {{ grid-column: 1 / -1; }}
}}