:root {
    --lg-bg:            rgba(255, 255, 255, .14);
    --lg-bg-strong:     rgba(255, 255, 255, .22);
    --lg-border:        rgba(255, 255, 255, .22);
    --lg-border-strong: rgba(255, 255, 255, .36);
    --lg-shadow-soft:   0 8px 22px rgba(0, 0, 0, .10);
    --lg-blur:          16px;
    --lg-saturate:      150%;
}

/* Topbar de vidro fosco (opcional, mas combina com o rail). */
.topbar {
    background: rgba(255, 255, 255, .80);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
            backdrop-filter: blur(18px) saturate(145%);
}
html.has-scrolled .topbar { background: rgba(255, 255, 255, .90); box-shadow: 0 10px 28px rgba(17, 24, 39, .07); }

/* Fallback total: sem backdrop-filter — fundos opacos */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .topbar { background: rgba(255, 255, 255, .97); }
    .training-rail__item:hover:not(.training-rail__item--active) { background: rgba(255, 255, 255, .17) !important; }
    .training-rail__user { background: rgba(255, 255, 255, .10) !important; }
}
/* Alto contraste: remove o vidro */
@media (prefers-contrast: more) {
    .topbar { background: rgba(255, 255, 255, .98); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .training-rail__item:hover:not(.training-rail__item--active) {
        background: rgba(255, 255, 255, .22) !important; border-color: rgba(255, 255, 255, .55) !important;
        -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    }
}
/* Mobile: blur mais leve (performance) */
@media (max-width: 768px) {
    .topbar { -webkit-backdrop-filter: blur(10px) saturate(125%); backdrop-filter: blur(10px) saturate(125%); }
    .training-rail__item:hover:not(.training-rail__item--active),
    .training-rail__user { -webkit-backdrop-filter: blur(10px) saturate(130%); backdrop-filter: blur(10px) saturate(130%); }
}