:root {
    --mm-teal: #0b8793;
    --mm-teal-dark: #075b66;
    --mm-gold: #c58a13;
    --mm-gold-soft: #f4dfaa;
    --mm-ink: #103247;
    --mm-muted: #6c7b86;
    --mm-surface: #ffffff;
}

.viewcounter-stats--details.mahasara-metrics-source {
    display: none !important;
}

.mahasara-metrics {
    position: relative;
    margin: 1.75rem 0 2rem;
    overflow: hidden;
    border: 1px solid rgba(11, 135, 147, .16);
    border-radius: 22px;
    background:
        radial-gradient(circle at 88% 12%, rgba(197, 138, 19, .12), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #f7fbfb 58%, #fffaf0 100%);
    box-shadow: 0 14px 36px rgba(16, 50, 71, .09);
    color: var(--mm-ink);
}

.mahasara-metrics__accent {
    height: 4px;
    background: linear-gradient(90deg, var(--mm-teal), var(--mm-teal) 58%, var(--mm-gold) 58%, var(--mm-gold));
}

.mahasara-metrics__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.4rem .95rem;
    border-bottom: 1px solid rgba(16, 50, 71, .08);
}

.mahasara-metrics__eyebrow {
    margin-bottom: .2rem;
    color: var(--mm-gold);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.mahasara-metrics__title {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--mm-ink) !important;
    font-family: inherit;
    font-size: 1.45rem !important;
    line-height: 1.2;
}

.mahasara-metrics__live {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .46rem .72rem;
    border: 1px solid rgba(11, 135, 147, .16);
    border-radius: 999px;
    background: rgba(255,255,255,.75);
    color: var(--mm-muted);
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

.mahasara-metrics__live > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mm-teal);
    box-shadow: 0 0 0 4px rgba(11,135,147,.12);
}

.mahasara-metrics__body {
    display: grid;
    grid-template-columns: minmax(190px, .8fr) minmax(300px, 1.55fr);
    gap: 1.4rem;
    align-items: center;
    padding: 1.35rem 1.4rem 1.2rem;
}

.mahasara-metrics__donutWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mahasara-metrics__donut {
    position: relative;
    display: grid;
    width: 156px;
    height: 156px;
    place-items: center;
    border-radius: 50%;
    background:
        conic-gradient(
            var(--mm-teal) 0 var(--views-share),
            var(--mm-gold) var(--views-share) 100%
        );
    box-shadow:
        inset 0 0 0 1px rgba(16, 50, 71, .04),
        0 12px 24px rgba(16, 50, 71, .08);
}

.mahasara-metrics__donut::after {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    background: rgba(255,255,255,.96);
    box-shadow: inset 0 0 0 1px rgba(16,50,71,.06);
}

.mahasara-metrics__donutInner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mahasara-metrics__total {
    color: var(--mm-ink);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
}

.mahasara-metrics__totalLabel {
    margin-top: .35rem;
    color: var(--mm-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.mahasara-metrics__legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem 1rem;
    margin-top: .85rem;
    color: var(--mm-muted);
    font-size: .72rem;
    font-weight: 600;
}

.mahasara-metrics__legend span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.mahasara-metrics__legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.mahasara-metrics__legend i.is-view {
    background: var(--mm-teal);
}

.mahasara-metrics__legend i.is-download {
    background: var(--mm-gold);
}

.mahasara-metrics__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.mahasara-metrics__card {
    position: relative;
    min-height: 158px;
    padding: 1.05rem 1.05rem .95rem;
    border: 1px solid rgba(16, 50, 71, .08);
    border-radius: 16px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 8px 20px rgba(16,50,71,.055);
    transition: transform .18s ease, box-shadow .18s ease;
}

.mahasara-metrics__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(16,50,71,.09);
}

.mahasara-metrics__icon {
    display: grid;
    width: 42px;
    height: 42px;
    margin-bottom: .8rem;
    place-items: center;
    border-radius: 13px;
}

.mahasara-metrics__card.is-view .mahasara-metrics__icon {
    background: rgba(11,135,147,.11);
    color: var(--mm-teal);
}

.mahasara-metrics__card.is-download .mahasara-metrics__icon {
    background: rgba(197,138,19,.13);
    color: var(--mm-gold);
}

.mahasara-metrics__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mahasara-metrics__value {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.025em;
}

.mahasara-metrics__label {
    margin-top: .35rem;
    color: var(--mm-muted);
    font-size: .82rem;
    font-weight: 700;
}

.mahasara-metrics__bar {
    height: 5px;
    margin-top: 1rem;
    overflow: hidden;
    border-radius: 999px;
    background: #edf2f3;
}

.mahasara-metrics__bar span {
    display: block;
    height: 100%;
    min-width: 4px;
    border-radius: inherit;
}

.mahasara-metrics__card.is-view .mahasara-metrics__bar span {
    background: linear-gradient(90deg, var(--mm-teal), #20aebb);
}

.mahasara-metrics__card.is-download .mahasara-metrics__bar span {
    background: linear-gradient(90deg, var(--mm-gold), #e1b04b);
}

.mahasara-metrics__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.4rem;
    border-top: 1px solid rgba(16,50,71,.07);
    background: rgba(255,255,255,.58);
    color: var(--mm-muted);
    font-size: .72rem;
}

.mahasara-metrics__footer > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.mahasara-metrics__footer svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: var(--mm-teal);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mahasara-metrics__brand {
    color: var(--mm-teal-dark);
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .mahasara-metrics {
        border-radius: 17px;
    }

    .mahasara-metrics__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .mahasara-metrics__body {
        grid-template-columns: 1fr;
        padding: 1.15rem;
    }

    .mahasara-metrics__cards {
        grid-template-columns: 1fr;
    }

    .mahasara-metrics__footer {
        align-items: flex-start;
        flex-direction: column;
        padding: .8rem 1.15rem;
    }
}