/* ============ 防错乱基线 ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; }
img, video, iframe, embed, object { max-width: 100%; height: auto; display: block; }
img { object-fit: cover; }
table { max-width: 100%; }
pre, code { white-space: pre-wrap; word-break: break-word; overflow: auto; max-width: 100%; }
a, p, h1, h2, h3, li, span { overflow-wrap: anywhere; word-break: break-word; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
main, section, article, aside { position: relative; }

/* ============ 变量与全局 ============ */
:root {
  --c-bg: #f3f2ee;
  --c-card: #ffffff;
  --c-dark: #2e3640;
  --c-dark2: #252c35;
  --c-primary: #7e93a7;
  --c-primary-d: #5f7488;
  --c-accent: #b98d76;
  --c-text: #33393f;
  --c-text2: #7a8188;
  --c-line: #e4e2dc;
  --c-hot: #c46a5a;
}
html { font-size: 16px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.65;
}
a { color: var(--c-text); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--c-primary-d); }
time { color: inherit; }

/* ============ 头部（深色） ============ */
.site-header { background: var(--c-dark); color: #eceef0; }
.header-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.site-logo { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; color: #fff; min-width: 0; }
.site-logo strong { font-size: 1.4rem; font-weight: 900; letter-spacing: 1px; color: #fff; }
.site-logo .logo-sub { font-size: .74rem; color: #9aa6b2; letter-spacing: 2px; }
.site-logo:hover strong { color: var(--c-primary); }

.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; min-width: 0; flex: 1 1 auto; }
.site-nav a {
  color: #cdd4da;
  font-weight: 700;
  font-size: .94rem;
  padding: 8px 10px;
  position: relative;
  border-bottom: 3px solid transparent;
}
.site-nav a::before { content: "✦"; font-size: .7em; margin-right: 5px; color: var(--c-primary); }
.site-nav a.nav-home::before { content: "⌂"; font-size: .9em; }
.site-nav a:hover { color: #fff; border-bottom-color: var(--c-primary); }

.nav-toggle { display: none; }

.header-search { display: flex; align-items: center; flex-shrink: 0; min-width: 0; }
.search-input {
  border: 1px solid #48525d;
  background: #3a434e;
  color: #eceef0;
  padding: 8px 12px;
  font-size: 16px;
  width: 200px;
  max-width: 100%;
  min-width: 0;
  border-radius: 3px 0 0 3px;
  outline: none;
}
.search-input::placeholder { color: #8b96a1; }
.search-input:focus { border-color: var(--c-primary); }
.search-btn {
  flex-shrink: 0;
  border: none;
  background: var(--c-primary);
  color: #fff;
  font-weight: 700;
  padding: 9px 16px;
  font-size: .9rem;
  cursor: pointer;
  border-radius: 0 3px 3px 0;
}
.search-btn:hover { background: var(--c-primary-d); }

/* ============ 主体布局：左侧栏 + 右正文 ============ */
.site-main { padding: 26px 0 46px; }
.layout {
  display: grid;
  grid-template-columns: clamp(260px, 24vw, 320px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.layout > * { min-width: 0; }
.main-col { min-width: 0; }

/* ============ 标题 ============ */
.home-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--c-text);
  margin: 0 0 18px;
  padding-left: 12px;
  border-left: 5px solid var(--c-primary);
}
.page-title {
  font-size: 1.5rem;
  font-weight: 900;
  margin: 0 0 18px;
  padding-left: 12px;
  border-left: 5px solid var(--c-primary);
}
.sec-title {
  font-size: 1.2rem;
  font-weight: 900;
  margin: 0 0 16px;
  padding-left: 12px;
  border-left: 5px solid var(--c-accent);
}

/* ============ 面包屑 ============ */
.breadcrumb { margin: 0 0 18px; font-size: .86rem; color: var(--c-text2); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.breadcrumb li { min-width: 0; display: flex; align-items: center; }
.breadcrumb li + li::before { content: "›"; margin: 0 6px; color: var(--c-text2); }
.breadcrumb a { color: var(--c-text2); }
.breadcrumb a:hover { color: var(--c-primary-d); }
.bc-current {
  color: var(--c-text);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============ 侧栏 ============ */
.site-aside { min-width: 0; }
.aside-box { background: var(--c-card); padding: 18px; margin-bottom: 22px; }
.aside-title {
  font-size: 1rem;
  font-weight: 900;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-line);
}
.aside-list { display: flex; flex-direction: column; }
.aside-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--c-line);
  min-width: 0;
}
.aside-item:last-child { border-bottom: none; }
.aside-item-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .9rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.aside-item-date { flex-shrink: 0; font-size: .78rem; color: var(--c-text2); }

.aside-rank { display: flex; flex-direction: column; counter-reset: arank; }
.aside-rank-item {
  counter-increment: arank;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--c-line);
  min-width: 0;
}
.aside-rank-item:last-child { border-bottom: none; }
.aside-rank-item::before {
  content: counter(arank);
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: .74rem;
  font-weight: 900;
  color: #fff;
  background: var(--c-text2);
  border-radius: 3px;
}
.aside-rank-item:nth-child(1)::before,
.aside-rank-item:nth-child(2)::before,
.aside-rank-item:nth-child(3)::before { background: var(--c-hot); }
.aside-rank-title {
  min-width: 0;
  font-size: .9rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud a {
  background: var(--c-bg);
  color: var(--c-text2);
  font-size: .82rem;
  padding: 5px 12px;
  border-radius: 2px;
}
.tag-cloud a:hover { background: var(--c-primary); color: #fff; }

/* ============ Banner：左大右小 ============ */
.banner-sec { margin-bottom: 6px; }
.banner-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.banner-item { min-width: 0; display: flex; flex-direction: column; background: var(--c-card); }
.banner-grid .banner-item:first-child { grid-column: span 2; grid-row: span 2; }
.banner-pic {
  position: relative;
  overflow: hidden;
  display: block;
  aspect-ratio: 16 / 9;
  background: #dcdad4;
}
.banner-pic img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82); transition: filter .2s ease; }
.banner-item:hover .banner-pic img { filter: saturate(1); }
.banner-txt { display: block; padding: 8px 10px 10px; min-width: 0; }
.banner-name {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 800;
  font-size: .88rem;
}
.banner-grid .banner-item:first-child .banner-name { font-size: 1.1rem; -webkit-line-clamp: 2; }
.banner-meta { display: block; font-size: .76rem; color: var(--c-text2); margin-top: 3px; }
.banner-item:hover .banner-name { color: var(--c-primary-d); }

/* ============ HOT 角标 ============ */
.badge-hot {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--c-hot);
  color: #fff;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 2px 8px 2px 6px;
  border-radius: 2px;
  z-index: 2;
}
.badge-hot::before { content: "▲"; font-size: .6em; margin-right: 3px; vertical-align: 1px; }

/* ============ 模块通用 ============ */
.home-sec { background: var(--c-card); padding: 20px; margin-bottom: 24px; }
.list-sec { background: var(--c-card); padding: 20px; }
.banner-sec { background: var(--c-card); }

/* ============ 播放排行 ============ */
.rank-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  counter-reset: rk;
}
.rank-item {
  counter-increment: rk;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  background: var(--c-bg);
  padding: 8px;
}
.rank-item::before {
  content: counter(rk);
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  font-weight: 900;
  font-size: .84rem;
  color: #fff;
  background: var(--c-text2);
  border-radius: 3px;
}
.rank-item:nth-child(1)::before,
.rank-item:nth-child(2)::before,
.rank-item:nth-child(3)::before { background: var(--c-hot); }
.rank-thumb {
  flex-shrink: 0;
  width: 110px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
  background: #dcdad4;
}
.rank-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82); }
.rank-item:hover .rank-thumb img { filter: saturate(1); }
.rank-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rank-title {
  font-weight: 800;
  font-size: .92rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rank-item:hover .rank-title { color: var(--c-primary-d); }
.rank-meta { font-size: .76rem; color: var(--c-text2); }

/* ============ 海报网格 ============ */
.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}
.poster-card { min-width: 0; display: flex; flex-direction: column; }
.poster-pic {
  position: relative;
  overflow: hidden;
  display: block;
  aspect-ratio: 2 / 3;
  background: #dcdad4;
}
.poster-pic img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82); transition: filter .2s ease; }
.poster-card:hover .poster-pic img { filter: saturate(1); }
.poster-title {
  margin-top: 8px;
  font-weight: 800;
  font-size: .88rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.poster-card:hover .poster-title { color: var(--c-primary-d); }

/* ============ 横向卡片列表 ============ */
.card-list { display: flex; flex-direction: column; gap: 16px; }
.m-card {
  display: flex;
  gap: 16px;
  background: var(--c-bg);
  padding: 12px;
  min-width: 0;
}
.m-card-thumb {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  width: 190px;
  aspect-ratio: 16 / 10;
  background: #dcdad4;
  display: block;
}
.m-card-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82); transition: filter .2s ease; }
.m-card:hover .m-card-thumb img { filter: saturate(1); }
.m-card-body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
.m-card-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 900;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.m-card-title a:hover { color: var(--c-primary-d); }
.m-card-intro {
  margin: 0;
  font-size: .86rem;
  color: var(--c-text2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.m-card-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: .78rem;
  color: var(--c-text2);
}
.m-cat { background: var(--c-primary); color: #fff; padding: 2px 8px; border-radius: 2px; font-size: .74rem; }
.m-cat:hover { background: var(--c-primary-d); color: #fff; }
.m-card-tags { margin: 0; font-size: .78rem; display: flex; flex-wrap: wrap; gap: 8px; }
.m-card-tags a { color: var(--c-text2); }
.m-card-tags a:hover { color: var(--c-primary-d); }

/* ============ 分页（极简） ============ */
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}
.pagination a {
  min-width: 40px;
  text-align: center;
  padding: 8px 16px;
  background: var(--c-bg);
  color: var(--c-text);
  font-weight: 700;
  font-size: .88rem;
  border-radius: 2px;
}
.pagination a:hover { background: var(--c-dark); color: #fff; }

/* ============ 视频详情 ============ */
.video-detail { background: var(--c-card); padding: 20px; min-width: 0; }
.player-module { margin-bottom: 22px; }
.player-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #14181d;
}
.hls-player { width: 100%; height: 100%; object-fit: contain; background: #14181d; }

.video-head {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 22px;
  margin-bottom: 22px;
}
.video-head > * { min-width: 0; }
.video-poster {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  background: #dcdad4;
}
.video-poster img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.video-h1 { margin: 0 0 10px; font-size: 1.5rem; font-weight: 900; line-height: 1.35; }
.video-score { margin: 0 0 12px; font-size: .9rem; color: var(--c-text2); }
.video-score strong { color: var(--c-hot); font-size: 1.5rem; font-weight: 900; margin-left: 4px; }
.meta-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px 18px;
  font-size: .88rem;
}
.meta-list li { min-width: 0; }
.meta-k { color: var(--c-text2); margin-right: 8px; }
.meta-k::after { content: "："; }
.video-intro {
  margin: 0;
  font-size: .9rem;
  color: var(--c-text2);
  background: var(--c-bg);
  padding: 12px 14px;
}
.video-body { margin-bottom: 22px; }
.rich-content { font-size: .95rem; line-height: 1.85; min-width: 0; }
.rich-content img { margin: 12px auto; }
.rich-content table { border-collapse: collapse; }
.rich-content p { margin: 0 0 1em; }
.related-sec { margin-bottom: 4px; }

/* ============ 关于我们 ============ */
.about-sec { background: var(--c-card); padding: 24px; }
.about-card { margin-bottom: 22px; }
.about-stats { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
.stat-item {
  flex: 1 1 180px;
  min-width: 0;
  background: var(--c-bg);
  padding: 18px;
  text-align: center;
}
.stat-item strong { display: block; font-size: 1.8rem; font-weight: 900; color: var(--c-primary-d); }
.stat-item span { font-size: .84rem; color: var(--c-text2); }
.about-contact p { margin: 6px 0; font-size: .92rem; }

/* ============ 无结果 ============ */
.no-result { display: none; text-align: center; padding: 40px 16px; color: var(--c-text2); }
.no-result-face { font-size: 1.6rem; margin: 0 0 12px; }
.no-result a { color: var(--c-primary-d); font-weight: 700; }

/* ============ 页脚（深色） ============ */
.site-footer { background: var(--c-dark); color: #aeb7bf; font-size: .88rem; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 26px;
  padding-top: 34px;
  padding-bottom: 26px;
}
.footer-grid > * { min-width: 0; }
.footer-logo { font-size: 1.2rem; font-weight: 900; color: #fff; margin: 0 0 10px; }
.footer-title { font-weight: 900; color: #e6e9ec; margin: 0 0 10px; }
.footer-col p { margin: 4px 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.footer-links a, .site-footer a { color: #aeb7bf; }
.site-footer a:hover { color: #fff; }
.footer-bottom { background: var(--c-dark2); padding: 14px 0; }
.footer-bottom p { margin: 0; text-align: center; font-size: .8rem; }

/* ============ 404 ============ */
.page-404 { background: var(--c-dark); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.e404-wrap { width: 100%; padding: 40px 16px; }
.e404-box { max-width: 520px; margin: 0 auto; text-align: center; color: #cdd4da; }
.e404-code { font-size: 5.5rem; font-weight: 900; margin: 0; color: var(--c-primary); letter-spacing: 6px; }
.e404-title { font-size: 1.3rem; font-weight: 900; color: #fff; margin: 6px 0 12px; }
.e404-tip { font-size: .9rem; margin: 0 0 22px; }
.e404-search { display: flex; justify-content: center; }
.e404-search .search-input { flex: 1 1 auto; }
.e404-back { margin-top: 22px; }
.e404-back a { color: var(--c-primary); font-weight: 700; }
.e404-back a:hover { color: #fff; }

/* ============ 响应式 ============ */
@media (max-width: 1024px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .site-aside { order: 2; }
  .main-col { order: 1; }
  .rank-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .header-inner { gap: 10px; }
  .site-logo { flex: 1 1 auto; }
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    width: 42px;
    height: 38px;
    padding: 8px 10px;
    background: #3a434e;
    border: 1px solid #48525d;
    border-radius: 3px;
    cursor: pointer;
  }
  .nav-toggle .bar { display: block; width: 100%; height: 2px; background: #eceef0; }
  .header-search { order: 3; width: 100%; }
  .header-search .search-input { flex: 1 1 auto; width: auto; }
  .site-header { position: relative; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    flex-direction: column;
    align-items: stretch;
    background: var(--c-dark2);
    padding: 8px 0;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { width: 100%; padding: 12px 20px; border-bottom: 1px solid #333c47; }
  .site-nav a:last-child { border-bottom: none; }
  .site-nav a:hover { background: #333c47; border-bottom-color: #333c47; }

  .banner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .banner-grid .banner-item:first-child { grid-column: span 2; grid-row: auto; }
  .poster-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .m-card { flex-direction: column; }
  .m-card-thumb { width: 100%; }
  .video-head { grid-template-columns: minmax(0, 1fr); }
  .video-poster { max-width: 240px; }
  .home-sec, .list-sec, .video-detail, .about-sec { padding: 14px; }
  .video-h1 { font-size: 1.25rem; }
  .page-title { font-size: 1.25rem; }
}

@media (max-width: 480px) {
  .banner-grid { grid-template-columns: minmax(0, 1fr); }
  .banner-grid .banner-item:first-child { grid-column: auto; }
  .logo-sub { display: none; }
  .rank-thumb { width: 90px; }
}