:root{
  --bg:#f3f6fa;--card:#fff;--ink:#0d1321;--ink2:#2b3445;--muted:#5b6474;--line:#e4e9ef;
  --pri:#1878b8;--pri2:#125f94;--pri3:#0c4166;--pri-soft:#e4f1fa;--grad:linear-gradient(135deg,#2a93d5 0%,#1878b8 50%,#0f5689 100%);
  --acc:#f59e0b;--warn:#b45309;--warn-soft:#fff2dc;--bad:#c0261a;--bad-soft:#fde9e7;
  --info:#1d4ed8;--info-soft:#e6edfd;--ok:#12813b;--ok-soft:#e3f6e9;
  --side:#0a101c;--side2:#141c2c;
  --r:14px;--sh:0 1px 2px rgba(13,19,33,.04),0 4px 14px rgba(13,19,33,.06);--sh2:0 18px 40px -12px rgba(13,19,33,.22);
  --ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Cairo',system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.6;font-weight:600;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(900px 500px at 100% -10%,rgba(42,147,213,.10),transparent 60%),radial-gradient(700px 500px at -10% 110%,rgba(245,158,11,.07),transparent 60%);pointer-events:none;z-index:-1}
button,input,select,textarea{font-family:inherit;font-size:13.5px;font-weight:600;color:inherit}
b,strong{font-weight:800}
a{color:var(--pri)}
.hidden{display:none!important}
::selection{background:#cfe6f7}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#c9d0da;border-radius:10px;border:3px solid transparent;background-clip:content-box}
svg.i{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* ===== auth ===== */
.auth{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.auth-side{background:var(--grad);color:#fff;padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;isolation:isolate}
.auth-side .blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.22;background:#fff;z-index:-1;animation:float 14s ease-in-out infinite}
.auth-side .blob.b1{width:420px;height:420px;top:-140px;left:-120px}
.auth-side .blob.b2{width:260px;height:260px;bottom:-60px;right:-40px;animation-delay:-5s;background:#fcd34d;opacity:.25}
.auth-side .blob.b3{width:140px;height:140px;top:45%;left:55%;animation-delay:-9s;opacity:.15}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-24px) scale(1.06)}66%{transform:translate(-20px,20px) scale(.95)}}
.auth-side .logo{width:170px;border-radius:20px;background:#fff;padding:12px;margin-bottom:26px;box-shadow:0 12px 30px -12px rgba(13,19,33,.45);animation:pop .7s var(--spring) both}
.auth-side .logo img{display:block;width:100%;height:auto}
.auth-side h1{font-size:clamp(28px,3.6vw,46px);margin:0 0 14px;font-weight:900;line-height:1.2;animation:rise .7s var(--ease) .08s both}
.auth-side p{opacity:.92;max-width:440px;font-size:clamp(15px,1.3vw,17px);font-weight:600;animation:rise .7s var(--ease) .16s both}
.auth-side ul{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:14px}
.auth-side li{display:flex;gap:14px;align-items:center;font-weight:700;font-size:16px;animation:rise .7s var(--ease) both}
.auth-side li:nth-child(1){animation-delay:.24s}.auth-side li:nth-child(2){animation-delay:.32s}.auth-side li:nth-child(3){animation-delay:.4s}
.auth-side li span{width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:15px;font-weight:900;border:1px solid rgba(255,255,255,.25)}
.auth-side .foot{opacity:.9;font-size:14px;font-weight:700;margin-top:18px}
.auth-side .foot a{color:inherit;text-decoration:none}
.auth-main{display:flex;align-items:center;justify-content:center;padding:clamp(20px,4vw,48px)}
.auth-box{width:100%;max-width:460px;animation:rise .6s var(--ease) .1s both}
.auth-box h2{font-size:24px;font-weight:900;margin:0 0 4px}
.auth-box .lead{color:var(--muted);margin:0 0 22px}
.tabs{display:flex;background:#e2e6ec;border-radius:14px;padding:5px;margin-bottom:24px;position:relative}
.tabs button{flex:1;border:0;background:transparent;padding:12px;border-radius:10px;cursor:pointer;font-weight:800;color:var(--muted);position:relative;z-index:1;transition:color .3s}
.tabs button.on{color:var(--ink)}
.tabs .pill{position:absolute;top:5px;bottom:5px;width:calc(50% - 5px);background:#fff;border-radius:10px;box-shadow:0 2px 8px rgba(13,19,33,.1);transition:transform .4s var(--spring);right:5px}
.tabs.reg .pill{transform:translateX(-100%)}
.demo{margin-top:20px;background:#fff;border:1.5px dashed #cfd6df;border-radius:14px;padding:14px;font-size:13.5px;color:var(--muted)}
.demo b{color:var(--ink);display:block;margin-bottom:6px}
.demo button{border:0;background:var(--pri-soft);color:var(--pri2);border-radius:9px;padding:6px 11px;margin:3px 0 3px 5px;cursor:pointer;font-size:13px;font-weight:800;transition:all .2s var(--ease)}
.demo button:hover{background:var(--pri);color:#fff;transform:translateY(-2px)}
.pw{position:relative}.pw .eye{position:absolute;left:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--muted);cursor:pointer;padding:6px;display:grid}

/* ===== layout ===== */
.app{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh;min-height:100dvh}
.side{background:var(--side);color:#aeb7c6;padding:20px 14px;position:sticky;top:0;height:100vh;height:100dvh;overflow:auto;display:flex;flex-direction:column}
.brand{color:#fff;font-weight:900;font-size:15.5px;padding:4px 8px 18px;display:flex;gap:12px;align-items:center;line-height:1.35}
.brand i{width:36px;height:36px;border-radius:13px;background:var(--grad);display:grid;place-items:center;font-style:normal;flex-shrink:0;box-shadow:0 8px 20px -6px rgba(42,147,213,.6)}
.brand i svg{width:22px;height:22px;stroke:#fff}
.nav{display:flex;flex-direction:column;gap:4px}
.nav .ni{display:flex;width:100%;align-items:center;gap:12px;border:0;background:transparent;color:inherit;padding:9px 12px;border-radius:11px;cursor:pointer;text-align:right;font-size:13.5px;font-weight:700;position:relative;transition:background .25s,color .25s,transform .25s var(--ease)}
.nav .ni:hover{background:var(--side2);color:#fff;transform:translateX(-3px)}
.nav .ni.on{background:var(--grad);color:#fff;box-shadow:0 10px 24px -10px rgba(42,147,213,.7)}
.nav .ni.on::after{content:"";position:absolute;right:-14px;top:22%;bottom:22%;width:4px;border-radius:4px 0 0 4px;background:#5db7ee}
.nav .lb-s{display:none}
.nav .cnt{margin-right:auto;background:#ef4444;color:#fff;border-radius:20px;font-size:11.5px;font-weight:900;padding:1px 8px;min-width:22px;text-align:center;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}70%{box-shadow:0 0 0 8px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
.me{margin-top:auto;border-top:1px solid #1c2536;padding:16px 8px 4px;font-size:13px;display:flex;gap:10px;align-items:center}
.me .av{width:34px;height:34px;border-radius:12px;background:#1c2536;display:grid;place-items:center;color:#fff;font-weight:900;flex-shrink:0}
.me .nm{flex:1;min-width:0}
.me b{color:#fff;display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me .lo{border:0;background:#1c2536;color:#fff;width:34px;height:34px;border-radius:12px;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.me .lo:hover{background:var(--bad)}
.main{padding:clamp(14px,2vw,26px) clamp(12px,2.2vw,30px);min-width:0;max-width:1680px;width:100%}
.main>*{animation:rise .55s var(--ease) both}
.main>*:nth-child(2){animation-delay:.05s}.main>*:nth-child(3){animation-delay:.1s}.main>*:nth-child(4){animation-delay:.15s}.main>*:nth-child(5){animation-delay:.2s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.top h2{margin:0;font-size:clamp(19px,1.9vw,24px);font-weight:900;letter-spacing:-.3px}
.top .sub{color:var(--muted);font-size:13px;font-weight:700}
.top .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ===== elements ===== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.pad{padding:16px}
.btn{border:1.5px solid var(--line);background:#fff;color:var(--ink);padding:7px 13px;border-radius:10px;cursor:pointer;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;position:relative;overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s,background .2s,border-color .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(13,19,33,.25);border-color:#cdd4de}
.btn:active{transform:translateY(0) scale(.97)}
.btn.pri{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 8px 20px -10px rgba(24,120,184,.8)}
.btn.pri:hover{box-shadow:0 14px 26px -10px rgba(24,120,184,.85)}
.btn.bad{color:var(--bad);border-color:#f4c9c4}
.btn.bad:hover{background:var(--bad);color:#fff;border-color:var(--bad)}
.btn.sm{padding:4px 10px;font-size:12.5px;border-radius:9px}
.btn.ghost{border-color:transparent;background:transparent}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn .rp{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:rp .6s ease-out forwards;pointer-events:none}
.btn:not(.pri) .rp{background:rgba(24,120,184,.22)}
@keyframes rp{to{transform:scale(3.2);opacity:0}}
label.f{display:block;margin-bottom:11px}
label.f>span{display:block;font-size:12.5px;font-weight:800;margin-bottom:4px;color:var(--ink2)}
.in,select.in,textarea.in{width:100%;border:1.5px solid #d3d9e1;border-radius:10px;padding:7px 12px;background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;min-height:38px}
.in:hover{border-color:#b8c1cd}
.in:focus{border-color:var(--pri);box-shadow:0 0 0 4px rgba(24,120,184,.15)}
textarea.in{min-height:90px;resize:vertical}
select.in{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%235b6474' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 14px center;padding-left:36px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.filters .in{width:auto;min-width:150px;flex:0 1 auto}
.filters .in:first-child{flex:1 1 220px;max-width:340px}
.date-f{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--muted)}
.sum-row td{background:#f8fafb;border-bottom:0}
.ntf-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:10px;background:transparent}
.ntf-dot.on{background:var(--pri)}
.pl-t input{width:100px;min-width:80px}
table.t{width:100%;border-collapse:separate;border-spacing:0}
.t th{text-align:right;font-size:12px;color:var(--muted);font-weight:800;padding:10px 14px;border-bottom:1.5px solid var(--line);background:#f8fafb;white-space:nowrap;letter-spacing:.2px}
.t th:first-child{border-top-right-radius:var(--r)}.t th:last-child{border-top-left-radius:var(--r)}
.t td{white-space:nowrap;padding:9px 14px;border-bottom:1px solid var(--line);vertical-align:middle;transition:background .2s}
.t tbody tr{animation:rise .45s var(--ease) both;animation-delay:calc(var(--i,0) * 35ms)}
.t tr:last-child td{border-bottom:0}
.t tr.click{cursor:pointer}
.t tr.click:hover td{background:#f1f7fc}
.t tr.click:hover td:first-child{box-shadow:inset -4px 0 0 var(--pri)}
.tw{overflow-x:auto}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:20px;font-size:12px;font-weight:800;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.b-new{background:var(--info-soft);color:var(--info)}
.b-quote_req{background:var(--warn-soft);color:var(--warn)}
.b-quote_sent{background:#f1e6ff;color:#7322c9}
.b-accepted{background:var(--ok-soft);color:var(--ok)}
.b-rejected{background:var(--bad-soft);color:var(--bad)}
.b-processing{background:#ddf1fd;color:#0369a1}
.b-delivered{background:#d9f7ea;color:#047857}
.b-gray{background:#eef0f3;color:#4b5563}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.kpi{padding:13px 16px;position:relative;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
.kpi:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
.kpi::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;left:-40px;top:-50px;background:var(--pri-soft);opacity:.9;transition:transform .5s var(--ease)}
.kpi:hover::after{transform:scale(1.25)}
.kpi:nth-child(2)::after{background:#e6edfd}.kpi:nth-child(3)::after{background:#f1e6ff}.kpi:nth-child(4)::after{background:#fff2dc}
.kpi>*{position:relative;z-index:1}
.kpi .l{color:var(--muted);font-size:12.5px;font-weight:800}
.kpi .v{font-size:clamp(19px,1.7vw,25px);font-weight:900;margin-top:4px;letter-spacing:-.5px;line-height:1.3}
.kpi .s{font-size:12.5px;color:var(--muted);font-weight:700}
.row{display:flex;gap:18px}
.row>*{flex:1;min-width:0}
.sec-h{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1.5px solid var(--line);gap:10px}
.sec-h h3{margin:0;font-size:15px;font-weight:900}
.empty{padding:44px;text-align:center;color:var(--muted);font-weight:700}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:13px;font-weight:700;letter-spacing:.3px}

/* ===== products ===== */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pc{overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s;animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms)}
.pc:hover{transform:translateY(-6px);box-shadow:var(--sh2)}
.pc .img{aspect-ratio:1/1;margin:10px 10px 0;border-radius:14px;background:linear-gradient(135deg,#f3f8fc,#dfebf5);overflow:hidden;position:relative;box-shadow:inset 0 0 0 1px rgba(13,19,33,.06)}
.pc .img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.pc:hover .img img{transform:scale(1.04)}
.pc .img::after{content:"عرض التفاصيل";position:absolute;inset:auto 0 0 0;padding:28px 12px 10px;background:linear-gradient(transparent,rgba(10,16,28,.7));color:#fff;font-weight:800;font-size:13px;text-align:center;transform:translateY(100%);transition:transform .35s var(--ease)}
.pc:hover .img::after{transform:none}
.pc .cat{position:absolute;top:10px;right:10px;background:rgba(10,16,28,.72);backdrop-filter:blur(6px);color:#fff;font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:20px;z-index:1}
.pc .body{padding:10px 13px;flex:1;display:flex;flex-direction:column;gap:2px}
.pc .nm{font-weight:900;font-size:14px;line-height:1.4}
.pc .cd{font-size:12px;color:var(--muted)}
.pc .ft{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:10px}
.price{font-weight:900;color:var(--pri2)}
.chips{display:flex;gap:8px;margin-bottom:18px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:30px;padding:5px 13px;cursor:pointer;font-weight:800;font-size:13.5px;white-space:nowrap;transition:all .25s var(--ease)}
.chip:hover{border-color:var(--pri);color:var(--pri2)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink);transform:scale(1.04)}

/* ===== orders ===== */
.stabs{display:flex;gap:6px;margin-bottom:14px;overflow-x:auto;padding:4px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);scrollbar-width:none}
.stabs::-webkit-scrollbar{display:none}
.stab{display:flex;align-items:center;gap:7px;border:0;background:transparent;border-radius:10px;padding:7px 12px;cursor:pointer;font-weight:800;font-size:13px;color:var(--muted);white-space:nowrap;transition:background .2s,color .2s}
.stab:hover{background:#f3f5f8;color:var(--ink)}
.stab i{width:8px;height:8px;border-radius:50%;background:currentColor}
.stab i[class]{background:none}.stab i[class]::before{content:"";display:block;width:8px;height:8px;border-radius:50%;background:currentColor}
.stab b{background:#eef0f3;color:var(--ink2);border-radius:20px;padding:0 8px;font-size:11.5px;min-width:22px;text-align:center}
.stab.on{background:var(--ink);color:#fff}.stab.on b{background:rgba(255,255,255,.18);color:#fff}
.stab.on i[class]{background:none!important;color:#fff!important}
.ogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.oc{cursor:pointer;padding:14px 16px 0;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;animation:rise .45s var(--ease) both;animation-delay:calc(var(--i,0) * 35ms)}
.oc:hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:#cfe3f2}
.oc-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.oc-no{font-size:15px;font-weight:900;color:var(--ink)}
.oc-c{display:flex;gap:10px;align-items:center}
.oc-av{width:38px;height:38px;border-radius:12px;background:var(--pri-soft);color:var(--pri2);display:grid;place-items:center;font-weight:900;font-size:16px;flex-shrink:0}
.oc-av.sm{width:32px;height:32px;border-radius:10px;font-size:14px}
.oc-cn{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-sm{font-size:12px}
.oc-th{display:flex;align-items:center;padding-right:6px;gap:0;flex-wrap:wrap;row-gap:6px}
.oc-th img,.oc-th>span{width:30px;height:30px;border-radius:9px;border:2px solid #fff;object-fit:cover;margin-right:-6px;box-shadow:0 2px 5px rgba(13,19,33,.14);background:#eef0f3;display:grid;place-items:center;font-size:11px;font-weight:900;color:var(--muted)}
.oc-th em{font-style:normal;font-size:12px;color:var(--muted);font-weight:800;margin-right:12px}
.oc-q{white-space:nowrap;margin-right:auto;background:var(--warn-soft);color:var(--warn);border-radius:20px;padding:1px 9px;font-size:11px;font-weight:800}
.oc-f{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px dashed var(--line);padding:9px 0 12px}
.oc-pg{position:absolute;left:0;right:0;bottom:0;height:3px;background:#eef0f3}
.oc-pg i{display:block;height:100%;background:var(--grad);border-radius:0 3px 3px 0;transform-origin:right;animation:grow .9s var(--ease) both;animation-delay:calc(var(--i,0) * 35ms + .2s)}
.oc-pg.rej i{background:var(--bad)}
.stp{display:flex;margin:0 0 16px;padding:12px 6px;background:#f6f8fa;border-radius:14px;border:1.5px solid var(--line)}
.stp .st{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;font-size:11.5px;font-weight:800;color:var(--muted);text-align:center}
.stp .st::before{content:"";position:absolute;top:13px;right:-50%;width:100%;height:2.5px;background:#dfe4ea;z-index:0}
.stp .st:first-child::before{display:none}
.stp .st.done::before{background:var(--pri)}
.stp .st i{width:28px;height:28px;border-radius:50%;background:#fff;border:2.5px solid #dfe4ea;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:900;position:relative;z-index:1;transition:all .3s}
.stp .st.done i{background:var(--pri);border-color:var(--pri);color:#fff}
.stp .st.cur i{box-shadow:0 0 0 5px rgba(24,120,184,.18)}
.stp .st.done span{color:var(--ink)}
.stp.rej .st.cur i{background:var(--bad);border-color:var(--bad);color:#fff;box-shadow:0 0 0 5px rgba(192,38,26,.15)}
.stp.rej .st.cur span{color:var(--bad)}
.tl{position:relative;padding-right:4px}
.tl-i{display:flex;gap:10px;padding:6px 0;position:relative;font-size:13px}
.tl-i>i{width:10px;height:10px;border-radius:50%;margin-top:6px;flex-shrink:0;position:relative;z-index:1;background:none}
.tl-i>i::before{content:"";display:block;width:10px;height:10px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px #f6f8fa}
.tl-i:not(:last-child)::after{content:"";position:absolute;right:4px;top:18px;bottom:-8px;width:2px;background:#e1e6ec}

/* ===== tiles / details ===== */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:0 0 14px}
.tile{background:#f6f8fa;border:1.5px solid var(--line);border-radius:12px;padding:8px 12px;min-width:0}
.tile span{display:block;font-size:11.5px;color:var(--muted);font-weight:800}
.tile b{display:block;font-size:14px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.hi{background:var(--pri-soft);border-color:#c5e0f3}.tile.hi b{color:var(--pri2)}
.it{display:flex;gap:10px;align-items:center}
.cust-h{display:flex;gap:10px;align-items:center}
.cust-h a.btn{text-decoration:none}
.pd-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.crumb{display:flex;gap:6px;align-items:center;font-size:12.5px;font-weight:800;color:var(--muted);flex-wrap:wrap}
.crumb span:last-child{background:var(--pri-soft);color:var(--pri2);border-radius:20px;padding:2px 10px}
.crumb i{font-style:normal;opacity:.6}
.pd-tags{display:flex;gap:6px;align-items:center;margin:2px 0 14px;flex-wrap:wrap}
.tag{background:#eef0f3;border-radius:8px;padding:2px 9px;font-size:12px;color:var(--ink2)}
.pd-desc{background:#fafbfc;border:1.5px dashed var(--line);border-radius:12px;padding:10px 14px}
.pd-desc h4{margin:0 0 4px;font-size:12.5px;color:var(--muted);font-weight:900}
.pd-desc p{margin:0;font-size:13.5px;color:#374151;white-space:pre-line}
.pd h2{font-size:clamp(18px,1.8vw,22px)!important}
.pd .gimg{min-height:0!important}
.chips.sub{margin-top:-8px}
.chips.sub .chip{font-size:12px;padding:3px 11px;background:#f6f8fa}
.chips.sub .chip.on{background:var(--pri);border-color:var(--pri);color:#fff}
.btn.x{width:auto;height:auto;background:#fff;font-size:inherit;border-radius:10px}
.btn.x:hover{transform:translateY(-2px);background:#fff}
.imgdrop.sm img{width:120px;height:120px;max-height:none;object-fit:cover}
.imp-drop{padding:28px 16px}
.imp-ic{width:52px;height:52px;border-radius:16px;background:var(--pri-soft);color:var(--pri2);display:grid;place-items:center;margin:0 auto 8px;font-size:24px}
.imp-file{display:flex;gap:12px;align-items:center;background:#f6f8fa;border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:12px}
.imp-file>span{font-size:26px}

/* ===== categories cards ===== */
.cgroup{margin-bottom:22px;animation:rise .5s var(--ease) both}
.cg-h{display:flex;align-items:center;gap:12px;margin-bottom:10px;padding:10px 14px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);border-right:4px solid hsl(var(--h),50%,45%)}
.cg-t{flex:1;min-width:0}.cg-t b{font-size:15.5px;font-weight:900}
.cg-a{display:flex;gap:6px;flex-wrap:wrap}
.cg-sep{font-size:14px;font-weight:900;color:var(--muted);margin:6px 0 10px}
.cc-ic.sm{width:40px;height:40px;margin:0;border-radius:12px;font-size:17px;background:linear-gradient(135deg,hsl(var(--h),55%,58%),hsl(calc(var(--h) + 25),55%,34%));color:#fff;box-shadow:none}
.cc-code{position:absolute;top:12px;right:12px;color:#fff;font-size:12px;background:rgba(0,0,0,.18);border-radius:8px;padding:1px 8px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.cc{overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s;animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0) * 50ms)}
.cc:hover{transform:translateY(-5px);box-shadow:var(--sh2)}
.cc-top{height:70px;position:relative;overflow:hidden;background:linear-gradient(135deg,hsl(var(--h),55%,58%),hsl(calc(var(--h) + 25),55%,34%))}
.cc-top::before,.cc-top::after{content:"";position:absolute;border-radius:50%;background:#fff;opacity:.1;transition:transform .6s var(--ease)}
.cc-top::before{width:170px;height:170px;left:-50px;top:-80px}.cc-top::after{width:90px;height:90px;left:45%;bottom:-55px}
.cc:hover .cc-top::before{transform:scale(1.25)}
.cc-n{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.22);backdrop-filter:blur(6px);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:20px;padding:2px 12px;font-size:12.5px;font-weight:800}
.cc-ic{position:relative;z-index:1;width:46px;height:46px;margin:-23px 14px 0 0;border-radius:14px;background:#fff;display:grid;place-items:center;font-size:20px;font-weight:900;color:hsl(var(--h),50%,34%);box-shadow:0 10px 24px -8px rgba(13,19,33,.35);transition:transform .4s var(--spring)}
.cc:hover .cc-ic{transform:rotate(-8deg) scale(1.06)}
.cc-b{padding:8px 14px 12px;flex:1;display:flex;flex-direction:column;gap:2px}
.cc-nm{font-size:15px;font-weight:900;line-height:1.4}
.cc-ds{color:var(--muted);font-size:12.5px;min-height:22px}
.cc-th{display:flex;align-items:center;margin-top:12px;padding-right:8px;min-height:36px}
.cc-th img,.cc-th span{width:30px;height:30px;border-radius:11px;border:2px solid #fff;object-fit:cover;margin-right:-8px;box-shadow:0 2px 6px rgba(13,19,33,.14);background:#eef0f3;display:grid;place-items:center;font-size:11.5px;font-weight:900;color:var(--muted);transition:transform .25s var(--ease)}
.cc-th img:hover{transform:translateY(-4px);z-index:1}
.cc-f{display:flex;flex-wrap:wrap;gap:6px;padding:9px 12px;border-top:1.5px solid var(--line);background:#fafbfc}
.cc-f .go{flex:1 1 auto}
.cc.add{border:2px dashed #cdd4de;background:transparent;box-shadow:none;align-items:center;justify-content:center;min-height:210px;cursor:pointer;color:var(--muted);font-weight:900;gap:10px}
.cc.add:hover{border-color:var(--pri);color:var(--pri2);background:var(--pri-soft)}
.cc.add i{width:58px;height:58px;border-radius:18px;background:#fff;display:grid;place-items:center;font-size:30px;font-style:normal;box-shadow:var(--sh);transition:transform .4s var(--spring)}
.cc.add:hover i{transform:rotate(90deg)}

/* ===== modal ===== */
.ov{position:fixed;inset:0;background:rgba(10,16,28,.55);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;z-index:50;padding:clamp(16px,5vh,48px) 16px;overflow:auto;animation:fd .25s ease both}
.ov.out{animation:fd .2s ease reverse both}.ov.out .md{animation:mdout .2s ease both}
@keyframes fd{from{opacity:0}}
.md{background:#fff;border-radius:22px;width:100%;max-width:660px;box-shadow:0 30px 70px -10px rgba(0,0,0,.35);animation:mdin .45s var(--spring) both;margin:auto 0}
.md.lg{max-width:960px}
@keyframes mdin{from{transform:translateY(26px) scale(.96);opacity:0}}
@keyframes mdout{to{transform:translateY(16px) scale(.97);opacity:0}}
.md-h{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1.5px solid var(--line);gap:12px}
.md-h h3{margin:0;font-size:16.5px;font-weight:900}
.md-b{padding:18px}
.md-f{padding:12px 18px;border-top:1.5px solid var(--line);display:flex;gap:8px;flex-wrap:wrap;background:#fafbfc;border-radius:0 0 22px 22px}
.x{border:0;background:#eef0f3;width:32px;height:32px;border-radius:11px;cursor:pointer;font-size:20px;font-weight:700;flex-shrink:0;transition:background .2s,transform .3s var(--ease)}
.x:hover{background:#e1e5ea;transform:rotate(90deg)}
.grab{display:none}

/* ===== product detail ===== */
.pd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
/* بصفحة المنتج تظهر الصورة كاملة داخل المربع بدون قص */
.pd .gimg{background:linear-gradient(135deg,#f3f8fc,#dfebf5);aspect-ratio:1/1;align-self:start;margin:20px 20px 20px 0;border-radius:16px;overflow:hidden;position:relative;box-shadow:inset 0 0 0 1px rgba(13,19,33,.06)}
.pd .gimg img{width:100%;height:100%;object-fit:contain;display:block;animation:zoom 1.2s var(--ease) both;position:absolute;inset:0}
@keyframes zoom{from{transform:scale(1.15)}}
.pd .info{padding:28px}
.pd .info>*{animation:rise .5s var(--ease) both}
.pd .info>*:nth-child(2){animation-delay:.06s}.pd .info>*:nth-child(3){animation-delay:.1s}.pd .info>*:nth-child(4){animation-delay:.14s}.pd .info>*:nth-child(5){animation-delay:.18s}.pd .info>*:nth-child(6){animation-delay:.22s}.pd .info>*:nth-child(7){animation-delay:.26s}
.pd h2{margin:10px 0 2px;font-size:clamp(21px,2.2vw,28px);font-weight:900;line-height:1.35}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14.5px;margin:16px 0}
.kv dt{color:var(--muted);font-weight:700}
.kv dd{margin:0;font-weight:800;word-break:break-word}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.qty button{border:0;background:#f3f5f8;width:40px;height:44px;cursor:pointer;font-size:20px;font-weight:800;transition:background .2s}
.qty button:hover{background:var(--pri-soft);color:var(--pri2)}
.qty input{width:56px;border:0;text-align:center;height:44px;outline:none;font-weight:900;font-size:16px}

/* ===== cart ===== */
.cart-fab{position:fixed;bottom:22px;left:22px;background:var(--grad);color:#fff;border:0;border-radius:40px;padding:11px 20px;font-weight:900;cursor:pointer;box-shadow:0 14px 30px -8px rgba(24,120,184,.6);z-index:30;font-size:14.5px;display:flex;align-items:center;gap:8px;transition:transform .3s var(--spring);animation:pop .6s var(--spring) .3s both}
.cart-fab:hover{transform:translateY(-3px) scale(1.04)}
.cart-fab b{background:#fff;color:var(--pri2);border-radius:20px;padding:0 9px;min-width:26px;text-align:center}
.cart-fab.bump{animation:bump .5s var(--spring)}
@keyframes bump{30%{transform:scale(1.18)}}
.ci{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1.5px solid var(--line);animation:rise .35s var(--ease) both}
.ci img{width:60px;height:60px;border-radius:12px;object-fit:cover;flex-shrink:0}
.ci .n{flex:1;min-width:0}
/* info blocks */
.ib{background:#f6f8fa;border:1.5px solid var(--line);border-radius:12px;padding:13px;margin-bottom:12px}
.ib h4{margin:0 0 8px;font-size:13px;color:var(--ink2);font-weight:900}
.check{display:flex;align-items:center;gap:10px;margin:8px 0;cursor:pointer;font-weight:700}
.check input{width:19px;height:19px;accent-color:var(--pri);flex-shrink:0}
.perm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px}

/* ===== invoice ===== */
.inv{background:#fff;padding:clamp(18px,3vw,34px);border-radius:16px;position:relative;overflow:hidden}
.inv::before{content:"";position:absolute;top:0;right:0;left:0;height:6px;background:var(--grad)}
.inv-h{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:6px;margin-bottom:20px;gap:16px;flex-wrap:wrap}
.inv-h .co{font-size:clamp(19px,2vw,24px);font-weight:900;color:var(--pri2)}
.inv-h .ttl{text-align:left;font-size:clamp(22px,2.6vw,30px);font-weight:900}
.inv-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:20px}
.inv-meta .bx{background:#f6f8fa;border-radius:14px;padding:14px 16px;font-size:14px;font-weight:600}
.inv-meta .bx h5{margin:0 0 6px;font-size:12px;color:var(--muted);font-weight:900;letter-spacing:.3px}
.inv table{width:100%;border-collapse:separate;border-spacing:0;margin-bottom:18px}
.inv th{background:var(--ink);color:#fff;padding:11px 12px;font-size:13px;text-align:right;font-weight:800}
.inv th:first-child{border-radius:0 10px 10px 0}.inv th:last-child{border-radius:10px 0 0 10px}
.inv td{padding:11px 12px;font-size:14px}
.inv tbody tr:nth-child(even) td{background:#f8fafb}
.inv tbody tr{animation:rise .4s var(--ease) both;animation-delay:calc(var(--i,0) * 50ms)}
.tot{margin-right:auto;width:min(360px,100%)}
.tot div{display:flex;justify-content:space-between;padding:7px 0;font-size:14.5px;gap:12px}
.tot .g{border-top:2px solid var(--ink);margin-top:6px;padding-top:12px;font-size:20px;font-weight:900;color:var(--pri2)}
.tot .neg{color:var(--bad)}
#print-area{display:none}
@media print{
  @page{size:A4;margin:12mm}
  html,body{background:#fff!important;overflow:visible!important;height:auto!important}
  body>*:not(#print-area),body::before,body::after,html::before,html::after{display:none!important}
  #print-area .inv th{border-radius:0}
  #print-area{display:block}
  #print-area *{animation:none!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #print-area .inv{padding:0;border-radius:0;overflow:visible}
  #print-area .inv::before{display:none}
  #print-area .inv-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* تثبيت شكل الجدول حتى لا تُطبَّق قواعد الجوال على عرض الورقة */
  #print-area table{display:table}
  #print-area thead{display:table-header-group}
  #print-area tbody{display:table-row-group}
  #print-area tr{display:table-row;break-inside:avoid}
  #print-area td{display:table-cell;padding:9px 12px}
  #print-area td::before{display:none}
  #print-area .stamp{position:absolute;left:42%;top:14px;margin:0}
  #print-area .tot{break-inside:avoid}
  .print-doc h2{margin:0;font-size:20px;color:var(--pri2)}
  .print-doc h3{margin:4px 0 0;font-size:15px}
  .print-doc .pd-date{font-size:12px;color:#555;margin-bottom:12px}
  .print-doc table{width:100%;border-collapse:collapse;font-size:12px}
  .print-doc th{text-align:right;background:#0d1321;color:#fff;padding:7px 8px;font-weight:800}
  #print-area .print-doc td{padding:6px 8px}
  .print-doc tbody tr:nth-child(even) td{background:#f4f6f8}
}
.share{display:flex;align-items:center;gap:10px;min-width:190px}
.share-tr{flex:1;height:8px;background:#e9edf2;border-radius:4px;overflow:hidden}
.share-tr i{display:block;height:100%;background:var(--pri);border-radius:4px;transition:width .4s var(--ease)}
.share b{width:48px;text-align:left;font-weight:800}
/* بطاقة بيانات الزبون */
.cust-card{background:#fff;border:1.5px solid var(--line);border-radius:16px;margin-bottom:14px;overflow:hidden}
.cust-top{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(135deg,var(--pri-soft),#f6f8fa);flex-wrap:wrap}
.cust-top .oc-av{width:46px;height:46px;border-radius:14px;font-size:19px;background:#fff;box-shadow:0 2px 6px rgba(13,19,33,.08)}
.cust-id{flex:1;min-width:120px}
.cust-id b{display:block;font-size:16px;font-weight:900;line-height:1.35}
.cust-id span{font-size:12.5px;color:var(--muted);font-weight:700}
.cust-acts{display:flex;gap:6px;flex-wrap:wrap}
.call-btn{display:inline-flex;align-items:center;gap:5px;background:#fff;color:var(--ink2);border:1.5px solid var(--line);border-radius:9px;padding:3px 10px;font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap}
.call-btn:hover{border-color:var(--pri);color:var(--pri2)}
.call-btn svg.i{width:15px;height:15px}
.cust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border-top:1.5px solid var(--line)}
.cust-grid>div{background:#fff;padding:10px 16px;min-width:0}
.cust-grid span{display:block;font-size:12px;color:var(--muted);font-weight:700;margin-bottom:2px}
.cust-grid b{display:block;font-size:14px;font-weight:800;word-break:break-word}
.cust-grid b.mono{font-size:13px}
.phone-cell{display:flex;align-items:center;gap:8px}
.wa-btn{display:inline-flex;align-items:center;gap:5px;background:#25d366;color:#fff;border-radius:9px;padding:4px 10px;font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap;transition:background .2s}
.wa-btn:hover{background:#1ebe5a}
.wa-btn svg.i{width:15px;height:15px}
.link-btn{background:none;border:0;padding:0;margin-top:12px;color:var(--pri2);font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;display:block;width:100%;text-align:center}
.link-btn:hover{text-decoration:underline}
.inv-note{background:var(--warn-soft);border-radius:12px;padding:12px 16px;font-size:14px;margin-top:12px;border-right:4px solid var(--acc)}
.stamp{position:absolute;left:42%;top:40px;border:3px solid currentColor;border-radius:12px;padding:4px 14px;font-weight:900;font-size:20px;transform:rotate(-12deg);opacity:.75;animation:stamp .6s var(--spring) .3s both}
@keyframes stamp{from{transform:rotate(-12deg) scale(2.2);opacity:0}}
/* bars */
.bar{display:flex;align-items:center;gap:10px;margin:10px 0;font-size:14px}
.bar .lb{width:150px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}
.bar .tr{flex:1;height:12px;background:#e9edf2;border-radius:8px;overflow:hidden;min-width:40px}
.bar .fl{height:100%;background:var(--grad);border-radius:8px;transform-origin:right;animation:grow 1s var(--ease) both;animation-delay:calc(var(--i,0) * 60ms + .2s)}
@keyframes grow{from{transform:scaleX(0)}}
.bar .vl{width:74px;text-align:left;font-weight:900}
.rank{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#eef0f3;font-weight:900;font-size:13px}
.rank.r1{background:linear-gradient(135deg,#fde68a,#f59e0b);color:#78350f}.rank.r2{background:linear-gradient(135deg,#f1f5f9,#cbd5e1)}.rank.r3{background:linear-gradient(135deg,#fed7aa,#ea8a4a);color:#7c2d12}
.thumb{width:36px;height:36px;border-radius:10px;object-fit:cover;vertical-align:middle;flex-shrink:0}
.imgdrop{border:2px dashed #cdd4de;border-radius:16px;padding:16px;text-align:center;cursor:pointer;color:var(--muted);position:relative;transition:border-color .2s,background .2s;font-weight:800}
.imgdrop:hover,.imgdrop.over{border-color:var(--pri);background:var(--pri-soft)}
.imgdrop img{max-width:100%;max-height:200px;border-radius:12px;display:block;margin:0 auto 10px;animation:pop .4s var(--spring)}
.imgdrop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.qe td .in{padding:7px 10px;min-height:40px}
.toast{position:fixed;top:22px;left:50%;background:var(--ink);color:#fff;padding:13px 22px;border-radius:14px;z-index:99;font-weight:800;box-shadow:0 14px 34px rgba(0,0,0,.3);animation:tin .45s var(--spring) both;display:flex;gap:10px;align-items:center;max-width:calc(100vw - 32px)}
.toast::before{content:"✓";width:22px;height:22px;border-radius:50%;background:var(--pri);display:grid;place-items:center;font-size:13px;flex-shrink:0}
.toast.out{animation:tout .3s ease both}
.toast.err::before{content:"!";background:var(--bad)}
body.busy{cursor:progress}
body.busy .btn.pri,body.busy .md-f .btn,body.busy form .btn{pointer-events:none;opacity:.65}
@keyframes tin{from{transform:translate(-50%,-30px);opacity:0}to{transform:translate(-50%,0)}}
@keyframes tout{from{transform:translate(-50%,0)}to{transform:translate(-50%,-20px);opacity:0}}
.alert{background:var(--warn-soft);color:#7c3a06;border-radius:12px;padding:12px 16px;font-size:14px;margin-bottom:16px;font-weight:800;border-right:4px solid var(--acc)}
.alert.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.mbar{display:none}

/* ===== large screens ===== */
@media (min-width:1700px){body{font-size:15px}.app{grid-template-columns:260px minmax(0,1fr)}}

/* ===== laptop / tablet ===== */
@media (max-width:1200px){
  .app{grid-template-columns:84px minmax(0,1fr)}
  .side{padding:16px 10px;align-items:center}
  .brand{padding:4px 0 18px;justify-content:center}.brand span{display:none}
  .nav .ni{justify-content:center;padding:13px;width:56px}
  .nav .ni .lb{display:none}
  .nav .ni:hover{transform:none}
  .nav .cnt{position:absolute;top:4px;left:4px;margin:0;font-size:10px;padding:0 6px;min-width:18px}
  .nav .ni.on::after{right:-10px}
  .nav .ni[data-tip]:hover::before{content:attr(data-tip);position:absolute;right:calc(100% + 12px);background:var(--ink);color:#fff;padding:6px 12px;border-radius:8px;white-space:nowrap;font-size:13px;z-index:5;animation:rise .2s ease both;pointer-events:none}
  .me{flex-direction:column;padding:14px 0 0}.me .nm{display:none}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .row{flex-direction:column}
  .auth{grid-template-columns:1fr}
  .auth-side{padding:28px 24px 34px;min-height:auto}
  .auth-side ul{display:none}
  .auth-side h1{font-size:28px}.auth-side .logo{width:120px;padding:8px;border-radius:16px;margin-bottom:16px}
  .pd{grid-template-columns:1fr}
  .pd .gimg{min-height:0;margin:14px 14px 0}
}

/* ===== phones ===== */
@media (max-width:720px){
  body{font-size:15px}
  .app{grid-template-columns:minmax(0,1fr);padding-bottom:calc(76px + var(--safe-b))}
  .side{position:sticky;top:0;z-index:40;height:auto;flex-direction:row;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--side)}
  .brand{padding:0;font-size:15px}.brand span{display:inline;max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brand i{width:36px;height:36px;border-radius:11px}
  .me{margin:0;border:0;padding:0;flex-direction:row}.me .av{display:none}.me .lo{width:38px;height:38px}
  .nav{position:fixed;bottom:0;right:0;left:0;z-index:45;flex-direction:row;gap:0;background:rgba(255,255,255,.97);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 6px calc(6px + var(--safe-b));overflow-x:auto;scrollbar-width:none;box-shadow:0 -8px 24px rgba(13,19,33,.08)}
  .nav::-webkit-scrollbar{display:none}
  .nav .ni{flex:1 0 auto;min-width:64px;width:auto;flex-direction:column;gap:2px;padding:7px 6px;color:var(--muted);font-size:11px;border-radius:12px}
  .nav .ni .lb{display:none}.nav .ni .lb-s{display:block;font-weight:800;white-space:nowrap}
  .nav .ni svg.i{width:22px;height:22px}
  .nav .ni.on{background:transparent;color:var(--pri2);box-shadow:none}
  .nav .ni.on svg.i{animation:pop .4s var(--spring)}
  .nav .ni.on::after{right:30%;left:30%;top:0;bottom:auto;width:auto;height:3px;border-radius:0 0 4px 4px;background:var(--pri)}
  .nav .ni[data-tip]:hover::before{display:none}
  .nav .cnt{top:2px;left:auto;right:calc(50% - 22px)}
  .main{padding:16px 14px}
  .top{align-items:stretch;flex-direction:column;gap:12px;margin-bottom:16px}
  .top .acts{width:100%}.top .acts .in{flex:1;width:auto!important;min-width:0}
  .top .acts .btn.pri{flex:1}
  .filters{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .filters .in{min-width:0;width:100%;max-width:none}
  .filters .in:first-child{grid-column:1/-1;max-width:none}
  .kpis{gap:10px}.kpi{padding:14px}
  .kpi::after{width:80px;height:80px}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pc .body{padding:10px 12px}.pc .nm{font-size:14px}.pc .img::after{display:none}
  .pc .cat{font-size:10.5px;padding:3px 8px;top:8px;right:8px}
  .grid2,.grid3,.inv-meta,.perm-grid{grid-template-columns:1fr}
  .bar .lb{width:96px}
  /* tables → cards */
  .card.tw{background:transparent;border:0;box-shadow:none;overflow:visible}
  .t thead{display:none}
  .t,.t tbody{display:block}
  .t tr{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:10px;padding:6px 14px;box-shadow:var(--sh)}
  .t tr.click:active{transform:scale(.985)}
  .t td{white-space:normal;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line);text-align:left;min-height:38px}
  .t td::before{content:attr(data-label);color:var(--muted);font-weight:800;font-size:12.5px;text-align:right;flex-shrink:0}
  .t td[data-label=""]::before{display:none}
  .t td:last-child{border-bottom:0}
  .t td.empty{display:block;text-align:center}
  .t tr.click:hover td{background:transparent}.t tr.click:hover td:first-child{box-shadow:none}
  .t td .bar{flex:1;max-width:60%}
  .qe td .in{max-width:150px}
  .inv table thead{display:none}
  .inv table,.inv tbody{display:block}
  .inv tr{display:block;border:1.5px solid var(--line);border-radius:12px;margin-bottom:8px;padding:4px 12px}
  .inv td{display:flex;justify-content:space-between;padding:6px 0}
  .inv tbody tr:nth-child(even) td{background:transparent}
  .inv td::before{content:attr(data-label);color:var(--muted);font-weight:800;font-size:12.5px}
  .inv td[data-label="#"]{display:none}
  .stamp{position:static;display:inline-block;margin-top:14px}
  /* modal → bottom sheet */
  .ov{padding:0;align-items:flex-end}
  .md,.md.lg{max-width:none;border-radius:24px 24px 0 0;max-height:94vh;max-height:94dvh;overflow:auto;animation:sheet .45s var(--ease) both;margin:0}
  .ov.out .md{animation:sheetout .25s ease both}
  @keyframes sheet{from{transform:translateY(100%)}}
  @keyframes sheetout{to{transform:translateY(100%)}}
  .grab{display:block;width:44px;height:5px;border-radius:5px;background:#d3d9e1;margin:8px auto 0}
  .md-h{position:sticky;top:0;background:#fff;z-index:2;padding:12px 18px}
  .md-b{padding:16px 18px}
  .md-f{position:sticky;bottom:0;padding:12px 18px calc(12px + var(--safe-b));border-radius:0;z-index:2}
  .md-f .btn{flex:1}
  .pd .info{padding:18px}
  .pd .info>*:first-child{animation:none}
  .pd .info .x{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.9);z-index:3}
  .pd{position:relative}
  .cart-fab{bottom:calc(86px + var(--safe-b));left:14px;padding:13px 18px;font-size:15px}
  .toast{top:auto;bottom:calc(92px + var(--safe-b))}
  @keyframes tin{from{transform:translate(-50%,30px);opacity:0}to{transform:translate(-50%,0)}}
  .demo button{padding:8px 12px}
}
@media (max-width:980px) and (min-width:721px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* جداول تبقى جداول على الجوال (المستخدمين، الفروع) مع سحب أفقي */
@media (max-width:720px){
  .card.tw.keep{background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);overflow-x:auto;-webkit-overflow-scrolling:touch}
  .t.keep{display:table;min-width:680px}
  .t.keep thead{display:table-header-group}
  .t.keep tbody{display:table-row-group}
  .t.keep tr{display:table-row;background:none;border:0;border-radius:0;margin:0;padding:0;box-shadow:none}
  .t.keep td{display:table-cell;white-space:nowrap;padding:11px 14px;border-bottom:1px solid var(--line);text-align:right;min-height:0}
  .t.keep td::before{display:none}
  .t.keep tr:last-child td{border-bottom:0}
  .t.keep td.empty{display:table-cell;text-align:center}
  .t.keep tr.click:hover td{background:#f1f7fc}
  .cgrid{gap:12px}
  .cc.add{min-height:120px}
  .tiles{grid-template-columns:1fr 1fr}
  .cg-h{flex-wrap:wrap}.cg-a{width:100%}
  .grid3 [style*="span 2"]{grid-column:auto!important}
}
@media (max-width:380px){
  .pgrid{grid-template-columns:1fr 1fr;gap:8px}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi .v{font-size:20px}
  .filters{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}
.nav .ni{text-decoration:none}

/* ===== هوية العمرانية: الأزرق من الشعار، خلفيات هادئة، حدود وظلال أخف ===== */
body{background:#f3f6fa}
body::before{background:radial-gradient(900px 500px at 100% -10%,rgba(24,120,184,.09),transparent 60%),radial-gradient(700px 500px at -10% 110%,rgba(24,120,184,.05),transparent 60%)}
.card{border-color:#e7ecf2;border-radius:16px;box-shadow:0 1px 2px rgba(12,38,66,.04),0 10px 26px -18px rgba(12,38,66,.18)}
.top h2{letter-spacing:0;color:#0f2a43}
.main{margin-inline:auto}

/* القائمة */
.side{background:linear-gradient(180deg,#0f2a43 0%,#0a1c2e 100%);color:#b4c3d3}
.brand{font-size:14px;align-items:center}
.brand i{width:46px;height:46px;background:#fff;border-radius:12px;padding:3px;box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.brand i img{display:block;width:100%;height:100%;object-fit:contain}
.nav .ni:hover{background:rgba(255,255,255,.07);transform:none}
.nav .ni.on{box-shadow:0 8px 18px -10px rgba(42,147,213,.9)}
.nav .ni.on::after{display:none}
.nav .cnt{animation:none;background:#e5484d}
.me{border-top-color:rgba(255,255,255,.1)}
.me .av,.me .lo{background:rgba(255,255,255,.09)}
.me .lo:hover{background:rgba(255,255,255,.18)}
.me #lo:hover{background:var(--bad)}

/* الأزرار والحقول */
.btn{border-color:#dde3ea;box-shadow:0 1px 1px rgba(12,38,66,.04)}
.btn:hover{transform:none;box-shadow:0 4px 12px -6px rgba(12,38,66,.25);border-color:#c5cfda}
.btn.pri{background:var(--pri);box-shadow:none}
.btn.pri:hover{background:var(--pri2);box-shadow:0 8px 18px -10px rgba(24,120,184,.9)}
.btn svg.i{width:16px;height:16px}
.btn.x:hover{transform:none}
.in,select.in,textarea.in{border-color:#dbe1e8}
.chip{border-color:#e1e6ec}
.chip.on{background:var(--pri);border-color:var(--pri);transform:none}
.stab.on{background:var(--pri)}
.tabs{background:#e6ebf1}

/* الجداول */
.t th{background:#f8fafc;color:#6b7788;font-size:11.5px;border-bottom:1px solid #e7ecf2}
.t td{border-bottom-color:#eff2f6}
.t tr.click:hover td:first-child{box-shadow:none}
.badge{font-weight:700}

/* البطاقات */
.kpi{padding:16px 18px}
.kpi::after{display:none}
.kpi:hover{transform:none;box-shadow:0 1px 2px rgba(12,38,66,.04),0 14px 30px -18px rgba(12,38,66,.28)}
.kpi .v{color:#0f2a43}
.pc:hover,.cc:hover,.oc:hover{transform:translateY(-3px);box-shadow:0 18px 34px -20px rgba(12,38,66,.35)}
.oc:hover{border-color:#cfe0ee}
.ib,.tile,.stp{border-width:1px;border-color:#e7ecf2}
.kv{grid-template-columns:120px 1fr}

/* النوافذ وعرض السعر */
.ov{background:rgba(10,28,46,.5)}
.md{border-radius:18px}
.md-f{border-radius:0 0 18px 18px;border-top-width:1px}
.md-h{border-bottom-width:1px}
.inv th{background:#0f2a43}
.inv-h .co{color:var(--pri2)}
.cart-fab{box-shadow:0 14px 30px -10px rgba(24,120,184,.7)}
.auth-side .blob.b2{background:#fff;opacity:.14}

/* شريط مشاهدة كيوزر */
.viewas{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;background:#0f2a43;color:#fff;padding:8px 10px 8px 16px;border-radius:40px;box-shadow:0 16px 36px -12px rgba(10,28,46,.7);font-size:13px;white-space:nowrap;max-width:calc(100vw - 24px)}
.viewas svg.i{width:17px;height:17px;color:#7cc4f2}
.viewas span{overflow:hidden;text-overflow:ellipsis}
.viewas button{border:0;background:#fff;color:#0f2a43;border-radius:30px;padding:5px 13px;font-weight:800;font-size:12.5px;cursor:pointer;flex-shrink:0}

/* القائمة الأفقية (على الجوال تبقى القائمة السفلية) */
@media (min-width:721px){
  html[data-layout="h"] .app{display:block}
  html[data-layout="h"] .side{position:sticky;top:0;z-index:40;height:auto;overflow:visible;flex-direction:row;align-items:center;gap:14px;padding:8px 16px}
  html[data-layout="h"] .brand{padding:0;flex-shrink:0;justify-content:flex-start}
  html[data-layout="h"] .brand span{display:none}
  html[data-layout="h"] .brand i{width:42px;height:42px}
  html[data-layout="h"] .nav{flex:1;min-width:0;flex-direction:row;flex-wrap:wrap;gap:2px}
  html[data-layout="h"] .nav .ni{width:auto;flex:0 0 auto;justify-content:center;gap:6px;padding:7px 10px;font-size:12.5px}
  html[data-layout="h"] .nav .ni svg.i{width:17px;height:17px}
  html[data-layout="h"] .nav .ni .lb{display:none}
  html[data-layout="h"] .nav .ni .lb-s{display:inline}
  html[data-layout="h"] .nav .ni[data-tip]:hover::before{display:none}
  html[data-layout="h"] .nav .cnt{position:static;margin:0;font-size:10.5px;padding:0 6px;min-width:18px}
  html[data-layout="h"] .me{flex-direction:row;flex-shrink:0;margin:0;padding:0;border:0}
  html[data-layout="h"] .me .nm{display:none}
  html[data-layout="h"] .main{padding-top:20px}
}
@media (max-width:720px){
  .lay-btn{display:none}
  .brand i{width:38px;height:38px;border-radius:10px;padding:2px}
  .viewas{bottom:calc(84px + var(--safe-b));font-size:12px}
  .cart-fab{bottom:calc(136px + var(--safe-b))}
}

/* خانات المنتج المخصصة */
.xf{margin-top:6px;padding:12px 14px;background:#f8fafc;border:1px solid #e7ecf2;border-radius:12px}
.xf-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.xf-add{display:flex;gap:6px}
.xf-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto;gap:8px;align-items:start;padding:8px 0;border-top:1px solid #e7ecf2}
.xf-row textarea.in{min-height:80px}
.xf-acts{display:flex;align-items:center;gap:4px;min-height:38px}
.xf-lbl{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.xf-lbl>span:first-child{font-size:12.5px;font-weight:800;color:var(--ink2)}
.eye-t{display:inline-flex;align-items:center;gap:5px;border:1.5px solid #bfe0c9;background:var(--ok-soft);color:var(--ok);border-radius:8px;padding:3px 9px;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap}
.eye-t.off{border-color:#dde3ea;background:#eef0f3;color:#5b6474}
.eye-t svg.i{width:15px;height:15px}
.hid-mark{display:inline-block;background:#eef0f3;color:#5b6474;border-radius:6px;padding:0 7px;font-size:11px;font-weight:800;margin-right:4px}
.pd-desc{margin-top:10px}
.pd-desc p{line-height:1.8}
@media (max-width:720px){.xf-row{grid-template-columns:1fr}}

/* الشريط المتحرك في رئيسية الزبون */
.hero{background:radial-gradient(520px 220px at 90% -40%,rgba(93,183,238,.34),transparent 70%),linear-gradient(120deg,#0c2338 0%,#10456e 100%);border-radius:18px;padding:14px 16px 13px;margin-bottom:22px;color:#fff;box-shadow:0 18px 40px -26px rgba(12,38,66,.8)}
.hero-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:9px}
.hero-t{display:flex;align-items:center;gap:10px;min-width:0}
.hero-ic{width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.12);display:grid;place-items:center;flex-shrink:0;font-style:normal}
.hero-ic svg{width:19px;height:19px}
.hero-h h3{margin:0;font-size:16.5px;font-weight:900;line-height:1.3}
.hero-t span{display:block;font-size:12px;opacity:.78;font-weight:600}
.hero-nav{display:flex;align-items:center;gap:6px;flex-shrink:0}
.hero-nav button{width:32px;height:32px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.hero-nav button:hover{background:rgba(255,255,255,.2)}
.hero-nav svg,.hc-go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hero-track{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 36px)/4);gap:12px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:3px 0}
.hero-track::-webkit-scrollbar{display:none}
.hc{scroll-snap-align:start;background:#fff;color:var(--ink);border-radius:14px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s}
.hc:hover{transform:translateY(-3px);box-shadow:0 14px 26px -14px rgba(0,0,0,.6)}
.hc-img{height:118px;position:relative;overflow:hidden;background:linear-gradient(135deg,#f3f8fc,#dfebf5)}
.hc-img img{display:block;width:100%;height:100%;object-fit:contain;padding:7px;box-sizing:border-box;transition:transform .7s var(--ease)}
.hc:hover .hc-img img{transform:scale(1.06)}
.hc-rank{position:absolute;top:8px;right:8px;min-width:24px;height:24px;border-radius:8px;background:#0f2a43;color:#fff;display:grid;place-items:center;font-weight:900;font-size:12px}
.hc-b{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px 10px;min-width:0;flex:1}
.hc-t{min-width:0}
.hc-t b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;font-weight:900;line-height:1.35}
.hc-t span{display:block;font-size:11.5px;color:var(--muted);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-go{width:26px;height:26px;border-radius:8px;background:#eef4f9;color:var(--pri2);display:grid;place-items:center;flex-shrink:0;transition:background .2s,color .2s}
.hc:hover .hc-go{background:var(--pri);color:#fff}
.hero-dots{display:flex;align-items:center;gap:5px;margin-left:6px}
.hero-dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.32);cursor:pointer;transition:width .3s var(--ease),background .3s}
.hero-dots i.on{width:16px;background:#fff}
.hero-dots i[hidden]{display:none}
@media (max-width:980px){.hero-track{grid-auto-columns:calc((100% - 24px)/3)}}
@media (max-width:720px){.hero{padding:12px 12px 11px;border-radius:16px}.hero-track{grid-auto-columns:62%;gap:10px}.hero-t span{display:none}.hero-nav button{display:none}.hero-dots{margin:0}.hc-img{height:104px}}

/* إصلاحات بعد مراجعة الصفحات */
.t td,.t th{padding-inline:11px}
.me{flex-wrap:wrap}
.me .nm{flex:1 1 calc(100% - 46px);min-width:0}
@media (max-width:1200px){.me{flex-wrap:nowrap}}
@media (max-width:720px){.me .nm{display:none}}

/* الطلبيات حسب اليوم */
.oday{margin-bottom:22px}
.oday h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:15px;font-weight:900;color:#0f2a43}
.oday h3 span{font-size:11.5px;font-weight:800;color:var(--muted);background:#e9eef4;border-radius:20px;padding:1px 9px}
.oc-items{list-style:none;margin:0;padding:8px 10px;background:#f6f8fb;border-radius:10px;display:grid;gap:3px;font-size:12.5px}
.oc-items li{display:flex;justify-content:space-between;gap:10px}
.oc-items li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-items li b{white-space:nowrap;font-weight:800}

/* أسماء الشركات والعناوين */
.co-t tbody tr{animation:none}
.co-t td{white-space:normal}
.co-t td:first-child{min-width:190px}
.co-visit{display:inline-flex;align-items:center;gap:6px;border:1.5px solid #dde3ea;background:#fff;color:var(--muted);border-radius:9px;padding:4px 9px 4px 10px;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap;transition:all .2s}
.co-visit i{width:17px;height:17px;border-radius:5px;border:1.5px solid #c5cfda;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:900;color:#fff}
.co-visit:hover{border-color:var(--ok)}
.co-visit.on{background:var(--ok-soft);border-color:#a9d9b9;color:var(--ok)}
.co-visit.on i{background:var(--ok);border-color:var(--ok)}
.co-rate{display:inline-flex;border:1.5px solid #dde3ea;border-radius:9px;overflow:hidden;background:#fff}
.co-rate button{border:0;background:transparent;color:var(--muted);padding:4px 8px;font-size:11.5px;font-weight:800;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.co-rate button+button{border-right:1px solid #e7ecf2}
.co-rate button:hover{background:#f3f6fa}
.co-rate .r-good.on{background:var(--ok);color:#fff}
.co-rate .r-normal.on{background:var(--acc);color:#fff}
.co-rate .r-bad.on{background:var(--bad);color:#fff}
.co-note{max-width:170px;font-size:12.5px}
.co-note span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.phone-cell .wa-btn:only-of-type{padding:4px 7px}

/* لوحة الشركات */
.cd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:14px;margin-bottom:16px}
.cd-card h3{margin:0 0 14px;font-size:15px;font-weight:900;color:#0f2a43}
.donut-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.donut{position:relative;width:150px;height:150px;flex-shrink:0;margin-inline:auto}
.donut svg{display:block;width:100%;height:100%}
.dseg{fill:none;stroke-width:17;cursor:pointer;transition:opacity .2s,stroke-width .2s;outline:none}
.dseg:hover,.dseg:focus-visible{stroke-width:21}
.dseg.dim{opacity:.25}
.donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;line-height:1.2}
.donut-c b{font-size:27px;font-weight:900;color:#0f2a43}
.donut-c span{font-size:12px;color:var(--muted);font-weight:700}
.dleg{flex:1;min-width:150px;display:grid;gap:2px}
.dleg button{display:grid;grid-template-columns:10px 1fr auto 38px;align-items:center;gap:8px;border:0;background:transparent;padding:5px 7px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:700;color:var(--ink2);text-align:right;transition:background .2s,opacity .2s}
.dleg button:hover{background:#f3f6fa}
.dleg button.on{background:var(--pri-soft)}
.dleg button.dim{opacity:.45}
.dleg i{width:10px;height:10px;border-radius:3px}
.dleg b{font-weight:900;font-variant-numeric:tabular-nums}
.dleg em{font-style:normal;color:var(--muted);font-size:12px;text-align:left;font-variant-numeric:tabular-nums}
.meter-hero{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.meter-hero b{font-size:48px;font-weight:900;line-height:1;color:#0f2a43}
.meter-hero span{font-size:13px;color:var(--muted);font-weight:700}
.meter{height:10px;background:#e3e8ee;border-radius:5px;overflow:hidden;margin-bottom:14px}
.meter i{display:block;height:100%;background:var(--pri);border-radius:5px;transition:width .4s var(--ease)}
.rbars{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:2px 28px}
.rb{display:grid;grid-template-columns:96px 1fr 34px;align-items:center;gap:10px;border:0;background:transparent;padding:6px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:700;color:var(--ink2);text-align:right;transition:background .2s,opacity .2s}
.rb:hover{background:#f3f6fa}
.rb.on{background:var(--pri-soft)}
.rb.dim{opacity:.45}
.rb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rb-tr{height:8px;background:#eef1f5;border-radius:4px;overflow:hidden}
.rb-tr i{display:block;height:100%;background:var(--pri);border-radius:4px;transition:width .4s var(--ease)}
.rb b{text-align:left;font-weight:900;font-variant-numeric:tabular-nums}
.viz-tip{position:fixed;transform:translate(-50%,-100%);background:#0f2a43;color:#fff;padding:5px 11px;border-radius:8px;font-size:12.5px;font-weight:700;white-space:nowrap;pointer-events:none;z-index:70;box-shadow:0 8px 20px -8px rgba(10,28,46,.7)}
.cd-t td{white-space:normal}
.cd-t td:first-child{min-width:200px}
.cd-t .share{min-width:120px}
.cd-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cd-acts .in{width:190px}
a.btn{text-decoration:none}
.rt-good{background:var(--ok-soft);color:var(--ok)}
.rt-normal{background:var(--warn-soft);color:var(--warn)}
.rt-bad{background:var(--bad-soft);color:var(--bad)}
@media (max-width:720px){.rbars{grid-template-columns:1fr}.cd-acts .in{width:100%}.donut-row{justify-content:center}}

/* لا تعاد حركة الدخول عند إعادة الرسم بعد فلتر */
.still>*,.still .t tbody tr,.still .pc,.still .oc{animation:none!important}
.donut{width:132px;height:132px}
.donut-c b{font-size:24px}
.dleg span{white-space:nowrap}
.co-note span.muted{white-space:nowrap}

/* جدول الصلاحيات */
.perm-t{width:100%;border-collapse:collapse;font-size:13px}
.perm-t th{font-size:11.5px;color:var(--muted);font-weight:800;padding:6px 8px;text-align:center;border-bottom:1px solid #e7ecf2}
.perm-t th:first-child,.perm-t td:first-child{text-align:right}
.perm-t td{padding:5px 8px;text-align:center;border-bottom:1px solid #eff2f6}
.perm-t tr:last-child td{border-bottom:0}
.perm-t input{width:18px;height:18px;accent-color:var(--pri);cursor:pointer;vertical-align:middle}
.perm-t b{font-weight:700;white-space:nowrap}
.pf-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.pf-h h4{margin:0}
.pf-copy{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;color:var(--ink2)}
.pf-copy .in{width:180px;min-height:32px;padding-block:3px}
.pc-list{max-height:220px;overflow:auto;border:1px solid #e7ecf2;border-radius:10px;padding:4px 12px}
.xf-title{display:block;font-size:12.5px;font-weight:800;margin-bottom:4px;color:var(--ink2)}
.stab svg.i{width:16px;height:16px}

/* رابط وصفحة دخول الإدارة */
.admin-link{display:flex;align-items:center;gap:12px;margin-top:22px;padding:11px 14px;border:1.5px solid #e1e7ee;border-radius:14px;background:#fff;color:#0f2a43;text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.admin-link:hover{border-color:var(--pri);box-shadow:0 10px 22px -14px rgba(24,120,184,.8);transform:translateY(-1px)}
.admin-link>i{width:38px;height:38px;border-radius:11px;background:#0f2a43;color:#fff;display:grid;place-items:center;flex-shrink:0}
.admin-link svg.i{width:18px;height:18px}
.admin-link span{flex:1;min-width:0;line-height:1.35}
.admin-link b{display:block;font-size:14px;font-weight:900}
.admin-link em{font-style:normal;font-size:12px;color:var(--muted);font-weight:700}
.admin-link u{text-decoration:none;font-size:20px;color:var(--pri);line-height:1}
.auth.adm .auth-side{background:linear-gradient(145deg,#0f2a43 0%,#0a1c2e 100%)}
.auth.adm .auth-side .blob{opacity:.07}
.adm-tag{display:inline-flex;align-items:center;gap:6px;background:#0f2a43;color:#fff;border-radius:20px;padding:4px 12px;font-size:12px;font-weight:800;margin-bottom:12px}
.adm-tag svg.i{width:14px;height:14px}

/* التحديد المتعدد */
.pick{position:absolute;top:8px;left:8px;z-index:2;width:28px;height:28px;display:grid;place-items:center;background:rgba(255,255,255,.94);border-radius:8px;box-shadow:0 2px 6px rgba(13,19,33,.25);cursor:pointer}
.pick input{width:17px;height:17px;accent-color:var(--pri);cursor:pointer;margin:0}
.pc.picked,.cc.picked{outline:2.5px solid var(--pri);outline-offset:-1px}
.cg-h.picked{border-color:var(--pri)}
.cg-pick{width:18px;height:18px;accent-color:var(--pri);flex-shrink:0;cursor:pointer}
.t input[data-pick]{width:17px;height:17px;accent-color:var(--pri);cursor:pointer}
.bulk-bar{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:45;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;background:#0f2a43;color:#fff;padding:9px 14px;border-radius:16px;box-shadow:0 18px 40px -14px rgba(10,28,46,.75);max-width:calc(100vw - 24px)}
.bulk-bar b{font-size:13px;font-weight:800;margin-left:4px;white-space:nowrap}
.bulk-bar .btn.ghost{color:#cfe0ee}
.bulk-bar .btn.ghost:hover{color:#fff;background:rgba(255,255,255,.1);box-shadow:none}
.main>.bulk-bar{animation:none}
.cat-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0 12px;max-height:150px;overflow:auto}
.cat-picks.tall{max-height:300px;border:1px solid #e7ecf2;border-radius:10px;padding:4px 12px}
.cat-picks .check{margin:5px 0;font-size:13px}
@media (max-width:720px){.bulk-bar{bottom:calc(84px + var(--safe-b))}}

/* ملاحظات الشركات: بطاقة صفراء واضحة */
.co-note{max-width:190px}
.note-chip{display:block;width:100%;text-align:right;border:1.5px dashed #cfd7e1;background:#fff;color:var(--muted);border-radius:9px;padding:5px 9px;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap;transition:all .2s}
.note-chip:hover{border-color:var(--acc);color:#7c3a06;background:#fff8ea}
.note-chip.has{border:0;border-right:3px solid var(--acc);background:#fff4d6;color:#5f3f06;font-weight:700;white-space:normal;line-height:1.55;box-shadow:0 2px 6px -3px rgba(124,58,6,.35)}
.note-chip span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.note-co{margin-bottom:12px;line-height:1.4}
.note-co b{display:block;font-size:15px;font-weight:900;color:#0f2a43}
.note-co span{font-size:12.5px;color:var(--muted);font-weight:700}
.note-field{display:block;background:#fff8e6;border:1.5px solid #f4dfa8;border-right:4px solid var(--acc);border-radius:12px;padding:10px 12px;margin-bottom:6px;transition:border-color .2s,box-shadow .2s}
.note-field:focus-within{border-color:var(--acc);box-shadow:0 0 0 4px rgba(245,158,11,.14)}
.note-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.note-head b{font-size:13px;font-weight:900;color:#5f3f06}
.note-head em{font-style:normal;font-size:11.5px;font-weight:800;color:#8a6417}
.note-field textarea{display:block;width:100%;min-height:130px;border:0;outline:0;background:transparent;resize:vertical;font-size:14px;font-weight:600;line-height:1.8;color:#3f2b05}
.note-field textarea::placeholder{color:#a98a4a}

/* ===== التوافق مع كل الأجهزة ===== */
/* iPhone: القص الجانبي بالوضع الأفقي */
body{padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0)}
/* لا يتجاوز أي عنصر عرض شاشته */
img,svg,video{max-width:100%}
.cd-grid{grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr))}
.rbars{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
/* عند تكديس الأعمدة تأخذ كل كتلة عرض الشاشة كاملاً */
@media (max-width:980px){.row{align-items:stretch!important}}
@media (max-width:720px){
  .share{min-width:110px}
  .t td .share{flex:1;min-width:0;max-width:62%}
  /* iPhone يكبّر الصفحة إذا كان خط الخانة أقل من 16px */
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px}
  .top .acts .btn{flex:1 1 auto}
  .sec-h{flex-wrap:wrap}
  .note-field textarea{font-size:16px}
  .hc-b b{font-size:13.5px}
  .stabs{padding:3px}
}
/* أجهزة اللمس: أهداف ضغط مريحة */
@media (pointer:coarse){
  .btn{min-height:40px}
  .btn.sm{min-height:36px}
  .chip,.stab{min-height:38px}
  .co-visit{min-height:36px}
  .co-rate button{padding:8px 10px}
  .note-chip{min-height:36px}
  .wa-btn,.call-btn{min-height:34px}
  .check input,.perm-t input{width:22px;height:22px}
  .pick{width:34px;height:34px}
  .pick input{width:20px;height:20px}
  .dleg button,.rb{min-height:38px}
  .x{width:38px;height:38px}
}
/* تلفون بالوضع الأفقي: مساحة الارتفاع قليلة */
@media (max-height:480px) and (orientation:landscape){
  .auth{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
  .auth-side{padding:18px}
  .auth-side ul,.auth-side p{display:none}
  .auth-side .logo{width:84px;padding:6px;margin-bottom:8px}
  .auth-side h1{font-size:20px;margin:0}
  .auth-main{padding:14px;align-items:flex-start}
  .side{padding-block:8px}
  .brand{padding-bottom:6px}
  .md{margin:0 auto}
}
/* شاشات كبيرة وتلفزيونات: أعمدة أكثر بدل عناصر ضخمة */
@media (min-width:1700px){
  .pgrid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .hero-track{grid-auto-columns:calc((100% - 56px)/5)}
  .ogrid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}
@media (min-width:2200px){
  .main{max-width:2100px}
  .pgrid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .hero-track{grid-auto-columns:calc((100% - 70px)/6)}
}

/* إصلاحات التلفون بعد الفحص بالصور */
@media (max-width:720px){
  /* الشريط العلوي ثابت الارتفاع حتى لو محتوى الصفحة قليل */
  .app{grid-template-rows:auto 1fr}
  /* الشعار والاسم يأخذان المتبقي، وأزرار الحساب تبقى ظاهرة دون سحب */
  .side{overflow:visible;gap:10px}
  .brand{flex:1;min-width:0;font-size:13px}
  .brand span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;flex:1;min-width:0;max-width:none;white-space:normal;line-height:1.3}
  .me{flex-shrink:0}
  .me .lay-btn{display:none}
  /* flex:1 كان يعطي الزر عرضاً صفراً فيُقص بدل أن ينزل لسطر جديد */
  .top .acts .btn.pri{flex:1 1 auto}
  .top .acts .in{flex:1 1 100%}
  /* أزرار الإجراءات داخل البطاقة تنزل لسطر جديد بدل أن تنضغط */
  .t td[style*="text-align:left"]{flex-wrap:wrap;justify-content:flex-end}
  .t td>.btn{flex-shrink:0}
  /* زر السلة فوق القائمة السفلية مباشرة، ويرتفع فقط عند وجود شريط المشاهدة */
  .cart-fab{bottom:calc(86px + var(--safe-b))}
  .viewas~.cart-fab{bottom:calc(136px + var(--safe-b))}
  body:has(.cart-fab) .main{padding-bottom:72px}
}
/* شرائط الأقسام: أسهم وسحب */
.chips-w{position:relative;margin-bottom:18px}
.chips-w.subw{margin-top:-8px}
.chips-w .chips{margin:0}
.chips{cursor:grab}
.chips.drag{cursor:grabbing;user-select:none}
.chips.drag .chip{pointer-events:none}
.chip-arr{position:absolute;top:0;bottom:4px;margin:auto 0;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--pri2);display:grid;place-items:center;cursor:pointer;z-index:2;box-shadow:0 0 0 5px rgba(243,246,250,.92),0 6px 14px -6px rgba(12,38,66,.45);transition:background .2s,color .2s}
.chip-arr:hover{background:var(--pri);color:#fff}
.chip-arr.r{right:0}
.chip-arr.l{left:0}
.chip-arr[hidden]{display:none}
.chip-arr svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* تفاصيل الصنف عند عدم وجود وصف */
.pd-none{margin-top:14px;padding:10px 12px;border-radius:10px;background:#f3f6fa;color:var(--muted);font-size:13px;font-weight:600}

/* المنتجات بدون صور: جدول لكل قسم */
.pv-g{margin-bottom:12px;padding:0;overflow:hidden}
.pv-g summary{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;list-style:none;background:#f6f9fc;font-size:14.5px;font-weight:900;color:#0f2a43}
.pv-g summary::-webkit-details-marker{display:none}
.pv-g summary b{background:var(--pri-soft);color:var(--pri2);border-radius:20px;padding:0 9px;font-size:12px;font-weight:800}
.pv-g summary svg{margin-right:auto;width:16px;height:16px;flex-shrink:0;fill:none;stroke:var(--muted);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg);transition:transform .2s}
.pv-g[open] summary svg{transform:none}
.pv-t{width:100%;border-collapse:collapse;font-size:13.5px}
.pv-t th{text-align:right;padding:8px 16px;font-size:12px;font-weight:800;color:var(--muted);border-bottom:1px solid var(--line);border-top:1px solid var(--line)}
.pv-t td{padding:10px 16px;border-bottom:1px solid #eef1f5;font-weight:700}
.pv-t tr:last-child td{border-bottom:0}
.pv-t tbody tr{cursor:pointer;transition:background .15s}
.pv-t tbody tr:hover{background:#f1f7fc}
.pv-t .mono{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.pv-go{width:30px;text-align:left}
.pv-go svg{display:block;width:14px;height:14px;max-width:none;margin-right:auto;fill:none;stroke:var(--pri);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:720px){.pv-t th,.pv-t td{padding-inline:10px}.pv-g summary{padding:11px 12px}}

/* صفحة بياناتي */
.pf-hero{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px;border-radius:18px;margin-bottom:14px;color:#fff;background:radial-gradient(520px 220px at 90% -40%,rgba(93,183,238,.34),transparent 70%),linear-gradient(120deg,#0c2338 0%,#10456e 100%);box-shadow:0 18px 40px -26px rgba(12,38,66,.8)}
.pf-av{width:58px;height:58px;border-radius:16px;background:#fff;color:var(--pri3);display:grid;place-items:center;font-size:26px;font-weight:900;flex-shrink:0}
.pf-id{min-width:0;flex:1 1 160px}
.pf-id h3{margin:0;font-size:19px;font-weight:900;line-height:1.3;overflow-wrap:anywhere}
.pf-id p{margin:1px 0 0;font-size:13px;font-weight:600;opacity:.8}
.pf-chips{display:flex;flex-wrap:wrap;gap:6px}
.pf-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border-radius:20px;padding:5px 12px;font-size:12.5px;font-weight:700}
.pf-chip svg.i{width:14px;height:14px}
.pf-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;align-items:stretch}
.pf-sec{padding:18px 20px}
.pf-sec h4{display:flex;align-items:center;gap:9px;margin:0 0 14px;font-size:15px;font-weight:900;color:#0f2a43}
.pf-sec h4 i{width:32px;height:32px;border-radius:10px;background:var(--pri-soft);color:var(--pri2);display:grid;place-items:center;font-style:normal;flex-shrink:0}
.pf-sec h4 svg.i{width:17px;height:17px}
.pf-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.pf-hint{display:block;margin-top:5px;font-size:11.5px;font-weight:600;color:var(--muted)}
.pf-save{display:flex;justify-content:flex-end;margin-top:14px}
.pf-save .btn{padding:10px 30px;font-size:14px}
@media (max-width:980px){.pf-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){.pf-2{grid-template-columns:minmax(0,1fr)}.pf-hero{padding:14px}.pf-sec{padding:15px}.pf-save .btn{flex:1}}
/* الإرسال الجماعي */
.bc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px;align-items:start}
.bc-h{margin:0 0 12px;font-size:16px;font-weight:900}
.bc-msg textarea{display:block;width:100%;min-height:150px;resize:vertical;line-height:1.8}
.bc-vars{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:8px 0 12px;font-size:12.5px}
.bc-warn{background:#fff4d6;color:#5f3f06;border-radius:10px;padding:8px 12px;font-size:12.5px;font-weight:700;margin-bottom:12px}
.bc-warn[hidden]{display:none}
.bc-label{font-size:12px;font-weight:800;color:var(--muted);margin-bottom:6px}
.bc-bubble{background:#e7f8ee;border:1px solid #cdeedb;border-radius:14px 14px 4px 14px;padding:11px 14px;font-size:14px;font-weight:600;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;color:#12321f}
.bc-go{width:100%;margin-top:14px;padding:11px;font-size:14.5px}
.bc-note{font-size:12px;line-height:1.8;margin-top:8px}
.bc-note:empty{display:none}
.bc-filter{padding-bottom:0}
.bc-filter .filters{margin-bottom:10px}
.bc-list{max-height:520px;overflow:auto;border-top:1px solid var(--line)}
.bc-list .empty{padding:24px;text-align:center}
.bc-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 16px;margin:0;border:0;border-bottom:1px solid #eef1f5;background:none;cursor:pointer;text-align:right;color:inherit;font:inherit;transition:background .15s}
.bc-row:last-child{border-bottom:0}
.bc-row:hover{background:#f1f7fc}
.bc-row.cur{background:var(--pri-soft)}
.bc-row.off{cursor:default;opacity:.62}
.bc-row.off:hover{background:none}
.bc-row input{flex-shrink:0;width:17px;height:17px}
.bc-who{flex:1;min-width:0}
.bc-who b{display:block;font-size:13.5px;font-weight:800;line-height:1.4;overflow-wrap:anywhere}
.bc-who small{display:block;font-size:11.5px;font-weight:600;color:var(--muted);line-height:1.5;text-align:right}
.bc-ph{flex-shrink:0;text-align:left;font-size:12.5px}
.bc-ph small{display:block;font-size:11px;font-weight:700;color:var(--muted)}
.bc-wait{font-size:12px;font-weight:700;flex-shrink:0}
.bc-progress{margin-bottom:14px}
.bc-bar{height:8px;border-radius:8px;background:#e6edf4;overflow:hidden}
.bc-bar i{display:block;height:100%;border-radius:8px;background:var(--pri);transition:width .35s var(--ease)}
.bc-stats{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:9px;font-size:12.5px;font-weight:700;color:var(--muted)}
.bc-stats b{color:var(--ink);font-weight:900}
.bc-now h3{margin:0;font-size:19px;font-weight:900;color:#0f2a43;overflow-wrap:anywhere}
.bc-sub{font-size:13px;font-weight:600;margin:2px 0 12px}
.bc-open{width:100%;margin-top:14px;padding:12px;font-size:15px;background:#128c4b;border-color:#128c4b;color:#fff}
.bc-open:hover{background:#0e7a40;border-color:#0e7a40;color:#fff}
.bc-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.bc-acts .btn{flex:1 1 auto}
.bc-done p{margin:8px 0 14px;font-weight:600;line-height:1.8;color:var(--ink2)}
@media (max-width:980px){.bc-grid{grid-template-columns:minmax(0,1fr)}.bc-list{max-height:420px}}
@media (max-width:720px){.bc-row{padding:10px 12px}}
/* الكتالوج والمواصفات والشهادات: كل ملف كارد مثل البوست */
.dc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:14px;align-items:start}
.dc{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--sh);transition:transform .25s var(--ease),box-shadow .25s}
.dc:hover{transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(12,38,66,.45)}
.dc-h{display:flex;align-items:center;gap:9px;padding:11px 13px}
.dc-logo{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;padding:2px;object-fit:contain;flex-shrink:0}
.dc-by{flex:1;min-width:0;line-height:1.35}
.dc-by b{display:block;font-size:12.5px;font-weight:900;color:#0f2a43;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-by small{display:block;font-size:11.5px;font-weight:600;color:var(--muted)}
.dc-cover{position:relative;display:grid;place-items:center;height:160px;overflow:hidden;color:#fff;text-decoration:none;background:radial-gradient(320px 170px at 88% -20%,rgba(93,183,238,.42),transparent 70%),linear-gradient(125deg,#0c2338 0%,#125f94 100%)}
.dc-cover svg.i{width:58px;height:58px;stroke-width:1.5;transition:transform .35s var(--ease)}
a.dc-cover:hover svg.i{transform:scale(1.08)}
.dc-cover>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;background:#eef4f9}
.dc-ext{position:absolute;bottom:10px;left:10px;background:rgba(9,27,44,.72);color:#fff;border-radius:7px;padding:2px 8px;font-size:11px;font-weight:800;letter-spacing:.4px}
.dc-state{position:absolute;top:10px;right:10px}
.dc-b{padding:12px 13px 0}
.dc-b h3{margin:0;font-size:15px;font-weight:900;line-height:1.45;color:#0f2a43;overflow-wrap:anywhere}
.dc-b span{display:block;margin-top:2px;font-size:12px;font-weight:600;color:var(--muted)}
.dc-acts{display:flex;gap:8px;padding:12px 13px 13px}
.dc-acts .btn{flex:1 1 0;padding-block:9px;text-decoration:none}
.dc-adm{display:flex;flex-wrap:wrap;gap:6px;padding:9px 13px;border-top:1px solid var(--line);background:#fafbfc}
.dc-adm .btn{flex:1 1 auto}
.dc-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:44px 20px;color:var(--muted);font-size:14px;font-weight:700;text-align:center}
.dc-empty svg.i{width:44px;height:44px;stroke-width:1.5;color:#9db4c8}