/* =========================
   AdPanel 广告组件：黑白灰主题
   ========================= */
/* 仅替换色彩为黑白灰，不修改结构与尺寸 */

.ytpanel-bar {
    background: var(--bg-300, #252525);
    border-radius: 0 0 12px 12px;
    margin-bottom: 8px;
    overflow: hidden;
    z-index: 999999;
    width: 99%;
    box-shadow: 0 2px 12px rgba(0,0,0,.20);
    padding-bottom: 2px;
    padding-top: 2px;
}

.ytpanel-col {
    padding: 0 0px;
}

/* 广告按钮、分类导航按钮、推广按钮 */
.ytpanel-btn,
.secondLevelName {
    /*background: linear-gradient(110deg, var(--bg-300, #252525) 70%, var(--bg-200, #1b1b1b) 100%);*/
    border: 1px solid var(--bg-400, #1a1a1a);
    border-radius: 2px;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    width: 100%;
    padding: 5px 0;
    color: var(--text-100, #f5f5f5);
    transition: background .17s, color .18s, box-shadow .25s, border-color .18s, transform .18s;
    position: relative;
    user-select: none;
}

/*清除row边距*/
.ytpanel-row{
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}
.ytpanel-row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    margin-top: var(--bs-gutter-y);
}

/* 悬停/激活态 */
.ytpanel-btn:hover,
.secondLevelName:hover {
    background: linear-gradient(135deg, #2f2f2f 60%, #3b3b3b 100%);
    border-color: #a0a0a0;
    color: #ffffff;
    box-shadow: 0 4px 14px -6px rgba(0,0,0,.35), 0 1px 6px rgba(255,255,255,.08) inset;
    transform: translateY(-2px) scale(1.03);
}
.ytpanel-btn:active,
.secondLevelName:active {
    background: linear-gradient(155deg, #1e1e1e 70%, #2f2f2f 100%);
    transform: translateY(0) scale(.96);
    box-shadow: 0 2px 6px -3px rgba(0,0,0,.5) inset;
    border-color: #3a3a3a;
}
.ytpanel-btn:focus-visible,
.secondLevelName:focus-visible {
    outline: 2px solid var(--primary-300, #bdbdbd);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(189,189,189,.5), 0 0 0 1px rgba(189,189,189,.35) inset;
    border-color: var(--primary-300, #bdbdbd);
}
.ytpanel-btn:disabled,
.secondLevelName:disabled,
.ytpanel-btn.is-disabled,
.secondLevelName.is-disabled {
    cursor: not-allowed;
    opacity: .55;
    filter: grayscale(.3);
    background: #2a2a2a;
    border-color: #333;
    box-shadow: none;
    transform: none;
    color: var(--text-300, #b5b5b5);
}
.ytpanel-btn.is-active,
.secondLevelName.is-active {
    background: linear-gradient(135deg, #8c8c8c 60%, #6e6e6e 100%);
    color: #fff;
    border-color: #9a9a9a;
    box-shadow: 0 6px 18px -8px rgba(0,0,0,.35), 0 0 0 1px #ffffff11 inset;
    transform: translateY(-2px);
}
.ytpanel-btn.is-active:hover,
.secondLevelName.is-active:hover {
    filter: brightness(1.07);
}

/* 波纹反馈动画（改为灰色） */
.ytpanel-btn::after,
.secondLevelName::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(180,180,180,.35) 0%, rgba(180,180,180,0) 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}
.ytpanel-btn.rippling::after,
.secondLevelName.rippling::after {
    animation: btnRipple .6s ease-out;
}
@keyframes btnRipple {
    0%   { width: 0; height: 0; opacity: .48; }
    60%  { width: 200%; height: 200%; opacity: .22; }
    100% { width: 250%; height: 250%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ytpanel-btn,
    .secondLevelName {
        transition: background .2s, color .2s, border-color .2s;
    }
    .ytpanel-btn:hover,
    .secondLevelName:hover,
    .ytpanel-btn:active,
    .secondLevelName:active {
        transform: none;
    }
    .ytpanel-btn.rippling::after,
    .secondLevelName.rippling::after {
        animation: none;
        display: none;
    }
}

.secondLevelName {
    font-size: 13px;
    padding: 0 5px;
}

.ytpanel-btn--highlight {
    color: var(--text-100, #bdbdbd);
    font-weight: 500;
    text-shadow: 0 0 6px rgba(200,200,200,.25);
    max-width: 100px !important;
}

/* 统一为灰度色 */
/*.ytpanel-yellow { color: #ffe484; }*/
/*.ytpanel-blue { color: #63e2ff; }*/
/*.ytpanel-gold { color: #ffd700; }*/

/*背景颜色*/
.ytpanel-yellow { background: #E7C77E; }
.ytpanel-blue { background: #449188; }
.ytpanel-red { background: #F24D4D; }
.ytpanel-green { background: #4CAF50; }
.ytpanel-gold { background: #D4AF37; }
.ytpanel-purple { background: #9C27B0; }
.ytpanel-pink { background: #E91E63; }
.ytpanel-orange { background: #FF9800; }
.ytpanel-teal { background: #009688; }
.ytpanel-cyan { background: #00BCD4; }
.ytpanel-lime { background: #CDDC39; }
.ytpanel-indigo { background: #3F51B5; }
.ytpanel-brown { background: #795548; }
.ytpanel-gray { background: #9E9E9E; }
.ytpanel-black { background: #212121; }
.ytpanel-white { background: #F5F5F5; color: #212121; }


/* =========================
   广告宫格（首页/播放页）
   ========================= */
.nv_blist {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    background: var(--color-bg-card, #1b1b1b);
    border-radius: 12px;
    margin: 6px 2px;
}
.nv_blist_cell {
    position: relative;
    text-align: center;
    padding: 6px;
    width: 16.6666666666%;
    transition: background .15s;
}
.nv_blist_cell:hover {
    background: var(--bg-300, #252525);
}
.nv_blist_cell img {
    overflow: hidden;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    background: var(--bg-200, #1b1b1b);
}
.nv_blist span {
    display: inline-block;
    width: 100%;
    font-size: 12px;
    line-height: 28px;
    color: var(--text-100, #f5f5f5);
    white-space: nowrap;
    font-weight: 500;
}

/* =========================
   分类导航/推广
   ========================= */
.one_category {
    position: relative;
    background: var(--bg-300, #252525);
    padding: 6px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    margin-bottom: 5px;
}
.category_name {
    width: 12%;
    font-size: 15px;
    color: #fff;
    position: relative;
    font-weight: 700;
    letter-spacing: .05em;
}
.category_name:after {
    position: absolute;
    width: 2px;
    height: 20px;
    top: 4px;
    right: -13px;
    content: "";
    background: #9a9a9a;
    border-radius: 2px;
}

/* =========================
   横幅广告区域
   ========================= */
.banner {
    width: 100%;
    text-align: center;
}
.banner a {
    display: block;
    margin-bottom: 2px;
}
.banner img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    background: var(--bg-200, #1b1b1b);
}

/* =========================
   底部横幅广告
   ========================= */
.mx-2 img {
    width: 100%;
    margin: 4px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    background: var(--bg-200, #1b1b1b);
}

/* =========================
   底部悬浮广告轮播
   ========================= */
.carousel-dipiao {
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
    padding: 0;
}
.carousel-dipiao .d-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.carousel-dipiao img {
    border-radius: 6px;
    display: block;
    background: var(--bg-200, #1b1b1b);
}
.carousel-dipiao .ytpanel-float-title {
    color: #e8e8e8;
    font-size: 15.2px;
    font-weight: 700;
}
.carousel-dipiao .ytpanel-float-desc {
    font-size: 12px;
    color: #cfcfcf;
}

/* =========================
   广告栏行间布局
   ========================= */
.row.text-center.align-items-center.top-ads-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

/* 轮播指示点（灰度） */
.owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: -30px;
    z-index: 9999;
    position: relative;
}

/* =========================
   响应式适配
   ========================= */