.wide{max-width:1240px}
.progs{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px;direction:rtl}
.prog{border:1px solid var(--line);background:var(--black);display:flex;flex-direction:column;color:inherit}
.prog .cover{aspect-ratio:16/9;background:#f3ece0;overflow:hidden}
.prog .cover img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.prog .by{color:var(--gold);font-size:11px;letter-spacing:.14em;direction:ltr;padding:14px 16px 0}
.prog h3{font-family:var(--arabic);color:var(--champagne);font-size:19px;padding:4px 16px}
.prog .en{color:var(--muted);font-size:12px;padding:0 16px;direction:ltr;text-align:right}
.prog p{padding:8px 16px;color:var(--ivory);font-size:14px}
.prog ul{margin:0 16px 8px;padding-right:18px;color:var(--muted);font-size:13px}
.prog .meta{margin-top:auto;border-top:1px solid var(--line);padding:12px 16px;display:flex;justify-content:space-between;font-size:13px;color:var(--champagne)}
.layout{display:grid;grid-template-columns:270px 1fr;gap:28px;direction:rtl;align-items:start}
@media(max-width:820px){.layout{grid-template-columns:1fr}.side{position:static!important}}
.side{position:sticky;top:12px;border:1px solid var(--line);padding:16px;background:var(--black)}
.side h4{font-family:var(--arabic);color:var(--champagne);font-size:15px;margin-bottom:10px}
.side a{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid rgba(184,149,90,.2);font-size:13px;font-family:var(--arabic)}
.side a span{color:var(--muted)}
.hero2{direction:rtl;padding:10px 0 24px}
.hero2 .stats{display:flex;gap:22px;flex-wrap:wrap;color:var(--champagne);font-size:14px;margin-top:12px}
.hero2 .stats b{font-family:var(--serif);font-size:22px;color:var(--gold);display:block}
.tools{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 10px}
.tools input,.tools select{background:var(--marble);color:var(--ivory);border:1px solid var(--line);padding:9px 11px;font-family:var(--arabic);font-size:14px}
details.mod{border:1px solid var(--line);margin-bottom:12px;background:var(--black)}
details.mod summary{cursor:pointer;padding:14px 16px;font-family:var(--arabic);color:var(--champagne);font-size:16px;display:flex;justify-content:space-between}
details.mod summary span{color:var(--muted);font-size:13px}
.lesson{display:grid;grid-template-columns:34px 92px 1fr auto;gap:12px;align-items:center;padding:10px 16px;border-top:1px solid rgba(184,149,90,.2);font-family:var(--arabic)}
.lesson .n{color:var(--gold);font-size:12px;direction:ltr}
.lesson img{width:92px;height:115px;object-fit:cover;object-position:50% 45%;border:1px solid var(--line);background:#f3ece0}
.lesson .t{color:var(--champagne);font-size:15px}
.lesson .s{color:var(--muted);font-size:12px;margin-top:3px}
.lesson .sw{display:inline-block;width:11px;height:11px;border-radius:50%;border:1px solid #777;margin-left:6px;vertical-align:middle}
.lesson .code{color:var(--gold);font-size:11px;letter-spacing:.1em;direction:ltr;text-align:right}
.lesson .act{display:flex;flex-direction:column;gap:6px}
.btn{border:1px solid var(--line);background:none;color:var(--champagne);padding:6px 12px;font-size:12px;cursor:pointer;font-family:var(--arabic);text-align:center;text-decoration:none}
.btn.on{background:var(--gold);color:var(--black)}
@media(max-width:560px){.lesson{grid-template-columns:70px 1fr}.lesson .n{display:none}.lesson .act{grid-column:1/-1;flex-direction:row}.lesson img{width:70px;height:88px}}
#bar{position:fixed;bottom:0;left:0;right:0;background:var(--black);border-top:1px solid var(--gold);padding:10px 16px;display:none;justify-content:center;gap:14px;align-items:center;direction:rtl;font-family:var(--arabic);z-index:9}
.note{color:var(--muted);font-size:12px;direction:rtl;margin:6px 0 14px}