:root{
--bg:#0B1A1D;
--bg-2:#0E2226;
--surface:#122A2F;
--card:#16333A;
--line:#1F4249;
--teal:#1FA9A5;
--teal-strong:#17807D;
--teal-ink:#06211F; /* نص فوق خلفية تيل — ينبدل أبيض بالهوية الجديدة (mapp-on) */
--teal-soft:rgba(31,169,165,.14);
--gold:#D4AC4E;
--text:#EAF4F3;
--muted:#8FAAA8;
--faint:#5F7B79;
--success:#3BC98A;
--error:#E5545A;
--radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
background:linear-gradient(180deg,#0F2327 0%, #0C1D21 100%);
color:var(--text);
font-family:'Segoe UI', Tahoma, 'Noto Naskh Arabic', sans-serif;
min-height:100vh;
min-height:100dvh;
direction:rtl;
}
.app{
max-width:430px;margin:0 auto;min-height:100vh;min-height:100dvh;
display:flex;flex-direction:column;padding:26px 22px 24px;position:relative;
}
.screen{display:none;flex-direction:column;flex:1;animation:fadeIn .3s ease}
.screen.on{display:flex}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.screen.on{animation:none}}
/* ===== الشعار ===== */
.brand{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:34px}
.logo-app{
width:80px;height:80px;border-radius:22px;
background:linear-gradient(135deg, var(--teal) 0%, var(--teal-strong) 100%);
display:flex;align-items:center;justify-content:center;color:var(--gold);
}
/* نجمة شمش تنحط بجافاسكربت من `SUP_STAR` — مصدر واحد ويا شاشة المساعد */
.logo-app svg{width:46px;height:46px;display:block}
.brand h2{font-size:34px;font-weight:800;letter-spacing:.02em}
.brand .tagline{color:var(--muted);font-size:14px;text-align:center;line-height:1.9;max-width:270px}
.brand .tagline b{color:var(--teal);font-weight:600}
/* ===== بطاقات الاختيار ===== */
.choices{display:flex;flex-direction:column;gap:14px;margin-top:44px}
.choice{
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:18px;display:flex;align-items:center;gap:14px;cursor:pointer;text-align:right;
font-family:inherit;color:var(--text);transition:border-color .18s ease, transform .18s ease;
width:100%;
}
.choice:hover{border-color:var(--teal);transform:translateY(-2px)}
.choice:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.choice .ic{
width:46px;height:46px;border-radius:13px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;background:var(--teal-soft);
}
.choice .ic svg{width:24px;height:24px;stroke:var(--teal)}
.choice.gold .ic{background:rgba(212,172,78,.12)}
.choice.gold .ic svg{stroke:var(--gold)}
.choice .tx{flex:1}
.choice .tx b{display:block;font-size:16px;margin-bottom:4px}
.choice .tx span{color:var(--muted);font-size:12.5px;line-height:1.7;display:block}
.choice .arrow{color:var(--faint);font-size:18px}
.start-foot{margin-top:auto;text-align:center;color:var(--faint);font-size:11.5px;padding-top:30px}
/* ===== شاشات الدخول ===== */
.top-bar{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.back{
background:none;border:1px solid var(--line);color:var(--muted);width:36px;height:36px;
border-radius:11px;cursor:pointer;font-size:16px;font-family:inherit;line-height:1;
transition:all .18s ease;flex-shrink:0;
}
.back:hover{color:var(--text);border-color:var(--teal)}
.back:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.role-chip{
display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);
background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px;
}
.role-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.role-chip.gold .dot{background:var(--gold)}
.auth-head{margin:26px 0 4px}
.auth-head h3{font-size:23px;font-weight:700}
.auth-head p{color:var(--muted);font-size:13.5px;margin-top:6px;line-height:1.8}
.tabs{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:4px;margin:18px 0 6px}
.tabs button{
flex:1;background:none;border:none;color:var(--muted);padding:9px;border-radius:10px;
font-size:14px;cursor:pointer;font-family:inherit;transition:all .18s ease;
}
.tabs button.active{background:var(--card);color:var(--text);font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.tabs button:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.form{display:flex;flex-direction:column;gap:13px;margin-top:14px}
/* التسمية صف مرن حتى ينزاح عدّاد الحروف المتبقية لآخر السطر */
.field label{
display:flex;justify-content:space-between;align-items:baseline;gap:8px;
font-size:12.5px;color:var(--muted);margin-bottom:6px;
}
.field label .cnt{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;flex-shrink:0}
.field label .cnt.low{color:var(--error)}
.field .box{
display:flex;align-items:center;gap:10px;background:var(--surface);
border:1px solid var(--line);border-radius:13px;padding:0 14px;transition:border-color .18s ease;
}
.field .box:focus-within{border-color:var(--teal)}
.field svg{width:17px;height:17px;stroke:var(--faint);flex-shrink:0}
.field input{
flex:1;background:none;border:none;outline:none;color:var(--text);
font-family:inherit;font-size:14.5px;padding:13px 0;min-width:0;
}
.field input::placeholder{color:var(--faint)}
.field input:dir(ltr){text-align:left}
.btn-primary{
background:linear-gradient(135deg, var(--teal) 0%, var(--teal-strong) 100%);
color:var(--teal-ink);font-weight:700;border:none;border-radius:13px;padding:15px;
font-size:15.5px;cursor:pointer;font-family:inherit;margin-top:8px;
transition:filter .18s ease, transform .18s ease, opacity .18s ease;
}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-primary:disabled{opacity:.55;cursor:wait;transform:none}
.btn-primary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn-ghost{
background:none;border:1px solid var(--line);color:var(--text);border-radius:13px;padding:14px;
font-size:14.5px;cursor:pointer;font-family:inherit;transition:all .18s ease;
}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal)}
.btn-ghost:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.forgot{text-align:center;color:var(--muted);font-size:13px;margin-top:2px;background:none;border:none;cursor:pointer;font-family:inherit}
.forgot:hover{color:var(--teal)}
.forgot:disabled{opacity:.55;cursor:default}
.forgot:disabled:hover{color:var(--muted)}
.hidden{display:none}
.auth-foot{margin-top:auto;padding-top:24px;text-align:center;color:var(--faint);font-size:11.5px;line-height:1.8}
.auth-foot .gold-line{color:var(--gold);opacity:.75}
/* ===== رسالة خطأ/نجاح ===== */
.msg{
border-radius:13px;padding:12px 15px;font-size:13.5px;line-height:1.8;display:none;
}
.msg.on{display:block;animation:fadeIn .25s ease}
.msg.err{background:rgba(229,84,90,.12);border:1px solid rgba(229,84,90,.4);color:#F4A9AC}
.msg.ok{background:rgba(59,201,138,.12);border:1px solid rgba(59,201,138,.4);color:#9FE8C8}
.msg.warn{background:rgba(201,162,39,.12);border:1px solid rgba(201,162,39,.45);color:#E3C766}
/* ===== لافتة دعوة المسوّق (?ref=) ===== */
/* ذهبية عمداً — نفس لون باب المسوّق بشاشة البداية، فالتاجر يربط
الرابط اللي وصله بالشخص اللي دزّه إله */
.ref-note{
display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:13px;
background:rgba(201,162,39,.10);border:1px solid rgba(201,162,39,.35);
margin-top:8px;
}
.ref-note .ic{
width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
background:rgba(201,162,39,.18);color:var(--gold);font-size:14px;
}
.ref-note .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.ref-note b{font-size:13.5px;font-weight:800;color:var(--ink)}
.ref-note .tx span{font-size:11.5px;color:var(--muted)}
/* كود ما انلكى — تنبيه مو منع. التسجيل يكمّل بدونه، فما ننطيها
ثقل الخطأ الأحمر الكامل: إطار وأيقونة بس */
.ref-note.bad{background:rgba(229,84,90,.08);border-color:rgba(229,84,90,.38)}
.ref-note.bad .ic{background:rgba(229,84,90,.16);color:var(--error);font-weight:800}
/* «اختياري» جنب التسمية — ينزاح لآخر السطر مثل عدّاد الحروف.
⚠️ `--muted` مو `--faint`: الفاتح تباينه ٢.٢٨ يعني شبه ما ينقرا،
وهذي كلمة تقرر إذا يعبّي الخانة لو لا. */
.field label .opt{font-size:11px;color:var(--muted);flex-shrink:0;font-weight:600}
/* ===== شاشة تفعيل القسم الثاني ===== */
.center-card{
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:24px;text-align:center;margin-top:30px;
}
.center-card .big{font-size:40px;margin-bottom:12px}
.center-card h4{font-size:19px;margin-bottom:10px;line-height:1.6}
.center-card p{color:var(--muted);font-size:13.5px;line-height:1.95}
/* شاشة «دزّينالك رابط تأكيد» (#scr-verify) — تستعمل `.center-card`
وتزيد سطرين بس. الإيميل بارز عمداً: أكثر سبب «ما وصلتني الرسالة»
هو غلطة حرف بيه، وهذي اللحظة الوحيدة اللي يشوفه بيها. */
.vf-mail{
margin:14px 0 4px;padding:10px 14px;border-radius:12px;
background:var(--bg);border:1px dashed var(--line);
font-size:15px;font-weight:700;word-break:break-all;
}
/* 🔴 زر إعادة الإرسال يقعد **مقفولاً دقيقة كاملة**، والعدّاد جوّاه
(«تكدر تعيد الإرسال بعد ٤٧ ثانية») هو النص الوحيد اللي يقراه
التاجر بهاي اللحظة. و`.btn-primary:disabled` العامة تخفّته
بـ`opacity:.55` — يعني أبيض على لازورد مبهت = **٣.٠٠** والحد ٤.٥.
فهنا ينقلب لشكل «معلومة» بدل «زر ميت»: خلفية شفافة وحد متقطّع
ونص `--muted` (مفحوص فوك ٤.٥ بالوضعين).
⛔ ولا تصلّحها بتبديل `.btn-primary:disabled` العامة — مستعملة
بعشرين مكان ثاني وكلها لحظات قصيرة مو دقيقة كاملة. */
#btn-vf-resend:disabled{
opacity:1;background:none;color:var(--muted);cursor:default;
border:1px dashed var(--line);font-weight:600;
}
.vf-hint{font-size:12.5px}
/* ⚠️ `--text` مو `--ink` — `--ink` معرَّفة بـ`body.mapp-on` وحدها،
و`--text` معرَّفة بـ`:root` هم فما تنكسر لو انشال الكلاس يوماً. */
.vf-hint b{color:var(--text)}
/* ===== الشاشة الرئيسية المؤقتة ===== */
.home-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}
.home-head .who{display:flex;align-items:center;gap:12px}
.avatar{
width:44px;height:44px;border-radius:50%;flex-shrink:0;
background:linear-gradient(135deg, var(--teal) 0%, var(--teal-strong) 100%);
display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:var(--teal-ink);
}
.avatar.gold{background:linear-gradient(135deg, #E8C15E 0%, var(--gold) 100%)}
.who .hi{font-size:12px;color:var(--muted)}
.who .nm{font-size:16px;font-weight:700}
.logout{
background:none;border:1px solid var(--line);color:var(--muted);border-radius:11px;
padding:8px 14px;font-size:13px;cursor:pointer;font-family:inherit;transition:all .18s ease;flex-shrink:0;
}
.logout:hover{color:var(--error);border-color:var(--error)}
.section-tag{
display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
font-size:12px;color:var(--teal);background:var(--teal-soft);
border-radius:999px;padding:5px 13px;margin-bottom:14px;
}
.section-tag.gold{color:var(--gold);background:rgba(212,172,78,.12)}
.home-card{
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:22px;text-align:center;
}
.home-card .big{font-size:38px;margin-bottom:10px}
.home-card h4{font-size:18px;margin-bottom:8px}
.home-card p{color:var(--muted);font-size:13.5px;line-height:1.9}
.home-card .stage{color:var(--gold);font-size:12.5px;margin-top:12px}
.home-actions{display:flex;flex-direction:column;gap:11px;margin-top:auto;padding-top:22px}
/* ===== قسم البزنس ===== */
.list-title{font-size:13.5px;color:var(--muted);margin:2px 0 12px;font-weight:600}
.biz-list{display:flex;flex-direction:column;gap:12px}
.choice .tx .meta{color:var(--faint);font-size:11.5px;display:block;margin-top:3px}
.steps{display:flex;gap:6px;margin:16px 0 4px}
.steps i{height:4px;flex:1;border-radius:99px;background:var(--line);transition:background .3s ease}
.steps i.on{background:var(--teal)}
/* ===== 🧭 مؤشّر رحلة التاجر (تصميم المستخدم ١٥ آب) =====
خمس محطات: سجّل ← اختار قالبك ← خصّصه ← انشره ← لوحتك.
⚠️ **چان نقطتين بلا كلام** («خطوة ١ من ٢» بشاشة الإنشاء وحدها) —
التاجر ما يعرف وين هو من الرحلة ولا شكَد باقي، فأول دخول يقرا
فوضى. القائمة بمكان واحد `ASHUR_STEPS` بـ`app.js`.
🔑 والمحطة الأخيرة «لوحة التحكم» **هي الوعد** — بلاها المؤشّر
يقرا كأنه شغل بلا نهاية. */
.jsteps{
display:flex;align-items:center;gap:5px;flex-wrap:nowrap;
margin:14px 0 2px;font-size:10.5px;font-weight:700;overflow:hidden;
}
.jsteps .st{
flex:none;padding:3px 9px;border-radius:99px;white-space:nowrap;
border:1px solid var(--line);background:var(--card);color:var(--muted);
}
.jsteps .st.done{color:var(--teal);border-color:color-mix(in srgb, var(--teal) 40%, transparent)}
/* ⛔ مو `#fff` — بالليلي `--teal` يصير لافندر فاتح (`#8a7fe8`) وأبيض
فوكه تباينه **٣.٣٤**. `--teal-ink` معرَّف للوضعين (أبيض نهاري ·
`#120e33` ليلي) وهو اللي تستعمله كل أزرار التطبيق. */
.jsteps .st.cur{background:var(--teal);border-color:var(--teal);color:var(--teal-ink)}
.jsteps .ln{flex:1;min-width:5px;height:1px;background:var(--line)}
/* فوك شاشة النشر الغامقة */
.jsteps.on-dark{margin-top:22px;max-width:330px}
.jsteps.on-dark .st{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.72)}
.jsteps.on-dark .st.done{color:#fff;border-color:rgba(255,255,255,.45)}
.jsteps.on-dark .st.cur{background:#fff;border-color:#fff;color:var(--teal)}
.jsteps.on-dark .ln{background:rgba(255,255,255,.22)}
/* ===== 🃏 بطاقة اختيار القالب (تصميم المستخدم ١٥ آب) =====
⚠️ **چانت بطاقة رفيعة بمصغّرة ٢٠٠px واسم ووصف** — المصغّرة صغيرة
ما تكفي ليقرر عليها، فيضغط «معاينة» بكل قالب ويرجع خمس مرات.
صارت **معاينة طويلة ٥١٢px تتمدّد لـ٧٨٠ بمكانها** بزر «معاينة»،
فالقرار ينتاخذ بلا ما يطلع من الشاشة. */
.pick-head{padding:12px 0 14px}
.pick-head h3{font-size:20px;font-weight:800;letter-spacing:-.2px;margin:0}
.pick-head p{font-size:11.5px;color:var(--muted);margin:4px 0 0;line-height:1.6}
.tpl-wrap{position:relative;margin:0 0 18px}
.tpl{
position:relative;background:var(--card);
border:3px solid var(--text);border-radius:20px;overflow:hidden;
display:block;width:100%;padding:0;cursor:pointer;
text-align:right;font-family:inherit;color:var(--text);
box-shadow:0 1px 3px rgba(0,0,0,.05);
transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.tpl:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.09)}
.tpl:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.tpl.sel{
border-color:var(--teal);
box-shadow:0 0 0 6px color-mix(in srgb, var(--teal) 15%, transparent),
0 12px 26px color-mix(in srgb, var(--teal) 22%, transparent);
}
/* شارة «✓ مختار» — تنطلع بس لمن ينختار، فما تكذب على الباقي */
.tpl .pk-b{
position:absolute;top:10px;left:10px;z-index:8;display:none;
align-items:center;gap:4px;background:var(--teal);color:#fff;
font-size:10.5px;font-weight:800;height:22px;padding:0 10px;border-radius:99px;
box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.tpl.sel .pk-b{display:inline-flex}
/* دائرة الاختيار — تخلّي «هذا مختار» واضحة بلا ما تقرا */
.tpl .rd{
position:absolute;bottom:10px;right:10px;z-index:8;
width:26px;height:26px;border-radius:50%;
background:var(--card);border:2px solid var(--line);
display:grid;place-items:center;color:transparent;
font-size:12px;font-weight:800;box-shadow:0 3px 10px rgba(0,0,0,.18);
transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.tpl.sel .rd{background:var(--teal);border-color:var(--teal);color:#fff}
.tpl-prev{
position:absolute;bottom:10px;left:10px;z-index:8;
height:28px;padding:0 13px;border-radius:99px;
border:1px solid var(--line);background:var(--card);color:var(--text);
font-size:11px;font-weight:800;font-family:inherit;cursor:pointer;
box-shadow:0 3px 10px rgba(0,0,0,.18);transition:border-color .15s ease;
}
.tpl-prev:hover{border-color:var(--muted)}
/* شريط المتابعة — لاصك بالأسفل، فالقرار ما يحتاج نزول لآخر الصفحة */
.pick-bar{
position:sticky;bottom:0;z-index:9;margin:0 -16px;
padding:22px 16px calc(14px + env(safe-area-inset-bottom));
background:linear-gradient(180deg, transparent 0%, var(--bg) 42%);
}
.pick-bar .btn-primary{box-shadow:0 8px 20px color-mix(in srgb, var(--teal) 30%, transparent)}
/* ===== مصغّرات القوالب — معاينة طويلة لكل قالب (تصميم المستخدم ١٥ آب) =====
⚠️ **چانت ٢٠٠px برسمة مبسّطة** (راس سادة + صفّين) — التاجر ما يكدر
يقرر منها، فيفتح «معاينة» بالخمسة ويرجع خمس مرات.
صارت **٥١٢px تعرض القالب كامل**: راسه هو · تبويباته هي · وبطاقات
منتجاته بتشريحها الحقيقي — وتتمدّد لـ**٧٨٠px بمكانها** بزر «معاينة».
🔑 **والخمسة ما يتشابهون بولا صف**: الأعمدة (١ أو ٢) · مكان النص من
الصورة (جنبها · تحتها · بصندوق منفصل · فوكها) · شكل الزر (بالسطر ·
مربّع ＋ · دائري عائم · عريض) · وشكل التبويب (كبسولة ١٠px · كبسولة
٩٩px · خط سفلي). ⛔ لا توحّدهن. */
.tpl .thumb{position:relative;overflow:hidden;background:var(--surface)}
.tmk{
position:relative;height:512px;overflow:hidden;
background:var(--mb);color:var(--mi);direction:rtl;text-align:right;line-height:1.5;
--pat:color-mix(in oklab, var(--ma) 72%, var(--mi));
}
/* الوضع الليلي — **تبديل متغيّرات بس**، ولا نسخة ثانية من التخطيط */
body.dark .tmk{--mb:var(--mb-d);--mc:var(--mc-d);--mi:var(--mi-d);--mu:var(--mu-d);--line:var(--line-d);--gold:var(--gold-d)}
body.dark .tmk-grocery{--sale-t:color-mix(in oklab, #F58220, #fff 25%)}
/* ⚠️ سعر التجميل بالليلي = **٤.٤** والحد ٤.٥ — الوردي غامق أصلاً،
فمزجه ٧٢٪ على صندوق غامق ما يوصل. ٥٥٪ ترفعه فوك الحد. */
body.dark .tmk-beauty{--pat:color-mix(in oklab, var(--ma) 55%, var(--mi))}
/* خامة «مكان الصورة» — التاجر أكثره ما يرفع صوراً، فالمكان مرسوم مو فاضٍ */
.tmk .strp{background-image:repeating-linear-gradient(45deg,
color-mix(in oklab, var(--mi) 6%, var(--mc)) 0 9px,
color-mix(in oklab, var(--mi) 2%, var(--mc)) 9px 18px)}
.tmk .pg2{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:8px 8px 0}
/* ═══ العام · t-general — صف أفقي والشارة بسطر الاسم ═══ */
.tmk-general{
font-family:'Cairo',system-ui,Tahoma,sans-serif;
--ma:#1F7A78;--gold:#B08A28;--mb:#F5F6F7;--mc:#FFFFFF;--mi:#191D20;--mu:#5F676D;--line:#E2E5E8;
--mb-d:#141619;--mc-d:#1D2126;--mi-d:#EAEDF0;--mu-d:#9DA5AC;--line-d:#2C3238;--gold-d:#CBA544;
}
.tmk-general .g-hd{
position:relative;overflow:hidden;background:var(--ma);
border-radius:0 0 50% 50% / 0 0 24px 24px;
display:flex;align-items:center;gap:11px;padding:15px 15px 22px;
}
.tmk-general .g-hd svg{position:absolute;left:-31px;bottom:-40px;color:rgba(255,255,255,.10)}
.tmk-general .g-lg{
position:relative;width:44px;height:44px;flex:none;border-radius:50%;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.30);
display:grid;place-items:center;color:#fff;font-size:19px;font-weight:800;
}
.tmk-general .g-tt{position:relative;min-width:0}
.tmk-general .g-nm{font-size:17.5px;font-weight:800;color:#fff;line-height:1.4}
.tmk-general .g-bar{width:24px;height:3px;border-radius:99px;background:var(--gold);margin:4px 0 3px}
.tmk-general .g-ds{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.84);line-height:1.5}
.tmk-general .g-tabs{display:flex;gap:21px;padding:12px 16px 0;border-bottom:1px solid var(--line)}
.tmk-general .g-tabs span{font-size:12.5px;font-weight:600;color:var(--mu);padding-bottom:11px}
.tmk-general .g-tabs span.on{font-weight:800;color:var(--mi);border-bottom:2px solid var(--ma)}
.tmk-general .g-promo{
display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 13px;
background:var(--ma);color:#fff;font-size:12px;font-weight:700;
}
.tmk-general .g-promo b{
font-size:11.5px;font-weight:800;background:rgba(255,255,255,.18);
border-radius:6px;padding:2px 8px;letter-spacing:.5px;
}
.tmk-general .glist{display:grid;gap:8px;padding:8px 8px 0}
.tmk-general .gc{
background:var(--mc);border:1px solid var(--line);border-radius:12px;padding:11px;
display:flex;gap:11px;height:130px;box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.tmk-general .gc-img{
flex:none;width:72px;height:105px;border-radius:11px;display:grid;place-items:center;font-size:22px;
background-image:linear-gradient(165deg,
color-mix(in oklab, var(--gold) 16%, var(--mc)),
color-mix(in oklab, var(--gold) 32%, var(--mc)));
}
.tmk-general .gc-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.tmk-general .gc-l1{display:flex;align-items:center;gap:7px}
.tmk-general .gc-nm{
font-size:14px;font-weight:800;color:var(--mi);line-height:1.4;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.tmk-general .gc-bdg{
flex:none;font-size:10.5px;font-weight:800;height:22px;display:inline-flex;align-items:center;
padding:0 9px;border-radius:11px;
background:color-mix(in oklab, var(--gold) 16%, var(--mc));
color:color-mix(in oklab, var(--gold) 55%, var(--mi));
}
.tmk-general .gc-ds{
font-size:11.5px;color:var(--mu);line-height:1.5;margin-top:3px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tmk-general .gc-row{margin-top:auto;display:flex;align-items:center;justify-content:space-between}
.tmk-general .gc-pr{font-size:14px;font-weight:800;color:var(--pat)}
.tmk-general .gc-pr i{font-style:normal;font-size:10.5px;font-weight:700}
.tmk-general .gc-btn{
width:93px;height:35px;border-radius:12px;background:var(--ma);color:#fff;
font-size:12px;font-weight:800;display:grid;place-items:center;
}
/* ═══ البوتيك · t-boutique — قصاصة ملابس، والنص فوك الصورة ═══ */
.tmk-boutique{
font-family:'Cairo',system-ui,Tahoma,sans-serif;
--pat:color-mix(in oklab, var(--ma) 50%, var(--mi));
--ma:#26334D;--gold:#B3814F;--mb:#FAF8F4;--mc:#FFFFFF;--mi:#1F2634;--mu:#6C7180;--line:#E8E3D9;
--mb-d:#131722;--mc-d:#1C2332;--mi-d:#EDE9E1;--mu-d:#A3AAB8;--line-d:#2D3547;--gold-d:#C9975F;
}
.tmk-boutique .b-hd{position:relative;overflow:hidden;background:var(--mc)}
.tmk-boutique .b-pin{position:absolute;inset:0;background:repeating-linear-gradient(90deg,
color-mix(in srgb, var(--mi) 4%, transparent) 0 1px, transparent 1px 6.5px)}
.tmk-boutique .b-dm1{position:absolute;left:18px;bottom:16px}
.tmk-boutique .b-dm2{position:absolute;left:48px;bottom:35px}
.tmk-boutique .b-ico{position:absolute;top:9px;left:11px;display:flex;align-items:center;gap:11px;color:var(--mi);z-index:2}
.tmk-boutique .b-bd{position:relative}
.tmk-boutique .b-bd span{
position:absolute;top:-5px;left:-6px;min-width:14px;height:14px;border-radius:99px;
background:var(--ma);color:#fff;font-size:9px;font-weight:800;
display:grid;place-items:center;padding:0 3px;border:1px solid rgba(255,255,255,.35);
}
.tmk-boutique .b-row{position:relative;display:flex;align-items:center;gap:15px;padding:8px 16px 6px}
.tmk-boutique .b-tw{position:relative;flex:none;width:54px}
.tmk-boutique .b-thr{position:absolute;top:-1px;right:23px;width:2px;height:13px;background:var(--gold);transform:rotate(14deg)}
.tmk-boutique .b-tag{
position:relative;width:52px;height:66px;margin-top:11px;border-radius:6px;
background:linear-gradient(180deg, var(--ma) 0%, color-mix(in oklab, var(--ma), #000 16%) 100%);
box-shadow:0 6px 13px color-mix(in srgb, var(--ma) 30%, transparent);
transform:rotate(-3deg);display:flex;flex-direction:column;align-items:center;
}
.tmk-boutique .b-tag i{position:absolute;inset:4px;border:1px dashed rgba(255,255,255,.30);border-radius:3px}
.tmk-boutique .b-hole{
width:8px;height:8px;border-radius:50%;margin-top:6px;box-sizing:border-box;
background:color-mix(in oklab, var(--ma), #000 32%);border:2px solid rgba(255,255,255,.55);
}
.tmk-boutique .b-ltr{flex:1;display:grid;place-items:center;width:100%;color:#fff;font-size:20px;font-weight:800}
.tmk-boutique .b-tag svg{margin-bottom:5px}
.tmk-boutique .b-nm{font-size:19px;font-weight:800;color:var(--mi);line-height:1.35}
.tmk-boutique .b-gbar{width:31px;height:2px;background:var(--gold);margin:4px 0}
.tmk-boutique .b-ds{font-size:11px;font-weight:600;color:var(--mu);line-height:1.5}
.tmk-boutique .b-st1{position:relative;border-top:1px solid color-mix(in srgb, var(--gold) 60%, transparent);margin:0 13px}
.tmk-boutique .b-st2{position:relative;border-top:1px solid color-mix(in srgb, var(--gold) 30%, transparent);margin:3px 20px 0;padding-bottom:7px}
.tmk-boutique .b-ban{
position:relative;height:120px;overflow:hidden;border-bottom:1px solid var(--line);
background:linear-gradient(200deg,
color-mix(in oklab, var(--ma) 14%, var(--mb)) 0%,
color-mix(in oklab, var(--ma) 5%, var(--mb)) 75%);
display:flex;align-items:center;gap:12px;padding:0 14px;
}
.tmk-boutique .b-ban > svg{position:absolute;left:-37px;bottom:-44px;color:color-mix(in srgb, var(--gold) 35%, transparent)}
.tmk-boutique .b-bt{position:relative;flex:1;min-width:0}
.tmk-boutique .b-bl{font-size:9.5px;font-weight:800;color:color-mix(in oklab, var(--gold) 55%, var(--mi))}
.tmk-boutique .b-bn{font-size:14px;font-weight:800;color:var(--mi);line-height:1.4;margin-top:1px}
.tmk-boutique .b-bp{font-size:12px;font-weight:800;color:var(--pat);margin-top:1px}
.tmk-boutique .b-cta{display:inline-block;font-size:10.5px;font-weight:700;background:var(--ma);color:#fff;border-radius:7px;padding:4px 11px;margin-top:6px}
.tmk-boutique .b-bimg{
position:relative;flex:none;width:74px;height:98px;border-radius:10px;
border:1px dashed color-mix(in srgb, var(--mu) 50%, transparent);display:grid;place-items:center;
}
.tmk-boutique .b-bimg span{font-size:8.5px;font-weight:700;color:var(--mu)}
.tmk-boutique .b-tabs{display:flex;gap:21px;padding:11px 15px 0;border-bottom:1px solid var(--line)}
.tmk-boutique .b-tabs span{font-size:12px;font-weight:600;color:var(--mu);padding-bottom:10px}
.tmk-boutique .b-tabs span.on{font-weight:800;color:var(--mi);border-bottom:2px solid var(--gold)}
.tmk-boutique .bc{position:relative;border-radius:9px;overflow:hidden;aspect-ratio:3/4;border:1px solid var(--line)}
.tmk-boutique .bc-bdg{
position:absolute;top:7px;right:7px;z-index:3;height:22px;padding:0 10px;border-radius:99px;
background:var(--mc);color:var(--mi);font-size:10px;font-weight:800;
display:inline-flex;align-items:center;box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.tmk-boutique .bc-ov{
position:absolute;inset:auto 0 0 0;height:137px;
display:flex;flex-direction:column;justify-content:flex-end;padding:9px;
background:linear-gradient(180deg, transparent 0%,
color-mix(in srgb, color-mix(in oklab, var(--ma), #000 55%) 55%, transparent) 45%,
color-mix(in srgb, color-mix(in oklab, var(--ma), #000 62%) 90%, transparent) 100%);
}
.tmk-boutique .bc-nm{font-size:12px;font-weight:700;color:#fff;line-height:1.4}
.tmk-boutique .bc-sz{font-size:9px;color:rgba(255,255,255,.88);margin-top:1px;letter-spacing:.6px}
.tmk-boutique .bc-pr{font-size:13.5px;font-weight:800;color:#fff;margin-top:2px}
.tmk-boutique .bc-btn{
margin-top:7px;height:29px;border-radius:7px;
background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.45);color:#fff;
font-size:11px;font-weight:800;display:grid;place-items:center;
}
/* ═══ الإلكترونيات · t-store — سجلّ مواصفات، والصورة اختيارية ═══ */
.tmk-store{
font-family:'Cairo',system-ui,Tahoma,sans-serif;
--ma:#0A5AE0;--gold:#D99B0A;--mb:#F1F5F9;--mc:#FFFFFF;--mi:#0F1B2D;--mu:#5A6B82;--line:#DBE4EF;
--mb-d:#0D1522;--mc-d:#16202F;--mi-d:#E8EEF7;--mu-d:#94A2B7;--line-d:#273349;--gold-d:#E4B23F;
}
/* ⛔ تدرّج **ضمن نفس اللون** — أزرق غامق ← أزرق. ولا لون ثانٍ */
.tmk-store .s-hd{
position:relative;overflow:hidden;min-height:108px;display:flex;align-items:flex-end;
background:linear-gradient(165deg, color-mix(in oklab, var(--ma), #000 26%) 0%, var(--ma) 70%);
}
.tmk-store .s-grid{position:absolute;inset:0;background-image:
repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 24px),
repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 24px)}
.tmk-store .s-hd > svg{position:absolute;left:-7px;bottom:-9px;color:rgba(255,255,255,.28)}
.tmk-store .s-row{position:relative;width:100%;display:flex;align-items:center;gap:11px;padding:13px 15px}
.tmk-store .s-lg{
width:42px;height:42px;flex:none;border-radius:11px;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
display:grid;place-items:center;color:#fff;font-size:19px;font-weight:800;
}
.tmk-store .s-nm{font-size:17.5px;font-weight:800;color:#fff;line-height:1.4}
.tmk-store .s-ds{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.84);line-height:1.5}
.tmk-store .s-gl{height:3px;background:linear-gradient(270deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 45%, transparent) 40%, transparent 75%)}
.tmk-store .s-tabs{display:flex;align-items:center;gap:7px;height:54px;padding:0 11px;background:var(--mc);border-bottom:1px solid var(--line)}
.tmk-store .s-tabs span{
font-size:12.5px;font-weight:700;padding:6px 13px;border-radius:10px;
border:1px solid var(--line);color:var(--mu);background:var(--mc);white-space:nowrap;
}
.tmk-store .s-tabs span.on{font-weight:800;background:var(--ma);color:#fff;border-color:transparent}
.tmk-store .slist{display:grid;gap:8px;padding:8px 8px 0}
.tmk-store .sc{
background:var(--mc);border:1px solid var(--line);border-radius:13px;padding:9px 10px;
display:flex;gap:9px;height:104px;box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.tmk-store .sc-img{flex:none;width:78px;height:78px;align-self:center;border-radius:10px}
.tmk-store .sc-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.tmk-store .sc-nm{font-size:13px;font-weight:800;color:var(--mi);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tmk-store .sc-tags{display:flex;gap:4px;margin-top:4px}
.tmk-store .sc-tags i{
font-style:normal;font-size:9.5px;font-weight:700;color:var(--mu);white-space:nowrap;
border:1px solid var(--line);background:color-mix(in oklab, var(--mi) 3%, var(--mc));
border-radius:6px;padding:2px 6px;line-height:1.3;
}
.tmk-store .sc-row{margin-top:auto;display:flex;align-items:center;gap:6px}
.tmk-store .sc-pr{font-size:14.5px;font-weight:800;color:var(--pat)}
.tmk-store .sc-old{font-size:10px;color:var(--mu);text-decoration:line-through}
.tmk-store .sc-btn{
margin-inline-start:auto;width:86px;height:29px;border-radius:8px;
background:var(--ma);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;
}
/* ═══ البقالية · t-grocery — عمودان وشريط سلة سفلي ═══ */
.tmk-grocery{
font-family:'Almarai','Cairo',system-ui,Tahoma,sans-serif;
/* 🔴 البرتقالي نصاً لازم يكون مغمّقاً — الأصلي تباينه ٢.٥٩ */
--sale-t:color-mix(in oklab, #F58220, #000 30%);
--ma:#DA2C38;--gold:#F2B705;--mb:#F8F8F6;--mc:#FFFFFF;--mi:#221E18;--mu:#6E695E;--line:#E5E1D6;
--mb-d:#161310;--mc-d:#211C16;--mi-d:#F2ECE3;--mu-d:#A99F90;--line-d:#352E24;--gold-d:#F5C21E;
}
.tmk-grocery .gr-hd{position:relative;overflow:hidden;min-height:60px;display:flex;align-items:center;background:var(--ma)}
.tmk-grocery .gr-dot{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.11) 1.2px, transparent 1.4px);background-size:15px 15px}
.tmk-grocery .gr-row{position:relative;width:100%;display:flex;align-items:center;gap:9px;padding:10px 13px}
.tmk-grocery .gr-lg{
width:37px;height:37px;flex:none;border-radius:9px;
background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.32);
display:grid;place-items:center;color:#fff;font-size:16px;font-weight:800;
}
.tmk-grocery .gr-nm{font-size:15.5px;font-weight:800;color:#fff;line-height:1.35}
.tmk-grocery .gr-ds{font-size:10.5px;font-weight:600;color:rgba(255,255,255,.84);line-height:1.5}
/* سقيفة السوق — حافة مموّجة بلونَي العلامة والذهبي */
.tmk-grocery .gr-awn{height:10px;background:
radial-gradient(circle at 10px 0, var(--ma) 9.5px, transparent 10px) 0 0 / 20px 10px repeat-x,
radial-gradient(circle at 10px 0, var(--gold) 9.5px, transparent 10px) 10px 0 / 20px 10px repeat-x}
.tmk-grocery .gr-se{
display:flex;align-items:center;gap:8px;height:38px;margin:9px 11px 0;padding:0 11px;
background:var(--mc);border:1px solid var(--line);border-radius:9px;color:var(--mu);
}
.tmk-grocery .gr-se span{font-size:11.5px;font-weight:600}
.tmk-grocery .gr-tabs{
display:flex;align-items:center;gap:7px;height:48px;padding:0 11px;margin-top:2px;
background:var(--mb);border-bottom:1px solid var(--line);
}
.tmk-grocery .gr-tabs span{
font-size:12px;font-weight:700;padding:6px 12px;border-radius:10px;white-space:nowrap;
border:1px solid var(--line);color:var(--mu);background:var(--mc);
}
.tmk-grocery .gr-tabs span.on{font-weight:800;background:var(--ma);color:#fff;border-color:transparent}
.tmk-grocery .rc{
position:relative;background:var(--mc);border:1px solid var(--line);border-radius:10px;
overflow:hidden;height:176px;display:flex;flex-direction:column;
}
.tmk-grocery .rc-bdg{
position:absolute;top:6px;right:6px;z-index:2;height:16px;padding:0 6px;border-radius:6px;
background:#F58220;color:#1A1206;font-size:10px;font-weight:800;display:inline-flex;align-items:center;
}
.tmk-grocery .rc-img{height:78px;border-bottom:1px solid var(--line)}
.tmk-grocery .rc-bd{padding:7px 9px 8px;display:flex;flex-direction:column;flex:1}
.tmk-grocery .rc-nm{font-size:13px;font-weight:700;color:var(--mi);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tmk-grocery .rc-un{font-size:11px;color:var(--mu);margin-top:1px}
.tmk-grocery .rc-row{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between}
.tmk-grocery .rc-prc{display:flex;flex-direction:column;line-height:1.3}
.tmk-grocery .rc-old{font-size:10px;color:var(--mu);text-decoration:line-through}
.tmk-grocery .rc-pr{font-size:13px;font-weight:800;color:var(--pat)}
.tmk-grocery .rc-pr.sl{color:var(--sale-t)}
.tmk-grocery .rc-btn{
width:29px;height:29px;border-radius:10px;background:var(--ma);color:#fff;
font-size:15px;font-weight:800;display:grid;place-items:center;
}
/* شريط السلة السفلي — **بهذا القالب وحده** بين الخمسة */
.tmk-grocery .gr-cart{
position:absolute;left:0;right:0;bottom:0;z-index:5;height:62px;
background:var(--mc);border-top:1px solid var(--line);
display:flex;align-items:center;gap:10px;padding:0 12px;box-shadow:0 -6px 16px rgba(0,0,0,.07);
}
.tmk-grocery .gr-cn{
flex:none;width:21px;height:21px;border-radius:50%;background:var(--ma);color:#fff;
font-size:11px;font-weight:800;display:grid;place-items:center;
}
.tmk-grocery .gr-ct1{font-size:12px;font-weight:800;color:var(--mi);line-height:1.35}
.tmk-grocery .gr-ct2{font-size:10.5px;color:var(--mu);line-height:1.35}
.tmk-grocery .gr-cbtn{
margin-inline-start:auto;height:36px;padding:0 15px;border-radius:10px;
background:var(--ma);color:#fff;font-size:12px;font-weight:800;display:inline-flex;align-items:center;
}
/* ═══ كوزمتك · t-beauty — قوس وصندوق نص منفصل وزر عائم ═══ */
.tmk-beauty{
font-family:'Tajawal','Cairo',system-ui,Tahoma,sans-serif;
--ma:#A03A61;--gold:#C1875F;--mb:#F7ECEA;--mc:#FFFFFF;--mi:#352028;--mu:#7D6070;--line:#ECD9D6;
--mb-d:#1C1216;--mc-d:#291B22;--mi-d:#F6EAEF;--mu-d:#BC9FAB;--line-d:#3E2A34;--gold-d:#D9A06B;
}
.tmk-beauty .y-hd{
position:relative;overflow:hidden;text-align:center;
background:radial-gradient(140% 110% at 50% -30%, color-mix(in oklab, var(--ma) 16%, var(--mb)) 0%, var(--mb) 78%);
}
.tmk-beauty .y-ln{position:absolute;inset:0;background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--ma) 6%, transparent) 0 1px, transparent 1px 11px)}
.tmk-beauty .y-c1{position:absolute;right:-24px;bottom:-24px;color:color-mix(in srgb, var(--gold) 55%, transparent)}
.tmk-beauty .y-c2{position:absolute;left:9px;bottom:11px;color:color-mix(in srgb, var(--ma) 30%, transparent)}
.tmk-beauty .y-sp{height:30px}
/* الميدالية — على حافة الغلاف، وهي أوضح علامة بهذا القالب */
.tmk-beauty .y-md{
position:relative;width:53px;height:53px;margin:14px auto 0;border-radius:50%;
background:var(--mc);border:1px solid color-mix(in srgb, var(--gold) 70%, transparent);
box-shadow:0 0 0 5px color-mix(in srgb, var(--gold) 20%, transparent),
0 6px 17px color-mix(in srgb, var(--ma) 22%, transparent);
display:grid;place-items:center;color:color-mix(in oklab, var(--ma) 70%, var(--mi));
font-size:21px;font-weight:700;
}
.tmk-beauty .y-nm{position:relative;font-size:18px;font-weight:700;margin-top:6px;line-height:1.35;color:var(--mi)}
.tmk-beauty .y-ds{position:relative;font-size:11.5px;font-weight:500;color:var(--mu);margin-top:2px;line-height:1.5}
.tmk-beauty .y-dv{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;margin-top:7px;padding-bottom:9px}
.tmk-beauty .y-dv b{width:40px;height:1px}
.tmk-beauty .y-dv .r1{background:linear-gradient(90deg, var(--gold), transparent)}
.tmk-beauty .y-dv .r2{background:linear-gradient(90deg, transparent, var(--gold))}
.tmk-beauty .y-dv span{font-size:11px;line-height:1;color:var(--gold)}
.tmk-beauty .y-tabs{
display:flex;justify-content:center;align-items:center;gap:7px;height:44px;padding:0 11px;
background:var(--mc);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.tmk-beauty .y-tabs span{
font-size:11.5px;font-weight:500;padding:5px 12px;border-radius:99px;white-space:nowrap;
background:color-mix(in oklab, var(--ma) 6%, var(--mc));color:var(--mu);
}
.tmk-beauty .y-tabs span.on{font-weight:700;background:var(--ma);color:#fff}
.tmk-beauty .yc{display:flex;flex-direction:column;gap:4px}
.tmk-beauty .ya{
position:relative;height:162px;border-radius:999px 999px 16px 16px;
background:radial-gradient(130% 110% at 50% 22%, color-mix(in oklab, var(--ma) 15%, var(--mc)) 0%, color-mix(in oklab, var(--ma) 5%, var(--mc)) 82%);
border:1.5px dashed color-mix(in srgb, var(--gold) 65%, transparent);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
}
.tmk-beauty .ya-l{font-size:19px;font-weight:700;color:var(--pat)}
.tmk-beauty .ya-f{font-size:8px;color:var(--gold);line-height:1}
.tmk-beauty .ya-cart{
position:absolute;bottom:7px;left:7px;width:36px;height:36px;border-radius:50%;
background:var(--ma);color:#fff;display:grid;place-items:center;
border:2px solid var(--mc);box-shadow:0 4px 10px color-mix(in srgb, var(--ma) 35%, transparent);
font-size:16px;font-weight:700;
}
.tmk-beauty .yb{
background:var(--mc);border:1px solid var(--line);border-radius:13px;padding:7px 10px;
box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.tmk-beauty .yb-nm{font-size:10px;font-weight:700;color:var(--mi);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tmk-beauty .yb-pr{font-size:11.5px;font-weight:700;color:var(--pat);margin-top:1px}
.hint{font-size:11.5px;color:var(--faint);line-height:1.9;margin-top:10px}
.field textarea{
flex:1;background:none;border:none;outline:none;color:var(--text);
font-family:inherit;font-size:14.5px;padding:13px 0;min-width:0;resize:none;
}
.link-box{
display:flex;gap:8px;align-items:center;background:var(--surface);
border:1px solid var(--line);border-radius:13px;padding:9px 12px;margin:14px 0 4px;
}
.link-box .url{
flex:1;direction:ltr;text-align:left;font-size:11.5px;color:var(--muted);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mini-btn{
background:var(--teal-soft);border:none;color:var(--teal);border-radius:9px;
padding:8px 12px;font-size:12px;cursor:pointer;font-family:inherit;flex-shrink:0;
transition:filter .18s ease;font-weight:600;
}
.mini-btn:hover{filter:brightness(1.2)}
.item-row{
display:flex;align-items:center;gap:12px;background:var(--card);
border:1px solid var(--line);border-radius:14px;padding:10px 12px;
}
.item-row .ithumb{
width:52px;height:52px;border-radius:11px;background:var(--surface);flex-shrink:0;
display:flex;align-items:center;justify-content:center;font-size:22px;overflow:hidden;
}
.item-row .ithumb img{width:100%;height:100%;object-fit:cover;display:block}
.item-row .itx{flex:1;min-width:0}
.item-row .itx b{font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-row .itx span{font-size:11.5px;color:var(--muted);display:block;margin-top:3px}
.icon-btn{
width:34px;height:34px;border:1px solid var(--line);background:none;border-radius:10px;
color:var(--muted);cursor:pointer;font-size:13px;flex-shrink:0;font-family:inherit;
transition:all .18s ease;
}
.icon-btn:hover{color:var(--text);border-color:var(--teal)}
.icon-btn.del:hover{color:var(--error);border-color:var(--error)}
.sheet-wrap{
position:fixed;inset:0;background:rgba(4,14,16,.65);z-index:40;
display:none;align-items:flex-end;justify-content:center;
}
.sheet-wrap.on{display:flex;animation:fadeIn .2s ease}
.sheet{
width:100%;max-width:430px;max-height:90vh;max-height:90dvh;overflow:auto;
background:var(--bg-2);border:1px solid var(--line);border-bottom:none;
border-radius:22px 22px 0 0;padding:22px 22px 30px;
}
.sheet h4{font-size:17px;margin-bottom:6px}
.photo-pick{
width:100%;height:110px;border:1px dashed var(--line);border-radius:13px;
background:var(--surface);color:var(--muted);cursor:pointer;overflow:hidden;
font-family:inherit;font-size:13px;display:flex;align-items:center;justify-content:center;
padding:0;transition:border-color .18s ease;
}
.photo-pick:hover{border-color:var(--teal)}
.photo-pick img{width:100%;height:100%;object-fit:cover;display:block}
.danger{
background:none;border:1px solid rgba(229,84,90,.45);color:var(--error);border-radius:13px;
padding:13px;font-size:14px;cursor:pointer;font-family:inherit;margin-top:4px;
transition:background .18s ease;
}
.danger:hover{background:rgba(229,84,90,.1)}
/* ===== استوديو التخصيص (تصميم كلود دزاين) ===== */
#scr-custom{
position:fixed;inset:0;z-index:30;background:var(--bg);max-width:430px;margin:0 auto;
padding:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
#scr-custom.on{display:block}
.cust-head{
position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:10px;
padding:13px 16px;background:rgba(11,26,29,.94);backdrop-filter:blur(10px);
border-bottom:1px solid var(--line);
}
.cust-head .ttl{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cust-head .ttl b{font-size:15px;font-weight:800;display:flex;align-items:center;gap:7px}
.cust-head .ttl b i{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:pulse 2s infinite;flex-shrink:0}
.cust-head .ttl b,.cust-head .ttl span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cust-head .ttl span{font-size:11px;color:var(--muted)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.pub-btn{
flex-shrink:0;background:linear-gradient(135deg, var(--teal) 0%, var(--teal-strong) 100%);
color:var(--teal-ink);font-weight:800;border:none;border-radius:12px;padding:10px 15px;
font-size:13.5px;cursor:pointer;font-family:inherit;transition:filter .18s ease;
box-shadow:0 4px 14px rgba(31,169,165,.28);
}
.pub-btn:hover{filter:brightness(1.1)}
.pub-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* المعاينة الحية ببطاقة مدوّرة */
.cust-body{padding:14px 16px 36px}
.prev-lbl{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.prev-lbl b{font-size:11.5px;color:var(--muted);font-weight:700}
.prev-open{
background:var(--teal-soft);border:1px solid rgba(31,169,165,.35);color:var(--teal);
border-radius:999px;padding:6px 12px;font-size:11.5px;font-weight:700;cursor:pointer;
font-family:inherit;flex-shrink:0;transition:filter .18s ease;
}
.prev-open:hover{filter:brightness(1.25)}
.prev-stage{
/* ⚠️ هذا **احتياط قبل ما يشتغل الجافاسكربت وبس** — الارتفاع الحقيقي
تحسبه `fitPreview()` بـapp.js من المساحة الباقية بالشاشة، والشرح
الكامل مكتوب هناك. ⛔ لا تضبط المعاينة من هنا. */
position:relative;overflow:hidden;height:clamp(280px,62dvh,760px);
border-radius:18px;border:1px solid var(--line);background:#06120F;
display:flex;justify-content:center;box-shadow:0 12px 34px rgba(0,0,0,.45);
}
#cust-frame{
width:430px;border:none;transform-origin:top center;position:absolute;top:0;
background:#fff;
}
/* بطاقات التخصيص */
.cust-sec-lbl{display:block;font-size:11.5px;color:var(--muted);font-weight:700;margin:20px 0 10px}
.tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{
display:flex;flex-direction:column;align-items:center;gap:8px;padding:15px 7px 12px;
border-radius:16px;border:1px solid var(--line);
background:linear-gradient(180deg, var(--card) 0%, var(--surface) 100%);
cursor:pointer;color:var(--text);font-family:inherit;transition:all .16s ease;
}
.tile:hover{border-color:var(--teal);transform:translateY(-2px)}
.tile:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.tile .tic{
width:40px;height:40px;border-radius:12px;background:var(--teal-soft);flex-shrink:0;
display:flex;align-items:center;justify-content:center;
}
.tile .tic svg{width:21px;height:21px;stroke:var(--teal);fill:none;stroke-width:1.8}
.tile .tic .dots{display:flex;align-items:center}
.tile .tic .dots i{width:11px;height:11px;border-radius:50%;display:block}
.tile .tic .dots i + i{margin-inline-start:-6px}
.tile .tic .grid4{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:20px;height:20px}
.tile .tic .grid4 i{border-radius:3px;background:var(--teal);opacity:.45}
.tile .tic .grid4 i:nth-child(1),.tile .tic .grid4 i:nth-child(4){opacity:.9}
.tile b{font-size:12.5px;font-weight:800}
.tile > span:last-child{
font-size:9.5px;color:var(--teal);background:var(--teal-soft);border-radius:99px;padding:2px 9px;
max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* ===== 🎨 منتقي اللون المخصص (٢٢ آب ٢٠٢٦) =====
يحلّ محل `` ومنتقي نظام التشغيل. ⛔ ولا مكتبة
خارجية — تدرّجات CSS وبس. الشرح الكامل عند الوسم بـindex.html. */
.picker{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.pk-sv{
position:relative;width:100%;height:150px;border-radius:14px;cursor:crosshair;
border:1px solid var(--line);touch-action:none;
/* الأسود من تحت + الأبيض من اليسار فوق درجة اللون — نفس تركيب كل منتقي */
background:
linear-gradient(to top, #000, rgba(0,0,0,0)),
linear-gradient(to right, #fff, hsl(var(--pk-h,210) 100% 50%));
}
.pk-hue{
position:relative;width:100%;height:26px;border-radius:99px;cursor:pointer;
border:1px solid var(--line);touch-action:none;
background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
}
/* 🔑 المؤشّر **حلقة بيضاء بحدّ أسود** — الأبيض وحده يختفي على اللون
الفاتح والأسود وحده يختفي على الغامق، والاثنان سوا يبيّنان على أي لون */
.pk-dot{
position:absolute;width:20px;height:20px;border-radius:50%;pointer-events:none;
border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
transform:translate(-50%,-50%);background:transparent;
}
.pk-hue .pk-dot{top:50%}
.pk-foot{display:flex;align-items:center;gap:10px}
.pk-chip{
width:38px;height:38px;border-radius:11px;flex-shrink:0;
border:1px solid var(--line);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
#pk-hex{
flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);
border-radius:11px;padding:10px 12px;color:var(--text);
font-size:14px;font-weight:700;font-family:inherit;
letter-spacing:.06em;text-transform:uppercase;direction:ltr;text-align:center;
}
#pk-hex:focus{outline:2px solid var(--teal);outline-offset:1px}
/* 🔴 **خانات رفع الصور: مخفية بالعين بس مرسومة فعلاً** (٢٢ آب ٢٠٢٦).
چانن `display:none` (بـ`hidden` أو `.hidden`) — وبعض متصفحات
أندرويد **ترفض تفتح منتقي الملفات** لخانة مو مرسومة، أو تفتحه
بشاشة سودة. وهذا نمط «visually hidden» المعروف: العنصر موجود
بالتخطيط وقابل للتركيز، بس ما ينشاف.
⛔ لا ترجّعهن لـ`display:none`. */
.vh-file{
position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px;
}
/* نافذة سفلية للخيارات */
#cust-sheet{z-index:38}
.sh-handle{display:block;width:38px;height:4px;border-radius:99px;background:rgba(255,255,255,.18);margin:0 auto 14px}
.sh-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}
.sh-head b{font-size:15.5px;font-weight:800}
.sh-x{
width:30px;height:30px;border-radius:10px;border:none;background:var(--surface);
color:var(--muted);cursor:pointer;font-size:13px;font-family:inherit;flex-shrink:0;
}
.sh-x:hover{color:var(--text)}
.cpanel{display:none}
.cpanel.on{display:block;animation:fadeIn .2s ease}
.cp-hint{font-size:11.5px;color:var(--faint);line-height:1.9;margin-bottom:12px}
/* عيّنات الألوان */
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:13px 8px}
.sw{
display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;
cursor:pointer;font-family:inherit;padding:0;color:var(--muted);
}
.sw i{
width:44px;height:44px;border-radius:50%;border:2px solid transparent;
display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;
font-style:normal;transition:transform .15s ease;position:relative;overflow:hidden;
}
.sw:hover i{transform:scale(1.08)}
.sw.sel i{border-color:var(--text);box-shadow:0 0 0 3px var(--teal-soft)}
.sw > span{font-size:10.5px;line-height:1.4;text-align:center}
.sw.sel > span{color:var(--teal);font-weight:700}
.bg-sw i{border-radius:13px}
.bg-sw i b{position:absolute;inset:auto 8px 7px 8px;height:11px;border-radius:4px;border:1px solid rgba(128,128,128,.3)}
/* الخطوط — صف لكل خط مع عيّنة حيّة */
.fonts{display:flex;flex-direction:column;gap:8px}
.font-card{
display:flex;align-items:center;justify-content:space-between;gap:10px;
background:var(--surface);border:1.5px solid var(--line);border-radius:13px;padding:12px 14px;
cursor:pointer;text-align:start;color:var(--text);font-family:inherit;transition:all .15s ease;
}
.font-card:hover{border-color:rgba(31,169,165,.45)}
.font-card.sel{border-color:var(--teal);background:var(--teal-soft)}
.font-card b{
font-size:16px;font-weight:700;line-height:1.8;min-width:0;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.font-card span{font-size:11px;color:var(--muted);flex-shrink:0;font-family:inherit}
.font-card.sel span{color:var(--teal);font-weight:700}
/* شكل الأزرار — بطاقات تعرض الحافة نفسها */
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.seg button{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:14px 5px;
color:var(--muted);font-size:11px;cursor:pointer;font-family:inherit;
transition:all .15s ease;line-height:1.5;
}
.seg button:hover{border-color:rgba(31,169,165,.45)}
.seg button.sel{border-color:var(--teal);background:var(--teal-soft);color:var(--teal);font-weight:700}
.seg button i{
display:block;width:100%;max-width:52px;height:21px;background:var(--teal);
opacity:.55;font-style:normal;transition:all .15s ease;
}
.seg button.sel i{opacity:1}
.seg button i.orig{background:none;border:1.5px dashed var(--teal);border-radius:999px}
/* رفع الشعار والغلاف */
.cover-pick{
width:100%;border:1.5px dashed rgba(31,169,165,.45);border-radius:14px;
background:var(--teal-soft);color:var(--teal);cursor:pointer;overflow:hidden;
font-family:inherit;font-size:12.5px;font-weight:700;display:block;padding:0;
transition:filter .18s ease;
}
.cover-pick:hover{filter:brightness(1.25)}
.cover-pick img{width:100%;height:104px;object-fit:cover;display:block}
.cover-pick .cd{display:flex;flex-direction:column;align-items:center;gap:5px;padding:18px 12px}
.cover-pick .cd em{font-style:normal;font-size:10px;color:var(--faint);font-weight:400;line-height:1.7}
.cover-acts{display:flex;justify-content:flex-end;margin-top:7px}
/* شجرة المنتجات داخل التخصيص */
.ci-sec{
background:var(--card);border:1px solid var(--line);border-radius:15px;padding:11px 12px;
display:flex;flex-direction:column;gap:9px;
}
.ci-sec.plain{background:none;border-style:dashed}
.ci-sec .hd{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ci-sec .hd b{flex:1;min-width:90px;font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-sec .hd b em{font-style:normal;font-size:10.5px;color:var(--faint);font-weight:400}
.ci-btn{
background:none;border:1px solid var(--line);color:var(--muted);border-radius:999px;
padding:5px 10px;font-size:10.5px;font-weight:700;cursor:pointer;font-family:inherit;
transition:all .15s ease;flex-shrink:0;
}
.ci-btn:hover{border-color:var(--teal);color:var(--teal)}
.ci-btn.teal{border-color:rgba(31,169,165,.4);background:var(--teal-soft);color:var(--teal)}
.ci-btn.danger{padding:5px 9px;line-height:1}
.ci-btn.danger:hover{border-color:var(--error);color:var(--error);background:rgba(229,84,90,.1)}
.ci-sub{
margin-inline-start:10px;border:1px dashed var(--line);border-radius:13px;padding:10px;
display:flex;flex-direction:column;gap:8px;background:rgba(255,255,255,.02);
}
.ci-sub .hd b{font-size:12.5px;color:rgba(234,244,243,.9)}
.ci-empty{font-size:11.5px;color:var(--faint);line-height:1.9}
/* استمارة قسم جديد جوّه القائمة (بدل نافذة المتصفح) */
.ci-draft{
display:flex;flex-direction:column;gap:9px;padding:12px;border-radius:15px;
border:1px solid rgba(31,169,165,.4);background:var(--teal-soft);
}
.ci-draft b{font-size:12px;font-weight:800;color:var(--teal)}
.ci-draft input{
width:100%;padding:11px 13px;border-radius:11px;border:1px solid var(--line);
background:var(--surface);color:var(--text);font-family:inherit;
font-size:13.5px;font-weight:700;outline:none;transition:border-color .15s ease;
}
.ci-draft input:focus{border-color:var(--teal)}
.ci-draft .acts{display:flex;gap:8px}
.ci-draft .acts button{
border-radius:10px;font-family:inherit;font-size:12.5px;font-weight:800;cursor:pointer;padding:10px;
}
.ci-draft .acts .ok{flex:1;border:none;background:var(--teal);color:var(--teal-ink)}
.ci-draft .acts .ok:hover{filter:brightness(1.1)}
.ci-draft .acts .no{padding:10px 16px;border:1px solid var(--line);background:none;color:var(--muted)}
.ci-draft .acts .no:hover{color:var(--text)}
#cust-items .item-row .ithumb{width:42px;height:42px;font-size:18px}
#cust-items .item-row{padding:8px 10px}
.up-row{display:flex;align-items:center;gap:12px;margin-top:14px}
.up-prev{
width:56px;height:56px;border-radius:50%;background:var(--surface);border:1px dashed var(--line);
display:flex;align-items:center;justify-content:center;font-size:20px;overflow:hidden;
flex-shrink:0;color:var(--faint);
}
.up-prev.wide{width:104px;height:56px;border-radius:12px}
.up-prev img{width:100%;height:100%;object-fit:cover;display:block}
.up-tx{flex:1;min-width:0}
.up-tx b{display:block;font-size:13.5px}
.up-tx span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.up-acts{display:flex;gap:6px;flex-shrink:0;flex-direction:column;align-items:stretch}
/* ===== قوائم منسدلة داخل الحقول ===== */
.field .box select{
flex:1;background:none;border:none;outline:none;color:var(--text);
font-family:inherit;font-size:14.5px;padding:13px 0;min-width:0;
appearance:none;-webkit-appearance:none;cursor:pointer;
}
.field .box.sel-box::after{content:"⌄";color:var(--faint);font-size:16px;margin-inline-start:4px}
.field .box select option{background:var(--bg-2);color:var(--text)}
/* شجرة الأقسام القديمة (.cat-sec/.cat-sub) انشالت ٣٠ تموز ويا واجهتها */
/* ===== نافذة حوار وسطية ===== */
.sheet-wrap.dlg{align-items:center;padding:22px}
.dlg-box{
background:var(--bg-2);border:1px solid var(--line);border-radius:20px;padding:26px 22px;
max-width:340px;width:100%;text-align:center;display:flex;flex-direction:column;gap:12px;
}
.dlg-box .dlg-ic{font-size:38px}
.dlg-box h4{font-size:18px;line-height:1.6}
.dlg-box p{color:var(--muted);font-size:13.5px;line-height:1.9}
/* ===== اختيار منتج البنر ===== */
.banner-pick{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.bn-row{
display:flex;align-items:center;gap:10px;width:100%;cursor:pointer;font-family:inherit;
background:var(--surface);border:1px solid var(--line);border-radius:13px;
padding:12px 14px;text-align:right;color:var(--text);transition:all .15s ease;
}
.bn-row:hover{border-color:var(--teal)}
.bn-row.sel{border-color:var(--teal);background:var(--teal-soft)}
.bn-row .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.bn-row .tx b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bn-row .tx span{font-size:11.5px;color:var(--muted)}
.bn-row .tick{
flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
font-size:12px;color:transparent;border:1px solid var(--line);
}
.bn-row.sel .tick{background:var(--teal);border-color:var(--teal);color:var(--teal-ink)}
/* ===== معاينة القالب قبل اختياره ===== */
/* تاخذ الشاشة كلها — مو محصورة بعمود الهاتف (٤٣٠) مثل باقي التطبيق،
حتى القالب يبين بحجمه الطبيعي وعلى الشاشة العريضة يطلع بعرضها */
.tprev{
position:fixed;inset:0;z-index:50;background:var(--bg);
display:none;flex-direction:column;
}
.tprev.on{display:flex;animation:fadeIn .2s ease}
.tprev-head{
display:flex;align-items:center;gap:11px;padding:11px 16px;
background:var(--bg-2);border-bottom:1px solid var(--line);flex-shrink:0;
}
.tprev-head .wrapin{
display:flex;align-items:center;gap:11px;width:100%;max-width:980px;margin:0 auto;
}
.tprev-x{
width:34px;height:34px;flex-shrink:0;border:1px solid var(--line);border-radius:10px;
background:none;color:var(--muted);cursor:pointer;font-size:13px;font-family:inherit;
transition:all .18s ease;
}
.tprev-x:hover{color:var(--text);border-color:var(--teal)}
.tprev-head .ttl{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tprev-head .ttl b{font-size:15px;font-weight:800}
.tprev-head .ttl span{font-size:11.5px;color:var(--muted);line-height:1.6}
.tprev-note{
flex-shrink:0;padding:7px 16px;font-size:11px;line-height:1.6;text-align:center;
color:var(--muted);background:var(--surface);border-bottom:1px solid var(--line);
}
.tprev-stage{flex:1;min-height:0;background:#fff}
#tprev-frame{width:100%;height:100%;border:0;display:block}
.tprev-foot{
flex-shrink:0;padding:11px 16px calc(11px + env(safe-area-inset-bottom));
background:var(--bg-2);border-top:1px solid var(--line);
}
.tprev-foot .btn-primary{max-width:430px;margin:0 auto;display:block}
/* ===== شاشة النشر ===== */
#publishing{
position:fixed;inset:0;background:var(--bg);z-index:60;
display:none;flex-direction:column;align-items:center;justify-content:center;gap:20px;
text-align:center;padding:30px;
}
#publishing.on{display:flex}
#publishing h4{font-size:19px}
#publishing p{color:var(--muted);font-size:13.5px}
/* ===== شاشة التحميل ===== */
#loading{
position:fixed;inset:0;background:var(--bg);z-index:50;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
}
#loading.off{display:none}
.spinner{
width:38px;height:38px;border-radius:50%;
border:3px solid var(--line);border-top-color:var(--teal);
animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
#loading p{color:var(--muted);font-size:14px}
/* ===== التطبيق الرئيسي (مرحلة ٤) ===== */
/* لمن يدخل صاحب البزنس لتطبيقه المنشور ينضاف mapp-on على body:
نفس أسماء المتغيرات القديمة تنبدّل قيمها للهوية الجديدة (لازورد أشور #3D3494 فاتح)
فكل الشاشات المشتركة (إدارة الخدمة، الاستوديو، النوافذ) تتلوّن وياه.
من ٣١ تموز `mapp-on` منحوطة ثابتة بوسم فتشمل شاشات الدخول والبداية هم. */
body.mapp-on{
--bg:#f4f6f7; --bg-2:#eceef2; --surface:#ffffff; --card:#ffffff; --line:#e2e8e9;
--teal:#3D3494; --teal-strong:#2f2875; --teal-soft:rgba(61,52,148,.10);
/* `--muted` انغمّق شعرة (#66777d ← #5f7075) لأنه كان يعطي تبايناً ٤.٣١
على خلفية الصفحة والحد المقبول ٤.٥ — الفرق مو ملحوظ بالعين ويصلّح
التسميات والتذييلات وزر الرجوع بكل الشاشات مرة وحدة */
--gold:#c9a227; --text:#182226; --muted:#5f7075; --faint:#9aa7ab;
--success:#1e9e62; --error:#d94f45;
--ink:#182226; --accent:#c9a227; --ok:#1e9e62; --err:#d94f45; --warn:#d9930d;
--accent-ink:#2b2306; --accent-text:#8a6d15;
--teal-ink:#ffffff; --shadow:0 1px 3px rgba(15,40,40,.06); --radius:14px;
background:var(--bg); color:var(--ink);
font-family:'Cairo','Segoe UI',Tahoma,'Noto Naskh Arabic',sans-serif;
transition:background .2s,color .2s;
}
body.mapp-on.dark{
--bg:#121022; --bg-2:#0d0b1c; --surface:#1a1730; --card:#1a1730; --line:#2a2545;
--teal:#8a7fe8; --teal-strong:#6f63d9; --teal-soft:rgba(138,127,232,.14);
/* نفس السبب بالليلي — انفتّح شعرة (#9691b8 ← #a7a2ce) */
--gold:#d4b04a; --text:#e9e7f4; --muted:#a7a2ce; --faint:#6b668c;
--success:#3bbd7d; --error:#e4685f;
--ink:#e9e7f4; --accent:#d4b04a; --ok:#3bbd7d; --err:#e4685f; --warn:#e0a63a;
--accent-ink:#231b04; --accent-text:#d4b04a;
--teal-ink:#120e33; --shadow:0 1px 3px rgba(0,0,0,.35);
}
/* توافق الشاشات المشتركة (إدارة، استوديو، نوافذ) ويا الهوية الجديدة —
تصليح ألوان قديمة مكتوبة ثابتة كانت تفترض الخلفية الغامقة */
body.mapp-on .msg.err{color:var(--error)}
body.mapp-on .msg.ok{color:var(--success)}
/* التحذير كان ذهبياً فاتحاً (#E3C766) مصمّماً لخلفية غامقة — يضيع على الفاتح */
body.mapp-on .msg.warn{color:var(--accent-text)}
/* ألوان الهوية نفسها تباينها ٢.٩–٤.١ فوق خلفية الرسالة الفاتحة، والحد ٤.٥.
نغمّقها بالوضع النهاري بس — الليلي أصلاً يعدّي (٥–٧.٥). */
body.mapp-on:not(.dark) .msg.err{color:color-mix(in srgb, var(--error) 70%, #000)}
body.mapp-on:not(.dark) .msg.ok{color:color-mix(in srgb, var(--success) 68%, #000)}
body.mapp-on:not(.dark) .msg.warn{color:color-mix(in srgb, var(--accent-text) 85%, #000)}
/* لافتة دعوة المسوّق: خلفيتها ملوّنة فتاكل شعرة من التباين — النص
الفرعي وكع ٤.٧٧←٤.٤٣ والحد ٤.٥، والأيقونة الذهبية ١.٨٣ والحد ٣
للأيقونات. نغمّقهن بالنهاري بس، نفس حيلة `.msg.err` فوك.
الليلي أصلاً يعدّي (٤.٣٨–٧.١٩) فما نلمسه. */
body.mapp-on:not(.dark) .ref-note .tx span{color:color-mix(in srgb, var(--muted) 85%, #000)}
body.mapp-on:not(.dark) .ref-note .ic{color:var(--accent-text)}
body.mapp-on:not(.dark) .ref-note.bad .ic{color:color-mix(in srgb, var(--error) 70%, #000)}
/* ظل التبويب المفعّل كان مبنياً على خلفية غامقة فيطلع بقعة سودة على الفاتح */
body.mapp-on .tabs button.active{box-shadow:var(--shadow)}
/* سطور التذييل كانت `--faint` (لون تلميح مصمَّم للغامق) — على الفاتح تباينها
٢.٣ يعني شبه ما تنقرا. `--muted` هو أقل لون نصّي مقبول */
body.mapp-on .start-foot, body.mapp-on .auth-foot{color:var(--muted)}
/* الذهبي بشفافية ٧٥٪ تباينه ٢.٢ على الفاتح — نستعمل نسخة النص الذهبية بلا شفافية */
body.mapp-on:not(.dark) .auth-foot .gold-line{color:var(--accent-text);opacity:1}
/* سهم بطاقة الاختيار كان `--faint` (٢.٥) — رفعناه للون النصّي المقبول */
body.mapp-on .choice .arrow{color:var(--muted)}
body.mapp-on .cust-head{background:color-mix(in srgb, var(--bg) 94%, transparent)}
body.mapp-on .ci-sub .hd b{color:var(--text)}
body.mapp-on .sh-handle{background:var(--faint)}
.app:has(> #scr-main.on){padding:0}
#scr-main{padding:20px 18px 110px;position:relative}
/* بدون transform: الشاشة المتحركة تصير containing block للشريط السفلي الثابت فيطفر متأخر */
#scr-main.on{animation:fadeFlat .3s ease}
@keyframes fadeFlat{from{opacity:0}to{opacity:1}}
/* بطاقة أساس مشتركة */
.mpc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.mp-page{display:none;flex-direction:column}
.mp-page.on{display:flex;animation:fadeIn .25s ease}
/* ترويسة لوحة التحكم */
.mp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.mp-head .nm{font-size:21px;font-weight:800;line-height:1.3}
.mp-pub{display:flex;align-items:center;gap:6px;background:rgba(30,158,98,.12);color:var(--ok);font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;margin-top:6px;white-space:nowrap}
body.mapp-on.dark .mp-pub{background:rgba(59,189,125,.14)}
/* نفس سبب `.mp-st` — الأخضر على خلفية خضراء شفيفة تباينه ٣.١ */
body.mapp-on:not(.dark) .mp-pub{color:color-mix(in srgb, var(--ok) 62%, #000)}
/* عدّاد التجربة */
.mp-trial{padding:12px 14px;display:flex;flex-direction:column;gap:8px;margin-top:14px}
.mp-trial .row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.mp-trial .t{font-size:12.5px;font-weight:700}
.mp-trial .up{background:var(--teal);color:var(--teal-ink);border:none;border-radius:999px;font-size:11.5px;font-weight:700;padding:5px 14px;cursor:pointer}
.mp-trial .bar{height:5px;background:var(--line);border-radius:999px;overflow:hidden}
.mp-trial .bar i{display:block;height:100%;background:var(--teal);border-radius:999px;transition:width .3s}
.mp-trial .sub{font-size:11px;color:var(--muted)}
/* 💳 **حالة المشترك.** ⛔ ولا شريط تقدّم — ماكو سقف يتقدّم نحوه. */
.mp-trial.paid .bar{display:none}
.mp-trial.paid .t{font-size:14px}
/* ⚠️ `:not(.hidden)` ضرورية: `.hidden{display:none}` صنف واحد،
و`.mp-trial .plan-rows` صنفان — فبلاها الصفوف **ما تنخفي أبداً**.
نفس فخّ `#mp-plans-list` المسجَّل بـCLAUDE.md. */
.mp-trial .plan-rows:not(.hidden){display:flex;flex-direction:column;gap:8px;
border-top:1px solid var(--line);padding-top:11px;margin-top:3px}
.mp-trial .plan-rows .r{display:flex;justify-content:space-between;
align-items:center;gap:10px;font-size:12.5px}
.mp-trial .plan-rows .r i{font-style:normal;color:var(--muted)}
.mp-trial .plan-rows .r b{font-weight:800}
body.mapp-on:not(.dark) .mp-trial .plan-rows .r i{color:color-mix(in srgb, var(--muted) 85%, #000)}
/* 🔴 **دعوة الترقية صارت عريضة** — چانت حبّة صغيرة ١١.٥px بزاوية
البطاقة، وهي **الطريق الوحيد للفلوس بكل التطبيق**. (المستخدم:
«ليش الترقية لهل درجة مهمشة».)
⛔ وما نكتب `display` هنا — `.hidden` صنف واحد وهذا صنفان،
فتحديد `display` يمنعها من الاختفاء. العرض الكامل بـ`width`. */
.mp-trial .cta{width:100%;background:var(--teal);color:var(--teal-ink);
border:none;border-radius:var(--radius);padding:12px;
font-size:13.5px;font-weight:800;line-height:1.6;
cursor:pointer;font-family:inherit;margin-top:5px}
/* 🛡️ «انصدّت محاولات طلب» — تطلع بس إذا أكو صدّ بآخر ٤٨ ساعة.
نفس تشريح `.sub-state` (أيقونة + عنوان + سطر) حتى تقرا كأنها من
نفس التطبيق. ونبرتها **ذهبية مو حمراء** عمداً: هاي معلومة يمكن
تحتاج تصرّفاً، مو عطلاً صار بمتجره — والأحمر يخوّف بلا سبب.
⛔ و`.hidden` لازم تبقى تشتغل: الكلاسان بنفس القوة، فقاعدة الإخفاء
تحت — لا تنقلها فوك. */
.md-warn{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;margin-top:10px;
background:rgba(201,162,39,.12);border-color:rgba(201,162,39,.38);box-shadow:none}
.md-warn .ic{font-size:18px;line-height:1.45;flex:none}
.md-warn .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.md-warn .tx b{font-size:12.5px;font-weight:800;color:var(--text);line-height:1.7}
.md-warn .tx span{font-size:11.5px;color:var(--muted);line-height:1.85}
/* `--muted` على الخلفية الذهبية الفاتحة = ٤.٣٩ بالنهاري والحد ٤.٥ —
نفس تغميق ٨٥٪ المستعمل بـ`.sub-state` و`.msg.err`. */
body.mapp-on:not(.dark) .md-warn .tx span{color:color-mix(in srgb, var(--muted) 85%, #000)}
.md-warn.hidden{display:none}
/* 📉 **طلبات ضاعت** — أحمر لأنها **خسارة حصلت فعلاً** مو تنبيه.
نفس تشريح `.md-warn` وبألوان `.md-stop`.
⚠️ وما تتصادم ويا لافتة الإيقاف عملياً: المتجر الموقوف ما يستقبل
طلبات أصلاً فعدّاده ما يزيد. */
.md-lost{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;margin-top:10px;
background:rgba(217,79,69,.10);border-color:rgba(217,79,69,.4);box-shadow:none}
body.mapp-on.dark .md-lost{background:rgba(228,104,95,.13);border-color:rgba(228,104,95,.34)}
.md-lost .ic{font-size:19px;line-height:1.4;flex:none}
.md-lost .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.md-lost .tx b{font-size:13.5px;font-weight:800;color:var(--text);line-height:1.65}
.md-lost .tx span{font-size:12px;color:var(--muted);line-height:1.85}
body.mapp-on:not(.dark) .md-lost .tx span{color:color-mix(in srgb, var(--muted) 85%, #000)}
.md-lost .go-sm{margin-top:3px}
.md-lost.hidden{display:none}
/* ⚠️ **الحصة خلصت** — نفس بطاقة اللوحة بس بلون تحذير، لأن كل دقيقة
تمرّ بيها ممكن تضيع طلب. */
.mp-trial.out .bar i{background:var(--error)}
.mp-trial.out .t{color:var(--error)}
body.mapp-on:not(.dark) .mp-trial.out .t{color:color-mix(in srgb, var(--error) 88%, #000)}
/* 🛑 «متجرك موقوف» — نفس تشريح `.md-warn` بس **أحمر**، وهنا الأحمر
صحيح: هذي مو معلومة، هي حالة توكّف بزنسه ولازم تنط بعينه.
وتنحط فوك كل شي بلوحة التحكم. */
.md-stop{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;margin-top:12px;
background:rgba(217,79,69,.10);border-color:rgba(217,79,69,.4);box-shadow:none}
body.mapp-on.dark .md-stop{background:rgba(228,104,95,.13);border-color:rgba(228,104,95,.34)}
.md-stop .ic{font-size:19px;line-height:1.4;flex:none}
.md-stop .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.md-stop .tx b{font-size:14px;font-weight:800;color:var(--text);line-height:1.6}
.md-stop .tx span{font-size:12px;color:var(--muted);line-height:1.85}
.md-stop .tx a{color:var(--teal);font-weight:700}
body.mapp-on:not(.dark) .md-stop .tx span{color:color-mix(in srgb, var(--muted) 85%, #000)}
.md-stop.hidden{display:none}
/* عناوين الأقسام وصفوف الطلبات */
.mp-sec{display:flex;justify-content:space-between;align-items:center;padding:16px 0 8px}
.mp-sec b{font-size:15px;font-weight:800}
.mp-sec .lnk{display:flex;align-items:center;gap:6px;background:none;border:none;color:var(--teal);font-size:12.5px;font-weight:700;cursor:pointer;padding:0}
.mp-sec .lnk .cnt{background:var(--teal);color:var(--teal-ink);font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:999px}
.mp-rows{display:flex;flex-direction:column;gap:8px}
.mp-row{padding:11px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.mp-row .who{display:flex;flex-direction:column;gap:1px}
.mp-row .who b{font-size:13px;font-weight:700}
.mp-row .who span{font-size:11px;color:var(--muted)}
.mp-row .left{display:flex;align-items:center;gap:10px}
.mp-row .amt{font-size:13px;font-weight:800}
.mp-row .amt small{font-size:10px;color:var(--muted);font-weight:600}
/* لون الشارة يوصل من app.js بمتغيّر `--c` حتى تكدر CSS تغمّقه بالنهاري */
.mp-st{font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap;
color:var(--c);background:color-mix(in oklab, var(--c) 12%, transparent)}
/* النص الملوّن فوق خلفية بنفس لونه بشفافية ١٢٪ تباينه ٣ وأقل، والحد ٤.٥.
نغمّق النص بس — الخلفية تبقى نفسها فالشكل ما يتغيّر تقريباً.
`st-new` مستثنى: اللازورد أصلاً تباينه ٨.٧ وتغميقه يوسّخ لون الهوية.
الليلي ما يحتاج شي (٥.٩–٧). */
body.mapp-on:not(.dark) .mp-st:not(.st-new){color:color-mix(in srgb, var(--c) 62%, #000)}
/* الإحصائيات */
.mp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
/* عنوان القسم (`.mp-sec`) عنده حشوة سفلية ٨px — فاللي يجي بعده
مباشرة ما يحتاج فراغه هو، وإلا صار ٢٢px وانفتق القسم عن عنوانه.
`.mp-rows` و`.mp-grid` أصلاً بصفر، وهذي تلحكهن. */
.mp-sec + .mp-stats{margin-top:0}
/* بطاقة إنذار المخزون كانت **ملزوكة بالمخطط بلا ولا فراغ**
(`margin-top:0`) — واحد من أسباب حسّ التكدّس. انصلّح ٩ آب. */
#md-stock{margin-top:12px}
.mp-stat{padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.mp-stat .lb{font-size:10.5px;color:var(--muted)}
.mp-stat .v{font-size:19px;font-weight:800}
.mp-stat .v.small{font-size:14px;margin-top:3px}
.mp-stat .v small{font-size:10px;color:var(--muted);font-weight:600}
/* انشال `.mp-stat .soon` — كلاس `soon` ينكتب ببطاقات `.mp-feat` بس
(app.js قسم الحيل)، وبطاقات `.mp-stat` ما بيها غير `.lb` و`.v`.
النسخة الحيّة `.mp-feat .soon` وهي موجودة بمكانها. */
/* رسم الطلبات الأسبوعي */
.mp-chart{margin-top:12px;padding:14px}
.mp-chart .t{font-size:13px;font-weight:700}
.mp-bars{display:flex;align-items:flex-end;gap:8px;height:86px;margin-top:14px}
.mp-bars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end}
.mp-bars .bar{width:100%;max-width:22px;border-radius:5px 5px 2px 2px;background:var(--teal-soft)}
.mp-bars .col.today .bar{background:var(--teal)}
.mp-bars .d{font-size:9.5px;color:var(--muted)}
.mp-chart .none{font-size:11px;color:var(--muted);text-align:center;margin-top:8px}
.mp-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
/* بطاقة وحدة تتمدّد على السطر بدل ما تترك نص صف فاضي */
.mp-two.one{grid-template-columns:1fr}
.mp-mini{padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.mp-mini .lb{font-size:11px;color:var(--muted)}
.mp-mini .v{font-size:14px;font-weight:800}
.mp-mini .s{font-size:11.5px;font-weight:700}
/* كانت الألوان مكتوبة `style=` بـindex.html — انتقلن هنا حتى ينغمّقن بالنهاري.
الأخضر كان ٣.٤ والذهبي ٢.٦ على خلفية البطاقة البيضاء، والحد ٤.٥ */
.mp-mini .s.ok{color:var(--ok)}
.mp-mini .s.warn{color:var(--warn)}
body.mapp-on:not(.dark) .mp-mini .s.ok{color:color-mix(in srgb, var(--ok) 62%, #000)}
body.mapp-on:not(.dark) .mp-mini .s.warn{color:color-mix(in srgb, var(--warn) 62%, #000)}
/* شبكة إدارة الموقع */
.mp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mp-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px;cursor:pointer;color:var(--ink);text-align:right;font-family:inherit}
.mp-tile.wide{grid-column:1 / -1;flex-direction:row;align-items:center;gap:12px}
.mp-tile .ic{width:38px;height:38px;border-radius:12px;background:var(--teal-soft);color:var(--teal);display:flex;align-items:center;justify-content:center;flex:none}
.mp-tile .tx{display:flex;flex-direction:column;gap:1px}
.mp-tile .tx b{font-size:13.5px;font-weight:800}
.mp-tile .tx span{font-size:11px;color:var(--muted)}
.mp-tile .new{position:absolute;top:12px;left:12px;background:var(--teal);color:var(--teal-ink);font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px}
/* رأس الصفحات الداخلية */
.mp-phead{display:flex;align-items:center;gap:10px;padding:0 0 12px}
.mp-phead .bk{width:36px;height:36px;border-radius:var(--radius);border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;font-family:inherit}
.mp-phead b{font-size:17px;font-weight:800}
/* ➕ زر إجراء براس الشاشة — `margin-inline-start:auto` تدفعه لطرف
السطر المقابل للعنوان (يسار بالعربي) بلا عنصر حشو. */
.mp-phead-act{
margin-inline-start:auto;flex:none;cursor:pointer;white-space:nowrap;
border:0;border-radius:999px;padding:9px 15px;
font-size:12.5px;font-weight:700;line-height:1;font-family:inherit;
background:var(--teal);color:var(--teal-ink);
}
.mp-ptitle{font-size:21px;font-weight:800;padding:2px 0 0}
.mp-psub{font-size:12.5px;color:var(--muted);margin-top:4px}
/* تبويبات الطلبات وبطاقاتها */
.mp-pills{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.mp-pill{border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;display:flex;gap:6px;align-items:center;font-family:inherit}
.mp-pill.on{border-color:var(--teal);background:var(--teal);color:var(--teal-ink)}
.mp-pill i{font-style:normal;font-size:11px;opacity:.75}
.mp-ocard{margin-top:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
.mp-ocard .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mp-ocard .top .id{font-size:13px;font-weight:800}
.mp-ocard .top .tm{font-size:11px;color:var(--muted)}
.mp-ocard .cust b{font-size:13.5px;font-weight:700}
.mp-ocard .cust .ph{font-size:12px;color:var(--muted);font-weight:600}
.mp-ocard .cust .ad{font-size:12px;color:var(--muted)}
.mp-oitems{display:flex;flex-direction:column;gap:5px;background:var(--bg-2);border-radius:calc(var(--radius) - 5px);padding:10px 12px}
.mp-oitems div{display:flex;justify-content:space-between;gap:8px;font-size:12.5px}
.mp-oitems div span:last-child{color:var(--muted);white-space:nowrap}
.mp-osum{display:flex;flex-direction:column;gap:3px;font-size:12px}
.mp-osum div{display:flex;justify-content:space-between;color:var(--muted)}
.mp-osum .tot{font-size:13.5px;font-weight:800;color:var(--teal)}
.mp-onote{font-size:11.5px;color:var(--muted);background:rgba(217,147,13,.08);border-radius:calc(var(--radius) - 5px);padding:8px 12px}
/* 🚚 سطر حالة الوسيط ببطاقة الطلب — سطر واحد هادئ، مو بطاقة ثانية.
الألوان من متغيّرات التطبيق حتى الوضع الليلي يشتغل بلا نسخة. */
.mp-ws{display:flex;align-items:center;gap:7px;margin-top:10px;padding:9px 11px;
background:var(--bg-2);border-radius:calc(var(--radius) - 4px);font-size:12px;color:var(--muted)}
.mp-ws .i{flex:none;font-size:12px}
.mp-ws .t{flex:1;min-width:0;line-height:1.6}
.mp-ws.ws-sent{background:var(--teal-soft);color:var(--teal)}
/* ⚠️ `--error` على `--bg-2` بالنهاري يعطي تحت ٤.٥ — نغمّقه شعرة،
نفس حيلة `.sub-form .dest` و`.ref-note`. */
.mp-ws.ws-failed{color:var(--error)}
body.mapp-on:not(.dark) .mp-ws.ws-failed{color:color-mix(in srgb, var(--error) 82%, #000)}
.mp-ws .ws-x{flex:none;background:none;border:1px solid var(--line);color:var(--muted);
border-radius:999px;padding:4px 11px;font-size:11.5px;font-weight:700;
cursor:pointer;font-family:inherit}
.mp-ws .ws-lnk{flex:none;color:inherit;font-size:11.5px;font-weight:800;text-decoration:underline}
/* ↩️ سطر «الزبون طلب إرجاعه» — نفس هدوء سطر الوسيط، بس بلون تنبيه
مو خطأ: الإرجاع شغلة عادية بالعراق مو عطل بالنظام.
⚠️ `--warn` على `--bg-2` بالنهاري يوطّي عن ٤.٥ — نغمّقه بنفس حيلة
`.mp-mini .s.warn`. */
.mp-oret{margin-top:10px;padding:9px 11px;background:rgba(217,147,13,.10);
border-radius:calc(var(--radius) - 4px);font-size:12px;color:var(--warn);
display:flex;flex-wrap:wrap;align-items:center;gap:7px}
body.mapp-on:not(.dark) .mp-oret{color:color-mix(in srgb, var(--warn) 62%, #000)}
.mp-oret b{font-weight:800}
.mp-oret .tm{margin-inline-start:auto;font-size:11px;opacity:.85}
.mp-oret .nt{flex-basis:100%;color:var(--muted);font-size:11.5px;line-height:1.6}
.mp-pill.ret.on{border-color:var(--warn);background:var(--warn);color:#1b1405}
/* 🛵 «بيد مندوبك» — نفس هيكل `.mp-oret` بس **باللازوردي مو التحذيري**:
هذي حالة طبيعية (شغلك ماشي)، والإرجاع و«ما وصّله» مشاكل. لو
انصبغت بلون التحذير صار التاجر يتوتّر من كل طلب يمشي صح. */
.mp-ocr{margin-top:10px;padding:9px 11px;
background:color-mix(in srgb, var(--teal) 9%, transparent);
border-radius:calc(var(--radius) - 4px);font-size:12px;color:var(--teal);
display:flex;flex-wrap:wrap;align-items:center;gap:7px}
body.mapp-on:not(.dark) .mp-ocr{color:var(--teal-tx)}
.mp-ocr b{font-weight:800}
.mp-ocr .nt{flex-basis:100%;color:var(--muted);font-size:11.5px;line-height:1.6}
.mp-obtns{display:flex;gap:8px}
.mp-obtns .nx{flex:1;background:var(--teal);color:var(--teal-ink);border:none;border-radius:var(--radius);padding:10px;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit}
.mp-obtns .cn{background:rgba(217,79,69,.10);color:var(--err);border:none;border-radius:var(--radius);padding:10px 16px;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit}
.mp-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 20px;color:var(--muted);font-size:13px;text-align:center}
.mp-empty .big{font-size:34px}
/* الحيل التسويقية */
/* 🔧 البطاقة صارت أداة تنفتح بمكانها (٩ آب) — فالصف العلوي انلفّ
بـ`.hd` واللوحة تنزل تحته. البطاقة القديمة (بلا أداة) تبقى نفسها
لأن `.hd` تاخذ نفس تخطيط الصف. */
.mp-feat.has-tool{flex-direction:column;align-items:stretch;gap:0}
.mp-feat .hd{display:flex;align-items:center;gap:12px;width:100%}
.mp-feat-tool{
border-top:1px solid var(--line);margin-top:12px;padding-top:12px;
display:flex;flex-direction:column;gap:8px;
}
.mk-tool-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mk-tool-row>span{font-size:12.5px;font-weight:700}
.mk-tool-row>i{font-style:normal;font-size:11.5px;color:var(--muted)}
.mk-tool-row>input{
width:92px;flex:none;text-align:center;font-size:13px;font-weight:700;line-height:1;font-family:inherit;color:var(--ink);
background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 6px;
}
.mk-tool-row>input:focus{outline:none;border-color:var(--teal)}
.mk-tool-row .mk-pick{
flex:1;min-width:150px;font-size:12.5px;font-weight:600;line-height:1;font-family:inherit;color:var(--ink);
background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 8px;
}
.mk-tool-msg{font-size:11.5px;line-height:1.8;color:var(--muted)}
.mk-tool-msg.ok{color:var(--ok)}
.mk-tool-msg.bad{color:var(--err)}
body.mapp-on:not(.dark) .mk-tool-msg.ok{color:color-mix(in srgb, var(--ok) 62%, #000)}
.mk-tool-go{
border:0;border-radius:11px;cursor:pointer;background:var(--teal);color:var(--teal-ink);
font-size:13px;font-weight:700;line-height:1;font-family:inherit;padding:12px;width:100%;
}
.mk-tool-go:disabled{opacity:.6;cursor:default}
.mp-feat{padding:13px 14px;display:flex;align-items:center;gap:12px;margin-top:10px}
.mp-feat .ic{width:38px;height:38px;border-radius:12px;background:var(--teal-soft);color:var(--teal);display:flex;align-items:center;justify-content:center;flex:none}
.mp-feat .tx{flex:1;display:flex;flex-direction:column;gap:1px}
.mp-feat .tx b{font-size:13.5px;font-weight:800}
.mp-feat .tx span{font-size:11.5px;color:var(--muted)}
.mp-feat .go{background:var(--teal-soft);color:var(--teal);border:none;border-radius:999px;padding:6px 16px;font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:inherit}
.mp-feat .soon{background:none;border:1px dashed var(--line);color:var(--faint);border-radius:999px;padding:5px 13px;font-size:10.5px;font-weight:700;white-space:nowrap}
.mp-dash-note{border:1px dashed var(--line);border-radius:var(--radius);padding:16px;text-align:center;font-size:12px;color:var(--muted);margin-top:10px}
/* مفاتيح التبديل */
.mp-sw{width:40px;height:22px;border-radius:999px;border:none;background:var(--line);position:relative;cursor:pointer;transition:background .15s;flex:none}
.mp-sw i{position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.18);transform:translateX(0);transition:transform .15s}
.mp-sw.on{background:var(--teal)}
.mp-sw.on i{transform:translateX(-18px)}
/* إعدادات (المتجر + الضبط) */
.mp-set{display:flex;flex-direction:column;margin-top:12px}
.mp-set .srow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px}
.mp-set .srow + .srow{border-top:1px solid var(--line)}
/* 📦 سعر الجملة باستمارة المنتج — انبنى ٩ آب */
.cm-bulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cm-bulk>span{font-size:12.5px;color:var(--muted)}
.cm-bulk>input{
width:82px;flex:none;text-align:center;font-size:13.5px;font-weight:700;line-height:1;font-family:inherit;
color:var(--ink);background:var(--bg);border:1px solid var(--line);
border-radius:10px;padding:9px 6px;
}
.cm-bulk>input:focus{outline:none;border-color:var(--teal)}
.cm-bulk-hint{font-size:11.5px;line-height:1.8;color:var(--muted);margin-top:6px}
.cm-bulk-hint.ok{color:var(--ok)}
.cm-bulk-hint.bad{color:var(--err)}
/* النهاري يحتاج تغميقاً حتى يعبر ٤٫٥ — نفس حيلة `.mp-mini .s.ok` */
body.mapp-on:not(.dark) .cm-bulk-hint.ok{color:color-mix(in srgb, var(--ok) 62%, #000)}
/* 🚚 سعر التوصيل — انبنى ٩ آب مكان الخانة المقفولة «قريباً» */
.ms-del{border-top:1px solid var(--line);padding-top:4px}
.ms-del .mp-seg-wrap{margin:2px 0 10px}
.ms-del-row{display:flex;align-items:center;gap:10px;padding:7px 0}
.ms-del-row>span{flex:1;font-size:13px;font-weight:700}
.ms-del-row.prov>span{font-weight:500;color:var(--muted)}
.ms-del-row>input{
width:104px;flex:none;text-align:center;font-size:13.5px;font-weight:700;line-height:1;font-family:inherit;
color:var(--ink);background:var(--bg);border:1px solid var(--line);
border-radius:10px;padding:9px 6px;
}
.ms-del-row>input:focus{outline:none;border-color:var(--teal)}
.ms-del-row>input::placeholder{color:var(--muted);font-weight:500;font-size:12px}
.ms-del-row>i{font-style:normal;font-size:11.5px;color:var(--muted);width:24px;flex:none}
.ms-del-hint{font-size:11.5px;color:var(--muted);line-height:1.8;padding:2px 0 6px}
#ms-del-list{max-height:290px;overflow:auto;margin-top:2px}
.ms-del-save{
width:100%;margin-top:10px;border:0;border-radius:12px;cursor:pointer;
background:var(--teal);color:var(--teal-ink);font-size:13.5px;font-weight:700;line-height:1;font-family:inherit;padding:13px;
}
.ms-del-save:disabled{opacity:.6;cursor:default}
.mp-set .srow .tx{display:flex;flex-direction:column;gap:1px}
.mp-set .srow .tx b{font-size:13.5px;font-weight:700}
.mp-set .srow .tx span{font-size:11.5px;color:var(--muted)}
.mp-set input{width:100px;text-align:center;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:calc(var(--radius) - 5px);padding:8px;font-size:13px;font-weight:700;font-family:inherit}
.mp-set input:disabled{opacity:.5}
.mp-set .arrow-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border:none;border-top:1px solid var(--line);background:none;color:var(--ink);cursor:pointer;text-align:right;width:100%;font-family:inherit}
.mp-set .arrow-btn b{font-size:13.5px;font-weight:700}
/* بطاقة الواتساب المقفلة (أشور بلس) */
/* انشال `.mp-lock` — البطاقة المقفلة الوحيدة اللي چانت تستعمله
(«إشعارات واتساب») انشالت ٥ آب. ما بقى ولا عنصر بهالكلاس. */
/* انشال كل ستايل الايجنتسي (٨ آب) — الشاشة انحذفت، فما بقى
ولا عنصر يحمل .mp-ag-head ولا .mp-agent ولا .mp-ag-note. */
/* المعاينة الحية */
.mp-url{margin-top:14px;padding:12px;display:flex;flex-direction:column;gap:8px}
.mp-url .row{display:flex;align-items:center;gap:8px}
.mp-url .lnkbox{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:calc(var(--radius) - 5px);padding:9px 12px;font-family:ui-monospace,monospace;font-size:11.5px;color:var(--ink);text-align:left;overflow-x:auto;white-space:nowrap;direction:ltr}
.mp-url .cp{background:var(--teal-soft);color:var(--teal);border:none;border-radius:calc(var(--radius) - 5px);padding:9px 14px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:inherit}
.mp-url .op{width:100%;background:none;border:1px solid var(--teal);color:var(--teal);border-radius:calc(var(--radius) - 5px);padding:9px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
.mp-phone{margin:18px auto 0;width:280px;border:9px solid var(--ink);border-radius:calc(var(--radius) * 2.6);overflow:hidden;background:var(--card)}
.mp-phone .notch{height:24px;display:flex;align-items:center;justify-content:center}
.mp-phone .notch i{width:70px;height:8px;background:var(--line);border-radius:999px}
.mp-phone iframe{display:block;width:100%;height:452px;border:none;background:var(--card)}
/* الحساب الشخصي */
.mp-acc{margin-top:14px;padding:16px;display:flex;flex-direction:column;gap:14px}
.mp-acc .who{display:flex;align-items:center;gap:12px}
.mp-acc .av{width:52px;height:52px;border-radius:999px;background:var(--teal-soft);color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;flex:none}
.mp-acc .who .n{font-size:15px;font-weight:800}
.mp-acc .who .r{font-size:12px;color:var(--muted)}
.mp-acc .info{display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--line);padding-top:12px;font-size:12.5px}
.mp-acc .info div{display:flex;justify-content:space-between;gap:10px}
.mp-acc .info span:first-child{color:var(--muted)}
.mp-acc .info span:last-child{font-weight:700;overflow:hidden;text-overflow:ellipsis}
.mp-serv{padding:14px;display:flex;flex-direction:column;gap:12px}
.mp-serv .row{display:flex;align-items:center;gap:11px}
.mp-serv .ic{width:38px;height:38px;border-radius:12px;background:var(--teal-soft);color:var(--teal);display:flex;align-items:center;justify-content:center;flex:none}
.mp-serv .row b{flex:1;font-size:13.5px;font-weight:800}
.mp-seg-wrap{display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--line);padding-top:12px}
.mp-seg{display:flex;background:var(--bg-2);border-radius:999px;padding:4px;gap:4px}
.mp-seg button{flex:1;border:none;border-radius:999px;padding:8px;font-size:12.5px;font-weight:700;cursor:pointer;background:transparent;color:var(--muted);transition:background .15s;font-family:inherit}
.mp-seg button.on{background:var(--card);color:var(--teal)}
.mp-seg-hint{font-size:11px;color:var(--muted);text-align:center}
.mp-seg-lb{font-size:12px;font-weight:700;color:var(--ink)}
/* 🛵 محافظات المندوب — شبكة أزرار تنضغط مو قائمة منسدلة: التاجر
يختار أكثر من وحدة، والمنسدلة ما توري المختار كله بضربة عين. */
/* 🔘 **زر صغير بشكل مضبوط.**
🔴 `.go` **ما إلها ولا قاعدة عامة بالمشروع** — كلهن مقيّدات
بحاويات (`.sub-form .go` · `.mp-supp .go` · `.stk-card .go` …).
وزر «احفظ» مال المندوب داخل `.mpc.mp-set` **وهي مو وحدة منهن**،
فطلع بشكل المتصفح الافتراضي: **٢٥×١٩px رمادي بزوايا حادة**.
انمسك ٢٠ آب بعين المستخدم («كلمة الحفظ حطلها قالب صغير»).
⛔ **وما انحلّت بـ`.mp-set .go`** — نفس خصوصية `.sub-form .go`
وتجي بعدها، فچانت تدهس زر «اربط الحساب» وتصغّره هو هم.
🔑 **وصغير عمداً مو بعرض البطاقة** — «اربط الحساب» فوكه هو
الإجراء الأساسي، ولو صارا بنفس الحجم انطمس الفرق بينهما. */
.go-sm{align-self:flex-start;background:var(--teal);color:var(--teal-ink);
border:none;border-radius:999px;padding:9px 26px;
font-size:12.5px;font-weight:800;line-height:1.6;
cursor:pointer;font-family:inherit}
.go-sm[disabled]{opacity:.45;cursor:not-allowed}
.cr-provs{display:flex;flex-wrap:wrap;gap:6px}
.cr-provs button{border:1px solid var(--line);background:var(--card);color:var(--muted);
border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:700;
cursor:pointer;font-family:inherit}
.cr-provs button.on{border-color:var(--teal);background:var(--teal);color:var(--teal-ink)}
.cr-link{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);
padding-top:12px;margin-top:4px}
.cr-link .lnk{background:var(--bg-2);border-radius:10px;padding:10px 12px;font-size:11.5px;
color:var(--ink);word-break:break-all;direction:ltr;text-align:left}
.cr-link .row{display:flex;gap:8px}
.cr-link .row button{flex:1;border:1px solid var(--line);background:var(--card);color:var(--ink);
border-radius:10px;padding:9px;font-size:12.5px;font-weight:700;
cursor:pointer;font-family:inherit}
.cr-link .rot{background:none;border:none;font-size:12px;font-weight:700;cursor:pointer;
font-family:inherit;align-self:center;color:var(--error)}
/* `--error` على `--card` بالنهاري يوطّي عن ٤.٥ — نفس حيلة `.mp-ws.ws-failed` */
body.mapp-on:not(.dark) .cr-link .rot{color:color-mix(in srgb, var(--error) 82%, #000)}
.mp-create-aff{display:flex;align-items:center;justify-content:center;border:1px dashed var(--teal);background:none;color:var(--teal);border-radius:var(--radius);padding:11px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
/* الضبط */
.mp-supp{margin-top:14px;background:var(--teal-soft);border:1px solid rgba(61,52,148,.30);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:9px}
body.mapp-on.dark .mp-supp{border-color:rgba(138,127,232,.30)}
.mp-supp .t{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800}
.mp-supp .ic{width:40px;height:40px;border-radius:999px;background:var(--teal);color:var(--teal-ink);display:flex;align-items:center;justify-content:center;flex:none}
.mp-supp p{font-size:12.5px;color:var(--muted);line-height:1.7}
.mp-supp .go{align-self:flex-start;background:var(--teal);color:var(--teal-ink);border:none;border-radius:999px;padding:8px 22px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
.mp-logout{width:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:13px;font-size:13.5px;font-weight:700;color:var(--err);cursor:pointer;margin-top:12px;font-family:inherit}
/* انشال `.mp-delacc` — زر «حذف الحساب» نفسه انشال ٥ آب بقرار المستخدم
(يُستغل بهدية الـ٣٠ طلب)، وستايله بقى يتيماً. ⛔ لا يرجع الاثنان. */
/* الشريط السفلي */
.mp-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:var(--card);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);align-items:end;padding:7px 4px calc(9px + env(safe-area-inset-bottom));z-index:30;transition:background .2s}
.mp-nav button{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);padding:2px 0;font-family:inherit}
.mp-nav button span{font-size:9.5px;font-weight:700}
.mp-nav button.on{color:var(--teal)}
.mp-nav .center{padding:0}
.mp-nav .center .cir{box-sizing:border-box;width:50px;height:50px;border-radius:999px;background:var(--teal);color:var(--teal-ink);display:flex;align-items:center;justify-content:center;margin-top:-22px;border:3px solid var(--bg);box-shadow:var(--shadow)}
/* `:not(.cir)` ضروري — بدونه القاعدتين تصيبن الدائرة نفسها (هي `span` هم)،
ولمن التبويب يصير `.on` يصير لون البيت = لون خلفية الدائرة فيختفي */
.mp-nav .center span:not(.cir){color:var(--muted)}
.mp-nav .center.on span:not(.cir){color:var(--teal)}
/* تنبيه الطلب الجديد — لافتة تنزل من فوق ويا كل طلب يوصل */
.mp-alert{
position:fixed;top:0;left:50%;width:100%;max-width:430px;z-index:40;
display:none;align-items:center;gap:9px;cursor:pointer;font-family:inherit;text-align:right;
background:var(--teal);color:var(--teal-ink);border:none;
padding:calc(11px + env(safe-area-inset-top)) 16px 11px;
box-shadow:0 6px 20px rgba(15,20,60,.22);
}
.mp-alert.on{display:flex;animation:mpDrop .28s ease}
@keyframes mpDrop{from{transform:translate(-50%,-100%)}to{transform:translate(-50%,0)}}
@media (prefers-reduced-motion: reduce){.mp-alert.on{animation:none}}
.mp-alert{transform:translateX(-50%)}
.mp-alert .ic{font-size:17px;flex:none}
.mp-alert .tx{flex:1;min-width:0;font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-alert .go{
flex:none;font-size:12px;font-weight:800;padding:6px 13px;border-radius:99px;
background:color-mix(in srgb, var(--teal-ink) 16%, transparent);
}
/* نافذة الاشتراكات (أشور بلس) */
.mp-plans-wrap{position:fixed;inset:0;background:rgba(8,18,20,.55);z-index:60;display:none;align-items:flex-end;justify-content:center}
.mp-plans-wrap.on{display:flex}
.mp-plans{width:100%;max-width:430px;background:var(--card);border-radius:var(--radius) var(--radius) 0 0;padding:14px 18px calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;max-height:85vh;overflow-y:auto}
.mp-plans .grip{width:40px;height:4px;background:var(--line);border-radius:999px;align-self:center}
.mp-plans .head{display:flex;justify-content:space-between;align-items:center}
.mp-plans .head b{font-size:17px;font-weight:800}
.mp-plans .x{width:30px;height:30px;border-radius:999px;border:none;background:var(--bg-2);color:var(--muted);cursor:pointer;font-size:13px;font-weight:700;font-family:inherit}
.mp-plan{border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:7px;position:relative}
/* 🔴 بطاقات الخطط چانن **ملزوقات ببعض بصفر فراغ** (انمسك ١٧ آب):
`gap:12px` مكتوبة على `.mp-plans` (الورقة كلها)، وبطاقات الخطط
جوّه `#mp-plans-list` وهو `display:block` — فالفجوة ما توصلهن،
والحدود تتلاصق فتقرا كتلة وحدة مو بطاقات. وانكشف لمن انضافت
شارة «الأوفر» (`.tag` بـ`top:-9px`) فطلعت **تغطّي ٨px من بطاقة
الباقة المجانية** فوكها.
⛔ **ولا تصلّحها بـ`#mp-plans-list{display:flex}`** — المعرّف
يغلب `.hidden{display:none}` (١٠٠ مقابل ١٠) فالقائمة ما تنخفي
أبداً وتوكع فوك استمارة التحويل. الهامش ما يلمس `display` أصلاً. */
#mp-plans-list > * + *{margin-top:12px}
.mp-plan.hot{border:1.5px solid var(--teal)}
.mp-plan .tag{position:absolute;top:-9px;right:14px;background:var(--teal);color:var(--teal-ink);font-size:10px;font-weight:700;padding:2px 12px;border-radius:999px}
.mp-plan .prow{display:flex;justify-content:space-between;align-items:center}
.mp-plan .n{font-size:14px;font-weight:800}
.mp-plan .cur{background:var(--bg-2);color:var(--muted);font-size:10.5px;font-weight:700;padding:3px 11px;border-radius:999px}
.mp-plan .save{background:rgba(201,162,39,.14);color:var(--accent-text);font-size:10.5px;font-weight:700;padding:3px 11px;border-radius:999px}
/* 🎨 شارة «شهران مجاناً» چانت **٤.٣٨** بالنهاري والحد ٤.٥ (انقيست
١٧ آب): `--accent-text` الذهبي على تدرّج ذهبي شفّاف فوك بطاقة
بيضاء. نفس تغميق ٨٥٪ المستعمل بـ`.msg.warn` و`.sub-shut` — صارت
**٥.٦٤**، والليلي ما ينلمس (٦.٦٧ أصلاً).
🔑 **و`in srgb` مو `in oklab`** — الأوكلاب يرجّع بصيغة `oklab(...)`
وأي قياس تباين يقراها غلط. */
body.mapp-on:not(.dark) .mp-plan .save{color:color-mix(in srgb, var(--accent-text) 85%, #000)}
.mp-plan .pr{font-size:16px;font-weight:800}
.mp-plan .pr small{font-size:11px;color:var(--muted);font-weight:600}
.mp-plan p{font-size:12px;color:var(--muted);line-height:1.8}
.mp-plan .sub1{background:var(--teal);color:var(--teal-ink);border:none;border-radius:var(--radius);padding:11px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit}
.mp-plan .sub2{background:none;border:1px solid var(--teal);color:var(--teal);border-radius:var(--radius);padding:11px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit}
.mp-plan .sub1[disabled],.mp-plan .sub2[disabled]{opacity:.45;cursor:not-allowed}
/* --- طلب الاشتراك: بطاقة الحالة واستمارة التحويل (`.sub-*`) ---
⚠️ `sub-` هنا للاشتراكات. مو `mk-` (الحيل التسويقية) ولا `af-`
(تطبيق المسوّق) — الثلاثة موجودات بنفس الملف.
العناوين كلها `var(--text)` عمداً حتى لو الخلفية ملوّنة: النص
الأساسي هو اللي التاجر يقراه ليعرف حالة فلوسه، فما نغامر بتباينه.
والنص الفرعي `--muted` منغمّق بالنهاري فوق الخلفيات الملوّنة —
نفس حيلة `.ref-note` فوك. */
/* ⚠️ `.hidden{display:none}` بأول الملف بنفس الخصوصية (كلاس واحد)،
فترتيب المصدر هو اللي يحكم — ومال هنا أنزل، يعني چان يدهسها
والبطاقة تطلع فارغة وقت المفروض تنخفي. تنعاد صراحة. */
.sub-state{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;border-radius:var(--radius);border:1px solid var(--line);background:var(--bg-2)}
.sub-state.hidden{display:none}
.sub-state .ic{font-size:19px;line-height:1.4;flex:none}
.sub-state .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sub-state .tx b{font-size:13.5px;font-weight:800;color:var(--text);line-height:1.7}
.sub-state .tx span{font-size:12px;color:var(--muted);line-height:1.8}
.sub-state.ok{background:rgba(30,158,98,.10);border-color:rgba(30,158,98,.32)}
.sub-state.bad{background:rgba(217,79,69,.10);border-color:rgba(217,79,69,.32)}
body.mapp-on.dark .sub-state.ok{background:rgba(59,189,125,.13);border-color:rgba(59,189,125,.3)}
body.mapp-on.dark .sub-state.bad{background:rgba(228,104,95,.13);border-color:rgba(228,104,95,.3)}
/* `--muted` فوق أي من الثلاث خلفيات (`--bg-2` أو الأخضر أو الأحمر)
يعطي ٤.٤٥ بالنهاري والحد ٤.٥ — نغمّقه شعرة بالنهاري بس، والليلي
أصلاً يعدّي (٨.٠٤). نفس حيلة `.ref-note` و`.msg.err` فوك. */
body.mapp-on:not(.dark) .sub-state .tx span{color:color-mix(in srgb, var(--muted) 85%, #000)}
.sub-state .again{flex:none;align-self:center;background:var(--teal);color:var(--teal-ink);border:none;border-radius:999px;padding:8px 14px;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit}
/* «قناة الاشتراك بعدها ما انفتحت» — تطلع بس إذا `PAY_DEST` فاضية */
.sub-shut{background:rgba(201,162,39,.12);border:1px solid rgba(201,162,39,.4);color:var(--accent-text);border-radius:13px;padding:12px 15px;font-size:12.5px;line-height:1.85}
body.mapp-on:not(.dark) .sub-shut{color:color-mix(in srgb, var(--accent-text) 85%, #000)}
/* 🟢 صندوق واتساب الاشتراك — الموضع الوحيد بالمشروع (٢٠ آب).
`.sub-wa.hidden` ضرورية: `.hidden{display:none}` مكتوبة قبله
وبنفس الوزن، فبلاها الصندوق يبين حتى وهو مفروض مخفي. */
.sub-wa{display:flex;flex-direction:column;align-items:center;gap:9px;
margin-top:16px;padding-top:15px;border-top:1px solid var(--line);text-align:center}
/* 🔴 **`>` مو مصادفة** — بلاها القاعدة تمسك `span` اللي جوّه زر
الواتساب هم (`.sub-wa > a > span`)، فيصير نص رمادي على أخضر
وتباينه **٢.٢٢** والحد ٤.٥. انمسكت بـ`فحص-الاشتراك.mjs` ٢٠ آب. */
.sub-wa > span{font-size:12.5px;color:var(--muted);line-height:1.85}
.sub-wa.hidden{display:none}
.sub-form{display:flex;flex-direction:column;gap:12px}
.sub-form.hidden{display:none}
.sub-form .back{align-self:flex-start;background:none;border:none;color:var(--teal);font-size:12.5px;font-weight:800;cursor:pointer;font-family:inherit;padding:2px 0;white-space:nowrap}
/* `›` مثل باقي أزرار الرجوع بالتطبيق — بالعربي السهم يشير لليمين */
.sub-form .back::before{content:'› '}
.sub-form .pick{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--teal-soft);border-radius:var(--radius);padding:12px 14px}
.sub-form .pick b{font-size:13.5px;font-weight:800;color:var(--text)}
.sub-form .pick span{font-size:14px;font-weight:800;color:var(--text);white-space:nowrap}
.sub-form .dest{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:13px 14px;display:flex;flex-direction:column;gap:8px;font-size:12.5px;line-height:1.85;color:var(--muted)}
.sub-form .dest b{color:var(--text);font-size:13px;font-weight:800}
.sub-form .dest .row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sub-form .dest .row i{font-style:normal;color:inherit}
/* `--muted` على `--bg-2` بالنهاري يعطي ٤.٤٥ والحد ٤.٥ — نغمّقه شعرة،
نفس حيلة `.ref-note` و`.msg.err` فوك. الليلي يعدّي أصلاً. */
body.mapp-on:not(.dark) .sub-form .dest{color:color-mix(in srgb, var(--muted) 88%, #000)}
.sub-form .dest .row span{font-weight:800;color:var(--text);direction:ltr;unicode-bidi:plaintext}
.sub-form .fine{font-size:11.5px;color:var(--muted);line-height:1.8}
.sub-form .shot{background:var(--bg);border:1.5px dashed var(--line);border-radius:12px;padding:16px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;font-family:inherit;overflow:hidden}
.sub-form .shot img{width:100%;max-height:200px;object-fit:contain;border-radius:8px;display:block}
.sub-form .go{background:var(--teal);color:var(--teal-ink);border:none;border-radius:var(--radius);padding:13px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit}
.sub-form .go[disabled]{opacity:.45;cursor:not-allowed}
/* ===== شاشة مساعد أشور (خدمة العملاء) =====
تنفيذ تصميم المستخدم `Ashur Support Screens.dc.html`. ألوان التصميم انربطت
بمتغيّرات التطبيق حتى الوضع الليلي يشتغل تلقائياً بلا نسخة ثانية:
primary→--teal · on-primary→--teal-ink · primary-soft→--teal-soft
text2→--muted · border/bubble-border→--line · chip-hover→--teal-soft
الخط IBM Plex Sans Arabic بطلب التصميم (واضح للخطوات الطويلة) — محمّل
بنفس وسم الخطوط الموجود فما أكو طلب شبكة زيادة. */
.sup{
position:fixed;inset:0;z-index:60;display:none;flex-direction:column;
background:var(--bg);color:var(--text);
font-family:'IBM Plex Sans Arabic','Cairo',system-ui,sans-serif;
}
.sup.on{display:flex;animation:fadeIn .22s ease}
/* --- الترويسة --- */
.sup-head{flex:none;display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--surface);border-bottom:1px solid var(--line);padding-top:max(8px,env(safe-area-inset-top))}
.sup-back{width:44px;height:44px;flex:none;display:grid;place-items:center;background:none;border:none;border-radius:14px;color:var(--text);cursor:pointer}
.sup-back:hover{background:var(--teal-soft)}
.sup-back svg{width:22px;height:22px}
.sup-ava{width:40px;height:40px;flex:none;border-radius:14px;background:var(--teal);border:1.5px solid var(--gold);display:grid;place-items:center;color:var(--teal-ink)}
.sup-ava svg{width:23px;height:23px}
.sup-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sup-id-top{display:flex;align-items:center;gap:7px}
.sup-name{font-size:15.5px;font-weight:600;line-height:1.2}
.sup-badge{font-size:10px;font-weight:500;color:var(--gold);border:1px solid var(--gold);border-radius:99px;padding:1px 8px 2px;line-height:1.5}
.sup-sub{font-size:11.5px;color:var(--muted);line-height:1.3}
/* --- القائمة --- */
.sup-list{flex:1;overflow-y:auto;padding:16px 14px 12px;display:flex;flex-direction:column;gap:10px}
/* الترحيب + الأمثلة */
.sup-wel{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:24px 10px 12px}
.sup-wel-ava{width:58px;height:58px;border-radius:20px;background:var(--teal);border:2px solid var(--gold);display:grid;place-items:center;color:var(--teal-ink)}
.sup-wel-ava svg{width:33px;height:33px}
.sup-wel-t{font-size:17px;font-weight:600}
.sup-wel-s{font-size:13.5px;line-height:1.9;color:var(--muted);max-width:280px;text-wrap:pretty}
.sup-exwrap{display:flex;flex-direction:column;gap:8px}
.sup-exlbl{font-size:12px;font-weight:500;color:var(--muted);padding:0 4px}
.sup-ex{min-height:46px;text-align:start;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;color:var(--text);font-family:inherit;font-size:13.5px;cursor:pointer;box-shadow:var(--shadow)}
.sup-ex:hover{border-color:var(--teal);background:var(--teal-soft)}
/* الفقاعات — المستخدم لليسار والمساعد لليمين (RTL) */
.sup-u{align-self:flex-end;max-width:84%;background:var(--teal);color:var(--teal-ink);padding:10px 14px;border-radius:16px 16px 16px 5px;font-size:14px;line-height:1.7;animation:supIn .25s ease;white-space:pre-wrap;word-break:break-word}
.sup-a{align-self:flex-start;max-width:88%;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);padding:12px 14px;border-radius:16px 16px 5px 16px;display:flex;flex-direction:column;gap:10px;animation:supIn .25s ease}
.sup-a-t{font-size:13.5px;line-height:1.85;text-wrap:pretty;white-space:pre-wrap;word-break:break-word}
.sup-steps{display:flex;flex-direction:column;gap:9px}
.sup-step{display:flex;gap:10px;align-items:flex-start}
.sup-step i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--teal-soft);color:var(--teal);font-size:11.5px;font-weight:600;display:grid;place-items:center;margin-top:2px;font-style:normal}
.sup-step span{font-size:13.5px;line-height:1.8;padding-top:1px;text-wrap:pretty}
.sup-fu{font-size:12.5px;line-height:1.8;color:var(--muted);border-top:1px dashed var(--line);padding-top:9px;text-wrap:pretty}
/* «ما عرف الجواب» — التحويل البشري يصير أساسياً */
.sup-esc{display:flex;flex-direction:column;gap:7px;border-top:1px dashed var(--line);padding-top:10px}
.sup-esc button{min-height:46px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--teal);color:var(--teal-ink);border:none;border-radius:13px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}
.sup-esc button:hover{opacity:.92}
.sup-esc button svg{width:17px;height:17px}
.sup-esc small{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.7}
/* «المساعد يكتب» */
.sup-typ{align-self:flex-start;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);padding:15px 18px;border-radius:16px 16px 5px 16px;display:flex;gap:5px;align-items:center;animation:supIn .25s ease}
.sup-typ i{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:supDot 1.2s infinite}
.sup-typ i:nth-child(2){animation-delay:.15s}
.sup-typ i:nth-child(3){animation-delay:.3s}
/* بطاقة الحالة (خلص السقف · انقطع الاتصال) */
.sup-ban{margin:8px 6px 4px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;animation:supIn .25s ease}
.sup-ban-i{width:42px;height:42px;border-radius:50%;background:var(--teal-soft);color:var(--teal);display:grid;place-items:center}
.sup-ban-i svg{width:20px;height:20px}
.sup-ban-t{font-size:14.5px;font-weight:600}
.sup-ban-b{font-size:13px;line-height:1.9;color:var(--muted);max-width:280px;text-wrap:pretty}
.sup-ban button{margin-top:4px;min-height:44px;padding:0 22px;display:inline-flex;align-items:center;gap:8px;background:none;border:1.5px solid var(--teal);color:var(--teal);border-radius:99px;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.sup-ban button:hover{background:var(--teal-soft)}
/* --- التذييل --- */
.sup-foot{flex:none;background:var(--surface);border-top:1px solid var(--line);padding:4px 12px 12px;padding-bottom:max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:2px}
.sup-foot-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sup-human{display:flex;align-items:center;gap:6px;background:none;border:none;color:var(--muted);font-family:inherit;font-size:12px;padding:4px 2px;min-height:40px;cursor:pointer}
.sup-human:hover{color:var(--teal)}
.sup-human svg{width:14px;height:14px}
.sup-rem{font-size:11.5px;color:var(--muted)}
.sup-compose{display:flex;gap:8px;align-items:center}
.sup-compose input{flex:1;min-width:0;height:46px;padding:0 16px;border-radius:23px;border:1px solid var(--line);background:var(--bg);color:var(--text);font-family:inherit;font-size:14px;outline:none}
.sup-compose input:focus{border-color:var(--teal)}
.sup-compose input::placeholder{color:var(--muted);opacity:.8}
.sup-compose button{width:46px;height:46px;flex:none;border-radius:50%;background:var(--teal);color:var(--teal-ink);border:none;display:grid;place-items:center;cursor:pointer}
.sup-compose button:hover{opacity:.9}
.sup-compose button svg{width:20px;height:20px}
.sup :disabled{opacity:.45;cursor:default}
@keyframes supDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes supIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
/* ===== شاشة الأقسام والمنتجات =====
تنفيذ تصميم المستخدم `إدارة الأقسام والمنتجات.dc.html`. ألوان التصميم
انربطت بمتغيّرات التطبيق فالوضع الليلي يشتغل بلا نسخة ثانية:
primary→teal · onprimary→teal-ink · border→line · danger→error · ok→success.
كل الأزرار الملموسة ٤٤px أو أكثر (هدف اللمس بالموبايل). */
.app:has(> #scr-cats.on){padding:0}
#scr-cats{padding:16px 16px calc(20px + env(safe-area-inset-bottom));gap:0}
.cm-view{display:none}
.cm-view.on{display:block;animation:supIn .22s ease}
#cmv-home.on{padding-bottom:96px}
.cm-top{display:flex;align-items:center;gap:10px;padding:2px 0 12px}
.cm-mark{width:36px;height:36px;flex:none;border-radius:11px;background:var(--teal);color:var(--gold);display:flex;align-items:center;justify-content:center}
.cm-mark svg{width:21px;height:21px;display:block}
.cm-ttl{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cm-ttl b{font-size:17px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-ttl span{font-size:11.5px;color:var(--muted);line-height:1.6}
.cm-ttl small{font-size:10px;font-weight:700;color:var(--gold)}
.cm-gbtn{min-height:44px;padding:0 14px;flex:none;border-radius:11px;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-gbtn.sm{min-height:38px;padding:0 12px;font-size:12px;color:var(--muted);background:none}
.cm-gbtn.on{background:var(--teal);border-color:var(--teal);color:var(--teal-ink)}
.cm-dots{width:44px;padding:0;font-size:17px}
.cm-limits{font-size:11.5px;color:var(--muted);margin:6px 2px 16px}
.cm-limits b{color:var(--text)}
.cm-lblrow{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cm-lblrow span{font-size:13px;font-weight:800;color:var(--muted);flex:1}
.cm-grouplbl{font-size:12.5px;font-weight:800;color:var(--muted);margin:0 0 8px}
/* بطاقة قسم */
.cm-c{background:var(--card);border:1px solid var(--line);border-radius:16px;margin-bottom:10px;padding:10px 15px;display:flex;align-items:center;gap:10px;min-height:68px;cursor:pointer;width:100%;text-align:right;font-family:inherit;color:var(--text)}
.cm-c:hover{border-color:var(--teal)}
.cm-c.sub{border-radius:14px;min-height:60px;margin-bottom:8px}
.cm-c.other{border:1.5px dashed var(--gold);background:color-mix(in srgb, var(--gold) 10%, transparent)}
.cm-c .tx{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.cm-c .kind{font-size:10px;font-weight:700;color:var(--gold)}
.cm-c.sub .kind{color:var(--muted)}
.cm-c .nm{font-size:15.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-c .cnt{font-size:12px;color:var(--muted);flex:none}
.cm-c .chev{color:var(--muted);font-size:18px;flex:none}
.cm-mv{width:40px;height:44px;flex:none;border-radius:10px;border:1px solid var(--teal);background:var(--teal-soft);color:var(--teal);font-size:14px;cursor:pointer;font-family:inherit}
.cm-mv:disabled{opacity:.25;cursor:default}
/* صف منتج */
.cm-plist{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:2px 13px}
.cm-p{display:flex;align-items:center;gap:8px;min-height:52px;cursor:pointer;border-radius:10px;width:100%;background:none;border:none;text-align:right;font-family:inherit;color:var(--text);padding:0 4px}
.cm-p:hover{background:var(--teal-soft)}
.cm-p .nm{flex:1;min-width:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-p .pr{font-size:12px;color:var(--muted);flex:none}
.cm-p .chev{color:var(--muted);font-size:15px;flex:none}
.cm-empty{border:1.5px dashed var(--line);border-radius:16px;padding:20px 16px;text-align:center;color:var(--muted);font-size:13px;line-height:1.9}
.cm-note{border:1.5px solid var(--gold);background:color-mix(in srgb, var(--gold) 12%, transparent);border-radius:12px;padding:11px 13px;font-size:12.5px;line-height:1.8;margin-bottom:16px}
.cm-note.mid{display:inline-block;margin:0 auto 4px}
.cm-acts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.cm-acts .lim{min-height:46px;display:flex;align-items:center;font-size:11.5px;color:var(--muted)}
/* أزرار */
.cm-pri{min-height:52px;padding:0 18px;border-radius:14px;border:none;background:var(--teal);color:var(--teal-ink);font-size:15px;font-weight:800;cursor:pointer;font-family:inherit}
.cm-sec{min-height:52px;padding:0 16px;border-radius:14px;border:1.5px solid var(--teal);background:var(--card);color:var(--teal);font-size:14px;font-weight:800;cursor:pointer;font-family:inherit}
.cm-danger{min-height:50px;padding:0 18px;border-radius:13px;border:none;background:var(--error);color:#fff;font-size:14.5px;font-weight:800;cursor:pointer;font-family:inherit}
.cm-del{min-height:52px;padding:0 18px;border-radius:14px;border:1.5px solid var(--error);background:color-mix(in srgb, var(--error) 10%, transparent);color:var(--error);font-size:13.5px;font-weight:800;cursor:pointer;font-family:inherit}
.cm-pri.sm,.cm-sec.sm{min-height:44px;font-size:13px;flex:none}
.cm-pri:disabled,.cm-sec:disabled{opacity:.5;cursor:default}
.cm-acts .cm-pri,.cm-acts .cm-sec{min-height:46px;font-size:13px;border-radius:12px}
.cm-acts .cm-sec{border-style:dashed;background:none}
.cm-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;padding:24px 16px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(to top, var(--bg) 72%, transparent);display:flex;gap:10px;z-index:20}
.cm-bar .cm-pri{flex:1.5}
.cm-bar .cm-sec{flex:1}
.cm-bar2{display:flex;gap:10px;margin-top:16px}
.cm-bar2 .cm-pri{flex:1}
/* استمارة المنتج */
.cm-live{font-size:11px;color:var(--success);background:var(--teal-soft);border-radius:99px;padding:5px 10px;font-weight:800;flex:none}
.cm-dest{border-radius:16px;padding:11px 15px;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.cm-dest.ok{background:var(--card);border:1px solid var(--line)}
.cm-dest.none{border:1.5px solid var(--gold);background:color-mix(in srgb, var(--gold) 12%, transparent)}
.cm-dest .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cm-dest .tx small{font-size:11px;color:var(--muted)}
.cm-dest .tx b{font-size:15px;font-weight:800;color:var(--success);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-dest .tx2{flex:1;font-size:12.5px;line-height:1.7}
.cm-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px;display:flex;flex-direction:column;gap:13px}
.cm-f{display:flex;flex-direction:column;gap:6px}
.cm-f label{font-size:12.5px;font-weight:700;color:var(--muted)}
.cm-f input,.cm-f textarea,#cm-name-in{width:100%;background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:12px 13px;font-size:15px;color:var(--text);outline:none;font-family:inherit}
.cm-f textarea{font-size:14px;resize:vertical}
.cm-f input:focus,.cm-f textarea:focus,#cm-name-in:focus{border-color:var(--teal)}
.cm-two{display:flex;gap:10px}
.cm-two .cm-f{flex:1;min-width:0}
.cm-err{color:var(--error);font-size:12px;font-weight:700;display:none}
.cm-err.on{display:block}
.cm-img{height:110px;width:100%;border:1.5px dashed var(--line);border-radius:12px;background:var(--bg-2);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;padding:0;font-family:inherit}
.cm-img span{font-size:12px;color:var(--muted)}
.cm-img img{width:100%;height:100%;object-fit:cover}
.cm-imgdel{background:none;border:none;color:var(--error);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;align-self:flex-start;padding:2px}
/* شاشة تم الحفظ */
#cmv-saved.on{text-align:center;padding:50px 8px 30px}
.cm-tick{width:74px;height:74px;border-radius:99px;background:var(--teal);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 18px}
.cm-sv-t{font-size:19px;font-weight:800;margin-bottom:8px}
.cm-sv-s{font-size:13.5px;color:var(--muted);margin-bottom:10px}
.cm-sv-s b{color:var(--text)}
.cm-sv-c{font-size:12px;color:var(--muted);margin:14px 0 26px}
.cm-sv-btns{display:flex;flex-direction:column;gap:10px;max-width:320px;margin:0 auto}
/* النافذة السفلية */
.cm-sheet{position:fixed;inset:0;z-index:70;display:none}
.cm-sheet.on{display:block}
.cm-scrim{position:absolute;inset:0;background:rgba(8,18,20,.55);animation:fadeIn .15s ease}
.cm-panel{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:var(--card);border-radius:20px 20px 0 0;padding:12px 18px calc(24px + env(safe-area-inset-bottom));animation:cmUp .22s ease;max-height:82vh;overflow-y:auto}
@keyframes cmUp{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
@media (prefers-reduced-motion: reduce){.cm-panel{animation:none}.cm-view.on{animation:none}}
.cm-handle{width:40px;height:4px;border-radius:99px;background:var(--line);margin:0 auto 16px}
.cm-s{display:none}
.cm-s.on{display:block}
.cm-s-t{font-size:16px;font-weight:800;margin-bottom:4px}
.cm-s-s{font-size:12px;color:var(--muted);margin-bottom:14px;line-height:1.7}
.cm-s-btns{display:flex;gap:10px;margin-top:16px}
.cm-s-btns .cm-pri,.cm-s-btns .cm-danger{flex:1}
.cm-s-btns .cm-sec{min-height:50px;border-color:var(--line);color:var(--muted);font-size:13.5px}
.cm-opts{display:flex;flex-direction:column;gap:8px}
.cm-opt{min-height:52px;text-align:right;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--text);font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:8px}
.cm-opt .g{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-opt .h{font-size:11.5px;color:var(--muted);font-weight:600;flex:none}
.cm-opt.gold{border:1.5px dashed var(--gold);background:color-mix(in srgb, var(--gold) 12%, transparent);font-size:13.5px}
.cm-opt.dash{border:1.5px dashed var(--teal);background:none;color:var(--teal);font-size:13.5px;font-weight:800}
.cm-opt.solid{border:1.5px solid var(--teal);background:var(--teal-soft);font-weight:800}
.cm-opt.danger{border-color:var(--error);background:color-mix(in srgb, var(--error) 9%, transparent);color:var(--error)}
.cm-pick-hd{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.cm-pick-hd span{font-size:13.5px;flex:1;min-width:0}
.cm-pick-hd b{font-weight:800}
#cm-name-err{margin-top:8px}
/* رسالة الحفظ العابرة */
.cm-toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 20px;border-radius:99px;font-size:13px;font-weight:700;z-index:80;display:none;box-shadow:0 8px 24px rgba(0,0,0,.28);white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis}
.cm-toast.on{display:block;animation:supIn .2s ease}
/* ===== المخزون ===== */
/* تنفيذ تصميم المستخدم `المخزون.dc.html` (كلود دزاين). ألوان التصميم
انربطت بمتغيّرات التطبيق — لازوردي→teal · أحمر→err · ذهبي→warn ·
أخضر→ok — فالوضع الليلي يشتغل بلا نسخة ثانية، نفس فكرة شاشة الأقسام. */
/* --- بطاقة لوحة التحكم --- */
/* 🔮 التنبيه الذكي بسطر تحت اسم المنتج (١٢ آب) — «يخلص خلال ٤ أيام».
يحمرّ لمن يقرب (≤٧ أيام) حتى يفرق عن معلومة عادية. */
.stk-fc{font-size:11px;font-weight:600;color:var(--muted);margin-top:2px;line-height:1.7}
.stk-fc.soon{color:var(--warn)}
body.mapp-on:not(.dark) .stk-fc.soon{color:color-mix(in srgb, var(--warn) 62%, #000)}
.stk-card{padding:17px 17px 15px}
.stk-card .t{font-size:15px;font-weight:700;margin-bottom:13px}
.stk-card .nums{display:flex;gap:10px}
.stk-card .n{flex:1;border-radius:14px;padding:11px 13px}
.stk-card .n b{display:block;font-size:29px;font-weight:700;line-height:1.2}
.stk-card .n span{font-size:12px;font-weight:600}
.stk-card .n.out{background:color-mix(in srgb, var(--err) 12%, var(--card))}
.stk-card .n.out b,.stk-card .n.out span{color:var(--err)}
.stk-card .n.low{background:color-mix(in srgb, var(--warn) 16%, var(--card))}
.stk-card .n.low b,.stk-card .n.low span{color:var(--warn)}
.stk-card .none{font-size:12.5px;color:var(--muted);line-height:1.9}
.stk-card .go{
width:100%;height:44px;margin-top:13px;border:0;border-radius:12px;cursor:pointer;
background:var(--teal);color:#fff;font-size:13.5px;font-weight:600;line-height:1;font-family:inherit;
}
body.mapp-on.dark .stk-card .go{color:#1D1930;font-weight:700}
/* --- عدّادات الرأس --- */
.stk-sum{display:flex;align-items:center;gap:6px;margin:-2px 0 2px}
.stk-sum button{
border:0;background:none;padding:6px 0;cursor:pointer;
font-size:13px;font-weight:700;line-height:1;font-family:inherit;
}
.stk-sum button b{font-weight:700}
.stk-sum .out{color:var(--err)}
.stk-sum .low{color:var(--warn)}
.stk-sum .dot{color:var(--muted);font-size:13px}
/* --- تنبيه الخلصان --- */
.stk-alert{
margin:10px 0 0;padding:12px 14px;border-radius:14px;
background:color-mix(in srgb, var(--err) 10%, var(--card));
border:1px solid color-mix(in srgb, var(--err) 28%, transparent);
display:flex;flex-direction:column;gap:9px;align-items:flex-start;
}
.stk-alert .t{font-size:13px;font-weight:600;line-height:1.7;font-family:inherit;color:var(--err)}
/* الخلفية `--err-tx` مو `--err` — الأبيض على `--err` النهاري أعطى ٤.٠٧ */
.stk-alert button{
border:0;cursor:pointer;background:var(--err-tx);color:#fff;
border-radius:99px;padding:9px 18px;font-size:12.5px;font-weight:600;line-height:1;font-family:inherit;
}
body.mapp-on.dark .stk-alert button{color:var(--card);font-weight:700}
/* --- أزرار التصفية --- */
.stk-chips{display:flex;gap:8px;padding:12px 0 2px;overflow-x:auto;scrollbar-width:none}
.stk-chips::-webkit-scrollbar{display:none}
.stk-chips button{
height:36px;padding:0 13px;border-radius:99px;cursor:pointer;flex:none;white-space:nowrap;
font-size:12.5px;font-weight:600;line-height:1;font-family:inherit;
background:var(--card);color:var(--ink);border:1px solid var(--line);
}
.stk-chips button.on{background:var(--teal);color:#fff;border-color:var(--teal)}
body.mapp-on.dark .stk-chips button.on{color:#1D1930}
/* --- البحث --- */
.stk-search{margin-top:10px}
.stk-search input{
width:100%;box-sizing:border-box;height:42px;border-radius:12px;
border:1px solid var(--line);background:var(--card);padding:0 14px;
font-size:13.5px;font-weight:500;line-height:1;color:var(--ink);font-family:inherit;outline:none;
}
.stk-search input:focus{
border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb, var(--teal) 16%, transparent);
}
.stk-hint{padding:7px 2px 8px;font-size:11px;color:var(--muted)}
/* --- القائمة --- */
.stk-list{
background:var(--card);border:1px solid var(--line);
border-radius:16px;overflow:hidden;
}
.stk-row{
display:flex;align-items:center;gap:10px;padding:10px 13px;
border-bottom:1px solid var(--line);
}
.stk-row:last-child{border-bottom:0}
.stk-row.is-out{background:color-mix(in srgb, var(--err) 8%, var(--card))}
.stk-row .ph{
width:40px;height:40px;border-radius:10px;flex:none;
display:flex;align-items:center;justify-content:center;overflow:hidden;
font-size:16px;font-weight:600;
background:color-mix(in srgb, var(--teal) 12%, var(--card));color:var(--teal);
}
.stk-row .ph img{width:100%;height:100%;object-fit:cover;display:block}
.stk-row .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.stk-row .tx .nm{font-size:13px;font-weight:600;line-height:1.5;font-family:inherit;color:var(--ink)}
.stk-row .tx .m{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.stk-row .tx .m span{font-size:11px;color:var(--muted)}
.stk-row .tx .m i{
font-style:normal;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:99px;
}
.stk-row .tx .m i.out{background:color-mix(in srgb, var(--err) 18%, var(--card));color:var(--err)}
.stk-row .tx .m i.low{background:color-mix(in srgb, var(--warn) 20%, var(--card));color:var(--warn)}
/* المُنتقي — LTR عمداً حتى «−» يقعد يسار الرقم و«+» يمين مثل التصميم */
.stk-ct{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none}
.stk-ct .n{display:flex;align-items:center;gap:4px;direction:ltr}
.stk-ct .n button{
width:38px;height:42px;border-radius:10px;cursor:pointer;
border:1px solid var(--line);background:var(--bg);color:var(--teal);
font-size:19px;font-weight:400;line-height:1;font-family:inherit;
}
.stk-ct .n button.off{opacity:.35;cursor:default}
.stk-ct .n input{
width:64px;height:42px;box-sizing:border-box;border-radius:10px;
border:1px solid var(--line);background:var(--card);text-align:center;
font-size:14px;font-weight:600;line-height:1;color:var(--ink);font-family:inherit;direction:ltr;outline:none;
-moz-appearance:textfield;
}
.stk-ct .n input::-webkit-outer-spin-button,
.stk-ct .n input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stk-ct .n input:focus{
border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb, var(--teal) 16%, transparent);
}
.stk-ct .n input::placeholder{color:var(--muted);font-weight:500;font-size:10.5px}
/* `` لمن يكون خبراً و`