/* Explain: Responsive layout helpers and grid structures for page sections. */
.dashboard-bars span {
    display: block;
    height: 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-color) 14%, transparent);
}

.dashboard-bars span:nth-child(1) {
    width: 94%;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
}

.dashboard-bars span:nth-child(2) {
    width: 74%;
}

.dashboard-bars span:nth-child(3) {
    width: 86%;
}

.dashboard-bars span:nth-child(4) {
    width: 62%;
}