/* MotoService Cambodia — Workshop OS v2.1
   Palette drawn from the workshop: gunmetal tools, concrete floor,
   the blue lettering of Cambodian number plates, engine-oil amber. */
:root{
  /* Color */
  --c-base:#edefec;        /* Concrete floor */
  --c-surface:#ffffff;
  --c-surface-2:#f6f7f5;
  --c-ink:#1b232b;         /* Gunmetal */
  --c-ink-2:#33404b;
  --c-ink-muted:#5e6b75;
  --c-ink-faint:#6c7780;
  --c-line:#dde1dc;
  --c-line-2:#eceeea;
  --c-accent:#1e4fa3;      /* Plate blue */
  --c-accent-strong:#163c7e;
  --c-accent-tint:#e8eef9;
  --c-oil:#c98410;         /* Engine-oil amber */
  --c-oil-tint:#fbf1dc;
  --c-success:#2f7d4f;     /* Grease green */
  --c-success-tint:#e4f2e9;
  --c-error:#b93a2e;       /* Brake red */
  --c-error-tint:#f8e6e3;
  --c-violet:#6a4fb6; --c-violet-tint:#eeeafa;
  --c-side:#1b232b; --c-side-2:#26313b; --c-side-txt:#aeb8c0;

  /* Type */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Kantumruy Pro","Noto Sans Khmer",system-ui,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --step--1:.8125rem; --step-0:.9375rem; --step-1:1.125rem; --step-2:1.375rem; --step-3:1.75rem; --step-4:clamp(1.75rem,1.2rem + 1.8vw,2.5rem);

  /* Space (8px system) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-12:48px; --s-16:64px;

  /* Shape & depth — varied by role */
  --r-plate:4px; --r-sm:6px; --r-md:10px; --r-lg:16px;
  --sh-lift:0 1px 0 rgba(27,35,43,.04);
  --sh-float:0 10px 30px rgba(27,35,43,.12);
  --sh-modal:0 28px 70px rgba(27,35,43,.28);
  --ease-out:cubic-bezier(.2,.8,.2,1); --dur:200ms;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font);color:var(--c-ink);background:var(--c-base);font-size:var(--step-0);line-height:1.55;-webkit-font-smoothing:antialiased}
body.km{line-height:1.75}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--c-accent)}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- Number plate (signature element) ---------- */
.plate{display:inline-flex;flex-direction:column;align-items:stretch;background:#fff;border:1.5px solid var(--c-accent);border-radius:var(--r-plate);line-height:1;vertical-align:middle;box-shadow:inset 0 0 0 1px #fff,0 1px 0 rgba(0,0,0,.06);white-space:nowrap}
.plate-k{font-size:7.5px;color:var(--c-accent);text-align:center;padding:2px 6px 1px;letter-spacing:.02em;font-weight:600}
.plate-n{font:700 12px/1 var(--mono);color:#111;padding:1px 7px 3px;letter-spacing:.06em;text-align:center}
.plate.lg{border-width:2px;border-radius:6px}
.plate.lg .plate-k{font-size:10px;padding:4px 10px 1px}
.plate.lg .plate-n{font-size:19px;padding:2px 12px 6px}
.plate.xl{border-width:2.5px;border-radius:8px}
.plate.xl .plate-k{font-size:13px;padding:6px 14px 2px}
.plate.xl .plate-n{font-size:30px;padding:2px 18px 9px}

/* ---------- App shell ---------- */
.app{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
.side{background:var(--c-side);color:var(--c-side-txt);display:flex;flex-direction:column;padding:var(--s-5) var(--s-3);position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-2) var(--s-6);color:#fff}
.brand .mark{width:38px;height:38px;border-radius:var(--r-md);background:var(--c-accent);display:grid;place-items:center}
.brand .mark svg{width:22px;height:22px;stroke:#fff}
.brand b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.brand small{display:block;font-size:12px;color:#8c98a2}
.nav-label{font-size:12px;color:#77838d;padding:var(--s-4) var(--s-3) var(--s-1)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{all:unset;cursor:pointer;display:flex;align-items:center;gap:var(--s-3);min-height:40px;padding:0 var(--s-3);border-radius:var(--r-sm);color:var(--c-side-txt);font-weight:500;font-size:14.5px}
.nav button:hover{background:var(--c-side-2);color:#eef2f5}
.nav button:focus-visible{outline:2px solid #8fb0ea}
.nav button.on{background:#fff;color:var(--c-ink)}
.nav button.on svg{stroke:var(--c-accent)}
.nav .count{margin-left:auto;font-size:12px;font-weight:600;color:#cfd6dc;font-variant-numeric:tabular-nums}
.nav button.on .count{color:var(--c-ink-muted)}
.nav .count.warn{color:#f0b54a}
.nav button.on .count.warn{color:var(--c-oil)}
.side-foot{margin-top:auto;padding-top:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3)}
.side-lang{display:none}
.mode{border-top:1px solid #2e3a45;padding:var(--s-3) var(--s-2) 0;font-size:13px}
.mode .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c-oil);margin-right:6px}
.mode.live .dot{background:#4fbf7a}
.mode b{color:#e6ebef;font-weight:600}
.mode p{margin:2px 0 0;color:#8c98a2;font-size:12.5px}
.scrim{display:none}
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:6;background:var(--c-surface);border-bottom:1px solid var(--c-line);display:flex;align-items:center;gap:var(--s-4);padding:0 var(--s-8);height:64px}
.top .menu{display:none}
.gsearch{position:relative;flex:1;max-width:480px}
.gsearch input{width:100%;height:42px;border:1px solid var(--c-line);background:var(--c-surface-2);border-radius:var(--r-md);padding:0 40px 0 40px;outline:none;font-size:15px}
.gsearch input:focus{background:#fff;border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-tint)}
.gsearch>svg{position:absolute;left:13px;top:12px;color:var(--c-ink-faint)}
.gsearch kbd{position:absolute;right:10px;top:11px;font:600 12px var(--mono);color:var(--c-ink-faint);border:1px solid var(--c-line);border-radius:4px;padding:0 6px;background:#fff}
.gresults{position:absolute;top:48px;left:0;right:0;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);box-shadow:var(--sh-float);padding:var(--s-1);max-height:400px;overflow:auto}
.gresults button{all:unset;cursor:pointer;display:flex;gap:var(--s-3);align-items:center;width:100%;box-sizing:border-box;padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);min-height:44px}
.gresults button:hover,.gresults button.hl{background:var(--c-surface-2)}
.gresults .k{font-size:12px;color:var(--c-ink-faint);margin-left:auto}
.gresults .none{padding:var(--s-4);color:var(--c-ink-muted);text-align:center}
.top-right{margin-left:auto;display:flex;align-items:center;gap:var(--s-3)}
.seg{display:inline-flex;background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:var(--r-md);padding:3px}
.seg button{border:0;background:transparent;min-height:34px;padding:0 var(--s-3);border-radius:7px;font-size:14px;font-weight:600;color:var(--c-ink-muted)}
.seg button.on{background:#fff;color:var(--c-ink);box-shadow:0 1px 2px rgba(27,35,43,.12)}
.side .seg{background:var(--c-side-2);border-color:#33404b}
.side .seg button{color:#aeb8c0}
.side .seg button.on{background:#fff;color:var(--c-ink)}
.user{display:flex;align-items:center;gap:var(--s-2);padding-left:var(--s-3);border-left:1px solid var(--c-line)}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.user .meta{line-height:1.3}
.user .meta b{display:block;font-size:14px}
.user .meta small{color:var(--c-ink-muted);font-size:12.5px;text-transform:capitalize}

.content{padding:var(--s-8) var(--s-8) var(--s-16);max-width:1400px;width:100%;margin:0 auto}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-6);flex-wrap:wrap}
.page-head h1{margin:0;font-size:var(--step-4);line-height:1.15;letter-spacing:-.02em;font-weight:700}
.page-head p{margin:var(--s-1) 0 0;color:var(--c-ink-muted)}
.page-head .acts{display:flex;gap:var(--s-2);flex-wrap:wrap}
.banner{display:flex;gap:var(--s-3);align-items:flex-start;background:var(--c-oil-tint);border-left:3px solid var(--c-oil);color:#6b4708;padding:var(--s-3) var(--s-4);border-radius:0 var(--r-sm) var(--r-sm) 0;margin-bottom:var(--s-6);font-size:14px}
.banner svg{color:var(--c-oil);margin-top:2px}
.banner.info{background:var(--c-accent-tint);border-color:var(--c-accent);color:#1d3765}
.banner.info svg{color:var(--c-accent)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:42px;padding:0 var(--s-4);border-radius:var(--r-sm);border:1px solid transparent;font-weight:600;font-size:14.5px;white-space:nowrap;background:var(--c-accent);color:#fff;transition:background var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.btn:hover{background:var(--c-accent-strong)}
.btn:active{transform:translateY(1px)}
.btn svg.i{width:17px;height:17px}
.btn.ghost{background:#fff;color:var(--c-ink-2);border-color:var(--c-line)}
.btn.ghost:hover{background:var(--c-surface-2);border-color:#c9cec8}
.btn.soft{background:var(--c-accent-tint);color:var(--c-accent-strong)}
.btn.soft:hover{background:#d9e3f5}
.btn.danger{background:var(--c-error);color:#fff}
.btn.danger.quiet{background:var(--c-error-tint);color:var(--c-error)}
.btn.sm{min-height:34px;padding:0 var(--s-3);font-size:13.5px}
.btn.icon{width:42px;padding:0}
.btn.sm.icon{width:34px}
.btn.block{width:100%;min-height:48px;font-size:16px}
.btn:disabled{opacity:.5;cursor:not-allowed}
@media (pointer:coarse){.btn.sm{min-height:40px}.btn.sm.icon{width:40px}}

/* ---------- Panels ---------- */
.card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md)}
.card-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);padding:var(--s-5) var(--s-6) 0}
.card-h h2{font-size:var(--step-1);margin:0;font-weight:700;letter-spacing:-.01em}
.card-h .sub{color:var(--c-ink-muted);font-size:14px}
.card-b{padding:var(--s-4) var(--s-6) var(--s-6)}
.grid{display:grid;gap:var(--s-6)}
.dash-a{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.dash-b{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}

/* Workshop floor (dashboard hero) */
.floor{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s-4);margin-bottom:var(--s-6)}
.bay{all:unset;box-sizing:border-box;min-width:0;cursor:pointer;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3);position:relative;transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.bay::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--st,#8b969e)}
.bay:hover{border-color:#c4cac3;box-shadow:var(--sh-float)}
.bay:focus-visible{outline:2px solid var(--c-accent)}
.bay .w{font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bay .m{font-size:13.5px;color:var(--c-ink-muted)}
.bay .row{display:flex;justify-content:space-between;align-items:center;gap:var(--s-2);flex-wrap:wrap;margin-top:auto}
.bay .t{font-size:13px;color:var(--c-ink-faint)}
.bay.new{border-style:dashed;align-items:center;justify-content:center;color:var(--c-accent);font-weight:600;min-height:160px;background:transparent}
.bay.new::before{display:none}
.bay.new:hover{background:var(--c-accent-tint);box-shadow:none}
.floor-empty{background:var(--c-surface);border:1px dashed #c4cac3;border-radius:var(--r-md);padding:var(--s-8);text-align:center;color:var(--c-ink-muted);margin-bottom:var(--s-6)}
.floor-empty b{display:block;color:var(--c-ink);font-size:var(--step-1);margin-bottom:var(--s-1)}

/* Ledger strip */
.ledger{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);margin-bottom:var(--s-6)}
.ledger>div{padding:var(--s-5) var(--s-6);border-left:1px solid var(--c-line-2)}
.ledger>div:first-child{border-left:0}
.ledger .lbl{color:var(--c-ink-muted);font-size:14px}
.ledger .val{font-size:var(--step-3);font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-top:2px;font-variant-numeric:tabular-nums}
.ledger .hint{font-size:13px;color:var(--c-ink-faint)}
.ledger .val.warn{color:var(--c-oil)}
.ledger .val.bad{color:var(--c-error)}

/* chart */
.chart{width:100%;height:auto;display:block}
.chart .bar{fill:var(--c-accent)}
.chart .bar.zero{fill:var(--c-line)}
.chart .bar:hover{fill:var(--c-accent-strong)}
.chart text{font-size:11px;fill:var(--c-ink-faint);font-family:var(--font)}
.chart .grid-l{stroke:var(--c-line-2)}
.legend-total{font-size:var(--step-3);font-weight:700;letter-spacing:-.02em;margin-top:2px}

.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) 0;border-top:1px solid var(--c-line-2);min-height:56px}
.li:first-child{border-top:0}
.li .grow{flex:1;min-width:0}
.li .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .s{color:var(--c-ink-muted);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li.click{cursor:pointer;border-radius:var(--r-sm);margin:0 calc(-1 * var(--s-2));padding-left:var(--s-2);padding-right:var(--s-2)}
.li.click:hover{background:var(--c-surface-2)}
.flag{width:10px;height:10px;border-radius:2px;flex:none}

/* ---------- Status chips ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:2px 10px;border-radius:999px;white-space:nowrap;background:var(--c-surface-2);color:var(--c-ink-2)}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.chip.nodot::before{display:none}
.st-received{background:#eef0ee;color:#56616a}
.st-diagnosing{background:var(--c-accent-tint);color:var(--c-accent)}
.st-awaiting_approval{background:var(--c-oil-tint);color:#9a630a}
.st-in_progress{background:var(--c-violet-tint);color:var(--c-violet)}
.st-completed,.st-paid,.st-ok{background:var(--c-success-tint);color:var(--c-success)}
.st-cancelled,.st-void{background:#f0f1ef;color:#7d878e}
.st-unpaid,.st-low{background:var(--c-error-tint);color:var(--c-error)}
.mono{font-family:var(--mono);font-size:13px}
.muted{color:var(--c-ink-muted)}
.faint{color:var(--c-ink-faint)}
.num{font-variant-numeric:tabular-nums;text-align:right}
.strong{font-weight:600}

/* ---------- Tables ---------- */
.toolbar{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4);border-bottom:1px solid var(--c-line);flex-wrap:wrap}
.tsearch{position:relative;flex:1;min-width:220px;max-width:360px}
.tsearch input{width:100%;height:42px;border:1px solid var(--c-line);border-radius:var(--r-sm);padding:0 12px 0 38px;outline:none;background:#fff;font-size:15px}
.tsearch input:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-tint)}
.tsearch svg{position:absolute;left:12px;top:12px;color:var(--c-ink-faint)}
.toolbar .sp{flex:1}
.filters{display:flex;gap:var(--s-1);flex-wrap:wrap}
.filters button{border:1px solid transparent;background:transparent;border-radius:var(--r-sm);min-height:34px;padding:0 var(--s-3);font-size:14px;font-weight:500;color:var(--c-ink-muted)}
.filters button:hover{background:var(--c-surface-2);color:var(--c-ink)}
.filters button.on{background:var(--c-ink);color:#fff}
.twrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font-size:13px;color:var(--c-ink-muted);font-weight:600;text-align:left;padding:var(--s-3) var(--s-4);background:var(--c-surface-2);border-bottom:1px solid var(--c-line);white-space:nowrap;user-select:none}
th.sortable{cursor:pointer}
th.sortable:hover{color:var(--c-ink)}
th .arr{opacity:0;margin-left:4px}
th.sortable:hover .arr{opacity:.5}
th.sorted{color:var(--c-ink)}
th.sorted .arr{opacity:1;color:var(--c-accent)}
td{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--c-line-2);vertical-align:middle}
tbody tr:hover{background:#fafbf9}
tbody tr.click{cursor:pointer}
td.act{text-align:right;white-space:nowrap;width:1%}
td.act .btn+.btn{margin-left:var(--s-1)}
td .row{display:flex;align-items:center;gap:var(--s-3)}
.tfoot{padding:var(--s-3) var(--s-4);color:var(--c-ink-muted);font-size:13.5px}
.empty{padding:var(--s-12) var(--s-5);text-align:center;color:var(--c-ink-muted)}
.empty .ei{width:52px;height:52px;border-radius:50%;background:var(--c-surface-2);display:grid;place-items:center;margin:0 auto var(--s-3);color:var(--c-ink-faint)}
.empty .ei svg{width:24px;height:24px}
.empty b{display:block;color:var(--c-ink);font-size:var(--step-1);margin-bottom:2px}
.stock{display:flex;align-items:center;gap:var(--s-2);min-width:130px}
.stock .bar{flex:1;height:6px;background:var(--c-line-2);border-radius:6px;overflow:hidden;max-width:80px}
.stock .bar i{display:block;height:100%;background:var(--c-success)}
.stock.low .bar i{background:var(--c-error)}
.stepper{display:inline-flex;border:1px solid var(--c-line);border-radius:var(--r-sm);overflow:hidden}
.stepper button{border:0;background:#fff;width:30px;height:30px;color:var(--c-ink-2);font-size:16px}
.stepper button+button{border-left:1px solid var(--c-line)}
.stepper button:hover{background:var(--c-surface-2)}

/* ---------- Repair board ---------- */
.board{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:var(--s-4);overflow-x:auto;padding-bottom:var(--s-2);scroll-snap-type:x proximity}
.col{background:#e3e6e2;border-radius:var(--r-md);padding:var(--s-3);min-height:220px;display:flex;flex-direction:column;gap:var(--s-3);scroll-snap-align:start}
.col-h{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-1) var(--s-1) 0;font-weight:700;font-size:14.5px}
.col-h .n{margin-left:auto;color:var(--c-ink-muted);font-weight:600;font-variant-numeric:tabular-nums}
.col-h i{width:10px;height:10px;border-radius:2px}
.jcard{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-sm);padding:var(--s-3);cursor:pointer;transition:box-shadow var(--dur) var(--ease-out)}
.jcard:hover{box-shadow:var(--sh-float)}
.jcard .top-l{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s-2)}
.jcard .ref{font:500 12px var(--mono);color:var(--c-ink-faint)}
.jcard .w{font-weight:600;margin-bottom:2px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jcard .m{color:var(--c-ink-muted);font-size:13.5px}
.jcard .jf{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--c-line-2)}
.jcard .amt{font-weight:700;font-variant-numeric:tabular-nums}
.col .more{all:unset;cursor:pointer;text-align:center;font-size:14px;font-weight:600;color:var(--c-accent);padding:var(--s-2);min-height:28px}
.col .more:hover{text-decoration:underline}
.col .none{color:var(--c-ink-faint);font-size:14px;text-align:center;padding:var(--s-5) 0}

/* ---------- Plans ---------- */
.plans{grid-template-columns:repeat(3,minmax(0,1fr))}
.plan{padding:var(--s-6);position:relative;display:flex;flex-direction:column}
.plan.cur{border:2px solid var(--c-accent)}
.plan .tag{position:absolute;top:var(--s-5);right:var(--s-5)}
.plan h3{margin:0;font-size:var(--step-1)}
.plan .price{font-size:var(--step-4);font-weight:700;letter-spacing:-.03em;margin:var(--s-2) 0 0}
.plan .price small{font-size:15px;font-weight:500;color:var(--c-ink-muted);letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:var(--s-5) 0 0;display:flex;flex-direction:column;gap:var(--s-2)}
.plan li{display:flex;gap:var(--s-2)}
.plan li svg{color:var(--c-success);width:17px;height:17px;margin-top:3px}
.plan .btn{margin-top:auto}
.progress{height:8px;background:var(--c-line-2);border-radius:8px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--c-accent)}
.kv{display:grid;grid-template-columns:170px 1fr;gap:var(--s-3) var(--s-4)}
.kv dt{color:var(--c-ink-muted)}
.kv dd{margin:0;font-weight:500}

/* ---------- Modal / drawer ---------- */
.shade{position:fixed;inset:0;background:rgba(20,26,32,.5);z-index:40;display:flex;align-items:center;justify-content:center;padding:var(--s-5);animation:fade var(--dur) var(--ease-out)}
.modal{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-modal);width:min(640px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;animation:pop var(--dur) var(--ease-out)}
.modal.wide{width:min(760px,100%)}
.m-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-5) var(--s-6);border-bottom:1px solid var(--c-line)}
.m-h h2{margin:0;font-size:var(--step-2);letter-spacing:-.01em}
.m-h p{margin:2px 0 0;color:var(--c-ink-muted);font-size:13.5px}
.m-b{padding:var(--s-6);overflow-y:auto}
.m-f{display:flex;justify-content:flex-end;gap:var(--s-2);padding:var(--s-4) var(--s-6);border-top:1px solid var(--c-line);background:var(--c-surface-2);border-radius:0 0 var(--r-lg) var(--r-lg)}
.drawer-shade{justify-content:flex-end;padding:0}
.drawer{background:#fff;width:min(540px,100%);height:100%;box-shadow:var(--sh-modal);display:flex;flex-direction:column;animation:slide 240ms var(--ease-out)}
.drawer .m-b{flex:1}
.d-hero{display:flex;gap:var(--s-4);align-items:center;margin-bottom:var(--s-5)}
.d-hero .avatar{width:56px;height:56px;font-size:18px}
.d-hero h3{margin:0;font-size:var(--step-2)}
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--c-line);border-radius:var(--r-md);margin-bottom:var(--s-6)}
.mini-stats div{padding:var(--s-3) var(--s-4);border-left:1px solid var(--c-line-2)}
.mini-stats div:first-child{border-left:0}
.mini-stats small{color:var(--c-ink-muted);font-size:13px;display:block}
.mini-stats b{font-size:var(--step-1);font-variant-numeric:tabular-nums}
.sec-t{display:flex;justify-content:space-between;align-items:center;margin:var(--s-6) 0 var(--s-3)}
.sec-t h4{margin:0;font-size:var(--step-1);font-weight:700}
.bike{display:flex;align-items:center;gap:var(--s-4);border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);margin-bottom:var(--s-2)}
.bike .grow{flex:1}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(10px)}}
@keyframes slide{from{transform:translateX(48px);opacity:0}}

/* ---------- Forms ---------- */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4) var(--s-5)}
.f{display:flex;flex-direction:column;gap:6px}
.f.full{grid-column:1/-1}
.f label{font-size:14px;font-weight:600;color:var(--c-ink-2)}
.f label .req{color:var(--c-error);margin-left:2px}
.f input,.f select,.f textarea{border:1px solid #cfd4ce;border-radius:var(--r-sm);padding:10px 12px;background:#fff;outline:none;width:100%;min-height:44px;font-size:16px}
.f textarea{resize:vertical;min-height:76px}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-tint)}
.f input:user-invalid,.f select:user-invalid,.f textarea:user-invalid{border-color:var(--c-error)}
.f .help{font-size:13px;color:var(--c-ink-faint)}
.f .pre{position:relative}
.f .pre span{position:absolute;left:12px;top:11px;color:var(--c-ink-faint)}
.f .pre input{padding-left:26px}
.chips-pick{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chips-pick button{border:1px solid var(--c-line);background:#fff;border-radius:var(--r-sm);min-height:36px;padding:0 var(--s-3);font-size:14px}
.chips-pick button:hover{border-color:var(--c-accent);color:var(--c-accent-strong);background:var(--c-accent-tint)}

/* ---------- Toast ---------- */
.toasts{pointer-events:none;position:fixed;bottom:var(--s-5);right:var(--s-5);z-index:60;display:flex;flex-direction:column;gap:var(--s-2)}
.toast{background:var(--c-ink);color:#fff;padding:var(--s-3) var(--s-4);border-radius:var(--r-sm);box-shadow:var(--sh-float);display:flex;gap:var(--s-2);align-items:center;font-size:14.5px;max-width:400px;animation:pop var(--dur) var(--ease-out)}
.toast svg{color:#7fd6a0}
.toast.err svg{color:#f39a8f}

/* ---------- Sign-in ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.auth-l{background:var(--c-side);color:#c9d1d7;padding:var(--s-12) var(--s-16);display:flex;flex-direction:column;gap:var(--s-8);position:relative;overflow:hidden}
.auth-l::after{content:"";position:absolute;inset:auto -10% -30% auto;width:70%;height:70%;background:repeating-linear-gradient(-45deg,transparent 0 22px,rgba(255,255,255,.025) 22px 44px);pointer-events:none}
.auth-l .brand{padding:0}
.auth-l h1{font-size:clamp(2rem,1.2rem + 2.4vw,3.1rem);line-height:1.12;letter-spacing:-.025em;color:#fff;margin:0;max-width:15ch;font-weight:700}
.auth-l .lead{font-size:var(--step-1);color:#a9b4bc;max-width:46ch;margin:calc(-1 * var(--s-4)) 0 0}
.tag-wrap{display:flex;gap:var(--s-8);align-items:center;flex-wrap:wrap}
.jobtag{position:relative;width:250px;background:#f8f5ec;color:var(--c-ink);border-radius:10px 10px 10px 10px;padding:var(--s-6) var(--s-5) var(--s-5);transform:rotate(-4deg);box-shadow:0 18px 40px rgba(0,0,0,.35);clip-path:polygon(18% 0,82% 0,100% 9%,100% 100%,0 100%,0 9%)}
.jobtag .hole{position:absolute;top:12px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--c-side);box-shadow:inset 0 0 0 3px #d8d2c0}
.jobtag .tno{font:600 12px var(--mono);color:#7b7462;margin-top:var(--s-3)}
.jobtag .plate{margin:var(--s-3) 0}
.jobtag .w{font-weight:700;font-size:17px;line-height:1.3}
.jobtag .m{font-size:13.5px;color:#6d6656;margin-top:2px}
.jobtag .ln{border-top:1px dashed #cdc6b2;margin:var(--s-3) 0;padding-top:var(--s-3);display:flex;justify-content:space-between;align-items:center}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-3);max-width:340px}
.ticks li{display:flex;gap:var(--s-3);color:#c9d1d7}
.ticks li svg{color:#8fb0ea;margin-top:3px}
.ticks b{color:#fff;font-weight:600}
.auth-l .foot{margin-top:auto;font-size:13px;color:#77838d}
.auth-r{display:flex;align-items:center;justify-content:center;padding:var(--s-8);background:var(--c-surface);position:relative}
.auth-r .lang-pos{position:absolute;top:var(--s-6);right:var(--s-6)}
.auth-card{width:min(400px,100%)}
.auth-card h2{font-size:var(--step-3);margin:0 0 var(--s-1);letter-spacing:-.02em}
.auth-card>p{color:var(--c-ink-muted);margin:0 0 var(--s-6)}
.auth-card .f{margin-bottom:var(--s-4)}
.tabs{display:flex;background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:var(--r-md);padding:3px;margin-bottom:var(--s-6)}
.tabs button{flex:1;border:0;background:transparent;min-height:40px;border-radius:7px;font-weight:600;color:var(--c-ink-muted)}
.tabs button.on{background:#fff;color:var(--c-ink);box-shadow:0 1px 2px rgba(27,35,43,.12)}
.demo-box{border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--s-5);background:var(--c-surface-2)}
.demo-box p{margin:0 0 var(--s-4);color:var(--c-ink-muted)}

/* ---------- Receipt ---------- */
.rc-h{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-4);padding-bottom:var(--s-4);border-bottom:2px solid var(--c-ink)}
.rc-h .shop b{font-size:var(--step-2);display:block;line-height:1.2}
.rc-h .shop span{color:var(--c-ink-muted);font-size:14px;display:block}
.rc-h .no{text-align:right}
.rc-h .no small{display:block;color:var(--c-ink-muted)}
.rc-h .no b{font:700 20px var(--mono);letter-spacing:.04em;display:block}
.rc-meta{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);padding:var(--s-5) 0}
.rc-meta small{display:block;font-size:13px;color:var(--c-ink-muted);margin-bottom:2px}
.rc-meta .plate{margin-top:var(--s-2)}
.rc-lines{width:100%;border-collapse:collapse}
.rc-lines th{background:none;padding:var(--s-2) 0;border-bottom:1px solid var(--c-line)}
.rc-lines td{padding:var(--s-3) 0;border-bottom:1px solid var(--c-line-2)}
.rc-tot{display:flex;justify-content:flex-end;margin-top:var(--s-4)}
.rc-tot table{width:280px}
.rc-tot td{border:0;padding:var(--s-1) 0}
.rc-tot tr.g td{font-size:var(--step-2);font-weight:700;border-top:2px solid var(--c-ink);padding-top:var(--s-3)}
.stamp{display:inline-block;border:2.5px solid currentColor;border-radius:var(--r-sm);padding:2px 14px;font-weight:700;letter-spacing:.1em;font-size:15px;transform:rotate(-5deg)}
.stamp.paid{color:var(--c-success)}
.stamp.unpaid{color:var(--c-error)}
.stamp.void{color:#7d878e}
.rc-foot{margin-top:var(--s-6);padding-top:var(--s-3);border-top:1px dashed var(--c-line);text-align:center;color:var(--c-ink-muted);font-size:13.5px}

/* ---------- Responsive ---------- */
@media (max-width:1180px){.dash-a,.dash-b{grid-template-columns:1fr}.plans{grid-template-columns:1fr}.ledger{grid-template-columns:repeat(2,minmax(0,1fr))}.ledger>div:nth-child(3){border-left:0}.ledger>div:nth-child(n+3){border-top:1px solid var(--c-line-2)}}
@media (max-width:920px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:272px;z-index:50;transform:translateX(-100%);transition:transform 240ms var(--ease-out)}
  .app.nav-open .side{transform:none;box-shadow:var(--sh-modal)}
  .app.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(20,26,32,.45);z-index:45}
  .top{padding:0 var(--s-4);gap:var(--s-2)}
  .top .menu{display:inline-flex}
  .gsearch kbd,.user .meta{display:none}
  .content{padding:var(--s-5) var(--s-4) var(--s-12)}
  .auth{grid-template-columns:1fr}
  .auth-l{padding:var(--s-8) var(--s-5);gap:var(--s-6)}
  .jobtag{width:220px}
}
@media (max-width:640px){
  .top-right .seg{display:none}
  .side-lang{display:block}
  .fgrid{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr;gap:2px var(--s-4)}
  .kv dd{margin-bottom:var(--s-2)}
  .rc-meta{grid-template-columns:1fr}
  .floor{grid-template-columns:1fr;gap:var(--s-3)}
  .ledger .val{font-size:var(--step-2)}
  .ledger>div{padding:var(--s-4)}
  .hide-sm{display:none}
  .page-head .acts{width:100%}
  .page-head .acts .btn{flex:1}
  .tag-wrap .ticks{display:none}
}

/* =====================================================================
   iOS app layer — motion, sheets, tab bar (v2.2)
   ===================================================================== */
:root{--ease-ios:cubic-bezier(.32,.72,0,1);--ease-spring:cubic-bezier(.34,1.45,.64,1);--tabbar-h:58px;--top-h:52px}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
body{overscroll-behavior-y:none}

/* Press feedback — things you can tap respond like iOS controls */
.btn,.bay,.jcard,.li.click,.more-row,.quick button,.filters button,.seg button,.tabbar button{transition:transform 180ms var(--ease-ios),background-color 200ms,box-shadow 200ms,border-color 200ms,color 200ms}
.btn:active,.li.click:active,.more-row:active,.filters button:active,.seg button:active{transform:scale(.96)}
.bay:active,.jcard:active{transform:scale(.975)}

/* Screen transition: one orchestrated moment per screen */
.content.anim.enter-fwd>*{animation:inFwd 420ms var(--ease-ios) both}
.content.anim.enter-back>*{animation:inBack 420ms var(--ease-ios) both}
@keyframes inFwd{from{opacity:0;transform:translateX(28px)}}
@keyframes inBack{from{opacity:0;transform:translateX(-28px)}}
.content.anim .bay,.content.anim .jcard,.content.anim tbody tr,.content.anim .list .li,.content.anim .plan,.content.anim .ledger>div,.content.anim .floor-empty{animation:rise 520ms var(--ease-ios) both;animation-delay:calc(var(--i,0) * 38ms + 80ms)}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.97)}}
.chart .bar{transform-box:fill-box;transform-origin:50% 100%}
.content.anim .chart .bar{animation:grow 700ms var(--ease-ios) both;animation-delay:calc(var(--i,0) * 32ms + 200ms)}
@keyframes grow{from{transform:scaleY(0)}}

/* A job moving to its next stage */
.leaving{transition:transform 220ms var(--ease-ios),opacity 220ms!important;transform:translateX(24px) scale(.94)!important;opacity:0}
.flash{animation:flash 1.2s var(--ease-ios)}
@keyframes flash{0%{transform:scale(.9);box-shadow:0 0 0 0 rgba(30,79,163,.45)}30%{transform:scale(1.03);box-shadow:0 0 0 6px rgba(30,79,163,.2)}100%{transform:none;box-shadow:0 0 0 0 rgba(30,79,163,0)}}
tr.flash{animation:rowflash 1.4s ease-out}
@keyframes rowflash{0%,30%{background:var(--c-accent-tint)}100%{background:transparent}}
.stock b.bump{display:inline-block;animation:bump 320ms var(--ease-spring)}
@keyframes bump{40%{transform:scale(1.35)}}

/* Dialogs: spring in, ease out */
.modal{animation:popIn 380ms var(--ease-spring)}
@keyframes popIn{from{opacity:0;transform:translateY(12px) scale(.95)}}
#layer.closing{pointer-events:none}
#layer.closing .shade{animation:fadeOut 260ms ease forwards}
#layer.closing .modal{animation:popOut 220ms var(--ease-ios) forwards}
#layer.closing .drawer{animation:slideOut 260ms var(--ease-ios) forwards}
@keyframes fadeOut{to{opacity:0}}
@keyframes popOut{to{opacity:0;transform:scale(.96)}}
@keyframes slideOut{to{transform:translateX(60px);opacity:0}}
.grabber{display:none}

/* Toast: check mark draws itself */
.toast svg path{stroke-dasharray:30;stroke-dashoffset:30;animation:draw 450ms 120ms var(--ease-ios) forwards}
.toast{animation:toastIn 420ms var(--ease-spring)}
@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.94)}}
@keyframes draw{to{stroke-dashoffset:0}}

/* More sheet — inset grouped list */
.sheet-list .m-b{background:var(--c-base);padding:var(--s-4)}
.group{background:#fff;border-radius:var(--r-md);overflow:hidden;margin-bottom:var(--s-4)}
.more-row{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:52px;padding:0 var(--s-4);border-bottom:.5px solid var(--c-line)}
.group>.more-row:last-child{border-bottom:0}
.more-row:hover{background:var(--c-surface-2)}
.more-row.static{cursor:default}
.more-row.static:hover{background:#fff}
.more-row .grow{flex:1;font-weight:500}
.more-row .mi{width:30px;height:30px;border-radius:8px;background:var(--c-accent);color:#fff;display:grid;place-items:center}
.more-row .mi svg{width:17px;height:17px}
.more-row.on .grow{color:var(--c-accent);font-weight:600}
.more-row .count{font-size:14px;color:var(--c-ink-muted);font-weight:600}
.more-row .count.warn{color:var(--c-oil)}
.danger-row{color:var(--c-error)}
.danger-row .mi{background:var(--c-error)}

/* Desktop hides phone-only chrome */
.top-title,.search-btn,.nav-add,.tabbar,.gsearch .cancel{display:none}

@media (max-width:920px){
  .side,.scrim{display:none!important}
  .app{grid-template-columns:1fr}
  /* Translucent navigation bar with collapsing title */
  .top{height:calc(var(--top-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) var(--s-3) 0;background:rgba(237,239,236,.78);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);border-bottom:.5px solid transparent;transition:border-color 200ms,background 200ms}
  .app.scrolled .top{border-bottom-color:rgba(27,35,43,.16);background:rgba(248,249,247,.84)}
  .top-title{display:block;position:absolute;left:96px;right:96px;bottom:15px;text-align:center;font-weight:600;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(8px);transition:opacity 200ms,transform 300ms var(--ease-ios);pointer-events:none}
  .app.scrolled .top-title{opacity:1;transform:none}
  .gsearch,.user,.top-right>.seg{display:none!important}
  .search-btn,.nav-add{display:inline-flex;width:38px;min-height:38px;border-radius:50%}
  .search-btn{background:transparent;color:var(--c-accent)}
  .search-btn:hover{background:rgba(30,79,163,.08)}
  .search-btn svg.i{width:22px;height:22px}
  .nav-add svg.i{width:20px;height:20px;stroke-width:2.2}
  .top.searching .gsearch{display:flex!important;position:absolute;left:var(--s-3);right:var(--s-3);bottom:7px;max-width:none;align-items:center;gap:var(--s-3);animation:fadeIn 220ms var(--ease-ios)}
  .top.searching .gsearch input{flex:1;height:38px;border-radius:10px;border:0;background:rgba(118,118,128,.14);padding-left:36px}
  .top.searching .gsearch>svg{left:10px;top:10px}
  .top.searching .gsearch kbd{display:none}
  .top.searching .gsearch .cancel{all:unset;display:inline-block;color:var(--c-accent);font-weight:500;cursor:pointer;padding:6px 2px}
  .top.searching .top-title,.top.searching .top-right{visibility:hidden}
  .gresults{top:46px;right:70px}
  @keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}}

  /* Large title */
  .content{padding:var(--s-2) var(--s-4) calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s-8))}
  .page-head{margin-bottom:var(--s-5)}
  .page-head h1{font-size:32px;line-height:1.15;letter-spacing:-.025em}
  .page-head .acts .btn[data-a="add"]{display:none}
  .page-head .acts:not(:has(.btn:not([data-a="add"]))){display:none}
  .banner{font-size:13px}

  /* Bottom tab bar */
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;padding:5px 2px calc(env(safe-area-inset-bottom) + 2px);background:rgba(248,249,247,.86);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);border-top:.5px solid rgba(27,35,43,.18)}
  .tabbar button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 0 5px;font-size:10.5px;font-weight:500;color:#7c868d;position:relative;min-height:48px;text-align:center}
  body.km .tabbar button{font-size:10px;line-height:1.35}
  .tabbar svg.i{width:25px;height:25px;stroke-width:1.65}
  .tabbar button.on{color:var(--c-accent)}
  .tabbar button.on svg.i{stroke-width:2}
  .tabbar button:active svg{transform:scale(.86);transition:transform 120ms}
  .app.entering .tabbar button.on svg{animation:tabPop 460ms var(--ease-spring)}
  @keyframes tabPop{0%{transform:scale(.78)}100%{transform:scale(1)}}
  .tabbar .badge{position:absolute;top:1px;left:calc(50% + 5px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#e5483b;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;border:1.5px solid rgba(248,249,247,.95)}

  /* Bottom sheets */
  .shade{align-items:flex-end;padding:calc(env(safe-area-inset-top) + 10px) 0 0}
  .modal,.modal.wide,.drawer{width:100%;max-height:calc(100vh - env(safe-area-inset-top) - 10px);border-radius:14px 14px 0 0;animation:sheetUp 460ms var(--ease-ios);transition:transform 320ms var(--ease-ios)}
  .drawer-shade{justify-content:center}
  .drawer{height:calc(100vh - env(safe-area-inset-top) - 10px)}
  .grabber{display:block;width:38px;height:5px;border-radius:3px;background:#c6cac5;margin:7px auto 0;flex:none}
  .m-h{touch-action:none;padding:var(--s-2) var(--s-5) var(--s-3);cursor:grab}
  .m-b{padding:var(--s-5)}
  .m-f{border-radius:0;padding-bottom:calc(var(--s-3) + env(safe-area-inset-bottom))}
  #layer.closing .modal,#layer.closing .drawer{animation:sheetDown 280ms var(--ease-ios) forwards}
  @keyframes sheetUp{from{transform:translateY(100%)}}
  @keyframes sheetDown{to{transform:translateY(100%)}}

  /* Toast becomes a banner that drops from the top */
  .toasts{top:calc(env(safe-area-inset-top) + 8px);bottom:auto;left:50%;right:auto;transform:translateX(-50%);align-items:center;width:max-content;max-width:calc(100vw - 32px)}
  .toast{border-radius:999px;padding:10px 18px;animation:dropIn 480ms var(--ease-spring)}
  @keyframes dropIn{from{opacity:0;transform:translateY(-36px) scale(.9)}}

  /* Swipeable carousels */
  .floor{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(250px,78%);overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--s-4)) var(--s-5);padding:2px var(--s-4) var(--s-2);scroll-padding:0 var(--s-4);scrollbar-width:none}
  .floor::-webkit-scrollbar,.board::-webkit-scrollbar{display:none}
  .bay{scroll-snap-align:start}
  .board{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--s-4));padding:0 var(--s-4) var(--s-2);scroll-padding:0 var(--s-4);scrollbar-width:none}

  /* Tables become iOS inset-grouped lists */
  .twrap{overflow:visible}
  .twrap table,.twrap tbody{display:block}
  .twrap thead{display:none}
  .twrap tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:var(--s-3) var(--s-4);border-bottom:.5px solid var(--c-line)}
  .twrap td{display:block;padding:0;border:0;font-size:14px}
  .twrap td:first-child{flex:1 1 100%;font-size:15.5px}
  .twrap td:not(:first-child):not(.act)::before{content:attr(data-label) " ";color:var(--c-ink-faint);font-size:12.5px;margin-right:2px}
  .twrap td.num{text-align:left}
  .twrap td.act{flex:1 1 100%;width:auto;text-align:left;margin-top:var(--s-1)}
  .twrap td.act:empty{display:none}
  .t-repair_jobs td:nth-child(2){order:-1;flex:1 1 100%;font-size:15.5px}
  .t-repair_jobs td:first-child{flex:0 0 auto;font-size:13px}
  .t-repair_jobs td:first-child::before{display:none}
  .toolbar{padding:var(--s-3)}
  .toolbar .tsearch{max-width:none}
  .filters{flex-wrap:nowrap;overflow-x:auto;width:100%;scrollbar-width:none}
  .filters button{flex:none}
}
@media (max-width:920px){
  .page-head .acts{width:auto}
  .page-head .acts .btn{flex:none}
  .t-customers td.act{display:none}
  .rc-h .no b{white-space:nowrap;font-size:17px}
  .auth-r{flex-direction:column;align-items:stretch;padding:var(--s-6) var(--s-5) calc(var(--s-8) + env(safe-area-inset-bottom))}
  .auth-r .lang-pos{position:static;align-self:flex-end;margin-bottom:var(--s-5)}
  .auth-card{margin:0 auto}
  .auth-l{padding-top:calc(var(--s-8) + env(safe-area-inset-top))}
}
@media (max-width:920px) and (prefers-reduced-motion:reduce){.modal,.drawer,.toast{animation:none}}

/* ---------- v3: bookings & customer app link ---------- */
.st-requested{background:var(--c-accent-tint);color:var(--c-accent)}
.st-confirmed{background:var(--c-success-tint);color:var(--c-success)}
.st-arrived{background:var(--c-violet-tint);color:var(--c-violet)}
.st-declined{background:#f0f1ef;color:#7d878e}
.portal-code{border:1.5px dashed var(--c-accent);background:var(--c-accent-tint);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);margin-bottom:var(--s-5)}
.portal-code small{display:block;color:var(--c-accent-strong);font-weight:600;font-size:13px}
.portal-code b{display:block;font-size:22px;letter-spacing:.08em;color:var(--c-ink);margin:2px 0}
.portal-code span{font-size:13px;color:var(--c-ink-muted)}
.check{display:flex;gap:var(--s-2);align-items:center;font-weight:500;min-height:36px}
.check input{width:20px;height:20px;accent-color:var(--c-accent)}
/* ---------- v3.2: team, parts on jobs, reports, telegram ---------- */
.row{display:flex;align-items:center;gap:var(--s-2)}
.pipe{display:flex;flex-direction:column;gap:var(--s-3)}
.pipe-row{display:grid;grid-template-columns:150px 1fr 32px;align-items:center;gap:var(--s-3);font-size:14.5px}
.pipe-row b{text-align:right;font-variant-numeric:tabular-nums}
.pipe-track{height:10px;background:var(--c-line-2);border-radius:10px;overflow:hidden}
.pipe-fill{height:100%;border-radius:10px;transform-origin:left;animation:barIn .9s var(--ease-ios) both .2s}
@keyframes barIn{from{transform:scaleX(0)}}
.avatar.xs{width:22px;height:22px;font-size:10px}
.mech{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--c-ink-2);margin-top:6px}
.help-note{font-size:13px;color:var(--c-ink-muted);margin:8px 0 0}
.items{margin-top:var(--s-5);border-top:1px solid var(--c-line);padding-top:var(--s-4)}
.items-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-2)}
.items-h h3{margin:0;font-size:16px}
.items-t{width:100%;border-collapse:collapse}
.items-t td{padding:8px 6px;border-bottom:1px solid var(--c-line-2);font-size:14px;vertical-align:middle}
.items-t tfoot td{font-weight:700;border-bottom:0;border-top:2px solid var(--c-ink);font-size:15px}
.items-t .act{width:1%;text-align:right}
.kind{display:inline-block;font-size:11px;font-weight:700;border-radius:4px;padding:1px 6px;margin-right:4px;text-transform:uppercase;letter-spacing:.03em}
.k-part{background:var(--c-oil-tint);color:#8a5a07}.k-service{background:var(--c-accent-tint);color:var(--c-accent)}.k-labour{background:var(--c-violet-tint);color:var(--c-violet)}
.item-add{display:grid;grid-template-columns:minmax(0,1fr) 70px 110px auto;gap:8px;margin-top:var(--s-3);align-items:center}
.item-add #ji_desc{grid-column:1/-1;order:-1}
.item-add select,.item-add input{border:1px solid #cfd4ce;border-radius:var(--r-sm);padding:9px 10px;min-height:42px;width:100%;background:#fff;font-size:15px;outline:none}
.item-add select:focus,.item-add input:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-tint)}
.item-add .pre{position:relative}.item-add .pre span{position:absolute;left:10px;top:11px;color:var(--c-ink-faint)}.item-add .pre input{padding-left:22px}
input[readonly]{background:var(--c-surface-2);color:var(--c-ink-muted)}
.team-row{padding:var(--s-3) var(--s-5);margin:0}
.team-list .li{border-top:1px solid var(--c-line-2)}
.team-list .li:first-child{border-top:0}
.team-row.invited{background:#fffdf6}
.role-sel{border:1px solid var(--c-line);border-radius:var(--r-sm);min-height:36px;padding:0 8px;background:#fff;font-weight:600}
.role-owner{background:var(--c-ink);color:#fff}.role-manager{background:var(--c-accent-tint);color:var(--c-accent)}.role-mechanic{background:var(--c-violet-tint);color:var(--c-violet)}.role-cashier{background:var(--c-success-tint);color:var(--c-success)}
.invite-msg{width:100%;border:1px solid var(--c-line);border-radius:var(--r-sm);padding:12px;font-size:15px;line-height:1.55;background:var(--c-surface-2);resize:vertical}
.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14.5px}
.steps a{font-weight:600}
.card-h h2 svg.i{vertical-align:-3px;color:#229ed9}
.mech-row{grid-template-columns:150px 1fr 28px}
@media (max-width:640px){.item-add{grid-template-columns:1fr 70px}.item-add .pre{grid-column:1}.item-add .btn{grid-column:2}}
.pulse{animation:pulse 1s ease 2;font-weight:700}
.social{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.btn.soc{justify-content:center;gap:10px;font-weight:600;color:var(--c-ink)}
.btn.soc{min-height:50px;font-size:15.5px}
.btn.soc svg.i{width:22px;height:22px;flex:none}
.divider{display:flex;align-items:center;gap:12px;color:var(--c-ink-faint);font-size:13.5px;margin:14px 0 16px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--c-line)}
.phone-in{display:flex;border:1px solid #cfd4ce;border-radius:var(--r-sm);overflow:hidden;background:#fff}
.phone-in:focus-within{border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-tint)}
.phone-in span{padding:0 12px;display:flex;align-items:center;background:var(--c-surface-2);border-right:1px solid var(--c-line);font-weight:600;white-space:nowrap}
.phone-in input{border:0!important;box-shadow:none!important;flex:1}
.otp-in{font:700 28px var(--mono)!important;letter-spacing:.4em;text-align:center}
@keyframes pulse{50%{opacity:.4}}
/* ---------- Print (receipts) ---------- */
@media print{
  body{background:#fff}
  #root,.toasts{display:none!important}
  .shade{position:static;background:none;padding:0;display:block}
  .modal{box-shadow:none;max-height:none;width:100%;border-radius:0}
  .m-h,.m-f{display:none!important}
  .m-b{padding:0;overflow:visible}
}

.legal{text-align:center;font-size:12.5px;color:var(--c-ink-faint);margin-top:18px}.legal a{color:inherit;text-decoration:underline}

/* v3.5 — photos, customer updates, KHQR, reminders */
.photos,.next-svc{margin-top:18px;padding-top:16px;border-top:1px solid var(--c-line)}
.photo-add{cursor:pointer}
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:10px}
.ph{position:relative;margin:0;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;background:var(--c-surface-2);border:1px solid var(--c-line)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph-x{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(27,35,43,.72);color:#fff;display:grid;place-items:center;cursor:pointer}
.ph-x svg.i{width:14px;height:14px;stroke:#fff}
.notify-bar{display:flex;align-items:center;gap:12px;margin-top:18px;padding:12px 14px;border-radius:var(--r-md);background:var(--c-accent-tint);border:1px solid rgba(30,79,163,.18)}
.notify-bar .s{font-size:12.5px;color:var(--c-ink-faint);margin-top:2px}
.notify-bar .grow{flex:1;min-width:0}
.tg-ok{color:#2f7d4f;font-weight:600;display:inline-flex;align-items:center;gap:4px}.tg-ok svg.i{width:13px;height:13px}
.notify-msg{width:100%;font:inherit;padding:10px 12px;border:1px solid #cfd4ce;border-radius:var(--r-sm);margin-top:12px;resize:vertical}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ask .ask-ic{width:56px;height:56px;border-radius:50%;margin:0 auto;display:grid;place-items:center;background:var(--c-accent-tint)}
.ask .ask-ic svg.i{width:28px;height:28px;stroke:var(--c-accent)}
.ns-row{display:grid;grid-template-columns:1fr 1fr 2fr;gap:10px;margin-top:10px}
.ns-row .f{margin:0}
.ns-act{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;flex-wrap:wrap}
@media (max-width:560px){.ns-row{grid-template-columns:1fr 1fr}.ns-row .grow2{grid-column:1/-1}}
.due{font-weight:600;font-size:12px;color:var(--c-ink-faint)}.due.warn{color:#a86c06}.due.bad{color:#b93a2e}
.due-card{margin-top:24px}
.due-card .li{gap:10px}.due-card .li .grow{flex:1;min-width:0;cursor:pointer}
.tg-status{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--c-ink-faint);margin:10px 0}
.tg-status svg.i{width:15px;height:15px}.tg-status.on{color:#2f7d4f;font-weight:600}
.khqr-set{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.khqr-img{width:132px;height:auto;border-radius:var(--r-sm);border:1px solid var(--c-line);background:#fff}
.khqr-empty{width:132px;aspect-ratio:1;border:1.5px dashed #cfd4ce;border-radius:var(--r-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--c-ink-faint);font-size:12px;text-align:center;padding:8px}
.khqr-empty svg.i{width:28px;height:28px}
.rc-pay{display:flex;gap:16px;align-items:center;margin-top:18px;padding:14px;border:1px dashed #cfd4ce;border-radius:var(--r-md);break-inside:avoid}
.rc-pay img{width:120px;height:auto;background:#fff;border-radius:6px}
.rc-pay>div{display:flex;flex-direction:column;gap:2px}.rc-pay .amt{font:700 22px var(--mono)}

/* v3.6 — reviews & loyalty */
.stars{color:#d5d9d3;letter-spacing:1px;white-space:nowrap}.stars i{font-style:normal}.stars i.on{color:#e3a008}.stars.sm{font-size:13px}
.rv-card{margin-top:24px}
.rv-sum{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.rv-avg{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.rv-avg b{font:800 36px/1 var(--mono)}.rv-avg .stars{font-size:18px}
.rv-dist{flex:1;min-width:200px;display:flex;flex-direction:column;gap:4px;font-size:12.5px}
.rv-dist div{display:grid;grid-template-columns:28px 1fr 24px;gap:8px;align-items:center}.rv-dist i{height:8px;border-radius:99px;background:var(--c-surface-2);overflow:hidden}.rv-dist i b{display:block;height:100%;background:#e3a008;border-radius:99px}
.rv-li.hid{opacity:.55}
.lp-box{margin:12px 0;padding:12px 14px;border-radius:var(--r-md);background:linear-gradient(135deg,#1e4fa3,#163d80);color:#fff}
.lp-box .muted,.lp-box .faint{color:rgba(255,255,255,.75)!important}
.lp-row{display:flex;align-items:center;gap:12px}.lp-row small{display:block;font-size:11.5px;opacity:.8}.lp-row b{font:800 22px var(--mono)}
.lp-bar{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden}.lp-bar i{display:block;height:100%;background:#f2b544}
.lp-row2{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.lp-box .btn{background:#f2b544;border-color:#f2b544;color:#1b232b}.lp-box .btn svg.i{stroke:#1b232b}
.rc-pts{margin-top:12px;font-size:13px;color:var(--c-ink-faint);display:flex;align-items:center;gap:6px}.rc-pts svg.i{width:15px;height:15px}

/* ===== v3.7: expenses, profit, suppliers & purchase orders, commission, cash close ===== */
.exp-dot{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
.exp-row{grid-template-columns:170px 1fr 92px}
.ledger .val.neg,.pf-sum b.neg{color:var(--c-error)}
.ledger .val.pos,.pf-sum b.pos{color:#2f7d4f}
.pf-grid{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:var(--s-6);align-items:start}
.pf-sum>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--c-line);font-size:15px}
.pf-sum>div b{font-variant-numeric:tabular-nums}
.pf-sum>div.g{border-bottom:0;font-size:18px;font-weight:700}
.po-row{padding:12px var(--s-5,20px);display:flex;gap:12px;align-items:center;width:100%;text-align:left;background:none;border:0;cursor:pointer;font:inherit;color:inherit}
.po-row .grow{min-width:0}
.po-row .s,.po-row .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.po-row:hover{background:var(--c-accent-tint)}
.chip.st-po-draft{background:#eef0f2;color:#4b5560}
.chip.st-po-sent{background:var(--c-accent-tint);color:#1d3765}
.chip.st-po-received{background:#e6f3ea;color:#2f7d4f}
.chip.st-po-cancelled{background:#f1f1ef;color:#8a949c;text-decoration:line-through}
.po-lines input{width:84px;text-align:right;padding:6px 8px;border:1px solid var(--c-line);border-radius:var(--r-sm);font:inherit;font-variant-numeric:tabular-nums}
.po-lines tfoot td{border-top:2px solid var(--c-line);padding-top:10px}
.po-add{display:flex;gap:10px;margin-top:12px}
.po-add select{flex:1;min-width:0}
.banner.ok{background:#e6f3ea;border-color:#2f7d4f;color:#1f5535;margin:14px 0 0}
.banner.ok svg{color:#2f7d4f}
.danger-t{color:var(--c-error)}
.check-row{display:flex;gap:10px;align-items:center;font-size:15px;cursor:pointer}
.check-row input{width:18px;height:18px}
.pct-in{display:inline-flex;align-items:center;gap:4px}
.pct-in input{width:64px;text-align:right;padding:6px 8px;border:1px solid var(--c-line);border-radius:var(--r-sm);font:inherit}
.cc-date{padding:8px 10px;border:1px solid var(--c-line);border-radius:var(--r-sm);font:inherit;background:var(--c-surface,#fff)}
.cc-calc{width:100%;border-collapse:collapse;font-size:15.5px}
.cc-calc td{padding:10px 0;border-bottom:1px solid var(--c-line)}
.cc-calc td.num{text-align:right;font-variant-numeric:tabular-nums}
.cc-calc tr.g td{font-weight:700;font-size:17px}
.cc-calc .pre{position:relative;width:150px;margin-left:auto}
.cc-calc .pre span{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--c-ink-faint)}
.cc-calc .pre input{width:100%;box-sizing:border-box;height:40px;padding:0 10px 0 24px;text-align:right;border:1px solid var(--c-line);border-radius:var(--r-sm);font:inherit;font-variant-numeric:tabular-nums;background:var(--c-surface)}
.cc-other{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.cc-other>div{background:var(--c-accent-tint);border-radius:var(--r-sm);padding:10px 12px}
.cc-other small{display:block;color:var(--c-muted,#6b747c);font-size:12px}
.cc-other b{font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .pf-grid{grid-template-columns:1fr}
  .exp-row{grid-template-columns:120px 1fr 80px;font-size:13.5px}
  .cc-other{grid-template-columns:repeat(2,1fr)}
  .cm-table thead{display:none}
}
@media print{
  body:has(.cc-sheet) .side,body:has(.cc-sheet) .top,body:has(.cc-sheet) .tabbar,body:has(.cc-sheet) .cc-grid>section:last-child,body:has(.cc-sheet) .page-h .btn,body:has(.cc-sheet) .cc-date{display:none!important}
}

/* ===== v3.8: shop directory ===== */
.dir-row .acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.dir-row.is-hidden .t,.dir-row.is-hidden .s{opacity:.55}
.help.bad{color:var(--c-error)}
@media (max-width:760px){.dir-row{flex-wrap:wrap}.dir-row .acts{width:100%;justify-content:flex-start;padding-left:40px}}
.shop-photo{width:180px;height:120px;object-fit:cover;border-radius:12px;flex:none}.khqr-empty.shop-photo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.shop-logo{width:120px;height:120px;object-fit:contain;border-radius:50%;background:#fff;border:1px solid var(--c-line);flex:none;padding:6px;box-sizing:border-box}.khqr-empty.shop-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:50%}
.eq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}.eq-opt{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--c-line);border-radius:10px;cursor:pointer}.eq-opt input{width:18px;height:18px}
/* Subscription & payments */
.banner.sub-bn{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.banner.sub-bn span{flex:1;min-width:200px}
.banner.sub-bn.warn{background:#fff6e5;border-color:#f0c36a;color:#7a4b00}.banner.sub-bn.bad{background:#fdecea;border-color:#f1a39b;color:#8a1c12}
.sub-left{display:flex;flex-direction:column;align-items:flex-end}.sub-left b{font-size:24px}.sub-left.bad b{color:#b42318;font-size:18px}.sub-left.bad .muted{max-width:280px;text-align:right}
.card.plan.pick{cursor:pointer;text-align:left;font:inherit;color:inherit;background:var(--c-card,#fff);border:2px solid var(--c-line);position:relative}
.card.plan.pick.cur{border-color:var(--c-accent,#0e8a6f);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-accent,#0e8a6f) 18%,transparent)}
.pay-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:18px 0 12px}
.pay-row .lbl,.pay-qr .lbl{font-size:12.5px;color:var(--c-muted,#6b7280);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.seg{display:inline-flex;border:1px solid var(--c-line);border-radius:12px;overflow:hidden}.seg button{border:0;background:transparent;padding:9px 14px;font:inherit;cursor:pointer}.seg button.on{background:var(--c-accent,#0e8a6f);color:#fff}
.pay-total{text-align:right}.pay-total b{font-size:28px;display:block}
.pay-acts{display:flex;gap:10px;flex-wrap:wrap}
.pay-steps{margin:0 0 14px;padding-left:20px;line-height:1.55}
.pay-qr{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:14px}.pay-qr img{width:180px;height:180px;object-fit:contain;border:1px solid var(--c-line);border-radius:12px;background:#fff}
.pay-qr .khqr-empty{width:180px;height:180px}.pay-to{flex:1;min-width:180px}.pay-to b.big{font-size:26px}
.pay-prev img{max-width:100%;max-height:220px;border-radius:10px;border:1px solid var(--c-line);margin:6px 0 10px}
.adm-link{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:600;font-size:14px;padding:9px 12px;border-radius:8px;background:var(--c-side-2);margin-bottom:10px}.adm-link:hover{background:#33414d}
.pay-qr img.tall{width:180px;height:auto;max-height:260px}