/* Quran Academy — v3.8 "Night Recital": cinematic and modern. Dark by default (night = the academy blue, deepened),
   light as the visitor's alternative; the home hero, header, page heads and footer stay night in both modes.
   Palette: #003049 blue (primary) · #D62828 red (calls to action) · #F77F00 orange (secondary) · #FCBF49 gold
   (highlight: light, numbers, focus) · #EAE2B7 cream (text on night). The dashboard can change them (Branding →
   Website colors); everything below derives from these five variables. Fonts: css/fonts.css (Amiri display, Plex text).
   Motifs: light (a warm source with beams), a voice wave, film posters, showtimes, closing credits — no ornaments. */
:root{--primary:#003049;--accent:#D62828;--secondary:#F77F00;--highlight:#FCBF49;--cream:#EAE2B7;
  --primary-d:color-mix(in srgb,var(--primary) 78%,#000);--accent-d:color-mix(in srgb,var(--accent) 82%,#000);
  --night:color-mix(in srgb,var(--primary) 30%,#000);--night2:color-mix(in srgb,var(--primary) 62%,#000);
  --dim:color-mix(in srgb,var(--cream) 66%,transparent);--line-d:color-mix(in srgb,var(--cream) 14%,transparent);
  --bg:color-mix(in srgb,var(--cream) 30%,#fff);--alt:color-mix(in srgb,var(--cream) 55%,#fff);--card:#FFFDF6;--text:var(--primary);--muted:#3E5C6B;--border:color-mix(in srgb,var(--cream) 70%,var(--primary) 18%);
  --link:var(--primary);--on-dark:var(--cream);--focus:var(--highlight);
  --serif:'Amiri',"Traditional Arabic","Times New Roman",serif;--sans:'Plex',system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --r:18px;--wrap:1240px;--head-h:76px}
[data-mode=dark]{--bg:var(--night);--alt:color-mix(in srgb,var(--primary) 40%,#000);--card:color-mix(in srgb,var(--primary) 50%,#000);--text:#EFE9CC;--muted:color-mix(in srgb,var(--cream) 64%,var(--night));--border:color-mix(in srgb,var(--cream) 13%,transparent);--link:var(--highlight);--on-dark:var(--cream)}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--hh,var(--head-h)) + 12px);background:var(--bg)}
body{margin:0;font:400 16.5px/1.65 var(--sans);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
[data-mode=dark] body{color-scheme:dark}
[dir=rtl] body{font-size:17px;line-height:1.8}
h1,h2,h3,h4,.h1,.h3{font-family:var(--serif);font-weight:700;line-height:1.15;color:inherit;margin:0 0 .4em;letter-spacing:-.01em}
h1,.h1{font-size:clamp(38px,5.6vw,72px)}h2{font-size:clamp(30px,3.8vw,48px)}h3,.h3{font-size:22px}h4{font-size:17px}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4,[dir=rtl] .h1,[dir=rtl] .h3{line-height:1.45;letter-spacing:0} /* never space Arabic letters: it breaks their joining */
p{margin:0 0 1em}
a{color:var(--link);text-decoration-color:var(--secondary);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--secondary)}[data-mode=dark] a:hover{color:var(--secondary)}
img{max-width:100%}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.muted{color:var(--muted);font-size:14px}.small{font-size:13px}.center{text-align:center}.hint{color:var(--muted);font-size:13.5px;margin:-2px 0 6px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
[tabindex="-1"]:focus{outline:none}
.skip{position:absolute;inset-inline-start:8px;top:-60px;background:var(--accent);color:#fff;padding:8px 14px;border-radius:8px;z-index:40;text-decoration:none}.skip:focus{top:8px}

/* ---- buttons ---- */
button,.btn{font:600 15px/1.2 var(--sans);background:var(--primary);color:var(--on-dark);border:0;border-radius:999px;padding:12px 22px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:none;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s}
button:hover,.btn:hover{background:var(--primary-d);color:var(--on-dark);transform:translateY(-1px)}
[data-mode=dark] button:not(.cta):not(.icon):not(.hc):not(.sec-btn):not(.day):not(.link):not([role=tab]):not(.rc-play),[data-mode=dark] .btn:not(.cta):not(.ghost):not(.ghost-d){background:var(--cream);color:var(--primary)}
.cta,.btn.cta{background:var(--accent);color:#fff}.cta:hover,.btn.cta:hover{background:var(--accent-d);color:#fff;box-shadow:0 10px 30px -10px color-mix(in srgb,var(--accent) 85%,transparent)}
.btn.big,button.big{padding:15px 28px;font-size:16.5px}.btn.block{display:flex;width:100%}.btn.small{padding:7px 13px;font-size:13.5px}
.btn.ghost{background:transparent;color:var(--cream);border:1px solid color-mix(in srgb,var(--cream) 45%,transparent)}.btn.ghost:hover{background:rgba(234,226,183,.1);border-color:var(--highlight);color:#fff}
.btn.ghost-d,button.sec-btn,.sec-btn{background:transparent;color:var(--text);border:1px solid var(--border)}.btn.ghost-d:hover,.sec-btn:hover{background:transparent;color:var(--text);border-color:var(--highlight);box-shadow:none}
button:disabled{opacity:.6;cursor:progress;transform:none}
button.danger{background:var(--accent)}button.link{background:none;border:0;padding:0;color:var(--link);text-decoration:underline;text-decoration-color:var(--secondary);font-weight:600;box-shadow:none;border-radius:0}button.link:hover{transform:none}
.more{font-weight:700;text-decoration-thickness:2px}

/* ---- header ---- */
/* header: night glass; transparent while it floats over the home hero */
.site-head{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--night) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--cream);border-bottom:1px solid var(--line-d);transition:background .3s,border-color .3s}
.at-home:not(.scrolled) .site-head{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.at-home #home{margin-top:calc(-1 * var(--hh,var(--head-h)))}
.scrolled .site-head{box-shadow:0 10px 30px rgba(0,8,14,.35)}
.bar{max-width:1320px;margin:auto;display:flex;align-items:center;gap:18px;padding:10px 24px;min-height:var(--head-h)}
.brand{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none;min-width:0;flex-shrink:0}.brand:hover{color:inherit}
.brand img{height:48px;width:auto;max-width:180px;object-fit:contain}
/* without a logo: a small light (the hero's light source) */
.brand-mark{width:30px;height:30px;flex-shrink:0;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFF6D6,var(--highlight) 40%,var(--secondary) 78%);box-shadow:0 0 22px color-mix(in srgb,var(--highlight) 60%,transparent)}
.brand-mark[hidden]{display:none}
.brand-text{display:flex;flex-direction:column;min-width:0}.site-name{font:700 23px/1.1 var(--serif)}.tag{color:var(--dim);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.main-nav{flex:1;min-width:0}.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;justify-content:center;flex-wrap:nowrap}
.main-nav a{display:block;color:var(--dim);text-decoration:none;font-weight:500;font-size:15px;padding:8px 10px;white-space:nowrap;border-bottom:2px solid transparent}
.main-nav a:hover{color:#FFF9E6}.main-nav a[aria-current=page]{border-bottom-color:var(--highlight);color:#FFF9E6}
.head-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.icon{background:transparent;border:1px solid rgba(234,226,183,.24);color:var(--cream);width:40px;height:40px;padding:0;border-radius:50%;display:inline-grid;place-items:center;position:relative;box-shadow:none}
.icon:hover{background:rgba(234,226,183,.1);color:var(--cream);box-shadow:none;border-color:var(--highlight);transform:none}.icon svg{width:19px;height:19px;fill:currentColor}
#themeBtn .sun{display:none}[data-mode=dark] #themeBtn .sun{display:block}[data-mode=dark] #themeBtn .moon{display:none}
.count{position:absolute;top:-5px;inset-inline-end:-5px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;border-radius:10px;min-width:18px;height:18px;line-height:18px;padding:0 4px}
.hbtn{background:transparent;border:1px solid rgba(234,226,183,.4);color:var(--cream);border-radius:999px;padding:9px 14px;font:600 14px/1.2 var(--sans);text-decoration:none;cursor:pointer;box-shadow:none}.hbtn:hover{background:rgba(234,226,183,.1);color:var(--cream);box-shadow:none;border-color:var(--highlight)}
.hbtn[hidden],.btn[hidden]{display:none}
/* "Apply now" in the header: a gold outline that fills on hover */
#applyBtn{background:transparent;color:var(--highlight);border:1px solid var(--highlight);box-shadow:none}#applyBtn:hover{background:var(--highlight);color:var(--night)}
.burger{display:none}
@media(max-width:1520px){.tag{display:none}}
@media(max-width:1340px){
  .burger{display:inline-grid}.main-nav{position:absolute;inset-inline:0;top:100%;background:var(--night);border-bottom:1px solid var(--line-d);display:none;padding:8px 24px 18px}
  .menu-open .main-nav{display:block}.menu-open.at-home .site-head{background:var(--night)}.main-nav ul{flex-direction:column;align-items:stretch;flex-wrap:nowrap}.main-nav a{padding:13px 6px;font-size:17px;border-bottom:1px solid var(--line-d);color:var(--cream)}
  .main-nav a[aria-current=page]{border-inline-start:2px solid var(--highlight);padding-inline-start:12px}
  .bar{justify-content:space-between}}
@media(max-width:640px){.tag{display:none}.site-name{font-size:19px}.brand-mark{width:24px;height:24px}#bellBtn,#langBtn{padding:8px 9px}.head-actions{gap:6px}#acctBtn{display:none}#applyBtn{padding:8px 13px;font-size:14px}.bar{gap:8px;padding:8px 16px}}
@media(max-width:420px){#themeBtn{display:none}}
.bell-panel{position:absolute;inset-inline-end:16px;top:calc(100% + 6px);width:min(380px,calc(100vw - 32px));max-height:70vh;overflow:auto;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.25);z-index:30;padding:12px 14px}
.bp-h{display:flex;justify-content:space-between;align-items:center}.bp-h h2{margin:0;font-size:19px}.bp-h .icon{color:var(--text);border-color:var(--border);width:32px;height:32px}
.bell-panel h3{font:600 13px/1.4 var(--sans);color:var(--muted);margin:12px 0 4px}.bell-panel ul{list-style:none;margin:0;padding:0}
.bell-panel li a{display:flex;flex-direction:column;padding:8px 0;border-bottom:1px solid var(--border);color:inherit;text-decoration:none}.bell-panel li a:hover b{color:var(--secondary)}
.bell-panel li span{font-size:14px}.bell-panel li small{color:var(--muted);font-size:12.5px}.bp-foot{font-size:14px;margin:10px 0 0}

/* ---- hero: a film opening. Letterbox bars part on load, the banner (image / video, or a light scene when it has
   none) is graded dark with drifting light, dust and grain, the headline comes into focus word by word, and the
   recitation strip plays at the bottom. The header floats over it (see "header over the hero"). ---- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;overflow:hidden;background:var(--night);color:var(--cream);--foot-h:120px}
.hero.has-recite{--foot-h:250px}
.slides{position:relative;flex:1;min-width:0;display:grid} /* v3.9: in the flow, so a long title makes the hero taller instead of sliding under the header */
.slide{position:relative;grid-area:1/1;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:calc(var(--hh,var(--head-h)) + 70px) 0 var(--foot-h);background:var(--night) center/cover no-repeat;opacity:0;visibility:hidden;transition:opacity 1s ease,visibility 1s}
.slide:not([style*=background-image]){background-image:radial-gradient(120% 90% at 72% 18%,color-mix(in srgb,var(--primary) 70%,#fff 12%) 0%,var(--primary) 28%,var(--night2) 55%,var(--night) 100%)}
.slide.on{opacity:1;visibility:visible}
.bgv,.bge{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0;transition:opacity .8s}
.playing .bgv,.playing .bge{opacity:1}
.bge iframe{position:absolute;top:50%;left:50%;width:max(100%,177.78vh);height:max(100%,56.25vw);transform:translate(-50%,-50%);border:0}
/* grade: darken (banner "overlay" %), a warm light source drifting at the top corner, beams falling from it, vignette */
.hero .shade,.nf .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,12,20,.55),rgba(0,12,20,.2) 38%,rgba(0,12,20,.86));opacity:calc(.45 + var(--o,.35))}
.hero .shade::before{content:"";position:absolute;width:62vmax;height:62vmax;inset-inline-end:-12vmax;top:-24vmax;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--highlight) 55%,transparent),color-mix(in srgb,var(--secondary) 18%,transparent) 32%,transparent 62%);filter:blur(10px);animation:hxDrift 18s ease-in-out infinite alternate}
.hero .shade::after{content:"";position:absolute;inset:-20% -10% 0 20%;background:conic-gradient(from 200deg at 85% 0%,transparent 0deg,rgba(252,191,73,.14) 8deg,transparent 16deg,rgba(252,191,73,.09) 26deg,transparent 34deg,rgba(247,127,0,.08) 44deg,transparent 56deg);filter:blur(14px);mix-blend-mode:screen;transform-origin:85% 0;animation:hxBeams 12s ease-in-out infinite alternate}
[dir=rtl] .hero .shade::after{inset:-20% 20% 0 -10%;background:conic-gradient(from 104deg at 15% 0%,transparent 0deg,rgba(247,127,0,.08) 12deg,transparent 24deg,rgba(252,191,73,.09) 30deg,transparent 38deg,rgba(252,191,73,.14) 48deg,transparent 56deg);transform-origin:15% 0}
@keyframes hxDrift{to{transform:translate(-6vmax,4vmax) scale(1.08)}}@keyframes hxBeams{to{transform:rotate(-5deg);opacity:.7}}
.hero-fx{position:absolute;inset:0;pointer-events:none;z-index:1}
.hero-fx canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-fx .vign{position:absolute;inset:0;background:radial-gradient(130% 100% at 50% 40%,transparent 50%,rgba(0,8,14,.8))}
.hero-fx .grain{position:absolute;inset:0;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:hxGrain 1s steps(6) infinite}
@keyframes hxGrain{0%{background-position:0 0}20%{background-position:-37px 21px}40%{background-position:29px -13px}60%{background-position:-17px -41px}80%{background-position:43px 17px}}
/* letterbox bars: part once when the page opens */
.letterbox i{position:absolute;left:0;right:0;height:50%;background:#000;z-index:6;animation:lbTop 1.6s cubic-bezier(.7,0,.2,1) .25s forwards}
.letterbox i:first-child{top:0}.letterbox i:last-child{bottom:0;animation-name:lbBottom}.letterbox[hidden]{display:none}
@keyframes lbTop{to{transform:translateY(-100%)}}@keyframes lbBottom{to{transform:translateY(100%)}}
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.hero-copy{max-width:1000px}
.hero h1,.hero .h1{color:#FFF9E6;font-size:clamp(46px,7vw,116px);line-height:.98;letter-spacing:-.02em;margin:0 0 26px;max-width:15ch;text-wrap:balance;text-shadow:0 4px 40px rgba(0,0,0,.35)}
[dir=rtl] .hero h1,[dir=rtl] .hero .h1{letter-spacing:0;line-height:1.3;font-size:clamp(42px,6.2vw,96px)}
.hero h1 .w{display:inline-block;opacity:0;filter:blur(18px);transform:translateY(.12em) scale(1.04);animation:hxFocus 1.4s cubic-bezier(.2,.7,.2,1) forwards}
.hero h1 .w.last{color:var(--highlight)}
@keyframes hxFocus{to{opacity:1;filter:blur(0);transform:none}}
.hero-low{display:flex;gap:28px 48px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.hero.intro .hero-low,.hero.intro .hero-live{opacity:0;animation:hxIn 1.2s ease 2.4s forwards}
@keyframes hxIn{to{opacity:1}}
.hero p{margin:0;max-width:480px;font-size:clamp(16.5px,1.5vw,19.5px);color:rgba(234,226,183,.82);white-space:pre-line;text-wrap:pretty}.hero p:empty{display:none}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}.hero-btns .btn{padding:15px 28px;font-size:16.5px}
.hero-btns .btn.cta{box-shadow:0 12px 40px -12px color-mix(in srgb,var(--accent) 90%,transparent)}
.hero-btns .btn.ghost{border:1px solid rgba(234,226,183,.3)}
/* "Live now" pill (a class or event happening now) */
.hero-live{position:absolute;z-index:3;top:calc(var(--hh,var(--head-h)) + 24px);inset-inline-start:max(24px,calc((100% - var(--wrap)) / 2 + 24px));display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 12px;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,transparent);border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);color:#FFE3E3;text-decoration:none;font-size:14.5px;backdrop-filter:blur(6px)}
.hero-live:hover{color:#fff;border-color:var(--accent)}.hero-live[hidden]{display:none}
.hero-live i{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:hxPulse 1.8s infinite}
@keyframes hxPulse{0%{box-shadow:0 0 0 0 rgba(214,40,40,.7)}70%{box-shadow:0 0 0 10px rgba(214,40,40,0)}100%{box-shadow:0 0 0 0 rgba(214,40,40,0)}}
/* bottom bar: banner controls, the recitation strip, scroll hint */
.hero-foot{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:0 24px 22px;display:grid;grid-template-columns:1fr minmax(0,720px) 1fr;align-items:end;gap:16px}
.hero-ctl{grid-column:1;justify-self:start;display:flex;gap:6px;align-items:center;background:rgba(0,12,20,.5);border:1px solid var(--line-d);border-radius:999px;padding:4px 8px;backdrop-filter:blur(6px)}
.hero-ctl[hidden],.hc[hidden]{display:none}
.hc{background:transparent;color:var(--cream);border:0;width:32px;height:32px;padding:0;border-radius:50%;font-size:15px;line-height:1;box-shadow:none}.hc:hover{background:rgba(234,226,183,.16);color:#fff;box-shadow:none;transform:none}
.dots{display:flex;gap:6px}.dots button{width:22px;height:3px;padding:0;border-radius:2px;background:rgba(234,226,183,.35);border:0;box-shadow:none}.dots button:hover{transform:none}.dots button[aria-selected=true]{background:var(--highlight)}
.hero-down{grid-column:3;justify-self:end;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--cream);border:1px solid rgba(234,226,183,.3)}
.hero-down svg{width:22px;height:22px;fill:currentColor}.hero-down:hover{color:var(--highlight);border-color:var(--highlight)}
@media (prefers-reduced-motion:reduce){.slide,.bgv,.bge{transition:none}.hero .shade::before,.hero .shade::after,.hero-fx .grain{animation:none}.letterbox{display:none}.hero h1 .w,.hero.intro .hero-low,.hero.intro .hero-live{animation:none;opacity:1;filter:none;transform:none}}
@media(max-width:760px){.hero{--foot-h:96px}.hero.has-recite{--foot-h:290px}.slide{align-items:flex-end;padding-top:calc(var(--hh,var(--head-h)) + 40px)}.hero-down{display:none}.hero-foot{grid-template-columns:1fr;padding:0 16px 16px}.hero-ctl{grid-row:1}.hero-btns{width:100%;flex-direction:column}.hero-btns .btn{width:100%}}

/* ---- sections ---- */
.sec{padding:clamp(72px,10vw,140px) 0}.sec.alt{background:var(--alt)}
.sec[hidden],.cta-band[hidden]{display:none}
/* section heading: large title at the start, the short explanation at the end of the same row */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:12px 40px;align-items:end;margin:0 0 52px}.sec-head h2{margin:0;font-size:clamp(38px,5.4vw,78px);line-height:1}.sec-head p{color:var(--muted);font-size:17px;margin:0}
@media(max-width:760px){.sec-head{grid-template-columns:1fr;margin-bottom:36px}}
.empty{text-align:center;color:var(--muted)}
/* intro + mission/vision */
.intro-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,6vw,80px);align-items:start}
.intro-lead h2{font-size:clamp(30px,4vw,46px)}.lead{font-size:clamp(17.5px,1.6vw,20px);color:var(--muted);max-width:56ch}
.mv{display:grid;gap:22px}.mv-row{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-bottom:36px}
.mv-item{border-inline-start:2px solid var(--highlight);padding:4px 0 4px 22px;padding-inline-start:22px;padding-inline-end:0}
.mv-item h3{font-size:20px;color:var(--accent);margin-bottom:6px}[data-mode=dark] .mv-item h3{color:var(--secondary)}.mv-item p{margin:0;font-size:17px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;margin:48px 0 0;padding:28px 0 0;border-top:1px solid var(--border)}
.stats div{display:flex;flex-direction:column-reverse;text-align:center}.stats dd{margin:0;font:700 56px/1.1 var(--serif);color:var(--primary)}[data-mode=dark] .stats dd{color:var(--highlight)}.stats dt{color:var(--muted);font-size:15px}
@media(max-width:820px){.intro-grid{grid-template-columns:1fr}}
/* services */
.svc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:34px 30px}
.svc{padding-top:4px}.svc h3{margin:16px 0 6px;font-size:24px}.svc p{color:var(--muted);margin:0}
.rosette{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;color:var(--primary);background:radial-gradient(circle at 35% 30%,#FFF6D6,var(--highlight) 55%,color-mix(in srgb,var(--secondary) 70%,var(--highlight)));box-shadow:0 0 0 6px color-mix(in srgb,var(--highlight) 16%,transparent)}
.rosette .ico{width:28px;height:28px}.rosette.big{width:84px;height:84px}.rosette.big .ico{width:40px;height:40px}
[data-mode=dark] .rosette{box-shadow:0 0 0 6px rgba(252,191,73,.12),0 0 34px -4px rgba(252,191,73,.45)}
.ico{width:22px;height:22px;flex-shrink:0}.ico.big{width:44px;height:44px}
/* course cards — film posters: the course image (or its colour with the Arabic title as lettering), details over the bottom */
.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:24px}
.course-card{position:relative;display:grid;border-radius:var(--r);overflow:hidden;isolation:isolate;min-height:440px;aspect-ratio:2/3;background:var(--night);color:#FFF9E6;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.course-card:hover,.course-card:focus-within{transform:translateY(-6px);box-shadow:0 24px 60px -24px rgba(0,0,0,.6)}
.cc-img{grid-area:1/1;display:grid;place-items:center;padding-bottom:42%;background:var(--night) center/cover no-repeat;text-decoration:none;color:inherit}
.cc-img.plain{background:radial-gradient(90% 70% at 50% 22%,color-mix(in srgb,var(--tone,var(--primary)) 72%,#fff 28%),var(--tone,var(--primary)) 46%,color-mix(in srgb,var(--tone,var(--primary)) 35%,#000))}
.cc-word{font:700 clamp(54px,7vw,104px)/1.2 var(--serif);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:rgba(255,255,255,.93);text-shadow:0 0 50px color-mix(in srgb,var(--highlight) 60%,transparent);padding:0 18px;text-align:center;max-width:100%;overflow-wrap:anywhere}
.cc-word.mid{font-size:clamp(46px,4.8vw,66px)}.cc-word.long{font-size:clamp(36px,3.6vw,48px)}
.course-card::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(110deg,transparent 40%,rgba(255,240,200,.2) 50%,transparent 60%);transform:translateX(-120%);transition:transform .9s}
.course-card:hover::after{transform:translateX(120%)}
.cc-body{grid-area:1/1;align-self:end;position:relative;z-index:1;padding:90px 22px 22px;display:flex;flex-direction:column;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--night) 78%,transparent) 34%,var(--night) 78%)}
.cc-body h3{font-size:28px;margin:10px 0 6px;line-height:1.1}.cc-body h3 a{color:#FFF9E6;text-decoration:none}.cc-body h3 a:hover{color:var(--highlight)}
.cc-body>p{color:rgba(234,226,183,.78);margin:0 0 10px;font-size:14.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 12px;color:rgba(234,226,183,.72);font-size:13.5px}.cc-meta div{display:flex;gap:6px;align-items:center}.cc-meta dt{display:flex}.cc-meta dd{margin:0}.cc-meta .ico{width:16px;height:16px;color:var(--highlight)}
.cc-price{margin:0 0 14px;font-size:14px;color:rgba(234,226,183,.78)}.cc-price b{font-size:21px;color:var(--highlight)}
.cc-act{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}.cc-act .btn{padding:9px 16px;font-size:14px}
.course-card .btn:not(.ghost-d){background:var(--cream);color:var(--primary)}.course-card .btn.ghost-d{color:#FFF9E6;border-color:rgba(234,226,183,.4)}.course-card .btn.ghost-d:hover{border-color:var(--highlight);color:var(--highlight)}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{display:inline-block;font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:20px;background:color-mix(in srgb,var(--primary) 9%,transparent);color:var(--text);line-height:1.4}
.badge.gold{background:var(--highlight);color:#003049}.badge.off{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}[data-mode=dark] .badge{background:rgba(234,226,183,.14)}[data-mode=dark] .badge.gold{background:var(--highlight);color:#003049}[data-mode=dark] .badge.off{color:#FF9C9C}
/* reviews */
.review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.review{margin:0;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:30px 28px 24px;display:flex;flex-direction:column}
.review blockquote{margin:0 0 22px;position:relative;font:400 20px/1.6 var(--serif)}.review blockquote::before{content:"“";font:700 72px/1 var(--serif);color:var(--highlight);display:block;height:34px}
.review[dir=rtl] blockquote::before{content:"”"}.review blockquote p{margin:0}
.review figcaption{display:flex;gap:12px;align-items:center;margin-top:auto}.review figcaption img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.review figcaption span{display:flex;flex-direction:column}.review small{color:var(--muted)}
.stars{color:var(--highlight);letter-spacing:2px;font-size:15px}.stars span{color:var(--border)}
/* apply band */
/* apply band: the final scene, a red light rising behind a large heading */
.cta-band{position:relative;overflow:hidden;text-align:center;color:var(--cream);padding:clamp(90px,13vw,170px) 0;background:radial-gradient(80% 120% at 50% 115%,var(--accent) 0%,color-mix(in srgb,var(--accent) 45%,var(--night)) 32%,var(--night) 72%)}
.cta-in{display:flex;flex-direction:column;align-items:center;gap:30px}.cta-in h2{color:#FFF9E6;margin:0 0 14px;font-size:clamp(46px,7.4vw,116px);line-height:1;text-wrap:balance}.cta-in p{margin:0 auto;font-size:19px;max-width:52ch;color:var(--dim)}
.cta-act{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.cta-band .btn.cta{background:var(--cream);color:var(--primary);box-shadow:none}.cta-band .btn.cta:hover{background:#fff;color:var(--primary)}
/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.contact-grid .sec-head{grid-template-columns:1fr;margin:0 0 20px}
.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:16px}.contact-list li{display:flex;gap:14px;align-items:flex-start}.contact-list .ico{color:var(--secondary);margin-top:3px}
.contact-list div{display:flex;flex-direction:column}.cl-l{font-size:13.5px;color:var(--muted)}.cl-v{font-weight:600}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr}}

/* ---- calendar (academy events) ---- */
.cal-wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:22px}@media(max-width:900px){.cal-wrap{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:20px}
.cal-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}
.cal-r{display:flex;gap:6px}.today-btn{padding:9px 14px}.today-btn.on{background:var(--primary);color:var(--cream);border-color:var(--primary)}
.mlbl{flex:1;text-align:center;display:flex;flex-direction:column}.mlbl b{font:700 19px/1.3 var(--serif)}.mlbl small{color:var(--muted);font-size:14px}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.dn{text-align:center;font-size:12.5px;color:var(--muted);padding:4px 0}
.day{min-height:66px;border:1px solid var(--border);border-radius:8px;padding:4px 5px;cursor:pointer;overflow:hidden;font:400 11px/1.3 var(--sans);background:var(--card);color:inherit;text-align:start;display:block;box-shadow:none}
button.day:hover{background:color-mix(in srgb,var(--highlight) 22%,var(--card));border-color:var(--secondary);color:inherit;box-shadow:none}
.day.empty{border:0;cursor:default;background:none}.day.today{border:2px solid var(--accent)}.day.sel{background:color-mix(in srgb,var(--highlight) 34%,var(--card))}
.day .dd{display:flex;flex-direction:column;line-height:1.1;margin-bottom:3px}.day .gd{font-weight:700;font-size:15px}.day .hd{font-size:10.5px;color:var(--muted)} /* Gregorian date (main) · Hijri day */
.tz-note{margin:10px 2px 0;font-size:13px;color:var(--muted)}.tz-note a{font-weight:600}
.day.today .gd{color:var(--accent)}[data-mode=dark] .day.today .gd{color:var(--secondary)}
.dot{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border-radius:3px;padding:0 3px;margin-top:2px;font-size:10px}
/* v3.9 events over several days: one bar running across the days (cells clip it at their edges) */
.dot.span-s{border-start-end-radius:0;border-end-end-radius:0;margin-inline-end:-6px}.dot.span-m{border-radius:0;margin-inline:-6px}.dot.span-e{border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:-6px}
.dot.span-m,.dot.span-e{color:transparent!important}.dot.span-m::before,.dot.span-e::before{content:"\2192";color:rgba(255,255,255,.85)}[dir=rtl] .dot.span-m::before,[dir=rtl] .dot.span-e::before{content:"\2190"}
.more{color:var(--muted);font-size:10px}
.list-title{font-size:20px;margin:6px 0}
.ev{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);cursor:pointer;text-decoration:none;color:inherit}.ev:last-child{border:0}.ev:hover h4{color:var(--secondary)}
.bar-c{width:5px;border-radius:3px;flex-shrink:0}.ev h4{margin:0;font-size:18px}.ev p{margin:2px 0 0;color:var(--muted);font-size:14px}.ev p .hj{color:var(--muted)}
.tools{display:flex;gap:8px;margin-bottom:10px}.tools input,.tools select{flex:1;min-width:0}
.cat{display:inline-block;font-size:12px;font-weight:700;padding:1px 9px;border-radius:10px;background:color-mix(in srgb,var(--highlight) 45%,transparent);color:var(--text)}

/* ---- forms ---- */
input,select,textarea{width:100%;padding:11px 12px;border:1.5px solid var(--border);border-radius:8px;background:var(--card);color:inherit;font:400 16px/1.4 var(--sans)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--secondary);box-shadow:0 0 0 3px color-mix(in srgb,var(--secondary) 28%,transparent)}
[aria-invalid=true]{border-color:var(--accent)!important}
textarea{resize:vertical}
.form label{display:block;font-weight:600;font-size:15px;margin:14px 0 5px}.form fieldset{border:0;border-top:1px solid var(--border);margin:22px 0 0;padding:6px 0 0}
.form legend{font:700 21px/1.3 var(--serif);padding:0 10px 0 0;padding-inline-end:10px;padding-inline-start:0;color:var(--text)}
.form button[type=submit]{margin-top:20px}.two{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}@media(max-width:640px){.two{grid-template-columns:1fr}}
.req{color:var(--accent)}.adm{max-width:820px;margin:0 auto}.guardian{background:color-mix(in srgb,var(--highlight) 14%,transparent);border-radius:8px;padding:6px 14px 14px;margin-top:14px}.guardian[hidden]{display:none}
.err{color:#B01F1F;font-weight:600}[data-mode=dark] .err{color:#FF9C9C}.ok{color:#1F6B3A;font-weight:600}[data-mode=dark] .ok{color:#9BE0B1}
.cap{margin-top:14px}
.vrow{display:flex;gap:8px}.vrow input{flex:1;font:600 18px/1.3 var(--sans);letter-spacing:.06em}.vrow button{flex-shrink:0}
.narrow{max-width:720px;margin-inline:auto}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;align-items:center}

/* ---- inner pages ---- */
.page{min-height:60vh}
/* v3.9 page heroes: every page opens like the home hero (without the recitation) — its picture (Dashboard → Page
   heroes; else the home hero's current picture; else the light scene) slowly pushing in, darkened, with the light,
   grain, letterbox bars and the title coming into focus. Markup added by heroize() in site.js. */
.page-head,.course-hero{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:flex-end;min-height:min(64svh,640px);color:var(--cream);background:radial-gradient(120% 90% at 72% 18%,color-mix(in srgb,var(--primary) 70%,#fff 12%) 0%,var(--primary) 28%,var(--night2) 55%,var(--night) 100%);padding:calc(var(--hh,var(--head-h)) + 60px) 0 clamp(40px,6vw,72px);margin-top:calc(-1 * var(--hh,var(--head-h)))}
.page-head>.wrap,.course-hero>.wrap{position:relative;z-index:2;width:100%}
.ph-bg{position:absolute;inset:0;z-index:-2;background:center/cover no-repeat;transform:scale(1.08);animation:phPush 16s ease-out forwards}
@keyframes phPush{to{transform:scale(1)}}
.page-head::before,.course-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,12,20,.6),rgba(0,12,20,.3) 38%,rgba(0,12,20,.9)),radial-gradient(130% 100% at 50% 40%,transparent 50%,rgba(0,8,14,.8))}
.page-head::after,.course-hero::after{content:"";position:absolute;z-index:-1;width:56vmax;height:56vmax;inset-inline-end:-14vmax;top:-26vmax;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--highlight) 45%,transparent),color-mix(in srgb,var(--secondary) 14%,transparent) 32%,transparent 62%);filter:blur(10px);animation:hxDrift 18s ease-in-out infinite alternate;pointer-events:none}
.ph-fx{position:absolute;inset:0;z-index:0;pointer-events:none}.ph-fx .grain{position:absolute;inset:0;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:hxGrain 1s steps(6) infinite}
.ph-lb i{position:absolute;left:0;right:0;height:50%;background:#000;z-index:5;animation:lbTop 1.1s cubic-bezier(.7,0,.2,1) .1s forwards}.ph-lb i:first-child{top:0}.ph-lb i:last-child{bottom:0;animation-name:lbBottom}
.page-head h1,.course-hero h1{color:#FFF9E6;margin:0 0 14px;font-size:clamp(44px,6.6vw,100px);line-height:1;letter-spacing:-.02em;max-width:16ch;text-wrap:balance;text-shadow:0 4px 40px rgba(0,0,0,.35)}
[dir=rtl] .page-head h1,[dir=rtl] .course-hero h1{letter-spacing:0;line-height:1.3;font-size:clamp(40px,5.6vw,84px)}
.page-head h1 .w,.course-hero h1 .w{display:inline-block;opacity:0;filter:blur(16px);transform:translateY(.12em) scale(1.04);animation:hxFocus 1.2s cubic-bezier(.2,.7,.2,1) forwards}
.page-head h1 .w.last,.course-hero h1 .w.last{color:var(--highlight)}
.page-head p{max-width:62ch;margin:0;font-size:18.5px;color:rgba(234,226,183,.82)}
.ph-intro>.wrap>:not(h1):not(.tp-photo){opacity:0;animation:hxIn 1s ease .9s forwards}
@media (prefers-reduced-motion:reduce){.ph-bg,.page-head::after,.course-hero::after,.ph-fx .grain{animation:none;transform:none}.ph-lb{display:none}.ph-intro>.wrap>*{animation:none;opacity:1}}
@media(max-width:760px){.page-head,.course-hero{min-height:58svh;padding-top:calc(var(--hh,var(--head-h)) + 40px)}}
.page-body{padding-top:40px;padding-bottom:70px}
.page-card{max-width:860px;margin:40px auto;padding:clamp(22px,4vw,44px)}
.prose{max-width:72ch}.prose h1{margin-top:0}.prose h2{margin-top:1.4em;font-size:28px}.prose li{margin:5px 0}.prose.narrow{margin:0 auto 40px}
/* course page */

.course-hero .wrap{position:relative}.course-hero h1{color:#FFF9E6;max-width:22ch}.course-hero .lead{color:var(--cream);max-width:60ch}
.course-hero .badge{background:rgba(234,226,183,.16);color:var(--cream)}.course-hero .badge.gold{background:var(--highlight);color:#003049}.course-hero p:last-child{margin:24px 0 0}
.crumb{color:var(--cream);font-size:15px;display:inline-block;margin-bottom:14px}.crumb:hover{color:var(--highlight)}
.course-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;padding-top:44px;padding-bottom:70px;align-items:start}
.course-main section{margin-bottom:40px}.course-main h2{font-size:30px}
.course-aside{position:sticky;top:calc(var(--hh,var(--head-h)) + 20px)}
.facts{background:var(--card);border:1px solid var(--border);border-top:4px solid var(--secondary);border-radius:var(--r);padding:22px}
.facts dl{margin:0 0 10px}.facts dl div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--border)}.facts dt{color:var(--muted)}.facts dd{margin:0;font-weight:600;text-align:end}
.facts h2{margin:20px 0 8px}
@media(max-width:900px){.course-layout{grid-template-columns:1fr}.course-aside{position:static}}
.syllabus{list-style:none;counter-reset:mod;padding:0;margin:0;border-inline-start:2px solid var(--border)}
.syllabus li{counter-increment:mod;position:relative;padding:4px 0 18px;padding-inline-start:44px}
.syllabus li::before{content:counter(mod);position:absolute;inset-inline-start:-15px;top:2px;width:28px;height:28px;border-radius:50%;background:var(--primary);color:var(--cream);font:700 14px/28px var(--sans);text-align:center}
[data-mode=dark] .syllabus li::before{background:var(--highlight);color:#003049}
.sy-h{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}.sy-h h3,.sy-h h4{margin:0}.sy-w{font-size:13px;color:var(--muted);background:color-mix(in srgb,var(--highlight) 30%,transparent);padding:1px 8px;border-radius:10px}
.syllabus p{margin:4px 0 0;color:var(--muted)}.syllabus.compact li{padding-bottom:10px}
.slots{list-style:none;padding:0;margin:0 0 10px;display:grid;gap:8px}.slots li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:8px 12px;background:color-mix(in srgb,var(--cream) 50%,transparent);border-radius:8px}
[data-mode=dark] .slots li{background:rgba(234,226,183,.07)}.slots small{color:var(--muted);flex-basis:100%}
.teacher{display:flex;gap:18px;align-items:flex-start}.teacher img,.t-ph{width:96px;height:96px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--alt);display:grid;place-items:center;color:var(--muted)}
.t-ph .ico{width:40px;height:40px}.teacher h3{margin:0 0 2px}.t-title{color:var(--accent);font-weight:600;margin:0 0 6px}[data-mode=dark] .t-title{color:var(--secondary)}.t-bio{margin:0;color:var(--muted)}
.team{margin-top:20px}.team h2{text-align:center}.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px;margin:30px 0 40px}
.team .teacher{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:20px}
/* contact page */
.contact-page{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start}.contact-page .prose{margin-bottom:28px}@media(max-width:860px){.contact-page{grid-template-columns:1fr}}
/* verify */
.verify{margin-bottom:24px}.result{display:flex;gap:18px;align-items:flex-start;padding:24px;border-radius:var(--r);border:2px solid var(--border);background:var(--card)}
.result.good{border-color:#2E8B57}.result.good .ico{color:#2E8B57}.result.bad{border-color:var(--accent)}.result.bad .ico{color:var(--accent)}.result h2{font-size:26px}
.cert-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 24px;margin:14px 0}.cert-dl dt{color:var(--muted);font-size:13.5px}.cert-dl dd{margin:0;font-weight:600;font-size:17px}
.done{text-align:center;padding:40px 24px}.done .row{justify-content:center}
/* student area */
.student-head{padding-bottom:0}.student-head h1{font-size:clamp(28px,4vw,42px)}
.tabs{display:flex;gap:4px;margin-top:22px;overflow-x:auto;scrollbar-width:thin}.tabs button{background:transparent;color:var(--cream);border-radius:8px 8px 0 0;padding:12px 16px;white-space:nowrap;box-shadow:none;border-bottom:3px solid transparent}
.tabs button:hover{background:rgba(234,226,183,.1);color:#fff;box-shadow:none}.tabs button[aria-selected=true]{background:var(--bg);color:var(--text);border-bottom-color:var(--bg)}
[data-mode=dark] .tabs button:not([aria-selected=true]){background:transparent;color:var(--cream)}
.my-courses{display:grid;gap:24px}.my-course{border-inline-start:5px solid var(--tone)}.my-course header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.my-course h2{font-size:26px;margin:0}.my-course h2 a{color:inherit;text-decoration:none}.my-course h3{font-size:18px;margin:18px 0 8px}
.next{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:color-mix(in srgb,var(--highlight) 22%,transparent);padding:10px 14px;border-radius:8px}.next .ico{color:var(--secondary)}
details summary{cursor:pointer;font-weight:600;margin:14px 0 6px}details .syllabus{margin-top:10px}
.materials{list-style:none;padding:0;margin:0;display:grid;gap:8px}.materials li{display:flex;gap:10px;align-items:center}.materials .ico{color:var(--secondary)}
.review-form{margin-top:26px;max-width:720px}
.rating{display:inline-flex;flex-direction:row-reverse;gap:2px;border:0;padding:0;margin:12px 0 0}.rating legend{font-weight:600;font-size:15px;margin-bottom:4px;float:left;width:100%}[dir=rtl] .rating legend{float:right}
.rating input{position:absolute;opacity:0}.rating label{font-size:30px;color:var(--border);cursor:pointer;margin:0;padding:0 2px}.rating input:checked~label,.rating label:hover,.rating label:hover~label{color:var(--secondary)}
.rating input:focus-visible+label{outline:3px solid var(--focus);border-radius:4px}
.sched{display:grid;grid-template-columns:1.4fr 1fr;gap:22px}@media(max-width:900px){.sched{grid-template-columns:1fr}}
.dot.class{border-inline-start:3px solid var(--highlight)}.legend{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--muted);margin:12px 0 0;flex-wrap:wrap}
.sw{display:inline-block;width:14px;height:10px;border-radius:2px}.sw.cls{background:var(--primary);border-inline-start:3px solid var(--highlight)}.sw.evt{background:var(--secondary);margin-inline-start:10px}
.agenda{list-style:none;margin:0;padding:0;display:grid;gap:10px}.agenda li{display:flex;gap:14px;padding:10px 12px;border-inline-start:4px solid var(--c);background:color-mix(in srgb,var(--cream) 40%,transparent);border-radius:6px}
[data-mode=dark] .agenda li{background:rgba(234,226,183,.06)}.agenda time{font-weight:700;white-space:nowrap;flex-shrink:0;min-width:96px}@media(max-width:480px){.agenda li{flex-direction:column;gap:2px}}.agenda div{display:flex;flex-direction:column}.agenda small{color:var(--muted)}
.cert-list{display:grid;gap:16px}.cert-item{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.cert-item>div{flex:1;min-width:220px}.cert-item h2{margin:0 0 2px}.cert-item p{margin:0}
.code{font:600 15px/1.4 var(--sans);letter-spacing:.08em;color:var(--secondary)}
.cert-view{margin-top:24px}.cert-name{max-width:620px}.cert-canvas{margin:16px 0;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:#fff}.cert-canvas canvas,.cert-canvas img{display:block;width:100%;height:auto;aspect-ratio:3508/2480}
.roster{margin-top:14px;border-top:1px solid var(--border);padding-top:10px}.roster summary{cursor:pointer;font-weight:600}.roster-body{margin-top:10px}.roster-list li .row{gap:8px;flex-wrap:wrap}.roster-list li{flex-wrap:wrap}
.apps{list-style:none;padding:0;margin:0}.apps li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}.apps li:last-child{border:0}.apps div{display:flex;flex-direction:column}.apps small{color:var(--muted)}
.badge.st-accepted{background:color-mix(in srgb,#2E8B57 18%,transparent)}.badge.st-rejected{background:color-mix(in srgb,var(--accent) 14%,transparent)}.badge.st-waitlist{background:color-mix(in srgb,var(--highlight) 40%,transparent)}
.empty-card{text-align:center;padding:40px 20px}
/* sign-in / profile (account.js) */
.acct-wrap{display:grid;gap:18px;max-width:640px;margin:0 auto}.acct{max-width:640px;margin:40px auto;width:100%}.acct-wrap .acct{margin:0}.acct h1{margin-top:0;font-size:36px}.acct h2{margin-top:0;font-size:22px}
#acct>.card.acct,#acct>form.acct{margin:48px auto}
.acct label{display:block;font-weight:600;font-size:15px;margin:12px 0 5px}.acct button[type=submit]{margin-top:16px;width:100%}.acct .ck{display:flex;gap:8px;align-items:flex-start;font-weight:500}.acct .ck input{width:auto;margin-top:5px}
.acct fieldset{border:1px solid var(--border);border-radius:10px;margin:14px 0 0;padding:8px 14px}.acct legend{font-weight:700;font-size:15px;padding:0 4px}
.note{background:color-mix(in srgb,var(--highlight) 25%,transparent);padding:8px 12px;border-radius:8px}.follows{padding-inline-start:18px}.follows li{margin:6px 0}

/* ---- event pop-up / page (player.js) ---- */
.modal{position:fixed;inset:0;background:rgba(0,30,47,.72);display:flex;align-items:center;justify-content:center;padding:16px;z-index:35}
.modal .card{max-width:720px;width:100%;max-height:90vh;overflow:auto}.noscroll{overflow:hidden}
.ev-page{max-width:840px;margin:40px auto}.ev-title{margin:14px 0 4px}.when{margin:0 0 8px}.when .hj{color:var(--muted);font-size:14px}.desc{white-space:pre-wrap}
.media:empty{display:none}
.mc{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.mc-item{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}.mc-item.on{opacity:1;visibility:visible}
.mc-item img{width:100%;height:100%;object-fit:cover}.mc-item iframe,.mc-item video{width:100%;height:100%;border:0;display:block;background:#000}
.mc-poster{position:absolute;inset:0;background:linear-gradient(135deg,var(--primary),#001A29) center/cover;display:grid;place-items:center}
.mc-play{width:72px;height:72px;border-radius:50%;padding:0;background:var(--accent);display:grid;place-items:center;box-shadow:0 4px 18px rgba(0,0,0,.4)}.mc-play svg{width:34px;height:34px;fill:#fff;margin-inline-start:4px}
.mc-live{position:absolute;top:10px;inset-inline-start:10px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;padding:2px 8px;border-radius:6px}
.mc-ctl{position:absolute;bottom:8px;inset-inline-end:8px;display:flex;gap:6px;z-index:2}
.mc-tabs{display:flex;background:rgba(0,0,0,.5);border-radius:18px;padding:2px}.mc-tabs button,.mc-pause{background:transparent;color:#fff;border:0;padding:5px 11px;border-radius:16px;font-size:12px;box-shadow:none}
.mc-tabs button[aria-selected=true]{background:rgba(255,255,255,.25)}.mc-pause{background:rgba(0,0,0,.5);min-width:34px}.mc-pause[hidden]{display:none}
.mc-err{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#fff;padding:20px;background:#111}
@media (prefers-reduced-motion:reduce){.mc-item{transition:none}}
/* 404 */
.nf{position:relative;min-height:60vh;overflow:hidden;display:grid;place-items:center;text-align:center;color:var(--cream);background:var(--night) center/cover}
.nf-in{position:relative;padding:30px 20px;max-width:640px}.nf h1{color:#FFF9E6;margin:0 0 8px}.nf a:not(.btn){color:var(--cream)}

/* ---- footer ---- */
/* ---- footer: the night closing scene, in both modes ---- */
.site-foot{background:var(--night);color:var(--cream);padding:64px 0 24px;border-top:1px solid var(--line-d)}
.foot-grid{max-width:var(--wrap);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:36px}
.foot-brand b{font:700 30px/1.15 var(--serif);display:block;margin-bottom:6px}.foot-brand p{color:var(--dim);margin:0 0 16px}
.site-foot h3{font:600 15px/1.3 var(--sans);color:var(--highlight);margin:0 0 12px;letter-spacing:0}
.site-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}.site-foot a{color:var(--cream);text-decoration-color:rgba(252,191,73,.45)}.site-foot a:hover{color:var(--highlight)}
.site-foot .contact-list .ico{color:var(--highlight)}.site-foot .cl-l{color:var(--dim)}
.social .icons{display:flex;gap:10px;flex-wrap:wrap}.social a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-d);color:var(--cream)}.social a:hover{background:var(--highlight);border-color:var(--highlight);color:var(--night)}.social svg{width:20px;height:20px;fill:currentColor}
.foot-bottom{max-width:var(--wrap);margin:44px auto 0;padding:20px 24px 0;border-top:1px solid var(--line-d);display:flex;gap:10px 24px;flex-wrap:wrap;align-items:center;justify-content:space-between;font-size:13.5px}
.foot-bottom p{margin:0;color:var(--dim)}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.pulse{display:inline-flex;align-items:center;gap:8px;cursor:help}
.pulse .dot{width:9px;height:9px;border-radius:50%;background:#9AA5AD;position:relative;flex-shrink:0;margin:0;padding:0}
.pulse.live .dot{background:#5CC98A}.pulse.live .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#5CC98A;animation:ping 2s ease-out infinite}.pulse.down .dot{background:#FF6B6B}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.8);opacity:0}}
@media (prefers-reduced-motion:reduce){.pulse.live .dot::after{animation:none}}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--primary);color:var(--cream);padding:11px 18px;border-radius:10px;z-index:50;border-inline-start:4px solid var(--secondary);max-width:calc(100vw - 32px)}
@media print{.site-head,.site-foot,.hero-ctl{display:none}}
@media(max-width:480px){#bellBtn{display:none}.site-name{font-size:17px}.brand{gap:8px}.brand img{height:38px;max-width:120px}#applyBtn{padding:8px 10px;font-size:13.5px}#langBtn{padding:8px 8px;font-size:13px}.vrow{flex-direction:column}.vrow button{width:100%}}
@media(max-width:360px){.brand-text{display:none}}
.nav-acct{display:none}@media(max-width:640px){.nav-acct{display:block}}
.zoom-box:empty{display:none}.zoom-box{margin:12px 0;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.lock{display:flex;gap:6px;align-items:flex-start;margin:12px 0 0}.lock .ico{width:16px;height:16px;color:var(--secondary);margin-top:2px}
.invoices{display:grid;gap:12px}.inv{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.inv>div:first-child{flex:1;min-width:220px}.inv h3{margin:0 0 2px;font-size:19px}
.inv .amt{font:700 20px/1.2 var(--sans);color:var(--primary);min-width:110px;text-align:end}[data-mode=dark] .inv .amt{color:var(--highlight)}
.balance{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-inline-start:5px solid var(--accent);margin-bottom:18px}
.balance .bal{font:700 30px/1.1 var(--sans);color:var(--accent)}.balance.zero{border-color:#2E8B57}.balance.zero .bal{color:#2E8B57}
.badge.st-unpaid{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}.badge.st-paid{background:color-mix(in srgb,#2E8B57 18%,transparent)}.badge.st-overdue{background:var(--accent);color:#fff}
.doc-view{margin-top:20px}.doc-view .row{justify-content:flex-end;margin-bottom:12px}
.teach-course{border-inline-start:5px solid var(--tone)}
/* v3.3: time zone choice (Profile & settings) and two-step sign-in */
.tz-box{margin:14px 0;padding:12px 14px;border-radius:8px;background:color-mix(in srgb,var(--highlight) 22%,transparent);border-inline-start:4px solid var(--highlight)}.tz-box label{font-weight:700}.tz-box select{margin-bottom:4px}
.tfa-steps{padding-inline-start:20px}.tfa-steps li{margin-bottom:12px}.tfa-qr{margin:10px 0;background:#fff;display:block;width:max-content;padding:8px;border-radius:8px}
.tfa-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:0;list-style:none;margin:10px 0}.tfa-codes code{font-size:15px}
/* ===== v3.4 ===== */
/* language switch: UK | Palestine flags, the knob sits behind the chosen language */
.lang-sw{position:relative;display:inline-flex;align-items:center;gap:4px;direction:ltr;padding:3px;border-radius:999px;border:1px solid rgba(234,226,183,.45);background:rgba(0,0,0,.18);cursor:pointer;box-shadow:none;height:34px}
.lang-sw .ls-f{position:relative;z-index:1;width:30px;height:26px;display:grid;place-items:center;border-radius:999px;opacity:.55;transition:opacity .2s}
.lang-sw .flag{width:22px;height:15px;border-radius:2px;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.lang-sw .knob{position:absolute;top:3px;left:3px;width:30px;height:26px;border-radius:999px;background:var(--cream);transition:transform .22s ease}
.lang-sw[aria-checked=true] .knob{transform:translateX(34px)}.lang-sw[aria-checked=false] .uk,.lang-sw[aria-checked=true] .ps{opacity:1}
.lang-sw:hover{border-color:var(--secondary)}.lang-sw:focus-visible{outline:2px solid var(--secondary);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.lang-sw .knob{transition:none}}
/* account icon + dropdowns placed under their button (site.js placeDrop) */
.acct-btn{overflow:visible}.acct-btn img{width:30px;height:30px;border-radius:50%;object-fit:cover}.acct-btn.has-photo svg{display:none}.acct-btn.signed{border-color:var(--secondary)}
.acct-btn .count,#chatCount{position:absolute;top:-5px;inset-inline-end:-5px}
.drop{position:fixed;inset-inline-end:auto;right:auto;z-index:40}
.drop::before{content:"";position:absolute;top:-7px;left:calc(var(--arrow,50%) - 7px);width:12px;height:12px;background:var(--card);border-left:1px solid var(--border);border-top:1px solid var(--border);transform:rotate(45deg)}
.acct-panel{width:min(290px,calc(100vw - 16px));background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.22);padding:8px}
.acct-panel a,.acct-panel button{display:flex;gap:8px;align-items:center;width:100%;text-align:start;padding:10px 12px;border-radius:8px;color:inherit;text-decoration:none;background:none;border:0;font:500 15px/1.3 var(--sans);cursor:pointer;box-shadow:none}
.acct-panel a:hover,.acct-panel button:hover{background:var(--alt)}.acct-panel .ap-out{border-top:1px solid var(--border);border-radius:0 0 8px 8px;margin-top:4px;color:var(--accent)}
.ap-who{display:flex;gap:10px;align-items:center;padding:8px 10px 12px;border-bottom:1px solid var(--border);margin-bottom:4px}.ap-who img,.ap-av{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--alt);display:grid;place-items:center;font-weight:700}
.ap-who b{display:block}.ap-who small{color:var(--muted);word-break:break-all}.count-in{background:var(--accent);color:#fff;border-radius:10px;padding:0 7px;font-size:12px;margin-inline-start:auto}
.bell-panel li.unread a b::before{content:"● ";color:var(--accent)}
@media(max-width:640px){#acctBtn{display:inline-grid}#acctBtn[hidden]{display:none}.lang-sw .ls-f{width:26px}.lang-sw .knob{width:26px}.lang-sw[aria-checked=true] .knob{transform:translateX(30px)}}
@media(max-width:480px){#bellBtn{display:inline-grid}}
/* About → Our teachers submenu */
.main-nav .has-sub{position:relative}.main-nav .caret{font-size:11px;margin-inline-start:4px;opacity:.8}
.main-nav .sub{display:none;position:absolute;top:100%;inset-inline-start:0;min-width:190px;background:var(--primary);border:1px solid rgba(234,226,183,.25);border-radius:0 0 10px 10px;padding:6px;list-style:none;margin:0;z-index:30;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.main-nav .has-sub:hover>.sub,.main-nav .has-sub:focus-within>.sub{display:block}
@media(max-width:1340px){.main-nav .sub{display:block;position:static;border:0;box-shadow:none;padding:0 0 0 16px;background:none}.main-nav .caret{display:none}}
/* live = glowing: calendar cells, dots, lists */
@keyframes liveGlow{0%,100%{box-shadow:0 0 0 0 rgba(214,40,40,.55)}50%{box-shadow:0 0 0 6px rgba(214,40,40,0),0 0 18px 2px rgba(247,127,0,.55)}}
.day.live,.ev.live,.agenda li.live,.next.live{animation:liveGlow 1.6s ease-in-out infinite;border-color:var(--accent)}.dot.live{outline:2px solid #fff;outline-offset:-2px}
.live-tag{display:inline-block;background:var(--accent);color:#fff;border-radius:10px;padding:1px 8px;font:600 11.5px/1.5 var(--sans);vertical-align:middle}
@media (prefers-reduced-motion:reduce){.day.live,.ev.live,.agenda li.live,.next.live{animation:none;box-shadow:0 0 0 3px var(--accent)}}
/* repeating events */
.rep{display:inline-block;margin-inline-end:5px;color:var(--secondary);font-weight:700}.rep-line{color:var(--muted);font-size:14px}
.ev-link{color:var(--muted);word-break:break-all;margin:10px 0 0}
/* developer credit, logo on hover / focus */
.dev-credit{position:relative}.dev-link{position:relative;color:inherit;font-weight:600;text-decoration-color:var(--secondary)}
.dev-logo{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) scale(.9);opacity:0;pointer-events:none;background:#fff;border-radius:10px;padding:8px;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:.18s}
.dev-logo img{display:block;max-width:150px;max-height:70px}.dev-link:hover .dev-logo,.dev-link:focus-visible .dev-logo{opacity:1;transform:translateX(-50%) scale(1)}
/* honeypot (hidden from people, still in the form) */
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* teacher cards link to profiles; profile page; document viewer */
.teacher h3 a{color:inherit;text-decoration:none}.teacher h3 a:hover{color:var(--accent)}.t-photo{flex-shrink:0;display:block}.teacher .more{display:inline-block;margin-top:8px}
.tp-head{display:flex;gap:24px;align-items:center}.tp-photo{width:140px;height:140px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--highlight);box-shadow:0 0 40px -8px color-mix(in srgb,var(--highlight) 60%,transparent)}
.tp-quote{margin:10px 0 0;font-style:italic;opacity:.9}.pre{white-space:pre-line}.tp-video{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r);background:#000}.tp-video iframe{width:100%;height:100%;border:0;border-radius:var(--r)}
@media(max-width:640px){.tp-head{flex-direction:column;text-align:center}}
.docs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.doc{display:flex;gap:12px;align-items:center;width:100%;text-align:start;background:var(--card);color:inherit;border:1px solid var(--border);border-radius:var(--r);padding:12px;cursor:pointer;box-shadow:none}.doc:hover{border-color:var(--secondary)}
.doc b{display:block}.doc small{color:var(--muted)}
.doc-card{max-width:960px!important}.doc-view-in{height:min(70vh,760px);display:grid;place-items:center;background:var(--alt);border-radius:8px;overflow:hidden}
.doc-view-in iframe{width:100%;height:100%;border:0}.doc-view-in img{max-width:100%;max-height:100%;object-fit:contain}
.consent-hint{display:flex;gap:6px;align-items:center;background:color-mix(in srgb,var(--highlight) 22%,var(--card));border-radius:8px;padding:8px 12px;font-size:14px}.consent-hint .ico{width:18px;height:18px}
/* ways to learn on a course page */
.way-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}.way h3{margin:8px 0 4px}.way .price b{font-size:20px}
.avail{display:flex;gap:8px;align-items:flex-start;margin-top:14px}.avail .ico{width:20px;height:20px;flex-shrink:0}
.trial{display:flex;gap:14px;align-items:center;margin-top:16px;border:2px dashed var(--secondary)}.trial .ico{width:30px;height:30px;color:var(--secondary)}.trial p{margin:2px 0 0}.trial div{flex:1}
@media(max-width:560px){.trial{flex-direction:column;text-align:center}}
.radios{border:0;padding:0;margin:10px 0}.trial-check{margin:6px 0 10px}
/* account: classes, requests, next 24 h */
.agenda .badge.small{font-size:11px;padding:1px 7px}.agenda small.pending{color:var(--accent)}.agenda small.st{font-weight:600}
.btn.small,button.small{padding:5px 10px;font-size:13px}.req-form{margin-top:8px;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--card)}.req-form input{margin-bottom:6px}
.next24{margin-bottom:22px}.again{margin:6px 0 10px}.badges{display:flex;gap:6px;flex-wrap:wrap}
/* chat panel */
.chat-panel{position:fixed;bottom:16px;inset-inline-end:16px;width:min(380px,calc(100vw - 32px));height:min(560px,calc(100vh - 100px));background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.3);z-index:45;display:flex;flex-direction:column;padding:12px}
.chat-panel[hidden]{display:none}.ch-h{display:flex;gap:8px;align-items:center;border-bottom:1px solid var(--border);padding-bottom:8px}.ch-h h2{flex:1;margin:0;font-size:18px}.ch-h .icon{color:var(--text);border-color:var(--border);width:32px;height:32px}
.ch-list{list-style:none;margin:8px 0;padding:0;overflow:auto;flex:1}.ch-list button{display:flex;gap:10px;align-items:center;width:100%;text-align:start;background:none;border:0;border-radius:8px;padding:8px;color:inherit;cursor:pointer;box-shadow:none}.ch-list button:hover{background:var(--alt)}
.ch-list b{display:block}.ch-list small{color:var(--muted)}.cav{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--alt);display:inline-grid;place-items:center;font-weight:700;flex-shrink:0}
.ch-msgs{flex:1;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:10px 2px}.cm{max-width:80%;align-self:flex-start;background:var(--alt);border-radius:12px;padding:7px 11px}.cm p{margin:0;white-space:pre-wrap;word-wrap:break-word}
.cm.me{align-self:flex-end;background:var(--primary);color:var(--cream)}.cm small{display:block;font-size:11px;opacity:.7;margin-top:2px}
.ch-form{display:flex;gap:8px;align-items:flex-end;border-top:1px solid var(--border);padding-top:8px}.ch-form textarea{flex:1;margin:0;resize:none}
.acct-panel a,.acct-panel button{justify-content:flex-start}[data-mode=dark] .acct-panel button{background:none;color:inherit}[data-mode=dark] .acct-panel .ap-out{color:var(--secondary)}
.agenda .badge,.agenda .live-tag,.agenda .row{align-self:flex-start;width:auto}
.form label.inline,.acct label.inline{display:flex;gap:8px;align-items:center;font-weight:500}.form label.inline input,.acct label.inline input{width:auto;margin:0}
/* ===== v3.5 ===== */
/* language button: only the OTHER language's flag, filling the whole button */
.lang-sw{padding:0;gap:0;width:46px;height:32px;border-radius:9px;overflow:hidden;background:none;border:2px solid rgba(234,226,183,.55);transition:transform .15s,border-color .15s}
.lang-sw .knob{display:none}.lang-sw[aria-checked=false] .uk,.lang-sw[aria-checked=true] .ps{display:none}
.lang-sw .ls-f{width:100%;height:100%;opacity:1;border-radius:0;display:block}.lang-sw .flag{width:100%;height:100%;border-radius:0;box-shadow:none}
.lang-sw:hover{border-color:var(--secondary);transform:scale(1.05)}
@media(max-width:640px){.lang-sw .ls-f{width:100%}}
/* phones: brand + Apply + menu on the first line, the icons on a second line (nothing overflows) */
@media(max-width:640px){
  :root{--head-h:110px}
  .bar{flex-wrap:wrap;row-gap:6px;justify-content:flex-start}.head-actions{display:contents}
  .brand{order:0;flex:1 1 auto;min-width:0}#applyBtn{order:1}.burger{order:2}
  .bar::after{content:"";order:3;flex-basis:100%;height:0}
  #bellBtn,#themeBtn,#langBtn,#acctBtn{order:4;display:inline-grid}#bellBtn{margin-inline-start:auto}#langBtn{display:inline-flex}
  #acctBtn[hidden],#applyBtn[hidden]{display:none}.bar>.head-actions>*{flex-shrink:0}
}
@media(max-width:420px){#themeBtn{display:inline-grid}}
/* bell: filters, per-item read / dismiss */
.bp-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:8px 0 2px}.bp-tools button{padding:4px 10px;font-size:12.5px;border-radius:14px;box-shadow:none}
.bp-tools .on{background:var(--primary);color:var(--cream)}.bp-tools .sp{flex:1}
.bell-panel li{display:flex;gap:4px;align-items:flex-start;border-bottom:1px solid var(--border)}.bell-panel li a{flex:1;border-bottom:0}
.bell-panel li .ni{display:flex;flex-direction:column;gap:2px;padding-top:8px}.bell-panel li .ni button{background:none;border:0;color:var(--muted);padding:2px 6px;font-size:13px;cursor:pointer;box-shadow:none;border-radius:6px}
.bell-panel li .ni button:hover{background:var(--alt);color:var(--text)}.bell-panel li.read a b{font-weight:500;opacity:.75}
/* chat: floating button, unread, ticks */
.chat-fab{position:fixed;bottom:18px;inset-inline-end:18px;width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;border:0;display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.28);z-index:44;cursor:pointer;padding:0}
.chat-fab svg{width:26px;height:26px;fill:currentColor}.chat-fab:hover{transform:scale(1.06);background:var(--accent)}.chat-fab[hidden]{display:none}
.chat-fab .count{top:-2px;inset-inline-end:-2px;background:var(--secondary);color:#fff}
.ch-h .tot{background:var(--accent);color:#fff;border-radius:10px;padding:0 8px;font-size:12px}
.cm small .tick{margin-inline-start:6px;letter-spacing:-3px}.cm small .tick.read{color:#4fc3f7}.cm.me small .tick.read{color:#9be7ff}
.ch-new{align-self:center;font-size:12px;color:var(--accent);border-bottom:1px solid var(--accent);padding:0 10px 2px;margin:4px 0}
.ch-h [data-back]{position:relative}.ch-h [data-back] .count{top:-6px;inset-inline-end:-6px}
@media print{.chat-fab{display:none}}
/* ===== v3.6 ===== */
/* services: larger icon with a hover lift */
.svc .rosette{width:84px;height:84px;transition:transform .25s ease,box-shadow .25s ease,background-color .25s}.svc .rosette .ico{width:40px;height:40px;transition:transform .25s ease}
.svc:hover .rosette,.svc:focus-within .rosette{transform:translateY(-4px) rotate(-6deg);background:var(--highlight);color:var(--accent)}.svc:hover .rosette .ico{transform:scale(1.12)}
@media (prefers-reduced-motion:reduce){.svc .rosette,.svc .rosette .ico{transition:none}.svc:hover .rosette{transform:none}}
/* my own classes on the home calendar */
.dot.mine{outline:2px dashed var(--secondary);outline-offset:-2px}.ev.mine{border-inline-start:3px solid var(--secondary)}
.my-tag{display:inline-block;background:var(--secondary);color:#fff;border-radius:10px;padding:1px 8px;font:600 11.5px/1.5 var(--sans);vertical-align:middle}
.team-grid.compact{margin:16px 0;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
/* ===== v3.8 "Night Recital" ===== */
/* language button: a round flag */
.lang-sw{width:40px;height:40px;border-radius:50%;border:1px solid rgba(234,226,183,.3)}.lang-sw:hover{border-color:var(--highlight);transform:none}.lang-sw[hidden]{display:none} /* v3.9.1: one website language only */
/* hero recitation strip: play · voice wave · verse as a subtitle (words light up) · reference and reciter */
.recite{grid-column:2;text-align:center;color:var(--cream)}.recite[hidden]{display:none}
.rc-row{display:flex;align-items:center;gap:16px}
.rc-play{flex-shrink:0;width:52px;height:52px;padding:0;border-radius:50%;background:var(--highlight);color:var(--night);display:grid;place-items:center;box-shadow:0 0 0 6px rgba(252,191,73,.16),0 0 40px -6px rgba(252,191,73,.7)}
.rc-play:hover{background:#FFF6D6;color:var(--night);transform:scale(1.05)}.rc-play svg{width:22px;height:22px;fill:currentColor}.rc-play .pa{display:none}.recite.playing .rc-play .pa{display:block}.recite.playing .rc-play .pl{display:none}
.rc-play[hidden]{display:none}
.rc-wave{flex:1;min-width:0;height:84px;display:block}
.rc-ar{font:400 clamp(24px,2.6vw,34px)/1.6 var(--serif);direction:rtl;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.7);margin-top:4px}
.rc-ar span{transition:color .3s,text-shadow .3s}.rc-ar span.on{color:var(--highlight);text-shadow:0 0 18px rgba(252,191,73,.6)}
.rc-en{font-size:14.5px;color:rgba(234,226,183,.72);font-style:italic}.rc-en:empty{display:none}
.rc-tc{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:rgba(234,226,183,.66);border-top:1px solid var(--line-d);padding-top:9px;margin-top:14px}.rc-tc b{color:var(--cream);font-weight:600}
.rc-tc time{font-variant-numeric:tabular-nums;direction:ltr}
@media(max-width:760px){.recite{grid-column:1}.rc-wave{height:62px}.rc-en{font-size:13px}}
/* How you learn: numbered steps (a real sequence) with a progress line */
.acts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.act{background:var(--bg);padding:36px 32px 38px;position:relative;min-height:380px;display:flex;flex-direction:column;overflow:hidden}
.act .n{font:700 128px/1 var(--serif);color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--secondary) 70%,transparent);margin-bottom:auto;transition:-webkit-text-stroke-color .3s}
[data-mode=dark] .act .n{-webkit-text-stroke-color:rgba(252,191,73,.45)}
.act h3{font-size:clamp(32px,3vw,42px);margin:26px 0 10px}.act p{color:var(--muted);margin:0;max-width:34ch}
.act::after{content:"";position:absolute;inset:auto -30% -60% -30%;height:80%;background:radial-gradient(closest-side,color-mix(in srgb,var(--highlight) 22%,transparent),transparent);opacity:0;transition:opacity .5s;pointer-events:none}
.act:hover::after{opacity:1}.act:hover .n{-webkit-text-stroke-color:var(--highlight)}
.act .meter{display:block;height:2px;background:var(--border);margin-top:28px;position:relative}.act .meter i{position:absolute;inset-block:0;inset-inline-start:0;background:var(--highlight)}
@media(max-width:760px){.act{min-height:0}.act .n{font-size:90px}}
/* calendar: "This week" (showtimes) or "Month" */
.cal-views{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--border);border-radius:999px;margin:0 0 26px}
.cal-views button{background:transparent;color:var(--text);border:0;padding:8px 18px;font-size:14.5px}.cal-views button:hover{transform:none;color:var(--text);background:color-mix(in srgb,var(--highlight) 14%,transparent)}
.cal-views button[aria-selected=true]{background:var(--text);color:var(--bg)}
.week-view[hidden],.cal-wrap[hidden]{display:none}
.wk-h{display:flex;align-items:center;gap:10px;margin-bottom:8px}.wk-h .mlbl{text-align:start}.wk-h .mlbl b{font-size:22px}
.week{border-top:1px solid var(--border)}
.wk-day{display:grid;grid-template-columns:230px 1fr;gap:12px 30px;padding:20px 0;border-bottom:1px solid var(--border);align-items:center}
.wk-d{font:700 28px/1.15 var(--serif)}.wk-d small{display:block;font:400 13.5px/1.5 var(--sans);color:var(--muted);margin-top:2px}
.wk-day.today .wk-d{color:var(--accent)}[data-mode=dark] .wk-day.today .wk-d{color:var(--highlight)}
.wk-times{display:flex;flex-wrap:wrap;gap:10px}.wk-none{color:var(--muted);font-size:14px}
.show{display:flex;gap:12px;align-items:center;padding:10px 16px;border-radius:14px;border:1px solid var(--border);font-size:14.5px;text-decoration:none;color:var(--text);background:var(--card);transition:border-color .2s,background .2s,transform .2s}
.show:hover{border-color:var(--highlight);color:var(--text);transform:translateY(-2px)}.show b{font-size:17px;font-variant-numeric:tabular-nums}.show span{color:var(--muted)}
.show.ev{border-inline-start:4px solid var(--c,var(--secondary))}.show.ev b{color:var(--secondary)}
.show.mine{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--card))}.show em{font-style:normal;font-size:12px;font-weight:600;color:#fff;background:var(--accent);border-radius:999px;padding:2px 9px}
.show.cls{background:transparent}
.show.live{animation:liveGlow 1.6s ease-in-out infinite;border-color:var(--accent)}
.wk-legend{display:flex;gap:8px 22px;flex-wrap:wrap;color:var(--muted);font-size:13.5px;margin:18px 0 0}.wk-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:7px;vertical-align:baseline}
@media(max-width:760px){.wk-day{grid-template-columns:1fr}.wk-d{font-size:24px}}
@media (prefers-reduced-motion:reduce){.show.live{animation:none;box-shadow:0 0 0 3px var(--accent)}}
/* Your teachers: closing credits — what they teach on one side, the name on the other */
.credits-sec{text-align:center;background:linear-gradient(180deg,var(--bg),var(--alt) 50%,var(--bg))}
.credits-sec .sec-head{grid-template-columns:1fr;justify-items:center;text-align:center}.credits-sec .sec-head h2{font-size:clamp(34px,4.4vw,60px)}
.cr-list{list-style:none;margin:0 auto 40px;padding:0;max-width:900px;display:grid;gap:30px}
.cr{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:baseline;text-decoration:none;color:var(--text)}
.cr .r{text-align:end;color:var(--muted);font-size:15.5px}.cr .nm{text-align:start;font:700 clamp(32px,3.4vw,48px)/1.08 var(--serif);transition:color .25s}
.cr:hover{color:var(--text)}.cr:hover .nm{color:var(--secondary)}[data-mode=dark] .cr:hover .nm{color:var(--highlight)}
.cr .nm small{display:block;font:400 14.5px/1.5 var(--sans);color:var(--muted);margin-top:6px}
@media(max-width:640px){.cr{grid-template-columns:1fr;gap:4px}.cr .r,.cr .nm{text-align:center}}
/* ===== v3.9 ===== */
/* Hijri dates carry a crescent so they read as Hijri at a glance */
.hj::before,.day .hd:not(:empty)::before{content:"";display:inline-block;width:.95em;height:.95em;margin-inline-end:.28em;vertical-align:-.12em;background:var(--moon,var(--secondary));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.2 2.6A9.6 9.6 0 1 0 21.4 17 7.8 7.8 0 0 1 15.2 2.6z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.2 2.6A9.6 9.6 0 1 0 21.4 17 7.8 7.8 0 0 1 15.2 2.6z'/%3E%3C/svg%3E") center/contain no-repeat}
[dir=rtl] .hj::before,[dir=rtl] .day .hd:not(:empty)::before{transform:scaleX(-1)}
[data-mode=dark] .hj::before,[data-mode=dark] .day .hd:not(:empty)::before{--moon:var(--highlight)}
.day .hd:not(:empty)::before{width:.9em;height:.9em;margin-inline-end:.15em}
.wk-span{color:var(--muted);font-size:12.5px;font-weight:600}
/* Your teachers (home): a reel of spotlight cards you slide through */
.reel{display:grid;grid-auto-flow:column;grid-auto-columns:min(760px,86%);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none;overscroll-behavior-x:contain}
.reel::-webkit-scrollbar{display:none}
.spot{scroll-snap-align:start;display:grid;grid-template-columns:42% 1fr;border-radius:24px;overflow:hidden;background:var(--card);border:1px solid var(--border);min-height:360px;text-decoration:none;color:var(--text);transition:border-color .3s}
.spot:hover{border-color:var(--highlight);color:var(--text)}
.pt{position:relative;overflow:hidden;background:radial-gradient(70% 60% at 65% 18%,color-mix(in srgb,var(--tone,var(--primary)) 80%,#fff 20%),var(--tone,var(--primary)) 42%,var(--night) 95%)}
.pt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pt .ini{position:absolute;inset:0;display:grid;place-items:center;font:700 clamp(80px,9vw,140px)/1 var(--serif);color:rgba(255,249,230,.88);text-shadow:0 0 50px color-mix(in srgb,var(--highlight) 55%,transparent)}
.pt::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 30%,transparent 40%,rgba(0,10,16,.5))}
.spot .tx{padding:34px 32px;display:flex;flex-direction:column;min-width:0}
.spot small,.scene small{color:var(--secondary);font-size:14px}[data-mode=dark] .spot small,[data-mode=dark] .scene small{color:var(--highlight)}
.spot h3{font-size:clamp(32px,3vw,42px);margin:6px 0 10px;line-height:1.1}.spot q{font:400 20px/1.5 var(--serif);quotes:none}
.spot .meta{margin-top:auto;padding-top:20px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap}
.spot .meta span{color:var(--muted);font-size:14px}.spot .meta b{color:var(--text);font-weight:600}.spot .meta .go{color:var(--secondary);font-weight:600}[data-mode=dark] .spot .meta .go{color:var(--highlight)}
.reel-ctl{display:flex;align-items:center;gap:12px;margin-top:22px}.reel-ctl .sec-btn{width:46px;height:46px;padding:0;border-radius:50%}
.reel-bar{flex:1;height:2px;background:var(--border);position:relative}.reel-bar i{position:absolute;inset-block:0;inset-inline-start:0;width:0;background:var(--highlight);transition:width .3s}
@media(max-width:760px){.spot{grid-template-columns:1fr}.spot .pt{min-height:240px}.reel{grid-auto-columns:88%}.reel-ctl .more-t{width:100%;order:3;text-align:center}}
/* Our teachers page: one scene per teacher, alternating sides */
.scenes{display:block}
.scene{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:56px 0;border-bottom:1px solid var(--border)}
.scene:nth-child(even) .pt{order:2}
.scene .pt{aspect-ratio:4/5;border-radius:28px;max-height:560px;box-shadow:0 30px 80px -30px rgba(0,0,0,.55)}
.scene h2{font-size:clamp(42px,5vw,72px);margin:8px 0 14px;line-height:1.05}.scene p{color:var(--muted);font-size:18px;max-width:46ch}
.teaches{margin:22px 0 26px;padding:0;list-style:none;display:grid;gap:8px}.teaches a{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border:1px solid var(--border);border-radius:14px;text-decoration:none;color:var(--text)}
.teaches a:hover{border-color:var(--highlight);color:var(--text)}.teaches span{color:var(--muted);font-size:14px;text-align:end}
.scene .row{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:860px){.scene{grid-template-columns:1fr;gap:24px;padding:40px 0}.scene:nth-child(even) .pt{order:0}.scene .pt{max-height:420px}}
/* About: the story in chapters beside a sticky title, then the team as round portraits */
.chap{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:70px}
.chap .st{position:sticky;top:calc(var(--hh,var(--head-h)) + 30px);align-self:start}.chap .st h2{font-size:clamp(42px,5vw,72px);line-height:1}.chap .st p{color:var(--muted)}
.ch{padding:0 0 64px;padding-inline-start:40px;border-inline-start:1px solid var(--border);position:relative}.ch:last-child{padding-bottom:0}
.ch::before{content:"";position:absolute;inset-inline-start:-6px;top:10px;width:11px;height:11px;border-radius:50%;background:var(--highlight);box-shadow:0 0 18px var(--highlight)}
.ch small{color:var(--secondary);font-size:14px;font-weight:600}[data-mode=dark] .ch small{color:var(--highlight)}
.ch h3{font-size:clamp(30px,3vw,40px);margin:6px 0 14px}.ch p,.ch .prose{color:var(--muted);font-size:17.5px;max-width:62ch}
.ch blockquote{margin:16px 0 0;font:400 clamp(24px,2.4vw,30px)/1.45 var(--serif);color:var(--text)}
.strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:28px;text-align:center}
.strip a{text-decoration:none;color:var(--text);display:block}.strip .pt{aspect-ratio:1;border-radius:50%;margin:0 auto 16px;max-width:220px;box-shadow:0 0 0 1px var(--border),0 0 50px -10px color-mix(in srgb,var(--highlight) 45%,transparent);transition:transform .4s}
.strip a:hover .pt{transform:scale(1.04)}.strip .pt .ini{font-size:72px}.strip b{display:block;font:700 24px/1.15 var(--serif)}.strip span{color:var(--muted);font-size:14px}
@media(max-width:860px){.chap{grid-template-columns:1fr;gap:20px}.chap .st{position:static}.strip{grid-template-columns:1fr 1fr;gap:18px}.ch{padding-inline-start:26px}}