/* إذاعة صوت الأسرى 107.9 FM — نظام التصميم 2026 (الإصدار 4)
   ثلاثة ألوان بذرية يغيّرها الزبون من لوحة الإعدادات: --c1 أساسي، --c2 إبراز، --c3 داكن. كل الدرجات مشتقة منها.
   الافتراضي «كحلي إخباري»: كحلي #123C73، ذهبي #F2B705، كحلي داكن #0B1F3A، بخط Tajawal (اختيار الزبون).
   مقياس الخط (√φ): 13 · 16 · 20 · 26 — التباعد: 4 8 12 16 24 32 48 — الأعمدة φ : 1 — الصور 1.618 : 1 */

:root {
  color-scheme: light;
  --c1: #123c73; --c2: #f2b705; --c3: #0b1f3a;
  --on-c1: #ffffff; --on-c2: #1c1917; --on-c3: #ffffff;
  --bg: #ffffff; --ink: #1c1917; --ink2: #44403c; --muted: #6b645d;
  --surface: color-mix(in oklab, var(--c3) 4%, var(--bg));
  --line: color-mix(in oklab, var(--c3) 14%, var(--bg));
  --wire: color-mix(in oklab, var(--c3) 36%, var(--bg));
  --brand: var(--c1); --brand-tx: #123c73; --brand-t: color-mix(in oklab, var(--c1) 8%, var(--bg)); --on-brand: var(--on-c1);
  --red-f: #c1121f; --red: #c1121f; --red-d: #a00f1a; --red-t: color-mix(in oklab, #c1121f 8%, var(--bg));
  --gold: var(--c2); --gold-d: var(--c2); --gold-t: color-mix(in oklab, var(--c2) 26%, var(--bg)); --on-gold: var(--on-c2);
  --deep: var(--c3); --deep2: color-mix(in oklab, var(--c3) 86%, #fff); --on-deep: var(--on-c3); --on-deep-m: color-mix(in oklab, var(--on-c3) 74%, var(--c3));
  --f: 'Tajawal', 'Segoe UI', system-ui, sans-serif;
  --t-xs: .8125rem; --t-sm: .875rem; --t-md: 1rem; --t-lg: 1.25rem; --t-xl: 1.625rem;
  --gap: 32px; --r: 8px; --r-sm: 6px; --rw: 26px; --max: 1240px; --pad: 16px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --shadow: 0 12px 32px rgb(28 25 23 / .14), 0 2px 6px rgb(28 25 23 / .08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #141110; --ink: #f3efe9; --ink2: #d2cbc2; --muted: #a29a90;
    --surface: color-mix(in oklab, #fff 5%, var(--bg)); --line: color-mix(in oklab, #fff 13%, var(--bg)); --wire: color-mix(in oklab, #fff 32%, var(--bg));
    --brand-tx: #e79a9a; --brand-t: color-mix(in oklab, var(--c1) 24%, var(--bg));
    --red: #f0646b; --red-d: #f48a90; --red-t: color-mix(in oklab, #a60303 28%, var(--bg));
    --gold-t: color-mix(in oklab, var(--c2) 14%, var(--bg));
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141110; --ink: #f3efe9; --ink2: #d2cbc2; --muted: #a29a90;
  --surface: color-mix(in oklab, #fff 5%, var(--bg)); --line: color-mix(in oklab, #fff 13%, var(--bg)); --wire: color-mix(in oklab, #fff 32%, var(--bg));
  --brand-tx: #e79a9a; --brand-t: color-mix(in oklab, var(--c1) 24%, var(--bg));
  --red: #f0646b; --red-d: #f48a90; --red-t: color-mix(in oklab, #a60303 28%, var(--bg));
  --gold-t: color-mix(in oklab, var(--c2) 14%, var(--bg));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--t-md)/1.75 var(--f); overflow-x: hidden; }
h1, h2, h3, h4, p, figure, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.5; text-wrap: balance; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
bdi { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.sec { padding-block-start: var(--gap); }
.band { margin-block-start: var(--gap); padding-block: var(--gap); background: var(--surface); }
.meta { font-size: var(--t-xs); line-height: 1.6; color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 4px; background: var(--brand-t); color: var(--brand-tx); font-size: var(--t-xs); font-weight: 600; line-height: 1.7; white-space: nowrap; }
.chip.red { background: var(--red-t); color: var(--red-d); }
.chip.gold { background: var(--gold-t); color: var(--ink); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; animation: pulse 1.6s ease-in-out infinite; }

/* أزرار */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-sm); background: var(--brand); color: var(--on-brand); font-size: var(--t-sm); font-weight: 600; line-height: 1.2; transition: background .2s, transform .15s var(--ease); }
.btn:hover { background: var(--brand-tx); }
.btn:active { transform: scale(.95); }
.btn { transition: background .2s, color .2s, box-shadow .2s, transform var(--snap-d) var(--snap); }
.btn.red { background: var(--red-f); color: #fff; }
.btn.red:hover { background: color-mix(in oklab, var(--red-f) 84%, #000); }
.btn.gold { background: var(--gold); color: var(--on-gold); }
.btn.gold:hover { background: color-mix(in oklab, var(--gold) 86%, #000); }
.more { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-sm); font-weight: 600; color: var(--brand-tx); white-space: nowrap; }
.more:hover { text-decoration: underline; text-underline-offset: 4px; }
[dir="rtl"] .flip { transform: scaleX(-1); }
.ic { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: transparent; font-size: var(--t-xs); font-weight: 600; color: var(--ink2); }
.ic:hover { background: var(--line); }

/* الشريط العلوي والترويسة */
.util { background: var(--surface); font-size: var(--t-xs); color: var(--ink2); }
.util .wrap { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.util-s { display: flex; align-items: center; gap: 12px; min-width: 0; white-space: nowrap; overflow: hidden; }
.util-s b { color: var(--brand-tx); }
.util-e { display: flex; align-items: center; flex: none; }
.util .cz-n { padding: 0 6px; border-radius: 4px; background: var(--brand-t); color: var(--brand-tx); }
.util .cz-l { display: none; }
.hd .wrap { display: flex; align-items: center; gap: 16px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand img { width: 36px; height: 44px; flex: none; }
.brand .dk, :root[data-theme="dark"] .brand .lt { display: none; }
:root[data-theme="dark"] .brand .dk { display: block; }
.brand h1, .brand strong { display: block; font-size: var(--t-md); font-weight: 700; line-height: 1.4; white-space: nowrap; }
.brand span span, .brand div span { display: none; font-size: var(--t-xs); color: var(--muted); line-height: 1.5; }
.srch { display: none; flex: 1; max-width: 420px; margin-inline: auto; position: relative; }
.srch input { width: 100%; min-height: 44px; padding-inline: 16px 48px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: var(--t-sm); }
.srch input:focus-visible { outline: 0; border-color: var(--brand); background: var(--bg); }
.srch button { position: absolute; inset-block: 0; inset-inline-end: 0; width: 44px; border: 0; background: transparent; color: var(--ink2); display: grid; place-items: center; }
.hd-e { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; flex: none; }
.live b { display: none; font-weight: 500; }
.live span { display: none; }
.menu { box-shadow: inset 0 0 0 1px var(--line); }

.nav { position: sticky; top: 0; z-index: 30; background: var(--bg); border-block: 1px solid var(--line); }
.nav-in { display: none; padding-block: 12px 16px; }
.nav[data-open] .nav-in { display: grid; gap: 12px; }
.nav ul.main { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.nav .main > li > a { display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border-radius: var(--r-sm); background: var(--surface); font-size: var(--t-sm); font-weight: 600; white-space: nowrap; }
.nav .main > li > a[aria-current="page"] { background: var(--brand-t); color: var(--brand-tx); }
.nav .sub { display: none; }
.nav .srch { display: block; max-width: none; margin: 0; }

.tick { position: relative; background: var(--deep); color: var(--on-deep); }
.tick .wrap { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.tick .lbl { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 4px; background: var(--red-f); color: #fff; font-size: var(--t-xs); font-weight: 700; line-height: 1.7; }
.tick .lbl .dot { background: #fff; }
.tick-bar { position: absolute; inset-inline: 0; inset-block-end: 0; height: 2px; background: rgb(255 255 255 / .12); }
.tick-bar i { display: block; height: 100%; background: var(--gold-d); transform-origin: right; animation: tickbar 7s linear forwards; }
[dir="ltr"] .tick-bar i { transform-origin: left; }
.tick:hover .tick-bar i, .tick:focus-within .tick-bar i { animation-play-state: paused; }
@keyframes tickbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tick a { flex: 1; min-width: 0; font-size: var(--t-sm); font-weight: 500; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tick a:hover { text-decoration: underline; text-underline-offset: 4px; }
.tick .ic { color: var(--on-deep-m); }
.tick .ic:hover { background: var(--deep2); color: var(--on-deep); }
.tick .ic:first-of-type { display: none; }

/* رأس القسم */
.sh { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block-end: 12px; margin-block-end: 16px; border-block-end: 1px solid var(--line); }
.sh h2, .sh h3 { display: flex; align-items: center; gap: 8px; font-size: var(--t-lg); line-height: 1.4; }
.sh h2::before, .sh h3::before { content: ""; width: 6px; height: 20px; border-radius: 3px; background: var(--brand); flex: none; }
.sh.red h2::before, .sh.red h3::before { background: var(--red); }
.sh.gold h2::before, .sh.gold h3::before { background: var(--gold); }
.sh .acts { display: flex; gap: 16px; }

/* البطاقات والصفوف */
.thumb { position: relative; display: block; aspect-ratio: 1.618; border-radius: var(--r); overflow: hidden; background: var(--surface); }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
a:hover > .thumb img { transform: scale(1.04); }
.card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.card h3, .card h4 { font-size: var(--t-md); font-weight: 600; line-height: 1.5; }
.feat2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: 4px 16px; align-items: start; align-content: start; padding-block-end: 12px; border-block-end: 1px solid var(--line); }
.feat2 .thumb { grid-row: 1 / span 2; }
.feat2 h3 { font-size: var(--t-md); font-weight: 600; line-height: 1.5; }
.feat2:hover h3 { color: var(--brand-tx); }
.feat2 + ul > li:first-child > .row { padding-block-start: 12px; }
.card:hover h3, .card:hover h4, a.row:hover .tt { color: var(--brand-tx); }
.row { display: grid; align-content: center; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding-block: 12px; border-block-start: 1px solid var(--line); min-width: 0; }
li:first-child > .row { border-block-start: 0; padding-block-start: 0; }
.latest li, .pr-news li, .rec li, .breath li, .vlist > li { flex: 1; display: grid; }
.split:has(> .fitcol), .g2:has(> .fitcol) { align-items: start; }
.row .tt { font-size: var(--t-sm); font-weight: 500; line-height: 1.65; }
.row .meta { grid-column: 1; }
.row .val { grid-column: 2; grid-row: 1 / span 2; font-size: var(--t-xs); font-weight: 600; color: var(--brand-tx); white-space: nowrap; }
.row.pic { grid-template-columns: 104px minmax(0, 1fr); align-items: start; }
.row.pic .thumb { grid-row: 1 / span 2; width: 104px; }
.row.pic .tt, .row.pic .meta { grid-column: 2; }
.play { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; transition: transform var(--snap-d) var(--snap), background .2s, box-shadow .3s; }
.play.is-cur { box-shadow: 0 0 0 4px var(--brand-t); }
.play:hover { background: var(--brand-tx); transform: scale(1.06); }
.badge-play { position: absolute; inset-block-end: 8px; inset-inline-start: 8px; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--deep) 88%, transparent); color: var(--on-deep); display: grid; place-items: center; }

/* الواجهة */
.hero { display: grid; gap: 24px; }
.fitcol { min-width: 0; }
.lead { position: relative; display: block; aspect-ratio: 1.618; border-radius: var(--r); overflow: hidden; color: #fff; }
.lead img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.lead:hover img { transform: scale(1.03); }
.lead .tx { position: absolute; inset-inline: 0; inset-block-end: 0; display: grid; gap: 8px; justify-items: start; padding: 48px 16px 16px; background: linear-gradient(to top, rgb(12 10 9 / .92) 30%, rgb(12 10 9 / 0)); }
.lead .chip { background: var(--red-f); color: #fff; }
.lead h2 { font-size: var(--t-lg); line-height: 1.5; }
.lead p { display: none; font-size: var(--t-sm); line-height: 1.7; color: #e3ece6; max-width: 60ch; }
.lead .meta { color: #cfdcd4; }
.sub3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; margin-block-start: 16px; }
.onair { display: grid; gap: 12px; padding: 16px; border-radius: var(--r); background: var(--deep); color: var(--on-deep); }
.onair-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--t-xs); font-weight: 600; color: var(--on-deep-m); }
.onair-h span { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-d); }
.onair h2 { font-size: var(--t-lg); line-height: 1.4; }
.onair .meta { color: var(--on-deep-m); }
.prog { height: 4px; border-radius: 2px; background: var(--deep2); overflow: hidden; }
.prog i { display: block; height: 100%; background: var(--gold); border-radius: 2px; }
.onair-a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.onair-a .more { color: var(--gold-d); }
.onair ol { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.onair li { display: grid; padding: 8px 12px; border-radius: var(--r-sm); background: var(--deep2); font-size: var(--t-sm); font-weight: 500; line-height: 1.6; min-width: 0; }
.onair li small { font-size: var(--t-xs); color: var(--on-deep-m); }
.minute { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; border: 0; border-radius: var(--r-sm); background: var(--deep2); color: var(--on-deep); text-align: start; transition: background .2s; }
.minute:hover { background: color-mix(in oklab, var(--deep) 74%, #fff); }
.minute .play { width: 36px; height: 36px; background: var(--gold); color: var(--on-gold); }
.minute b { display: block; font-size: var(--t-sm); font-weight: 600; line-height: 1.5; }
.minute small { display: block; font-size: var(--t-xs); color: var(--on-deep-m); line-height: 1.5; }
.latest { display: flex; flex-direction: column; margin-block-start: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); }
.latest .sh { margin-block-end: 12px; }
.latest ul { flex: 1; display: flex; flex-direction: column; }
.latest .row { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.latest .row .tm { font-size: var(--t-xs); font-weight: 600; color: var(--brand-tx); min-width: 5ch; }

/* الملفات */
.files { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(88px, 1fr); gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding: 4px var(--pad); }
.files::-webkit-scrollbar { display: none; }
.files a { display: grid; justify-items: center; align-content: start; gap: 8px; scroll-snap-align: start; font-size: var(--t-xs); font-weight: 600; line-height: 1.5; text-align: center; }
.files img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand); transition: transform .25s var(--ease); }
.files a:hover img { transform: scale(1.07); }
.files a:hover { color: var(--brand-tx); }

/* الشبكات */
.g3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; }
.g4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.g2, .split { display: grid; gap: 24px; }
.split > *, .g2 > *, .g3 > *, .g4 > * { min-width: 0; }
.beat .card { margin-block-end: 12px; }

/* الخريطة */
.map-card { padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); display: grid; gap: 8px; align-content: start; }
.map-card svg { width: 100%; height: auto; display: block; }
.map-land { fill: var(--brand-t); stroke: var(--brand); stroke-width: 1.5; stroke-linejoin: round; }
.map-water { fill: #bfdcee; }
:root[data-theme="dark"] .map-water { fill: #1d3a4d; }
.map-city { fill: var(--muted); }
.map-ct { font: 600 11px var(--f); fill: var(--ink2); text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }
.map-line { stroke: #b9c4bd; stroke-width: 1; fill: none; }
.map-line.on { stroke: var(--brand); stroke-width: 2; }
.mk { cursor: pointer; }
.mk .pt { stroke: var(--bg); stroke-width: 2; }
.mk.t1 .pt { fill: #c1121f; } .mk.t2 .pt { fill: #d99a00; } .mk.t3 .pt { fill: var(--ink); }
.mk rect { fill: var(--bg); stroke: var(--line); stroke-width: 1; }
.mk text { font: 600 13px var(--f); fill: var(--ink); text-anchor: middle; }
.mk:hover rect, .mk:focus-visible rect { stroke: var(--brand); stroke-width: 2; }
.mk:focus-visible { outline: 0; }
.mk[aria-pressed="true"] rect { fill: var(--brand); stroke: var(--brand); }
.mk[aria-pressed="true"] text { fill: var(--on-brand); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--t-xs); color: var(--ink2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i, .pr-list i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.t1c { background: #c1121f; } .t2c { background: #d99a00; } .t3c { background: var(--ink); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stat { padding: 12px 16px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); }
.stat b { display: block; font-size: var(--t-xl); font-weight: 700; line-height: 1.3; color: var(--brand-tx); }
.stat.red b { color: var(--red-d); }
.stat span { display: block; margin-block-start: 4px; font-size: var(--t-xs); line-height: 1.6; color: var(--ink2); }
.pr-detail { margin-block-start: 16px; padding: 16px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); display: grid; gap: 12px; }
.pr-detail h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--t-lg); line-height: 1.4; }
.pr-detail p { font-size: var(--t-sm); color: var(--ink2); }
.pr-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.pr-list button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); font-size: var(--t-sm); font-weight: 600; text-align: start; }
.pr-list button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.pr-news { display: flex; flex-direction: column; margin-block-start: 16px; padding: 16px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); }
.pr-news ul { flex: 1; display: flex; flex-direction: column; }

/* البرامج */
.sched { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-block-start: 16px; }
.slot { display: grid; padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface); min-width: 0; }
.slot b { font-size: var(--t-xs); font-weight: 600; color: var(--brand-tx); line-height: 1.6; }
.slot span { font-size: var(--t-sm); font-weight: 500; line-height: 1.6; }
.slot.now { background: var(--deep); color: var(--on-deep); }
.slot.now b { color: var(--gold-d); }

/* السجلات */
.rec { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--line); border-block-start: 3px solid var(--brand); border-radius: var(--r); }
.rec.red { border-block-start-color: var(--red); } .rec.gold { border-block-start-color: var(--gold); }
.rec h3 { font-size: var(--t-md); }
.rec p { font-size: var(--t-sm); color: var(--ink2); }
.rec ul { flex: 1; display: flex; flex-direction: column; }
.rec .row { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; padding-block: 8px; }
.rec li:first-child > .row { padding-block-start: 8px; border-block-start: 1px solid var(--line); }
.rec .row b { font-size: var(--t-sm); font-weight: 700; color: var(--brand-tx); white-space: nowrap; }
.rec.red .row b { color: var(--red-d); } .rec.gold .row b { color: var(--ink); }

/* الوسائط */
.vfeat { position: relative; display: block; aspect-ratio: 1.618; border-radius: var(--r); overflow: hidden; color: #fff; }
.vfeat img { width: 100%; height: 100%; object-fit: cover; }
.vfeat .tx { position: absolute; inset-inline: 0; inset-block-end: 0; display: flex; align-items: center; gap: 12px; padding: 40px 16px 16px; background: linear-gradient(to top, rgb(12 10 9 / .9) 35%, rgb(12 10 9 / 0)); }
.vfeat h3 { font-size: var(--t-md); font-weight: 600; line-height: 1.6; }
.vfeat .play { background: var(--gold); color: var(--on-gold); }
.vlist { display: flex; flex-direction: column; }
.tile { position: relative; display: block; aspect-ratio: 1.618; border-radius: var(--r); overflow: hidden; color: #fff; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.tile:hover img { transform: scale(1.05); }
.tile span { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 28px 12px 10px; background: linear-gradient(to top, rgb(12 10 9 / .88) 40%, rgb(12 10 9 / 0)); font-size: var(--t-xs); font-weight: 600; line-height: 1.6; }
.mt { margin-block-start: 24px; }

/* الصوتيات */
.pod-f { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; margin-block-end: 8px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); }
.pod-f img { width: 72px; height: 72px; border-radius: var(--r-sm); object-fit: cover; }
.pod-f h3 { font-size: var(--t-sm); font-weight: 600; line-height: 1.6; }
.trks { display: flex; flex-direction: column; }
.trk { flex: 1; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding-block: 8px; border-block-start: 1px solid var(--line); }
.trk:first-child { border-block-start: 0; }
.trk .tt { display: block; font-size: var(--t-sm); font-weight: 500; line-height: 1.6; }
.trk .play { width: 36px; height: 36px; }
.trk .du { font-size: var(--t-xs); font-weight: 600; color: var(--muted); }
.acol { display: flex; flex-direction: column; }
.acol .trks { flex: 1; }

/* أنفاس ومصطلحات */
.breath { padding: 16px; border-radius: var(--r); background: var(--gold-t); display: flex; flex-direction: column; gap: 8px; }
.breath h2 { font-size: var(--t-lg); }
.breath p { font-size: var(--t-sm); color: var(--ink2); }
.breath ul { flex: 1; display: flex; flex-direction: column; }
.breath .row { border-color: rgb(20 32 26 / .14); }
:root[data-theme="dark"] .breath .row { border-color: var(--line); }
.gl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px 24px; }
.gl dt { font-size: var(--t-md); font-weight: 700; line-height: 1.5; color: var(--brand-tx); }
.gl dd { margin-block-start: 4px; font-size: var(--t-sm); line-height: 1.7; color: var(--ink2); }

/* المنصات */
.plat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.plat li:first-child { grid-column: span 2; }
.plat a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 12px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); font-size: var(--t-sm); font-weight: 600; transition: background .2s, color .2s, border-color .2s; }
.plat a:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

/* على جناح الطير */
.wing { display: grid; gap: 24px; padding: 16px; border-radius: var(--r); background: var(--deep); color: var(--on-deep); }
.wing h2 { font-size: var(--t-lg); line-height: 1.5; }
.wing-i { display: flex; flex-direction: column; gap: 12px; }
.wing-i p { font-size: var(--t-sm); color: var(--on-deep-m); }
.wing-i figure { position: relative; flex: 1; min-height: 180px; border-radius: var(--r); overflow: hidden; }
.wing-i img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: start; }
.fld { display: grid; gap: 8px; min-width: 0; }
.full { grid-column: 1 / -1; }
.fld label { font-size: var(--t-xs); font-weight: 600; color: var(--on-deep-m); line-height: 1.5; }
.fld input, .fld select, .fld textarea { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid color-mix(in oklab, var(--on-deep) 24%, var(--deep)); border-radius: var(--r-sm); background: var(--deep2); color: var(--on-deep); font-size: var(--t-sm); line-height: 1.6; }
.fld textarea { min-height: 76px; resize: vertical; }
.fld :is(input, select, textarea):focus-visible { outline: 0; border-color: var(--gold); }
.fld ::placeholder { color: var(--on-deep-m); opacity: 1; }
.prev { padding: 12px 16px; border-radius: var(--r-sm); background: var(--gold); color: var(--on-gold); }
.prev small { display: block; font-size: var(--t-xs); font-weight: 600; line-height: 1.6; }
.prev p { font-size: var(--t-sm); font-weight: 500; line-height: 1.7; overflow-wrap: anywhere; }
.cmp-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.cmp-f small { font-size: var(--t-xs); color: var(--on-deep-m); }

/* التذييل */
.foot { margin-block-start: var(--gap); padding-block: 32px 96px; background: var(--deep); color: var(--on-deep); font-size: var(--t-sm); }
.foot-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.foot-g > :first-child { grid-column: 1 / -1; display: grid; gap: 12px; align-content: start; }
.foot p { color: var(--on-deep-m); max-width: 44ch; }
.foot h3 { font-size: var(--t-sm); margin-block-end: 8px; color: var(--gold-d); }
.foot li a { display: inline-block; padding-block: 4px; color: var(--on-deep-m); }
.foot li a:hover { color: var(--on-deep); text-decoration: underline; text-underline-offset: 4px; }
.foot .brand span span { color: var(--on-deep-m); }
.foot dl { display: grid; gap: 16px; }
.foot dt { font-size: var(--t-xs); color: var(--on-deep-m); line-height: 1.5; }
.foot dd { margin-block-start: 8px; font-weight: 600; line-height: 1.5; }
.foot-b { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-block-start: 24px; padding-block-start: 16px; border-block-start: 1px solid color-mix(in oklab, var(--on-deep) 18%, var(--deep)); font-size: var(--t-xs); color: var(--on-deep-m); }

/* صفحات الأقسام */
.phd { padding-block: 24px; background: var(--surface); border-block-end: 1px solid var(--line); }
.crumb { display: flex; gap: 8px; font-size: var(--t-xs); color: var(--muted); margin-block-end: 8px; }
.crumb a { color: var(--brand-tx); font-weight: 600; }
.phd h1 { font-size: var(--t-xl); line-height: 1.4; }
.phd p { margin-block-start: 4px; font-size: var(--t-sm); color: var(--ink2); max-width: 70ch; }
.list2 { display: grid; gap: 0 24px; }
.list2 li:first-child > .row { padding-block-start: 12px; border-block-start: 1px solid var(--line); }
.art h1 { font-size: var(--t-xl); line-height: 1.5; margin-block: 8px 12px; }
.art .thumb { margin-block: 16px; }
.art p + p, .prose p + p { margin-block-start: 12px; }
.prose { max-width: 68ch; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); }
.facts dt { font-size: var(--t-xs); color: var(--muted); line-height: 1.5; }
.facts dd { margin-block-start: 8px; font-size: var(--t-sm); font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.side { display: flex; flex-direction: column; gap: 16px; }
.side .latest { margin: 0; flex: 1; }

/* المشغّل والتخصيص */
dialog.cz { margin: 0; margin-inline-start: auto; width: min(420px, 100vw); max-width: none; height: 100dvh; max-height: none; padding: 0; border: 0; background: var(--bg); color: var(--ink); box-shadow: var(--shadow); }
dialog.cz::backdrop { background: rgb(12 10 9 / .55); }
.cz-h { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 16px; background: var(--bg); border-block-end: 1px solid var(--line); }
.cz-h h2 { font-size: var(--t-md); }
.cz-p { padding: 12px 16px; font-size: var(--t-xs); color: var(--muted); }
.cz-pre { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 16px 12px; }
.sw { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 4px 16px; border-block-start: 1px solid var(--line); font-size: var(--t-sm); font-weight: 500; cursor: pointer; }
.sw input { appearance: none; flex: none; position: relative; width: 44px; height: 24px; margin: 0; border-radius: 12px; background: #8f9b94; cursor: pointer; transition: background .2s; }
.sw input::after { content: ""; position: absolute; inset-block: 3px; inset-inline-start: 3px; width: 18px; border-radius: 50%; background: #fff; transition: inset-inline-start .2s var(--ease); }
.sw input:checked { background: var(--brand); }
.sw input:checked::after { inset-inline-start: 23px; }

/* الحركة */
.js .rv { opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease), transform var(--spring-d) var(--spring); transition-delay: calc(var(--i, 0) * 60ms); }
.js .rv.in { opacity: 1; transform: none; }
@keyframes pulse { 50% { opacity: .3; } }
@keyframes lv { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .dot, .bars i { animation: none; }
}

@media (max-width: 599px) {
  #today { display: none; }
  .sub3 .card { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 4px 12px; align-items: start; align-content: start; }
  .sub3 .card .thumb { grid-row: 1 / span 2; }
  .sub3 .card h3 { font-size: var(--t-sm); line-height: 1.65; }
}
@media (min-width: 600px) {
  :root { --pad: 24px; }
  .util .cz-l { display: inline; }
  .tick a { -webkit-line-clamp: 1; }
  .tick .ic:first-of-type { display: inline-flex; }
  .lead .tx { padding: 64px 24px 20px; }
  .lead h2 { font-size: var(--t-xl); line-height: 1.45; }
  .lead p { display: block; }
  .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sched { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .plat { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .plat li:first-child { grid-column: auto; }
  .foot-g { grid-template-columns: 1.618fr 1fr 1fr 1fr; }
  .foot-g > :first-child { grid-column: auto; }
  .list2 { grid-template-columns: 1fr 1fr; }
  .wing { padding: 24px; }
  .files { grid-auto-columns: minmax(96px, 1fr); }
}
@media (min-width: 1000px) {
  :root { --gap: 48px; --pad: 32px; }
  .brand img { width: 44px; height: 54px; }
  .brand h1, .brand strong { font-size: var(--t-lg); }
  .brand span span, .brand div span { display: block; }
  .hd .srch { display: block; }
  .live b, .live span { display: inline; }
  .menu { display: none; }
  .nav-in, .nav[data-open] .nav-in { display: block; padding-block: 0; }
  .nav .srch, .nav .x { display: none; }
  .nav ul.main { display: flex; gap: 0; }
  .nav .main > li { position: relative; }
  .nav .main > li > a { min-height: 48px; padding: 0 clamp(8px, .9vw, 14px); border-radius: 0; background: none; }
  .nav .main > li > a:hover { color: var(--brand-tx); }
  .nav .main > li > a[aria-current="page"] { background: none; box-shadow: inset 0 -3px var(--brand); }
  .nav .sub { position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: 5; min-width: 210px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); box-shadow: var(--shadow); }
  .nav li:hover > .sub, .nav li:focus-within > .sub { display: block; }
  .nav .sub a { display: block; padding: 8px 12px; border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 500; }
  .nav .sub a:hover { background: var(--brand-t); color: var(--brand-tx); }
  .hero, .split { grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); }
  .split.rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); }
  .hero { align-items: start; }
  .g2 { grid-template-columns: 1fr 1fr; }
  .onair { padding: 20px; }
  .pr-list { display: none; }
  .sched { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .wing { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); padding: 32px; }
  .foot { padding-block-end: 32px; }
}

/* ===== الإصدار 4: السلك الشائك كنمط للموقع ===== */
:root { --wire-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='14' viewBox='0 0 56 14' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M0 7Q7 3.2 14 7T28 7T42 7T56 7M0 7Q7 10.8 14 7T28 7T42 7T56 7'/%3E%3Cpath d='M23.5 1.5 32.5 12.5M32.5 1.5 23.5 12.5M25.6 5.2h4.8M25.6 8.8h4.8' stroke-width='1.5'/%3E%3C/svg%3E"); }
.sh::after, .foot::before, .phd::after, .map-card::before, .wire { content: ""; display: block; height: 14px; background: var(--wire); -webkit-mask: var(--wire-img) repeat-x 0 50% / 56px 14px; mask: var(--wire-img) repeat-x 0 50% / 56px 14px; }
.sh { flex-wrap: wrap; gap: 4px 16px; padding-block-end: 0; border-block-end: 0; }
.sh::after { flex: 0 0 100%; }
.foot { position: relative; padding-block-start: 56px; }
.foot::before { position: absolute; inset-inline: 0; inset-block-start: 16px; background: var(--gold-d); }
.phd { position: relative; padding-block-end: 40px; border-block-end: 0; }
.phd::after { position: absolute; inset-inline: 0; inset-block-end: 10px; }

/* لغة الشكل: زاوية «الجناح» في كل صورة وبطاقة رئيسية */
.lead, .vfeat, .onair, .wing, .map-card, .breath, .pr-detail, .latest, .pr-news { border-start-end-radius: var(--rw); }
.thumb, .tile, .wing-i figure { border-start-end-radius: 18px; }
.row.pic .thumb, .feat2 .thumb, .pod-f img { border-start-end-radius: 14px; }

/* خريطة هادئة: لون واحد، أشكال مختلفة للأنواع */
.map-fill { fill: var(--surface); } .map-dot { fill: var(--wire); }
.map-land { fill: url(#mapTex); stroke: var(--ink); stroke-width: 1.1; }
.map-water, :root[data-theme="dark"] .map-water { fill: color-mix(in oklab, var(--ink) 16%, var(--bg)); }
.map-line { stroke: var(--wire); stroke-width: .8; }
.map-line.on { stroke: var(--brand); stroke-width: 1.5; }
.mk .pt.s1 { fill: var(--brand); stroke: var(--bg); stroke-width: 1.5; }
.mk .pt.s2 { fill: var(--bg); stroke: var(--brand); stroke-width: 2.2; }
.mk .pt.s3 { fill: var(--ink); stroke: var(--bg); stroke-width: 1.5; }
.mk rect.lb { fill: transparent; stroke: none; }
.mk text { font: 500 12.5px var(--f); fill: var(--ink2); }
.mk:hover text, .mk:focus-visible text { fill: var(--brand-tx); }
.mk:hover rect.lb, .mk:focus-visible rect.lb { stroke: var(--brand); stroke-width: 1.2; }
.mk[aria-pressed="true"] rect.lb { fill: var(--brand); stroke: var(--brand); }
.mk[aria-pressed="true"] text { fill: var(--on-brand); font-weight: 700; }
.pulse { fill: none; stroke: var(--brand); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ping 1.9s var(--ease) infinite; }
.legend i, .pr-list i { width: 10px; height: 10px; flex: none; border-radius: 50%; }
i.s1 { background: var(--brand); } i.s2 { border: 2px solid var(--brand); } i.s3 { background: var(--ink); border-radius: 1px; transform: rotate(45deg) scale(.86); }
.pr-list button[aria-pressed="true"] i.s1, .pr-list button[aria-pressed="true"] i.s3 { background: var(--on-brand); } .pr-list button[aria-pressed="true"] i.s2 { border-color: var(--on-brand); }
.stat.red b { color: var(--brand-tx); }

/* لوحة الإعدادات والترس */
.fab { position: fixed; inset-block-end: 16px; inset-inline-start: 16px; z-index: 45; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow); display: grid; place-items: center; transition: transform .5s var(--ease), inset-block-end .35s var(--ease); }
.fab:hover { transform: rotate(72deg) scale(1.06); }
.st { padding: 16px; border-block-start: 1px solid var(--line); }
.st h3 { display: flex; align-items: center; justify-content: space-between; font-size: var(--t-sm); margin-block-end: 12px; }
.st h3 span { font-size: var(--t-xs); font-weight: 600; color: var(--brand-tx); }
.pals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pal, .fnt, .seg button { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); font-size: var(--t-xs); font-weight: 600; text-align: start; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.pal:hover, .fnt:hover, .seg button:hover { transform: translateY(-2px); border-color: var(--brand); }
.pal[aria-pressed="true"], .fnt[aria-pressed="true"], .seg button[aria-pressed="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.sw3 { display: flex; flex: none; padding-inline-start: 5px; }
.sw3 i { width: 18px; height: 18px; border-radius: 50%; margin-inline-start: -5px; box-shadow: 0 0 0 2px var(--bg); }
.pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-block-start: 12px; }
.pick label { display: grid; gap: 8px; font-size: var(--t-xs); color: var(--muted); line-height: 1.5; }
.pick input { width: 100%; height: 44px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); cursor: pointer; }
.fonts { display: grid; gap: 4px; }
.fnt { justify-content: space-between; font-size: var(--t-md); }
.fnt small { font: 500 var(--t-xs)/1 system-ui, sans-serif; color: var(--muted); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.seg button { justify-content: center; }
.st .sw { margin-inline: -16px; }
.st .cz-pre { padding: 0 0 12px; }
.cz-f { padding: 16px; border-block-start: 1px solid var(--line); }
.cz-f .btn { width: 100%; }

/* حركة انسيابية */
html.theming, html.theming * { transition: background-color .55s var(--ease), color .55s var(--ease), border-color .55s var(--ease), fill .55s var(--ease), stroke .55s var(--ease), box-shadow .55s var(--ease) !important; }
.prg { position: fixed; inset-inline: 0; inset-block-start: 0; z-index: 60; height: 3px; pointer-events: none; }
.prg i { display: block; height: 100%; background: var(--brand); transform: scaleX(0); transform-origin: right; }
[dir="ltr"] .prg i { transform-origin: left; }
.onair { position: relative; overflow: hidden; }
.onair > :not(.wave) { position: relative; }
.wave { position: absolute; inset-inline: 0; inset-block-end: 0; width: 100%; height: 64px; opacity: .2; pointer-events: none; }
.wave path { fill: none; stroke: var(--gold-d); stroke-width: 2; animation: flow 7s linear infinite; }
.wave path + path { animation-duration: 12s; opacity: .55; }
body[data-playing="live"] .wave { opacity: .42; } body[data-playing="live"] .wave path { animation-duration: 2.4s; }
.lead img { animation: kb 20s ease-in-out infinite alternate; }
.card, .tile, .rec, .stat, .feat2, .files a, .pcard, .vcard, .bcard { transition: transform var(--spring-d) var(--spring); }
.card:hover, .tile:hover, .rec:hover, .feat2:hover, .pcard:hover, .vcard:hover, .bcard:hover { transform: translateY(-4px); }
.ind { display: none; }
::view-transition-old(root) { animation: vt-out .22s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .4s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes flow { to { transform: translateX(-150px); } }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.07) translate(-1%, -1%); } }
@keyframes ping { from { transform: scale(1); opacity: .9; } to { transform: scale(2.8); opacity: 0; } }
@media (min-width: 1000px) {
  .nav ul.main { position: relative; }
  .nav .main > li.ind { display: block; position: absolute; inset-block-end: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand); pointer-events: none; transition: left .5s var(--ease), width .5s var(--ease), opacity .3s; }
  .nav .main > li > a[aria-current="page"] { box-shadow: none; color: var(--brand-tx); }
}
@media (prefers-reduced-motion: reduce) {
  .wave path, .lead img, .pulse { animation: none; }
  html.theming, html.theming * { transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}