/**
 * =============================================================================
 * MUSE & WHITE-LABEL DESIGN SYSTEM V2 — UNIVERSAL OVERRIDE LAYER
 * QuranMarketation V2 Enterprise
 *
 * ARCHITECTURE:
 *   design-tokens.css (DTCG Tokens) → custom-ui.css (Overrides & Components) → <style> (PHP Brand Vars)
 *
 * MISSION:
 *   - Eliminate 100% of legacy hardcoded colors, transparency artifacts, and contrast bugs
 *   - Provide solid, opaque modal surfaces with zero background bleed-through
 *   - Implement high-contrast typography in both light and dark modes (WCAG 2.2 AA)
 *   - Unify inputs, cards, tables, navigation, dropdowns, and buttons across all panels
 * =============================================================================
 */

/* -----------------------------------------------------------------------------
   0. CORE RESETS & GLOBAL SETUP
   ----------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

[x-cloak] {
    display: none !important;
}

html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
}

/* Accessible & brand-themed custom scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* =============================================================================
   1. GLOBAL CANVAS & FOUNDATION
   ============================================================================= */
html:not(.dark) {
    color-scheme: light;
}
html:not(.dark) body {
    background-color: var(--bg-canvas) !important;
    color: var(--text-primary) !important;
}

html.dark {
    color-scheme: dark;
}
html.dark body {
    background-color: var(--bg-canvas) !important;
    color: var(--text-primary) !important;
}

/* Universal mapping for legacy background color utilities */
[class*="bg-[#010d0a]"],
[class*="bg-[#010705]"],
[class*="bg-[#011410]"],
[class*="bg-[#012b23]"],
[class*="bg-[#021a14]"],
[class*="bg-[#022c22]"],
[class*="bg-[#082019]"],
[class*="bg-[#0b0f19]"] {
    background-color: var(--bg-canvas) !important;
}

/* =============================================================================
   2. CARDS & ELEVATED SURFACES
   ============================================================================= */
.glass,
.glass-card,
.glass-modal,
.stat-card,
.quick-action-card,
.card,
.bg-brand-surface,
.bg-card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: var(--card-shadow) !important;
    border-radius: var(--radius-xl);
}

.stat-card:hover,
.quick-action-card:hover,
.card:hover {
    box-shadow: var(--card-shadow-hover) !important;
    border-color: rgba(var(--brand-primary-rgb, 5, 150, 105), 0.35) !important;
    transform: translateY(-2px);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Flatten legacy gradient card backgrounds into clean tokenized surfaces */
[class*="from-[#022c22]"],
[class*="from-[#010d0a]"],
[class*="from-[#021a14]"],
[class*="via-[#010d0a]"],
[class*="to-[#022c22]"] {
    background: var(--card-bg) !important;
    background-image: none !important;
}

/* =============================================================================
   3. MODAL ARCHITECTURE (Zero Background Bleedthrough & Absolute Contrast)
   ============================================================================= */

/* 1. The Backdrop: Pure dimming overlay for all modal containers */
.fixed.inset-0[class*="bg-"],
.fixed.inset-0[class*="backdrop"],
.fixed.inset-0[class*="setting-input-bg"],
.fixed.inset-0[class*="bg-surface"],
#confirmModal,
[id*="Modal"].fixed,
[id*="modal"].fixed,
[x-show*="Modal"].fixed,
[x-show*="modal"].fixed {
    background-color: var(--modal-backdrop) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 1000 !important;
}

/* 2. The Modal Panel / Card: 100% Solid, Opaque, High-Contrast Surface */
.glass-modal,
.wb-card,
.modal-box,
.modal-inner,
.modal-card,
.modal-content,
[role="dialog"],
#confirmModal > div,
.fixed.inset-0 > div:not(.fixed),
.fixed.inset-0 > form,
[id*="Modal"] > div:not(.fixed),
[id*="modal"] > div:not(.fixed),
[x-show*="Modal"] > div:not(.fixed),
[x-show*="modal"] > div:not(.fixed) {
    background-color: var(--modal-bg) !important;
    border: 1px solid var(--modal-border) !important;
    box-shadow: var(--modal-shadow) !important;
    color: var(--modal-fg) !important;
    border-radius: var(--radius-2xl) !important;
    opacity: 1 !important;
}

/* Data cards inside modals and user profiles */
.data-card {
    background-color: var(--bg-surface-muted) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-xl);
}
.data-label {
    color: var(--text-muted) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
}
.data-value {
    color: var(--text-primary) !important;
    font-weight: var(--font-weight-bold);
}

/* Ensure modal titles and messages are crisp and clear */
[id*="Modal"] h1, [id*="Modal"] h2, [id*="Modal"] h3, [id*="Modal"] h4,
[id*="modal"] h1, [id*="modal"] h2, [id*="modal"] h3, [id*="modal"] h4,
[x-show*="Modal"] h1, [x-show*="Modal"] h2, [x-show*="Modal"] h3,
[x-show*="modal"] h1, [x-show*="modal"] h2, [x-show*="modal"] h3,
#confirmTitle {
    color: var(--modal-fg) !important;
}
[id*="Modal"] p, [id*="modal"] p, [x-show*="Modal"] p, [x-show*="modal"] p, #confirmMessage {
    color: var(--modal-muted-fg) !important;
}


/* 3. Decorative Blobs: Suppress all blur blobs that cause color pollution */
.rounded-full.blur-\[60px\],
.rounded-full.blur-\[80px\],
.rounded-full.blur-\[100px\],
.rounded-full.blur-\[120px\],
[class*="blur-[60px]"].absolute,
[class*="blur-[80px]"].absolute,
[class*="blur-[100px]"].absolute,
[class*="blur-[120px]"].absolute,
.absolute.-top-24,
.absolute.-top-32,
.absolute.-bottom-24,
.absolute.-bottom-32 {
    display: none !important;
}

/* =============================================================================
   4. FORM INPUTS, TEXTAREAS, SELECTS & LABELS
   ============================================================================= */
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]),
select,
textarea,
.setting-input,
.setting-input-bg {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--input-fg) !important;
    border-radius: var(--input-radius) !important;
    padding: 0.625rem 1rem !important;
    font-size: var(--font-size-sm) !important;
    line-height: 1.5 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]):focus,
select:focus,
textarea:focus,
.setting-input:focus,
.setting-input-bg:focus {
    outline: none !important;
    border-color: var(--input-focus-border) !important;
    box-shadow: var(--input-focus-ring) !important;
    background-color: var(--input-bg) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--input-placeholder) !important;
}

select option {
    background-color: var(--input-bg);
    color: var(--input-fg);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--brand-primary, #059669) !important;
    cursor: pointer;
}

label,
.setting-label {
    color: var(--label-fg) !important;
    font-weight: var(--font-weight-medium);
}

/* Catch transparent or alpha-based input classes */
[class*="bg-transparent"],
[class*="bg-white/5"],
[class*="bg-white/10"],
[class*="bg-[#010d0a]/"] {
    background-color: var(--input-bg) !important;
    color: var(--input-fg) !important;
    border-color: var(--input-border) !important;
}

/* =============================================================================
   5. BUTTONS & ACTIONS
   ============================================================================= */

/* Primary Action Buttons */
button[type="submit"]:not(.btn-cancel):not(#confirmCancelBtn):not([class*="bg-red-"]):not([class*="bg-slate-"]):not([class*="bg-gray-"]):not([class*="bg-white/"]),
.btn-primary,
a.btn-primary,
#confirmOkBtn {
    background: var(--btn-primary-bg) !important;
    background-image: none !important;
    color: var(--btn-primary-fg) !important;
    box-shadow: var(--btn-primary-shadow) !important;
    border-radius: var(--radius-lg);
    font-weight: var(--font-weight-bold);
    transition: filter 0.15s ease, transform 0.1s ease !important;
}

button[type="submit"]:not(.btn-cancel):not(#confirmCancelBtn):not([class*="bg-red-"]):not([class*="bg-slate-"]):not([class*="bg-gray-"]):not([class*="bg-white/"]):hover,
.btn-primary:hover,
#confirmOkBtn:hover {
    filter: brightness(0.90) !important;
}

/* Secondary & Cancel Buttons */
#confirmCancelBtn,
.btn-secondary,
.btn-cancel {
    background-color: var(--btn-secondary-bg) !important;
    color: var(--btn-secondary-fg) !important;
    border: 1px solid var(--btn-secondary-border) !important;
    border-radius: var(--radius-lg);
    font-weight: var(--font-weight-semibold);
}

/* Danger Buttons */
.btn-danger,
button[class*="bg-red-6"],
button[class*="bg-red-7"] {
    background-color: var(--btn-danger-bg) !important;
    color: var(--btn-danger-fg) !important;
    border-radius: var(--radius-lg);
}

/* =============================================================================
   6. NAVIGATION & SIDEBAR
   ============================================================================= */
aside#sidebar,
.sidebar,
nav#sidebar {
    background-color: var(--nav-bg) !important;
    border-inline-end: 1px solid var(--nav-border) !important;
}

aside#sidebar h3,
.sidebar h3 {
    color: var(--nav-section-fg) !important;
    border-color: var(--nav-border) !important;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.sidebar-user-box,
aside#sidebar .sidebar-user-box {
    background-color: var(--bg-surface-muted) !important;
    border: 1px solid var(--nav-border) !important;
    border-radius: var(--radius-xl);
}

.nav-item {
    color: var(--nav-item-fg) !important;
    border-color: transparent !important;
    border-radius: var(--radius-lg);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-item:hover {
    background-color: var(--nav-item-hover-bg) !important;
    color: var(--nav-item-hover-fg) !important;
}

.nav-item.active {
    background-color: var(--nav-item-active-bg) !important;
    color: var(--nav-item-active-fg) !important;
    border-inline-start: 3px solid var(--nav-item-active-bar) !important;
    font-weight: var(--font-weight-bold) !important;
}

.nav-badge {
    background-color: var(--nav-badge-bg) !important;
    color: var(--nav-badge-fg) !important;
    border-radius: var(--radius-full);
}

.logout-btn {
    color: var(--text-danger) !important;
}
.logout-btn:hover {
    background-color: var(--bg-danger) !important;
}

/* Topbar Header Navigation */
header nav,
nav.topbar,
header > nav {
    background-color: var(--topbar-bg) !important;
    border-bottom: 1px solid var(--topbar-border) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

/* =============================================================================
   7. BRAND & ACCENT COLOR PROPAGATION
   ============================================================================= */

/* Solid Emerald / Brand Variants */
.bg-emerald-500,
.bg-emerald-600,
.bg-emerald-700,
.bg-emerald-800,
.bg-emerald-900,
.bg-primary {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-fg) !important;
}

/* Transparent Brand Chips & Badges */
[class*="bg-emerald-"][class*="/"] {
    background-color: var(--badge-brand-bg) !important;
    color: var(--badge-brand-fg) !important;
    border: 1px solid var(--badge-brand-border) !important;
}

/* Brand Text */
[class*="text-emerald-"] {
    color: var(--text-brand) !important;
}

/* Brand Borders */
[class*="border-emerald-"] {
    border-color: rgba(var(--brand-primary-rgb, 5, 150, 105), 0.30) !important;
}

/* Brand Focus Rings & Shadows */
[class*="ring-emerald-"] {
    --tw-ring-color: rgba(var(--brand-primary-rgb, 5, 150, 105), 0.40) !important;
}
[class*="shadow-emerald-"] {
    --tw-shadow-color: rgba(var(--brand-primary-rgb, 5, 150, 105), 0.30) !important;
}

/* Accent (Amber/Gold) */
.bg-amber-500,
.bg-amber-600,
.bg-accent {
    background-color: var(--brand-accent, #d97706) !important;
    color: #ffffff !important;
}
[class*="bg-amber-"][class*="/"] {
    background-color: var(--badge-accent-bg) !important;
    color: var(--badge-accent-fg) !important;
}
[class*="text-amber-"] {
    color: var(--text-accent) !important;
}
[class*="border-amber-"] {
    border-color: var(--brand-accent, #d97706) !important;
}

/* =============================================================================
   8. TYPOGRAPHY & ARABIANCURB ARABIC SYSTEM
   ============================================================================= */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
}

/* Arabic Specific Typography & Line-Heights (ArabianCurb Standards) */
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4 {
    font-family: 'Noto Kufi Arabic', 'IBM Plex Sans Arabic', 'Outfit', sans-serif;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
}

:lang(ar) p, :lang(ar) span, :lang(ar) label, :lang(ar) input, :lang(ar) select, :lang(ar) textarea {
    font-family: 'IBM Plex Sans Arabic', 'Outfit', sans-serif;
}

:lang(ar) p {
    line-height: 1.75 !important;
}

/* Isolated Bidi Islands (phone numbers, emails, currencies, codes) */
bdi, [dir="ltr"], .ltr-island {
    unicode-bidi: isolate;
    direction: ltr !important;
    text-align: left;
}


/* In Light Mode: Convert .text-white classes on general surfaces to high-contrast dark text */
html:not(.dark) .text-white:not(.btn-primary):not([class*="bg-emerald-"]):not([class*="bg-primary"]):not([class*="bg-amber-"]):not([class*="bg-red-"]):not([class*="bg-blue-"]):not(.btn-danger):not(#confirmOkBtn):not([type="submit"]):not(.nav-badge),
html:not(.dark) [class*="text-white/"]:not(.btn-primary):not([class*="bg-emerald-"]):not([class*="bg-primary"]):not([class*="bg-amber-"]):not([class*="bg-red-"]):not([class*="bg-blue-"]):not(.btn-danger):not(#confirmOkBtn):not([type="submit"]):not(.nav-badge) {
    color: var(--text-primary) !important;
}

/* Ensure all buttons with colored backgrounds have pure white / accessible text */
.btn-primary,
a.btn-primary,
button[type="submit"]:not(.btn-cancel):not(#confirmCancelBtn),
#confirmOkBtn,
.bg-primary,
.bg-emerald-600,
.bg-emerald-700,
.bg-amber-600,
.btn-danger,
.nav-badge {
    color: #ffffff !important;
}
.btn-primary *,
a.btn-primary *,
button[type="submit"]:not(.btn-cancel):not(#confirmCancelBtn) *,
#confirmOkBtn * {
    color: inherit !important;
}

/* In Dark Mode: High-contrast light text */
html.dark .text-white {
    color: #ffffff !important;
}
html.dark [class*="text-white/9"] { color: rgba(255, 255, 255, 0.90) !important; }
html.dark [class*="text-white/8"] { color: rgba(255, 255, 255, 0.80) !important; }
html.dark [class*="text-white/7"] { color: rgba(255, 255, 255, 0.70) !important; }
html.dark [class*="text-white/6"] { color: rgba(255, 255, 255, 0.60) !important; }


/* Secondary & Muted Grays */
[class*="text-gray-100"], [class*="text-slate-100"],
[class*="text-gray-200"], [class*="text-slate-200"],
[class*="text-gray-300"], [class*="text-slate-300"] {
    color: var(--text-secondary) !important;
}

[class*="text-gray-400"], [class*="text-slate-400"],
[class*="text-gray-500"], [class*="text-slate-500"],
[class*="text-gray-600"], [class*="text-slate-600"] {
    color: var(--text-muted) !important;
}

/* =============================================================================
   9. TABLES & DATA GRIDS
   ============================================================================= */
table {
    background-color: var(--table-bg) !important;
    border-collapse: separate;
    border-spacing: 0;
}
thead, thead tr {
    background-color: var(--table-th-bg) !important;
}
thead th {
    background-color: var(--table-th-bg) !important;
    color: var(--table-th-fg) !important;
    border-bottom: 1px solid var(--table-th-border) !important;
    font-weight: var(--font-weight-bold) !important;
    font-size: var(--font-size-xs) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
tbody td {
    background-color: var(--table-bg) !important;
    color: var(--table-td-fg) !important;
    border-bottom: 1px solid var(--table-td-border) !important;
}
tbody tr:hover td {
    background-color: var(--table-row-hover-bg) !important;
}

/* =============================================================================
   10. DROPDOWNS & FLOATING MENUS
   ============================================================================= */
[x-show][class*="absolute"],
.dropdown-menu,
.absolute[class*="w-80"],
.absolute[class*="w-96"] {
    background-color: var(--dropdown-bg) !important;
    border: 1px solid var(--dropdown-border) !important;
    box-shadow: var(--dropdown-shadow) !important;
    border-radius: var(--radius-xl);
}

.dropdown-item:hover,
[class*="hover:bg-white/5"]:hover,
[class*="hover:bg-white/10"]:hover {
    background-color: var(--dropdown-item-hover) !important;
}

/* =============================================================================
   11. BADGES & STATUS INDICATORS
   ============================================================================= */
.badge, [class*="badge-"] {
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-full);
    padding: 0.25rem 0.625rem;
    font-size: 0.70rem;
    line-height: 1;
}

/* Success / Active */
[class*="bg-green-"][class*="/"],
.badge-success, .badge-active {
    background-color: var(--badge-success-bg) !important;
    color: var(--badge-success-fg) !important;
    border: 1px solid var(--border-success) !important;
}

/* Warning / Pending */
[class*="bg-yellow-"][class*="/"],
[class*="bg-orange-"][class*="/"],
.badge-warning, .badge-pending {
    background-color: var(--badge-warning-bg) !important;
    color: var(--badge-warning-fg) !important;
    border: 1px solid var(--border-warning) !important;
}

/* Danger / Rejected */
[class*="bg-red-"][class*="/"],
.badge-danger {
    background-color: var(--badge-danger-bg) !important;
    color: var(--badge-danger-fg) !important;
    border: 1px solid var(--border-danger) !important;
}

/* Info / Active */
[class*="bg-blue-"][class*="/"],
[class*="bg-sky-"][class*="/"],
.badge-info {
    background-color: var(--badge-info-bg) !important;
    color: var(--badge-info-fg) !important;
    border: 1px solid var(--border-info) !important;
}

/* Status Text Colors */
.text-red-400, .text-red-500, .text-red-600       { color: var(--text-danger) !important; }
.text-green-400, .text-green-500, .text-green-600 { color: var(--text-success) !important; }
.text-yellow-400, .text-yellow-500, .text-yellow-600 { color: var(--text-warning) !important; }
.text-blue-400, .text-blue-500, .text-blue-600   { color: var(--text-info) !important; }

/* =============================================================================
   12. BORDERS & DIVIDERS
   ============================================================================= */
[class*="border-white/"],
[class*="divide-white/"] > * + * {
    border-color: var(--border-subtle) !important;
}

html:not(.dark) [class*="border-white"],
html:not(.dark) [class*="border-slate-7"],
html:not(.dark) [class*="border-slate-8"] {
    border-color: var(--border-subtle) !important;
}

html.dark [class*="border-slate-7"],
html.dark [class*="border-slate-8"] {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* =============================================================================
   13. FOOTER
   ============================================================================= */
footer,
.system-footer {
    background-color: var(--footer-bg) !important;
    border-top: 1px solid var(--footer-border) !important;
    color: var(--footer-fg) !important;
}
footer strong, footer h2, footer h3, footer h4 { color: var(--text-primary) !important; }
footer p, footer span:not([class*="text-brand"]) { color: var(--footer-fg) !important; }
footer a { color: var(--footer-link) !important; }

/* Social Icons */
footer [class*="bg-card"],
footer [class*="bg-[#"] {
    background-color: var(--bg-surface-muted) !important;
    border: 1px solid var(--border-subtle) !important;
}

/* =============================================================================
   14. MOBILE RESPONSIVENESS & SIDEBAR COLLAPSE
   ============================================================================= */
.sidebar-is-collapsed #sidebar {
    width: 5rem !important;
    padding: 0.5rem !important;
}
.sidebar-is-collapsed #sidebar .sidebar-text { display: none !important; }
.sidebar-is-collapsed #sidebar .nav-item     { justify-content: center !important; padding: 0.75rem !important; }
.sidebar-is-collapsed #sidebar .sidebar-user-box { padding: 0.5rem !important; justify-content: center !important; }
.sidebar-is-collapsed #sidebar .nav-icon-container { margin: 0 !important; }
.sidebar-is-collapsed #sidebar .sidebar-header { justify-content: center !important; }
.sidebar-is-collapsed #sidebar .logout-btn    { justify-content: center !important; }

#sidebar {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
}

#sidebarToggleBtn {
    position: fixed;
    top: 7rem;
    z-index: 40;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-muted);
    box-shadow: var(--card-shadow);
    border-radius: var(--radius-full);
}
#sidebarToggleBtn:hover {
    color: var(--text-brand);
    border-color: var(--border-brand);
}

/* Mobile Bottom Navigation */
.fixed.bottom-0.left-0.right-0[class*="border-t"] {
    background-color: var(--topbar-bg) !important;
    border-top: 1px solid var(--topbar-border) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* Mobile Drawer */
.mobile-drawer,
#mobileDrawer,
.fixed.top-0.right-0.bottom-0.w-80,
.fixed.top-0.left-0.bottom-0.w-80 {
    background-color: var(--nav-bg) !important;
    border-inline-end: 1px solid var(--nav-border) !important;
}

/* =============================================================================
   15. TOKEN UTILITY CLASSES (Convenience classes for PHP templates)
   ============================================================================= */
.bg-canvas        { background-color: var(--bg-canvas) !important; }
.bg-surface       { background-color: var(--bg-surface) !important; }
.bg-surface-muted { background-color: var(--bg-surface-muted) !important; }
.bg-brand-subtle  { background-color: var(--bg-brand-subtle) !important; }
.text-brand       { color: var(--text-brand) !important; }
.border-brand     { border-color: var(--border-brand) !important; }
.border-card-border { border-color: var(--card-border) !important; }

/* WhatsApp floating button preservation */
a[href*="wa.me"],
a[href*="whatsapp.com"],
.bg-\[\#25D366\] {
    background-color: #25D366 !important;
    color: #ffffff !important;
}

/* =============================================================================
   16. CELESTIAL QURANIC NIGHT SKY ATMOSPHERE (تأثيرات الليل والسكينة)
   ============================================================================= */
html.dark .quran-night-sky {
    background-image: 
        radial-gradient(1.5px 1.5px at 40px 60px, rgba(255, 255, 255, 0.45), rgba(0,0,0,0)),
        radial-gradient(1px 1px at 180px 120px, rgba(255, 255, 255, 0.35), rgba(0,0,0,0)),
        radial-gradient(2px 2px at 320px 240px, rgba(253, 230, 138, 0.50), rgba(0,0,0,0)),
        radial-gradient(1px 1px at 480px 90px, rgba(255, 255, 255, 0.30), rgba(0,0,0,0)),
        radial-gradient(2px 2px at 640px 310px, rgba(255, 255, 255, 0.40), rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 800px 170px, rgba(253, 230, 138, 0.45), rgba(0,0,0,0)),
        radial-gradient(1px 1px at 960px 70px, rgba(255, 255, 255, 0.35), rgba(0,0,0,0)),
        radial-gradient(2px 2px at 1120px 260px, rgba(255, 255, 255, 0.40), rgba(0,0,0,0)),
        radial-gradient(1px 1px at 1260px 140px, rgba(255, 255, 255, 0.30), rgba(0,0,0,0));
    background-repeat: repeat;
    background-size: 1300px 450px;
}

@keyframes celestial-twinkle {
    0%, 100% { opacity: 0.25; transform: scale(0.85); }
    50% { opacity: 0.95; transform: scale(1.15); }
}

.night-star {
    position: absolute;
    border-radius: 9999px;
    background-color: #ffffff;
    box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.5);
    animation: celestial-twinkle 4s ease-in-out infinite;
    pointer-events: none;
}