:root { color-scheme: dark; }
body { min-height: 100vh; background: radial-gradient(circle at 20% 0%, rgba(74,144,164,.18), transparent 32rem), var(--color-bg-primary); }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(10,25,41,.78); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,.08); }
.header-inner { height: 72px; display:flex; align-items:center; justify-content:space-between; gap: 24px; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--color-text-primary); font-weight:800; letter-spacing:.02em; }
.brand:hover { color: var(--color-secondary-light); }
.brand-mark { width:34px; height:34px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--color-secondary),var(--color-accent)); color:#06111d; box-shadow:0 8px 24px rgba(212,165,116,.28); }
.desktop-nav { display:flex; align-items:center; gap: 20px; flex: 1; justify-content:center; }
.nav-link, .search-open, .mobile-toggle { color: var(--color-text-secondary); border:0; background: transparent; font-weight:600; transition:.25s ease; }
.nav-link:hover, .nav-link.active, .search-open:hover, .mobile-toggle:hover { color:var(--color-accent-light); }
.nav-dropdown { position:relative; }
.nav-dropdown-menu { position:absolute; left:0; top:calc(100% + 12px); min-width:170px; padding:10px; border:1px solid var(--color-border); border-radius:14px; background:rgba(19,47,76,.98); box-shadow:var(--shadow-xl); opacity:0; visibility:hidden; transform:translateY(8px); transition:.24s ease; }
.nav-dropdown:hover .nav-dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); }
.nav-dropdown-menu a { display:block; padding:10px 12px; border-radius:10px; color:var(--color-text-secondary); }
.nav-dropdown-menu a:hover { background:var(--color-bg-tertiary); color:var(--color-accent-light); }
.header-actions { display:flex; align-items:center; gap:16px; }
.search-open { background:rgba(74,144,164,.14); border:1px solid rgba(109,179,199,.24); padding:10px 15px; border-radius:999px; }
.mobile-toggle { display:none; font-size:24px; }
.mobile-menu { display:none; padding: 10px 20px 20px; border-top:1px solid rgba(255,255,255,.08); background:rgba(10,25,41,.96); }
.mobile-menu .nav-link, .mobile-cat-links a { display:block; padding:12px 0; color:var(--color-text-secondary); }
.mobile-cat-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
.search-modal { position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.78); display:flex; justify-content:center; align-items:flex-start; padding:96px 16px 24px; }
.search-panel { width:min(760px,100%); background:linear-gradient(180deg,var(--color-bg-secondary),var(--color-bg-primary)); border:1px solid var(--color-border); border-radius:20px; box-shadow:var(--shadow-xl); padding:18px; }
.search-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; color:var(--color-text-primary); font-size:18px; font-weight:700; }
.search-top button { width:36px; height:36px; border-radius:50%; color:var(--color-text-secondary); background:var(--color-bg-tertiary); border:1px solid var(--color-border); font-size:24px; }
#globalSearchInput { width:100%; padding:16px 18px; border-radius:14px; border:1px solid var(--color-border); background:var(--color-bg-tertiary); color:var(--color-text-primary); outline:none; }
.search-results { max-height: 54vh; overflow:auto; margin-top:14px; display:grid; gap:10px; }
.search-result-item { display:grid; grid-template-columns:62px 1fr; gap:12px; padding:10px; border-radius:14px; color:var(--color-text-secondary); background:rgba(30,58,82,.72); border:1px solid rgba(255,255,255,.06); }
.search-result-item:hover { border-color:rgba(109,179,199,.5); transform:translateY(-1px); }
.search-result-item img { width:62px; height:82px; object-fit:cover; border-radius:10px; background:linear-gradient(135deg,var(--color-bg-tertiary),var(--color-primary-dark)); }
.search-result-item strong { display:block; color:var(--color-text-primary); margin-bottom:4px; }
.search-result-item span { display:block; color:var(--color-text-muted); font-size:13px; }
.home-hero { position:relative; height:78vh; min-height:620px; overflow:hidden; background:var(--color-bg-primary); }
.hero-slide { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .7s ease, visibility .7s ease; }
.hero-slide.active { opacity:1; visibility:visible; }
.hero-bg { position:absolute; inset:0; }
.hero-bg img { transform:scale(1.02); filter:saturate(1.04); }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,25,41,.98) 0%, rgba(10,25,41,.74) 42%, rgba(10,25,41,.25) 72%, rgba(10,25,41,.95) 100%), linear-gradient(0deg,var(--color-bg-primary) 0%, transparent 34%); }
.hero-content { position:relative; z-index:2; height:100%; display:flex; align-items:flex-end; padding-bottom:120px; }
.hero-copy { max-width:780px; }
.hero-kicker { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.hero-kicker span, .tag-chip { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:7px 11px; color:var(--color-secondary-light); background:rgba(212,165,116,.14); border:1px solid rgba(212,165,116,.25); font-size:13px; font-weight:700; }
.hero-copy h1 { font-size:clamp(38px,6vw,74px); line-height:1.02; max-width:880px; text-shadow:0 20px 60px rgba(0,0,0,.55); }
.hero-copy p { max-width:720px; margin:20px 0 18px; color:var(--color-text-secondary); font-size:clamp(16px,2vw,21px); }
.hero-tags, .tag-row { display:flex; flex-wrap:wrap; gap:8px; }
.hero-actions, .detail-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.btn-primary, .btn-ghost { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 22px; border-radius:999px; font-weight:800; transition:.25s ease; }
.btn-primary { background:linear-gradient(135deg,var(--color-secondary),var(--color-accent)); color:#06111d; box-shadow:0 16px 36px rgba(74,144,164,.25); }
.btn-primary:hover { color:#06111d; transform:translateY(-2px); box-shadow:0 20px 42px rgba(212,165,116,.28); }
.btn-ghost { color:var(--color-text-primary); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); }
.btn-ghost:hover { color:var(--color-accent-light); background:rgba(255,255,255,.12); }
.hero-dots-wrap { position:absolute; z-index:3; left:0; right:0; bottom:28px; }
.hero-dots { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.hero-dot { min-width:0; display:flex; align-items:center; gap:10px; padding:9px; border-radius:15px; color:var(--color-text-secondary); background:rgba(19,47,76,.68); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(10px); transition:.25s ease; }
.hero-dot.active, .hero-dot:hover { color:var(--color-text-primary); border-color:rgba(212,165,116,.58); background:rgba(30,58,82,.92); }
.hero-dot img { width:42px; height:58px; object-fit:cover; border-radius:10px; background:var(--color-bg-tertiary); }
.hero-dot span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.content-section { padding:56px 0; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:26px; }
.section-head h2 { font-size:clamp(26px,3.2vw,40px); }
.section-head p { color:var(--color-text-secondary); margin-top:8px; max-width:760px; }
.section-action, .side-more { color:var(--color-accent-light); font-weight:800; }
.movie-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.compact-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.movie-row { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(190px,1fr); gap:18px; overflow-x:auto; padding:4px 0 18px; scroll-snap-type:x proximity; }
.movie-card { overflow:hidden; border-radius:18px; background:linear-gradient(180deg,rgba(30,58,82,.84),rgba(19,47,76,.88)); border:1px solid rgba(255,255,255,.07); box-shadow:var(--shadow-md); }
.movie-card-link { display:block; color:inherit; height:100%; }
.poster-frame { position:relative; overflow:hidden; aspect-ratio:2/3; background:linear-gradient(135deg,var(--color-bg-tertiary),var(--color-primary-dark)); }
.poster-frame.poster-missing:before { content:'必看国产剧'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(231,237,243,.28); font-weight:800; letter-spacing:.08em; background:radial-gradient(circle at 30% 20%, rgba(109,179,199,.35), transparent 40%), linear-gradient(135deg,var(--color-bg-tertiary),var(--color-primary-dark)); }
.poster-image { transition:transform .45s ease, opacity .25s ease; }
.movie-card:hover .poster-image { transform:scale(1.08); }
.poster-badges { position:absolute; z-index:2; left:10px; top:10px; right:10px; display:flex; justify-content:space-between; gap:8px; }
.poster-badges span { border-radius:999px; padding:5px 8px; background:rgba(0,0,0,.58); color:#fff; font-size:12px; font-weight:800; backdrop-filter:blur(8px); }
.poster-play { position:absolute; z-index:3; inset:auto 12px 12px auto; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(212,165,116,.92); color:#06111d; opacity:0; transform:scale(.82); transition:.25s ease; }
.movie-card:hover .poster-play { opacity:1; transform:scale(1); }
.movie-card-body { padding:16px; }
.movie-card-meta { display:flex; gap:8px; align-items:center; color:var(--color-text-muted); font-size:12px; margin-bottom:8px; }
.movie-card-title { font-size:18px; line-height:1.25; margin-bottom:8px; }
.movie-card-desc { color:var(--color-text-secondary); font-size:14px; min-height:42px; }
.tag-row { margin-top:13px; }
.tag-row .tag-chip { color:var(--color-text-muted); background:rgba(10,25,41,.36); border-color:rgba(255,255,255,.08); font-size:12px; padding:5px 8px; }
.movie-card-compact .movie-card-body { padding:12px; }
.movie-card-compact .movie-card-title { font-size:15px; }
.movie-card-compact .movie-card-desc { display:none; }
.split-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:28px; align-items:start; }
.side-card, .prose-card, .meta-card, .filter-panel { border:1px solid rgba(255,255,255,.08); border-radius:22px; background:linear-gradient(180deg,rgba(19,47,76,.92),rgba(10,25,41,.86)); box-shadow:var(--shadow-md); }
.side-card { padding:20px; position:sticky; top:96px; }
.side-card h2 { margin-bottom:14px; }
.side-ranking-list, .ranking-page-list { display:grid; gap:10px; }
.ranking-item { display:grid; grid-template-columns:42px 50px 1fr auto; align-items:center; gap:12px; padding:10px; border-radius:14px; background:rgba(30,58,82,.62); border:1px solid rgba(255,255,255,.06); color:var(--color-text-secondary); }
.ranking-item:hover { background:rgba(30,58,82,.95); color:var(--color-text-primary); }
.ranking-num { color:var(--color-secondary); font-size:20px; font-weight:900; }
.ranking-poster img { width:50px; height:66px; object-fit:cover; border-radius:10px; background:var(--color-bg-tertiary); }
.ranking-main strong { display:block; color:var(--color-text-primary); font-size:15px; }
.ranking-main em { display:block; color:var(--color-text-muted); font-size:12px; font-style:normal; margin-top:4px; }
.ranking-score { color:var(--color-secondary-light); font-weight:900; }
.side-more { display:inline-flex; margin-top:16px; }
.category-grid, .category-overview-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; }
.category-card { min-height:170px; padding:20px; border-radius:20px; background:linear-gradient(135deg,rgba(26,77,109,.92),rgba(19,47,76,.9)); border:1px solid rgba(255,255,255,.08); color:var(--color-text-primary); }
.category-card strong { display:block; font-size:22px; margin-bottom:8px; }
.category-card span { color:var(--color-secondary-light); font-weight:800; }
.category-card p { margin-top:16px; color:var(--color-text-secondary); font-size:14px; }
.page-hero { position:relative; padding:96px 0 44px; background:radial-gradient(circle at 20% 0%, rgba(109,179,199,.25), transparent 26rem), linear-gradient(180deg,var(--color-bg-secondary),var(--color-bg-primary)); border-bottom:1px solid rgba(255,255,255,.08); }
.small-hero h1 { font-size:clamp(36px,5vw,64px); margin:10px 0; }
.small-hero p { color:var(--color-text-secondary); max-width:760px; font-size:18px; }
.page-kicker { display:inline-flex; color:var(--color-secondary-light); background:rgba(212,165,116,.12); border:1px solid rgba(212,165,116,.24); border-radius:999px; padding:7px 12px; font-weight:800; }
.filter-panel { padding:18px; margin-bottom:24px; }
.filter-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.filter-title-row { justify-content:space-between; margin-bottom:14px; }
.filter-title-row h2 { font-size:22px; }
.filter-title-row span { color:var(--color-text-muted); }
.filter-row input, .filter-row select { flex:1 1 210px; min-height:44px; border-radius:12px; border:1px solid var(--color-border); background:var(--color-bg-tertiary); color:var(--color-text-primary); padding:0 14px; outline:none; }
.filter-row button { min-height:44px; border-radius:12px; border:1px solid rgba(109,179,199,.36); background:rgba(74,144,164,.16); color:var(--color-accent-light); padding:0 16px; font-weight:800; }
.empty-state { text-align:center; padding:38px; color:var(--color-text-secondary); border:1px dashed var(--color-border); border-radius:18px; }
.category-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.category-overview-card { overflow:hidden; border-radius:24px; background:linear-gradient(180deg,rgba(30,58,82,.8),rgba(19,47,76,.88)); border:1px solid rgba(255,255,255,.08); color:inherit; }
.cat-thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; height:180px; overflow:hidden; }
.cat-thumbs img { width:100%; height:100%; object-fit:cover; background:var(--color-bg-tertiary); }
.cat-overview-body { padding:22px; }
.cat-overview-body p { color:var(--color-text-secondary); margin:8px 0 16px; }
.cat-overview-body span { color:var(--color-secondary-light); font-weight:800; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:9px; color:var(--color-text-muted); margin-bottom:18px; }
.breadcrumbs a { color:var(--color-accent-light); }
.detail-hero { position:relative; min-height:560px; overflow:hidden; padding:100px 0 48px; }
.detail-bg { position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(1.05); }
.detail-hero-inner { position:relative; z-index:2; }
.detail-grid { display:grid; grid-template-columns:300px minmax(0,1fr); gap:36px; align-items:end; }
.detail-poster { border-radius:24px; box-shadow:var(--shadow-xl); border:1px solid rgba(255,255,255,.13); }
.detail-info h1 { font-size:clamp(34px,5.4vw,70px); }
.detail-one-line { max-width:860px; color:var(--color-text-secondary); font-size:20px; margin-top:16px; }
.player-shell { overflow:hidden; border-radius:26px; border:1px solid rgba(255,255,255,.09); background:var(--color-bg-secondary); box-shadow:var(--shadow-xl); }
.player-screen { position:relative; min-height: min(66vw, 680px); aspect-ratio:16/9; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; }
.player-screen:after { content:''; position:absolute; inset:0; background:radial-gradient(circle at center, transparent 0%, rgba(0,0,0,.48) 70%); }
.play-large { position:relative; z-index:2; width:92px; height:92px; border-radius:50%; border:0; background:linear-gradient(135deg,var(--color-secondary),var(--color-accent)); color:#06111d; font-size:38px; box-shadow:0 22px 48px rgba(0,0,0,.45); transition:.25s ease; }
.play-large:hover { transform:scale(1.08); }
.player-caption { position:absolute; z-index:2; left:22px; bottom:20px; display:flex; flex-direction:column; gap:4px; }
.player-caption strong { font-size:20px; }
.player-caption span { color:var(--color-text-secondary); }
.player-source-row { display:flex; gap:10px; flex-wrap:wrap; padding:16px; border-top:1px solid rgba(255,255,255,.08); }
.player-source-row button { padding:10px 14px; border-radius:999px; background:var(--color-bg-tertiary); color:var(--color-text-secondary); border:1px solid var(--color-border); font-weight:800; }
.player-source-row button.active, .player-source-row button:hover { color:#06111d; background:var(--color-secondary); }
.player-shell.playing .player-screen:before { content:'播放画面已展开'; position:absolute; z-index:2; color:#fff; font-weight:900; font-size:22px; padding:16px 22px; border-radius:999px; background:rgba(0,0,0,.54); border:1px solid rgba(255,255,255,.2); }
.player-shell.playing .play-large { opacity:0; pointer-events:none; }
.detail-content-grid { display:grid; grid-template-columns:1fr 1fr 330px; gap:22px; align-items:start; }
.prose-card, .meta-card { padding:24px; }
.prose-card h2, .meta-card h2 { margin-bottom:14px; }
.prose-card p { color:var(--color-text-secondary); line-height:1.9; }
.meta-card dl { display:grid; gap:12px; }
.meta-card div { display:grid; grid-template-columns:64px 1fr; gap:12px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.07); }
.meta-card dt { color:var(--color-text-muted); }
.meta-card dd { color:var(--color-text-primary); }
.site-footer { margin-top:40px; padding:48px 0 20px; border-top:1px solid rgba(255,255,255,.08); background:rgba(6,17,29,.82); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 2fr; gap:34px; }
.footer-grid p { color:var(--color-text-secondary); margin-top:14px; max-width:620px; }
.footer-grid h3 { font-size:16px; margin-bottom:12px; }
.footer-grid a { display:block; color:var(--color-text-secondary); margin:8px 0; }
.footer-grid a:hover { color:var(--color-accent-light); }
.footer-cats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
.footer-bottom { color:var(--color-text-muted); margin-top:34px; padding-top:18px; border-top:1px solid rgba(255,255,255,.06); font-size:13px; }
@media (max-width: 1180px) { .movie-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .compact-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .split-layout { grid-template-columns:1fr; } .side-card { position:static; } .detail-content-grid { grid-template-columns:1fr; } }
@media (max-width: 820px) { .desktop-nav { display:none; } .mobile-toggle { display:inline-flex; } .mobile-menu.open { display:block; } .header-inner { height:64px; } .home-hero { height:84vh; min-height:650px; } .hero-content { padding-bottom:184px; } .hero-dots { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:150px; overflow:auto; } .hero-dot { padding:7px; } .hero-dot img { width:34px; height:46px; } .movie-grid, .compact-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .category-grid, .category-overview-grid { grid-template-columns:1fr; } .detail-grid { grid-template-columns:1fr; } .detail-poster { width:min(260px,70vw); } .footer-grid { grid-template-columns:1fr; } .ranking-item { grid-template-columns:34px 44px 1fr; } .ranking-score { display:none; } }
@media (max-width: 520px) { .search-open { padding:8px 12px; } .hero-copy h1 { font-size:34px; } .hero-copy p { font-size:15px; } .movie-grid, .compact-grid { grid-template-columns:1fr 1fr; } .movie-card-body { padding:12px; } .movie-card-title { font-size:15px; } .movie-card-desc { font-size:12px; min-height:36px; } .tag-row { display:none; } .content-section { padding:38px 0; } .section-head { align-items:flex-start; flex-direction:column; gap:10px; } .page-hero { padding-top:78px; } .player-screen { min-height:260px; } .play-large { width:72px; height:72px; font-size:30px; } .meta-card div { grid-template-columns:1fr; gap:4px; } }