:root {
  color-scheme: dark;
  --ink: #f5f7ff;
  --deep: #090b13;
  --paper: #080a10;
  --sand: #171a2c;
  --gold: #28d8d4;
  --muted: #a6aec4;
  --line: rgba(158, 172, 225, 0.18);
  --cyan: #12d3d2;
  --blue: #347be6;
  --purple: #7b2bf2;
  --glass: rgba(18, 22, 40, 0.66);
  --glass-strong: rgba(22, 27, 51, 0.88);
  --glow: 0 24px 70px rgba(49, 92, 222, 0.22), 0 12px 42px rgba(122, 43, 242, 0.14);
}

html {
  background: #080a10;
}

body {
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 9% 14%, rgba(17, 211, 210, 0.17), transparent 28rem),
    radial-gradient(circle at 88% 12%, rgba(123, 43, 242, 0.2), transparent 32rem),
    radial-gradient(circle at 54% 84%, rgba(52, 123, 230, 0.14), transparent 36rem),
    #080a10;
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(18, 211, 210, 0.035), transparent 42%, rgba(123, 43, 242, 0.055)),
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(255, 255, 255, 0.012) 120px);
}

::selection {
  color: #fff;
  background: rgba(75, 98, 235, 0.78);
}

main {
  position: relative;
}

.topbar {
  position: sticky;
  z-index: 80;
  top: 0;
  max-width: none;
  height: 88px;
  padding-inline: max(24px, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid rgba(129, 156, 229, 0.2);
  background: rgba(8, 10, 17, 0.74);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.26);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}

.topbar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--blue), var(--purple), transparent);
  opacity: 0.75;
}

.brand img {
  filter: drop-shadow(0 0 18px rgba(80, 128, 255, 0.22));
}

.topbar nav a,
.docs-soon {
  color: #aeb6cb;
}

.topbar nav a:hover,
.topbar nav a.active,
.docs-soon small {
  color: #fff;
}

.topbar nav a.active::after {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--purple));
  box-shadow: 0 0 18px rgba(60, 125, 255, 0.72);
}

.offline-banner {
  color: #fff;
  background: linear-gradient(90deg, #0ca8b0, #3f6de2, #7327dc);
}

.skip-link {
  background: linear-gradient(90deg, var(--blue), var(--purple));
}

.site-page h1,
.site-page h2,
.site-page h3,
.site-page h4,
.site-page strong,
.section-head h2,
.mushaf-heading h1,
.hifz-heading h1,
.tajweed-heading h1,
.mutashabihat-heading h1 {
  color: var(--ink);
}

.intro p,
.daily-copy p,
.section-head p,
.mushaf-heading p,
.hifz-heading p,
.review-copy p,
.tajweed-heading p,
.mutashabihat-heading p,
.lesson-kicker {
  color: #5be7e2;
}

.intro span,
.daily-copy span,
.hifz-heading > div > span,
.review-copy > span,
.tajweed-heading span,
.mutashabihat-heading > div > span,
.terms-intro,
.privacy-note,
.source-note {
  color: var(--muted);
}

button,
input,
select,
label {
  accent-color: var(--cyan);
}

input,
select {
  color: var(--ink);
  background: rgba(12, 15, 27, 0.76);
}

input::placeholder {
  color: #7f899f;
}

.mushaf-section,
.hifz-dashboard,
.intro-v2,
.library-section,
.terms-section,
.mutashabihat-section,
.poem-section {
  background: transparent;
}

/* Mushaf */
.native-mushaf {
  color: var(--ink);
  background: transparent;
}

.mushaf-heading {
  margin-top: 28px;
  border: 1px solid rgba(104, 133, 218, 0.22);
  border-radius: 28px 28px 0 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(18, 211, 210, 0.14), transparent 34%),
    radial-gradient(circle at 88% 15%, rgba(123, 43, 242, 0.2), transparent 38%),
    rgba(13, 16, 29, 0.9);
  box-shadow: var(--glow);
}

.edition-badge {
  border-color: rgba(76, 218, 226, 0.42);
  color: #bffefa;
  background: rgba(24, 38, 61, 0.54);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 0 24px rgba(18, 211, 210, 0.08);
}

.native-workspace {
  padding: 16px;
  gap: 16px;
  border: 1px solid rgba(104, 133, 218, 0.2);
  border-top: 0;
  border-radius: 0 0 28px 28px;
  background: rgba(8, 10, 18, 0.68);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.quran-index {
  border: 1px solid rgba(115, 144, 226, 0.22);
  border-radius: 20px;
  background:
    linear-gradient(150deg, rgba(19, 31, 55, 0.94), rgba(14, 15, 31, 0.92)),
    var(--glass-strong);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 20px 55px rgba(0, 0, 0, 0.28);
}

.index-title,
.juz-jump,
.surah-button {
  border-color: rgba(154, 174, 224, 0.13);
}

.index-title span,
.surah-button {
  color: #e9edff;
}

.index-title small,
.juz-jump,
.surah-button small {
  color: #98a5bd;
}

.juz-jump select {
  border-color: rgba(91, 231, 226, 0.25);
  color: #fff;
  background: rgba(7, 10, 20, 0.72);
}

.surah-button:hover,
.surah-button.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(23, 200, 207, 0.27), rgba(64, 105, 229, 0.34), rgba(116, 39, 218, 0.3));
  box-shadow: inset -3px 0 var(--cyan), 0 0 24px rgba(67, 104, 231, 0.14);
}

.native-book-area {
  border: 1px solid rgba(111, 139, 219, 0.22);
  border-radius: 20px;
  background: rgba(11, 14, 25, 0.86);
  overflow: hidden;
}

.native-toolbar {
  color: #c8d0e5;
  border-color: rgba(139, 157, 208, 0.16);
  background: rgba(16, 20, 36, 0.88);
}

.native-toolbar button,
.native-toolbar input,
.native-toolbar select,
.mutash-toolbar button,
.mutash-toolbar input {
  color: #eef2ff;
  border-color: rgba(142, 161, 215, 0.22);
  border-radius: 10px;
  background: rgba(8, 11, 22, 0.72);
}

.native-toolbar button:hover,
.mutash-toolbar button:hover {
  color: #8ff9f4;
  border-color: rgba(56, 221, 220, 0.62);
  box-shadow: 0 0 18px rgba(18, 211, 210, 0.1);
}

.bookmark-tool.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(100deg, var(--blue), var(--purple));
}

.native-spread {
  gap: 16px;
  background:
    radial-gradient(circle at 20% 18%, rgba(14, 167, 198, 0.1), transparent 35%),
    radial-gradient(circle at 82% 75%, rgba(121, 42, 240, 0.12), transparent 38%),
    #090c15;
}

.quran-page {
  color: #eef4ff;
  border: 1px solid rgba(102, 134, 231, 0.36);
  background:
    linear-gradient(155deg, rgba(18, 25, 45, 0.96), rgba(10, 13, 25, 0.98));
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.38), 0 0 44px rgba(69, 91, 222, 0.12);
}

.quran-page::before {
  border-color: rgba(62, 213, 218, 0.2);
}

.quran-page::after,
.ayah-number,
.surah-banner::before,
.surah-banner::after {
  color: #61e6e1;
}

.quran-page-header,
.quran-page-footer {
  color: #9da9c3;
  border-color: rgba(139, 159, 214, 0.18);
}

.quran-page-header strong,
.surah-banner {
  color: #f4f7ff;
}

.surah-banner,
.quran-basmala {
  border-color: rgba(61, 217, 218, 0.32);
  color: #a7fffb;
}

.surah-banner small {
  color: #9da9c2;
}

.ayah-number {
  border-color: rgba(78, 222, 222, 0.58);
  background: rgba(30, 86, 112, 0.22);
}

.qiraat-panel {
  color: var(--ink);
  border-color: rgba(121, 149, 224, 0.2);
  background: rgba(10, 13, 24, 0.96);
}

.qiraat-panel-head,
.qiraat-reader-strip,
.qiraat-reader-strip > span,
.qiraat-page-notes + article,
.qiraat-page-notes li {
  border-color: rgba(142, 160, 213, 0.14);
}

.qiraat-panel-head {
  background: rgba(18, 22, 39, 0.94);
}

.qiraat-panel-head h3,
.qiraat-reader-strip b,
.qiraat-page-notes > h4,
.qiraat-page-notes li {
  color: #edf2ff;
}

.qiraat-panel-head p,
.qiraat-reader-strip small,
.qiraat-page-notes p,
.qiraat-loading {
  color: var(--muted);
}

.qiraat-panel-head > span,
.qiraat-page-notes h5 {
  color: #69ebe6;
}

/* Shared glass surfaces */
.hifz-summary,
.hifz-activity,
.matn-progress-panel,
.term-card,
.mutash-group-card,
.mutash-empty,
.lesson-detail,
.daily-grid,
.text-card,
.matn-progress-row {
  color: var(--ink);
  border-color: rgba(137, 159, 221, 0.18);
  background: var(--glass);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.045), 0 18px 48px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}

.hifz-dashboard,
.terms-section,
.mutashabihat-section,
.poem-section {
  padding-inline: 0;
}

.hifz-heading,
.section-head,
.tajweed-heading,
.mutashabihat-heading,
.activity-heading,
.mutash-controls,
.mutash-group-heading,
.tajweed-quiz,
.verse {
  border-color: var(--line);
}

.hifz-actions button,
.import-progress,
.mutash-filter-tabs button,
.mutash-surah-filter select {
  color: #dce4fa;
  border-color: rgba(145, 163, 216, 0.24);
  border-radius: 999px;
  background: rgba(19, 24, 43, 0.66);
}

.hifz-actions button:hover,
.import-progress:hover,
.mutash-filter-tabs button:hover,
.mutash-filter-tabs button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(100deg, var(--cyan), var(--blue), var(--purple));
  box-shadow: 0 8px 24px rgba(69, 95, 232, 0.25);
}

.hifz-summary {
  overflow: hidden;
  border-radius: 22px;
}

.hifz-summary > div,
.activity-row,
.matn-progress-rows {
  border-color: rgba(147, 166, 217, 0.14);
}

.hifz-summary strong,
.activity-row,
.activity-heading h2,
.matn-progress-row b {
  color: var(--ink);
}

.hifz-summary small,
.activity-heading span,
.activity-row small,
.matn-progress-row span {
  color: var(--muted);
}

.quran-review-panel,
.player-shell,
.tajweed-section {
  border: 1px solid rgba(105, 137, 227, 0.24);
  border-radius: 28px;
  background:
    radial-gradient(circle at 8% 22%, rgba(18, 211, 210, 0.16), transparent 35%),
    radial-gradient(circle at 92% 80%, rgba(123, 43, 242, 0.22), transparent 38%),
    linear-gradient(145deg, rgba(17, 25, 47, 0.96), rgba(9, 10, 21, 0.98));
  box-shadow: var(--glow);
}

.quran-review-panel::after,
.player-shell::before,
.tajweed-section::before {
  color: #4e67dd;
  opacity: 0.16;
}

.quran-review-form input,
.daily-form input,
.ward-range,
.quiz-option,
.tajweed-example,
.lesson-points li {
  color: #e8edff;
  border-color: rgba(139, 160, 217, 0.2);
  background: rgba(10, 14, 27, 0.68);
}

.quran-review-form button,
.today-review-actions #completeReview,
.daily-form button,
.play,
.tajweed-quiz button,
.mutash-load-more {
  color: #fff;
  border: 0;
  background: linear-gradient(100deg, var(--cyan), var(--blue), var(--purple));
  box-shadow: 0 9px 28px rgba(61, 98, 230, 0.28);
}

.today-review,
.repeat,
.review-progress,
.timeline input,
.ward-progress,
.matn-mini-progress {
  border-color: rgba(151, 171, 220, 0.2);
}

.review-progress,
.ward-progress,
.matn-mini-progress {
  background: rgba(151, 171, 220, 0.14);
}

.review-progress i,
.ward-progress i,
.matn-mini-progress i {
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--purple));
}

.hifz-activity,
.matn-progress-panel,
.term-card,
.mutash-group-card {
  border-radius: 22px;
}

.activity-row span,
.matn-progress-row small,
.term-card h3::before,
.mutash-group-heading p,
.mutash-occurrence b,
.mutash-save,
.mutash-expand {
  color: #54dfdc;
}

.activity-row:hover,
.mutash-occurrence:hover {
  background: rgba(55, 75, 146, 0.2);
}

.matn-progress-rows,
.text-library {
  gap: 12px;
  background: transparent;
}

.text-card {
  border: 1px solid rgba(137, 159, 221, 0.18);
  border-radius: 22px;
}

.text-card span,
.track-mark,
.ornament {
  color: #61e7e2;
}

.text-card small {
  color: var(--muted);
}

.text-card.selected {
  color: #fff;
  border-color: rgba(92, 211, 230, 0.36);
  background:
    radial-gradient(circle at 10% 20%, rgba(18, 211, 210, 0.2), transparent 45%),
    radial-gradient(circle at 90% 90%, rgba(123, 43, 242, 0.26), transparent 45%),
    rgba(24, 29, 54, 0.82);
  box-shadow: var(--glow);
}

.player-shell {
  margin-top: 10px;
}

.ornament,
.round,
.repeat-options button.selected {
  border-color: rgba(83, 225, 224, 0.5);
}

.repeat-options button,
.timeline div,
.speed,
.repeat {
  color: #aeb8d1;
}

.daily-grid {
  border: 1px solid rgba(137, 159, 221, 0.18);
  border-radius: 28px;
}

.daily-form .ward-secondary {
  color: #e8edff;
  border: 1px solid rgba(118, 208, 227, 0.34);
  background: rgba(15, 23, 42, 0.72);
}

.daily-form .ward-complete {
  background: linear-gradient(100deg, #2b73d9, #7528db);
}

.ward-range strong {
  color: #a7fffb;
}

.search,
.term-search,
.mutash-search {
  color: #57e4df;
  border-color: rgba(110, 217, 230, 0.34);
}

.search input,
.term-search input,
.mutash-search input {
  color: #f2f5ff;
}

.term-card h3,
.mutash-stats strong,
.mutash-group-heading h3,
.mutash-empty b,
.mutash-occurrence,
.lesson-content-title,
.tajweed-example b,
.tajweed-quiz legend,
.tajweed-quiz p {
  color: var(--ink);
}

.term-card p,
.mutash-occurrence small,
.mutash-results-head span,
.mutash-results-head p,
.mutash-method-note,
.lesson-summary {
  color: var(--muted);
}

.tajweed-section {
  margin-top: 34px;
}

.tajweed-heading output {
  color: #a8fffb;
  border-color: rgba(70, 219, 219, 0.45);
  border-radius: 999px;
  background: rgba(29, 48, 77, 0.42);
}

.lesson-chapter,
.lesson-tab,
.tajweed-heading {
  border-color: rgba(142, 162, 218, 0.18);
}

.lesson-tab {
  color: #cfd7eb;
  border-radius: 14px;
  background: rgba(12, 16, 29, 0.54);
}

.lesson-tab small {
  color: #8f9bb4;
}

.lesson-tab[aria-selected="true"] {
  color: #fff;
  border-color: rgba(69, 222, 222, 0.42);
  background: linear-gradient(100deg, rgba(18, 211, 210, 0.28), rgba(59, 102, 228, 0.34), rgba(123, 43, 242, 0.3));
}

.lesson-detail {
  border: 1px solid rgba(133, 156, 220, 0.18);
  border-radius: 24px;
}

.lesson-points li {
  border-right-color: var(--cyan);
  color: #cdd5e9;
}

.quiz-option:has(input:checked) {
  color: #fff;
  border-color: rgba(62, 222, 220, 0.6);
  background: linear-gradient(100deg, rgba(18, 211, 210, 0.2), rgba(71, 95, 225, 0.25));
}

.mutash-stats {
  overflow: hidden;
  border-color: rgba(138, 159, 219, 0.18);
  border-radius: 22px;
  background: var(--glass);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}

.mutash-stats > div,
.mutash-group-heading,
.mutash-occurrence {
  border-color: rgba(142, 160, 213, 0.14);
}

.mutash-stats small,
.mutash-surah-filter {
  color: var(--muted);
}

.mutash-group-card {
  overflow: hidden;
}

.mutash-group-heading {
  background: rgba(20, 24, 43, 0.72);
}

.mutash-occurrence {
  color: #edf2ff;
  background: transparent;
}

.poem-content {
  color: #edf2ff;
}

.verse-no {
  color: #69e9e4;
  border-color: rgba(85, 226, 222, 0.58);
  background: rgba(23, 94, 119, 0.18);
}

.site-footer {
  max-width: 1180px;
  border-color: rgba(143, 163, 218, 0.16);
  color: var(--muted);
}

.site-footer a {
  color: #75ece7;
  text-decoration-color: rgba(92, 229, 226, 0.46);
}

.site-footer a:hover {
  color: #a693ff;
}

@media (max-width: 900px) {
  .topbar {
    padding-inline: 20px;
  }

  .native-workspace {
    padding: 10px;
  }
}

@media (max-width: 720px) {
  body {
    background:
      radial-gradient(circle at 2% 9%, rgba(18, 211, 210, 0.14), transparent 22rem),
      radial-gradient(circle at 98% 18%, rgba(123, 43, 242, 0.18), transparent 25rem),
      #080a10;
  }

  .topbar {
    gap: 12px;
    padding: 12px 18px 8px;
  }

  .topbar nav {
    padding-bottom: 2px;
  }

  .hifz-dashboard,
  .terms-section,
  .mutashabihat-section,
  .poem-section {
    padding-inline: 20px;
  }

  .mushaf-heading {
    margin-top: 12px;
    border-radius: 22px 22px 0 0;
  }

  .native-workspace {
    padding: 8px;
    border-radius: 0 0 22px 22px;
  }

  .quran-index,
  .native-book-area {
    border-radius: 16px;
  }

  .quran-index {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
  }

  .native-spread {
    gap: 10px;
    padding: 9px;
  }

  .quran-page {
    min-height: 690px;
    padding-inline: 20px;
  }

  .quran-flow {
    font-size: calc(22px * var(--quran-scale));
  }

  .hifz-summary,
  .text-library,
  .terms-grid,
  .mutash-stats,
  .mutash-occurrences {
    gap: 10px;
  }

  .hifz-summary > div,
  .mutash-stats > div,
  .mutash-occurrence {
    border: 1px solid rgba(142, 160, 213, 0.14);
    background: rgba(16, 20, 36, 0.58);
  }

  .quran-review-panel,
  .player-shell,
  .tajweed-section,
  .daily-grid {
    border-radius: 20px;
  }

  .daily-grid,
  .tajweed-section {
    margin-inline: 12px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .text-card,
  .term-card,
  .mutash-group-card,
  .activity-row,
  .lesson-tab,
  .native-toolbar button {
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
  }

  .text-card:hover,
  .term-card:hover,
  .mutash-group-card:hover {
    transform: translateY(-3px);
    border-color: rgba(82, 215, 224, 0.34);
    box-shadow: 0 22px 56px rgba(28, 43, 110, 0.25);
  }
}