/* mother-diversity · teal-wave · 青绿浪潮 / 白底高饱和青绿 */
:root{
  --div-accent:#14b8a6;
  --div-secondary:#0d9488;
  --div-highlight:#f59e0b;
  --div-bg:#f0fdfa;
  --div-surface:#ffffff;
  --div-text:#134e4a;
  --div-muted:#5b7c78;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;transition:color .2s,background .2s,transform .2s,box-shadow .2s,border-color .2s}

/* ── Body + wave deco ── */
body.tw-body{
  margin:0;min-height:100vh;
  background:
    radial-gradient(900px 400px at 50% -10%, rgba(20,184,166,.14), transparent 60%),
    radial-gradient(600px 300px at 95% 20%, rgba(245,158,11,.08), transparent 55%),
    var(--tw-bg)!important;
  color:var(--tw-text)!important;
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.6;
}
.tw-wave{
  position:fixed;inset:0 0 auto;height:6px;z-index:100;
  background:linear-gradient(90deg,var(--tw-secondary),var(--tw-primary) 40%,var(--tw-accent) 80%,var(--tw-primary));
  pointer-events:none;
}
body.tw-body a{color:var(--tw-primary)}
body.tw-body a:hover{color:var(--tw-secondary)}

/* ── Header: 单行 · 品牌左 · 导航中 · 搜索右 ── */
.tw-head{
  position:sticky;top:6px;z-index:90;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  border-bottom:2px solid var(--tw-line);
  box-shadow:0 4px 24px rgba(20,184,166,.1);
}
.tw-head__inner{
  position:relative;
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;gap:20px;
  padding:12px 20px;
}
.tw-brand{display:inline-flex;align-items:center;gap:10px;color:var(--tw-text)!important;flex-shrink:0}
.tw-brand:hover .tw-brand__mark{transform:scale(1.05)}
.tw-brand__mark{
  width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--tw-primary),var(--tw-secondary));
  color:#fff;font-size:16px;font-weight:900;
  box-shadow:0 6px 18px rgba(20,184,166,.35);
  transition:transform .2s;
}
.tw-brand__text{display:flex;flex-direction:column;line-height:1.2}
.tw-brand__text strong{font-size:1.1rem;font-weight:900;color:var(--tw-text)}
.tw-brand__text em{font-size:11px;font-style:normal;color:var(--tw-muted);margin-top:2px}
.tw-nav{display:flex;flex-wrap:wrap;gap:6px;flex:1;justify-content:center}
.tw-nav a{
  padding:7px 14px;border-radius:999px;
  font-size:13px;font-weight:700;
  color:var(--tw-muted)!important;
  border:1px solid transparent;
}
.tw-nav a:hover{
  color:var(--tw-primary)!important;
  background:var(--tw-surface-2);
  border-color:var(--tw-line);
}
.tw-nav a[aria-current="page"]{
  color:#fff!important;
  background:linear-gradient(135deg,var(--tw-primary),var(--tw-secondary));
  box-shadow:0 4px 14px rgba(20,184,166,.3);
}
.tw-head__tools{display:flex;align-items:center;gap:10px;flex-shrink:0}
.tw-search{
  display:flex;border:2px solid var(--tw-line);
  border-radius:999px;overflow:hidden;
  background:var(--tw-surface);
}
.tw-search input{
  width:160px;padding:8px 14px;border:0;outline:none;
  background:transparent;color:var(--tw-text);font-size:13px;
}
.tw-search input::placeholder{color:var(--tw-muted)}
.tw-search__btn{
  padding:8px 16px;border:0;cursor:pointer;font-weight:800;font-size:13px;
  background:var(--tw-accent);color:#1c1408;
}
.tw-search__btn:hover{filter:brightness(1.06)}
.tw-head__cta{
  padding:8px 16px;border-radius:999px;font-weight:800;font-size:13px;
  background:linear-gradient(135deg,var(--tw-primary),var(--tw-secondary));
  color:#fff!important;
  box-shadow:0 4px 14px rgba(20,184,166,.25);
}
.tw-head__cta:hover{transform:translateY(-1px);color:#fff!important}
.tw-burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;padding:8px;border-radius:10px;
  border:1px solid var(--tw-line);background:var(--tw-surface);cursor:pointer;
}
.tw-burger span{display:block;height:2px;background:var(--tw-primary);border-radius:2px}

/* ── Main ── */
.tw-main{max-width:1200px;margin:0 auto;padding:28px 20px 56px}

/* ── Hero: 居中品牌首屏 ── */
.tw-hero{
  position:relative;text-align:center;
  margin-bottom:32px;padding:52px 32px 44px;
  border-radius:24px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(204,251,241,.5) 100%);
  border:2px solid var(--tw-line);
  box-shadow:0 20px 50px rgba(20,184,166,.12);
  overflow:hidden;
}
.tw-hero::before{
  content:"";position:absolute;inset:auto -20% -40% -20%;height:120px;
  background:radial-gradient(ellipse at 50% 0%, rgba(20,184,166,.15), transparent 70%);
  pointer-events:none;
}
.tw-hero__content{position:relative;z-index:1;max-width:640px;margin:0 auto}
.tw-hero__eyebrow{
  display:inline-block;margin:0 0 14px;
  padding:5px 16px;border-radius:999px;
  background:rgba(245,158,11,.15);color:#b45309;
  font-size:12px;font-weight:800;letter-spacing:.08em;
}
.tw-hero h1{
  margin:0 0 16px;font-size:clamp(26px,4.5vw,40px);
  line-height:1.2;font-weight:900;color:var(--tw-text);
}
.tw-hero__desc{
  margin:0 auto 24px;font-size:16px;line-height:1.75;
  color:var(--tw-muted);max-width:520px;
}
.tw-hero__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:28px}
.tw-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 26px;border-radius:999px;font-weight:800;font-size:14px;
  transition:transform .2s,box-shadow .2s,filter .2s;
}
.tw-btn--cta{
  background:linear-gradient(135deg,var(--tw-accent),#ea580c);
  color:#1c1408!important;
  box-shadow:0 8px 22px rgba(245,158,11,.35);
}
.tw-btn--cta:hover{transform:translateY(-2px);filter:brightness(1.05);color:#1c1408!important}
.tw-btn--outline{
  background:transparent;border:2px solid var(--tw-primary);
  color:var(--tw-primary)!important;
}
.tw-btn--outline:hover{background:var(--tw-surface-2);color:var(--tw-secondary)!important}
.tw-hero__stats{
  display:flex;justify-content:center;gap:32px;margin:0;padding:0;list-style:none;
  border-top:1px solid var(--tw-line);padding-top:24px;
}
.tw-hero__stats li{display:flex;flex-direction:column;gap:4px}
.tw-hero__stats strong{font-size:20px;font-weight:900;color:var(--tw-primary)}
.tw-hero__stats span{font-size:12px;color:var(--tw-muted);font-weight:600}

/* ── Category pills ── */
.tw-tax{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
  margin-bottom:36px;
}
.tw-tax__item{
  display:flex;align-items:center;justify-content:center;
  padding:14px 12px;border-radius:14px;
  background:var(--tw-surface);
  border:2px solid var(--tw-line);
  font-weight:800;font-size:14px;
  color:var(--tw-text)!important;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.tw-tax__item:hover{
  border-color:var(--tw-primary);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(20,184,166,.15);
  color:var(--tw-primary)!important;
}
.tw-tax__item--all{
  background:linear-gradient(135deg,var(--tw-primary),var(--tw-secondary));
  border-color:transparent;color:#fff!important;
}
.tw-tax__item--all:hover{color:#fff!important;border-color:transparent}

/* ── Sections ── */
.tw-section{margin-bottom:40px}
.tw-section__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-bottom:18px;
}
.tw-section__head h2{
  margin:0;font-size:20px;font-weight:900;color:var(--tw-text);
  display:flex;align-items:center;gap:10px;
}
.tw-section__bar{
  width:4px;height:22px;border-radius:4px;
  background:linear-gradient(180deg,var(--tw-primary),var(--tw-secondary));
}
.tw-section__bar--hot{background:linear-gradient(180deg,var(--tw-accent),#ea580c)}
.tw-section__more{font-size:14px;font-weight:700;color:var(--tw-primary)!important}
.tw-section__more:hover{color:var(--tw-secondary)!important}

/* ── Grids: 四列 / 三列 ── */
.tw-grid{display:grid;gap:18px}
.tw-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tw-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ── Landscape cards: 16:9 封面 + 底部叠字 ── */
.tw-card{
  display:flex;flex-direction:column;
  background:var(--tw-surface);
  border-radius:16px;overflow:hidden;
  border:2px solid var(--tw-line);
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.tw-card:hover{
  transform:translateY(-4px);
  border-color:var(--tw-primary);
  box-shadow:0 16px 40px rgba(20,184,166,.18);
}
.tw-card__thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#ecfdf5}
.tw-card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.tw-card:hover .tw-card__thumb img{transform:scale(1.06)}
.tw-card__hot{
  position:absolute;top:10px;right:10px;z-index:2;
  padding:3px 10px;border-radius:999px;
  background:var(--tw-accent);color:#1c1408;
  font-size:11px;font-weight:900;
  box-shadow:0 2px 8px rgba(245,158,11,.45);
}
.tw-card__play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(19,78,74,.45);color:#fff;
  font-size:32px;opacity:0;transition:opacity .25s;
}
.tw-card:hover .tw-card__play{opacity:1}
.tw-card__overlay{
  position:absolute;inset:auto 0 0;padding:28px 14px 12px;
  background:linear-gradient(0deg,rgba(19,78,74,.88) 0%,transparent 100%);
  color:#fff;
}
.tw-card__overlay h3{
  margin:0 0 4px;font-size:14px;line-height:1.35;font-weight:800;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tw-card__overlay p{margin:0;font-size:11px;opacity:.85;display:flex;gap:8px;flex-wrap:wrap}
.tw-card__watch{
  display:block;text-align:center;padding:10px;
  font-size:13px;font-weight:800;
  background:var(--tw-surface-2);color:var(--tw-primary)!important;
  border-top:1px solid var(--tw-line);
}
.tw-card__watch:hover{background:var(--tw-primary);color:#fff!important}

/* ── Hot rail: 横滑 ── */
.tw-rail{
  overflow-x:auto;padding-bottom:12px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--tw-primary) var(--tw-surface-2);
}
.tw-rail__track{display:flex;gap:14px;min-width:min-content;padding:4px 2px}
.tw-rail .tw-card{flex:0 0 260px;min-width:260px}
.tw-rail .tw-card__watch{padding:8px;font-size:12px}

/* ── Mini cards (compact) ── */
.tw-mini{
  display:grid;grid-template-columns:80px 1fr;gap:10px;
  padding:10px;border-radius:12px;
  background:var(--tw-surface);
  border:2px solid var(--tw-line);
  transition:border-color .2s,transform .2s;
}
.tw-mini:hover{border-color:var(--tw-primary);transform:scale(1.02)}
.tw-mini__cover{position:relative;display:block;border-radius:8px;overflow:hidden;aspect-ratio:3/4;background:#ecfdf5}
.tw-mini__cover img{width:100%;height:100%;object-fit:cover}
.tw-mini__badge{
  position:absolute;left:4px;top:4px;
  padding:2px 7px;border-radius:999px;
  background:var(--tw-accent);color:#1c1408;
  font-size:10px;font-weight:900;
}
.tw-mini__body{display:flex;flex-direction:column;justify-content:center;min-width:0}
.tw-mini__body h3{
  margin:0 0 4px;font-size:13px;line-height:1.3;font-weight:800;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tw-mini__body h3 a{color:var(--tw-text)!important}
.tw-mini__body h3 a:hover{color:var(--tw-primary)!important}
.tw-mini__body p{margin:0 0 6px;font-size:11px;color:var(--tw-muted)}
.tw-mini__go{
  align-self:flex-start;padding:4px 12px;border-radius:999px;
  font-size:11px;font-weight:800;
  background:var(--tw-primary);color:#fff!important;
}
.tw-mini__go:hover{background:var(--tw-secondary);color:#fff!important}

/* ── Category page ── */
.tw-cat-hero{
  text-align:center;margin-bottom:28px;padding:36px 28px;
  border-radius:20px;
  background:linear-gradient(135deg,var(--tw-primary),var(--tw-secondary));
  color:#fff;
  box-shadow:0 16px 40px rgba(20,184,166,.25);
}
.tw-cat-hero h1{margin:8px 0;font-size:clamp(24px,3.5vw,34px);font-weight:900}
.tw-cat-hero p{margin:0 auto;max-width:560px;line-height:1.7;opacity:.9;font-size:15px}
.tw-crumb{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:12px;font-size:13px;color:var(--tw-muted)}
.tw-cat-hero .tw-crumb{color:rgba(255,255,255,.75)}
.tw-crumb a{color:var(--tw-accent)!important;font-weight:600}
.tw-cat-hero .tw-crumb a{color:#fff!important;text-decoration:underline}
.tw-crumb span{opacity:.5}

/* ── Filters: 横向芯片条 ── */
.tw-filter{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin-bottom:24px;padding:16px 18px;
  border-radius:16px;
  background:var(--tw-surface);
  border:2px solid var(--tw-line);
}
.tw-filter__group{display:flex;align-items:center;gap:8px;flex:1;min-width:180px}
.tw-filter__label{
  flex-shrink:0;font-size:12px;font-weight:800;
  color:var(--tw-primary);text-transform:uppercase;letter-spacing:.04em;
}
.tw-filter__input,.tw-filter__select{
  flex:1;min-width:120px;
  padding:9px 14px;border-radius:999px;
  border:2px solid var(--tw-line);
  background:var(--tw-surface-2);color:var(--tw-text);
  font-size:14px;outline:none;
}
.tw-filter__input:focus,.tw-filter__select:focus{border-color:var(--tw-primary)}

/* ── Play page: 播放器左 + 侧栏右 ── */
.tw-play{
  display:grid;grid-template-columns:1.6fr 1fr;gap:24px;
  margin-bottom:32px;
}
.tw-play__frame{
  border-radius:16px;overflow:hidden;
  background:#000;
  border:3px solid var(--tw-primary);
  box-shadow:0 16px 48px rgba(20,184,166,.2);
}
.tw-play__frame video{width:100%;aspect-ratio:16/9;display:block;background:#000}
.tw-play__hint{margin:10px 0 0;font-size:13px;color:var(--tw-muted);text-align:center}
.tw-play__side{
  padding:22px;border-radius:16px;
  background:var(--tw-surface);
  border:2px solid var(--tw-line);
}
.tw-play__poster{
  position:relative;border-radius:12px;overflow:hidden;
  margin-bottom:16px;max-width:200px;
  box-shadow:0 10px 30px rgba(20,184,166,.15);
}
.tw-play__poster img{width:100%;aspect-ratio:3/4;object-fit:cover}
.tw-play__badge{
  position:absolute;top:8px;left:8px;
  padding:4px 10px;border-radius:999px;
  background:var(--tw-accent);color:#1c1408;
  font-size:11px;font-weight:900;
}
.tw-play__side h1{
  margin:0 0 14px;font-size:clamp(20px,2.5vw,26px);
  font-weight:900;color:var(--tw-text);line-height:1.25;
}
.tw-play__meta{
  margin:0 0 14px;padding:0;list-style:none;
  display:grid;gap:8px;
}
.tw-play__meta li{
  display:flex;justify-content:space-between;gap:12px;
  padding:6px 0;border-bottom:1px dashed var(--tw-line);
  font-size:13px;
}
.tw-play__meta span{color:var(--tw-muted);font-weight:600}
.tw-play__meta strong{color:var(--tw-text);text-align:right;font-weight:700}
.tw-play__desc{margin:0 0 18px;color:var(--tw-muted);line-height:1.75;font-size:14px}
.tw-prose{
  padding:22px 24px;border-radius:16px;
  background:var(--tw-surface);color:var(--tw-muted);
  line-height:1.85;font-size:15px;
  border-left:4px solid var(--tw-accent);
}

/* ── Footer: 三列居中 ── */
.tw-foot{
  position:relative;margin-top:48px;
  background:linear-gradient(180deg,#ecfdf5,var(--tw-bg));
  border-top:3px solid var(--tw-primary);
  padding:0 20px 24px;
}
.tw-foot__wave{
  height:8px;margin:0 0 32px;
  background:linear-gradient(90deg,var(--tw-secondary),var(--tw-primary) 50%,var(--tw-accent));
}
.tw-foot__inner{
  max-width:1200px;margin:0 auto 24px;
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;
}
.tw-foot__brand p{margin:12px 0 0;font-size:13px;line-height:1.7;color:var(--tw-muted);max-width:360px}
.tw-brand--foot .tw-brand__mark{width:34px;height:34px;font-size:14px}
.tw-brand--foot strong{font-size:1rem;color:var(--tw-text)}
.tw-foot__links h4{
  margin:0 0 12px;font-size:14px;font-weight:800;color:var(--tw-text);
  padding-bottom:8px;border-bottom:2px solid var(--tw-accent);
}
.tw-foot__links a{
  display:block;padding:5px 0;font-size:13px;
  color:var(--tw-muted)!important;
}
.tw-foot__links a:hover{color:var(--tw-primary)!important;padding-left:4px}
.tw-foot__copy{
  max-width:1200px;margin:0 auto;padding-top:18px;
  border-top:1px solid var(--tw-line);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  font-size:12px;color:var(--tw-muted);
}

/* ── Mobile nav ── */
.tw-nav.open{
  position:absolute;left:20px;right:20px;top:100%;
  display:flex;flex-direction:column;
  padding:12px;margin-top:8px;
  border-radius:14px;
  background:var(--tw-surface);
  border:2px solid var(--tw-line);
  box-shadow:0 16px 40px rgba(20,184,166,.15);
}
.tw-head{position:sticky}

/* ── Responsive ── */
@media (max-width:1024px){
  .tw-grid--4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tw-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tw-play{grid-template-columns:1fr}
  .tw-play__poster{max-width:160px}
}
@media (max-width:768px){
  .tw-head__inner{flex-wrap:wrap;padding:10px 16px}
  .tw-brand{flex:1}
  .tw-nav{display:none;order:4;width:100%}
  .tw-nav.open{display:flex}
  .tw-burger{display:flex;margin-left:4px}
  .tw-search input{width:100px}
  .tw-head__cta{display:none}
  .tw-tax{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tw-grid--4,.tw-grid--3{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tw-hero{padding:36px 20px 32px}
  .tw-hero__stats{gap:20px}
  .tw-foot__inner{grid-template-columns:1fr;gap:24px}
  .tw-foot__copy{flex-direction:column;text-align:center}
  .tw-filter{flex-direction:column;align-items:stretch}
  .tw-filter__group{min-width:0}
}
@media (max-width:480px){
  .tw-main{padding:16px 14px 40px}
  .tw-grid--4,.tw-grid--3{grid-template-columns:1fr}
  .tw-search{display:none}
  .tw-hero__stats{flex-direction:column;gap:12px}
  .tw-rail .tw-card{flex:0 0 220px;min-width:220px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}