:root{
  --green:#0b7a4b; --green-2:#0ea968; --ink:#0f172a; --muted:#64748b;
  --bg:#f4f7f6; --card:#ffffff; --line:#e6ece9; --ring:rgba(14,169,104,.28);
  --pass:#0ea968; --second:#e08a00; --fail:#dc2626; --absent:#64748b; --other:#475569;
  --shadow:0 10px 30px rgba(2,32,20,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Cairo',system-ui,'Segoe UI',Tahoma,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.wrap{width:min(920px,92vw); margin-inline:auto}

/* decorative background */
.bg-orbs{position:fixed; inset:0; z-index:-1; overflow:hidden}
.bg-orbs span{position:absolute; border-radius:50%; filter:blur(60px); opacity:.28}
.bg-orbs span:nth-child(1){width:420px;height:420px;background:#0ea968;top:-120px;right:-80px}
.bg-orbs span:nth-child(2){width:360px;height:360px;background:#22c55e;bottom:-140px;left:-100px;opacity:.18}
.bg-orbs span:nth-child(3){width:300px;height:300px;background:#0b7a4b;top:40%;left:60%;opacity:.10}

/* hero */
.hero{
  background:linear-gradient(135deg,var(--green) 0%,var(--green-2) 100%);
  color:#fff; padding:44px 0 60px; border-radius:0 0 34px 34px;
  box-shadow:0 18px 40px rgba(11,122,75,.28); position:relative;
}
.hero .badge{
  display:inline-block; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
  padding:5px 14px; border-radius:999px; font-size:13px; font-weight:600; margin-bottom:14px; backdrop-filter:blur(6px);
}
.hero h1{margin:0; font-size:clamp(28px,6vw,44px); font-weight:800; letter-spacing:-.5px}
.hero .sub{margin:8px 0 0; font-size:clamp(14px,3.4vw,18px); opacity:.95; font-weight:600}

/* search */
.search{display:flex; gap:10px; margin-top:26px; flex-wrap:wrap}
.field{
  flex:1 1 320px; display:flex; align-items:center; gap:10px; background:#fff;
  border-radius:16px; padding:0 14px; box-shadow:var(--shadow); min-height:60px; color:var(--ink);
}
.field .ico{width:22px;height:22px;color:var(--muted);flex:none}
.field input{
  flex:1; border:0; outline:0; background:transparent; font:inherit; font-size:18px; font-weight:600;
  color:var(--ink); padding:14px 0; min-width:0;
}
.field input::placeholder{color:#9aa6b2; font-weight:500}
.clear{border:0;background:#eef2f0;color:#64748b;width:30px;height:30px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;flex:none}
.go{
  border:0; background:#062e1f; color:#fff; font:inherit; font-weight:700; font-size:18px;
  padding:0 30px; border-radius:16px; cursor:pointer; min-height:60px; transition:transform .08s, background .2s;
}
.go:hover{background:#0a3d2a} .go:active{transform:scale(.98)}

.chips{display:flex; align-items:center; gap:8px; margin-top:16px; flex-wrap:wrap}
.chip-label{font-size:13px;opacity:.85}
.chip{
  border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.12); color:#fff;
  padding:6px 14px; border-radius:999px; font:inherit; font-size:13px; font-weight:600; cursor:pointer;
}
.chip:hover{background:rgba(255,255,255,.22)}
.notice{margin-top:16px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);padding:10px 14px;border-radius:12px;font-size:14px;font-weight:600}

/* status + results */
main.wrap{margin-top:-26px; position:relative; z-index:2; padding-bottom:40px}
.status{min-height:22px; margin:0 4px 14px; color:var(--muted); font-weight:600; font-size:15px}
.results{display:grid; gap:14px}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px 18px 16px;
  box-shadow:var(--shadow); animation:pop .25s ease both;
}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.card .name{font-size:clamp(18px,4.4vw,22px); font-weight:800; color:var(--ink)}
.pill{padding:6px 14px; border-radius:999px; font-weight:700; font-size:14px; white-space:nowrap; flex:none}
.pill.pass{background:#dcfce7;color:#087443}
.pill.second{background:#fff2d6;color:#a15c00}
.pill.fail{background:#fee2e2;color:#b91c1c}
.pill.absent{background:#eef2f6;color:#475569}
.pill.other{background:#eef2f6;color:#334155}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px}
.cell{background:#f7faf9; border:1px solid var(--line); border-radius:14px; padding:12px; text-align:center}
.cell .k{display:block; font-size:12px; color:var(--muted); font-weight:600; margin-bottom:4px}
.cell .v{display:block; font-size:clamp(18px,4.6vw,24px); font-weight:800; color:var(--ink)}
.cell.deg .v{color:var(--green)}
.cell .v small{font-size:13px;color:var(--muted);font-weight:600}

.bar{margin-top:14px; height:9px; background:#eef2f0; border-radius:999px; overflow:hidden}
.bar i{display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--green-2),var(--green)); transition:width .7s cubic-bezier(.2,.8,.2,1)}

.empty{text-align:center; padding:40px 16px; color:var(--muted)}
.empty svg{width:52px;height:52px;opacity:.5;margin-bottom:10px}
.empty b{display:block;color:var(--ink);font-size:18px;margin-bottom:4px}
.spinner{display:inline-block;width:18px;height:18px;border:3px solid #cbd5e1;border-top-color:var(--green);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-3px;margin-inline-start:6px}
@keyframes spin{to{transform:rotate(360deg)}}

/* footer */
.foot{padding:26px 0 40px; text-align:center; color:var(--muted)}
.foot .stat{font-size:15px} .foot .stat b{color:var(--green)}
.foot .tg{display:inline-flex; align-items:center; gap:8px; margin-top:14px; background:#229ed9; color:#fff;
  padding:11px 20px; border-radius:14px; text-decoration:none; font-weight:700; box-shadow:0 8px 20px rgba(34,158,217,.3)}
.foot .tg svg{width:20px;height:20px}
.foot .dis{margin-top:16px; font-size:12.5px; opacity:.8; max-width:520px; margin-inline:auto}

@media (max-width:520px){
  .grid{grid-template-columns:1fr 1fr} .cell.pct{grid-column:1 / -1}
  .go{flex:1 1 100%}
}

/* support / promo action buttons */
.action-bar{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:20px}
.act{display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:800;
  font-size:15px; padding:13px 22px; border-radius:15px; color:#fff; line-height:1.2;
  box-shadow:0 10px 24px rgba(2,32,20,.14); transition:transform .08s, filter .2s}
.act svg{width:22px; height:22px; flex:none}
.act:hover{filter:brightness(1.05)} .act:active{transform:scale(.98)}
.act-wa{background:#25d366}
.act-promo{background:linear-gradient(135deg,#128c7e 0%,#25d366 100%);
  box-shadow:0 10px 24px rgba(18,140,126,.32); position:relative}
@media (max-width:520px){ .action-bar .act{flex:1 1 100%; justify-content:center} }

/* ad slots */
.ad-slot{margin:16px auto 0; text-align:center; overflow:hidden}
.ad-slot.ad-top{margin-top:22px}
.ad-slot img{max-width:100%; height:auto; border-radius:14px}
.ad-slot iframe{max-width:100%; border:0}

/* registration gate */
.gate{position:fixed; inset:0; z-index:50; background:rgba(6,46,31,.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:18px; animation:fade .2s ease both}
.gate[hidden]{display:none !important}   /* respect the hidden attribute (author CSS otherwise overrides UA [hidden]) */
@keyframes fade{from{opacity:0}to{opacity:1}}
.gate-card{background:#fff; border-radius:22px; width:min(400px,94vw); padding:28px 24px; text-align:center;
  box-shadow:0 30px 70px rgba(0,0,0,.35); animation:pop .28s ease both}
.gate-emoji{font-size:46px; line-height:1}
.gate-card h2{margin:8px 0 4px; font-size:24px; font-weight:800}
.gate-card p{margin:0 0 18px; color:var(--muted); font-weight:600}
.gate-card input{width:100%; font:inherit; font-size:17px; font-weight:600; padding:14px 15px; margin-bottom:12px;
  border:1px solid var(--line); border-radius:14px; outline:0; background:#f8fbfa}
.gate-card input:focus{border-color:var(--green-2); box-shadow:0 0 0 4px var(--ring)}
.gate-card input[type=tel]{text-align:left}
.gate-go{width:100%; border:0; background:var(--green); color:#fff; font:inherit; font-weight:700; font-size:18px;
  padding:14px; border-radius:14px; cursor:pointer; transition:background .2s}
.gate-go:hover{background:#0a3d2a} .gate-go:disabled{background:#9db6ab;cursor:not-allowed}
.gate-err{background:#fee2e2; color:#b91c1c; padding:9px 12px; border-radius:11px; font-size:14px; font-weight:600; margin-bottom:12px}
.gate-note{margin-top:14px; font-size:12.5px; color:var(--muted)}