/* ============ MMEC theme: navy and gold, taken from the logo ============ */
:root {
  --navy-950:#0c1e31; --navy-900:#12293f; --navy-800:#17344f; --navy-700:#1c4670; --navy-500:#2f6a99; --navy-300:#8fb4d3;
  --sky-100:#e4eef6; --sky-50:#f3f7fb;
  --gold-600:#8a6b1f; --gold-500:#c39a3c; --gold-400:#d5b15a; --gold-300:#e6cb84; --gold-100:#faf1d9;
  --teal:#1f8c84; --ink:#17283a; --muted:#5a6b7c; --line:#d9e3ec; --card:#fff; --bg:#f3f7fb;
  --ok:#1e8e5a; --bad:#b3392f;
  --r-sm:8px; --r:14px; --r-lg:22px;
  --shadow-sm:0 1px 2px rgba(18,41,63,.06), 0 2px 8px rgba(18,41,63,.06);
  --shadow:0 4px 20px rgba(18,41,63,.12);
  /* names used by older pages */
  --green:var(--navy-700); --dark:var(--navy-900); --gold:var(--gold-500);
  --font-ar:"Cairo","Segoe UI",Tahoma,Arial,sans-serif;
  --font-body:"Nunito Sans","Segoe UI",Tahoma,Arial,sans-serif;
  --font-head:"Nunito Sans","Segoe UI",Tahoma,Arial,sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); line-height:1.6; font-size:16px; font-family:var(--font-body); -webkit-text-size-adjust:100%; }
html[lang="ar"] body { font-family:var(--font-ar); }
h1, h2, h3, h4 { line-height:1.25; color:var(--navy-900); }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3 { font-family:var(--font-head); font-weight:800; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 { font-family:var(--font-ar); font-weight:700; }
a { color:var(--navy-500); }
:focus-visible { outline:3px solid var(--gold-400); outline-offset:2px; border-radius:6px; }

/* ---------- header (the logo is added to every page by common.js) ---------- */
header { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:10px clamp(12px,3vw,28px); background:var(--navy-900); color:#fff; border-bottom:3px solid var(--gold-500); }
header.sticky { position:sticky; top:0; z-index:30; }
header h1 { margin:0; font-size:18px; color:#fff; }
header small { display:block; opacity:.8; font-size:12px; }
header .meta { color:#cfe0d9; }
.brand-link { display:inline-flex; flex:none; border-radius:50%; }
.brand-logo { width:48px; height:48px; border-radius:50%; box-shadow:0 0 0 2px var(--gold-500); display:block; background:#fff; }
.bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-inline-start:auto; }

/* ---------- buttons ---------- */
button, .btn { background:var(--navy-700); color:#fff; border:0; border-radius:10px; padding:10px 16px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; line-height:1.3; transition:background .15s, transform .15s, box-shadow .15s; }
button:hover, .btn:hover { background:var(--navy-800); }
button:active, .btn:active { transform:translateY(1px); }
.ghost, button.ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4); }
.ghost:hover, button.ghost:hover { background:rgba(255,255,255,.12); }
.gold, button.gold, .btn.gold { background:var(--gold-500); color:var(--navy-950); }
.gold:hover, button.gold:hover, .btn.gold:hover { background:var(--gold-400); }
button.light, .btn.light { background:var(--sky-100); color:var(--navy-800); }
button.light:hover, .btn.light:hover { background:#d4e4f1; }
button.danger { background:var(--bad); }
button.danger:hover { background:#962f27; }
button.active { background:var(--gold-500); color:var(--navy-950); }
button:disabled { opacity:.5; cursor:not-allowed; }
.big { padding:13px 22px; font-size:16px; border-radius:12px; }

/* ---------- layout and content blocks ---------- */
main { max-width:1040px; margin:0 auto; padding:18px clamp(12px,3vw,24px) 40px; }
.tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px; display:flex; flex-direction:column; gap:8px; box-shadow:var(--shadow-sm); }
.card h3 { margin:0; font-size:16px; }
.meta { font-size:13px; color:var(--muted); }
.badge { align-self:flex-start; font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px; }
.badge.free { background:var(--gold-100); color:var(--gold-600); }
.badge.lock { background:var(--sky-100); color:var(--navy-700); }
.msg { background:var(--gold-100); border:1px solid var(--gold-300); padding:12px 14px; border-radius:var(--r-sm); margin-bottom:14px; }
.box { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px; margin-bottom:16px; box-shadow:var(--shadow-sm); }
label { display:block; margin:12px 0 4px; font-size:14px; font-weight:600; color:var(--navy-800); }
input, select, textarea { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font:inherit; font-size:15px; background:var(--card); color:var(--ink); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--navy-500); box-shadow:0 0 0 3px rgba(47,106,153,.2); }
input[type=checkbox] { width:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; }
td, th { padding:9px 8px; border-bottom:1px solid var(--line); text-align:start; vertical-align:middle; }
th { color:var(--muted); font-weight:700; font-size:13px; }
dialog { border:0; border-radius:var(--r-lg); padding:24px; max-width:380px; width:92%; box-shadow:0 20px 60px rgba(12,30,49,.35); }
dialog::backdrop { background:rgba(12,30,49,.6); }
.dlg-head { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.dlg-head img { width:56px; height:56px; border-radius:50%; box-shadow:0 0 0 2px var(--gold-500); }
.dlg-head h3 { margin:0; }
.linklike { background:none; color:var(--navy-500); padding:4px 0; font-weight:600; text-decoration:underline; }
.linklike:hover { background:none; color:var(--navy-700); }
.logo-top { text-align:center; margin-bottom:8px; }
.logo-top img { width:112px; height:112px; border-radius:50%; box-shadow:0 0 0 3px var(--gold-500), 0 8px 24px rgba(18,41,63,.2); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition:none !important; animation:none !important; } }

/* beautiful Arabic name (Mr. Mostafa Mahgoub) */
html[lang="ar"] [data-t="center"] { font-family:"Aref Ruqaa","Cairo",serif; font-weight:700; }
html[lang="ar"] header small[data-t="center"] { font-size:18px; color:var(--gold-300); }
html[lang="ar"] .foot-inner strong { font-size:26px; color:var(--gold-300); }

/* night mode */
html[data-theme="dark"] { --bg:#0a1625; --card:#12263b; --ink:#e6eef6; --muted:#9fb4c7; --line:#25405a; --sky-100:#1b3550; --sky-50:#0f2033; --gold-100:#3a3016; --gold-600:#e3c06c; --navy-500:#6fa8d6; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4 { color:#eef4fa; }
html[data-theme="dark"] button.light, html[data-theme="dark"] .btn.light { color:#dbe8f3; }
html[data-theme="dark"] button.light:hover, html[data-theme="dark"] .btn.light:hover { background:#24476a; }
html[data-theme="dark"] .badge.lock, html[data-theme="dark"] .tag { color:#bcd3e6; }
html[data-theme="dark"] .msg { color:var(--ink); }
html[data-theme="dark"] .timerbar { background:var(--card); }
html[data-theme="dark"] .err { background:#3a1d1b; border-color:#7a3a35; color:#f2c9c5; }