/* The first authoritative shell layer. Layered important declarations intentionally
   outrank old unlayered page overrides: no specificity escalation or body spacer.
   --ds-header-h is the FULL measured border box, already including safe-area and
   live banner. Never add safe-area-inset-top to it a second time. */
@layer ds-page-shell {
 :root{--ds-page-head-gap:32px;--ds-page-head-inline:24px;--ds-page-inset:calc(var(--ds-header-h,calc(64px + var(--ds-safe-top,0px))) + var(--ds-page-head-gap))}
 /* The nav is outside page roots. Some legacy pages set border-box globally,
    others do not; without this its safe-area padding adds to its height twice. */
 html body .ds-pwa-bottom-nav,html body .ds-pwa-bottom-nav *{box-sizing:border-box!important}
 html body .ds-pwa-bottom-nav{height:calc(var(--ds-app-nav-h,64px) + var(--ds-safe-bottom,0px))!important;min-height:calc(var(--ds-app-nav-h,64px) + var(--ds-safe-bottom,0px))!important}
 /* Floating actions must clear the whole app navigation, including its safe area. */
 html body .ds-back-to-top{bottom:calc(var(--ds-app-nav-h,0px) + var(--ds-safe-bottom,0px) + 18px)!important}
 /* Constrain native iOS time/date controls instead of clipping their overflow. */
 html body [data-ds-page-root] :is(input:not([type=checkbox]):not([type=radio]),select,textarea){box-sizing:border-box!important;min-width:0!important;max-width:100%!important}
 html body #ds-student-dashboard .dsg-activity :is(form,article){box-sizing:border-box!important;min-width:0!important;max-width:100%!important}
 html body #ds-student-dashboard .dsg-activity form{grid-template-columns:minmax(0,1fr) minmax(110px,150px) auto!important}
 html body #ds-student-dashboard [data-reminder-time]{width:100%!important;min-inline-size:0!important;max-inline-size:100%!important;display:block!important}
 html body #ds-student-dashboard [data-reminder-time]::-webkit-date-and-time-value{min-width:0;width:100%;text-align:center}
 html body #ds-student-dashboard .dsg-reminder-toggle{position:relative!important}
 html body #ds-student-dashboard .dsg-reminder-toggle>input{width:1px!important;height:1px!important;inline-size:1px!important;block-size:1px!important;min-width:0!important;min-height:0!important;max-width:1px!important;max-height:1px!important;padding:0!important;margin:0!important;border:0!important}
 html body #ds-student-dashboard .dsdash-hero[data-ds-page-hero]{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding-inline:0!important}
 html body #ds-student-dashboard .dsdash-profilebar{display:grid!important;grid-template-columns:minmax(0,1fr) 64px!important;gap:20px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;align-items:start!important;overflow:visible!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 html body #ds-student-dashboard .dsdash-profile-main{grid-column:1!important;grid-row:1!important;min-width:0!important}
 html body #ds-student-dashboard .dsdash-avatar{grid-column:2!important;grid-row:1!important}
 html body #ds-student-dashboard .dsdash-hero-actions{grid-column:1/-1!important}
 html body #ds-student-dashboard #dsdash-name{overflow-wrap:anywhere!important}
 @media(max-width:760px){html body #ds-student-dashboard .dsdash-profilebar{grid-template-columns:minmax(0,1fr) 40px!important;gap:16px!important}html body #ds-student-dashboard .dsdash-avatar{width:40px!important;height:40px!important;border-radius:12px!important}}
 @media(max-width:760px){html body #ds-student-dashboard .dsg-activity form{grid-template-columns:minmax(0,1fr)!important}html body #ds-student-dashboard .dsg-activity form>button{width:100%!important}}
 /* Phones use hardware playback volume, also when rotated into landscape.
    Keep mute/unmute, seeking and the teacher's microphone/source mixer intact. */
 @media(max-width:760px),(hover:none) and (pointer:coarse){
  html body :is(.dsq-volwrap,.dsq-player-volbig,.ds-video-volume,.ds-tool-volume,.qm-volume-wrap,.live-player-volume){display:none!important}
  html body #dsq-player .dsq-player-seekbig{grid-template-columns:auto minmax(0,1fr)!important;grid-template-areas:none!important}
 }
 /* Reserve space before the deferred adapters run (also when JS is delayed).
    These are outer page canvases, never a video, verse face or modal. */
 html body :is([data-ds-page-inset],.ds-home,#ds-quran,#ds-learnArabic,#ds-dua-all,#ds-game-home,#ds-arabic-game-all,#ds-guides-all,#ds-wunder-page,#ds-prayer-guide,#quran-maker,#ds-library,#dsf-app,#ds-learning-studio,#ds-student-dashboard,#ds-tickets,#ds-ia,#ds-verify,#ds-certificate,#ds-course-shares,#ds-system,#dsa-suite,#ds-institution,#ds-contact-hero,.dsta,.dsm,.dslb,.dsn-page,.dspt-page,.dsa-admin,body>main.wrap,#ds-app-available-courses>.ds-catalog-wrap,#ds-app-courses>.ds-app-wrap,#ds-app-course-page>.ds-course-stage,#ds-app-lesson-page>.ds-lesson-stage,#ds-app-ijazat>.ds-app-wrap,#ds-app-teachers>.ds-app-wrap,#ds-app-exams>.ds-app-wrap,#ds-app-profile>.ds-app-wrap,#ds-app-admin>.ds-app-wrap,#ds-account-page>.ds-account-wrap){padding-top:var(--ds-page-inset)!important;margin-top:0!important;box-sizing:border-box!important}
 html body [data-ds-page-hero]:not([data-ds-page-inset]){padding-top:0!important}
 /* An inset profile card is not an unframed editorial hero. Its avatar needs
    the same breathing room on every edge, including in iOS standalone mode. */
 html body [data-ds-page-hero]{min-height:0!important;transform:none!important;animation:none!important;opacity:1!important}
 html body [data-ds-page-title]{font-family:var(--ds-font,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif)!important;font-size:clamp(32px,4vw,48px)!important;font-weight:650!important;line-height:1.15!important;letter-spacing:-.035em!important;margin:0!important;max-width:26ch!important;text-wrap:balance!important;overflow-wrap:normal!important;word-break:normal!important}
 html body [data-ds-page-kicker]{display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important;width:fit-content!important;max-width:100%!important;margin:0 0 14px!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;font:650 12px/1.5 var(--ds-font,system-ui,sans-serif)!important;letter-spacing:.105em!important;text-transform:uppercase!important;color:var(--ds-accent)!important;text-decoration:none!important;white-space:normal!important;animation:none!important;transform:none!important}
 html body [data-ds-page-kicker]::before{content:""!important;display:block!important;position:static!important;inset:auto!important;flex:0 0 8px!important;width:8px!important;height:8px!important;border-radius:50%!important;border:0!important;background:var(--ds-accent)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--ds-accent) 14%,transparent)!important;opacity:1!important;animation:none!important;transform:none!important}
 html body [data-ds-page-kicker]>.dsg-kicker-dot{display:none!important}
 html body [data-ds-page-lead]{display:block!important;font:400 16px/1.7 var(--ds-font,system-ui,sans-serif)!important;color:var(--ds-muted2)!important;max-width:65ch!important;margin:16px 0 0!important;letter-spacing:0!important;overflow-wrap:normal!important}
 html body :is([data-ds-page-title],[data-ds-page-lead],[data-ds-page-kicker])>span{font:inherit!important;letter-spacing:inherit!important;color:inherit!important}
 html body [data-ds-page-lead]+:is(div,nav)[class*="actions"]{margin-top:20px!important}
 /* Keep page-specific content cards and learning artwork. The page heading
    itself is the same quiet editorial block everywhere. */
 html body :is(.ds-catalog-hero,.ds-my-hero,.ds-course-hero,.ds-account-hero,.ds-teachers-hero,.ds-ijaza-hero,.ds-exam-hero-card,.dss-hero,.dsl-hero,.dslb-hero,.ds-dua-hero,.pr-hero,.ds-hero,.dsi-hero,.ds-shares-page>header)[data-ds-page-hero]{padding-inline:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 html body :is(.ds-teachers-hero,.ds-dua-hero)[data-ds-page-hero]::before,html body :is(.ds-teachers-hero,.ds-dua-hero)[data-ds-page-hero]::after{content:none!important}
 html body #ds-prayer-guide>.pr-shell{padding-top:0!important}
 /* Course artwork is intentional, unlike decorative page-heading panels. */
 html body #ds-app-course-page .ds-course-hero[data-ds-page-hero]{min-height:480px!important;padding-top:150px!important;padding-bottom:72px!important;max-width:760px!important}
 html body #ds-app-course-page .ds-course-hero [data-ds-page-title]{color:#fff!important;text-shadow:0 2px 18px #0006!important}
 html body #ds-app-course-page .ds-course-hero [data-ds-page-lead]{color:#f1f5f9!important;text-shadow:0 1px 8px #0008!important}
 html[data-theme="light"] body #ds-app-course-page .ds-course-hero [data-ds-page-title]{color:#101827!important;text-shadow:none!important}
 html[data-theme="light"] body #ds-app-course-page .ds-course-hero [data-ds-page-lead]{color:#253247!important;text-shadow:none!important}
 @media(max-width:760px){html body #ds-app-course-page .ds-course-hero[data-ds-page-hero]{min-height:440px!important;padding-top:130px!important;padding-bottom:56px!important}html body #ds-app-course-page .ds-course-hero-bg{background-position:62% top!important}}
 html body #ds-guides-all>.ds-wrap{padding-top:0!important}
 /* The Wunder heading is inside a card: its kicker needs the same inset on
    every edge, including when the shared mobile shell removes outer gutters. */
 html body #ds-quran .dsq-app-hero{padding-inline:0!important;margin-top:0!important;margin-bottom:24px!important}
 html body #ds-quran .dsq-suwar-index{margin-top:0!important}
 html body #ds-app-available-courses .ds-catalog-shell{display:flex!important;flex-direction:column!important}
 html body #ds-app-available-courses .ds-catalog-hero{order:-1!important}
 html body .ds-catalog-stat :is(span,small){word-break:normal!important;overflow-wrap:normal!important}
 @media(max-width:1050px){
  :root{--ds-page-head-gap:24px;--ds-page-head-inline:20px}
  html body [data-ds-page-title]{font-size:32px!important}
  html body [data-ds-page-lead]{font-size:14px!important}
  html body [data-ds-page-kicker]{font-size:11px!important;margin-bottom:12px!important}
  html body :is(.ds-home-intro,.pr-hero-copy){align-self:start!important}
  html body #ds-quran .dsq-app-hero{padding-bottom:0!important;gap:20px!important}
  html body .ds-catalog-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  html body .ds-catalog-stat{padding:12px 8px!important}
  html body .ds-catalog-stat>span{font:500 11px/1.4 var(--ds-font,system-ui,sans-serif)!important;white-space:nowrap!important}
 }
 @media print{html body :is([data-ds-page-inset],#ds-certificate,#ds-prayer-guide)[data-ds-page-inset]{padding-top:0!important}}

 /* One column for every page: the head and the content start at the same edge
    everywhere. Outer wrappers no longer carry a page margin of their own. */
 :root{--ds-page-w:1216px;--ds-gutter:max(24px,var(--ds-safe-left,0px))}
 @media(max-width:1050px){:root{--ds-gutter:max(20px,var(--ds-safe-left,0px))}}
 html body :is(.dsm-wrap,.ds-account-wrap,.ds-home,#ds-contact-hero>.wrap,#ds-guides-all>.ds-wrap,#ds-wunder-page .ds-wrap,main.ds-info,main.dsdev,main.dua-library,.pr-shell,main#ds-library,.dspt-page,body>main.wrap,main#ds-qibla,main.dc-page,main.srf,.dsg-container,.dsag-container,#ds-learnArabic,.ds-catalog-shell,.ds-course-shell,.ds-app-shell,.dsdash-shell,main#ds-learning-studio,main.ds-onsite,.iv-wrap,.dc-wrap,.dslb-wrap,main#ds-live,.dsf-wrap,main#messages,main.permission,.tk-wrap,.ia-wrap,main.ds-shares-page,main.dsta,main#ds-institution,main.lta,main.dsa-admin,main.dsc,.ds-admin-shell,main.dh-reader,.qm-shell,.dsq-container,main.dsn-page){
  box-sizing:border-box!important;width:100%!important;max-width:calc(var(--ds-page-w) + 2*var(--ds-gutter))!important;margin-inline:auto!important;padding-inline:var(--ds-gutter)!important;
 }
 html body :is(main.dsm,.ds-catalog-wrap,.ds-app-wrap,.ds-course-stage,#ds-student-dashboard,#ds-prayer-guide,#ds-game-home,#ds-arabic-game-all,main#quran-maker,main#ds-verify,main.dslb,main#dsf-app,main#ds-tickets,main#ds-ia,main#ds-system,main#dsa-suite,main#ds-certificate,#ds-contact-hero,#ds-guides-all,#ds-wunder-page,#ds-quran){padding-inline:0!important;max-width:none!important}
 /* Reading width and narrow tools stay, below the same head edge. */
 html body main.ds-info>:not(header){max-width:850px!important}
 html body main#ds-qibla>:not(header),html body main.permission>:not(header),html body main.dsn-page>:not(header){max-width:760px!important;margin-inline:0!important}
 html body .iv-wrap>:not(header){max-width:820px!important;margin-inline:0!important}

 /* The page head, identical everywhere: dot and section, title, lead. No panel, no frame, left aligned. */
 html body :is(main.ds-info,main.dsdev,main.dua-library,main#ds-qibla,main.dc-page,main.srf,main.ds-onsite,main.dh-reader,main#messages,main.permission,main.lta,main.dsc,main#ds-live,main.dsn-page,main#ds-institution,main.dsa-admin,main#ds-learning-studio,main.ds-shares-page,main.dsta,#ds-contact-hero,main#ds-library){padding-top:var(--ds-page-inset)!important;margin-top:0!important}
 html body #ds-game-home,html body #ds-arabic-game-all,html body #ds-contact-hero>.wrap,html body #ds-wunder-page #ds-hero>.ds-wrap{padding-top:0!important}
 html body #ds-wunder-page{padding-top:var(--ds-page-inset)!important}
 html body [data-ds-page-hero]{margin:0 0 clamp(20px,2.4vw,32px)!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;text-align:left!important;overflow:visible!important}
 html body [data-ds-page-hero]::before,html body [data-ds-page-hero]::after{content:none!important}
 html body [data-ds-page-hero] :is([data-ds-page-title],[data-ds-page-lead],[data-ds-page-kicker]){margin-inline:0!important;text-align:left!important;justify-content:flex-start!important}
 html body [data-ds-page-hero] :is(.dsag-brand,.ds-laHeroLeft,.ds-profile-hero-main,.dsag-titlebox){padding:0!important;margin:0!important;border:0!important;background:transparent!important;box-shadow:none!important;text-align:left!important}
 html body :is(.ds-wrap,.wrap,.dsag-top,.ds-laHero):has([data-ds-page-title]){background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding-block:0!important}
 html body :is(.dsag-top,.ds-laHero):has([data-ds-page-title]){padding-inline:0!important;margin-inline:0!important}
 html body :is(.dslb-hero,.pr-hero,.srf-hero,.dc-hero,.os-hero,.dsc-heading,.dsa-heading,.dm-heading,.tk-head,.ia-head,.live-page-head,.ds-my-hero,.ds-admin-hero-row,.ds-ijaza-hero,.ds-teachers-hero,.dss-hero,.dsg-hero){align-items:start!important}
 html body .ds-home-intro{align-self:start!important}
 html body main.dsn-page{display:block!important;min-height:0!important}
 html body main.dsn-page>header{width:100%!important;margin-inline:0!important}
 html body main.dsn-page .dsn-card{margin:0!important;width:100%!important;max-width:620px!important}
 html body .pr-hero-copy{align-self:start!important}
 html body [data-ds-page-kicker-old]{display:none!important}
 html body [data-ds-page-followup]{margin-top:0!important;margin-bottom:24px!important}
 /* What used to stand beside or before the title moves behind it. */
 html body #ds-game-home .dsg-hero[data-ds-page-hero]{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,420px)!important;gap:32px!important;align-items:start!important}
 html body #ds-game-home .dsg-copy{order:-1!important}
 html body #ds-arabic-game-all .dsag-brand>:not(.dsag-titlebox){display:none!important}
 html body #ds-learnArabic .ds-laBadge{display:none!important}
 html body #ds-learnArabic .ds-laHeroLeft{display:block!important}
 html body #ds-app-profile .ds-profile-hero-main{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:20px!important;align-items:start!important}
 html body #ds-app-profile .ds-profile-hero-text{grid-column:1!important;grid-row:1!important}
 /* Course artwork stays the one deliberate exception. */
 html body #ds-app-course-page .ds-course-hero[data-ds-page-hero]{margin-bottom:0!important}
 @media(max-width:1050px){
  html body #ds-game-home .dsg-hero[data-ds-page-hero]{grid-template-columns:minmax(0,1fr)!important}
 }
}