/*! Ledge — inventory and sales that move as one product — © 2026 Hasib (OVERSHOOT). All rights reserved. Licensed, not sold: see LICENSE.md. */
:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--a-block:#c6ef4e;--a-block-hover:#b7e43a;--a-soft:#eef8d2;--a-text:#4a6a00;--a-mark:#6b9410;--a-deep:#4a6a00;--on-block:#16181b;--a-glow:#c6ef4e6b;--night:#16181b;--night-2:#2a2d33;--on-night:#f2f3ef;--on-night-muted:#b4b9b0;--page:#f2f3ef;--panel:#e8eae4;--card:#fcfcfa;--hair:#e3e5df;--hair-strong:#cdd1c8;--edge:#ffffffe6;--ink:#16181b;--muted:#50555c;--faint:#5f646b;--good:#0b6e5a;--good-bg:#dcf2ea;--warn:#a24a08;--warn-bg:#fde6d2;--warn-fill:#e8884a;--bad:#b5302a;--bad-bg:#fde2df;--bad-fill:#d9483f;--info:#2557c9;--info-bg:#e2ebfd;--c-line:var(--ink);--c-cmp:#9a9f96;--c-cost:#9a9f96;--c-profit:var(--a-mark);--area-top:var(--a-block);--area-alpha:.55;--grid:#e9ebe5;--heat:var(--a-mark);--cat-furniture:var(--night-2);--cat-lighting:var(--a-mark);--cat-textiles:#5f9a7a;--cat-ceramics:#c97a48;--plate-furniture:#ece8e1;--plate-lighting:#eef0e0;--plate-textiles:#e3ebe3;--plate-ceramics:#f2e7de;--font:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;--fs-xs:max(12px, .78rem);--fs-sm:max(12.5px, .875rem);--fs-md:1rem;--fs-lg:1.125rem;--r-xl:24px;--r-lg:20px;--r-md:14px;--r-sm:11px;--gap:clamp(12px, 1.1vw, 20px);--pad:clamp(16px, 1.4vw, 24px);--shadow-card:0 1px 2px #16181b0a, 0 8px 24px -16px #16181b1f;--shadow-pop:0 0 0 1px var(--hair), 0 22px 50px -16px #16181b47;--scrim:#0e10126b;--topbar-bg:#f2f3efd1;--ring:#3f5a00;--focus:0 0 0 2px var(--card), 0 0 0 4px var(--ring);--topbar-h:72px;font-size:clamp(14.5px,.35vw + 10px,17px)}:root[data-accent=sky]{--a-block:#8fd0ff;--a-block-hover:#74c2fb;--a-soft:#e3f3ff;--a-text:#1f5f8f;--a-deep:#1f5f8f;--a-mark:#2f7cc2;--a-glow:#8fd0ff73;--ring:#1f5f8f}:root[data-accent=rose]{--a-block:#ffb5c8;--a-block-hover:#ffa0b8;--a-soft:#ffe8ee;--a-text:#9b2c55;--a-deep:#9b2c55;--a-mark:#c24a72;--a-glow:#ffb5c873;--ring:#9b2c55}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--page:#0f1012;--panel:#202328;--card:#17191c;--hair:#26292e;--hair-strong:#363a41;--edge:#ffffff0a;--ink:#eef0ea;--muted:#b0b5bc;--faint:#9aa0a8;--night:#eef0ea;--night-2:#d9dcd4;--on-night:#16181b;--on-night-muted:#50555c;--a-text:var(--a-block);--a-mark:var(--a-block);--a-soft:color-mix(in srgb, var(--a-block) 16%, var(--card));--a-glow:color-mix(in srgb, var(--a-block) 16%, transparent);--good:#5fd0b0;--good-bg:#123128;--warn:#f5a066;--warn-bg:#3a2414;--warn-fill:#f28c4a;--bad:#f3837c;--bad-bg:#3d1c1b;--bad-fill:#ef5d54;--info:#8fb0ff;--info-bg:#1a2440;--c-cmp:#6d727a;--c-cost:#4e535b;--area-alpha:.22;--grid:#222529;--cat-furniture:#d9dcd4;--cat-textiles:#7fae94;--cat-ceramics:#e0976a;--plate-furniture:#26241f;--plate-lighting:#23261b;--plate-textiles:#1d2620;--plate-ceramics:#2a211b;--shadow-card:none;--shadow-pop:0 0 0 1px var(--hair-strong), 0 24px 60px -18px #000000b3;--scrim:#0000008c;--topbar-bg:#0f1012d1;--ring:var(--a-block)}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}html.is-locked{overflow:hidden}body{font:400 var(--fs-md)/1.5 var(--font);color:var(--ink);background:radial-gradient(1100px 620px at -4% -10%, var(--a-glow), transparent 62%), var(--page);-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums;background-attachment:fixed;margin:0}h1,h2,h3,p,ul,ol,dl,dd,figure,fieldset{margin:0}fieldset{border:0;min-width:0;padding:0}small{font-size:max(12px,.85em)}ul,ol{padding:0;list-style:none}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:0;padding:0}svg{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:20px;height:20px}.chart svg,.donut svg,.ring svg,.spark svg{stroke:none;stroke-width:0;width:auto;height:auto;display:block;overflow:visible}.chart svg *,.donut svg *,.spark svg *{stroke-linecap:round}:focus-visible{box-shadow:var(--focus);border-radius:10px;outline:none}[hidden]{display:none!important}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important}.num{text-align:right;font-variant-numeric:tabular-nums}.muted{color:var(--faint)}.is-good{color:var(--good)}.is-warn{color:var(--warn)}.is-bad{color:var(--bad)}.is-struck{color:var(--faint);text-decoration:line-through;text-decoration-thickness:1.5px}kbd{font:600 12px/1 var(--font);border:1px solid var(--hair-strong);color:var(--muted);background:var(--card);border-radius:6px;padding:3px 6px 4px}.skip{z-index:100;background:var(--ink);color:var(--page);border-radius:10px;padding:10px 14px;position:fixed;top:12px;left:12px;transform:translateY(-160%)}.skip:focus-visible{transform:none}.is-flash{animation:1.2s ease-out flash}@keyframes flash{0%,30%{color:var(--a-text)}to{color:inherit}}.card--night .is-flash{animation-name:flash-night}@keyframes flash-night{0%,30%{color:var(--a-block)}to{color:inherit}}html.js #app{opacity:0}html.failsafe #app{opacity:1}.app{grid-template-columns:auto minmax(0,1fr);min-height:100dvh;display:grid}.rail{z-index:22;border-radius:var(--r-xl);background:var(--card);border:1px solid var(--hair);width:92px;height:calc(100dvh - 32px);box-shadow:var(--shadow-card), inset 0 1px 0 var(--edge);flex-direction:column;align-items:center;gap:10px;margin:16px 0 16px 16px;padding:16px 0 12px;display:flex;position:sticky;top:16px}.rail__brand{background:var(--night);width:52px;height:52px;color:var(--a-block);border-radius:16px;place-items:center;margin-bottom:10px;display:grid}.rail__mark{stroke-width:2.2px;width:30px;height:30px}.rail__nav{flex-direction:column;gap:4px;display:flex;position:relative}.rail__blob{background:var(--a-block);width:72px;height:64px;box-shadow:0 8px 22px -10px color-mix(in srgb, var(--a-block) 90%, transparent);transform-origin:50%;opacity:0;border-radius:18px;margin:auto;position:absolute;top:0;left:0;right:0}.rail__link{z-index:1;width:72px;height:64px;font-size:var(--fs-xs);color:var(--faint);border-radius:18px;align-content:center;justify-items:center;gap:4px;font-weight:600;transition:color .2s,background-color .2s;display:grid;position:relative}.rail__link svg{width:22px;height:22px}.rail__link:hover{color:var(--ink)}.rail__link:not([aria-current=page]):hover{background:color-mix(in srgb, var(--panel) 70%, transparent)}.rail__link[aria-current=page]{color:var(--on-block);font-weight:700}.rail__link[aria-current=page] svg{stroke-width:2.1px}.rail__link--foot{margin-top:auto}.rail__link--foot[aria-current=page]{background:var(--a-block)}.rail__badge{color:#fff;background:var(--info);min-width:20px;height:20px;box-shadow:0 0 0 2px var(--card);border-radius:99px;place-items:center;padding:0 6px;font-size:12px;font-weight:700;display:inline-grid;position:absolute;top:5px;right:9px}.rail__badge--warn{background:var(--warn-fill);color:#2b1300}:root[data-theme=dark] .rail__badge{color:#0f1012}.main{flex-direction:column;min-width:0;display:flex}.topbar{z-index:20;min-height:var(--topbar-h);background:var(--topbar-bg);-webkit-backdrop-filter:blur(16px)saturate(1.3);backdrop-filter:blur(16px)saturate(1.3);align-items:center;gap:14px;padding:12px clamp(16px,2vw,40px) 12px clamp(16px,1.6vw,32px);display:flex;position:sticky;top:0}.brand{align-items:center;gap:10px;display:inline-flex}.brand__mark{width:30px;height:30px;color:var(--a-text);stroke-width:2.2px;display:none}.brand__name{font:800 1.45rem/1 var(--font);letter-spacing:-.04em}.shop{background:var(--card);border:1px solid var(--hair);height:36px;font-size:var(--fs-sm);white-space:nowrap;border-radius:99px;align-items:center;gap:8px;padding:0 14px 0 12px;display:inline-flex}.shop b{font-weight:700}.shop__where{color:var(--faint)}.shop__where:before{content:"·";margin-right:8px}.shop__dot{background:var(--a-mark);width:8px;height:8px;box-shadow:0 0 0 3px var(--a-soft);border-radius:50%}.topbar__actions{align-items:center;gap:8px;margin-left:auto;display:flex}.topbar__sale kbd{color:inherit;border-color:color-mix(in srgb, currentColor 35%, transparent);background:0 0}.me{display:inline-grid}.avatar--me{width:40px;height:40px;color:var(--on-night);background:var(--night);font-size:13px}.board{outline:none;flex:1;padding:8px clamp(16px,2vw,40px) 64px clamp(16px,1.6vw,32px);position:relative}.view{gap:var(--gap);flex-direction:column;display:flex}.live{border:1px solid var(--hair-strong);background:var(--card);height:40px;font-size:var(--fs-sm);color:var(--muted);border-radius:99px;align-items:center;gap:8px;padding:0 14px;font-weight:700;transition:border-color .2s,color .2s;display:inline-flex}.live:hover{border-color:var(--muted);color:var(--ink)}.live__dot{background:var(--c-cmp);border-radius:50%;width:9px;height:9px;position:relative}.live[aria-pressed=true] .live__dot{background:var(--good)}.live[aria-pressed=true] .live__dot:after{content:"";background:var(--good);border-radius:50%;animation:1.8s ease-out infinite beacon;position:absolute;inset:0}@keyframes beacon{0%{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(3.2)}}.live[aria-pressed=false] .live__word{text-decoration:line-through}.live__count{background:var(--a-block);min-width:26px;height:22px;color:var(--on-block);border-radius:99px;place-items:center;padding:0 7px;font-size:12px;display:inline-grid}.find{flex:0 440px;margin-left:8px;position:relative}.find__icon{color:var(--faint);pointer-events:none;position:absolute;top:50%;left:14px;translate:0 -50%}.find__input{border:1px solid var(--hair);background:var(--card);width:100%;height:44px;font-size:var(--fs-sm);border-radius:99px;padding:0 44px}.find__input::placeholder{color:var(--faint)}.find__input:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent);border-radius:99px}.find__input::-webkit-search-cancel-button{display:none}.find__kbd{pointer-events:none;position:absolute;top:50%;right:14px;translate:0 -50%}.find__list{z-index:30;border-radius:var(--r-md);background:var(--card);max-height:420px;box-shadow:var(--shadow-pop);padding:6px;position:absolute;top:calc(100% + 8px);left:0;right:0;overflow:auto}.find__list li{cursor:pointer;border-radius:10px;align-items:center;gap:12px;padding:8px 10px;display:flex}.find__text{min-width:0;line-height:1.3;display:grid}.find__text b{font-weight:650;font-size:var(--fs-sm);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.find__text span{color:var(--faint);font-size:var(--fs-xs);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.find__glyph{background:var(--panel);width:32px;height:32px;color:var(--muted);border-radius:9px;flex:none;place-items:center;display:grid}.find__glyph svg{width:17px;height:17px}.find__list li[aria-selected=true]{background:var(--a-soft)}.find__kind{letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-left:auto;font-size:12px;font-weight:700}.find__none{color:var(--faint);cursor:default!important;display:block!important}.tray-wrap{position:relative}.tray{z-index:30;border-radius:var(--r-md);background:var(--card);width:min(380px,100vw - 24px);box-shadow:var(--shadow-pop);padding:8px;position:absolute;top:calc(100% + 10px);right:0}.tray__head{justify-content:space-between;align-items:center;padding:8px 10px 10px;display:flex}.tray__list{gap:2px;max-height:360px;display:grid;overflow:auto}.tray__item{border-radius:12px;align-items:center;gap:12px;padding:8px 10px;display:flex}.tray__item:hover{background:color-mix(in srgb, var(--panel) 55%, transparent)}.tray__text{flex:1;min-width:0;line-height:1.3;display:grid}.tray__text b{font-size:var(--fs-sm);text-overflow:ellipsis;white-space:nowrap;font-weight:650;overflow:hidden}.tray__text span{font-size:var(--fs-xs)}.tray__none{color:var(--faint);padding:14px 10px}.btn{height:44px;font-weight:700;font-size:var(--fs-sm);white-space:nowrap;border:1px solid #0000;border-radius:99px;justify-content:center;align-items:center;gap:8px;padding:0 18px;transition:background-color .2s,border-color .2s,color .2s;display:inline-flex}.btn svg{stroke-width:2px;width:18px;height:18px}.btn--block-accent{background:var(--a-block);color:var(--on-block)}.btn--block-accent:hover{background:var(--a-block-hover)}.btn--night{background:var(--night);color:var(--on-night)}.btn--night:hover{background:var(--night-2)}.btn--ghost{border-color:var(--hair-strong);background:var(--card)}.btn--ghost:hover{border-color:var(--muted)}.btn--danger{color:var(--bad)}.btn--danger-solid{background:var(--bad);color:#fff8f7}:root[data-theme=dark] .btn--danger-solid{color:#2a0c0b}.btn--small{height:34px;font-size:var(--fs-xs);padding:0 13px}.btn--small svg{width:15px;height:15px}.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:default}.btn kbd{padding:2px 5px 3px;font-size:12px}.icon-btn{border:1px solid var(--hair);background:var(--card);width:44px;height:44px;color:var(--muted);border-radius:50%;place-items:center;transition:color .2s,border-color .2s;display:inline-grid;position:relative}.icon-btn:hover{color:var(--ink);border-color:var(--muted)}.icon-btn:disabled{opacity:.4;cursor:default}.icon-btn--small{background:0 0;border-color:#0000;width:34px;height:34px}.icon-btn--small svg{width:17px;height:17px}.icon-btn__dot{background:var(--warn-fill);width:9px;height:9px;box-shadow:0 0 0 2px var(--card);border-radius:50%;position:absolute;top:10px;right:11px}.theme-ico{grid-area:1/1}:root[data-theme=dark] .theme-ico--moon,:root:not([data-theme=dark]) .theme-ico--sun{display:none}.link{color:var(--a-text);font-weight:650;font-size:var(--fs-sm);text-decoration:underline;-webkit-text-decoration-color:color-mix(in srgb, currentColor 35%, transparent);text-decoration-color:color-mix(in srgb, currentColor 35%, transparent);text-underline-offset:3px}.link:hover{text-decoration-color:currentColor}.rowlink{font-weight:700}.rowlink:hover{color:var(--a-text);text-underline-offset:3px;text-decoration:underline}.head{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:24px;padding:8px 0 6px;display:grid}.head__eyebrow{font-size:var(--fs-sm);color:var(--a-text);grid-column:1;font-weight:700}.head__title{font:800 clamp(2rem, 1.2rem + 1.6vw, 3.1rem)/1.08 var(--font);letter-spacing:-.045em;outline:none;grid-column:1}.head__title:focus,.head__title:focus-visible{box-shadow:none}.head__title .word{vertical-align:bottom;margin-bottom:-.1em;padding:0 .02em .1em;display:inline-block;overflow:hidden}.head__title .ch{transform-origin:0 100%;display:inline-block}.head__sub{color:var(--muted);flex-wrap:wrap;grid-column:1;align-items:center;gap:4px 8px;margin-top:8px;display:flex}.head__actions{grid-area:1/2/span 3;align-items:center;gap:10px;display:flex}.card{min-width:0;padding:var(--pad);border-radius:var(--r-lg);background:var(--card);border:1px solid var(--hair);box-shadow:var(--shadow-card), inset 0 1px 0 var(--edge);position:relative}.card--flush{padding:0;overflow:hidden}.card--night{background:radial-gradient(420px 260px at 105% -10%, color-mix(in srgb, var(--a-block) 34%, transparent), transparent 70%), var(--night);color:var(--on-night);border-color:#0000}.card__head{justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:16px;display:flex}.card__head--pad{padding:var(--pad) var(--pad) 0}.card__title{font-size:var(--fs-lg);letter-spacing:-.02em;font-weight:750}.card__label{font-size:var(--fs-sm);color:var(--muted);font-weight:600}.card--night .card__label{color:var(--on-night-muted)}.card__note{font-size:var(--fs-xs);color:var(--faint);margin-top:2px}.figure{font:800 clamp(1.7rem, 1.3rem + .8vw, 2.3rem)/1.1 var(--font);letter-spacing:-.04em;font-variant-numeric:tabular-nums lining-nums;margin-top:8px;display:block}.figure--hero{letter-spacing:-.055em;font-size:clamp(2.6rem,1.8rem + 2.2vw,4.2rem)}.figure--md{margin-top:4px;font-size:clamp(1.3rem,1rem + .6vw,1.7rem)}.figure--sm{font-size:1.25rem}.figure--muted{color:var(--faint)}.figure--good{color:var(--good)}.figure--bad{color:var(--bad)}.delta{font-size:var(--fs-xs);color:var(--faint);margin-top:6px;display:block}.delta--good{color:var(--good)}.delta--bad{color:var(--bad)}.kpi{flex-direction:column;display:flex}.kpi__top{justify-content:space-between;align-items:center;gap:10px;display:flex}.kpi__ico{background:var(--a-soft);width:38px;height:38px;color:var(--a-text);border-radius:12px;place-items:center;display:grid}.kpi__ico svg{width:19px;height:19px}.kpi .delta{margin-top:auto;padding-top:10px}.sum{color:inherit;flex-direction:column;display:flex}.sum .delta{margin-top:auto;padding-top:6px}.sum--link{transition:border-color .2s}.sum--link:hover{border-color:var(--hair-strong)}.sum--warn .figure{color:var(--warn)}.sum__thumbs{align-items:center;gap:0;margin-top:auto;padding-top:8px;display:flex}.sum__thumbs .thumb+.thumb{margin-left:-8px}.sum__thumbs .chip{margin-left:10px}.thumb{--s:40px;width:var(--s);height:var(--s);border-radius:calc(var(--s) * .3);background:var(--plate-furniture);flex:none;place-items:center;display:inline-grid;overflow:hidden}.thumb img{object-fit:contain;width:84%;height:84%;display:block}.thumb--furniture,.tile__plate--furniture{background:var(--plate-furniture)}.thumb--lighting,.tile__plate--lighting{background:var(--plate-lighting)}.thumb--textiles,.tile__plate--textiles{background:var(--plate-textiles)}.thumb--ceramics,.tile__plate--ceramics{background:var(--plate-ceramics)}.thumb--ring{box-shadow:0 0 0 2px var(--card)}.stack{align-items:center;display:inline-flex}.stack .thumb+.thumb{margin-left:-10px}.stack__more{font-size:var(--fs-xs);color:var(--faint);margin-left:6px;font-weight:700}.flyer-layer{z-index:80;pointer-events:none;position:fixed;inset:0}.flyer{object-fit:contain;filter:drop-shadow(0 14px 18px #16181b40);will-change:transform;position:absolute;top:0;left:0}.pill{white-space:nowrap;height:26px;color:var(--muted);background:var(--panel);border-radius:99px;align-items:center;gap:6px;padding:0 10px;font-size:12px;font-weight:700;display:inline-flex}.pill:before{content:"";background:currentColor;border-radius:50%;width:6px;height:6px}.pill__extra{opacity:.85;font-weight:500}.pill--processing,.pill--st-ordered{color:var(--info);background:var(--info-bg)}.pill--completed,.pill--ok,.pill--st-received{color:var(--good);background:var(--good-bg)}.pill--refunded{color:var(--faint);background:var(--panel)}.pill--refunded:before{background:0 0;box-shadow:inset 0 0 0 1.5px}.pill--low{color:var(--warn);background:var(--warn-bg)}.pill--out{color:var(--bad);background:var(--bad-bg)}.pill--st-draft:before{background:0 0;box-shadow:inset 0 0 0 1.5px}.pill--st-transit{color:var(--on-block);background:var(--a-block)}.chip{height:26px;color:var(--muted);background:var(--panel);white-space:nowrap;border-radius:8px;align-items:center;gap:5px;padding:0 9px;font-size:12px;font-weight:650;display:inline-flex}.chip svg{width:14px;height:14px}.chip--online,.chip--info{color:var(--info);background:var(--info-bg)}.chip--bad{color:var(--bad);background:var(--bad-bg)}.avatar{--h:220;letter-spacing:.02em;width:36px;height:36px;color:hsl(var(--h) 40% 26%);background:hsl(var(--h) 45% 89%);border-radius:50%;flex:none;place-items:center;font-size:12px;font-weight:750;display:inline-grid}:root[data-theme=dark] .avatar{color:hsl(var(--h) 55% 82%);background:hsl(var(--h) 25% 22%)}:root[data-theme=dark] .avatar--me{color:var(--on-night);background:var(--night)}.avatar--sm{width:30px;height:30px;font-size:12px}.avatar--lg{width:46px;height:46px;font-size:15px}.avatar--sq{border-radius:12px}.who{align-items:center;gap:10px;display:inline-flex}.seg{background:var(--panel);border-radius:99px;flex:none;max-width:100%;padding:4px;display:inline-flex;position:relative}.seg--scroll{scrollbar-width:none;overflow-x:auto}.seg--scroll::-webkit-scrollbar{display:none}.seg__pill{background:var(--night);transform-origin:0;border-radius:99px;width:100px;height:calc(100% - 8px);position:absolute;top:4px;left:0}.seg__btn{z-index:1;height:36px;font-size:var(--fs-sm);color:var(--muted);border-radius:99px;flex:none;justify-content:center;align-items:center;gap:6px;padding:0 15px;font-weight:650;transition:color .25s;display:inline-flex;position:relative}.seg__btn svg{width:16px;height:16px}.seg__btn:hover{color:var(--ink)}.seg__btn[aria-pressed=true]{color:var(--on-night)}.seg--tiny .seg__btn{height:30px;font-size:var(--fs-xs);padding:0 11px}.seg--wide{display:flex}.seg--wide .seg__btn{flex:1}.row{gap:12px;display:grid}.row--2{grid-template-columns:repeat(2,minmax(0,1fr))}.row--3{grid-template-columns:repeat(3,minmax(0,1fr))}.field{gap:6px;min-width:0;display:grid}.field__label{font-size:var(--fs-sm);color:var(--muted);font-weight:650}.field input,.field select,.field textarea,.mini-search input{border-radius:var(--r-sm);border:1px solid var(--hair-strong);background:var(--card);width:100%;min-height:44px;padding:8px 14px}.field select{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-repeat:no-repeat;background-size:5px 5px;padding-right:36px}.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,.mini-search input:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent);border-radius:var(--r-sm)}.field input:user-invalid{border-color:var(--bad)}.field--inline{display:inline-grid}.field--inline select{min-height:40px;font-size:var(--fs-sm);border-radius:99px;padding-block:6px}.field--bare input{border-color:var(--hair);background:color-mix(in srgb, var(--panel) 45%, var(--card))}.mini-search{flex:0 260px;display:block;position:relative}.mini-search svg{width:17px;height:17px;color:var(--faint);pointer-events:none;position:absolute;top:50%;left:13px;translate:0 -50%}.mini-search input{min-height:40px;font-size:var(--fs-sm);border-radius:99px;padding:6px 14px 6px 38px}.mini-search input:focus-visible{border-radius:99px}.switch{cursor:pointer;font-weight:600;font-size:var(--fs-sm);align-items:center;gap:12px;display:inline-flex}.switch input{opacity:0;width:1px;height:1px;position:absolute}.switch__track{background:var(--hair-strong);border-radius:99px;flex:none;width:48px;height:28px;transition:background-color .25s;position:relative}.switch__knob{background:var(--card);border-radius:50%;width:22px;height:22px;transition:transform .35s cubic-bezier(.34,1.56,.64,1);position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #00000040}.switch input:checked+.switch__track{background:var(--night)}.switch input:checked+.switch__track .switch__knob{background:var(--a-block);transform:translate(20px)}.switch input:focus-visible+.switch__track{box-shadow:var(--focus)}.toolbar{border-bottom:1px solid var(--hair);flex-wrap:wrap;align-items:center;gap:12px;padding:14px 16px;display:flex}.toolbar .mini-search{margin-left:auto}.toolbar--bare{border:0;justify-content:space-between;padding:0 0 4px}.table-wrap{position:relative;overflow-x:auto}.table{border-collapse:collapse;width:100%;font-size:var(--fs-sm)}.table th,.table td{text-align:left;border-bottom:1px solid var(--hair);white-space:nowrap;vertical-align:middle;padding:12px 16px}.table thead th{font-size:var(--fs-xs);color:var(--faint);background:color-mix(in srgb, var(--panel) 40%, var(--card));font-weight:650}.table tbody th{font-weight:600}.table th.num,.table td.num{text-align:right;font-variant-numeric:tabular-nums}.table td small,.table th small{color:var(--faint);font-size:12px;font-weight:500;display:block}.table tbody tr{transition:background-color .2s}.table tbody tr:hover,.table tbody tr[aria-selected]{background:color-mix(in srgb, var(--a-soft) 60%, transparent)}.table tbody tr[data-id]{cursor:pointer}.table tbody tr:last-child>*{border-bottom:0}.table tbody tr.is-new{animation:2.4s ease-out newrow}@keyframes newrow{0%,40%{background:var(--a-soft)}to{background:0 0}}.th-sort{font:inherit;color:inherit;align-items:center;gap:4px;display:inline-flex}.th-sort svg{opacity:.5;width:14px;height:14px}th.num .th-sort{flex-direction:row-reverse}th[aria-sort] .th-sort{color:var(--ink)}th[aria-sort] .th-sort svg{opacity:1;color:var(--a-text)}.table-foot{border-top:1px solid var(--hair);font-size:var(--fs-xs);color:var(--faint);justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.table-foot:has(span:empty):has([hidden]){display:none}.empty{text-align:center;color:var(--faint);padding:28px 16px}.empty--inline{text-align:left;padding:14px 0}.prod{align-items:center;gap:12px;display:inline-flex}.prod>span{line-height:1.3;display:grid}.legend{font-size:var(--fs-xs);color:var(--muted);flex-wrap:wrap;gap:6px 16px;display:flex}.legend li{align-items:center;gap:7px;display:inline-flex}.legend--night{color:var(--on-night-muted)}.sw{border-radius:3px;flex:none;width:10px;height:10px;display:inline-block}.sw--now{background:var(--c-line);border-radius:2px;width:16px;height:3px}.sw--cmp{border-top:2px dashed var(--c-cmp);border-radius:0;width:16px;height:0}.sw--today{background:var(--a-block);border-radius:2px;width:16px;height:3px}.sw--lastweek{border-top:2px dashed var(--on-night-muted);border-radius:0;width:16px;height:0}.sw--cost{background:var(--c-cost)}.sw--profit{background:var(--c-profit)}.hbars{gap:14px;display:grid}.hbar{font-size:var(--fs-sm);grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:6px 12px;display:grid}a.hbar:hover .hbar__label{color:var(--a-text)}.hbar__label{text-overflow:ellipsis;white-space:nowrap;font-weight:650;overflow:hidden}.hbar__label small{color:var(--faint);margin-left:8px;font-weight:500}.hbar__value{font-variant-numeric:tabular-nums;font-weight:700}.hbar__track{background:var(--panel);border-radius:99px;grid-column:1/-1;height:10px;overflow:hidden}.hbar__fill{background:var(--a-mark);transform-origin:0;border-radius:99px;height:100%;display:block}.smeter{background:var(--panel);border-radius:99px;width:100%;min-width:72px;height:8px;display:block;position:relative;overflow:hidden}.smeter__fill{background:var(--a-mark);transform-origin:0;border-radius:99px;height:100%;display:block}.smeter--low .smeter__fill{background:var(--warn-fill)}.smeter--out .smeter__fill{background:var(--bad-fill)}.smeter__par{background:var(--card);width:2px;position:absolute;top:0;bottom:0;left:40%}.chart{outline-offset:4px;width:100%;min-width:0;position:relative}.chart:focus-visible{border-radius:12px}.c-grid{stroke:var(--grid);stroke-width:1px}.c-zero{stroke:var(--hair-strong)}.c-tick{fill:var(--faint);font:500 12px var(--font);font-variant-numeric:tabular-nums}.c-tick--night{fill:var(--on-night-muted)}.c-hit{fill:#0000}.a-line{fill:none;stroke:var(--c-line);stroke-width:2.5px;stroke-linejoin:round}.a-cmp{fill:none;stroke:var(--c-cmp);stroke-width:2px;stroke-dasharray:5 5;stroke-linejoin:round}.l-cross{stroke:var(--hair-strong);stroke-width:1px;opacity:0}.l-cross--night{stroke:color-mix(in srgb, var(--on-night) 30%, transparent)}.l-dot{fill:var(--card);stroke-width:2.5px;opacity:0}.l-dot--now{stroke:var(--c-line)}.l-dot--cmp{stroke:var(--c-cmp)}.l-dot--today{fill:var(--night);stroke:var(--a-block)}.is-crossing .l-cross,.is-crossing .l-dot{opacity:1}.c-cost{fill:var(--c-cost)}.c-profit{fill:var(--c-profit)}.c-col{transition:opacity .2s}.c-col.is-dim{opacity:.35}.t-line{fill:none;stroke:var(--a-block);stroke-width:2.75px;stroke-linejoin:round}.t-last{fill:none;stroke:var(--on-night-muted);stroke-width:1.75px;stroke-dasharray:4 5;opacity:.7}.t-dot{fill:var(--a-block);transform-box:fill-box;transform-origin:center}.t-beacon{fill:var(--a-block);opacity:.35;transform-box:fill-box;transform-origin:center;animation:1.8s ease-out infinite beacon-svg}@keyframes beacon-svg{0%{opacity:.55;transform:scale(.45)}to{opacity:0;transform:scale(1.5)}}.s-line{fill:none;stroke:var(--c-line);stroke-width:2px}.tip{z-index:60;pointer-events:none;border-radius:var(--r-sm);background:var(--night);min-width:170px;color:var(--on-night);font-size:var(--fs-xs);opacity:0;gap:4px;padding:11px 13px;transition:opacity .15s;display:grid;position:fixed;top:0;left:0;box-shadow:0 16px 30px -12px #0006}.tip.is-on{opacity:1}.tip b{font-weight:700;font-size:var(--fs-sm)}.tip__row{align-items:center;gap:7px;display:flex}.tip__row em{font-variant-numeric:tabular-nums;margin-left:auto;padding-left:12px;font-style:normal;font-weight:700}.tip__net{border-top:1px solid color-mix(in srgb, var(--on-night) 18%, transparent);margin-top:2px;padding-top:5px}.tip .sw--now{background:var(--on-night)}.tip .sw--cmp{border-color:var(--on-night-muted)}.tip .sw--profit{background:var(--a-block)}.donut{aspect-ratio:1;flex:none;width:clamp(140px,11vw,176px);position:relative}.donut svg{width:100%;height:100%}.d-track{fill:none;stroke:var(--panel);stroke-width:20px}.d-arc{fill:none;stroke-width:20px}.donut__centre{text-align:center;pointer-events:none;place-content:center;line-height:1.15;display:grid;position:absolute;inset:0}.donut__centre b{font:800 1.35rem/1 var(--font);letter-spacing:-.03em;font-variant-numeric:tabular-nums}.donut__centre span{color:var(--faint);font-size:12px}.ring{aspect-ratio:1;flex:none;width:clamp(104px,8vw,132px);position:relative}.ring svg{width:100%;height:100%;transform:rotate(-90deg)}.ring__track{fill:none;stroke:color-mix(in srgb, var(--on-night) 14%, transparent);stroke-width:11px}.ring__fill{fill:none;stroke:var(--a-block);stroke-width:11px;stroke-linecap:round}.ring__centre{text-align:center;place-content:center;line-height:1.1;display:grid;position:absolute;inset:0}.ring__centre b{font:800 1.45rem/1 var(--font);letter-spacing:-.03em;font-variant-numeric:tabular-nums}.ring__centre span{color:var(--on-night-muted);font-size:12px}.ring.is-done .ring__centre b{color:var(--a-block)}.dlg{border-radius:var(--r-lg);background:var(--card);width:min(560px,100vw - 32px);color:var(--ink);box-shadow:var(--shadow-pop);border:0;padding:0}.dlg--small{width:min(440px,100vw - 32px)}.dlg--wide{width:min(680px,100vw - 32px)}.dlg::backdrop{background:var(--scrim)}.dlg form{gap:16px;padding:26px;display:grid}.dlg__title{font:800 1.4rem/1.2 var(--font);letter-spacing:-.03em}.dlg__text,.dlg__hint{color:var(--muted)}.dlg__hint{font-size:var(--fs-xs);margin-bottom:8px}.dlg__row{flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:4px;display:flex}.sheet{z-index:50;position:fixed;inset:0}.sheet__scrim{background:var(--scrim);position:absolute;inset:0}.sheet__panel{overscroll-behavior:contain;border-radius:var(--r-xl);background:var(--card);width:min(500px,100vw - 24px);box-shadow:var(--shadow-pop);padding:26px;position:absolute;top:12px;bottom:12px;right:12px;overflow:auto}.sheet__close{z-index:2;position:absolute;top:18px;right:18px}.sheet__body{gap:20px;display:grid}.toast{z-index:70;background:var(--night);width:fit-content;max-width:calc(100vw - 32px);color:var(--on-night);font-weight:650;font-size:var(--fs-sm);opacity:0;pointer-events:none;border-radius:99px;align-items:center;gap:14px;margin-inline:auto;padding:12px 18px;display:flex;position:fixed;bottom:28px;left:0;right:0;box-shadow:0 16px 34px -14px #00000073}.toast.has-undo{pointer-events:auto;padding-right:8px}.toast__undo{background:var(--a-block);height:32px;color:var(--on-block);font-weight:750;font-size:var(--fs-xs);border-radius:99px;padding:0 14px}.tabbar{display:none}@media (width<=1180px){.shop{display:none}}@media (width<=960px){.app{grid-template-columns:minmax(0,1fr)}.rail{display:none}.brand__mark{display:block}.topbar{--topbar-h:64px;gap:10px;padding:10px 16px}.find{flex:auto;margin-left:0}.find__kbd{display:none}.find__input{padding-right:14px}.topbar__sale,.me,.live__word{display:none}.live{padding:0 12px}.board{padding:8px 16px calc(104px + env(safe-area-inset-bottom))}.tabbar{z-index:25;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:var(--topbar-bg);-webkit-backdrop-filter:blur(16px)saturate(1.3);backdrop-filter:blur(16px)saturate(1.3);border-top:1px solid var(--hair);grid-template-columns:repeat(5,1fr);align-items:center;display:grid;position:fixed;bottom:0;left:0;right:0}.tab{min-height:52px;color:var(--faint);justify-items:center;gap:2px;padding:6px 0;font-size:12px;font-weight:650;display:grid}.tab svg{box-sizing:content-box;border-radius:99px;padding:4px 16px;transition:background-color .2s}.tab[aria-current=page]{color:var(--ink);font-weight:750}.tab[aria-current=page] svg{background:var(--a-block);color:var(--on-block);stroke-width:2px}.tab--new{background:var(--night);width:56px;height:56px;min-height:0;color:var(--on-night);border-radius:50%;justify-self:center;place-items:center}.tab--new svg{width:24px;height:24px;padding:0;color:inherit!important;background:0 0!important}.tab--new[aria-current=page]{background:var(--a-block);color:var(--on-block)}.toast{bottom:calc(90px + env(safe-area-inset-bottom))}.head{grid-template-columns:minmax(0,1fr);row-gap:4px}.head__actions{flex-wrap:wrap;grid-area:auto/1;margin-top:12px}.sheet__panel{width:auto;max-height:calc(100dvh - 48px);padding:22px 18px calc(22px + env(safe-area-inset-bottom));inset:auto 8px 8px}}@media (width<=560px){.brand__name{display:none}.find__input,.field input,.field select,.field textarea,.mini-search input{font-size:16px}.head__actions .btn{flex:auto}.seg__btn{padding:0 12px}.row--2,.row--3{grid-template-columns:minmax(0,1fr)}.toolbar .mini-search{flex:100%;margin-left:0}.dlg form{padding:20px}.dlg__row .btn{flex:auto}}@media (width<=380px){.topbar [data-theme-toggle]{display:none}.topbar{gap:8px}}@media (pointer:coarse){.btn,.btn--small{min-height:44px}.icon-btn,.icon-btn--small{width:44px;height:44px}.seg__btn{min-width:44px;height:44px}.find__input,.field input,.field select,.mini-search input,.field--inline select{min-height:44px}.find__kbd,.topbar__sale kbd{display:none}}:root[data-reduced-motion="true"] .live__dot:after,:root[data-reduced-motion="true"] .t-beacon{animation:none!important}:root[data-reduced-motion="true"] .is-flash,:root[data-reduced-motion="true"] .table tbody tr.is-new{animation:none}:root[data-theme=dark] .card--night .t-line{stroke:var(--a-deep)}:root[data-theme=dark] .card--night .t-dot,:root[data-theme=dark] .card--night .t-beacon{fill:var(--a-deep)}:root[data-theme=dark] .card--night .ring__fill{stroke:var(--a-deep)}:root[data-theme=dark] .card--night .ring.is-done .ring__centre b{color:var(--a-deep)}:root[data-theme=dark] .card--night .sw--today{background:var(--a-deep)}:root[data-theme=dark] .card--night .is-flash{animation-name:flash-deep}@keyframes flash-deep{0%,30%{color:var(--a-deep)}to{color:inherit}}.ov-grid{gap:var(--gap);grid-template-columns:repeat(12,minmax(0,1fr));display:grid}.ov-today{flex-direction:column;grid-area:span 2/span 6;gap:14px;display:flex;overflow:hidden}.ov-grid>.kpi{grid-column:span 3}.ov-sales{grid-column:span 8}.ov-mix{flex-direction:column;grid-column:span 4;display:flex}.ov-mix .mix{flex:1}.ov-mix .donut{width:clamp(150px,12.5vw,220px)}.ov-top,.ov-low,.ov-feed{grid-column:span 4}.ov-today__top{justify-content:space-between;align-items:flex-start;gap:20px;display:flex}.ov-today .figure--hero{color:var(--on-night);margin-top:10px}.ov-today__note{font-size:var(--fs-sm);color:var(--on-night-muted);max-width:34ch;margin-top:8px}.ov-today__note b{font-weight:750}.ov-today__note .up{color:var(--a-block)}.ov-today__note .down{color:#ff9f8f}:root[data-theme=dark] .ov-today__note .up{color:var(--a-deep)}:root[data-theme=dark] .ov-today__note .down{color:var(--bad)}.ov-today__spark{grid-template-columns:minmax(0,1fr);gap:8px;min-width:0;margin-top:auto;display:grid}.chart--today{height:clamp(110px,10vw,150px)}.float{left:calc(var(--pad) + 8.5rem);top:var(--pad);z-index:2;font:800 1.2rem/1 var(--font);color:var(--a-block);opacity:0;pointer-events:none;position:absolute}:root[data-theme=dark] .float{color:var(--a-deep)}.ov-sales__figs{flex-wrap:wrap;gap:8px clamp(18px,3vw,44px);margin-bottom:14px;display:flex}.ov-sales__figs p{display:grid}.chart--area{height:clamp(220px,19vw,320px)}.mix{align-items:center;gap:22px;display:flex}.mix--col{flex-direction:column;align-items:stretch}.mix--col .donut{align-self:center}.mix__legend{flex:1;gap:4px;min-width:0;display:grid}.mix__legend li{font-size:var(--fs-sm);cursor:default;border-radius:10px;grid-template-rows:auto auto;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:9px;padding:6px 8px;transition:background-color .2s;display:grid}.mix__legend li:hover,.mix__legend li:focus-visible{background:var(--panel)}.mix__legend li .sw{border-radius:4px;grid-row:span 2;width:12px;height:12px}.mix__legend li span{text-overflow:ellipsis;white-space:nowrap;font-weight:650;overflow:hidden}.mix__legend li b{font-variant-numeric:tabular-nums;font-weight:750}.mix__legend li small{color:var(--faint);grid-column:2/-1}.split{gap:8px;margin-top:auto;padding-top:18px;display:grid}.split__labels{font-size:var(--fs-sm);justify-content:space-between;gap:10px;display:flex}.split__labels>span{align-items:center;gap:8px;display:inline-flex}.split__labels b{font-variant-numeric:tabular-nums;font-weight:750}.split__bar{background:var(--panel);border-radius:99px;height:12px;position:relative;overflow:hidden}.split__store,.split__online{width:100%;position:absolute;top:0;bottom:0}.split__store{background:var(--night);transform-origin:0;border-radius:99px 0 0 99px;left:0}.split__online{background:var(--a-mark);transform-origin:100%;border-radius:0 99px 99px 0;right:0}.sellers{gap:4px;display:grid}.seller{border-radius:14px;grid-template-rows:auto auto;grid-template-columns:22px auto minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:7px 8px;transition:background-color .2s;display:grid}.seller:hover{background:color-mix(in srgb, var(--panel) 60%, transparent)}.seller__rank{color:var(--faint);font-variant-numeric:tabular-nums;text-align:center;grid-row:span 2;font-weight:800}.seller .thumb{grid-row:span 2}.seller__name{min-width:0;line-height:1.25;display:grid}.seller__name b{font-size:var(--fs-sm);text-overflow:ellipsis;white-space:nowrap;font-weight:700;overflow:hidden}.seller__name small{color:var(--faint)}.seller__units{font:800 1.1rem/1 var(--font);font-variant-numeric:tabular-nums}.seller__track{background:var(--panel);border-radius:99px;grid-column:3/-1;height:6px;overflow:hidden}.seller__fill{background:var(--a-mark);transform-origin:0;border-radius:99px;height:100%;display:block}.lowlist{gap:4px;display:grid}.low{border-radius:14px;grid-template-rows:auto auto;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:7px 8px;display:grid}.low .thumb{grid-row:span 2}.low__text{min-width:0;line-height:1.25;display:grid}.low__text b{font-size:var(--fs-sm);text-overflow:ellipsis;white-space:nowrap;font-weight:700;overflow:hidden}.low__text span{font-size:var(--fs-xs);font-weight:600}.low__text:hover b{color:var(--a-text)}.low .smeter{grid-column:2/-1;height:6px}.feed{gap:2px;display:grid}.feed__row{border-radius:14px;align-items:center;gap:12px;padding:8px;transition:background-color .2s;display:flex}.feed__row:hover{background:color-mix(in srgb, var(--panel) 60%, transparent)}.feed li.is-new .feed__row{animation:2.4s ease-out newrow}.feed__text{flex:1;min-width:0;line-height:1.3;display:grid}.feed__text b{font-size:var(--fs-sm);text-overflow:ellipsis;white-space:nowrap;font-weight:700;overflow:hidden}.feed__text span{font-size:var(--fs-xs);color:var(--faint);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.feed__meta{flex:none;justify-items:end;gap:3px;display:grid}.feed__meta b{font-variant-numeric:tabular-nums;font-weight:750;font-size:var(--fs-sm)}.feed__meta>span{color:var(--faint);align-items:center;gap:6px;font-size:12px;display:inline-flex}.feed__meta .chip{height:22px;padding:0 7px;font-size:12px}.feed__meta .chip svg{width:12px;height:12px}@media (width>=1700px){.ov-grid{grid-template-columns:repeat(24,minmax(0,1fr))}.ov-today{grid-column:span 10}.ov-grid>.kpi{grid-column:span 7}.ov-sales{grid-column:span 16}.ov-mix,.ov-top,.ov-low,.ov-feed{grid-column:span 8}}@media (width<=1279px){.ov-today{grid-area:auto/span 12}.ov-grid>.kpi{grid-column:span 3}.ov-sales{grid-column:span 12}.ov-mix,.ov-top,.ov-low,.ov-feed{grid-column:span 6}}@media (width<=760px){.ov-grid>.kpi{grid-column:span 6}.ov-mix,.ov-top,.ov-low,.ov-feed{grid-column:span 12}.ov-today__top{flex-direction:column-reverse;align-items:stretch}.ov-today .ring{top:var(--pad);right:var(--pad);width:92px;position:absolute}.ov-today .ring__centre b{font-size:1.15rem}.ov-today__top>div:first-child{padding-right:100px}.mix{flex-direction:column;align-items:stretch}.mix .donut{align-self:center}}.reg{gap:var(--gap);grid-template-columns:minmax(0,1fr) clamp(340px,27vw,460px);align-items:start;display:grid}.reg__shelf{gap:var(--gap);flex-direction:column;min-width:0;display:flex}.reg__tools{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.reg__tools .mini-search{flex:0 300px;margin-left:auto}.tiles{gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(clamp(150px,12vw,220px),1fr));display:grid}.tile{text-align:left;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--hair);width:100%;height:100%;box-shadow:var(--shadow-card), inset 0 1px 0 var(--edge);flex-direction:column;padding:10px;transition:border-color .2s,box-shadow .25s;display:flex;position:relative}.tile:hover{border-color:var(--hair-strong);box-shadow:0 18px 36px -22px #16181b59, inset 0 1px 0 var(--edge)}.tile__plate{aspect-ratio:1;border-radius:14px;place-items:center;display:grid;overflow:hidden}.tile__plate img{object-fit:contain;width:82%;height:82%;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}.tile:hover .tile__plate img{transform:scale(1.06)translateY(-2%)}.tile__body{gap:2px;padding:10px 4px 2px;display:grid}.tile__name{font-size:var(--fs-sm);font-weight:750;line-height:1.25}.tile__variant{font-size:var(--fs-xs);color:var(--faint)}.tile__foot{justify-content:space-between;align-items:center;gap:8px;margin-top:6px;display:flex}.tile__price{font-variant-numeric:tabular-nums;font-weight:800}.tile__left{color:var(--good);font-size:12px;font-weight:700}.tile__left--low{color:var(--warn)}.tile__left--out{color:var(--bad)}.tile__plus{background:var(--a-block);width:34px;height:34px;color:var(--on-block);opacity:0;border-radius:50%;place-items:center;transition:opacity .2s,scale .3s cubic-bezier(.34,1.56,.64,1);display:grid;position:absolute;top:18px;right:18px;scale:.7;box-shadow:0 6px 14px -6px #16181b66}.tile__plus svg{stroke-width:2.4px;width:18px;height:18px}.tile:hover .tile__plus,.tile:focus-visible .tile__plus{opacity:1;scale:1}.tile[aria-disabled=true]{cursor:not-allowed}.tile[aria-disabled=true] .tile__plate img{opacity:.45;filter:grayscale(.6)}.tile[aria-disabled=true] .tile__plus{display:none}@media (hover:none){.tile__plus{opacity:1;scale:.85}}.ticket{top:calc(var(--topbar-h) + 8px);position:sticky}.ticket__card{max-height:calc(100dvh - var(--topbar-h) - 32px);padding:var(--pad);border-radius:var(--r-xl);background:var(--card);border:1px solid var(--hair);box-shadow:var(--shadow-card), inset 0 1px 0 var(--edge);flex-direction:column;gap:14px;display:flex;position:relative;overflow:hidden}.ticket__head{justify-content:space-between;align-items:flex-start;gap:10px;display:flex}.ticket__head [data-ticket-no]{color:var(--faint);font-weight:650}.ticket__lines{overscroll-behavior:contain;flex:auto;gap:4px;min-height:0;margin:0 -8px;padding:0 8px;display:grid;overflow:auto}.tline{background:color-mix(in srgb, var(--panel) 40%, var(--card));border-radius:14px;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"t x q""t x s";align-items:center;gap:2px 12px;padding:8px;display:grid}.tline__thumb{grid-area:t}.tline__text{grid-area:x;min-width:0;line-height:1.25;display:grid}.tline__text b{font-size:var(--fs-sm);text-overflow:ellipsis;white-space:nowrap;font-weight:750;overflow:hidden}.tline__text span{font-size:var(--fs-xs);color:var(--faint)}.tline__sum{font-variant-numeric:tabular-nums;font-weight:750;font-size:var(--fs-sm);grid-area:s;justify-self:end}.qty{background:var(--card);border:1px solid var(--hair);border-radius:99px;grid-area:q;align-items:center;gap:2px;padding:2px;display:inline-flex}.qty__btn{width:28px;height:28px;color:var(--muted);border-radius:50%;place-items:center;transition:background-color .2s,color .2s;display:grid}.qty__btn:hover{background:var(--panel);color:var(--ink)}.qty__btn:disabled{opacity:.35;cursor:default}.qty__btn svg{stroke-width:2.2px;width:15px;height:15px}.qty__n{text-align:center;font-variant-numeric:tabular-nums;min-width:22px;font-weight:800;font-size:var(--fs-sm);display:inline-block}.ticket__empty{color:var(--faint);text-align:center;border:1.5px dashed var(--hair-strong);border-radius:16px;justify-items:center;gap:8px;padding:28px 10px;display:grid}.ticket__empty svg{width:34px;height:34px;color:var(--hair-strong)}.ticket__sum{border-top:1px dashed var(--hair-strong);font-size:var(--fs-sm);gap:7px;padding-top:12px;display:grid}.ticket__sum p{color:var(--muted);justify-content:space-between;gap:10px;display:flex}.ticket__sum p b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:700}.ticket__disc{color:var(--muted);justify-content:space-between;align-items:center;gap:10px;display:flex}.ticket__total{align-items:baseline;padding-top:6px}.ticket__total span{color:var(--ink);font-weight:750}.ticket__total b{letter-spacing:-.04em;display:inline-block;font:800 clamp(1.7rem, 1.2rem + 1vw, 2.2rem)/1 var(--font)!important}.ticket__pay{gap:10px;display:grid}.btn--charge{height:56px;font-size:var(--fs-md);border-radius:18px;font-weight:800}.receipt{z-index:3;background:var(--card);flex-direction:column;align-items:center;padding:14px 16px 18px;display:flex;position:absolute;inset:0}.receipt__slot{background:var(--night);border-radius:99px;flex:none;width:92%;height:10px;box-shadow:inset 0 2px 3px #00000080}.receipt__clip{flex:auto;width:90%;min-height:0;margin-top:-4px;padding:0 6px 14px;position:relative;overflow:hidden}.receipt__paper{color:#1d1f22;font:500 12.5px/1.45 var(--mono);--z:7px;-webkit-mask:conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--z) * 2) 100%;-webkit-mask:conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--z) * 2) 100%;mask:conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--z) * 2) 100%;background:#fbfaf5;gap:12px;padding:22px 18px 26px;display:grid;position:relative;box-shadow:0 10px 22px -12px #00000059}.rc__head{text-align:center;border-bottom:1px dashed #c9c9c0;justify-items:center;gap:2px;padding-bottom:10px;display:grid}.rc__head b{font:800 15px/1.2 var(--font);letter-spacing:-.01em}.rc__head span{color:#5c5f63;font-size:12px}.rc__logo{stroke-width:2.2px;color:#1d1f22;width:26px;height:26px;margin-bottom:4px}.rc__lines{grid-template-columns:minmax(0,1fr);gap:4px;display:grid}.rc__lines li,.rc__sum div{justify-content:space-between;gap:10px;display:flex}.receipt__paper>*,.rc__lines li{min-width:0}.rc__lines li span{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}.rc__lines li b{flex:none;font-weight:600}.rc__sum{border-top:1px dashed #c9c9c0;gap:3px;padding-top:10px;display:grid}.rc__sum dd{font-variant-numeric:tabular-nums;margin:0}.rc__total{padding-top:4px;font-size:15px;font-weight:800}.rc__paid{font-family:var(--font);background:#eef7d8;border-radius:12px;align-items:center;gap:12px;padding:10px 12px;display:flex}.rc__paid b{font-size:14px;display:block}.rc__paid small{color:#5c5f63}.rc__check{flex:none;width:40px;height:40px}.rc__check circle{fill:#c6ef4e;stroke:#4a6a00;stroke-width:3px;stroke-dasharray:100}.rc__check path{fill:none;stroke:#16181b;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100}.rc__thanks{text-align:center;color:#5c5f63;font-size:12px}.receipt__actions{flex:none;gap:10px;width:100%;display:flex}.receipt__actions .btn{flex:1}.ticketbar{left:12px;right:12px;bottom:calc(80px + env(safe-area-inset-bottom));z-index:24;background:var(--night);height:56px;color:var(--on-night);border-radius:99px;align-items:center;gap:12px;padding:0 18px 0 8px;font-weight:700;display:none;position:fixed;box-shadow:0 16px 30px -12px #00000073}.ticketbar b{font-variant-numeric:tabular-nums;margin-left:auto}.ticketbar{transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1)}.ticketbar.is-away{opacity:0;pointer-events:none;transform:translateY(24px)}:root[data-reduced-motion="true"] .ticketbar{transition:none}.ticketbar__count{background:var(--a-block);min-width:40px;height:40px;color:var(--on-block);border-radius:99px;place-items:center;padding:0 8px;font-weight:800;display:grid}@media (width<=1100px){.reg{grid-template-columns:minmax(0,1fr)}.ticket{position:static}.ticket__card{max-height:none}.ticket__lines{overflow:visible}.receipt{position:absolute}.receipt__clip{min-height:480px}.ticketbar:not([hidden]){display:flex}}@media (width>=961px) and (width<=1100px){.ticketbar{width:360px;bottom:16px;left:auto}}@media (width<=560px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tile{padding:8px}.reg__tools .mini-search{flex:100%;margin-left:0}}.sumrow,.pr-tiles{gap:var(--gap);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.items{align-items:center;gap:10px;display:inline-flex}.items small{display:inline!important}.table--orders .who span:last-child{text-overflow:ellipsis;max-width:200px;overflow:hidden}@media (width<=1100px){.sumrow,.pr-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}.stockcell{grid-template-rows:auto auto;grid-template-columns:96px auto;align-items:center;column-gap:12px;display:grid}.stockcell .smeter{grid-row:span 2}.stockcell b{font:800 1.05rem/1.1 var(--font);font-variant-numeric:tabular-nums;display:inline-block}.stockcell small{display:block}.stockcell .pill{height:22px;padding:0 8px;font-size:12px}.actions{text-align:right}.actions>*+*{margin-left:4px}.row--out>th .rowlink{color:var(--bad)}.stages{gap:var(--gap);counter-reset:stage;grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.stage{padding:var(--pad);border-radius:var(--r-lg);background:var(--card);border:1px solid var(--hair);box-shadow:var(--shadow-card), inset 0 1px 0 var(--edge);align-content:start;gap:2px;display:grid;position:relative}.stage__n{top:var(--pad);right:var(--pad);background:var(--panel);width:28px;height:28px;color:var(--muted);border-radius:50%;place-items:center;font-size:12px;font-weight:800;display:grid;position:absolute}.stage .figure{margin-top:6px}.stage small{color:var(--faint);font-size:var(--fs-xs)}.stage--transit{background:var(--a-block);color:var(--on-block);border-color:#0000}.stage--transit .card__label,.stage--transit small{color:color-mix(in srgb, var(--on-block) 72%, transparent)}.stage--transit .stage__n{background:color-mix(in srgb, var(--on-block) 12%, transparent);color:var(--on-block)}.stage--received .stage__n{background:var(--good-bg);color:var(--good)}.stage:not(:last-child):after{content:"";top:50%;right:calc(var(--gap) * -1);width:var(--gap);background:repeating-linear-gradient(90deg, var(--hair-strong) 0 4px, transparent 4px 8px);height:2px;position:absolute}.po-grid{gap:var(--gap);grid-template-columns:minmax(0,1fr) clamp(300px,26vw,420px);align-items:start;display:grid}.po-main{gap:12px;min-width:0;display:grid}.pos{gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));display:grid}.po{cursor:pointer;gap:16px;transition:border-color .2s;display:grid}.po:hover{border-color:var(--hair-strong)}.po.is-new{animation:2.4s ease-out po-new}@keyframes po-new{0%,40%{border-color:var(--a-mark);box-shadow:0 0 0 3px var(--a-soft)}to{border-color:var(--hair)}}.po.is-arrived{border-color:var(--good)}.po__head{align-items:center;gap:12px;display:flex}.po__head .pill{margin-left:auto}.po__who{min-width:0;line-height:1.25;display:grid}.po__who small{color:var(--faint);font-size:var(--fs-xs);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.po__items{align-items:center;gap:12px;display:flex}.po__items>span:last-child{line-height:1.25;display:grid}.po__items small{color:var(--faint);font-size:var(--fs-xs)}.po__foot{border-top:1px solid var(--hair);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding-top:12px;display:flex}.po__when{font-size:var(--fs-xs);color:var(--muted)}.po__act{align-items:center;gap:4px;display:inline-flex}.track{grid-template-columns:repeat(4,minmax(0,1fr));display:grid;position:relative}.track__line{background:var(--panel);border-radius:99px;height:4px;position:absolute;top:9px;left:12.5%;right:12.5%;overflow:hidden}.track__fill{background:var(--night);transform-origin:0;border-radius:99px;height:100%;display:block}.track__stop{justify-items:center;min-width:0;display:grid;position:relative}.track__stop i{background:var(--card);border:2px solid var(--hair-strong);border-radius:50%;width:22px;height:22px;display:block}.track__stop small{white-space:nowrap;color:var(--faint);margin-top:4px;font-size:12px;font-weight:650}.track__stop.is-past i{background:var(--night);border-color:var(--night)}.track__stop.is-now i{background:var(--a-block);border-color:var(--night);box-shadow:0 0 0 4px var(--a-soft)}.track__stop.is-now small{color:var(--ink);font-weight:750}.suppliers{gap:14px;display:grid}.supplier{grid-template-rows:auto auto;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 12px;display:grid}.supplier .avatar{grid-row:span 2}.supplier__name{min-width:0;line-height:1.25;display:grid}.supplier__name b{font-size:var(--fs-sm);font-weight:750}.supplier__name small,.supplier__fig small{font-size:var(--fs-xs);color:var(--faint)}.supplier__fig{justify-items:end;line-height:1.25;display:grid}.supplier__fig b{font-variant-numeric:tabular-nums;font-weight:750;font-size:var(--fs-sm)}.supplier__fig small.is-good{color:var(--good)}.supplier__fig small.is-warn{color:var(--warn)}.supplier__track{background:var(--panel);border-radius:99px;grid-column:2/-1;height:6px;overflow:hidden}.supplier__fill{background:var(--night);transform-origin:0;border-radius:99px;height:100%;display:block}.po-lines__list{gap:6px;max-height:min(46vh,420px);margin:0 -6px;padding:2px 6px;display:grid;overflow:auto}.pol{border:1px solid var(--hair);border-radius:14px;grid-template-rows:auto auto;grid-template-columns:auto minmax(0,1fr) 92px;align-items:center;gap:6px 12px;padding:8px 10px;display:grid}.pol.is-focus{border-color:var(--a-mark);background:var(--a-soft)}.pol .thumb{grid-row:span 2}.pol__text{min-width:0;line-height:1.25;display:grid}.pol__text b{font-size:var(--fs-sm);font-weight:700}.pol__text small{color:var(--faint);font-size:12px}.pol__qty input{border:1px solid var(--hair-strong);background:var(--card);text-align:right;font-variant-numeric:tabular-nums;border-radius:10px;width:100%;min-height:40px;padding:6px 10px;font-weight:750}.pol__qty input:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent)}.pol .smeter{grid-column:2/-1;height:5px}.po-total{border-top:1px dashed var(--hair-strong);justify-content:space-between;align-items:baseline;padding-top:10px;display:flex}.po-total b{font:800 1.5rem/1 var(--font);letter-spacing:-.03em;font-variant-numeric:tabular-nums;display:inline-block}@media (width<=1100px){.po-grid{grid-template-columns:minmax(0,1fr)}.stages{grid-template-columns:repeat(2,minmax(0,1fr))}.stage:nth-child(2):after{display:none}}.rp-grid{gap:var(--gap);grid-template-columns:repeat(12,minmax(0,1fr));display:grid}.rp-grid>.kpi{grid-column:span 3}.rp-weeks{grid-column:span 8}.rp-cats{grid-column:span 4}.rp-heat{grid-column:span 8}.rp-channel{grid-column:span 4}.rp-table{grid-column:span 12}.chart--cols{height:clamp(240px,20vw,340px)}.heat{grid-template-columns:42px repeat(var(--cols), minmax(0, 1fr));align-items:center;gap:5px;display:grid}.heat__col{text-align:center;color:var(--faint);font-variant-numeric:tabular-nums;font-size:12px}.heat__row{color:var(--muted);font-size:12px;font-weight:650}.heat__cell{aspect-ratio:1.5;background:var(--panel);border-radius:7px;display:block;overflow:hidden}.heat__cell i{border-radius:inherit;background:var(--heat);width:100%;height:100%;opacity:var(--a);display:block}.heat__scale{color:var(--faint);align-items:center;gap:8px;margin-top:14px;font-size:12px;display:flex}.heat__scale i{background:linear-gradient(90deg, color-mix(in srgb, var(--heat) 10%, var(--panel)), var(--heat));border-radius:99px;width:120px;height:8px}.through{align-items:center;gap:10px;display:inline-flex}.through__track{background:var(--panel);border-radius:99px;width:90px;height:6px;overflow:hidden}.through__fill{background:var(--a-mark);transform-origin:0;border-radius:99px;height:100%;display:block}.through b{font-variant-numeric:tabular-nums;text-align:right;min-width:3.2em}@media (width<=1279px){.rp-weeks,.rp-heat{grid-column:span 12}.rp-cats,.rp-channel{grid-column:span 6}}@media (width<=760px){.rp-grid>.kpi{grid-column:span 6}.rp-cats,.rp-channel{grid-column:span 12}.heat{grid-template-columns:34px repeat(var(--cols), minmax(0, 1fr));gap:3px}.heat__col:nth-child(odd){visibility:hidden}}.st-grid{gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));align-items:start;display:grid}.st-card{gap:16px;display:grid}.st-save{justify-content:flex-end;display:flex}.swatches{gap:12px;display:flex}.swatch{border-radius:14px;width:44px;height:44px;position:relative;box-shadow:inset 0 0 0 1px #00000014}.swatch--lime{background:#c6ef4e}.swatch--sky{background:#8fd0ff}.swatch--rose{background:#ffb5c8}.swatch[aria-checked=true]:after{content:"";border:2px solid var(--ink);border-radius:18px;position:absolute;inset:-5px}.st-data{flex-wrap:wrap;gap:10px;display:flex}.st-keys{border-top:1px solid var(--hair);font-size:var(--fs-sm);gap:8px;padding-top:6px;display:grid}.st-keys div{justify-content:space-between;gap:10px;display:flex}.st-keys dt{color:var(--faint);align-items:center;gap:4px;display:inline-flex}.st-keys dd{color:var(--muted);margin:0}@media (pointer:coarse){.st-keys{display:none}}.photos__grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin-top:6px;display:grid}.photo{cursor:pointer;position:relative}.photo input{opacity:0;position:absolute}.photo__plate{aspect-ratio:1;background:var(--panel);border:2px solid #0000;border-radius:14px;place-items:center;transition:border-color .2s;display:grid}.photo__plate img{object-fit:contain;width:78%;height:78%}.photo input:checked+.photo__plate{border-color:var(--night);background:var(--a-soft)}.photo input:focus-visible+.photo__plate{box-shadow:var(--focus)}.sh-head{gap:4px;padding-right:50px;display:grid}.sh-title{font:800 1.9rem/1.1 var(--font);letter-spacing:-.04em}.sh-sub{color:var(--muted);font-size:var(--fs-sm);flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:4px;display:flex}.sh-who{align-items:center;gap:12px;display:flex}.sh-who>span{gap:4px;line-height:1.25;display:grid}.sh-who small{color:var(--faint);font-size:var(--fs-xs);align-items:center;gap:8px;display:inline-flex}.sh-lines{gap:4px;display:grid}.sh-lines li{background:color-mix(in srgb, var(--panel) 40%, var(--card));border-radius:14px;align-items:center;gap:12px;padding:8px;display:flex}.sh-lines li>span{flex:1;min-width:0;line-height:1.3;display:grid}.sh-lines small{color:var(--faint);font-size:var(--fs-xs)}.sh-lines b{font-variant-numeric:tabular-nums;font-weight:750}.sh-link{font-weight:700;font-size:var(--fs-sm)}.sh-link:hover{color:var(--a-text);text-underline-offset:3px;text-decoration:underline}.sh-sum{font-size:var(--fs-sm);gap:6px;display:grid}.sh-sum div{color:var(--muted);justify-content:space-between;gap:12px;display:flex}.sh-sum dd{color:var(--ink);font-variant-numeric:tabular-nums;margin:0;font-weight:650}.sh-total{border-top:1px dashed var(--hair-strong);padding-top:8px}.sh-total dt{color:var(--ink);font-weight:750}.sh-total dd{letter-spacing:-.03em;font:800 1.35rem/1 var(--font)!important}.sh-actions{flex-wrap:wrap;gap:10px;padding-top:4px;display:flex}.sh-actions .btn{flex:auto}.sh-hero{margin:-6px -6px 0}.sh-plate{border-radius:20px;place-items:center;height:clamp(180px,26vh,240px);display:grid;overflow:hidden}.sh-plate img{object-fit:contain;filter:drop-shadow(0 18px 20px #16181b2e);width:auto;max-width:80%;height:clamp(150px,22vh,204px)}.sh-stock{background:color-mix(in srgb, var(--panel) 45%, var(--card));border-radius:18px;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:16px;display:grid}.sh-stock>div{align-content:start;display:grid}.sh-stock .figure{margin-top:4px}.sh-stock b[data-sh-stock]{justify-self:start}.sh-stock__meter{grid-column:1/-1}.sh-stock .smeter{height:10px}.sh-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.sh-kpis p{gap:2px;display:grid}.sh-kpis b{font:800 1.2rem/1.15 var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums}.sh-spark{gap:8px;display:grid}.spark{height:72px}.sh-block{gap:10px;display:grid}.sh-h3{font-size:var(--fs-md);font-weight:750}.sh-sup{line-height:1.3;display:grid}.sh-sup span{color:var(--faint);font-size:var(--fs-xs)}.sh-pos{gap:6px;display:grid}.sh-pos li{font-size:var(--fs-sm);flex-wrap:wrap;align-items:center;gap:10px;display:flex}.sh-pos li>span:last-child{color:var(--faint);font-size:var(--fs-xs)}.moves{display:grid}.moves li{border-bottom:1px solid var(--hair);font-size:var(--fs-sm);justify-content:space-between;align-items:center;gap:12px;padding:8px 0;display:flex}.moves li:last-child{border-bottom:0}.moves li>span{line-height:1.3;display:grid}.moves small{color:var(--faint);font-size:12px}.moves b{font-variant-numeric:tabular-nums;font-weight:800}.timeline{gap:0;display:grid}.timeline li{line-height:1.3;font-size:var(--fs-sm);padding:0 0 16px 26px;display:grid;position:relative}.timeline li:before{content:"";border:2px solid var(--hair-strong);background:var(--card);border-radius:50%;width:12px;height:12px;position:absolute;top:3px;left:0}.timeline li:after{content:"";background:var(--hair);width:2px;position:absolute;top:18px;bottom:2px;left:6px}.timeline li:last-child:after{display:none}.timeline li.is-done:before{background:var(--a-block);border-color:var(--night)}.timeline small{color:var(--faint);font-size:var(--fs-xs)}@media (width<=820px){.table--orders thead,.table--stock thead{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.table--orders tbody tr,.table--stock tbody tr{border-bottom:1px solid var(--hair);grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:12px 16px;display:grid}.table--orders tbody tr>*,.table--stock tbody tr>*{white-space:normal;border:0;padding:0}.table--orders [data-th=Order]{grid-column:1}.table--orders [data-th=Total]{grid-area:1/2}.table--orders [data-th=Customer]{grid-column:1}.table--orders [data-th=Status]{grid-area:2/2;justify-self:end}.table--orders [data-th=Channel],.table--orders [data-th=Items]{display:none}.table--stock [data-th=Product]{grid-column:1/-1}.table--stock [data-th=In\ stock]{grid-column:1}.table--stock [data-th=In\ stock] .stockcell{grid-template-columns:minmax(80px,140px) auto}.table--stock [data-th=Price]{grid-area:2/2}.table--stock [data-th=On\ order],.table--stock [data-th="Sold, 30d"],.table--stock [data-th=Cover],.table--stock [data-th=Margin]{display:none}.table--stock .actions{text-align:left;grid-column:1/-1;gap:6px;display:flex}.table--stock .actions>*+*{margin-left:0}}@media (width<=560px){.sumrow .figure,.pr-tiles .figure{font-size:1.5rem}.sh-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.sh-stock{grid-template-columns:repeat(3,minmax(0,1fr));padding:12px}.sh-stock .figure{font-size:1.4rem}.stages .figure{font-size:1.5rem}.pos{grid-template-columns:minmax(0,1fr)}}.field>.seg{justify-self:start}@media (width>=1101px) and (height<=1100px){.ticket__card{gap:10px}.field--bare input{min-height:40px}.tline{padding:6px 8px}.ticket__sum{gap:5px;padding-top:10px}.btn--charge{height:50px}}@media (width<=820px){.rp-table .table thead{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.rp-table .table tbody tr{border-bottom:1px solid var(--hair);grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;padding:14px 16px;display:grid}.rp-table .table tbody tr:last-child{border-bottom:0}.rp-table .table th,.rp-table .table td{text-align:left;white-space:normal;border:0;padding:0}.rp-table .table [data-th=Product]{grid-column:1/-1}.rp-table .table [data-th=Margin]{display:none}.rp-table .table [data-th=Sell-through]{grid-column:1/-1}.rp-table .table td:before{content:attr(data-th);color:var(--faint);margin-bottom:2px;font-size:12px;font-weight:500;display:block}.rp-table .through{width:100%;display:flex}.rp-table .through__track{flex:1;width:auto}}@media (width>=821px) and (width<=1279px){.table--stock th:nth-child(3),.table--stock td:nth-child(3),.table--stock th:nth-child(7),.table--stock td:nth-child(7){display:none}.table--stock .stockcell{grid-template-columns:72px auto}.table--stock th,.table--stock td{padding-inline:12px}}@media (width<=560px){.find__list{left:12px;right:12px;top:calc(var(--topbar-h) + 4px);max-height:calc(100dvh - var(--topbar-h) - 120px);position:fixed}.tray{left:12px;right:12px;top:calc(var(--topbar-h) + 4px);width:auto;position:fixed}.tray__list{max-height:calc(100dvh - var(--topbar-h) - 180px)}.pol{grid-template-columns:auto minmax(0,1fr) 76px}}@media (width<=960px) and (height<=500px){.topbar{position:static}.board{padding-bottom:calc(76px + env(safe-area-inset-bottom))}.tabbar{padding-block:4px calc(4px + env(safe-area-inset-bottom));padding-inline:max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right))}.tab{min-height:44px;padding:2px 0}.tab span{display:none}.tab--new{width:46px;height:46px}.ticketbar{bottom:calc(64px + env(safe-area-inset-bottom));height:50px}.toast{bottom:calc(68px + env(safe-area-inset-bottom))}.find__list,.tray{position:absolute}.sheet__panel{max-height:calc(100dvh - 16px)}.sh-plate{height:132px}.sh-plate img{height:112px}}@media (pointer:coarse){.brand{min-width:44px;min-height:44px}.live{justify-content:center;min-width:44px;height:44px}.seg--tiny .seg__btn{height:44px}.qty__btn{width:40px;height:40px}.switch,.pol__qty input{min-height:44px}a.hbar,.low__text,.tray__text{align-content:center;min-height:44px}.link,.rowlink,.th-sort,a.chip,.sh-link{position:relative}.link:after,.rowlink:after,.th-sort:after,a.chip:after,.sh-link:after{content:"";position:absolute;inset:-12px -6px}}@media (width>=821px) and (width<=960px){.table--stock thead{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.table--stock tbody tr{border-bottom:1px solid var(--hair);grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:6px 16px;padding:12px 16px;display:grid}.table--stock tbody tr>*{white-space:normal;border:0;padding:0}.table--stock [data-th=Product],.table--stock [data-th=In\ stock]{grid-column:1}.table--stock [data-th=In\ stock] .stockcell{grid-template-columns:minmax(80px,160px) auto}.table--stock [data-th=Price]{grid-area:1/2/span 2}.table--stock [data-th=On\ order],.table--stock [data-th="Sold, 30d"],.table--stock [data-th=Cover],.table--stock [data-th=Margin]{display:none}.table--stock .actions{grid-area:1/3/span 2;gap:6px;display:flex}.table--stock .actions>*+*{margin-left:0}}

/* ========================================================
   Ledge POS Phase 1: Shift & Cash Drawer Engineering
   ======================================================== */
.shift-pill{height:40px;background:var(--card);border:1px solid var(--hair-strong);border-radius:99px;align-items:center;gap:8px;padding:0 14px;font-size:var(--fs-xs);font-weight:700;color:var(--ink);transition:all .2s cubic-bezier(.16,1,.3,1);display:inline-flex;cursor:pointer}.shift-pill:hover{border-color:var(--muted);box-shadow:0 4px 12px rgba(0,0,0,.06);transform:translateY(-1px)}.shift-pill__dot{width:8px;height:8px;border-radius:50%;background:var(--warn)}.shift-pill--open{border-color:color-mix(in srgb,var(--good) 45%,var(--card));background:color-mix(in srgb,var(--good-bg) 35%,var(--card))}.shift-pill--open .shift-pill__dot{background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 28%,transparent);animation:beacon 1.8s ease-out infinite}.shift-pill--closed .shift-pill__dot{background:var(--warn)}.shift-banner{background:var(--card);border:1px dashed var(--hair-strong);border-radius:var(--r-md);padding:12px 18px;align-items:center;justify-content:space-between;gap:16px;display:flex;margin-bottom:4px}.shift-banner__content{align-items:center;gap:12px;display:flex}.shift-banner__ico{background:var(--warn-bg);color:var(--warn);width:38px;height:38px;border-radius:12px;place-items:center;display:grid;flex:none}.shift-banner__ico svg{width:20px;height:20px}.shift-banner__title{font-size:var(--fs-sm);font-weight:750;display:block}.shift-banner__sub{font-size:var(--fs-xs);color:var(--faint);margin-top:2px}.dlg-tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;border-radius:99px;padding:4px 10px;width:fit-content}.dlg-tag svg{width:14px;height:14px}.dlg-tag--warn{background:var(--warn-bg);color:var(--warn)}.dlg-tag--good{background:var(--good-bg);color:var(--good)}.dlg-select{border-radius:var(--r-sm);border:1px solid var(--hair-strong);background:var(--card);width:100%;min-height:44px;padding:8px 14px;font-weight:600}.field-float-input{position:relative;display:flex;align-items:center}.field-float-curr{position:absolute;left:14px;font-weight:750;color:var(--faint);pointer-events:none}.field-float-input input{padding-left:32px;font-weight:750;font-size:1.15rem;letter-spacing:-.02em}.quick-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.chip-btn{border:1px solid var(--hair-strong);background:var(--card);color:var(--ink);font-size:12px;font-weight:700;border-radius:8px;padding:4px 9px;transition:all .15s ease}.chip-btn:hover{border-color:var(--ring);background:var(--a-soft);color:var(--on-block)}.shift-summary-well{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-md);padding:12px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.sm-card{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-sm);padding:10px 12px;display:flex;flex-direction:column;gap:4px}.sm-card--hero{grid-column:span 2;background:var(--night);color:var(--on-night);border-color:#0000}.sm-card--hero .sm-card__label{color:var(--on-night-muted)}.sm-card__label{font-size:var(--fs-xs);color:var(--muted);font-weight:600}.sm-card__value{font-size:1.25rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}.sm-card__hint{font-size:11px;color:var(--on-night-muted);margin-top:2px}.variance-wrap{display:grid;gap:6px}.variance-pill{min-height:44px;border-radius:var(--r-sm);border:1px solid var(--hair-strong);align-items:center;gap:8px;padding:0 14px;display:flex;font-weight:750;font-size:var(--fs-sm)}.variance-dot{width:8px;height:8px;border-radius:50%;flex:none}.variance-pill--neutral{background:var(--card);color:var(--faint)}.variance-pill--neutral .variance-dot{background:var(--hair-strong)}.variance-pill--balanced{background:var(--good-bg);border-color:color-mix(in srgb,var(--good) 40%,transparent);color:var(--good)}.variance-pill--balanced .variance-dot{background:var(--good)}.variance-pill--short{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 40%,transparent);color:var(--bad)}.variance-pill--short .variance-dot{background:var(--bad)}.variance-pill--over{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 40%,transparent);color:var(--warn)}.variance-pill--over .variance-dot{background:var(--warn)}.z-paper{background:#ffffff;color:#111827;border:1px solid var(--hair-strong);border-radius:12px;padding:20px 18px;font-family:var(--mono);font-size:12.5px;line-height:1.45;box-shadow:0 4px 18px rgba(0,0,0,.06);position:relative;overflow:hidden}:root[data-theme=dark] .z-paper{background:#1f232b;color:#f3f4f6;border-color:var(--hair-strong)}.z-paper__head{text-align:center;border-bottom:1px dashed currentColor;padding-bottom:12px;margin-bottom:12px}.z-paper__title{font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.05em}.z-paper__shop{font-weight:700;margin-top:2px}.z-paper__meta{opacity:.8;font-size:11px}.z-paper__table{width:100%;border-collapse:collapse;margin-bottom:12px}.z-paper__table td{padding:3px 0;font-variant-numeric:tabular-nums}.z-paper__table tr.total-row{border-top:1px dashed currentColor;font-weight:800}.z-paper__table td:last-child{text-align:right}.z-paper__cut{border-top:1px dashed currentColor;padding-top:12px;text-align:center;font-size:11px;opacity:.8}@media print{body *{visibility:hidden}#dlg-z-report,#dlg-z-report *{visibility:visible}#dlg-z-report{position:absolute;left:0;top:0;width:80mm!important;border:none!important;box-shadow:none!important;padding:0!important}#dlg-z-report .dlg__row,#dlg-z-report .dlg-tag,#dlg-z-report .dlg__title,#dlg-z-report .dlg__text{display:none!important}.z-paper{border:none!important;padding:0!important;box-shadow:none!important;color:#000!important;background:#fff!important}}

/* ========================================================
   Ledge POS: On-Card Cash Tender & Change Overlay Styles
   Strictly follows existing MianPos / Ledge theme styles
   ======================================================== */
.ticket__tender {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--card);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ticket__tender[hidden] {
  display: none !important;
}
.ticket__tender-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#tender-cash-input::-webkit-outer-spin-button,
#tender-cash-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#tender-cash-input {
  -moz-appearance: textfield;
  font-size: 1.25rem;
  font-weight: 800;
  height: 46px;
}
.tender__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.tender__chip {
  height: 32px;
  padding: 0 13px;
  border-radius: 99px;
  background: var(--panel);
  border: 1px solid var(--hair-strong);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tender__chip:hover {
  background: var(--night);
  color: var(--on-night);
  border-color: var(--night);
}
.tender__chip--exact {
  background: var(--night);
  color: var(--on-night);
  border-color: var(--night);
}
.tender__change {
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--good-bg);
  color: var(--good);
  border: 1px solid color-mix(in srgb, var(--good) 30%, transparent);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-sm);
  font-weight: 700;
}
.tender__change b {
  font-size: 1.35rem;
  font-weight: 800;
}
.tender__change--neutral {
  background: var(--panel);
  color: var(--muted);
  border-color: var(--hair);
}
.tender__change--neutral b {
  font-size: var(--fs-sm);
  color: var(--ink);
}
.tender__change--short {
  background: var(--bad-bg);
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 30%, transparent);
}
.tender__actions {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}
.tender__actions .btn--charge {
  height: 52px;
  font-size: var(--fs-sm);
}
.tender__actions .btn--ghost {
  height: 38px;
  font-size: var(--fs-xs);
}
.rc__tender-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.rc__change-row {
  font-size: var(--fs-sm);
  color: var(--good);
  font-weight: 700;
  border-top: 1px dashed var(--hair-strong);
  padding-top: 4px;
  margin-top: 2px;
}

/* ========================================================
   Ledge POS: Direct Purchase Bill Engineering Styles
   ======================================================== */
.dlg--bill {
  width: min(880px, 100vw - 28px);
}
.dlg-bill-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2px;
}
.bill-meta-well {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1fr;
  gap: 12px;
}
.bill-items-section {
  display: grid;
  gap: 8px;
}
.bill-items-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bill-table-container {
  background: var(--card);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-md);
  max-height: 290px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.bill-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--fs-xs);
}
.bill-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--panel) 85%, var(--card));
  padding: 7px 6px;
  font-size: 11px;
  font-weight: 750;
  color: var(--faint);
  border-bottom: 1px solid var(--hair-strong);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.bill-table tbody td {
  padding: 5px 4px;
  border-bottom: 1px solid var(--hair);
  vertical-align: middle;
}
.bill-table tbody tr:hover {
  background: color-mix(in srgb, var(--panel) 40%, transparent);
}
.col-prod {
  width: auto;
  min-width: 140px;
  text-align: left;
}
.col-qty {
  width: 66px;
  text-align: right;
}
.col-cost {
  width: 86px;
  text-align: right;
}
.col-foc {
  width: 52px;
  text-align: right;
}
.col-price {
  width: 86px;
  text-align: right;
}
.col-sub {
  width: 90px;
  text-align: right;
}
.col-del {
  width: 36px;
  text-align: center;
}
.col-del .icon-btn {
  margin: 0 auto;
  width: 30px;
  height: 30px;
}
.col-del .icon-btn svg {
  width: 14px;
  height: 14px;
}
.bill-table input,
.bill-table select {
  font-size: 12px;
  min-height: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--hair-strong);
  background: var(--card);
}
.bill-table input.num {
  text-align: right;
  padding: 4px 6px;
  width: 100%;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.bill-table select.bill-row-prod {
  padding: 4px 22px 4px 8px;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.bill-table input:focus-visible,
.bill-table select:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 25%, transparent);
}
.bill-row-subtotal {
  font-size: 12px;
  font-weight: 750;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  display: block;
  text-align: right;
  padding-right: 4px;
}
.bill-summary-well {
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr;
  gap: 10px;
  align-items: stretch;
}
.bill-summary-well .sm-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bill-summary-well .sm-card--hero {
  grid-column: auto !important;
}
.bill-track-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--good-bg);
  color: var(--good);
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 750;
}
.bill-track-tag svg {
  width: 14px;
  height: 14px;
}
.bill-sheet-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
@media (width <= 768px) {
  .bill-meta-well {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bill-summary-well {
    grid-template-columns: 1fr;
  }
}

/* ========================================================
   Ledge POS: Barcode Scanner Engineering Styles
   ======================================================== */
.reg__scanner-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.scan-status-pill {
  height: 36px;
  background: color-mix(in srgb, var(--good-bg) 65%, var(--card));
  border: 1px solid color-mix(in srgb, var(--good) 35%, transparent);
  color: var(--good);
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  font-size: var(--fs-xs);
  font-weight: 750;
  white-space: nowrap;
  user-select: none;
}
.scan-status-pill svg {
  width: 15px;
  height: 15px;
}
.scan-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--good) 30%, transparent);
  animation: beacon 1.8s ease-out infinite;
}
.dlg--scanner {
  width: min(440px, 100vw - 32px);
}
.scanner-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #08090b;
  border: 1px solid var(--hair-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}
.scanner-viewport video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scanner-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at center, transparent 45%, rgba(0,0,0,0.5) 80%);
}
.scanner-frame {
  width: 70%;
  height: 52%;
  border: 2px dashed var(--a-block);
  border-radius: 12px;
  position: relative;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.32);
  overflow: hidden;
}
.scanner-laser {
  position: absolute;
  left: 0;
  right: 0;
  height: 2.5px;
  background: #ef4444;
  box-shadow: 0 0 10px 2px #ef4444;
  animation: scanner-laser 1.8s ease-in-out infinite alternate;
}
@keyframes scanner-laser {
  0% { top: 6%; opacity: 0.8; }
  100% { top: 92%; opacity: 1; }
}
.scanner-status {
  position: absolute;
  bottom: 12px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 99px;
  padding: 4px 12px;
  backdrop-filter: blur(8px);
}
.barcode-badge {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--faint);
  background: color-mix(in srgb, var(--panel) 80%, var(--card));
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--hair);
  display: inline-block;
}

/* ========================================================
   Ledge POS: Stock Table High-Performance Pagination Bar
   ======================================================== */
.stock-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-top: 1px solid var(--hair-strong);
  background: color-mix(in srgb, var(--panel) 40%, var(--card));
  border-bottom-left-radius: var(--r-lg);
  border-bottom-right-radius: var(--r-lg);
  user-select: none;
}
.stock-pagination[hidden] {
  display: none !important;
}
.stock-pagination__info {
  font-size: var(--fs-xs);
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.stock-pagination__num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  color: var(--ink);
}
.stock-pagination__controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.stock-pagination__prev,
.stock-pagination__next {
  height: 32px;
  padding: 0 10px;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--r-sm);
}
.stock-pagination__prev:disabled,
.stock-pagination__next:disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
}
.stock-pagination__pages {
  display: flex;
  align-items: center;
  gap: 4px;
}
.stock-page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.stock-page-btn:hover {
  background: color-mix(in srgb, var(--panel) 80%, var(--card));
  color: var(--ink);
  transform: translateY(-1px);
}
.stock-page-btn.is-active {
  background: var(--a-block);
  color: #fff;
  font-weight: 750;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--a-block) 35%, transparent);
}
.stock-page-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 32px;
  color: var(--faint);
  font-weight: 700;
  font-size: 13px;
  user-select: none;
}
.stock-pagination__size {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.stock-pagination__size-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--faint);
  cursor: pointer;
}
.stock-pagination__size-select {
  height: 32px;
  padding: 0 24px 0 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hair-strong);
  background: var(--card);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
@media (width <= 768px) {
  .stock-pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 10px 12px;
  }
  .stock-pagination__info {
    width: 100%;
    justify-content: center;
  }
  .stock-pagination__size {
    display: none;
  }
}

/* ========================================================
   Phase 1: Ledge POS Enterprise Auth & Manager Security Gate
   ======================================================== */

/* ========================================================
   Phase 1: Lumen Interactive Lamp & Enterprise Auth Overlay
   ======================================================== */

@keyframes lp-sway {
  0%, 100% { transform: rotate(-2.4deg); }
  50% { transform: rotate(2.4deg); }
}

@keyframes lp-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

@keyframes lp-flicker {
  0% { opacity: 0; }
  8% { opacity: 0.9; }
  13% { opacity: 0.15; }
  21% { opacity: 1; }
  30% { opacity: 0.45; }
  40% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes lp-pulse {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}

@keyframes lp-mote {
  0% { transform: translateY(10px) translateX(0); opacity: 0; }
  22% { opacity: 0.85; }
  78% { opacity: 0.55; }
  100% { transform: translateY(-30px) translateX(7px); opacity: 0; }
}

@keyframes lp-knobpop {
  0% { transform: scale(1); }
  42% { transform: scale(1.32); }
  100% { transform: scale(1); }
}

@keyframes lp-spin {
  to { transform: rotate(360deg); }
}

.auth-overlay.lp-root {
  --lamp-x: clamp(180px, calc((100vw - min(840px, 58vw) - clamp(24px, 4.5vw, 68px)) / 2), 520px);
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  background: #14110e;
  font-family: 'Nunito', 'Plus Jakarta Sans', sans-serif;
  overflow-y: auto;
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
  transition: background 1.1s ease, opacity 0.35s ease, visibility 0.35s ease;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.auth-overlay.lp-root::-webkit-scrollbar {
  display: none;
}

.auth-overlay {
  pointer-events: none;
}

.auth-overlay[hidden],
.auth-overlay.is-hidden {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.auth-overlay:not(.is-active) {
  pointer-events: none !important;
}

.auth-overlay.is-active:not([hidden]) {
  pointer-events: auto !important;
  display: block !important;
  visibility: visible !important;
}

/* ========================================================
   Photorealistic Store Scene (Night Lighting State Switch)
   ======================================================== */
.lp-bg-scene {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.lp-bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.lp-bg-layer--off {
  background-image: url('../photos/store/store-night-off.jpg?v=4.0');
  opacity: 1;
  z-index: 1;
}

.lp-bg-layer--on {
  background-image: url('../photos/store/store-night-on.jpg?v=4.0');
  opacity: 0;
  z-index: 2;
  transition: opacity 0.48s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
}

.lp-root.is-lit .lp-bg-layer--on {
  opacity: 1;
}

.lp-root:not(.is-lit) .lp-bg-layer--on {
  opacity: 0;
  transition: opacity 0.28s ease-out;
}

/* Atmospheric Scrim & Vignette over the Store Scene */
.lp-bg-scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle at var(--lamp-x, 24vw) 28%, rgba(8, 7, 5, 0.12) 0%, rgba(6, 5, 4, 0.42) 75%, rgba(4, 3, 2, 0.65) 100%);
  transition: background 0.7s ease;
}

.lp-root.is-lit .lp-bg-scrim {
  background: radial-gradient(circle at var(--lamp-x, 24vw) 28%, rgba(8, 7, 5, 0.08) 0%, rgba(6, 5, 4, 0.32) 75%, rgba(4, 3, 2, 0.55) 100%);
}

/* Atmospheric Lighting Layers */
.lp-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--lamp-x, 24vw) 24%, rgba(0,0,0,0), rgba(0, 0, 0, 0.58) 80%);
}

.lp-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease;
  background: radial-gradient(circle at var(--lamp-x, 24vw) 20%, 
    rgba(255, 210, 130, 0.14) 0%, 
    rgba(255, 185, 95, 0.06) 38%, 
    rgba(255, 165, 70, 0.015) 65%, 
    transparent 85%);
}

.lp-glow {
  position: absolute;
  left: var(--lamp-x, 24vw);
  top: 171px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.65);
  transform-origin: center;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  background: radial-gradient(circle at center, 
    rgba(255, 220, 145, 0.28) 0%, 
    rgba(255, 195, 110, 0.12) 30%, 
    rgba(255, 170, 80, 0.03) 55%, 
    transparent 75%);
}

.lp-motes {
  position: absolute;
  left: var(--lamp-x, 24vw);
  top: 171px;
  width: 540px;
  height: 420px;
  transform: translate(-50%);
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  transition: opacity 1s ease;
}

.lp-mote {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 238, 205, 0.85);
  box-shadow: 0 0 6px rgba(255, 214, 150, 0.7);
}

/* Ceiling Mount & Lamp Fixture */
.lp-mount {
  position: absolute;
  left: var(--lamp-x, 24vw);
  top: 0;
  transform: translate(-50%);
  width: 58px;
  height: 9px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(#2c261f, #1a1611);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
  z-index: 4;
}

.lp-sway {
  position: absolute;
  top: 0;
  left: var(--lamp-x, 24vw);
  width: 0;
  height: 0;
  transform-origin: top center;
  z-index: 6;
  will-change: transform;
}

.lp-tilt {
  transform-origin: top center;
  will-change: transform;
}

.lp-flex {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%);
  width: 3px;
  height: 96px;
  background: linear-gradient(#241f18, #3a332a);
}

.lp-socket {
  position: absolute;
  left: 50%;
  top: 96px;
  transform: translate(-50%);
  width: 30px;
  height: 18px;
  border-radius: 5px 5px 3px 3px;
  background: repeating-linear-gradient(#8a7d68, #8a7d68 2px, #6a5f4c 2px 4px);
  box-shadow: inset 0 -3px 4px rgba(0, 0, 0, 0.35);
}

.lp-glass {
  position: absolute;
  left: 50%;
  top: 112px;
  transform: translate(-50%);
  width: 112px;
  height: 118px;
  border-radius: 50% 50% 48% 48% / 58% 58% 42% 42%;
  background: radial-gradient(circle at 40% 34%, #7d7361, #5c5343 70%, #4c4435);
  box-shadow: inset -6px -8px 16px rgba(0, 0, 0, 0.4), inset 4px 6px 10px rgba(255, 255, 255, 0.05);
  transition: background 0.6s ease, box-shadow 0.8s ease;
  overflow: hidden;
  cursor: pointer;
}

.lp-highlight {
  position: absolute;
  left: 18px;
  top: 14px;
  width: 34px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  filter: blur(5px);
}

.lp-eye {
  position: absolute;
  top: 46px;
  width: 16px;
  height: 5px;
  border-radius: 4px;
  background: #46402f;
  transition: all 0.4s ease;
}

.lp-eye--l { left: 25px; }
.lp-eye--r { left: 71px; }

.lp-pupil {
  position: absolute;
  top: 2px;
  right: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.15s ease-out;
}

.lp-cheek {
  position: absolute;
  top: 64px;
  width: 17px;
  height: 9px;
  border-radius: 50%;
  background: #ff8f63;
  filter: blur(2px);
  opacity: 0;
  transition: opacity 0.45s ease;
}

.lp-cheek--l { left: 16px; }
.lp-cheek--r { left: 79px; }

.lp-mouth {
  position: absolute;
  left: 50%;
  top: 70px;
  transform: translate(-50%);
  width: 12px;
  height: 3px;
  border-radius: 3px;
  background: #46402f;
  transition: all 0.4s ease;
}

.lp-zzz {
  position: absolute;
  left: 50%;
  margin-left: 48px;
  top: 120px;
  color: #a99c84;
  font-family: 'Fredoka', cursive, sans-serif;
  font-weight: 600;
  opacity: 0.85;
  transition: opacity 0.5s ease;
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
}

.lp-zzz span {
  font-size: 11px;
  margin-left: 1px;
}

/* Elastic Pull Cord SVG - Explicit Dimensions to Override Global Icon Sizing */
.lp-cord {
  position: absolute;
  left: 50%;
  top: 228px;
  transform: translate(-50%);
  width: 200px !important;
  height: 440px !important;
  overflow: visible;
  z-index: 5;
  pointer-events: none;
  touch-action: none;
}

.lp-cord__line {
  fill: none !important;
  stroke: #c4b087 !important;
  stroke-width: 2px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.lp-cord__mount {
  fill: #3a2e1d !important;
  stroke: none !important;
}

.lp-bead {
  cursor: grab;
  pointer-events: auto;
  outline: none;
}

.lp-bead.grabbing {
  cursor: grabbing;
}

.lp-cord__hit {
  fill: transparent !important;
  stroke: none !important;
  pointer-events: all;
}

.lp-cord__bead {
  fill: url(#lp-beadgrad) !important;
  stroke: rgba(255, 255, 255, 0.25) !important;
  stroke-width: 1px !important;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.65));
  transform-box: fill-box;
  transform-origin: center;
}

.lp-cord__beadhi {
  fill: rgba(255, 255, 255, 0.7) !important;
  stroke: none !important;
  pointer-events: none;
}

.lp-bead:focus-visible .lp-cord__bead {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 6px rgba(242, 182, 92, 0.95));
}

.lp-cord__bead.pop {
  animation: lp-knobpop 0.22s ease;
}

.lp-hint {
  position: absolute;
  left: 50%;
  top: 316px;
  transform: translate(-50%);
  width: 50px;
  text-align: center;
  color: #a89a80;
  font-size: 11.5px;
  font-family: 'Nunito', sans-serif;
  animation: lp-bob 1.5s ease-in-out infinite;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lp-hint__arrow {
  font-size: 16px;
  line-height: 1;
}

.lp-hint__txt {
  margin-top: 2px;
  letter-spacing: 0.6px;
  font-weight: 700;
}

/* ========================================================
   Lumen Illuminated Login Card
   ======================================================== */

/* Smooth theme switching without screen-covering overlays */
body, .topbar, .rail, .card, .panel, .tray, .tile {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.15s ease;
}

.theme-ico {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme-toggle]:hover .theme-ico {
  transform: rotate(15deg);
}

.lp-formwrap {
  position: absolute;
  right: clamp(24px, 4.5vw, 68px);
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  width: min(840px, 58vw);
  max-width: 840px;
  opacity: 1;
  pointer-events: auto !important;
  z-index: 5;
  clip-path: none;
  transition: clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s ease 0.12s;
  padding-bottom: 0;
  box-sizing: border-box;
}

.auth-overlay.is-active .lp-formwrap,
.auth-overlay.is-active .lp-card,
.auth-overlay.is-active .lp-card-main,
.auth-overlay.is-active .lp-auth-stage,
.auth-overlay.is-active .lp-social-btn,
.auth-overlay.is-active #btn-auth-google,
.auth-overlay.is-active input,
.auth-overlay.is-active button {
  pointer-events: auto !important;
}

.lp-card.auth-card {
  position: relative;
  background: #ffffff;
  border-radius: clamp(24px, 2.5vw, 36px);
  padding: clamp(14px, 1.4vw, 20px);
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: clamp(16px, 1.8vw, 24px);
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: #0f172a;
  overflow: hidden;
  max-height: min(94vh, 760px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.6s ease;
}

/* When Lamp is Lit: Gentle, eye-friendly warm ambient depth without harsh glare */
.lp-root.is-lit .lp-card.auth-card {
  border-color: rgba(255, 240, 210, 0.6);
  border-top-color: rgba(255, 245, 225, 0.75);
  border-left-color: rgba(255, 240, 215, 0.65);
  box-shadow: 
    0 24px 60px rgba(0, 0, 0, 0.42),
    -6px -6px 30px rgba(255, 205, 120, 0.16),
    0 0 45px rgba(255, 185, 90, 0.1);
}

/* Very subtle warm light wash across white card surface */
.lp-card.auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse 95% 75% at 8% 8%, 
    rgba(255, 230, 175, 0.08) 0%, 
    rgba(255, 210, 140, 0.02) 45%, 
    transparent 70%);
  opacity: 0;
  transition: opacity 0.7s ease;
}

.lp-root.is-lit .lp-card.auth-card::before {
  opacity: 1;
}

.lp-card-main {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

.lp-card-main::-webkit-scrollbar {
  width: 5px;
}

.lp-card-main::-webkit-scrollbar-track {
  background: transparent;
}

.lp-card-main::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 9999px;
}

.lp-card [data-stagger] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Left Column: Visual Image Panel (Recommended 800 x 1060 px) */
.lp-card-visual {
  position: relative;
  border-radius: clamp(18px, 1.8vw, 26px);
  overflow: hidden;
  background: #0f121a;
  min-height: clamp(380px, 54vh, 520px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(16px, 1.6vw, 24px);
}

.lp-card-visual__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.lp-card-visual:hover .lp-card-visual__img {
  transform: scale(1.03);
}

.lp-card-visual__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 72%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}

/* Warm overhead light catch on visual image */
.lp-card-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse at 15% 10%, 
    rgba(255, 225, 150, 0.22) 0%, 
    rgba(255, 190, 95, 0.08) 45%, 
    transparent 75%);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.lp-root.is-lit .lp-card-visual::after {
  opacity: 1;
}

.lp-card-visual__badge {
  position: relative;
  z-index: 2;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.lp-card-visual__logo {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}

.lp-card-visual__name {
  color: #ffffff;
  font-family: 'Fredoka', cursive, sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.lp-card-visual__caption {
  position: relative;
  z-index: 2;
}

.lp-card-visual__tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* Right Column: Content & Form Panel */
.lp-card-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(6px, 1vh, 12px) clamp(10px, 1.4vw, 22px) clamp(6px, 1vh, 12px) clamp(2px, 0.5vw, 6px);
  min-width: 0;
}

.lp-card-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(8px, 1.2vh, 14px);
}

.lp-back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.lp-back-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
  transform: translateX(-2px);
}

.lp-back-btn svg {
  width: 17px;
  height: 17px;
}

.lp-terminal-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 9999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 11.5px;
  font-weight: 600;
}

.lp-terminal-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

.lp-card-header {
  margin-bottom: clamp(8px, 1.4vh, 18px);
}

.lp-card-title {
  margin: 0 0 4px;
  font-size: clamp(24px, 2.2vw, 28px);
  font-weight: 800;
  letter-spacing: -0.6px;
  color: #0f172a;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.lp-card-sub {
  margin: 0;
  font-size: 13px;
  color: #64748b;
}

.lp-link-action {
  border: none;
  background: transparent;
  padding: 0;
  color: #0f172a;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.lp-link-action:hover {
  color: #f97316;
}

/* Pill Form Inputs */
.lp-split-form {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vh, 13px);
}

.lp-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lp-pill-label {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  letter-spacing: -0.1px;
}

.lp-pill-input-box {
  position: relative;
  display: flex;
  align-items: center;
}

.lp-pill-input {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  color: #0f172a;
  font-size: 13.5px;
  padding: 0 14px;
  outline: none;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  transition: all 0.15s ease;
}

.lp-pill-input::placeholder {
  color: #94a3b8;
}

.lp-pill-input:focus {
  border-color: #0f172a;
  background: #ffffff;
  box-shadow: 0 0 0 3.5px rgba(15, 23, 42, 0.08);
}

.lp-pill-input--pw {
  padding-right: 48px;
}

.lp-eye-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.lp-eye-btn:hover {
  color: #0f172a;
}

.lp-eye-btn svg {
  width: 19px;
  height: 19px;
}

.lp-forgot-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
}

.lp-forgot-btn {
  border: none;
  background: transparent;
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease;
}

.lp-forgot-btn:hover {
  color: #f97316;
}

/* Primary Button - Modern Fintech / POS Standard */
.lp-submit-btn {
  height: 46px;
  border-radius: 12px;
  background: #0f172a;
  color: #ffffff;
  border: none;
  font-size: 13.5px;
  font-weight: 750;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15);
  margin-top: 2px;
}

.lp-submit-btn:hover {
  background: #1e293b;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.24);
}

.lp-submit-btn:active {
  transform: translateY(1px) scale(0.99);
}

/* Terms Checkbox */
.lp-terms-box {
  margin: 2px 0;
}

.lp-checkbox-wrap {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
}

.lp-checkbox-wrap input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.lp-check-box {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1.5px solid #0f172a;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.lp-check-box svg {
  width: 12px;
  height: 12px;
  stroke: #ffffff;
  display: none;
}

.lp-checkbox-wrap input:checked ~ .lp-check-box {
  background: #000000;
  border-color: #000000;
}

.lp-checkbox-wrap input:checked ~ .lp-check-box svg {
  display: block;
}

.lp-terms-txt {
  font-size: 12.5px;
  color: #475569;
}

.lp-terms-link {
  color: #0f172a;
  font-weight: 700;
  text-decoration: underline;
}

/* Center Divider */
.lp-auth-divider {
  display: flex;
  align-items: center;
  margin: 4px 0;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
}

.lp-auth-divider::before,
.lp-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

.lp-auth-divider span {
  padding: 0 12px;
}

/* Social Login Buttons */
.lp-social-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.lp-social-btn {
  height: 44px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  font-size: 13px;
  font-weight: 650;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.lp-social-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.auth-config-gear {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.auth-config-gear:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
  transform: translateY(-1px);
}

.auth-config-gear svg {
  width: 17px !important;
  height: 17px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}

/* Ensure Real Brand Icons have no outline strokes and preserve their authentic vibrant colors */
.lp-social-btn svg,
svg.lp-social-icon,
svg.brand-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  stroke: none !important;
  stroke-width: 0 !important;
  fill: none;
  overflow: visible;
  flex: none;
}

.lp-social-btn svg *,
svg.lp-social-icon *,
svg.brand-icon * {
  stroke: none !important;
  stroke-width: 0 !important;
}

.lp-google-icon path[fill="#4285F4"] { fill: #4285F4 !important; }
.lp-google-icon path[fill="#34A853"] { fill: #34A853 !important; }
.lp-google-icon path[fill="#FBBC05"] { fill: #FBBC05 !important; }
.lp-google-icon path[fill="#EA4335"] { fill: #EA4335 !important; }

.lp-facebook-icon path[fill="#1877F2"] { fill: #1877F2 !important; }
.lp-facebook-icon path[fill="#ffffff"] { fill: #ffffff !important; }

/* Quick PIN Keypad Styles inside New Split Card */
.lp-pin-well {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-pin-well .pin-display-box {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 44px;
  border-radius: 12px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.lp-pin-well .pin-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: transparent;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lp-pin-well .pin-dot.is-filled {
  background: #0f172a;
  border-color: #0f172a;
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
}

/* Keypad Grid & Buttons - Fintech/Square Terminal Standard */
.auth-keypad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.keypad-btn {
  height: 50px;
  border-radius: 13px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  color: #0f172a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  transition: all 0.12s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  -webkit-tap-highlight-color: transparent;
}

.keypad-btn:hover {
  border-color: #cbd5e1;
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.06);
}

.keypad-btn:active {
  transform: scale(0.95);
  background: #f1f5f9;
  border-color: #94a3b8;
  box-shadow: none;
}

.keypad-btn__num {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 1.3rem;
  font-weight: 750;
  line-height: 1;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.keypad-btn__sub {
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.12em;
  color: #94a3b8;
  line-height: 1;
  text-transform: uppercase;
}

.keypad-btn--fn {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #64748b;
}

.keypad-btn--fn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.keypad-btn__fn-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #64748b;
}

.auth-err-msg {
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-err-msg[hidden] {
  display: none !important;
}

.auth-quick-users {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 6px;
}

.auth-user-chip {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.auth-user-chip:hover {
  border-color: #cbd5e1;
  background: #e2e8f0;
  color: #0f172a;
  transform: translateY(-1px);
}

/* Responsive Scaling for Small Screens */
@media (max-width: 880px) {
  .auth-overlay.lp-root {
    --lamp-x: 50%;
  }
  .lp-formwrap {
    position: relative;
    right: auto;
    left: auto;
    top: auto;
    transform: none;
    margin: 320px auto 40px;
    width: min(520px, 92vw);
    clip-path: circle(0px at 50% -120px);
    padding-bottom: 60px;
  }
  .lp-card.auth-card {
    grid-template-columns: 1fr;
    max-width: 480px;
    max-height: none;
    margin: 0 auto;
  }
  .lp-root.is-lit .lp-card.auth-card {
    box-shadow: 
      0 24px 60px rgba(0, 0, 0, 0.42),
      0 -6px 25px rgba(255, 205, 120, 0.15),
      0 0 40px rgba(255, 185, 85, 0.08);
  }
  .lp-card-visual {
    min-height: 200px;
    height: 200px;
  }
  .lp-social-row {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 640px) and (min-width: 881px) {
  .lp-card.auth-card {
    max-height: 94vh;
  }
  .lp-card-visual {
    min-height: 340px;
  }
  .lp-card-header {
    margin-bottom: 6px;
  }
  .lp-split-form {
    gap: 6px;
  }
}

.lp-mute {
  position: fixed;
  right: 18px;
  bottom: 16px;
  z-index: 10;
  border: 1px solid rgba(255, 220, 170, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: #8c8069;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lp-mute:hover {
  color: #cdbfa4;
  border-color: rgba(255, 220, 170, 0.35);
}

.is-shaking {
  animation: gateShake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes gateShake {
  10%, 90% { transform: translate3d(-3px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-5px, 0, 0); }
  40%, 60% { transform: translate3d(5px, 0, 0); }
}

/* Manager Pincode Gate Modal Styles */
.dlg--gate {
  width: min(400px, 100vw - 32px);
}

.security-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 750;
  background: var(--warn-bg);
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  margin-bottom: 8px;
}

.security-badge-pill svg {
  width: 14px;
  height: 14px;
}

/* Header User Pill & Dropdown */
.user-pill-wrap {
  position: relative;
  z-index: 100000 !important;
}

.user-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  background: var(--card);
  border: 1px solid var(--hair-strong);
  border-radius: 24px;
  transition: all 0.18s ease;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 100001 !important;
  user-select: none;
}

.user-pill * {
  pointer-events: none !important;
}

.user-pill:hover {
  border-color: var(--ring);
  box-shadow: var(--shadow-card);
}

.user-pill .avatar--me {
  width: 30px;
  height: 30px;
  font-size: 12px;
  border-radius: 50%;
  background: var(--night);
  color: var(--on-night);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.user-pill__info {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.15;
}

.user-pill__name {
  font-size: var(--fs-xs);
  font-weight: 750;
  color: var(--ink);
}

.user-pill__role {
  font-size: 10px;
  font-weight: 700;
  color: var(--a-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 200px;
  background: var(--card);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 100005 !important;
  pointer-events: auto !important;
  animation: authCardEnter 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.user-dropdown[hidden] {
  display: none !important;
  pointer-events: none !important;
}

.user-dropdown__head {
  padding: 8px 10px;
  border-bottom: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-dropdown__badge {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--a-text);
}

.user-dropdown__user {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink);
}

.user-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
  transition: all 0.15s ease;
  width: 100%;
}

.user-dropdown__item svg {
  width: 16px;
  height: 16px;
}

.user-dropdown__item:hover {
  background: var(--panel);
  color: var(--ink);
}

.user-dropdown__item--danger:hover {
  background: var(--bad-bg);
  color: var(--bad);
}

/* ========================================================
   Phase 2: Customers & Khata Ledger Styles (Ledge Pattern)
   ======================================================== */

.cust-bento {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--gap);
  margin-bottom: var(--gap);
}

@media (width <= 900px) {
  .cust-bento {
    grid-template-columns: 1fr;
  }
}

.cust-bento__hero {
  background: var(--night);
  color: var(--on-night);
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(16px, 1.8vw, 24px);
  min-height: 140px;
}

.cust-bento__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--a-block);
}

:root[data-theme=dark] .cust-bento__badge {
  color: var(--a-deep);
}

.cust-bento__badge svg {
  width: 14px;
  height: 14px;
}

.cust-bento__val {
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 8px 0 4px;
}

.cust-bento__sub {
  font-size: var(--fs-xs);
  color: var(--on-night-muted);
}

.cust-bento__card {
  padding: clamp(16px, 1.8vw, 24px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cust-bento__hint {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.cust-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--gap);
  flex-wrap: wrap;
}

.cust-filter-bar .search-wrap {
  position: relative;
  flex: 1;
  min-width: 260px;
  max-width: 440px;
}

.cust-filter-bar .search-wrap svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  pointer-events: none;
}

.cust-filter-bar .search-wrap input {
  width: 100%;
  height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hair-strong);
  background: var(--card);
  color: var(--ink);
  padding: 0 14px 0 38px;
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: all 0.15s ease;
}

.cust-filter-bar .search-wrap input:focus {
  border-color: var(--ring);
  box-shadow: var(--focus);
}

.cust-pills {
  display: flex;
  gap: 6px;
}

.cust-table-card {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--hair);
}

.cust-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.cust-table th {
  padding: 12px 18px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
  border-bottom: 1px solid var(--hair);
  background: var(--panel);
}

.cust-table td {
  padding: 14px 18px;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--hair);
  vertical-align: middle;
}

.cust-table tbody tr {
  transition: background 0.15s ease;
}

.cust-table tbody tr:hover {
  background: color-mix(in srgb, var(--card) 90%, var(--panel));
}

.cust-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cust-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--hair-strong);
  color: var(--ink);
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.cust-name-wrap {
  display: flex;
  flex-direction: column;
}

.cust-full-name {
  font-weight: 750;
  color: var(--ink);
}

.cust-meta {
  font-size: 11px;
  color: var(--muted);
}

.cust-badge-debt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  background: var(--bad-bg);
  color: var(--bad);
  border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent);
}

.cust-badge-zero {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 750;
  background: var(--good-bg);
  color: var(--good);
  border: 1px solid color-mix(in srgb, var(--good) 30%, transparent);
}

.cust-actions-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

/* ========================================================
   Phase 3: Shop & Admin Expenses Tracking (Ledge Pattern)
   ======================================================== */

.exp-bento {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--gap);
  margin-bottom: var(--gap);
}

@media (width <= 900px) {
  .exp-bento {
    grid-template-columns: 1fr;
  }
}

.exp-bento__hero {
  background: var(--night);
  color: var(--on-night);
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(16px, 1.8vw, 24px);
  min-height: 140px;
}

.exp-bento__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--a-block);
}

:root[data-theme=dark] .exp-bento__badge {
  color: var(--a-deep);
}

.exp-bento__badge svg {
  width: 14px;
  height: 14px;
}

.exp-bento__val {
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 8px 0 4px;
}

.exp-bento__sub {
  font-size: var(--fs-xs);
  color: var(--on-night-muted);
}

.exp-bento__card {
  padding: clamp(16px, 1.8vw, 24px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.exp-bento__hint {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.exp-sub-tabs {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  padding: 4px;
  display: inline-flex;
  gap: 4px;
  margin-bottom: var(--gap);
}

.exp-tab-btn {
  padding: 6px 14px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
  transition: all 0.18s ease;
}

.exp-tab-btn.is-active {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-card);
}

.exp-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--gap);
  flex-wrap: wrap;
}

.exp-filter-bar .search-wrap {
  position: relative;
  flex: 1;
  min-width: 240px;
  max-width: 400px;
}

.exp-filter-bar .search-wrap svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  pointer-events: none;
}

.exp-filter-bar .search-wrap input {
  width: 100%;
  height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hair-strong);
  background: var(--card);
  color: var(--ink);
  padding: 0 14px 0 38px;
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: all 0.15s ease;
}

.exp-filter-bar .search-wrap input:focus {
  border-color: var(--ring);
  box-shadow: var(--focus);
}

.exp-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.exp-table-card {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--hair);
}

.exp-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.exp-table th {
  padding: 12px 18px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
  border-bottom: 1px solid var(--hair);
  background: var(--panel);
}

.exp-table td {
  padding: 14px 18px;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--hair);
  vertical-align: middle;
}

.exp-table tbody tr {
  transition: background 0.15s ease;
}

.exp-table tbody tr:hover {
  background: color-mix(in srgb, var(--card) 90%, var(--panel));
}

.exp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 750;
  border: 1px solid transparent;
}

.exp-badge--util {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 30%, transparent);
}

.exp-badge--refresh {
  background: var(--good-bg);
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 30%, transparent);
}

.exp-badge--maint {
  background: var(--bad-bg);
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 30%, transparent);
}

.exp-badge--admin {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--hair-strong);
}

/* ========================================================
   Phase 4: Enhanced Shift Reconciliation & Denominations
   ======================================================== */

.shift-bento {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--gap);
  margin-bottom: var(--gap);
}

@media (width <= 900px) {
  .shift-bento {
    grid-template-columns: 1fr;
  }
}

.shift-bento__hero {
  background: var(--night);
  color: var(--on-night);
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(16px, 1.8vw, 24px);
  min-height: 140px;
}

.shift-bento__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--a-block);
}

:root[data-theme=dark] .shift-bento__badge {
  color: var(--a-deep);
}

.shift-bento__badge svg {
  width: 14px;
  height: 14px;
}

.shift-bento__val {
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 8px 0 4px;
}

.shift-bento__sub {
  font-size: var(--fs-xs);
  color: var(--on-night-muted);
}

.shift-bento__card {
  padding: clamp(16px, 1.8vw, 24px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.shift-bento__hint {
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* Denomination Calculator Drawer Inset Well */
.denom-well {
  background: var(--panel);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-md);
  padding: 14px;
  margin: 12px 0;
}

.denom-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.denom-title {
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.denom-total-badge {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  background: var(--card);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hair);
}

.denom-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

@media (width <= 640px) {
  .denom-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.denom-item {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.15s ease;
}

.denom-item:focus-within {
  border-color: var(--ring);
}

.denom-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.denom-input {
  width: 100%;
  height: 32px;
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-xs);
  background: var(--panel);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  padding: 0 6px;
}

.denom-subtotal {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  margin-top: 2px;
}

/* Variance Badges */
.variance-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 750;
  border: 1px solid transparent;
}

.variance-badge--balanced {
  background: var(--good-bg);
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 30%, transparent);
}

.variance-badge--over {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 30%, transparent);
}

.variance-badge--short {
  background: var(--bad-bg);
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 30%, transparent);
}

/* Blind Close Masked Well */
.blind-mask-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.blind-mask-text {
  letter-spacing: 0.15em;
  font-weight: 800;
  color: var(--muted);
}

.btn-reveal-mask {
  background: var(--panel);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-sm);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-reveal-mask:hover {
  background: var(--card);
}

/* Z-Report Thermal Receipt Preview */
.z-receipt {
  background: var(--card);
  border: 1px dashed var(--hair-strong);
  border-radius: var(--r-md);
  padding: 20px;
  max-width: 380px;
  margin: 0 auto 16px;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}

.z-receipt__logo {
  text-align: center;
  margin-bottom: 8px;
}

.z-receipt__title {
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.z-receipt__sub {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 12px;
}

.z-receipt__divider {
  border: none;
  border-top: 1px dashed var(--hair-strong);
  margin: 10px 0;
}

.z-receipt__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
}

.z-receipt__row b {
  font-weight: 750;
}

.z-receipt__hero-row {
  background: var(--panel);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  margin: 6px 0;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 800;
}

/* Overview Dashboard Height Balancing & Category Legend Containment */
.ov-sales {
  display: flex;
  flex-direction: column;
}

.ov-sales .chart--area {
  height: clamp(220px, 17vw, 280px);
  max-height: 280px;
}

.ov-mix {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ov-mix .mix {
  gap: 16px;
}

.mix__legend {
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--hair-strong) transparent;
  padding-right: 4px;
}

.mix__legend::-webkit-scrollbar {
  width: 4px;
}

.mix__legend::-webkit-scrollbar-thumb {
  background: var(--hair-strong);
  border-radius: 4px;
}

/* ============================================================
   Register View Enhancements: Density Modes & Top Items Option
   ============================================================ */
.reg__shelf {
  padding-top: 14px;
}

/* Top Items Pill & Button */
.btn--top-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 12.5px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  transition: all 0.18s ease;
}

.btn--top-pick svg {
  width: 15px;
  height: 15px;
  color: var(--warn);
}

.btn--top-pick.is-active,
.btn--top-pick.btn--block-accent {
  background: var(--a-block) !important;
  color: var(--on-block) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px var(--a-glow);
}

.seg__btn--top {
  font-weight: 750 !important;
}

.seg__btn--top svg {
  width: 13px;
  height: 13px;
  display: inline-block;
  vertical-align: -1px;
  margin-right: 4px;
  color: var(--warn);
}

/* Grid Density Switcher (Large, Mid, Small) */
.density-seg {
  display: inline-flex;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-sm);
  padding: 2px;
  gap: 2px;
  height: 36px;
}

.density-seg .seg__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 9px;
  border-radius: calc(var(--r-sm) - 2px);
  font-size: 11.5px;
  font-weight: 750;
  color: var(--muted);
  transition: all 0.15s ease;
  cursor: pointer;
  border: none;
  background: transparent;
}

.density-seg .seg__btn svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.8px;
  stroke: currentColor;
}

.density-seg .seg__btn:hover {
  color: var(--ink);
}

.density-seg .seg__btn.is-active,
.density-seg .seg__btn[aria-pressed="true"] {
  background: var(--card);
  color: var(--ink) !important;
  border: 1px solid var(--hair-strong);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

:root[data-theme="dark"] .density-seg .seg__btn.is-active,
:root[data-theme="dark"] .density-seg .seg__btn[aria-pressed="true"] {
  background: #252930;
  border: 1px solid var(--hair-strong);
  color: var(--ink) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* --- Density Variant 1: Large (Default) --- */
.tiles[data-density="lg"],
.tiles:not([data-density]) {
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 12vw, 200px), 1fr));
}

/* --- Density Variant 2: Medium --- */
.tiles[data-density="md"] {
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.tiles[data-density="md"] .tile {
  padding: 8px 7px;
  border-radius: var(--r-md);
}

.tiles[data-density="md"] .tile__plate {
  aspect-ratio: 1.15;
  border-radius: 10px;
}

.tiles[data-density="md"] .tile__plate img {
  width: 78%;
  height: 78%;
}

.tiles[data-density="md"] .tile__body {
  padding: 6px 2px 2px;
  gap: 1px;
}

.tiles[data-density="md"] .tile__name {
  font-size: 12.5px;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tiles[data-density="md"] .tile__variant {
  display: none;
}

.tiles[data-density="md"] .tile__foot {
  margin-top: 4px;
}

.tiles[data-density="md"] .tile__price {
  font-size: 13px;
}

.tiles[data-density="md"] .tile__left {
  font-size: 11px;
}

.tiles[data-density="md"] .tile__plus {
  width: 28px;
  height: 28px;
  top: 10px;
  right: 10px;
}

.tiles[data-density="md"] .tile__plus svg {
  width: 15px;
  height: 15px;
}

/* --- Density Variant 3: Small (Ultra-Compact for Rapid POS) --- */
.tiles[data-density="sm"] {
  gap: 7px;
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
}

.tiles[data-density="sm"] .tile {
  padding: 6px 5px;
  border-radius: var(--r-sm);
}

.tiles[data-density="sm"] .tile__plate {
  aspect-ratio: 1.25;
  border-radius: 8px;
}

.tiles[data-density="sm"] .tile__plate img {
  width: 70%;
  height: 70%;
}

.tiles[data-density="sm"] .tile__body {
  padding: 4px 2px 1px;
  gap: 1px;
}

.tiles[data-density="sm"] .tile__name {
  font-size: 11.5px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
}

.tiles[data-density="sm"] .tile__variant {
  display: none;
}

.tiles[data-density="sm"] .tile__foot {
  margin-top: 2px;
}

.tiles[data-density="sm"] .tile__price {
  font-size: 12px;
}

.tiles[data-density="sm"] .tile__left {
  font-size: 10px;
}

.tiles[data-density="sm"] .tile__plus {
  width: 24px;
  height: 24px;
  top: 7px;
  right: 7px;
}

.tiles[data-density="sm"] .tile__plus svg {
  width: 13px;
  height: 13px;
}

/* ========================================================
   Shift Button: Pure Ledge Design System (Visible Across Views)
   ======================================================== */
[data-shift-btn],
#btn-shift-status {
  display: inline-flex !important;
}

.shift-btn {
  height: 44px !important;
  font-size: var(--fs-sm) !important;
  font-weight: 700 !important;
  padding: 0 18px !important;
  border-radius: 99px !important;
  border: 1px solid var(--hair-strong) !important;
  background: var(--card) !important;
  color: var(--ink) !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
  box-shadow: none !important;
  outline: none !important;
  user-select: none !important;
  white-space: nowrap !important;
}

.shift-btn:hover {
  background: var(--panel) !important;
  border-color: var(--muted) !important;
}

/* Closed Shift State (subtle muted text, matching Ledge card buttons) */
.shift-btn.shift-pill--closed {
  color: var(--muted) !important;
}

.shift-btn.shift-pill--closed:hover {
  color: var(--ink) !important;
}

/* Open Shift State (clean standard card surface with solid ink text) */
.shift-btn.shift-pill--open {
  color: var(--ink) !important;
  background: var(--card) !important;
  border-color: var(--hair-strong) !important;
}

/* ========================================================
   POS Mandatory Shift Enforcement Styles
   ======================================================== */
.btn--charge.btn--charge-shift-locked {
  background: var(--night) !important;
  color: var(--on-night) !important;
  border: 1px solid var(--hair-strong) !important;
  cursor: pointer !important;
  opacity: 0.95 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}

.btn--charge.btn--charge-shift-locked:hover {
  background: var(--night-2) !important;
  opacity: 1 !important;
  transform: translateY(-1px);
}

.reg__shelf.is-shift-locked .shift-banner {
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn-bg) 30%, var(--card));
  box-shadow: 0 4px 16px -4px rgba(162, 74, 8, 0.15);
}

/* ========================================================
   Ledge Purchasing: Suppliers Directory & Search Optimization
   ======================================================== */
.po-suppliers {
  display: flex;
  flex-direction: column;
}

.po-suppliers__search-wrap {
  margin-bottom: 12px;
}

.po-suppliers__search-wrap .mini-search {
  width: 100%;
  flex: 1;
}

.po-suppliers__search-wrap .mini-search input {
  width: 100%;
}

.suppliers {
  gap: 8px;
  display: flex;
  flex-direction: column;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--hair-strong) transparent;
}

.suppliers::-webkit-scrollbar {
  width: 5px;
}

.suppliers::-webkit-scrollbar-track {
  background: transparent;
}

.suppliers::-webkit-scrollbar-thumb {
  background: var(--hair-strong);
  border-radius: 99px;
}

.supplier {
  grid-template-rows: auto !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  display: grid !important;
  padding: 8px 10px !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--hair) !important;
  background: var(--card) !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}

.supplier:hover {
  background: var(--panel) !important;
  border-color: var(--hair-strong) !important;
}

.supplier .avatar {
  grid-row: auto !important;
}

/* Eliminate horizontal progress line track under suppliers */
.supplier__track,
.supplier__fill {
  display: none !important;
}

/* ========================================================
   Ledge Orders & Purchase Orders: Smart Pagination & Containment
   ======================================================== */
.table-wrap {
  position: relative;
  overflow-x: auto;
  max-height: calc(100vh - 360px);
  min-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--hair-strong) transparent;
}

.table-wrap::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.table-wrap::-webkit-scrollbar-thumb {
  background: var(--hair-strong);
  border-radius: 99px;
}

.table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card);
}

.po-main .toolbar--bare {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.po-main .toolbar--bare .mini-search {
  margin-left: auto;
  flex: 0 1 260px;
}

.po-main .stock-pagination {
  margin-top: 14px;
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
}

/* ======================================================== */
/* Senior Designer Product Placeholder Icon (Zero Bowls)   */
/* ======================================================== */
.tile__plate--fallback {
  background: var(--panel) !important;
  border: 1px solid var(--hair);
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

:root[data-theme=dark] .tile__plate--fallback {
  background: #171a1f !important;
  border-color: rgba(255, 255, 255, 0.08);
}

.tile:hover .tile__plate--fallback {
  background: color-mix(in srgb, var(--a-soft) 25%, var(--panel)) !important;
  border-color: var(--a-mark);
}

:root[data-theme=dark] .tile:hover .tile__plate--fallback {
  background: #1e222a !important;
  border-color: var(--a-block);
}

.tile__fallback-icon {
  width: 58px;
  height: 58px;
  color: var(--muted);
  opacity: 0.72;
  stroke: currentColor;
  stroke-width: 1.6px;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s ease, opacity 0.15s ease;
}

.tile:hover .tile__fallback-icon {
  transform: scale(1.12) translateY(-2px);
  color: var(--ink);
  opacity: 1;
}

:root[data-theme=dark] .tile__fallback-icon {
  color: #7b8390;
}

:root[data-theme=dark] .tile:hover .tile__fallback-icon {
  color: var(--a-block);
}

.tiles[data-density="md"] .tile__fallback-icon {
  width: 44px;
  height: 44px;
  stroke-width: 1.6px;
}

.tiles[data-density="sm"] .tile__fallback-icon {
  width: 32px;
  height: 32px;
  stroke-width: 1.5px;
}

.thumb--fallback {
  background: var(--panel) !important;
  border: 1px solid var(--hair);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--muted);
}

.thumb--fallback svg {
  width: calc(var(--s, 40px) * 0.52);
  height: calc(var(--s, 40px) * 0.52);
  stroke: currentColor;
  stroke-width: 1.7px;
}

/* ============================================================
   PACKSHOT PHOTO DROPZONE (RULE UI-1 Anti-Generic Standards)
   3-Tier Depth, Inset Well, Monospace Metrics, Spring Micro-Lifts
   ============================================================ */
.field--photo-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.field__hint-badge {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--panel);
  color: var(--faint);
  border: 1px solid var(--hair-strong);
}

.photo-dropzone {
  position: relative;
  background: var(--panel);
  border: 1.5px dashed var(--hair-strong);
  border-radius: var(--r-md);
  padding: 14px 16px;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.2s ease,
              background-color 0.2s ease,
              box-shadow 0.2s ease;
}

.photo-dropzone:hover {
  transform: translateY(-2px);
  border-color: var(--a-mark);
  background: color-mix(in srgb, var(--a-soft) 30%, var(--panel));
  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.08);
}

.photo-dropzone:focus-visible,
.photo-dropzone.is-dragover {
  border-color: var(--a-block);
  border-style: solid;
  background: color-mix(in srgb, var(--a-soft) 55%, var(--panel));
  box-shadow: 0 0 0 3px var(--a-glow);
}

/* Empty State */
.photo-dropzone__empty {
  display: flex;
  align-items: center;
  gap: 14px;
  user-select: none;
}

.photo-dropzone__icon-well {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--hair);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--muted);
  box-shadow: var(--shadow-card);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
}

.photo-dropzone:hover .photo-dropzone__icon-well {
  transform: scale(1.08);
  color: var(--a-text);
}

.photo-dropzone__icon-well svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8px;
}

.photo-dropzone__prompt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.photo-dropzone__title {
  font-size: var(--fs-sm);
  font-weight: 750;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.photo-dropzone__meta {
  font-size: var(--fs-xs);
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.photo-dropzone__meta b {
  color: var(--muted);
  font-weight: 700;
}

/* Preview State */
.photo-dropzone__preview {
  display: flex;
  align-items: center;
  gap: 14px;
  user-select: none;
}

.photo-dropzone__thumb-wrap {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--hair-strong);
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.photo-dropzone__thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.photo-dropzone__details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.photo-dropzone__filename {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.photo-dropzone__tags {
  display: flex;
  align-items: center;
  gap: 8px;
}

.photo-dropzone__status {
  font-size: 11.5px;
  color: var(--good);
  font-weight: 700;
}

.btn--remove-photo {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--hair-strong);
  color: var(--muted);
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
  background: var(--card);
  flex: none;
}

.btn--remove-photo:hover {
  background: var(--bad-bg);
  border-color: var(--bad);
  color: var(--bad);
  transform: scale(1.05);
}

.btn--remove-photo svg {
  width: 15px;
  height: 15px;
}

/* ============================================================
   REGISTER TILES PAGINATION (Zero Lag, Fast Page-wise System)
   ============================================================ */
.reg-pagination {
  background: var(--card) !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-card);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reg-pagination .stock-page-btn {
  border: 1px solid var(--hair-strong);
  background: var(--card);
  border-radius: 8px;
  min-width: 34px;
  height: 34px;
  color: var(--muted);
  font-family: var(--mono);
  font-weight: 700;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.15s ease,
              border-color 0.15s ease;
}

.reg-pagination .stock-page-btn:hover:not(:disabled) {
  background: var(--panel);
  border-color: var(--a-mark);
  color: var(--ink);
  transform: translateY(-1px);
}

.reg-pagination .stock-page-btn.is-active {
  background: var(--night) !important;
  color: var(--on-night) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

:root[data-theme=dark] .reg-pagination .stock-page-btn.is-active {
  background: var(--a-block) !important;
  color: var(--on-block) !important;
}

.reg-pagination .stock-page-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

.reg-pagination .stock-page-dots {
  color: var(--faint);
  font-weight: 800;
  padding: 0 4px;
  user-select: none;
}

@media (max-width: 768px) {
  .reg-pagination {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .reg-pagination .stock-page-nav {
    justify-content: center;
    overflow-x: auto;
    padding: 4px 0;
  }
}

/* ============================================================
   MULTI-TICKET / PARK & HOLD BILLS TABS (RULE UI-1 Standards)
   3-Tier Surface Stacking, Monospace Badge, Spring Micro-Lifts
   ============================================================ */
.ticket-tabs-wrapper {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  padding: 3px 4px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  min-width: 0;
  flex: none;
  height: 40px;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}

.ticket-tabs-bar {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  padding: 1px 0;
  -webkit-overflow-scrolling: touch;
  user-select: none;
}

.ticket-tabs-bar::-webkit-scrollbar {
  display: none;
}

.ticket-tab {
  display: inline-flex;
  align-items: center;
  position: relative;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--hair-strong);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.15s ease,
              border-color 0.15s ease,
              box-shadow 0.15s ease;
  flex: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 2px 4px 2px 5px;
  min-width: 46px;
  max-width: 80px;
  height: 32px;
  box-sizing: border-box;
}

.ticket-tab:hover:not(.is-active) {
  border-color: var(--a-mark);
  background: color-mix(in srgb, var(--a-soft) 40%, var(--card));
  transform: translateY(-1px);
}

.ticket-tab.is-active {
  background: var(--night) !important;
  color: var(--on-night) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

:root[data-theme=dark] .ticket-tab.is-active {
  background: var(--a-block) !important;
  color: var(--on-block) !important;
}

.ticket-tab__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  color: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  line-height: 1.1;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.ticket-tab__amount {
  font-size: 10px;
  font-weight: 800;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.ticket-tab__tag {
  font-size: 9px;
  font-weight: 700;
  opacity: 0.82;
  white-space: nowrap;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.ticket-tab__close {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  border-radius: 4px;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  background: transparent;
  border: none;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  flex: none;
}

.ticket-tab__close:hover {
  opacity: 1;
  color: var(--bad);
  background: color-mix(in srgb, var(--bad-bg) 70%, transparent);
}

.ticket-tab.is-active .ticket-tab__close:hover {
  color: #ff7878;
  background: rgba(255, 255, 255, 0.16);
}

:root[data-theme=dark] .ticket-tab.is-active .ticket-tab__close:hover {
  color: #991b1b;
  background: rgba(0, 0, 0, 0.16);
}

.ticket-tab__close svg {
  width: 11px;
  height: 11px;
  stroke-width: 2px;
}

/* Pinned + Bill Button */
.btn-new-ticket {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 42px;
  height: 32px;
  padding: 0 5px;
  border-radius: 8px;
  border: 1.5px dashed var(--hair-strong);
  background: var(--card);
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
  flex: none;
  transition: all 0.18s ease;
  box-sizing: border-box;
}

.btn-new-ticket:hover {
  border-color: var(--a-mark);
  color: var(--a-text);
  background: var(--a-soft);
  transform: translateY(-1px);
}

.btn-new-ticket svg {
  width: 10px;
  height: 10px;
  stroke-width: 2.4px;
}

/* Dynamic Scroll Navigation Chevrons */
.ticket-nav-btn {
  display: grid;
  place-items: center;
  width: 16px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--hair-strong);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  flex: none;
  padding: 0;
  transition: all 0.15s ease;
  z-index: 2;
}

.ticket-nav-btn[hidden] {
  display: none !important;
}

.ticket-nav-btn:hover {
  background: var(--a-soft);
  color: var(--a-text);
  border-color: var(--a-mark);
}

.ticket-nav-btn svg {
  width: 10px;
  height: 10px;
  stroke-width: 2.4px;
}

/* ========================================================
   LEDGE POS - SHIFT RECONCILIATION MODAL (FITTED NO-SCROLL)
   ======================================================== */
html:has(dialog[open]), body:has(dialog[open]) {
  overflow: hidden !important;
}

#dlg-close-shift.dlg--shift-balance {
  width: min(880px, calc(100vw - 28px));
  max-width: 900px;
  max-height: calc(100vh - 28px);
  padding: 0;
  border-radius: var(--r-lg);
  border: 1px solid var(--hair-strong);
  background: var(--card);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  margin: auto;
}

#dlg-close-shift.dlg--shift-balance form {
  padding: clamp(14px, 1.6vw, 18px) clamp(16px, 2vw, 22px);
  gap: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

/* Modal Header Bar */
#dlg-close-shift .shift-close-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

#dlg-close-shift .shift-close-head__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#dlg-close-shift .shift-close-head .dlg-tag {
  font-size: 11px;
  padding: 3px 9px;
  margin-bottom: 2px;
}

#dlg-close-shift .shift-close-head .dlg__title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ink);
}

#dlg-close-shift .shift-close-head .dlg__text {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: 500;
}

/* 2-Column Bento Container */
#dlg-close-shift .shift-close-bento {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr);
  gap: 12px;
  align-items: stretch;
}

#dlg-close-shift .shift-close-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

/* Left Column: Financial Summary Inset Well */
#dlg-close-shift .shift-close-col--summary .shift-summary-well {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  padding: 9px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

#dlg-close-shift .shift-summary-well .sm-card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  padding: 6px 9px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#dlg-close-shift .shift-summary-well .sm-card--float,
#dlg-close-shift .shift-summary-well .sm-card--cash,
#dlg-close-shift .shift-summary-well .sm-card--card-sales {
  grid-column: span 2;
}

#dlg-close-shift .shift-summary-well .sm-card--expenses,
#dlg-close-shift .shift-summary-well .sm-card--orders {
  grid-column: span 3;
}

#dlg-close-shift .shift-summary-well .sm-card__label {
  font-size: 10.5px;
  font-weight: 650;
  color: var(--muted);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#dlg-close-shift .shift-summary-well .sm-card__value {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#dlg-close-shift .shift-summary-well .sm-card--hero {
  grid-column: span 6;
  background: var(--night);
  color: var(--on-night);
  border: 1px solid transparent;
  padding: 8px 12px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--r-sm);
}

#dlg-close-shift .shift-summary-well .sm-card--hero .hero-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#dlg-close-shift .shift-summary-well .sm-card--hero .hero-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

#dlg-close-shift .shift-summary-well .sm-card--hero .sm-card__label {
  color: var(--on-night-muted);
  font-size: 10.5px;
  font-weight: 700;
}

#dlg-close-shift .shift-summary-well .sm-card--hero .sm-card__hint {
  font-size: 9.5px;
  color: var(--on-night-muted);
  opacity: 0.85;
}

#dlg-close-shift .shift-summary-well .sm-card--hero .sm-card__value {
  font-size: 1.15rem;
  font-weight: 800;
  color: inherit;
}

#dlg-close-shift .shift-summary-well .sm-card--hero .blind-mask-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

#dlg-close-shift .shift-summary-well .sm-card--hero .blind-mask-text {
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--on-night-muted);
}

#dlg-close-shift .shift-summary-well .sm-card--hero .btn-reveal-mask {
  background: var(--on-night);
  color: var(--night);
  border: none;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 750;
  padding: 3px 9px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

#dlg-close-shift .shift-summary-well .sm-card--hero .btn-reveal-mask:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Left Column: Counted Cash & Variance Inputs */
#dlg-close-shift .shift-reconcile-row {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 8px;
  align-items: end;
}

#dlg-close-shift .shift-reconcile-row .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

#dlg-close-shift .shift-reconcile-row .field__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

#dlg-close-shift .shift-reconcile-row .field-float-input {
  position: relative;
  display: flex;
  align-items: center;
}

#dlg-close-shift .shift-reconcile-row .field-float-input input {
  height: 38px;
  padding: 0 10px 0 32px;
  font-size: 1.05rem;
  font-weight: 800;
  border-radius: var(--r-sm);
  border: 1px solid var(--hair-strong);
  background: var(--card);
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
}

#dlg-close-shift .shift-reconcile-row .field-float-input input:focus {
  border-color: var(--ring);
  outline: none;
}

#dlg-close-shift .shift-reconcile-row .field-float-curr {
  position: absolute;
  left: 10px;
  font-weight: 750;
  color: var(--faint);
  font-size: 12px;
  pointer-events: none;
}

#dlg-close-shift .shift-reconcile-row .variance-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#dlg-close-shift .shift-reconcile-row .variance-pill {
  min-height: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hair-strong);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

#dlg-close-shift .shift-reconcile-row .variance-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

/* Right Column: Denomination Calculator Inset Well */
#dlg-close-shift .shift-close-col--denom .denom-well {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  padding: 9px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

#dlg-close-shift .shift-close-col--denom .denom-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}

#dlg-close-shift .shift-close-col--denom .denom-title {
  font-size: 10.5px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

#dlg-close-shift .shift-close-col--denom .denom-total-badge {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  background: var(--card);
  padding: 2px 7px;
  border-radius: var(--r-xs);
  border: 1px solid var(--hair-strong);
}

#dlg-close-shift .shift-close-col--denom .denom-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

#dlg-close-shift .shift-close-col--denom .denom-item {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-xs);
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

#dlg-close-shift .shift-close-col--denom .denom-item:focus-within {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px var(--a-glow);
  transform: translateY(-1px);
}

#dlg-close-shift .shift-close-col--denom .denom-label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--muted);
}

#dlg-close-shift .shift-close-col--denom .denom-input {
  width: 100%;
  height: 26px;
  border: 1px solid var(--hair-strong);
  border-radius: 4px;
  background: var(--panel);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 750;
  text-align: right;
  padding: 0 5px;
  box-sizing: border-box;
}

#dlg-close-shift .shift-close-col--denom .denom-input:focus {
  outline: none;
  border-color: var(--ring);
}

#dlg-close-shift .shift-close-col--denom .denom-subtotal {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  margin-top: 1px;
  opacity: 0.85;
}

/* Notes Field in Right Column */
#dlg-close-shift .shift-close-notes-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

#dlg-close-shift .shift-close-notes-wrap .field__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

#dlg-close-shift .shift-close-notes-wrap input {
  height: 38px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hair-strong);
  background: var(--card);
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
}

#dlg-close-shift .shift-close-notes-wrap input:focus {
  outline: none;
  border-color: var(--ring);
}

/* Footer Actions Row */
#dlg-close-shift .shift-close-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--hair);
}

#dlg-close-shift .shift-close-actions .btn {
  height: 38px;
  padding: 0 18px;
  font-size: 12.5px;
  font-weight: 750;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

#dlg-close-shift .shift-close-actions .btn--ghost {
  border: 1px solid var(--hair-strong);
  background: var(--card);
  color: var(--ink);
}

#dlg-close-shift .shift-close-actions .btn--ghost:hover {
  background: var(--panel);
}

#dlg-close-shift .shift-close-actions .btn--night {
  background: var(--night);
  color: var(--on-night);
  border: 1px solid transparent;
}

#dlg-close-shift .shift-close-actions .btn--night:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

/* Responsive fallback for narrow mobile/portrait viewports */
@media (max-width: 760px) {
  #dlg-close-shift.dlg--shift-balance form {
    overflow-y: auto;
    max-height: calc(100vh - 24px);
  }
  #dlg-close-shift .shift-close-bento {
    grid-template-columns: 1fr;
  }
  #dlg-close-shift .shift-summary-well {
    grid-template-columns: repeat(2, 1fr);
  }
  #dlg-close-shift .shift-summary-well .sm-card--float,
  #dlg-close-shift .shift-summary-well .sm-card--cash,
  #dlg-close-shift .shift-summary-well .sm-card--card-sales,
  #dlg-close-shift .shift-summary-well .sm-card--expenses,
  #dlg-close-shift .shift-summary-well .sm-card--orders {
    grid-column: span 1;
  }
  #dlg-close-shift .shift-summary-well .sm-card--hero {
    grid-column: span 2;
  }
  #dlg-close-shift .shift-close-col--denom .denom-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-height: 520px) {
  #dlg-close-shift.dlg--shift-balance form {
    overflow-y: auto;
    max-height: calc(100vh - 20px);
  }
}

/* ======================================================== */
/* Order Side-Sheet Line Items Thumbnail & Aspect-Ratio Fix */
/* ======================================================== */
.sh-lines li {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 12px !important;
  background: color-mix(in srgb, var(--panel) 40%, var(--card)) !important;
  border-radius: var(--r-md) !important;
}

:root[data-theme=dark] .sh-lines li {
  background: #191c22 !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.sh-lines li > .thumb {
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 48px !important;
  aspect-ratio: 1 / 1 !important;
  min-width: 48px !important;
  max-width: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--plate-furniture, #ece8e1) !important;
  border: 1px solid var(--hair) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

:root[data-theme=dark] .sh-lines li > .thumb,
:root[data-theme=dark] .tline .thumb,
:root[data-theme=dark] .thumb {
  background: #26241f !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.sh-lines li > .thumb img {
  width: 84% !important;
  height: 84% !important;
  max-width: 84% !important;
  max-height: 84% !important;
  object-fit: contain !important;
  display: block !important;
  margin: auto !important;
}

.sh-lines li > .sh-lines__text,
.sh-lines li > span:not(.thumb) {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  line-height: 1.3 !important;
  display: grid !important;
}

.sh-lines li > b {
  flex: 0 0 auto !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 750 !important;
  font-family: var(--mono) !important;
}

/* ========================================================
   Ledge POS: Phase 29 - Smart Category Bar Containment &
   Horizontal Scroll System (RULE UI-1 Compliant)
   - 3-Tier Surface Stacking
   - Vector SVGs & Spring Micro-Lifts
   - Mouse wheel & Drag-to-scroll support
   - Dark/Light Theme Parity
   ======================================================== */
.reg__tools {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.reg__cat-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.reg__cat-wrap .seg--scroll {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: center;
  border-radius: 99px;
  background: var(--panel);
  border: 1px solid var(--hair);
  padding: 3px;
  user-select: none;
  position: relative;
  cursor: grab;
}

.reg__cat-wrap .seg--scroll.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.reg__cat-wrap .seg--scroll::-webkit-scrollbar {
  display: none;
}

.reg__cat-wrap .seg__btn {
  white-space: nowrap;
  flex: none;
  user-select: none;
}

/* Dynamic Scroll Navigation Chevrons */
.cat-nav-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 99px;
  border: 1px solid var(--hair-strong);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  flex: none;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.15s ease,
              border-color 0.15s ease,
              color 0.15s ease,
              opacity 0.15s ease;
  z-index: 2;
}

.cat-nav-btn[hidden] {
  display: none !important;
}

.cat-nav-btn:hover:not(:disabled) {
  background: var(--a-soft);
  color: var(--a-text);
  border-color: var(--a-mark);
  transform: scale(1.08);
}

.cat-nav-btn:active:not(:disabled) {
  transform: scale(0.94);
}

.cat-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.cat-nav-btn svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.2px;
}

/* Dark Mode Theme Parity */
:root[data-theme=dark] .cat-nav-btn {
  background: var(--card);
  border-color: var(--hair-strong);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

:root[data-theme=dark] .cat-nav-btn:hover:not(:disabled) {
  background: var(--panel);
  color: var(--a-block);
  border-color: var(--a-block);
}

/* Smooth Edge Fade Gradient Masks when category overflow exists */
.reg__cat-wrap.can-scroll-left.can-scroll-right .seg--scroll {
  mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
}

.reg__cat-wrap.can-scroll-left:not(.can-scroll-right) .seg--scroll {
  mask-image: linear-gradient(to right, transparent 0, black 24px, black 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black 100%);
}

.reg__cat-wrap.can-scroll-right:not(.can-scroll-left) .seg--scroll {
  mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
}

@media (max-width: 768px) {
  .reg__scanner-bar {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }
}

/* ========================================================
   Ledge / MianPos Design System: Dark Mode High-Contrast Parity
   Ensures green elements on inverted white/cream (--night) surfaces
   use var(--a-deep) (#4a6a00) for sharp readability and WCAG AA compliance.
   ======================================================== */
:root[data-theme=dark] .rail__brand {
  color: var(--a-deep);
}

:root[data-theme=dark] .cust-bento__badge,
:root[data-theme=dark] .cust-bento__hero .cust-bento__badge {
  color: var(--a-deep);
}

:root[data-theme=dark] .exp-bento__badge,
:root[data-theme=dark] .exp-bento__hero .exp-bento__badge {
  color: var(--a-deep);
}

:root[data-theme=dark] .shift-bento__badge,
:root[data-theme=dark] .shift-bento__hero .shift-bento__badge {
  color: var(--a-deep);
}

/* ========================================================
   Seamless Topbar & Header Gradient Integration
   Eliminates harsh 72px box boundary & horizontal line artifact
   behind MianPos and header elements across Light and Dark themes.
   ======================================================== */
.topbar {
  z-index: 1000 !important;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              backdrop-filter 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              -webkit-backdrop-filter 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.topbar.is-scrolled {
  background: var(--topbar-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--hair);
}

/* ========================================================
   Payment Method Segmented Control (Card, Cash, Khata, FoodPanda)
   Consistent with existing Ledge / MianPos design language
   ======================================================== */
.ticket__pay .seg--wide {
  display: flex;
  width: 100%;
  padding: 3px;
  gap: 2px;
}

.ticket__pay .seg--wide .seg__btn {
  flex: 1 1 0%;
  min-width: 0;
  padding: 0 4px;
  font-size: 11.5px;
  font-weight: 700;
  gap: 4px;
  white-space: nowrap;
}

.ticket__pay .seg--wide .seg__btn svg {
  width: 15px;
  height: 15px;
  flex: none;
  stroke-width: 1.8px;
}

#dlg-close-shift .shift-summary-well .sm-card--foodpanda-sales {
  grid-column: span 1;
}

/* ========================================================
   Ledge POS: Workspace Settings Modern 2-Pane Architecture
   Matching modern SaaS & Enterprise Settings (Linear / Stripe)
   ======================================================== */
.st-layout {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  align-items: flex-start;
  margin-top: 14px;
}

.st-sidebar {
  width: 250px;
  flex: 0 0 250px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg, 16px);
  padding: 14px;
  box-shadow: var(--shadow-card);
  position: sticky;
  top: calc(var(--topbar-h, 72px) + 12px);
  box-sizing: border-box;
}

.st-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--panel);
  border-radius: 12px;
  border: 1px solid var(--hair);
}

.st-user-card__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--a-soft, #eef8d2);
  color: var(--a-text, #4a6a00);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13.5px;
  flex: none;
  border: 1.5px solid var(--a-block);
}

.st-user-card__info {
  min-width: 0;
  flex: 1;
}

.st-user-card__name {
  font-size: 13px;
  font-weight: 750;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.st-user-card__role {
  font-size: 11px;
  font-weight: 650;
  color: var(--muted);
  margin-top: 1px;
}

.st-sidebar__divider {
  height: 1px;
  background: var(--hair);
  margin: 12px 2px;
}

.st-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.st-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  user-select: none;
}

.st-nav__item svg {
  width: 17px;
  height: 17px;
  flex: none;
  stroke-width: 2px;
}

.st-nav__item:hover {
  background: var(--panel);
  color: var(--ink);
}

.st-nav__item.is-active {
  background: var(--ink) !important;
  color: var(--page) !important;
  font-weight: 750;
  box-shadow: 0 2px 8px #0000001f;
}

:root[data-theme="dark"] .st-nav__item.is-active {
  background: #ffffff !important;
  color: #16181b !important;
  box-shadow: 0 2px 10px #ffffff24;
}

.st-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.st-panel {
  display: none;
  flex-direction: column;
  gap: 16px;
}

.st-panel.is-active {
  display: flex;
  animation: stFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes stFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.st-panel__header {
  margin-bottom: 2px;
}

.st-panel__title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

.st-panel__sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.45;
}

.st-hero-banner {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg, 16px);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: var(--shadow-card);
}

.st-hero-banner__avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--a-block), var(--a-deep));
  color: var(--on-block);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 850;
  flex: none;
  box-shadow: 0 4px 14px var(--a-glow);
}

.st-hero-banner__info {
  flex: 1;
  min-width: 0;
}

.st-hero-banner__title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.st-hero-banner__title {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}

.st-hero-banner__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 6px;
}

.st-dot-sep {
  color: var(--hair-strong);
  font-weight: bold;
}

.st-badge--verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--good-bg);
  color: var(--good);
  font-size: 11px;
  font-weight: 750;
  padding: 3px 8.5px;
  border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--good) 30%, transparent);
}

.st-feature-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.st-feature-card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg, 16px);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.st-feature-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 750;
  font-size: 13.5px;
  color: var(--ink);
}

.st-feature-card__desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

.st-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.st-branch-pill {
  font-size: 11px;
  font-weight: 700;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--hair-strong);
  padding: 4px 10px;
  border-radius: 6px;
}

.st-feature-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  list-style: none;
  margin: 0;
  font-size: 12px;
  color: var(--ink);
  font-weight: 600;
}

.st-chk {
  color: var(--good);
  font-weight: 850;
  margin-right: 6px;
}

.st-role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.st-role-item {
  display: flex;
  align-items: center;
}

.st-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  height: auto !important;
  box-sizing: border-box !important;
}

.st-card .card__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.st-card .st-data {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.st-card .st-data .btn {
  flex: 1 1 auto;
  min-height: 40px;
  justify-content: center;
}

.st-card .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.st-card .field input,
.st-card .field select {
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
}

.st-card .shift-summary-well {
  box-sizing: border-box;
}

@media (max-width: 960px) {
  .st-layout {
    flex-direction: column;
    gap: 16px;
  }
  .st-sidebar {
    width: 100%;
    flex: none;
    position: static;
  }
  .st-user-card {
    display: none;
  }
  .st-sidebar__divider {
    display: none;
  }
  .st-nav {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
    gap: 8px;
  }
  .st-nav__item {
    width: auto;
    white-space: nowrap;
    flex: none;
  }
  .st-feature-row,
  .st-role-grid {
    grid-template-columns: 1fr;
  }
}

/* ====================================================
   Item Return & Refund System in POS Billing
   Matches native MianPos design language & system tokens
   ==================================================== */
.tline__badge--return {
  display: inline-flex;
  align-items: center;
  background: var(--bad-bg);
  color: var(--bad);
  border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent);
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
  padding: 2.5px 7px;
  border-radius: 99px;
  margin-left: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.qty__btn--remove {
  color: var(--muted);
  border-radius: 6px !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  margin-left: 2px;
}
.qty__btn--remove:hover {
  background: var(--bad-bg);
  color: var(--bad);
}

.btn--charge.btn--refund {
  background: var(--bad) !important;
  color: var(--card) !important;
}
.btn--charge.btn--refund:hover {
  filter: brightness(0.92);
}
.rc__line--return {
  color: var(--bad);
  font-weight: 600;
}

/* ========================================================
   Reports: Balanced Category List & Height Discipline
   Prevents excessive category rows from distorting the grid
   ======================================================== */
.rp-weeks {
  display: flex !important;
  flex-direction: column !important;
  min-height: clamp(340px, 24vw, 420px) !important;
}

.rp-cats {
  display: flex !important;
  flex-direction: column !important;
  max-height: clamp(340px, 24vw, 420px) !important;
  min-height: clamp(340px, 24vw, 420px) !important;
}

.rp-cats .hbars {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex: 1 1 auto !important;
  padding-right: 6px !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--hair-strong) transparent !important;
}

.rp-cats .hbars::-webkit-scrollbar {
  width: 5px;
}
.rp-cats .hbars::-webkit-scrollbar-track {
  background: transparent;
}
.rp-cats .hbars::-webkit-scrollbar-thumb {
  background: var(--hair-strong);
  border-radius: 99px;
}
.rp-cats .hbars::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}







/* ========================================================
   Phase 3: Multi-Tenant Architecture & Google Account Auth UI
   Senior Designer Grade • 3-Tier Card Wells • Zero Emojis
   ======================================================== */

/* --- Topbar Shop / Branch Pill --- */
.shop-pill-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 100000 !important;
}

.shop-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 10px;
  background: var(--card);
  border: 1px solid var(--hair-strong);
  border-radius: 9999px;
  color: var(--ink);
  cursor: pointer !important;
  pointer-events: auto !important;
  font-family: inherit;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  z-index: 100001 !important;
}

.shop-pill * {
  pointer-events: none !important;
}

.shop-pill:hover {
  background: var(--panel);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.shop-pill__pulse {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: shopPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  flex-shrink: 0;
}

@keyframes shopPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.shop-pill__info {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.15;
}

.shop-pill__label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.shop-pill__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-pill__chevron {
  color: var(--muted);
  transition: transform 0.2s ease;
  margin-left: 2px;
}

.shop-pill[aria-expanded="true"] .shop-pill__chevron {
  transform: rotate(180deg);
}

/* --- Topbar Shop Dropdown --- */
.shop-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 290px;
  background: var(--card);
  border: 1px solid var(--hair-strong);
  border-radius: 16px;
  box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.04);
  z-index: 100005 !important;
  pointer-events: auto !important;
  overflow: hidden;
  animation: dropFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.shop-dropdown[hidden] {
  display: none !important;
  pointer-events: none !important;
}

@keyframes dropFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.shop-dropdown__head {
  padding: 12px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--hair);
}

.shop-dropdown__title {
  font-size: 12px;
  font-weight: 750;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.shop-dropdown__sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}

.shop-dropdown__list {
  max-height: 240px;
  overflow-y: auto;
  padding: 6px;
}

.shop-dropdown__item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.shop-dropdown__item:hover {
  background: var(--panel);
  border-color: var(--hair-strong);
}

.shop-dropdown__item.is-active {
  background: rgba(249, 115, 22, 0.08);
  border-color: rgba(249, 115, 22, 0.25);
}

.shop-dropdown__item-info {
  display: flex;
  flex-direction: column;
}

.shop-dropdown__item-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}

.shop-dropdown__item-code {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 1px;
}

.shop-dropdown__item-check {
  color: #ea580c;
  flex-shrink: 0;
}

.shop-dropdown__foot {
  padding: 8px 10px;
  border-top: 1px solid var(--hair);
  background: var(--panel);
}

.shop-dropdown__action {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  background: var(--card);
  border: 1px dashed var(--hair-strong);
  border-radius: 10px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.15s ease;
}

.shop-dropdown__action:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(249, 115, 22, 0.05);
}

/* ========================================================
   Google Multi-Tenant OAuth Modal (.dlg--google-oauth)
   ======================================================== */
.dlg--google-oauth {
  padding: 0;
  border: none;
  background: transparent;
  max-width: 480px;
  width: calc(100vw - 32px);
  border-radius: 24px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.35);
  overflow: visible;
}

.dlg--google-oauth::backdrop {
  background: rgba(8, 10, 15, 0.75);
  backdrop-filter: blur(8px);
}

.ga-modal-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--hair-strong);
  border-radius: 24px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ga-modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
}

.ga-logo-wrap {
  width: 52px;
  height: 52px;
  background: var(--panel);
  border: 1px solid var(--hair-strong);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.ga-title {
  font-size: 20px;
  font-weight: 750;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0;
}

.ga-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0 0;
}

.ga-close-btn {
  position: absolute;
  top: -8px;
  right: -4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ga-close-btn:hover {
  background: var(--panel);
  color: var(--ink);
}

.ga-section-label {
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  margin-bottom: 10px;
}

/* --- Google Accounts List --- */
.ga-accounts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.ga-account-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--hair-strong);
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ga-account-card:hover {
  background: var(--card);
  border-color: #ea580c;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.ga-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  flex-shrink: 0;
}

.ga-avatar--orange {
  background: linear-gradient(135deg, #f97316, #ea580c);
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.3);
}

.ga-avatar--blue {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

.ga-avatar--green {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.ga-account-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.ga-account-name {
  font-size: 13.5px;
  font-weight: 750;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ga-account-email {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 1px;
}

.ga-account-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 650;
  color: #ea580c;
  margin-top: 2px;
}

.ga-account-arrow {
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.ga-account-card:hover .ga-account-arrow {
  color: var(--ink);
  transform: translateX(2px);
}

/* --- Custom Email Input Well --- */
.ga-custom-well {
  padding-top: 10px;
}

.ga-custom-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 12px;
}

.ga-custom-divider::before,
.ga-custom-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--hair-strong);
}

.ga-custom-divider span {
  padding: 0 10px;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 650;
}

.ga-input-row {
  display: flex;
  gap: 8px;
}

.ga-input {
  flex: 1;
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--hair-strong);
  background: var(--panel);
  color: var(--ink);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s ease;
}

.ga-input:focus {
  border-color: #ea580c;
  background: var(--card);
}

.ga-verify-btn {
  height: 42px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

/* --- VIEW 2: Branches List --- */
.ga-branches-head {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

.ga-back-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease;
}

.ga-back-link:hover {
  color: var(--ink);
}

.ga-branches-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ga-branch-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--hair-strong);
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ga-branch-card:hover {
  background: var(--card);
  border-color: #ea580c;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.ga-branch-icon {
  width: 44px;
  height: 44px;
  background: var(--card);
  border: 1px solid var(--hair-strong);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ea580c;
  flex-shrink: 0;
}

.ga-branch-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ga-branch-name {
  font-size: 14px;
  font-weight: 750;
  color: var(--ink);
}

.ga-branch-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

.ga-branch-code {
  font-weight: 700;
  color: var(--ink);
}

.ga-branch-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  background: rgba(249, 115, 22, 0.12);
  color: #ea580c;
  border-radius: 6px;
  flex-shrink: 0;
}

/* --- VIEW 3: Launch New Store --- */
.ga-newshop-card {
  display: flex;
  flex-direction: column;
}

.ga-newshop-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 8px;
}

.ga-newshop-title {
  font-size: 17px;
  font-weight: 750;
  color: var(--ink);
  margin: 0 0 4px;
}

.ga-newshop-sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  margin: 0 0 16px;
}

.ga-newshop-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ga-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ga-launch-btn {
  width: 100%;
  height: 44px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 750;
}

/* --- Modal Error Box --- */
.ga-err-box {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #ef4444;
  font-size: 12.5px;
  font-weight: 600;
}

/* ======================================================== */
/* MULTI-STAGE AUTHENTICATION (OWNER -> STORES -> STAFF PIN)*/
/* ======================================================== */
.stage-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 9999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.stage-tag-pill--green {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

/* Stage 2: Store Chooser List */
.owner-stores-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: clamp(260px, 42vh, 380px);
  overflow-y: auto;
  padding-right: 4px;
}
.owner-stores-subhead {
  margin: 0 0 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
}
.owner-stores-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.owner-store-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  width: 100%;
}
.owner-store-card:hover {
  border-color: #0f172a;
  background: #f8fafc;
  transform: translateY(-1.5px);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
.owner-store-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-weight: 800;
}
.owner-store-card:hover .owner-store-card__icon {
  background: #0f172a;
  color: #ffffff;
}
.owner-store-card__info {
  flex: 1;
  min-width: 0;
}
.owner-store-card__name {
  font-size: 13.5px;
  font-weight: 750;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.owner-store-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #64748b;
  margin-top: 2px;
}
.owner-store-card__btn {
  padding: 6px 12px;
  border-radius: 9999px;
  background: #0f172a;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s ease;
}
.owner-store-card:hover .owner-store-card__btn {
  background: #2563eb;
}

.btn-add-store-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1.5px dashed #cbd5e1;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  width: 100%;
}
.btn-add-store-card:hover {
  background: #ffffff;
  border-color: #0f172a;
}
.add-store-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #e2e8f0;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.add-store-card-title {
  font-size: 13px;
  font-weight: 750;
  color: #0f172a;
}
.add-store-card-sub {
  font-size: 11.5px;
  color: #64748b;
}

/* Stage 3: Staff PIN Login (Zero-CLS Locked Geometry) */
#stage-staff-login .lp-card-title {
  line-height: 34px;
  min-height: 34px;
}
#stage-staff-login .lp-card-sub {
  height: 20px;
  min-height: 20px;
  max-height: 20px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staff-store-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  min-height: 46px;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  margin-bottom: 4px;
}
.staff-store-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.staff-store-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #0f172a;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.staff-store-details {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.staff-store-tag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  line-height: 12px;
}
.staff-store-name {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.staff-switch-store-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #2563eb;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 16px;
  flex: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.staff-switch-store-btn:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  text-decoration: none;
}

.staff-chips-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.staff-chips-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 16px;
  min-height: 16px;
}
.staff-chips-label {
  font-size: 11px;
  font-weight: 750;
  line-height: 16px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.staff-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  height: 78px;
  min-height: 78px;
  max-height: 78px;
  box-sizing: border-box;
  contain: layout style paint;
  overflow-y: auto;
  padding: 2px;
}
.staff-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  box-sizing: border-box;
  padding: 5px 10px;
  border-radius: 10px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  color: #1e293b;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s ease;
  text-align: left;
}
.staff-chip--skeleton {
  pointer-events: none;
  cursor: default;
  background: #f8fafc;
  border-color: #e2e8f0;
  animation: staffSkelPulse 1.4s ease-in-out infinite;
}
.staff-chip__skel-bar {
  display: inline-block;
  height: 10px;
  border-radius: 5px;
  background: #e2e8f0;
}
@keyframes staffSkelPulse {
  0%, 100% { opacity: 0.92; }
  50% { opacity: 0.52; }
}
.staff-chip:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.staff-chip.is-selected {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
}
.staff-chip__avatar {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #334155;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  letter-spacing: -0.5px;
}
.staff-chip.is-selected .staff-chip__avatar {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
.staff-chip__content {
  display: flex;
  align-items: center;
  gap: 6px;
}
.staff-chip__name {
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
}
.staff-chip__role {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1;
}
.staff-chip__role--manager {
  background: #e0e7ff;
  color: #3730a3;
}
.staff-chip__role--senior {
  background: #e0f2fe;
  color: #0369a1;
}
.staff-chip__role--cashier {
  background: #ecfdf5;
  color: #047857;
}
.staff-chip.is-selected .staff-chip__role {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* ======================================================== */
/* POS SETTINGS: STAFF & PIN MANAGEMENT DIRECTORY TABLE     */
/* ======================================================== */
.st-staff-table-wrap {
  overflow-x: auto;
  border-radius: var(--r-sm);
  border: 1px solid var(--hair);
  background: var(--card-bg, #ffffff);
}
.st-staff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}
.st-staff-table th {
  padding: 10px 14px;
  background: var(--panel, #f8fafc);
  font-size: 11.5px;
  font-weight: 750;
  color: var(--muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--hair, #e2e8f0);
}
.st-staff-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--hair, #f1f5f9);
  color: var(--ink, #0f172a);
  vertical-align: middle;
}
.st-staff-table tr:last-child td {
  border-bottom: none;
}
.st-staff-table tr:hover td {
  background: var(--panel, #f8fafc);
}
.staff-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.staff-avatar-mini {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--night, #0f172a);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 800;
  flex: none;
}
.staff-name-text {
  font-weight: 750;
  color: var(--ink, #0f172a);
}
.staff-username-text {
  font-size: 11.5px;
  color: var(--muted, #64748b);
  font-family: monospace;
}
.staff-role-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.staff-role-badge--manager {
  background: #fef3c7;
  color: #92400e;
}
.staff-role-badge--cashier {
  background: #e0f2fe;
  color: #0369a1;
}
.staff-role-badge--snr {
  background: #f3e8ff;
  color: #6b21a8;
}
.staff-pin-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--panel, #f1f5f9);
  border: 1px solid var(--hair, #e2e8f0);
  font-family: monospace;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink, #0f172a);
}
.btn-staff-action {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--hair, #e2e8f0);
  background: transparent;
  color: var(--ink, #0f172a);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-staff-action:hover {
  background: var(--night, #0f172a);
  color: #ffffff;
  border-color: var(--night, #0f172a);
}
.btn-staff-action--danger:hover {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
}

/* ========================================================
   Side Sheet (Order, Product, Purchase Order) Overlay Fix
   Ensures the side sheet stays strictly above the topbar, headers & pills,
   and prevents horizontal / scrollbar layout shift (jitter).
   ======================================================== */
html {
  scrollbar-gutter: stable;
}

html.is-locked {
  overflow-y: scroll !important;
  overscroll-behavior: contain;
}

body {
  overflow-x: hidden;
}

.sheet {
  position: fixed !important;
  inset: 0 !important;
  z-index: 200000 !important;
  pointer-events: auto !important;
  overflow: hidden !important;
}

.sheet[hidden] {
  display: none !important;
}

.sheet__scrim {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: var(--scrim) !important;
  cursor: pointer !important;
}

.sheet__panel {
  position: absolute !important;
  z-index: 2 !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--hair-strong) !important;
}

.sheet__close {
  z-index: 10 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.toast {
  z-index: 250000 !important;
}

/* Foodpanda & Card Channel Chips & Split Bar */
.chip--foodpanda {
  color: #d70f64 !important;
  background: color-mix(in srgb, #d70f64 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, #d70f64 25%, transparent) !important;
}

.chip--card {
  color: #2563eb !important;
  background: color-mix(in srgb, #2563eb 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, #2563eb 25%, transparent) !important;
}

.split__foodpanda {
  background: #d70f64 !important;
  width: 100% !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  transform-origin: 100% !important;
  border-radius: 0 99px 99px 0 !important;
  right: 0 !important;
}

/* ========================================================
   Mobile Viewport & Screen Responsiveness System
   Maintains strict MianPos design language: zero horizontal overflow,
   touch-comfortable pills, perfectly adaptive topbar & ticketbar
   ======================================================== */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }

  .app, .main {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .board {
    padding-inline: clamp(10px, 3.5vw, 16px);
  }

  /* Seamless Topbar on Mobile */
  .topbar {
    padding: 8px 12px !important;
    gap: 8px !important;
    min-height: 56px !important;
    height: auto !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .brand {
    flex: none;
    min-width: 32px;
  }

  .brand__name {
    display: none !important;
  }

  .brand__mark {
    width: 26px !important;
    height: 26px !important;
  }

  .find {
    flex: 1 1 0 !important;
    min-width: 60px !important;
    max-width: 160px;
    margin-left: 0 !important;
  }

  .find__input {
    height: 36px !important;
    font-size: 12.5px !important;
    padding-left: 30px !important;
    padding-right: 10px !important;
  }

  .find__icon {
    left: 8px !important;
    width: 14px !important;
    height: 14px !important;
  }

  .topbar__actions {
    gap: 5px !important;
    margin-left: auto !important;
    flex: none !important;
  }

  .topbar__actions .icon-btn {
    width: 34px !important;
    height: 34px !important;
  }

  .topbar__sale {
    display: none !important;
  }

  /* Shift button mobile tuning */
  .shift-btn {
    height: 34px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
    font-weight: 750 !important;
  }

  /* Active Branch Shop Pill mobile collapse */
  .shop-pill-wrap {
    margin: 0 !important;
  }

  .shop-pill {
    padding: 4px 8px !important;
    gap: 5px !important;
    height: 34px !important;
  }

  .shop-pill__info,
  .shop-pill__chevron {
    display: none !important;
  }

  .shop-dropdown {
    right: 0 !important;
    left: auto !important;
    width: min(290px, calc(100vw - 24px)) !important;
  }

  /* User Account Pill mobile avatar button */
  .user-pill-wrap {
    margin: 0 !important;
  }

  .user-pill {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .user-pill .avatar {
    width: 34px !important;
    height: 34px !important;
    font-size: 12px !important;
    border: 1.5px solid var(--hair-strong) !important;
  }

  .user-pill__info {
    display: none !important;
  }

  .user-dropdown {
    right: 0 !important;
    left: auto !important;
    width: min(280px, calc(100vw - 24px)) !important;
  }

  /* Floating POS Ticket Bar */
  .ticketbar {
    bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    right: 12px !important;
    height: 52px !important;
    z-index: 100 !important;
  }

  /* Modals & Dialogs on Mobile */
  .dlg {
    width: min(92vw, 480px) !important;
    max-height: 90dvh !important;
    margin: auto !important;
  }
}