
/* Course overhaul: clear progression, accessible quizzes, predictable mobile navigation */
#nav{display:flex;flex-wrap:wrap;gap:8px;overflow:visible;scrollbar-width:none}
#nav button{flex:0 0 auto;white-space:nowrap;min-height:43px}
.course-home,.course-article{max-width:1080px;margin:0 auto}
.course-home>p{max-width:690px}
.course-progress{border:1px solid #365768;border-radius:14px;padding:14px 16px;margin:20px 0;background:#132633}
.course-progress-top{display:flex;justify-content:space-between;gap:10px;font-size:14px;margin-bottom:10px}
.course-progress-top span{color:#8ce8d0}
.course-progress-track{height:9px;background:#263b4b;border-radius:99px;overflow:hidden}
.course-progress-track>div{height:100%;background:#72d9c0;border-radius:99px;transition:width .2s}
.course-primary{border:1px solid #47736d;border-radius:20px;padding:23px;background:linear-gradient(130deg,#1b393e,#122432);display:flex;align-items:center;justify-content:space-between;gap:20px;margin:17px 0}
.course-primary h2{font-size:clamp(21px,3vw,27px);margin:7px 0}
.course-primary p{margin:0}
.course-primary .pill{flex:0 0 auto;min-width:195px;text-align:center}
.course-secondary{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 30px}
.course-secondary button{border:0;background:transparent;padding:8px 0;color:#a2e9d6;text-decoration:underline;text-underline-offset:4px}
.course-secondary button:hover{color:#fff}
.course-module{margin:27px 0 32px;scroll-margin-top:20px}
.course-module-head{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:13px}
.course-module-head h2{font-size:clamp(21px,3vw,26px);margin:5px 0}
.course-module-head p{margin:0}
.course-module-head>strong{border:1px solid #345567;border-radius:20px;padding:8px 12px;color:#a3e6d2;white-space:nowrap}
.course-lessons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.course-lesson{display:flex;align-items:flex-start;gap:13px;min-height:115px;transition:border-color .15s}
.course-lesson-index{font-size:15px;font-weight:850;color:#8bd8c8;flex:0 0 26px}
.course-lesson-copy{display:block;flex:1;min-width:0}
.course-lesson-copy strong{display:block;font-size:16px;line-height:1.35}
.course-lesson-copy small{line-height:1.45;margin-top:7px}
.course-lesson-state{border:1px solid #416373;border-radius:99px;padding:3px 8px;color:#8ee9d0;font-weight:800}
.course-article{max-width:790px}
.course-content{padding:clamp(19px,4vw,34px);margin-top:16px}
.course-content h1{line-height:1.17}
.course-objective{background:#122d36;border-left:3px solid #72d9c0;padding:12px 15px;border-radius:0 10px 10px 0}
.course-reading{font-size:16px;line-height:1.75}
.course-reading p{margin:18px 0}
.course-practice{padding:17px;background:#112c31;border:1px solid #386357;border-radius:14px;margin:23px 0}
.course-practice p{margin:9px 0 0}
.course-quiz{border-top:1px solid #355264;padding-top:23px;margin-top:24px}
.course-quiz h2{font-size:19px;line-height:1.4;margin:12px 0 15px}
.course-quiz button{min-height:49px}
.course-quiz button:disabled{opacity:1;cursor:default}
.course-quiz button.course-correct{border-color:#72d9c0;background:#1b3e3b;color:#d5fff2}
.course-quiz button.course-wrong{border-color:#d78679;background:#3a252a;color:#ffe4df}
#courseFeedback{margin-top:14px;line-height:1.6}
#courseFeedback p{margin:8px 0}
.course-article-actions{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:25px 0}
.course-article-actions button:disabled{opacity:.4;cursor:not-allowed}
.course-lesson-link{border-top:1px solid #355264;padding-top:17px;display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}
.course-lesson-link span{color:#b2cbd4}
@media(max-width:700px){
 #nav{gap:6px;margin-bottom:20px}
 #nav button{padding:10px 12px;font-size:13px;flex:1 1 auto;text-align:center}
 .course-primary{flex-direction:column;align-items:stretch;padding:19px}
 .course-primary .pill{width:100%;min-width:0}
 .course-lessons{grid-template-columns:1fr}
 .course-lesson{min-height:0;padding:15px}
 .course-secondary{gap:6px 18px}
 .course-module-head{align-items:flex-start}
 .course-article-actions button{flex:1 1 130px}
 .course-lesson-link button{width:100%}
}

.course-visual{margin:22px 0;padding:16px;border:1px solid #345868;border-radius:14px;background:#0e2431}
.course-visual figcaption{font-weight:800;color:#c9f4e7;margin-bottom:14px}
.course-visual p{font-size:12px;color:#b1c8d5;line-height:1.6;margin:12px 0 0}
.course-shadow-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.course-shadow-grid>div{min-width:0}
.course-shadow{height:62px;border-radius:9px;margin-bottom:9px}
.course-shadow-hard{background:linear-gradient(90deg,#a9d6cf 0%,#a9d6cf 49%,#162938 50%,#162938 100%)}
.course-shadow-soft{background:linear-gradient(90deg,#a9d6cf 0%,#a9d6cf 22%,#789f9f 39%,#456674 60%,#162938 80%,#162938 100%)}
.course-shadow-grid strong,.course-shadow-grid small{display:block;line-height:1.5}
.course-shadow-grid strong{font-size:13px}
.course-shadow-grid small{font-size:11px}
.course-light-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.course-light-sample{text-align:center;border:1px solid #2f5060;border-radius:10px;padding:7px}
.course-light-sample svg{width:100%;max-width:140px;display:block;margin:auto}
.course-light-sample strong{font-size:12px;display:block}
.course-ratio-bar{display:grid;grid-template-columns:65px 1fr 55px;align-items:center;gap:10px;margin:12px 0;font-size:13px}
.course-ratio-bar>div{height:17px;border-radius:4px;background:#1c3544;overflow:hidden}
.course-ratio-bar i{display:block;height:100%;background:#72d9c0}
@media(max-width:420px){.course-light-grid{gap:5px}.course-light-sample{padding:3px}.course-light-sample strong{font-size:10px}.course-shadow-grid{gap:8px}}
