:root{
  --teal:#14B0A2; --deep-teal:#0A6D63; --wave:#7FD5CC; --mist:#C9EFEB; --foam:#E6F7F5; --abyss:#053D37;
  --coral:#ED8B6A; --rust:#C25F3F; --glow:#F8C2A8; --blush:#FBE0D2;
  --lemon:#FFCE3E; --signal:#D63E2A;
  --ink:#15192A; --slate:#5C6B7A; --stone:#B7BFC8; --smoke:#EAE4D4; --cream:#F5ECDC; --paper:#FBF5E7;

  --bg:#F1F1F1; --surface:#FFFFFF; --surface-2:var(--paper);
  --border:var(--smoke); --border-h:#D9D0BC;
  --txt:var(--ink); --txt-2:#2B3145; --muted:var(--slate);
  --hero:var(--teal); --hero-tile:rgba(255,255,255,.14); --hero-tile-b:rgba(255,255,255,.24);
  --chip-bg:var(--foam); --chip-txt:var(--deep-teal); --chip-brd:var(--teal);
  --tag-bg:var(--mist); --tag-txt:var(--deep-teal);
  --accent:var(--teal); --accent-h:var(--deep-teal);
  --focus:var(--deep-teal);
  --st-active-c:var(--deep-teal); --st-active-bg:var(--mist);
  --st-exp-c:var(--signal); --st-exp-bg:rgba(214,62,42,.11);

  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px;
  --sh-sm:0 1px 2px rgba(21,25,42,.05);
  --sh-md:0 4px 12px rgba(21,25,42,.06);
  --sh-lg:0 12px 32px rgba(21,25,42,.10);
  --t:.2s cubic-bezier(.4,0,.2,1); --t-slow:.4s cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"]{
  --bg:#101423; --surface:#1B2134; --surface-2:#212842;
  --border:rgba(255,255,255,.10); --border-h:rgba(255,255,255,.22);
  --txt:#F3EEE2; --txt-2:#DCD8CB; --muted:#98A1B4;
  --hero:var(--deep-teal); --hero-tile:rgba(255,255,255,.10); --hero-tile-b:rgba(255,255,255,.18);
  --chip-bg:rgba(20,176,162,.13); --chip-txt:var(--wave); --chip-brd:rgba(20,176,162,.55);
  --tag-bg:rgba(20,176,162,.16); --tag-txt:var(--wave);
  --accent:var(--wave); --accent-h:var(--mist);
  --focus:var(--wave);
  --st-active-c:var(--wave); --st-active-bg:rgba(20,176,162,.16);
  --st-exp-c:#F0857A; --st-exp-bg:rgba(214,62,42,.16);
  --sh-sm:0 1px 2px rgba(0,0,0,.3);
  --sh-md:0 4px 14px rgba(0,0,0,.35);
  --sh-lg:0 14px 36px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--txt);
  font-family:"DIN Next LT Arabic","Cairo",system-ui,sans-serif;line-height:1.55;
  overflow-x:hidden;transition:background-color var(--t),color var(--t)}
.num{font-family:"Manrope","DIN Next LT Arabic","Cairo",sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.cur{font-size:.72em;font-weight:600;opacity:.72;margin-inline-start:2px}
.muted{color:var(--muted)}
.ltr{direction:ltr;unicode-bidi:isolate}

.app{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 22px 56px}
.topbar{display:flex;align-items:center;gap:14px;padding:18px 2px 20px;position:sticky;top:0;z-index:20;
  direction:ltr; /* logo pinned visual-left, toggle visual-right, regardless of RTL page */
  background:linear-gradient(180deg,var(--bg) 68%,transparent);backdrop-filter:blur(4px)}
.brand{display:flex;align-items:center;gap:12px;color:var(--txt)}
.brand .lockup{height:34px;width:auto;display:block}
.spacer{flex:1}
.theme-toggle{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:999px;cursor:pointer;
  border:1px solid var(--border);background:var(--surface);color:var(--muted);box-shadow:var(--sh-sm);transition:all var(--t)}
.theme-toggle:hover{border-color:var(--border-h);color:var(--txt)}
.theme-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.theme-toggle .sun{display:none}
[data-theme="dark"] .theme-toggle .sun{display:block}
[data-theme="dark"] .theme-toggle .moon{display:none}
:is(button,a):focus-visible{outline:2px solid var(--focus);outline-offset:2px}

section{margin-top:28px}
.sec-head{display:flex;align-items:baseline;gap:12px;margin:0 2px 14px}
.sec-head h2{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:700;margin:0}
.sec-head h2::before{content:"";width:8px;height:8px;border-radius:2.5px;background:var(--teal);flex-shrink:0}
.sec-head .count{font-size:12.5px;color:var(--muted);font-weight:500}
.sec-head .reset{margin-inline-start:auto}

.reset{font-family:inherit;font-size:12px;font-weight:700;color:var(--txt-2);cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 14px;box-shadow:var(--sh-sm);transition:all var(--t)}
.reset:hover{border-color:var(--border-h);color:var(--txt)}
.reset.hidden{display:none}

.foot{margin-top:44px;padding-top:22px;border-top:1px solid var(--border);display:flex;justify-content:center}
.foot .slogan{font-size:13.5px;font-weight:500;color:var(--muted)}
.foot .slogan em{font-style:italic;font-weight:700;color:var(--deep-teal)}
[data-theme="dark"] .foot .slogan em{color:var(--wave)}

@media(max-width:620px){.app{padding-inline:16px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}