
:root{
  --bg:#f3efe5;--paper:#fffdf8;--ink:#1f2b28;--muted:#69736f;--line:#d9d3c7;
  --deep:#173d36;--deep2:#24594d;--gold:#b68a45;--gold-soft:#f5ead7;
  --green-soft:#e7f0eb;--danger:#8d2d2d;--shadow:0 14px 40px rgba(29,45,40,.11)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#e9e2d5,var(--bg));color:var(--ink);font-family:Georgia,"Times New Roman",serif;line-height:1.75}
body.dark{--bg:#0f1816;--paper:#17221f;--ink:#edf4f0;--muted:#b8c6c0;--line:#34423e;--deep:#d3eee4;--deep2:#9bd4c1;--gold:#efc77f;--gold-soft:#392d1d;--green-soft:#20342e;background:#0f1816}
a{color:inherit}
.site-header{padding:30px 20px;text-align:center;color:#fff;background:linear-gradient(135deg,#0d3730,#192321);border-bottom:5px solid var(--gold)}
.brand{font:700 .78rem Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;opacity:.86}
.logo-title{margin:8px auto 4px;font-size:clamp(2rem,5vw,4rem);line-height:1.08}
.tagline{max-width:820px;margin:0 auto;color:#e1ece8}
.topnav{max-width:1180px;margin:auto;padding:12px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.topnav a{text-decoration:none;font:700 .9rem Arial,sans-serif}
button,.button{border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:10px 14px;border-radius:999px;font:700 .88rem Arial,sans-serif;cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.button:hover,button.active{background:var(--deep);color:#fff;border-color:var(--deep)}
body.dark button:hover,body.dark .button:hover,body.dark button.active{color:#10201b}
.container{max-width:1120px;margin:30px auto 70px;padding:0 18px}
.hero{background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:34px;box-shadow:var(--shadow);display:grid;grid-template-columns:1.35fr .65fr;gap:24px;align-items:center}
.hero h1{font-size:clamp(2rem,4vw,3.6rem);line-height:1.1;margin:.2em 0}
.hero-badge{font:800 .78rem Arial,sans-serif;color:var(--deep2);text-transform:uppercase;letter-spacing:.12em}
.hero-side{background:var(--green-soft);border-radius:22px;padding:22px;text-align:center}
.hero-side .big{font-size:3rem;display:block}
.section-title{margin:38px 0 16px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card h3{margin:.25em 0}.card p{color:var(--muted)}.card-meta{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 18px}
.chip{font:700 .76rem Arial,sans-serif;background:var(--green-soft);padding:5px 9px;border-radius:999px;color:var(--deep2)}
.card .button{margin-top:auto;text-align:center}
.empty{background:var(--paper);border:1px dashed var(--line);border-radius:18px;padding:28px;text-align:center;color:var(--muted)}
.footer{text-align:center;padding:30px 20px 50px;color:var(--muted);font-family:Arial,sans-serif}
.toolbar-wrap{position:sticky;top:0;z-index:50;padding:10px;background:color-mix(in srgb,var(--paper) 94%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.toolbar{max-width:1150px;margin:auto;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.lecture-main{max-width:1050px;margin:30px auto 70px;padding:0 18px}
.intro,.part{background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.intro{padding:26px;margin-bottom:28px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.metric{padding:14px;border-radius:14px;text-align:center;background:var(--green-soft);font-family:Arial,sans-serif}
.metric strong{display:block;font-size:1.15rem}.metric span{font-size:.82rem;color:var(--muted)}
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.video-card{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--paper)}
.video-label{padding:12px 16px;font:800 .82rem Arial,sans-serif;letter-spacing:.05em;text-transform:uppercase}
.father-video-label{background:var(--green-soft);color:var(--deep2)}
.original-video-label{background:var(--gold-soft);color:var(--gold)}
.video-wrap{position:relative;background:#000;aspect-ratio:16/9;display:grid;place-items:center}
.video-wrap video{width:100%;height:100%;display:none;background:#000}
.video-placeholder,.video-error{padding:24px;text-align:center;color:#ddd;font:600 .92rem/1.7 Arial,sans-serif}
.video-error{display:none;color:#ffd7d7}
.part{overflow:hidden;margin-bottom:26px;break-inside:avoid}
.part-head{display:flex;gap:13px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);font-family:Arial,sans-serif}
.num{min-width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--deep);font-weight:800}
.part-head h2{margin:0;font-size:1.08rem;line-height:1.3}.part-head small{color:var(--muted)}
.block{padding:23px 27px}.block+.block{border-top:1px dashed var(--line)}
.father{border-left:7px solid var(--deep)}.son{border-left:7px solid var(--gold);background:linear-gradient(90deg,var(--gold-soft),transparent 80%)}
.speaker{display:inline-block;margin-bottom:10px;font:800 .77rem Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.father .speaker{color:var(--deep2)}.son .speaker{color:var(--gold)}
.script{font-size:1.18rem;margin:.35em 0 1em}.ar{direction:rtl;text-align:right;font-family:"Traditional Arabic","Amiri","Scheherazade New",serif;font-size:1.28rem;line-height:2}
.quran,.hadith-text{direction:rtl;text-align:center;font-family:"Traditional Arabic","Amiri","Scheherazade New",serif;font-size:clamp(1.85rem,4.2vw,2.7rem);line-height:1.9;margin:10px auto;max-width:900px}
.quran{color:var(--deep2)}.hadith-text{color:var(--gold)}
.translation{text-align:center;font-style:italic;max-width:820px;margin:8px auto}.ref{text-align:center;color:var(--muted);font:700 .84rem Arial,sans-serif}
.cue{margin-bottom:14px;padding:9px 12px;border-left:4px solid var(--gold);background:var(--paper);color:var(--muted);font:.9rem Arial,sans-serif}
.direction{margin:10px 0;padding:9px 12px;border-radius:10px;background:var(--green-soft);color:var(--muted);font:italic .9rem Arial,sans-serif}
.note{font:.88rem Arial,sans-serif;color:var(--muted);margin-top:12px}
.hidden{display:none!important}
body[data-lang="en"] .lang-ar{display:none}body[data-lang="ar"] .lang-en{display:none}body[data-lang="ar"]{direction:rtl}
body[data-lang="ar"] .father,body[data-lang="ar"] .son{border-left:1px solid var(--line)}
body[data-lang="ar"] .father{border-right:7px solid var(--deep)}body[data-lang="ar"] .son{border-right:7px solid var(--gold);background:linear-gradient(270deg,var(--gold-soft),transparent 80%)}
body[data-lang="ar"] .cue{border-left:0;border-right:4px solid var(--gold)}
.tele .lecture-main{max-width:900px}.tele .intro,.tele .part-head,.tele .translation,.tele .ref,.tele .note{display:none}
.tele .part{border:0;box-shadow:none;background:transparent;margin-bottom:50px}.tele .block{border:0;background:transparent;padding:18px 4px}
.tele .script{font-size:1.75rem;line-height:1.85}.tele .ar.script{font-size:1.9rem}.tele .quran,.tele .hadith-text{font-size:3.1rem}
@media(max-width:850px){.hero{grid-template-columns:1fr}.cards{grid-template-columns:1fr 1fr}.video-grid{grid-template-columns:1fr}}
@media(max-width:650px){.cards{grid-template-columns:1fr}.metrics{grid-template-columns:1fr}.block{padding:20px 18px}.script{font-size:1.08rem}}
@media print{body{background:#fff!important;color:#000!important}.toolbar-wrap,.site-header,.intro,.footer{display:none!important}.lecture-main{max-width:none;margin:0;padding:0}.part{box-shadow:none;border:1px solid #bbb;margin-bottom:15px}.block{background:#fff!important}.quran,.hadith-text{color:#000}.script{font-size:12.5pt}}
