.summary-metrics .performance-card,
.summary-metrics .total-card {
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
}

.summary-metrics {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.summary-metrics .performance-card::before,
.summary-metrics .total-card::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
}

.summary-metrics .performance-card {
    border-color: rgba(174, 119, 255, .38);
    background: linear-gradient(145deg, rgba(53, 34, 86, .9), rgba(21, 17, 40, .96));
}

.summary-metrics .performance-card::before {
    background: #ae77ff;
    box-shadow: 0 0 14px rgba(174, 119, 255, .5);
}

.summary-metrics .performance-card > span {
    color: #cbb0ff;
}

.summary-metrics .performance-card > strong {
    color: #bd94ff;
    font-size: 26px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.025em;
}

.summary-metrics .total-card {
    border-color: rgba(58, 169, 255, .34);
    background: linear-gradient(145deg, rgba(14, 50, 78, .9), rgba(7, 25, 42, .96));
}

.summary-metrics .total-card::before {
    background: #3aa9ff;
    box-shadow: 0 0 14px rgba(58, 169, 255, .46);
}

.summary-metrics .total-card > span {
    color: #90d1ff;
}

.summary-metrics .total-card > strong {
    color: #69c0ff;
    font-size: 24px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.summary-metrics .performance-card > small,
.summary-metrics .total-card > small {
    color: #a8b9ca;
}

.power {
    border: 1px solid rgba(75, 174, 232, .2);
    border-left: 3px solid rgba(82, 193, 255, .72);
    background: linear-gradient(90deg, rgba(12, 38, 59, .92), rgba(8, 27, 43, .84));
    color: #c7e7f9;
}

#progress-bar {
    background: linear-gradient(90deg, #168fe5, #58d5ff);
    box-shadow: 0 0 12px rgba(70, 193, 255, .24);
}

.progress-label {
    color: #d6e8f7;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 780px) {
    .summary-metrics .performance-card > strong {
        font-size: 24px;
    }

    .summary-metrics .total-card > strong {
        font-size: 22px;
    }
}