/* صفحة الدرس (/lesson/ID) — تُحمَّل بعد site.css و program.css */
.lesson-main{padding-top:130px; padding-bottom:60px}
.lesson-main .crumbs{margin-bottom:18px}
.ls-grid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; align-items:start}
.ls-content{min-width:0}
.ls-title{font-size:clamp(24px,3.4vw,36px); line-height:1.4; margin:0 0 14px; color:var(--text)}

.ls-badges{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px}
.ls-badge{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:var(--glass); border:1px solid var(--glass-border); color:var(--text-mute); font-size:13px; font-weight:600; text-decoration:none}
a.ls-badge:hover{border-color:var(--glass-border-strong); color:var(--text)}
.ls-badge .tab-ico{width:22px; height:22px; border-radius:6px; font-size:10px}

/* المشغّل الخفيف */
.ls-player{position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:#000; cursor:pointer; box-shadow:var(--shadow-deep); border:1px solid var(--glass-border)}
.ls-player img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.ls-player iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.ls-player.playing{cursor:auto}
.ls-play{position:absolute; top:50%; left:50%; width:78px; height:78px; margin:-39px 0 0 -39px; border-radius:50%; background:rgba(220,38,38,.95); box-shadow:0 10px 30px rgba(0,0,0,.5); transition:transform .2s}
.ls-play:after{content:''; position:absolute; top:50%; left:50%; margin:-14px 0 0 -8px; border-style:solid; border-width:14px 0 14px 24px; border-color:transparent transparent transparent #fff}
.ls-player:hover .ls-play, .ls-player:focus-visible .ls-play{transform:scale(1.08)}
.ls-player:focus-visible{outline:3px solid var(--blue-400); outline-offset:3px}

.ls-actions{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:18px 0 26px}
.ls-actions .btn{font-size:14px}
.ls-watched{color:#4ade80; font-weight:700; font-size:14px}
.ls-watched[hidden]{display:none}

.ls-block{padding:24px 26px; border-radius:20px; margin-bottom:22px}
.ls-block h2{font-size:20px; margin:0 0 12px; color:var(--text)}
.ls-block p{line-height:1.95; margin:0 0 10px; color:var(--text-mute)}
.ls-block .ls-h{font-weight:700; color:var(--text); margin:14px 0 6px}
.ls-ul{margin:0 0 12px; padding-inline-start:22px; color:var(--text-mute); line-height:1.9}
.ls-ul li{margin-bottom:2px}
.ls-chapters{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.ls-chapters a{display:flex; gap:14px; align-items:baseline; padding:9px 12px; border-radius:12px; color:var(--text); text-decoration:none; line-height:1.6}
.ls-chapters a:hover{background:var(--glass-strong)}
.ls-time{font-family:"JetBrains Mono", monospace; font-size:13px; color:var(--blue-400); min-width:52px; direction:ltr; text-align:right; flex-shrink:0}

.ls-pager{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:6px 0 22px}
.ls-nav{display:flex; flex-direction:column; gap:6px; padding:16px 18px; border-radius:16px !important; text-decoration:none; color:var(--text); transition:transform .2s}
.ls-nav:hover{transform:translateY(-2px)}
.ls-nav.next{text-align:left}
.ls-nav-k{font-size:13px; color:var(--blue-400); font-weight:700}
.ls-nav-t{font-size:14px; line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

.ls-sub{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-radius:16px !important; color:var(--text-mute); font-weight:600}

/* القائمة الجانبية */
.ls-side{position:sticky; top:100px; border-radius:20px; padding:16px; max-height:calc(100vh - 120px); display:flex; flex-direction:column}
.ls-side-head{padding:4px 6px 12px; border-bottom:1px solid var(--glass-border); margin-bottom:8px}
.ls-side-head a, .ls-side-head strong{color:var(--text); font-weight:700; text-decoration:none; font-size:15px}
.ls-side-head a:hover{color:var(--blue-400)}
.ls-progress{margin-top:10px}
.ls-progress[hidden]{display:none}
.ls-bar{height:6px; border-radius:6px; background:var(--glass-strong); overflow:hidden}
.ls-bar span{display:block; height:100%; width:0; background:linear-gradient(90deg,#22c55e,#4ade80); border-radius:6px; transition:width .4s}
.ls-progress-t{display:block; font-size:12px; color:var(--text-dim); margin-top:6px}
.ls-list{list-style:none; margin:0; padding:0; overflow-y:auto; flex:1; min-height:0}
.ls-list a{display:flex; gap:10px; align-items:flex-start; padding:8px 8px; border-radius:10px; text-decoration:none; color:var(--text-mute); font-size:13.5px; line-height:1.6}
.ls-list a:hover{background:var(--glass-strong); color:var(--text)}
.ls-list li.on a{background:rgba(59,130,246,.18); color:var(--text); font-weight:700}
.ls-n{flex-shrink:0; min-width:26px; height:22px; border-radius:7px; background:var(--glass-strong); display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-family:"JetBrains Mono", monospace}
.ls-list li.seen .ls-n{background:#16a34a; color:#fff}
.ls-list li.seen .ls-n:after{content:' ✓'; font-size:10px}
.ls-t{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ls-paths{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.ls-paths a{display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; color:var(--text); text-decoration:none; font-weight:600}
.ls-paths a:hover{background:var(--glass-strong)}
.ls-paths .tab-ico{width:28px; height:28px; border-radius:8px; font-size:11px}

/* 404 */
.ls-404{min-height:60vh; display:flex; align-items:center; justify-content:center}
.ls-404-box{padding:40px; border-radius:22px; text-align:center; max-width:560px}
.ls-404-box h1{margin:0 0 10px}
.ls-404-box p{color:var(--text-mute); line-height:1.8}
.ls-404-box .ls-actions{justify-content:center; margin-bottom:0}

html[data-theme="light"] .ls-list li.on a{background:rgba(59,130,246,.12)}

@media (max-width:960px){
  .ls-grid{grid-template-columns:1fr}
  .ls-side{position:static; max-height:none}
  .ls-list{max-height:420px}
}
@media (max-width:640px){
  .lesson-main{padding-top:110px}
  .ls-player{border-radius:12px; margin:0 -8px}
  .ls-block{padding:18px}
  .ls-pager{grid-template-columns:1fr}
  .ls-nav.next{text-align:right}
  .ls-actions .btn{flex:1 1 auto; justify-content:center}
}