/* Топ-10 gated section */

    .media {
        padding: 0;
    }
    .media__tops-head {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        padding: 20px 20px 0;
    }

    .media__tops {
        padding: 12px 20px 20px;
        min-height: 380px;
    }

    .media__tops-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .media__top-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .media__top-row {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .media__top-bar {
        height: 14px;
        border-radius: 7px;
        background: var(--color-neutral-solid-200);
    }

    @media (max-width: 900px) {

        .media__tops-head,
        .media__tops-grid {
            grid-template-columns: 1fr;
        }
    }

    /* Медіа widget — layout only, scoped to .media */

    .media__actions {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .media__kpis {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-bottom: 16px;
    }

    .media__kpi {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 14px 16px;
        border-radius: var(--cntnr-corner-Normal);
border: 1px solid var(--cntnr-border-default);
background: var(--cntnr-bg-Secondary-Default, #FAFAFC);
    }

    .media__kpi-label {
        color: var(--color-neutral-solid-700);
    }

    .media__kpi-value {
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.3px;
        color: var(--text-default);
    }

    /* MediaLoaded = false: замість числа — «Дані відсутні» звичайним текстом. */
    .media__kpi-value--empty {
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.33px;
        line-height: 24px;
    }

    /* MediaLoaded = null (_MediaLoading.cshtml, Figma 5331:116368): розмитий каркас
       під .teaser-lock, по центру — лоадер і «Завантажуємо дані…». */
    .media__loading-value {
        width: 64px;
        height: 22px;
        border-radius: 11px;
    }

    .media__loading-chart {
        display: block;
        height: 168px;
        border-radius: 8px;
        background: var(--color-neutral-solid-200);
    }

    .media__loading .media__tops {
        min-height: 0;
    }

    .media__spinner {
        animation: media-spin 1s linear infinite;
    }

    .media__loading-text {
        margin: 0;
        color: var(--text-default);
    }

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

    @media (prefers-reduced-motion: reduce) {
        .media__spinner {
            animation-duration: 3s;
        }
    }

    .media__charts {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .media__chart {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 14px 14px 16px;
       border-radius: var(--cntnr-corner-Normal);
border: 1px solid var(--cntnr-border-default);
background: var(--cntnr-bg-Secondary-Default, #FAFAFC);
        min-width: 0;
    }

    .media__chart-title {
        margin: 0;
        color: var(--text-default);
    }

    /* Chart.js canvases: chart-box needs an explicit height (maintainAspectRatio:false). */
    .chart-box {
        position: relative;
    }

    .media__bar-box {
        height: 168px;
    }

    /* World map (Figma 3675:327019): SVG injected at runtime by world-map.js */
    .media__world-map {
        position: relative;
        height: 168px;
    }

    .media__world-map-canvas {
        width: 100%;
        height: 100%;
    }

    .media__world-map-canvas svg {
        display: block;
        width: 100%;
        height: 100%;
    }

    .media__world-map-canvas svg path {
        cursor: default;
        transition: opacity .15s ease;
    }

    .media__world-map-canvas svg path:hover {
        opacity: .8;
    }

    .media__world-map-tooltip {
        position: absolute;
        z-index: 2;
        pointer-events: none;
        transform: translate(-50%, -100%);
        background: var(--text-default);
        color: #fff;
        font-size: 11px;
        line-height: 1.4;
        padding: 4px 8px;
        border-radius: 6px;
        white-space: nowrap;
    }

    .media__world-map-legend {
        list-style: none;
        margin: 8px 0 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 4px 12px;
    }

    .media__world-map-legend li {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        color: var(--color-neutral-solid-700);
    }

    /* Donut (Chart.js doughnut + HTML center overlay) */
    .media__donut-box {
        position: relative;
        width: 140px;
        height: 140px;
        margin: 0 auto;
    }

    .media__donut-center {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    .media__donut-total {
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -0.3px;
        color: var(--text-default);
    }

    .media__donut-label {
        font-size: 11px;
        color: var(--color-neutral-solid-600);
    }

    .media__donut-legend {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: space-between;
/*        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;*/
    }

    .media__donut-legend li {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        color: var(--color-neutral-solid-700);
    }

    .media__legend-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex: 0 0 auto;
    }

    .media__legend-label {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .media__legend-value {
        font-weight: 600;
        color: var(--text-default);
    }

    /* Медіа стоїть у вузькій лівій колонці .two-col під профілем, тож на десктопі
       стовпчики згортаються від власної ширини віджета (як у профілю). Блок
       стоїть перед правилами від ширини екрана, щоб на мобільному перемагали вони. */
    .media {
        container-type: inline-size;
    }

    @container (max-width: 579px) {
        .media__charts {
            grid-template-columns: 1fr 1fr;
        }

        .media__tops-head,
        .media__tops-grid {
            grid-template-columns: 1fr;
        }
    }

    @container (max-width: 419px) {
        .media__kpis,
        .media__charts {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 1024px) {
        .media__charts {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 640px) {

        .media__kpis,
        .media__charts {
            grid-template-columns: 1fr;
        }

    }