:root{--primary: #0284c7;--primary-hover: #0369a1;--primary-light: #e0f2fe;--primary-glow: rgba(2, 132, 199, .25);--secondary: #0d9488;--secondary-light: #ccfbf1;--success: #10b981;--success-light: #d1fae5;--warning: #f59e0b;--warning-light: #fef3c7;--danger: #ef4444;--danger-light: #fee2e2;--bg-app: #0f172a;--bg-surface: #1e293b;--bg-surface-elevated: #334155;--bg-card: rgba(30, 41, 59, .7);--bg-glass: rgba(15, 23, 42, .75);--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--border-subtle: rgba(148, 163, 184, .15);--border-focus: #38bdf8;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 18px;--radius-full: 9999px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .15);--shadow-md: 0 4px 20px rgba(0, 0, 0, .25);--shadow-lg: 0 10px 30px rgba(0, 0, 0, .4);--shadow-glow: 0 0 25px rgba(2, 132, 199, .35);--font-main: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;overflow-x:hidden;font-family:var(--font-main);background-color:var(--bg-app);color:var(--text-primary);line-height:1.5;-webkit-font-smoothing:antialiased}#root{min-height:100vh;display:flex;flex-direction:column}.app-layout{display:flex;flex-direction:column;min-height:100vh;max-width:600px;margin:0 auto;position:relative;background-color:var(--bg-app);box-shadow:0 0 50px #00000080;padding-bottom:76px}@media(min-width:768px){.app-layout{max-width:720px}}@media(min-width:1024px){.app-layout{max-width:860px}}.top-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--bg-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle);position:sticky;top:0;z-index:40}.brand-badge{display:flex;align-items:center;gap:10px}.brand-icon-wrap{width:38px;height:38px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--shadow-glow)}.brand-title{font-size:1.15rem;font-weight:700;letter-spacing:-.02em;color:var(--text-primary);line-height:1.2}.brand-subtitle{font-size:.72rem;color:var(--text-secondary);font-weight:500;display:flex;align-items:center;gap:6px}.edge-badge{background:#0284c733;color:#38bdf8;padding:2px 6px;border-radius:4px;font-size:.65rem;font-weight:600;border:1px solid rgba(56,189,248,.3)}.header-actions{display:flex;align-items:center;gap:8px}.icon-btn{background:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-secondary);width:38px;height:38px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.icon-btn:hover{background:var(--bg-surface-elevated);color:var(--text-primary);border-color:var(--border-focus)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:var(--radius-md);font-size:.92rem;font-weight:600;cursor:pointer;transition:all .2s ease;border:none;text-decoration:none}.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,#0369a1 100%);color:#fff;box-shadow:var(--shadow-glow)}.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--bg-surface-elevated);color:var(--text-primary);border:1px solid var(--border-subtle)}.btn-secondary:hover{background:#475569}.btn-success{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.btn-danger{background:#ef444426;color:#f87171;border:1px solid rgba(239,68,68,.3)}.btn-danger:hover{background:#ef444440}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:600px;height:68px;background:#0f172aeb;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-around;padding:0 10px;z-index:50}@media(min-width:768px){.bottom-nav{max-width:720px}}@media(min-width:1024px){.bottom-nav{max-width:860px}}.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:8px 12px;border-radius:var(--radius-sm);transition:all .2s ease;position:relative;font-size:.75rem;font-weight:500}.nav-item.active{color:#38bdf8}.nav-item.active .nav-icon-wrap{transform:scale(1.1);color:#38bdf8}.nav-badge{position:absolute;top:4px;right:12px;background:var(--danger);color:#fff;font-size:.65rem;font-weight:700;padding:1px 6px;border-radius:var(--radius-full)}.nav-center-scan{margin-top:-24px}.scan-shutter-btn{width:54px;height:54px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);border:3px solid var(--bg-app);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px #0284c780;cursor:pointer;transition:all .25s ease}.scan-shutter-btn:hover{transform:scale(1.08);box-shadow:0 6px 25px #0284c7b3}.page-view{padding:16px 20px 24px;display:flex;flex-direction:column;gap:20px;animation:fadeIn .25s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.counter-card{background:linear-gradient(135deg,#1e293be6,#0f172acc);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:20px;position:relative;overflow:hidden}.counter-card:before{content:"";position:absolute;top:-40%;right:-20%;width:200px;height:200px;background:radial-gradient(circle,var(--primary-glow) 0%,transparent 70%);pointer-events:none}.counter-badge{display:inline-flex;align-items:center;gap:6px;background:#10b98126;color:#34d399;padding:4px 10px;border-radius:var(--radius-full);font-size:.75rem;font-weight:600;margin-bottom:12px}.counter-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}.counter-stat-box{background:#0f172a99;border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:12px 14px}.counter-stat-label{font-size:.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}.counter-stat-val{font-size:1.3rem;font-weight:700;color:var(--text-primary);margin-top:4px;font-family:var(--font-mono)}.actions-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.action-tile{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:18px 16px;display:flex;flex-direction:column;gap:10px;cursor:pointer;transition:all .2s ease;text-align:left}.action-tile:hover{background:var(--bg-surface-elevated);border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.action-tile-icon{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.2rem}.icon-blue{background:#0284c733;color:#38bdf8}.icon-teal{background:#0d948833;color:#2dd4bf}.icon-purple{background:#a855f733;color:#c084fc}.icon-emerald{background:#10b98133;color:#34d399}.action-tile-title{font-size:.95rem;font-weight:600;color:var(--text-primary)}.action-tile-desc{font-size:.75rem;color:var(--text-secondary)}.scanner-viewport{position:relative;width:100%;height:460px;max-height:65vh;background:#000;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}.scanner-video{width:100%;height:100%;object-fit:cover}.scanner-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:space-between;padding:16px;pointer-events:none}.scanner-guide-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;height:46%;border:2px dashed rgba(56,189,248,.75);border-radius:var(--radius-md);box-shadow:0 0 0 9999px #00000085;display:flex;align-items:center;justify-content:center;overflow:hidden}.scanner-guide-box.detected{border-color:#10b981;border-style:solid;box-shadow:0 0 0 9999px #00000085,0 0 30px #10b98199;transition:all .15s ease}.scanner-laser-line{position:absolute;left:0;width:100%;height:3px;background:linear-gradient(90deg,#38bdf800,#38bdf8,#38bdf800);box-shadow:0 0 14px #38bdf8,0 0 24px #38bdf8cc;animation:scanLaser 1.8s ease-in-out infinite alternate;pointer-events:none}.scanner-laser-line.detected{background:linear-gradient(90deg,#10b98100,#10b981,#10b98100);box-shadow:0 0 20px #10b981,0 0 35px #10b981e6}@keyframes scanLaser{0%{top:5%;opacity:.5}50%{opacity:1}to{top:92%;opacity:.5}}.auto-scan-badge{position:absolute;top:14px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px;background:#0f172ad9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(56,189,248,.35);padding:6px 14px;border-radius:var(--radius-full);font-size:.78rem;font-weight:600;color:#38bdf8;z-index:5;box-shadow:0 4px 16px #0006;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .2s ease}.auto-scan-badge:hover{background:#0f172af2;border-color:#38bdf899}.radar-dot{width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 8px #10b981;animation:radarPulse 1.4s ease-out infinite}.radar-dot-inactive{width:8px;height:8px;border-radius:50%;background:#94a3b8}.zoom-controls{position:absolute;bottom:48px;right:12px;display:flex;flex-direction:column;gap:6px;z-index:10}.zoom-btn{width:38px;height:38px;border-radius:var(--radius-full);background:#0f172acc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px #0006;transition:all .15s ease}.zoom-btn:hover{background:#1e293be6;border-color:#38bdf8}.zoom-btn.active{background:#0284c7;border-color:#38bdf8;color:#fff;box-shadow:0 0 14px #38bdf8cc}@keyframes radarPulse{0%{transform:scale(.9);opacity:1}50%{transform:scale(1.4);opacity:.4}to{transform:scale(.9);opacity:1}}.scanner-corner{position:absolute;width:20px;height:20px;border-color:#38bdf8;border-style:solid}.corner-tl{top:-2px;left:-2px;border-width:3px 0 0 3px;border-top-left-radius:8px}.corner-tr{top:-2px;right:-2px;border-width:3px 3px 0 0;border-top-right-radius:8px}.corner-bl{bottom:-2px;left:-2px;border-width:0 0 3px 3px;border-bottom-left-radius:8px}.corner-br{bottom:-2px;right:-2px;border-width:0 3px 3px 0;border-bottom-right-radius:8px}.scanner-toast{position:absolute;top:56px;left:50%;transform:translate(-50%);background:#10b981f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;padding:8px 18px;border-radius:var(--radius-full);font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:10px;box-shadow:0 4px 20px #10b98180;z-index:25;white-space:nowrap;animation:fadeIn .15s ease-out}.scanner-cart-bar{position:fixed;bottom:80px;left:16px;right:16px;max-width:480px;margin:0 auto;background:#0f172af0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(56,189,248,.4);border-radius:var(--radius-lg);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 8px 30px #00000080;z-index:30;animation:fadeIn .2s ease-out}.scanner-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:16px}.shutter-trigger{width:68px;height:68px;border-radius:var(--radius-full);background:#fff;border:4px solid var(--primary);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 25px #0284c799;transition:transform .15s ease}.shutter-trigger:hover{transform:scale(1.06)}.shutter-trigger:active{transform:scale(.95)}.shutter-inner{width:52px;height:52px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172ad9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:16px;z-index:100;animation:fadeIn .2s ease-out}.modal-content{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;padding:24px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:16px;animation:slideUp .25s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-subtle);padding-bottom:12px}.modal-title{font-size:1.15rem;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:8px}.form-group{display:flex;flex-direction:column;gap:6px}.form-label{font-size:.78rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em}.form-input{background:#0f172a99;border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:11px 14px;color:var(--text-primary);font-size:.95rem;font-family:inherit;transition:all .2s ease}.form-input:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px #38bdf833}.stepper{display:flex;align-items:center;gap:12px}.stepper-btn{width:40px;height:40px;border-radius:var(--radius-md);background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);color:var(--text-primary);font-size:1.2rem;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease}.stepper-btn:hover{background:#475569}.stepper-val{font-size:1.25rem;font-weight:700;font-family:var(--font-mono);min-width:40px;text-align:center}.cart-item{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}.cart-item-name{font-weight:600;font-size:.95rem;color:var(--text-primary)}.cart-item-meta{font-size:.75rem;color:var(--text-muted);display:flex;gap:8px;margin-top:2px}.discount-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}.discount-chip{padding:6px 14px;border-radius:var(--radius-full);background:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-secondary);font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .2s ease}.discount-chip.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:var(--shadow-glow)}.bill-summary-box{background:#0f172ab3;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:16px;display:flex;flex-direction:column;gap:10px}.summary-row{display:flex;justify-content:space-between;font-size:.9rem;color:var(--text-secondary)}.summary-row.total{border-top:1px dashed var(--border-subtle);padding-top:10px;font-size:1.25rem;font-weight:800;color:#38bdf8;font-family:var(--font-mono)}.receipt-paper{background:#fff;color:#000;font-family:Courier New,Courier,monospace;padding:20px;border-radius:var(--radius-md);box-shadow:0 4px 15px #0006;max-width:380px;margin:0 auto;font-size:12px;line-height:1.4}.receipt-header{text-align:center;border-bottom:1px dashed #000;padding-bottom:8px;margin-bottom:8px}.receipt-shop-name{font-size:16px;font-weight:700;text-transform:uppercase}.receipt-table{width:100%;border-collapse:collapse;margin:8px 0;font-size:11px}.receipt-table th{border-bottom:1px dashed #000;text-align:left;padding:4px 0}.receipt-table td{padding:4px 0}.receipt-footer{border-top:1px dashed #000;padding-top:8px;margin-top:8px;text-align:center;font-size:10px}@media print{body *{visibility:hidden}.print-only,.receipt-paper,.receipt-paper *{visibility:visible}.receipt-paper{position:absolute;left:0;top:0;width:100%!important;max-width:80mm!important;margin:0!important;padding:10px!important;box-shadow:none!important;border:none!important}.no-print{display:none!important}}