body[data-ux-directory] { --ux-directory-offset: 150px; }
body[data-ux-directory] :is(.rootdir,.ayah-shell) { max-width:1120px; padding-inline:24px; margin-inline:auto; }
body[data-ux-directory] :is(.rootdir-hero,.ayah-hero) { padding:24px; border-radius:14px; margin-block:16px 24px; background:var(--qawlat-surface,var(--qm-surface)); border:1px solid var(--qawlat-border,var(--qm-border)); }
body[data-ux-directory] :is(.rootdir-hero h1,.ayah-hero h1) { font-size:40px; line-height:1.4; margin-block:0 16px; }
body[data-ux-directory] :is(.rootdir-hero p,.ayah-lead) { font-size:18px; line-height:1.9; max-width:72ch; }
body[data-ux-directory] :is(.root-letter,.ayah-chip,.ayah-btn,.rootdir-actions a,.ux-directory-clear) { min-height:44px; min-width:44px; height:auto; box-sizing:border-box; }
body[data-ux-directory] :is(.root-group,.ayah-surah-group) { scroll-margin-block-start:var(--ux-directory-offset); }
body[data-ux-directory] .root-group-head h2 { font-size:24px; }
body[data-ux-directory] .root-name { font-size:22px; }
body[data-ux-directory] :is(.root-name,.root-letter,.rootdir-hero h1,.root-group-head h2) { color:var(--qawlat-text-strong); }
body[data-ux-directory] .rootdir-actions a { border:1px solid var(--qawlat-border-strong); border-radius:10px; padding:10px 16px; color:var(--qawlat-text); font-size:16px; }
body[data-ux-directory] :is(.root-count,.root-field,.ayah-surah-count) { font-size:14px; line-height:1.65; }
body[data-ux-directory] .root-card { padding:16px; gap:8px; border-radius:14px; }
body[data-ux-directory] .rootdir-letters { gap:8px; margin-block:16px 24px; }
.ux-directory-tools { margin-block:8px 16px; }
.ux-directory-tools label,.ux-directory-label { display:block; font-size:16px; font-weight:600; margin-block-end:8px; }
.ux-directory-input-row { display:flex; gap:8px; align-items:center; }
body[data-ux-directory] :is(#uxRootSearch,.ayah-search) { flex:1; min-width:0; min-height:48px; font:inherit; font-size:16px; color:var(--qawlat-text,var(--qm-text)); background:var(--qawlat-surface,var(--qm-surface)); border:1px solid var(--qawlat-border,var(--qm-border)); border-radius:10px; padding:10px 14px; }
.ux-directory-clear { font:inherit; font-size:14px; padding:8px 14px; border:1px solid var(--qawlat-border,var(--qm-border)); border-radius:10px; background:var(--qawlat-surface,var(--qm-surface)); color:var(--qawlat-text,var(--qm-text)); cursor:pointer; }
.ux-directory-status { font-size:14px!important; line-height:1.7; margin:8px 0; color:var(--qawlat-text-soft,var(--qm-muted)); }
.ux-directory-status:empty { display:none; }
.ux-directory-intro { margin-block-start:16px; border-top:1px solid var(--qawlat-border); padding-block-start:12px; }
.ux-directory-intro summary { font-size:16px; font-weight:600; min-height:44px; cursor:pointer; }
body[data-ux-directory] .ayah-index-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
body[data-ux-directory] .ux-directory-label { flex-basis:100%; margin:0; }
body[data-ux-directory] .ayah-surah-group summary { min-height:56px; font-size:18px; padding:16px; }
body[data-ux-directory] .ayah-chip-row { gap:8px; padding:8px 16px 16px; }
body[data-ux-directory] [hidden] { display:none!important; }
body[data-ux-directory] :is(input,button,summary,a):focus-visible { outline:2px solid var(--qawlat-gold-bright,#e0bf67); outline-offset:3px; box-shadow:0 0 0 7px var(--qawlat-focus-halo,rgba(7,18,13,.92)); }
@media(max-width:640px) {
  body[data-ux-directory] :is(.rootdir,.ayah-shell) { padding-inline:16px; }
  body[data-ux-directory] :is(.rootdir-hero,.ayah-hero) { padding:16px; margin-block:8px 16px; }
  body[data-ux-directory] :is(.rootdir-hero h1,.ayah-hero h1) { font-size:32px; }
  body[data-ux-directory] :is(.rootdir-hero p,.ayah-lead) { font-size:17px; }
  body[data-ux-directory] .root-card { padding:12px; }
  body[data-ux-directory] .ayah-search { flex-basis:100%; }
}
@media(prefers-reduced-motion:reduce) { body[data-ux-directory] .root-card:hover { transform:none; } }
@media print {
  body[data-ux-directory] :is(.ux-directory-tools,.ayah-index-tools,.ux-directory-status,.ux-directory-intro summary) { display:none!important; }
  body[data-ux-directory] :is(.root-card,.root-group,.ayah-surah-group)[hidden] { display:block!important; }
  .ux-directory-intro::details-content { content-visibility:visible; }
}