:root{
  --bg:#0b0f19;
  --card:#121a2a;
  --muted:#9aa7bd;
  --text:#e8eefb;
  --line:rgba(255,255,255,.08);
  --btn:#2b5cff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Naskh Arabic", "Noto Kufi Arabic", Tahoma, Arial, sans-serif;
  background: radial-gradient(1200px 700px at 20% 0%, #141f3a, var(--bg));
  color:var(--text);
}
a{color:inherit}
.wrap{max-width:1000px;margin:0 auto;padding:20px}
.hero{
  position: relative;
  padding-top: 46px;  /* reserve space for the button */
  display:flex;
  gap:18px;
  align-items:center;
  border:1px solid var(--line);
  background:rgba(18,26,42,.65);
  backdrop-filter: blur(6px);
  padding:20px;                    /* was 16px */
  border-radius:20px;              /* slightly bigger */
}
.avatar{
  border-radius:20px;
  border:1px solid var(--line);
  width:112px;
  height:112px;
}
.heroText h1{
  margin:0 0 6px 0;
  font-size:24px;                  /* was ~22 */
  line-height:1.15;
}
.heroText p{
  margin:0 0 12px 0;
  font-size:15px;
}
.links{display:flex;gap:12px;flex-wrap:wrap}
.links a{
  text-decoration:none;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.03);
}
.muted{color:var(--muted)}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:18px; margin-bottom:12px;
}
.topbar h2{margin:0;font-size:18px}
.search{
  width:min(360px,100%);
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:12px;
}
.card{
  border:1px solid var(--line);
  background:rgba(18,26,42,.65);
  border-radius:18px;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.thumb{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  background:rgba(255,255,255,.04);
}
.cardBody{padding:12px;display:flex;flex-direction:column;gap:10px}
.cardTitle{margin:0;font-size:15px;line-height:1.25}
.cardMeta{margin:0;font-size:13px;color:var(--muted)}
.row{display:flex;gap:8px;flex-wrap:wrap}
.btn{
  display:inline-block;
  text-decoration:none;
  padding:9px 12px;
  border-radius:12px;
  border:1px solid rgba(43,92,255,.35);
  background: rgba(43,92,255,.18);
}
.btn.secondary{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
}
.footer{margin:28px 0 10px 0;border-top:1px solid var(--line);padding-top:14px}
.empty{margin-top:16px}
.hidden{display:none}
.back{display:inline-block;margin:10px 0;text-decoration:none;color:var(--muted)}
.watchTitle{margin:0}
.player{
  width:100%;
  border-radius:18px;
  border:1px solid var(--line);
  background:#000;
}
.dlRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.small{font-size:13px}

/* Language toggle */
.heroTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.langBtn{
  position:absolute;
  top:14px;
  z-index: 2;
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  color: var(--text);
  padding:7px 10px;
  border-radius:12px;
  cursor:pointer;
  font-size:13px;
  white-space:nowrap;
}

/* English (LTR): top-right */
html[dir="ltr"] .langBtn{
  right:14px;
  left:auto;
}

/* Arabic (RTL): top-left */
html[dir="rtl"] .langBtn{
  left:14px;
  right:auto;
}

.langBtn:hover{filter:brightness(1.30)}

/* RTL support */
html[dir="rtl"] body{
  direction: rtl;
}
/* html[dir="rtl"] .hero{
  flex-direction: row-reverse;
} */
html[dir="rtl"] .topbar{
  flex-direction: row-reverse;
}
html[dir="rtl"] .row{
  flex-direction: row-reverse;
}

/* ===== Mobile polish ===== */
@media (max-width: 720px) {

  /* Hero becomes vertical + centered */
  .hero{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 18px;
    padding-top: 54px; /* room for lang button */
  }

  .avatar{
    width: 96px;
    height: 96px;
    border-radius: 18px;
  }

  .heroText h1{
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 8px;
  }

  .heroText p{
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 12px;
  }

  /* Links: wrap and center */
  .links{
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Language button: keep it in a corner but smaller */
  .langBtn{
    top: 12px;
    padding: 6px 10px;
    font-size: 12px;
  }

  /* Topbar: stack title + search */
  .topbar{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .topbar h2{
    margin: 0;
  }

  .search{
    width: 100%;
  }

  /* Lesson cards: make action buttons wrap nicely */
  .row{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .row .btn{
    width: 100%;
    text-align: center;
  }

  /* If you have thumbs: give them a consistent height */
  .thumb{
    height: 180px;
    object-fit: cover;
    border-radius: 14px;
  }
}

/* Slightly nicer Arabic text rhythm */
html[dir="rtl"] body{
  letter-spacing: 0;
}