@font-face{font-family:'Barlow';src:url('../fonts/Barlow-Regular.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:'Barlow';src:url('../fonts/Barlow-Bold.ttf') format('truetype');font-weight:400 900;font-display:swap}@font-face{font-family:'Almarai';src:url('../fonts/Almarai-Regular.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:'Almarai';src:url('../fonts/Almarai-Bold.ttf') format('truetype');font-weight:400 900;font-display:swap}
:root{--g:#006B35;--g2:#007E3F;--sand:#CCB58B;--ink:#17201b;--muted:#68766e;--bg:#eceef1;--card:#fff;--line:#dde7e0;--soft:#eef7f2;--shadow:0 15px 45px rgba(12,61,35,.08)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'Barlow','Almarai',Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65}button,input,textarea{font:inherit}button{cursor:pointer}.ar{display:none!important}body[data-lang=ar]{direction:rtl}body[data-lang=ar] .en{display:none!important}body[data-lang=ar] .ar{display:revert!important}.top{height:72px;position:fixed;inset:0 0 auto 0;z-index:60;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:0 22px}.brand{display:flex;align-items:center;gap:10px;min-width:265px}.brand img{height:25px;max-width:175px}.brand small{font-size:11px;color:var(--muted)}.course-progress{flex:1;max-width:650px}.p-row{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:5px}.track{height:7px;background:#e6ede8;border-radius:99px;overflow:hidden}.track>span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--g),#17aa64);transition:.3s}.langs{margin-inline-start:auto;display:flex;gap:5px}.langs button{border:1px solid var(--line);background:#fff;padding:7px 10px;border-radius:9px}.langs button.on{background:var(--g);color:#fff;border-color:var(--g)}.shell{padding-top:72px;display:grid;grid-template-columns:315px 1fr;min-height:100vh}.side{position:sticky;top:72px;height:calc(100vh - 72px);background:#fff;border-inline-end:1px solid var(--line);overflow:auto;padding:17px 12px}.course-home-btn{width:100%;border:0;background:linear-gradient(135deg,#eaf7ef,#fff);border:1px solid #d8eade;color:var(--g);padding:13px;border-radius:13px;text-align:start;font-weight:400;margin-bottom:10px}.units-nav{display:grid;gap:2px}.unit-nav{display:grid;grid-template-columns:31px 1fr auto;align-items:center;gap:9px;border:0;background:transparent;color:var(--muted);padding:9px;border-radius:10px;text-align:start}.unit-nav:hover,.unit-nav.active{background:var(--soft);color:var(--g)}.unit-num{width:29px;height:29px;border:1px solid var(--line);border-radius:9px;display:grid;place-items:center;background:#fff;font-size:11px;font-weight:400}.unit-nav.done .unit-num{background:var(--g);color:#fff;border-color:var(--g)}.unit-nav small{font-size:10px}.done-mark{font-size:12px;color:var(--g)}.main{padding:34px 36px 95px;min-width:0}.screen{display:none;max-width:1160px;margin:0 auto}.screen.active{display:block}.home-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:25px;align-items:center;padding:28px 0 35px}.hero-copy .eyebrow,.eyebrow{color:var(--g);font-size:11px;font-weight:400;letter-spacing:.14em}.hero-copy h1{font-size:clamp(43px,6vw,76px);line-height:1.02;letter-spacing:-.045em;margin:12px 0}.hero-copy h1 em{color:var(--g);font-style:normal}.hero-copy p{font-size:18px;color:var(--muted);max-width:720px}.hero-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow)}.hero-card img{max-width:100%;max-height:64px}.hero-card .meta{margin-top:18px;display:grid;gap:9px}.meta-row{padding:10px;border-radius:10px;background:#f7faf8;display:flex;justify-content:space-between;gap:10px;font-size:13px}.unit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.unit-card{border:1px solid var(--line);background:#fff;border-radius:16px;padding:18px;text-align:start;min-height:160px;box-shadow:0 8px 28px rgba(12,61,35,.04)}.unit-card:hover{border-color:#96c6a8;transform:translateY(-2px)}.unit-card .u-no{font-size:11px;color:var(--sand);font-weight:400}.unit-card h3{margin:7px 0;font-size:19px}.unit-card p{margin:0;color:var(--muted);font-size:12px}.mini-track{height:5px;background:#e8eee9;border-radius:99px;overflow:hidden;margin-top:18px}.mini-track span{display:block;height:100%;background:var(--g)}.unit-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}.unit-header h1{font-size:43px;line-height:1.08;margin:5px 0 0}.unit-header p{margin:5px 0 0;color:var(--muted)}.back-home{border:1px solid var(--line);background:#fff;padding:9px 12px;border-radius:10px}.stage-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:22px}.stage-tab{border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px;text-align:start;color:var(--muted)}.stage-tab.active{border-color:#8fc5a2;background:#f0f8f3;color:var(--g)}.stage-tab.done{box-shadow:inset 0 -3px 0 var(--g)}.stage-tab b{display:block;font-size:13px}.stage-tab small{font-size:10px}.stage-view{display:none}.stage-view.active{display:block}.stage-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:18px}.stage-head h2{font-size:34px;margin:4px 0}.stage-head p{margin:0;color:var(--muted);max-width:650px}.card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.learn-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px}.learn-card{padding:30px;min-height:410px;display:flex;flex-direction:column;justify-content:center}.learn-card .index{font-size:12px;color:var(--sand);font-weight:400}.learn-card h3{font-size:29px;margin:8px 0 12px}.learn-card .body{font-size:16px;color:#435047;max-height:270px;overflow:auto;padding-inline-end:8px}.learn-side{padding:18px}.concept-list{display:grid;gap:8px}.concept-chip{border:0;background:#f5f9f6;padding:10px;border-radius:10px;text-align:start;color:#425048}.concept-chip.on{background:#e8f6ed;color:var(--g)}.pager{display:flex;gap:7px;margin-top:20px}.pager button{width:9px;height:9px;border:0;border-radius:50%;background:#d4dfd8;padding:0}.pager button.on{background:var(--g);transform:scale(1.25)}.explore-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}.explore-card{padding:18px;text-align:start;border:1px solid var(--line);background:#fff;border-radius:15px;min-height:150px}.explore-card:hover,.explore-card.open{border-color:#8fc4a2;background:#f5fbf7}.explore-card b{display:block;color:var(--g);margin-bottom:7px}.explore-card p{margin:0;color:var(--muted);font-size:13px}.source-visual{margin-top:18px;padding:20px;text-align:center}.source-visual img{max-width:100%;max-height:330px}.source-visual figcaption{font-size:11px;color:var(--muted);margin-top:7px}.practice-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px}.lab{padding:28px}.lab-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}.phase{display:inline-flex;background:#edf7f1;color:var(--g);padding:5px 9px;border-radius:99px;font-size:10px;font-weight:400}.stepcount{font-size:11px;color:var(--muted)}.stepcount strong{font-size:25px;color:var(--g);display:block}.task h3{font-size:30px;line-height:1.2;margin:18px 0 10px}.task p{font-size:16px;color:#48564e}.task-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.btn{border:1px solid var(--line);background:#fff;color:var(--ink);padding:10px 14px;border-radius:10px;font-weight:400}.btn.primary{background:var(--g);border-color:var(--g);color:#fff}.step-list{padding:15px;max-height:590px;overflow:auto}.step-row{display:flex;gap:9px;padding:9px;border-radius:9px;font-size:12px;color:var(--muted);cursor:pointer}.step-row.current{background:#fff8e7;color:#705b20}.step-row.done{color:var(--g)}.dot{width:23px;height:23px;border:1px solid var(--line);border-radius:7px;display:grid;place-items:center;flex:none;font-weight:400}.step-row.done .dot{background:var(--g);border-color:var(--g);color:#fff}.notes{margin-top:20px}.notes textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px;resize:vertical;background:#fbfdfc}.quiz-card{padding:28px;max-width:850px}.qmeta{font-size:11px;color:var(--g);font-weight:400}.quiz-card h3{font-size:26px;margin:8px 0 17px}.options{display:grid;gap:9px}.option{border:1px solid var(--line);background:#fff;border-radius:11px;padding:12px;text-align:start;display:flex;gap:10px}.option.selected{border-color:var(--g);background:#f0f8f3}.option.correct{border-color:#2d9f5b;background:#eef9f2}.option.wrong{border-color:#d96a6a;background:#fff3f3}.feedback{display:none;margin-top:14px;background:#f5f8f6;border-radius:10px;padding:12px;color:#46534b}.feedback.show{display:block}.quiz-actions{display:flex;justify-content:space-between;gap:8px;margin-top:18px}.complete-grid{display:grid;grid-template-columns:1fr 370px;gap:18px}.completion-card{padding:30px}.big-check{width:65px;height:65px;border-radius:19px;background:#e8f6ed;color:var(--g);font-size:32px;display:grid;place-items:center}.completion-card h2{font-size:38px;margin:13px 0 8px}.completion-card p{color:var(--muted)}.summary{padding:19px}.metric{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}.metric:last-child{border:0}.metric strong{color:var(--g)}.banner{margin-top:16px;padding:13px;border-radius:11px;background:#fff6dd;color:#715d24}.banner.ok{background:#e9f7ee;color:#1e6b3c}.bottom{position:fixed;left:0;right:0;bottom:0;min-height:64px;background:rgba(255,255,255,.97);border-top:1px solid var(--line);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 18px;z-index:40}
.bottom-copy,.bottom-meta{font-size:12px;color:var(--muted);white-space:nowrap}
.bottom-actions{display:flex;align-items:center;justify-content:center;gap:9px;flex:1}
body[data-lang=ar] .bottom{flex-direction:row-reverse}
body[data-lang=ar] .bottom-copy,body[data-lang=ar] .bottom-meta{text-align:center}
@media(max-width:980px){.shell{grid-template-columns:1fr}.side{position:relative;top:auto;height:auto;display:flex;gap:6px;overflow:auto;border-inline-end:0;border-bottom:1px solid var(--line)}.course-home-btn{min-width:120px;margin:0}.units-nav{display:flex}.unit-nav{min-width:160px}.main{padding:24px 15px 104px}.bottom{left:0;flex-wrap:wrap;justify-content:center;padding:10px 12px}.bottom-copy,.bottom-meta{width:100%;text-align:center;white-space:normal}.bottom-actions{width:100%}.unit-grid{grid-template-columns:repeat(2,1fr)}.learn-layout,.practice-grid,.complete-grid{grid-template-columns:1fr}.course-progress{display:none}.brand{min-width:auto}.brand small{display:none}}@media(max-width:650px){.top{padding:0 11px}.brand img{max-width:130px}.unit-grid,.explore-grid{grid-template-columns:1fr}.stage-tabs{grid-template-columns:repeat(5,145px);overflow:auto}.unit-header{align-items:flex-start;flex-direction:column}.unit-header h1{font-size:34px}.main{padding-inline:11px;padding-bottom:118px}.learn-card,.lab,.quiz-card{padding:20px}}
body[data-lang=ar],
body[data-lang=ar] button,
body[data-lang=ar] input,
body[data-lang=ar] textarea,
body[data-lang=ar] select {
  font-family: 'Almarai', Tahoma, Arial, sans-serif;
}


/* v3.3 — Justified instructional content */
.hero-copy p,
.unit-header p,
.stage-head p,
.learn-card .body,
.explore-card p,
.task p,
.quiz-card h3,
.feedback,
.completion-card p,
.objective-list div,
.meta-row,
.source-visual figcaption {
  text-align: justify;
  text-justify: inter-word;
}

/* Keep short UI labels, navigation, headings, and buttons naturally aligned. */
button,
.stage-tab,
.unit-nav,
.unit-card,
.concept-chip,
.step-row,
.metric,
.bottom,
.top,
.eyebrow,
h1, h2, h3, h4 {
  text-justify: auto;
}


[hidden]{display:none!important}

/* Language-specific typography, including the content editor. */
body[data-lang=en], body[data-lang=en] button, body[data-lang=en] input,
body[data-lang=en] textarea, body[data-lang=en] select,
.en, [lang=en], #adminPanel input[name^=en], #adminPanel textarea[name^=en],
#adminPanel input[name$=_en], #adminPanel textarea[name$=_en],
#adminPanel input[name=username], #adminPanel input[name=password] {
  font-family: 'Barlow', 'Almarai', Arial, sans-serif;
}
body[data-lang=ar], body[data-lang=ar] button, body[data-lang=ar] input,
body[data-lang=ar] textarea, body[data-lang=ar] select,
.ar, [lang=ar], #adminPanel input[name^=ar], #adminPanel textarea[name^=ar],
#adminPanel input[name$=_ar], #adminPanel textarea[name$=_ar] {
  font-family: 'Almarai', 'Barlow', Tahoma, Arial, sans-serif;
}

/* Bold is reserved for headings; all other interface text uses regular weight. */
body, body * { font-weight: 400 !important; }
h1, h2, h3, h4, h5, h6,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
.eyebrow, .hero-copy .eyebrow,
.learn-side > .eyebrow, .explore-card > b {
  font-weight:400 !important;
}

/* Each language owns its direction and reading alignment. */
html[lang=en], body[data-lang=en] { direction:ltr; }
html[lang=ar], body[data-lang=ar] { direction:rtl; }
.en { direction:ltr; unicode-bidi:isolate; }
.ar { direction:rtl; unicode-bidi:isolate; }
.main, .side, #adminPanel, .learn-card .body, .task p, .feedback,
.hero-copy p, .unit-header p, .stage-head p, .explore-card p,
.quiz-card h3, .completion-card p, .objective-list div, .meta-row,
.source-visual figcaption, input, textarea, select { text-align:start; }
body[data-lang=ar] .bottom { flex-direction:row; }
.source-visual { overflow-x:auto; }
.risk-matrix { width:100%; min-width:470px; border-spacing:7px; table-layout:fixed; }
.risk-matrix caption { text-align:start; padding-bottom:12px; }
.risk-matrix th, .risk-matrix td { text-align:center; border-radius:6px; padding:10px 4px; font-size:13px; }
.risk-matrix th { background:#eef0ef; color:#34443a; }
.risk-matrix td { color:#17201b; }
.matrix-axis { margin:10px 0; text-align:start; font-size:13px; color:var(--muted); }

.learn-card .body,.task p,.explore-card p,.feedback {white-space:pre-line;overflow-wrap:anywhere;}
.learn-card .body {max-height:none;overflow:visible;}
.practice-proof {margin-top:20px;padding:16px;background:var(--soft);border-radius:12px;}
.practice-proof textarea {display:block;width:100%;margin-top:8px;padding:12px;border:1px solid var(--line);border-radius:9px;background:white;resize:vertical;font:inherit;}
.practice-proof small,.quiz-policy {font-size:12px;color:var(--muted);}
#practiceError {color:#a52626;font-size:13px;}
button:disabled {opacity:.5;cursor:not-allowed;}
.summary>.btn {margin-top:12px;width:100%;}
.unit-grid {margin-top:20px;}

/* SX Academy (WordPress) additions. */
.top-actions{display:flex;align-items:center;gap:6px}
.top-actions .btn{padding:7px 11px;font-size:13px;text-decoration:none;display:inline-flex;align-items:center}
a.btn{text-decoration:none;display:inline-block}
.done-card{margin-top:16px;padding:24px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.done-card .big-check{font-size:28px}
.done-card h2{margin:0 0 4px;font-size:24px}
.done-card p{margin:0;color:var(--muted)}
.explore-item{display:flex;flex-direction:column;min-width:0}
.explore-item .explore-card{width:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-start}
.back-home{flex:none;white-space:nowrap}
.media-list{display:grid;gap:14px;margin:16px 0 0}
.media-item{margin:0;min-width:0}
.media-item img{display:block;max-width:100%;max-height:440px;height:auto;border-radius:12px;border:1px solid var(--line)}
.media-item figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.yt-play,.yt-frame{display:block;width:100%;max-width:760px;aspect-ratio:16/9;border:0;border-radius:12px;background:#000}
.yt-play{position:relative;padding:0;overflow:hidden;cursor:pointer}
.yt-play img{width:100%;height:100%;max-height:none;object-fit:cover;border:0;border-radius:0}
.yt-icon{position:absolute;inset:0;margin:auto;width:68px;height:48px;display:grid;place-items:center;border-radius:12px;background:#c4302b;color:#fff;font-size:20px}
.yt-play:hover .yt-icon,.yt-play:focus-visible .yt-icon{background:#e62117}
.save-state{position:fixed;inset-inline-end:18px;bottom:78px;z-index:70;background:var(--ink);color:#fff;padding:8px 13px;border-radius:9px;font-size:12px;opacity:0;transform:translateY(6px);transition:.2s;pointer-events:none}
.save-state.show{opacity:1;transform:none}
.save-state.err{background:#a52626}
.empty-course{padding:30px;text-align:center;color:var(--muted)}
@media(max-width:980px){.done-card{grid-template-columns:1fr}}
@media(max-width:650px){.top-actions .btn span.lbl{display:none}.top{gap:6px}.langs button{padding:6px 7px}.home-hero{grid-template-columns:1fr;padding-top:10px}.hero-copy h1{font-size:44px}.done-card{padding:18px}}

/* Headings use the font packaged in academy-headings.css. */
h1,h2,h3,h4,h5,h6,h1 *,h2 *,h3 *,h4 *,h5 *,h6 *,.explore-card>b{font-family:"Thmanyah Serif",'Almarai','Barlow',Tahoma,Arial,sans-serif!important}
.eyebrow *{font-weight:400!important}
.hero-copy h1{letter-spacing:-.02em}
/* Spacing would break the joins between Arabic letters. */
body[data-lang=ar] h1,body[data-lang=ar] .hero-copy h1,body[data-lang=ar] .eyebrow,body[data-lang=ar] .hero-copy .eyebrow{letter-spacing:0}

/* Limits only, so a logo of any shape keeps its proportions. */
.brand img{display:block;flex:0 1 auto;min-width:0;width:auto;height:auto;max-width:212px;max-height:25px;object-fit:contain}

/* Tablets and phones. The 1200px width is also used by compact() in academy.js. */
.page-foot{display:none}
@media(max-width:1200px){
.shell{grid-template-columns:260px minmax(0,1fr)}
.main{padding-inline:24px}
.unit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.learn-layout,.practice-grid,.complete-grid{grid-template-columns:minmax(0,1fr)}
.learn-card{min-height:0}
.concept-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.pager{gap:0;flex-wrap:wrap;margin-top:8px}
.pager button,.pager button.on{position:relative;width:44px;height:44px;background:none;transform:none}
.pager button::before{content:'';position:absolute;inset:0;margin:auto;width:11px;height:11px;border-radius:50%;background:#d4dfd8}
.pager button.on::before{background:var(--g);transform:scale(1.25)}
.langs button{min-width:44px;min-height:44px}
.btn,.back-home,.concept-chip,.step-row{min-height:44px}
.notes summary{padding:10px 0;cursor:pointer}
}
@media(max-width:980px){
.shell{grid-template-columns:minmax(0,1fr)}
.main{padding:20px 15px 88px}
.course-home-btn{flex:none;width:auto;white-space:nowrap}
.unit-nav{min-width:210px}
.top{padding-bottom:14px}
.course-progress{display:flex;align-items:center;gap:8px;position:absolute;inset:auto 12px 5px 12px;max-width:none}
.course-progress .p-row{order:2;margin:0}
.course-progress .p-row>span{display:none}
.course-progress .track{flex:1;height:5px}
.bottom-copy,.bottom-meta{display:none}
.bottom-actions .btn{flex:1 1 0;min-width:0;max-width:280px;padding:8px;line-height:1.25}
.page-foot{display:block;margin-top:28px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);text-align:center}
}
@media(max-width:650px){
.brand{min-width:0}
.brand img{max-width:min(170px,100%)}
.main{padding:14px 11px 88px}
.unit-grid,.concept-list{grid-template-columns:minmax(0,1fr)}
.unit-header{gap:8px;margin-bottom:12px}
.unit-header h1{font-size:28px}
.unit-header p{display:none}
.stage-tabs{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;overflow:visible;margin-bottom:14px}
.stage-tab{min-height:44px;padding:8px 2px;text-align:center}
.stage-tab b{font-size:12px}
.stage-tab small{display:none}
.stage-head h2{font-size:26px}
}
@media(max-width:980px) and (max-height:500px){
.top{height:58px;padding-bottom:12px}
.shell{padding-top:58px}
.bottom{min-height:0;padding:5px 12px}
.unit-header p{display:none}
.unit-header{margin-bottom:10px}
.stage-tabs{margin-bottom:10px}
.stage-tab{min-height:44px;padding:8px}
.stage-tab small{display:none}
.stage-head{margin-bottom:10px}
.stage-head h2{font-size:22px}
.stage-head p{font-size:14px;line-height:1.4}
.save-state{bottom:62px}
}

/* ============================================================
   monday-style refresh (v2.3.0) — dark hero banner + course cards
   ============================================================ */
:root{--g:#048238;--g2:#0a9a4e;--line:#e4ebe6;--bg:#eceef1;--shadow:0 18px 44px -24px rgba(12,61,35,.14)}

/* Home hero → dark rounded banner with a colorful accent word */
#homeScreen .home-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#0a2a1b 0%,#0f4d2e 55%,#09261a 100%);border-radius:26px;padding:48px 50px;margin:6px 0 34px;box-shadow:0 34px 66px -30px rgba(4,70,40,.55)}
#homeScreen .home-hero::before{content:"";position:absolute;width:440px;height:440px;right:-130px;top:-170px;background:radial-gradient(circle,rgba(16,200,110,.33),transparent 70%);pointer-events:none}
#homeScreen .home-hero::after{content:"";position:absolute;width:360px;height:360px;left:-130px;bottom:-170px;background:radial-gradient(circle,rgba(10,154,78,.26),transparent 70%);pointer-events:none}
#homeScreen .hero-copy{position:relative;z-index:2}
#homeScreen .hero-copy .eyebrow{color:#86efac}
#homeScreen .hero-copy h1{color:#fff}
#homeScreen .hero-copy h1 em{background:linear-gradient(90deg,#5ee9a0,#c9f970);-webkit-background-clip:text;background-clip:text;color:transparent}
#homeScreen .hero-copy p{color:rgba(255,255,255,.84)}
#homeScreen .hero-card{position:relative;z-index:2;background:#fff;border:1px solid rgba(255,255,255,.5);box-shadow:0 26px 54px -26px rgba(0,0,0,.45)}
@media(max-width:650px){#homeScreen .home-hero{padding:30px 22px;border-radius:20px;margin-bottom:24px}}

/* Unit cards → monday course cards: dark thumbnail + tag + title + desc */
.unit-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.unit-grid .unit-card{padding:0;overflow:hidden;min-height:0;border-radius:18px;border:1px solid var(--line);background:#fff;box-shadow:0 16px 36px -24px rgba(12,61,35,.18);transition:transform .2s ease,box-shadow .2s ease}
.unit-grid .unit-card:hover{transform:translateY(-5px);box-shadow:0 28px 56px -22px rgba(12,61,35,.28);border-color:#bfe2cc}
.uc-thumb{position:relative;height:150px;overflow:hidden;background:linear-gradient(135deg,#0a2a1b,#0f4d2e 70%,#09261a);display:flex;align-items:center;justify-content:center;padding:24px 20px}
.uc-thumb::before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#19d179,#048238 70%);top:-48px;inset-inline-end:-40px;opacity:.55}
.uc-thumb::after{content:"";position:absolute;width:74px;height:74px;border:2px solid rgba(255,255,255,.22);border-radius:50%;bottom:-18px;inset-inline-start:-6px}
.uc-badge{position:absolute;top:13px;inset-inline-start:13px;z-index:2;background:rgba(255,255,255,.2);color:#fff;font-size:10px;font-weight:400!important;padding:4px 10px;border-radius:999px;letter-spacing:.05em}
.uc-thumb-title{position:relative;z-index:2;color:#fff;font-family:"Thmanyah Serif",'Almarai',serif;font-weight:400!important;font-size:20px;line-height:1.25;text-align:center;max-height:94px;overflow:hidden}
.uc-body{padding:16px 18px 18px;text-align:start}
.uc-tag{display:inline-block;background:#eafaf0;color:var(--g);font-size:11px;font-weight:400!important;padding:4px 11px;border-radius:999px;margin-bottom:9px}
.unit-grid .unit-card h3{margin:0 0 6px;font-size:17px}
.unit-grid .unit-card p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.6}
.unit-grid .unit-card .mini-track{margin-top:14px}

/* Unit view → monday course-view split hero with a dark thumbnail */
.unit-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;margin-bottom:26px}
.unit-hero-main .back-home{display:inline-flex;margin-bottom:14px}
.unit-hero-main h1{font-size:clamp(32px,4.4vw,50px);line-height:1.06;margin:6px 0 12px}
.unit-hero-main p{color:var(--muted);font-size:16px;max-width:560px}
.unit-hero-thumb{position:relative;overflow:hidden;background:linear-gradient(135deg,#0a2a1b,#0f4d2e 70%,#09261a);border-radius:22px;min-height:236px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:30px;box-shadow:0 30px 60px -30px rgba(4,70,40,.5)}
.unit-hero-thumb::before{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#19d179,#048238 70%);top:-60px;inset-inline-end:-50px;opacity:.5}
.unit-hero-thumb::after{content:"";position:absolute;width:110px;height:110px;border:2px solid rgba(255,255,255,.2);border-radius:50%;bottom:-30px;inset-inline-start:-20px}
.uht-label{position:relative;z-index:2;color:#86efac;font-size:12px;font-weight:400!important;letter-spacing:.06em;text-transform:uppercase}
.uht-title{position:relative;z-index:2;color:#fff;font-family:"Thmanyah Serif",'Almarai',serif;font-weight:400!important;font-size:26px;line-height:1.2;text-align:center;max-width:92%}
@media(max-width:980px){.unit-hero{grid-template-columns:1fr}.unit-hero-thumb{min-height:160px;order:-1}}

/* Rounded polish, green alignment */
.stage-tab{border-radius:14px}
.stage-tab.active{border-color:var(--g);background:#eafaf0;color:var(--g)}
.course-home-btn{border-radius:14px}
.unit-nav{border-radius:12px}
.btn{border-radius:11px}.btn.primary{background:var(--g);border-color:var(--g)}
.hero-card{border-radius:22px}
.card,.learn-card,.lab,.quiz-card,.completion-card{border-radius:20px}
/* ===== LMS structure (v2.4.0) — sidebar categories, catalog, course view ===== */
.side{padding:20px 14px}
.side-title{font-size:11px;font-weight:400!important;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 10px 10px;font-family:"Thmanyah Serif",'Almarai',serif}
.cat-nav{display:grid;gap:2px}
.cat-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;border:0;background:transparent;color:#3f4a44;padding:11px 12px;border-radius:11px;text-align:start;font-size:14px;transition:background .15s}
.cat-item:hover{background:var(--soft)}
.cat-item.active{background:#eafaf0;color:var(--g);font-weight:400!important}
.cat-item small{background:#eef2ef;color:var(--muted);font-size:11px;padding:2px 8px;border-radius:999px;flex:0 0 auto;font-weight:400!important}
.cat-item.active small{background:#d6f0e0;color:var(--g)}
.catalog-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.filter-pill{border:1px solid var(--line);background:#fff;color:#4a564e;padding:8px 16px;border-radius:999px;font-size:13.5px;transition:.15s}
.filter-pill:hover{border-color:#9fcdb0}
.filter-pill.active{background:var(--g);border-color:var(--g);color:#fff;font-weight:400!important}
.cat-sec{margin-bottom:42px}
.cat-sec-head{margin-bottom:16px}
.cat-sec-head h2{font-size:26px;margin:0}
.cat-sec-head p{margin:4px 0 0;color:var(--muted);font-size:14px}
.uc-done{position:absolute;top:13px;inset-inline-end:13px;z-index:2;width:24px;height:24px;border-radius:50%;background:#19d179;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:400!important}
.unit-card.is-done{border-color:#bfe2cc}
.uc-meta{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:12px;color:var(--muted)}
.uc-pct{font-weight:400!important;color:var(--g)}
.unit-grid .unit-card .mini-track{margin-top:8px}
.unit-crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-bottom:18px}
.crumb-home{border:0;background:transparent;color:var(--g);font-weight:400!important;padding:0;cursor:pointer;font-size:13px}
.crumb-sep{color:#c3cdc7}
.crumb-cur{color:var(--ink)}
.unit-hero{align-items:start}
.unit-hero-aside{display:grid;gap:16px}
.unit-info{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 20px;box-shadow:0 16px 40px -26px rgba(12,61,35,.16)}
.ui-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.ui-row:last-of-type{border-bottom:0}
.ui-row strong{color:var(--ink)}
.ui-bar{height:7px;background:#e9efea;border-radius:999px;overflow:hidden;margin-top:10px}
.ui-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--g),#17aa64)}
.brand small{font-weight:400!important}
@media(max-width:980px){.unit-hero-aside{grid-template-columns:1fr}.cat-sec-head h2{font-size:22px}}
/* Fix: keep card content top-aligned so thumbnails never get cropped by grid stretch. */
.unit-card{display:flex;flex-direction:column}
.uc-body{flex:1 1 auto;display:flex;flex-direction:column}
.uc-meta{margin-top:auto}

/* ===== v2.4.1 — professional unit interior ===== */
/* Unit hero → one cohesive course header (green banner + glass stats) */
.unit-hero{grid-template-columns:1.32fr .68fr;gap:36px;align-items:stretch;position:relative;overflow:hidden;background:linear-gradient(135deg,#0a2a1b 0%,#0f4d2e 58%,#09261a 100%);border-radius:26px;padding:42px 46px;margin-bottom:30px}
.unit-hero::before{content:"";position:absolute;width:420px;height:420px;right:-150px;top:-190px;background:radial-gradient(circle,rgba(16,200,110,.3),transparent 70%);pointer-events:none}
.unit-hero::after{content:"";position:absolute;width:300px;height:300px;left:-120px;bottom:-160px;background:radial-gradient(circle,rgba(10,154,78,.22),transparent 70%);pointer-events:none}
.unit-hero-main{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center}
.unit-hero-main .back-home{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);color:#eafff3;padding:8px 15px;border-radius:999px;font-size:13px;font-weight:400!important;margin-bottom:20px;backdrop-filter:blur(4px);transition:.15s}
.unit-hero-main .back-home:hover{background:rgba(255,255,255,.22)}
.unit-hero-main .eyebrow{color:#86efac;font-size:12px;letter-spacing:.14em}
.unit-hero-main h1{color:#fff;font-size:clamp(30px,3.9vw,46px);line-height:1.08;margin:11px 0 14px}
.unit-hero-main p{color:rgba(255,255,255,.82);font-size:16px;line-height:1.7;max-width:600px;margin:0}
.unit-hero-thumb{display:none}
.unit-hero-aside{position:relative;z-index:2;align-self:center;gap:0}
.unit-info{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:18px;padding:20px 22px;box-shadow:none;backdrop-filter:blur(8px)}
.unit-info .ui-row{border-bottom-color:rgba(255,255,255,.15);color:rgba(255,255,255,.78)}
.unit-info .ui-row strong{color:#fff}
.unit-info .ui-bar{background:rgba(255,255,255,.2)}
.unit-info .ui-bar span{background:linear-gradient(90deg,#5ee9a0,#c9f970)}
@media(max-width:980px){.unit-hero{grid-template-columns:1fr;padding:30px 24px}.unit-hero-aside{align-self:stretch}}

/* Stage tabs → polished, with done check */
.stage-tabs{gap:10px;margin-bottom:26px}
.stage-tab{position:relative;padding:14px 15px;border-radius:14px;transition:.15s}
.stage-tab:hover{border-color:#9fcdb0;transform:translateY(-2px)}
.stage-tab b{font-size:13.5px}
.stage-tab small{font-size:10.5px;opacity:.85}
.stage-tab.done{border-color:#bfe2cc}
.stage-tab.done::after{content:"✓";position:absolute;top:11px;inset-inline-end:13px;color:var(--g);font-size:11px;font-weight:400!important}

/* Stage headings */
.stage-head h2{font-size:30px;line-height:1.15}
.stage-head .eyebrow{letter-spacing:.14em}

/* Learn → readable long-form card + clean unit map */
.learn-layout{grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
.learn-card{min-height:0;justify-content:flex-start;padding:34px 38px}
.learn-card .index{display:inline-block;background:#eafaf0;color:var(--g);font-weight:400!important;font-size:12px;padding:5px 13px;border-radius:999px;letter-spacing:.05em}
.learn-card h3{font-size:28px;line-height:1.22;margin:16px 0 16px}
.learn-card .body{white-space:pre-line;font-size:16px;line-height:1.85;color:#3b4842;max-height:none;overflow:visible}
.learn-card .body strong,.learn-card .body b{color:var(--ink)}
.learn-side{padding:22px 18px}
.learn-side .eyebrow{display:block;margin-bottom:14px}
.concept-chip{position:relative;padding-inline-start:40px;padding-top:12px;padding-bottom:12px;border-radius:12px;font-size:13.5px;line-height:1.45}
.concept-chip::before{content:"";position:absolute;inset-inline-start:14px;top:13px;width:16px;height:16px;border-radius:50%;border:1.6px solid #cfe0d6;box-sizing:border-box}
.concept-chip.on::before{content:"✓";background:var(--g);border-color:var(--g);color:#fff;font-size:10px;line-height:16px;text-align:center}

/* Explore → feature cards with seen badge */
.explore-grid{gap:16px}
.explore-card{position:relative;padding:22px 24px;border-radius:16px;min-height:0;transition:.18s}
.explore-card b{font-size:16px;margin-bottom:9px;padding-inline-end:30px}
.explore-card p{font-size:13.5px;line-height:1.7}
.explore-card:hover{transform:translateY(-3px);border-color:#9fcdb0;background:#fff}
.explore-card.open{background:#f3fbf6;border-color:#bfe2cc}
.explore-card.open::after{content:"✓";position:absolute;top:18px;inset-inline-end:20px;width:22px;height:22px;border-radius:50%;background:var(--g);color:#fff;font-size:11px;display:grid;place-items:center;font-weight:400!important}

/* Practice → cleaner lab */
.practice-grid{gap:18px;align-items:start}
.lab{padding:30px 34px}
.task h3{font-size:25px;line-height:1.25}
.step-row{padding:11px 10px;border-radius:10px}
.step-row.current{background:#eafaf0;color:var(--g)}
.practice-proof{border-radius:13px}

/* Check → polished options */
.quiz-card{padding:32px 36px;max-width:820px}
.quiz-policy{font-size:12px;color:var(--muted);background:#f5f8f6;padding:8px 14px;border-radius:10px;display:inline-block;margin-bottom:14px}
.quiz-card h3{font-size:24px;line-height:1.35}
.option{padding:15px 16px;border-radius:13px;align-items:center;font-size:15px;transition:.14s}
.option>span:first-child{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#eef2ef;color:#4a564e;display:grid;place-items:center;font-weight:400!important;font-size:12.5px}
.option:hover{border-color:#9fcdb0}
.option.selected>span:first-child{background:var(--g);color:#fff}
.option.correct>span:first-child{background:#2d9f5b;color:#fff}
.option.wrong>span:first-child{background:#d96a6a;color:#fff}

/* Complete → spacing */
.completion-card{padding:34px 38px}
.big-check{width:60px;height:60px;border-radius:18px}
.completion-card h2{font-size:30px}
.summary{padding:22px 24px}
.metric{padding:13px 0}

@media(max-width:980px){.learn-layout,.practice-grid{grid-template-columns:1fr}.learn-card,.lab,.quiz-card{padding:24px}}

/* Flat design — no shadows anywhere */
*{box-shadow:none!important}

/* Pure white header, footer and sidebar */
.top{background:#fff!important;backdrop-filter:none!important}
.bottom{background:#fff!important;backdrop-filter:none!important}
.side{background:#fff!important}

/* Centre the MUNTABIQ logo in the home hero card */
.hero-card img{display:block;margin-inline:auto}

/* Header links like the sign-in page: subtle text links + globe */
.top-links{margin-inline-start:auto;display:flex;align-items:center;gap:20px}
.top-link{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;color:#5b6472;font-size:14px;font-weight:400!important;text-decoration:none;cursor:pointer;line-height:1}
.top-link:hover{color:var(--g)}
.top-link svg{flex:0 0 auto}
/* Hide the admin "Edit content" button */
.top-actions{display:none!important}
@media(max-width:650px){.top-links{gap:12px}.top-link{font-size:13px}}

/* ===== v2.5.0 — sidebar app layout (no header / no footer) ===== */
.top{display:none!important}
.bottom{display:none!important}
.m-top,.m-overlay{display:none}
.shell{padding-top:0!important;grid-template-columns:315px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow:hidden;padding:0;background:#fff!important;border-inline-end:1px solid var(--line)}
.side-brand{flex:0 0 auto;padding:22px 20px 16px;border-bottom:1px solid var(--line);text-align:center}
.side-brand img{max-height:34px;max-width:170px;display:block;margin:0 auto}
.side-brand-name{margin-top:10px;font-family:"Thmanyah Serif",'Almarai',serif;font-weight:400!important;font-size:15px;color:var(--ink)}
.side-scroll{flex:1 1 auto;overflow:auto;padding:16px 12px}
.side-scroll .side-title{padding:0 10px 10px}
.side-foot{flex:0 0 auto;border-top:1px solid var(--line);padding:16px 16px 18px;display:grid;gap:14px}
.side-foot .course-progress{display:block;max-width:none;flex:none}
.side-foot .p-row{font-size:11px;color:var(--muted)}
.side-foot .track{height:7px}
.side-links{display:flex;flex-direction:column;gap:11px}
.side-foot .top-link{justify-content:flex-start;margin:0}
.side-copy{font-size:11px;color:var(--muted);line-height:1.55}
.main{padding:36px 42px 56px}
/* Relocated prev/next stage nav at the bottom of a unit */
.stage-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.stage-nav .btn{min-width:160px;justify-content:center;text-align:center}
@media(max-width:980px){
	.m-top{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);padding:0 14px;height:54px}
	.m-menu{font-size:22px;line-height:1;background:none;border:0;color:var(--ink);padding:4px 8px;cursor:pointer}
	.m-brand{font-family:"Thmanyah Serif",'Almarai',serif;font-weight:400!important;font-size:15px}
	.shell{grid-template-columns:1fr}
	.side{position:fixed;top:0;inset-inline-start:0;width:280px;max-width:84vw;height:100vh;z-index:70;transform:translateX(-100%);transition:transform .25s ease;flex-direction:column;gap:0;overflow:hidden}
	body[dir=rtl] .side{transform:translateX(100%)}
	body.side-open .side{transform:none}
	.m-overlay{display:block;position:fixed;inset:0;z-index:65;background:rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:.2s}
	body.side-open .m-overlay{opacity:1;visibility:visible}
	.main{padding:18px 15px 48px}
	.stage-nav .btn{min-width:0;flex:1}
}
@media(max-width:650px){.main{padding:14px 12px 40px}}
/* ===== v2.5.1 — mobile sidebar drawer (iPhone) ===== */
@media(max-width:980px){
	/* Full height above Safari's toolbar (100vh is taller than the visible area on iPhone). */
	.side{top:0!important;bottom:0!important;height:auto!important;left:auto;right:auto;width:300px;max-width:86vw;visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
	@supports(height:100dvh){.side{height:100dvh!important;bottom:auto!important}}
	/* Explicit side per language: never crosses the screen when the language changes. */
	body[dir=ltr] .side{left:0}
	body[dir=rtl] .side{right:0}
	body.side-open .side{visibility:visible;transition:transform .25s ease,visibility 0s}
	.side-scroll{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
	.side-foot{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
	/* The page behind the open menu does not scroll. */
	body.side-open{overflow:hidden}
	/* Menu icon drawn in CSS (the ☰ character looks different on iPhone). */
	.m-menu{position:relative;width:38px;height:38px;padding:0;font-size:0!important;color:transparent!important;-webkit-tap-highlight-color:transparent}
	.m-menu::before{content:"";position:absolute;left:10px;right:10px;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:var(--ink);box-shadow:0 -6px 0 var(--ink),0 6px 0 var(--ink)}
}
@media(max-width:980px){html:has(body.side-open){overflow:hidden}}
/* ---------- 3.0: scenario, step-by-step walkthrough, summary, roles ---------- */
.why-card{background:#f4f9f6;border:1px solid #d7e8dd;border-radius:18px;padding:20px 24px;margin:0 0 18px}
.why-label{font-size:13px;color:var(--g,#048238);margin-bottom:8px}
.why-text{font-size:17px;line-height:1.85;color:#14201a;white-space:pre-line}
.step-card{padding:20px}
.step-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.step-no{font-size:13px;color:#5c6e64;white-space:nowrap}
.step-bar{flex:1;height:6px;border-radius:999px;background:#e8efea;overflow:hidden}
.step-bar span{display:block;height:100%;background:var(--g,#048238);border-radius:999px;transition:width .3s}
.step-shot{display:block;border:1px solid #e4ebe6;border-radius:14px;overflow:hidden;background:#f3f5f4;margin-bottom:16px;cursor:zoom-in}
.step-shot img{display:block;width:100%;height:auto}
.step-card h3{margin:0 0 8px}
.step-card .body{white-space:pre-line;line-height:1.85}
.pager button.seen{background:#9fd3b4}
.pager button.on{background:var(--g,#048238)}
.summary-card{margin-bottom:18px}
.summary-card h3{margin:6px 0 12px}
.summary-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.summary-list label{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid #e4ebe6;border-radius:12px;cursor:pointer;line-height:1.7}
.summary-list input{margin-top:5px;accent-color:var(--g,#048238);width:18px;height:18px;flex:0 0 auto}
.summary-list input:checked+span{color:#5c6e64}
.role-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;margin-top:10px}
.role-label{font-size:13px;color:#5c6e64;margin-inline-end:4px}
.role-pill{font-size:13px}
@media (max-width:650px){.step-card{padding:14px}.why-text{font-size:16px}}

/* ---------- 3.1: LMS outline, step viewer, practice ---------- */
.ol-home{margin-bottom:6px}
.ol-chap{font-size:12px;color:#5c6e64;margin:14px 6px 6px;letter-spacing:0}
.cat-item.ol-unit{display:flex;align-items:flex-start;gap:10px;text-align:start;line-height:1.45;padding:9px 10px}
.ol-num{flex:0 0 26px;height:26px;border-radius:50%;background:#eef3f0;color:#14201a;font-size:12px;display:inline-flex;align-items:center;justify-content:center}
.ol-unit.is-done .ol-num{background:var(--g,#048238);color:#fff}
.ol-unit.active .ol-num{background:#d7ecdf;color:var(--g,#048238)}
.ol-title{flex:1;min-width:0}
.ol-unit small{flex:0 0 auto;font-size:11px;color:#5c6e64;margin-top:4px}
.ol-stages{display:flex;flex-direction:column;gap:2px;margin:2px 0 8px;padding-inline-start:22px;border-inline-start:2px solid #e4ebe6;margin-inline-start:22px}
.cat-item.ol-stage{display:flex;align-items:center;gap:8px;padding:6px 8px;font-size:13px}
.ol-dot{width:20px;height:20px;border-radius:50%;border:1px solid #c9d6cd;font-size:11px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.ol-stage.done .ol-dot{background:var(--g,#048238);border-color:var(--g,#048238);color:#fff}
.ol-stage.active{color:var(--g,#048238)}
.step-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:22px;align-items:start}
.step-shot{position:relative;margin-bottom:0}
.step-zoom{position:absolute;inset-inline-end:10px;bottom:10px;background:rgba(255,255,255,.92);border:1px solid #e4ebe6;border-radius:999px;padding:4px 10px;font-size:12px;color:#14201a}
.step-info{display:flex;flex-direction:column;gap:10px}
.step-badge{width:40px;height:40px;border-radius:12px;background:#e3f3ea;color:var(--g,#048238);display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.step-info .task-actions{margin-top:6px}
.step-strip{display:flex;gap:10px;overflow-x:auto;padding:16px 2px 4px;scrollbar-width:thin}
.step-thumb{flex:0 0 112px;position:relative;border:2px solid transparent;border-radius:10px;padding:0;background:#f3f5f4;cursor:pointer;overflow:hidden}
.step-thumb img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.step-thumb span{position:absolute;inset-inline-start:6px;top:6px;min-width:22px;height:22px;border-radius:999px;background:rgba(255,255,255,.94);font-size:11px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;color:#14201a}
.step-thumb.seen span{background:#d7ecdf;color:var(--g,#048238)}
.step-thumb.on{border-color:var(--g,#048238)}
.task-body{white-space:pre-line;line-height:1.85;margin:8px 0 14px}
.btn.primary.is-done{background:#e3f3ea;color:var(--g,#048238);border-color:#e3f3ea}
@media (max-width:1200px){.step-layout{grid-template-columns:1fr}}

/* 3.1: compact unit header (LMS) */
#unitScreen .unit-hero{min-height:0!important;padding:22px 26px!important;border-radius:18px!important;margin-bottom:16px!important;grid-template-columns:1fr!important}
#unitScreen .unit-hero::before,#unitScreen .unit-hero::after{display:none!important}
#unitScreen .unit-hero h1#unitTitle{font-size:clamp(22px,2.4vw,30px)!important;line-height:1.35!important;margin:4px 0 6px!important}
#unitScreen .unit-hero-main{gap:6px!important}
#unitScreen .unit-hero .unit-info{display:none!important}
#unitScreen .unit-hero p{font-size:14px!important;margin:0!important;opacity:.9}
#unitScreen .stage-tabs{margin-bottom:18px}

/* 3.1.1: no bold anywhere; headings in the site's Thmanyah Serif at 400; small labels in the body font. */
h1,h2,h3,h4,h5,h6,b,strong,th{font-weight:400!important}
.eyebrow,.side-title,.why-label,.ol-chap{font-family:Barlow,Almarai,Tahoma,Arial,sans-serif!important;font-weight:400!important;letter-spacing:0!important;text-transform:none!important;font-size:13px!important;color:var(--g,#048238)}
.side-title,.ol-chap{color:#5c6e64}
.summary-card{padding:22px 24px!important}
.summary-card h3{margin:6px 0 14px!important;font-size:22px}
.cat-item.ol-stage{justify-content:flex-start!important;text-align:start!important}
.cat-item.ol-stage span:last-child{flex:1}/* Site rule: no shadows. */
:root{--shadow:none}
body *{box-shadow:none!important;text-shadow:none!important}
.completion-card .big-check{font-size:20px}
.completion-card h3{margin:10px 0 6px;font-size:22px}

/* ---------- 3.3: video-style player (In MUNTABIQ) ---------- */
.vplayer{outline:none;display:flex;flex-direction:column;gap:14px}
.vplayer [hidden]{display:none!important}
.vp-frame{border:1px solid #dfe7e2;border-radius:16px;overflow:hidden;background:#fff}
.tour-chrome{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#f3f5f4;border-bottom:1px solid #e4ebe6}
.tour-chrome i{width:9px;height:9px;border-radius:50%;background:#d5ddd8}
.tour-url{margin-inline-start:12px;font-size:11px;color:#68766e;background:#fff;border:1px solid #e4ebe6;border-radius:999px;padding:2px 12px}
.vp-screen{position:relative;aspect-ratio:16/9;overflow:hidden;background:#f6f8f7;cursor:pointer;user-select:none}
.vp-cam{position:absolute;left:0;top:0;width:100%;height:100%}
.vp-cam img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;image-rendering:auto}
.vp-cursor{position:absolute;z-index:5;margin:-3px 0 0 -5px;pointer-events:none;transition:transform .12s ease;transform-origin:5px 3px}
.vp-cursor.press{transform:scale(.82)}
.vp-ripple{position:absolute;z-index:4;width:46px;height:46px;border-radius:50%;border:3px solid var(--g,#048238);background:rgba(4,130,56,.18);pointer-events:none;display:none}
.tour-hot{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border:0;padding:0;background:transparent;cursor:pointer;z-index:6;animation:tourIn .35s ease both}
.tour-hot span{position:absolute;inset:9px;border-radius:50%;background:var(--g,#048238);border:2px solid #fff}
.tour-hot::before,.tour-hot::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--g,#048238);animation:tourPulse 1.8s ease-out infinite}
.tour-hot::after{animation-delay:.9s}
@keyframes tourPulse{0%{transform:scale(.5);opacity:.9}100%{transform:scale(2.1);opacity:0}}
@keyframes tourIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.tour-label{position:absolute;z-index:4;max-width:260px;background:var(--g,#048238);color:#fff;font-size:14px;line-height:1.5;padding:8px 14px;border-radius:12px;pointer-events:none;transform:translate(-50%,calc(-100% - 26px));animation:tourLabel .4s ease both;white-space:normal}
.tour-label::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:2px}
.tour-label.below{transform:translate(-50%,30px)}
.tour-label.below::after{bottom:auto;top:-6px}
.tour-label.to-start{transform:translate(calc(-100% + 30px),calc(-100% - 26px))}
.tour-label.to-start::after{left:auto;right:24px;transform:rotate(45deg)}
.tour-label.to-end{transform:translate(-30px,calc(-100% - 26px))}
.tour-label.to-end::after{left:24px;transform:rotate(45deg)}
.tour-label.below.to-start{transform:translate(calc(-100% + 30px),30px)}
.tour-label.below.to-end{transform:translate(-30px,30px)}
@keyframes tourLabel{from{opacity:0}to{opacity:1}}
.vp-caption{position:absolute;z-index:7;left:50%;bottom:16px;transform:translateX(-50%);width:max-content;max-width:84%;text-align:center;pointer-events:none}
.vp-caption.top{bottom:auto;top:16px}
.vp-caption span{display:inline;background:rgba(17,26,21,.8);color:#fff;font-size:17px;line-height:1.75;padding:4px 12px;border-radius:8px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.vp-caption.empty,.vplayer.no-cc .vp-caption{display:none}
.vp-big{position:absolute;z-index:8;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border:0;border-radius:50%;background:var(--g,#048238);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s ease}
.vp-big svg{width:34px;height:34px;margin-inline-start:4px}
[dir=rtl] .vp-big svg{margin-inline-start:0;margin-inline-end:4px}
.vp-big:hover{transform:scale(1.06)}
.vp-load{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.35)}
.vp-load span{width:38px;height:38px;border-radius:50%;border:3px solid #cfe3d6;border-top-color:var(--g,#048238);animation:vpSpin .8s linear infinite}
@keyframes vpSpin{to{transform:rotate(360deg)}}
.vp-end{position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;background:rgba(246,248,247,.9);cursor:default}
.vp-end-box{text-align:center;padding:20px}
.vp-end-box p{font-size:19px;margin:0 0 16px;color:#14201a}
.vp-end-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.vp-controls{border-top:1px solid #e4ebe6;padding:6px 12px 8px;background:#fff}
.vp-track{display:flex;gap:3px;height:18px;align-items:center;cursor:pointer;touch-action:none}
.vp-seg{flex:1 1 0;min-width:2px;height:5px;border-radius:999px;background:#e4ebe6;overflow:hidden;transition:height .15s ease;display:flex}
.vp-track:hover .vp-seg{height:8px}
.vp-seg i{display:block;height:100%;width:0;background:var(--g,#048238);border-radius:inherit}
.vp-row{display:flex;align-items:center;gap:2px;margin-top:2px}
.vp-btn{width:38px;height:38px;border:0;border-radius:10px;background:transparent;color:#14201a;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font:inherit;font-size:13px;padding:0}
.vp-btn:hover{background:#f1f5f2;color:var(--g,#048238)}
.vp-btn.on{color:var(--g,#048238);background:#e8f3ec}
.vp-btn:disabled{opacity:.35;cursor:default;background:transparent;color:#14201a}
.vp-speed{width:auto;min-width:44px;padding:0 8px}
[dir=rtl] .vp-flip svg{transform:scaleX(-1)}
.vp-time{font-size:13px;color:#5b6472;margin-inline-start:8px;font-variant-numeric:tabular-nums;white-space:nowrap}
.vp-gap{flex:1}
.vp-info{display:flex;flex-direction:column;gap:4px;padding:2px 4px}
.vp-count{font-size:13px;color:var(--g,#048238)}
.vp-info h3{margin:0;font-size:22px;line-height:1.4}
.vp-text{display:none;white-space:pre-line;line-height:1.85;color:#333;font-size:15.5px;margin-top:4px}
.vplayer.no-cc .vp-text{display:block}
.vplayer .step-strip{padding-top:4px}
.vplayer:fullscreen{background:#fff;padding:18px;justify-content:center;overflow:auto}
.vplayer:fullscreen .vp-frame{width:min(100%,calc((100vh - 130px) * 16 / 9));margin:0 auto}
.vplayer:fullscreen .vp-info,.vplayer:fullscreen .step-strip{display:none}
@media (max-width:1200px){.tour-label{font-size:13px;max-width:200px}}
@media (max-width:650px){
	.vp-controls{padding:4px 6px 6px}
	.vp-btn{width:34px;height:34px}
	.vp-time{font-size:12px;margin-inline-start:4px}
	#vpWhole{display:none}
	.vp-caption{bottom:8px;max-width:94%}
	.vp-caption.top{top:8px}
	.vp-caption span{font-size:12.5px;line-height:1.6;padding:2px 8px}
	.vp-big{width:58px;height:58px;margin:-29px 0 0 -29px}
	.vp-big svg{width:26px;height:26px}
	.vp-cursor{width:20px;height:20px}
	.tour-hot{width:28px;height:28px;margin:-14px 0 0 -14px}
	.tour-label{display:none}
	.vp-info h3{font-size:18px}
}
@media (prefers-reduced-motion:reduce){.tour-hot::before,.tour-hot::after{animation:none}}

/* 3.2.1: language button on the same row as Back to site, at the other end */
.side-links{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.side-links .top-link{white-space:nowrap}

/* ---------- 3.5: sign-in pop-up (one-time code) ---------- */
body.sxa-gate{margin:0;min-height:100vh;background:var(--bg,#eceef1);overflow:hidden}
.gate-bg{position:fixed;inset:0;padding:28px;display:flex;flex-direction:column;gap:18px;filter:blur(6px);opacity:.75;pointer-events:none}
.gate-bg-hero{height:300px;border-radius:26px;background:linear-gradient(120deg,#0a2a1b,#0f4d2e 60%,#14653d)}
.gate-bg-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gate-bg-row i{display:block;height:170px;border-radius:18px;background:#fff;border:1px solid #e4ebe6}
.gate-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(236,238,241,.55);overflow:auto}
.gate-card{width:100%;max-width:440px;background:#fff;border:1px solid #e4ebe6;border-radius:20px;padding:26px 26px 20px;display:flex;flex-direction:column;gap:10px}
.gate-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.gate-logo{height:30px;width:auto;display:block}
.gate-card h1{margin:0 0 4px;font-size:25px;line-height:1.35;font-weight:400!important}
.gate-card form{display:flex;flex-direction:column;gap:8px}
.gate-card [hidden]{display:none!important}
.gate-text{margin:0 0 6px;color:#4d5a53;line-height:1.75;font-size:15px}
.gate-email{color:#14201a;unicode-bidi:isolate}
.gate-label{font-size:13px;color:#5b6472}
.gate-input{width:100%;height:46px;border:1px solid #cfd8d2;border-radius:12px;padding:0 14px;font:inherit;font-size:16px;color:#14201a;background:#fff;outline:none}
.gate-input:focus{border-color:var(--g,#048238)}
.gate-code{letter-spacing:.5em;text-align:center;font-size:22px;font-variant-numeric:tabular-nums}
.gate-msg{min-height:20px;font-size:13px;color:#b42318}
.gate-btn{width:100%;justify-content:center;height:46px}
.gate-links{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:4px}
.gate-links .top-link:disabled{opacity:.5;cursor:default}
.gate-help{margin:6px 0 0;font-size:12.5px;color:#7a857f;line-height:1.7}
.gate-site{margin-top:10px;align-self:flex-start;font-size:13px}
@media (max-width:650px){.gate-bg{padding:12px}.gate-bg-hero{height:180px}.gate-bg-row{grid-template-columns:1fr 1fr}.gate-card{padding:20px 18px 16px}.gate-card h1{font-size:21px}}
.side-user{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:#5b6472;margin:2px 0 6px}
.side-user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}