/* Tindahan System: stylesheet.
   Design rules: black and white. Black is the action colour (buttons, selected items); white and soft greys are the surfaces.
   Red is used sparingly: a small accent (active marker, logo dot, top bar in the chart) and for danger or low/overdue.
   No other hues. Status is always carried by words as well as colour. Every colour is a token. */

/* ---------- tokens ---------- */
:root{color-scheme:light;--fs-min:13px;--r:12px;
--bg:#f4f4f4;--surface:#fff;--surface2:#ececec;--hover:#f7f7f7;
--ink:#0a0a0a;--mut:#595959;--line:#dedede;
--brand:#0a0a0a;--brand2:#2e2e2e;--brand-text:#0a0a0a;--brand-soft:#ececec;--on-brand:#fff;--ring:rgba(0,0,0,.2);--bar:#c9c9c9;
--accent:#d10f1a;--accent-fill:#d10f1a;--star:#b45309;   /* accent-fill: a red that white text can sit on (5.5:1) in both themes; star: the pinned mark, 5:1 on white */
--danger:#d10f1a;--danger-fill:#d10f1a;--danger-soft:#fdecee;
--success:#0a0a0a;--success-fill:#0a0a0a;--success-soft:#ececec;
--warn:#3d3d3d;--warn-fill:#3d3d3d;--warn-bg:#ececec;--warn-ink:#0a0a0a;--warn-line:#cfcfcf;
--on-fill:#fff;--shadow-sm:0 1px 2px rgba(0,0,0,.06);--shadow-md:0 12px 32px rgba(0,0,0,.2);--scrim:rgba(0,0,0,.55)}
body.touch{--fs-min:14px}
@media screen and (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
--bg:#0a0a0a;--surface:#141414;--surface2:#1d1d1d;--hover:#1d1d1d;--ink:#f5f5f5;--mut:#a6a6a6;--line:#2e2e2e;
--brand:#f5f5f5;--brand2:#d6d6d6;--brand-text:#f5f5f5;--brand-soft:#242424;--on-brand:#0a0a0a;--ring:rgba(255,255,255,.3);--bar:#3b3b3b;
--accent:#ff4d57;--star:#f59e0b;
--danger:#ff5963;--danger-fill:#d10f1a;--danger-soft:rgba(255,89,99,.14);
--success:#f5f5f5;--success-fill:#f5f5f5;--success-soft:#242424;
--warn:#d0d0d0;--warn-fill:#d0d0d0;--warn-bg:#222;--warn-ink:#f5f5f5;--warn-line:#3a3a3a;
--shadow-sm:0 1px 2px rgba(0,0,0,.5);--shadow-md:0 12px 32px rgba(0,0,0,.7);--scrim:rgba(0,0,0,.75)}}
@media screen{:root[data-theme="dark"]{color-scheme:dark;
--bg:#0a0a0a;--surface:#141414;--surface2:#1d1d1d;--hover:#1d1d1d;--ink:#f5f5f5;--mut:#a6a6a6;--line:#2e2e2e;
--brand:#f5f5f5;--brand2:#d6d6d6;--brand-text:#f5f5f5;--brand-soft:#242424;--on-brand:#0a0a0a;--ring:rgba(255,255,255,.3);--bar:#3b3b3b;
--accent:#ff4d57;--star:#f59e0b;
--danger:#ff5963;--danger-fill:#d10f1a;--danger-soft:rgba(255,89,99,.14);
--success:#f5f5f5;--success-fill:#f5f5f5;--success-soft:#242424;
--warn:#d0d0d0;--warn-fill:#d0d0d0;--warn-bg:#222;--warn-ink:#f5f5f5;--warn-line:#3a3a3a;
--shadow-sm:0 1px 2px rgba(0,0,0,.5);--shadow-md:0 12px 32px rgba(0,0,0,.7);--scrim:rgba(0,0,0,.75)}}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;-webkit-font-smoothing:antialiased}
h2{margin:0 0 16px;font-size:18px;font-weight:700}
h3{margin:0 0 12px;font-size:15px;font-weight:700}
a{color:var(--brand-text);font-weight:600;text-decoration:none}a:hover{text-decoration:underline}
input,select,button{font:inherit}
button:focus-visible,a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin:14px 0 6px}
input,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
textarea{resize:vertical;font:inherit;line-height:1.45}
input:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
input::placeholder,textarea::placeholder{color:var(--mut)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{font-size:var(--fs-min);color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
tr:last-child td{border-bottom:0}
tr:hover td{background:var(--hover)}
td.n,th.n{text-align:right}
.wrap{overflow-x:auto}
.mut{color:var(--mut)}.red{color:var(--danger)}.ok{color:var(--success);font-weight:700}.amber{color:var(--warn);font-weight:700}
.empty{color:var(--mut);padding:12px 0}
.kbd{font-size:var(--fs-min);opacity:.85;font-weight:600}

/* ---------- layout: sidebar + page ---------- */
.shell{display:grid;grid-template-columns:220px 1fr;min-height:100%}
aside{background:var(--surface);border-right:1px solid var(--line);padding:20px 12px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:16px}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px}
.brand .logo{width:44px;height:44px;flex:none}
.brand b{font-size:16px;line-height:1.15;min-width:0;overflow-wrap:anywhere}.brand span{display:block;font-size:var(--fs-min);color:var(--mut);font-weight:500}
nav#nav{display:flex;flex-direction:column;gap:2px;flex:1;min-height:0;overflow-y:auto}
nav .nv,nav .gh{display:flex;align-items:center;gap:12px;width:100%;background:none;color:var(--mut);border:0;padding:9px 12px;border-radius:10px;font-weight:600;cursor:pointer;text-align:left}
nav svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
nav .nv:hover,nav .gh:hover{background:var(--surface2);color:var(--ink)}
nav .nv.on{background:var(--brand-soft);color:var(--brand-text);box-shadow:inset 3px 0 0 var(--accent)}
nav .gh .chev{margin-left:auto;width:16px;height:16px;transition:transform .15s}
.grp.open .chev{transform:rotate(180deg)}
.grp.has>.gh{color:var(--ink)}
.kids{display:flex;flex-direction:column;gap:1px;margin:2px 0 6px 21px;padding-left:12px;border-left:1px solid var(--line)}
.kids[hidden]{display:none}
.kids .nv{padding:7px 10px;font-size:14px;font-weight:500}
.kids .nv.on{font-weight:700}
.badge{margin-left:auto;background:var(--danger-fill);color:var(--on-fill);border-radius:999px;font-size:var(--fs-min);font-weight:700;padding:0 7px;font-style:normal;line-height:1.5}
.note{font-size:var(--fs-min);color:var(--mut);padding:0 8px}
.content{min-width:0}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 24px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top h1{margin:0;font-size:20px;font-weight:700}
.top>span{display:flex;align-items:center;gap:12px;color:var(--mut);font-size:14px}
.top .btn.sm,.top .pill{white-space:nowrap}
.pill{background:var(--success-soft);color:var(--success);padding:7px 14px;border-radius:999px;font-size:14px;font-weight:600}
.pill em{font-style:normal;font-weight:800;margin-left:8px;font-variant-numeric:tabular-nums}
main{padding:24px;max-width:1280px}
.cols{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:start}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.toolbar input{flex:1;min-width:200px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}.row>*{flex:1;min-width:120px}
.f3{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:4px 14px}
.sm{position:relative}

/* ---------- buttons, chips, tags ---------- */
.btn{background:var(--brand);color:var(--on-brand);border:1px solid transparent;border-radius:10px;padding:10px 16px;font-weight:600;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--brand2)}
.btn.warn{background:var(--surface);color:var(--ink);border-color:var(--ink)}.btn.warn:hover{background:var(--surface2)}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}.btn.ghost:hover{background:var(--surface2)}
.btn.del{background:var(--surface);color:var(--danger);border-color:var(--line)}.btn.del:hover{background:var(--danger-soft);border-color:var(--danger)}
.btn.sm{padding:6px 12px;font-size:13px;border-radius:8px}
.btn.big{width:100%;padding:14px;font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer}
.chip:hover{border-color:var(--brand)}
.chip.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.chip.q{background:var(--brand-soft);border-color:transparent;color:var(--brand-text)}.chip.q:hover{border-color:var(--brand)}
.chip.sm{padding:1px 8px;font-size:var(--fs-min)}
.chip[draggable=true]{cursor:grab}
.tag{display:inline-block;background:var(--danger-soft);color:var(--danger);border:1px solid var(--danger);border-radius:999px;padding:0 8px;font-size:var(--fs-min);font-weight:700;margin-left:8px;vertical-align:middle}
.tag.amber{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line)}
tr.od td{background:var(--danger-soft)}
.lowb{align-self:flex-start;background:var(--danger-soft);color:var(--danger);font-size:var(--fs-min);font-weight:700;border-radius:999px;padding:1px 8px;white-space:nowrap}
td .lowb{display:inline-block;margin-left:6px;vertical-align:middle}
.lnk{background:none;border:0;padding:0;color:var(--brand-text);font-weight:600;cursor:pointer;text-decoration:underline dotted}
.lnk2{background:none;border:0;padding:4px 0;color:var(--brand-text);font-weight:600;font-size:var(--fs-min);cursor:pointer;text-align:left}
.txtbtn{background:none;border:0;padding:4px 2px;color:var(--mut);font-size:13px;font-weight:600;cursor:pointer;text-decoration:underline}.txtbtn:hover{color:var(--ink)}

/* ---------- sales screen ---------- */
.pos{display:grid;grid-template-columns:1fr 380px;gap:20px;height:calc(100vh - 124px - var(--bn,0px));min-height:540px}
.cat{display:flex;flex-direction:column;min-height:0}
.sbar{position:relative;margin-bottom:4px}
.sbar svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;stroke:var(--mut);fill:none;stroke-width:2;stroke-linecap:round}
#q{padding:13px 16px 13px 44px;font-size:16px;border-radius:12px}
.grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;align-content:start;overflow:auto;padding:2px;margin-top:6px}
.item{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;color:var(--ink);display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow-sm)}
.item:hover{border-color:var(--brand);box-shadow:0 4px 14px var(--ring)}
.item .ih{display:flex;align-items:center;gap:8px;min-width:0}
.item .ih b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25;min-height:2.5em;font-size:14px;flex:1;min-width:0}
.item em{font-style:normal;font-weight:800;color:var(--brand-text);font-size:18px;line-height:1.2;font-variant-numeric:tabular-nums}
.item span{color:var(--mut);font-size:var(--fs-min)}
.av{width:32px;height:32px;flex:none;border-radius:50%;object-fit:cover}
.emptyx{grid-column:1/-1;text-align:center;border:1.5px dashed var(--line);border-radius:var(--r);padding:28px 18px;margin:8px 0}
.emptyx b{display:block;font-size:16px}.emptyx p{margin:6px 0 14px;color:var(--mut)}
.emptyx .eb{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.emptyx .eb .btn{flex:none}

/* cart */
.cartp{display:flex;flex-direction:column;min-height:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)}
.ch{display:flex;justify-content:space-between;align-items:center;padding:16px 18px 8px}.ch h3{margin:0;font-size:17px}
.ch .hd{display:flex;align-items:center;gap:12px}
.ch b{background:var(--brand-soft);color:var(--brand-text);border-radius:999px;padding:2px 10px;font-size:13px}
.cartp>.chips{padding:0 18px;margin:6px 0}
.clist{flex:1;overflow:auto;padding:0 18px;min-height:0}
.cf{padding:14px 18px 18px;background:var(--surface2);border-top:1px solid var(--line)}
.row2{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}.row2 label{margin:0 0 4px;font-size:var(--fs-min)}
.cf .row{margin-top:8px}.cf .row>*{min-width:0}
.tot{display:flex;justify-content:space-between;align-items:baseline;margin:12px 0 8px}
.tot span{color:var(--mut);font-weight:600}.tot b{font-size:32px;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.qc{margin:4px 0 8px}.qc .chip{padding:4px 12px}
.pr{display:flex;align-items:center;gap:10px;margin-bottom:10px}.pr input{flex:1}.pr span{color:var(--mut);white-space:nowrap}.pr b{color:var(--ink);font-variant-numeric:tabular-nums}
.qty{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-variant-numeric:tabular-nums}
.qty input.qi{width:54px;text-align:center;padding:6px 4px;font-weight:700}
.pbtn{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--line);color:var(--brand-text);border-radius:6px;padding:2px 8px;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums}
.pbtn:hover{border-color:var(--brand)}
.pbtn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pbtn.chg{color:var(--warn);border-color:var(--warn)}
.was{display:block;color:var(--mut);font-size:var(--fs-min);margin-top:3px;white-space:nowrap}
#bdebt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* change panel + toast */
.chgp{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:60;width:min(440px,92vw);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-top:8px solid var(--success-fill);border-radius:18px;padding:24px 28px 20px;text-align:center;box-shadow:var(--shadow-md);cursor:pointer;font:inherit}
.chgp small{display:block;color:var(--mut);font-size:14px}
.chgp .lbl{display:block;font-size:var(--fs-min);font-weight:800;letter-spacing:3px;margin-top:12px;color:var(--mut)}
.chgp .amt{display:block;font-size:72px;line-height:1.05;font-weight:800;color:var(--success);margin:2px 0 8px;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.chgp .hint{display:block;color:var(--mut);font-size:var(--fs-min)}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:12px 20px;border-radius:12px;font-weight:600;z-index:50;box-shadow:var(--shadow-md)}

/* ---------- stats and reports ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:16px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow-sm)}
.stat span{color:var(--mut);font-size:13px;font-weight:600}
.stat b{display:block;font-size:24px;margin-top:4px;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.stat small{display:block;margin-top:4px;color:var(--mut);font-size:13px}
.stat.hero b{font-size:30px}
.stats:not(.rep) .stat:first-child,.stat.inv{background:var(--brand-soft);border-color:transparent}
.stats:not(.rep) .stat:first-child span,.stat.inv span{color:var(--brand-text)}
.stat small.up{color:var(--success)}.stat small.dn{color:var(--danger)}
.stat.good b{color:var(--success)}
.stat.net.is-up{background:var(--success-soft);border-color:transparent}.stat.net.is-up span,.stat.net.is-up b{color:var(--success)}
.stat.net.is-down{background:var(--danger-soft);border-color:transparent}.stat.net.is-down span,.stat.net.is-down b{color:var(--danger)}
.rgroup{margin-bottom:8px}
.rgroup>h3{margin:0 0 8px;font-size:var(--fs-min);letter-spacing:.8px;text-transform:uppercase;color:var(--mut)}
.rgroup .stats,.stats.rep{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.chart{overflow-x:auto}
.bar-read{font-size:13px;color:var(--mut);min-height:20px;margin-bottom:6px;line-height:1.45;font-variant-numeric:tabular-nums}
.plot{display:flex;gap:6px;align-items:flex-start}
.yax{position:relative;width:44px;flex:none;margin-top:14px;font-size:11px;color:var(--mut);font-variant-numeric:tabular-nums}
.yax span{position:absolute;right:0;transform:translateY(50%);line-height:1;white-space:nowrap}
.pl{flex:1;position:relative;padding-top:14px;min-width:calc(var(--n,1)*26px)}
.pl .grid{position:absolute;left:0;right:0;top:14px;pointer-events:none;display:block;overflow:visible;padding:0;margin:0}   /* chart gridlines only: this used to also hit the New Sale product list, which has the same class name */
.pl .grid i{position:absolute;left:0;right:0;border-top:1px dashed var(--line);opacity:.8}
.pl .grid.avgl{z-index:3}.avg{position:absolute;left:0;right:0;border-top:1.5px dashed var(--accent)}
.avg span{position:absolute;right:0;bottom:3px;font-size:11px;font-weight:700;color:var(--accent);background:var(--surface);padding:0 4px;border-radius:4px;opacity:.95}
.bars{position:relative;z-index:2;display:flex;align-items:flex-start;gap:0}
.bar{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;background:none;border:0;padding:0;font:inherit;color:var(--ink);cursor:pointer}
.bar .col{width:100%;position:relative;display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid var(--mut)}
.bar .col i{width:calc(100% - 8px);max-width:64px;background:var(--bar);border-radius:5px 5px 0 0;min-height:2px;transition:background .15s}
.bar .col i.mx{background:var(--accent)}
.bar:hover .col i,.bar.sel .col i{background:var(--brand)}
.bar:hover .col i.mx,.bar.sel .col i.mx{background:var(--accent);filter:brightness(1.15)}
.bar.sel{background:var(--hover);border-radius:6px}
.bar .bv{position:absolute;left:50%;transform:translateX(-50%);font-size:11px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.bar small{display:block;text-align:center;font-size:12px;line-height:1.2;padding:5px 0 2px;color:var(--mut)}
.bar small em{display:block;font-style:normal;font-size:10.5px;opacity:.8;margin-top:1px}
.bar.now small{color:var(--ink);font-weight:800}
.bar.sel small{color:var(--ink);font-weight:800}
.bar:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:4px}

/* ---------- menus, dialogs, banner ---------- */
.menu{position:absolute;right:0;top:calc(100% + 6px);width:272px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);padding:16px;z-index:20;display:flex;flex-direction:column;gap:16px}
dialog.modal{border:0;border-radius:16px;padding:0;width:min(760px,94vw);max-height:92vh;overflow:auto;color:var(--ink);background:var(--surface);box-shadow:var(--shadow-md)}
dialog.modal::backdrop{background:var(--scrim)}
dialog.modal .card{margin:0;border:0;box-shadow:none}
.bn{background:var(--warn-bg);color:var(--warn-ink);border-bottom:1px solid var(--warn-line);padding:0 24px;height:40px;display:flex;align-items:center;gap:12px;font-size:14px}
.bn .btn.sm{background:var(--warn-ink);color:var(--warn-bg)}.bn .btn.sm:hover{opacity:.85}
.more-sheet{position:fixed;right:8px;bottom:70px;max-height:70vh;overflow-y:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:6px;z-index:30;min-width:190px;box-shadow:var(--shadow-md)}
.more-sheet[hidden]{display:none}
.more-sheet button{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;color:var(--ink);padding:14px;font-weight:600;border-radius:10px;cursor:pointer;text-align:left}
.more-sheet button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.more-sheet button.on{background:var(--brand-soft);color:var(--brand-text)}

/* ---------- responsive ---------- */
@media(max-width:1000px){.pos{grid-template-columns:1fr;height:auto}.grid{max-height:50vh}.clist{max-height:40vh}.cols{grid-template-columns:1fr}}
@media(min-width:761px){.more-sheet{display:none!important}}
@media(max-width:760px){
.shell{grid-template-columns:1fr}
aside{display:none}
#tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:10;background:var(--surface);border-top:1px solid var(--line);padding:6px}
#tabbar button{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;color:var(--mut);font-size:var(--fs-min);font-weight:600;padding:6px 2px;border-radius:8px;cursor:pointer}
#tabbar button.on{color:var(--brand-text);background:var(--brand-soft);box-shadow:inset 0 2px 0 var(--accent)}
#tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#tabbar .badge{position:absolute;top:0;right:14%;margin:0}
.top{padding:12px;justify-content:flex-start}.top>span{margin-left:auto}.top .mlogo{display:block}.top h1{font-size:18px}.top>span{gap:8px}.top>span>span:last-child{display:none}.top .pill{padding:6px 10px;font-size:13px}.top .pill em{margin-left:5px}
main{padding:14px 12px 96px}.bn{padding:0 12px}
.toast{bottom:90px}.chgp .amt{font-size:56px}
.stat b{font-size:20px}.stat.hero b{font-size:22px}
}

/* ---------- touch mode: larger targets, 13px small text ---------- */
body.touch .btn{padding:15px 18px;font-size:16px}body.touch .btn.sm{padding:10px 13px;font-size:14px}
body.touch .chip{padding:10px 16px;font-size:15px}body.touch .chip.sm{padding:8px 12px}
body.touch .item{padding:16px}body.touch .grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
body.touch nav .nv,body.touch nav .gh{padding:13px 12px}body.touch input{padding:14px;font-size:16px}
body.touch .qty input.qi{padding:12px 4px}body.touch .pbtn{padding:8px 12px}body.touch .pl{min-width:calc(var(--n,1)*34px)}
@media(max-width:760px){body.touch #tabbar button{padding:10px 2px}}

/* ---------- print ---------- */
.only-print,#pv{display:none}
img.av{object-fit:cover}
@media print{@page{margin:10mm}aside,#tabbar,.more-sheet,.top,.no-print,.toast,.bn,.chgp{display:none!important}.shell{display:block}main{padding:0;max-width:none}.only-print{display:block}
body.pv .shell{display:none!important}body.pv #pv{display:block;color:#000}body{background:#fff}.card{box-shadow:none}}

/* ---------- v10: grouped navigation, dashboard, notifications, status pills ---------- */
#tabbar{display:none}
@media(max-width:760px){#tabbar{display:flex}}
.more-sheet .mh{font-size:var(--fs-min);text-transform:uppercase;letter-spacing:.8px;color:var(--mut);padding:10px 14px 2px;font-weight:700}
.more-sheet button.sub{padding:10px 14px 10px 30px}
.more-sheet .badge{margin-left:auto}
.pb{display:inline-block;border-radius:999px;padding:1px 8px;font-size:var(--fs-min);font-weight:700;white-space:nowrap;border:1px solid transparent}
.pb.danger{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}
.pb.warn{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line)}
.pb.ok{background:var(--success-soft);color:var(--success);border-color:var(--success)}
td .pb{margin-left:6px}
.nf{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.nf:last-child{border-bottom:0}
.nf .tx{flex:1;min-width:0}.nf .tx b{display:block}
.nf .pb{margin-left:0;min-width:72px;text-align:center}
.qa{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}

/* v11: top bar icon buttons and the Display menu */
.ib{width:38px;height:38px;display:grid;place-items:center;padding:0;border:1px solid var(--line);background:var(--surface);color:var(--mut);border-radius:10px;cursor:pointer}
.ib:hover,.ib[aria-expanded="true"]{background:var(--surface2);color:var(--ink)}
.ib svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
body.touch .ib{width:44px;height:44px}
.menu .mt{margin:0 0 8px;font-size:var(--fs-min);text-transform:uppercase;letter-spacing:.8px;color:var(--mut);font-weight:700}
.menu .mh2{margin:6px 0 0;font-size:var(--fs-min);color:var(--mut)}
.seg{display:flex;gap:2px;padding:3px;background:var(--surface2);border-radius:10px}
.seg button{flex:1;border:0;background:none;padding:7px 8px;border-radius:8px;font-weight:600;color:var(--mut);cursor:pointer}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.mrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mrow b{display:block}.mrow small{color:var(--mut);font-size:var(--fs-min)}
.sw{position:relative;flex:none;width:46px;height:28px;border:0;border-radius:999px;background:var(--line);cursor:pointer;transition:background .15s}
.sw::after{content:"";position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:var(--on-fill);box-shadow:var(--shadow-sm);transition:transform .15s}
.sw[aria-checked="true"]{background:var(--brand)}.sw[aria-checked="true"]::after{background:var(--on-brand)}
.sw[aria-checked="true"]::after{transform:translateX(18px)}

/* ---------- v12: accounts, sign-in, in-page dialogs ---------- */
select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
.chk{display:flex;align-items:center;gap:10px;font-weight:600;margin:14px 0 0;cursor:pointer}
.chk input{width:auto;margin:0}
.btn.dng{background:var(--danger-fill)}.btn.dng:hover{background:var(--danger)}
.uav{display:inline-grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;background:var(--brand-soft);color:var(--brand-text);font-weight:800}
.ulist{display:grid;gap:8px}
.ubtn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;font:inherit}
.ubtn:hover{border-color:var(--brand);background:var(--hover)}
.ubtn b{display:block}.ubtn small{color:var(--mut);font-size:var(--fs-min)}
.ucip{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px 0 4px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;cursor:pointer;font-weight:600}
.ucip:hover,.ucip[aria-expanded="true"]{background:var(--surface2)}
.ucip .uav{width:30px;height:30px}
.ucip .un{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.touch .ucip{height:44px}
.mcol{display:flex;flex-direction:column;gap:8px}
@media(max-width:760px){.ucip .un{display:none}.ucip{padding:0 4px}.ucip .pb{display:none}}

/* ---------- v12: motion ----------
   Short and quiet: 150 to 350 ms, using only opacity and transform. Page content rises in when you change pages
   (not when the same page refreshes). Switch it off under Display, or with the device's "reduce motion" setting. */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes dlgIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes kidsIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes sheetIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:translate(-50%,-46%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes toastOut{to{opacity:0;transform:translate(-50%,8px)}}
@keyframes bump{40%{transform:scale(1.12)}}
@keyframes flash{from{background:var(--brand-soft)}to{background:transparent}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

#app.enter>*{animation:rise .32s cubic-bezier(.2,.7,.2,1) both}
#app.enter>*:nth-child(2){animation-delay:.04s}#app.enter>*:nth-child(3){animation-delay:.08s}
#app.enter>*:nth-child(4){animation-delay:.12s}#app.enter>*:nth-child(5){animation-delay:.16s}
#app.enter>*:nth-child(n+6){animation-delay:.2s}
#app.enter .bar .col i{transform-origin:bottom;animation:grow .5s cubic-bezier(.2,.7,.2,1) .15s both}

dialog.modal[open]{animation:dlgIn .2s ease-out}
dialog.modal[open]::backdrop{animation:fade .2s ease-out}
.menu.in{animation:menuIn .15s ease-out;transform-origin:top right}
.kids.slide{animation:kidsIn .18s ease-out}
.more-sheet:not([hidden]){animation:sheetIn .18s ease-out}
.chgp{animation:popIn .22s cubic-bezier(.2,.8,.3,1.2)}
.toast{animation:toastIn .22s ease-out,toastOut .3s ease-in 2.5s forwards}
.bump{display:inline-block;animation:bump .25s ease-out}
.cartp tr.flash td{animation:flash .9s ease-out}

/* small transitions on things you touch */
.btn,.chip,.item,.ib,.seg button,.pbtn,.ubtn{transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .1s}
input,textarea{transition:border-color .15s,box-shadow .15s}
nav .nv,nav .gh,#tabbar button,.more-sheet button{transition:background .15s,color .15s}
tr:hover td{transition:background .12s}
.btn:active,.chip:active,.item:active,.ib:active,.ubtn:active{transform:scale(.97)}
.item:hover{transform:translateY(-2px)}
.item:active{transform:scale(.97)}
.bar .col i{transition:background .15s}

/* off: the Display switch, or the device's reduce-motion setting */
body.noanim *,body.noanim *::before,body.noanim *::after{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.mlogo{display:none;flex:none}

.logo{border-radius:50%;object-fit:contain}
/* Card header: title and note on the left, buttons on the right; the buttons wrap under the text when space is tight */
.hdr{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 16px;margin-bottom:10px}
.hdr>div:first-child{flex:1 1 240px;min-width:0}
.hdr h2{margin:0}.hdr .sub{margin:4px 0 0;font-size:13px}
.hdr .acts{display:flex;flex-wrap:wrap;gap:8px}.hdr .acts .btn{flex:none;white-space:nowrap;min-width:0}
/* quick add from New Sale */
.item.add{border-style:dashed;justify-content:center}.item.add b{color:var(--brand-text)}
/* sticky checkout bar: only below 1000px, sits above the phone tab bar */
#paybar{display:none}
@media(max-width:1000px){
#paybar:not([hidden]){display:flex;align-items:center;gap:10px;position:fixed;left:220px;right:0;bottom:var(--tbh,0px);z-index:9;padding:10px 14px;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(0,0,0,.12)}
#paybar .pt{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:0;background:none;border:0;padding:0;color:var(--ink);text-align:left;cursor:pointer}
#paybar .pt small{color:var(--mut);font-size:var(--fs-min);font-weight:600;white-space:nowrap}
#paybar .pt b{font-size:24px;line-height:1.15;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
#paybar .btn{flex:none;padding:12px 16px;white-space:nowrap}
body.touch #paybar .btn{padding:14px 16px}
main{padding-bottom:calc(24px + var(--pbh,0px))}
.toast{bottom:calc(var(--tbh,0px) + var(--pbh,0px) + 28px)}
.cartp{scroll-margin-top:70px}
}
@media(max-width:760px){
#paybar:not([hidden]){left:0}
#paybar .pt b{font-size:21px}#paybar .btn{padding:11px 12px;font-size:15px}
main{padding-bottom:calc(96px + var(--pbh,0px))}
}
@media print{#paybar{display:none!important}}

/* Accessibility: text for screen readers only, and a skip link for keyboard users */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--ink);color:var(--surface);padding:10px 14px;border-radius:8px;font-weight:700}
.skip:focus{top:8px;text-decoration:none}
main:focus{outline:none}
/* Stock count mode */
.cntbar{position:sticky;top:var(--toph,64px);z-index:4;padding:12px 16px}
.cb1{display:flex;align-items:center;gap:10px}.cbp{flex:1;min-width:0}
.cbp b{display:block;font-variant-numeric:tabular-nums}
.cprog{height:8px;border-radius:99px;background:var(--surface2);overflow:hidden;margin-top:6px;border:1px solid var(--line)}
.cprog i{display:block;height:100%;width:0;background:var(--brand);transition:width .25s}
.cb1 .btn{flex:none;white-space:nowrap}
@media(max-width:760px){.cb1 .btn{padding:10px 12px}}

/* Load & Bills quick buttons: their own colours so they differ from product/category chips */
.chip.svc-load{background:#dbeafe;color:#1e40af;border-color:#93c5fd}
.chip.svc-bill{background:#fef3c7;color:#92400e;border-color:#fcd34d}
.chip.svc-load:hover{border-color:#2563eb}.chip.svc-bill:hover{border-color:#d97706}
@media screen and (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip.svc-load{background:#1e3a8a;color:#dbeafe;border-color:#3b82f6}:root:not([data-theme="light"]) .chip.svc-bill{background:#78350f;color:#fef3c7;border-color:#f59e0b}}
:root[data-theme="dark"] .chip.svc-load{background:#1e3a8a;color:#dbeafe;border-color:#3b82f6}
:root[data-theme="dark"] .chip.svc-bill{background:#78350f;color:#fef3c7;border-color:#f59e0b}

/* ---------- Products list: search, filters, sort ---------- */
.toolbar select{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);min-width:0;max-width:220px;cursor:pointer}
.ptool{position:sticky;top:0;z-index:4;background:var(--bg);padding:4px 0 12px;margin-bottom:4px;align-items:center}
.ptool input{flex:2 1 240px}.ptool select{flex:1 1 150px}
.pst{margin:0 0 8px}
.pst .cnt2{display:inline-block;min-width:20px;margin-left:4px;padding:0 6px;border-radius:999px;background:var(--surface2);color:var(--mut);font-size:12px;font-weight:700;text-align:center}
.pst .chip.on .cnt2{background:rgba(127,127,127,.28);color:inherit}
.pcount{font-size:13px;color:var(--mut);margin:4px 0 8px}.pcount b{color:var(--ink)}
.lnk{background:none;border:0;padding:0 0 0 8px;color:var(--brand-text);text-decoration:underline;font-weight:600;cursor:pointer;font-size:13px}
.ptb th:first-child{padding-left:12px}.ptb td:first-child{padding-left:12px}
.ptb td{padding:12px 8px}
.pn{display:flex;align-items:center;gap:6px}.pn b{font-weight:700}.star{color:var(--star);font-size:14px}
.ptag{display:inline-block;margin-top:4px;padding:1px 9px;border-radius:999px;background:var(--surface2);color:var(--mut);font-size:12px;font-weight:600}
.pnc{font-size:12px;display:inline-block;margin-top:4px}
.pact{white-space:nowrap}
.pmore{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
@media (max-width:640px){.ptool select{max-width:none;flex:1 1 45%}.ptool .btn{flex:1}.pact .btn{padding:6px 9px}}

/* ---------- Login / first-run setup (full screen) ----------
   Calm and black-and-white, like the rest of the app. One focal point: the form.
   Red means two things only: the app's error red (messages, invalid boxes, lockout) and ONE brand detail, the thin edge bar
   on the dark panel. Focus, selection and typed dots are neutral ink, never red. */
.lg{--err:var(--danger);--err-soft:var(--danger-soft);--err-line:#efb3b8;--ok:#1a7f4b}
@media screen and (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lg{--err-line:rgba(255,89,99,.5);--ok:#5fd394}}
:root[data-theme="dark"] .lg{--err-line:rgba(255,89,99,.5);--ok:#5fd394}
.lg{position:fixed;inset:0;z-index:1000;display:grid;grid-template-columns:minmax(320px,40%) 1fr;background:var(--bg);color:var(--ink);overflow:auto}
.lg [hidden]{display:none!important}
.lg svg{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lg button,.lg input{min-height:44px}
.lg :is(button,input,a):focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* brand panel: just the logo, the store and the date */
.lg-brand{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:48px 48px 40px;background:#0b0b0b;color:#f5f5f5}
.lg-brand::after{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--accent)}
.lg-top{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin:auto 0}
.lg-top img{width:72px;height:72px;border-radius:50%;background:#fff;object-fit:contain}
.lg-top h1{margin:0;font-size:22px;line-height:1.2;font-weight:700}
.lg-top p{margin:4px 0 0;font-size:14px;color:#c4c4c4}
.lg-bot{display:flex;flex-direction:column;gap:3px;font-size:13px;color:#c4c4c4}.lg-bot b{color:#f5f5f5;font-size:14px}

.lg-main{display:grid;justify-items:center;align-items:safe center;padding:20px clamp(24px,4vw,64px)}
.lg-box{position:relative;width:min(480px,100%);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px 28px 14px;box-shadow:0 6px 20px rgba(0,0,0,.1);animation:dlgIn .3s ease-out}
.lg-eye{display:inline-block;margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--mut)}
.lg-box h2{margin:0 0 6px;font-size:28px;letter-spacing:-.4px}
/* name step and PIN step sit in the same grid cell, so the card is always as tall as the taller one and nothing jumps */
.lg-box.stack{display:grid;align-content:start}
.lg-box.stack>#l1,.lg-box.stack>#l2{grid-area:1/1;min-width:0}
.lg-box.stack>[hidden]{display:block!important;visibility:hidden;pointer-events:none}
.lg-sub{margin:0 0 22px;line-height:1.5}
.lg-box label{margin:16px 0 7px}

/* text boxes */
.lg-f{position:relative}
.lg-f input{height:54px;padding:0 52px 0 46px;font-size:16px;border-radius:14px;background:var(--surface2);border:2px solid transparent;transition:border-color .15s,box-shadow .15s,background .15s}
.lg-f input:hover{border-color:var(--line)}
.lg-f input:focus{outline:none;background:var(--surface);border-color:var(--ink);box-shadow:0 0 0 3px var(--ring)}
.lg-f input[aria-invalid="true"]{border-color:var(--err);background:var(--err-soft)}
.lg-f input.mask{-webkit-text-security:disc;text-security:disc}
.lg-f .ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--mut);pointer-events:none}
.lg-f:focus-within .ico{color:var(--ink)}
.lg-f .eyeb{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:var(--mut);font-size:19px;border-radius:10px;cursor:pointer}
.lg-f .eyeb:hover{background:var(--hover);color:var(--ink)}

/* messages: icon + words, never colour alone */
.lg-err{display:none;align-items:flex-start;gap:8px;margin:12px 0 0;padding:10px 12px;border-radius:10px;border:1px solid var(--err-line);background:var(--err-soft);color:var(--err);font-size:14px;font-weight:600;line-height:1.4}
.lg-err.on{display:flex}.lg-err svg{margin-top:2px;font-size:16px}
.lg-err.info{border-color:var(--line);background:var(--surface2);color:var(--ink)}
.lg-hint{margin:6px 0 0;font-size:13px;color:var(--mut);min-height:18px}
.lg-center{text-align:center}
.lg-chk{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:4px;font-size:13px;color:var(--mut)}
.lg-chk li{display:flex;gap:8px;align-items:flex-start}.lg-chk li>span:first-child{width:1.2em;flex:none;text-align:center;font-weight:800}
.lg-chk .ok{color:var(--ok);font-weight:600}.lg-chk .no,.lg-chk .warn{color:var(--err);font-weight:600}

/* main button: muted until it can be used */
.lg-go{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:48px;margin-top:10px;font-size:16px;font-weight:700;border-radius:14px}
.lg-go svg{font-size:18px;transition:transform .15s}.lg-go.ready:hover svg{transform:translateX(4px)}
.lg-go[aria-disabled="true"]{background:var(--surface2);color:var(--mut);border-color:var(--line);cursor:not-allowed}
.lg-go[aria-disabled="true"]:hover{background:var(--surface2)}

/* secondary links */
.lg-alt{margin:14px 0 0;text-align:center}
.lg-box .lnk2{min-height:44px;padding:8px 12px;font-size:14px;color:var(--mut);font-weight:600;border-radius:8px;text-decoration:underline;text-underline-offset:3px}
.lg-box .lnk2:hover{color:var(--ink)}
.lg-links{display:flex;flex-wrap:wrap;justify-content:center;column-gap:4px;margin-top:4px}
.lg-hint.nudge{color:var(--ink);font-weight:700}
.lg-back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0 12px 0 0;margin:0 0 10px;color:var(--mut);font-weight:600;cursor:pointer;border-radius:8px}.lg-back:hover{color:var(--ink)}

/* "continue without a login" is a security choice: clearly secondary, with the consequence beside it */
.lg-skip{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.lg-skip p{display:flex;gap:8px;margin:0 0 10px;font-size:13px;line-height:1.45;color:var(--mut)}.lg-skip svg{margin-top:2px;font-size:16px;color:var(--ink)}
.lg-skip b{color:var(--ink)}
.lg-skipb{width:100%;padding:10px 14px;border:1px dashed var(--mut);border-radius:12px;background:none;color:var(--mut);font-weight:600;font-size:14px;cursor:pointer}
.lg-skipb:hover{color:var(--ink);border-color:var(--ink)}

/* names */
.lg-users{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-height:40vh;overflow:auto;padding:7px}
.lg-users .ubtn{position:relative;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;min-height:0;padding:12px 8px 10px;border-radius:14px;background:var(--surface2);border:2px solid transparent}
.lg-users .ubtn:hover{border-color:var(--accent);background:var(--surface)}
.lg-users .ubtn.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface));box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.lg-pinsec{margin-top:18px;padding-top:12px;border-top:1px solid var(--line)}
.lg-users .ubtn:only-child{grid-column:1/-1}
.lg-users .uav,.lg-who .uav{display:grid;place-items:center;border-radius:50%;background:#1b1b1b;color:#fff;font-weight:800}
.lg-users .uav{width:38px;height:38px;font-size:17px;background:var(--accent-fill);color:#fff}
.lg-who .uav{width:48px;height:48px;font-size:20px}
.ut{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.lg-users .ubtn b{font-size:15px;word-break:break-word}
.lg-users .ubtn small{display:inline-block;padding:0 9px;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--ink);font-weight:600;font-size:12px}
.lg-users .when{font-size:11px;color:var(--mut)}
.lg-users .lastpill{position:absolute;top:6px;right:6px;padding:1px 8px;border-radius:999px;background:var(--accent-fill);color:#fff;font-size:11px;font-weight:700}

/* PIN step */
.lg-who{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:2px;text-align:center}
.lg-who b{display:block;font-size:18px;line-height:1.2}.lg-who small{color:var(--mut);font-size:13px}
.lg-dots{display:flex;justify-content:center;gap:14px;margin:10px 0 2px;min-height:24px;cursor:text}
.lg-dots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--mut);transition:background .12s,transform .12s}
.lg-dots i.on{background:var(--ink);border-color:var(--ink);transform:scale(1.12)}
.pinmode .lg-pin{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;min-height:0;padding:0;border:0}
.pinmode .lg-f .ico{display:none}
.lg-pin{text-align:center;font-size:20px;font-weight:700;letter-spacing:3px}
.recmode .lg-dots{display:none}
.recmode .lg-pin{margin-top:16px;letter-spacing:2px;text-transform:uppercase}
.lg-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 2px}
.lg-key{height:48px;border:0;border-radius:14px;background:var(--surface2);color:var(--ink);font-size:20px;font-weight:700;cursor:pointer;transition:background .12s,transform .08s}
.lg-key.sm{font-size:14px;color:var(--mut);font-weight:600}
.lg-key:hover{background:var(--hover);box-shadow:inset 0 0 0 1.5px var(--line)}
.lg-key:active{transform:scale(.94);background:var(--ink);color:var(--surface)}

/* lockout countdown */
.lg-cd{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;margin-top:12px;padding:10px 12px;border-radius:10px;border:1px solid var(--err-line);background:var(--err-soft);font-size:14px;font-weight:600}
.lg-cd b{font-size:20px;font-variant-numeric:tabular-nums}
.lg-cd i{grid-column:1/-1;height:6px;border-radius:99px;background:var(--surface2);overflow:hidden}.lg-cd u{display:block;height:100%;width:100%;background:var(--err);transition:width 1s linear}

.shake{animation:lgShake .35s}
@keyframes lgShake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
body.noanim .lg *,body.noanim .lg{animation:none!important}
@media (prefers-reduced-motion:reduce){.shake,.lg-box,.lg-welcome,.lg-wc{animation:none!important}.lg *,.lg-cd u,.lg-welcome{transition:none!important}}

/* welcome splash shown for a moment after signing in */
.lg-welcome{position:fixed;inset:0;z-index:999;display:grid;place-items:center;background:var(--bg);pointer-events:none;opacity:1;transition:opacity .3s ease-out}
.lg-welcome.out{opacity:0}
.lg-wc{display:flex;flex-direction:column;align-items:center;gap:14px;font-size:26px;animation:dlgIn .3s ease-out}
.lg-wc .uav{width:72px;height:72px;font-size:28px;background:#1b1b1b;color:#fff}

/* loading screen while the store data opens: appears only if it takes more than a moment */
.boot{position:fixed;inset:0;z-index:1001;display:grid;place-content:center;justify-items:center;gap:14px;background:var(--bg);color:var(--mut);font-weight:600;animation:bootIn .2s ease-out .25s both}
.boot img{width:64px;height:64px;border-radius:50%}
.boot .spin{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:bootSpin .8s linear infinite}
@keyframes bootIn{from{opacity:0}to{opacity:1}}@keyframes bootSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.boot .spin{animation:none;border-top-color:var(--mut)}}

@media (max-height:760px){.lg-key{height:44px}.lg-who .uav{width:40px;height:40px;font-size:17px}.lg-box{padding-top:18px}.lg-dots{margin-top:6px}}
@media (max-width:980px){.lg{grid-template-columns:minmax(260px,36%) 1fr}.lg-brand{padding:36px 28px 28px}}
@media (max-width:720px){
  .lg{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .lg-brand{padding:16px 20px;gap:0;flex-direction:row;align-items:center}
  .lg-brand::after{width:100%;height:4px;top:auto;bottom:0}
  .lg-top{flex-direction:row;align-items:center;gap:14px;margin:0}.lg-top img{width:52px;height:52px}.lg-top h1{font-size:18px}.lg-top p{font-size:13px;margin:0}
  .lg-bot{display:none}
  .lg-main{align-items:start;padding:18px 14px}.lg-box{padding:28px 20px 22px;border-radius:18px}
}

/* ---------- sign-in motion: cards rise in, the chosen card pops, dots fill, the button lights up ---------- */
@keyframes lgRise{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes lgPop{0%{transform:scale(.96)}55%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes lgFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes lgDot{0%{transform:scale(.6)}60%{transform:scale(1.35)}100%{transform:scale(1.12)}}
@keyframes lgReady{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
@keyframes lgBrand{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes lgRing{0%,100%{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}50%{box-shadow:0 0 0 2px var(--surface),0 0 0 7px color-mix(in srgb,var(--accent) 35%,transparent)}}
.lg-users .ubtn{transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .2s,background .2s;animation:lgRise .45s cubic-bezier(.2,.8,.2,1) both}
.lg-users .ubtn:nth-child(2){animation-delay:.08s}.lg-users .ubtn:nth-child(3){animation-delay:.16s}.lg-users .ubtn:nth-child(4){animation-delay:.24s}.lg-users .ubtn:nth-child(n+5){animation-delay:.3s}
.lg-users .ubtn:hover{transform:translateY(-3px)}
.lg-users .ubtn:active{transform:scale(.97)}
.lg-users .ubtn.sel{animation:lgPop .32s ease-out,lgRing 2.6s ease-in-out .35s infinite}
.lg-users .uav{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.lg-users .ubtn:hover .uav{transform:scale(1.08)}
.lg-users .ubtn.sel .uav{transform:scale(1.12) rotate(-4deg);box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 45%,transparent)}
.lg-users .lastpill{transition:transform .2s}.lg-users .ubtn:hover .lastpill{transform:scale(1.06)}
.lg-pinsec{animation:lgFade .4s ease-out .2s both}
.lg-dots i{transition:background .15s,transform .15s,border-color .15s}
.lg-dots i.on{animation:lgDot .22s ease-out;background:var(--accent);border-color:var(--accent)}
.lg-go{transition:background .2s,color .2s,border-color .2s,transform .12s,box-shadow .2s}
.lg-go.ready{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff;animation:lgReady .7s ease-out}
.lg-go.ready:active{transform:scale(.98)}
.lg-top img{animation:lgBrand .6s cubic-bezier(.2,.8,.2,1) both}.lg-top h1{animation:lgBrand .6s cubic-bezier(.2,.8,.2,1) .1s both}.lg-top p{animation:lgBrand .6s cubic-bezier(.2,.8,.2,1) .18s both}
.lg-box .lnk2{transition:color .15s,background .15s}.lg-box .lnk2:hover{background:var(--hover)}
.lg-err.on{animation:lgFade .25s ease-out}
@media (prefers-reduced-motion:reduce){.lg-users .ubtn,.lg-users .uav,.lg-pinsec,.lg-dots i,.lg-go,.lg-top img,.lg-top h1,.lg-top p,.lg-err{animation:none!important;transition:none!important}}

/* ---------- top bar "Today's sales": a bold red badge with a live dot ---------- */
@keyframes pillDot{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}100%{box-shadow:0 0 0 7px rgba(255,255,255,0)}}
@keyframes pillGlow{0%,100%{box-shadow:0 4px 14px rgba(209,15,26,.35)}50%{box-shadow:0 4px 22px rgba(209,15,26,.6)}}
.top .pill{position:relative;display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 14px;border-radius:999px;background:linear-gradient(135deg,#b80c17,#d3141f);color:#fff;font-size:14px;font-weight:700;letter-spacing:.2px;border:1px solid rgba(255,255,255,.18);box-shadow:0 4px 14px rgba(209,15,26,.35);animation:pillGlow 3s ease-in-out infinite;transition:transform .18s,filter .18s}
.top .pill:hover{transform:translateY(-1px);filter:brightness(1.08)}
.top .pill::before{content:"";width:9px;height:9px;border-radius:50%;background:#fff;flex:none;animation:pillDot 1.8s ease-out infinite}
.top .pill em{margin-left:2px;padding:2px 10px;border-radius:999px;background:rgba(0,0,0,.28);font-size:18px;font-weight:800;letter-spacing:.3px}
@media (prefers-reduced-motion:reduce){.top .pill,.top .pill::before{animation:none!important;transition:none!important}}
body.noanim .top .pill,body.noanim .top .pill::before{animation:none!important}

/* ---------- New Sale: more room for the cart ---------- */
@media(min-width:1001px){
  .pos{grid-template-columns:1fr 450px;gap:16px}                 /* a wider cart, so each item fits on one line */
  .ch{padding:12px 16px 4px}
  .clist{padding:0 16px;min-height:200px}                        /* the item list always keeps at least this much height */
  .cf{padding:8px 16px 12px}                                      /* the payment area under the list is tighter */
  .cf .row2 label{margin:0 0 2px}
  .cf .row2 input{padding:7px 10px}
  .tot{margin:6px 0 4px}.tot b{font-size:26px}
  .qc{flex-wrap:nowrap;gap:6px;margin:2px 0 6px}.qc .chip{flex:1;min-width:0;padding:4px 6px;text-align:center}
  .pr{margin-bottom:6px}.pr input{padding:7px 10px}
  .cf .row{margin-top:6px}
  .cf .btn.big{padding:10px 12px;font-size:15px}
  .cf .btn.ghost{padding:8px 12px}
}

/* ---------- New Sale: a compact payment area (wins over Touch mode's bigger sizes) so the cart list gets the room ---------- */
.pos .cf{padding:8px 14px 10px!important}
.pos .cf .row2{gap:8px}
.pos .cf .row2>div{min-width:0}
.pos .cf label{margin:0 0 2px!important;font-size:12px!important;line-height:1.2}
.pos .cf input{height:36px!important;min-height:0!important;padding:4px 10px!important;font-size:14px!important;border-radius:8px}
.pos .cf .tot{margin:6px 0 4px!important}.pos .cf .tot b{font-size:24px!important;line-height:1.1}.pos .cf .tot span{font-size:13px}
.pos .cf .qc{display:flex;flex-wrap:nowrap!important;gap:5px!important;margin:0 0 6px!important}
.pos .cf .qc .chip{flex:1 1 0;min-width:0;padding:5px 2px!important;font-size:13px!important;text-align:center;line-height:1.2}
.pos .cf .pr{margin:0 0 6px!important;gap:8px}.pos .cf .pr span{font-size:13px}
.pos .cf .row{margin-top:6px!important;gap:6px}
.pos .cf .btn,.pos .cf .btn.big,.pos .cf .btn.ghost{padding:8px 10px!important;font-size:14px!important;min-height:0!important;line-height:1.2}
.pos .cf .btn.big{font-weight:700}
.pos .ch{padding:10px 14px 4px!important}
.pos .clist{padding:0 14px!important}

/* New Sale: Total and the quick cash buttons, a bit bigger than the compact size above */
.pos .cf .tot{margin:8px 0 6px!important}
.pos .cf .tot span{font-size:15px!important}
.pos .cf .tot b{font-size:32px!important}
.pos .cf .qc{gap:7px!important;margin:0 0 8px!important}
.pos .cf .qc .chip{padding:9px 2px!important;font-size:15px!important;font-weight:700}

/* GCash / Maya cash in and cash out chips on New Sale */
.chip.svc-in{background:#dcfce7;color:#166534;border-color:#86efac}
.chip.svc-out{background:#ede9fe;color:#5b21b6;border-color:#c4b5fd}
.chip.svc-in:hover{border-color:#16a34a}.chip.svc-out:hover{border-color:#7c3aed}
@media screen and (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip.svc-in{background:#14532d;color:#dcfce7;border-color:#22c55e}:root:not([data-theme="light"]) .chip.svc-out{background:#4c1d95;color:#ede9fe;border-color:#8b5cf6}}
:root[data-theme="dark"] .chip.svc-in{background:#14532d;color:#dcfce7;border-color:#22c55e}
:root[data-theme="dark"] .chip.svc-out{background:#4c1d95;color:#ede9fe;border-color:#8b5cf6}

/* v17: supplier price history sparkline */
.spark{display:block;width:100%;max-width:420px;height:70px;margin:10px 0;color:var(--brand-text)}

/* Staff Home: large task buttons */
.tasks{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:16px}
.task{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;min-height:96px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);cursor:pointer;font:inherit}
.task b{font-size:20px}.task span{color:var(--mut);font-size:14px}
.task:first-child{background:var(--brand-soft);border-color:transparent}
.task:hover{box-shadow:var(--shadow-md)}
.task:focus-visible{outline:3px solid var(--brand-text);outline-offset:2px}
body.touch .task{min-height:120px}
/* shortcut hints: small keycaps, hidden on touch screens where there is no keyboard */
.kbd.hint,.kbd.key{display:inline-block;padding:1px 7px;border:1px solid var(--line);border-radius:6px;background:var(--surface2);color:var(--mut);font-size:var(--fs-min);opacity:1}
.sbar{position:relative}.sbk{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none}
@media (hover:none){.kbd.hint,.btn .kbd{display:none}}
body.touch .kbd.hint,body.touch .btn .kbd{display:none}
.kh{margin:14px 0 6px;font-size:var(--fs-min);text-transform:uppercase;letter-spacing:.8px;color:var(--mut)}
.kl{display:grid;grid-template-columns:90px 1fr;gap:8px 12px;margin:0 0 10px;align-items:center}.kl dt,.kl dd{margin:0}

/* Clear cart: a secondary button, at the top of the cart and far from the Pay buttons */
.ch .clr{flex:none}

/* ---------- touch targets: every control is at least 44 x 44 px in touch mode (Auto on touchscreens, or On) ----------
   The compact desktop POS layout sets fixed small heights with !important, so these rules repeat it with a higher weight. */
body.touch .btn,body.touch .btn.sm,body.touch .chip,body.touch .chip.sm,body.touch .item,body.touch select,
body.touch input:not([type=checkbox]):not([type=radio]),body.touch textarea,body.touch .ib,body.touch .ucip,
body.touch nav .nv,body.touch nav .gh,body.touch .seg button,body.touch .more-sheet button,body.touch .task,
body.touch .lg-skipb,body.touch .lg-back,body.touch .lnk2,body.touch .lg-key{min-height:44px}
body.touch .ib{min-width:44px}
body.touch .pbtn{min-width:44px;min-height:44px;justify-content:center}
body.touch .lnk,body.touch .txtbtn{display:inline-flex;align-items:center;min-height:44px;padding-top:0;padding-bottom:0}
body.touch .chk{min-height:44px}body.touch .chk input{width:24px;height:24px}
body.touch summary{min-height:44px;align-items:center}
body.touch #tabbar button{min-height:56px}
body.touch .sw::before{content:"";position:absolute;inset:-9px -4px}   /* switch looks the same, its tappable area is 44 px tall */
body.touch .pos .cf input{height:44px!important;min-height:44px!important;font-size:16px!important}
body.touch .pos .cf .btn,body.touch .pos .cf .btn.big,body.touch .pos .cf .btn.ghost{min-height:44px!important;padding:10px 12px!important}
body.touch .pos .cf .qc .chip{min-height:44px!important}
body.touch .qty input.qi{min-height:44px}

/* ===== v27 redesign layer: cleaner and calmer. Delete this block to go back to the v26 look. ===== */
:root{--bg:#f6f6f5;--line:#e4e4e2;--r:14px}
/* sidebar: the open page is a solid pill (red marker kept) */
nav .nv.on{background:var(--brand);color:var(--on-brand)}
/* dashboard: the first card (Today's sales) is the solid hero, labels are small caps */
.stat{padding:18px}
.stat span{text-transform:uppercase;letter-spacing:.5px;font-size:12px}
.stats:not(.rep) .stat.hero.inv{background:var(--brand);border-color:transparent}
.stats:not(.rep) .stat.hero.inv span,.stats:not(.rep) .stat.hero.inv small,.stats:not(.rep) .stat.hero.inv b{color:var(--on-brand)}
.stats:not(.rep) .stat.hero.inv span,.stats:not(.rep) .stat.hero.inv small{opacity:.75}
/* New Sale: text-only product cards (name, then price under a thin line) */
.item .av{display:none}
.item{padding:10px 14px 12px;gap:6px}
.item .ih b{font-weight:800;font-size:16px;line-height:1.25;min-height:0;color:var(--ink)}
.item em{margin-top:auto;padding-top:6px;border-top:1px solid var(--line);font-size:17px}
.item.add{gap:4px}
/* New Sale: wider cart with more room for the items (desktop and tablet only; phones keep the stacked layout) */
@media(min-width:1001px){.pos{grid-template-columns:1fr clamp(400px,36vw,480px)}}
/* Cart rows: the price sits next to the name (one line, not two) and the rows are tighter, so more items show at once.
   In Touch mode the buttons keep their 44px size; only the layout gets tighter. */
.clist td{padding:6px 4px}
.clist td:first-child{line-height:1.25}
.clist td:first-child br{display:none}
.clist td:first-child .mut{display:block}
.clist td:first-child .pbtn{margin-left:8px;vertical-align:middle}
body:not(.touch) .clist .qty .btn.sm{padding:4px 11px}
body:not(.touch) .clist .qty input.qi{padding:4px;width:48px}
/* New Sale payment area: a little smaller (Total, quick-cash chips, inputs and spacing) */
.pos .cf{padding:6px 14px 8px!important}
.pos .cf label{font-size:11px!important}
.pos .cf input{height:32px!important;font-size:13px!important}
.pos .cf .tot{margin:4px 0 4px!important}
.pos .cf .tot span{font-size:13px!important}
.pos .cf .tot b{font-size:26px!important}
.pos .cf .qc{gap:5px!important;margin:0 0 5px!important}
.pos .cf .qc .chip{padding:4px 2px!important;font-size:13px!important;min-height:34px!important}
.pos .cf .pr{margin:0 0 5px!important}
.pos .cf .row{margin-top:5px!important}

/* ===== v27 motion: a livelier loading screen and smoother transitions. Everything here switches off with Display > Animations or the device's reduce-motion setting. ===== */
/* loading screen: shows at once, logo pops in and pulses, a red bar slides, the text breathes, then it fades away */
.boot{animation:bootIn .3s ease-out both;gap:18px}
.boot.out{animation:bootOut .45s ease-in forwards;pointer-events:none}
.boot img{width:84px;height:84px;animation:bootLogo .7s cubic-bezier(.2,.8,.3,1.2) both,bootPulse 1.8s ease-out .7s infinite}
.boot .spin{width:150px;height:4px;border:0;border-radius:999px;background:var(--line);overflow:hidden;position:relative;animation:none}
.boot .spin::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;border-radius:999px;background:var(--danger-fill);animation:bootBar 1.1s ease-in-out infinite}
.boot>span:last-child{animation:bootText 1.6s ease-in-out infinite}
@keyframes bootOut{to{opacity:0;transform:scale(1.04)}}
@keyframes bootLogo{from{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes bootPulse{0%{box-shadow:0 0 0 0 rgba(209,15,26,.45)}100%{box-shadow:0 0 0 24px rgba(209,15,26,0)}}
@keyframes bootBar{0%{transform:translateX(-110%)}100%{transform:translateX(250%)}}
@keyframes bootText{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.boot img,.boot>span:last-child{animation:none}.boot .spin::after{animation:none;width:100%;opacity:.5}.boot.out{animation:none}}
/* pages: the cards and the product tiles come in one after another */
#app.enter .stats>.stat{animation:rise .45s cubic-bezier(.2,.7,.2,1) .08s backwards}
#app.enter .stats>.stat:nth-child(2){animation-delay:.13s}#app.enter .stats>.stat:nth-child(3){animation-delay:.18s}
#app.enter .stats>.stat:nth-child(4){animation-delay:.23s}#app.enter .stats>.stat:nth-child(n+5){animation-delay:.28s}
#app.enter .cols>*{animation:rise .45s cubic-bezier(.2,.7,.2,1) .15s backwards}
#app.enter .cols>*:nth-child(2){animation-delay:.22s}
#app.enter .grid .item{animation:rise .35s cubic-bezier(.2,.7,.2,1) backwards}
#app.enter .grid .item:nth-child(2){animation-delay:.03s}#app.enter .grid .item:nth-child(3){animation-delay:.06s}
#app.enter .grid .item:nth-child(4){animation-delay:.09s}#app.enter .grid .item:nth-child(5){animation-delay:.12s}
#app.enter .grid .item:nth-child(6){animation-delay:.15s}#app.enter .grid .item:nth-child(n+7){animation-delay:.18s}
/* things you touch: buttons lift, menu items slide, dashboard cards rise, the theme fades when you switch it */
.btn:not(:disabled):hover:not(:active){transform:translateY(-1px)}
nav .nv,nav .gh{transition:background .2s,color .2s,transform .2s,box-shadow .2s}
nav .nv:not(.on):hover{transform:translateX(3px)}
.stat{transition:background-color .3s,border-color .3s,color .3s,box-shadow .2s,transform .2s}
.stat:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.12)}
.card{transition:background-color .3s,border-color .3s,color .3s}
body,aside,.top,.cartp,.cf{transition:background-color .3s,border-color .3s,color .3s}
.badge{animation:badgePulse 2.4s ease-out infinite}
@keyframes badgePulse{0%{box-shadow:0 0 0 0 rgba(209,15,26,.5)}70%,100%{box-shadow:0 0 0 7px rgba(209,15,26,0)}}
/* ===== v27 loading screen, part 2: store name, status text, a bar that fills when ready, and a tip ===== */
.boot{gap:14px}
.boot .btx{text-align:center;animation:bootRise .6s cubic-bezier(.2,.7,.2,1) .2s both}
.boot .bt{display:block;font-size:22px;letter-spacing:-.3px;color:var(--ink)}
.boot .bs{display:block;margin-top:2px;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--mut);font-weight:600}
.boot .spin{margin-top:6px}
.boot .spin::after{transition:width .35s ease-out}
.boot .bm{font-size:14px;animation:bootText 1.6s ease-in-out infinite}
.boot .bh{position:absolute;left:0;right:0;bottom:max(24px,env(safe-area-inset-bottom));margin:0;padding:0 20px;text-align:center;font-size:13px;font-weight:500;color:var(--mut);animation:bootRise .6s ease-out .6s both}
.boot.done img{animation:none;box-shadow:none}
.boot.done .spin::after{animation:none;transform:none;width:100%;opacity:1}
.boot.done .bm{animation:none;color:var(--ink);font-weight:700}
@keyframes bootRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.boot .btx,.boot .bh,.boot .bm{animation:none}}