/* ==========================================================
   主题样式：在 common.css 之后加载，覆盖配色和组件外观
   主色：玫红 #ff2e74 → 橙 #ff7a3d 渐变；底色：深紫黑
   想换颜色，只改下面 :root 里的几个变量即可
   ========================================================== */
:root{
  --dx-primary-color:#ff2e74;
  --hx-accent:#ff7a3d;
  --hx-grad:linear-gradient(90deg,#ff2e74 0%,#ff7a3d 100%);
  --hx-card-bg:#16131f;
  --hx-card-hover:#1d1828;
  --hx-line:#2a2436;
  --dx-red-color:#ff3b5c;
  --dx-font1-color:#cfc8dc;
  --dx-font2-color:#e6e1ee;
  --dx-subtitle-color:#a99fbb;
  --dx-main-bg-color:#0b0a10;
  --dx-base1-color:#1a1624;
  --dx-base2-color:#110f18;
  --dx-base3-color:#13111b;
  --dx-base4-color:#100e16;
  --dx-base5-color:#13111b;
  --dx-base6-color:#221d2e;
  --dx-base7-color:#1b1725;
  --dx-base8-color:#120f19;
  --dx-base9-color:#0a0910;
  --dx-base10-color:#1c1826;
  --dx-base11-color:#201b2b;
  --dx-border-color:#2a2436;
  --dx-scrollbar-thumb-color:#4a3f5c;
  --dx-scrollbar-thumb-hover-color:#ff2e74;
}

/* ---------- 全局 ---------- */
html,body{background-color:var(--dx-main-bg-color)}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;letter-spacing:.2px}
a.link:hover,.is-active{color:var(--dx-primary-color)}
.bg-black{background-color:var(--dx-main-bg-color)}

/* ---------- 顶部 ---------- */
#app-header .header{box-shadow:0 1px 0 var(--hx-line),0 6px 18px rgba(0,0,0,.45)}
#app-header .header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--hx-grad);opacity:.85;z-index:20;pointer-events:none}
.dx-logo-text{
  color:transparent!important;
  background:var(--hx-grad);
  -webkit-background-clip:text;background-clip:text;
  font-family:"Arial Black","Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif!important;
  font-style:italic;font-weight:900!important;letter-spacing:1px;
  font-size:1.9rem!important;line-height:1.15;
  padding-right:4px;
}
#app-footer .dx-logo-text{font-size:1.35rem!important}

/* 搜索框 */
.search-input.form-control,.app-search{background-color:#1c1826!important;border-color:#2e2740!important;color:#fff}
.search-input.form-control:focus,.app-search:focus{border-color:var(--dx-primary-color)!important;box-shadow:0 0 0 2px rgba(255,46,116,.18)}
.btn-primary,.btn-search{background:var(--hx-grad)!important;border-color:transparent!important;color:#fff!important}
.btn-search svg{color:#fff!important}

/* 主导航 */
#app-nav{background-color:var(--dx-base4-color)}
#app-nav .app-nav-item{font-weight:500;margin-right:8px;padding:12px 14px;border-radius:8px;transition:background-color .2s,color .2s}
#app-nav .app-nav-item:hover{background-color:#1f1a2b;color:#fff}
#app-nav li.mr-6{margin-right:0}
.video-sub-menu{background-color:#1a1624;border:1px solid var(--hx-line);box-shadow:0 12px 30px rgba(0,0,0,.5)}
.video-sub-menu::before{border-bottom-color:#1a1624}
.video-sub-item{border-radius:6px;transition:color .2s}
.video-sub-item:hover{color:var(--dx-primary-color)}

/* ---------- 标题 ---------- */
main h1{position:relative;padding-left:14px;letter-spacing:.5px}
main h1::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:5px;border-radius:3px;background:var(--hx-grad)}
@media (min-width:768px){
  main h1.md\:text-5xl{font-size:30px;line-height:1.3}
  main .md\:text-5xl{font-size:30px}
}
.dx-subtitle{color:var(--dx-subtitle-color)}

/* ---------- 排序标签：胶囊样式 ---------- */
.dx-line-tabs{gap:8px;padding:6px 0}
.dx-line-tabs .dx-line-tab-item{margin-right:0;padding:0}
.dx-line-tabs .dx-line-tab-item::after{display:none!important}
.dx-line-tabs .dx-line-tab-item a{display:block;padding:6px 16px;border-radius:999px;background-color:var(--dx-base1-color);border:1px solid var(--hx-line);font-size:14px;line-height:22px;color:var(--dx-font1-color);transition:all .2s}
.dx-line-tabs .dx-line-tab-item a:hover{border-color:var(--dx-primary-color);color:#fff}
.dx-line-tabs .dx-line-tab-item.is-active a{background:var(--hx-grad);border-color:transparent;color:#fff;font-weight:600}
@media (min-width:768px){.dx-line-tabs .dx-line-tab-item a{font-size:15px;padding:7px 20px}}

/* ---------- 视频卡片 ---------- */
.video-items{gap:12px}
@media (min-width:768px){.video-items{gap:18px}}
.video-items .video-item{background-color:var(--hx-card-bg);border:1px solid var(--hx-line);border-radius:12px;overflow:hidden;height:100%;padding-bottom:8px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.video-items .video-item:hover{transform:translateY(-3px);border-color:rgba(255,46,116,.55);box-shadow:0 10px 24px rgba(255,46,116,.16)}
.video-items .video-item > a{border-radius:0}
.video-items .video-item .poster img{border-radius:0;transition:transform .35s ease}
.video-items .video-item:hover .poster img{transform:scale(1.04)}
.video-items .video-item > div{padding:0 10px}
.video-items .video-item .line-clamp-2{color:var(--dx-font2-color);font-size:14px;line-height:1.45;margin-top:8px}
@media (min-width:768px){.video-items .video-item .line-clamp-2{font-size:15px}}
.video-items .video-item a.line-clamp-2:hover{color:var(--dx-primary-color)}
.video-items .video-item .dx-subtitle strong{display:inline-block;font-size:12px;padding:0 8px;line-height:20px;border-radius:4px;background-color:#221c2f;color:#c9bedb}
.video-items .video-item .dx-subtitle a:hover strong{background-color:rgba(255,46,116,.18);color:#ff8fb2}
/* 时长角标 */
.video-item .poster .bg-black.rounded-large{background:rgba(11,10,16,.78)!important;opacity:1!important;border-radius:4px!important;font-size:12px;padding:1px 6px;color:#fff}
.video-item .poster::before{background:var(--hx-grad);height:3px}

/* ---------- 横幅 / 图标广告 ---------- */
.dx-banner-item img{border-radius:10px}
.dx-recommend-icons img{border-radius:14px}

/* ---------- 面包屑 ---------- */
.dx-breadcrumbs a:hover{color:var(--dx-primary-color)}

/* ---------- 分页 ---------- */
.dx-pager .pager-item-left,.dx-pager .pager-item-right{background:var(--hx-grad);border-radius:999px}
.dx-pager .pager-goto .form-control{background-color:#1c1826;border:1px solid var(--hx-line);border-radius:999px;color:#fff}
.dx-pager .pager-goto-btn{background-color:#2a2338;border-radius:999px}
.dx-pager .pager-label strong{color:var(--dx-primary-color)}

/* ---------- 推荐标签块 ---------- */
.hx-panel{background:var(--hx-card-bg);border:1px solid var(--hx-line);border-radius:14px}
.hx-card{background:#120f19;border-color:var(--hx-line)}
.hx-card:hover{border-color:var(--dx-primary-color);background:#16121f}
.hx-card a{color:var(--dx-primary-color)}
.hx-recommend{border-style:solid;border-color:rgba(255,46,116,.35)}
.hx-recommend-title{color:#fff;font-size:15px}
.hx-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.hx-btn{min-height:30px;padding:4px 14px;border-radius:999px;background:transparent;border:1px solid rgba(255,46,116,.5);color:#ff8fb2}
.hx-btn:hover{background:var(--hx-grad);border-color:transparent;color:#fff}

/* 相关搜索 / 标签链接 */
a.rounded.bg-base2.link{border-radius:999px;border:1px solid var(--hx-line);background-color:var(--dx-base1-color)}
a.rounded.bg-base2.link:hover{border-color:var(--dx-primary-color);color:#fff}

/* ---------- 底部 ---------- */
#app-footer{background-color:#0f0d15;border-top:1px solid var(--hx-line);position:relative}
#app-footer::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--hx-grad);opacity:.6}
.cate{border-radius:12px}

/* ---------- 播放页 ---------- */
.play-url{background-color:#1c1826!important;border-radius:8px!important}
.play-url.active{background:var(--hx-grad)!important;color:#fff}
.plays-from a.active{color:var(--dx-primary-color)!important}

/* 滚动条 */
::-webkit-scrollbar-thumb{background-color:var(--dx-scrollbar-thumb-color)}
::-webkit-scrollbar-thumb:hover{background-color:var(--dx-scrollbar-thumb-hover-color)}