.course-body{min-height:100vh;background:linear-gradient(180deg,#f5fdff,#eaf9fc)}.course-body .back-dashboard{margin-left:auto;display:flex;align-items:center;gap:7px;height:36px;padding:0 13px;border:1px solid rgba(255,255,255,.3);border-radius:7px;color:#fff;text-decoration:none;font-size:12px;font-weight:850;background:rgba(255,255,255,.09)}
.course-page{width:min(1480px,calc(100% - 32px));margin:auto;padding:19px 0 35px}.course-breadcrumb{display:flex;align-items:center;gap:8px;margin:0 0 14px 2px;color:#6b8799;font-size:11px}.course-breadcrumb a{color:#118a9b;text-decoration:none;font-weight:850}.course-breadcrumb b{color:#42647b}.course-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:13px;align-items:start}
.lesson-workspace,.syllabus-panel{border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow)}.lesson-workspace{padding:13px}.video-shell{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:9px;background:#071d2a}.video-shell iframe{width:100%;height:100%;border:0}.video-placeholder{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#fff;background:radial-gradient(circle at 50% 35%,#174e60,#071b28 70%)}.play-mark{width:66px;height:66px;display:grid;place-items:center;padding-left:5px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(28,199,214,.14);color:#4cdae6;font-size:25px;box-shadow:0 0 0 10px rgba(28,199,214,.04)}.video-placeholder strong{margin-top:22px;font-size:18px}.video-placeholder p{margin:7px 0;color:#aac6cf;font-size:12px}.video-placeholder small{margin-top:15px;padding:6px 9px;border:1px solid rgba(78,218,230,.25);border-radius:5px;color:#67d8e2;font-size:9px;font-weight:850;letter-spacing:.7px}
.lesson-header{display:flex;justify-content:space-between;gap:22px;padding:20px 7px 15px}.lesson-header>div{max-width:850px}.lesson-header span:first-child{color:#0798aa;font-size:10px;font-weight:900;letter-spacing:1px}.lesson-header h1{margin:6px 0 8px;font-size:27px;letter-spacing:-.45px}.lesson-header p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}.lesson-duration{align-self:flex-start;white-space:nowrap;padding:7px 10px;border-radius:6px;background:#eaf9fb;color:#277087;font-size:10px;font-weight:850}.lesson-notes{margin:0 7px;padding:16px 18px;border:1px solid #d4ebef;border-radius:8px;background:#f8fdfe}.lesson-notes h2{margin:0 0 12px;font-size:14px}.lesson-points{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.lesson-points span{display:flex;align-items:center;gap:8px;color:#4c6b7e;font-size:11px}.lesson-points i{width:24px;height:24px;display:grid;place-items:center;flex:0 0 24px;border-radius:50%;background:#dff7f2;color:#078b75;font-size:9px;font-style:normal;font-weight:900}.lesson-actions{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;padding:17px 7px 3px}.lesson-actions button{height:39px;padding:0 14px;border:1px solid #c3e4e9;border-radius:7px;background:#f7fdfe;color:#285e77;font-size:11px;font-weight:900;cursor:pointer}.lesson-actions button:last-child{justify-self:end}.lesson-actions button:disabled{opacity:.4;cursor:not-allowed}.lesson-actions .complete-btn{border-color:#72d3c0;background:#e9faf6;color:#07856f}.lesson-actions .complete-btn.done{background:var(--green);color:#fff}
.syllabus-panel{position:sticky;top:73px;overflow:hidden}.syllabus-head{display:flex;gap:12px;padding:16px;border-bottom:1px solid #dcecef}.syllabus-head>span{width:43px;height:43px;display:grid;place-items:center;flex:0 0 43px;border-radius:9px;background:linear-gradient(180deg,#22bea2,#07987e);color:#fff;font-size:16px;font-weight:950}.syllabus-head small{color:#078a74;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.7px}.syllabus-head h2{margin:4px 0 0;font-size:15px;line-height:1.25}.course-progress{padding:13px 16px;border-bottom:1px solid #e1eef1}.course-progress>div{display:flex;justify-content:space-between;margin-bottom:7px;color:#5d788b;font-size:10px;font-weight:800}.course-progress i{height:6px;display:block;overflow:hidden;border-radius:5px;background:#dcecef}.course-progress em{height:100%;display:block;border-radius:5px;background:var(--green);transition:width .25s ease}.syllabus-list{max-height:540px;overflow:auto}.syllabus-list button{width:100%;display:grid;grid-template-columns:30px 1fr 14px;align-items:center;gap:9px;padding:12px 15px;border:0;border-bottom:1px solid #e4eff1;background:#fff;text-align:left;color:var(--ink);cursor:pointer}.syllabus-list button:hover{background:#f3fbfc}.syllabus-list button.active{background:#eafaf7;border-left:3px solid var(--green);padding-left:12px}.syllabus-list button>span:first-child{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#eaf4f6;color:#537589;font-size:9px;font-weight:900}.syllabus-list button.completed>span:first-child{background:var(--green);color:#fff}.syllabus-list b,.syllabus-list small{display:block}.syllabus-list b{font-size:11px;line-height:1.3}.syllabus-list small{margin-top:3px;color:#7991a0;font-size:9px}.syllabus-list em{color:#7992a2;font-size:16px;font-style:normal}.back-courses{display:block;padding:14px;text-align:center;color:#16889a;text-decoration:none;font-size:10px;font-weight:900;background:#f8fdfe}
@media(max-width:1000px){.course-body .app-nav nav{display:none}.course-body .nav-actions{display:none}.course-layout{grid-template-columns:1fr}.syllabus-panel{position:static;grid-row:1}.syllabus-list{max-height:280px}.lesson-points{grid-template-columns:1fr}}
@media(max-width:620px){.course-page{width:calc(100% - 18px);padding-top:12px}.course-body .back-dashboard{margin-left:auto;font-size:10px}.lesson-workspace{padding:8px}.lesson-header{align-items:flex-start;flex-direction:column;padding:15px 5px 12px}.lesson-header h1{font-size:22px}.video-placeholder strong{font-size:15px}.video-placeholder p{font-size:10px}.video-placeholder small{display:none}.play-mark{width:50px;height:50px;font-size:18px}.lesson-notes{margin:0 5px;padding:13px}.lesson-actions{grid-template-columns:1fr 1fr;padding:13px 5px 2px}.lesson-actions .complete-btn{grid-column:1/-1;grid-row:1}.lesson-actions button:last-child{justify-self:stretch}.course-breadcrumb b{max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}


/* Dark theme */
html[data-theme="dark"] .course-body{
  background:linear-gradient(180deg,#071923 0%,#091f2a 100%);
  color:#dcecf1;
}
html[data-theme="dark"] .course-breadcrumb{color:#91aab5}
html[data-theme="dark"] .course-breadcrumb a{color:#55c8d6}
html[data-theme="dark"] .course-breadcrumb b{color:#c9dde4}
html[data-theme="dark"] .lesson-workspace,
html[data-theme="dark"] .syllabus-panel{
  border-color:#214956;
  background:#0d2632;
  box-shadow:0 12px 32px rgba(0,0,0,.24);
}
html[data-theme="dark"] .lesson-header h1,
html[data-theme="dark"] .lesson-notes h2,
html[data-theme="dark"] .syllabus-head h2,
html[data-theme="dark"] .syllabus-list b{
  color:#edf8fb;
}
html[data-theme="dark"] .lesson-header p{color:#91aab5!important}
html[data-theme="dark"] .lesson-duration{
  background:#123642;
  color:#9bd5df;
}
html[data-theme="dark"] .lesson-notes{
  border-color:#214956;
  background:#102d39;
}
html[data-theme="dark"] .lesson-points span{color:#b3c7cf}
html[data-theme="dark"] .lesson-points i{
  background:#123f3b;
  color:#5fe0c7;
}
html[data-theme="dark"] .lesson-actions button{
  border-color:#2b5968;
  background:#102f3c;
  color:#dcecf1;
}
html[data-theme="dark"] .lesson-actions button:hover:not(:disabled){background:#143b49}
html[data-theme="dark"] .lesson-actions .complete-btn{
  border-color:#27685f;
  background:#123e38;
  color:#5fe0c7;
}
html[data-theme="dark"] .syllabus-head,
html[data-theme="dark"] .course-progress{border-color:#214956}
html[data-theme="dark"] .course-progress>div{color:#a5bac3}
html[data-theme="dark"] .course-progress i{background:#244955}
html[data-theme="dark"] .syllabus-list button{
  border-color:#1e414d;
  background:#0d2632;
  color:#dcecf1;
}
html[data-theme="dark"] .syllabus-list button:hover{background:#12313e}
html[data-theme="dark"] .syllabus-list button.active{
  background:#103b37;
  border-left-color:var(--green);
}
html[data-theme="dark"] .syllabus-list button>span:first-child{
  background:#173744;
  color:#a9c0ca;
}
html[data-theme="dark"] .syllabus-list small,
html[data-theme="dark"] .syllabus-list em{color:#91aab5}
html[data-theme="dark"] .back-courses{
  border-color:#214956;
  background:#102d39;
  color:#55c8d6;
}