/* =====================================================================
   طبقة التصميم: "غامق فخم" (اختيار محمد، 20 أكتوبر 2026)
   تنحمّل بعد style.css / home.css / admin.css وتغيّر الشكل بس، بدون ما تلمس أي كلاس أو معرّف يعتمد عليه الكود.
   للرجوع للشكل القديم: احذف سطر design.css من الصفحة (أو من كل الصفحات).

   الفكرة: أسود حقيقي، والطبقات تتفرق بدرجة الإضاءة بس (بدون حدود ولا ظلال على الأشياء الثابتة).
   اللون للبيانات والفعل: في صفحة المحل الأسعار بلون المحل الثاني (--accent)، والزر الأساسي أبيض.
   في صفحات فيكارو اللون الزعفراني للفعل، والأخضر حقل لون واحد (الحاسبة).

   النطاقات (كل صفحة لها بادئة عشان ما يتداخل الشكل):
   صفحة المحل ......... body:has(> main#menu)
   صفحات style.css ..... body:not(:has(> .nav))   (المحل، التتبع، الدفع، الاشتراك، اللوحات)
   اللوحات ............ body.admin                (لوحة المحل والاستوديو)
   صفحات فيكارو ....... body:has(> .nav)          (الرئيسية، الشروط، الدليل)
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600;700&display=swap");

:root{
  --d-ground:#0a0a0a;   /* الأرضية */
  --d-surface:#151515;  /* البطاقة */
  --d-raised:#1f1f1f;   /* داخل البطاقة */
  --d-track:#2a2a2a;    /* المفاتيح والأزرار الثانوية */
  --d-ink:#f5f5f4;      /* النص */
  --d-muted:#b4b4b4;    /* نص ثانوي */
  --d-faint:#949494;    /* ملاحظات */
  --d-rule:#232323;     /* فواصل الصفوف */
  --d-edge:#3a3a3a;     /* حدود الحقول */
  --d-saffron:#f4b740;  /* زعفران فيكارو */
  --d-green:#2f5d50;    /* هيل فيكارو */
  --d-ok:#4ade80;--d-bad:#f87171;--d-warn:#fcd34d;
  --d-ok-bg:#132a1c;--d-bad-bg:#2c1717;--d-warn-bg:#2a2410;--d-info-bg:#14223a;--d-info:#93c5fd;
  --d-r-card:20px;--d-r-media:14px;--d-r-field:14px;--d-pill:999px;
  --d-ease:cubic-bezier(.2,.8,.2,1);
}
.skip{color:#0a0a0a!important;background:#fff}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:var(--d-ease)}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* =====================================================================
   1) صفحات style.css: الأساس المشترك (المحل، التتبع، الدفع، الاشتراك، اللوحات)
   ===================================================================== */
body:not(:has(> .nav)),
body.theme-classic:not(:has(> .nav)),body.theme-modern:not(:has(> .nav)),body.theme-dark:not(:has(> .nav)){
  --bg:var(--d-ground);--card:var(--d-surface);--ink:var(--d-ink);--muted:var(--d-muted);--line:var(--d-edge);
  --radius:var(--d-r-card);--shadow:none;--r:var(--d-r-field);--r-sm:12px;--r-lg:var(--d-r-card);
  --d-acc:var(--accent);
  color-scheme:dark;background:var(--d-ground);color:var(--d-ink);
  font-family:"Readex Pro","Segoe UI",Tahoma,sans-serif;font-variant-numeric:tabular-nums;
}
/* لون المحل الثاني على الأسود: نفس اللون، بس لو كان غامق يفتح لين إضاءته 0.78 (عشان الأسعار تنقرا دايم) */
@supports (color:oklch(from red l c h)){
  body:not(:has(> .nav)),body.theme-classic:not(:has(> .nav)),body.theme-modern:not(:has(> .nav)),body.theme-dark:not(:has(> .nav)){--d-acc:oklch(from var(--accent) max(l, 0.78) c h)}
}
body:not(:has(> .nav)) a{color:var(--d-ink)}
body:not(:has(> .nav)) :focus-visible:not(.mysr-form *){outline:2px solid #fff;outline-offset:2px}
body:not(:has(> .nav)) .muted{color:var(--d-muted)}
body:not(:has(> .nav)) label:not(.mysr-form *){color:#e7e5e4;font-weight:500;font-size:.95rem}
body:not(:has(> .nav)) legend{color:var(--d-muted);font-size:.9rem}
body:not(:has(> .nav)) input:not(.mysr-form *),body:not(:has(> .nav)) textarea:not(.mysr-form *),body:not(:has(> .nav)) select:not(.mysr-form *){
  border:1px solid var(--d-edge);border-radius:var(--d-r-field);background:var(--d-ground);color:#fff;padding:13px 14px;min-height:48px}
body:not(:has(> .nav)) input[type=checkbox]:not(.mysr-form *),body:not(:has(> .nav)) input[type=radio]:not(.mysr-form *){min-height:0;padding:0;accent-color:#fff}
body:not(:has(> .nav)) input[type=color]:not(.mysr-form *){padding:4px;min-height:44px}
body:not(:has(> .nav)) input:not(.mysr-form *)::placeholder,body:not(:has(> .nav)) textarea:not(.mysr-form *)::placeholder{color:#8a8a8a}
body:not(:has(> .nav)) input:not(.mysr-form *):focus,body:not(:has(> .nav)) textarea:not(.mysr-form *):focus,body:not(:has(> .nav)) select:not(.mysr-form *):focus{outline:1.5px solid #fff;outline-offset:0;border-color:transparent}
/* المفتاح المقسوم (استلام/توصيل، كاش/شبكة، الباقة) */
body:not(:has(> .nav)) .seg{background:var(--d-ground);border-radius:var(--d-pill);padding:4px;gap:4px}
body:not(:has(> .nav)) .seg span{border:0;border-radius:var(--d-pill);padding:10px 8px;color:var(--d-muted);transition:background .2s,color .2s}
body:not(:has(> .nav)) .seg input:checked+span{background:var(--d-track);color:#fff;border:0;font-weight:600}
body:not(:has(> .nav)) .seg input:focus-visible+span{outline:2px solid #fff}
body:not(:has(> .nav)) .seg.one{background:none;padding:0}
body:not(:has(> .nav)) .seg.one span{background:var(--d-ground)}
body:not(:has(> .nav)) .warn,body:not(:has(> .nav)) .closed{background:var(--d-warn-bg);color:var(--d-warn);border:0}
body:not(:has(> .nav)) .btn{border-radius:var(--d-pill);min-height:52px;display:flex;align-items:center;justify-content:center;transition:transform .15s var(--d-ease)}
body:not(:has(> .nav)) .btn.main{background:#fff;color:#0a0a0a!important}
body:not(:has(> .nav)) .btn.wa{background:#25d366;color:#05210f!important}
body:not(:has(> .nav)) .btn:active{transform:scale(.97)}
body:not(:has(> .nav)) .link{color:var(--d-ink)}
body:not(:has(> .nav)) code{background:var(--d-raised);color:#fff}

/* =====================================================================
   2) صفحة المحل (/r/<slug>)
   ===================================================================== */
body:has(> main#menu) .demobar{background:var(--d-raised);color:#e7e5e4;font-weight:400}
body:has(> main#menu) .demobar a{color:#fff}

/* الهيدر: الغلاف كامل والاسم كبير */
body:has(> main#menu) .hero{min-height:320px;background-color:var(--d-ground)}
body:has(> main#menu) .hero.has-cover{min-height:clamp(320px,34vw,420px)}
body:has(> main#menu) .hero.has-cover::before{background:rgba(10,10,10,.52)}
body:has(> main#menu) .hero-in{max-width:1180px;padding:28px 20px 36px}
body:has(> main#menu) .hero h1{font-size:clamp(2.2rem,8vw,3.75rem);font-weight:600;letter-spacing:-.025em;line-height:1.05}
body:has(> main#menu) .hero p{font-size:clamp(1rem,2.2vw,1.15rem);color:#e7e5e4;opacity:1;font-weight:300;margin-top:12px}
body:has(> main#menu) .logo{border:0;border-radius:18px;box-shadow:none;background:var(--d-surface)}
body:has(> main#menu) .chip{background:var(--d-raised);color:var(--d-ok)}
body:has(> main#menu) .chip.off{color:var(--d-bad)}
body:has(> main#menu) .langbtn{background:rgba(10,10,10,.62);border:1px solid #3a3a3a;backdrop-filter:none;inset-inline-end:16px;top:16px}

/* معلومات التوصيل والأقسام */
body:has(> main#menu) .info{max-width:1180px;padding:18px 20px 4px;gap:20px}
body:has(> main#menu) .info span,body:has(> main#menu) .info a{background:none;border:0;padding:0;color:var(--d-muted);font-size:.92rem;border-radius:0}
body:has(> main#menu) .info .i{color:var(--d-acc)}
body:has(> main#menu) .closed{max-width:1140px}
body:has(> main#menu) .cats{background:var(--d-ground);backdrop-filter:none;border-bottom:1px solid var(--d-rule)}
body:has(> main#menu) #tabs{gap:26px;padding:0 20px;max-width:1180px}
body:has(> main#menu) #tabs button{border:0;background:none;border-radius:0;padding:14px 0 12px;color:#9a9a9a;font-weight:500;min-height:48px;box-shadow:inset 0 -2px 0 transparent;transition:color .2s,box-shadow .2s}
body:has(> main#menu) #tabs button[aria-pressed="true"]{background:none;color:#fff;box-shadow:inset 0 -2px 0 #fff}
body:has(> main#menu) #tabs button:hover{color:#fff}
body:has(> main#menu) main{max-width:1180px;padding:20px 20px 32px}
body:has(> main#menu) .last{background:var(--d-surface);border:0;color:#fff;border-radius:var(--d-pill)}

/* الأصناف */
body:has(> main#menu) #items{gap:12px;view-transition-name:menu-items}
body:has(> main#menu) .item{border:0;border-radius:var(--d-r-card);background:var(--d-surface);transition:transform .25s var(--d-ease),background .2s}
body:has(> main#menu) .item-btn{padding:12px;gap:14px;min-height:0;color:var(--d-ink)}
body:has(> main#menu) .item .nm{font-size:1.06rem;font-weight:600;color:#fff}
body:has(> main#menu) .item .ds{color:var(--d-muted);font-size:.9rem;line-height:1.55}
body:has(> main#menu) .item .price{color:var(--d-acc);font-weight:600;font-size:1.02rem}
body:has(> main#menu) .item .pic{width:104px;height:104px;border-radius:var(--d-r-media);background:var(--d-raised)}
body:has(> main#menu) .item .plus{width:36px;height:36px;background:#fff;color:#0a0a0a;box-shadow:none;font-weight:500;font-size:1.35rem;bottom:20px;inset-inline-end:20px}
body:has(> main#menu) .item.noimg .plus{bottom:auto}
body:has(> main#menu) .na{background:var(--d-raised);color:var(--d-bad)}
body:has(> main#menu) .item-btn:not(:disabled):active{background:none}
body:has(> main#menu) .item:has(.item-btn:not(:disabled):active){transform:scale(.98)}
@media (hover:hover){body:has(> main#menu) .item:has(.item-btn:not(:disabled):hover){background:var(--d-raised)}}
body.theme-modern:has(> main#menu) #items{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
body.theme-modern:has(> main#menu) .item-btn{padding:8px}
body.theme-modern:has(> main#menu) .item .pic{width:100%;height:auto;border-radius:var(--d-r-media);aspect-ratio:4/3.4}
body.theme-modern:has(> main#menu) .item .body{padding:10px 6px 8px}
body.theme-modern:has(> main#menu) .item .plus{top:16px;bottom:auto;inset-inline-end:16px}
body.theme-modern:has(> main#menu) .item.noimg .item-btn{padding:8px}

/* نافذة الصنف: تطلع من تحت في الجوال، وفي النص على الشاشات الكبيرة */
body:has(> main#menu) .sheet{border-radius:28px 28px 0 0;background:var(--d-surface);color:var(--d-ink)}
body:has(> main#menu) .sheet-in::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:rgba(255,255,255,.7);z-index:3}
body:has(> main#menu) .sheet[open]{animation:dSheetUp .38s var(--d-ease)}
body:has(> main#menu) .sheet::backdrop{background:rgba(0,0,0,.72)}
body:has(> main#menu) .sheet[open]::backdrop{animation:dFade .3s ease}
body:has(> main#menu) .sheet-img{aspect-ratio:16/11}
body:has(> main#menu) .sheet .x{background:rgba(10,10,10,.72);color:#fff;box-shadow:none}
body:has(> main#menu) .sheet-body{padding:20px 20px 8px}
body:has(> main#menu) .sheet-body h2{font-size:1.55rem;font-weight:600;letter-spacing:-.015em}
body:has(> main#menu) .opts label{border:0;background:var(--d-raised);border-radius:14px;padding:14px 16px;min-height:52px;color:var(--d-ink);transition:box-shadow .15s}
body:has(> main#menu) .opts label:has(input:checked){background:var(--d-track);box-shadow:inset 0 0 0 1.5px #fff}
body:has(> main#menu) .opts em{color:var(--d-muted)}
body:has(> main#menu) .sheet legend{color:#fff}
body:has(> main#menu) .sheet-foot{border-top:1px solid var(--d-rule);background:var(--d-surface);gap:12px}
body:has(> main#menu) .qty{border:0;background:var(--d-raised);padding:4px}
body:has(> main#menu) .qty button{background:var(--d-track);color:#fff}
body:has(> main#menu) .sheet-add{border-radius:var(--d-pill);min-height:56px;padding:12px 22px;background:#fff;color:#0a0a0a}
@keyframes dSheetUp{from{transform:translateY(56px);opacity:.5}to{transform:none;opacity:1}}
@keyframes dFade{from{opacity:0}to{opacity:1}}

/* السلة */
body:has(> main#menu) #cart{background:var(--d-surface);border:0;border-radius:var(--d-r-card);padding:20px}
body:has(> main#menu) #cart h2{font-size:1.35rem;font-weight:600}
body:has(> main#menu) #lines li{border-bottom:1px solid var(--d-rule)}
body:has(> main#menu) #lines small{color:var(--d-muted)}
body:has(> main#menu) #sums .grand{border-top:1px solid var(--d-rule);font-weight:600;font-size:1.2rem}
body:has(> main#menu) #sums .grand dd{color:var(--d-acc)}
body:has(> main#menu) #discRow dd,body:has(> main#menu) .cpbox .ok,body:has(> main#menu) .locbox .ok{color:var(--d-ok)}
body:has(> main#menu) .cpbox .bad,body:has(> main#menu) .locbox .bad,body:has(> main#menu) #err{color:var(--d-bad)}
body:has(> main#menu) #err:empty{min-height:0;margin:0}
body:has(> main#menu) #send{border-radius:var(--d-pill);min-height:56px;background:#fff;color:#0a0a0a;font-weight:600}
body:has(> main#menu) #send,body:has(> main#menu) .sheet-add,body:has(> main#menu) .cartbar{transition:transform .15s var(--d-ease)}
body:has(> main#menu) #send:not(:disabled):active,body:has(> main#menu) .sheet-add:active,body:has(> main#menu) .cartbar:active{transform:scale(.97)}
body:has(> main#menu) .consent,body:has(> main#menu) .consent a{color:var(--d-faint)}
body:has(> main#menu) .cprow button{border-radius:var(--d-pill);border:1px solid var(--d-edge);color:#fff;background:var(--d-raised)}
body:has(> main#menu) .locbox button{border-radius:var(--d-pill);border:1px solid var(--d-edge);color:#fff;background:var(--d-raised)}
body:has(> main#menu) .locbox button.set{background:#fff;color:#0a0a0a;border-color:#fff}
body:has(> main#menu) .tick{background:#16a34a}

/* شريط السلة العائم (الشي الوحيد اللي له ظل لأنه يطفو) */
body:has(> main#menu) .cartbar{background:#fff;color:#0a0a0a;border-radius:var(--d-pill);min-height:60px;padding:10px 12px 10px 22px;box-shadow:0 12px 32px rgba(0,0,0,.6)}
body:has(> main#menu) .cartbar .cnt{background:#0a0a0a;color:#fff;min-width:36px;height:36px;display:grid;place-items:center;font-size:.95rem}

body:has(> main#menu) .foot{color:var(--d-faint)}
body:has(> main#menu) .links a{background:var(--d-surface);border:0;color:#fff}
body:has(> main#menu) .made a{color:var(--d-muted)}
body:has(> main#menu) .stop{background:var(--d-ground)}

/* الكمبيوتر: القائمة يمين والسلة ثابتة يسار */
@media (min-width:1000px){
  body:has(> main#menu) main{display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:32px;align-items:start}
  body:has(> main#menu) main>#loading,body:has(> main#menu) main>.last,body:has(> main#menu) main>#items{grid-column:1}
  body:has(> main#menu) #cart{grid-column:2;grid-row:1 / span 3;margin-top:0;position:sticky;top:72px;max-height:calc(100vh - 88px);overflow:auto}
  body.theme-modern:has(> main#menu) #items{grid-template-columns:repeat(3,1fr)}
  body:not(.theme-modern):has(> main#menu) #items{grid-template-columns:1fr 1fr}
  body:has(> main#menu) .cartbar{display:none}
  body:has(> main#menu) .foot{max-width:1180px}
}
@media (min-width:640px){
  body:has(> main#menu) .sheet{border-radius:28px;margin:auto}
  body:has(> main#menu) .sheet[open]{animation:dPop .3s var(--d-ease)}
  body:has(> main#menu) .sheet-in::before{display:none}
}
@keyframes dPop{from{transform:translateY(24px) scale(.98);opacity:0}to{transform:none;opacity:1}}
/* تبديل القسم بـ View Transitions (util.js vt) */
::view-transition-old(menu-items){animation:.18s ease both dOut}
::view-transition-new(menu-items){animation:.28s var(--d-ease) both dIn}
@keyframes dOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes dIn{from{opacity:0;transform:translateY(10px)}}

/* =====================================================================
   3) التتبع والدفع والاشتراك
   ===================================================================== */
body:has(> main.track) .tcard,body:has(> main.payw) .pcard{background:var(--d-surface);border:0;border-radius:var(--d-r-card);padding:20px;box-shadow:none}
body:has(> main.track) .tcard h1,body:has(> main.payw) .pcard h1{color:#fff;font-weight:600;letter-spacing:-.01em}
body:has(> main.track) .steps li::before{border-color:var(--d-track);background:var(--d-surface)}
body:has(> main.track) .steps li:not(:last-child)::after{background:var(--d-track)}
body:has(> main.track) .steps li.done::before{background:#fff;border-color:#fff}
body:has(> main.track) .steps li.done::after{background:#fff}
body:has(> main.track) .steps li.now::before{border-color:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.18)}
body:has(> main.track) .cancel{background:var(--d-bad-bg);color:var(--d-bad)}
body:has(> main.track) .paymsg{background:var(--d-info-bg);color:var(--d-info)}
body:has(> main.track) .paymsg.ok{background:var(--d-ok-bg);color:var(--d-ok)}
body:has(> main.track) .paymsg.bad{background:var(--d-bad-bg);color:var(--d-bad)}
body:has(> main.track) .big{color:var(--d-acc)}
body:has(> main.payw) .pcard h1{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.1rem);letter-spacing:-.02em;margin-bottom:8px}
body:has(> main.payw) .brand{color:#fff;font-weight:600}
body:has(> main.payw) .brand .mark{background:var(--d-green);color:var(--d-saffron);border-radius:10px 10px 10px 3px}
body:has(> main.payw) .pcard h2{color:#fff}
body:has(> main.payw) #go,body:has(> main.payw) #cancel{border-radius:var(--d-pill);background:#fff;color:#0a0a0a}
body:has(> main.payw) #cancel.danger{background:var(--d-bad-bg)!important;color:var(--d-bad)}
body:has(> main.payw) .seg span small{color:inherit;opacity:.8}
body:has(> main.payw) .lnk{background:var(--d-raised)}
body:has(> main.payw) .ok{color:var(--d-ok)}
body:has(> main.payw) .bad{color:var(--d-bad)}
/* نموذج ميسّر يبقى على خلفية فاتحة عشان شكله ووضوحه ما يتغير */
body:has(> main.payw) .mysr-form{--card:#fff;--ink:#111;--line:#e5e5e5;--muted:#555;color-scheme:light;background:#fff;color:#111;border-radius:16px;padding:16px;margin-top:8px}

/* =====================================================================
   4) لوحة المحل والاستوديو (شاشات شغل: هادية، اللون للحالة والبيانات)
   (داخل @supports عشان المتصفح اللي ما يدعم :has يشوف اللوحة القديمة كاملة، مو نصفها)
   ===================================================================== */
@supports selector(:has(*)){
body.admin .ahead{background:var(--d-ground);color:#fff;padding:16px max(16px,calc((100% - 1100px)/2));border-bottom:1px solid var(--d-rule);align-items:center}
body.admin .ahead h1{color:#fff;font-size:1.25rem;font-weight:600}
body.admin .ahead p{color:var(--d-faint);opacity:1}
body.admin .hbtn{border:0;background:var(--d-surface);color:#fff;border-radius:var(--d-pill);padding:6px 16px;min-height:40px}
body.admin .hbtn:hover{background:var(--d-raised)}
body.admin main{max-width:1100px;margin:0 auto;padding:16px}
body.admin .box{background:var(--d-surface);border:0;border-radius:var(--d-r-card);padding:20px;box-shadow:none}
body.admin .box h2{font-size:1.1rem;font-weight:600;color:#fff}
body.admin .err{color:var(--d-bad)}
body.admin .ok{color:var(--d-ok)}
body.admin .closedTxt{color:var(--d-bad)}
body.admin button.primary,body.admin a.btnlink{background:#fff;color:#0a0a0a;border-radius:var(--d-pill);font-weight:600;padding:10px 22px;min-height:44px}
body.admin button.ghost{background:var(--d-raised);color:#fff;border:0;border-radius:var(--d-pill);padding:8px 18px}
body.admin button.ghost:hover{background:var(--d-track)}
body.admin button.danger{background:transparent;color:var(--d-bad);border:1px solid #5b2626;border-radius:var(--d-pill)}
body.admin .ghostlink{color:#fff;font-weight:600}
body.admin .linkish{color:var(--d-muted)}
body.admin .warn{background:var(--d-warn-bg);color:var(--d-warn)}
/* التبويبات: خط أبيض تحت المختار */
body.admin .ptabs{background:var(--d-ground);gap:24px;padding:0;margin:6px 0 16px;border-bottom:1px solid var(--d-rule)}
body.admin .ptabs button{border:0;background:none;border-radius:0;color:#9a9a9a;font-weight:500;padding:12px 0;min-height:48px;box-shadow:inset 0 -2px 0 transparent;transition:color .2s,box-shadow .2s}
body.admin .ptabs button[aria-pressed="true"]{background:none;color:#fff;box-shadow:inset 0 -2px 0 #fff}
body.admin .badge{background:#dc3532;color:#fff;font-weight:600}
/* الفلاتر */
body.admin .chips button{border:0;background:var(--d-surface);color:var(--d-muted);font-weight:500;padding:7px 16px;min-height:40px}
body.admin .chips button[aria-pressed="true"]{background:#fff;color:#0a0a0a}
body.admin .bar.box{padding:14px 20px}
body.admin .switch{color:#fff}
/* بطاقة الطلب: الحالة بشارة لونها هادي بدل الخط الملوّن */
body.admin .order{background:var(--d-surface);border:0;border-radius:var(--d-r-card);padding:16px 18px;box-shadow:none}
body.admin .order.s-new{background:#1d1515}
body.admin .order.s-done,body.admin .order.s-cancelled{opacity:.7}
body.admin .ohead strong{font-size:1.15rem;color:#fff}
body.admin .st{background:var(--d-raised);color:var(--d-muted);font-weight:600}
body.admin .order.s-new .st{background:var(--d-bad-bg);color:#fca5a5}
body.admin .order.s-preparing .st{background:var(--d-warn-bg);color:var(--d-warn)}
body.admin .order.s-ready .st{background:var(--d-info-bg);color:var(--d-info)}
body.admin .order.s-done .st{background:var(--d-ok-bg);color:var(--d-ok)}
body.admin .order.s-awaiting_payment .st{background:var(--d-info-bg);color:var(--d-info)}
body.admin .order ul{color:#e7e5e4}
body.admin .oact a,body.admin .oact .plain{border:0;background:var(--d-raised);color:#fff;border-radius:var(--d-pill);padding:6px 14px;gap:6px}
body.admin .oact a:hover,body.admin .oact .plain:hover{background:var(--d-track)}
body.admin .maplink{color:#fff}
body.admin .empty{color:var(--d-faint)}
/* القائمة */
body.admin .mitem{background:var(--d-surface);border:0;border-radius:var(--d-r-card);padding:16px}
body.admin .mitem.off{background:#111;opacity:.75}
body.admin .mcat h2{color:#fff;font-weight:600}
body.admin .prev{background:var(--d-raised);border:0}
body.admin .cpitem{border:0;background:var(--d-raised);border-radius:16px}
body.admin .install{border:1px dashed var(--d-edge)}
body.admin .plist button{background:var(--d-surface);border:0;color:#fff;border-radius:16px}
body.admin .plist button:hover{background:var(--d-raised)}
/* شريط الحفظ يطفو تحت */
body.admin .savebar{background:var(--d-raised);border-top:0;box-shadow:0 -10px 30px rgba(0,0,0,.6);padding:12px max(16px,calc((100% - 1100px)/2))}
body.admin .helplink a{color:var(--d-muted)}
/* التقارير: الرقم بالأبيض، والبيانات بلون المحل الثاني */
body.admin .kpis{gap:1px;background:var(--d-rule);border-radius:var(--d-r-card);overflow:hidden}
body.admin .kpi{background:var(--d-surface);border:0;border-radius:0;padding:16px 18px}
body.admin .kpi b{color:#fff;font-size:1.5rem;font-weight:600}
body.admin .kpi span{color:var(--d-muted)}
body.admin .barrow .track{background:var(--d-raised);height:8px}
body.admin .barrow .fill{background:var(--d-acc)}
/* الاستوديو */
body.admin .rcard{background:var(--d-surface);border:0;border-radius:var(--d-r-card);padding:16px 18px}
body.admin .rcard.susp{background:#1d1515}
body.admin .rcard h3{color:#fff;font-weight:600}
body.admin .tag{background:var(--d-raised);color:var(--d-muted)}
body.admin .tag.red{background:var(--d-bad-bg);color:#fca5a5}
body.admin .tag.amber{background:var(--d-warn-bg);color:var(--d-warn)}
body.admin .tag.green{background:var(--d-ok-bg);color:var(--d-ok)}
body.admin details.box summary{color:#fff}
body.admin hr{border-top-color:var(--d-rule)}
body.admin #handoff pre{background:var(--d-raised);border:0;color:#fff}
body.admin .oact select{background:var(--d-raised);border:0}
/* الكمبيوتر: الطلبات والأصناف عمودين */
@media (min-width:1000px){
  body.admin #olist,body.admin #rlist,body.admin #llist{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  body.admin #olist .order,body.admin #rlist .rcard{margin:0}
  body.admin #olist>.empty,body.admin #rlist>p,body.admin #llist>p{grid-column:1/-1}
  body.admin .kpis{grid-template-columns:repeat(4,1fr)}
}
}

/* =====================================================================
   5) صفحات فيكارو: الرئيسية والشروط والدليل
   ===================================================================== */
body:has(> .nav){
  --white:var(--d-ground);--qahwa:var(--d-ink);--muted:var(--d-muted);--line:var(--d-rule);--mint:var(--d-surface);
  background:var(--d-ground);color:var(--d-ink);font-weight:300;color-scheme:dark;
}
body:has(> .nav) h1,body:has(> .nav) h2{font-family:"Readex Pro",sans-serif;font-weight:600;letter-spacing:-.025em}
body:has(> .nav) a{color:var(--d-ink)}
body:has(> .nav) :focus-visible{outline:2px solid #fff;outline-offset:3px}
body:has(> .nav) .muted{color:var(--d-muted)}
/* الأزرار: كبسولة، الزعفران للفعل الأساسي */
body:has(> .nav) .btn{border:0;transition:transform .15s var(--d-ease),background .2s}
body:has(> .nav) .btn:active{transform:scale(.97)}
body:has(> .nav) .btn.main,body:has(> .nav) .btn.wa{background:var(--d-saffron);color:#0a0a0a}
body:has(> .nav) .btn.main:hover,body:has(> .nav) .btn.wa:hover{background:#ffc95c}
body:has(> .nav) .btn.ghost{background:var(--d-surface);color:#fff;border:0}
body:has(> .nav) .btn.ghost:hover{background:var(--d-raised)}
/* الشريط العلوي */
body:has(> .nav) .nav{background:var(--d-ground);backdrop-filter:none;border-bottom:0}
body:has(> .nav) .brand{color:#fff}
body:has(> .nav) .mark{background:var(--d-green);color:var(--d-saffron)}
body:has(> .nav) .nav nav a{color:var(--d-muted);font-weight:400}
body:has(> .nav) .nav nav a:hover{color:#fff}

/* ===== الرئيسية: نظام واحد مرتب =====
   كل الأقسام على حاوية وحدة 1120px (نفس الحافة اليمين من أول الصفحة لآخرها)،
   وكل قسم: عنوان بحجم واحد، سطر شرح تحته، وبعده المحتوى. والمسافة بين الأقسام وحدة. */
body:has(> .nav){--hc:1120px;--hpad:max(20px,calc((100% - var(--hc)) / 2));--hgap:96px}
@media (max-width:760px){body:has(> .nav){--hgap:64px}}
body:has(> .nav) .nav{padding-inline:var(--hpad)}
body:has(> .nav) main>section{max-width:none;margin:0;padding:var(--hgap) var(--hpad) 0}
body:has(> .nav) main>section:last-child{padding-bottom:var(--hgap)}
body:has(> .nav) main>section>h2,body:has(> .nav) .calc h2{font-size:clamp(1.5rem,1rem + 1.4vw,2.25rem);line-height:1.25;color:#fff;max-width:none}
body:has(> .nav) main>section>h2+.muted,body:has(> .nav) .calc h2+.muted{margin-top:10px;font-size:1.05rem}
body:has(> .nav) .lead,body:has(> .nav) .f p,body:has(> .nav) .steps p,body:has(> .nav) .faq details p{font-size:1rem;line-height:1.75}

/* الواجهة: النص يمين والجوال الحي يسار، بالنص عمودياً */
body:has(> .nav) .hero{max-width:none;margin:0;padding:64px var(--hpad) 0;grid-template-columns:minmax(0,1fr) 320px;gap:64px;align-items:center}
body:has(> .nav) .hero h1{font-size:clamp(1.75rem,1rem + 2.4vw,3.25rem);color:#fff;line-height:1.15}
body:has(> .nav) .lead{color:#d6d3d1;font-size:1.1rem;margin-top:20px}
body:has(> .nav) .cta{margin-top:32px}
body:has(> .nav) .facts{color:var(--d-muted);margin-top:28px;font-size:.95rem;gap:8px 24px}
body:has(> .nav) .facts li::before{color:var(--d-saffron)}
body:has(> .nav) .switch{background:var(--d-surface)}
body:has(> .nav) .switch button{color:var(--d-muted)}
body:has(> .nav) .switch button[aria-selected="true"]{background:#fff;color:#0a0a0a}
body:has(> .nav) .phone{background:#1c1c1c;box-shadow:none;outline:1px solid #2a2a2a}
body:has(> .nav) .phone::before{background:#1c1c1c}
body:has(> .nav) .screen{background:var(--d-ground)}
body:has(> .nav) .demo figcaption{color:var(--d-muted);font-size:.9rem}
body:has(> .nav) .demo figcaption a{color:#fff}
@media (max-width:900px){body:has(> .nav) .hero{grid-template-columns:1fr;gap:48px;padding-top:40px}}

/* شبكة الثلاث أعمدة: المميزات والخطوات والباقات كلها نفس الأعمدة */
body:has(> .nav) .flist,body:has(> .nav) .steps ol,body:has(> .nav) .plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px;margin:40px 0 0}
@media (max-width:900px){body:has(> .nav) .flist,body:has(> .nav) .steps ol,body:has(> .nav) .plans{grid-template-columns:1fr;gap:28px}}

/* المميزات: الأيقونة جنب العنوان، والشرح تحتهم */
body:has(> .nav) .flist{border-top:0}
body:has(> .nav) .f,body:has(> .nav) .f:not(:nth-child(3n)),body:has(> .nav) .f:not(:nth-child(3n+1)){border:0!important;padding:0!important;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
body:has(> .nav) .f p{grid-column:1/-1;color:var(--d-muted);margin-top:8px}
body:has(> .nav) .ic{background:none;width:auto;height:auto;color:var(--d-saffron);margin:0}
body:has(> .nav) .ic .i{width:24px;height:24px;stroke-width:1.7}
body:has(> .nav) .f h3,body:has(> .nav) .steps h3{color:#fff;font-size:1.125rem;font-weight:600}

/* الحاسبة: لوحة خضراء داخل نفس الحاوية */
body:has(> .nav) main>section.calc{background:none;color:#fff}
body:has(> .nav) .calc-in{max-width:none;background:var(--d-green);border-radius:28px;padding:48px}
body:has(> .nav) .calc .muted{color:#d5e6de}
body:has(> .nav) .inputs{margin-top:32px;gap:16px}
body:has(> .nav) .inputs label{color:#e3eee9}
body:has(> .nav) .inputs input{background:#173229;color:#fff;border-radius:16px;font-variant-numeric:tabular-nums}
body:has(> .nav) .inputs input:focus{outline:2px solid var(--d-saffron)}
body:has(> .nav) .result{margin-top:40px;font-size:1.05rem}
body:has(> .nav) .result strong{font-family:"Readex Pro",sans-serif;font-weight:600;font-size:clamp(2.25rem,1.5rem + 3vw,3.5rem);letter-spacing:-.03em;color:var(--d-saffron);font-variant-numeric:tabular-nums}
body:has(> .nav) .note{color:#d5e6de;margin-top:12px}
@media (max-width:760px){body:has(> .nav) .calc-in{padding:28px 20px;border-radius:24px}}

/* الخطوات: رقم صغير في دائرة فوق العنوان */
body:has(> .nav) .steps li{padding-top:0}
body:has(> .nav) .steps li::before{position:static;display:grid;place-items:center;width:36px;height:36px;margin-bottom:14px;border-radius:50%;background:var(--d-surface);font-family:"Readex Pro",sans-serif;font-weight:600;font-size:1rem;color:var(--d-saffron)}
body:has(> .nav) .steps p{color:var(--d-muted);margin-top:6px}

/* الباقات: ثلاث بطاقات بنفس الطول، اسم الباقة وسعرها بسطر */
body:has(> .nav) main>section.pricing{background:none}
body:has(> .nav) .plans{align-items:stretch;margin-bottom:24px}
body:has(> .nav) .plan{background:var(--d-surface);border:0;border-radius:24px;padding:28px 24px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto 1fr auto auto;align-content:start;gap:16px 12px}
body:has(> .nav) .plan.best{border:0;transform:none;background:#1c1c1c;outline:1.5px solid var(--d-saffron);outline-offset:-1.5px}
body:has(> .nav) .plan>*{grid-column:1/-1}
body:has(> .nav) .plan h3{grid-column:1;align-self:center;font-size:1.25rem;font-weight:600;color:#fff}
body:has(> .nav) .plan .amount{grid-column:2;color:var(--d-muted);text-align:end;font-size:.9rem;line-height:1.3}
body:has(> .nav) .amount b{font-family:"Readex Pro",sans-serif;font-weight:600;font-size:2rem;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
body:has(> .nav) .plan .tag{background:var(--d-saffron);color:#0a0a0a;justify-self:start}
body:has(> .nav) .plan:not(.best)::before{content:"";grid-column:1/-1;height:26px} /* مكان شارة "الأنسب" عشان البطاقات الثلاث تبدأ من نفس السطر */
body:has(> .nav) .plan ul{color:#e7e5e4;font-size:.98rem}
body:has(> .nav) .plan li::before{color:var(--d-saffron)}
body:has(> .nav) .plan .btn{align-self:end;margin-top:8px}
body:has(> .nav) .plan .btn.ghost{background:var(--d-track)}
body:has(> .nav) .plan .btn.ghost:hover{background:#353535}
body:has(> .nav) .plan .alt{color:var(--d-muted);font-size:.95rem;margin-top:-4px}
@media (max-width:900px){body:has(> .nav) .plan:not(.best)::before{display:none}}

/* الأسئلة: العنوان يمين والأسئلة جنبه */
body:has(> .nav) main>section.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px 48px;align-items:start}
body:has(> .nav) .faq h2{grid-column:1;grid-row:1 / span 6}
body:has(> .nav) .faq details,body:has(> .nav) .faq details:first-of-type{grid-column:2;max-width:none;border:0;background:var(--d-surface);border-radius:18px;padding:2px 22px;margin:0}
body:has(> .nav) .faq summary{color:#fff;padding:18px 0}
body:has(> .nav) .faq summary::after{color:var(--d-saffron)}
body:has(> .nav) .faq details p{color:var(--d-muted)}
body:has(> .nav) .faq details[open]{background:var(--d-raised)}
@media (max-width:900px){body:has(> .nav) main>section.faq{grid-template-columns:1fr}body:has(> .nav) .faq h2,body:has(> .nav) .faq details,body:has(> .nav) .faq details:first-of-type{grid-column:1;grid-row:auto}body:has(> .nav) .faq h2{margin-bottom:12px}}

/* التواصل: لوحة بنفس عرض الحاوية والنص على اليمين مثل باقي الأقسام */
body:has(> .nav) main>section.contact{background:none;text-align:start}
body:has(> .nav) .contact>*{max-width:none}
body:has(> .nav) .contact{display:grid;justify-items:start}
body:has(> .nav) .contact h2{margin:0}
body:has(> .nav) .contact p{color:var(--d-muted);margin:12px 0 28px}
body:has(> .nav) .contact .btn.main{background:var(--d-saffron);color:#0a0a0a}
body:has(> .nav) .contact .contact-info{margin:28px 0 0}
body:has(> .nav) .contact .contact-info a{color:#fff}
body:has(> .nav) .foot{color:var(--d-faint);padding:40px var(--hpad);text-align:start;background:var(--d-surface)}
body:has(> .nav) .foot a{color:var(--d-muted)}

/* الشروط والدليل */
body:has(> .nav) .doc p,body:has(> .nav) .doc li{color:#d6d3d1}
body:has(> .nav) .doc h1{color:#fff}
body:has(> .nav) .doc h2{color:#fff;letter-spacing:-.01em}
body:has(> .nav) .doc .upd,body:has(> .nav) .doc .lead{color:var(--d-muted)}
body:has(> .nav) .doc section{border-top:0;background:var(--d-surface);border-radius:var(--d-r-card);padding:4px 20px 18px;margin-top:14px}
body:has(> .nav) .toc a{background:var(--d-surface);color:#fff}
body:has(> .nav) .toc a:hover{background:var(--d-raised)}
body:has(> .nav) .tip{background:var(--d-raised);border-inline-start-color:var(--d-saffron);color:#e7e5e4}

/* دخول الأقسام وهي تطلع بالتمرير (home.js يحط rv و is-in، وبدونه كل شي ظاهر) */
@media (prefers-reduced-motion:no-preference){
  html.js-rv body:has(> .nav) .rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--d-ease),transform .9s var(--d-ease);transition-delay:calc(var(--rv-i,0) * 70ms)}
  html.js-rv body:has(> .nav) .rv.is-in{opacity:1;transform:none}
}
/* أول ما تفتح الصفحة: العنوان ثم الجملة ثم الأزرار */
@media (prefers-reduced-motion:no-preference){
  body:has(> .nav) .hero-text>*{animation:dIn .6s var(--d-ease) both}
  body:has(> .nav) .hero-text>:nth-child(2){animation-delay:.08s}
  body:has(> .nav) .hero-text>:nth-child(3){animation-delay:.16s}
  body:has(> .nav) .hero-text>:nth-child(4){animation-delay:.24s}
  body:has(> .nav) .demo{animation:dIn .7s .2s var(--d-ease) both}
}

/* تقليل الحركة: كل شي يظهر مباشرة */
@media (prefers-reduced-motion:reduce){
  body:has(> main#menu) .sheet[open],body:has(> main#menu) .sheet[open]::backdrop{animation:none}
  body:has(> main#menu) .item{transition:none}
}

body:has(> main.payw) .brand{margin-bottom:28px}
/* الشروط والدليل: العنوان والفقرات تدخل أول ما تفتح الصفحة */
@media (prefers-reduced-motion:no-preference){
  body:has(> .nav) .doc>*{animation:dIn .55s var(--d-ease) both}
  body:has(> .nav) .doc>:nth-child(2){animation-delay:.06s}
  body:has(> .nav) .doc>:nth-child(3){animation-delay:.12s}
  body:has(> .nav) .doc>:nth-child(n+4){animation-delay:.18s}
  body:has(> main.payw) .pcard,body:has(> main.track) .tcard{animation:dIn .5s var(--d-ease) both}
}
/* الشروط والدليل: الشريط العلوي بنفس عرض النص عشان الهوامش تتساوى */
body:has(> .nav):has(> main.doc) .nav{padding-inline:max(16px,calc((100% - 760px)/2))}
body:has(> main.payw) .brand{font-size:1.3rem}
body:has(> main.payw) .brand .mark{width:36px;height:36px}
body:has(> .nav) .pricing>.muted.center{text-align:start}
/* التواصل على الكمبيوتر: الدعوة يمين وأرقام التواصل يسار، عشان النص ما يتكدس بجهة وحدة */
@media (min-width:901px){
  body:has(> .nav) .contact{grid-template-columns:minmax(0,1fr) auto;column-gap:48px}
  body:has(> .nav) .contact>*{grid-column:1}
  body:has(> .nav) .contact .contact-info{grid-column:2;grid-row:1 / span 3;align-self:end;margin:0;background:var(--d-surface);border-radius:20px;padding:20px 24px;line-height:2}
}