/* hrai · نافذة مشاركة النتيجة — نفس زجاج الإشعارات والبطاقات
   الوضع الداكن يتبع زر الموقع (html[data-theme="dark"]) — الموقع يبدأ فاتح دائمًا. */
:root{--hsh-sheet:rgba(255,255,255,.78);--hsh-edge:rgba(255,255,255,.9);--hsh-line:rgba(0,0,0,.06);--hsh-fg:#111;--hsh-sub:#666;--hsh-seg:rgba(0,0,0,.05);--hsh-on:#fff;--hsh-btn:#111;--hsh-btn-fg:#fff;--hsh-ok:#22C55E}
html.dark,html[data-theme="dark"]{--hsh-sheet:rgba(28,28,30,.76);--hsh-edge:rgba(255,255,255,.14);--hsh-line:rgba(255,255,255,.08);--hsh-fg:#fff;--hsh-sub:#A8A8A8;--hsh-seg:rgba(255,255,255,.07);--hsh-on:rgba(255,255,255,.18);--hsh-btn:#fff;--hsh-btn-fg:#111}
.hsh{position:fixed;inset:0;z-index:9991;display:grid;place-items:center;padding:16px;direction:ltr;font-family:Tajawal,Tahoma,sans-serif;
  background:rgba(0,0,0,.25);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:hsh-f .3s ease both}
.hsh.out{animation:hsh-f .28s ease reverse both}
.hsh-sheet{width:min(400px,100%);border-radius:32px;padding:10px 18px 18px;color:var(--hsh-fg);background:var(--hsh-sheet);
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border:1px solid var(--hsh-line);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.4),inset 0 1px 0 var(--hsh-edge);animation:hsh-in .55s cubic-bezier(.2,1.2,.4,1) both}
.hsh.out .hsh-sheet{animation:hsh-in .28s ease reverse both}
.hsh-grab{width:38px;height:5px;border-radius:9px;background:var(--hsh-seg);margin:2px auto 8px}
.hsh-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.hsh-h b{font-size:18px;font-weight:800}
.hsh-x{all:unset;cursor:pointer;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--hsh-seg);color:var(--hsh-sub);font-size:17px}
.hsh-prev{display:grid;place-items:center;height:330px;border-radius:22px;background:var(--hsh-seg);overflow:hidden}
.hsh-prev img{max-width:92%;max-height:300px;border-radius:14px;box-shadow:0 10px 30px -8px rgba(0,0,0,.35);transition:opacity .2s}
.hsh-opts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}
.hsh-seg{display:flex;padding:3px;border-radius:999px;background:var(--hsh-seg)}
.hsh-seg button{all:unset;cursor:pointer;font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;color:var(--hsh-sub);transition:background .25s,color .25s}
.hsh-seg button.on{background:var(--hsh-on);color:var(--hsh-fg);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.hsh-sw{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--hsh-sub);cursor:pointer;margin-inline-start:auto}
.hsh-sw input{display:none}
.hsh-sw span{width:34px;height:20px;border-radius:99px;background:var(--hsh-seg);position:relative;transition:background .25s}
.hsh-sw span::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .3s cubic-bezier(.2,1.4,.4,1)}
.hsh-sw input:checked+span{background:var(--hsh-ok)}.hsh-sw input:checked+span::after{left:16px}
.hsh-acts{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:8px}
.hsh-acts button{all:unset;cursor:pointer;text-align:center;font-size:14px;font-weight:800;padding:12px 6px;border-radius:999px;background:var(--hsh-seg);color:var(--hsh-fg);transition:transform .15s}
.hsh-acts button:active{transform:scale(.95)}
.hsh-acts .hsh-main{background:var(--hsh-ok);color:#fff}
@keyframes hsh-f{from{opacity:0}}
@keyframes hsh-in{from{opacity:0;transform:translateY(24px) scale(.94);filter:blur(6px)}}
@media (max-width:520px){.hsh{place-items:end center;padding:10px}}
@media (prefers-reduced-motion:reduce){.hsh,.hsh-sheet{animation:none!important}}