/* ═══════════════════════════════════════════════════════════════════
   بدور زاهرة — "Night of Full Moons"
   Deep midnight sky, moonlit gold, manuscript serenity.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --bg:        #070b16;
  --bg-2:      #0b1122;
  --panel:     #0f1730;
  --panel-2:   #131c3a;
  --ink:       #ede5d3;
  --ink-dim:   #cfc7b4;
  --muted:     #8a92aa;
  --gold:      #d4af6e;
  --gold-bright:#f2d99b;
  --gold-deep: #a9843f;
  --line:      rgba(var(--gold-rgb),.16);
  --line-soft: rgba(var(--gold-rgb),.09);
  --shadow:    0 18px 50px -18px rgba(0,0,0,.75);
  --r:         14px;
  --bg-rgb:          7,11,22;
  --panel-rgb:       15,23,48;
  --gold-rgb:        212,175,110;
  --gold-bright-rgb: 242,217,155;
  --contrast-rgb:    255,255,255;
  --f-ar-display:'Aref Ruqaa', 'Amiri', serif;
  --f-ar-head: 'Amiri', serif;
  --f-ar-body: 'Almarai', system-ui, sans-serif;
  --f-lat-display:'Marcellus', 'Amiri', serif;
  --f-lat-body:'Alegreya Sans', system-ui, sans-serif;
  color-scheme: dark;
}
html{transition: background-color .35s ease}
body{transition: background-color .35s ease, color .35s ease}

/* ── Light mode — "Day of Full Moons": warm parchment & amber gold ── */
html.light{
  --bg:        #faf5e8;
  --bg-2:      #f2e9d4;
  --panel:     #fffdf8;
  --panel-2:   #fbf3e2;
  --ink:       #2b2013;
  --ink-dim:   #4a3c26;
  --muted:     #8a7857;
  --gold:      #a9762f;
  --gold-bright:#7a5720;
  --gold-deep: #8a6226;
  --line:      rgba(var(--gold-rgb),.28);
  --line-soft: rgba(var(--gold-rgb),.15);
  --shadow:    0 18px 44px -18px rgba(120,90,30,.28);
  --bg-rgb:          250,245,232;
  --panel-rgb:       255,253,248;
  --gold-rgb:        169,118,47;
  --gold-bright-rgb: 122,87,32;
  --contrast-rgb:    40,28,10;
  color-scheme: light;
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--f-lat-body);
  font-size:16.5px; line-height:1.75;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
body.rtl{font-family:var(--f-ar-body)}
h1,h2,h3,.display{font-family:var(--f-lat-display); font-weight:400; letter-spacing:.02em}
body.rtl h1, body.rtl h2, body.rtl h3, body.rtl .display{font-family:var(--f-ar-head); font-weight:700; letter-spacing:0}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
.wrap{max-width:1200px; margin-inline:auto; padding-inline:22px}

/* ── Night sky backdrop ─────────────────────────────────────────── */
.sky{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(58,72,130,.35), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(32,44,90,.30), transparent 55%),
    radial-gradient(700px 700px at 50% 110%, rgba(20,28,60,.45), transparent 60%),
    var(--bg);
}
.sky::before{ /* stars */
  content:""; position:absolute; inset:0; opacity:.6;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 64%, #fff6 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 41% 12%, #ffe9b855 50%, transparent 51%),
    radial-gradient(1px 1px at 57% 42%, #fff5 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 66% 79%, #ffe9b866 50%, transparent 51%),
    radial-gradient(1px 1px at 74% 25%, #fff7 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 86% 58%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 84%, #ffe9b84d 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 8% 88%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 49% 93%, #fff4 50%, transparent 51%);
  background-size:900px 700px;
  animation:twinkle 9s ease-in-out infinite alternate;
}
.sky::after{ /* 8-point star geometric lattice */
  content:""; position:absolute; inset:0; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23d4af6e' stroke-width='1'%3E%3Cpath d='M48 8 58 38 88 48 58 58 48 88 38 58 8 48 38 38z'/%3E%3Cpath d='M48 24 55 41 72 48 55 55 48 72 41 55 24 48 41 41z'/%3E%3C/g%3E%3C/svg%3E");
}
@keyframes twinkle{from{opacity:.4} to{opacity:.75}}

/* ── Light mode sky — golden-hour haze instead of midnight ── */
html.light .sky{
  background:
    radial-gradient(1100px 500px at 85% -8%, rgba(255,213,140,.55), transparent 60%),
    radial-gradient(900px 600px at -10% 15%, rgba(255,238,205,.6), transparent 55%),
    radial-gradient(800px 650px at 50% 105%, rgba(245,225,185,.5), transparent 60%),
    var(--bg);
}
html.light .sky::before{
  opacity:.5;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(169,118,47,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 64%, rgba(169,118,47,.4) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 41% 12%, rgba(169,118,47,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 57% 42%, rgba(169,118,47,.4) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 66% 79%, rgba(169,118,47,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 74% 25%, rgba(169,118,47,.45) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 86% 58%, rgba(169,118,47,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 84%, rgba(169,118,47,.35) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 8% 88%, rgba(169,118,47,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 49% 93%, rgba(169,118,47,.35) 50%, transparent 51%);
  background-size:900px 700px;
}
html.light .sky::after{
  opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%238a6226' stroke-width='1'%3E%3Cpath d='M48 8 58 38 88 48 58 58 48 88 38 58 8 48 38 38z'/%3E%3Cpath d='M48 24 55 41 72 48 55 55 48 72 41 55 24 48 41 41z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Header ─────────────────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(var(--bg-rgb),.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.header-in{display:flex; align-items:center; gap:26px; height:66px}
.brand{display:flex; align-items:center; gap:10px; flex-shrink:0}
.moon{filter:drop-shadow(0 0 8px rgba(var(--gold-rgb),.5))}
.brand-name{
  font-family:var(--f-ar-display); font-size:1.5rem; line-height:1;
  color:var(--gold-bright); padding-top:4px;
}
body.ltr .brand-name{font-family:var(--f-lat-display); font-size:1.25rem; padding-top:0}
.brand-ar{font-family:var(--f-ar-display); color:var(--gold); font-size:1.05rem; opacity:.75; padding-top:4px}
.main-nav{display:flex; gap:4px; margin-inline-start:auto; overflow-x:auto; scrollbar-width:none}
.main-nav::-webkit-scrollbar{display:none}
.main-nav a{
  padding:8px 13px; border-radius:99px; font-size:.92rem; color:var(--ink-dim);
  white-space:nowrap; transition:.2s;
}
.main-nav a:hover{color:var(--gold-bright)}
.main-nav a.on{color:var(--bg); background:var(--gold); font-weight:700}

/* ── Theme toggle ───────────────────────────────────────────────── */
.theme-btn{
  display:grid; place-items:center; width:36px; height:36px; flex-shrink:0;
  border:1px solid var(--line); border-radius:50%; color:var(--gold); transition:.2s;
}
.theme-btn:hover{border-color:var(--gold); box-shadow:0 0 14px rgba(var(--gold-rgb),.25); transform:rotate(-14deg)}
.theme-btn .ic-moon{display:none}
.theme-btn svg{display:block}
html.light .theme-btn .ic-sun{display:none}
html.light .theme-btn .ic-moon{display:block}

.lang-switch{position:relative; flex-shrink:0}
.lang-btn{
  display:flex; align-items:center; gap:7px;
  border:1px solid var(--line); border-radius:99px; padding:7px 14px;
  color:var(--gold); font-size:.88rem; transition:.2s;
}
.lang-btn:hover{border-color:var(--gold); box-shadow:0 0 14px rgba(var(--gold-rgb),.25)}
.lang-menu[hidden], .dl-menu[hidden]{display:none}
.lang-menu{
  position:absolute; inset-inline-end:0; top:calc(100% + 10px);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:8px;
  display:grid; grid-template-columns:repeat(2, minmax(120px, 1fr)); gap:2px;
  max-height:70vh; overflow:auto; z-index:60;
}
.lang-menu a{padding:8px 12px; border-radius:8px; font-size:.9rem; color:var(--ink-dim)}
.lang-menu a:hover{background:var(--panel-2); color:var(--gold-bright)}
.lang-menu a.on{color:var(--gold); font-weight:700}
.lang-menu a.on::after{content:" ✦"; font-size:.7em}

/* ── Banner ─────────────────────────────────────────────────────── */
.banner{background:linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-deep)); color:#241a08}
.banner-in{display:flex; align-items:center; justify-content:center; gap:14px; padding-block:9px; font-weight:700; font-size:.92rem}
.banner a{text-decoration:underline}
.banner-x{opacity:.6; font-size:.8rem}
.banner-x:hover{opacity:1}

/* ── Hero (home) ────────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line-soft)}
.hero-bg{position:absolute; inset:0; z-index:-1}
.hero-bg img{width:100%; height:100%; object-fit:cover; opacity:.28; filter:saturate(.7) blur(2px); transform:scale(1.05)}
.hero-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(var(--bg-rgb),.55), rgba(var(--bg-rgb),.92) 78%, var(--bg))}
.hero-in{padding-block:84px 96px; max-width:780px}
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--gold); font-size:.82rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:18px;
}
.kicker::before{content:"☽"; font-size:1.15em; letter-spacing:0}
.hero h1{font-size:clamp(1.9rem, 4.6vw, 3.4rem); line-height:1.25; margin-bottom:14px;
  text-shadow:0 3px 30px rgba(0,0,0,.6)}
html.light .hero h1{text-shadow:0 2px 20px rgba(255,250,240,.7)}
.hero-series{color:var(--muted); font-size:1.02rem; margin-bottom:30px}
.hero-series a{color:var(--gold); border-bottom:1px dotted var(--gold-deep)}
.hero-cta{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.btn-play{
  display:inline-flex; align-items:center; gap:11px;
  background:var(--gold); color:#1d1504; font-weight:800; font-size:1.02rem;
  padding:13px 30px; border-radius:99px; transition:.25s;
  box-shadow:0 8px 30px -8px rgba(var(--gold-rgb),.55);
}
.btn-play:hover{background:var(--gold-bright); transform:translateY(-2px);
  box-shadow:0 14px 36px -8px rgba(var(--gold-rgb),.65)}
.btn-play svg{width:17px; height:17px}
body.rtl .btn-play svg{transform:scaleX(-1)}
.hero-langs{margin-top:34px}
.hero-langs .foot-h{margin-bottom:10px}
.lang-chips{display:flex; flex-wrap:wrap; gap:8px}
.lang-chips a{
  border:1px solid var(--line); border-radius:99px; padding:5px 14px;
  font-size:.84rem; color:var(--ink-dim); transition:.2s; background:rgba(var(--panel-rgb),.5);
}
.lang-chips a:hover{border-color:var(--gold); color:var(--gold-bright)}
.lang-chips a.has-audio{border-color:var(--gold); color:var(--gold-bright); background:rgba(var(--gold-rgb),.12)}

/* ── Sections & rails ───────────────────────────────────────────── */
.section{padding-block:44px 10px}
.sec-head{display:flex; align-items:baseline; gap:16px; margin-bottom:20px}
.sec-head h2{font-size:1.55rem; color:var(--gold-bright)}
.sec-head h2::after{content:""; display:inline-block; width:46px; height:1px;
  background:linear-gradient(90deg, var(--gold), transparent);
  margin-inline-start:14px; vertical-align:middle}
.sec-head .more{margin-inline-start:auto; color:var(--muted); font-size:.88rem}
.sec-head .more:hover{color:var(--gold)}

.rail{display:grid; grid-auto-flow:column; grid-auto-columns:min(46vw, 275px);
  gap:16px; overflow-x:auto; padding-block:6px 18px; scroll-snap-type:x proximity;
  scrollbar-width:thin; scrollbar-color:var(--gold-deep) transparent}
.rail > *{scroll-snap-align:start}

.card{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r);
  overflow:hidden; transition:.28s; position:relative; display:block;
}
.card:hover{transform:translateY(-5px); border-color:var(--line);
  box-shadow:var(--shadow)}
.card-thumb{position:relative; aspect-ratio:16/9; background:var(--bg-2); overflow:hidden}
.card-thumb img{width:100%; height:100%; object-fit:cover; transition:.4s}
.card:hover .card-thumb img{transform:scale(1.06)}
.card-thumb::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(var(--bg-rgb),.65), transparent 55%)}
.card-thumb .noimg{width:100%; height:100%; display:grid; place-items:center;
  font-family:var(--f-ar-display); font-size:2.4rem; color:var(--gold-deep)}
.play-badge{
  position:absolute; inset-inline-end:10px; bottom:10px; z-index:2;
  width:38px; height:38px; border-radius:50%;
  background:rgba(var(--gold-rgb),.92); color:#1d1504;
  display:grid; place-items:center; opacity:0; transform:translateY(6px); transition:.25s;
}
.card:hover .play-badge{opacity:1; transform:none}
body.rtl .play-badge svg{transform:scaleX(-1)}
.card-body{padding:13px 15px 15px}
.card-title{font-size:.98rem; font-weight:700; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card-meta{margin-top:7px; color:var(--muted); font-size:.8rem;
  display:flex; gap:12px; align-items:center}
.card-meta .v::before{content:"◉ "; color:var(--gold-deep)}

/* Netflix-style ranked rail */
.ranked{grid-auto-columns:min(60vw, 330px)}
.rank-item{display:grid; grid-template-columns:64px 1fr; align-items:end; gap:0}
.rank-num{
  font-family:var(--f-lat-display); font-size:5.2rem; line-height:.8;
  color:transparent; -webkit-text-stroke:2px var(--gold-deep);
  transform:translateY(6px); z-index:1; text-align:center;
}
.rank-item:hover .rank-num{-webkit-text-stroke-color:var(--gold)}
.rank-item .card{z-index:2}

/* series cards */
.series-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:18px}
.series-card{padding:24px; display:flex; flex-direction:column; gap:10px}
.series-card .orn{color:var(--gold-deep); font-size:1.3rem; letter-spacing:.4em}
.series-card h3{font-size:1.25rem; color:var(--gold-bright); line-height:1.5}
.series-card .cnt{color:var(--muted); font-size:.88rem}
.series-card .bar{height:3px; border-radius:3px; margin-top:auto;
  background:linear-gradient(90deg, var(--gold), var(--gold-deep) 60%, transparent)}

/* ── Quotes ─────────────────────────────────────────────────────── */
.quotes-band{
  margin-block:40px; padding-block:46px;
  border-block:1px solid var(--line-soft);
  background:
    radial-gradient(600px 200px at 50% 0%, rgba(var(--gold-rgb),.06), transparent),
    linear-gradient(rgba(var(--panel-rgb),.5), rgba(var(--panel-rgb),.5));
}
.quote-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); gap:18px}
.quote-card{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:26px 24px 20px; position:relative; transition:.25s;
}
.quote-card:hover{border-color:var(--line); transform:translateY(-3px)}
.quote-card::before{
  content:"❝"; position:absolute; top:10px; inset-inline-start:16px;
  font-size:2.6rem; color:var(--gold-deep); opacity:.4; line-height:1;
}
.quote-text{font-family:var(--f-ar-head); font-size:1.18rem; line-height:2; padding-top:10px}
body.ltr .quote-text{font-family:var(--f-lat-display); font-size:1.06rem; line-height:1.8}
.quote-ar{margin-top:12px; padding-top:12px; border-top:1px dashed var(--line-soft);
  font-family:var(--f-ar-head); color:var(--ink-dim); font-size:1rem; line-height:2; direction:rtl; text-align:right}
.quote-src{margin-top:14px; color:var(--gold); font-size:.85rem}
.quote-src::before{content:"— "}
.quote-tools{position:absolute; top:14px; inset-inline-end:14px; display:flex; gap:6px;
  opacity:0; transition:.2s}
.quote-card:hover .quote-tools{opacity:1}
.tool-btn{
  width:32px; height:32px; border-radius:8px; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--muted); font-size:.85rem; transition:.2s;
}
.tool-btn:hover{color:var(--gold-bright); border-color:var(--gold)}
.tool-btn.ok{color:#8fd694; border-color:#8fd694}

/* ── Blog ───────────────────────────────────────────────────────── */
.post-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:18px}
.post-card{padding:26px; display:flex; flex-direction:column; gap:12px}
.post-card time{color:var(--gold); font-size:.8rem; letter-spacing:.08em}
.post-card h3{font-size:1.28rem; line-height:1.55}
.post-card p{color:var(--muted); font-size:.93rem;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.post-card .read{color:var(--gold); font-size:.88rem; font-weight:700; margin-top:auto}
.article{max-width:760px; margin-inline:auto; padding-block:56px}
.article h1{font-size:clamp(1.7rem, 3.6vw, 2.5rem); line-height:1.4; color:var(--gold-bright); margin-bottom:12px}
.article time{color:var(--gold); font-size:.85rem}
.article .body{margin-top:34px; font-size:1.08rem; line-height:2.1}
.article .body p{margin-bottom:1.4em}
.orn-divider{text-align:center; color:var(--gold-deep); letter-spacing:.6em; margin-block:26px}

/* ── Watch page ─────────────────────────────────────────────────── */
.watch-grid{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:26px; padding-block:30px}
@media (max-width: 1000px){ .watch-grid{grid-template-columns:1fr} }

.cinema{
  position:relative; border-radius:calc(var(--r) + 4px); overflow:hidden;
  border:1px solid var(--line-soft); background:var(--bg-2);
  box-shadow:var(--shadow);
}
.cinema-bg{position:absolute; inset:0}
.cinema-bg img{width:100%; height:100%; object-fit:cover; opacity:.22; filter:blur(14px) saturate(.7); transform:scale(1.1)}
.cinema-bg::after{content:""; position:absolute; inset:0;
  background:radial-gradient(90% 90% at 50% 0%, rgba(var(--bg-rgb),.25), rgba(var(--bg-rgb),.9))}
.cinema-in{position:relative; padding:34px 30px 26px; display:flex; flex-direction:column; gap:20px}

/* video-primary layout — the actual lesson video, muted, synced to our audio */
.cinema.has-video{background:#000}
.video-embed{position:relative; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden}
.video-embed #ytPlayer{position:absolute; inset:0; width:100%; height:100%}
.video-embed #ytPlayer iframe{width:100%; height:100%}
.cinema.has-video .cinema-in{padding-top:26px}
.watch-kicker{color:var(--gold); font-size:.8rem; font-weight:800; letter-spacing:.12em}
.watch-kicker a{border-bottom:1px dotted var(--gold-deep)}
.watch-title{font-size:clamp(1.35rem, 2.6vw, 2rem); line-height:1.45}
.watch-meta{color:var(--muted); font-size:.85rem; display:flex; gap:16px; flex-wrap:wrap}
.audio-fallback-notice{
  display:flex; align-items:flex-start; gap:10px; margin-top:4px;
  background:rgba(var(--gold-rgb),.09); border:1px solid var(--line);
  border-radius:10px; padding:10px 14px; font-size:.82rem; color:var(--ink-dim); line-height:1.7;
}
.audio-fallback-notice svg{flex-shrink:0; margin-top:2px; color:var(--gold)}

/* player */
.player{display:flex; flex-direction:column; gap:12px; margin-top:6px}
.p-main{display:flex; align-items:center; gap:16px}
.p-play{
  width:62px; height:62px; border-radius:50%; flex-shrink:0;
  background:var(--gold); color:#1d1504; display:grid; place-items:center;
  transition:.2s; box-shadow:0 0 0 6px rgba(var(--gold-rgb),.14), 0 8px 24px -6px rgba(var(--gold-rgb),.5);
}
.p-play:hover{background:var(--gold-bright); transform:scale(1.05)}
.p-play svg{width:22px; height:22px}
body.rtl .p-play .ic-play{transform:scaleX(-1)}
.p-track{flex:1; display:flex; flex-direction:column; gap:6px}
.p-bar{
  position:relative; height:6px; border-radius:99px; background:rgba(var(--contrast-rgb),.12);
  cursor:pointer;
}
.p-buf{position:absolute; inset-block:0; inset-inline-start:0; border-radius:99px; background:rgba(var(--contrast-rgb),.14); width:0}
.p-fill{position:absolute; inset-block:0; inset-inline-start:0; border-radius:99px;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold)); width:0}
body.rtl .p-fill{background:linear-gradient(-90deg, var(--gold-deep), var(--gold))}
.p-fill::after{content:""; position:absolute; inset-inline-end:-7px; top:50%; translate:0 -50%;
  width:14px; height:14px; border-radius:50%; background:var(--gold-bright);
  box-shadow:0 0 10px rgba(var(--gold-bright-rgb),.8); opacity:0; transition:.15s}
.p-bar:hover .p-fill::after{opacity:1}
.p-times{display:flex; justify-content:space-between; color:var(--muted); font-size:.78rem;
  font-variant-numeric:tabular-nums}
.p-side{display:flex; align-items:center; gap:8px; flex-shrink:0}
.p-btn{
  min-width:38px; height:38px; padding-inline:9px; border-radius:10px;
  border:1px solid var(--line); color:var(--ink-dim); font-size:.8rem;
  display:inline-flex; align-items:center; justify-content:center; gap:5px; transition:.2s;
}
.p-btn:hover{color:var(--gold-bright); border-color:var(--gold)}
.p-btn svg{width:16px; height:16px}

/* toolbar under player */
.watch-tools{display:flex; flex-wrap:wrap; gap:9px; align-items:center}
.wt-select{
  appearance:none; background:var(--panel); border:1px solid var(--line);
  color:var(--gold); padding:8px 14px; border-radius:10px; font:inherit; font-size:.85rem;
  cursor:pointer;
}
.wt-btn{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line); border-radius:10px; padding:8px 14px;
  font-size:.85rem; color:var(--ink-dim); transition:.2s; background:rgba(var(--panel-rgb),.45);
}
.wt-btn:hover{color:var(--gold-bright); border-color:var(--gold)}
.wt-btn.ok{color:#8fd694; border-color:#8fd694}
.wt-btn svg{width:15px; height:15px}
.dl-wrap{position:relative}
.dl-menu{
  position:absolute; top:calc(100% + 8px); inset-inline-start:0; z-index:30;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); padding:6px; min-width:220px;
}
.dl-menu a{display:block; padding:9px 13px; border-radius:8px; font-size:.87rem; color:var(--ink-dim)}
.dl-menu a:hover{background:var(--panel-2); color:var(--gold-bright)}

/* transcript */
.transcript-card{
  margin-top:24px; background:var(--panel); border:1px solid var(--line-soft);
  border-radius:var(--r); overflow:hidden;
}
.tr-head{
  display:flex; align-items:center; gap:12px; padding:15px 20px;
  border-bottom:1px solid var(--line-soft); flex-wrap:wrap;
}
.tr-head h2{font-size:1.12rem; color:var(--gold-bright)}
.tr-note{color:var(--muted); font-size:.76rem}
.tr-head .spacer{flex:1}
.toggle{display:inline-flex; align-items:center; gap:7px; font-size:.8rem; color:var(--muted); cursor:pointer}
.toggle input{accent-color:var(--gold)}
.tr-body{max-height:520px; overflow-y:auto; padding:14px 10px;
  scrollbar-width:thin; scrollbar-color:var(--gold-deep) transparent}
.tr-line{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:baseline;
  padding:9px 14px; border-radius:10px; cursor:pointer; transition:background .2s;
}
.tr-line:hover{background:var(--panel-2)}
.tr-line.active{background:linear-gradient(90deg, rgba(var(--gold-rgb),.14), rgba(var(--gold-rgb),.03));
  box-shadow:inset 3px 0 0 var(--gold)}
body.rtl .tr-line.active{box-shadow:inset -3px 0 0 var(--gold)}
.tr-time{color:var(--gold-deep); font-size:.74rem; font-variant-numeric:tabular-nums; padding-top:2px}
.tr-line.active .tr-time{color:var(--gold)}
.tr-text{font-size:1.04rem; line-height:1.95}
body.rtl .tr-text{font-size:1.12rem}
.tr-copy{opacity:0; transition:.15s; align-self:center}
.tr-line:hover .tr-copy{opacity:1}
.tr-plain{padding:10px 22px 22px; font-size:1.06rem; line-height:2.05; white-space:pre-wrap}
.tr-loading{padding:36px; text-align:center; color:var(--muted)}

/* side rail — Coursera-style lesson list */
.side-rail{display:flex; flex-direction:column; gap:16px}
.lesson-panel{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r);
  overflow:hidden;
}
.lp-head{padding:16px 18px; border-bottom:1px solid var(--line-soft)}
.lp-head .k{color:var(--gold); font-size:.75rem; font-weight:800; letter-spacing:.1em}
.lp-head h3{font-size:1.05rem; margin-top:4px; line-height:1.5}
.lp-head .cnt{color:var(--muted); font-size:.8rem; margin-top:3px}
.lp-list{max-height:560px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--gold-deep) transparent}
.lp-item{
  display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center;
  padding:11px 16px; border-bottom:1px solid var(--line-soft); transition:.15s;
  font-size:.88rem; color:var(--ink-dim);
}
.lp-item:last-child{border-bottom:0}
.lp-item:hover{background:var(--panel-2); color:var(--ink)}
.lp-item.now{background:linear-gradient(90deg, rgba(var(--gold-rgb),.13), transparent);
  color:var(--gold-bright)}
.lp-num{
  width:28px; height:28px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; font-size:.72rem; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.lp-item.now .lp-num{background:var(--gold); color:#1d1504; border-color:var(--gold); font-weight:800}
.lp-item.seen .lp-num{border-color:#8fd694; color:#8fd694}
.lp-title{line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.lp-check{font-size:.8rem; color:#8fd694; visibility:hidden}
.lp-item.seen .lp-check{visibility:visible}

/* ── Series page ────────────────────────────────────────────────── */
.series-hero{padding-block:56px 30px; max-width:820px}
.series-hero h1{font-size:clamp(1.8rem, 4vw, 2.8rem); color:var(--gold-bright); line-height:1.4; margin-block:10px 8px}
.series-hero .cnt{color:var(--muted)}
.lesson-list{display:flex; flex-direction:column; gap:10px; padding-bottom:60px; max-width:900px}
.lesson-row{
  display:grid; grid-template-columns:52px 1fr auto; gap:16px; align-items:center;
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:14px 20px; transition:.2s;
}
.lesson-row:hover{border-color:var(--line); transform:translateX(0) translateY(-2px); box-shadow:var(--shadow)}
.lesson-row .n{
  font-family:var(--f-lat-display); font-size:1.5rem; color:var(--gold-deep);
  text-align:center; font-variant-numeric:tabular-nums;
}
.lesson-row:hover .n{color:var(--gold)}
.lesson-row .t{font-weight:700; line-height:1.55}
.lesson-row .m{color:var(--muted); font-size:.8rem; margin-top:2px}
.lesson-row .go{color:var(--gold); opacity:0; transition:.2s; font-size:1.3rem}
.lesson-row:hover .go{opacity:1}
.lesson-row.seen .n::after{content:" ✓"; font-size:.7em; color:#8fd694}

/* ── Contact ────────────────────────────────────────────────────── */
.contact-wrap{max-width:620px; margin-inline:auto; padding-block:56px}
.contact-wrap h1{font-size:2rem; color:var(--gold-bright); margin-bottom:6px}
.contact-sub{color:var(--muted); margin-bottom:30px}
.field{margin-bottom:18px}
.field label{display:block; font-size:.85rem; color:var(--gold); margin-bottom:7px; font-weight:700}
.field input, .field textarea{
  width:100%; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:13px 16px; color:var(--ink); font:inherit; transition:.2s;
}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(var(--gold-rgb),.15)}
.field textarea{min-height:160px; resize:vertical}
.sent-ok{
  background:rgba(143,214,148,.1); border:1px solid rgba(143,214,148,.4);
  color:#a9e2ad; border-radius:12px; padding:14px 18px; margin-bottom:22px;
}

/* ── Footer ─────────────────────────────────────────────────────── */
.site-footer{margin-top:70px; border-top:1px solid var(--line-soft);
  background:linear-gradient(rgba(var(--panel-rgb),.6), rgba(var(--bg-rgb),.9)); padding-block:46px 30px}
.foot-grid{display:grid; grid-template-columns:1.2fr 1fr 1.4fr; gap:36px}
@media (max-width: 820px){ .foot-grid{grid-template-columns:1fr} }
.brand-name.big{font-size:1.9rem}
.foot-tag{color:var(--muted); font-size:.9rem; margin-top:8px; max-width:320px}
.foot-nav{display:flex; flex-direction:column; gap:9px}
.foot-nav a{color:var(--ink-dim); font-size:.9rem; width:fit-content}
.foot-nav a:hover{color:var(--gold-bright)}
.foot-h{color:var(--gold); font-size:.8rem; font-weight:800; letter-spacing:.1em; margin-bottom:12px}
.langs-cloud{display:flex; flex-wrap:wrap; gap:7px}
.langs-cloud a{
  border:1px solid var(--line-soft); border-radius:99px; padding:4px 12px;
  font-size:.78rem; color:var(--muted); transition:.2s;
}
.langs-cloud a:hover{color:var(--gold-bright); border-color:var(--gold)}
.foot-base{margin-top:40px; text-align:center; color:var(--muted); font-size:.82rem;
  display:flex; flex-direction:column; gap:12px}
.star-sep{color:var(--gold-deep); letter-spacing:.8em; font-size:.7rem}

/* ── Page-load reveal ───────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference){
  .hero-in > *, .section{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .hero-in > :nth-child(2){animation-delay:.08s}
  .hero-in > :nth-child(3){animation-delay:.16s}
  .hero-in > :nth-child(4){animation-delay:.24s}
  .hero-in > :nth-child(5){animation-delay:.32s}
  @keyframes rise{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
}

/* ── Responsive header ──────────────────────────────────────────── */
@media (max-width: 760px){
  .header-in{gap:12px}
  .brand-ar{display:none}
  .main-nav a{padding:7px 10px; font-size:.84rem}
  .hero-in{padding-block:56px 64px}
  .rank-num{font-size:3.6rem}
  .cinema-in{padding:22px 18px 20px}
  .p-side .hide-s{display:none}
}