@import url('https://fonts[class~="googleapis"][class~="com"]/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* Base */
*{ padding:0; margin:0; box-sizing:border-box; font-family:'Poppins',sans-serif; }
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-thumb{ background:rgb(76,76,76); border-radius:5px; }

body{ background:#0f0f0f; color:#fff; }
a{ color:#fff; text-decoration:none; }
img{ max-width:100%; }

/* TOP NAV */
[class~="nav1"]{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  height:56px;
  background:#0f0f0f;
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  border-bottom:1px solid #272727;
}
[class~="logo"]{ display:flex; align-items:center; gap:8px; }
#logo-txt{ font-size:1.25rem; font-weight:700; letter-spacing:-1px; }
[class~="logo"] img{ width:32px; height:32px; }

[class~="search"]{ display:flex; align-items:center; gap:8px; }
[class~="search"] label{ display:flex; border:1px solid #303030; border-radius:40px; overflow:hidden; background:#121212; }
[class~="search"] input{ background:none; border:none; outline:none; padding:8px 16px; color:#fff; font-family:Poppins,sans-serif; font-size:14px; width:320px; }
[class~="search"] button{ background:#222; border:none; padding:8px 16px; color:#fff; cursor:pointer; border-left:1px solid #303030; }
[class~="search"] button:hover{ background:#e53935; }
[class~="i-icons"]{ display:flex; align-items:center; gap:16px; font-size:20px; color:#aaa; }
[class~="i-icons"] i:hover{ color:#fff; cursor:pointer; }

/* LEFT SIDEBAR NAV */
[class~="nav2"]{
  position:fixed;
  top:56px; left:0;
  width:72px;
  height:calc(100vh - 56px);
  background:#0f0f0f;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:12px 0;
  gap:4px;
  z-index:90;
  border-right:1px solid #272727;
  overflow:hidden;
}
[class~="nav2"] a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:12px 4px 8px;
  color:#aaa;
  font-size:10px;
  gap:6px;
  transition:background [class~="15s"];
  border-radius:8px;
}
[class~="nav2"] a:hover, [class~="nav2"] a[class~="active"]{ background:#272727; color:#fff; }
[class~="nav2"] a i{ font-size:20px; }
#menubar{ font-size:20px; color:#aaa; cursor:pointer; padding:12px; }
#menubar:hover{ color:#fff; }

/* CONTENT */
[class~="content"]{
  margin-top:56px;
  margin-left:72px;
  padding:16px;
  min-height:calc(100vh - 56px);
}

/* CHIPS */
[class~="chips-wrapper"]{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom:12px;
  margin-bottom:16px;
  scrollbar-width:none;
}
[class~="chips-wrapper"]::-webkit-scrollbar{ display:none; }
[class~="chip"]{
  background:#272727;
  border-radius:8px;
  padding:8px 12px;
  white-space:nowrap;
  cursor:pointer;
  font-size:14px;
  transition:background [class~="15s"];
  flex-shrink:0;
}
[class~="chip"]:hover, [class~="chip"][class~="active"]{ background:#fff; color:#000; }

/* VIDEO GRID */
[class~="video-grid"]{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:20px;
  padding-bottom:40px;
}

[class~="video-card"]{ display:block; color:#fff; }

[class~="video-card"] [class~="thumbnail"]{
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:12px;
  background:#272727;
  position:relative;
  margin-bottom:12px;
}
[class~="video-card"] [class~="thumbnail"] img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform [class~="3s"];
}
[class~="video-card"]:hover [class~="thumbnail"] img{ transform:scale(1.05); }

[class~="video-card"] [class~="card-body"]{ display:flex; gap:12px; }
[class~="video-card"] [class~="channel-avatar"]{
  width:36px; height:36px;
  border-radius:50%;
  background:#444;
  flex-shrink:0;
  overflow:hidden;
}
[class~="video-card"] [class~="channel-avatar"] img{ width:100%; height:100%; object-fit:cover; }
[class~="video-card"] [class~="card-info"]{ flex:1; }
[class~="video-card"] [class~="card-title"]{ font-size:14px; font-weight:500; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:4px; }
[class~="video-card"] [class~="card-meta"]{ font-size:12px; color:#aaa; }

/* PLAYER PAGE */
[class~="watch-layout"]{ display:flex; gap:24px; }
[class~="watch-main"]{ flex:1; min-width:0; }
[class~="watch-sidebar"]{ width:400px; flex-shrink:0; }

[class~="player-wrapper"]{
  position:relative;
  padding-bottom:56.25%;
  height:0;
  background:#000;
  border-radius:12px;
  overflow:hidden;
  margin-bottom:16px;
}
[class~="player-wrapper"] iframe{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  border:none;
}

[class~="video-title"]{ font-size:1.25rem; font-weight:600; margin-bottom:12px; }
[class~="video-meta"]{ color:#aaa; font-size:14px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid #272727; }
[class~="video-desc"]{ color:#ddd; font-size:14px; line-height:1.7; }

/* EPISODE LIST */
[class~="episode-list"]{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
[class~="episode-list"] a{ padding:6px 14px; background:#272727; border-radius:6px; font-size:13px; color:#fff; transition:background [class~="2s"]; }
[class~="episode-list"] a:hover{ background:#e53935; }

/* POSTER CARD (for list/detail pages) */
[class~="poster-card"]{ display:block; color:#fff; }
[class~="poster-card"] [class~="poster-thumb"]{ aspect-ratio:2/3; overflow:hidden; border-radius:8px; position:relative; margin-bottom:8px; }
[class~="poster-card"] [class~="poster-thumb"] img{ width:100%; height:100%; object-fit:cover; transition:transform [class~="3s"]; }
[class~="poster-card"]:hover [class~="poster-thumb"] img{ transform:scale(1.05); }
[class~="poster-card"] [class~="poster-title"]{ font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[class~="poster-card"] [class~="poster-meta"]{ font-size:12px; color:#aaa; }

/* POSTER GRID */
[class~="poster-grid"]{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:16px; }

/* SECTION TITLE */
[class~="section-title"]{ font-size:1.1rem; font-weight:700; margin-bottom:16px; border-left:4px solid #e53935; padding-left:12px; }

/* PAGINATION */
[class~="pagination-wrap"]{ display:flex; justify-content:center; gap:8px; padding:24px 0; }
[class~="pagination-wrap"] a, [class~="pagination-wrap"] span{ display:inline-block; padding:6px 14px; background:#272727; border-radius:6px; font-size:13px; color:#fff; transition:background [class~="2s"]; }
[class~="pagination-wrap"] a:hover{ background:#e53935; }

/* DETAIL PAGE */
[class~="detail-wrap"]{ display:flex; gap:30px; flex-wrap:wrap; padding:24px 0; }
[class~="detail-poster"] img{ width:220px; border-radius:10px; }
[class~="detail-info"]{ flex:1; min-width:280px; }
[class~="detail-info"] h1{ font-size:1.75rem; font-weight:700; margin-bottom:12px; }
[class~="detail-badge"]{ background:#272727; color:#aaa; padding:4px 12px; border-radius:20px; font-size:12px; display:inline-block; margin:0 4px 8px 0; }
[class~="detail-rating"]{ color:#e53935; font-weight:700; }
[class~="detail-desc"]{ color:#aaa; font-size:14px; line-height:1.7; margin-bottom:20px; }
[class~="btn-watch"]{ background:#e53935; color:#fff; border:none; padding:10px 24px; border-radius:8px; font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:8px; }
[class~="btn-watch"]:hover{ background:#c62828; color:#fff; }

/* SEARCH PAGE */
[class~="search-page"]{ padding:40px 16px; }
[class~="search-form-lg"]{ display:flex; max-width:640px; margin:0 auto 30px; border-radius:40px; overflow:hidden; border:2px solid #e53935; }
[class~="search-form-lg"] input{ flex:1; background:#181818; border:none; outline:none; padding:14px 20px; color:#fff; font-family:Poppins,sans-serif; font-size:15px; }
[class~="search-form-lg"] button{ background:#e53935; border:none; padding:14px 24px; color:#fff; cursor:pointer; font-size:15px; }

/* NOT FOUND */
[class~="not-found"]{ text-align:center; padding:80px 20px; }
[class~="not-found"] [class~="code"]{ font-size:120px; font-weight:900; color:#e53935; line-height:1; }
[class~="not-found"] h1{ font-size:2rem; margin:20px 0; }
[class~="not-found"] p{ color:#aaa; margin-bottom:24px; }

/* NEWS */
[class~="news-item"]{ display:flex; gap:16px; padding:16px; background:#181818; border-radius:12px; margin-bottom:16px; color:#fff; }
[class~="news-item"] img{ width:160px; height:100px; object-fit:cover; border-radius:8px; flex-shrink:0; }
[class~="news-item-title"]{ font-size:15px; font-weight:600; margin-bottom:8px; }
[class~="news-item-date"]{ font-size:12px; color:#aaa; margin-bottom:6px; }
[class~="news-item-excerpt"]{ font-size:13px; color:#aaa; }

/* ARTICLE */
[class~="article-wrap"]{ max-width:860px; margin:0 auto; padding:24px; }
[class~="article-wrap"] h1{ font-size:1.75rem; font-weight:700; margin-bottom:16px; }
[class~="article-meta"]{ color:#aaa; font-size:13px; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #272727; }
[class~="article-cover"]{ width:100%; border-radius:12px; margin-bottom:24px; }
[class~="article-content"]{ color:#ddd; font-size:15px; line-height:1.85; }

/* FOOTER */
[class~="site-footer"]{ background:#181818; border-top:1px solid #272727; padding:40px 16px 20px; }
[class~="footer-inner"]{ display:flex; flex-wrap:wrap; gap:40px; max-width:1200px; margin:0 auto; }
[class~="footer-logo-txt"]{ font-size:1.25rem; font-weight:700; letter-spacing:-0.5px; margin-bottom:8px; display:block; color:#fff; }
[class~="footer-desc"]{ font-size:13px; color:#aaa; }
[class~="footer-links"]{ display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; }
[class~="footer-links"] a{ color:#aaa; font-size:13px; transition:color [class~="2s"]; }
[class~="footer-links"] a:hover{ color:#fff; }
[class~="footer-bottom"]{ border-top:1px solid #272727; margin-top:24px; padding-top:16px; text-align:center; font-size:12px; color:#aaa; }

/* BREADCRUMB */
[class~="breadcrumb-bar"]{ font-size:13px; color:#aaa; padding:12px 0; }
[class~="breadcrumb-bar"] a{ color:#aaa; }
[class~="breadcrumb-bar"] a:hover{ color:#e53935; }
[class~="breadcrumb-bar"] span{ margin:0 8px; }

/* RESPONSIVE */
@media(max-width:900px){
  [class~="watch-layout"]{ flex-direction:column; }
  [class~="watch-sidebar"]{ width:100%; }
  [class~="video-grid"]{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
}
@media(max-width:600px){
  [class~="nav2"]{ width:60px; }
  [class~="content"]{ margin-left:60px; }
  [class~="nav2"] a span{ display:none; }
  [class~="detail-wrap"]{ flex-direction:column; }
  [class~="news-item"]{ flex-direction:column; }
  [class~="news-item"] img{ width:100%; height:180px; }
}

/* pic-list grid fix: ul becomes display:contents so li items are direct grid children */
[class~="video-grid"] ul[class~="pic-list"]{display:contents;list-style:none;padding:0;margin:0}
[class~="video-grid"] [class~="pic-list"] li{list-style:none;display:block}
[class~="video-grid"] [class~="pic-img"]{display:block;overflow:hidden;border-radius:8px;position:relative;aspect-ratio:2/3}
[class~="video-grid"] [class~="pic-img"] img{width:100%;height:100%;object-fit:cover;display:block}
[class~="video-grid"] [class~="name"]{padding:8px 4px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}

/* Logo text fallback */
[class~="logo-text"] {
    font-size: 1.5rem;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
    display: inline-block;
}

/* 相关推荐网格布局 */
[class~="detail-related"] .pic-list,
[class~="detail-related"] [class*="pic-list"] {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 12px !important;
}
[class~="detail-related"] .pic-list li,
[class~="detail-related"] [class*="pic-list"] li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}
[class~="detail-related"] .pic-img,
[class~="detail-related"] [class*="pic-img"] {
    display: block !important;
    position: relative !important;
    aspect-ratio: 2/3 !important;
    overflow: hidden !important;
    border-radius: 6px !important;
}
[class~="detail-related"] .pic-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
[class~="detail-related"] .movie-title {
    font-size: 0.85rem !important;
    padding: 4px 0 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
[class~="detail-related"] .movie-title a {
    text-decoration: none !important;
}
@media (max-width: 768px) {
    [class~="detail-related"] .pic-list,
    [class~="detail-related"] [class*="pic-list"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}