@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap";:root{--bg-app: #0a0a12;--bg-surface: rgba(18, 18, 28, .82);--bg-raised: rgba(28, 28, 42, .65);--bg-hover: rgba(40, 40, 60, .7);--bg-active: rgba(55, 55, 80, .7);--bg-card: rgba(22, 22, 36, .55);--border: rgba(255, 255, 255, .06);--border-light: rgba(255, 255, 255, .1);--border-glow: rgba(160, 120, 255, .15);--text-primary: #f2f2f8;--text-secondary: #9d9dba;--text-muted: #5e5e80;--accent: #a06cff;--accent-hover: #b88aff;--accent-glow: rgba(160, 108, 255, .22);--accent-subtle: rgba(160, 108, 255, .08);--success: #3ae8a0;--success-glow: rgba(58, 232, 160, .18);--danger: #ff6b6b;--danger-glow: rgba(255, 107, 107, .15);--warning: #ffcc33;--warning-glow: rgba(255, 204, 51, .15);--cyan: #22d3ee;--pink: #f472b6;--orange: #fb923c;--lime: #a3e635;--rose: #fb7185;--radius-sm: 10px;--radius-md: 14px;--radius-lg: 18px;--radius-xl: 24px;--shadow-sm: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);--shadow-md: 0 6px 16px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.2);--shadow-lg: 0 16px 48px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.25);--shadow-glow: 0 0 40px rgba(160, 108, 255, .1);--transition: .2s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.22, 1, .36, 1);--spring: .4s cubic-bezier(.16, 1, .3, 1);color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden;background:var(--bg-app);color:var(--text-primary)}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;font-size:inherit}input{font-family:inherit;border:none;background:none;color:inherit;outline:none}.pos-app{display:flex;flex-direction:column;height:100vh;overflow:hidden;position:relative}.ambient-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;overflow:hidden}.ambient-orb{position:absolute;border-radius:50%;filter:blur(120px);animation:orbFloat 20s ease-in-out infinite alternate}.ambient-orb--violet{width:550px;height:550px;background:radial-gradient(circle,rgba(140,80,255,.4) 0%,rgba(100,60,220,.15) 40%,transparent 70%);top:-12%;left:-8%;animation-duration:22s}.ambient-orb--blue{width:450px;height:450px;background:radial-gradient(circle,rgba(34,211,238,.3) 0%,rgba(59,130,246,.12) 40%,transparent 70%);bottom:-15%;right:-5%;animation-duration:28s;animation-delay:-6s}.ambient-orb--rose{width:380px;height:380px;background:radial-gradient(circle,rgba(244,114,182,.3) 0%,rgba(251,113,133,.1) 40%,transparent 70%);top:45%;left:25%;animation-duration:24s;animation-delay:-12s}.ambient-orb--lime{width:300px;height:300px;background:radial-gradient(circle,rgba(163,230,53,.2) 0%,transparent 60%);bottom:10%;left:10%;animation-duration:20s;animation-delay:-4s}.ambient-noise{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");background-repeat:repeat;background-size:256px 256px}.pos-body{display:flex;flex:1;overflow:hidden;position:relative;z-index:2}.pos-main{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:0 28px 28px}.pos-header{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;background:#0c0c14d9;backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);border-bottom:1px solid var(--border);gap:24px;flex-shrink:0;position:relative;z-index:10}.pos-header:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,#a06cff 15%,#22d3ee 35%,#f472b6 55%,#fb923c 75%,transparent 100%);opacity:.4}.header-left{display:flex;align-items:center;gap:16px;flex-shrink:0}.logo{display:flex;align-items:center;gap:10px}.logo-icon{font-size:1.5rem;filter:drop-shadow(0 0 12px rgba(160,108,255,.5));animation:logoPulse 3s ease-in-out infinite}@keyframes logoPulse{0%,to{filter:drop-shadow(0 0 12px rgba(160,108,255,.5))}50%{filter:drop-shadow(0 0 20px rgba(160,108,255,.7))}}.logo-text{font-size:1.35rem;font-weight:900;letter-spacing:-.04em;background:linear-gradient(135deg,#fff,#c8b8ff 40%,#a06cff,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% 200%;animation:gradientShift 6s ease-in-out infinite}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.header-divider{width:1px;height:28px;background:linear-gradient(to bottom,transparent,rgba(160,108,255,.25),transparent)}.header-info{display:flex;flex-direction:column;gap:1px}.header-date{font-size:.68rem;color:var(--text-muted);letter-spacing:.03em;font-weight:400}.header-time{font-size:.88rem;font-weight:600;font-variant-numeric:tabular-nums;background:linear-gradient(90deg,#a06cff,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.02em}.header-center{flex:1;max-width:460px}.search-wrapper{position:relative;display:flex;align-items:center}.search-icon{position:absolute;left:16px;width:17px;height:17px;color:var(--text-muted);pointer-events:none;transition:color var(--transition)}.search-input{width:100%;padding:11px 40px 11px 44px;background:#191928b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:var(--radius-md);font-size:.88rem;font-weight:400;color:var(--text-primary);letter-spacing:.01em;transition:all var(--transition)}.search-input::placeholder{color:var(--text-muted);font-weight:400}.search-input:focus{border-color:#a06cff59;box-shadow:0 0 0 3px #a06cff1a,0 0 24px #a06cff14;background:#191928e6}.search-wrapper:focus-within .search-icon{color:var(--accent)}.search-clear{position:absolute;right:10px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:1.1rem;color:var(--text-muted);transition:all var(--transition)}.search-clear:hover{background:var(--bg-hover);color:var(--text-primary)}.header-right{flex-shrink:0}.cashier-info{display:flex;align-items:center;gap:12px;padding:6px 12px 6px 6px;border-radius:var(--radius-md);transition:background var(--transition)}.cashier-info:hover{background:#a06cff0f}.cashier-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#a06cff,#f472b6,#fb923c);background-size:200% 200%;animation:gradientShift 5s ease-in-out infinite;display:grid;place-items:center;font-size:.72rem;font-weight:700;letter-spacing:.05em;color:#fff;box-shadow:0 0 18px #a06cff4d}.cashier-details{display:flex;flex-direction:column;gap:0px}.cashier-name{font-size:.82rem;font-weight:600;color:var(--text-primary)}.cashier-role{font-size:.68rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;font-weight:500}.category-bar{display:flex;gap:8px;padding:20px 0 18px;overflow-x:auto;scrollbar-width:none;flex-shrink:0}.category-bar::-webkit-scrollbar{display:none}.category-pill{padding:9px 22px;border-radius:100px;font-size:.8rem;font-weight:500;letter-spacing:.01em;white-space:nowrap;background:#19192880;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border);color:var(--text-secondary);transition:all var(--transition)}.category-pill:hover{background:#2d284699;color:var(--text-primary);border-color:#a06cff26;transform:translateY(-1px)}.category-pill.active{background:linear-gradient(135deg,#a06cff40,#22d3ee1f);color:#e0d4ff;border-color:#a06cff4d;box-shadow:0 2px 20px #a06cff26,inset 0 1px #ffffff0f;font-weight:600}.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:14px;overflow-y:auto;padding-bottom:28px;flex:1;align-content:start}.product-grid::-webkit-scrollbar{width:5px}.product-grid::-webkit-scrollbar-track{background:transparent}.product-grid::-webkit-scrollbar-thumb{background:#a06cff26;border-radius:10px}.product-grid::-webkit-scrollbar-thumb:hover{background:#a06cff40}.product-card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 14px 18px;background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all var(--transition-slow);position:relative;overflow:hidden}.product-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent 10%,var(--card-accent, var(--accent)) 50%,transparent 90%);opacity:0;transition:opacity var(--transition)}.product-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--radius-lg);background:radial-gradient(circle at 50% 0%,var(--card-accent, rgba(160,108,255,.1)) 0%,transparent 55%);opacity:0;transition:opacity var(--transition);pointer-events:none}.product-card:hover{background:#231e37b3;border-color:#ffffff1a;transform:translateY(-4px) scale(1.02);box-shadow:0 8px 24px #0000004d,0 0 30px color-mix(in srgb,var(--card-accent, var(--accent)) 15%,transparent)}.product-card:hover:before{opacity:.9}.product-card:hover:after{opacity:1}.product-card:active{transform:translateY(-1px) scale(.97);transition-duration:80ms}.product-emoji{font-size:2.6rem;line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));transition:transform var(--transition-slow)}.product-card:hover .product-emoji{transform:scale(1.15) rotate(-3deg)}.product-info{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}.product-name{font-size:.84rem;font-weight:600;color:var(--text-primary);letter-spacing:.01em}.product-price{font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums;background:linear-gradient(90deg,var(--card-accent, var(--accent)),#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.products-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:80px 20px;color:var(--text-muted);grid-column:1 / -1}.empty-icon{font-size:3rem;opacity:.35}.products-empty p{font-size:.9rem;font-weight:400}.cart-panel{width:390px;min-width:390px;display:flex;flex-direction:column;background:#0e0e18c7;backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5);border-left:1px solid var(--border);flex-shrink:0;position:relative}.cart-panel:before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:linear-gradient(to bottom,rgba(160,108,255,.2),rgba(34,211,238,.1) 30%,transparent 50%,rgba(244,114,182,.1) 70%,rgba(160,108,255,.15))}.cart-header{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 18px;border-bottom:1px solid var(--border);flex-shrink:0}.cart-title{font-size:1.05rem;font-weight:700;display:flex;align-items:center;gap:10px;letter-spacing:-.02em}.cart-badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 8px;border-radius:100px;background:linear-gradient(135deg,#a06cff,#f472b6);color:#fff;font-size:.7rem;font-weight:700;box-shadow:0 2px 12px #a06cff4d}.cart-clear-btn{font-size:.76rem;font-weight:500;color:var(--danger);padding:6px 14px;border-radius:var(--radius-sm);transition:all var(--transition);letter-spacing:.01em}.cart-clear-btn:hover{background:var(--danger-glow);text-shadow:0 0 12px rgba(255,107,107,.3)}.cart-items-wrapper{flex:1;overflow-y:auto;padding:6px 0}.cart-items-wrapper::-webkit-scrollbar{width:5px}.cart-items-wrapper::-webkit-scrollbar-track{background:transparent}.cart-items-wrapper::-webkit-scrollbar-thumb{background:#a06cff1f;border-radius:10px}.cart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:70px 24px;color:var(--text-muted);text-align:center}.cart-empty-icon{font-size:3rem;opacity:.25;animation:cartBounce 2s ease-in-out infinite}@keyframes cartBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.cart-empty p{font-size:.84rem;line-height:1.6;font-weight:400;max-width:200px}.cart-items{display:flex;flex-direction:column;gap:1px}.cart-item{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;gap:12px;transition:background var(--transition);border-bottom:1px solid rgba(255,255,255,.02)}.cart-item:hover{background:#a06cff0a}.cart-item-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1}.cart-item-icon{width:40px;height:40px;border-radius:var(--radius-sm);display:grid;place-items:center;font-size:1.15rem;flex-shrink:0;transition:transform var(--transition);position:relative}.cart-item:hover .cart-item-icon{transform:scale(1.1)}.cart-item-details{display:flex;flex-direction:column;gap:2px;min-width:0}.cart-item-name{font-size:.84rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}.cart-item-unit{font-size:.7rem;color:var(--text-muted);font-weight:400}.cart-item-right{display:flex;align-items:center;gap:14px;flex-shrink:0}.quantity-controls{display:flex;align-items:center;gap:0;background:#0a0a12b3;border-radius:var(--radius-sm);border:1px solid var(--border)}.qty-btn{width:30px;height:30px;display:grid;place-items:center;font-size:.85rem;color:var(--text-secondary);border-radius:var(--radius-sm);transition:all var(--transition)}.qty-btn:hover{background:#a06cff1f;color:var(--accent)}.qty-value{width:28px;text-align:center;font-size:.82rem;font-weight:600;font-variant-numeric:tabular-nums}.cart-item-total{font-size:.85rem;font-weight:600;font-variant-numeric:tabular-nums;min-width:56px;text-align:right;color:var(--text-primary)}.cart-footer{border-top:1px solid var(--border);padding:22px 24px 26px;flex-shrink:0;background:#0a0a1266}.cart-totals{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}.total-row{display:flex;justify-content:space-between;font-size:.84rem;color:var(--text-secondary);font-variant-numeric:tabular-nums;font-weight:400}.total-grand{font-size:1.25rem;font-weight:800;padding-top:12px;border-top:1px solid var(--border);margin-top:6px;letter-spacing:-.02em;background:linear-gradient(90deg,#a06cff,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.payment-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.pay-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:16px 8px;border-radius:var(--radius-md);font-size:.76rem;font-weight:600;letter-spacing:.02em;transition:all var(--transition-slow);border:1px solid transparent;position:relative;overflow:hidden}.pay-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;opacity:0;transition:opacity var(--transition)}.pay-icon{font-size:1.35rem;transition:transform var(--transition-slow)}.pay-btn:hover .pay-icon{transform:scale(1.2)}.pay-cash{background:#3ae8a01a;color:var(--success);border-color:#3ae8a033}.pay-cash:before{background:radial-gradient(circle at 50% 120%,rgba(58,232,160,.2),transparent 60%)}.pay-cash:hover{background:#3ae8a02e;border-color:#3ae8a059;box-shadow:0 6px 28px #3ae8a026,0 0 40px #3ae8a00f;transform:translateY(-2px)}.pay-cash:hover:before{opacity:1}.pay-card{background:#a06cff1a;color:var(--accent-hover);border-color:#a06cff33}.pay-card:before{background:radial-gradient(circle at 50% 120%,rgba(160,108,255,.2),transparent 60%)}.pay-card:hover{background:#a06cff2e;border-color:#a06cff59;box-shadow:0 6px 28px #a06cff26,0 0 40px #a06cff0f;transform:translateY(-2px)}.pay-card:hover:before{opacity:1}.pay-digital{background:#fb923c1a;color:var(--orange);border-color:#fb923c33}.pay-digital:before{background:radial-gradient(circle at 50% 120%,rgba(251,146,60,.2),transparent 60%)}.pay-digital:hover{background:#fb923c2e;border-color:#fb923c59;box-shadow:0 6px 28px #fb923c26,0 0 40px #fb923c0f;transform:translateY(-2px)}.pay-digital:hover:before{opacity:1}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);display:grid;place-items:center;z-index:100;animation:fadeIn .25s ease-out}.receipt-modal{background:#141420f0;backdrop-filter:blur(40px) saturate(1.6);-webkit-backdrop-filter:blur(40px) saturate(1.6);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-xl);width:400px;max-width:90vw;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg),0 0 80px #3ae8a014,0 0 120px #a06cff0a;animation:slideUp .35s cubic-bezier(.16,1,.3,1)}.receipt-success{display:flex;flex-direction:column;align-items:center;gap:12px;padding:36px 24px 24px}.success-checkmark{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#3ae8a033,#22d3ee1f);color:var(--success);display:grid;place-items:center;font-size:1.8rem;font-weight:700;animation:scaleIn .5s cubic-bezier(.16,1,.3,1);box-shadow:0 0 40px #3ae8a033}.receipt-success h2{font-size:1.15rem;font-weight:700;color:var(--text-primary);letter-spacing:-.02em}.success-method{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--text-secondary);font-weight:400}.receipt-body{padding:0 24px 24px}.receipt-line-items{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}.receipt-line{display:flex;justify-content:space-between;align-items:center;font-size:.82rem}.receipt-item-left{display:flex;align-items:center;gap:8px}.receipt-qty{color:var(--text-muted);font-size:.74rem;font-weight:400}.receipt-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border-light),transparent);margin:18px 0}.receipt-totals{display:flex;flex-direction:column;gap:10px}.receipt-row{display:flex;justify-content:space-between;font-size:.82rem;color:var(--text-secondary);font-weight:400}.receipt-total{font-size:1.15rem;font-weight:800;padding-top:10px;border-top:1px solid var(--border);margin-top:6px;letter-spacing:-.02em;background:linear-gradient(90deg,#a06cff,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.receipt-meta{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-muted);margin-top:18px;padding-top:14px;border-top:1px dashed var(--border);font-weight:400}.receipt-close-btn{width:calc(100% - 48px);margin:0 24px 28px;padding:16px;background:linear-gradient(135deg,#a06cff,#f472b6,#fb923c);background-size:200% 200%;animation:gradientShift 4s ease-in-out infinite;color:#fff;font-size:.92rem;font-weight:700;letter-spacing:.02em;border-radius:var(--radius-md);transition:all var(--transition-slow);box-shadow:0 4px 20px #a06cff40}.receipt-close-btn:hover{box-shadow:0 8px 32px #a06cff59,0 0 40px #f472b61a;transform:translateY(-2px)}.receipt-close-btn:active{transform:translateY(0)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(28px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.4)}50%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes orbFloat{0%{transform:translate(0) scale(1)}25%{transform:translate(35px,-25px) scale(1.06)}50%{transform:translate(-15px,20px) scale(.94)}75%{transform:translate(-30px,-10px) scale(1.04)}to{transform:translate(15px,15px) scale(.98)}}@media(max-width:900px){.pos-body{flex-direction:column}.cart-panel{width:100%;min-width:unset;max-height:45vh;border-left:none;border-top:1px solid var(--border)}.cart-panel:before{display:none}.product-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.header-info,.header-divider,.cashier-details{display:none}}@media(max-width:600px){.pos-header{padding:12px 16px}.pos-main{padding:0 16px 16px}.product-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}.product-card{padding:16px 10px 14px}.product-emoji{font-size:1.8rem}.cart-panel{width:100%;min-width:unset}}