:root {
    --bili-pink: #fb7299;
    --bili-pink-dark: #d94f7b;
    --bili-purple: #8064d7;
    --bili-ink: #352c4d;
    --bili-muted: #746d82;
    --bili-surface: rgba(255, 255, 255, .92);
    --bili-border: rgba(128, 100, 215, .16)
}

.bili-hub,
.bili-hub * {
    box-sizing: border-box
}

.bili-hub a {
    color: inherit;
    text-decoration: none
}

.bili-hub__card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--bili-border);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(250, 244, 255, .9));
    color: var(--bili-ink);
    box-shadow: 0 4px 14px rgba(66, 45, 110, .08);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease
}

a.bili-hub__card:hover,
a.bili-hub__card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(251, 114, 153, .45);
    box-shadow: 0 7px 18px rgba(66, 45, 110, .14);
    outline: 0
}

.bili-hub__label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--bili-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25
}

.bili-hub__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--bili-pink);
    color: #fff;
    font-size: 13px;
    font-weight: 800
}

.bili-hub__name,
.bili-hub__live-title,
.bili-hub__latest-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    word-break: break-word
}

.bili-hub__name {
    margin-top: 5px;
    color: var(--bili-purple);
    font-size: 15px;
    line-height: 1.25;
    -webkit-line-clamp: 1
}

.bili-hub__stats {
    display: flex;
    gap: 12px;
    margin-top: 7px;
    color: var(--bili-muted);
    font-size: 11px;
    white-space: nowrap
}

.bili-hub__stats strong {
    margin-right: 3px;
    color: var(--bili-ink);
    font-size: 14px
}

.bili-hub__status-row {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--bili-muted);
    font-size: 13px
}

.bili-hub__dot,
.bili-mobile-trigger__dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #9b96a4;
    box-shadow: 0 0 0 3px rgba(155, 150, 164, .16)
}

.bili-hub__live-title {
    margin-top: 7px;
    color: var(--bili-ink);
    font-size: 13px;
    line-height: 1.35;
    -webkit-line-clamp: 2
}

.bili-hub__action {
    display: block;
    margin-top: 5px;
    color: var(--bili-purple);
    font-size: 11px;
    font-weight: 700
}

.bili-hub.is-live .bili-hub__live {
    border-color: rgba(239, 71, 111, .42);
    background: linear-gradient(145deg, #fff, #fff0f4)
}

.bili-hub.is-live .bili-hub__status-row {
    color: #d92e5b
}

.bili-hub.is-live .bili-hub__dot,
.bili-mobile-trigger.is-live .bili-mobile-trigger__dot {
    background: #ef476f;
    box-shadow: 0 0 0 4px rgba(239, 71, 111, .16);
    animation: bili-live-pulse 1.6s ease-in-out infinite
}

.bili-hub.is-unknown .bili-hub__status-row {
    color: #8a6b36
}

@keyframes bili-live-pulse {
    0%, 100% { transform: scale(1); opacity: 1 }
    50% { transform: scale(.72); opacity: .65 }
}

.bili-hub__latest-title {
    margin-top: 8px;
    color: var(--bili-ink);
    font-size: 13px;
    line-height: 1.42;
    -webkit-line-clamp: 2
}

.bili-hub__latest-meta {
    display: block;
    margin-top: 6px;
    color: var(--bili-purple);
    font-size: 11px;
    font-weight: 700
}

.bili-hub__trend-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.bili-hub__trend-summary {
    color: var(--bili-purple);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap
}

.bili-hub__chart {
    display: block;
    width: 100%;
    height: 48px;
    margin-top: 6px;
    overflow: visible
}

.bili-hub__chart-grid {
    stroke: rgba(128, 100, 215, .13);
    stroke-width: 1
}

.bili-hub__chart-area {
    fill: rgba(128, 100, 215, .12)
}

.bili-hub__chart-line {
    fill: none;
    stroke: var(--bili-purple);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round
}

.bili-hub__chart-dot {
    fill: var(--bili-pink);
    stroke: #fff;
    stroke-width: 2
}

.bili-hub__updated {
    color: var(--bili-muted);
    font-size: 10px
}

.bili-hub--desktop {
    display: grid;
    grid-template-columns: 1.05fr 1.15fr 1.65fr 1.25fr;
    gap: 8px;
    width: 64vw;
    min-height: 105px;
    height: 14vh;
    max-height: 132px;
    margin: 4.8vh 1.8vw 0;
    padding: 7px;
    border: 1px solid rgba(128, 100, 215, .12);
    border-radius: 14px;
    background: rgba(255, 255, 255, .68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72)
}

.bili-hub--desktop .bili-hub__card {
    min-height: 89px;
    padding: 9px 11px
}

.bili-hub--desktop + .song_list {
    height: calc(84vh - 15vh);
    margin-top: .7vh
}

.bili-mobile-trigger,
.bili-hub-backdrop,
.bili-hub--mobile {
    display: none
}

@media (max-width: 900px) {
    .bili-hub--desktop {
        grid-template-columns: .95fr 1.1fr 1.55fr 1.2fr;
        gap: 5px;
        padding: 5px
    }

    .bili-hub--desktop .bili-hub__card {
        padding: 8px
    }

    .bili-hub__stats {
        gap: 6px
    }
}

/* Mobile template uses a fixed sheet so the existing song/tag touch zones stay unchanged. */
.bili-mobile-trigger {
    position: absolute;
    z-index: 5;
    top: 12px;
    right: 12px;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(128, 100, 215, .25);
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    color: var(--bili-purple);
    box-shadow: 0 4px 13px rgba(62, 40, 103, .12);
    font: 700 13px/1 sans-serif;
    -webkit-tap-highlight-color: transparent
}

.bili-mobile-trigger:focus-visible {
    outline: 3px solid rgba(251, 114, 153, .28);
    outline-offset: 2px
}

.bili-hub-backdrop {
    position: fixed;
    z-index: 1000;
    inset: 0;
    background: rgba(29, 19, 45, .46);
    opacity: 0;
    transition: opacity .2s ease
}

.bili-hub-backdrop.is-open {
    opacity: 1
}

.bili-hub--mobile {
    position: fixed;
    z-index: 1001;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: min(78vh, 660px);
    padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    border-radius: 22px 22px 0 0;
    background: #faf8ff;
    box-shadow: 0 -12px 36px rgba(34, 19, 57, .22);
    color: var(--bili-ink);
    transform: translateY(105%);
    visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s
}

.bili-hub--mobile.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform .22s ease
}

.bili-hub__mobile-head {
    position: sticky;
    z-index: 2;
    top: -14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -4px -4px 10px;
    padding: 8px 4px 7px;
    background: rgba(250, 248, 255, .96)
}

.bili-hub__mobile-title {
    margin: 0;
    color: var(--bili-ink);
    font-size: 19px;
    line-height: 1.3
}

.bili-hub__close {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(128, 100, 215, .12);
    color: var(--bili-purple);
    font-size: 25px;
    line-height: 36px
}

.bili-hub__mobile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px
}

.bili-hub--mobile .bili-hub__card {
    min-height: 108px;
    padding: 12px
}

.bili-hub--mobile .bili-hub__latest,
.bili-hub--mobile .bili-hub__trend {
    grid-column: 1 / -1
}

.bili-hub--mobile .bili-hub__latest {
    min-height: 96px
}

.bili-hub--mobile .bili-hub__trend {
    min-height: 118px
}

.bili-hub--mobile .bili-hub__chart {
    height: 62px
}

.bili-hub__mobile-foot {
    margin: 10px 2px 0;
    color: var(--bili-muted);
    font-size: 11px;
    text-align: right
}

body.bili-drawer-open .tool_box {
    pointer-events: none;
    opacity: .25
}

.bili-hub-backdrop[hidden] {
    display: none !important
}

body.is-mobile-template .bili-mobile-trigger {
    display: inline-flex
}

body.is-mobile-template .bili-hub-backdrop,
body.is-mobile-template .bili-hub--mobile {
    display: block
}

body.is-mobile-template .bili-hub--desktop {
    display: none
}

@media (max-width: 719px) {
    .bili-mobile-trigger {
        display: inline-flex
    }

    .bili-hub-backdrop,
    .bili-hub--mobile {
        display: block
    }

    .bili-hub--desktop {
        display: none
    }
}

@media (prefers-reduced-motion: reduce) {
    .bili-hub__card,
    .bili-hub--mobile,
    .bili-hub-backdrop,
    .bili-hub__dot,
    .bili-mobile-trigger__dot {
        animation: none !important;
        transition: none !important
    }
}