/* POS Design System (Dan D Pak) — token + component, chép từ design system của POS. Chỉ dùng role token, không hex. */
/* ---- tokens/primitives.css ---- */
/* PRIMITIVES — raw palette. Never reference these from components; use tokens/theme-*.css roles. */
:root{
--p-slate-0:oklch(13% 0.012 250);--p-slate-50:oklch(16% 0.013 250);--p-slate-100:oklch(19% 0.014 250);--p-slate-150:oklch(22.5% 0.015 250);--p-slate-200:oklch(26.5% 0.016 250);--p-slate-300:oklch(33% 0.016 250);--p-slate-400:oklch(45% 0.015 250);--p-slate-500:oklch(56% 0.014 250);--p-slate-600:oklch(68% 0.012 250);--p-slate-700:oklch(80% 0.009 250);--p-slate-800:oklch(89% 0.006 250);--p-slate-850:oklch(93% 0.005 250);--p-slate-900:oklch(96% 0.004 250);--p-slate-950:oklch(98.6% 0.003 250);
--p-teal-300:oklch(87% 0.10 188);--p-teal-400:oklch(81% 0.13 188);--p-teal-500:oklch(73% 0.13 190);--p-teal-600:oklch(60% 0.115 193);--p-teal-700:oklch(50% 0.10 196);--p-teal-800:oklch(42% 0.085 198);--p-teal-900:oklch(31% 0.06 200);--p-teal-950:oklch(23% 0.04 200);--p-teal-100:oklch(94% 0.04 188);
--p-green-300:oklch(88% 0.13 150);--p-green-400:oklch(80% 0.16 150);--p-green-500:oklch(72% 0.16 150);--p-green-700:oklch(50% 0.13 152);--p-green-800:oklch(42% 0.11 152);--p-green-900:oklch(30% 0.07 152);--p-green-950:oklch(22% 0.045 152);--p-green-100:oklch(94% 0.05 150);
--p-amber-300:oklch(90% 0.12 85);--p-amber-400:oklch(84% 0.15 78);--p-amber-500:oklch(77% 0.16 72);--p-amber-700:oklch(56% 0.13 62);--p-amber-800:oklch(46% 0.11 60);--p-amber-900:oklch(32% 0.07 62);--p-amber-950:oklch(23% 0.045 65);--p-amber-100:oklch(95% 0.05 85);
--p-red-300:oklch(84% 0.09 22);--p-red-400:oklch(74% 0.15 22);--p-red-500:oklch(66% 0.19 24);--p-red-600:oklch(58% 0.20 26);--p-red-700:oklch(51% 0.19 27);--p-red-900:oklch(31% 0.09 25);--p-red-950:oklch(22% 0.055 25);--p-red-100:oklch(94% 0.035 22);
--p-blue-300:oklch(86% 0.08 250);--p-blue-400:oklch(77% 0.12 252);--p-blue-500:oklch(68% 0.15 255);--p-blue-700:oklch(50% 0.16 260);--p-blue-900:oklch(30% 0.08 258);--p-blue-950:oklch(22% 0.05 258);--p-blue-100:oklch(94% 0.03 250);
--p-yellow-focus:oklch(88% 0.15 98);--p-yellow-focus-deep:oklch(55% 0.13 85);
}

/* ---- tokens/theme-dark.css ---- */
/* ROLE TOKENS — DARK (default). Every value is a role: bg = nền, text = chữ, border = viền, icon = biểu tượng.
   A new theme only re-maps these names; components never change. */
:root,[data-theme="dark"]{
color-scheme:dark;
/* Nền (backgrounds) — higher = lighter */
--bg-app:var(--p-slate-0);
--bg-surface:var(--p-slate-50);
--bg-raised:var(--p-slate-100);
--bg-raised-2:var(--p-slate-150);
--bg-sunken:oklch(10.5% 0.01 250);
--bg-control:var(--p-slate-150);
--bg-control-hover:var(--p-slate-200);
--bg-control-pressed:var(--p-slate-100);
--bg-selected:var(--p-teal-950);
--bg-scrim:oklch(8% 0.01 250 / 0.72);
--bg-inverse:var(--p-slate-900);
/* Chữ (text) */
--text-primary:var(--p-slate-900);
--text-secondary:var(--p-slate-700);
--text-tertiary:var(--p-slate-600);
--text-disabled:var(--p-slate-400);
--text-inverse:var(--p-slate-0);
--text-link:var(--p-teal-400);
/* Viền (borders) */
--border-subtle:var(--p-slate-150);
--border-default:var(--p-slate-200);
--border-strong:var(--p-slate-400);
--border-selected:var(--p-teal-400);
/* Nhấn (accent / primary action) */
--accent-fill:var(--p-teal-400);
--accent-fill-hover:var(--p-teal-300);
--accent-fill-pressed:var(--p-teal-500);
--accent-on-fill:var(--p-slate-0);
--accent-text:var(--p-teal-400);
--accent-soft-bg:var(--p-teal-950);
--accent-soft-border:var(--p-teal-900);
/* Trạng thái (status) — fill + on-fill always a verified pair */
--success-fill:var(--p-green-400);--success-on-fill:var(--p-slate-0);--success-text:var(--p-green-400);--success-soft-bg:var(--p-green-950);--success-soft-border:var(--p-green-900);
--warning-fill:var(--p-amber-400);--warning-on-fill:var(--p-slate-0);--warning-text:var(--p-amber-400);--warning-soft-bg:var(--p-amber-950);--warning-soft-border:var(--p-amber-900);
--danger-fill:var(--p-red-500);--danger-fill-hover:var(--p-red-400);--danger-on-fill:var(--p-slate-0);--danger-text:var(--p-red-400);--danger-soft-bg:var(--p-red-950);--danger-soft-border:var(--p-red-900);
--info-fill:var(--p-blue-400);--info-on-fill:var(--p-slate-0);--info-text:var(--p-blue-400);--info-soft-bg:var(--p-blue-950);--info-soft-border:var(--p-blue-900);
/* Biểu tượng (icons) */
--icon-primary:var(--p-slate-900);
--icon-secondary:var(--p-slate-600);
--icon-disabled:var(--p-slate-400);
--icon-accent:var(--p-teal-400);
--icon-on-accent:var(--p-slate-0);
/* Focus — contrasts against page AND accent fill */
--focus-ring:var(--p-yellow-focus);
/* Product plate tints (category placeholders) */
--plate-1:oklch(30% 0.05 190);--plate-2:oklch(30% 0.05 60);--plate-3:oklch(30% 0.05 330);--plate-4:oklch(30% 0.05 140);--plate-5:oklch(30% 0.05 260);--plate-6:oklch(30% 0.05 25);
--plate-text:var(--p-slate-850);
/* Elevation */
--shadow-1:0 1px 0 oklch(100% 0 0 / 0.04) inset,0 1px 2px oklch(0% 0 0 / 0.4);
--shadow-2:0 1px 0 oklch(100% 0 0 / 0.05) inset,0 6px 16px oklch(0% 0 0 / 0.45);
--shadow-3:0 1px 0 oklch(100% 0 0 / 0.06) inset,0 18px 48px oklch(0% 0 0 / 0.55);
--weight-body:400;
}

/* ---- tokens/theme-light.css ---- */
/* ROLE TOKENS — LIGHT. Same role names as theme-dark.css; only values move. */
[data-theme="light"]{
color-scheme:light;
--bg-app:var(--p-slate-850);
--bg-surface:var(--p-slate-900);
--bg-raised:var(--p-slate-950);
--bg-raised-2:oklch(99.4% 0.002 250);
--bg-sunken:var(--p-slate-800);
--bg-control:var(--p-slate-950);
--bg-control-hover:var(--p-slate-900);
--bg-control-pressed:var(--p-slate-850);
--bg-selected:var(--p-teal-100);
--bg-scrim:oklch(20% 0.02 250 / 0.45);
--bg-inverse:var(--p-slate-100);
--text-primary:var(--p-slate-0);
--text-secondary:var(--p-slate-300);
--text-tertiary:var(--p-slate-400);
--text-disabled:var(--p-slate-600);
--text-inverse:var(--p-slate-900);
--text-link:var(--p-teal-700);
--border-subtle:var(--p-slate-800);
--border-default:oklch(84% 0.008 250);
--border-strong:var(--p-slate-500);
--border-selected:var(--p-teal-700);
--accent-fill:var(--p-teal-700);
--accent-fill-hover:var(--p-teal-600);
--accent-fill-pressed:var(--p-teal-800);
--accent-on-fill:var(--p-slate-950);
--accent-text:var(--p-teal-700);
--accent-soft-bg:var(--p-teal-100);
--accent-soft-border:oklch(84% 0.07 190);
--success-fill:var(--p-green-700);--success-on-fill:var(--p-slate-950);--success-text:var(--p-green-800);--success-soft-bg:var(--p-green-100);--success-soft-border:oklch(84% 0.09 150);
--warning-fill:var(--p-amber-500);--warning-on-fill:var(--p-slate-0);--warning-text:var(--p-amber-800);--warning-soft-bg:var(--p-amber-100);--warning-soft-border:oklch(86% 0.09 80);
--danger-fill:var(--p-red-700);--danger-fill-hover:var(--p-red-600);--danger-on-fill:var(--p-slate-950);--danger-text:var(--p-red-700);--danger-soft-bg:var(--p-red-100);--danger-soft-border:oklch(85% 0.07 22);
--info-fill:var(--p-blue-700);--info-on-fill:var(--p-slate-950);--info-text:var(--p-blue-700);--info-soft-bg:var(--p-blue-100);--info-soft-border:oklch(85% 0.05 250);
--icon-primary:var(--p-slate-0);
--icon-secondary:var(--p-slate-400);
--icon-disabled:var(--p-slate-600);
--icon-accent:var(--p-teal-700);
--icon-on-accent:var(--p-slate-950);
--focus-ring:var(--p-yellow-focus-deep);
--plate-1:oklch(90% 0.05 190);--plate-2:oklch(91% 0.06 75);--plate-3:oklch(90% 0.05 340);--plate-4:oklch(91% 0.06 140);--plate-5:oklch(90% 0.04 260);--plate-6:oklch(90% 0.05 25);
--plate-text:var(--p-slate-100);
--shadow-1:0 1px 2px oklch(30% 0.02 250 / 0.10);
--shadow-2:0 6px 16px oklch(30% 0.02 250 / 0.12);
--shadow-3:0 18px 48px oklch(30% 0.02 250 / 0.20);
--weight-body:400;
}

/* ---- tokens/typography.css ---- */
:root{
--font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter",system-ui,"Helvetica Neue",Arial,sans-serif;
--font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,"JetBrains Mono",monospace;
/* Scale (ratio ~1.2, base 16). Nothing below 13px on a POS screen. */
--fs-caption:13px;--fs-small:14px;--fs-body:16px;--fs-label:17px;--fs-title:20px;--fs-heading:24px;--fs-display-s:32px;--fs-display:44px;--fs-total:56px;
--lh-tight:1.15;/* @kind font */--lh-snug:1.3;/* @kind font */--lh-body:1.5;/* @kind font */
/* Trọng lượng kiểu Apple: tiêu đề 600, không dùng 800. --fw-bold giữ tên cũ nhưng là 600; --fw-heavy là 700. */
--fw-regular:400;/* @kind font */--fw-medium:500;/* @kind font */--fw-semibold:600;/* @kind font */--fw-bold:600;/* @kind font */--fw-heavy:700;/* @kind font */
/* Giãn chữ: chữ lớn siết chặt hơn, chữ nhỏ siết nhẹ (SF làm việc này tự động theo cỡ chữ; Inter cần khai báo) */
--tracking-tight:-0.022em;/* @kind other */--tracking-body:-0.011em;/* @kind other */--tracking-label:0.01em;/* @kind other */
/* Semantic type roles */
--type-caption:var(--fw-medium) var(--fs-caption)/var(--lh-snug) var(--font-ui);
--type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-ui);
--type-label:var(--fw-semibold) var(--fs-label)/var(--lh-snug) var(--font-ui);
--type-button:var(--fw-semibold) var(--fs-label)/1 var(--font-ui);
--type-title:var(--fw-bold) var(--fs-title)/var(--lh-snug) var(--font-ui);
--type-heading:var(--fw-bold) var(--fs-heading)/var(--lh-tight) var(--font-ui);
--type-price:var(--fw-bold) var(--fs-label)/1 var(--font-ui);
--type-total:var(--fw-heavy) var(--fs-total)/1 var(--font-ui);
--type-mono:var(--fw-medium) var(--fs-small)/var(--lh-snug) var(--font-mono);
}

/* ---- tokens/spacing.css ---- */
:root{
--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;
/* Touch targets (hit). Every tappable element is at least --hit-min. */
--hit-min:48px;--hit-sm:48px;--hit-md:56px;--hit-lg:64px;--hit-xl:80px;
--icon-sm:20px;--icon-md:24px;--icon-lg:32px;--icon-xl:40px;
--gutter:var(--space-4);
--rail-width:96px;--order-panel-width:380px;
--radius-xs:6px;--radius-sm:10px;--radius-md:14px;--radius-lg:18px;--radius-xl:24px;--radius-pill:999px;
--border-w:1px;--border-w-strong:2px;--focus-w:3px;
--dur-instant:60ms;/* @kind other */--dur-fast:100ms;/* @kind other */--dur-base:160ms;/* @kind other */--dur-slow:240ms;/* @kind other */
--ease-out:cubic-bezier(.2,.8,.2,1);/* @kind other */--ease-in-out:cubic-bezier(.6,0,.3,1);/* @kind other */
--press-scale:.97;/* @kind other */
}
/* Compact density for small screens (5–7" handheld POS). Hit targets never drop below 44px. */
[data-density="compact"]{
--hit-min:44px;--hit-sm:44px;--hit-md:48px;--hit-lg:56px;--hit-xl:64px;
--gutter:var(--space-3);--rail-width:76px;--order-panel-width:320px;
--fs-total:44px;--fs-display:36px;
}

/* ---- tokens/base.css ---- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg-app);color:var(--text-primary);font:var(--type-body);font-weight:var(--weight-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:var(--text-link);text-underline-offset:3px}
a:hover{color:var(--accent-fill-hover)}
:focus{outline:none}
:focus-visible{outline:var(--focus-w) solid var(--focus-ring);outline-offset:2px}
.num,.pos-num{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){*{transition-duration:0ms!important;animation-duration:0ms!important}}

/* ---- components/components.css ---- */
/* Component styles. Only role tokens are referenced here — never primitives, never hex. */
/* Button */
.pos-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--hit-md);min-width:var(--hit-md);padding:0 var(--space-5);border:var(--border-w) solid transparent;border-radius:var(--radius-md);font:var(--type-button);letter-spacing:0;white-space:nowrap;cursor:pointer;user-select:none;transition:background-color var(--dur-fast) var(--ease-out),transform var(--dur-instant) var(--ease-out),border-color var(--dur-fast);-webkit-tap-highlight-color:transparent}
.pos-btn:active:not(:disabled){transform:scale(var(--press-scale))}
.pos-btn:disabled{cursor:not-allowed;opacity:.45}
.pos-btn--sm{height:var(--hit-sm);min-width:var(--hit-sm);padding:0 var(--space-4);font-size:var(--fs-body);border-radius:var(--radius-sm)}
.pos-btn--lg{height:var(--hit-lg);min-width:var(--hit-lg);padding:0 var(--space-6);font-size:var(--fs-title)}
.pos-btn--xl{height:var(--hit-xl);min-width:var(--hit-xl);padding:0 var(--space-8);font-size:var(--fs-heading);font-weight:var(--fw-bold);border-radius:var(--radius-lg)}
.pos-btn--block{display:flex;width:100%}
.pos-btn--primary{background:var(--accent-fill);color:var(--accent-on-fill)}
.pos-btn--primary:active:not(:disabled){background:var(--accent-fill-pressed)}
.pos-btn--secondary{background:var(--bg-control);color:var(--text-primary);border-color:var(--border-default)}
.pos-btn--secondary:active:not(:disabled){background:var(--bg-control-pressed)}
.pos-btn--ghost{background:transparent;color:var(--text-primary)}
.pos-btn--ghost:active:not(:disabled){background:var(--bg-control-pressed)}
.pos-btn--danger{background:var(--danger-fill);color:var(--danger-on-fill)}
.pos-btn--danger-soft{background:var(--danger-soft-bg);color:var(--danger-text);border-color:var(--danger-soft-border)}
.pos-btn--success{background:var(--success-fill);color:var(--success-on-fill)}
@media (hover:hover){.pos-btn--primary:hover:not(:disabled){background:var(--accent-fill-hover)}.pos-btn--secondary:hover:not(:disabled),.pos-btn--ghost:hover:not(:disabled){background:var(--bg-control-hover)}.pos-btn--danger:hover:not(:disabled){background:var(--danger-fill-hover)}}
.pos-btn__label{overflow:hidden;text-overflow:ellipsis}
.pos-btn--loading .pos-btn__label,.pos-btn--loading .pos-icon{visibility:hidden}
.pos-spinner{position:absolute;inset:0;margin:auto;width:22px;height:22px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:pos-spin .7s linear infinite}
@keyframes pos-spin{to{transform:rotate(360deg)}}
/* IconButton */
.pos-iconbtn{padding:0;width:var(--hit-md)}.pos-iconbtn.pos-btn--sm{width:var(--hit-sm)}.pos-iconbtn.pos-btn--lg{width:var(--hit-lg)}.pos-iconbtn.pos-btn--xl{width:var(--hit-xl)}
.pos-iconbtn__badge{position:absolute;top:4px;right:4px;min-width:22px;height:22px;padding:0 6px;border-radius:var(--radius-pill);background:var(--danger-fill);color:var(--danger-on-fill);font:var(--fw-bold) 12px/22px var(--font-ui);font-variant-numeric:tabular-nums;text-align:center;box-shadow:0 0 0 2px var(--bg-surface)}
/* Icon */
.pos-icon{flex:none;display:block}
/* Badge */
.pos-badge{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--radius-pill);border:var(--border-w) solid transparent;font:var(--fw-semibold) var(--fs-caption)/1 var(--font-ui);white-space:nowrap;font-variant-numeric:tabular-nums}
.pos-badge--sm{height:22px;padding:0 8px;font-size:12px}
.pos-badge--neutral{background:var(--bg-raised-2);color:var(--text-secondary);border-color:var(--border-default)}
.pos-badge--accent{background:var(--accent-soft-bg);color:var(--accent-text);border-color:var(--accent-soft-border)}
.pos-badge--success{background:var(--success-soft-bg);color:var(--success-text);border-color:var(--success-soft-border)}
.pos-badge--warning{background:var(--warning-soft-bg);color:var(--warning-text);border-color:var(--warning-soft-border)}
.pos-badge--danger{background:var(--danger-soft-bg);color:var(--danger-text);border-color:var(--danger-soft-border)}
.pos-badge--info{background:var(--info-soft-bg);color:var(--info-text);border-color:var(--info-soft-border)}
.pos-badge--solid.pos-badge--accent{background:var(--accent-fill);color:var(--accent-on-fill);border-color:transparent}
.pos-badge--solid.pos-badge--success{background:var(--success-fill);color:var(--success-on-fill);border-color:transparent}
.pos-badge--solid.pos-badge--warning{background:var(--warning-fill);color:var(--warning-on-fill);border-color:transparent}
.pos-badge--solid.pos-badge--danger{background:var(--danger-fill);color:var(--danger-on-fill);border-color:transparent}
.pos-badge--solid.pos-badge--info{background:var(--info-fill);color:var(--info-on-fill);border-color:transparent}
.pos-badge--solid.pos-badge--neutral{background:var(--bg-inverse);color:var(--text-inverse);border-color:transparent}
/* Field (Input / Select) */
.pos-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.pos-field__label{font:var(--fw-semibold) var(--fs-small)/var(--lh-snug) var(--font-ui);color:var(--text-secondary)}
.pos-field__helper{min-height:1lh;font:var(--fw-regular) var(--fs-caption)/var(--lh-snug) var(--font-ui);color:var(--text-tertiary)}
.pos-field__helper--error{color:var(--danger-text);font-weight:var(--fw-medium)}
.pos-input{display:flex;align-items:center;gap:var(--space-2);height:var(--hit-md);padding:0 var(--space-4);background:var(--bg-sunken);color:var(--text-primary);border:var(--border-w) solid var(--border-default);border-radius:var(--radius-md);outline:var(--focus-w) solid transparent;outline-offset:1px;transition:background-color var(--dur-fast)}
.pos-input--lg{height:var(--hit-lg);font-size:var(--fs-title)}
.pos-input:focus-within{outline-color:var(--focus-ring);border-color:var(--border-strong)}
.pos-input--error{border-color:var(--danger-text)}
.pos-input--disabled{opacity:.5;cursor:not-allowed}
.pos-input input,.pos-input select{flex:1;min-width:0;height:100%;border:0;background:transparent;color:inherit;font:var(--fw-medium) var(--fs-body)/1 var(--font-ui);outline:none;appearance:none}
.pos-input--lg input{font-size:var(--fs-title)}
.pos-input input::placeholder{color:var(--text-tertiary)}
.pos-input select{cursor:pointer;padding-right:var(--space-2)}
.pos-input select option{background:var(--bg-raised);color:var(--text-primary)}
.pos-input .pos-icon{color:var(--icon-secondary)}
.pos-input__slot{display:flex;align-items:center;justify-content:center;width:24px;flex:none;color:var(--icon-secondary)}
/* Choice (Checkbox / Radio / Switch) */
.pos-choice{display:inline-flex;align-items:center;gap:var(--space-3);min-height:var(--hit-min);cursor:pointer;font:var(--fw-medium) var(--fs-body)/var(--lh-snug) var(--font-ui);color:var(--text-primary);user-select:none}
.pos-choice--disabled{opacity:.45;cursor:not-allowed}
.pos-choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.pos-check{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;border:var(--border-w-strong) solid var(--border-strong);background:var(--bg-sunken);color:transparent;transition:background-color var(--dur-fast),border-color var(--dur-fast)}
.pos-choice input:checked+.pos-check{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-on-fill)}
.pos-choice input:focus-visible+.pos-check,.pos-choice input:focus-visible+.pos-switch{outline:var(--focus-w) solid var(--focus-ring);outline-offset:2px}
.pos-switch{flex:none;position:relative;width:56px;height:32px;border-radius:var(--radius-pill);background:var(--bg-control-hover);border:var(--border-w) solid var(--border-strong);transition:background-color var(--dur-base) var(--ease-out)}
.pos-switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--text-secondary);transition:transform var(--dur-base) var(--ease-out),background-color var(--dur-base)}
.pos-choice input:checked+.pos-switch{background:var(--accent-fill);border-color:var(--accent-fill)}
.pos-choice input:checked+.pos-switch::after{transform:translateX(24px);background:var(--accent-on-fill)}
.pos-choice__text{display:flex;flex-direction:column;gap:2px}
.pos-choice__desc{font:var(--fw-regular) var(--fs-caption)/var(--lh-snug) var(--font-ui);color:var(--text-tertiary)}
/* QtyStepper */
.pos-stepper{display:inline-flex;align-items:center;height:var(--hit-sm);background:var(--bg-sunken);border:var(--border-w) solid var(--border-default);border-radius:var(--radius-md);padding:3px}
.pos-stepper__btn{display:grid;place-items:center;height:100%;aspect-ratio:1;border:0;border-radius:calc(var(--radius-md) - 4px);background:var(--bg-control);color:var(--icon-primary);cursor:pointer;transition:transform var(--dur-instant)}
.pos-stepper__btn:active:not(:disabled){transform:scale(.92);background:var(--bg-control-pressed)}
.pos-stepper__btn:disabled{color:var(--icon-disabled);cursor:not-allowed}
.pos-stepper__val{min-width:44px;text-align:center;font:var(--fw-bold) var(--fs-label)/1 var(--font-ui);font-variant-numeric:tabular-nums}
/* Tabs (segmented) */
.pos-tabs{display:flex;gap:var(--space-2);overflow-x:auto;scrollbar-width:none;padding:2px}
.pos-tabs::-webkit-scrollbar{display:none}
.pos-tabs--segmented{gap:4px;padding:4px;background:var(--bg-sunken);border:var(--border-w) solid var(--border-subtle);border-radius:var(--radius-md)}
.pos-tab{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--hit-sm);padding:0 var(--space-4);border:var(--border-w) solid var(--border-default);border-radius:var(--radius-pill);background:var(--bg-control);color:var(--text-secondary);font:var(--fw-semibold) var(--fs-body)/1 var(--font-ui);white-space:nowrap;cursor:pointer;transition:background-color var(--dur-fast),color var(--dur-fast)}
.pos-tab:active{transform:scale(var(--press-scale))}
.pos-tab[aria-selected="true"]{background:var(--bg-inverse);color:var(--text-inverse);border-color:var(--bg-inverse)}
.pos-tabs--segmented .pos-tab{flex:1;border:0;border-radius:calc(var(--radius-md) - 4px);background:transparent;height:calc(var(--hit-sm) - 8px)}
.pos-tabs--segmented .pos-tab[aria-selected="true"]{background:var(--bg-raised-2);color:var(--text-primary);box-shadow:var(--shadow-1)}
.pos-tab__count{min-width:22px;height:22px;padding:0 6px;border-radius:var(--radius-pill);background:var(--bg-raised-2);color:var(--text-secondary);font:var(--fw-bold) 12px/22px var(--font-ui);font-variant-numeric:tabular-nums}
.pos-tab[aria-selected="true"] .pos-tab__count{background:var(--accent-fill);color:var(--accent-on-fill)}
/* Toast */
.pos-toast{display:flex;align-items:center;gap:var(--space-3);min-height:var(--hit-lg);width:min(100%,440px);padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4);background:var(--bg-inverse);color:var(--text-inverse);border-radius:var(--radius-lg);box-shadow:var(--shadow-3)}
.pos-toast__mark{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;flex:none}
.pos-toast__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pos-toast__title{font:var(--fw-bold) var(--fs-body)/var(--lh-snug) var(--font-ui)}
.pos-toast__msg{font:var(--fw-regular) var(--fs-small)/var(--lh-snug) var(--font-ui);opacity:.8}
.pos-toast__action{flex:none;height:var(--hit-min);padding:0 var(--space-4);border:0;border-radius:var(--radius-md);background:transparent;color:inherit;font:var(--fw-bold) var(--fs-body)/1 var(--font-ui);text-decoration:underline;text-underline-offset:4px;cursor:pointer}