:root{--p:#105f68;--m:#3a9295;--a:#63c1bb;--l:#9ed5d1;--x:#c8e6e2;--ink:#12373b;--muted:#647b7e;--line:#dceceb;--shadow:0 18px 55px #105f681c}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f7fbfa;color:var(--ink);font-family:"Be Vietnam Pro",Arial,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}.app{display:grid;grid-template-columns:264px 1fr;min-height:100vh}aside#side{position:fixed;inset:0 auto 0 0;width:264px;padding:27px 22px;background:linear-gradient(180deg,#0d5962,#0b6870 55%,#084b53);color:white;display:flex;flex-direction:column;z-index:50}.brand{display:flex;align-items:center;gap:12px;color:white;text-decoration:none;margin:0 7px 30px}.brand i{width:50px;height:50px;border:2px solid var(--l);border-radius:15px;display:grid;place-items:center;font:700 29px Georgia}.brand>b{font:700 17px Georgia;letter-spacing:1px}.brand small,.profile small,.overall small,.help small{display:block;font:8px Arial;color:var(--x);margin-top:4px}.profile,.overall,.help,.instructor{display:flex;align-items:center;gap:11px}.profile{padding:14px 8px;border-block:1px solid #ffffff22}.profile p,.overall p,.help p,.instructor p{margin:0}.profile b,.profile small,.overall b,.overall small,.help b,.help small,.instructor b,.instructor small{display:block}.avatar{width:49px;height:49px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,var(--x),var(--a));color:var(--p);font-weight:800;border:2px solid #ffffffaa}.overall{margin:24px 4px}.ring{width:92px;height:92px;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(circle,#0b626b 57%,transparent 59%),conic-gradient(var(--l) 68%,#ffffff22 0)}.ring b{font-size:20px}#side nav{display:flex;flex-direction:column;gap:7px}#side nav a{padding:12px 14px;border-radius:12px;text-decoration:none;color:#dff5f3;font-size:13px}#side nav a:hover,#side nav a.active{background:linear-gradient(90deg,#63c1bb77,#9ed5d122);color:white}.help{margin-top:auto;border-radius:14px;padding:13px;background:#ffffff12;border:1px solid #ffffff20}.help>p{font-size:10px}#closeSide{display:none}.app>main{grid-column:2;min-width:0}header{min-height:86px;position:sticky;top:0;z-index:30;background:#ffffffed;backdrop-filter:blur(18px);display:flex;align-items:center;gap:18px;padding:14px 34px;border-bottom:1px solid var(--line)}.tabs{display:flex;gap:8px}.tab{border:1px solid var(--line);background:white;border-radius:14px;padding:15px 25px;font-weight:700;color:var(--p)}.tab.active{background:var(--p);color:white}.search{margin-left:auto;width:min(280px,24vw);display:flex;gap:10px;align-items:center;border:1px solid var(--line);background:white;padding:11px 14px;border-radius:13px}.search input{border:0;outline:0;width:100%}.bell,#menu{border:0;background:#f3fbfa;width:42px;height:42px;border-radius:12px}#menu{display:none}.hero{display:grid;grid-template-columns:1fr 1.12fr;gap:35px;padding:48px 34px 28px;max-width:1400px;margin:auto;scroll-margin-top:100px}.heroText{align-self:center}.hero label,.title label,.notes label,.now>label,#modName{font-size:10px;font-weight:800;letter-spacing:1.8px;color:var(--m)}.hero h1{font-size:clamp(38px,4.2vw,66px);line-height:1.08;letter-spacing:-2.8px;margin:13px 0 18px}.hero h1 em{font-style:normal;color:var(--m)}.heroText>p{font-size:15px;line-height:1.75;color:var(--muted)}.heroText>div{display:flex;gap:22px;align-items:center;margin:25px 0}.primary,.now>button{border:0;border-radius:12px;padding:14px 22px;color:white;font-weight:700;background:linear-gradient(135deg,var(--m),var(--a));box-shadow:0 9px 22px #3a92953d}.heroText a{text-decoration:none;font-weight:700;color:var(--p)}.hero ul{display:flex;gap:30px;list-style:none;padding:0}.hero li{padding-right:28px;border-right:1px solid var(--line)}.hero li b,.hero li small{display:block}.hero li small{font-size:10px;color:var(--muted)}.heroVideo{min-height:340px;border:0;border-radius:24px;position:relative;overflow:hidden;color:white;background:radial-gradient(circle at 75% 30%,#9ed5d155,transparent 22%),linear-gradient(120deg,#0d3337,#277b7d);box-shadow:var(--shadow);text-align:left}.teacher{position:absolute;right:18%;bottom:0;width:31%;height:83%}.teacher i{position:absolute;top:2%;left:28%;width:43%;aspect-ratio:.82;border-radius:45%;background:linear-gradient(150deg,#d9a37e,#8c563b);box-shadow:inset 0 15px #172525}.teacher b{position:absolute;inset:30% 0 0;border-radius:45px 45px 0 0;background:linear-gradient(90deg,#111f21,#263a3c 55%,#0c1718)}.new{position:absolute;top:18px;left:18px;background:#052629cc;padding:8px 12px;border-radius:9px;font-size:10px}.bigPlay{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:74px;height:74px;border:3px solid var(--l);border-radius:50%;background:#105f68aa;display:grid;place-items:center;font-size:25px;z-index:2}.heroVideo>p{position:absolute;left:22px;bottom:18px;z-index:2}.heroVideo p b,.heroVideo p small{display:block}.heroVideo p small{font-size:10px;color:var(--x)}.dashboard{display:grid;grid-template-columns:1fr 280px;gap:20px;max-width:1400px;margin:auto;padding:12px 34px 34px}.curriculum,.videos,.notes,.awards{background:white;border:1px solid var(--line);border-radius:22px;box-shadow:0 10px 34px #105f680e;padding:20px;scroll-margin-top:100px}.title{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}.title p{margin:0}.title p>b{display:block;font-size:27px;margin-top:5px}.title>span{font-size:11px;color:var(--muted)}.module{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:9px}.module>button{width:100%;border:0;background:white;padding:15px;display:grid;grid-template-columns:38px 1fr auto auto;align-items:center;gap:11px;text-align:left}.module.open>button{background:linear-gradient(90deg,var(--p),#11727a);color:white}.num{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--p);color:white;font-weight:800}.module.open .num{background:var(--l);color:var(--p)}.modTitle b,.modTitle small{display:block}.modTitle b{font-size:13px}.modTitle small{font-size:9px;color:var(--muted)}.module.open .modTitle small{color:var(--x)}.mini{font-size:10px}.lessons{display:none}.module.open .lessons{display:block}.lesson{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:11px 14px;border-top:1px solid var(--line)}.lesson.current{background:#f3fbfa}.lesson>div{display:flex;align-items:center;gap:10px}.state{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--l);font-size:9px}.state.done{background:var(--a);color:white}.lesson b,.lesson small{display:block}.lesson b{font-size:11px}.lesson small,.time{font-size:8px;color:var(--muted)}.lesson>button{border:0;border-radius:8px;background:var(--p);color:white;font-size:9px;padding:8px 13px}.now{background:linear-gradient(155deg,var(--p),#0b7279);border-radius:22px;padding:24px 20px;color:white;align-self:start;box-shadow:var(--shadow)}.now>label{color:var(--l)}.now>span{display:table;margin:15px 0 12px;border:1px solid #ffffff44;border-radius:20px;padding:6px 10px;font-size:10px}.now h2{font-size:21px}.bar{display:flex;gap:9px;align-items:center}.bar>i{height:7px;border-radius:5px;background:linear-gradient(90deg,var(--l) 68%,#ffffff33 0);flex:1}.instructor{padding:23px 0;border-top:1px solid #ffffff26;margin-top:22px}.instructor small{font-size:8px;color:var(--x)}.now>button{width:100%;background:linear-gradient(135deg,var(--a),var(--l));color:var(--p)}.streak{background:white;color:var(--ink);border-radius:14px;padding:14px;margin-top:18px}.streak small,.streak b{display:block;font-size:9px}.streak b{font-size:12px}.streak p{display:flex;justify-content:space-between}.streak i{font-style:normal;font-size:7px;width:21px;height:21px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center}.streak i:not(.today){background:var(--a);color:white}.streak .today{border:2px solid var(--m)}.videos,.notes,.awards{max-width:calc(1400px - 68px);margin:0 auto 30px}.title>button{background:#f3fbfa;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:10px}#videoGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.videoCard{border:1px solid var(--line);border-radius:15px;overflow:hidden}.thumb{width:100%;height:168px;border:0;background:linear-gradient(135deg,#143f43,#397c7d);position:relative;overflow:hidden}.thumb:before{content:"";position:absolute;width:135px;height:180px;right:15%;bottom:-40px;border-radius:60px 60px 10px 10px;background:linear-gradient(#d2a183 28%,#142426 29%)}.thumb .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border:2px solid white;border-radius:50%;display:grid;place-items:center;background:#105f6899;color:white}.thumb .dur{position:absolute;right:9px;bottom:8px;background:#000a;color:white;padding:4px 7px;border-radius:5px;font-size:8px}.videoBody{padding:13px}.tag{font-size:8px;background:var(--x);padding:5px 8px;border-radius:20px}.videoBody h3{font-size:13px;min-height:38px}.videoBody footer{display:flex;justify-content:space-between;align-items:center}.videoBody footer button{border:1px solid var(--m);background:white;color:var(--p);border-radius:8px;padding:7px 11px;font-size:9px}.notes{display:grid;grid-template-columns:.7fr 1.3fr;gap:35px;background:linear-gradient(135deg,#f3fbfa,white)}.notes h2{margin-bottom:5px}.notes p{font-size:12px;color:var(--muted)}.notes textarea{width:100%;height:110px;border:1px solid var(--line);border-radius:12px;padding:13px;resize:vertical}.notes footer{display:flex;justify-content:space-between;align-items:center}.notes footer small{color:var(--muted)}.notes .primary{padding:9px 14px;font-size:10px}.awards>div:last-child{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.awards article{display:flex;gap:13px;align-items:center;border:1px solid var(--line);border-radius:13px;padding:16px;background:#f3fbfa}.awards article p{margin:0}.awards article b,.awards article small{display:block}.awards article small{font-size:8px;color:var(--muted)}.locked{opacity:.45}.pageFoot{padding:18px 34px 30px;font-size:9px;color:var(--muted);display:flex;justify-content:space-between}.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:24px}.modal.open{display:grid}.shade{position:absolute;inset:0;background:#06272acc;backdrop-filter:blur(8px)}.modal>article{position:relative;width:min(900px,95vw);background:white;border-radius:20px;overflow:hidden}.x{position:absolute;z-index:2;right:14px;top:12px;width:38px;height:38px;border:0;border-radius:50%;background:#0009;color:white;font-size:25px}.frame{aspect-ratio:16/9;background:#073f45}.frame iframe{width:100%;height:100%;border:0}.modal article>section{padding:22px}.modal section p{color:var(--muted);font-size:12px}.modal section footer{display:flex;gap:22px;align-items:center;font-size:10px}.modal section footer button{margin-left:auto;border:0;border-radius:9px;padding:9px 12px;background:var(--x);color:var(--p);font-weight:700}#toast{position:fixed;right:25px;bottom:25px;background:var(--p);color:white;padding:13px 18px;border-radius:11px;transform:translateY(90px);opacity:0;transition:.25s;z-index:150;font-size:11px}#toast.show{transform:none;opacity:1}.empty{padding:30px;text-align:center;color:var(--muted)}
@media(max-width:1050px){.app{grid-template-columns:220px 1fr}aside#side{width:220px;padding-inline:15px}.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:1fr}#videoGrid{grid-template-columns:repeat(2,1fr)}.tab{padding:13px 16px;font-size:12px}}
@media(max-width:760px){.app{display:block}aside#side{transform:translateX(-105%);transition:.25s;width:min(294px,88vw)}aside#side.open{transform:none}#closeSide{display:block;position:absolute;right:12px;top:10px;border:0;background:none;color:white;font-size:26px}.app>main{width:100%}header{padding:10px 15px;flex-wrap:wrap}#menu{display:block}.tabs{order:3;width:100%}.tab{flex:1;font-size:10px}.search{margin-left:auto;width:190px}.bell{display:none}.hero{padding:32px 16px 20px}.hero h1{font-size:39px}.heroVideo{min-height:275px}.dashboard{padding:10px 16px 25px}.module>button{grid-template-columns:32px 1fr auto}.mini{display:none}.lesson{grid-template-columns:1fr auto}.time{display:none}.videos,.notes,.awards{max-width:calc(100% - 32px);padding:16px}#videoGrid,.notes,.awards>div:last-child{grid-template-columns:1fr}.modal{padding:10px}.pageFoot{padding-inline:16px}}
/* Commercial course hierarchy */
#courseIntro{margin-bottom:24px}.courseCover{position:relative;display:grid;grid-template-columns:86px 1fr 210px;gap:20px;padding:24px;border-radius:18px;background:linear-gradient(135deg,#0e5b63 0%,#13727a 62%,#278f91 100%);color:white;overflow:hidden;box-shadow:0 16px 38px #105f6828}.courseCover:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:#9ed5d119;right:-90px;top:-130px}.courseIcon{width:74px;height:74px;border-radius:20px;display:grid;place-items:center;font-size:36px;background:linear-gradient(145deg,var(--l),var(--a));color:var(--p);box-shadow:inset 0 0 0 1px #ffffff55}.courseMain{position:relative;z-index:1}.commercialBadge{display:inline-block;font-size:8px;font-weight:800;letter-spacing:1.5px;color:var(--p);background:var(--l);border-radius:20px;padding:6px 9px}.courseMain h2{font-size:27px;line-height:1.25;margin:10px 0 5px;letter-spacing:-.6px}.courseMain h3{font-size:12px;font-weight:600;color:var(--x);margin:0}.courseMain>p{font-size:10px;line-height:1.65;color:#e8f8f6;max-width:660px;margin:10px 0 14px}.courseFacts{display:flex;gap:20px}.courseFacts span{padding-right:20px;border-right:1px solid #ffffff2e}.courseFacts span:last-child{border:0}.courseFacts b,.courseFacts small{display:block}.courseFacts b{font-size:11px}.courseFacts small{font-size:7px;color:var(--x);margin-top:3px}.courseAction{position:relative;z-index:1;align-self:center;background:#ffffff13;border:1px solid #ffffff26;border-radius:14px;padding:15px}.courseAction>span,.courseAction>small{display:block;font-size:8px;color:var(--x)}.courseAction>b{display:block;font-size:22px;margin:3px 0}.courseAction>i{display:block;height:6px;border-radius:10px;background:#ffffff30;overflow:hidden}.courseAction>i em{display:block;height:100%;background:var(--l)}.courseAction button{width:100%;margin:13px 0 8px;border:0;border-radius:9px;padding:10px;background:linear-gradient(135deg,var(--l),var(--a));color:var(--p);font-size:10px;font-weight:800}.module{transition:.2s}.module:hover{border-color:var(--l);box-shadow:0 8px 24px #105f6810}.module>.chapterHead{grid-template-columns:92px 1fr 100px 22px;padding:17px 18px}.chapterLabel{display:grid;place-items:center;min-height:40px;border-radius:10px;background:#e5f4f2;color:var(--p);font-size:9px;font-weight:800;letter-spacing:.7px}.module.open .chapterLabel{background:var(--l);color:var(--p)}.chapterMeta{text-align:right}.chapterMeta b,.chapterMeta small{display:block}.chapterMeta b{font-size:9px}.chapterMeta small{font-size:7px;color:var(--muted);margin-top:4px}.module.open .chapterMeta small{color:var(--x)}.chev{font-size:18px;transition:.2s}.module.open .chev{transform:rotate(180deg)}.lesson{padding:14px 18px;min-height:76px}.lessonText small,.lessonText b,.lessonText em{display:block}.lessonText small{font-size:7px;font-weight:800;letter-spacing:1px;color:var(--m);margin-bottom:4px}.lessonText b{font-size:12px}.lessonText em{font-style:normal;font-size:7px;color:var(--muted);margin-top:5px}.lesson .time{text-align:center;min-width:62px;padding:7px 10px;border-radius:9px;background:#f1f9f8}.lesson .time b,.lesson .time small{display:block}.lesson .time b{font-size:10px;color:var(--p)}.lesson .time small{font-size:7px;margin-top:2px}.lesson>button{min-width:112px;padding:10px 13px;font-weight:700}.lesson>button:hover{background:var(--m)}.state{flex:0 0 auto}
@media(max-width:1100px){.courseCover{grid-template-columns:70px 1fr}.courseAction{grid-column:1/-1;display:grid;grid-template-columns:auto auto 1fr 160px;align-items:center;gap:12px}.courseAction button{margin:0}.courseAction>small{display:none}.module>.chapterHead{grid-template-columns:82px 1fr 90px 20px}}
@media(max-width:760px){.courseCover{grid-template-columns:1fr;padding:18px}.courseIcon{width:58px;height:58px}.courseMain h2{font-size:22px}.courseFacts{display:grid;grid-template-columns:1fr 1fr;gap:10px}.courseFacts span{border:0}.courseAction{grid-column:auto;display:block}.courseAction button{margin:12px 0 6px}.module>.chapterHead{grid-template-columns:78px 1fr 20px}.chapterMeta{display:none}.lesson{grid-template-columns:1fr auto}.lesson .time{display:block}.lesson>button{grid-column:1/-1;width:100%}.lessonText b{font-size:11px}}
@media(max-width:430px){.courseCover{margin-inline:-5px}.courseMain h2{font-size:20px}.lesson>div{align-items:flex-start}.lesson{padding:13px 12px;gap:8px}.lesson .time{min-width:57px;padding-inline:6px}}
/* Homepage article slider */
.homeSlider{position:relative;height:clamp(470px,53vw,650px);max-width:calc(1400px - 68px);margin:32px auto 28px;border-radius:26px;overflow:hidden;background:var(--p);box-shadow:0 22px 60px #105f6828;scroll-margin-top:100px}.slides,.homeSlide{position:absolute;inset:0}.homeSlide{opacity:0;visibility:hidden;transform:scale(1.025);background-size:cover;background-position:center;transition:opacity .65s ease,transform 1.2s ease,visibility .65s}.homeSlide.active{opacity:1;visibility:visible;transform:scale(1)}.slideContent{position:absolute;left:clamp(32px,5vw,72px);top:50%;transform:translateY(-50%);width:min(600px,53%);color:white;z-index:2}.slideTag{display:inline-flex;align-items:center;gap:8px;background:#9ed5d125;border:1px solid #9ed5d15c;color:var(--x);padding:8px 12px;border-radius:30px;font-size:9px;font-weight:800;letter-spacing:1.3px}.slideTag:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--a);box-shadow:0 0 0 5px #63c1bb22}.slideContent h1{font-size:clamp(34px,4.2vw,62px);line-height:1.09;letter-spacing:-2px;margin:17px 0;color:white}.slideContent h1 em{font-style:normal;color:var(--l)}.slideContent>p{font-size:13px;line-height:1.75;color:#e3f4f2;max-width:540px}.slideContent>div{display:flex;align-items:center;gap:18px;margin-top:24px}.slideCta{border:0;border-radius:12px;padding:14px 20px;background:linear-gradient(135deg,var(--l),var(--a));color:var(--p);font-weight:800;box-shadow:0 10px 28px #0003}.slideCta b{margin-left:12px}.slideContent>div>span{font-size:9px;color:var(--x)}.slideArrow{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:43px;height:43px;border-radius:50%;border:1px solid #ffffff55;background:#0a4c53aa;color:white;font-size:26px;display:grid;place-items:center}.slideArrow:hover{background:var(--m)}.slideArrow.prev{left:15px}.slideArrow.next{right:15px}.slideNav{position:absolute;z-index:4;left:clamp(32px,5vw,72px);bottom:27px;display:flex;gap:8px}.slideNav button{width:40px;height:5px;padding:0;border:0;border-radius:6px;background:#ffffff50;overflow:hidden}.slideNav button i{display:block;width:0;height:100%;background:var(--l)}.slideNav button.active i{width:100%;animation:slideTimer 6s linear}.slideCount{position:absolute;z-index:4;right:28px;bottom:23px;color:white;display:flex;align-items:baseline;gap:4px}.slideCount b{font-size:20px}.slideCount span{font-size:10px;color:var(--x)}@keyframes slideTimer{from{width:0}to{width:100%}}
.articleModal{position:fixed;inset:0;z-index:120;display:none;place-items:center;padding:24px}.articleModal.open{display:grid}.articleShade{position:absolute;inset:0;background:#06272ad9;backdrop-filter:blur(9px)}.articleReader{position:relative;width:min(860px,94vw);max-height:91vh;overflow:auto;background:white;border-radius:22px;box-shadow:0 30px 100px #0007}.articleReader>img{display:block;width:100%;height:320px;object-fit:cover}.articleClose{position:absolute;right:15px;top:14px;z-index:2;width:40px;height:40px;border:0;border-radius:50%;background:#082f33c9;color:white;font-size:25px}.articleBody{padding:28px 36px 35px}.articleBody>span{font-size:9px;font-weight:800;letter-spacing:1.4px;color:var(--m)}.articleBody h2{font-size:29px;line-height:1.35;margin:8px 0}.articleMeta{font-size:9px;color:var(--muted);padding-bottom:17px;border-bottom:1px solid var(--line)}#articleContent{font-size:12px;line-height:1.85;color:#435f62}#articleContent h3{font-size:17px;color:var(--ink);margin:22px 0 5px}#articleContent ul{padding-left:18px}.articleBody>.primary{margin-top:15px}
@media(max-width:1050px){.homeSlider{margin:24px 34px}.slideContent{width:63%}.slideContent h1{font-size:45px}}
@media(max-width:760px){.homeSlider{height:570px;margin:20px 16px;border-radius:20px}.homeSlide{background-position:68% center}.homeSlide:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#073e44 0%,#073e44e8 42%,#073e4448 100%)}.slideContent{left:24px;right:24px;top:auto;bottom:60px;transform:none;width:auto}.slideContent h1{font-size:35px}.slideContent>p{font-size:11px}.slideArrow{top:37%;width:37px;height:37px}.slideNav{left:24px;bottom:24px}.slideCount{bottom:20px}.articleReader>img{height:220px}.articleBody{padding:22px}.articleBody h2{font-size:23px}}
@media(max-width:430px){.homeSlider{height:530px}.slideContent h1{font-size:30px;letter-spacing:-1px}.slideContent>div{align-items:flex-start;flex-direction:column;gap:10px;margin-top:16px}.slideContent>p{line-height:1.55}.slideArrow{top:30%}}
/* Learner-first commercial dashboard */
.learnerHub{max-width:calc(1400px - 68px);margin:0 auto 30px;padding:24px;background:white;border:1px solid var(--line);border-radius:22px;box-shadow:0 12px 38px #105f680d}.hubHeading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:19px}.hubHeading span,.hubCard>span{font-size:8px;font-weight:800;letter-spacing:1.3px;color:var(--m)}.hubHeading h2{font-size:23px;margin:5px 0 3px;letter-spacing:-.5px}.hubHeading p{font-size:9px;color:var(--muted);margin:0}.hubHeading>a{font-size:9px;font-weight:700;color:var(--p);text-decoration:none}.hubGrid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:13px}.continueCard,.hubCard{border:1px solid var(--line);border-radius:16px;background:#fbfefe;transition:.2s}.continueCard:hover,.hubCard:hover{transform:translateY(-3px);box-shadow:0 12px 26px #105f6813;border-color:var(--l)}.continueCard{display:grid;grid-template-columns:145px 1fr;gap:16px;padding:13px;background:linear-gradient(135deg,#f0faf9,#fff)}.continueVisual{position:relative;min-height:150px;border-radius:12px;background:radial-gradient(circle at 70% 30%,#9ed5d155,transparent 25%),linear-gradient(145deg,#0a4850,#15747a);display:grid;place-items:center}.continueVisual>span{width:49px;height:49px;border-radius:50%;display:grid;place-items:center;background:#ffffffeb;color:var(--p);box-shadow:0 8px 25px #0004}.continueVisual small{position:absolute;right:8px;bottom:8px;background:#001e22bb;color:white;padding:4px 6px;border-radius:5px;font-size:7px}.continueCard>div:last-child{align-self:center}.hubBadge{font-size:7px;font-weight:800;letter-spacing:1px;color:var(--m)}.continueCard h3{font-size:15px;line-height:1.4;margin:5px 0}.continueCard p{font-size:8px;color:var(--muted);margin:0}.continueProgress{display:flex;align-items:center;gap:8px;margin:11px 0}.continueProgress>i{height:5px;border-radius:5px;background:var(--x);flex:1;overflow:hidden}.continueProgress>i em{display:block;width:42%;height:100%;background:var(--a)}.continueProgress span{font-size:7px;color:var(--muted)}.continueCard button{border:0;border-radius:9px;background:var(--p);color:white;padding:9px 13px;font-size:9px;font-weight:700}.hubCard{padding:15px;display:flex;flex-direction:column;align-items:flex-start}.hubIcon{width:35px;height:35px;border-radius:10px;display:grid;place-items:center;background:var(--x);color:var(--p);font-size:17px;margin-bottom:12px}.hubCard strong{font-size:20px;margin:5px 0}.hubCard p{font-size:8px;line-height:1.5;color:var(--muted);min-height:25px;margin:0 0 10px}.progressHub>i{display:block;width:100%;height:6px;background:var(--x);border-radius:5px;overflow:hidden}.progressHub>i em{display:block;width:68%;height:100%;background:var(--a)}.hubCard a,.hubCard button{margin-top:auto;font-size:8px;font-weight:700;color:var(--p);text-decoration:none}.hubCard button{border:1px solid var(--l);background:white;border-radius:8px;padding:7px 9px}.miniDays{display:flex;gap:4px;margin-bottom:9px}.miniDays i{font-style:normal;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:var(--a);color:white;font-size:7px}.miniDays .next{background:white;color:var(--p);border:2px solid var(--m)}.miniDays i:last-child{background:#eef7f6;color:var(--muted)}.supportHub{background:linear-gradient(145deg,var(--p),#11737a);color:white;border:0}.supportHub .hubIcon{background:#ffffff1f;color:var(--l)}.supportHub>span{color:var(--l)}.supportHub p,.supportHub small{color:var(--x)}.supportHub button{color:var(--p);background:var(--l);border:0}.supportHub small{font-size:6px;margin-top:8px}
@media(max-width:1200px){.hubGrid{grid-template-columns:2fr 1fr 1fr}.supportHub{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr 1fr auto;gap:12px;align-items:center}.supportHub .hubIcon{margin:0}.supportHub>span,.supportHub>small{display:none}.supportHub strong,.supportHub p{margin:0;min-height:0}.supportHub button{margin:0}}
@media(max-width:900px){.hubGrid{grid-template-columns:1fr 1fr}.continueCard{grid-column:1/-1}.supportHub{grid-column:auto;display:flex}.supportHub>span,.supportHub>small{display:block}.supportHub strong{margin:5px 0}.supportHub p{margin-bottom:10px}.supportHub button{margin-top:auto}}
@media(max-width:760px){.learnerHub{margin:0 16px 25px;padding:17px}.hubHeading{align-items:flex-start}.hubHeading>a{display:none}.hubHeading h2{font-size:20px}.hubGrid{grid-template-columns:1fr}.continueCard{grid-column:auto;grid-template-columns:110px 1fr}.continueVisual{min-height:145px}.supportHub{display:flex}.hubCard p{min-height:0}.hubCard{min-height:170px}}
@media(max-width:430px){.continueCard{grid-template-columns:1fr}.continueVisual{min-height:120px}.hubHeading h2{font-size:18px}}
/* Account, Q&A and managed content */
.accountBtn{margin-left:auto;border:0;border-radius:11px;background:var(--p);color:white;padding:11px 15px;font-size:9px;font-weight:700;white-space:nowrap}.search+.accountBtn{margin-left:0}.adminLink{border:1px solid var(--l);border-radius:11px;padding:10px 13px;color:var(--p);font-size:9px;font-weight:700;text-decoration:none}.loginModal{position:fixed;inset:0;z-index:160;display:none;place-items:center;padding:18px}.loginModal.open{display:grid}.loginShade{position:absolute;inset:0;background:#06272adb;backdrop-filter:blur(9px)}.loginCard{position:relative;width:min(440px,94vw);background:white;border-radius:22px;padding:30px;box-shadow:0 30px 100px #0007}.loginBrand{width:55px;height:55px;border-radius:16px;background:var(--p);color:white;display:grid;place-items:center;font:700 28px Georgia}.loginCard>span{display:block;font-size:8px;letter-spacing:1.5px;color:var(--m);font-weight:800;margin-top:11px}.loginCard h2{font-size:25px;margin:6px 0}.loginCard>p{font-size:10px;line-height:1.6;color:var(--muted)}.loginCard label{display:block;font-size:9px;font-weight:700;margin-top:12px}.loginCard input{display:block;width:100%;border:1px solid var(--line);border-radius:10px;padding:11px;margin-top:5px;outline-color:var(--a)}.loginCard>.primary{width:100%;margin-top:18px}.loginCard>small{display:block;text-align:center;font-size:7px;color:var(--muted);margin-top:10px}.loginClose{position:absolute;right:15px;top:13px;border:0;background:#f0f7f6;width:34px;height:34px;border-radius:50%;font-size:20px}.qaPanel{margin-top:23px;border-top:1px solid var(--line);padding-top:20px}.qaHeading{display:flex;justify-content:space-between;align-items:end}.qaHeading span{font-size:8px;color:var(--m);font-weight:800;letter-spacing:1.2px}.qaHeading h3{font-size:18px;margin:4px 0}.qaHeading>b{font-size:8px;color:var(--muted)}#qaList{display:flex;flex-direction:column;gap:9px;max-height:210px;overflow:auto;margin:13px 0}.qaItem{display:flex;gap:9px;padding:10px;border-radius:11px;background:#f4fafa}.qaItem>i,.qaAvatar{width:30px;height:30px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:var(--x);color:var(--p);font-style:normal;font-size:8px;font-weight:800}.qaItem b,.qaItem p,.qaItem small{display:block;margin:0}.qaItem b{font-size:9px}.qaItem p{font-size:9px;line-height:1.5;margin:3px 0}.qaItem small{font-size:7px;color:var(--muted)}#qaForm{display:grid;grid-template-columns:32px 1fr auto;gap:9px;align-items:start}#qaForm textarea{height:65px;resize:none;border:1px solid var(--line);border-radius:10px;padding:10px;font-size:9px}#qaForm button{border:0;border-radius:9px;background:var(--p);color:white;padding:10px;font-size:8px;font-weight:700}.qaPanel>small{display:block;font-size:7px;color:var(--muted);margin:8px 0 0 41px}.published{max-width:calc(1400px - 68px);margin:0 auto 30px;padding:22px;background:white;border:1px solid var(--line);border-radius:22px;box-shadow:0 10px 34px #105f680e}.published .title>span{font-size:8px}.publishedGrid,#publishedGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.managedCard{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}.managedThumb{height:120px;background:linear-gradient(135deg,var(--p),var(--m));display:grid;place-items:center;color:white;font-size:30px}.managedCard>div:last-child{padding:12px}.managedCard span{font-size:7px;color:var(--m);font-weight:800}.managedCard h3{font-size:12px;line-height:1.4;margin:5px 0}.managedCard p{font-size:8px;color:var(--muted)}.managedCard button{border:0;background:none;color:var(--p);font-size:8px;font-weight:800;padding:0}.publishedEmpty{grid-column:1/-1;text-align:center;padding:30px;border:1px dashed var(--l);border-radius:13px;color:var(--muted);font-size:9px}
@media(max-width:760px){.accountBtn{margin-left:auto}.adminLink{display:none}.search{order:4;width:100%}.published{max-width:calc(100% - 32px);padding:16px}.publishedGrid,#publishedGrid{grid-template-columns:1fr}.qaHeading{align-items:flex-start}.qaHeading>b{display:none}#qaForm{grid-template-columns:1fr}.qaAvatar{display:none}#qaForm button{width:100%}.qaPanel>small{margin-left:0}.modal>article{max-height:95vh;overflow:auto}.frame{position:sticky;top:0;z-index:1}}
/* Admin page */
.adminPage{background:#f4f8f7}.adminSide{position:fixed;inset:0 auto 0 0;width:240px;padding:28px 18px;background:linear-gradient(180deg,#0d5962,#084b53);color:white;display:flex;flex-direction:column}.adminSide .brand{margin-left:8px}.adminSide nav{display:flex;flex-direction:column;gap:6px}.adminSide nav button{border:0;background:none;color:#dff5f3;text-align:left;padding:12px 14px;border-radius:10px;font-size:11px}.adminSide nav button.active,.adminSide nav button:hover{background:#63c1bb55;color:white}.adminSide>a:last-child{margin-top:auto;color:var(--x);font-size:9px;text-decoration:none;padding:12px}.adminMain{margin-left:240px;padding:30px;max-width:1500px}.adminMain>header{position:static;background:none;padding:0;min-height:auto;border:0;display:flex;justify-content:space-between}.adminMain>header span,.adminTitle span{font-size:8px;color:var(--m);font-weight:800;letter-spacing:1.4px}.adminMain>header h1{font-size:28px;margin:5px 0}.adminMain>header button{border:0;border-radius:11px;background:var(--p);color:white;padding:12px 16px;font-size:10px;font-weight:700}.adminStats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:26px 0}.adminStats article{display:flex;gap:13px;background:white;border:1px solid var(--line);border-radius:14px;padding:17px}.adminStats article>span{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--x);color:var(--p)}.adminStats small,.adminStats b,.adminStats em{display:block}.adminStats small{font-size:8px;color:var(--muted)}.adminStats b{font-size:22px;margin:3px 0}.adminStats em{font-style:normal;font-size:7px;color:var(--m)}.adminWorkspace{background:white;border:1px solid var(--line);border-radius:18px;padding:22px}.adminTitle{display:flex;justify-content:space-between;align-items:end;margin-bottom:17px}.adminTitle h2{margin:4px 0;font-size:22px}.adminTitle input{border:1px solid var(--line);border-radius:10px;padding:10px;width:230px}.adminTable{overflow:auto}.adminRow{min-width:800px;display:grid;grid-template-columns:2fr .7fr .7fr .7fr .7fr;gap:12px;align-items:center;padding:13px;border-bottom:1px solid var(--line);font-size:9px}.adminHead{background:#f2f9f8;border-radius:10px;font-size:8px;font-weight:800;color:var(--muted)}.adminRow b,.adminRow small{display:block}.adminRow small{font-size:7px;color:var(--muted);margin-top:4px}.adminRow span:nth-child(2){display:flex;gap:5px;align-items:center}.adminRow i{font-style:normal}.adminRow em{font-style:normal;font-size:7px;padding:5px 8px;border-radius:20px}.adminRow em.published{background:#daf2e6;color:#277758}.adminRow em.draft{background:#edf1f1;color:#697a7b}.adminRow button{border:1px solid var(--line);background:white;border-radius:7px;padding:6px 8px;font-size:8px}.adminRow .danger{color:#a44141}.adminEmpty{text-align:center;padding:35px;color:var(--muted);font-size:10px}.contentEditor{position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:20px}.contentEditor.open{display:grid}.editorShade{position:absolute;inset:0;background:#06272ad8;backdrop-filter:blur(8px)}#contentForm{position:relative;background:white;width:min(680px,95vw);max-height:94vh;overflow:auto;border-radius:20px;padding:26px}#contentForm>button:first-child{position:absolute;right:13px;top:12px;border:0;background:#edf6f5;width:35px;height:35px;border-radius:50%;font-size:20px}#contentForm>span{font-size:8px;color:var(--m);font-weight:800}#contentForm h2{margin:5px 0 17px}#contentForm label{font-size:8px;font-weight:700;display:block;margin-top:11px}#contentForm input,#contentForm select,#contentForm textarea{display:block;width:100%;border:1px solid var(--line);border-radius:9px;padding:10px;margin-top:5px}#contentForm textarea{height:70px;resize:vertical}#contentForm textarea.large{height:120px}.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}#contentForm footer{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}#contentForm footer button{border:1px solid var(--line);background:white;border-radius:9px;padding:10px 14px;font-size:9px}#contentForm footer .primary{background:var(--p);color:white}
@media(max-width:900px){.adminStats{grid-template-columns:1fr 1fr}.adminSide{width:76px;padding-inline:10px}.adminSide .brand b,.adminSide nav button{font-size:0}.adminSide .brand{margin:0}.adminSide .brand i{width:48px}.adminSide nav button:first-letter{font-size:18px}.adminMain{margin-left:76px;padding:20px}}
@media(max-width:600px){.adminMain{padding:14px}.adminMain>header h1{font-size:21px}.adminMain>header button{padding:9px;font-size:8px}.adminStats{grid-template-columns:1fr}.adminTitle{align-items:flex-start;flex-direction:column}.adminTitle input{width:100%;margin-top:10px}.formGrid{grid-template-columns:1fr}}
/* Commercial course switcher */
.tabs{background:#edf7f6;padding:5px;border-radius:16px}.tab{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 18px}.tab>i{width:30px;height:30px;border-radius:9px;background:var(--x);color:var(--p);display:grid;place-items:center;font-style:normal}.tab>span{font-size:10px}.tab small{display:block;font-size:6px;letter-spacing:1px;color:var(--m);margin-bottom:2px}.tab.active>i{background:#ffffff24;color:var(--l)}.tab.active small{color:var(--l)}
@media(max-width:760px){.tabs{padding:4px}.tab{padding:8px;gap:6px}.tab>i{width:26px;height:26px}.tab>span{font-size:8px}.tab small{font-size:5px}}
/* Rich visual identity and section imagery */
:root{--coral:#ef846f;--gold:#e7b84f;--violet:#8776c9;--sky:#5aa9c9}.courseCover{grid-template-columns:190px 1fr 210px;padding:18px}.courseImage{position:relative;min-height:190px;border-radius:15px;background-size:cover;background-position:center;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff38}.courseImage:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#063d43aa,transparent 62%)}.courseImage>i{position:absolute;z-index:2;left:13px;bottom:13px;width:39px;height:39px;border-radius:11px;background:var(--l);color:var(--p);display:grid;place-items:center;font-style:normal;font-size:20px;box-shadow:0 8px 20px #0004}.courseMain{align-self:center}.courseAction{align-self:center}.title p>b,.hubHeading h2,.notes h2{background:linear-gradient(100deg,var(--p),var(--m) 70%,var(--a));-webkit-background-clip:text;background-clip:text;color:transparent}.title p>b:after{content:"";display:block;width:42px;height:3px;border-radius:4px;background:linear-gradient(90deg,var(--a),var(--gold));margin-top:7px}.module:nth-child(3n+1){--chapterColor:var(--a);--chapterBg:#e3f6f4}.module:nth-child(3n+2){--chapterColor:var(--violet);--chapterBg:#efecfa}.module:nth-child(3n){--chapterColor:var(--coral);--chapterBg:#fff0ec}.chapterLabel{background:var(--chapterBg);color:var(--chapterColor);display:flex;flex-direction:column;gap:3px}.chapterLabel:before{font-size:15px}.module:nth-child(3n+1) .chapterLabel:before{content:"◈"}.module:nth-child(3n+2) .chapterLabel:before{content:"✦"}.module:nth-child(3n) .chapterLabel:before{content:"↗"}.module.open .chapterLabel{background:var(--chapterBg);color:var(--chapterColor)}.lesson:hover{background:#f6fbfa}.lesson:hover .state{transform:scale(1.08)}.state{transition:.2s}.hubIcon{background:linear-gradient(145deg,var(--x),#fff);box-shadow:0 7px 18px #105f6815}.progressHub .hubIcon{color:var(--violet);background:#efecfa}.scheduleHub .hubIcon{color:var(--coral);background:#fff0ec}.continueVisual{background-image:linear-gradient(0deg,#063d43a6,#063d4322),url("assets/slide-business.png");background-size:cover;background-position:63% center}.thumb{background-size:cover;background-position:center}.videoCard:nth-child(3n+1) .thumb{background-image:linear-gradient(0deg,#063d4380,#063d4315),url("assets/slide-business.png")}.videoCard:nth-child(3n+2) .thumb{background-image:linear-gradient(0deg,#063d4380,#063d4315),url("assets/slide-content.png")}.videoCard:nth-child(3n) .thumb{background-image:linear-gradient(0deg,#063d4380,#063d4315),url("assets/slide-growth.png")}.videoCard .thumb:before{display:none}.videoCard .play{transition:.25s}.videoCard:hover .play{transform:translate(-50%,-50%) scale(1.1);background:var(--a);color:var(--p)}.notes{position:relative;overflow:hidden;background:linear-gradient(90deg,#f3fbfaf2 0%,#fffffff7 60%),url("assets/slide-growth.png");background-size:cover;background-position:right center}.notes:before{content:"✎";position:absolute;right:26px;top:20px;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#ffffffd9;color:var(--m);font-size:20px;box-shadow:0 8px 22px #105f6818}.notes>div{position:relative;z-index:1}.achievement-grid article:nth-child(1){background:linear-gradient(135deg,#fff8e7,#fff)}.achievement-grid article:nth-child(2){background:linear-gradient(135deg,#e7f8f6,#fff)}.achievement-grid article:nth-child(3){background:linear-gradient(135deg,#efecfa,#fff)}.achievement-grid article>span{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:white;box-shadow:0 7px 18px #105f6812}.managedCard:nth-child(3n+1) .managedThumb{background-image:linear-gradient(0deg,#063d4375,#063d4320),url("assets/slide-business.png");background-size:cover}.managedCard:nth-child(3n+2) .managedThumb{background-image:linear-gradient(0deg,#063d4375,#063d4320),url("assets/slide-content.png");background-size:cover}.managedCard:nth-child(3n) .managedThumb{background-image:linear-gradient(0deg,#063d4375,#063d4320),url("assets/slide-growth.png");background-size:cover}.side-nav a:nth-child(1) span{color:var(--gold)}.side-nav a:nth-child(2) span{color:var(--a)}.side-nav a:nth-child(3) span{color:var(--coral)}.side-nav a:nth-child(4) span{color:var(--sky)}.side-nav a:nth-child(5) span{color:#c3a7ee}.primary,.accent-button,.slideCta{background-size:200% 100%;transition:transform .2s,box-shadow .2s,background-position .35s}.primary:hover,.accent-button:hover,.slideCta:hover{background-position:100% 0;transform:translateY(-2px)}.curriculum-panel,.videos,.published,.notes,.awards,.learnerHub{transition:box-shadow .25s}.curriculum-panel:hover,.videos:hover,.published:hover,.notes:hover,.awards:hover,.learnerHub:hover{box-shadow:0 18px 48px #105f6814}
@media(max-width:1150px){.courseCover{grid-template-columns:150px 1fr}.courseAction{grid-column:1/-1}.courseImage{min-height:160px}}
@media(max-width:760px){.courseCover{grid-template-columns:1fr}.courseImage{min-height:210px}.courseAction{grid-column:auto}.title p>b:after{margin-top:5px}.notes{background-position:70% center}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
#side nav a:nth-child(1){--navAccent:var(--gold)}#side nav a:nth-child(2){--navAccent:var(--a)}#side nav a:nth-child(3){--navAccent:var(--coral)}#side nav a:nth-child(4){--navAccent:var(--sky)}#side nav a:nth-child(5){--navAccent:#c3a7ee}#side nav a:first-letter{color:var(--navAccent)}.title label:before{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--a);margin-right:7px;box-shadow:10px 0 0 #9ed5d188}.videos .title label:before{background:var(--coral)}.published .title label:before{background:var(--violet)}.awards .title label:before{background:var(--gold)}.awards article:nth-child(1){background:linear-gradient(135deg,#fff8e7,#fff)}.awards article:nth-child(2){background:linear-gradient(135deg,#e7f8f6,#fff)}.awards article:nth-child(3){background:linear-gradient(135deg,#efecfa,#fff)}.awards article>span{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:white;box-shadow:0 7px 18px #105f6812}/* Premium commercial icon and motion system */
#side nav a{font-size:0;position:relative;overflow:visible}#side nav a span{font-size:11px;font-weight:600}#side nav a:before{content:"";width:35px;height:35px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;font-size:17px;font-weight:700;background:linear-gradient(145deg,#ffffff26,#ffffff09);border:1px solid #ffffff20;box-shadow:inset 0 1px #ffffff35,0 8px 18px #002d3340;transition:.28s}#side nav a:nth-child(1):before{content:"⌂";color:var(--gold)}#side nav a:nth-child(2):before{content:"◇";color:var(--a)}#side nav a:nth-child(3):before{content:"▶";color:var(--coral);font-size:12px}#side nav a:nth-child(4):before{content:"✎";color:var(--sky)}#side nav a:nth-child(5):before{content:"★";color:#c3a7ee}#side nav a:hover:before,#side nav a.active:before{transform:translateY(-2px) scale(1.07);background:linear-gradient(145deg,#ffffff3d,#63c1bb25);box-shadow:inset 0 1px #ffffff55,0 11px 24px #002d3358}.tab i,.hubIcon,.courseImage>i,.achievement-grid article>span,.awards article>span{box-shadow:inset 0 1px #ffffffaa,0 8px 20px #105f6818;transition:transform .3s,box-shadow .3s}.tab:hover i,.hubCard:hover .hubIcon,.courseCover:hover .courseImage>i,.awards article:hover>span{transform:translateY(-3px) rotate(-3deg) scale(1.06);box-shadow:inset 0 1px #fff,0 13px 28px #105f6828}.siteProgressVisual{position:fixed;z-index:250;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--gold),var(--a),var(--violet));background-size:200% 100%;animation:progressShine 3s linear infinite;box-shadow:0 0 12px var(--a);transform-origin:left}.hubCard,.continueCard,.videoCard,.managedCard,.module,.courseCover{transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s,border-color .32s}.hubCard:hover,.continueCard:hover,.videoCard:hover,.managedCard:hover{transform:translateY(-7px);box-shadow:0 20px 42px #105f6826;border-color:var(--l)}.module:hover{transform:translateX(5px);box-shadow:0 14px 34px #105f681b}.courseCover:before{content:"";position:absolute;z-index:0;inset:-80% -20%;background:linear-gradient(115deg,transparent 42%,#ffffff16 49%,transparent 56%);transform:translateX(-60%);transition:transform 1s}.courseCover:hover:before{transform:translateX(60%)}.courseCover>*{position:relative;z-index:1}.courseImage{transition:transform .75s cubic-bezier(.2,.8,.2,1),filter .4s}.courseCover:hover .courseImage{transform:scale(1.035);filter:saturate(1.08)}.play,.bigPlay{animation:softPulse 2.4s ease-out infinite}.title p>b:after{animation:accentFlow 3s ease-in-out infinite}.brand i{animation:brandGlow 3.2s ease-in-out infinite}.primary,.accent-button,.slideCta,.lesson>button{background-size:200% 100%;transition:transform .22s,box-shadow .22s,background-position .4s}.primary:hover,.accent-button:hover,.slideCta:hover,.lesson>button:hover{transform:translateY(-3px);box-shadow:0 12px 28px #105f6830;background-position:100% 0}.homeSlide.active .slideTag{animation:tagIn .5s both}.homeSlide.active .slideContent h1{animation:textRise .7s .08s both}.homeSlide.active .slideContent>p{animation:textRise .7s .16s both}.homeSlide.active .slideContent>div{animation:textRise .7s .24s both}.chapterLabel:before{animation:iconFloat 3s ease-in-out infinite}.notes:before{animation:iconFloat 3.2s ease-in-out infinite}.adminStats article:hover>span{transform:rotate(-4deg) scale(1.08)}.adminStats article>span{transition:.3s}
@keyframes progressShine{to{background-position:200% 0}}@keyframes softPulse{0%{box-shadow:0 0 0 0 #9ed5d155}70%{box-shadow:0 0 0 13px #9ed5d100}100%{box-shadow:0 0 0 0 #9ed5d100}}@keyframes accentFlow{0%,100%{width:38px}50%{width:74px}}@keyframes brandGlow{0%,100%{box-shadow:inset 0 0 0 4px #ffffff0c,0 0 0 0 #9ed5d100}50%{box-shadow:inset 0 0 0 4px #ffffff18,0 0 0 10px #9ed5d10e}}@keyframes textRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes tagIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}@keyframes iconFloat{50%{transform:translateY(-4px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}.hubCard:hover,.continueCard:hover,.videoCard:hover,.managedCard:hover,.module:hover{transform:none}}

/* Desktop readability scale */
@media(min-width:761px){
body{font-size:16px;line-height:1.55}
#side nav a span,#side nav a b{font-size:13px}.profile b{font-size:14px}.profile small,.overall small,.help small,.brand small{font-size:10px}.overall>p>b{font-size:15px}
.tab>span{font-size:13px}.tab small{font-size:8px}.search input{font-size:13px}.accountBtn,.adminLink{font-size:11px}
.slideTag{font-size:11px}.slideContent>p{font-size:16px;line-height:1.7}.slideContent>div>span{font-size:12px}.slideCta{font-size:14px}
.hubHeading span,.hubCard>span{font-size:10px}.hubHeading h2{font-size:27px}.hubHeading p,.hubHeading>a{font-size:12px}.hubBadge{font-size:9px}.continueCard h3{font-size:18px}.continueCard p{font-size:12px}.continueProgress span{font-size:10px}.continueCard button{font-size:12px}.hubCard strong{font-size:24px}.hubCard p{font-size:12px;line-height:1.55}.hubCard a,.hubCard button{font-size:11px}.supportHub small{font-size:9px}
.title p>b{font-size:30px}.title label,.hero label,.notes label,.now>label{font-size:11px}.title>span,.courseSummary,.course-summary{font-size:12px}
.courseMain h2{font-size:31px}.courseMain h3{font-size:16px}.courseMain>p{font-size:13px;line-height:1.7}.commercialBadge{font-size:10px}.courseFacts b{font-size:14px}.courseFacts small{font-size:10px}.courseAction>span,.courseAction>small{font-size:10px}.courseAction>b{font-size:25px}.courseAction button{font-size:12px}
.chapterLabel{font-size:11px}.modTitle b{font-size:16px}.modTitle small{font-size:11px;line-height:1.45}.chapterMeta b{font-size:11px}.chapterMeta small{font-size:9px}.lessonText small{font-size:9px}.lessonText b{font-size:14px;line-height:1.45}.lessonText em{font-size:10px}.lesson .time b{font-size:12px}.lesson .time small{font-size:9px}.lesson>button{font-size:11px}.state{font-size:10px}
.now>span{font-size:12px}.now h2{font-size:24px}.instructor b{font-size:14px}.instructor small{font-size:10px}.now>button{font-size:13px}.streak small{font-size:10px}.streak b{font-size:14px}
.videoBody h3{font-size:16px;line-height:1.5}.tag,.videoBody footer label,.videoBody footer button{font-size:10px}.published .title>span{font-size:11px}.managedCard span{font-size:9px}.managedCard h3{font-size:15px}.managedCard p,.managedCard button{font-size:11px;line-height:1.55}
.notes h2{font-size:28px}.notes p{font-size:14px;line-height:1.7}.notes textarea{font-size:13px}.notes footer small{font-size:10px}.notes .primary{font-size:12px}
.awards article b{font-size:14px}.awards article small{font-size:11px}.pageFoot{font-size:11px}
.modal article>section label{font-size:11px}.modal article>section h2{font-size:26px}.modal article>section>p{font-size:14px;line-height:1.65}.modal section footer{font-size:12px}.qaHeading span{font-size:10px}.qaHeading h3{font-size:20px}.qaHeading>b{font-size:10px}.qaItem b,.qaItem p{font-size:12px}.qaItem small{font-size:9px}#qaForm textarea,#qaForm button{font-size:11px}.qaPanel>small{font-size:9px}
.loginCard>span{font-size:10px}.loginCard>p{font-size:13px}.loginCard label{font-size:11px}.loginCard input{font-size:13px}
.adminSide nav button{font-size:12px}.adminMain>header span,.adminTitle span{font-size:10px}.adminStats small{font-size:10px}.adminStats em{font-size:9px}.adminRow{font-size:11px}.adminRow small{font-size:9px}.adminRow em,.adminRow button{font-size:10px}
}
@media(min-width:1280px){.main-content,.app>main{font-size:17px}.homeSlider{height:min(650px,52vw)}}

/* Commercial typography color hierarchy */
:root{--text-strong:#103f44;--text-primary:#23484c;--text-body:#3f6063;--text-muted:#6b8082;--text-soft:#87999a;--action:#16727a;--action-hover:#0d5b63;--coral-text:#a64f43;--violet-text:#6252a0;--gold-text:#755800}
body{color:var(--text-primary)}h1,h2,h3,h4,strong,b{color:var(--text-strong)}p,li,textarea,input{color:var(--text-body)}small,.time,.courseSummary,.course-summary{color:var(--text-muted)}
.title p>b,.hubHeading h2,.notes h2{background:none!important;-webkit-background-clip:initial;background-clip:initial;color:var(--text-strong)!important;-webkit-text-fill-color:var(--text-strong)}.title label,.hero label,.hubHeading span,.commercialBadge,.hubBadge,.courseMain h3{color:var(--action)}.title label{font-weight:800}.title p>b:after{background:linear-gradient(90deg,var(--action),var(--a))}
.videos .title label,.videoBody footer label,.videoBody .tag{color:var(--coral-text)}.published .title label,.managedCard span{color:var(--violet-text)}.awards .title label{color:var(--gold-text)}.notes label{color:var(--action)}.eyebrow{color:var(--action)}
.heroText>p,.hubHeading p,.continueCard p,.hubCard p,.courseMain>p,.modTitle small,.lessonText em,.managedCard p,.notes p{color:var(--text-body)}.slideContent h1,.slideContent h1 em,.slideContent>p{color:#fff}.slideContent h1 em{color:#bce8e4}.slideTag,.slideContent>div>span{color:#d8f2ef}
#side,.sidebar{color:#fff}#side b,#side strong,.sidebar b,.sidebar strong{color:#fff}#side small,.sidebar small{color:#cce9e6}#side nav a,#side nav a b{color:#eaf7f5}#side nav a.active,#side nav a.active b{color:#fff}
.tab{color:var(--text-strong)}.tab small{color:var(--action)}.tab.active,.tab.active span{color:#fff}.tab.active small{color:#bce8e4}.search input{color:var(--text-primary)}.search input::placeholder{color:#8ba0a1}
.courseCover,.courseCover h2,.courseCover h3,.courseCover p,.courseCover b{color:#fff}.courseCover h3,.courseCover p,.courseFacts small,.courseAction span,.courseAction small{color:#d7efed}.commercialBadge{color:#0b5860}.courseAction button{color:#0d5158}
.module:not(.open) .modTitle b,.lessonText b{color:var(--text-strong)}.module:not(.open) .modTitle small{color:var(--text-muted)}.module.open .modTitle b,.module.open .chapterMeta b{color:#fff}.module.open .modTitle small,.module.open .chapterMeta small{color:#cce8e5}.lessonText small{color:var(--action)}.lesson .time b{color:var(--action)}.lesson>button{color:#fff}
.now,.learning-panel,.now h2,.learning-panel h3,.now b,.learning-panel b{color:#fff}.now small,.learning-panel small{color:#d1ebe8}.week-card,.week-card b,.week-card strong{color:var(--text-strong)}.week-card small,.week-card span{color:var(--text-muted)}
.category-tag,.tag{background:#e6f4f2;color:var(--action)}.watch-button,.managedCard button,.text-link,.hubCard a{color:var(--action)}.watch-button:hover,.managedCard button:hover,.text-link:hover,.hubCard a:hover{color:var(--action-hover)}
.qaHeading h3,.qaItem b,.articleBody h2,.loginCard h2{color:var(--text-strong)}.qaItem p,#articleContent,.loginCard>p{color:var(--text-body)}.qaItem small,.articleMeta,.qaPanel>small{color:var(--text-muted)}
.primary,.accent-button,.slideCta,.accountBtn{color:#fff}.supportHub,.supportHub strong,.supportHub b{color:#fff}.supportHub p,.supportHub small{color:#d7efed}.supportHub button{color:#0d5158}
.awards article b{color:var(--text-strong)}.awards article small{color:var(--text-muted)}.pageFoot,footer{color:var(--text-muted)}
.adminMain h1,.adminTitle h2,.adminRow b{color:var(--text-strong)}.adminStats b{color:var(--action)}.adminStats small,.adminRow small{color:var(--text-muted)}.adminSide,.adminSide b{color:#fff}
@media(max-width:760px){.title p>b,.hubHeading h2,.notes h2{color:var(--text-strong)!important}}

/* Emergency layout fix */
.notificationBtn{position:relative;flex:0 0 auto;border:0;width:40px;height:40px;border-radius:11px;background:#edf7f6;color:#105f68;font-size:18px}.notificationBtn i{position:absolute;right:-3px;top:-4px;width:18px;height:18px;border-radius:50%;background:#ef846f;color:#fff;font:8px Arial;display:grid;place-items:center}.notificationPanel{display:none!important;position:fixed;z-index:100;right:28px;top:76px;width:330px;padding:14px;background:#fff;border:1px solid #dceceb;border-radius:15px;box-shadow:0 18px 50px #105f6830}.notificationPanel.open{display:block!important}.notificationPanel>div{display:flex;justify-content:space-between;align-items:center;padding:5px}.notificationPanel>div button{border:0;background:none;color:#3a9295;font-size:10px}.notificationPanel article{display:flex;gap:10px;padding:11px;border-top:1px solid #dceceb}.notificationPanel article>i{font-style:normal;width:30px;height:30px;border-radius:9px;background:#c8e6e2;display:grid;place-items:center;color:#105f68}.notificationPanel p{margin:0}.notificationPanel b,.notificationPanel span{display:block}.notificationPanel b{font-size:12px}.notificationPanel span{font-size:10px;color:#6b8082;margin-top:2px}.lessonCommerce{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-block:1px solid #dceceb;margin:15px 0}.authorBlock{display:flex;align-items:center;gap:10px}.authorPhoto{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#105f68;color:#fff;font-weight:800}.authorBlock small,.authorBlock b,.authorBlock span{display:block}.authorBlock small{font-size:9px;color:#3a9295}.authorBlock span{font-size:10px;color:#6b8082}.lessonActions{position:relative;display:flex;gap:7px}.lessonActions>button{border:1px solid #dceceb;background:#fff;border-radius:8px;padding:8px 10px}.shareMenu{display:none;position:absolute;right:0;top:40px;z-index:10;width:160px;padding:7px;background:#fff;border:1px solid #dceceb;border-radius:10px;box-shadow:0 12px 30px #105f6828}.shareMenu.open{display:grid;gap:5px}.shareMenu button{border:0;background:#f4fafa;padding:8px;text-align:left}.learningTools{max-width:calc(1400px - 68px);margin:0 auto 30px;padding:22px;background:#fff;border:1px solid #dceceb;border-radius:22px}.toolGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.toolCard{padding:16px;border:1px solid #dceceb;border-radius:14px;background:#fbfefe}.toolCard>i{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:#c8e6e2;color:#105f68;font-style:normal}.toolCard>span{display:block;font-size:9px;color:#3a9295;font-weight:800;margin-top:10px}.toolCard h3{font-size:16px}.toolCard p{font-size:11px;color:#6b8082}.toolCard button{border:0;background:none;color:#105f68;font-weight:800}.quizModal,.certificateModal{display:none;position:fixed;inset:0;z-index:210;place-items:center}.quizModal.open,.certificateModal.open{display:grid}.quizShade{position:absolute;inset:0;background:#06272add}.quizCard,.certificate{position:relative;width:min(600px,94vw);background:#fff;border-radius:20px;padding:26px}.videoFallback{min-height:360px;display:grid;place-content:center;text-align:center;background:linear-gradient(135deg,#105f68,#06383e);color:#fff;padding:30px}.videoFallback h3{color:#fff}.videoFallback p{color:#c8e6e2}.videoFallback a{display:inline-block;margin:auto;padding:11px 16px;border-radius:9px;background:#63c1bb;color:#105f68;text-decoration:none;font-weight:800}@media(max-width:900px){.toolGrid{grid-template-columns:1fr 1fr}}@media(max-width:760px){.notificationPanel{left:16px;right:16px;width:auto}.toolGrid{grid-template-columns:1fr}.lessonCommerce{align-items:flex-start;flex-direction:column}.learningTools{max-width:calc(100% - 32px)}}
/* Functional controls polish */
.notificationBtn svg,.lessonActions svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.notificationBtn{display:grid;place-items:center}.lessonActions>button{display:flex;align-items:center;gap:7px;font-weight:700}.lessonActions>button.active{background:#fff0f1;color:#b34452;border-color:#efb7bd}.lessonActions>button.active svg{fill:#d95968;stroke:#d95968}.shareMenu button{font-weight:600}.shareMenu button:nth-child(1){color:#1877f2}.shareMenu button:nth-child(2){color:#168d45}.shareMenu button:nth-child(3){color:#c64235}.frame iframe:not([hidden]){display:block!important;width:100%;height:100%;min-height:480px;border:0;background:#111}.frame:has(iframe:not([hidden])) .videoFallback{display:none!important}@media(max-width:760px){.frame iframe:not([hidden]){min-height:260px}.lessonActions{width:100%}.lessonActions>button{flex:1;justify-content:center}}
/* Professional author and Q&A redesign */
.authorPhoto{overflow:hidden;background:#e5f3f1}.authorPhoto img{width:100%;height:100%;object-fit:cover;object-position:68% 25%;transform:scale(1.35)}.authorBlock{padding:3px}.authorBlock b{font-size:14px}.authorBlock span{font-size:10px}.qaPanel{background:#f9fcfc;border:1px solid #e0eeee;border-radius:16px;padding:20px;margin-top:22px}.qaHeading{padding-bottom:13px;border-bottom:1px solid #dceceb}.qaHeading h3{margin-bottom:0}.qaHeading>b{padding:6px 9px;border-radius:20px;background:#e5f3f1;color:#105f68}.qaEmpty{display:grid;place-items:center;text-align:center;padding:27px;border:1px dashed #9ed5d1;border-radius:13px;color:#6b8082}.qaEmpty i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#c8e6e2;color:#105f68;font-style:normal;font-weight:800}.qaEmpty b{color:#23484c;margin-top:8px}.qaEmpty p{font-size:10px;margin:3px}.commentCard{display:flex;gap:11px;padding:14px;background:#fff;border:1px solid #dceceb;border-radius:13px}.commentAvatar{width:38px;height:38px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#c8e6e2,#63c1bb);color:#105f68;font-size:10px;font-weight:800}.commentBody{flex:1;min-width:0}.commentTop{display:flex;justify-content:space-between;gap:10px}.commentTop b{font-size:12px}.commentTop time,.instructorReply time{font-size:8px;color:#87999a}.commentBody>p{font-size:11px;line-height:1.6;margin:5px 0}.commentActions{display:flex;gap:7px}.commentActions button{border:0;background:none;color:#3a9295;font-size:9px;padding:3px}.instructorReply{display:flex;gap:9px;margin-top:11px;padding:12px;border-radius:11px;background:linear-gradient(135deg,#edf8f6,#fff);border-left:3px solid #63c1bb}.instructorAvatar{width:34px;height:34px;flex:0 0 auto;border-radius:50%;overflow:hidden}.instructorAvatar img{width:100%;height:100%;object-fit:cover;object-position:68% 25%;transform:scale(1.35)}.instructorReply span,.instructorReply b,.instructorReply p,.instructorReply time{display:block}.instructorReply span{font-size:7px;color:#3a9295;font-weight:800}.instructorReply b{font-size:10px}.instructorReply b i{font-style:normal;color:#fff;background:#3a9295;border-radius:50%;padding:1px 3px}.instructorReply p{font-size:10px;line-height:1.55;margin:4px 0}.qaPanel #qaForm{margin-top:13px;padding:11px;background:#fff;border:1px solid #dceceb;border-radius:12px}.qaPanel #qaInput{border:0;outline:0;background:transparent;font-size:11px}.qaPanel #qaForm button{padding:11px 14px}.videoFallback{background-image:linear-gradient(90deg,#06383ee8,#06383e99),url("assets/slide-business.png");background-size:cover;background-position:center}.videoFallbackIcon{background:#ffffffed!important;box-shadow:0 0 0 12px #ffffff16,0 15px 35px #0004}.modal>article{width:min(980px,96vw)}@media(max-width:760px){.qaPanel{padding:14px}.commentTop{flex-direction:column;gap:2px}.instructorReply{align-items:flex-start}.qaPanel #qaForm{display:grid}.modal>article{width:98vw}}
/* Membership registration and customer database */
.memberButton{display:flex;align-items:center;gap:6px;border:1px solid #9ed5d1;background:linear-gradient(135deg,#f0faf9,#fff);color:#105f68;border-radius:11px;padding:10px 13px;font-size:10px;font-weight:800;white-space:nowrap}.memberButton span{color:#e7b84f;font-size:15px}.memberButton:hover{transform:translateY(-2px);box-shadow:0 9px 22px #105f6818}.memberModal{display:none;position:fixed;inset:0;z-index:240;place-items:center;padding:20px}.memberModal.open{display:grid}.memberShade{position:absolute;inset:0;background:#06272ae5;backdrop-filter:blur(9px)}.memberCard{position:relative;width:min(920px,96vw);max-height:94vh;overflow:auto;background:#fff;border-radius:24px;box-shadow:0 35px 110px #0007}.memberClose{position:absolute;z-index:2;right:15px;top:13px;width:38px;height:38px;border:0;border-radius:50%;background:#ffffff25;color:#fff;font-size:23px}.memberHeader{padding:25px 35px 22px;text-align:center;color:#fff;background:radial-gradient(circle at 80% 10%,#63c1bb55,transparent 25%),linear-gradient(135deg,#0d5962,#073e45)}.memberLogo{margin:auto;width:50px;height:50px;border-radius:15px;display:grid;place-items:center;border:2px solid #9ed5d1;font:700 27px Georgia}.memberHeader>span{display:block;font-size:8px;letter-spacing:1.6px;color:#9ed5d1;margin-top:10px}.memberHeader h2{color:#fff;font-size:26px;margin:5px}.memberHeader p{color:#c8e6e2;font-size:11px}.memberSteps{display:flex;justify-content:center;align-items:center;margin-top:18px}.memberSteps i{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#ffffff20;border:1px solid #ffffff30;color:#c8e6e2;font-style:normal;font-size:10px;position:relative}.memberSteps i.active{background:#63c1bb;color:#073e45}.memberSteps i small{position:absolute;top:34px;white-space:nowrap;font-size:7px;color:#c8e6e2}.memberSteps em{width:100px;height:1px;background:#ffffff30}.memberStep{display:none;padding:32px 36px}.memberStep.active{display:block}.planGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.plan{position:relative;display:flex;flex-direction:column;padding:19px;border:1px solid #dceceb;border-radius:16px;cursor:pointer;transition:.25s}.plan:has(input:checked){border:2px solid #3a9295;background:#f1fafa;box-shadow:0 12px 30px #105f6818}.plan input{position:absolute;right:14px;top:14px;accent-color:#3a9295}.planIcon{width:39px;height:39px;border-radius:11px;display:grid;place-items:center;background:#c8e6e2;color:#105f68;font-size:18px}.plan>b{font-size:15px;margin-top:12px}.plan>strong{font-size:21px;color:#105f68;margin:4px 0 10px}.plan>small{font-size:10px;color:#60787a;margin-top:6px}.plan.featured{border-color:#9ed5d1}.popular{position:absolute;right:12px;top:-9px;background:#e7b84f;color:#594100;padding:4px 7px;border-radius:20px;font-size:7px;font-weight:800}.memberStep footer{display:flex;justify-content:space-between;margin-top:22px}.memberStep footer button,.memberSuccess>button{border:0;border-radius:10px;padding:11px 17px;background:#105f68;color:#fff;font-weight:800}.memberFormGrid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.memberFormGrid label{font-size:10px;font-weight:700}.memberFormGrid input,.memberFormGrid select{display:block;width:100%;margin-top:5px;border:1px solid #dceceb;border-radius:9px;padding:11px}.memberConsent{display:flex;gap:8px;margin-top:15px;font-size:10px}.memberSuccess{text-align:center;padding:45px}.successIcon{margin:auto;width:65px;height:65px;border-radius:50%;display:grid;place-items:center;background:#dff4e9;color:#23805b;font-size:27px}.memberSuccess>span{display:block;color:#3a9295;font-size:9px;font-weight:800;margin-top:16px}.memberCode{display:table;margin:20px auto;padding:12px 30px;border:1px dashed #63c1bb;border-radius:11px;background:#f1fafa}.memberCode small,.memberCode b{display:block}.memberCode b{font-size:20px;color:#105f68}.memberWorkspace{margin-top:22px;background:#fff;border:1px solid #dceceb;border-radius:18px;padding:22px}.memberAdminActions{display:flex;gap:8px}.memberAdminActions input{width:260px;border:1px solid #dceceb;border-radius:9px;padding:10px}.memberAdminActions button{border:0;border-radius:9px;background:#105f68;color:#fff;padding:10px}.memberMetrics{display:flex;gap:13px;margin-bottom:17px}.memberMetrics span{min-width:130px;padding:12px;border-radius:11px;background:#f2f9f8}.memberMetrics b,.memberMetrics small{display:block}.memberMetrics b{font-size:20px;color:#105f68}.memberMetrics small{font-size:8px;color:#6b8082}.memberTable{overflow:auto}.memberRow{min-width:850px;display:grid;grid-template-columns:1.5fr 1.3fr .8fr .8fr .7fr;gap:12px;padding:12px;border-bottom:1px solid #dceceb;align-items:center;font-size:10px}.memberHead{background:#f1f8f7;font-weight:800;color:#6b8082}.memberRow b,.memberRow small{display:block}.memberRow small{font-size:8px;color:#6b8082}.statusActive{display:inline-block;padding:5px 8px;border-radius:20px;background:#dff4e9;color:#237959;font-size:8px}@media(max-width:900px){.planGrid{grid-template-columns:1fr}.memberFormGrid{grid-template-columns:1fr}.memberAdminActions{flex-direction:column}.memberAdminActions input{width:100%}}@media(max-width:760px){.memberButton{font-size:0;padding:9px}.memberButton span{font-size:16px}.memberCard{max-height:97vh}.memberHeader{padding:22px}.memberHeader h2{font-size:21px}.memberStep{padding:22px 17px}.memberSteps em{width:55px}}
/* Enlarged commercial course selector */
@media(min-width:1101px){header,.topbar{min-height:104px;padding-top:16px;padding-bottom:16px}.tabs{flex:0 0 580px;min-width:580px;padding:7px;border-radius:19px;gap:9px}.tab{flex:1;min-height:68px;padding:12px 18px;border-radius:14px;gap:12px}.tab>i{width:43px;height:43px;flex:0 0 auto;border-radius:12px;font-size:20px}.tab>i svg{width:21px;height:21px}.tab>span,.tab .tabCopy{font-size:15px!important;line-height:1.35;font-weight:750}.tab small{font-size:9px!important;letter-spacing:1.1px;margin-bottom:4px}.tab.active{box-shadow:0 10px 28px #105f6830}.tab:hover{transform:translateY(-2px)}}
@media(min-width:761px) and (max-width:1100px){header,.topbar{flex-wrap:wrap;padding:13px 22px;min-height:158px}.tabs{order:3;flex:1 0 100%;width:100%;padding:6px}.tab{flex:1;min-height:61px;padding:10px 16px}.tab>i{width:38px;height:38px}.tab>span{font-size:14px!important}.tab small{font-size:8px!important}.search{margin-left:auto;width:240px}}
@media(max-width:760px){.tabs{gap:5px}.tab{min-height:54px}.tab>span{font-size:10px!important;line-height:1.3}.tab small{font-size:6px!important}.tab>i{width:30px;height:30px;flex:0 0 auto}}
/* Independent authentication and rich publishing */
.registerModal,.contentViewer{display:none;position:fixed;inset:0;z-index:190;place-items:center;padding:20px}.registerModal.open,.contentViewer.open{display:grid}.registerCard{width:min(620px,95vw)}.registerGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.authDivider{display:flex;align-items:center;gap:10px;margin:14px 0;color:#87999a;font-size:9px}.authDivider:before,.authDivider:after{content:"";height:1px;background:#dceceb;flex:1}.secondaryAuth{width:100%;border:1px solid #9ed5d1!important;background:#f4fbfa!important;color:#105f68!important;border-radius:10px;padding:11px;font-weight:700}.authConsent{display:flex!important;align-items:flex-start;gap:7px;font-weight:400!important}.authConsent input{width:auto!important;margin-top:2px!important}.registerAccountBtn{border:1px solid #9ed5d1;background:#fff;color:#105f68;border-radius:11px;padding:10px 12px;font-size:10px;font-weight:800;white-space:nowrap}.contentViewer .articleShade{position:absolute;inset:0}.contentViewer>article{position:relative;width:min(900px,95vw);max-height:93vh;overflow:auto;background:#fff;border-radius:20px;box-shadow:0 30px 100px #0007}.contentViewer>article>button{position:absolute;right:12px;top:12px;z-index:3;width:38px;height:38px;border:0;border-radius:50%;background:#082f33cc;color:#fff;font-size:22px}.contentViewer>article>section{padding:25px 30px}.contentViewer section>span{font-size:9px;color:#3a9295;font-weight:800}.contentViewer h2{font-size:28px;margin:6px 0}.contentViewer #viewerMeta{font-size:10px;color:#6b8082}.contentViewer #viewerSummary{font-size:14px}.contentViewer #viewerContent{font-size:13px;line-height:1.8;color:#3f6063}.viewerImage{width:100%;height:420px;object-fit:cover}.viewerVideo{display:block;width:100%;aspect-ratio:16/9;border:0;background:#062f34}.managedMedia{position:relative;height:160px;overflow:hidden;background:linear-gradient(135deg,#105f68,#3a9295)}.managedMedia img{width:100%;height:100%;object-fit:cover;transition:.4s}.managedCard:hover .managedMedia img{transform:scale(1.04)}.managedMedia .mediaType{position:absolute;left:9px;top:9px;padding:5px 8px;border-radius:20px;background:#062f34cc;color:#fff;font-size:8px}.managedMedia .playOverlay{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:25px;background:#062f3435}.managedMeta{display:flex;justify-content:space-between;gap:8px}.placementBadge{font-size:7px;padding:4px 7px;border-radius:20px;background:#edf7f6;color:#105f68}.mediaPreview{margin-top:13px;min-height:150px;border:1px dashed #9ed5d1;border-radius:12px;background:#f5fbfa;display:grid;place-items:center;overflow:hidden;color:#6b8082;font-size:9px}.mediaPreview img,.mediaPreview iframe{width:100%;height:180px;object-fit:cover;border:0}.contentRouting{margin-top:10px}@media(max-width:1000px){.registerAccountBtn{display:none}}@media(max-width:760px){.registerGrid{grid-template-columns:1fr}.contentViewer>article>section{padding:20px}.viewerImage{height:250px}}
/* Mobile-first Android Chrome and iOS Safari optimization */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{-webkit-font-smoothing:antialiased;overflow-x:hidden}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media(max-width:767.98px){
:root{--mobile-gap:14px}html{scroll-padding-top:190px}body{font-size:14px;padding-bottom:env(safe-area-inset-bottom)}.app{display:block;width:100%;overflow:hidden}.app>main,.main-content{width:100%;min-width:0}
header,.topbar{position:sticky!important;top:0;z-index:60;display:flex!important;align-items:center;gap:8px!important;width:100%;min-height:auto!important;padding:calc(9px + env(safe-area-inset-top)) 12px 10px!important;background:#fffffffa!important;box-shadow:0 6px 22px #105f6812}
#menu,.mobile-menu,.notificationBtn{display:grid!important;place-items:center;width:44px!important;height:44px!important;flex:0 0 44px;border-radius:12px}.notificationBtn{order:2;margin-left:auto}.memberButton{order:3;width:44px;height:44px;padding:0!important;display:grid;place-items:center}.memberButton span{font-size:18px}.accountBtn{order:4;height:44px;max-width:92px;padding:0 12px!important;font-size:10px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.registerAccountBtn,.adminLink,.bell{display:none!important}
.tabs{order:5;display:grid!important;grid-template-columns:1fr 1fr;width:100%!important;flex:1 0 100%!important;min-width:0!important;padding:4px!important;gap:5px!important;border-radius:14px!important}.tab{min-width:0!important;min-height:57px!important;padding:8px!important;gap:7px!important;border-radius:11px!important}.tab>i{width:31px!important;height:31px!important;flex:0 0 31px}.tab>span,.tab .tabCopy{font-size:10px!important;line-height:1.3!important;white-space:normal}.tab small{font-size:6px!important;margin-bottom:2px!important}
.search{order:6;width:100%!important;flex:1 0 100%;height:44px;margin:0!important;padding:9px 12px!important}.search input{font-size:16px!important}
#side,.sidebar{width:min(318px,88vw)!important;padding:calc(22px + env(safe-area-inset-top)) 17px calc(20px + env(safe-area-inset-bottom))!important;box-shadow:24px 0 60px #001d2250}.brand{margin-bottom:22px!important}#side nav a{min-height:49px}.sidebar-close,#closeSide{width:44px;height:44px}
.homeSlider{height:530px!important;margin:14px 12px 22px!important;border-radius:18px!important}.homeSlide{background-position:66% center!important}.homeSlide:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#063e44 0%,#063e44ed 45%,#063e4430 100%)}.slideContent{left:20px!important;right:20px!important;bottom:58px!important;top:auto!important;transform:none!important;width:auto!important}.slideTag{font-size:8px!important;padding:7px 9px!important}.slideContent h1{font-size:31px!important;line-height:1.12!important;letter-spacing:-1px!important;margin:12px 0!important}.slideContent>p{font-size:13px!important;line-height:1.6!important}.slideContent>div{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:8px!important;margin-top:15px!important}.slideCta{min-height:44px;font-size:12px!important}.slideArrow{top:28%!important;width:44px!important;height:44px!important}.slideNav{left:20px!important;bottom:22px!important}.slideCount{right:20px!important}
.learnerHub,.published,.videos,.notes,.awards,.learningTools{width:auto!important;max-width:none!important;margin:0 12px 20px!important;padding:16px!important;border-radius:17px!important}.hubHeading{align-items:flex-start!important}.hubHeading h2{font-size:20px!important;line-height:1.35}.hubHeading p{font-size:11px!important}.hubGrid,.lecture-grid,#videoGrid,#publishedGrid,.achievement-grid,.awards>div:last-child,.toolGrid{grid-template-columns:1fr!important}.continueCard{grid-template-columns:1fr!important}.continueVisual{min-height:160px!important}.hubCard{min-height:155px}
.dashboard{display:block!important;padding:0 12px 20px!important}.curriculum-panel{padding:15px!important;border-radius:17px!important}.learning-panel,.now{margin-top:15px!important;padding:19px!important;border-radius:17px!important}.section-heading,.title{align-items:flex-start!important}.title p>b,.section-heading h2{font-size:23px!important;line-height:1.3}.title>span,.course-summary{display:none!important}
.courseCover{grid-template-columns:1fr!important;padding:14px!important;border-radius:16px!important;gap:14px!important}.courseImage{min-height:210px!important}.courseMain h2{font-size:23px!important}.courseMain h3{font-size:13px!important}.courseMain>p{font-size:12px!important}.courseFacts{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}.courseFacts span{border:0!important;padding:0!important}.courseAction{grid-column:auto!important;display:block!important}.courseAction button{min-height:44px}
.module>.chapterHead{grid-template-columns:76px 1fr 30px!important;padding:12px!important;gap:9px!important}.chapterMeta{display:none!important}.chapterLabel{font-size:9px!important;min-height:48px}.modTitle b{font-size:13px!important}.modTitle small{font-size:9px!important}.lesson{grid-template-columns:1fr auto!important;padding:13px 11px!important;gap:8px!important}.lesson>div{align-items:flex-start!important}.lessonText b{font-size:12px!important}.lessonText em{font-size:8px!important}.lesson .time{display:block!important;min-width:60px!important;padding:7px 5px!important}.lesson>button{grid-column:1/-1!important;width:100%;min-height:44px!important}.state{margin-top:2px}
.videoCard .thumb,.lecture-thumb{height:190px!important}.videoBody h3{font-size:14px!important;min-height:0}.notes{grid-template-columns:1fr!important}.notes textarea{font-size:16px!important}.notes footer{gap:8px}.notes footer small{max-width:55%}
.modal,.articleModal,.contentViewer,.loginModal,.registerModal,.memberModal,.quizModal,.certificateModal,.contentEditor{padding:0!important;align-items:end!important}.modal>article,.articleReader,.contentViewer>article,.loginCard,.memberCard,.quizCard,.certificate,#contentForm{width:100%!important;max-width:none!important;max-height:100dvh!important;border-radius:20px 20px 0 0!important;margin:0!important;padding-bottom:calc(20px + env(safe-area-inset-bottom))!important;overflow:auto!important}.modal>article{height:100dvh;border-radius:0!important}.frame{position:sticky!important;top:0;z-index:4;aspect-ratio:16/9!important;min-height:0!important}.frame iframe:not([hidden]){min-height:0!important;height:56.25vw!important;max-height:38dvh}.videoFallback{min-height:260px!important;padding:20px!important}.modal article>section{padding:18px 16px!important}.modal-content h2,#modTitle{font-size:22px!important;line-height:1.35}.lessonCommerce{align-items:flex-start!important;flex-direction:column!important}.lessonActions{width:100%!important}.lessonActions>button{flex:1;justify-content:center;min-height:44px}.shareMenu{left:0;right:0;top:50px;width:100%}.qaPanel{padding:13px!important}.qaHeading h3{font-size:17px!important}.commentCard{padding:11px!important}.qaPanel #qaForm{display:grid!important;grid-template-columns:1fr!important}.qaAvatar{display:none!important}.qaPanel #qaInput{font-size:16px!important;min-height:80px}.qaPanel #qaForm button{min-height:44px}
.loginCard,.registerCard{padding:24px 17px!important}.loginCard input,.registerCard input,.memberFormGrid input,.memberFormGrid select,#contentForm input,#contentForm select,#contentForm textarea{font-size:16px!important;min-height:44px}.registerGrid,.memberFormGrid,.formGrid{grid-template-columns:1fr!important}.memberCard{height:100dvh;border-radius:0!important}.memberHeader{padding:calc(20px + env(safe-area-inset-top)) 18px 20px!important}.memberStep{padding:20px 15px!important}.planGrid{grid-template-columns:1fr!important}.plan{min-height:170px}.memberStep footer{position:sticky;bottom:0;background:#fff;padding:10px 0 calc(8px + env(safe-area-inset-bottom));z-index:3}.memberStep footer button{min-height:44px}
.notificationPanel{position:fixed!important;left:10px!important;right:10px!important;top:calc(68px + env(safe-area-inset-top))!important;width:auto!important;max-height:70dvh;overflow:auto;border-radius:15px!important}.notificationPanel article{min-height:62px}
.courseOffers{margin:0 12px 20px!important;padding:16px!important}.offerGrid{grid-template-columns:1fr!important}
.pageFoot{padding:18px 16px calc(24px + env(safe-area-inset-bottom))!important;gap:12px;flex-direction:column}
.adminSide{width:64px!important;padding:calc(15px + env(safe-area-inset-top)) 8px!important}.adminMain{margin-left:64px!important;padding:12px!important}.adminMain>header{align-items:flex-start!important;gap:8px}.adminMain>header h1{font-size:19px!important}.adminMain>header button{min-height:40px}.adminStats{grid-template-columns:1fr!important}.adminWorkspace,.memberWorkspace{padding:14px!important}.adminTitle{flex-direction:column!important}.adminTitle input{width:100%!important}.adminTable,.memberTable{-webkit-overflow-scrolling:touch}.contentEditor #contentForm{height:100dvh;border-radius:0!important}
}
@media(max-width:374px){.tab>i{display:none!important}.tab{justify-content:center!important}.slideContent h1{font-size:27px!important}.accountBtn{max-width:78px}.homeSlider{height:500px!important}}
@supports(padding:max(0px)){@media(max-width:767.98px){header,.topbar{padding-left:max(12px,env(safe-area-inset-left))!important;padding-right:max(12px,env(safe-area-inset-right))!important}}}
/* Admin uploads, questions and role access */
.formSectionTitle{display:flex;gap:10px;align-items:center;margin:20px 0 10px;padding:12px;border-radius:11px;background:linear-gradient(90deg,#edf8f6,#fff);border-left:3px solid #3a9295}.formSectionTitle>i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#105f68;color:#fff;font-style:normal;font-weight:800}.formSectionTitle b,.formSectionTitle small{display:block}.formSectionTitle b{font-size:11px}.formSectionTitle small{font-size:8px;color:#6b8082}.uploadField{display:block!important;margin-top:8px!important}.uploadField>input{position:absolute;opacity:0;pointer-events:none}.uploadField>span{min-height:105px;border:1px dashed #63c1bb;border-radius:12px;background:#f3fbfa;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:.2s}.uploadField>span:hover{border-color:#105f68;background:#eaf7f5}.uploadField i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#c8e6e2;color:#105f68;font-style:normal;font-size:18px}.uploadField b{font-size:10px;margin-top:6px}.uploadField small{font-size:8px;color:#6b8082;margin-top:3px}.questionWorkspace{margin-top:22px;background:#fff;border:1px solid #dceceb;border-radius:18px;padding:22px}.adminTitle h2>i{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:20px;background:#ef846f;color:#fff;font-style:normal;font-size:9px}.questionFilters{display:flex;gap:6px}.questionFilters button{border:1px solid #dceceb;background:#fff;border-radius:20px;padding:7px 10px;font-size:8px}.questionFilters button.active{background:#105f68;color:#fff}.adminQuestion{display:grid;grid-template-columns:42px 1fr auto;gap:11px;padding:14px;border-top:1px solid #dceceb}.adminQAvatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#c8e6e2;color:#105f68;font-size:9px;font-weight:800}.adminQuestion h3{font-size:12px;margin:0}.adminQuestion .qMeta{font-size:8px;color:#6b8082;margin:3px 0}.adminQuestion p{font-size:10px;margin:5px 0}.adminQuestion .qStatus{font-size:8px;padding:5px 8px;border-radius:20px;align-self:start}.qStatus.pending{background:#fff1dc;color:#8a5b00}.qStatus.answered{background:#dff4e9;color:#237959}.adminReply{display:flex;gap:7px;margin-top:8px}.adminReply textarea{flex:1;min-height:58px;border:1px solid #dceceb;border-radius:9px;padding:8px;font-size:10px}.adminReply button{border:0;border-radius:8px;background:#105f68;color:#fff;padding:8px 11px;font-size:9px}.memberRow{grid-template-columns:1.3fr 1.2fr .7fr .8fr .7fr 1.2fr!important}.roleControls{display:grid;grid-template-columns:1fr 1fr;gap:5px}.roleControls select{min-width:90px;border:1px solid #dceceb;border-radius:7px;padding:6px;font-size:8px}.accessNotice{display:none;margin:12px 0;padding:12px;border:1px solid #f0d9a7;border-radius:10px;background:#fff8e8;color:#755800;font-size:11px}.accessNotice.show{display:block}.accessLocked{display:none!important}@media(max-width:760px){.questionWorkspace{padding:14px}.adminQuestion{grid-template-columns:36px 1fr}.adminQuestion>.qStatus{grid-column:2}.adminReply{flex-direction:column}.questionFilters{overflow:auto;width:100%;margin-top:8px}.formSectionTitle{margin-top:15px}.roleControls{grid-template-columns:1fr}}
.navQuestionBadge{float:right;margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:20px;background:#ef846f;color:#fff;font-style:normal;font-size:8px;display:inline-grid;place-items:center}.adminSide nav button{display:flex;align-items:center;gap:7px;width:100%}.adminSide nav button.active .navQuestionBadge{background:#fff;color:#a64f43}.uploadField.hasFile>span{border-style:solid;background:#e9f7f4}
/* Login password utilities */
.loginPasswordOptions{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:14px 0 22px;padding:0 2px;color:#315e64;font-size:13px;font-weight:600}.loginPasswordOptions label{display:flex!important;align-items:center;gap:9px;margin:0!important;line-height:1.3;cursor:pointer;white-space:nowrap}.loginPasswordOptions input{display:inline-block!important;flex:0 0 18px;width:18px!important;height:18px!important;min-height:18px!important;padding:0!important;margin:0!important;border-radius:4px!important;accent-color:#105f68;cursor:pointer}@media(max-width:400px){.loginPasswordOptions{gap:12px;font-size:12px}}

.passwordField{position:relative}.passwordField input{padding-right:52px!important}.showPasswordButton{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:38px!important;height:38px!important;padding:0!important;border:0!important;background:transparent!important;color:#10656d!important;box-shadow:none!important;font-size:20px!important}

/* Visual polish, media thumbnails and compact library */
.dashboard{position:relative;background:radial-gradient(circle at 92% 8%,#c8eee8 0,transparent 24%),linear-gradient(145deg,#f8fcfb 0%,#eef8f6 100%);border:1px solid #d7e9e7;border-radius:28px;padding:24px;box-shadow:0 20px 55px #0a5d6510}.now{position:sticky;top:118px;overflow:hidden;box-shadow:0 24px 55px #07545c2b}.now:before{content:'✦';position:absolute;right:-22px;top:-28px;width:110px;height:110px;border-radius:50%;background:#6fd2ca22;color:#8fe0d9;font-size:24px;display:grid;place-items:center}.now>*{position:relative;z-index:1}.managedCard{transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}.managedCard:hover{transform:translateY(-5px);border-color:#8acfc9;box-shadow:0 18px 38px #07545c20}.managedMedia{position:relative;display:block;width:100%;height:190px;padding:0!important;border:0;overflow:hidden;background:#0c626a;cursor:pointer}.managedMedia img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .45s ease,filter .45s ease}.managedMedia:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#052d3305 35%,#052d3385 100%)}.managedCard:hover .managedMedia img{transform:scale(1.055);filter:saturate(1.08)}.managedMedia .mediaType{position:absolute;z-index:3;left:12px;top:12px;padding:6px 9px;border-radius:999px;background:#073f46dd;color:#fff;font-size:9px;font-weight:700;backdrop-filter:blur(8px)}.managedMedia .playOverlay{z-index:3;width:52px;height:52px;border:2px solid #fff;background:#0d656fc4;box-shadow:0 9px 25px #022b3070;transition:transform .25s ease,background .25s ease}.managedMedia:hover .playOverlay{transform:translate(-50%,-50%) scale(1.1);background:#54bdb5}.managedCard>div:last-child{padding:18px}.managedCard h3{font-size:15px}.managedCard p{min-height:38px}.managedCard button[data-rich]{display:inline-flex;align-items:center;gap:7px}.managedCard button[data-rich] span{transition:transform .2s ease}.managedCard button[data-rich]:hover span{transform:translateX(4px)}#videoGrid:not(.videoGridExpanded) .videoCard:nth-child(n+7){display:none}.videoLibraryMore{display:flex;align-items:center;justify-content:center;gap:10px;width:min(420px,100%);min-height:52px;margin:22px auto 2px;padding:12px 20px;border:1px solid #8ccfc9;border-radius:14px;background:linear-gradient(135deg,#f6fcfb,#e6f6f3);color:#0d626a;font:600 12px 'Be Vietnam Pro',sans-serif;cursor:pointer;box-shadow:0 10px 24px #0a5d6512;transition:.22s ease}.videoLibraryMore:hover{transform:translateY(-2px);background:#dff4f0;box-shadow:0 15px 30px #0a5d6520}.videoLibraryMore>span{color:#6c8588;font-size:10px;font-weight:500}.videoLibraryMore[hidden]{display:none}@media(max-width:760px){.dashboard{padding:12px;border-radius:20px}.now{position:relative;top:auto}.managedMedia{height:180px}.videoLibraryMore{flex-wrap:wrap}.videoLibraryMore>span{width:100%;text-align:center}}

/* Fix empty learning-column space */
.dashboard>.now{position:relative!important;top:auto!important;align-self:stretch!important;min-height:100%!important}.dashboard>.now:after{content:'';position:absolute;inset:auto -80px -100px auto;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,#8ce0d72b,transparent 70%);pointer-events:none}@media(max-width:1050px){.dashboard{display:flex!important;flex-direction:column!important;width:calc(100% - 24px)!important;max-width:none!important;margin:0 12px 24px!important;padding:14px!important;gap:16px!important}.dashboard>.curriculum,.dashboard>.curriculum-panel,.dashboard>.now{width:100%!important;max-width:none!important;min-width:0!important;margin:0!important}.dashboard>.now{min-height:auto!important}}@media(min-width:1051px){.dashboard>.now{border-radius:24px!important}}

/* Refined weekly streak panel */
.now .streak{background:linear-gradient(145deg,#dff5f2 0%,#bfe7e2 100%)!important;color:#0b535b!important;border:1px solid #ffffff80!important;box-shadow:inset 0 1px 0 #fff,0 12px 28px #032f341f!important}.now .streak small{color:#35767c!important;font-weight:600!important}.now .streak b{color:#0b535b!important}.now .streak p{align-items:center;margin-bottom:2px!important}.now .streak i{border-color:#79c8c1!important;background:#55bdb5!important;color:#fff!important;box-shadow:0 4px 9px #1a777d26}.now .streak i.today{background:#fff!important;color:#0d626a!important;border:2px solid #16818a!important;box-shadow:0 0 0 3px #ffffff70!important}

/* Final learning-card height correction */
.dashboard{background:transparent!important;border-color:transparent!important;box-shadow:none!important}.dashboard>.now{position:relative!important;top:auto!important;align-self:start!important;min-height:0!important;height:auto!important}.dashboard>.now:after{display:none!important}@media(max-width:1050px){.dashboard>.now{align-self:auto!important}}

/* Password recovery */
.forgotPasswordButton{display:block;width:max-content;margin:11px 0 0 auto;padding:4px 0;border:0;background:transparent;color:#16737b;font-size:11px;font-weight:700}.forgotPasswordButton:hover{text-decoration:underline}.forgotModal{position:fixed;inset:0;z-index:190;display:none;place-items:center;padding:18px}.forgotModal.open{display:grid}.forgotShade{position:absolute;inset:0;background:#06272add;backdrop-filter:blur(10px)}.forgotCard{position:relative;width:min(450px,94vw);padding:30px;background:#fff;border:1px solid #d7e9e7;border-radius:22px;box-shadow:0 30px 90px #001d2266}.forgotClose{position:absolute;right:14px;top:14px;width:35px;height:35px;border:0;border-radius:50%;background:#edf7f5;color:#105f68;font-size:19px}.forgotIcon{display:grid;place-items:center;width:54px;height:54px;border-radius:15px;background:linear-gradient(145deg,#105f68,#3a9295);color:#fff;font-size:25px}.forgotCard>span{display:block;margin-top:12px;color:#3a9295;font-size:9px;font-weight:800;letter-spacing:1.4px}.forgotCard h2{margin:6px 0;font-size:26px}.forgotCard>p{color:#647b7e;font-size:11px;line-height:1.6}.forgotCard label{display:block;margin-top:13px;color:#315e64;font-size:10px;font-weight:700}.forgotCard input{display:block;width:100%;min-height:46px;margin-top:6px;padding:11px 13px;border:1px solid #cfe4e2;border-radius:11px;outline-color:#63c1bb}.forgotCard>.primary{width:100%;margin-top:20px}.forgotCard>small{display:block;margin-top:10px;text-align:center;color:#789093;font-size:8px}

/* Admin notification center */
.adminMain>header{position:relative}.adminHeaderActions{display:flex;align-items:center;gap:10px}.adminNotificationButton{position:relative;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid #cfe4e2;border-radius:13px;background:#fff!important;color:#105f68!important;box-shadow:0 8px 22px #105f6812}.adminNotificationButton>span{font-size:21px}.adminNotificationButton>i{position:absolute;right:-4px;top:-5px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border:2px solid #fff;border-radius:20px;background:#ef846f;color:#fff;font-size:8px;font-style:normal}.adminNotificationPanel{position:absolute;z-index:180;right:0;top:calc(100% + 10px);display:none;width:min(400px,92vw);overflow:hidden;background:#fff;border:1px solid #d7e9e7;border-radius:18px;box-shadow:0 25px 65px #06272a38}.adminNotificationPanel.open{display:block;animation:accountMenuIn .18s ease}.adminNotificationPanel>header{position:static!important;display:flex!important;justify-content:space-between;align-items:center;min-height:0!important;padding:16px!important;background:linear-gradient(135deg,#eef9f7,#fff)!important;box-shadow:none!important}.adminNotificationPanel h3,.adminNotificationPanel small{display:block;margin:0}.adminNotificationPanel h3{margin-top:3px;font-size:16px}.adminNotificationPanel small{color:#3a9295;font-size:8px;font-weight:800;letter-spacing:1px}.adminNotificationPanel>header button,.adminNotificationPanel>footer button{border:0;background:transparent;color:#16737b;font-size:9px;font-weight:700}.adminNotificationPanel>div{max-height:390px;overflow:auto}.adminNotificationPanel>div>button{display:grid;grid-template-columns:36px 1fr;gap:10px;width:100%;padding:12px 15px;border:0;border-top:1px solid #e3efed;background:#fff;text-align:left}.adminNotificationPanel>div>button:hover{background:#f2faf8}.adminNotificationPanel>div>button>i{display:grid;place-items:center;width:35px;height:35px;border-radius:10px;background:#dff3ef;color:#10656d;font-style:normal;font-weight:800}.adminNotificationPanel>div span,.adminNotificationPanel>div b,.adminNotificationPanel>div small,.adminNotificationPanel>div em{display:block}.adminNotificationPanel>div b{color:#173f44;font-size:10px}.adminNotificationPanel>div small{margin-top:3px;color:#607b7e;font-size:9px;line-height:1.4;letter-spacing:0;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.adminNotificationPanel>div em{margin-top:4px;color:#91a5a7;font-size:7px;font-style:normal}.adminNotificationPanel>footer{padding:11px;border-top:1px solid #e3efed;text-align:center}.adminNoticeEmpty{padding:35px 15px;text-align:center;color:#6d888b;font-size:10px}@media(max-width:760px){.forgotCard{padding:24px 18px}.adminHeaderActions{width:100%;justify-content:flex-end}.adminNotificationPanel{right:8px;left:8px;width:auto;top:100%}}

/* Admin question quick-reply popup */
.adminQuickReplyModal{position:fixed;inset:0;z-index:260;display:none;place-items:center;padding:18px}.adminQuickReplyModal.open{display:grid}.adminReplyShade{position:absolute;inset:0;background:#06272adb;backdrop-filter:blur(10px)}.adminQuickReplyCard{position:relative;width:min(620px,95vw);max-height:92vh;overflow:auto;padding:28px;background:#fff;border:1px solid #d5e8e6;border-radius:22px;box-shadow:0 35px 100px #001d2270;animation:quickReplyIn .22s ease-out}.adminQuickReplyClose{position:absolute;right:15px;top:15px;width:36px;height:36px;border:0;border-radius:50%;background:#edf7f5;color:#105f68;font-size:20px}.quickReplyHead{display:flex;align-items:center;gap:13px;padding-right:45px}.quickReplyIcon{display:grid;place-items:center;width:50px;height:50px;border-radius:14px;background:linear-gradient(145deg,#105f68,#3a9295);color:#fff;font-size:22px;font-weight:800}.quickReplyHead span{color:#3a9295;font-size:8px;font-weight:800;letter-spacing:1.3px}.quickReplyHead h2{margin:4px 0 0;color:#123f44;font-size:23px}.quickStudent{display:flex;align-items:center;gap:11px;margin-top:20px;padding:13px;border:1px solid #dceceb;border-radius:14px;background:linear-gradient(135deg,#f1faf8,#fff)}.quickStudent>div{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#bfe7e2;color:#105f68;font-size:11px;font-weight:800}.quickStudent p,.quickStudent b,.quickStudent small,.quickStudent em{display:block;margin:0}.quickStudent b{font-size:11px}.quickStudent small{margin-top:2px;color:#477278;font-size:9px}.quickStudent em{margin-top:3px;color:#8aa1a3;font-size:8px;font-style:normal}.adminQuickReplyCard blockquote{position:relative;margin:14px 0;padding:16px 17px 16px 38px;border:0;border-radius:14px;background:#0f666e;color:#fff;font-size:12px;line-height:1.65}.adminQuickReplyCard blockquote:before{content:'“';position:absolute;left:14px;top:5px;color:#8edbd4;font:700 30px Georgia}.adminQuickReplyCard>label{display:block;color:#315e64;font-size:10px;font-weight:700}.adminQuickReplyCard textarea{display:block;width:100%;min-height:125px;margin-top:7px;padding:13px;border:1px solid #cfe4e2;border-radius:13px;outline-color:#63c1bb;resize:vertical;font-size:12px;line-height:1.6}.quickReplyHint{margin-top:9px;padding:9px 11px;border-radius:9px;background:#edf8f6;color:#4b7377;font-size:9px}.adminQuickReplyCard footer{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}.adminQuickReplyCard footer button{min-height:42px;padding:9px 16px;border:1px solid #cfe4e2;border-radius:10px;background:#fff;color:#315e64;font-size:10px;font-weight:700}.adminQuickReplyCard footer button[type=submit]{border-color:#105f68;background:#105f68;color:#fff;box-shadow:0 9px 20px #105f682c}@keyframes quickReplyIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}@media(max-width:600px){.adminQuickReplyCard{padding:21px 15px;border-radius:18px}.quickReplyHead h2{font-size:20px}.adminQuickReplyCard footer{display:grid;grid-template-columns:1fr 1fr}.adminQuickReplyCard footer button{width:100%}}

.accountArea{position:relative;flex:0 0 auto}.accountArea .accountBtn{margin:0;min-height:44px}.accountMenu{position:absolute;z-index:150;right:0;top:calc(100% + 12px);display:none;width:245px;padding:10px;background:#fff;border:1px solid #d7e9e7;border-radius:16px;box-shadow:0 20px 50px #06363c2b}.accountMenu.open{display:block;animation:accountMenuIn .18s ease-out}.accountMenuIdentity{display:flex;align-items:center;gap:11px;padding:8px 8px 13px;border-bottom:1px solid #e1eeec}.accountMenuIdentity>span{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#10656d;color:#fff;font:700 17px Georgia}.accountMenuIdentity p,.accountMenuIdentity b,.accountMenuIdentity small{display:block;margin:0}.accountMenuIdentity b{color:#103e43;font-size:13px;line-height:1.35}.accountMenuIdentity small{margin-top:3px;color:#6c8588;font-size:10px}.accountMenu>a,.accountMenu>button{display:flex;width:100%;align-items:center;gap:9px;margin-top:6px;padding:11px 10px;border:0;border-radius:10px;background:transparent;color:#17484e;font:600 12px 'Be Vietnam Pro',sans-serif;text-decoration:none;cursor:pointer;text-align:left}.accountMenu>a:hover{background:#edf8f6;color:#0e666e}.accountMenu>button:hover{background:#fff1ee;color:#b84c3c}.adminLinkMoved{display:none!important}@keyframes accountMenuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}@media(max-width:760px){.accountArea{width:100%}.accountArea .accountBtn{width:100%}.accountMenu{position:static;width:100%;margin-top:8px;box-shadow:0 10px 25px #06363c1c}.accountMenu.open{display:block}}

/* ==========================================================================
   PREMIUM CARD DEPTH, GLASSMORPHISM & VISUAL CONTRAST UPGRADE
   ========================================================================== */

/* 1. Richer Background Layer to fix "nền trắng bị sáng quá làm mờ card" */
body {
  background: radial-gradient(circle at 15% 10%, #dcefe8 0%, #e6f3f0 45%, #dbedea 100%) !important;
  color: var(--ink);
}
.adminPage {
  background: radial-gradient(circle at 85% 15%, #dff0ee 0%, #e8f4f3 50%, #dceeea 100%) !important;
}

/* 2. Frosted Glass Containers (Outer Panels) */
.learnerHub, .curriculum, .videos, .notes, .awards, .published, .learningTools, .questionWorkspace, .memberWorkspace, .adminWorkspace, .curriculum-panel, .learning-panel, .courseOffers {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 18px 48px rgba(16, 95, 104, 0.08), 0 2px 8px rgba(16, 95, 104, 0.03) !important;
}
.dashboard {
  background: radial-gradient(circle at 92% 8%, rgba(200, 238, 232, 0.5) 0, transparent 35%), linear-gradient(145deg, rgba(248, 252, 251, 0.85) 0%, rgba(238, 248, 246, 0.75) 100%) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 20px 55px rgba(10, 93, 101, 0.09) !important;
}

/* 3. Distinct High-Contrast Cards with Permanent Elevation */
.hubCard, .continueCard, .videoCard, .managedCard, .toolCard, .awards article, .commentCard, .plan, .offerCard {
  background: #ffffff !important;
  border: 1px solid #c8e2df !important;
  border-top: 1px solid #ffffff !important;
  box-shadow: 0 8px 26px rgba(16, 95, 104, 0.09), 0 2px 6px rgba(16, 95, 104, 0.04) !important;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s, background 0.35s !important;
  position: relative;
  overflow: hidden;
}

/* Special styling for Continue Card to make it stand out as primary CTA */
.continueCard {
  background: linear-gradient(135deg, #ffffff 0%, #effaf9 100%) !important;
  border: 1px solid #bce2de !important;
  box-shadow: 0 12px 32px rgba(16, 95, 104, 0.12), 0 3px 10px rgba(16, 95, 104, 0.05) !important;
}

/* 4. Interactive Micro-Animations & Glowing Hover Effects */
.hubCard:hover, .continueCard:hover, .videoCard:hover, .managedCard:hover, .toolCard:hover, .awards article:not(.locked):hover, .plan:hover, .offerCard:hover {
  transform: translateY(-8px) scale(1.018) !important;
  border-color: var(--a) !important;
  box-shadow: 0 22px 55px rgba(16, 95, 104, 0.22), 0 0 0 2px rgba(99, 193, 187, 0.35) !important;
  background: #ffffff !important;
  z-index: 5;
}

/* Hover Shimmer Sweep Effect */
.hubCard::after, .continueCard::after, .videoCard::after, .toolCard::after, .offerCard::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: skewX(-25deg);
  transition: left 0.75s ease;
  pointer-events: none;
  z-index: 2;
}
.hubCard:hover::after, .continueCard:hover::after, .videoCard:hover::after, .toolCard:hover::after, .offerCard:hover::after {
  left: 150%;
}

/* 5. Enhanced Card Icons & Buttons on Hover */
.hubCard:hover .hubIcon, .toolCard:hover i {
  transform: translateY(-4px) rotate(-8deg) scale(1.15) !important;
  background: linear-gradient(135deg, var(--l), var(--a)) !important;
  color: var(--p) !important;
  box-shadow: 0 10px 22px rgba(16, 95, 104, 0.25) !important;
}

.continueCard:hover button, .toolCard:hover button, .hubCard:hover button, .offerCard:hover button {
  background: linear-gradient(135deg, var(--m), var(--a)) !important;
  color: white !important;
  box-shadow: 0 8px 20px rgba(58, 146, 149, 0.35) !important;
  transform: translateY(-2px);
}

/* 6. Course Module Items Polish */
.module {
  background: #ffffff !important;
  border: 1px solid #cbe4e1 !important;
  box-shadow: 0 6px 18px rgba(16, 95, 104, 0.06) !important;
}
.module:hover {
  border-color: var(--a) !important;
  box-shadow: 0 14px 35px rgba(16, 95, 104, 0.15) !important;
  transform: translateX(6px) !important;
}

/* 7. Video Card & Media Thumbnails Polish */
.videoCard .thumb, .managedMedia {
  position: relative;
  overflow: hidden;
}
.videoCard:hover .thumb::before, .managedCard:hover .managedMedia::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(99, 193, 187, 0.25), transparent 70%);
  z-index: 1;
  pointer-events: none;
}
.videoCard:hover .play, .managedMedia:hover .playOverlay {
  transform: translate(-50%, -50%) scale(1.18) !important;
  background: var(--a) !important;
  color: var(--p) !important;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.4), 0 12px 30px rgba(0, 0, 0, 0.4) !important;
}

/* 8. Sleek Deep Emerald Glass Header & Controls Upgrade (Fixing bright header bar) */
header, .topbar {
  background: linear-gradient(135deg, rgba(13, 89, 98, 0.94) 0%, rgba(8, 75, 83, 0.95) 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(158, 213, 209, 0.22) !important;
  box-shadow: 0 10px 32px rgba(4, 40, 44, 0.28) !important;
  color: #ffffff !important;
}

header .tabs, .topbar .tabs, .tabs {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex !important;
  gap: 12px !important;
}

header .tab, .topbar .tab, .tab {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 16px !important;
  padding: 10px 18px !important;
  color: #c8e6e2 !important;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12) !important;
}
header .tab:hover, .topbar .tab:hover, .tab:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}
header .tab small, .topbar .tab small, .tab small {
  color: #9ed5d1 !important;
}

header .tab.active, .topbar .tab.active, .tab.active {
  background: linear-gradient(135deg, #105f68 0%, #1a8894 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 25px rgba(16, 95, 104, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
header .tab.active small, .topbar .tab.active small, .tab.active small {
  color: #ffd875 !important;
  font-weight: 800 !important;
}

header .search, .topbar .search {
  background: rgba(4, 40, 44, 0.45) !important;
  border: 1px solid rgba(158, 213, 209, 0.25) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
}
header .search input, .topbar .search input {
  background: transparent !important;
  color: #ffffff !important;
}
header .search input::placeholder, .topbar .search input::placeholder {
  color: #9ed5d1 !important;
  opacity: 0.8 !important;
}

header .bell, header #menu, header .notificationBtn, .topbar .bell, .topbar #menu, .topbar .notificationBtn {
  background: rgba(4, 40, 44, 0.45) !important;
  border: 1px solid rgba(158, 213, 209, 0.25) !important;
  color: #ffffff !important;
}
header .bell:hover, header #menu:hover, header .notificationBtn:hover, .topbar .bell:hover, .topbar #menu:hover, .topbar .notificationBtn:hover {
  background: rgba(158, 213, 209, 0.2) !important;
  border-color: #63c1bb !important;
}

header .memberButton, .topbar .memberButton {
  background: linear-gradient(135deg, rgba(231, 184, 79, 0.22) 0%, rgba(13, 89, 98, 0.6) 100%) !important;
  border: 1px solid #e7b84f !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(231, 184, 79, 0.18) !important;
}
header .memberButton span, .topbar .memberButton span {
  color: #ffd875 !important;
}
header .memberButton:hover, .topbar .memberButton:hover {
  background: linear-gradient(135deg, rgba(231, 184, 79, 0.35) 0%, rgba(13, 89, 98, 0.8) 100%) !important;
  box-shadow: 0 6px 20px rgba(231, 184, 79, 0.35) !important;
  transform: translateY(-2px);
}

header .registerAccountBtn, .topbar .registerAccountBtn, header .secondaryAuth, .topbar .secondaryAuth {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(158, 213, 209, 0.35) !important;
  color: #ffffff !important;
}
header .registerAccountBtn:hover, .topbar .registerAccountBtn:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: #ffffff !important;
}

header .accountBtn, .topbar .accountBtn {
  background: linear-gradient(135deg, #63c1bb 0%, #9ed5d1 100%) !important;
  color: #084b53 !important;
  font-weight: 800 !important;
  border: 1px solid #ffffff !important;
  box-shadow: 0 6px 18px rgba(99, 193, 187, 0.35) !important;
}
header .accountBtn:hover, .topbar .accountBtn:hover {
  background: linear-gradient(135deg, #ffffff 0%, #63c1bb 100%) !important;
  box-shadow: 0 8px 24px rgba(99, 193, 187, 0.5) !important;
  transform: translateY(-2px);
}

/* ==========================================================================
   9. THE MASTERCLASS PRINCIPAL UI/UX DESIGNER OVERHAUL (APPLE & STRIPE LEVEL AESTHETICS)
   ========================================================================== */

/* --- A. EXECUTIVE AMBIENT COLOR PALETTE & GLASS MESH --- */
body {
  background: radial-gradient(circle at 10% 5%, #d5eee7 0%, #e3f4f0 35%, #d9ede9 70%, #cfe6e1 100%) !important;
  color: #0f3238 !important;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  letter-spacing: -0.01em;
}

/* Custom Luxury Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: rgba(220, 238, 235, 0.6);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #63c1bb, #3a9295);
  border-radius: 10px;
  border: 2px solid #e3f4f0;
}
::-webkit-scrollbar-thumb:hover {
  background: #105f68;
}

/* --- B. SIDEBAR EXECUTIVE OBSIDIAN CONSOLE --- */
aside#side {
  background: linear-gradient(180deg, #09474f 0%, #06383e 50%, #04292e 100%) !important;
  box-shadow: 10px 0 35px rgba(4, 41, 46, 0.35) !important;
  border-right: 1px solid rgba(158, 213, 209, 0.15) !important;
}
aside#side .brand {
  padding-bottom: 25px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}
aside#side .brand i {
  background: linear-gradient(135deg, #187f8a, #105f68) !important;
  border: 2px solid #63c1bb !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}
aside#side .profile {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  margin: 15px 0 !important;
  padding: 14px 12px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}
aside#side .avatar {
  background: linear-gradient(135deg, #e7b84f, #d99b26) !important;
  color: #06383e !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 4px 12px rgba(231, 184, 79, 0.4) !important;
  font-size: 15px !important;
}

/* Nav Links with Sculpted Jewel Icons */
aside#side nav a {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 13px 16px !important;
  margin-bottom: 4px !important;
  border-radius: 14px !important;
  color: #bde4e0 !important;
  font-weight: 600 !important;
  transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  border: 1px solid transparent !important;
}
aside#side nav a:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  transform: translateX(6px) !important;
  border-color: rgba(158, 213, 209, 0.2) !important;
}
aside#side nav a.active {
  background: linear-gradient(90deg, rgba(99, 193, 187, 0.25) 0%, rgba(16, 95, 104, 0.4) 100%) !important;
  color: #ffffff !important;
  border-left: 4px solid #63c1bb !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25) !important;
}

/* --- C. SECTION TITLES & TYPOGRAPHY HIERARCHY --- */
.title p > b, .hubHeading h2, .notes h2, .courseMain h2, .now h2, .qaHeading h3 {
  color: #0b3d43 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}
.title label, .hubHeading span, .now > label, .courseMain h3 {
  color: #167680 !important;
  font-weight: 800 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

/* --- D. PANORAMIC HERO SLIDER & WELCOME BANNER --- */
.homeSlider {
  border-radius: 30px !important;
  box-shadow: 0 28px 70px rgba(10, 80, 88, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.8) !important;
  border: 4px solid #ffffff !important;
}
.slideTag {
  background: rgba(16, 95, 104, 0.85) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
  padding: 8px 16px !important;
}
.slideCta {
  background: linear-gradient(135deg, #e7b84f 0%, #d99b26 100%) !important;
  color: #08383e !important;
  border: 1px solid #ffffff !important;
  box-shadow: 0 10px 25px rgba(217, 155, 38, 0.4) !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
}
.slideCta:hover {
  background: linear-gradient(135deg, #ffffff 0%, #e7b84f 100%) !important;
  box-shadow: 0 14px 32px rgba(217, 155, 38, 0.6) !important;
  transform: translateY(-3px) scale(1.02) !important;
}

/* --- E. EXECUTIVE LEARNER HUB & 3D JEWEL CARDS --- */
.learnerHub {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(240, 250, 248, 0.85) 100%) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid #ffffff !important;
  box-shadow: 0 22px 60px rgba(16, 95, 104, 0.09), 0 4px 15px rgba(16, 95, 104, 0.03) !important;
  border-radius: 28px !important;
  padding: 30px !important;
}

/* Continue Card - Primary VIP Box */
.continueCard {
  background: linear-gradient(135deg, #ffffff 0%, #e8f8f5 100%) !important;
  border: 2px solid #63c1bb !important;
  border-top: 2px solid #ffffff !important;
  box-shadow: 0 16px 40px rgba(16, 95, 104, 0.14), 0 0 0 6px rgba(99, 193, 187, 0.12) !important;
  border-radius: 22px !important;
  padding: 18px !important;
}
.continueVisual {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
  border: 2px solid #ffffff !important;
}
.continueCard button {
  background: linear-gradient(135deg, #105f68, #18828e) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(16, 95, 104, 0.3) !important;
  font-size: 11px !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
}
.continueCard button:hover {
  background: linear-gradient(135deg, #e7b84f, #d99b26) !important;
  color: #06383e !important;
  box-shadow: 0 10px 25px rgba(231, 184, 79, 0.45) !important;
}

/* Hub Cards & Tool Cards - Jewel Iconography */
.hubCard, .toolCard {
  background: #ffffff !important;
  border: 1px solid #cbe6e2 !important;
  border-top: 1px solid #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(16, 95, 104, 0.07) !important;
  padding: 20px !important;
}

/* Glowing Sculpted Icons */
.hubIcon, .toolCard i {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #e5f6f4 0%, #c1e8e3 100%) !important;
  color: #105f68 !important;
  border: 1px solid #ffffff !important;
  box-shadow: 0 6px 16px rgba(16, 95, 104, 0.15) !important;
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Progress Hub Icon - Emerald Jewel */
.progressHub .hubIcon {
  background: linear-gradient(135deg, #105f68, #238993) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(16, 95, 104, 0.3) !important;
}

/* Schedule Hub Icon - Gold Jewel */
.scheduleHub .hubIcon {
  background: linear-gradient(135deg, #e7b84f, #d99b26) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(217, 155, 38, 0.3) !important;
}

/* Support Hub - Deep Obsidian/Teal Card */
.supportHub {
  background: linear-gradient(145deg, #0d5962 0%, #06383e 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 16px 40px rgba(6, 56, 62, 0.35) !important;
}
.supportHub .hubIcon {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffd875 !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.supportHub button {
  background: linear-gradient(135deg, #e7b84f, #ffd875) !important;
  color: #06383e !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25) !important;
}
.supportHub button:hover {
  background: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* --- F. COURSE MODULES & VIDEO LIBRARY POLISH --- */
.curriculum, .videos, .notes, .awards, .learningTools {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid #ffffff !important;
  border-radius: 26px !important;
  box-shadow: 0 20px 55px rgba(16, 95, 104, 0.08) !important;
  padding: 26px !important;
}

/* Course Module Folders */
.module {
  border: 1px solid #c8e2df !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  margin-top: 14px !important;
  box-shadow: 0 4px 14px rgba(16, 95, 104, 0.04) !important;
}
.module > button {
  padding: 18px 20px !important;
}
.module.open {
  border-color: #63c1bb !important;
  box-shadow: 0 14px 36px rgba(16, 95, 104, 0.12) !important;
}
.module.open > button {
  background: linear-gradient(90deg, #105f68, #18808a) !important;
  color: white !important;
}

/* Live Study Console (.now right sidebar) */
.now {
  background: linear-gradient(155deg, #0d5962 0%, #08434a 50%, #052c30 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 26px !important;
  box-shadow: 0 25px 65px rgba(6, 56, 62, 0.35) !important;
  padding: 28px !important;
}
.now > button {
  background: linear-gradient(135deg, #e7b84f, #ffd875) !important;
  color: #06383e !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 16px !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 25px rgba(231, 184, 79, 0.35) !important;
  border: 1px solid #ffffff !important;
}
.now > button:hover {
  background: linear-gradient(135deg, #ffffff, #e7b84f) !important;
  box-shadow: 0 14px 32px rgba(231, 184, 79, 0.55) !important;
  transform: translateY(-3px) scale(1.02) !important;
}

/* Video Cards Hover Enhancement */
.videoCard {
  border: 1px solid #c8e2df !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 25px rgba(16, 95, 104, 0.07) !important;
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.videoCard:hover {
  transform: translateY(-8px) !important;
  border-color: #63c1bb !important;
  box-shadow: 0 20px 50px rgba(16, 95, 104, 0.18) !important;
}
.videoCard .play {
  background: linear-gradient(135deg, #e7b84f, #d99b26) !important;
  color: #06383e !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
}

/* --- G. PULSING & SHIMMER EFFECTS (MICRO-ANIMATIONS) --- */
@keyframes pulseGlow {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 132, 111, 0.7); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(239, 132, 111, 0); }
}
#notificationBadge, .streak .today {
  animation: pulseGlow 2.5s infinite ease-in-out !important;
}

/* --- H. BORDERLESS PREMIUM TAB SELECTOR (REMOVING THICK OUTER BORDER) --- */
.tabs, header .tabs, .topbar .tabs {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex !important;
  gap: 12px !important;
}
.tab, header .tab, .topbar .tab {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 16px !important;
  padding: 11px 20px !important;
  color: #c8e6e2 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12) !important;
}
.tab:hover, header .tab:hover, .topbar .tab:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}
.tab.active, header .tab.active, .topbar .tab.active {
  background: linear-gradient(135deg, #105f68 0%, #1c8894 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 25px rgba(16, 95, 104, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* --- I. COMPLETE OVERHAUL FOR 5 USER REQUESTS (BANNER, LEARNER HUB, FEATURED COURSE, LIVE CARD) --- */

/* 2. Banner expanded to cover empty space */
.homeSlider {
  max-width: 100% !important;
  width: 100% !important;
  margin: 16px 0 32px 0 !important;
  border-radius: 28px !important;
  height: clamp(520px, 58vw, 700px) !important;
  box-shadow: 0 25px 70px rgba(4, 40, 44, 0.25) !important;
}

/* 3. LearnerHub cards crystal clear & high-contrast (Fixing blurry/pale look) */
.learnerHub {
  background: #f0f9f8 !important;
  border: 2px solid #bde4e0 !important;
  box-shadow: 0 20px 50px rgba(16, 95, 104, 0.12) !important;
  border-radius: 28px !important;
  padding: 30px !important;
}
.learnerHub > p, .learnerHub > span {
  color: #0b3d43 !important;
  font-weight: 700 !important;
}
.learnerHub h2, .learnerHub h1 {
  color: #0b3d43 !important;
  font-weight: 800 !important;
}
.continueCard {
  background: #ffffff !important;
  border: 2px solid #105f68 !important;
  box-shadow: 0 16px 40px rgba(16, 95, 104, 0.2) !important;
  border-radius: 22px !important;
  padding: 24px !important;
}
.continueCard h3 {
  color: #0b3d43 !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}
.continueCard p {
  color: #3b747a !important;
  font-weight: 600 !important;
}
.hubCard, .supportHub {
  background: #ffffff !important;
  border: 2px solid #bce2de !important;
  box-shadow: 0 12px 30px rgba(16, 95, 104, 0.12) !important;
  border-radius: 22px !important;
  padding: 22px !important;
}
.hubCard:hover, .supportHub:hover {
  border-color: #105f68 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 45px rgba(16, 95, 104, 0.22) !important;
}
.hubCard strong, .supportHub strong {
  color: #0b3d43 !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  text-shadow: none !important;
}
.hubCard span, .supportHub span {
  color: #167680 !important;
  font-weight: 800 !important;
}
.hubCard p, .supportHub p {
  color: #3b747a !important;
  font-weight: 600 !important;
}

/* 4. Featured Course Cover redesign (Fixing dark/blurry text on emerald background) */
.courseCover {
  background: linear-gradient(135deg, #09474f 0%, #0d5962 50%, #167680 100%) !important;
  border: 2px solid #63c1bb !important;
  box-shadow: 0 25px 65px rgba(9, 71, 79, 0.4) !important;
  border-radius: 26px !important;
  padding: 32px !important;
  color: #ffffff !important;
}
.courseMain h2 {
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6) !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin: 14px 0 10px 0 !important;
  letter-spacing: -0.5px !important;
}
.courseMain h3 {
  color: #ffd875 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 14px !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}
.courseMain > p {
  color: #e3f6f4 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  margin-bottom: 20px !important;
}
.commercialBadge {
  background: linear-gradient(135deg, #ffd875 0%, #e7b84f 50%, #d99b26 100%) !important;
  color: #04292e !important;
  font-weight: 800 !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 15px rgba(231, 184, 79, 0.5) !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  display: inline-block !important;
}
.courseFacts span b {
  color: #ffffff !important;
  font-size: 15px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}
.courseFacts span small {
  color: #9ed5d1 !important;
  font-size: 11px !important;
}
.courseAction {
  background: rgba(4, 40, 44, 0.45) !important;
  border: 1px solid rgba(158, 213, 209, 0.3) !important;
  border-radius: 20px !important;
  padding: 20px !important;
}
.courseAction b {
  color: #ffd875 !important;
  font-size: 20px !important;
}
.courseAction button {
  background: linear-gradient(135deg, #ffd875 0%, #e7b84f 100%) !important;
  color: #04292e !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(231, 184, 79, 0.4) !important;
  padding: 12px 24px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
}
.courseAction button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 25px rgba(231, 184, 79, 0.6) !important;
}

/* 5. Live Study Card redesign (Fixing dark/blurry text in right sidebar) */
.now {
  background: linear-gradient(155deg, #09474f 0%, #06383e 50%, #04292e 100%) !important;
  border: 2px solid #63c1bb !important;
  box-shadow: 0 25px 65px rgba(6, 56, 62, 0.4) !important;
  border-radius: 26px !important;
  padding: 28px !important;
  color: #ffffff !important;
}
.now > label {
  color: #ffd875 !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
}
.now > span {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 12px !important;
}
.now h2 {
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  margin: 16px 0 !important;
}
.now .instructor p b {
  color: #ffffff !important;
  font-size: 14px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}
.now .instructor p small {
  color: #9ed5d1 !important;
}
.now .bar {
  background: rgba(255, 255, 255, 0.15) !important;
  height: 10px !important;
  border-radius: 6px !important;
}
.now .bar i {
  background: linear-gradient(90deg, #63c1bb, #ffd875) !important;
  box-shadow: 0 0 10px rgba(99, 193, 187, 0.8) !important;
}
.now .bar b {
  color: #ffd875 !important;
  font-weight: 800 !important;
}
.now button[data-play] {
  background: linear-gradient(135deg, #ffd875 0%, #e7b84f 100%) !important;
  color: #04292e !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(231, 184, 79, 0.4) !important;
  padding: 14px 24px !important;
  border-radius: 16px !important;
  font-size: 15px !important;
  width: 100% !important;
  margin-top: 10px !important;
}
.now button[data-play]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 25px rgba(231, 184, 79, 0.6) !important;
}
.streak {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  margin-top: 20px !important;
}
.streak small {
  color: #9ed5d1 !important;
}
.streak b {
  color: #ffd875 !important;
  font-weight: 800 !important;
}

/* --- J. MASTERCLASS CRYSTAL-CLEAR HIGH-CONTRAST OVERHAUL (FIXING 5 BLURRY CARDS & BANNER MARGIN) --- */

/* 1. Banner margin - leaving balanced breathing room */
.homeSlider {
  max-width: calc(100% - 48px) !important;
  width: calc(100% - 48px) !important;
  margin: 24px auto 36px auto !important;
  border-radius: 28px !important;
  height: clamp(520px, 58vw, 700px) !important;
  box-shadow: 0 25px 70px rgba(4, 40, 44, 0.25) !important;
}

/* GLOBAL SECTION CONTAINERS: Crisp mint-ice framing with strong contrast */
.dashboard .curriculum, .published, .learningTools, .videos, .notes, .awards {
  background: #f0f9f8 !important;
  border: 2px solid #bce2de !important;
  border-radius: 28px !important;
  padding: 32px !important;
  box-shadow: 0 20px 50px rgba(16, 95, 104, 0.12) !important;
  margin-bottom: 36px !important;
}
.title p > b, .title h2, .published .title b, .learningTools .title b, .videos .title b {
  color: #0b3d43 !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}
.title p > label, .title label {
  color: #105f68 !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
}

/* 2. Curriculum & Module Cards (Image 2) - Crisp high-contrast redesign */
.module {
  background: #ffffff !important;
  border: 2px solid #105f68 !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 35px rgba(16, 95, 104, 0.15) !important;
  margin-bottom: 24px !important;
  overflow: hidden !important;
}
.chapterHead {
  background: linear-gradient(135deg, #0d5962 0%, #167680 100%) !important;
  color: #ffffff !important;
  padding: 20px 24px !important;
  border-bottom: 2px solid #105f68 !important;
}
.chapterHead .chapterLabel {
  background: linear-gradient(135deg, #ffd875, #e7b84f) !important;
  color: #06383e !important;
  font-weight: 800 !important;
  padding: 6px 14px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
}
.chapterHead .modTitle b {
  color: #ffffff !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}
.chapterHead .modTitle small {
  color: #e3f6f4 !important;
  font-size: 13px !important;
}
.chapterHead .chapterMeta b {
  color: #ffd875 !important;
  font-size: 14px !important;
}
.chapterHead .chapterMeta small {
  color: #9ed5d1 !important;
}
.lesson {
  background: #ffffff !important;
  border-bottom: 1px solid #e0f2f0 !important;
  padding: 16px 24px !important;
  transition: all 0.25s ease !important;
}
.lesson:hover {
  background: #f4fbfa !important;
}
.lesson .state {
  background: #edf7f6 !important;
  color: #105f68 !important;
  border: 1px solid #c8e6e2 !important;
  font-weight: 800 !important;
}
.lesson .state.done {
  background: linear-gradient(135deg, #105f68, #1c8894) !important;
  color: #ffffff !important;
  border-color: #105f68 !important;
}
.lesson .lessonText b {
  color: #0b3d43 !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  text-shadow: none !important;
}
.lesson .lessonText em {
  color: #3b747a !important;
  font-weight: 600 !important;
}
.lesson .time b {
  color: #105f68 !important;
  font-weight: 800 !important;
}
.lesson button[data-play] {
  background: #105f68 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(16, 95, 104, 0.25) !important;
}
.lesson button[data-play]:hover {
  background: #0d5962 !important;
  transform: translateX(4px) !important;
}

/* 3. Published Articles & Videos (Image 3) - Crisp high-contrast cards */
.managedCard {
  background: #ffffff !important;
  border: 2px solid #105f68 !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 40px rgba(16, 95, 104, 0.16) !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.managedCard:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 55px rgba(16, 95, 104, 0.26) !important;
  border-color: #0d5962 !important;
}
.managedCard > div:last-child {
  padding: 24px !important;
  background: #ffffff !important;
}
.managedCard h3 {
  color: #0b3d43 !important;
  font-weight: 800 !important;
  font-size: 19px !important;
  line-height: 1.4 !important;
  margin: 12px 0 8px 0 !important;
  text-shadow: none !important;
}
.managedCard p {
  color: #2c6368 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
.managedCard .managedMeta span {
  color: #105f68 !important;
  font-weight: 800 !important;
}
.managedCard button {
  color: #105f68 !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  margin-top: 14px !important;
}

/* 4. Learning Tools Cards (Image 4) - Crisp high-contrast cards */
.toolCard {
  background: #ffffff !important;
  border: 2px solid #105f68 !important;
  border-radius: 22px !important;
  padding: 26px !important;
  box-shadow: 0 16px 40px rgba(16, 95, 104, 0.16) !important;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.toolCard:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 55px rgba(16, 95, 104, 0.26) !important;
  border-color: #0d5962 !important;
}
.toolCard i {
  background: linear-gradient(135deg, #105f68, #1c8894) !important;
  color: #ffffff !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  font-size: 24px !important;
  box-shadow: 0 6px 18px rgba(16, 95, 104, 0.3) !important;
}
.toolCard span {
  color: #105f68 !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  font-size: 12px !important;
}
.toolCard h3 {
  color: #0b3d43 !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  text-shadow: none !important;
  margin: 12px 0 8px 0 !important;
}
.toolCard p {
  color: #2c6368 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.toolCard button {
  background: #edf7f6 !important;
  color: #105f68 !important;
  border: 2px solid #105f68 !important;
  font-weight: 800 !important;
  padding: 12px 20px !important;
  border-radius: 14px !important;
  width: 100% !important;
  margin-top: 16px !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
}
.toolCard button:hover {
  background: #105f68 !important;
  color: #ffffff !important;
}

/* 5. Video Library Cards (Image 5) - Crisp high-contrast redesign */
.videoCard {
  background: #ffffff !important;
  border: 2px solid #105f68 !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 40px rgba(16, 95, 104, 0.16) !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.videoCard:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 55px rgba(16, 95, 104, 0.28) !important;
  border-color: #0d5962 !important;
}
.videoBody {
  padding: 22px !important;
  background: #ffffff !important;
}
.videoBody .tag {
  background: linear-gradient(135deg, #ffd875, #e7b84f) !important;
  color: #06383e !important;
  font-weight: 800 !important;
  padding: 6px 14px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  display: inline-block !important;
}
.videoBody h3 {
  color: #0b3d43 !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  margin: 12px 0 16px 0 !important;
  text-shadow: none !important;
}
.videoBody footer label {
  color: #105f68 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}
.videoBody footer button {
  background: #105f68 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(16, 95, 104, 0.3) !important;
  transition: all 0.2s ease !important;
}
.videoBody footer button:hover {
  background: #0d5962 !important;
  transform: translateX(4px) !important;
}

/* --- K. COMPLETE OVERHAUL FOR LATEST 3 USER REQUESTS --- */

/* 1. Banner extra breathing space / margin */
.homeSlider {
  max-width: calc(100% - 140px) !important;
  margin: 40px auto 52px auto !important;
  border-radius: 36px !important;
  box-shadow: 0 30px 80px rgba(6, 56, 62, 0.45) !important;
}
@media (max-width: 900px) {
  .homeSlider {
    max-width: calc(100% - 40px) !important;
    margin: 24px auto 32px auto !important;
  }
}

/* 2. Cover Image Resize - Perfectly fit aspect ratio */
.managedMedia {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 180px !important;
  max-height: 250px !important;
  padding: 0 !important;
  border: none !important;
  border-bottom: 2px solid #105f68 !important;
  overflow: hidden !important;
  background: #0c626a !important;
}
.managedMedia img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.45s ease, filter 0.45s ease !important;
}
.managedCard:hover .managedMedia img {
  transform: scale(1.08) !important;
  filter: saturate(1.1) !important;
}

/* 3. Notes & Awards Section redesign (Image 3) - Eliminating all blurry text and cards */
.notes, .awards {
  background: #f0f9f8 !important;
  border: 2px solid #bce2de !important;
  border-radius: 28px !important;
  padding: 34px !important;
  box-shadow: 0 20px 55px rgba(16, 95, 104, 0.12) !important;
  margin-bottom: 40px !important;
}
.notes label, .awards .title label {
  color: #105f68 !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  font-size: 13px !important;
}
.notes h2, .awards .title b {
  color: #0b3d43 !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  margin: 6px 0 !important;
  display: block !important;
}
.notes > div:first-child p, .awards .title p > span, .awards .title span {
  color: #2c6368 !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}
.notes textarea, #note {
  background: #ffffff !important;
  border: 2px solid #105f68 !important;
  border-radius: 18px !important;
  padding: 18px !important;
  color: #0b3d43 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 25px rgba(16, 95, 104, 0.1) !important;
  width: 100% !important;
  min-height: 140px !important;
  margin-top: 14px !important;
}
.notes textarea::placeholder, #note::placeholder {
  color: #5d8e92 !important;
  font-weight: 500 !important;
}
.notes footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 16px !important;
}
.notes button, #save, .notes .primary {
  background: linear-gradient(135deg, #105f68, #18828e) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  padding: 12px 26px !important;
  border-radius: 14px !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(16, 95, 104, 0.3) !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.notes button:hover, #save:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(16, 95, 104, 0.45) !important;
  background: #0d5962 !important;
}
.notes small, #noteStatus {
  color: #105f68 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

/* Awards Grid & Cards */
.awards > div:last-child {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 20px !important;
  margin-top: 24px !important;
}
.awards article {
  background: #ffffff !important;
  border: 2px solid #105f68 !important;
  border-radius: 22px !important;
  padding: 24px !important;
  box-shadow: 0 14px 35px rgba(16, 95, 104, 0.14) !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.awards article:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 55px rgba(16, 95, 104, 0.26) !important;
  border-color: #0d5962 !important;
  background: #ffffff !important;
}
.awards article p {
  margin: 0 !important;
}
.awards article b {
  color: #0b3d43 !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  display: block !important;
  margin-bottom: 4px !important;
  text-shadow: none !important;
}
.awards article small {
  color: #2c6368 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  display: block !important;
}

/* ==========================================================================
   L. LUXURY ACCURACY UPGRADE FOR 6 LATEST USER REQUESTS
   ========================================================================== */

/* 1. Article Viewing Popup - High Contrast, Prominent & Easy to Read (Request 1) */
.articleModal, .contentViewer {
  background: rgba(6, 39, 42, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  z-index: 500 !important;
}
.articleReader, .contentViewer > article {
  background: #ffffff !important;
  border: 2px solid #105f68 !important;
  border-radius: 28px !important;
  box-shadow: 0 35px 100px rgba(6, 39, 42, 0.6) !important;
  width: min(880px, 94vw) !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  position: relative !important;
}
.articleReader > img, .contentViewer img {
  height: 340px !important;
  width: 100% !important;
  object-fit: cover !important;
  border-bottom: 3px solid #105f68 !important;
  display: block !important;
}
.articleBody, #viewerContent {
  padding: 36px 44px !important;
}
.articleBody > span, #viewerCategory {
  background: #e0f2f0 !important;
  color: #105f68 !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  letter-spacing: 1.5px !important;
  display: inline-block !important;
  border: 1px solid #63c1bb !important;
  margin-bottom: 12px !important;
}
.articleBody h2, #viewerTitle {
  color: #06272a !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  margin: 8px 0 16px 0 !important;
  letter-spacing: -0.5px !important;
}
.articleMeta, #viewerMeta {
  color: #52757a !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding-bottom: 20px !important;
  margin-bottom: 24px !important;
  border-bottom: 2px solid #e0f2f0 !important;
}
#articleContent, #viewerSummary {
  color: #1a4449 !important;
  font-size: 16px !important;
  line-height: 1.85 !important;
  font-weight: 500 !important;
}
#articleContent p, #viewerSummary p {
  margin-bottom: 18px !important;
}
#articleContent h3 {
  color: #0b3d43 !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  margin: 32px 0 14px 0 !important;
  padding-left: 16px !important;
  border-left: 4px solid #105f68 !important;
}
.articleBody .primary, button[data-close-article], button[data-close-viewer] {
  background: linear-gradient(135deg, #105f68, #18828e) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  padding: 14px 32px !important;
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 8px 25px rgba(16, 95, 104, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  display: inline-block !important;
  margin-top: 20px !important;
}
.articleBody .primary:hover, button[data-close-article]:hover, button[data-close-viewer]:hover {
  background: linear-gradient(135deg, #e7b84f, #d99b26) !important;
  color: #06272a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(231, 184, 79, 0.45) !important;
}

/* 2. Notification Bell & Popup Panel - High Visibility & Crisp Styling (Request 2) */
#notificationButton, .notificationBtn {
  background: linear-gradient(135deg, #105f68, #18828e) !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 4px 15px rgba(16, 95, 104, 0.35) !important;
  border-radius: 14px !important;
  padding: 10px !important;
  position: relative !important;
  transition: all 0.2s ease !important;
}
#notificationButton:hover, .notificationBtn:hover {
  background: linear-gradient(135deg, #e7b84f, #d99b26) !important;
  color: #06272a !important;
  transform: scale(1.08) !important;
}
#notificationBadge {
  background: #d9383a !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  padding: 2px 6px !important;
  border-radius: 10px !important;
  border: 2px solid #ffffff !important;
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  font-style: normal !important;
}
#notificationPanel, .notificationPanel {
  background: #ffffff !important;
  border: 2px solid #105f68 !important;
  border-radius: 24px !important;
  box-shadow: 0 25px 80px rgba(6, 56, 62, 0.45) !important;
  width: min(400px, 92vw) !important;
  padding: 0 !important;
  overflow: hidden !important;
  z-index: 1000 !important;
}
#notificationPanel > div:first-child, .notificationPanel > div:first-child {
  background: linear-gradient(135deg, #105f68, #1a8894) !important;
  color: #ffffff !important;
  padding: 18px 22px !important;
  border-bottom: 2px solid #0d5962 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
#notificationPanel > div:first-child b, .notificationPanel > div:first-child b {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}
#markRead {
  background: rgba(0, 0, 0, 0.25) !important;
  color: #ffd875 !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  transition: all 0.2s !important;
  cursor: pointer !important;
}
#markRead:hover {
  background: #ffd875 !important;
  color: #06272a !important;
}
#notificationPanel article, .notificationPanel article {
  background: #ffffff !important;
  border-bottom: 1px solid #e0f2f0 !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}
#notificationPanel article:last-child, .notificationPanel article:last-child {
  border-bottom: none !important;
}
#notificationPanel article:hover, .notificationPanel article:hover {
  background: #f0fbfa !important;
  padding-left: 24px !important;
  border-left: 4px solid #105f68 !important;
}
#notificationPanel article b, .notificationPanel article b {
  color: #0b3d43 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  display: block !important;
  margin-bottom: 4px !important;
}
#notificationPanel article span, .notificationPanel article span {
  color: #2c6368 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  display: block !important;
}

/* 3 & 4. Prominent Modal Close Buttons & Responsive Shades (Requests 3 & 4) */
.loginClose, .registerClose, .memberClose, .articleClose, .forgotClose, .x, [data-close-login], [data-close-register] {
  position: absolute !important;
  right: 18px !important;
  top: 18px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: #f0f9f8 !important;
  color: #105f68 !important;
  border: 2px solid #105f68 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  display: grid !important;
  place-items: center !important;
  z-index: 9999 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s ease !important;
}
.loginClose:hover, .registerClose:hover, .memberClose:hover, .articleClose:hover, .forgotClose:hover, .x:hover, [data-close-login]:hover, [data-close-register]:hover {
  background: #d9383a !important;
  color: #ffffff !important;
  border-color: #d9383a !important;
  transform: scale(1.15) rotate(90deg) !important;
  box-shadow: 0 6px 18px rgba(217, 56, 58, 0.45) !important;
}
.loginShade, .memberShade, .articleShade, .shade, .quizShade, .forgotShade, .modalShade {
  cursor: pointer !important;
}

/* 5. Crisp Solid Borders for Lessons and Cards (Request 5) */
.lesson {
  background: #ffffff !important;
  border: 2px solid #105f68 !important;
  border-radius: 16px !important;
  margin: 10px 16px !important;
  padding: 14px 18px !important;
  box-shadow: 0 6px 18px rgba(16, 95, 104, 0.12) !important;
  transition: all 0.25s ease !important;
}
.lesson:hover {
  background: #f0fbfa !important;
  border-color: #0d5962 !important;
  transform: translateX(6px) !important;
  box-shadow: 0 10px 25px rgba(16, 95, 104, 0.22) !important;
}
.module, .videoCard, .managedCard, .continueCard, .hubCard, .toolCard, .commentCard, .qaItem {
  border: 2px solid #105f68 !important;
  box-shadow: 0 10px 28px rgba(16, 95, 104, 0.12) !important;
}

/* 6. Perfect Equal Widths & Vertical Alignment Across All Sections (Request 6) */
.homeSlider,
.learnerHub,
.dashboard,
.published,
.learningTools,
.videos,
.notes,
.awards {
  width: calc(100% - 80px) !important;
  max-width: 1360px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
@media (max-width: 900px) {
  .homeSlider,
  .learnerHub,
  .dashboard,
  .published,
  .learningTools,
  .videos,
  .notes,
  .awards {
    width: calc(100% - 32px) !important;
  }
}
@media (max-width: 760px) {
  .articleBody, #viewerContent {
    padding: 24px !important;
  }
  .articleBody h2, #viewerTitle {
    font-size: 24px !important;
  }
  .loginClose, .registerClose, .memberClose, .articleClose, .forgotClose, .x {
    right: 12px !important;
    top: 12px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 20px !important;
  }
}

/* ==========================================================================
   SECTION M: CHECKPOINT 11 REFINEMENTS
   1. Banner height expanded slightly to fill empty space elegantly without losing balance (Request 2)
   2. Frosted glass notification bell & pulsing badge styling (Request 3)
   3. VIP Student Membership Pass styling for registration success & profile display (Request 4)
   ========================================================================== */

/* 1. Banner Height Expanded Further to Cover Empty Space (Request 2) */
.homeSlider {
  height: clamp(580px, 64vw, 780px) !important;
  margin: 24px auto 38px auto !important;
}
.homeSlide {
  background-size: cover !important;
  background-position: center !important;
}

/* 2. Frosted Glass Notification Bell & Pulsing Ruby Badge */
#notificationButton, .notificationBtn {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(8px) !important;
}
#notificationButton:hover, .notificationBtn:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  color: #ffd875 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}
#notificationBadge {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  padding: 2px 6px !important;
  border-radius: 12px !important;
  border: 2px solid #0d5962 !important;
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.6) !important;
  animation: badgePulse 2s infinite ease-in-out !important;
}
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.8) !important; }
}

/* 3. VIP Student Membership Pass (Request 4) */
.vipMemberPass {
  background: linear-gradient(135deg, #0d5962 0%, #08434a 50%, #052c30 100%) !important;
  border: 2px solid #63c1bb !important;
  border-radius: 24px !important;
  padding: 24px !important;
  margin: 22px auto !important;
  max-width: 580px !important;
  color: #ffffff !important;
  box-shadow: 0 20px 50px rgba(6, 56, 62, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  text-align: left !important;
  position: relative !important;
  overflow: hidden !important;
}
.vipMemberPass::after {
  content: "👑" !important;
  position: absolute !important;
  right: -15px !important;
  top: -15px !important;
  font-size: 120px !important;
  opacity: 0.08 !important;
  pointer-events: none !important;
}
.vipPassHeader {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(158, 213, 209, 0.25) !important;
}
.vipAvatar {
  width: 68px !important;
  height: 68px !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #e7b84f, #d99b26) !important;
  color: #06383e !important;
  font: 800 24px Georgia, serif !important;
  display: grid !important;
  place-items: center !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
  flex: 0 0 auto !important;
}
.vipTitle {
  flex: 1 !important;
}
.vipTitle small {
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  font-weight: 800 !important;
  color: #9ed5d1 !important;
  display: block !important;
}
.vipTitle h3 {
  font-size: 24px !important;
  color: #ffffff !important;
  margin: 4px 0 6px 0 !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}
.vipStatusBadge {
  display: inline-block !important;
  background: rgba(99, 193, 187, 0.2) !important;
  border: 1px solid #63c1bb !important;
  color: #c8e6e2 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.vipPassBody {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  padding: 18px 0 !important;
}
.vipField {
  background: rgba(0, 0, 0, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 16px !important;
  padding: 14px !important;
}
.vipField small {
  font-size: 10px !important;
  letter-spacing: 1px !important;
  color: #9ed5d1 !important;
  display: block !important;
  margin-bottom: 6px !important;
  font-weight: 700 !important;
}
.vipField b {
  font-size: 14px !important;
  color: #ffd875 !important;
  display: block !important;
  font-weight: 800 !important;
  word-break: break-word !important;
}
.vipPassFooter {
  padding-top: 14px !important;
  border-top: 1px solid rgba(158, 213, 209, 0.25) !important;
  font-size: 13px !important;
  color: #c8e6e2 !important;
  text-align: center !important;
  font-weight: 500 !important;
}
@media (max-width: 650px) {
  .vipPassBody {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   N. REFINEMENTS FOR CHECKPOINT 14 (RED DOT, BANNER HEIGHT, SECTION MARGINS)
   ========================================================================== */

/* 1. Eliminate Top-Left Artifacts & Unwanted Red Dots (Request 1) */
.siteProgressVisual,
aside#side::before, aside#side::after,
.brand::before, .brand::after {
  display: none !important;
  content: none !important;
}

/* 2. Responsive Banner Height Adjustment (Request 2) */
@media (max-width: 760px) {
  .homeSlider {
    height: 580px !important;
    margin-bottom: 34px !important;
  }
}

/* 3. Consistent Spacing Between Dashboard and Published Sections (Request 3) */
.homeSlider,
.learnerHub,
.dashboard,
.published,
.learningTools,
.videos,
.notes,
.awards {
  margin-bottom: 48px !important;
}
.dashboard {
  padding-bottom: 14px !important;
}
.curriculum, .now {
  margin-bottom: 24px !important;
}
@media (max-width: 900px) {
  .homeSlider,
  .learnerHub,
  .dashboard,
  .published,
  .learningTools,
  .videos,
  .notes,
  .awards {
    margin-bottom: 38px !important;
  }
}

/* ==========================================================================
   SECTION O: ADVANCED ADMIN DASHBOARD REDESIGN & AVATAR UPLOAD (Request 1 & 3)
   ========================================================================== */

/* 1. Avatar Hover & Upload Tooltip in Left Sidebar */
aside#side .avatar {
  position: relative !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
aside#side .avatar:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 4px 14px rgba(99, 193, 187, 0.4) !important;
}
aside#side .avatar::after {
  content: "📷";
  position: absolute;
  inset: 0;
  background: rgba(13, 89, 98, 0.75);
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  backdrop-filter: blur(2px);
}
aside#side .avatar:hover::after {
  opacity: 1;
}

/* 2. Total Redesign of Admin Page (.adminPage) */
body.adminPage {
  background: linear-gradient(135deg, #f0f7f6 0%, #e6f2f0 100%) !important;
  color: #12373b !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  min-height: 100vh !important;
}

/* 3. Sleek Premium Sidebar (.adminSide) */
.adminSide {
  background: linear-gradient(180deg, #07353b 0%, #0d5962 55%, #052c30 100%) !important;
  box-shadow: 4px 0 24px rgba(7, 53, 59, 0.25) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 28px 20px !important;
  z-index: 100 !important;
}
.adminSide .brand b {
  font-size: 16px !important;
  letter-spacing: 0.5px !important;
  color: #ffffff !important;
}
.adminSide .brand small {
  font-size: 10px !important;
  color: #63c1bb !important;
  letter-spacing: 1.5px !important;
  font-weight: 700 !important;
  margin-top: 3px !important;
}
.adminSide nav {
  gap: 8px !important;
  margin-top: 24px !important;
}
.adminSide nav button {
  padding: 14px 16px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #c4ebe7 !important;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  border: 1px solid transparent !important;
}
.adminSide nav button:hover {
  background: rgba(99, 193, 187, 0.18) !important;
  color: #ffffff !important;
  transform: translateX(4px) !important;
}
.adminSide nav button.active {
  background: linear-gradient(135deg, #106f7a, #0d5962) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(99, 193, 187, 0.35) !important;
}

/* 4. Admin Main Content Area & Header */
.adminMain {
  padding: 36px 42px !important;
  max-width: 1600px !important;
}
.adminMain > header {
  margin-bottom: 32px !important;
  align-items: center !important;
}
.adminMain > header span {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #3a9295 !important;
  letter-spacing: 2px !important;
}
.adminMain > header h1 {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #0d5962 !important;
  margin-top: 6px !important;
  letter-spacing: -0.5px !important;
}
#newContent {
  background: linear-gradient(135deg, #0d5962, #07353b) !important;
  color: #ffffff !important;
  border: 1px solid #63c1bb !important;
  border-radius: 14px !important;
  padding: 14px 26px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 25px rgba(13, 89, 98, 0.25) !important;
  transition: all 0.25s ease !important;
}
#newContent:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 16px 32px rgba(13, 89, 98, 0.35) !important;
  background: linear-gradient(135deg, #106f7a, #0d5962) !important;
}

/* 5. Modern Stat Cards (.adminStats) */
.adminStats {
  gap: 20px !important;
  margin: 32px 0 38px !important;
}
.adminStats article {
  background: #ffffff !important;
  border: 1px solid rgba(16, 95, 104, 0.15) !important;
  border-radius: 20px !important;
  padding: 24px 22px !important;
  box-shadow: 0 10px 30px rgba(16, 95, 104, 0.07) !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}
.adminStats article:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 20px 45px rgba(16, 95, 104, 0.16) !important;
  border-color: #63c1bb !important;
}
.adminStats article::before {
  content: "";
  position: absolute;
  top: -30px; right: -30px; width: 110px; height: 110px;
  background: radial-gradient(circle, rgba(99, 193, 187, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.adminStats article > span {
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 24px !important;
  background: linear-gradient(135deg, #e4f6f4, #c8e6e2) !important;
  color: #0d5962 !important;
  box-shadow: 0 8px 18px rgba(16, 95, 104, 0.12) !important;
  flex: 0 0 auto !important;
}
.adminStats small {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #12373b !important;
  margin-bottom: 4px !important;
}
.adminStats b {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #0d5962 !important;
  line-height: 1.1 !important;
}
.adminStats em {
  font-size: 11px !important;
  color: #3a9295 !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
}

/* 6. High-Contrast Workspaces & Tables */
.adminWorkspace, .questionWorkspace, .memberWorkspace {
  background: #ffffff !important;
  border: 1px solid rgba(16, 95, 104, 0.15) !important;
  border-radius: 24px !important;
  padding: 30px !important;
  box-shadow: 0 16px 40px rgba(16, 95, 104, 0.07) !important;
  margin-bottom: 34px !important;
  transition: box-shadow 0.3s ease !important;
}
.adminWorkspace:hover, .questionWorkspace:hover, .memberWorkspace:hover {
  box-shadow: 0 20px 50px rgba(16, 95, 104, 0.11) !important;
}
.adminTitle {
  margin-bottom: 24px !important;
  padding-bottom: 18px !important;
  border-bottom: 2px solid rgba(16, 95, 104, 0.08) !important;
}
.adminTitle span {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #3a9295 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}
.adminTitle h2 {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #12373b !important;
  margin-top: 6px !important;
}
.adminTitle input, #memberSearch, #adminSearch {
  border: 1.5px solid rgba(16, 95, 104, 0.25) !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  font-size: 13px !important;
  background: #f8fcfb !important;
  color: #12373b !important;
  transition: all 0.25s !important;
  width: 280px !important;
}
.adminTitle input:focus, #memberSearch:focus, #adminSearch:focus {
  border-color: #0d5962 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(99, 193, 187, 0.25) !important;
  outline: none !important;
}
.adminHead, .memberHead {
  background: linear-gradient(90deg, #e4f4f2, #edf7f6) !important;
  color: #0d5962 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 16px !important;
  border-radius: 12px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border: none !important;
}
.adminRow, .memberRow {
  font-size: 13px !important;
  padding: 18px 16px !important;
  border-bottom: 1px solid rgba(16, 95, 104, 0.1) !important;
  transition: all 0.2s ease !important;
  color: #12373b !important;
  align-items: center !important;
}
.adminRow:hover, .memberRow:hover {
  background: #f4fcfa !important;
  transform: scale(1.005) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(16, 95, 104, 0.06) !important;
}
.adminRow b, .memberRow b {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0d5962 !important;
}
.adminRow small, .memberRow small {
  font-size: 11px !important;
  color: #647b7e !important;
  margin-top: 4px !important;
}
.adminRow em.published {
  background: linear-gradient(135deg, #d3f3e3, #b8eae1) !important;
  color: #0d5962 !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  display: inline-block !important;
  box-shadow: 0 2px 6px rgba(13, 89, 98, 0.12) !important;
}
.adminRow em.draft {
  background: #e9f0f0 !important;
  color: #556869 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  display: inline-block !important;
}
.adminRow button, .memberRow button, #exportMembers {
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.25s !important;
}
.adminRow button, .memberRow button {
  border: 1.5px solid rgba(16, 95, 104, 0.25) !important;
  background: #ffffff !important;
  color: #0d5962 !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
}
.adminRow button:hover, .memberRow button:hover {
  background: #0d5962 !important;
  color: #ffffff !important;
  border-color: #0d5962 !important;
  box-shadow: 0 6px 14px rgba(13, 89, 98, 0.2) !important;
  transform: translateY(-2px) !important;
}
.adminRow button.danger:hover {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(239, 68, 68, 0.25) !important;
}
#exportMembers {
  background: linear-gradient(135deg, #0d5962, #08434a) !important;
  color: #ffffff !important;
  border: 1px solid #63c1bb !important;
  border-radius: 12px !important;
  padding: 12px 22px !important;
  font-size: 13px !important;
  box-shadow: 0 8px 20px rgba(13, 89, 98, 0.2) !important;
}
#exportMembers:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 12px 28px rgba(13, 89, 98, 0.3) !important;
  background: linear-gradient(135deg, #106f7a, #0d5962) !important;
}

/* 7. Member Metrics & Q&A Cards */
.memberMetrics span {
  background: #ffffff !important;
  border: 1px solid rgba(16, 95, 104, 0.15) !important;
  border-radius: 16px !important;
  padding: 18px !important;
  box-shadow: 0 6px 18px rgba(16, 95, 104, 0.05) !important;
  transition: all 0.25s ease !important;
}
.memberMetrics span:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 26px rgba(16, 95, 104, 0.12) !important;
  border-color: #63c1bb !important;
}
.memberMetrics b {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #0d5962 !important;
}
.memberMetrics small {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #647b7e !important;
}
.adminQuestion {
  padding: 18px !important;
  border-top: 1px solid rgba(16, 95, 104, 0.1) !important;
  transition: background 0.2s ease !important;
}
.adminQuestion:hover {
  background: #f4fcfa !important;
  border-radius: 12px !important;
}
.adminQuestion h3 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0d5962 !important;
}
.adminQuestion p {
  font-size: 13px !important;
  color: #12373b !important;
  margin: 8px 0 !important;
  line-height: 1.5 !important;
}

/* 8. Content Editor Modal */
#contentForm {
  border: 1px solid rgba(16, 95, 104, 0.2) !important;
  box-shadow: 0 25px 60px rgba(6, 39, 42, 0.35) !important;
  border-radius: 24px !important;
  padding: 34px !important;
}
#contentForm h2 {
  font-size: 24px !important;
  color: #0d5962 !important;
  font-weight: 800 !important;
}
#contentForm label {
  font-size: 12px !important;
  color: #12373b !important;
  margin-top: 16px !important;
}
#contentForm input, #contentForm select, #contentForm textarea {
  border: 1.5px solid rgba(16, 95, 104, 0.25) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  transition: border-color 0.2s !important;
}
#contentForm input:focus, #contentForm select:focus, #contentForm textarea:focus {
  border-color: #0d5962 !important;
  box-shadow: 0 0 0 4px rgba(99, 193, 187, 0.2) !important;
  outline: none !important;
}

@media (max-width: 900px) {
  .adminMain {
    padding: 24px 18px !important;
  }
}

/* ==========================================================================
   SECTION P: CHECKPOINT 16 REFINEMENTS (Request 1 to 5)
   ========================================================================== */

/* 1. Expand width horizontally to cover empty space, revert height to original (Request 1) */
.homeSlider, .learnerHub, .dashboard, .published, .learningTools, .videos, .notes, .awards {
  width: calc(100% - 36px) !important;
  max-width: 1560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.homeSlider {
  height: clamp(480px, 52vw, 650px) !important;
  margin: 24px auto 36px auto !important;
}
@media (max-width: 1050px) {
  .homeSlider, .learnerHub, .dashboard, .published, .learningTools, .videos, .notes, .awards {
    width: calc(100% - 24px) !important;
  }
}
@media (max-width: 760px) {
  .homeSlider {
    height: 530px !important;
    width: calc(100% - 18px) !important;
  }
}

/* 2. Enlarge banner text for stronger readability and emphasis (Request 2) */
.slideContent h1 {
  font-size: 46px !important;
  line-height: 1.15 !important;
  margin: 16px 0 !important;
  font-weight: 800 !important;
}
.slideContent > p {
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: #f0faf9 !important;
}
@media (max-width: 1050px) {
  .slideContent h1 { font-size: 38px !important; }
  .slideContent > p { font-size: 15px !important; }
}
@media (max-width: 600px) {
  .slideContent h1 { font-size: 28px !important; }
  .slideContent > p { font-size: 14px !important; }
}

/* 3. Featured Course (.courseCover) frame adjustment & image resize (Request 3) */
.courseCover {
  grid-template-columns: 320px 1fr 240px !important;
  gap: 28px !important;
  padding: 24px !important;
  align-items: center !important;
}
.courseImage {
  width: 100% !important;
  min-height: 190px !important;
  height: 190px !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.28) !important;
}
@media (max-width: 1150px) {
  .courseCover {
    grid-template-columns: 260px 1fr !important;
  }
  .courseAction {
    grid-column: 1 / -1 !important;
  }
}
@media (max-width: 760px) {
  .courseCover {
    grid-template-columns: 1fr !important;
  }
  .courseImage {
    height: 210px !important;
    min-height: 210px !important;
  }
}

/* 4. Fix dark text on dark header in Admin Dashboard (.adminMain header) (Request 4) */
.adminMain > header {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 !important;
  margin-bottom: 32px !important;
}
.adminMain > header span {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #3a9295 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}
.adminMain > header h1 {
  font-size: 34px !important;
  font-weight: 800 !important;
  color: #0d5962 !important;
  margin-top: 6px !important;
  letter-spacing: -0.5px !important;
  text-shadow: none !important;
}

/* 5. Eliminate blurry/washed out cards & text across Admin & Hub (Request 4 & 5) */
.adminWorkspace, .questionWorkspace, .memberWorkspace, .adminStats article,
.hubCard, .continueCard, .videoCard, .managedCard, .toolCard, .awards article, .commentCard, .plan, .offerCard {
  background: #ffffff !important;
  border: 2px solid #8ccac4 !important;
  box-shadow: 0 12px 35px rgba(13, 89, 98, 0.12), 0 2px 8px rgba(13, 89, 98, 0.05) !important;
}
.adminWorkspace:hover, .questionWorkspace:hover, .memberWorkspace:hover, .adminStats article:hover,
.hubCard:hover, .continueCard:hover, .videoCard:hover, .managedCard:hover, .toolCard:hover, .awards article:hover {
  border-color: #0d5962 !important;
  box-shadow: 0 20px 50px rgba(13, 89, 98, 0.2) !important;
}

/* Ensure all card typography and headings are sharp and high contrast */
.adminWorkspace *, .questionWorkspace *, .memberWorkspace *,
.hubCard *, .continueCard *, .videoCard *, .managedCard * {
  text-shadow: none !important;
}
.adminWorkspace p, .questionWorkspace p, .memberWorkspace p,
.hubCard p, .continueCard p, .videoCard p, .managedCard p,
.adminRow small, .memberRow small, .adminQuestion p {
  color: #12373b !important;
  font-weight: 500 !important;
}
.adminTitle h2, .adminRow b, .memberRow b, .adminQuestion h3,
.hubCard h3, .continueCard h3, .videoCard h3, .managedCard h3 {
  color: #07353b !important;
  font-weight: 800 !important;
}

/* High contrast table headers & rows for Admin Dashboard */
.adminHead, .memberHead {
  background: linear-gradient(90deg, #0d5962, #106f7a) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 18px 20px !important;
  border-radius: 14px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  box-shadow: 0 6px 16px rgba(13, 89, 98, 0.2) !important;
}
.adminRow, .memberRow {
  font-size: 14px !important;
  padding: 20px 18px !important;
  border-bottom: 1px solid #d0ebe8 !important;
  color: #07353b !important;
  font-weight: 600 !important;
}
.adminRow:hover, .memberRow:hover {
  background: #eaf8f6 !important;
  border-color: #63c1bb !important;
}
.adminQuestion {
  padding: 22px !important;
  border: 1.5px solid #d0ebe8 !important;
  border-radius: 16px !important;
  margin-bottom: 14px !important;
  background: #fdfefd !important;
  box-shadow: 0 4px 14px rgba(7, 53, 59, 0.04) !important;
}
.adminQuestion:hover {
  background: #f0faf8 !important;
  border-color: #63c1bb !important;
  transform: translateX(4px) !important;
}

/* ==========================================================================
   SECTION Q: CHECKPOINT 18 REFINEMENTS (Items 1 to 4)
   ========================================================================== */

/* ITEM 2: Nổi bật số thứ tự chương học (.chapterLabel) */
.module .chapterLabel {
  width: 58px !important;
  min-height: 58px !important;
  border-radius: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 8px 22px rgba(16, 95, 104, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.8) !important;
  border: 2px solid rgba(255, 255, 255, 0.85) !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}
.module:nth-child(3n+1) .chapterLabel {
  background: linear-gradient(135deg, #106f7a 0%, #063d43 100%) !important;
  color: #ffffff !important;
  border-color: #5aa9c9 !important;
  box-shadow: 0 8px 20px rgba(16, 111, 122, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;
}
.module:nth-child(3n+2) .chapterLabel {
  background: linear-gradient(135deg, #8776c9 0%, #5b47a8 100%) !important;
  color: #ffffff !important;
  border-color: #c3a7ee !important;
  box-shadow: 0 8px 20px rgba(135, 118, 201, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;
}
.module:nth-child(3n) .chapterLabel {
  background: linear-gradient(135deg, #ef846f 0%, #d65539 100%) !important;
  color: #ffffff !important;
  border-color: #f7b3a6 !important;
  box-shadow: 0 8px 20px rgba(239, 132, 111, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;
}
.module:hover .chapterLabel {
  transform: scale(1.08) translateY(-2px) !important;
}

/* ITEM 3: Icon Play giữa khung ảnh, thiết kế nổi bật & hiện đại */
.managedMedia .playOverlay, .videoCard .play, .play-badge span, .videoCard .thumb .play {
  position: absolute !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(239, 132, 111, 0.96), rgba(225, 95, 68, 0.96)) !important;
  color: #ffffff !important;
  font-size: 22px !important;
  border: 3px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 10px 28px rgba(239, 132, 111, 0.55), 0 0 0 8px rgba(239, 132, 111, 0.2) !important;
  display: grid !important;
  place-items: center !important;
  padding-left: 4px !important;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  z-index: 10 !important;
}
.managedMedia:hover .playOverlay, .videoCard:hover .play, .thumb-box:hover .play-badge span, .thumb:hover .play {
  transform: translate(-50%, -50%) scale(1.18) !important;
  background: linear-gradient(135deg, #e7b84f, #ef846f) !important;
  color: #07353b !important;
  border-color: #ffffff !important;
  box-shadow: 0 14px 34px rgba(231, 184, 79, 0.65), 0 0 0 12px rgba(231, 184, 79, 0.28) !important;
}

/* ITEM 4: Thêm màu sắc sống động ở icon và chữ (Công cụ học tập & các thẻ card) */
#toolGrid .toolCard:nth-child(1) i, #toolGrid .toolCard:nth-child(1) .toolIcon {
  background: linear-gradient(135deg, #ef846f 0%, #e15f44 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(239, 132, 111, 0.35) !important;
}
#toolGrid .toolCard:nth-child(1) span.tag { color: #d65539 !important; font-weight: 800 !important; background: #fff3f0 !important; padding: 4px 10px !important; border-radius: 6px !important; }
#toolGrid .toolCard:nth-child(1) h3 { color: #9f3620 !important; font-weight: 800 !important; }
#toolGrid .toolCard:nth-child(1):hover { border-color: #ef846f !important; background: #fffaf9 !important; transform: translateY(-4px) !important; }
#toolGrid .toolCard:nth-child(1) button { color: #d65539 !important; font-weight: 800 !important; }
#toolGrid .toolCard:nth-child(1):hover button { background: #ef846f !important; color: #fff !important; padding: 8px 14px !important; border-radius: 8px !important; }

#toolGrid .toolCard:nth-child(2) i, #toolGrid .toolCard:nth-child(2) .toolIcon {
  background: linear-gradient(135deg, #e7b84f 0%, #d49a1c 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(231, 184, 79, 0.35) !important;
}
#toolGrid .toolCard:nth-child(2) span.tag { color: #c2880c !important; font-weight: 800 !important; background: #fffaf0 !important; padding: 4px 10px !important; border-radius: 6px !important; }
#toolGrid .toolCard:nth-child(2) h3 { color: #825a04 !important; font-weight: 800 !important; }
#toolGrid .toolCard:nth-child(2):hover { border-color: #e7b84f !important; background: #fffcf5 !important; transform: translateY(-4px) !important; }
#toolGrid .toolCard:nth-child(2) button { color: #c2880c !important; font-weight: 800 !important; }
#toolGrid .toolCard:nth-child(2):hover button { background: #e7b84f !important; color: #07353b !important; padding: 8px 14px !important; border-radius: 8px !important; font-weight: 900 !important; }

#toolGrid .toolCard:nth-child(3) i, #toolGrid .toolCard:nth-child(3) .toolIcon {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(56, 189, 248, 0.35) !important;
}
#toolGrid .toolCard:nth-child(3) span.tag { color: #0284c7 !important; font-weight: 800 !important; background: #f0f9ff !important; padding: 4px 10px !important; border-radius: 6px !important; }
#toolGrid .toolCard:nth-child(3) h3 { color: #035b88 !important; font-weight: 800 !important; }
#toolGrid .toolCard:nth-child(3):hover { border-color: #38bdf8 !important; background: #f3fafc !important; transform: translateY(-4px) !important; }
#toolGrid .toolCard:nth-child(3) button { color: #0284c7 !important; font-weight: 800 !important; }
#toolGrid .toolCard:nth-child(3):hover button { background: #0284c7 !important; color: #fff !important; padding: 8px 14px !important; border-radius: 8px !important; }

#toolGrid .toolCard:nth-child(4) i, #toolGrid .toolCard:nth-child(4) .toolIcon {
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(167, 139, 250, 0.35) !important;
}
#toolGrid .toolCard:nth-child(4) span.tag { color: #7c3aed !important; font-weight: 800 !important; background: #f5f3ff !important; padding: 4px 10px !important; border-radius: 6px !important; }
#toolGrid .toolCard:nth-child(4) h3 { color: #5521b5 !important; font-weight: 800 !important; }
#toolGrid .toolCard:nth-child(4):hover { border-color: #a78bfa !important; background: #f9f7ff !important; transform: translateY(-4px) !important; }
#toolGrid .toolCard:nth-child(4) button { color: #7c3aed !important; font-weight: 800 !important; }
#toolGrid .toolCard:nth-child(4):hover button { background: #7c3aed !important; color: #fff !important; padding: 8px 14px !important; border-radius: 8px !important; }

/* ==========================================================================
   SECTION R: COMPLETE IOS & ANDROID MOBILE OPTIMIZATION (CHECKPOINT 19)
   ========================================================================== */

/* REQUEST 1: Chấm đỏ thông báo không hiển thị số, thiết kế chuẩn IOS/Android */
.notificationBtn i, #notificationBadge, .bell i, .topbar .bell i {
  position: absolute !important;
  right: 6px !important;
  top: 6px !important;
  width: 10px !important;
  height: 10px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 50% !important;
  background: #ef846f !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 0 2px rgba(239, 132, 111, 0.35) !important;
  display: block !important;
  overflow: hidden !important;
  text-indent: -9999px !important;
}

/* REQUEST 4: Tối ưu toàn bộ giao diện cho điện thoại Android & IOS (< 768px) */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .app {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  main, .adminMain {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding-bottom: 80px !important;
  }

  /* Header & Top Navigation Bar */
  header, .topbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    min-height: auto !important;
  }
  header #menu, .topbar #menu {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
  }
  .tabs {
    order: 3 !important;
    width: 100% !important;
    display: flex !important;
    gap: 6px !important;
    margin-top: 4px !important;
  }
  .tab {
    flex: 1 !important;
    min-height: 44px !important;
    padding: 6px 10px !important;
    justify-content: center !important;
  }
  .tab span {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
  .search {
    order: 4 !important;
    width: 100% !important;
    margin: 4px 0 !important;
  }
  .search input {
    width: 100% !important;
    height: 44px !important;
    font-size: 14px !important;
  }

  /* Banner Slider */
  .homeSlider {
    height: auto !important;
    min-height: 420px !important;
    margin: 14px 12px !important;
    border-radius: 20px !important;
  }
  .slideContent {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 18px !important;
  }
  .slideContent h1 {
    font-size: 24px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.5px !important;
  }
  .slideContent p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* Grids & Cards */
  .curriculum, .videos, .notes, .awards, .learningTools, .learnerHub {
    padding: 16px 12px !important;
    margin: 0 10px 20px !important;
    border-radius: 18px !important;
  }
  .toolGrid, .videoGrid, .notesGrid, .statGrid, .adminGrid, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .courseCover {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 14px !important;
  }
  .courseImage {
    width: 100% !important;
    height: 180px !important;
  }
  .module {
    padding: 14px 12px !important;
    gap: 10px !important;
  }
  .module .chapterLabel {
    width: 48px !important;
    min-height: 48px !important;
    font-size: 11px !important;
    border-radius: 12px !important;
  }

  /* Modals */
  .modal, .articleModal, .contentViewer, .loginModal, .registerModal, .memberModal, .quizModal, .certificateModal, .contentEditor {
    padding: 10px !important;
  }
  .modal>div, .articleModal>div, .loginCard, .registerCard, .memberCard, .quizCard, .certificate, .editorCard {
    width: 100% !important;
    max-width: 96vw !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding: 20px 16px !important;
    border-radius: 20px !important;
  }
  .notificationPanel {
    position: fixed !important;
    top: 70px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 16px !important;
  }

  /* Admin Table for Mobile */
  .adminTable {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .adminRow {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px !important;
    border-bottom: 1px solid #e2f0ef !important;
  }
  .adminHead {
    display: none !important;
  }
  .adminRow > div, .adminRow > span {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 13px !important;
  }
  .rowActions {
    justify-content: flex-end !important;
    margin-top: 6px !important;
  }
}

/* SMALL MOBILE PHONES (< 430px) */
@media (max-width: 430px) {
  header, .topbar { padding: 8px 10px !important; }
  .slideContent h1 { font-size: 22px !important; }
  .toolCard { padding: 14px !important; }
  .module h4 { font-size: 14px !important; }
}

/* ==========================================================================
   SECTION S: CHECKPOINT 20 ULTRA-PREMIUM MOBILE AND ADMIN OPTIMIZATION
   ========================================================================== */

/* ITEMS 1 & 2: Khắc phục chữ mờ trong Admin, tăng độ tương phản và nổi bật với icon sinh động */
.adminStats article, .memberMetrics span {
  background: #ffffff !important;
  border: 1.5px solid #cbe5e2 !important;
  box-shadow: 0 10px 25px rgba(16, 95, 104, 0.08) !important;
  padding: 16px 20px !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.adminStats article:hover, .memberMetrics span:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 32px rgba(16, 95, 104, 0.15) !important;
  border-color: #106f7a !important;
}
.adminStats article b, .memberMetrics b {
  color: #07353b !important;
  font-weight: 900 !important;
  font-size: 28px !important;
  line-height: 1.1 !important;
  display: block !important;
}
.adminStats article small, .memberMetrics small {
  color: #0d5962 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: block !important;
  margin-bottom: 2px !important;
}
.adminStats article em {
  color: #4a777a !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
.adminTable .adminRow {
  color: #07353b !important;
  font-weight: 600 !important;
}
.adminTable .adminRow small {
  color: #38686d !important;
  font-weight: 500 !important;
}

/* ITEM 5: Tối ưu hình ảnh & bố cục trên điện thoại IOS/Android chuyên nghiệp hơn */
@media (max-width: 768px) {
  .homeSlider {
    min-height: 380px !important;
    margin: 12px 10px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }
  .homeSlide {
    background-size: cover !important;
    background-position: center top !important;
  }
  .courseImage, .thumb, .customAvatarImg, #articleImage {
    object-fit: cover !important;
    border-radius: 14px !important;
    width: 100% !important;
  }
  .courseImage {
    height: 190px !important;
  }
  .videoCard .thumb {
    height: 170px !important;
  }
  /* Bố cục giỏ học, thẻ card trên điện thoại */
  .curriculum, .videos, .notes, .awards, .learningTools, .learnerHub {
    padding: 18px 14px !important;
    margin: 0 8px 20px !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 24px rgba(16, 95, 104, 0.06) !important;
  }
  .module {
    padding: 16px 14px !important;
    border-radius: 16px !important;
    gap: 12px !important;
  }
  .module h4 {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #07353b !important;
  }
  /* Bố cục Quản Trị Viên (Admin) trên điện thoại iOS/Android */
  .adminStats {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .adminStats article {
    padding: 18px 16px !important;
  }
  .memberMetrics {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .memberMetrics span {
    width: 100% !important;
    padding: 16px !important;
  }
  /* Thẻ bảng điều khiển mượt mà trên di động */
  .adminTable .adminRow {
    padding: 14px 12px !important;
    border-radius: 14px !important;
    margin-bottom: 10px !important;
    background: #fdfefd !important;
    border: 1px solid #dceceb !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
  }
  .adminTable .adminRow > div {
    margin-bottom: 6px !important;
  }
  .adminTable .adminRow b {
    font-size: 15px !important;
    color: #07353b !important;
  }
  .rowActions button {
    padding: 8px 16px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }
}
@media (max-width: 430px) {
  header, .topbar {
    padding: 8px !important;
  }
  .registerBtn, .accountBtn, .memberButton {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  .slideContent h1 {
    font-size: 20px !important;
  }
}

/* ==========================================================================
   SECTION T: CHECKPOINT 21 CHAPTER LABEL & BUTTON REFINEMENT
   ========================================================================== */

/* REQUEST 2: Thiết kế lại toàn bộ ô chữ Chương 1 2 3 4 5 ngang mượt mà, không bị bóp nghẹt hay rớt dòng */
.module .chapterLabel, .chapterHead .chapterLabel {
  width: auto !important;
  min-width: 115px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  flex-shrink: 0 !important;
}
.module:nth-child(3n+1) .chapterLabel {
  background: linear-gradient(135deg, #106f7a 0%, #063d43 100%) !important;
  color: #ffffff !important;
  border-color: #63c1bb !important;
  box-shadow: 0 4px 15px rgba(16, 111, 122, 0.3) !important;
}
.module:nth-child(3n+2) .chapterLabel {
  background: linear-gradient(135deg, #8776c9 0%, #5b47a8 100%) !important;
  color: #ffffff !important;
  border-color: #c3a7ee !important;
  box-shadow: 0 4px 15px rgba(135, 118, 201, 0.3) !important;
}
.module:nth-child(3n) .chapterLabel {
  background: linear-gradient(135deg, #ef846f 0%, #d65539 100%) !important;
  color: #ffffff !important;
  border-color: #f7b3a6 !important;
  box-shadow: 0 4px 15px rgba(239, 132, 111, 0.3) !important;
}
.module:nth-child(3n+1) .chapterLabel:before { content: "◈"; font-size: 14px; margin-right: 4px; display: inline-block; }
.module:nth-child(3n+2) .chapterLabel:before { content: "✦"; font-size: 14px; margin-right: 4px; display: inline-block; }
.module:nth-child(3n) .chapterLabel:before { content: "↗"; font-size: 14px; margin-right: 4px; display: inline-block; }
.module > .chapterHead, .chapterHead {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 16px 20px !important;
}
.chapterHead .modTitle {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.chapterHead .modTitle b {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #07353b !important;
  line-height: 1.3 !important;
}
@media (max-width: 430px) {
  .module .chapterLabel, .chapterHead .chapterLabel {
    min-width: 95px !important;
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
  }
}

/* Antigravity Custom Improvements */

/* Fix Video View Frame Aspect Ratio (16:9) */
.frame {
  position: relative !important;
  width: 100% !important;
  padding-bottom: 56.25% !important; /* 16:9 aspect ratio */
  height: 0 !important;
  overflow: hidden !important;
  background: #073f45 !important;
  border-radius: 12px 12px 0 0 !important;
}
.frame iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

/* Modal content sizing and scrolling on desktop */
.modal>article {
  max-height: 90vh !important;
  overflow-y: auto !important;
}

/* Redesign Video Details Section */
.modal article > section {
  padding: 24px 28px !important;
  background: #ffffff !important;
}
#modName {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  color: var(--m) !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 6px !important;
}
#modTitle {
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  background: linear-gradient(100deg, var(--p), var(--m) 70%, var(--a)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  margin: 0 0 12px 0 !important;
}
#modDesc {
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: var(--muted) !important;
  margin: 0 0 24px 0 !important;
}
.lessonCommerce {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 20px !important;
  background: linear-gradient(135deg, #f5fbfc, #edf7f6) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(16, 95, 104, 0.08) !important;
  margin-bottom: 24px !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}
.authorBlock {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.authorPhoto {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 2px solid var(--a) !important;
  box-shadow: 0 4px 10px rgba(16, 95, 104, 0.1) !important;
}
.authorPhoto img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.authorBlock div {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.authorBlock small {
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  color: var(--m) !important;
  margin: 0 !important;
}
.authorBlock b {
  font-size: 14px !important;
  color: var(--p) !important;
}
.authorBlock span {
  font-size: 10px !important;
  color: var(--muted) !important;
}
.lessonActions {
  display: flex !important;
  gap: 10px !important;
  position: relative !important;
}
.lessonActions button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1px solid var(--line) !important;
  background: white !important;
  color: var(--p) !important;
  border-radius: 10px !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 2px 6px rgba(16, 95, 104, 0.04) !important;
}
.lessonActions button:hover {
  border-color: var(--a) !important;
  background: #f3fbfa !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(16, 95, 104, 0.08) !important;
}
.lessonActions button svg {
  width: 14px !important;
  height: 14px !important;
  fill: currentColor !important;
}
.shareMenu {
  position: absolute !important;
  bottom: 100% !important;
  right: 0 !important;
  margin-bottom: 8px !important;
  background: white !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
  display: none !important;
  flex-direction: column !important;
  padding: 6px !important;
  z-index: 10 !important;
  min-width: 150px !important;
}
.shareMenu.open {
  display: flex !important;
}
.shareMenu button {
  border: 0 !important;
  background: none !important;
  text-align: left !important;
  padding: 8px 12px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  width: 100% !important;
  box-shadow: none !important;
}
.shareMenu button:hover {
  background: #f3fbfa !important;
  transform: none !important;
}

/* Modal footer design */
.modal section footer {
  display: flex !important;
  gap: 16px !important;
  align-items: center !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(16, 95, 104, 0.08) !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  margin-top: 24px !important;
}
.modal section footer span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
#complete {
  margin-left: auto !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 10px 20px !important;
  background: linear-gradient(135deg, var(--a), var(--m)) !important;
  color: white !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(99, 193, 187, 0.3) !important;
  transition: all 0.25s ease !important;
}
#complete:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(99, 193, 187, 0.4) !important;
}

/* Premium Q&A Panel */
.qaPanel {
  margin-top: 32px !important;
  border-top: 1px solid rgba(16, 95, 104, 0.08) !important;
  padding-top: 24px !important;
}
.commentCard {
  display: flex !important;
  gap: 12px !important;
  padding: 16px !important;
  border-radius: 12px !important;
  background: #f8fbfb !important;
  border: 1px solid rgba(16, 95, 104, 0.05) !important;
  margin-bottom: 12px !important;
  box-shadow: 0 4px 12px rgba(16, 95, 104, 0.02) !important;
}
.commentAvatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--x) !important;
  color: var(--p) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}
.commentBody {
  flex-grow: 1 !important;
}
.commentTop {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 6px !important;
}
.commentTop b {
  font-size: 12px !important;
  color: var(--p) !important;
}
.commentTop time {
  font-size: 10px !important;
  color: var(--muted) !important;
}
.commentBody p {
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: var(--ink) !important;
  margin: 0 0 10px 0 !important;
}
.commentActions {
  display: flex !important;
  gap: 14px !important;
}
.commentActions button {
  border: 0 !important;
  background: none !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: color 0.2s !important;
  box-shadow: none !important;
}
.commentActions button:hover {
  color: var(--m) !important;
}
.instructorReply {
  display: flex !important;
  gap: 10px !important;
  padding: 12px !important;
  background: white !important;
  border-radius: 8px !important;
  border: 1px solid rgba(16, 95, 104, 0.06) !important;
  margin-top: 12px !important;
}
.instructorAvatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.instructorAvatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.instructorReply span {
  display: block !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  color: var(--gold) !important;
  letter-spacing: 0.5px !important;
}
.instructorReply b {
  font-size: 11px !important;
  color: var(--p) !important;
}
.instructorReply b i {
  color: var(--a) !important;
  font-style: normal !important;
}
.instructorReply p {
  font-size: 11px !important;
  line-height: 1.5 !important;
  color: var(--ink) !important;
  margin: 4px 0 !important;
}
.instructorReply time {
  font-size: 9px !important;
  color: var(--muted) !important;
}
#qaForm {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  margin-top: 20px !important;
}
#qaInput {
  flex-grow: 1 !important;
  height: 70px !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 12px !important;
  resize: none !important;
  outline-color: var(--a) !important;
}
#qaForm button {
  height: 42px !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 0 16px !important;
  background: var(--p) !important;
  color: white !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  transition: all 0.2s !important;
  box-shadow: none !important;
}
.qaPanel > small {
  display: block !important;
  font-size: 9px !important;
  color: var(--muted) !important;
  margin: 8px 0 0 0 !important;
}

/* Local Video Fallback Styling */
.videoFallback {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  color: white !important;
  padding: 24px !important;
  background: linear-gradient(135deg, #0a3d43, #052225) !important;
}
.videoFallbackIcon {
  font-size: 42px !important;
  color: var(--a) !important;
  margin-bottom: 12px !important;
  animation: softPulse 2.4s ease-out infinite !important;
}
.videoFallback h3 {
  font-size: 18px !important;
  margin: 8px 0 4px !important;
  color: white !important;
  font-weight: 750 !important;
}
.videoFallback p {
  font-size: 12px !important;
  color: var(--x) !important;
  margin: 0 0 16px 0 !important;
  max-width: 320px !important;
}
.videoFallback a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  background: linear-gradient(135deg, var(--l), var(--a)) !important;
  color: var(--p) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s !important;
}
.videoFallback a:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35) !important;
}

/* Highlight state/lesson numbers and soften frames */
.state {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(16, 95, 104, 0.15) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--p) !important;
  background: #f3fbfa !important;
  transition: all 0.2s ease !important;
}
.state.done {
  background: linear-gradient(135deg, var(--a), var(--m)) !important;
  color: white !important;
  border-color: transparent !important;
  box-shadow: 0 4px 10px rgba(99, 193, 187, 0.3) !important;
}
.module {
  border: 1px solid rgba(16, 95, 104, 0.08) !important;
  box-shadow: 0 4px 18px rgba(16, 95, 104, 0.04) !important;
}
.lesson {
  border-top: 1px solid rgba(16, 95, 104, 0.06) !important;
}

/* Make Sidebar Avatar Larger */
aside#side .avatar, .profile .avatar {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  flex-shrink: 0 !important;
}

/* Improve contrast of profile greeting and subtitle */
.profile p b {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  display: block !important;
  margin-bottom: 3px !important;
}
.profile p small {
  color: #a3ded9 !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  display: block !important;
}

/* Fix blurry/low-contrast text when module is open */
.module.open .chapterHead .modTitle b {
  color: #ffffff !important;
}
.module.open .chapterHead .chapterMeta b {
  color: var(--gold) !important;
}
.module.open .chapterHead .chapterMeta small {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Sync desktop styling overrides to mobile screens */
@media(max-width: 760px) {
  /* Stack Q&A form elements vertically on mobile to prevent narrow textareas */
  #qaForm {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  #qaForm textarea {
    width: 100% !important;
    height: 80px !important;
  }
  #qaForm button {
    align-self: stretch !important;
    width: 100% !important;
    text-align: center !important;
    padding: 12px !important;
  }
  
  /* Horizontal scroll for course switcher tabs on narrow screens to prevent text overlap */
  .tabs {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 4px !important;
    gap: 8px !important;
  }
  .tabs::-webkit-scrollbar {
    display: none !important;
  }
  .tab {
    flex: 0 0 auto !important;
    padding: 8px 14px !important;
  }
  
  /* Guarantee course image layout scale and constraints on mobile */
  .courseImage {
    width: 100% !important;
    min-height: 180px !important;
    max-height: 240px !important;
    border-radius: 12px !important;
  }
  .courseCover {
    padding: 16px !important;
    gap: 16px !important;
  }
  
  /* Stacking adjustments for dialog contents */
  .lessonCommerce {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 14px 16px !important;
  }
  .lessonActions {
    width: 100% !important;
    justify-content: space-between !important;
  }
  .lessonActions button {
    flex: 1 !important;
    justify-content: center !important;
  }
}

/* Hide the floating notification dot that appears over auth modals. */
#notificationBadge,
.notificationBtn > i,
#notificationButton > i {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

/* Hide Codex browser's injected comment marker when previewing the site. */
#codex-browser-sidebar-comments-root {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Remove auth overlay blur that creates a white halo over the sidebar logo. */
.loginModal .loginShade,
.registerModal .loginShade,
.loginShade[data-close-login],
.loginShade[data-close-register] {
  background: rgba(6, 39, 42, 0.82) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* Final mobile app pass for Android/iOS: synchronized layout, media, and motion. */
@media (max-width: 768px) {
  :root {
    --mobile-pad: 14px;
    --mobile-radius: 16px;
  }

  html {
    scroll-padding-top: 132px !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  body {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    background: #f4fbf9 !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  img,
  iframe,
  video,
  canvas {
    max-width: 100% !important;
  }

  .app {
    display: block !important;
    width: 100% !important;
    min-height: 100svh !important;
    overflow-x: hidden !important;
  }

  aside#side {
    width: min(318px, 88vw) !important;
    max-width: 88vw !important;
    padding: calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-105%) !important;
    transition: transform .24s ease !important;
    will-change: transform !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  aside#side.open {
    transform: translateX(0) !important;
  }

  aside#side .brand {
    margin: 0 4px 20px !important;
    padding-bottom: 18px !important;
    gap: 10px !important;
  }

  aside#side .brand i {
    width: 44px !important;
    height: 44px !important;
    font-size: 25px !important;
    border-radius: 13px !important;
    flex: 0 0 auto !important;
  }

  aside#side .brand b {
    min-width: 0 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  aside#side .brand small {
    font-size: 7px !important;
    white-space: normal !important;
  }

  aside#side .profile {
    margin: 12px 0 18px !important;
    padding: 12px !important;
    gap: 12px !important;
  }

  aside#side .avatar,
  .profile .avatar {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    font-size: 18px !important;
  }

  .overall {
    margin: 18px 4px !important;
  }

  .ring {
    width: 76px !important;
    height: 76px !important;
  }

  #closeSide,
  #menu {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .app > main {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  header {
    position: sticky !important;
    top: 0 !important;
    z-index: 70 !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px 44px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: calc(8px + env(safe-area-inset-top)) var(--mobile-pad) 10px !important;
    background: rgba(255, 255, 255, .96) !important;
    border-bottom: 1px solid #d7e9e7 !important;
    box-shadow: 0 8px 22px rgba(16, 95, 104, .10) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .tabs {
    grid-column: 1 / -1 !important;
    order: initial !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding: 4px 0 2px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .tabs::-webkit-scrollbar {
    display: none !important;
  }

  .tab {
    flex: 0 0 min(265px, 78vw) !important;
    min-height: 54px !important;
    padding: 9px 12px !important;
    border-radius: 14px !important;
    white-space: normal !important;
  }

  .tab > i {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }

  .tab span,
  .tab .tabCopy {
    min-width: 0 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .tab small {
    font-size: 7px !important;
    line-height: 1.2 !important;
  }

  .search {
    grid-column: 2 / 3 !important;
    order: initial !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  .search input {
    min-width: 0 !important;
    font-size: 16px !important;
  }

  #notificationButton,
  .notificationBtn,
  .memberButton,
  .accountArea .accountBtn,
  .accountBtn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
  }

  .memberButton {
    font-size: 0 !important;
  }

  .memberButton span {
    font-size: 18px !important;
  }

  .accountArea {
    grid-column: 4 / 5 !important;
    width: 44px !important;
  }

  .accountArea .accountBtn,
  header > .accountBtn {
    font-size: 0 !important;
    overflow: hidden !important;
  }

  .accountArea .accountBtn::before,
  header > .accountBtn::before {
    content: "HV" !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }

  .accountMenu {
    position: fixed !important;
    left: var(--mobile-pad) !important;
    right: var(--mobile-pad) !important;
    top: calc(112px + env(safe-area-inset-top)) !important;
    width: auto !important;
    max-width: none !important;
    z-index: 95 !important;
  }

  .homeSlider,
  .learnerHub,
  .dashboard,
  .published,
  .learningTools,
  .videos,
  .notes,
  .awards {
    width: calc(100% - (var(--mobile-pad) * 2)) !important;
    max-width: none !important;
    margin: 18px var(--mobile-pad) 22px !important;
  }

  .homeSlider {
    height: clamp(430px, 112vw, 570px) !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 34px rgba(16, 95, 104, .18) !important;
  }

  .homeSlide {
    background-position: center top !important;
    transform: none !important;
  }

  .slideContent {
    left: 18px !important;
    right: 18px !important;
    top: auto !important;
    bottom: 58px !important;
    width: auto !important;
    transform: none !important;
  }

  .slideTag {
    max-width: 100% !important;
    font-size: 8px !important;
    padding: 7px 10px !important;
  }

  .slideContent h1 {
    margin: 12px 0 10px !important;
    font-size: clamp(27px, 8.2vw, 36px) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  .slideContent > p {
    max-width: 100% !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
  }

  .slideContent > div {
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 16px !important;
  }

  .slideCta {
    min-height: 44px !important;
    padding: 11px 14px !important;
  }

  .slideArrow {
    width: 38px !important;
    height: 38px !important;
  }

  .slideNav {
    left: 18px !important;
    bottom: 24px !important;
  }

  .slideCount {
    right: 18px !important;
    bottom: 18px !important;
  }

  .learnerHub,
  .published,
  .learningTools,
  .videos,
  .notes,
  .awards,
  .curriculum {
    border-radius: var(--mobile-radius) !important;
    padding: 16px !important;
  }

  .hubHeading,
  .title,
  .notes {
    display: block !important;
  }

  .title p > b,
  .hubHeading h2,
  .notes h2 {
    font-size: clamp(21px, 6.3vw, 26px) !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
  }

  .hubHeading p,
  .notes p,
  .title > span {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  .hubGrid,
  .toolGrid,
  #publishedGrid,
  .publishedGrid,
  #videoGrid,
  .awards > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .continueCard,
  .hubCard,
  .toolCard,
  .managedCard,
  .videoCard,
  .awards article {
    border-radius: 14px !important;
    min-width: 0 !important;
    transform: none !important;
  }

  .continueCard {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 14px !important;
  }

  .continueVisual,
  .courseImage,
  .managedMedia,
  .videoCard .thumb,
  .thumb,
  .articleReader > img,
  #articleImage,
  .viewerImage {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .courseCover {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 16px !important;
    border-radius: var(--mobile-radius) !important;
  }

  .courseCover::after {
    display: none !important;
  }

  .courseMain h2 {
    font-size: clamp(21px, 6.4vw, 27px) !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
  }

  .courseMain h3,
  .courseMain > p {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  .courseFacts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .courseFacts span {
    padding: 10px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 12px !important;
  }

  .courseAction {
    display: block !important;
    padding: 14px !important;
  }

  .module {
    border-radius: 14px !important;
  }

  .module > .chapterHead,
  .module > button {
    grid-template-columns: 1fr auto !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  .chapterLabel {
    grid-column: 1 / 2 !important;
    justify-self: start !important;
    min-height: 32px !important;
    padding: 6px 10px !important;
    font-size: 8px !important;
  }

  .modTitle {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }

  .modTitle b {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .chapterMeta,
  .mini {
    display: none !important;
  }

  .lesson {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 13px !important;
  }

  .lesson > div {
    align-items: flex-start !important;
    min-width: 0 !important;
  }

  .lessonText b {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .lessonText em {
    font-size: 10px !important;
    line-height: 1.4 !important;
  }

  .lesson .time,
  .time {
    display: inline-flex !important;
    width: max-content !important;
    min-width: 0 !important;
    padding: 6px 9px !important;
  }

  .lesson > button {
    grid-column: auto !important;
    width: 100% !important;
    min-height: 44px !important;
    font-size: 11px !important;
  }

  .dashboard {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .dashboard > .curriculum,
  .dashboard > .now {
    width: 100% !important;
    margin: 0 !important;
  }

  .now {
    position: relative !important;
    top: auto !important;
    padding: 18px !important;
    border-radius: var(--mobile-radius) !important;
  }

  .managedCard > div:last-child,
  .videoBody,
  .toolCard,
  .hubCard {
    padding: 14px !important;
  }

  .managedCard h3,
  .videoBody h3,
  .toolCard h3,
  .hubCard strong {
    font-size: 16px !important;
    line-height: 1.35 !important;
    min-height: 0 !important;
  }

  .managedCard p,
  .videoBody p,
  .toolCard p,
  .hubCard p {
    min-height: 0 !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  .notes textarea,
  #note,
  #qaInput,
  .loginCard input,
  .registerCard input,
  .memberFormGrid input,
  .memberFormGrid select {
    min-height: 46px !important;
    font-size: 16px !important;
  }

  .notes footer,
  .modal section footer,
  .memberStep footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .modal,
  .articleModal,
  .contentViewer,
  .loginModal,
  .registerModal,
  .memberModal,
  .quizModal,
  .certificateModal,
  .forgotModal,
  .contentEditor {
    align-items: end !important;
    padding: 0 !important;
  }

  .modal > article,
  .articleReader,
  .contentViewer > article,
  .loginCard,
  .registerCard,
  .memberCard,
  .quizCard,
  .certificate,
  .forgotCard,
  #contentForm {
    width: 100% !important;
    max-width: none !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .loginCard,
  .registerCard,
  .forgotCard {
    padding: 24px 18px calc(22px + env(safe-area-inset-bottom)) !important;
  }

  .registerGrid,
  .memberFormGrid,
  .formGrid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .loginPasswordOptions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    font-size: 12px !important;
  }

  .frame,
  .viewerVideo {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
  }

  .frame iframe:not([hidden]) {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  .pageFoot {
    display: grid !important;
    gap: 8px !important;
    padding: 20px var(--mobile-pad) calc(24px + env(safe-area-inset-bottom)) !important;
  }

  .pageFoot span {
    line-height: 1.6 !important;
  }
}

@media (max-width: 430px) {
  :root {
    --mobile-pad: 12px;
  }

  header {
    grid-template-columns: 42px minmax(0, 1fr) 42px 42px !important;
    gap: 7px !important;
  }

  .tab {
    flex-basis: min(245px, 82vw) !important;
  }

  .homeSlider {
    height: clamp(405px, 120vw, 520px) !important;
  }

  .slideContent h1 {
    font-size: clamp(25px, 8.5vw, 32px) !important;
  }

  .courseFacts {
    grid-template-columns: 1fr !important;
  }

  .loginPasswordOptions {
    grid-template-columns: 1fr !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .hubCard:hover,
  .continueCard:hover,
  .videoCard:hover,
  .managedCard:hover,
  .toolCard:hover,
  .awards article:hover,
  .plan:hover,
  .module:hover,
  .tab:hover,
  .memberButton:hover,
  .slideCta:hover,
  .videoLibraryMore:hover {
    transform: none !important;
    box-shadow: inherit !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Final compact mobile header alignment */
@media (max-width: 768px) {
  header {
    grid-template-columns: 44px minmax(0, 1fr) 44px 44px 44px !important;
    grid-auto-flow: row !important;
  }

  header > #menu {
    grid-column: 1 / 2 !important;
  }

  header > .tabs {
    grid-column: 2 / -1 !important;
  }

  header > .search {
    grid-column: 1 / 4 !important;
    grid-row: 2 !important;
  }

  header > #registerButton,
  header > #accountButton,
  header > #memberButton,
  header > #notificationButton {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-indent: -999px !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }

  header > #registerButton {
    grid-column: 4 / 5 !important;
    grid-row: 2 !important;
  }

  header > #accountButton {
    grid-column: 5 / 6 !important;
    grid-row: 2 !important;
  }

  header > .accountArea {
    grid-column: 5 / 6 !important;
    grid-row: 2 !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    margin: 0 !important;
  }

  header > .accountArea > #accountButton {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-indent: -999px !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }

  header > #memberButton,
  header > #notificationButton {
    display: none !important;
  }

  header > #registerButton::before,
  header > #accountButton::before,
  header > .accountArea > #accountButton::before {
    text-indent: 0 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  header > #registerButton::before {
    content: "+" !important;
  }

  header > #accountButton::before {
    content: "HV" !important;
  }

  header > .accountArea > #accountButton::before {
    content: "HV" !important;
  }
}

@media (max-width: 430px) {
  header {
    grid-template-columns: 42px minmax(0, 1fr) 42px 42px 42px !important;
  }
}

/* Final profile avatar and chapter contrast polish */
aside#side .profile {
  display: grid !important;
  grid-template-columns: 86px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 132px !important;
  padding: 18px 14px !important;
  border-radius: 18px !important;
}

aside#side .profile .avatar,
aside#side .avatar {
  width: 84px !important;
  height: 84px !important;
  min-width: 84px !important;
  min-height: 84px !important;
  border: 3px solid rgba(255, 255, 255, .9) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .24), 0 0 0 5px rgba(158, 213, 209, .22) !important;
}

aside#side .profile p {
  min-width: 0 !important;
}

aside#side .profile p b {
  font-size: 16px !important;
  line-height: 1.35 !important;
}

aside#side .profile p small {
  font-size: 12px !important;
  line-height: 1.55 !important;
  color: #d7f3ef !important;
}

.avatar .customAvatarImg,
.profile .customAvatarImg,
.accountMenuIdentity .customAvatarImg,
#vipAvatar .customAvatarImg,
.adminAvatar .customAvatarImg {
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.module > .chapterHead,
.chapterHead {
  background: linear-gradient(135deg, #0c646d 0%, #147982 100%) !important;
}

.module .chapterHead .modTitle b,
.module.open .chapterHead .modTitle b,
.module:not(.open) .chapterHead .modTitle b {
  color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: 0 2px 8px rgba(0, 24, 28, .45) !important;
  -webkit-text-fill-color: #ffffff !important;
}

.module .chapterHead .modTitle small,
.module.open .chapterHead .modTitle small,
.module:not(.open) .chapterHead .modTitle small {
  color: #e9fffc !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: 0 1px 5px rgba(0, 24, 28, .35) !important;
}

.module .chapterHead .chapterMeta b,
.module.open .chapterHead .chapterMeta b,
.module:not(.open) .chapterHead .chapterMeta b {
  color: #ffe082 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 5px rgba(0, 24, 28, .35) !important;
}

.module .chapterHead .chapterMeta small,
.module.open .chapterHead .chapterMeta small,
.module:not(.open) .chapterHead .chapterMeta small {
  color: #d8f5f1 !important;
  opacity: 1 !important;
}

@media (max-width: 768px) {
  aside#side .profile {
    grid-template-columns: 74px minmax(0, 1fr) !important;
    min-height: 112px !important;
    padding: 14px !important;
  }

  aside#side .profile .avatar,
  aside#side .avatar {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
  }
}

/* Final admin navigation, editor and permission polish */
.adminStats[hidden],
.adminWorkspace[hidden],
.questionWorkspace[hidden],
.memberWorkspace[hidden] {
  display: none !important;
}

.adminSide nav button {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 52px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.adminSide nav button::first-letter {
  color: #9ed5d1 !important;
}

.adminMain > header {
  gap: 18px !important;
}

.adminHeaderActions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#adminNotificationButton {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  border: 1px solid rgba(16, 95, 104, .18) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: #105f68 !important;
  box-shadow: 0 10px 24px rgba(16, 95, 104, .12) !important;
}

#adminNotificationButton svg {
  width: 21px !important;
  height: 21px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#adminBellCount {
  position: absolute !important;
  right: -5px !important;
  top: -6px !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 5px !important;
  border: 2px solid #fff !important;
  border-radius: 20px !important;
  background: #ef5d5d !important;
  color: #fff !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  place-items: center !important;
}

.adminRow.adminHead,
.adminContentRow {
  grid-template-columns: minmax(260px, 2fr) .65fr .95fr .7fr .75fr .75fr !important;
  min-width: 980px !important;
}

.adminRoute {
  display: inline-flex !important;
  width: max-content !important;
  max-width: 100% !important;
  margin-top: 8px !important;
  padding: 5px 8px !important;
  border-radius: 999px !important;
  background: #edf8f6 !important;
  color: #0d5962 !important;
  font-weight: 800 !important;
}

.memberRow {
  grid-template-columns: minmax(180px, 1.2fr) minmax(190px, 1.2fr) .8fr minmax(220px, 1.25fr) .85fr .75fr !important;
  min-width: 1080px !important;
}

.memberMetrics span:nth-child(2) {
  display: none !important;
}

.memberMetrics {
  grid-template-columns: repeat(2, minmax(180px, 1fr)) !important;
}

.memberRow select,
.roleControls select {
  width: 100% !important;
  min-height: 40px !important;
  border: 1px solid #b9dcda !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #0d5962 !important;
  font-weight: 800 !important;
  padding: 8px 10px !important;
}

#contentForm {
  width: min(920px, 96vw) !important;
  padding: 34px !important;
}

#contentForm h2 {
  font-size: 30px !important;
}

.formSectionTitle {
  display: grid !important;
  grid-template-columns: 42px 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 24px 0 14px !important;
  padding: 12px 14px !important;
  border: 1px solid #d7ece9 !important;
  border-left: 4px solid #2c9895 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #f0fbf9, #ffffff) !important;
}

.formSectionTitle i {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: #0d6871 !important;
  color: #fff !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

.formSectionTitle b,
.formSectionTitle small {
  display: block !important;
}

.formSectionTitle b {
  color: #073e45 !important;
  font-size: 13px !important;
}

.formSectionTitle small {
  margin-top: 3px !important;
  color: #60787a !important;
  font-size: 10px !important;
}

#contentForm .formGrid,
#contentForm .contentRouting {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

#contentForm label {
  color: #073e45 !important;
  font-size: 13px !important;
}

#contentForm input,
#contentForm select,
#contentForm textarea {
  min-height: 46px !important;
  border-color: #b9dcda !important;
  font-size: 14px !important;
}

#contentForm textarea.large {
  min-height: 170px !important;
}

.uploadField > span {
  border-radius: 16px !important;
  background: linear-gradient(135deg, #f4fbfa, #fff) !important;
}

.mediaPreview {
  min-height: 210px !important;
}

.contentEditor.open {
  align-items: center !important;
}

@media (max-width: 900px) {
  .adminSide nav button {
    justify-content: center !important;
    font-size: 0 !important;
  }

  .adminSide nav button::first-letter {
    font-size: 18px !important;
  }

  #contentForm .formGrid,
  #contentForm .contentRouting {
    grid-template-columns: 1fr !important;
  }

  #contentForm {
    padding: 24px 18px !important;
  }
}

/* Hide legacy membership registration completely */
#memberButton,
.memberButton,
#memberModal,
.memberModal,
.planGrid,
[data-next-member],
[data-prev-member],
[data-close-member] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Final clarity pass: professional square avatar, sharp admin tables/cards, web-app mobile */
aside#side .profile {
  grid-template-columns: 92px minmax(0, 1fr) !important;
  min-height: 142px !important;
  padding: 18px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.07)) !important;
  border: 1px solid rgba(158, 213, 209, .35) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 18px 34px rgba(0, 35, 40, .22) !important;
}

aside#side .profile .avatar,
aside#side .avatar {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  min-height: 88px !important;
  border-radius: 22px !important;
  border: 3px solid rgba(255,255,255,.92) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.28), 0 0 0 5px rgba(158,213,209,.20) !important;
}

.avatar .customAvatarImg,
.profile .customAvatarImg,
.accountMenuIdentity .customAvatarImg,
#vipAvatar .customAvatarImg,
.adminAvatar .customAvatarImg {
  border-radius: 18px !important;
}

aside#side .profile p b {
  color: #ffffff !important;
  font-size: 17px !important;
  line-height: 1.3 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.22) !important;
}

aside#side .profile p small {
  color: #dff8f4 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
}

.profileJoinDate {
  display: inline-flex !important;
  width: max-content !important;
  max-width: 100% !important;
  margin-top: 8px !important;
  padding: 5px 8px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.14) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

.adminWorkspace,
.questionWorkspace,
.memberWorkspace,
.adminStats article,
.memberMetrics span {
  background: #ffffff !important;
  border: 2px solid #73c9c2 !important;
  box-shadow: 0 20px 42px rgba(9, 82, 89, .14) !important;
}

.adminHead,
.memberHead,
.adminRow.adminHead {
  background: linear-gradient(135deg, #0d6a72, #137e86) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(8, 82, 89, .24) !important;
}

.adminHead span,
.memberHead span,
.adminRow.adminHead span {
  color: #ffffff !important;
  opacity: 1 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .8px !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.22) !important;
}

.adminRow,
.memberRow {
  background: #ffffff !important;
  border-bottom: 1.5px solid #b8e3df !important;
}

.adminRow b,
.memberRow b,
.adminTitle h2,
.questionWorkspace h2,
.memberWorkspace h2 {
  color: #063f46 !important;
  font-weight: 900 !important;
  opacity: 1 !important;
}

.adminRow small,
.memberRow small,
.adminQuestion p {
  color: #285f66 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

.adminRow em.published,
.statusActive {
  background: #bdf1e6 !important;
  color: #064f55 !important;
  border: 1px solid #8ddbd0 !important;
  box-shadow: 0 8px 16px rgba(8, 113, 120, .16) !important;
  font-weight: 900 !important;
}

.adminRow button,
.memberRow button {
  color: #075d65 !important;
  border-color: #9ccfcb !important;
  box-shadow: 0 6px 14px rgba(8, 82, 89, .08) !important;
  font-weight: 900 !important;
}

@media (max-width: 768px) {
  body {
    background: #eef8f6 !important;
  }

  .app {
    display: block !important;
  }

  main,
  .app > main {
    padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  }

  header {
    min-height: 118px !important;
    border-bottom: 1px solid #cae8e5 !important;
    box-shadow: 0 12px 28px rgba(8, 82, 89, .12) !important;
  }

  .homeSlider,
  .learnerHub,
  .dashboard,
  .published,
  .learningTools,
  .videos,
  .notes,
  .awards {
    width: calc(100% - 24px) !important;
    margin: 14px 12px 18px !important;
    border-radius: 18px !important;
    border: 1.5px solid #bde4e0 !important;
    box-shadow: 0 16px 32px rgba(8, 82, 89, .12) !important;
  }

  .dashboard {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .curriculum,
  .now,
  .published,
  .learningTools,
  .videos,
  .notes,
  .awards {
    padding: 16px !important;
  }

  .module,
  .managedCard,
  .videoCard,
  .toolCard,
  .awards article {
    border-radius: 16px !important;
    border: 1.5px solid #b8e0dc !important;
    box-shadow: 0 12px 24px rgba(8, 82, 89, .10) !important;
  }

  aside#side .profile {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    min-height: 118px !important;
  }

  aside#side .profile .avatar,
  aside#side .avatar {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    border-radius: 18px !important;
  }
}

/* Final profile card and Q&A comment layout */
aside#side .profile {
  grid-template-columns: 96px minmax(0, 1fr) !important;
  min-height: 154px !important;
  padding: 18px 16px !important;
  gap: 14px !important;
  overflow: hidden !important;
}

aside#side .profile::before {
  content: "👋" !important;
  position: absolute !important;
  right: 14px !important;
  top: 12px !important;
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.13) !important;
  font-size: 14px !important;
}

aside#side .profile p {
  display: grid !important;
  gap: 5px !important;
  align-content: center !important;
}

aside#side .profile p b {
  max-width: 100% !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  word-break: normal !important;
}

aside#side .profile p small {
  max-width: 100% !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

.profileJoinDate {
  width: 100% !important;
  margin-top: 4px !important;
  padding: 6px 8px !important;
  line-height: 1.35 !important;
}

.qaPanel {
  border: 1.5px solid #c8e7e4 !important;
  box-shadow: 0 16px 34px rgba(8, 82, 89, .10) !important;
}

#qaForm {
  display: grid !important;
  grid-template-columns: 54px 170px minmax(0, 1fr) 120px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px !important;
  border: 1.5px solid #c7e5e2 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(8, 82, 89, .08) !important;
}

.qaStudentAvatar,
.commentAvatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #dff5f1 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 8px 18px rgba(8, 82, 89, .16) !important;
}

.qaStudentAvatar img,
.commentAvatar img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 12px !important;
}

.qaStudentMeta {
  min-width: 0 !important;
}

.qaStudentMeta b,
.qaStudentMeta small {
  display: block !important;
}

.qaStudentMeta b {
  color: #073e45 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.qaStudentMeta small {
  margin-top: 3px !important;
  color: #477378 !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}

#qaInput {
  min-height: 50px !important;
  border: 1px solid #cbe5e2 !important;
  border-radius: 12px !important;
  padding: 14px !important;
  background: #f9fdfc !important;
}

#qaForm button {
  min-height: 50px !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
}

.finalCommentCard,
.commentCard {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
  border: 1.5px solid #d4ebe8 !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 22px rgba(8, 82, 89, .08) !important;
}

.commentTop {
  align-items: start !important;
}

.commentTop span b,
.commentTop span small {
  display: block !important;
}

.commentTop span b {
  color: #073e45 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.commentTop span small {
  margin-top: 2px !important;
  color: #5d7e82 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

@media (max-width: 768px) {
  aside#side .profile {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    min-height: 126px !important;
  }

  #qaForm {
    grid-template-columns: 46px minmax(0, 1fr) !important;
  }

  .qaStudentMeta {
    grid-column: 2 / 3 !important;
  }

  #qaInput,
  #qaForm button {
    grid-column: 1 / -1 !important;
  }
}

/* Final sidebar profile fit: compact avatar, readable greeting, clear joined-date chip */
aside#side .profile {
  grid-template-columns: 76px minmax(0, 1fr) !important;
  min-height: 138px !important;
  padding: 16px 14px !important;
  gap: 12px !important;
  align-items: center !important;
}

aside#side .profile .avatar,
aside#side .avatar {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  border-radius: 18px !important;
}

aside#side .profile p {
  min-width: 0 !important;
}

aside#side .profile p b {
  font-size: 16px !important;
  line-height: 1.22 !important;
  overflow-wrap: anywhere !important;
}

aside#side .profile p small {
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}

aside#side .profile::before {
  right: 10px !important;
  top: 10px !important;
  width: 24px !important;
  height: 24px !important;
  font-size: 12px !important;
  opacity: .9 !important;
}

.profileJoinDate {
  max-width: 100% !important;
  padding: 5px 7px !important;
  border-radius: 9px !important;
  font-size: 9.5px !important;
  font-style: normal !important;
  color: #ffffff !important;
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}

.profileJoinDate::before {
  content: "◷ ";
  color: #ffe178;
}

.qaStudentMeta b::before {
  content: "👤 ";
}

@media (max-width: 768px) {
  aside#side .profile {
    grid-template-columns: 74px minmax(0, 1fr) !important;
    min-height: 128px !important;
    padding: 14px !important;
  }

  aside#side .profile .avatar,
  aside#side .avatar {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
    border-radius: 17px !important;
  }
}

/* Final learner profile: no time row, popup owns avatar upload */
aside#side .profile {
  grid-template-columns: 72px minmax(0, 1fr) !important;
  min-height: 146px !important;
  padding: 14px !important;
  gap: 12px !important;
  border: 1px solid rgba(158,213,209,.22) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.035)) !important;
}

aside#side .profile .avatar,
aside#side .avatar {
  width: 70px !important;
  height: 70px !important;
  min-width: 70px !important;
  min-height: 70px !important;
  border-radius: 18px !important;
  cursor: pointer !important;
}

aside#side .profile .avatar img,
aside#side .avatar .customAvatarImg,
.profile .customAvatarImg {
  border-radius: 16px !important;
}

aside#side .profile p {
  gap: 4px !important;
}

aside#side .profile p b {
  font-size: 15px !important;
  line-height: 1.22 !important;
}

aside#side .profile p small {
  font-size: 10px !important;
  line-height: 1.32 !important;
}

.profileJoinDate {
  margin-top: 4px !important;
  padding: 4px 7px !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
  color: #e9fffb !important;
}

.profileOpenLink {
  width: fit-content !important;
  margin-top: 5px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(99,193,187,.55) !important;
  border-radius: 999px !important;
  background: rgba(99,193,187,.16) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

.profileOpenLink::before {
  content: "▣ ";
  color: #ffe178;
}

.profileOpenLink:hover {
  background: rgba(99,193,187,.28) !important;
  transform: translateY(-1px);
}

.learnerProfileModal {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: none;
  place-items: center;
  padding: 18px;
}

.learnerProfileModal.open {
  display: grid;
}

.learnerProfileShade {
  position: absolute;
  inset: 0;
  background: rgba(4, 37, 42, .62);
  backdrop-filter: blur(12px);
}

.learnerProfileCard {
  position: relative;
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  border: 1.5px solid rgba(158,213,209,.48);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 18%, rgba(99,193,187,.18), transparent 32%),
    linear-gradient(145deg, #073f47, #0b5f67 58%, #083b43);
  color: #ffffff;
  box-shadow: 0 30px 90px rgba(0,0,0,.36);
}

.learnerProfileClose {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 13px;
  background: rgba(255,255,255,.12);
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
}

.learnerProfileHero {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 36px 38px 26px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.learnerProfileAvatar {
  width: 142px;
  height: 142px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #73d79a, #11636c);
  border: 3px solid rgba(126,225,186,.8);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

.learnerProfileAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.learnerProfileAvatar b {
  color: #ffffff;
  font-size: 44px;
  font-weight: 900;
}

.learnerProfileTitle span {
  color: #7ee1ba;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.learnerProfileTitle h2 {
  margin: 8px 0 4px;
  color: #ffffff;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.08;
}

.learnerProfileTitle p {
  margin: 0 0 16px;
  color: rgba(233,255,251,.76);
  font-weight: 700;
}

#learnerAvatarUpload {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(126,225,186,.62);
  border-radius: 999px;
  background: linear-gradient(135deg, #52c987, #17816f);
  color: #ffffff;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

#learnerAvatarUpload::before {
  content: "▤ ";
}

.learnerProfileGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 26px 38px 38px;
}

.learnerProfileItem {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 3px 12px;
  align-items: center;
  min-height: 74px;
  padding: 14px;
  border: 1px solid rgba(158,213,209,.22);
  border-radius: 16px;
  background: rgba(255,255,255,.07);
}

.learnerProfileItem i {
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(126,225,186,.14);
  color: #7ee1ba;
  font-style: normal;
  font-weight: 900;
}

.learnerProfileItem span {
  color: rgba(233,255,251,.64);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.learnerProfileItem b {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #ffffff;
  font-size: 15px;
}

@media (max-width: 760px) {
  .learnerProfileCard {
    border-radius: 18px;
  }

  .learnerProfileHero {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    padding: 28px 18px 20px;
  }

  .learnerProfileAvatar {
    width: 88px;
    height: 88px;
    border-radius: 22px;
  }

  .learnerProfileTitle h2 {
    font-size: 25px;
  }

  .learnerProfileGrid {
    grid-template-columns: 1fr;
    padding: 18px;
  }
}

/* Final fit for the sidebar member card requested in screenshot */
aside#side .profile {
  grid-template-columns: 78px minmax(0, 1fr) !important;
  min-height: 178px !important;
  padding: 16px 14px !important;
  gap: 14px !important;
  align-items: center !important;
  overflow: visible !important;
}

aside#side .profile .avatar,
aside#side .avatar {
  width: 76px !important;
  height: 76px !important;
  min-width: 76px !important;
  min-height: 76px !important;
  border-radius: 18px !important;
}

aside#side .profile p {
  min-width: 0 !important;
  display: grid !important;
  gap: 6px !important;
  align-content: center !important;
}

aside#side .profile p b {
  font-size: 16px !important;
  line-height: 1.22 !important;
  max-width: 100% !important;
  overflow-wrap: normal !important;
}

aside#side .profile p small {
  font-size: 10.5px !important;
  line-height: 1.36 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

aside#side .profile .profileJoinDate {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 2px !important;
  padding: 6px 8px !important;
  font-size: 9.5px !important;
  line-height: 1.28 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

aside#side .profile .profileOpenLink {
  width: 100% !important;
  margin-top: 2px !important;
  padding: 7px 10px !important;
  text-align: center !important;
  justify-content: center !important;
}

@media (max-width: 760px) {
  aside#side .profile {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    min-height: 174px !important;
    padding: 15px 13px !important;
  }

  aside#side .profile .avatar,
  aside#side .avatar {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
  }
}

/* Final requested arrangement: profile button under avatar, wider readable text area */
aside#side .profile {
  grid-template-columns: 82px minmax(0, 1fr) !important;
  min-height: 186px !important;
  padding: 17px 14px !important;
  gap: 14px !important;
  align-items: center !important;
}

aside#side .profile .avatar,
aside#side .avatar {
  align-self: center !important;
  width: 78px !important;
  height: 78px !important;
  min-width: 78px !important;
  min-height: 78px !important;
}

aside#side .profile .profileOpenLink {
  grid-column: 1 / 2 !important;
  grid-row: 2 !important;
  width: 78px !important;
  min-height: 30px !important;
  margin-top: -8px !important;
  padding: 6px 4px !important;
  font-size: 9.5px !important;
  line-height: 1 !important;
}

aside#side .profile p {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  gap: 7px !important;
}

aside#side .profile p b {
  font-size: 16px !important;
  line-height: 1.22 !important;
}

aside#side .profile p small {
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}

aside#side .profile .profileJoinDate {
  padding: 7px 8px !important;
  font-size: 9.5px !important;
  line-height: 1.25 !important;
}

/* Final cleanup: profile button under avatar, plain join date, no floating hand icon */
aside#side .profile::before,
aside#side .profile::after {
  content: none !important;
  display: none !important;
}

aside#side .profile {
  display: grid !important;
  grid-template-columns: 82px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  min-height: 190px !important;
  align-items: center !important;
}

aside#side .profile .avatar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: center !important;
}

aside#side .profile > .profileOpenLink {
  grid-column: 1 !important;
  grid-row: 2 !important;
  justify-self: center !important;
  align-self: start !important;
  width: 78px !important;
  margin: 8px 0 0 !important;
}

aside#side .profile > p {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
}

aside#side .profile .profileJoinDate::before,
.profileJoinDate::before {
  content: none !important;
  display: none !important;
}

aside#side .profile .profileJoinDate {
  padding-left: 8px !important;
  text-align: left !important;
}

/* Remove legacy camera/upload icon from avatar */
aside#side .avatar::after,
aside#side .profile .avatar::after,
.profile .avatar::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Final larger learner card/avatar in sidebar */
aside#side .profile {
  grid-template-columns: 94px minmax(0, 1fr) !important;
  min-height: 214px !important;
  padding: 18px 16px !important;
  gap: 14px !important;
}

aside#side .profile .avatar,
aside#side .avatar {
  width: 90px !important;
  height: 90px !important;
  min-width: 90px !important;
  min-height: 90px !important;
  border-radius: 20px !important;
}

aside#side .profile .avatar img,
aside#side .avatar .customAvatarImg,
.profile .customAvatarImg {
  border-radius: 18px !important;
}

aside#side .profile > .profileOpenLink {
  width: 90px !important;
  min-height: 34px !important;
  margin-top: 10px !important;
  font-size: 10px !important;
}

aside#side .profile > p {
  gap: 8px !important;
}

aside#side .profile p b {
  font-size: 17px !important;
}

aside#side .profile p small {
  font-size: 10.5px !important;
}

aside#side .profile .profileJoinDate {
  padding: 8px 9px !important;
}

/* Final sidebar fit: prevent support/profile text from being clipped */
.app {
  grid-template-columns: 284px 1fr !important;
}

aside#side {
  width: 284px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(158,213,209,.55) transparent;
}

main {
  margin-left: 20px;
}

aside#side .profile {
  width: 100% !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  min-height: 214px !important;
  overflow: hidden !important;
}

aside#side .profile .avatar,
aside#side .avatar {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  min-height: 88px !important;
}

aside#side .profile > .profileOpenLink {
  width: 88px !important;
}

aside#side .profile .profileJoinDate {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 7px 8px !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

aside#side .profile p small {
  font-size: 10px !important;
}

aside#side .help {
  flex: 0 0 auto !important;
  margin-top: 16px !important;
  margin-bottom: 18px !important;
}

@media (max-width: 760px) {
  .app {
    grid-template-columns: 1fr !important;
  }

  aside#side {
    width: min(284px, 86vw) !important;
  }

  main {
    margin-left: 0;
  }
}

/* Keep the support card visible after enlarging the profile card */
.app > main {
  grid-column: 2 !important;
  margin-left: 0 !important;
}

aside#side .brand {
  margin-bottom: 22px !important;
}

aside#side .overall {
  margin: 18px 4px !important;
}

aside#side nav {
  gap: 6px !important;
}

aside#side nav a {
  min-height: 54px !important;
  padding: 10px 14px !important;
}

aside#side .help {
  min-height: 52px !important;
  padding: 11px 13px !important;
}

/* Final profile cleanup: remove joined date and sharpen popup icons */
aside#side .profileJoinDate,
aside#side .profile .profileJoinDate {
  display: none !important;
}

.learnerProfileItem i {
  background: linear-gradient(135deg, rgba(126,225,186,.32), rgba(58,146,149,.24)) !important;
  color: #baffea !important;
  border: 1px solid rgba(126,225,186,.32) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 20px rgba(0,0,0,.14) !important;
  font-size: 17px !important;
}

.learnerProfileItem span {
  color: #bfe9e4 !important;
}

.learnerProfileItem b {
  color: #ffffff !important;
}

.learnerProfileItem.profileInfo-id i { color: #9df0ff !important; }
.learnerProfileItem.profileInfo-phone i { color: #7ee1ba !important; }
.learnerProfileItem.profileInfo-email i { color: #a7d8ff !important; }
.learnerProfileItem.profileInfo-role i { color: #ffe178 !important; }
.learnerProfileItem.profileInfo-access i { color: #c9b8ff !important; }
.learnerProfileItem.profileInfo-status i { color: #7ff0a8 !important; }

/* Final admin content library: filters and placement clarity */
.contentAdminTools {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.contentAdminTools select {
  min-height: 42px;
  min-width: 210px;
  border: 1.5px solid #b7deda;
  border-radius: 12px;
  background: #ffffff;
  color: #073e45;
  font-weight: 800;
  padding: 0 12px;
  outline: 0;
}

.adminTable .adminHead,
.adminContentRow {
  grid-template-columns: minmax(280px, 1.6fr) minmax(130px, .7fr) minmax(180px, .9fr) minmax(160px, .8fr) minmax(120px, .6fr) minmax(120px, .6fr) !important;
}

.unifiedContentRow .placementPill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #e7f7f4;
  color: #075f68;
  border: 1px solid #b7e4de;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(7, 95, 104, .08);
}

.unifiedContentRow .adminRoute {
  margin-top: 6px;
  color: #27757b !important;
  font-weight: 800;
}

.unifiedContentRow > span:nth-child(2) {
  color: #073e45;
  font-weight: 900;
}

.unifiedContentRow > span:nth-child(2) i {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: 7px;
  border-radius: 9px;
  background: #dff4f0;
  color: #075f68;
  font-style: normal;
}

/* Final profile card composition based on the provided reference */
aside#side .profile {
  display: grid !important;
  grid-template-columns: 116px minmax(0, 1fr) !important;
  grid-template-rows: 126px auto !important;
  min-height: 236px !important;
  padding: 16px !important;
  gap: 14px 14px !important;
  align-items: center !important;
  border-radius: 22px !important;
  border: 1.5px solid rgba(111, 218, 210, .34) !important;
  background:
    radial-gradient(circle at 24% 15%, rgba(126,225,186,.12), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045), 0 16px 34px rgba(0,0,0,.12) !important;
  overflow: hidden !important;
}

aside#side .profile .avatar,
aside#side .avatar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  align-self: center !important;
  width: 112px !important;
  height: 112px !important;
  min-width: 112px !important;
  min-height: 112px !important;
  border-radius: 24px !important;
  border: 3px solid rgba(158, 213, 209, .92) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.22), inset 0 0 0 2px rgba(255,255,255,.08) !important;
}

aside#side .profile .avatar img,
aside#side .avatar .customAvatarImg,
.profile .customAvatarImg {
  border-radius: 20px !important;
}

aside#side .profile > p {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

aside#side .profile p b {
  font-size: 20px !important;
  line-height: 1.12 !important;
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
}

aside#side .profile p small {
  display: grid !important;
  gap: 9px !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  color: #e6fffb !important;
}

aside#side .profile p small::before {
  content: "✦";
  display: block;
  width: 100%;
  color: #ffe178;
  font-size: 22px;
  line-height: 1;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(111, 218, 210, .42);
}

aside#side .profile > .profileOpenLink {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: 16px !important;
  border: 1.5px solid rgba(111, 218, 210, .42) !important;
  background: linear-gradient(135deg, rgba(18, 101, 109, .82), rgba(8, 79, 88, .78)) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045), 0 10px 22px rgba(0,0,0,.14) !important;
}

aside#side .profile > .profileOpenLink::before {
  content: "▣" !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 7px !important;
  background: #ffd95a !important;
  color: #073e45 !important;
  font-size: 14px !important;
}

/* Final admin table contrast: make member headers readable */
.memberTable .memberHead,
.adminTable .adminHead,
.memberRow.memberHead,
.adminRow.adminHead {
  background: linear-gradient(135deg, #075f68, #0d7f88) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 26px rgba(7, 95, 104, .18) !important;
}

.memberTable .memberHead span,
.adminTable .adminHead span,
.memberRow.memberHead span,
.adminRow.adminHead span {
  color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  background: transparent !important;
  letter-spacing: .7px !important;
}

.memberTable .memberHead span::selection,
.adminTable .adminHead span::selection,
.memberRow.memberHead span::selection,
.adminRow.adminHead span::selection {
  background: rgba(255,255,255,.22) !important;
  color: #ffffff !important;
}

.memberWorkspace,
.adminWorkspace {
  color: #073e45 !important;
}

/* Final sidebar profile layout: match the provided avatar reference */
.app {
  grid-template-columns: 330px 1fr !important;
}

aside#side {
  width: 330px !important;
  padding: 28px 26px 22px !important;
}

.app > main {
  grid-column: 2 !important;
  margin-left: 0 !important;
}

aside#side .profile {
  width: 100% !important;
  min-height: 292px !important;
  padding: 18px !important;
  display: grid !important;
  grid-template-columns: 132px minmax(0, 1fr) !important;
  grid-template-rows: 166px 56px !important;
  column-gap: 18px !important;
  row-gap: 16px !important;
  align-items: center !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 22% 16%, rgba(126, 225, 186, .18), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.04)) !important;
  border: 1.5px solid rgba(127, 218, 211, .34) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045), 0 18px 34px rgba(0,0,0,.16) !important;
  overflow: hidden !important;
}

aside#side .profile .avatar,
aside#side .avatar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: center !important;
  width: 132px !important;
  height: 132px !important;
  min-width: 132px !important;
  min-height: 132px !important;
  border-radius: 25px !important;
  border: 3px solid rgba(172, 229, 219, .94) !important;
  box-shadow: 0 18px 34px rgba(0,0,0,.24), inset 0 0 0 2px rgba(255,255,255,.08) !important;
}

aside#side .profile .avatar img,
aside#side .avatar .customAvatarImg,
.profile .customAvatarImg {
  border-radius: 20px !important;
}

aside#side .profile > p {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
}

aside#side .profile p b {
  display: block !important;
  max-width: 100% !important;
  font-size: 20px !important;
  line-height: 1.12 !important;
  color: #ffffff !important;
  overflow-wrap: anywhere !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.2) !important;
}

aside#side .profile p small {
  display: block !important;
  margin-top: 12px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #ecfffb !important;
  overflow-wrap: anywhere !important;
}

aside#side .profile p small::before {
  content: "★" !important;
  display: block !important;
  width: 100% !important;
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(111, 218, 210, .42) !important;
  color: #ffd95a !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

aside#side .profile > .profileOpenLink {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-height: 56px !important;
  margin: 0 !important;
  border-radius: 17px !important;
  border: 1.5px solid rgba(111, 218, 210, .42) !important;
  background: linear-gradient(135deg, rgba(18, 101, 109, .86), rgba(8, 79, 88, .82)) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.055), 0 12px 24px rgba(0,0,0,.16) !important;
}

aside#side .profile > .profileOpenLink::before {
  content: "ID" !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 29px !important;
  height: 24px !important;
  border-radius: 7px !important;
  background: #ffd95a !important;
  color: #073e45 !important;
  font-size: 11px !important;
  font-weight: 1000 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr !important;
  }

  aside#side {
    width: min(330px, 86vw) !important;
  }
}

/* Wider profile card pass: give the greeting the same spacious feel as the mockup */
@media (min-width: 901px) {
  .app {
    grid-template-columns: 360px 1fr !important;
  }

  aside#side {
    width: 360px !important;
    padding-inline: 24px !important;
  }

  aside#side .profile {
    min-height: 266px !important;
    grid-template-columns: 118px minmax(0, 1fr) !important;
    grid-template-rows: 148px 54px !important;
    column-gap: 15px !important;
    padding: 17px !important;
  }

  aside#side .profile .avatar,
  aside#side .avatar {
    width: 118px !important;
    height: 118px !important;
    min-width: 118px !important;
    min-height: 118px !important;
    border-radius: 23px !important;
  }

  aside#side .profile .avatar img,
  aside#side .avatar .customAvatarImg,
  .profile .customAvatarImg {
    border-radius: 18px !important;
  }

  aside#side .profile p b {
    font-size: 20px !important;
  }

  aside#side .profile p small {
    font-size: 12px !important;
  }

  aside#side .profile > .profileOpenLink {
    min-height: 54px !important;
  }
}

/* Fit the full sidebar on a 720px desktop viewport */
@media (min-width: 901px) {
  aside#side {
    padding: 20px 24px 16px !important;
    gap: 0 !important;
  }

  aside#side .brand {
    min-height: 58px !important;
    padding-bottom: 14px !important;
    margin-bottom: 18px !important;
  }

  aside#side .brand i {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    font-size: 30px !important;
  }

  aside#side .brand b {
    font-size: 17px !important;
    line-height: 1.1 !important;
  }

  aside#side .brand small {
    font-size: 9px !important;
    margin-top: 4px !important;
  }

  aside#side .profile {
    min-height: 218px !important;
    grid-template-columns: 98px minmax(0, 1fr) !important;
    grid-template-rows: 118px 46px !important;
    column-gap: 14px !important;
    row-gap: 12px !important;
    padding: 14px !important;
    margin-bottom: 18px !important;
  }

  aside#side .profile .avatar,
  aside#side .avatar {
    width: 98px !important;
    height: 98px !important;
    min-width: 98px !important;
    min-height: 98px !important;
    border-radius: 20px !important;
  }

  aside#side .profile .avatar img,
  aside#side .avatar .customAvatarImg,
  .profile .customAvatarImg {
    border-radius: 16px !important;
  }

  aside#side .profile p b {
    font-size: 18px !important;
    line-height: 1.1 !important;
  }

  aside#side .profile p small {
    margin-top: 8px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  aside#side .profile p small::before {
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
    font-size: 19px !important;
  }

  aside#side .profile > .profileOpenLink {
    min-height: 46px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
  }

  aside#side .profile > .profileOpenLink::before {
    width: 25px !important;
    height: 21px !important;
    font-size: 10px !important;
  }

  aside#side .overall {
    height: 74px !important;
    margin-bottom: 14px !important;
    gap: 12px !important;
  }

  aside#side .overall .ring {
    width: 74px !important;
    height: 74px !important;
    min-width: 74px !important;
  }

  aside#side .overall .ring b {
    font-size: 21px !important;
  }

  aside#side .overall .ring small {
    font-size: 9px !important;
  }

  aside#side .overall p b {
    font-size: 15px !important;
  }

  aside#side .overall p small {
    font-size: 10px !important;
  }

  aside#side nav {
    gap: 7px !important;
    margin-bottom: 12px !important;
  }

  aside#side nav a {
    min-height: 43px !important;
    padding: 6px 12px !important;
    border-radius: 13px !important;
    gap: 12px !important;
    font-size: 13px !important;
  }

  aside#side nav a::first-letter {
    font-size: 15px !important;
  }

  aside#side .help {
    min-height: 50px !important;
    padding: 10px 12px !important;
    margin-top: 0 !important;
    border-radius: 13px !important;
  }

  aside#side .help p b {
    font-size: 12px !important;
  }

  aside#side .help p small {
    font-size: 9px !important;
  }
}

/* Final sidebar readability pass */
@media (min-width: 901px) {
  aside#side .overall p b {
    font-size: 17px !important;
    line-height: 1.15 !important;
  }

  aside#side .overall p small {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  aside#side nav a {
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
  }

  aside#side nav a span {
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  aside#side .help p b {
    font-size: 14px !important;
    line-height: 1.15 !important;
  }

  aside#side .help p small {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }
}

/* Smart article rendering for admin-created posts */
.smartArticle {
  display: grid;
  gap: 18px;
  color: #073e45;
}

.smartArticleLead {
  padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(13,127,136,.12), rgba(111,218,210,.16));
  border: 1px solid rgba(13,127,136,.18);
  color: #073e45;
  font-size: 17px;
  line-height: 1.7;
  font-weight: 700;
}

.smartArticle h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  color: #075f68;
  font-size: 24px;
  line-height: 1.22;
  letter-spacing: 0;
}

.smartArticle h3::before {
  content: "✦";
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #ffd95a;
  color: #073e45;
  font-size: 16px;
  flex: 0 0 auto;
}

.smartArticle p {
  margin: 0;
  color: #174e55;
  font-size: 16px;
  line-height: 1.78;
  font-weight: 600;
}

.smartArticle p strong,
.smartArticle li strong {
  color: #075f68;
  font-weight: 900;
}

.smartArticle p em,
.smartArticle li em {
  color: #0d7f88;
  font-style: italic;
  font-weight: 800;
}

.smartArticle ul,
.smartArticle ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(238, 251, 249, .88);
  border: 1px solid rgba(13,127,136,.16);
  list-style: none;
}

.smartArticle li {
  position: relative;
  padding-left: 34px;
  color: #123f45;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 700;
}

.smartArticle li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 8px;
  background: #0d7f88;
  color: #fff;
  font-size: 12px;
}

.smartArticleQuote {
  padding: 18px 20px 18px 22px;
  border-left: 5px solid #ffd95a;
  border-radius: 16px;
  background: #073e45;
  color: #f4fffd;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 800;
}

.smartComposerHint {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin: 12px 0 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(13,127,136,.1), rgba(255,217,90,.14));
  border: 1px solid rgba(13,127,136,.18);
  color: #073e45;
}

.smartComposerHint i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: #075f68;
  color: #ffd95a;
  font-style: normal;
  font-weight: 900;
}

.smartComposerHint b {
  display: block;
  font-size: 14px;
  font-weight: 900;
}


.smartComposerHint small {
  display: block;
  margin-top: 3px;
  color: #4a7177;
  font-size: 11px;
  font-weight: 700;
}

/* ============================================================
   ✅ MASTERCLASS VN — DESIGN SYSTEM v2.0
   UI/UX Audit Fixes — 08/07/2026
   All issues from UI-AUDIT.md addressed below.
   No functionality changes. CSS-only improvements.
   ============================================================ */

/* -----------------------------------------------------------
   PHASE 1 · DESIGN TOKENS (M-01, M-03, M-05)
   Consolidated color, spacing, radius, z-index, shadow tokens.
   These override hardcoded values via higher specificity.
   ----------------------------------------------------------- */
:root {
  /* --- Color Palette (brand scale) --- */
  --brand-950: #031e21;
  --brand-900: #04292e;
  --brand-800: #063d43;
  --brand-750: #084b53;
  --brand-700: #0d5962;
  --brand-600: #105f68;   /* = legacy --p, primary action */
  --brand-500: #18828e;
  --brand-400: #3a9295;   /* = legacy --m */
  --brand-300: #63c1bb;   /* = legacy --a, accent */
  --brand-200: #9ed5d1;   /* = legacy --l */
  --brand-100: #c8e6e2;   /* = legacy --x */
  --brand-50:  #e3f4f0;
  --brand-25:  #f0f9f8;   /* = surface */

  /* --- Gold / Accent 2 --- */
  --gold-600: #d49a1c;
  --gold-500: #e7b84f;
  --gold-400: #ffd875;

  /* --- Semantic --- */
  --color-text-primary:   #0b3d43;
  --color-text-secondary: #2c6368;
  --color-text-muted:     #647b7e;
  --color-surface:        #f0f9f8;
  --color-border:         #bce2de;
  --color-border-light:   #dceceb;  /* = legacy --line */
  --color-danger:         #d9383a;
  --color-danger-light:   #fff0f0;
  --color-success:        #10b981;
  --color-success-light:  #d1fae5;
  --color-warning:        #f59e0b;

  /* --- Typography Scale --- */
  --text-2xs:  11px;  /* minimum WCAG accessible */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  28px;
  --text-3xl:  clamp(28px, 3vw, 36px);
  --text-hero: clamp(36px, 4.2vw, 62px);

  /* --- Line Height --- */
  --leading-tight:  1.25;
  --leading-snug:   1.4;
  --leading-normal: 1.55;
  --leading-relaxed:1.7;
  --leading-loose:  1.85;

  /* --- Border Radius (5-step scale) --- */
  --radius-xs:  6px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 24px;
  --radius-3xl: 28px;
  --radius-full: 9999px;

  /* --- Spacing (4px base grid) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- Shadow (5-step elevation) --- */
  --shadow-xs:  0 1px 3px rgba(16,95,104,.08);
  --shadow-sm:  0 4px 12px rgba(16,95,104,.10);
  --shadow-md:  0 8px 24px rgba(16,95,104,.12);
  --shadow-lg:  0 16px 40px rgba(16,95,104,.16);
  --shadow-xl:  0 28px 60px rgba(16,95,104,.22);
  --shadow-brand: 0 18px 55px rgba(16,95,104,.14);

  /* --- Z-Index Layer Map (M-05) --- */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-header:   30;
  --z-sidebar:  50;
  --z-dropdown: 100;
  --z-modal:    200;
  --z-toast:    300;
  --z-tooltip:  400;
  --z-top:      9999;

  /* --- Transition --- */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s cubic-bezier(.2,.8,.2,1);
}

/* -----------------------------------------------------------
   PHASE 2 · TYPOGRAPHY FIXES (M-02)
   Raise all sub-11px text to minimum 11px (WCAG 1.4.4)
   ----------------------------------------------------------- */

/* Fix 6px → 11px: supportHub small */
.supportHub small { font-size: var(--text-2xs) !important; }

/* Fix 7px small texts → 11px */
.hubBadge,
.continueCard p,
.continueProgress span,
.continueVisual small,
.hubCard a,
.hubCard button,
.hubCard p,
.miniDays i,
.lessonText small,
.lessonText em,
.lesson .time small,
.chapterMeta small,
.courseAction > span,
.courseAction > small,
.managedCard span,
.managedCard p,
.managedCard button,
.publishedEmpty,
.qaItem b,
.qaItem p,
.qaItem small,
.qaPanel > small,
#qaForm textarea,
#qaForm button,
.slideContent > div > span,
.slideTag,
.pageFoot,
.adminStats small,
.adminStats em,
.adminRow,
.adminRow small,
.adminRow button,
.adminHead,
.adminMain > header span,
.adminTitle span,
.contentForm > span,
#contentForm > span,
#contentForm label,
#contentForm footer button,
.courseAction > small,
.tab small,
.videoBody footer button,
.videoBody footer label,
.tag,
.new,
.loginCard > small,
.loginCard > span,
.loginCard label,
.lessonText small,
.streak small,
.streak i,
.now > span,
.now > label {
  font-size: var(--text-2xs) !important;
}

/* Fix 8px → 12px: secondary labels */
.title > span,
.published .title > span,
.hubHeading > a,
.hubHeading p,
.hubHeading span,
.hubCard > span,
.toolCard span,
.articleBody > span,
.articleMeta,
.adminLink,
.accountBtn,
.managedCard h3,
.notes p,
.videoBody h3 { font-size: var(--text-xs) !important; }

/* Ensure body text is at least 13px */
.lessonText b { font-size: var(--text-sm) !important; }
.lesson > button { font-size: var(--text-sm) !important; }

/* -----------------------------------------------------------
   PHASE 3 · ACCESSIBILITY (m-02, m-09, m-11)
   ----------------------------------------------------------- */

/* m-02: Global focus-visible ring */
:focus-visible {
  outline: 3px solid var(--brand-300) !important;
  outline-offset: 2px !important;
  border-radius: var(--radius-sm) !important;
}

/* Allow clean override for round elements */
button:focus-visible,
[role="button"]:focus-visible {
  border-radius: var(--radius-md) !important;
}

/* m-09: prefers-reduced-motion — enforce with high specificity */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .siteProgressVisual {
    animation: none !important;
  }

  .hubCard:hover,
  .continueCard:hover,
  .videoCard:hover,
  .managedCard:hover,
  .module:hover,
  .lesson:hover,
  .toolCard:hover,
  .awards article:hover {
    transform: none !important;
  }
}

/* m-11: Close button hover — remove rotate, keep scale + color */
.loginClose:hover,
.registerClose:hover,
.memberClose:hover,
.articleClose:hover,
.forgotClose:hover,
.x:hover,
[data-close-login]:hover,
[data-close-register]:hover,
[data-close]:hover,
[data-close-quiz]:hover,
[data-close-cert]:hover,
[data-close-member]:hover,
[data-close-viewer]:hover,
[data-close-article]:hover,
[data-close-editor]:hover {
  transform: scale(1.1) !important;
  /* Remove the rotate(90deg) that was set by previous !important rule */
}

/* -----------------------------------------------------------
   PHASE 4 · COMPONENT POLISH (m-05, m-10, button states)
   ----------------------------------------------------------- */

/* m-10: Scope #save correctly */
.notes #save,
.notes button.primary {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-500)) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

/* Button disabled state */
button:disabled,
button[disabled],
input:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

button:disabled:hover,
button[disabled]:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* registerModal: add shade overlay */
.registerModal {
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--z-modal) !important;
  display: none !important;
  place-items: center !important;
  padding: 18px !important;
  background: rgba(6, 39, 42, 0.82) !important;
  backdrop-filter: blur(10px) !important;
}
.registerModal.open {
  display: grid !important;
}

/* Fix articleModal z-index conflict (was 120 in one place, 500 in another) */
.articleModal,
.contentViewer {
  z-index: var(--z-modal) !important;  /* 200 — consistent */
}

/* Fix quizModal, certificateModal, memberModal z-index */
.quizModal,
.certificateModal {
  z-index: calc(var(--z-modal) + 50) !important; /* 250 */
}
.memberModal {
  z-index: calc(var(--z-modal) + 50) !important;
}
.loginModal {
  z-index: calc(var(--z-modal) + 100) !important; /* 300 */
}
.contentEditor {
  z-index: calc(var(--z-modal) + 100) !important; /* 300 */
}
#toast {
  z-index: var(--z-toast) !important; /* 300 */
}

/* m-05: Fix anchor security attribute (CSS can't fix rel, but we note it) */

/* -----------------------------------------------------------
   PHASE 5 · ADMIN IMPROVEMENTS (M-06, M-07)
   ----------------------------------------------------------- */

/* M-07: Admin table responsive wrapper */
.adminTable {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border-radius: var(--radius-md) !important;
}

@media (max-width: 768px) {
  /* Stacked table view on mobile */
  .adminRow {
    min-width: unset !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-2) !important;
    padding: var(--space-4) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: var(--space-2) !important;
  }

  .adminRow.adminHead {
    display: none !important; /* Hide table header on mobile */
  }

  .adminRow > span:before {
    font-size: var(--text-2xs) !important;
    font-weight: 800 !important;
    color: var(--color-text-muted) !important;
    letter-spacing: 0.08em !important;
    display: block !important;
    margin-bottom: 2px !important;
    text-transform: uppercase !important;
  }

  .adminRow > span:nth-child(1):before { content: "Nội dung"; }
  .adminRow > span:nth-child(2):before { content: "Loại"; }
  .adminRow > span:nth-child(3):before { content: "Ngày"; }
  .adminRow > span:nth-child(4):before { content: "Trạng thái"; }
  .adminRow > span:nth-child(5):before { content: "Thao tác"; }
}

/* M-06: Admin sidebar collapsed state — add tooltip labels */
@media (max-width: 900px) {
  .adminSide nav button {
    position: relative !important;
  }

  .adminSide nav button:first-letter {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #9ed5d1 !important;
  }

  /* Tooltip on hover */
  .adminSide nav button[data-label]:hover::after {
    content: attr(data-label) !important;
    position: absolute !important;
    left: calc(100% + 10px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: var(--brand-700) !important;
    color: #fff !important;
    padding: 5px 10px !important;
    border-radius: var(--radius-sm) !important;
    font-size: var(--text-2xs) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    z-index: var(--z-tooltip) !important;
    box-shadow: var(--shadow-md) !important;
    pointer-events: none !important;
  }
}

/* -----------------------------------------------------------
   PHASE 6 · GLOBAL CONSISTENCY POLISH
   ----------------------------------------------------------- */

/* Consistent font on admin table */
.adminRow {
  font-size: var(--text-sm) !important;
}
.adminRow small {
  font-size: var(--text-2xs) !important;
}
.adminRow button {
  font-size: var(--text-2xs) !important;
}
.adminHead {
  font-size: var(--text-2xs) !important;
}
.adminStats small {
  font-size: var(--text-2xs) !important;
}
.adminStats em {
  font-size: var(--text-2xs) !important;
}
.adminStats b {
  font-size: var(--text-xl) !important;
}

/* Unified border-radius for form inputs */
#contentForm input,
#contentForm select,
#contentForm textarea,
.loginCard input,
.notes textarea,
#note {
  border-radius: var(--radius-md) !important;
}

/* Consistent section padding — override the conflicting values */
.learnerHub {
  padding: var(--space-7) !important;
}

/* Make the homeSlider consistent — single definitive rule */
.homeSlider {
  max-width: calc(100% - 80px) !important;
  width: calc(100% - 80px) !important;
  margin: var(--space-8) auto var(--space-10) !important;
  border-radius: var(--radius-3xl) !important;
  box-sizing: border-box !important;
}

@media (max-width: 1050px) {
  .homeSlider {
    max-width: calc(100% - 68px) !important;
    width: calc(100% - 68px) !important;
    margin: var(--space-6) auto var(--space-8) !important;
  }
}

@media (max-width: 760px) {
  .homeSlider {
    max-width: calc(100% - 32px) !important;
    width: calc(100% - 32px) !important;
    margin: var(--space-5) auto var(--space-6) !important;
    border-radius: var(--radius-2xl) !important;
  }
}

/* Section container alignment — consistent max-width + centering */
.learnerHub,
.published,
.learningTools,
.videos,
.notes,
.awards {
  max-width: 1360px !important;
  width: calc(100% - 80px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 760px) {
  .learnerHub,
  .published,
  .learningTools,
  .videos,
  .notes,
  .awards {
    width: calc(100% - 32px) !important;
  }
}

/* .dashboard width fix to not conflict with grid */
.dashboard {
  max-width: 1360px !important;
  width: calc(100% - 80px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  padding: 12px 0 34px !important;
}

@media (max-width: 760px) {
  .dashboard {
    width: calc(100% - 32px) !important;
    padding: 10px 0 25px !important;
  }
}

/* Fix awards grid — single template */
.awards > div:last-child {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: var(--space-5) !important;
  margin-top: var(--space-5) !important;
}

/* Fix continueCard padding — single value */
.continueCard {
  padding: var(--space-4) !important;
}

/* Consistent page footer */
.pageFoot {
  padding: var(--space-5) var(--space-8) var(--space-8) !important;
  font-size: var(--text-2xs) !important;
  color: var(--color-text-muted) !important;
}

/* Toast accessibility */
#toast {
  role: "status" !important; /* Note: role attr cannot be set in CSS, see HTML */
}

/* -----------------------------------------------------------
   MOBILE WEB APP FINAL PASS
   Android/iOS layout built from the desktop visual system.
   ----------------------------------------------------------- */
@media (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: #eef8f6 !important;
  }

  body {
    color: #12373b !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .app {
    display: block !important;
    width: 100% !important;
    min-height: 100dvh !important;
  }

  .app > main {
    width: 100% !important;
    min-width: 0 !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }

  body:not(.adminPage) header {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    display: grid !important;
    grid-template-columns: 44px 1fr 44px !important;
    gap: 10px !important;
    align-items: center !important;
    min-height: 72px !important;
    padding: calc(8px + env(safe-area-inset-top)) 14px 10px !important;
    background: rgba(246, 252, 251, .96) !important;
    border-bottom: 1px solid #cfe6e3 !important;
    box-shadow: 0 12px 30px rgba(7, 69, 76, .12) !important;
    backdrop-filter: blur(18px) !important;
  }

  #menu {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    border: 1px solid #bfe0dc !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #105f68 !important;
    font-size: 20px !important;
    box-shadow: 0 8px 20px rgba(16, 95, 104, .12) !important;
  }

  body:not(.adminPage) header .tabs {
    order: 0 !important;
    grid-column: 2 / 3 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body:not(.adminPage) header .tab {
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 7px 8px !important;
    border-radius: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 0 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
  }

  body:not(.adminPage) header .tab i {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 auto !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 9px !important;
    font-size: 12px !important;
  }

  body:not(.adminPage) header .tab span {
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }

  body:not(.adminPage) header .tab small {
    display: none !important;
  }

  .notificationBtn {
    grid-column: 3 / 4 !important;
    width: 44px !important;
    height: 44px !important;
    border: 1px solid #bfe0dc !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #105f68 !important;
    box-shadow: 0 8px 20px rgba(16, 95, 104, .12) !important;
  }

  body:not(.adminPage) header .search {
    grid-column: 1 / -1 !important;
    order: 4 !important;
    width: 100% !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    border-radius: 15px !important;
    background: #fff !important;
    border-color: #c7e2df !important;
  }

  body:not(.adminPage) header .registerBtn,
  body:not(.adminPage) header .memberButton {
    display: none !important;
  }

  header > .accountArea {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    order: 5 !important;
  }

  header > .accountArea > #accountButton,
  body:not(.adminPage) header > #accountButton {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, #105f68, #0b7279) !important;
    color: #fff !important;
    font-size: 12px !important;
    box-shadow: 0 12px 24px rgba(16, 95, 104, .22) !important;
  }

  aside#side {
    width: min(330px, 92vw) !important;
    max-width: 92vw !important;
    padding: calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-105%) !important;
    transition: transform .24s ease !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 24px 0 60px rgba(0, 35, 39, .34) !important;
  }

  aside#side.open {
    transform: translateX(0) !important;
  }

  #closeSide {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    right: 12px !important;
    top: calc(12px + env(safe-area-inset-top)) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.14) !important;
    color: #fff !important;
    font-size: 22px !important;
  }

  aside#side .brand {
    margin: 0 44px 16px 0 !important;
    gap: 10px !important;
  }

  aside#side .brand i {
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
    font-size: 25px !important;
  }

  aside#side .brand b {
    font-size: 15px !important;
    line-height: 1.1 !important;
  }

  aside#side .brand small {
    font-size: 8px !important;
    letter-spacing: .9px !important;
  }

  aside#side .profile {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 16px !important;
    padding: 16px !important;
    display: grid !important;
    grid-template-columns: 116px 1fr !important;
    gap: 14px !important;
    align-items: center !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(99,193,187,.09)) !important;
    border: 1px solid rgba(158,213,209,.35) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.13), 0 16px 32px rgba(0, 35, 39, .2) !important;
  }

  aside#side .profile .avatar,
  aside#side .avatar {
    width: 116px !important;
    height: 116px !important;
    border-radius: 21px !important;
    border: 4px solid rgba(255,255,255,.84) !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.22) !important;
  }

  aside#side .profile .avatar img,
  aside#side .avatar .customAvatarImg,
  .profile .customAvatarImg {
    border-radius: 16px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  aside#side .profile > p {
    min-width: 0 !important;
    margin: 0 !important;
    display: grid !important;
    gap: 8px !important;
  }

  aside#side .profile p b {
    font-size: 20px !important;
    line-height: 1.15 !important;
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.25) !important;
    overflow-wrap: anywhere !important;
  }

  aside#side .profile p small {
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: #d7f4f1 !important;
    max-width: 100% !important;
  }

  aside#side .profile > .profileOpenLink {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 46px !important;
    margin: 2px 0 0 !important;
    border-radius: 15px !important;
    font-size: 13px !important;
    justify-content: center !important;
  }

  aside#side .overall {
    margin: 12px 4px 16px !important;
    padding: 0 !important;
    gap: 14px !important;
  }

  aside#side .overall .ring {
    width: 76px !important;
    height: 76px !important;
  }

  aside#side .overall p b {
    font-size: 16px !important;
  }

  aside#side nav {
    gap: 8px !important;
  }

  aside#side nav a {
    min-height: 52px !important;
    padding: 9px 11px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border-radius: 16px !important;
  }

  aside#side nav a span {
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  aside#side .help {
    margin-top: 14px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    flex-shrink: 0 !important;
  }

  aside#side .help p b {
    font-size: 13px !important;
  }

  aside#side .help p small {
    font-size: 10px !important;
  }

  .homeSlider,
  .learnerHub,
  .dashboard,
  .published,
  .learningTools,
  .videos,
  .notes,
  .awards {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    box-sizing: border-box !important;
  }

  .homeSlider {
    height: min(560px, calc(100dvh - 160px)) !important;
    min-height: 430px !important;
    margin-top: 14px !important;
    margin-bottom: 18px !important;
    border-radius: 22px !important;
  }

  .homeSlide {
    background-position: 66% center !important;
  }

  .homeSlide::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(0deg, rgba(6,62,68,.98) 0%, rgba(6,62,68,.88) 43%, rgba(6,62,68,.25) 100%) !important;
  }

  .slideContent {
    left: 18px !important;
    right: 18px !important;
    bottom: 54px !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
  }

  .slideTag {
    font-size: 8px !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .slideContent h1 {
    font-size: clamp(27px, 8vw, 34px) !important;
    line-height: 1.13 !important;
    letter-spacing: 0 !important;
    margin: 12px 0 !important;
  }

  .slideContent > p {
    font-size: 13px !important;
    line-height: 1.58 !important;
    color: #e8fbf8 !important;
  }

  .slideContent > div {
    display: grid !important;
    gap: 10px !important;
    align-items: start !important;
  }

  .slideCta {
    width: 100% !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 15px !important;
    font-size: 13px !important;
  }

  .slideArrow {
    top: 29% !important;
    width: 40px !important;
    height: 40px !important;
    background: rgba(5,47,52,.72) !important;
  }

  .slideNav {
    left: 18px !important;
    bottom: 20px !important;
  }

  .slideCount {
    right: 18px !important;
    bottom: 15px !important;
  }

  .learnerHub,
  .published,
  .learningTools,
  .videos,
  .notes,
  .awards,
  .curriculum,
  .now {
    padding: 16px !important;
    border-radius: 20px !important;
    border: 1px solid #d2e9e6 !important;
    box-shadow: 0 14px 36px rgba(16, 95, 104, .1) !important;
  }

  .hubHeading,
  .title {
    display: grid !important;
    gap: 6px !important;
    align-items: start !important;
    margin-bottom: 14px !important;
  }

  .hubHeading h2,
  .title p > b,
  .title h2,
  .published .title b,
  .learningTools .title b,
  .videos .title b,
  .notes h2,
  .awards .title b {
    font-size: 21px !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    color: #103e43 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
  }

  .hubHeading p,
  .title > span {
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  .hubGrid,
  .toolGrid,
  #publishedGrid,
  .publishedGrid,
  #videoGrid,
  .awards > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .continueCard {
    grid-template-columns: 1fr !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .continueVisual,
  .managedMedia,
  .videoCard .thumb {
    height: auto !important;
    min-height: 180px !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 16px !important;
  }

  .hubCard,
  .toolCard,
  .managedCard,
  .videoCard,
  .awards article {
    min-height: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid #d7e9e7 !important;
    box-shadow: 0 10px 26px rgba(16, 95, 104, .08) !important;
  }

  .managedCard h3,
  .videoBody h3,
  .toolCard h3,
  .hubCard strong {
    font-size: 17px !important;
    line-height: 1.35 !important;
    min-height: 0 !important;
    color: #103e43 !important;
  }

  .managedCard p,
  .videoBody p,
  .toolCard p,
  .hubCard p {
    font-size: 12px !important;
    line-height: 1.55 !important;
    min-height: 0 !important;
  }

  .dashboard {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 !important;
  }

  .courseCover {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .courseImage {
    min-height: 190px !important;
    aspect-ratio: 16 / 10 !important;
  }

  .courseMain h2 {
    font-size: 21px !important;
    line-height: 1.25 !important;
  }

  .courseFacts {
    grid-template-columns: 1fr 1fr !important;
  }

  .module {
    border-radius: 17px !important;
    margin-top: 10px !important;
  }

  .module > .chapterHead,
  .module > button {
    grid-template-columns: 78px 1fr 24px !important;
    gap: 10px !important;
    padding: 13px !important;
  }

  .chapterMeta {
    display: none !important;
  }

  .modTitle b {
    font-size: 14px !important;
    line-height: 1.35 !important;
    color: #103e43 !important;
  }

  .module.open .modTitle b {
    color: #fff !important;
  }

  .lesson {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 13px !important;
  }

  .lesson > div {
    align-items: flex-start !important;
  }

  .lessonText b {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .lesson .time {
    display: inline-flex !important;
    width: max-content !important;
  }

  .lesson > button {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
  }

  .now {
    position: relative !important;
    top: auto !important;
    align-self: stretch !important;
  }

  .notes {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .notes textarea,
  #note,
  #qaForm textarea {
    min-height: 120px !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  .notes footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .notes footer small {
    max-width: none !important;
  }

  .notes footer button,
  #qaForm button,
  .toolCard button,
  .managedCard button,
  .videoBody footer button {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
  }

  .modal,
  .contentViewer,
  .articleModal,
  .loginModal,
  .registerModal,
  .memberModal,
  .quizModal,
  .certificateModal,
  .learnerProfileModal {
    padding: 10px !important;
    align-items: end !important;
  }

  .modal > article,
  .contentViewer article,
  .articleReader,
  .loginCard,
  .registerCard,
  .quizCard,
  .certificate,
  .learnerProfileCard {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - 20px) !important;
    overflow: auto !important;
    border-radius: 22px 22px 18px 18px !important;
  }

  .modal > article {
    display: grid !important;
    grid-template-rows: auto 1fr !important;
  }

  .frame {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    border-radius: 0 !important;
  }

  #qaForm {
    display: grid !important;
    grid-template-columns: 52px 1fr !important;
    gap: 10px !important;
  }

  #qaForm .qaAvatar {
    display: grid !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
  }

  #qaForm .qaStudentMeta {
    grid-column: 2 / 3 !important;
  }

  #qaForm textarea,
  #qaForm button {
    grid-column: 1 / -1 !important;
  }

  .commentCard {
    border-radius: 16px !important;
    padding: 12px !important;
  }

  .commentTop {
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .commentTop time {
    font-size: 9px !important;
  }

  .learnerProfileHero {
    display: grid !important;
    grid-template-columns: 96px 1fr !important;
    gap: 14px !important;
    align-items: center !important;
  }

  .learnerProfileAvatar {
    width: 96px !important;
    height: 96px !important;
    border-radius: 20px !important;
  }

  .learnerProfileTitle h2 {
    font-size: 24px !important;
    line-height: 1.15 !important;
  }

  .learnerProfileGrid {
    grid-template-columns: 1fr !important;
  }

  #toast {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    text-align: center !important;
    border-radius: 15px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 430px) {
  body:not(.adminPage) header {
    grid-template-columns: 42px 1fr 42px !important;
    gap: 8px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body:not(.adminPage) header .tab {
    padding-inline: 5px !important;
  }

  body:not(.adminPage) header .tab span {
    font-size: 9px !important;
  }

  aside#side .profile {
    grid-template-columns: 102px 1fr !important;
    padding: 13px !important;
  }

  aside#side .profile .avatar,
  aside#side .avatar {
    width: 102px !important;
    height: 102px !important;
  }

  aside#side .profile p b {
    font-size: 18px !important;
  }

  .homeSlider {
    min-height: 400px !important;
    height: min(510px, calc(100dvh - 150px)) !important;
  }

  .slideContent h1 {
    font-size: 27px !important;
  }

  .learnerProfileHero {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  .learnerProfileAvatar {
    margin: 0 auto !important;
  }
}

/* Admin mobile should behave like an app screen, not a squeezed desktop table. */
@media (max-width: 768px) {
  body.adminPage {
    background: #eef8f6 !important;
    overflow-x: hidden !important;
  }

  .adminSide {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    width: 100% !important;
    height: auto !important;
    padding: calc(10px + env(safe-area-inset-top)) 12px 12px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    border-radius: 0 0 22px 22px !important;
    box-shadow: 0 14px 34px rgba(5, 47, 52, .22) !important;
  }

  .adminSide .brand {
    margin: 0 !important;
  }

  .adminSide .brand b {
    font-size: 15px !important;
  }

  .adminSide nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
  }

  .adminSide nav button {
    min-height: 44px !important;
    padding: 8px 6px !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    white-space: normal !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.1) !important;
    color: #e8fbf8 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .adminSide nav button:first-letter {
    font-size: inherit !important;
  }

  .adminSide > a:last-child {
    display: none !important;
  }

  .adminMain {
    margin-left: 0 !important;
    padding: 14px 12px calc(20px + env(safe-area-inset-bottom)) !important;
  }

  .adminMain > header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 !important;
  }

  .adminMain > header h1 {
    font-size: 23px !important;
    line-height: 1.2 !important;
  }

  .adminHeaderActions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 48px 1fr !important;
    gap: 10px !important;
  }

  .adminHeaderActions #newContent,
  .adminMain > header > #newContent {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 15px !important;
    font-size: 12px !important;
  }

  .adminStats {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 18px 0 !important;
  }

  .adminStats article,
  .adminWorkspace,
  .memberWorkspace,
  .questionWorkspace {
    border-radius: 20px !important;
    padding: 15px !important;
    box-shadow: 0 12px 32px rgba(16,95,104,.1) !important;
  }

  .adminTitle {
    display: grid !important;
    gap: 12px !important;
    align-items: start !important;
  }

  .adminTitle h2 {
    font-size: 21px !important;
    line-height: 1.25 !important;
  }

  .adminTitle input,
  .memberAdminActions input,
  .contentAdminTools select {
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
  }

  .contentAdminTools,
  .memberAdminActions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .adminRow,
  .memberRow {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin-bottom: 12px !important;
    padding: 14px !important;
    border: 1px solid #d7e9e7 !important;
    border-radius: 17px !important;
    background: #fff !important;
  }

  .adminRow.adminHead,
  .memberRow.memberHead {
    display: none !important;
  }

  .adminRow > span,
  .memberRow > span {
    min-width: 0 !important;
  }

  .adminRow b,
  .memberRow b {
    font-size: 14px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
  }

  .adminRow small,
  .memberRow small {
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  .adminRow span:last-child,
  .memberRow span:last-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .adminRow button,
  .memberRow select {
    width: 100% !important;
    min-height: 40px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
  }

  .contentEditor {
    padding: 0 !important;
    align-items: stretch !important;
  }

  #contentForm {
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding: calc(18px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom)) !important;
  }

  #contentForm h2 {
    font-size: 24px !important;
    line-height: 1.2 !important;
    padding-right: 42px !important;
  }

  .formGrid,
  .formGrid.contentRouting {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #contentForm input,
  #contentForm select,
  #contentForm textarea {
    min-height: 46px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
  }

  #contentForm textarea.large {
    min-height: 170px !important;
  }

  #contentForm footer {
    position: sticky !important;
    bottom: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
    padding-top: 12px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.82), #fff 42%) !important;
  }
}

/* Q&A identity polish: full student name with avatar beside the comment box. */
#qaForm {
  align-items: center !important;
}

/* Final author avatar sync: use the course author's portrait crop everywhere in articles. */
.authorBlock .authorPhoto,
.lessonCommerce .authorPhoto,
.instructorReply .instructorAvatar {
  background: #e5f3f1 !important;
  border-color: #63c1bb !important;
}

.authorBlock .authorPhoto img,
.lessonCommerce .authorPhoto img,
.instructorReply .instructorAvatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 70% 24% !important;
  transform: scale(1.72) !important;
  transform-origin: 70% 24% !important;
}

.authorBlock .authorPhoto {
  width: 52px !important;
  height: 52px !important;
  box-shadow: 0 8px 18px rgba(16, 95, 104, 0.16) !important;
}

.authorBlock .authorPhoto img.authorAvatarImg,
.lessonCommerce .authorPhoto img.authorAvatarImg,
.instructorReply .instructorAvatar img.authorAvatarImg {
  object-position: center !important;
  transform: none !important;
  transform-origin: center !important;
  border-radius: 50% !important;
}

#qaForm .qaAvatar,
#qaForm .qaStudentAvatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid #cfe8e5 !important;
  background: #e3f6f3 !important;
  box-shadow: 0 8px 18px rgba(16, 95, 104, .12) !important;
}

#qaForm .qaAvatar img,
#qaForm .qaStudentAvatar img,
.commentAvatar img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

#qaForm .qaStudentMeta {
  min-width: 150px !important;
  max-width: 210px !important;
}

#qaForm .qaStudentMeta b {
  display: block !important;
  max-width: 100% !important;
  color: #083f46 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

#qaForm .qaStudentMeta small {
  display: block !important;
  margin-top: 3px !important;
  color: #54767a !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}

.finalCommentCard {
  display: grid !important;
  grid-template-columns: 52px 1fr !important;
  gap: 12px !important;
  align-items: start !important;
}

.finalCommentCard .commentAvatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid #cfe8e5 !important;
  background: #e3f6f3 !important;
  box-shadow: 0 8px 18px rgba(16, 95, 104, .12) !important;
}

.finalCommentCard .commentTop {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.finalCommentCard .commentTop span {
  min-width: 0 !important;
}

.finalCommentCard .commentTop b {
  display: block !important;
  color: #083f46 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 900 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.finalCommentCard .commentTop small {
  display: block !important;
  margin-top: 2px !important;
  color: #54767a !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}

@media (min-width: 769px) {
  #qaForm {
    grid-template-columns: 52px minmax(155px, 210px) 1fr auto !important;
    gap: 12px !important;
  }

  #qaForm textarea {
    min-height: 70px !important;
  }

  #qaForm button {
    min-width: 120px !important;
    min-height: 52px !important;
  }
}

@media (max-width: 768px) {
  #qaForm {
    grid-template-columns: 52px 1fr !important;
    gap: 10px !important;
  }

  #qaForm .qaStudentMeta {
    max-width: none !important;
    min-width: 0 !important;
  }

  #qaForm textarea,
  #qaForm button {
    grid-column: 1 / -1 !important;
  }

  .finalCommentCard {
    grid-template-columns: 46px 1fr !important;
  }

  .finalCommentCard .commentAvatar {
    width: 46px !important;
    height: 46px !important;
  }
}

/* Final mobile top-edge fix: remove the white strip above the app header. */
@media (max-width: 768px) {
  html,
  body,
  body:not(.adminPage),
  body:not(.adminPage) .app,
  body:not(.adminPage) .app > main {
    background: #eaf7f5 !important;
  }

  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100dvh !important;
  }

  body:not(.adminPage)::before {
    content: "" !important;
    position: fixed !important;
    z-index: 89 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: calc(10px + env(safe-area-inset-top)) !important;
    background: #eaf7f5 !important;
    pointer-events: none !important;
  }

  body:not(.adminPage)::after {
    content: "" !important;
    position: fixed !important;
    z-index: 2147483647 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: calc(8px + env(safe-area-inset-top)) !important;
    background: #d4e9e6 !important;
    pointer-events: none !important;
  }

  body:not(.adminPage) header {
    top: 0 !important;
    margin-top: 0 !important;
    background: #eaf7f5 !important;
    border-top: 0 !important;
    box-shadow: 0 10px 24px rgba(8, 82, 89, .10) !important;
  }

  body:not(.adminPage) .homeSlider {
    margin-top: 16px !important;
  }
}

/* Mobile rebuild v3: replace the stacked legacy mobile header and content flow. */
@media (max-width: 768px) {
  :root {
    --mobile-bg: #eaf7f5;
    --mobile-head-bg: #d4e9e6;
    --mobile-panel: #f7fcfb;
    --mobile-ink: #0b3f46;
    --mobile-muted: #5b777b;
    --mobile-line: #bfe2de;
    --mobile-teal: #106f78;
    --mobile-radius: 18px;
    --mobile-pad: 12px;
  }

  html,
  body,
  body:not(.adminPage),
  body:not(.adminPage) .app,
  body:not(.adminPage) main,
  body:not(.adminPage) .app > main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    background: var(--mobile-bg) !important;
    overflow-x: hidden !important;
  }

  body:not(.adminPage) .app {
    display: block !important;
    min-height: 100dvh !important;
  }

  body:not(.adminPage) .app > main {
    display: block !important;
    padding: 0 0 calc(24px + env(safe-area-inset-bottom)) !important;
  }

  body:not(.adminPage) header {
    position: sticky !important;
    top: 0 !important;
    z-index: 180 !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: calc(10px + env(safe-area-inset-top)) var(--mobile-pad) 10px !important;
    background: linear-gradient(180deg, #c9dfdc 0%, var(--mobile-head-bg) 100%) !important;
    border: 0 !important;
    box-shadow: 0 8px 18px rgba(5, 76, 83, .10) !important;
    backdrop-filter: none !important;
  }

  body:not(.adminPage) header > #menu {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    place-items: center !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: #7f999b !important;
    color: #fff !important;
    font-size: 0 !important;
    box-shadow: 0 8px 18px rgba(5, 76, 83, .12) !important;
    position: relative !important;
    z-index: 170 !important;
  }

  body:not(.adminPage) header > #menu::before {
    content: "☰" !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  body:not(.adminPage) header .tabs {
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body:not(.adminPage) header .tab {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    min-width: 0 !important;
    width: 100% !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 7px 9px !important;
    border: 1px solid rgba(99, 193, 187, .28) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .54) !important;
    color: rgba(16, 95, 104, .32) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    overflow: hidden !important;
  }

  body:not(.adminPage) header .tab.active {
    background: linear-gradient(135deg, #0f7a83, #0b6670) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 8px 18px rgba(5, 76, 83, .20) !important;
  }

  body:not(.adminPage) header .tab i {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .22) !important;
    color: currentColor !important;
    font-size: 12px !important;
    font-style: normal !important;
  }

  body:not(.adminPage) header .tab span {
    display: block !important;
    min-width: 0 !important;
    color: currentColor !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: 0 !important;
  }

  body:not(.adminPage) header .tab small {
    display: none !important;
  }

  body:not(.adminPage) header .search {
    grid-column: 1 / 5 !important;
    grid-row: 2 !important;
    order: 0 !important;
    display: flex !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--mobile-line) !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #7dbfba !important;
    box-shadow: inset 0 2px 6px rgba(5, 76, 83, .08), 0 6px 14px rgba(5, 76, 83, .10) !important;
  }

  body:not(.adminPage) header .search input {
    color: var(--mobile-ink) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  body:not(.adminPage) header .search input::placeholder {
    color: #9ed5d1 !important;
    opacity: 1 !important;
  }

  body:not(.adminPage) header > .accountArea,
  body:not(.adminPage) header > #accountButton,
  body:not(.adminPage) header > #registerButton,
  body:not(.adminPage) header > #memberButton,
  body:not(.adminPage) header > #notificationButton,
  body:not(.adminPage) header > .notificationBtn,
  body:not(.adminPage) header > .registerBtn,
  body:not(.adminPage) header > .memberButton,
  body:not(.adminPage) header > .notificationPanel {
    display: none !important;
  }

  body:not(.adminPage) .homeSlider,
  body:not(.adminPage) .learnerHub,
  body:not(.adminPage) .dashboard,
  body:not(.adminPage) .published,
  body:not(.adminPage) .learningTools,
  body:not(.adminPage) .videos,
  body:not(.adminPage) .notes,
  body:not(.adminPage) .awards {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin: 18px 12px !important;
    padding: 16px !important;
    border-radius: var(--mobile-radius) !important;
    border: 1px solid var(--mobile-line) !important;
    background: var(--mobile-panel) !important;
    box-shadow: 0 12px 28px rgba(5, 76, 83, .10) !important;
  }

  body:not(.adminPage) .homeSlider {
    position: relative !important;
    height: clamp(460px, 72vh, 560px) !important;
    min-height: 460px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #073f46 !important;
  }

  body:not(.adminPage) .homeSlide {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: 62% center !important;
  }

  body:not(.adminPage) .homeSlide::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(0deg, rgba(4, 61, 67, .98) 0%, rgba(4, 61, 67, .90) 45%, rgba(4, 61, 67, .28) 100%) !important;
  }

  body:not(.adminPage) .slideContent {
    position: absolute !important;
    z-index: 2 !important;
    left: 32px !important;
    right: 32px !important;
    bottom: 70px !important;
    top: auto !important;
    width: auto !important;
    transform: none !important;
    color: #fff !important;
  }

  body:not(.adminPage) .slideTag {
    display: inline-flex !important;
    max-width: 100% !important;
    padding: 7px 11px !important;
    border-radius: 999px !important;
    background: rgba(16, 111, 120, .86) !important;
    border: 1px solid rgba(158, 213, 209, .65) !important;
    color: #fff !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:not(.adminPage) .slideContent h1 {
    margin: 13px 0 10px !important;
    color: #fff !important;
    font-size: clamp(28px, 7.6vw, 36px) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    text-wrap: balance !important;
  }

  body:not(.adminPage) .slideContent h1 em {
    color: #fff !important;
  }

  body:not(.adminPage) .slideContent > p {
    margin: 0 !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    font-weight: 650 !important;
  }

  body:not(.adminPage) .slideContent > div {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
    margin-top: 18px !important;
  }

  body:not(.adminPage) .slideCta {
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #f5c04c, #e29b22) !important;
    color: #082e33 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  body:not(.adminPage) .slideContent > div > span {
    color: #e8fbf8 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
  }

  body:not(.adminPage) .slideArrow {
    z-index: 3 !important;
    top: 37% !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;
    background: rgba(8, 69, 76, .62) !important;
    border: 1px solid rgba(255, 255, 255, .45) !important;
    color: #fff !important;
    font-size: 28px !important;
  }

  body:not(.adminPage) .slideArrow.prev {
    left: 18px !important;
  }

  body:not(.adminPage) .slideArrow.next {
    right: 18px !important;
  }

  body:not(.adminPage) .slideNav {
    z-index: 3 !important;
    left: 32px !important;
    bottom: 20px !important;
  }

  body:not(.adminPage) .slideCount {
    z-index: 3 !important;
    right: 24px !important;
    bottom: 20px !important;
    color: #e8fbf8 !important;
  }

  body:not(.adminPage) .learnerHub {
    margin-top: 18px !important;
  }

  body:not(.adminPage) .hubHeading {
    display: block !important;
  }

  body:not(.adminPage) .hubHeading label,
  body:not(.adminPage) .title label {
    color: #1d8991 !important;
    font-size: 10px !important;
    letter-spacing: 1.6px !important;
  }

  body:not(.adminPage) .hubHeading h2,
  body:not(.adminPage) .title p > b {
    color: var(--mobile-ink) !important;
    background: none !important;
    font-size: 22px !important;
    line-height: 1.22 !important;
    letter-spacing: 0 !important;
  }

  body:not(.adminPage) .hubHeading p,
  body:not(.adminPage) .title > span {
    color: var(--mobile-muted) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  body:not(.adminPage) .hubGrid,
  body:not(.adminPage) #publishedGrid,
  body:not(.adminPage) #videoGrid,
  body:not(.adminPage) .toolGrid,
  body:not(.adminPage) .awards > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body:not(.adminPage) .continueCard,
  body:not(.adminPage) .hubCard,
  body:not(.adminPage) .managedCard,
  body:not(.adminPage) .videoCard,
  body:not(.adminPage) .toolCard,
  body:not(.adminPage) .awards article {
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  body:not(.adminPage) .dashboard {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body:not(.adminPage) .dashboard > .curriculum,
  body:not(.adminPage) .dashboard > .now {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 18px !important;
    border-radius: var(--mobile-radius) !important;
  }

  body:not(.adminPage) .courseCover,
  body:not(.adminPage) .continueCard,
  body:not(.adminPage) .notes {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 430px) {
  body:not(.adminPage) header {
    --mobile-pad: 10px;
    gap: 7px !important;
  }

  body:not(.adminPage) header .tab {
    padding-inline: 7px !important;
  }

  body:not(.adminPage) header .tab span {
    font-size: 9px !important;
  }

  body:not(.adminPage) .homeSlider {
    height: 470px !important;
    min-height: 470px !important;
  }

  body:not(.adminPage) .slideContent {
    left: 24px !important;
    right: 24px !important;
    bottom: 62px !important;
  }
}

/* Mobile drawer auth layout and reliable close affordance. */
@media (max-width: 768px) {
  body:not(.adminPage)::before {
    opacity: 0 !important;
    transition: opacity .22s ease !important;
  }

  body:not(.adminPage).mobileDrawerOpen::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 92 !important;
    height: auto !important;
    background: rgba(2, 32, 36, .48) !important;
    backdrop-filter: blur(2px) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body:not(.adminPage) #side {
    z-index: 130 !important;
    width: min(296px, 82vw) !important;
    padding: calc(16px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom)) !important;
    border-right: 1px solid rgba(158, 213, 209, .25) !important;
    box-shadow: 28px 0 70px rgba(0, 28, 32, .46) !important;
    gap: 10px !important;
    overflow-y: auto !important;
  }

  body:not(.adminPage) #menu.isOpen {
    background: #0c5861 !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .22), 0 8px 18px rgba(5, 76, 83, .18) !important;
    z-index: 180 !important;
  }

  body:not(.adminPage) #menu.isOpen::before {
    content: "×" !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    transform: translateY(-1px) !important;
  }

  body:not(.adminPage) #closeSide {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    right: 12px !important;
    top: calc(12px + env(safe-area-inset-top)) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
    font-size: 24px !important;
  }

  .mobileAuthPanel {
    display: block !important;
    margin: 10px 2px 12px !important;
    padding: 12px !important;
    border-radius: 17px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.07)) !important;
    border: 1px solid rgba(158, 213, 209, .24) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
  }

  .mobileAuthPanel span,
  .mobileAuthPanel b,
  .mobileAuthPanel p {
    display: block !important;
    margin: 0 !important;
  }

  .mobileAuthPanel span {
    color: #9ed5d1 !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    letter-spacing: 1.4px !important;
  }

  .mobileAuthPanel b {
    margin-top: 5px !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  .mobileAuthPanel p {
    margin-top: 4px !important;
    color: #c8e6e2 !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
  }

  .mobileAuthPanel div {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 11px !important;
  }

  .mobileAuthPanel button {
    min-height: 39px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(158, 213, 209, .36) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
  }

  .mobileAuthPanel [data-mobile-login] {
    background: #e7b84f !important;
    color: #073b42 !important;
  }

  .mobileAuthPanel [data-mobile-register] {
    background: rgba(255, 255, 255, .10) !important;
    color: #fff !important;
  }

  body:not(.adminPage) #side.isGuest .overall {
    display: none !important;
  }

  body:not(.adminPage) #side.isGuest .profile {
    display: none !important;
  }

  body:not(.adminPage) #side:has(.mobileAuthPanel:not([hidden])) .overall {
    display: none !important;
  }

  body:not(.adminPage) #side:has(.mobileAuthPanel:not([hidden])) .profile {
    display: none !important;
  }

  body:not(.adminPage) #side.isLoggedIn .overall {
    display: flex !important;
  }

  body:not(.adminPage) #side.isGuest .profile {
    margin-bottom: 0 !important;
  }

  body:not(.adminPage) #side.isGuest nav {
    margin-top: 2px !important;
  }

  body:not(.adminPage) #side .brand {
    margin-bottom: 12px !important;
  }

  body:not(.adminPage) #side .profile {
    min-height: auto !important;
    padding: 12px !important;
  }

  body:not(.adminPage) #side nav {
    gap: 7px !important;
  }

  body:not(.adminPage) #side nav a {
    min-height: 50px !important;
    padding: 10px 12px !important;
  }

  body:not(.adminPage) #side .help {
    margin-top: auto !important;
    min-height: 52px !important;
    padding: 10px 12px !important;
  }
}

/* -----------------------------------------------------------
   END OF DESIGN SYSTEM v2.0
   ============================================================ */

/* Final simplified admin publishing pack */
.publishingRoutePack {
  margin: 18px 0 22px !important;
  padding: 18px !important;
  border: 1px solid #bfe2de !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #f3fbfa, #ffffff) !important;
}

.publishPackHead span,
.publishPackHead h3,
.publishPackHead p {
  display: block !important;
  margin: 0 !important;
}

.publishPackHead span {
  color: #278b91 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 1.4px !important;
}

.publishPackHead h3 {
  margin-top: 5px !important;
  color: #073f46 !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
}

.publishPackHead p {
  margin-top: 6px !important;
  max-width: 680px !important;
  color: #587b7f !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.publishRouteGrid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 15px !important;
}

.publishRouteGrid button {
  display: grid !important;
  grid-template-columns: 42px 1fr !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 4px 10px !important;
  min-height: 118px !important;
  padding: 13px !important;
  border: 1px solid #c9e4e1 !important;
  border-radius: 15px !important;
  background: #fff !important;
  color: #0a4d55 !important;
  text-align: left !important;
  box-shadow: 0 10px 22px rgba(5, 76, 83, .08) !important;
}

.publishRouteGrid button i {
  grid-row: 1 / 3 !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  background: #e2f5f2 !important;
  color: #0e777f !important;
  font-style: normal !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.publishRouteGrid button b {
  color: #073f46 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

.publishRouteGrid button small {
  color: #5c7e82 !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
}

.publishRouteGrid button.active {
  border-color: #0f7a83 !important;
  background: linear-gradient(135deg, #0f737c, #0b5c65) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(5, 76, 83, .22) !important;
}

.publishRouteGrid button.active i {
  background: rgba(255, 255, 255, .16) !important;
  color: #fff !important;
}

.publishRouteGrid button.active b,
.publishRouteGrid button.active small {
  color: #fff !important;
}

.publishRoutePreview {
  margin-top: 12px !important;
  padding: 12px 14px !important;
  border-radius: 13px !important;
  background: #eaf7f5 !important;
  border: 1px solid #bee3df !important;
  color: #0b535b !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.publishRoutePreview b,
.publishRoutePreview small {
  display: block !important;
}

.publishRoutePreview b {
  font-size: 12px !important;
  font-weight: 900 !important;
}

.publishRoutePreview small {
  margin-top: 3px !important;
  color: #53797d !important;
  font-size: 11px !important;
}

.publishingAdvanced {
  margin-top: 12px !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, .72) !important;
}

.publishingAdvanced summary {
  cursor: pointer !important;
  padding: 11px 12px !important;
  color: #0d6870 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.publishingAdvancedInner {
  display: grid !important;
  gap: 10px !important;
  padding: 0 12px 12px !important;
}

@media (max-width: 1100px) {
  .publishRouteGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .publishRouteGrid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   SECTION U: CHECKPOINT 22 SIDEBAR & MOBILE AUTH CARD REDESIGN
   ========================================================================== */

/* Clean up nav links layout */
aside#side nav a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}
aside#side nav a span {
  font-size: 14px !important;
  font-weight: 800 !important;
}

/* Luxury Mobile Auth Panel for Guest Users */
.mobileAuthPanel {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 18px !important;
  padding: 18px 16px !important;
  margin: 14px 0 18px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25) !important;
}
.mobileAuthBadge {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  color: #e7b84f !important;
  text-transform: uppercase !important;
}
.mobileAuthTitle {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}
.mobileAuthDesc {
  font-size: 13px !important;
  color: #cce9e6 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}
.mobileAuthButtons {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 8px !important;
}
.mobileLoginBtn {
  background: linear-gradient(135deg, #e7b84f, #d19f36) !important;
  color: #0c3338 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 11px 14px !important;
  border-radius: 12px !important;
  border: none !important;
  cursor: pointer !important;
  text-align: center !important;
  box-shadow: 0 4px 12px rgba(231, 184, 79, 0.3) !important;
  transition: all 0.25s ease !important;
}
.mobileRegisterBtn {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 11px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all 0.25s ease !important;
}
.mobileLoginBtn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(231, 184, 79, 0.45) !important;
}
.mobileRegisterBtn:hover {
  background: rgba(255, 255, 255, 0.22) !important;
}

/* ==========================================================================
   SECTION V: CHECKPOINT 23 SEARCH BAR & COMPACT HUB CARDS
   ========================================================================== */

/* REQUEST 1: Chỉ để lại phần ô tìm kiếm, xóa nút vuông xanh thừa cạnh ô tìm kiếm trên mobile */
@media (max-width: 1100px) {
  header > .search,
  body:not(.adminPage) header .search {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 0 !important;
  }
  header > #registerButton,
  body:not(.adminPage) header > #registerButton,
  header > .registerAccountBtn {
    display: none !important;
  }
}

/* REQUEST 2: Thu gọn toàn bộ 3 khối (Tiến độ, Lịch học, Hỗ trợ học viên) cực kỳ gọn gàng sang trọng */
.learnerHub {
  padding: 16px 20px !important;
  margin-bottom: 20px !important;
}
.hubGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 12px !important;
}
.hubCard {
  padding: 14px 16px !important;
  border-radius: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-height: auto !important;
}
.hubCard .hubIcon {
  width: 36px !important;
  height: 36px !important;
  font-size: 16px !important;
  margin-bottom: 4px !important;
  border-radius: 10px !important;
}
.hubCard > span {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  margin: 0 !important;
}
.hubCard strong {
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin: 2px 0 !important;
}
.hubCard p {
  font-size: 12px !important;
  line-height: 1.35 !important;
  margin: 0 0 6px 0 !important;
}
.hubCard a,
.hubCard button,
#scheduleButton,
#supportButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  height: 32px !important;
  border-radius: 8px !important;
  margin-top: auto !important;
  width: fit-content !important;
}
.scheduleHub .miniDays {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 4px 0 6px 0 !important;
}
.scheduleHub .miniDays i {
  width: 22px !important;
  height: 22px !important;
  font-size: 10px !important;
  border-radius: 6px !important;
  display: grid !important;
  place-items: center !important;
}
.supportHub small {
  font-size: 10px !important;
  margin-top: 4px !important;
}

/* Super compact on small mobile screens */
@media (max-width: 768px) {
  body:not(.adminPage) .learnerHub {
    padding: 12px 14px !important;
    margin: 12px 12px 18px !important;
    border-radius: 16px !important;
  }
  body:not(.adminPage) .hubGrid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  body:not(.adminPage) .hubCard {
    padding: 12px 14px !important;
    border-radius: 12px !important;
    gap: 3px !important;
  }
  body:not(.adminPage) .hubCard strong {
    font-size: 15px !important;
  }
  body:not(.adminPage) .hubCard p {
    font-size: 11px !important;
  }
}

/* ==========================================================================
   SECTION W: CHECKPOINT 24 MOBILE HEADER BRAND LOGO & REMOVE SEARCH
   ========================================================================== */

/* Desktop: hide headerBrand because sidebar already has brand logo */
@media (min-width: 1101px) {
  .headerBrand {
    display: none !important;
  }
}

/* Mobile & Tablet (<= 1100px): Show headerBrand at Top Left, Hide Search Bar completely */
@media (max-width: 1100px) {
  /* Hide search bar completely as requested (bỏ luôn phần khoanh đỏ trên mobile) */
  header > .search,
  body:not(.adminPage) header .search,
  body:not(.adminPage) header > .search {
    display: none !important;
  }

  /* Style mobile header grid */
  body:not(.adminPage) header {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 12px 10px !important;
    padding: calc(10px + env(safe-area-inset-top)) 14px 12px !important;
  }

  /* Row 1, Col 1: Menu Button */
  body:not(.adminPage) header > #menu {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  /* Row 1, Col 2: Brand Logo (chèn lên đầu trang giao diện mobile) */
  .headerBrand {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
  }
  .headerBrand i {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg, #106f7a, #083c42) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 12px rgba(16, 95, 104, 0.3) !important;
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    font-style: normal !important;
    display: grid !important;
    place-items: center !important;
  }
  .headerBrand b {
    color: #0d3b40 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.3px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .headerBrand small {
    color: #106f7a !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    margin-top: 2px !important;
  }

  /* Row 1, Col 3: Login button or Account Area on top right */
  body:not(.adminPage) header > #accountButton,
  body:not(.adminPage) header > .accountArea {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: inline-flex !important;
    margin-left: auto !important;
  }
  body:not(.adminPage) header > #accountButton {
    background: linear-gradient(135deg, #106f7a, #083c42) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 7px 12px !important;
    border-radius: 10px !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    text-indent: 0 !important;
  }

  /* Row 2, Col 1-3: Course Tabs spanning full width */
  body:not(.adminPage) header .tabs {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
}

/* Compact adjustments for small mobile screens <= 480px */
@media (max-width: 480px) {
  .headerBrand b {
    font-size: 14px !important;
  }
  .headerBrand small {
    font-size: 8px !important;
  }
}

/* ==========================================================================
   SECTION V: RESTORE ORIGINAL CLASSIC BRAND LOGO & SIDEBAR
   ========================================================================== */
aside#side .brand, a.brand {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  text-decoration: none !important;
  color: #ffffff !important;
  margin-bottom: 22px !important;
}
aside#side .brand i, a.brand i {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #187f8a, #0c4d54) !important;
  border: 2px solid #63c1bb !important;
  display: grid !important;
  place-items: center !important;
  font-style: normal !important;
  font-weight: 900 !important;
  font-size: 22px !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
  flex-shrink: 0 !important;
}
aside#side .brand b, a.brand b {
  display: flex !important;
  flex-direction: column !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: 0.5px !important;
  line-height: 1.15 !important;
}
aside#side .brand small, a.brand small {
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #a3ded9 !important;
  letter-spacing: 1px !important;
  margin-top: 3px !important;
  display: block !important;
}
aside#side nav a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  color: #eaf7f5 !important;
}
aside#side nav a.active {
  color: #ffffff !important;
}

/* Ensure headerBrand is hidden if any remains */
.headerBrand { display: none !important; }


/* ==========================================================================
   CHECKPOINT 23: 3-TIER UPGRADE MODAL STYLING
   ========================================================================== */
.upgrade999Modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  place-items: center;
  padding: 20px;
}
.upgrade999Modal.open {
  display: grid;
}
.upgradeShade {
  position: absolute;
  inset: 0;
  background: rgba(6, 39, 42, 0.88);
  backdrop-filter: blur(12px);
}
.upgradeCard {
  position: relative;
  width: min(500px, 94vw);
  background: linear-gradient(145deg, #0d5962, #083c42);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  padding: 32px 28px;
  color: #ffffff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  text-align: center;
}
.upgradeClose {
  position: absolute;
  right: 16px;
  top: 16px;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
}
.upgradeIcon {
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #e7b84f, #d19f36);
  color: #0c3338;
  display: grid;
  place-items: center;
  font-size: 30px;
  font-weight: 900;
  box-shadow: 0 8px 24px rgba(231, 184, 79, 0.35);
}
.upgradeBadge {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #e7b84f;
  margin-bottom: 6px;
}
.upgradeCard h2 {
  font-size: 24px;
  font-weight: 900;
  margin: 6px 0 12px;
  color: #ffffff;
}
.upgradeCard p {
  font-size: 13px;
  line-height: 1.55;
  color: #cce9e6;
  margin: 0 0 20px;
}
.upgradeBenefits {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 16px;
  text-align: left;
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 24px;
  color: #ffffff;
}
.upgradeCta {
  width: 100%;
  padding: 14px 20px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #e7b84f, #d19f36) !important;
  color: #0c3338 !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 8px 24px rgba(231, 184, 79, 0.4) !important;
}