/* ============================================================
   شركاء رواج — base: tokens, reset, buttons, forms, toast, modal
   ============================================================ */
:root {
  --brand: #5B4DF5;
  --brand-600: #4A3CE0;
  --brand-700: #3A2DBF;
  --brand-50: #F1EFFF;
  --brand-100: #E4E0FF;
  --violet: #8B5CF6;
  --rose: #F43F5E;
  --rose-50: #FFF0F3;
  --gold: #F5B642;
  --gold-50: #FFF7E3;
  --mint: #0FA37F;
  --mint-50: #E7F8F2;
  --ink: #14112A;
  --ink-2: #3D3957;
  --muted: #6E6A85;
  --line: #E9E7F2;
  --line-2: #F1F0F7;
  --bg: #F6F5FB;
  --card: #FFFFFF;
  --night: #0B0918;
  --night-2: #13102A;

  --grad-brand: linear-gradient(120deg, #5B4DF5 0%, #8B5CF6 50%, #F43F5E 100%);
  --grad-gold: linear-gradient(120deg, #FFE38A 0%, #F5B642 55%, #E58A12 100%);

  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --sh-sm: 0 1px 2px rgba(20, 17, 42, .06), 0 1px 3px rgba(20, 17, 42, .05);
  --sh: 0 10px 30px -12px rgba(20, 17, 42, .18);
  --sh-lg: 0 30px 70px -20px rgba(20, 17, 42, .35);
  --sh-brand: 0 12px 30px -10px rgba(91, 77, 245, .55);

  --f-head: "Alexandria", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-body: "IBM Plex Sans Arabic", "Alexandria", system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--f-head); line-height: 1.25; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num, .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ---------- logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-head); font-weight: 800; font-size: 1.15rem; white-space: nowrap; }
.logo-mark {
  width: 36px; height: 36px; border-radius: 11px; background: var(--grad-brand);
  display: grid; place-items: center; color: #fff; box-shadow: var(--sh-brand); flex-shrink: 0;
}
.logo-mark svg { width: 20px; height: 20px; }
.logo small { font-family: var(--f-body); font-weight: 600; font-size: .7rem; padding: 2px 8px; border-radius: 99px; background: var(--gold-50); color: #9A6200; border: 1px solid #F8DFA5; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent;
  font-family: var(--f-head); font-weight: 600; font-size: .92rem; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, border-color .2s, color .2s;
  white-space: nowrap; text-align: center;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn[disabled] { opacity: .6; cursor: not-allowed; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--sh-brand); }
.btn-primary:hover { background: var(--brand-600); transform: translateY(-1px); }
.btn-grad { background: var(--grad-brand); color: #fff; box-shadow: var(--sh-brand); background-size: 160% 100%; background-position: 0 0; }
.btn-grad:hover { background-position: 100% 0; transform: translateY(-1px); }
.btn-gold { background: var(--grad-gold); color: #3A2400; box-shadow: 0 12px 30px -10px rgba(245, 182, 66, .7); }
.btn-gold:hover { transform: translateY(-1px); filter: saturate(1.1); }
.btn-ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: #CFCBE3; background: #FBFAFF; }
.btn-soft { background: var(--brand-50); color: var(--brand-700); }
.btn-soft:hover { background: var(--brand-100); }
.btn-danger { background: var(--rose-50); color: #BE123C; }
.btn-danger:hover { background: #FFE1E8; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: .84rem; border-radius: 10px; }
.btn-lg { min-height: 54px; padding: 0 28px; font-size: 1rem; border-radius: 14px; }
.btn-block { width: 100%; }
.icon-btn {
  width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; cursor: pointer; color: var(--ink-2); transition: background .2s, color .2s, border-color .2s;
}
.icon-btn:hover { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
.icon-btn svg { width: 18px; height: 18px; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field > label, .label { font-weight: 600; font-size: .86rem; color: var(--ink-2); }
.input, .select, .textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 12px;
  background: #fff; transition: border-color .2s, box-shadow .2s; font-size: .95rem;
}
.textarea { min-height: 120px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(91, 77, 245, .14); }
.input.invalid { border-color: var(--rose); }
.hint { font-size: .8rem; color: var(--muted); }
.form-err {
  display: none; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 12px;
  background: var(--rose-50); color: #BE123C; font-weight: 600; font-size: .86rem; margin-bottom: 16px;
}
.form-err.show { display: flex; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .row-2 { grid-template-columns: 1fr; } }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--brand); margin-top: 2px; flex-shrink: 0; }
.check a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.pill-brand { background: var(--brand-50); color: var(--brand-700); }
.pill-gold { background: var(--gold-50); color: #9A6200; }
.pill-mint { background: var(--mint-50); color: #067A5E; }
.pill-rose { background: var(--rose-50); color: #BE123C; }
.pill-gray { background: var(--line-2); color: var(--ink-2); }
.pill svg { width: 13px; height: 13px; }

/* ---------- toast ---------- */
.toast-wrap { position: fixed; inset-inline: 0; bottom: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 300; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; background: var(--ink); color: #fff;
  font-weight: 600; font-size: .9rem; box-shadow: var(--sh-lg); animation: toastIn .35s var(--ease); pointer-events: auto; max-width: calc(100vw - 32px);
}
.toast svg { width: 18px; height: 18px; color: #6EE7B7; flex-shrink: 0; }
.toast.err svg { color: #FDA4AF; }
.toast.out { opacity: 0; transform: translateY(8px); transition: .3s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }

/* ---------- modal ---------- */
.modal-ov {
  position: fixed; inset: 0; z-index: 200; background: rgba(11, 9, 24, .5); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity .2s;
}
.modal-ov.in { opacity: 1; }
.modal-ov.out { opacity: 0; }
.modal {
  background: #fff; border-radius: var(--r-xl); width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  box-shadow: var(--sh-lg); transform: translateY(12px) scale(.98); transition: transform .3s var(--ease);
}
.modal.wide { width: min(720px, 100%); }
.modal-ov.in .modal { transform: none; }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 20px 22px 0; }
.modal-head h3 { font-size: 1.08rem; flex: 1; }
.modal-body { padding: 18px 22px 22px; }
@media (max-width: 560px) {
  .modal-ov { align-items: flex-end; padding: 0; }
  .modal { border-radius: 24px 24px 0 0; width: 100%; max-height: 92vh; }
}

/* ---------- skeleton ---------- */
.skel { background: linear-gradient(90deg, #EFEDF6 0%, #F7F6FB 50%, #EFEDF6 100%); background-size: 200% 100%; animation: skel 1.3s infinite linear; border-radius: 8px; color: transparent !important; }
@keyframes skel { to { background-position: -200% 0; } }

/* ---------- badges ---------- */
.badge-svg { filter: drop-shadow(0 10px 18px rgba(20, 17, 42, .18)); overflow: visible; }
.badge-svg.locked { filter: grayscale(1) opacity(.45); }
.badge-shine { animation: shine 3.6s ease-in-out infinite; }
.badge-svg.locked .badge-shine { display: none; }
@keyframes shine { 0%, 55% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(200px) skewX(-20deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}