/* منصة المنيو — نظام التصميم للوحات (عميل + سوبر أدمن + الدخول) */
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@400;500;600;700;800&display=swap');
:root{
  --bg:#F8F3EE;--card:#fff;--ink:#1A0F0B;--muted:#77615A;--line:#EFE1D3;--soft:#FBF6F1;
  --red:#E8401C;--red-d:#C4300F;--ember:linear-gradient(135deg,#FF8A1F,#E2361B);--yellow:#FFB72B;--brown:#6F4325;--side:#140C09;--side-ink:#EFE3D8;
  --ok-bg:#DFF3E6;--ok:#137A3A;--warn-bg:#FFF1C9;--warn:#6B4A00;--bad-bg:#FDE3DA;--bad:#9E2F12;--info-bg:#E3ECF8;--info:#1F5A8A;--gray-bg:#EEE9E4;--gray:#6B5E57;
  --r:16px;--r-sm:12px;
}
.admin{--bg:#F4F1EE;--ink:#1E1512;--muted:#8A7A72;--line:#EDE3DC;--soft:#FAF7F4;--side:#160E0B;--side-ink:#EDE3DC}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{font-family:Alexandria,system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--red-d)}
a:hover{color:var(--red)}
h1,h2,h3{margin:0;font-weight:800;line-height:1.3}
h1{font-size:26px}h2{font-size:20px}h3{font-size:16px}
p{margin:0}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

/* layout */
.shell{display:flex;min-height:100vh}
.side{width:248px;flex:none;background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;gap:4px;padding:20px 14px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side .brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
.side .brand img,.side .brand .logo{width:40px;height:40px;border-radius:12px;background:#fff;object-fit:cover;flex:none}
.side .brand .logo{background:var(--ember);display:flex;align-items:center;justify-content:center;color:#fff}
.side .brand b{display:block;font-size:15px}
.side .brand small{display:block;font-size:11px;opacity:.7}
.nav-link{display:flex;align-items:center;gap:12px;padding:11px 12px;min-height:44px;border-radius:12px;font-size:14px;font-weight:600;color:var(--side-ink);text-decoration:none}
.nav-link:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-link.on{background:var(--ember);color:#fff;box-shadow:0 10px 22px -12px rgba(226,54,27,.8)}
.nav-link.on svg{stroke:#fff}
.nav-g{font-size:11px;font-weight:700;letter-spacing:.3px;color:rgba(239,227,216,.45);padding:14px 12px 4px}
.nav-link svg{width:19px;height:19px;flex:none}
.nav-link .count{margin-inline-start:auto;background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}
.nav-link.on .count{background:#fff;color:var(--red-d)}
.main{flex:1;min-width:0;padding:22px 28px 48px;display:flex;flex-direction:column;gap:18px}
.topbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.topbar .hello{font-size:13px;color:var(--muted)}
.bnav{display:none;position:fixed;bottom:0;right:0;left:0;z-index:30;background:#fff;border-top:1px solid var(--line);padding:6px 6px calc(10px + env(safe-area-inset-bottom));justify-content:space-around}
.bnav a{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:58px;min-height:52px;font-size:11px;font-weight:700;color:var(--muted);text-decoration:none}
.bnav a.on{color:var(--red)}
.bnav svg{width:22px;height:22px}
.tabs-m{display:none;gap:6px;overflow-x:auto;padding-bottom:4px}
.imp-bar{background:var(--ink);color:#fff;padding:10px 16px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;font-size:14px}
.imp-bar form{display:inline}
@media (max-width:860px){
  .side{display:none}
  .bnav{display:flex}
  .tabs-m{display:flex}
  .main{padding:14px 14px 100px}
  .hide-m{display:none!important}
}

/* components */
.card{background:var(--card);border-radius:var(--r);padding:18px;box-shadow:0 1px 0 rgba(26,15,11,.04),0 12px 30px -26px rgba(26,15,11,.45)}
.card.flush{padding:0;overflow:hidden}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(var(--min,220px),1fr))}
.row{display:flex;flex-wrap:wrap;gap:16px}
.row>.grow{flex:999 1 420px;min-width:0}
.row>.side-col{flex:1 1 280px}
.stack{display:flex;flex-direction:column;gap:10px}
.kpi{background:#fff;border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:4px}
.kpi span{font-size:13px;color:var(--muted)}
.kpi b{font-weight:800;font-size:28px;line-height:1.2}
.kpi small{font-size:12px;font-weight:600;color:var(--muted)}
.kpi small.up{color:var(--ok)}.kpi small.down{color:var(--bad)}
.muted{color:var(--muted)}
.small{font-size:13px}
.ltr{direction:ltr;text-align:right;unicode-bidi:plaintext}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;font:inherit;font-weight:700;font-size:14px;cursor:pointer;min-height:44px;padding:10px 16px;border-radius:12px;text-decoration:none;background:var(--soft);color:var(--ink);white-space:nowrap}
.btn:hover{filter:brightness(.97);color:var(--ink)}
.btn-primary{background:var(--ember);color:#fff;box-shadow:0 10px 22px -12px rgba(226,54,27,.75)}.btn-primary:hover{color:#fff;filter:brightness(1.05)}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{color:#fff}
.btn-ok{background:var(--ok);color:#fff}.btn-ok:hover{color:#fff}
.btn-bad{background:var(--bad-bg);color:var(--bad)}.btn-bad:hover{color:var(--bad)}
.btn-white{background:#fff}
.btn-sm{min-height:36px;padding:7px 12px;font-size:13px;border-radius:10px}
.btn-block{width:100%}
.btn-link{background:none;padding:0;min-height:auto;color:var(--red-d)}

.badge{display:inline-block;font-size:12px;font-weight:700;padding:4px 10px;border-radius:8px;white-space:nowrap}
.b-ok{background:var(--ok-bg);color:var(--ok)}.b-warn{background:var(--warn-bg);color:var(--warn)}.b-bad{background:var(--bad-bg);color:var(--bad)}.b-info{background:var(--info-bg);color:var(--info)}.b-gray{background:var(--gray-bg);color:var(--gray)}

.pills{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.pill{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:10px 16px;border-radius:999px;font-weight:700;font-size:13px;background:#fff;color:var(--ink);text-decoration:none;border:0;cursor:pointer;font-family:inherit}
.pill.on{background:var(--ink);color:#fff}
.pill .n{opacity:.6}

.field{display:flex;flex-direction:column;gap:6px}
.field label,.label{font-size:13px;font-weight:700}
.input,select.input,textarea.input{width:100%;min-width:0;font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:11px 14px;min-height:46px}
textarea.input{min-height:100px;resize:vertical}
.input:focus{border-color:var(--yellow);outline:0}
.input-group{direction:ltr;display:flex;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:12px;overflow:hidden}
.input-group .addon{padding:0 12px;color:var(--muted);font-size:14px;white-space:nowrap}
.input-group .input{border:0;border-radius:0}
.hint{font-size:12px;color:var(--muted)}
.err{font-size:13px;color:var(--bad);font-weight:600}
.check{display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;border-radius:10px;background:var(--soft);font-size:13px;font-weight:600;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--red)}
.check:has(input:checked){background:#FFF1EB}

.alert{padding:12px 16px;border-radius:12px;font-weight:600;font-size:14px}
.alert-ok{background:var(--ok-bg);color:var(--ok)}.alert-bad{background:var(--bad-bg);color:var(--bad)}.alert-warn{background:var(--warn-bg);color:var(--warn)}

.table-wrap{background:#fff;border-radius:20px;overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:14px;min-width:760px}
table.t th{text-align:right;color:var(--muted);font-size:12px;font-weight:600;padding:14px 12px}
table.t td{padding:12px;border-top:1px solid var(--line);vertical-align:middle}
table.t th:first-child,table.t td:first-child{padding-inline-start:18px}

.kv{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13px}
.kv span{color:var(--muted)}
.kv b{text-align:left}
.bar{height:8px;border-radius:8px;background:var(--line);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--red);border-radius:8px}
.bar.ok>i{background:var(--ok)}
.empty{text-align:center;padding:40px 16px;color:var(--muted)}
.empty b{display:block;color:var(--ink);font-size:17px;margin-bottom:4px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.timeline{display:flex;flex-direction:column;gap:12px}
.timeline .it{display:flex;gap:12px;align-items:flex-start}
.timeline .dot{margin-top:7px}

/* auth */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.auth-card{width:100%;max-width:440px;background:#fff;border-radius:28px;padding:28px;display:flex;flex-direction:column;gap:16px;box-shadow:0 30px 60px -30px rgba(42,23,18,.35)}
.auth-card .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px}
.auth-card .brand .logo{width:40px;height:40px;border-radius:12px;background:var(--red);display:flex;align-items:center;justify-content:center}
.slug-state{font-size:12px;font-weight:700}
.slug-state.ok{color:var(--ok)}.slug-state.bad{color:var(--bad)}
.kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kinds label{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:14px;background:var(--soft);font-size:13px;font-weight:700;cursor:pointer;border:2px solid transparent}
.kinds label:has(input:checked){border-color:var(--red);background:#FFF1EB}
.kinds input{position:absolute;opacity:0;pointer-events:none}

/* pagination */
.pager{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:12px}
.pager a,.pager span{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:#fff;text-decoration:none;color:var(--ink);font-weight:700;padding:0 10px}
.pager .on{background:var(--ink);color:#fff}
.pager .off{opacity:.4}

/* ===== المرحلة ٢: المنيو في لوحة العميل ===== */
.sw{position:relative;width:46px;height:28px;border-radius:999px;background:#D9CBBF;border:0;cursor:pointer;flex:none;transition:background .2s;padding:0}
.sw::after{content:"";position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.sw[aria-checked="true"]{background:var(--ok)}
.sw[aria-checked="true"]::after{transform:translateX(-18px)}
.ver{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:14px;background:var(--soft)}
.ver.off{opacity:.65}
.ver .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ver .url{font-size:12px;color:var(--muted);direction:ltr;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ver .acts{display:flex;gap:6px;flex-wrap:wrap}
.cats-bar{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
.cats-bar::-webkit-scrollbar{display:none}
.items{display:flex;flex-direction:column}
.it-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.it-row:first-child{border-top:0}
.it-row img,.it-row .ph{width:54px;height:54px;border-radius:12px;object-fit:cover;flex:none;background:var(--soft)}
.it-row .ph{display:flex;align-items:center;justify-content:center;color:#C9B6A6}
.it-row .info{flex:1;min-width:0}
.it-row .info b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it-row .info small{display:block;font-size:12px;color:var(--muted)}
.it-row.hidden-it{opacity:.5}
.price-in{display:flex;align-items:center;gap:4px;background:var(--soft);border-radius:10px;padding:0 8px;flex:none}
.price-in input{width:64px;border:0;background:transparent;font:inherit;font-weight:800;font-size:14px;color:var(--ink);padding:9px 0;text-align:center;direction:ltr}
.price-in input:focus{outline:0}
.price-in span{font-size:11px;color:var(--muted)}
.price-in.saved{background:var(--ok-bg)}
.sold-btn{flex:none;min-height:36px;padding:6px 10px;border-radius:10px;border:0;font:inherit;font-size:12px;font-weight:700;cursor:pointer;background:var(--ok-bg);color:var(--ok)}
.sold-btn.is-sold{background:var(--bad-bg);color:var(--bad)}
.sort-btns{display:none;flex-direction:column;gap:2px}
.sorting .sort-btns{display:flex}
.sorting .price-in,.sorting .sold-btn{display:none}
.sort-btns button{width:34px;height:26px;border:0;border-radius:8px;background:var(--soft);cursor:pointer;font-size:12px}
dialog.sheet{border:0;padding:0;border-radius:22px;width:min(560px,calc(100% - 24px));max-height:calc(100dvh - 40px);color:var(--ink);background:#fff}
dialog.sheet::backdrop{background:rgba(42,23,18,.5)}
dialog.sheet .sh-h{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:1}
dialog.sheet .sh-b{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
@media (max-width:600px){dialog.sheet{margin:auto auto 0;width:100%;max-width:100%;border-radius:22px 22px 0 0}}
.x-btn{width:38px;height:38px;border-radius:50%;border:0;background:var(--soft);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
details.box{background:#fff;border-radius:var(--r)}
details.box>summary{list-style:none;cursor:pointer;padding:16px 18px;font-weight:800;display:flex;justify-content:space-between;align-items:center}
details.box>summary::-webkit-details-marker{display:none}
details.box>summary::after{content:"▾";color:var(--muted)}
details.box[open]>summary::after{content:"▴"}
details.box>.in{padding:0 18px 18px;display:flex;flex-direction:column;gap:12px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:420px){.three{grid-template-columns:1fr 1fr}}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips label{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:var(--soft);font-size:13px;font-weight:700;cursor:pointer;min-height:38px}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label:has(input:checked){background:var(--ink);color:#fff}
.imgs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.imgs .slot{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--soft);display:flex;align-items:center;justify-content:center;border:2px dashed var(--line);cursor:pointer;color:var(--muted);font-size:12px;font-weight:700;text-align:center}
.imgs .slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.imgs .slot .rm{position:absolute;top:4px;left:4px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;cursor:pointer;z-index:1}
.imgs .slot input{position:absolute;inset:0;opacity:0;cursor:pointer}
.opt-g{border:1.5px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px}
.opt-c{display:grid;grid-template-columns:1fr 90px 38px;gap:6px}
.sticky-save{position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 30%);padding:16px 0 8px;display:flex;gap:8px;z-index:5}
@media (max-width:860px){.sticky-save{bottom:72px}}
.usage{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
.usage .bar{flex:1;max-width:160px}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tpl{display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:16px;background:var(--soft);border:2px solid transparent}
.tpl.cur{border-color:var(--ok);background:#F3FAF5}
.tpl-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;font-size:13px}
.tpl-prev{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:6px;aspect-ratio:9/14;border-radius:12px;overflow:hidden;background:var(--bg);padding-bottom:8px;position:relative;box-shadow:0 6px 16px -10px rgba(0,0,0,.4)}
.tpl-prev:focus-visible{outline:3px solid var(--yellow)}
.tpl-prev .h{display:block;height:28%;background:var(--soft)}
.tpl-prev .h-band{background:var(--band);height:18%;border-radius:0 0 var(--r) var(--r)}
.tpl-prev .h-hero{background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,.1)),var(--a);height:32%}
.tpl-prev .h-center{background:transparent;height:20%;position:relative}
.tpl-prev .h-center::after{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;border-radius:50%;transform:translate(-50%,-40%);background:var(--a)}
.tpl-prev .h-cover{background:linear-gradient(var(--soft) 70%,var(--bg) 70%);position:relative}
.tpl-prev .h-cover::after{content:"";position:absolute;right:10px;bottom:2px;width:22px;height:22px;border-radius:7px;background:var(--a);border:2px solid var(--bg)}
.tpl-prev .cs{display:flex;gap:4px;padding:0 8px}
.tpl-prev .cs i{display:block;width:22px;height:8px;border-radius:6px;background:var(--soft)}
.tpl-prev .cs i.on{background:var(--a)}
.tpl-prev .cs i.c-icons,.tpl-prev .cs i.c-stories{width:16px;height:16px;border-radius:50%}
.tpl-prev .cs i.c-stories{border:2px solid var(--a);background:var(--soft)}
.tpl-prev .cs i.c-cards{width:22px;height:20px;border-radius:5px}
.tpl-prev .cs i.c-tabs{height:3px;border-radius:0}
.tpl-prev .ls{display:grid;gap:5px;padding:0 8px;flex:1}
.tpl-prev .ls i{display:block;background:var(--card);border-radius:calc(var(--r) / 2);min-height:14px;box-shadow:0 2px 6px -4px rgba(0,0,0,.4)}
.tpl-prev .l-cards,.tpl-prev .l-bento,.tpl-prev .l-insta{grid-template-columns:1fr 1fr}
.tpl-prev .l-insta{gap:2px;padding:0}
.tpl-prev .l-insta i{border-radius:0;background:var(--a);opacity:.5}
.tpl-prev .l-bento i:first-child{grid-row:span 2;background:var(--a);opacity:.6}
.tpl-prev .l-big i,.tpl-prev .l-reels i,.tpl-prev .l-spot i:first-child{min-height:34px;background:linear-gradient(var(--a) 60%,var(--card) 60%)}
.tpl-prev .l-elegant i,.tpl-prev .l-magazine i,.tpl-prev .l-receipt i{background:transparent;box-shadow:none;border-bottom:1px dashed var(--ink);opacity:.4;border-radius:0}
.tpl-prev .cb{position:absolute;bottom:6px;left:8px;right:8px;height:12px;border-radius:6px;background:var(--a)}
.tpl-prev .cb-fab{right:auto;width:16px;height:16px;border-radius:50%}
.tpl-prev .cb-nav{left:0;right:0;bottom:0;height:14px;border-radius:0;background:var(--card)}
.swatch{width:34px;height:34px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer}
.color-in{padding:4px;height:46px;cursor:pointer}
.phone-prev{position:sticky;top:16px;width:100%;max-width:380px;margin:0 auto;aspect-ratio:9/18.5;border-radius:42px;background:#111;padding:10px;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.phone-prev iframe{width:100%;height:100%;border:0;border-radius:32px;background:#fff}
.ord-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));align-items:start}
.ord{display:flex;flex-direction:column;gap:8px;border:2px solid transparent}
.ord.is-new{border-color:var(--red);animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(210,64,31,.15)}}
.ord-h{display:flex;justify-content:space-between;align-items:center;font-size:18px}
.ord-items{list-style:none;margin:0;padding:8px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);display:flex;flex-direction:column;gap:6px;font-size:14px}
.ord-items li{display:flex;justify-content:space-between;gap:8px}
.ord-items small{display:block;color:var(--muted);font-size:12px}
.ord-t{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted)}
.ord-t b{color:var(--ink);font-size:17px}
.ord-a{display:flex;gap:6px;flex-wrap:wrap}
#print-area{display:none}
@media print{
  body *{visibility:hidden}
  #print-area,#print-area *{visibility:visible}
  #print-area{display:block;position:absolute;inset:0;font-family:monospace;font-size:13px;width:72mm;padding:4mm}
  #print-area h2,#print-area h3{margin:4px 0;font-size:15px}
  #print-area p{margin:2px 0}
}
@media print{#print-area svg{width:100%;height:auto}}
/* الإحصائيات */
.chart{display:flex;gap:8px;height:180px}
.ch-y{display:flex;flex-direction:column;justify-content:space-between;font-size:11px;color:var(--muted);min-width:24px;text-align:left}
.ch-bars{flex:1;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:2px;align-items:end;border-bottom:1px solid var(--line);background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 50%}
.ch-col{height:100%;display:flex;align-items:flex-end;position:relative;outline:0;cursor:default}
.ch-col i{display:block;width:100%;min-height:2px;background:var(--red);border-radius:4px 4px 0 0}
.ch-col:hover i,.ch-col:focus i{background:var(--red-d)}
.ch-col .tip{display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:11px;padding:6px 9px;border-radius:8px;white-space:nowrap;z-index:3;flex-direction:column;align-items:center;pointer-events:none}
.ch-col:hover .tip,.ch-col:focus .tip{display:flex}
.ch-col .tip b{font-size:13px}
.ch-x{display:flex;justify-content:space-between;padding-inline-start:32px}
.hb{display:grid;grid-template-columns:minmax(80px,40%) 1fr auto;gap:8px;align-items:center;font-size:13px}
.hb span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hours{display:flex;gap:2px;align-items:flex-end;height:110px;border-bottom:1px solid var(--line)}
.hours i{flex:1;background:var(--yellow);border-radius:3px 3px 0 0}
.bio-prev{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;aspect-ratio:9/14;border-radius:12px;overflow:hidden;padding:0 10px 10px;position:relative;box-shadow:0 6px 16px -10px rgba(0,0,0,.4);background-size:cover!important}
.bio-prev:focus-visible{outline:3px solid var(--yellow)}
.bio-prev .bp-cv{display:block;width:calc(100% + 20px);height:30%;margin:0 -10px -14px;background:var(--a) center/cover}
.bio-prev .bp-av{display:block;width:30px;height:30px;border-radius:50%;background:var(--a);border:2px solid #fff;margin-top:14px;flex:none}
.bio-prev .bp-cv+.bp-av{margin-top:0}
.bio-prev .bp-ln{display:block;width:50%;height:6px;border-radius:4px;background:currentColor;opacity:.5;margin-bottom:4px}
.bio-prev .bp-bt{display:block;width:100%;height:16px;border-radius:var(--r);background:var(--bb)}
.bio-prev .bp-main{background:var(--a)}
.bio-prev .bp-ol{border:1.5px solid currentColor}
.serp{display:flex;flex-direction:column;gap:2px;padding:14px;border-radius:14px;border:1px solid var(--line);background:#fff;font-family:Arial,sans-serif}
.serp .u{font-size:12px;color:#4D5156;direction:ltr;text-align:right}
.serp b{font-size:18px;color:#1A0DAB;font-weight:400}
.serp span:last-child{font-size:13px;color:#4D5156}

/* فحص الأمان */
.checks{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.chk{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--soft)}
.chk>span{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px}
.chk.ok>span{background:var(--ok-bg);color:var(--ok)}.chk.no>span{background:var(--warn-bg);color:var(--warn)}
.chk b{display:block;font-size:13px}.chk small{display:block;color:var(--muted);font-size:12px;margin-top:2px}

/* رأس صفحة */
.page-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.page-h h1{margin:0}
/* زرار الصوت في القائمة */
.sound-t{width:100%;border:0;background:none;font:inherit;cursor:pointer;text-align:start}
.sound-t[aria-pressed="false"]{opacity:.6}
/* إشعارات على الشاشة */
.toasts{position:fixed;top:16px;left:16px;z-index:200;display:flex;flex-direction:column;gap:10px;width:min(360px,calc(100vw - 32px));pointer-events:none}
.toast-n{pointer-events:auto;display:flex;gap:12px;align-items:center;background:#1A0F0B;color:#fff;text-decoration:none;padding:12px 14px;border-radius:16px;box-shadow:0 24px 50px -20px rgba(0,0,0,.6);transform:translateX(-120%);opacity:0;transition:transform .35s cubic-bezier(.2,.9,.3,1.2),opacity .3s}
.toast-n.in{transform:none;opacity:1}
.toast-n:hover{color:#fff}
.toast-n .ti{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:rgba(255,255,255,.1)}
.toast-n.t-order .ti{background:linear-gradient(135deg,#FF8A1F,#E2361B)}
.toast-n b{display:block;font-size:15px}.toast-n small{display:block;color:#D9C7B8;font-size:13px}
.toast-n>span:nth-child(2){flex:1;min-width:0}
.toast-n button{flex:none;border:0;background:none;color:#aaa;font-size:16px;cursor:pointer;padding:4px}
@media (max-width:860px){.toasts{top:auto;bottom:84px;left:12px;right:12px;width:auto}}
/* شات الدعم */
.chat{display:flex;flex-direction:column;height:min(70vh,720px)}
.chat-log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg,#FBF6F1,#fff)}
.chat-empty{margin:auto;color:var(--muted);text-align:center}
.msg{max-width:78%;padding:10px 14px;border-radius:18px;display:flex;flex-direction:column;gap:6px;box-shadow:0 6px 16px -12px rgba(0,0,0,.4)}
.msg p{margin:0;white-space:normal;word-break:break-word;line-height:1.6}
.msg small{font-size:11px;opacity:.7}
.msg img{max-width:240px;width:100%;border-radius:12px;display:block}
.msg.me{align-self:flex-start;background:var(--red);color:#fff;border-bottom-right-radius:6px}
.msg.me a{color:#fff}
.msg.them{align-self:flex-end;background:#fff;border-bottom-left-radius:6px}
.msg .tick{font-style:normal}
.chat-form{display:flex;gap:8px;align-items:flex-end;padding:12px;border-top:1px solid var(--line);background:#fff}
.chat-form textarea{flex:1;font:inherit;font-size:15px;border:1.5px solid var(--line);border-radius:14px;padding:11px 14px;resize:none;min-height:46px;max-height:160px;outline:0}
.chat-form textarea:focus{border-color:var(--red)}
.chat-att{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--soft);cursor:pointer;color:var(--ink)}
.chat-preview{padding:6px 14px 10px;font-size:13px;background:#fff}
.conv{display:block;padding:12px;border-radius:14px;text-decoration:none;color:var(--ink);position:relative}
.conv:hover,.conv.on{background:var(--soft)}
.conv small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.conv .count{position:absolute;left:12px;top:12px}

/* محرر الشكل: كله في حدود الشاشة */
.ed{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:22px;height:calc(100svh - 56px);max-height:900px}
.ed-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:0;position:relative}
.ed-phone{flex:1 1 auto;min-height:0;height:100%;aspect-ratio:9/19.3;max-width:100%;border-radius:44px;padding:10px;background:linear-gradient(145deg,#2B2320,#0B0807);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.ed-phone .scr,.tpl2 .mini .scr{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:#fff}
.ed-phone .scr{border-radius:35px}
.ed-phone iframe,.tpl2 .mini iframe{position:absolute;top:0;right:0;border:0;transform-origin:top right;background:#fff}
.ed-try{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:var(--ink);color:#fff;padding:8px 8px 8px 14px;border-radius:999px;box-shadow:0 16px 30px -12px rgba(0,0,0,.6);white-space:nowrap;z-index:2}
.ed-try[hidden]{display:none}.ed-try form{display:contents}.ed-try span{font-size:13px;padding-inline:6px}
.ed-panel{display:flex;flex-direction:column;gap:12px;min-height:0;background:var(--card);border-radius:var(--r);padding:16px;box-shadow:0 12px 30px -26px rgba(26,15,11,.45)}
.ed-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ed-title h1{margin:0;font-size:22px}
.ed-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--soft);padding:4px;border-radius:14px}
.ed-tabs button{border:0;font:inherit;font-weight:800;font-size:14px;min-height:42px;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer}
.ed-tabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 4px 12px -6px rgba(26,15,11,.4)}
.ed-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px;padding:2px 2px 8px}
.ed-body[hidden]{display:none}
.ed-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.tpl2{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:18px;background:var(--soft);border:2px solid transparent;transition:border-color .2s,transform .2s}
.tpl2[hidden]{display:none}
.tpl2:hover{transform:translateY(-3px)}
.tpl2:focus-visible{outline:3px solid var(--yellow)}
.tpl2.cur{border-color:var(--ok)}
.tpl2.picked{border-color:var(--red);background:#FFF1E8}
.tpl2 .mini{display:block;aspect-ratio:9/16;border-radius:13px;overflow:hidden;pointer-events:none;box-shadow:0 6px 16px -10px rgba(0,0,0,.45)}
.tpl2 .mini .scr{border-radius:13px}
.tpl2-m{display:flex;justify-content:space-between;align-items:center;gap:4px;font-size:13px;padding:0 2px}
.tpl2-m .badge{font-size:10px;padding:2px 6px}
.ed-save{position:sticky;bottom:-8px;display:flex;gap:8px;background:var(--card);padding:10px 0 4px;margin-top:auto}
.ed-save .grow-1{flex:1}
.swatch.on{box-shadow:0 0 0 2.5px var(--ink)}
.chips .color-in{width:34px;height:34px;padding:0;border:0;border-radius:50%;overflow:hidden;cursor:pointer}
@media (max-width:860px){
 .main:has(.ed){padding:8px 10px 80px}
 .ed{grid-template-columns:minmax(0,1fr);grid-template-rows:46% minmax(0,1fr);gap:8px;height:calc(100svh - 96px)}
 .ed-phone{padding:6px;border-radius:30px}.ed-phone .scr{border-radius:25px}
 .ed-try{bottom:6px;padding:6px 6px 6px 10px}
 .ed-panel{padding:10px;gap:8px;border-radius:20px}
 .ed-top{display:none}
 .ed-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .tpl2{padding:4px;border-radius:14px}.tpl2-m{font-size:11px}
}
.ed .pill{background:var(--soft);min-height:36px;padding:8px 14px}.ed .pill.on{background:var(--ink)}
.ed-body>*{flex:none}.ed-body .pills{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}

/* خطوات المنيو */
.steps-nav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px;margin:-4px 0 4px}
.steps-nav::-webkit-scrollbar{display:none}
.steps-nav a{flex:none;display:flex;align-items:center;gap:8px;min-height:46px;padding:8px 14px 8px 16px;border-radius:999px;background:#fff;color:var(--muted);font-weight:800;font-size:14px;text-decoration:none;box-shadow:0 6px 16px -14px rgba(26,15,11,.6)}
.steps-nav .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--ink);font-size:13px}
.steps-nav a.ok .n{background:var(--ok);color:#fff}
.steps-nav a.on{background:var(--ink);color:#fff}
.steps-nav a.on .n{background:var(--red);color:#fff}
.media-pick{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px}
.media-pick label{position:relative;display:grid;place-items:center;border-radius:20px;border:2px dashed var(--line);background:var(--soft);cursor:pointer;overflow:hidden;color:var(--muted);font-weight:800;font-size:14px}
.media-pick .mp-logo{aspect-ratio:1}.media-pick .mp-cover{height:110px}
.media-pick img{width:100%;height:100%;object-fit:cover}
.media-pick input{position:absolute;inset:0;opacity:0;cursor:pointer}
.style-card{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:linear-gradient(135deg,#FFF6EE,#FFE7D6)}
.step-go{position:sticky;bottom:12px;z-index:5}
@media (max-width:860px){.step-go{bottom:80px}}
.demo-choice{display:flex;flex-direction:column;gap:12px;background:#FFF8E6;border:1.5px solid #F4D58D}
.dc-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cat-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.cat-card{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:18px;background:var(--soft);text-decoration:none;color:var(--ink)}
.cat-card img,.cat-card .ph{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:13px;display:grid;place-items:center;background:#fff;color:var(--muted);font-size:26px}
.cat-card b{font-size:14px}.cat-card small{font-size:12px;color:var(--muted)}
.cat-card.add{border:2px dashed var(--line);background:transparent;align-items:center;justify-content:center;text-align:center}
.offer-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px;border-radius:14px;background:var(--soft);text-decoration:none;color:var(--ink)}

/* الشاشة نصين: معاينة + تعديل */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);grid-template-areas:"body prev";gap:22px;align-items:start}
.sp-body{grid-area:body;min-width:0;display:flex;flex-direction:column;gap:16px}
.sp-prev{grid-area:prev;position:sticky;top:16px;height:calc(100svh - 32px);max-height:860px;display:flex;flex-direction:column;align-items:center;gap:8px}
.sp-phone{flex:1;min-height:0;height:100%;aspect-ratio:9/19.3;max-width:100%;border-radius:44px;padding:10px;background:linear-gradient(145deg,#2B2320,#0B0807);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.sp-phone .scr{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:35px;background:#fff}
.sp-phone iframe{position:absolute;top:0;right:0;border:0;transform-origin:top right;background:#fff}
.sp-t{display:none}
.sp-body .step-go{bottom:10px}
.split .side-col:has(.phone-prev){display:none}
@media (max-width:860px){
 .main:has(.split){padding:0}
 .split{grid-template-columns:minmax(0,1fr);grid-template-rows:42% minmax(0,1fr);grid-template-areas:"prev" "body";gap:0;height:calc(100svh - 72px);align-items:stretch;overflow:hidden;transition:grid-template-rows .25s}
 .sp-prev{position:relative;top:0;height:100%;max-height:none;min-height:0;overflow:hidden;padding:8px 0 0;gap:4px;background:linear-gradient(180deg,#EFE5DA,#F7F1EA);border-bottom:1px solid var(--line)}
 .sp-phone{flex:1 1 0;height:auto;width:auto;padding:5px;border-radius:26px}.sp-phone .scr{border-radius:22px}
 .sp-t{display:block;border:0;background:none;font:inherit;font-size:12px;font-weight:800;color:var(--muted);padding:2px 12px 6px;cursor:pointer}
 .sp-t .off{display:none}
 .split.min{grid-template-rows:34px minmax(0,1fr)}
 .split.min .sp-phone{display:none}.split.min .sp-t .on{display:none}.split.min .sp-t .off{display:inline}
 .sp-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 12px 24px;gap:12px}
 body:has(.split){overflow:hidden}
 .sp-body .topbar h1{font-size:22px}
}
.strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 8px;scrollbar-width:thin}
.strip-i{all:unset;cursor:pointer;flex:none;width:96px;display:flex;flex-direction:column;gap:5px;align-items:center;scroll-snap-align:start;font-size:12px}
.strip-i .mini{display:block;width:100%;aspect-ratio:9/16;border-radius:14px;overflow:hidden;border:2.5px solid transparent;pointer-events:none;box-shadow:0 6px 14px -10px rgba(0,0,0,.5)}
.strip-i .scr{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:#fff}
.strip-i iframe{position:absolute;top:0;right:0;border:0;transform-origin:top right}
.strip-i.on .mini{border-color:var(--red)}.strip-i.on b{color:var(--red)}
.strip-i:focus-visible .mini{outline:3px solid var(--yellow)}
/* أكورديون الخطوة الأولى: قسم واحد مفتوح — أقل سكرول */
.acc{background:var(--card);border-radius:var(--r);box-shadow:0 12px 30px -26px rgba(26,15,11,.45);overflow:hidden}
.acc>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:15px 18px;font-weight:800;font-size:16px}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::after{content:"";width:9px;height:9px;border-inline-start:2.5px solid var(--muted);border-bottom:2.5px solid var(--muted);transform:rotate(-45deg);transition:transform .2s;margin-inline-end:4px}
.acc[open]>summary::after{transform:rotate(135deg)}
.acc[open]>summary{color:var(--red-d)}
.acc-b{display:flex;flex-direction:column;gap:12px;padding:0 18px 18px}
@media (max-width:860px){.acc>summary{padding:13px 14px;font-size:15px}.acc-b{padding:0 14px 14px}.media-pick{grid-template-columns:88px minmax(0,1fr)}.media-pick .mp-cover{height:88px}}
.size-pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.size-pick label{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:14px;background:var(--soft);border:2px solid transparent;cursor:pointer;font-size:12px;font-weight:700;text-align:center}
.size-pick input{position:absolute;opacity:0;pointer-events:none}
.size-pick label:has(input:checked){border-color:var(--red);background:#FFF1E8;color:var(--red-d)}
.size-pick label:has(input:focus-visible){outline:3px solid var(--yellow)}
.sz{display:block;background:currentColor;opacity:.75}
.sz-full{width:44px;height:14px;border-radius:5px}.sz-half{width:26px;height:26px;border-radius:7px}.sz-circle{width:26px;height:26px;border-radius:50%}.sz-wide{width:44px;height:26px;border-radius:6px}
/* رفع الصور */
.up-bar{position:absolute;left:8px;right:8px;bottom:8px;z-index:2;display:block;height:26px;border-radius:999px;background:rgba(20,12,9,.72);overflow:hidden}
.up-bar i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#FF8A1F,#E2361B);transition:width .2s}
[dir=rtl] .up-bar i{inset:0 0 0 auto}
.up-bar em{position:relative;display:grid;place-items:center;height:100%;font-style:normal;font-size:12px;font-weight:800;color:#fff}
.up-bar.done i{background:#1E9E55}.up-bar.bad{background:#B42318}
.uploading img{opacity:.75}
.up-thumb{width:100%;height:100%;object-fit:cover}
.up-ov{position:fixed;inset:0;z-index:200;background:rgba(20,12,9,.55);backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px}
.up-box{background:#fff;border-radius:22px;padding:22px;width:min(340px,100%);display:flex;flex-direction:column;gap:12px;text-align:center;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.up-box .up-bar{position:relative;inset:auto;height:34px;background:var(--soft)}
.up-box .up-bar em{color:var(--ink)}
.up-box small{color:var(--muted)}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.pk{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:18px;background:#fff;border:2.5px solid transparent;box-shadow:0 8px 20px -16px rgba(26,15,11,.6)}
.pk[hidden]{display:none}
.pk.on{border-color:var(--red);background:#FFF1E8}
.pk:focus-visible{outline:3px solid var(--yellow)}
.pk .mini{display:block;aspect-ratio:9/16;border-radius:13px;overflow:hidden;pointer-events:none;background:var(--soft)}
.pk .scr{position:relative;display:block;width:100%;height:100%;overflow:hidden}
.pk iframe{position:absolute;top:0;right:0;border:0;transform-origin:top right;background:#fff}
.pk-m{display:flex;justify-content:space-between;align-items:center;gap:4px;font-size:13px;padding:0 2px}
.pk-m .badge{font-size:10px;padding:2px 6px}
@media (max-width:860px){.pick-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.pk{padding:4px;border-radius:14px}.pk-m{font-size:11px}}
/* أزرار الحفظ جوه نص التعديل: شريط ثابت تحت مش طاير على الكلام */
.sp-body .sticky-save,.sp-body .step-go{position:sticky;bottom:-24px;z-index:6;margin:4px -12px -24px;padding:10px 12px calc(12px + env(safe-area-inset-bottom));background:rgba(247,241,234,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);display:flex;gap:8px}
.sp-body .sticky-save .btn,.sp-body .step-go .btn{min-height:48px;box-shadow:none}
.sp-body .sticky-save .btn-primary,.sp-body .step-go .btn-primary{flex:1}
.sp-body .step-go form,.sp-body form.step-go{display:flex;gap:8px}
@media (min-width:861px){.sp-body .sticky-save,.sp-body .step-go{bottom:0;margin:4px 0 0;border-radius:18px;border:1px solid var(--line)}}
@media (max-width:860px){
 /* أقل من ١٦px الآيفون بيعمل زووم وقت الكتابة وبيبوّظ الصفحة */
 .input,input.input,select.input,textarea.input,.sp-body input,.sp-body select,.sp-body textarea{font-size:16px}
 .split{height:calc(var(--vvh,100svh) - 72px)}
 body.typing .bnav{display:none}
 body.typing .split{height:var(--vvh,100svh);grid-template-rows:26% minmax(0,1fr)}
 body.typing .sp-t{display:none}
 body.typing .split.min{grid-template-rows:0 minmax(0,1fr)}
 body.typing .sp-body .step-go,body.typing .sp-body .sticky-save{padding-bottom:10px}
}
@media (max-width:860px){html,body{overflow-x:hidden}.sp-body{overflow-x:hidden}}
/* عناصر نص التعديل ماتنكمشش (شريط الخطوات كان بيختفي على الموبايل) */
.sp-body>*{flex:none}
.sp-body>form.stack,.sp-body>.stack{flex:none}
@media (max-width:860px){.steps-nav{margin:0 -12px;padding:2px 12px 4px}.steps-nav a{min-height:42px;padding:6px 12px 6px 14px;font-size:13px}}
@media (max-width:860px){html,body{overflow-x:hidden}.sp-body{overflow-x:hidden}}
.auto-badge{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:150;background:var(--ink);color:#fff;font-weight:800;font-size:13px;padding:8px 16px;border-radius:999px;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.auto-badge.ok{background:#1E9E55}.auto-badge.bad{background:#B42318}