/* ============================================
   Noor al-Hadith — Premium Hadith Reader
   Modern Islamic Design System
   ============================================ */

/* ---------- Design Tokens ---------- */
@font-face {
    font-family: 'Anthropic Display';
    src: url('../fonts/anthropic-serif-display.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Anthropic Display';
    src: url('../fonts/anthropic-serif-display-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Anthropic Display';
    src: url('../fonts/anthropic-serif-display-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Anthropic Display';
    src: url('../fonts/anthropic-serif-display-semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Anthropic Display';
    src: url('../fonts/anthropic-serif-display-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Anthropic';
    src: url('../fonts/anthropic-serif-text-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Anthropic';
    src: url('../fonts/anthropic-serif-text-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Anthropic';
    src: url('../fonts/anthropic-serif-text-semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Anthropic';
    src: url('../fonts/anthropic-serif-text-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Anthropic';
    src: url('../fonts/anthropic-serif-text-regular-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'KFGQPC Nastaleeq';
    src: url('../fonts/kfgqpc-nastaleeq.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'IndoPak Quran';
    src: url('../fonts/indopak-quran.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Jameel Noori Nastaleeq';
    src: url('../fonts/jameel-noori-nastaleeq.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}
:root {
    color-scheme: light;
    /* Brand */
    --gold-50:  #faf6ec;
    --gold-100: #3a2f18;
    --gold-200: #5c4a23;
    --gold-300: #8b6f3f;
    --gold-400: #c9a961;
    --gold-500: #d4b25a;
    --gold-600: #e6cf87;
    --gold-700: #6a5329;
    --gold-800: #4a3919;

    /* Neutrals */
    --bg: #0f1418;
    --bg-soft: #161c20;
    --bg-card: #1c2329;
    --bg-elev: #222b32;
    --bg-pattern: #131a1e;
    --border: #2a343c;
    --border-strong: #3a4650;

    /* Text */
    --text: #ece4d0;
    --text-soft: #c0b698;
    --text-muted: #8a7f68;
    --text-invert: #0f1418;

    /* Accents */
    --accent: #2ea692;
    --accent-soft: #143934;
    --danger:      #b14646;
    --warn:        #c98a2b;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 0 4px rgba(201, 169, 97, 0.18);

    /* Type */
    --font-arabic:  'KFGQPC Nastaleeq', serif;
    --font-urdu:    'Jameel Noori Nastaleeq', serif;
    --font-display: 'Anthropic Display';
    --font-ui:      'Anthropic';

    /* Radii */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-full: 9999px;

    /* Layout */
    --sidebar-w: 280px;
    --topbar-h: 68px;
    --content-max: 1280px;
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}



/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-ui);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    transition: background var(--transition), color var(--transition);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
ul { list-style: none; }
img, svg { display: block; max-width: 100%; }

/* ---------- Decorative Top Border ---------- */
.top-border-pattern {
    height: 4px;
    background:
        linear-gradient(90deg,
            var(--gold-600) 0%,
            var(--gold-400) 20%,
            var(--gold-200) 50%,
            var(--gold-400) 80%,
            var(--gold-600) 100%);
    position: relative;
    z-index: 10;
}
.top-border-pattern::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(90deg,
            transparent 0 24px,
            rgba(255,255,255,0.15) 24px 25px);
}

/* ---------- Topbar ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.topbar-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: var(--topbar-h);
    padding: 0 1.5rem;
    max-width: 100%;
}
.brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}
.brand-mark {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 2px 4px rgba(139, 111, 63, 0.25));
}
.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.brand-ar {
    font-family: var(--font-arabic);
    font-size: 1.4rem;
    color: var(--gold-600);
    font-weight: 700;
    letter-spacing: 0.5px;
}
.brand-en {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.5px;
}

.topbar-search {
    flex: 1;
    max-width: 540px;
    position: relative;
    margin: 0 auto;
}
.topbar-search input {
    width: 100%;
    height: 42px;
    padding: 0 5.5rem 0 2.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    font-size: 0.95rem;
    transition: all var(--transition);
}
.topbar-search input:focus {
    outline: none;
    border-color: var(--gold-400);
    box-shadow: var(--shadow-glow);
}
.search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-muted);
}
.kbd {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.2rem 0.5rem;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 0.7rem;
    font-family: var(--font-ui);
    color: var(--text-muted);
    font-weight: 600;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.icon-btn {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--r-md);
    color: var(--text-soft);
    transition: all var(--transition);
    position: relative;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { background: var(--bg-card); color: var(--text); }
.icon-btn .rtl-label {
    font-family: var(--font-arabic);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gold-600);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all var(--transition);
    white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; }
.btn-primary {
    background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-600) 100%);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* ---------- App Shell ---------- */
.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    max-width: 100%;
    min-height: calc(100vh - var(--topbar-h) - 4px);
}

/* ---------- Sidebar ---------- */
.sidebar {
    background: var(--bg-soft);
    border-right: 1px solid var(--border);
    padding: 1.5rem 0;
    overflow-y: auto;
    position: sticky;
    top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
    transition: transform var(--transition);
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

.sidebar-section {
    padding: 0 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}
.sidebar-section:last-of-type { border-bottom: none; }

.sidebar-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    margin-bottom: 1rem;
}
.ornament {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--r-md);
    color: var(--text-soft);
    font-weight: 500;
    font-size: 0.92rem;
    transition: all var(--transition);
}
.nav-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-link:hover {
    background: var(--bg-card);
    color: var(--text);
}
.nav-link.active {
    background: linear-gradient(135deg, var(--gold-100) 0%, var(--gold-200) 100%);
    color: var(--gold-700);
    font-weight: 600;
}
.nav-link.active {
    background: linear-gradient(135deg, var(--gold-100) 0%, var(--gold-200) 100%);
    color: var(--gold-400);
}

.book-search {
    position: relative;
    margin-bottom: 0.75rem;
}
.book-search input {
    width: 100%;
    height: 36px;
    padding: 0 0.75rem 0 2.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 0.85rem;
}
.book-search input:focus {
    outline: none;
    border-color: var(--gold-400);
}
.book-search svg {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--text-muted);
}

.book-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 380px;
    overflow-y: auto;
}
.book-list::-webkit-scrollbar { width: 4px; }
.book-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
.book-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    border-radius: var(--r-sm);
    color: var(--text-soft);
    font-size: 0.88rem;
    cursor: pointer;
    transition: all var(--transition);
}
.book-item:hover {
    background: var(--bg-card);
    color: var(--text);
}
.book-item .book-name { display: flex; align-items: center; gap: 0.6rem; }
.book-item .book-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 0.85rem;
}
.book-item .book-count {
    font-size: 0.72rem;
    color: var(--text-muted);
    background: var(--bg);
    padding: 2px 6px;
    border-radius: var(--r-full);
}
.book-item.active {
    background: var(--gold-100);
    color: var(--gold-700);
    font-weight: 600;
}

.sidebar-footer {
    padding: 1rem;
    text-align: center;
    border-top: 1px solid var(--border);
}
.bismillah-small {
    font-family: var(--font-arabic);
    font-size: 1rem;
    color: var(--gold-600);
    font-weight: 600;
    line-height: 1.6;
}

/* ---------- Main Content ---------- */
.main-content {
    padding: 2rem clamp(1.5rem, 4vw, 3rem) 4rem;
    max-width: var(--content-max);
    width: 100%;
    margin: 0 auto;
}

/* ---------- Section ---------- */
.section { margin-bottom: 3rem; }
.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.section-title {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.title-ar {
    font-family: var(--font-arabic);
    font-size: 1.4rem;
    color: var(--gold-600);
    line-height: 1;
}
.title-en {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}
.section-link {
    color: var(--gold-600);
    font-weight: 600;
    font-size: 0.9rem;
    transition: color var(--transition);
}
.section-link:hover { color: var(--gold-700); }
.section-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ---------- Collection Grid ---------- */
.collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}
.collection-card {
    position: relative;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    transition: all var(--transition);
    cursor: pointer;
    overflow: hidden;
}
.collection-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition);
}
.collection-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--gold-300);
}
.collection-card:hover::before { transform: scaleY(1); }
.collection-card .card-ar {
    font-family: var(--font-arabic);
    font-size: 1.3rem;
    color: var(--gold-700);
    margin-bottom: 0.4rem;
    font-weight: 700;
    direction: rtl;
    text-align: right;
}
.collection-card .card-ar { color: var(--gold-300); }
.collection-card .card-en {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
}
.collection-card .card-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.collection-card .card-meta .meta-pill {
    padding: 2px 8px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    font-weight: 600;
}
.collection-card .card-author {
    font-style: italic;
    font-size: 0.82rem;
    color: var(--text-soft);
    margin-top: 0.5rem;
}
.collection-card .card-author[lang="ur"] {
    font-size: 1.25rem;
    line-height: 2;
    font-style: normal;
}

/* ---------- Hadith Card ---------- */
.hadith-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 0;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}
.hadith-card:hover { box-shadow: var(--shadow-md); }

.hadith-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.75rem;
    background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg-card) 100%);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 0.75rem;
}
.hadith-book {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--text-soft);
    font-weight: 600;
}
.hadith-book .book-badge {
    padding: 4px 10px;
    background: var(--gold-100);
    color: var(--gold-700);
    border-radius: var(--r-full);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.hadith-number {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold-600);
}
.hadith-actions {
    display: flex;
    gap: 0.25rem;
}
.hadith-actions .icon-btn { width: 36px; height: 36px; }
.hadith-actions .icon-btn svg { width: 16px; height: 16px; }
.hadith-actions .icon-btn.active { color: var(--gold-600); background: var(--gold-100); }

.hadith-body {
    padding: 2rem clamp(1.5rem, 4vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.hadith-block { position: relative; }
.hadith-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.hadith-label::before {
    content: '';
    width: 20px;
    height: 1.5px;
    background: var(--gold-400);
}

.hadith-arabic {
    font-family: var(--font-arabic);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 2.2;
    color: var(--text);
    text-align: right;
    direction: rtl;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg) 100%);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    position: relative;
}

.hadith-translation {
    font-family: 'Anthropic';
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--text);
    padding: 1.25rem 1.5rem;
    background: var(--bg-soft);
    border-left: 3px solid var(--gold-400);
    border-radius: 0 var(--r-md) var(--r-md) 0;
}
.hadith-translation[lang="en"] { font-family: 'Anthropic'; }
.hadith-translation.lang-ur {
    font-family: var(--font-urdu);
    font-size: 1.6rem;
    line-height: 2.35;
    text-align: right;
    direction: rtl;
    border-left: none;
    border-right: 3px solid var(--gold-400);
    border-radius: var(--r-md) 0 0 var(--r-md);
}
[lang="ur"] { font-family: var(--font-urdu); font-style: normal; }

.hadith-narrator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg-soft) 100%);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.narrator-avatar {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-600) 100%);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.narrator-info { flex: 1; }
.narrator-name {
    font-weight: 600;
    color: var(--text);
    font-size: 0.95rem;
}
.narrator-chain {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.grade-badge {
    padding: 4px 10px;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: var(--r-full);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---------- Hadith Pager ---------- */
.hadith-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding: 1rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
}
.pager-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-soft);
    transition: all var(--transition);
}
.pager-btn:hover {
    background: var(--gold-100);
    color: var(--gold-700);
    border-color: var(--gold-300);
}
.pager-btn svg { width: 14px; height: 14px; }
.pager-meta {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* ---------- Topic Grid ---------- */
.topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}
.topic-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    text-align: center;
    transition: all var(--transition);
}
.topic-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--gold-300);
}
.topic-icon { font-size: 2rem; }
.topic-name {
    font-weight: 600;
    color: var(--text);
    font-size: 0.95rem;
}
.topic-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-soft);
    padding: 2px 8px;
    border-radius: var(--r-full);
}

/* ---------- Chip ---------- */
.chip {
    padding: 0.4rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-soft);
    cursor: pointer;
    transition: all var(--transition);
}
.chip:hover { border-color: var(--gold-300); color: var(--text); }
.chip-active {
    background: var(--gold-100);
    color: var(--gold-700);
    border-color: var(--gold-400);
}

/* ---------- Modal ---------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh 1rem 1rem;
}
.modal[aria-hidden="false"] { display: flex; }
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 20, 24, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.modal-panel {
    position: relative;
    width: 100%;
    max-width: 720px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.modal-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}
.modal-header svg {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.modal-header input {
    flex: 1;
    background: none;
    border: none;
    font-size: 1.05rem;
    outline: none;
}
.modal-results {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}
.modal-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}
.empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.6; }
.search-result {
    padding: 1rem 1.25rem;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background var(--transition);
}
.search-result:hover { background: var(--bg-soft); }
.search-result .result-ref {
    font-size: 0.8rem;
    color: var(--gold-600);
    font-weight: 700;
    margin-bottom: 0.4rem;
}
.search-result .result-text {
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Footer ---------- */
.footer {
    margin-top: 4rem;
    background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-card) 100%);
    border-top: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.footer-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
}
.footer-inner {
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    gap: 3rem;
    padding: 3rem clamp(1.5rem, 4vw, 3rem) 2rem;
    max-width: var(--content-max);
    margin: 0 auto;
}
.footer-brand-name {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
}
.footer-brand-ar {
    font-family: var(--font-arabic);
    color: var(--gold-600);
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}
.footer-brand p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    max-width: 380px;
}
.footer-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.footer-col h4 {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1rem;
}
.footer-col a {
    display: block;
    color: var(--text-soft);
    font-size: 0.88rem;
    padding: 0.3rem 0;
    transition: color var(--transition);
}
.footer-col a:hover { color: var(--gold-600); }
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem clamp(1.5rem, 4vw, 3rem);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.85rem;
    max-width: var(--content-max);
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.footer-bismillah {
    font-family: var(--font-arabic);
    color: var(--gold-600);
    font-weight: 600;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .sidebar {
        position: fixed;
        top: var(--topbar-h);
        left: 0;
        z-index: 90;
        transform: translateX(-100%);
        width: var(--sidebar-w);
        box-shadow: var(--shadow-lg);
    }
    .sidebar.open { transform: translateX(0); }
    .app-shell { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 640px) {
    .topbar-inner { padding: 0 1rem; gap: 0.5rem; }
    .topbar-search { display: none; }
    .brand-text { display: none; }
    .btn span { display: none; }
    .main-content { padding: 1.5rem 1rem 3rem; }
    .footer-cols { grid-template-columns: 1fr 1fr; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .hadith-header { padding: 1rem; }
    .hadith-body { padding: 1.5rem 1rem; gap: 1.25rem; }
    .hadith-arabic { font-size: 1.3rem; padding: 1rem; line-height: 2; }
    .hadith-translation.lang-ur { font-size: 1.35rem; line-height: 2.25; }
}

/* Hadith catalog */
.catalog-main { width:100%; max-width:none; min-width:0; margin:0; padding:2.5rem clamp(1.25rem,3vw,3rem); }
.catalog-topnav, .catalog-jumps { display: flex; gap: 1rem; align-items: center; }
.catalog-topnav a[aria-current] { color: var(--gold-600); }
.catalog-heading { margin-bottom: 3rem; }
.catalog-eyebrow { color: var(--accent); letter-spacing: .16em; font-size: .75rem; }
.catalog-heading h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); margin: .5rem 0; }
.catalog-heading h1 span { font-family: var(--font-arabic); color: var(--gold-600); margin-inline-start: 1rem; }
.catalog-heading p, .catalog-book p { color: var(--text-soft); }
.catalog-jumps { margin: 1.5rem 0; flex-wrap: wrap; }
.book-detail-languages { display:flex; flex-wrap:wrap; gap:.7rem; margin:1.5rem 0; }
.book-detail-content { display:grid; gap:1rem; }
.book-detail-field { padding:1.4rem 1.6rem; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg-card); }
.book-detail-field h2 { margin:0 0 .7rem; font-size:1rem; }
.book-detail-field .book-section-heading { display:block; margin:2em 0 .55em; font-size:1.15em; font-weight:700; }
.book-detail-field .book-section-heading:first-child { margin-top:0; }
.book-detail-field p { margin:0; white-space:pre-wrap; font-size:1.26rem; line-height:1.9; }
.book-detail-content[lang="urdu"] .book-detail-field p { font-family:var(--font-urdu); font-size:1.92rem; line-height:2.35; }
.book-detail-content[lang="hindi"] .book-detail-field { font-family:'Tiro Devanagari Hindi',sans-serif; }
.book-detail-content[dir="rtl"] .book-detail-field { text-align:right; }
@media (max-width:600px) { .book-detail-content[lang="urdu"] .book-detail-field p { font-size:1.55rem; } }
.quran-main { max-width:1280px; }
.quran-mode-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:1rem; margin:1.5rem 0; }
.quran-mode-card { display:flex; min-height:250px; flex-direction:column; align-items:flex-start; gap:.8rem; padding:1.75rem; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg-card); color:var(--text); }
.quran-mode-card h2 { font-size:1.7rem; }
.quran-mode-card p { margin-bottom:auto; line-height:1.7; }
.quran-mode-card:hover, .quran-resource-tile:hover { border-color:var(--border-strong); background:var(--bg-elev); }
.quran-mode-card { --mode-accent:#176b59; --mode-wash:rgba(23,107,89,.10); --mode-edge:rgba(23,107,89,.34); position:relative; overflow:hidden; border-color:var(--mode-edge); background:linear-gradient(145deg,var(--mode-wash),var(--bg-card) 72%); text-decoration:none; transition:border-color .18s ease, transform .18s ease, background .18s ease; }
.quran-mode-card::before { position:absolute; inset:0 auto 0 0; width:4px; background:var(--mode-accent); content:""; }
.quran-mode-card.quran-tafsir-mode { --mode-accent:#345c9c; --mode-wash:rgba(52,92,156,.10); --mode-edge:rgba(52,92,156,.34); }
.quran-mode-card .catalog-eyebrow { color:var(--mode-accent); font-weight:700; letter-spacing:.12em; }
.quran-mode-card h2 { color:var(--text); }
.quran-mode-card .meta-pill { border-color:var(--mode-edge); background:var(--mode-wash); color:var(--mode-accent); }
.quran-mode-card:hover { border-color:var(--mode-accent); background:linear-gradient(145deg,var(--mode-wash),var(--bg-elev) 76%); transform:translateY(-2px); }
:root[data-theme="dark"] .quran-mode-card { --mode-accent:#73e2c2; --mode-wash:rgba(62,205,165,.13); --mode-edge:rgba(115,226,194,.34); }
:root[data-theme="dark"] .quran-mode-card.quran-tafsir-mode { --mode-accent:#9bbcff; --mode-wash:rgba(94,132,205,.16); --mode-edge:rgba(155,188,255,.36); }
.quran-picker-tools { display:grid; gap:.5rem; max-width:42rem; margin:1rem 0; }
.quran-picker-tools input { width:100%; padding:.85rem 1rem; border:1px solid var(--border-strong); border-radius:var(--r-md); background:var(--bg-soft); color:var(--text); }
.quran-resource-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:.8rem; margin:1rem 0 1.5rem; }
.quran-resource-tile { display:grid; grid-template-columns:2rem 1fr; gap:.2rem .6rem; min-height:94px; align-content:center; padding:1rem; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-card); color:var(--text); text-align:left; }
.quran-resource-tile.selected { border-color:var(--text); }
.quran-resource-tile strong, .quran-resource-tile small { grid-column:2; }
.quran-resource-tile > span:not(.quran-resource-check), .quran-resource-tile small { color:var(--text); }
.quran-resource-check { grid-row:1 / span 3; align-self:center; display:grid; width:1.7rem; height:1.7rem; place-items:center; border:1px solid var(--border-strong); border-radius:50%; }
.quran-picker-actions, .quran-reader-toolbar, .quran-reader-toolbar form { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; }
.quran-picker-actions { justify-content:flex-end; }
.quran-reader-toolbar { justify-content:space-between; margin:1.2rem 0; }
.quran-reader-toolbar form label { display:flex; align-items:center; gap:.5rem; }
.quran-reader-toolbar input { width:6rem; padding:.65rem .75rem; border:1px solid var(--border-strong); border-radius:var(--r-md); background:var(--bg-soft); color:var(--text); }
.quran-selected-summary { margin:1rem 0; }
.quran-verse-list { display:grid; gap:1rem; }
.quran-verse-card { padding:clamp(1.1rem,3vw,2rem); border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg-card); }
.quran-verse-card > header { margin-bottom:1rem; font-weight:700; }
.quran-arabic { margin-bottom:1.5rem; font-family:'KFGQPC Nastaleeq','Scheherazade New',serif; font-size:clamp(1.7rem,3vw,2.4rem); line-height:2; text-align:right; }
.quran-resource-text { padding-top:1rem; margin-top:1rem; border-top:1px solid var(--border); }
.quran-resource-text h3 { margin-bottom:.6rem; font-size:1rem; }
.quran-resource-text h3 span { margin-inline-start:.5rem; }
.quran-resource-text p { white-space:pre-wrap; overflow-wrap:anywhere; font-size:1.2rem; line-height:1.9; }
.quran-resource-text[lang="ur"] p { font-family:var(--font-urdu); font-size:1.7rem; line-height:2.2; }
.quran-resource-text[lang="hi"] p { font-family:'Tiro Devanagari Hindi',sans-serif; }
.quran-resource-text[lang="ar"] p { font-family:'Scheherazade New',serif; font-size:1.7rem; line-height:2.2; }
.quran-status { margin:1rem 0; }
@media (max-width:700px) { .quran-reader-toolbar, .quran-reader-toolbar form { align-items:flex-start; } .quran-reader-toolbar { flex-direction:column; } .quran-reader-toolbar form { width:100%; } .quran-resource-text p { font-size:1.08rem; } }

/* Quran reading: surah index and continuous ayah flow. */
.quran-surah-tools { display:grid; gap:.45rem; max-width:32rem; margin:1.5rem 0 1rem; }
.quran-surah-tools input, .quran-language-control select, .quran-tafsir-add select { min-height:3rem; padding:.65rem .85rem; border:1px solid var(--border-strong); border-radius:var(--r-md); background:var(--bg-soft); color:var(--text); font:inherit; }
.quran-surah-list { border-top:1px solid var(--border); }
.quran-surah-row { display:grid; grid-template-columns:3rem minmax(0,1fr) auto 1.5rem; align-items:center; gap:1rem; min-height:5.2rem; padding:.8rem .5rem; border-bottom:1px solid var(--border); color:var(--text); text-decoration:none; }
.quran-surah-row:hover { background:var(--bg-card); }
.quran-surah-number { display:grid; width:2.5rem; height:2.5rem; place-items:center; border:1px solid var(--border-strong); border-radius:50%; font-variant-numeric:tabular-nums; }
.quran-surah-name { display:grid; gap:.25rem; }
.quran-surah-name strong { font-size:1.08rem; }
.quran-surah-name small { color:var(--text); font-size:.88rem; }
.quran-surah-arabic { font-family:'Scheherazade New',serif; font-size:1.6rem; }
.quran-reader-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:.3rem 1.5rem; margin:2rem 0 1rem; }
.quran-reader-heading .catalog-eyebrow { grid-column:1 / -1; margin:0; }
.quran-reader-heading h1 { margin:0; font-size:clamp(2rem,5vw,3.2rem); }
.quran-reader-heading p:not(.catalog-eyebrow) { margin:.45rem 0 0; }
.quran-reader-arabic-title { font-family:'Scheherazade New',serif; font-size:2.2rem; }
.quran-reader-settings { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:flex-start; gap:1rem; margin:1.5rem 0; padding:.8rem 0; border-block:1px solid var(--quran-line); }
.quran-translator-sticky { position:sticky; top:calc(var(--topbar-h) + .1rem); z-index:70; margin:0 0 .5rem; padding:.7rem 0; border-block:1px solid var(--quran-line); background:var(--bg); }
.quran-surah-list-link { margin:0; }
.quran-language-control { display:grid; gap:.35rem; min-width:min(100%,24rem); }
.quran-language-control select { width:100%; }
.quran-verse-list { gap:0; }
.quran-verse-card { padding:clamp(1.1rem,3vw,2rem) .25rem; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; scroll-margin-top:1.5rem; }
.quran-verse-card > header { display:flex; align-items:center; gap:.8rem; margin:0 0 .8rem; font-size:.9rem; }
.quran-verse-rule { height:1px; flex:1; background:var(--border); }
.quran-arabic { margin:0 0 .75rem; font-family:'Scheherazade New',serif; font-size:clamp(1.2rem,1.92vw,1.6rem); line-height:2.15; text-align:right; }
.quran-translation-text { display:flex; flex-direction:column; gap:.5rem; padding:.2rem 0 0; border:0; }
.quran-translation-text p, .quran-tafsir-text p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:1.26rem; line-height:1.9; }
.quran-translation-text > span { font-size:.82rem; }
.quran-translation-text[lang="ur"] p, .quran-tafsir-text[lang="ur"] p { font-family:var(--font-urdu); font-size:1.92rem; line-height:2.35; }
.quran-translation-text[lang="hi"] p, .quran-tafsir-text[lang="hi"] p { font-family:'Tiro Devanagari Hindi',sans-serif; }
.quran-tafsir-control { display:grid; gap:.65rem; width:min(100%,42rem); }
.quran-tafsir-chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.quran-tafsir-chip { display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .65rem; border:1px solid var(--border-strong); border-radius:var(--r-full); }
.quran-tafsir-chip button { border:0; background:transparent; color:var(--text); font:inherit; font-size:1.2rem; cursor:pointer; }
.quran-translation-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 .5rem; }
.quran-translation-chip { display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .65rem; border:1px solid var(--border-strong); border-radius:var(--r-full); }
.quran-translation-chip button { border:0; background:transparent; color:var(--text); font:inherit; font-size:1.2rem; cursor:pointer; }
.quran-translation-control { position:relative; display:grid; gap:.7rem; width:min(100%,42rem); }
.quran-picker-toggle { display:inline-flex; width:max-content; max-width:100%; min-height:2.9rem; align-items:center; justify-content:space-between; gap:1rem; padding:.65rem .9rem; border:1px solid color-mix(in srgb,var(--quran-teal) 48%,transparent); border-radius:var(--r-full); background:var(--quran-chip-bg); color:var(--quran-chip-text); font:inherit; cursor:pointer; }
.quran-picker-plus { display:grid; width:1.45rem; height:1.45rem; place-items:center; border-radius:50%; background:var(--quran-nav-bg); color:var(--quran-nav-text); font-size:1.1rem; line-height:1; }
.quran-translation-picker { position:absolute; top:calc(100% + .55rem); left:0; z-index:75; display:grid; gap:.55rem; width:100%; max-height:min(32rem,calc(100vh - var(--topbar-h) - 7rem)); overflow:auto; overscroll-behavior:contain; padding:.85rem; border:1px solid var(--quran-line); border-radius:var(--r-md); background:var(--bg-card); box-shadow:0 1rem 2.5rem rgba(0,0,0,.2); }
.quran-translation-picker[hidden] { display:none; }
.quran-translation-picker > label { font-size:.9rem; font-weight:650; }
.quran-translation-picker > input { width:100%; min-height:2.8rem; padding:.65rem .8rem; border:1px solid var(--border-strong); border-radius:var(--r-md); background:var(--bg-soft); color:var(--text); font:inherit; }
.quran-resource-options { display:grid; grid-auto-rows:max-content; align-content:start; max-height:17rem; overflow:auto; overscroll-behavior:contain; border:1px solid var(--border); border-radius:var(--r-md); }
.quran-resource-option { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:.6rem 1rem; min-width:0; min-height:0; padding:.7rem .75rem; border:0; border-bottom:1px solid var(--quran-line); background:transparent; color:var(--text); font:inherit; line-height:1.4; text-align:left; cursor:pointer; }
.quran-resource-option:last-child { border-bottom:0; }
.quran-resource-option:hover, .quran-resource-option:focus-visible { background:var(--quran-chip-bg); outline:none; }
.quran-resource-option > span:first-child { display:flex; min-width:0; flex-direction:column; gap:.2rem; line-height:1.4; }
.quran-resource-option strong { display:block; font-size:1rem; line-height:1.4; white-space:normal; overflow-wrap:anywhere; }
.quran-resource-option small { display:block; color:var(--quran-teal); font-size:.8rem; line-height:1.35; white-space:normal; }
.quran-resource-add-mark { color:var(--quran-teal); font-size:1.25rem; }
.quran-translation-empty, .quran-translation-status { margin:0; color:var(--quran-teal); font-size:.88rem; }
.quran-translation-empty[hidden] { display:none; }
.quran-add-tafsir-label { font-size:.88rem; }
.quran-tafsir-add { display:flex; gap:.6rem; }
.quran-tafsir-add select { flex:1; min-width:0; }
.quran-tafsir-text { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); }
.quran-tafsir-text h3 { margin:0 0 .5rem; font-size:1rem; }
@media (max-width:700px) {
  .quran-surah-row { grid-template-columns:2.5rem minmax(0,1fr) auto; gap:.7rem; }
  .quran-surah-number { width:2.2rem; height:2.2rem; }
  .quran-surah-arrow { display:none; }
  .quran-surah-arabic { font-size:1.35rem; }
  .quran-reader-heading { grid-template-columns:minmax(0,1fr) auto; }
  .quran-reader-arabic-title { font-size:1.7rem; }
  .quran-arabic { font-size:1.495rem; line-height:2; }
  .quran-translation-text p, .quran-tafsir-text p { font-size:1.134rem; }
  .quran-translation-text[lang="ur"] p, .quran-tafsir-text[lang="ur"] p { font-size:1.767rem; line-height:1.55; }
}
.catalog-heading label { display: block; margin-bottom: .5rem; }
#catalogSearch { width: 100%; padding: .9rem 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); }
#catalogStatus { margin-top: .65rem; font-size: .85rem; }
.catalog-categories { display: grid; gap: 1rem; }
.catalog-category { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-card); overflow: hidden; }
.catalog-category summary { cursor: pointer; padding: 1.25rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
.catalog-category summary::before { content: '+'; color: var(--gold-600); }
.catalog-category[open] summary::before { content: '−'; }
.catalog-category summary > span:first-child { flex: 1; }
.catalog-category summary:hover { background: var(--bg-elev); }
.catalog-book { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--border); }
.catalog-book h4 { font-weight: 500; }
.catalog-book p { font-size: .85rem; }
.catalog-book p[lang=ar] { text-align: start; font-family: var(--font-arabic); font-size: 1.4rem; }
.catalog-book > span { color: var(--text-muted); font-size: .8rem; flex-shrink: 0; }
.catalog-book[hidden], .catalog-category[hidden], [hidden] { display: none !important; }
.catalog-empty { color: var(--text-soft); padding: 1rem; }
@media(max-width: 600px) { .catalog-book { flex-direction: column; gap: .5rem; } .catalog-category summary { padding: 1rem; } .catalog-topnav { font-size: .85rem; gap: .6rem; } .catalog-main { padding: 2rem 1rem; } }
.category-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)); gap:1rem; margin:1.5rem 0; }
.category-grid .collection-card { display:flex; flex-direction:column; gap:.6rem; height:100%; }
.library-pagination { flex-wrap:wrap; margin:1.5rem 0; }
.reader-list { display:grid; gap:1.5rem; }
.reader-item .hadith-translation, .reader-item .hadith-arabic { white-space:pre-wrap; overflow-wrap:anywhere; }
#catalogStatus { margin:1rem 0; }
a:focus-visible,button:focus-visible,input:focus-visible { outline:2px solid var(--gold-600); outline-offset:4px; }

/* Minimal light and dark themes */
:root {
    color-scheme: light;
    --gold-50: #f7f7f7;
    --gold-100: #eeeeee;
    --gold-200: #e5e5e5;
    --gold-300: #b8b8b8;
    --gold-400: #777777;
    --gold-500: #444444;
    --gold-600: #111111;
    --gold-700: #333333;
    --gold-800: #f5f5f5;
    --gold-50: #f3f3f0;
    --gold-100: #e6e6e2;
    --gold-200: #d4d4cf;
    --gold-300: #a5a59f;
    --gold-400: #777872;
    --gold-500: #555650;
    --gold-600: #292a26;
    --gold-700: #3b3c37;
    --gold-800: #f7f7f4;
    --bg: #e9e9e6;
    --bg-soft: #e1e1dd;
    --bg-card: #f0f0ed;
    --bg-elev: #d9d9d5;
    --bg-pattern: #e6e6e2;
    --border: #d1d1cc;
    --border-strong: #bdbdb7;
    --text: #282925;
    --text-soft: #484943;
    --text-muted: #5b5c55;
    --text-invert: #f5f5f2;
    --accent: #28735f;
    --accent-soft: #dceae4;
    --shadow-xs: 0 1px 2px rgba(30,31,27,.04);
    --shadow-sm: 0 2px 6px rgba(30,31,27,.05);
    --shadow-md: 0 8px 24px rgba(30,31,27,.07);
    --shadow-lg: 0 20px 48px rgba(30,31,27,.1);
    --shadow-glow: 0 0 0 3px rgba(30,31,27,.08);
    --font-display: var(--font-ui);
    --r-lg: 12px;
    --r-xl: 16px;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --gold-50: #2b2b2b;
    --gold-100: #383838;
    --gold-200: #4a4a4a;
    --gold-300: #ffffff;
    --gold-400: #ffffff;
    --gold-500: #ffffff;
    --gold-600: #f0f0f0;
    --gold-700: #f0f0f0;
    --gold-800: #f5f5f5;
    --bg: #000000;
    --bg-soft: #171717;
    --bg-card: #2b2b2b;
    --bg-elev: #333333;
    --bg-pattern: #242424;
    --border: #383838;
    --border-strong: #4b4b4b;
    --text: #ffffff;
    --text-soft: #f4f4f4;
    --text-muted: #eeeeee;
    --text-invert: #171717;
    --accent: #69c9ae;
    --accent-soft: #203b34;
    --shadow-xs: 0 1px 2px rgba(0,0,0,.18);
    --shadow-sm: 0 2px 6px rgba(0,0,0,.2);
    --shadow-md: 0 8px 24px rgba(0,0,0,.28);
    --shadow-lg: 0 20px 48px rgba(0,0,0,.38);
    --shadow-glow: 0 0 0 3px rgba(255,255,255,.08);
}
body { background: var(--bg); color: var(--text); }
.topbar { background: color-mix(in srgb, var(--bg) 94%, transparent); }
.topbar-search input { background: var(--bg-elev); }
.brand { min-width: 0; max-width: min(390px, 34vw); }
.brand-en { font-family: var(--font-ui); font-size: .86rem; font-weight: 600; letter-spacing: -.02em; }
.brand-logo { display:block; width:36px; height:36px; flex:0 0 36px; object-fit:contain; border-radius:9px; }
.theme-toggle { border: 1px solid var(--border); border-radius: 999px; padding: .55rem .85rem; font-size: .82rem; background: var(--bg); color: var(--text); white-space: nowrap; }
.theme-toggle:hover { background: var(--bg-elev); }
.top-border-pattern, .top-border-pattern::after, .footer-pattern { display: none; }
.card-en, .collection-card .card-en, .footer-brand-name, .footer-col h4, .section-title .title-en { font-family: var(--font-ui); }
.collection-card { border: 1px solid var(--border); box-shadow: none; }
.collection-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.chip-active { background: var(--text); color: var(--bg); }
.search-result .result-ref, .footer-col a:hover { color: var(--text); }
.catalog-eyebrow { color: var(--text-muted); }
.catalog-category, .category-grid .collection-card { box-shadow: none; }
.catalog-category summary:hover { background: var(--bg-elev); }
input, textarea { background-color: var(--bg-card); }
@media (max-width: 700px) {
    .topbar-inner { gap: .65rem; padding-inline: 1rem; }
    .brand { max-width: min(48vw, 280px); }
    .brand-en { font-size: .76rem; line-height: 1.25; }
    .topbar-search { display: none; }
    .topbar-actions { margin-left: auto; }
}
.btn-primary { background: var(--text); color: var(--bg); }

/* Reader font preferences */
.hadith-header { flex-wrap: wrap; }
.hadith-font-picker { display: inline-flex; align-items: center; gap: .5rem; margin-inline-start: auto; color: var(--text-muted); font-size: .8rem; }
.hadith-font-picker select { max-width: 190px; padding: .45rem .65rem; color: var(--text); background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; }
.hadith-arabic[data-arabic-font="kfgqpc"] { font-family: 'KFGQPC Nastaleeq', serif; }
.hadith-arabic[data-arabic-font="indopak"] { font-family: 'IndoPak Quran', serif; }
.hadith-arabic[data-arabic-font="scheherazade"] { font-family: 'Scheherazade New', serif; }
.reader-controls { position: sticky; top: calc(var(--topbar-h) + .1rem); z-index: 70; margin: 0 0 .5rem; padding: .7rem 0; border-block: 1px solid var(--hadith-line, var(--border)); background: var(--bg); }
.reader-controls-content { display: flex; align-items: flex-end; justify-content: flex-start; flex-wrap: wrap; gap: .75rem 1rem; }
.reader-controls-toggle { display: none; }
.reader-controls-content .hadith-font-picker { margin-inline-start: 0; }
.reader-toggle-group { display: grid; gap: .35rem; }
.reader-toggle-label { color: var(--text); font-size: .75rem; font-weight: 650; }
.language-toggles { display: flex; flex-wrap: wrap; gap: .45rem; }
.language-toggle { min-height: 40px; padding: .45rem .8rem; border: 1px solid var(--border-strong); border-radius: var(--r-full); background: var(--bg-card); color: var(--text); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.language-toggle[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: var(--bg); }
.language-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.hadith-arabic[data-arabic-font="amiri"] { font-family: 'Amiri Quran', 'Amiri', serif; }
.hadith-translation.lang-hi, .lang-hi { font-family: 'Tiro Devanagari Hindi', sans-serif; }
@media(max-width: 600px) { .hadith-font-picker { width: 100%; margin-inline-start: 0; justify-content: space-between; } .hadith-font-picker select { flex: 1; } }
@media(max-width: 714px) {
  .reader-controls-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.5rem; margin: 0 0 .55rem auto; padding: .4rem .8rem; border: 1px solid var(--hadith-line, var(--border-strong)); border-radius: var(--r-full); background: var(--hadith-teal-soft, var(--bg-card)); color: var(--hadith-teal, var(--text)); font: inherit; font-size: .9rem; font-weight: 650; cursor: pointer; }
  .reader-controls-toggle:focus-visible { outline: 2px solid var(--hadith-teal, var(--text)); outline-offset: 2px; }
  .reader-controls-content { align-items: flex-start; gap: .7rem; }
  .reader-controls-content[hidden] { display: none; }
}
.arabic-font-kfgqpc { font-family: 'KFGQPC Nastaleeq', serif; }
.arabic-font-indopak { font-family: 'IndoPak Quran', serif; }
.arabic-font-scheherazade { font-family: 'Scheherazade New', serif; }
.arabic-font-amiri { font-family: 'Amiri Quran', 'Amiri', serif; }
.btn-primary:hover { background: var(--text-soft); color: var(--bg); }
.btn-primary svg { color: currentColor; }
@media (max-width: 1024px) { .brand-text { display: flex; } }
.catalog-topnav a { white-space: nowrap; }
#bookResults .collection-card p:last-child { color: var(--text-soft); }
.catalog-topnav { flex: 0 0 auto; }
@media (max-width: 700px) {
    .topbar-actions .btn-sm { width: 40px; min-width: 40px; height: 40px; padding: .6rem; font-size: 0; }
    .topbar-actions .btn-sm svg { width: 18px; height: 18px; }
}
.collection-grid .card-ar { display: none; }
.btn.btn-primary { background: var(--text); color: var(--bg); }
.btn.btn-primary:hover { background: var(--text-soft); color: var(--bg); }
.btn.btn-primary svg, .btn.btn-primary svg * { color: var(--bg) !important; stroke: var(--bg); }

/* Homepage: an open editorial layout with restrained color. */
.home-main { --home-accent:#166652; --home-blue:#364f96; --home-tint:#e3eee7; max-width:1200px; width:100%; padding-top:clamp(3rem,8vh,6rem); }
.home-intro { max-width:850px; margin-bottom:clamp(3.5rem,8vw,6rem); }
.home-eyebrow { max-width:38rem; margin-bottom:1.8rem; color:var(--home-accent); font-size:.72rem; font-weight:700; letter-spacing:.12em; line-height:1.7; }
.home-intro h1 { max-width:850px; margin:0; color:var(--text); font-size:clamp(2.8rem,6vw,5.3rem); font-weight:550; letter-spacing:.005em; line-height:1.12; }
.home-intro h1 span { color:var(--home-accent); }
.home-description { max-width:600px; margin-top:1.6rem; color:var(--text); font-size:1.12rem; line-height:1.85; letter-spacing:.012em; }
.home-intro-actions { display:flex; align-items:center; flex-wrap:wrap; gap:1rem 1.8rem; margin-top:2rem; }
.home-primary-link,.home-secondary-link { display:inline-flex; align-items:center; gap:1.2rem; padding:.8rem 1.1rem; font-weight:650; font-size:.95rem; text-decoration:none; border-radius:6px; }
.home-primary-link { background:var(--home-accent); color:#fff; border:1px solid var(--home-accent); }
.home-secondary-link { padding-inline:0; color:var(--text); }
.home-primary-link:hover { filter:brightness(1.1); }
.home-secondary-link:hover { color:var(--home-accent); }
.home-library { display:block; }
.home-library-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.5rem; padding-bottom:1.2rem; border-bottom:1px solid var(--border-strong); }
.home-library-heading h2 { margin:0; font-size:1.15rem; font-weight:650; }
.home-library-heading > span { color:var(--text); font-size:.88rem; }
a.home-library-card { display:grid; grid-template-columns:8rem minmax(0,1fr) auto; align-items:start; gap:1.8rem; min-height:0; padding:2.2rem .5rem; border:0; border-bottom:1px solid var(--border-strong); border-radius:0; background:transparent; color:var(--text); transition:background .2s ease; text-decoration:none; }
a.home-library-card:hover { transform:none; background:color-mix(in srgb,var(--home-tint) 55%,transparent); border-color:var(--border-strong); }
.home-card-kicker { padding-top:.35rem; font-size:.73rem; font-weight:700; letter-spacing:.1em; color:var(--home-accent); }
.home-hadith-card .home-card-kicker { color:var(--home-blue); }
.home-card-copy { min-width:0; }
.home-card-title { margin:0; font-size:clamp(1.8rem,3vw,2.4rem); font-weight:550; line-height:1.2; letter-spacing:.01em; }
.home-card-description { max-width:510px; margin:.8rem 0 0; color:var(--text); line-height:1.8; font-size:1rem; }
.home-card-topics { display:flex; flex-wrap:wrap; gap:.5rem 1rem; margin-top:1.1rem; color:var(--home-accent); font-size:.78rem; font-weight:600; }
.home-hadith-card .home-card-topics { color:var(--home-blue); }
.home-card-action { display:inline-flex; align-items:center; gap:1rem; margin:.4rem 0 0; padding:0; color:var(--text); font-size:.85rem; font-weight:650; white-space:nowrap; }
.home-card-action > span { font-size:1.3rem; color:var(--home-accent); }
.home-hadith-card .home-card-action > span { color:var(--home-blue); }
.home-closing { display:grid; grid-template-columns:1fr 1fr; gap:2rem; padding:3rem 0 1rem; }
.home-closing p { margin:0; font-size:1.6rem; line-height:1.45; }
.home-closing > span { align-self:center; max-width:420px; color:var(--text); font-size:.94rem; line-height:1.9; }
.home-footer { display:flex; justify-content:space-between; gap:1rem; max-width:1200px; margin:1rem auto 0; padding:1.25rem clamp(1rem,4vw,3rem) 2rem; border-top:1px solid var(--border); color:var(--text); font-size:.82rem; }
:root[data-theme="dark"] .home-main { --home-accent:#83d9bd; --home-blue:#adc1ff; --home-tint:#152820; }
:root[data-theme="dark"] .home-primary-link { color:#0a1913; }
@media(max-width:800px) { a.home-library-card { grid-template-columns:1fr auto; gap:1rem; } .home-card-kicker { grid-column:1 / -1; } .home-card-action { align-self:end; } }
@media(max-width:600px) { .home-intro { margin-bottom:3rem; } a.home-library-card { grid-template-columns:1fr; padding:1.8rem .1rem; } .home-card-action { margin-top:.3rem; } .home-closing { grid-template-columns:1fr; gap:1rem; padding-top:2.2rem; } .home-intro h1 { font-size:clamp(2.45rem,10vw,3.5rem); } .home-footer { flex-direction:column; } }

/* Home discovery: start with a Quran verse or choose a collection. */
.home-main { max-width:1320px; padding-top:clamp(2.5rem,6vh,4.5rem); }
.home-discovery { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(17rem,.8fr); align-items:center; gap:clamp(2rem,6vw,5rem); margin-bottom:clamp(3rem,7vw,5.5rem); }
.home-intro { max-width:unset; margin:0; }
.home-intro h1 { max-width:900px; font-size:clamp(2.6rem,5vw,4.8rem); }
.home-description { max-width:42rem; }
.home-verse-finder { display:grid; gap:.65rem; padding:clamp(1.15rem,2.5vw,1.65rem); border:1px solid var(--border-strong); border-radius:1rem; background:var(--bg-card); box-shadow:var(--shadow-sm); }
.home-finder-kicker { margin:0 0 .35rem; color:var(--home-accent); font-size:.7rem; font-weight:700; letter-spacing:.12em; }
.home-verse-finder label { color:var(--text-soft); font-size:.82rem; }
.home-verse-finder select,.home-verse-finder input { width:100%; min-width:0; min-height:2.9rem; padding:.65rem .75rem; border:1px solid var(--border-strong); border-radius:.55rem; background:var(--bg); color:var(--text); font:inherit; font-size:.95rem; }
.home-verse-finder select { text-overflow:ellipsis; }
.home-verse-finder-bottom { display:grid; grid-template-columns:auto minmax(4rem,1fr) auto; align-items:center; gap:.65rem; margin-top:.1rem; }
.home-verse-finder-bottom label { white-space:nowrap; }
.home-verse-finder-bottom input { max-width:7rem; }
.home-verse-finder-bottom button { display:inline-flex; min-height:2.9rem; align-items:center; justify-content:center; gap:.6rem; padding:.65rem 1rem; border:1px solid var(--home-accent); border-radius:.55rem; background:var(--home-accent); color:var(--text-invert); font:inherit; font-size:.92rem; cursor:pointer; }
.home-finder-status { min-height:1.2em; margin:0; color:var(--text-muted); font-size:.78rem; }
.home-library-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1.25rem; }
.home-discovery-card { display:flex; min-width:0; flex-direction:column; padding:clamp(1.25rem,3vw,2rem); border:1px solid var(--border-strong); border-radius:.9rem; background:var(--bg-card); }
.home-card-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.6rem; }
.home-card-index { color:var(--home-accent); font-size:1rem; font-weight:650; font-variant-numeric:tabular-nums; }
.home-discovery-card .home-card-kicker { padding:0; }
.home-discovery-card .home-card-title { font-size:clamp(1.7rem,3vw,2.35rem); }
.home-discovery-card .home-card-description { max-width:34rem; margin:.65rem 0 1.35rem; }
.home-card-links { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:auto; padding-top:.9rem; border-top:1px solid var(--border); }
.home-card-links a { display:inline-flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border:1px solid var(--border); border-radius:999px; color:var(--text); font-size:.84rem; text-decoration:none; transition:background .16s ease,border-color .16s ease; }
.home-card-links a:hover { border-color:var(--home-accent); background:var(--home-tint); }
.home-card-links a span { color:var(--home-accent); }
.home-hadith-card { --home-accent:#536ab0; --home-tint:#e8eafa; }
:root[data-theme="dark"] .home-hadith-card { --home-accent:#adc1ff; --home-tint:#1c2435; }
.home-closing { margin-top:2.5rem; }
@media(max-width:900px) { .home-discovery { grid-template-columns:1fr; gap:2.25rem; } .home-verse-finder { max-width:34rem; } }
@media(max-width:700px) { .home-library-grid { grid-template-columns:1fr; } .home-card-heading { margin-bottom:1.1rem; } }
@media(max-width:600px) { .home-main { padding-top:2.25rem; } .home-discovery { gap:1.8rem; margin-bottom:3rem; } .home-intro { margin-bottom:0; } .home-intro h1 { font-size:clamp(2.35rem,10vw,3.35rem); } .home-verse-finder-bottom { grid-template-columns:auto minmax(3.5rem,1fr) auto; gap:.45rem; } .home-verse-finder-bottom button { padding-inline:.75rem; } .home-discovery-card { padding:1.25rem; } .home-card-links { gap:.4rem; } .home-card-links a { font-size:.78rem; padding:.5rem .6rem; } }

/* Hadith reader: one card per narration, with translations inside the card. */
.reader-context { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.reader-context > div { display: grid; align-content: start; gap: .35rem; min-width: 0; padding: 1rem 1.15rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-card); }
.reader-context > div > span:first-child { color: var(--text-soft); font-size: .78rem; }
.reader-context strong { min-height: 2.4em; font-size: 1.05rem; }
.reader-context [lang="ur"] { font-size: 1.92rem; line-height: 2.35; }
.reader-item .hadith-header { justify-content: flex-start; gap: .8rem; }
.reader-item .hadith-header h2 { margin: 0; }
.reader-grade { padding: 4px 10px; border: 1px solid var(--border-strong); color: var(--text); font-weight: 650; }
.reader-item .hadith-body { gap: 1.5rem; }
.reader-item .hadith-block { padding-bottom: 1.2rem; border-bottom: 1px solid var(--border); }
.reader-item .hadith-block:last-child { padding-bottom: 0; border-bottom: 0; }
.reader-item .hadith-label { color: var(--text); }
.reader-item .hadith-arabic,
.reader-item .hadith-translation { padding: 0; border: 0; border-radius: 0; background: transparent; }
.reader-item .hadith-arabic { font-size: clamp(1.2rem, 1.92vw, 1.6rem); line-height: 2.15; }
.reader-item .hadith-translation { font-size: 1.26rem; line-height: 1.9; }
.reader-item .hadith-translation.lang-ur { font-size: 1.92rem; line-height: 2.35; }
.translation-details { padding: 0 2rem 1.5rem; }
.translation-details summary { width: fit-content; cursor: pointer; padding: .65rem .9rem; border: 1px solid var(--border); border-radius: var(--r-full); color: var(--text); background: var(--bg-soft); }
.evaluation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding-top: 1rem; }
.evaluation-panel { min-width: 0; padding: 1rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-soft); }
.evaluation-panel h4 { margin-bottom: .75rem; font-size: 1rem; }
.evaluation-panel dl { display: grid; gap: .55rem; }
.evaluation-row { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border); }
.evaluation-row dt { color: var(--text-soft); }
.evaluation-row dd { text-align: right; }
@media (max-width: 700px) { .reader-context, .evaluation-grid { grid-template-columns: 1fr; } .reader-item .hadith-body { padding: 1.4rem 1.1rem; } .translation-details { padding-inline: 1.1rem; } }
@media (max-width: 600px) { .reader-context [lang="ur"] { font-size: 1.55rem; line-height: 2.2; } .reader-item .hadith-arabic { font-size: 1.3rem; line-height: 2; } .reader-item .hadith-translation.lang-ur { font-size: 1.55rem; } }
@media (max-width: 700px) { .home-main { padding-top: 3rem; } .home-library { grid-template-columns: 1fr; } .home-library-card { min-height: 240px; } }

/* ---------- Homepage layout used by the current index.html ---------- */
.premium-home { max-width:1440px; padding-top:clamp(2.5rem,6vw,5rem); }
.premium-home section { margin-bottom:clamp(3rem,6vw,5rem); }
.premium-hero { position:relative; display:flex; min-height:clamp(24rem,43vw,34rem); align-items:center; overflow:hidden; padding:clamp(2rem,7vw,6rem); border:1px solid var(--border-strong); border-radius:var(--r-xl); background:radial-gradient(ellipse at 92% 6%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 48%),linear-gradient(135deg,var(--bg-card),var(--bg-soft)); box-shadow:var(--shadow-md); }
.premium-hero-content { position:relative; z-index:1; width:min(100%,760px); }
.premium-hero-eyebrow,.premium-finder-eyebrow { margin-bottom:1rem; color:var(--accent); font-size:.75rem; font-weight:700; letter-spacing:.15em; }
.premium-hero-title { margin:0; font-size:clamp(2.8rem,7vw,6rem); font-weight:500; letter-spacing:-.035em; line-height:1.03; }
.premium-hero-accent { color:var(--gold-500); }
.premium-hero-desc { max-width:600px; margin:1.35rem 0 0; color:var(--text-soft); font-size:clamp(1rem,1.6vw,1.2rem); line-height:1.8; }
.premium-hero-actions { display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; }
.premium-hero-btn { display:inline-flex; min-height:3.1rem; align-items:center; justify-content:center; gap:.65rem; padding:.75rem 1.15rem; border:1px solid var(--border-strong); border-radius:var(--r-md); background:var(--bg-elev); transition:transform var(--transition),background var(--transition); }
.premium-hero-btn:hover { transform:translateY(-2px); background:var(--accent-soft); }
.premium-hero-btn-primary { border-color:var(--accent); background:var(--accent); color:var(--text-invert); }
.premium-section-ornament-title { display:flex; align-items:center; justify-content:center; gap:1rem; margin:0 0 1.5rem; color:var(--text-soft); font-size:.82rem; font-weight:600; letter-spacing:.13em; text-align:center; text-transform:uppercase; }
.premium-section-ornament-title .ornament { width:min(12vw,5rem); height:1px; background:var(--border-strong); }
.premium-daily-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.premium-daily-card { display:flex; min-width:0; flex-direction:column; padding:clamp(1.2rem,3vw,2rem); border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg-card); box-shadow:var(--shadow-sm); }
.premium-daily-card-header { display:flex; align-items:center; gap:.75rem; color:var(--accent); font-weight:600; }
.premium-daily-card-icon { display:grid; width:2.5rem; height:2.5rem; place-items:center; border-radius:50%; background:var(--accent-soft); }
.premium-daily-card-body { flex:1; padding:1rem 0; }
.premium-daily-card-body p { margin:.45rem 0; }
.premium-daily-card-body .daily-arabic { color:var(--gold-500); font-family:var(--font-arabic); font-size:1.55rem; line-height:1.8; text-align:right; }
.premium-daily-card-body .daily-translation { color:var(--text-soft); font-size:1.05rem; line-height:1.8; }
.premium-daily-card-body .daily-translation-en { font-size:1.05rem; line-height:1.75; }
.premium-daily-card-link,.premium-books-all-link { display:inline-flex; align-items:center; gap:.5rem; color:var(--accent); font-weight:600; }
.premium-finder-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(19rem,1fr); align-items:center; gap:2rem; padding:clamp(1.4rem,4vw,3rem); border:1px solid var(--border-strong); border-radius:var(--r-lg); background:var(--bg-card); }
.premium-finder-eyebrow { margin:0 0 .55rem; }
.premium-finder-heading { font-size:clamp(1.6rem,3vw,2.25rem); font-weight:550; }
.premium-finder-desc { max-width:36rem; margin-top:.5rem; color:var(--text-soft); line-height:1.7; }
.premium-finder-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(5rem,.35fr) auto; align-items:end; gap:.75rem; }
.premium-finder-field { display:grid; gap:.4rem; min-width:0; }
.premium-finder-field label { color:var(--text-soft); font-size:.85rem; }
.premium-finder-field select,.premium-finder-field input { width:100%; min-width:0; height:3rem; padding:.6rem .75rem; border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--bg); color:var(--text); font:inherit; }
.premium-finder-btn { height:3rem; padding:0 1rem; border:1px solid var(--accent); border-radius:var(--r-sm); background:var(--accent); color:var(--text-invert); font:inherit; cursor:pointer; }
.premium-finder-status { min-height:1.3em; margin-top:.55rem; color:var(--text-muted); font-size:.8rem; }
.premium-books-header { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }
.premium-section-title { display:flex; flex-direction:column; }
.premium-section-title-ar { color:var(--gold-500); font-family:var(--font-arabic); font-size:1.5rem; }
.premium-section-title-en { font-size:clamp(1.4rem,3vw,2rem); font-weight:550; }
.premium-books-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr)); gap:1rem; }
.premium-book-card { display:flex; flex-direction:column; min-height:11rem; padding:1.25rem; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-card); }
.premium-book-card:hover { border-color:var(--accent); }
.premium-book-card-ar { color:var(--gold-500); font-family:var(--font-arabic); font-size:1.45rem; text-align:right; }
.premium-book-card-title { margin:.5rem 0; font-size:1.1rem; }
.premium-book-card-meta { margin-top:auto; color:var(--text-soft); font-size:.85rem; }
.premium-quran-links-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.premium-quran-link-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:1rem; padding:1.25rem; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-card); }
.premium-quran-link-card:hover { border-color:var(--accent); background:var(--bg-elev); }
.premium-quran-link-icon { font-size:1.5rem; }
.premium-quran-link-card div { display:grid; gap:.25rem; }
.premium-quran-link-card small { color:var(--text-soft); line-height:1.5; }
.premium-quran-link-arrow { color:var(--accent); }
.premium-updates-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.premium-update-item { display:flex; gap:.8rem; padding:.9rem 1rem; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--bg-card); }
.premium-update-date { color:var(--accent); font-weight:650; }
.premium-update-text { color:var(--text-soft); }
.premium-about-card { padding:clamp(1.5rem,5vw,3.5rem); border:1px solid var(--border-strong); border-radius:var(--r-lg); background:linear-gradient(135deg,var(--bg-card),var(--bg-soft)); text-align:center; }
.premium-about-bismillah { color:var(--gold-500); font-family:var(--font-arabic); font-size:1.6rem; }
.premium-about-card h2 { margin:.5rem 0; font-size:2rem; }
.premium-about-text { max-width:48rem; margin:0 auto; color:var(--text-soft); line-height:1.8; }
.premium-about-links { display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; margin-top:1.25rem; }
.premium-btn-outline { border:1px solid var(--border-strong); }
.premium-footer { padding:3rem clamp(1.5rem,4vw,3rem) 1rem; border-top:1px solid var(--border); background:var(--bg-soft); }
.premium-footer-top { display:grid; max-width:var(--content-max); grid-template-columns:2fr repeat(3,1fr); gap:2rem; margin:0 auto 2rem; }
.premium-footer-brand { max-width:26rem; }
.premium-footer-brand h3 { margin:.4rem 0; }
.premium-footer-bismillah { color:var(--gold-500); font-family:var(--font-arabic); }
.premium-footer-brand>p:last-child { color:var(--text-soft); line-height:1.7; }
.premium-footer-col { display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; }
.premium-footer-col h4 { margin-bottom:.3rem; }
.premium-footer-col a,.premium-footer-link-btn { color:var(--text-soft); text-align:left; }
.premium-footer-bottom { display:flex; max-width:var(--content-max); justify-content:space-between; gap:1rem; margin:auto; padding-top:1rem; border-top:1px solid var(--border); color:var(--text-muted); font-size:.8rem; }
@media(max-width:850px) { .premium-finder-card { grid-template-columns:1fr; gap:1.25rem; } .premium-quran-links-grid { grid-template-columns:1fr; } .premium-footer-top { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .premium-home { padding-top:1.25rem; } .premium-hero { min-height:27rem; padding:1.5rem; } .premium-hero-title { font-size:clamp(2.6rem,13vw,4rem); } .premium-hero-desc { font-size:1rem; } .premium-daily-grid { grid-template-columns:1fr; } .premium-finder-row { grid-template-columns:minmax(0,1fr) minmax(4rem,.35fr); } .premium-finder-btn { grid-column:1/-1; } .premium-books-header { align-items:start; flex-direction:column; } .premium-updates-grid { grid-template-columns:1fr; } .premium-footer-top { grid-template-columns:1fr 1fr; gap:1.4rem 1rem; } .premium-footer-brand { grid-column:1/-1; } .premium-footer-bottom { flex-direction:column; } }

/* Hadith chapter, section, and reading pages use their own two-theme palette. */
.catalog-main {
  --hadith-teal: #176b59;
  --hadith-teal-soft: rgba(23,107,89,.09);
  --hadith-blue: #345c9c;
  --hadith-blue-soft: rgba(52,92,156,.08);
  --hadith-amber: #925812;
  --hadith-amber-soft: rgba(146,88,18,.08);
  --hadith-line: rgba(23,107,89,.24);
  --hadith-card: linear-gradient(145deg,#f5f7f3,var(--bg-card));
  --hadith-card-alt: linear-gradient(145deg,#f4f6fb,var(--bg-card));
  --hadith-header: linear-gradient(110deg,rgba(23,107,89,.12),var(--bg-card) 72%);
  --hadith-ink: #282925;
  --hadith-arabic: #253d37;
}
.category-grid[data-catalog-kind="chapters"] .collection-card,
.category-grid[data-catalog-kind="sections"] .collection-card {
  min-height: 17rem;
  padding: 1.6rem 1.55rem 1.35rem 1.8rem;
  border-color: var(--hadith-line);
  background: var(--hadith-card);
}
.category-grid[data-catalog-kind="sections"] .collection-card { background: var(--hadith-card-alt); }
.category-grid[data-catalog-kind="chapters"] .collection-card::before,
.category-grid[data-catalog-kind="sections"] .collection-card::before {
  width: 5px;
  background: linear-gradient(180deg,var(--hadith-teal),var(--hadith-blue));
  transform: scaleY(1);
}
.category-grid[data-catalog-kind="sections"] .collection-card::before {
  background: linear-gradient(180deg,var(--hadith-blue),var(--hadith-amber));
}
.category-grid[data-catalog-kind="chapters"] .collection-card:hover,
.category-grid[data-catalog-kind="sections"] .collection-card:hover {
  border-color: var(--hadith-teal);
  box-shadow: 0 10px 26px rgba(23,60,49,.12);
}
.category-grid[data-catalog-kind="sections"] .collection-card:hover { border-color: var(--hadith-blue); }
.category-grid[data-catalog-kind="chapters"] .meta-pill,
.category-grid[data-catalog-kind="sections"] .meta-pill {
  border: 1px solid color-mix(in srgb,var(--hadith-teal) 32%,transparent);
  background: var(--hadith-teal-soft);
  color: var(--hadith-teal);
}
.category-grid[data-catalog-kind="sections"] .meta-pill {
  border-color: color-mix(in srgb,var(--hadith-blue) 32%,transparent);
  background: var(--hadith-blue-soft);
  color: var(--hadith-blue);
}
.category-grid[data-catalog-kind="chapters"] .collection-card .card-author[lang="ur"] { color:var(--hadith-teal); }
.category-grid[data-catalog-kind="sections"] .collection-card .card-author[lang="ur"] { color:var(--hadith-blue); }
.reader-context > div {
  border-color:var(--hadith-line);
  background:linear-gradient(135deg,var(--hadith-teal-soft),var(--bg-card) 74%);
}
.reader-context > div + div {
  border-color:color-mix(in srgb,var(--hadith-blue) 30%,transparent);
  background:linear-gradient(135deg,var(--hadith-blue-soft),var(--bg-card) 74%);
}
.reader-context > div > span:first-child { color:var(--hadith-teal); font-weight:650; letter-spacing:.04em; }
.reader-context > div + div > span:first-child { color:var(--hadith-blue); }
.reader-context > div > span[lang="ur"] { color:var(--hadith-teal); }
.reader-context > div + div > span[lang="ur"] { color:var(--hadith-blue); }
.reader-list .reader-item {
  border-color:var(--hadith-line);
  background:linear-gradient(155deg,var(--bg-card),color-mix(in srgb,var(--hadith-teal-soft) 65%,var(--bg-card)));
}
.reader-list .reader-item .hadith-header {
  background:var(--hadith-header);
  border-bottom-color:var(--hadith-line);
}
.reader-list .reader-item .hadith-header h2 { color:var(--hadith-teal); }
.reader-list .reader-grade { border-color:var(--hadith-teal); color:var(--hadith-teal); background:var(--hadith-teal-soft); }
.reader-list .reader-item .hadith-block { border-bottom-color:var(--hadith-line); }
.reader-list .reader-item .hadith-label { color:var(--hadith-teal); }
.reader-list .reader-item .hadith-arabic { color:var(--hadith-arabic); }
.reader-list .reader-item .hadith-translation.lang-ur { color:var(--hadith-ink); }
.reader-list .reader-item .hadith-block[data-language="hindi"] .hadith-label { color:var(--hadith-amber); }
.reader-list .reader-item .hadith-block[data-language="sharah_urdu"] .hadith-label,
.reader-list .reader-item .hadith-block[data-language="sharah_hinglish"] .hadith-label { color:var(--hadith-blue); }
.reader-list .translation-details summary { border-color:var(--hadith-line); background:var(--hadith-teal-soft); }
.reader-list .evaluation-panel { border-color:var(--hadith-line); background:linear-gradient(145deg,var(--hadith-teal-soft),var(--bg-soft)); }
.reader-list .evaluation-panel h4 { color:var(--hadith-teal); }
.hadith-number-search { display:grid; gap:.4rem; width:min(100%,34rem); margin:.5rem 0 1rem; }
.hadith-number-search label { color:#d4b25a; font-size:.9rem; font-weight:650; }
.hadith-number-search > div { display:flex; gap:.6rem; }
.hadith-number-search input { min-width:0; min-height:2.8rem; flex:1; padding:.6rem .8rem; border:1px solid var(--hadith-line); border-radius:var(--r-md); background:var(--bg-card); color:var(--text); font:inherit; }
.hadith-number-search input:focus { outline:2px solid color-mix(in srgb,#d4b25a 55%,transparent); outline-offset:2px; }
.hadith-number-search .chip { border-color:color-mix(in srgb,#d4b25a 45%,transparent); background:color-mix(in srgb,#d4b25a 9%,var(--bg-card)); color:#d4b25a; }
.hadith-number-search .chip:hover { border-color:#d4b25a; background:#d4b25a; color:#111; }
.hadith-adjacent-link { border-color:color-mix(in srgb,var(--hadith-teal) 40%,transparent); background:var(--hadith-teal-soft); color:var(--hadith-teal); }
.hadith-adjacent-link:hover { border-color:var(--hadith-teal); background:var(--hadith-teal); color:#fff; }
.hadith-adjacent { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.75rem; margin:1rem 0; padding:.75rem; border:1px solid var(--hadith-line); border-radius:var(--r-md); background:linear-gradient(100deg,var(--hadith-teal-soft),var(--bg-card) 48%,var(--hadith-blue-soft)); text-align:center; }
.hadith-adjacent > :first-child { justify-self:start; }
.hadith-adjacent > :last-child { justify-self:end; }
.hadith-adjacent > span:nth-child(2) { color:var(--hadith-teal); font-weight:650; }
.category-grid[data-catalog-kind="chapters"] + .library-pagination,
.category-grid[data-catalog-kind="sections"] + .library-pagination { color:var(--hadith-teal); }
:root[data-theme="dark"] .catalog-main {
  --hadith-teal: #73e2c2;
  --hadith-teal-soft: rgba(62,205,165,.13);
  --hadith-blue: #9bbcff;
  --hadith-blue-soft: rgba(90,133,208,.14);
  --hadith-amber: #f1bf79;
  --hadith-amber-soft: rgba(196,139,63,.12);
  --hadith-line: rgba(115,226,194,.28);
  --hadith-card: linear-gradient(145deg,#202b27,var(--bg-card));
  --hadith-card-alt: linear-gradient(145deg,#222832,var(--bg-card));
  --hadith-header: linear-gradient(110deg,rgba(23,107,89,.3),var(--bg-card) 72%);
  --hadith-ink: #ffffff;
  --hadith-arabic: #f2e7ce;
}
:root[data-theme="dark"] .category-grid[data-catalog-kind="chapters"] .collection-card:hover,
:root[data-theme="dark"] .category-grid[data-catalog-kind="sections"] .collection-card:hover { box-shadow:0 10px 28px rgba(0,0,0,.28); }
:root[data-theme="dark"] .reader-list .reader-item { background:linear-gradient(155deg,#292b2a,#202722); }
:root[data-theme="dark"] .reader-list .reader-item .hadith-translation { color:#ffffff; }
:root[data-theme="dark"] .reader-list .evaluation-panel { background:linear-gradient(145deg,rgba(25,65,54,.4),var(--bg-soft)); }
@media (max-width:700px) {
  .hadith-adjacent { grid-template-columns:1fr 1fr; }
  .hadith-adjacent > span:nth-child(2) { grid-column:1 / -1; grid-row:1; }
  .hadith-adjacent > :last-child { grid-column:2; grid-row:2; }
}

/* Quran reader accents: color cues for ayah numbers, Arabic, and translations. */
.quran-main {
  --quran-teal: #176b59;
  --quran-teal-soft: rgba(23, 107, 89, .11);
  --quran-amber: #9a5a12;
  --quran-blue: #345c9c;
  --quran-heading: #252b28;
  --quran-subheading: #343a36;
  --quran-copy: #343a36;
  --quran-arabic: #3c3428;
  --quran-line: rgba(23, 107, 89, .26);
  --quran-chip-bg: rgba(23, 107, 89, .08);
  --quran-chip-text: #173d33;
  --quran-nav-bg: #176b59;
  --quran-nav-text: #ffffff;
}
.quran-reader-heading h1 { color:var(--quran-heading); }
.quran-reader-heading p:not(.catalog-eyebrow) { color:var(--quran-subheading); }
.quran-reader-arabic-title { color:var(--quran-teal); text-shadow:0 0 18px color-mix(in srgb,var(--quran-teal) 14%,transparent); }
.quran-reader-settings { border-color:var(--quran-line); }
.quran-verse-card { border-bottom-color:var(--quran-line); }
.quran-verse-card > header > span:first-child {
  padding:.2rem .65rem;
  border:1px solid color-mix(in srgb,var(--quran-teal) 42%,transparent);
  border-radius:var(--r-full);
  background:var(--quran-teal-soft);
  color:var(--quran-teal);
  font-weight:700;
}
.quran-verse-rule { background:linear-gradient(90deg,color-mix(in srgb,var(--quran-teal) 40%,transparent),color-mix(in srgb,var(--quran-teal) 8%,transparent)); }
.quran-arabic { color:var(--quran-arabic); }
.quran-translation-text { padding-inline-start:.9rem; border-inline-start:2px solid color-mix(in srgb,var(--quran-teal) 66%,transparent); }
.quran-translation-text[lang="ur"] { border-inline-start-color:var(--quran-blue); }
.quran-translation-text[lang="hi"] { border-inline-start-color:var(--quran-amber); }
.quran-translation-text p, .quran-tafsir-text p { color:var(--quran-copy); }
.quran-translation-text > span { color:var(--quran-teal); font-size:.95rem; font-weight:600; }
.quran-translation-chip { border-color:color-mix(in srgb,var(--quran-teal) 44%,transparent); background:var(--quran-chip-bg); color:var(--quran-chip-text); }
.quran-translation-chip button { color:var(--quran-teal); }
.quran-tafsir-chip { border-color:color-mix(in srgb,var(--quran-teal) 44%,transparent); background:var(--quran-chip-bg); color:var(--quran-chip-text); }
.quran-tafsir-chip button { color:var(--quran-teal); }
.quran-tafsir-add .chip { border-color:color-mix(in srgb,var(--quran-teal) 55%,transparent); background:var(--quran-nav-bg); color:var(--quran-nav-text); }
.quran-surah-number { border-color:color-mix(in srgb,var(--quran-teal) 55%,transparent); color:var(--quran-teal); }
.quran-surah-row:hover { background:var(--quran-teal-soft); }
.quran-shell { grid-template-columns:var(--sidebar-w) minmax(0,1fr); }
.quran-shell .quran-main { width:100%; max-width:none; min-width:0; margin:0; padding:2.5rem clamp(1.25rem,3vw,3rem); }
.quran-sidebar .sidebar-title { color:var(--text); }
.quran-sidebar .nav-link { color:var(--text); }
.quran-sidebar .nav-link.active { background:var(--quran-nav-bg); color:var(--quran-nav-text); }
.quran-sidebar-backdrop { display:none; }
:root[data-theme="dark"] .quran-main {
  --quran-teal: #73e2c2;
  --quran-teal-soft: rgba(62, 205, 165, .2);
  --quran-amber: #f1bf79;
  --quran-blue: #9bbcff;
  --quran-heading: #f3f4ed;
  --quran-subheading: #d3dfd8;
  --quran-copy: #edf2ee;
  --quran-arabic: #f2e7ce;
  --quran-line: rgba(115,226,194,.3);
  --quran-chip-bg: rgba(19,58,49,.48);
  --quran-chip-text: #ffffff;
  --quran-nav-bg: #174638;
  --quran-nav-text: #eafff7;
}
:root[data-theme="dark"] .quran-reader-heading p:not(.catalog-eyebrow) { color:#d3dfd8; }
:root[data-theme="dark"] .quran-reader-arabic-title { text-shadow:0 0 24px rgba(91,220,184,.16); }
:root[data-theme="dark"] .quran-reader-settings { border-color:rgba(115,226,194,.32); }
:root[data-theme="dark"] .quran-verse-card { border-bottom-color:rgba(115,226,194,.3); }
:root[data-theme="dark"] .quran-verse-card > header > span:first-child { border-color:rgba(115,226,194,.55); }
:root[data-theme="dark"] .quran-verse-rule { background:linear-gradient(90deg,rgba(115,226,194,.42),rgba(115,226,194,.08)); }
:root[data-theme="dark"] .quran-translation-text { border-inline-start-color:rgba(115,226,194,.72); }
:root[data-theme="dark"] .quran-translation-text[lang="ur"] { border-inline-start-color:var(--quran-blue); }
:root[data-theme="dark"] .quran-translation-text[lang="hi"] { border-inline-start-color:var(--quran-amber); }
:root[data-theme="dark"] .quran-translation-chip { border-color:rgba(115,226,194,.5); background:rgba(19,58,49,.48); color:#eaf8f2; }
:root[data-theme="dark"] .quran-tafsir-chip { border-color:rgba(115,226,194,.5); background:rgba(19,58,49,.48); }
:root[data-theme="dark"] .quran-tafsir-add .chip { border-color:rgba(115,226,194,.62); background:#174638; color:#eafff7; }
:root[data-theme="dark"] .quran-surah-number { border-color:rgba(115,226,194,.62); }
:root[data-theme="dark"] .quran-surah-row:hover { background:rgba(25,91,73,.22); }
:root[data-theme="dark"] .quran-sidebar .nav-link.active { background:#174638; color:#eafff7; }
@media (max-width:1024px) {
  .quran-shell { grid-template-columns:1fr; }
  .quran-shell .quran-sidebar { position:fixed; top:var(--topbar-h); left:0; z-index:90; transform:translateX(-100%); width:min(var(--sidebar-w),86vw); }
  .quran-shell .quran-sidebar.open { transform:translateX(0); }
  .quran-sidebar-backdrop { position:fixed; inset:var(--topbar-h) 0 0; z-index:80; display:none; background:rgba(0,0,0,.64); }
  body.quran-sidebar-open .quran-sidebar-backdrop { display:block; }
}
@media (max-width:640px) {
  .quran-shell .quran-main { padding:2rem 1rem; }
}

/* Open Hadith landing: keep Sunni and Shia choices visible together. */
.hadith-landing { --landing-ink:#21332e; --landing-muted:#46564f; --landing-line:#c9d8d0; --landing-surface:#fbfcf9; --landing-sunni:#176b59; --landing-sunni-soft:#e5f2ec; --landing-shia:#5368a3; --landing-shia-soft:#edf0fa; max-width:1240px; margin:0 auto; }
.hadith-landing-hero { position:relative; overflow:hidden; padding:clamp(1.7rem,5vw,3.4rem); border:1px solid var(--landing-line); border-radius:1.5rem; background:radial-gradient(ellipse at 90% 0%,rgba(23,107,89,.12),transparent 38%),linear-gradient(135deg,var(--landing-surface),var(--bg-card)); }
.hadith-landing-hero::after { content:"۞"; position:absolute; inset-inline-end:2rem; top:1.15rem; color:rgba(23,107,89,.12); font-family:var(--font-arabic); font-size:clamp(5rem,12vw,9rem); line-height:1; pointer-events:none; }
.hadith-landing-hero .catalog-eyebrow { position:relative; z-index:1; margin:0 0 .7rem; color:var(--landing-sunni); font-weight:700; }
.hadith-landing-hero h1 { position:relative; z-index:1; margin:.2rem 0 .7rem; color:var(--landing-ink); font-size:clamp(2.5rem,6vw,4.3rem); }
.hadith-landing-lede { position:relative; z-index:1; max-width:54rem; margin:0; color:var(--landing-muted); font-size:1.12rem; line-height:1.75; }
.hadith-landing-summary { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.4rem; }
.hadith-landing-summary span { display:flex; align-items:center; gap:.4rem; padding:.55rem .85rem; border:1px solid var(--landing-line); border-radius:999px; background:var(--bg-card); color:var(--landing-ink); }
.hadith-landing-summary strong { color:var(--landing-sunni); font-size:1.1rem; }
.hadith-family-quick-nav { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; max-width:34rem; margin:1.25rem 0 0; }
.hadith-family-quick-nav a { display:grid; grid-template-columns:1fr auto; align-items:center; gap:.12rem .5rem; padding:.7rem .9rem; border:1px solid var(--landing-sunni); border-radius:.8rem; background:var(--landing-sunni); color:#fff; font-weight:750; text-decoration:none; }
.hadith-family-quick-nav a span:first-of-type { grid-column:1; color:inherit; font-size:.76rem; font-weight:500; opacity:.94; }
.hadith-family-quick-nav a span:last-of-type { grid-column:2; grid-row:1 / span 2; font-size:1.25rem; }
.hadith-family-quick-nav .quick-shia { border-color:var(--landing-shia); background:var(--landing-shia); }
.hadith-family-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:1.1rem; margin:1.15rem 0; }
.hadith-family-card { display:flex; min-width:0; flex-direction:column; padding:clamp(1.2rem,3vw,2rem); border:1px solid var(--landing-line); border-radius:1.35rem; background:linear-gradient(150deg,var(--landing-sunni-soft),var(--landing-surface) 62%,var(--bg-card)); box-shadow:0 12px 32px rgba(31,55,45,.07); }
.hadith-family-shia { background:linear-gradient(150deg,var(--landing-shia-soft),var(--landing-surface) 62%,var(--bg-card)); }
.hadith-family-topline { display:flex; align-items:center; gap:.7rem; color:var(--landing-sunni); }
.hadith-family-shia .hadith-family-topline { color:var(--landing-shia); }
.hadith-family-kicker { font-size:.72rem; font-weight:750; letter-spacing:.15em; }
.hadith-family-card h2 { margin:1rem 0 .4rem; color:var(--landing-ink); font-size:clamp(1.8rem,3.5vw,2.4rem); }
.hadith-family-intro { max-width:34rem; margin:0; color:var(--landing-muted); line-height:1.7; }
.hadith-family-stats { display:flex; gap:.65rem; margin:1.2rem 0 1.3rem; }
.hadith-family-stats > div { display:grid; gap:.08rem; min-width:7.2rem; padding:.65rem .8rem; border:1px solid var(--landing-line); border-radius:.8rem; background:var(--bg-card); }
.hadith-family-stats strong { color:var(--landing-sunni); font-size:1.35rem; line-height:1.15; }
.hadith-family-shia .hadith-family-stats strong { color:var(--landing-shia); }
.hadith-family-stats span { color:var(--landing-muted); font-size:.8rem; }
.hadith-family-action { display:flex; min-height:3.3rem; align-items:center; justify-content:space-between; gap:1rem; margin-top:auto; padding:.8rem 1rem; border:1px solid var(--landing-sunni); border-radius:.85rem; background:var(--landing-sunni); color:#fff; font-weight:700; text-decoration:none; }
.hadith-family-shia .hadith-family-action { border-color:var(--landing-shia); background:var(--landing-shia); }
.hadith-family-action:hover { filter:brightness(1.08); }
.hadith-back-link { position:relative; z-index:1; display:inline-flex; margin-top:1.1rem; color:var(--landing-sunni); font-weight:700; text-decoration:none; }
.hadith-section-list { display:grid; gap:.55rem; margin-top:.2rem; }
.hadith-section-link { display:grid; grid-template-columns:2.8rem minmax(0,1fr) auto; align-items:center; gap:.75rem; padding:.75rem; border:1px solid var(--landing-line); border-radius:.8rem; background:var(--bg-card); color:var(--landing-ink); text-decoration:none; transition:transform .16s ease,border-color .16s ease; }
.hadith-section-link:hover { transform:translateY(-2px); border-color:var(--landing-sunni); }
.hadith-family-shia .hadith-section-link:hover { border-color:var(--landing-shia); }
.hadith-section-index { display:grid; width:2.4rem; height:2.4rem; place-items:center; border-radius:.65rem; background:var(--landing-sunni-soft); color:var(--landing-sunni); font-size:.8rem; font-weight:750; font-variant-numeric:tabular-nums; }
.hadith-family-shia .hadith-section-index { background:var(--landing-shia-soft); color:var(--landing-shia); }
.hadith-section-link > span:nth-child(2) { display:grid; gap:.15rem; }
.hadith-section-link strong { font-size:.98rem; }
.hadith-section-link small { color:var(--landing-muted); font-size:.8rem; }
.hadith-section-arrow { color:var(--landing-sunni); font-size:1.3rem; }
.hadith-family-shia .hadith-section-arrow { color:var(--landing-shia); }
.hadith-landing-sections .hadith-family-grid { grid-template-columns:minmax(0,1fr); max-width:760px; margin-inline:auto; }
.hadith-collection-count { position:relative; z-index:1; display:flex; align-items:baseline; gap:.4rem; margin:1.1rem 0 0; color:var(--landing-ink); }
.hadith-collection-count strong { color:var(--landing-sunni); font-size:1.2rem; }
.hadith-collection-count span { color:var(--landing-sunni); }
.hadith-section-list-open { --section-accent:var(--landing-sunni); display:block; max-width:900px; margin:1.5rem auto 0; border-top:1px solid var(--landing-line); }
.hadith-section-list-open.hadith-section-list-shia { --section-accent:var(--landing-shia); }
.hadith-section-list-open .hadith-section-link { grid-template-columns:3rem minmax(0,1fr) auto auto; min-height:4.5rem; padding:1rem .55rem; border:0; border-bottom:1px solid var(--landing-line); border-radius:0; background:transparent; color:var(--landing-ink); }
.hadith-section-list-open .hadith-section-link:hover { transform:none; border-color:var(--landing-line); background:color-mix(in srgb,var(--section-accent) 8%,transparent); }
.hadith-section-list-open .hadith-section-index { display:block; width:auto; height:auto; padding:0; border-radius:0; background:transparent; color:var(--section-accent); font-size:1rem; }
.hadith-section-list-open .hadith-section-link strong { font-size:1.05rem; }
.hadith-section-count { color:var(--section-accent); font-size:.9rem; font-weight:650; white-space:nowrap; }
.hadith-section-list-open .hadith-section-arrow { color:var(--section-accent); }
.hadith-landing-note { display:flex; align-items:center; gap:.8rem; margin:1.15rem 0 0; padding:.9rem 1.1rem; border-top:1px solid var(--landing-line); color:var(--landing-muted); }
.hadith-landing-note p { margin:0; line-height:1.55; }
.hadith-note-symbol { color:var(--landing-sunni); font-size:1.3rem; }
:root[data-theme="dark"] .hadith-landing { --landing-ink:#f4f6f3; --landing-muted:#e0e7e2; --landing-line:rgba(154,201,183,.29); --landing-surface:#171c1a; --landing-sunni:#73e2c2; --landing-sunni-soft:rgba(38,119,94,.23); --landing-shia:#b5c6ff; --landing-shia-soft:rgba(75,92,153,.25); }
:root[data-theme="dark"] .hadith-landing-hero { background:radial-gradient(ellipse at 90% 0%,rgba(62,205,165,.15),transparent 38%),linear-gradient(135deg,#171c1a,#202322); }
:root[data-theme="dark"] .hadith-landing-hero::after { color:rgba(115,226,194,.13); }
:root[data-theme="dark"] .hadith-family-card { box-shadow:0 14px 34px rgba(0,0,0,.2); }
:root[data-theme="dark"] .hadith-family-action { color:#07120f; }
:root[data-theme="dark"] .hadith-family-shia .hadith-family-action { color:#0b0e18; }
:root[data-theme="dark"] .hadith-family-quick-nav a { color:#07120f; }
:root[data-theme="dark"] .hadith-family-quick-nav .quick-shia { color:#0b0e18; }
@media(max-width:700px) { .hadith-landing-hero { padding:1.5rem; } .hadith-landing-hero::after { inset-inline-end:.6rem; top:.7rem; font-size:5.2rem; } .hadith-family-grid { grid-template-columns:1fr; gap:.8rem; } .hadith-family-card { padding:1.25rem; } .hadith-family-stats > div { flex:1; min-width:0; } .hadith-landing-note { align-items:flex-start; } }
@media(max-width:600px) { .hadith-section-list-open .hadith-section-link { grid-template-columns:2.2rem minmax(0,1fr) auto; gap:.55rem; } .hadith-section-count { grid-column:2; grid-row:2; } .hadith-section-arrow { grid-column:3; grid-row:1 / span 2; } }

/* Give the collection book catalogue its own Sunni/Shia color identity. */
.hadith-book-grid[data-maslak="sunni"] { --book-accent:var(--hadith-teal); --book-soft:var(--hadith-teal-soft); --book-edge:color-mix(in srgb,var(--hadith-teal) 35%,var(--border)); --book-surface:linear-gradient(145deg,#edf5ef,var(--bg-card) 68%); }
.hadith-book-grid[data-maslak="shia"] { --book-accent:var(--hadith-blue); --book-soft:var(--hadith-blue-soft); --book-edge:color-mix(in srgb,var(--hadith-blue) 38%,var(--border)); --book-surface:linear-gradient(145deg,#eef1fb,var(--bg-card) 68%); }
.hadith-book-grid .collection-card { min-height:17rem; padding:1.5rem 1.5rem 1.25rem 1.8rem; border-color:var(--book-edge); background:var(--book-surface); }
.hadith-book-grid .collection-card::before { width:5px; background:linear-gradient(180deg,var(--book-accent),var(--hadith-amber)); transform:scaleY(1); }
.hadith-book-grid .collection-card:hover { transform:translateY(-3px); border-color:var(--book-accent); background:linear-gradient(145deg,var(--book-soft),var(--bg-card) 72%); box-shadow:0 12px 28px rgba(29,55,46,.13); }
.hadith-book-grid .collection-card .card-ar { margin-bottom:.2rem; color:var(--book-accent); font-size:1.65rem; line-height:1.8; }
.hadith-book-grid .collection-card .card-en { color:var(--text); font-size:1.2rem; line-height:1.4; }
.hadith-book-grid .collection-card .card-author,
.hadith-book-grid .collection-card .card-meta { color:var(--text); }
.hadith-book-grid .collection-card .meta-pill { border-color:var(--book-edge); background:var(--book-soft); color:var(--book-accent); }
.hadith-book-grid .collection-card p:last-child { margin-top:auto; color:var(--book-accent); font-weight:700; }
:root[data-theme="dark"] .hadith-book-grid[data-maslak="sunni"] { --book-surface:linear-gradient(145deg,#1b302a,var(--bg-card) 72%); }
:root[data-theme="dark"] .hadith-book-grid[data-maslak="shia"] { --book-surface:linear-gradient(145deg,#20283a,var(--bg-card) 72%); }
:root[data-theme="dark"] .hadith-book-grid .collection-card:hover { box-shadow:0 14px 30px rgba(0,0,0,.32); }

/* One sidebar control across the Home, Hadith, and Quran pages. */
.app-shell { grid-template-columns:var(--sidebar-w) minmax(0,1fr); transition:grid-template-columns .24s ease; }
.app-shell > main { min-width:0; }
.app-shell.sidebar-collapsed { grid-template-columns:0 minmax(0,1fr); }
.app-shell.sidebar-collapsed > .sidebar { width:0; min-width:0; padding-inline:0; overflow:hidden; border:0; visibility:hidden; }
.catalog-shell { width:100%; }
.sidebar-toggle { flex:0 0 auto; width:42px; height:42px; padding:9px; border:1px solid var(--border); border-radius:12px; background:var(--bg-elev); color:var(--text); }
.sidebar-toggle svg { width:22px; height:22px; }
.sidebar-backdrop { display:none; }
.site-sidebar .sidebar-title { padding-inline:.25rem; color:var(--text); }
.site-sidebar .nav-link[aria-current="page"] { background:var(--bg-elev); color:var(--text); }
@media(max-width:1024px) {
  .app-shell { grid-template-columns:1fr; }
  .app-shell > .sidebar { position:fixed; top:var(--topbar-h); left:0; z-index:90; width:min(var(--sidebar-w),86vw); height:calc(100vh - var(--topbar-h)); transform:translateX(-105%); visibility:visible; box-shadow:var(--shadow-lg); }
  .app-shell > .sidebar.open { transform:translateX(0); }
  .app-shell.sidebar-collapsed { grid-template-columns:1fr; }
  .app-shell.sidebar-collapsed > .sidebar { width:min(var(--sidebar-w),86vw); padding:1.5rem 0; visibility:hidden; }
  .sidebar-backdrop { position:fixed; inset:var(--topbar-h) 0 0; z-index:80; display:none; width:100%; height:calc(100vh - var(--topbar-h)); border:0; background:rgba(0,0,0,.58); }
  body.sidebar-open .sidebar-backdrop { display:block; }
  body.sidebar-open { overflow:hidden; }
}
:root[data-theme="dark"] .site-sidebar .nav-link[aria-current="page"] { background:#174638; color:#eafff7; }

/* Account and cross-device bookmark controls */
.auth-open { border:1px solid var(--border-strong); color:var(--text); background:var(--bg-card); cursor:pointer; }
.auth-open:hover { border-color:var(--hadith-teal); }
.account-dialog { position:fixed; inset:0; width:min(92vw, 34rem); max-width:34rem; max-height:min(88dvh, 56rem); margin:auto; overflow-y:auto; box-sizing:border-box; border:1px solid var(--border-strong); border-radius:1.35rem; padding:1.5rem; color:var(--text); background:var(--bg-card); box-shadow:0 24px 80px rgba(0,0,0,.35); }
.account-dialog::backdrop { background:rgba(0,0,0,.62); backdrop-filter:blur(4px); }
.account-dialog h2 { margin:.2rem 0 .5rem; font-family:var(--font-display); font-size:1.65rem; }
.account-copy { color:var(--text-muted); line-height:1.55; margin:0 0 1rem; }
.account-dialog-close { display:flex; justify-content:flex-end; margin:-.5rem -.4rem .5rem; }
.account-dialog-close button { border:0; background:transparent; color:var(--text-muted); font-size:1.7rem; cursor:pointer; }
.account-social,.account-tabs { display:flex; gap:.55rem; flex-wrap:wrap; }
.auth-provider { width:100%; min-height:3.15rem; display:flex; align-items:center; justify-content:center; gap:.8rem; border:1px solid #dadce0; border-radius:.55rem; font:500 1rem/1.2 var(--font-ui); cursor:pointer; }
.provider-logo { width:1.25rem; height:1.25rem; flex:0 0 auto; }
.auth-provider-google { color:#3c4043; background:#fff; }
.auth-provider-google:hover { background:#f8faff; box-shadow:0 1px 2px rgba(60,64,67,.25); }
.auth-provider-apple { color:#fff; background:#000; border-color:#000; }
.auth-provider-apple:hover { background:#202124; }
:root[data-theme="dark"] .auth-provider-apple { color:#000; background:#fff; border-color:#fff; }
:root[data-theme="dark"] .auth-provider-apple:hover { background:#f2f2f2; }
.auth-provider:disabled { opacity:.6; cursor:wait; }
.account-divider { margin:1rem 0; text-align:center; color:var(--text-muted); font-size:.9rem; }
.account-tabs { border-bottom:1px solid var(--border); margin-bottom:1rem; }
.account-tabs button,.account-reset { padding:.65rem .8rem; border:0; background:transparent; color:var(--text-muted); cursor:pointer; font:inherit; }
.account-tabs button[aria-pressed="true"] { color:var(--hadith-teal); border-bottom:2px solid var(--hadith-teal); }
#emailAuthForm { display:grid; gap:.8rem; }
#emailAuthForm label { display:grid; gap:.35rem; color:var(--text-muted); font-size:.9rem; }
#emailAuthForm input { width:100%; padding:.75rem .85rem; border:1px solid var(--border-strong); border-radius:.7rem; background:var(--bg); color:var(--text); font:inherit; }
#emailAuthForm .btn { justify-content:center; border:0; cursor:pointer; }
#emailSubmit:disabled { opacity:.65; cursor:wait; }
.account-reset { padding-left:0; }
.account-status { margin:.8rem 0 0; padding:.7rem .8rem; border-radius:.65rem; background:color-mix(in srgb,var(--hadith-teal) 12%,var(--bg-card)); color:var(--text); }
.account-status[data-error="true"] { background:rgba(190,60,60,.13); }
.account-verify { padding:.7rem; border-radius:.65rem; background:rgba(214,160,60,.14); color:var(--text-soft); }
#accountSignedIn .chip { margin:.3rem .3rem .3rem 0; }
.quran-verse-card header { display:flex; align-items:center; gap:.8rem; }
.quran-bookmark,.reader-bookmark { flex:0 0 auto; border:1px solid var(--border-strong); border-radius:999px; width:2.25rem; height:2.25rem; display:grid; place-items:center; background:var(--bg-card); color:var(--hadith-teal); font-size:1.2rem; cursor:pointer; }
.quran-bookmark[aria-pressed="true"],.reader-bookmark[aria-pressed="true"] { color:#d29a36; background:color-mix(in srgb,#d29a36 14%,var(--bg-card)); }
.reader-item-actions,.bookmark-actions { display:flex; align-items:center; gap:.45rem; }
.bookmark-list { display:grid; gap:.65rem; margin:1.3rem 0 3rem; }
.bookmark-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.1rem; border:1px solid var(--border); border-radius:1rem; background:var(--bg-card); }
.bookmark-row h2 { margin:.2rem 0 0; font-size:1.12rem; text-transform:capitalize; }
.bookmark-kind { color:var(--hadith-teal); font-size:.7rem; font-weight:700; letter-spacing:.12em; }
.bookmark-empty { padding:1.3rem; border:1px dashed var(--border-strong); border-radius:1rem; color:var(--text-muted); }
.bookmark-status { color:var(--text-muted); }
.bookmark-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; margin-top:1rem; }
.bookmark-toolbar .bookmark-status { min-height:1.5em; }
.bookmark-toolbar button:disabled { opacity:.65; cursor:wait; }
html:not([data-auth-ready]) [data-auth-open] { visibility:hidden; }
@media(max-width:600px) { .account-dialog { width:min(92vw, 30rem); max-height:88dvh; border-radius:1rem; padding:1.1rem; } .bookmark-row { align-items:flex-start; flex-direction:column; } .bookmark-actions { width:100%; } }

@media(max-width:700px) { .topbar-actions .auth-open,.topbar-actions a[href="/bookmarks"] { width:auto!important; min-width:0!important; height:auto!important; padding:.45rem .65rem!important; font-size:.76rem!important; } }
.legal-page .legal-copy { max-width:56rem; }

/* Quran audio controls and pinned playback bar */
.quran-reader-audio-controls { display:flex; width:100%; align-items:center; gap:.7rem; flex-wrap:nowrap; min-width:0; }
.quran-translation-control { width:auto; min-width:0; }
.quran-picker-toggle { gap:0; }
.quran-translation-picker { box-sizing:border-box; width:min(42rem,calc(100vw - var(--sidebar-w) - 4rem)); min-width:min(26rem,calc(100vw - 2rem)); }
.quran-resource-option { align-items:start; line-height:1.4; }
.quran-selector-cluster { display:flex; min-width:0; align-items:center; gap:.55rem; }
.quran-reader-audio-controls .quran-picker-toggle { box-sizing:border-box; display:inline-flex; width:clamp(10.5rem,15vw,13rem); min-width:clamp(10.5rem,15vw,13rem); height:2.9rem; min-height:2.9rem; flex:0 0 auto; align-items:center; justify-content:center; margin:0; }
.quran-icon-button { display:grid; width:2.9rem; min-width:2.9rem; height:2.9rem; min-height:2.9rem; flex:0 0 auto; place-items:center; padding:0; border:1px solid color-mix(in srgb,var(--quran-teal) 55%,transparent); border-radius:50%; background:var(--quran-nav-bg); color:var(--quran-nav-text); cursor:pointer; transition:transform .18s ease,background .18s ease; }
.quran-icon-button svg { display:block; width:1.25rem; height:1.25rem; fill:currentColor; }
.quran-controls-disclosure { display:none; }
.quran-controls-disclosure svg { fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; transition:transform .18s ease; }
.quran-controls-disclosure[aria-expanded="true"] svg { transform:rotate(180deg); }
.quran-extra-controls { display:flex; align-items:center; gap:.7rem; }
.quran-extra-controls[hidden] { display:none !important; }
.quran-reader-audio-controls .quran-extra-controls .quran-fullsurah-play { width:2.9rem; min-width:2.9rem; height:2.9rem; min-height:2.9rem; border-radius:50%; }
.quran-reader-audio-controls .quran-extra-controls .quran-surah-list-link { box-sizing:border-box; display:inline-flex; width:clamp(10.5rem,15vw,13rem); min-width:clamp(10.5rem,15vw,13rem); height:2.9rem; min-height:2.9rem; flex:0 0 auto; align-items:center; justify-content:center; margin:0; }
.quran-fullsurah-play { padding:0; }
.quran-icon-button:hover { transform:translateY(-1px); }
.quran-play-icon { display:grid; width:1.45rem; height:1.45rem; place-items:center; color:var(--quran-teal); font:700 .75rem/1 Arial,sans-serif; }
.quran-verse-actions { display:inline-flex; align-items:center; gap:.35rem; }
.quran-verse-audio { position:relative; display:inline-flex; width:2.25rem; height:2.25rem; align-items:center; justify-content:center; gap:.08rem; border:1px solid var(--quran-line); border-radius:50%; background:var(--quran-chip-bg); color:var(--quran-chip-text); font:700 .72rem/1 var(--font-ui); cursor:pointer; transition:background .16s ease,color .16s ease,transform .16s ease; }
.quran-verse-audio:hover,.quran-verse-audio.is-current { border-color:var(--quran-teal); background:var(--quran-nav-bg); color:var(--quran-nav-text); transform:translateY(-1px); }
.quran-verse-audio-icon { display:inline-block; }
.quran-translation-audio { width:2.65rem; border-radius:var(--r-full); }
.quran-speaker-mark { width:.88rem; height:.88rem; flex:0 0 auto; }
.quran-audio-dock { position:fixed; z-index:145; inset-inline:0; bottom:0; display:grid; grid-template-columns:minmax(9rem,1fr) minmax(10rem,2fr) auto; min-height:4.7rem; align-items:center; gap:1rem; padding:.75rem max(1rem,env(safe-area-inset-right)) calc(.75rem + env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left)); border-top:1px solid var(--quran-line); background:color-mix(in srgb,var(--bg-card) 94%,transparent); color:var(--text); box-shadow:0 -10px 32px rgba(0,0,0,.14); backdrop-filter:blur(16px); }
.quran-audio-dock[hidden] { display:none !important; }
.quran-audio-track { display:grid; min-width:0; gap:.1rem; }
.quran-audio-track > span { color:var(--quran-teal); font-size:.62rem; font-weight:750; letter-spacing:.14em; }
.quran-audio-track strong { max-width:min(56vw,34rem); overflow:hidden; color:var(--text); font-size:.94rem; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.quran-audio-seek { display:grid; grid-template-columns:auto minmax(4rem,1fr) auto; align-items:center; gap:.65rem; color:var(--text-soft); font:500 .75rem/1 var(--font-ui); font-variant-numeric:tabular-nums; }
.quran-audio-seek input[type="range"] { width:100%; height:1.5rem; margin:0; appearance:none; background:transparent; cursor:pointer; touch-action:pan-x; }
.quran-audio-seek input[type="range"]::-webkit-slider-runnable-track { height:.3rem; border-radius:var(--r-full); background:linear-gradient(to right,var(--quran-teal) 0 var(--audio-progress,0%),var(--border-strong) var(--audio-progress,0%) 100%); }
.quran-audio-seek input[type="range"]::-moz-range-track { height:.3rem; border-radius:var(--r-full); background:var(--border-strong); }
.quran-audio-seek input[type="range"]::-moz-range-progress { height:.3rem; border-radius:var(--r-full); background:var(--quran-teal); }
.quran-audio-seek input[type="range"]::-webkit-slider-thumb { width:.9rem; height:.9rem; margin-top:-.3rem; appearance:none; border:2px solid var(--bg-card); border-radius:50%; background:var(--quran-teal); box-shadow:0 0 0 1px var(--quran-teal); }
.quran-audio-seek input[type="range"]::-moz-range-thumb { width:.72rem; height:.72rem; border:2px solid var(--bg-card); border-radius:50%; background:var(--quran-teal); box-shadow:0 0 0 1px var(--quran-teal); }
.quran-audio-seek input[type="range"]:disabled { cursor:default; opacity:.55; }
.quran-audio-seek input[type="range"]:focus-visible { outline:2px solid var(--quran-teal); outline-offset:3px; border-radius:var(--r-full); }
.quran-audio-actions { display:flex; align-items:center; gap:.9rem; }
.quran-audio-main-button { display:grid; width:2.8rem; height:2.8rem; place-items:center; border:0; border-radius:50%; background:var(--quran-teal); color:var(--text-invert); font:700 1rem/1 Arial,sans-serif; cursor:pointer; box-shadow:0 5px 16px color-mix(in srgb,var(--quran-teal) 25%,transparent); }
.quran-audio-status { position:absolute; inset-inline-start:1rem; bottom:calc(100% + .35rem); padding:.4rem .65rem; border:1px solid var(--border); border-radius:.6rem; background:var(--bg-card); color:var(--text-soft); font-size:.78rem; box-shadow:var(--shadow-sm); }
body.quran-audio-active .quran-shell .quran-main { padding-bottom:calc(6rem + env(safe-area-inset-bottom)); }
@media(max-width:600px) {
  .quran-reader-settings { align-items:flex-start; }
  .quran-reader-audio-controls { width:100%; flex-wrap:wrap; }
  .quran-selector-cluster { max-width:100%; }
  .quran-reader-audio-controls .quran-picker-toggle { width:clamp(10.5rem,68vw,13rem); min-width:0; }
  .quran-extra-controls { flex-wrap:wrap; }
  .quran-reader-audio-controls .quran-extra-controls .quran-surah-list-link { width:clamp(10.5rem,68vw,13rem); min-width:0; }
  .quran-translation-control { width:auto; }
  .quran-translation-picker { width:min(34rem,calc(100vw - 2rem)); min-width:0; }
  .quran-audio-dock { grid-template-columns:minmax(0,1fr) auto; gap:.25rem .65rem; padding:.55rem max(.75rem,env(safe-area-inset-right)) calc(.55rem + env(safe-area-inset-bottom)) max(.75rem,env(safe-area-inset-left)); }
  .quran-audio-track { grid-column:1; grid-row:1; }
  .quran-audio-track strong { max-width:68vw; font-size:.8rem; }
  .quran-audio-seek { grid-column:1; grid-row:2; gap:.45rem; font-size:.68rem; }
  .quran-audio-actions { grid-column:2; grid-row:1 / span 2; gap:.4rem; }
  .quran-audio-main-button { width:2.6rem; height:2.6rem; }
}
@media(max-width:562px) {
  .quran-controls-disclosure:not([hidden]) { display:grid; }
  .quran-extra-controls { flex-wrap:wrap; }
}

.js-hydrating .seo-book-entry { display:none!important; }
.seo-book-entry { max-width:58rem; margin:clamp(1.5rem,4vw,3rem) auto; padding:clamp(1.25rem,4vw,2.5rem); border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg-card); box-shadow:var(--shadow-sm); }
.seo-book-entry h1 { margin:.35rem 0 1rem; font-family:var(--font-display); font-size:clamp(2rem,5vw,3.25rem); line-height:1.12; }
.seo-book-entry > p { max-width:52rem; color:var(--text-soft); line-height:1.7; }
.seo-book-entry .seo-book-arabic { color:var(--arabic-gold,var(--accent)); font-family:var(--font-arabic); font-size:1.75rem; line-height:1.8; }
.seo-book-facts { display:flex; flex-wrap:wrap; gap:.75rem; padding:0; list-style:none; }
.seo-book-facts li { padding:.7rem 1rem; border:1px solid var(--border); border-radius:var(--r-md); color:var(--text-soft); }
.seo-book-facts strong { color:var(--text); }