:root{--pink:#ec1478;--ink:#14213e;--muted:#7a8498;--line:#e8eaf0;--soft:#fde7f0}
.course-error{min-height:460px;padding:70px 0;text-align:center}
.course-error-icon{display:grid;place-items:center;width:88px;height:88px;margin:0 auto 24px;border-radius:50%;background:var(--soft);color:var(--pink);font-size:40px}
.course-error h1{font-size:clamp(26px,4vw,38px);line-height:1.4;letter-spacing:0}
.course-error p{max-width:600px;margin:18px auto 28px;color:var(--muted);font-size:16px}
.course-error-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:#fff;color:var(--ink);font:14px/1.6 'Noto Sans Thai',sans-serif}
button,a,input,textarea{-webkit-tap-highlight-color:transparent}
button,textarea{font:inherit}
button,a{touch-action:manipulation}
button{cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none}
button{border:0;background:none}
button:hover,a:hover{color:var(--pink)}
button:focus-visible,a:focus-visible,summary:focus-visible,textarea:focus-visible{outline:3px solid #ec147877;outline-offset:4px}
h1,h2,h3,p{margin:0}
h2{font-size:22px;letter-spacing:-.7px}
h2>i{color:var(--pink);margin-right:12px}
h2 small{font-size:16px;font-weight:400;color:#58667f}
img{max-width:100%;display:block}
.container{width:90%;max-width:1400px;margin:auto}
.course-hero{background:linear-gradient(110deg,#f8f6f9 0%,#fce7ed 47%,#efe5df 100%);overflow:hidden;position:relative}
.course-hero:after{content:'';position:absolute;width:800px;height:200px;background:#ffffff38;left:-180px;bottom:-130px;transform:rotate(-17deg);pointer-events:none}
.hero-inner{position:relative;min-height:490px;padding-top:20px;padding-bottom:30px}
.breadcrumb{display:flex;align-items:center;gap:12px;font-size:12px;position:relative;z-index:1;color:#7d879b}
.breadcrumb a{color:var(--ink)}
.breadcrumb i{font-size:10px}
.hero-copy{position:relative;z-index:1;width:65%;margin-top:27px}
.course-code{background:#fbd4e4;color:#b20a59;border-radius:5px;display:inline-block;padding:1px 16px;font-weight:700;font-size:18px}
h1{font-size:clamp(30px,3.5vw,46px);line-height:1.14;letter-spacing:-1.6px;margin-top:10px;color:#25252c;font-weight:700}
.english-title{font-size:20px;margin-top:4px;color:#404761}
.description{font-size:16px;line-height:1.4;margin-top:10px;color:#6d6c7d}
.stats{display:flex;margin:20px 0 22px;gap:18px}
.stats>div{display:flex;gap:10px;align-items:center;padding-right:18px;border-right:1px solid #e6dce3}
.stats>div:last-child{border:0;padding-right:0}
.stats i{font-size:26px;color:var(--pink)}
.stats .star{color:#ff9b00}
.stats strong{font-size:19px;display:block;line-height:1.2}
.stats small{font-size:11px;display:block;color:#768096}
.stats b{font-size:12px}
.hero-buttons{display:flex;gap:15px;flex-wrap:wrap}
.button{display:inline-flex;justify-content:center;align-items:center;gap:13px;background:#fff;border:1px solid #e6e2e7;border-radius:9px;padding:11px 25px;font-weight:500;box-shadow:0 3px 7px #35233805}
.button i{font-size:20px}
.primary{background:var(--pink);border-color:var(--pink);color:white}
.primary:hover{background:#cf0e64;color:#fff}
#start-learning{min-width:190px;font-size:17px;font-weight:600}
#bookmark i{color:var(--pink)}
.hero-art{position:absolute;right:-45px;top:26px;width:440px;height:438px}
.polaroid{position:absolute;top:5px;left:67px;width:270px;background:#fff9f5;padding:12px 12px 10px;transform:rotate(4deg);box-shadow:5px 10px 20px #4d332330}
.polaroid img{height:335px;width:100%;object-fit:cover;object-position:center top;filter:saturate(.72)}
.polaroid>span{font:italic 19px/1.2 cursive;display:block;text-align:center;padding-top:10px;color:#292323}
.teacher-note{position:absolute;right:0;top:63px;transform:rotate(-7deg);background:linear-gradient(130deg,#ffe6f2,#fbcadd);padding:17px;font-size:13px;box-shadow:3px 4px 7px #44303b22}
.teacher-note strong{font-size:12px}
.handwritten{font-family:'Noto Sans Thai',sans-serif;font-style:italic;color:#36292b;line-height:1.5}
.intro-note{position:absolute;top:90px;left:-83px;transform:rotate(-9deg);font-size:23px;text-align:center}
.side-note{position:absolute;right:-5px;bottom:0;transform:rotate(-10deg);font-size:23px;text-align:center}
.tabs-bar{border-bottom:1px solid var(--line);background:white}
.tabs{display:flex;justify-content:space-between;gap:10px}
.tabs button{padding:18px 12px;border-bottom:3px solid transparent;font-size:15px;white-space:nowrap}
.tabs i{color:#858e9e;margin-right:13px;font-size:19px}
.tabs [aria-selected=true]{color:var(--pink);border-bottom-color:var(--pink)}
.tabs [aria-selected=true] i{color:var(--pink)}
.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:27px;padding-top:28px;padding-bottom:50px}
.main-column{min-width:0}
.section-heading{display:flex;align-items:center;justify-content:space-between;margin:5px 0 14px;gap:8px}
#expand-all{font-size:12px;color:#68758b;white-space:nowrap}
#expand-all i{padding:2px 4px;border:1px solid var(--line);border-radius:5px;margin-right:5px}
.lesson{border:1px solid var(--line);border-radius:9px;margin-bottom:6px;overflow:hidden;background:#fff}
.lesson[open]{background:linear-gradient(110deg,#fbf7fa,#fdf8fa);padding-bottom:15px}
.lesson summary{list-style:none;display:flex;align-items:center;gap:24px;cursor:pointer;padding:6px 15px;font-size:14px}
.lesson summary::-webkit-details-marker{display:none}
.lesson-number{min-width:44px;text-align:center;border-radius:5px;background:#eef0f3;line-height:26px;font-size:16px}
.lesson[open] .lesson-number{background:#fbd6e7;color:var(--pink);font-size:21px;line-height:43px}
.lesson-title{flex:1;min-width:0;font-weight:500}
.lesson-title b{margin-right:12px;font-weight:600}
.duration{font-size:12px;color:#7b879e;white-space:nowrap}
.duration i{font-size:11px}
.chevron{font-size:12px;color:#526782}
.lesson[open] .chevron{transform:rotate(180deg);color:var(--pink);background:white;border-radius:5px}
.lesson-content{padding:0 20px 0 84px}
.lesson-description{font:12px/1.5 Arial,sans-serif;color:#7c8090;margin:0 0 12px}
.lesson-materials{display:flex;align-items:center;gap:16px}
.lesson-thumbnail{position:relative;flex:0 0 170px;padding:0;border-radius:7px;overflow:hidden;background:#ddd}
.lesson-thumbnail img{width:100%;height:104px;object-fit:cover;filter:saturate(.3)}
.lesson-thumbnail i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:white;color:#b71860;width:39px;height:39px;display:grid;place-items:center;border-radius:50%;font-size:22px}
.material-actions{display:flex;flex-direction:column;gap:11px;flex:1}
.watch-row{display:flex;align-items:center;gap:12px}
.watch-row .button{font-size:13px;padding:6px 16px;border-radius:6px;gap:9px}
.watch-row .duration{border:1px solid #eddfeb;border-radius:5px;padding:5px 8px}
.download{font-size:13px;background:#fff;border:1px solid #eddfeb;border-radius:6px;padding:7px 12px;display:flex;align-items:center;gap:10px;text-align:left}
.download i{font-size:20px;color:#808a9a}
.file-note{font-size:10px;color:#78859c;flex:0 1 170px}
.side-card{border:1px solid var(--line);border-radius:10px;padding:18px 16px;margin-bottom:13px}
.side-card h2{font-size:21px;margin-bottom:15px}
.side-card h2 i{margin-right:9px}
dl{margin:0;font-size:13px;color:#546381}
dl>div{display:flex;align-items:center;border-bottom:1px solid #eef0f4;padding:7px 0;gap:8px}
dl>div:last-child{border:0}
dt{width:56%}
dt i{margin-right:8px;color:#7f889a}
dd{margin:0}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tags span{font-size:12px;color:#8d194c;background:var(--soft);padding:4px 11px;border-radius:12px}
.teacher{display:flex;align-items:center;gap:13px}
.teacher img{width:76px;height:76px;border-radius:50%;object-fit:cover;object-position:top}
.teacher b{font-size:13px}
.teacher p{font-size:11px;color:#61718c;margin-top:4px}
.profile-button{width:100%;border:1px solid #ecdfe5;border-radius:7px;margin-top:14px;padding:6px;color:var(--pink)}
.quote-card{min-height:220px;background:linear-gradient(140deg,#f3f3f6,#fff7fb 55%,#fbe4ee);padding:27px 20px;border-radius:10px;position:relative;overflow:hidden}
.quote-card>i{font-size:45px;display:block;transform:rotate(-16deg);color:#343d50}
.quote-card blockquote{font-size:24px;font-style:italic;line-height:1.5;text-align:center;margin:-17px 0 10px 30px;transform:rotate(-8deg)}
.quote-card p{font:italic 12px/1.5 cursive;color:#768094;text-align:right;transform:rotate(-8deg);margin-right:15px}
.discussion{margin-top:32px}
.discussion h2{margin-bottom:14px}
.comment-form,.comment{display:flex;gap:15px;border:1px solid var(--line);border-radius:10px;padding:12px 15px;margin-bottom:12px}
.avatar{display:grid;place-items:center;flex:0 0 45px;height:45px;border-radius:50%;background:#e9ebef;color:#a0a9b8;font-size:37px;overflow:hidden}
.comment-input{border:1px solid #edf0f4;border-radius:7px;flex:1;padding:9px;display:flex;align-items:flex-end;flex-direction:column}
.comment-input textarea{width:100%;resize:vertical;min-height:38px;border:none;background:transparent;outline:none;color:var(--muted);font-size:13px}
.comment-input textarea::placeholder{color:#98a1b2}
.comment-input .button{padding:5px 15px;font-size:12px;border-radius:6px}
.comment b{font-size:13px}
.muted{color:var(--muted)}
.comment-date{font-size:12px;margin-left:12px}
.comment p{font-size:13px;color:#58667e;margin:5px 0}
.comment-actions{display:flex;gap:20px}
.comment-actions button{padding:0;font-size:13px;color:#65718a}
.comment-actions i{font-size:18px;margin-right:5px}
.comment-actions .bi-heart-fill{color:var(--pink)}
.sample-note{font-size:11px;color:#9a9eaa}
.info-panel{border:1px solid var(--line);border-radius:10px;padding:25px;min-height:350px}
.info-panel h2{margin-bottom:15px}
.info-panel h3{margin:18px 0 8px}
.info-panel p{color:#637087;line-height:1.9}
.info-panel details{border-bottom:1px solid var(--line);padding:15px 0}
.info-panel summary{cursor:pointer;font-weight:600}
.info-panel details p{padding-top:12px}
.rating-number{font-size:50px;font-weight:700}
.rating-number span{font-size:24px;color:#ffab00}
.skip{position:fixed;top:-100px;left:10px;z-index:5;padding:10px;background:var(--pink);color:white}
.skip:focus{top:10px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
dialog{width:min(520px,90%);border:1px solid var(--line);border-radius:16px;padding:30px;color:var(--ink);box-shadow:0 25px 70px #15223c33}
dialog::backdrop{background:#14213e77;backdrop-filter:blur(3px)}
.dialog-close{position:absolute;right:15px;top:12px;font-size:18px}
.dialog-icon{color:var(--pink);font-size:30px}
dialog h2{margin:10px 0}
dialog p{color:#6e7a91;margin-bottom:20px}
#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:90%;background:#243249;color:#fff;padding:12px 25px;border-radius:10px;box-shadow:0 8px 30px #16213e33;z-index:10}
[hidden]{display:none!important}
@media(min-width:1450px){.hero-inner{min-height:510px}
.hero-copy{margin-top:35px}
}
@media(max-width:1200px){.hero-art{right:-20px;width:360px;opacity:.95}
.polaroid{width:240px;left:40px}
.polaroid img{height:310px}
.teacher-note{right:-15px;padding:13px;top:65px}
.intro-note{left:-95px;font-size:19px}
.side-note{right:-15px;font-size:20px}
.hero-copy{width:67%}
.stats{gap:12px}
.stats>div{padding-right:12px}
.category-stat{max-width:175px}
.description{font-size:14px}
.content-grid{grid-template-columns:minmax(0,1fr) 280px;gap:24px}
.lesson summary{gap:18px;font-size:12px}
.lesson-content{padding-left:76px}
.lesson-thumbnail{flex-basis:145px}
.file-note{display:none}
}
@media(max-width:950px){.container{width:91%}
.hero-copy{width:70%}
.hero-art{right:-60px;opacity:.5}
.intro-note,.side-note{display:none}
.hero-copy h1{font-size:36px}
.hero-inner{min-height:455px}
.content-grid{grid-template-columns:minmax(0,1fr) 240px;gap:18px}
.side-card{padding:15px 12px}
.side-card h2{font-size:18px}
.side-card dl{font-size:11px}
.teacher{gap:8px}
.teacher img{width:50px;height:50px}
.teacher b{font-size:11px}
.teacher p{font-size:10px}
.lesson summary{gap:12px}
.lesson-title b{margin-right:6px}
.lesson-content{padding-left:18px}
.lesson-materials{gap:10px}
.section-heading h2,h2{font-size:20px}
.section-heading h2 small{font-size:13px}
.tabs button{font-size:13px;padding:16px 7px}
.tabs i{margin-right:7px}
}
@media(max-width:700px){.hero-inner{padding-top:15px;min-height:0;padding-bottom:25px}
.breadcrumb{font-size:10px;gap:8px}
.breadcrumb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-copy{width:100%;margin-top:22px}
.hero-copy h1{font-size:clamp(29px,6.2vw,39px);letter-spacing:-1px}
.hero-art{display:none}
.course-code{font-size:15px}
.english-title{font-size:16px}
.description{font-size:13px;max-width:95%;line-height:1.7}
.desktop-break{display:none}
.stats{gap:12px;flex-wrap:wrap;margin:18px 0}
.stats>div{padding-right:12px;gap:8px}
.stats i{font-size:24px}
.stats strong{font-size:17px}
.stats .category-stat{border:0;max-width:none;width:100%}
.stats .category-stat i{font-size:21px}
.category-stat span{display:flex;gap:9px;align-items:center}
.hero-buttons{gap:8px;flex-wrap:wrap}
.hero-buttons .button{padding:9px 13px;font-size:13px;gap:8px}
#start-learning{min-width:130px;font-size:14px}
.button i{font-size:18px}
.tabs{overflow-x:auto;justify-content:flex-start;width:100%;padding:0 4.5%;gap:15px}
.tabs button{font-size:13px;flex-shrink:0;padding:15px 3px}
.content-grid{grid-template-columns:1fr;padding-top:22px;gap:28px}
.section-heading h2{font-size:20px}
.section-heading h2>i{margin-right:6px}
.section-heading h2 small{font-size:12px}
#expand-all{font-size:11px}
.lesson summary{padding:8px 10px;gap:10px}
.lesson-title{font-size:12px}
.lesson-title b{display:block;font-size:10px;color:#68748a}
.lesson-number{min-width:34px;font-size:14px}
.lesson[open] .lesson-number{line-height:40px;font-size:18px}
.duration{font-size:10px}
.lesson-content{padding:4px 12px 0}
.lesson-thumbnail{flex-basis:115px}
.lesson-thumbnail img{height:99px}
.watch-row{gap:6px;flex-wrap:wrap}
.watch-row .button{font-size:12px;padding:5px 10px}
.watch-row>.duration{display:none}
.download{font-size:11px;padding:7px;gap:5px}
.discussion{margin-top:26px}
.discussion h2{font-size:19px}
.comment-form,.comment{padding:10px;gap:9px}
.avatar{flex-basis:33px;height:33px;font-size:29px}
.comment-date{display:block;margin-left:0;font-size:10px}
.comment-input .button{font-size:10px;padding:6px 9px;gap:5px}
.comment p{font-size:12px}
.sidebar{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.side-card{margin:0}
.side-card:first-child{grid-column:1/-1}
.side-card dl{font-size:13px}
.quote-card{display:none}
.side-card h2{font-size:17px}
.teacher{flex-wrap:wrap}
.teacher img{width:55px;height:55px}
.tags span{font-size:10px;padding:4px 8px}
.profile-button{font-size:11px}
.info-panel{padding:18px}
.sample-note{font-size:10px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}
/* Database content may contain long names and descriptions. */
.hero-copy .description{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.hero-art{display:grid;place-items:center;right:0;width:32%;color:#ba7d99}
.side-card dd{overflow-wrap:anywhere}
.material-actions{flex-wrap:wrap}
.button:disabled{opacity:.55;cursor:default}
/* Compact lesson accordion and grouped media,matching the course layout. */
#lessons .lesson summary{gap:20px;padding:5px 12px;font-size:13px;min-height:36px}
#lessons .lesson-number{flex:0 0 38px;min-width:38px;line-height:24px;font-size:15px;font-weight:500}
#lessons .lesson[open] summary{align-items:flex-start;padding-top:12px;padding-bottom:4px}
#lessons .lesson[open] .lesson-number{line-height:42px;font-size:19px}
#lessons .lesson[open] .lesson-title{padding-top:2px}
#lessons .lesson-title{font-weight:600;overflow-wrap:anywhere}
#lessons .chevron{flex:0 0 22px;width:22px;height:22px;display:grid;place-items:center;border:1px solid #eef0f4;border-radius:5px;font-size:12px}
#lessons .lesson-content{padding:0 14px 0 70px;margin-top:0}
#lessons .lesson[open] summary{position:relative;padding-left:70px;min-height:34px}
#lessons .lesson[open] .lesson-number{position:absolute;left:12px;top:12px}
#lessons .lesson-description{font:12px/1.6 'Noto Sans Thai',sans-serif;color:#768096;white-space:pre-line;margin:0 0 10px;overflow-wrap:anywhere}
.lesson-resources{display:grid;gap:14px;margin-top:8px;align-items:start}
.lesson-resources.has-preview{grid-template-columns:145px minmax(0,1fr)}
.lesson-preview{display:block;position:relative;width:100%;max-width:145px;height:90px;aspect-ratio:16/10;background:#f0e8ee;border-radius:6px;overflow:hidden}
.lesson-preview img{width:100%;height:100%;object-fit:cover}
.lesson-preview img[hidden]{display:none}
.preview-pattern{height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#f3e7ee,#e3dbe9);font-size:42px;color:#a78c9d}
.preview-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--pink);box-shadow:0 2px 12px #14213e18;font-size:23px}
.lesson-resource-list{display:grid;gap:10px;min-width:0}
.lesson-resource{display:grid;grid-template-columns:minmax(160px,210px) minmax(0,1fr);align-items:center;gap:12px}
.resource-button{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:8px 12px;background:white;border:1px solid #e9e0e7;border-radius:6px;font-size:12px;line-height:1.4;min-height:36px}
.resource-button i{font-size:18px;color:#8590a1;flex-shrink:0}
.resource-video{background:var(--pink);border-color:var(--pink);color:white;font-weight:600}
.resource-video i{color:inherit}
.resource-video:hover{background:#cf0e64;color:white}
.resource-caption{color:#78859c;font-size:10px;line-height:1.6;overflow-wrap:anywhere}
.resource-caption small{display:block;font-size:10px}
.resource-unavailable{color:#9297a2;background:#fcfafc}
@media(max-width:1100px){.lesson-resource{grid-template-columns:minmax(0,1fr)}
.resource-caption{font-size:11px}
.lesson-resources.has-preview{grid-template-columns:130px minmax(0,1fr)}
}
@media(max-width:600px){#lessons .lesson summary{gap:10px;padding:7px 10px}
#lessons .lesson-content{padding:4px 12px 0;margin-top:0}
#lessons .lesson[open] summary{padding-left:58px;min-height:58px}
#lessons .lesson-title{font-size:12px}
#lessons .lesson-description{font-size:12px}
.lesson-resources.has-preview{grid-template-columns:110px minmax(0,1fr);gap:10px}
.resource-button{font-size:11px;padding:8px;gap:6px}
.resource-caption{font-size:10px}
}
@media(max-width:360px){.lesson-resources.has-preview{grid-template-columns:1fr}
.lesson-preview{width:150px}
}
/* Media buttons follow the supplied compact reference. */
#lessons .lesson-resource{grid-template-columns:200px minmax(0,1fr);gap:14px}
#lessons .resource-button{box-sizing:border-box;width:200px;min-height:35px;padding:7px 12px;gap:10px;border:1px solid #eddfeb;border-radius:5px;font-size:12px;font-weight:500;line-height:1.4;box-shadow:0 2px 5px #35233804}
#lessons .resource-button i{font-size:18px}
#lessons .resource-video{width:134px;min-height:32px;padding:7px 10px;justify-content:center;gap:7px;font-size:11px;font-weight:600;color:#fff;background:linear-gradient(110deg,#ef087d,#e61771);border-color:#ec1478}
#lessons .resource-video i{font-size:16px;color:#fff}
#lessons .resource-video:hover{background:#cf0e64}
#lessons .lesson-resource-list{gap:10px}
@media(max-width:480px){#lessons .lesson-resource{grid-template-columns:minmax(0,1fr);gap:4px}
#lessons .resource-button{max-width:100%}
}
/* Each media type owns a column; additional files stack within that column. */
.lesson-media-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px;align-items:start}
.lesson-media-column{display:flex;flex-direction:column;gap:10px;min-width:0}
#lessons .lesson-media-column .resource-button{width:100%;min-height:40px;justify-content:center;text-align:center;padding:8px;gap:7px;font-size:12px}
#lessons .lesson-media-column .resource-button span{overflow-wrap:anywhere}
#lessons .lesson-media-column .resource-unavailable{flex-wrap:wrap}
#lessons .lesson-media-column .resource-unavailable small{flex-basis:100%;font-size:10px;font-weight:400}
@media(max-width:600px){.lesson-media-columns{grid-template-columns:1fr;gap:12px}
.lesson-media-column:empty{display:none}
}
/* Real course ratings and learner reviews. */
.ratings-summary{display:grid;grid-template-columns:180px minmax(0,1fr);gap:28px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);margin-bottom:22px}
.rating-average{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted)}
.rating-average strong{font-size:48px;line-height:1.2;color:var(--ink)}
.rating-average small{font-size:12px}
.rating-distribution{display:grid;gap:8px}
.rating-bar{display:grid;grid-template-columns:42px minmax(0,1fr) 40px;gap:10px;align-items:center;font-size:12px;color:var(--muted)}
.rating-bar progress{width:100%;height:9px;border:0;border-radius:20px;overflow:hidden;background:#f2eaf0;accent-color:var(--pink)}
.rating-bar progress::-webkit-progress-bar{background:#f2eaf0;border-radius:20px}
.rating-bar progress::-webkit-progress-value{background:var(--pink);border-radius:20px}
.rating-bar progress::-moz-progress-bar{background:var(--pink)}
.review-heading{font-size:17px;margin-bottom:15px}
.public-review{padding:17px 0;border-bottom:1px solid var(--line)}
.review-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px}
.review-author{font-weight:600;display:flex;align-items:center;gap:8px}
.review-author i{font-size:22px;color:#8b94a4}
.review-score{color:#e99616}
.review-date{color:var(--muted);margin-left:auto}
.public-review p{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:10px}
.reviews-more{margin-top:18px}
@media(max-width:600px){.ratings-summary{grid-template-columns:1fr;gap:20px}
.review-date{margin-left:0}
.stats{flex-wrap:wrap}
}
/* Instructor card beside the course introduction. */
.course-hero{ background:#fbeaf0 url('../img/course-detail-banner.png') center center / cover no-repeat; }
.course-hero::after{ display:none; }
.hero-inner{ display:grid; grid-template-columns:minmax(0,1fr) 340px; column-gap:38px; row-gap:28px; align-items:start; padding-top:28px; padding-bottom:28px; min-height:0; }
.hero-inner > .breadcrumb{ grid-column:1; min-width:0; flex-wrap:wrap; }
.hero-copy{ grid-column:1; width:100%; margin-top:0; }
.hero-copy h1{ color:#10233d; }
.hero-instructor{ grid-column:2; grid-row:1 / 3; align-self:center; min-width:0; }
.hero-instructor:empty{ display:none; }
.hero-instructor .instructor-card{ margin:0; padding:24px 30px; background:#fff; border:1px solid #f5e6ed; border-radius:18px; box-shadow:0 8px 24px #6e34400a; }
.instructor-portrait{ width:230px; height:230px; max-width:100%; aspect-ratio:1; margin:0 auto 14px; border:7px solid #fce8f1; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:#f7edf3; color:#ba7d99; }
.instructor-portrait img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.instructor-portrait > i{ font-size:100px; }
.instructor-card h2{ font-size:15px; color:var(--pink); margin-bottom:4px; letter-spacing:0; }
.instructor-card > p{ text-align:left; font-weight:700; font-size:19px; line-height:1.5; }
.instructor-card .instructor-branch{ margin-top:5px; font-size:15px; color:#61718c; font-weight:400; }
.instructor-link{ display:flex; align-items:center; justify-content:center; gap:8px; border-color:var(--pink); padding:10px; font-weight:600; }
.instructor-card .instructor-no-link{ margin-top:14px; font-size:12px; color:var(--muted); font-weight:400; }
@media(max-width:1100px){.hero-inner{ grid-template-columns:minmax(0,1fr) 290px; column-gap:24px; }
.hero-instructor .instructor-card{ padding:22px; }
.instructor-portrait{ width:210px; height:210px; }
}
@media(max-width:760px){.hero-inner{ grid-template-columns:minmax(0,1fr); gap:22px; }
.hero-instructor{ grid-column:1; grid-row:auto; width:100%; max-width:380px; justify-self:center; }
.hero-copy{ width:100%; margin-top:0; }
}

#dialog-message{white-space:pre-line}

/* Accessible course review invitation. */
.review-launch{margin:0}
#review-dialog{width:min(560px,92vw);max-height:90vh;overflow:auto}
#review-dialog h2{padding-right:20px;font-size:22px}
#review-dialog fieldset{border:0;padding:0;margin:18px 0}
#review-dialog legend,#review-dialog label[for]{font-weight:600}
.review-close{position:absolute;right:14px;top:8px;font-size:28px}
.review-stars{display:flex;gap:10px;justify-content:space-between;margin-top:10px}
.review-stars label{position:relative;display:flex;flex-direction:column;align-items:center;cursor:pointer;flex:1;border:1px solid #e8dce3;border-radius:8px;padding:8px 2px}
.review-stars input{accent-color:var(--pink)}
.review-stars span{font-size:32px;color:#8791a1}
.review-stars input:checked+span{color:#e89b12}
.review-stars label:focus-within{outline:2px solid var(--pink);outline-offset:2px}
#review-comment{display:block;box-sizing:border-box;width:100%;margin-top:8px;padding:12px;border:1px solid #cec4cc;border-radius:8px;resize:vertical}
#review-status{margin:14px 0;color:#942047;white-space:pre-line}
.review-actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap}

.course-category-card h2{font-size:18px}
.course-category-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.course-category-links a{display:inline-block;max-width:100%;padding:5px 12px;border-radius:20px;background:#fce0ed;color:#bd105d;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.course-category-links a:hover{background:#f9c7de;color:#8c1245}
@media(max-width:700px){.sidebar .course-category-card{grid-column:1/-1}}