@font-face{
  font-family:'AbdoLine';
  src:url('/fonts/AbdoLine-Flat.ttf') format('truetype');
  font-weight:normal;
  font-display:swap;
}
:root{
  --blue:#1d5fa8; --blue-dark:#134374; --teal:#0e7c7b; --red:#c0392b;
  --green:#1e8f5f; --orange:#e08a1e; --bg:#f7f9fb; --card:#ffffff;
  --text:#1f2937; --muted:#6b7280; --border:#e5e9ee;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'AbdoLine','Tahoma',sans-serif;
  background:var(--bg); color:var(--text);
  direction:rtl; text-align:right; line-height:1.9; font-size:24px;
}
a{color:inherit; text-decoration:none}
.wrap{max-width:980px; margin:0 auto; padding:20px}
header.site{
  background:linear-gradient(120deg,var(--blue-dark),var(--blue));
  color:#fff; padding:22px 0;
}
header.site .wrap{display:flex; justify-content:space-between; align-items:center}
header.site h1{font-size:30px; margin:0}
header.site .back{background:#ffffff22; padding:8px 16px; border-radius:10px; font-size:30px}
header.site .back:hover{background:#ffffff3a}

/* ---- Home menu ---- */
.unit-card{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:20px; margin:18px 0; box-shadow:0 2px 10px #0000000a;
}
.unit-card h2{color:var(--blue-dark); margin-top:0}
.lesson-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:640px){.lesson-grid{grid-template-columns:1fr}}
.lesson-btn{
  display:flex; align-items:center; gap:12px; background:#eef4fb;
  border:1px solid #dbe6f3; border-radius:12px; padding:14px 16px;
  transition:.15s;
}
.lesson-btn.active:hover{background:#dcebfa; transform:translateY(-2px)}
.lesson-btn.locked{opacity:.55; cursor:not-allowed}
.lesson-num{
  background:var(--blue); color:#fff; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:bold; flex:none;
}
.lesson-btn.locked .lesson-num{background:#9aa5b1}
.lesson-info small{color:var(--muted); display:block; margin-top:2px}

/* ---- Lesson page ---- */
.section{margin:26px 0}
.box{border-radius:14px; padding:18px 20px; margin:16px 0}
.box h3{margin-top:0}
.box-blue{background:#eaf2fb; border:1px solid #cfe0f4}
.box-blue-dark{background:var(--blue-dark); color:#fff}
.box-teal{background:var(--teal); color:#fff}
.box-red{background:#fbebe9; border:1px solid #f2cfc9}
.box-green{background:#e9f7f0; border:1px solid #c8ecd9}
.box-orange{background:#fdf1e0; border:2px dashed var(--orange)}
.box-idea{background:#fff8e1; border:1px solid #f3e1a8}
.box-tip{background:#eefaf6; border-right:5px solid var(--green); padding:14px 18px}
.box-term{background:#fdecea; border:1px solid #f6d0cb}

table{width:100%; border-collapse:collapse; margin:10px 0; background:#fff}
th,td{border:1px solid var(--border); padding:10px 12px; font-size:22px}
th{background:#eef4fb}

.hero-img{width:100%; border-radius:16px; margin:16px 0; display:block}
figure{margin:14px 0; text-align:center}
figcaption{color:var(--muted); font-size:20px; margin-top:6px}

.eng{direction:ltr; display:inline-block; font-weight:bold}

.toggle-btn{
  background:var(--blue); color:#fff; border:none; padding:9px 16px;
  border-radius:9px; cursor:pointer; font-family:inherit; font-size:20px;
}
.toggle-btn:hover{background:var(--blue-dark)}
.answer{display:none; margin-top:10px; padding:12px 14px; background:#f1f6fb; border-radius:10px}
.answer.show{display:block}

.interactive{
  border:1px solid var(--border); border-radius:16px; padding:18px;
  background:#fbfdff; margin:18px 0;
}
.interactive h4{margin-top:0; color:var(--blue-dark)}
.chip{display:inline-block; padding:6px 14px; margin:4px; border-radius:20px; background:#e7edf5; cursor:pointer; border:1px solid #d3dfec}
.chip.active{background:var(--blue); color:#fff}

/*

.progress-nav{
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; position:sticky; top:0;
  background:var(--bg); padding:10px 0; z-index:5; border-bottom:1px solid var(--border);
}
.progress-nav a{font-size:20px; background:#fff; border:1px solid var(--border); padding:6px 10px; border-radius:8px}
.progress-nav a:hover{background:#eef4fb}

*/

footer.site{text-align:center; color:var(--muted); padding:30px 0; font-size:20px}