:root{
  --ink:#0c1a22; --paper:#e7f1f4; --paper2:#d5e6eb; --surface:#f7fbfc;
  --text:#0f2430; --muted:#3d5a66; --muted2:#6b8590;
  --teal:#0f766e; --teal2:#14b8a6; --amber:#f59e0b;
  --line:rgba(12,26,34,.12); --wrap:1280px;
  --font:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --display:"ZCOOL XiaoWei","Noto Serif SC",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); color:var(--text);
  background:
    radial-gradient(920px 420px at 12% -8%, rgba(20,184,166,.16), transparent 55%),
    radial-gradient(780px 380px at 96% 8%, rgba(14,116,144,.12), transparent 50%),
    linear-gradient(180deg,#f2f8fa 0%, var(--paper) 48%, var(--paper2) 100%);
  overflow-x:hidden; overflow-x:clip;
  padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);
  -webkit-tap-highlight-color:rgba(15,118,110,.12);
}
a{color:inherit; text-decoration:none}
img,video{max-width:100%; height:auto; display:block}
.wrap{width:min(100% - 2rem, var(--wrap)); margin-inline:auto}
.muted{color:var(--muted); line-height:1.7}
.skip-link{
  position:absolute; left:-999px; top:0; z-index:100; padding:.6rem 1rem;
  background:var(--teal); color:#fff; border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}
.site-header{
  position:sticky; top:0; z-index:50;
  padding-top:env(safe-area-inset-top);
  background:linear-gradient(180deg, rgba(8,32,40,.96), rgba(12,26,34,.92));
  backdrop-filter:blur(14px); color:#e8f6f8;
  box-shadow:0 8px 24px rgba(8,32,40,.18);
}
.site-header::after{
  content:""; display:block; height:2px;
  background:linear-gradient(90deg, transparent, rgba(20,184,166,.35) 20%, var(--teal2) 50%, rgba(20,184,166,.35) 80%, transparent);
}
.header-inner{min-height:64px; display:flex; align-items:center; gap:1rem; justify-content:space-between}
.brand{display:inline-flex; align-items:center; gap:.55rem; font-family:var(--display); font-size:1.25rem; letter-spacing:.06em; color:#f0fbfc; white-space:nowrap}
.brand-mark{
  width:0; height:0; border-style:solid; border-width:8px 0 8px 14px;
  border-color:transparent transparent transparent var(--teal2);
  filter:drop-shadow(0 0 8px rgba(20,184,166,.45));
}
.nav{display:flex; gap:.35rem; flex:1; justify-content:center; flex-wrap:wrap}
.nav-link{display:inline-flex; align-items:center; height:36px; padding:0 .75rem; border-radius:8px; color:rgba(232,246,248,.88)}
.nav-link:hover,.nav-link.active{background:rgba(20,184,166,.14); color:var(--teal2); box-shadow:inset 0 -2px 0 var(--teal2)}
.search input{
  width:min(240px,36vw); min-width:7.5rem; height:40px; border-radius:999px; border:1px solid rgba(20,184,166,.28);
  background:rgba(255,255,255,.08); color:#f0fbfc; padding:0 .9rem; outline:none; font-size:16px;
}
.search input::placeholder{color:rgba(232,246,248,.45)}
.hero{
  position:relative; isolation:isolate; min-height:min(62vh,500px);
  display:flex; align-items:flex-end; color:#eefaf8;
  background:#06141c; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:url("../img/5.jpg") 62% 28%/cover no-repeat; transform:scale(1.06);
  filter:saturate(.9) contrast(1.05);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(102deg, rgba(6,20,28,.94) 0%, rgba(8,32,40,.82) 40%, rgba(8,32,40,.35) 66%, rgba(8,32,40,.1) 100%),
    linear-gradient(0deg, rgba(6,20,28,.75), transparent 45%),
    linear-gradient(90deg, rgba(15,118,110,.28), transparent 36%);
}
.hero-inner{padding:4.5rem 0 3rem; max-width:36rem}
.hero h1{
  margin:0 0 .85rem; font-family:var(--display);
  font-size:clamp(2.4rem,6vw,4.2rem); line-height:1.08; letter-spacing:.06em;
  border-left:3px solid var(--teal2); padding-left:1rem;
}
.hero h1 small{display:block; margin-top:.55rem; font-family:var(--font); font-size:clamp(.95rem,2vw,1.15rem); letter-spacing:.14em; font-weight:400; color:rgba(238,250,248,.72)}
.hero p{margin:0 0 1.35rem; padding-left:calc(3px + 1rem); color:rgba(238,250,248,.78); line-height:1.65}
.hero-actions{display:flex; flex-wrap:wrap; gap:.75rem; padding-left:calc(3px + 1rem)}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:.85rem 1.7rem; border-radius:999px; letter-spacing:.12em; font-weight:600;
}
.btn-primary{background:linear-gradient(120deg,var(--teal),var(--teal2)); color:#f0fdfa; box-shadow:0 8px 24px rgba(15,118,110,.4)}
.btn-ghost{border:1px solid rgba(238,250,248,.55); color:#eefaf8; background:rgba(255,255,255,.04)}
.section{padding:2.5rem 0}
.section-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; padding-bottom:.75rem; border-bottom:1px solid rgba(15,118,110,.12); position:relative}
.section-head::after{content:""; position:absolute; left:0; bottom:-1px; width:min(9rem,36%); height:2px; border-radius:999px; background:linear-gradient(90deg,var(--teal2),transparent)}
.section-head h2{margin:0; font-family:var(--display); font-size:1.6rem}
.section-head a{color:var(--teal); font-weight:600}
.grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem}
.card{
  display:flex; flex-direction:column; background:var(--surface); border:1px solid rgba(15,118,110,.12);
  border-radius:10px; overflow:hidden; box-shadow:0 4px 16px rgba(12,26,34,.04);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.card:hover{transform:translateY(-4px); border-color:rgba(20,184,166,.42); box-shadow:0 16px 36px rgba(12,26,34,.1), 0 0 24px rgba(20,184,166,.12)}
.card-cover{position:relative; aspect-ratio:16/10; overflow:hidden; background:#111}
.card-cover img{width:100%; height:100%; object-fit:cover; transition:transform .45s ease}
.card:hover .card-cover img{transform:scale(1.04)}
.badge{position:absolute; top:.5rem; padding:.2rem .55rem; border-radius:999px; font-size:.75rem; color:#fff}
.badge-cat{left:.5rem; background:linear-gradient(120deg,var(--teal),#0e7490)}
.badge-meta{right:.5rem; background:rgba(8,32,40,.78)}
.card-body{padding:1rem 1.05rem 1.1rem; display:flex; flex-direction:column; gap:.4rem; flex:1}
.card-body h3{margin:0; font-family:var(--display); font-size:1.05rem; line-height:1.35}
.card-body p{margin:0; color:var(--muted); font-size:.9rem; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card-meta{margin-top:auto; display:flex; justify-content:space-between; color:var(--muted2); font-size:.8rem; padding-top:.45rem}
.cat-blocks{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem}
.cat-block{background:var(--surface); border:1px solid rgba(15,118,110,.14); border-radius:12px; border-top:3px solid var(--teal2); padding:1.2rem}
.cat-block h3{margin:0 0 .8rem; font-family:var(--display)}
.cat-block a{display:inline-block; margin:.2rem .35rem .2rem 0; padding:.35rem .7rem; border-radius:999px; color:var(--muted)}
.cat-block a:hover{background:rgba(20,184,166,.14); color:var(--teal)}
.layout{display:grid; grid-template-columns:260px 1fr; gap:1.5rem}
.side{
  background:var(--surface); border:1px solid rgba(15,118,110,.14); border-radius:12px;
  padding:1.2rem; height:fit-content; box-shadow:0 8px 24px rgba(12,26,34,.05);
}
.side h3,.side h4{margin:0 0 .7rem; font-family:var(--display)}
.side .filter{display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem}
.side .filter a{padding:.55rem .75rem; border-radius:999px; color:var(--muted)}
.side .filter a.active,.side .filter a:hover{background:linear-gradient(120deg,var(--teal),var(--teal2)); color:#fff}
.pager{display:flex; flex-wrap:wrap; gap:.45rem; justify-content:center; margin-top:1.5rem}
.pager a,.pager span{min-width:2.2rem; height:2.2rem; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:var(--surface); border:1px solid rgba(15,118,110,.16)}
.pager .current{background:linear-gradient(120deg,var(--teal),var(--teal2)); color:#fff; border-color:transparent}
.player-layout{display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,1fr); gap:1.5rem}
.panel{background:var(--surface); border:1px solid rgba(15,118,110,.14); border-radius:12px; padding:1.2rem; box-shadow:0 10px 28px rgba(12,26,34,.06)}
.player-stage{background:#000; border-radius:12px; overflow:hidden; border:1px solid rgba(20,184,166,.25); box-shadow:0 16px 40px rgba(8,32,40,.25)}
.player-stage video{width:100%; aspect-ratio:16/9; background:#000}
.back{display:inline-flex; margin:1rem 0; color:var(--muted)}
.back:hover{color:var(--teal)}
.play-title{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem}
.play-title h1{margin:0; font-family:var(--display); font-size:clamp(1.5rem,3vw,2rem)}
.meta-row{display:flex; flex-wrap:wrap; gap:.8rem 1.1rem; color:var(--muted); font-size:.92rem; margin:1rem 0}
.info-grid{display:grid; grid-template-columns:1fr 1fr; gap:.55rem 1rem; color:var(--muted); font-size:.92rem; margin:1rem 0}
.tags{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1rem}
.tag{background:rgba(20,184,166,.14); color:var(--teal); border:1px solid rgba(15,118,110,.28); border-radius:999px; padding:.3rem .75rem; font-size:.85rem}
.related{display:flex; flex-direction:column; gap:.85rem}
.related a{display:grid; grid-template-columns:96px 1fr; gap:.75rem; align-items:center}
.related img{width:96px; height:64px; object-fit:cover; border-radius:6px; background:#111}
.related h4{margin:0 0 .25rem; font-size:.95rem}
.related p{margin:0; color:var(--muted2); font-size:.8rem}
.form-card,.about-card{
  max-width:520px; margin:2.5rem auto; background:var(--surface);
  border:1px solid rgba(15,118,110,.16); border-radius:14px; padding:2rem;
  box-shadow:0 16px 40px rgba(12,26,34,.08);
}
.about-card{max-width:720px}
.form-card h1,.about-card h1{margin:0 0 .5rem; font-family:var(--display)}
.form-card label{display:block; margin:1rem 0 .35rem; color:var(--muted)}
.form-card input{
  width:100%; height:44px; border-radius:10px; border:1px solid rgba(15,118,110,.18);
  background:var(--paper); padding:0 .9rem; color:var(--text);
}
.site-footer{
  position:relative; isolation:isolate; overflow:hidden; margin-top:2rem; color:rgba(220,240,244,.78);
  background:
    radial-gradient(520px 220px at 12% 0%, rgba(20,184,166,.22), transparent 60%),
    radial-gradient(480px 200px at 88% 20%, rgba(14,116,144,.18), transparent 58%),
    linear-gradient(180deg,#06141c,#040e14);
}
.site-footer::before{
  content:""; position:absolute; inset:0 auto auto 0; width:100%; height:2px;
  background:linear-gradient(90deg, transparent, rgba(20,184,166,.35) 22%, var(--teal2) 50%, rgba(20,184,166,.35) 78%, transparent);
}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem; padding:2.5rem 0 1.5rem}
.footer-brand{margin-bottom:.8rem}
.site-footer h3{margin:0 0 .8rem; color:var(--teal2); font-family:var(--display)}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.45rem}
.site-footer a:hover{color:var(--amber)}
.footer-copy{border-top:1px solid rgba(20,184,166,.16); padding:1rem 0 1.4rem; color:rgba(220,240,244,.6); font-size:.9rem}
.bbaaseo{
  display:inline-flex; align-items:center; gap:.55rem; margin-top:1rem; padding:.45rem .85rem;
  border-radius:999px; background:rgba(20,184,166,.12); border:1px solid rgba(20,184,166,.35);
  box-shadow:0 0 18px rgba(20,184,166,.12);
}
.bbaaseo__icon{
  width:1.35rem; height:1.35rem; border-radius:999px;
  background:linear-gradient(140deg,var(--teal),var(--teal2));
  box-shadow:0 0 12px rgba(20,184,166,.45);
}
.bbaaseo__text{color:#99f6e4; font-size:.92rem; letter-spacing:.02em}
@media (max-width:1024px){
  .grid,.cat-blocks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .layout,.player-layout,.footer-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .grid,.cat-blocks{grid-template-columns:1fr}
  .header-inner{flex-wrap:wrap; min-height:auto; padding:.55rem 0}
  .nav{order:3; flex:1 1 100%; justify-content:flex-start; gap:.2rem}
  .nav-link{min-height:44px; padding:0 .9rem}
  .search{flex:1 1 auto; display:flex; justify-content:flex-end}
  .search input{width:100%; max-width:12rem}
  .info-grid{grid-template-columns:1fr}
  .hero{min-height:min(48vh,380px)}
  .hero-inner{padding:3rem 0 2.2rem}
  .hero-actions .btn{flex:1 1 auto; min-width:8.5rem}
  .section{padding:1.75rem 0}
  .footer-grid{padding:2rem 0 1.2rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .card:hover,.card:hover .card-cover img{transform:none}
}