/* Cairo variable font (wght 400–800), self-hosted — CSP blocks font CDNs */
@font-face{
  font-family:"Cairo"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("fonts/cairo-arabic.woff2") format("woff2");
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face{
  font-family:"Cairo"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("fonts/cairo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --brand:#122c52; --brand-d:#0d2140; --ink:#1a2330; --muted:#6b7686;
  --ok:#1f6b3b; --err:#b3261e; --line:#e3e8ef; --bg:#eef2f7; --card:#fff;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  margin:0; min-height:100vh;
  font-family:"Cairo","Segoe UI","Noto Naskh Arabic",Tahoma,sans-serif;
  color:var(--ink); background:linear-gradient(160deg,#dbe6f2,#eef2f7 60%);
}

/* top bar */
.topbar{
  display:flex; align-items:center; gap:12px; padding:10px 16px;
  background:var(--brand); color:#fff;
}
.topbar img{ width:34px; height:34px; border-radius:8px; }
.topbar .title{ font-weight:700; font-size:16px; flex:1; }
.topbar button{
  background:rgba(255,255,255,.15); color:#fff; border:0; border-radius:8px;
  padding:6px 14px; font-family:inherit; font-size:13px; cursor:pointer;
}
.topbar button:hover{ background:rgba(255,255,255,.25); }

.wrap{ max-width:760px; margin:0 auto; padding:20px 16px 60px; }

/* auth card (login/signup) */
.card{
  max-width:420px; margin:6vh auto; background:var(--card);
  border:1px solid var(--line); border-radius:18px;
  box-shadow:0 18px 50px rgba(15,76,129,.14); overflow:hidden;
}
.brand{ text-align:center; padding:26px 24px 8px; }
.brand img{ width:72px; height:72px; border-radius:18px; box-shadow:0 6px 16px rgba(15,43,77,.35); }
.brand h1{ margin:8px 0 0; font-size:20px; color:var(--brand); }
.brand .tag{ margin:4px 0 0; color:var(--muted); font-size:13px; }
.panel{ padding:18px 24px 22px; }
.tabs{ display:flex; border-bottom:1px solid var(--line); }
.tabs button{
  flex:1; padding:12px; background:none; border:0; font-family:inherit;
  font-size:14px; font-weight:700; color:var(--muted); cursor:pointer;
  border-bottom:2px solid transparent;
}
.tabs button.active{ color:var(--brand); border-bottom-color:var(--brand); }
label{ display:block; font-size:13px; font-weight:600; margin:12px 0 6px; }
input{
  width:100%; padding:11px 12px; font-size:15px; font-family:inherit;
  border:1.5px solid var(--line); border-radius:10px; outline:none;
}
input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(15,76,129,.12); }
input.code{ text-align:center; letter-spacing:3px; font-family:"Courier New",monospace; text-transform:uppercase; direction:ltr; }
.btn{
  width:100%; margin-top:16px; padding:12px; font-size:15px; font-weight:700;
  font-family:inherit; color:#fff; background:var(--brand); border:0;
  border-radius:10px; cursor:pointer;
}
.btn:hover{ background:var(--brand-d); }
.btn:disabled{ opacity:.6; cursor:progress; }
.hint{ color:var(--muted); font-size:12px; margin:12px 0 0; text-align:center; }
.error{
  margin:12px 0 0; padding:10px 12px; background:#fdecea; color:var(--err);
  border:1px solid #f5c6c0; border-radius:10px; font-size:13px; text-align:center;
}

/* catalog */
h2.section{ font-size:18px; color:var(--brand); margin:26px 0 10px; }
.list{ display:flex; flex-direction:column; gap:10px; }
.item{
  display:block; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:14px 16px; text-decoration:none; color:var(--ink);
}
.item:hover{ border-color:var(--brand); }
.item .t{ font-weight:700; font-size:15px; }
.item .d{ color:var(--muted); font-size:13px; margin-top:2px; }
.crumb{ font-size:13px; color:var(--muted); margin:14px 0 4px; }
.crumb a{ color:var(--brand); text-decoration:none; }

/* lesson page */
.video{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:14px;
  overflow:hidden; background:#000; margin:14px 0;
}
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.files a{
  display:flex; align-items:center; gap:8px; background:var(--card);
  border:1px solid var(--line); border-radius:10px; padding:11px 14px;
  margin-top:8px; text-decoration:none; color:var(--brand); font-weight:600; font-size:14px;
}
.loading{ text-align:center; color:var(--muted); padding:40px 0; }