body {
          font-family: "anek latin", sans-serif;
          margin: 0;
          padding: 0;
          text-align: center;
        }

        body.dark {
          background-color: #192219;
          /* Dark mode */
          color: #ffffff;
        }

        header {
          font-size: larger;
          font-weight: bold;
          color: rgb(247, 246, 246);
          padding: 20px;
          width: 100%;
          font-family: "anek latin", sans-serif;
          background: linear-gradient(to bottom, transparent, #0d564f8c);
          border-bottom-left-radius: 20px;
          border-bottom-right-radius: 20px;
        }

        h1 {
          margin: 0;
        }

        .content {
          width: 100%;
          float: left;
          margin-top: 30px;
        }

        .quote {
          font-size: 1.5em;
          font-style: "anek latin", sans-serif;
          margin: 20px 0;
          color: #d4f7d2;
        }

        .clink {
          color: #050505;
          font-family: "anek latin", sans-serif;
          font-size: medium;
          margin-left: 20px;
          text-decoration: none;
        }

        .btnn2 {
          height: 60px;
          width: 80px;
          background-color: transparent;
          border-color: transparent;
          font-family: "anek latin", sans-serif;
          font-size: small;
        }

        .btnn1 {
          display: grid;
          justify-content: center;
          float: left;
          height: 80px;
          width: 100px;
        }

        .btnn {
          height: 50px;
          width: 50px;
          border-radius: 55px;
          color: white;
          display: grid;
          align-items: center;
          text-align: center;
          justify-content: center;
          font-size: 25px;
          font-weight: bolder;
        }

        .btnn:hover {
          color: rgb(167, 165, 165);
        }

        .fix {
          position: fixed;
          width: 100%;
        }

        .yout {
          height: 225px;
          width: 350px;
          float: left;
          margin-top: 20px;
        }

        .yout1 {
          height: 200px;
          width: 350px;
          float: left;
          border-radius: 10px;
        }

        .head {
          width: 100%;
        }

        .pa {
          font-family: "anek latin", sans-serif;
        }

        .bg {
          background-color: #afe9da;
          margin-left: 4%;
          margin-top: 10px;
          padding: 20px;
          width: 92%;
          float: left;
          color: #070707;
          border-radius: 10px;
          font-family: "anek latin", sans-serif;
          font-size: 15px;
          font-weight: bolder;
          padding-right: 10px;
          align-items: center;
          margin-bottom: 40px;
        }

        .line1 {
          font-family: "anek latin", sans-serif;
          display: grid;
          justify-content: center;
          padding: 20px;
          margin-top: 10px;
          float: left;
          border-radius: 10px;
          margin-bottom: 50px;
          box-shadow: 0 8px 5px rgba(8, 8, 8, 0.3);
          background: linear-gradient(rgb(54, 139, 75), rgb(33, 87, 37));
        }

        .notification {
          display: none;
          position: fixed;
          top: 20px;
          right: 20px;
          background-color: #affdb2;
          color: white;
          padding: 15px;
          border-radius: 5px;
          box-shadow: 0 10px 5px rgba(0, 0, 0, 0.3);
          z-index: 1000;
        }

        .notification.show {
          display: block;
        }

        .not {
          height: 30px;
          width: 30px;
          background-color: transparent;
          border-color: transparent;
          margin-right: 10px;
        }

        .not1 {
          height: 30px;
          width: 30px;
          border-radius: 55px;
        }

        .dq {
          width: 100%;
          float: left;
          padding-left: 10%;
          font-family: "anek latin", sans-serif;
          color: #fff;
        }

        .dm {
          width: 30%;
          float: left;
        }

        .dim {
          width: 80%;
          border-radius: 25px;
          margin-top: 40%;
        }

        .line2 {
          background-color: #afe9da;
          margin-top: 10px;
          padding: 20px;
          margin-left: 4%;
          width: 92%;
          float: left;
          border-radius: 10px;
          margin-bottom: 50px;
          box-shadow: 0 8px 5px rgba(8, 8, 8, 0.3);
          font-family: "anek latin", sans-serif;
          display: grid;
          justify-content: center;
          align-items: center;
          text-align: center;
        }

        .line3 {
          margin-top: 10px;
          padding-top: 20px;
          margin-left: 4%;
          width: 92%;
          background-color: rgb(6, 80, 94);
          float: left;
          border-radius: 10px;
          padding-bottom: 20px;
          padding-right: 10%;
          margin-bottom: 50px;
          box-shadow: 0 8px 5px rgba(8, 8, 8, 0.3);
        }

        .line4 {
          margin-top: 10px;
          padding-top: 20px;
          margin-left: 4%;
          width: 92%;
          background-color: rgb(97, 4, 61);
          float: left;
          border-radius: 10px;
          padding-bottom: 20px;
          margin-bottom: 50px;
          box-shadow: 0 8px 5px rgba(8, 8, 8, 0.3);
          padding-right: 10%;
        }

        .pdf {
          width: 90%;
          height: 300px;
          border-radius: 20px;
        }

        p {
          font-family: "anek latin", sans-serif;
        }

        .line6 {
          font-family: "anek latin", sans-serif;
          display: grid;
          justify-content: center;
          align-items: center;
          margin-top: 10px;
          padding-top: 20px;
          padding: 10px;
          width: 370px;
          background-color: #afe9da;
          float: left;
          border-radius: 10px;
          padding-bottom: 20px;
          margin-bottom: 50px;
          box-shadow: 0 8px 5px rgba(8, 8, 8, 0.3);
          color: #080808;
        }

        .slideshow-container {
          position: relative;
          max-width: 800px;
          width: 100%;
          color: #fff;
          border-radius: 10px;
          overflow: hidden;
          font-family: "anek latin", sans-serif;

        }

        .mySlides {
          display: none;

          text-align: center;
        }

        .prev,
        .next {
          cursor: pointer;
          width: auto;
          padding: 20px;
          padding-top: 0%;
          padding-bottom: 0%;
          margin-top: 22px;
          color: rgb(246, 243, 243);
          font-weight: bold;
          font-size: 18px;
          transition: 0.6s ease;
          user-select: none;
          background-color: rgba(6, 114, 93, 0.6);
          border-radius: 20px;
        }

        .prev {
          margin-left: 110px;
        }

        .prev:hover,
        .next:hover {
          background-color: #3f504b;
        }

        .active {
          background-color: #717171;
        }

        .fade {
          animation-name: fade;
          animation-duration: 1000000000000000000000000000000000000000000000000000s;
        }

        @keyframes fade {
          from {
            opacity: 7
          }

          to {
            opacity: 8
          }
        }

        .level {
          width: 400px;
          height: 480px;
        }

        .center1 {
          display: grid;
          justify-content: center;
          width: 100%;
        }



        .line7 {
          background-color: #afe9da;
          margin-left: 4%;
          margin-top: 10px;
          padding: 10px;
          width: 92%;
          float: left;
          border-radius: 10px;
          font-family: "anek latin", sans-serif;
          margin-bottom: 60px;

        }

        marquee {
          width: 100%;
          color: #013108;
        }

        h2 {
          color: #008011;
        }

        .li {
          text-align: left;
          background: rgba(69, 90, 86, 0.185);
          margin-top: 10px;
          padding: 10px;
          border-left: 5px solid rgba(1, 62, 50, 0.981);
          border-radius: 5px;
          color: rgb(7, 7, 7);
        }

        .line8 {
          font-family: "anek latin", sans-serif;
          margin-top: 10px;
          padding: 15px;
          margin-left: 4%;
          width: 92%;
          color: #040404;
          background-color: #3f3f3f;
          float: left;
          border-radius: 10px;
          margin-bottom: 50px;
          box-shadow: 0 8px 5px rgba(8, 8, 8, 0.3);
        }

        .ilmbtn {
          width: 100px;
          height: 130px;
          margin-left: 35px;
          border-radius: 25px;
          background-color: transparent;
          border-color: transparent;
        }

        .ilmbtn1 {
          width: 100px;
          height: 100px;
          border-radius: 35px;
          box-shadow: 0 8px 5px rgba(8, 8, 8, 0.3);
        }

        .ilmbtn1:hover {
          width: 120px;
          height: 120px;
        }


        .line9 {
          margin-top: 10px;
          padding-top: 20px;
          padding: 20px;
          width: 370px;
          float: left;
          border-radius: 10px;
          padding-bottom: 20px;
        }

        .line10 {
          margin-top: 10px;
          padding-top: 20px;
          width: 370px;
          background-color: #3f3f3f;
          border-radius: 10px;
          padding-bottom: 20px;
          margin-bottom: 50px;
          box-shadow: 0 8px 5px rgba(8, 8, 8, 0.3);
        }

        .nav {
          border-bottom-left-radius: 20px;
          border-bottom-right-radius: 20px;
          color: rgb(252, 251, 251);
          padding: 20px;
          font-family: "anek latin", sans-serif;
          background: linear-gradient(to bottom, transparent, #0d564f8c);
        }

        .change-button {
          background-color: transparent;
          border-color: transparent;
        }

        .box {
          text-decoration: none;
          color: #fbfafa;
          margin: 20px;
          border: 1px solid rgb(3, 43, 2);
          padding: 5px;
          padding-left: 10px;
          padding-right: 10px;
          border-radius: 10px;
        }

        .box:hover {
          background-color: #0c0c0c;
          color: #fff;
        }

        #main1 {
          display: none;
        }

        .bd {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
        }

        .intro {
          opacity: 0;
          animation: slideIn 0.4s ease-out forwards;
        }

        @keyframes slideIn {
          from {
            transform: translateY(-100%);
            opacity: 0;
          }

          to {
            transform: translateY(0);
            opacity: 1;
          }
        }

        .black1 {
          background-color: rgb(251, 251, 251);
          color: #1a1a1a;
        }

        .black {
          background:
            radial-gradient(circle at 30% 30%, #0d564f, transparent 40%),
            radial-gradient(circle at 70% 40%, #0d564f, transparent 40%),
            radial-gradient(circle at 50% 70%, #0d564f, transparent 40%);
          background-color: #00060f;
          background-attachment: fixed;
          color: #fff;
          min-height: 100vh;
        }


        button {
          background-color: transparent;
          border-color: transparent;
        }

        .title {
          color: #faf9f9;
          border-radius: 8px;
          font-family: 'anek latin', sans-serif;
          background-color: rgba(6, 114, 93, 0.6);
        }

        .loader {
          border: 6px solid #e0e0e0;
          border-top: 6px solid #090909;
          border-radius: 50%;
          width: 30px;
          height: 30px;
          animation: spin 1s linear infinite;
        }

        @keyframes spin {
          0% {
            transform: rotate(0deg);
          }

          100% {
            transform: rotate(360deg);
          }
        }

        .loader1 {
          margin: 0;
          height: 5vh;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          font-family: Arial, sans-serif;
        }

        .colo {
          background-color: #167f81;
          text-align: center;
          color: white;
          text-decoration: none;
          padding: 10px;
          border-radius: 15px;
          margin: 10px;
          margin-bottom: 15px;
        }

        .colo:hover {
          background-color: #04494a;
        }

        .popup {
          display: none;
          position: fixed;
          z-index: 1;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.5);
        }

        .popup-content {
          background:
            radial-gradient(circle at 30% 30%, #0d564f, transparent 40%),
            radial-gradient(circle at 70% 40%, #0d564f, transparent 40%),
            radial-gradient(circle at 50% 70%, #0d564f, transparent 40%);
          background-color: #00060f;
          color: #fff;
          margin: 15% auto;
          padding: 20px;
          width: 300px;
          border-radius: 10px;
          text-align: center;
          position: relative;
          color: black;
          display: grid;
          justify-content: center;
          align-items: center;
          font-family: 'anek latin', sans-serif;
        }

        .close {
          position: absolute;
          top: 10px;
          right: 15px;
          font-size: 24px;
          cursor: pointer;
        }

        /* Light Theme Overrides */
        body.light-theme {
          background: #f0f4f8 !important;
          color: #1a202c !important;
          --accent-cyan: #0d9488;
          --text-main: #1a202c;
          --text-muted: #4a5568;
        }
        body.light-theme .navbar {
          background: rgba(255, 255, 255, 0.9) !important;
          border-bottom: 1px solid #e2e8f0;
        }
        body.light-theme .navbar .nav-link,
        body.light-theme .navbar .navbar-brand,
        body.light-theme .navbar .fa-bars {
          color: #2d3748 !important;
        }
        body.light-theme .qa-btn {
          background: #ffffff;
          border: 1px solid #e2e8f0;
          color: #2d3748;
          box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }
        body.light-theme .qa-btn:hover {
          background: #f7fafc;
          border-color: #4fd1c5;
        }
        body.light-theme .cta-section {
          background: linear-gradient(135deg, #f8fafc, #edf2f7);
          border-color: #cbd5e0;
        }
        body.light-theme .cta-section h3,
        body.light-theme .cta-section p {
          color: #2d3748;
        }
        body.light-theme .site-footer {
          background: #f7fafc;
          border-top: 1px solid #e2e8f0;
          color: #4a5568;
        }
        body.light-theme .site-footer .footer-col h4,
        body.light-theme .site-footer .footer-quote strong {
          color: #2d3748;
        }
        body.light-theme .welcome-banner h5 {
          color: #2d3748;
          text-shadow: none;
        }
        body.light-theme .prayer-mini-card {
          background: linear-gradient(160deg, rgba(224, 242, 241, 0.9), rgba(178, 235, 230, 0.7));
          border-color: rgba(79, 209, 197, 0.5);
          box-shadow: 0 4px 16px rgba(13, 86, 79, 0.12), inset 0 1px 0 rgba(255,255,255,0.6);
        }

        /* Prayer name, time — dark readable text in light mode */
        body.light-theme .pmc-name,
        body.light-theme .pmc-time {
          color: #1a202c;
          text-shadow: none;
        }

        /* Label + countdown — teal, darker for readability */
        body.light-theme .pmc-label {
          color: #0d6e65;
          opacity: 1;
        }
        body.light-theme .pmc-countdown {
          color: #0d6e65;
          opacity: 1;
        }

        /* Icon circle */
        body.light-theme .pmc-icon-wrap {
          background: rgba(13, 86, 79, 0.1);
          border-color: rgba(13, 86, 79, 0.3);
        }
        body.light-theme .pmc-icon {
          color: #0d6e65;
        }

        /* Separator line */
        body.light-theme .pmc-sep {
          background: linear-gradient(to right, transparent, rgba(13, 86, 79, 0.4), transparent);
        }

        /* Hint text */
        body.light-theme .pmc-hint {
          color: rgba(13, 86, 79, 0.55);
        }
        body.light-theme #message-box {
          background: #ebf8f6;
          border-color: #4fd1c5;
          color: #234e52;
        }
        body.light-theme .banner-wrapper {
          background: #ffffff;
        }
        body.light-theme .banner-title {
          color: #ffffff;
        }
        body.light-theme .dropdown-menu-dark {
          background: #ffffff !important;
          border-color: #e2e8f0 !important;
        }
        body.light-theme .dropdown-item {
          color: #2d3748 !important;
        }
        body.light-theme .dropdown-item:hover {
          background: #edf2f7 !important;
          color: #1a202c !important;
        }

        /* times.html and player.html light theme extensions */
        body.light-theme header {
            color: #1a202c !important;
        }
        body.light-theme header a {
            color: #1a202c !important;
        }
        body.light-theme .next-prayer-title,
        body.light-theme .countdown-timer-large,
        body.light-theme .p-time,
        body.light-theme .p-name,
        body.light-theme .form-control-custom,
        body.light-theme .prayer-row.active {
            color: #1a202c !important;
        }
        body.light-theme .prayer-row {
            background: #ffffff;
            border-color: #e2e8f0;
        }
        body.light-theme .prayer-row.active {
            background: #ebf8f6 !important;
            border-color: #4fd1c5 !important;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
        }
        body.light-theme .prayer-row.next {
            background: #f7fafc !important;
            border-color: #cbd5e0 !important;
        }
        body.light-theme .settings-panel,
        body.light-theme .settings-content {
            background: #f7fafc;
            border-color: #e2e8f0;
            color: #4a5568;
        }
        body.light-theme .form-control-custom {
            background: #ffffff !important;
            border-color: #cbd5e0 !important;
            color: #1a202c !important;
        }
        body.light-theme .form-control-custom::placeholder {
            color: #718096 !important;
        }
        body.light-theme .player-card,
        body.light-theme .song-selector-container,
        body.light-theme .lyrics-container {
            background: rgba(255, 255, 255, 0.9);
            border-color: #cbd5e0;
            color: #1a202c;
        }
        body.light-theme .song-title {
            color: #2c7a7b;
            text-shadow: none;
        }
        body.light-theme .time-display {
            color: #4a5568;
        }
        body.light-theme .song-select {
            background: #ffffff;
            color: #1a202c;
            border-color: #cbd5e0;
        }
        body.light-theme .song-select option {
            background: #ffffff;
            color: #1a202c;
        }
        body.light-theme .control-group {
            background: rgba(255, 255, 255, 0.9);
            border-color: #cbd5e0;
        }
        body.light-theme .control-group label,
        body.light-theme .control-group span,
        body.light-theme .lyrics-container h2 {
            color: #4a5568;
        }
        body.light-theme .header-custom {
            background: rgba(255, 255, 255, 0.95);
            border-bottom-color: #cbd5e0;
        }
        body.light-theme .header-custom h4,
        body.light-theme .header-custom .home-btn,
        body.light-theme #settingsBtn {
            color: #1a202c !important;
        }
        body.light-theme .text-white-50 {
            color: #4a5568 !important;
        }
        body.light-theme .intro h3 {
            color: #1a202c;
        }

        /* Adhkar.html and Quran.html specific overrides */
        body.light-theme .form-select {
            background-color: #ffffff !important;
            border: 1px solid #cbd5e0 !important;
            color: #1a202c !important;
        }
        body.light-theme .form-select option {
            background-color: #ffffff !important;
            color: #1a202c !important;
        }
        body.light-theme .form-select:focus {
            border-color: #0d9488 !important;
            box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.25) !important;
        }

        /* Quran.html Mode Selection Screen overrides */
        body.light-theme .mode-selection-overlay {
            background: radial-gradient(circle at 30% 30%, #f0fdfa, transparent 40%),
                radial-gradient(circle at 70% 40%, #f0fdfa, transparent 40%),
                radial-gradient(circle at 50% 70%, #f0fdfa, transparent 40%) !important;
            background-color: #f1f5f9 !important;
            color: #1e293b !important;
        }
        body.light-theme .mode-title {
            color: #1e293b !important;
        }
        body.light-theme .mode-subtitle {
            color: #64748b !important;
        }
        body.light-theme .mode-card {
            background: rgba(255, 255, 255, 0.95) !important;
            border-color: rgba(13, 148, 136, 0.15) !important;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04) !important;
        }
        body.light-theme .mode-card:hover {
            background: #ffffff !important;
            border-color: #0d9488 !important;
            box-shadow: 0 15px 30px rgba(13, 148, 136, 0.1) !important;
        }
        body.light-theme .mode-card h3 {
            color: #1e293b !important;
        }
        body.light-theme .mode-card p {
            color: #64748b !important;
        }
        body.light-theme .mode-card-chip {
            background: rgba(0, 0, 0, 0.05) !important;
            border-color: rgba(0, 0, 0, 0.03) !important;
            color: #64748b !important;
        }
        body.light-theme .mode-card-chip.gold {
            color: #b45309 !important;
            background: rgba(251, 191, 36, 0.15) !important;
            border-color: rgba(251, 191, 36, 0.25) !important;
        }
        body.light-theme .mode-icon-wrapper {
            background: rgba(13, 148, 136, 0.08) !important;
            border-color: rgba(13, 148, 136, 0.15) !important;
        }
        body.light-theme .mode-card.regular .mode-icon-wrapper i { color: #0d9488 !important; }
        body.light-theme .mode-card.kahf .mode-icon-wrapper i { color: #b45309 !important; }
        body.light-theme .mode-card.khatm .mode-icon-wrapper i { color: #2563eb !important; }
        body.light-theme .mode-card.night .mode-icon-wrapper i { color: #7c3aed !important; }
        body.light-theme .mode-card.ramadan .mode-icon-wrapper i { color: #ea580c !important; }

        body.light-theme .adhkar-card,
        body.light-theme .mushaf-page,
        body.light-theme .progress-container,
        body.light-theme .stats-container,
        body.light-theme .surah-selector {
            background: rgba(255, 255, 255, 0.9);
            border-color: #cbd5e0;
            color: #1a202c;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        }
        body.light-theme .adhkar-malayalam {
            background: #f7fafc;
            color: #4a5568;
            border-top-color: #cbd5e0;
        }
        body.light-theme .ayah-translation {
            background: transparent !important;
            color: #4a5568 !important;
            border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
            padding-top: 15px !important;
            margin-top: 15px !important;
            font-style: italic;
        }
        body.light-theme .category-btn {
            background: #ffffff;
            color: #4a5568;
            border-color: #cbd5e0;
        }
        body.light-theme .category-btn.active {
            background: linear-gradient(135deg, #0d564f, #1a7a70) !important;
            color: #ffffff !important;
            border-color: transparent !important;
        }
        body.light-theme .nav-btn,
        body.light-theme button.fab,
        body.light-theme .dhikr-btn-plus,
        body.light-theme .ayah-number {
            color: #ffffff !important;
        }
        body.light-theme .navigation-controls,
        body.light-theme .floating-actions,
        body.light-theme .dhikr-panel {
            background: rgba(255, 255, 255, 0.95) !important;
            border-color: #cbd5e0 !important;
            border-top: 1px solid #cbd5e0 !important;
            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05) !important;
        }
        body.light-theme .ayah-card {
            background-color: rgba(255, 255, 255, 0.9) !important;
            border: 1px solid #cbd5e0 !important;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04) !important;
        }
        body.light-theme .player-controls {
            background: rgba(0, 0, 0, 0.05) !important;
            border-color: rgba(0, 0, 0, 0.08) !important;
        }
        body.light-theme .control-btn {
            color: #4a5568 !important;
        }
        body.light-theme .play-btn {
            color: #0d9488 !important; /* Premium dark teal for play btn in light mode */
        }
        body.light-theme .repeat-btn.active {
            color: #0d9488 !important;
        }
        body.light-theme .like-btn {
            color: #0d9488 !important; /* High-contrast teal for heart icon in light mode */
        }
        body.light-theme .like-btn .fa-heart.text-danger {
            color: #e11d48 !important; /* Keep red color if saved */
        }
        body.light-theme .surah-info {
            background: #ffffff;
            color: #1a202c;
        }
        body.light-theme .surah-info h3,
        body.light-theme .surah-title {
            color: #1a202c;
        }
        body.light-theme .surah-info p {
            color: #4a5568;
        }
        body.light-theme .stat-value,
        body.light-theme .dhikr-count-num,
        body.light-theme .adhkar-index,
        body.light-theme .completion-arabic {
            color: #2c7a7b;
            text-shadow: none;
        }
        body.light-theme .stat-label,
        body.light-theme .dhikr-target-label {
            color: #4a5568;
        }
        body.light-theme .mushaf-toolbar {
            background: #f7fafc;
            border-color: #cbd5e0;
        }
        body.light-theme .mushaf-toolbar .toolbar-center {
            color: #1a202c;
        }
        body.light-theme .mushaf-toolbar .control-btn,
        body.light-theme .mushaf-toolbar .like-btn,
        body.light-theme .dhikr-reset-btn {
            background: #ffffff;
            color: #1a202c;
            border-color: #cbd5e0;
        }
        body.light-theme .progress-bar-custom {
            background: #e2e8f0;
        }
        body.light-theme .surah-selector label {
            color: #1a202c;
        }
        body.light-theme .surah-selector select {
            border-color: #cbd5e0;
            color: #1a202c;
        }
        
        /* Fix for buttons in times.html */
        body.light-theme .btn-outline-light {
            color: #2c7a7b !important;
            border-color: #2c7a7b !important;
        }
        body.light-theme .btn-outline-light:hover {
            background-color: #2c7a7b !important;
            color: #ffffff !important;
        }
        body.light-theme .setting-group label {
            color: #1a202c;
        }

        /* Fix for logout button visibility in light theme */
        body.light-theme button[onclick*="logout"],
        body.light-theme .logout-btn {
            color: #2c7a7b !important;
            border: 1px solid rgba(44, 122, 123, 0.5) !important;
            background-color: rgba(44, 122, 123, 0.1) !important;
        }
        body.light-theme button[onclick*="logout"]:hover,
        body.light-theme .logout-btn:hover {
            background-color: #2c7a7b !important;
            color: #ffffff !important;
        }

        /* Theme toggle button styling */
        .btn-theme-toggle {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 1px solid rgba(13, 86, 79, 0.5);
            background: rgba(13, 86, 79, 0.2);
            color: #a8f0e8;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            margin-left: 12px;
            transition: all 0.3s ease;
            box-shadow: none !important;
        }
        .btn-theme-toggle:hover, .btn-theme-toggle:focus {
            background: rgba(13, 86, 79, 0.4);
            color: #ffffff;
            border-color: rgba(13, 86, 79, 0.8);
            box-shadow: 0 0 10px rgba(79, 209, 197, 0.3) !important;
        }
        
        /* Light theme overrides for theme toggle button */
        body.light-theme .btn-theme-toggle {
            color: #2c7a7b !important;
            border: 1px solid rgba(44, 122, 123, 0.5) !important;
            background-color: rgba(44, 122, 123, 0.1) !important;
        }
        body.light-theme .btn-theme-toggle:hover,
        body.light-theme .btn-theme-toggle:focus {
            background-color: #2c7a7b !important;
            color: #ffffff !important;
            box-shadow: 0 0 10px rgba(44, 122, 123, 0.2) !important;
        }

        /* Volume and Speed slider tracks in light theme */
        body.light-theme .volume-slider,
        body.light-theme .speed-slider {
            background: rgba(0, 0, 0, 0.15) !important;
        }

        /* Thafseer link base style */
        .thafseer-link {
            color: #ffffff !important;
            font-weight: bold;
            text-decoration: underline;
            transition: all 0.3s ease;
        }
        .thafseer-link:hover {
            color: var(--accent, #ffd700) !important;
            text-decoration: none;
        }

        /* Thafseer link in light theme */
        body.light-theme .thafseer-link {
            color: #0d9488 !important;
        }
        body.light-theme .thafseer-link:hover {
            color: #1a7a70 !important;
        }

        /* Logo switching for light theme */
        .logo-light {
            display: none;
        }
        body.light-theme .logo-dark {
            display: none !important;
        }
        body.light-theme .logo-light {
            display: inline-block !important;
        }

        /* Dashboard overrides in light theme */
        body.light-theme #ramadanDashboard {
            background: #ffffff !important;
            border-color: #fbbf24 !important;
            box-shadow: 0 8px 30px rgba(251, 191, 36, 0.08) !important;
            color: #1a202c !important;
        }
        body.light-theme #ramadanDashboard h5,
        body.light-theme #ramadanDashboard strong {
            color: #b45309 !important;
        }
        body.light-theme #ramadanDashboard small,
        body.light-theme #ramadanDashboard .text-white-50 {
            color: #4a5568 !important;
        }

        body.light-theme #khatmDashboard {
            background: #ffffff !important;
            border-color: #3b82f6 !important;
            box-shadow: 0 8px 30px rgba(59, 130, 246, 0.08) !important;
            color: #1a202c !important;
        }
        body.light-theme #khatmDashboard h5,
        body.light-theme #khatmDashboard strong {
            color: #1d4ed8 !important;
        }
        body.light-theme #khatmDashboard small,
        body.light-theme #khatmDashboard .text-white-50 {
            color: #4a5568 !important;
        }

        body.light-theme #kahfDashboard {
            background: #ffffff !important;
            border-color: #0d9488 !important;
            box-shadow: 0 8px 30px rgba(13, 148, 136, 0.08) !important;
            color: #1a202c !important;
        }
        body.light-theme #kahfDashboard h5 {
            color: #0d9488 !important;
        }
        body.light-theme #kahfDashboard small,
        body.light-theme #kahfDashboard .text-white-50 {
            color: #4a5568 !important;
        }

        body.light-theme #nightDashboard {
            background: #ffffff !important;
            border-color: #8b5cf6 !important;
            box-shadow: 0 8px 30px rgba(139, 92, 246, 0.08) !important;
            color: #1a202c !important;
        }
        body.light-theme #nightDashboard h5 {
            color: #7c3aed !important;
        }
        body.light-theme #nightDashboard small,
        body.light-theme #nightDashboard .text-white-50 {
            color: #4a5568 !important;
        }

        body.light-theme .progress {
            background-color: rgba(0, 0, 0, 0.08) !important;
        }