body {
        /* font-family: "Source Serif 4", serif; */
        font-family: "Roboto";
        /* background-color: #f8f6f2; */
        background-color: #272728;
        color: #333;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        margin: 0;
        padding: 0;
        scroll-behavior: auto;
      }
      /* ============================================================
         Accessibility: text-blue-500 (#3b82f6) fails WCAG AA contrast
         on dark backgrounds:
           - Page bg #272728: ratio 3.67:1 ❌
           - Blockquote bg #3a3b3c: ratio 2.64:1 ❌
         Override to blue-300 (#93c5fd):
           - Page bg #272728: ratio 7.93:1 ✅
           - Blockquote bg #3a3b3c: ratio 5.71:1 ✅
         ============================================================ */
      .text-blue-500 {
        color: #93c5fd !important; /* blue-300 — passes WCAG AA on all dark backgrounds */
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 2px;
      }

      /* CSS Custom Properties for Arabic Font Selection */
      :root {
        --arabic-font-family: "Amiri", serif;
      }

      /* Font variations based on data attribute */
      [data-arabic-font="amiri-quran"] {
        --arabic-font-family: "Amiri Quran", serif;
      }

      [data-arabic-font="scheherazade"] {
        --arabic-font-family: "Scheherazade New", serif;
      }

      [data-arabic-font="noto-naskh"] {
        --arabic-font-family: "Noto Naskh Arabic", serif;
      }

      .font-amiri {
        font-family: var(--arabic-font-family);        
      }
      h1,
      h2,
      h3 {
        font-weight: 700;
        color: #2c3e50;
        word-wrap: break-word;
        overflow-wrap: break-word;
      }
      h1 {
        /* border-bottom: 2px solid #d3c1a4; */
        padding-bottom: 0.5rem;
        font-size: clamp(1.5rem, 4vw, 2.5rem);
      }
      h2 {
        /* border-bottom: 1px solid #e0d8c9; */
        padding-bottom: 0.5rem;
        font-size: clamp(1.25rem, 3vw, 2rem);
      }
      h2.no-border {
        border-bottom: none;
      }
      h3 {
        font-size: clamp(1.1rem, 2.5vw, 1.5rem);
      }
      .arabic-text {
        font-family: "Amiri", serif;
        font-size: clamp(1.2rem, 4vw, 1.5rem);
        direction: rtl;
        color: #2c3e50;
        line-height: 1.8;
      }
      .reference-link {
        color: #2980b9;
        font-weight: 600;
        text-decoration: none;
        background-color: #ecf0f1;
        padding: 0.1rem 0.4rem;
        border-radius: 4px;
        transition: background-color 0.2s;
        white-space: nowrap;
      }
      .reference-link:hover {
        background-color: #d4e6f1;
        color: #34d399 !important;
          /* emerald-400 */
        text-decoration: underline;
      }
      .ref-bracket {
        color: inherit;
        background: transparent;
        padding: 0 2px;
        user-select: none;
      }
      html {
        scroll-behavior: smooth;
        scroll-padding-top: 0;
      }
      /* References: numbering, layout, and targeting */
      #references ol {
        list-style: none;
        padding-left: 0;
        counter-reset: reference-counter;
      }

      #references li {
        counter-increment: reference-counter;
        position: relative;
        /* allow room for up to 3-digit markers without overlapping text */
        padding-left: 2.75rem;
        margin: 0.5rem 0;
        scroll-margin-top: 6rem;
      }

      #references li::before {
        content: counter(reference-counter) ".";
        position: absolute;
        left: 0;
        top: 0;
        color: #fff; /* gray-700 */
        font-weight: 600;
        width: 2.25rem; /* consistent gutter for 1–3 digits */
        display: inline-block;
      }

      #references li:target {
        background: #393b3b;
        border-left: 4px solid #34d399;
      }
      #references li:hover {
        color: #34d399 !important;
      }

      /* Inline citation styling (used across pages) */
      .citation {
        vertical-align: super;
        font-size: 0.6em;
      }

      a.cite-link {
        color: #1d4ed8; /* distinct from body text */
        text-decoration: none;
      }

/* Bullet list marker styling */
:deep(ul.list-disc li::marker) {
  color: #34d399;
  /* emerald-400 */
}


      a.cite-link:hover,
      a.cite-link:focus,
      a.cite-link:visited {
        color: #1d4ed8;
        text-decoration: underline;
        outline: none;
      }

      /* Interactive Ayah Styles */
      .ayah-container {
        /* border: 2px solid #e0d8c9; */
        border-radius: 0.75rem;
        /* background-color: #ffffff; */
        background-color: #303132;
        padding: 1rem;
        margin-bottom: 1.5rem;
        transition: all 0.3s ease;
      }
      @media (min-width: 768px) {
        .ayah-container {
          padding: 1.5rem;
        }
      }
      .ayah-container:hover {
        border-color: #d3c1a4;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
      .ayah-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
      }
      .ayah-number {
        /* background-color: #a88b68;
        color: white;
        width: 2.5rem;
        height: 2.5rem; */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        flex-shrink: 0;
      }
      .ayah-details {
        word-wrap: break-word;
        overflow-wrap: break-word;
      }
      .divine-dialogue {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 0.5rem;
        padding: 1rem;
        margin: 1rem 0;
        border-left: 4px solid #a88b68;
      }
      .servant-speech {
        background-color: #e3f2fd;
        border-left: 4px solid #2196f3;
        padding: 0.75rem;
        margin: 0.5rem 0;
        border-radius: 0.25rem;
      }
      .allah-response {
        background-color: #e8f5e8;
        border-left: 4px solid #4caf50;
        padding: 0.75rem;
        margin: 0.5rem 0;
        border-radius: 0.25rem;
      }

      /* Sidebar styles */
      .chart-container {
        position: relative;
        width: 100%;
        max-width: 280px;
        height: 280px;
        margin: auto;
      }
      @media (max-width: 1023px) {
        .chart-container {
          max-width: 200px;
          height: 200px;
        }
      }
      .nav-item.active {
        background-color: #d4c2ae;
        border-right-color: #a88b68;
        color: #2c3e50;
        font-weight: 700;
      }
      .content-card {
        background-color: #ffffff;
        border-radius: 0.75rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
          0 2px 4px -1px rgba(0, 0, 0, 0.06);
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
        opacity: 0;
        transform: translateY(20px);
      }
      .content-card.visible {
        opacity: 1;
        transform: translateY(0);
      }

      /* Table layout fixes for database-rendered content (accordion/introduction content only) */
      /* Exclude WordAnalysis component tables which have their own styling */
      .accordion-container table:not(.word-analysis-table),
      #introduction-content table:not(.word-analysis-table),
      .ayah-details table:not(.word-analysis-table) {
        width: 100% !important;
        border-collapse: collapse !important;
      }

      .accordion-container table:not(.word-analysis-table) th,
      .accordion-container table:not(.word-analysis-table) td,
      #introduction-content table:not(.word-analysis-table) th,
      #introduction-content table:not(.word-analysis-table) td,
      .ayah-details table:not(.word-analysis-table) th,
      .ayah-details table:not(.word-analysis-table) td {
        padding: 0.5rem 1rem !important;
        text-align: left !important;
        vertical-align: top !important;
      }

      /* Ensure equal column distribution for 3-column tables in accordion content */
      /* Only apply to tables that actually have 3 columns */
      .accordion-container table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child),
      .accordion-container table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child),
      #introduction-content table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child),
      #introduction-content table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child),
      .ayah-details table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child),
      .ayah-details table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) {
        table-layout: fixed !important;
      }

      .accordion-container table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr:first-child th:nth-child(1),
      .accordion-container table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr:first-child td:nth-child(1),
      .accordion-container table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr th:nth-child(1),
      .accordion-container table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr td:nth-child(1),
      .accordion-container table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr:first-child th:nth-child(1),
      .accordion-container table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr:first-child td:nth-child(1),
      .accordion-container table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr th:nth-child(1),
      .accordion-container table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr td:nth-child(1),
      #introduction-content table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr:first-child th:nth-child(1),
      #introduction-content table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr:first-child td:nth-child(1),
      #introduction-content table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr th:nth-child(1),
      #introduction-content table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr td:nth-child(1),
      #introduction-content table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr:first-child th:nth-child(1),
      #introduction-content table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr:first-child td:nth-child(1),
      #introduction-content table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr th:nth-child(1),
      #introduction-content table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr td:nth-child(1),
      .ayah-details table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr:first-child th:nth-child(1),
      .ayah-details table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr:first-child td:nth-child(1),
      .ayah-details table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr th:nth-child(1),
      .ayah-details table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr td:nth-child(1),
      .ayah-details table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr:first-child th:nth-child(1),
      .ayah-details table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr:first-child td:nth-child(1),
      .ayah-details table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr th:nth-child(1),
      .ayah-details table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr td:nth-child(1) {
        width: 33.33% !important;
      }

      .accordion-container table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr:first-child th:nth-child(2),
      .accordion-container table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr:first-child td:nth-child(2),
      .accordion-container table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr th:nth-child(2),
      .accordion-container table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr td:nth-child(2),
      .accordion-container table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr:first-child th:nth-child(2),
      .accordion-container table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr:first-child td:nth-child(2),
      .accordion-container table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr th:nth-child(2),
      .accordion-container table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr td:nth-child(2),
      #introduction-content table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr:first-child th:nth-child(2),
      #introduction-content table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr:first-child td:nth-child(2),
      #introduction-content table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr th:nth-child(2),
      #introduction-content table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr td:nth-child(2),
      #introduction-content table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr:first-child th:nth-child(2),
      #introduction-content table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr:first-child td:nth-child(2),
      #introduction-content table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr th:nth-child(2),
      #introduction-content table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr td:nth-child(2),
      .ayah-details table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr:first-child th:nth-child(2),
      .ayah-details table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr:first-child td:nth-child(2),
      .ayah-details table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr th:nth-child(2),
      .ayah-details table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr td:nth-child(2),
      .ayah-details table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr:first-child th:nth-child(2),
      .ayah-details table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr:first-child td:nth-child(2),
      .ayah-details table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr th:nth-child(2),
      .ayah-details table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr td:nth-child(2) {
        width: 33.33% !important;
      }

      .accordion-container table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr:first-child th:nth-child(3),
      .accordion-container table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr:first-child td:nth-child(3),
      .accordion-container table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr th:nth-child(3),
      .accordion-container table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr td:nth-child(3),
      .accordion-container table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr:first-child th:nth-child(3),
      .accordion-container table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr:first-child td:nth-child(3),
      .accordion-container table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr th:nth-child(3),
      .accordion-container table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr td:nth-child(3),
      #introduction-content table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr:first-child th:nth-child(3),
      #introduction-content table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr:first-child td:nth-child(3),
      #introduction-content table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr th:nth-child(3),
      #introduction-content table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr td:nth-child(3),
      #introduction-content table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr:first-child th:nth-child(3),
      #introduction-content table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr:first-child td:nth-child(3),
      #introduction-content table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr th:nth-child(3),
      #introduction-content table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr td:nth-child(3),
      .ayah-details table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr:first-child th:nth-child(3),
      .ayah-details table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr:first-child td:nth-child(3),
      .ayah-details table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr th:nth-child(3),
      .ayah-details table:not(.word-analysis-table):has(tr:first-child th:nth-child(3):last-child) tr td:nth-child(3),
      .ayah-details table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr:first-child th:nth-child(3),
      .ayah-details table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr:first-child td:nth-child(3),
      .ayah-details table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr th:nth-child(3),
      .ayah-details table:not(.word-analysis-table):has(tr:first-child td:nth-child(3):last-child) tr td:nth-child(3) {
        width: 33.33% !important;
      }

      /* Mobile-specific improvements */
      @media (max-width: 767px) {
        .arabic-text {
          font-size: 1.3rem;
          line-height: 2;
        }

        .ayah-header {
          flex-direction: column;
          text-align: center;
          gap: 0.75rem;
        }

        .ayah-header .text-center {
          order: 2;
          width: 100%;
        }

        .ayah-number {
          order: 1;
        }

        .ayah-container {
          padding: 1rem;
          margin-bottom: 1rem;
        }

        .accordion-container table:not(.word-analysis-table),
        #introduction-content table:not(.word-analysis-table),
        .ayah-details table:not(.word-analysis-table) {
          font-size: 0.875rem;
        }

        .accordion-container table:not(.word-analysis-table) th,
        .accordion-container table:not(.word-analysis-table) td,
        #introduction-content table:not(.word-analysis-table) th,
        #introduction-content table:not(.word-analysis-table) td,
        .ayah-details table:not(.word-analysis-table) th,
        .ayah-details table:not(.word-analysis-table) td {
          padding: 0.5rem 0.5rem !important;
        }

        .grid.grid-cols-1.md\\:grid-cols-2 {
          grid-template-columns: 1fr;
        }

        .overflow-x-auto {
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none; /* Firefox */
          -ms-overflow-style: none;  /* IE and Edge */
        }

        /* Hide scrollbar for Chrome, Safari and Opera */
        .overflow-x-auto::-webkit-scrollbar {
          display: none;
        }

        /* Ensure content is fully visible on mobile */
        .space-y-4 > * {
          margin-bottom: 1rem;
        }

        .space-y-4 > *:last-child {
          margin-bottom: 0;
        }

        /* Improve touch targets */
        .ayah-container {
          min-height: 60px;
        }

        /* Better spacing for mobile */
        .text-base.lg\\:text-lg {
          font-size: 1rem;
          line-height: 1.6;
        }

        /* Ensure proper viewport handling — IMPORTANT: do NOT put overflow-x: hidden
           on body or html, as it breaks position:fixed on iOS/Android when content
           overflows (e.g. long non-English text). Use #app instead. */
        #app {
          overflow-x: hidden;
        }

        main {
          padding: 1rem;
        }
      }

      /* Extra small screen improvements */
      @media (max-width: 480px) {
        .ayah-container {
          padding: 0.75rem;
          margin-bottom: 0.75rem;
        }

        .arabic-text {
          font-size: 1.2rem;
          line-height: 1.8;
        }

        .text-base.lg\\:text-lg {
          font-size: 0.9rem;
          line-height: 1.5;
        }

        .ayah-header {
          gap: 0.5rem;
        }

        .ayah-number {
          width: 2rem;
          height: 2rem;
          font-size: 0.875rem;
        }

        /* Ensure tables are scrollable on very small screens */
        .overflow-x-auto {
          max-width: 100vw;
          margin-left: -0.75rem;
          margin-right: -0.75rem;
          padding-left: 0.75rem;
          padding-right: 0.75rem;
        }
      }

      /* Touch-friendly improvements */
      .nav-item {
        min-height: 44px;
        display: flex;
        align-items: center;
      }

      /* Prevent zoom on input focus on iOS */
      input,
      select,
      textarea {
        font-size: 16px;
      }

      /* Smooth scrolling for iOS */
      @supports (-webkit-overflow-scrolling: touch) {
        html {
          -webkit-overflow-scrolling: touch;
        }
      }

      /* Go to Top Button Styles */
      .go-to-top-btn {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 60px;
        height: 60px;
        background-color: #a88b68;
        color: white;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(168, 139, 104, 0.3);
        transition: all 0.3s ease;
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
        z-index: 1000;
      }

      .go-to-top-btn.visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }

      .go-to-top-btn:hover {
        background-color: #8b7355;
        box-shadow: 0 6px 16px rgba(168, 139, 104, 0.4);
        transform: translateY(-2px);
      }

      .go-to-top-btn:active {
        transform: translateY(0);
      }

      .go-to-top-btn svg {
        width: 24px;
        height: 24px;
        transition: transform 0.2s ease;
      }

      .go-to-top-btn:hover svg {
        transform: translateY(-2px);
      }

      /* Mobile responsive adjustments */
      @media (max-width: 768px) {
        .go-to-top-btn {
          bottom: 20px;
          right: 20px;
          width: 50px;
          height: 50px;
        }

        .go-to-top-btn svg {
          width: 20px;
          height: 20px;
        }
      }

      /* Translation styles */
      .font-amiri,
      .arabic-text {
        font-family: var(--arabic-font-family) !important;
        direction: rtl !important;
      }

      /* Preserve Arabic text during translation */
      .font-amiri,
      .arabic-text {
        -webkit-translate: no;
        translate: no;
      }

      /* Tool Button Styles */
      .tool-btn:hover {
        background-color: rgba(44, 95, 44, 0.1) !important;
        transform: scale(1.05);
      }

      .tool-btn:active {
        transform: scale(0.95);
      }

      /* Dark Mode Styles */
      body.dark-mode {
        background-color: #1a1a1a !important;
        color: #e0e0e0 !important;
      }

      body.dark-mode h1,
      body.dark-mode h2,
      body.dark-mode h3 {
        color: #f0f0f0 !important;
      }

      body.dark-mode .arabic-text {
        color: #f0f0f0 !important;
      }

      body.dark-mode .content-card {
        background-color: #2d2d2d !important;
        color: #e0e0e0 !important;
      }

      body.dark-mode .ayah-container {
        background-color: #2d2d2d !important;
        border-color: #444 !important;
        color: #e0e0e0 !important;
      }

      /* Dark mode fix: ensure Hadith Reference blocks (using bg-gray-50) are readable */
      body.dark-mode .bg-gray-50 {
        background-color: #2d2d2d !important;
        color: #e0e0e0 !important;
        border-left-color: #a88b68 !important;
      }
      /* Dark mode fix: Ayah 1 Fiqh Rulings header uses bg-stone-50 */
      body.dark-mode .bg-stone-50 {
        background-color: #2d2d2d !important;
        color: #e0e0e0 !important;
      }

      body.dark-mode .ayah-container:hover {
        border-color: #666 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
      }

      body.dark-mode .divine-dialogue {
        background: linear-gradient(
          135deg,
          #2d2d2d 0%,
          #1a1a1a 100%
        ) !important;
        border-left-color: #666 !important;
      }

      body.dark-mode .servant-speech {
        background-color: #1e3a5f !important;
        border-left-color: #4a90e2 !important;
      }

      body.dark-mode .allah-response {
        background-color: #1e4d1e !important;
        border-left-color: #4caf50 !important;
      }

      body.dark-mode #nav-panel {
        background-color: #2d2d2d !important;
        border-color: #444 !important;
      }

      body.dark-mode #tools-bar {
        background-color: #2d2d2d !important;
        border-color: #444 !important;
      }

      body.dark-mode .tool-btn {
        color: #e0e0e0 !important;
      }

      body.dark-mode .tool-btn:hover {
        background-color: rgba(224, 224, 224, 0.1) !important;
      }

      body.dark-mode .accordion-container table:not(.word-analysis-table),
      body.dark-mode #introduction-content table:not(.word-analysis-table),
      body.dark-mode .ayah-details table:not(.word-analysis-table) {
        background-color: #2d2d2d !important;
        color: #e0e0e0 !important;
      }

      body.dark-mode .accordion-container table:not(.word-analysis-table) th,
      body.dark-mode .accordion-container table:not(.word-analysis-table) td,
      body.dark-mode #introduction-content table:not(.word-analysis-table) th,
      body.dark-mode #introduction-content table:not(.word-analysis-table) td,
      body.dark-mode .ayah-details table:not(.word-analysis-table) th,
      body.dark-mode .ayah-details table:not(.word-analysis-table) td {
        border-color: #444 !important;
      }

      body.dark-mode .overflow-x-auto {
        background-color: #2d2d2d !important;
      }

      /* Dark mode: improve reference visibility and contrast */
      body.dark-mode .reference-link,
      body.dark-mode a.cite-link {
        background-color: transparent !important;
        color: #93c5fd !important; /* sky-300 */
        text-decoration-color: #93c5fd !important;
      }

      body.dark-mode .reference-link:hover,
      body.dark-mode a.cite-link:hover {
        color: #bfdbfe !important; /* sky-200 */
        text-decoration: underline !important;
      }

      body.dark-mode .ref-bracket,
      body.dark-mode .citation {
        color: #a5b4fc !important; /* indigo-300 for brackets/superscripts */
      }

      /* Dark mode fix: References section readability */
      body.dark-mode #references,
      body.dark-mode #references ol,
      body.dark-mode #references li {
        color: #e0e0e0 !important;
      }

      body.dark-mode #references h2 {
        color: #f0f0f0 !important;
      }

      body.dark-mode #references em {
        color: #f5f5f5 !important;
      }

      body.dark-mode #references li:target {
        background-color: #3a3a20 !important;
      }

      body.dark-mode .go-to-top-btn {
        background-color: #666 !important;
      }

      body.dark-mode .go-to-top-btn:hover {
        background-color: #888 !important;
      }

      /* Dark mode styles for navigation items */
      body.dark-mode .nav-item {
        color: #e0e0e0 !important;
      }

      body.dark-mode .nav-item:hover {
        background-color: rgba(224, 224, 224, 0.1) !important;
      }

      body.dark-mode .nav-item.active {
        background-color: #d4c2ae !important;
        color: #2c3e50 !important;
        font-weight: 700 !important;
      }

      /* Prevent translation of navigation items when English is detected */
      .nav-item[translate="no"] {
        translate: no !important;
        -webkit-translate: no !important;
      }



      .word-analysis-item {
        margin-bottom: 1rem;
        padding-left: 1rem;
        border-left: 3px solid #34d399;
      }

      /* Dark mode image visibility improvements */
      body.dark-mode .surah-info-card {
        background-color: #2d2d2d !important;
        border: 1px solid #444 !important;
      }

      body.dark-mode .surah-info-card h1 {
        color: #f0f0f0 !important;
      }

      body.dark-mode .surah-info-card p {
        color: #d0d0d0 !important;
      }

      /* Improve image visibility in dark mode by adding subtle background and filter */
      body.dark-mode img {
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 2px;
      }

      /* Specific improvements for progressive images */
      body.dark-mode .progressive-image,
      body.dark-mode [class*="progressive"],
      body.dark-mode img[src*="meccan"],
      body.dark-mode img[src*="madani"] {
        filter: brightness(1.1) contrast(1.1);
        background-color: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(0.5px);
      }

      /* Improve placeholder visibility in dark mode */
      body.dark-mode div[style*="background-image"] {
        filter: brightness(0.7) contrast(1.2);
      }

      /* Fix slate text colors in dark mode for better visibility */
      body.dark-mode .text-slate-600 {
        color: #d1d5db !important; /* gray-300 */
      }

      body.dark-mode .text-slate-700 {
        color: #f3f4f6 !important; /* gray-100 */
      }

      /* Ensure table headers are visible in dark mode */
      body.dark-mode .text-slate-600.uppercase {
        color: #e5e7eb !important; /* gray-200 */
      }

      /* Fix table body text in dark mode */
      body.dark-mode tbody.text-slate-700 {
        color: #e5e7eb !important; /* gray-200 */
      }

      /* Fix all white background containers in dark mode */
      body.dark-mode .bg-white {
        background-color: #2d2d2d !important;
        color: #e0e0e0 !important;
      }

      /* Ensure all text within white containers is visible in dark mode */
      body.dark-mode .bg-white p,
      body.dark-mode .bg-white div,
      body.dark-mode .bg-white span {
        color: #e0e0e0 !important;
      }

      /* Fix headings in white containers for dark mode */
      body.dark-mode .bg-white h1,
      body.dark-mode .bg-white h2,
      body.dark-mode .bg-white h3,
      body.dark-mode .bg-white h4,
      body.dark-mode .bg-white h5,
      body.dark-mode .bg-white h6 {
        color: #f0f0f0 !important;
      }

      /* Fix tables within white containers for dark mode */
      body.dark-mode .bg-white table {
        background-color: #2d2d2d !important;
      }

      /* Fix overflow containers with white backgrounds */
      body.dark-mode .overflow-x-auto.bg-white {
        background-color: #2d2d2d !important;
      }

      /* Fix blockquote text visibility in dark mode */
      body.dark-mode blockquote.text-gray-700 {
        color: #e5e7eb !important; /* gray-200 */
      }

      /* Fix colored boxes in dark mode - The Three Paths section */
      /* Maintain distinct colors while ensuring readability */
      body.dark-mode .bg-green-100 {
        background-color: #064e3b !important; /* dark green background */
        border: 1px solid #10b981 !important; /* green border */
      }

      body.dark-mode .text-green-800 {
        color: #86efac !important; /* light green text */
      }

      body.dark-mode .bg-red-100 {
        background-color: #7f1d1d !important; /* dark red background */
        border: 1px solid #ef4444 !important; /* red border */
      }

      body.dark-mode .text-red-800 {
        color: #fca5a5 !important; /* light red text */
      }

      body.dark-mode .bg-yellow-100 {
        background-color: #78350f !important; /* dark yellow/amber background */
        border: 1px solid #f59e0b !important; /* yellow border */
      }

      body.dark-mode .text-yellow-800 {
        color: #fde047 !important; /* light yellow text */
      }

      /* Fix table headers with slate backgrounds */
      body.dark-mode .bg-slate-100 {
        background-color: #374151 !important; /* gray-700 */
        color: #f3f4f6 !important; /* gray-100 */
      }

      body.dark-mode thead.bg-slate-100 th {
        color: #f3f4f6 !important; /* gray-100 */
      }

      /* Fix alternating table row backgrounds in dark mode */
      body.dark-mode .bg-slate-50 {
        background-color: #374151 !important; /* gray-700 - darker than regular rows */
      }

      body.dark-mode tr.bg-slate-50 {
        background-color: #374151 !important; /* gray-700 for alternating rows */
      }

      body.dark-mode tr.bg-slate-50 td {
        color: #f3f4f6 !important; /* light text for alternating rows */
      }

      /* Ensure regular table rows are visible too */
      body.dark-mode tbody tr {
        background-color: #2d2d2d !important; /* darker background for regular rows */
      }

      body.dark-mode tbody tr td {
        color: #e5e7eb !important; /* light text for regular rows */
        border-color: #4b5563 !important; /* gray-600 for borders */
      }

      /* Fix table borders in dark mode */
      body.dark-mode .border-slate-200 {
        border-color: #4b5563 !important; /* gray-600 */
      }
    
      /* App layout variables: mirrors main content width for aligning floating UI */
      :root {
        --main-width: 100vw;
      }
      @media (min-width: 1024px) { /* lg */
        :root { --main-width: 66.6667vw; }
      }
      @media (min-width: 1280px) { /* xl */
        :root { --main-width: 75vw; }
      }


.accordion-shadow-lg {
  box-shadow: 0px 4px 4px 0px #00000040;
}

/* Custom CSS for embossed effect */
.accordion-embossed {
  /* Inner shadow for embossed effect */
  box-shadow: 0px 4px 4px 0px #00000040, 0px 1px 1px 0px #00000040 inset;
}

.occurrence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 6px;
}

.occurrence-item {
  background: #303132;
  border: 1px solid #34d399;
  /* Slightly thicker border */
  padding: 8px 12px;
  /* More padding for better spacing */
  border-radius: 8px;
  /* More rounded corners */
  text-align: center;
  font-size: 12px;
  transition: all 0.2s ease;
  color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  /* Subtle shadow */
}

.occurrence-item strong {
  font-weight: bold;
  font-size: 14px;
  /* Make numbers slightly larger */
}

/* Global Economy UI - Diagram Styles */

/* Arrow styles with proper colors matching the design */
.arrow-up {
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 18px solid #3b82f6; /* blue-500 for Ayah 1 */
  margin: 0 auto;
}

.arrow-down {
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 18px solid #eab308; /* yellow-500 for Ayah 3 */
  margin: 0 auto;
}

.arrow-right {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid #22c55e; /* green-500 for Ayah 2 */
  margin: auto 0;
}

.arrow-left {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 18px solid #ef4444; /* red-500 for Ayah 4 */
  margin: auto 0;
}

/* Center circle styling */
.border-ardh-primary {
  border-color: #2d5a2e !important; /* Dark green border for center */
}

/* Impact node styles with colored left borders */
.border-l-blue-500 {
  border-left-color: #3b82f6 !important;
}

.border-l-yellow-500 {
  border-left-color: #eab308 !important;
}

.border-l-green-500,
.border-t-green-500 {
  border-left-color: #22c55e !important;
  border-top-color: #22c55e !important;
}

.border-l-red-500,
.border-t-red-500 {
  border-left-color: #ef4444 !important;
  border-top-color: #ef4444 !important;
}

/* Background colors for impact nodes */
.bg-blue-50 {
  background-color: #eff6ff !important;
}

.bg-yellow-50 {
  background-color: #fefce8 !important;
}

.bg-green-50 {
  background-color: #f0fdf4 !important;
}

.bg-red-50 {
  background-color: #fef2f2 !important;
}

/* Ayah node background colors */
.bg-blue-100 {
  background-color: #dbeafe !important;
}

.bg-yellow-100 {
  background-color: #fef9c3 !important;
}

.bg-green-100 {
  background-color: #dcfce7 !important;
}

.bg-red-100 {
  background-color: #fee2e2 !important;
}

/* Text colors for ayah nodes */
.text-blue-900 {
  color: #1e3a8a !important;
}

.text-blue-800 {
  color: #1e40af !important;
}

.text-yellow-900 {
  color: #713f12 !important;
}

.text-yellow-800 {
  color: #854d0e !important;
}

.text-green-900 {
  color: #14532d !important;
}

.text-green-800 {
  color: #166534 !important;
}

.text-red-900 {
  color: #7f1d1d !important;
}

.text-red-800 {
  color: #991b1b !important;
}

/* Connector line colors */
.bg-blue-200 {
  background-color: #bfdbfe !important;
}

.bg-yellow-200 {
  background-color: #fef08a !important;
}

.bg-green-200 {
  background-color: #bbf7d0 !important;
}

.bg-red-200 {
  background-color: #fecaca !important;
}

/* Ensure proper spacing and visibility */
.bg-white\/50 {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

/* Responsive adjustments for the diagram */
@media (max-width: 768px) {
  .arrow-up,
  .arrow-down {
    border-left-width: 10px;
    border-right-width: 10px;
  }
  
  .arrow-up {
    border-bottom-width: 15px;
  }
  
  .arrow-down {
    border-top-width: 15px;
  }
  
  .arrow-left,
  .arrow-right {
    border-top-width: 10px;
    border-bottom-width: 10px;
  }
  
  .arrow-left {
    border-right-width: 15px;
  }
  
  .arrow-right {
    border-left-width: 15px;
  }
}

/* Dark mode overrides for Global Economy UI */
body.dark-mode .bg-white\/50 {
  background-color: rgba(45, 45, 45, 0.8) !important;
}

body.dark-mode .bg-blue-50 {
  background-color: #1e3a8a !important;
}

body.dark-mode .bg-yellow-50 {
  background-color: #854d0e !important;
}

body.dark-mode .bg-green-50 {
  background-color: #166534 !important;
}

body.dark-mode .bg-red-50 {
  background-color: #991b1b !important;
}

body.dark-mode .bg-blue-100 {
  background-color: #1e40af !important;
}

body.dark-mode .bg-yellow-100 {
  background-color: #a16207 !important;
}

body.dark-mode .bg-green-100 {
  background-color: #15803d !important;
}

body.dark-mode .bg-red-100 {
  background-color: #b91c1c !important;
}

body.dark-mode .text-blue-900,
body.dark-mode .text-blue-800 {
  color: #dbeafe !important;
}

body.dark-mode .text-yellow-900,
body.dark-mode .text-yellow-800 {
  color: #fef9c3 !important;
}

body.dark-mode .text-green-900,
body.dark-mode .text-green-800 {
  color: #dcfce7 !important;
}

body.dark-mode .text-red-900,
body.dark-mode .text-red-800 {
  color: #fee2e2 !important;
}

body.dark-mode .text-gray-600 {
  color: #d1d5db !important;
}

body.dark-mode .text-gray-800 {
  color: #f3f4f6 !important;
}

                /* Custom scrollbar for a cleaner look */
                ::-webkit-scrollbar {
                  width: 8px;
                }
        
                ::-webkit-scrollbar-track {
                  background: #303132;
                }
        
                ::-webkit-scrollbar-thumb {
                  background: #4a4a4a;
                  border-radius: 4px;
                }
        
                ::-webkit-scrollbar-thumb:hover {
                  background: #64748b;
                }
        
                .connection-line {
                  position: relative;
                }
        
                @media (min-width: 1024px) {
                  .connection-arrow-right::after {
                    content: '→';
                    position: absolute;
                    right: -24px;
                    top: 50%;
                    transform: translateY(-50%);
                    font-size: 1.5rem;
                    color: #64748b;
                  }
        
                  .connection-arrow-left::before {
                    content: '←';
                    position: absolute;
                    left: -24px;
                    top: 50%;
                    transform: translateY(-50%);
                    font-size: 1.5rem;
                    color: #64748b;
                  }
                }
        
                .highlight-card {
                  /* Only transition opacity and box-shadow — NOT transform.
                     Transitioning 'all' causes getBoundingClientRect() to read mid-animation
                     positions when rapidly hovering, producing wrong offsets on tall columns (e.g. surah 104). */
                  transition: opacity 0.3s ease, box-shadow 0.3s ease;
                  opacity: 1;
                }
        
                .highlight-active {
                  box-shadow: 0 0 0 2px currentColor;
                  transform: scale(1.02);
                  opacity: 1 !important;
                }
        
                .dimmed {
                  opacity: 0.3 !important;
                }

                /* Mobile connection cards — slide in animation */
                .mobile-connection-card {
                  animation: slideIn 0.25s ease;
                }
        
                @keyframes slideIn {
                  from {
                    opacity: 0;
                    transform: translateY(-8px);
                  }
        
                  to {
                    opacity: 1;
                    transform: translateY(0);
                  }
                }
        
                .mobile-base-active {
                  box-shadow: 0 0 0 2px #6366f1;
                }
        
                /* Mobile ring colours for connection cards */
                .mob-ring-amber {
                  outline: 1.5px solid rgba(245, 158, 11, 0.6);
                }
        
                .mob-ring-emerald {
                  outline: 1.5px solid rgba(16, 185, 129, 0.6);
                }
        
                .mob-ring-indigo {
                  outline: 1.5px solid transparent;
                  transition: outline-color 0.2s;
                }
        
                .mob-ring-indigo.mobile-base-active {
                  outline-color: #6366f1;
                }

/* Badge spans inside mobile connection cards must not stretch full height */
.mobile-connection-card span:first-child,
.mobile-card span:first-child {
  align-self: flex-start;
}

/* Badge spans inside mobile detailed coherence list items */
.mob-detail-badge {
  align-self: flex-start;
}

/* Detailed Ayah-by-Ayah Coherence — badge wrapper divs must not stretch full height */
/* Fixes database context where Tailwind flex-shrink-0 is not available */
li.flex > div.flex-shrink-0 {
  align-self: flex-start;
  flex-shrink: 0;
}

/* Missing Tailwind utilities needed for Coherence Detail layout in database context */
.flex { display: flex; }
.gap-4 { gap: 1rem; }
.gap-3 { gap: 0.75rem; }
.gap-2 { gap: 0.5rem; }
.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-col { flex-direction: column; }
.flex-shrink-0 { flex-shrink: 0; }
.self-start { align-self: flex-start; }

/* Force "See More" buttons to never wrap and maintain their shape */
.see-more-btn {
  white-space: nowrap !important;
  min-width: max-content !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}