/* Quran script fonts are self-hosted (SIL OFL 1.1) so sacred text renders identically online and offline. */
@font-face { font-family: "Amiri Quran"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/amiri-quran-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "Scheherazade New"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/scheherazade-new-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
/* Layout: full-screen vertical ayah feed over a generative backdrop, floating glass header, glass tab bar, glass sheets. */
:root {
  color-scheme: dark;
  --bg: #03100d; --ink: #f4efe2; --ink2: rgba(244,239,226,.95); --ink3: rgba(244,239,226,.88);
  --accent: #4fe0b0; --accent-ink: #022a1f; --gold: #e9c98a;
  --glass: rgba(8,22,20,.52); --glass-strong: rgba(6,16,15,.8); --brd: rgba(255,255,255,.14); --hi: rgba(255,255,255,.3); --shadow: rgba(0,0,0,.5); --scrim: rgba(1,6,6,.5);
  --blur: 26px;
  --f-display: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --f-body: "Instrument Sans", "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-ar: "Amiri Quran", "Scheherazade New", "Noto Naskh Arabic", "Traditional Arabic", serif;
  --f-arui: "Reem Kufi", "Noto Kufi Arabic", "Noto Naskh Arabic", sans-serif;
  --f-ur: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif;
  --ar-size: 34px;
  --hdr: 60px; --tab: 66px;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
}
html[data-skin="gold"] { --bg:#120b04; --accent:#f0b75a; --accent-ink:#2a1a02; --gold:#f6d9a0; --glass: rgba(30,19,8,.52); --glass-strong: rgba(22,14,6,.8); }
html[data-skin="indigo"] { --bg:#05061a; --accent:#93a6ff; --accent-ink:#0b1040; --gold:#e2d9ff; --glass: rgba(10,12,36,.62); --glass-strong: rgba(8,10,30,.84); }
html[data-skin="rose"] { --bg:#14060c; --accent:#ff92ad; --accent-ink:#3a0716; --gold:#ffcfa6; --glass: rgba(36,10,20,.52); --glass-strong: rgba(26,8,15,.8); }
html[data-skin="obsidian"] { --bg:#060607; --accent:#d8dde6; --accent-ink:#0d0f12; --gold:#e3cfa6; --glass: rgba(18,18,22,.54); --glass-strong: rgba(12,12,15,.82); }
html[data-skin="pearl"] { color-scheme: light; --bg:#e8eeec; --ink:#0f1f1b; --ink2: rgba(15,31,27,.9); --ink3: rgba(15,31,27,.78); --accent:#0a5a47; --accent-ink:#ffffff; --gold:#7a5208;
  --glass: rgba(255,255,255,.72); --glass-strong: rgba(250,252,251,.92); --brd: rgba(255,255,255,.7); --hi: rgba(255,255,255,.95); --shadow: rgba(30,60,55,.22); --scrim: rgba(220,232,228,.45); }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 15px; overflow: hidden; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
[dir="rtl"] .flip { transform: scaleX(-1); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- backdrop ---------- */
#bg { position: fixed; inset: 0; width: 100%; height: 100%; display: block; transform-origin: 50% 45%; animation: kenburns 60s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.1) translate3d(-1%, -1%, 0); } }
.grain { position: fixed; inset: -50%; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }
.shade { position: fixed; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 22%, transparent 70%, rgba(0,0,0,.45)); }
html[data-skin="pearl"] .shade { background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 22%, transparent 75%, rgba(255,255,255,.4)); }

/* ---------- glass ---------- */
.glass { position: relative; background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.02) 42%, rgba(255,255,255,.06)), var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(175%); backdrop-filter: blur(var(--blur)) saturate(175%);
  border: 1px solid var(--brd); box-shadow: 0 24px 70px -24px var(--shadow), inset 0 1px 0 var(--hi), inset 0 -1px 0 rgba(255,255,255,.04); }
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 60% at 15% 0%, rgba(255,255,255,.16), transparent 55%); mix-blend-mode: screen; }
html[data-skin="pearl"] .glass::before { mix-blend-mode: normal; background: radial-gradient(120% 60% at 15% 0%, rgba(255,255,255,.55), transparent 55%); }

/* ---------- header ---------- */
.top { position: fixed; z-index: 30; top: 0; left: 0; right: 0; padding-top: calc(var(--sat) + 10px);
  padding-left: max(14px, var(--sal)); padding-right: max(14px, var(--sar)); display: flex; align-items: center; gap: 8px; pointer-events: none; }
.top > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 4px 6px; border-radius: 14px; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-name { font-family: var(--f-display); font-size: 20px; letter-spacing: .02em; white-space: nowrap; }
.brand-name b { color: var(--accent); font-weight: 400; }
.loc { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.loc-pill { max-width: 100%; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; font-size: 13px; }
.loc-pill .ar { font-family: var(--f-arui); font-size: 16px; color: var(--gold); }
.loc-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbtns { display: flex; gap: 6px; }
.ibtn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.ibtn svg { width: 20px; height: 20px; }
.ibtn[aria-pressed="true"], .ibtn.on { color: var(--accent); }
.eq { display: flex; gap: 2px; align-items: flex-end; height: 14px; }
.eq i { width: 3px; background: currentColor; border-radius: 2px; height: 45%; } .eq i:nth-child(2) { height: 85%; } .eq i:nth-child(3) { height: 60%; }
.playing .eq i { animation: eq 1s ease-in-out infinite; } .playing .eq i:nth-child(2){animation-delay:.2s} .playing .eq i:nth-child(3){animation-delay:.45s}
@keyframes eq { 50% { height: 100%; } }
@media (max-width: 560px) { .brand-name { display: none; } .loc-pill { padding: 0 12px; } .loc-pill .tl, .loc-pill .ar { display: none; } }

/* ---------- dropdowns ---------- */
.dd { position: fixed; z-index: 40; top: calc(var(--sat) + 60px); right: max(14px, var(--sar)); width: min(340px, calc(100vw - 28px)); max-height: calc(100% - var(--sat) - var(--sab) - 150px);
  overflow: auto; border-radius: 22px; padding: 16px; display: grid; gap: 14px; background: var(--glass-strong); transform-origin: top right; animation: pop .22s cubic-bezier(.2,.9,.3,1.2); }
[dir="rtl"] .dd { right: auto; left: max(14px, var(--sal)); transform-origin: top left; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
.dd h3, .sheet h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 18px; letter-spacing: .01em; }
.lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.field { display: grid; gap: 7px; }
.sel { appearance: none; width: 100%; height: 42px; border-radius: 12px; padding: 0 36px 0 12px; background: rgba(255,255,255,.07) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.6'/></svg>") no-repeat right 12px center; border: 1px solid var(--brd); }
[dir="rtl"] .sel { background-position: left 12px center; padding: 0 12px 0 36px; }
.sel option { background: var(--bg); color: var(--ink); }
.skins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.skin { border-radius: 14px; padding: 8px; border: 1px solid var(--brd); display: grid; gap: 6px; font-size: 11.5px; text-align: start; background: rgba(255,255,255,.04); }
.skin .sw { height: 30px; border-radius: 9px; }
.skin[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tgl { position: relative; width: 44px; height: 26px; border-radius: 99px; background: rgba(255,255,255,.14); flex: none; transition: background .2s; }
.tgl::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.tgl[aria-checked="true"] { background: var(--accent); }
.tgl[aria-checked="true"]::after { transform: translateX(18px); }
[dir="rtl"] .tgl[aria-checked="true"]::after { transform: translateX(-18px); }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.note { font-size: 12px; color: var(--ink3); line-height: 1.5; margin: 0; }
.tracks { display: grid; gap: 4px; }
.track { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; text-align: start; }
.track:hover { background: rgba(255,255,255,.06); }
.track .dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink3); flex: none; }
.track[aria-checked="true"] { background: rgba(255,255,255,.08); color: var(--accent); }
.track[aria-checked="true"] .dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px var(--accent); }
.langs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }

/* ---------- views ---------- */
.view { position: fixed; inset: 0; z-index: 10; }
.scroll { overflow-y: auto; overscroll-behavior: contain; padding-top: calc(var(--sat) + var(--hdr) + 18px); padding-bottom: calc(var(--sab) + var(--tab) + 36px);
  padding-left: max(16px, var(--sal)); padding-right: max(16px, var(--sar)); }
.wrap { max-width: 860px; margin: 0 auto; display: grid; gap: 18px; }
.panel { border-radius: 24px; padding: 20px; display: grid; gap: 14px; min-width: 0; }
.h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 5vw, 38px); margin: 0; text-wrap: balance; line-height: 1.15; }
.sub { color: var(--ink2); margin: 0; line-height: 1.55; }

/* ---------- tab bar ---------- */
.tabs { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: calc(var(--sab) + 10px); width: min(560px, calc(100% - 24px)); height: var(--tab);
  border-radius: 24px; display: grid; grid-template-columns: repeat(6, 1fr); padding: 6px; }
.tab { display: grid; place-items: center; gap: 2px; border-radius: 18px; font-size: 11px; color: var(--ink2); align-content: center; transition: color .2s, background .2s; }
.tab svg { width: 22px; height: 22px; }
.tab[aria-current="page"] { color: var(--accent); background: rgba(255,255,255,.08); }
.focus .tabs, .focus .top, .focus .rail, .focus .caption { opacity: 0; pointer-events: none; transition: opacity .5s; }
.focus .top .ibtn.exitfocus { opacity: 1; }

/* ---------- flow ---------- */
.stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
.track3 { position: absolute; inset: 0; will-change: transform; }
.slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: calc(var(--sat) + var(--hdr) + 12px) max(16px, var(--sar)) calc(var(--sab) + var(--tab) + 150px) max(16px, var(--sal)); }
@media (min-width: 701px) { .slide { padding-bottom: calc(var(--sab) + var(--tab) + 130px); } }
@media (max-width: 700px) { .slide { padding-right: calc(max(16px, var(--sar)) + 62px); } [dir="rtl"] .slide { padding-right: max(16px, var(--sar)); padding-left: calc(max(16px, var(--sal)) + 62px); } }
.slab { width: min(760px, 100%); max-height: 100%; border-radius: 30px; padding: clamp(18px, 3.5vw, 34px); display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.slab-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.slab-head .ref { color: var(--gold); font-variant-numeric: tabular-nums; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--brd); font-size: 10px; letter-spacing: .1em; }
.slab-body { overflow-y: auto; min-height: 0; display: grid; gap: 16px; padding-inline: 2px; overscroll-behavior: contain; }
.bism { font-family: var(--f-ar); font-size: calc(var(--ar-size) * .66); text-align: center; color: var(--gold); opacity: .9; }
.ar { font-family: var(--f-ar); font-size: var(--ar-size); line-height: 2.05; text-align: center; direction: rtl; margin: 0; word-spacing: .06em; transition: filter .4s, opacity .4s; }
.ar .end { font-family: var(--f-ar); color: var(--gold); font-size: .8em; white-space: nowrap; }
.hidden-ar .ar { filter: blur(10px); opacity: .55; cursor: pointer; user-select: none; }
.reveal-hint { text-align: center; font-size: 12px; color: var(--accent); }
.orn { display: flex; align-items: center; gap: 12px; color: var(--gold); opacity: .7; }
.orn::before, .orn::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, currentColor, transparent); }
.orn svg { width: 16px; height: 16px; }
.tl { font-style: italic; color: var(--ink2); text-align: center; line-height: 1.6; margin: 0; font-size: 14px; }
.tr { font-size: var(--tr-size, 17px); line-height: 1.65; text-align: center; margin: 0; max-width: 62ch; justify-self: center; text-wrap: pretty; }
.tr.rtl { direction: rtl; font-family: var(--f-ur); line-height: 2.2; }
.tr.bn { font-family: "Noto Sans Bengali", var(--f-body); } .tr.zh { font-family: "Noto Sans SC", var(--f-body); }
.tr2 { font-size: 14px; color: var(--ink2); }
.attr { font-size: 11px; color: var(--ink3); text-align: center; }
.tj-g { color: #6fe39b; } .tj-q { color: #7fb8ff; } .tj-m { color: #ff9f7a; }
html[data-skin="pearl"] .tj-g { color: #0d8a44; } html[data-skin="pearl"] .tj-q { color: #1f5fbf; } html[data-skin="pearl"] .tj-m { color: #c2410c; }
.grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.grade button { height: 40px; border-radius: 12px; border: 1px solid var(--brd); background: rgba(255,255,255,.06); font-size: 13px; }
.grade button:hover { border-color: var(--accent); color: var(--accent); }
.skel { height: 14px; border-radius: 8px; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.14), rgba(255,255,255,.06)); background-size: 200% 100%; animation: sh 1.4s infinite; }
@keyframes sh { to { background-position: -200% 0; } }

.rail { position: absolute; z-index: 15; right: max(12px, var(--sar)); bottom: calc(var(--sab) + var(--tab) + 28px); display: grid; gap: 12px; justify-items: center; }
[dir="rtl"] .rail { right: auto; left: max(12px, var(--sal)); }
@media (min-width: 701px) { .rail { top: 50%; bottom: auto; transform: translateY(-50%); } }
.rbtn { display: grid; justify-items: center; gap: 4px; font-size: 10.5px; color: var(--ink2); }
.rbtn .c { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; transition: transform .2s; }
.rbtn:active .c { transform: scale(.9); }
.rbtn svg { width: 22px; height: 22px; }
.rbtn.on { color: var(--accent); } .rbtn.on svg { fill: currentColor; fill-opacity: .25; }
.ring { position: absolute; inset: -3px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.caption { position: absolute; z-index: 14; left: max(18px, var(--sal)); right: 90px; bottom: calc(var(--sab) + var(--tab) + 26px); display: grid; gap: 4px; max-width: 560px; pointer-events: none; }
[dir="rtl"] .caption { left: 90px; right: max(18px, var(--sar)); }
.cap-ar { font-family: var(--f-arui); font-size: 22px; color: var(--gold); line-height: 1.2; }
.cap-name { font-family: var(--f-display); font-size: 20px; }
.cap-meta { font-size: 12px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.prog { height: 3px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; margin-top: 6px; }
.prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); border-radius: 3px; transition: width .4s; }
@media (min-width: 701px) { .caption { left: 50%; transform: translateX(-50%); right: auto; width: min(760px, calc(100% - 200px)); bottom: calc(var(--sab) + var(--tab) + 22px); } [dir="rtl"] .caption { left: 50%; right: auto; } }
.burst { position: absolute; z-index: 20; pointer-events: none; width: 110px; height: 110px; margin: -55px 0 0 -55px; color: var(--gold); animation: burst .9s ease-out forwards; }
@keyframes burst { 0% { transform: scale(.3) rotate(-20deg); opacity: 0; } 25% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1.5) rotate(15deg) translateY(-40px); opacity: 0; } }
.hint { position: absolute; z-index: 16; left: 50%; transform: translateX(-50%); bottom: calc(var(--sab) + var(--tab) + 120px); padding: 8px 14px; border-radius: 99px; font-size: 12px; white-space: nowrap; animation: float 2.4s ease-in-out infinite; }
@keyframes float { 50% { transform: translate(-50%, -8px); } }

/* ---------- read ---------- */
.read-head { text-align: center; display: grid; gap: 6px; justify-items: center; }
.read-head .arn { font-family: var(--f-arui); font-size: 44px; color: var(--gold); line-height: 1.3; }
.seg { display: inline-flex; padding: 4px; border-radius: 14px; gap: 4px; }
.seg button { height: 34px; padding: 0 14px; border-radius: 10px; font-size: 13px; color: var(--ink2); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.mushaf { font-family: var(--f-ar); font-size: var(--ar-size); line-height: 2.3; text-align: justify; text-align-last: center; direction: rtl; margin: 0; }
.mushaf .a { cursor: pointer; border-radius: 8px; transition: background .2s; }
.mushaf .a:hover, .mushaf .a.sel { background: rgba(255,255,255,.08); }
.vlist { display: grid; gap: 4px; }
.verse { display: grid; gap: 10px; padding: 18px 4px; border-bottom: 1px solid var(--brd); min-width: 0; }
.verse .vh { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.vnum { width: 34px; height: 34px; display: grid; place-items: center; font-size: 12px; color: var(--gold); position: relative; font-variant-numeric: tabular-nums; }
.vnum svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.verse .ar { text-align: right; font-size: calc(var(--ar-size) * .92); }
.verse .tr, .verse .tl { text-align: start; justify-self: stretch; }
.vact { display: flex; gap: 4px; }
.vact button { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--ink2); }
.vact button:hover { background: rgba(255,255,255,.08); color: var(--ink); }
.vact button.on { color: var(--accent); }
.vact svg { width: 18px; height: 18px; }
.pager { display: flex; justify-content: space-between; gap: 10px; }

/* ---------- explore / library ---------- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { height: 36px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--brd); background: rgba(255,255,255,.05); font-size: 13px; }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.inp { width: 100%; height: 46px; border-radius: 14px; padding: 0 14px; border: 1px solid var(--brd); background: rgba(255,255,255,.06); }
.inp::placeholder { color: var(--ink3); }
textarea.inp { height: 140px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.grid-s { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.scard { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; text-align: start; min-width: 0; border: 1px solid var(--brd); background: rgba(255,255,255,.04); transition: transform .2s, border-color .2s; }
.scard:hover { transform: translateY(-2px); border-color: var(--accent); }
.snum { width: 42px; height: 42px; flex: none; display: grid; place-items: center; position: relative; font-size: 13px; color: var(--gold); font-variant-numeric: tabular-nums; }
.snum svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sinfo { min-width: 0; flex: 1; display: grid; gap: 2px; }
.sinfo b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sinfo small { color: var(--ink3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sar { font-family: var(--f-arui); font-size: 19px; color: var(--gold); flex: none; }
.res { display: grid; gap: 8px; padding: 14px; border-radius: 16px; border: 1px solid var(--brd); background: rgba(255,255,255,.04); text-align: start; min-width: 0; }
.res .ref { font-size: 12px; color: var(--gold); letter-spacing: .06em; }
.res .ar { font-size: 22px; text-align: right; line-height: 1.9; }
.res p { margin: 0; line-height: 1.55; font-size: 14px; }
mark { background: color-mix(in srgb, var(--accent) 35%, transparent); color: inherit; border-radius: 4px; padding: 0 2px; }
.stat { display: grid; gap: 4px; }
.stat b { font-family: var(--f-display); font-weight: 400; font-size: 34px; font-variant-numeric: tabular-nums; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 110px; }
.bars div { display: grid; gap: 6px; justify-items: center; font-size: 11px; color: var(--ink3); height: 100%; align-content: end; }
.bars i { width: 100%; max-width: 30px; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent)); min-height: 3px; }
.bars .today i { box-shadow: 0 0 16px var(--accent); }
.ring-big { width: 120px; height: 120px; position: relative; flex: none; }
.ring-big svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-big .v { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-size: 24px; }
.btn { height: 44px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--brd); background: rgba(255,255,255,.07); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; white-space: nowrap; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.pri { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
.btn.dng { color: #ff8b8b; }
.btn:hover { filter: brightness(1.08); }
.btns { display: flex; gap: 8px; flex-wrap: wrap; }
.item { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--brd); min-width: 0; }
.item:last-child { border-bottom: 0; }
.item .ar { font-size: 22px; text-align: right; line-height: 1.9; }

/* ---------- prayer ---------- */
.ptimes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.pt { border-radius: 18px; padding: 14px; border: 1px solid var(--brd); background: rgba(255,255,255,.04); display: grid; gap: 4px; }
.pt b { font-family: var(--f-display); font-weight: 400; font-size: 26px; font-variant-numeric: tabular-nums; }
.pt.next { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.pt small { color: var(--ink2); }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.compass { width: min(240px, 70vw); aspect-ratio: 1; max-width: 100%; position: relative; justify-self: center; }
.compass svg { width: 100%; height: 100%; }
.needle { transition: transform 1s cubic-bezier(.2,.8,.2,1); transform-origin: 50% 50%; }
.orb { width: min(220px, 60vw); aspect-ratio: 1; max-width: 100%; border-radius: 50%; justify-self: center; display: grid; place-items: center; position: relative; transition: transform .12s;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.45), transparent 40%), radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--accent) 12%, transparent) 70%);
  border: 1px solid var(--brd); box-shadow: 0 0 60px -10px var(--accent), inset 0 -20px 40px rgba(0,0,0,.25); }
.orb:active { transform: scale(.95); }
.orb b { font-family: var(--f-display); font-weight: 400; font-size: 54px; font-variant-numeric: tabular-nums; }
.orb small { position: absolute; bottom: 22%; font-size: 12px; color: var(--ink2); }
.dhikr { font-family: var(--f-arui); font-size: 28px; text-align: center; color: var(--gold); }

/* ---------- sheets ---------- */
.scrim { position: fixed; inset: 0; z-index: 50; background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.sheet { position: fixed; z-index: 51; left: 50%; bottom: 0; transform: translateX(-50%); width: min(620px, 100%); max-height: calc(100% - var(--sat) - 40px);
  border-radius: 28px 28px 0 0; padding: 18px max(18px, var(--sar)) calc(var(--sab) + 22px) max(18px, var(--sal)); display: grid; gap: 14px; overflow: auto; background: var(--glass-strong); animation: up .32s cubic-bezier(.2,.9,.25,1); }
@media (min-width: 701px) { .sheet { bottom: auto; top: 50%; transform: translate(-50%, -50%); border-radius: 28px; animation: pop .25s; } }
@keyframes up { from { transform: translate(-50%, 40px); opacity: 0; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-img { width: 100%; border-radius: 18px; display: block; box-shadow: 0 20px 50px -20px var(--shadow); }

/* ---------- onboarding guide ---------- */
.guide { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: calc(var(--sat) + 16px) max(16px, var(--sar)) calc(var(--sab) + 16px) max(16px, var(--sal)); background: var(--scrim); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: fade .3s; }
.gcard { width: min(560px, 100%); max-height: 100%; overflow: auto; border-radius: 32px; padding: 26px; display: grid; gap: 18px; background: var(--glass-strong); }
.nur { width: 120px; height: 120px; justify-self: center; position: relative; }
.nur canvas { width: 100%; height: 100%; display: block; }
.nur-name { text-align: center; display: grid; gap: 2px; }
.nur-name b { font-family: var(--f-display); font-weight: 400; font-size: 22px; }
.nur-name small { color: var(--ink3); font-size: 12px; }
.say { font-size: clamp(16px, 2.3vw, 19px); line-height: 1.6; text-align: center; margin: 0; min-height: 3.2em; text-wrap: pretty; }
.say .w { opacity: .6; transition: opacity .25s; }
.say .w.lit { opacity: 1; }
.gopts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; }
.gopt { min-height: 44px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--brd); background: rgba(255,255,255,.05); font-size: 14px; text-align: center; }
.gopt[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink); box-shadow: 0 0 0 1px var(--accent) inset; }
.gsteps { display: flex; justify-content: center; gap: 6px; }
.gsteps i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink3); opacity: .5; transition: all .3s; }
.gsteps i.on { width: 22px; border-radius: 4px; background: var(--accent); opacity: 1; }
.gfoot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.demo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.demo div { display: grid; justify-items: center; gap: 8px; text-align: center; font-size: 12.5px; color: var(--ink2); padding: 12px 6px; border-radius: 16px; border: 1px solid var(--brd); }
.demo svg { width: 30px; height: 30px; color: var(--accent); }

/* ---------- toast ---------- */
.toast { position: fixed; z-index: 70; left: 50%; top: calc(var(--sat) + 64px); transform: translateX(-50%); padding: 10px 16px; border-radius: 14px; font-size: 13.5px; max-width: calc(100% - 32px); text-align: center; background: var(--glass-strong); animation: pop .2s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  #bg { animation: none; }
}

/* memorization word reveal */
.ar .wd { transition: filter .3s, opacity .3s; }
.ar .wd.hid { filter: blur(9px); opacity: .45; }
/* high contrast (accessibility) */
html[data-contrast="1"] { --ink2: var(--ink); --ink3: var(--ink); --brd: rgba(255,255,255,.55); --glass: var(--glass-strong); }
html[data-skin="pearl"][data-contrast="1"] { --brd: rgba(0,0,0,.45); }
html[data-contrast="1"] .grain, html[data-contrast="1"] .shade { display: none; }
html[data-contrast="1"] .glass { background: var(--glass-strong); }
a.btn { text-decoration: none; color: inherit; }

/* braille */
.braille { font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", "Apple Braille", sans-serif; font-size: calc(var(--tr-size, 17px) * 1.25); letter-spacing: .08em; line-height: 1.7; text-align: center; color: var(--ink2); margin: 0; word-break: break-all; direction: ltr; }
.braille.big { font-size: 26px; text-align: start; color: var(--ink); background: rgba(255,255,255,.05); border: 1px solid var(--brd); border-radius: 14px; padding: 12px 14px; user-select: all; }

/* previous / next buttons (screen reader, motor) */
.navbtns { display: none; position: absolute; z-index: 16; left: 50%; transform: translateX(-50%); top: calc(var(--sat) + var(--hdr) + 8px); gap: 8px; }
.navbtns .btn { height: 40px; font-size: 13px; }
html[data-nav="1"] .navbtns { display: flex; }
html[data-nav="1"] .slide { padding-top: calc(var(--sat) + var(--hdr) + 60px); }

/* easy-read font (dyslexia, low vision) */
html[data-readable="1"] { --f-body: "Atkinson Hyperlegible", "Lexend", "Instrument Sans", system-ui, sans-serif; }
html[data-readable="1"] .tr, html[data-readable="1"] .sub, html[data-readable="1"] .note, html[data-readable="1"] .say { letter-spacing: .03em; word-spacing: .12em; line-height: 1.85; }
html[data-readable="1"] .slab .tr:not(.rtl) { text-align: left; }

/* larger touch targets (motor, low vision, older readers) */
html[data-big="1"] .ibtn { width: 50px; height: 50px; }
html[data-big="1"] .rbtn .c { width: 58px; height: 58px; }
html[data-big="1"] .rbtn { font-size: 12.5px; }
html[data-big="1"] .tab { font-size: 13px; }
html[data-big="1"] .btn, html[data-big="1"] .sel, html[data-big="1"] .inp { min-height: 52px; font-size: 16px; }
html[data-big="1"] .tgl { transform: scale(1.2); }

/* simpler layout (cognitive, older readers, children) */
html[data-simple="1"] .rail [data-act="note"], html[data-simple="1"] .rail [data-act="hifz"], html[data-simple="1"] .rail [data-act="card"], html[data-simple="1"] .rail [data-act="braille"] { display: none; }
html[data-simple="1"] .grain, html[data-simple="1"] .cap-meta { display: none; }

/* colour plus pattern cues (colour blindness) */
html[data-patterns="1"] .tj-g { text-decoration: underline dotted; text-underline-offset: .35em; }
html[data-patterns="1"] .tj-q { text-decoration: underline solid; text-underline-offset: .35em; }
html[data-patterns="1"] .tj-m { text-decoration: underline wavy; text-underline-offset: .35em; }

/* visual alerts (deaf, hard of hearing) */
.valert { position: fixed; z-index: 80; inset: auto 16px calc(var(--sab) + 100px); margin: 0 auto; max-width: 520px; padding: 22px; border-radius: 22px; text-align: center; font-size: 20px; font-weight: 600; background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 35%, transparent), 0 30px 80px -20px var(--shadow); animation: pop .3s; }
@media (prefers-reduced-motion: no-preference) { .valert { animation: pop .3s, pulse 1.2s ease-in-out 3; } }
@keyframes pulse { 50% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--accent) 10%, transparent), 0 30px 80px -20px var(--shadow); } }

/* sync */
.sync-box { display: grid; gap: 10px; }
.cf-turnstile { min-height: 65px; }

/* install and update banners */
.inst-banner { position: fixed; z-index: 45; left: 50%; transform: translateX(-50%); top: calc(var(--sat) + 64px); width: min(560px, calc(100% - 24px)); border-radius: 20px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--glass-strong); animation: pop .3s; }
.inst-banner img { border-radius: 10px; flex: none; }
.inst-banner p { margin: 0; flex: 1 1 200px; min-width: 0; font-size: 14px; line-height: 1.45; }
.inst-banner .btns { flex: none; }
.inst-hero { display: flex; gap: 14px; align-items: center; }
.inst-hero img { border-radius: 16px; flex: none; box-shadow: 0 10px 30px -10px var(--shadow); }
.inst-hero b { font-family: var(--f-display); font-weight: 400; font-size: 22px; }
.steps { margin: 0; padding-inline-start: 22px; display: grid; gap: 10px; line-height: 1.55; }
.steps li::marker { color: var(--accent); font-weight: 700; }

/* suggestion box and ranking */
.ideas { display: grid; gap: 10px; }
.idea { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px; border-radius: 18px; border: 1px solid var(--brd); background: rgba(255,255,255,.04); }
.idea.is-hidden { opacity: .8; border-style: dashed; }
.idea-rank { font-family: var(--f-display); font-size: 22px; color: var(--gold); font-variant-numeric: tabular-nums; text-align: center; padding-top: 2px; }
.ideas.compact .idea { grid-template-columns: minmax(0, 1fr) auto; }
.ideas.compact .idea-rank { display: none; }
.idea-main { display: grid; gap: 6px; min-width: 0; }
.idea-main b { font-weight: 600; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.idea-main p { margin: 0; font-size: 13.5px; color: var(--ink2); line-height: 1.5; overflow-wrap: anywhere; }
.idea-meta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.idea-bar { flex: 1 1 80px; min-width: 60px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.idea-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); border-radius: 4px; }
.idea-count { font-size: 12.5px; color: var(--ink2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.idea-side { display: grid; gap: 6px; justify-items: end; }
.metoo { height: 38px; padding: 0 12px; font-size: 13px; }
.metoo svg { width: 16px; height: 16px; }
.metoo.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.linkbtn { font-size: 11.5px; color: var(--ink3); text-decoration: underline; }
.idea-admin { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.idea-admin .sel { width: auto; height: 36px; font-size: 13px; }
.idea-admin .btn { height: 36px; font-size: 13px; }
.badge.st-planned { border-color: var(--accent); color: var(--accent); }
.badge.st-progress { border-color: var(--gold); color: var(--gold); }
.badge.st-shipped { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.badge.st-declined { opacity: .85; }
@media (max-width: 520px) { .idea { grid-template-columns: 30px minmax(0, 1fr); } .idea-side { grid-column: 2; justify-items: start; grid-auto-flow: column; align-items: center; } }

/* tabs scroll on narrow screens */
.seg-scroll { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg-scroll::-webkit-scrollbar { display: none; }
.seg-scroll button { flex: none; }
.tab span { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 400px) { .tab svg { width: 20px; height: 20px; } .tab span { font-size: 9.5px; } }
/* plans, map, quiz, compare, page view, calendar */
.plans { display: grid; gap: 8px; }
.plan { display: grid; gap: 4px; text-align: start; padding: 14px; border-radius: 16px; border: 1px solid var(--brd); background: rgba(255,255,255,.04); }
.plan:hover { border-color: var(--accent); }
.qmap { display: grid; grid-template-columns: repeat(auto-fill, minmax(22px, 1fr)); gap: 4px; }
.mt { aspect-ratio: 1; border-radius: 5px; border: 1px solid var(--brd); background: color-mix(in srgb, var(--accent) calc(var(--p) * 100%), rgba(255,255,255,.05)); }
.mt:hover, .mt:focus-visible { outline: 2px solid var(--gold); }
.jmap { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.jt { font-size: 10px; text-align: center; padding: 4px 0; border-radius: 6px; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--gold) calc(var(--p) * 80%), rgba(255,255,255,.05)); }
.qopts { display: grid; gap: 8px; }
.qopt { padding: 10px 14px; border-radius: 14px; border: 1px solid var(--brd); background: rgba(255,255,255,.05); font-size: 22px; line-height: 1.9; text-align: center; }
.qopt.right { border-color: #4fe0b0; background: color-mix(in srgb, #4fe0b0 22%, transparent); }
.qopt.wrong { border-color: #ff8b8b; background: color-mix(in srgb, #ff8b8b 18%, transparent); }
.quiz-ar { font-size: calc(var(--ar-size) * .85); }
.blank { border-bottom: 2px dashed var(--accent); padding: 0 .3em; color: var(--accent); }
.cmp { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--brd); }
.attr-btn { background: none; border: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.verse.playing, .mushaf .a.playing { background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 12px; }
.page-view .page-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--ink3); letter-spacing: .08em; text-transform: uppercase; }
.page-sh { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 10px; margin-top: 8px; border-radius: 14px; border: 1px solid var(--gold); color: var(--gold); }
.page-foot { text-align: center; font-size: 12px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.page-view .pager .sel { width: auto; flex: 1 1 auto; max-width: 180px; }
.cal { display: grid; gap: 8px; }
.cal-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--brd); }
.cal-row b { display: block; } .cal-row small { color: var(--ink2); }
.keys { border-collapse: collapse; width: 100%; } .keys td { padding: 8px 6px; border-bottom: 1px solid var(--brd); }
kbd { font-family: ui-monospace, monospace; font-size: 12px; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--brd); background: rgba(255,255,255,.06); }
/* study circles */
.clist { display: grid; gap: 10px; }
.ccard { display: grid; gap: 6px; text-align: start; padding: 14px; border-radius: 18px; border: 1px solid var(--brd); background: rgba(255,255,255,.04); min-width: 0; }
.ccard:hover { border-color: var(--accent); }
.ccard-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #ff8b8b; letter-spacing: .06em; text-transform: uppercase; }
.live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff5f5f; box-shadow: 0 0 10px #ff5f5f; animation: pulse 1.6s infinite; }
.invite { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.invite code { font-size: 18px; letter-spacing: .18em; padding: 6px 10px; border-radius: 10px; border: 1px dashed var(--gold); color: var(--gold); }
.radio { display: flex; gap: 10px; align-items: center; padding: 8px 0; }
.radio input { accent-color: var(--accent); width: 18px; height: 18px; }
.posts { display: grid; gap: 10px; max-height: min(60vh, 560px); overflow-y: auto; padding-inline-end: 4px; overscroll-behavior: contain; }
.post { display: grid; gap: 6px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--brd); background: rgba(255,255,255,.04); max-width: 92%; min-width: 0; }
.post.mine { justify-self: end; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.post.sys { justify-self: center; font-size: 12px; color: var(--ink3); border: 0; background: none; }
.post.is-hidden { opacity: .8; border-style: dashed; }
.post-head { display: flex; gap: 8px; align-items: baseline; } .post-head small { color: var(--ink3); font-size: 11px; }
.post-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.post-ayah { display: grid; gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid var(--gold); }
.post-ayah .ar { font-size: 24px; text-align: right; line-height: 1.9; margin: 0; }
.post-img { max-width: 100%; border-radius: 12px; display: block; }
.post-audio { width: 100%; max-width: 320px; }
.post-acts { display: flex; gap: 12px; flex-wrap: wrap; }
.composer { display: grid; gap: 8px; margin-top: 8px; } .composer textarea { height: 76px; }
label.btn { cursor: pointer; }
.kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.kt { display: grid; gap: 6px; padding: 10px; border-radius: 14px; border: 1px solid var(--brd); background: rgba(255,255,255,.04); min-width: 0; }
.kt small { color: var(--ink2); overflow-wrap: anywhere; } .kt .btn { height: 34px; font-size: 13px; }
.kt.claimed { border-color: var(--gold); } .kt.done { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.live-layer { position: fixed; inset: 0; z-index: 90; background: #000; display: grid; grid-template-rows: auto 1fr; }
.live-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: calc(var(--sat) + 8px) max(12px, var(--sar)) 8px max(12px, var(--sal)); color: #fff; }
.live-stage { position: relative; min-height: 0; color: #fff; } .live-stage iframe, .live-stage rtk-meeting { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- readability (1.5.1): every word stays legible over moving scenes ---------- */
.tabs { background: var(--glass-strong); }
.tab { color: var(--ink2); }
.rbtn, .hint, .pt small { color: var(--ink); }
.rbtn { font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.8), 0 0 8px rgba(0,0,0,.5); }
html[data-skin="pearl"] .rbtn { text-shadow: 0 1px 2px rgba(255,255,255,.9), 0 0 8px rgba(255,255,255,.7); }
.hint { background: var(--glass-strong); }
.pt { background: rgba(0,0,0,.18); }
html[data-skin="pearl"] .pt { background: rgba(255,255,255,.5); }
.seg button { position: relative; z-index: 1; }
.tab span { font-weight: 600; }
.lbl, .slab-head { font-weight: 600; color: var(--ink2); }
.note, .attr, .linkbtn, .page-foot, .post.sys { color: var(--ink2); }
.caption, .slide .tr, .rail .rbtn span { text-shadow: 0 1px 3px rgba(0,0,0,.55); }
html[data-skin="pearl"] .caption, html[data-skin="pearl"] .slide .tr, html[data-skin="pearl"] .rail .rbtn span { text-shadow: 0 1px 2px rgba(255,255,255,.8); }
.orn, .bism { opacity: 1; }
.rbtn .rl { padding: 1px 6px; border-radius: 8px; background: rgba(0,0,0,.42); }
html[data-skin="pearl"] .rbtn .rl { background: rgba(255,255,255,.7); }

.tgl-row { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; font-size: 14px; line-height: 1.5; }
.tgl-row input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }

/* ---------- QuranFlow Plus (1.6) ---------- */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 14px 0; }
.plan-card { border-radius: 20px; padding: 16px; display: grid; gap: 10px; align-content: start; }
.plan-card.best { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.plan-card .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.plan-card .price span { font-family: var(--f-display); font-size: 30px; }
.plan-card .price small { color: var(--ink2); margin-inline-start: 4px; }
.perks { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; font-size: 13.5px; color: var(--ink2); }
.pbadge { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; }
html[data-plus="free"] .dd [data-skin="rose"]::after, html[data-plus="free"] .dd [data-skin="obsidian"]::after { content: "Plus"; justify-self: start; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); }
.plus-card .row { display: flex; justify-content: space-between; align-items: center; }
.task-card { border: 1px solid var(--brd); border-radius: 16px; padding: 12px; display: grid; gap: 6px; margin-top: 8px; }
.table-wrap { overflow-x: auto; margin: 10px 0; }
.class-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.class-table th, .class-table td { padding: 8px 10px; border-bottom: 1px solid var(--brd); text-align: start; white-space: nowrap; }
.class-table thead th { color: var(--ink2); font-weight: 600; font-size: 12px; }
.fn { justify-self: stretch; text-align: start; font-size: 13.5px; color: var(--ink2); }
.fn summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--ink2); list-style-position: inside; }
.fn p { margin: 6px 0 0; line-height: 1.6; white-space: pre-line; }

/* ---------- print (1.5.1): dark ink on white paper, the open screen only, every page ---------- */
@media print {
  @page { margin: 16mm 14mm; }
  :root, html[data-skin] { color-scheme: light; --ink: #000; --ink2: #1a1a1a; --ink3: #333; --gold: #5a3d00; --accent: #0a5a47; --accent-ink: #fff; --brd: #bbb; --glass: transparent; --glass-strong: transparent; }
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; color: #000 !important; }
  *, *::before, *::after { text-shadow: none !important; box-shadow: none !important; animation: none !important; transition: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .glass { background: none !important; border-color: #bbb !important; } .glass::before { display: none !important; }
  #bg, .grain, .shade, .top, .tabs, .rail, .hint, .toast, .sheet, .scrim, .dd, .vact, .seg, .btn, .ibtn, .gsteps, .live-layer, .composer, .nur, .upd, .caption, [data-act="install"] { display: none !important; }
  .view { position: static !important; inset: auto !important; overflow: visible !important; height: auto !important; padding: 0 !important; }
  .view[hidden] { display: none !important; }
  .scroll { overflow: visible !important; padding: 0 !important; }
  .ar, .bism, .arn, .tr, .tl, .lbl, .note, .attr, h1, h2, h3, p, small, b, span, li, td, th { color: #000 !important; }
  .bism, .orn, .arn, .vnum, .end, .snum { color: #5a3d00 !important; opacity: 1 !important; }
  .fn { display: block; } .fn summary { display: none; } .fn p { color: #222 !important; }
  .verse { break-inside: avoid; page-break-inside: avoid; border-bottom: 1px solid #ccc; padding: 10pt 0; }
  .verse .ar, .ar { font-size: 22pt !important; line-height: 1.9 !important; filter: none !important; }
  .tr, .tl { font-size: 11.5pt !important; line-height: 1.5 !important; }
  .read-head .arn { font-size: 30pt !important; }
  .hidden-ar .ar, .ar .wd.hid { filter: none !important; opacity: 1 !important; }
  /* Flow: print the ayah on screen as one clean page. */
  #v-flow .slide { position: static !important; display: none !important; }
  #v-flow .slide:not([aria-hidden]) { display: block !important; }
  #v-flow .slab { background: none !important; border: 0 !important; max-width: none !important; }
  /* Grid containers fragment badly across printed pages: stack them as plain blocks. */
  .view .wrap, .view .panel, .vlist, .read-head { display: block !important; height: auto !important; }
  .view .panel > * + *, .view .wrap > * + * { margin-top: 10pt; }
  .read-head > * { display: block; text-align: center; }
  .verse { display: block !important; } .verse > * + * { margin-top: 6pt; }
  .attr { display: block; text-align: center; margin-top: 12pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ===================== 1.7 study help (AI) — js/study.js ===================== */
.st-sheet { display: grid; gap: 14px; }
.st-ctl { display: grid; gap: 12px; }
.st-range { flex-wrap: wrap; gap: 8px; }
.st-range .btns { gap: 6px; }
.st-range .btn[disabled], .st-ctl .btn[disabled] { opacity: .5; cursor: not-allowed; }
.st-count { justify-self: end; font-variant-numeric: tabular-nums; }
.st-intro { margin: 0; }
.st-answer { display: grid; gap: 12px; border-top: 1px solid var(--brd); padding-top: 14px; }
.st-ai-lbl { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--accent); }
.st-ai-lbl svg { width: 16px; height: 16px; flex: none; }
.st-text, .st-scholars { display: grid; gap: 10px; line-height: 1.6; color: var(--ink2); }
.st-text p, .st-scholars p { margin: 0; }
.st-scholars { padding: 10px 12px; border-left: 3px solid var(--gold); border-radius: 8px; background: rgba(255,255,255,.04); }
[dir="rtl"] .st-scholars { border-left: 0; border-right: 3px solid var(--gold); }
.st-ruling { padding: 12px 14px; border-radius: 14px; border: 2px solid var(--gold); background: rgba(233,201,138,.12); color: var(--ink); font-size: 15px; }
.st-cite { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; margin: 0 2px; border-radius: 99px; vertical-align: baseline;
  border: 1px solid var(--accent); color: var(--accent); background: transparent; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.st-cite svg { width: 13px; height: 13px; }
.st-cite[aria-expanded="true"] { background: var(--accent); color: var(--accent-ink); }
.st-cite:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-citebox { display: grid; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--brd); background: rgba(255,255,255,.05); }
.st-ayah { display: grid; gap: 6px; }
.st-ayah .ar { font-size: 24px; line-height: 1.9; margin: 0; }
.st-ayah .tr { margin: 0; }
.st-foot { display: grid; gap: 6px; padding-top: 10px; border-top: 1px dashed var(--brd); }
.st-src { margin: 0; padding-inline-start: 18px; font-size: 13px; color: var(--ink2); }
.st-src a { color: var(--accent); }
.st-conf, .st-disc, .st-left { margin: 0; }
.st-err { gap: 10px; }
.st-err .sub { margin: 0; }
.st-loading { display: grid; gap: 8px; }
.st-print { display: none; }
@media print {
  html.st-printing body > *:not(#stPrint) { display: none !important; }
  html.st-printing #stPrint { display: block !important; color: #000; font-size: 11.5pt; line-height: 1.55; }
  html.st-printing #stPrint h1 { font-size: 17pt; margin: 0 0 6pt; }
  html.st-printing #stPrint .st-text p, html.st-printing #stPrint .st-scholars p { margin: 0 0 8pt; }
  html.st-printing #stPrint .st-ruling { border: 1.5pt solid #5a3d00; padding: 6pt 8pt; margin: 8pt 0; }
  html.st-printing #stPrint .st-ref { font-weight: 600; white-space: nowrap; }
  html.st-printing #stPrint .st-foot { border-top: 1px solid #999; margin-top: 12pt; padding-top: 8pt; }
}

/* ===================== 1.7 halaqa rooms: tiers, weekly focus, peer-to-peer voice/video rooms ===================== */
.tier-badge { vertical-align: middle; }
.tier-badge.tier-plus { border-color: var(--accent); color: var(--accent); }
.tier-badge.tier-masjid { border-color: var(--gold); color: var(--gold); }
.circle-limits { display: grid; gap: 6px; margin: 6px 0 12px; }
.focus-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; margin-bottom: 12px; border: 1px solid var(--gold); border-radius: 14px; background: color-mix(in srgb, var(--gold) 9%, transparent); }
.focus-banner b { display: block; font-size: 17px; }
.focus-banner.is-empty { border-style: dashed; border-color: var(--brd); background: none; }
.qr-room { grid-template-rows: auto 1fr auto; background: var(--bg); }
.qr-status { flex: 1; font-size: 12px; opacity: .85; }
.qr-stage { overflow: auto; padding: 12px max(12px, var(--sal)); }
.qr-pre { max-width: 520px; margin: 8vh auto 0; color: var(--ink); }
.qr-grid { --cols: 1; display: grid; gap: 10px; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); align-content: start; }
.qr-tile { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--glass-strong); border: 2px solid var(--brd); }
.qr-tile.qr-audio { aspect-ratio: auto; min-height: 120px; display: grid; place-items: center; }
.qr-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-tile audio { display: none; }
.qr-av { position: absolute; inset: 0; display: none; place-items: center; font-size: 34px; font-weight: 600; color: var(--accent); }
.qr-tile.cam-off video { visibility: hidden; } .qr-tile.cam-off .qr-av, .qr-tile.qr-audio .qr-av { display: grid; }
.qr-tile.qr-audio .qr-av { position: static; width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--brd); margin-top: 10px; }
.qr-name { position: absolute; inset: auto 8px 8px 8px; display: flex; gap: 6px; align-items: center; font-size: 13px; color: #fff; text-shadow: 0 1px 3px #000; }
.qr-tile.qr-audio .qr-name { position: static; justify-content: center; padding: 8px; color: var(--ink); text-shadow: none; }
.qr-ic svg { width: 16px; height: 16px; }
.qr-tile.speaking { border-color: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .qr-room:not(.qr-still) .qr-tile.speaking { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); transition: box-shadow .2s; } }
.qr-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 10px max(12px, var(--sar)) calc(var(--sab, 0px) + 10px) max(12px, var(--sal)); }
.qr-bar .btn.off, .qr-pre .btn.off { opacity: .7; text-decoration: line-through; }

/* ===================== 1.7 plans: Nur Plus, Nur Masjid / Halaqa, leader codes, gifts — js/billing.js ===================== */
.bill-promise { font-weight: 600; color: var(--ink); }
.plan-card .bill-iv { justify-self: start; }
.plan-card .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; }
.plan-card .pbadge.save { align-self: center; }
.plan-card .perks { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; color: var(--ink2); font-size: 13.5px; line-height: 1.45; }
.plan-card > .btn { justify-self: stretch; }
.bill-mine, .bill-leaders, .bill-gift { display: grid; gap: 8px; margin: 12px 0; }
.bill-leaders .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bill-leaders .row .inp { flex: 1 1 200px; min-width: 0; text-transform: uppercase; }
.leader-code .mono { font-size: 17px; word-break: break-all; }
.leader-list { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; }
.bill-foot a { color: inherit; text-decoration: underline; }
.bill-welcome, .bill-confirming, .bill-gift-thanks { display: grid; gap: 12px; }
@media (max-width: 420px) { .plan-grid { grid-template-columns: 1fr; } }
/* ---------- 1.7 contrast: surah number badges and the study-guide button stay readable over bright scenes ---------- */
.snum::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: rgba(0, 0, 0, .3); z-index: -1; }
.snum { isolation: isolate; }
.btn.st-entry { background: rgba(10, 12, 16, .62); }
html[data-skin="pearl"] .snum::before { background: rgba(255, 255, 255, .7); }
html[data-skin="pearl"] .btn.st-entry { background: rgba(255, 255, 255, .82); }