/* واجهة الزائر — منقولة من المرجع nashr.alrshad.net مع ربط الألوان بلون الحملة */
:root{
  --ink:#0E1116; --ink-2:#161B23; --ink-3:#232A34;
  --paper:#F8F5EF; --paper-2:#EFEAE0; --paper-edge:#DED6C7;
  --text:#1A1D23; --muted:#6B7280;
  --accent:#1F6F5C; --accent-deep:#144a3d; --accent-soft:#E4F0EC; --accent-ink:#1F6F5C;
  --glow:rgba(31,111,92,.18); --ring:rgba(31,111,92,.22); --hover:rgba(31,111,92,.07); --mark-text:#EAF5F1;
  --stamp:#B3261E; --gold:#C8A45D;
  --x:#0F1419; --wa:#1FA855; --fb:#1877F2;
  --shadow:0 1px 2px rgba(0,0,0,.18), 0 10px 30px -12px rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;
  background:var(--ink); color:var(--paper); min-height:100vh;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1200px 600px at 85% -10%, var(--glow), transparent 60%),
    radial-gradient(900px 500px at 5% 0%, rgba(200,164,93,.10), transparent 55%),
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:auto,auto,44px 44px,44px 44px;
}
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--ink) 85%, transparent);border-bottom:1px solid rgba(255,255,255,.07)}
.bar{max-width:1180px;margin:0 auto;padding:14px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;margin-inline-end:auto;min-width:0}
.mark{width:38px;height:38px;border-radius:11px;flex:0 0 auto;
  background:linear-gradient(140deg,var(--accent),var(--accent-deep));
  border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);overflow:hidden}
.mark svg{width:19px;height:19px;stroke:var(--mark-text);fill:none;stroke-width:1.8}
.mark.logo{background:#fff;padding:3px}
.mark.logo img{width:100%;height:100%;object-fit:contain;display:block}
.brand h1{font-family:Almarai,sans-serif;font-weight:800;font-size:17px;letter-spacing:-.2px;line-height:1.3}
.brand span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11.5px;color:#8B95A3;font-weight:500;margin-top:2px}
.search{position:relative;flex:1 1 240px;max-width:340px}
.search input{width:100%;padding:10px 38px 10px 12px;border-radius:10px;
  background:var(--ink-2);border:1px solid var(--ink-3);color:var(--paper);
  font-family:inherit;font-size:14px;outline:none;transition:border-color .18s,box-shadow .18s}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.search svg{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;stroke:#6B7280;fill:none;stroke-width:2}
.btn-ghost{padding:10px 14px;border-radius:10px;background:var(--ink-2);border:1px solid var(--ink-3);
  color:var(--paper);font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;gap:7px;transition:.16s;white-space:nowrap}
.btn-ghost:hover{background:var(--ink-3);border-color:#3A4453}
.btn-ghost svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9}
.counter{font-variant-numeric:tabular-nums;font-size:13px;color:#8B95A3;
  padding:9px 13px;border-radius:999px;background:var(--ink-2);border:1px solid var(--ink-3);white-space:nowrap}
.counter b{color:var(--gold);font-weight:700}
main{max-width:1180px;margin:0 auto;padding:26px 20px 90px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:20px}
.card{position:relative;background:var(--paper);color:var(--text);border-radius:14px;
  padding:26px 20px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .2s;
  content-visibility:auto;contain-intrinsic-size:auto 260px}
.card.in{opacity:1;transform:none}
.card:hover{box-shadow:0 1px 2px rgba(0,0,0,.2),0 22px 44px -18px rgba(0,0,0,.6)}
.card::before{content:"";position:absolute;top:11px;inset-inline:14px;height:2px;
  background:radial-gradient(circle at 3px 1px, var(--paper-edge) 1.3px, transparent 1.6px);
  background-size:9px 2px;opacity:.9}
.card.used{background:var(--paper-2)}
.card.used .txt{opacity:.55}
.meta{display:flex;align-items:center;gap:9px}
.num{font-family:Almarai,sans-serif;font-weight:800;font-size:11.5px;letter-spacing:.4px;
  color:var(--accent-ink);background:var(--accent-soft);padding:3px 8px;border-radius:6px;
  font-variant-numeric:tabular-nums}
.len{margin-inline-start:auto;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.len.over{color:var(--stamp);font-weight:700}
.txt{font-size:15px;line-height:1.85;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;
  cursor:copy;border-radius:6px;transition:background .15s;padding:2px 4px;margin:0 -4px}
.txt:hover{background:var(--hover)}
.txt a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px;pointer-events:none}
.txt .tag{color:var(--accent-ink);font-weight:600}
.thumb{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:9px;
  border:1px solid var(--paper-edge);background:var(--paper-2)}
.actions{display:flex;gap:7px;padding-top:12px;margin-top:auto;border-top:1px dashed var(--paper-edge);flex-wrap:wrap}
.act{flex:1 1 0;min-width:64px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 8px;border-radius:9px;border:1px solid var(--paper-edge);background:#fff;
  color:var(--text);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;
  text-decoration:none;transition:.15s}
.act:hover{transform:translateY(-1px)}
.act svg{width:15px;height:15px;flex:0 0 auto;fill:currentColor}
.act.x svg{width:17px;height:17px}
.act.x:hover{background:var(--x);color:#fff;border-color:var(--x)}
.act.wa:hover{background:var(--wa);color:#fff;border-color:var(--wa)}
.act.fb:hover{background:var(--fb);color:#fff;border-color:var(--fb)}
.cap{flex-basis:100%;font-size:11px;font-weight:600;color:var(--muted);margin-bottom:-2px}
.cap:not(:first-child){margin-top:4px}
.act.cp{background:var(--accent);color:#fff;border-color:var(--accent)}
.act.cp:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.act.cp svg,.act.sh svg,.act.dl svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.act.sh,.act.dl{flex-basis:100%;background:var(--accent-soft);color:var(--accent-ink);border-color:transparent;white-space:normal}
.act.sh{background:var(--accent);color:#fff}
.act.sh:hover{background:var(--accent-deep)}
.act.sh:hover,.act.dl:hover{border-color:var(--accent)}
.stamp{position:absolute;top:16px;inset-inline-start:16px;
  font-family:Almarai,sans-serif;font-weight:800;font-size:12px;letter-spacing:.5px;
  color:var(--stamp);border:2px solid var(--stamp);border-radius:5px;padding:3px 9px;
  opacity:0;transform:rotate(-14deg) scale(1.7);pointer-events:none}
.card.used .stamp{opacity:.72;transform:rotate(-9deg) scale(1);
  transition:opacity .28s,transform .28s cubic-bezier(.2,.9,.3,1)}
.empty{text-align:center;padding:80px 20px;color:#6B7280;font-size:15px}
.loading{text-align:center;padding:60px 20px;color:#8B95A3;font-size:14px}
.sentinel{height:1px}
.toast{position:fixed;bottom:24px;inset-inline-start:50%;transform:translate(50%,90px);
  background:var(--paper);color:var(--text);padding:12px 20px;border-radius:11px;
  font-size:14px;font-weight:600;box-shadow:0 18px 40px -14px rgba(0,0,0,.7);
  z-index:100;opacity:0;transition:.28s cubic-bezier(.2,.9,.3,1);max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(50%,0)}
footer{max-width:1180px;margin:0 auto;padding:0 20px 40px;color:#5B6472;
  font-size:12.5px;text-align:center;line-height:1.9;white-space:pre-line}
.ended{max-width:640px;margin:60px auto;background:var(--paper);color:var(--text);border-radius:16px;
  padding:40px 28px;text-align:center;box-shadow:var(--shadow);font-size:16px;line-height:2;white-space:pre-line}
.ended .badge{display:inline-block;margin-bottom:14px;font-family:Almarai,sans-serif;font-weight:800;font-size:12px;
  color:var(--accent-ink);background:var(--accent-soft);padding:4px 12px;border-radius:999px}
.preview-flag{position:fixed;bottom:12px;inset-inline-end:12px;z-index:200;background:#B3261E;color:#fff;
  font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;box-shadow:var(--shadow)}
@media (max-width:640px){
  .bar{padding:12px 15px;gap:10px}
  .search{max-width:none;order:3;flex-basis:100%}
  .grid{grid-template-columns:1fr;gap:15px}
  main{padding:20px 15px 70px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .card{opacity:1;transform:none}
}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}

.sheet{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;padding:16px}
.sheet-box{background:var(--paper);color:var(--text);border-radius:16px;padding:20px;max-width:440px;width:100%;box-shadow:var(--shadow);line-height:1.9;font-size:14.5px}
.sheet-box>b{display:block;font-family:Almarai,sans-serif;font-size:16px;color:var(--accent-ink);margin-bottom:4px}
.sheet-box ol{margin:8px 22px 12px}
.sheet-box label{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:12px}
.sheet-btns{display:flex;gap:8px}
@media (min-width:641px){.sheet{align-items:center}}