/* ════════════════════════════════════════════════════════════════
   سند — رموز الهوية البصرية (مستخرَجة حرفيا من DESIGN_TOKENS.md + shell)
   زمرّديّ حرجيّ + ذهبيّ عتيق على عاجٍ هادئ · RTL · IBM Plex Sans Arabic + Amiri
   ════════════════════════════════════════════════════════════════ */
:root{
  --em:#1F6F54; --em-600:#1A5742; --em-700:#134334; --em-900:#0E3A2C; --em-950:#082019;
  --em-50:#F2F8F5; --em-100:#E3F0EA; --em-200:#CFE6DB; --em-400:#4FA083;
  --gold:#B8924A; --gold-400:#C9A45C; --gold-300:#DDC089; --gold-100:#F6EDD8; --gold-50:#FBF6EA; --gold-700:#7C5F26;
  --canvas:#F6F8F6; --surface:#fff; --muted:#ECF1EE;
  --border:#DDE5E0; --border-strong:#A8B3AD;
  --ink-900:#14201B; --ink-800:#1F2A25; --ink-500:#586962; --ink-400:#5E6E66; --ivory:#E7F0EB;
  --danger:#B5463A; --danger-bg:#F7E4E1; --ok-bg:#E3F0EA;
  --amber:#B07B16; --amber-bg:#FBEFD2;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-2xl:24px; --r-full:999px;
  --sh-sm:0 1px 3px rgb(14 58 44/.07),0 1px 2px rgb(14 58 44/.05);
  --sh-md:0 6px 18px rgb(14 58 44/.10),0 2px 5px rgb(14 58 44/.06);
  --sh-lg:0 18px 44px rgb(14 58 44/.16),0 6px 14px rgb(14 58 44/.07);
  --sh-xl:0 36px 80px rgb(8 32 25/.22),0 12px 28px rgb(8 32 25/.12);
  --focus:0 0 0 3px rgba(31,111,84,.20);
  --font-ar:"IBM Plex Sans Arabic","Noto Sans Arabic",system-ui,-apple-system,Segoe UI,sans-serif;
  --font-disp:"Amiri","IBM Plex Sans Arabic",serif;
  --font-lt:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; font-family:var(--font-ar); color:var(--ink-900); background:var(--canvas);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.6;
}
#root{min-height:100%;}
.bg-amb{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(48% 40% at 100% -5%, rgba(31,111,84,.10), transparent 60%),
    radial-gradient(42% 36% at -8% 8%, rgba(184,146,74,.10), transparent 60%),
    radial-gradient(60% 55% at 50% 120%, rgba(14,58,44,.07), transparent 62%);}
.bg-grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");}
.mark{display:block;flex:none;}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em;}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;}
a{color:var(--em);text-decoration:none;}
code,.mono{font-family:var(--font-mono);font-size:.86em;}
::selection{background:var(--em-100);color:var(--em-700);}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-thumb{background:#cfd9d3;border-radius:99px;border:3px solid var(--canvas);}
::-webkit-scrollbar-thumb:hover{background:#b4c2bb;}

/* ── أزرار ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--r-md);
  padding:.64rem 1.15rem;font-weight:600;transition:background .18s,transform .12s,box-shadow .2s,border-color .18s,color .18s;}
.btn-primary{position:relative;overflow:hidden;background:var(--em);color:#fff;font-weight:700;
  border-radius:12px;box-shadow:0 7px 20px rgba(31,111,84,.28);}
.btn-primary:hover{background:var(--em-600);} .btn-primary:active{transform:scale(.985);}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;}
.btn-primary::before{content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(110deg,transparent 30%,rgba(221,192,137,.5) 50%,transparent 70%);transition:transform .75s;}
.btn-primary:hover::before{transform:translateX(120%);}
.btn-ghost{background:transparent;color:var(--em);border:1px solid var(--border);}
.btn-ghost:hover{background:var(--em-50);border-color:var(--em-400);}
.btn-gold{position:relative;overflow:hidden;background:var(--gold);color:#2a2008;font-weight:700;border-radius:12px;box-shadow:0 7px 20px rgba(184,146,74,.30);}
.btn-gold:hover{background:var(--gold-400);}
.btn-sm{padding:.42rem .8rem;font-size:.86rem;border-radius:10px;}
.btn-lg{padding:.85rem 1.5rem;font-size:1.02rem;}

.pill{display:inline-flex;align-items:center;gap:.34rem;border-radius:var(--r-full);
  font-size:11.5px;font-weight:700;padding:3px 11px;line-height:1.5;}
.pill-ok{background:var(--ok-bg);color:var(--em-600);}
.pill-gold{background:var(--gold-100);color:var(--gold-700);}
.pill-amber{background:var(--amber-bg);color:var(--amber);}
.pill-danger{background:var(--danger-bg);color:var(--danger);}
.dot{width:7px;height:7px;border-radius:50%;background:var(--em-400);box-shadow:0 0 0 3px rgba(79,160,131,.18);}
.dot-live{animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(79,160,131,.18);}50%{box-shadow:0 0 0 6px rgba(79,160,131,.05);}}

.logo-badge{display:grid;place-items:center;border-radius:13px;
  background:linear-gradient(150deg,#16513D 0%,#0E3A2C 100%);
  box-shadow:0 4px 12px rgb(14 58 44/.22), inset 0 0 0 1px rgba(201,164,92,.24);}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-sm);}
.card-p{padding:clamp(18px,2.3vw,26px);}

/* شريط علوي مشترك */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--surface) 84%,transparent);
  backdrop-filter:blur(14px) saturate(1.1);border-bottom:1px solid var(--border);}
.top-in{max-width:1180px;margin:0 auto;padding:11px clamp(16px,3vw,28px);display:flex;align-items:center;justify-content:space-between;gap:14px;}
.brand{display:flex;align-items:center;gap:12px;cursor:pointer;}
.brand .wm{font-size:1.34rem;font-weight:700;color:var(--em-700);line-height:1.05;}
.brand .wm small{display:block;font-size:10.5px;font-weight:500;color:var(--ink-400);letter-spacing:.02em;margin-top:2px;}
.who{display:flex;align-items:center;gap:11px;font-size:.86rem;color:var(--ink-500);}
.who .nm{color:var(--ink-900);font-weight:600;} .who .meta{color:var(--ink-400);font-size:.79rem;}
.who .av{width:36px;height:36px;border-radius:var(--r-full);background:var(--em-900);color:var(--gold-400);
  display:grid;place-items:center;font-weight:700;font-size:.92rem;flex:none;}
/* قائمةُ الحساب (AccountMenu) — أيقونةٌ قابلةٌ للنقرِ تفتحُ بطاقةَ الحساب + إجراءات (المحور/لوحة التحكم/خروج) */
.acct{position:relative;display:flex;}
.acct-btn{background:none;border:none;padding:0;cursor:pointer;display:flex;border-radius:var(--r-full);}
.acct-btn:focus-visible{outline:2px solid var(--em);outline-offset:2px;}
.acct-av{width:36px;height:36px;border-radius:var(--r-full);background:var(--em-900);color:var(--gold-400);
  display:grid;place-items:center;font-weight:700;font-size:.92rem;flex:none;transition:transform .12s,box-shadow .12s;}
.acct-btn:hover .acct-av{transform:translateY(-1px);box-shadow:0 4px 12px rgba(14,58,44,.25);}
.acct-bd{position:fixed;inset:0;z-index:200;}
.acct-pop{position:absolute;inset-inline-end:0;top:calc(100% + 9px);z-index:201;min-width:238px;
  background:var(--surface);border:1px solid var(--border);border-radius:15px;
  box-shadow:0 16px 40px rgba(14,58,44,.22);overflow:hidden;animation:acctIn .14s ease;}
@keyframes acctIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.acct-id{display:flex;gap:11px;align-items:center;padding:14px 15px;border-bottom:1px solid var(--border);}
.acct-id .acct-av{width:42px;height:42px;font-size:1.02rem;}
.acct-id .nm{font-weight:800;color:var(--ink-900);font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:168px;}
.acct-id .em{font-size:.74rem;color:var(--ink-400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:168px;}
.acct-id .rl{font-size:.74rem;color:var(--em-700);font-weight:700;margin-top:2px;}
.acct-acts{padding:6px;}
.acct-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;background:none;border:none;
  border-radius:10px;cursor:pointer;font:inherit;font-size:.86rem;font-weight:600;color:var(--ink-700);text-align:start;transition:background .13s;}
.acct-item:hover{background:var(--em-50);}
.acct-item svg{flex:none;color:var(--ink-400);}
.acct-item.danger{color:var(--danger);} .acct-item.danger:hover{background:var(--danger-bg);} .acct-item.danger svg{color:var(--danger);}
.back{display:inline-flex;align-items:center;gap:7px;color:var(--ink-500);font-weight:600;font-size:.9rem;
  padding:.42rem .8rem;border-radius:10px;transition:background .15s,color .15s;cursor:pointer;}
.back:hover{background:var(--em-50);color:var(--em);}

.wrap{max-width:1180px;margin:0 auto;padding:clamp(20px,3vw,40px) clamp(16px,3vw,28px) 56px;}

/* حقول */
.field{display:block;margin-bottom:14px;}
.field .lbl{display:block;font-size:.86rem;font-weight:600;color:var(--ink-800);margin-bottom:6px;}
.inp{width:100%;padding:.76rem .95rem;border:1px solid #D8E0DB;border-radius:11px;background:var(--surface);
  color:var(--ink-900);font:inherit;font-size:1rem;transition:border-color .16s,box-shadow .16s;}
.inp::placeholder{color:var(--ink-400);}
.inp:focus{outline:none;border-color:var(--em);box-shadow:var(--focus);}
.inp-ltr{direction:ltr;text-align:left;}

.disclaimer{display:flex;gap:13px;align-items:flex-start;border-radius:16px;padding:15px 18px;line-height:1.75;
  background:linear-gradient(180deg,var(--gold-50),var(--gold-100));border:1px solid var(--gold-300);color:var(--gold-700);font-size:.94rem;}
.disclaimer svg{flex:none;margin-top:2px;}
.disclaimer b{color:#5e4716;}

.chip{border:1px solid var(--border);background:var(--surface);color:var(--ink-800);border-radius:var(--r-full);
  padding:.46rem .9rem;font-size:.86rem;font-weight:500;transition:all .16s;cursor:pointer;}
.chip:hover{border-color:var(--em-400);background:var(--em-50);color:var(--em-700);}

footer.foot{max-width:1180px;margin:0 auto;padding:14px clamp(16px,3vw,28px) 36px;color:var(--ink-400);font-size:.78rem;text-align:center;line-height:1.9;border-top:1px solid var(--border);}

/* ملاحظة: لا نبدأ من opacity:0 حتى يبقى المحتوى مرئيًّا إن تجمّدت الحركة في سياقٍ لا يُعاد رسمه */
@keyframes rise{from{transform:translateY(16px);}to{transform:none;}}
@keyframes riseSm{from{transform:translateY(9px);}to{transform:none;}}
@keyframes blink{50%{opacity:0;}}
.a-rise{animation:rise .55s cubic-bezier(.2,.7,.2,1) both;}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}