.r7lms-root {
        --r7lms-accent: #b91c1c;
        --r7lms-ink: #1c1917;
        --r7lms-muted: #57534e;
        --r7lms-line: #e7e5e4;
        --r7lms-bg: #fafaf9;
        color: var(--r7lms-ink);
        max-width: 1100px;
        margin: 0 auto;
        padding: 1.5rem;
}

.r7lms-catalog__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 1.25rem;
}

.r7lms-course-card {
        border: 1px solid var(--r7lms-line);
        background: #fff;
        overflow: hidden;
}

.r7lms-course-card__media img {
        display: block;
        width: 100%;
        height: auto;
}

.r7lms-course-card__body {
        padding: 1rem;
}

.r7lms-course-card__title {
        font-size: 1.125rem;
        margin: 0 0 0.5rem;
}

.r7lms-course-card__title a {
        color: inherit;
        text-decoration: none;
}

.r7lms-course-card__meta {
        color: var(--r7lms-muted);
        font-size: 0.875rem;
}

.r7lms-btn {
        display: inline-block;
        background: var(--r7lms-accent);
        color: #fff !important;
        padding: 0.65rem 1rem;
        text-decoration: none;
}

.r7lms-course__hero {
        display: grid;
        gap: 1.5rem;
        margin-bottom: 2rem;
}

@media (min-width: 900px) {
        .r7lms-course__hero {
                grid-template-columns: 1.1fr 1fr;
                align-items: start;
        }
}

.r7lms-section {
        border-top: 1px solid var(--r7lms-line);
        padding: 1rem 0;
}

.r7lms-lesson__video {
        margin: 1rem 0 1.5rem;
}

.r7lms-lesson__video iframe {
        width: 100%;
        min-height: 360px;
}

.r7lms-badge {
        display: inline-block;
        margin-left: 0.5rem;
        padding: 0.1rem 0.45rem;
        border: 1px solid var(--r7lms-line);
        font-size: 0.75rem;
        text-transform: uppercase;
}

.r7lms-access-denied {
        text-align: center;
        padding: 4rem 1rem;
}

.r7lms-panel {
        border: 1px solid var(--r7lms-line);
        background: var(--r7lms-surface, #fff);
        padding: 1.25rem;
        margin-bottom: 1rem;
}

.r7lms-auth__grid {
        display: grid;
        gap: 1.25rem;
}

@media (min-width: 800px) {
        .r7lms-auth__grid {
                grid-template-columns: 1fr 1fr;
        }
}

.r7lms-muted {
        color: var(--r7lms-muted);
}

.r7lms-auth .login-username input,
.r7lms-auth .login-password input {
        width: 100%;
        max-width: 100%;
}

.r7lms-progress-bar {
        height: 0.5rem;
        background: var(--r7lms-line);
        border-radius: var(--r7lms-radius, 2px);
        overflow: hidden;
}

.r7lms-progress-bar__fill {
        height: 100%;
        background: var(--r7lms-accent);
}