:root{
  --bg:#0f0617; --fg:#f5ecf8; --surface:rgba(255,255,255,.05); --surface-2:rgba(255,255,255,.08);
  --surface-glass:rgba(15,6,23,.7); --border:rgba(255,255,255,.1); --shadow:rgba(236,72,153,.4);
  --accent:#EC4899; --accent-fg:#fff;
  --r-card:24px; --r-btn:999px;
  --ff-heading:"ZCOOL XiaoWei","Source Han Serif SC",serif;
  --ff-body:"Source Han Sans SC",system-ui,sans-serif;
}
body{background:radial-gradient(circle at 20% 0%,#3b1052 0%,#0f0617 50%) no-repeat fixed}
.immersive{position:relative;min-height:60vh;border-radius:24px;overflow:hidden;display:flex;align-items:flex-end;padding:3rem;background:var(--bg-img,linear-gradient(135deg,#3b1052,#0f0617));background-size:cover;background-position:center}
.immersive__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,6,23,.2) 0%,rgba(15,6,23,.85) 100%)}
.immersive__copy{position:relative;max-width:640px}
.immersive__copy h1{font-size:clamp(2rem,4.5vw,3.4rem);margin:.5rem 0}
.immersive__badge{display:inline-block;background:var(--accent);color:#fff;padding:.25rem .8rem;border-radius:999px;font-size:.8rem;font-weight:600}
.split{display:grid;grid-template-columns:2fr 1fr;gap:2rem;margin:2.5rem 0}
.split-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.big-nav li a{display:block;padding:1rem 1.2rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);margin-bottom:.7rem;transition:transform .2s,background .2s}
.big-nav li a:hover{transform:translateX(4px);background:var(--surface-2)}
.big-nav strong{display:block;font-size:1.05rem;margin-bottom:.2rem}
.big-nav span{display:block;font-size:.82rem;opacity:.7}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.4rem}
.layout-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media (max-width:900px){.split{grid-template-columns:1fr}}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:var(--ff-body);color:var(--fg);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,h4{font-family:var(--ff-heading);margin:0 0 .5em;line-height:1.2}
.section-title{font-size:1.5rem;margin:2rem 0 1rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.4rem;border-radius:var(--r-btn);font-weight:600;transition:transform .2s,box-shadow .2s,background .2s}
.btn--primary{background:var(--accent);color:var(--accent-fg);box-shadow:0 6px 24px -8px var(--accent)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px var(--accent)}
.btn--ghost{border:1px solid var(--border);color:var(--fg)}
.btn--ghost:hover{background:var(--surface-2)}
.topbar{position:sticky;top:0;z-index:50;backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);background:var(--surface-glass);border-bottom:1px solid var(--border)}
.topbar__inner{max-width:1320px;margin:0 auto;padding:.85rem 1.5rem;display:flex;gap:1.5rem;align-items:center}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.05rem;font-family:var(--ff-heading)}
.brand svg{width:32px;height:32px}
.primary-nav{flex:1}
.primary-nav ul{display:flex;gap:1.5rem;flex-wrap:wrap}
.primary-nav a{font-size:.95rem;opacity:.85;padding:.3rem .2rem;border-bottom:2px solid transparent;transition:opacity .15s,border-color .15s}
.primary-nav a:hover{opacity:1;border-color:var(--accent)}
.search-mini{display:flex;align-items:center;gap:.4rem;background:var(--surface-2);padding:.4rem .8rem;border-radius:999px;border:1px solid var(--border)}
.search-mini input{background:transparent;border:0;outline:none;color:var(--fg);width:170px}
.search-mini button{display:flex;align-items:center;opacity:.7}

main{max-width:1320px;margin:0 auto;padding:2rem 1.5rem 3rem}

.hero{padding:3rem 0 2rem}
.hero h1{font-size:clamp(1.8rem,4vw,3rem);margin-bottom:.5rem}
.hero p{font-size:1.1rem;opacity:.8;max-width:680px}
.hero__cta{margin-top:1.5rem;display:flex;gap:.8rem;flex-wrap:wrap}
.hero--center{text-align:center;padding:4rem 0 2rem}
.hero--center p{margin:0 auto}

.crumbs{font-size:.85rem;opacity:.7;margin-bottom:.8rem}
.crumbs ol{display:flex;gap:.5rem;flex-wrap:wrap}
.crumbs li::after{content:"/";margin-left:.5rem;opacity:.4}
.crumbs li:last-child::after{display:none}

.channel-head{margin:1rem 0 1.5rem}
.channel-head h1{font-size:clamp(1.5rem,3.2vw,2.4rem)}
.channel-head__intro{opacity:.75;max-width:720px}

.eeat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:1.2rem;margin-top:1.5rem}
.eeat-card h3{margin-top:0;font-size:1rem;letter-spacing:.05em;text-transform:uppercase;opacity:.7}
.eeat-card p{font-size:.92rem;opacity:.85;margin:0}
.eeat-card--lg p{font-size:.95rem}
.eeat-banner{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:1.5rem 1.6rem;margin:1.5rem 0}
.eeat-banner h2,.eeat-banner h3{font-size:1.05rem;margin-top:0;opacity:.85}
.eeat-banner p{opacity:.85;font-size:.95rem;margin:0}
.eeat-banner--mid{background:var(--surface-2)}

.channel-tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 1.5rem;justify-content:center}
.chip{display:inline-block;padding:.4rem 1rem;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-size:.85rem;transition:background .15s}
.chip:hover{background:var(--accent);color:var(--accent-fg);border-color:transparent}

.vcard{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.vcard__media{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden}
.vcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.vcard__duration{position:absolute;right:.5rem;bottom:.5rem;font-size:.75rem;background:rgba(0,0,0,.7);color:#fff;padding:.15rem .45rem;border-radius:.25rem}
.vcard__badge{position:absolute;left:.5rem;top:.5rem;font-size:.7rem;background:var(--accent);color:var(--accent-fg);padding:.18rem .5rem;border-radius:.25rem;font-weight:600;letter-spacing:.05em}
.vcard__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transition:opacity .25s,transform .25s;transform:scale(.8)}
.vcard__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55));opacity:0;transition:opacity .25s}
.vcard__meta{padding:.8rem 1rem 1rem}
.vcard__title{font-size:.98rem;margin:0 0 .35rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vcard__sub{font-size:.8rem;opacity:.65;margin:0}

/* Footer common */
.related-search,.faq,.testimonials{margin-top:3rem}
.related-search ul{display:flex;flex-wrap:wrap;gap:.5rem}
.related-search a{display:inline-block;padding:.35rem .85rem;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;font-size:.82rem;transition:background .15s}
.related-search a:hover{background:var(--accent);color:var(--accent-fg)}
.faq details{border:1px solid var(--border);background:var(--surface);border-radius:var(--r-card);padding:.85rem 1.1rem;margin:.6rem 0}
.faq summary{cursor:pointer;font-weight:600}
.faq p{margin:.7rem 0 0;opacity:.85;font-size:.92rem}
.testimonials ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.testimonials blockquote{margin:0;padding:1rem 1.2rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);font-size:.9rem;opacity:.9}
.testimonials cite{display:block;margin-top:.6rem;font-size:.8rem;opacity:.7;font-style:normal}

.sitefoot{margin-top:3rem;border-top:1px solid var(--border);padding-top:2rem}
.sitefoot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem}
.sitefoot h3{margin-top:0}
.sitefoot h4{margin:0 0 .6rem;font-size:.9rem;opacity:.7;letter-spacing:.05em;text-transform:uppercase}
.sitefoot ul li{font-size:.88rem;opacity:.85;padding:.18rem 0}
.sitefoot__legal{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--border);font-size:.82rem;opacity:.65;text-align:center}
.sitefoot__legal p{margin:.3rem 0}

/* Share */
.share{margin:1.2rem 0;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.share__label{font-size:.85rem;opacity:.6}
.share ul{display:flex;gap:.6rem}
.share button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);transition:background .15s,color .15s}
.share button:hover{background:var(--accent);color:var(--accent-fg);border-color:transparent}

/* Video detail */
.video-detail{max-width:1000px;margin:0 auto}
.player{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--r-card);overflow:hidden;margin-bottom:1.2rem}
.player img{width:100%;height:100%;object-fit:cover;opacity:.7}
.player__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(0,0,0,.15);transition:background .2s,transform .2s}
.player__play:hover{background:rgba(0,0,0,.3);transform:scale(1.04)}
.player.is-playing .player__play{opacity:0;pointer-events:none}
.player__bar{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;padding:.6rem 1rem;background:linear-gradient(180deg,transparent,rgba(0,0,0,.6));color:#fff;font-size:.85rem}
.video-meta{opacity:.7;font-size:.9rem}
.video-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.video-desc{margin-top:1.5rem;padding:1.2rem 1.4rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card)}

.notfound{padding:4rem 0;text-align:center}
.notfound h1{font-size:5rem;margin:0;opacity:.5}

.empty{padding:3rem 1rem;text-align:center;opacity:.7}

.search-big{display:flex;gap:.5rem;margin-top:1rem;max-width:600px}
.search-big input{flex:1;padding:.75rem 1rem;border:1px solid var(--border);border-radius:var(--r-btn);background:var(--surface);color:var(--fg);font-size:1rem}
.search-big button{padding:.75rem 1.4rem;border-radius:var(--r-btn);background:var(--accent);color:var(--accent-fg);font-weight:600}

@media (hover:hover){
  .vcard:hover{transform:translateY(-4px);box-shadow:0 14px 40px -10px var(--shadow);border-color:var(--accent)}
  .vcard:hover .vcard__media img{transform:scale(1.06)}
  .vcard:hover .vcard__play,.vcard:hover .vcard__overlay{opacity:1}
  .vcard:hover .vcard__play{transform:scale(1)}
}

@media (max-width:760px){
  .topbar__inner{flex-wrap:wrap;gap:.8rem}
  .primary-nav ul{gap:.9rem}
  .search-mini input{width:120px}
  .layout-grid{display:block}
  .sidebar{margin-bottom:1.5rem}
}