/* ============ Темы ============ */
:root {
  --bar-h: 52px;
  --bottom-h: 46px;
}
body[data-theme="light"] {
  color-scheme: light;
  --bg: #eee7d7; --page: #faf6ec; --ink: #241f18; --muted: #7b7260;
  --accent: #166a4f; --gold: #a8873b; --frame: #b89a52;
  --sel: rgba(197, 160, 73, .30); --bar: rgba(250, 246, 236, .93);
  --line: rgba(36, 31, 24, .1); --rule: rgba(36, 31, 24, .065); --play: rgba(22, 106, 79, .18); --shadow: rgba(80, 60, 20, .18);
}
body[data-theme="turquoise"] {
  color-scheme: light;
  --bg: #f6f1e3; --page: #fbf7ea; --ink: #26201a; --muted: #7e7767;
  --accent: #0e7c86; --gold: #b98a2f; --frame: #0e7c86;
  --sel: rgba(14, 124, 134, .16); --bar: rgba(246, 241, 227, .95);
  --line: rgba(40, 60, 60, .12); --rule: rgba(40, 60, 60, .06); --play: rgba(14, 124, 134, .16); --shadow: rgba(20, 60, 60, .15);
}
body[data-theme="turquoise"] .fsep .fnum { color: var(--accent); }
body[data-theme="sepia"] {
  color-scheme: light;
  --bg: #ddcba6; --page: #f0e3c5; --ink: #382b19; --muted: #7d6d4c;
  --accent: #1d5c46; --gold: #96742c; --frame: #a8873b;
  --sel: rgba(150, 116, 44, .30); --bar: rgba(240, 227, 197, .93);
  --line: rgba(56, 43, 25, .12); --rule: rgba(56, 43, 25, .075); --play: rgba(29, 92, 70, .20); --shadow: rgba(70, 50, 15, .2);
}
body[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f0e0c; --page: #1a1814; --ink: #e6ddc8; --muted: #98917d;
  --accent: #4daa8a; --gold: #c0a35e; --frame: #8f7940;
  --sel: rgba(192, 163, 94, .26); --bar: rgba(26, 24, 20, .93);
  --line: rgba(230, 221, 200, .12); --rule: rgba(230, 221, 200, .07); --play: rgba(77, 170, 138, .24); --shadow: rgba(0, 0, 0, .5);
}

/* ============ База ============ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { height: 100%; }
body {
  height: 100%; overflow: hidden; background: var(--bg); color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  transition: background .3s, color .3s;
  overscroll-behavior: none; touch-action: manipulation;
}
@font-face {
  font-family: "UthmanicHafs";
  src: url("../fonts/UthmanicHafs.woff2") format("woff2");
  font-display: block; /* системная замена рисует коранические знаки огромными кружками — лучше короткое ожидание */
}
.ar { font-family: "UthmanicHafs", serif; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ============ Панели ============ */
.bar {
  position: fixed; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: 4px;
  background: var(--bar); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .3s ease, background .3s;
}
.bar-top {
  top: 0; height: calc(var(--bar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(6px, env(safe-area-inset-right)) 0 max(6px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
}
.bar-bottom {
  bottom: 0; height: calc(var(--bottom-h) + env(safe-area-inset-bottom));
  padding: 0 max(14px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(14px, env(safe-area-inset-left));
  border-top: 1px solid var(--line); gap: 10px;
}
body.immersive .bar-top { transform: translateY(-110%); }
body.immersive .bar-bottom { transform: translateY(110%); }

.icon-btn {
  width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto;
  display: grid; place-items: center; color: var(--ink); opacity: .85;
}
.icon-btn:active { background: var(--sel); }
.icon-btn svg { width: 21px; height: 21px; }
.icon-btn.active { color: var(--gold); opacity: 1; }
.icon-btn.active svg { fill: var(--gold); }

.bar-title { flex: 1; min-width: 0; text-align: center; }
.bar-surah {
  font-weight: 650; font-size: 15px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.bar-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.bar-actions { display: flex; }

/* ползунок страниц */
.bar-page-num { font-size: 11.5px; color: var(--muted); min-width: 26px; text-align: center; }
#pageSlider {
  flex: 1; appearance: none; -webkit-appearance: none; height: 30px; background: none;
  --fill: 0%;
}
/* дорожка: золотая заливка прогресса (справа, по ходу чтения) + засечки джузов */
#pageSlider::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background:
    linear-gradient(to left, var(--gold) var(--fill), transparent var(--fill)),
    repeating-linear-gradient(to left, transparent 0, transparent calc(100% / 30 - 1.5px), var(--line) calc(100% / 30 - 1.5px), var(--line) calc(100% / 30)),
    var(--line);
}
#pageSlider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 21px; height: 21px; border-radius: 50%;
  background: var(--gold); border: 2.5px solid var(--page);
  margin-top: -8.5px; box-shadow: 0 1px 5px var(--shadow);
}
#pageSlider::-moz-range-track {
  height: 4px; border-radius: 2px;
  background:
    linear-gradient(to left, var(--gold) var(--fill), transparent var(--fill)),
    repeating-linear-gradient(to left, transparent 0, transparent calc(100% / 30 - 1.5px), var(--line) calc(100% / 30 - 1.5px), var(--line) calc(100% / 30)),
    var(--line);
}
#pageSlider::-moz-range-thumb {
  width: 21px; height: 21px; border: 2.5px solid var(--page); border-radius: 50%;
  background: var(--gold); box-shadow: 0 1px 5px var(--shadow);
}
.slider-tip {
  position: fixed; bottom: calc(var(--bottom-h) + env(safe-area-inset-bottom) + 10px);
  left: 50%; transform: translateX(-50%); z-index: 21;
  background: var(--bar); border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 14px; font-size: 13px; box-shadow: 0 4px 14px var(--shadow);
  white-space: nowrap;
}

/* ============ Читалка ============ */
.reader {
  position: fixed; inset: 0; overflow: hidden;
  display: block;
}
.page-slot {
  position: absolute; inset: 0;
  display: flex; justify-content: center;
  will-change: transform; overflow-x: hidden; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.page-slot > .mpage { margin: auto; flex: 0 0 auto; } /* центр, а при нехватке высоты — скролл */
#slotNext { transform: translateX(-100%); }
#slotPrev { transform: translateX(100%); }
.reader.animating .page-slot { transition: transform .28s cubic-bezier(.25,.8,.35,1); }

.reader-loading {
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none; opacity: 0; transition: opacity .2s;
}
.reader-loading.show { opacity: 1; }
.spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2.5px solid var(--line); border-top-color: var(--gold);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* страница мусхафа */
.mpage {
  background: var(--page); border-radius: 6px;
  box-shadow: 0 2px 24px var(--shadow);
  padding: calc(var(--fs, 24px) * .55) calc(var(--fs, 24px) * .5);
  direction: rtl; user-select: none; -webkit-user-select: none;
  transition: background .3s;
}
.mline {
  display: flex; direction: rtl; align-items: center;
  height: calc(var(--fs) * var(--lh, 1.82));
  font-family: var(--pf); font-size: var(--fs);
  color: var(--ink); white-space: nowrap;
}
.mline.j { justify-content: space-between; }
.mline.c { justify-content: center; }
.mline span { display: inline-block; }

/* заголовок суры */
.mline.h { justify-content: center; position: relative; }
.surah-frame {
  position: relative; width: 100%; height: 86%;
  display: flex; align-items: center; justify-content: center;
  border-block: 2px solid var(--frame);
}
.surah-frame::before, .surah-frame::after {
  content: ""; position: absolute; inset: 8% 0;
  border-block: 1px solid var(--frame); pointer-events: none;
}
.surah-frame::after {
  inset: 0 auto; width: 100%;
  background:
    radial-gradient(circle at 0% 50%, var(--frame) 0 7%, transparent 8%),
    radial-gradient(circle at 100% 50%, var(--frame) 0 7%, transparent 8%);
  border: 0;
}
.surah-frame .sname {
  font-family: "UthmanicHafs", serif; font-size: calc(var(--fs) * .74);
  color: var(--ink); line-height: 1; padding: 0 .6em; z-index: 1;
}
/* бисмилла */
.mline.b { justify-content: center; }
.mline.b .btext {
  font-family: "UthmanicHafs", serif; font-size: calc(var(--fs) * .92);
  color: var(--ink); line-height: 1;
}

/* орнаментальные страницы 1–2 */
.mpage.ornate {
  border: 2px solid var(--frame); outline: 6px double var(--frame); outline-offset: 5px;
  border-radius: 4px; margin: 12px;
  padding: calc(var(--fs) * 1.1) calc(var(--fs) * .9);
}
.mpage.ornate .mline { justify-content: center; }

.page-footer {
  position: absolute; bottom: max(12px, env(safe-area-inset-bottom));
  left: 0; right: 0; text-align: center; pointer-events: none;
  font-size: 12.5px; color: var(--muted); transition: opacity .3s;
}
body:not(.immersive) .page-footer { opacity: 0; }

/* ============ Боковая панель ============ */
.drawer-overlay, .sheet-overlay {
  position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .42);
  opacity: 0; transition: opacity .25s;
}
.drawer-overlay.show, .sheet-overlay.show { opacity: 1; }
/* во время затухания оверлей не должен перехватывать тапы */
.drawer-overlay:not(.show), .sheet-overlay:not(.show) { pointer-events: none; }

.drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 31;
  width: min(88vw, 360px); background: var(--bg);
  display: flex; flex-direction: column;
  transform: translateX(-102%); transition: transform .28s cubic-bezier(.25,.8,.35,1);
  box-shadow: 4px 0 30px var(--shadow);
  padding-top: env(safe-area-inset-top);
}
.drawer.open { transform: none; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 8px 10px 18px;
}
.drawer-brand { font-size: 20px; font-weight: 700; letter-spacing: .3px; }
.drawer-brand-ar {
  font-family: "UthmanicHafs", serif; font-size: 16px; font-weight: 400;
  color: var(--gold); margin-left: 10px;
}
.continue-btn {
  margin: 0 14px 12px; padding: 11px 14px; border-radius: 12px;
  background: var(--accent); color: #f6f3ea; font-size: 13.5px; font-weight: 600;
  text-align: start; line-height: 1.35;
}
.continue-btn small { display: block; font-weight: 400; opacity: .8; font-size: 11.5px; }

.tabs { display: flex; margin: 0 14px; border-bottom: 1px solid var(--line); }
.tab {
  flex: 1; padding: 9px 4px; font-size: 13.5px; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--gold); }

.drawer-search { padding: 10px 14px 6px; }
.drawer-search input {
  width: 100%; padding: 9px 13px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--page); color: var(--ink); font-size: 16px; outline: none; /* 16px — iOS не зумит */
}
.drawer-search input:focus { border-color: var(--gold); }
.ayah-jump {
  display: block; width: 100%; margin-top: 8px; padding: 10px 13px;
  border-radius: 10px; background: var(--accent); color: #f6f3ea;
  font-size: 13.5px; font-weight: 600; text-align: start;
}

/* RTL-интерфейс (арабский): панель навигации выезжает справа */
[dir="rtl"] .drawer {
  left: auto; right: 0;
  transform: translateX(102%);
  box-shadow: -4px 0 30px var(--shadow);
}
[dir="rtl"] .drawer.open { transform: none; }
[dir="rtl"] .drawer-brand-ar { margin-left: 0; margin-right: 10px; }
[dir="rtl"] .p-title { align-items: flex-start; }
[dir="rtl"] .sheet-tr, [dir="rtl"] .p-tr { direction: ltr; text-align: right; }

.drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0 24px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.list-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 16px; text-align: start;
}
.list-item:active { background: var(--sel); }
.list-item.current { background: var(--sel); }
.num-badge {
  flex: 0 0 34px; height: 34px; display: grid; place-items: center;
  border: 1.5px solid var(--gold); color: var(--gold); border-radius: 10px;
  transform: rotate(45deg); font-size: 12.5px; font-weight: 600;
}
.num-badge > span { transform: rotate(-45deg); }
.li-main { flex: 1; min-width: 0; }
.li-title { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.li-side { text-align: end; flex: 0 0 auto; }
.li-ar { font-family: "UthmanicHafs", serif; font-size: 17px; color: var(--ink); }
.li-page { font-size: 11px; color: var(--muted); margin-top: 1px; }
.li-del { width: 34px; height: 34px; border-radius: 10px; color: var(--muted); display: grid; place-items: center; flex: 0 0 auto; }
.li-del svg { width: 16px; height: 16px; }
.empty-note { padding: 28px 20px; text-align: center; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* ============ Шторка аята ============ */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 31;
  background: var(--bg); border-radius: 18px 18px 0 0;
  padding: 8px 18px calc(16px + env(safe-area-inset-bottom));
  transform: translateY(105%); transition: transform .28s cubic-bezier(.25,.8,.35,1);
  box-shadow: 0 -6px 30px var(--shadow);
  max-width: 560px; margin: 0 auto;
}
.sheet.open { transform: none; }
.sheet-grip { width: 38px; height: 4px; border-radius: 2px; background: var(--line); margin: 4px auto 10px; }
.sheet-title { font-size: 13px; font-weight: 650; color: var(--muted); margin-bottom: 8px; }
.sheet-text {
  font-family: "UthmanicHafs", serif; font-size: 21px; line-height: 2;
  max-height: 30vh; overflow-y: auto; margin-bottom: 12px;
}
.sheet-tr {
  font-size: 15px; line-height: 1.6; color: var(--muted);
  border-top: 1px dashed var(--line); padding: 10px 2px; margin-bottom: 10px;
}
.p-tr {
  font-size: 13.5px; line-height: 1.55; color: var(--muted);
  padding: 6px 10px 2px; max-height: 76px; overflow-y: auto;
}
.sheet-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sheet-btn {
  flex: 1 1 40%; padding: 11px 8px; border-radius: 12px; font-size: 13.5px; font-weight: 600;
  background: var(--page); border: 1px solid var(--line);
}
.sheet-btn-listen { background: var(--accent); color: #f6f3ea; border-color: transparent; flex-basis: 100%; }
.sheet-btn:active { background: var(--sel); }
.sheet-btn.marked { color: var(--gold); border-color: var(--gold); }

/* ============ Аудио-плеер ============ */
.player {
  position: fixed; left: 0; right: 0; z-index: 19;
  bottom: calc(var(--bottom-h) + env(safe-area-inset-bottom));
  background: var(--bar); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 5px 8px;
  transition: bottom .3s ease, padding .3s ease;
}
body.immersive .player {
  bottom: 0;
  padding-bottom: calc(5px + env(safe-area-inset-bottom));
}
.p-wrap {
  display: flex; align-items: center; gap: 2px;
  width: min(100%, 600px); margin: 0 auto;
}
.p-progress {
  position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: transparent; overflow: hidden;
}
#plProgress { height: 100%; width: 0%; background: var(--gold); transition: width .25s linear; }
.p-title {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: flex-start; gap: 1px; padding: 2px 8px; border-radius: 10px;
}
.p-title:active { background: var(--sel); }
.p-info { font-size: 13.5px; font-weight: 650; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-reciter { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--muted); }
.p-reciter svg { width: 11px; height: 11px; }
.p-play {
  background: var(--accent); color: #f6f3ea !important; border-radius: 50%;
  opacity: 1; width: 42px; height: 42px; position: relative;
}
.p-play svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.p-spin {
  position: absolute; inset: 3px; border-radius: 50%; display: none;
  border: 2px solid rgba(246, 243, 234, .35); border-top-color: #f6f3ea;
  animation: spin .8s linear infinite;
}
.player.buffering .p-spin { display: block; }
.player.buffering #plPlayIcon { opacity: .35; }
.p-side { width: 38px; opacity: .7; }
.p-side svg { width: 18px; height: 18px; }
.p-close { opacity: .45; }
.p-chev { transition: transform .25s; }
.player.expanded .p-chev { transform: rotate(180deg); }
/* раскрытая панель */
.p-more { max-width: 600px; margin: 2px auto 0; padding: 4px 6px 6px; }
.p-seek-row { display: flex; align-items: center; gap: 10px; padding: 4px 4px 8px; }
.p-time { font-size: 11.5px; color: var(--muted); min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
.p-seek {
  flex: 1; height: 26px; display: flex; align-items: center; cursor: pointer;
  --pfill: 0%;
}
.p-seek::before {
  content: ""; width: 100%; height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--accent) var(--pfill), var(--line) var(--pfill));
}
.p-seek-fill { display: none; }
.p-opts { display: flex; gap: 8px; padding: 0 4px 4px; }
.p-opt {
  flex: 1; padding: 9px 6px; border-radius: 10px; font-size: 12.5px; font-weight: 600;
  background: var(--page); border: 1px solid var(--line); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.p-opt.on { color: var(--accent); border-color: var(--accent); }
/* список чтецов */
.reciter-list { display: flex; flex-direction: column; padding-bottom: 4px; }
.reciter-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 6px; font-size: 15px; text-align: left;
  border-bottom: 1px solid var(--line);
}
.reciter-item:last-child { border-bottom: 0; }
.reciter-item .check { color: var(--accent); font-weight: 700; opacity: 0; }
.reciter-item.active { color: var(--accent); font-weight: 650; }
.reciter-item.active .check { opacity: 1; }
/* подсветка проигрываемого аята */
span.play { background: var(--play); border-radius: .14em; box-shadow: 0 0 0 .06em var(--play); }
/* вспышка при переходе к аяту */
@keyframes vflash { 0%, 60% { background: var(--sel); } 100% { background: transparent; } }
span.flash { animation: vflash 2.2s ease-out forwards; border-radius: .14em; }

/* ============ Тост ============ */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--bottom-h) + env(safe-area-inset-bottom) + 16px);
  transform: translateX(-50%); z-index: 40;
  background: var(--ink); color: var(--bg); padding: 9px 18px; border-radius: 12px;
  font-size: 13.5px; box-shadow: 0 4px 18px var(--shadow);
  opacity: 0; transition: opacity .25s; pointer-events: none; white-space: nowrap;
}
.toast.show { opacity: .95; }

/* ============ Режим «Прокрутка» ============ */
body.mode-flow .reader { display: none; }
body.mode-page .flow { display: none; }
.flow {
  position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: calc(var(--bar-h) + env(safe-area-inset-top)) 0 calc(var(--bottom-h) + env(safe-area-inset-bottom) + 8px);
  scrollbar-width: thin;
}
.fwrap { max-width: 720px; margin: 0 auto; padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
.fpage { position: relative; }
/* поток слов: перенос по ширине, выравнивание как в печати, линейки по сетке строк */
.fpara {
  direction: rtl; text-align: justify; text-justify: inter-word;
  font-family: var(--pf); font-size: var(--fs); color: var(--ink);
  line-height: calc(var(--fs) * var(--lh, 2.06));
  padding: 0 12px;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--fs) * var(--lh, 2.06) - 1px),
    var(--rule) calc(var(--fs) * var(--lh, 2.06) - 1px),
    var(--rule) calc(var(--fs) * var(--lh, 2.06))
  );
  background-origin: content-box; background-clip: content-box;
}
span.sel { background: var(--sel); border-radius: .14em; box-shadow: 0 0 0 .06em var(--sel); }
.fpage .fblock { padding: 0 12px; }
.fpage .mline.h { padding-block: .1em; }
/* разделитель страниц — заметный, как в печатных читалках */
.fsep {
  display: flex; align-items: center; gap: 14px;
  padding: 26px 16px; color: var(--muted);
}
.fsep::before, .fsep::after {
  content: ""; flex: 1; height: 5px;
  border-block: 1px solid var(--frame); opacity: .55;
}
.fsep::before { border-image: linear-gradient(90deg, transparent, var(--frame)) 1; }
.fsep::after { border-image: linear-gradient(90deg, var(--frame), transparent) 1; }
.fsep .fnum {
  border: 2px solid var(--frame); border-radius: 999px;
  padding: 6px 24px; font-size: 16px; font-weight: 600; letter-spacing: .5px; color: var(--gold);
  background: var(--page); box-shadow: 0 1px 6px var(--shadow), inset 0 0 0 3px var(--bg);
  position: relative;
}
.fsep .fnum::before, .fsep .fnum::after {
  content: "✦"; position: absolute; top: 50%; transform: translateY(-52%);
  font-size: 12px; color: var(--frame);
}
.fsep .fnum::before { left: -26px; }
.fsep .fnum::after { right: -26px; }

/* ============ Настройки ============ */
.aa-icon { font-size: 15px; font-weight: 650; letter-spacing: .5px; }
.settings-sheet { z-index: 33; }
.set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 0;
}
.set-label { font-size: 14px; font-weight: 600; }
.seg { display: flex; background: var(--page); border: 1px solid var(--line); border-radius: 11px; padding: 3px; }
.seg-btn { padding: 7px 16px; border-radius: 8px; font-size: 13.5px; color: var(--muted); }
.seg-wrap { flex-wrap: wrap; justify-content: flex-end; }
.seg-wrap .seg-btn { padding: 7px 11px; }
.seg-btn.active { background: var(--accent); color: #f6f3ea; font-weight: 600; }
.scale-ctl { display: flex; align-items: center; gap: 10px; flex: 1; max-width: 260px; }
.scale-btn {
  min-width: 40px; height: 36px; border-radius: 10px; font-weight: 650;
  background: var(--page); border: 1px solid var(--line);
}
.scale-btn:first-child { font-size: 12px; }
.scale-btn:last-child { font-size: 16px; }
#scaleRange { flex: 1; appearance: none; -webkit-appearance: none; height: 26px; background: none; }
#scaleRange::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: var(--line); }
#scaleRange::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold); margin-top: -7.5px;
}
#scaleRange::-moz-range-track { height: 3px; border-radius: 2px; background: var(--line); }
#scaleRange::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--gold); }
.set-note { font-size: 12px; color: var(--muted); line-height: 1.45; padding-top: 4px; }
.theme-dots { display: flex; gap: 10px; }
.theme-dot {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line);
  padding: 0; position: relative;
}
.theme-dot.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--sel); }

/* измеритель натуральной ширины строк */
#measurer { position: fixed; left: -99999px; top: 0; visibility: hidden; pointer-events: none; }
.measure { position: absolute; }
.measure .mline { width: max-content !important; justify-content: flex-start; padding: 0 !important; border: 0 !important; }

@media (min-width: 700px) {
  .bar-top { padding-inline: max(6px, calc(50vw - 340px)); }
  .bar-bottom { padding-inline: max(14px, calc(50vw - 300px)); }
}

.ayah-jump[hidden] { display: none; }

/* ============ Карточка-подсказка для новых ============ */
.intro-card {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--bottom-h) + env(safe-area-inset-bottom) + 14px);
  z-index: 25; width: min(92vw, 420px);
  background: var(--bar); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 16px 12px; box-shadow: 0 8px 30px var(--shadow);
  animation: introUp .45s cubic-bezier(.25,.8,.35,1);
}
@keyframes introUp { from { opacity: 0; transform: translate(-50%, 24px); } }
.intro-card.hide { opacity: 0; transform: translate(-50%, 16px); transition: all .3s; pointer-events: none; }
.intro-row { display: flex; align-items: center; gap: 12px; padding: 5px 0; font-size: 13.5px; line-height: 1.4; }
.intro-row svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--accent); }
.intro-ok {
  display: block; width: 100%; margin-top: 8px; padding: 9px;
  border-radius: 10px; background: var(--accent); color: #f6f3ea;
  font-size: 13.5px; font-weight: 650;
}
@media (prefers-reduced-motion: reduce) { .intro-card { animation: none; } }

/* басмала: кликабельна, подсветка при звучании */
.mline.b[data-bs] { cursor: pointer; }
.mline.b[data-bs]:active .btext { background: var(--sel); border-radius: .14em; }
.mline.b.play .btext { background: var(--play); border-radius: .14em; box-shadow: 0 0 0 .08em var(--play); }

/* капсула начала джуза — в точном месте, как в печати */
.juz-badge {
  display: inline-block; font-family: "UthmanicHafs", serif;
  font-size: .40em; line-height: 1.3; color: var(--accent);
  border: .09em solid var(--accent); border-radius: 999em;
  padding: .1em .55em .22em; margin: 0 .2em; vertical-align: .5em;
  white-space: nowrap;
}

.mline.b.selb .btext { background: var(--sel); border-radius: .14em; box-shadow: 0 0 0 .08em var(--sel); }