@font-face{font-family:Plex;font-weight:400;src:url(/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2')}
@font-face{font-family:Plex;font-weight:600;src:url(/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2')}
@font-face{font-family:Plex;font-weight:700;src:url(/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format('woff2')}
@font-face{font-family:Plex;font-weight:400;src:url(/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF}

:root{
  --navy:#13293d; --navy-2:#1f3a54; --gold:#c49a45; --gold-soft:#f3e9d2;
  --bg:#f4f2ed; --surface:#fff; --ink:#1b1f24; --mute:#68707a; --line:#e3ded2;
  --danger:#b4412f; --ok:#2f7a4f; --r:10px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Plex,system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5}
button,input,select{font:inherit;color:inherit}
input,select{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff;min-width:0}
input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
code{background:var(--gold-soft);padding:1px 6px;border-radius:4px;font-size:.9em}
h2{font-size:16px;margin:0 0 10px;color:var(--navy);display:flex;align-items:center;gap:8px}

.btn{color:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 14px;cursor:pointer;text-decoration:none;font-weight:600;white-space:nowrap;transition:background .15s,transform .1s}
.btn:active{transform:scale(.97)}
.btn:hover{background:#faf8f3}
.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.primary:hover{background:var(--navy-2)}
.btn.ghost{background:transparent}
.btn.sm{padding:5px 10px;font-size:13px}
.btn.danger{color:var(--danger)}
.link{background:none;border:0;color:var(--navy);text-decoration:underline;cursor:pointer;padding:2px 4px}
.badge{background:var(--gold);color:var(--navy);border-radius:20px;padding:0 9px;font-size:13px}
.hint{color:var(--mute);font-size:13px;margin:6px 0 12px}

/* top bar */
.top{position:sticky;top:0;z-index:5;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 20px;border-bottom:3px solid var(--gold);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;padding:12px 0}
.logo{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--gold);color:var(--navy);font-weight:700}
.tabs{display:flex;gap:4px;overflow-x:auto}
.tabs button{background:none;border:0;color:#c9d3dc;padding:16px 12px;cursor:pointer;font-weight:600;border-bottom:3px solid transparent;margin-bottom:-3px;white-space:nowrap}
.tabs button.on{color:#fff;border-bottom-color:var(--gold)}
main{padding:20px;max-width:1400px;margin:0 auto}
.tab{display:none}.tab.on{display:block}

.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.toolbar input[type=search]{flex:1 1 220px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.chip{border:1px solid var(--line);background:#fff;border-radius:20px;padding:4px 12px;font-size:13px;cursor:pointer}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.chip b{font-variant-numeric:tabular-nums}

/* products table */
.ptable{background:var(--surface);border-radius:var(--r);border:1px solid var(--line);overflow:hidden}
.prow{display:grid;grid-template-columns:64px 120px minmax(180px,1fr) 90px 100px 170px 40px;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.prow.head{background:#faf8f3;color:var(--mute);font-size:13px;font-weight:600}
.prow input,.prow select{width:100%}
.prow .f{display:flex;flex-direction:column;gap:2px;min-width:0}
.prow .f span{display:none;font-size:11px;color:var(--mute)}
.prow .num{font-variant-numeric:tabular-nums}
.prow.saved{animation:flash .8s}
@keyframes flash{from{background:#eaf5ee}to{background:transparent}}
.thumb{width:56px;height:56px;border-radius:8px;border:1px dashed #cdbf9e;background:#faf6ec;display:grid;place-items:center;cursor:pointer;overflow:hidden;color:#b7a77f;font-size:22px;position:relative}
.thumb img{width:100%;height:100%;object-fit:contain;background:#fff}
.thumb.has{border-style:solid;border-color:var(--line)}
.missing{border-color:#e9b9ae !important;background:#fdf3f0 !important}
.icon-btn{background:none;border:0;cursor:pointer;color:var(--mute);font-size:18px;padding:4px;border-radius:6px}
.icon-btn:hover{color:var(--danger);background:#fbeeea}

/* builder */
.builder{display:grid;grid-template-columns:1.2fr 1fr .9fr;gap:16px;align-items:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.panel.narrow{max-width:560px;margin-bottom:16px}
.panel label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--mute);margin-bottom:10px}
.panel label input,.panel label select{color:var(--ink);font-size:15px}
.panel label.check{flex-direction:row;align-items:center;gap:8px;color:var(--ink)}
.row-actions{display:flex;gap:8px;margin:8px 0}
.blist{max-height:calc(100vh - 290px);overflow:auto;border-top:1px solid var(--line)}
.bgroup{position:sticky;top:0;background:#faf8f3;font-size:13px;font-weight:700;color:var(--navy);padding:6px 8px;z-index:1}
.bitem{display:flex;align-items:center;gap:10px;padding:7px 8px;border-bottom:1px solid #f0ece3;cursor:pointer}
.bitem:hover{background:#fbf9f4}
.bitem.on{background:#f6efdd}
.bitem .t{flex:1;min-width:0}
.bitem .t small{display:block;color:var(--mute);font-size:12px}
.bitem .pr{font-variant-numeric:tabular-nums;font-weight:600;color:var(--navy)}
.bitem .mini{width:34px;height:34px;border-radius:6px;object-fit:contain;background:#fff;border:1px solid var(--line);flex:none}
.bitem .mini.none{background:#faf6ec;border-style:dashed}
.bsel{list-style:none;margin:0;padding:0;max-height:calc(100vh - 260px);overflow:auto}
.bsel li{display:grid;grid-template-columns:auto 1fr 84px 92px auto;gap:6px;align-items:center;padding:6px 0;border-bottom:1px solid #f0ece3;font-size:14px}
.bsel li .n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bsel li input{padding:5px 6px;font-size:13px;width:100%}
.bsel .mv{display:flex;flex-direction:column}
.bsel .mv button{background:none;border:0;cursor:pointer;line-height:1;padding:1px 4px;color:var(--mute)}
.bsel .empty{color:var(--mute);text-align:center;padding:30px 0;display:block}
.tpls{display:grid;gap:8px;margin:6px 0 14px}
.tpl{border:2px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;background:#fff;text-align:right}
.tpl b{color:var(--navy)}
.tpl small{color:var(--mute)}
.tpl.on{border-color:var(--gold);background:#fdf9ef}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.preview{margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.preview-bar{display:flex;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--line)}
.preview iframe{width:100%;height:80vh;border:0;background:#5b6570}

/* catalogs */
.clist{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.ccard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.ccard h3{margin:0;font-size:16px;color:var(--navy)}
.ccard .meta{color:var(--mute);font-size:13px}
.ccard .actions .btn{flex:1 1 auto}
.empty-state{text-align:center;color:var(--mute);padding:60px 20px}

/* dialog + toast + login */
dialog{border:0;border-radius:14px;padding:0;width:min(420px,calc(100vw - 32px));box-shadow:0 20px 60px rgba(0,0,0,.25)}
dialog::backdrop{background:rgba(19,41,61,.45)}
.dlg{padding:20px;display:flex;flex-direction:column}
.dlg label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--mute);margin-bottom:10px}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:10px 18px;border-radius:10px;opacity:0;transition:.25s;pointer-events:none;z-index:50;max-width:calc(100vw - 32px)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{background:var(--danger)}
body.login{min-height:100vh;display:grid;place-items:center;background:var(--navy);padding:16px}
.login-card{background:#fff;border-radius:16px;padding:32px 28px;width:min(360px,100%);display:flex;flex-direction:column;gap:14px;border-top:4px solid var(--gold)}
.login-card h1{margin:0;font-size:22px;color:var(--navy)}
.login-card label{display:flex;flex-direction:column;gap:6px;color:var(--mute);font-size:14px}
.err{color:var(--danger);margin:0;min-height:1.5em}

@media (max-width:1100px){.builder{grid-template-columns:1fr 1fr}.opts{grid-column:1/-1}}
@media (max-width:760px){
  main{padding:12px 16px}
  .top{padding:0 12px}
  .builder{grid-template-columns:1fr}
  .blist,.bsel{max-height:none}
  .prow.head{display:none}
  .prow .f span{display:block}
  .prow{grid-template-columns:64px 1fr 1fr 36px;grid-template-areas:"img name name del" "img units price price" "code code cat cat"}
  .prow>:nth-child(1){grid-area:img}.prow>:nth-child(2){grid-area:code}.prow>:nth-child(3){grid-area:name}
  .prow>:nth-child(4){grid-area:units}.prow>:nth-child(5){grid-area:price}.prow>:nth-child(6){grid-area:cat}.prow>:nth-child(7){grid-area:del}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}
.check-inline{display:inline-flex;align-items:center;gap:6px;font-size:14px;cursor:pointer;white-space:nowrap}