/* ============================================================================
   build.css — باني الفريق التشغيلي + تصفّح المشغّلين + الملف المهني
                                                            [FDX_FUOP_BUILD_CSS]
   يخدم: build.html · operators.html · operator.html
   يعتمد توكنات fuop.css ولا يعدّلها. مالك الملف: جلسة «باني الفريق».
   لا تضع هنا مكوّناً عاماً — مكانه fuop.css.
   ========================================================================= */

/* ═══════════════════ مشترك بين الصفحات الثلاث ═══════════════════ */

.pg-hero{padding-block:var(--s6) var(--s5);position:relative}
.pg-hero::before{content:"";position:absolute;inset-block-start:calc(var(--s8) * -1);inset-inline:0;
  block-size:340px;z-index:-1;pointer-events:none;
  background:radial-gradient(900px 380px at 82% -30%, color-mix(in srgb,var(--brand) 13%,transparent), transparent 62%),
             radial-gradient(700px 340px at 6% -20%, color-mix(in srgb,var(--deep) 12%,transparent), transparent 60%)}
.pg-hero h1{margin-block:var(--s2) var(--s3)}
.pg-hero .lead{margin-block-end:0}

/* شبكة «محتوى + عمود جانبي لاصق» */
.split{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:var(--s5);align-items:start}
.split.flip{grid-template-columns:320px minmax(0,1fr)}
.side-col{position:sticky;inset-block-start:calc(var(--topbar) + var(--s4));
  display:flex;flex-direction:column;gap:var(--s4)}

/* لا توجد بيانات بعد — سطر موحّد لكل قيمة غائبة */
.nodata{color:var(--ink-4);font-weight:600;font-size:var(--fs-sm)}

/* ═══════════════════ ① باني الفريق — build.html ═══════════════════ */

.wz-steps{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4) var(--s3);box-shadow:var(--sh-1);margin-block-end:var(--s5)}
.wz-steps .step{cursor:default}
.wz-steps .step[data-go]{cursor:pointer}
.wz-steps .step[data-go]:hover .lbl{color:var(--brand-ink)}
.wz-steps .step[data-go]:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r-sm)}

.wz-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-1);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s5)}
.wz-panel > header{display:flex;flex-direction:column;gap:6px}
.wz-panel > header .h3{margin:0}
.wz-panel > header p{color:var(--ink-3);font-size:var(--fs-sm);line-height:1.7;max-inline-size:72ch}

.wz-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-block-start:var(--s5);flex-wrap:wrap}
.wz-foot .save-note{font-size:var(--fs-xs);color:var(--ink-4);display:inline-flex;align-items:center;gap:6px}
.wz-foot .save-note .ico{inline-size:14px;block-size:14px}

/* الخطوة ①: اختيار الدور */
.role-search{max-inline-size:420px}
.role-pick-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.role-pick{position:relative;display:flex;flex-direction:column;gap:var(--s2);text-align:start;
  padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  cursor:pointer;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);inline-size:100%}
.role-pick:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line));box-shadow:var(--sh-2);transform:var(--lift)}
.role-pick[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-050);
  box-shadow:0 0 0 1px var(--brand) inset}
.role-pick .rp-top{display:flex;align-items:flex-start;gap:var(--s3)}
.role-pick .rp-ico{inline-size:40px;block-size:40px;border-radius:var(--r);flex:none;display:grid;
  place-items:center;background:var(--brand-050);color:var(--brand-ink)}
.role-pick[aria-pressed="true"] .rp-ico{background:var(--brand-fill);color:#fff}
.role-pick .rp-name{font-weight:800;font-size:var(--fs-md);line-height:1.35;color:var(--ink)}
.role-pick .rp-en{font-size:var(--fs-xs);color:var(--ink-4);font-weight:600;direction:ltr;text-align:start}
.role-pick .rp-tag{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.6;flex:1}
.role-pick .rp-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding-block-start:var(--s2);border-block-start:1px solid var(--line);font-size:var(--fs-xs);color:var(--ink-3)}
.role-pick .rp-price{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.role-pick .rp-check{position:absolute;inset-block-start:var(--s3);inset-inline-end:var(--s3);
  inline-size:20px;block-size:20px;border-radius:50%;display:none;place-items:center;
  background:var(--brand-fill);color:#fff}
.role-pick[aria-pressed="true"] .rp-check{display:grid}
.role-pick[aria-pressed="true"] .rp-foot{border-block-start-color:color-mix(in srgb,var(--brand) 30%,transparent)}

/* الخطوة ②: الحجم والمستوى */
.lvl-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.opt-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:var(--s4);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);cursor:pointer;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.opt-card:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.opt-card input{position:absolute;opacity:0;inline-size:1px;block-size:1px}
.opt-card:has(input:checked){border-color:var(--brand);background:var(--brand-050);
  box-shadow:0 0 0 1px var(--brand) inset}
.opt-card:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
.opt-card .oc-t{font-weight:800;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.opt-card .oc-d{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.65}
.opt-card .oc-p{font-size:var(--fs-xs);font-weight:700;color:var(--brand-ink);
  font-variant-numeric:tabular-nums;margin-block-start:4px}
.opt-card .oc-p.nodata{color:var(--ink-4);font-weight:600}

.mo-row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.mo-chips{display:flex;gap:6px;flex-wrap:wrap}
.mo-chips button{font-size:var(--fs-sm);font-weight:700;padding:6px 14px;border-radius:var(--r-full);
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  transition:all var(--dur-fast) var(--ease)}
.mo-chips button:hover{border-color:var(--brand);color:var(--brand-ink)}
.mo-chips button[aria-pressed="true"]{background:var(--brand-fill);border-color:var(--brand-fill);color:#fff}

/* الخطوة ③ */
.q-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pill-picks{display:flex;flex-wrap:wrap;gap:6px}
.pill-picks button{font-size:var(--fs-sm);font-weight:600;padding:5px 13px;border-radius:var(--r-full);
  border:1px dashed var(--line);background:var(--surface-2);color:var(--ink-2)}
.pill-picks button:hover{border-style:solid;border-color:var(--brand);color:var(--brand-ink)}
.pill-picks button[aria-pressed="true"]{background:var(--brand-050);border-style:solid;
  border-color:var(--brand);color:var(--brand-ink)}
.guest-box{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);padding:var(--s5)}
.guest-box .gb-h{font-weight:800;margin-block-end:4px}
.guest-box .gb-s{font-size:var(--fs-sm);color:var(--ink-3);margin-block-end:var(--s4);line-height:1.7}

/* الخطوة ④ المراجعة */
.rev-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.rev-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);background:var(--surface-2)}
.rev-card .rc-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-block-end:var(--s3)}
.rev-card .rc-h .t{font-weight:800;font-size:var(--fs-md)}
.rev-list{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);align-items:baseline;
  font-size:var(--fs-sm)}
.rev-list dt{color:var(--ink-3);font-weight:600;white-space:nowrap}
.rev-list dd{margin:0;color:var(--ink);font-weight:600;overflow-wrap:anywhere}

/* الخطوة ⑤ نجاح */
.done-wrap{text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--s4);
  padding-block:var(--s5)}
.done-mark{inline-size:82px;block-size:82px;border-radius:50%;display:grid;place-items:center;
  background:var(--ok-050);color:var(--ok-ink);position:relative}
.done-mark .ico{inline-size:40px;block-size:40px;stroke-width:2}
.done-mark::after{content:"";position:absolute;inset:-8px;border-radius:inherit;
  border:1px dashed color-mix(in srgb,var(--ok) 45%,transparent)}
.ref-big{font-family:var(--font-mono);font-size:var(--fs-2xl);font-weight:800;letter-spacing:.04em;
  color:var(--ink);background:var(--surface-2);border:1px dashed var(--line);
  border-radius:var(--r);padding:var(--s3) var(--s5);display:inline-flex;align-items:center;gap:var(--s3)}
.next-steps{text-align:start;inline-size:100%;max-inline-size:620px;margin-inline:auto}

/* عمود التسعيرة */
.quote-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-2);overflow:hidden}
.quote-card .qc-head{padding:var(--s4) var(--s5);background:var(--grad);color:#fff}
.quote-card .qc-head .k{font-size:var(--fs-xs);font-weight:700;opacity:.9}
.quote-card .qc-head .v{font-size:var(--fs-3xl);font-weight:800;line-height:1.15;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.quote-card .qc-head .v small{font-size:var(--fs-sm);font-weight:700;opacity:.9}
.quote-card .qc-head .sub{font-size:var(--fs-xs);opacity:.9;margin-block-start:4px}
.quote-card .qc-body{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
.quote-card .qc-foot{padding:var(--s4) var(--s5);border-block-start:1px solid var(--line);
  background:var(--surface-2);font-size:var(--fs-xs);color:var(--ink-3);line-height:1.7}
.qc-why{border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);overflow:hidden}
.qc-why > summary{padding:10px var(--s4);font-size:var(--fs-sm);font-weight:700;color:var(--brand-ink);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.qc-why > summary::after{content:"";inline-size:8px;block-size:8px;flex:none;
  border:solid var(--ink-3);border-width:0 2px 2px 0;transform:rotate(45deg);margin-block-start:-4px;
  transition:transform var(--dur) var(--ease)}
.qc-why[open] > summary::after{transform:rotate(-135deg);margin-block-start:2px}
.qc-why ol{margin:0;padding:0 var(--s4) var(--s4);list-style:none;display:flex;flex-direction:column;gap:6px}
.qc-why li{font-size:var(--fs-xs);color:var(--ink-2);line-height:1.7;padding-inline-start:14px;position:relative}
.qc-why li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:8px;
  inline-size:5px;block-size:5px;border-radius:50%;background:var(--brand);opacity:.6}

/* ═══════════════════ ② المشغّلون — operators.html ═══════════════════ */

.filters{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s5)}
.filters .fg{display:flex;flex-direction:column;gap:var(--s2)}
.filters .fg > .label{margin-block-end:2px}
.filters .fg .scrolly{max-block-size:186px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;
  padding-inline-end:4px}
.f-check{display:flex;align-items:center;gap:var(--s2);cursor:pointer;font-size:var(--fs-sm);
  color:var(--ink-2);padding:3px 0}
.f-check input{inline-size:16px;block-size:16px;accent-color:var(--brand);flex:none}
.f-check .n{margin-inline-start:auto;font-size:var(--fs-xs);color:var(--ink-4);
  font-variant-numeric:tabular-nums}
.f-check:hover{color:var(--ink)}
.filters-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}

.ops-toolbar{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-block-end:var(--s4)}
.ops-toolbar .grow{flex:1 1 220px;min-inline-size:0}
.ops-count{font-size:var(--fs-sm);color:var(--ink-3)}
.ops-count strong{color:var(--ink);font-variant-numeric:tabular-nums}
.active-chips{display:flex;gap:6px;flex-wrap:wrap;margin-block-end:var(--s4)}

.ops-grid2{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
.ops-grid2 .op-card{cursor:pointer}

/* تلميح داخل مجموعة تصفية (خارج .field فلا يرثه من fuop.css) */
.filters .fg .hint{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.6}

/* رسم الحالة الفارغة — صورة من مكتبة الرسوم بدل الأيقونة الصمّاء */
.empty .art-img{inline-size:150px;block-size:auto;max-inline-size:100%;margin-block-end:var(--s2)}

/* زر التصفية يظهر حين يختفي العمود الجانبي فقط */
.filt-btn{display:none}

/* داخل اللوح السفلي: البطاقة تفقد إطارها فلا يتكرّر إطار فوق إطار،
   وقوائمها تتمدّد فلا يقع تمرير داخل تمرير على الجوال. */
.sheet-body .filters{border:0;box-shadow:none;padding:0;background:transparent}
.sheet-body .filters .filters-head{display:none}
.sheet-body .filters .scrolly{max-block-size:none;overflow:visible}

/* أفاتار مولّد من البذرة — نفس البذرة ⇒ نفس الشكل دائماً
   الاسم `mono-av` لا `mono`: الأخيرة مأخوذة في fuop.css لأرقام جدولية بخط أحادي. */
.mono-av{--msz:52px;inline-size:var(--msz);block-size:var(--msz);border-radius:var(--r);flex:none;
  display:grid;place-items:center;font-weight:800;font-size:calc(var(--msz) * .36);
  letter-spacing:.04em;overflow:hidden;position:relative;line-height:1}
.mono-av.lg{--msz:104px;border-radius:var(--r-lg);font-size:calc(var(--msz) * .32)}
.mono-av.sm{--msz:38px;border-radius:var(--r-sm);font-size:calc(var(--msz) * .38)}
.mono-av::after{content:"";position:absolute;inset:0;
  background:linear-gradient(var(--mono-a,140deg),rgba(255,255,255,.20),transparent 62%)}
.mono-av span{position:relative;z-index:1}
.mono-av img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;z-index:2}

/* بوابة تسجيل الدخول: عيّنة ضبابية خلف نداء الدخول */
.gate{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);
  background:var(--surface-2)}
.gate-sample{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  padding:var(--s5);filter:blur(6px);opacity:.55;pointer-events:none;user-select:none}
.gate-veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--s3);text-align:center;padding:var(--s6) var(--s5);
  background:color-mix(in srgb,var(--surface) 74%,transparent);backdrop-filter:blur(3px)}
.gate-veil .g-ico{inline-size:56px;block-size:56px;border-radius:var(--r-lg);display:grid;
  place-items:center;background:var(--brand-050);color:var(--brand-ink)}
.gate-veil .g-t{font-size:var(--fs-xl);font-weight:800;color:var(--ink)}
.gate-veil .g-d{font-size:var(--fs-sm);color:var(--ink-2);max-inline-size:46ch;line-height:1.8}
.gate-sample .sk-op{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);min-block-size:250px}

/* ═══════════════════ ③ الملف المهني — operator.html ═══════════════════ */

.op-hero{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-1);padding:var(--s6);display:flex;gap:var(--s5);align-items:flex-start;
  flex-wrap:wrap;position:relative;overflow:hidden}
.op-hero::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:4px;background:var(--grad-line)}
.op-hero .oh-main{flex:1 1 300px;min-inline-size:0;display:flex;flex-direction:column;gap:var(--s3)}
.op-hero .oh-name{font-size:var(--fs-2xl);font-weight:800;line-height:1.2;color:var(--ink)}
.op-hero .oh-title{font-size:var(--fs-lg);color:var(--ink-2);font-weight:600}
.op-hero .oh-meta{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.op-hero .oh-bio{font-size:var(--fs-md);color:var(--ink-2);line-height:1.85;max-inline-size:70ch}
.op-hero .oh-side{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--s3);align-items:center}
.op-hero .oh-code{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink-4);letter-spacing:.05em}

.facts{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  padding-block-start:var(--s4);border-block-start:1px solid var(--line);inline-size:100%}
.fact{display:flex;flex-direction:column;gap:2px}
.fact .k{font-size:var(--fs-xs);color:var(--ink-3);font-weight:600}
.fact .v{font-size:var(--fs-lg);font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.3}
.fact .v.nodata{font-size:var(--fs-sm);font-weight:600;color:var(--ink-4)}

.sec-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
.sec-card > h2,.sec-card > h3{font-size:var(--fs-lg);font-weight:800;margin:0}
.sec-note{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.7}

.skill-list{display:flex;flex-direction:column;gap:var(--s3)}
.skill-row{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:var(--s3);align-items:center}
.skill-row .sn{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);overflow-wrap:anywhere}
.dots{display:flex;gap:4px;justify-content:flex-end}
.dots i{inline-size:11px;block-size:11px;border-radius:50%;background:var(--track);display:block}
.dots i.on{background:var(--brand-fill)}

.perf-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  justify-items:center;text-align:center}
.perf-cell{display:flex;flex-direction:column;align-items:center;gap:var(--s2)}
.perf-cell .pc-k{font-size:var(--fs-xs);color:var(--ink-3);font-weight:600}

.hours-grid{display:flex;gap:6px;flex-wrap:wrap}
.hours-grid .d{font-size:var(--fs-xs);font-weight:700;padding:5px 11px;border-radius:var(--r-full);
  background:var(--brand-050);color:var(--brand-ink)}

.media-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.media-item{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);
  font-size:var(--fs-sm);color:var(--ink-2)}
.media-item .ico{color:var(--brand-ink);flex:none}
.media-item .mi-t{font-weight:600;overflow-wrap:anywhere}

.hire-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-2);overflow:hidden}
.hire-card .hc-price{padding:var(--s5);border-block-end:1px solid var(--line);text-align:center}
.hire-card .hc-price .p{font-size:var(--fs-3xl);font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.1}
.hire-card .hc-price .u{font-size:var(--fs-sm);color:var(--ink-3);font-weight:600;display:block;margin-block-start:4px}
.hire-card .hc-price .p.nodata{font-size:var(--fs-lg);color:var(--ink-4)}
.hire-card .hc-body{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.hire-card .hc-note{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.7;text-align:center}

.backup-box{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);border-radius:var(--r);
  background:var(--warn-050);border:1px solid color-mix(in srgb,var(--warn) 32%,transparent)}
.backup-box .bb-t{font-size:var(--fs-sm);font-weight:700;color:var(--warn-ink)}
.backup-box .bb-d{font-size:var(--fs-xs);color:var(--ink-2)}

.review{padding:var(--s4);border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.review .rv-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-block-end:var(--s2);flex-wrap:wrap}
.review .rv-txt{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.8}

/* المشغّلون المطلوبون بالاسم (يأتون من صفحة الملف المهني) */
.prefer-list{display:flex;flex-direction:column;gap:var(--s2)}
.prefer-item{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.prefer-item .pi-main{flex:1;min-inline-size:0;display:flex;flex-direction:column;gap:1px}
.prefer-item .pi-n{font-weight:700;font-size:var(--fs-sm);color:var(--ink)}
.prefer-item .pi-t{font-size:var(--fs-xs);color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* شريط نطاق السعر في مصفوفة التصفية */
.price-row{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s2);align-items:center}
.price-row .dash{color:var(--ink-4);font-weight:700}
.price-row .input{inline-size:100%}

/* ملاحظة «غير متاح بعد» — لا نُظهر حقلاً يوهم بأنه يعمل */
.soon-box{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4);
  border:1px dashed var(--line);border-radius:var(--r);background:var(--surface-2);
  font-size:var(--fs-sm);color:var(--ink-2);line-height:1.7}
.soon-box .ico{color:var(--ink-4);flex:none;margin-block-start:2px}

/* ═══════════════════ متجاوب ═══════════════════ */
@media (max-width:1040px){
  .split,.split.flip{grid-template-columns:minmax(0,1fr)}
  .side-col{position:static}
  .split.flip .side-col{order:-1}
  .wz-panel{padding:var(--s5)}
  /* مصفوفة التصفية تنتقل إلى لوح سفلي — نفس العنصر لا نسخة منه */
  .side-col.ops-side{display:none}
  .filt-btn{display:inline-flex}
}
@media (max-width:640px){
  .pg-hero{padding-block:var(--s5) var(--s4)}
  .wz-panel{padding:var(--s4);border-radius:var(--r-lg)}
  .wz-steps{padding:var(--s3) var(--s2)}
  .wz-steps .step{min-inline-size:74px}
  .wz-steps .step .lbl{font-size:11px}
  .wz-foot{flex-direction:column-reverse;align-items:stretch}
  .wz-foot .btn{inline-size:100%;justify-content:center}
  .wz-foot .save-note{justify-content:center}
  .role-pick-grid,.ops-grid2,.gate-sample{grid-template-columns:1fr}
  .lvl-grid,.q-grid,.rev-grid{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .op-hero{padding:var(--s5);flex-direction:column;align-items:stretch}
  .op-hero .oh-side{align-items:flex-start}
  .ref-big{font-size:var(--fs-xl);padding:var(--s3);inline-size:100%;justify-content:center}
  .quote-card .qc-head .v{font-size:var(--fs-2xl)}
  .skill-row{grid-template-columns:minmax(0,1fr) 78px}
}

/* ═══════════════════ الوضع الداكن — ما يحتاج ضبطاً إضافياً فقط ═══════════════════ */
:root[data-theme="dark"] .gate-veil{background:color-mix(in srgb,var(--surface) 68%,transparent)}
:root[data-theme="dark"] .quote-card .qc-head{background:var(--grad-sm)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .gate-veil{background:color-mix(in srgb,var(--surface) 68%,transparent)}
  :root:not([data-theme="light"]) .quote-card .qc-head{background:var(--grad-sm)}
}
@media (prefers-reduced-motion:reduce){
  .role-pick:hover,.opt-card:hover{transform:none}
}