/* =============== أساسيات =============== */
:root{
  --brand:#2563eb;
  --brand-600:#1d4ed8;
  --danger:#e11d48;
  --muted:#6b7280;
  --bg:#f9fafb;
  --card:#ffffff;
  --line:#e5e7eb;
  --radius:12px;
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
}

body{
  font-family:'Tajawal', Arial, sans-serif;
  margin:0;
  color:#333;
  background:var(--bg);
}

/* =============== حاوية عامة =============== */
.container{
  width:min(1200px, 96%);
  margin-inline:auto;
}

/* =============== الترويسة =============== */
.topbar{
  background:var(--card);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}

.topbar .container{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 4px;
}

.brand{ display:flex; align-items:center; gap:10px; }
.brand .logo{
  color:var(--brand); font-weight:700; text-decoration:none; font-size:20px;
}
.brand .subtitle{ color:var(--muted); font-size:14px; }
.brand .divider{ color:var(--line); }

/* =============== الروابط العلوية =============== */
.nav{ display:flex; align-items:center; gap:10px; }
.nav .welcome{ color:#111; font-weight:500; padding-inline:6px; }
.nav .nav-link{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--brand); color:#fff !important; text-decoration:none;
  border-radius:8px; padding:8px 12px; font-size:14px; transition:.2s;
}
.nav .nav-link:hover{ background:var(--brand-600); }
.nav .nav-link.danger{ background:var(--danger); }
.nav .nav-link.danger:hover{ filter:brightness(.95); }

/* =============== هيكل الصفحة =============== */
.page-wrap{ padding:20px 6px; }

/* =============== البطاقات (اختياري) =============== */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; margin-block:10px;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}

/* =============== الأزرار =============== */
button, .btn{
  background:var(--brand); color:#fff !important; border:none;
  padding:10px 14px; border-radius:10px; font-size:14px; cursor:pointer;
  transition:.2s; text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
button:hover, .btn:hover{ background:var(--brand-600); }
.btn.muted{ background:#e5e7eb; color:#111 !important; }
.btn.muted:hover{ background:#d1d5db; }
.btn.danger{ background:var(--danger); }
.btn.danger:hover{ filter:brightness(.95); }

/* أزرار صغيرة */
.btn.sm, button.sm{ padding:6px 10px; font-size:13px; border-radius:8px; }

/* =============== الجداول =============== */
table{
  width:100%; border-collapse:separate; border-spacing:0; background:var(--card);
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  margin-block:14px;
}
table thead th{
  background:#f1f5f9; font-weight:700; color:#111; padding:12px; border-bottom:1px solid var(--line);
}
table td{ padding:12px; border-bottom:1px solid var(--line); }
table tr:last-child td{ border-bottom:none; }
table tr:nth-child(even) td{ background:#fcfcfd; }

/* لو عندك <table class="table"> سيظهر بنفس النمط (اختياري) */
.table{}

/* =============== الحقول =============== */
input[type="text"], input[type="number"], input[type="email"],
select, textarea{
  width:100%; padding:10px; border:1px solid var(--line); border-radius:10px;
  background:#fff; font-size:14px; transition:.15s; outline:none;
}
input:focus, select:focus, textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(37,99,235,.15); }

/* صندوق روابط (لـ رابط الطلاب مثلاً) */
.link-box{
  width:100%; font-family:monospace; background:#f1f5f9; border:1px dashed #cbd5e1;
  padding:8px; border-radius:8px; color:#111;
}

/* تقسيم الشبكات الخفيفة */
.grid{
  display:grid; gap:12px;
}
.grid.two{ grid-template-columns:repeat(2, 1fr); }
.grid.three{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:900px){ .grid.two, .grid.three{ grid-template-columns:1fr; } }

/* =============== فاصل الإجابات النموذجية =============== */
.model-answer .model-block{
  background:#fafafa; border:1px solid #eee; border-radius:10px;
  padding:10px 12px; margin-block:8px; line-height:1.9;
}

/* =============== الفوتر =============== */
.footer{
  margin-top:20px; text-align:center; padding:16px; color:var(--muted);
  background:#f1f5f9; border-top:1px solid var(--line);
}