/* Cairo variable font (wght 400–800), self-hosted — CSP blocks font CDNs */
@font-face{
  font-family:"Cairo"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("fonts/cairo-arabic.woff2") format("woff2");
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face{
  font-family:"Cairo"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("fonts/cairo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --brand:#122c52; --brand-d:#0d2140; --ink:#1a2330; --muted:#6b7686;
  --ok:#1f6b3b; --abs:#c78a00; --rep:#b3261e; --line:#e3e8ef; --bg:#eef2f7;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; font-family:"Cairo","Segoe UI","Noto Naskh Arabic",Tahoma,sans-serif;
  color:var(--ink); background:linear-gradient(160deg,#dbe6f2,#eef2f7 60%);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.card{
  width:100%; max-width:420px; background:#fff; border:1px solid var(--line);
  border-radius:18px; box-shadow:0 18px 50px rgba(15,76,129,.14); overflow:hidden;
}
.brand{ text-align:center; padding:26px 24px 8px; }
.logo-img{
  width:88px; height:88px; margin:0 auto 10px; display:block; object-fit:cover;
  border-radius:22px; box-shadow:0 6px 16px rgba(15,43,77,.35);
}
.logo{
  width:56px; height:56px; margin:0 auto 10px; border-radius:14px; color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-d));
  display:flex; align-items:center; justify-content:center; font-weight:800;
  letter-spacing:1px; font-size:18px; box-shadow:0 6px 16px rgba(15,76,129,.35);
}
.brand h1{ margin:0; font-size:22px; color:var(--brand); }
.tag{ margin:4px 0 0; color:var(--muted); font-size:13px; }
.panel{ padding:18px 24px 22px; }
label{ display:block; font-size:13px; font-weight:600; margin-bottom:8px; }
input{
  width:100%; padding:13px 14px; font-size:18px; text-align:center;
  letter-spacing:3px; font-family:"Courier New",monospace; text-transform:uppercase;
  border:1.5px solid var(--line); border-radius:12px; outline:none; direction:ltr;
}
input::placeholder{
  font-family:"Cairo","Segoe UI","Noto Naskh Arabic",Tahoma,sans-serif;
  letter-spacing:0; text-transform:none; direction:rtl; font-size:15px; color:var(--muted);
}
input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(15,76,129,.12); }
button{
  width:100%; margin-top:14px; padding:13px; font-size:16px; font-weight:700;
  color:#fff; background:var(--brand); border:0; border-radius:12px; cursor:pointer;
}
button:hover{ background:var(--brand-d); }
button:disabled{ opacity:.6; cursor:progress; }
button.ghost{ margin-top:18px; background:#f3f5f8; color:var(--muted); }
button.ghost:hover{ background:#e9edf2; }
.hint{ color:var(--muted); font-size:12px; margin:12px 0 0; text-align:center; }
.error{
  margin:12px 0 0; padding:10px 12px; background:#fdecea; color:#b3261e;
  border:1px solid #f5c6c0; border-radius:10px; font-size:13px; text-align:center;
}
.result-head{ text-align:center; }
.badge{
  display:inline-block; padding:4px 14px; border-radius:999px; font-size:13px;
  font-weight:700; margin-bottom:8px;
}
.badge.ok{ background:#e6f4ec; color:var(--ok); }
.badge.abs{ background:#fbf3e0; color:var(--abs); }
.badge.rep{ background:#fdecea; color:var(--rep); }
#name{ margin:0; font-size:20px; }
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0 6px; }
.stat{ background:#f6f8fb; border:1px solid var(--line); border-radius:12px; padding:14px; text-align:center; }
.stat .lbl{ font-size:12px; color:var(--muted); margin-bottom:4px; }
.stat .val{ font-size:22px; font-weight:800; }
.download{
  display:block; margin-top:16px; padding:14px; text-align:center; text-decoration:none;
  font-weight:700; color:#fff; background:var(--ok); border-radius:12px;
}
.download:hover{ filter:brightness(.95); }
.foot{ text-align:center; padding:14px; font-size:11px; color:var(--muted); border-top:1px solid var(--line); }