:root{
  /* ===== لوحة الألوان (Dark Mode) ===== */
  --bg-main:#151719;
  --bg-sidebar:#171A1F;
  --bg-panel:#20242A;
  --bg-card:#282D34;
  --border-color:#343A44;

  --brand-red:#C6202E;
  --active-red:#E43D4C;
  --danger-red:#EF4444;

  --text-primary:#F3F4F6;
  --text-secondary:#AEB4BE;
  --text-disabled:#737A86;

  --success:#22C55E;
  --warning:#F59E0B;
  --info:#3B82F6;

  /* ===== مشتقات (من نفس اللوحة) ===== */
  --bg-input:color-mix(in srgb,var(--bg-main) 55%,var(--bg-panel));
  --bg-hover:color-mix(in srgb,var(--bg-card) 86%,var(--text-primary));
  --bg-hover-soft:color-mix(in srgb,var(--bg-panel) 92%,var(--text-primary));
  --border-strong:color-mix(in srgb,var(--border-color) 75%,var(--text-secondary));
  --success-soft:color-mix(in srgb,var(--success) 15%,transparent);
  --warning-soft:color-mix(in srgb,var(--warning) 15%,transparent);
  --info-soft:color-mix(in srgb,var(--info) 16%,transparent);
  --danger-soft:color-mix(in srgb,var(--danger-red) 15%,transparent);
  --red-soft:color-mix(in srgb,var(--brand-red) 18%,transparent);
  --focus-ring:color-mix(in srgb,var(--info) 60%,transparent);
  --overlay:color-mix(in srgb,var(--bg-main) 72%,transparent);
  --shadow-sm:0 1px 2px color-mix(in srgb,var(--bg-main) 60%,transparent);
  --shadow-md:0 6px 18px color-mix(in srgb,var(--bg-main) 70%,transparent);
  --on-color:var(--text-primary);
  --paper:#FFFFFF; /* معاينة ورق الفاتورة المطبوعة فقط */

  /* ===== أسماء قديمة مستخدمة في البرنامج → مربوطة باللوحة الجديدة ===== */
  --bg:var(--bg-main); --panel:var(--bg-panel); --ink:var(--text-primary); --muted:var(--text-secondary); --line:var(--border-color);
  --accent:var(--warning); --accent-ink:var(--on-color); --accent-soft:var(--warning-soft);
  --ok:var(--success); --ok-soft:var(--success-soft); --bad:var(--danger-red); --bad-soft:var(--danger-soft); --info-soft:var(--info-soft);
  --side:var(--bg-sidebar); --side-ink:var(--text-secondary);
  --r:10px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg-main);color:var(--text-primary);font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-size:15px}
::selection{background:var(--info-soft)}
*{scrollbar-color:var(--border-color) transparent}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:10px;border:2px solid var(--bg-main)}::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;border-radius:9px;padding:9px 14px;background:var(--bg-card);color:var(--text-primary);font-weight:600;transition:background-color .12s,border-color .12s,filter .12s}
button:hover{background-color:var(--bg-hover)}
button:active{filter:brightness(.92)}
button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
button:disabled,button:disabled:hover,.paybtn:disabled,.paybtn:disabled:hover{opacity:1;background:var(--bg-panel);color:var(--text-disabled);box-shadow:inset 0 0 0 1px var(--border-color);cursor:not-allowed;filter:none}
.btn-p{background:var(--brand-red);color:var(--on-color)}.btn-p:hover{background:var(--active-red)}
.btn-ok{background:var(--success);color:var(--bg-main)}.btn-ok:hover{background:color-mix(in srgb,var(--success) 88%,var(--text-primary))}
.btn-bad{background:var(--danger-soft);color:var(--danger-red);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger-red) 45%,transparent)}.btn-bad:hover{background:color-mix(in srgb,var(--danger-red) 24%,transparent)}
.btn-info{background:var(--info);color:var(--on-color)}.btn-info:hover{background:color-mix(in srgb,var(--info) 88%,var(--text-primary))}
.btn-sm{padding:5px 10px;font-size:13px;border-radius:8px}
input,select,textarea{border:1px solid var(--border-color);border-radius:9px;padding:9px 11px;background:var(--bg-input);color:var(--text-primary);width:100%;transition:border-color .12s}
input:hover,select:hover,textarea:hover{border-color:var(--border-strong)}
input::placeholder,textarea::placeholder{color:var(--text-disabled)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--focus-ring);outline-offset:-1px;border-color:var(--info)}
input:disabled,select:disabled,textarea:disabled{color:var(--text-disabled);background:var(--bg-panel);cursor:not-allowed}
input[type=checkbox],input[type=radio]{accent-color:var(--brand-red)}
input[type=color]{background:var(--bg-card)}
select option{background:var(--bg-panel);color:var(--text-primary)}
label{display:block;font-size:13px;color:var(--text-secondary);margin:10px 0 4px}
a{color:var(--info)}
.row{display:flex;gap:10px;align-items:center}
.row>*{flex:1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.muted{color:var(--text-secondary)}
.num{font-variant-numeric:tabular-nums}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600}
.p-ok{background:var(--success-soft);color:var(--success)}.p-bad{background:var(--danger-soft);color:var(--danger-red)}.p-info{background:var(--info-soft);color:var(--info)}.p-acc{background:var(--warning-soft);color:var(--warning)}

/* layout */
#app{display:flex;height:100vh}
nav#side{width:108px;background:var(--bg-sidebar);color:var(--text-secondary);display:flex;flex-direction:column;align-items:stretch;padding:8px 6px;gap:2px;flex-shrink:0;overflow-y:auto;border-inline-end:1px solid var(--border-color)}
nav#side .logo img{width:54px;height:54px;display:block;margin:0 auto 4px}nav#side .logo small{display:block;font-weight:600;font-size:12px;color:var(--text-secondary)}
nav#side .logo{color:var(--text-primary);font-weight:800;text-align:center;font-size:15px;padding:6px 0 12px;border-bottom:1px solid var(--border-color);margin-bottom:6px}
nav#side button{text-align:center;line-height:1.25;background:transparent;color:var(--text-secondary);display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;font-size:13px;font-weight:600}
nav#side button:hover{background:var(--bg-panel);color:var(--text-primary)}
nav#side button .ic{font-size:26px;line-height:1}
nav#side button.on{background:var(--brand-red);color:var(--on-color)}
nav#side button.on:hover{background:var(--active-red)}
nav#side .sp{flex:1}
#wrap{flex:1;display:flex;flex-direction:column;min-width:0}
header#top{height:54px;background:var(--bg-panel);border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:14px;padding:0 18px;flex-shrink:0}
header#top .t{font-weight:800;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
header#top .pill{white-space:nowrap}header#top>span{flex-shrink:0}header#top>.t{flex-shrink:1}
.dtag{font-size:13px;padding:3px 8px}
#branchTag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
header#top .sp{flex:1}
main#main{flex:1;overflow:auto;padding:18px}
.card{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:var(--r);padding:16px;box-shadow:var(--shadow-sm)}
.card h3{margin:0 0 12px;font-size:16px}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.toolbar input,.toolbar select{width:auto;min-width:160px}
table.t{width:100%;border-collapse:collapse;background:var(--bg-panel)}
table.t th,table.t td{padding:9px 10px;border-bottom:1px solid var(--border-color);text-align:right;vertical-align:middle}
table.t th{font-size:13px;color:var(--text-secondary);font-weight:600;background:var(--bg-card);position:sticky;top:0}
table.t tr:hover td{background:var(--bg-hover-soft)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:14px}
.kpi{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:var(--r);padding:14px;box-shadow:var(--shadow-sm)}
.kpi .l{font-size:13px;color:var(--text-secondary)}
.kpi .v{font-size:23px;font-weight:800;margin-top:4px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}

/* sale */
.sale{display:flex;gap:14px;height:calc(100vh - 54px - 36px)}
.menu{flex:1;display:flex;flex-direction:column;min-width:0}
.menu-top{display:flex;gap:10px;margin-bottom:10px}
.menu-top button{white-space:nowrap}
.cats{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:6px;flex-shrink:0}
.cats button{white-space:nowrap;padding:12px 20px;font-size:16px;background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-secondary)}
.cats button:hover{color:var(--text-primary)}
.cats button.on{background:var(--brand-red);color:var(--on-color);border-color:var(--brand-red)}
.cats button.on:hover{background:var(--active-red)}
.pgrid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:10px;align-content:start}
.pgst{grid-column:1/-1;font-size:17px;font-weight:900;padding:8px 12px;margin-top:6px;border-radius:8px;background:var(--bg-panel);border-inline-start:5px solid var(--brand-red)}
.pgst:first-child{margin-top:0}
.pgs{grid-column:1/-1;font-size:12.5px;font-weight:800;color:var(--warning);padding:0 6px;margin-top:2px}
.pgh{grid-column:1/-1;font-size:14px;font-weight:800;color:var(--text-secondary);padding:2px 4px;border-bottom:2px solid var(--c);margin-top:2px}
.prod{background:var(--bg-card);border:1px solid var(--border-color);border-top:4px solid var(--c,var(--border-strong));border-radius:var(--r);padding:12px 10px;text-align:center;min-height:92px;display:flex;flex-direction:column;justify-content:space-between;gap:6px;color:var(--text-primary)}
.prod:hover{background:var(--bg-hover);border-color:var(--border-strong);border-top-color:var(--c,var(--border-strong));box-shadow:var(--shadow-md)}
.prod:active{border-color:var(--active-red);border-top-color:var(--c,var(--active-red))}
.prod .n{font-weight:700;font-size:14px}
.prod .p{color:var(--text-primary);font-weight:800}
.prod .s{font-size:11px;color:var(--text-secondary)}
.prod.out{opacity:.45}
.cart{width:390px;flex-shrink:0;background:var(--bg-panel);border:1px solid var(--border-color);border-radius:var(--r);display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-sm)}
.otype{display:flex;gap:6px;padding:10px}
.otype button{flex:1;background:var(--bg-card);color:var(--text-secondary)}
.otype button:hover{color:var(--text-primary)}
.otype button.on{background:var(--brand-red);color:var(--on-color)}
.otype button.on:hover{background:var(--active-red)}
.ometa{display:flex;flex-wrap:wrap;gap:6px;padding:0 10px 10px;border-bottom:1px solid var(--border-color)}
.ometa button{flex:1 1 auto;min-width:88px;background:var(--bg-input);border:1px dashed var(--border-strong);color:var(--text-secondary);font-weight:500;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ometa button:hover{color:var(--text-primary);background:var(--bg-card)}
.lines{flex:1;overflow:auto;padding:6px 10px}
.line{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px dashed var(--border-color)}
.line .nm{flex:1;min-width:0}
.line .nm b{display:block;font-size:14px}
.line .nm small{color:var(--text-secondary)}
.qty{display:flex;align-items:center;gap:4px}
.qty button{width:28px;height:28px;padding:0;border-radius:8px}
.qty span{min-width:24px;text-align:center;font-weight:700}
.line .lt{width:70px;text-align:left;font-weight:700}
.empty{text-align:center;color:var(--text-disabled);padding:40px 10px}
.totals{padding:10px 14px;border-top:1px solid var(--border-color);background:var(--bg-card)}
.totals .r{display:flex;justify-content:space-between;padding:2px 0;font-size:14px;color:var(--text-secondary)}
.totals .g{font-size:21px;font-weight:800;padding-top:6px;border-top:1px solid var(--border-color);margin-top:4px;color:var(--text-primary)}
.cacts{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:10px}
.cacts button{font-size:15px;padding:12px 4px}
.paybtn{margin:0 10px 10px;padding:15px;font-size:19px}
.paybtn.btn-ok,.paybtn{background:var(--brand-red);color:var(--on-color)}
.paybtn:hover{background:var(--active-red)}

/* modal */
.ov{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:10px;width:min(560px,100%);max-height:92vh;display:flex;flex-direction:column;box-shadow:var(--shadow-md)}
.modal.wide{width:min(860px,100%)}
.modal .mh{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border-color)}
.modal .mh b{font-size:17px}
.modal .mb{padding:4px 18px 18px;overflow:auto}
.modal .mf{display:flex;gap:8px;justify-content:flex-start;padding:12px 18px;border-top:1px solid var(--border-color)}
.x{background:transparent;font-size:20px;padding:2px 8px;color:var(--text-secondary)}
.x:hover{color:var(--text-primary)}
.tables{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;margin-top:12px}
.tables button{height:74px;font-size:18px;background:var(--success-soft);color:var(--success);border:2px solid transparent}
.tables button:hover{background-color:var(--success-soft);border-color:color-mix(in srgb,var(--success) 45%,transparent)}
.tables button.busy{background:var(--warning-soft);color:var(--warning)}
.tables button.busy:hover{background-color:var(--warning-soft);border-color:color-mix(in srgb,var(--warning) 45%,transparent)}
.tables button small{display:block;font-size:11px;font-weight:500}
.paym{display:flex;gap:8px;margin:10px 0}
.paym button{flex:1;padding:14px 6px;background:var(--bg-card);color:var(--text-secondary)}
.paym button:hover{color:var(--text-primary)}
.paym button.on{background:var(--bg-hover);color:var(--text-primary);box-shadow:inset 0 0 0 2px var(--active-red)}
.quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.bigtotal{text-align:center;font-size:34px;font-weight:800;color:var(--text-primary);margin:8px 0}
.change{text-align:center;font-size:20px;font-weight:700;margin-top:12px}

/* login */
.login{position:fixed;inset:0;background:var(--bg-main);display:flex;align-items:center;justify-content:center;z-index:60}
.login .box{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:10px;padding:28px;width:min(380px,92vw);text-align:center;box-shadow:var(--shadow-md)}
.login h1{margin:0 0 4px;font-size:24px}
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.pinpad button{padding:16px;font-size:20px}
.pin{font-size:26px;letter-spacing:10px;text-align:center;height:44px}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-strong);box-shadow:var(--shadow-md);padding:10px 20px;border-radius:10px;z-index:99;display:none;font-weight:600}
.bar{height:8px;background:var(--bg-card);border-radius:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--info)}
.sgroup{margin-bottom:22px}.sgroup h4{margin:0 0 10px;font-size:13px;color:var(--text-secondary);font-weight:700;letter-spacing:.3px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.tile{display:flex;align-items:center;gap:14px;text-align:right;background:var(--bg-panel);border:1px solid var(--border-color);border-radius:10px;padding:14px 16px;font-weight:400;transition:border-color .15s,box-shadow .15s,transform .15s,background-color .15s}
.tile:hover{background:var(--bg-card);border-color:var(--tc);box-shadow:var(--shadow-md);transform:translateY(-1px);filter:none}
.ti{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:var(--tbg);color:var(--tc);flex-shrink:0}
.ti svg,.tile svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tile .tx{flex:1;min-width:0}.tile b{display:block;font-size:15px;color:var(--text-primary)}.tile small{display:block;font-size:12.5px;color:var(--text-secondary);margin-top:2px}
.tile svg.arrow{width:18px;height:18px;color:var(--text-disabled)}.tile:hover svg.arrow{color:var(--tc)}
.subbar{display:flex;align-items:center;gap:12px;margin-bottom:16px}.subbar h2{margin:0;font-size:20px}.subbar .ti{width:36px;height:36px}
.ogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:10px;padding:12px}.ogrid .muted{font-size:12px;margin-bottom:2px}
.tline{display:flex;flex-wrap:wrap;gap:8px}.tline>div{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:10px;padding:8px 12px;min-width:105px;font-size:13px}
.kcol{display:inline-flex!important;align-items:center;gap:6px;margin:0!important;color:var(--text-primary)!important}.kcol input{width:34px;height:28px;padding:1px;border-radius:6px}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.perm tr.pg td{background:var(--bg-card)}.perm input[type=checkbox]{width:20px;height:20px;cursor:pointer}
.rcwrap{display:grid;grid-template-columns:1fr 360px;gap:16px;align-items:start}.rcprev{position:sticky;top:0}.rcprev iframe{width:100%;height:calc(100vh - 150px);border:1px solid var(--border-color);border-radius:10px;background:var(--paper)}
.rcg{margin-top:10px}.rcchk{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:4px}.rcchk label{display:inline-flex;align-items:center;gap:5px;margin:0;color:var(--text-primary);font-size:14px}
.btabs{display:flex;gap:6px;border-bottom:1px solid var(--border-color);margin:0 -18px 12px;padding:0 18px;position:sticky;top:-4px;background:var(--bg-panel);z-index:2}.btabs button{background:transparent;border-radius:8px 8px 0 0;border:0;border-bottom:3px solid transparent;padding:10px 14px;color:var(--text-secondary)}.btabs button:hover{color:var(--text-primary);background:var(--bg-hover-soft)}.btabs button.on{border-bottom-color:var(--active-red);color:var(--text-primary)}
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 8px}.mgrid>div{background:var(--bg-card);border:1px solid var(--border-color);border-radius:10px;padding:8px;text-align:center}.mgrid small{display:block;color:var(--text-secondary);font-size:12px}.mgrid b{font-size:19px}
.shl{display:flex;gap:6px;align-items:center;font-size:13.5px;padding:5px 0;border-top:1px dashed var(--border-color)}
.wbox{background:var(--bg-card);border:1px solid var(--border-color);border-radius:10px;padding:4px 12px 10px;margin-top:10px}.wabub{background:var(--success-soft);color:var(--text-primary);border:1px solid color-mix(in srgb,var(--success) 30%,transparent);border-radius:10px 0 10px 10px;padding:10px 14px;max-width:360px;line-height:1.6;font-size:14px;box-shadow:var(--shadow-sm)}
.card-soft{background:var(--bg-card)!important}

/* ===== المود العادي (فاتح) — نفس أسماء المتغيرات بقيم فاتحة ===== */
:root[data-theme="light"]{
  --bg-main:#F3F5F9;--bg-sidebar:#FFFFFF;--bg-panel:#FFFFFF;--bg-card:#F6F7FA;--border-color:#E1E5EC;
  --brand-red:#C6202E;--active-red:#E43D4C;--danger-red:#DC2626;
  --text-primary:#1D2433;--text-secondary:#5F6778;--text-disabled:#838A97;
  --success:#16A34A;--warning:#D97706;--info:#2563EB;
  --bg-hover:color-mix(in srgb,var(--bg-card) 94%,var(--text-primary));
  --bg-hover-soft:color-mix(in srgb,var(--bg-panel) 96%,var(--text-primary));
  --overlay:color-mix(in srgb,var(--text-primary) 45%,transparent);
  --shadow-sm:0 1px 2px color-mix(in srgb,var(--text-primary) 8%,transparent);
  --shadow-md:0 6px 18px color-mix(in srgb,var(--text-primary) 12%,transparent);
  --on-color:#FFFFFF;
  color-scheme:light;
}
:root[data-theme="light"] .btn-ok{color:var(--on-color)}
.thbtn{font-size:17px;padding:4px 10px;line-height:1.2}
.login .thbtn{position:absolute;top:16px;left:16px}


/* تليفون العميل */
.phbar{display:flex;gap:6px;padding:0 10px 8px}.phbar input{font-size:16px;letter-spacing:.5px}.phbar button{flex:0 0 auto}
.ccard{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:10px;padding:12px}.ccard .muted{font-size:12px}
.addrs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.addrb{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:right;padding:12px 14px;background:var(--bg-card);box-shadow:inset 0 0 0 1px var(--border-color);font-weight:400}
.addrb b{font-size:15px}.addrb span{font-size:13px;color:var(--text-primary)}.addrb small{font-size:12px;color:var(--text-secondary)}
.addrb:hover,.addrb.on{box-shadow:inset 0 0 0 2px var(--active-red)}.addrb.alt b{color:var(--text-secondary)}
.lastord{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border-color);border-radius:10px;margin-bottom:6px;background:var(--bg-panel)}.lastord.first{background:var(--bg-card)}
/* تبويبات الطلبات */
.otabs{display:flex;gap:4px;padding:8px 8px 0;overflow-x:auto;flex-shrink:0;border-bottom:1px solid var(--border-color);background:var(--bg-sidebar)}
.otab{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:9px 9px 0 0;background:transparent;color:var(--text-secondary);font-size:13.5px;white-space:nowrap;border-bottom:3px solid transparent;max-width:160px}
.otab span{overflow:hidden;text-overflow:ellipsis}
.otab small{background:var(--bg-card);color:var(--text-primary);border-radius:99px;padding:0 7px;font-size:11.5px}
.otab i{font-style:normal;font-size:11px;color:var(--text-disabled);padding:0 2px}.otab i:hover{color:var(--danger-red)}
.otab:hover{background:var(--bg-panel);color:var(--text-primary)}
.otab.on{background:var(--bg-panel);color:var(--text-primary);border-bottom-color:var(--active-red)}
.otab.add{font-size:18px;padding:6px 12px;color:var(--text-secondary)}
/* الإضافات */
.mchip{display:inline-block;padding:1px 8px;border-radius:99px;font-size:12px;font-weight:600;margin:2px 0 0 3px;background:var(--bg-card);color:var(--text-secondary);border:1px solid var(--border-color)}
.mchip.mk-no{background:var(--danger-soft);color:var(--danger-red);border-color:transparent}
.mchip.mk-add{background:var(--success-soft);color:var(--success);border-color:transparent}
.mchip.mk-bnd{font-weight:700;margin-inline-start:0}
.mon .mxt{margin-top:8px;padding:8px 10px;border-radius:12px;background:var(--bg-hover);font-size:13.5px;line-height:1.9}
.mchip.mk-bnd{background:var(--warning-soft);color:var(--warning);border-color:transparent}
.mopt.mk-bnd.on{box-shadow:inset 0 0 0 2px var(--warning);color:var(--warning)}
.prod .bnd{font-size:11px;color:var(--text-secondary);line-height:1.35;display:block;margin-top:2px}
.mchip.mk-size,.mchip.mk-combo{background:var(--info-soft);color:var(--info);border-color:transparent}
.mline{margin:1px 0 2px;line-height:1.5}
.mgrp{margin:12px 0}.mgh{font-weight:800;margin-bottom:8px;font-size:15px}
.mopts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.mopt{padding:14px 8px;font-size:15px;display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--bg-card);box-shadow:inset 0 0 0 1px var(--border-color)}
.mopt small{font-size:12px;color:var(--text-secondary)}
.mopt.on{background:var(--bg-hover);box-shadow:inset 0 0 0 2px var(--active-red);color:var(--text-primary)}
.mopt.mk-no{color:var(--danger-red);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger-red) 40%,transparent)}
.mopt.mk-add{color:var(--success);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--success) 40%,transparent)}
.mopt.mk-no.on{background:var(--danger-soft);}
.mopt.mk-add.on{background:var(--success-soft);}
.mopt.mk-no.on{box-shadow:inset 0 0 0 2px var(--danger-red);color:var(--danger-red)}
.mopt.mk-add.on{box-shadow:inset 0 0 0 2px var(--success);color:var(--success)}
.mtot{text-align:center;font-size:18px;margin-top:6px}
.blink{animation:blk 1.2s ease-in-out infinite}@keyframes blk{50%{opacity:.45}}
@media (max-width:1000px){.cart{width:320px}nav#side{width:90px}nav#side button .ic{font-size:27px}nav#side button{font-size:12.5px;padding:10px 2px}}

/* ================= تصميم 2026 (v42) — زجاجي حديث + موبايل ================= */
:root{
  --bg-main:#0E0F12;--bg-sidebar:#121418;--bg-panel:#16181D;--bg-card:#1D2027;--border-color:#272B34;
  --brand-red:#E5233B;--active-red:#FF4D5E;--danger-red:#FF4D5E;
  --text-primary:#F5F5F7;--text-secondary:#A1A6B2;--text-disabled:#6B7180;
  --success:#2BD07F;--warning:#FFB020;--info:#4F8BFF;
  --glass:rgba(255,255,255,.045);--glass2:rgba(255,255,255,.075);--gline:rgba(255,255,255,.08);
  --grad-red:linear-gradient(135deg,#FF4D5E,#E5233B 50%,#B5122A);
  --glow:rgba(229,35,59,.16);--glow2:rgba(255,176,32,.08);
  --r:16px;
}
:root[data-theme="light"]{
  --bg-main:#F4F2EF;--bg-sidebar:#FFFFFF;--bg-panel:#FFFFFF;--bg-card:#F6F5F3;--border-color:#E7E4DF;
  --brand-red:#D61F35;--active-red:#E5233B;--danger-red:#DC2638;
  --text-primary:#16171B;--text-secondary:#5D6270;--text-disabled:#9AA0AC;
  --success:#12A35F;--warning:#D98A00;--info:#2F6FE8;
  --glass:rgba(255,255,255,.75);--glass2:#FFFFFF;--gline:rgba(20,20,30,.08);
  --glow:rgba(229,35,59,.08);--glow2:rgba(255,176,32,.10);
}
html,body{font-family:Cairo,"Segoe UI",Tahoma,Arial,sans-serif;font-size:15px}
body{background:radial-gradient(900px 600px at 100% -10%,var(--glow),transparent 60%),radial-gradient(700px 600px at 0% 110%,var(--glow2),transparent 60%),var(--bg-main);background-attachment:fixed}
button{border-radius:12px;font-weight:700}
input,select,textarea{border-radius:12px}
.btn-p{background:var(--grad-red);box-shadow:0 8px 20px -10px rgba(229,35,59,.7)}.btn-p:hover{background:var(--grad-red);filter:brightness(1.08)}
.btn-sm{border-radius:10px}
.pill{font-weight:700}

/* الهيكل: شريط جانبي عائم + هيدر شفاف */
#app{padding:12px;gap:12px;background:transparent}
#app,.login{min-height:0}
nav#side{width:112px;background:var(--glass);border:1px solid var(--gline);border-radius:26px;padding:12px 8px;gap:4px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-inline-end:1px solid var(--gline);scrollbar-width:none}
nav#side::-webkit-scrollbar{display:none}
nav#side .logo{border-bottom:0;padding:2px 0 8px;margin-bottom:4px;font-size:13px}
nav#side .logo small{display:none}
nav#side .logo img{width:88px;height:88px;border-radius:0;margin-bottom:4px;box-shadow:none;filter:drop-shadow(0 8px 14px rgba(229,35,59,.35))}
nav#side button{border-radius:18px;padding:8px 4px;font-size:12.5px;font-weight:700;gap:4px;line-height:1.3}
nav#side button .ic{font-size:28px}
nav#side button:hover{background:var(--glass2)}
nav#side button.on{background:linear-gradient(145deg,#E5233B,#B5122A);color:#fff;box-shadow:0 10px 24px -8px rgba(229,35,59,.7)}
nav#side button.on:hover{background:linear-gradient(145deg,#FF4D5E,#C6202E)}
header#top{height:56px;background:transparent;border-bottom:0;padding:0 4px;gap:10px}
header#top .t{font-size:22px;font-weight:800;letter-spacing:-.3px}
header#top>button{height:38px;border-radius:12px;background:var(--glass);border:1px solid var(--gline)}
#userTag{background:var(--glass);border:1px solid var(--gline);padding:6px 12px;border-radius:12px;font-size:13.5px}
main#main{padding:6px 4px 12px}

/* كروت وجداول */
.card,.kpi{background:var(--glass);border:1px solid var(--gline);border-radius:20px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:none}
:root[data-theme="light"] .card,:root[data-theme="light"] .kpi{background:#fff;box-shadow:0 1px 2px rgba(20,20,30,.04),0 8px 24px -16px rgba(20,20,30,.18)}
.kpi{padding:16px 18px}.kpi .l{font-weight:700}.kpi .v{font-size:26px;font-weight:800;letter-spacing:-.4px}
table.t{background:transparent;border-radius:14px;overflow:hidden}
table.t th{background:var(--bg-card);font-weight:700}
.card>table.t{background:transparent}
.tile{border-radius:18px;background:var(--glass);border:1px solid var(--gline)}
:root[data-theme="light"] .tile{background:#fff}
.ti{border-radius:14px}
.modal{border-radius:24px;border:1px solid var(--gline);box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.modal .mh{border-bottom-color:var(--gline)}.modal .mf{border-top-color:var(--gline)}
.ov{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#toast{border-radius:14px}
.login .box{border-radius:26px;background:var(--glass);border:1px solid var(--gline);backdrop-filter:blur(20px)}
.login{background:transparent}

/* شاشة البيع */
.sale{height:calc(100vh - 24px - 56px - 18px);gap:14px}
.menu-top{gap:8px}
.menu-top input{height:48px;border-radius:16px;background:var(--glass);border:1px solid var(--gline);font-size:15px;padding:0 16px}
.menu-top button{border-radius:14px;height:48px;padding:0 14px}
.cats{gap:8px;padding-bottom:6px}
.cats button{border-radius:999px;padding:9px 18px;font-size:14.5px;font-weight:700;background:var(--glass);border:1px solid var(--gline)}
.cats button.on,.cats button.on:hover{background:var(--text-primary);color:var(--bg-main);border-color:transparent}
.pgrid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.pgh{border-bottom:0;padding:6px 4px 0;font-size:14.5px;display:flex;align-items:center;gap:8px}
.pgh:before{content:'';width:10px;height:10px;border-radius:4px;background:var(--c)}
.pgst{border-radius:14px;background:var(--glass)}
/* كارت الصنف: نفس الشكل (لون الفئة فوق) بس أحدث */
.prod{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--gline);border-top:0;padding:14px 10px 10px;min-height:100px;gap:8px;
  background:linear-gradient(165deg,color-mix(in srgb,var(--c) 22%,var(--bg-card)) 0%,var(--bg-card) 62%);box-shadow:inset 0 3px 0 var(--c)}
:root[data-theme="light"] .prod{background:linear-gradient(165deg,color-mix(in srgb,var(--c) 14%,#fff) 0%,#fff 62%);box-shadow:inset 0 3px 0 var(--c),0 1px 2px rgba(20,20,30,.05)}
.prod:hover{border-color:color-mix(in srgb,var(--c) 55%,transparent);box-shadow:inset 0 3px 0 var(--c),0 12px 26px -14px color-mix(in srgb,var(--c) 70%,transparent);transform:translateY(-1px)}
.prod:active{transform:scale(.98)}
.prod{transition:transform .12s,box-shadow .15s,border-color .15s}
.prod .n{font-size:14.5px;font-weight:800;line-height:1.35}
.prod .p{font-size:15.5px;font-weight:800}
.prod .s{font-size:11px;font-weight:700;background:var(--glass2);border-radius:99px;padding:1px 8px;align-self:center}
.szp{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.szp>span{display:inline-flex;align-items:center;gap:4px;background:color-mix(in srgb,var(--bg-main) 45%,transparent);border:1px solid var(--gline);border-radius:9px;padding:2px 7px;font-size:12.5px;white-space:nowrap}
:root[data-theme="light"] .szp>span{background:#F4F2EF}
.szp i{font-style:normal;color:var(--text-secondary);font-weight:700;font-size:11px}
.szp b{font-weight:800;color:var(--text-primary)}
/* السلة */
.cart{width:400px;background:var(--bg-panel);border:1px solid var(--gline);border-radius:28px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
:root[data-theme="light"] .cart{box-shadow:0 20px 50px -25px rgba(20,20,30,.25)}
.otabs{background:transparent;border-bottom:0;padding:10px 10px 0;gap:6px}
.otab{border-radius:12px;border-bottom:0;background:var(--glass);padding:7px 10px}
.otab.on{background:var(--text-primary);color:var(--bg-main)}.otab.on small{background:var(--bg-main);color:var(--text-primary)}
.otype{margin:10px 12px 8px;padding:4px;gap:4px;background:var(--glass);border:1px solid var(--gline);border-radius:14px;flex-wrap:wrap}
.otype button{background:transparent;border-radius:10px;padding:8px 4px;font-size:13.5px;border:1px solid transparent}
.otype button.on,.otype button.on:hover{background:var(--text-primary);color:var(--bg-main)}
.phbar{padding:0 12px 8px}.phbar input{border-radius:12px;background:var(--glass);border-color:var(--gline)}
.ometa{padding:0 12px 10px;border-bottom:1px solid var(--gline)}
.ometa button{border-radius:12px;background:var(--glass);border:1px dashed var(--gline)}
.lines{padding:4px 14px}
.line{border-bottom:1px dashed var(--gline);padding:10px 0}
.line .nm b{font-weight:800}
.qty{background:var(--glass);border:1px solid var(--gline);border-radius:12px;padding:3px}
.qty button{width:28px;height:28px;border-radius:9px;background:var(--glass2)}
.totals{background:transparent;border-top:1px solid var(--gline);padding:12px 16px}
.totals .g{font-size:24px;font-weight:900;border-top:0}
.cacts{gap:6px;padding:4px 12px 8px}
.cacts button{border-radius:14px;background:var(--glass);border:1px solid var(--gline);font-size:13.5px;padding:10px 2px}
.paybtn,.paybtn.btn-ok{margin:0 12px 12px;border-radius:18px;height:60px;padding:0 18px;font-size:20px;font-weight:900;background:var(--grad-red);color:#fff;box-shadow:0 18px 34px -14px rgba(229,35,59,.8)}
.paybtn:hover{background:var(--grad-red);filter:brightness(1.08)}
#cartFab,.cgrab{display:none}
@media (max-width:1180px){nav#side .logo img{width:74px;height:74px}}
@media (max-width:1000px){nav#side .logo img{width:66px;height:66px}}
/* الإعدادات: كروت أصغر (v46) */
.tiles{grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:8px}
.tile{padding:9px 12px;gap:10px;border-radius:14px}
.tile .ti,.tiles .ti{width:32px;height:32px;border-radius:10px}
.tile .ti svg{width:17px;height:17px}
.tile b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile small{font-size:11.5px;margin-top:1px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile svg.arrow{width:15px;height:15px}
.sgroup{margin-bottom:16px}.sgroup h4{margin-bottom:7px}
header#top>button,header#top .pill{white-space:nowrap}
@media (max-width:1560px) and (min-width:761px){#branchTag{display:none}header#top .dtag{font-size:12px;padding:3px 8px}}
.nettag{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;padding:5px 12px;border-radius:12px}
.nettag i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 25%,transparent)}
.nettag.p-bad{background:var(--danger-red);color:#fff;font-size:14px}
.line .nm b{display:inline}.line .nm>small{margin-inline-start:6px}
/* السلة مضغوطة — عشان الأوردر الكبير يبان كله */
.cart{width:390px}
.otabs{padding:8px 8px 0}.otab{padding:5px 9px;font-size:13px}
.otype{margin:8px 10px 6px}.otype button{padding:6px 2px;font-size:13px}
.phbar{padding:0 10px 6px}.phbar input{height:38px;padding:6px 10px;font-size:14px}.phbar button{padding:6px 12px}
.ometa{padding:0 10px 8px;gap:5px}.ometa button{padding:5px 8px;font-size:12.5px;min-width:70px}
.lines{padding:4px 8px}
.line{gap:8px;padding:6px 8px;border-bottom:0;border-radius:12px;margin-bottom:2px}
.line:nth-child(even){background:var(--glass)}
.line:hover{background:var(--glass2)}
.line .nm b{font-size:13.5px;line-height:1.35}
.line .nm small{font-size:11.5px}
.line .mline{margin:1px 0}.line .mchip{font-size:10.5px;padding:0 6px;margin:1px 0 0 2px}
.line .pill{font-size:10.5px;padding:0 6px}
.qty{padding:2px;gap:2px;border-radius:10px}.qty button{width:24px;height:24px;border-radius:7px;font-size:14px}.qty span{min-width:20px;font-size:13.5px}
.line .lt{width:64px;font-size:13.5px}
.totals{padding:8px 14px}.totals .r{font-size:13px;padding:1px 0}.totals .g{font-size:21px;padding-top:4px;margin-top:2px}
.cacts{padding:4px 10px 6px;gap:5px}.cacts button{padding:8px 2px;font-size:12.5px;border-radius:12px}
.cart>div[style*="margin:0 10px 10px"]{margin:0 10px 6px!important}.cart>div[style*="margin:0 10px 10px"] button{padding:7px;font-size:13px}
.paybtn,.paybtn.btn-ok{height:52px;font-size:19px;margin:0 10px 10px;border-radius:16px}

/* ===== لوحة المدير ===== */
.dash{display:flex;flex-direction:column;gap:14px}
.dkp{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.dkc{position:relative;overflow:hidden;padding:16px 18px;border-radius:22px;background:var(--glass);border:1px solid var(--gline);min-height:118px}
:root[data-theme="light"] .dkc{background:#fff}
.dkc .l{color:var(--text-secondary);font-weight:700;font-size:13.5px}
.dkc .v{font-size:28px;font-weight:900;margin-top:2px;letter-spacing:-.5px}
.dkc .d{font-size:12.5px;font-weight:800;margin-top:2px}
.dkc svg{position:absolute;left:14px;bottom:12px;width:110px;height:40px}
.drow{display:grid;grid-template-columns:1.6fr 1fr;gap:14px}
.dpn{border-radius:24px;background:var(--glass);border:1px solid var(--gline);padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-width:0}
:root[data-theme="light"] .dpn{background:#fff}
.dpn h3{margin:0;font-size:16.5px;font-weight:900;display:flex;align-items:center;gap:8px}
.dpn h3 span{margin-inline-start:auto;font-size:12px;color:var(--text-disabled);font-weight:700}
.hbars{height:220px;display:flex;align-items:flex-end;gap:6px;padding-top:8px}
.hbw{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;min-width:0}
.hpair{display:flex;gap:3px;align-items:flex-end;height:100%;width:100%}
.hb{flex:1;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#FF4D5E,rgba(229,35,59,.35));min-height:2px}
.hb.o{background:linear-gradient(180deg,color-mix(in srgb,var(--text-primary) 24%,transparent),color-mix(in srgb,var(--text-primary) 6%,transparent))}
.hbw small{color:var(--text-disabled);font-weight:700;font-size:11px}
.dl{display:flex;flex-direction:column;gap:8px}
.dli{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:var(--bg-card);border:1px solid var(--gline);text-align:right;font-weight:400;width:100%}
.dli .ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;color:#fff;font-weight:900}
.dli b{font-size:14.5px}.dli .s{font-size:12px;color:var(--text-secondary);font-weight:700}
.dli .x{margin-inline-start:auto;font-weight:900;white-space:nowrap}
.dmini{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.dseg{display:flex;gap:4px;background:var(--glass);border:1px solid var(--gline);border-radius:14px;padding:4px}
.dseg button{background:transparent;padding:7px 14px;border-radius:10px;font-size:13.5px;color:var(--text-secondary)}
.dseg button.on{background:var(--text-primary);color:var(--bg-main)}
.g1{background:linear-gradient(135deg,#FF8A3D,#E5233B)}.g2{background:linear-gradient(135deg,#FFD166,#FF8A3D)}.g3{background:linear-gradient(135deg,#6EE7B7,#10B981)}.g4{background:linear-gradient(135deg,#93C5FD,#4F8BFF)}.g5{background:linear-gradient(135deg,#C4B5FD,#8B5CF6)}.g6{background:linear-gradient(135deg,#FDA4AF,#E11D48)}

/* ===== تابلت ===== */
@media (max-width:1180px){.cart{width:350px}.pgrid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}nav#side{width:98px}.drow{grid-template-columns:1fr}}
@media (max-width:1000px){.cart{width:320px}nav#side{width:90px}nav#side button .ic{font-size:24px}nav#side button{font-size:11.5px;padding:8px 2px}}

/* ===== موبايل (الويتر / المدير من التليفون) ===== */
@media (max-width:760px){
  html,body{font-size:14.5px}
  #app{flex-direction:column;padding:0;gap:0;height:100dvh}
  #wrap{order:1;flex:1;min-height:0}
  nav#side{order:2;width:100%;flex-direction:row;height:auto;border-radius:22px 22px 0 0;padding:6px 6px calc(6px + env(safe-area-inset-bottom));gap:2px;overflow-x:auto;overflow-y:hidden;flex-shrink:0;border-bottom:0;background:var(--bg-sidebar)}
  nav#side .logo,nav#side .sp{display:none}
  nav#side button{flex:0 0 auto;min-width:66px;padding:6px 4px;font-size:10.5px;border-radius:14px}
  nav#side button .ic{font-size:23px}
  header#top{height:auto;min-height:50px;flex-wrap:wrap;padding:8px 12px;gap:6px;row-gap:4px}
  header#top .t{font-size:18px;flex:1 1 auto}
  header#top .sp,#vfTag,#branchTag{display:none!important}
  #devTags>span:not(.nettag){display:none}
  #userTag{padding:4px 8px;font-size:12px}
  #shiftTag .pill{font-size:11px}
  header#top>button{height:34px;padding:4px 10px}
  main#main{padding:4px 10px 10px}
  .sale{height:100%;flex-direction:column;gap:0}
  .menu{min-height:0}
  .menu-top{flex-wrap:wrap}
  .menu-top input{flex:1 1 100%;height:44px}
  .menu-top button{flex:1 1 auto;height:40px;font-size:12.5px;padding:0 8px}
  .cats button{padding:8px 14px;font-size:13.5px}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;padding-bottom:84px}
  .prod{min-height:88px;padding:12px 6px 8px}
  .prod .n{font-size:13px}
  .szp>span{font-size:11.5px;padding:1px 5px}
  .cart{position:fixed;inset:auto 0 0 0;width:100%;height:92dvh;z-index:45;border-radius:26px 26px 0 0;transform:translateY(105%);transition:transform .25s ease;box-shadow:0 -20px 60px rgba(0,0,0,.5)}
  .sale.co .cart{transform:none}
  .sale.co:after{content:'';position:fixed;inset:0;background:var(--overlay);z-index:44}
  .cgrab{display:flex;align-items:center;gap:10px;padding:10px 14px 0;font-weight:800}
  .cgrab:before{content:'';position:absolute;top:6px;left:50%;width:44px;height:5px;margin-left:-22px;border-radius:9px;background:var(--gline)}
  .cgrab button{margin-inline-start:auto;padding:6px 12px;background:var(--glass);border:1px solid var(--gline)}
  #cartFab{display:flex;position:fixed;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:40;height:56px;border-radius:18px;align-items:center;justify-content:space-between;padding:0 18px;background:var(--grad-red);color:#fff;font-size:16px;font-weight:900;box-shadow:0 16px 30px -12px rgba(229,35,59,.8)}
  #cartFab small{background:rgba(255,255,255,.22);border-radius:99px;padding:1px 9px;font-size:12px;margin-inline-start:6px}
  .kbd{display:none!important}
  #shiftTag .pill{max-width:150px;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle}
  .cacts{grid-template-columns:repeat(5,1fr)}.cacts button{font-size:12px;padding:10px 0}
  .paybtn{height:56px}
  .ov{padding:0;align-items:flex-end}
  .modal,.modal.wide{width:100%;max-height:94dvh;border-radius:24px 24px 0 0}
  .modal .mb{padding:4px 14px 14px}.modal .mh,.modal .mf{padding:12px 14px}
  .modal .mf{flex-wrap:wrap}
  .grid2,.rcwrap{grid-template-columns:1fr}
  .mgrid{grid-template-columns:repeat(2,1fr)}
  .ogrid{grid-template-columns:repeat(2,1fr)}
  .tiles,.dgrid,.cols{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr);gap:8px}.kpi .v{font-size:20px}
  .toolbar{gap:6px}.toolbar input,.toolbar select{min-width:0;flex:1 1 140px}
  .card{padding:12px;overflow-x:auto}
  table.t th,table.t td{padding:7px 6px;font-size:13px}
  .row{flex-wrap:wrap}
  .mopts{grid-template-columns:repeat(2,1fr)}
  .tables{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
  .paym{flex-wrap:wrap}.paym button{flex:1 1 40%}
  .dkp{grid-template-columns:repeat(2,1fr);gap:8px}.dkc{min-height:104px;padding:12px}.dkc .v{font-size:20px}.dkc svg{width:70px;height:28px;left:8px;bottom:8px}
  .hbars{height:160px;gap:3px}
  .dpn h3{flex-wrap:wrap}.dpn h3 span{flex-basis:100%;margin:0}
  .drow{grid-template-columns:1fr}
  .login .box{padding:20px}
  #toast{bottom:150px;max-width:92vw}
}