/* SoftSuite design system — one shell for every business product (buildings, schools, solar, gyms, pharmacies,
   car rental, water delivery, exchange, event halls). Arabic first (RTL), the product colour is the accent. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root{
  --brand:#2563EB; --brand-ink:#fff;
  --ok:#059669; --warn:#D97706; --bad:#DC2626; --info:#0284C7;
  --bg:#F3F5F9; --surface:#FFFFFF; --surface-2:#F0F3F8; --surface-3:#E7ECF4; --line:#E0E6EF; --line-2:#CBD4E1;
  --text:#101828; --muted:#5D6B82; --muted-2:#8A97AB;
  --shadow-1:0 1px 2px rgba(16,24,40,.05),0 2px 8px rgba(16,24,40,.05);
  --shadow-2:0 18px 48px rgba(16,24,40,.18);
  --r-sm:9px; --r:13px; --r-lg:18px;
  --ease:cubic-bezier(.23,1,.32,1); --ease-drawer:cubic-bezier(.32,.72,0,1);
  --font:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --side:250px; --top:60px;
  --tint:color-mix(in srgb,var(--brand) 10%,var(--surface));
  --tint-2:color-mix(in srgb,var(--brand) 18%,var(--surface));
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#0B0F19; --surface:#121826; --surface-2:#182032; --surface-3:#1F293E; --line:#232D42; --line-2:#334059;
  --text:#E9EEF7; --muted:#9BA8BF; --muted-2:#6E7C95;
  --shadow-1:0 1px 2px rgba(0,0,0,.35),0 2px 10px rgba(0,0,0,.25); --shadow-2:0 18px 50px rgba(0,0,0,.55); color-scheme:dark; } }
:root[data-theme="dark"]{
  --bg:#0B0F19; --surface:#121826; --surface-2:#182032; --surface-3:#1F293E; --line:#232D42; --line-2:#334059;
  --text:#E9EEF7; --muted:#9BA8BF; --muted-2:#6E7C95;
  --shadow-1:0 1px 2px rgba(0,0,0,.35),0 2px 10px rgba(0,0,0,.25); --shadow-2:0 18px 50px rgba(0,0,0,.55); color-scheme:dark; }

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--brand);text-decoration:none}
img{max-width:100%;display:block}
::selection{background:color-mix(in srgb,var(--brand) 25%,transparent)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.muted{color:var(--muted)} .small{font-size:.82rem} .xs{font-size:.74rem} .b{font-weight:600}
.hidden{display:none!important}
.ok{color:var(--ok)} .bad{color:var(--bad)} .warn{color:var(--warn)}
.row{display:flex;align-items:center;gap:.6rem} .wrap{flex-wrap:wrap} .grow{flex:1;min-width:0} .between{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:.75rem}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:40px;padding:.5rem 1rem;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--surface);font-weight:600;font-size:.9rem;white-space:nowrap;
  transition:transform .16s var(--ease),background .16s,border-color .16s,box-shadow .16s}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5;pointer-events:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 2px 6px color-mix(in srgb,var(--brand) 35%,transparent)}
.btn.primary:hover{background:color-mix(in srgb,var(--brand) 88%,#000)}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}
.btn.danger.solid{background:var(--bad);color:#fff;border-color:var(--bad)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--surface-2)}
.btn.sm{min-height:32px;padding:.3rem .65rem;font-size:.82rem}
.btn.icon{width:40px;padding:0} .btn.sm.icon{width:32px}
.btn.wa{background:#25D366;border-color:#25D366;color:#fff}
.btn .bi{font-size:1.05em}
.chip{display:inline-flex;align-items:center;gap:.3rem;padding:.12rem .55rem;border-radius:99px;font-size:.76rem;font-weight:600;background:var(--surface-3);color:var(--muted);white-space:nowrap}
.chip.ok{background:color-mix(in srgb,var(--ok) 14%,var(--surface));color:var(--ok)}
.chip.bad{background:color-mix(in srgb,var(--bad) 13%,var(--surface));color:var(--bad)}
.chip.warn{background:color-mix(in srgb,var(--warn) 15%,var(--surface));color:var(--warn)}
.chip.info{background:var(--tint-2);color:var(--brand)}

/* ── shell ── */
.app{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;background:var(--surface);border-inline-end:1px solid var(--line);display:flex;flex-direction:column;z-index:30}
.brand{display:flex;align-items:center;gap:.7rem;padding:1rem 1rem .8rem;min-height:var(--top)}
.brand .logo{width:38px;height:38px;border-radius:11px;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font-size:1.25rem;flex:none;overflow:hidden}
.brand .logo img{width:100%;height:100%;object-fit:cover}
.brand .t1{font-weight:700;line-height:1.2} .brand .t2{font-size:.74rem;color:var(--muted)}
.nav{flex:1;overflow-y:auto;padding:.4rem .6rem 1rem;display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:.7rem;padding:.55rem .75rem;border-radius:10px;color:var(--muted);font-weight:500;font-size:.92rem;transition:background .15s,color .15s}
.nav a .bi{font-size:1.1rem;width:1.2rem;text-align:center}
.nav a:hover{background:var(--surface-2);color:var(--text)}
.nav a.on{background:var(--tint);color:var(--brand);font-weight:600}
.nav a .count{margin-inline-start:auto;background:var(--bad);color:#fff;border-radius:99px;font-size:.7rem;padding:0 .45rem;font-weight:700}
.nav .sep{height:1px;background:var(--line);margin:.5rem .6rem}
.side-foot{padding:.75rem;border-top:1px solid var(--line);display:flex;align-items:center;gap:.6rem}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--tint-2);color:var(--brand);display:grid;place-items:center;font-weight:700;flex:none}
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:20;height:var(--top);display:flex;align-items:center;gap:.75rem;padding:0 1.25rem;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top h1{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
.top .menu-btn{display:none}
.content{padding:1.25rem;max-width:1400px;width:100%;margin:0 auto;flex:1}
.banner{background:color-mix(in srgb,var(--warn) 14%,var(--surface));color:var(--warn);padding:.5rem 1.25rem;font-size:.85rem;font-weight:600;display:flex;gap:.5rem;align-items:center}
.bottom{display:none}
.scrim{position:fixed;inset:0;background:rgba(10,15,25,.45);z-index:25;opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.on{opacity:1;pointer-events:auto}
.scrim.high{z-index:55}

/* ── cards & KPIs ── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-1)}
.card.pad{padding:1rem 1.1rem}
.card h3{font-size:.95rem;font-weight:700;display:flex;align-items:center;gap:.5rem}
.card .head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--line)}
.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.85rem}
.kpi{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1rem;box-shadow:var(--shadow-1)}
.kpi .l{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:.4rem}
.kpi .v{font-size:1.55rem;font-weight:700;letter-spacing:-.02em;margin-top:.15rem;line-height:1.2}
.kpi .s{font-size:.76rem;color:var(--muted-2);margin-top:.15rem}
.kpi .ic{position:absolute;inset-inline-end:.8rem;top:.8rem;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--tint);color:var(--brand);font-size:1.05rem}
.kpi.bad .ic{background:color-mix(in srgb,var(--bad) 12%,var(--surface));color:var(--bad)}
.kpi.ok .ic{background:color-mix(in srgb,var(--ok) 12%,var(--surface));color:var(--ok)}
.kpi.warn .ic{background:color-mix(in srgb,var(--warn) 13%,var(--surface));color:var(--warn)}
.kpi.click{cursor:pointer;transition:transform .16s var(--ease),border-color .16s}
.kpi.click:hover{transform:translateY(-2px);border-color:var(--line-2)}
.chart{width:100%;height:220px;display:block}
.chart.sm{height:150px}
.legend{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.78rem;color:var(--muted)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-inline-end:.3rem;vertical-align:middle}
.bars{display:flex;flex-direction:column;gap:.5rem}
.bars .bar{display:grid;grid-template-columns:minmax(80px,30%) 1fr auto;gap:.6rem;align-items:center;font-size:.84rem}
.bars .track{height:8px;background:var(--surface-3);border-radius:99px;overflow:hidden}
.bars .fill{height:100%;background:var(--brand);border-radius:99px;transform-origin:left;animation:grow .7s var(--ease) both}
[dir="rtl"] .bars .fill{transform-origin:right}
@keyframes grow{from{transform:scaleX(0)}}
.list-mini{display:flex;flex-direction:column}
.list-mini .it{display:flex;align-items:center;gap:.7rem;padding:.6rem 1.1rem;border-top:1px solid var(--line)}
.list-mini .it:first-child{border-top:0}
.empty{padding:2.5rem 1rem;text-align:center;color:var(--muted)}
.empty .bi{font-size:2rem;display:block;margin-bottom:.4rem;color:var(--muted-2)}

/* ── list toolbar & table ── */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.85rem}
.search{position:relative;flex:1;min-width:200px;max-width:420px}
.search .bi{position:absolute;inset-inline-start:.75rem;top:50%;transform:translateY(-50%);color:var(--muted-2)}
.search input{width:100%;height:40px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);padding-inline:2.2rem .8rem}
.inp,.sel,textarea.inp{height:40px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);padding:0 .75rem;min-width:0;width:100%;transition:border-color .15s,box-shadow .15s}
textarea.inp{height:auto;min-height:90px;padding:.6rem .75rem;resize:vertical}
.inp:focus,.sel:focus,.search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.sel.auto{width:auto}
.tbl-wrap{overflow:auto;border-radius:var(--r)}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:.88rem}
.tbl th{position:sticky;top:0;background:var(--surface-2);color:var(--muted);font-weight:600;font-size:.78rem;text-align:start;padding:.65rem .8rem;border-bottom:1px solid var(--line);white-space:nowrap;user-select:none}
.tbl th.sort{cursor:pointer} .tbl th.sort:hover{color:var(--text)}
.tbl th .bi{font-size:.7rem;margin-inline-start:.2rem}
.tbl td{padding:.6rem .7rem;border-bottom:1px solid var(--line);vertical-align:middle;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{cursor:pointer;transition:background .12s}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl .thumb{width:32px;height:32px;border-radius:8px;object-fit:cover;background:var(--surface-3)}
.tbl td.r,.tbl th.r{text-align:end}
.cards{display:none}
.pager{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;padding:.7rem 1rem;border-top:1px solid var(--line);font-size:.84rem;color:var(--muted)}
.pager .pg{display:flex;gap:.25rem;align-items:center}
.pager .pg button{min-width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:.84rem}
.pager .pg button.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.pager .pg button:disabled{opacity:.4;cursor:default}
.pager .gap{padding:0 .2rem;color:var(--muted-2)}
.filters{display:flex;flex-wrap:wrap;gap:.5rem}
.skel{background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:8px;height:14px}
@keyframes sk{to{background-position:-200% 0}}
.tabs{display:flex;gap:.25rem;padding:.25rem;background:var(--surface-2);border-radius:11px;width:max-content;max-width:100%;overflow-x:auto}
.tabs button{border:0;background:transparent;padding:.4rem .85rem;border-radius:8px;font-weight:600;font-size:.85rem;color:var(--muted);white-space:nowrap}
.tabs button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1)}

/* ── drawer / modal ── */
.drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(560px,100%);background:var(--surface);z-index:60;box-shadow:var(--shadow-2);
  display:flex;flex-direction:column;transform:translateX(105%);transition:transform .34s var(--ease-drawer)}
[dir="rtl"] .drawer{transform:translateX(-105%)}
.drawer.on{transform:none!important}
.drawer .dh{display:flex;align-items:center;gap:.6rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--line)}
.drawer .dh h2{font-size:1.05rem;font-weight:700}
.drawer .db{flex:1;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:1rem}
.drawer .df{padding:.8rem 1.1rem;border-top:1px solid var(--line);display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end;background:var(--surface)}
.modal-back{position:fixed;inset:0;background:rgba(10,15,25,.5);z-index:70;display:grid;place-items:center;padding:1rem;opacity:0;transition:opacity .2s}
.modal-back.on{opacity:1}
.modal{background:var(--surface);border-radius:var(--r-lg);width:min(620px,100%);max-height:calc(100vh - 2rem);display:flex;flex-direction:column;box-shadow:var(--shadow-2);transform:translateY(12px) scale(.98);transition:transform .25s var(--ease)}
.modal-back.on .modal{transform:none}
.modal.wide{width:min(900px,100%)}
.modal .mh{display:flex;align-items:center;gap:.6rem;padding:1rem 1.2rem;border-bottom:1px solid var(--line)}
.modal .mh h2{font-size:1.05rem;font-weight:700;flex:1}
.modal .mb{padding:1.1rem 1.2rem;overflow-y:auto}
.modal .mf{padding:.85rem 1.2rem;border-top:1px solid var(--line);display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 1rem}
.form .full{grid-column:1/-1}
.fld label{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:.3rem}
.fld label .req{color:var(--bad)}
.fld .hint{font-size:.74rem;color:var(--muted-2);margin-top:.2rem}
.fld.err .inp,.fld.err .sel{border-color:var(--bad)}
.toggle{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;min-height:40px}
.toggle input{appearance:none;width:42px;height:24px;border-radius:99px;background:var(--line-2);position:relative;transition:background .2s;cursor:pointer;flex:none}
.toggle input::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle input:checked{background:var(--brand)}
.toggle input:checked::after{transform:translateX(18px)}
[dir="rtl"] .toggle input:checked::after{transform:translateX(-18px)}
.picker{position:relative}
.picker .pop{position:absolute;top:calc(100% + 4px);inset-inline:0;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);box-shadow:var(--shadow-2);z-index:5;max-height:240px;overflow-y:auto}
.picker .pop button{display:block;width:100%;text-align:start;border:0;background:none;padding:.55rem .8rem;font-size:.9rem}
.picker .pop button:hover,.picker .pop button.on{background:var(--tint)}
.picker .clear{position:absolute;inset-inline-end:.4rem;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted-2);padding:.2rem}
.imgpick{display:flex;align-items:center;gap:.7rem}
.imgpick .pv{width:64px;height:64px;border-radius:12px;background:var(--surface-2) center/cover no-repeat;border:1px dashed var(--line-2);display:grid;place-items:center;color:var(--muted-2);flex:none}
.kv{display:grid;grid-template-columns:minmax(110px,38%) 1fr;gap:.45rem .9rem;font-size:.88rem}
.kv dt{color:var(--muted)} .kv dd{word-break:break-word}
.section-t{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.4rem}
.mini{width:100%;border-collapse:collapse;font-size:.83rem}
.mini th{color:var(--muted);font-weight:600;text-align:start;padding:.35rem .5rem;border-bottom:1px solid var(--line);font-size:.76rem}
.mini td{padding:.4rem .5rem;border-bottom:1px solid var(--line)}
.timeline{display:flex;flex-direction:column;gap:.5rem;font-size:.82rem}
.timeline .ev{display:flex;gap:.55rem}
.timeline .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);margin-top:.45rem;flex:none}

/* ── toast & confirm ── */
.toasts{position:fixed;bottom:1rem;inset-inline-start:50%;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:.5rem;align-items:center;pointer-events:none}
[dir="rtl"] .toasts{transform:translateX(50%)}
.toast{background:var(--text);color:var(--bg);padding:.65rem 1.1rem;border-radius:12px;font-weight:600;font-size:.88rem;box-shadow:var(--shadow-2);display:flex;gap:.5rem;align-items:center;pointer-events:auto;animation:tin .3s var(--ease)}
.toast.bad{background:var(--bad);color:#fff} .toast.ok{background:var(--ok);color:#fff}
@keyframes tin{from{opacity:0;transform:translateY(10px)}}

/* ── special views ── */
.att-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.6rem}
.att{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.5rem .6rem;padding:.6rem .7rem;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.att .avatar{width:30px;height:30px;font-size:.8rem}
.att .opts{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem}
.att .opts button{height:34px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface);font-weight:700;font-size:.82rem;transition:background .15s,border-color .15s}
.att .opts button.P.on{background:var(--ok);border-color:var(--ok);color:#fff}
.att .opts button.A.on{background:var(--bad);border-color:var(--bad);color:#fff}
.att .opts button.L.on{background:var(--warn);border-color:var(--warn);color:#fff}
.att .opts button.E.on{background:var(--info);border-color:var(--info);color:#fff}
.gantt{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.gantt .gr{display:grid;min-width:max-content;border-bottom:1px solid var(--line)}
.gantt .gr:last-child{border-bottom:0}
.gantt .gl{position:sticky;inset-inline-start:0;background:var(--surface);padding:.45rem .7rem;font-size:.82rem;font-weight:600;border-inline-end:1px solid var(--line);z-index:2;width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gantt .gd{width:34px;text-align:center;font-size:.7rem;color:var(--muted);padding:.3rem 0;border-inline-start:1px solid var(--line)}
.gantt .gd.we{background:var(--surface-2)} .gantt .gd.today{background:var(--tint-2);color:var(--brand);font-weight:700}
.gantt .lane{position:relative;height:38px}
.gantt .blk{position:absolute;top:6px;height:26px;border-radius:7px;background:var(--brand);color:var(--brand-ink);font-size:.72rem;font-weight:600;padding:0 .45rem;display:flex;align-items:center;overflow:hidden;white-space:nowrap;cursor:pointer;box-shadow:var(--shadow-1)}
.gantt .blk.request{background:var(--warn)} .gantt .blk.returned{background:var(--muted-2)} .gantt .blk.active{background:var(--ok)} .gantt .blk.hold{background:var(--warn)} .gantt .blk.inquiry{background:var(--info)} .gantt .blk.done{background:var(--muted-2)}
.month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.month .dn{background:var(--surface-2);font-size:.74rem;font-weight:700;color:var(--muted);text-align:center;padding:.4rem}
.month .dc{background:var(--surface);min-height:96px;padding:.35rem;display:flex;flex-direction:column;gap:3px}
.month .dc.out{background:var(--surface-2);opacity:.55}
.month .dc .d{font-size:.75rem;font-weight:700;color:var(--muted)}
.month .dc.today .d{color:var(--brand)}
.month .ev{font-size:.7rem;padding:.12rem .35rem;border-radius:5px;color:#fff;background:var(--brand);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}
.counter{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr);gap:1rem;align-items:start}
.cart-line{display:flex;align-items:center;gap:.6rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:9px;overflow:hidden}
.qty button{width:30px;height:30px;border:0;background:var(--surface-2);font-weight:700}
.qty input{width:44px;height:30px;border:0;text-align:center;background:var(--surface)}
.big-total{font-size:2rem;font-weight:700;letter-spacing:-.02em}
.fx-cur{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.5rem}
.fx-cur button{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:.6rem;text-align:start;transition:border-color .15s,background .15s}
.fx-cur button.on{border-color:var(--brand);background:var(--tint)}
.fx-cur .code{font-weight:700}
.side-toggle{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.side-toggle button{height:46px;border-radius:11px;border:1px solid var(--line-2);background:var(--surface);font-weight:700}
.side-toggle button.on.buy{background:var(--ok);border-color:var(--ok);color:#fff}
.side-toggle button.on.sell{background:var(--bad);border-color:var(--bad);color:#fff}
.amount-in{height:58px;font-size:1.6rem;font-weight:700;text-align:center}
.scan-box{max-width:520px;margin:0 auto;text-align:center}
.scan-res{margin-top:1rem;padding:1.4rem;border-radius:var(--r-lg);border:2px solid var(--line)}
.scan-res.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 8%,var(--surface))}
.scan-res.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 8%,var(--surface))}
.stop{display:flex;gap:.8rem;padding:.8rem 1rem;border-top:1px solid var(--line);align-items:center}
.stop.done{opacity:.6}
.stop .n{width:28px;height:28px;border-radius:50%;background:var(--tint-2);color:var(--brand);display:grid;place-items:center;font-weight:700;font-size:.8rem;flex:none}
.stop.done .n{background:var(--ok);color:#fff}
.heat{display:grid;grid-template-columns:auto repeat(24,minmax(0,1fr));gap:2px;font-size:.62rem;color:var(--muted)}
.heat .c{aspect-ratio:1;border-radius:3px;background:var(--surface-3)}
.links-list{display:flex;flex-direction:column;gap:.35rem;max-height:50vh;overflow:auto}
.copy-row{display:flex;gap:.4rem}
.copy-row input{flex:1}

/* ── login / landing ── */
.auth{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.auth .art{background:radial-gradient(1200px 600px at 20% 10%,color-mix(in srgb,var(--brand) 55%,#000) 0,#0B1220 60%);color:#fff;padding:3rem;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth .art h1{font-size:2.3rem;line-height:1.15;letter-spacing:-.02em;max-width:520px}
.auth .art p{color:rgba(255,255,255,.75);max-width:480px;margin-top:.8rem}
.auth .form-side{display:grid;place-items:center;padding:2rem}
.auth .box{width:min(400px,100%)}
.prod-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin-top:2rem;max-width:560px}
.prod-tiles div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:.75rem;font-size:.82rem;display:flex;gap:.5rem;align-items:center;backdrop-filter:blur(6px)}
.prod-tiles .bi{font-size:1.2rem}

.tiles-dark{filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6)}
.leaflet-popup-content{font-family:var(--font)}

/* ── print ── */
@media print{ .side,.top,.bottom,.toolbar,.pager,.no-print{display:none!important} .app{display:block} .content{padding:0} .card{box-shadow:none;border:0} body{background:#fff} }

/* ── responsive ── */
@media (max-width:1400px){ .hide-md{display:none} }
@media (max-width:1100px){ .g4{grid-template-columns:repeat(2,minmax(0,1fr))} .counter{grid-template-columns:1fr} }
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset-block:0;inset-inline-start:0;width:min(300px,86vw);transform:translateX(-105%);transition:transform .3s var(--ease-drawer);box-shadow:var(--shadow-2)}
  [dir="rtl"] .side{transform:translateX(105%)}
  .side.on{transform:none!important}
  .top{padding:0 1rem} .top .menu-btn{display:inline-flex}
  .content{padding:1rem 1rem calc(80px + env(safe-area-inset-bottom))}
  .g2,.g3{grid-template-columns:1fr}
  .bottom{display:flex;position:fixed;bottom:0;inset-inline:0;z-index:20;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--line);padding:.3rem .3rem calc(.3rem + env(safe-area-inset-bottom))}
  .bottom a{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:.35rem 0;color:var(--muted);font-size:.68rem;font-weight:600;border-radius:10px}
  .bottom a .bi{font-size:1.25rem}
  .bottom a.on{color:var(--brand)}
  .tbl-wrap.resp table{display:none}
  .tbl-wrap.resp .cards{display:flex;flex-direction:column}
  .cards .rc{display:flex;gap:.7rem;padding:.75rem 1rem;border-bottom:1px solid var(--line);align-items:center;cursor:pointer}
  .cards .rc:last-child{border-bottom:0}
  .cards .rc .t{font-weight:600}
  .cards .rc .m{font-size:.8rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.2rem .7rem}
  .form{grid-template-columns:1fr}
  .modal-back{place-items:end center;padding:0}
  .modal{width:100%;border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:92vh;transform:translateY(40px)}
  .auth{grid-template-columns:1fr} .auth .art{display:none}
  .search{max-width:none}
  .kv{grid-template-columns:1fr 1.4fr}
}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} }