:root{
  --blue:#0492c2; --blue-dk:#0378a0; --teal:#06bbcc; --teal-dk:#05a3b2;
  --navy:#0a1733; --ink:#0e1b33; --muted:#64748b; --line:#e8eef6;
  --bg:#f6f9fc; --card:#fff; --orange:#f56e2d; --gold:#c9a84c;
  --grad:linear-gradient(135deg,#0492c2 0%,#06bbcc 100%);
  --grad-navy:linear-gradient(135deg,#0a1733 0%,#123055 60%,#0b4f74 100%);
  --shadow:0 10px 34px rgba(12,38,71,.10); --shadow-lg:0 24px 60px rgba(12,38,71,.16);
  --r:16px; --rl:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Open Sans','Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;-webkit-font-smoothing:antialiased
}
a{
  /* color:inherit; */
  color:white;
  text-decoration:none
}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 4%}
.btn{
  border:none;
  cursor:pointer;
  font-weight:700;
  border-radius:50px;
  padding:11px 22px;
  /* padding:6px 17px; */
  font-size:14px;
  transition:.2s;
  display:inline-flex;
  align-items:center;
  gap:8px;justify-content:center
}
.btn-teal{
  /* background:var(--teal); */
  background:#0492c2;
  color:#fff
}
.btn-teal:hover{
  background:var(--teal-dk)
}
.btn-blue{background:var(--blue);color:#fff}.btn-blue:hover{background:var(--blue-dk)}
.btn-ghost{background:#fff;color:var(--blue);border:1px solid var(--line)}.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-block{width:100%}

/* TOPBAR */
.topbar{
  /* background:var(--blue); */
  /* نفس لون الفوتر */
  background:#102147;
  color:#fff;
  font-size:13.5px
}
.topbar .wrap{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap
}
.topbar .info{
  display:flex;
  gap:26px;
  flex-wrap:wrap
}
.topbar .info a{
  color:#fff;
  font-size: 13.5px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  opacity:.95
}
.topbar .info a:hover{
  opacity:1;
  /* text-decoration:underline; */
  /* color:#f7631b */
}
.topbar .info i{
  font-size:13px
}
.topbar .info i:hover{
  color: #f7631b;
}
.topbar .right{
  display:flex;
  align-items:center;
  gap:10px
}
/* outlined circular icons, like the main site */
.soc{
  width:32px;
  height:32px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* background:transparent; */
  /* background: #0492c2; */
  border:1px solid rgba(255,255,255,.6);
  color:#fff;
  font-size:13px;
  transition:.2s;
  cursor:pointer;
  font-family:inherit
}
.soc:hover{
  /* background:#fff; */
  background:#f7631b;
  /* color:var(--blue); */
  color:#fff;
  /* border-color:#fff; */
  border-color:#f7631b;
  transform:translateY(-2px)
}
.soc.act{
  border-color:rgba(255,255,255,.85);
  background: #f6f9f9;
  color: #0492c2;
}
.tb-user{display:flex;align-items:center;gap:10px;margin-left:4px}
.tb-user .hi{color:#fff;font-size:13px;opacity:.95}
.tb-user .av{width:32px;height:32px;border-radius:50%;background:#fff;color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;cursor:pointer}
.tb-user .lo{width:32px;height:32px;border-radius:50%;background:transparent;border:1px solid rgba(255,255,255,.6);color:#fff;cursor:pointer;font-size:13px}
.tb-user .lo:hover{background:#fff;color:var(--blue)}

/* NAVBAR — white bar with the DPIT&D lockup, like the main site */
.nav{position:sticky;top:0;z-index:900;background:#fff;box-shadow:0 4px 22px rgba(0,0,0,.10)}
.nav .wrap{padding:10px 4%;display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:46px;height:46px;border-radius:50%;object-fit:contain;flex:none}
.brand b{
  font-size:23px;
  font-weight:800;
  /* color:var(--blue); */
  color:#0492c2;
  letter-spacing:.3px;
  line-height:1
}
.brand b span{color:var(--orange)}
.links{display:flex;align-items:center;gap:4px}
.links a{
  /* color:#33415a; */
  color:#0492c2;
  font-weight:600;
  font-size:15px;
  padding:10px 16px;
  border-radius:8px;
  position:relative
}
.links a:hover{
  color:var(--blue)
}
.links a.active{
  /* color:var(--blue); */
  color:#0492c2
}
.links a.active::after{content:'';position:absolute;left:16px;right:16px;top:0;height:3px;background:var(--orange);border-radius:2px}
.links .start-btn{background:var(--blue);color:#fff;border-radius:50px;padding:12px 26px;font-weight:700;font-size:15px;margin-left:10px}
.links .start-btn:hover{background:var(--blue-dk);color:#fff}
.links .start-btn::after{display:none}
.burger{display:none;font-size:22px;background:none;border:none;color:var(--ink);cursor:pointer}
@media(max-width:900px){
  .topbar .info{gap:14px;font-size:12.5px;justify-content:center;width:100%}
  .topbar .wrap{justify-content:center;padding-top:6px;padding-bottom:6px}
  .brand b{font-size:22px}.brand img{width:38px;height:38px}
}

/* BANNER */
.banner{
  position:relative;
  /* min-height:260px; */
  min-height:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  /* background:linear-gradient(rgba(8,20,45,.82),rgba(8,20,45,.82)), */
  /* url('https://picsum.photos/seed/edubibanner/1600/500') center/cover */
}
.banner h1{
  color:#fff;
  font-size:clamp(28px,5vw,48px);
  font-weight:800
}
.banner .crumb{
  color:#cdd8ea;
  margin-top:10px
}
.banner .crumb a{
  color:#fff
}
.banner .crumb b{
  color:var(--teal)
}


/* SECTION TITLE */
.sec{padding:64px 0}
.sec-title{max-width:640px;margin:0 auto 34px;text-align:center}
.sec-title h2{
  font-size:32px;
  font-weight:800;
  color:var(--ink);
  margin-top: -25px;
  /* color:#0492c2; */
}
.sec-title h2 span{
  /* color:var(--teal); */
  color:#0492c2 !important;
}
.sec-title p{
  font-size: 15px;
  /* color:var(--muted); */
  color:black;
  margin-top:10px
}
.sec-title .ic{
  width:46px;
  height:46px;
  border-radius:50%;
  /* background:var(--teal); */
  background:#0492c2;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:14px auto 0;
  box-shadow:0 8px 18px rgba(6,187,204,.35)
}
@media(max-width:414px){
  .banner h1{
    font-size: 20px;
  }
}
/* FILTER */
.filter{display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between;margin-bottom:30px}
.filter input{flex:1;min-width:220px;border:1px solid var(--line);border-radius:50px;padding:13px 20px;font-size:14px;outline:none;background:#fff}
.filter input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(6,187,204,.12)}
.cats{
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.cat{
  border:1px solid var(--line);
  background:#fff;
  color:#48566f;
  /* border-radius:50px; */
  border-radius:15px;
  padding:9px 18px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:.2s
}
.cat:hover{
  /* border-color:var(--teal); */
  border-color:#0492c2;
  /* color:var(--teal); */
  color:#fff;
  /* background: #f7631b; */
  background: #0492c2;
}
.cat.active{
  /* background:var(--teal); */
  background:#0492c2;
  border-color:var(--teal);
  color:#fff
}
.cat.active:hover{
  /* background:var(--teal); */
  background:#f7631b;
  border-color:#f7631b;
  color:#fff
}
/* =========================================
   COURSE FILTER - MOBILE RESPONSIVE
========================================= */

/* Tablet */
@media (max-width: 768px) {

  .filter {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* Search */
  .filter #search {
    width: 100%;
    max-width: 100%;
    height: 46px;
    padding: 0 15px;
    font-size: 14px;
    box-sizing: border-box;
  }

  /* Categories */
  .filter .cats {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Second filter row */
  .filter2 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 15px;
    align-items: end;
  }

  .filter2 label {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
  }

  .filter2 select {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    font-size: 13px;
    box-sizing: border-box;
  }

  .filter2 .reset {
    width: 100%;
    height: 44px;
    padding: 0 18px;
  }

  .filter2 .count {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 13px;
  }
}


/* =========================================
   MOBILE - 600px
========================================= */

@media (max-width: 600px) {

  .filter,
  .filter2 {
    padding-left: 0;
    padding-right: 0;
  }

  .filter2 {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* Sort full width */
  .filter2 label:nth-child(3) {
    grid-column: 1 / -1;
  }

  .filter2 .reset {
    grid-column: 1;
  }

  .filter2 .count {
    grid-column: 2;
    justify-content: flex-end;
    text-align: right;
  }
}


/* =========================================
   MOBILE - 480px
========================================= */

@media (max-width: 480px) {

  .filter {
    gap: 12px;
  }

  .filter #search {
    height: 44px;
    font-size: 13px;
    border-radius: 8px;
  }

  .filter .cats {
    gap: 6px; 
  }
  .cats {
    gap: 6px; 
    justify-content: center;

  }

  /* Category buttons if generated inside #cats */
  .filter .cats button,
  .filter .cats .cat {
    font-size: 12px;
    padding: 7px 11px;
    white-space: nowrap;
  }

  .filter2 {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
  }

  .filter2 label {
    font-size: 12px;
  }

  .filter2 select {
    height: 42px;
    padding: 0 9px;
    font-size: 12px;
  }

  /* Sort takes complete row */
  .filter2 label:nth-child(3) {
    grid-column: 1 / -1;
  }

  .filter2 .reset {
    height: 40px;
    font-size: 12px;
    padding: 0 15px;
  }

  .filter2 .count {
    font-size: 11px;
    justify-content: flex-end;
  }
}


/* =========================================
   SMALL MOBILE - 390px
========================================= */

@media (max-width: 390px) {

  .filter2 {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .filter2 label,
  .filter2 label:nth-child(3),
  .filter2 .reset,
  .filter2 .count {
    grid-column: 1;
    width: 100%;
  }

  .filter2 select {
    width: 100%;
  }

  .filter2 .reset {
    width: fit-content;
    min-width: 90px;
    margin-top: 19px;
  }

  .filter2 .count {
    justify-content: flex-start;
    text-align: left;
  }
}


/* =========================================
   EXTRA SMALL - 360px
========================================= */

@media (max-width: 360px) {

  .filter #search {
    height: 42px;
    font-size: 12px;
    padding: 0 12px;
  }

  .filter .cats button,
  .filter .cats .cat {
    font-size: 10px;
    padding: 6px 9px;
  }

  .filter2 {
    gap: 9px;
  }

  .filter2 select {
    height: 40px;
    font-size: 11px;
  }

  .filter2 .reset {
    height: 38px;
    font-size: 11px;
  }
}


/* =========================================
   VERY SMALL MOBILE - 320px
========================================= */

@media (max-width: 320px) {

  .filter #search {
    font-size: 11px;
  }

  .filter2 label {
    font-size: 11px;
  }

  .filter2 select {
    font-size: 10px;
    padding: 0 8px;
  }

  .filter .cats {
    gap: 5px;
  }
}
/* COURSE CARD (overlapping avatar + enroll) */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.course{
  background:var(--card);
  border:1px solid #eef1f6;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(18,38,72,.07);
  transition:.25s;display:flex;
  flex-direction:column;
  position:relative
}
.course:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(18,38,72,.16)}
.c-head{
  position:relative;
  height:190px;
  overflow:hidden;
  background:linear-gradient(135deg,#0e2148,var(--teal))
}
.c-head img{
  width:100%;
  height:100%;
  object-fit:cover;
    object-position: center;
  transition:.4s;
}

.course:hover .c-head img{
  transform:scale(1.08)
}
.c-head::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(8,20,45,0),rgba(8,20,45,.5));opacity:0;transition:.3s}
.course:hover .c-head::after{opacity:1}
.c-view{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-40%);
  opacity:0;
  z-index:3;
  background:#fff;
  color:var(--teal);
  font-weight:700;
  font-size:12px;
  padding:10px 22px;
  /* padding:5px 17px; */
  border-radius:50px;
  transition:.3s;
  box-shadow:0 8px 20px rgba(0,0,0,.25)
}
.course:hover .c-view{opacity:1;transform:translate(-50%,-50%)}.c-view:hover{background:var(--teal);color:#fff}
.c-badge{
  position:absolute;
  top:12px;left:12px;
  z-index:3;
  background:rgba(255,255,255,.92);
  color:var(--ink);
  font-size:11px;
  font-weight:700;
  padding:4px 12px;
  border-radius:50px
}
.c-avatar{
  position:absolute;
  top:160px;
  left:22px;
  width:58px;
  height:58px;
  border-radius:50%;
  border:3px solid #fff;
  /* background:linear-gradient(135deg,var(--teal),#3ad0de); */
  background:linear-gradient(135deg,var(--teal),#0492c2);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:15px;
  z-index:6;
  box-shadow:0 6px 16px rgba(8,20,45,.22)
}
.c-body{padding:42px 22px 12px;flex:1}
.c-teacher{
  font-size:13px;
  font-weight:600;
  color:#48566f;
  margin-bottom:8px
}
.c-title{
  font-size:15px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:8px;
  line-height:1.35;
  cursor:pointer
}
.c-title:hover{
  /* color:var(--teal); */
  color:#0492c2
}
.c-desc{
  font-size:14px;
  /* color:var(--muted); */
  color:#000
}
/* .c-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 22px;border-top:1px solid #eef1f6;background:#fafbfd}
.c-meta span{font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.c-meta i{ */
  /* color:var(--teal); */
  /* color:#0492c2
}
.c-price{margin-left:auto;font-size:18px;font-weight:800;color:var(--teal)}
.c-enroll{
  border:none; */
  /* background:var(--teal); */
  /* background:#0492c2;
  color:#fff;
  font-weight:700;
  font-size:12px;
  padding:8px 18px;
  border-radius:50px;
  cursor:pointer
}
  .c-enroll:hover{ */
    /* background:var(--teal-dk); */
    /* background:#f7631b
  } */
/* Enroll button drops to its own full-width row so it never wraps awkwardly */
/* .c-meta .c-enroll{
  flex:0 0 100%;
  margin-top:4px
}
@media(min-width:560px){ .c-meta .c-enroll{flex:0 0 auto;margin-top:0} }
.empty{grid-column:1/-1;text-align:center;padding:50px;color:var(--muted)} */

.c-meta{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;padding:14px 18px;border-top:1px solid #eef1f6;background:#fafbfd}
.c-meta>span{
  white-space:nowrap;
  flex:0 0 auto
}
.c-meta .c-price{margin-left:auto}

/* keep everything on one tidy line down to small phones */
@media(max-width:1200px) and (max-width:1024px){
  .c-enroll.is-off {
        width: 45%;
        padding:7px 10px;
        font-size: 8px;
      }
}
@media(max-width:600px){
  .c-meta{
    gap:8px;
    padding:14px 16px;
    font-size:10px;
    
  }
  .c-meta>span{font-size:11.5px}
  .c-meta .c-enroll{
    /* padding:7px 14px; */
    /* padding:7px 12px;
    font-size:8px;
    flex:0 0 auto;
     */
       width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
height: 25px !important;
min-height: 20px !important;
padding: 5px 8px !important;
font-size: 12px !important;
  }
   .c-enroll.is-off {
      
        width: 40%;
        font-size: 8px;
      }
}
/* ============================
   MOBILE — 425px
============================ */
@media screen and (max-width: 425px) {

  .c-view.is-off,
  .c-enroll.is-off {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;

    /* height: 24px !important; */
    /* min-height: 34px !important; */

    /* padding: 6px 10px !important; */

height: 25px !important;
min-height: 20px !important;
padding: 5px 8px !important;
font-size: 8px !important;

    /* font-size: 9px !important; */
    line-height: 1 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    white-space: nowrap !important;

    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
    filter: grayscale(0.4);

    box-sizing: border-box !important;
  }
}
/* ============================
   MOBILE — 414px
============================ */
@media screen and (max-width: 414px) {

  .c-view.is-off,
  .c-enroll.is-off {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;

    /* height: 32px !important;
    min-height: 32px !important;
    padding: 5px 9px !important; */


    height: 25px !important;
    min-height: 20px !important;
    padding: 5px 8px !important;
    font-size: 8px !important;

    /* font-size: 8.5px !important; */
    line-height: 1 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    white-space: nowrap !important;

    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
    filter: grayscale(0.4);

    box-sizing: border-box !important;
  }
}
@media(max-width:380px){
  .c-meta{
    gap:6px;
    padding:10px 12px; 
  }
  .c-meta span{
    font-size: 8px;
  }
  .c-meta .c-enroll{
    padding:6px 10px;
     font-size:8px;
  }
}
@media (max-width:360px){
  .c-meta{ 
    gap:6px; 
    padding:10px 12px;
   }
  .c-enroll{
    padding:6px 10px;
   }
}
@media (max-width:375px){
  .c-title{
  font-size:14px;
 
}
  .c-desc{
  font-size:12px;
  /* color:var(--muted); */
  color:#000
}
 /* .c-view.is-off,
  .c-enroll.is-off {
    width: 56%; */
    /* min-height: 14px; */
/* 
    padding: 7px 10px;

    font-size: 9px;
    line-height: 1.2;

    white-space: nowrap;
  } */
 /* .c-meta .c-enroll{
    padding:6px 10px;
    width: 35px;
     font-size:8px;
  } */
}
/* =====================================
   MOBILE 375px — FORCE BUTTON SIZE
===================================== */
@media screen and (max-width: 375px) {

  .c-view.is-off,
  .c-enroll.is-off {
    /* width: 42% !important;
    max-width: 135px !important; */
     width: auto !important;
    max-width: none !important;
    min-width: 0 !important;

    /* height: 22px !important; */
    /* min-height: 32px !important; */

    /* padding: 5px 6px !important; */
    /* padding: 7px 11px !important; */

height: 25px !important;
min-height: 20px !important;
padding: 5px 8px !important;

    font-size:7px !important;
    line-height: 1 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    white-space: nowrap !important;

    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
    filter: grayscale(0.4);

    box-sizing: border-box !important;
  }
}
/****لو المقصود أن الزر ما زال طويلًا******/
/* @media screen and (max-width: 375px) {

  .c-view.is-off,
  .c-enroll.is-off {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;

    height: 32px !important;
    min-height: 32px !important;

    padding: 5px 10px !important;

    font-size: 8px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
} */
/* @media (max-width:425px){ */
/* .c-view.is-off, */
  /* .c-enroll.is-off {
    width: 44%;
    min-height: 36px;

    padding: 8px 10px;

    font-size: 10px;
    line-height: 1.2;

    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
    filter: grayscale(0.4);

    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
  } */
/* } */
@media (max-width:414px){
  .course{
     width: 92%;
    max-width: 380px;
    margin: 0 auto 25px;
  }
  .c-title{
  font-size:13px ;
}
  .c-desc{
  font-size:12px;
  /* color:var(--muted); */
  color:#000
}
}
.c-meta span{
  font-size:13px;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:6px
}
  .c-meta i{
    color:var(--teal)
  }
.c-price{margin-left:auto;font-size:15px;font-weight:800;color:var(--teal)}
.c-enroll{
  /* border:none;
  background:var(--teal);
  color:#fff;
  font-weight:700;
  font-size:13px;
  padding:8px 18px;
  border-radius:50px;
  cursor:pointer */
    border:none; background:#06bbcc; color:#fff; font-weight:700; font-size:13px;
  padding:8px 18px; border-radius:50px; cursor:pointer; text-decoration:none;
  display:inline-block; transition:filter .15s ease; white-space:nowrap; flex:0 0 auto;
}
.c-enroll:hover{
  /* background:var(--teal-dk); */
  filter:brightness(1.06); color:#fff;
}

/* Enroll button drops to its own full-width row so it never wraps awkwardly */
.c-meta .c-enroll{
  flex:0 0 25%;
  margin-top:1.5px;
  font-size: 12px;
  color: #fff;
  background: #0492c2;
}
.c-meta .c-enroll:hover{
  flex:0 0 25%;
  margin-top:1.5px;
  background: #f7631b;
}
@media(min-width:560px){ 
  .course .c-title{
    font-size: 13px;
  }
  .c-desc{
    font-size: 12px;
  }
  .c-meta .c-enroll{
    flex:0 0 auto;
    margin-top:0;
    /* width: 35px; */
    font-size: 9px;
  } 
  
   .c-enroll.is-off {
        width: 35%;
        padding:7px 8px;
        font-size: 8px;
      }
  }
.empty{
  grid-column:1/-1;
  text-align:center;
  padding:50px;
  color:var(--muted)
}
@media(min-width:414px){ 
  .empty{
  font-size: 13px;
} 
  }
/* FOOTER */
.footer{background:var(--navy);color:#9fb0c7;padding:60px 4% 36px}
.footer .grid4{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.footer h4{
  color:#fff;
  font-size:15px;
  margin-bottom:18px
}

.footer p{
  font-size:14px;
  margin-bottom:14px
}
.footer a{
  color:#9fb0c7;
  display:block;
  padding:5px 0;
  font-size:14px
}
.footer a:hover{
  /* color:var(--teal); */
  color:#f7631b;
}
.fnews{position:relative;margin-top:8px}
.fnews input{width:100%;border:none;border-radius:50px;padding:13px 104px 13px 18px;font-size:13px;outline:none}
.fnews button{position:absolute;right:5px;top:5px;bottom:5px;border:none;background:var(--teal);color:#fff;border-radius:50px;padding:0 18px;font-weight:700;cursor:pointer}
.fsoc{
  display:flex;
  gap:8px;
  margin-top:14px
}
.fsoc a{
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  padding:0
}
.fsoc a:hover{
  /* background:var(--teal); */
  /* background:#0492c2; */
  background:#f7631b;
  color:#fff
}
.copy{background:#07112a;color:#8294ad;font-size:13px;padding:18px 4%}
.copy .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}.copy a{color:var(--teal)}
.wa{
  position:fixed;
  left:22px;
  bottom:22px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#25d366;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:850;
  box-shadow:0 6px 20px rgba(37,211,102,.45);
  transition:.2s
}
.wa:hover{
  transform:scale(1.08)
}
.wa img{
  width:30px;
  height:30px
}

@media(max-width:414px){
  .wa{
    font-size: 13px;
    width:34px;
    height:34px;
    visibility:hidden;
  }
  .wa img{
    width:23px;
    height: 23px;
  }
}


/* MODAL */
.modal{display:none;position:fixed;inset:0;background:rgba(8,20,45,.7);z-index:1000;align-items:center;justify-content:center;padding:16px}
.modal.open{display:flex}
.modal-card{background:#fff;border-radius:18px;width:440px;max-width:100%;padding:30px;position:relative;max-height:92vh;overflow:auto}
.modal-card h3{font-size:22px;font-weight:800;margin-bottom:4px}
.modal-card .sub{color:var(--muted);font-size:14px;margin-bottom:20px}
.modal-x{position:absolute;right:16px;top:14px;background:none;border:none;font-size:22px;color:var(--muted);cursor:pointer}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:700;color:#48566f;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 14px;font-size:12px;outline:none;font-family:inherit}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal)}
.alt{text-align:center;font-size:13px;color:var(--muted);margin-top:14px}.alt b{color:var(--blue);cursor:pointer}
.note{font-size:13px;border-radius:10px;padding:10px 14px;margin-top:6px}
.note-info{background:rgba(4,146,194,.08);color:var(--blue-dk)}
.note-warn{background:rgba(245,110,45,.1);color:#c2410c}
.note-ok{background:rgba(16,185,129,.1);color:#047857}

/* DASHBOARD / generic page */
.page-head{padding:34px 0 6px}
.page-head h1{font-size:26px;font-weight:800}.page-head p{color:var(--muted);margin-top:4px}
.mycards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;padding:24px 0 60px}
.mycard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 8px 22px rgba(18,38,72,.06)}
.mycard .top{height:120px;background:linear-gradient(135deg,#0e2148,var(--teal));position:relative}
.mycard .top img{width:100%;height:100%;object-fit:cover}
.mycard .b{padding:16px}
.mycard h4{font-size:15px;margin-bottom:6px}
.bar{height:7px;background:#eef1f6;border-radius:4px;overflow:hidden;margin:10px 0}
.bar i{display:block;height:100%;background:var(--teal)}
.center-card{max-width:520px;margin:60px auto;background:#fff;border:1px solid var(--line);border-radius:16px;padding:40px;text-align:center;box-shadow:0 10px 30px rgba(18,38,72,.07)}
@media(max-width:414px){
  .mycard h4{
    font-size:13px;
  }
}

/* WATCH */
.watch{display:grid;grid-template-columns:1fr 320px;gap:24px;padding:24px 0 60px}
.player{background:#000;border-radius:14px;overflow:hidden;aspect-ratio:16/9}
.player iframe{width:100%;height:100%;border:0}
.lessons{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  align-self:start
}
.lessons h4{
  padding:16px;
  border-bottom:1px solid var(--line);
  font-size:15px
}
.lesson{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 16px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  font-size:14px;
  transition:.15s;
}
.lesson:hover{
  background:#f7f9fc
}
.lesson.active{
  background:rgba(6,187,204,.08);
  color:var(--teal-dk);
  font-weight:600
}
.lesson .dot{
  width:22px;
  height:22px;
  border-radius:50%;
  border:2px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  flex-shrink:0
}
.lesson.done .dot{
  background:var(--teal);
  border-color:var(--teal);
  color:#fff
}

@media(max-width:414px){
  .lesson{
    font-size: 11px;
  }
}
/* ADMIN */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:18px 0 22px;flex-wrap:wrap}
.tab{padding:10px 18px;font-weight:600;font-size:14px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}
.tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.tabpane{display:none}.tabpane.active{display:block}
.table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:14px}
.table th,.table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.table th{background:#f7f9fc;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.pill{
  font-size:11px;
  font-weight:700;
  padding:3px 10px;
  border-radius:50px
}
.pill.approved{background:rgba(16,185,129,.12);color:#047857}
.pill.pending{background:rgba(245,158,11,.14);color:#b45309}
.pill.rejected{background:rgba(239,68,68,.12);color:#b91c1c}
.pill.paid{background:rgba(6,187,204,.14);color:var(--teal-dk)}
.pill.free{background:rgba(99,102,241,.12);color:#4338ca}
.mini{padding:5px 12px;font-size:12px;border-radius:8px;border:none;cursor:pointer;font-weight:600}
.mini.ok{background:var(--teal);color:#fff}
.mini.no{background:#fee2e2;color:#b91c1c}
.admin-grid{display:grid;grid-template-columns:340px 1fr;gap:24px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}

/* TOAST */
.toast{position:fixed;bottom:24px;right:24px;background:var(--ink);color:#fff;padding:13px 20px;border-radius:12px;font-size:14px;z-index:1100;opacity:0;transform:translateY(10px);transition:.25s;box-shadow:0 12px 30px rgba(0,0,0,.3)}
.toast.show{opacity:1;transform:none}

@media(max-width:980px){.watch{grid-template-columns:1fr}.admin-grid{grid-template-columns:1fr}}
@media(max-width:860px){
  .topbar .info{display:none}
  .burger{display:block}
  .links{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:10px 4%;box-shadow:0 14px 26px rgba(0,0,0,.18)}
  .links.open{display:flex}
  .grid{grid-template-columns:repeat(2,1fr)}.footer .grid4{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){.grid{grid-template-columns:1fr}.footer .grid4{grid-template-columns:1fr}.filter{flex-direction:column}}

/* ============ Auth modals (two-pane design) ============ */
.auth-card{width:860px;padding:0;overflow:hidden}
.auth-grid{display:grid;grid-template-columns:5fr 7fr}
.auth-side{background:linear-gradient(135deg,var(--blue) 0%,var(--blue-dk) 100%);color:#fff;padding:44px 30px;display:flex;align-items:center;justify-content:center;text-align:center}
.auth-side i{font-size:52px;margin-bottom:22px;display:block}
.auth-side h2{font-size:26px;font-weight:800;color:#fff;margin-bottom:10px}
.auth-side p{opacity:.8;font-size:14.5px;line-height:1.6}
.auth-main{padding:32px 34px;max-height:92vh;overflow:auto}
.auth-main h3{font-size:22px;font-weight:800;margin-bottom:4px}
.auth-main .sub{color:var(--muted);font-size:13.5px;margin-bottom:20px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pw-wrap{display:flex}
.pw-wrap input{border-radius:10px 0 0 10px;border-right:0}
.pw-eye{border:1px solid var(--line);border-left:0;border-radius:0 10px 10px 0;background:#f7f9fc;color:var(--muted);cursor:pointer;padding:0 12px}
.pw-eye:hover{color:var(--blue)}
.pw-meter{height:5px;border-radius:4px;background:var(--line);margin-top:8px;overflow:hidden}
.pw-meter i{display:block;height:100%;width:0;border-radius:4px;transition:width .25s,background .25s}
.pw-hint{font-size:11px;color:var(--muted);margin-top:4px;display:block}
.check{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--muted);margin:6px 0 4px}
.check input{margin-top:2px}
.auth-links{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.auth-links a{font-size:12.5px;color:var(--blue);text-decoration:none;font-weight:600}
.rounded-btn{border-radius:999px}
@media(max-width:820px){.auth-card{width:460px}.auth-grid{grid-template-columns:1fr}.auth-side{display:none}.f-row{grid-template-columns:1fr}}

/* ============ Payment modals ============ */
.pay-card{width:560px;padding:28px 30px}
.pay-ico{width:64px;height:64px;border-radius:50%;background:#e8f8ee;color:#28a745;display:flex;align-items:center;justify-content:center;font-size:30px;margin:4px auto 12px}
.pay-h{text-align:center;font-size:21px;font-weight:800;margin-bottom:4px}
.pay-p{text-align:center;color:var(--muted);font-size:13.5px;margin-bottom:18px}
.pay-sec{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#fbfdff}
.pay-sec h4{font-size:14px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px;color:var(--ink)}
.pay-m{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:8px}
.pay-m > i{color:var(--blue);font-size:18px;width:22px;text-align:center}
.pay-m div{flex:1;font-size:13px}
.pay-m strong{font-weight:700;color:var(--ink)}
.pay-m button{border:1px solid var(--line);background:#f2fbfd;color:var(--blue);border-radius:8px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer}
.pay-m button:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.pay-amt{text-align:center;margin-top:12px;font-size:14px;color:var(--muted)}
.pay-amt strong{font-size:20px;color:var(--ink);font-weight:800;margin-left:6px}
.pay-cta{margin-top:16px}
.pay-status{margin-top:14px}
.form-group{margin-bottom:12px}
.form-group label{display:block;font-size:12px;font-weight:700;color:#48566f;margin-bottom:6px}
.form-group input,.form-group select,.form-group textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;font-size:14px;color:var(--ink);background:#fff}
.form-group input:disabled,.form-group input[readonly]{background:#f4f7fa;color:var(--muted)}
.form-group textarea{resize:vertical;min-height:64px}
.terms-box{display:flex;align-items:flex-start;gap:8px;background:#f7f9fc;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:12.5px;color:var(--muted);margin:10px 0 14px}
.pay-ok{text-align:center;padding:6px 0}
.pay-ok i{font-size:58px;color:#28a745;margin-bottom:14px}
.pay-ok h3{font-size:19px;font-weight:800;margin-bottom:10px}
.pay-ok p{color:var(--muted);font-size:14px;line-height:1.8}
.wa-btn{display:inline-flex;align-items:center;gap:10px;margin-top:18px;background:#25d366;color:#fff;border-radius:999px;padding:11px 22px;text-decoration:none;font-weight:700}
.wa-btn:hover{background:#1fb457}


/* ================= Elegant refresh (v15) — visuals only ================= */
.topbar{background:#102147}  /* نفس لون الفوتر */
.topbar .info a:hover{opacity:1}
.soc{backdrop-filter:saturate(1.2)}
.nav{box-shadow:0 6px 26px rgba(12,38,71,.09)}
.nav .wrap{padding-top:12px;padding-bottom:12px}
.brand img{box-shadow:0 4px 12px rgba(12,38,71,.14)}
.links{gap:2px}
.links a{
  font-size:15px;
  padding:9px 14px;
  border-radius:10px;
  transition:.18s
}
.links a:hover{background:#f0f9fb}
.links a.active::after{left:14px;right:14px}
/* Dabakh IT dropdown */
.drop{
  position:relative
}
.drop .drop-t{
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer
}
.drop .drop-t i{
  font-size:12px
}
.drop-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:190px;
  /* background:#fff; */
  background:#0492c2;
  /* border:1px solid var(--line); */
  border-radius:12px;
  margin-top: 5px;
  box-shadow:var(--shadow-lg);
  padding:6px;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:.16s;
  z-index:60
}
.drop:hover .drop-menu{
  opacity:1;
  visibility:visible;
  transform:none
}
.drop-menu a{
  display:block;
  padding:9px 12px;
  /* padding:5px 8px; */
  border-radius:8px;
  font-size:14px;
  /* color:var(--ink); */
  /* color:#f7631b; */
  color: #fff;
}
.drop-menu a:hover{
  /* background:#f0f9fb; */
  /* background:#0492c2; */
  background:#f7631b;
  /* color:var(--blue); */
  color:#fff
}
.drop-menu a::after{
  display:none
}
/* EN / FR pill */
.lang-switch{display:inline-flex;background:#eef3f8;border-radius:999px;padding:3px;margin:0 4px}
.lang-switch button{
  border:0;
  background:transparent;
  font:inherit;
  font-weight:700;
  font-size:12.5px;
  color:#5a6b82;
  padding:5px 12px;
  border-radius:999px;
  cursor:pointer;
  transition:.16s
}
.lang-switch button.on{
  /* background:var(--blue); */
  background:#0492c2;
  color:#fff;
  box-shadow:0 2px 8px rgba(4,146,194,.4)
}
/* Back button reuses .start-btn look with an icon */
.links .start-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  box-shadow:0 8px 20px rgba(4,146,194,.32)
}
.links .start-btn:hover{
  transform:translateY(-1px)
}
@media(max-width:900px){
  .links{flex-direction:column;align-items:stretch;position:absolute;top:100%;left:0;right:0;background:#fff;
    padding:10px 4%;box-shadow:var(--shadow-lg);display:none}
  .links.open{display:flex}
  .drop-menu{
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
    border:0;
    padding-left:12px
  }
  .lang-switch{align-self:flex-start}
}

/* ---- Page banner: gradient + subtle pattern ---- */
.banner{
  /* background:var(--grad-navy); */
  position:relative;
  overflow:hidden
}
/* .banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(1200px 300px at 80% -40%,rgba(6,187,204,.35),transparent 60%);
  pointer-events:none
} */
.banner .wrap{
  position:relative;
  z-index:1
}
.banner h1{
  letter-spacing:.3px;
  text-align: left;
}
.banner .crumb b,
.banner .crumb a{
  color:#bfe6f2
}

/* ---- Course cards: lift, image zoom, gradient CTA ---- */
.card,.course-card{border:1px solid var(--line);border-radius:var(--rl);overflow:hidden;background:var(--card);
  box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.card:hover,.course-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.card .thumb,.course-card .thumb,.card img,.course-card img{transition:transform .35s}
.card:hover img,.course-card:hover img{transform:scale(1.05)}
.card .btn,.course-card .btn{background:var(--grad);border:0;color:#fff;box-shadow:0 8px 18px rgba(4,146,194,.28)}
.card .btn:hover,.course-card .btn:hover{filter:brightness(1.05)}

/* ---- Section headings ---- */
.sec>.wrap>h2,.section-title{
  position:relative;
  font-size: 21px;
}
@media(max-width:414px) {
  .sec>.wrap>h2,.section-title{
  position:relative;
  font-size: 13px;
}
}
.sec-eyebrow{color:var(--teal);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px}

/* ---- Buttons: gradient primaries everywhere ---- */
.btn-teal{background:var(--grad);box-shadow:0 8px 18px rgba(4,146,194,.28)}
.btn-teal:hover{filter:brightness(1.06);background:var(--grad)}
.btn-gold{background:var(--grad);color:#fff}
/* .btn-gold {
    background: linear-gradient(180deg, var(--gold-300), var(--gold));
    color: var(--ink-900);
    box-shadow: 0 6px 16px rgba(4, 146, 194, .32);
} */
.btn-gold:hover{filter:brightness(1.06)}

/* ---- Footer polish ---- */
.footer{background:var(--grad-navy)}

/* ---- Auth & pay cards: rounder, deeper shadow ---- */
.modal-card,.auth-card,.pay-card{box-shadow:var(--shadow-lg);border-radius:20px}
.auth-side{background:var(--grad)}

/* nicer scrollbars on the wide tables */
.tbl-scroll::-webkit-scrollbar{height:8px}
.tbl-scroll::-webkit-scrollbar-thumb{background:#cdd9e6;border-radius:8px}


/* ---- Course cards (.course) elegant polish ---- */
.course{border:1px solid var(--line);border-radius:var(--rl);overflow:hidden;background:#fff;
  box-shadow:var(--shadow);transition:transform .22s,box-shadow .22s;position:relative}
.course:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.course .c-head{overflow:hidden}
.course .c-head img{transition:transform .4s}
.course:hover .c-head img{transform:scale(1.06)}
.course .c-badge{
  /* background:rgba(10,23,51,.72); */
  background:#0492c2;
  color: #fff;
  backdrop-filter:blur(3px);
  letter-spacing:.03em
}
.course .c-view{
  /* background:var(--grad); */
  background:#0492c2;
  color: #fff;
  border:0;
  box-shadow:0 8px 18px rgba(4,146,194,.35)
}
.course .c-view:hover{
  filter:brightness(1.06);
  background: #f7631b;
}
.course .c-avatar{
  background:#0492c2;
  box-shadow:0 6px 16px rgba(12,38,71,.18);
  border:3px solid #fff
}
.course .c-title{
  transition:color .15s;
  font-size: 14px;
}
.course .c-title:hover{color:var(--blue)}
.course .c-price{color:var(--blue);font-weight:800}

/* section title flourish */
.sec-title h2 span{
  color:var(--teal)
}
.sec-title .ic{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(4,146,194,.3)}
@media(max-width:414px){
  .sec-title h2{
    font-size: 23px;
  }
  .sec-title p {
    font-size: 13px;
  }
}
/* search + filter chips */
.filter input,.filter2 select{border-radius:10px}
.filter input:focus,.filter2 select:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(6,187,204,.15)}
.cats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: baseline;
}
.cats button.on,.cats .on{
  background:var(--grad);
  color:#fff;
  border-color:transparent
}

/* ============================================================
   Modern LMS dashboard refresh (v26) — visuals only, no JS/id changes
   Applies to admin.html + dashboard.html (shared classes)
   ============================================================ */

/* Page heading: cleaner hierarchy */
.page-head{margin-bottom:22px}
.page-head h1{font-size:clamp(14px,3.4vw,20px);font-weight:800;letter-spacing:-.3px;color:var(--navy)}
.page-head p{color:var(--muted);margin-top:4px;font-size:13.5px}

@media(max-width:414px){
  .page-head p{color:var(--muted);margin-top:4px;font-size:12.5px}
  /* .page-head h1{
    font-size: 13px;
  } */
}

/* Tabs → segmented pill bar that scrolls on mobile */
.tabs{display:flex;gap:4px;background:#eef3f8;padding:5px;border-radius:14px;margin-bottom:22px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
.tabs::-webkit-scrollbar{height:0}
.tab{border:0;background:transparent;padding:.6rem 1.15rem;border-radius:10px;cursor:pointer;font-weight:700;
  font-size:14px;color:#5a6b82;white-space:nowrap;transition:.15s;display:inline-flex;align-items:center;gap:7px}
.tab:hover{color:var(--blue)}
.tab.active{background:#fff;color:var(--blue);box-shadow:0 3px 10px rgba(12,38,71,.10)}

/* Stat widgets: gradient icon chip, bigger number, hover lift */
.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px}
.stat{border:1px solid #e8eef6;border-radius:18px;padding:20px 20px;box-shadow:0 8px 24px rgba(12,38,71,.06);
  position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s}
.stat:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(12,38,71,.12)}
.stat .n{font-size:30px;font-weight:800;color:var(--navy);line-height:1.1}
.stat .l{font-size:13px;color:var(--muted);margin-top:4px;font-weight:600}
.stat i{float:none;position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:12px;font-size:18px;
  display:inline-flex;align-items:center;justify-content:center;color:#fff;opacity:1;
  background:linear-gradient(135deg,#0492c2,#06bbcc);box-shadow:0 6px 16px rgba(4,146,194,.32)}

/* Panels / cards: rounder, softer */
.panel{border:1px solid #e8eef6;border-radius:18px;padding:20px 22px;box-shadow:0 8px 24px rgba(12,38,71,.06);background:#fff}

/* Tables: airy rows, sticky header, clean lines */
.table{border-collapse:separate;border-spacing:0;width:100%}
.table thead th{background:#f6f9fc;color:#5a6b82;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  font-weight:700;padding:13px 14px;border-bottom:1px solid #e8eef6;text-align:left;position:sticky;top:0;z-index:1}
.table tbody td{padding:14px;border-bottom:1px solid #eef3f8;font-size:14px;vertical-align:middle}
.table tbody tr{transition:background .12s}
.table tbody tr:hover{background:#f9fcfe}
.table tbody tr:last-child td{border-bottom:0}
.panel .table,.tbl-scroll .table{border:0}
.tbl-scroll{border:1px solid #e8eef6;border-radius:16px;overflow:auto;box-shadow:0 8px 24px rgba(12,38,71,.06)}

/* Wrap bare tables (users/enroll/resets) in a rounded card look */
.tabpane>.table{border:1px solid #e8eef6;border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(12,38,71,.06)}

@media(max-width:414px){
  .table tbody td{
    font-size: 13px;
  }
  .table thead th{
    font-size: 11px;
  }
}

/* Pills / status badges: soft tinted */
.pill{
  display:inline-flex;
  align-items:center;
  gap:5px;padding:4px 11px;
  border-radius:999px;
  font-size:15px;
  font-weight:700;
  line-height:1;border:1px solid transparent
}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.pill.approved,.pill.paid,.pill.free,.pill.done{
  background:#e7f8ef;
  color:#1a9d5a;
  border-color:#c7efd8;
  font-size: 13px;
}
.pill.pending{background:#fff5e6;color:#c9862b;border-color:#ffe4b8}
.pill.rejected{background:#fdeaea;color:#d9534f;border-color:#f6cccc}
@media(max-width:414px){
  .pill{
    font-size: 11.5px;
  }
  .pill.approved,.pill.paid,.pill.free,.pill.done{
  font-size: 12px;
  }
}
/* Mini buttons: pill, subtle, consistent */
.mini{border:1px solid #dbe6f0;background:#fff;color:#41556f;border-radius:9px;padding:.42rem .8rem;font-size:12.5px;
  font-weight:600;cursor:pointer;transition:.14s;white-space:nowrap}
.mini:hover{background:#f2f7fb;border-color:#c4d6e6}
.mini.ok{background:linear-gradient(135deg,#0492c2,#06bbcc);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(4,146,194,.28)}
.mini.ok:hover{filter:brightness(1.05)}
.mini.no{
  background:#fdeaea;
  color:#d9534f;
  border-color:#f3cccc;
  font-size: 12px;
}
.mini.no:hover{background:#fbdcdc}
 
@media(max-width:414px){
  .mini.no {
   font-size: 12px;
}
    .mini{
      font-size: 12px;
    }
}

/* Form fields inside panels */
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:700;color:#41556f;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:.62rem .75rem;border:1px solid #dbe6f0;border-radius:10px;
  font-size: 14px;background:#fbfdff;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(6,187,204,.15);background:#fff}

@media(max-width:414px){
  .field label{display:block;font-size:11.5px;font-weight:700;color:#41556f;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:.62rem .75rem;border:1px solid #dbe6f0;border-radius:10px;
  font-size: 13px;background:#fbfdff;transition:border-color .15s,box-shadow .15s}

}
/* Admin two-column grid: more breathing room */
.admin-grid{gap:24px}

/* ---- Payments as clean cards (mobile + a nicer read on desktop too) ---- */
.pay-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.pay-cards .pay-card{width:auto;padding:0;border:1px solid #e8eef6;border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(12,38,71,.06);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}
.pay-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(12,38,71,.12)}
.pay-cards .pay-card .pc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:11px 13px;border-bottom:1px solid #eef3f8;background:#fbfdff}
.pay-card .pc-who{min-width:0}
.pay-cards .pay-card .pc-name{font-weight:800;color:var(--navy);font-size:13.5px}
.pay-cards .pay-card .pc-email{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pay-card .pc-amt{text-align:right;flex:0 0 auto}
.pay-cards .pay-card .pc-amt .v{font-size:17px;font-weight:800;color:var(--blue);line-height:1}
.pay-cards .pay-card .pc-body{padding:10px 13px;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:12.5px}
.pay-card .pc-body dt{color:var(--muted);font-weight:600}
.pay-card .pc-body dd{margin:0;color:var(--ink);text-align:right;word-break:break-word}
.pay-cards .pay-card .pc-body dd code{
  background:#f2f7fb;
  padding:1px 6px;
  border-radius:6px;
  font-size:11px
}
.pay-cards .pay-card .pc-foot{margin-top:auto;padding:10px 13px;border-top:1px solid #eef3f8;display:flex;gap:8px;align-items:center;justify-content:space-between}
.pay-card .pc-actions{display:flex;gap:8px;flex-wrap:wrap}
.pay-empty{color:var(--muted);padding:26px;text-align:center;border:1px dashed #d9e3ee;border-radius:16px}

/* Responsive: stack admin grid + tighten paddings on small screens */
@media(max-width:820px){
  .admin-grid{grid-template-columns:1fr}
  .panel{padding:16px}
  .dash-stats{grid-template-columns:1fr 1fr!important}
}
@media(max-width:480px){
  .dash-stats{grid-template-columns:1fr!important}
  .pay-cards{grid-template-columns:1fr}
}

/* ============================================================
   Dashboard shell with sidebar (v27) — admin.html + dashboard.html
   ============================================================ */
body.dash-mode{background:#eef2f7}
.dash-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
/* Sidebar */
.dash-side{background:#fff;border-right:1px solid #e8eef6;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.dash-side .ds-brand{display:flex;align-items:center;gap:10px;padding:20px 20px 14px}
.dash-side .ds-brand img{width:38px;height:38px;border-radius:10px;object-fit:contain;box-shadow:0 4px 12px rgba(12,38,71,.14)}
.dash-side .ds-brand b{font-size:18px;font-weight:800;color:var(--navy);letter-spacing:-.2px}
.dash-side .ds-brand b span{color:var(--orange)}
.ds-nav{padding:8px 12px;flex:1}
.ds-nav .ds-sec{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9aa8bd;font-weight:700;padding:14px 12px 6px}
.ds-link{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px;cursor:pointer;color:#41556f;
  font-weight:600;font-size:14.5px;transition:.14s;border:0;background:transparent;width:100%;text-align:left;margin-bottom:2px}
.ds-link i{width:20px;text-align:center;font-size:16px;color:#8395ad;transition:.14s}
.ds-link:hover{background:#f2f7fb;color:var(--blue)}
.ds-link:hover i{color:var(--blue)}
.ds-link.active{background:linear-gradient(135deg,#0492c2,#06bbcc);color:#fff;box-shadow:0 6px 16px rgba(4,146,194,.30)}
.ds-link.active i{color:#fff}
.ds-link .ds-badge{margin-left:auto;background:#f56e2d;color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:1px 8px;min-width:20px;text-align:center}
.ds-link.active .ds-badge{background:rgba(255,255,255,.25)}
.ds-user{border-top:1px solid #eef3f8;padding:14px 16px;display:flex;align-items:center;gap:11px}
.ds-user .ds-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#0492c2,#06bbcc);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:0 0 38px}
.ds-user .ds-nm{font-weight:700;font-size:13.5px;color:var(--navy);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-user .ds-em{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-user .ds-out{margin-left:auto;background:#fdeaea;color:#d9534f;border:1px solid #f3cccc;border-radius:9px;width:32px;height:32px;cursor:pointer;flex:0 0 32px}
/* Main column */
.dash-main{min-width:0;display:flex;flex-direction:column}
.dash-topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);
  border-bottom:1px solid #e8eef6;padding:14px 26px;display:flex;align-items:center;gap:16px}
.dash-topbar .dt-search{flex:1;max-width:460px;position:relative}
.dash-topbar .dt-search i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#9aa8bd;font-size:14px}
.dash-topbar .dt-search input{width:100%;padding:10px 14px 10px 40px;border:1px solid #e3eef7;border-radius:12px;background:#f6f9fc;font:inherit;font-size:14px}
.dash-topbar .dt-search input:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(6,187,204,.14);background:#fff}
.dash-topbar .dt-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.dt-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid #e8eef6;
  /* background:#fff; */
  background:#0492c2;
  /* color:#5a6b82; */
  color:white;
  cursor:pointer;
  position:relative;
  transition:.14s
}
.dt-icon:hover{
  /* background:#f2f7fb; */
  background:#f7631b;
  /* color:var(--blue) */
  color:white
}
.dt-lang{display:inline-flex;background:#eef3f8;border-radius:999px;padding:3px}
.dt-lang button{border:0;background:transparent;font:inherit;font-weight:700;font-size:12.5px;color:#5a6b82;padding:6px 13px;border-radius:999px;cursor:pointer}
.dt-lang button.on{background:var(--blue);color:#fff}
.dash-body{padding:26px;max-width:1280px;width:100%}
/* Burger (mobile) */
.ds-burger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid #e8eef6;background:#fff;color:#41556f;cursor:pointer}
.ds-backdrop{display:none;position:fixed;inset:0;background:rgba:(10,23,51,.4);background:rgba(10,23,51,.4);z-index:40}
/* Chart cards */
.chart-card{background:#fff;border:1px solid #e8eef6;border-radius:18px;padding:20px 22px;box-shadow:0 8px 24px rgba(12,38,71,.06)}
.chart-card .cc-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.chart-card .cc-head h3{
  font-size:14px;
  font-weight:700;
  color:var(--navy)
}
.chart-card .cc-head p{font-size:13px;color:var(--muted);margin-top:2px}
.dash-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-top:22px}
.spark{width:100%;height:46px;display:block;margin-top:10px}
.stat .spark{margin-top:12px}
.donut-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.donut-lbl{font-size:13px;color:var(--muted);font-weight:600}
/* Responsive */
@media(max-width:980px){
  .dash-grid{grid-template-columns:1fr}
}
@media(max-width:860px){
  .dash-shell{grid-template-columns:1fr}
  .dash-side{position:fixed;left:0;top:0;bottom:0;width:260px;z-index:50;transform:translateX(-100%);transition:transform .25s}
  .dash-side.open{transform:none;box-shadow:0 20px 60px rgba(10,23,51,.28)}
  .ds-burger{display:inline-flex;align-items:center;justify-content:center}
  .ds-backdrop.show{display:block}
}
@media(max-width:414px){
  .chart-card .cc-head h3{
    font-size: 13px;
  }
  .donut-lbl{
    font-size: 13px;
  }
}
/* In sidebar dashboard mode, the original .tabs bar is driven from the sidebar */
body.dash-mode .tabs{display:none!important}
body.dash-mode .page-head{margin-bottom:18px}

/* ============================================================
   Compact stat cards (icon-left + sub-stats footer) — v28
   Matches the requested "Courses 24 / Active 3 · Upcoming 1" style
   ============================================================ */
.dash-stats.stat-cards{grid-template-columns:repeat(4,1fr)}
.stat-cards .stat{padding:0;overflow:hidden;display:flex;flex-direction:column}
.stat-cards .stat>.st-ic{position:static;width:44px;height:44px;border-radius:12px;color:#fff;font-size:18px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(4,146,194,.28);flex:0 0 44px}
.stat-cards .stat{position:relative}
.stat-cards .st-ic{position:absolute!important;top:16px;left:16px}
.stat-cards .st-main{padding:16px 18px 12px 74px}
.stat-cards .st-main .st-l{font-size:13px;color:var(--muted);font-weight:600;line-height:1.2}
.stat-cards .st-main .n{font-size:20px;font-weight:800;color:var(--navy);line-height:1.1;margin-top:2px}
.stat-cards .st-foot{margin-top:auto;display:flex;border-top:1px solid #eef3f8}
.stat-cards .st-foot span{flex:1;padding:10px 14px;font-size:12.5px;color:var(--muted);text-align:left}
.stat-cards .st-foot span+span{border-left:1px solid #eef3f8;text-align:right}
.stat-cards .st-foot b{color:var(--blue);font-weight:800}
/* remove the old floating icon + hide any injected sparkline in this style */
.stat-cards .stat>i{display:none}
.stat-cards .stat .spark{display:none}
/* the <i> inside the coloured chip must be a plain glyph, not its own box */
.stat-cards .st-ic i{position:static!important;width:auto;height:auto;background:none!important;box-shadow:none!important;
  border-radius:0;color:#fff;font-size:18px;display:inline;top:auto;right:auto;left:auto;opacity:1}
@media(max-width:980px){.dash-stats.stat-cards{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.dash-stats.stat-cards{grid-template-columns:1fr}}
@media(max-width:414px){
  .stat-cards .stat>.st-ic{
    width:34px;
    height:34px;
  }
  .stat-cards .st-main .n{
    font-size:16px;
  }
}
/* ============================================================
   Admin Analytics (v29) — charts built from existing data
   ============================================================ */
.an-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-top:4px}
.an-grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
@media(max-width:980px){.an-grid,.an-grid2{grid-template-columns:1fr}}
/* vertical bar chart */
.bar-chart{display:flex;align-items:flex-end;gap:10px;height:200px;padding:10px 4px 0}
.bar-chart .bc-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%}
.bar-chart .bc-bar-wrap{flex:1;width:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative}
.bar-chart .bc-bar{width:70%;max-width:42px;border-radius:8px 8px 4px 4px;transition:height .5s ease}
.bar-chart .bc-val{font-size:12px;font-weight:700;color:var(--navy);margin-bottom:4px}
.bar-chart .bc-lbl{font-size:11.5px;color:var(--muted);font-weight:600;text-align:center}
/* horizontal ranked bars */
.rank-bars{display:flex;flex-direction:column;gap:12px;padding:6px 0}
.rb-row{display:grid;grid-template-columns:130px 1fr 34px;align-items:center;gap:10px}
.rb-lbl{font-size:13px;color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rb-track{height:12px;background:#eef2f7;border-radius:999px;overflow:hidden}
.rb-fill{height:100%;border-radius:999px;transition:width .5s ease}
.rb-val{font-size:13px;font-weight:800;color:var(--blue);text-align:right}
@media(max-width:520px){.rb-row{grid-template-columns:96px 1fr 30px}}

/* extra-compact controls inside admin payment cards */
.pay-cards .pay-card .pill{font-size:11px;padding:3px 9px}
.pay-cards .pay-card .mini{padding:.34rem .7rem;font-size:12px}
.pay-cards .pay-card .pc-foot span{font-size:11.5px}

/* ============================================================
   Admin new sections (v32): categories, notifications, reports
   ============================================================ */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.cat-card{background:#fff;border:1px solid #e8eef6;border-radius:16px;padding:18px;box-shadow:0 8px 24px rgba(12,38,71,.06);
  display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}
.cat-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(12,38,71,.12)}
.cat-ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;box-shadow:0 6px 16px rgba(4,146,194,.28)}
.cat-name{font-weight:800;color:var(--navy);font-size:15.5px;margin-top:12px}
.cat-count{font-size:13px;color:var(--muted);margin-top:2px}
.cat-foot{display:flex;border-top:1px solid #eef3f8;margin-top:14px;padding-top:10px;font-size:12.5px;color:var(--muted)}
.cat-foot span{flex:1}.cat-foot span+span{text-align:right}.cat-foot b{color:var(--blue)}

@media(max-width:414px){
  .cat-name{
    font-size: 13px;
  }
  .cat-ic{
    width:36px;
    height:36px;
  }
}

/* notifications */
.notif-list{display:flex;flex-direction:column;margin-top:12px}
.notif-row{display:flex;align-items:center;gap:14px;padding:13px 6px;border-bottom:1px solid #eef3f8}
.notif-row:last-child{border-bottom:0}
.notif-ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 40px}
.notif-main{flex:1;min-width:0}
.notif-t{font-weight:700;color:var(--navy);font-size:14px}
.notif-d{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notif-at{font-size:12px;color:#9aa8bd;white-space:nowrap}
/* report buttons */
.rep-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.rep-btns .mini{padding:.6rem 1rem;font-size:13px}
/* help & support (student) */
.faq{border:1px solid #e8eef6;border-radius:12px;overflow:hidden;margin-top:12px}
.faq details{border-bottom:1px solid #eef3f8}.faq details:last-child{border-bottom:0}
.faq summary{
  padding:14px 16px;
  font-weight:700;
  color:var(--navy);
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';
  /* color:var(--blue); */
  color:#0492c2;
  font-weight:800;font-size:18px}
.faq details[open] summary::after{content:'–'}
.faq .faq-a{padding:0 16px 14px;color:var(--muted);font-size:14px;line-height:1.6}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:4px}
@media(max-width:820px){
  .help-grid{
    grid-template-columns:1fr
  }
}
@media(max-width:414px){
  .faq summary{
  font-size: 12px;
}
.faq .faq-a{
  font-size: 11px;
}
.faq summary::after {
   
    /* color: var(--blue); */
    color: #0492c2;
    
}
}
.help-card{background:#fff;border:1px solid #e8eef6;border-radius:16px;padding:20px;box-shadow:0 8px 24px rgba(12,38,71,.06)}
.help-card h3{font-size:15px;font-weight:800;color:var(--navy);margin-bottom:6px}
.help-contact a{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:10px;background:linear-gradient(135deg,#0492c2,#06bbcc);color:#fff;font-weight:700;text-decoration:none;margin-top:10px;box-shadow:0 6px 16px rgba(4,146,194,.28)}

/* Student Continue Learning cards (v32) */
.cont-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.cont-card{background:#fff;border:1px solid #e8eef6;border-radius:16px;padding:18px;box-shadow:0 8px 24px rgba(12,38,71,.06)}
.cont-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.cont-title{font-weight:800;color:var(--navy);font-size:15px}
.cont-card .bar{background:#eef2f7;border-radius:999px;height:8px;overflow:hidden}
.cont-card .bar i{display:block;height:100%;background:linear-gradient(90deg,#0492c2,#06bbcc);border-radius:999px}

@media(max-width:414px){
  .cont-title{
    font-size: 13px;
  }
}
/* ============================================================
   Assignments & Quizzes (v33)
   ============================================================ */
.aq-list{display:flex;flex-direction:column;gap:14px}
.aq-card{background:#fff;border:1px solid #e8eef6;border-radius:14px;padding:16px 18px;box-shadow:0 6px 18px rgba(12,38,71,.05)}
.aq-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.aq-title{font-weight:800;color:var(--navy);font-size:15px}
.aq-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.aq-desc{font-size:13.5px;color:var(--ink);margin-top:10px;background:#f6f9fc;border-radius:10px;padding:10px 12px}
.aq-feedback{font-size:13px;color:#1a7a45;background:#e7f8ef;border:1px solid #c7efd8;border-radius:10px;padding:9px 12px;margin-top:10px}
.aq-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.aq-subs:not(:empty){margin-top:8px}
.aq-submit{margin-top:12px}
.aq-submit textarea,.aq-submit input{width:100%;padding:.6rem .75rem;border:1px solid #dbe6f0;border-radius:10px;font:inherit;background:#fbfdff}
.aq-submit textarea:focus,.aq-submit input:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(6,187,204,.15);background:#fff}
/* admin quiz builder */
.qz-qbox{border:1px solid #e3eef7;border-radius:12px;padding:12px;margin:8px 0;background:#fbfdff}
.qz-qbox>div:first-child input{padding:.5rem .65rem;border:1px solid #dbe6f0;border-radius:9px;font:inherit;font-weight:600}
.qz-opt{display:flex;align-items:center;gap:8px;margin:6px 0}
.qz-opt input[type=text],.qz-opt>input:not([type=radio]){flex:1;padding:.45rem .6rem;border:1px solid #dbe6f0;border-radius:9px;font:inherit}
.qz-opt input[type=radio]{width:18px;height:18px;accent-color:var(--teal)}


/* student quiz taking */
.qz-take{border-bottom:1px solid #eef3f8;padding:12px 0}
.qz-take:last-of-type{border-bottom:0}
.qz-q{font-weight:700;color:var(--navy);font-size:14.5px;margin-bottom:8px}
.qz-topt{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid #e3eef7;border-radius:10px;margin:6px 0;cursor:pointer;font-size:14px;transition:.12s}
.qz-topt:hover{background:#f6fbfd;border-color:#cdeef2}
.qz-topt input{accent-color:var(--teal);width:17px;height:17px}
/* quiz result */
.qz-result{text-align:center;padding:8px}
.qz-score{font-size:44px;font-weight:800;line-height:1}
.qz-result.pass .qz-score{color:#22b07d}
.qz-result.fail .qz-score{color:#f56e2d}
.qz-msg{font-size:14px;color:var(--muted);margin:6px 0 16px}
.qz-review{text-align:left}
.qz-rrow{border:1px solid #e8eef6;border-radius:12px;padding:12px;margin:10px 0}
.qz-rrow.ok{border-color:#c7efd8;background:#f4fcf7}.qz-rrow.no{border-color:#f6cccc;background:#fdf5f5}
.qz-ropt{padding:6px 10px;border-radius:8px;font-size:13.5px;margin:3px 0;color:var(--ink)}
.qz-ropt.correct{background:#e7f8ef;color:#1a7a45;font-weight:700}
.qz-ropt.wrong{background:#fdeaea;color:#c0392b;text-decoration:line-through}
@media(max-width:820px){.admin-grid{grid-template-columns:1fr!important}}
@media(max-width:414px){
  .qz-qbox>div:first-child input{
    font-size: 13px;
  }
  .qz-opt input[type=text], .qz-opt>input:not([type=radio]){
    font-size: 12px;
  }
}

/* ============================================================
   Video "file://" warning + open link (v34)
   ============================================================ */
.hero-embed-warn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:22px;background:#0b1b2b}
.hero-filewarn{color:#e7eef8;font-size:13.5px;line-height:1.6;max-width:520px;text-align:center}
.hero-filewarn i{color:#f5a623;font-size:22px;display:block;margin-bottom:10px}
.player-msg{display:flex;align-items:center;justify-content:center;background:#0b1b2b;min-height:280px;border-radius:12px}
.vid-filewarn{display:flex;gap:16px;align-items:flex-start;max-width:560px;padding:26px;color:#e7eef8}
.vid-filewarn>i{color:#f5a623;font-size:30px;flex:0 0 auto;margin-top:2px}
.vid-filewarn b{font-size:16px;color:#fff}
.vid-filewarn p{font-size:13.5px;color:#b9c6da;line-height:1.6;margin:6px 0 12px}
.watch-open{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  background:linear-gradient(135deg,#0492c2,#06bbcc);color:#fff;font-weight:700;font-size:13.5px;text-decoration:none;
  box-shadow:0 6px 16px rgba(4,146,194,.3)}
.watch-open:hover{filter:brightness(1.06)}

/* ============================================================
   Full course editor modal (v38)
   ============================================================ */
.ec-overlay{position:fixed;inset:0;background:rgba(10,23,51,.5);backdrop-filter:blur(3px);z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:20px;animation:ecfade .15s ease}
@keyframes ecfade{from{opacity:0}to{opacity:1}}
.ec-card{background:#fff;border-radius:20px;width:560px;max-width:100%;max-height:90vh;display:flex;flex-direction:column;
  box-shadow:0 30px 80px rgba(10,23,51,.35);overflow:hidden}
.ec-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #eef3f8}
.ec-head h3{font-size:19px;font-weight:800;color:var(--navy)}
.ec-x{width:34px;height:34px;border-radius:10px;border:1px solid #e8eef6;background:#f6f9fc;color:#5a6b82;cursor:pointer;font-size:14px}
.ec-x:hover{background:#eef3f8}
.ec-body{padding:20px 24px;overflow-y:auto}
.ec-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.ec-2{grid-template-columns:1fr}}
.ec-note{font-size:12.5px;color:var(--muted);background:#f6f9fc;border-radius:10px;padding:10px 12px;margin-top:6px}
.ec-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid #eef3f8;background:#fbfdff}
.ec-foot .btn{padding:10px 20px}

/* ============================================================
   GLOBAL MOBILE RESPONSIVE LAYER (v41)
   Comprehensive rules so every page — and anything added later —
   stays usable on phones/tablets. Kept last so it wins.
   ============================================================ */

/* Never let anything cause a horizontal scrollbar */
/* html,body{max-width:100%;overflow-x:hidden} */
/* overflow-x on <body> breaks position:sticky, so keep it on <html> only */
html{max-width:100%;overflow-x:hidden}
body{max-width:100%}
*{min-width:0}                 /* let fl: children shrink instead of overflowing */
img,video,svg,iframe,table{max-width:100%}

/* Wide tables scroll inside their own box instead of stretching the page */
.tbl-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabpane>.table,.panel>.table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}

/* ---------- Dashboard shell (admin + student) ---------- */
@media(max-width:860px){
  .dash-shell{grid-template-columns:1fr!important}
  .dash-main{min-width:0;width:100%;overflow-x:hidden}
  .dash-body{padding:16px!important;max-width:100%}
  .dash-topbar{padding:10px 14px;gap:10px}
  .dash-topbar .dt-search{max-width:none}
  /* the sidebar becomes an off-canvas drawer */
  .dash-side{position:fixed!important;left:0;top:0;bottom:0;width:82vw;max-width:300px;z-index:1200;
    transform:translateX(-100%);transition:transform .25s ease}
  .dash-side.open{transform:none;box-shadow:0 20px 60px rgba(10,23,51,.32)}
  .ds-burger{display:inline-flex!important;align-items:center;justify-content:center}
  .ds-backdrop{z-index:1100}
  .ds-backdrop.show{display:block}
}

/* ---------- Stat cards: 2-up on tablet, 1-up on phone ---------- */
@media(max-width:820px){ .dash-stats,.dash-stats.stat-cards{grid-template-columns:1fr 1fr!important} }
@media(max-width:520px){ .dash-stats,.dash-stats.stat-cards{grid-template-columns:1fr!important} }

/* ---------- Two-column admin forms stack ---------- */
@media(max-width:820px){
  .admin-grid,[style*="grid-template-columns:340px"],[style*="grid-template-columns:380px"]{
    display:block!important}
  .admin-grid>*{width:100%!important;margin-bottom:16px}
  .ec-2{grid-template-columns:1fr!important}
}

/* ---------- Chart / analytics grids stack ---------- */
@media(max-width:820px){
  .dash-grid,.an-grid,.an-grid2,.help-grid{grid-template-columns:1fr!important}
}

/* ---------- Card grids become single column on phones ---------- */
@media(max-width:560px){
  .pay-cards,.cat-grid,.cont-list,.cont-cards{grid-template-columns:1fr!important}
  .mycards,.mycard-grid{grid-template-columns:1fr!important}
}

/* ---------- Header / top nav on phones ---------- */
@media(max-width:720px){
  .chrome-top .nav-links,.site-nav .links{gap:12px;font-size:14px}
  .lang-switch{transform:scale(.92)}
}

/* ---------- Course-detail hero + layout ---------- */
@media(max-width:820px){
  .cd-grid,.detail-grid,[class*="two-col"]{grid-template-columns:1fr!important}
  .hero-embed{aspect-ratio:16/9}
}

/* ---------- Buttons/rows wrap instead of overflowing ---------- */
@media(max-width:560px){
  .aq-actions,.pc-actions,.rep-btns,.cc-head{
    flex-wrap:wrap
  }
  .btn{
    white-space:normal;
    font-size: 12px;
    border-radius: 10px;
  }
  .mini{
    white-space:normal;
    font-size: 12px;
    border-radius: 10px;
  }
  .page-head h1{
    font-size:18px
  }
}
@media(max-width:414px){
  .aq-actions,.pc-actions,.rep-btns,.cc-head{
    flex-wrap:wrap;
    font-size: 13px;
  }
  .btn,.mini{
    white-space:normal;
    font-size: 12px;
    border-radius: 10px;
    padding: 5px 10px !important;
  }
  .page-head h1{
    font-size:20px
  }
}

/* ---------- Modals fit small screens ---------- */
@media(max-width:560px){
  .ec-card,.modal-card,.auth-card{width:100%!important;max-width:100%;border-radius:16px}
  .auth-grid{grid-template-columns:1fr!important}
  .auth-side{display:none}
}

/* Touch targets a bit larger on phones */
@media(max-width:560px){
  .mini{padding:.5rem .8rem}
  .ds-link{padding:12px 14px}
}

/* ============================================================
   Admin course table: compact wrapping action buttons (v42)
   Keeps all actions visible within the screen width — no horizontal
   scroll needed — by letting the buttons wrap into a neat block.
   ============================================================ */
.row-actions{
  white-space:normal
}
.row-actions{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:6px;
  min-width:230px
}
.row-actions .mini{
  padding:.4rem .7rem;
  font-size:12px;
  flex:0 0 auto
}

/* On phones the course table becomes stacked "cards" so nothing is cut off */
#courseRows td:not(.row-actions) {
    font-size: 13px;
    line-height: 1.4;
    color: #333;
    vertical-align: middle;
}
  #courseRows td[data-th="Title"] {
    /* font-size: 13px; */
    font-weight: 600;
    color: #222;
}



#courseRows td[data-th="Instructor"],
#courseRows td[data-th="Category"],
#courseRows td[data-th="Price"] {
    font-size: 13.5px;
    color: #555;
}
@media(max-width:680px){
  #courseRows,#courseRows tr,#courseRows td{
    display:block;
    width:120%;
    font-size: 13px;
  }
  #tab-courses .table thead{
    display:none
  }
  #courseRows tr{
    border:1px solid #e8eef6;
    border-radius:14px
    ;margin-bottom:12px;
    padding:10px 12px;
    box-shadow:0 6px 18px rgba(12,38,71,.05);
    background:#fff
  }
  #courseRows td{
    border:0!important;
    padding:4px 0
  }
  #courseRows td::before{
    content:attr(data-th);
    display:block;
    font-size:9.5px;
    font-weight:700;
    color:#9aa8bd;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:2px
  }
  .row-actions{
    min-width:0;
    margin-top:8px
  }
  .row-actions .mini{
    flex:1 1 auto;
    text-align:center
  }
}

@media (max-width: 480px) {

    #courseRows td:not(.row-actions) {
        font-size: 12px;
        line-height: 1.35;
    }

    #courseRows td[data-th="Title"] {
        font-size: 12.5px;
        /* font-weight: 600; */
    }
}
/* ============================================================
   Course row "More ▾" dropdown (v43)
   ============================================================ */
.more-wrap{
  position:relative;
  display:inline-block;
  overflow: visible;
  /* z-index: 1000; */
}

.more-btn{
  display:inline-flex;
  align-items:center;
  gap:6px
}
.more-btn i{
  font-size:10px;
  transition:transform .18s
}
.more-btn.active i{
  transform:rotate(180deg)
}

.more-menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  /* z-index:200; */
  /* min-width:170px; */
  min-width: 160px;
  background:#fff;
  border:1px solid #e8eef6;
  /* border-radius:12px; */
  border-radius:8px;
  /* box-shadow:0 16px 40px rgba(12,38,71,.16); */
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
  padding:6px;
  display:none;
  z-index: 99999;
  flex-direction:column;
  gap:2px;
}
.more-menu.open{
  /* display:flex; */
  display:block;
  animation:moreIn .14s ease
}
/* open upward when there's no room below (e.g. last course row) */
.more-menu.up{top:auto;bottom:calc(100% + 6px)}
.more-menu.up{animation:moreInUp .14s ease}
@keyframes moreInUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes moreIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.more-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;
  padding:9px 12px;border-radius:9px;font:inherit;font-size:13.5px;font-weight:600;color:#41556f;cursor:pointer}
.more-menu button:hover{background:#f2f7fb;color:var(--blue)}
.more-menu button i{width:16px;text-align:center;color:#8395ad;font-size:13px}
.more-menu button:hover i{color:var(--blue)}
/* On phones, let the menu sit left-aligned so it never runs off-screen */
@media(max-width:680px){
  .more-wrap{position:static}
  .more-menu{right:auto;left:0;width:100%}
}
@media (max-width: 768px) {

    .dabakh-drop {
        position: relative;
        width: 100%;
    }

    .dabakh-drop .drop-menu {
        display: none;
        position: static;
        width: 100%;
        margin-top: 8px;
    }

    /* Open dropdown */
    .dabakh-drop.mobile-open .drop-menu {
        display: block;
    }

    /* Arrow animation */
    .dabakh-drop-toggle i {
        transition: transform 0.3s ease;
    }

    .dabakh-drop.mobile-open .dabakh-drop-toggle i {
        transform: rotate(180deg);
    }
}
@media (max-width: 480px) {

    .more-wrap {
        position: relative;
        display: inline-block;
        z-index: 1000;
    }

    .more-menu {
        position: absolute;
        top: calc(100% + 5px);
        right: 0;

        min-width: 145px;
        max-width: 180px;

        padding: 5px;

        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;

        box-shadow: 0 8px 20px rgba(0,0,0,.15);

        z-index: 99999;

        display: none;
    }

    .more-menu.open {
        display: block;
    }

    .more-menu button {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;

        padding: 8px 10px;

        font-size: 13px;
        white-space: nowrap;

        text-align: left;
    }

    .more-btn {
        font-size: 12px;
        padding: 6px 9px;
        white-space: nowrap;
    }
}
/* ============================================================
   الوضع الليلي (Dark mode)
   يعمل بإضافة data-theme="dark" على <html>. لا يمسّ الوضع
   النهاري إطلاقًا — كل ما هنا مشروط بوجود تلك السمة.
   ============================================================ */
html[data-theme="dark"]{
  --bg:#0d1524; --card:#151f33; --ink:#e8eef8; --muted:#9aabc4;
  --line:#243349;
  /* --navy يُستخدم للنصوص (عناوين، اسم البراند) 16 مرة مقابل خلفية
     واحدة، لذا نجعله فاتحًا هنا ونعالج الخلفية الوحيدة بعده. */
  --navy:#e8eef8;
  --shadow:0 10px 34px rgba(0,0,0,.45); --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  color-scheme:dark;
}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}

/* الأسطح: البطاقات واللوحات والجداول */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .mycard,
html[data-theme="dark"] .cat-card,
html[data-theme="dark"] .cont-card,
html[data-theme="dark"] .pay-card,
html[data-theme="dark"] .aq-card,
html[data-theme="dark"] .help-card,
html[data-theme="dark"] .notif-row,
html[data-theme="dark"] .center-card,
html[data-theme="dark"] .ec-card,
html[data-theme="dark"] .modal-card{
  background:var(--card); border-color:var(--line); color:var(--ink);
}
html[data-theme="dark"] .table{background:var(--card);color:var(--ink)}
html[data-theme="dark"] .table thead th{background:#1b2740;color:#cbd8ec;border-color:var(--line)}
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th{border-color:var(--line)}
html[data-theme="dark"] .table tbody tr:hover{background:#1b2740}

/* الشريط الجانبي والعلوي */
html[data-theme="dark"] .dash-side{background:#111a2b;border-color:var(--line)}
html[data-theme="dark"] .dash-topbar{background:#111a2b;border-color:var(--line)}
html[data-theme="dark"] .mycard .b h4,
html[data-theme="dark"] .ds-link{
  color:#c3d1e6
}
html[data-theme="dark"] .ds-link:hover{background:#1b2740;color:#fff}
html[data-theme="dark"] .ds-sec{color:#7f90a9}
html[data-theme="dark"] .dash-body{background:var(--bg)}
html[data-theme="dark"] body.dash-mode{background:var(--bg)}

/* الحقول والأزرار الثانوية */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .pay-cards .pay-card .pc-body dd code,
html[data-theme="dark"] .dt-search input{
  background:#0f1828; border-color:var(--line); color:var(--ink);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:#6f819b}
html[data-theme="dark"] .mini{background:#1b2740;border-color:var(--line);color:#cfdcef}
html[data-theme="dark"] .mini:hover{background:#233150}
html[data-theme="dark"] .more-menu{background:var(--card);border-color:var(--line)}
html[data-theme="dark"] .more-menu button{color:#cfdcef}
html[data-theme="dark"] .more-menu button:hover{background:#1b2740;color:#fff}
html[data-theme="dark"] .dt-lang{background:#0f1828}
html[data-theme="dark"] .dt-icon{
  /* background:#1b2740; */
  background:#0492c2;
  border-color:var(--line);
  color:#cfdcef
}

/* الفوتر المشترك */
html[data-theme="dark"] #chrome-foot .foot{background:#0a1120}

/* زر تبديل الثيم */
.theme-btn{
  width:40px;
  height:40px;
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid var(--line);
  /* background:var(--card); */
  background:#0492c2;
  /* color:var(--ink); */
  color:white;
  cursor:pointer;
  font-size:15px;
  transition:background .15s,color .15s
}
.theme-btn:hover{
  /* background:#eef3f8; */
  background:#f7631b
}
html[data-theme="dark"] .theme-btn:hover{background:#233150}

/* الخلفية الوحيدة التي كانت تستخدم --navy تبقى داكنة */
html[data-theme="dark"] .ds-brand,
html[data-theme="dark"] [style*="background:var(--navy)"]{background:#0a1120 !important}
/* نصوص إضافية كانت تعتمد على ألوان فاتحة الخلفية */
html[data-theme="dark"] .page-head h1,
html[data-theme="dark"] .dash-side .ds-brand b,
html[data-theme="dark"] .ds-user b,
html[data-theme="dark"] .table td,
html[data-theme="dark"] h1,html[data-theme="dark"] h2,
html[data-theme="dark"] h3,html[data-theme="dark"] h4{color:var(--ink)}
html[data-theme="dark"] .ds-user small,
html[data-theme="dark"] .page-head p{
  color:var(--muted)
}

html[data-theme="dark"] .dash-side .ds-brand b{
  color: #0492c2;
}

/* قواعد الجدول عندك تستخدم ألوانًا ثابتة (#333 / #222) فتبقى داكنة
   في الوضع الليلي. نعيد تلوينها هنا فقط داخل الوضع الليلي. */
html[data-theme="dark"] #courseRows td,
html[data-theme="dark"] #courseRows td[data-th="Title"],
html[data-theme="dark"] #userRows td,
html[data-theme="dark"] #enrollRows td,
html[data-theme="dark"] #payRows td,
html[data-theme="dark"] #resetRows td,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table td *:not(.pill):not(.mini):not(i){color:var(--ink)}
html[data-theme="dark"] .table td[data-th]::before{color:var(--muted)}
/* ============================================================
   استجابة: 992px و 1200px
   ① عناصر الشبكة تمنع الانكماش افتراضيًا (min-width:auto)،
      فيتجاوز الجدول عرض الشاشة. نسمح لها بالانكماش.
   ② الجداول العريضة تتمرّر داخل صندوقها بدل دفع الصفحة.
   ============================================================ */
.admin-grid > *{min-width:0}
.admin-grid .table{width:100%}
.admin-grid > div:last-child{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:1280px){
  .admin-grid{grid-template-columns:300px 1fr}
}
@media(max-width:1100px){
  .admin-grid{grid-template-columns:1fr}
}

/* قائمة الموبايل في صفحة الكورسات: تتمرّر إن طالت عن الشاشة
   (مثلًا مع فتح القائمة الفرعية "Dabakh IT" على هاتف قصير). */
@media (max-width: 980px) {
  .links.open {
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}
/* صفحة الكورسات: زرّا اللغة والثيم كانا يتراصّان عموديًا لأن
   القائمة المفتوحة عمودية. الروابط تبقى بعرض كامل (كلٌّ في سطر)،
   بينما يجتمع الزرّان في سطر واحد في الأسفل. */
@media (max-width: 980px) {
  .links.open {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .links.open > .drop,
  .links.open > a { flex: 0 0 100%; }
  .links.open > .lang-switch,
  .links.open > .theme-btn { flex: 0 0 auto; margin: 4px 0 !important; }
}
@media(max-width:414px){
  .theme-btn{
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
}

/* ============================================================
   جدول الكورسات على الهاتف — بطاقة أقصر ولا تفيض
   ------------------------------------------------------------
   القاعدة السابقة عند 680px تضع width:120% على خلايا الجدول،
   فتصير البطاقة أعرض من الشاشة (491 داخل 375) ويظهر تمرير
   جانبي. وكل حقل يأخذ سطرين: عنوان صغير فوق القيمة، فيطول
   الكورس الواحد حتى يملأ الشاشة.

   هنا: العنوان يصير رأس البطاقة، والثلاثة الباقية سطرًا واحدًا
   لكلٍّ (الاسم يمينًا والقيمة يسارًا)، والعرض يتبع الشاشة.
   أُضيفت في الآخر، فحذفها يُرجع الحال كما كان.
   ============================================================ */
@media (max-width: 680px) {
  #courseRows,
  #courseRows tr,
  #courseRows td {
    width: auto;
  }

  #courseRows tr {
    padding: 12px 14px;
  }

  /* العنوان: رأس البطاقة، بلا تسمية فوقه */
  #courseRows td[data-th="Title"] {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.3;
    padding: 0 0 9px;
  }
  #courseRows td[data-th="Title"]::before {
    display: none;
  }

  /* البقيّة: التسمية والقيمة على سطر واحد */
  #courseRows td[data-th="Instructor"],
  #courseRows td[data-th="Category"],
  #courseRows td[data-th="Price"] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    font-size: 12.5px;
    text-align: right;
  }
  #courseRows td[data-th="Instructor"]::before,
  #courseRows td[data-th="Category"]::before,
  #courseRows td[data-th="Price"]::before {
    display: inline;
    flex: 0 0 auto;
    margin-bottom: 0;
  }

  #courseRows .row-actions {
    display: flex;
    gap: 6px;
    margin-top: 11px;
  }
}


/* ============================================================
   عناوين الفوتر: خطّ قصير تحتها كما في الصفحة الرئيسية.
   المرجع: .footer-item h4::after في style.css سطر 10493 —
   نفس المقاس (36×2) ونفس اللون (#0492c2) ونفس الاستدارة.
   الزيادة الوحيدة في المساحة هي padding-bottom:12px لإفساح
   موضع الخطّ؛ وما عداه لم يُمَسّ.
   هذا الفوتر يبنيه js/ui.js ويظهر في صفحة الكورسات وصفحة
   تفاصيل الكورس وصفحة المشاهدة — فيصير الثلاثة متشابهة.
   ============================================================ */
.footer h4{
  position: relative;
  padding-bottom: 12px;
}
.footer h4::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 36px;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
}

/* ============================================================
   لوحة الإدارة في الوضع الليلي — خلفيات فاتحة مكتوبة صراحةً
   في app.css ولم يكن لها بديل ليلي، فبقيت بيضاء بينما صار لون
   النصّ فاتحًا، فاختفى الكلام. هنا تُسوَّد الخلفية ويبقى النصّ
   فاتحًا. لا تغيير في المقاسات ولا الحشوات ولا الحدود — لونٌ فقط،
   وكلّه مشروط بـ data-theme="dark" فلا أثر له في الوضع النهاري.
   ============================================================ */

/* ١) بطاقة الكورس على الهاتف — app.css سطر 2224:
      #courseRows tr{background:#fff} داخل @media(max-width:680px). */
@media (max-width: 680px) {
  html[data-theme="dark"] #courseRows tr {
    background: #151f33;
    border-color: #243349;
  }
}

/* ٢) صندوق شرح «Role» في Add users — app.css سطر 2048:
      .ec-note{background:#f6f9fc} */
html[data-theme="dark"] .ec-note {
  background: #1b2740;
  color: #cfdcef;
}

/* ٣) رأس بطاقة الدفع (اسم الطالب وبريده) — app.css سطر 1687:
      .pc-head{background:#fbfdff} */
html[data-theme="dark"] .pay-cards .pay-card .pc-head {
  background: #1b2740;
  border-bottom-color: #243349;
}
html[data-theme="dark"] .pay-cards .pay-card .pc-name  { color: #eaf1fb }
html[data-theme="dark"] .pay-cards .pay-card .pc-email { color: #a9b9d0 }

/* ٤) بقيّة الأسطح الفاتحة بالقيمة نفسها #fbfdff —
      app.css سطر 1273 و 1981. */
html[data-theme="dark"] .pay-sec,
html[data-theme="dark"] .qz-qbox {
  background: #1b2740;
  border-color: #243349;
}

/* ٥) زرّ «Import course from .json» — app.css سطر 47:
      .btn-ghost{background:#fff} */
html[data-theme="dark"] .panel .btn-ghost,
html[data-theme="dark"] .tabpane .btn-ghost {
  background: #1b2740;
  color: #7cc7e8;
}

/* ٦) عناوين حقول النماذج — app.css سطر 1668 و 1286: color:#41556f */
html[data-theme="dark"] .panel .field label,
html[data-theme="dark"] .tabpane .field label,
html[data-theme="dark"] .ec-card .field label,
html[data-theme="dark"] .modal-card .field label,
html[data-theme="dark"] .form-group label {
  color: #cfdcef;
}

/* ٧) الرقم داخل دائرة Completion Rate: مرسوم داخل SVG بـ
      fill="#0a1733" في js/dash-shell.js سطر 221. نغلبه من الـ CSS
      حتى لا يُمَسّ ملفّ الجافاسكربت. */
html[data-theme="dark"] .donut-wrap svg text {
  fill: #eaf1fb;
}

/* ٨) عنوانا «Questions» في Assignments و Quizzes مكتوبان بـ
      style="...color:#41556f" داخل admin.html (سطرا 952 و 1074).
      النمط السطري يغلب أي مُحدِّد، فلا سبيل إلا !important —
      وبهذا يبقى ملفّ admin.html دون تعديل. */
html[data-theme="dark"] label[style*="#41556f"] {
  color: #cfdcef !important;
}