@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg:#0a0f1e;--bg2:#111827;--bg3:#1e293b;--card:#141d2e;--border:#1e293b;--accent:#6366f1;--accent2:#818cf8;--green:#10b981;--red:#ef4444;--yellow:#f59e0b;--cyan:#06b6d4;--text:#f1f5f9;--muted:#64748b;--muted2:#94a3b8;--radius:14px;--radius-sm:8px;--nav-h:64px;--bottom-h:68px;--font:"Plus Jakarta Sans", sans-serif;--mono:"JetBrains Mono", monospace}*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{background:var(--bg);height:100%;font-family:var(--font);color:var(--text);overflow:hidden}#app{flex-direction:column;height:100dvh;display:flex}#offline-banner{background:var(--yellow)22;border-bottom:1px solid var(--yellow)44;text-align:center;color:var(--yellow);padding:5px;font-size:11px;display:none}#offline-banner.show{display:block}#topbar{height:var(--nav-h);background:var(--bg2);border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:10;flex-shrink:0;align-items:center;gap:12px;padding:0 16px;display:flex;position:relative}#topbar .logo{background:linear-gradient(135deg, var(--accent), var(--cyan));-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:18px;font-weight:800}#topbar .logo p{text-align:center;margin-top:5px;font-size:8px;display:block}#topbar .page-title{flex:1;font-size:15px;font-weight:600}#sync-status{color:var(--muted);align-items:center;gap:6px;font-size:11px;display:flex}#sync-dot{background:var(--muted);border-radius:50%;width:7px;height:7px}#sync-dot.online{background:var(--green);box-shadow:0 0 8px var(--green);animation:2s infinite pulse}#sync-dot.syncing{background:var(--yellow);animation:1s linear infinite spin-dot}#content{scroll-behavior:smooth;flex:1;padding:16px 16px 80px;overflow-y:auto}#content::-webkit-scrollbar{display:none}#bottomnav{height:var(--bottom-h);background:var(--bg2);border-top:1px solid var(--border);padding:0 2px;padding-bottom:env(safe-area-inset-bottom);flex-shrink:0;justify-content:space-around;align-items:center;display:flex;overflow:hidden}.nav-btn{cursor:pointer;color:var(--muted);font-family:var(--font);box-sizing:border-box;background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:2px;min-width:0;max-width:20%;padding:4px 1px;transition:color .2s;display:flex}.nav-btn.active{color:var(--accent2)}.nav-btn svg{flex-shrink:0;width:17px;height:17px}.nav-btn span{white-space:nowrap;text-overflow:ellipsis;text-align:center;width:100%;font-size:8px;font-weight:600;overflow:hidden}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;padding:16px}.card-sm{margin-bottom:8px;padding:12px}.stat-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;display:grid}.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;position:relative;overflow:hidden}.stat-card:before{content:"";height:2px;position:absolute;top:0;left:0;right:0}.stat-card.s-purple:before{background:linear-gradient(90deg, var(--accent), var(--accent2))}.stat-card.s-green:before{background:var(--green)}.stat-card.s-red:before{background:var(--red)}.stat-card.s-yellow:before{background:var(--yellow)}.stat-label{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-size:10px;font-weight:600}.stat-val{margin-top:4px;font-size:20px;font-weight:800}.stat-sub{color:var(--muted2);margin-top:2px;font-size:10px}.sec-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.sec-title{color:var(--muted2);text-transform:uppercase;letter-spacing:.5px;font-size:13px;font-weight:700}.sec-action{color:var(--accent2);cursor:pointer;font-size:12px;font-weight:600}.product-item{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;align-items:center;gap:12px;margin-bottom:8px;padding:14px;transition:border-color .2s;display:flex}.product-item:active{border-color:var(--accent)}.product-icon{background:linear-gradient(135deg, var(--accent)22, var(--accent)11);border:1px solid var(--accent)33;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:18px;display:flex}.product-info{flex:1;min-width:0}.product-name{white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:700;overflow:hidden}.product-cat{color:var(--muted);margin-top:1px;font-size:11px}.product-price{color:var(--cyan);font-size:12px;font-weight:600;font-family:var(--mono);margin-top:2px}.product-stock{text-align:right;flex-shrink:0}.stock-badge{font-size:12px;font-weight:700;font-family:var(--mono);border-radius:20px;padding:3px 10px}.stock-ok{background:var(--green)22;color:var(--green);border:1px solid var(--green)44}.stock-low{background:var(--yellow)22;color:var(--yellow);border:1px solid var(--yellow)44}.stock-out{background:var(--red)22;color:var(--red);border:1px solid var(--red)44}.form-group{margin-bottom:14px}.form-label{color:var(--muted2);text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px;font-size:12px;font-weight:700;display:block}.form-input,.form-select,.form-textarea{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text);font-family:var(--font);outline:none;padding:11px 13px;font-size:14px;transition:border-color .2s}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--accent)}.form-textarea{resize:none;height:80px}.form-select option{background:var(--bg2)}.form-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.form-row-3{grid-template-columns:1fr 1fr 1fr;gap:8px;display:grid}.margin-box{background:var(--green)11;border:1px solid var(--green)33;border-radius:var(--radius-sm);justify-content:space-between;align-items:center;margin-bottom:14px;padding:10px 13px;transition:border-color .3s;display:flex}.margin-label{color:var(--muted2);font-size:12px}.margin-val{color:var(--green);font-size:15px;font-weight:800;font-family:var(--mono)}.btn{border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font);border:none;justify-content:center;align-items:center;gap:8px;width:100%;padding:13px 20px;font-size:14px;font-weight:700;transition:all .15s;display:flex}.btn-primary{background:linear-gradient(135deg, var(--accent), var(--accent2));color:#fff}.btn-primary:active{opacity:.9;transform:scale(.97)}.btn-success{background:linear-gradient(135deg, var(--green), #34d399);color:#fff}.btn-danger{background:var(--red)22;color:var(--red);border:1px solid var(--red)44}.btn-ghost{background:var(--bg3);color:var(--muted2);border:1px solid var(--border)}.btn-sm{width:auto;padding:8px 14px;font-size:12px}.btn-row{gap:8px;display:flex}.btn-row .btn{flex:1}.fab{bottom:calc(var(--bottom-h) + 16px);cursor:pointer;background:linear-gradient(135deg, var(--accent), var(--accent2));color:#fff;width:52px;height:52px;box-shadow:0 4px 20px var(--accent)55;z-index:20;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:24px;transition:transform .2s;display:flex;position:fixed;right:16px}.fab:active{transform:scale(.92)}.modal-overlay{z-index:100;opacity:0;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0008;justify-content:center;align-items:flex-end;transition:opacity .25s;display:flex;position:fixed;inset:0}.modal-overlay.show{opacity:1;pointer-events:all}.modal{background:var(--bg2);width:100%;max-width:520px;max-height:92dvh;padding:20px 16px;padding-bottom:calc(24px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;transition:transform .3s cubic-bezier(.32,.72,0,1);overflow-y:auto;transform:translateY(100%)}.modal-overlay.show .modal{transform:translateY(0)}.modal-handle{background:var(--border);border-radius:2px;width:36px;height:4px;margin:0 auto 18px}.modal-title{margin-bottom:18px;font-size:17px;font-weight:800}.tx-item{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;margin-bottom:8px;padding:14px}.tx-header{justify-content:space-between;align-items:flex-start;margin-bottom:8px;display:flex}.tx-customer{font-size:14px;font-weight:700}.tx-date{color:var(--muted);font-size:11px;font-family:var(--mono)}.tx-method{border-radius:20px;padding:2px 8px;font-size:11px;font-weight:700}.tx-cash{background:var(--green)22;color:var(--green)}.tx-credit{background:var(--yellow)22;color:var(--yellow)}.tx-items-list{color:var(--muted2);margin-bottom:8px;font-size:12px}.tx-total{font-size:15px;font-weight:800;font-family:var(--mono)}.tx-status{font-size:11px;font-weight:600}.tx-status.paid{color:var(--green)}.tx-status.unpaid{color:var(--yellow)}.credit-card{border-radius:var(--radius);cursor:pointer;background:linear-gradient(135deg,#1e1b4b,#312e81);border:1px solid #4338ca55;margin-bottom:8px;padding:16px}.credit-customer{font-size:15px;font-weight:700}.credit-date{color:var(--muted2);font-size:11px;font-family:var(--mono)}.credit-amount{color:var(--yellow);font-size:18px;font-weight:800;font-family:var(--mono);margin:8px 0}.credit-items{color:var(--muted2);font-size:12px}.credit-days{color:var(--red);margin-top:6px;font-size:11px;font-weight:600}.search-wrap{margin-bottom:12px;position:relative}.search-input{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text);font-family:var(--font);outline:none;padding:11px 13px 11px 38px;font-size:14px}.search-icon{color:var(--muted);width:16px;height:16px;position:absolute;top:50%;left:12px;transform:translateY(-50%)}.filter-row{gap:6px;margin-bottom:12px;padding-bottom:2px;display:flex;overflow-x:auto}.filter-row::-webkit-scrollbar{display:none}.filter-chip{white-space:nowrap;border:1px solid var(--border);background:var(--bg3);color:var(--muted);cursor:pointer;border-radius:20px;padding:5px 12px;font-size:11px;font-weight:700}.filter-chip.active{background:var(--accent)22;border-color:var(--accent);color:var(--accent2)}.empty{text-align:center;padding:48px 24px}.empty-icon{margin-bottom:12px;font-size:48px}.empty-text{color:var(--muted);font-size:14px}#toast{bottom:calc(var(--bottom-h) + 16px);background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);z-index:200;opacity:0;white-space:nowrap;pointer-events:none;padding:10px 18px;font-size:13px;font-weight:600;transition:all .3s;position:fixed;left:50%;transform:translate(-50%)translateY(20px)}#toast.show{opacity:1;transform:translate(-50%)translateY(0)}#toast.success{border-color:var(--green)66;color:var(--green)}#toast.error{border-color:var(--red)66;color:var(--red)}#toast.info{border-color:var(--accent)66;color:var(--accent2)}.chart-bars{align-items:flex-end;gap:6px;height:120px;padding-top:8px;display:flex}.chart-bar-wrap{flex-direction:column;flex:1;align-items:center;gap:4px;display:flex}.chart-bar{background:linear-gradient(180deg, var(--accent), var(--accent)88);border-radius:4px 4px 0 0;width:100%;min-height:4px;transition:height .5s cubic-bezier(.34,1.56,.64,1)}.chart-bar-label{color:var(--muted);font-size:9px;font-family:var(--mono)}#tx-cart-section{max-height:220px;margin-bottom:8px;overflow-y:auto}#tx-cart-section::-webkit-scrollbar{display:none}.cart-item{align-items:center;gap:10px;margin-bottom:8px;display:flex}.cart-qty{background:var(--bg3);border:1px solid var(--border);font-family:var(--mono);text-align:center;width:60px;color:var(--text);border-radius:6px;outline:none;padding:6px 10px;font-size:13px}.cart-name{flex:1;font-size:13px;font-weight:600}.cart-remove{color:var(--red);cursor:pointer;background:0 0;border:none;padding:4px;font-size:18px}.section-divider{background:var(--border);height:1px;margin:16px 0}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes spin-dot{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:.3s both fadeIn}