/* 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 #ds-app-profile .ds-profile-hero-card[data-ds-page-hero]{padding:28px!important}
 html body #ds-game-home .dsg-hero[data-ds-page-hero]{padding:clamp(24px,3vw,40px)!important}
 @media(max-width:760px){html body #ds-app-profile .ds-profile-hero-card[data-ds-page-hero]{padding:20px!important}}
 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-wunder-page #ds-hero>.ds-wrap{padding:clamp(24px,4vw,48px)!important}
 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-inset]{padding-left:max(var(--ds-page-head-inline),var(--ds-safe-left,0px))!important;padding-right:max(var(--ds-page-head-inline),var(--ds-safe-right,0px))!important;width:100%!important}
  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(.dsq-container,.dsf-wrap,.pr-shell,#ds-guides-all>.ds-wrap){width:100%!important;padding-inline:0!important}
  html body #ds-wunder-page #ds-hero>.ds-wrap{width:100%!important}
  html body .ds-home-intro{align-self:start!important}
  html body #ds-learnArabic .ds-laHeroLeft{padding:0!important;display:block!important;background:transparent!important;border:0!important}
  html body #ds-learnArabic .ds-laBadge{display:none!important}
  html body #ds-game-home .dsg-copy{order:-1!important}
  html body #ds-game-home .dsg-hero{padding-inline:0!important;border:0!important;background:none!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}}
}