.site-theme-switcher {
  position: fixed;
  z-index: 10000;
  inset-block-end: 12px;
  inset-inline-start: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  padding: 5px;
  background: rgba(255, 253, 248, 0.94);
  border: 1px solid #d9c28a;
  border-bottom: 3px solid #b9913d;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(45, 33, 12, 0.18);
  backdrop-filter: blur(8px);
  transition: gap 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.site-theme-switcher:not(.is-open) {
  gap: 0;
}

.site-theme-switcher__button {
  min-width: 44px;
  max-width: 76px;
  min-height: 36px;
  padding: 5px 9px;
  color: #173f35;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: 700 0.95rem "Alyamama", "Traditional Arabic", "Noto Naskh Arabic", serif;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 1;
  overflow: hidden;
  transition: max-width 180ms ease, min-width 180ms ease, padding 180ms ease, opacity 140ms ease, background-color 180ms ease, color 180ms ease;
}

.site-theme-switcher:not(.is-open) .site-theme-switcher__button:not(.is-active) {
  min-width: 0;
  max-width: 0;
  padding-inline: 0;
  opacity: 0;
  pointer-events: none;
}

.site-theme-switcher:not(.is-open) .site-theme-switcher__button.is-active {
  min-width: 64px;
  max-width: 92px;
}

.site-theme-switcher:not(.is-open) .site-theme-switcher__button.is-active::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-inline-start: 7px;
  border-inline: 4px solid transparent;
  border-block-start: 5px solid currentColor;
  vertical-align: middle;
}

.site-theme-switcher__button:hover,
.site-theme-switcher__button:focus-visible,
.site-theme-switcher__button.is-active {
  color: #fff8e7;
  background: #164d3f;
}

.site-theme-switcher__button:focus-visible {
  outline: 3px solid #d9bd6d;
  outline-offset: 2px;
}

.bookmark-icon {
  width: 0.9em;
  height: 1.15em;
  display: inline-block;
  flex: 0 0 auto;
  color: inherit;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}

html[data-reader-theme="sepia"] {
  --site-theme-bg: #efe3cc;
  --site-theme-surface: #fff5dc;
  --site-theme-surface-soft: #f8eccf;
  --site-theme-text: #173f35;
  --site-theme-heading: #123e36;
  --site-theme-muted: #715b27;
  --site-theme-border: #c59d4a;
  --site-theme-accent: #b9913d;
  --site-theme-primary: #164d3f;
  --site-theme-primary-text: #fff8e7;
  --site-theme-input: #fffaf0;
  --site-theme-shadow: 0 18px 42px rgba(67, 49, 15, 0.14);
}

html[data-reader-theme="night"] {
  --site-theme-bg: #101714;
  --site-theme-surface: #17231f;
  --site-theme-surface-soft: #1f2d27;
  --site-theme-text: #f4ead3;
  --site-theme-heading: #fff4d5;
  --site-theme-muted: #d8c99f;
  --site-theme-border: #786643;
  --site-theme-accent: #d9bd6d;
  --site-theme-primary: #d9bd6d;
  --site-theme-primary-text: #13221d;
  --site-theme-input: #111b18;
  --site-theme-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
}

html[data-reader-theme="sepia"] :where(body.home-page, body.search-page, body.tafseer-page, body.quran-chapter),
html[data-reader-theme="night"] :where(body.home-page, body.search-page, body.tafseer-page, body.quran-chapter) {
  color: var(--site-theme-text) !important;
  background: var(--site-theme-bg) !important;
}

html[data-reader-theme="sepia"] :where(body.home-page, body.search-page, body.tafseer-page, body.quran-chapter) :where(h1, h2, h3, h4, strong),
html[data-reader-theme="night"] :where(body.home-page, body.search-page, body.tafseer-page, body.quran-chapter) :where(h1, h2, h3, h4, strong) {
  color: var(--site-theme-heading) !important;
}

html[data-reader-theme="sepia"] :where(body.home-page, body.search-page, body.tafseer-page, body.quran-chapter) :where(
  .button-link,
  .footer-links a,
  .feature-card,
  .info-panel,
  .search-panel,
  .search-card,
  .recent-panel,
  .results-panel,
  .result-card,
  .option-card,
  .toggle-card,
  .sub-match-option,
  .root-options,
  .root-options div,
  .search-ad,
  .tafseer-tabs,
  .tafseer-card,
  .tafseer-nav,
  .tafseer-ad,
  .reader-menu__link,
  .reader-nav-panel,
  .quran-reader-ad,
  .reader-control-group,
  .reader-jump,
  .reader-resume__link,
  .reader-bookmark__link,
  .index-panel,
  .surah-card,
  .book-panel,
  .book-card,
  .toc-section,
  .book-article,
  .article-nav,
  .legacy-source,
  .saved-ayah,
  .saved-verses-empty,
  .recent-list a,
  .recent-list a:visited
),
html[data-reader-theme="night"] :where(body.home-page, body.search-page, body.tafseer-page, body.quran-chapter) :where(
  .button-link,
  .footer-links a,
  .feature-card,
  .info-panel,
  .search-panel,
  .search-card,
  .recent-panel,
  .results-panel,
  .result-card,
  .option-card,
  .toggle-card,
  .sub-match-option,
  .root-options,
  .root-options div,
  .search-ad,
  .tafseer-tabs,
  .tafseer-card,
  .tafseer-nav,
  .tafseer-ad,
  .reader-menu__link,
  .reader-nav-panel,
  .quran-reader-ad,
  .reader-control-group,
  .reader-jump,
  .reader-resume__link,
  .reader-bookmark__link,
  .index-panel,
  .surah-card,
  .book-panel,
  .book-card,
  .toc-section,
  .book-article,
  .article-nav,
  .legacy-source,
  .saved-ayah,
  .saved-verses-empty,
  .recent-list a,
  .recent-list a:visited
) {
  color: var(--site-theme-text) !important;
  background: var(--site-theme-surface) !important;
  border-color: var(--site-theme-border) !important;
  box-shadow: var(--site-theme-shadow) !important;
}

html[data-reader-theme="sepia"] :where(body.home-page, body.search-page, body.tafseer-page, body.quran-chapter) :where(
  .hero,
  .search-hero,
  .tafseer-hero,
  .book-heading,
  .index-heading,
  .chapter-nav__link,
  .button-link--primary,
  .search-form button
) {
  color: var(--site-theme-primary-text) !important;
  background: var(--site-theme-primary) !important;
  border-color: var(--site-theme-border) !important;
}

html[data-reader-theme="night"] :where(body.home-page, body.search-page, body.tafseer-page, body.quran-chapter) :where(
  .hero,
  .search-hero,
  .tafseer-hero,
  .book-heading,
  .index-heading,
  .chapter-nav__link,
  .button-link--primary,
  .search-form button
) {
  color: #fff4d5 !important;
  background: #223a32 !important;
  border-color: var(--site-theme-border) !important;
}

html[data-reader-theme="sepia"] :where(body.home-page, body.search-page, body.tafseer-page, body.quran-chapter) :where(a, a:visited),
html[data-reader-theme="night"] :where(body.home-page, body.search-page, body.tafseer-page, body.quran-chapter) :where(a, a:visited) {
  color: inherit;
}

html[data-reader-theme="night"] body.home-page .advanced-link,
html[data-reader-theme="night"] body.home-page .advanced-link:visited,
html[data-reader-theme="night"] body.home-page .advanced-link:focus,
html[data-reader-theme="night"] body.home-page .advanced-link:active {
  color: #d9bd6d !important;
}

html[data-reader-theme="night"] body.home-page .advanced-link:hover,
html[data-reader-theme="night"] body.home-page .advanced-link:focus-visible {
  color: #fff4d5 !important;
  background: rgba(217, 189, 109, 0.14);
  border-radius: 6px;
}

html[data-reader-theme="sepia"] :where(body.home-page, body.search-page, body.tafseer-page, body.quran-chapter) :where(
  input,
  select,
  textarea
),
html[data-reader-theme="night"] :where(body.home-page, body.search-page, body.tafseer-page, body.quran-chapter) :where(
  input,
  select,
  textarea
) {
  color: var(--site-theme-text) !important;
  background: var(--site-theme-input) !important;
  border-color: var(--site-theme-border) !important;
}

html[data-reader-theme="sepia"] :where(body.home-page, body.search-page, body.tafseer-page, body.quran-chapter) :where(
  .section-kicker,
  .hero__kicker,
  .search-hero__kicker,
  .reader-menu__mark,
  .book-kicker,
  .result-card__meta,
  .root-options,
  .sub-match-option small,
  .option-card small,
  .toggle-card small,
  .tafseer-card__meta,
  .saved-ayah__meta
),
html[data-reader-theme="night"] :where(body.home-page, body.search-page, body.tafseer-page, body.quran-chapter) :where(
  .section-kicker,
  .hero__kicker,
  .search-hero__kicker,
  .reader-menu__mark,
  .book-kicker,
  .result-card__meta,
  .root-options,
  .sub-match-option small,
  .option-card small,
  .toggle-card small,
  .tafseer-card__meta,
  .saved-ayah__meta
) {
  color: var(--site-theme-muted) !important;
}

html[data-reader-theme="sepia"] :where(body.home-page, body.search-page, body.tafseer-page, body.quran-chapter) :where(
  .button-link:hover,
  .button-link:focus-visible,
  .reader-menu__link:hover,
  .reader-menu__link:focus-visible,
  .reader-menu__link.is-current,
  .tafseer-tabs a.is-current,
  .tafseer-tabs a:hover,
  .tafseer-nav a:hover,
  .result-card:hover,
  .result-card:focus-visible,
  .root-options a.is-current,
  .root-options a:hover,
  .recent-list a:hover,
  .recent-list a:focus-visible,
  .article-nav a:hover,
  .surah-card:hover,
  .book-card:hover
),
html[data-reader-theme="night"] :where(body.home-page, body.search-page, body.tafseer-page, body.quran-chapter) :where(
  .button-link:hover,
  .button-link:focus-visible,
  .reader-menu__link:hover,
  .reader-menu__link:focus-visible,
  .reader-menu__link.is-current,
  .tafseer-tabs a.is-current,
  .tafseer-tabs a:hover,
  .tafseer-nav a:hover,
  .result-card:hover,
  .result-card:focus-visible,
  .root-options a.is-current,
  .root-options a:hover,
  .recent-list a:hover,
  .recent-list a:focus-visible,
  .article-nav a:hover,
  .surah-card:hover,
  .book-card:hover
) {
  color: var(--site-theme-primary-text) !important;
  background: var(--site-theme-primary) !important;
  border-color: var(--site-theme-border) !important;
}

body.search-page .result-card:hover,
body.search-page .result-card:focus-visible {
  color: #123e36 !important;
  background: #fff7e4 !important;
  border-color: #b9913d !important;
  box-shadow: 0 14px 26px rgba(67, 49, 15, 0.16) !important;
}

body.search-page .result-card:hover .result-card__title,
body.search-page .result-card:focus-visible .result-card__title,
body.search-page .result-card:hover .result-card__title strong,
body.search-page .result-card:focus-visible .result-card__title strong {
  color: #7a5a1d !important;
}

html[data-reader-theme="sepia"] body.search-page .result-card:hover,
html[data-reader-theme="sepia"] body.search-page .result-card:focus-visible {
  color: var(--site-theme-text) !important;
  background: #f8e8c6 !important;
  border-color: #b9913d !important;
  box-shadow: 0 14px 26px rgba(67, 49, 15, 0.14) !important;
}

html[data-reader-theme="sepia"] body.search-page .result-card:hover .result-card__title,
html[data-reader-theme="sepia"] body.search-page .result-card:focus-visible .result-card__title,
html[data-reader-theme="sepia"] body.search-page .result-card:hover .result-card__title strong,
html[data-reader-theme="sepia"] body.search-page .result-card:focus-visible .result-card__title strong {
  color: #6e5119 !important;
}

html[data-reader-theme="night"] body.search-page .result-card:hover,
html[data-reader-theme="night"] body.search-page .result-card:focus-visible {
  color: var(--site-theme-text) !important;
  background: #223a32 !important;
  border-color: #d9bd6d !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.38) !important;
}

html[data-reader-theme="night"] body.search-page .result-card:hover .result-card__title,
html[data-reader-theme="night"] body.search-page .result-card:focus-visible .result-card__title,
html[data-reader-theme="night"] body.search-page .result-card:hover .result-card__title strong,
html[data-reader-theme="night"] body.search-page .result-card:focus-visible .result-card__title strong {
  color: #fff4d5 !important;
}

html[data-reader-theme="sepia"] body.search-page .result-card__ayah,
html[data-reader-theme="night"] body.search-page .result-card__ayah {
  color: var(--site-theme-text) !important;
}

html[data-reader-theme="sepia"] body.search-page .result-card:hover .result-card__ayah,
html[data-reader-theme="sepia"] body.search-page .result-card:focus-visible .result-card__ayah,
html[data-reader-theme="night"] body.search-page .result-card:hover .result-card__ayah,
html[data-reader-theme="night"] body.search-page .result-card:focus-visible .result-card__ayah {
  color: var(--site-theme-primary-text) !important;
}

html[data-reader-theme="sepia"] body.search-page .result-card:hover .result-card__ayah,
html[data-reader-theme="sepia"] body.search-page .result-card:focus-visible .result-card__ayah {
  color: var(--site-theme-text) !important;
}

html[data-reader-theme="night"] body.search-page .result-card:hover .result-card__ayah,
html[data-reader-theme="night"] body.search-page .result-card:focus-visible .result-card__ayah {
  color: var(--site-theme-text) !important;
}

html[data-reader-theme="night"] body.search-page .search-highlight {
  color: #fff4d5 !important;
  background: rgba(217, 189, 109, 0.22) !important;
  border-color: rgba(217, 189, 109, 0.58) !important;
  box-shadow: inset 0 -0.08em 0 rgba(217, 189, 109, 0.38);
}

html[data-reader-theme="night"] body.search-page .result-card:hover .search-highlight,
html[data-reader-theme="night"] body.search-page .result-card:focus-visible .search-highlight {
  color: #fff4d5 !important;
  background: rgba(217, 189, 109, 0.28) !important;
  border-color: rgba(217, 189, 109, 0.66) !important;
  box-shadow: inset 0 -0.08em 0 rgba(217, 189, 109, 0.42);
}

html[data-reader-theme="night"] .site-theme-switcher {
  background: rgba(23, 35, 31, 0.96);
  border-color: var(--site-theme-border);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

html[data-reader-theme="night"] .site-theme-switcher__button {
  color: #f4ead3;
}

html[data-reader-theme="night"] .site-theme-switcher__button:hover,
html[data-reader-theme="night"] .site-theme-switcher__button:focus-visible,
html[data-reader-theme="night"] .site-theme-switcher__button.is-active {
  color: #13221d;
  background: #d9bd6d;
}

html[data-reader-theme="sepia"] body.home-page .button-link--bookmark.is-disabled,
html[data-reader-theme="sepia"] body.home-page .button-link--bookmark.is-disabled:hover,
html[data-reader-theme="sepia"] body.home-page .button-link--bookmark.is-disabled:focus,
html[data-reader-theme="night"] body.home-page .button-link--bookmark.is-disabled,
html[data-reader-theme="night"] body.home-page .button-link--bookmark.is-disabled:hover,
html[data-reader-theme="night"] body.home-page .button-link--bookmark.is-disabled:focus {
  color: var(--site-theme-muted) !important;
  background: var(--site-theme-surface-soft) !important;
  border-color: var(--site-theme-border) !important;
  border-style: dashed;
  box-shadow: none !important;
}

@media (max-width: 560px) {
  .site-theme-switcher {
    inset-block-end: 8px;
    inset-inline-start: 8px;
    padding: 4px;
  }

  .site-theme-switcher__button {
    min-width: 40px;
    min-height: 34px;
    padding-inline: 7px;
    font-size: 0.88rem;
  }
}

@media print {
  .site-theme-switcher {
    display: none !important;
  }
}