/**
 * /djshow/ DJ制作人 — 与 xiu-demo-page / 分类页风格统一
 * 作用域 .xiu-musician-page，不依赖旧版 dj-page--artist / #hothaomenu
 */

/* —— 隔离旧版全局 Tab / 制作人列表规则 —— */
.dj-xiu .xiu-musician-page .xiu-musician-tabs,
.dj-xiu .xiu-musician-page #xiu-musician-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.dj-xiu .xiu-musician-page .xiu-musician-tab {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

.dj-xiu .xiu-musician-page .xiu-musician-tab.is-active {
    color: var(--xiu-musician-green) !important;
    background: var(--xiu-musician-green-dim) !important;
    border-color: transparent !important;
}

.dj-xiu .xiu-musician-page {
    --xiu-musician-green: #39d353;
    --xiu-musician-green-dim: rgba(57, 211, 83, 0.14);
    --xiu-musician-card-bg: #262626;
    --xiu-musician-card-foot-bg: rgba(38, 38, 38, 0.8);
    --xiu-musician-card-name: #fff;
    --xiu-musician-card-type: #888;
    --xiu-musician-card-radius: 10px;
    --xiu-musician-badge-pink-a: #ff1493;
    --xiu-musician-badge-pink-b: #ff53a0;
    --xiu-musician-hero-bg: linear-gradient(120deg, rgba(57, 211, 83, 0.1) 0%, rgba(57, 211, 83, 0.02) 38%, rgba(26, 26, 26, 0.96) 100%);
    --xiu-musician-hero-border: rgba(255, 255, 255, 0.06);
    --xiu-musician-hero-title: #fff;
    --xiu-musician-hero-sub: rgba(255, 255, 255, 0.45);
    --xiu-musician-apply-color: rgba(255, 255, 255, 0.92);
    --xiu-musician-apply-bg: rgba(255, 255, 255, 0.04);
    --xiu-musician-apply-border: rgba(255, 255, 255, 0.14);
    --xiu-musician-apply-deco: rgba(255, 255, 255, 0.35);
    --xiu-musician-divider: rgba(255, 255, 255, 0.06);
    --xiu-musician-en: rgba(255, 255, 255, 0.38);
    --xiu-musician-tab-color: #9ca3af;
    --xiu-musician-tab-hover-color: #e5e7eb;
    --xiu-musician-tab-hover-bg: rgba(255, 255, 255, 0.05);
    --xiu-musician-card-border: rgba(57, 211, 83, 0.16);
    --xiu-musician-card-border-hover: rgba(57, 211, 83, 0.42);
    --xiu-musician-card-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    --xiu-musician-card-shadow-hover: 0 8px 22px rgba(0, 0, 0, 0.28);
    --xiu-musician-search-bg: rgba(255, 255, 255, 0.06);
    --xiu-musician-search-border: rgba(255, 255, 255, 0.08);
    --xiu-musician-search-color: var(--xiu-text);
}



.dj-xiu .xiu-musician-main {

    display: flex;

    flex-direction: column;

    gap: 0.85rem;

}



/* —— 页头横幅（与下方主栏同宽） —— */

.dj-xiu .xiu-musician-hero {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 1rem 1.25rem;

    padding: 1.15rem 1.35rem;

    border-radius: 1rem;

    border: 1px solid var(--xiu-musician-hero-border);
    background: var(--xiu-musician-hero-bg);
    box-shadow: inset 3px 0 0 var(--xiu-musician-green);
}
.dj-xiu .xiu-musician-hero__title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--xiu-musician-hero-title);
}
.dj-xiu .xiu-musician-hero__sub {
    margin: 0.35rem 0 0;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--xiu-musician-hero-sub);

    letter-spacing: 0.14em;

    text-transform: uppercase;

}

.dj-xiu .xiu-musician-apply,
.dj-xiu .xiu-musician-apply.dj-tip,
.dj-xiu .xiu-musician-apply.tooltip {
    display: inline-flex !important;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem !important;
    border-radius: 999px !important;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--xiu-musician-apply-color) !important;
    background: var(--xiu-musician-apply-bg) !important;
    border: 1px solid var(--xiu-musician-apply-border) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
    opacity: 1 !important;
    position: static !important;
    pointer-events: auto !important;
}

.dj-xiu .xiu-musician-apply__deco {
    color: var(--xiu-musician-apply-deco);

    font-weight: 400;

}

.dj-xiu .xiu-musician-apply:hover,
.dj-xiu .xiu-musician-apply.dj-tip:hover,
.dj-xiu .xiu-musician-apply.tooltip:hover {
    color: #fff !important;
    border-color: rgba(57, 211, 83, 0.45) !important;
    background: rgba(57, 211, 83, 0.08) !important;
    transform: translateY(-1px);
}



/* —— 内容区块 —— */

.dj-xiu .xiu-musician-page .xiu-musician-block {

    margin-bottom: 0;

}

.dj-xiu .xiu-musician-page .xiu-musician-block__en {

    font-size: 0.72rem;

    color: var(--xiu-musician-en);

    letter-spacing: 0.06em;

    text-transform: uppercase;

    white-space: nowrap;

}

.dj-xiu .xiu-musician-page .xiu-demo-head {

    padding-bottom: 0.75rem;

    margin-bottom: 1rem;

    border-bottom: 1px solid var(--xiu-musician-divider);

}

.dj-xiu .xiu-musician-page .xiu-demo-title {

    font-size: 1.15rem;

}



.dj-xiu .xiu-musician-tabs {

    display: flex;

    align-items: center;

    gap: 0.25rem;

    flex-wrap: wrap;

    margin: 0;

}

.dj-xiu .xiu-musician-tab {

    display: inline-flex;

    align-items: center;

    padding: 0.35rem 0.95rem;

    border-radius: 999px;

    font-size: 0.84rem;

    font-weight: 500;

    color: var(--xiu-musician-tab-color);

    background: transparent;

    text-decoration: none;

    transition: color 0.2s ease, background 0.2s ease;

    white-space: nowrap;

}

.dj-xiu .xiu-musician-tab:hover {

    color: var(--xiu-musician-tab-hover-color);
    background: var(--xiu-musician-tab-hover-bg);

}

.dj-xiu .xiu-musician-tab.is-active {

    color: var(--xiu-musician-green);

    background: var(--xiu-musician-green-dim);

}



.dj-xiu .xiu-musician-row {

    --bs-gutter-x: 0.75rem;

}

.dj-xiu .xiu-musician-col {

    margin-bottom: 0.85rem;

}

.dj-xiu .xiu-musician-block--main .xiu-musician-col:last-child,

.dj-xiu .xiu-musician-block--main .xiu-musician-col:nth-last-child(-n+4) {

    margin-bottom: 0;

}



/* —— 制作人卡片 —— */

.dj-xiu .xiu-musician-card {

    display: block;

    text-decoration: none;

    color: inherit;

    height: 100%;

}

.dj-xiu .xiu-musician-card:hover {

    color: inherit;

}

.dj-xiu .xiu-musician-card__box {

    position: relative;

    overflow: hidden;

    height: 100%;

    text-align: center;

    background: var(--xiu-musician-card-bg);

    border-radius: var(--xiu-musician-card-radius);

    border: 1px solid var(--xiu-musician-card-border);
    box-shadow: var(--xiu-musician-card-shadow);

    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;

}

.dj-xiu .xiu-musician-card:hover .xiu-musician-card__box {

    border-color: var(--xiu-musician-card-border-hover);

    box-shadow: var(--xiu-musician-card-shadow-hover);

    transform: translateY(-2px);

}

.dj-xiu .xiu-musician-card__img {

    display: block;

    width: 100%;

    height: auto;

    border-radius: 0;

    vertical-align: top;

}

.dj-xiu .xiu-musician-card__badge {

    position: absolute;

    z-index: 4;

    left: 10px;

    top: 12px;

    max-width: calc(100% - 1.25rem);

    height: 22px;

    padding: 2px 8px;

    font-size: 12px;

    font-weight: 500;

    line-height: 18px;

    color: #fff;

    background: linear-gradient(to right, var(--xiu-musician-badge-pink-a), var(--xiu-musician-badge-pink-b));

    border-radius: 6px 0 6px 0;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.dj-xiu .xiu-musician-card__badge--top,

.dj-xiu .xiu-musician-card__badge--green {

    background: linear-gradient(to right, var(--xiu-musician-badge-pink-a), var(--xiu-musician-badge-pink-b));

}

.dj-xiu .xiu-musician-card__badge--gold {

    background: linear-gradient(to right, #2d8839, #77a52b);

}



.dj-xiu .xiu-musician-card__meta {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 5;

    padding: 10px;

    background: var(--xiu-musician-card-foot-bg);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);

    transition: bottom 0.3s ease, background 0.3s ease, color 0.3s ease, backdrop-filter 0.3s ease;
}

.dj-xiu .xiu-musician-card__name {
    margin: 0 0 2px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--xiu-musician-card-name);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    transition: color 0.3s ease;

}

.dj-xiu .xiu-musician-card__type {

    margin: 0;

    font-size: 13px;

    line-height: 1.3;

    color: var(--xiu-musician-card-type);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    transition: color 0.3s ease;

}



.dj-xiu .xiu-musician-card__overlay {

    position: absolute;

    inset: 0;

    z-index: 3;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.4s ease-in-out;

}

.dj-xiu .xiu-musician-card__overlay-bg {

    position: absolute;

    left: 0;

    width: 100%;

    height: 100%;

    top: 100%;

    border-radius: var(--xiu-musician-card-radius);

    background: linear-gradient(

        to top,

        rgb(50, 205, 50) 0%,

        rgba(50, 205, 50, 0.72) 45%,

        rgba(50, 205, 50, 0.4) 100%

    );

    transition: top 0.5s ease;

}

.dj-xiu .xiu-musician-card__play {

    position: absolute;

    top: 40%;

    left: 50%;

    transform: translate(-50%, -50%);

    opacity: 0;

    transition: opacity 0.3s ease 0.1s;

}

.dj-xiu .xiu-musician-card__play i {

    display: block;

    font-size: 42px;

    line-height: 1;

    color: #fff;

}



.dj-xiu .xiu-musician-card:hover .xiu-musician-card__overlay {

    opacity: 1;

}

.dj-xiu .xiu-musician-card:hover .xiu-musician-card__overlay-bg {

    top: 0;

}

.dj-xiu .xiu-musician-card:hover .xiu-musician-card__play {

    opacity: 1;

}

.dj-xiu .xiu-musician-card:hover .xiu-musician-card__meta {

    bottom: 20%;

    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;

}

.dj-xiu .xiu-musician-card:hover .xiu-musician-card__name,

.dj-xiu .xiu-musician-card:hover .xiu-musician-card__type {

    color: #fff;

}



/* —— 分页 —— */

.dj-xiu .xiu-musician-bottom-bar {

    margin-top: 1rem;

    padding-top: 0.85rem;

    border-top: 1px solid var(--xiu-musician-divider);

}



/* —— 侧栏 —— */

.dj-xiu .xiu-musician-page > .row.g-3 {

    align-items: stretch;

}

.dj-xiu .xiu-musician-page .xiu-page-sidebar-inner > .side-card {

    flex-shrink: 0;

}

.dj-xiu .xiu-musician-page .xiu-page-sidebar-inner {

    overflow: visible;

}

.dj-xiu .xiu-musician-search-card .xiu-musician-search {

    margin: 0;

}

.dj-xiu .xiu-musician-search .form-control {

    background: var(--xiu-musician-search-bg);
    border-color: var(--xiu-musician-search-border);
    color: var(--xiu-musician-search-color);

}

.dj-xiu .xiu-musician-search .btn-primary {

    background: var(--xiu-musician-green);

    border-color: var(--xiu-musician-green);

    color: #121212;

}



@media (max-width: 991px) {

    .dj-xiu .xiu-musician-hero {

        padding: 1rem 1.1rem;

    }

    .dj-xiu .xiu-musician-hero__title {

        font-size: 1.45rem;

    }

}



@media (max-width: 767px) {

    .dj-xiu .xiu-musician-card__name { font-size: 15px; }

    .dj-xiu .xiu-musician-card__type { font-size: 12px; }

    .dj-xiu .xiu-musician-card__badge { font-size: 11px; height: 20px; line-height: 16px; }

    .dj-xiu .xiu-musician-card__play i { font-size: 36px; }

    .dj-xiu .xiu-musician-page .xiu-demo-title { font-size: 1.05rem; }

    .dj-xiu .xiu-musician-apply {

        width: 100%;

        justify-content: center;

    }

}



[data-theme="light"] .dj-xiu .xiu-musician-page,
[data-bs-theme="light"] .dj-xiu .xiu-musician-page {
    --xiu-musician-green: #1db954;
    --xiu-musician-green-dim: rgba(29, 185, 84, 0.12);
    --xiu-musician-card-bg: #ffffff;
    --xiu-musician-card-foot-bg: rgba(243, 244, 246, 0.8);
    --xiu-musician-card-name: #111827;
    --xiu-musician-card-type: #6b7280;
    --xiu-musician-hero-bg: linear-gradient(120deg, rgba(29, 185, 84, 0.08) 0%, #ffffff 100%);
    --xiu-musician-hero-border: #e5e7eb;
    --xiu-musician-hero-title: #111827;
    --xiu-musician-hero-sub: #6b7280;
    --xiu-musician-apply-color: #374151;
    --xiu-musician-apply-bg: #f9fafb;
    --xiu-musician-apply-border: #e5e7eb;
    --xiu-musician-apply-deco: #9ca3af;
    --xiu-musician-divider: rgba(15, 23, 42, 0.08);
    --xiu-musician-en: #9ca3af;
    --xiu-musician-tab-color: #6b7280;
    --xiu-musician-tab-hover-color: #111827;
    --xiu-musician-tab-hover-bg: #f3f4f6;
    --xiu-musician-card-border: rgba(29, 185, 84, 0.22);
    --xiu-musician-card-border-hover: rgba(29, 185, 84, 0.48);
    --xiu-musician-card-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    --xiu-musician-card-shadow-hover: 0 8px 22px rgba(15, 23, 42, 0.12);
    --xiu-musician-search-bg: #f3f4f6;
    --xiu-musician-search-border: #e5e7eb;
    --xiu-musician-search-color: #111827;
}

[data-theme="light"] .dj-xiu .xiu-musician-hero,
[data-bs-theme="light"] .dj-xiu .xiu-musician-hero {
    background: var(--xiu-musician-hero-bg);
    border-color: var(--xiu-musician-hero-border);
    box-shadow: inset 3px 0 0 var(--xiu-musician-green);
}

[data-theme="light"] .dj-xiu .xiu-musician-hero__title,
[data-bs-theme="light"] .dj-xiu .xiu-musician-hero__title {
    color: var(--xiu-musician-hero-title);
}

[data-theme="light"] .dj-xiu .xiu-musician-hero__sub,
[data-bs-theme="light"] .dj-xiu .xiu-musician-hero__sub {
    color: var(--xiu-musician-hero-sub);
}

[data-theme="light"] .dj-xiu .xiu-musician-apply,
[data-bs-theme="light"] .dj-xiu .xiu-musician-apply,
[data-theme="light"] .dj-xiu .xiu-musician-apply.dj-tip,
[data-bs-theme="light"] .dj-xiu .xiu-musician-apply.dj-tip,
[data-theme="light"] .dj-xiu .xiu-musician-apply.tooltip,
[data-bs-theme="light"] .dj-xiu .xiu-musician-apply.tooltip {
    color: var(--xiu-musician-apply-color) !important;
    background: var(--xiu-musician-apply-bg) !important;
    border-color: var(--xiu-musician-apply-border) !important;
}

[data-theme="light"] .dj-xiu .xiu-musician-apply:hover,
[data-bs-theme="light"] .dj-xiu .xiu-musician-apply:hover,
[data-theme="light"] .dj-xiu .xiu-musician-apply.dj-tip:hover,
[data-bs-theme="light"] .dj-xiu .xiu-musician-apply.dj-tip:hover {
    color: #111827 !important;
    border-color: rgba(29, 185, 84, 0.45) !important;
    background: rgba(29, 185, 84, 0.08) !important;
}

[data-theme="light"] .dj-xiu .xiu-musician-page .xiu-musician-block__en,
[data-bs-theme="light"] .dj-xiu .xiu-musician-page .xiu-musician-block__en {
    color: var(--xiu-musician-en);
}

[data-theme="light"] .dj-xiu .xiu-musician-page .xiu-demo-head,
[data-bs-theme="light"] .dj-xiu .xiu-musician-page .xiu-demo-head {
    border-bottom-color: var(--xiu-musician-divider);
}

[data-theme="light"] .dj-xiu .xiu-musician-page .xiu-demo-title,
[data-bs-theme="light"] .dj-xiu .xiu-musician-page .xiu-demo-title {
    color: #111827;
}

[data-theme="light"] .dj-xiu .xiu-musician-tab,
[data-bs-theme="light"] .dj-xiu .xiu-musician-tab {
    color: var(--xiu-musician-tab-color);
}

[data-theme="light"] .dj-xiu .xiu-musician-tab:hover,
[data-bs-theme="light"] .dj-xiu .xiu-musician-tab:hover {
    color: var(--xiu-musician-tab-hover-color);
    background: var(--xiu-musician-tab-hover-bg);
}

[data-theme="light"] .dj-xiu .xiu-musician-tab.is-active,
[data-bs-theme="light"] .dj-xiu .xiu-musician-tab.is-active {
    color: var(--xiu-musician-green) !important;
    background: var(--xiu-musician-green-dim) !important;
}

[data-theme="light"] .dj-xiu .xiu-musician-page .xiu-musician-bottom-bar,
[data-bs-theme="light"] .dj-xiu .xiu-musician-page .xiu-musician-bottom-bar {
    border-top-color: var(--xiu-musician-divider);
}

[data-theme="light"] .dj-xiu .xiu-musician-search .form-control,
[data-bs-theme="light"] .dj-xiu .xiu-musician-search .form-control {
    background: var(--xiu-musician-search-bg);
    border-color: var(--xiu-musician-search-border);
    color: var(--xiu-musician-search-color);
}

[data-theme="light"] .dj-xiu .xiu-musician-search .btn-primary,
[data-bs-theme="light"] .dj-xiu .xiu-musician-search .btn-primary {
    background: var(--xiu-musician-green);
    border-color: var(--xiu-musician-green);
    color: #fff;
}

[data-theme="light"] .dj-xiu .xiu-musician-page .xiu-demo-panel,
[data-bs-theme="light"] .dj-xiu .xiu-musician-page .xiu-demo-panel {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .dj-xiu .xiu-musician-page .bottom-bar,
[data-bs-theme="light"] .dj-xiu .xiu-musician-page .bottom-bar {
    background: #f9fafb;
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .dj-xiu .xiu-musician-page .bottom-bar .selected-count,
[data-bs-theme="light"] .dj-xiu .xiu-musician-page .bottom-bar .selected-count {
    color: #6b7280;
}

[data-theme="light"] .dj-xiu .xiu-musician-page .bottom-bar .selected-count b,
[data-bs-theme="light"] .dj-xiu .xiu-musician-page .bottom-bar .selected-count b {
    color: #111827;
}

[data-theme="light"] .dj-xiu .xiu-musician-page .pagination-btn,
[data-bs-theme="light"] .dj-xiu .xiu-musician-page .pagination-btn {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.12);
    color: #374151;
}

[data-theme="light"] .dj-xiu .xiu-musician-page .pagination-btn:hover,
[data-bs-theme="light"] .dj-xiu .xiu-musician-page .pagination-btn:hover {
    border-color: rgba(29, 185, 84, 0.45);
    color: #16a34a;
}

[data-theme="light"] .dj-xiu .xiu-musician-page .pagination-bar .page-info,
[data-bs-theme="light"] .dj-xiu .xiu-musician-page .pagination-bar .page-info {
    color: #6b7280;
}