/* ===== RANK DE AVATAR =================================================== */

.avatar-diamond {
    background: linear-gradient(135deg, #b4f8ff, #ffffff);
    box-shadow: 0 0 8px #7af8ff;
}

.avatar-gold {
    background: linear-gradient(135deg, #ffd700, #fff2a8);
    box-shadow: 0 0 8px #ffdd55;
}

.avatar-silver {
    background: linear-gradient(135deg, #c0c0c0, #f0f0f0);
    box-shadow: 0 0 8px #d0d0d0;
}

.avatar-bronze {
    background: linear-gradient(135deg, #cd7f32, #f5d2a6);
    box-shadow: 0 0 6px #cd7f32;
}

/* NEON sutil para os valores dos TOP 4 */
.amount-diamond {
    color: #79e9ff;
    font-weight: 800;
    letter-spacing: .01em;
    text-shadow:
        0 0 1px #79e9ff,
        0 0 5px rgba(73, 215, 255, .35),
        0 0 10px rgba(73, 215, 255, .20);
    filter: saturate(1.08) brightness(1.04);
}

.amount-gold {
    color: #ffc93a;
    font-weight: 800;
    letter-spacing: .01em;
    text-shadow:
        0 0 1px #ffc93a,
        0 0 5px rgba(255, 195, 46, .35),
        0 0 10px rgba(255, 195, 46, .20);
    filter: saturate(1.08) brightness(1.04);
}

.amount-silver {
    color: #f4f7ff;
    font-weight: 800;
    letter-spacing: .01em;
    text-shadow:
        0 0 1px #f4f7ff,
        0 0 5px rgba(206, 216, 238, .35),
        0 0 10px rgba(206, 216, 238, .20);
    filter: saturate(1.05) brightness(1.03);
}

.amount-bronze {
    color: #ffa86a;
    font-weight: 800;
    letter-spacing: .01em;
    text-shadow:
        0 0 1px #ffa86a,
        0 0 5px rgba(255, 138, 45, .35),
        0 0 10px rgba(255, 138, 45, .20);
    filter: saturate(1.08) brightness(1.03);
}

/* ===== PROGRESS BAR ===================================================== */

.dp-holder {
    position: relative;
    isolation: isolate;
}

.dp-bar {
    position: relative;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: #111a26;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
    margin-top: 2px;
}

.dp-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--dp-pct, 0) * 1%);
    background: linear-gradient(90deg, #32d0ff, #4ef1c8);
    border-radius: inherit;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, .35);
    z-index: 1;
    transition: width .6s cubic-bezier(.22, 1, .36, 1);
}

.dp-fill::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -30%;
    width: 30%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .18), rgba(255, 255, 255, 0));
    filter: blur(6px);
    animation: dpShine 2.4s linear infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes dpShine {
    to {
        transform: translateX(330%);
    }
}

.dp-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255, 255, 255, .08) calc(10% - 1px) 10%);
    z-index: 3;
    pointer-events: none;
    opacity: .55;
}

.dp-level {
    position: absolute;
    top: 50%;
    left: clamp(0%, calc(var(--dp-pct, 0) * 1%), 100%);
    transform: translate(-50%, -50%) rotate(45deg);
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .28), transparent 60%), linear-gradient(180deg, #4ef1c8, #32d0ff);
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .35), inset 0 0 4px rgba(255, 255, 255, .22);
    z-index: 5;
    pointer-events: none;
}

.dp-level-n {
    display: block;
    width: 100%;
    line-height: 20px;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    color: #0b1220;
    transform: rotate(-45deg);
}

/* ===== TOGGLE: “Últimas doações” refinado =============================== */

.db-toggle {
    --bd: rgba(124, 199, 255, .22);
    --bd-hover: rgba(124, 199, 255, .45);
    --bg1: #0c1623;
    --bg2: #0a121b;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid var(--bd);
    background: linear-gradient(180deg, var(--bg1), var(--bg2));
    color: #cbd5e1;
    font-weight: 800;
    font-size: .86rem;
    letter-spacing: .01em;
    line-height: 1;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 4px 14px rgba(0, 0, 0, .24);
    transition: border-color .2s ease, box-shadow .2s ease, color .2s ease, transform .12s ease, background .2s ease;
}

.db-toggle:hover {
    border-color: var(--bd-hover);
    color: #e6f1ff;
    box-shadow: 0 0 0 2px rgba(96, 224, 224, .12), 0 10px 24px rgba(0, 0, 0, .35);
}

.db-toggle:active {
    transform: translateY(1px);
}

.db-toggle:focus-visible {
    outline: 2px solid rgba(96, 224, 224, .55);
    outline-offset: 2px;
}

.db-toggle .chev {
    font-size: .86rem;
    opacity: .9;
    transition: transform .25s ease;
}

.db-toggle[aria-expanded="true"] .chev {
    transform: rotate(180deg);
}

.db-toggle-label {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.db-toggle[aria-expanded="true"] {
    background: linear-gradient(180deg, #0f1b2a, #0a111b);
    border-color: var(--bd-hover);
    box-shadow: 0 0 0 2px rgba(96, 224, 224, .10), inset 0 0 0 1px rgba(255, 255, 255, .05);
}