.detail-page {
    min-height: 100dvh;
    padding-bottom: 28px;
}

.detail-header {
    position: sticky;
    z-index: 40;

    top: calc(
        var(--safe-top)
        + var(--header-height)
    );

    height: 54px;

    padding: 0 18px;

    display: grid;
    grid-template-columns: 44px 1fr 44px;

    align-items: center;

    background: rgba(10, 13, 19, .86);

    border-bottom:
        1px solid rgba(255, 255, 255, .045);

    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.detail-back {
    width: 40px;
    height: 40px;

    padding: 0;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .055);

    transition:
        transform 140ms var(--ease-ios),
        background-color 140ms ease;
}

.detail-back:active {
    transform: scale(.94);

    background:
        rgba(255, 255, 255, .09);
}

.detail-back svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: var(--text);
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.detail-header-title {
    min-width: 0;

    text-align: center;

    color: var(--text);

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-content {
    padding:
        22px 18px
        30px;
}

.detail-meta-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.detail-meta-top > div {
    display: grid;
    gap: 5px;
}

.detail-date-box {
    text-align: right;
}

.detail-meta-top span {
    color: var(--muted);

    font-size: 9px;
    font-weight: 650;

    text-transform: uppercase;
    letter-spacing: .9px;
}

.detail-meta-top strong {
    color: var(--text);

    font-size: 13px;
    font-weight: 730;
}

.detail-copy {
    padding:
        23px 0
        22px;
}

.detail-copy h1 {
    margin: 0;

    color: var(--text);

    font-size: 28px;
    line-height: 1.05;
    font-weight: 780;

    letter-spacing: -.8px;
}

.detail-copy p {
    margin:
        10px 0 0;

    max-width: 620px;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.7;

    white-space: pre-wrap;
}

.detail-media-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 6px;
}

.detail-media-item {
    position: relative;

    width: 100%;
    aspect-ratio: 9 / 16;

    overflow: hidden;

    padding: 0;

    border-radius: 12px;

    background: var(--surface);

    border:
        1px solid var(--border);
}

.detail-media-item img,
.detail-media-item video {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.detail-media-empty {
    grid-column: 1 / -1;

    min-height: 180px;

    display: grid;
    place-items: center;

    border-radius: var(--radius-md);

    background:
        rgba(255, 255, 255, .025);

    border:
        1px solid var(--border);

    color: var(--muted);

    font-size: 12px;
}

.detail-video-item {
    position: relative;
}

.detail-video-badge {
    position: absolute;

    right: 7px;
    bottom: 7px;

    width: 26px;
    height: 26px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(10, 13, 19, .72);

    border:
        1px solid rgba(255, 255, 255, .1);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.detail-video-badge svg {
    width: 13px;
    height: 13px;

    fill: var(--text);
    stroke: none;
}

body.detail-mode .top-bar,
body.detail-mode .bottom-nav {
    display: none;
}

body.detail-mode .app-main {
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
}

body.detail-mode .detail-header {
    top: 0;
}

/* ===== PHOTO VIEWER ===== */

.media-viewer {
    position: fixed;
    z-index: 9999;

    inset: 0;

    display: grid;
    grid-template-rows:
        auto 1fr;

    opacity: 0;
    visibility: hidden;

    background:
        rgba(5, 7, 10, .96);

    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);

    transition:
        opacity 220ms
        cubic-bezier(.22, .61, .36, 1),
        visibility 220ms ease;

    touch-action: pan-y;
}

.media-viewer.open {
    opacity: 1;
    visibility: visible;
}

.media-viewer-top {
    position: relative;
    z-index: 2;

    min-height:
        calc(
            62px +
            var(--safe-top)
        );

    padding:
        calc(
            10px +
            var(--safe-top)
        )
        16px
        10px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.media-viewer-counter {
    min-width: 56px;

    padding:
        7px 11px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .07);

    border:
        1px solid
        rgba(255, 255, 255, .07);

    color:
        rgba(255, 255, 255, .88);

    font-size: 11px;
    font-weight: 700;

    text-align: center;

    -webkit-backdrop-filter:
        blur(12px);

    backdrop-filter:
        blur(12px);
}

.media-viewer-close {
    width: 42px;
    height: 42px;

    padding: 0;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .07);

    border:
        1px solid
        rgba(255, 255, 255, .07);

    color: #FFFFFF;

    transition:
        transform 140ms
        var(--ease-ios),
        background-color 140ms ease;
}

.media-viewer-close:active {
    transform: scale(.94);

    background:
        rgba(255, 255, 255, .11);
}

.media-viewer-close svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
}

.media-viewer-stage {
    position: relative;

    min-width: 0;
    min-height: 0;

    display: grid;
    place-items: center;

    overflow: hidden;

    padding:
        8px 0
        calc(
            18px +
            var(--safe-bottom)
        );
}

.media-viewer-image {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;

    -webkit-user-drag: none;

    transform-origin: center center;

    transition:
        transform 220ms
        cubic-bezier(.22, .61, .36, 1),
        opacity 140ms ease;
}

body.media-viewer-open {
    overflow: hidden;
    touch-action: none;
}

@media (min-width: 760px) {

    .media-viewer-stage {
        padding-left: 28px;
        padding-right: 28px;
    }

    .media-viewer-image {
        max-width: 900px;
    }
}

/* ===== VIDEO CARD ===== */

.detail-video-item {
    position: relative;
    background: #0D1118;
}

.detail-inline-video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: inherit;

    background: #000;
}

.video-fullscreen-button {
    position: absolute;
    z-index: 6;

    right: 7px;
    bottom: 7px;

    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(10, 13, 19, .72);

    border:
        1px solid
        rgba(255, 255, 255, .12);

    color: #FFFFFF;

    -webkit-backdrop-filter:
        blur(10px);

    backdrop-filter:
        blur(10px);

    transition:
        transform 140ms var(--ease-ios),
        background-color 140ms ease,
        opacity 160ms ease;
}

.video-fullscreen-button:active {
    transform: scale(.92);

    background:
        rgba(30, 34, 42, .9);
}

.video-fullscreen-button svg {
    width: 15px;
    height: 15px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.detail-video-item.video-playing
.detail-video-badge {
    opacity: 0;
    pointer-events: none;
}

.detail-video-item:not(.video-playing)
.video-fullscreen-button {
    display: none;
}

.detail-video-item.video-playing
.video-fullscreen-button {
    display: grid;
}

.detail-video-item video::-webkit-media-controls-fullscreen-button {
    display: none;
}

/* ===== SUBTLE PHOTO BADGE ===== */

.detail-photo-badge {
    position: absolute;
    z-index: 4;

    right: 7px;
    bottom: 7px;

    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color:
        rgba(255, 255, 255, .68);

    background:
        rgba(8, 11, 16, .46);

    border:
        1px solid
        rgba(255, 255, 255, .07);

    -webkit-backdrop-filter:
        blur(8px);

    backdrop-filter:
        blur(8px);

    pointer-events: none;
}

.detail-photo-badge svg {
    width: 13px;
    height: 13px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ===== VIP CONTENT COUNTS ===== */

.detail-vip-stats {
    width: 100%;
    margin: 20px 0 18px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    padding: 13px 15px;

    border-radius: 16px;

    background:
        rgba(255, 255, 255, .035);

    border:
        1px solid rgba(255, 255, 255, .065);
}

.detail-vip-stat {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 10px;
}

.detail-vip-stat:nth-child(3) {
    justify-content: flex-end;
}

.detail-vip-stat-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: #FC9900;

    background:
        rgba(252, 153, 0, .10);
}

.detail-vip-stat-icon svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.detail-vip-stat-text {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.detail-vip-stat-text small {
    color:
        rgba(255, 255, 255, .42);

    font-size: 8px;
    font-weight: 750;

    letter-spacing: .10em;
}

.detail-vip-stat-text strong {
    color:
        rgba(255, 255, 255, .94);

    font-size: 16px;
    font-weight: 750;

    line-height: 1.1;
}

.detail-vip-stat-divider {
    width: 1px;
    height: 29px;

    margin: 0 14px;

    background:
        rgba(255, 255, 255, .08);
}

/* ===== VISIBLE VIP COUNTS ===== */

.detail-vip-counts {
    width: 100%;
    margin: 18px 0 14px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    padding: 13px 16px;

    border-radius: 14px;

    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .065);
}

.detail-vip-count-item {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
}

.detail-vip-count-label {
    color: rgba(255, 255, 255, .48);

    font-size: 11px;
    font-weight: 600;
}

.detail-vip-count-item strong {
    color: #FC9900;

    font-size: 15px;
    font-weight: 760;

    line-height: 1;
}

.detail-vip-count-line {
    width: 1px;
    height: 20px;

    margin: 0 15px;

    background: rgba(255, 255, 255, .09);
}

/* ===== CUSTOM VIDEO CONTROLS ===== */

.video-custom-controls {
    position: absolute;
    z-index: 7;
    left: 7px;
    right: 43px;
    bottom: 7px;

    height: 30px;

    display: flex;
    align-items: center;
    gap: 7px;

    padding: 0 8px;

    border-radius: 15px;

    background: rgba(10, 13, 19, .72);
    border: 1px solid rgba(255, 255, 255, .12);

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.video-play-pause {
    width: 20px;
    height: 20px;
    padding: 0;
    flex: 0 0 20px;

    display: grid;
    place-items: center;

    border: 0;
    background: transparent;
    color: #FFFFFF;
}

.video-play-pause svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* ===== NATIVE MOBILE VIDEO SEEK ===== */

.video-custom-controls {
    gap: 8px;
}

.video-custom-controls .video-native-seek {
    position: relative;

    top: auto;
    left: auto;
    right: auto;

    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 28px;

    margin: 0;
    padding: 0;

    -webkit-appearance: none;
    appearance: none;

    background: transparent;
    outline: none;

    touch-action: none;
}

.video-custom-controls
.video-native-seek::-webkit-slider-runnable-track {
    height: 3px;

    border-radius: 999px;
    background: transparent;
}

.video-custom-controls
.video-native-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;

    width: 14px;
    height: 14px;

    margin-top: -5.5px;

    border: 0;
    border-radius: 50%;

    background: #FC9900;
}

.video-custom-controls
.video-native-seek.is-active::-webkit-slider-runnable-track,
.video-custom-controls
.video-native-seek:active::-webkit-slider-runnable-track {
    background: rgba(255, 255, 255, .72);
}

.video-custom-controls
.video-native-seek::-moz-range-track {
    height: 3px;

    border: 0;
    border-radius: 999px;
    background: transparent;
}

.video-custom-controls
.video-native-seek::-moz-range-thumb {
    width: 14px;
    height: 14px;

    border: 0;
    border-radius: 50%;

    background: #FC9900;
}

.video-custom-controls
.video-native-seek.is-active::-moz-range-track,
.video-custom-controls
.video-native-seek:active::-moz-range-track {
    background: rgba(255, 255, 255, .72);
}

/* ===== TOP SEEK DISPLAY ONLY ===== */

.video-seek-display {
    position: absolute;
    z-index: 15;

    top: 8px;
    left: 8px;
    right: 8px;

    height: 4px;

    border-radius: 999px;
    overflow: hidden;

    background: rgba(255, 255, 255, .38);

    opacity: 0;
    pointer-events: none;

    transition: opacity 100ms ease;
}

.video-seek-display.is-visible {
    opacity: 1;
}

.video-seek-display-progress {
    width: 0;
    height: 100%;

    border-radius: inherit;
    background: #FC9900;
}

/* ===== DETAIL PAGE SKELETON ===== */

.detail-skeleton {
    position: relative;
    display: inline-block;
    overflow: hidden;
    background: rgba(255, 255, 255, .055);
    border-radius: 999px;
}

.detail-skeleton::after,
.detail-media-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .075),
        transparent
    );
    animation: detailSkeletonShimmer 1.25s ease-in-out infinite;
}

.detail-skeleton-code {
    width: 58px;
    height: 13px;
}

.detail-skeleton-date {
    width: 78px;
    height: 13px;
}

.detail-skeleton-name {
    width: min(68vw, 280px);
    height: 29px;
    border-radius: 8px;
}

.detail-skeleton-caption {
    display: block;
    height: 10px;
    margin-top: 8px;
    border-radius: 6px;
}

.detail-skeleton-caption.long {
    width: min(88vw, 520px);
}

.detail-skeleton-caption.medium {
    width: min(58vw, 340px);
}

.detail-skeleton-count {
    width: 25px;
    height: 15px;
}

.detail-media-skeleton {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .045);
}

@keyframes detailSkeletonShimmer {
    100% {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .detail-skeleton::after,
    .detail-media-skeleton::after {
        animation: none;
    }
}

/* ===== DETAIL ERROR / RETRY ===== */

.detail-error-state {
    grid-column: 1 / -1;
    min-height: 230px;
    padding: 30px 20px;

    display: grid;
    place-items: center;
    align-content: center;

    text-align: center;

    border-radius: 18px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .05);
}

.detail-error-state strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 740;
}

.detail-error-state span {
    max-width: 260px;
    margin-top: 6px;

    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
}

.detail-retry-button {
    min-width: 96px;
    height: 38px;
    margin-top: 15px;
    padding: 0 18px;

    border: 0;
    border-radius: 999px;

    background: #FC9900;
    color: #0A0D13;

    font-size: 11px;
    font-weight: 760;
}

/* ===== RUN 6 DETAIL / PHOTO POLISH ===== */

.detail-code-row {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.detail-code-copy {
    width: 28px;
    height: 28px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--muted);
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .055);
    transition: transform 140ms var(--ease-ios), color 140ms ease, background-color 140ms ease;
}

.detail-code-copy:disabled {
    opacity: .38;
    pointer-events: none;
}

.detail-code-copy:not(:disabled):active {
    transform: scale(.92);
    color: var(--accent);
    background: rgba(252, 153, 0, .10);
}

.detail-code-copy svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.detail-media-item {
    transform: translateZ(0);
    transition: transform 140ms var(--ease-ios), border-color 160ms ease;
}

.detail-media-item:active {
    transform: scale(.975);
}

.detail-media-image {
    opacity: 0;
    transition: opacity 180ms ease, transform 220ms var(--ease-ios);
}

.detail-media-image.is-loaded,
.detail-media-image.is-error {
    opacity: 1;
}

.detail-photo-item::before,
.detail-video-item:has(.detail-media-image)::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background: linear-gradient(
        105deg,
        rgba(255, 255, 255, .025) 20%,
        rgba(255, 255, 255, .065) 38%,
        rgba(255, 255, 255, .025) 56%
    );
    background-size: 220% 100%;
    animation: detail-media-shimmer 1.15s linear infinite;
    pointer-events: none;
}

.detail-media-item:has(.detail-media-image.is-loaded)::before,
.detail-media-item:has(.detail-media-image.is-error)::before {
    opacity: 0;
    animation: none;
}

@keyframes detail-media-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

.detail-related {
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .055);
}

.detail-related-heading {
    margin-bottom: 14px;
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.detail-related-heading span {
    display: block;
    margin-bottom: 4px;
    color: var(--accent);
    font-size: 9px;
    font-weight: 760;
    letter-spacing: 1.15px;
    text-transform: uppercase;
}

.detail-related-heading h2 {
    margin: 0;
    color: var(--text);
    font-size: 22px;
    line-height: 1;
    letter-spacing: -.55px;
}

.detail-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.detail-related-card {
    min-width: 0;
    padding: 0;
    text-align: left;
    background: transparent;
    border: 0;
    animation: detail-related-in 220ms cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: min(calc(var(--related-index, 0) * 22ms), 110ms);
}

.detail-related-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.18;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .06);
    transition: transform 150ms var(--ease-ios), border-color 150ms ease;
}

.detail-related-card:active .detail-related-cover {
    transform: scale(.975);
    border-color: rgba(252, 153, 0, .22);
}

.detail-related-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.detail-related-cover.is-empty::after {
    content: "";
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .1);
}

.detail-related-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
    padding: 8px 2px 0;
}

.detail-related-copy strong,
.detail-related-copy small {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.detail-related-copy strong {
    color: var(--text);
    font-size: 11px;
    font-weight: 760;
}

.detail-related-copy small {
    color: var(--muted);
    font-size: 9px;
}

.detail-related-skeleton {
    display: grid;
    gap: 7px;
}

.detail-related-skeleton span,
.detail-related-skeleton i {
    display: block;
    background: rgba(255, 255, 255, .055);
    overflow: hidden;
}

.detail-related-skeleton span {
    aspect-ratio: 1 / 1.18;
    border-radius: 14px;
}

.detail-related-skeleton i {
    height: 8px;
    border-radius: 999px;
}

.detail-related-skeleton i:last-child {
    width: 64%;
}

@keyframes detail-related-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.media-viewer-top {
    transition: opacity 180ms ease, transform 220ms var(--ease-ios);
}

.media-viewer.chrome-hidden .media-viewer-top {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

.media-viewer-image.is-loading {
    opacity: 0;
}

.media-viewer-flight {
    position: fixed;
    z-index: 10001;
    margin: 0;
    object-fit: cover;
    pointer-events: none;
    transform-origin: top left;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    contain: paint;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .22);
}

.media-viewer.is-transitioning .media-viewer-top {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}

.media-viewer.is-closing {
    pointer-events: none;
}

.detail-toast {
    position: fixed;
    z-index: 12000;
    left: 50%;
    bottom: calc(22px + var(--safe-bottom));
    transform: translate(-50%, 8px);
    opacity: 0;
    padding: 9px 13px;
    border-radius: 999px;
    color: var(--text);
    background: rgba(20, 24, 31, .92);
    border: 1px solid rgba(255, 255, 255, .08);
    font-size: 10px;
    font-weight: 720;
    pointer-events: none;
    transition: opacity 160ms ease, transform 180ms var(--ease-ios);
}

.detail-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (max-width: 390px) {
    .detail-related-grid { gap: 7px; }
    .detail-related-cover { border-radius: 12px; }
}

html[data-motion-budget="reduced"] .detail-photo-item::before,
html[data-motion-budget="reduced"] .detail-video-item:has(.detail-media-image)::before {
    animation: none;
}

/* ===== RUN 7: TRUE FULLSCREEN VIDEO VIEWER ===== */

body.kg-video-open {
    overflow: hidden;
    overscroll-behavior: none;
}

.kg-video-viewer {
    position: fixed;
    z-index: 20000;
    inset: 0;
    width: 100dvw;
    height: 100dvh;
    display: none;
    background: #000;
    color: #fff;
    isolation: isolate;
    touch-action: manipulation;
}

.kg-video-viewer.open {
    display: block;
}

.kg-video-viewer:fullscreen,
.kg-video-viewer:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    background: #000;
}

.kg-video-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #000;
}

.kg-video-screen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
}

.kg-video-viewer[data-fit="fill"] .kg-video-screen {
    object-fit: cover;
}

.kg-video-dim {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, .48), rgba(0, 0, 0, .06) 30%, rgba(0, 0, 0, .08) 68%, rgba(0, 0, 0, .58)),
        rgba(0, 0, 0, .08);
    transition: opacity 170ms ease;
}

.kg-video-viewer.controls-visible .kg-video-dim {
    opacity: 1;
}

.kg-video-topbar,
.kg-video-bottom,
.kg-video-center-play {
    position: absolute;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 150ms ease,
        transform 210ms cubic-bezier(.22, .61, .36, 1);
}

.kg-video-viewer.controls-visible .kg-video-topbar,
.kg-video-viewer.controls-visible .kg-video-bottom,
.kg-video-viewer.controls-visible .kg-video-center-play {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
}

.kg-video-topbar {
    top: 0;
    left: 0;
    right: 0;
    min-height: 64px;
    padding:
        calc(10px + env(safe-area-inset-top))
        calc(12px + env(safe-area-inset-right))
        10px
        calc(12px + env(safe-area-inset-left));
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    transform: translate3d(0, -8px, 0);
}

.kg-video-identity {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kg-video-code {
    color: rgba(255, 255, 255, .58);
    font-size: 10px;
    line-height: 1.1;
    font-weight: 720;
    letter-spacing: .05em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kg-video-name {
    color: rgba(255, 255, 255, .96);
    font-size: 14px;
    line-height: 1.18;
    font-weight: 680;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kg-video-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.kg-video-icon-button,
.kg-video-center-play {
    border: 0;
    color: #fff;
    background: rgba(8, 10, 14, .32);
    -webkit-tap-highlight-color: transparent;
}

.kg-video-icon-button {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.kg-video-icon-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kg-video-more svg circle {
    fill: currentColor;
    stroke: none;
}

.kg-video-icon-button:active,
.kg-video-center-play:active {
    transform: scale(.93);
}

.kg-video-center-play {
    top: 50%;
    left: 50%;
    width: 68px;
    height: 68px;
    margin: -34px 0 0 -34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(7, 9, 13, .42);
    border: 1px solid rgba(255, 255, 255, .10);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transform: scale(.94);
}

.kg-video-center-play svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

.kg-video-bottom {
    left: 0;
    right: 0;
    bottom: 0;
    padding:
        14px
        calc(18px + env(safe-area-inset-right))
        calc(15px + env(safe-area-inset-bottom))
        calc(18px + env(safe-area-inset-left));
    transform: translate3d(0, 8px, 0);
}

.kg-video-time-row {
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(255, 255, 255, .82);
    font-size: 10px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.kg-video-seek {
    --video-progress: 0%;
    width: 100%;
    height: 28px;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    outline: none;
    touch-action: none;
}

.kg-video-seek::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(to right, #FC9900 0 var(--video-progress), rgba(255, 255, 255, .30) var(--video-progress) 100%);
}

.kg-video-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .28);
}

.kg-video-seek::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .30);
}

.kg-video-seek::-moz-range-progress {
    height: 4px;
    border-radius: 999px;
    background: #FC9900;
}

.kg-video-seek::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 50%;
    background: #fff;
}

.kg-video-menu {
    position: absolute;
    z-index: 8;
    top: calc(58px + env(safe-area-inset-top));
    right: calc(12px + env(safe-area-inset-right));
    width: min(280px, calc(100vw - 24px));
    padding: 14px;
    border-radius: 18px;
    background: rgba(18, 21, 27, .96);
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .42);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
}

.kg-video-menu[hidden] {
    display: none;
}

.kg-video-menu-section + .kg-video-menu-section {
    margin-top: 14px;
}

.kg-video-menu-label {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, .50);
    font-size: 9px;
    font-weight: 760;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.kg-video-speed-options,
.kg-video-fit-options {
    display: grid;
    gap: 6px;
}

.kg-video-speed-options {
    grid-template-columns: repeat(3, 1fr);
}

.kg-video-fit-options {
    grid-template-columns: repeat(2, 1fr);
}

.kg-video-menu button {
    min-height: 38px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 11px;
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .76);
    font-size: 11px;
    font-weight: 680;
}

.kg-video-menu button.active {
    color: #FC9900;
    border-color: rgba(252, 153, 0, .34);
    background: rgba(252, 153, 0, .10);
}

.kg-video-toast {
    position: absolute;
    z-index: 10;
    left: 50%;
    bottom: calc(64px + env(safe-area-inset-bottom));
    transform: translate3d(-50%, 8px, 0);
    opacity: 0;
    padding: 8px 12px;
    border-radius: 999px;
    color: rgba(255, 255, 255, .90);
    background: rgba(15, 18, 24, .92);
    border: 1px solid rgba(255, 255, 255, .08);
    font-size: 10px;
    font-weight: 700;
    pointer-events: none;
    transition: opacity 140ms ease, transform 170ms ease;
}

.kg-video-toast.show {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
}

.kg-video-viewer.is-buffering::after {
    content: "";
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 2px solid rgba(255, 255, 255, .22);
    border-top-color: rgba(255, 255, 255, .90);
    border-radius: 50%;
    animation: kg-video-spin .75s linear infinite;
}

@keyframes kg-video-spin {
    to { transform: rotate(360deg); }
}

@media (orientation: landscape) and (max-height: 520px) {
    .kg-video-topbar {
        min-height: 54px;
        padding-top: calc(6px + env(safe-area-inset-top));
        padding-bottom: 6px;
    }

    .kg-video-icon-button {
        width: 38px;
        height: 38px;
    }

    .kg-video-center-play {
        width: 60px;
        height: 60px;
        margin: -30px 0 0 -30px;
    }

    .kg-video-menu {
        top: calc(50px + env(safe-area-inset-top));
    }
}

html[data-motion-budget="reduced"] .kg-video-dim,
html[data-motion-budget="reduced"] .kg-video-topbar,
html[data-motion-budget="reduced"] .kg-video-bottom,
html[data-motion-budget="reduced"] .kg-video-center-play,
html[data-motion-budget="reduced"] .kg-video-toast {
    transition-duration: .01ms !important;
}

html[data-motion-budget="reduced"] .kg-video-viewer.is-buffering::after {
    animation-duration: 1.2s;
}


/* ===== RUN 10+11: DETAIL INLINE VIDEO ===== */

.detail-video-item {
    position: relative;
    overflow: hidden;
}

.detail-video-item > video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #080b10;
}

.detail-video-play,
.detail-video-fullscreen {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .10);
    color: var(--text);
    background: rgba(10, 13, 19, .72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.detail-video-play {
    left: 50%;
    top: 50%;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(.92);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 150ms ease,
        transform 150ms ease;
}

.detail-video-item:not(.is-playing) .detail-video-play,
.detail-video-item.inline-controls-visible .detail-video-play {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.detail-video-play svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
    stroke: none;
}

.detail-video-fullscreen {
    right: 7px;
    bottom: 7px;
    width: 26px;
    height: 26px;
    border-radius: 50%;

    /* Intentionally subtle, matching the photo badge feel. */
    opacity: .56;
    transition:
        opacity 140ms ease,
        transform 140ms ease;
}

.detail-video-fullscreen:active {
    opacity: .90;
    transform: scale(.94);
}

.detail-video-fullscreen svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.detail-video-item.is-playing
.detail-video-fullscreen {
    opacity: .48;
}


/* ===== FINAL: DETAIL ACTION BUTTONS ===== */

.detail-action-row {
    display: grid;
    grid-template-columns:
        48px minmax(0, 1fr) 48px;
    align-items: stretch;
    gap: 9px;

    width: 100%;
    margin: 18px 0 20px;
}

.detail-action-row button {
    height: 48px;
    padding: 0;
    border: 1px solid
        rgba(255,255,255,.075);

    border-radius: 14px;

    color: rgba(255,255,255,.92);
    background:
        rgba(255,255,255,.045);

    -webkit-tap-highlight-color:
        transparent;

    cursor: pointer;
}

.detail-action-square {
    width: 48px;
    min-width: 48px;

    display: grid;
    place-items: center;

    aspect-ratio: 1 / 1;
}

.detail-action-square svg {
    width: 21px;
    height: 21px;
}

.detail-action-telegram svg {
    fill: currentColor;
    stroke: none;
}

.detail-action-share svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.detail-action-watch {
    width: 100%;

    font-size: 12px;
    font-weight: 780;
    letter-spacing: .015em;

    background:
        linear-gradient(
            180deg,
            rgba(252,153,0,.97),
            rgba(238,133,0,.97)
        ) !important;

    color: #0A0D13 !important;

    border-color:
        rgba(252,153,0,.30) !important;

    box-shadow:
        0 7px 24px
        rgba(252,153,0,.10);
}

.detail-action-row button:active {
    transform: scale(.965);
}

html[data-motion-budget="reduced"]
.detail-action-row button {
    transition: none !important;
    transform: none !important;
}

@media (max-width: 390px) {
    .detail-action-row {
        grid-template-columns:
            46px minmax(0, 1fr) 46px;

        gap: 8px;
    }

    .detail-action-row button {
        height: 46px;
    }

    .detail-action-square {
        width: 46px;
        min-width: 46px;
    }
}



/* ===== FINAL: MEDIA -> CAPTION -> ACTIONS ===== */

.detail-caption-after-media {
    display: block;

    max-width: 620px;

    margin:
        42px 0
        0;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.7;

    white-space: pre-wrap;
}

.detail-caption-after-media[hidden] {
    display: none !important;
}

.detail-caption-after-media
+ .detail-action-row {
    margin-top: 18px;
    margin-bottom: 30px;
}

/* No caption: keep a generous gap below Media */
.detail-caption-after-media[hidden]
+ .detail-action-row {
    margin-top: 42px;
}

.detail-action-watch {
    white-space: nowrap;
}



/* ===== FINAL: CAPTION -> COUNTS -> ACTIONS ===== */

.detail-caption-after-media
+ .detail-vip-counts {
    margin-top: 18px;
    margin-bottom: 18px;
}

.detail-vip-counts
+ .detail-action-row {
    margin-top: 0;
    margin-bottom: 30px;
}


/* ===== EXPLORE DETAIL ===== */
.detail-page.explore-detail-mode .detail-content {
    width: min(100%, 760px);
}

.detail-page.explore-detail-mode .detail-media-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.detail-page.explore-detail-mode .detail-media-item,
.detail-page.explore-detail-mode .detail-media-skeleton {
    aspect-ratio: 16 / 9;
    border-radius: 17px;
    overflow: hidden;
}

.detail-page.explore-detail-mode .detail-caption-after-media {
    margin-top: 14px;
    padding: 0 2px;
    color: rgba(255,255,255,.88);
    font-size: 14px;
    line-height: 1.62;
}

.detail-action-row.explore-actions {
    grid-template-columns: minmax(0, 1fr);
    justify-items: end;
}

.detail-action-row.explore-actions .detail-action-share {
    width: 44px;
    height: 44px;
}

.detail-related-card.explore-related-card .detail-related-cover {
    position: relative;
    overflow: hidden;
}

.detail-related-card.explore-related-card .detail-related-copy strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.42;
    font-weight: 620;
}

.detail-page.explore-detail-mode #detailMetaTop,
.detail-page.explore-detail-mode #detailCopy,
.detail-page.explore-detail-mode #detailVipCounts,
.detail-page.explore-detail-mode #detailTelegramButton,
.detail-page.explore-detail-mode #detailWatchButton {
    display: none !important;
}

/* ===== SHARED DETAIL / PLAYER POLISH ===== */
.detail-caption-after-media.is-collapsed {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}
.detail-caption-after-media.is-expanded { display: block; }
.detail-caption-more {
    margin: -2px 0 14px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent);
    font-size: 11px;
    font-weight: 760;
}

.detail-video-end-prompt {
    position: absolute;
    z-index: 8;
    left: 12px;
    right: 12px;
    bottom: 12px;
    min-height: 54px;
    padding: 9px 12px;
    display: grid;
    gap: 2px;
    text-align: left;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 13px;
    background: rgba(10,12,17,.88);
    color: #fff;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.detail-video-end-prompt span { color: rgba(255,255,255,.48); font-size: 8px; font-weight: 760; text-transform: uppercase; letter-spacing: .08em; }
.detail-video-end-prompt strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }

.kg-video-volume-row {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr);
    align-items: center;
    gap: 9px;
}
.kg-video-menu .kg-video-menu-icon {
    min-height: 38px;
    padding: 0;
    display: grid;
    place-items: center;
}
.kg-video-menu-icon svg,
.kg-video-pip svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kg-video-volume {
    width: 100%;
    accent-color: var(--accent);
}
.kg-video-pip {
    width: 100%;
    margin-top: 14px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.kg-video-seek-feedback {
    position: absolute;
    z-index: 9;
    top: 50%;
    min-width: 64px;
    padding: 9px 12px;
    border-radius: 999px;
    transform: translateY(-50%) scale(.92);
    opacity: 0;
    color: rgba(255,255,255,.94);
    background: rgba(7,9,13,.58);
    border: 1px solid rgba(255,255,255,.10);
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    pointer-events: none;
    transition: opacity 140ms ease, transform 160ms ease;
}
.kg-video-seek-feedback.show { opacity: 1; transform: translateY(-50%) scale(1); }
.kg-video-seek-left { left: 12%; }
.kg-video-seek-right { right: 12%; }

html[data-motion-mode="reduced"] .kg-video-dim,
html[data-motion-mode="reduced"] .kg-video-topbar,
html[data-motion-mode="reduced"] .kg-video-bottom,
html[data-motion-mode="reduced"] .kg-video-center-play,
html[data-motion-mode="reduced"] .kg-video-toast,
html[data-motion-mode="reduced"] .kg-video-seek-feedback,
html[data-motion-mode="reduced"] .detail-video-end-prompt {
    transition: none !important;
    animation: none !important;
}
html[data-motion-mode="reduced"] .kg-video-viewer.is-buffering::after {
    animation: none !important;
    border-color: rgba(255,255,255,.72) !important;
}
\n\n/* ===== FINAL: EXPLORE 9:16 + ROTATE + PIP + CAPSULE VOLUME ===== */\n.detail-page.explore-detail-mode .detail-video-item {\n    width: min(100%, 430px);\n    max-width: 430px;\n    aspect-ratio: 9 / 16 !important;\n    justify-self: center;\n    margin-inline: auto;\n}\n\n.detail-page.explore-detail-mode .detail-video-item > video {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n}\n\n.kg-video-rotate {\n    position: absolute;\n    z-index: 6;\n    right: calc(18px + env(safe-area-inset-right));\n    bottom: calc(58px + env(safe-area-inset-bottom));\n    width: 36px;\n    height: 36px;\n    padding: 0;\n    display: grid;\n    place-items: center;\n    border: 1px solid rgba(255,255,255,.10);\n    border-radius: 50%;\n    color: #fff;\n    background: rgba(8,10,14,.42);\n    -webkit-backdrop-filter: blur(10px);\n    backdrop-filter: blur(10px);\n    opacity: 0;\n    pointer-events: none;\n    transform: translateY(6px);\n    transition: opacity 150ms ease, transform 180ms ease;\n    -webkit-tap-highlight-color: transparent;\n}\n\n.kg-video-viewer.controls-visible .kg-video-rotate {\n    opacity: 1;\n    pointer-events: auto;\n    transform: translateY(0);\n}\n\n.kg-video-rotate:active { transform: scale(.93); }\n.kg-video-rotate svg {\n    width: 18px;\n    height: 18px;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.7;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.kg-video-volume {\n    --volume-progress: 100%;\n    width: 100%;\n    height: 30px;\n    margin: 0;\n    padding: 0;\n    -webkit-appearance: none;\n    appearance: none;\n    background: transparent;\n    outline: none;\n}\n\n.kg-video-volume::-webkit-slider-runnable-track {\n    height: 14px;\n    border-radius: 999px;\n    background: linear-gradient(\n        to right,\n        var(--accent) 0 var(--volume-progress),\n        rgba(255,255,255,.12) var(--volume-progress) 100%\n    );\n}\n\n.kg-video-volume::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 20px;\n    height: 20px;\n    margin-top: -3px;\n    border: 0;\n    border-radius: 50%;\n    background: var(--accent);\n    box-shadow: 0 2px 8px rgba(0,0,0,.26);\n}\n\n.kg-video-volume::-moz-range-track {\n    height: 14px;\n    border-radius: 999px;\n    background: rgba(255,255,255,.12);\n}\n.kg-video-volume::-moz-range-progress {\n    height: 14px;\n    border-radius: 999px;\n    background: var(--accent);\n}\n.kg-video-volume::-moz-range-thumb {\n    width: 20px;\n    height: 20px;\n    border: 0;\n    border-radius: 50%;\n    background: var(--accent);\n}\n\n/* Keep the real <video> alive for system PiP, but hide Chrome's in-page\n   "Playing in picture-in-picture" replacement and reveal the site below it. */\n.kg-video-viewer.is-pip {\n    background: transparent !important;\n    pointer-events: none !important;\n}\n.kg-video-viewer.is-pip .kg-video-stage {\n    background: transparent !important;\n}\n.kg-video-viewer.is-pip .kg-video-screen {\n    opacity: 0 !important;\n    pointer-events: none !important;\n}\n.kg-video-viewer.is-pip .kg-video-dim,\n.kg-video-viewer.is-pip .kg-video-topbar,\n.kg-video-viewer.is-pip .kg-video-bottom,\n.kg-video-viewer.is-pip .kg-video-center-play,\n.kg-video-viewer.is-pip .kg-video-rotate,\n.kg-video-viewer.is-pip .kg-video-menu,\n.kg-video-viewer.is-pip .kg-video-toast,\n.kg-video-viewer.is-pip .kg-video-seek-feedback {\n    opacity: 0 !important;\n    pointer-events: none !important;\n}\n\nhtml[data-motion-mode="reduced"] .kg-video-rotate,\nhtml[data-motion-budget="reduced"] .kg-video-rotate {\n    transition: none !important;\n}\n

/* ===== VIDEO / PIP V2 ===== */
/* Explore FREE detail media stays portrait 9:16. */
.detail-page.explore-detail-mode .detail-video-item {
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    aspect-ratio: 9 / 16 !important;
    justify-self: center;
    margin-inline: auto;
    overflow: hidden;
}
.detail-page.explore-detail-mode .detail-video-item > video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Rotate control sits just above the fullscreen timeline, lower-right. */
.kg-video-rotate {
    position: absolute;
    z-index: 12;
    right: calc(20px + env(safe-area-inset-right));
    bottom: calc(72px + env(safe-area-inset-bottom));
    width: 38px;
    height: 38px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    color: #fff;
    background: rgba(8,10,14,.56);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
}
.kg-video-viewer.controls-visible .kg-video-rotate { opacity: 1; pointer-events: auto; }
.kg-video-rotate svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Sound slider: thick rounded capsule like the supplied reference. */
.kg-video-volume {
    --volume-progress: 100%;
    width: 100%;
    height: 30px;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    outline: none;
}
.kg-video-volume::-webkit-slider-runnable-track {
    height: 13px;
    border-radius: 999px;
    background: linear-gradient(to right,
        var(--accent) 0 var(--volume-progress),
        rgba(255,255,255,.15) var(--volume-progress) 100%);
}
.kg-video-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -4.5px;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.kg-video-volume::-moz-range-track { height: 13px; border-radius: 999px; background: rgba(255,255,255,.15); }
.kg-video-volume::-moz-range-progress { height: 13px; border-radius: 999px; background: var(--accent); }
.kg-video-volume::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--accent); }

/* Keep the real video alive for system PiP but move the in-page replacement
   completely off-screen, so Chrome's "Playing in picture-in-picture" label
   is not visible over Explore/Detail. */
.kg-video-viewer.is-pip {
    display: block !important;
    position: fixed !important;
    left: -10000px !important;
    top: -10000px !important;
    right: auto !important;
    bottom: auto !important;
    width: 2px !important;
    height: 2px !important;
    min-width: 2px !important;
    min-height: 2px !important;
    overflow: hidden !important;
    background: transparent !important;
    pointer-events: none !important;
}
.kg-video-viewer.is-pip .kg-video-stage,
.kg-video-viewer.is-pip .kg-video-screen { width: 2px !important; height: 2px !important; }

html[data-motion-mode="reduced"] .kg-video-rotate,
html[data-motion-budget="reduced"] .kg-video-rotate { transition: none !important; }

/* Explore FREE Detail video — force portrait 9:16 */
.explore-detail-media:has(video),
.explore-detail-media-wrap:has(video),
.detail-media:has(video),
.detail-media-wrap:has(video) {
    aspect-ratio: 9 / 16 !important;
    height: auto !important;
    max-height: none !important;
}

.explore-detail-media video,
.explore-detail-media-wrap video,
.detail-media video,
.detail-media-wrap video {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 9 / 16 !important;
    object-fit: contain !important;
}

/* Explore FREE Detail video — FINAL 16:9 */
.explore-detail-media:has(video),
.explore-detail-media-wrap:has(video),
.detail-media:has(video),
.detail-media-wrap:has(video) {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    max-height: none !important;
}

.explore-detail-media video,
.explore-detail-media-wrap video,
.detail-media video,
.detail-media-wrap video {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: contain !important;
}

/* FINAL — Explore Detail media 16:9 */
.detail-page.explore-detail-mode .detail-media-item,
.detail-page.explore-detail-mode .detail-media-skeleton,
.detail-page.explore-detail-mode .detail-video-item {
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    justify-self: stretch !important;
    margin-inline: 0 !important;
}

.detail-page.explore-detail-mode .detail-video-item > video {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
}

/* FINAL TEST — Explore Detail media 9:16 */
.detail-page.explore-detail-mode .detail-media-item,
.detail-page.explore-detail-mode .detail-media-skeleton,
.detail-page.explore-detail-mode .detail-video-item {
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 9 / 16 !important;
    height: auto !important;
    justify-self: stretch !important;
    margin-inline: 0 !important;
}

.detail-page.explore-detail-mode .detail-video-item > video {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
}

/* Explore Detail 9:16 — 50% smaller */
.detail-page.explore-detail-mode .detail-media-item,
.detail-page.explore-detail-mode .detail-media-skeleton,
.detail-page.explore-detail-mode .detail-video-item {
    width: 50% !important;
    max-width: 50% !important;
    aspect-ratio: 9 / 16 !important;
    height: auto !important;
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =========================================================
   EXPLORE DETAIL NORMAL PLAYER — 1:1 SQUARE
   Fullscreen is explicitly excluded.
   ========================================================= */

.detail-page.explore-detail-mode .detail-media-item:not(:fullscreen),
.detail-page.explore-detail-mode .detail-media-skeleton:not(:fullscreen),
.detail-page.explore-detail-mode .detail-video-item:not(:fullscreen) {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    margin-inline: auto !important;
    background: #000 !important;
    overflow: hidden !important;
}

/* Video stays at its natural ratio inside the square.
   Empty space becomes black letterbox/pillarbox. */
.detail-page.explore-detail-mode .detail-video-item:not(:fullscreen) > video {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    background: #000 !important;
}

/* FULLSCREEN — cancel Detail 1:1 sizing */
.detail-page.explore-detail-mode .detail-video-item:fullscreen,
.detail-page.explore-detail-mode .detail-media-item:fullscreen {
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    background: #000 !important;
}

.detail-page.explore-detail-mode .detail-video-item:fullscreen > video,
.detail-page.explore-detail-mode .detail-media-item:fullscreen > video {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
}

/* WebKit fullscreen */
.detail-page.explore-detail-mode .detail-video-item:-webkit-full-screen,
.detail-page.explore-detail-mode .detail-media-item:-webkit-full-screen {
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    background: #000 !important;
}

.detail-page.explore-detail-mode .detail-video-item:-webkit-full-screen > video,
.detail-page.explore-detail-mode .detail-media-item:-webkit-full-screen > video {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
}


/* Up next close X */
.detail-video-end-prompt {
    padding-right: 40px !important;
}

.detail-video-end-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: rgba(255,255,255,.72);
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

.detail-video-end-close:active {
    transform: scale(.96);
}

.detail-video-end-close:hover {
    color: rgba(255,255,255,.94);
    background: rgba(255,255,255,.06);
}

/* Up next close X — larger + closer to top/right */
.detail-video-end-close {
    top: 4px !important;
    right: 5px !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 21px !important;
    line-height: 1 !important;
}


/* FINAL SOUND SEEK — thick rounded capsule */
.kg-video-volume {
    width: 100% !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
}

.kg-video-volume::-webkit-slider-runnable-track {
    height: 18px !important;
    border-radius: 999px !important;
    background: linear-gradient(
        to right,
        var(--accent) 0 var(--volume-progress),
        rgba(255,255,255,.16) var(--volume-progress) 100%
    ) !important;
}

.kg-video-volume::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 30px !important;
    height: 30px !important;
    margin-top: -6px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--accent) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.30) !important;
}

.kg-video-volume::-moz-range-track {
    height: 18px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.16) !important;
}

.kg-video-volume::-moz-range-progress {
    height: 18px !important;
    border-radius: 999px !important;
    background: var(--accent) !important;
}

.kg-video-volume::-moz-range-thumb {
    width: 30px !important;
    height: 30px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--accent) !important;
}

/* FINAL SOUND CONTROL — iOS style vertical volume pill */
.kg-video-volume-row {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    min-height: 150px !important;
}

/* Keep existing mute button separate */
.kg-video-volume-row .kg-video-mute {
    flex: 0 0 38px !important;
}

/* Vertical iOS-style volume bar */
.kg-video-volume {
    --volume-progress: 100%;

    width: 58px !important;
    height: 146px !important;

    margin: 0 !important;
    padding: 0 !important;

    writing-mode: vertical-lr !important;
    direction: rtl !important;

    -webkit-appearance: none !important;
    appearance: none !important;

    background: transparent !important;
    outline: none !important;
}

/* Dark rounded outer pill + light fill from bottom */
.kg-video-volume::-webkit-slider-runnable-track {
    width: 58px !important;
    height: 146px !important;

    border-radius: 29px !important;

    background: linear-gradient(
        to top,
        rgba(245,245,247,.96) 0%,
        rgba(245,245,247,.96) var(--volume-progress),
        rgba(255,255,255,.14) var(--volume-progress),
        rgba(255,255,255,.14) 100%
    ) !important;

    overflow: hidden !important;
}

/* No round knob */
.kg-video-volume::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;

    width: 1px !important;
    height: 1px !important;

    border: 0 !important;
    opacity: 0 !important;
    box-shadow: none !important;
}

/* Firefox */
.kg-video-volume::-moz-range-track {
    width: 58px !important;
    height: 146px !important;

    border: 0 !important;
    border-radius: 29px !important;

    background: rgba(255,255,255,.14) !important;
}

.kg-video-volume::-moz-range-progress {
    width: 58px !important;
    border-radius: 29px !important;
    background: rgba(245,245,247,.96) !important;
}

.kg-video-volume::-moz-range-thumb {
    width: 1px !important;
    height: 1px !important;
    border: 0 !important;
    opacity: 0 !important;
}

/* FINAL SOUND SEEK — Publish-button style */
.kg-video-volume-row {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 0 !important;
}

.kg-video-volume {
    width: 100% !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;

    writing-mode: horizontal-tb !important;
    direction: ltr !important;

    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    outline: none !important;
}

/* Horizontal rounded-rectangle track */
.kg-video-volume::-webkit-slider-runnable-track {
    width: 100% !important;
    height: 26px !important;
    border-radius: 8px !important;
    background: linear-gradient(
        to right,
        var(--accent) 0 var(--volume-progress),
        rgba(255,255,255,.16) var(--volume-progress) 100%
    ) !important;
}

/* Invisible thumb — slider still draggable */
.kg-video-volume::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 26px !important;
    height: 26px !important;
    margin-top: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 0 !important;
}

/* Firefox */
.kg-video-volume::-moz-range-track {
    height: 26px !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.16) !important;
}

.kg-video-volume::-moz-range-progress {
    height: 26px !important;
    border-radius: 8px 0 0 8px !important;
    background: var(--accent) !important;
}

.kg-video-volume::-moz-range-thumb {
    width: 26px !important;
    height: 26px !important;
    border: 0 !important;
    background: transparent !important;
    opacity: 0 !important;
}

/* Sound seek height = Sound icon button height */
.kg-video-volume {
    height: 38px !important;
}

.kg-video-volume::-webkit-slider-runnable-track {
    height: 38px !important;
    border-radius: 10px !important;
}

.kg-video-volume::-webkit-slider-thumb {
    width: 38px !important;
    height: 38px !important;
    margin-top: 0 !important;
}

.kg-video-volume::-moz-range-track,
.kg-video-volume::-moz-range-progress {
    height: 38px !important;
    border-radius: 10px !important;
}

.kg-video-volume::-moz-range-thumb {
    width: 38px !important;
    height: 38px !important;
}


/* ===== FINAL DETAIL REPORT UI ===== */

.detail-action-row:not(.explore-actions) {
    grid-template-columns:
        48px minmax(0, 1fr) 48px 48px;
}

.detail-action-report svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.detail-action-row.explore-actions {
    grid-template-columns: 44px 44px;
    justify-content: end;
    justify-items: stretch;
}

.detail-action-row.explore-actions .detail-action-share,
.detail-action-row.explore-actions .detail-action-report {
    width: 44px;
    height: 44px;
}

body.kg-report-open {
    overflow: hidden;
}

.detail-report-overlay[hidden] {
    display: none !important;
}

.detail-report-overlay {
    position: fixed;
    z-index: 10050;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 18px;
    background: rgba(0,0,0,.62);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.detail-report-sheet {
    width: min(100%, 430px);
    padding: 18px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 22px;
    background: #12161e;
    box-shadow: 0 24px 70px rgba(0,0,0,.48);
}

.detail-report-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.detail-report-head span {
    display: block;
    margin-bottom: 3px;
    color: var(--accent);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.detail-report-head h3 {
    margin: 0;
    color: rgba(255,255,255,.94);
    font-size: 18px;
}

.detail-report-close {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.78);
    font-size: 22px;
    line-height: 1;
}

.detail-report-options {
    display: grid;
    gap: 8px;
}

.detail-report-options button {
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 13px;
    text-align: left;
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.82);
    font-size: 12px;
    font-weight: 680;
}

.detail-report-options button.is-selected {
    border-color: rgba(252,153,0,.48);
    background: rgba(252,153,0,.12);
    color: var(--accent);
}

.detail-report-submit {
    width: 100%;
    min-height: 48px;
    margin-top: 14px;
    border: 1px solid rgba(252,153,0,.30);
    border-radius: 14px;
    background: var(--accent);
    color: #0a0d13;
    font-size: 12px;
    font-weight: 800;
}

.detail-report-submit:disabled {
    opacity: .38;
}

@media (max-width: 390px) {
    .detail-action-row:not(.explore-actions) {
        grid-template-columns:
            46px minmax(0, 1fr) 46px 46px;
        gap: 7px;
    }
}