:root{--primary:#8b0000;--primary-hover:#720000;--primary-light:#fdf2f2;--primary-glow:#8b000026;--accent-gold:#d97706;--accent-gold-light:#fef3c7;--accent-amber:#f59e0b;--bg-main:#f8fafc;--bg-card:#fff;--bg-subtle:#f1f5f9;--border-light:#e2e8f0;--border-focus:#cbd5e1;--text-main:#0f172a;--text-muted:#64748b;--text-subtle:#94a3b8;--success:#10b981;--success-bg:#ecfdf5;--danger:#ef4444;--danger-bg:#fef2f2;--warning:#f59e0b;--warning-bg:#fffbeb;--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-xl:24px;--radius-pill:9999px;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #00000012, 0 2px 4px -2px #0000000d;--shadow-lg:0 10px 15px -3px #00000014, 0 4px 6px -4px #0000000a;--shadow-card:0 2px 8px -2px #0f172a0f, 0 1px 3px 0 #0f172a0a;--font-main:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", monospace;--safe-bottom:env(safe-area-inset-bottom,16px)}*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{background-color:var(--bg-main);width:100%;height:100%;color:var(--text-main);font-family:var(--font-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0;font-size:15px;line-height:1.5;overflow:hidden}#root{flex-direction:column;width:100%;height:100%;display:flex;overflow:hidden}h1,h2,h3,h4,h5{color:var(--text-main);font-weight:700;line-height:1.25}p{color:var(--text-muted)}a{color:var(--primary);text-decoration:none}button{cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:none;font-family:inherit}input,select,textarea{color:var(--text-main);font-family:inherit;font-size:15px}.app-container{background-color:var(--bg-main);border-left:1px solid var(--border-light);border-right:1px solid var(--border-light);flex-direction:column;width:100%;max-width:580px;height:100dvh;margin:0 auto;display:flex;position:relative;overflow:hidden}@media (width<=600px){.app-container{border-left:none;border-right:none}}.app-header{z-index:40;-webkit-backdrop-filter:blur(10px);border-bottom:1.5px solid var(--border-light);background:#fffffffa;flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.header-brand{align-items:center;gap:10px;display:flex}.header-logo{border-radius:var(--radius-sm);object-fit:contain;background:#fff;width:auto;height:38px;padding:2px;box-shadow:0 1px 3px #0000001a}.header-title-wrap h1{letter-spacing:-.01em;color:var(--primary);align-items:center;gap:6px;font-size:17px;display:flex}.header-subtitle{color:var(--text-muted);font-size:11px;font-weight:500}.header-badge{border-radius:var(--radius-pill);background:var(--primary-light);color:var(--primary);align-items:center;gap:4px;padding:4px 8px;font-size:11px;font-weight:600;display:inline-flex}.header-badge.connected{background:var(--success-bg);color:var(--success)}.main-content{-webkit-overflow-scrolling:touch;flex:1;padding:16px 16px 30px;overflow:hidden auto}.bottom-nav{z-index:50;-webkit-backdrop-filter:blur(16px);border-top:1.5px solid var(--border-light);padding:6px 8px calc(6px + var(--safe-bottom));background:#fffffffa;flex-shrink:0;justify-content:space-around;align-items:center;width:100%;box-shadow:0 -4px 20px #00000014;display:flex!important}.nav-tab-btn{border-radius:var(--radius-md);min-width:58px;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:6px 10px;font-size:11px;font-weight:600;transition:all .15s;display:flex}.nav-tab-btn.active{color:var(--primary);background-color:var(--primary-light)}.nav-tab-btn svg{width:20px;height:20px}.card{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-light);box-shadow:var(--shadow-card);margin-bottom:16px;padding:16px}.card-header{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.card-title{color:var(--text-main);align-items:center;gap:8px;font-size:16px;font-weight:700;display:flex}.btn{border-radius:var(--radius-md);text-align:center;justify-content:center;align-items:center;gap:8px;min-height:46px;padding:12px 18px;font-size:14.5px;font-weight:600;transition:all .15s;display:inline-flex}.btn:active{transform:scale(.98)}.btn-primary{background-color:var(--primary);color:#fff;box-shadow:0 4px 10px var(--primary-glow)}.btn-primary:hover{background-color:var(--primary-hover)}.btn-secondary{background-color:var(--bg-subtle);color:var(--text-main);border:1px solid var(--border-light)}.btn-secondary:hover{background-color:var(--border-light)}.btn-outline-primary{color:var(--primary);border:1.5px solid var(--primary);background-color:#0000}.btn-outline-primary:hover{background-color:var(--primary-light)}.btn-danger{background-color:var(--danger-bg);color:var(--danger);border:1px solid #ef444433}.btn-danger:hover{background-color:var(--danger);color:#fff}.btn-sm{border-radius:var(--radius-sm);min-height:36px;padding:8px 12px;font-size:13px}.btn-block{width:100%}.btn-icon{border-radius:var(--radius-md);justify-content:center;align-items:center;width:40px;height:40px;min-height:40px;padding:0;display:flex}.form-group{margin-bottom:14px}.form-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px;font-size:12.5px;font-weight:600;display:block}.form-label .required{color:var(--danger);margin-left:2px}.form-control{border-radius:var(--radius-md);border:1.5px solid var(--border-light);background-color:var(--bg-card);width:100%;color:var(--text-main);min-height:46px;padding:12px 14px;font-size:15px;transition:border-color .15s,box-shadow .15s}.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);outline:none}.form-control::placeholder{color:var(--text-subtle)}.input-with-icon{align-items:center;display:flex;position:relative}.input-with-icon .input-icon{color:var(--text-muted);pointer-events:none;position:absolute;left:12px}.input-with-icon .form-control{padding-left:40px}.hero-card{color:#fff;border-radius:var(--radius-xl);background:linear-gradient(135deg,#8b0000 0%,#5e0000 100%);margin-bottom:20px;padding:20px;position:relative;overflow:hidden;box-shadow:0 8px 24px #8b000040}.hero-card:before{content:"";pointer-events:none;background:radial-gradient(circle,#d977064d 0%,#0000 70%);border-radius:50%;width:150px;height:150px;position:absolute;bottom:-20px;right:-20px}.hero-subtitle{text-transform:uppercase;letter-spacing:.08em;color:var(--accent-amber);margin-bottom:4px;font-size:12px;font-weight:700}.hero-title{color:#fff;margin-bottom:8px;font-size:22px;font-weight:800}.hero-desc{color:#ffffffd9;margin-bottom:16px;font-size:13.5px;line-height:1.4}.hero-cta{color:var(--primary);border-radius:var(--radius-md);background:#fff;border:none;align-items:center;gap:8px;padding:13px 22px;font-size:15px;font-weight:700;display:inline-flex;box-shadow:0 4px 12px #00000026}.hero-cta:hover{background:#fffdf9}.stats-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;display:grid}.stat-card{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-light);text-align:center;box-shadow:var(--shadow-card);padding:14px 10px}.stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.02em;margin-bottom:4px;font-size:11px;font-weight:600}.stat-value{color:var(--text-main);white-space:nowrap;text-overflow:ellipsis;font-size:17px;font-weight:800;overflow:hidden}.stat-value.primary{color:var(--primary)}.stat-value.gold{color:var(--accent-gold)}.products-header-actions{gap:8px;margin-bottom:14px;display:flex}.category-chips{-webkit-overflow-scrolling:touch;gap:6px;margin-bottom:12px;padding-bottom:8px;display:flex;overflow-x:auto}.category-chips::-webkit-scrollbar{display:none}.chip{border-radius:var(--radius-pill);background:var(--bg-card);border:1px solid var(--border-light);color:var(--text-muted);white-space:nowrap;padding:6px 12px;font-size:12px;font-weight:600;transition:all .15s}.chip.active{background:var(--primary);color:#fff;border-color:var(--primary)}.product-item-card{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-light);box-shadow:var(--shadow-card);justify-content:space-between;align-items:center;margin-bottom:10px;padding:14px;display:flex}.product-info{flex:1;min-width:0;padding-right:12px}.product-name{color:var(--text-main);white-space:nowrap;text-overflow:ellipsis;margin-bottom:3px;font-size:15px;font-weight:700;overflow:hidden}.product-meta{color:var(--text-muted);align-items:center;gap:8px;font-size:12px;display:flex}.product-cat-tag{background:var(--bg-subtle);border-radius:var(--radius-sm);padding:2px 6px;font-weight:500}.product-rate-badge{color:var(--primary);text-align:right;white-space:nowrap;font-size:16px;font-weight:800}.product-rate-sub{color:var(--text-muted);font-size:11px;font-weight:500}.invoice-item-card{background:var(--bg-card);border-radius:var(--radius-lg);border:1.5px solid var(--border-light);box-shadow:var(--shadow-sm);margin-bottom:10px;padding:12px 14px}.invoice-item-header{justify-content:space-between;align-items:flex-start;margin-bottom:8px;display:flex}.invoice-item-name{color:var(--text-main);flex:1;font-size:14.5px;font-weight:700}.invoice-item-controls{background:var(--bg-subtle);border-radius:var(--radius-md);justify-content:space-between;align-items:center;gap:12px;padding:6px 10px;display:flex}.qty-stepper{align-items:center;gap:4px;display:flex}.stepper-btn{border-radius:var(--radius-sm);border:1px solid var(--border-light);width:32px;height:32px;color:var(--text-main);background:#fff;justify-content:center;align-items:center;font-size:16px;font-weight:700;display:flex}.stepper-btn:active{background:var(--bg-subtle)}.stepper-input{text-align:center;border:1px solid var(--border-light);border-radius:var(--radius-sm);background:#fff;width:48px;height:32px;font-size:14.5px;font-weight:700}.invoice-item-calc{text-align:right}.invoice-item-sub{color:var(--text-muted);font-size:11px}.invoice-item-amount{color:var(--primary);font-size:15px;font-weight:800}.totals-card{background:var(--bg-card);border-radius:var(--radius-lg);border:1.5px solid var(--border-light);margin-bottom:16px;padding:16px}.totals-row{color:var(--text-muted);justify-content:space-between;align-items:center;padding:6px 0;font-size:14px;display:flex}.totals-row.grand-total-row{border-top:2px dashed var(--border-light);color:var(--text-main);margin-top:8px;padding-top:12px}.totals-row.grand-total-row .total-title{color:var(--primary);font-size:16px;font-weight:800}.totals-row.grand-total-row .total-amount{color:var(--primary);font-size:20px;font-weight:800}.modal-overlay{z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0f172a99;justify-content:center;align-items:flex-end;animation:.2s fadeIn;display:flex;position:fixed;inset:0}@media (width>=640px){.modal-overlay{align-items:center;padding:20px}}.bottom-sheet{width:100%;max-width:580px;max-height:85vh;box-shadow:var(--shadow-lg);background:#fff;border-radius:20px 20px 0 0;flex-direction:column;animation:.25s cubic-bezier(.16,1,.3,1) slideUp;display:flex;overflow:hidden}@media (width>=640px){.bottom-sheet{border-radius:var(--radius-xl);max-height:90vh}}.sheet-header{border-bottom:1px solid var(--border-light);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.sheet-title{color:var(--text-main);font-size:17px;font-weight:700}.sheet-body{flex:1;padding:16px 20px;overflow-y:auto}.sheet-footer{padding:14px 20px calc(14px + var(--safe-bottom));border-top:1px solid var(--border-light);background:var(--bg-card);gap:10px;display:flex}.toast-container{z-index:200;pointer-events:none;flex-direction:column;gap:8px;max-width:450px;margin:0 auto;display:flex;position:fixed;top:16px;left:16px;right:16px}.toast{pointer-events:auto;border-radius:var(--radius-md);color:#fff;box-shadow:var(--shadow-lg);background:#0f172a;align-items:center;gap:10px;padding:12px 16px;font-size:13.5px;font-weight:600;animation:.2s slideDown;display:flex}.toast.success{background:#065f46}.toast.error{background:#991b1b}.invoice-paper-preview{border-radius:var(--radius-lg);border:1px solid var(--border-light);box-shadow:var(--shadow-lg);color:var(--text-main);background:#fff;padding:20px;font-size:13px;position:relative;overflow:hidden}.invoice-paper-preview:before{content:"";background:var(--primary);height:4px;position:absolute;top:0;left:0;right:0}.preview-table{border-collapse:collapse;width:100%;margin:16px 0}.preview-table th{background-color:var(--primary);color:#fff;text-align:left;padding:8px 10px;font-size:12px;font-weight:700}.preview-table td{border-bottom:1px solid var(--border-light);padding:8px 10px;font-size:12.5px}.preview-table tr:nth-child(2n) td{background-color:#f8fafc}.sticky-bottom-action{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--border-light);z-index:30;border-radius:var(--radius-lg);border:1px solid var(--border-light);background:#fffffff2;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;padding:10px 16px;display:flex;position:sticky;bottom:8px;left:0;right:0;box-shadow:0 -2px 18px #0f172a1f}@media (width>=768px){.sticky-bottom-action{bottom:20px}}.empty-state{text-align:center;color:var(--text-muted);padding:40px 20px}.empty-icon{background:var(--bg-subtle);width:56px;height:56px;color:var(--text-subtle);border-radius:50%;justify-content:center;align-items:center;margin:0 auto 12px;display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}