/* مكاوي — رموز الهوية. الشعار: الكفّة. */
:root{
  /* اللوحة المقيسة */
  --stone:#ECE7DF;        /* حجرٌ منحوت — أرضية */
  --ink:#26262B;          /* فحميٌّ مُزرقّ — حبر · 12.24:1 */
  --bronze:#8C6239;       /* برونز — مساحاتٌ وخطوطٌ فقط · 4.35:1 */
  --bronze-ink:#7E5631;   /* البرونز العامل للنصّ · 5.23:1 */

  --card:#FFFFFF;
  --sink:#F6F3ED;
  --line:#E0D9CC;
  --line-soft:#EFEAE1;
  --muted:#6B6158;
  --ok:#2F6B4A;
  --warn:#8A5A12;
  --bad:#A5331B;

  --r-s:9px; --r:14px; --r-l:20px;
  --sp:clamp(16px,3vw,24px);
  --shadow:0 1px 2px rgba(38,38,43,.05), 0 8px 24px rgba(38,38,43,.06);
  --max:1180px;

  --f-mark:"Reem Kufi",serif;
  --f-head:"Alexandria",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-num:"Jost",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--stone);color:var(--ink);
  font-family:var(--f-body);font-weight:400;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:600;line-height:1.3;margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;display:block}
.num{font-family:var(--f-num);font-weight:500;font-variant-numeric:tabular-nums}
.mark-word{font-family:var(--f-mark);font-weight:600;line-height:1}

/* الشعار */
.mark{display:block;flex:none}
.mark path,.mark circle{fill:currentColor}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-head);font-weight:600;font-size:15px;
  padding:13px 24px;border:1px solid transparent;border-radius:var(--r-s);
  background:var(--ink);color:var(--stone);cursor:pointer;
  transition:transform .12s ease, opacity .12s ease;
}
.btn:hover{opacity:.9}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.bronze{background:var(--bronze-ink);color:#fff}
.btn.sm{padding:8px 15px;font-size:13.5px}
.btn.wide{width:100%}

.field{display:block;margin-bottom:14px}
.field > span{display:block;font-size:13.5px;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--card);outline:0;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--bronze-ink)}
.err{color:var(--bad);font-size:13.5px;margin:8px 0 0}
.ok-msg{color:var(--ok);font-size:13.5px;margin:8px 0 0}

.pill{
  display:inline-block;font-family:var(--f-head);font-weight:600;font-size:11.5px;
  padding:3px 10px;border-radius:999px;background:var(--sink);
  border:1px solid var(--line);white-space:nowrap;
}
.pill.ok{color:var(--ok);border-color:#BFD9C9;background:#EFF6F2}
.pill.warn{color:var(--warn);border-color:#E7D3AE;background:#FBF5E9}
.pill.bad{color:var(--bad);border-color:#E9C3B9;background:#FBEFEC}
.pill.live{color:var(--bronze-ink);border-color:#DFCBB4;background:#F8F0E6}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--bronze-ink);outline-offset:2px}