
:root{
  --blue-900:#071F7A; --blue-700:#0B2FB0; --blue-600:#0E45D0; --blue-500:#0A6BE0; --blue-400:#0A8CE8;
  --ice-50:#F4F9FF; --ice-100:#EAF4FF; --ice-200:#D6E9FF;
  --ink:#0B1B3F; --ink-2:#44527A; --ink-3:#7C88A8; --line:#DCE6F5;
  --ok:#0FA968; --ok-bg:#E3F7EE; --warn:#E08A00; --warn-bg:#FFF3DC; --bad:#D9363E; --bad-bg:#FDE8E9;
  --off:#9AA4BC; --off-bg:#EEF1F6; --wa:#1FAF54;
  --grad:linear-gradient(135deg,#0B2FB0 0%,#0E45D0 45%,#0A8CE8 100%);
  --r-s:10px; --r-m:16px; --r-l:24px;
  --shadow:0 10px 30px -12px rgba(11,47,176,.25);
  --shadow-s:0 2px 10px -4px rgba(11,27,63,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{direction:rtl}
body{font-family:Cairo,system-ui,sans-serif;color:var(--ink);background:var(--ice-50);line-height:1.7;-webkit-font-smoothing:antialiased}
.num{font-family:Cairo,sans-serif;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
.display{font-family:Lalezar,Cairo,sans-serif;font-weight:400;letter-spacing:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:16px;border-radius:999px;padding:13px 26px;transition:.2s}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--shadow)}
.btn-white{background:#fff;color:var(--blue-700)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.5);color:#fff}
.btn-wa{background:var(--wa);color:#fff}
.icon{width:20px;height:20px;flex:none}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;border-radius:999px;padding:3px 12px}
.pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)} .pill.off{background:var(--off-bg);color:var(--ink-3)}
.pill.blue{background:var(--ice-100);color:var(--blue-700)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-s)}

.icon{display:inline-block}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
