/* Content cards refresh — scoped to lesson media and viewer */
:root{
  --media-bg:#071b24;
  --media-card:#0d2933;
  --media-card-2:#103640;
  --media-line:rgba(91,224,203,.22);
  --media-accent:#2dd4a8;
  --media-text:#e8f7f5;
  --media-muted:#a9c7c7;
}
/* Lesson viewer shell */
#modal{backdrop-filter:blur(8px);background:rgba(2,12,18,.82)}
#modal .mb{
  background:linear-gradient(155deg,#0b202b 0%,#07151f 72%,#0b292d 100%);
  color:var(--media-text);border:1px solid var(--media-line);
  border-radius:20px;box-shadow:0 24px 80px rgba(0,0,0,.48);overflow:hidden
}
#modal .mh{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:13px 16px;background:linear-gradient(90deg,rgba(45,212,168,.11),rgba(13,41,51,.94));
  border-bottom:1px solid var(--media-line)
}
#modal .mh h3{color:var(--media-text);font-size:clamp(15px,2vw,20px);font-weight:900;line-height:1.55;flex:1;min-width:130px;margin:0}
#modal .mh button,#modal .mh a{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:38px;padding:8px 12px;border:1px solid var(--media-line);
  border-radius:11px;background:#102f39;color:#e8f7f5;text-decoration:none;
  font:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:.18s ease
}
#modal .mh button:hover,#modal .mh a:hover{background:#17444b;border-color:var(--media-accent);transform:translateY(-1px)}
#modal #done{background:linear-gradient(135deg,#2dd4a8,#14a98a);color:#06251f;border-color:transparent}
#modal #mx{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.32);color:#ffd8d8}
#modal .hint{padding:9px 14px;background:#0c3037;color:#c9eeea;border-bottom:1px solid var(--media-line);font-size:13px;line-height:1.7}
#modal .mv{background:radial-gradient(ellipse at top,#123440 0%,#06121b 72%);padding:clamp(10px,2vw,22px)}
#modal .mv .video-stage{border:1px solid rgba(91,224,203,.18);border-radius:16px;background:#02080c;box-shadow:0 12px 32px rgba(0,0,0,.28)}
#modal .mv video,#modal .mv iframe{border-radius:12px}
#modal .mv .pdfbox{
  width:min(100%,760px);min-height:250px;height:auto;margin:auto;padding:clamp(22px,5vw,48px);
  border:1px solid var(--media-line);border-radius:20px;
  background:linear-gradient(145deg,#102f39,#0a202b);color:var(--media-text);
  box-shadow:0 14px 40px rgba(0,0,0,.25);gap:14px
}
#modal .mv .pdfbox h2{font-size:clamp(19px,3vw,27px);line-height:1.5;margin:0;color:#f0fffc}
#modal .mv .pdfbox p{max-width:58ch;color:var(--media-muted);line-height:1.9;margin:0}
#modal .mv .pdfbox a,#modal .mv .pdfbox button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 18px;border:0;border-radius:12px;
  background:linear-gradient(135deg,#2dd4a8,#16a98b);color:#06251f;
  text-decoration:none;font:inherit;font-weight:900;cursor:pointer
}
/* Embedded interactive lesson / deck */
#modal .mv .deck-stage,#modal .mv .interactive-stage{max-width:100%;border-radius:16px;overflow:hidden}
#modal .mv iframe{display:block;border:0;background:#fff;max-width:100%}
/* Media lists inside lesson details */
.lesson-items,.lesson-content-list,.content-items,.items-list{display:grid;gap:12px}
.lesson-items>*,.lesson-content-list>*,.content-items>*,.items-list>*{min-width:0}
.lesson-items .item,.lesson-content-list .item,.content-items .item,.items-list .item{
  border:1px solid var(--media-line);border-radius:15px;background:linear-gradient(135deg,#102e38,#0b222c);
  box-shadow:0 5px 16px rgba(0,0,0,.12);transition:border-color .18s,transform .18s
}
.lesson-items .item:hover,.lesson-content-list .item:hover,.content-items .item:hover,.items-list .item:hover{border-color:rgba(45,212,168,.58);transform:translateY(-1px)}
/* Do not let long Arabic titles or URLs break layout */
#modal *, .lesson-items *, .lesson-content-list *, .content-items *, .items-list *{overflow-wrap:anywhere}
#modal button:focus-visible,#modal a:focus-visible{outline:3px solid rgba(45,212,168,.65);outline-offset:2px}
@media(max-width:700px){
  #modal .mb{border-radius:0;border-inline:0}
  #modal .mh{padding:10px;gap:7px}
  #modal .mh h3{flex-basis:100%;order:-1;font-size:16px}
  #modal .mh button,#modal .mh a{min-height:36px;padding:7px 9px;font-size:12px}
  #modal .mv{padding:8px}
  #modal .mv .video-stage{border-radius:10px}
  #modal .mv .pdfbox{min-height:220px;padding:24px 16px;border-radius:15px}
}