/* 青瓷墨影 · 布局修正版（对齐/间距/层级） */
:root{
  --qc-bg:#e8eeea;
  --qc-surface:#ffffff;
  --qc-ink:#14221f;
  --qc-muted:#5c6f68;
  --qc-line:#c9d6cf;
  --qc-teal:#0d7377;
  --qc-teal-deep:#0a5c5f;
  --qc-ember:#c45c26;
  --qc-mist:rgba(13,115,119,.1);
  --qc-font:"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
  --qc-display:"Songti SC","STSong","Noto Serif SC","SimSun",serif;
  --qc-container:80rem; /* 对齐 max-w-7xl */
}

html{
  scrollbar-width:thin;
  scrollbar-color:#9bb5af #e8eeea;
}
html::-webkit-scrollbar{width:10px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{background:#9bb5af;border-radius:999px;border:2px solid transparent;background-clip:padding-box}
html::-webkit-scrollbar-thumb:hover{background:#0d7377}

body{
  font-family:var(--qc-font)!important;
  color:var(--qc-ink)!important;
  background:
    radial-gradient(720px 320px at 12% -6%,rgba(13,115,119,.1),transparent 60%),
    linear-gradient(180deg,#f3f7f4 0%,var(--qc-bg) 100%)!important;
  background-attachment:scroll;
  overflow-x:hidden;
}

/* 去掉干扰视觉的漂浮球 */
.dynamic-bg{display:none!important}

/* ——— 头部：品牌左 / 导航中 / 操作右 ——— */
header.sticky{
  background:rgba(255,255,255,.94)!important;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:none!important;
  border-bottom:1px solid var(--qc-line);
  z-index:50;
}
header .max-w-7xl > .h-16,
header .h-16.flex.justify-between{
  height:64px!important;
  min-height:64px;
  display:grid!important;
  grid-template-columns:minmax(0,1.1fr) auto minmax(0,1.1fr);
  align-items:center!important;
  column-gap:1rem;
  justify-content:initial!important;
}
/* 品牌贴左 */
header .h-16 > a.flex.items-center{
  justify-self:start;
  min-width:0;
}
header img.h-8.w-8{
  border-radius:6px!important;
  flex-shrink:0;
  box-shadow:0 0 0 1px rgba(13,115,119,.22);
}
header span.text-xl.font-bold{
  font-family:var(--qc-display)!important;
  font-weight:400!important;
  letter-spacing:.06em;
  color:var(--qc-ink)!important;
  line-height:1.2;
  white-space:nowrap;
}
/* 导航居中，保留间距（勿清零 space-x；勿强制 display，以免盖掉 hidden） */
header nav[aria-label="主导航"]{
  justify-self:center;
  align-items:center!important;
  gap:0.35rem!important;
}
@media (min-width:768px){
  header nav[aria-label="主导航"].hidden.md\:flex{
    display:flex!important;
  }
}
header nav.space-x-8 > :not([hidden]) ~ :not([hidden]){
  margin-left:0.15rem!important;
}
header nav a{
  display:inline-flex!important;
  align-items:center!important;
  gap:.35rem!important;
  padding:.45rem .85rem!important;
  border-radius:4px!important;
  background:transparent!important;
  color:var(--qc-muted)!important;
  line-height:1.2;
  position:relative;
  white-space:nowrap;
}
header nav a:hover{
  color:var(--qc-teal)!important;
  background:var(--qc-mist)!important;
}
header nav a.text-blue-600,
header nav a.bg-blue-50{
  color:var(--qc-teal)!important;
  background:transparent!important;
  font-weight:700!important;
}
header nav a.text-blue-600::after,
header nav a.bg-blue-50::after{
  content:"";
  position:absolute;
  left:.85rem;right:.85rem;bottom:.2rem;
  height:2px;
  background:var(--qc-teal);
  border-radius:1px;
}
/* 搜索+登录贴右（仅桌面显示，不覆盖 hidden） */
header .h-16 > div.hidden.md\:flex{
  justify-self:end;
  align-items:center!important;
  gap:.75rem!important;
}
@media (min-width:768px){
  header .h-16 > div.hidden.md\:flex{
    display:flex!important;
  }
}
header .h-16 > div.hidden.md\:flex.space-x-4 > :not([hidden]) ~ :not([hidden]){
  margin-left:0!important;
}
header form{display:flex;align-items:center;position:relative}
header form input[type=search]{
  height:38px!important;
  width:14rem!important;
  max-width:100%;
  background:#f4f8f5!important;
  border:1px solid var(--qc-line)!important;
  border-radius:6px!important;
  box-shadow:none!important;
  color:var(--qc-ink)!important;
  padding-top:0!important;
  padding-bottom:0!important;
}
header form input[type=search]:focus{
  border-color:var(--qc-teal)!important;
  outline:none!important;
  box-shadow:0 0 0 3px rgba(13,115,119,.12)!important;
}
header form svg.absolute{
  top:50%!important;
  transform:translateY(-50%);
}
header a.bg-blue-600{
  display:inline-flex!important;
  align-items:center!important;
  height:38px!important;
  padding:0 1rem!important;
  background:var(--qc-teal)!important;
  border-radius:6px!important;
  line-height:1;
  flex-shrink:0;
}
header a.bg-blue-600:hover{background:var(--qc-teal-deep)!important}
/* 汉堡仅移动端；桌面保持 hidden */
header .h-16 > button.md\:hidden{
  justify-self:end;
}

/* 页面底色：只动灰底，白底区块保持干净 */
.min-h-screen.bg-gray-50{background:transparent!important}
section.bg-white{background:#f7faf8!important}

/* ——— Hero：与下方容器左缘对齐 ——— */
section.bg-gradient-to-r.from-blue-600.to-purple-600.text-white{
  position:relative;
  overflow:hidden;
  padding:3.75rem 0!important;
  background:
    linear-gradient(105deg,rgba(10,40,38,.92) 0%,rgba(13,115,119,.72) 48%,rgba(20,34,31,.35) 100%),
    url("/img/12.jpg") center/cover no-repeat!important;
  color:#fff!important;
}
section.bg-gradient-to-r.from-blue-600.to-purple-600.text-white > .max-w-7xl{
  width:100%;
  max-width:80rem;
}
section.bg-gradient-to-r.from-blue-600.to-purple-600.text-white .text-center{
  text-align:left!important;
  max-width:38rem;
  margin:0!important;
}
section.bg-gradient-to-r.from-blue-600.to-purple-600.text-white h1{
  font-family:var(--qc-display)!important;
  font-weight:400!important;
  letter-spacing:.05em;
  line-height:1.25!important;
  margin-bottom:.85rem!important;
  text-shadow:0 10px 30px rgba(0,0,0,.35);
}
section.bg-gradient-to-r.from-blue-600.to-purple-600.text-white p{
  color:rgba(255,255,255,.88)!important;
  max-width:34rem;
  margin-bottom:1.35rem!important;
  line-height:1.65;
}
section.bg-gradient-to-r.from-blue-600.to-purple-600.text-white .justify-center{
  justify-content:flex-start!important;
  gap:.75rem!important;
  flex-wrap:wrap;
}
section.bg-gradient-to-r.from-blue-600.to-purple-600.text-white a.bg-white{
  background:var(--qc-ember)!important;
  color:#fff!important;
  border-radius:6px!important;
  padding:.7rem 1.25rem!important;
}
section.bg-gradient-to-r.from-blue-600.to-purple-600.text-white a.bg-white:hover{
  background:#a84c1e!important;
  color:#fff!important;
}
section.bg-gradient-to-r.from-blue-600.to-purple-600.text-white a.border-2{
  border-radius:6px!important;
  border-color:rgba(255,255,255,.75)!important;
  color:#fff!important;
  padding:.7rem 1.25rem!important;
}
section.bg-gradient-to-r.from-blue-600.to-purple-600.text-white a.border-2:hover{
  background:rgba(255,255,255,.12)!important;
  color:#fff!important;
}

/* 统计条：单独样式，避免吃到 Hero 规则 */
section.bg-gradient-to-r.from-purple-600.to-blue-600.py-16{
  padding:2rem 0!important;
  background:linear-gradient(90deg,#0a3d3f,#0d7377 60%,#164a42)!important;
  background-image:linear-gradient(90deg,#0a3d3f,#0d7377 60%,#164a42)!important;
}
section.bg-gradient-to-r.from-purple-600.to-blue-600.py-16 .text-center{
  text-align:center!important;
  max-width:none;
  margin:0 auto!important;
}
section.bg-gradient-to-r.from-purple-600.to-blue-600.py-16 .text-4xl{
  font-family:var(--qc-display)!important;
  font-weight:400!important;
}
section.bg-gradient-to-r.from-purple-600.to-blue-600.py-16 .text-blue-100{
  color:rgba(255,255,255,.75)!important;
}

/* ——— 区块：统一上下间距与标题对齐 ——— */
section.py-12{padding-top:2.5rem!important;padding-bottom:2.5rem!important}
/* 相邻白底区块之间避免「双倍空隙」感 */
section.py-12 + section.py-12{padding-top:1.75rem!important}
section h2.text-3xl{
  font-family:var(--qc-display)!important;
  font-weight:400!important;
  letter-spacing:.06em;
  color:var(--qc-ink)!important;
  line-height:1.25;
}
/* 居中标题（剧集分类） */
section h2.text-center{
  display:block!important;
  width:100%;
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
section h2.text-center::after{
  content:"";
  display:block;
  width:2.75rem;height:2px;
  margin:.7rem auto 0;
  background:linear-gradient(90deg,var(--qc-teal),var(--qc-ember));
}
/* 左对齐区块头 */
section .flex.items-center.mb-8{
  width:100%;
  align-items:center!important;
  gap:.5rem;
  border-bottom:1px solid var(--qc-line);
  padding-bottom:.75rem;
  margin-bottom:1.5rem!important;
}
section .flex.items-center.mb-8 h2{
  display:inline!important;
  margin:0!important;
}
section .flex.items-center.mb-8 h2::after{display:none!important}
section .flex.items-center.mb-8 svg{
  color:var(--qc-teal)!important;
  flex-shrink:0;
}

/* ——— 分类瓷砖：网格对齐 ——— */
section .grid.grid-cols-2.md\:grid-cols-5{
  align-items:stretch;
  gap:1rem!important;
  width:100%;
}
section .grid.grid-cols-2.md\:grid-cols-5 > a.bg-white.p-6,
section .grid > a.bg-white.p-6.rounded-lg.shadow-md{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-height:68px;
  width:100%;
  box-sizing:border-box;
  background:#fff!important;
  border:1px solid var(--qc-line)!important;
  border-radius:8px!important;
  box-shadow:none!important;
  position:relative;
  overflow:hidden;
  text-align:left!important;
  padding:.9rem 1rem .9rem 1.2rem!important;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
section .grid > a.bg-white.p-6.rounded-lg.shadow-md::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--qc-teal);
}
section .grid > a.bg-white.p-6.rounded-lg.shadow-md:hover{
  transform:translateY(-2px);
  border-color:var(--qc-teal)!important;
  box-shadow:0 10px 24px rgba(20,34,31,.08)!important;
}
section .grid > a.bg-white.p-6 .text-2xl{display:none!important}
section .grid > a.bg-white.p-6 h3{
  font-family:var(--qc-display)!important;
  font-weight:400!important;
  letter-spacing:.04em;
  margin:0!important;
  color:var(--qc-ink)!important;
  font-size:1.05rem!important;
  line-height:1.3;
}
section .grid > a.bg-white.p-6:hover h3{color:var(--qc-teal)!important}

/* ——— 影片卡片：等高校齐，文案截断 ——— */
.grid:has(.video-card){
  align-items:stretch!important;
}
.grid:has(.video-card) > *{
  height:100%;
  min-width:0;
}
.video-card{
  background:#fff!important;
  border:1px solid var(--qc-line)!important;
  border-radius:10px!important;
  box-shadow:none!important;
  overflow:hidden!important;
  transition:transform .22s ease,box-shadow .22s ease!important;
  height:100%;
  display:flex!important;
  flex-direction:column;
}
.video-card:hover,
.video-card:focus-within{
  transform:translateY(-3px)!important;
  box-shadow:0 14px 28px rgba(20,34,31,.1)!important;
}
a.video-card-link{
  display:flex!important;
  flex-direction:column;
  height:100%;
  color:inherit!important;
  text-decoration:none!important;
  -webkit-tap-highlight-color:transparent;
}
.video-card > .relative,
.video-card-link > .relative{
  border-radius:0!important;
  overflow:hidden;
  aspect-ratio:auto!important;
  box-shadow:none!important;
  background:#101c1a;
  flex-shrink:0;
}
.video-card img.h-48{
  height:12rem!important;
  width:100%!important;
  object-fit:cover;
  display:block;
}
.video-card .absolute.inset-0{display:none!important}
.video-card .absolute.bottom-2.right-2{
  background:rgba(10,40,38,.78)!important;
  border-radius:4px!important;
  line-height:1.2;
  padding:.15rem .4rem!important;
  font-size:.75rem!important;
  pointer-events:none;
}
.video-card .p-4{
  padding:1rem!important;
  background:#fff!important;
  flex:1 1 auto;
  display:flex!important;
  flex-direction:column;
  min-height:0;
}
.video-card h3{
  font-family:var(--qc-display)!important;
  font-weight:400!important;
  letter-spacing:.03em;
  color:var(--qc-ink)!important;
  font-size:1.05rem!important;
  line-height:1.35!important;
  margin-bottom:.45rem!important;
  min-height:2.7em;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}
.video-card-link:hover h3,
.video-card-link:focus-visible h3,
.video-card a:hover h3{color:var(--qc-teal)!important}
.video-card p.text-gray-600,
.video-card p.line-clamp-2{
  color:var(--qc-muted)!important;
  min-height:2.6em;
  margin-bottom:.75rem!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
  line-height:1.45!important;
}
.video-card .p-4 > .flex.items-center.justify-between{
  margin-top:auto;
  align-items:center!important;
  gap:.5rem;
  flex-wrap:nowrap;
  min-height:1.5rem;
}
.video-card .p-4 > .flex.items-center.justify-between .flex.items-center{
  align-items:center!important;
  gap:.35rem!important;
  flex-wrap:nowrap;
  min-width:0;
}
.video-card .p-4 > .flex.items-center.justify-between svg{
  width:14px;height:14px;
  flex-shrink:0;
  vertical-align:middle;
}
.video-card .bg-blue-100{
  background:var(--qc-mist)!important;
  color:var(--qc-teal-deep)!important;
  border-radius:4px!important;
  white-space:nowrap;
  flex-shrink:0;
  font-size:.75rem!important;
  padding:.15rem .45rem!important;
}

/* ——— 分类页 ——— */
.category-page{padding-bottom:3rem}
.category-page h1{
  font-family:var(--qc-display)!important;
  font-weight:400!important;
  letter-spacing:.05em;
}
.category-page .bg-white.rounded-lg,
.category-page .bg-white.shadow-md,
.category-page .bg-white.shadow-sm{
  background:#fff!important;
  border:1px solid var(--qc-line)!important;
  box-shadow:none!important;
}
/* 筛选白盒：上下内边距均衡 */
.category-page .bg-white.rounded-lg.shadow-md.p-6{
  padding:1.25rem 1.5rem!important;
}
.category-page .bg-white.rounded-lg.shadow-md.p-4{
  padding:.85rem 1.25rem!important;
}
.category-page .bg-white.rounded-lg.shadow-md.p-6 .flex.flex-wrap{
  gap:.5rem!important;
  margin-top:.35rem;
}
.category-page button.bg-blue-600{
  background:var(--qc-teal)!important;
  border-radius:6px!important;
}
.category-page button.bg-gray-100,
.category-page button.bg-white{
  background:#f4f8f5!important;
  border:1px solid var(--qc-line)!important;
  color:var(--qc-ink)!important;
  border-radius:6px!important;
}
.category-page button.bg-gray-100:hover{
  border-color:var(--qc-teal)!important;
  color:var(--qc-teal)!important;
  background:var(--qc-mist)!important;
}
/* 分类列表网格不被父级裁切 */
.category-page .grid{
  overflow:visible!important;
}
.category-page .video-card{
  min-height:0;
}
.category-pagination__inner{
  background:#fff!important;
  border:1px solid var(--qc-line)!important;
  border-radius:10px!important;
  box-shadow:none!important;
}
.category-pagination__btn{
  border-color:var(--qc-line)!important;
  background:#f4f8f5!important;
  border-radius:6px!important;
}
.category-pagination__btn--active{
  background:var(--qc-teal)!important;
  border-color:var(--qc-teal)!important;
  color:#fff!important;
}

/* ——— 播放页 ——— */
.video-player{
  border-radius:10px!important;
  box-shadow:0 16px 36px rgba(10,30,28,.22)!important;
  border:1px solid rgba(13,115,119,.25);
  overflow:hidden;
}

/* 颜色映射（不改布局） */
.text-blue-600,
.text-blue-800,
.text-blue-900,
.hover\:text-blue-600:hover,
.group:hover .group-hover\:text-blue-600{color:var(--qc-teal)!important}
.bg-blue-50,.bg-blue-100{background:var(--qc-mist)!important}
.bg-blue-500,
.hover\:bg-blue-700:hover{background:var(--qc-teal)!important}
/* 登录/主按钮保留，但不全局扫所有 bg-blue-600 以免破坏筛选条布局细节 */
a.bg-blue-600,button.bg-blue-600{background:var(--qc-teal)!important}
.from-blue-600{--tw-gradient-from:#0d7377 var(--tw-gradient-from-position)!important}
.to-blue-600{--tw-gradient-to:#0a5c5f var(--tw-gradient-to-position)!important}
.from-purple-600{--tw-gradient-from:#0a3d3f var(--tw-gradient-from-position)!important}
.to-purple-600{--tw-gradient-to:#0d7377 var(--tw-gradient-to-position)!important}
.text-purple-600,.text-purple-800,.text-purple-900{color:var(--qc-teal-deep)!important}
.bg-purple-50,.bg-purple-100{background:var(--qc-mist)!important}
.focus\:ring-blue-500:focus,
.focus\:border-blue-500:focus{
  --tw-ring-color:rgba(13,115,119,.35)!important;
  border-color:var(--qc-teal)!important;
}
:focus-visible{outline-color:var(--qc-teal)!important}
input[type=range]::-webkit-slider-thumb,
input[type=range]::-moz-range-thumb{background:var(--qc-teal)!important}

/* ——— 底部 ——— */
footer.bg-gray-900{
  background:#102623!important;
  color:rgba(244,248,245,.9)!important;
  border-top:3px solid var(--qc-teal);
  margin-top:0;
}
footer .text-gray-300{color:rgba(232,238,232,.7)!important}
footer a:hover{color:#8fdadf!important}
footer .border-gray-800{border-color:rgba(197,212,204,.18)!important}
footer span.text-xl.font-bold{
  font-family:var(--qc-display)!important;
  font-weight:400!important;
  letter-spacing:.06em;
}
footer img.rounded-full{border-radius:6px!important}

@media (max-width:767px){
  header .max-w-7xl > .h-16,
  header .h-16.flex.justify-between{
    display:flex!important;
    grid-template-columns:none;
  }
  section.bg-gradient-to-r.from-blue-600.to-purple-600.text-white{
    padding:2.75rem 0!important;
  }
  section.bg-gradient-to-r.from-blue-600.to-purple-600.text-white h1{
    font-size:1.75rem!important;
  }
  header button.md\:hidden{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    width:40px;height:40px;
    border-radius:6px;
    color:var(--qc-ink);
  }
  header nav a{padding:.35rem .45rem!important}
  header nav a.text-blue-600::after,
  header nav a.bg-blue-50::after{left:.45rem;right:.45rem}
  .video-card .p-4 > .flex.items-center.justify-between{
    flex-wrap:wrap;
  }
}

@media (hover:none){
  .video-card:hover{transform:none!important;box-shadow:none!important}
  .video-card:active{transform:translateY(-1px)!important}
}
@media (prefers-reduced-motion:reduce){
  .video-card,.video-card:hover,.video-card:focus-within{transition:none!important;transform:none!important}
}