/* «مسار» — the sales team's app. Mobile first (bottom bar + a center «sell» button), a side rail from 1024 px.
   Dark by default, light on request; RTL for Arabic and Hebrew, LTR for English. */
:root {
  --bg: #06101d; --bg2: #0a1628; --card: #0e1b30; --card2: #12223b; --card3: #172a47; --line: rgba(148,170,210,.13); --line2: rgba(148,170,210,.24);
  --txt: #eaf2ff; --mut: #8fa3c2; --mut2: #5f7394;
  --acc: #14c8aa; --acc2: #7c5cff; --grad: linear-gradient(135deg, var(--acc), var(--acc2)); --acc-rgb: 20,200,170; --acc2-rgb: 124,92,255;
  --ok: #22c55e; --warn: #f5a524; --bad: #f2555a; --info: #38bdf8;
  --sh: 0 14px 34px -18px rgba(0,0,0,.75); --glow: 0 0 0 1px rgba(var(--acc-rgb),.3), 0 12px 36px -14px rgba(var(--acc2-rgb),.5);
  --r: 18px; --r2: 14px; --r3: 10px; --top: 58px; --nav: 72px; --rail: 96px;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --fs: 15px; --font: 'IBM Plex Sans Arabic', 'IBM Plex Sans Hebrew', system-ui, -apple-system, 'Segoe UI', sans-serif; --disp: 'Readex Pro', var(--font);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #eef3f9; --bg2: #e4ecf6; --card: #ffffff; --card2: #f6f9fd; --card3: #edf2f9; --line: rgba(20,40,80,.09); --line2: rgba(20,40,80,.17);
  --txt: #0c1729; --mut: #55657f; --mut2: #8696ae; --acc: #0ea58c; --acc2: #6544f0; --acc-rgb: 14,165,140; --acc2-rgb: 101,68,240;
  --sh: 0 12px 28px -18px rgba(20,40,80,.35); --glow: 0 0 0 1px rgba(14,165,140,.3), 0 10px 28px -14px rgba(101,68,240,.35);
  color-scheme: light;
}
:root[data-big="1"] { --fs: 17px; }
:root[lang="he"] { --font: 'IBM Plex Sans Hebrew', 'IBM Plex Sans Arabic', system-ui, sans-serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--txt); font-family: var(--font); font-size: var(--fs); }
body { min-height: 100dvh; overscroll-behavior-y: contain; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 520px at 100% -10%, rgba(var(--acc2-rgb),.14), transparent 60%), radial-gradient(800px 520px at -10% 110%, rgba(var(--acc-rgb),.10), transparent 60%); }
:root[data-theme="light"] body::before { opacity: .55; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--acc); }
.num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; direction: ltr; unicode-bidi: isolate; }
.mut { color: var(--mut); } .ok { color: var(--ok); } .warn { color: var(--warn); } .bad { color: var(--bad); } .acc { color: var(--acc); }
svg.i { width: 1.15em; height: 1.15em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.2em; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* ── frame ── */
.top { position: sticky; top: 0; z-index: 40; height: calc(var(--top) + var(--safe-t)); padding: var(--safe-t) 12px 0; display: flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--line); }
.me { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
.av { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--grad); flex: none; font-family: var(--disp); }
.me b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me small { display: block; color: var(--mut); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic { width: 40px; height: 40px; border-radius: 13px; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; position: relative; flex: none; color: var(--txt); }
.ic:active { transform: scale(.95); } .ic.sm { width: 34px; height: 34px; border-radius: 11px; }
.ic.z { color: #fff; border: 0; background: var(--grad); box-shadow: var(--glow); }
.ic .dot { position: absolute; top: 5px; inset-inline-end: 5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--warn); color: #1a1000; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); font-size: 12px; color: var(--mut); white-space: nowrap; }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--mut2); }
.pill.on i { background: var(--ok); box-shadow: 0 0 0 4px rgba(34,197,94,.18); } .pill.bad i { background: var(--bad); }
.env { height: 22px; padding: 0 8px; border-radius: 7px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; background: rgba(245,165,36,.16); color: var(--warn); border: 1px solid rgba(245,165,36,.4); }
main.view { padding: 14px 14px calc(var(--nav) + var(--safe-b) + 26px); max-width: 1180px; margin: 0 auto; }
main.view.full { padding: 0; max-width: none; }
.nav { position: fixed; z-index: 45; inset-inline: 0; bottom: 0; height: calc(var(--nav) + var(--safe-b)); padding: 6px 8px var(--safe-b); display: grid; grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--bg2) 92%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--line); }
.nav button { border: 0; background: none; color: var(--mut); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; position: relative; border-radius: 16px; }
.nav button svg { width: 23px; height: 23px; }
.nav button.on { color: var(--txt); } .nav button.on svg { stroke: var(--acc); }
.nav .sell { align-self: start; margin-top: -22px; justify-self: center; width: 62px; height: 62px; border-radius: 22px; color: #fff; background: var(--grad); box-shadow: var(--glow), 0 10px 26px -8px rgba(var(--acc-rgb),.6); }
.nav .sell svg { width: 28px; height: 28px; stroke: #fff; } .nav .sell span { position: absolute; bottom: -18px; color: var(--mut); font-size: 11px; }
@media (min-width: 1024px) {
  .nav { top: 0; bottom: 0; inset-inline-start: 0; inset-inline-end: auto; width: var(--rail); height: auto; grid-template-columns: 1fr; grid-auto-rows: 78px; align-content: start;
    padding: calc(var(--top) + 18px) 10px 10px; border-top: 0; border-inline-end: 1px solid var(--line); }
  .nav .sell { margin: 4px auto; } .nav .sell span { position: static; }
  .top, main.view { margin-inline-start: var(--rail); } main.view { padding: 22px 26px 40px; }
}

/* ── blocks ── */
.grid { display: grid; gap: 14px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); align-items: start; }
.cd { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; box-shadow: var(--sh); min-width: 0; }
.cd > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cd > header h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; font-family: var(--disp); font-weight: 600; }
.cd > header h3 svg { stroke: var(--acc); }
.cd > header small, .cd > header .lnk { color: var(--mut); font-size: 12.5px; background: none; border: 0; padding: 0; }
.h1 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 12px; }
.h1 h2 { margin: 0; font-size: 21px; font-family: var(--disp); font-weight: 700; }
.empty { color: var(--mut); text-align: center; padding: 22px 8px; font-size: 14px; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 23px; padding: 0 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: var(--card3); color: var(--mut); border: 1px solid var(--line); white-space: nowrap; }
.chip.ok { color: var(--ok); background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.3); }
.chip.warn { color: var(--warn); background: rgba(245,165,36,.1); border-color: rgba(245,165,36,.32); }
.chip.bad { color: var(--bad); background: rgba(242,85,90,.1); border-color: rgba(242,85,90,.32); }
.chip.acc { color: var(--acc); background: rgba(var(--acc-rgb),.1); border-color: rgba(var(--acc-rgb),.32); }
.chip.vio { color: var(--acc2); background: rgba(var(--acc2-rgb),.12); border-color: rgba(var(--acc2-rgb),.32); }
.bt { height: 44px; padding: 0 18px; border-radius: 14px; border: 0; font-weight: 700; color: #04130f; background: var(--grad); display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; color: #fff; }
.bt.gh { background: var(--card3); color: var(--txt); border: 1px solid var(--line2); font-weight: 600; }
.bt.ok { background: linear-gradient(135deg, #16a34a, #22c55e); color: #fff; }
.bt.bad { background: rgba(242,85,90,.14); color: var(--bad); border: 1px solid rgba(242,85,90,.4); }
.bt.sm { height: 36px; padding: 0 13px; border-radius: 11px; font-size: 13px; }
.bt.wide { width: 100%; } .bt.big { height: 54px; font-size: 16.5px; border-radius: 16px; }
.bt:active { transform: scale(.98); } .bt[disabled] { opacity: .5; pointer-events: none; }
.row-bt { display: flex; gap: 8px; flex-wrap: wrap; }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--card2); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: 1 0 auto; border: 0; background: none; color: var(--mut); height: 36px; padding: 0 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.seg button.on { background: var(--card3); color: var(--txt); box-shadow: 0 0 0 1px var(--line2); }
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; height: 33px; padding: 0 13px; border-radius: 99px; border: 1px solid var(--line2); background: var(--card); color: var(--mut); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.chips button.on { color: #fff; background: var(--acc); border-color: transparent; }
.chips button .n { font-size: 11px; opacity: .85; }
.srch { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border-radius: 15px; background: var(--card); border: 1px solid var(--line2); }
.srch input { flex: 1; border: 0; background: none; outline: 0; min-width: 0; height: 100%; }
.srch svg { stroke: var(--mut); }
.inp { width: 100%; height: 46px; padding: 0 13px; border-radius: 13px; border: 1px solid var(--line2); background: var(--card2); outline: 0; }
.inp:focus, .srch:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(var(--acc-rgb),.15); }
textarea.inp { height: auto; padding: 10px 13px; resize: vertical; }
.fl { display: grid; gap: 6px; margin-bottom: 12px; } .fl > span { font-size: 13px; color: var(--mut); font-weight: 600; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* hero + numbers */
.hero { border-radius: 22px; padding: 16px; background: linear-gradient(140deg, rgba(var(--acc-rgb),.16), rgba(var(--acc2-rgb),.2)); border: 1px solid rgba(var(--acc-rgb),.28); box-shadow: var(--sh); }
.hero .hi { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hero h1 { margin: 2px 0 0; font-size: 22px; font-family: var(--disp); } .hero small { color: var(--mut); }
.hero .big { font-size: 34px; font-weight: 700; font-family: var(--disp); margin-top: 8px; } .hero .big small { font-size: 14px; margin-inline-start: 4px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.stats > div { background: rgba(4,10,20,.32); border-radius: 13px; padding: 8px 6px; text-align: center; }
:root[data-theme="light"] .stats > div { background: rgba(255,255,255,.6); }
.stats b { display: block; font-size: 17px; } .stats small { font-size: 11px; color: var(--mut); }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .kpis.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px; min-width: 0; text-align: start; }
.kpi small { display: flex; align-items: center; gap: 6px; color: var(--mut); font-size: 12px; } .kpi b { display: block; font-size: 20px; margin-top: 4px; } .kpi em { display: block; font-style: normal; font-size: 11.5px; color: var(--mut); margin-top: 2px; }
.acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .acts { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.acts button { min-height: 76px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; align-content: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 8px 4px; text-align: center; }
.acts button svg { width: 24px; height: 24px; stroke: var(--acc); }
.acts button.main { background: var(--grad); color: #fff; border: 0; box-shadow: var(--glow); } .acts button.main svg { stroke: #fff; }
.alert { display: flex; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 15px; border: 1px solid rgba(245,165,36,.45); background: rgba(245,165,36,.1); }
.alert.bad { border-color: rgba(242,85,90,.45); background: rgba(242,85,90,.1); } .alert.acc { border-color: rgba(var(--acc-rgb),.4); background: rgba(var(--acc-rgb),.08); }
.alert .tx { flex: 1; min-width: 0; } .alert b { display: block; font-size: 14px; } .alert small { color: var(--mut); font-size: 12.5px; }
.ticker { overflow: hidden; white-space: nowrap; border-radius: 12px; background: var(--card2); border: 1px solid var(--line); padding: 7px 0; font-size: 13px; }
.ticker span { display: inline-block; padding-inline-start: 100%; animation: tick 28s linear infinite; }
@keyframes tick { to { transform: translateX(-100%); } }
:root[dir="rtl"] .ticker span { animation-name: tickr; } @keyframes tickr { to { transform: translateX(100%); } }

/* lists */
.li { display: flex; align-items: center; gap: 11px; padding: 11px 2px; border-bottom: 1px solid var(--line); width: 100%; background: none; border-inline: 0; border-top: 0; text-align: start; }
.li:last-child { border-bottom: 0; }
.li .ic2 { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: none; background: var(--card3); border: 1px solid var(--line); font-weight: 700; font-size: 14px; color: var(--acc); }
.li .ic2.ok { color: var(--ok); } .li .ic2.warn { color: var(--warn); } .li .ic2.bad { color: var(--bad); } .li .ic2.vio { color: var(--acc2); }
.li .tx { flex: 1; min-width: 0; } .li .tx b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li .tx small { display: block; color: var(--mut); font-size: 12.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li .vl { text-align: end; flex: none; } .li .vl b { display: block; font-size: 15px; } .li .vl small { display: block; font-size: 11.5px; color: var(--mut); margin-top: 3px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th, .tbl td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: start; }
.tbl th { color: var(--mut); font-weight: 600; font-size: 12px; } .tbl td.n, .tbl th.n { text-align: end; }
.tot { display: grid; gap: 5px; margin-top: 10px; } .tot div { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.tot .g { font-size: 18px; font-weight: 700; padding-top: 7px; border-top: 1px dashed var(--line2); color: var(--acc); }
.skel { border-radius: 16px; background: linear-gradient(90deg, var(--card), var(--card3), var(--card)); background-size: 200% 100%; animation: sk 1.2s infinite; }
@keyframes sk { to { background-position: -200% 0; } }
.timeline { display: grid; gap: 8px; } .timeline div { display: flex; gap: 10px; font-size: 13px; } .timeline i { width: 10px; height: 10px; border-radius: 50%; background: var(--acc); margin-top: 5px; flex: none; }

/* the sale: products, steppers, the cart bar */
.steps { display: flex; gap: 5px; margin-bottom: 12px; } .steps span { flex: 1; text-align: center; padding: 6px 4px; border-radius: 10px; background: var(--card); color: var(--mut); font-size: 12px; font-weight: 600; border: 1px solid var(--line); }
.steps .on { background: var(--acc); color: #fff; border-color: transparent; } .steps .dn { color: var(--ok); }
.prods { display: grid; gap: 8px; } @media (min-width: 760px) { .prods { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1180px) { .prods { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.prod { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 15px; background: var(--card); border: 1px solid var(--line); min-width: 0; }
.prod.in { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 7%, var(--card)); }
.prod .sw { width: 8px; align-self: stretch; border-radius: 6px; background: var(--card3); flex: none; }
.prod .tx { flex: 1; min-width: 0; } .prod .tx b { display: block; font-size: 14px; } .prod .tx small { display: block; color: var(--mut); font-size: 12px; margin-top: 2px; }
.prod .tx .pr { color: var(--txt); font-weight: 700; } .prod .low { color: var(--warn); } .prod .out { color: var(--bad); }
.step { display: flex; align-items: center; gap: 4px; flex: none; }
.step button { width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--line2); background: var(--card3); font-size: 20px; line-height: 1; display: grid; place-items: center; }
.step input { width: 48px; height: 36px; border-radius: 10px; border: 1px solid var(--line2); background: var(--card2); text-align: center; font-weight: 700; color: var(--acc); }
/* quick amounts: only under the product being worked on, a slim row of pills */
.prods .prod { flex-wrap: wrap; row-gap: 0; }
.prod .qk { display: none; flex-basis: 100%; gap: 6px; justify-content: flex-end; padding-top: 8px; margin-top: 8px; border-top: 1px dashed var(--line2); }
.prod.sel .qk { display: flex; animation: fade .18s ease; }
.prod .qk button { height: 30px; min-width: 50px; padding: 0 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); background: color-mix(in srgb, var(--acc) 10%, var(--card2)); color: var(--acc); font: 800 13px/1 var(--font); }
.prod .qk button:active { transform: scale(.94); background: var(--acc); color: #fff; }
.prod .qk .qk-x { min-width: 0; border-color: var(--line2); background: var(--card3); color: var(--mut); font-weight: 600; margin-inline-start: auto; }
.prod.sel { box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 30%, transparent); }
.cartbar { position: fixed; z-index: 44; inset-inline: 10px; bottom: calc(var(--nav) + var(--safe-b) + 10px); display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px;
  background: var(--card2); border: 1px solid rgba(var(--acc-rgb),.35); box-shadow: 0 18px 40px -16px rgba(0,0,0,.7); }
.cartbar .tx { flex: 1; min-width: 0; } .cartbar b { font-size: 18px; display: block; } .cartbar small { color: var(--mut); font-size: 12px; }
@media (min-width: 1024px) { .cartbar { inset-inline-start: calc(var(--rail) + 20px); inset-inline-end: 20px; bottom: 16px; max-width: 760px; margin: 0 auto; } }
.paybox { border: 1px solid var(--line2); border-radius: 15px; padding: 10px; display: grid; gap: 8px; background: var(--card2); }
.paybox header { display: flex; justify-content: space-between; align-items: center; } .paybox header b { font-size: 14px; }
.photo { width: 100%; max-height: 160px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.done { text-align: center; padding: 18px 6px 4px; } .done .ok-badge { width: 84px; height: 84px; margin: 0 auto 10px; border-radius: 28px; display: grid; place-items: center; background: linear-gradient(135deg, #16a34a, #22c55e); box-shadow: 0 0 0 12px rgba(34,197,94,.12); }
.done .ok-badge svg { width: 44px; height: 44px; stroke: #fff; } .done h2 { margin: 6px 0 2px; font-family: var(--disp); }

/* sheets + toast */
.mz-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(2,6,14,.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: none; align-items: flex-end; justify-content: center; }
.mz-modal.on { display: flex; animation: fade .18s; }
@keyframes fade { from { opacity: 0; } }
.mz-sheet { width: 100%; max-width: 720px; max-height: 92dvh; overflow-y: auto; background: var(--bg2); border: 1px solid var(--line2); border-bottom: 0; border-radius: 24px 24px 0 0;
  padding: 14px 16px calc(18px + var(--safe-b)); animation: up .24s cubic-bezier(.2,.8,.2,1); }
.mz-sheet::before { content: ''; display: block; width: 42px; height: 5px; border-radius: 9px; background: var(--line2); margin: 0 auto 12px; }
@keyframes up { from { transform: translateY(40px); opacity: .4; } }
@media (min-width: 760px) { .mz-modal { align-items: center; } .mz-sheet { border-radius: 24px; border-bottom: 1px solid var(--line2); max-height: 86vh; } .mz-sheet::before { display: none; } }
.sh-x { float: inline-end; } .sh-f { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.mz-toast { position: fixed; z-index: 1100; inset-inline: 0; margin: 0 auto; bottom: calc(var(--nav) + var(--safe-b) + 16px); width: max-content; max-width: calc(100vw - 32px);
  padding: 11px 16px; border-radius: 14px; background: var(--card3); border: 1px solid var(--line2); box-shadow: var(--sh); font-size: 14px; opacity: 0; transform: translateY(10px); transition: .25s; pointer-events: none; }
.mz-toast.on { opacity: 1; transform: none; } .mz-toast.bad { border-color: var(--bad); }

/* gates: login, location */
.gate { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; max-width: 440px; margin: 0 auto; text-align: center; }
.gate .logo { width: 84px; height: 84px; } .gate h1 { margin: 2px 0 0; font-family: var(--disp); font-size: 28px; } .gate p { color: var(--mut); margin: 0; line-height: 1.7; }
.gate form { width: 100%; display: grid; gap: 10px; margin-top: 8px; text-align: start; }
.gate ol { text-align: start; color: var(--mut); line-height: 1.9; padding-inline-start: 20px; margin: 4px 0; }
.pw { position: relative; } .pw button { position: absolute; inset-inline-end: 6px; top: 6px; width: 34px; height: 34px; border: 0; background: none; color: var(--mut); }
.langs { display: flex; gap: 6px; justify-content: center; } .langs button { height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line2); background: var(--card); color: var(--mut); font-size: 13px; }
.langs button.on { color: #fff; background: var(--acc2); border-color: transparent; }
.err { color: var(--bad); font-size: 13.5px; min-height: 18px; text-align: center; }

/* map */
.mapw { position: fixed; top: calc(var(--top) + var(--safe-t)); bottom: calc(var(--nav) + var(--safe-b)); inset-inline: 0; z-index: 1; }
@media (min-width: 1024px) { .mapw { bottom: 0; inset-inline-start: var(--rail); } }
#map { position: absolute; inset: 0; background: #0b1424; } :root[data-theme="light"] #map { background: #dfe7f1; }
.leaflet-container { font-family: inherit; }
.mk { width: 30px; height: 30px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 6px 14px -4px rgba(0,0,0,.6); background: var(--card3); }
.mk span { transform: rotate(45deg); font-weight: 800; font-size: 11px; color: #fff; }
.mk.ok { background: linear-gradient(135deg, #16a34a, #22c55e); } .mk.warn { background: linear-gradient(135deg, #e48a00, #f5c024); } .mk.bad { background: linear-gradient(135deg, #c22, #f2555a); } .mk.acc { background: var(--grad); }
.medot { width: 20px; height: 20px; border-radius: 50%; background: #38bdf8; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(56,189,248,.25); }
.mpanel { position: absolute; z-index: 600; inset-inline: 0; bottom: 0; max-height: 58%; overflow-y: auto; background: var(--bg2); border-top: 1px solid var(--line2); border-radius: 22px 22px 0 0; padding: 10px 14px 14px; }
@media (min-width: 1024px) { .mpanel { inset-inline: auto; inset-inline-start: 14px; top: 14px; bottom: 14px; width: 380px; max-height: none; border-radius: 22px; border: 1px solid var(--line2); } }
.mctl { position: absolute; z-index: 600; top: 12px; inset-inline-end: 12px; display: grid; gap: 8px; }

/* offline / sync bar */
.syncbar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 14px; background: rgba(56,189,248,.1); border: 1px solid rgba(56,189,248,.35); font-size: 13px; }
.netoff { position: fixed; z-index: 60; top: calc(var(--top) + var(--safe-t)); inset-inline: 0; text-align: center; font-size: 12px; padding: 4px; background: #5a3b00; color: #ffe2a8; }
.fade-in { animation: fade .25s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* saving overlay, button cards */
.spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line2); border-top-color: var(--acc); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
button.cd, button.alert { font: inherit; color: inherit; cursor: pointer; width: 100%; }
button.cd:active, button.alert:active { transform: scale(.985); }
.prod .step input::placeholder { color: var(--mut); font-weight: 400; }

/* Ask Zero */
.zlog { max-height: 46vh; min-height: 120px; overflow-y: auto; display: grid; gap: 8px; align-content: start; padding: 4px 2px 10px; }
.zq { justify-self: end; max-width: 85%; padding: 9px 12px; border-radius: 16px 16px 4px 16px; background: var(--acc); color: #fff; font-size: 14px; }
[dir=rtl] .zq { justify-self: start; border-radius: 16px 16px 16px 4px; }
.za { justify-self: start; max-width: 92%; padding: 10px 12px; border-radius: 16px 16px 16px 4px; background: var(--card2); border: 1px solid var(--line); font-size: 14px; line-height: 1.75; }
[dir=rtl] .za { justify-self: end; border-radius: 16px 16px 4px 16px; }
#zMic.on { background: var(--bad); color: #fff; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(242,85,90,.18); } }
.mz-sheet.tall { max-height: 92vh; }
svg.i.xl { width: 44px; height: 44px; stroke: var(--acc); }
.cur { font-family: Arial, 'Noto Sans', 'Segoe UI Symbol', sans-serif; }
.chips button:disabled { opacity: .4; cursor: default; }
.cartbar { bottom: calc(var(--nav) + var(--safe-b) + 30px); }
@media (min-width: 1024px) { .cartbar { bottom: 16px; } }
body:has(#cartbar) .mz-toast { bottom: calc(var(--nav) + var(--safe-b) + 104px); }

/* promotions: applied + close ones */
.promos { display: grid; gap: 6px; margin-top: 10px; padding: 10px; border-radius: 13px; background: color-mix(in srgb, var(--acc2) 9%, transparent); border: 1px dashed rgba(var(--acc2-rgb),.4); }
.promos div { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; } .promos b { color: var(--acc2); }
.hints { display: grid; gap: 6px; margin-bottom: 10px; }
.hint { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(var(--acc2-rgb),.4); background: color-mix(in srgb, var(--acc2) 8%, var(--card)); color: inherit; font: inherit; text-align: start; cursor: pointer; }
.hint .tx { flex: 1; min-width: 0; } .hint b { display: block; font-size: 13.5px; } .hint small { color: var(--mut); font-size: 12px; }
.vio { color: var(--acc2); }

/* the old system's print pages, as they are */
.ptdocs { display: grid; justify-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: #e9edf2; max-height: 62vh; overflow: auto; }
.ptframe { border: 0; background: #fff; box-shadow: 0 6px 20px -8px rgba(0,0,0,.45); border-radius: 4px; min-height: 200px; }

/* hour bars (managers) */
.bars { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; align-items: end; height: 120px; }
.bars div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.bars i { display: block; width: 100%; min-height: 2px; border-radius: 5px 5px 2px 2px; background: var(--grad); }
.bars small { font-size: 10px; color: var(--mut); }

/* navigation */
.mapw.navi { bottom: 0; z-index: 50; }
@media (min-width: 1024px) { .mapw.navi { inset-inline-start: var(--rail); } }
.nv-top { position: absolute; z-index: 600; top: 10px; inset-inline: 10px; display: grid; gap: 6px; }
.nv-turn { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: #0d6b5b; color: #fff; box-shadow: 0 14px 30px -12px rgba(0,0,0,.6); }
.nv-turn.ok { background: #15803d; }
.nv-turn b { display: block; font-size: 24px; font-family: var(--disp); line-height: 1.1; } .nv-turn small { display: block; font-size: 14px; opacity: .92; margin-top: 2px; }
.nv-ic { width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.14); display: grid; place-items: center; flex: none; }
.nv-ic svg.i { width: 34px; height: 34px; stroke: #fff; stroke-width: 2.6; transition: transform .2s; }
.nv-ic.sm { width: 26px; height: 26px; border-radius: 8px; display: inline-grid; vertical-align: middle; } .nv-ic.sm svg.i { width: 18px; height: 18px; }
.nv-then { justify-self: start; padding: 6px 12px; border-radius: 12px; background: #0a4f44; color: #e8fffa; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.nv-ctl { position: absolute; z-index: 600; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); display: grid; gap: 8px; }
.nv-ctl .ic { width: 46px; height: 46px; border-radius: 14px; background: var(--card); box-shadow: 0 8px 18px -8px rgba(0,0,0,.5); }
.nv-ctl .ic.on { color: var(--acc); border-color: var(--acc); } .ic.off { opacity: .5; }
.nv-bot { position: absolute; z-index: 600; bottom: calc(10px + var(--safe-b)); inset-inline: 10px; padding: 12px 14px; border-radius: 18px; background: var(--bg2); border: 1px solid var(--line); box-shadow: 0 -8px 30px -12px rgba(0,0,0,.6); display: grid; gap: 8px; }
.nv-sum { display: flex; align-items: center; gap: 12px; } .nv-sum > div:first-child b { display: block; font-size: 22px; color: var(--acc); font-family: var(--disp); } .nv-sum small { color: var(--mut); font-size: 12.5px; }
.nv-dest { flex: 1; min-width: 0; } .nv-dest b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-cps { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; } .nv-cps::-webkit-scrollbar { display: none; }
/* the rep on the navigator: an arrow that turns with him (course / compass); a dot while the way is not known yet */
.nv-me { position: relative; width: 40px; height: 40px; display: grid; place-items: center; }
.nv-me::before { content: ''; position: absolute; width: 32px; height: 36px; background: #fff; clip-path: polygon(50% 0, 100% 100%, 50% 77%, 0 100%); }
.nv-me i { position: relative; display: block; width: 22px; height: 25px; margin-top: 3px; background: linear-gradient(180deg, #4ea1ff, #1d6fe0); clip-path: polygon(50% 0, 100% 100%, 50% 77%, 0 100%); }
.nv-me::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #2f8cff; border: 3px solid #fff; box-shadow: 0 0 0 7px rgba(47,140,255,.22), 0 2px 6px rgba(0,0,0,.4); display: none; }
.nv-me.nohd::before, .nv-me.nohd i { display: none; } .nv-me.nohd::after { display: block; }
.nv-me.lf { transition: transform .35s linear; }
/* the rep on the map: a dot with a light cone toward where he faces */
.mepuck { position: relative; width: 20px; height: 20px; }
.mepuck i { position: absolute; inset: 0; border-radius: 50%; background: #38bdf8; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(56,189,248,.25), 0 2px 6px rgba(0,0,0,.35); }
.mepuck b { position: absolute; left: -34px; top: -34px; width: 88px; height: 88px; border-radius: 50%; pointer-events: none; transition: transform .35s linear;
  background: conic-gradient(from -32deg, rgba(56,189,248,.55), rgba(56,189,248,.18) 64deg, transparent 64deg); -webkit-mask: radial-gradient(circle, #000 22%, transparent 70%); mask: radial-gradient(circle, #000 22%, transparent 70%); }
.mepuck.nohd b { display: none; }
/* landmarks: a round badge per kind; the name when close */
.poi-m { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 1.5px solid var(--line2); font-size: 13px; line-height: 1; box-shadow: 0 2px 6px -1px rgba(0,0,0,.35); }
.poi-n { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 600 10.5px/1.3 var(--font); font-style: normal; color: var(--txt); text-shadow: 0 0 3px var(--bg), 0 0 3px var(--bg), 0 0 2px var(--bg); pointer-events: none; }
/* a tap on the map: the place's card + a pin where the finger was */
.pcard { position: absolute; z-index: 700; inset-inline: 10px; bottom: calc(150px + var(--safe-b)); animation: pcIn .22s ease-out; }
.pc { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--line2); box-shadow: 0 14px 34px -14px rgba(0,0,0,.6); }
.pc-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: rgba(var(--acc-rgb), .13); flex: none; }
.pc-t { flex: 1; min-width: 0; } .pc-t b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-t small { display: block; color: var(--mut); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-b { display: flex; gap: 6px; align-items: center; flex: none; } .pc-b .ic.sm { width: 34px; height: 34px; }
.pc-ld { display: block; height: 2px; margin-top: 5px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--acc), transparent); background-size: 200% 100%; animation: pcLd 1s linear infinite; }
@keyframes pcIn { from { opacity: 0; transform: translateY(12px); } } @keyframes pcLd { to { background-position: -200% 0; } }
.tap-pin { width: 26px; height: 34px; background: var(--acc); clip-path: path('M13 34C13 34 0 20 0 13A13 13 0 0 1 26 13C26 20 13 34 13 34Z'); position: relative; animation: pinIn .25s ease-out; filter: drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
.tap-pin::after { content: ''; position: absolute; left: 8px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
@keyframes pinIn { from { transform: translateY(-14px); opacity: 0; } }
/* the navigation voice picker */
.vsel { display: grid; gap: 8px; } .vsel button { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--line2); background: var(--card2); color: var(--txt); text-align: start; font: inherit; }
.vsel button.on { border-color: var(--acc); box-shadow: 0 0 0 2px rgba(var(--acc-rgb), .25); background: rgba(var(--acc-rgb), .08); }
.vs-i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--card3); flex: none; } .vs-i .nv-z { position: static; }
.vs-t b { display: block; } .vs-t small { color: var(--mut); font-size: 12.5px; }
.cp { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #6b7280; border: 2px solid #fff; font-size: 15px; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.cp.ok { background: #16a34a; } .cp.warn { background: #f59e0b; } .cp.bad { background: #dc2626; }
.bt.ok { background: #16a34a; } .bt.bad { background: var(--bad); color: #fff; border: 0; }

/* the live call with Zero */
@keyframes mzFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes mzPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--acc-rgb),.55) } 70% { box-shadow: 0 0 0 10px rgba(var(--acc-rgb),0) } 100% { box-shadow: 0 0 0 0 rgba(var(--acc-rgb),0) } }
.mzc { position: fixed; inset: 0; z-index: 1200; display: none; align-items: flex-end; justify-content: center; background: rgba(2, 6, 14, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mzc.on { display: flex; animation: mzFade .2s; }
.mzc-card { width: 100%; max-width: 460px; padding: 16px 16px calc(18px + var(--safe-b)); border-radius: 26px 26px 0 0; background: radial-gradient(420px 260px at 50% 0, rgba(139, 108, 255, .22), transparent 70%), var(--bg2);
  border: 1px solid var(--line2); border-bottom: 0; box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .8); }
@media (min-width: 760px) { .mzc { align-items: center; } .mzc-card { border-radius: 26px; border-bottom: 1px solid var(--line2); } }
.mzc-card header { display: flex; align-items: center; gap: 10px; }
.mzc-card header > div { flex: 1; } .mzc-card header b { display: block; font-size: 16px; } .mzc-card header small { color: var(--acc); font-size: 12.5px; } .mzc-card header small.bad { color: var(--bad); }
.mzc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 0 rgba(34, 224, 161, .6); animation: mzPulse 1.8s infinite; }
.mzc-t { color: var(--mut); font-size: 13px; }
.mzc-orb { --z: 0; --m: 0; position: relative; width: 150px; height: 150px; margin: 18px auto 10px; display: grid; place-items: center; }
.mzc-orb i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(56, 208, 245, .35), transparent 65%); transform: scale(calc(.75 + var(--z) * .5)); transition: transform .12s; }
.mzc-orb i + i { background: radial-gradient(circle, rgba(34, 224, 161, .3), transparent 62%); transform: scale(calc(.6 + var(--m) * .6)); }
.mzc-orb span { position: relative; width: 84px; height: 84px; border-radius: 28px; display: grid; place-items: center; font-weight: 800; font-size: 38px; color: #fff; background: linear-gradient(135deg, var(--acc), var(--acc2)); box-shadow: var(--glow); transition: transform .15s; }
.mzc-orb.talk span { transform: scale(1.06); }
.mzc-cap { max-height: 150px; overflow-y: auto; display: grid; gap: 6px; padding: 2px; }
.mzc-cap p { margin: 0; padding: 8px 11px; border-radius: 13px; font-size: 13.5px; line-height: 1.55; max-width: 88%; }
.mzc-cap p.z { background: var(--card3); border: 1px solid var(--line); justify-self: start; }
.mzc-cap p.me { background: rgba(56, 208, 245, .14); border: 1px solid rgba(56, 208, 245, .25); justify-self: end; }
.mzc-tools { display: flex; flex-wrap: wrap; gap: 5px; min-height: 8px; margin: 8px 0 4px; }
.mzc-card footer { display: flex; justify-content: center; gap: 28px; margin-top: 10px; }
.mzc-b { width: 66px; height: 66px; border-radius: 50%; border: 1px solid var(--line2); background: var(--card3); color: var(--txt); display: grid; place-items: center; align-content: center; gap: 2px; }
.mzc-b svg { width: 24px; height: 24px; } .mzc-b small { font-size: 10.5px; color: var(--mut); }
.mzc-b.on { background: var(--warn); color: #1a1000; } .mzc-b.on small { color: #1a1000; }
.mzc-b.end { background: linear-gradient(135deg, #c22, #f2555a); border: 0; color: #fff; } .mzc-b.end svg { transform: rotate(135deg); } .mzc-b.end small { color: #ffe1e1; }
.mzc-pill { position: fixed; z-index: 950; top: calc(var(--top) + var(--safe-t) + 8px); left: 50%; transform: translateX(-50%); display: none; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  border-radius: 99px; border: 0; color: #fff; font-weight: 700; background: linear-gradient(135deg, #16a34a, #22b07d); box-shadow: 0 10px 26px -10px rgba(34, 197, 94, .8); }
.mzc-pill.on { display: inline-flex; }
.mzc-pill i { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: mzPulse 1.6s infinite; }
body .mzc-pill.x { top: calc(var(--top) + var(--safe-t) + 46px); }
.mzc-pill { position: fixed; z-index: 950; top: calc(var(--top) + var(--safe-t) + 8px); left: 50%; transform: translateX(-50%); display: none; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  border-radius: 99px; border: 0; color: #fff; font-weight: 700; background: linear-gradient(135deg, #16a34a, #22b07d); box-shadow: 0 10px 26px -10px rgba(34, 197, 94, .8); }

/* smart layer */
.v-pill { position: fixed; z-index: 940; top: calc(var(--top) + var(--safe-t) + 8px); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
  border-radius: 99px; border: 0; color: #fff; background: linear-gradient(135deg, #0d9488, #14c8aa); box-shadow: 0 10px 24px -10px rgba(0,0,0,.6); font: inherit; font-size: 13px; cursor: pointer; max-width: calc(100vw - 32px); }
.v-pill b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50vw; } .v-pill i { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: mzPulse 1.6s infinite; }
.brief { background: radial-gradient(420px 160px at 100% 0, rgba(245,165,36,.14), transparent 70%), var(--card); }
.brief-t { font-size: 14.5px; line-height: 1.9; }
.li.me { background: color-mix(in srgb, var(--acc) 10%, transparent); border-radius: 12px; }
.alert small { display: block; }

/* the old system's pages inside the app */
.legw { position: fixed; top: calc(var(--top) + var(--safe-t)); bottom: calc(var(--nav) + var(--safe-b)); inset-inline: 0; display: flex; flex-direction: column; z-index: 1; }
@media (min-width: 1024px) { .legw { bottom: 0; inset-inline-start: var(--rail); } }
.legbar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--bg2); } .legbar b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legf { flex: 1; width: 100%; border: 0; background: #fff; }

/* Zero's brief: the day in a line, then the next steps */
.zb { position: relative; overflow: hidden; background: radial-gradient(520px 180px at 100% 0, rgba(var(--acc2-rgb),.16), transparent 70%), radial-gradient(420px 160px at 0 100%, rgba(var(--acc-rgb),.10), transparent 70%), var(--card); border: 1px solid var(--line2); }
.zb::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--grad); opacity: .8; }
.zb-h { display: flex; align-items: center; gap: 10px; }
.zb-av { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: var(--grad); box-shadow: var(--glow); flex: none; }
.zb-t { flex: 1; min-width: 0; } .zb-t b { display: block; font-family: var(--disp); font-size: 16px; }
.zb-t small { display: block; color: var(--mut); font-size: 12.5px; margin-top: 2px; line-height: 1.5; }
.zb-k { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 12px; }
.zb-k > div { background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.zb-k small { display: block; color: var(--mut); font-size: 11.5px; } .zb-k b { display: block; font-size: 16px; margin-top: 2px; } .zb-k em { display: block; font-style: normal; color: var(--mut2); font-size: 11px; margin-top: 1px; }
.zb-l { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.zb-i { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--card2); border: 1px solid var(--line); border-inline-start: 3px solid var(--acc2); }
.zb-i.bad { border-inline-start-color: var(--bad); } .zb-i.warn { border-inline-start-color: var(--warn); } .zb-i.ok { border-inline-start-color: var(--ok); } .zb-i.acc { border-inline-start-color: var(--acc); }
.zb-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--card3); flex: none; color: var(--acc2); }
.zb-i.bad .zb-ic { color: var(--bad); background: rgba(242,85,90,.12); } .zb-i.warn .zb-ic { color: var(--warn); background: rgba(245,165,36,.12); } .zb-i.ok .zb-ic { color: var(--ok); background: rgba(34,197,94,.12); } .zb-i.acc .zb-ic { color: var(--acc); background: rgba(var(--acc-rgb),.12); }
.zb-x { flex: 1; min-width: 0; } .zb-x b { display: block; font-size: 14px; line-height: 1.45; } .zb-x small { display: block; color: var(--mut); font-size: 12.5px; line-height: 1.5; margin-top: 1px; }
.zb-i .bt { flex: none; }
.zb-tip { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(var(--acc2-rgb),.10); border: 1px dashed rgba(var(--acc2-rgb),.35); font-size: 13.5px; line-height: 1.7; }
.zb-tip svg { color: var(--acc2); }
.zb-at { margin: 8px 2px 0; font-size: 11px; text-align: end; }
.spinning svg { animation: spin 1s linear infinite; }

/* the order in words + «usually takes» */
.vo { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 6px; border-radius: 16px; border: 1px solid rgba(var(--acc2-rgb),.35); background: linear-gradient(135deg, rgba(var(--acc-rgb),.08), rgba(var(--acc2-rgb),.10)); }
.vo input { flex: 1; min-width: 0; height: 40px; border: 0; background: none; outline: none; font-size: 14px; }
.vo-mic { width: 42px; height: 42px; border-radius: 13px; border: 0; color: #fff; background: var(--grad); display: grid; place-items: center; flex: none; box-shadow: var(--glow); }
.vo-mic.on { animation: pulse 1.1s ease-in-out infinite; } @keyframes pulse { 50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(var(--acc2-rgb),.18); } }
.usual { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.usual button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 99px; border: 1px dashed rgba(var(--acc-rgb),.5); background: rgba(var(--acc-rgb),.08); color: var(--txt); font-size: 13px; }
.usual button em { font-style: normal; font-size: 11px; color: var(--mut); } .usual button:active { transform: scale(.96); }

.zs { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 99px; font-size: 10.5px; font-weight: 600; vertical-align: 1px; margin-inline-start: 4px; background: var(--card3); color: var(--mut); }
.zs.acc { background: rgba(var(--acc-rgb),.14); color: var(--acc); } .zs.warn { background: rgba(245,165,36,.14); color: var(--warn); } .zs.bad { background: rgba(242,85,90,.14); color: var(--bad); } .zs.ok { background: rgba(34,197,94,.14); color: var(--ok); }

.gs-h { margin: 12px 2px 6px; font-size: 12px; font-weight: 600; }
@media (max-width: 380px) { #bFind { display: none; } }

.zb-l .zb-i.xtra { display: none; } .zb-l.all .zb-i.xtra { display: flex; }
.zb-more { display: block; margin: 8px auto 0; font-size: 13px; color: var(--acc); background: none; border: 0; }

/* ── the map v2 ── */
.m2 .m2-top { position: absolute; z-index: 600; top: 10px; inset-inline-start: 10px; inset-inline-end: 64px; }
.m2 .m2-top .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.m2 .m2-top .chips button { background: color-mix(in srgb, var(--bg2) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 16px -10px rgba(0,0,0,.6); white-space: nowrap; }
.m2 .mctl .ic { background: color-mix(in srgb, var(--bg2) 90%, transparent); backdrop-filter: blur(10px); box-shadow: 0 8px 18px -10px rgba(0,0,0,.6); }
.m2-p { padding-top: 6px; transition: transform .25s ease; box-shadow: 0 -14px 40px -18px rgba(0,0,0,.7); }
.m2-p.min { transform: translateY(calc(100% - 118px)); }
@media (min-width: 1024px) { .m2-p.min { transform: none; } }
.m2-h { display: block; width: 100%; height: 18px; border: 0; background: none; padding: 0; margin: 0 0 4px; }
.m2-h i { display: block; width: 42px; height: 5px; border-radius: 5px; background: var(--line2); margin: 0 auto; }
@media (min-width: 1024px) { .m2-h { display: none; } }
.m2-tabs { margin: 8px 0 10px; } .m2-tabs button { font-size: 12.5px; padding: 0 6px; gap: 4px; }
.mk2 { width: 30px; height: 30px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 6px 14px -4px rgba(0,0,0,.55); background: #64748b; }
.mk2 span { transform: rotate(45deg); font-weight: 800; font-size: 11px; color: #fff; }
.mk2.s { width: 24px; height: 24px; } .mk2.l { width: 36px; height: 36px; } .mk2.l span { font-size: 13px; }
.mk2.acc { background: linear-gradient(135deg, #0ea58c, #14c8aa); } .mk2.warn { background: linear-gradient(135deg, #e48a00, #f5c024); } .mk2.bad { background: linear-gradient(135deg, #c22, #f2555a); }
.mk2.ok { background: linear-gradient(135deg, #16a34a, #22c55e); } .mk2.done { background: #94a3b8; opacity: .75; } .mk2.mute { background: #64748b; }
.mk2.owe { box-shadow: 0 0 0 3px #f5a524, 0 6px 14px -4px rgba(0,0,0,.55); }
.mk2.plan { background: var(--grad); width: 32px; height: 32px; } .mk2.plan.now { box-shadow: 0 0 0 4px rgba(var(--acc2-rgb),.35), 0 6px 14px -4px rgba(0,0,0,.55); } .mk2.plan.done { background: #94a3b8; }
.mk2 + em { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: 10.5px; font-weight: 600; color: #0c1729; background: rgba(255,255,255,.88); padding: 1px 6px; border-radius: 6px; pointer-events: none; }
.opp-pin { display: grid; place-items: center; height: 24px; padding: 0 7px; border-radius: 99px; background: #7c5cff; color: #fff; font-size: 11px; font-weight: 700; box-shadow: 0 0 0 3px rgba(var(--acc2-rgb),.3), 0 6px 14px -4px rgba(0,0,0,.6); animation: oppB 2s ease-in-out infinite; }
@keyframes oppB { 50% { transform: translateY(-3px); } }
.m2-pop b { display: block; font-size: 14px; margin-bottom: 2px; } .m2-pop small { display: block; color: #55657f; margin: 4px 0 8px; line-height: 1.5; } .m2-pop .row-bt { gap: 4px; flex-wrap: wrap; }
.leaflet-popup-content-wrapper { border-radius: 14px; } .leaflet-popup-content { margin: 12px 14px; font-family: var(--font); direction: rtl; }
:root[lang="en"] .leaflet-popup-content { direction: ltr; }
.li.opp .tx small + small { margin-top: 1px; }
.m2-styles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.m2-styles button { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--card2); font-size: 11.5px; }
.m2-styles button.on { border-color: var(--acc); box-shadow: 0 0 0 2px rgba(var(--acc-rgb),.25); }
.m2-styles i { width: 38px; height: 30px; border-radius: 8px; display: block; }
.sw-auto { background: linear-gradient(135deg, #e8eef6 50%, #1c2638 50%); } .sw-streets { background: linear-gradient(135deg, #f2efe9, #c9e4b0 60%, #aad3df); } .sw-light { background: #e6e6e6; } .sw-dark { background: #26282b; } .sw-sat { background: linear-gradient(135deg, #3b4f2a, #6b7f4a 60%, #8a7a5a); }
.m2-tg { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.m2-legend { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 12px; color: var(--mut); } .m2-legend span { display: inline-flex; align-items: center; gap: 6px; } .m2-legend .mk2 { width: 14px; height: 14px; border-width: 1.5px; box-shadow: none; }
/* Zero's bar on the map / the road */
.zdock { display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 16px; background: var(--card); border: 1px solid rgba(var(--acc2-rgb),.35); box-shadow: 0 10px 26px -16px rgba(var(--acc2-rgb),.7); }
.zd-f { flex: 1; min-width: 0; display: flex; align-items: center; } .zd-f input { flex: 1; min-width: 0; height: 38px; border: 0; background: none; outline: none; font-size: 13.5px; padding: 0 6px; }
.zd-mic, .zd-call { width: 38px; height: 38px; border-radius: 12px; border: 0; display: grid; place-items: center; flex: none; color: #fff; background: var(--grad); }
.zd-mic.on { animation: pulse 1.1s ease-in-out infinite; } .zd-call { background: linear-gradient(135deg, #16a34a, #22c55e); }
.zd-go { width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--card3); display: grid; place-items: center; } :root[dir="rtl"] .zd-go svg { transform: scaleX(-1); }
.zd-a { margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: var(--card2); border: 1px solid var(--line); max-height: 34vh; overflow-y: auto; }
.zd-q { font-size: 12.5px; color: var(--mut); margin-bottom: 4px; } .zd-ans { font-size: 14px; line-height: 1.75; } .zd-ft { display: flex; gap: 12px; justify-content: flex-end; margin-top: 6px; } .zd-ft .lnk { background: none; border: 0; color: var(--acc); font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; }
#mZ { margin: 0 0 4px; }
.nv-dock { position: absolute; z-index: 610; inset-inline: 10px; }

/* navigation v2 (2026-10-16): Zero's voice bubble, 3D map, road choice, traffic bar, speed, offers */
.nv2 #map { position: absolute; inset: 0; }
.nv2 .nv-turn { background: linear-gradient(135deg, #0b5a4e 0%, #0f7a67 60%, #12907a 100%); border: 1px solid rgba(255,255,255,.12); padding: 12px 16px; border-radius: 20px; box-shadow: 0 18px 40px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12); }
.nv2 .nv-turn > div { min-width: 0; }
.nv2 .nv-turn b { font-size: 30px; letter-spacing: -.3px; }
.nv2 .nv-turn small { font-size: 15px; font-weight: 600; opacity: .96; }
.nv2 .nv-turn em { display: block; font-style: normal; font-size: 13px; opacity: .78; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv2 .nv-ic { width: 58px; height: 58px; border-radius: 16px; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.nv2 .nv-ic svg.i { width: 38px; height: 38px; }
.nv2 .nv-ic.sm { width: 24px; height: 24px; border-radius: 7px; } .nv2 .nv-ic.sm svg.i { width: 16px; height: 16px; }
.nv2 .nv-then { background: rgba(6, 46, 40, .92); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.1); }
.nv2 .nv-ctl { top: 46%; }
.nv2 .nv-ctl .ic { backdrop-filter: blur(8px); background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--line2); }
.nv2 .nv-ctl .ic svg.i { width: 21px; height: 21px; }
.nv-3d { font: 800 14px/1 var(--disp); letter-spacing: .5px; }
.nv2 .nv-ctl .nv-call { color: var(--acc); }
.nv2 .nv-ctl .nv-call.on { background: #16a34a !important; color: #fff !important; border-color: transparent !important; animation: nvcall 1.6s ease-in-out infinite; }
@keyframes nvcall { 50% { box-shadow: 0 0 0 7px rgba(22,163,74,.25); } }
.nv-3d.on { background: var(--grad) !important; color: #fff !important; border-color: transparent !important; }
.nv2 .nv-bot { backdrop-filter: blur(10px); background: color-mix(in srgb, var(--bg2) 94%, transparent); border-radius: 22px; padding: 12px 14px 10px; }
.nv-eta b { display: block; font-size: 26px; line-height: 1; color: var(--acc); font-family: var(--disp); }
.nv-eta small { display: block; margin-top: 3px; }
/* Zero talking */
.nv-say { position: absolute; z-index: 605; top: 142px; inset-inline-start: 14px; inset-inline-end: 70px; display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 18px;
  background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(10px); border: 1px solid rgba(var(--acc2-rgb),.35); box-shadow: 0 16px 34px -16px rgba(0,0,0,.7);
  opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .25s, transform .25s; }
.nv-say.on { opacity: 1; transform: none; }
.nv-say p { margin: 0; font-size: 14.5px; line-height: 1.6; font-weight: 600; }
.nv-z { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; font: 800 14px/1 var(--disp); position: relative; }
.nv-say.on .nv-z::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(var(--acc2-rgb),.6); animation: nvz 1.2s ease-out infinite; }
@keyframes nvz { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
/* speed + limit */
.nv-spd { position: absolute; z-index: 600; inset-inline-start: 12px; top: 46%; transform: translateY(-50%); display: grid; gap: 8px; justify-items: center; }
.nv-spd .lim { width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 6px solid #e11d48; display: grid; place-items: center; box-shadow: 0 8px 18px -8px rgba(0,0,0,.6); }
.nv-spd .lim b { color: #111827; font: 800 19px/1 var(--disp); }
.nv-spd .cur { min-width: 54px; padding: 6px 8px; border-radius: 14px; text-align: center; background: color-mix(in srgb, var(--card) 92%, transparent); border: 1px solid var(--line2); }
.nv-spd .cur b { display: block; font: 800 19px/1 var(--disp); } .nv-spd .cur small { font-size: 10px; color: var(--mut); }
.nv-spd.over .cur { background: #e11d48; border-color: #e11d48; color: #fff; animation: nvover 1s ease-in-out infinite; } .nv-spd.over .cur small { color: #ffe4e6; }
@keyframes nvover { 50% { transform: scale(1.08); } }
/* the road left, with its traffic */
.nv-tbar { position: relative; height: 9px; border-radius: 99px; background: linear-gradient(90deg, rgba(59,130,246,.85), rgba(59,130,246,.55)); overflow: hidden; }
:root[dir="rtl"] .nv-tbar { background: linear-gradient(270deg, rgba(59,130,246,.85), rgba(59,130,246,.55)); }
.nv-tbar i { position: absolute; top: 0; bottom: 0; }
.nv-tbar u { position: absolute; top: 1px; width: 7px; height: 7px; margin-inline-start: -3px; border-radius: 50%; background: #e5e7eb; border: 1px solid #111827; text-decoration: none; }
.nv-tbar u.warn { background: #f59e0b; } .nv-tbar u.bad { background: #dc2626; } .nv-tbar u.ok { background: #22c55e; }
/* a faster road on the way */
.nv-offer { position: absolute; z-index: 606; top: 142px; inset-inline: 12px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: var(--card);
  border: 1.5px solid var(--acc); box-shadow: 0 18px 40px -14px rgba(0,0,0,.75); animation: up .3s ease; }
.nv-offer .tx { flex: 1; min-width: 0; } .nv-offer b { display: block; font-size: 15px; } .nv-offer small { display: block; color: var(--mut); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* choosing the road */
.nv-choose { display: grid; gap: 10px; }
.nv-cards { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; }
.nv-cards::-webkit-scrollbar { display: none; }
.nv-card { flex: 0 0 min(82%, 320px); scroll-snap-align: start; text-align: start; display: grid; gap: 6px; padding: 12px 14px; border-radius: 18px; background: var(--card2); border: 2px solid var(--line); color: var(--txt); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.nv-card.on { border-color: var(--acc); box-shadow: 0 0 0 4px rgba(var(--acc-rgb),.16); background: var(--card); }
.nv-card-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .nv-card-t b { font: 800 24px/1 var(--disp); }
.nv-card small { color: var(--mut); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-card-c { display: flex; flex-wrap: wrap; gap: 5px; }
.nv-ch-f { display: flex; align-items: center; gap: 12px; } .nv-ch-f .bt { flex: 0 0 auto; min-width: 46%; }
.nv-cdbar { height: 4px; border-radius: 99px; background: var(--card3); overflow: hidden; } .nv-cdbar i { display: block; height: 100%; background: var(--grad); transition: width 1s linear; }
/* on the map */
.nv-lm { display: inline-block; padding: 2px 8px; border-radius: 10px; background: rgba(255,255,255,.94); color: #0f172a; font: 700 11.5px/1.5 var(--font); white-space: nowrap; box-shadow: 0 3px 10px -3px rgba(0,0,0,.45); border: 1px solid rgba(15,23,42,.12); }
.nv-hz { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 3px solid #f59e0b; font-size: 15px; box-shadow: 0 4px 10px -3px rgba(0,0,0,.5); }
.nv-tag { padding: 4px 9px; border-radius: 12px; background: #475569; color: #fff; border: 2px solid #fff; font: 800 12px/1.2 var(--disp); white-space: nowrap; box-shadow: 0 4px 12px -4px rgba(0,0,0,.6); cursor: pointer; }
.nv-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; font-size: 12.5px; color: var(--mut); } .nv-legend span { display: inline-flex; align-items: center; gap: 6px; }
.nv-legend i { width: 18px; height: 6px; border-radius: 3px; display: inline-block; }
.nv2 .maplibregl-canvas { outline: none; }
@media (min-width: 760px) { .nv2 .nv-bot, .nv-say, .nv-offer { inset-inline-start: auto; width: 440px; } .nv2 .nv-top { inset-inline-end: auto; width: 440px; } }

/* ── the league ── */
.lg-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: 14px; background: var(--card2); border: 1px solid var(--line); font-size: 13px; color: var(--mut); }
.lg-chip b { color: var(--txt); } .lg-chip select { margin-inline-start: auto; height: 34px; width: auto; max-width: 100%; }
.lg-hero .lg-lv { display: grid; justify-items: center; } .lg-lv span { font-size: 38px; line-height: 1; } .lg-lv small { color: var(--mut); font-size: 12px; margin-top: 2px; }
.lg-gap { margin: 6px 0 8px; font-size: 13.5px; }
.lg-bar { height: 8px; border-radius: 8px; background: var(--card3); overflow: hidden; margin: 4px 0; } .lg-bar i { display: block; height: 100%; border-radius: 8px; background: var(--grad); }
.lg-bar.sm { height: 6px; flex: 1; margin: 0; }
.lg-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; font-size: 13px; } .lg-row span { width: 110px; flex: none; color: var(--mut); } .lg-row b { width: 52px; text-align: end; }
.lg-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 12px; }
.lg-b { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 10px; border-radius: 14px; background: linear-gradient(160deg, rgba(245,165,36,.12), rgba(var(--acc2-rgb),.10)); border: 1px solid rgba(245,165,36,.3); }
.lg-b span { font-size: 26px; } .lg-b b { font-size: 13px; } .lg-b small { font-size: 11px; color: var(--mut); line-height: 1.4; }
.li.me { background: rgba(var(--acc-rgb),.08); border-radius: 12px; }

/* growth screens */
.ns-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } @media (max-width: 520px) { .ns-g { grid-template-columns: repeat(2, 1fr); } }
.ns-g .cd { text-align: center; padding: 14px 6px; display: grid; gap: 4px; justify-items: center; cursor: pointer; } .ns-g .cd div { font-size: 26px; } .ns-g .cd b { font-size: 13px; }
.ns-g .cd.on { border-color: var(--acc); box-shadow: 0 0 0 2px rgba(var(--acc-rgb),.3); background: rgba(var(--acc-rgb),.08); }
.promo .pr-l { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.promo .pr-k { flex: none; width: 52px; color: var(--mut); font-size: 12px; } .promo .pr-l.ok b { color: var(--ok); } .promo small { display: block; margin-top: 6px; }
.pulse { margin-top: 12px; padding: 12px; border-radius: 14px; background: rgba(var(--acc-rgb),.08); border: 1px solid rgba(var(--acc-rgb),.3); display: grid; gap: 8px; }
.pulse .pl-s { display: flex; gap: 8px; justify-content: space-between; } .pulse .pl-s button { flex: 1; height: 44px; font-size: 24px; border-radius: 12px; border: 1px solid var(--line); background: var(--card2); }
.pulse .pl-s button.on { border-color: var(--acc); background: rgba(var(--acc-rgb),.15); transform: scale(1.06); }
.li.tg .tx { flex: 1; }

/* ── the old system's pages in the new design (screens.js): one look for every list ── */
.scr { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); } .scr > * { min-width: 0; }
.scr-h { display: flex; align-items: center; gap: 10px; }
.scr-t { flex: 1; min-width: 0; } .scr-t h2 { margin: 0; font-family: var(--disp); font-size: 20px; display: flex; align-items: center; gap: 8px; }
.scr-t h2 svg { stroke: var(--acc); } .scr-t small { font-size: 12px; }
.scr-a { display: flex; gap: 6px; align-items: center; }
.scr-k { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; } .scr-k:empty { display: none; }
.scr-k .kpi b { font-size: 18px; }
.scr-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.scr-bar .srch { flex: 1 1 240px; height: 44px; }
.scr-d { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 10px; border-radius: 13px; background: var(--card); border: 1px solid var(--line2); font-size: 12.5px; color: var(--mut); }
.scr-d input { border: 0; background: none; color: var(--txt); font: inherit; font-size: 13px; width: 128px; outline: 0; }
.scr-s { height: 44px; max-width: 220px; padding: 0 10px; border-radius: 13px; background: var(--card); border: 1px solid var(--line2); color: var(--txt); font-size: 13px; }
.scr .chips { padding-bottom: 2px; }
.scr-x { display: contents; } .scr-ft { display: none; height: 44px; } .scr-ft .n { background: var(--acc); color: #04231d; border-radius: 99px; padding: 0 6px; font-size: 11px; }
@media (max-width: 640px) {
  .scr-bar .srch { flex: 1 1 0; min-width: 0; } .scr-ft { display: inline-flex; align-items: center; gap: 4px; }
  .scr-x { display: none; } .scr-bar.open .scr-x { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; }
  .scr-d { flex: 1 1 45%; } .scr-d input { width: 100%; } .scr-s { flex: 1 1 45%; max-width: none; }
  .scr-k { grid-template-columns: repeat(2, minmax(0, 1fr)); } .scr-k .kpi { padding: 9px 11px; } .scr-k .kpi b { font-size: 16px; }
}
/* a computer: a real table, sticky header, sortable */
.dt-w { overflow: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--card); max-height: calc(100dvh - 300px); }
table.dt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
table.dt th { position: sticky; top: 0; z-index: 1; background: var(--card2); color: var(--mut); font-weight: 600; font-size: 12px; text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--line2); white-space: nowrap; cursor: pointer; user-select: none; }
table.dt th.on { color: var(--acc); } table.dt th[data-s=""] { cursor: default; }
table.dt td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.dt td.m { font-weight: 600; } table.dt .n { text-align: end; }
table.dt tbody tr { cursor: pointer; transition: background .12s; } table.dt tbody tr:hover { background: rgba(var(--acc-rgb),.06); }
table.dt tbody tr:last-child td { border-bottom: 0; }
/* a phone: cards */
.sc-li .tx b { white-space: normal; } .sc-li .tx small { white-space: normal; line-height: 1.6; }
.sc-b { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .sc-b .zs { margin: 0; }
.sc-more { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px; color: var(--mut); font-size: 13px; } .sc-more .spin { width: 20px; height: 20px; border-width: 2px; }
.sc-end { text-align: center; font-size: 12px; margin: 14px 0 4px; }
.sw-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line2); flex: none; align-self: center; margin-inline-end: 4px; }
.pre { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; white-space: pre-wrap; word-break: break-word; color: var(--mut); }
.zs.info { color: var(--info); background: rgba(56,189,248,.14); }
/* a row's details */
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.kv > div { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 11px; min-width: 0; }
.kv small { display: block; color: var(--mut); font-size: 11.5px; margin-bottom: 2px; } .kv span { word-break: break-word; font-size: 14px; }
/* the old page's form, full screen */
.mz-sheet.full { max-width: 1100px; height: 94dvh; max-height: 94dvh; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.mz-sheet.full::before { display: none; } .mz-sheet.full .sh-x { z-index: 3; }
.lg-sh { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.lg-shb { display: flex; align-items: center; gap: 10px; padding: 12px 56px 12px 14px; border-bottom: 1px solid var(--line); }
[dir="rtl"] .lg-shb { padding: 12px 14px 12px 56px; } .lg-shb b { flex: 1; min-width: 0; font-family: var(--disp); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-sh iframe { flex: 1; width: 100%; border: 0; background: var(--bg); }
.lg-ld { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; color: var(--mut); font-size: 13px; }
.lg-ld .spin { width: 20px; height: 20px; border-width: 2px; }
.legf { background: var(--bg); }
.legw .lg-ld { position: absolute; inset-inline: 0; top: 52px; z-index: 2; background: var(--bg); }
/* the hubs */
.ad-g { margin: 16px 2px 8px; font-weight: 600; display: flex; align-items: center; gap: 6px; } .ad-g svg { stroke: var(--acc); }
.acts button.nw { border-color: rgba(var(--acc-rgb),.35); background: linear-gradient(160deg, rgba(var(--acc-rgb),.10), rgba(var(--acc2-rgb),.08)), var(--card); }
.acts button.od svg { stroke: var(--mut); }
.acts button { position: relative; }
.acts button .qn { position: absolute; top: 6px; inset-inline-end: 8px; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 99px; font-size: 11.5px; line-height: 20px;
  background: var(--card3); color: var(--mut); font-weight: 700; }
.acts button .qn.on { background: var(--warn); color: #1a1000; }

/* ── the homes: the old system's home of each type, in the new design (home.js) ── */
.oh { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.oh-hi { display: flex; align-items: center; gap: 12px; }
.oh-hi > div { flex: 1; min-width: 0; } .oh-hi small { color: var(--mut); font-size: 12.5px; } .oh-hi h1 { margin: 2px 0 0; font-family: var(--disp); font-size: 22px; }
.oh-plus { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 99px; border: 1px solid rgba(var(--acc2-rgb),.45);
  background: linear-gradient(135deg, rgba(var(--acc-rgb),.14), rgba(var(--acc2-rgb),.18)); color: var(--txt); font-weight: 600; font-size: 13px; }
.oh-plus svg { stroke: var(--acc2); }
.oh-err { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: start; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(242,85,90,.45);
  background: linear-gradient(160deg, rgba(242,85,90,.20), rgba(242,85,90,.07)); color: var(--txt); }
.oh-err b { font-size: 14px; } .oh-err span { grid-row: span 2; align-self: center; font-size: 26px; font-weight: 800; color: var(--bad); }
.oh-err small { color: var(--mut); font-size: 11.5px; direction: ltr; text-align: end; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.oh-big { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: 18px; border: 0; color: #fff; text-align: start; box-shadow: var(--sh); }
.oh-big.bad { background: linear-gradient(135deg, #e5484d, #b4232b); } .oh-big.warn { background: linear-gradient(135deg, #f59e0b, #e5484d); }
.oh-big b { display: block; font-size: 24px; } .oh-big small { opacity: .9; font-size: 13px; } .oh-big em { font-style: normal; font-size: 40px; font-weight: 800; opacity: .95; }
.oh-h { margin: 4px 2px -4px; font-weight: 600; }
.oh-k { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .oh-k { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.oh-k button { display: grid; gap: 4px; justify-items: start; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--txt); text-align: start; }
.oh-k button span svg { stroke: var(--acc); } .oh-k b { font-size: 22px; } .oh-k small { color: var(--mut); font-size: 12.5px; }
.oh-pay table { width: 100%; } table tr.tsum td { font-weight: 700; border-top: 1px solid var(--line2); }
.oh-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .oh-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .oh-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.oh-t { position: relative; display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 96px; padding: 12px 6px; border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--line)); background: linear-gradient(170deg, color-mix(in srgb, var(--tone) 13%, var(--card)), var(--card)); color: var(--txt); text-align: center; transition: transform .08s; }
.oh-t:active { transform: scale(.97); }
.oh-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--tone) 22%, transparent); }
.oh-ic svg { width: 24px; height: 24px; stroke: var(--tone); } .oh-l { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.oh-b { position: absolute; top: 8px; inset-inline-end: 8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--bad); color: #fff; font-size: 12px; line-height: 22px; }
.oh-tr { margin: 0; } .oh-up { text-align: center; font-size: 12px; margin: 0; }
.top .ic.sp svg { stroke: var(--acc2); }
/* segmented choices (report type, product order) */
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--card); border: 1px solid var(--line2); }
.seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border: 0; border-radius: 10px; background: none; color: var(--mut); font-weight: 600; font-size: 13px; }
.seg button.on { background: var(--grad); color: #fff; } .seg button.on svg { stroke: #fff; }
.seg.sm button { height: 34px; padding: 0 10px; font-size: 12.5px; white-space: nowrap; }
.sv-row { display: flex; gap: 8px; align-items: center; } .sv-row .srch { flex: 1; min-width: 0; }
@media (max-width: 520px) { .sv-row { flex-wrap: wrap; } .sv-row .seg { flex-basis: 100%; } }
.pgrp { margin-bottom: 10px; } .pgh { position: sticky; top: calc(var(--top) + var(--safe-t)); z-index: 2; margin: 6px 0; padding: 7px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--bg2) 92%, transparent); backdrop-filter: blur(8px); font-size: 13.5px; border: 1px solid var(--line); }
/* the sales report */
.sr-rep { border-bottom: 1px solid var(--line); } .sr-rep:last-child { border-bottom: 0; }
.sr-br { padding: 4px 8px 12px; display: grid; gap: 8px; }
.sr-b { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px; border-radius: 12px; background: var(--card2); border: 1px solid var(--line); }
.sr-b small { grid-column: 1 / -1; color: var(--mut); font-size: 12px; line-height: 1.7; }
.sr-adv { display: grid; gap: 8px; }
.sr-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-radius: 13px; border: 1px solid var(--line2); background: var(--card); color: var(--txt); font-weight: 600; }
.sr-f b { color: var(--acc); font-size: 13px; }
.sr-f2 { display: grid; grid-template-columns: auto 70px 1fr; gap: 8px; align-items: center; } .sr-f2 span { color: var(--mut); font-size: 13px; font-weight: 600; }
.sr-f2 select, .sr-f2 input { height: 44px; border-radius: 12px; border: 1px solid var(--line2); background: var(--card); color: var(--txt); padding: 0 10px; min-width: 0; }
.sr-ck { display: grid; gap: 4px; max-height: 52vh; overflow: auto; }
.sr-c { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.sr-c input { width: 18px; height: 18px; accent-color: var(--acc); flex: none; }
.ticker i { font-style: normal; }
@media (max-width: 560px) { .top .ic.sp { display: none; } }
.me > div { min-width: 0; } .top .env, .top .pill, .top .ic { flex: none; }
@media (max-width: 480px) { .top .pill span { display: none; } .top .pill { padding: 0 9px; } .top .env { padding: 0 5px; font-size: 10px; } .top { gap: 5px; } }
@media (max-width: 480px) { .hm { display: none; } .scr-t h2 { font-size: 18px; } }

/* ── the sale screen's brand groups: closed / open, what is in the cart on each header ── */
.pg-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 2px 0 8px; }
.pg-sw { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mut); cursor: pointer; }
.pg-sw input { width: 38px; height: 22px; appearance: none; -webkit-appearance: none; border-radius: 99px; background: var(--card3); border: 1px solid var(--line2); position: relative; transition: background .15s; cursor: pointer; }
.pg-sw input::after { content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.pg-sw input:checked { background: var(--acc); } .pg-sw input:checked::after { transform: translateX(16px); }
[dir="rtl"] .pg-sw input:checked::after { transform: translateX(-16px); }
.pgrp .pgh { width: 100%; display: flex; align-items: center; gap: 8px; text-align: start; color: var(--txt); cursor: pointer; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font: inherit; }
.pgrp .pgh .pg-n { font-weight: 700; font-size: 14.5px; } .pgrp .pgh small { flex: 1; font-size: 12px; }
.pgrp .pg-in { margin: 0; } .pg-ch { display: inline-flex; transition: transform .2s; } .pg-ch svg { stroke: var(--mut); }
[dir="rtl"] .pgrp .pg-ch { transform: rotate(180deg); }
.pgrp.on .pg-ch { transform: rotate(90deg) !important; } .pgrp.on .pgh { border-color: color-mix(in srgb, var(--acc) 40%, var(--line)); background: color-mix(in srgb, var(--acc) 7%, var(--card)); }
.pgrp .prods:empty { display: none; } .pgrp.on .prods { margin-top: 8px; animation: pgIn .18s ease-out; }
@keyframes pgIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* ── open invoices: the old page's coloured cards (red = open, yellow = partly paid), chosen ones ticked ── */
.oi-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 6px 2px 10px; color: var(--mut); font-size: 13px; }
.oi-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .oi-g { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .oi-g { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.oi { position: relative; display: grid; gap: 3px; text-align: start; padding: 12px; border-radius: 16px; border: 2px solid var(--line); background: var(--card); color: var(--txt); opacity: .62; transition: opacity .12s, border-color .12s, transform .08s; }
.oi:active { transform: scale(.98); }
.oi.open { border-color: rgba(242,85,90,.35); } .oi.part { border-color: rgba(245,165,36,.4); background: linear-gradient(170deg, rgba(245,165,36,.12), var(--card)); }
.oi.on { opacity: 1; } .oi.open.on { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(242,85,90,.14); } .oi.part.on { border-color: var(--warn); box-shadow: 0 0 0 3px rgba(245,165,36,.16); }
.oi small { color: var(--mut); font-size: 11.5px; } .oi b { font-size: 14px; direction: ltr; text-align: start; } .oi em { font-style: normal; font-size: 20px; font-weight: 800; color: var(--warn); }
.oi-c { position: absolute; top: 10px; inset-inline-end: 10px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line2); display: grid; place-items: center; }
.oi-c svg { width: 14px; height: 14px; stroke: transparent; } .on > .oi-c, .on .pd-h .oi-c { background: var(--acc); border-color: var(--acc); } .on > .oi-c svg, .on .pd-h .oi-c svg { stroke: #04231d; }
.oi-sum { position: sticky; bottom: calc(var(--nav) + var(--safe-b) + 6px); z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px;
  border-radius: 14px; background: color-mix(in srgb, var(--bg2) 94%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--line2); box-shadow: var(--sh); }
.oi-sum b.num { font-size: 18px; color: var(--acc); }
@media (min-width: 1024px) { .oi-sum { bottom: 12px; } }
/* ── prepayment delivery cards ── */
.pd { margin-bottom: 10px; border: 2px solid var(--line); transition: border-color .12s, box-shadow .12s; } .pd.on { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(var(--acc-rgb),.14); }
.pd-h { width: 100%; display: flex; align-items: center; gap: 12px; padding: 4px 2px 10px; border: 0; background: none; color: var(--txt); text-align: start; cursor: pointer; font: inherit; border-bottom: 1px dashed var(--line); }
.pd-h .oi-c { position: static; flex: none; } .pd-h .tx { flex: 1; min-width: 0; display: grid; gap: 2px; } .pd-h .tx b { font-size: 15px; } .pd-h .tx small { color: var(--mut); font-size: 12px; }
.pd-h .vl { display: grid; justify-items: end; } .pd-h .vl b { font-size: 18px; color: var(--acc); } .pd-h .vl small { color: var(--mut); font-size: 11.5px; }
.pd-l { display: flex; align-items: center; gap: 8px; padding: 10px 2px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .pd-l:last-child { border-bottom: 0; }
.pd-l .tx { flex: 1 1 150px; min-width: 0; display: grid; gap: 2px; } .pd-l .tx small { color: var(--mut); font-size: 12px; }
.pd-l .step input { width: 70px; } .pd-all { height: 34px; }
.oi > small:first-of-type { padding-inline-end: 28px; }
.bt.bk { max-width: 100%; min-width: 0; } .bt-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ── a day's payments, each in full ── */
tr.tap { cursor: pointer; } tr.tap:hover td { background: rgba(var(--acc-rgb),.06); } tr.tap td svg { width: 16px; height: 16px; stroke: var(--mut); }
[dir="rtl"] tr.tap td svg { transform: rotate(180deg); }
.pdy { margin-bottom: 10px; display: grid; gap: 8px; }
.pdy-h { display: flex; align-items: center; gap: 10px; } .pdy-h .tx { flex: 1; min-width: 0; display: grid; gap: 2px; } .pdy-h .tx b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdy-h .tx small { color: var(--mut); font-size: 12px; } .pdy-a { font-size: 20px; color: var(--acc); flex: none; }
.pdy-w { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card2); color: var(--txt); text-align: start; }
.pdy-w span { flex: 1; min-width: 0; display: grid; gap: 1px; } .pdy-w small { color: var(--mut); font-size: 12px; } .pdy-w svg { stroke: var(--acc); flex: none; }
[dir="rtl"] .pdy-w > svg:last-child { transform: rotate(180deg); }
.pdy-i { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .pdy-i .zs { height: 28px; padding: 0 10px; font-size: 12px; margin: 0; cursor: pointer; border: 0; } .pdy-i .zs svg { width: 13px; height: 13px; }
.pdy-k { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.pdy-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .pdy-f .zs { margin: 0; }

/* palettes (2026-10-16): each user picks one (kept on his account), the admin sets one per user type; dark and light each */
:root[data-pal="ocean"] { --bg: #050c1a; --bg2: #091527; --card: #0d1c33; --card2: #11243f; --card3: #162c4d; --acc: #38bdf8; --acc2: #6366f1; --acc-rgb: 56,189,248; --acc2-rgb: 99,102,241; }
:root[data-pal="ocean"][data-theme="light"] { --bg: #edf4fb; --bg2: #e2ecf7; --card: #ffffff; --card2: #f5f9fe; --card3: #e9f1fa; --acc: #0284c7; --acc2: #4f46e5; --acc-rgb: 2,132,199; --acc2-rgb: 79,70,229; }
:root[data-pal="royal"] { --bg: #0b0716; --bg2: #120c22; --card: #18112e; --card2: #1e163a; --card3: #261c48; --acc: #a78bfa; --acc2: #ec4899; --acc-rgb: 167,139,250; --acc2-rgb: 236,72,153; }
:root[data-pal="royal"][data-theme="light"] { --bg: #f4f0fb; --bg2: #ebe4f7; --card: #ffffff; --card2: #faf7fe; --card3: #f0eafa; --acc: #7c3aed; --acc2: #db2777; --acc-rgb: 124,58,237; --acc2-rgb: 219,39,119; }
:root[data-pal="sunset"] { --bg: #120a05; --bg2: #1a1009; --card: #22160d; --card2: #2a1b10; --card3: #352214; --acc: #f59e0b; --acc2: #ef4444; --acc-rgb: 245,158,11; --acc2-rgb: 239,68,68; }
:root[data-pal="sunset"][data-theme="light"] { --bg: #fbf5ee; --bg2: #f5ebdf; --card: #ffffff; --card2: #fffaf4; --card3: #f8efe4; --acc: #c2410c; --acc2: #dc2626; --acc-rgb: 194,65,12; --acc2-rgb: 220,38,38; }
:root[data-pal="forest"] { --bg: #04110a; --bg2: #081a10; --card: #0c2416; --card2: #102c1c; --card3: #153623; --acc: #22c55e; --acc2: #14b8a6; --acc-rgb: 34,197,94; --acc2-rgb: 20,184,166; }
:root[data-pal="forest"][data-theme="light"] { --bg: #eef7f1; --bg2: #e2f0e7; --card: #ffffff; --card2: #f6fbf8; --card3: #e8f3ec; --acc: #15803d; --acc2: #0f766e; --acc-rgb: 21,128,61; --acc2-rgb: 15,118,110; }
:root[data-pal="rose"] { --bg: #12060b; --bg2: #1a0a12; --card: #230f19; --card2: #2b1320; --card3: #361827; --acc: #fb7185; --acc2: #f59e0b; --acc-rgb: 251,113,133; --acc2-rgb: 245,158,11; }
:root[data-pal="rose"][data-theme="light"] { --bg: #fbf0f3; --bg2: #f5e4ea; --card: #ffffff; --card2: #fff7f9; --card3: #f9ebef; --acc: #e11d48; --acc2: #d97706; --acc-rgb: 225,29,72; --acc2-rgb: 217,119,6; }
:root[data-pal="gold"] { --bg: #0a0b14; --bg2: #10121e; --card: #161928; --card2: #1b1f31; --card3: #22273c; --acc: #d4a72c; --acc2: #f59e0b; --acc-rgb: 212,167,44; --acc2-rgb: 245,158,11; }
:root[data-pal="gold"][data-theme="light"] { --bg: #f8f6ef; --bg2: #f0ece0; --card: #ffffff; --card2: #fdfbf6; --card3: #f4f0e5; --acc: #a16207; --acc2: #b45309; --acc-rgb: 161,98,7; --acc2-rgb: 180,83,9; }
:root[data-pal="midnight"] { --bg: #000000; --bg2: #07080b; --card: #0e1014; --card2: #14171d; --card3: #1b1f27; --acc: #22d3ee; --acc2: #a855f7; --acc-rgb: 34,211,238; --acc2-rgb: 168,85,247; }
:root[data-pal="midnight"][data-theme="light"] { --bg: #f3f4f6; --bg2: #e9ebef; --card: #ffffff; --card2: #fafafa; --card3: #eef0f3; --acc: #0891b2; --acc2: #9333ea; --acc-rgb: 8,145,178; --acc2-rgb: 147,51,234; }
:root[data-pal="midnight"] body::before { opacity: .5; }
.pals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.pal { display: grid; justify-items: center; gap: 5px; padding: 8px 4px; border-radius: 14px; border: 2px solid var(--line); background: var(--card2); font-size: 11.5px; font-weight: 600; color: var(--mut); }
.pal i { width: 34px; height: 34px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 3px rgba(255,255,255,.25), 0 6px 14px -6px rgba(0,0,0,.6); }
.pal.on { border-color: var(--acc); color: var(--txt); box-shadow: 0 0 0 3px rgba(var(--acc-rgb), .18); }
/* one search for everything (search.js) */
/* Z.E.R.O inside «مسار»: the shield */
.zsh { position: relative; display: inline-grid; place-items: center; width: var(--zs, 30px); height: calc(var(--zs, 30px) * 1.08); flex: none;
  clip-path: polygon(50% 0, 100% 16%, 94% 64%, 50% 100%, 6% 64%, 0 16%); background: linear-gradient(160deg, #6fe0ff, #0d6ea8 55%, #0a3b63); filter: drop-shadow(0 0 6px rgba(25,184,255,.55)); }
.zsh::before { content: ''; position: absolute; inset: 1.5px; clip-path: inherit; background: #051a2b; }
.zsh img { position: relative; width: 72%; height: auto; border-radius: 50%; margin-top: -8%; }
.zsh.xs { --zs: 18px; } .zsh.sm { --zs: 26px; } .zsh.md { --zs: 46px; } .zsh.lg { --zs: 78px; }
.zbtn { background: radial-gradient(circle at 50% 40%, rgba(111,224,255,.22), transparent 70%) !important; }
.zbtn .zsh { animation: zpulse 3s ease-in-out infinite; } @keyframes zpulse { 50% { filter: drop-shadow(0 0 11px rgba(25,184,255,.9)); } }
.gate-mk { position: relative; display: inline-block; margin-bottom: 4px; } .gate-bd { position: absolute; bottom: -4px; inset-inline-end: -14px; width: 40px; height: 40px; }
.gate-bd svg { width: 40px; height: 40px; }
.zfam { font-size: 11.5px; letter-spacing: .3em; color: #6fe0ff; font-weight: 600; direction: ltr; margin: -4px 0 8px; } .zfam b { letter-spacing: .4em; color: var(--txt); }
.zabout { display: flex; gap: 12px; align-items: flex-start; border-color: rgba(111,224,255,.3); background: linear-gradient(135deg, rgba(25,184,255,.08), transparent 60%), var(--card); }
.zabout > div { display: grid; gap: 4px; } .zabout small { font-size: 12.5px; line-height: 1.7; color: var(--mut); }
.zpow { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 0; font-size: 11.5px; color: var(--mut2); } .zpow b { color: #6fe0ff; letter-spacing: .2em; direction: ltr; }
.near-o { display: grid; gap: 6px; margin-bottom: 8px; padding: 8px 10px; border-radius: 12px; background: var(--card2); border: 1px solid var(--line); font-size: 12.5px; color: var(--mut); }
.near-o b { color: var(--txt); } .near-o .seg button { font-size: 11.5px; padding: 0 6px; } .near-o .warn { color: var(--warn); }
.gs-in { position: sticky; top: 0; z-index: 2; height: 52px; border-color: var(--acc); box-shadow: 0 0 0 4px rgba(var(--acc-rgb), .12); }
.gs-in .spin { width: 18px; height: 18px; flex: none; }
.gs-f { margin: 10px 0 4px; }
.gs-l .gs-h { display: flex; align-items: center; gap: 6px; margin: 14px 2px 6px; font-size: 12.5px; font-weight: 700; }
.gs-l .gs-h span { padding: 1px 7px; border-radius: 99px; background: var(--card3); font-size: 11px; }
.gs-g { padding: 4px; display: grid; gap: 2px; }
.gs-r { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 12px; background: none; text-align: start; color: var(--txt); }
.gs-r:hover, .gs-r:focus-visible { background: var(--card2); outline: 0; }
.gs-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--card3); }
.gs-ic svg { width: 19px; height: 19px; stroke: var(--acc); }
.gs-ic.warn svg { stroke: var(--warn); } .gs-ic.ok svg { stroke: var(--ok); } .gs-ic.bad svg { stroke: var(--bad); } .gs-ic.acc svg { stroke: var(--acc2); }
.gs-tx { flex: 1; min-width: 0; display: grid; gap: 1px; }
.gs-tx b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-tx small { color: var(--mut); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-tx em { font-style: normal; color: var(--mut2); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-v { display: grid; justify-items: end; gap: 3px; flex: none; } .gs-v b { font-size: 14px; } .gs-v .chip { height: 19px; font-size: 10.5px; padding: 0 7px; }
.gs-l mark { background: rgba(var(--acc-rgb), .25); color: inherit; border-radius: 4px; padding: 0 1px; }
.gs-tips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--mut); font-size: 13px; margin-top: 8px; }
.gs-wait { padding: 26px 10px; text-align: center; color: var(--mut); font-size: 13px; }
.gs-ms { text-align: center; font-size: 11px; margin-top: 10px; }

/* the field tools (plus.js): the barcode scanner, the signature pad, Zero the coach */
.scan { position: fixed; inset: 0; z-index: 900; background: #000; display: grid; grid-template-rows: 1fr auto; }
.scan video { width: 100%; height: 100%; object-fit: cover; }
.scan-f { position: absolute; inset: 0; bottom: 190px; display: grid; place-items: center; pointer-events: none; }
.scan-f i { width: min(78vw, 340px); height: 150px; border-radius: 18px; box-shadow: 0 0 0 9999px rgba(0,0,0,.45); border: 3px solid rgba(255,255,255,.9); position: relative; overflow: hidden; }
.scan-f i::after { content: ''; position: absolute; inset-inline: 8px; height: 2px; top: 50%; background: var(--acc); box-shadow: 0 0 12px var(--acc); animation: scanL 1.6s ease-in-out infinite alternate; }
@keyframes scanL { from { transform: translateY(-60px); } to { transform: translateY(60px); } }
.scan-b { position: relative; z-index: 1; padding: 14px 16px calc(16px + var(--safe-b)); background: var(--bg2); display: grid; gap: 10px; border-radius: 18px 18px 0 0; }
.scan-b p { margin: 0; text-align: center; color: var(--mut); font-size: 13px; } .scan-b .srch { display: flex; gap: 8px; }
.srch .ic.sm { flex: none; margin-inline-start: 4px; }
.sgp { position: relative; height: 170px; border-radius: 14px; background: #fff; border: 1.5px dashed rgba(15,23,42,.25); overflow: hidden; }
.sgp canvas { width: 100%; height: 100%; display: block; }
.sgp-l { position: absolute; inset: 0; display: grid; place-items: center; color: #94a3b8; font-size: 14px; pointer-events: none; }
.sgp-x { position: absolute; top: 6px; inset-inline-end: 6px; background: rgba(15,23,42,.06); color: #0f172a; }
.coach-h { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; } .coach-h b { display: block; font-size: 16px; } .coach-h small { color: var(--mut); }
.coach-t p { margin: 0 0 8px; padding: 8px 10px; border-radius: 12px; line-height: 1.7; transition: background .2s; }
.coach-t p.on { background: rgba(var(--acc-rgb), .14); }

/* every user's own app (layout.js): the editor, the switches, compact density, the offline strip */
.lay-tabs { overflow-x: auto; scrollbar-width: none; } .lay-tabs button { white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.lay-tabs::-webkit-scrollbar { display: none; }
.lay-l { display: grid; gap: 6px; }
.lay-r { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.lay-h { cursor: grab; color: var(--mut); font-size: 20px; line-height: 1; touch-action: none; padding: 0 2px; }
.lay-i { color: var(--acc); display: grid; place-items: center; }
.lay-t { flex: 1; min-width: 0; font-weight: 600; }
.lay-s { height: 32px; border-radius: 10px; background: var(--card2); color: var(--txt); border: 1px solid var(--line2); padding: 0 6px; font: inherit; font-size: 12.5px; }
.lay-star { background: none; border: 0; font-size: 18px; opacity: .25; filter: grayscale(1); cursor: pointer; }
.lay-star.on { opacity: 1; filter: none; }
.lay-ghost { opacity: .35; }
.lay-chips { display: flex; flex-wrap: wrap; gap: 6px; } .lay-chips button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 99px; border: 1px solid var(--line2); background: var(--card2); color: var(--txt); font: inherit; font-size: 13px; }
.lay-chips button.on { border-color: var(--acc); background: rgba(var(--acc-rgb), .14); color: var(--acc); }
.lay-f { position: sticky; bottom: calc(var(--nav) + 8px); display: flex; gap: 8px; margin-top: 14px; padding: 10px; border-radius: 16px; background: var(--bg2); border: 1px solid var(--line2); box-shadow: var(--sh); }
.lay-f .bt.big { flex: 1; }
.sw2 { position: relative; width: 44px; height: 26px; flex: none; }
.sw2 input { opacity: 0; width: 0; height: 0; position: absolute; }
.sw2 i { position: absolute; inset: 0; border-radius: 99px; background: var(--card3); border: 1px solid var(--line2); transition: background .2s; }
.sw2 i::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.sw2 input:checked + i { background: var(--acc); }
.sw2 input:checked + i::after { transform: translateX(18px); }
:root[dir="rtl"] .sw2 input:checked + i::after { transform: translateX(-18px); }
.oh-hi.sm h1 { font-size: 20px; } .oh-big.sm { padding: 10px 14px; } .oh-big.sm b { font-size: 18px; }
.oh-k.sm { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.oh-k.sm button { padding: 8px 6px; gap: 2px; border-radius: 12px; justify-items: center; text-align: center; } .oh-k.sm b { font-size: 15px; } .oh-k.sm small { font-size: 10.5px; } .oh-k.sm span svg { width: 15px; height: 15px; }
.oh-tiles-s .oh-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .oh-tiles-s .oh-t { min-height: 64px; padding: 8px 6px; } .oh-tiles-s .oh-l { font-size: 11px; }
:root[data-density="compact"] { --fs: 14px; } :root[data-density="compact"] .cd { padding: 11px 12px; } :root[data-density="compact"] .li { padding-block: 8px; }
:root[data-density="compact"] .acts button { min-height: 72px; } :root[data-density="compact"] .h1 h2 { font-size: 19px; }
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
.kept { position: fixed; inset-inline: 12px; top: calc(var(--top) + 8px); z-index: 300; padding: 8px 12px; border-radius: 12px; background: #e48a00; color: #160c00; font-weight: 600; font-size: 13px; text-align: center; transform: translateY(-140%); opacity: 0; transition: .3s; pointer-events: none; }
.kept.on { transform: none; opacity: 1; }

/* the end of the day (dayend.js) */
.de-c{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:18px;border:1px solid var(--line,#2a4a62);background:var(--card,#0d2738);flex-wrap:wrap}
.de-c .tx{flex:1;min-width:170px}.de-c .tx b{display:block;font-size:16px}.de-c .tx small{display:block;color:var(--mut,#8fb2c5);font-size:12.5px;margin-top:2px}
.de-i{width:46px;height:46px;flex:0 0 46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(25,184,255,.14);color:var(--acc,#26d8ff)}
.de-c.closed .de-i{background:rgba(34,212,126,.16);color:#22d47e}.de-c.ext .de-i{background:rgba(255,176,32,.16);color:#ffb020}.de-c.open{border-color:rgba(25,184,255,.5)}
.de-b{display:flex;gap:6px;flex-wrap:wrap}.de-c small.warn{color:#ffb020}.de-c small.bad{color:#ff8b98}
#hDay.sm .de-c{padding:10px 12px}#hDay.sm .de-c .tx small{display:none}
.de-tabs{margin:10px 0}.de-t{overflow-x:auto;padding:0}.de-t table{width:100%;border-collapse:collapse;font-size:13.5px}.de-t th{text-align:start;padding:9px 10px;color:var(--mut,#8fb2c5);font-weight:600;border-bottom:1px solid var(--line,#2a4a62)}
.de-t td{padding:9px 10px;border-bottom:1px solid rgba(127,166,191,.12)}.de-t a{color:var(--acc,#26d8ff);cursor:pointer}
.de-lock{text-align:center;padding:40px 18px}.de-lock .de-li{width:84px;height:84px;margin:0 auto 14px;border-radius:26px;display:flex;align-items:center;justify-content:center;background:rgba(34,212,126,.16);color:#22d47e}
.de-lock h2{margin:0 0 8px}.de-lock .bt{margin-top:16px}
.kpi.bad b{color:#ff8b98}.chip.ok{color:#22d47e}.chip.bad{color:#ff8b98}

/* «زيرو كونكت» inside «مسار» (zconnect.js): the frame over everything — hidden, the whole screen, or a call's pill */
#zc-frame { position: fixed; z-index: 2000; border: 0; background: transparent; color-scheme: normal; transition: opacity .25s; }
#zc-frame.hidden { inset: auto; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#zc-frame.full { inset: 0; width: 100%; height: 100%; opacity: 1; }
#zc-frame.pill { inset: auto auto calc(78px + env(safe-area-inset-bottom, 0px)) 10px; width: min(330px, calc(100% - 20px)); height: 66px; opacity: 1; border-radius: 40px; box-shadow: 0 14px 34px rgba(0,0,0,.5); }
body.zc-full { overflow: hidden; }
.ic.zcb svg { stroke: var(--acc); }
.ic.zcb .dot { background: #ff3b4f; color: #fff; }
.ic.zcb.ringing { animation: zcring 1s ease-in-out infinite; background: color-mix(in srgb, #22d47e 30%, var(--card)); }
.ic.zcb.ringing svg { stroke: #22d47e; }
@keyframes zcring { 0%, 100% { transform: rotate(0); } 15%, 45% { transform: rotate(-14deg); } 30%, 60% { transform: rotate(14deg); } 75% { transform: rotate(0); } }

/* ntf — the notifications page #notify and the update page #update (notify.js, round 50) */
.li .nt-w small { white-space: normal; line-height: 1.5; overflow: visible; }
.li .nt-w b { white-space: normal; overflow: visible; }
.nt-when { display: flex !important; align-items: center; gap: 5px; color: var(--acc) !important; font-size: 12px !important; }
.nt-when svg { width: 13px; height: 13px; flex: none; }
.nt-lock { font-size: 12px; margin-inline-start: 4px; }
.nt-t input:disabled + i { opacity: .55; }
.nt-gi { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: var(--card3); font-size: 15px; }
.nt-gi svg { width: 16px; height: 16px; }
.nt-q { display: flex; gap: 10px; padding: 4px 2px 10px; }
.nt-q label { flex: 1; display: grid; gap: 4px; font-size: 12.5px; color: var(--mut); }
.nt-off .nt-g { opacity: .45; filter: grayscale(.6); }
.nt-find { margin-top: 12px; }
.nt-f { justify-content: space-between; }
.nt-foot { font-size: 12px; margin: 10px 2px 4px; text-align: center; }
.nt-r { cursor: pointer; }
.nt-r.new .ic2 { color: var(--warn); border-color: rgba(245,165,36,.45); }
.nt-r.new b::after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); margin-inline-start: 6px; vertical-align: middle; }
.nt-sub { font-size: 12px; font-weight: 600; margin: 10px 2px 2px; }
.nt-none { font-size: 13px; margin: 2px; }
.nt-go { cursor: pointer; }
.nt-away { text-align: center; padding: 26px 18px; }
.nt-away h3 { margin: 12px 0 8px; font-family: var(--disp); font-size: 19px; }
.nt-away p { margin: 0; font-size: 13.5px; line-height: 1.7; }
.nt-away-i { display: grid; place-items: center; }
.nt-up { display: grid; gap: 12px; text-align: center; }
.nt-up-i { display: grid; place-items: center; } .nt-up-i .logo { width: 72px; height: 72px; }
.nt-up-v { display: flex; justify-content: center; gap: 26px; } .nt-up-v b { display: block; font-size: 20px; margin-top: 2px; }
.nt-up p { margin: 0; font-size: 13.5px; line-height: 1.6; } .nt-up p.ok { color: var(--ok); font-weight: 600; }
.nt-up .row-bt { justify-content: center; }
.nt-notes { text-align: start; margin: 0; padding-inline-start: 20px; font-size: 13px; color: var(--mut); line-height: 1.7; }
/* /ntf */