/* مكتبة الولاية · Wilayat TV — web styles */
@font-face { font-family: 'Naskh'; src: url(../fonts/naskh.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: 'Nastaliq'; src: url(../fonts/nastaliq.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: 'Amiri'; src: url(../fonts/amiri.ttf) format('truetype'); font-display: swap; }

:root {
  --navy: #0D4372; --navy-d: #061F36; --navy-m: #0A3156; --gold: #D69A1A; --gold-l: #E6AE3A; --red: #D32F2F;
  --bg: #F3F6FA; --surface: #FFFFFF; --surface2: #EEF2F7; --fg: #15202E; --muted: #5B6878; --line: #DFE5ED;
  --accent: var(--navy); --shadow: 0 1px 2px rgba(6,31,54,.06), 0 4px 16px rgba(6,31,54,.06);
  --radius: 18px; --nav-h: 64px; --rail: 248px;
  --ui: 'Naskh', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
[data-theme=dark] {
  --bg: #07121F; --surface: #0E1D30; --surface2: #15273E; --fg: #E3EAF2; --muted: #93A3B8; --line: #1F3350;
  --accent: var(--gold-l); --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  color-scheme: dark;
}
html[lang=en] { --ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Naskh', sans-serif; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body { font-family: var(--ui); background: var(--bg); color: var(--fg); font-size: 15px; line-height: 1.6; min-height: 100vh; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#view:focus { outline: none; }
.skip { position: absolute; inset-inline-start: -999px; }

.ic { width: 22px; height: 22px; fill: currentColor; flex: none; }
.ic.big { width: 54px; height: 54px; }
.ic.gold, .gold { color: var(--gold); }
[dir=rtl] .ic.flip { transform: scaleX(-1); }
[dir=ltr] .ic.flipx { transform: scaleX(-1); }
.b { font-weight: 700; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { display: flex; justify-content: center; align-items: center; }
.pad { padding: 40px 0; }
.grow { flex: 1; }

/* ---------------------------------------------------------------- layout */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 18px; }
.wrap.narrow { max-width: 720px; }
.body { padding-top: 18px; padding-bottom: calc(var(--nav-h) + 30px); }
main { min-height: 100vh; }

#nav {
  position: fixed; z-index: 30; inset-inline: 0; bottom: 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); display: flex; background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(6,31,54,.06);
}
#nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11.5px; color: var(--muted); position: relative; }
#nav a .ic { width: 24px; height: 24px; padding: 2px 16px; box-sizing: content-box; border-radius: 16px; transition: background .2s; }
#nav a.on { color: var(--accent); font-weight: 700; }
#nav a.on .ic { background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--accent); }
#nav .live-dot { position: absolute; top: 9px; inset-inline-end: calc(50% - 22px); width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--surface); animation: pulse 1.6s infinite; }
.nav-brand, .nav-lang { display: none !important; }

@media (min-width: 960px) {
  #nav { top: 0; bottom: 0; inset-inline-end: auto; width: var(--rail); height: auto; flex-direction: column; padding: 18px 12px; gap: 4px; border-top: 0; border-inline-end: 1px solid var(--line); box-shadow: none; }
  #nav a { flex: none; flex-direction: row; justify-content: flex-start; gap: 14px; font-size: 15px; padding: 10px 14px; border-radius: 14px; }
  #nav a .ic { padding: 0; background: none !important; }
  #nav a:hover { background: var(--surface2); }
  #nav a.on { background: color-mix(in srgb, var(--gold) 18%, transparent); }
  #nav .live-dot { position: static; margin-inline-start: auto; }
  .nav-brand { display: flex !important; align-items: center; gap: 12px; padding: 6px 8px 22px !important; margin-bottom: 8px; border-bottom: 1px solid var(--line); border-radius: 0 !important; background: none !important; }
  .nav-brand img { width: 44px; height: 44px; border-radius: 12px; background: var(--navy); }
  .nav-brand b { display: block; color: var(--fg); font-size: 17px; }
  .nav-brand small { color: var(--gold); font-size: 12px; }
  .nav-lang { display: flex !important; align-items: center; gap: 10px; margin-top: auto; padding: 12px 14px; border-radius: 14px; color: var(--muted); }
  .nav-lang:hover { background: var(--surface2); }
  main { margin-inline-start: var(--rail); }
  .body { padding-bottom: 50px; }
}

/* ---------------------------------------------------------------- generic components */
.ib { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: inherit; transition: background .15s; flex: none; }
.ib:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.ib:disabled { opacity: .3; pointer-events: none; }
.ib.sm { width: 34px; height: 34px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--fg); font-weight: 600; transition: transform .1s, background .15s; text-align: center; }
.btn:hover { background: var(--surface2); }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
[data-theme=dark] .btn.primary { background: var(--gold); border-color: var(--gold); color: #1a1205; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.wide { width: 100%; }
.btn.sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
.btn.ghost-w { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }
.link { color: var(--accent); font-weight: 600; }
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 16px; border: 1px solid var(--line); }
.card label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 8px; font-weight: 600; }
.ct { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 17px; }
.sec { font-size: 17px; margin: 26px 0 12px; }
.sec-row { display: flex; align-items: center; justify-content: space-between; }
.sec-row .sec { margin-bottom: 12px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--surface2); color: var(--muted); white-space: nowrap; }
.badge.red { background: var(--red); color: #fff; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.tile { width: 42px; height: 42px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--navy) 10%, transparent); color: var(--navy); flex: none; font-weight: 700; font-size: 13px; }
[data-theme=dark] .tile { background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold-l); }
.seg { display: flex; background: var(--surface2); border-radius: 14px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.seg button { flex: 1; min-height: 38px; border-radius: 11px; padding: 0 10px; font-size: 14px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.seg button.on { background: var(--surface); color: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.seg small { opacity: .7; font-weight: 400; }
.chips { display: flex; gap: 8px; margin-bottom: 14px; }
.chips.scroll-x { overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips.scroll-x::-webkit-scrollbar { display: none; }
.chips.wrapc { flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); white-space: nowrap; font-size: 14px; }
.chip .ic { width: 16px; height: 16px; color: var(--muted); }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
[data-theme=dark] .chip.on { background: var(--gold); border-color: var(--gold); color: #1a1205; }
.spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--gold) 25%, transparent); border-top-color: var(--gold); animation: spin .8s linear infinite; }
.spinner.sm { width: 24px; height: 24px; }
.spinner.light { border-color: rgba(255,255,255,.25); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg) } }
.empty { text-align: center; padding: 50px 20px; color: var(--muted); }
.empty .ic { color: var(--gold); opacity: .8; }
.empty h3 { color: var(--fg); margin: 12px 0 4px; }
.empty .btn { margin-top: 14px; }
input[type=search], input:not([type]), input[inputmode], select, .form input { width: 100%; min-height: 46px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface); padding: 0 14px; outline: none; }
input:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent); }
input[type=search]::-webkit-search-cancel-button { display: none; }
input[type=range] { accent-color: var(--gold); width: 100%; }
.row-c { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; }
.row-e { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.row-b { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.row-b .seg { flex: 1; min-width: 220px; }

/* list rows */
.li { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; width: 100%; text-align: start; }
a.li:hover, button.li:hover { background: var(--surface2); }
.li-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.li-t b { font-weight: 600; line-height: 1.5; }
.li-t span { color: var(--muted); font-size: 13px; }
.li > .ic { color: var(--muted); opacity: .6; }
.list-card { padding: 6px; }
.list { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.list > .li { border-radius: 0; border-bottom: 1px solid var(--line); padding: 12px 16px; }
.list > .li:last-child { border-bottom: 0; }
.list .num { min-width: 30px; color: var(--muted); font-size: 12px; text-align: center; }
.list a.li-t:hover b { color: var(--accent); }
.li-au { color: var(--muted); font-size: 13px; width: 28%; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.li-au:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 640px) {
  .list > .li:has(.li-au) { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t b" "a b"; column-gap: 10px; row-gap: 0; }
  .list .num { display: none; }
  .list > .li > .li-t { grid-area: t; }
  .list > .li > .li-au { grid-area: a; width: auto; }
  .list > .li > .badge { grid-area: b; align-self: center; }
}
.tools { display: flex; gap: 10px; margin-bottom: 14px; }
.tools select { width: auto; min-width: 150px; }
.filter, .gsearch { position: relative; flex: 1; display: flex; align-items: center; }
.filter .ic, .gsearch .ic { position: absolute; inset-inline-start: 13px; color: var(--muted); width: 20px; }
.filter input, .gsearch input { padding-inline-start: 42px; }
.gsearch { margin-bottom: 12px; }
.gsearch input { background: color-mix(in srgb, var(--gold) 8%, var(--surface)); border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); }

/* page toolbar */
.ptb { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 6px; min-height: 64px; padding: 8px 10px; background: var(--navy); color: #fff; box-shadow: 0 2px 12px rgba(6,31,54,.2); }
[data-theme=dark] .ptb { background: var(--navy-d); border-bottom: 1px solid var(--line); }
.ptb-t { flex: 1; min-width: 0; }
.ptb h1 { font-size: 17px; margin: 0; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptb p { margin: 0; font-size: 12.5px; color: var(--gold-l); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptb-a { display: flex; }

/* ---------------------------------------------------------------- hero / home */
.hero { background: radial-gradient(1200px 400px at 85% -10%, #155a95 0%, transparent 60%), linear-gradient(160deg, var(--navy) 0%, var(--navy-d) 100%); color: #fff; padding: 18px 0 26px; border-radius: 0 0 28px 28px; position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; inset: 0; background: url(../img/mark.png) no-repeat; background-size: 240px; background-position: left -50px bottom -60px; opacity: .06; pointer-events: none; }
[dir=ltr] .hero::after { background-position: right -50px bottom -60px; }
.hero.slim { padding: 22px 0 22px; }
.hero .wrap { position: relative; z-index: 1; }
.h-title { margin: 0 0 4px; font-size: 26px; }
.hero-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; font-size: 13px; font-weight: 700; }
.pill .ic { width: 18px; height: 18px; }
.pill.glass { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; }
.pill.red { background: var(--red); color: #fff; }
.brand-row { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.brand-logo { width: 72px; height: 90px; object-fit: cover; border-radius: 16px; box-shadow: 0 6px 20px rgba(0,0,0,.35); border: 2px solid rgba(230,174,58,.5); }
.brand-name { font-size: 30px; margin: 0; line-height: 1.3; }
.brand-row p { margin: 0; }
.muted-w { color: rgba(255,255,255,.72); font-size: 14px; }
.search-pill { display: flex; align-items: center; gap: 12px; background: #fff; color: var(--muted); border-radius: 16px; min-height: 54px; padding: 0 18px; box-shadow: 0 6px 24px rgba(0,0,0,.25); margin-bottom: 14px; }
.search-pill .ic { color: var(--navy); }
.glass-seg { background: rgba(255,255,255,.1); }
.glass-seg button { color: rgba(255,255,255,.8); }
.glass-seg button.on { background: var(--gold); color: #1a1205; }
.search-box { display: flex; align-items: center; gap: 6px; background: #fff; color: #15202E; border-radius: 16px; padding: 0 8px 0 8px; padding-inline-start: 16px; box-shadow: 0 6px 24px rgba(0,0,0,.25); margin-top: 14px; }
.search-box .ic { color: var(--navy); }
.search-box input { border: 0 !important; box-shadow: none !important; background: transparent; min-height: 56px; font-size: 17px; color: #15202E; padding: 0 4px; }

.live-card { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #1a0a0a 0%, var(--navy-d) 70%); color: #fff; border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); margin-top: -4px; transition: transform .15s; }
.live-card:hover { transform: translateY(-2px); }
.lc-thumb { position: relative; width: 96px; height: 64px; border-radius: 12px; background: #000; display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.lc-thumb img { width: 54px; opacity: .85; }
.lc-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); }
.lc-t { flex: 1; min-width: 0; }
.lc-t h3 { margin: 4px 0 0; font-size: 16px; }
.lc-t p { margin: 0; font-size: 13px; color: rgba(255,255,255,.7); }
.lc-ic { width: 30px; height: 30px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; text-align: center; box-shadow: var(--shadow); }
.stat b { display: block; font-size: 24px; color: var(--accent); font-family: system-ui, sans-serif; }
.stat span { color: var(--muted); font-size: 13px; }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.q { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 6px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow); transition: transform .15s; }
.q:hover, .cat:hover, .row-card:hover { transform: translateY(-2px); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.row-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); transition: transform .15s; }
.rc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rc-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.rc-t span { color: var(--muted); font-size: 13px; }
.row-card > .ic { color: var(--muted); opacity: .5; }
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cat { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; font-weight: 600; font-size: 14px; box-shadow: var(--shadow); transition: transform .15s; line-height: 1.4; }
.cat-ic { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; flex: none; }
.c0 { background: linear-gradient(135deg, #0D4372, #1B6BAF); } .c1 { background: linear-gradient(135deg, #B07A10, #E6AE3A); }
.c2 { background: linear-gradient(135deg, #0E6E5C, #19A588); } .c3 { background: linear-gradient(135deg, #6A2C91, #9B59C6); }
.c4 { background: linear-gradient(135deg, #A23B2A, #D9634E); } .c5 { background: linear-gradient(135deg, #2D4A6B, #4E7AA8); }
@media (max-width: 520px) { .quick { grid-template-columns: repeat(2, 1fr); } .brand-name { font-size: 25px; } .cats { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- book */
.book-hero { text-align: center; background: linear-gradient(160deg, var(--navy), var(--navy-d)); color: #fff; border-radius: 24px; padding: 26px 18px 22px; box-shadow: var(--shadow); }
.cover-tile { width: 76px; height: 96px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--gold-l), #9A6B16); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.cover-tile .ic { width: 40px; height: 40px; }
.book-hero h2 { margin: 16px 0 8px; font-size: 22px; line-height: 1.5; font-family: 'Naskh', serif; }
.au-pill { display: inline-block; padding: 4px 14px; border-radius: 99px; background: rgba(255,255,255,.12); color: var(--gold-l); font-weight: 600; }
.au-pill:hover { background: rgba(255,255,255,.2); }
.hero-chips { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.hero-chips span { padding: 2px 12px; border-radius: 99px; border: 1px solid rgba(255,255,255,.25); font-size: 13px; color: rgba(255,255,255,.85); }
.acts { display: flex; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
.acts .btn { flex: 1; min-width: 200px; min-height: 50px; }
.acts3 { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.acts3 .btn { flex: 1; min-width: 140px; }
.tools4 { display: flex; gap: 8px; justify-content: space-around; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow); }
.tool { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); padding: 6px 10px; border-radius: 12px; min-width: 64px; }
.tool .ic { color: var(--accent); }
.tool:hover { background: var(--surface2); }
.vols { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.vol { text-align: center; padding: 10px 6px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: 14px; }
.vol:hover { border-color: var(--gold); color: var(--accent); }
.meta { padding: 6px 18px; }
.mrow { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.mrow:last-child { border-bottom: 0; }
.mrow b { width: 120px; flex: none; color: var(--muted); font-weight: 600; font-size: 14px; }

/* ---------------------------------------------------------------- reader */
body[data-view=reader] #nav { display: none; }
body[data-view=reader] main { margin-inline-start: 0; }
.reader { --r-bg: #fff; --r-fg: #15202E; --r-ac: #0D4372; --r-mu: #5B6878; --r-hl: #FFE08A; --r-ln: #EEF2F7; --r-kalam: #9A6B16;
  display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: var(--r-bg); color: var(--r-fg); }
.r-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.r-page, .preview { direction: rtl; max-width: 780px; margin: 0 auto; padding: 18px 22px 40px; font-family: var(--r-font); font-size: var(--r-fs); line-height: var(--r-lh); text-align: var(--r-align); word-wrap: break-word; }
.preview { background: var(--r-bg); color: var(--r-fg); border-radius: 14px; padding: 14px 18px; margin-bottom: 12px; border: 1px solid var(--line); }
.preview p { margin: 0; }
.r-page .hd { text-align: center; font-size: 14px; color: var(--r-mu); border-bottom: 1px solid var(--r-ln); padding-bottom: 10px; margin-bottom: 16px; line-height: 1.6; font-family: 'Naskh', serif; }
.r-page .hd b { display: block; color: var(--r-ac); font-size: 16px; }
.r-page .ft { text-align: center; color: var(--r-mu); font-size: 13px; border-top: 1px solid var(--r-ln); margin-top: 22px; padding-top: 10px; font-family: 'Naskh', serif; }
.r-page article p { margin: 0 0 .6em; }
.r-page article a { color: var(--r-ac); }
.r-page article img { height: auto; }
.r-page article table { max-width: 100%; border-collapse: collapse; }
.r-page article td { padding: 2px 6px; }
.r-page article font[size="6"] { font-size: 1.6em; color: var(--r-ac); font-weight: 700; }
.r-page article hr { border: 0; border-top: 1px solid var(--r-ln); }
.r-page .Aye { color: var(--r-ac); font-weight: 700; }
.r-page .KalamateKhas { color: var(--r-kalam); }
.r-page .KalamateKhas2 { color: var(--r-kalam); font-weight: 700; }
.r-page .hilight { background: var(--r-hl); border-radius: 3px; padding: 0 2px; color: inherit; }
.r-page .pagefooter, .r-page .footnote, .r-page .PageFootnote { font-size: .82em; color: var(--r-mu); border-top: 1px solid var(--r-ln); padding-top: 8px; }
.r-page .toc a { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; padding: 10px 6px; border-bottom: 1px solid var(--r-ln); color: var(--r-fg); text-align: right; }
.r-page .toc a:hover { color: var(--r-ac); background: var(--r-ln); }
.r-page .toc a.sub { padding-right: 28px; font-size: .92em; color: var(--r-mu); }
.r-page .toc .pg { color: var(--r-ac); font-size: .75em; white-space: nowrap; font-family: system-ui, sans-serif; }
.r-page .cover { text-align: center; padding-top: 20px; }
.r-page .cover h1 { color: var(--r-ac); font-size: 1.5em; line-height: 1.6; margin: 0 0 24px; }
.r-page .cover .row { display: flex; gap: 12px; text-align: right; padding: 8px 4px; border-bottom: 1px dashed var(--r-ln); font-size: .85em; }
.r-page .cover .row b { width: 34%; color: var(--r-mu); font-weight: 600; flex: none; }
.r-nav { display: flex; align-items: center; justify-content: space-between; gap: 2px; padding: 6px max(8px, calc(50% - 380px)) calc(6px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); color: var(--fg); direction: rtl; }
.r-mid { display: flex; gap: 6px; align-items: center; flex: 1; justify-content: center; max-width: 340px; }
.r-mid select { width: auto; min-height: 38px; max-width: 130px; padding: 0 8px; font-size: 13px; }
.r-mid form { display: flex; align-items: center; background: var(--surface2); border-radius: 12px; padding-inline-end: 2px; }
.r-mid input { width: 62px; min-height: 38px; text-align: center; border: 0 !important; background: transparent; padding: 0 4px; box-shadow: none !important; font-family: system-ui, sans-serif; }
.selbar { position: fixed; bottom: 76px; left: 50%; transform: translateX(-50%); z-index: 25; display: flex; gap: 8px; background: var(--surface); padding: 6px; border-radius: 16px; box-shadow: 0 6px 24px rgba(0,0,0,.25); border: 1px solid var(--line); }
.rs label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 8px; font-weight: 600; }
.rs .row-c { flex-wrap: nowrap; }
.rs .ib { background: var(--surface2); font-weight: 700; font-family: system-ui; }

/* ---------------------------------------------------------------- search results */
.results { display: flex; flex-direction: column; gap: 10px; }
.res { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); transition: border-color .15s; }
.res:hover { border-color: var(--gold); }
.res-h { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.res-h b { color: var(--accent); font-size: 16px; line-height: 1.5; }
.res-au { display: block; color: var(--muted); font-size: 13px; }
.snip { margin: 8px 0 0; font-family: 'Naskh', serif; font-size: 16px; line-height: 1.9; direction: rtl; color: var(--fg); }
.snip .hilight, .snip b, .snip strong { background: color-mix(in srgb, var(--gold) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; font-weight: 700; }
.tips p { display: flex; gap: 10px; margin: 6px 0; align-items: flex-start; }
.tips .ic { width: 18px; margin-top: 3px; }
.form label:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- settings */
.about { text-align: center; }
.about-logo { width: 96px; border-radius: 18px; box-shadow: var(--shadow); }
.about h3 { margin: 10px 0 0; font-size: 22px; }
.about .btn { margin-top: 10px; }
.about .dev { margin-top: 2px; font-size: 12px; opacity: .85; }
.card > .li { padding: 10px 6px; }

/* ---------------------------------------------------------------- live */
body[data-view=live] { background: var(--bg); }
.live-wrap { background: linear-gradient(180deg, #000 0%, var(--navy-d) 100%); padding: 0 0 18px; }
.live-wrap .wrap { padding: 0; max-width: 1080px; }
@media (min-width: 700px) { .live-wrap { padding-top: 22px; } .live-wrap .wrap { padding: 0 18px; } .player { border-radius: 18px; } }
.player { position: relative; background: #000; aspect-ratio: 16/9; overflow: hidden; user-select: none; color: #fff; }
.player video, .player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.player:fullscreen { border-radius: 0; aspect-ratio: auto; }
.pl-top { position: absolute; top: 0; inset-inline: 0; display: flex; gap: 10px; align-items: center; padding: 12px 14px; background: linear-gradient(180deg, rgba(0,0,0,.6), transparent); transition: opacity .3s; pointer-events: none; }
.pl-name { font-weight: 700; font-family: system-ui, sans-serif; text-shadow: 0 1px 3px #000; }
.pl-bar { position: absolute; bottom: 0; inset-inline: 0; display: flex; gap: 4px; align-items: center; padding: 10px; background: linear-gradient(0deg, rgba(0,0,0,.75), transparent); transition: opacity .3s; direction: ltr; }
.ib.w { color: #fff; }
.vslider { width: 90px !important; }
@media (max-width: 520px) { .vslider { display: none; } }
.player.playing:not(.ui) .pl-bar, .player.playing:not(.ui) .pl-top { opacity: 0; }
.player.playing:not(.ui) { cursor: none; }
.player.iframe .pl-bar, .player.iframe .pl-top, .player.iframe .pl-big, .player.iframe .chip-muted { display: none; }
.pl-big { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; background: rgba(214,154,26,.92); color: #1a1205; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 30px rgba(0,0,0,.5); }
.pl-big .ic { width: 40px; height: 40px; }
.pl-spin, .pl-off { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px; background: rgba(0,0,0,.55); }
.pl-off { background: rgba(6,31,54,.94); }
.pl-off h3 { margin: 0; }
.pl-off p { margin: 0 0 8px; color: rgba(255,255,255,.75); font-size: 14px; max-width: 420px; }
.pl-off .ic { color: var(--gold); }
.chip-muted { position: absolute; top: 56px; inset-inline-start: 14px; display: flex; gap: 8px; align-items: center; background: rgba(0,0,0,.65); color: #fff; padding: 8px 14px; border-radius: 99px; font-size: 13px; font-weight: 600; border: 1px solid rgba(255,255,255,.25); }
.chip-muted .ic { width: 18px; height: 18px; }
.live-info { display: flex; align-items: center; gap: 14px; color: #fff; padding: 16px 18px 4px; }
.live-info h1 { margin: 0; font-size: 20px; }
.live-info p { margin: 0; }
.li-mark { width: 52px; height: 52px; border-radius: 14px; background: var(--navy); padding: 4px; }
.app-card { display: flex; align-items: center; gap: 16px; }
.app-card b { font-size: 16px; }
.app-card p { margin: 2px 0 0; }

/* ---------------------------------------------------------------- overlays */
.sheet-wrap { position: fixed; inset: 0; z-index: 60; background: rgba(4,14,26,.5); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .2s; }
.sheet-wrap.open { opacity: 1; }
.sheet { background: var(--surface); width: 100%; max-width: 560px; border-radius: 24px 24px 0 0; padding: 8px 18px calc(22px + env(safe-area-inset-bottom)); max-height: 88vh; overflow-y: auto; transform: translateY(30px); transition: transform .25s; }
.sheet-wrap.open .sheet { transform: none; }
@media (min-width: 700px) { .sheet-wrap { align-items: center; } .sheet { border-radius: 24px; padding-bottom: 22px; } }
.sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.sheet-h h3 { margin: 0; font-size: 17px; }
.lang-list .li.on { background: var(--surface2); }
.menu { position: fixed; z-index: 70; background: var(--surface); color: var(--fg); border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.25); border: 1px solid var(--line); padding: 6px; min-width: 220px; }
.menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 10px; text-align: start; }
.menu button:hover { background: var(--surface2); }
.menu .ic { color: var(--muted); width: 20px; }
#toast { position: fixed; z-index: 80; left: 50%; bottom: calc(var(--nav-h) + 20px); transform: translate(-50%, 20px); background: #15202E; color: #fff; padding: 10px 20px; border-radius: 99px; font-size: 14px; opacity: 0; pointer-events: none; transition: all .25s; box-shadow: 0 6px 20px rgba(0,0,0,.3); max-width: 90vw; text-align: center; }
[data-theme=dark] #toast { background: #E3EAF2; color: #07121F; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#splash { position: fixed; inset: 0; z-index: 100; background: linear-gradient(160deg, var(--navy), var(--navy-d)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #fff; transition: opacity .4s; }
#splash img { width: 96px; border-radius: 22px; }
#splash.hide { opacity: 0; pointer-events: none; }
body.offline::before { content: ''; position: fixed; top: 0; inset-inline: 0; height: 3px; background: var(--red); z-index: 90; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
/* mixed-direction text (Arabic titles inside the English UI) */
.li-t b, .li-au, .rc-t b, .res-h b, .res-au, .ptb h1, .ptb p, .book-hero h2, .au-pill, .mrow span, .chip { unicode-bidi: plaintext; }
html[lang=en] .li-t b, html[lang=en] .li-au, html[lang=en] .rc-t b, html[lang=en] .res-h b, html[lang=en] .res-au, html[lang=en] .mrow span, html[lang=en] .chip, html[lang=en] .cat span:last-child { font-family: 'Naskh', system-ui, sans-serif; }

/* ---------------------------------------------------------------- AI translation + dictionary (v5.7.1) */
.selbar { flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 24px); }
.selbar .dict { background: var(--gold, #D69A1A); color: #fff; border-color: transparent; }
.selbar .dict .ic { fill: #fff; }
.trwrap { margin: 0 0 8px; }
.trbar { font-family: 'Naskh', system-ui, sans-serif; font-size: 13px; line-height: 1.6; background: var(--r-ln); border: 1px solid color-mix(in srgb, var(--r-ac) 25%, transparent); border-radius: 14px; padding: 9px 12px; margin: 4px 0 16px; direction: inherit; text-align: start; }
.trbar .tb { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.trbar .tl { color: var(--r-ac); font-weight: 700; }
.trbar .tbs { display: flex; gap: 6px; align-items: center; }
.trbar .tbtn { border: 0; cursor: pointer; color: var(--r-bg); background: var(--r-ac); border-radius: 20px; padding: 4px 14px; font: inherit; font-size: 12.5px; white-space: nowrap; display: inline-flex; align-items: center; }
.trbar .tbtn.alt { background: transparent; padding: 4px 6px; }
.trbar .tbtn.alt .ic { fill: var(--r-ac); width: 18px; height: 18px; }
.trbar .tn { color: var(--r-mu); font-size: 11.5px; margin-top: 3px; }
.trbar .spin { display: inline-block; width: 11px; height: 11px; border: 2px solid var(--r-ac); border-top-color: transparent; border-radius: 50%; animation: trr .8s linear infinite; vertical-align: -1px; margin-inline-end: 7px; }
@keyframes trr { to { transform: rotate(360deg); } }
.tr-out p { margin: 0 0 .75em; }
.tr-out.ur { font-family: 'Nastaliq', 'Naskh', serif; font-size: calc(var(--r-fs, 22px) * .9); line-height: calc(var(--r-lh, 1.9) + .55); direction: rtl; text-align: var(--r-align, right); }
.tr-out.en { font-family: 'Noto Serif', Georgia, 'Times New Roman', serif; font-size: calc(var(--r-fs, 22px) * .8); line-height: calc(var(--r-lh, 1.9) - .15); direction: ltr; text-align: left; hyphens: auto; }
.tr-out .caret { display: inline-block; width: .45em; height: 1em; background: var(--r-ac, var(--gold)); opacity: .6; border-radius: 2px; animation: trb 1s infinite; }
@keyframes trb { 50% { opacity: 0; } }
.tr-out .sk { height: 13px; border-radius: 7px; margin: 18px 0; background: linear-gradient(90deg, var(--r-ln, #eef2f7) 25%, color-mix(in srgb, var(--r-hl, #FFE08A) 55%, transparent) 50%, var(--r-ln, #eef2f7) 75%); background-size: 200% 100%; animation: trs 1.3s infinite linear; }
@keyframes trs { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.tr-err { color: #D32F2F; }
.sheet .tr-out.ur { font-size: 20px; line-height: 2.3; }
.sheet .tr-out.en { font-size: 16px; line-height: 1.7; }
.sheet .tr-out { max-height: 50vh; overflow-y: auto; padding: 4px 2px; }
.tr-sel-src { font-family: 'Naskh', serif; font-size: 16px; line-height: 1.8; color: var(--muted); background: var(--surface2); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; max-height: 120px; overflow-y: auto; }
.tr-sub { display: flex; align-items: center; gap: 8px; color: var(--muted); margin: 0 0 12px; }
.tr-sub .ic { fill: var(--gold, #D69A1A); }
.tr-opts { display: flex; flex-direction: column; gap: 10px; }
.tr-opt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); color: inherit; font: inherit; cursor: pointer; text-align: start; transition: border-color .15s, background .15s; }
.tr-opt:hover, .tr-opt.on { border-color: var(--gold, #D69A1A); background: color-mix(in srgb, var(--gold, #D69A1A) 8%, var(--surface)); }
.tr-badge { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-weight: 700; color: #fff; background: #0D4372; font-size: 15px; }
.tr-badge.ur { font-family: 'Nastaliq', 'Naskh', serif; background: #0D4372; font-size: 17px; }
.tr-badge.en { font-family: system-ui, sans-serif; background: #D69A1A; }
.tr-txt { display: flex; flex-direction: column; }
.tr-txt small { color: var(--muted); font-size: 12.5px; }
.tr-note { color: var(--muted); font-size: 12.5px; margin: 12px 0 4px; }

/* ---------------------------------------------------------------- floating Home button (v5.7.2) */
#homefab { position: fixed; z-index: 40; left: -100px; top: -100px; width: 52px; height: 52px; border-radius: 50%; padding: 0; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(180deg, #0D4372, #061F36); border: 2px solid #D69A1A; box-shadow: 0 6px 18px rgba(4,14,26,.38), 0 0 0 0 rgba(230,174,58,.0);
  touch-action: none; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: left .26s cubic-bezier(.34,1.4,.64,1), top .26s cubic-bezier(.34,1.4,.64,1), transform .18s, opacity .18s, box-shadow .2s; }
#homefab .ic { width: 26px; height: 26px; fill: #E6AE3A; pointer-events: none; }
#homefab:hover { box-shadow: 0 8px 22px rgba(4,14,26,.45), 0 0 0 5px rgba(230,174,58,.22); }
#homefab:active { transform: scale(.94); }
#homefab:focus-visible { outline: 3px solid #E6AE3A; outline-offset: 3px; }
#homefab.drag { transform: scale(1.12); transition: transform .12s; cursor: grabbing; box-shadow: 0 12px 28px rgba(4,14,26,.5); }
#homefab.hid { opacity: 0; transform: scale(.4); pointer-events: none; }
#homefab[hidden] { display: none; }
@media print { #homefab { display: none; } }

/* ---------------------------------------------------------------- Home live player (v5.7.3) */
.home-live { display: grid; grid-template-columns: 1fr; gap: 0; background: linear-gradient(135deg, #12060a 0%, var(--navy-d) 75%); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin: 16px 0 6px; border: 1px solid rgba(230,174,58,.25); }
.hl-stage { position: relative; aspect-ratio: 16 / 9; background: #000; }
.hl-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.hl-poster { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #0D4372 0%, #000 75%); }
.hl-poster[hidden] { display: none; }
.hl-poster img { width: 26%; max-width: 150px; opacity: .55; }
.hl-badge { position: absolute; top: 10px; inset-inline-start: 10px; pointer-events: none; z-index: 2; }
.hl-unmute { top: auto; bottom: 14px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 3; background: rgba(214,154,26,.95); color: #1a1205; border-color: transparent; box-shadow: 0 4px 16px rgba(0,0,0,.45); cursor: pointer; animation: hlp 2s ease-in-out infinite; }
[dir=rtl] .hl-unmute { transform: translateX(50%); }
.hl-unmute .ic { fill: #1a1205; }
.hl-unmute[hidden] { display: none; }
@keyframes hlp { 50% { box-shadow: 0 4px 16px rgba(0,0,0,.45), 0 0 0 7px rgba(230,174,58,.25); } }
.hl-side { color: #fff; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.hl-side h3 { margin: 4px 0 0; font-size: 19px; }
.hl-side p { margin: 0; color: rgba(255,255,255,.75); font-size: 14px; }
.hl-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.hl-acts [hidden] { display: none; }
.btn.gold-b { background: var(--gold); border-color: var(--gold); color: #1a1205; }
.btn.gold-b .ic { fill: #1a1205; }
@media (min-width: 900px) {
  .home-live { grid-template-columns: minmax(0, 1.75fr) minmax(220px, 1fr); }
  .hl-side { justify-content: center; padding: 22px 26px; }
  .hl-side h3 { font-size: 24px; }
  .hl-side p { font-size: 15px; }
  .hl-badge { display: none; }
}

/* ---------------------------------------------------------------- Home footer credits */
.site-foot { margin-top: 34px; background: linear-gradient(160deg, var(--navy) 0%, var(--navy-d) 100%); color: #fff; border-radius: 28px 28px 0 0; padding: 26px 0 calc(18px + env(safe-area-inset-bottom)); border-top: 3px solid var(--gold); }
.sf-brand { display: flex; align-items: center; gap: 14px; }
.sf-brand img { width: 54px; height: auto; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.sf-brand > div { display: flex; flex-direction: column; line-height: 1.5; }
.sf-name { font-size: 22px; color: var(--gold-l); font-family: 'Naskh', serif; }
.sf-brand .gold { color: var(--gold-l); font-size: 14px; font-weight: 600; }
.sf-tag { color: rgba(255,255,255,.7); font-size: 13px; }
.sf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 20px 0 16px; }
.sf-item { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 10px 12px; min-width: 0; }
.sf-item > div { display: flex; flex-direction: column; min-width: 0; }
.sf-item small { color: rgba(255,255,255,.62); font-size: 12px; }
.sf-item b, .sf-item a { color: #fff; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-item a:hover { color: var(--gold-l); }
.sf-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(214,154,26,.16); }
.sf-ic .ic { fill: var(--gold-l); width: 22px; height: 22px; }
.sf-links { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); }
.sf-links a { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.88); font-size: 14px; }
.sf-links a:hover { color: var(--gold-l); }
.sf-links .ic { width: 18px; height: 18px; fill: var(--gold-l); }
.sf-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding-top: 12px; color: rgba(255,255,255,.6); font-size: 12.5px; }
body[data-view=home] .body { padding-bottom: 8px; }
@media (max-width: 959px) { .site-foot { margin-bottom: var(--nav-h, 64px); } }
.hl-unmute { display: none !important; } /* Castr player shows its own Unmute; ours lives in .hl-side */
.sf-item a, .sf-item b { white-space: normal; overflow-wrap: anywhere; font-size: 14.5px; }
@media (max-width: 899px) { .hl-side > .badge { display: none; } }
.sf-item a[href^="tel:"], .sf-item a[href^="mailto:"], .sf-item a[href^="http"] { direction: ltr; unicode-bidi: isolate; }
[dir=rtl] .sf-item a[href^="tel:"], [dir=rtl] .sf-item a[href^="mailto:"], [dir=rtl] .sf-item a[href^="http"] { text-align: right; }
@media (min-width: 900px) {
  .sf-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sf-item:nth-child(-n+3) { grid-column: span 2; }
  .sf-item:nth-child(n+4) { grid-column: span 3; }
}