/* =========================================================
   全新设计系统 v2 — 透明框体 + 绿色主题
   原则：
   - 内容大框：不要实心黑/灰底（去掉 zy-bgcolor / zy-bggray）
   - 只用细边框 + 极淡半透明层
   - 卡片不套框、不套黑底
   - 全站统一圆角、间距、网格
   ========================================================= */

:root {
  /* 页面底色（唯一允许的深色大底） */
  --ds-page: #0e1410;
  --ds-page-soft: #121a15;

  /* 主题绿 */
  --ds-green: #00cc4c;
  --ds-green-soft: #3ddc7a;
  --ds-green-rgb: 0, 204, 76;
  --ds-green-line: rgba(0, 204, 76, 0.22);
  --ds-green-line-strong: rgba(0, 204, 76, 0.42);
  --ds-green-fill: rgba(0, 204, 76, 0.08);
  --ds-green-fill-hover: rgba(0, 204, 76, 0.14);

  /* 文字 */
  --ds-text: rgba(255, 255, 255, 0.92);
  --ds-text-muted: rgba(200, 220, 208, 0.62);
  --ds-text-dim: rgba(200, 220, 208, 0.42);

  /* 框体：透明为主，绝不用 zy-bgcolor 实心 */
  --ds-panel-bg: transparent;
  --ds-panel-bg-soft: rgba(255, 255, 255, 0.03);
  --ds-panel-border: 1px solid var(--ds-green-line);
  --ds-panel-border-strong: 1px solid var(--ds-green-line-strong);
  --ds-chip-bg: rgba(255, 255, 255, 0.04);
  --ds-chip-border: 1px solid rgba(255, 255, 255, 0.10);

  /* 圆角 / 间距 */
  --ds-radius-panel: 12px;
  --ds-radius-head: 8px;
  --ds-radius-card: 8px;
  --ds-radius-chip: 6px;
  --ds-radius-pic: 8px;
  --ds-gap-section: 18px;
  --ds-gap-grid: 12px;
  --ds-pad-panel: 16px;
  --ds-container-max: 1280px;
  --ds-container-pad: clamp(12px, 2.5vw, 22px);
}

/* ========== 页面底 ========== */
html, body.body {
  background: var(--ds-page) !important;
  background-color: var(--ds-page) !important;
  color: var(--ds-text) !important;
}
body.body .main {
  background: transparent !important;
  background-color: transparent !important;
}
body.body .container {
  width: 100% !important;
  max-width: var(--ds-container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--ds-container-pad) !important;
  padding-right: var(--ds-container-pad) !important;
  box-sizing: border-box !important;
}

/* ========== 全局：所有内容框去掉实心黑底 ========== */
body.body .hub-section,
body.body .vod-category-panel,
body.body .vod-list-page-panel,
body.body .search-content-panel,
body.body .play-like-section,
body.body #hot-keywords,
body.body #search-hot-keywords,
body.body .home-keywords-panel,
body.body .home-novel-panel,
body.body .block.category-con,
body.body .category-con,
body.body .a-tit,
body.body .home-list-heading,
body.body .footer-block,
body.body .footer .footer-block,
body.body .res,
body.body .search-con,
body.body .playbox,
body.body .player-info,
body.body .jisu,
body.body .xianlu,
body.body .movbox {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* 统一内容大框：只有边框 + 极淡半透明，无实心底 */
body.body .hub-section,
body.body .vod-category-panel,
body.body .vod-list-page-panel,
body.body .search-content-panel,
body.body .play-like-section,
body.body #hot-keywords,
body.body #search-hot-keywords {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 0 var(--ds-gap-section) !important;
  padding: var(--ds-pad-panel) !important;
  border: var(--ds-panel-border) !important;
  border-radius: var(--ds-radius-panel) !important;
  background: var(--ds-panel-bg-soft) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* 左侧细绿条装饰 */
body.body .hub-section::before,
body.body .vod-category-panel::before,
body.body .vod-list-page-panel::before,
body.body #hot-keywords::before,
body.body #search-hot-keywords::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 14px !important;
  bottom: 14px !important;
  width: 2px !important;
  border-radius: 0 2px 2px 0 !important;
  background: var(--ds-green) !important;
  opacity: 0.85 !important;
  pointer-events: none !important;
}

/* 标题栏：透明 + 左边线，不套实心框 */
body.body .hub-section-head,
body.body .a-tit.home-list-heading,
body.body .home-list-heading,
body.body .ds-panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 40px !important;
  margin: 0 0 14px !important;
  padding: 0 10px 0 12px !important;
  border: none !important;
  border-left: 3px solid var(--ds-green) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
body.body .hub-section-head h1,
body.body .hub-section-head h2,
body.body .a-tit.home-list-heading h1,
body.body .home-list-heading h1,
body.body .home-list-heading h2 {
  margin: 0 !important;
  color: var(--ds-text) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  background: transparent !important;
}
body.body .hub-section-head > a,
body.body .hub-section-head .hub-section-actions a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 11px !important;
  border: 1px solid var(--ds-green-line) !important;
  border-radius: var(--ds-radius-chip) !important;
  background: transparent !important;
  color: var(--ds-green) !important;
  font-size: 12px !important;
  text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s !important;
}
body.body .hub-section-head > a:hover {
  background: var(--ds-green-fill) !important;
  border-color: var(--ds-green) !important;
}

/* ========== 视频网格 ========== */
body.body .category-con .a-con,
body.body .home-latest-video-list .a-con,
body.body .search-con .a-con,
body.body .play-like-section .category-con .a-con,
body.body .search-content-panel .search-con > .a-con {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: var(--ds-gap-grid) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* 卡片：彻底透明，无黑底 */
body.body .category-con .a-con-inner,
body.body .home-latest-video-list .a-con-inner,
body.body .search-con .a-con-inner {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.body .category-con .pic,
body.body .home-latest-video-list .pic,
body.body .search-con .pic {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  border-radius: var(--ds-radius-pic) !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.04) !important; /* 仅占位，非黑块 */
}
body.body .category-con .pic img,
body.body .home-latest-video-list .pic img,
body.body .search-con .pic img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}
body.body .category-con .s1,
body.body .home-latest-video-list .s1 {
  margin-top: 7px !important;
  padding: 0 1px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: var(--ds-text) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  background: transparent !important;
}
body.body .category-con .s1 a { color: inherit !important; text-decoration: none !important; }
body.body .category-con .vod-time {
  margin-top: 3px !important;
  padding: 0 1px !important;
  font-size: 11px !important;
  color: var(--ds-text-muted) !important;
  background: transparent !important;
}
body.body .category-con .s2 {
  margin-top: 5px !important;
  padding: 0 1px 2px !important;
  background: transparent !important;
}
body.body .category-con .s2 a {
  display: inline-block !important;
  padding: 2px 7px !important;
  border: 1px solid var(--ds-green-line) !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--ds-green) !important;
  font-size: 11px !important;
  text-decoration: none !important;
}
/* 悬停简介层：半透明深色即可，不用 zy-bgcolor 变量 */
body.body .a-con-inner span.s5 {
  background: rgba(10, 16, 12, 0.88) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* ========== 分类网格 10 / 4 ========== */
body.body .home-video-category-grid,
body.body .vod-category-panel .home-video-category-grid,
body.body #video-categories .home-video-category-grid {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
body.body .home-video-category-grid a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 6px 4px !important;
  border: var(--ds-chip-border) !important;
  border-radius: var(--ds-radius-chip) !important;
  background: var(--ds-chip-bg) !important;
  color: var(--ds-text) !important;
  font-size: 12px !important;
  text-align: center !important;
  text-decoration: none !important;
  line-height: 1.25 !important;
  box-shadow: none !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}
body.body .home-video-category-grid a:hover,
body.body .home-video-category-grid a:focus-visible {
  background: var(--ds-green-fill) !important;
  border-color: var(--ds-green) !important;
  color: var(--ds-green-soft) !important;
  outline: none !important;
}

/* ========== 关键词 ========== */
body.body #hot-keywords nav#home-hot-keywords,
body.body .hot-keywords-list,
body.body #search-hot-keywords nav.vod-search-categories,
body.body #search-hot-keywords .vod-search-categories {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
body.body #hot-keywords nav#home-hot-keywords a,
body.body .hot-keywords-list a,
body.body #search-hot-keywords nav.vod-search-categories a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 5px 11px !important;
  border: var(--ds-chip-border) !important;
  border-radius: var(--ds-radius-chip) !important;
  background: var(--ds-chip-bg) !important;
  color: var(--ds-text) !important;
  font-size: 12px !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}
body.body #hot-keywords nav#home-hot-keywords a:hover,
body.body #search-hot-keywords nav.vod-search-categories a:hover {
  color: var(--ds-green-soft) !important;
  background: var(--ds-green-fill) !important;
  border-color: var(--ds-green) !important;
}

/* ========== 列表页：两独立框 ========== */
body.body .container.vod-search-page {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ds-gap-section) !important;
  padding-top: 14px !important;
  padding-bottom: 20px !important;
}
body.body .container.vod-search-page > .vod-category-panel,
body.body .container.vod-search-page > #video-categories,
body.body .container.vod-search-page > .vod-list-page-panel {
  margin-bottom: 0 !important;
}
/* 内层 block 不再套第二层框 */
body.body .vod-list-page-panel .block.category-con,
body.body .vod-list-page-panel .home-latest-video-list,
body.body .vod-list-page-panel .res {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.body .vod-list-page-panel .block.category-con::before,
body.body .vod-list-page-panel .home-latest-video-list::before {
  display: none !important;
  content: none !important;
}
body.body .vod-list-page-panel .page-count {
  margin: -6px 0 12px !important;
  padding: 0 !important;
  font-size: 12px !important;
  color: var(--ds-text-muted) !important;
  background: transparent !important;
}
body.body .vod-list-page-panel .page-count strong {
  color: var(--ds-green) !important;
}

/* ========== 页脚：干净，无框 ========== */
body.body .footer {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 20px 0 0 !important;
  padding: 20px 0 16px !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
body.body .footer > .container,
body.body .footer .container {
  max-width: var(--ds-container-max) !important;
  margin: 0 auto !important;
  padding-left: var(--ds-container-pad) !important;
  padding-right: var(--ds-container-pad) !important;
  background: transparent !important;
}
body.body .footer .footer-block {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ========== 播放页相关小控件：透明化 ========== */
body.body .jisu a,
body.body .xianlu a {
  background: var(--ds-chip-bg) !important;
  border: var(--ds-chip-border) !important;
}
body.body .jisu a:hover,
body.body .xianlu a:hover,
body.body .jisu a.active,
body.body .xianlu a.active {
  background: var(--ds-green-fill) !important;
  border-color: var(--ds-green) !important;
  color: var(--ds-green-soft) !important;
}
body.body .player .player-info .mdo a:hover {
  background: var(--ds-green-fill) !important;
}

/* ========== 首页 hub 间距 ========== */
body.body .hub-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
body.body .hub-wrap > .hub-section {
  margin-top: 0 !important;
  margin-bottom: var(--ds-gap-section) !important;
}

/* ========== 响应式 ========== */
@media (max-width: 1100px) {
  body.body .category-con .a-con,
  body.body .home-latest-video-list .a-con,
  body.body .search-con .a-con,
  body.body .play-like-section .category-con .a-con,
  body.body .search-content-panel .search-con > .a-con {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  body.body .home-video-category-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  :root {
    --ds-pad-panel: 12px;
    --ds-gap-section: 12px;
    --ds-gap-grid: 8px;
    --ds-radius-panel: 10px;
  }
  body.body .category-con .a-con,
  body.body .home-latest-video-list .a-con,
  body.body .search-con .a-con,
  body.body .play-like-section .category-con .a-con,
  body.body .search-content-panel .search-con > .a-con {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body.body .home-video-category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  body.body .home-video-category-grid a {
    min-height: 34px !important;
    font-size: 11px !important;
    padding: 5px 2px !important;
  }
  body.body #hot-keywords nav#home-hot-keywords {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  body.body #hot-keywords nav#home-hot-keywords a,
  body.body #search-hot-keywords nav.vod-search-categories a {
    justify-content: center !important;
    min-height: 28px !important;
    padding: 4px 4px !important;
    font-size: 11px !important;
  }
  body.body .hub-section-head h2,
  body.body .a-tit.home-list-heading h1 {
    font-size: 15px !important;
  }
}

@media (max-width: 400px) {
  body.body .category-con .a-con,
  body.body .home-latest-video-list .a-con {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.body .home-video-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}