/* ═══════════ BUTTONS ═══════════ */
.btn {
  padding:8px 18px; border-radius:9px; border:none;
  cursor:pointer; font-family:'Tajawal',sans-serif;
  font-size:13px; font-weight:700; transition:all .2s;
  display:inline-flex; align-items:center; gap:6px;
}
.btn-primary { background:var(--g); color:white; }
.btn-primary:hover { background:var(--gm); transform:translateY(-1px); box-shadow:0 4px 12px rgba(30,107,64,.3); }
.btn-gold { background:var(--gold); color:var(--gd); }
.btn-gold:hover { background:var(--gold-l); transform:translateY(-1px); }
.btn-outline { background:transparent; border:1.5px solid var(--g); color:var(--g); }
.btn-outline:hover { background:var(--g); color:white; }
.btn-red { background:#fde8e8; color:var(--red); border:1.5px solid var(--red); }
.btn-red:hover { background:var(--red); color:white; }
.btn-ghost { background:rgba(30,107,64,.08); color:var(--g); }
.btn-ghost:hover { background:rgba(30,107,64,.15); }
.btn-sm { padding:5px 12px; font-size:12px; border-radius:7px; gap:4px; }
.btn-lg { padding:12px 28px; font-size:15px; }

/* ═══════════ CARDS ═══════════ */
.card {
  background:var(--ww); border-radius:var(--radius);
  padding:22px; border:1px solid rgba(30,107,64,.09);
  box-shadow:var(--shadow); margin-bottom:18px;
}
.card-hd {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.card-title { font-size:15px; font-weight:800; color:var(--gd); display:flex; align-items:center; gap:8px; }
.card-title::before {
  content:''; width:4px; height:18px;
  background:var(--gold-l); border-radius:2px; flex-shrink:0;
}

/* ═══════════ BADGES ═══════════ */
.badge {
  display:inline-flex; align-items:center;
  padding:3px 10px; border-radius:20px;
  font-size:11px; font-weight:700;
}
.b-green { background:#e3f4ea; color:#1a5c35; }
.b-gold  { background:var(--gold-p); color:#7a5800; }
.b-red   { background:#fde8e8; color:var(--red); }
.b-blue  { background:#e3eeff; color:#1a3a8a; }
.b-purple{ background:#f0e6ff; color:var(--purple); }
.b-gray  { background:#f0f0ee; color:#555; }
.b-building{ background:#e3f4ea; color:#1a5c35; }
.b-review  { background:#e3eeff; color:#1a3a8a; }
.b-mastery { background:#f0e6ff; color:var(--purple); }

/* ═══════════ TABLE ═══════════ */
.tbl { width:100%; border-collapse:collapse; font-size:13px; }
.tbl thead tr { background:var(--gd); }
.tbl thead th { color:white; padding:10px 13px; text-align:right; font-size:12px; font-weight:600; }
.tbl thead th:first-child { border-radius:0 8px 8px 0; }
.tbl thead th:last-child  { border-radius:8px 0 0 8px; }
.tbl tbody tr { border-bottom:1px solid rgba(30,107,64,.07); transition:background .15s; }
.tbl tbody tr:hover { background:rgba(30,107,64,.03); }
.tbl tbody td { padding:10px 13px; color:var(--mid); }

/* ═══════════ PBAR ═══════════ */
.pbar { height:7px; background:#e0ebe3; border-radius:4px; overflow:hidden; }
.pfill { height:100%; background:linear-gradient(90deg,var(--g),var(--glt)); border-radius:4px; transition:width .6s ease; }
.pfill.gold { background:linear-gradient(90deg,var(--gold),var(--gold-l)); }

/* ═══════════ FORMS ═══════════ */
.fg  { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fg3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.fg1 { display:grid; grid-template-columns:1fr; gap:14px; }
.fi  { display:flex; flex-direction:column; gap:5px; }
.fi.full { grid-column:1/-1; }
.fi label { font-size:12px; font-weight:700; color:var(--gd); }
.fi input, .fi select, .fi textarea {
  padding:9px 12px; border:1.5px solid #d8e8d0;
  border-radius:8px; font-family:'Tajawal',sans-serif;
  font-size:13px; background:white; color:var(--ink);
  transition:all .2s; outline:none;
}
.fi input:focus, .fi select:focus, .fi textarea:focus {
  border-color:var(--g); box-shadow:0 0 0 3px rgba(30,107,64,.1);
}
.fi textarea { resize:vertical; min-height:78px; }
.fsec {
  font-size:14px; font-weight:800; color:var(--gd);
  padding:13px 0 10px;
  border-bottom:2px solid var(--gold);
  margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}

/* ═══════════ MODAL ═══════════ */
.modal-ov {
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  z-index:500; display:none; align-items:center; justify-content:center;
  backdrop-filter:blur(3px);
}
.modal-ov.open { display:flex; }
.modal {
  background:var(--ww); border-radius:18px; padding:26px;
  width:92%; max-width:620px; max-height:90vh; overflow-y:auto;
  box-shadow:0 24px 80px rgba(0,0,0,.28);
  animation:modalIn .28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalIn { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
.modal-hd {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px;
}
.modal-title { font-size:17px; font-weight:800; color:var(--gd); font-family:'Amiri',serif; }
.modal-close {
  width:30px; height:30px; border-radius:50%;
  border:none; background:#f0f0ee; cursor:pointer;
  font-size:15px; display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.modal-close:hover { background:#e0e0dd; }

/* ═══════════ TOAST ═══════════ */
.toast {
  position:fixed; bottom:28px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--gd); color:white;
  padding:11px 24px; border-radius:10px;
  font-size:14px; font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  transition:all .35s cubic-bezier(.34,1.56,.64,1);
  opacity:0; z-index:999; white-space:nowrap;
}
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }

/* ═══════════ ORNAMENT ═══════════ */
.orn {
  text-align:center; font-family:'Amiri',serif;
  font-size:17px; color:var(--gold); letter-spacing:5px;
  padding:6px 0; margin:4px 0;
}

/* ═══════════════════════════════════════════════════════