.portal-body { background: #f4f7fb; color: #1f2937; }
.course_details_float { background: #fff; }
.course_desp .votes_count { text-decoration: none; cursor: default; }
.course-buy .form-check-input { float: none; margin-left: 0; margin-right: .6rem; }
.course-buy .form-check { display: flex; align-items: flex-start; }
.course-buy .ripple_button_secondary { width: 100%; margin-top: 1rem; padding: .75rem 1rem; font-size: 1rem; font-weight: 700; }
.course-buy .ripple_button_secondary:disabled { opacity: .45; cursor: default; }
.learn-nav { display: flex; gap: .5rem; flex-wrap: wrap; }
.learn-nav a { background: #fff; color: #0b7285; text-decoration: none; font-weight: 600; border-radius: 999px; padding: .45rem .9rem; }
.learn-nav a.active { background: #0b7285; color: #fff; }
.learn-avatar { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 4px solid #e7f8fc; }
header .navbar .dropdown > ul.dropdown-menu-end {
    left: auto;
    right: 0;
}
.portal-bar { background: #fff; border-bottom: 1px solid #e6edf3; padding: .75rem 0; position: sticky; top: 0; z-index: 20; }
.portal-bar-link { font-weight: 600; color: #0b7285; text-decoration: none; }
.portal-wrap { padding: 1.5rem 0 3rem; }
.portal-card { background: #fff; border-radius: 18px; box-shadow: 0 8px 24px rgba(15, 23, 42, .05); }
.portal-kicker { color: #0aa2c0; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.portal-progress { height: 8px; border-radius: 99px; background: #e8eef3; overflow: hidden; }
.portal-progress-lg { height: 14px; }
.portal-progress > span { display: block; height: 100%; border-radius: 99px; background: #12b5d0; }
.overall-percent { font-size: 2.5rem; font-weight: 700; line-height: 1.1; color: #0b7285; }
.lesson-status { display: inline-flex; align-items: center; gap: .4rem; color: #127a3a; font-weight: 700; background: #e8f7ee; border-radius: 999px; padding: .45rem .8rem; cursor: default; user-select: none; }
.class-card { display: block; color: inherit; text-decoration: none; padding: 1.25rem; height: 100%; }
.class-card:hover { color: inherit; transform: translateY(-2px); }
body.portal-body:has(.study-screen) { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
body.portal-body:has(.study-screen) main { flex: 1; min-height: 0; display: flex; }
.study-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: .6rem 1rem .75rem; overflow: hidden; }
.study-screen > div { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.study-top { display: flex; align-items: center; gap: 1rem; margin-bottom: .6rem; min-height: 0; }
.study-title { min-width: 0; }
.study-title h1 { font-size: 1.05rem; line-height: 1.2; margin: 0; }
.study-title span, .study-meter span { color: #64748b; font-size: .8rem; }
.study-meter { margin-left: auto; display: flex; align-items: center; gap: .6rem; min-width: 180px; }
.study-meter strong { color: #0b7285; font-size: 1rem; }
.study-meter .portal-progress { width: 120px; }
.study-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 280px 1fr; gap: .75rem; align-items: stretch; }
.lesson-rail { height: 100%; max-height: none; overflow: auto; padding: 0 .65rem .75rem; position: static; background: #eef3f8; border: 1px solid #dbe5ef; }
.lesson-rail .study-top { flex-direction: column; align-items: stretch; gap: .35rem; margin: 0 -.65rem .75rem; padding: .85rem .85rem .75rem; border-bottom: 0; border-radius: 18px 18px 0 0; background: #0b7285; color: #fff; }
.lesson-rail .study-top .portal-bar-link { color: #d7f6fc; }
.lesson-rail .study-top .study-title h1,
.lesson-rail .study-top .study-meter strong { color: #fff; }
.lesson-rail .study-top .study-title span,
.lesson-rail .study-top .study-meter span { color: rgba(255, 255, 255, .85); }
.lesson-rail .study-top .portal-progress { background: rgba(255, 255, 255, .28); }
.lesson-rail .study-top .portal-progress > span { background: #fff; }
.lesson-rail .form-label { color: #334155; font-size: .78rem; font-weight: 700; }
.lesson-rail .form-control { background: #fff; border-color: #d5e0ea; }
.lesson-topic { margin-top: .85rem; }
.lesson-topic-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-radius: 10px; padding: .45rem .65rem; }
.lesson-topic-head h2 { margin: 0; font-size: .82rem; font-weight: 700; line-height: 1.3; }
.lesson-topic-head span { flex: 0 0 auto; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .1rem .45rem; background: rgba(255, 255, 255, .72); }
.lesson-topic:nth-of-type(4n+1) .lesson-topic-head { background: #d7f3f8; color: #0b7285; }
.lesson-topic:nth-of-type(4n+2) .lesson-topic-head { background: #e4e9ff; color: #3730a3; }
.lesson-topic:nth-of-type(4n+3) .lesson-topic-head { background: #fff1d6; color: #9a3412; }
.lesson-topic:nth-of-type(4n+4) .lesson-topic-head { background: #f3e8ff; color: #6b21a8; }
.lesson-rail .study-meter { margin-left: 0; margin-top: .35rem; min-width: 0; width: 100%; }
.lesson-rail .study-meter > div { flex: 1; }
.lesson-rail .study-meter .portal-progress { width: 100%; }
.player-card { display: flex; flex-direction: column; min-height: 0; height: 100%; padding: .6rem; }
.player-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.player-name { min-width: 0; }
.player-name strong, .player-name span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-name span { color: #64748b; font-size: .8rem; }
.player-actions { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.player-actions form { margin: 0; }
.lesson-link { display: flex; gap: .75rem; align-items: flex-start; padding: .7rem .75rem; border-radius: 12px; color: inherit; text-decoration: none; background: #fff; border: 1px solid #e3ebf2; margin-top: .35rem; }
.lesson-link small { display: block; color: #64748b; }
.lesson-link:hover { background: #f4fbfe; border-color: #9ad4e3; color: inherit; }
.lesson-link:has(.bi-file-earmark-pdf) { border-left: 3px solid #dc3b3b; }
.lesson-link:has(.bi-play-btn) { border-left: 3px solid #0b7285; }
.lesson-link .bi-file-earmark-pdf { color: #dc3b3b; }
.lesson-link .bi-play-btn { color: #0b7285; }
.lesson-link.done:not(.active) { background: #eefaf3; border-color: #b7e7c8; border-left-color: #12a150; }
.lesson-link.done .bi-check-circle-fill { color: #12a150; }
.lesson-link.active { background: #0b7285; border-color: #0b7285; border-left-color: #9be7f5; color: #fff; box-shadow: 0 6px 16px rgba(11, 114, 133, .25); }
.lesson-link.active small,
.lesson-link.active i { color: #fff; }
.player-frame { flex: 1 1 0; width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 12px; background: #0f172a; }
.pdf-frame { background: #fff; }
@media (max-width: 991px) {
    body.portal-body:has(.study-screen) { height: auto; overflow: visible; display: block; }
    body.portal-body:has(.study-screen) main, .study-screen, .study-screen > div { display: block; height: auto; overflow: visible; }
    .study-top { flex-wrap: wrap; }
    .study-meter { margin-left: 0; }
    .study-layout { grid-template-columns: 1fr; }
    .lesson-rail { max-height: 240px; }
    .player-card { height: auto; }
    .player-toolbar { flex-wrap: wrap; }
    .player-frame, .pdf-frame { height: 78vh; flex: none; }
}