#menuOverlay .category-workload-note {
    grid-column: 1 / -1; align-self: start; display: flex; align-items: center; gap: 10px;
    margin: 0; padding: 9px 12px; border: 1px solid #cde3d9; border-radius: 10px;
    background: #f0f8f3; color: #264d42; font-size: .82rem; line-height: 1.35; font-weight: 500;
}
#menuOverlay .category-workload-guide-icon {
    display: flex; align-items: center; justify-content: center; flex: 0 0 40px;
    width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%;
    color: #164c41; background: #e4f3ec; border: 1px solid #badbcf;
    box-shadow: 0 1px 4px #152a2114; font-size: 23px; font-weight: 800; line-height: 1;
}
#menuOverlay .category-workload-guide-copy { min-width: 0; }
#menuOverlay .category-workload-guide-title { display: block; margin-bottom: 3px; font-size: .9rem; font-weight: 800; }
#menuOverlay .category-workload-guide-copy p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
#menuOverlay .category-workload-guide-title { overflow-wrap: anywhere; }
#menuOverlay .category-workload-guide-copy strong { font-weight: 800; }
#menuOverlay .category-workload-note.is-unavailable { background: #f3f5f6; border-color: #d2d9de; color: #52616b; }
#menuOverlay .category-workload-note.is-unavailable .category-workload-guide-icon { background: #edf0f2; border-color: #d2d9de; color: #68747c; }
#menuOverlay .category-workload-guide-copy [hidden] { display: none; }
@media (max-width: 700px) {
    #menuOverlay .category-workload-note { padding: 8px 10px; gap: 8px; }
    #menuOverlay .category-workload-guide-icon { width: 36px; height: 36px; flex-basis: 36px; font-size: 21px; }
}
@media (max-height: 500px) {
    #menuOverlay .category-workload-note { padding: 7px 10px; }
    #menuOverlay .category-workload-guide-title { margin-bottom: 2px; }
    #menuOverlay .category-workload-guide-icon { width: 36px; height: 36px; flex-basis: 36px; font-size: 21px; }
}
#menuOverlay .category-workload-note[hidden] { display: none; }
#menuOverlay .menu-grid-container.has-workload-indicators { align-content: start; }
#menuOverlay .category-workload-note + .category-group-heading { margin-top: 0; }
#menuOverlay .sidebar-cat-link.has-category-workload {
    position: relative; padding: 12px; gap: 8px; min-width: 0;
}
#menuOverlay .has-category-workload > img { max-width: 44px; height: 44px !important; flex-shrink: 1; }
#menuOverlay .has-category-workload .cat-text-wrap { min-width: 0; overflow-wrap: anywhere; }
#menuOverlay .category-workload-badge {
    position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex: 0 0 42px; box-sizing: border-box; border-radius: 50%;
    color: #68747c; background: #edf0f2; border: 1px solid #d2d9de;
    font-size: 14px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 4px #152a2114; pointer-events: none;
}
#menuOverlay .category-workload-badge.is-green { background: #dcf4e6; color: #146036; border-color: #92cfab; }
#menuOverlay .category-workload-badge.is-orange { background: #ffe7c2; color: #944500; border-color: #efb766; }
#menuOverlay .category-workload-badge.is-red { background: #ffdedc; color: #ae2424; border-color: #ea9690; }
#menuOverlay .category-workload-badge.is-unavailable { background: #edf0f2; color: #68747c; border-color: #d2d9de; }
#menuOverlay .category-workload-badge.is-loading::after {
    content: ''; width: 14px; height: 14px; border: 2px solid #b7d1c7;
    border-top-color: #246e59; border-radius: 50%; animation: categoryWorkloadSpin .85s linear infinite;
}
@keyframes categoryWorkloadSpin { to { transform: rotate(360deg); } }
@media (max-width: 700px) {
    #menuOverlay .menu-grid-container.has-workload-indicators {
        grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start;
    }
}
@media (max-width: 600px) {
    #menuOverlay .menu-grid-container.has-workload-indicators { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    #menuOverlay .category-workload-badge.is-loading::after { animation: none; }
}
