:root{
--bg:#130b04;
--text:#fff7ed;
--muted:#f8d6a4;
--soft:#c99d62;
--brand:#f59e0b;
--line:rgba(253,230,138,.18);
--card:rgba(255,247,237,.09);
--shadow:0 24px 70px rgba(0,0,0,.32);
color-scheme:dark}
*{
box-sizing:border-box}
body{
margin:0;
min-height:100vh;
color:var(--text);
font-family:"Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
background:radial-gradient(circle at 18% 10%,rgba(245,158,11,.22),transparent 32rem),radial-gradient(circle at 82% 8%,rgba(159,18,57,.22),transparent 30rem),linear-gradient(135deg,#130b04,#211106 45%,#0f0703)}
body:before{
content:"";
position:fixed;
inset:0;
z-index:-1;
background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
background-size:46px 46px;
mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 92%)}
a{
color:inherit;
text-decoration:none}
img{
display:block;
max-width:100%}
.site-header{
position:sticky;
top:0;
z-index:50;
border-bottom:1px solid var(--line);
background:rgba(19,11,4,.78);
backdrop-filter:blur(18px)}
.header-inner{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:22px;
max-width:1240px;
margin:auto;
padding:15px 22px}
.site-logo,.footer-logo{
display:inline-flex;
align-items:center;
gap:10px;
font-family:"Noto Serif SC",serif;
font-size:1.22rem;
font-weight:900}
.logo-mark{
display:grid;
place-items:center;
width:38px;
height:38px;
border-radius:14px;
color:#451a03;
background:linear-gradient(135deg,#fde68a,#f59e0b 52%,#fb7185);
box-shadow:0 12px 30px rgba(245,158,11,.32)}
.site-nav{
display:flex;
justify-content:center;
gap:8px}
.site-nav a{
padding:9px 13px;
border-radius:999px;
color:var(--muted);
transition:.2s}
.site-nav a:hover,.site-nav a.active{
color:#451a03;
background:linear-gradient(135deg,#fcd34d,#fb923c)}
.header-search{
display:flex;
gap:8px;
width:min(320px,26vw);
padding:6px;
border:1px solid var(--line);
border-radius:999px;
background:rgba(255,251,235,.08)}
.header-search input{
width:100%;
min-width:0;
border:0;
outline:0;
color:var(--text);
background:transparent;
padding:4px 4px 4px 10px}
.header-search button,.btn{
border:0;
cursor:pointer;
white-space:nowrap;
border-radius:999px;
padding:10px 17px;
font-weight:800;
transition:.2s}
.header-search button,.btn-primary{
color:#451a03;
background:linear-gradient(135deg,#fde68a,#f59e0b 58%,#fb7185);
box-shadow:0 12px 28px rgba(245,158,11,.26)}
.btn-secondary{
border:1px solid rgba(253,230,138,.35);
color:var(--text);
background:rgba(255,255,255,.12)}
.btn:hover{
transform:translateY(-2px)}
.nav-toggle{
display:none;
width:42px;
height:42px;
border:1px solid var(--line);
border-radius:14px;
background:rgba(255,255,255,.08)}
.nav-toggle span{
display:block;
width:18px;
height:2px;
margin:4px auto;
background:var(--text)}
.hero-slider{
position:relative;
min-height:clamp(590px,76vh,780px);
overflow:hidden;
border-bottom:1px solid var(--line)}
.hero-slide{
position:absolute;
inset:0;
opacity:0;
pointer-events:none;
transition:opacity .8s}
.hero-slide.is-active{
opacity:1;
pointer-events:auto}
.hero-bg{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
filter:saturate(1.1) contrast(1.05) brightness(.55);
transform:scale(1.03)}
.hero-bg[data-missing=true]{
display:none}
.hero-slide:before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at 75% 30%,rgba(245,158,11,.26),transparent 34rem),linear-gradient(110deg,rgba(19,11,4,.98),rgba(69,26,3,.76) 48%,rgba(0,0,0,.55))}
.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(to top,rgba(19,11,4,.98),transparent 38%)}
.hero-content{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(260px,.45fr);
align-items:center;
gap:clamp(30px,6vw,78px);
max-width:1240px;
min-height:inherit;
margin:auto;
padding:88px 22px 96px}
.eyebrow{
margin:0 0 12px;
color:#fcd34d;
font-size:.84rem;
font-weight:900;
letter-spacing:.16em}
.hero-copy h1,.page-hero h1,.detail-info-card h1{
margin:0;
font-family:"Noto Serif SC",serif;
font-weight:900}
.hero-copy h1{
max-width:780px;
font-size:clamp(2.7rem,8vw,6.6rem);
line-height:.98;
text-shadow:0 18px 50px rgba(0,0,0,.42)}
.hero-lead{
max-width:760px;
margin:24px 0 0;
color:var(--muted);
font-size:clamp(1rem,1.6vw,1.35rem);
line-height:1.9}
.hero-tags,.tag-row,.detail-tags{
display:flex;
flex-wrap:wrap;
gap:8px}
.hero-tags{
margin-top:24px}
.hero-tags span,.tag-row span,.detail-tags a{
border:1px solid rgba(253,230,138,.28);
border-radius:999px;
color:var(--muted);
background:rgba(255,255,255,.09)}
.hero-tags span,.detail-tags a{
padding:8px 12px}
.tag-row span{
padding:5px 9px;
font-size:.78rem}
.hero-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:32px}
.hero-poster{
position:relative;
overflow:hidden;
min-height:420px;
border:1px solid rgba(253,230,138,.34);
border-radius:32px;
background:linear-gradient(135deg,rgba(120,53,15,.94),rgba(159,18,57,.66));
box-shadow:var(--shadow);
transform:rotate(1.5deg)}
.hero-poster img{
width:100%;
height:100%;
min-height:420px;
object-fit:cover}
.hero-poster:after,.poster-frame:after{
content:attr(data-title);
position:absolute;
inset:auto 12px 12px;
display:none;
font-weight:900;
text-align:center;
text-shadow:0 2px 12px rgba(0,0,0,.55)}
.hero-poster.is-missing:after,.poster-frame.is-missing:after{
display:block}
.hero-dots{
position:absolute;
z-index:4;
left:50%;
bottom:30px;
display:flex;
gap:10px;
transform:translateX(-50%)}
.hero-dots button{
width:12px;
height:12px;
padding:0;
border:1px solid rgba(253,230,138,.6);
border-radius:999px;
background:rgba(255,255,255,.24);
cursor:pointer}
.hero-dots button.is-active{
width:34px;
background:#f59e0b}
.stat-strip,.site-section,.detail-layout,.detail-content,.search-panel,.page-hero{
max-width:1240px;
margin:auto;
padding-left:22px;
padding-right:22px}
.stat-strip{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
padding-top:26px}
.stat-strip div,.category-card,.movie-card,.detail-info-card,.detail-content article,.detail-content aside,.search-panel,.page-hero,.video-shell{
border:1px solid var(--line);
background:linear-gradient(180deg,rgba(255,251,235,.11),rgba(255,251,235,.055));
box-shadow:0 18px 60px rgba(0,0,0,.2);
backdrop-filter:blur(10px)}
.stat-strip div{
padding:22px;
border-radius:22px}
.stat-strip strong{
display:block;
color:#fcd34d;
font-family:"Noto Serif SC",serif;
font-size:clamp(1.6rem,3vw,2.5rem)}
.stat-strip span{
color:var(--muted)}
.site-section{
padding-top:58px;
padding-bottom:14px}
.section-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:20px;
margin-bottom:24px}
.section-head h2{
margin:0;
font-family:"Noto Serif SC",serif;
font-size:clamp(1.8rem,3vw,2.8rem);
font-weight:900}
.section-head p:not(.eyebrow){
max-width:720px;
margin:8px 0 0;
color:var(--muted)}
.section-more{
color:#fcd34d;
font-weight:900}
.movie-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:18px}
.movie-card{
overflow:hidden;
border-radius:22px;
transition:.22s}
.movie-card:hover{
transform:translateY(-6px);
border-color:rgba(253,230,138,.42);
box-shadow:0 26px 76px rgba(0,0,0,.32)}
.poster-frame{
position:relative;
display:block;
overflow:hidden;
aspect-ratio:2/3;
background:linear-gradient(145deg,rgba(120,53,15,.85),rgba(159,18,57,.58)),radial-gradient(circle at 50% 20%,rgba(253,230,138,.22),transparent 15rem)}
.poster-frame img{
width:100%;
height:100%;
object-fit:cover;
transition:.24s}
.movie-card:hover .poster-frame img{
transform:scale(1.055)}
.poster-badge{
position:absolute;
top:10px;
left:10px;
padding:5px 10px;
border-radius:999px;
color:#451a03;
background:#fcd34d;
font-size:.78rem;
font-weight:900}
.movie-card-body{
padding:14px}
.movie-meta-line{
color:var(--soft);
font-size:.82rem}
.movie-card h3{
margin:8px 0;
font-family:"Noto Serif SC",serif;
font-size:1.1rem;
font-weight:900;
line-height:1.35}
.movie-card p{
display:-webkit-box;
min-height:3.3em;
margin:0 0 12px;
overflow:hidden;
color:var(--muted);
font-size:.92rem;
line-height:1.65;
-webkit-line-clamp:2;
-webkit-box-orient:vertical}
.category-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:16px}
.category-card{
display:block;
min-height:162px;
padding:22px;
border-radius:22px;
transition:.2s}
.category-card:hover{
transform:translateY(-4px);
border-color:rgba(253,230,138,.42)}
.category-card span{
display:block;
color:#fcd34d;
font-size:1.32rem;
font-weight:900}
.category-card strong{
display:block;
margin-top:12px;
font-family:"Noto Serif SC",serif;
font-size:2rem}
.category-card p{
margin:8px 0 0;
color:var(--muted);
line-height:1.7}
.ranking-list{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px 16px;
margin:0;
padding:0;
list-style:none}
.ranking-list li{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:12px;
padding:14px;
border:1px solid var(--line);
border-radius:16px;
background:rgba(255,255,255,.06)}
.rank-number{
display:grid;
place-items:center;
width:34px;
height:34px;
border-radius:12px;
color:#451a03;
background:linear-gradient(135deg,#fde68a,#f59e0b);
font-weight:900}
.ranking-list a{
overflow:hidden;
font-weight:900;
text-overflow:ellipsis;
white-space:nowrap}
.ranking-list small{
color:var(--soft)}
.page-hero{
margin-top:30px;
border-radius:28px}
.compact-hero{
padding-top:58px;
padding-bottom:58px;
background:radial-gradient(circle at 85% 20%,rgba(245,158,11,.3),transparent 20rem),linear-gradient(135deg,rgba(120,53,15,.72),rgba(69,26,3,.72))}
.page-hero h1{
max-width:900px;
font-size:clamp(2.1rem,5vw,4rem);
line-height:1.08}
.page-hero p:not(.eyebrow){
max-width:780px;
margin:16px 0 0;
color:var(--muted);
font-size:1.08rem;
line-height:1.85}
.pagination{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:9px;
margin-top:34px}
.page-link,.page-ellipsis{
min-width:42px;
padding:10px 14px;
border:1px solid var(--line);
border-radius:999px;
color:var(--muted);
text-align:center;
background:rgba(255,255,255,.06)}
.page-link.active,.page-link:hover{
color:#451a03;
background:#fcd34d}
.detail-layout{
padding-top:28px}
.breadcrumb{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:18px;
color:var(--muted)}
.breadcrumb a{
color:#fcd34d}
.player-panel{
display:grid;
grid-template-columns:minmax(0,1.55fr) minmax(300px,.65fr);
gap:20px}
.video-shell{
position:relative;
overflow:hidden;
min-height:420px;
border-radius:28px;
background:#050505}
.movie-video{
display:block;
width:100%;
height:100%;
min-height:420px;
background:#000;
object-fit:contain}
.play-overlay{
position:absolute;
inset:0;
display:grid;
place-items:center;
gap:6px;
border:0;
color:var(--text);
cursor:pointer;
background:linear-gradient(180deg,rgba(19,11,4,.18),rgba(19,11,4,.72))}
.play-overlay.is-hidden{
display:none}
.play-icon{
display:grid;
place-items:center;
width:84px;
height:84px;
border-radius:50%;
color:#451a03;
background:linear-gradient(135deg,#fde68a,#f59e0b);
box-shadow:0 18px 42px rgba(245,158,11,.36);
font-size:2.1rem}
.player-status{
position:absolute;
left:18px;
bottom:16px;
color:var(--muted);
font-size:.9rem}
.detail-info-card{
padding:26px;
border-radius:28px}
.detail-info-card h1{
font-size:clamp(1.9rem,4vw,3.2rem);
line-height:1.15}
.detail-one-line{
margin:18px 0;
color:var(--muted);
line-height:1.85}
.meta-list{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
margin:0 0 18px}
.meta-list div{
padding:13px;
border:1px solid var(--line);
border-radius:16px;
background:rgba(255,255,255,.055)}
.meta-list dt{
color:var(--soft);
font-size:.78rem}
.meta-list dd{
margin:5px 0 0;
font-weight:900}
.detail-content{
display:grid;
grid-template-columns:minmax(0,1fr) 360px;
gap:20px;
padding-top:28px}
.detail-content article,.detail-content aside{
padding:26px;
border-radius:28px}
.detail-content h2{
margin:0 0 14px;
font-family:"Noto Serif SC",serif;
font-size:1.55rem;
font-weight:900}
.detail-content p{
margin:0 0 24px;
color:var(--muted);
line-height:2;
text-align:justify}
.search-panel{
margin-top:26px;
padding-top:24px;
padding-bottom:28px;
border-radius:28px}
.large-search{
display:flex;
gap:12px}
.large-search input,.filter-row select{
width:100%;
border:1px solid var(--line);
border-radius:999px;
outline:0;
color:var(--text);
background:rgba(255,255,255,.08)}
.large-search input{
padding:13px 18px}
.filter-row{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin:16px 0 20px}
.filter-row select{
padding:12px 14px}
.search-summary{
margin:6px 0 18px;
color:var(--muted)}
.empty-state{
grid-column:1/-1;
color:var(--muted)}
.site-footer{
margin-top:72px;
border-top:1px solid var(--line);
background:rgba(0,0,0,.18)}
.footer-inner{
display:flex;
justify-content:space-between;
gap:24px;
max-width:1240px;
margin:auto;
padding:34px 22px}
.footer-inner p{
max-width:640px;
margin:10px 0 0;
color:var(--muted)}
.footer-links{
display:flex;
flex-wrap:wrap;
gap:10px;
align-content:start;
justify-content:flex-end}
.footer-links a{
padding:8px 12px;
border:1px solid var(--line);
border-radius:999px;
color:var(--muted)}
@media (max-width:1040px){
.header-inner{
grid-template-columns:auto auto}
.site-nav,.header-search{
grid-column:1/-1}
.header-search{
width:100%}
.hero-content,.player-panel,.detail-content{
grid-template-columns:1fr}
.hero-poster{
display:none}
.movie-grid,.category-grid{
grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
.header-inner{
display:flex;
flex-wrap:wrap}
.nav-toggle{
display:block;
margin-left:auto}
.site-nav{
display:none;
flex-direction:column;
align-items:stretch;
width:100%}
.site-nav.is-open{
display:flex}
.site-nav a{
text-align:center}
.hero-slider{
min-height:620px}
.hero-content{
padding-top:78px}
.stat-strip,.movie-grid,.category-grid,.ranking-list,.filter-row,.meta-list{
grid-template-columns:1fr 1fr}
.section-head,.footer-inner,.large-search{
flex-direction:column;
align-items:stretch}
.footer-links{
justify-content:flex-start}
}
@media (max-width:520px){
.stat-strip,.movie-grid,.category-grid,.ranking-list,.filter-row,.meta-list{
grid-template-columns:1fr}
.site-section,.stat-strip,.detail-layout,.detail-content,.search-panel,.page-hero{
padding-left:16px;
padding-right:16px}
.hero-copy h1{
font-size:2.45rem}
.compact-hero{
padding-top:42px;
padding-bottom:42px}
.video-shell,.movie-video{
min-height:260px}
}