/* Вся секция */
    .xrp-analytics-layout {
        width: 1040px;
        height: 640px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .xrp-analytics-inner {
        display: flex;
        align-items: center;
    }

    /* Колонки карточек */
    .xrp-cards-column {
        display: flex;
        flex-direction: column;
        gap: 22px;
        z-index: 3;
    }

    .xrp-cards-column.xrp-left {
        margin-right: -30px;
    }

    .xrp-cards-column.xrp-right {
        margin-left: -60px;
    }

    /* Карточка */
    .xrp-side-card {
        min-width: 210px;
        padding: 16px;
        border-radius: 18px;
    backdrop-filter: blur(3px);
        background: linear-gradient(
            291.11deg,
            rgba(1, 72, 222, 0.6) 2.47%,
            rgba(3, 3, 6, 0.4) 93.57%
        );

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

    .xrp-side-card-title {
        font-size: 12px;
        opacity: 0.9;
        margin-bottom: 6px;
    }

    .xrp-side-card-main {
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 0.02em;
    }

    .xrp-side-card-unit {
        font-size: 14px;
        margin-left: 4px;
    }

    .xrp-side-card-sub {
        font-size: 11px;
        opacity: 0.7;
        margin-top: 6px;
    }

    .xrp-side-card-growth {
        font-size: 11px;
        margin-top: 6px;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .xrp-side-card-growth .xrp-value {
        font-weight: 600;
        margin-bottom: -6px;
    }

    /* Стрелка */
    .xrp-stat-arrow {
        width: 10px;
        height: 10px;
        display: inline-block;
        border-right: 2px solid #3dffb0;
        border-top: 2px solid #3dffb0;
        transform: rotate(-45deg);
        border-radius: 1px;
    }

    /* ЦЕНТР */
    .xrp-center-panel {
        position: relative;
        width: 426px;
        height: 551px;
        padding: 28px 32px 24px 32px;
        overflow: hidden;
        border-radius: 22px;

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

        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0) 85.31%,
                rgba(255, 255, 255, 0.1) 131%
            ),
            linear-gradient(
                90deg,
                rgba(255, 255, 255, 0) 86.72%,
                rgba(255, 255, 255, 0.1) 121.09%
            ),
            linear-gradient(
                346.8deg,
                rgba(1, 74, 229, 0.144) -0.1%,
                rgba(61, 168, 245, 0.09) 44.14%,
                rgba(141, 207, 255, 0.009) 85.11%
            ),
            linear-gradient(
                90deg,
                rgba(255, 255, 255, 0.1) -30.86%,
                rgba(255, 255, 255, 0) 19.9%
            );
    }

    .xrp-center-header-main {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 4px;
        text-align: center;
        background: linear-gradient(262.93deg, #ffffff -8.29%, #4d68a1 99.45%);
        -webkit-background-clip: text;
        color: transparent;
    }

    .xrp-center-header-sub {
        font-size: 11px;
        opacity: 0.7;
        text-align: center;
    }

    .xrp-donut-wrapper {
        position: relative;
        width: 280px;
        height: 280px;
        margin: 40px auto 18px auto;
    }

    #donutChart {
        width: 100% !important;
        height: 100% !important;
    }

    /* Текст внутри */
    .xrp-donut-center-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        pointer-events: none;
    }

    .xrp-donut-main {
        font-size: 32px;
        font-weight: 700;
        letter-spacing: 0.03em;
    }

    .xrp-donut-subline {
        font-size: 11px;
        opacity: 0.75;
        margin-top: 4px;
    }

    .xrp-donut-change {
        font-size: 11px;
        margin-top: 4px;
        color: #f5f5f5;
    }

    /* Легенда */
    .xrp-donor-legend {
       margin-top: 40px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        font-size: 11px;
    }

    .xrp-legend-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .xrp-legend-left {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .xrp-legend-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
    }

    .xrp-legend-percent {
        opacity: 0.85;
    }

/* ===========================
   📌 Планшеты
   =========================== */
@media (max-width: 1024px) {

    .xrp-analytics-layout {
        width: 100%;
        height: auto;
        padding: 20px 0;
    }

    .xrp-analytics-inner {
        flex-direction: column;
        gap: 40px;
        align-items: center;
    }

    .xrp-cards-column.xrp-left,
    .xrp-cards-column.xrp-right {
        margin: 0 !important;
    }

    .xrp-cards-column {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 16px;
        z-index: 3;
    }

    .xrp-side-card {
        min-width: 210px;
    }

    .xrp-center-panel {
        margin-top: 20px;
    }
}

/* ===========================
   📱 Мобильные — как на макете
   =========================== */
@media (max-width: 768px) {

    .xrp-analytics-layout {
        width: 100%;
        height: auto;
        padding: 0;
    }

    .xrp-analytics-inner {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100%;
    }

    /* Карточки — 3 в ряд, равные, без max-width */
    .xrp-cards-column {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between;
        width: 100%;
        
        gap: 10px;
        margin: 0 !important;
        transform: none !important;
    }

    .xrp-side-card {
        flex: 1;
        min-width: 0;
        width: 100%;
        border-radius: 16px;
        padding: 18px 14px;
    }

    /* Центр */
    .xrp-center-panel {
        width: 100%;
        margin-top: 10px;
        max-width: none;
        height: auto;
        padding: 20px 16px;
        border-radius: 20px;
    }

    .xrp-donut-wrapper {
        width: 220px;
        height: 220px;
        margin: 24px auto 10px auto;
    }

    .xrp-donut-main {
        font-size: 26px;
    }

    .xrp-center-header-main {
        font-size: 16px;
    }

    .xrp-center-header-sub {
        font-size: 10px;
    }

    .xrp-legend-row span {
        font-size: 10px;
    }
}

/* === Глобальный белый текст для всех элементов внутри xrp-блока === */
.xrp-analytics-layout,
.xrp-analytics-layout * {
    color: #ffffff !important;
}