.ecofin-bars-wrap {
    width: min(860px, 100%);
    margin: 0 auto;
    padding: 10px;
    display: grid;
    gap: 10px;
    box-sizing: border-box;
}

.ecofin-bar-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.08) 100%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 11px;
    padding: 10px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ecofin-bar-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
}

.ecofin-bar-label {
    color: #e8f0f7;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-size: 12px;
}

.ecofin-bar-value {
    color: #e8f0f7;
    font-weight: 700;
    font-size: 12px;
    min-width: 44px;
    text-align: right;
}

.ecofin-bar-track {
    position: relative;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(14, 24, 34, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.ecofin-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: #e74c3c;
    transition: background-color 180ms linear;
    will-change: width, background-color;
}

@media (max-width: 640px) {
    .ecofin-bars-wrap {
        padding: 8px;
        gap: 8px;
    }

    .ecofin-bar-card {
        padding: 9px;
        border-radius: 9px;
    }

    .ecofin-bar-track {
        height: 12px;
    }

    .ecofin-bar-label,
    .ecofin-bar-value {
        font-size: 11px;
    }
}