/* badges.css */
.status-indicator {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
}

.count-indicator {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
    background: var(--bg-primary);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
}

.status-unknown { background: linear-gradient(135deg, var(--unknown), #FF8585); }

.status-known { background: linear-gradient(135deg, var(--known), #FFE066); }

.status-mastered { background: linear-gradient(135deg, var(--mastered), #85E095); }

.status-complete { background: linear-gradient(135deg, var(--mastered), #85E095); }

.status-incomplete { background: linear-gradient(135deg, var(--unknown), #FF8585); }

.status-noclass { background: linear-gradient(135deg, #94A3B8, #CBD5E1); }

.status-leave { background: linear-gradient(135deg, var(--warning), #FBBF24); }

.status-badge {
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 700;
    color: white;
}

.status-not-started { background: linear-gradient(135deg, #94A3B8, #CBD5E1); color: white; }

.status-in-progress { background: linear-gradient(135deg, var(--known), #FFE066); color: var(--text-primary); }

.status-completed { background: linear-gradient(135deg, var(--mastered), #85E095); color: white; }