/* ============================================================
   素屿 SuYu Design System v2 —— 全站视觉重构层
   布局语言：悬浮胶囊导航 / 大留白 / 无边框卡片 / 圆角10 / 轻浮起
   色彩语言：灰青 #4A7C6F · 暖米白 #F6F5F1 · 柔和深灰 #2B2B2B
   加载位置：public/include.html 尾部，配合 !important 接管旧样式
   ============================================================ */

/* ---------- 0. 设计令牌 ---------- */
:root{
  --sy-accent:#4A7C6F;          /* 主强调 */
  --sy-accent-deep:#3E6A5E;     /* 主强调-深 */
  --sy-accent-soft:rgba(74,124,111,.12);
  --sy-ink:#2B2B2B;             /* 标题文字 */
  --sy-text:#3D3D3A;            /* 正文 */
  --sy-muted:#8A8F86;           /* 次要文字 */
  --sy-bg:#F6F5F1;              /* 页面底 */
  --sy-card:#FFFFFF;            /* 卡片 */
  --sy-line:#E9E6DE;            /* 边线(米色) */
  --sy-radius:10px;
  --sy-shadow:0 2px 10px rgba(60,70,60,.06);
  --sy-shadow-lift:0 10px 28px rgba(60,70,60,.14);
  --sy-font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",sans-serif;
}

/* ---------- 1. 基底 ---------- */
html,body{background:var(--sy-bg) !important; font-family:var(--sy-font) !important; color:var(--sy-text) !important;}
body a{color:var(--sy-text) !important; transition:color .18s ease;}
body a:hover{color:var(--sy-accent) !important;}
.member-wrap,.container{background:transparent !important;}
.home-index-body .container{max-width:1280px !important;}

/* ---------- 2. 顶部导航：悬浮胶囊 ---------- */
.site-head-wrap, #topnav, .site-head-wrap .top_nav{
  background:rgba(255,255,255,.86) !important;
  backdrop-filter:saturate(160%) blur(14px) !important;
  -webkit-backdrop-filter:saturate(160%) blur(14px) !important;
  border:0 !important; box-shadow:none !important;
  border-bottom:1px solid var(--sy-line) !important;
}
.site-head-wrap{position:sticky !important; top:0 !important; z-index:900 !important;}
.head_box{max-width:1280px !important; margin:0 auto !important; padding:14px 20px !important; display:flex !important; align-items:center !important; gap:18px;}
.head_logo{margin-right:6px !important; flex:0 0 auto;}
.head_logo img{height:34px !important; width:auto !important;}
.head_menu_a,.top_link{
  font-size:15px !important; font-weight:500 !important; color:var(--sy-ink) !important;
  padding:8px 14px !important; border-radius:999px !important; line-height:1 !important;
  background:transparent !important; border:0 !important; position:relative;
}
.head_menu_a:hover,.head_menu_a.active,.top_link:hover{
  color:var(--sy-accent) !important; background:var(--sy-accent-soft) !important;
}
.head_menu_a.active{font-weight:600 !important;}
/* 搜索胶囊 */
.head_search,.head_search_inner{
  border-radius:999px !important; overflow:hidden; border:1.5px solid var(--sy-line) !important;
  background:var(--sy-card) !important; box-shadow:none !important;
}
.head_search input{font-size:14px !important; color:var(--sy-ink) !important;}
.head_search input::placeholder{color:#B4B3AC !important;}
.head_search_capsule_host{min-width:220px !important;}
/* 导航右侧小图标按钮 */
.head_a_tools .top_ico,.head_user,.lang-wrap .top_ico{
  border-radius:999px !important; border:1.5px solid var(--sy-line) !important;
  background:var(--sy-card) !important; width:38px !important; height:38px !important;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--sy-ink) !important; transition:all .18s ease;
}
.head_a_tools .top_ico:hover,.head_user:hover{border-color:var(--sy-accent) !important; color:var(--sy-accent) !important; background:var(--sy-accent-soft) !important;}

/* ---------- 3. 首页板块结构 ---------- */
.home-detail .box,.member-wrap .box{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:34px 0 10px !important; margin:0 !important;
}
/* 板块标题：竖条 + 粗标题 + 轻链接 */
.title,.hu-section-head,.home-unified-section-head{
  border:0 !important; background:transparent !important;
  display:flex !important; align-items:center; gap:10px; padding:0 0 18px !important; margin:0 !important;
}
.title h2,.hu-section-head h2,.home-unified-section-head h2{
  font-size:21px !important; font-weight:700 !important; color:var(--sy-ink) !important;
  letter-spacing:.02em; margin:0 !important; padding:0 !important; display:flex; align-items:center;
  background:transparent !important; line-height:1.2 !important;
}
.title h2::before,.hu-section-head h2::before,.home-unified-section-head h2::before{
  content:''; display:inline-block; width:4px; height:18px; border-radius:2px;
  background:var(--sy-accent); margin-right:10px; flex:0 0 auto;
}
/* 藏掉旧版彩色小图标 */
.laset_new_img{display:none !important;}
/* 更多链接 */
.pc_more,.hu-section-head a,.title a{
  margin-left:auto !important; font-size:13px !important; font-weight:500 !important;
  color:var(--sy-muted) !important; background:transparent !important; border:0 !important;
  padding:6px 12px !important; border-radius:999px !important;
}
.pc_more:hover{color:var(--sy-accent) !important; background:var(--sy-accent-soft) !important;}

/* 热门推荐 Tab 行 */
.latest-tab-nav{margin-bottom:4px !important;}
.latest-tab-nav .nav-list{display:flex; gap:6px; flex-wrap:wrap;}
#latest1,#latest-tab-nav li,.latest-tab-nav li{
  padding:7px 16px !important; border-radius:999px !important; font-size:14px !important;
  color:var(--sy-muted) !important; background:transparent !important;
  border:1.5px solid transparent !important; cursor:pointer; transition:all .18s ease;
}
.latest-tab-nav li.current,#latest1.current,.latest-tab-nav li:hover{
  color:#fff !important; background:var(--sy-accent) !important; font-weight:600 !important;
}
.latest-tab-nav li span{display:inline-flex; align-items:center; gap:4px;}

/* ---------- 4. 海报卡片栅格 ---------- */
.img-list,.vodlist,.hu-vlist{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important;
  gap:22px 16px !important; margin:0 !important; padding:0 !important;
}
.home-detail .img-list,.home-unified .img-list{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)) !important;}
.vodlist_item,.home-skeleton-card{list-style:none !important; padding:0 !important; position:relative;}
/* 海报 */
.vodlist_thumb,.vodlist_thumb img,.img-list a,.mac-poster{
  border-radius:var(--sy-radius) !important; overflow:hidden; display:block;
  box-shadow:var(--sy-shadow); transition:transform .22s ease, box-shadow .22s ease;
  background:#EFEEE8 !important;
}
.vodlist_thumb{aspect-ratio:auto;}
.vodlist_item:hover .vodlist_thumb,.img-list li:hover a.vodlist_thumb{
  transform:translateY(-5px); box-shadow:var(--sy-shadow-lift);
}
/* 卡片文字 */
.vodlist_titbox{padding:10px 2px 0 !important; background:transparent !important;}
.vodlist_title,.vodlist_title a{
  font-size:14px !important; font-weight:600 !important; color:var(--sy-ink) !important;
  line-height:1.45 !important; margin:0 !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vodlist_title a:hover{color:var(--sy-accent) !important;}
.vodlist_sub,.vodlist_sub a{
  font-size:12px !important; color:var(--sy-muted) !important; margin-top:3px !important; font-weight:400 !important;
}
.vodlist_sub a:hover{color:var(--sy-accent) !important;}
/* 海报角标 */
.mac_badge,.vodlist .badge,[class*="badge"]{
  border-radius:6px !important; font-size:11px !important; backdrop-filter:blur(4px);
}
/* hover 播放浮层圆钮 */
.vod_info_wrap .play_img{border-radius:999px !important;}

/* ---------- 5. 通用按钮：胶囊化 ---------- */
.btn,[class*="btn"],button[class*="btn"],
a.mac_btn,input[type="submit"],input[type="button"],.pc_more_btn{
  border-radius:999px !important; font-weight:600 !important; letter-spacing:.02em;
  transition:all .18s ease;
}
.btn-primary,[class*="btn-primary"],.btn[class*="primary"]{
  background:var(--sy-accent) !important; color:#fff !important; border:0 !important;
  box-shadow:0 4px 12px rgba(74,124,111,.28) !important;
}
.btn-primary:hover{background:var(--sy-accent-deep) !important; transform:translateY(-1px);}
.btn-default,[class*="btn-default"]{
  background:var(--sy-card) !important; color:var(--sy-ink) !important;
  border:1.5px solid var(--sy-line) !important; box-shadow:none !important;
}
.btn-default:hover{border-color:var(--sy-accent) !important; color:var(--sy-accent) !important;}
/* 消灭一切旧渐变按钮底 */
.btn,.mac_btn,[class*="btn"][style*="gradient"]{
  background-image:none !important;
}

/* ---------- 6. 列表/筛选页(分类) ---------- */
.filter,.screen_list,.vodlist_screen{
  background:var(--sy-card) !important; border-radius:14px !important;
  border:1px solid var(--sy-line) !important; box-shadow:var(--sy-shadow) !important;
  padding:14px 18px !important;
}
.filter a,.screen_list a{
  padding:5px 14px !important; border-radius:999px !important; font-size:13px !important;
  color:var(--sy-text) !important; margin:3px 2px !important; display:inline-block;
}
.filter a:hover,.screen_list a:hover{background:var(--sy-accent-soft) !important; color:var(--sy-accent) !important;}
.filter a.active,.screen_list a.active,.filter .on{
  background:var(--sy-accent) !important; color:#fff !important; font-weight:600 !important;
}
/* 分页胶囊 */
.paging,.pagebar,.pagination{gap:6px;}
.paging a,.paging span,.pagebar a,.pagination a{
  min-width:34px; height:34px; padding:0 12px !important; border-radius:999px !important;
  border:1.5px solid var(--sy-line) !important; background:var(--sy-card) !important;
  color:var(--sy-text) !important; display:inline-flex; align-items:center; justify-content:center;
  margin:0 3px !important; font-size:13px !important;
}
.paging a:hover,.pagebar a:hover{border-color:var(--sy-accent) !important; color:var(--sy-accent) !important;}
.paging span.current,.paging .on,.pagebar .current{
  background:var(--sy-accent) !important; color:#fff !important; border-color:var(--sy-accent) !important;
}

/* ---------- 7. 详情页 ---------- */
.vod-detail,.vodInfo,.vod_page_detail{
  background:var(--sy-card) !important; border-radius:16px !important;
  border:1px solid var(--sy-line) !important; box-shadow:var(--sy-shadow) !important;
  padding:24px !important;
}
.vodh2,.vod_title h1,.detail-title h1{
  font-size:24px !important; font-weight:700 !important; color:var(--sy-ink) !important;
}
/* 播放大按钮 */
.play_btn,.btn-play,[class*="play-btn"],a[href*="play"] .btn{
  background:var(--sy-accent) !important; color:#fff !important; border-radius:999px !important;
  padding:11px 34px !important; font-size:15px !important; font-weight:600 !important; border:0 !important;
  box-shadow:0 6px 16px rgba(74,124,111,.3) !important;
}
.play_btn:hover{background:var(--sy-accent-deep) !important; transform:translateY(-1px);}
/* 剧集选集块 */
.playlist,.mac_playlist,.vod_playlist{
  background:transparent !important; border:0 !important;
}
.playlist a,.mac_playlist a,.playlist li a{
  border-radius:8px !important; border:1.5px solid var(--sy-line) !important;
  background:var(--sy-card) !important; padding:7px 12px !important; font-size:13px !important;
  color:var(--sy-text) !important; margin:3px !important; display:inline-block;
}
.playlist a:hover{border-color:var(--sy-accent) !important; color:var(--sy-accent) !important;}
.playlist .on a,.playlist a.on,.mac_playlist a.current{
  background:var(--sy-accent) !important; border-color:var(--sy-accent) !important; color:#fff !important;
}

/* ---------- 8. 页脚 ---------- */
.foot,.foot-wrap,.footer{
  background:#EFEDE7 !important; border-top:1px solid var(--sy-line) !important;
  color:var(--sy-muted) !important; margin-top:40px !important; padding:36px 20px 90px !important;
  font-size:13px !important;
}
.foot a{color:var(--sy-muted) !important;}
.foot a:hover{color:var(--sy-accent) !important;}
.fo_t{border:0 !important;}

/* ---------- 9. 搜索结果 / 空状态 ---------- */
.acResults,.search-list-wrap{border-radius:12px !important; box-shadow:var(--sy-shadow-lift) !important;}

/* ---------- 10. 滚动条 ---------- */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#C9C6BC; border-radius:999px;}
::-webkit-scrollbar-thumb:hover{background:var(--sy-accent);}
::-webkit-scrollbar-track{background:transparent;}

/* ---------- 11. 文字选中 ---------- */
::selection{background:var(--sy-accent); color:#fff;}

/* ---------- 12. 暗色模式（.bstem = 黑色主题开关） ---------- */
.bstem{
  --sy-bg:#191B1A; --sy-card:#222524; --sy-ink:#ECEAE4; --sy-text:#C7C5BD;
  --sy-muted:#8A8F86; --sy-line:#32352F; --sy-accent-soft:rgba(74,124,111,.22);
}
.bstem html,.bstem body,.bstem{background:var(--sy-bg) !important; color:var(--sy-text) !important;}
.bstem .site-head-wrap,.bstem #topnav,.bstem .site-head-wrap .top_nav{
  background:rgba(25,27,26,.86) !important; border-bottom:1px solid #32352F !important;
}
.bstem .head_menu_a,.bstem .top_link{color:var(--sy-ink) !important;}
.bstem .head_search,.bstem .head_search_inner,.bstem .head_a_tools .top_ico,.bstem .head_user{
  background:var(--sy-card) !important; border-color:#32352F !important;
}
.bstem .vod-detail,.bstem .filter,.bstem .screen_list{background:var(--sy-card) !important; border-color:#32352F !important;}
.bstem .title h2,.bstem .vodlist_title,.bstem .vodlist_title a,.bstem .vodh2{color:var(--sy-ink) !important;}
.bstem .playlist a,.bstem .paging a{background:var(--sy-card) !important; border-color:#32352F !important;}
.bstem .foot,.bstem .foot-wrap{background:#141615 !important; border-top-color:#32352F !important;}

/* ---------- 13. 移动端微调 ---------- */
@media (max-width:768px){
  .img-list,.vodlist,.hu-vlist{grid-template-columns:repeat(3,1fr) !important; gap:14px 10px !important;}
  .home-detail .img-list{grid-template-columns:repeat(3,1fr) !important;}
  .title h2,.hu-section-head h2,.home-unified-section-head h2{font-size:18px !important;}
  .head_box{padding:10px 12px !important; gap:8px;}
  .home-detail .box,.member-wrap .box{padding:22px 0 6px !important;}
}