.course-app-page,
.course-room-page {
    --course-brand: #005fbd;
    --course-brand-dark: #004b98;
    --course-brand-soft: #eaf4ff;
    margin: 0;
}

.course-app-page > .mobile-bottom-nav,
.course-room-page > .mobile-bottom-nav { display: none !important; }

.course-app-shell {
    display: block;
    min-height: 100dvh;
    background: #fff;
}

.course-app-workspace { min-width: 0; }
.course-app-topbar { position: sticky; z-index: 40; top: 0; display: flex; min-height: 2.5rem; min-width: 0; align-items: center; gap: .38rem; overflow: hidden; border-bottom: 1px solid #e4e8ed; background: rgba(255, 255, 255, .97); padding: .42rem 1.35rem; color: #667085; font-size: .78rem; backdrop-filter: blur(12px); }
.course-app-topbar a:hover { color: var(--course-brand); }
.course-app-topbar strong { overflow: hidden; color: #1d2939; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.course-app-topbar__actions { display: flex; flex: 0 0 auto; align-items: center; gap: 1rem; margin-left: auto; }
.course-app-topbar__progress { width: 10rem; }
.course-app-topbar__progress-label { display: flex; justify-content: space-between; color: #667085; font-size: .68rem; font-weight: 700; }
.course-app-topbar__progress-track { height: .28rem; overflow: hidden; margin-top: .3rem; border-radius: 999px; background: #e5eaf0; }
.course-app-topbar__progress-bar { height: 100%; border-radius: inherit; background: var(--course-brand); }
.course-app-topbar__back { display: inline-flex; min-height: 2rem; align-items: center; gap: .3rem; border: 1px solid #d7e0e9; border-radius: .4rem; padding: .3rem .65rem; color: #475467; font-weight: 700; }

@media (max-width: 639px) {
    .course-app-topbar { padding-inline: 1rem; }
    .course-app-topbar__progress { display: none; }
}