body {
        font-family: "Source Serif 4", serif;
        background-color: #f8f6f2;
        color: #333;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        margin: 0;
        padding: 0;
        scroll-behavior: auto;
      }
      .font-amiri {
        font-family: "Amiri", serif;
      }
      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);
      }
      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;
        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: 5rem;
      }

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

      #references li:target {
        background: #fff7db;
        border-left: 4px solid #a88b68;
      }

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

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

      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;
        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);
      }

      /* 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;
        }

        table {
          font-size: 0.875rem;
        }

        table th,
        table td {
          padding: 0.5rem 0.25rem;
        }

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

        .overflow-x-auto {
          -webkit-overflow-scrolling: touch;
        }

        /* 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 */
        body {
          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: "Amiri", serif !important;
        direction: rtl !important;
      }

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

      /* Google Translate Styles */
      .goog-te-banner-frame.skiptranslate,
      .goog-te-gadget-icon,
      .goog-te-spinner-pos,
      .goog-tooltip,
      .goog-tooltip:hover,
      .goog-logo-link {
        display: none !important;
      }
      /* Hide Google top banner and menu frames aggressively */
      .goog-te-banner-frame,
      iframe.goog-te-banner-frame,
      iframe.goog-te-menu-frame,
      .goog-te-balloon-frame {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
      }
      html body .skiptranslate,
      html body .VIpgJd-ZVi9od-l4eHX-hSRGPd,
      html body .VIpgJd-ZVi9od-ORHb {
        display: none !important;
      }
      body { top: 0 !important; }

      /* Additional rules to hide spinner and loading overlay */
      #goog-gt-tt,
      div[style*="z-index: 1000000"],
      div[style*="background: url(//www.gstatic.com/images/branding/product/2x/translate_24dp.png)"],
      .goog-te-spinner,
      .goog-te-spinner-pos,
      .VIpgJd-ZVi9od-aZ2wEe-OJjZmb,
      .VIpgJd-ZVi9od-aZ2wEe {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        animation: none !important;
        transform: none !important;
      }

      /* Stop any spinning animations on Google Translate elements */
      [class*="VIpgJd-ZVi9od"] {
        animation: none !important;
        transform: none !important;
      }

      .goog-te-gadget {
        color: transparent !important;
        margin: 0 !important;
        font-size: 0 !important;
        display: inline-block !important;
      }

      .goog-te-gadget * {
        color: black !important;
      }

      .goog-te-gadget .goog-te-combo {
        margin: 0 !important;
        padding: 3px 8px !important;
        border-radius: 4px !important;
        border: 1px solid #ddd !important;
        font-size: 12px !important;
        background-color: white !important;
        color: #333 !important;
        min-width: 120px !important;
        width: 120px !important;
        height: 28px !important;
        outline: none !important;
        cursor: pointer !important;
        appearance: auto !important;
        -webkit-appearance: menulist !important;
        -moz-appearance: menulist !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
      }

      .goog-te-gadget .goog-te-combo:focus {
        border-color: #4caf50 !important;
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2) !important;
      }

      @media (max-width: 640px) {
        .goog-te-gadget .goog-te-combo {
          min-width: 100px !important;
          width: 100px !important;
        }
      }

      /* Style the translation dropdown */
      #google_translate_element {
        position: fixed;
        top: 45px;
        right: 5px;
        z-index: 9998;
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        display: none;
        min-width: 200px;
        max-width: 300px;
      }

      #google_translate_element select,
      #google_translate_element .goog-te-combo,
      #google_translate_element .goog-te-gadget select {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        background: white;
        cursor: pointer;
        outline: none;
      }

      /* Ensure Google Translate elements are visible */
      .goog-te-gadget {
        color: transparent !important;
        font-size: 0 !important;
      }

      .goog-te-gadget .goog-te-combo {
        color: #333 !important;
        background: white !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        padding: 8px !important;
        font-size: 14px !important;
        cursor: pointer !important;
        width: 100% !important;
        min-width: 200px !important;
      }

      /* Style for SELECT layout dropdown */
      #google_translate_element select:focus {
        border-color: #4285f4;
        box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
      }

      /* Ensure Google Translate is properly initialized */
      #google_translate_element .goog-te-gadget {
        display: block !important;
        visibility: visible !important;
      }

      /* 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 table {
        background-color: #2d2d2d !important;
        color: #e0e0e0 !important;
      }

      body.dark-mode table th,
      body.dark-mode 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;
      }

      /* Dark Mode Google Translate Styles */
      body.dark-mode .goog-te-gadget .goog-te-combo {
        background-color: #2d2d2d !important;
        color: #e0e0e0 !important;
        border-color: #444 !important;
      }

      body.dark-mode .goog-te-gadget .goog-te-combo:focus {
        border-color: #4caf50 !important;
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2) !important;
      }

      /* Dark mode for Google Translate dropdown options */
      body.dark-mode .goog-te-gadget .goog-te-combo option {
        background-color: #2d2d2d !important;
        color: #e0e0e0 !important;
      }

      /* Dark mode for Google Translate dropdown when opened */
      body.dark-mode select.goog-te-combo {
        background-color: #2d2d2d !important;
        color: #e0e0e0 !important;
      }

      /* Dark mode for any Google Translate dropdown elements */
      body.dark-mode #google_translate_element {
        background-color: #2d2d2d !important;
        border-color: #444 !important;
      }

      body.dark-mode #google_translate_element select,
      body.dark-mode #google_translate_element .goog-te-combo {
        background-color: #2d2d2d !important;
        color: #e0e0e0 !important;
        border-color: #444 !important;
      }

      /* Force dark mode styling for Google Translate dropdown - more aggressive approach */
      body.dark-mode .goog-te-combo,
      body.dark-mode select.goog-te-combo,
      body.dark-mode .goog-te-gadget select,
      body.dark-mode #google_translate_element select,
      body.dark-mode #google_translate_element .goog-te-combo {
        background-color: #2d2d2d !important;
        color: #e0e0e0 !important;
        border-color: #444 !important;
        background-image: none !important;
      }

      /* Target all possible Google Translate select elements */
      body.dark-mode select[class*="goog"],
      body.dark-mode select[id*="goog"],
      body.dark-mode .goog-te-gadget select,
      body.dark-mode .goog-te-combo,
      body.dark-mode select.goog-te-combo {
        background-color: #2d2d2d !important;
        color: #e0e0e0 !important;
        border-color: #444 !important;
        background-image: none !important;
      }

      /* Override any Google Translate iframe styling */
      body.dark-mode iframe[src*="translate"],
      body.dark-mode iframe[src*="google"],
      body.dark-mode .goog-te-banner-frame,
      body.dark-mode .goog-te-menu-frame {
        background-color: #2d2d2d !important;
        color: #e0e0e0 !important;
      }

      /* Force dark styling on all Google Translate related elements */
      body.dark-mode [class*="goog-te"] {
        background-color: #2d2d2d !important;
        color: #e0e0e0 !important;
      }

      body.dark-mode [id*="goog"] {
        background-color: #2d2d2d !important;
        color: #e0e0e0 !important;
      }

      /* Additional aggressive styling for Google Translate dropdown */
      body.dark-mode .goog-te-combo option,
      body.dark-mode select.goog-te-combo option,
      body.dark-mode .goog-te-gadget select option,
      body.dark-mode #google_translate_element select option {
        background-color: #2d2d2d !important;
        color: #e0e0e0 !important;
      }

      /* Dark mode for custom Google Translate dropdown (we create our own) */
      body.dark-mode #custom-language-dropdown {
        width: 200px;
      }
      body.dark-mode #custom-dropdown-btn {
        background-color: #2d2d2d !important;
        color: #e0e0e0 !important;
        border: 1px solid #444 !important;
      }
      body.dark-mode #custom-dropdown-list {
        background-color: #2d2d2d !important;
        border: 1px solid #444 !important;
        border-top: none !important;
      }
      body.dark-mode .custom-dropdown-option {
        background-color: #2d2d2d !important;
        color: #e0e0e0 !important;
        border-bottom: 1px solid #333 !important;
      }
      body.dark-mode .custom-dropdown-option:hover {
        background-color: #3a3a3a !important;
      }

      /* Override any inline styles that Google Translate might apply */
      body.dark-mode .goog-te-combo[style*="background"],
      body.dark-mode select[style*="background"] {
        background-color: #2d2d2d !important;
        color: #e0e0e0 !important;
      }

      /* Target any element with Google Translate related attributes */
      body.dark-mode [data-goog],
      body.dark-mode [data-google],
      body.dark-mode [class*="VIpgJd"] {
        background-color: #2d2d2d !important;
        color: #e0e0e0 !important;
      }

      /* Force dark mode on ALL select elements when in dark mode */
      body.dark-mode select {
        background-color: #2d2d2d !important;
        color: #e0e0e0 !important;
        border-color: #444 !important;
      }

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

      /* Target the actual dropdown that appears */
      body.dark-mode select:focus,
      body.dark-mode select:active,
      body.dark-mode select:hover {
        background-color: #2d2d2d !important;
        color: #e0e0e0 !important;
      }

      /* Override any user agent styles */
      body.dark-mode select {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        background-image: none !important;
      }

      /* Force dark mode on any element that might be Google Translate related */
      body.dark-mode *[class*="goog"],
      body.dark-mode *[id*="goog"],
      body.dark-mode *[class*="VIpgJd"],
      body.dark-mode *[class*="VIpgJd-ZVi9od"] {
        background-color: #2d2d2d !important;
        color: #e0e0e0 !important;
      }

      .word-analysis-item {
        margin-bottom: 1rem;
        padding-left: 1rem;
        border-left: 3px solid #ced4da;
      }
    
      /* 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; }
      }