:root{
  --ink:#161214; --ink-2:#1F1A1C; --ink-3:#282124;
  --line:#3A3033; --line-soft:#2C2528;
  --bone:#EFE8DF; --muted:#9C908A;
  --gold:#C9A227; --gold-lt:#E8D07A; --gold-dp:#8A6E15;
  --stone:#7FA7B8; --warn:#D98A3B; --ok:#7FA36B; --bad:#C4636B;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--bone);min-height:100vh;
  font-family:"IBM Plex Sans Arabic",system-ui,"Segoe UI",sans-serif;
  font-weight:300;line-height:1.6;
  background-image:
    radial-gradient(1100px 480px at 78% -12%,rgba(201,162,39,.09),transparent 62%),
    radial-gradient(700px 420px at 8% 108%,rgba(201,162,39,.05),transparent 60%);
}
.num{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;direction:ltr;display:inline-block}
[hidden]{display:none!important}

/* ---------- الدخول ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.login{width:100%;max-width:380px;text-align:center}
.login img{height:88px;margin-bottom:26px;filter:drop-shadow(0 4px 18px rgba(0,0,0,.6))}
.login h1{font-family:"Reem Kufi",sans-serif;font-size:17px;font-weight:600;margin-bottom:4px}
.login p.sub{font-size:12px;color:var(--muted);margin-bottom:28px;letter-spacing:.06em}

.card{background:linear-gradient(180deg,var(--ink-2),var(--ink));
  border:1px solid var(--line-soft);border-radius:3px;padding:22px}
.card+.card{margin-top:16px}

.f{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;text-align:start}
.f label{font-size:11.5px;color:var(--muted);letter-spacing:.03em}
.f input,.f select{background:var(--ink-3);border:1px solid var(--line);border-radius:2px;
  color:var(--bone);padding:10px 12px;font-size:14px;width:100%;font-family:inherit;
  transition:border-color .15s,background .15s}
.f input.mono{font-family:"IBM Plex Mono",monospace;direction:ltr;text-align:start}
.f input:focus,.f select:focus{outline:none;border-color:var(--gold);background:#2E262A}
.f input[readonly]{color:var(--gold-lt);background:#221C1F;border-style:dashed}

.btn{appearance:none;cursor:pointer;border:1px solid var(--line);background:var(--ink-3);
  color:var(--bone);border-radius:2px;padding:10px 16px;font-size:13.5px;
  font-family:inherit;transition:all .16s;width:100%}
.btn:hover:not(:disabled){border-color:var(--gold-dp);color:var(--gold-lt)}
.btn.pri{background:linear-gradient(180deg,#3D3220,#2C2419);border-color:var(--gold);color:var(--gold-lt)}
.btn.sm{width:auto;padding:7px 13px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.msg{padding:10px 13px;border-radius:2px;font-size:12.5px;margin-bottom:14px;line-height:1.6;text-align:start}
.msg.bad{background:rgba(196,99,107,.1);border:1px solid rgba(196,99,107,.35);color:#E0A0A5}
.msg.ok{background:rgba(127,163,107,.09);border:1px solid rgba(127,163,107,.3);color:#A9C296}
.msg.warn{background:rgba(217,138,59,.09);border:1px solid rgba(217,138,59,.32);color:#E3B182}

/* ---------- الهيكل ---------- */
.top{border-bottom:1px solid var(--line-soft);position:sticky;top:0;z-index:30;
  background:rgba(22,18,20,.92);backdrop-filter:blur(14px)}
.top-in{max-width:1300px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;margin-inline-end:auto}
.brand img{height:40px}
.brand b{font-family:"Reem Kufi",sans-serif;font-size:14px;font-weight:600;display:block}
.brand span{font-size:11px;color:var(--muted)}
.rail{display:flex;align-items:center;gap:10px;padding:6px 13px;border-radius:2px;
  background:linear-gradient(100deg,#2A2225,#3A2F26 45%,#2A2225);
  border:1px solid rgba(201,162,39,.28)}
.rail .lbl{font-size:10.5px;color:var(--gold-lt);letter-spacing:.04em;white-space:nowrap}
.rail .val{font-family:"IBM Plex Mono",monospace;font-size:16px}
.who{font-size:11.5px;color:var(--muted);text-align:start}
.who b{display:block;color:var(--bone);font-size:12.5px;font-weight:400}

.tabs{max-width:1300px;margin:0 auto;padding:0 20px;display:flex;gap:2px;overflow-x:auto}
.tab{appearance:none;background:none;border:none;cursor:pointer;white-space:nowrap;
  font-family:"Reem Kufi",sans-serif;font-size:13.5px;font-weight:500;color:var(--muted);
  padding:13px 17px;position:relative;transition:color .2s}
.tab:hover:not(:disabled){color:var(--bone)}
.tab[aria-selected="true"]{color:var(--gold-lt)}
.tab[aria-selected="true"]::after{content:"";position:absolute;inset-inline:12px;bottom:-1px;
  height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.tab:disabled{opacity:.4;cursor:not-allowed}
.tab small{font-size:9.5px;color:var(--muted);margin-inline-start:5px}

main{max-width:1300px;margin:0 auto;padding:22px 20px 80px}
.grid{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;align-items:start}
.card-h{display:flex;align-items:center;gap:9px;padding-bottom:11px;margin-bottom:15px;
  border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.card-h h2{font-family:"Reem Kufi",sans-serif;font-size:13.5px;font-weight:600}
.card-h .n{margin-inline-start:auto;font-size:11px;color:var(--muted)}
.dia{width:9px;height:9px;border:1.4px solid var(--gold);transform:rotate(45deg);flex:none}
.row{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}

/* ---------- نقطة البيع ---------- */
.scan{display:flex;gap:9px}
.scan input{flex:1;font-size:16px;font-family:"IBM Plex Mono",monospace;direction:ltr;
  background:var(--ink-3);border:1px solid var(--gold-dp);border-radius:2px;
  color:var(--bone);padding:12px 14px}
.scan input:focus{outline:none;border-color:var(--gold);background:#2E262A}

.results{margin-top:12px;display:flex;flex-direction:column;gap:6px;max-height:230px;overflow:auto}
.hit{display:flex;align-items:center;gap:11px;padding:9px 11px;border:1px solid var(--line-soft);
  border-radius:2px;background:var(--ink-2);cursor:pointer;transition:border-color .15s;text-align:start}
.hit:hover{border-color:var(--gold-dp)}
.hit .k{font-family:"Reem Kufi",sans-serif;color:var(--gold-lt);font-size:14px;width:30px;flex:none}
.hit .nm{flex:1;font-size:13px}
.hit .sku{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted);display:block}
.hit .w{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted)}

.lines{width:100%;border-collapse:collapse;font-size:13px}
.lines th{text-align:start;font-size:10.5px;font-weight:400;color:var(--muted);
  padding:0 8px 9px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
.lines td{padding:9px 8px;border-bottom:1px solid rgba(58,48,51,.45)}
.lines .m{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;direction:ltr}
.lines .x{appearance:none;background:none;border:none;color:var(--line);cursor:pointer;
  font-size:16px;padding:2px 6px;transition:color .15s}
.lines .x:hover{color:var(--warn)}
.empty{text-align:center;padding:34px 14px;color:var(--muted);font-size:12.5px;
  border:1px dashed var(--line);border-radius:3px}

.tag{background:linear-gradient(180deg,#241D20,#191416);border:1px solid rgba(201,162,39,.3);
  border-radius:3px;padding:19px;position:relative;overflow:hidden}
.tag::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:2px;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold-dp))}
.line{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;font-size:13px}
.line span:first-child{color:var(--muted)}
.line b{font-family:"IBM Plex Mono",monospace;font-weight:400;font-variant-numeric:tabular-nums}
.line.sub{border-top:1px solid var(--line-soft);margin-top:8px;padding-top:11px}
.line.total{border-top:1px solid rgba(201,162,39,.35);margin-top:10px;padding-top:13px;font-size:15px}
.line.total span:first-child{color:var(--bone);font-family:"Reem Kufi",sans-serif}
.line.total b{font-size:25px;color:var(--gold-lt);font-weight:500}
.cur{font-size:11.5px;color:var(--muted);margin-inline-start:4px}

.pays{margin-top:12px;display:flex;flex-direction:column;gap:5px}
.pay{display:flex;justify-content:space-between;font-size:12px;padding:6px 9px;
  background:var(--ink-3);border-radius:2px}

.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{appearance:none;cursor:pointer;border:1px solid var(--line);background:var(--ink-3);
  color:var(--muted);border-radius:2px;padding:7px 12px;font-size:12.5px;
  font-family:inherit;transition:all .16s}
.chip:hover{border-color:var(--gold-dp);color:var(--bone)}
.chip[aria-pressed="true"]{background:linear-gradient(180deg,#3D3220,#2C2419);
  border-color:var(--gold);color:var(--gold-lt)}

.prices{width:100%;border-collapse:collapse;font-size:13px}
.prices th{text-align:start;font-size:10.5px;font-weight:400;color:var(--muted);
  padding:0 9px 10px;border-bottom:1px solid var(--line-soft)}
.prices td{padding:10px 9px;border-bottom:1px solid rgba(58,48,51,.45)}
.prices .k{font-family:"Reem Kufi",sans-serif;font-size:15px;color:var(--gold-lt)}
.prices .s{font-family:"IBM Plex Mono",monospace;font-size:15px}
.prices .b{font-family:"IBM Plex Mono",monospace;font-size:15px;color:var(--stone)}

.toast{position:fixed;inset-block-end:22px;inset-inline-start:50%;transform:translateX(-50%);
  padding:12px 20px;border-radius:3px;font-size:13px;z-index:100;max-width:90vw;
  background:var(--ink-2);border:1px solid var(--gold);box-shadow:0 8px 30px rgba(0,0,0,.6)}
.toast.bad{border-color:var(--bad);color:#E0A0A5}
.toast.ok{border-color:var(--ok);color:#A9C296}

.hint{font-size:11.5px;color:var(--muted);line-height:1.7;margin-top:11px}

@media (max-width:920px){
  .grid,.row3{grid-template-columns:1fr}
  .top-in{padding:11px 14px}
  .tabs,main{padding-inline:14px}
  .brand img{height:34px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}