:root {
  --brand: #0b3954; --brand-2: #087e8b; --text:#111; --muted:#555; --bg:#fff;
  --card:#fff; --border:#eaeaea; --maxw:1100px; --radius:14px; --shadow:0 6px 18px rgba(0,0,0,.06);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Noto Sans", "Noto Naskh Arabic", Arial, sans-serif;
}
@media (prefers-color-scheme: dark){ :root{ --text:#e9e9e9; --muted:#b7b7b7; --bg:#0f1115; --card:#151922; --border:#242a36; } }
*{ box-sizing:border-box } html,body{ margin:0; padding:0 } body{ font-family:var(--font); color:var(--text); background:var(--bg); line-height:1.6 }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 16px }
.header,.footer{ background:var(--brand); color:#fff }
.header .row,.footer .row{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:12px }
.header a{ color:#fff; text-decoration:none } .header nav a{ margin-inline-end:14px } .header nav a:last-child{ margin-inline-end:0 }
.brand{ display:inline-flex; align-items:center; gap:12px } .brand img{ height:34px }
.lang{ display:flex; gap:8px; align-items:center; font-size:14px }
.lang button{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:4px 10px; cursor:pointer }
.lang button.active{ background:#fff; color:var(--brand); border-color:#fff }
.hero{ padding:36px 0 } .hero h1{ margin:0 0 8px; font-size:32px } .hero p.lead{ color:var(--muted); margin:0 }
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:16px }
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); text-decoration:none; color:inherit; display:block }
.card img{ width:100%; height:160px; object-fit:cover; border-radius:10px }
.card h3{ margin:10px 0 6px }
.badge{ display:inline-block; font-size:12px; background:rgba(8,126,139,.12); color:#0a7782; padding:4px 8px; border-radius:999px }
h1,h2,h3{ line-height:1.25 } .lead{ font-size:18px; color:var(--muted) } .prose p{ margin:0 0 12px } table{ width:100%; border-collapse:collapse } th,td{ border:1px solid var(--border); padding:8px; text-align:start }
input[type="search"],input[type="text"],input[type="email"],textarea,select{ width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--card); color:var(--text) }
button.primary{ background:var(--brand-2); color:#fff; border:none; padding:10px 16px; border-radius:10px; cursor:pointer } button.primary:hover{ opacity:.95 }
.footer .row{ padding:18px 0 } .footer p{ margin:0; font-size:14px; color:rgba(255,255,255,.85) }
html[dir="rtl"] .header nav a{ margin-inline-start:14px; margin-inline-end:0 } html[dir="rtl"] th,html[dir="rtl"] td{ text-align:start }