*, *::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: 1220px; margin: 0 auto; padding: 0 16px; }
main, section, article, aside { position: relative; }

:root{
  --bg:#f5efe0;
  --bg-soft:#efe4cf;
  --surface:#fffaf3;
  --ink:#241d18;
  --ink-soft:#6b5d4d;
  --red:#b3141f;
  --red-dark:#7c0e16;
  --black:#161210;
  --black-soft:#241d18;
  --border:#dccfa9;
  --header-h:64px;
  --radius:2px;
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  font-size:14px;
  line-height:1.6;
}

a{ color:inherit; }

/* ---------- Header ---------- */
.site-header{
  background:var(--black);
  color:#f2e9d8;
  border-bottom:3px solid var(--red);
  position:sticky;
  top:0;
  z-index:1000;
}
.header-inner{
  position:relative;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px 20px;
  padding:10px 16px;
}
.site-logo{
  flex-shrink:0;
  color:#fff;
  text-decoration:none;
  font-size:20px;
  letter-spacing:1px;
  border-left:4px solid var(--red);
  padding-left:10px;
}
.site-logo strong{ color:#fff; }

.nav-toggle{
  display:none;
  margin-left:auto;
  background:none;
  border:1px solid rgba(255,255,255,.4);
  width:40px;height:36px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
}
.nav-toggle span{ display:block;width:20px;height:2px;background:#f2e9d8; }

.header-search{
  display:flex;
  flex:1 1 260px;
  min-width:0;
  max-width:360px;
}
.header-search input{
  flex:1;min-width:0;
  padding:8px 10px;
  border:1px solid var(--border);
  background:#fff;
  font-size:16px;
  border-radius:var(--radius);
}
.header-search button{
  flex-shrink:0;
  padding:8px 14px;
  background:var(--red);
  color:#fff;
  border:none;
  cursor:pointer;
  font-size:14px;
}
.header-search button:hover{ background:var(--red-dark); }

.site-nav{
  display:flex;
  flex-wrap:wrap;
  gap:4px 18px;
  width:100%;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:8px;
}
.site-nav a{
  color:#e8ddc8;
  text-decoration:none;
  padding:6px 2px;
  border-bottom:2px solid transparent;
  font-size:14px;
  white-space:nowrap;
}
.site-nav a:hover, .site-nav a.is-active{
  color:#fff;
  border-bottom-color:var(--red);
}

/* ---------- Common blocks ---------- */
.page-intro{ padding:34px 0 10px; }
.page-intro h1{ font-size:26px; margin:0 0 10px; color:var(--black); letter-spacing:.5px; }
.page-lead{ color:var(--ink-soft); max-width:760px; margin:0; }

.module{ padding:28px 0; }
.module:nth-of-type(odd){ background:var(--bg-soft); }
.module-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px 16px;
  margin-bottom:16px;
  border-left:5px solid var(--red);
  padding-left:12px;
}
.module-head h2{ margin:0; font-size:20px; color:var(--black); }
.module-sub{ margin:0; color:var(--ink-soft); font-size:13px; }

/* ---------- Card grid ---------- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(170px,1fr));
  gap:18px;
}
.media-card{
  min-width:0;
  background:var(--surface);
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
}
.media-card-link{ display:block; text-decoration:none; color:inherit; }
.media-thumb{
  position:relative;
  overflow:hidden;
  aspect-ratio:2/3;
  background:var(--bg-soft);
  border-radius:var(--radius);
}
.media-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.badge-hot{
  position:absolute;
  top:8px; left:8px;
  background:var(--red);
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:2px 7px;
  letter-spacing:.5px;
  z-index:2;
}
.badge-hot::before{ content:"🔥"; margin-right:2px; }
.card-title-overlay{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:22px 10px 8px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(10,8,6,.88) 90%);
  color:#fff;
  font-size:13px;
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  z-index:1;
}
.media-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  align-items:center;
  padding:8px 10px 4px;
  font-size:12px;
  color:var(--ink-soft);
}
.media-cat{
  color:var(--red-dark);
  text-decoration:none;
  border:1px solid var(--red-dark);
  padding:1px 6px;
}
.media-cat:hover{ background:var(--red-dark); color:#fff; }
.media-intro{
  padding:0 10px 10px;
  font-size:12px;
  color:var(--ink-soft);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:0;
}

/* ---------- Ticker banner ---------- */
.ticker-strip{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding:6px 2px 14px;
  counter-reset:rankcounter;
}
.ticker-item{
  flex:0 0 auto;
  width:120px;
  min-width:0;
  text-decoration:none;
  color:var(--ink);
  position:relative;
  counter-increment:rankcounter;
}
.ticker-item img{
  width:120px;height:160px;
  object-fit:cover;
  border-radius:var(--radius);
  border:1px solid var(--border);
}
.ticker-rank{
  position:absolute;
  top:-6px; left:-6px;
  background:var(--black);
  color:#fff;
  font-weight:700;
  font-size:14px;
  width:26px;height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--red);
  z-index:2;
}
.ticker-rank::before{ content:counter(rankcounter); }
.ticker-title{
  display:block;
  margin-top:6px;
  font-size:12px;
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ---------- Pagination ---------- */
.pagination{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin-top:20px;
}
.page-btn{
  display:inline-block;
  min-width:44px;
  text-align:center;
  padding:9px 16px;
  background:var(--black);
  color:#f2e9d8;
  text-decoration:none;
  font-size:13px;
  border:1px solid var(--black);
}
.page-btn:hover{ background:var(--red); border-color:var(--red); color:#fff; }

/* ---------- Extra aside modules ---------- */
.module-extra{
  background:var(--surface);
  border-top:3px solid var(--red);
  padding:26px 0 32px;
}
.extra-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:22px;
}
.extra-block{ min-width:0; }
.extra-block h2{
  font-size:16px;
  margin:0 0 10px;
  border-bottom:2px solid var(--border);
  padding-bottom:6px;
  color:var(--black);
}
.genre-list, .simple-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.genre-list a, .simple-list a{
  color:var(--ink);
  text-decoration:none;
  font-size:13px;
  padding:4px 0;
  border-bottom:1px dashed var(--border);
  display:block;
}
.genre-list a:hover, .simple-list a:hover{ color:var(--red-dark); }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ padding:16px 0 0; }
.breadcrumb ol{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin:0;
  padding:0;
  font-size:13px;
  color:var(--ink-soft);
}
.breadcrumb li:not(:last-child)::after{ content:"›"; margin:0 6px; }
.breadcrumb a{ color:var(--red-dark); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }

/* ---------- List hero ---------- */
.list-hero{ padding:16px 0 6px; }
.list-hero h1{ font-size:24px; margin:10px 0; color:var(--black); }
.list-desc{ color:var(--ink-soft); margin:0; }

/* ---------- Player module ---------- */
.player-module{
  max-width:1220px;
  margin:20px auto 0;
  padding:0 16px;
}
.player-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  overflow:hidden;
  border:2px solid var(--black);
}
.hls-player{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
  display:block;
}
.player-server{
  padding:10px 0;
  color:var(--ink-soft);
  font-size:12px;
  overflow-x:auto;
}

/* ---------- Video info ---------- */
.video-info{ padding:24px 0; }
.video-info-grid{
  display:grid;
  grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:26px;
  align-items:start;
}
.video-poster{
  min-width:0;
  aspect-ratio:2/3;
  overflow:hidden;
  border:1px solid var(--border);
  position:relative;
}
.video-poster img{ width:100%;height:100%; object-fit:cover; }
.video-detail{ min-width:0; }
.video-detail h1{ margin:0 0 12px; font-size:24px; color:var(--black); }
.video-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  font-size:13px;
  color:var(--ink-soft);
  margin-bottom:12px;
}
.video-meta-row .score strong{ color:var(--red); font-size:16px; }
.video-crew{ margin:4px 0; font-size:13px; }
.video-intro{ margin-top:12px; color:var(--ink-soft); font-size:13px; line-height:1.7; }
.video-content{ margin-top:24px; }
.video-content h2{
  font-size:18px;
  border-left:5px solid var(--red);
  padding-left:10px;
  margin-bottom:12px;
  color:var(--black);
}
.content-body{ font-size:13px; line-height:1.8; color:var(--ink); overflow-x:auto; }
.content-body img{ max-width:100%; height:auto; }
.content-body table{ max-width:100%; overflow-x:auto; display:block; }

/* ---------- Search ---------- */
.search-hero{ padding:30px 0 14px; }
.search-hero h1{ font-size:24px; margin:0 0 8px; color:var(--black); }
.search-desc{ color:var(--ink-soft); margin:0; }
.search-form-full{
  display:flex;
  gap:10px;
  max-width:480px;
  margin-top:14px;
  flex-wrap:wrap;
}
.search-form-full input{
  flex:1;min-width:0;
  padding:10px;
  border:1px solid var(--border);
  font-size:16px;
}
.search-form-full button{
  padding:10px 20px;
  background:var(--red);
  color:#fff;
  border:none;
  cursor:pointer;
  flex-shrink:0;
}
.search-form-full button:hover{ background:var(--red-dark); }
.no-result{ text-align:center; color:var(--ink-soft); padding:20px 0; }

/* ---------- About ---------- */
.about-hero{ padding:30px 0 10px; }
.about-hero h1{ font-size:26px; color:var(--black); margin:0 0 8px; }
.about-lead{ color:var(--ink-soft); max-width:700px; margin:0; }
.about-body{ padding:10px 0 40px; }
.about-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px;
}
.about-card{
  background:var(--surface);
  border:1px solid var(--border);
  padding:18px;
  min-width:0;
}
.about-card h2{ font-size:16px; margin:0 0 8px; color:var(--red-dark); }

/* ---------- 404 ---------- */
.error-page{ text-align:center; padding:80px 16px; }
.error-code{ font-size:64px; font-weight:700; color:var(--red); margin:0; letter-spacing:2px; }
.error-page h1{ font-size:22px; margin:10px 0; color:var(--black); }
.error-desc{ color:var(--ink-soft); max-width:520px; margin:0 auto 20px; }
.error-page .search-form-full{ margin:0 auto 24px; justify-content:center; }
.back-home{
  display:inline-block;
  padding:10px 24px;
  background:var(--black);
  color:#f2e9d8;
  text-decoration:none;
  border:1px solid var(--black);
}
.back-home:hover{ background:var(--red); border-color:var(--red); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--black); color:#cbbfa8; margin-top:40px; }
.footer-inner{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:24px;
  padding:32px 16px;
}
.footer-col{ min-width:0; }
.footer-col h2{
  font-size:15px;
  color:#fff;
  margin:0 0 10px;
  border-bottom:1px solid rgba(255,255,255,.15);
  padding-bottom:6px;
}
.footer-logo{ font-size:18px; color:#fff; font-weight:700; margin:0 0 8px; }
.footer-desc{ font-size:13px; line-height:1.6; margin:0; }
.footer-col nav{ display:flex; flex-direction:column; gap:6px; }
.footer-col nav a{ color:#cbbfa8; text-decoration:none; font-size:13px; }
.footer-col nav a:hover{ color:#fff; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding:14px 16px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px;
  font-size:12px;
}
.footer-bottom a{ color:#cbbfa8; }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .video-info-grid{ grid-template-columns:1fr; }
  .video-poster{ max-width:240px; margin:0 auto; }
}

@media (max-width:768px){
  .nav-toggle{ display:flex; }
  .site-nav{
    display:none;
    flex-direction:column;
    position:absolute;
    left:0; right:0; top:100%;
    background:var(--black-soft);
    padding:10px 16px 16px;
    max-height:calc(100vh - var(--header-h));
    overflow-y:auto;
    z-index:1000;
  }
  .site-nav.is-open{ display:flex; }
  .site-nav a{ width:100%; padding:10px 4px; border-bottom:1px solid rgba(255,255,255,.08); }
  .header-search{ width:100%; max-width:none; }
  .card-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
  .extra-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:480px){
  .card-grid{ grid-template-columns:repeat(2,1fr); }
  .extra-grid{ grid-template-columns:1fr; }
  .ticker-item{ width:100px; }
  .ticker-item img{ width:100px;height:140px; }
  .page-intro h1, .list-hero h1, .search-hero h1, .about-hero h1{ font-size:20px; }
}