/* بصمة مدار — هوية الموقع (أسود عميق + أزرق ملكي). خطوط النظام فقط. والختم المطبوع في الأسفل (@media print). */
/* الخط العربي (IBM Plex Sans Arabic, OFL) — للحروف العربية فقط؛ الإنجليزي يبقى بخط النظام. */
@font-face { font-family: "Madar Arabic"; src: url("fonts/IBMPlexSansArabic-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; 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; }
@font-face { font-family: "Madar Arabic"; src: url("fonts/IBMPlexSansArabic-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; 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; }
@font-face { font-family: "Madar Arabic"; src: url("fonts/IBMPlexSansArabic-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; 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; }
:root {
  --bg: #030407; --bg-2: #07090f; --panel: #0a0e17; --field: #060912;
  --line: rgba(110, 140, 220, 0.14); --line-2: rgba(110, 140, 220, 0.28);
  --text: #eef3fc; --muted: #8e9ab0; --blue: #3d7bff; --indigo: #1d4ed8; --teal: #5aa9ff;
  --good: #34d399; --warn: #fbbf24; --bad: #f87171;
  --grad: linear-gradient(120deg, #7cc0ff, var(--blue) 50%, var(--indigo));
  --font: "Madar Arabic", "Segoe UI", system-ui, -apple-system, Tahoma, "Noto Sans Arabic", "Geeza Pro", sans-serif;
  --mono: Consolas, "Cascadia Mono", monospace;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(1000px, 100% - 32px); margin: 0 auto; }

.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(900px 520px at 80% -10%, rgba(29, 78, 216, .30), transparent 60%),
              radial-gradient(700px 480px at -10% 35%, rgba(61, 123, 255, .10), transparent 60%),
              radial-gradient(900px 600px at 50% 115%, rgba(29, 78, 216, .16), transparent 60%), var(--bg); }
.sky::before, .sky::after { content: ""; position: absolute; border: 1px solid rgba(120, 160, 255, .10); border-radius: 50%; animation: drift 40s linear infinite; }
.sky::before { width: 1100px; height: 420px; top: 90px; right: -320px; transform: rotate(-18deg); }
.sky::after { width: 1500px; height: 560px; top: 40px; right: -520px; border-color: rgba(90, 169, 255, .06); animation-duration: 60s; animation-direction: reverse; }
@keyframes drift { from { transform: rotate(-18deg); } to { transform: rotate(342deg); } }

header { position: sticky; top: 0; z-index: 5; backdrop-filter: blur(14px); background: rgba(6, 10, 19, .72); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; }
.brand img { width: 32px; height: 32px; }
.beta { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--teal); border: 1px solid rgba(90, 169, 255, .4); background: rgba(61, 123, 255, .1); border-radius: 999px; padding: 1px 7px; }
.links { display: flex; gap: 4px; }
.links a { color: var(--muted); padding: 7px 12px; border-radius: 10px; font-size: 14px; }
.links a:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.pill { border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); border-radius: 999px; padding: 7px 14px; font-size: 14px; }

.hero { text-align: center; padding: 44px 0 20px; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--muted); font-size: 13px; }
.live-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); } 70% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
h1 { font-size: clamp(28px, 4.6vw, 46px); line-height: 1.25; margin: 16px 0 10px; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { color: var(--muted); max-width: 640px; margin: 0 auto; }

.card { width: min(620px, 100%); margin: 16px auto 0; padding: 18px; border-radius: 24px; border: 1px solid transparent;
  background: linear-gradient(var(--panel), var(--panel)) padding-box, linear-gradient(140deg, rgba(124, 192, 255, .55), rgba(29, 78, 216, .12) 45%, rgba(90, 169, 255, .45)) border-box;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(29, 78, 216, .18); }
.tabs { display: flex; background: var(--field); border-radius: 14px; padding: 4px; margin-bottom: 14px; }
.tabs button { flex: 1; border: 0; background: transparent; border-radius: 10px; padding: 9px; color: var(--muted); font-weight: 600; }
.tabs button.on { background: linear-gradient(120deg, var(--indigo), var(--blue)); color: #fff; }
.drop { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 28px 12px; border: 1.5px dashed rgba(90, 169, 255, .45); border-radius: 18px; background: rgba(61, 123, 255, .05); cursor: pointer; transition: background .2s, border-color .2s; }
.drop:hover, .drop.over { background: rgba(61, 123, 255, .1); border-color: rgba(90, 169, 255, .8); }
.drop-ico { font-size: 26px; color: var(--teal); }
.drop small { color: var(--muted); }
.filebox { margin-top: 12px; background: var(--field); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; }
.fi-row { display: flex; gap: 10px; align-items: center; }
.fi-row b { display: block; word-break: break-all; }
.fi-row small, .fp small { color: var(--muted); }
.fp { margin-top: 8px; }
.fp code, .mono { font-family: var(--mono); direction: ltr; unicode-bidi: isolate; color: var(--teal); font-size: 12.5px; word-break: break-all; display: block; }
.step { margin-top: 14px; }
.lbl { display: block; font-weight: 600; margin: 14px 0 6px; }
.lbl small, .hint { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.hint { display: block; margin-top: 4px; }
input#nameIn, .mono-in { width: 100%; background: var(--field); border: 1px solid var(--line-2); border-radius: 12px; color: var(--text); padding: 11px 13px; font: inherit; outline: 0; }
.mono-in { margin-top: 10px; font-family: var(--mono); font-size: 13px; }
input:focus { border-color: rgba(90, 169, 255, .6); }
.choices { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.choices button { flex: 1; min-width: 120px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line-2); background: var(--field); border-radius: 12px; padding: 10px; transition: all .15s; }
.choices button.on { border-color: var(--blue); background: rgba(61, 123, 255, .14); }
.dot { width: 10px; height: 10px; border-radius: 50%; } .dot.evm { background: #f6851b; } .dot.sol { background: linear-gradient(135deg, #14f195, #9945ff); }
.wallet-on { margin-top: 8px; font-size: 13px; color: var(--good); }
.main-btn { width: 100%; margin-top: 16px; border: 0; border-radius: 16px; padding: 15px; font-size: 16.5px; font-weight: 700; color: #fff; background: linear-gradient(120deg, var(--indigo), var(--blue)); box-shadow: 0 10px 30px rgba(29, 78, 216, .35); }
.main-btn:disabled { background: #141b2b; color: var(--muted); box-shadow: none; cursor: not-allowed; }
.main-btn.ghost { background: transparent; border: 1px solid var(--line-2); box-shadow: none; }
.msg { margin-top: 10px; text-align: center; font-size: 13.5px; min-height: 18px; }
.msg.err { color: var(--bad); } .msg.ok { color: var(--good); }
.result { margin-top: 12px; border: 1px solid rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .06); border-radius: 16px; padding: 14px; }
.result.bad { border-color: rgba(248, 113, 113, .35); background: rgba(248, 113, 113, .06); }
.result h3 { margin: 0 0 8px; font-size: 16px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.kv:last-child { border-bottom: 0; }
.kv span:first-child { color: var(--muted); white-space: nowrap; }
.kv span:last-child { text-align: end; word-break: break-all; }
.row-btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.row-btns button { flex: 1; min-width: 140px; }
.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .25); border-top-color: var(--teal); border-radius: 50%; animation: sp 1s linear infinite; vertical-align: -2px; margin-inline-end: 6px; }
@keyframes sp { to { transform: rotate(360deg); } }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; }
.features article { background: rgba(10, 14, 23, .7); border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
.ico { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--teal); background: rgba(61, 123, 255, .12); border: 1px solid rgba(90, 169, 255, .25); font-size: 18px; }
.features h3 { font-size: 16px; margin: 12px 0 4px; }
.features p { color: var(--muted); font-size: 13.5px; margin: 0; line-height: 1.8; }
.scope { color: var(--muted); font-size: 12.5px; text-align: center; max-width: 720px; margin: 28px auto 50px; line-height: 1.9; }
footer { border-top: 1px solid var(--line); background: rgba(6, 10, 19, .6); }
.foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 0; color: var(--muted); font-size: 12.5px; }
.foot-links { display: flex; gap: 16px; }

@media (max-width: 760px) { .links { display: none; } .features { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }

/* ---------- الختم المطبوع ---------- */
.receipt { display: none; direction: ltr; }
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; }
  .no-print, .sky { display: none !important; }
  .receipt { display: block; }
}
.rc { direction: ltr; width: 210mm; height: 297mm; position: relative; background: #fff; overflow: hidden; color: #0b1730; font-family: "Segoe UI", Tahoma, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rc .bg { position: absolute; inset: 0; background: radial-gradient(120mm 90mm at 90% 6%, rgba(61,123,255,.10), transparent 70%), radial-gradient(110mm 80mm at 8% 96%, rgba(29,78,216,.08), transparent 70%); }
.rc .orb { position: absolute; width: 280mm; height: 95mm; border: .35mm solid rgba(61,123,255,.10); border-radius: 50%; top: 120mm; left: -35mm; transform: rotate(-14deg); }
.rc .frame { position: absolute; inset: 9mm; border: 1mm solid #1d4ed8; border-radius: 6mm; }
.rc .frame2 { position: absolute; inset: 11mm; border: .25mm solid #b9cdf5; border-radius: 4.5mm; }
.rc .top { position: absolute; top: 16mm; right: 17mm; left: 17mm; display: flex; justify-content: space-between; align-items: center; direction: ltr; }
.rc .rbrand { display: flex; align-items: center; gap: 2.5mm; } .rc .rbrand img { width: 12mm; height: 12mm; }
.rc .rbrand div { font-size: 4.4mm; letter-spacing: .6mm; font-weight: 800; } .rc .rbrand span { color: #1d6fe0; }
.rc .rid { font-family: Consolas, monospace; font-size: 3.1mm; color: #5b6680; text-align: right; line-height: 1.5; } .rc .rid b { color: #1d4ed8; font-size: 3.6mm; }
.rc .in { position: relative; padding: 31mm 17mm 0; }
.rc .rmono { font-family: Consolas, monospace; direction: ltr; unicode-bidi: isolate; font-size: 3.1mm; color: #1d4ed8; word-break: break-all; }
.rc .ar { direction: rtl; text-align: right; } .rc .en { direction: ltr; text-align: left; }
.rc .two { display: flex; gap: 8mm; } .rc .two > div { flex: 1; }
.rc .ttl { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: .4mm solid #1d4ed8; padding-bottom: 2.5mm; }
.rc .ttl .ar { font-size: 11mm; font-weight: 800; line-height: 1.2; } .rc .ttl .en { font-size: 9mm; font-weight: 800; line-height: 1.2; }
.rc .ttl.solo { justify-content: center; } .rc .ttl.solo div { font-size: 13mm; text-align: center; }
.rc .lead2 { margin-top: 4.5mm; font-size: 3.5mm; line-height: 1.85; color: #33405c; } .rc .lead2 b { color: #0b1730; }
.rc .solo-lead { font-size: 4.2mm; text-align: center; width: 160mm; margin-left: auto; margin-right: auto; }
.rc .box { margin-top: 5mm; border: .3mm solid #c9d7f5; border-radius: 4mm; background: rgba(244,247,255,.85); overflow: hidden; }
.rc .box .h { background: #0b1730; color: #fff; font-size: 3.4mm; font-weight: 700; padding: 2.2mm 5mm; display: flex; justify-content: space-between; }
.rc .r { display: grid; grid-template-columns: 40mm 1fr 40mm; align-items: center; padding: 2.3mm 5mm; border-bottom: .25mm solid #dbe5fa; font-size: 3.4mm; gap: 3mm; }
.rc .r.s2 { grid-template-columns: 48mm 1fr; }
.rc .r:last-child { border-bottom: 0; }
.rc .r .lab { color: #33405c; font-weight: 600; } .rc .r .v { text-align: center; font-weight: 600; }
.rc .r small { display: block; font-weight: 400; color: #8a96b0; font-size: 2.7mm; }
.rc .feat { display: flex; gap: 3.5mm; margin-top: 4.5mm; }
.rc .feat > div { flex: 1; border: .3mm solid #dbe5fa; border-radius: 3.5mm; padding: 2.6mm 3mm; background: #fff; }
.rc .feat b { display: block; font-size: 3.3mm; } .rc .feat p { margin: .5mm 0 0; font-size: 2.75mm; color: #5b6680; line-height: 1.55; }
.rc .feat .ar + .en, .rc .feat .en + .ar { margin-top: 1.6mm; padding-top: 1.4mm; border-top: .25mm dashed #dbe5fa; }
.rc .bottom { display: flex; align-items: center; gap: 6mm; margin-top: 4.5mm; }
.rc .qr { width: 25mm; height: 25mm; padding: 1.8mm; border: .3mm solid #c9d7f5; border-radius: 3mm; background: #fff; flex: none; } .rc .qr img { width: 100%; height: 100%; image-rendering: pixelated; }
.rc .vf { flex: 1; font-size: 3.05mm; color: #33405c; line-height: 1.75; } .rc .vf b { font-size: 3.5mm; color: #0b1730; } .rc .vf a { color: #1d4ed8; font-weight: 700; }
.rc .note { position: absolute; bottom: 20.5mm; left: 17mm; right: 17mm; border-top: .3mm solid #dbe5fa; padding-top: 2.2mm; font-size: 2.65mm; line-height: 1.7; color: #5b6680; }
.rc .note b { color: #33405c; }
.rc .foot2 { position: absolute; bottom: 14.5mm; left: 19mm; right: 19mm; display: flex; justify-content: space-between; font-size: 2.8mm; color: #8a96b0; direction: ltr; }
.rc.solo .in { padding-top: 34mm; } .rc.solo .r { padding: 3.4mm 6mm; font-size: 3.9mm; } .rc.solo .feat { margin-top: 6mm; }
.rc.solo .feat b { font-size: 3.9mm; } .rc.solo .feat p { font-size: 3.2mm; } .rc.solo .bottom { margin-top: 6mm; } .rc.solo .qr { width: 30mm; height: 30mm; }
.rc.solo .vf { font-size: 3.6mm; } .rc.solo .note { font-size: 3mm; }