/* Scrollbar */
.xh-scroll::-webkit-scrollbar { height: 3px; width: 3px; }
.xh-scroll::-webkit-scrollbar-track { background: transparent; }
.xh-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--xh-accent) 55%, var(--xh-border)); border-radius: 9999px; }

/* Nav pills — chip navigation (simple) */
.xh-nav-chips-row {
    border-top: 1px solid color-mix(in srgb, var(--xh-border) 55%, transparent);
    background: color-mix(in srgb, var(--xh-header) 96%, var(--xh-dark));
    overflow: hidden;
}
.xh-nav-pills {
    display: flex;
    align-items: center;
    gap: .45rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 1px 0;
}
.xh-nav-pills::-webkit-scrollbar { display: none; }
.xh-nav-pill {
    display: inline-flex;
    align-items: center;
    padding: .4rem .85rem;
    border-radius: 9999px;
    font-size: .8125rem;
    font-weight: 500;
    color: color-mix(in srgb, #fff 80%, var(--xh-muted));
    background: color-mix(in srgb, var(--xh-panel) 50%, #000 10%);
    border: 1px solid color-mix(in srgb, var(--xh-border) 65%, transparent);
    white-space: nowrap;
    flex-shrink: 0;
    transition: color .15s, background .15s, border-color .15s;
}
.xh-nav-pill:hover {
    color: #fff;
    border-color: color-mix(in srgb, var(--xh-accent) 25%, var(--xh-border));
    background: color-mix(in srgb, var(--xh-panel) 70%, var(--xh-accent) 6%);
}
.xh-nav-pill.is-active {
    color: #111 !important;
    background: #fff !important;
    border-color: #fff !important;
    font-weight: 600;
}
@media (max-width: 767px) {
    .xh-nav-pill { font-size: .7rem; padding: .25rem .62rem; }
    .xh-nav-chips-row--mobile .xh-nav-pills { gap: .35rem; }
}

/* Mobile header — lebih ramping */
@media (max-width: 767px) {
    html.xh-mobile-site {
        --xh-mobile-pad: 1rem;
        --xh-mobile-gap: .75rem;
        --xh-site-pad: 1rem;
    }
    html.xh-mobile-site main.xh-page-shell {
        padding: 0;
    }
    .xh-mobile-header .xh-mobile-header-bar {
        padding-left: calc(var(--xh-mobile-pad) + env(safe-area-inset-left, 0px));
        padding-right: calc(var(--xh-mobile-pad) + env(safe-area-inset-right, 0px));
        min-height: 3.35rem;
        align-items: center;
    }
    .xh-mobile-header-logo {
        flex: 1;
        display: flex;
        align-items: center;
        min-width: 0;
        max-width: 100%;
    }
    .xh-mobile-header-logo img {
        height: 3rem;
        width: auto;
        max-width: min(calc(100vw - 10.5rem), 15rem);
        object-fit: contain;
        object-position: left center;
        display: block;
    }
    .xh-flash-banner {
        padding-left: calc(var(--xh-mobile-pad) + env(safe-area-inset-left, 0px)) !important;
        padding-right: calc(var(--xh-mobile-pad) + env(safe-area-inset-right, 0px)) !important;
    }
    /* Home / feed */
    .xh-mobile-feed {
        padding:
            var(--xh-mobile-gap)
            calc(var(--xh-mobile-pad) + env(safe-area-inset-right, 0px))
            calc(1.5rem + env(safe-area-inset-bottom, 0px))
            calc(var(--xh-mobile-pad) + env(safe-area-inset-left, 0px));
    }
    .xh-mobile-feed .xh-index-bar {
        margin-bottom: .75rem;
        padding-bottom: .6rem;
    }
    .xh-mobile-video-grid {
        column-gap: .7rem;
        row-gap: .85rem;
    }
    .xh-mobile-above-feed .live-strip .xh-site-inner {
        padding-left: calc(var(--xh-mobile-pad) + env(safe-area-inset-left, 0px));
        padding-right: calc(var(--xh-mobile-pad) + env(safe-area-inset-right, 0px));
    }
    /* Iklan header — full bleed kiri/kanan (sticky diatur global, lihat bawah file) */
    .xh-promo--global .xh-promo-inner {
        max-width: none;
        margin: 0;
        padding: 0 !important;
        gap: 0;
    }
    .xh-promo--global .xh-promo-inner--dismissible {
        position: relative;
    }
    .xh-promo--global .xh-promo-close {
        position: absolute;
        top: .3rem;
        right: max(.3rem, env(safe-area-inset-right, 0px));
        z-index: 3;
        width: 1.45rem;
        height: 1.45rem;
        border: 0;
        border-radius: 9999px;
        background: rgba(0, 0, 0, .62);
        color: rgba(255, 255, 255, .95);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        font-size: .65rem;
        line-height: 1;
        box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
        transition: background .15s, transform .12s;
    }
    .xh-promo--global .xh-promo-close:hover,
    .xh-promo--global .xh-promo-close:active {
        background: rgba(0, 0, 0, .82);
        color: #fff;
        transform: scale(1.05);
    }
    .xh-promo--global .xh-promo-slot {
        border-radius: 0;
    }
    .xh-promo--global.xh-promo--hidden {
        opacity: 0;
        transform: translateY(-100%);
        transition: opacity .22s ease, transform .22s ease;
        pointer-events: none;
    }
    .xh-mobile-above-feed--compact {
        margin-bottom: 0;
    }
    .xh-mobile-above-feed--compact .live-strip > div {
        padding-top: .5rem !important;
        padding-bottom: .5rem !important;
    }
    html.xh-mobile-site main.xh-page-shell:has(.xh-watch-page--mobile) {
        padding-top: 0;
    }
    /* Watch — player full bleed, konten rata kiri/kanan */
    .xh-watch-page--mobile .xh-watch-player-bleed {
        margin-bottom: var(--xh-mobile-gap);
    }
    .xh-watch-page--mobile .xh-watch-player-bleed:has(+ .xh-watch-upnext-slot.is-active) {
        margin-bottom: 0;
    }
    .xh-watch-page--mobile .xh-watch-upnext-slot.is-active + .xh-watch-mobile-body .xh-watch-heading {
        padding-top: .65rem;
    }
    .xh-watch-page--mobile .xh-watch-player {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }
    .xh-watch-page--mobile .xh-watch-mobile-body {
        padding:
            0
            calc(var(--xh-mobile-pad) + env(safe-area-inset-right, 0px))
            1rem
            calc(var(--xh-mobile-pad) + env(safe-area-inset-left, 0px));
    }
    .xh-watch-page--mobile .xh-watch-mobile-body > .xh-watch-panel,
    .xh-watch-page--mobile .xh-watch-mobile-body > .xh-watch-desc-block,
    .xh-watch-page--mobile .xh-watch-mobile-body > .xh-watch-engagement,
    .xh-watch-page--mobile .xh-watch-mobile-body > #engagement {
        margin-left: calc(-1 * (var(--xh-mobile-pad) + env(safe-area-inset-left, 0px)));
        margin-right: calc(-1 * (var(--xh-mobile-pad) + env(safe-area-inset-right, 0px)));
        width: calc(100% + var(--xh-mobile-pad) + env(safe-area-inset-left, 0px) + var(--xh-mobile-pad) + env(safe-area-inset-right, 0px));
        max-width: none;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }
    .xh-watch-page--mobile .xh-watch-heading {
        padding-top: .15rem;
    }
    .xh-watch-page--mobile .xh-watch-title {
        font-size: 1rem;
        line-height: 1.35;
    }
    .xh-watch-page--mobile .xh-watch-desc-block {
        padding: .75rem calc(var(--xh-mobile-pad) + env(safe-area-inset-right, 0px)) .75rem calc(var(--xh-mobile-pad) + env(safe-area-inset-left, 0px));
    }
    .xh-watch-page--mobile .xh-watch-comments {
        padding: .85rem calc(var(--xh-mobile-pad) + env(safe-area-inset-right, 0px)) .85rem calc(var(--xh-mobile-pad) + env(safe-area-inset-left, 0px));
    }
    .xh-watch-page--mobile .xh-watch-related-block {
        margin-top: .35rem;
        padding-top: .85rem;
    }
    .xh-watch-page--mobile .xh-related-head {
        padding-bottom: .55rem;
        margin-bottom: .35rem;
    }
    .xh-mobile-above-feed .xh-nav-tabs-row.xh-mobile-nav-row {
        border-top-color: color-mix(in srgb, var(--xh-border) 40%, transparent);
    }
    .xh-mobile-above-feed .live-strip > div {
        padding-top: .45rem !important;
        padding-bottom: .45rem !important;
    }
    .xh-mobile-above-feed .live-strip-title {
        margin: 0 0 .28rem;
        font-size: .58rem;
    }
    .xh-mobile-above-feed .live-strip-ring {
        width: 2.35rem;
        height: 2.35rem;
    }
    .xh-mobile-above-feed .live-strip-item {
        min-width: 2.65rem;
        gap: .2rem;
    }
    .xh-mobile-above-feed .live-strip-label {
        max-width: 2.85rem;
        font-size: .58rem;
    }
    .xh-mobile-above-feed .live-strip-track {
        gap: .5rem;
    }
    .xh-promo--global .xh-promo-img {
        height: auto !important;
        max-height: none !important;
    }
    .xh-mobile-header .xh-lang-compact {
        gap: 0;
        line-height: 1;
    }
    .xh-mobile-header .xh-mobile-header-btn .w-8 {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }
    /* Mobile drawer — hamburger menu */
    .xh-mobile-drawer {
        position: fixed;
        inset: 0;
        z-index: 120;
        display: flex;
    }
    .xh-mobile-drawer[hidden] {
        display: none !important;
    }
    .xh-mobile-drawer-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .58);
        backdrop-filter: blur(2px);
    }
    .xh-mobile-drawer-panel {
        position: relative;
        z-index: 1;
        width: min(18.5rem, 86vw);
        max-width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: color-mix(in srgb, var(--xh-header) 97%, var(--xh-dark));
        border-right: 1px solid color-mix(in srgb, var(--xh-border) 70%, transparent);
        box-shadow: 8px 0 32px rgba(0, 0, 0, .35);
        outline: none;
        animation: xh-mobile-drawer-in var(--xh-duration, .22s) var(--xh-ease-out, ease-out);
    }
    @keyframes xh-mobile-drawer-in {
        from { transform: translateX(-100%); opacity: .85; }
        to { transform: translateX(0); opacity: 1; }
    }
    .xh-mobile-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        padding: .85rem calc(var(--xh-mobile-pad) + env(safe-area-inset-left, 0px)) .75rem var(--xh-mobile-pad);
        border-bottom: 1px solid color-mix(in srgb, var(--xh-border) 65%, transparent);
        flex-shrink: 0;
    }
    .xh-mobile-drawer-title {
        font-size: .92rem;
        font-weight: 700;
        color: #fff;
        letter-spacing: -.02em;
    }
    .xh-mobile-drawer-close {
        width: 2rem;
        height: 2rem;
        border: 0;
        border-radius: .45rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: color-mix(in srgb, #fff 70%, var(--xh-muted));
        background: color-mix(in srgb, #fff 6%, transparent);
        cursor: pointer;
    }
    .xh-mobile-drawer-body {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: .65rem calc(var(--xh-mobile-pad) + env(safe-area-inset-right, 0px)) 1rem calc(var(--xh-mobile-pad) + env(safe-area-inset-left, 0px));
        -webkit-overflow-scrolling: touch;
    }
    .xh-mobile-drawer-body .xh-sidebar-cats .xh-sidebar-cat-list {
        max-height: none;
    }
    html.xh-mobile-drawer-open {
        overflow: hidden;
    }
    #xh-mobile-menu-toggle.is-active {
        color: var(--xh-accent);
        border-color: color-mix(in srgb, var(--xh-accent) 45%, var(--xh-border));
    }
}

/* Desktop — iklan + online user di dalam panel konten (wireframe home/watch) */
.xh-desktop-content-top {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin: 0 0 1rem;
}
.xh-desktop-content-top__block {
    border-radius: 14px;
    overflow: hidden;
}
.xh-desktop-content-top__promo.xh-desktop-content-top__block {
    overflow: hidden;
    border-radius: 14px;
}
.xh-desktop-content-top__promo .xh-promo--embedded {
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    width: 100%;
    line-height: 0;
    min-height: 72px;
    background: #000;
}
.xh-desktop-content-top__promo .xh-promo-embedded-inner {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: 0;
    width: 100%;
}
.xh-desktop-content-top__promo .xh-promo--embedded .xh-promo-slot {
    display: block;
    width: 100%;
    flex: 0 0 auto;
    border-radius: 14px;
    overflow: hidden;
    min-height: 72px;
}
.xh-desktop-content-top__promo .xh-promo--embedded .xh-promo-img {
    width: 100% !important;
    height: auto !important;
    min-height: 72px;
    max-height: min(220px, 28vw) !important;
    object-fit: contain;
    object-position: center;
    display: block !important;
    border-radius: 0;
    background: #111;
}
.xh-desktop-content-top__live .live-strip--panel {
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--border, var(--xh-border)) 50%, transparent);
    background: var(--short-strip, var(--xh-strip)) !important;
}
.xh-desktop-content-top__live .live-strip-panel-inner {
    padding: .5rem .75rem .45rem;
}
.xh-desktop-panel-body:has(.xh-desktop-content-top) {
    padding-top: .4rem;
}

/* Legacy — tidak dipakai */
.xh-desktop-above-feed { display: none; }
.xh-desktop-feed-top { display: none; }

/* Legacy underline tabs + mobile category sheet */
.xh-tab-active {
    color: var(--xh-accent) !important;
    border-bottom-color: var(--xh-accent) !important;
    background: color-mix(in srgb, var(--xh-accent) 6%, transparent);
}
.xh-nav-tabs a { border-bottom-width: 2px; transition: color .15s, border-color .15s, background .15s; }
.xh-nav-tabs { overflow: visible; }
header.xh-site-header .xh-nav-tabs-row { overflow: visible; }

/* Mobile category sheet (fallback dropdown) */
.xh-nav-category-portal {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.xh-nav-category-portal[hidden] { display: none !important; }
.xh-nav-category-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(2px);
}
.xh-nav-category-sheet {
    position: relative;
    z-index: 1;
    width: 100%;
    max-height: min(70vh, 28rem);
    border-radius: 1rem 1rem 0 0;
    background: color-mix(in srgb, var(--xh-header) 96%, var(--xh-dark));
    border: 1px solid color-mix(in srgb, var(--xh-border) 75%, transparent);
    border-bottom: 0;
    box-shadow: var(--xh-shadow-lg);
    display: flex;
    flex-direction: column;
    animation: xh-cat-sheet-in var(--xh-duration) var(--xh-ease-out);
}
@keyframes xh-cat-sheet-in {
    from { transform: translateY(100%); opacity: .5; }
    to { transform: translateY(0); opacity: 1; }
}
.xh-nav-category-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--xh-border) 70%, transparent);
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
}
.xh-nav-category-sheet-close {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, #fff 60%, var(--xh-muted));
    background: color-mix(in srgb, #fff 6%, transparent);
    border: 0;
    cursor: pointer;
}
.xh-nav-category-sheet-body {
    overflow-y: auto;
    padding: .5rem;
    -webkit-overflow-scrolling: touch;
}
.xh-nav-category-mobile .xh-nav-category-toggle.is-open .xh-nav-category-chevron {
    transform: rotate(180deg);
}
html.xh-nav-category-open { overflow: hidden; }

/* Legacy nav kategori dropdown (deprecated) */
.xh-nav-category .xh-nav-category-menu {
    display: none;
    position: fixed;
    z-index: 120;
    min-width: 11rem;
    max-width: min(18rem, 90vw);
    max-height: min(18rem, 50vh);
    overflow-y: auto;
    padding: .35rem;
    border-radius: var(--xh-radius);
    background: color-mix(in srgb, var(--xh-header) 94%, var(--xh-dark));
    border: 1px solid color-mix(in srgb, var(--xh-border) 80%, transparent);
    box-shadow: var(--xh-shadow-lg);
}
.xh-nav-category .xh-nav-category-link {
    display: block;
    padding: .5rem .65rem;
    border-radius: var(--xh-radius-sm);
    font-size: .8125rem;
    color: color-mix(in srgb, #fff 62%, var(--xh-muted));
    transition: color .15s, background .15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xh-nav-category .xh-nav-category-link:hover {
    color: #fff;
    background: color-mix(in srgb, var(--xh-panel) 70%, var(--xh-accent) 8%);
}
.xh-nav-category .xh-nav-category-link.is-active {
    color: var(--xh-accent);
    background: var(--xh-accent-10);
    font-weight: 600;
}
.xh-nav-category.is-open .xh-nav-category-chevron {
    transform: rotate(180deg);
}
.xh-nav-category-chevron {
    transition: transform .18s ease;
}
.xh-nav-category.is-open .xh-nav-category-menu {
    display: block;
}

/* Video cards — legacy boxed style (reels etc.) */
.video-card:not(.xh-card-pro):not(.xh-card-v2) {
    background: color-mix(in srgb, var(--xh-panel) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--xh-border) 80%, transparent);
    border-radius: var(--xh-radius-lg);
    box-shadow: var(--xh-shadow-sm);
    transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s, box-shadow .22s;
    overflow: hidden;
}
.video-card:not(.xh-card-pro):not(.xh-card-v2):hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--xh-accent) 45%, var(--xh-border));
    box-shadow: var(--xh-shadow-md), 0 0 0 1px color-mix(in srgb, var(--xh-accent) 12%, transparent);
}
.video-card:not(.xh-card-pro):not(.xh-card-v2):active { transform: translateY(-1px) scale(.99); }
.video-card:not(.xh-card-pro):not(.xh-card-v2):hover h3,
.video-card:not(.xh-card-pro):not(.xh-card-v2):active h3 { color: #fff; }
.video-card:not(.xh-card-pro):not(.xh-card-v2) .xh-play { opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s cubic-bezier(.2,.8,.2,1); }
.video-card:not(.xh-card-pro):not(.xh-card-v2):hover .xh-play,
.video-card:not(.xh-card-pro):not(.xh-card-v2):active .xh-play { opacity: 1; transform: scale(1); }
.video-card:not(.xh-card-pro):not(.xh-card-v2) .xh-thumb {
    border-radius: calc(var(--xh-radius-lg) - 2px) calc(var(--xh-radius-lg) - 2px) 0 0;
}
.video-card:not(.xh-card-pro):not(.xh-card-v2) .xh-thumb::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.12) 42%, transparent 68%);
    pointer-events: none;
}
.video-card:not(.xh-card-pro):not(.xh-card-v2) .xh-thumb img { transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s; }
.video-card:not(.xh-card-pro):not(.xh-card-v2):hover .xh-thumb img { transform: scale(1.05); }
.video-card:not(.xh-card-pro):not(.xh-card-v2) .xh-badge {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(0,0,0,.62) !important;
    border: 1px solid rgba(255,255,255,.08);
    font-variant-numeric: tabular-nums;
}
.video-card:not(.xh-card-pro):not(.xh-card-v2) .xh-play-btn {
    background: linear-gradient(135deg, var(--xh-accent-light), var(--xh-accent)) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.12);
}

/* ── Video cards pro (home, search, channel, related) ── */
.video-card.xh-card-pro,
.xh-card-pro.xh-related-item {
    background: transparent;
    border: none;
    border-radius: var(--radius-card, 14px);
    box-shadow: none;
    overflow: visible;
    transform: translateZ(0);
    transition:
        transform var(--dur-ui, 220ms) var(--ease-ui, var(--xh-ease-out)),
        filter var(--dur-ui, 220ms) var(--ease-ui, var(--xh-ease-out));
}
.video-card.xh-card-pro:hover,
.xh-card-pro.xh-related-item:hover {
    transform: translateY(-3px);
    border-color: transparent;
    filter: drop-shadow(var(--shadow-card-hover, 0 10px 28px rgba(0,0,0,.38)));
}
.video-card.xh-card-pro:active {
    transform: translateY(-2px) scale(.995);
}
.xh-card-pro .xh-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-card, 14px);
    overflow: hidden;
    background: var(--xh-dark, #0a0a0a);
    isolation: isolate;
    box-shadow: var(--shadow-card, 0 4px 20px rgba(0,0,0,.28));
    transition: box-shadow var(--dur-ui, 220ms) var(--ease-ui, var(--xh-ease-out));
}
.xh-card-pro:hover .xh-thumb {
    box-shadow: var(--shadow-card-hover, 0 12px 36px rgba(0,0,0,.42));
}
.xh-card-pro .xh-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 42%,
        color-mix(in srgb, var(--xh-dark, #000) 55%, transparent) 78%,
        color-mix(in srgb, var(--xh-dark, #000) 82%, transparent) 100%
    );
    pointer-events: none;
    opacity: .55;
    transition: opacity var(--dur-ui, 220ms) var(--ease-ui, var(--xh-ease-out));
    z-index: 1;
}
.xh-card-pro:hover .xh-thumb::after { opacity: 1; }
.xh-card-pro .xh-thumb img,
.xh-card-pro .xh-thumb .xh-thumb-poster {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-ui, 220ms) var(--ease-ui, var(--xh-ease-out)), opacity var(--dur-ui, 220ms) ease;
}
.xh-card-pro:hover .xh-thumb img,
.xh-card-pro:hover .xh-thumb .xh-thumb-poster {
    transform: scale(1.05);
    opacity: .96;
}
.xh-thumb-preview.has-preview-sprite .xh-preview-sprite {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: 1000% 100%;
    background-position: 0% 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease-out;
}
.xh-thumb-preview.has-preview-sprite.is-previewing .xh-preview-sprite { opacity: 1; }
.xh-thumb-preview.has-preview-sprite.is-previewing .xh-thumb-poster {
    opacity: 0;
    transform: none;
}
.xh-card-pro:hover .xh-thumb-preview.has-preview-sprite.is-previewing .xh-thumb-poster {
    opacity: 0;
    transform: none;
}
.xh-rel-thumb.xh-thumb-preview {
    position: relative;
    overflow: hidden;
}
.xh-rel-thumb.xh-thumb-preview .xh-thumb-poster {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .12s ease-out, transform var(--xh-duration-slow) var(--xh-ease-out);
}
.xh-rel-item:hover .xh-rel-thumb.xh-thumb-preview:not(.is-previewing) .xh-thumb-poster {
    transform: scale(1.04);
}
.xh-card-pro .xh-badge,
.xh-card-pro .xh-duration-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 2;
    padding: 3px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--xh-text-bright, #f5f5f5);
    background: color-mix(in srgb, var(--xh-dark, #000) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--xh-border) 45%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.xh-card-pro .xh-quality-badge,
.xh-rel-thumb .xh-quality-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 3px 7px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--xh-text-bright, #fff);
    background: color-mix(in srgb, var(--xh-dark, #0f172a) 78%, transparent);
    border: 1px solid color-mix(in srgb, var(--xh-border) 55%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.xh-card-pro .xh-watched-badge,
.xh-rel-thumb .xh-watched-badge,
.xh-thumb .xh-watched-badge,
.xh-card-media .xh-watched-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--xh-text-bright, #fff);
    background: color-mix(in srgb, var(--xh-dark, #0f172a) 72%, var(--xh-accent) 12%);
    border: 1px solid color-mix(in srgb, var(--xh-accent) 32%, var(--xh-border) 55%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--xh-dark) 75%, transparent);
    letter-spacing: .02em;
    text-transform: none;
    pointer-events: none;
    transition:
        background var(--xh-duration-fast) var(--xh-ease-out),
        border-color var(--xh-duration-fast) var(--xh-ease-out),
        box-shadow var(--xh-duration-fast) var(--xh-ease-out);
}
.xh-card-pro .xh-watched-badge i,
.xh-rel-thumb .xh-watched-badge i,
.xh-thumb .xh-watched-badge i,
.xh-card-media .xh-watched-badge i {
    color: var(--xh-accent-light);
    font-size: 9px;
    line-height: 1;
}
.xh-card-pro .xh-watched-badge.is-partial,
.xh-rel-thumb .xh-watched-badge.is-partial,
.xh-thumb .xh-watched-badge.is-partial,
.xh-card-media .xh-watched-badge.is-partial {
    background: color-mix(in srgb, var(--xh-dark, #0f172a) 62%, var(--xh-accent) 24%);
    border-color: color-mix(in srgb, var(--xh-accent) 46%, var(--xh-border) 40%);
}
.xh-card-pro .xh-watched-badge.is-done,
.xh-rel-thumb .xh-watched-badge.is-done,
.xh-thumb .xh-watched-badge.is-done,
.xh-card-media .xh-watched-badge.is-done {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--xh-accent-light) 62%, var(--xh-accent)),
        color-mix(in srgb, var(--xh-accent) 86%, var(--xh-dark))
    );
    border-color: color-mix(in srgb, var(--xh-accent-light) 42%, transparent);
    box-shadow: 0 2px 14px var(--xh-accent-20);
}
.xh-card-pro .xh-watched-badge.is-done i,
.xh-rel-thumb .xh-watched-badge.is-done i,
.xh-thumb .xh-watched-badge.is-done i,
.xh-card-media .xh-watched-badge.is-done i {
    color: #fff;
}
.xh-card-pro:hover .xh-watched-badge.is-partial,
.xh-rel-thumb:hover .xh-watched-badge.is-partial,
.xh-card-pro.group:hover .xh-watched-badge.is-partial {
    border-color: color-mix(in srgb, var(--xh-accent) 58%, var(--xh-border));
    box-shadow: 0 2px 12px var(--xh-accent-15);
}
.xh-card-pro .xh-watch-progress,
.xh-rel-thumb .xh-watch-progress,
.xh-thumb .xh-watch-progress,
.xh-card-media .xh-watch-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    height: 4px;
    background: color-mix(in srgb, var(--xh-dark, #000) 78%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--xh-border) 40%, transparent);
    pointer-events: none;
    overflow: hidden;
}
.xh-card-pro .xh-watch-progress-bar,
.xh-rel-thumb .xh-watch-progress-bar,
.xh-thumb .xh-watch-progress-bar,
.xh-card-media .xh-watch-progress-bar {
    height: 100%;
    min-width: 2px;
    background: linear-gradient(90deg, var(--xh-accent-dark), var(--xh-accent), var(--xh-accent-light));
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 10px var(--xh-accent-20);
    transition: width var(--xh-duration) var(--xh-ease-out);
}
.xh-card-pro.is-watched-done .xh-watch-progress,
.xh-rel-thumb.is-watched-done .xh-watch-progress,
.xh-thumb.is-watched-done .xh-watch-progress {
    display: none;
}
.xh-rel-thumb { position: relative; }
.xh-card-pro .xh-card-body {
    padding: 9px 1px 2px;
    min-width: 0;
}
@media (min-width: 768px) {
    .xh-card-pro .xh-card-body { padding: 10px 2px 4px; }
}
.xh-card-pro .xh-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 6px;
    min-height: calc(2 * 1.4em);
    font-size: clamp(13px, 1.05vw, 14.5px);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.02em;
    color: var(--video-title, var(--xh-card-title));
    transition: color var(--dur-ui, 220ms) ease;
}
@media (min-width: 768px) {
    .xh-card-pro .xh-card-title { font-size: 14.5px; }
}
.xh-card-pro:hover .xh-card-title { color: var(--text-title, var(--xh-text-bright)); }
.xh-ad-card { position: relative; }
.xh-ad-card__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    color: rgba(255,255,255,.95);
    background: rgba(0,0,0,.62);
    backdrop-filter: blur(6px);
    pointer-events: none;
}
.xh-ad-card__play {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.xh-ad-card__play i {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.25);
}
.xh-ad-card__meta {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.35;
    color: #777;
}
.xh-ad-card--grid .xh-ad-card__title { color: #c8c8c8; }
.xh-ad-card--related .xh-ad-card__title { color: inherit; }
.xh-ad-card--related.xh-rel-item--ad { cursor: pointer; }
.xh-ad-card:hover .xh-thumb img,
.xh-ad-card:hover .xh-rel-thumb img { transform: scale(1.04); }
.xh-card-foot { min-width: 0; }
.xh-card-uploader-row {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    font-size: 11px;
    line-height: 1.35;
    color: #777;
}
@media (min-width: 768px) {
    .xh-card-uploader-row { font-size: 11.5px; }
}
.xh-card-uploader {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 58%;
    text-decoration: none;
    color: inherit;
}
a.xh-card-uploader:hover .xh-card-channel-name { color: var(--xh-nav-hover); }
.xh-card-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--xh-panel) 90%, var(--xh-accent) 10%);
}
.xh-card-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.xh-card-avatar-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #e0e0e0;
    background: color-mix(in srgb, var(--xh-panel) 70%, var(--xh-accent) 30%);
}
.xh-card-channel-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    font-size: .78rem;
    color: var(--video-meta, var(--xh-card-meta));
    transition: color var(--dur-ui, 220ms) ease;
}
.xh-card-pipe {
    color: color-mix(in srgb, var(--video-meta, var(--xh-card-meta)) 55%, transparent);
    flex-shrink: 0;
    font-weight: 300;
    user-select: none;
}
.xh-card-views {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: .75rem;
    color: var(--video-meta, var(--xh-card-meta));
    flex-shrink: 0;
}

/* Legacy xh-card-v2 alias */
.xh-card-v2,
.xh-card-classic {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}
.xh-card-v2:hover, .xh-card-v2:active,
.xh-card-classic:hover, .xh-card-classic:active { transform: none !important; box-shadow: none !important; }
.xh-card-classic .xh-card-foot { display: none; }

.xh-index-bar {
    border-bottom: 1px solid color-mix(in srgb, var(--border, var(--xh-border)) 55%, transparent);
    padding-bottom: .55rem;
    margin: 0 0 .85rem;
}
.xh-index-bar--feed {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
}
.xh-index-bar-head {
    min-width: 0;
    flex: 1 1 10rem;
}
.xh-index-bar-head h1 {
    margin: 0;
}
.xh-index-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .85rem 1.15rem;
    width: auto;
    flex: 0 0 auto;
    margin-left: auto;
}
.xh-video-grid {
    align-items: start;
    column-gap: var(--xh-card-gap-x, 1.25rem) !important;
    row-gap: var(--xh-card-gap-y, 1.5rem) !important;
}
.xh-video-grid > .video-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.xh-home-load-more-wrap {
    margin-top: 1rem;
}
.xh-home-load-more {
    display: block;
    width: 100%;
    padding: .75rem 1rem;
    font-size: .8125rem;
    font-weight: 600;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--border, var(--xh-border)) 80%, transparent);
    color: var(--text-muted, var(--xh-muted));
    background: color-mix(in srgb, var(--surface, var(--xh-panel)) 55%, transparent);
    cursor: pointer;
    transition:
        color var(--dur-ui, 220ms) ease,
        border-color var(--dur-ui, 220ms) ease,
        background var(--dur-ui, 220ms) ease,
        transform var(--dur-ui, 220ms) var(--ease-ui, ease);
}
.xh-home-load-more:hover:not(:disabled) {
    color: var(--text-title, var(--xh-text-bright));
    border-color: color-mix(in srgb, var(--accent, var(--xh-accent)) 40%, var(--border, var(--xh-border)));
    background: color-mix(in srgb, var(--surface, var(--xh-panel)) 75%, transparent);
    transform: translateY(-1px);
}
.xh-home-load-more:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.xh-index-bar h1 {
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    font-weight: 700;
    color: var(--text-title, var(--xh-text-bright));
    letter-spacing: -.03em;
    line-height: 1.25;
}
@media (min-width: 1024px) {
    .xh-index-bar h1 { font-size: 1.25rem; }
    .xh-index-bar { margin-bottom: 1rem; padding-bottom: .55rem; }
    .xh-desktop-page {
        width: 100%;
    }
}
.xh-sort-link {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-muted, var(--xh-muted));
    padding: .25rem 0;
    border-bottom: 2px solid transparent;
    transition: color var(--dur-ui, 220ms) ease, border-color var(--dur-ui, 220ms) ease;
}
.xh-sort-link:hover { color: var(--sidebar-hover, var(--xh-nav-hover)); }
.xh-sort-link.is-active {
    color: var(--text-title, var(--xh-text-bright));
    border-bottom-color: var(--accent, var(--xh-accent));
}

/* ── Watch page (mobile + desktop) ── */
.xh-watch-page {
    --xh-watch-radius: .75rem;
    --xh-watch-card-bg: color-mix(in srgb, var(--xh-panel) 72%, var(--xh-dark));
    --xh-watch-card-border: color-mix(in srgb, var(--xh-border) 58%, transparent);
    margin: 0;
    padding: 0;
}
.xh-watch-page .xh-player-wrap,
.xh-watch-player {
    background: #000;
    overflow: hidden;
}
.xh-watch-page--desktop .xh-watch-player {
    border-radius: var(--xh-watch-radius);
    border: 1px solid var(--xh-watch-card-border);
    box-shadow:
        0 1px 0 color-mix(in srgb, #fff 5%, transparent) inset,
        0 16px 48px rgba(0, 0, 0, .45);
}
.xh-watch-page--desktop .xh-watch-player .xh-player.aspect-video {
    aspect-ratio: 16 / 9;
    width: 100%;
}
.xh-watch-page--desktop .xh-watch-player .xh-player #main-video,
.xh-watch-page--desktop .xh-watch-player .xh-player video {
    object-fit: contain;
}
.xh-watch-page--mobile .xh-watch-player-bleed {
    margin: 0;
    padding: 0;
}
.xh-watch-page--mobile .xh-watch-mobile-body {
    display: flex;
    flex-direction: column;
    gap: var(--xh-mobile-gap, .75rem);
}
.xh-watch-page--mobile .xh-watch-panel,
.xh-watch-page--mobile .xh-watch-desc-block,
.xh-watch-page--mobile .xh-watch-comments {
    width: 100%;
    max-width: none;
}
.xh-watch-heading {
    padding: 0;
}
.xh-watch-cat {
    display: inline-flex;
    align-items: center;
    margin-bottom: .45rem;
    padding: .2rem .55rem;
    border-radius: 9999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--xh-accent);
    background: color-mix(in srgb, var(--xh-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--xh-accent) 28%, transparent);
    transition: background .15s, border-color .15s;
}
.xh-watch-cat:hover {
    background: color-mix(in srgb, var(--xh-accent) 20%, transparent);
    border-color: color-mix(in srgb, var(--xh-accent) 45%, transparent);
}
.xh-hashtag {
    color: var(--xh-accent);
    font-weight: 600;
    text-decoration: none;
}
.xh-hashtag:hover {
    text-decoration: underline;
}
.xh-watch-title .xh-hashtag {
    font-weight: 700;
}
.xh-sidebar-tag-link .xh-sidebar-cat-label {
    text-transform: none;
    letter-spacing: 0;
}
.xh-watch-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f3f3f3;
    line-height: 1.4;
    margin: 0 0 .4rem;
    letter-spacing: -.025em;
}
.xh-watch-page--desktop .xh-watch-title {
    font-size: 1.2rem;
}
.xh-watch-page--mobile .xh-watch-title {
    font-size: .98rem;
}
.xh-watch-meta {
    font-size: .75rem;
    color: color-mix(in srgb, var(--xh-muted) 88%, #fff);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
}
.xh-watch-page--desktop .xh-watch-meta {
    font-size: .8125rem;
}
.xh-watch-meta span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.xh-watch-meta i {
    font-size: .72em;
    opacity: .75;
}
.xh-watch-meta a { color: #999; text-decoration: none; }
.xh-watch-meta a:hover { color: var(--xh-accent); }
.xh-watch-meta .dot { opacity: .35; }
.xh-watch-desc-block {
    padding: .85rem 1rem;
    border-radius: var(--xh-watch-radius);
    background: var(--xh-watch-card-bg);
    border: 1px solid var(--xh-watch-card-border);
}
.xh-watch-desc {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: .8125rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--xh-muted) 75%, #fff);
    white-space: pre-line;
}
.xh-watch-related-block {
    margin-top: .25rem;
    padding-top: .85rem;
    border-top: 1px solid color-mix(in srgb, var(--xh-border) 50%, transparent);
}
.xh-watch-page--mobile .xh-watch-panel {
    border-radius: 0;
}
.xh-watch-page--mobile .xh-watch-related-list .xh-rel-thumb {
    width: 8.75rem;
    border-radius: .5rem;
}
.xh-watch-page--mobile .xh-watch-related-list .xh-rel-item {
    padding: .7rem 0;
    gap: .65rem;
}
.xh-watch-page--mobile .xh-watch-related-list .xh-rel-title {
    font-size: .8rem;
    line-height: 1.35;
}

/* Watch panel: toolbar + uploader */
    .xh-watch-panel {
    background: var(--xh-watch-card-bg);
    border: 1px solid var(--xh-watch-card-border);
    border-radius: var(--xh-watch-radius);
        overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.xh-watch-page--desktop .xh-watch-stack {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    min-width: 0;
    width: 100%;
}
.xh-watch-page--desktop .xh-watch-stack > .xh-watch-heading,
.xh-watch-page--desktop .xh-watch-stack > .xh-watch-desc-block,
.xh-watch-page--desktop .xh-watch-stack > .xh-watch-engagement,
.xh-watch-page--desktop .xh-watch-stack > #engagement {
    width: 100%;
    max-width: none;
}
.xh-watch-page--desktop .xh-watch-stack > .xh-watch-panel {
    margin-top: 0;
}
.xh-watch-bar {
    display: flex;
    align-items: stretch;
    width: 100%;
    overflow: hidden;
}
.xh-watch-bar-btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: .65rem .2rem .55rem;
    border: none;
    border-right: 1px solid color-mix(in srgb, var(--xh-border) 45%, transparent);
    background: transparent;
    color: #8e8e8e;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s;
    position: relative;
}
.xh-watch-bar-btn:last-child { border-right: none; }
.xh-watch-bar-btn:hover {
    background: color-mix(in srgb, #fff 3%, transparent);
    color: #ccc;
}
.xh-watch-bar-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    font-size: .95rem;
    line-height: 1;
}
.xh-watch-bar-count {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    color: #bdbdbd;
    font-variant-numeric: tabular-nums;
    min-height: 13px;
}
.xh-watch-bar-count--empty {
    visibility: hidden;
    pointer-events: none;
}
.xh-watch-bar-text {
    font-size: 9px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    color: #6f6f6f;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 2px;
}
@media (min-width: 480px) {
    .xh-watch-bar-text { font-size: 10px; }
    .xh-watch-bar-btn { padding: .7rem .25rem .6rem; }
}
@media (min-width: 1024px) {
    .xh-watch-page--desktop .xh-watch-bar-btn {
        padding: .85rem .4rem .75rem;
        gap: 3px;
    }
    .xh-watch-page--desktop .xh-watch-bar-text {
        font-size: .7rem;
        color: #7a7a7a;
        letter-spacing: .01em;
    }
    .xh-watch-page--desktop .xh-watch-bar-icon {
        font-size: 1.05rem;
        width: 1.5rem;
        height: 1.5rem;
    }
    .xh-watch-page--desktop .xh-watch-bar-count {
        font-size: .72rem;
    }
    .xh-watch-page--desktop .xh-watch-panel {
        width: 100%;
    }
}
@media (max-width: 1023px) {
    .xh-watch-page--mobile .xh-watch-bar-btn {
        padding: .68rem .1rem .58rem;
    }
    .xh-watch-page--mobile .xh-watch-bar-text {
        font-size: 8px;
        padding: 0 1px;
    }
    .xh-watch-page--mobile .xh-watch-bar-icon {
        font-size: .92rem;
    }
    .xh-watch-page--mobile .xh-watch-uploader {
        padding: .65rem .75rem;
    }
}
.xh-watch-bar-btn.is-active.is-like,
.xh-watch-bar-btn.is-active.is-favorite {
    color: var(--xh-accent);
}
.xh-watch-bar-btn.is-active.is-like .xh-watch-bar-count,
.xh-watch-bar-btn.is-active.is-favorite .xh-watch-bar-icon { color: var(--xh-accent); }
.xh-watch-bar-btn.is-active.is-dislike { color: #aaa; }
.xh-watch-bar-badge {
    position: absolute;
    top: -5px;
    right: -9px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 9999px;
    background: var(--xh-accent);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    font-style: normal;
    line-height: 15px;
    text-align: center;
}
.xh-watch-uploader {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .75rem;
    border-top: 1px solid color-mix(in srgb, var(--xh-border) 45%, transparent);
    min-width: 0;
}
@media (min-width: 768px) {
    .xh-watch-uploader { padding: .7rem .85rem; }
}
.xh-watch-uploader-main {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    flex: 1;
    text-decoration: none;
    color: inherit;
}
.xh-watch-uploader-avatar {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    font-weight: 700;
    color: #fff;
}
.xh-watch-uploader-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.xh-watch-uploader-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.xh-watch-uploader-text strong {
    font-size: .875rem;
    font-weight: 600;
    color: #e4e4e4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xh-watch-uploader-text small {
    font-size: .72rem;
    color: #707070;
}
.xh-watch-uploader-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    line-height: 1.35;
}
.xh-watch-uploader-stat-sep {
    color: #555;
    font-weight: 700;
}
.xh-watch-uploader-cta {
    flex-shrink: 0;
    padding: .4rem .75rem;
    border-radius: .5rem;
    font-size: .72rem;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, var(--xh-accent-light), var(--xh-accent));
    border: 1px solid color-mix(in srgb, var(--xh-accent) 35%, transparent);
    transition: filter .15s, transform .1s;
}
.xh-watch-uploader-cta:hover {
    filter: brightness(1.07);
    color: #fff;
}
.xh-channel-follow-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    padding: .42rem .9rem;
    border-radius: 9999px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, var(--xh-accent-light), var(--xh-accent));
    border: 1px solid color-mix(in srgb, var(--xh-accent) 35%, transparent);
    transition: filter .15s, background .15s, border-color .15s, color .15s;
}
.xh-channel-follow-btn:hover { filter: brightness(1.06); }
.xh-channel-follow-btn.is-following {
    color: #d4d4d4;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .22);
}
.xh-channel-follow-btn.is-following:hover {
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .32);
}
.xh-channel-follow-btn--sm {
    min-width: 4.75rem;
    padding: .34rem .7rem;
    font-size: .66rem;
}
.xh-channel-follow-btn--watch {
    min-width: 5.25rem;
    padding: .42rem .85rem;
    border-radius: 9999px;
    font-size: .74rem;
    letter-spacing: .01em;
}
.xh-channel-subscribe-btn:not(.is-following) {
    text-transform: none;
}

.xh-watch-page .xh-uploader-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .65rem;
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid var(--xh-border);
    font-size: .8125rem;
}
.xh-watch-page .xh-uploader-row a { color: var(--xh-accent); font-weight: 600; }
.xh-watch-page .xh-uploader-row a:hover { text-decoration: underline; }
.xh-watch-page .xh-related-head {
    font-size: .875rem;
    font-weight: 700;
    color: #ececec;
    padding: 0 0 .7rem;
    margin: 0 0 .15rem;
    border-bottom: 1px solid color-mix(in srgb, var(--xh-border) 50%, transparent);
    letter-spacing: -.02em;
}
.xh-watch-side-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: .85rem .85rem .75rem;
    border-radius: var(--xh-watch-radius);
    background: var(--xh-watch-card-bg);
    border: 1px solid var(--xh-watch-card-border);
    box-shadow: 0 10px 32px rgba(0, 0, 0, .22);
}
.xh-watch-side-card .xh-related-head {
    flex-shrink: 0;
    padding-bottom: .65rem;
}

/* ── Watch page: related videos list ── */
.xh-watch-related-list .xh-rel-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .75rem;
    align-items: start;
    padding: .85rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--xh-border) 40%, transparent);
}
.xh-watch-related-list .xh-rel-item:first-child { padding-top: .5rem; }
.xh-watch-related-list .xh-rel-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.xh-watch-related-list .xh-rel-thumb {
    position: relative;
    display: block;
    width: 10.5rem;
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #0a0a0a;
}
.xh-watch-related-list .xh-rel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease, opacity .2s;
}
.xh-watch-related-list .xh-rel-item:hover .xh-rel-thumb img {
    transform: scale(1.03);
    opacity: .92;
}
.xh-watch-related-list .xh-rel-duration {
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 2;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
    color: #f2f2f2;
    background: rgba(0,0,0,.78);
    font-variant-numeric: tabular-nums;
}
.xh-watch-related-list .xh-rel-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding-top: 2px;
}
.xh-watch-related-list .xh-rel-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.015em;
    color: #d6d6d6;
    transition: color .15s ease;
}
.xh-watch-related-list .xh-rel-item:hover .xh-rel-title { color: #f5f5f5; }
.xh-watch-related-list .xh-rel-content .xh-card-foot { margin-top: 1px; }
.xh-watch-related-list .xh-card-uploader { max-width: 52%; }
.xh-watch-related-list .xh-card-avatar { width: 18px; height: 18px; }

@media (min-width: 1024px) {
    .xh-watch-side .xh-watch-related-list .xh-rel-thumb {
        width: 100%;
        max-width: 10.25rem;
    }
    .xh-watch-side .xh-watch-related-list .xh-rel-item {
        gap: .65rem;
        padding: .75rem 0;
    }
    .xh-watch-side .xh-watch-related-list .xh-rel-title {
        font-size: .8125rem;
        line-height: 1.38;
    }
}

@media (max-width: 1023px) {
    .xh-watch-page .xh-watch-related-list .xh-rel-thumb {
        width: 9.5rem;
    }
    .xh-watch-page .xh-watch-related-list .xh-rel-item {
        padding: .9rem 0;
    }
}

.xh-watch-page #engagement,
.xh-watch-engagement {
    margin-top: .15rem;
}
.xh-watch-comments {
    padding: 1rem;
    border-radius: var(--xh-watch-radius);
    background: var(--xh-watch-card-bg);
    border: 1px solid var(--xh-watch-card-border);
}
.xh-watch-comments-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid color-mix(in srgb, var(--xh-border) 50%, transparent);
    font-size: .875rem;
    font-weight: 700;
    color: #ececec;
    letter-spacing: -.02em;
}
.xh-watch-comments-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .35rem;
    border-radius: 9999px;
    font-size: .68rem;
    font-weight: 700;
    color: var(--xh-accent);
    background: color-mix(in srgb, var(--xh-accent) 14%, transparent);
}
.xh-comment-form { margin-bottom: 1rem; }
.xh-comment-input {
    width: 100%;
    min-height: 4.5rem;
    padding: .65rem .75rem;
    border-radius: .55rem;
    border: 1px solid color-mix(in srgb, var(--xh-border) 70%, transparent);
    background: color-mix(in srgb, var(--xh-dark) 65%, var(--xh-panel));
    color: #e8e8e8;
    font-size: .8125rem;
    line-height: 1.45;
    resize: vertical;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.xh-comment-input:focus {
    border-color: color-mix(in srgb, var(--xh-accent) 45%, var(--xh-border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--xh-accent) 12%, transparent);
}
.xh-comment-form-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .5rem;
}
.xh-comment-hint {
    font-size: .68rem;
    color: color-mix(in srgb, var(--xh-muted) 85%, transparent);
}
.xh-comment-submit {
    padding: .45rem .9rem;
    border: 0;
    border-radius: .5rem;
    background: linear-gradient(135deg, var(--xh-accent-light), var(--xh-accent));
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s, transform .1s;
}
.xh-comment-submit:hover { filter: brightness(1.06); }
.xh-comment-submit:active { transform: scale(.98); }
.xh-comment-login {
    margin: 0 0 1rem;
    font-size: .8125rem;
    color: color-mix(in srgb, var(--xh-muted) 85%, #fff);
}
.xh-comment-login a {
    color: var(--xh-accent);
    font-weight: 600;
    text-decoration: none;
}
.xh-comment-login a:hover { text-decoration: underline; }
.xh-comments-list {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.xh-watch-page #engagement > .bg-xh-panel {
    background: transparent !important;
    border: none !important;
    padding: .5rem 0 !important;
}

@media (min-width: 1024px) {
    .xh-watch-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(268px, 20rem);
        grid-template-rows: auto auto;
        column-gap: 1.35rem;
        row-gap: .75rem;
        align-items: start;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .xh-watch-player-cell {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        margin: 0;
        padding: 0;
    }
    .xh-watch-page--desktop .xh-watch-player,
    .xh-watch-page--desktop .xh-player-wrap {
        width: 100%;
    }
    .xh-watch-stack-cell {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
        margin: 0;
        padding: 0;
    }
    .xh-watch-page--desktop .xh-watch-side {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 20rem;
        margin: 0;
        padding: 0;
        min-width: 0;
        min-height: 0;
    }
    .xh-watch-page--desktop .xh-watch-side-card {
        position: sticky;
        top: 4.5rem;
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        max-height: calc(100vh - 5.25rem);
        overflow: hidden;
        padding: 0 .8rem .75rem;
        margin: 0;
        width: 100%;
    }
    .xh-watch-page--desktop .xh-watch-side-card .xh-related-head {
        padding: .65rem 0 .55rem;
        margin: 0;
    }
    .xh-watch-page--desktop .xh-watch-player,
    .xh-watch-page--desktop .xh-watch-player-cell {
        margin-top: 0;
        padding-top: 0;
    }
    .xh-watch-side .js-related-root {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .xh-watch-side .js-related-list {
        flex: 1;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--xh-accent) 45%, var(--xh-border)) transparent;
    }
    .xh-watch-side .js-related-list::-webkit-scrollbar { width: 6px; }
    .xh-watch-side .js-related-list::-webkit-scrollbar-track { background: transparent; }
    .xh-watch-side .js-related-list::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--xh-accent) 50%, var(--xh-border));
        border-radius: 9999px;
    }
    .xh-watch-side .js-related-load-more {
        flex-shrink: 0;
        margin-top: .75rem;
    }
}

/* Header */
.xh-header-bg, header.xh-themed-header {
    background: var(--xh-header) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
header.xh-modern-header {
    border-bottom: 1px solid var(--xh-border);
    box-shadow: none;
}
header.xh-modern-header::before { display: none; }

/* Desktop header — premium */
header.xh-desktop-header {
    border-bottom: none;
    background: color-mix(in srgb, var(--xh-header) 90%, transparent) !important;
    backdrop-filter: blur(18px) saturate(1.35);
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--xh-border) 55%, transparent),
        0 12px 40px rgba(0, 0, 0, .22);
}
.xh-dt-header-glow {
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--xh-accent) 55%, transparent) 35%,
        color-mix(in srgb, var(--xh-accent) 75%, #fff) 50%,
        color-mix(in srgb, var(--xh-accent) 55%, transparent) 65%,
        transparent 100%);
    opacity: .65;
    pointer-events: none;
}
.xh-dt-header-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem 1rem;
    min-height: 4.25rem;
    width: 100%;
    max-width: var(--xh-site-max);
    margin: 0 auto;
    padding: .55rem var(--xh-site-pad);
    border-bottom: 1px solid color-mix(in srgb, var(--xh-border) 50%, transparent);
}
.xh-dt-header-brand { min-width: 0; max-width: min(48vw, 24rem); }
.xh-dt-logo {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    max-width: 100%;
    transition: opacity .15s, transform .15s;
}
.xh-dt-logo:hover { opacity: .92; transform: translateY(-1px); }
.xh-dt-logo-img {
    height: 3.35rem;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    object-position: left center;
}
.xh-dt-logo-mark {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: .7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(145deg, var(--xh-accent-light), var(--xh-accent) 55%, var(--xh-accent-hover));
    box-shadow: 0 6px 20px var(--xh-accent-30), inset 0 1px 0 rgba(255,255,255,.2);
}
.xh-dt-logo-text {
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
    white-space: nowrap;
}
.xh-dt-header-search {
    display: flex;
    justify-content: center;
    min-width: 0;
    max-width: 48rem;
    width: 100%;
    margin: 0 auto;
}
.xh-dt-search { width: 100%; }
.xh-dt-search-group {
    display: flex;
    align-items: stretch;
    gap: .55rem;
    width: 100%;
}
.xh-dt-search-field-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    height: 2.85rem;
    border-radius: 9999px 0 0 9999px;
    border: 1px solid color-mix(in srgb, var(--border, var(--xh-border)) 80%, transparent);
    border-right: none;
    background: var(--input-bg, var(--xh-input-bg));
    box-shadow: inset 0 1px 2px color-mix(in srgb, #000 22%, transparent);
    transition: border-color var(--dur-ui, 220ms) ease, box-shadow var(--dur-ui, 220ms) ease;
}
.xh-dt-search:focus-within .xh-dt-search-field-wrap {
    border-color: color-mix(in srgb, var(--accent, var(--xh-accent)) 48%, var(--border, var(--xh-border)));
    box-shadow: inset 0 1px 2px color-mix(in srgb, #000 18%, transparent), 0 0 0 3px var(--xh-accent-15);
}
.xh-dt-search-field-icon {
    position: absolute;
    left: 1.1rem;
    font-size: .85rem;
    color: var(--text-muted, var(--xh-muted));
    pointer-events: none;
}
.xh-dt-search-field {
    flex: 1;
    width: 100%;
    height: 100%;
    padding: 0 2.25rem 0 2.65rem;
    border: 0;
    background: transparent;
    color: var(--text-title, var(--xh-text-bright));
    font-size: .95rem;
    outline: none;
}
.xh-dt-search-field::placeholder {
    color: var(--xh-muted);
}
.xh-dt-search-clear {
    position: absolute;
    right: .35rem;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, #fff 8%, transparent);
    color: color-mix(in srgb, #fff 65%, var(--xh-muted));
    cursor: pointer;
    transition: background .15s, color .15s;
}
.xh-dt-search-clear:hover {
    background: color-mix(in srgb, #fff 14%, transparent);
    color: #fff;
}
.xh-dt-search-action {
    flex-shrink: 0;
    width: 4.5rem;
    height: 2.85rem;
    border-radius: 0 9999px 9999px 0;
    border: 1px solid color-mix(in srgb, var(--border, var(--xh-border)) 80%, transparent);
    background: var(--search-bg, var(--xh-surface));
    color: var(--sidebar, var(--xh-nav));
    cursor: pointer;
    transition: background var(--dur-ui, 220ms) ease, color var(--dur-ui, 220ms) ease, border-color var(--dur-ui, 220ms) ease, box-shadow var(--dur-ui, 220ms) ease, transform var(--dur-ui, 220ms) var(--ease-ui, ease);
}
.xh-dt-search-action:hover {
    background: color-mix(in srgb, var(--search-bg, var(--xh-surface)) 85%, var(--accent, var(--xh-accent)) 12%);
    color: var(--sidebar-hover, var(--xh-nav-hover));
    border-color: color-mix(in srgb, var(--accent, var(--xh-accent)) 30%, var(--border, var(--xh-border)));
    box-shadow: 0 4px 16px color-mix(in srgb, #000 20%, transparent);
}
.xh-dt-header-actions {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-shrink: 0;
}
.xh-notif-wrap { position: relative; }
.xh-notif-btn { position: relative; }
.xh-notif-badge {
    position: absolute;
    top: -.15rem;
    right: -.15rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 .25rem;
    border-radius: 9999px;
    font-size: .5625rem;
    font-weight: 800;
    line-height: 1rem;
    text-align: center;
    color: #fff;
    background: var(--xh-accent);
    border: 1.5px solid var(--xh-dark, #0d0d0d);
    box-shadow: 0 2px 8px var(--xh-accent-30);
    transition: transform var(--xh-duration) var(--xh-ease-spring), opacity var(--xh-duration-fast) ease;
}
.xh-notif-badge:not(.is-hidden) {
    animation: xh-motion-badge-pop .45s var(--xh-ease-spring);
}
.xh-notif-badge.is-hidden { display: none; }
.xh-notif-wrap.is-open .xh-notif-btn,
.xh-notif-wrap.is-open button.xh-notif-btn {
    color: var(--xh-accent);
    border-color: color-mix(in srgb, var(--xh-accent) 45%, var(--xh-border));
}
.xh-notif-dropdown {
    position: absolute;
    top: calc(100% + .45rem);
    right: 0;
    width: min(22rem, calc(100vw - 1.5rem));
    max-height: min(24rem, 70vh);
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--xh-panel) 96%, #000);
    border: 1px solid color-mix(in srgb, var(--xh-border) 85%, transparent);
    border-radius: .85rem;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
    z-index: 80;
    overflow: hidden;
    transform-origin: top right;
    opacity: 0;
    transform: translateY(-10px) scale(.97);
    pointer-events: none;
    transition:
        opacity var(--xh-duration) var(--xh-ease-out),
        transform var(--xh-duration) var(--xh-ease-spring),
        visibility 0s linear var(--xh-duration);
    visibility: hidden;
}
.xh-notif-wrap.is-open .xh-notif-dropdown:not([hidden]) {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
    transition:
        opacity var(--xh-duration) var(--xh-ease-out),
        transform var(--xh-duration) var(--xh-ease-spring),
        visibility 0s;
}
.xh-notif-item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .7rem .9rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid color-mix(in srgb, var(--xh-border) 55%, transparent);
    transition: background var(--xh-duration-fast) var(--xh-ease-out), transform var(--xh-duration-fast) var(--xh-ease-out);
}
.xh-notif-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .75rem .9rem;
    border-bottom: 1px solid color-mix(in srgb, var(--xh-border) 80%, transparent);
}
.xh-notif-dropdown-title {
    font-size: .8125rem;
    font-weight: 700;
    color: #fff;
}
.xh-notif-mark-all {
    border: none;
    background: transparent;
    color: var(--xh-accent);
    font-size: .6875rem;
    font-weight: 600;
    cursor: pointer;
}
.xh-notif-mark-all:hover { text-decoration: underline; }
.xh-notif-dropdown-body {
    overflow-y: auto;
    overscroll-behavior: contain;
}
.xh-notif-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: color-mix(in srgb, var(--xh-muted) 85%, #fff);
    font-size: .8125rem;
}
.xh-notif-empty i { font-size: 1.35rem; margin-bottom: .5rem; opacity: .55; display: block; }
.xh-notif-item:last-child { border-bottom: none; }
.xh-notif-item:hover { background: color-mix(in srgb, var(--xh-panel) 70%, var(--xh-accent) 6%); transform: translateX(2px); }
.xh-notif-item:active { transform: scale(.99); }
.xh-notif-item.is-read { opacity: .72; }
.xh-notif-item-icon {
    width: 2rem;
    height: 2rem;
    border-radius: .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--xh-panel) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--xh-border) 75%, transparent);
    color: var(--xh-accent);
    font-size: .72rem;
}
.xh-notif-item-body { min-width: 0; flex: 1; }
.xh-notif-item-title {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}
.xh-notif-item-text {
    display: block;
    font-size: .6875rem;
    color: color-mix(in srgb, var(--xh-muted) 88%, #fff);
    margin-top: .15rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.xh-notif-item-time {
    display: block;
    font-size: .625rem;
    color: color-mix(in srgb, var(--xh-muted) 75%, #fff);
    margin-top: .25rem;
}
.xh-notif-item-dot {
    width: .45rem;
    height: .45rem;
    border-radius: 9999px;
    background: var(--xh-accent);
    flex-shrink: 0;
    margin-top: .35rem;
}
.xh-notif-dropdown-foot {
    padding: .55rem .9rem;
    border-top: 1px solid color-mix(in srgb, var(--xh-border) 80%, transparent);
    text-align: center;
}
.xh-notif-view-all {
    font-size: .75rem;
    font-weight: 600;
    color: var(--xh-accent);
    text-decoration: none;
}
.xh-notif-view-all:hover { text-decoration: underline; }
.xh-notif-wrap--light .xh-notif-dropdown {
    background: #fff;
    border-color: #e2e8f0;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .12);
}
.xh-notif-wrap--light .xh-notif-dropdown-title,
.xh-notif-wrap--light .xh-notif-item-title { color: #0f172a; }
.xh-notif-wrap--light .xh-notif-item-text { color: #64748b; }
.xh-notif-wrap--light .xh-notif-item-time { color: #94a3b8; }
.xh-notif-wrap--light .xh-notif-item-icon {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #4f46e5;
}
.xh-notif-wrap--light .xh-notif-item:hover { background: #f8fafc; }
.xh-notif-wrap--light .xh-notif-item { border-bottom-color: #f1f5f9; }
.xh-notif-wrap--light .xh-notif-badge {
    background: #ef4444;
    border-color: #fff;
}
.xh-notif-wrap--light .xh-notif-mark-all { color: #4f46e5; }
.xh-notif-wrap--light .xh-notif-view-all { color: #4f46e5; }
.xh-notif-wrap--light .xh-notif-empty { color: #94a3b8; }
@media (max-width: 1023px) {
    .xh-mobile-header,
    .xh-mobile-header-bar,
    .xh-mobile-header-actions {
        overflow: visible;
    }
    .xh-mobile-header .xh-notif-wrap {
        position: static;
    }
    .xh-mobile-header .xh-notif-dropdown {
        position: fixed;
        left: max(0.65rem, env(safe-area-inset-left, 0px));
        right: max(0.65rem, env(safe-area-inset-right, 0px));
        width: auto;
        max-width: none;
        z-index: 120;
    }
}
.xh-dt-action-upload {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 2.35rem;
    padding: 0 .95rem;
    border-radius: 9999px;
    font-size: .8125rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--xh-accent-light), var(--xh-accent) 58%, var(--xh-accent-hover));
    border: 1px solid color-mix(in srgb, var(--xh-accent) 70%, transparent);
    box-shadow: 0 4px 18px var(--xh-accent-30);
    transition: transform .12s, box-shadow .15s, filter .15s;
}
.xh-dt-action-upload:hover {
    filter: brightness(1.06);
    box-shadow: 0 6px 22px var(--xh-accent-30);
    transform: translateY(-1px);
}
.xh-dt-action-upload i { font-size: .72rem; }
.xh-dt-action-ghost {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 2.35rem;
    padding: 0 .85rem;
    border-radius: 9999px;
    font-size: .8125rem;
    font-weight: 500;
    color: color-mix(in srgb, #fff 78%, var(--xh-muted));
    border: 1px solid color-mix(in srgb, var(--xh-border) 75%, transparent);
    background: color-mix(in srgb, var(--xh-panel) 45%, transparent);
    transition: color .15s, background .15s, border-color .15s;
}
.xh-dt-action-ghost:hover {
    color: #fff;
    border-color: color-mix(in srgb, var(--xh-accent) 28%, var(--xh-border));
    background: color-mix(in srgb, var(--xh-panel) 70%, var(--xh-accent) 8%);
}
.xh-dt-action-primary {
    display: inline-flex;
    align-items: center;
    height: 2.35rem;
    padding: 0 1rem;
    border-radius: 9999px;
    font-size: .8125rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--xh-accent-light), var(--xh-accent));
    box-shadow: 0 4px 16px var(--xh-accent-30);
    transition: transform .12s, filter .15s;
}
.xh-dt-action-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.xh-dt-lang-wrap {
    padding-left: .35rem;
    margin-left: .15rem;
    border-left: 1px solid color-mix(in srgb, var(--xh-border) 65%, transparent);
}
.xh-dt-lang-wrap .xh-lang-switch {
    padding: .2rem .35rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--xh-panel) 50%, transparent);
    border: 1px solid color-mix(in srgb, var(--xh-border) 70%, transparent);
}
.xh-dt-header-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 9999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--xh-panel) 80%, transparent);
    border: 2px solid color-mix(in srgb, var(--xh-border) 70%, transparent);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .12s;
}
.xh-dt-header-avatar:hover,
.xh-dt-user-menu.is-open .xh-dt-header-avatar {
    border-color: color-mix(in srgb, var(--xh-accent) 45%, var(--xh-border));
    box-shadow: 0 0 0 3px var(--xh-accent-10);
}
.xh-dt-user-dropdown {
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    width: min(17rem, 88vw);
    border-radius: .9rem;
    overflow: hidden;
    background: color-mix(in srgb, var(--xh-header) 94%, var(--xh-dark));
    border: 1px solid color-mix(in srgb, var(--xh-border) 72%, transparent);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255,255,255,.04);
    z-index: 140;
    transform-origin: top right;
    opacity: 0;
    transform: translateY(-8px) scale(.97);
    pointer-events: none;
    visibility: hidden;
    transition:
        opacity var(--xh-duration) var(--xh-ease-out),
        transform var(--xh-duration) var(--xh-ease-spring),
        visibility 0s linear var(--xh-duration);
}
.xh-dt-user-menu.is-open .xh-dt-user-dropdown:not([hidden]) {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
    transition:
        opacity var(--xh-duration) var(--xh-ease-out),
        transform var(--xh-duration) var(--xh-ease-spring),
        visibility 0s;
}
.xh-dt-user-dropdown[hidden] { display: none !important; }
.xh-dt-user-dropdown-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--xh-border) 65%, transparent);
    background: color-mix(in srgb, var(--xh-panel) 35%, transparent);
}
.xh-dt-user-dropdown-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--xh-panel) 80%, var(--xh-accent) 12%);
    border: 1px solid color-mix(in srgb, var(--xh-border) 70%, transparent);
    font-weight: 700;
    color: var(--xh-accent);
}
.xh-dt-user-dropdown-avatar img { width: 100%; height: 100%; object-fit: cover; }
.xh-dt-user-dropdown-name {
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xh-dt-user-dropdown-email {
    font-size: .72rem;
    color: color-mix(in srgb, var(--xh-muted) 85%, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: .1rem;
}
.xh-dt-user-dropdown-body,
.xh-dt-user-dropdown-foot {
    padding: .35rem;
}
.xh-dt-user-dropdown-foot {
    border-top: 1px solid color-mix(in srgb, var(--xh-border) 60%, transparent);
}
.xh-dt-user-dropdown-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .62rem .75rem;
    border-radius: .55rem;
    font-size: .84rem;
    color: color-mix(in srgb, #fff 78%, var(--xh-muted));
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    transition: background .14s, color .14s;
}
.xh-dt-user-dropdown-item i {
    width: 1rem;
    text-align: center;
    font-size: .82rem;
    opacity: .8;
}
.xh-dt-user-dropdown-item:hover {
    color: #fff;
    background: color-mix(in srgb, var(--xh-panel) 70%, var(--xh-accent) 8%);
}
.xh-dt-user-dropdown-logout:hover {
    color: #fca5a5;
    background: color-mix(in srgb, #ef4444 12%, var(--xh-panel));
}
.xh-desktop-main { min-width: 0; }
html.xh-desktop-site { scroll-behavior: smooth; }
html.xh-desktop-site .xh-bottom-nav-wrap { display: none !important; }
html.xh-desktop-site .xh-desktop-main--auth { padding-bottom: 0 !important; }
html.xh-desktop-site .xh-desktop-main {
    background: var(--xh-dark);
}

/* Desktop subnav */
.xh-dt-subnav {
    background: color-mix(in srgb, var(--xh-dark) 88%, var(--xh-header));
    border-bottom: 1px solid color-mix(in srgb, var(--xh-border) 55%, transparent);
}
.xh-dt-subnav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 0 1rem;
    min-height: 2.35rem;
}
.xh-dt-subnav-links {
    display: flex;
    align-items: center;
    gap: .15rem;
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
    flex: 1;
}
.xh-dt-subnav-links::-webkit-scrollbar { display: none; }
.xh-dt-subnav-link {
    display: inline-flex;
    align-items: center;
    padding: .55rem .85rem;
    border-radius: .4rem;
    font-size: .8125rem;
    font-weight: 500;
    color: color-mix(in srgb, #fff 72%, var(--xh-muted));
    white-space: nowrap;
    flex-shrink: 0;
    transition: color .15s, background .15s;
}
.xh-dt-subnav-link:hover {
    color: #fff;
    background: color-mix(in srgb, #fff 8%, transparent);
}
.xh-dt-subnav-link.is-active {
    color: #fff;
    background: color-mix(in srgb, var(--xh-accent) 22%, var(--xh-panel));
    font-weight: 600;
}
.xh-dt-subnav-upload {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex-shrink: 0;
    padding: .45rem .9rem;
    border-radius: .45rem;
    font-size: .8125rem;
    font-weight: 600;
    color: color-mix(in srgb, #fff 85%, var(--xh-muted));
    border: 1px solid color-mix(in srgb, var(--xh-border) 70%, transparent);
    background: color-mix(in srgb, var(--xh-panel) 55%, transparent);
    transition: color .15s, border-color .15s, background .15s;
}
.xh-dt-subnav-upload:hover {
    color: #fff;
    border-color: color-mix(in srgb, var(--xh-accent) 35%, var(--xh-border));
    background: color-mix(in srgb, var(--xh-panel) 75%, var(--xh-accent) 8%);
}
.xh-dt-subnav-upload i { font-size: .78rem; opacity: .85; }

/* Desktop shell — sidebar + content (satu baseline atas) */
.xh-desktop-shell {
    display: flex;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    max-width: var(--xh-site-max);
    margin: 0 auto;
    padding: .55rem var(--xh-site-pad) .8rem;
    min-height: calc(100vh - 5.5rem);
}
@media (min-width: 1280px) {
    .xh-desktop-sidebar {
        width: 12.25rem;
        padding-right: .45rem;
    }
    .xh-desktop-content {
        padding-left: .55rem;
    }
    .xh-desktop-panel-body {
        padding: .35rem .7rem .75rem;
    }
}
.xh-desktop-sidebar {
    width: 13.75rem;
    flex-shrink: 0;
    position: sticky;
    top: 3.85rem;
    align-self: flex-start;
    max-height: calc(100vh - 4.5rem);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 .55rem 0 0;
    margin: 0;
    border-right: 1px solid color-mix(in srgb, var(--xh-border) 45%, transparent);
    background: transparent;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--xh-border) 80%, transparent) transparent;
}
.xh-desktop-sidebar::-webkit-scrollbar { width: 5px; }
.xh-desktop-sidebar::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--xh-border) 85%, transparent);
    border-radius: 9999px;
}
.xh-sidebar-block { display: flex; flex-direction: column; gap: .15rem; }
.xh-sidebar-divider {
    height: 1px;
    margin: .45rem .35rem;
    background: color-mix(in srgb, var(--xh-border) 60%, transparent);
}
.xh-sidebar-heading {
    margin: 0 .45rem .45rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-title, var(--xh-text-bright));
}
.xh-sidebar-heading i {
    font-size: .72rem;
    opacity: .85;
    color: var(--accent, var(--xh-accent));
}
.xh-sidebar-search-block { margin-bottom: .35rem; }
.xh-sidebar-search {
    position: relative;
    margin: 0 .35rem;
}
.xh-sidebar-search .xh-search-ac-icon-pos {
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .78rem;
    color: var(--text-muted, var(--xh-muted));
    pointer-events: none;
}
.xh-sidebar-search-input {
    width: 100%;
    padding: .55rem .7rem .55rem 2.1rem;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--border, var(--xh-border)) 70%, transparent);
    background: var(--input-bg, var(--xh-input-bg));
    color: var(--text-title, var(--xh-text-bright));
    font-size: .8125rem;
    outline: none;
    transition: border-color var(--dur-ui, 220ms) ease, box-shadow var(--dur-ui, 220ms) ease;
}
.xh-sidebar-search-input::placeholder {
    color: var(--text-muted, var(--xh-muted));
}
.xh-sidebar-search-input:focus {
    border-color: color-mix(in srgb, var(--accent, var(--xh-accent)) 45%, var(--border, var(--xh-border)));
    box-shadow: 0 0 0 3px var(--xh-accent-15);
}
.xh-sidebar-cats-panel {
    margin: 0 .35rem;
    padding: .55rem .45rem .6rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border, var(--xh-border)) 70%, transparent);
    background: var(--search-bg, var(--xh-surface));
}
.xh-sidebar-cat-icon {
    width: 1.55rem;
    height: 1.55rem;
    border-radius: .45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--accent, var(--xh-accent)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, var(--xh-accent)) 20%, transparent);
    font-size: .7rem;
    color: var(--accent, var(--xh-accent));
    transition: background var(--dur-ui, 220ms) ease, border-color var(--dur-ui, 220ms) ease, color var(--dur-ui, 220ms) ease, transform var(--dur-ui, 220ms) var(--ease-ui, ease);
}
.xh-sidebar-cat-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xh-sidebar-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .55rem;
    border-radius: 10px;
    font-size: .84rem;
    font-weight: 500;
    color: var(--sidebar, var(--xh-nav));
    transition:
        color var(--dur-ui, 220ms) ease,
        background var(--dur-ui, 220ms) ease,
        transform var(--dur-ui, 220ms) var(--ease-ui, ease);
}
.xh-sidebar-link i {
    width: 1.15rem;
    text-align: center;
    font-size: .95rem;
    opacity: .9;
    color: inherit;
}
.xh-sidebar-link:hover {
    color: var(--sidebar-hover, var(--xh-nav-hover));
    background: color-mix(in srgb, var(--sidebar-hover, var(--xh-nav-hover)) 8%, transparent);
}
.xh-sidebar-link.is-active {
    color: var(--accent, var(--xh-accent));
    background: var(--xh-accent-10);
    font-weight: 600;
}
.xh-sidebar-link.is-active i {
    color: var(--accent, var(--xh-accent));
}
.xh-sidebar-link:hover .xh-sidebar-cat-icon,
.xh-sidebar-link.is-active .xh-sidebar-cat-icon {
    transform: scale(1.06);
    background: color-mix(in srgb, var(--accent, var(--xh-accent)) 18%, transparent);
}
.xh-sidebar-link.is-active i { opacity: 1; color: var(--xh-accent); }
.xh-sidebar-logout-form { margin: 0; }
.xh-sidebar-logout {
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
    color: color-mix(in srgb, #fca5a5 88%, #fff);
}
.xh-sidebar-logout:hover {
    color: #fecaca;
    background: color-mix(in srgb, #f87171 10%, transparent);
}
.xh-sidebar-filter {
    width: 100%;
    margin: 0 0 .45rem;
    padding: .45rem .6rem;
    border-radius: .45rem;
    border: 1px solid color-mix(in srgb, var(--xh-border) 70%, transparent);
    background: var(--xh-input-bg);
    color: var(--xh-text-bright);
    font-size: .75rem;
    outline: none;
    transition: border-color .15s;
}
.xh-sidebar-filter::placeholder {
    color: var(--xh-muted);
}
.xh-sidebar-filter:focus {
    border-color: color-mix(in srgb, var(--xh-accent) 40%, var(--xh-border));
}
.xh-sidebar-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .12rem;
    max-height: 15rem;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--xh-border) 80%, transparent) transparent;
}
.xh-sidebar-cat-list::-webkit-scrollbar { width: 4px; }
.xh-sidebar-cat-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--xh-border) 85%, transparent);
    border-radius: 9999px;
}
.xh-sidebar-cat-link {
    padding: .38rem .45rem;
    font-size: .8125rem;
    gap: .5rem;
}
.xh-sidebar-cat-link.is-active .xh-sidebar-cat-icon {
    background: var(--xh-accent-15);
    border-color: color-mix(in srgb, var(--xh-accent) 35%, transparent);
    color: var(--xh-accent);
}
.xh-sidebar-cat-link:hover .xh-sidebar-cat-icon {
    background: color-mix(in srgb, var(--xh-accent) 16%, transparent);
    border-color: color-mix(in srgb, var(--xh-accent) 28%, transparent);
}
.xh-desktop-content {
    flex: 1;
    min-width: 0;
    padding: 0 0 0 .6rem;
    background: transparent;
}
.xh-desktop-shell:has(.xh-watch-page) .xh-desktop-content {
    padding-top: 0;
}
.xh-desktop-shell:has(.xh-watch-page) .xh-desktop-sidebar {
    padding-top: 0;
}
.xh-desktop-panel {
    border-radius: .75rem;
    border: 1px solid color-mix(in srgb, var(--xh-border) 45%, transparent);
    border-top-color: color-mix(in srgb, var(--xh-border) 22%, transparent);
    background: color-mix(in srgb, var(--xh-header) 97%, var(--xh-panel));
    overflow: hidden;
    box-shadow:
        0 1px 0 color-mix(in srgb, #fff 4%, transparent) inset,
        0 8px 32px rgba(0, 0, 0, .22);
    width: 100%;
}
.xh-desktop-panel--full {
    width: 100%;
}
.xh-site-inner.xh-desktop-panel--full {
    padding-top: .85rem;
    padding-bottom: 1.35rem;
}
.xh-site-inner.xh-desktop-bare-main {
    padding-top: .85rem;
    padding-bottom: 1.5rem;
}
.xh-desktop-panel:has(.xh-watch-page) {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    width: 100%;
}
.xh-desktop-panel:has(.xh-watch-page) .xh-desktop-panel-body {
    padding: 0;
}
/* Sisa breadcrumb / bar kosong */
.xh-breadcrumbs,
.xh-breadcrumbs--mobile,
.xh-breadcrumbs--desktop {
    display: none !important;
}
.xh-desktop-panel-body {
    padding: .35rem .75rem .75rem;
}
.xh-desktop-page {
    padding: 0;
}
.xh-legal-page {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}
/* Konten halaman statis (DMCA, Terms, Privacy, dll) — HTML dari admin */
.legal-content {
    color: color-mix(in srgb, #fff 82%, var(--xh-muted));
    font-size: .9375rem;
    line-height: 1.75;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.legal-content > *:first-child { margin-top: 0; }
.legal-content > *:last-child { margin-bottom: 0; }
.legal-content h1,
.legal-content h2,
.legal-content h3,
.legal-content h4,
.legal-content h5,
.legal-content h6 {
    color: #fff;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    margin: 1.85em 0 .65em;
    scroll-margin-top: 5rem;
}
.legal-content h1 { font-size: 1.5rem; }
.legal-content h2 { font-size: 1.25rem; padding-bottom: .35em; border-bottom: 1px solid color-mix(in srgb, var(--xh-border) 55%, transparent); }
.legal-content h3 { font-size: 1.08rem; color: color-mix(in srgb, #fff 92%, var(--xh-accent)); }
.legal-content h4 { font-size: .98rem; }
.legal-content p { margin: 0 0 1.05em; }
.legal-content a {
    color: var(--xh-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s;
}
.legal-content a:hover { color: var(--xh-accent-hover); }
.legal-content strong, .legal-content b { color: #fff; font-weight: 700; }
.legal-content em, .legal-content i { font-style: italic; }
.legal-content ul,
.legal-content ol {
    margin: 0 0 1.15em;
    padding-left: 1.4em;
}
.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }
.legal-content li { margin: 0 0 .5em; padding-left: .2em; }
.legal-content li::marker { color: var(--xh-accent); }
.legal-content ul ul,
.legal-content ol ol,
.legal-content ul ol,
.legal-content ol ul { margin: .5em 0 .5em; }
.legal-content blockquote {
    margin: 0 0 1.15em;
    padding: .65em 1.1em;
    border-left: 3px solid var(--xh-accent);
    background: color-mix(in srgb, var(--xh-panel) 55%, transparent);
    border-radius: 0 .5rem .5rem 0;
    color: color-mix(in srgb, #fff 78%, var(--xh-muted));
}
.legal-content blockquote p:last-child { margin-bottom: 0; }
.legal-content hr {
    border: 0;
    height: 1px;
    background: color-mix(in srgb, var(--xh-border) 65%, transparent);
    margin: 1.85em 0;
}
.legal-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .85em;
    background: color-mix(in srgb, var(--xh-panel) 70%, var(--xh-dark));
    border: 1px solid color-mix(in srgb, var(--xh-border) 55%, transparent);
    border-radius: .35rem;
    padding: .12em .4em;
    color: color-mix(in srgb, #fff 88%, var(--xh-accent));
}
.legal-content pre {
    margin: 0 0 1.15em;
    padding: 1em 1.1em;
    background: color-mix(in srgb, var(--xh-panel) 70%, var(--xh-dark));
    border: 1px solid color-mix(in srgb, var(--xh-border) 55%, transparent);
    border-radius: .6rem;
    overflow-x: auto;
    line-height: 1.6;
}
.legal-content pre code { background: none; border: 0; padding: 0; font-size: .85em; }
.legal-content img {
    max-width: 100%;
    height: auto;
    border-radius: .6rem;
    margin: .35em 0 1.15em;
}
.legal-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.15em;
    font-size: .9em;
    display: block;
    overflow-x: auto;
}
.legal-content th,
.legal-content td {
    border: 1px solid color-mix(in srgb, var(--xh-border) 60%, transparent);
    padding: .55em .75em;
    text-align: left;
    vertical-align: top;
}
.legal-content th {
    background: color-mix(in srgb, var(--xh-panel) 60%, transparent);
    color: #fff;
    font-weight: 600;
}
@media (max-width: 767px) {
    .legal-content { font-size: .9rem; line-height: 1.7; }
    .legal-content h1 { font-size: 1.3rem; }
    .legal-content h2 { font-size: 1.12rem; }
    .legal-content h3 { font-size: 1.02rem; }
}
.xh-promo-slot {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
    line-height: 0;
    text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--border, var(--xh-border)) 50%, transparent);
    box-shadow: 0 6px 24px color-mix(in srgb, #000 18%, transparent);
    transition: transform var(--dur-ui, 220ms) var(--ease-ui, ease), box-shadow var(--dur-ui, 220ms) ease;
}
.xh-promo-slot:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px color-mix(in srgb, #000 28%, transparent);
}
.xh-promo-img {
    display: block;
    width: 100%;
    height: auto !important;
    max-width: 100%;
    max-height: min(160px, 28vw) !important;
    object-fit: cover;
    object-position: center;
    vertical-align: top;
}
.xh-promo,
.xh-promo-inner,
.xh-promo-embedded-inner,
.xh-promo-content-inner {
    height: auto;
    max-height: none;
    overflow: visible;
}
.xh-desktop-content-top__promo.xh-desktop-content-top__block {
    overflow: visible;
    height: auto;
}
.xh-promo-inner {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding-top: .4rem;
    padding-bottom: .4rem;
}
.xh-promo-inner--dismissible {
    position: relative;
}
.xh-promo-close {
    position: absolute;
    top: .35rem;
    right: .35rem;
    z-index: 3;
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    border-radius: 9999px;
    background: rgba(0, 0, 0, .62);
    color: rgba(255, 255, 255, .95);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: .7rem;
    line-height: 1;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
    transition: background .15s, transform .12s;
}
.xh-promo-close:hover,
.xh-promo-close:active {
    background: rgba(0, 0, 0, .82);
    color: #fff;
    transform: scale(1.05);
}
.xh-promo--global.xh-promo--hidden {
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
}
.xh-promo--embedded {
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--xh-border) 55%, transparent);
}
.xh-promo--embedded .xh-promo-embedded-inner {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}
.xh-promo--embedded .xh-promo-img {
    height: auto !important;
    max-height: none !important;
    border-radius: 0;
    width: 100% !important;
}
.xh-promo--content .xh-promo-content-inner {
    padding: .4rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.xh-promo--content .xh-promo-img {
    height: auto !important;
    max-height: none !important;
}
@media (min-width: 640px) {
    .xh-promo--global .xh-promo-img,
    .xh-promo--embedded .xh-promo-img {
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
    }
}
@media (min-width: 768px) {
    .xh-promo--global .xh-promo-img,
    .xh-promo--embedded .xh-promo-img,
    .xh-promo--content .xh-promo-img {
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
    }
    .xh-promo-inner {
        gap: .35rem;
        padding-top: .35rem;
        padding-bottom: .35rem;
    }
}
.xh-desktop-content .grid.lg\:grid-cols-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 1280px) {
    .xh-desktop-content .grid.sm\:grid-cols-3.lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 1024px) {
    .xh-desktop-sidebar { width: 12.75rem; }
}
@media (max-width: 860px) {
    .xh-desktop-shell { flex-direction: column; padding-top: .75rem; }
    .xh-desktop-sidebar {
        position: static;
        width: 100%;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--xh-border) 55%, transparent);
        padding: 0 0 .75rem;
    }
    .xh-desktop-content {
        padding: .75rem 0 0;
    }
    .xh-sidebar-cats .xh-sidebar-cat-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .15rem;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
@media (max-width: 960px) {
    .xh-dt-header-top {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "brand actions"
            "search search";
        gap: .75rem 1rem;
    }
    .xh-dt-header-brand { grid-area: brand; }
    .xh-dt-header-search { grid-area: search; max-width: none; }
    .xh-dt-header-actions { grid-area: actions; justify-self: end; }
    .xh-dt-action-upload span { display: none; }
}
@media (max-width: 640px) {
    .xh-dt-search-group { gap: .4rem; }
    .xh-dt-search-action { width: 3.5rem; }
    .xh-dt-action-ghost span { display: none; }
}

.xh-header-search .xh-search-wrap {
    background: color-mix(in srgb, var(--xh-panel) 65%, var(--xh-dark));
    border: 1px solid color-mix(in srgb, var(--xh-border) 90%, transparent);
    border-radius: var(--xh-radius);
    transition: border-color .18s, box-shadow .18s;
}
.xh-header-search:focus-within .xh-search-wrap {
    border-color: color-mix(in srgb, var(--xh-accent) 55%, var(--xh-border));
    box-shadow: 0 0 0 3px var(--xh-accent-10);
}
.xh-header-search input::placeholder { color: color-mix(in srgb, var(--xh-muted) 75%, transparent); }
.xh-header-search .xh-search-btn {
    background: linear-gradient(135deg, var(--xh-accent-light), var(--xh-accent)) !important;
    border-radius: 0 var(--xh-radius-sm) var(--xh-radius-sm) 0;
}

/* Footer & bottom nav */
.xh-footer-bg, footer.xh-themed-footer {
    background: color-mix(in srgb, var(--xh-header) 94%, var(--xh-dark)) !important;
    border-top: 1px solid color-mix(in srgb, var(--xh-border) 65%, transparent);
    flex: 0 0 auto;
}
footer.xh-modern-footer::before {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--xh-accent) 35%, transparent) 35%,
        color-mix(in srgb, var(--xh-accent) 55%, #fff) 50%,
        color-mix(in srgb, var(--xh-accent) 35%, transparent) 65%,
        transparent 100%);
    opacity: .75;
}
.xh-footer-inner {
    padding-top: 1.75rem;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
}
.xh-footer-inner--compact {
    padding-top: 1.25rem;
    padding-bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.xh-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem 1.75rem;
}
@media (min-width: 640px) {
    .xh-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .xh-footer-grid {
        grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
        gap: 1.75rem 2rem;
    }
}
.xh-footer-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .75rem;
}
.xh-footer-logo {
    height: 2.5rem;
    max-width: 14rem;
    object-fit: contain;
}
.xh-footer-logo-mark {
    width: 2rem;
    height: 2rem;
    border-radius: .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, var(--xh-accent-light), var(--xh-accent));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--xh-accent) 35%, transparent);
}
.xh-footer-brand-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.03em;
}
.xh-footer-tagline {
    margin: 0;
    font-size: .78rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--xh-muted) 82%, #fff);
    max-width: 22rem;
}
.xh-footer-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin-top: .9rem;
}
.xh-footer-social-link {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: .65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    background: color-mix(in srgb, var(--xh-social-color, var(--xh-accent)) 78%, #111);
    border: 1px solid color-mix(in srgb, var(--xh-social-color, var(--xh-accent)) 45%, transparent);
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.xh-footer-social-link:hover {
    transform: translateY(-2px);
    background: var(--xh-social-color, var(--xh-accent));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--xh-social-color, var(--xh-accent)) 35%, transparent);
}
.xh-footer-social-link i {
    font-size: .92rem;
    line-height: 1;
}
.xh-footer-col-title {
    margin: 0 0 .75rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: color-mix(in srgb, #fff 88%, var(--xh-muted));
}
.xh-footer-links {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.xh-footer-links a,
.xh-footer-legal-link {
    font-size: .78rem;
    color: color-mix(in srgb, var(--xh-muted) 80%, #fff);
    text-decoration: none;
    transition: color .15s;
}
.xh-footer-links a:hover,
.xh-footer-legal-link:hover {
    color: var(--xh-accent);
}
.xh-footer-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.xh-stat-chip--sm {
    font-size: .68rem !important;
    padding: .22rem .5rem !important;
}
.xh-footer-copy {
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: .68rem;
    line-height: 1.45;
    color: color-mix(in srgb, var(--xh-muted) 85%, transparent);
}
.xh-bottom-nav-wrap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding-left: .75rem;
    padding-right: .75rem;
    padding-bottom: calc(.55rem + env(safe-area-inset-bottom, 0));
    pointer-events: none;
}
.xh-bottom-nav {
    width: 100%;
    max-width: var(--xh-site-max);
    margin-left: auto;
    margin-right: auto;
    pointer-events: auto;
    border-radius: var(--xh-radius-xl) !important;
    background: color-mix(in srgb, var(--xh-header) 82%, transparent) !important;
    backdrop-filter: blur(24px) saturate(1.25);
    -webkit-backdrop-filter: blur(24px) saturate(1.25);
    border: 1px solid color-mix(in srgb, var(--xh-border) 65%, #fff 8%) !important;
    box-shadow: var(--xh-shadow-lg), inset 0 1px 0 rgba(255,255,255,.06);
}
.xh-bottom-nav a {
    transition: color .18s, transform .12s;
    position: relative;
    gap: .2rem;
}
.xh-bottom-nav a .xh-nav-icon {
    width: 2rem;
    height: 2rem;
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .18s, color .18s, transform .12s;
}
.xh-bottom-nav a.is-active, .xh-bottom-nav a.text-xh-orange { color: var(--xh-accent) !important; }
.xh-bottom-nav a.is-active .xh-nav-icon {
    background: var(--xh-accent-15);
    color: var(--xh-accent);
    transform: translateY(-1px);
}
.xh-bottom-nav a.is-active span:last-child { font-weight: 700; }

/* Cookie consent bar — fixed di bawah footer */
.cookie-consent-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: #ececec;
    color: #2a2a2a;
    border-top: 1px solid #d4d4d4;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .18);
    transition: transform .28s ease, opacity .28s ease;
}
.cookie-consent-bar--with-nav {
    bottom: calc(4.25rem + env(safe-area-inset-bottom, 0));
}
.cookie-consent-bar--hide {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
}
.cookie-consent-bar--pending,
.cookie-consent-bar--dismissed {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.xh-age-gate-overlay--pending,
.xh-age-gate-overlay--dismissed,
.xh-age-gate-overlay[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
/* Banner preview admin — video pending / hidden */
.xh-admin-preview-banner {
    position: sticky;
    top: 0;
    z-index: 55;
    background: linear-gradient(135deg, #3730a3 0%, #4f46e5 48%, #6366f1 100%);
    color: #fff;
    font-size: .8125rem;
    box-shadow: 0 4px 20px rgba(15, 23, 42, .28);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.xh-admin-preview-banner__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    padding-left: calc(var(--xh-site-pad, 1rem) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--xh-site-pad, 1rem) + env(safe-area-inset-right, 0px));
}
.xh-admin-preview-banner__main {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    flex: 1;
    min-width: 0;
}
.xh-admin-preview-banner__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: .875rem;
}
.xh-admin-preview-banner__text {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}
.xh-admin-preview-banner__title {
    display: block;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .01em;
}
.xh-admin-preview-banner__desc {
    display: block;
    font-size: .75rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .88);
}
.xh-admin-preview-banner__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    flex-shrink: 0;
    padding: .45rem .85rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .96);
    color: #312e81;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.xh-admin-preview-banner__btn:hover {
    background: #fff;
    color: #1e1b4b;
}
.xh-admin-preview-banner__btn:active {
    transform: scale(.98);
}
@media (min-width: 640px) {
    .xh-admin-preview-banner__inner {
        flex-wrap: nowrap;
        padding-top: .65rem;
        padding-bottom: .65rem;
    }
    .xh-admin-preview-banner__main {
        align-items: center;
    }
    .xh-admin-preview-banner__desc {
        font-size: .8125rem;
    }
    .xh-admin-preview-banner__btn {
        font-size: .8125rem;
        padding: .5rem 1rem;
    }
}
@media (max-width: 639px) {
    .xh-admin-preview-banner__inner {
        flex-direction: column;
        align-items: stretch;
        padding-top: .65rem;
        padding-bottom: .75rem;
        padding-left: calc(var(--xh-mobile-pad, 1rem) + env(safe-area-inset-left, 0px));
        padding-right: calc(var(--xh-mobile-pad, 1rem) + env(safe-area-inset-right, 0px));
    }
    .xh-admin-preview-banner__btn {
        width: 100%;
    }
}
.xh-admin-preview-banner--reels {
    position: fixed;
    top: 3.25rem;
    left: 0;
    right: 0;
    z-index: 49;
}
@media (min-width: 768px) {
    .xh-admin-preview-banner--reels {
        left: 50%;
        right: auto;
        width: min(100vw - 2rem, 26rem);
        max-width: 26rem;
        transform: translateX(-50%);
    }
}
@media (min-width: 1200px) {
    .xh-admin-preview-banner--reels {
        width: min(100%, 28rem);
        max-width: 28rem;
    }
}
.reels-top-bar--preview {
    top: 3.35rem;
}
@media (max-width: 639px) {
    .xh-admin-preview-banner--reels {
        top: 2.75rem;
    }
    .reels-top-bar--preview {
        top: 6.5rem;
    }
}
.cookie-consent-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 1rem;
    max-width: var(--xh-site-max, 72rem);
    margin: 0 auto;
}
.cookie-consent-bar__text {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: .8125rem;
    line-height: 1.45;
    color: #3a3a3a;
}
.cookie-consent-bar__learn {
    color: inherit;
    text-decoration: underline;
    font-weight: 500;
    margin-left: .2rem;
}
.cookie-consent-bar__learn:hover {
    color: #111;
}
.cookie-consent-bar__ok {
    flex-shrink: 0;
    border: 0;
    border-radius: .2rem;
    background: #2b2b2b;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .55rem 1.35rem;
    cursor: pointer;
    transition: background .18s ease, transform .12s ease;
}
.cookie-consent-bar__ok:hover {
    background: #111;
}
.cookie-consent-bar__ok:active {
    transform: scale(.98);
}
@media (max-width: 639px) {
    .cookie-consent-bar__inner {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
        padding: .75rem 1rem 1rem;
    }
    .cookie-consent-bar__ok {
        width: 100%;
        text-align: center;
    }
}

/* Jarak untuk bottom nav di LUAR background footer (bukan padding kosong di dalam footer) */
footer.xh-footer-with-nav {
    margin-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
}
footer.xh-footer-with-nav .xh-footer-inner {
    padding-bottom: 1.1rem;
}
@media (min-width: 768px) {
    footer.xh-footer-with-nav {
        margin-bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
    }
}

/* Live strip — online users / Video Short */
.live-strip {
    background: var(--short-strip, var(--xh-strip)) !important;
    border-color: var(--border, var(--xh-border)) !important;
    border-radius: 14px;
}
.live-strip--panel {
    background: var(--short-strip, var(--xh-strip)) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border, var(--xh-border)) 55%, transparent);
}
.live-strip-panel-inner {
    padding: .65rem .9rem .55rem;
}
.live-strip-title {
    margin: 0 0 .45rem;
    color: var(--text-muted, var(--xh-muted));
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .7rem;
    line-height: 1.2;
}
.live-strip-track {
    display: flex;
    gap: .65rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--border, var(--xh-border)) 85%, transparent) transparent;
    padding-bottom: .25rem;
    margin: 0 -.1rem;
    -webkit-overflow-scrolling: touch;
}
.live-strip-track::-webkit-scrollbar { height: 4px; }
.live-strip-track::-webkit-scrollbar-track { background: transparent; }
.live-strip-track::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--border, var(--xh-border)) 80%, transparent);
    border-radius: 9999px;
}
.live-strip-item {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    min-width: 3.15rem;
    transition: transform var(--dur-ui, 220ms) var(--ease-ui, ease);
}
.live-strip-item:hover {
    transform: translateY(-3px);
}
.live-strip-ring {
    position: relative;
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 9999px;
    padding: 2px;
    background: linear-gradient(135deg, var(--accent, var(--xh-accent)), var(--accent-hover, var(--xh-accent-hover)), var(--xh-accent-light));
    transition: transform var(--dur-ui, 220ms) var(--ease-ui, ease), box-shadow var(--dur-ui, 220ms) ease;
}
.live-strip-item:hover .live-strip-ring {
    transform: scale(1.06);
    box-shadow: 0 0 0 3px var(--xh-accent-20);
}
.live-strip--panel .live-strip-ring {
    width: 2.6rem;
    height: 2.6rem;
}
.live-strip-avatar-border {
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    overflow: hidden;
    border: 1px solid var(--xh-border) !important;
    background: var(--xh-panel) !important;
}
.live-strip-avatar-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 700;
    color: var(--xh-muted);
}
.live-strip-live-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: .5rem;
    height: .5rem;
    background: #ef4444;
    border-radius: 9999px;
    border: 1.5px solid var(--xh-dark) !important;
}
.live-strip-label {
    max-width: 3.25rem;
    font-size: .62rem;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: color-mix(in srgb, #fff 55%, var(--xh-muted));
}
@media (min-width: 640px) {
    .live-strip-panel-inner { padding: .7rem 1.15rem .65rem; }
    .live-strip-ring { width: 3rem; height: 3rem; }
    .live-strip--panel .live-strip-ring { width: 2.65rem; height: 2.65rem; }
    .live-strip-label { max-width: 3.5rem; font-size: .65rem; }
    .live-strip-item { min-width: 3.25rem; gap: .35rem; }
}

/* Header search dropdown */
.xh-header-search-toggle.is-active {
    color: var(--xh-accent) !important;
    border-color: color-mix(in srgb, var(--xh-accent) 45%, var(--xh-border)) !important;
}
.xh-header-search-dropdown {
    display: block;
    overflow: hidden;
    border-top: 1px solid color-mix(in srgb, var(--xh-border) 70%, transparent);
    background: color-mix(in srgb, var(--xh-header) 95%, var(--xh-dark));
    padding: 0 .75rem;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition:
        max-height var(--xh-duration) var(--xh-ease-out),
        opacity var(--xh-duration) var(--xh-ease-out),
        transform var(--xh-duration) var(--xh-ease-out),
        padding var(--xh-duration) var(--xh-ease-out);
}
.xh-header-search-dropdown[hidden]:not(.is-open) {
    display: none;
}
.xh-header-search-dropdown.is-open {
    max-height: 4.5rem;
    opacity: 1;
    transform: translateY(0);
    padding: .55rem .75rem .65rem;
}
.xh-header-search-dropdown .xh-search-wrap {
    display: flex;
    align-items: center;
    gap: .45rem;
    height: 2.5rem;
    padding: 0 .6rem 0 .75rem;
    border-radius: .65rem;
    background: color-mix(in srgb, var(--xh-panel) 72%, var(--xh-dark));
    border: 1px solid color-mix(in srgb, var(--xh-border) 88%, transparent);
}
.xh-header-search-dropdown:focus-within .xh-search-wrap {
    border-color: color-mix(in srgb, var(--xh-accent) 50%, var(--xh-border));
    box-shadow: 0 0 0 2px var(--xh-accent-10);
}
.xh-header-search-dropdown .xh-search-icon {
    color: color-mix(in srgb, var(--xh-muted) 80%, #fff);
    font-size: .8rem;
    flex-shrink: 0;
}
.xh-header-search-dropdown input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: .875rem;
    color: #fff;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.xh-header-search-dropdown input::placeholder {
    color: color-mix(in srgb, var(--xh-muted) 78%, transparent);
}
.xh-header-search-dropdown .xh-search-submit {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: var(--xh-accent);
    padding: .25rem .4rem;
    font-size: .85rem;
}
.xh-header-search-dropdown .xh-search-close {
    flex-shrink: 0;
    width: 1.85rem;
    height: 1.85rem;
    border: 0;
    border-radius: .5rem;
    background: color-mix(in srgb, var(--xh-panel) 60%, transparent);
    color: color-mix(in srgb, var(--xh-muted) 70%, #fff);
    font-size: .72rem;
}

/* Forms, buttons, panels */
.xh-header-search input:focus, .xh-header-search:focus-within { border-color: var(--xh-accent) !important; box-shadow: 0 0 0 1px var(--xh-accent-30); }
.xh-sort-pill { transition: all .18s; border-color: var(--xh-border); font-weight: 600; }
.xh-sort-pill.is-active {
    background: linear-gradient(135deg, var(--xh-accent-light), var(--xh-accent)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 14px var(--xh-accent-30);
}
.xh-sort-wrap {
    border-radius: var(--xh-radius) !important;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--xh-border) 85%, transparent) !important;
    background: color-mix(in srgb, var(--xh-panel) 50%, transparent);
}
.xh-watch-panel {
    background: color-mix(in srgb, var(--xh-panel) 88%, transparent);
    backdrop-filter: blur(8px);
    border-radius: var(--xh-radius-lg);
    box-shadow: var(--xh-shadow-sm), inset 0 1px 0 rgba(255,255,255,.04);
}
.xh-hero {
    position: relative;
    border-radius: var(--xh-radius-xl);
    border: 1px solid color-mix(in srgb, var(--xh-border) 70%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--xh-panel) 90%, var(--xh-accent) 8%) 0%, color-mix(in srgb, var(--xh-dark) 85%, var(--xh-panel)) 100%);
    overflow: hidden;
}
.xh-hero::before {
    content: '';
    position: absolute;
    top: -40%; right: -10%;
    width: 55%; height: 140%;
    background: radial-gradient(circle, var(--xh-accent-15), transparent 65%);
    pointer-events: none;
}
.xh-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .65rem;
    border-radius: 9999px;
    font-size: .7rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--xh-panel) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--xh-border) 80%, transparent);
    color: color-mix(in srgb, #fff 70%, var(--xh-muted));
}
.xh-btn-primary, .xh-themed-btn {
    background: linear-gradient(135deg, var(--xh-accent-light) 0%, var(--xh-accent) 50%, var(--xh-accent-hover) 100%) !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: var(--xh-radius-sm);
    box-shadow: 0 4px 14px var(--xh-accent-30);
    transition:
        transform var(--xh-duration-fast) var(--xh-ease-spring),
        box-shadow var(--xh-duration) var(--xh-ease-out),
        filter var(--xh-duration-fast) ease;
}
.xh-btn-primary:hover, .xh-themed-btn:hover {
    filter: brightness(1.06);
    box-shadow: 0 6px 20px var(--xh-accent-30);
    transform: translateY(-1px);
}
.xh-btn-primary:active, .xh-themed-btn:active {
    transform: translateY(0) scale(.98);
    box-shadow: 0 2px 10px var(--xh-accent-20);
}
.xh-input, .xh-themed-input {
    background-color: color-mix(in srgb, var(--xh-dark) 65%, var(--xh-panel)) !important;
    border-color: var(--xh-border) !important;
    color: #f3f4f6;
    border-radius: var(--xh-radius-sm);
}
.xh-input:focus, .xh-themed-input:focus { border-color: var(--xh-accent) !important; outline: none; box-shadow: 0 0 0 2px var(--xh-accent-20); }

/* Captcha — login / register */
.xh-captcha-block {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.xh-captcha-label {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--xh-muted) 75%, #fff);
}
.xh-captcha-math,
.xh-captcha-image {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.xh-captcha-math-row,
.xh-captcha-image-row {
    display: flex;
    align-items: stretch;
    gap: .5rem;
    flex-wrap: nowrap;
}
.xh-captcha-question {
    flex: 0 1 auto;
    min-width: 6.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .65rem .85rem;
    border-radius: .65rem;
    border: 1px solid color-mix(in srgb, var(--xh-border) 70%, transparent);
    background: color-mix(in srgb, var(--xh-dark) 80%, var(--xh-panel));
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .95rem;
    font-weight: 700;
    color: var(--xh-accent);
    letter-spacing: .02em;
}
.xh-captcha-refresh {
    flex-shrink: 0;
    width: 2.65rem;
    height: 2.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .65rem;
    border: 1px solid color-mix(in srgb, var(--xh-border) 70%, transparent);
    background: color-mix(in srgb, var(--xh-panel) 65%, var(--xh-dark));
    color: color-mix(in srgb, var(--xh-muted) 70%, #fff);
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.xh-captcha-refresh:hover {
    color: #fff;
    border-color: color-mix(in srgb, var(--xh-accent) 40%, var(--xh-border));
    background: color-mix(in srgb, var(--xh-accent) 10%, var(--xh-panel));
}
.xh-captcha-input {
    width: 100%;
    min-height: 2.65rem;
}
.xh-captcha-input--inline {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}
.xh-captcha-image-row .xh-captcha-input {
    flex: 1 1 auto;
    min-width: 0;
}
.xh-captcha-input--text {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .8125rem;
}
.xh-captcha-img {
    height: 2.65rem;
    width: auto;
    min-width: 6.75rem;
    max-width: 42%;
    border-radius: .55rem;
    border: 1px solid color-mix(in srgb, var(--xh-border) 70%, transparent);
    cursor: pointer;
    flex-shrink: 0;
    background: #1a1a1a;
    object-fit: contain;
}
.xh-captcha-hint {
    margin: 0;
    font-size: .7rem;
    color: color-mix(in srgb, var(--xh-muted) 85%, #fff);
}
.xh-captcha-warn {
    margin: 0;
    font-size: .75rem;
    color: #fbbf24;
}
.xh-captcha-recaptcha {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
@media (max-width: 400px) {
    .xh-captcha-recaptcha > div {
        transform: scale(.92);
        transform-origin: 0 0;
    }
    .xh-captcha-recaptcha {
        min-height: 4.6rem;
    }
}
.xh-themed-card {
    background: linear-gradient(165deg, color-mix(in srgb, var(--xh-panel) 94%, #fff 6%) 0%, var(--xh-panel) 100%) !important;
    border-color: var(--xh-border) !important;
    border-radius: var(--xh-radius);
}

/* Auth — login / register */
.xh-auth-page {
    position: relative;
    min-height: calc(100vh - 9rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem 3rem;
    overflow: hidden;
}
.xh-auth-page--mobile {
    min-height: calc(100vh - 7.5rem);
    padding: 1.5rem 1rem 2.5rem;
}
.xh-auth-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 45% at 15% 0%, color-mix(in srgb, var(--xh-accent) 22%, transparent), transparent 70%),
        radial-gradient(ellipse 45% 40% at 95% 100%, color-mix(in srgb, var(--xh-accent) 12%, transparent), transparent 72%);
}
.xh-auth-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 26rem;
}
.xh-auth-brand {
    text-align: center;
    margin-bottom: 1.35rem;
}
.xh-auth-logo {
    width: auto;
    max-width: 16rem;
    height: 4rem;
    margin: 0 auto .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}
.xh-auth-logo-img {
    display: block;
    max-width: 100%;
    max-height: 4rem;
    width: auto;
    height: auto;
    object-fit: contain;
}
.xh-auth-logo-fallback {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(145deg, var(--xh-accent-light), var(--xh-accent));
    box-shadow: 0 10px 28px var(--xh-accent-30);
}
.xh-auth-title {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #fff;
}
.xh-auth-subtitle {
    margin: .4rem 0 0;
    font-size: .875rem;
    color: color-mix(in srgb, var(--xh-muted) 80%, #fff);
}
.xh-auth-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.35rem 1.35rem 1.25rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--xh-border) 70%, transparent);
    background: linear-gradient(165deg, color-mix(in srgb, var(--xh-panel) 88%, var(--xh-dark)) 0%, color-mix(in srgb, var(--xh-panel) 72%, var(--xh-dark)) 100%);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .35), inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}
.xh-auth-field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.xh-auth-field label {
    font-size: .78rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--xh-muted) 70%, #fff);
    letter-spacing: .01em;
}
.xh-auth-input {
    width: 100%;
    padding: .72rem .9rem !important;
    font-size: .875rem !important;
    border-radius: .6rem !important;
    background: color-mix(in srgb, var(--xh-dark) 72%, var(--xh-panel)) !important;
}
.xh-auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
@media (max-width: 520px) {
    .xh-auth-grid { grid-template-columns: 1fr; }
}
.xh-auth-card .xh-captcha-block {
    margin-top: .15rem;
}
.xh-auth-submit {
    width: 100%;
    margin-top: .25rem;
    padding: .8rem 1rem;
    border: 0;
    border-radius: .65rem;
    font-size: .9rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, var(--xh-accent-light), var(--xh-accent) 55%, var(--xh-accent-hover));
    box-shadow: 0 8px 22px var(--xh-accent-30);
    transition: filter .15s, transform .12s;
}
.xh-auth-submit:hover { filter: brightness(1.06); }
.xh-auth-submit:active { transform: scale(.99); }
.xh-auth-social {
    margin-top: 1rem;
}
.xh-auth-resend {
    margin-top: .75rem;
    text-align: center;
}
.xh-auth-resend button {
    border: 0;
    background: none;
    color: var(--xh-accent);
    font-size: .75rem;
    cursor: pointer;
    text-decoration: underline;
}
.xh-auth-switch {
    margin: 1.15rem 0 0;
    text-align: center;
    font-size: .8125rem;
    color: color-mix(in srgb, var(--xh-muted) 85%, #fff);
}
.xh-auth-switch a {
    color: var(--xh-accent);
    font-weight: 600;
    text-decoration: none;
}
.xh-auth-switch a:hover { text-decoration: underline; }
.xh-desktop-panel--full .xh-desktop-panel-body:has(.xh-auth-page) {
    padding: 0;
    background: transparent;
}
.xh-desktop-panel--full:has(.xh-auth-page) {
    background: transparent;
    border: none;
    box-shadow: none;
}
    box-shadow: 0 4px 24px rgba(0,0,0,.25);
}
.xh-page-head { border-bottom: 1px solid var(--xh-border); padding-bottom: 1rem; margin-bottom: 1.5rem; }
.xh-page-eyebrow { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--xh-muted); }
.xh-channel-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--xh-radius);
    border: 1px solid var(--xh-border);
    background: linear-gradient(135deg, color-mix(in srgb, var(--xh-panel) 85%, var(--xh-accent) 15%) 0%, var(--xh-panel) 55%, var(--xh-dark) 100%);
}
.xh-channel-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--xh-accent), var(--xh-accent-hover));
}
.xh-ch-subs-modal {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}
.xh-ch-subs-modal.hidden { display: none !important; }
html.xh-ch-subs-open { overflow: hidden; }
.xh-ch-subs-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(3px);
}
.xh-ch-subs-panel {
    position: relative;
    z-index: 1;
    width: min(100%, 32rem);
    max-height: min(78vh, 34rem);
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--xh-panel) 94%, #000);
    border: 1px solid var(--xh-border);
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .45);
    outline: none;
}
@media (min-width: 640px) {
    .xh-ch-subs-modal { align-items: center; padding: 1rem; }
    .xh-ch-subs-panel { border-radius: 1rem; max-height: min(70vh, 36rem); }
}
.xh-ch-subs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--xh-border) 70%, transparent);
}
.xh-ch-subs-title {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
}
.xh-ch-subs-total { color: var(--xh-muted); font-weight: 600; }
.xh-ch-subs-close {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: .5rem;
    background: rgba(255, 255, 255, .06);
    color: #ccc;
    cursor: pointer;
}
.xh-ch-subs-close:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.xh-ch-subs-body {
    padding: .5rem .75rem .85rem;
    overflow: auto;
    min-height: 8rem;
}
.xh-ch-subs-list { min-height: 4rem; }
.xh-ch-subs-list ul { list-style: none; margin: 0; padding: 0; }
.xh-ch-subs-item { border-bottom: 1px solid color-mix(in srgb, var(--xh-border) 55%, transparent); }
.xh-ch-subs-item:last-child { border-bottom: 0; }
.xh-ch-subs-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .35rem;
    text-decoration: none;
    color: inherit;
}
.xh-ch-subs-link:hover { background: rgba(255, 255, 255, .04); }
.xh-ch-subs-meta { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.xh-ch-subs-meta strong {
    font-size: .84rem;
    color: #eee;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xh-ch-subs-meta small { font-size: .68rem; color: var(--xh-muted); }
.xh-ch-subs-empty, .xh-ch-subs-loading {
    margin: 0;
    padding: 1.25rem .5rem;
    text-align: center;
    font-size: .8rem;
    color: var(--xh-muted);
}
.xh-ch-subs-more {
    display: block;
    width: 100%;
    margin-top: .5rem;
    padding: .55rem;
    border-radius: .5rem;
    border: 1px solid var(--xh-border);
    background: rgba(255, 255, 255, .05);
    color: #ddd;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
}
.xh-ch-subs-more:hover { background: rgba(255, 255, 255, .09); }
.xh-channel-tabs { scrollbar-width: none; }
.xh-channel-tabs::-webkit-scrollbar { display: none; }
.xh-channel-tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .65rem .85rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--xh-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}
.xh-channel-tab i { font-size: .72rem; opacity: .85; }
.xh-channel-tab em {
    font-style: normal;
    font-size: .65rem;
    font-weight: 700;
    padding: .1rem .4rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--xh-panel) 70%, #fff 5%);
    border: 1px solid var(--xh-border);
    color: color-mix(in srgb, #fff 45%, var(--xh-muted));
}
.xh-channel-tab:hover { color: #fff; }
.xh-channel-tab.is-active {
    color: var(--xh-accent);
    border-bottom-color: var(--xh-accent);
}
.xh-channel-tab.is-active em {
    background: color-mix(in srgb, var(--xh-accent) 18%, transparent);
    border-color: color-mix(in srgb, var(--xh-accent) 35%, var(--xh-border));
    color: var(--xh-accent);
}
.xh-channel-reel { border-radius: var(--xh-radius); }
.xh-empty-state {
    border: 1px dashed color-mix(in srgb, var(--xh-border) 80%, var(--xh-muted));
    border-radius: var(--xh-radius);
    background: color-mix(in srgb, var(--xh-panel) 40%, transparent);
}
.xh-text-accent, .text-xh-orange { color: var(--xh-accent) !important; }
.xh-bg-accent, .bg-xh-orange { background-color: var(--xh-accent) !important; }
.bg-xh-orange-hover:hover, .hover\:bg-xh-orange-hover:hover { background-color: var(--xh-accent-hover) !important; }
.border-xh-orange, .hover\:border-xh-orange:hover { border-color: var(--xh-accent) !important; }
.bg-xh-dark { background-color: var(--xh-dark) !important; }
.bg-xh-panel { background-color: var(--xh-panel) !important; }
.border-xh-border { border-color: var(--xh-border) !important; }
.text-xh-muted { color: var(--xh-muted) !important; }

/* Legacy brand-* & surface-* */
.bg-brand-500, .bg-brand-500\/20, .file\:bg-brand-500 { background-color: var(--xh-accent) !important; }
.hover\:bg-brand-600:hover, .bg-brand-600 { background-color: var(--xh-accent-hover) !important; }
.text-brand-400, .text-brand-500, .hover\:text-brand-300:hover, .hover\:text-brand-400:hover { color: var(--xh-accent) !important; }
.border-brand-500\/30, .border-brand-500\/50, .hover\:border-brand-500\/30:hover, .focus\:border-brand-500\/50:focus { border-color: var(--xh-accent-30) !important; }
.focus\:ring-brand-500\/30:focus { --tw-ring-color: var(--xh-accent-30) !important; }
.shadow-brand-500\/20, .shadow-brand-500\/25, .shadow-brand-500\/30 { --tw-shadow-color: var(--xh-accent-30) !important; }
.from-brand-500 { --tw-gradient-from: var(--xh-accent) var(--tw-gradient-from-position) !important; }
.to-brand-700 { --tw-gradient-to: var(--xh-accent-dark) var(--tw-gradient-to-position) !important; }
.bg-surface-light, .bg-surface-lighter, .bg-surface { background-color: var(--xh-panel) !important; }
.bg-\[\#0a0a0a\] { background-color: var(--xh-dark) !important; }
.bg-\[\#e8e8e8\] { background-color: var(--xh-strip) !important; }
.border-\[\#e8e8e8\] { border-color: var(--xh-strip) !important; }

/* Reels accent */
.border-purple-500\/20, .border-purple-500\/30 { border-color: var(--xh-accent-30) !important; }
.bg-purple-500\/10, .bg-purple-500\/20 { background-color: var(--xh-accent-10) !important; }
.text-purple-300 { color: var(--xh-accent-light) !important; }
.from-purple-900\/25, .from-purple-900\/30 { --tw-gradient-from: color-mix(in srgb, var(--xh-accent) 18%, var(--xh-panel)) var(--tw-gradient-from-position) !important; }
.focus\:border-purple-500:focus { border-color: var(--xh-accent) !important; }
.from-xh-orange { --tw-gradient-from: var(--xh-accent) var(--tw-gradient-from-position) !important; }
.to-purple-500, .to-purple-600 { --tw-gradient-to: var(--xh-accent-hover) var(--tw-gradient-to-position) !important; }

#player-opening {
    background: transparent !important;
}
#player-opening .opening-video {
    background: transparent !important;
}
#player-opening.is-fading {
    pointer-events: none;
}
#player-opening.is-fading #opening-skip,
#player-opening.is-fading #opening-play-btn,
#player-opening.is-fading .opening-badge {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}
.xh-player .bg-xh-orange, #opening-skip:hover, #ad-skip { background-color: var(--xh-accent) !important; }
#btn-like.bg-xh-orange { background-color: var(--xh-accent) !important; border-color: var(--xh-accent) !important; }

/* Header sticky — desktop & panel; mobile stream: header scroll, iklan sticky */
header.xh-site-header:not(.xh-mobile-header) {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    top: env(safe-area-inset-top, 0);
    z-index: 50;
    width: 100%;
}
@media (max-width: 767px) {
    html.xh-mobile-site header.xh-site-header.xh-mobile-header {
        position: relative;
        top: auto;
        z-index: 40;
    }
    html.xh-mobile-site header.xh-site-header.xh-mobile-header.is-search-open,
    html.xh-mobile-site header.xh-site-header.xh-mobile-header.xh-notif-open {
        z-index: 60;
    }
    html.xh-mobile-site .xh-promo--global {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        top: env(safe-area-inset-top, 0);
        z-index: 45;
        width: 100%;
    }
}

/* Mobile — teks & viewport benar di iOS/Android */
html.xh-mobile-site {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: clip;
    max-width: 100%;
}
@supports not (overflow: clip) {
    html.xh-mobile-site { overflow-x: hidden; }
}
html.xh-mobile-site body {
    overflow-x: visible;
    max-width: 100%;
    width: 100%;
}
html.xh-mobile-site body.xh-mobile-body {
    display: block;
    min-height: 0;
}
html.xh-mobile-site body.xh-mobile-body > main {
    flex: none;
}
.xh-overlay-fixed {
    position: fixed;
    inset: 0;
}
.xh-age-gate-overlay { z-index: 100; }
#ajax-overlay.xh-ajax-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .4);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--xh-duration) var(--xh-ease-out),
        visibility 0s linear var(--xh-duration);
}
#ajax-overlay.xh-ajax-overlay.is-loading {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity var(--xh-duration-fast) var(--xh-ease-out),
        visibility 0s;
}
.xh-ajax-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    transform: scale(.94);
    opacity: 0;
    transition:
        transform var(--xh-duration) var(--xh-ease-spring),
        opacity var(--xh-duration) var(--xh-ease-out);
}
#ajax-overlay.xh-ajax-overlay.is-loading .xh-ajax-overlay-inner {
    transform: scale(1);
    opacity: 1;
}
.xh-ajax-overlay-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 9999px;
    animation: xh-ajax-spin .75s linear infinite;
}
.xh-ajax-overlay-label {
    color: #fff;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .04em;
}
@keyframes xh-ajax-spin {
    to { transform: rotate(360deg); }
}

/* ── Motion system ── */
@keyframes xh-motion-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes xh-motion-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes xh-motion-scale-in {
    from { opacity: 0; transform: scale(.94); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes xh-motion-slide-down {
    from { opacity: 0; transform: translateY(-100%); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes xh-motion-badge-pop {
    0% { transform: scale(.6); opacity: 0; }
    55% { transform: scale(1.12); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes xh-motion-pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: .72; }
}

body.xh-motion-ready main.xh-page-shell {
    animation: xh-motion-fade-in var(--xh-duration-slow) var(--xh-ease-out) both;
}
body.xh-motion-ready .xh-desktop-panel-body,
body.xh-motion-ready .xh-desktop-panel--full .xh-desktop-panel-body {
    animation: xh-motion-fade-up var(--xh-duration-slow) var(--xh-ease-out) both;
    animation-delay: .04s;
}

.xh-video-grid > *,
main .grid > .video-card {
    animation: xh-motion-fade-up var(--xh-duration-slow) var(--xh-ease-out) both;
}
.xh-video-grid > *:nth-child(1), main .grid > .video-card:nth-child(1){animation-delay:0.032s}
.xh-video-grid > *:nth-child(2), main .grid > .video-card:nth-child(2){animation-delay:0.064s}
.xh-video-grid > *:nth-child(3), main .grid > .video-card:nth-child(3){animation-delay:0.096s}
.xh-video-grid > *:nth-child(4), main .grid > .video-card:nth-child(4){animation-delay:0.128s}
.xh-video-grid > *:nth-child(5), main .grid > .video-card:nth-child(5){animation-delay:0.160s}
.xh-video-grid > *:nth-child(6), main .grid > .video-card:nth-child(6){animation-delay:0.192s}
.xh-video-grid > *:nth-child(7), main .grid > .video-card:nth-child(7){animation-delay:0.224s}
.xh-video-grid > *:nth-child(8), main .grid > .video-card:nth-child(8){animation-delay:0.256s}
.xh-video-grid > *:nth-child(9), main .grid > .video-card:nth-child(9){animation-delay:0.288s}
.xh-video-grid > *:nth-child(10), main .grid > .video-card:nth-child(10){animation-delay:0.320s}
.xh-video-grid > *:nth-child(11), main .grid > .video-card:nth-child(11){animation-delay:0.352s}
.xh-video-grid > *:nth-child(12), main .grid > .video-card:nth-child(12){animation-delay:0.384s}
.xh-video-grid > *:nth-child(13), main .grid > .video-card:nth-child(13){animation-delay:0.416s}
.xh-video-grid > *:nth-child(14), main .grid > .video-card:nth-child(14){animation-delay:0.448s}
.xh-video-grid > *:nth-child(15), main .grid > .video-card:nth-child(15){animation-delay:0.480s}
.xh-video-grid > *:nth-child(16), main .grid > .video-card:nth-child(16){animation-delay:0.512s}
.xh-video-grid > *:nth-child(17), main .grid > .video-card:nth-child(17){animation-delay:0.544s}
.xh-video-grid > *:nth-child(18), main .grid > .video-card:nth-child(18){animation-delay:0.576s}
.xh-video-grid > *:nth-child(19), main .grid > .video-card:nth-child(19){animation-delay:0.608s}
.xh-video-grid > *:nth-child(20), main .grid > .video-card:nth-child(20){animation-delay:0.640s}
.xh-video-grid > *:nth-child(21), main .grid > .video-card:nth-child(21){animation-delay:0.672s}
.xh-video-grid > *:nth-child(22), main .grid > .video-card:nth-child(22){animation-delay:0.704s}
.xh-video-grid > *:nth-child(23), main .grid > .video-card:nth-child(23){animation-delay:0.736s}
.xh-video-grid > *:nth-child(24), main .grid > .video-card:nth-child(24){animation-delay:0.750s}


.xh-flash-banner:not(.is-leaving) {
    animation: xh-motion-slide-down var(--xh-duration) var(--xh-ease-out) both;
}
.xh-flash-banner.is-leaving,
.xh-flash-banner[hidden] {
    animation: none !important;
    display: none !important;
}

.xh-age-gate-overlay {
    animation: xh-motion-fade-in var(--xh-duration) var(--xh-ease-out) both;
}
.xh-age-gate-overlay .xh-themed-card,
.xh-age-gate-overlay .max-w-md {
    animation: xh-motion-scale-in var(--xh-duration-slow) var(--xh-ease-spring) both;
    animation-delay: .06s;
}

.xh-bottom-nav a:active .xh-nav-icon {
    transform: scale(.9);
}
.xh-bottom-nav a .xh-nav-icon {
    transition:
        background var(--xh-duration) var(--xh-ease-out),
        color var(--xh-duration) var(--xh-ease-out),
        transform var(--xh-duration-fast) var(--xh-ease-spring);
}

.live-strip-item {
    transition: transform var(--xh-duration) var(--xh-ease-spring), opacity var(--xh-duration-fast) ease;
}
.live-strip-item:hover {
    transform: translateY(-2px) scale(1.03);
}

.xh-nav-pill {
    transition:
        color var(--xh-duration-fast) var(--xh-ease-out),
        background var(--xh-duration-fast) var(--xh-ease-out),
        border-color var(--xh-duration-fast) var(--xh-ease-out),
        transform var(--xh-duration-fast) var(--xh-ease-spring);
}
.xh-nav-pill:active { transform: scale(.97); }
.xh-nav-pill.is-active {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}

.xh-mobile-header-btn {
    transition:
        color var(--xh-duration-fast) var(--xh-ease-out),
        border-color var(--xh-duration-fast) var(--xh-ease-out),
        background var(--xh-duration-fast) var(--xh-ease-out),
        transform var(--xh-duration-fast) var(--xh-ease-spring);
}
.xh-mobile-header-btn:active { transform: scale(.94); }

.xh-themed-card {
    transition:
        border-color var(--xh-duration) var(--xh-ease-out),
        box-shadow var(--xh-duration) var(--xh-ease-out),
        transform var(--xh-duration) var(--xh-ease-out);
}
.xh-themed-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, .32);
}

.xh-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity var(--xh-duration-slow) var(--xh-ease-out),
        transform var(--xh-duration-slow) var(--xh-ease-out);
}
.xh-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.xh-desktop-panel {
    transition: box-shadow var(--xh-duration-slow) var(--xh-ease-out);
}

/* ═══════════════════════════════════════════════════════════
   Premium 2026 homepage polish — theme-driven, structure-safe
   ═══════════════════════════════════════════════════════════ */
.xh-desktop-content-top {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1rem;
}
.xh-desktop-page,
.xh-mobile-feed {
    padding-bottom: 1.25rem;
}
.xh-desktop-shell {
    gap: 0;
}
.xh-desktop-panel {
    border-radius: 14px;
    background: color-mix(in srgb, var(--header, var(--xh-header)) 96%, var(--surface, var(--xh-panel)));
    border-color: color-mix(in srgb, var(--border, var(--xh-border)) 50%, transparent);
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--text-title, #fff) 4%, transparent) inset,
        0 8px 28px color-mix(in srgb, #000 20%, transparent);
}
.xh-desktop-panel-body {
    padding: .75rem clamp(.7rem, 1.2vw, 1rem) 1.15rem;
}
.xh-desktop-sidebar {
    padding-right: .55rem;
}
.xh-sidebar-block {
    gap: .12rem;
    margin-bottom: .1rem;
}
.xh-sidebar-divider {
    margin: .45rem .35rem;
    background: color-mix(in srgb, var(--border, var(--xh-border)) 65%, transparent);
}
.xh-sidebar-filter {
    border-radius: 9999px !important;
    background: var(--input-bg, var(--xh-input-bg)) !important;
    border-color: color-mix(in srgb, var(--border, var(--xh-border)) 70%, transparent) !important;
    color: var(--text-title, var(--xh-text-bright)) !important;
    transition: border-color var(--dur-ui, 220ms) ease, box-shadow var(--dur-ui, 220ms) ease !important;
}
.xh-sidebar-filter:focus {
    border-color: color-mix(in srgb, var(--accent, var(--xh-accent)) 45%, var(--border, var(--xh-border))) !important;
    box-shadow: 0 0 0 3px var(--xh-accent-15) !important;
}
.xh-sidebar-link:focus-visible,
.xh-sort-link:focus-visible,
.xh-dt-search-action:focus-visible,
.xh-home-load-more:focus-visible,
a.video-card:focus-visible,
.video-card a:focus-visible {
    outline: 2px solid var(--accent, var(--xh-accent));
    outline-offset: 2px;
}
.xh-card-uploader:hover .xh-card-channel-name {
    color: var(--link, var(--xh-link));
}
.xh-continue-watching {
    margin-bottom: 1.15rem;
}
.xh-reels-strip,
.xh-related-reels {
    margin-top: 1.25rem;
    margin-bottom: .85rem;
}
.xh-related-head,
.xh-reels-strip .xh-related-head {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    font-weight: 700;
    color: var(--text-title, var(--xh-text-bright));
    letter-spacing: -.02em;
    margin-bottom: .65rem;
}
.xh-footer-col-title {
    color: var(--text-title, var(--xh-text-bright)) !important;
    font-size: .8rem !important;
    letter-spacing: .06em;
    margin-bottom: .85rem !important;
}
.xh-footer-links {
    gap: .55rem !important;
}
.xh-footer-links a,
.xh-footer-legal-link {
    color: var(--text-body, var(--xh-text)) !important;
    transition: color var(--dur-ui, 220ms) ease, transform var(--dur-ui, 220ms) ease !important;
}
.xh-footer-links a:hover,
.xh-footer-legal-link:hover {
    color: var(--accent, var(--xh-accent)) !important;
}
.xh-footer-tagline {
    color: var(--text-muted, var(--xh-muted)) !important;
    line-height: 1.55;
    max-width: 28rem;
}
.xh-footer-brand-name {
    color: var(--text-title, var(--xh-text-bright)) !important;
}
.xh-stat-chip {
    border-radius: 9999px !important;
    border: 1px solid color-mix(in srgb, var(--border, var(--xh-border)) 70%, transparent) !important;
    background: color-mix(in srgb, var(--surface, var(--xh-panel)) 55%, transparent) !important;
    color: var(--text-body, var(--xh-text)) !important;
    transition: background var(--dur-ui, 220ms) ease, border-color var(--dur-ui, 220ms) ease, color var(--dur-ui, 220ms) ease, transform var(--dur-ui, 220ms) var(--ease-ui, ease) !important;
}
.xh-stat-chip:hover {
    color: var(--text-title, var(--xh-text-bright)) !important;
    border-color: color-mix(in srgb, var(--accent, var(--xh-accent)) 40%, var(--border, var(--xh-border))) !important;
    background: color-mix(in srgb, var(--accent, var(--xh-accent)) 12%, transparent) !important;
    transform: translateY(-1px);
}
.xh-mobile-header {
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    background: color-mix(in srgb, var(--header, var(--xh-header)) 88%, transparent) !important;
}
.xh-mobile-video-grid {
    column-gap: var(--xh-card-gap-x, 1rem) !important;
    row-gap: var(--xh-card-gap-y, 1.25rem) !important;
}
@media (max-width: 767px) {
    .xh-index-bar {
        margin-bottom: .75rem;
        padding-bottom: .5rem;
    }
    .xh-index-bar h1 {
        font-size: 1.1rem;
    }
    .xh-promo-img {
        max-height: min(120px, 32vw) !important;
    }
    .video-card.xh-card-pro:hover {
        transform: none;
        filter: none;
    }
    .xh-card-pro:hover .xh-thumb img,
    .xh-card-pro:hover .xh-thumb .xh-thumb-poster {
        transform: scale(1.03);
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .xh-desktop-panel-body {
        padding: .65rem .75rem 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .xh-video-grid > *,
    main .grid > .video-card { animation: none !important; }
    body.xh-motion-ready main.xh-page-shell,
    body.xh-motion-ready .xh-desktop-panel-body { animation: none !important; }
    .video-card.xh-card-pro:hover,
    .live-strip-item:hover,
    .live-strip-item:hover .live-strip-ring {
        transform: none !important;
        filter: none !important;
    }
}

@media (max-width: 767px) {
    html.xh-mobile-site { font-size: 17px; }
}