.opbc-catalog,
.opbc-my-courses {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin: 20px 0;
}
.opbc-course-card {
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    padding: 16px;
    background: #fff;
}
.opbc-course-card h3 { margin-top: 0; }
.opbc-course-card img { max-width: 100%; height: auto; border-radius: 4px; }

.opbc-progress-wrap { margin: 10px 0; }
.opbc-progress-bar {
    background: #eee;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}
.opbc-progress-bar span {
    display: block;
    height: 100%;
    background: #2271b1;
    transition: width 0.3s ease;
}

.opbc-btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid #2271b1;
    color: #2271b1;
    background: #fff;
    cursor: pointer;
    font: inherit;
}
.opbc-btn-primary {
    background: #2271b1;
    color: #fff;
}
.opbc-btn:hover { opacity: 0.9; }

.opbc-lesson-list {
    list-style: none;
    padding: 0;
}
.opbc-lesson-item {
    padding: 10px;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.opbc-lesson-item.opbc-locked { opacity: 0.6; }
.opbc-status-tag {
    font-size: 0.85em;
    background: #f0f0f1;
    padding: 2px 8px;
    border-radius: 10px;
}
.opbc-status-completed .opbc-status-tag { background: #d1f0d8; color: #1a6a2c; }
.opbc-status-submitted .opbc-status-tag { background: #fff3cd; color: #806000; }
.opbc-status-in_progress .opbc-status-tag { background: #cfe2ff; color: #084298; }

.opbc-lesson-view .opbc-q {
    border-left: 3px solid #2271b1;
    padding: 12px;
    margin: 12px 0;
    background: #fafbfc;
}
.opbc-q-option { display: block; padding: 4px 0; }
.opbc-feedback { margin-top: 8px; padding: 8px; border-radius: 4px; }
.opbc-correct { background: #d1f0d8; color: #1a6a2c; }
.opbc-incorrect { background: #fbd5d5; color: #842029; }
.opbc-pending { background: #fff3cd; color: #806000; }
.opbc-graded { background: #cfe2ff; color: #084298; }