/* ==========================================================
   شبكة منجم التأثير — صفحات المؤثرين، حسابي، لوحة التحكم، سياسة الخصوصية
   (تُحمَّل بعد style.css وتستخدم نفس الألوان والخطوط)
   ========================================================== */

/* ---------- رأس الصفحات الداخلية ---------- */
.page-hero { position: relative; padding: calc(var(--header-h) + 64px) 0 48px; overflow: hidden; isolation: isolate; text-align: center; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(520px 340px at 50% 30%, rgba(227, 183, 90, .16), transparent 70%), radial-gradient(420px 380px at 100% 0%, rgba(184, 134, 47, .1), transparent 70%);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .45;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 30%, #000 15%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 30%, #000 15%, transparent 75%);
}
.page-hero h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); font-weight: 800; margin-bottom: 1rem; }
.page-hero .lead { margin-inline: auto; margin-bottom: 0; }
.page-hero.compact { padding-bottom: 24px; }
.page-hero.compact h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-bottom: .4rem; }
.page-section { padding: 24px 0 clamp(72px, 9vw, 110px); }
.nav a[aria-current="page"]:not(.btn) { color: var(--gold-2); }

.site-footer-mini { padding: 2rem 0 2.5rem; }
.site-footer-mini .footer-bottom { padding-top: 0; border-top: 0; }

.muted { color: var(--muted); }
.note-card {
  max-width: 640px; margin: 0 auto; padding: 2rem 1.5rem; text-align: center;
  border-radius: var(--radius); border: 1px dashed var(--line-strong); background: rgba(227, 183, 90, .04);
}
.note-card h2 { font-size: 1.3rem; margin-bottom: .5rem; }
.note-card p { color: var(--muted); }
.note-card .btn { margin-top: 1.25rem; }
.note-card .net-gate { border: 0; background: none; padding: 0; }
.spinner-text { padding: 3rem 0; text-align: center; color: var(--faint); }

/* ---------- حالات (قيد المراجعة، مقبول…) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .75rem; border-radius: 999px; white-space: nowrap;
  font-size: .8rem; font-weight: 600; line-height: 1.6; color: var(--gold-2); background: rgba(227, 183, 90, .1); border: 1px solid rgba(227, 183, 90, .4);
}
.badge.is-approved, .badge.is-done { color: #a8e0b5; background: rgba(143, 209, 158, .08); border-color: rgba(143, 209, 158, .4); }
.badge.is-rejected { color: #f0b4a3; background: rgba(226, 131, 106, .08); border-color: rgba(226, 131, 106, .4); }
.badge.is-in_progress, .badge.is-review, .badge.is-active, .badge.is-negotiation, .badge.is-contract, .badge.is-production { color: #b9d3f2; background: rgba(140, 180, 230, .08); border-color: rgba(140, 180, 230, .4); }
.badge.is-published { color: #a8e0b5; background: rgba(143, 209, 158, .08); border-color: rgba(143, 209, 158, .4); }
.badge.is-declined, .badge.is-cancelled { color: #f0b4a3; background: rgba(226, 131, 106, .08); border-color: rgba(226, 131, 106, .4); }
.badge.is-offered, .badge.is-deposit, .badge.is-approval { color: #1a1307; background: var(--gold-grad); border-color: transparent; }

/* ---------- صفحة المؤثرين ---------- */
.dir-banner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem 1.5rem;
  margin-bottom: 2rem; padding: 1.1rem 1.4rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(227, 183, 90, .08), rgba(27, 23, 17, .6));
}
.dir-banner p { flex: 1 1 320px; color: var(--muted); }
.dir-banner strong { color: var(--text); }
.dir-banner-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.dir-tools { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.25rem; }
.dir-search {
  display: flex; align-items: center; gap: .6rem; max-width: 460px; padding: .2rem 1rem; border-radius: 999px;
  background: rgba(15, 13, 10, .6); border: 1px solid var(--line-strong); color: var(--gold); transition: border-color .2s, box-shadow .2s;
}
.dir-search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(227, 183, 90, .15); }
.dir-search .ico { width: 18px; height: 18px; }
.dir-search input { flex: 1; min-width: 0; padding: .7rem 0; border: 0; background: none; color: var(--text); }
.dir-search input:focus { outline: none; }
.dir-search input::placeholder { color: var(--faint); }
.dir-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-btn {
  padding: .45rem 1rem; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--line); color: var(--muted); font: 600 .9rem/1.4 var(--font-body);
  transition: color .2s, border-color .2s, background-color .2s;
}
.chip-btn:hover { color: var(--text); border-color: var(--line-strong); }
.chip-btn[aria-pressed="true"] { background: var(--gold-grad); color: var(--on-gold); border-color: transparent; }
.chip-btn small { font-size: .78em; opacity: .75; }

.dir-group + .dir-group { margin-top: 3rem; }
.dir-group-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.25rem; }
.dir-group-head h2 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin: 0; }
.dir-group-head span { color: var(--faint); font-size: .9rem; }
.dir-group-head::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to left, var(--line-strong), transparent); }
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.25rem; }
.dir-empty { padding: 3rem 1rem; text-align: center; color: var(--muted); }

.inf-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1.75rem 1.4rem 1.4rem; text-align: center;
  border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), rgba(27, 23, 17, .45));
  transition: border-color .3s, transform .3s, box-shadow .3s; scroll-margin-top: calc(var(--header-h) + 24px);
}
.inf-card:hover { border-color: var(--line-strong); transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(227, 183, 90, .45); }
.inf-card:target { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(227, 183, 90, .15); }
.inf-photo {
  width: 96px; height: 96px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%; margin-bottom: .5rem;
  background: radial-gradient(circle at 32% 26%, #3d3221, #15110b 72%); color: var(--gold-2);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px rgba(227, 183, 90, .7), 0 14px 30px -12px rgba(227, 183, 90, .5);
}
.inf-photo img { width: 100%; height: 100%; object-fit: cover; }
.inf-photo .ico { width: 42%; height: 42%; stroke-width: 1.5; }
.inf-photo.sm { width: 56px; height: 56px; margin: 0; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px rgba(227, 183, 90, .6); }
.inf-card h3 { font-size: 1.15rem; }
.inf-niche { color: var(--gold); font-size: .86rem; font-weight: 600; }
.inf-bio { color: var(--muted); font-size: .93rem; line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.inf-platforms { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: .7rem 0 .2rem; }
.inf-platforms a {
  display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 62px; padding: .5rem .55rem .4rem; border-radius: 14px;
  background: rgba(227, 183, 90, .06); border: 1px solid var(--line); color: var(--gold-2); transition: background-color .2s, border-color .2s, transform .2s;
}
.inf-platforms a:hover { background: rgba(227, 183, 90, .14); border-color: rgba(227, 183, 90, .55); transform: translateY(-2px); }
.inf-platforms .ico { width: 22px; height: 22px; }
.inf-platforms span { font-size: .74rem; font-weight: 600; color: var(--muted); white-space: nowrap; line-height: 1.4; }
.inf-reach { color: var(--faint); font-size: .8rem; }
.inf-reach strong { color: var(--text); font-weight: 600; }
.inf-foot { width: 100%; margin-top: auto; padding-top: .9rem; }
.inf-card .inf-cta { width: 100%; }
.inf-card .btn.is-sent { background: rgba(143, 209, 158, .08); color: #a8e0b5; border-color: rgba(143, 209, 158, .4); box-shadow: none; cursor: default; transform: none; }

/* ---------- نافذة طلب المؤثر ---------- */
.net-dialog {
  width: min(480px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; overflow: auto;
  border-radius: calc(var(--radius) + 4px); border: 1px solid var(--line-strong); color: var(--text);
  background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .9);
}
.net-dialog::backdrop { background: rgba(5, 4, 3, .72); }
.net-dialog[open] { animation: dd-in .25s ease-out; }
.net-dialog-box { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem 1.5rem 1.5rem; }
.net-dialog-close {
  position: absolute; top: .9rem; left: .9rem; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-strong); background: rgba(15, 13, 10, .6); color: var(--muted);
}
.net-dialog-close:hover { color: var(--text); border-color: var(--gold); }
.net-dialog-close .ico { width: 16px; height: 16px; stroke-width: 2.2; }
.net-dialog-head { display: flex; align-items: center; gap: 1rem; padding-left: 2.5rem; }
.net-dialog-head .kicker { margin: 0 0 .1rem; font-size: .85rem; }
.net-dialog-head h2 { font-size: 1.3rem; }
.net-dialog-form { display: flex; flex-direction: column; gap: 1rem; }
.net-dialog-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.net-dialog-actions .btn { flex: 1 1 140px; }
.net-dialog .net-gate { padding: 1.25rem .5rem .5rem; border: 0; background: none; }
.net-dialog .form-success { padding: .5rem 0 0; }

/* ---------- حسابي ---------- */
.acc-wrap { display: flex; flex-direction: column; gap: 1.5rem; max-width: 860px; margin-inline: auto; }
.panel {
  padding: clamp(1.25rem, 3vw, 2rem); border-radius: calc(var(--radius) + 2px);
  border: 1px solid var(--line-strong); background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.panel-head h2 { font-size: 1.25rem; margin: 0; }
.panel-sub { margin: 1.6rem 0 .8rem; font-size: 1.05rem; }
.acc-user { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.acc-user .inf-photo { margin: 0; }
.acc-user-text { flex: 1; min-width: 200px; display: flex; flex-direction: column; line-height: 1.5; }
.acc-user-text strong { font-family: var(--font-head); font-size: 1.2rem; }
.acc-user-text bdi { color: var(--muted); font-size: .92rem; text-align: right; overflow-wrap: anywhere; }
.acc-user-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.acc-profile { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1.5rem; }
.acc-profile .inf-photo { margin: 0; }
.acc-profile-text { flex: 1; min-width: 220px; }
.acc-profile-text h3 { font-size: 1.15rem; }
.acc-profile-text p { color: var(--muted); font-size: .95rem; margin-top: .3rem; }
.acc-profile-text .inf-niche { margin-top: 0; color: var(--gold); font-size: .86rem; }
.acc-note { margin-bottom: 1.25rem; padding: .75rem 1rem; border-radius: 12px; font-size: .92rem; color: var(--muted); background: rgba(15, 13, 10, .45); border: 1px solid var(--line); }

.followers-list { display: flex; flex-direction: column; gap: .65rem; }
.followers-row {
  display: grid; grid-template-columns: auto 1fr minmax(120px, 190px); align-items: center; gap: .75rem 1rem;
  padding: .75rem 1rem; border-radius: 14px; border: 1px solid var(--line); background: rgba(15, 13, 10, .35);
}
.followers-row > .ico { width: 24px; height: 24px; color: var(--gold); }
.followers-row-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.5; }
.followers-row-name strong { font-size: .98rem; }
.followers-row-name a { color: var(--muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.followers-row-name a:hover { color: var(--gold-2); }
.followers-row .field input { padding: .6rem .85rem; }
.followers-auto { color: #a8e0b5; font-size: .85rem; line-height: 1.5; text-align: start; }
.followers-auto strong { display: block; color: var(--text); font-size: 1rem; }
.followers-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1rem; margin-top: 1.1rem; }
.followers-actions .form-error, .followers-actions .ok-text { text-align: start; }
.ok-text { color: #a8e0b5; font-size: .92rem; }

.item-list { display: flex; flex-direction: column; gap: .65rem; }
.item {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: .85rem 1rem; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(15, 13, 10, .35);
}
.item .inf-photo.sm { width: 44px; height: 44px; }
.item-text { flex: 1; min-width: 180px; display: flex; flex-direction: column; line-height: 1.5; }
.item-text strong { font-size: 1rem; }
.item-text small { color: var(--faint); font-size: .83rem; }
.acc-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.acc-choice {
  display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); transition: border-color .3s, transform .3s;
}
.acc-choice:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.acc-choice .service-icon { margin-bottom: .5rem; }
.acc-choice h3 { font-size: 1.1rem; }
.acc-choice p { color: var(--muted); font-size: .93rem; }
.acc-choice .link-arrow { margin-top: .4rem; }
.acc-handle { color: var(--gold-2); font-size: .92rem; font-weight: 600; text-align: right; }
.acc-via { color: var(--faint); font-size: .8rem; }
.acc-password { flex-basis: 100%; display: flex; align-items: flex-end; flex-wrap: wrap; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.acc-password .field { flex: 1 1 240px; }
.acc-password .form-error, .acc-password .ok-text { flex-basis: 100%; text-align: start; }
.acc-note a { color: var(--gold-2); text-decoration: underline; }

/* عروض المؤثر */
.offer-list, .order-list { display: flex; flex-direction: column; gap: 1rem; }
.offer-card { padding: 1.1rem 1.25rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(15, 13, 10, .35); }
.offer-card.is-offered { border-color: rgba(227, 183, 90, .6); background: linear-gradient(180deg, rgba(227, 183, 90, .09), rgba(15, 13, 10, .4)); }
.offer-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1rem; }
.offer-title { display: flex; flex-direction: column; line-height: 1.5; }
.offer-title strong { font-family: var(--font-head); font-size: 1.08rem; }
.offer-title small { color: var(--faint); font-size: .83rem; }
.offer-reply { display: flex; flex-direction: column; gap: .75rem; margin-top: 1rem; }
.offer-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.offer-hint { color: var(--faint); font-size: .82rem; }
.offer-reply .form-error { text-align: start; }

/* طلبات العلامة ومرحلة كل مؤثر */
.order-card { padding: 1.1rem 1.25rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(15, 13, 10, .35); }
.order-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1rem; }
.order-empty { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--line-strong); }
.deal-list { display: flex; flex-direction: column; gap: .6rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--line-strong); }
.deal { display: flex; align-items: center; gap: .85rem; padding: .7rem .85rem; border-radius: 14px; border: 1px solid var(--line); background: rgba(27, 23, 17, .6); }
.deal.is-you { border-color: rgba(227, 183, 90, .6); background: linear-gradient(180deg, rgba(227, 183, 90, .1), rgba(27, 23, 17, .6)); }
.deal.is-declined, .deal.is-cancelled { opacity: .75; }
.deal .inf-photo.sm { width: 44px; height: 44px; }
.deal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; line-height: 1.5; }
.deal-main strong { font-size: .98rem; }
.deal-main > small { color: var(--muted); font-size: .86rem; }
.deal.is-you .deal-main > small { color: var(--gold-2); font-weight: 600; }
.deal-by { padding: 0 .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; color: var(--gold-2); background: rgba(227, 183, 90, .1); }
.deal-bar { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-top: .35rem; max-width: 320px; }
.deal-bar li { height: 5px; border-radius: 3px; background: rgba(232, 193, 112, .15); }
.deal-bar li.is-done { background: rgba(227, 183, 90, .6); }
.deal-bar li.is-now { background: var(--gold-grad); box-shadow: 0 0 10px rgba(227, 183, 90, .6); }

/* ---------- لوحة التحكم ---------- */
.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; }
.adm-stat { padding: 1.1rem 1.25rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); }
.adm-stat span { display: block; color: var(--faint); font-size: .85rem; }
.adm-stat strong { font-family: var(--font-head); font-size: 1.8rem; line-height: 1.3; }
.adm-stat.is-hot { border-color: rgba(227, 183, 90, .55); background: linear-gradient(180deg, rgba(227, 183, 90, .1), var(--surface)); }
.adm-stat.is-hot strong { color: var(--gold-2); }

.adm-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; }
.adm-tabs { display: flex; flex-wrap: wrap; gap: .3rem; padding: .3rem; border-radius: 999px; background: rgba(24, 20, 14, .92); border: 1px solid var(--line-strong); }
.adm-tabs button {
  display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1.1rem; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: none; color: var(--muted); font: 700 .92rem/1.3 var(--font-head); transition: color .2s;
}
.adm-tabs button:hover { color: var(--text); }
.adm-tabs button[aria-selected="true"] { background: var(--gold-grad); color: var(--on-gold); }
.adm-tabs b { min-width: 1.5em; padding: 0 .4em; border-radius: 999px; background: rgba(227, 183, 90, .18); color: var(--gold-2); font-size: .78rem; line-height: 1.6; text-align: center; }
.adm-tabs button[aria-selected="true"] b { background: rgba(26, 19, 7, .2); color: var(--on-gold); }
.adm-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }

.adm-list { display: flex; flex-direction: column; gap: 1rem; }
.adm-card { padding: 1.25rem 1.4rem; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), rgba(27, 23, 17, .5)); }
.adm-card.is-pending, .adm-card.is-new { border-color: rgba(227, 183, 90, .45); }
.adm-card-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.adm-card-head .inf-photo { margin: 0; width: 64px; height: 64px; }
.adm-card-title { flex: 1; min-width: 200px; display: flex; flex-direction: column; line-height: 1.5; }
.adm-card-title strong { font-family: var(--font-head); font-size: 1.12rem; }
.adm-card-title small { color: var(--faint); font-size: .84rem; }
.adm-card-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .5rem 1.5rem; margin-top: 1rem; }
.adm-kv { display: flex; flex-direction: column; font-size: .93rem; line-height: 1.6; min-width: 0; }
.adm-kv span { color: var(--faint); font-size: .8rem; }
.adm-kv a, .adm-kv bdi { overflow-wrap: anywhere; }
.adm-kv a { color: var(--gold-2); }
.adm-text { margin-top: .9rem; padding: .8rem 1rem; border-radius: 12px; background: rgba(15, 13, 10, .45); border-right: 3px solid var(--gold-3); color: #d9cfbd; font-size: .93rem; line-height: 1.8; white-space: pre-line; }
.adm-text b { display: block; color: var(--faint); font-size: .8rem; font-weight: 500; }
.adm-accounts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.adm-accounts a {
  display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem; border-radius: 999px; font-size: .86rem;
  background: rgba(227, 183, 90, .06); border: 1px solid var(--line); color: var(--text);
}
.adm-accounts a:hover { border-color: rgba(227, 183, 90, .55); }
.adm-accounts .ico { width: 17px; height: 17px; color: var(--gold); }
.adm-accounts small { color: var(--gold-2); font-weight: 600; }
.adm-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.btn-danger { border-color: rgba(226, 131, 106, .5); color: #f0b4a3; background: rgba(226, 131, 106, .06); }
.btn-danger:hover { border-color: #e2836a; background: rgba(226, 131, 106, .12); }
.btn-ok { background: linear-gradient(135deg, #b9ecc5, #7fcf95); color: #0f2a17; box-shadow: 0 12px 30px -14px rgba(127, 207, 149, .6); }
.adm-select {
  padding: .5rem 2.2rem .5rem 1rem; border-radius: 999px; cursor: pointer; color: var(--text); font: 600 .9rem/1.4 var(--font-body);
  -webkit-appearance: none; appearance: none; border: 1px solid var(--line-strong);
  background: rgba(15, 13, 10, .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3b75a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat left .8rem center / 13px;
}
.adm-select option { background: #1b1711; color: #f4eee3; }
.adm-table-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.adm-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.adm-table th, .adm-table td { padding: .75rem 1rem; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.adm-table th { color: var(--faint); font-weight: 600; font-size: .84rem; background: var(--surface); }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.adm-sub { margin: 1.1rem 0 .6rem; font-size: .95rem; color: var(--muted); }
.adm-muted { font-size: .9rem; }
.adm-deals { display: flex; flex-wrap: wrap; gap: .5rem; }
.adm-deal { display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .8rem .35rem .4rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(15, 13, 10, .45); line-height: 1.35; }
.adm-deal:hover { border-color: var(--line-strong); }
.adm-deal .inf-photo.sm { width: 32px; height: 32px; box-shadow: none; }
.adm-deal strong { display: block; font-size: .88rem; }
.adm-deal small { color: var(--faint); font-size: .76rem; }
.adm-add { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.adm-add .adm-select, .adm-add .dd { flex: 1 1 260px; min-width: 0; }
.adm-add .dd-compact .dd-trigger { padding-block: .6rem; }
.adm-stage { margin-top: .8rem; color: var(--muted); font-size: .9rem; }
.adm-stage.is-brand { color: var(--gold-2); font-weight: 600; }
.adm-offer { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; margin-top: 1rem; padding: 1rem; border-radius: 14px; border: 1px dashed rgba(227, 183, 90, .5); background: rgba(227, 183, 90, .04); }
.adm-offer .field { width: 100%; }
.adm-card.is-offered, .adm-card.is-negotiation { border-color: rgba(227, 183, 90, .45); }
.adm-card.is-published { border-color: rgba(143, 209, 158, .35); }

/* ---------- طريقة العمل (/how-it-works/) ---------- */
.js .how[data-mode="brand"] [data-for="influencer"], .js .how[data-mode="influencer"] [data-for="brand"] { display: none !important; }
.how-modes { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: 2rem; padding: .35rem; border-radius: 999px; background: rgba(24, 20, 14, .92); border: 1px solid var(--line-strong); }
.how-modes button {
  display: inline-flex; align-items: center; gap: .55rem; padding: .75rem 1.5rem; border: 0; border-radius: 999px; cursor: pointer;
  background: none; color: var(--muted); font: 700 1rem/1.3 var(--font-head); transition: color .2s;
}
.how-modes button:hover { color: var(--text); }
.how-modes button[aria-pressed="true"] { background: var(--gold-grad); color: var(--on-gold); box-shadow: 0 10px 26px -12px rgba(227, 183, 90, .7); }
.how-modes .ico { width: 20px; height: 20px; }
html:not(.js) .how-modes { display: none; }

.how-intro { padding-top: 8px; }
.how-flow { display: grid; grid-template-columns: 1fr minmax(90px, .7fr) 1.15fr minmax(90px, .7fr) 1fr; align-items: center; gap: .5rem; max-width: 980px; margin: 0 auto 2.75rem; }
.how-node {
  display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 1.4rem 1rem; text-align: center;
  border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), rgba(27, 23, 17, .5));
}
.how-node strong { font-family: var(--font-head); font-size: 1.05rem; }
.how-node small { color: var(--faint); font-size: .84rem; line-height: 1.6; }
.how-node-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: .3rem; border-radius: 50%; background: rgba(227, 183, 90, .1); border: 1px solid var(--line-strong); color: var(--gold); }
.how-node-icon .ico { width: 24px; height: 24px; }
.how-node.is-core { border-color: rgba(227, 183, 90, .55); background: radial-gradient(circle at 50% 0%, rgba(227, 183, 90, .18), transparent 70%), var(--surface); box-shadow: 0 24px 50px -30px rgba(227, 183, 90, .6); }
.how-node.is-core .how-node-icon { width: 64px; height: 64px; background: rgba(15, 13, 10, .7); }
.how-gem { width: 40px; height: 34px; }
.how-link { display: flex; flex-direction: column; align-items: center; gap: .3rem; color: var(--faint); font-size: .74rem; text-align: center; line-height: 1.4; }
.how-link i { position: relative; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-3), transparent); }
.how-link i::before, .how-link i::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border-top: 2px solid var(--gold); border-left: 2px solid var(--gold); }
.how-link i::before { right: 4px; transform: translateY(-50%) rotate(135deg); }
.how-link i::after { left: 4px; transform: translateY(-50%) rotate(-45deg); }

.how-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.how-cards article { padding: 1.6rem 1.5rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.how-cards h2 { font-size: 1.15rem; margin-bottom: .5rem; }
.how-cards p { color: var(--muted); font-size: .96rem; line-height: 1.85; }

.how-journey { padding-top: clamp(40px, 6vw, 72px); }
.how-steps { display: flex; flex-direction: column; max-width: 860px; margin: 0 auto; }
.how-steps > li { position: relative; display: grid; grid-template-columns: 54px 1fr; gap: 1.1rem; padding-bottom: 1.25rem; }
.how-steps > li::before { content: ""; position: absolute; top: 58px; bottom: 4px; right: 26px; width: 2px; border-radius: 2px; background: linear-gradient(var(--gold-3), rgba(227, 183, 90, .08)); }
.how-steps > li:last-child { padding-bottom: 0; }
.how-steps > li:last-child::before { display: none; }
.how-num {
  width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%;
  background: var(--gold-grad); color: var(--on-gold); font: 800 1.25rem/1 var(--font-head); box-shadow: 0 0 0 4px var(--bg), 0 12px 26px -10px rgba(227, 183, 90, .6);
}
.how-step-body { padding: 1rem 1.25rem 1.15rem; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), rgba(27, 23, 17, .45)); }
.how-step-body h3 { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .6rem; font-size: 1.15rem; margin-bottom: .35rem; }
.how-step-body p { color: var(--muted); font-size: .98rem; line-height: 1.9; }
.how-who, .how-pay { padding: .1rem .65rem; border-radius: 999px; font: 600 .74rem/1.7 var(--font-body); color: var(--muted); background: rgba(255, 255, 255, .04); border: 1px solid var(--line-strong); }
.how-who.is-you { color: var(--gold-2); background: rgba(227, 183, 90, .1); border-color: rgba(227, 183, 90, .45); }
.how-pay { color: #a8e0b5; background: rgba(143, 209, 158, .08); border-color: rgba(143, 209, 158, .4); unicode-bidi: isolate; white-space: nowrap; }
.how-options { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .8rem; }
.how-options > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .05rem .65rem; padding: .75rem .9rem; border-radius: 14px; background: rgba(15, 13, 10, .5); border: 1px solid var(--line); }
.how-options .ico { grid-row: span 2; width: 24px; height: 24px; color: var(--gold); }
.how-options strong { font-size: .95rem; }
.how-options small { color: var(--faint); font-size: .82rem; line-height: 1.55; }

.how-duties { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; max-width: 860px; margin: 2.5rem auto 0; }
.how-duties article { padding: 1.4rem 1.5rem; border-radius: var(--radius); border: 1px solid var(--line-strong); background: rgba(227, 183, 90, .04); }
.how-duties h3 { display: flex; align-items: center; gap: .55rem; font-size: 1.08rem; margin-bottom: .8rem; }
.how-duties h3 .ico { width: 22px; height: 22px; color: var(--gold); }
.how-duties ul { display: flex; flex-direction: column; gap: .45rem; }
.how-duties li { position: relative; padding-inline-start: 1.25rem; color: var(--muted); font-size: .95rem; line-height: 1.7; }
.how-duties li::before { content: ""; position: absolute; top: .7em; inset-inline-start: 0; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--gold-grad); }
.how-rules { max-width: 860px; margin: 1.25rem auto 0; padding: 1.25rem 1.5rem; border-radius: var(--radius); border: 1px dashed rgba(226, 131, 106, .45); background: rgba(226, 131, 106, .05); }
.how-rules h3 { display: flex; align-items: center; gap: .55rem; font-size: 1.02rem; margin-bottom: .7rem; }
.how-rules h3 .ico { width: 20px; height: 20px; color: #e2836a; }
.how-rules ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.how-rules li { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .9rem; border-radius: 999px; font-size: .88rem; color: #f2c9bc; background: rgba(226, 131, 106, .08); border: 1px solid rgba(226, 131, 106, .3); }
.how-rules li .ico { width: 16px; height: 16px; color: #e2836a; }

.how-money { padding-top: clamp(40px, 6vw, 72px); }
.how-calc {
  display: grid; grid-template-columns: minmax(220px, .8fr) 1.6fr; align-items: center; gap: 1.5rem; max-width: 900px; margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2rem); border-radius: calc(var(--radius) + 2px); border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(227, 183, 90, .08), rgba(27, 23, 17, .6));
}
.how-calc input { font-size: 1.25rem; font-weight: 700; letter-spacing: .02em; }
.calc-out { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.calc-out > div { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.15rem; border-radius: 16px; background: rgba(15, 13, 10, .6); border: 1px solid var(--line); }
.calc-out span { color: var(--muted); font-size: .88rem; }
.calc-out strong { font-family: var(--font-head); font-size: 1.9rem; line-height: 1.3; color: var(--gold-2); }
.calc-out strong::after { content: " ريال"; font-size: .9rem; color: var(--faint); font-weight: 600; }
.calc-out small { color: var(--faint); font-size: .82rem; }
.calc-out small b { color: var(--muted); }
.how-more { margin-top: 1.75rem; text-align: center; }
.how-end { padding-top: 0; }
.how-cta {
  max-width: 760px; margin: 0 auto; padding: clamp(1.75rem, 4vw, 2.75rem); text-align: center; border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(227, 183, 90, .5); background: radial-gradient(circle at 50% 0%, rgba(227, 183, 90, .16), transparent 70%), var(--surface);
}
.how-cta h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: .5rem; }
.how-cta p { color: var(--muted); margin-bottom: 1.4rem; }

@media (max-width: 900px) {
  .how-flow { grid-template-columns: 1fr; max-width: 420px; }
  .how-link { flex-direction: row; justify-content: center; gap: .6rem; }
  .how-link i { width: 2px; height: 34px; background: linear-gradient(transparent, var(--gold-3), transparent); }
  .how-link i::before, .how-link i::after { display: none; }
  .how-link span { flex: 1; }
  .how-link span:first-child { text-align: left; }
  .how-link span:last-child { text-align: right; }
  .how-cards { grid-template-columns: 1fr; }
  .how-calc { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .how-modes { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .how-modes button { justify-content: center; padding: .7rem .6rem; font-size: .92rem; }
  .how-steps > li { grid-template-columns: 42px 1fr; gap: .8rem; }
  .how-steps > li::before { top: 46px; right: 20px; }
  .how-num { width: 42px; height: 42px; font-size: 1.05rem; }
  .how-options, .how-duties, .calc-out { grid-template-columns: 1fr; }
}

/* ---------- سياسة الخصوصية ---------- */
.legal { max-width: 820px; margin-inline: auto; }
.legal-meta { margin-bottom: 2rem; color: var(--faint); font-size: .92rem; text-align: center; }
.legal h2 { font-size: clamp(1.2rem, 2.4vw, 1.45rem); margin: 2.4rem 0 .8rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.legal p, .legal li { color: var(--muted); font-size: 1.02rem; line-height: 1.95; }
.legal p + p { margin-top: .8rem; }
.legal ul { display: flex; flex-direction: column; gap: .45rem; margin: .8rem 0; }
.legal li { position: relative; padding-inline-start: 1.3rem; }
.legal li::before { content: ""; position: absolute; top: .8em; inset-inline-start: 0; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--gold-grad); }
.legal strong { color: var(--text); }
.legal a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }
.legal-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2.75rem; }
.legal-summary > div { padding: 1.3rem 1.4rem; border-radius: var(--radius); border: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(227, 183, 90, .08), rgba(27, 23, 17, .5)); }
.legal-summary .service-icon { width: 46px; height: 46px; margin-bottom: .8rem; }
.legal .legal-summary h2 { margin: 0 0 .3rem; padding: 0; border: 0; font-size: 1.1rem; }
.legal .legal-summary p { font-size: .98rem; line-height: 1.85; }
.legal-summary strong { color: var(--gold-2); }

@media (max-width: 600px) {
  .legal-summary { grid-template-columns: 1fr; }
  .page-hero { padding-top: calc(var(--header-h) + 40px); }
  .followers-row { grid-template-columns: auto 1fr; }
  .followers-row > .field, .followers-row > .followers-auto { grid-column: 1 / -1; }
  .adm-tabs { border-radius: 18px; }
  .adm-tabs button { flex: 1 1 auto; justify-content: center; }
  .dir-grid { grid-template-columns: 1fr; }
}