:root{--bg: #f6f7f8;--bg-alt: #e9f1f3;--card: #ffffff;--text: #0c1b21;--text-light: #3d555e;--text-inverse: #ffffff;--border: #cbd5d9;--header-bg: #0e3b46;--header-accent: #164c57;--header-accent-hover: #1a5864;--header-error: #e84545;--primary: #0e8592;--primary-hover: #0a6f7a;--status-ready: #08c442;--status-busy: #ff9f00;--status-error: #e84545;--status-offline: #999;--panel-bg: #ffffff;--shadow-soft: 0 2px 6px rgba(0,0,0,.12);--shadow-card: 0 3px 12px rgba(0,0,0,.15);--box-shadow: 0 0 10px rgba(0,150,170,.28);--r-sm: 6px;--r-md: 10px;--r-lg: 16px;--space-sm: 6px;--space-md: 12px;--space-lg: 20px;--fs-xs: .75rem;--fs-sm: .9rem;--fs-md: 1rem;--fs-lg: 1.2rem;--fs-xl: 1.4rem;--overlay-surface: #ffffff;--overlay-surface-muted: #f2f6f7;--overlay-border: rgba(12, 27, 33, .08);--overlay-border-strong: rgba(12, 27, 33, .12);--overlay-border-heavy: rgba(12, 27, 33, .16);--overlay-text-muted: rgba(12, 27, 33, .65);--overlay-text-soft: rgba(12, 27, 33, .55);--overlay-button-bg: rgba(12, 27, 33, .04);--overlay-button-strong: rgba(12, 27, 33, .08);--overlay-button-hover: rgba(12, 27, 33, .12);--overlay-shadow: 0 24px 48px rgba(12, 27, 33, .18), 0 6px 20px rgba(12, 27, 33, .08);--accent-soft: rgba(14, 133, 146, .08);--accent-medium: rgba(14, 133, 146, .15);--accent-strong: rgba(14, 133, 146, .2);--accent-outline: rgba(14, 133, 146, .25);--accent-contrast: #0f172a;--shadow-accent: 0 8px 20px rgba(14, 133, 146, .25);--danger-soft: rgba(232, 69, 69, .15);--danger-border: rgba(232, 69, 69, .35);--danger-hover: #c53030;--surface-muted: rgba(12, 27, 33, .02);--surface-muted-hover: rgba(12, 27, 33, .04);--surface-muted-border: rgba(12, 27, 33, .15)}body.dark{--bg: #111b1e;--bg-alt: #152529;--card: #1b2f34;--text: #e4f5f9;--text-light: #9ebbc2;--text-inverse: #ffffff;--border: #284047;--header-bg: #0a2b33;--header-accent: #133a43;--header-accent-hover: #16444e;--primary: #1e9bb4;--primary-hover: #157b92;--panel-bg: #1d2f33;--status-ready: #0cff52;--status-busy: #ffb347;--status-error: #ff6b6b;--status-offline: #777;--shadow-soft: 0 2px 10px rgba(0,0,0,.5);--shadow-card: 0 3px 16px rgba(0,0,0,.6);--overlay-surface: rgba(17, 24, 39, .95);--overlay-surface-muted: rgba(15, 23, 42, .6);--overlay-border: rgba(255, 255, 255, .08);--overlay-border-strong: rgba(255, 255, 255, .12);--overlay-border-heavy: rgba(255, 255, 255, .18);--overlay-text-muted: rgba(248, 250, 252, .7);--overlay-text-soft: rgba(248, 250, 252, .6);--overlay-button-bg: rgba(248, 250, 252, .08);--overlay-button-strong: rgba(248, 250, 252, .12);--overlay-button-hover: rgba(248, 250, 252, .2);--overlay-shadow: 0 30px 60px rgba(15, 23, 42, .35), 0 2px 12px rgba(0, 0, 0, .25);--accent-soft: rgba(30, 155, 180, .12);--accent-medium: rgba(30, 155, 180, .2);--accent-strong: rgba(30, 155, 180, .28);--accent-outline: rgba(30, 155, 180, .35);--accent-contrast: #051014;--shadow-accent: 0 8px 20px rgba(30, 155, 180, .3);--danger-soft: rgba(255, 107, 107, .2);--danger-border: rgba(255, 107, 107, .4);--danger-hover: #ff5d5d;--surface-muted: rgba(255, 255, 255, .02);--surface-muted-hover: rgba(255, 255, 255, .04);--surface-muted-border: rgba(255, 255, 255, .15)}html,body,.pos-layout,button,.product-card,.category-btn,pp-card,pp-button,pp-modal{transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}html,body{margin:0;padding:0;font-family:Inter,sans-serif;height:100%;background:var(--bg);color:var(--text)}*{box-sizing:border-box}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:#b6c5c8;border-radius:8px}body.dark ::-webkit-scrollbar-thumb{background:#3e575c}.fade-in{animation:fadeIn .22s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.modal-backdrop{position:fixed;inset:0;background:#00000073;display:flex;justify-content:center;align-items:center;z-index:9000}.modal-backdrop.hidden{display:none;pointer-events:none}.modal-box{background:var(--card);border-radius:var(--r-lg);width:75vw;max-width:900px;max-height:85vh;box-shadow:var(--shadow-card);display:flex;flex-direction:column;overflow:hidden}.modal-box .header{background:var(--header-bg);color:var(--text-inverse);padding:var(--space-lg);text-align:center;font-size:var(--fs-xl);font-weight:600}.modal-box .body{flex:1;overflow-y:auto;padding:var(--space-lg);background:var(--card);color:var(--text)}.modal-box .actions{padding:var(--space-lg);background:var(--bg-alt);border-top:1px solid var(--border);display:flex;gap:var(--space-md)}.modal-box .actions button{flex:1;padding:var(--space-md);border-radius:var(--r-md);font-size:var(--fs-lg);font-weight:600;cursor:pointer;border:1px solid var(--border)}.modal-box .actions button:disabled{cursor:not-allowed;opacity:.45}.modal-box .actions .primary{background:var(--primary);color:var(--text-inverse);border:none}.modal-box .actions .primary:hover{background:var(--primary-hover)}.modal-box .actions .neutral:hover{background:var(--border)}