/* ==========================================================================
   HADITH APP - MODERN DESIGN SYSTEM & THEMES (DARK & LIGHT MODE)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Theme Variables
   -------------------------------------------------------------------------- */
:root,
[data-theme="dark"] {
    color-scheme: dark;
    /* The Platinum & Silver Minimalist Edition (Monochrome Modern Luxury) */
    --bg-body: #07293f;
    --bg-surface: #0a3552;
    --bg-surface-elevated: #124666;
    --bg-surface-hover: #1a5578;
    --border-color: rgba(255, 255, 255, 0.12);
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-focus: #e0c868;
    
    --text-primary: #eef6fb;
    --text-secondary: #c3d7e6;
    --text-muted: #a3bdd0;
    --text-dim: #9db8cb;

    /* Signature Platinum & Silver Titanium (Zero gold / zero yellow) */
    --gold: #e0c868;
    --gold-light: #f0dc8c;
    --gold-dark: #c09828;
    --gold-gradient: linear-gradient(135deg, #f0dc8c 0%, #e0c868 55%, #c09828 100%);
    --gold-subtle: rgba(224, 200, 104, 0.12);
    --btn-gold-text: #07293f;

    --emerald: #8fc4e8;
    --emerald-subtle: rgba(143, 196, 232, 0.14);

    --arabic-bg: rgba(10, 53, 82, 0.85);
    --arabic-border: rgba(255, 255, 255, 0.14);
    --arabic-text: #f4f9fd;

    --header-bg: rgba(7, 41, 63, 0.94);
    --header-border: rgba(255, 255, 255, 0.10);

    --hero-overlay: linear-gradient(90deg, rgba(7, 41, 63, 0.98) 0%, rgba(10, 53, 82, 0.88) 50%, rgba(10, 53, 82, 0.4) 100%);
    --hero-border: rgba(255, 255, 255, 0.16);

    --card-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.10);
    --card-hover-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.75), 0 0 0 1.5px rgba(224, 200, 104, 0.6);
    --glow-gold: 0 0 25px rgba(224, 200, 104, 0.20);

    /* Legacy Mappings */
    --paper: var(--bg-body);
    --ink: var(--text-primary);
    --muted: var(--text-muted);
    --line: var(--border-color);
    --green: var(--gold);
    --light-green: var(--bg-surface-elevated);
}

[data-theme="light"] {
    color-scheme: light;
    /* Clean Porcelain White & Polished Titanium Slate */
    --bg-body: #eaf2f8;
    --bg-surface: #ffffff;
    --bg-surface-elevated: #dfeaf2;
    --bg-surface-hover: #d0e0ec;
    
    --border-color: rgba(15, 23, 42, 0.10);
    --border-subtle: rgba(15, 23, 42, 0.05);
    --border-focus: #0a3f66;

    --text-primary: #0a2a42;
    --text-secondary: #2d4a60;
    --text-muted: #44607a;
    --text-dim: #4a647c;

    --gold: #0a3f66;
    --gold-light: #2a6a98;
    --gold-dark: #062c49;
    --gold-gradient: linear-gradient(135deg, #165a8a 0%, #0a3f66 100%);
    --gold-subtle: rgba(10, 63, 102, 0.07);
    --btn-gold-text: #ffffff;

    --emerald: #8a6508;
    --emerald-subtle: rgba(184, 134, 11, 0.12);

    --arabic-bg: #f6fafd;
    --arabic-border: rgba(15, 23, 42, 0.12);
    --arabic-text: #0a2a42;

    --header-bg: rgba(234, 242, 248, 0.95);
    --header-border: rgba(15, 23, 42, 0.08);

    --hero-overlay: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(234, 242, 248, 0.95) 60%, rgba(223, 234, 242, 0.9) 100%);
    --hero-border: rgba(15, 23, 42, 0.14);

    --card-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --card-hover-shadow: 0 14px 30px -4px rgba(10, 63, 102, 0.18), 0 0 0 1.5px #0a3f66;
    --glow-gold: 0 0 20px rgba(10, 63, 102, 0.15);

    /* Legacy Mappings */
    --paper: var(--bg-body);
    --ink: var(--text-primary);
    --muted: var(--text-muted);
    --line: var(--border-color);
    --green: var(--gold);
    --light-green: var(--bg-surface-elevated);
}

/* --------------------------------------------------------------------------
   2. Base Typography & Global Elements
   -------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    background-color: var(--bg-body);
    background-image: 
        radial-gradient(ellipse 90% 45% at 50% 0%, rgba(224, 200, 104, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 90% 45% at 50% 100%, rgba(224, 200, 104, 0.04) 0%, transparent 70%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23e0c868' stroke-width='0.8' opacity='0.045'%3E%3Crect x='26' y='26' width='28' height='28'/%3E%3Crect x='26' y='26' width='28' height='28' transform='rotate(45 40 40)'/%3E%3Ccircle cx='40' cy='40' r='8' stroke-width='0.6'/%3E%3Ccircle cx='40' cy='40' r='2' fill='%23e0c868'/%3E%3Crect x='-14' y='-14' width='28' height='28'/%3E%3Crect x='-14' y='-14' width='28' height='28' transform='rotate(45 0 0)'/%3E%3Crect x='66' y='-14' width='28' height='28'/%3E%3Crect x='66' y='-14' width='28' height='28' transform='rotate(45 80 0)'/%3E%3Crect x='-14' y='66' width='28' height='28'/%3E%3Crect x='-14' y='66' width='28' height='28' transform='rotate(45 0 80)'/%3E%3Crect x='66' y='66' width='28' height='28'/%3E%3Crect x='66' y='66' width='28' height='28' transform='rotate(45 80 80)'/%3E%3Cpath d='M40 0 L80 40 L40 80 L0 40 Z' stroke-dasharray='3 3' stroke-width='0.5'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat, repeat;
    background-position: center top, center bottom, center top;
    background-size: 100% 650px, 100% 750px, 80px 80px;
    background-attachment: scroll, scroll, fixed;
    color: var(--text-primary);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.65;
    margin: 0;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

[data-theme="light"] body {
    background-color: var(--bg-body);
    background-image: 
        radial-gradient(ellipse 90% 45% at 50% 0%, rgba(10, 63, 102, 0.05) 0%, transparent 70%),
        radial-gradient(ellipse 90% 45% at 50% 100%, rgba(10, 63, 102, 0.03) 0%, transparent 70%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%230a3f66' stroke-width='0.8' opacity='0.04'%3E%3Crect x='26' y='26' width='28' height='28'/%3E%3Crect x='26' y='26' width='28' height='28' transform='rotate(45 40 40)'/%3E%3Ccircle cx='40' cy='40' r='8' stroke-width='0.6'/%3E%3Ccircle cx='40' cy='40' r='2' fill='%230a3f66'/%3E%3Crect x='-14' y='-14' width='28' height='28'/%3E%3Crect x='-14' y='-14' width='28' height='28' transform='rotate(45 0 0)'/%3E%3Crect x='66' y='-14' width='28' height='28'/%3E%3Crect x='66' y='-14' width='28' height='28' transform='rotate(45 80 0)'/%3E%3Crect x='-14' y='66' width='28' height='28'/%3E%3Crect x='-14' y='66' width='28' height='28' transform='rotate(45 0 80)'/%3E%3Crect x='66' y='66' width='28' height='28'/%3E%3Crect x='66' y='66' width='28' height='28' transform='rotate(45 80 80)'/%3E%3Cpath d='M40 0 L80 40 L40 80 L0 40 Z' stroke-dasharray='3 3' stroke-width='0.5'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat, repeat;
    background-position: center top, center bottom, center top;
    background-size: 100% 650px, 100% 750px, 80px 80px;
    background-attachment: scroll, scroll, fixed;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease, opacity .2s ease;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: transparent;
}

/* --------------------------------------------------------------------------
   3. Header & Navigation
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 86px;
    background: var(--header-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1.5px solid var(--header-border);
    transition: all .25s ease;
}

.header-container {
    max-width: 1240px;
    height: 100%;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: Georgia, serif;
    font-size: 28px;
    color: var(--text-primary);
    font-weight: 700;
}

.brand-logo {
    height: 56px;
    width: auto;
    max-width: 65px;
    object-fit: contain;
    border: none;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
    transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), filter .2s ease;
}

[data-theme="light"] .brand-logo {
    border: none;
    box-shadow: none;
    filter: drop-shadow(0 2px 8px rgba(15, 23, 42, 0.16));
}

[data-theme="light"] .nav-drawer-logo,
[data-theme="light"] .pwa-banner-logo,
[data-theme="light"] .auth-brand-badge img {
    filter: none;
}

.brand small {
    display: block;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--gold);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
}

.nav-links > a {
    position: relative;
    padding: 7px 16px;
    border-radius: 20px;
    color: var(--text-secondary);
    border: 1px solid transparent;
    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-links > a.active {
    color: var(--gold);
    background: var(--gold-subtle);
    border-color: rgba(224, 200, 104, 0.3);
}

.nav-links > a.active::after {
    display: none;
}

.nav-controls {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Language selector */
.language {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.language-label-text {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.language select,
.select-wrapper select {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1.5px solid var(--border-color);
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all .2s ease;
}

.language select:focus,
.select-wrapper select:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--gold-subtle);
}

/* Theme Toggle Button */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 24px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle .theme-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-theme="dark"] .theme-toggle .sun-icon {
    display: flex;
    color: var(--gold);
}
[data-theme="dark"] .theme-toggle .moon-icon {
    display: none;
}

[data-theme="light"] .theme-toggle .sun-icon {
    display: none;
}
[data-theme="light"] .theme-toggle .moon-icon {
    display: flex;
    color: var(--gold);
}

.theme-toggle .theme-label {
    letter-spacing: 0.3px;
}

/* Sadaka Pill in Navigation Bar */
.nav-support-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: var(--gold);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all .2s ease;
    -webkit-tap-highlight-color: transparent;
}.nav-support-pill.active {
    background: var(--gold);
    color: var(--btn-gold-text);
    border-color: var(--gold);
    box-shadow: 0 0 15px rgba(224, 200, 104, 0.25);
}


[data-theme="light"] .nav-support-pill {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.18);
    color: #0f172a;
    font-weight: 700;
}[data-theme="light"] .nav-support-pill.active {
    background: #0a3f66;
    color: #ffffff !important;
    border-color: #0a3f66;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.20);
}


@media (max-width: 640px) {
    .nav-support-pill {
        padding: 5px 9px;
        font-size: 11px;
        gap: 4px;
    }
}

@media (max-width: 360px) {
    .nav-support-pill {
        padding: 5px 7px;
    }
    .nav-support-pill-text {
        display: none;
    }
}

/* ==========================================================================
   Header Language Switcher Dropdown
   ========================================================================== */
.lang-switcher-dropdown {
    position: relative;
    display: inline-flex;
}

.lang-switcher-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 24px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all .2s ease;
    user-select: none;
}

.lang-switcher-btn:hover,
.lang-switcher-dropdown.is-open .lang-switcher-btn {
    border-color: var(--gold);
    color: var(--gold);
}

.lang-globe-icon {
    flex-shrink: 0;
    color: var(--gold);
}

.lang-current-label {
    letter-spacing: 0.5px;
    font-weight: 800;
}

.lang-chevron {
    transition: transform .2s ease;
    color: var(--text-muted);
}

.lang-switcher-dropdown.is-open .lang-chevron {
    transform: rotate(180deg);
}

.lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    background: var(--bg-surface-elevated);
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    padding: 6px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

[dir="rtl"] .lang-dropdown-menu {
    right: auto;
    left: 0;
}

.lang-switcher-dropdown.is-open .lang-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 9px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background-color .15s ease, color .15s ease;
}

[dir="rtl"] .lang-menu-item {
    text-align: right;
}

.lang-menu-item:hover {
    background: var(--bg-surface-hover);
    color: var(--gold);
}

.lang-menu-item.active {
    background: var(--gold-subtle);
    color: var(--gold);
    font-weight: 700;
}

.lang-flag {
    font-size: 15px;
    line-height: 1;
}

.lang-check-icon {
    margin-left: auto;
    color: var(--gold);
    font-size: 13px;
    opacity: 0;
}

[dir="rtl"] .lang-check-icon {
    margin-left: 0;
    margin-right: auto;
}

.lang-menu-item.active .lang-check-icon {
    opacity: 1;
}

@media (max-width: 768px) {
    .lang-switcher-btn {
        padding: 0 10px;
        height: 36px;
        font-size: 11px;
        gap: 4px;
    }
}

/* Mobile Navigation Drawer & Hamburger (Hidden on desktop) */
.menu-toggle-btn {
    display: none;
}

.nav-drawer-backdrop {
    display: none;
}

.nav-drawer {
    display: none;
}

/* --------------------------------------------------------------------------
   4. Hero Section
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    max-width: 1240px;
    min-height: 400px;
    margin: 24px auto 0;
    background: radial-gradient(circle at 85% 30%, rgba(224, 200, 104, 0.06) 0%, transparent 60%),
                linear-gradient(135deg, rgba(10, 53, 82, 0.98) 0%, rgba(7, 41, 63, 0.99) 100%);
    border: 1.5px solid var(--hero-border);
    border-radius: 20px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-glow {
    position: absolute;
    top: -20%;
    right: 5%;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(224, 200, 104, 0.12) 0%, rgba(203, 213, 225, 0.04) 50%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    border-radius: 50%;
    filter: blur(40px);
}

[data-theme="light"] .hero-glow {
    background: radial-gradient(circle, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.01) 50%, transparent 70%);
}

/* Light Mode Hero: Clean Porcelain & Polished Slate */
[data-theme="light"] .hero {
    background: radial-gradient(circle at 85% 30%, rgba(15, 23, 42, 0.02) 0%, transparent 60%),
                linear-gradient(135deg, #ffffff 0%, #f8fafc 60%, #f1f5f9 100%);
    border: 1.5px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .hero h1 {
    color: #0f172a;
    font-weight: 800;
}

[data-theme="light"] .hero h1 em {
    background: linear-gradient(135deg, #0f172a 0%, #475569 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

[data-theme="light"] .hero p {
    color: #334155;
    font-weight: 500;
}

[data-theme="light"] .eyebrow {
    color: #0f172a;
    font-weight: 800;
}

[data-theme="light"] .hero-button {
    background: linear-gradient(135deg, #165a8a 0%, #0a3f66 100%);
    color: #ffffff !important;
    font-weight: 800;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.25);
    border: none;
}

[data-theme="light"] .hero-button-secondary {
    background: #ffffff;
    border: 1.5px solid rgba(15, 23, 42, 0.14);
    color: #0f172a;
    font-weight: 700;
}

[data-theme="light"] .hero-caption {
    color: #64748b;
    font-weight: 700;
}

[data-theme="light"] .hero .eyebrow {
    color: #0f172a;
}

.hero-copy {
    position: relative;
    z-index: 2;
    padding: 48px 56px;
    max-width: 680px;
}

@media (max-width: 860px) {
    .hero-copy {
        padding: 32px 24px 28px;
        max-width: 100%;
    }
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--gold);
    text-transform: uppercase;
}

.eyebrow-dot, .eyebrow > span {
    width: 8px;
    height: 8px;
    background: var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--gold);
    animation: pulseGlow 2.5s infinite;
}

@keyframes pulseGlow {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.6; }
}

.hero .eyebrow,
.hero-caption {
    display: none !important;
}

.hero h1 {
    color: #f8fafc;
    font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
    font-size: clamp(38px, 4.8vw, 62px);
    font-weight: 800;
    line-height: 1.08;
    margin: 0 0 22px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.hero h1 em {
    font-style: italic;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
    background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 40%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    filter: drop-shadow(0 2px 14px rgba(224, 200, 104, 0.18));
}

.hero p {
    color: rgba(226, 232, 240, 0.85);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    font-weight: 450;
    line-height: 1.85;
    margin-bottom: 32px;
    max-width: 640px;
    letter-spacing: 0.15px;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--gold-gradient);
    color: #0f1418;
    padding: 13px 26px;
    font-size: 13px;
    font-weight: 800;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(224, 200, 104, 0.25);
    transition: all .25s ease;
}

.hero-button-secondary {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    color: var(--text-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.hero-caption {
    position: absolute;
    bottom: 22px;
    right: 32px;
    color: var(--text-dim);
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   5. Library Summary Strip
   -------------------------------------------------------------------------- */
.library-summary {
    max-width: 1240px;
    margin: 28px auto 0;
    padding: 16px 24px;
    background: var(--bg-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid var(--border-color);
    border-radius: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    align-items: center;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), var(--card-shadow);
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 12px;
    border-radius: 12px;
    transition: all .2s ease;
}

.summary-icon {
    font-size: 22px;
    background: var(--gold-subtle);
    border: 1px solid var(--border-color);
    padding: 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
}

.summary-text strong {
    display: block;
    font-size: 26px;
    font-family: Georgia, serif;
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.5px;
}

[data-theme="light"] .summary-text strong {
    background: linear-gradient(135deg, #165a8a 0%, #0a3f66 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.summary-text span {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}

.summary-note-item {
    justify-content: flex-end;
}

.summary-badge {
    display: inline-block;
    padding: 7px 16px;
    background: var(--bg-surface-elevated);
    border: 1.5px solid var(--border-color);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

/* --------------------------------------------------------------------------
   6. Main Catalog Shell
   -------------------------------------------------------------------------- */
.library-shell {
    max-width: 1240px;
    margin: 36px auto 72px;
    display: block;
    width: 100%;
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sidebar-block {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--card-shadow);
}

.section-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-bottom: 14px;
    text-transform: uppercase;
}

.collection-button {
    display: flex;
    width: 100%;
    text-align: left;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: transparent;
    border-radius: 10px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    border: 1.5px solid transparent;
    transition: all .2s ease;
}

.collection-button.active {
    background: var(--gold-gradient);
    color: #07293f;
    font-weight: 800;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.35);
}

[data-theme="dark"] .collection-button.active {
    color: #07293f;
}

[data-theme="light"] .collection-button.active {
    color: #ffffff !important;
}

.collection-button.active .arrow {
    transform: translate(2px, -2px);
}

.col-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.col-details small {
    font-family: 'Amiri', serif;
    font-size: 14px;
    line-height: 1.2;
    opacity: 0.9;
}

.arrow {
    font-size: 14px;
    opacity: 0.8;
    transition: transform .2s ease;
}

.filter-group {
    margin-top: 16px;
}

.filter-group:first-child {
    margin-top: 0;
}

.filter-group label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.select-wrapper select {
    width: 100%;
    padding: 11px 14px;
}

.sidebar-note {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--card-shadow);
    display: flex;
    gap: 14px;
}

.note-icon {
    font-size: 22px;
    color: var(--gold);
}

.note-content h3 {
    font-family: Georgia, serif;
    font-size: 16px;
    margin: 0 0 6px;
    color: var(--gold);
    font-weight: 700;
}

.note-content p {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   7. Search & Results Heading
   -------------------------------------------------------------------------- */
.results-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.results-heading h2 {
    font-family: Georgia, serif;
    font-size: 32px;
    margin: 4px 0 0;
    color: var(--text-primary);
    font-weight: 700;
}

.language-tag {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
}

.search-form {
    display: flex;
    align-items: center;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    padding: 8px 10px;
    box-shadow: var(--card-shadow);
    gap: 12px;
    transition: all .25s ease;
}

.search-form:focus-within {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--gold-subtle), var(--card-shadow);
}

.search-icon {
    color: var(--gold);
    margin-left: 8px;
    display: flex;
    align-items: center;
}

.search-form input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    padding: 6px 0;
}

.search-form input::placeholder {
    color: var(--text-dim);
}

.search-form button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gold-gradient);
    color: #07293f;
    font-weight: 800;
    font-size: 13px;
    padding: 10px 22px;
    border-radius: 10px;
    border: none;
    transition: all .2s ease;
}

[data-theme="dark"] .search-form button {
    color: #07293f;
}

[data-theme="light"] .search-form button {
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.28);
}

/* Quick Topics */
.quick-topics {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    margin-bottom: 24px;
    padding-top: 2px;
}

.quick-topics-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.topic-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.topic-chip {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.topic-chip.active {
    background: var(--gold-gradient);
    border-color: transparent;
    color: #07293f;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.35);
}

[data-theme="light"] .topic-chip.active {
    color: #ffffff !important;
}

.result-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 4px 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}

.clear-btn {
    color: var(--gold);
    background: var(--gold-subtle);
    padding: 5px 14px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 700;
    transition: all .2s ease;
}

.coverage-note {
    font-size: 12px;
    color: var(--text-muted);
    margin: 4px 0 18px 4px;
    font-weight: 500;
}

.loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gold);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
}

.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   7b. Hadith Books Catalog (Compact Row Cards with Emblem & Image)
   -------------------------------------------------------------------------- */
.hadith-books-catalog {
    margin-bottom: 32px;
}

.hadith-books-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}

.hadith-books-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hadith-header-art {
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

.hadith-books-title {
    font-family: var(--font-display, inherit);
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.3px;
}

.hadith-books-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 820px;
    margin: 0 auto;
}

.hadith-book-row-card {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    padding: 16px 22px;
    background: linear-gradient(135deg, #052936 0%, #083443 60%, #02202b 100%);
    border: 1.5px solid var(--border-color);
    border-radius: 18px;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(224, 200, 104, 0.1);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    font-family: inherit;
}

[data-theme="light"] .hadith-book-row-card {
    background: #ffffff;
    border-color: rgba(10, 63, 102, 0.12);
    box-shadow: 0 4px 16px -2px rgba(10, 63, 102, 0.06);
}

.book-emblem-wrap {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.book-emblem-diamond {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(224, 200, 104, 0.16) 0%, rgba(13, 148, 136, 0.16) 100%);
    border: 1.5px solid rgba(224, 200, 104, 0.45);
    border-radius: 11px;
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .book-emblem-diamond {
    background: linear-gradient(135deg, #f5f9fa 0%, #edf4f6 100%);
    border-color: rgba(15, 23, 42, 0.35);
}

.book-emblem-letter {
    transform: rotate(-45deg);
    font-size: 16px;
    font-weight: 800;
    color: var(--gold);
    line-height: 1;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-shadow: 0 0 10px rgba(224, 200, 104, 0.4);
}

[data-theme="light"] .book-emblem-letter {
    color: #0f172a;
    text-shadow: none;
}

.book-info-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.book-title-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.book-name {
    font-family: var(--font-display, inherit);
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.2px;
}

.book-name-ar {
    font-family: var(--font-arabic, 'Amiri', serif);
    font-size: 15px;
    color: var(--gold);
    direction: rtl;
    opacity: 0.85;
}

.book-meta-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 500;
}

.book-hadith-count {
    color: var(--text-muted);
}

.book-author-dot {
    opacity: 0.5;
}

.book-author-text {
    color: var(--text-secondary);
    font-size: 12px;
}

.book-action-col {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 26px;
    font-weight: 300;
    opacity: 0.5;
    transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    padding-left: 8px;
}

/* Inside Book View Banner */
.inside-book-banner {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 18px;
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: var(--card-shadow);
}

.standalone-back-bar {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.standalone-back-bar .back-to-catalog-btn {
    margin-bottom: 0;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 13.5px;
}

.back-to-catalog-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-surface-elevated, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border-color);
    color: var(--gold);
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 18px;
    transition: all .2s ease;
}

.back-to-catalog-btn .back-arrow {
    transition: transform .2s ease;
}

.inside-book-tagline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.inside-book-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--gold);
}

.inside-book-heading {
    font-family: var(--font-display, inherit);
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.inside-book-ar {
    font-family: var(--font-arabic, 'Amiri', serif);
    font-size: 26px;
    color: var(--gold);
    margin: 0 0 10px 0;
    direction: rtl;
}

.inside-book-author {
    font-size: 14px;
    color: var(--text-primary);
    margin: 0 0 6px 0;
}

.inside-book-desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

.search-active-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 18px;
    margin-bottom: 18px;
    font-size: 13.5px;
    color: var(--text-muted);
}

.search-active-banner strong {
    color: var(--gold);
}

/* --------------------------------------------------------------------------
   8. Hadith Cards & Collection Badges
   -------------------------------------------------------------------------- */
.hadith-card {
    position: relative;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 18px;
    padding: 28px 30px;
    margin-bottom: 22px;
    box-shadow: var(--card-shadow);
    transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .25s ease, border-color .25s ease;
}

.card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid transparent;
}

/* Individual Collection Badges */
.badge-bukhari,
.badge-muslim,
.badge-tirmidhi,
.badge-abudawud,
.badge-ahmad,
.badge-nasai,
.badge-ibnmajah,
.badge-nawawi40,
.badge-riyadhadussalihin {
    background: var(--gold-subtle);
    color: var(--gold);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .badge-bukhari,
[data-theme="light"] .badge-muslim,
[data-theme="light"] .badge-tirmidhi,
[data-theme="light"] .badge-abudawud,
[data-theme="light"] .badge-ahmad,
[data-theme="light"] .badge-nasai,
[data-theme="light"] .badge-ibnmajah,
[data-theme="light"] .badge-nawawi40,
[data-theme="light"] .badge-riyadhadussalihin {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.18);
}
[data-theme="light"] .badge-riyadhadussalihin {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}

.hadith-num {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-dim);
}

.hadith-card h3 {
    font-family: Georgia, serif;
    font-size: 21px;
    color: var(--text-primary);
    margin: 0 0 18px;
    line-height: 1.55;
    font-weight: 700;
}

.hadith-texts {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.arabic-box {
    background: var(--arabic-bg);
    border: 1.5px solid var(--arabic-border);
    border-radius: 14px;
    padding: 22px 24px;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.arabic,
.arabic-text,
.font-arabic,
#text-ar,
.reading-arabic {
    font-family: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif;
    font-size: 28px;
    line-height: 2.45;
    color: var(--arabic-text);
    margin: 0;
    text-align: right;
    direction: rtl;
    font-weight: 500;
    letter-spacing: 0.2px;
    font-feature-settings: "cv01", "cv02", "calt", "liga";
}

.translation {
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--text-secondary);
    margin: 0;
    font-weight: 500;
}

.excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-source {
    font-size: 11px;
    color: var(--text-muted);
    margin: 12px 0 14px;
    font-weight: 500;
}

.card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-top: 1.5px solid var(--border-subtle);
    padding-top: 14px;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}

.card-location {
    font-weight: 600;
}

.card-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.action-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--bg-surface-elevated);
    border: 1.5px solid var(--border-color);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 15px;
    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    line-height: 1;
}

.action-icon-btn.is-bookmarked {
    color: var(--gold);
    border-color: var(--gold);
    background: var(--gold-subtle);
}

.action-icon-btn.is-copied {
    color: var(--gold);
    border-color: var(--gold);
    background: var(--gold-subtle);
}

.read-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
    font-weight: 800;
    font-size: 13px;
    padding: 8px 18px;
    border-radius: 20px;
    background: var(--bg-surface-elevated);
    border: 1.5px solid var(--border-color);
    transition: all .2s ease;
}

[data-theme="light"] .read-btn {
    color: #0f172a;
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.20);
    font-weight: 700;
}

.read-arrow {
    transition: transform .2s ease;
}

/* Highlighted match */
mark {
    background: var(--gold-subtle);
    color: var(--gold);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 1px 4px;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   9. Pagination
   -------------------------------------------------------------------------- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 32px;
    padding: 16px 20px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--card-shadow);
}

.page-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    background: var(--bg-surface-elevated);
    border: 1.5px solid var(--border-color);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
    transition: all .2s ease;
}

.page-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-indicator {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}

.pagination svg,
.dua-pagination-wrap svg,
nav[role="navigation"] svg,
svg.w-5,
svg.h-5 {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    display: inline-block !important;
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   10. Empty State
   -------------------------------------------------------------------------- */
.empty-state {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 20px;
    padding: 56px 36px;
    text-align: center;
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: var(--gold-subtle);
    border: 1.5px solid var(--border-color);
    color: var(--gold);
    display: grid;
    place-items: center;
    font-size: 32px;
    margin-bottom: 20px;
}

.empty-state h3 {
    font-family: Georgia, serif;
    font-size: 26px;
    color: var(--text-primary);
    margin: 8px 0 12px;
    font-weight: 700;
}

.empty-state p {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 480px;
    margin: 0 0 24px;
    line-height: 1.7;
    font-weight: 500;
}

.primary-button {
    background: var(--gold-gradient);
    color: #07293f;
    font-weight: 800;
    font-size: 13px;
    padding: 12px 26px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.35);
    transition: all .2s ease;
    display: inline-block;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 20px;
    background: var(--bg-surface-elevated);
    border: 1.5px solid var(--border-color);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
}

.status-pill > span {
    width: 7px;
    height: 7px;
    background: var(--gold);
    border-radius: 50%;
}

/* --------------------------------------------------------------------------
   11. Reader Page (hadith.blade.php)
   -------------------------------------------------------------------------- */
.reader-shell {
    max-width: 900px;
    margin: 16px auto 60px;
    padding: 0 24px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 7px 14px;
    border-radius: 8px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    margin-bottom: 12px;
    transition: all .2s ease;
}

.reader-heading {
    margin-bottom: 16px;
}

.reader-heading h1 {
    font-family: Georgia, serif;
    font-size: 48px;
    color: var(--gold);
    margin: 12px 0 10px;
    line-height: 1.1;
    font-weight: 800;
}

.reader-title {
    font-family: Georgia, serif;
    font-size: 24px;
    color: var(--text-primary);
    margin: 8px 0 12px;
    line-height: 1.4;
    font-weight: 700;
}

.reader-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
    font-weight: 600;
}

.reader-more-menu-wrap {
    position: relative;
    display: inline-block;
}

.reader-more-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    border-radius: 9999px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    color: var(--text-primary);
    cursor: pointer;
    transition: all .2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    padding: 0;
}.reader-more-toggle[aria-expanded="true"] {
    border-color: var(--gold);
    color: var(--gold);
    background: var(--bg-surface-elevated, var(--bg-surface));
    transform: scale(1.05);
}


.reader-more-toggle .more-dots {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-2px);
}

.reader-more-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 100;
    min-width: 215px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), var(--card-hover-shadow);
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: fadeInDropdown 0.15s ease-out;
}

.reader-more-dropdown[hidden] {
    display: none !important;
}

@keyframes fadeInDropdown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.more-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all .15s ease;
    text-decoration: none;
    box-sizing: border-box;
}

.more-dropdown-item .dropdown-item-icon {
    font-size: 16px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--gold);
    flex-shrink: 0;
}

.more-dropdown-item .whatsapp-icon {
    color: #25d366 !important;
}

.dropdown-divider {
    height: 1px;
    background: var(--border-color, rgba(224, 200, 104, 0.18));
    margin: 4px 6px;
}
}

.reader-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 12px 16px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--card-shadow);
}

.action-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 10px;
    background: var(--bg-surface-elevated);
    border: 1.5px solid var(--border-color);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    transition: all .2s ease;
}

/* app.css ina `.reader-actions .text-button { padding: 7px 0 }` inayoondoa nafasi ya pembeni. */
.reader-actions .action-pill-btn {
    padding: 9px 16px;
    min-height: 40px;
}

.font-resizer {
    display: flex;
    align-items: center;
    background: var(--bg-surface-elevated);
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

.resizer-btn {
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-muted);
    border-radius: 6px;
    transition: all .2s ease;
}

.bookmarks-link {
    margin-left: auto;
    color: var(--gold);
}

/* ==========================================================================
   Islamic Flourish Divider (Rub el Hizb ۞)
   ========================================================================== */
.islamic-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 28px auto;
    width: 100%;
    max-width: 440px;
    user-select: none;
    -webkit-user-select: none;
}

.islamic-divider .divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.7));
}

.islamic-divider .divider-line:last-child {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.15), transparent);
}

.islamic-divider .divider-emblem {
    color: var(--gold);
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 10px rgba(224, 200, 104, 0.45);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transform: translateY(-1px);
    flex-shrink: 0;
}

[data-theme="light"] .islamic-divider .divider-line {
    background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.1), rgba(15, 23, 42, 0.3));
}

[data-theme="light"] .islamic-divider .divider-line:last-child {
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.3), rgba(15, 23, 42, 0.1), transparent);
}

[data-theme="light"] .islamic-divider .divider-emblem {
    color: #0f172a;
    text-shadow: none;
}

/* Reader Card */
.reader-card {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 20px;
    padding: 40px;
    box-shadow: var(--card-shadow);
}

/* Audio Player */
.audio-player {
    background: var(--bg-surface-elevated);
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 36px;
}

.audio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.audio-controls-top-right,
.audio-header-lang {
    display: flex;
    align-items: center;
    gap: 8px;
}

.audio-controls-top-right .select-wrapper select,
.audio-header-lang .select-wrapper select {
    padding: 6px 26px 6px 12px;
    font-size: 12px;
    font-weight: 700;
    min-height: 34px;
    border-radius: 9px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
}

.audio-speed-wrapper select {
    font-family: monospace, var(--font-body);
    font-weight: 800;
    color: var(--gold) !important;
}

.audio-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.audio-equalizer {
    display: inline-flex;
    align-items: flex-end;
    gap: 2.5px;
    height: 16px;
    margin-left: 4px;
}

.audio-equalizer .eq-bar {
    width: 3px;
    height: 4px;
    background: var(--gold);
    border-radius: 2px;
    opacity: 0.6;
    transition: height 0.2s ease, opacity 0.2s ease;
}

.audio-player.is-playing .audio-equalizer .eq-bar {
    opacity: 1;
}

.audio-player.is-playing .audio-equalizer .eq-1 {
    animation: eq-bounce 0.8s ease-in-out infinite alternate;
}

.audio-player.is-playing .audio-equalizer .eq-2 {
    animation: eq-bounce 1.1s ease-in-out 0.2s infinite alternate;
}

.audio-player.is-playing .audio-equalizer .eq-3 {
    animation: eq-bounce 0.7s ease-in-out 0.4s infinite alternate;
}

.audio-player.is-playing .audio-equalizer .eq-4 {
    animation: eq-bounce 1s ease-in-out 0.1s infinite alternate;
}

@keyframes eq-bounce {
    0% { height: 4px; }
    100% { height: 16px; }
}

.audio-header-title h2 {
    font-family: Georgia, serif;
    font-size: 20px;
    color: var(--gold);
    margin: 0;
    font-weight: 700;
}

.audio-badge {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--gold-subtle);
    color: var(--gold);
}

.audio-badge.badge-hd {
    background: var(--gold-subtle);
    color: var(--gold);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .audio-badge.badge-hd {
    background: rgba(15, 23, 42, 0.08);
    color: #0f172a;
    border: 1px solid rgba(15, 23, 42, 0.2);
}

.audio-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 18px;
    font-weight: 500;
}

.audio-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.audio-options label span {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* Audio Progress Bar & Track */
.audio-progress-container {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 18px;
}

.audio-time-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.audio-time {
    font-size: 11px;
    font-family: monospace, var(--font-body);
    font-weight: 700;
    color: var(--text-muted);
    min-width: 36px;
    text-align: center;
}

.audio-track-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    height: 20px;
}

.audio-scrubber {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
    margin: 0;
}

.audio-scrubber:disabled {
    cursor: not-allowed;
}

.audio-track-bg {
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--border-color);
    border-radius: 999px;
    overflow: hidden;
    z-index: 1;
}

.audio-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--gold-gradient);
    border-radius: 999px;
    transition: width 0.1s linear;
}

.audio-thumb-indicator {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 8px rgba(224, 200, 104, 0.4);
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
    transition: left 0.1s linear;
}

.audio-player.is-playing .audio-icon {
    animation: audio-pulse 1.5s ease-in-out infinite;
    display: inline-block;
}

@keyframes audio-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}

.audio-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.audio-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    color: var(--text-primary);
    transition: all .2s ease;
    cursor: pointer;
}

.play-btn {
    background: var(--gold-gradient);
    color: #ffffff;
    border: none;
}

[data-theme="dark"] .play-btn {
    color: #0f1418;
}

.audio-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Audio active/idle display states */
.audio-player:not(.is-audio-active) .audio-progress-container,
.audio-player:not(.is-audio-active) .pause-btn,
.audio-player:not(.is-audio-active) .stop-btn {
    display: none !important;
}

.audio-player.is-audio-active .play-btn,
.audio-player.is-audio-active .both-btn {
    display: none !important;
}

.audio-status-text {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 14px;
    margin-bottom: 0;
    font-weight: 600;
}

/* Audio: Kiarabu + Kiswahili kwa kubonyeza mara moja */
.both-btn {
    border-color: var(--gold);
    color: var(--gold);
}

.both-btn > span[aria-hidden="true"] {
    letter-spacing: -3px;
}

/* Audio: inapakia + mfululizo */
.audio-player.is-loading .audio-btn.is-active {
    position: relative;
    opacity: 0.85;
    cursor: progress;
}

.audio-player.is-loading .audio-btn.is-active > span[aria-hidden="true"] {
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    font-size: 0;
    animation: audio-spin .8s linear infinite;
}

.audio-player.is-loading .audio-progress-fill {
    width: 35% !important;
    animation: audio-indeterminate 1.2s ease-in-out infinite;
}

@keyframes audio-spin {
    to { transform: rotate(360deg); }
}

@keyframes audio-indeterminate {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(290%); }
}

.audio-autonext {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.audio-autonext input {
    width: 16px;
    height: 16px;
    accent-color: var(--gold);
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .audio-player.is-loading .audio-btn.is-active > span[aria-hidden="true"],
    .audio-player.is-loading .audio-progress-fill {
        animation: none;
    }
}

/* Reading Sections */
.reading-section {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1.5px solid var(--border-subtle);
}

.reading-section:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.section-label-bar,
.section-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

.section-script-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--gold-subtle);
    color: var(--gold);
    border: 1px solid var(--border-color);
    font-family: 'Amiri', serif;
}

.manuscript-box {
    background: var(--arabic-bg);
    border: 1.5px solid var(--arabic-border);
    border-radius: 16px;
    padding: 32px 36px;
}

.reading-arabic {
    font-size: calc(30px * var(--font-scale, 1));
    line-height: 2.3;
    color: var(--arabic-text);
}

.reading-swahili {
    font-size: calc(18px * var(--font-scale, 1));
    line-height: 2.1;
    color: var(--text-primary);
    font-weight: 500;
}

.reading-english {
    font-size: calc(16px * var(--font-scale, 1));
    line-height: 2;
    color: var(--text-secondary);
    font-weight: 500;
}

.lang-pill {
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--bg-surface-elevated);
    color: var(--text-muted);
}

.arabic-lang-tag {
    font-family: 'Amiri', serif;
    font-size: 14px;
    color: var(--gold);
    font-weight: 700;
}

.hadith-grade-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding: 14px 18px;
    background: var(--gold-subtle);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
}

.hadith-grade-card p {
    margin: 0;
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 600;
}

.source-note {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 14px;
    line-height: 1.7;
    font-weight: 500;
}

.source-note a {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 700;
}

/* Source Card & Details Grid */
.source-card {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 18px;
    padding: 32px;
    margin-top: 28px;
    box-shadow: var(--card-shadow);
}

.source-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}

.source-card-header h2 {
    font-family: Georgia, serif;
    font-size: 22px;
    color: var(--gold);
    margin: 0;
    font-weight: 700;
}

.source-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin: 0;
}

.source-item {
    background: var(--bg-surface-elevated);
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 16px;
}

.source-item dt {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.source-item dd {
    font-size: 13px;
    color: var(--text-primary);
    margin: 0;
    overflow-wrap: anywhere;
    font-weight: 600;
}

.source-item dd a {
    color: var(--gold);
    font-weight: 700;
}

/* app.css ya zamani ina `.source-card dl>div { grid 180px 1fr; padding: 9px 0 }`
   ambayo inazidi .source-item — hapa tunarudisha nafasi ya ndani ya kadi. */
.source-card dl > .source-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    min-width: 0;
}
.source-card dl > .source-item dt { margin: 0; line-height: 1.4; }
.source-card dl > .source-item dd { line-height: 1.6; }

.source-note-box {
    margin-top: 20px;
    padding: 14px 18px;
    background: var(--bg-surface-elevated);
    border-radius: 10px;
    border: 1.5px solid var(--border-color);
}

/* Related Hadith List */
.related-hadith {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 18px;
    padding: 32px;
    margin-top: 28px;
    box-shadow: var(--card-shadow);
}

.related-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.related-header h2 {
    font-family: Georgia, serif;
    font-size: 22px;
    color: var(--gold);
    margin: 0;
    font-weight: 700;
}

.related-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
}

.related-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.related-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--bg-surface-elevated);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
    transition: all .2s ease;
}

.related-num {
    font-weight: 800;
    color: var(--gold);
    white-space: nowrap;
}

.related-text {
    flex: 1;
}

.related-arrow {
    color: var(--gold);
    transition: transform .2s ease;
}

/* --------------------------------------------------------------------------
   12. Bookmarks Page Specifics
   -------------------------------------------------------------------------- */
.remove-btn-modern {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #dc2626;
    padding: 6px 12px;
    background: rgba(220, 38, 38, 0.1);
    border-radius: 8px;
    transition: all .2s ease;
}

/* --------------------------------------------------------------------------
   13. Footer (With Important Links Section)
   -------------------------------------------------------------------------- */
.site-footer {
    position: relative;
    background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-body) 100%);
    border-top: 1px solid var(--border-color);
    padding: 50px 0 36px;
    margin-top: 60px;
    overflow: hidden;
}

.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}

.footer-container {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 28px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: relative;
    z-index: 1;
}

.footer-top-grid {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    width: 100%;
}

.footer-brand-wrap {
    display: flex;
    align-items: center;
}

.footer-brand-card {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer-logo-badge {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: rgba(7, 41, 63, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), inset 0 0 12px rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .footer-logo-badge {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.footer-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.25));
}

[data-theme="light"] .footer-logo-img {
    filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.15));
}

.footer-brand-headings {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 2px;
}

.footer-brand-name {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: var(--text-primary);
    line-height: 1.1;
}

.footer-brand-name span {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    color: #cbd5e1;
}

[data-theme="light"] .footer-brand-name span {
    color: #334155;
}

.footer-brand-sub {
    font-size: 11.5px;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

/* Important Links Column */
.footer-important-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.footer-section-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-primary);
    position: relative;
    padding-bottom: 8px;
    margin: 0;
}

.footer-section-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 26px;
    height: 1.5px;
    background: #cbd5e1;
    border-radius: 2px;
}

.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-link-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.footer-link-bullet {
    font-size: 10px;
    color: #38bdf8;
    transition: transform 0.2s ease;
}

/* Social Share Column */
.footer-social-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.footer-social-desc {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 0;
    max-width: 240px;
    line-height: 1.5;
}

.footer-social-links {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.social-share-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .social-share-btn {
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.footer-bottom-bar {
    padding-top: 22px;
    border-top: 1px solid var(--border-subtle);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.footer-copy-text {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

@media (max-width: 768px) {
    .site-footer {
        padding: 40px 0 calc(90px + env(safe-area-inset-bottom, 16px)) !important;
        margin-top: 40px;
    }
    .footer-top-grid {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
    }
    .footer-important-links {
        width: 100%;
    }
    .footer-link-item {
        font-size: 13px;
    }
}

/* --------------------------------------------------------------------------
   14. Reading Language Filter Visibility
   -------------------------------------------------------------------------- */
html[data-reading-language="both"] [data-reading="en"],
html[data-reading-language="sw"] [data-reading="ar"],
html[data-reading-language="sw"] [data-reading="en"],
html[data-reading-language="en"] [data-reading="sw"],
html[data-reading-language="ar"] [data-reading="sw"],
html[data-reading-language="ar"] [data-reading="en"] {
    display: none;
}

/* Hakuna tafsiri ya Kiingereza: onyesha Kiswahili badala ya kuacha tupu */
html[data-reading-language="en"] [data-reading="sw"][data-no-en] {
    display: block;
}

html[data-reading-language="en"] #english-drawer {
    border-color: rgba(224, 200, 104, 0.35);
}

/* ==========================================================================
   Bilingual / Study Mode (Hali ya Ulinganisho)
   ========================================================================== */
html[data-bilingual="true"] [data-reading="sw"],
html[data-bilingual="true"] [data-reading="en"] {
    display: block !important;
}

html[data-bilingual="true"] .hadith-texts [data-reading="en"] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-subtle);
    color: var(--text-secondary);
}

html[data-bilingual="true"] .hadith-texts [data-reading="en"]::before {
    content: "English: ";
    font-weight: 700;
    font-style: normal;
    color: var(--gold);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -100px;
    left: 20px;
    z-index: 9999;
    background: var(--gold);
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 800;
}

.skip-link:focus {
    top: 15px;
}

/* --------------------------------------------------------------------------
   15. Mobile & Tablet Responsive Layouts (iPad, iPhone, Android, Touch)
   -------------------------------------------------------------------------- */

/* Safe area support for notched phones & tablets */
:root {
    --safe-pad-left: env(safe-area-inset-left, 0px);
    --safe-pad-right: env(safe-area-inset-right, 0px);
    --safe-pad-bottom: env(safe-area-inset-bottom, 0px);
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    width: 100%;
}

a, button, select, input {
    -webkit-tap-highlight-color: transparent;
}

/* --- Laptops & Small Desktops (max-width: 1240px) --- */
@media (max-width: 1240px) {
    .header-container,
    .hero,
    .library-summary,
    .library-shell,
    .footer-container {
        padding-left: 24px;
        padding-right: 24px;
    }
    .library-shell {
        display: block;
        width: 100%;
    }
}

/* --- iPad & Tablet Landscape / Portrait (max-width: 1024px) --- */
@media (max-width: 1024px) {
    .hero {
        margin-top: 20px;
        min-height: auto;
    }
    .hero-copy {
        padding: 42px 32px;
    }
    .hero h1 {
        font-size: clamp(38px, 6vw, 48px);
    }
    .hero-actions {
        flex-wrap: wrap;
    }
    .library-summary {
        margin-top: 20px;
        padding: 16px 20px;
        grid-template-columns: repeat(3, 1fr) auto;
        gap: 16px;
    }
    .reader-shell {
        max-width: 760px;
        padding: 0 20px;
    }
    .reader-card {
        padding: 32px 28px;
    }
    .manuscript-box {
        padding: 24px 20px;
    }
    .reading-arabic {
        font-size: calc(clamp(26px, 4vw, 32px) * var(--font-scale, 1));
        line-height: 2.3;
    }
}

/* --- iPad Portrait & Large Phablets (max-width: 860px) --- */
@media (max-width: 860px) {
    .audio-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .site-header {
        height: 58px !important;
        padding: 0 !important;
    }
    .site-header .header-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 0 20px !important;
        gap: 16px !important;
    }
    .site-header .brand {
        display: flex !important;
        align-items: center !important;
        margin-right: auto !important;
        flex-shrink: 0 !important;
    }
    .site-header .brand-logo {
        height: 46px !important;
        width: auto !important;
    }
    .site-header .brand small {
        display: none !important;
    }
    .site-header .main-nav {
        display: flex !important;
        align-items: center !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
    .site-header .nav-links {
        display: none !important;
    }
    .site-header .nav-controls {
        display: flex !important;
        align-items: center !important;
        margin-left: auto !important;
        gap: 10px !important;
    }
    .site-header .language {
        display: none !important;
    }
    .site-header .theme-toggle {
        display: inline-flex !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }
    .site-header .theme-toggle .theme-label {
        display: none !important;
    }
    .site-header .auth-trigger {
        display: inline-flex !important;
        align-items: center !important;
        height: 36px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        border-radius: 999px !important;
        border: 1.5px solid var(--gold) !important;
        background: var(--gold-subtle) !important;
        color: var(--gold) !important;
        font-weight: 700 !important;
    }
    .site-header .auth-trigger--user {
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }
    .menu-toggle-btn {
        display: inline-flex !important;
        margin-left: 0 !important;
    }

    /* Library shell on tablet / mobile */
    .library-shell {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 24px auto 56px;
    }
    .sidebar {
        gap: 16px;
    }
    /* Collections: 2-to-3 column grid on tablet */
    .sidebar-block:first-of-type {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 8px;
        padding: 16px;
    }
    .sidebar-block:first-of-type .section-label {
        grid-column: 1 / -1;
        margin-bottom: 6px;
    }
    .sidebar-block:first-of-type .collection-button {
        margin-bottom: 0;
        padding: 10px 12px;
    }
    /* Kitabu / Mlango filters side-by-side */
    .sidebar-block:nth-of-type(2) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        padding: 16px;
    }
    .sidebar-block:nth-of-type(2) .filter-group {
        margin-bottom: 0;
    }
    .sidebar-note {
        display: none;
    }

    .hero-caption {
        display: none;
    }

}

/* --- Smartphones (max-width: 640px) --- */
@media (max-width: 640px) {
    /* Prevent iOS involuntary zoom on form controls */
    input[type="search"],
    input[type="text"],
    select {
        font-size: 16px !important;
    }

    .header-container,
    .hero,
    .library-summary,
    .library-shell,
    .reader-shell {
        padding-left: 16px;
        padding-right: 16px;
    }

    .hero {
        margin-top: 12px;
        border-radius: 16px;
    }
    .hero-copy {
        padding: 24px 18px;
    }
    .hero h1 {
        font-size: clamp(28px, 8vw, 36px);
        margin: 0 0 14px;
    }
    .hero p {
        font-size: 13px;
        line-height: 1.6;
    }
    .hero-actions {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
    .hero-button {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        padding: 12px 18px;
    }

    /* Library Summary 2x2 grid */
    .library-summary {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 14px 14px;
        border-radius: 14px;
        margin-top: 16px;
    }
    .summary-item {
        gap: 10px;
    }
    .summary-icon {
        font-size: 18px;
        padding: 6px 10px;
        border-radius: 10px;
    }
    .summary-text strong {
        font-size: 20px;
    }
    .summary-text span {
        font-size: 11px;
    }
    .summary-note-item {
        grid-column: 1 / -1;
        justify-content: center;
        margin-top: 4px;
    }

    /* Collections: Horizontal Swipeable Pill Bar on Mobile */
    .sidebar-block:first-of-type {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
        padding: 12px;
        border-radius: 14px;
    }
    .sidebar-block:first-of-type::-webkit-scrollbar {
        display: none;
    }
    .sidebar-block:first-of-type .section-label {
        display: none;
    }
    .sidebar-block:first-of-type .collection-button {
        flex: 0 0 auto;
        width: auto;
        white-space: nowrap;
        padding: 8px 14px;
        border-radius: 999px;
        background: var(--bg-surface-elevated);
        border: 1.5px solid var(--border-color);
        margin: 0;
        font-size: 12px;
    }
    .sidebar-block:first-of-type .collection-button .arrow,
    .sidebar-block:first-of-type .collection-button .col-details small {
        display: none;
    }
    .sidebar-block:first-of-type .collection-button.active {
        background: var(--gold-gradient);
        border-color: transparent;
    }

    /* Filters: stacked on small phones */
    .sidebar-block:nth-of-type(2) {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px;
        border-radius: 14px;
    }

    /* Search form */
    .results-heading h2 {
        font-size: 24px;
    }
    .search-form {
        padding: 6px 8px;
        gap: 8px;
    }
    .search-form button {
        padding: 9px 14px;
        font-size: 12px;
        min-height: 40px;
    }

    /* Quick Topics Mobile */
    .quick-topics {
        margin-top: 10px;
        margin-bottom: 20px;
        gap: 8px;
    }
    .topic-chip {
        font-size: 11px;
        padding: 5px 11px;
    }

    /* Hadith Books Catalog Mobile */
    .hadith-books-header {
        margin-bottom: 14px;
        padding-bottom: 12px;
    }
    .hadith-books-title {
        font-size: 20px;
    }
    .hadith-book-row-card {
        padding: 14px 16px;
        gap: 14px;
        border-radius: 16px;
    }
    .book-emblem-wrap {
        width: 42px;
        height: 42px;
    }
    .book-emblem-diamond {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }
    .book-emblem-letter {
        font-size: 15px;
    }
    .book-name {
        font-size: 16px;
    }
    .book-name-ar {
        font-size: 14px;
    }
    .book-meta-sub {
        font-size: 12px;
    }
    .inside-book-banner {
        padding: 20px 18px;
        border-radius: 16px;
        margin-bottom: 20px;
    }
    .inside-book-heading {
        font-size: 22px;
    }
    .inside-book-ar {
        font-size: 22px;
    }

    /* Hadith Cards */
    .hadith-card {
        padding: 22px 18px;
        border-radius: 16px;
        margin-bottom: 20px;
    }
    .card-top {
        margin-bottom: 16px;
    }
    .hadith-card h3 {
        font-size: 19px;
        line-height: 1.55;
        margin-bottom: 16px;
    }
    .arabic-box {
        padding: 16px 16px;
        border-radius: 12px;
        margin-bottom: 16px;
    }
    .arabic,
    .arabic-text,
    .font-arabic,
    #text-ar,
    .dua-detail-card .arabic,
    .dua-detail-card .arabic-text,
    .dua-detail-card #text-ar {
        font-size: calc(clamp(22px, 5.5vw, 25px) * var(--font-scale, 1)) !important;
        line-height: 2.45 !important;
    }
    .translation {
        font-size: 14.5px;
        line-height: 1.85;
    }
    .card-bottom {
        flex-wrap: wrap;
        gap: 10px;
    }
    .card-location {
        width: 100%;
        font-size: 11.5px;
    }
    .card-actions {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .card-actions .read-btn {
        flex: 1;
        justify-content: center;
        padding: 8px 14px;
        background: var(--bg-surface-elevated);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        font-size: 12px;
    }

    /* Reader Page Mobile */
    .reader-shell {
        margin: 16px auto 48px;
    }
    .reader-heading h1 {
        font-size: clamp(26px, 7vw, 36px);
        margin: 8px 0 8px;
    }
    .reader-title {
        font-size: 18px;
    }
    .reader-subtitle {
        font-size: 12.5px;
    }
    .reader-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 8px 10px;
        border-radius: 12px;
        max-width: 440px;
        margin: 0 auto;
    }
    .action-pill-btn,
    .reader-actions .action-pill-btn {
        flex: 1;
        max-width: 200px;
        min-width: 0;
        height: 38px;
        min-height: 38px;
        padding: 0 10px;
        font-size: 12px;
        font-weight: 700;
        justify-content: center;
        white-space: nowrap;
        gap: 6px;
    }
    .reader-actions .action-pill-btn .btn-text {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .reader-actions .bookmarks-link {
        display: none;
    }
    .bookmarks-link {
        margin-left: 0;
    }
    .font-resizer,
    .font-scaler-widget {
        display: none;
    }

    /* Reader Card */
    .reader-card {
        padding: 18px 14px;
        border-radius: 16px;
    }
    .manuscript-box {
        padding: 18px 14px;
        border-radius: 12px;
    }
    .reading-arabic {
        font-size: clamp(22px, 6vw, 28px);
        line-height: 2.2;
    }
    .full-text {
        font-size: 15px;
        line-height: 1.8;
    }

    /* Audio Player Mobile */
    .audio-player {
        background: rgba(224, 200, 104, 0.04);
        border: 1px solid var(--border-color);
        padding: 12px 14px;
        border-radius: 14px;
        margin-bottom: 20px;
    }
    .audio-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 12px;
    }
    .audio-header-title {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .audio-header-title h2 {
        font-size: 14.5px;
        font-weight: 800;
    }
    .audio-controls-top-right {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .audio-controls-top-right .select-wrapper,
    .audio-speed-wrapper,
    .audio-header-lang {
        flex: 1;
        min-width: 0;
    }
    .audio-controls-top-right .select-wrapper select,
    .audio-header-lang .select-wrapper select {
        width: 100%;
        padding: 5px 22px 5px 8px;
        font-size: 11px;
        min-height: 32px;
        box-sizing: border-box;
    }
    .audio-progress-container {
        padding: 10px 12px;
        margin-bottom: 12px;
    }
    .audio-track-wrap {
        height: 28px;
    }
    .audio-scrubber {
        height: 28px;
    }
    .audio-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .play-btn {
        grid-column: 1 / -1;
    }
    .audio-actions:has(.both-btn) .play-btn {
        grid-column: auto;
    }
    .audio-autonext {
        grid-column: 1 / -1;
        margin-left: 0;
        min-height: 32px;
        font-size: 11.5px;
    }
    .audio-btn {
        width: 100%;
        justify-content: center;
        min-height: 38px;
        font-size: 12px;
        padding: 8px 10px;
        gap: 6px;
    }

    /* Source Card & Related */
    .source-card {
        padding: 18px 14px;
        border-radius: 14px;
    }
    .source-card-header h2 {
        font-size: 18px;
    }
    .source-meta-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .source-item,
    .source-card dl > .source-item {
        padding: 14px 16px;
    }
    .related-hadith {
        padding: 18px 14px;
        border-radius: 14px;
    }
    .related-header h2 {
        font-size: 18px;
    }
    .related-link {
        padding: 11px 12px;
        font-size: 12px;
        gap: 8px;
    }
    .remove-btn-modern {
        width: 100%;
        justify-content: center;
        padding: 9px 12px;
    }
    .pagination {
        padding: 12px 14px;
        gap: 8px;
        margin-top: 24px;
    }
    .page-nav-btn {
        padding: 8px 14px;
        font-size: 12px;
        gap: 6px;
    }
    .page-indicator {
        font-size: 12px;
        text-align: center;
    }
}

/* --- Compact Smartphones (max-width: 380px) --- */
@media (max-width: 380px) {
    .header-container,
    .hero,
    .library-summary,
    .library-shell,
    .reader-shell {
        padding-left: 12px;
        padding-right: 12px;
    }
    .brand {
        font-size: 19px;
    }
    .brand-logo {
        height: 42px;
        width: auto;
    }
    .theme-toggle .theme-label {
        display: none;
    }
    .theme-toggle {
        padding: 7px 9px;
        border-radius: 50%;
    }
    .language select {
        max-width: 110px;
        font-size: 11px;
        padding: 5px 8px;
    }
    .hero h1 {
        font-size: 26px;
    }
    .hero-copy {
        padding: 20px 14px;
    }
    .hadith-card {
        padding: 14px 12px;
    }
    .reader-card {
        padding: 14px 12px;
    }
    .audio-player {
        padding: 14px 12px;
    }
}

/* --------------------------------------------------------------------------
   16. Print Styles
   -------------------------------------------------------------------------- */
@media print {
    body {
        background: #ffffff !important;
        color: #000000 !important;
    }
    .site-header, .site-footer, .hero, .library-summary, .no-print, .reader-actions, .nav-drawer, .nav-drawer-backdrop, .menu-toggle-btn {
        display: none !important;
    }
    .reader-shell {
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    .reader-card, .source-card, .related-hadith, .manuscript-box {
        background: #ffffff !important;
        border: 1px solid #cccccc !important;
        box-shadow: none !important;
        color: #000000 !important;
    }
    .arabic, .swahili, .full-text, .reader-heading h1, .reader-title {
        color: #000000 !important;
    }
}

#pwa-install { border:1px solid #f1f5f9; border-radius:8px; background:#f1f5f9; color:#07293f; padding:10px 18px; font:inherit; cursor:pointer; }
#pwa-install[hidden], #pwa-help[hidden] { display:none; }
#pwa-help { max-width:360px; font-size:13px; line-height:1.7; }
#pwa-help summary { cursor:pointer; }

/* --------------------------------------------------------------------------
   17. Mobile layout fixes (<= 640px)
   Kadi zipate nafasi pembeni, header isikatike, takwimu ziwe mstari mmoja.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    body { overflow-x: clip; }

    /* Header ya Juu: Mstari mmoja tu msafi na mwepesi (Single Slim Row) */
    .site-header {
        height: 56px !important;
        padding: 0 !important;
    }
    .site-header .header-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 100% !important;
        padding: 0 16px !important;
        gap: 8px !important;
    }
    .site-header .main-nav {
        display: flex !important;
        align-items: center !important;
    }
    /* Links za juu zimeondolewa, ziko ndani ya menyu ya pembeni (nav drawer) */
    .site-header .nav-links {
        display: none !important;
    }
    .site-header .brand {
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
        margin-right: auto !important;
    }
    .site-header .brand-logo {
        height: 44px !important;
        width: auto !important;
    }
    .site-header .brand small {
        display: none !important;
    }
    .site-header .main-nav {
        display: flex !important;
        align-items: center !important;
        margin-left: auto !important;
    }
    .site-header .nav-controls {
        display: flex !important;
        align-items: center !important;
        margin-left: auto !important;
        gap: 8px !important;
    }
    .site-header .language {
        display: none !important;
    }
    .site-header .theme-toggle {
        display: inline-flex !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }
    .site-header .theme-toggle .theme-label {
        display: none !important;
    }
    .site-header .auth-trigger {
        display: inline-flex !important;
        align-items: center !important;
        height: 34px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
        gap: 6px !important;
        border-radius: 999px !important;
        border: 1.5px solid var(--gold) !important;
        background: var(--gold-subtle) !important;
        color: var(--gold) !important;
        font-weight: 700 !important;
    }
    .site-header .auth-trigger--user {
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    /* Kitufe cha Menyu ya Simu (Hamburger Button) */
    .menu-toggle-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 50% !important;
        background: var(--bg-surface-elevated) !important;
        border: 1.5px solid var(--border-color) !important;
        color: var(--gold) !important;
        cursor: pointer !important;
        padding: 0 !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .menu-toggle-btn:active {
        transform: scale(0.92) !important;
    }

    /* Menyu ya Pembeni (Mobile Nav Drawer) */
    .nav-drawer-backdrop {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 1100 !important;
        background: rgba(0, 0, 0, 0.65) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .nav-drawer-backdrop.is-open {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .nav-drawer {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 85% !important;
        max-width: 320px !important;
        z-index: 1150 !important;
        background: var(--bg-surface) !important;
        border-left: 1.5px solid var(--border-color) !important;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5) !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .nav-drawer.is-open {
        transform: translateX(0) !important;
    }

    body.nav-drawer-open {
        overflow: hidden !important;
    }

    .nav-drawer-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 18px 18px 14px !important;
        border-bottom: 1.5px solid var(--border-subtle) !important;
    }

    .nav-drawer-brand {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        text-decoration: none !important;
    }

    .nav-drawer-logo {
        width: 44px !important;
        height: 44px !important;
        object-fit: contain !important;
        border-radius: 0 !important;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4)) !important;
    }

    .nav-drawer-brand-text {
        display: flex !important;
        flex-direction: column !important;
    }

    .nav-drawer-title {
        font-family: Georgia, serif !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        color: var(--text-primary) !important;
        line-height: 1.2 !important;
    }

    .nav-drawer-sub {
        font-size: 9px !important;
        font-weight: 800 !important;
        letter-spacing: 1.5px !important;
        color: var(--gold) !important;
        text-transform: uppercase !important;
    }

    .nav-drawer-close {
        width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        background: var(--bg-surface-elevated) !important;
        border: 1px solid var(--border-subtle) !important;
        color: var(--text-muted) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }

    .nav-drawer-body {
        padding: 16px 14px !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .nav-drawer-section-label {
        font-size: 10px !important;
        font-weight: 800 !important;
        letter-spacing: 1.5px !important;
        color: var(--text-muted) !important;
        margin: 8px 6px 4px !important;
        text-transform: uppercase !important;
    }

    .nav-drawer-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .nav-drawer-link {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 11px 14px !important;
        border-radius: 12px !important;
        background: transparent !important;
        color: var(--text-secondary) !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        border: 1px solid transparent !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        text-decoration: none !important;
    }

    .nav-drawer-link.active {
        background: var(--gold-subtle) !important;
        color: var(--gold) !important;
        border-color: rgba(224, 200, 104, 0.35) !important;
    }

    .nav-drawer-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--gold) !important;
    }

    .nav-drawer-text {
        flex: 1 !important;
    }

    .nav-drawer-arrow {
        color: var(--text-muted) !important;
        font-size: 14px !important;
        transition: transform 0.2s ease !important;
    }

    .nav-drawer-divider {
        height: 1px !important;
        background: var(--border-subtle) !important;
        margin: 12px 6px !important;
    }

    /* Mipangilio ya Nav Drawer (Lugha & Mwonekano) */
    .nav-drawer-setting-item {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        padding: 4px 6px 8px !important;
    }

    .nav-drawer-setting-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .nav-drawer-setting-title {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: var(--text-secondary) !important;
        letter-spacing: 0.2px !important;
    }

    /* Grid ya Lugha ya Kusoma */
    .nav-drawer-lang-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    .nav-drawer-lang-grid--3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .drawer-lang-flag {
        font-size: 15px;
        line-height: 1;
        margin-bottom: 3px;
    }

    .nav-drawer-bilingual-btn {
        width: 100% !important;
        cursor: pointer !important;
    }

    .drawer-lang-btn {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 6px !important;
        border-radius: 10px !important;
        background: var(--bg-surface-elevated) !important;
        border: 1px solid var(--border-subtle) !important;
        color: var(--text-secondary) !important;
        cursor: pointer !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        text-align: center !important;
    }

    .drawer-lang-btn.active {
        background: var(--gold-subtle) !important;
        border-color: rgba(224, 200, 104, 0.5) !important;
        color: var(--gold) !important;
        box-shadow: 0 0 12px rgba(224, 200, 104, 0.15) !important;
    }

    .drawer-lang-main {
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    .drawer-lang-sub {
        font-size: 9.5px !important;
        color: var(--text-muted) !important;
        opacity: 0.8 !important;
        margin-top: 1px !important;
    }

    .drawer-lang-btn.active .drawer-lang-sub {
        color: var(--gold) !important;
        opacity: 0.9 !important;
    }

    /* Kitufe cha Mwonekano (Light / Dark Switch) */
    .nav-drawer-theme-switch {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    .drawer-theme-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 9px 8px !important;
        border-radius: 10px !important;
        background: var(--bg-surface-elevated) !important;
        border: 1px solid var(--border-subtle) !important;
        color: var(--text-secondary) !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .drawer-theme-btn.active {
        background: var(--gold-subtle) !important;
        border-color: rgba(224, 200, 104, 0.5) !important;
        color: var(--gold) !important;
        box-shadow: 0 0 12px rgba(224, 200, 104, 0.15) !important;
    }

    .drawer-theme-btn svg {
        flex-shrink: 0 !important;
    }

    /* PWA Box kwenye Nav Drawer */
    .nav-drawer-pwa-box {
        padding: 4px 6px 8px !important;
    }

    .nav-drawer-pwa-btn {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
        background: rgba(224, 200, 104, 0.08) !important;
        border: 1px solid rgba(224, 200, 104, 0.3) !important;
        color: var(--text-primary) !important;
        text-align: left !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }

    .nav-drawer-pwa-meta {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    .nav-drawer-pwa-title {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: var(--gold) !important;
    }

    .nav-drawer-pwa-sub {
        font-size: 11px !important;
        color: var(--text-muted) !important;
    }

    .nav-drawer-pwa-badge {
        font-size: 10px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        padding: 3px 8px !important;
        border-radius: 999px !important;
        background: var(--gold-subtle) !important;
        color: var(--gold) !important;
        border: 1px solid rgba(224, 200, 104, 0.4) !important;
    }

    .nav-drawer-pwa-badge.is-installed {
        background: rgba(46, 204, 113, 0.15) !important;
        color: #2ecc71 !important;
        border-color: rgba(46, 204, 113, 0.4) !important;
    }

    .nav-drawer-account {
        padding: 2px 4px !important;
    }

    .nav-drawer-user-info {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 12px !important;
        background: var(--bg-surface-elevated) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 12px !important;
        margin-bottom: 10px !important;
    }

    .nav-drawer-avatar {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    .nav-drawer-initial {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--gold-gradient) !important;
        color: #0f1418 !important;
        font-weight: 800 !important;
        font-size: 15px !important;
    }

    .nav-drawer-user-details {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
    }

    .nav-drawer-user-details strong {
        font-size: 13px !important;
        color: var(--text-primary) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .nav-drawer-user-details span {
        font-size: 11px !important;
        color: var(--text-muted) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .nav-drawer-btn {
        width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 11px 16px !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }

    .nav-drawer-btn--login {
        background: var(--gold-gradient) !important;
        color: #07293f !important;
        font-weight: 800 !important;
        border: none !important;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3) !important;
    }

    [data-theme="light"] .nav-drawer-btn--login {
        color: #ffffff !important;
    }

    .nav-drawer-btn--logout {
        background: var(--bg-surface-elevated) !important;
        border: 1px solid var(--border-subtle) !important;
        color: var(--text-muted) !important;
    }

    .nav-drawer-footer {
        padding: 14px 16px !important;
        border-top: 1.5px solid var(--border-subtle) !important;
        background: var(--bg-surface-elevated) !important;
    }

    .nav-drawer-quote {
        font-size: 11px !important;
        line-height: 1.5 !important;
        color: var(--text-muted) !important;
        font-style: italic !important;
        margin: 0 0 6px !important;
    }

    .nav-drawer-copy {
        font-size: 10px !important;
        color: var(--text-dim) !important;
        display: block !important;
    }

    /* Kadi zisiguse ukingo wa skrini */
    .hero,
    .library-summary {
        margin-left: 16px;
        margin-right: 16px;
    }
    .hero { padding: 0; }
    .hero-copy { padding: 24px 20px; max-width: none; }

    /* Takwimu: 3 kwa mstari mmoja, compact */
    .library-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 14px 10px;
    }
    .summary-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
    }
    .summary-icon { font-size: 16px; padding: 5px 8px; }
    .summary-text strong { display: block; font-size: 20px; line-height: 1.1; }
    .summary-text span { display: block; font-size: 10.5px; line-height: 1.3; }
    .summary-note-item { grid-column: 1 / -1; margin-top: 2px; }

    /* Zuia grid "blowout": maudhui yasizidi upana wa skrini */
    .library-shell {
        grid-template-columns: minmax(0, 1fr);
        margin-left: 0;
        margin-right: 0;
    }
    .library-shell > *,
    .sidebar,
    .sidebar-block,
    .results,
    .hadith-card,
    .search-form { min-width: 0; max-width: 100%; }
    .search-form input { min-width: 0; width: 100%; }
    .result-meta { flex-wrap: wrap; }
    .coverage-note,
    .hadith-card h3,
    .translation,
    .card-source,
    .card-location { overflow-wrap: anywhere; white-space: normal; }

    /* Collections pill bar: onyesha kuwa inasogezwa (scroll) */
    .sidebar-block:first-of-type {
        -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
        mask-image: linear-gradient(90deg, #000 85%, transparent);
        padding-right: 28px;
    }
}

@media (max-width: 380px) {
    .site-header .header-container { padding: 0 12px; }
    .site-header .brand small { display: none; }
    .site-header .language select { max-width: 96px; font-size: 16px; }
    .hero,
    .library-summary { margin-left: 12px; margin-right: 12px; }
    .hero-copy { padding: 20px 16px; }
}

/* --------------------------------------------------------------------------
   Dua & Adhkar (Hisn al-Muslim) Styles
   -------------------------------------------------------------------------- */
.dua-hero .hero-copy {
    max-width: 820px;
}

.dua-content-shell {
    max-width: 1280px;
    margin: 0 auto 60px;
    padding: 0 20px;
}

.dua-search-bar {
    margin: 20px 0 18px;
}

.dua-search-bar .search-form {
    max-width: 680px;
    margin: 0 auto;
}

.search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.search-input-icon {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    pointer-events: none;
}

[dir="rtl"] .search-input-icon {
    left: auto;
    right: 14px;
}

.search-input-wrap input {
    width: 100%;
    padding: 12px 42px;
    border-radius: 24px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
}

.search-input-wrap input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(224, 200, 104, 0.2);
}

.clear-search-btn {
    position: absolute;
    right: 14px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
}

[dir="rtl"] .clear-search-btn {
    right: auto;
    left: 14px;
}

/* Category Pills Navigation */
.dua-categories-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 4px 18px;
    margin-bottom: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.dua-categories-nav::-webkit-scrollbar {
    display: none;
}

.category-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-pill.active {
    background: var(--gold-subtle);
    border-color: rgba(224, 200, 104, 0.45);
    color: var(--gold);
    box-shadow: 0 2px 8px rgba(224, 200, 104, 0.15);
}

.pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 11px;
    font-weight: 800;
}

.category-pill.active .pill-count {
    background: rgba(224, 200, 104, 0.25);
    color: var(--gold);
}

/* Dua Cards Grid */
.dua-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 22px;
}

.dua-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

@media (max-width: 640px) {
    .dua-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .dua-card {
        padding: 16px 14px;
        border-radius: 16px;
    }
    .dua-card-header {
        flex-wrap: wrap;
        gap: 6px;
    }
    .dua-detail-header {
        flex-wrap: wrap;
        gap: 8px;
    }
}

.dua-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.dua-category-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 12px;
    background: var(--gold-subtle);
    color: var(--gold);
    border: 1px solid var(--border-color);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.dua-repeat-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    background: var(--gold-subtle);
    color: var(--gold);
    border: 1px solid rgba(224, 200, 104, 0.35);
    font-size: 11px;
    font-weight: 800;
}

.dua-repeat-badge--single {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    border-color: var(--border-subtle);
}

.dua-card-title {
    font-family: Georgia, serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 14px;
}

.dua-card-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.dua-arabic-box {
    background: rgba(224, 200, 104, 0.04);
    border: 1px solid rgba(224, 200, 104, 0.2);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
    text-align: right;
}

[dir="rtl"] .dua-arabic-box {
    text-align: right;
}

.dua-arabic-text {
    font-family: 'Amiri', 'Traditional Arabic', serif;
    font-size: 22px;
    line-height: 2;
    color: #fef8ec;
    margin: 0;
}

[data-theme="light"] .dua-arabic-text {
    color: #1a202c;
}

.dua-translation-text {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 0 16px;
    flex: 1;
}

.dua-card-ref {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
    margin-bottom: 16px;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
}

.dua-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.dua-read-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    border-radius: 14px;
    background: var(--gold-subtle);
    border: 1px solid rgba(224, 200, 104, 0.35);
    color: var(--gold);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Dua Detail Page */
.dua-detail-shell {
    max-width: 900px;
}

.dua-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-subtle);
}

.transliteration-box {
    background: rgba(224, 200, 104, 0.05);
    border: 1px solid rgba(224, 200, 104, 0.16);
    border-radius: 14px;
    padding: 14px 18px;
    margin-top: 8px;
}

.transliteration-text {
    font-size: 14px;
    font-style: italic;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0;
}

[data-theme="light"] .transliteration-text {
    color: #334155;
    font-weight: 600;
}

/* Dua Counter Widget */
.dua-counter-widget {
    background: var(--bg-surface-elevated);
    border: 1.5px solid var(--border-color);
    border-radius: 20px;
    padding: 22px;
    margin: 28px 0;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.counter-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.counter-widget-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.counter-target-text {
    font-size: 12px;
    font-weight: 700;
    color: var(--gold);
}

.counter-widget-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.dua-count-btn {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 3px solid var(--gold);
    color: var(--gold);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 24px rgba(224, 200, 104, 0.15);
    user-select: none;
    -webkit-user-select: none;
}

.dua-count-btn:active {
    transform: scale(0.94);
    box-shadow: 0 0 30px rgba(224, 200, 104, 0.35);
}

.dua-count-btn.is-completed {
    border-color: var(--gold);
    background: var(--gold-subtle);
    color: var(--gold);
    box-shadow: 0 0 28px rgba(224, 200, 104, 0.25);
}

.dua-count-number {
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
}

.dua-count-slash, .dua-count-total {
    display: none;
}

.dua-count-hint {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.8;
    margin-top: 4px;
}

.counter-reset-btn {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.counter-completed-msg {
    margin-top: 14px;
    padding: 10px 16px;
    border-radius: 12px;
    background: var(--gold-subtle);
    border: 1px solid var(--border-color);
    color: var(--gold);
    font-size: 13px;
    font-weight: 700;
}

.dua-virtue-callout {
    background: rgba(224, 200, 104, 0.06);
    border: 1px solid rgba(224, 200, 104, 0.25);
    border-radius: 16px;
    padding: 16px 20px;
    margin: 22px 0;
}

.virtue-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--gold);
    margin-bottom: 6px;
}

.virtue-text {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

/* Source & Reference Card for Dua & Hadith */
.source-box.dua-ref-box {
    background: var(--bg-surface-elevated, #141a22);
    border: 1px solid var(--border-color, rgba(224, 200, 104, 0.2));
    border-radius: 16px;
    padding: 18px 22px;
    margin-top: 24px;
}

.source-box.dua-ref-box .source-header {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
}

.source-box.dua-ref-box .source-title {
    font-size: 13.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gold, #f1f5f9);
    margin: 0;
}

.source-box.dua-ref-box .source-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    font-size: 13.5px;
}

.source-box.dua-ref-box .source-item:last-child {
    margin-bottom: 0;
}

.source-box.dua-ref-box .source-item dt {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #94a3b8);
}

.source-box.dua-ref-box .source-item dd {
    margin: 0;
    color: var(--text-primary, #f1f5f9);
    line-height: 1.5;
}

.source-box.dua-ref-box .source-item a {
    color: var(--gold, #f1f5f9);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.speech-client-btn.active {
    background: rgba(224, 200, 104, 0.2) !important;
    border-color: var(--gold, #f1f5f9) !important;
    color: var(--gold, #f1f5f9) !important;
}

/* --------------------------------------------------------------------------
   Digital Tasbih Tool Styles
   -------------------------------------------------------------------------- */
.tasbih-shell {
    max-width: 720px;
    margin: 24px auto 60px;
    padding: 0 20px;
}

.tasbih-top-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin: 4px 0 24px 0 !important;
    padding: 2px 0 !important;
}

.tasbih-top-nav .back-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 20px !important;
    height: 40px !important;
    box-sizing: border-box !important;
    background: var(--bg-surface) !important;
    border: 1.5px solid var(--border-color) !important;
    border-radius: 9999px !important;
    color: var(--text-secondary) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
}

.tasbih-heading {
    margin-bottom: 24px;
}

.tasbih-app-card {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 28px;
    padding: 26px 22px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.tasbih-presets-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
}

@media (max-width: 540px) {
    .tasbih-presets-wrap {
        grid-template-columns: repeat(2, 1fr);
    }
}

.tasbih-preset-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border-radius: 14px;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.tasbih-preset-btn.active {
    background: var(--gold-subtle);
    border-color: rgba(224, 200, 104, 0.5);
    color: var(--gold);
    box-shadow: 0 0 12px rgba(224, 200, 104, 0.15);
}

.preset-ar {
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: 2px;
}

.preset-sw {
    font-size: 11px;
    font-weight: 700;
}

.preset-target {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 9px;
    font-weight: 800;
    color: var(--text-muted);
}

.tasbih-preset-btn.active .preset-target {
    color: var(--gold);
}

.tasbih-active-display {
    text-align: center;
    padding: 6px 12px;
}

.active-dhikr-ar {
    font-size: 34px;
    color: #fef8ec;
    margin: 0 0 4px;
    line-height: 1.4;
}

[data-theme="light"] .active-dhikr-ar {
    color: #0f172a;
}

.active-dhikr-sw {
    font-size: 16px;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 4px;
}

.active-dhikr-meaning {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* ==========================================================================
   Handheld Electronic Tally Counter (Digital Tasbih Device)
   ========================================================================== */
.tasbih-device-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 12px 0 16px;
}

.tasbih-device-case {
    position: relative;
    width: 320px;
    max-width: 92vw;
    background: linear-gradient(170deg, #18283f 0%, #101c2d 50%, #09121d 100%);
    border: 3px solid rgba(16, 185, 129, 0.55);
    border-radius: 95px 95px 140px 140px;
    padding: 30px 24px 38px;
    box-shadow: 
        0 24px 50px -10px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(0, 0, 0, 0.8),
        inset 0 3px 6px rgba(255, 255, 255, 0.12),
        inset 0 -8px 18px rgba(0, 0, 0, 0.7),
        0 0 30px rgba(16, 185, 129, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

[data-theme="light"] .tasbih-device-case {
    background: linear-gradient(170deg, #ffffff 0%, #f8fafc 50%, #edf2f7 100%);
    border-color: rgba(5, 150, 105, 0.4);
    box-shadow: 
        0 20px 40px -8px rgba(15, 23, 42, 0.1),
        inset 0 2px 4px rgba(255, 255, 255, 0.9),
        inset 0 -6px 14px rgba(0, 0, 0, 0.05),
        0 0 24px rgba(16, 185, 129, 0.15);
}

/* Ergonomic side grips */
.tasbih-device-case::before,
.tasbih-device-case::after {
    content: '';
    position: absolute;
    top: 38%;
    width: 5px;
    height: 80px;
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.3);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.tasbih-device-case::before { left: 4px; }
.tasbih-device-case::after { right: 4px; }

/* 1. Top LCD Screen */
.tasbih-device-lcd-wrap {
    width: 100%;
    padding: 0 4px;
    box-sizing: border-box;
}

.tasbih-device-lcd {
    position: relative;
    background: #060d16;
    border: 2.5px solid #162a42;
    border-radius: 18px;
    padding: 12px 16px 10px;
    box-shadow: 
        inset 0 4px 12px rgba(0, 0, 0, 0.85),
        0 2px 6px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(16, 185, 129, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
}

/* Glass shine on screen */
.tasbih-device-lcd::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
    pointer-events: none;
    border-radius: 16px 16px 0 0;
}

.lcd-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: rgba(241, 245, 249, 0.85);
    margin-bottom: 2px;
}

.lcd-header-row strong {
    color: #ffffff;
}

.lcd-digits-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 58px;
}

.tasbih-device-lcd .tasbih-count-val {
    font-family: 'Courier New', Courier, monospace;
    font-size: 54px;
    font-weight: 900;
    line-height: 1;
    color: #ffffff;
    letter-spacing: 4px;
    text-shadow: 
        0 0 16px rgba(224, 200, 104, 0.6),
        0 0 32px rgba(224, 200, 104, 0.25);
    font-variant-numeric: tabular-nums;
    margin: 0;
}

[data-theme="light"] .tasbih-device-lcd {
    background: #0f172a;
    border-color: #1e293b;
}
[data-theme="light"] .tasbih-device-lcd .tasbih-count-val {
    color: #f8fafc;
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.5);
}

.lcd-progress-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    margin-top: 6px;
    overflow: hidden;
}

.lcd-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #94a3b8, #ffffff);
    border-radius: 4px;
    transition: width 0.15s ease-out;
    box-shadow: 0 0 8px rgba(224, 200, 104, 0.6);
}

/* 2. Middle Control Buttons (- and ↻) */
.tasbih-device-mid-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 82%;
    padding: 0 8px;
    box-sizing: border-box;
}

.device-mini-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(145deg, #18283f, #0a1320);
    border: 2px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    transition: all 0.15s ease;
    box-shadow: 
        0 4px 10px rgba(0, 0, 0, 0.5),
        inset 0 1.5px 3px rgba(255, 255, 255, 0.15),
        inset 0 -2px 5px rgba(0, 0, 0, 0.5);
    -webkit-tap-highlight-color: transparent;
}

[data-theme="light"] .device-mini-btn {
    background: linear-gradient(145deg, #ffffff, #f1f5f9);
    border-color: rgba(15, 23, 42, 0.25);
    color: #0f172a;
    box-shadow: 
        0 4px 8px rgba(15, 23, 42, 0.08),
        inset 0 1px 2px rgba(255, 255, 255, 0.8),
        inset 0 -2px 4px rgba(0, 0, 0, 0.05);
}

.device-mini-btn:active {
    transform: translateY(2px) scale(0.94);
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.6),
        inset 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* 3. Bottom Big TAP Button */
.tasbih-device-tap-wrap {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tasbih-big-tap-btn {
    position: relative;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 32%, #1e334f 0%, #112033 65%, #08101a 100%);
    border: 3.5px solid #ffffff;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease;
    box-shadow: 
        0 10px 24px rgba(0, 0, 0, 0.6),
        0 0 0 6px rgba(19, 31, 51, 0.8),
        0 0 20px rgba(224, 200, 104, 0.25),
        inset 0 3px 6px rgba(255, 255, 255, 0.2),
        inset 0 -5px 12px rgba(0, 0, 0, 0.7);
}

[data-theme="light"] .tasbih-big-tap-btn {
    background: radial-gradient(circle at 35% 32%, #ffffff 0%, #f8fafc 70%, #e2e8f0 100%);
    border-color: #0a3f66;
    color: #0f172a;
    box-shadow: 
        0 10px 20px rgba(15, 23, 42, 0.12),
        0 0 0 6px rgba(224, 200, 104, 0.8),
        0 0 16px rgba(15, 23, 42, 0.15),
        inset 0 3px 6px rgba(255, 255, 255, 0.9),
        inset 0 -4px 8px rgba(0, 0, 0, 0.06);
}

.tasbih-big-tap-btn:active,
.tasbih-big-tap-btn.btn-pressed {
    transform: scale(0.93) translateY(3px);
    box-shadow: 
        0 3px 8px rgba(0, 0, 0, 0.8),
        0 0 0 4px rgba(19, 31, 51, 0.9),
        inset 0 3px 10px rgba(0, 0, 0, 0.85);
    filter: brightness(0.92);
}

.tap-btn-label {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-family: var(--font-display, inherit);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* SVG ring progress circling around the TAP button */
.device-ring-svg {
    position: absolute;
    inset: -8px;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
    transform: rotate(-90deg);
    pointer-events: none;
}

.device-ring-svg .ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.05);
    stroke-width: 4;
}

.device-ring-svg .ring-progress {
    fill: none;
    stroke: var(--gold);
    stroke-width: 4.5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.15s ease-out;
    filter: drop-shadow(0 0 4px rgba(224, 200, 104, 0.7));
}

/* Backwards compatibility */
.tasbih-ring-container {
    display: contents;
}
.tasbih-tap-btn {
    display: contents;
}

.tasbih-target-info strong {
    color: var(--gold);
}

.tasbih-tap-hint {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--text-dim);
    margin-top: 6px;
    text-transform: uppercase;
}

/* Controls Bar */
.tasbih-controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
}

.tasbih-stat-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.tasbih-stat-pill strong {
    font-size: 16px;
    color: var(--gold);
}

.tasbih-actions-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tasbih-sound-select {
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
}.tasbih-sound-select:focus {
    border-color: rgba(224, 200, 104, 0.5);
}


.tasbih-sound-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.control-toggle-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.control-toggle-btn.active {
    border-color: rgba(224, 200, 104, 0.4);
    background: var(--gold-subtle);
}

.tasbih-reset-action-btn {
    padding: 7px 12px;
    border-radius: 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tasbih-footer-stats {
    font-size: 11px;
    color: var(--text-muted);
}

.tasbih-footer-stats strong {
    color: var(--text-primary);
}

@media (max-width: 640px) {
    .tasbih-shell {
        margin: 18px auto 40px !important;
        padding: 0 16px !important;
    }

    .tasbih-top-nav {
        margin: 4px 0 20px 0 !important;
        padding: 2px 0 !important;
    }

    .tasbih-top-nav .back-link {
        padding: 8px 18px !important;
        font-size: 13px !important;
        height: 38px !important;
    }

    .tasbih-heading {
        margin-bottom: 16px;
    }

    .tasbih-heading h1 {
        font-size: 26px;
        letter-spacing: -0.5px;
    }

    .tasbih-heading .reader-subtitle {
        font-size: 13px;
        line-height: 1.5;
        padding: 0 4px;
    }

    .tasbih-app-card {
        padding: 16px 12px;
        border-radius: 22px;
        gap: 14px;
    }

    .tasbih-presets-wrap {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
        padding: 4px 2px 6px;
        width: 100%;
        scroll-snap-type: x proximity;
    }

    .tasbih-presets-wrap::-webkit-scrollbar {
        display: none;
    }

    .tasbih-preset-btn {
        flex: 0 0 auto;
        min-width: 122px;
        padding: 8px 10px;
        border-radius: 12px;
        scroll-snap-align: start;
        touch-action: manipulation;
    }

    .preset-ar {
        font-size: 15px;
    }

    .preset-sw {
        font-size: 11px;
    }

    .tasbih-active-display {
        padding: 2px 6px;
    }

    .active-dhikr-ar {
        font-size: 28px;
        line-height: 1.3;
        margin: 0 0 2px;
    }

    .active-dhikr-sw {
        font-size: 15px;
        margin-bottom: 2px;
    }

    .active-dhikr-meaning {
        font-size: 12px;
        line-height: 1.4;
    }

    .tasbih-device-case {
        width: 290px;
        padding: 24px 18px 30px;
        border-radius: 85px 85px 125px 125px;
        gap: 16px;
    }

    .tasbih-device-lcd .tasbih-count-val {
        font-size: 46px;
    }

    .tasbih-device-tap-wrap {
        width: 125px;
        height: 125px;
    }

    .tasbih-big-tap-btn {
        width: 115px;
        height: 115px;
    }

    .tap-btn-label {
        font-size: 20px;
    }

    .device-mini-btn {
        width: 44px;
        height: 44px;
    }

    .tasbih-controls-bar {
        flex-direction: column;
        gap: 10px;
        padding: 12px;
        border-radius: 14px;
        box-sizing: border-box;
    }

    .tasbih-stat-pill {
        width: 100%;
        justify-content: space-between;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border-subtle);
    }

    .tasbih-actions-group {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
    }

    .tasbih-sound-select {
        flex: 1;
        min-width: 0;
        font-size: 11.5px;
        padding: 8px 6px;
        border-radius: 10px;
    }

    .control-toggle-btn {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        touch-action: manipulation;
    }

    .tasbih-reset-action-btn {
        flex: 0 0 auto;
        padding: 8px 10px;
        font-size: 11px;
        white-space: nowrap;
        touch-action: manipulation;
    }

    .tasbih-footer-stats {
        font-size: 11px;
        text-align: center;
        padding: 0 8px;
    }
}

@media (max-width: 360px) {
    .tasbih-device-case {
        width: 260px;
        padding: 20px 14px 26px;
        border-radius: 75px 75px 110px 110px;
        gap: 14px;
    }

    .tasbih-device-lcd .tasbih-count-val {
        font-size: 38px;
    }

    .tasbih-device-tap-wrap {
        width: 110px;
        height: 110px;
    }

    .tasbih-big-tap-btn {
        width: 100px;
        height: 100px;
    }

    .tap-btn-label {
        font-size: 18px;
    }

    .device-mini-btn {
        width: 40px;
        height: 40px;
    }

    .tasbih-reset-action-btn span {
        display: none;
    }
}

/* ==========================================================================
   Moduli ya Qur'ani Tukufu (Holy Qur'an Module Styling)
   ========================================================================== */

.quran-shell {
    display: block;
    width: 100%;
    max-width: 1200px;
    margin: 28px auto 60px;
    padding: 0 24px;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    .quran-shell {
        margin: 18px auto 40px;
        padding: 0 16px;
    }
}

/* Sura Maarufu za Haraka (Quick Topics Horizontal Scroll) */
.quran-quick-wrapper,
.quick-topics-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 18px;
    padding: 4px 0 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.quran-quick-wrapper::-webkit-scrollbar,
.quick-topics-wrapper::-webkit-scrollbar {
    display: none;
}

.quran-quick-label,
.quick-topics-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--gold);
    white-space: nowrap;
    text-transform: uppercase;
    flex-shrink: 0;
}

.quran-quick-scroll,
.quick-topics-scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0;
}

.quran-quick-scroll::-webkit-scrollbar,
.quick-topics-scroll::-webkit-scrollbar {
    display: none;
}

.quran-quick-chip,
.quick-topic-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 15px;
    border-radius: 9999px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Upau wa Utafutaji na Vichujio vya Qur'ani (Search & Toolbar) */
.quran-toolbar,
.library-toolbar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
    width: 100%;
}

@media (min-width: 768px) {
    .quran-toolbar,
    .library-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
    }
}

.quran-search-wrap,
.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    width: 100%;
    min-width: 0;
}

.quran-search-icon,
.search-input-wrapper .search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    pointer-events: none;
    z-index: 2;
}

[dir="rtl"] .quran-search-icon,
[dir="rtl"] .search-input-wrapper .search-icon {
    left: auto;
    right: 18px;
}

.quran-search-input,
.library-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 44px 13px 48px;
    border-radius: 9999px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

[dir="rtl"] .quran-search-input,
[dir="rtl"] .library-search-input {
    padding: 13px 48px 13px 44px;
}

.quran-search-input:focus,
.library-search-input:focus {
    border-color: var(--gold);
    background: var(--bg-surface-hover);
    box-shadow: 0 0 0 3px rgba(224, 200, 104, 0.25), 0 4px 14px rgba(0, 0, 0, 0.2);
}

.quran-search-input::placeholder,
.library-search-input::placeholder {
    color: var(--text-muted);
    font-size: 13.5px;
}

.quran-search-clear,
.search-input-wrapper .clear-search-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    z-index: 2;
}

[dir="rtl"] .quran-search-clear,
[dir="rtl"] .search-input-wrapper .clear-search-btn {
    right: auto;
    left: 14px;
}

/* Vichujio vya Makki na Madani (Segmented Filter Tabs) */
.quran-filter-tabs,
.category-tabs {
    display: inline-flex;
    align-items: center;
    background: var(--bg-surface);
    padding: 4px;
    border-radius: 9999px;
    border: 1.5px solid var(--border-color);
    gap: 4px;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .quran-filter-tabs,
    .category-tabs {
        width: 100%;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
    }
}

.quran-tab-btn,
.category-tab-btn {
    padding: 8px 18px;
    border: none;
    background: transparent;
    border-radius: 9999px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    text-align: center;
}

@media (max-width: 640px) {
    .quran-tab-btn,
    .category-tab-btn {
        flex: 1;
        padding: 9px 8px;
        font-size: 12px;
    }
}

@media (max-width: 380px) {
    .quran-tab-btn,
    .category-tab-btn {
        padding: 7px 4px;
        font-size: 11px;
    }
}

.quran-tab-btn.active,
.category-tab-btn.active {
    background: var(--gold);
    color: #111;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(224, 200, 104, 0.35);
}

.quran-surah-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

@media (max-width: 640px) {
    .quran-surah-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 16px;
    }
}

.quran-surah-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 16px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-subtle);
    text-decoration: none;
    color: inherit;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.surah-card-num-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--gold-subtle);
    border: 1.5px solid rgba(224, 200, 104, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.surah-card-num {
    font-size: 15px;
    font-weight: 800;
    color: var(--gold);
    transition: color 0.2s ease;
}

.surah-card-info {
    flex: 1;
    min-width: 0;
}

.surah-card-name-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.surah-card-name-sw {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
}

.surah-card-trans {
    font-size: 12px;
    color: var(--text-muted);
}

.surah-card-meaning {
    margin: 3px 0 6px;
    font-size: 12.5px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.surah-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
}

.surah-card-badge {
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.badge-makki, .pill-makki {
    background: rgba(224, 200, 104, 0.15);
    color: var(--gold);
    border: 1px solid rgba(224, 200, 104, 0.3);
}

.badge-madani, .pill-madani {
    background: var(--gold-subtle);
    color: var(--gold);
    border: 1px solid var(--border-color);
}

.surah-card-arabic-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.surah-card-ar {
    font-size: 20px;
    font-weight: 700;
    color: var(--gold);
}

.surah-card-arrow {
    font-size: 14px;
    color: var(--text-muted);
    transition: transform 0.2s ease, color 0.2s ease;
}

@media (max-width: 640px) {
    .quran-surah-card {
        padding: 12px 14px;
        gap: 12px;
        border-radius: 14px;
    }
    .surah-card-num-box {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }
    .surah-card-num {
        font-size: 13.5px;
    }
    .surah-card-name-sw {
        font-size: 15px;
    }
    .surah-card-trans {
        font-size: 11.5px;
    }
    .surah-card-arabic-box {
        gap: 2px;
    }
    .surah-card-ar {
        font-size: 18px;
    }
    .surah-card-meta {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* Surah Reader Specifics */
.quran-header-card {
    padding: 32px 24px;
    border-radius: 20px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    text-align: center;
    margin-bottom: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .quran-header-card {
    background: linear-gradient(180deg, var(--bg-surface) 0%, rgba(20, 20, 20, 0.95) 100%);
    border-color: rgba(224, 200, 104, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

[data-theme="light"] .quran-header-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.32) !important;
    box-shadow: 0 4px 16px rgba(3, 33, 44, 0.06) !important;
}

[data-theme="light"] .quran-header-pill {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.3) !important;
    color: #56707a !important;
}

[data-theme="light"] .quran-header-title-ar {
    color: #0f172a !important;
}

[data-theme="light"] .quran-header-title-sw {
    color: #0f172a !important;
}

[data-theme="light"] .quran-header-meaning {
    color: #475569 !important;
}

[data-theme="light"] .quran-bismillah-box {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.18) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .bismillah-badge {
    background: rgba(15, 23, 42, 0.08) !important;
    border-color: rgba(15, 23, 42, 0.2) !important;
    color: #0f172a !important;
}

[data-theme="light"] .bismillah-ar {
    color: #0f172a !important;
}

[data-theme="light"] .bismillah-sw {
    color: #56707a !important;
}

[data-theme="light"] .quran-ayah-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.25) !important;
    box-shadow: 0 2px 10px rgba(3, 33, 44, 0.04) !important;
}

[data-theme="light"] .ayah-arabic-text {
    color: #07293f !important;
}

[data-theme="light"] .ayah-translation-sw {
    color: #1e3a45 !important;
}

[data-theme="light"] .ayah-translation-en {
    color: #56707a !important;
}

.quran-header-badge-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.quran-header-pill {
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.quran-header-title-ar {
    margin: 0;
    font-size: 38px;
    font-weight: 700;
    color: var(--gold);
    line-height: 1.8;
}

.quran-header-title-sw {
    margin: 8px 0 4px;
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
}

.quran-header-meaning {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
}

@media (max-width: 640px) {
    .quran-header-card {
        padding: 20px 14px;
        border-radius: 16px;
        margin-bottom: 18px;
    }
    .quran-header-title-ar {
        font-size: clamp(26px, 8vw, 34px);
        line-height: 1.8;
    }
    .quran-header-title-sw {
        font-size: 18px;
    }
    .quran-header-meaning {
        font-size: 13px;
    }
    .quran-header-badge-row {
        gap: 6px;
        margin-bottom: 12px;
    }
    .quran-header-pill {
        padding: 3px 9px;
        font-size: 10px;
    }
}

.quran-bismillah-box {
    padding: 24px 20px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(224, 200, 104, 0.12) 0%, rgba(224, 200, 104, 0.03) 100%);
    border: 1.5px solid rgba(224, 200, 104, 0.35);
    text-align: center;
    margin-bottom: 24px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

.bismillah-badge {
    display: inline-block;
    padding: 3px 14px;
    border-radius: 9999px;
    background: rgba(224, 200, 104, 0.16);
    border: 1px solid rgba(224, 200, 104, 0.35);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.bismillah-ar {
    font-size: 30px;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 8px;
    line-height: 1.8;
    font-family: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif;
}

@media (max-width: 640px) {
    .bismillah-ar {
        font-size: 25px;
        line-height: 1.7;
    }
}

.bismillah-sw {
    font-size: 13.5px;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.6;
}

/* Controls Bar */
.quran-controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-radius: 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.control-group-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.font-size-buttons, .display-mode-buttons {
    display: inline-flex;
    background: var(--bg-surface-hover);
    border-radius: 10px;
    padding: 3px;
    border: 1px solid var(--border-subtle);
}

.control-btn, .display-mode-btn {
    padding: 5px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.display-mode-btn.active {
    background: var(--gold);
    color: #111;
    font-weight: 800;
}

.quran-play-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 10px;
    background: var(--gold-subtle);
    border: 1.5px solid rgba(224, 200, 104, 0.4);
    color: var(--gold);
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
}.quran-play-all-btn.is-playing {
    background: var(--gold);
    color: #111;
    border-color: var(--gold);
}


.audio-reciter-note {
    font-size: 11px;
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .quran-controls-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 12px 14px;
        gap: 12px;
        margin-bottom: 18px;
    }
    .quran-controls-bar .control-group {
        width: 100%;
        justify-content: space-between;
    }
    .quran-controls-bar .display-mode-buttons {
        flex: 1;
        display: flex;
    }
    .quran-controls-bar .display-mode-btn {
        flex: 1;
        text-align: center;
        padding: 6px 8px;
        font-size: 11.5px;
    }
    .quran-controls-bar .audio-controls-group {
        flex-direction: column;
        gap: 6px;
    }
    .quran-play-all-btn {
        width: 100%;
        justify-content: center;
        padding: 9px 16px;
    }
    .audio-reciter-note {
        text-align: center;
    }
}

/* Ayah Cards */
.quran-ayahs-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.quran-ayah-card {
    padding: 24px;
    border-radius: 16px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-subtle);
    transition: all 0.25s ease;
    position: relative;
}

@media (max-width: 640px) {
    .quran-ayah-card {
        padding: 16px 14px;
        border-radius: 14px;
    }
}

.quran-ayah-card.active-audio-ayah {
    border-color: var(--gold) !important;
    background: rgba(224, 200, 104, 0.08) !important;
    box-shadow: 0 0 24px rgba(224, 200, 104, 0.25) !important;
}

[data-theme="light"] .quran-ayah-card.active-audio-ayah {
    background: #ffffff !important;
    border-color: #0a3f66 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.12) !important;
}

.play-ayah-btn.is-active-track {
    background: var(--gold-gradient) !important;
    color: var(--btn-gold-text) !important;
    border-color: var(--gold) !important;
    transform: scale(1.08);
}

/* Floating Quran Audio Player */
.quran-floating-player {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(120%);
    width: calc(100% - 48px);
    max-width: 680px;
    z-index: 1050;
    background: rgba(15, 20, 24, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid var(--gold);
    border-radius: 20px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 24px rgba(224, 200, 104, 0.2);
    padding: 12px 18px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
    opacity: 0;
    pointer-events: none;
}

.quran-floating-player.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

[data-theme="light"] .quran-floating-player {
    background: rgba(255, 255, 255, 0.96);
    border-color: #0a3f66;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14), 0 0 20px rgba(15, 23, 42, 0.08);
}

.quran-floating-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.quran-floating-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 130px;
}

.quran-floating-wave {
    display: inline-flex;
    align-items: flex-end;
    gap: 2.5px;
    height: 18px;
}

.quran-floating-wave .qf-bar {
    width: 3px;
    height: 4px;
    background: var(--gold);
    border-radius: 2px;
    opacity: 0.6;
    transition: height 0.2s ease;
}

.quran-floating-player.is-audio-active .quran-floating-wave .qf-bar {
    opacity: 1;
}

.quran-floating-player.is-audio-active .quran-floating-wave .qf-1 {
    animation: eq-bounce 0.8s ease-in-out infinite alternate;
}
.quran-floating-player.is-audio-active .quran-floating-wave .qf-2 {
    animation: eq-bounce 1.1s ease-in-out 0.2s infinite alternate;
}
.quran-floating-player.is-audio-active .quran-floating-wave .qf-3 {
    animation: eq-bounce 0.7s ease-in-out 0.4s infinite alternate;
}
.quran-floating-player.is-audio-active .quran-floating-wave .qf-4 {
    animation: eq-bounce 1s ease-in-out 0.1s infinite alternate;
}

.quran-floating-details {
    display: flex;
    flex-direction: column;
}

.quran-floating-surah {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
}

.quran-floating-ayah {
    font-size: 11px;
    font-weight: 700;
    color: var(--gold);
    white-space: nowrap;
}

.quran-floating-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.quran-floating-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.qf-control-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 6px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.qf-play-pause-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--gold-gradient);
    border: none;
    color: #0f1418;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(224, 200, 104, 0.25);
    transition: all 0.2s ease;
}

.quran-floating-progress-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.qf-time {
    font-size: 10px;
    font-family: monospace, var(--font-body);
    font-weight: 700;
    color: var(--text-muted);
    min-width: 28px;
    text-align: center;
}

.qf-track-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    height: 14px;
}

.qf-track-bg {
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--border-color);
    border-radius: 999px;
    overflow: hidden;
}

.qf-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--gold-gradient);
    border-radius: 999px;
    transition: width 0.1s linear;
}

.qf-scrubber {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    margin: 0;
    z-index: 2;
}

.quran-floating-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qf-speed-btn {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 5px 9px;
    font-size: 11px;
    font-family: monospace, var(--font-body);
    font-weight: 800;
    color: var(--gold);
    cursor: pointer;
    transition: all 0.2s ease;
}

.qf-close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 6px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

@media (max-width: 768px) {
    .quran-floating-player {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 68px);
        width: calc(100% - 20px);
        padding: 10px 12px;
        border-radius: 16px;
    }

    .quran-floating-inner {
        gap: 8px;
    }

    .quran-floating-info {
        min-width: auto;
        gap: 6px;
        flex-shrink: 0;
    }

    .quran-floating-surah {
        display: none;
    }

    .quran-floating-ayah {
        font-size: 11.5px;
    }

    .quran-floating-center {
        min-width: 0;
        flex: 1;
    }

    .quran-floating-progress-row {
        gap: 6px;
        min-width: 0;
    }

    .qf-track-wrap {
        min-width: 30px;
        flex: 1;
    }

    .qf-play-pause-btn {
        width: 32px;
        height: 32px;
    }

    .qf-control-btn {
        padding: 4px;
    }

    .qf-speed-btn {
        padding: 4px 6px;
        font-size: 10px;
    }

    .qf-close-btn {
        padding: 4px;
    }
}

.ayah-card-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
}

@media (max-width: 640px) {
    .ayah-card-top-bar {
        margin-bottom: 12px;
        padding-bottom: 10px;
    }
    .ayah-number-badge {
        width: 28px;
        height: 28px;
    }
    .ayah-num-val {
        font-size: 12px;
    }
    .ayah-actions-bar {
        gap: 6px;
    }
    .ayah-action-btn {
        width: 30px;
        height: 30px;
        border-radius: 7px;
    }
}

.ayah-number-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gold-subtle);
    border: 1.5px solid rgba(224, 200, 104, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ayah-num-val {
    font-size: 13px;
    font-weight: 800;
    color: var(--gold);
}

.ayah-actions-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.ayah-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ayah-arabic-wrap {
    margin-bottom: 18px;
    padding: 10px 0;
}

.ayah-arabic-text {
    margin: 0;
    font-size: calc(28px * var(--font-scale, 1));
    line-height: 2.3;
    color: var(--text-primary);
    text-align: right;
    word-spacing: normal;
    font-family: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif;
}

@media (max-width: 640px) {
    .ayah-arabic-text {
        font-size: calc(24.5px * var(--font-scale, 1));
        line-height: 2.2;
    }
}

/* Ayah End Rosette (Medallion ya Kiarabu ya Mwisho wa Aya) */
.ayah-end-ornament {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    vertical-align: middle;
    margin: 0 6px 0 10px;
    width: 38px;
    height: 42px;
    flex-shrink: 0;
    user-select: none;
    line-height: 1;
}

.ayah-rosette-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.ayah-end-num {
    position: relative;
    z-index: 1;
    font-family: 'Amiri', 'Traditional Arabic', serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
    text-align: center;
    margin-top: 2px;
    display: block;
}

.quran-ayah-card.is-playing .ayah-rosette-svg path {
    filter: drop-shadow(0 0 6px var(--gold));
}

@media (max-width: 640px) {
    .ayah-end-ornament {
        width: 34px;
        height: 38px;
        margin: 0 4px 0 8px;
    }
    .ayah-end-num {
        font-size: 14.5px;
    }
}

.ayah-translation-wrap {
    padding-top: 14px;
    border-top: 1px dashed var(--border-subtle);
}

.ayah-translation-sw {
    margin: 0 0 10px;
    font-size: calc(16px * var(--font-scale, 1));
    line-height: 1.75;
    color: var(--text-secondary);
    letter-spacing: 0.15px;
}

@media (max-width: 640px) {
    .ayah-translation-sw {
        font-size: calc(15px * var(--font-scale, 1));
        line-height: 1.7;
    }
}

.dua-detail-card .arabic,
.dua-detail-card .arabic-text,
.dua-detail-card #text-ar {
    font-family: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif !important;
    font-size: calc(28px * var(--font-scale, 1)) !important;
    line-height: 2.25 !important;
    color: var(--arabic-text) !important;
    text-align: right !important;
    direction: rtl !important;
    letter-spacing: 0.2px;
    font-weight: 500;
    font-feature-settings: "cv01", "cv02", "calt", "liga";
}

.dua-detail-card .swahili-text {
    font-size: calc(17px * var(--font-scale, 1)) !important;
}

.ayah-translation-en {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-muted);
}

/* Modes */
.mode-ar-only .ayah-translation-wrap {
    display: none !important;
}

.mode-sw-only .ayah-arabic-wrap {
    display: none !important;
}

/* ==========================================================================
   Quran & Hadith Reader Top Navigation Bar
   ========================================================================== */
.quran-reader-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.reader-top-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 12px;
    margin-bottom: 16px;
    width: 100%;
}

.reader-top-nav .back-link {
    margin: 0 !important;
    flex-shrink: 0;
}

.reader-top-nav .reader-actions {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    max-width: none !important;
    width: auto !important;
    flex-shrink: 0;
}

.quran-nav-back,
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 9999px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    height: 38px;
    box-sizing: border-box;
}

.quran-surah-pager,
.reader-surah-jumper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-surface);
    padding: 4px;
    border-radius: 9999px;
    border: 1.5px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

@media (max-width: 640px) {
    .quran-reader-top-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .reader-top-nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 8px;
        width: 100% !important;
    }
    .reader-top-nav .reader-actions {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
    }
    .quran-nav-back,
    .back-link {
        align-self: auto;
        padding: 6px 14px;
        font-size: 12px;
        height: 36px;
    }
    .reader-more-toggle {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }
    .quran-surah-pager,
    .reader-surah-jumper {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 3px 4px;
    }
    .surah-pager-btn,
    .surah-jump-btn {
        padding: 5px 10px;
        font-size: 11.5px;
    }
    .surah-pager-current,
    .surah-jump-current {
        font-size: 12px;
        padding: 0 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .pager-btn-name {
        display: none;
    }
}

.surah-pager-btn,
.surah-jump-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 9999px;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.surah-pager-btn.is-disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
}

.surah-pager-current,
.surah-jump-current {
    font-size: 13px;
    font-weight: 800;
    color: var(--gold);
    padding: 0 10px;
    white-space: nowrap;
    text-align: center;
}

/* ==========================================================================
   Quran Reader Bottom Navigation Deck (Vitufe vya Next/Prev Sura)
   ========================================================================== */
.quran-bottom-nav,
.reader-bottom-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 36px;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .quran-bottom-nav,
    .reader-bottom-nav {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.quran-nav-card,
.reader-nav-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 16px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    text-decoration: none;
    color: inherit;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

@media (max-width: 640px) {
    .quran-nav-card,
    .reader-nav-card {
        padding: 14px 16px;
        gap: 12px;
        border-radius: 14px;
    }
}

.nav-prev {
    justify-content: flex-start;
}

.nav-next {
    justify-content: flex-end;
    text-align: right;
}

.nav-center {
    justify-content: center;
    text-align: center;
}

.nav-disabled {
    opacity: 0.45;
    pointer-events: none;
    background: var(--bg-surface-elevated);
}

.nav-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--gold-subtle);
    border: 1px solid rgba(224, 200, 104, 0.3);
    color: var(--gold);
    font-size: 16px;
    font-weight: 800;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.nav-card-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.nav-card-hint,
.nav-dir-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.nav-card-title,
.nav-surah-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.3;
}

.nav-card-arabic,
.nav-surah-ar {
    font-size: 16px;
    color: var(--gold);
    font-weight: 700;
    line-height: 1.2;
}

/* Light Theme Overrides for Navigation */
[data-theme="light"] .quran-reader-top-bar,
[data-theme="light"] .reader-top-nav,
[data-theme="light"] .quran-nav-back,
[data-theme="light"] .back-link,
[data-theme="light"] .quran-surah-pager,
[data-theme="light"] .reader-surah-jumper {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.3) !important;
}

[data-theme="light"] .surah-pager-btn,
[data-theme="light"] .surah-jump-btn {
    background: #fbf9f4 !important;
    border-color: rgba(15, 23, 42, 0.25) !important;
    color: #07293f !important;
}

[data-theme="light"] .surah-pager-current,
[data-theme="light"] .surah-jump-current {
    color: #0f172a !important;
}

[data-theme="light"] .quran-nav-card,
[data-theme="light"] .reader-nav-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.18) !important;
    box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .nav-card-icon {
    background: rgba(15, 23, 42, 0.08) !important;
    border-color: rgba(15, 23, 42, 0.2) !important;
    color: #0f172a !important;
}

[data-theme="light"] .nav-card-title,
[data-theme="light"] .nav-surah-name {
    color: #0f172a !important;
}

[data-theme="light"] .nav-card-arabic,
[data-theme="light"] .nav-surah-ar {
    color: #0f172a !important;
}

.nav-card-excerpt {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   MOBILE BOTTOM NAVIGATION BAR
   ========================================================================== */
@media (max-width: 768px) {
    /* Kurekebisha footer na mchezaji sauti kwenye simu */
    .site-footer {
        padding-bottom: calc(75px + env(safe-area-inset-bottom, 12px)) !important;
    }
}

/* ==========================================================================
   FONT SIZE SCALER WIDGET
   ========================================================================== */
.font-scaler-widget {
    display: inline-flex;
    align-items: center;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 3px 6px;
    gap: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.scaler-btn {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .2s ease;
}

.scaler-btn:active {
    transform: scale(0.92);
}

.scaler-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--gold);
    min-width: 38px;
    text-align: center;
    letter-spacing: -0.3px;
}

[data-theme="light"] .font-scaler-widget {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.3);
    box-shadow: 0 1px 4px rgba(3, 33, 44, 0.05);
}

[data-theme="light"] .scaler-btn {
    color: #07293f;
}

/* ==========================================================================
   UNIVERSAL BOOKMARKS TABS & GRIDS
   ========================================================================== */
.bookmarks-tabs-bar {
    display: flex;
    gap: 10px;
    margin: 20px 0 28px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.bookmark-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s ease;
}

.bookmark-tab .tab-svg {
    stroke: currentColor;
    transition: stroke .2s ease;
}

.bookmark-tab.active {
    background: var(--gold-subtle);
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 2px 10px rgba(224, 200, 104, 0.15);
}

.bookmark-tab-badge {
    display: inline-block;
    background: rgba(224, 200, 104, 0.2);
    color: var(--gold);
    font-size: 11px;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 999px;
    line-height: 1.4;
}

.bookmark-tab.active .bookmark-tab-badge {
    background: var(--gold);
    color: var(--btn-gold-text);
}

.bookmarks-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.bookmark-card-quran,
.bookmark-card-duaa {
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--card-shadow);
    transition: all .2s ease;
}

[data-theme="light"] .bookmark-tab {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.28);
    color: #56707a;
}

[data-theme="light"] .bookmark-tab.active {
    background: rgba(15, 23, 42, 0.08);
    border-color: #0a3f66;
    color: #0f172a;
}

[data-theme="light"] .bookmark-tab.active .bookmark-tab-badge {
    background: #0a3f66;
    color: #ffffff;
}

[data-theme="light"] .bookmark-card-quran,
[data-theme="light"] .bookmark-card-duaa {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.28);
    box-shadow: 0 4px 14px -2px rgba(3, 33, 44, 0.05);
}

/* ==========================================================================
   PWA INSTALL FLOATING POPUP (KAMILI NA YA KISASA)
   ========================================================================== */
.pwa-install-banner {
    position: fixed;
    bottom: 24px;
    left: 24px;
    top: auto;
    right: auto;
    inset: auto auto 24px 24px;
    z-index: 10005;
    display: block;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease, transform .3s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(20px);
}

.pwa-install-banner.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.pwa-banner-overlay {
    display: none !important;
}

.pwa-banner-card {
    position: relative;
    width: 350px;
    max-width: calc(100vw - 32px);
    background: var(--bg-surface-elevated, #131920);
    border: 1.5px solid rgba(224, 200, 104, 0.35);
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 24px rgba(224, 200, 104, 0.15);
    box-sizing: border-box;
}

.pwa-banner-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    cursor: pointer;
    transition: all .2s ease;
}

.pwa-banner-body {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
    padding-right: 32px;
}

.pwa-banner-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
}

.pwa-banner-content {
    flex: 1;
    min-width: 0;
}

.pwa-banner-content h3 {
    margin: 0 0 2px 0;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pwa-banner-desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-muted);
    white-space: normal;
}

.pwa-banner-actions {
    display: flex;
    gap: 8px;
}

.pwa-btn-primary {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    background: var(--gold-gradient);
    color: var(--btn-gold-text);
    font-size: 12.5px;
    font-weight: 800;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(224, 200, 104, 0.25);
    transition: transform .15s ease, filter .15s ease;
}

.pwa-btn-secondary {
    padding: 9px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    transition: all .15s ease;
}

.pwa-btn-full {
    width: 100%;
}

.pwa-ios-instructions {
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(224, 200, 104, 0.08);
    border: 1px dashed rgba(224, 200, 104, 0.35);
    border-radius: 12px;
}

.pwa-ios-hint {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
    margin: 0;
}

@media (max-width: 768px) {
    .pwa-install-banner {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        left: 14px;
        right: 14px;
        inset: auto 14px calc(76px + env(safe-area-inset-bottom, 0px)) 14px;
        display: flex;
        justify-content: center;
        width: calc(100vw - 28px);
        max-width: 100vw;
    }

    .pwa-banner-card {
        width: 100%;
        max-width: 390px;
        margin: 0 auto;
        padding: 12px 14px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65), 0 0 16px rgba(224, 200, 104, 0.2);
    }
}

/* Light Mode Overrides for PWA Popup */
[data-theme="light"] .pwa-banner-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.32);
    box-shadow: 0 16px 36px rgba(3, 33, 44, 0.12), 0 0 15px rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .pwa-banner-close {
    background: #fbf9f4;
    border-color: rgba(15, 23, 42, 0.25);
    color: #56707a;
}

[data-theme="light"] .pwa-btn-secondary {
    background: #fbf9f4;
    border-color: rgba(15, 23, 42, 0.28);
    color: #1e3a45;
}

[data-theme="light"] .pwa-ios-instructions {
    background: rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.28);
}

/* ==========================================================================
   HADITH EXPLANATION (SHARH), LESSONS & BRIEF SOURCE CARD
   ========================================================================== */
.hadith-audio-console {
    margin: 24px 0 28px;
    background: rgba(224, 200, 104, 0.04);
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.25s ease;
}

[data-theme="light"] .hadith-audio-console {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.28);
}

.explanation-box,
.lessons-box {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px 20px;
    margin-top: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.rich-explanation-box {
    background: rgba(224, 200, 104, 0.035);
    border: 1.5px solid rgba(224, 200, 104, 0.25);
    border-radius: 16px;
    padding: 22px 24px;
    margin-top: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.explanation-text,
.explanation-text-content {
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--text-primary);
    margin: 0;
}

.lessons-deck {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.lesson-card-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--bg-surface-elevated);
    border: 1.5px solid var(--border-subtle);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.lesson-num-badge {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--gold-subtle);
    border: 1.5px solid rgba(224, 200, 104, 0.45);
    color: var(--gold);
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.lesson-content {
    flex: 1;
    min-width: 0;
}

.lesson-content .lesson-text {
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-primary);
    margin: 0;
    font-weight: 500;
}

.lessons-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lesson-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-primary);
}

.lesson-bullet {
    color: var(--gold);
    font-size: 13px;
    line-height: 1.6;
    flex-shrink: 0;
}

/* Optional Translation Drawer */
.optional-translation-drawer {
    margin-top: 24px;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--bg-surface);
    overflow: hidden;
    transition: all 0.2s ease;
}

.optional-drawer-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    user-select: none;
    list-style: none;
}

.optional-drawer-toggle::-webkit-details-marker {
    display: none;
}

.drawer-toggle-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.drawer-toggle-arrow {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.optional-translation-drawer[open] .drawer-toggle-arrow {
    transform: rotate(180deg);
}

.optional-drawer-body {
    padding: 14px 18px 18px;
    border-top: 1px solid var(--border-subtle);
}

/* Brief Source & Grade Card */
.hadith-brief-source-card {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 18px;
    padding: 22px 24px;
    margin-top: 28px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.brief-source-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.brief-source-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--gold-subtle);
    border: 1px solid rgba(224, 200, 104, 0.35);
    color: var(--gold);
}

.brief-source-header h2 {
    font-size: 16.5px;
    font-weight: 800;
    margin: 0;
    color: var(--text-primary);
}

.brief-source-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 16px;
}

@media (max-width: 640px) {
    .hadith-brief-source-card {
        padding: 16px 14px;
        border-radius: 14px;
        margin-top: 20px;
    }
    .brief-source-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

.brief-source-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.brief-source-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: var(--gold);
    text-transform: uppercase;
}

.brief-source-value {
    font-size: 15.5px;
    font-weight: 800;
    color: var(--text-primary);
}

.brief-source-sub {
    font-size: 13px;
    color: var(--text-secondary);
}

.brief-source-link {
    font-size: 12.5px;
    color: var(--gold);
    text-decoration: underline;
    margin-top: 2px;
}

.brief-grade-badge-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0;
}

.brief-grade-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--gold-subtle);
    border: 1px solid var(--border-color);
    color: var(--gold);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.brief-source-footer {
    padding-top: 12px;
    border-top: 1px dashed var(--border-subtle);
    font-size: 12px;
    color: var(--text-muted);
}

.brief-source-footer a {
    color: var(--text-secondary);
    text-decoration: underline;
}

/* Light Theme Overrides */
[data-theme="light"] .rich-explanation-box {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.28);
    box-shadow: 0 4px 14px -2px rgba(3, 33, 44, 0.05);
}

[data-theme="light"] .explanation-text-content {
    color: #1e3a45;
}

[data-theme="light"] .lesson-card-item {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.25);
    box-shadow: 0 2px 8px rgba(3, 33, 44, 0.04);
}

[data-theme="light"] .lesson-content .lesson-text {
    color: #1e3a45;
}

[data-theme="light"] .optional-translation-drawer {
    background: #fbf9f4;
    border-color: rgba(15, 23, 42, 0.25);
}

[data-theme="light"] .hadith-brief-source-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.28);
    box-shadow: 0 4px 16px rgba(3, 33, 44, 0.05);
}

/* ==========================================================================
   MOBILE BOTTOM NAVIGATION BAR & BACK TO TOP BUTTON
   ========================================================================== */
.mobile-bottom-nav {
    display: none;
}

.back-to-top-btn {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-surface-elevated, #161b22);
    border: 1.5px solid var(--gold);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 980;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.85);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 12px rgba(224, 200, 104, 0.2);
    transition: opacity .25s ease, transform .25s cubic-bezier(0.16, 1, 0.3, 1), visibility .25s ease, background-color .2s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    -webkit-tap-highlight-color: transparent;
}

.back-to-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.back-to-top-btn:active {
    transform: translateY(0) scale(0.94);
}

@media (max-width: 768px) {
    body {
        padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    }

    .mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(62px + env(safe-area-inset-bottom, 0px));
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) 8px;
        background: rgba(3, 33, 44, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgba(224, 200, 104, 0.25);
        z-index: 990;
        justify-content: space-around;
        align-items: center;
        box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.55);
    }

    [data-theme="light"] .mobile-bottom-nav {
        background: rgba(255, 255, 255, 0.95);
        border-top-color: rgba(15, 23, 42, 0.12);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    }

    .mobile-nav-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        max-width: 72px;
        padding: 5px 2px;
        color: var(--text-muted);
        text-decoration: none;
        border-radius: 12px;
        transition: color .2s ease, transform .2s ease;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .mobile-nav-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 24px;
        transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1), filter .25s ease;
    }

    .mobile-nav-label {
        font-size: 11px;
        font-weight: 500;
        line-height: 1.2;
        margin-top: 3px;
        letter-spacing: 0.2px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 100%;
        text-align: center;
        transition: color .2s ease, font-weight .2s ease;
    }.mobile-nav-item:active {
        color: var(--gold);
    }


    .mobile-nav-item:active .mobile-nav-icon {
        transform: scale(0.9);
    }

    .mobile-nav-item.active {
        color: var(--gold);
    }

    .mobile-nav-item.active .mobile-nav-label {
        font-weight: 700;
        color: var(--gold);
    }

    .mobile-nav-item.active .mobile-nav-icon {
        transform: translateY(-2px) scale(1.06);
        filter: drop-shadow(0 2px 8px rgba(224, 200, 104, 0.35));
    }

    .mobile-nav-item.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--gold);
        box-shadow: 0 2px 8px rgba(224, 200, 104, 0.4);
    }

    @media (max-width: 390px) {
        .mobile-bottom-nav {
            padding-left: 2px;
            padding-right: 2px;
        }
        .mobile-nav-item {
            max-width: 58px;
            padding: 4px 1px;
        }
        .mobile-nav-label {
            font-size: 9.5px;
            letter-spacing: -0.1px;
        }
        .mobile-nav-icon svg {
            width: 20px;
            height: 20px;
        }
    }

    .back-to-top-btn {
        right: 16px;
        bottom: calc(74px + env(safe-area-inset-bottom, 0px));
        width: 42px;
        height: 42px;
    }
}

/* ==========================================================================
   Modern Share Sheet & Card Generator Modal
   ========================================================================== */
.share-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.share-modal-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.share-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.share-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 25px rgba(224, 200, 104, 0.15);
    padding: 24px;
    z-index: 1;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.share-modal-backdrop.is-open .share-modal-dialog {
    transform: scale(1) translateY(0);
}

.share-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.share-modal-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--gold);
    text-transform: uppercase;
}

.share-modal-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 4px 0 0 0;
}

.share-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.share-preview-card {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    max-height: 240px;
    overflow-y: auto;
}

.share-preview-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    color: var(--gold);
    background: var(--gold-subtle);
    border: 1px solid rgba(224, 200, 104, 0.25);
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.share-preview-ar {
    font-size: 20px;
    line-height: 2;
    color: var(--gold);
    margin-bottom: 12px;
    text-align: right;
    font-family: 'Amiri', serif;
}

.share-preview-sw {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.share-preview-ref {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.share-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (max-width: 480px) {
    .share-actions-grid {
        grid-template-columns: 1fr;
    }
}

.share-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1.5px solid transparent;
}

.btn-whatsapp {
    background: #128c7e;
    color: #ffffff;
}

.btn-image {
    background: linear-gradient(135deg, #ffffff, #cbd5e1);
    color: #07293f;
    font-weight: 800;
}

.btn-copy {
    background: var(--bg-surface-elevated);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.btn-native {
    background: var(--bg-surface-elevated);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* Light Theme Overrides */
[data-theme="light"] .share-modal-dialog {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.35) !important;
    box-shadow: 0 20px 50px rgba(3, 33, 44, 0.16) !important;
}

[data-theme="light"] .share-preview-card {
    background: #fbf9f4 !important;
    border-color: rgba(15, 23, 42, 0.25) !important;
}

[data-theme="light"] .share-preview-ar {
    color: #0f172a !important;
}

[data-theme="light"] .share-preview-sw {
    color: #0f172a !important;
}

[data-theme="light"] .btn-copy,
[data-theme="light"] .btn-native {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.2) !important;
    color: #0f172a !important;
}


/* ==========================================================================
   ISLAMIC TOPICS & THEMATIC HADITHS (MADA ZA KIISLAMU)
   ========================================================================== */
.topics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 16px;
}

.topic-box-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px;
    background: linear-gradient(135deg, #052936 0%, #083443 60%, #02202b 100%);
    border: 1.5px solid var(--border-color);
    border-radius: 18px;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    font-family: inherit;
    position: relative;
    overflow: hidden;
}

[data-theme="light"] .topic-box-card {
    background: #ffffff;
    border-color: rgba(10, 63, 102, 0.12);
    box-shadow: 0 4px 16px -2px rgba(10, 63, 102, 0.06);
}

.topic-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 8px;
}

.topic-emblem {
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid;
    display: inline-flex;
    align-items: center;
}

.topic-badge-pill {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.topic-arabic-tag {
    font-family: var(--font-arabic, 'Amiri', serif);
    font-size: 15px;
    color: var(--gold);
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topic-card-body {
    flex: 1;
    margin-bottom: 16px;
}

.topic-card-title {
    font-family: var(--font-display, inherit);
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 4px;
    letter-spacing: -0.2px;
}

.topic-card-sub {
    font-size: 12px;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 8px;
}

.topic-card-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

.topic-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
    font-size: 12.5px;
    font-weight: 700;
}

.topic-chevron {
    color: var(--gold);
    font-size: 15px;
    transition: transform 0.2s ease;
}

/* Topic Active Banner */
.topic-active-banner {
    padding: 28px 24px;
    background: linear-gradient(135deg, #052936 0%, #083443 60%, #02202b 100%);
    border: 1.5px solid var(--border-color);
    border-radius: 20px;
    box-shadow: var(--card-shadow);
}

[data-theme="light"] .topic-active-banner {
    background: #ffffff;
    border-color: rgba(10, 63, 102, 0.12);
    box-shadow: 0 8px 24px -4px rgba(10, 63, 102, 0.08);
}

.topic-banner-top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.topic-banner-ar {
    font-family: var(--font-arabic, 'Amiri', serif);
    font-size: 24px;
    color: var(--gold);
    display: block;
    margin-bottom: 6px;
}

.topic-banner-title {
    font-family: var(--font-display, inherit);
    font-size: 26px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.topic-banner-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 720px;
    margin: 0;
}

@media (max-width: 640px) {
    .topics-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .topic-active-banner {
        padding: 20px 16px;
    }
    .topic-banner-title {
        font-size: 21px;
    }
    .topic-banner-ar {
        font-size: 20px;
    }
}

/* ==========================================================================
   MTINDO A: AL-RAWDAH ROYAL ARCHES & THE GOLDEN BOOKSHELF
   ========================================================================== */

.rawdah-layout-container {
    margin-bottom: 32px;
}

/* 1. Hero Mehrab Spotlight Card */
.rawdah-mehrab-hero {
    border-radius: 36px 36px 22px 22px;
    background: linear-gradient(160deg, rgba(5, 41, 54, 0.98) 0%, rgba(10, 63, 102, 0.98) 60%, rgba(3, 26, 35, 1) 100%);
    border: 1.5px solid var(--border-color);
    padding: 32px 36px;
    box-shadow: 0 12px 36px -8px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--border-color);
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
}

[data-theme="light"] .rawdah-mehrab-hero {
    background: linear-gradient(160deg, #ffffff 0%, #edf5f7 100%);
    border-color: rgba(10, 63, 102, 0.12);
    box-shadow: 0 8px 30px -6px rgba(10, 63, 102, 0.08), 0 0 0 1px rgba(10, 63, 102, 0.08);
}

.rawdah-arch-watermark {
    position: absolute;
    top: -20px;
    right: 40px;
    opacity: 0.05;
    color: var(--gold);
    pointer-events: none;
}

.rawdah-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.rawdah-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--gold);
    background: var(--gold-subtle);
    border: 1px solid var(--border-color);
}

.rawdah-hero-ref {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-muted);
}

.rawdah-arabic-box {
    margin: 12px 0 18px;
    text-align: right;
}

.rawdah-arabic-text {
    font-family: var(--font-arabic, 'Amiri', serif);
    font-size: 26px;
    line-height: 2.2;
    font-weight: 700;
    color: var(--arabic-text);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    display: block;
}

[data-theme="light"] .rawdah-arabic-text {
    color: var(--text-primary);
    text-shadow: none;
}

.rawdah-swahili-box {
    margin-bottom: 24px;
    max-width: 820px;
}

.rawdah-swahili-text {
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-secondary);
    margin: 0;
    font-style: italic;
}

.rawdah-hero-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding-top: 18px;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.rawdah-hero-ref-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--gold-subtle);
    border: 1px solid var(--border-color);
    color: var(--gold);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

[data-theme="light"] .rawdah-hero-ref-pill {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
}

.rawdah-topic-star {
    color: var(--gold);
    font-size: 11px;
}

[data-theme="light"] .rawdah-topic-star {
    color: #64748b;
}

/* Hadith Reader Audio Bar */
.hadith-reader-audio-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 18px;
    margin-bottom: 24px;
    box-shadow: var(--card-shadow);
    flex-wrap: wrap;
}

.reader-audio-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.reader-audio-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text-primary);
}

.reader-audio-sub {
    font-size: 11.5px;
    color: var(--text-muted);
}

.rawdah-hero-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rawdah-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 12px;
    background: var(--gold-gradient);
    color: var(--btn-gold-text);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(224, 200, 104, 0.28);
    transition: transform 0.2s ease;
}

[data-theme="light"] .rawdah-btn-primary {
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
}

.rawdah-btn-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* 2. Thematic Topics Quick Row */
.rawdah-topics-row {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 28px;
    scrollbar-width: thin;
}

.rawdah-topics-label {
    font-size: 12px;
    font-weight: 800;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    margin-right: 4px;
}

.rawdah-topic-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border-radius: 999px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.rawdah-topic-all-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    border-radius: 999px;
    background: var(--gold-subtle);
    border: 1px solid var(--border-color);
    color: var(--gold);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

/* 3. The Gilded Bookshelf: Collections */
.gilded-bookshelf-section {
    margin-bottom: 32px;
}

.bookshelf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 12px;
}

.bookshelf-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bookshelf-title {
    font-family: var(--font-display, inherit);
    font-size: 22px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0;
}

.bookshelf-badge-pill {
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--gold-subtle);
    border: 1px solid var(--border-color);
    color: var(--gold);
    font-size: 11.5px;
    font-weight: 800;
}

.gilded-bookshelf-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Rawdah Arches & Shelf Book Card - Fast, Lightweight, 60fps */
.rawdah-book-card,
.gilded-book-card {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 18px;
    padding: 22px 20px;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
    width: 100%;
    position: relative;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
    contain: layout style paint;
}

[data-theme="light"] .rawdah-book-card,
[data-theme="light"] .gilded-book-card {
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(6, 47, 34, 0.05);
}

.rawdah-book-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    width: 100%;
}

.rawdah-book-card.has-custom-cover {
    display: flex;
    flex-direction: row;
    gap: 18px;
    align-items: stretch;
}

.rawdah-book-cover-wrap {
    flex-shrink: 0;
    width: 96px;
    aspect-ratio: 0.65;
    border-radius: 9px;
    overflow: hidden;
    position: relative;
    box-shadow: -2px 0 6px rgba(0, 0, 0, 0.4) inset, 4px 6px 18px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(224, 200, 104, 0.18);
    background: #0b1219;
    display: flex;
    align-self: flex-start;
}

[data-theme="light"] .rawdah-book-cover-wrap {
    background: #0a3f66;
    border-color: rgba(15, 23, 42, 0.15);
    box-shadow: 2px 4px 14px rgba(15, 23, 42, 0.15);
}

.rawdah-book-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    border-radius: 8px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.inside-book-banner.has-book-cover {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.inside-book-cover-thumb {
    flex-shrink: 0;
    width: 96px;
    border-radius: 9px;
    overflow: hidden;
    position: relative;
    box-shadow: 4px 8px 22px rgba(0, 0, 0, 0.45);
    border: 1.5px solid rgba(224, 200, 104, 0.22);
}

.inside-book-thumb-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

@media (max-width: 640px) {
    .rawdah-book-card.has-custom-cover {
        gap: 14px;
    }
    .rawdah-book-cover-wrap {
        width: 80px;
    }
    .inside-book-banner.has-book-cover {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

.bookshelf-badge-pill,
.rawdah-book-top,
.rawdah-book-badge,
.rawdah-book-emblem {
    display: none !important;
}

.rawdah-book-badge,
.book-category-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 10px;
    background: var(--gold-subtle);
    border: 1px solid var(--border-color);
    color: var(--gold);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.rawdah-book-emblem,
.book-letter-emblem {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--gold-subtle);
    border: 1px solid var(--border-color);
    color: var(--gold);
    font-size: 12.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.rawdah-book-body,
.gilded-book-middle {
    margin-bottom: 14px;
}

.rawdah-book-title,
.gilded-book-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 4px;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.rawdah-book-ar,
.gilded-book-ar {
    font-family: var(--font-arabic, 'Amiri', serif);
    font-size: 17px;
    font-weight: 700;
    color: var(--gold-light);
    display: block;
    margin-bottom: 6px;
    line-height: 1.4;
    text-align: right;
}

.rawdah-book-author,
.gilded-book-author {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rawdah-book-footer,
.gilded-book-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
    font-size: 11.5px;
}

.book-total-hadiths {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--gold-subtle);
    border: 1px solid var(--border-color);
    color: var(--gold);
    font-weight: 800;
    font-size: 11px;
}

.rawdah-book-action,
.book-action-read {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 800;
    color: var(--gold);
    font-size: 12px;
}

.rawdah-arrow,
.book-action-arrow {
    transition: transform 0.2s ease;
}

/* Responsive Breakpoints */
@media (max-width: 992px) {
    .gilded-bookshelf-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .rawdah-mehrab-hero {
        padding: 22px 18px;
        border-radius: 28px 28px 18px 18px;
    }
    .rawdah-arabic-text {
        font-size: 20px;
        line-height: 2;
    }
    .rawdah-swahili-text {
        font-size: 13.5px;
    }
    .rawdah-hero-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .rawdah-hero-buttons {
        justify-content: flex-end;
    }
    .gilded-bookshelf-grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   Bayt Ul Hadith Splash Screen & Preloader
   -------------------------------------------------------------------------- */
.bayt-splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 9999999;
    background: radial-gradient(circle at 50% 45%, #062b3a 0%, #07293f 55%, #010c12 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.65s ease;
    pointer-events: all;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
}

[data-theme="light"] .bayt-splash-screen {
    background: radial-gradient(circle at 50% 45%, #ffffff 0%, #f1f5f9 60%, #e2e8f0 100%);
}

.bayt-splash-screen.bayt-splash-hide {
    opacity: 0;
    pointer-events: none;
    transform: scale(1.04);
    filter: blur(10px);
}

.bayt-splash-glow {
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 200, 104, 0.14) 0%, rgba(56, 189, 248, 0.05) 50%, transparent 70%);
    filter: blur(35px);
    pointer-events: none;
    animation: splashGlowPulse 3s infinite alternate ease-in-out;
}

[data-theme="light"] .bayt-splash-glow {
    background: radial-gradient(circle, rgba(15, 23, 42, 0.08) 0%, rgba(2, 132, 199, 0.04) 50%, transparent 70%);
}

@keyframes splashGlowPulse {
    0% { transform: scale(0.9); opacity: 0.6; }
    100% { transform: scale(1.15); opacity: 1; }
}

.bayt-splash-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px;
}

.bayt-splash-logo-wrap {
    position: relative;
    width: 154px;
    height: 178px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: splashLogoFloat 3s infinite ease-in-out;
}

@keyframes splashLogoFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.02); }
}

.bayt-splash-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 26px rgba(224, 200, 104, 0.32));
    display: block;
}

[data-theme="light"] .bayt-splash-logo {
    filter: drop-shadow(0 6px 18px rgba(15, 23, 42, 0.2));
}

.bayt-splash-title {
    font-family: 'Cinzel', serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 3.5px;
    color: #ffffff;
    margin-bottom: 6px;
    text-transform: uppercase;
    text-shadow: 0 2px 14px rgba(255, 255, 255, 0.2);
}

[data-theme="light"] .bayt-splash-title {
    color: #0f172a;
    text-shadow: none;
}

.bayt-splash-title span {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 50%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="light"] .bayt-splash-title span {
    background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bayt-splash-sub {
    font-size: 12.5px;
    color: #8295a0;
    margin-bottom: 28px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

[data-theme="light"] .bayt-splash-sub {
    color: #64748b;
}

.bayt-splash-spinner-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
}

.bayt-splash-spinner {
    position: relative;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bayt-spinner-svg {
    width: 100%;
    height: 100%;
    animation: baytSpinRotate 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.bayt-spinner-track {
    stroke: rgba(255, 255, 255, 0.12);
}

[data-theme="light"] .bayt-spinner-track {
    stroke: rgba(15, 23, 42, 0.12);
}

.bayt-spinner-head {
    stroke: #ffffff;
    stroke-dasharray: 85, 120;
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.85));
    animation: baytSpinDash 1.6s ease-in-out infinite;
}

[data-theme="light"] .bayt-spinner-head {
    stroke: #0f172a;
    filter: drop-shadow(0 0 5px rgba(15, 23, 42, 0.4));
}

.bayt-spinner-core {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
    animation: baytCorePulse 1.6s ease-in-out infinite;
}

[data-theme="light"] .bayt-spinner-core {
    background: #0a3f66;
    box-shadow: 0 0 8px rgba(15, 23, 42, 0.4);
}

@keyframes baytSpinRotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes baytSpinDash {
    0% {
        stroke-dasharray: 1, 120;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 85, 120;
        stroke-dashoffset: -25;
    }
    100% {
        stroke-dasharray: 85, 120;
        stroke-dashoffset: -115;
    }
}

@keyframes baytCorePulse {
    0%, 100% {
        opacity: 0.35;
        transform: scale(0.85);
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}

.bayt-splash-caption {
    font-size: 11px;
    color: #94a3b8;
    letter-spacing: 2px;
    font-weight: 600;
    text-transform: uppercase;
}

[data-theme="light"] .bayt-splash-caption {
    color: #64748b;
}

.bayt-splash-dots {
    display: inline-block;
    animation: baytSplashDots 1.4s infinite ease-in-out;
}

@keyframes baytSplashDots {
    0%, 20% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}

/* ==========================================================================
   IMPORTANT LINKS PAGES: QIBLA, ISLAMIC DATE, RAMADHAN
   ========================================================================== */
.qibla-shell,
.islamic-date-shell,
.ramadhan-shell {
    max-width: 900px;
    margin: 32px auto 80px;
    padding: 0 20px;
}

/* Qibla Styles */
.qibla-header,
.date-header,
.ramadhan-header {
    text-align: center;
    margin-bottom: 36px;
}

.qibla-badge,
.date-pill,
.ramadhan-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.qibla-dot,
.date-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 8px #38bdf8;
}

.qibla-title,
.date-title,
.ramadhan-title {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.qibla-subtitle,
.date-subtitle,
.ramadhan-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Modern Precision Qibla Instrument */
.qibla-header-clean {
    text-align: center;
    margin-bottom: 24px;
}
.qibla-title-clean {
    font-family: 'Cinzel', serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-primary);
    margin-bottom: 6px;
    text-transform: uppercase;
}
.qibla-subtitle-clean {
    font-size: 13px;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

.qibla-instrument-card {
    background: radial-gradient(circle at 50% 30%, rgba(10, 41, 56, 0.7) 0%, rgba(10, 53, 82, 0.95) 100%);
    border: 1px solid var(--border-color);
    border-radius: 28px;
    padding: 36px 24px;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    backdrop-filter: blur(12px);
    margin-bottom: 36px;
}

.compass-viewport {
    width: 290px;
    height: 290px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
}

.compass-lubber {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.4));
}

.compass-dial-stage {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 50%;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(0, 0, 0, 0.8);
    transition: transform 0.25s cubic-bezier(0.15, 0.9, 0.3, 1);
}

.compass-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.compass-center-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 124px;
    height: 124px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(7, 41, 63, 0.92) 0%, rgba(1, 15, 22, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.hub-angle {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
    letter-spacing: -0.5px;
    display: flex;
    align-items: baseline;
}
.hub-unit {
    font-size: 20px;
    color: var(--text-secondary);
    margin-left: 1px;
}
.hub-target {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #f5c75d;
}
.hub-target-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f5c75d;
    box-shadow: 0 0 6px #f5c75d;
}

.qibla-metrics-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: rgba(7, 41, 63, 0.65);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 14px 20px;
    margin-bottom: 20px;
}
.metric-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
}
.m-label {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    text-transform: uppercase;
}
.m-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}
.metric-sep {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.08);
}

.qibla-minimal-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.5;
    text-align: center;
    padding: 0 10px;
}
.hint-bullet {
    color: #f5c75d;
    font-size: 12px;
}

.sensor-action-wrap {
    margin-top: 16px;
}
.btn-sensor-activate {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (max-width: 400px) {
    .compass-viewport {
        width: 250px;
        height: 250px;
    }
    .compass-center-hub {
        width: 108px;
        height: 108px;
    }
    .hub-angle {
        font-size: 26px;
    }
    .qibla-instrument-card {
        padding: 24px 16px;
    }
    .qibla-metrics-strip {
        padding: 12px 14px;
    }
    .m-val {
        font-size: 13px;
    }
}

/* Islamic Date Styles */
.today-hijri-card {
    text-align: center;
    padding: 44px 24px;
    background: radial-gradient(circle at 50% 25%, rgba(255, 255, 255, 0.04) 0%, var(--bg-surface) 75%);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.hijri-date-arabic {
    font-family: 'Amiri', 'Traditional Arabic', serif;
    font-size: 38px;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0;
    text-shadow: none;
}

.hijri-date-swahili {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    margin: 0;
}

.gregorian-comparison {
    font-size: 13.5px;
    color: var(--text-muted);
    margin-top: 4px;
}

.islamic-months-section,
.ramadhan-duas-section,
.ramadhan-hadiths-section {
    margin-top: 48px;
}

.section-heading,
.section-title {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    margin-bottom: 22px;
}

.months-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
}

.month-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.month-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 24px;
}

.month-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
}

.month-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.12);
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.month-card.sacred {
    border-color: rgba(255, 255, 255, 0.18);
}

.month-card.sacred .month-tag {
    background: rgba(224, 200, 104, 0.12);
    color: var(--text-primary);
    border-color: rgba(224, 200, 104, 0.24);
}

.month-card.highlight {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.3);
}

.month-card.highlight .highlight-tag {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.35);
    font-weight: 700;
}

.month-card-content {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.month-sw {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.2px;
}

.month-ar {
    font-family: 'Amiri', 'Traditional Arabic', serif;
    font-size: 18px;
    color: #94a3b8;
    line-height: 1;
}

/* Ramadhan Countdown Card */
.ramadhan-countdown-card {
    background: radial-gradient(circle at 50% 20%, rgba(56, 189, 248, 0.08) 0%, var(--bg-surface) 75%);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 36px 28px;
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-bottom: 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ramadhan-countdown-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}

.countdown-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 580px;
    gap: 16px;
    flex-wrap: wrap;
}

.countdown-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.countdown-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 10px #38bdf8;
    animation: countdownPulse 1.8s infinite ease-in-out;
}

@keyframes countdownPulse {
    0%, 100% { transform: scale(0.9); opacity: 0.6; }
    50% { transform: scale(1.3); opacity: 1; }
}

.countdown-target-date {
    font-size: 12px;
    color: var(--text-muted);
}

.countdown-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    max-width: 600px;
}

.countdown-box {
    flex: 1;
    min-width: 80px;
    max-width: 120px;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 18px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.countdown-num {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
    text-shadow: none;
}

.countdown-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.countdown-colon {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-muted);
    opacity: 0.7;
    margin-top: -16px;
}

.countdown-caption {
    font-size: 12px;
    color: var(--text-dim);
    max-width: 480px;
    margin: 0;
    line-height: 1.5;
}

/* Ramadhan Duas & Hadiths */
.duas-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.dua-ramadhan-card,
.hadith-feature-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dua-type,
.hadith-tag {
    font-size: 11px;
    font-weight: 700;
    color: #38bdf8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.dua-ar,
.hadith-quote-ar {
    font-size: 20px;
    line-height: 1.8;
    color: var(--text-primary);
}
.dua-translit { font-size: 12px; font-style: italic; color: var(--text-muted); }
.dua-sw,
.hadith-quote-sw { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.dua-ref,
.hadith-meta { font-size: 11px; color: var(--text-dim); }

@media (max-width: 640px) {
    .qibla-stats-grid { grid-template-columns: 1fr; }
    .qibla-title, .date-title, .ramadhan-title { font-size: 24px; }
    .months-grid { grid-template-columns: 1fr; }
    .countdown-header-row { justify-content: center; }
    .countdown-grid { gap: 6px; }
    .countdown-box { min-width: 62px; padding: 12px 6px; }
    .countdown-num { font-size: 26px; }
    .countdown-label { font-size: 9px; letter-spacing: 0.8px; }
    .countdown-colon { font-size: 20px; margin-top: -12px; }
}

/* Screen Reader Only Utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Live Prayer Time Counter */
.prayer-container {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding-bottom: 60px;
}

.prayer-header {
    text-align: center;
    margin-bottom: 32px;
}

.prayer-location-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.prayer-title {
    font-family: 'Cinzel', serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.prayer-subtitle {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 540px;
    margin: 0 auto;
}

/* Prayer Hero Card */
.prayer-hero-card {
    background: radial-gradient(circle at 50% 25%, rgba(10, 41, 56, 0.8) 0%, rgba(10, 53, 82, 0.98) 100%);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 32px 28px;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px;
    position: relative;
    backdrop-filter: blur(12px);
}

.prayer-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 16px;
}

.prayer-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: rgba(245, 199, 93, 0.1);
    border: 1px solid rgba(245, 199, 93, 0.35);
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #f5c75d;
    text-transform: uppercase;
}

.pulse-indicator-live {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f5c75d;
    box-shadow: 0 0 8px #f5c75d;
    animation: livePulse 2s infinite ease-in-out;
}

.prayer-live-clock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: monospace, system-ui;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: 10px;
    letter-spacing: 1px;
}
.clock-icon {
    font-size: 13px;
    opacity: 0.8;
}

.prayer-target-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.prayer-target-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.prayer-target-name {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    margin: 0;
}

.prayer-target-arabic {
    font-family: 'Amiri', serif;
    font-size: 22px;
    color: #f5c75d;
    line-height: 1.2;
}

.prayer-target-time {
    font-family: 'Cinzel', serif;
    font-size: 44px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 1px;
    line-height: 1;
    text-shadow: none;
}

.prayer-countdown-wrap {
    background: rgba(7, 41, 63, 0.7);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.countdown-heading-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.prayer-countdown-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

.p-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    min-width: 72px;
    padding: 12px 10px;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.35);
}

.p-num {
    font-family: 'Cinzel', serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
}

.p-lbl {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 4px;
}

.p-sep {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-muted);
    opacity: 0.6;
    margin-top: -12px;
}

/* Prayer Schedule Table */
.prayer-schedule-wrap {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--card-shadow);
    margin-bottom: 24px;
}

.prayer-schedule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 14px;
    margin-bottom: 16px;
}

.schedule-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    margin: 0;
}

.schedule-date {
    font-size: 12px;
    color: var(--text-secondary);
}

.prayer-schedule-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.prayer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    transition: all 0.25s ease;
}

.prayer-row.is-next {
    background: radial-gradient(circle at 10% 50%, rgba(245, 199, 93, 0.1) 0%, var(--bg-surface-elevated) 100%);
    border-color: rgba(245, 199, 93, 0.5);
    box-shadow: 0 0 20px rgba(245, 199, 93, 0.12), inset 0 0 12px rgba(245, 199, 93, 0.05);
}

.prayer-row.is-passed {
    opacity: 0.65;
}

.prayer-row-astro {
    background: rgba(7, 41, 63, 0.25);
    border-style: dashed;
}

.p-col-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 130px;
}

.p-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.prayer-row.is-next .p-icon-wrap {
    color: #f5c75d;
    border-color: rgba(245, 199, 93, 0.4);
    background: rgba(245, 199, 93, 0.1);
}

.p-names {
    display: flex;
    flex-direction: column;
}

.p-main-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.p-sub-name {
    font-size: 11px;
    color: var(--text-muted);
}

.p-col-center {
    flex: 1;
    text-align: center;
}

.p-arabic {
    font-family: 'Amiri', serif;
    font-size: 20px;
    color: var(--text-secondary);
}

.prayer-row.is-next .p-arabic {
    color: #f5c75d;
}

.p-col-right {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: flex-end;
}

.p-time {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.5px;
}

.p-pill {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    text-transform: uppercase;
}

.p-pill-next {
    background: rgba(245, 199, 93, 0.15);
    color: #f5c75d;
    border: 1px solid rgba(245, 199, 93, 0.4);
}

.p-pill-passed {
    background: rgba(148, 163, 184, 0.08);
    color: #64748b;
}

.p-pill-astro {
    background: rgba(56, 189, 248, 0.1);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.25);
}

/* Info Note */
.prayer-info-note {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(7, 41, 63, 0.65);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 14px 18px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.prayer-info-note .info-icon {
    color: #f5c75d;
    font-size: 13px;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .prayer-title {
        font-size: 24px;
    }
    .prayer-target-time {
        font-size: 34px;
    }
    .prayer-countdown-grid {
        gap: 6px;
    }
    .p-box {
        min-width: 60px;
        padding: 10px 6px;
    }
    .p-num {
        font-size: 24px;
    }
    .p-lbl {
        font-size: 9px;
    }
    .p-sep {
        font-size: 18px;
        margin-top: -8px;
    }
    .p-time {
        font-size: 15px;
    }
    .p-arabic {
        display: none;
    }
    .p-col-left {
        min-width: 100px;
    }
    .prayer-row {
        padding: 12px 14px;
    }
}

/* =========================================================================
   UI refresh: Nyakati za Swala, Tarehe ya Kiislamu, Ramadhani
   Mpangilio mnene zaidi, safu mbili kwenye desktop, vitufe vya kuguswa 44px
   ========================================================================= */

/* ---- Nyakati za swala ---- */
.prayer-container { max-width: 1040px; padding-bottom: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.prayer-container .prayer-header { grid-column: 1 / -1; margin-bottom: 0; }
.prayer-container .prayer-hero-card { margin-bottom: 0; padding: 22px 22px; gap: 16px; }
.prayer-container .prayer-schedule-wrap { margin-bottom: 0; padding: 16px 18px; }
.prayer-container .prayer-title { font-size: 26px; margin-bottom: 6px; }
.prayer-container .prayer-subtitle { font-size: 13px; }
.prayer-container .prayer-location-pill { margin-bottom: 10px; }
.prayer-container .prayer-countdown-wrap { padding: 14px 16px; }
.prayer-container .prayer-hero-top { padding-bottom: 12px; }
.prayer-container .prayer-schedule-header { padding-bottom: 10px; margin-bottom: 10px; }
.prayer-container .prayer-schedule-list { gap: 6px; }
.prayer-container .prayer-row { padding: 9px 14px; min-height: 48px; }
.prayer-container .prayer-info-note { grid-column: 1 / -1; }

@media (max-width: 860px) {
    .prayer-container { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 480px) {
    .prayer-container .prayer-subtitle { display: none; }
    .prayer-container .prayer-header { margin-bottom: -2px; }
    .prayer-container .prayer-title { font-size: 20px; margin-bottom: 0; }
    .prayer-container .prayer-hero-card { padding: 14px 14px; gap: 10px; border-radius: 18px; }
    .prayer-container .prayer-hero-top { padding-bottom: 8px; }
    .prayer-container .prayer-target-name { font-size: 22px; }
    .prayer-container .prayer-target-arabic { font-size: 18px; }
    .prayer-container .prayer-target-time { font-size: 30px; }
    .prayer-container .prayer-countdown-wrap { padding: 10px 10px; gap: 8px; }
    .prayer-container .p-box { padding: 6px 4px; min-width: 56px; }
    .prayer-container .p-num { font-size: 22px; }
    .prayer-container .prayer-schedule-wrap { padding: 12px 12px; border-radius: 16px; }
    .prayer-container .prayer-schedule-list { gap: 4px; }
    .prayer-container .prayer-row { padding: 6px 12px; min-height: 44px; border-radius: 12px; }
    .prayer-container .p-icon-wrap { transform: scale(0.85); }
}

/* ---- Tarehe ya Kiislamu ---- */
.date-container .date-header { margin-bottom: 16px; }
.date-container .date-title { font-size: 26px; margin-bottom: 6px; }
.date-container .date-subtitle { font-size: 13px; }
.date-container .islamic-months-section { margin-top: 22px; }
.date-container .section-heading { font-size: 17px; margin-bottom: 12px; }
.date-container .months-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.date-container .month-card { padding: 10px 12px; gap: 6px; border-radius: 12px; }
.date-container .month-card-top { min-height: 20px; }
.date-container .month-num { width: 20px; height: 20px; font-size: 10px; }
.date-container .month-tag { font-size: 9px; padding: 2px 6px; }
.date-container .month-card-content { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.date-container .month-sw { font-size: 13px; line-height: 1.25; }
.date-container .month-ar { font-size: 16px; }
.date-container .month-card.sacred { border-color: rgba(245, 199, 93, 0.45); }

@media (max-width: 860px) {
    .date-container .months-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
    .date-container .date-title { font-size: 20px; }
    .date-container .date-subtitle { display: none; }
    .date-container .months-grid { gap: 6px; }
    .date-container .month-card { padding: 8px 8px; min-height: 44px; }
    .date-container .month-tag { display: none; }
    .date-container .month-card-content { flex-direction: column; align-items: flex-start; gap: 0; }
    .date-container .month-sw { font-size: 11.5px; }
    .date-container .month-ar { font-size: 14px; }
}

/* ---- Ramadhani: tabu ---- */
.ramadhan-container .ramadhan-header { margin-bottom: 16px; }
.ramadhan-container .ramadhan-title { font-size: 26px; margin-bottom: 6px; }
.ramadhan-container .ramadhan-subtitle { font-size: 13px; }
.rm-tabs { display: flex; gap: 8px; margin: 18px 0 14px; padding: 4px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 14px; }
.rm-tab { flex: 1; min-height: 44px; padding: 8px 14px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text-secondary); font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; }
.rm-tab[aria-selected="true"] { background: rgba(245, 199, 93, 0.12); border-color: rgba(245, 199, 93, 0.5); color: var(--text-primary); }
.rm-tab:focus-visible { outline: 2px solid #f5c75d; outline-offset: 2px; }
.rm-panel[hidden] { display: none; }
.ramadhan-container .ramadhan-duas-section,
.ramadhan-container .ramadhan-hadiths-section { margin-top: 0; }
.ramadhan-container .section-title { display: none; }

@media (max-width: 520px) {
    .ramadhan-container .ramadhan-subtitle { display: none; }
    .ramadhan-container .ramadhan-title { font-size: 20px; }
    .rm-tabs { margin: 12px 0 10px; }
}

/* =========================================================================
   Maktaba: vipengele vya utendaji (kisanduku cha utafutaji juu, kuruka ukurasa,
   maelezo ya kitabu). Muonekano wa maktaba umebaki wa awali.
   ========================================================================= */
.library-search { margin: 0 0 20px; }

.page-jump { display: inline-flex; align-items: center; gap: 6px; }
.page-jump label { font-size: 12px; font-weight: 700; }
.page-jump input {
    width: 64px;
    min-height: 40px;
    text-align: center;
    padding: 4px 6px;
    border-radius: 10px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-surface-elevated);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
    -moz-appearance: textfield;
}
.page-jump input::-webkit-outer-spin-button,
.page-jump input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.page-jump input:focus-visible { outline: 2px solid #f5c75d; outline-offset: 2px; }
@media (max-width: 480px) {
    .page-jump label { display: none; }
}

.inside-book-more { margin-top: 6px; }
.inside-book-more summary {
    cursor: pointer;
    min-height: 40px;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: #f5c75d;
    list-style: none;
}
.inside-book-more summary::-webkit-details-marker { display: none; }
.inside-book-more summary::before { content: "+"; margin-right: 6px; font-weight: 800; }
.inside-book-more[open] summary::before { content: "−"; }
.inside-book-more summary:focus-visible { outline: 2px solid #f5c75d; outline-offset: 2px; border-radius: 6px; }

/* Bottom nav: duotone icon tint */
.mobile-nav-icon .nav-tint{fill:currentColor;fill-opacity:.14}
.mobile-nav-item.active .mobile-nav-icon .nav-tint{fill-opacity:.3}

/* Light mode: translucent-white chips/borders and dark inset shadows were
   invisible on light backgrounds (Qibla, Hijri, Ramadhan, Prayer pages). */
[data-theme="light"] .ramadhan-badge,
[data-theme="light"] .countdown-badge,
[data-theme="light"] .prayer-location-pill,
[data-theme="light"] .month-num,
[data-theme="light"] .month-tag,
[data-theme="light"] .btn-sensor-activate,
[data-theme="light"] .month-card.highlight,
[data-theme="light"] .month-card.sacred .month-tag,
[data-theme="light"] .month-card.highlight .highlight-tag {
    background: var(--gold-subtle);
    border-color: var(--border-color);
    color: var(--text-secondary);
}[data-theme="light"] .month-card.sacred { border-color: var(--gold); }

[data-theme="light"] .month-card.highlight { border-color: var(--emerald); }
[data-theme="light"] .month-card.highlight .highlight-tag { color: var(--emerald); }
[data-theme="light"] .metric-sep { background: var(--border-color); }
[data-theme="light"] .prayer-hero-top,
[data-theme="light"] .prayer-schedule-header { border-bottom-color: var(--border-color); }
[data-theme="light"] .ramadhan-countdown-card::before { background: linear-gradient(90deg, transparent, var(--gold), transparent); }
[data-theme="light"] .today-hijri-card { background: radial-gradient(circle at 50% 25%, var(--gold-subtle) 0%, var(--bg-surface) 75%); }
[data-theme="light"] .countdown-box,
[data-theme="light"] .p-box,
[data-theme="light"] .compass-center-hub {
    box-shadow: 0 2px 10px rgba(7, 41, 63, 0.08);
    background: var(--bg-surface-elevated);
}
[data-theme="light"] .qibla-instrument-card,
[data-theme="light"] .prayer-hero-card { box-shadow: var(--card-shadow); }
[data-theme="light"] .p-num,
[data-theme="light"] .hub-angle,
[data-theme="light"] .countdown-num { color: var(--text-primary); }

/* Book card footer: count pill and action always on ONE line */
.rawdah-book-footer {
    flex-wrap: nowrap;
    gap: 8px;
}
.book-total-hadiths,
.rawdah-book-action {
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.3;
}
.book-total-hadiths { padding: 4px 10px; gap: 4px; }
@media (max-width: 480px) {
    .rawdah-book-footer { gap: 6px; }
    .book-total-hadiths { font-size: 10px; padding: 4px 8px; letter-spacing: -0.1px; }
    .rawdah-book-action { font-size: 11px; gap: 3px; }
}
@media (max-width: 360px) {
    .book-total-hadiths { font-size: 9.5px; padding: 3px 6px; }
    .rawdah-book-action { font-size: 10.5px; }
}

/* Book cards: consistent, non-overflowing layout on phones (e.g. Samsung A55 ~412px) */
.rawdah-book-main { min-width: 0; }
.rawdah-book-title, .rawdah-book-ar, .rawdah-book-author { overflow-wrap: anywhere; }
@media (max-width: 640px) {
    .rawdah-book-card {
        padding: 16px 14px;
        min-height: 0;
        border-radius: 16px;
    }
    .rawdah-book-card.has-custom-cover { gap: 12px; align-items: flex-start; }
    .rawdah-book-cover-wrap { width: 72px; }
    .rawdah-book-title { font-size: 16px; }
    .rawdah-book-ar { font-size: 16px; }
    .rawdah-book-body { margin-bottom: 10px; }
    .rawdah-book-footer { padding-top: 10px; }
}
@media (max-width: 380px) {
    .rawdah-book-cover-wrap { width: 62px; }
    .rawdah-book-card { padding: 14px 12px; }
}

/* Maktaba: kwenye simu ndogo kitufe cha "Tafuta" kinabanwa na kubaki kidoti cheusi.
   Utafutaji ni live (na Enter inafanya kazi), kwa hiyo tunakiondoa. */
@media (max-width: 480px) {
    .library-search button[type="submit"] { display: none; }
}/* Light theme: --gold ni navy,
kwa hiyo maandishi/ikoni juu yake lazima ziwe nyeupe
   (zilikuwa nyeusi juu ya navy na hazionekani). */
[data-theme="light"] .quran-tab-btn.active,
[data-theme="light"] .category-tab-btn.active,
[data-theme="light"] .display-mode-btn.active,
[data-theme="light"] .quran-play-all-btn.is-playing,
[data-theme="light"] .primary-button,
[data-theme="light"] .qf-play-pause-btn {
    color: #ffffff;
}


/* Swichi ya ON/OFF ya Arifa za Kila Siku (menyu ya pembeni) */
.notif-switch {
    flex-shrink: 0;
    position: relative;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: var(--text-dim);
    transition: background .2s ease;
}
.notif-switch-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transition: transform .2s ease;
}
.notif-switch.is-on { background: #10b981; }
.notif-switch.is-on .notif-switch-knob { transform: translateX(20px); }

/* Menyu iliyofungwa isivujishe kivuli kwenye ukingo wa ukurasa (mstari mweusi kulia) */
.nav-drawer:not(.is-open) {
    box-shadow: none !important;
    border-left-color: transparent !important;
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.3s !important;
}
.nav-drawer.is-open { visibility: visible; }/* ==========================================================================
   Usomekaji (contrast) — light & dark mode
   ========================================================================== */

/* Light: kitufe cha pili cha hero kilikuwa cheupe juu ya cheupe (!important ya .hero-button) */
[data-theme="light"] .hero-button.hero-button-secondary {
    color: #0f172a !important;
}


/* Light: kadi za Nyakati za Swala na Qibla ni nyeusi — maandishi yawe meupe */
[data-theme="light"] .prayer-live-clock,
[data-theme="light"] .prayer-target-name,
[data-theme="light"] .prayer-target-time {
    color: #ffffff;
}
[data-theme="light"] .countdown-heading-label,
[data-theme="light"] .prayer-hero-card .p-sep {
    color: rgba(226, 232, 240, 0.8);
}
[data-theme="light"] .qibla-instrument-card .m-val,
[data-theme="light"] .qibla-instrument-card .btn-sensor-activate {
    color: #ffffff;
}
[data-theme="light"] .qibla-instrument-card .m-label,
[data-theme="light"] .qibla-instrument-card .qibla-minimal-hint {
    color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .qibla-instrument-card .btn-sensor-activate {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.28);
}

/* Light: dhahabu/bluu nyepesi juu ya nyeupe haisomeki — tumia rangi nzito */
[data-theme="light"] .hub-target,
[data-theme="light"] .support-link-btn,
[data-theme="light"] .p-pill.p-pill-next { color: #92400e; }
[data-theme="light"] .dua-type { color: #0369a1; }
[data-theme="light"] .footer-link-bullet { color: #0369a1; }

/* Dark: lebo za Nyakati za Swala */
[data-theme="dark"] .p-pill,
[data-theme="dark"] .p-pill.p-pill-passed { color: #a3b3c4; }

/* Light: maandishi madogo ya kijivu yaliyobaki chini ya 4.5:1 */
[data-theme="light"] .curr-toggle-btn,
[data-theme="light"] .p-pill.p-pill-passed { color: #4b5a6e; }
[data-theme="light"] .p-sub-name { color: #3f4d61; }
[data-theme="light"] .month-ar { color: #64748b; }
[data-theme="light"] .qibla-instrument-card .qibla-minimal-hint { color: #f1f5f9; }

/* Palette ya Zumaridi na Dhahabu: marekebisho madogo ya mwisho */
[data-theme="light"] .reader-top-nav {
    background: transparent !important;
    border-color: transparent !important;
}
[data-theme="dark"] { --text-muted: #a3bdd0; }
[data-theme="dark"] .pill-count,
[data-theme="dark"] .bookmark-tab-badge { color: #f0dc8c; }
[data-theme="light"] .p-pill.p-pill-passed { color: #2d4a60; }
[data-theme="light"] .month-ar { color: #44607a; }

/* Logo: toleo la kijani kirefu (logo.png) kwa light; mint kwa dark */
[data-theme="dark"] .brand-logo,
[data-theme="dark"] .nav-drawer-logo,
[data-theme="dark"] .pwa-banner-logo,
[data-theme="dark"] .auth-brand-badge img,
[data-theme="dark"] .footer-logo-img,
[data-theme="dark"] .bayt-splash-logo {
    content: url("../images/logo-gold.png");
}

/* Logo bila background/kisanduku: png tayari ni transparent */
.footer-logo-badge,
[data-theme="light"] .footer-logo-badge {
    background: transparent;
    border: none;
    box-shadow: none;
}
.pwa-banner-logo,
.auth-brand-badge,
.bayt-splash-logo-wrap { background: transparent; box-shadow: none; }
[data-theme="dark"] .category-pill.active .pill-count { color: #f6e9b4; }

[data-theme="dark"] .p-pill,
[data-theme="dark"] .p-pill.p-pill-passed { color: #c3d7e6; }

/* Footer: Related Pages */
.footer-related-title { margin-top: 18px; }

/* ===== Landing: platform modules ===== */
.hero-sub { margin: 10px 0 0; font-size: 1rem; color: var(--text-secondary); max-width: 34rem; }
.platform-modules { margin: 28px 0 8px; }
.platform-modules-title { font-size: 1.15rem; margin: 0 0 14px; color: var(--text-primary); }
.module-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .module-grid { grid-template-columns: repeat(2, 1fr); } }
.module-card {
    display: flex; align-items: flex-start; gap: 14px; padding: 16px;
    background: var(--bg-surface); border: 1px solid var(--border-color, rgba(128,160,190,.28));
    border-radius: 16px; color: var(--text-primary); text-decoration: none;
}
.module-card-soon, .module-card-next { border-style: dashed; cursor: default; }
.module-card-next { border-color: var(--gold); }
.module-icon {
    flex: 0 0 auto; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; background: var(--bg-surface-elevated); color: var(--gold);
}
.module-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.module-title { font-weight: 700; font-size: 1.05rem; color: var(--text-primary); }
.module-desc { font-size: .92rem; color: var(--text-muted); }
.module-badge {
    align-self: flex-start; margin-top: 8px; padding: 3px 10px; border-radius: 999px;
    font-size: .75rem; font-weight: 600; border: 1px solid var(--text-muted); color: var(--text-muted);
}
.module-badge-next { background: var(--gold-gradient); color: var(--btn-gold-text); border-color: transparent; }

/* Landing hero: compact (no button below) */
.library-hero .hero-copy { padding: 26px 24px; }
.library-hero h1 { margin: 0 0 10px; }
.hero p.hero-sub { margin: 0; font-size: 15px; line-height: 1.5; }
.library-hero { min-height: 0; }

/* ===== Learning Centre ===== */
.lc-shell { padding-bottom: 40px; }
.lc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.lc-stat { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 14px; padding: 14px 8px; text-align: center; }
.lc-stat strong { display: block; font-size: 1.6rem; color: var(--gold); line-height: 1.1; }
.lc-stat span { display: block; margin-top: 4px; font-size: .78rem; color: var(--text-muted); }
.lc-note { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 18px 0; padding: 14px 16px; background: var(--bg-surface); border: 1px dashed var(--border-color); border-radius: 14px; color: var(--text-secondary); }
.lc-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 16px 0; }
@media (min-width: 640px) { .lc-actions { grid-template-columns: repeat(2, 1fr); } .lc-lesson-actions { grid-template-columns: repeat(3, auto); justify-content: start; } }
.lc-action { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 14px; text-decoration: none; color: var(--text-primary); }
.lc-action-title { font-weight: 700; color: var(--gold); }
.lc-action-desc { font-size: .9rem; color: var(--text-muted); }
.lc-section-title { margin: 26px 0 10px; font-size: 1.15rem; color: var(--text-primary); }
.lc-group { margin-bottom: 20px; }
.lc-group-title { margin: 0 0 10px; font-size: .95rem; color: var(--text-secondary); }
.lc-course-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 768px) { .lc-course-list { grid-template-columns: repeat(2, 1fr); } }
.lc-course { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 14px; text-decoration: none; color: var(--text-primary); }
.lc-course-title { font-weight: 700; }
.lc-course-meta { font-size: .85rem; color: var(--text-muted); }
.lc-bar { height: 6px; border-radius: 99px; background: var(--bg-surface-elevated); overflow: hidden; }
.lc-bar > span { display: block; height: 100%; background: var(--gold-gradient); }
.lc-lessons { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 8px; }
.lc-lesson { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 12px; text-decoration: none; color: var(--text-primary); }
.lc-lesson.is-done { border-color: var(--gold); }
.lc-lesson-no { flex: 0 0 auto; min-width: 38px; text-align: center; font-weight: 700; color: var(--gold); }
.lc-lesson-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lc-lesson-title { font-weight: 600; }
.lc-lesson-chapter { font-size: .82rem; color: var(--text-muted); }
.lc-lesson-check { color: var(--gold); font-weight: 800; min-width: 1em; }
.lc-pager { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin: 18px 0; }
.lc-btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 18px; border-radius: 12px; border: 0; cursor: pointer; font: inherit; font-weight: 700; text-decoration: none; background: var(--gold-gradient); color: var(--btn-gold-text); }
.lc-btn:disabled { opacity: .6; cursor: default; }
.lc-btn-small { padding: 8px 14px; }
.lc-btn-ghost { background: transparent; color: var(--text-primary); border: 1px solid var(--border-color); }
.lc-btn.is-on { background: var(--bg-surface-elevated); color: var(--text-primary); border: 1px solid var(--gold); }
.lc-card { margin: 14px 0; padding: 16px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 16px; }
.lc-card-label { margin: 0 0 10px; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.lc-text { margin: 0; line-height: 1.8; color: var(--text-primary); }
.lc-arabic { margin: 0; font-size: 1.6rem; line-height: 2.2; color: var(--text-primary); }
.lc-hints { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; color: var(--text-secondary); }
.lc-hint-text { margin: 0 0 10px; color: var(--text-muted); font-size: .92rem; }
.lc-range { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--text-secondary); }
.lc-range input { flex: 1; accent-color: var(--gold); }
.lc-range output { min-width: 3ch; font-weight: 700; color: var(--gold); }
.lc-word.is-hidden { background: var(--bg-surface-elevated); color: transparent; border-radius: 6px; cursor: pointer; user-select: none; }
.lc-q-count { margin: 0 0 6px; font-size: .85rem; color: var(--text-muted); }
.lc-q-prompt { margin: 0 0 12px; font-size: 1.1rem; color: var(--text-primary); }
.lc-q-text { margin: 0 0 14px; line-height: 1.8; color: var(--text-secondary); }
.lc-q-text.is-title { font-weight: 700; color: var(--text-primary); }
.lc-options { display: grid; gap: 8px; }
.lc-option { text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-body); color: var(--text-primary); font: inherit; cursor: pointer; }
.lc-option.is-right { border-color: #10b981; background: rgba(16, 185, 129, .16); }
.lc-option.is-wrong { border-color: #ef4444; background: rgba(239, 68, 68, .14); }
.lc-feedback { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.lc-feedback .is-ok { color: #10b981; }
.lc-feedback .is-bad { color: #ef4444; }
[data-theme="light"] .lc-feedback .is-ok { color: #047857; }
[data-theme="light"] .lc-feedback .is-bad { color: #b91c1c; }
.lc-link { color: var(--gold); font-weight: 600; }
.lc-result-title { margin: 0 0 14px; color: var(--text-primary); }
.lc-grades { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px; }
@media (min-width: 640px) { .lc-grades { grid-template-columns: repeat(4, 1fr); } }
.lc-grade { background: var(--bg-surface-elevated); color: var(--text-primary); border: 1px solid var(--border-color); }
.lc-grade-0 { border-color: #ef4444; } .lc-grade-3 { border-color: #10b981; }
.lc-answer { margin-top: 14px; }

/* ===== Research & Knowledge Graph ===== */
.rs-results { display: grid; gap: 10px; }
.rs-result { margin: 0; }
.rs-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.rs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.rs-chip { display: inline-block; padding: 3px 10px; border-radius: 99px; background: var(--bg-surface-elevated); color: var(--text-primary); font-size: .82rem; text-decoration: none; border: 1px solid var(--border-color); }
.rs-compare { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 900px) { .rs-compare { grid-template-columns: repeat(2, 1fr); } }
.rs-sw { white-space: pre-line; }
.rs-sim { padding: 12px 0; border-top: 1px solid var(--border-color); }
.rs-sim:first-of-type { border-top: 0; }
.rs-score { margin-left: 8px; font-weight: 700; color: var(--gold); }
.kg-wrap { max-width: 520px; margin: 14px auto; }
.kg-svg { width: 100%; height: auto; display: block; }
.kg-edge { stroke: var(--border-color); stroke-width: 1.5; }
.kg-node circle { fill: var(--bg-surface-elevated); stroke: var(--gold); stroke-width: 2; }
.kg-node text { fill: var(--text-primary); font-size: 10px; font-weight: 600; }
.kg-book circle { stroke: var(--text-muted); }
.kg-topic circle { stroke: var(--emerald); }
.kg-similar circle { stroke: var(--gold); stroke-dasharray: 4 3; }
.kg-center circle { fill: var(--gold); stroke: none; }
.kg-center text { fill: var(--btn-gold-text); font-size: 11px; font-weight: 800; }
.rs-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; justify-content: center; margin: 4px 0 14px; font-size: .82rem; color: var(--text-secondary); }
.rs-lg { display: inline-flex; align-items: center; gap: 6px; }
.rs-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--gold); background: var(--bg-surface-elevated); }
.kg-dot-book { border-color: var(--text-muted); } .kg-dot-topic { border-color: var(--emerald); } .kg-dot-similar { border-style: dashed; }

/* ---- Arabic Analyzer (lite) ---- */
.ar-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:16px;padding:16px;margin-top:14px}
.ar-text{font-family:'Amiri','Scheherazade New',serif;font-size:26px;line-height:2.2;text-align:right}
.ar-word{background:none;border:0;border-bottom:1px dashed transparent;color:inherit;font:inherit;padding:0 3px;cursor:pointer;border-radius:6px}.ar-word.is-active {background:var(--gold-subtle);color:var(--gold);border-bottom-color:var(--gold)}

.ar-meta{margin:8px 0;font-size:13px}.ar-meta a{color:var(--gold)}
.ar-panel{border-top:1px solid var(--border-color);margin-top:10px;padding-top:12px;min-height:60px}
.ar-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.ar-big{font-family:'Amiri',serif;font-size:28px;color:var(--gold)}
.ar-count{font-size:12px;opacity:.8}
.ar-list{list-style:none;margin:0;padding:0}.ar-list li{padding:7px 0;border-bottom:1px solid var(--border-color);font-size:14px}
.ar-list a{color:inherit;text-decoration:none}.ar-list a b{color:var(--gold)}
.ar-hint,.ar-note{font-size:13px;opacity:.75;margin:4px 0}
@media (max-width:420px){.ar-text{font-size:22px}}
.ai-answer{font-size:15px;line-height:1.7;margin-bottom:10px}

/* ---- Landing modules: compact 2/3-column cards ---- */
.platform-modules-title { margin-bottom: 10px; }
.module-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.module-card { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; border-radius: 14px; position: relative; }
.module-icon { width: 34px; height: 34px; border-radius: 10px; }
.module-icon svg { width: 18px; height: 18px; }
.module-title { font-size: .92rem; line-height: 1.2; }
.module-desc { font-size: .76rem; line-height: 1.3; }
.module-card-live { border-color: rgba(224, 200, 104, .45); }
.module-card-live .module-icon { background: var(--gold-gradient); color: var(--btn-gold-text); }
.module-card-live::after { content: "→"; position: absolute; top: 10px; right: 12px; color: var(--gold); font-size: .9rem; }
.module-card-soon { opacity: .62; }
.module-badge { margin-top: 4px; padding: 2px 8px; font-size: .66rem; }
[data-theme="light"] .module-card-live { border-color: rgba(10, 63, 102, .35); }
@media (min-width: 768px) {
    .module-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .module-card { padding: 14px; }
    .module-title { font-size: 1rem; }
    .module-desc { font-size: .84rem; }
}

.ar-detail{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:6px 0 4px;font-size:14px}
.ar-detail dt{opacity:.7;font-weight:600}.ar-detail dd{margin:0}
.ar-detail dd[lang=ar]{font-family:'Amiri',serif;font-size:20px;color:var(--gold)}
.ar-detail dd[dir=rtl]{text-align:left}

/* ---- Landing: About card ---- */
.about-card{margin:18px 0 8px;padding:14px 16px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:14px}
.about-card .platform-modules-title{margin-bottom:6px}
.about-text{margin:0 0 10px;font-size:.88rem;line-height:1.6;color:var(--text-muted)}
.about-points{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.about-points li{font-size:.74rem;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid rgba(224,200,104,.4);color:var(--gold)}
[data-theme="light"] .about-points li{border-color:rgba(10,63,102,.3)}

/* ---- Drawer v2: richer look (mobile) ---- */
@media (max-width: 640px) {
    .nav-drawer { background: linear-gradient(180deg, var(--bg-surface-elevated) 0, var(--bg-surface) 180px) !important; }
    .nav-drawer-header {
        position: relative !important; padding: 20px 16px 18px !important; border-bottom: 0 !important;
        background: linear-gradient(135deg, #0d5486 0%, #07293f 100%) !important;
    }
    .nav-drawer-header::after {
        content: "" !important; position: absolute !important; left: 0; right: 0; bottom: 0; height: 2px;
        background: linear-gradient(90deg, transparent, #e0c868 30%, #f0dc8c 50%, #e0c868 70%, transparent) !important;
    }
    .nav-drawer-logo { width: 48px !important; height: 48px !important; padding: 5px !important; border-radius: 14px !important;
        background: rgba(255,255,255,.08) !important; border: 1px solid rgba(224,200,104,.35) !important; filter: none !important; }
    [data-theme="light"] .nav-drawer-logo { filter: none !important; }
    .nav-drawer-title { color: #f0dc8c !important; font-size: 19px !important; }
    .nav-drawer-sub { color: rgba(255,255,255,.72) !important; letter-spacing: 2px !important; }
    .nav-drawer-close { background: rgba(255,255,255,.12) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.25) !important; }

    .nav-drawer-body { padding: 14px 14px 18px !important; gap: 8px !important; }
    .nav-drawer-section-label { display: flex !important; align-items: center !important; gap: 10px !important; color: var(--gold) !important; margin: 10px 4px 2px !important; }
    .nav-drawer-section-label::after { content: "" !important; flex: 1 !important; height: 1px !important; background: linear-gradient(90deg, var(--border-color), transparent) !important; }

    .nav-drawer-link { background: var(--bg-surface) !important; border: 1px solid var(--border-color) !important; padding: 10px 12px !important; position: relative !important; overflow: hidden !important; }
    .nav-drawer-link .nav-drawer-icon { width: 36px !important; height: 36px !important; border-radius: 10px !important; background: var(--gold-subtle) !important; }
    .nav-drawer-link .nav-drawer-arrow { color: var(--gold) !important; }
    .nav-drawer-link.active { background: var(--gold-subtle) !important; border-color: var(--gold) !important; color: var(--text-primary) !important; box-shadow: 0 4px 14px -6px var(--gold) !important; }
    .nav-drawer-link.active::before { content: "" !important; position: absolute !important; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gold-gradient) !important; }
    .nav-drawer-link.active .nav-drawer-icon { background: var(--gold-gradient) !important; color: var(--btn-gold-text) !important; }

    .nav-drawer-divider { background: none !important; margin: 6px 0 !important; height: 0 !important; }
    .nav-drawer-setting-item { background: var(--bg-surface) !important; border: 1px solid var(--border-color) !important; border-radius: 14px !important; padding: 10px 10px 12px !important; }
    .nav-drawer-setting-title { color: var(--text-muted) !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .6px !important; text-transform: uppercase !important; }
    .drawer-lang-btn, .drawer-theme-btn { background: transparent !important; border: 1px solid var(--border-color) !important; color: var(--text-secondary) !important; }
    .drawer-lang-btn.active, .drawer-theme-btn.active { background: var(--gold-gradient) !important; border-color: transparent !important; color: var(--btn-gold-text) !important; box-shadow: 0 4px 12px -4px var(--gold) !important; }
    .drawer-lang-btn.active .drawer-lang-sub { color: var(--btn-gold-text) !important; opacity: .8 !important; }

    .nav-drawer-pwa-btn { background: var(--bg-surface) !important; border: 1px solid var(--border-color) !important; border-radius: 14px !important; }
    .nav-drawer-pwa-btn .nav-drawer-icon { width: 36px !important; height: 36px !important; border-radius: 10px !important; background: var(--gold-subtle) !important; }
    #drawer-pwa-install-btn { background: var(--gold-subtle) !important; border-color: var(--gold) !important; }
    .nav-drawer-pwa-badge { background: var(--gold-gradient) !important; color: var(--btn-gold-text) !important; border: 0 !important; font-weight: 800 !important; }

    .nav-drawer-footer { text-align: center !important; padding: 14px 18px 18px !important; border-top: 0 !important; position: relative !important; }
    .nav-drawer-footer::before { content: "✦ ✦ ✦" !important; display: block !important; color: var(--gold) !important; font-size: 10px !important; letter-spacing: 6px !important; margin-bottom: 8px !important; }
    .nav-drawer-quote { font-style: italic !important; line-height: 1.55 !important; }
}

/* ---- Landing: stats strip + section subtitles ---- */
.stats-strip{display:grid;grid-template-columns:repeat(3,1fr);margin:12px 0;border:1px solid var(--border-color);border-radius:14px;background:var(--bg-surface);overflow:hidden}
.stats-strip>div{padding:10px 6px;text-align:center;display:flex;flex-direction:column;gap:2px}
.stats-strip>div+div{border-left:1px solid var(--border-color)}
.stats-strip b{font-size:1.15rem;color:var(--gold);line-height:1.1}
.stats-strip span{font-size:.72rem;color:var(--text-muted);font-weight:600}
.section-sub{margin:-6px 0 10px;font-size:.8rem;color:var(--text-muted)}

/* ---- Landing hero: image beside text (desktop), banner on top (mobile) ---- */
.library-hero { flex-direction: column; justify-content: flex-start; padding: 0; }
.library-hero .hero-media { position: relative; z-index: 1; width: 100%; aspect-ratio: 2 / 1; overflow: hidden; }
.library-hero .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 28% 55%; display: block; }
.library-hero .hero-copy { order: 1; }
.library-hero .hero-media { order: 2; }
.library-hero .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 41, 63, .5) 0%, transparent 35%); }
[data-theme="light"] .library-hero .hero-media::after { background: linear-gradient(180deg, rgba(255, 255, 255, .6) 0%, transparent 35%); }
@media (min-width: 861px) {
    .library-hero { flex-direction: row; align-items: stretch; min-height: 300px; }
    .library-hero .hero-copy { order: 1; flex: 1 1 45%; align-self: center; padding: 36px 40px; }
    .library-hero .hero-media { order: 2; flex: 0 0 56%; width: auto; aspect-ratio: auto; }
    .library-hero .hero-media img { object-position: 35% 60%; }
    .library-hero .hero-media::after { background: linear-gradient(90deg, rgba(7, 41, 63, .95) 0%, rgba(7, 41, 63, 0) 40%); }
    [data-theme="light"] .library-hero .hero-media::after { background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 40%); }
}

/* ---- Landing hero title: one line, Cinzel ---- */
.library-hero h1 {
    font-family: 'Cinzel', 'Playfair Display', serif !important;
    font-weight: 800 !important;
    font-size: clamp(1.2rem, 6vw, 2.1rem) !important;
    letter-spacing: .06em !important;
    line-height: 1.15 !important;
    white-space: nowrap;
}
.library-hero h1 em {
    font-style: normal !important;
    color: var(--gold) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

/* ---- About page + footer in one row ---- */
.about-page .about-sec{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:14px;padding:16px 18px;margin:12px 0}
.about-page .about-sec h2{font-size:1.05rem;margin:0 0 8px;color:var(--gold)}
.about-page .about-sec p{margin:0;font-size:.95rem;line-height:1.75;color:var(--text-secondary)}
.about-more{display:inline-block;margin-top:10px;font-size:.82rem;font-weight:700;color:var(--gold);text-decoration:none}
.footer-about-text{margin:12px 0 6px;font-size:.82rem;line-height:1.6;color:var(--text-muted);max-width:300px}
.footer-about-link{font-size:.82rem;font-weight:700;color:var(--gold);text-decoration:none}
.footer-brand-wrap{flex-direction:column;align-items:flex-start}
.footer-related-links{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.footer-related-title{margin-top:0}
@media (min-width:992px){
    .footer-container{max-width:1240px}
    .footer-top-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;align-items:start}
}
@media (min-width:769px) and (max-width:991px){
    .footer-top-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:768px){
    .footer-related-links{width:100%}
}

/* ---- Footer brand name = hero title style ---- */
.footer-brand-name { font-family: 'Cinzel', 'Playfair Display', serif; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.footer-brand-name span, [data-theme="light"] .footer-brand-name span { font-family: inherit; font-style: normal; color: var(--gold); }

/* ---- Landing hero: meaning + small details ---- */
.library-hero .hero-meaning { margin: 0 0 10px; font-size: .92rem; color: var(--text-secondary); }
.library-hero .hero-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.library-hero .hero-chips li { font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(224, 200, 104, .4); color: var(--gold); white-space: nowrap; }
[data-theme="light"] .library-hero .hero-chips li { border-color: rgba(10, 63, 102, .3); }

/* ---- Landing hero (mobile): centered, ornament, framed image ---- */
@media (max-width: 860px) {
    .library-hero { background: radial-gradient(120% 70% at 50% 0%, rgba(224, 200, 104, .16) 0%, transparent 60%), linear-gradient(160deg, #0d4a74 0%, #07293f 70%) !important; border-color: rgba(224, 200, 104, .35) !important; }
    [data-theme="light"] .library-hero { background: radial-gradient(120% 70% at 50% 0%, rgba(10, 63, 102, .10) 0%, transparent 60%), #fff !important; }
    .library-hero .hero-copy { text-align: center; padding: 22px 16px 14px !important; }
    .library-hero .hero-copy::before { content: "✦  ✦  ✦"; display: block; color: var(--gold); font-size: 10px; letter-spacing: 6px; margin-bottom: 10px; }
    .library-hero h1 { margin: 0 0 8px !important; }
    .library-hero .hero-meaning { font-size: .85rem; margin: 0 0 10px; opacity: .95; }
    .library-hero .hero-chips { justify-content: center; gap: 5px; }
    .library-hero .hero-chips li { font-size: .66rem; padding: 3px 8px; }
    .library-hero .hero-media { width: auto; margin: 0 14px 14px; border-radius: 16px; aspect-ratio: 16 / 9; border: 1px solid rgba(224, 200, 104, .45); box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .55), 0 0 0 4px rgba(224, 200, 104, .08); }
    .library-hero .hero-media::after { background: linear-gradient(180deg, transparent 60%, rgba(7, 41, 63, .5) 100%) !important; }
}

/* ===== Light mode: stronger text contrast (secondary text was too faded) ===== */
[data-theme="light"] {
    --text-primary: #061c2e;
    --text-secondary: #1a3550;
    --text-muted: #2b4863;
    --text-dim: #33516b;
    --arabic-text: #061c2e;
}
[data-theme="light"] .hero-caption,
[data-theme="light"] .rawdah-topic-star,
[data-theme="light"] .bayt-splash-sub,
[data-theme="light"] .bayt-splash-caption,
[data-theme="light"] .month-ar { color: #3a5570; }
[data-theme="light"] .hero p { color: #1e3347; }
[data-theme="light"] .ayah-translation-sw { color: #142c36; }
/* small caps labels and meta lines read better a notch heavier */
[data-theme="light"] .lc-card-label,
[data-theme="light"] .section-label,
[data-theme="light"] .module-desc,
[data-theme="light"] .section-sub,
[data-theme="light"] .hero-meaning { color: var(--text-secondary); }
[data-theme="light"] .lc-card-label,
[data-theme="light"] .section-label { font-weight: 800; }

/* ===== Scroll stability on phones (text was shimmering/jumping while scrolling) ===== */
/* A fixed tiled background forces a full repaint on every scroll frame on mobile browsers. */
body,
[data-theme="light"] body { background-attachment: scroll, scroll; }

/* Touch screens keep :hover after a tap, which nudged cards and shifted the text. */
@media (hover: none) {
}

/* Reserve room for late-loading content so the text below does not jump. */
.hadith-source-box,
.related-section,
.reader-bottom-nav { overflow-anchor: none; }

/* ===== Light mode hero (desktop): seamless fade instead of a white overlay =====
   The old white gradient over the image washed out the lantern and left a visible seam.
   A mask lets the hero background itself show through, so the edge disappears. */
@media (min-width: 861px) {
    [data-theme="light"] .library-hero .hero-media::after { display: none; }
    [data-theme="light"] .library-hero .hero-media img {
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%);
                mask-image: linear-gradient(90deg, transparent 0%, #000 7%);
        object-position: 30% 60%;
    }
}

/* ===== Phones (iOS + Android): remove scroll-time shimmer =====
   Blurred sticky/fixed bars (backdrop-filter) re-blur the text scrolling underneath on every frame,
   which makes small text look like it is shaking. Their backgrounds are already ~95% opaque,
   so dropping the blur is visually almost identical. */
@media (max-width: 900px), (hover: none) {
    .site-header,
    .mobile-bottom-nav,
    .back-to-top-btn,
    .feedback-floating-btn,
    .library-summary,
    .quran-floating-player,
    .prayer-hero-card,
    .qibla-instrument-card {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .site-header { transition: background-color .25s ease, border-color .25s ease; }
    html { scroll-behavior: auto; }
    body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
}


/* ===== Touch screens: :hover sticks after a tap, so hover movement made buttons/cards dance. =====
   Generated from every rule that moves an element on :hover. Colour/shadow hover effects are kept. */
@media (hover: none) {
}

/* ===== User profile (/wasifu) ===== */
.pf-head { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.pf-avatar { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 2px solid var(--gold); box-shadow: var(--card-shadow); }
.pf-initial { display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800; color: var(--btn-gold-text); background: var(--gold-gradient); }
.pf-id { min-width: 0; }
.pf-name { margin: 2px 0 2px; font-size: 1.35rem; line-height: 1.25; overflow-wrap: anywhere; }
.pf-email { margin: 0 0 8px; color: var(--text-secondary); font-size: .88rem; overflow-wrap: anywhere; }
.pf-badges { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pf-badge { font-size: .7rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border-color); color: var(--text-secondary); }
.pf-badge-admin { background: var(--gold-gradient); color: var(--btn-gold-text); border-color: transparent; }
.pf-badge-gold { color: var(--gold); border-color: var(--gold); }
.pf-since { margin: 0; font-size: .78rem; color: var(--text-muted); }
.pf-stats { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.pf-recent { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.pf-recent a { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 14px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 12px; }
.pf-recent-title { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pf-recent-no { font-size: .76rem; color: var(--text-muted); white-space: nowrap; }
.pf-logout { margin: 22px 0 8px; }
@media (max-width: 480px) { .pf-head { flex-direction: column; text-align: center; } .pf-badges { justify-content: center; } }


/* Clean interactions: no tap flash, no focus ring on mouse/touch click */
*,*::before,*::after{-webkit-tap-highlight-color:transparent}
a:focus:not(:focus-visible),button:focus:not(:focus-visible),summary:focus:not(:focus-visible){outline:none}


/* ===== Book info card (inside a collection) ===== */
.inside-book-banner.ib-card{display:flex;flex-direction:column;align-items:stretch;gap:14px}
.ib-card .ib-head{display:flex;align-items:center;gap:16px}
.ib-card .ib-titles{min-width:0;flex:1}
.ib-card .inside-book-heading{margin:0 0 4px}
.ib-card .inside-book-ar{margin:0}
.ib-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.ib-fact{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:9px 12px;min-width:0}
.ib-fact--wide{grid-column:1 / -1}
.ib-fact dt{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.7;margin:0 0 2px}
.ib-fact dd{margin:0;font-size:14.5px;font-weight:700;line-height:1.35}
.ib-unit{font-size:11px;font-weight:600;opacity:.75}
.ib-sub{font-size:12px;font-weight:500;opacity:.75}
.ib-card .inside-book-desc{margin:0;font-size:13.5px;line-height:1.55}
@media (max-width:640px){
  .inside-book-banner.ib-card{flex-direction:column;align-items:stretch;gap:12px}
  .ib-card .inside-book-cover-thumb{width:72px}
}
[data-theme="light"] .ib-fact{background:rgba(6,28,46,.05);border-color:rgba(6,28,46,.12)}

.en-only-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:1px 7px;margin-right:6px;border-radius:999px;border:1px solid currentColor;opacity:.75;vertical-align:1px}


/* ===== Splash: kaligrafia (jina linajichora). Nyepesi: bila blur wala filter nzito. ===== */
.bayt-splash-screen{background:radial-gradient(ellipse at 50% 40%,#0d3350 0%,#06182a 72%);transition:opacity .45s ease;--sg:#e0c868;--sg2:#f3dd9a;--si:#f4f1e6;--sm:#9fb3c4}
[data-theme="light"] .bayt-splash-screen{background:radial-gradient(ellipse at 50% 40%,#ffffff 0%,#e8eff7 75%);--sg:#b8902a;--sg2:#8a6a16;--si:#0b2236;--sm:#4c647a}
.bayt-splash-screen.bayt-splash-hide{opacity:0;transform:none;filter:none;pointer-events:none}
.bayt-splash-body{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 20px}
.bayt-splash-calli{width:min(78vw,340px);height:auto;overflow:visible}
.bayt-splash-calli text{font-family:"Amiri","Noto Naskh Arabic","Geeza Pro","Traditional Arabic",serif;font-size:66px;fill:transparent;stroke:var(--sg);stroke-width:1.4;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420;animation:baytDraw 1.1s ease-in-out forwards,baytFill .5s ease .9s forwards}
@keyframes baytDraw{to{stroke-dashoffset:0}}
@keyframes baytFill{to{fill:var(--sg);stroke-width:.6}}
.bayt-splash-rule{width:0;height:2px;margin:8px 0 14px;background:linear-gradient(90deg,transparent,var(--sg),transparent);animation:baytRule .5s ease .9s forwards}
@keyframes baytRule{to{width:120px}}
.bayt-splash-title{font-family:Georgia,"Times New Roman",serif;letter-spacing:.2em;font-size:16px;text-transform:uppercase;font-weight:700;color:var(--si);opacity:0;animation:baytUp .45s ease 1.0s forwards}
.bayt-splash-title span{color:var(--sg);font-style:italic}
.bayt-splash-caption{margin-top:14px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--sm);opacity:0;animation:baytUp .45s ease 1.2s forwards}
@keyframes baytUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bayt-splash-calli text{animation:none;fill:var(--sg);stroke-dashoffset:0}.bayt-splash-rule{animation:none;width:120px}.bayt-splash-title,.bayt-splash-caption{animation:none;opacity:1}}

/* Header ya desktop: logo kushoto, viungo + Giza + akaunti kulia, vyote vimenyooka na container ya ukurasa */
@media (min-width: 861px) {
    .site-header {
        max-width: none;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .site-header .header-container {
        width: 100%;
        max-width: 1240px;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }
    .site-header .main-nav {
        flex: 1 1 auto;
        justify-content: flex-end;
        gap: 28px;
        min-width: 0;
    }
    .site-header .nav-links {
        gap: 6px;
    }
}

/* Kiungo cha wadhamini chini ya fomu ya Changia */
.support-sponsor-link{margin:14px 0 0;text-align:center;font-size:.82rem;color:var(--text-muted)}
.support-sponsor-link a{color:var(--gold);font-weight:700;text-decoration:none}

/* Mdhamini wa Hadithi ya Leo */
.rawdah-sponsor{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 14px;padding:8px 12px;border-radius:12px;border:1px dashed var(--border-color);background:rgba(255,255,255,.03);font-size:.8rem;line-height:1.35;color:var(--text-secondary);text-decoration:none}
.rawdah-sponsor-label{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.rawdah-sponsor-logo{width:28px;height:28px;border-radius:8px;object-fit:cover;flex:none}
.rawdah-sponsor-initial{display:inline-flex;align-items:center;justify-content:center;background:var(--gold);color:#07293f;font-weight:800;font-size:.9rem}
[data-theme="light"] .rawdah-sponsor-initial{color:#fff}
.rawdah-sponsor-name{font-weight:800;color:var(--text-primary)}
.rawdah-sponsor-tag{color:var(--text-secondary)}
.rawdah-sponsor-invite{justify-content:center;font-size:.74rem;color:var(--text-muted)}

/* Mdhamini Mkuu: mstari mwembamba (mwanzo na kurasa za hadith) */
.sponsor-strip-wrap{max-width:1240px;margin:18px auto 0;padding:0 24px}
.reader-shell .sponsor-strip-wrap{max-width:none;padding:0;margin:16px 0}
.sponsor-strip{justify-content:center;margin:0}

/* Desktop nyembamba (861-1288px): nafasi ya pembeni ili header, hero na kadi visigonge kingo */
@media (min-width:861px) and (max-width:1288px){
.site-header .header-container,.hero,.library-summary{width:calc(100% - 48px)}
}

/* Maelezo madogo chini ya chaguo la lugha ya hadith */
.drawer-lang-note{margin:8px 2px 0;font-size:.74rem;line-height:1.4;color:var(--text-muted)}

/* Kadi za makusanyo ni viungo vya ukurasa wa mkusanyo */
a.rawdah-book-card{text-decoration:none;color:inherit}

/* Vichwa vya vitabu/mada kwa lugha 4: html[data-title-lang] huchagua span (default Kiswahili) */
[data-tl]{display:none}
html:not([data-title-lang]) [data-tl~="sw"],
html[data-title-lang="sw"] [data-tl~="sw"],
html[data-title-lang="en"] [data-tl~="en"],
html[data-title-lang="ar"] [data-tl~="ar"],
html[data-title-lang="es"] [data-tl~="es"]{display:inline}


/* ==========================================================================
   Floating Feedback Widget & Modal
   ========================================================================== */
.feedback-floating-btn {
    position: fixed;
    left: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-surface-elevated, #161b22);
    border: 1.5px solid var(--gold);
    color: var(--gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 980;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 12px rgba(224, 200, 104, 0.2);
    transition: opacity .25s ease, transform .25s cubic-bezier(0.16, 1, 0.3, 1), background-color .2s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    padding: 0;
}

[data-theme="light"] .feedback-floating-btn {
    background: var(--bg-surface-elevated, #ffffff);
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 8px 24px rgba(10, 63, 102, 0.15), 0 0 12px rgba(10, 63, 102, 0.1);
}

.feedback-floating-btn:hover {
    transform: translateY(-2px) scale(1.04);
    background: var(--gold);
    color: var(--btn-gold-text, #07293f);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6), 0 0 18px rgba(224, 200, 104, 0.35);
}

[data-theme="light"] .feedback-floating-btn:hover {
    background: var(--gold);
    color: #ffffff;
}

.feedback-floating-btn:active {
    transform: scale(0.94);
}

.feedback-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.feedback-btn-icon svg {
    width: 20px;
    height: 20px;
}

.feedback-btn-text {
    display: none !important;
}

@media (max-width: 768px) {
    .feedback-floating-btn {
        left: 16px;
        bottom: calc(74px + env(safe-area-inset-bottom, 0px));
        width: 42px;
        height: 42px;
        border-radius: 50%;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 12px rgba(224, 200, 104, 0.15);
    }
}

/* Modal Backdrop */
.feedback-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    opacity: 0;
    transition: opacity .25s ease;
}

.feedback-modal-backdrop.is-open {
    opacity: 1;
}

/* Modal Dialog */
.feedback-modal-dialog {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
}

.feedback-modal-dialog.is-open {
    opacity: 1;
    visibility: visible;
}

.feedback-modal-content {
    width: 100%;
    max-width: 520px;
    background: var(--bg-surface, #0a3552);
    border: 1.5px solid var(--border-color);
    border-radius: 20px;
    padding: 28px 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    transform: scale(0.92) translateY(12px);
    transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 90vh;
    overflow-y: auto;
}

.feedback-modal-dialog.is-open .feedback-modal-content {
    transform: scale(1) translateY(0);
}

.feedback-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
}

.feedback-modal-eyebrow {
    font-size: 11px;
    font-weight: 800;
    color: var(--gold);
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.feedback-modal-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 2px 0 4px;
}

.feedback-modal-sub {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

.feedback-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
    flex-shrink: 0;
}

.feedback-close-btn:hover {
    color: var(--gold);
    border-color: var(--gold);
}

.feedback-form-group {
    margin-bottom: 16px;
}

.feedback-form-row {
    display: flex;
    gap: 12px;
}

@media (max-width: 540px) {
    .feedback-form-row {
        flex-direction: column;
        gap: 0;
    }
}

.feedback-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.feedback-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.feedback-chip {
    padding: 6px 12px;
    border-radius: 20px;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease;
}

.feedback-chip:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.feedback-chip.active {
    background: var(--gold-subtle);
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 0 10px rgba(224, 200, 104, 0.15);
}

.feedback-textarea,
.feedback-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--bg-body);
    border: 1.5px solid var(--border-color);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13.5px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.feedback-textarea:focus,
.feedback-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-subtle);
}

.feedback-modal-footer {
    margin-top: 20px;
}

.feedback-submit-btn {
    width: 100%;
    padding: 12px 20px;
    border-radius: 12px;
    background: var(--gold-gradient, linear-gradient(135deg, #f0dc8c 0%, #e0c868 60%, #c09828 100%));
    color: var(--btn-gold-text, #07293f);
    font-size: 14px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(224, 200, 104, 0.25);
    transition: all .2s ease;
}

.feedback-submit-btn:hover {
    opacity: 0.95;
    transform: translateY(-1px);
}

.feedback-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.feedback-error {
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 14px;
}

.feedback-success {
    text-align: center;
    padding: 24px 10px;
}

.feedback-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.15);
    border: 1.5px solid #10b981;
    color: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.feedback-success-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.feedback-success-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
    max-width: 400px;
    margin: 0 auto;
}