/* DeenStudy shared components. Pages keep their class names; this layer gives every
   button, tab, card, form, table, notice and dialog the same look in all palettes.
   Layered !important outranks old page overrides without a specificity race.
   Explicit component lists only: verse faces, players, certificates and exports stay untouched. */
@layer ds-unified {
 html{
  --ds-radius-control:10px;--ds-radius-panel:16px;--ds-control-h:44px;
  --ds-line:color-mix(in srgb,var(--ds-text) 13%,transparent);
  --ds-tint:color-mix(in srgb,var(--ds-text) 5%,transparent);
  --ds-tint-accent:color-mix(in srgb,var(--ds-accent) 13%,transparent);
 }

 /* Light mode: text colours reach 4.5:1 on page and card in every palette. Solid accents carry white. */
 html[data-theme="light"]{
  --ds-on-accent:#fff!important;--ds-danger:#c81e1e!important;
  --ds-muted:color-mix(in srgb,var(--ds-text) 66%,var(--ds-bg))!important;
  --ds-muted2:color-mix(in srgb,var(--ds-text) 78%,var(--ds-bg))!important;
 }
 html[data-theme="light"][data-ds-palette="orange"],html[data-theme="light"]:not([data-ds-palette]){--ds-accent:#bd470a!important;--ds-accent2:#bd470a!important}
 html[data-theme="light"][data-ds-palette="green"]{--ds-accent:#117f3a!important;--ds-accent2:#117f3a!important}
 html[data-theme="light"][data-ds-palette="gold"]{--ds-accent:#a95d05!important;--ds-accent2:#a95d05!important}
 html[data-theme="light"]:is([data-ds-palette="teal"],[data-ds-palette="default"]){--ds-accent:#0b7c72!important;--ds-accent2:#0b7c72!important}
 html[data-theme="light"]:is([data-ds-palette="red"],[data-ds-palette="rot"]){--ds-accent:#cd2323!important;--ds-accent2:#cd2323!important}

 html[data-theme="light"]{--ds-accent3:var(--ds-accent)!important}
 html body main :is(.dsc-upload-button,.srf-search-card button[type=submit]){background:var(--ds-accent)!important;color:var(--ds-on-accent,#000)!important}
 html body main :is(.dsc-upload-button,.srf-search-card button[type=submit]) *{color:inherit!important}
 html body main .ds-more{color:var(--ds-accent)!important}
 html body #ds-prayer-guide .pr-hero-aside{background:var(--ds-card)!important}

 html body #ds-game-home .dsg-card.is-active{background:var(--ds-card)!important;background-image:none!important;border-color:color-mix(in srgb,var(--ds-accent) 45%,transparent)!important;color:var(--ds-text)!important}
 html body #ds-game-home .dsg-card.is-active :is(.dsg-card-title,.dsg-card-title *,.dsg-card-body){color:var(--ds-text)!important}
 html body #ds-game-home .dsg-card.is-active .dsg-card-meta{color:var(--ds-muted2)!important}

 /* Home and Wunder re-declare the palette on their sections; give them the readable light values too. */
 html[data-theme="light"][data-ds-palette="orange"],html[data-theme="light"]:not([data-ds-palette]){--ds-acc-l:#bd470a}
 html[data-theme="light"][data-ds-palette="green"]{--ds-acc-l:#117f3a}
 html[data-theme="light"][data-ds-palette="blue"]{--ds-acc-l:#2563eb}
 html[data-theme="light"][data-ds-palette="gold"]{--ds-acc-l:#a95d05}
 html[data-theme="light"]:is([data-ds-palette="purple"],[data-ds-palette="lila"]){--ds-acc-l:#7c3aed}
 html[data-theme="light"]:is([data-ds-palette="teal"],[data-ds-palette="default"]){--ds-acc-l:#0b7c72}
 html[data-theme="light"]:is([data-ds-palette="red"],[data-ds-palette="rot"]){--ds-acc-l:#cd2323}
 html[data-theme="light"][data-ds-palette="basic"]{--ds-acc-l:#18181b}
 html[data-theme="light"] body :is(main.ds-homepage>section,main.ds-homepage>section>*,#ds-wunder-page,#ds-wunder-page section,#deenstudy-wunder-block){
  --ds-accent:var(--ds-acc-l)!important;--ds-accent2:var(--ds-acc-l)!important;--accent:var(--ds-acc-l)!important;--accent2:var(--ds-acc-l)!important;--dsw-accent:var(--ds-acc-l)!important;--dsw-accent2:var(--ds-acc-l)!important;
  --ds-muted:color-mix(in srgb,var(--ds-text) 66%,var(--ds-bg))!important;--ds-muted2:color-mix(in srgb,var(--ds-text) 78%,var(--ds-bg))!important;--ds-on-accent:#fff!important;
 }

 /* Plain links in content never fall back to browser blue. */
 html body main a:not([class]){color:var(--ds-accent)}

 /* Texts with plain data-lang spans (legal info pages). */
 html[data-lang="de"] body main span[data-lang="en"],html[data-lang="en"] body main span[data-lang="de"],
 html:not([data-lang]) body main span[data-lang="en"]{display:none!important}

 /* --- Buttons --- */
 html body :is(main,#ds-footer,dialog,.ds-modal-portal) :is(.ds-app-btn,.ds-btn,.ds-mini-btn,.dsi-btn,.dss-btn,.dsq-btn,.live-button,.qm-btn,.dspt-btn,.os-btn,.sy-btn,.ia-btn,.dsf-btn,.dc-button,.dc-btn,.dsdash-btn,.tk-btn,.iv-btn,.iv-link,.ds2-btn,.pr-button,.dsg-btn,.rg-btn,.as-btn,.dsl-btn,.sbtn,.ds-dua-btn,.ds-filter-btn,.ds-complete-btn,.ds-watch-btn,.ds-lesson-nav-btn,.btn){
  display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box!important;
  min-height:var(--ds-control-h)!important;padding:0 16px!important;margin:0;max-width:100%;
  border:1px solid var(--ds-line)!important;border-radius:var(--ds-radius-control)!important;
  background:var(--ds-tint)!important;background-image:none!important;color:var(--ds-text)!important;
  box-shadow:none!important;transform:none!important;text-decoration:none!important;text-shadow:none!important;
  font:600 14px/1.25 var(--ds-font)!important;letter-spacing:0!important;text-transform:none!important;
  cursor:pointer;transition:background var(--ds-motion-fast,140ms),border-color var(--ds-motion-fast,140ms)!important;
 }
 html body :is(main,#ds-footer,dialog,.ds-modal-portal) :is(.ds-mini-btn,.sbtn){min-height:36px!important;padding:0 12px!important;font-size:13px!important}
 html body :is(main,#ds-footer,dialog,.ds-modal-portal) :is(.ds-app-btn,.ds-btn,.ds-mini-btn,.dsi-btn,.dss-btn,.dsq-btn,.live-button,.qm-btn,.dspt-btn,.os-btn,.sy-btn,.ia-btn,.dsf-btn,.dc-button,.dc-btn,.dsdash-btn,.tk-btn,.iv-btn,.iv-link,.ds2-btn,.pr-button,.dsg-btn,.rg-btn,.as-btn,.dsl-btn,.sbtn,.ds-dua-btn,.ds-filter-btn,.ds-complete-btn,.ds-watch-btn,.ds-lesson-nav-btn,.btn):hover:not(:disabled){
  background:var(--ds-tint-accent)!important;border-color:color-mix(in srgb,var(--ds-accent) 45%,transparent)!important;transform:none!important;box-shadow:none!important;
 }
 /* primary */
 html body :is(main,#ds-footer,dialog,.ds-modal-portal) :is(.ds-app-btn,.ds-btn,.ds-mini-btn,.dsi-btn,.dss-btn,.dsq-btn,.live-button,.qm-btn,.dspt-btn,.os-btn,.sy-btn,.ia-btn,.dsf-btn,.dc-button,.dc-btn,.dsdash-btn,.tk-btn,.iv-btn,.ds2-btn,.pr-button,.dsg-btn,.rg-btn,.as-btn,.dsl-btn,.btn):is(.primary,.is-primary,.dsi-primary,.dsq-primary,.dc-primary,.live-button-primary,.dsdash-btn-main,.dsg-btn-primary,.ds-dua-btn-primary,.rg-btn-primary,.as-btn-primary,.pr-button-primary),
 html body main :is(.dsa-primary,.dc-primary),html body #ds-footer .dsn-submit{
  background:var(--ds-accent)!important;border-color:var(--ds-accent)!important;color:var(--ds-on-accent,#000)!important;
 }
 html body :is(main,#ds-footer,dialog,.ds-modal-portal) :is(.ds-app-btn,.ds-btn,.ds-mini-btn,.dsi-btn,.dss-btn,.dsq-btn,.live-button,.qm-btn,.dspt-btn,.os-btn,.sy-btn,.ia-btn,.dsf-btn,.dc-button,.dc-btn,.dsdash-btn,.tk-btn,.iv-btn,.ds2-btn,.pr-button,.dsg-btn,.rg-btn,.as-btn,.dsl-btn,.btn):is(.primary,.is-primary,.dsi-primary,.dsq-primary,.dc-primary,.live-button-primary,.dsdash-btn-main,.dsg-btn-primary,.ds-dua-btn-primary,.rg-btn-primary,.as-btn-primary,.pr-button-primary):hover:not(:disabled){
  background:color-mix(in srgb,var(--ds-accent) 86%,var(--ds-text))!important;border-color:transparent!important;color:var(--ds-on-accent,#000)!important;
 }
 /* quiet and danger */
 html body main :is(.ds-app-btn,.ds-mini-btn,.dspt-btn,.live-button,.pr-button,.dsg-btn):is(.ghost,.live-button-quiet,.pr-button-quiet,.dsg-btn-secondary){background:transparent!important}
 html body main :is(.ds-app-btn,.ds-mini-btn,.sy-btn,.live-button):is(.danger,.danger-soft,.live-button-danger){
  background:color-mix(in srgb,var(--ds-danger,#ef4444) 12%,transparent)!important;border-color:color-mix(in srgb,var(--ds-danger,#ef4444) 42%,transparent)!important;
  color:color-mix(in srgb,var(--ds-danger,#ef4444) 72%,var(--ds-text))!important;
 }
 html body main :is(.ds-app-btn,.ds-btn,.ds-mini-btn,.dsi-btn,.dss-btn,.dsq-btn,.live-button,.qm-btn,.dspt-btn,.os-btn,.sy-btn,.ia-btn,.dsf-btn,.dc-button,.dc-btn,.dsdash-btn,.tk-btn,.iv-btn,.pr-button,.dsg-btn):is(:disabled,.is-disabled){opacity:.5!important;cursor:not-allowed!important}

 /* --- Tabs: one segmented control --- */
 html body main :is(.ds-tabs,.ds-subtabs,.ds-profile-tabs,.ds-my-detail-tabs,.ds-admin-tabs,.ds-admin-subtabs,.dss-tabs,.dss-role-tabs,.srf-tabs,.lta-tabs,.live-segmented,[role="tablist"]){
  display:flex;flex-direction:row!important;flex-wrap:wrap!important;gap:4px!important;width:fit-content;max-width:100%;box-sizing:border-box;
  margin-block:0 20px;padding:4px!important;overflow:visible!important;
  border:1px solid var(--ds-line)!important;border-radius:calc(var(--ds-radius-control) + 4px)!important;background:var(--ds-tint)!important;box-shadow:none!important;
 }
 html body main :is(.ds-tabs,.ds-subtabs,.ds-profile-tabs,.ds-my-detail-tabs,.ds-admin-tabs,.ds-admin-subtabs,.dss-tabs,.dss-role-tabs,.srf-tabs,.lta-tabs,.live-segmented,[role="tablist"])>:is(button,a,[role="tab"]){
  flex:0 1 auto!important;width:auto!important;min-width:0;min-height:40px!important;padding:0 14px!important;margin:0!important;display:inline-flex;align-items:center;justify-content:center;
  border:0!important;border-radius:var(--ds-radius-control)!important;background:transparent!important;background-image:none!important;box-shadow:none!important;
  color:var(--ds-muted2)!important;font:600 14px/1.2 var(--ds-font)!important;letter-spacing:0!important;text-transform:none!important;white-space:nowrap;text-decoration:none!important;transform:none!important;
 }
 html body main :is(.ds-tabs,.ds-subtabs,.ds-profile-tabs,.ds-my-detail-tabs,.ds-admin-tabs,.ds-admin-subtabs,.dss-tabs,.dss-role-tabs,.srf-tabs,.lta-tabs,.live-segmented,[role="tablist"])>:is(button,a,[role="tab"]):hover{background:var(--ds-tint)!important;color:var(--ds-text)!important}
 html body main :is(.ds-tabs,.ds-subtabs,.ds-profile-tabs,.ds-my-detail-tabs,.ds-admin-tabs,.ds-admin-subtabs,.dss-tabs,.dss-role-tabs,.srf-tabs,.lta-tabs,.live-segmented,[role="tablist"])>:is(button,a,[role="tab"]):is(.active,.is-active,.on,.is-on,.selected,.is-selected,.current,[aria-selected="true"],[aria-current="page"],[aria-pressed="true"]){
  background:var(--ds-tint-accent)!important;color:var(--ds-text)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ds-accent) 42%,transparent)!important;
 }
 @media(max-width:760px){
  html body main :is(.ds-tabs,.ds-subtabs,.ds-profile-tabs,.ds-my-detail-tabs,.ds-admin-tabs,.ds-admin-subtabs,.dss-tabs,.dss-role-tabs,.srf-tabs,.lta-tabs,.live-segmented,[role="tablist"]){width:100%}
  html body main :is(.ds-tabs,.ds-subtabs,.ds-profile-tabs,.ds-my-detail-tabs,.ds-admin-tabs,.ds-admin-subtabs,.dss-tabs,.dss-role-tabs,.srf-tabs,.lta-tabs,.live-segmented,[role="tablist"])>:is(button,a,[role="tab"]){flex:1 1 auto!important;padding:0 10px!important}
 }

 /* --- Cards --- */
 html body main :is(.ds-app-card,.ds-panel,.dss-card,.dss-panel,.dsdash-card,.dsdash-stat-card,.dsl-card,.dsa-card,.dsa-panel,.dsi-card,.dsi-section,.ds-profile-section,.ds-profile-card,.ds-profile-info-card,.ds-profile-panel,.ds-admin-work-card,.ds-admin-side-card,.ds-admin-section,.ds-admin-card,.ds-admin-panel,.dsf-card,.sy-card,.iv-card,.ia-card,.tk-card,.dc-card,.dc-panel,.srf-card,.lta-card,.status-card,.dslb-panel,.dsn-card,.dsg-card,.pr-panel,.ds-course-panel,.ds-my-detail,.ds-my-sidebar,.ds-my-panel,.ds-catalog-panel,.ds-exam-panel,.ds-exam-detail-card,.ds-exam-rule-card,.ds-exam-stat-panel,.ds-note-card,.ds-info-card,.live-panel,.qm-card,.qm-panel,.dspt-card,.dsk-panel,.ds-auth-card,.ds-my-material-card,.ds-my-lesson-card,.ds-my-exam-card,.ds-material-card,.ds-comment-card):not([data-ds-page-hero]){
  border:1px solid var(--ds-line)!important;border-radius:var(--ds-radius-panel)!important;background:var(--ds-card)!important;background-image:none!important;
  box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:none;
 }

 /* --- Section labels inside a page: same voice as the head, without the dot --- */
 html body main :is(.ds-kicker,.ds-eyebrow,.pr-kicker,.dss-kicker,.dsdash-kicker,.dsdash-eyebrow,.srf-eyebrow,.dc-kicker,.os-eyebrow,.dsc-eyebrow,.dsa-kicker,.dm-kicker,.dsf-compose-kicker,.live-panel-kicker,.tk-kicker,.ia-kicker,.iv-kicker,.dh-settings-kicker,.dspt-reminder-kicker,.dsk-badge):not([data-ds-page-kicker]){
  display:block;margin:0 0 8px;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;
  color:var(--ds-accent)!important;font:650 11px/1.5 var(--ds-font)!important;letter-spacing:.1em!important;text-transform:uppercase!important;
 }

 /* --- Forms --- */
 html body main :is(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden]),select):not(#ds-quran *,.dsag-card *,.dsq-player *){min-height:var(--ds-control-h);box-sizing:border-box}
 html body main :is(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color]),select,textarea):not(#ds-quran *){
  border:1px solid var(--ds-line)!important;border-radius:var(--ds-radius-control)!important;background:var(--ds-input,var(--ds-tint))!important;color:var(--ds-text)!important;font-family:var(--ds-font)!important;
 }
 html body main :is(input,textarea)::placeholder{color:var(--ds-muted)!important;opacity:1}
 @media(max-width:760px){html body main :is(input:not([type=checkbox],[type=radio],[type=range]),select,textarea){font-size:16px!important}}

 /* --- Tables --- */
 html body main :is(.ds-admin-table,.ds-table,.dsdev table,.ds-info table,.srf-table-wrap table){width:100%;border-collapse:collapse!important;border-spacing:0!important;background:transparent!important;font:400 14px/1.45 var(--ds-font)}
 html body main :is(.ds-admin-table,.ds-table,.dsdev table,.ds-info table,.srf-table-wrap table) th{padding:10px 12px!important;border:0!important;border-bottom:1px solid var(--ds-line)!important;background:transparent!important;color:var(--ds-muted2)!important;font:650 12px/1.4 var(--ds-font)!important;letter-spacing:.02em!important;text-transform:none!important;text-align:start}
 html body main :is(.ds-admin-table,.ds-table,.dsdev table,.ds-info table,.srf-table-wrap table) td{padding:11px 12px!important;border:0!important;border-bottom:1px solid color-mix(in srgb,var(--ds-text) 8%,transparent)!important;background:transparent!important;color:var(--ds-text)!important;vertical-align:top}
 html body main :is(.ds-admin-table,.ds-table) tbody tr:hover td{background:var(--ds-tint)!important}

 /* --- Notices --- */
 html body main :is(.ds-notice,.ds-message,.ds-admin-msg,.ia-msg,.tk-msg,.srf-message,.os-notice,.pr-callout,.pr-callout-soft,.ds-admin-mode-banner,.dsk-notice){
  box-sizing:border-box;margin-block:12px;padding:12px 14px!important;border:1px solid color-mix(in srgb,var(--ds-accent) 28%,transparent)!important;border-radius:12px!important;
  background:color-mix(in srgb,var(--ds-accent) 8%,transparent)!important;background-image:none!important;color:var(--ds-text)!important;box-shadow:none!important;font:400 14px/1.6 var(--ds-font);
 }
 html body main :is(.ds-notice,.ds-message,.ds-admin-msg,.ia-msg,.tk-msg,.srf-message,.os-notice):empty{display:none!important}

 /* --- Empty and loading states --- */
 html body main :is(.ds-empty,.dsf-empty,.dsdash-empty,.dslb-empty,.tk-empty,.dh-empty,.ds-admin-empty-state,.dua-empty,.notes-empty,.ds-video-empty,.live-library-empty,.lt-empty-search){
  box-sizing:border-box;padding:28px 20px!important;border:1px dashed var(--ds-line)!important;border-radius:14px!important;background:transparent!important;box-shadow:none!important;
  color:var(--ds-muted2)!important;font:400 14px/1.6 var(--ds-font)!important;text-align:center!important;
 }
 html body main .ds-loading:not(:empty)::before{content:"";display:inline-block;width:14px;height:14px;margin-inline-end:10px;vertical-align:-2px;border-radius:50%;border:2px solid var(--ds-line);border-top-color:var(--ds-accent);animation:ds-unified-spin .8s linear infinite}
 html body main .ds-loading{color:var(--ds-muted2)!important;font:400 14px/1.6 var(--ds-font)}

 /* --- Dialogs: a calm panel on desktop, a bottom sheet on the phone --- */
 html body :is(dialog:not(.sheet,.dh-comfort,#dss-video-dialog,.live-replay-dialog,.dsq-art-dialog),.ds-modal-card,.dsf-modal-card,.ds-wunder-modal-card,.ds-legal-box){
  border:1px solid var(--ds-line)!important;border-radius:20px!important;background:var(--ds-card-solid,var(--ds-bg2))!important;background-image:none!important;
  color:var(--ds-text)!important;box-shadow:var(--ds-shadow2)!important;font-family:var(--ds-font);
 }
 html body dialog:not(.sheet,.dh-comfort,#dss-video-dialog,.live-replay-dialog,.dsq-art-dialog){padding:clamp(18px,3vw,24px)!important;max-width:min(560px,calc(100vw - 32px))!important;width:100%;box-sizing:border-box}
 html body dialog::backdrop{background:rgba(0,0,0,.56);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
 @media(max-width:640px){
  html body dialog[open]:not(.sheet,.dh-comfort,#dss-video-dialog,.live-replay-dialog,.dsq-art-dialog){margin:auto 0 0!important;max-width:100vw!important;width:100vw!important;max-height:88dvh;border-radius:20px 20px 0 0!important;border-width:1px 0 0!important;padding-bottom:calc(20px + var(--ds-safe-bottom,0px))!important;overflow-y:auto}
 }

 /* --- Forum composer: same panel as every dialog, above header and app navigation --- */
 html body .dsf-modal{z-index:2147483000!important;background:rgba(0,0,0,.56)!important;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
 html body .dsf-compose{border:1px solid var(--ds-line)!important;border-radius:20px!important;background:var(--ds-card-solid,var(--ds-bg2))!important;background-image:none!important;box-shadow:var(--ds-shadow2)!important;font-family:var(--ds-font)}
 html body .dsf-compose h2{font:650 clamp(22px,3vw,26px)/1.2 var(--ds-font)!important;letter-spacing:-.02em!important}
 html body .dsf-compose :is(.dsf-compose-sub,p){font-weight:400!important;color:var(--ds-muted2)!important}
 html body .dsf-compose label{font:600 13px/1.4 var(--ds-font)!important;letter-spacing:0!important;text-transform:none!important}
 html body .dsf-compose :is(input:not([type=checkbox]),select,textarea){border:1px solid var(--ds-line)!important;border-radius:var(--ds-radius-control)!important;background:var(--ds-input,var(--ds-tint))!important;color:var(--ds-text)!important;font:400 15px/1.5 var(--ds-font)!important;box-shadow:none!important}
 html body .dsf-compose-kicker{display:block!important;padding:0!important;border:0!important;background:none!important;color:var(--ds-accent)!important;font:650 11px/1.5 var(--ds-font)!important;letter-spacing:.1em!important;text-transform:uppercase!important}
 html body .dsf-compose-kicker::before{content:none!important}
 @media(max-width:640px){html body .dsf-modal{align-items:flex-end!important;padding:0!important}html body .dsf-compose{width:100%!important;max-width:100vw!important;max-height:92dvh!important;border-radius:20px 20px 0 0!important;border-width:1px 0 0!important}}

 /* --- Prayer guide: the path list stays readable on phones --- */
 html body #ds-prayer-guide .pr-hero-aside li{min-width:0}
 html body #ds-prayer-guide .pr-hero-aside li span.ds-i18n{white-space:normal!important;color:inherit!important;font-size:inherit!important;font-variant-numeric:normal}
 @media(max-width:640px){html body #ds-prayer-guide .pr-hero-aside ol{grid-template-columns:minmax(0,1fr)!important}}

 /* Layered display values must never reveal what a page hides. */
 html body :is(main,#ds-footer,dialog,.ds-modal-portal) [hidden]{display:none!important}

 /* --- Headings in content --- */
 html body main :is(h2,h3):not(#ds-quran *,[lang="ar"],.dsag-card *){letter-spacing:-.015em;text-wrap:balance}
}
@keyframes ds-unified-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){html body main .ds-loading::before{animation:none!important}}