.course-level-ui {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 10px;
    padding: 9px 10px;
}

.course-level-ui__row,
.course-level-ui__status {
    align-items: center;
    display: flex;
    gap: 7px;
    min-width: 0;
}

.course-level-ui__row {
    justify-content: space-between;
}

.course-level-ui__badge,
.course-level-ui__requirement {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 800;
    gap: 5px;
    line-height: 1.2;
    min-height: 26px;
    padding: 5px 8px;
    white-space: nowrap;
}

.course-level-ui__badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-level-ui__requirement {
    flex: 0 0 auto;
}

.course-level-ui__status {
    color: #4B5563;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
}

.course-level-ui__note {
    color: #92400E;
    font-weight: 600;
}

.course-level-ui--available {
    background: #F0FDFA;
    border-color: #99F6E4;
}

.course-level-ui--available .course-level-ui__badge {
    background: #CCFBF1;
    color: #0F766E;
}

.course-level-ui--available .course-level-ui__requirement {
    background: #E0F2FE;
    color: #075985;
}

.course-level-ui--completed {
    background: #F0FDF4;
    border-color: #BBF7D0;
}

.course-level-ui--completed .course-level-ui__badge {
    background: #DCFCE7;
    color: #15803D;
}

.course-level-ui--completed .course-level-ui__requirement {
    background: #ECFDF5;
    color: #047857;
}

.course-level-ui--locked {
    background: #FFFBEB;
    border-color: #FDE68A;
}

.course-level-ui--locked .course-level-ui__badge {
    background: #FEF3C7;
    color: #92400E;
}

.course-level-ui--locked .course-level-ui__requirement {
    background: #FEE2E2;
    color: #991B1B;
}

.course-level-ui--admin {
    background: #F8FAFC;
    border-color: #CBD5E1;
}

.course-level-ui--admin .course-level-ui__badge {
    background: #E0E7FF;
    color: #3730A3;
}

.course-level-ui--admin .course-level-ui__requirement {
    background: #F1F5F9;
    color: #334155;
}

.course-level-ui--fallback {
    background: #F9FAFB;
    border-color: #E5E7EB;
}

.course-level-ui--fallback .course-level-ui__badge,
.course-level-ui--fallback .course-level-ui__requirement {
    background: #F3F4F6;
    color: #6B7280;
}

@media (max-width: 640px) {
    .course-level-ui__row {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .course-level-ui__badge,
    .course-level-ui__requirement {
        max-width: 100%;
        white-space: normal;
    }
}