@font-face {
  font-family: 'Amiri Quran'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('vendor/amiri-quran/amiri-quran-arabic-400-normal.woff2') format('woff2');
}
/* Sirat portal v1 - styles ported from the Main.dc.html board (colours, type, spacing), with a dark set */
:root {
  --bg: #F3F5F1; --bg2: #E9EDE8; --card: #FFFFFF; --ink: #13201C; --muted: #56635D; --line: #DCE3DE; --line2: #EEF2EF;
  --soft: #E3EEE9; --soft-ink: #0B3B2F; --accent: #0E5A47; --accent-h: #0A4334; --accent-ink: #0E5A47; --on-accent: #FFFFFF;
  --amber-bg: #FBF1D6; --amber-fg: #6B4E0E; --red-bg: #F6E0DC; --red-fg: #7A2A1C; --dash: #B9C6BF; --chip: #EEF2EF;
  --page: #FFFDF7; --page-line: #E4DCC8; --page-num: #8A7A55; --video: #0F1714; --video-btn: #2A3631; --video-text: #C9D3CE;
  --dial: #F7F9F6; --focus: #0E5A47; --shadow: 0 1px 0 rgba(19, 32, 28, .02);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0E1412; --bg2: #0A0F0D; --card: #17201C; --ink: #E5EDE9; --muted: #9AA8A1; --line: #2A3631; --line2: #212B27;
  --soft: #1C302A; --soft-ink: #BFE5D5; --accent: #1E7860; --accent-h: #23896E; --accent-ink: #6CCBA8; --on-accent: #FFFFFF;
  --amber-bg: #3A3013; --amber-fg: #F0D58F; --red-bg: #3E221D; --red-fg: #F3B6AA; --dash: #3C4B45; --chip: #1F2925;
  --page: #1D1B16; --page-line: #3B3528; --page-num: #CDBB8E; --video: #000000; --video-btn: #26312D; --video-text: #C9D3CE;
  --dial: #121A17; --focus: #6CCBA8; --shadow: none;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1412; --bg2: #0A0F0D; --card: #17201C; --ink: #E5EDE9; --muted: #9AA8A1; --line: #2A3631; --line2: #212B27;
    --soft: #1C302A; --soft-ink: #BFE5D5; --accent: #1E7860; --accent-h: #23896E; --accent-ink: #6CCBA8; --on-accent: #FFFFFF;
    --amber-bg: #3A3013; --amber-fg: #F0D58F; --red-bg: #3E221D; --red-fg: #F3B6AA; --dash: #3C4B45; --chip: #1F2925;
    --page: #1D1B16; --page-line: #3B3528; --page-num: #CDBB8E; --video: #000000; --video-btn: #26312D; --video-text: #C9D3CE;
    --dial: #121A17; --focus: #6CCBA8; --shadow: none;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { background: var(--bg2); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--bg2); color: var(--ink); direction: rtl; overflow: hidden;
  font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', Tahoma, sans-serif; font-size: 15px; line-height: 1.5;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: var(--accent-ink); }
a:hover { color: var(--accent-h); }
:root[data-theme="dark"] a:hover { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.amiri { font-family: Amiri, 'Times New Roman', serif; }
.muted { color: var(--muted); }
.ltr { direction: ltr; unicode-bidi: isolate; }
.num { font-variant-numeric: tabular-nums; }
.wrap { overflow-wrap: anywhere; word-break: normal; }

#app {
  position: relative; max-width: 760px; margin: 0 auto; height: 100vh; height: 100dvh; display: flex; flex-direction: column;
  background: var(--bg); overflow: hidden;
}
@media (min-width: 761px) { #app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }

/* header */
.top {
  flex: 0 0 auto; height: 60px; padding: 0 10px 0 12px; display: flex; align-items: center; gap: 6px;
  background: var(--card); border-bottom: 1px solid var(--line);
}
.iconbtn {
  flex: 0 0 auto; width: 44px; height: 44px; border: 0; padding: 0; background: transparent; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer;
}
.iconbtn.sm { width: 40px; height: 40px; color: var(--muted); }
.logo { flex: 0 0 auto; width: 36px; height: 36px; display: block; margin-left: 4px; }
.top h1 {
  flex: 1 1 auto; min-width: 0; margin: 0; font-family: Amiri, 'Times New Roman', serif; font-weight: 700; font-size: 22px;
  line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* main area */
#main { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px 16px 28px; -webkit-overflow-scrolling: touch; }
#pview { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px 16px 28px; }
.col { display: flex; flex-direction: column; gap: 14px; }
.col.g20 { gap: 20px; }
.col.g12 { gap: 12px; }
.col.g10 { gap: 10px; }
.col.g8 { gap: 8px; }
.col.g6 { gap: 6px; }
.col.g4 { gap: 4px; }
.col.g2 { gap: 2px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.pad { padding: 14px 16px; }
h2.h { margin: 0; font-family: Amiri, serif; font-size: 23px; font-weight: 700; line-height: 1.4; }
h2.h24 { margin: 0; font-family: Amiri, serif; font-size: 24px; font-weight: 700; line-height: 1.45; }
h3.h { margin: 0; font-size: 15px; font-weight: 700; }
h3.sub { margin: 0; font-size: 14px; font-weight: 700; color: var(--muted); }
p { margin: 0; }
.small { font-size: 12px; color: var(--muted); line-height: 1.6; }
.note { font-size: 12px; color: var(--muted); line-height: 1.8; }
.row { display: flex; align-items: center; gap: 10px; }
.between { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }

/* home */
.searchpill {
  display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; background: var(--card);
  border: 1px solid var(--line); border-radius: 16px; color: var(--muted); font-size: 15px; text-align: right; cursor: pointer;
  text-decoration: none; width: 100%;
}
.searchpill span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resume {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; text-align: right; cursor: pointer; color: var(--ink); width: 100%;
}
.resume .ico {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
}
.resume .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.resume .t { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar4 { display: block; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.bar4 > span { display: block; height: 4px; background: var(--accent); }
.quick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.quick a {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0; text-decoration: none; color: var(--ink);
  font-size: 12px; font-weight: 500; text-align: center;
}
.quick .tile {
  width: 52px; height: 52px; border-radius: 16px; background: var(--soft); color: var(--accent-ink); display: flex;
  align-items: center; justify-content: center;
}
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 600px) { .grid2.br { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.branch {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 140px; padding: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; text-align: right; color: var(--ink);
  cursor: pointer; text-decoration: none;
}
.branch .nm { font-weight: 600; font-size: 15px; line-height: 1.45; }
.badge { position: relative; width: 40px; height: 40px; display: block; flex: 0 0 auto; }
.badge b {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; font-family: Amiri, serif;
  font-weight: 700; font-size: 16px; color: var(--accent-ink);
}
.badge .st { fill: var(--soft); stroke: var(--accent-ink); }
.chip { font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 8px; }
.chip.g { color: var(--soft-ink); background: var(--soft); }
.chip.a { color: var(--amber-fg); background: var(--amber-bg); }
.chip.r { color: var(--red-fg); background: var(--red-bg); }
.chip.n { color: var(--muted); background: var(--chip); }
.dashed {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: transparent; border: 1px dashed var(--dash);
  border-radius: 14px; color: var(--ink); font-size: 14px; cursor: pointer; text-align: right; text-decoration: none;
}
.dashed span.f { flex: 1; }

/* node */
.crumbs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12.5px; color: var(--muted); }
.crumbs a { color: var(--accent-ink); padding: 2px 0; }
.crumbs .cur { color: var(--ink); font-weight: 600; }
.crumbs .crumb-home { display: inline-flex; width: 28px; height: 28px; flex: 0 0 auto; align-items: center; justify-content: center; color: var(--accent-ink); }
.crumbs .crumbsep { color: var(--muted); }
.nodecard { padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; }
.nodecard .nm { font-weight: 700; font-size: 16px; line-height: 1.5; }
.nodecard .sb { font-size: 13px; color: var(--muted); }
.nodecard .nt { font-size: 12px; color: var(--amber-fg); line-height: 1.7; }
.lrow {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 11px 14px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; text-align: right; color: var(--ink); cursor: pointer; text-decoration: none;
  width: 100%;
}
.lrow .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lrow .nm { font-weight: 600; font-size: 15px; line-height: 1.5; }
.lrow .mt { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
.lrow .mt .empty { color: var(--amber-fg); }
.lrow svg.chev { flex: 0 0 auto; stroke: var(--muted); }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.pill {
  flex: 0 0 auto; height: 38px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.pill .c { font-weight: 500; }
.pill.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.erow {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; text-align: right; color: var(--ink); cursor: pointer; text-decoration: none; width: 100%;
}
.erow .ic {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; background: var(--soft); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
}
.erow .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.erow .t { font-weight: 600; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.erow .w { font-size: 13px; overflow-wrap: anywhere; }
.erow .m { font-size: 12px; color: var(--muted); line-height: 1.6; overflow-wrap: anywhere; }
.morebtn {
  height: 46px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--accent-ink);
  font-size: 14px; font-weight: 600; cursor: pointer; width: 100%;
}
.emptybox {
  padding: 22px 18px; background: var(--card); border: 1px dashed var(--dash); border-radius: 16px; display: flex;
  flex-direction: column; gap: 10px; align-items: flex-start;
}
.emptybox .t { font-weight: 600; font-size: 16px; }
.emptybox .d { font-size: 14px; color: var(--muted); line-height: 1.8; }
.loading { padding: 18px; text-align: center; color: var(--muted); font-size: 14px; }
.errbox { padding: 18px; border: 1px dashed var(--dash); border-radius: 14px; color: var(--muted); font-size: 14px; line-height: 1.8; }

/* entry */
.btns { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  flex: 1 1 140px; height: 52px; border-radius: 16px; border: 0; background: var(--accent); color: var(--on-accent);
  font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; padding: 0 14px;
}
.btn:hover { background: var(--accent-h); color: var(--on-accent); }
.btn.ghost { background: var(--card); color: var(--accent-ink); border: 1.5px solid var(--accent-ink); }
.btn.ghost:hover { background: var(--soft); color: var(--accent-ink); }
.info { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; line-height: 1.8; }
.info .k { color: var(--muted); }
.info a { overflow-wrap: anywhere; }
.confchip { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 10px; }
.cH { color: var(--soft-ink); background: var(--soft); }
.cM { color: var(--amber-fg); background: var(--amber-bg); }
.cL { color: var(--red-fg); background: var(--red-bg); }
.files { display: flex; flex-direction: column; gap: 6px; }
.fdir { font-size: 12.5px; font-weight: 700; color: var(--muted); padding: 6px 2px 0; overflow-wrap: anywhere; }
.frow {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--card); border: 1px solid var(--line2);
  border-radius: 12px; font-size: 13.5px; color: var(--ink); text-decoration: none; width: 100%; text-align: right; cursor: pointer;
}
.frow .fi { flex: 0 0 auto; color: var(--accent-ink); display: flex; }
.frow .fn { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.frow .fs { flex: 0 0 auto; font-size: 12px; color: var(--muted); }
.frow.cur { border-color: var(--accent-ink); background: var(--soft); }

/* player */
.vstage { position: relative; width: 100%; background: var(--video); border-radius: 16px; overflow: hidden; }
.vstage video { display: block; width: 100%; max-height: 52vh; background: var(--video); }
.art {
  height: 180px; border-radius: 20px; background: var(--soft); color: var(--accent-ink); display: flex; align-items: center;
  justify-content: center;
}
.seek { width: 100%; margin: 0; height: 22px; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.seek::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to left, var(--accent) var(--p, 0%), var(--line) var(--p, 0%)); }
.seek::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
.seek::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }
.seek::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; background: var(--accent); border: 2px solid var(--card); }
.seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--card); }
.times { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ctl { direction: ltr; display: flex; align-items: center; justify-content: center; gap: 22px; }
.round {
  width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; font-size: 10px; font-weight: 700;
}
.round.sm { width: 44px; height: 44px; }
.round:disabled { opacity: .35; cursor: default; }
.bigplay {
  width: 76px; height: 76px; border-radius: 50%; border: 0; background: var(--accent); color: var(--on-accent); display: flex;
  align-items: center; justify-content: center; cursor: pointer;
}
.speed {
  height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.pmsg { font-size: 13px; color: var(--amber-fg); background: var(--amber-bg); border-radius: 12px; padding: 10px 12px; line-height: 1.7; }

/* mini player + nav */
.mini {
  flex: 0 0 auto; position: relative; height: 62px; display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: var(--card); border-top: 1px solid var(--line);
}
.mini .pr { position: absolute; top: 0; right: 0; height: 3px; width: 0; background: var(--accent); }
.mini .open {
  flex: 1; min-width: 0; height: 56px; display: flex; flex-direction: column; justify-content: center; gap: 2px; border: 0;
  padding: 0; background: transparent; text-align: right; color: var(--ink); cursor: pointer;
}
.mini .open .t { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .open .s { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mini .pp {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.nav {
  flex: 0 0 auto; height: 66px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--card);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0);
}
.nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600;
  color: var(--muted); text-decoration: none;
}
.nav a.on { color: var(--accent-ink); }

/* reader */
.pagebox {
  position: relative; min-height: 400px; background: var(--page); border: 1px solid var(--page-line); border-radius: 12px; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 10px; text-align: center; overflow: auto;
}
.pagebox canvas { display: block; max-width: none; background: #FFFFFF; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.pagebox .big { font-family: Amiri, serif; font-size: 52px; font-weight: 700; color: var(--page-num); }
.pagebox img { max-width: 100%; height: auto; display: block; }
.docframe { width: 100%; height: 66vh; min-height: 360px; border: 1px solid var(--page-line); border-radius: 12px; background: #FFFFFF; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pbtn {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.pbtn.p { border: 0; background: var(--accent); color: var(--on-accent); }
.pbtn:disabled { opacity: .4; cursor: default; }
.pager .mid { font-size: 14px; color: var(--muted); text-align: center; min-width: 0; }
.zoom { display: flex; justify-content: center; gap: 8px; }

/* search */
.sbox {
  position: relative; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; background: var(--card);
  border: 1.5px solid var(--accent-ink); border-radius: 16px; color: var(--muted);
}
.sbox input {
  flex: 1; min-width: 0; height: 46px; border: 0; outline: none; background: transparent; font-size: 16px; color: var(--ink);
  direction: rtl;
}
.sbox input::-webkit-search-cancel-button { display: none; }
.xbtn {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--chip); color: var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.sugg { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sg {
  height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-size: 13px; cursor: pointer;
}
.nohits { padding: 20px; border: 1px dashed var(--dash); border-radius: 14px; color: var(--muted); font-size: 14px; text-align: center; line-height: 1.8; }

/* kids */
.ktile {
  min-height: 110px; border-radius: 22px; border: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; padding: 12px; font-size: 17px; font-weight: 700; cursor: pointer; text-align: center;
  text-decoration: none;
}
.ktile span { font-size: 12px; font-weight: 600; }

/* about */
.hero { padding: 22px 18px; display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; border-radius: 18px; }
.hero h2 { margin: 0; font-family: Amiri, serif; font-size: 27px; font-weight: 700; }
.bul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.bul li { padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; font-size: 14px; line-height: 1.8; }
.greenlink {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 12px 16px;
  border-radius: 14px; background: var(--soft); color: var(--soft-ink); font-weight: 600; font-size: 14px; text-decoration: none;
}
.greenlink:hover { color: var(--soft-ink); }
.srcs { display: flex; flex-direction: column; gap: 8px; }
.lib-list { width: 100%; }
.src { padding: 12px 14px; font-size: 13.5px; line-height: 1.8; }
.src .t { font-weight: 700; }
.lib-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; text-align: left; unicode-bidi: isolate; }
.lib-row > bdi { overflow-wrap: anywhere; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }

/* tools */
.nextcard { padding: 18px; border-radius: 20px; background: var(--accent); color: var(--on-accent); display: flex; flex-direction: column; gap: 4px; }
.nextcard .nm { font-family: Amiri, serif; font-size: 36px; font-weight: 700; line-height: 1.3; }
.ptimes { overflow: hidden; }
.ptimes .pr { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line2); font-size: 15px; font-weight: 500; }
.ptimes .pr:last-child { border-bottom: 0; }
.ptimes .pr.nx { background: var(--soft); font-weight: 700; }
.ptimes .pr.dim { color: var(--muted); }
.ptimes .tag { font-size: 11px; font-weight: 700; color: var(--on-accent); background: var(--accent); border-radius: 999px; padding: 2px 8px; }
.qibla { display: flex; align-items: center; gap: 16px; padding: 16px; }
.dial { position: relative; flex: 0 0 auto; width: 108px; height: 108px; border-radius: 50%; border: 2px solid var(--line); background: var(--dial); }
.dial .n { position: absolute; top: 3px; left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); }
.dial .needle { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; }
.dial .needle i { display: block; width: 4px; height: 44px; margin-top: 8px; border-radius: 2px; background: var(--accent-ink); }
.dial .hub { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ink); }
.qdeg { font-size: 26px; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.fld { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.fld select, .fld input {
  height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 0 12px;
  font-size: 15px; width: 100%; min-width: 0;
}
.fld input { direction: ltr; text-align: right; }
.fld input.rtl { direction: rtl; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tas { padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tasbtn {
  width: 150px; height: 150px; border-radius: 50%; border: 6px solid var(--soft); background: var(--accent); color: var(--on-accent);
  font-size: 44px; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums;
}
.tasbtn.done { background: var(--accent-h); }
.adhchapter[hidden] { display: none; }
.adh-counter { position: sticky; z-index: 3; bottom: 6px; width: min(100%, 520px); box-sizing: border-box; margin: 8px auto 0; padding: 10px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); box-shadow: 0 4px 18px rgba(0,0,0,.18); text-align: right; }
.adh-counter-title { font-size: 13px; font-weight: 700; line-height: 1.6; }
.adh-counter-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adh-counter-controls .fld { flex: 1 1 100px; min-width: 100px; }
.adh-count { flex: 0 0 62px; height: 62px; border-radius: 50%; border: 3px solid var(--soft); background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 20px; }
.ghostpill {
  height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted);
  font-size: 13px; cursor: pointer;
}
.result { padding: 16px; border-radius: 16px; background: var(--soft); color: var(--soft-ink); display: flex; flex-direction: column; gap: 6px; }
.result .big { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.kv b { font-variant-numeric: tabular-nums; }

/* coverage */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 600px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat { padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.stat .v { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .l { font-size: 12px; color: var(--muted); line-height: 1.6; }
.covrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line2); }
.covrow:last-child { border-bottom: 0; }
.covrow .nm { font-weight: 600; font-size: 14px; }
.covrow .mt { font-size: 12px; color: var(--muted); }
.meter { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.meter i { display: block; height: 6px; background: var(--accent); }
.step { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; }
.step .n {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--soft); color: var(--accent-ink); display: flex;
  align-items: center; justify-content: center; font-weight: 700; font-family: Amiri, serif;
}
.step .n.on { background: var(--accent); color: var(--on-accent); }
.step .tx { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.8; }

/* v2: the rights of QuranEnc, the mushaf screen, the adhkar screen */
.ltrblock { padding: 8px 10px; border-radius: 10px; background: var(--bg2); font-size: 12.5px; line-height: 1.7; overflow-wrap: anywhere; }
.mbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mbar .mpos { flex: 1 1 auto; min-width: 0; text-align: right; font-size: 13px; color: var(--muted); }
.mtools { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.mtools .fld { flex: 1 1 140px; min-width: 0; }
.mreading { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.mstage {
  --page: #FFFDF7; --page-line: #E6E0D2;
  position: relative; background: var(--page); border: 1px solid var(--page-line); border-radius: 14px; padding: 10px;
  overflow: auto; min-width: 0; display: flex; justify-content: center; -webkit-user-select: none; user-select: none; touch-action: pan-y;
}
.mushaf[data-tone="white"] .mstage { --page: #FFFFFF; --page-line: #D8D8D8; }
.mushaf[data-tone="cream"] .mstage { --page: #FFFDF7; --page-line: #E6E0D2; }
.mushaf[data-tone="sepia"] .mstage { --page: #E9D9B9; --page-line: #C9B78F; }
.mushaf[data-tone="night"] .mstage { --page: #121513; --page-line: #39413C; }
.mspread { display: flex; width: 100%; justify-content: center; align-items: flex-start; gap: 2px; direction: rtl; transform: translate(var(--mx, 0px), var(--my, 0px)) scale(var(--mpinch, 1)); transform-origin: center top; }
.mspread.is-wide { max-width: 1080px; }
.mSheet { flex: 1 1 0; min-width: 0; min-height: 280px; display: flex; justify-content: center; align-items: flex-start; }
.mSheet[hidden] { display: none; }
.mSheet canvas, .mContinuousCanvas canvas { display: block; max-width: 100%; height: auto; background: #FFFFFF; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.mushaf[data-tone="sepia"] .mSheet canvas, .mushaf[data-tone="sepia"] .mContinuousCanvas canvas { filter: sepia(.35) saturate(.82); }
.mushaf[data-tone="night"] .mSheet canvas, .mushaf[data-tone="night"] .mContinuousCanvas canvas { filter: invert(.88) hue-rotate(180deg) contrast(.92); }
.mTap { position: absolute; z-index: 2; inset-block: 10px; width: 24%; border: 0; background: transparent; color: transparent; padding: 0; }
.mTapPrev { right: 10px; }
.mTapNext { left: 10px; }
.turn-next .mspread { animation: mturn-next .24s ease-out; }
.turn-prev .mspread { animation: mturn-prev .24s ease-out; }
@keyframes mturn-next { from { transform: translate(12px, 0) rotateY(-5deg); opacity: .78; } to { transform: translate(0, 0) rotateY(0); opacity: 1; } }
@keyframes mturn-prev { from { transform: translate(-12px, 0) rotateY(5deg); opacity: .78; } to { transform: translate(0, 0) rotateY(0); opacity: 1; } }
.mcontrol { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.mslider { display: flex; flex-direction: column; gap: 6px; }
.mslider input { width: 100%; }
.mcontinuous { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mContinuousPage { position: relative; width: min(100%, 620px); min-height: 320px; aspect-ratio: 750 / 1033; background: var(--page); border: 1px solid var(--page-line); border-radius: 12px; padding: 24px 12px 12px; box-sizing: border-box; display: flex; justify-content: center; align-items: flex-start; }
.mPageLabel { position: absolute; top: 3px; inset-inline: 10px; text-align: center; color: var(--muted); font-size: 11px; }
.mContinuousCanvas { width: 100%; display: flex; justify-content: center; }
.mtf { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mtf:not(.is-open) { display: none; }
.mtfbox { min-height: 120px; }
.mtfframe { display: block; width: 100%; height: 60vh; min-height: 240px; border: 1px solid var(--page-line); border-radius: 12px; background: #FFFDF7; }
.mtfplain { margin: 0; padding: 14px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.85; font: inherit; background: var(--page); color: var(--ink); border-radius: 12px; }
.mtfnone { padding: 18px 6px; font-size: 13.5px; line-height: 1.8; }
.mlist .mnum { width: 30px; justify-content: center; font-family: Amiri, serif; font-weight: 700; }
.mindexrow[hidden] { display: none; }
.mbrow { display: flex; align-items: center; gap: 10px; }
.mbrow .fn { flex: 1; min-width: 0; }
.mcolor { width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto; }
.mcolor.green { background: #16715A; } .mcolor.blue { background: #3476B8; } .mcolor.gold { background: #C1902E; } .mcolor.rose { background: #B9516A; }
.mAyahRow { border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-wrap: anywhere; }
.mAyahTranslation { line-height: 1.8; }
.mTranslationSelect { direction: ltr; text-align: left; text-overflow: ellipsis; }
.quran-info { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; }
.quran-info-title { font-weight: 700; }
.quran-info-fields { display: grid; gap: 4px; }
.quran-info-field { display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr); gap: 8px; }
.quran-info-field span, .quran-source-lines > div { min-width: 0; overflow-wrap: anywhere; }
.quran-source-info summary { cursor: pointer; }
.quran-source-lines { display: grid; gap: 3px; padding-top: 6px; }
.mAyahArabic { display: grid; gap: 4px; padding: 10px; border-radius: 10px; background: var(--soft); }
.ayah-text { display: block; font-family: 'Amiri Quran', Amiri, serif; font-size: clamp(22px, 5.4vw, 30px); line-height: 1.95; text-align: center; unicode-bidi: isolate; }
.ayah-result-source { display: block; color: var(--muted); font-size: 11px; unicode-bidi: isolate; }
.quran-attribution { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; overflow-wrap: anywhere; }
.ayah-result, .similar-verse { display: block; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); text-decoration: none; }
.ayah-result-meta { display: block; margin-bottom: 5px; color: var(--muted); font-size: 12px; }
.similar-pair { display: grid; gap: 7px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.ayah-diff { padding: 0 2px; border-radius: 3px; background: #F6D979; color: #241C05; }
.mAyahRow details { color: var(--muted); font-size: 13px; }
.mAyahRow textarea { width: 100%; box-sizing: border-box; }
@media (max-width: 640px) {
  .mtf.is-open { position: fixed; z-index: 15; left: 9px; right: 9px; bottom: calc(72px + env(safe-area-inset-bottom)); max-height: min(60vh, 540px); overflow: auto; box-shadow: 0 8px 32px rgba(0,0,0,.25); }
  .mtfframe { height: 42vh; min-height: 190px; }
}
@media (min-width: 1000px) {
  .mreading { grid-template-columns: minmax(0, 1fr) 350px; }
  .mtf { position: sticky; top: 8px; max-height: calc(100vh - 130px); overflow: auto; }
  .mspread.is-wide .mSheet { min-width: 0; }
}
@media (orientation: landscape) and (min-width: 700px) and (max-width: 999px) {
  .mspread.is-wide .mSheet { min-width: 0; }
}
.mstage:fullscreen { width: 100vw; height: 100vh; max-width: none; max-height: none; box-sizing: border-box; border: 0; border-radius: 0; align-items: center; background: var(--page); }
.mstage:fullscreen .mspread { max-height: 100%; }
.adh { padding: 16px; }
.adhtoc .frow.sub { width: calc(100% - 18px); max-width: calc(100% - 18px); min-width: 0; margin-right: 18px; margin-left: 0; box-sizing: border-box; font-size: 13.5px; overflow-wrap: anywhere; }

/* v3 offline study tools */
.study-page { min-width: 0; }
.study-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.study-head .h { margin: 0; }
.study-home { margin-top: 4px; }
.prayer-live { background: var(--page); border-color: var(--page-line); transition: background .5s ease; }
.prayer-live[data-tint="dawn"] { background: linear-gradient(135deg, var(--page), rgba(221, 177, 112, .18)); }
.prayer-live[data-tint="day"] { background: linear-gradient(135deg, var(--page), rgba(87, 156, 127, .14)); }
.prayer-live[data-tint="dusk"] { background: linear-gradient(135deg, var(--page), rgba(97, 91, 132, .20)); }
.prayer-live-next { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; }
.prayer-live-next > span { color: var(--muted); font-size: 14px; }
.prayer-live-next > b { font-size: 20px; }
.prayer-live-next > strong { grid-column: 1 / -1; font-size: clamp(30px, 8vw, 48px); letter-spacing: .04em; line-height: 1.1; }
.prayer-live-next > small { grid-column: 1 / -1; color: var(--muted); }
.prayer-live-grid, .solar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.prayer-live-grid > span, .solar-grid > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 9px; font-size: 12px; color: var(--muted); }
.prayer-live-grid b, .solar-grid b { color: var(--ink); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.forbidden-line { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.forbidden-line > span { line-height: 1.7; }
.forbidden-line label { display: flex; align-items: center; gap: 8px; }
.forbidden-line input { width: 72px; min-height: 36px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); padding: 4px 8px; }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.service-item { min-width: 0; display: grid; gap: 3px; }
.service-tile { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); text-align: center; text-decoration: none; font-size: 13px; font-weight: 650; }
.service-tile:focus-visible, .service-order button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.service-order { display: flex; justify-content: center; gap: 5px; }
.service-order button { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 8px; width: 31px; height: 25px; }
.service-grid.simple .service-order { display: none; }
.service-grid.simple { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.study-home-links { display: flex; flex-wrap: wrap; gap: 8px; }
.study-home-links a { border: 1px solid var(--line); background: var(--card); color: var(--accent); border-radius: 20px; padding: 8px 12px; font-size: 12.5px; text-decoration: none; }
.voice-list { display: grid; gap: 7px; }
.voice-group { border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; }
.voice-group summary { cursor: pointer; font-weight: 700; }
.voice-row, .pref-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 8px 0; min-width: 0; }
.voice-row > span { min-width: 0; overflow-wrap: anywhere; }
.voice-row small { display: block; direction: ltr; color: var(--muted); font-size: 10px; }
.pref-row { align-items: end; flex-wrap: wrap; }
.pref-row .fld { flex: 1 1 150px; }
.pref-row label:first-child { min-width: 85px; padding: 8px 0; }
.qibla-bearing { font-size: clamp(36px, 10vw, 64px); color: var(--accent); font-weight: 750; line-height: 1.2; }
.qibla-bearing span { font-size: 14px; color: var(--muted); font-weight: 500; }
.map-card { overflow: hidden; padding: 8px; }
.world-map { display: block; width: 100%; height: auto; max-height: 55vh; background: var(--page); border-radius: 10px; }
.world-map .land { fill: var(--accent-soft, rgba(14,90,71,.32)); stroke: var(--accent); stroke-width: .35; }
.world-map .gc-line { fill: none; stroke: #D09A32; stroke-width: 2.4; stroke-dasharray: 6 4; }
.map-origin { fill: #3476B8; stroke: #fff; stroke-width: 2; }
.map-target { fill: #B9516A; stroke: #fff; stroke-width: 2; }
.flight-line { display: flex; align-items: center; gap: 10px; direction: ltr; }
.flight-line i { flex: 1; height: 2px; background: var(--accent); }
.flight-events { padding-inline-start: 22px; display: grid; gap: 8px; }
.flight-events li { padding: 7px; border-bottom: 1px solid var(--line); }
.flight-events span { display: block; color: var(--muted); font-size: 12px; direction: ltr; text-align: right; }
.table-wrap { max-width: 100%; overflow-x: auto; }
.month-table { border-collapse: collapse; width: 100%; min-width: 580px; font-size: 12px; }
.month-table th, .month-table td { border: 1px solid var(--line); padding: 6px; text-align: center; white-space: nowrap; }
.counter-card { display: grid; justify-items: center; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.counter-card h2 { margin: 0; font-size: 17px; }
.counter-card strong { color: var(--accent); font-size: 42px; }
.personal-row .fn { display: grid; gap: 5px; }
.personal-row small { color: var(--muted); font-size: 12px; }
.personal-row span span { white-space: pre-wrap; overflow-wrap: anywhere; }
.qr { min-height: 170px; display: grid; place-items: center; background: #fff; border-radius: 10px; padding: 8px; overflow: hidden; }
.qr svg { max-width: 100%; height: auto; }
.projector-card { display: grid; gap: 18px; justify-items: center; text-align: center; }
.projector-big { font-size: clamp(32px, 8vw, 76px); font-weight: 750; line-height: 1.35; }
.projector-links { font-size: 20px; }
.projector-frame { width: min(100%, 1200px); height: min(68vh, 760px); border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.multi-city-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.multi-city-card { display: grid; gap: 5px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-size: 12px; }
.multi-city-card b { color: var(--accent); font-size: 14px; }
.sirat-projector header.top, .sirat-projector nav.nav { display: none !important; }
.sirat-projector main { max-width: 100%; padding-top: 10px; }
.mem-controls { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; background: var(--card); }
.mem-controls button, .mem-controls a { border: 1px solid var(--line); background: var(--page); color: var(--ink); border-radius: 9px; padding: 7px 11px; }
.mstage { position: relative; }
.mem-shade { position: absolute; inset-inline: 0; z-index: 8; display: grid; place-items: center; background: var(--page); color: var(--muted); border: 2px dashed var(--accent); touch-action: none; user-select: none; cursor: ns-resize; }
.mem-shade.top { top: 0; bottom: auto; }
.mem-shade.bottom { top: auto; bottom: 0; }
.mem-shade span { background: var(--card); padding: 7px 12px; border-radius: 16px; font-size: 13px; }
@media (max-width: 600px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pref-row { display: grid; grid-template-columns: 1fr 1fr; }
  .prayer-live-grid, .solar-grid { grid-template-columns: 1fr 1fr; }
}
@media print {
  header.top, nav.nav, .study-head, .study-home, .btn, .ghostpill, #backBtn, #themeBtn { display: none !important; }
  body, #main { overflow: visible !important; height: auto !important; background: #fff !important; color: #000 !important; }
  .month-table { min-width: 0; font-size: 9pt; }
}

/* FIX1: page-first mushaf reader and compact home prayer card */
body.sirat-mushaf-reading #app { max-width: none; width: 100%; border: 0; }
body.sirat-mushaf-reading header.top, body.sirat-mushaf-reading nav.nav { display: none !important; }
body.sirat-mushaf-reading #main { flex: 1 1 auto; min-height: 0; padding: 0; overflow: hidden; }
body.sirat-mushaf-reading .mushaf-reader { position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden; padding: 0; }
.mushaf-reader .mreading { height: 100%; min-height: 0; gap: 0; align-items: stretch; }
.mushaf-reader .mstage { width: 100%; height: 100%; min-height: 0; box-sizing: border-box; padding: 0; border: 0; border-radius: 0; overflow: hidden; align-items: center; direction: ltr; justify-content: center; }
.mushaf-reader .mspread { width: 100%; max-width: 100%; height: 100%; max-height: 100%; align-items: center; justify-content: center; }
.mushaf-reader .mSheet { flex: 1 1 0; width: auto; max-width: 100%; height: 100%; max-height: 100%; min-width: 0; align-items: center; overflow: hidden; }
.mushaf-reader .mSheet canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.mushaf-reader .mushaf-overlay { display: none; position: absolute; z-index: 8; left: 10px; right: 10px; gap: 9px; align-items: center; color: var(--ink); background: color-mix(in srgb, var(--card) 94%, transparent); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 5px 22px rgba(0,0,0,.17); }
.mushaf-reader.mushaf-ui-on .mushaf-overlay { display: flex; }
.mushaf-reader .mushaf-top-overlay { top: 9px; justify-content: space-between; min-height: 46px; padding: 4px 8px; }
.mushaf-reader .mushaf-bottom-overlay { bottom: 9px; padding: 8px 9px; flex-direction: column; align-items: stretch; }
.mushaf-overlay-btn { display: inline-flex; width: 38px; height: 38px; flex: 0 0 auto; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: var(--bg2); color: var(--ink); text-decoration: none; font-size: 20px; }
.mushaf-reader .mpos { flex: 1 1 auto; min-width: 0; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.mushaf-slider { width: 100%; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; font-size: 12px; }
.mushaf-slider input { width: 100%; min-width: 0; }
.mushaf-actions { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.mushaf-action { min-width: 0; min-height: 42px; display: flex; align-items: center; justify-content: center; padding: 3px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); text-decoration: none; font: inherit; font-size: 11px; cursor: pointer; }
.mushaf-action:hover, .mushaf-action:focus-visible { background: var(--bg2); }
.mushaf-audio-chip { position: absolute; z-index: 7; left: 50%; bottom: 124px; max-width: calc(100% - 32px); transform: translateX(-50%); padding: 8px 13px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); color: var(--ink); box-shadow: 0 3px 14px rgba(0,0,0,.2); font-size: 13px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mushaf-audio-chip[hidden] { display: none; }
.mushaf-reader .mTap { z-index: 3; inset-block: 58px; width: 16%; }
.mushaf-reader .mMoreSheet:not([hidden]) { display: block; position: fixed; z-index: 20; inset-inline: 12px; bottom: 12px; max-height: min(82dvh, 760px); overflow: auto; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 12px 40px rgba(0,0,0,.28); }
.mPlanCreate { flex: 0 0 46px; min-height: 46px; height: 46px; padding-block: 0; }
.mAyahRow.is-audio-current { outline: 2px solid var(--accent, #28775b); background: color-mix(in srgb, var(--accent, #28775b) 10%, var(--card)); }
.mrepeat-range { padding: 8px 0; }
.mrepeat-range .two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mrepeat-unit[hidden], .mrepeat-range[hidden] { display: none !important; }
.prayer-live-compact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 10px 14px; }
.prayer-live-compact > .small { grid-column: 1; }
.prayer-live-compact .prayer-live-next { grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; }
.prayer-live-compact .prayer-live-next > span { align-self: end; }
.prayer-live-compact .prayer-live-next > b { font-size: 17px; }
.prayer-live-compact .prayer-live-next > strong { grid-column: 2; grid-row: 1 / span 2; font-size: clamp(22px, 6vw, 32px); }
.prayer-live-compact .prayer-live-next > small { grid-column: 1; grid-row: 2; }
.home-prayer-meta { display: grid; gap: 3px; font-size: 12px; line-height: 1.55; }
.home-prayer-meta .forbidden-line { display: block; }
.home-margin-settings { display: grid; gap: 6px; font-size: 12px; }
.home-margin-settings > label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.home-margin-settings input { width: 68px; min-height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); padding: 4px 8px; }
.home-prayer-link { justify-self: start; text-decoration: none; }
@media (max-width: 999px) {
  .mushaf-reader .mtf.is-open, .mushaf-reader #mAyahPanel { position: fixed; z-index: 18; left: 10px; right: 10px; bottom: 10px; top: auto; max-height: min(66dvh, 620px); overflow: auto; box-shadow: 0 8px 32px rgba(0,0,0,.28); }
  .mushaf-reader .mtf.is-open { padding: 12px; }
  .mushaf-reader #mAyahPanel { padding: 12px; }
  .mushaf-reader .mtfframe { height: min(44dvh, 430px); min-height: 180px; }
}
@media (min-width: 1000px) {
  .mushaf-reader .mreading.has-panel { grid-template-columns: minmax(0, 1fr) 380px; gap: 0; }
  .mushaf-reader .mtf, .mushaf-reader #mAyahPanel { position: relative; top: auto; max-height: 100%; height: 100%; overflow: auto; border-radius: 0; }
  .mushaf-reader .mtf:not(.is-open) { display: none; }
  .mushaf-reader .mtfframe { height: 68vh; }
  .mushaf-reader .mMoreSheet:not([hidden]) { position: absolute; left: auto; right: 16px; bottom: 16px; width: min(600px, calc(100% - 32px)); }
}