*,:before,:after{box-sizing:border-box}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font:16px/1.45 system-ui,Segoe UI,Roboto,sans-serif;overflow:hidden}:root{--radius:12px;--radius-sm:8px;--shadow-sm:0 2px 8px #0000001f;--shadow:0 4px 20px #0000002e;--shadow-lg:0 8px 40px #00000047;--t:.18s ease}[data-theme=dark]{--bg:#0c0e1a;--bg-2:#10132a;--panel:#161929;--panel-2:#1c2040;--border:#252945;--border-2:#31365a;--text:#e8eaf6;--text-dim:#8891c8;--text-muted:#4a5080;--header-bg:linear-gradient(135deg,#1a0533 0%,#0a1540 50%,#0d1b4b 100%);--card-bg:linear-gradient(145deg,#161929 0%,#1c2040 100%);--gradient:linear-gradient(135deg,#7c3aed 0%,#3b82f6 100%);--accent:#7c3aed;--ok-bg:#10b9811f;--ok-text:#34d399;--ok-bd:#10b9814d;--err-bg:#ef44441f;--err-text:#f87171;--err-bd:#ef44444d;--warn-bg:#f59e0b1f;--warn-text:#fbbf24;--warn-bd:#f59e0b4d;--overlay:#000000bf}[data-theme=light]{--bg:#eef0ff;--bg-2:#e3e6fc;--panel:#fff;--panel-2:#f4f5ff;--border:#c8cdf0;--border-2:#b0b7e8;--text:#1a1d2e;--text-dim:#5c6bc0;--text-muted:#9fa8da;--header-bg:linear-gradient(135deg,#4c1d95 0%,#1e3a8a 50%,#1d4ed8 100%);--card-bg:linear-gradient(145deg,#fff 0%,#f4f5ff 100%);--gradient:linear-gradient(135deg,#7c3aed 0%,#3b82f6 100%);--accent:#7c3aed;--ok-bg:#0596691a;--ok-text:#059669;--ok-bd:#0596694d;--err-bg:#dc26261a;--err-text:#dc2626;--err-bd:#dc26264d;--warn-bg:#d977061a;--warn-text:#d97706;--warn-bd:#d977064d;--overlay:#00000080}.app{background:var(--bg);height:100svh;min-height:100svh;color:var(--text);transition:background var(--t), color var(--t);flex-direction:column;display:flex}.app-header{background:var(--header-bg);height:60px;box-shadow:var(--shadow);z-index:100;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:0 20px;display:flex}.header-brand{flex-shrink:0;align-items:center;gap:10px;display:flex}.brand-logo{color:#fff;letter-spacing:-.5px;background:#ffffff26;border:1.5px solid #ffffff40;border-radius:9px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:13px;font-weight:800;display:flex}.brand-name{color:#fff;letter-spacing:-.2px;white-space:nowrap;font-size:15px;font-weight:700;line-height:1.1;display:block}.brand-sub{color:#ffffff80;letter-spacing:.1em;text-transform:uppercase;font-size:10px;display:block}.header-center{flex:1;justify-content:center;display:flex}.tabs{background:#ffffff14;border:1px solid #ffffff1f;border-radius:10px;gap:3px;padding:3px;display:flex}.tab{color:#fff9;cursor:pointer;transition:all var(--t);white-space:nowrap;background:0 0;border:none;border-radius:7px;padding:6px 18px;font-size:13px;font-weight:500}.tab:hover{color:#fff;background:#ffffff1a}.tab-active{color:#fff;background:#fff3;box-shadow:0 1px 6px #0003}.header-right{flex-shrink:0;align-items:center;gap:8px;display:flex}.theme-toggle{color:#fff;cursor:pointer;width:34px;height:34px;transition:background var(--t);background:#ffffff1a;border:1px solid #fff3;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;font-size:15px;display:flex}.theme-toggle:hover{background:#ffffff38}.app-main{flex:1;min-height:0;display:flex;overflow:hidden}.sell-layout{flex:1;grid-template-columns:1fr 340px;min-height:0;display:grid;overflow:hidden}.products-panel{border-right:1px solid var(--border);flex-direction:column;gap:10px;min-height:0;padding:16px;display:flex;overflow:hidden}.products-panel-header{flex-direction:column;flex-shrink:0;gap:8px;display:flex}.panel-title{color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin:0;font-size:12px;font-weight:600}.search-input{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--panel);width:100%;color:var(--text);transition:border-color var(--t);padding:9px 12px;font-size:13px}.search-input:focus{border-color:var(--accent);outline:none}.search-input::placeholder{color:var(--text-muted)}.scan-input{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--panel);width:100%;color:var(--text);transition:border-color var(--t);padding:9px 12px;font-family:ui-monospace,Consolas,monospace;font-size:13px}.scan-input:focus{border-color:#3b82f6;outline:none}.scan-input:disabled{opacity:.45}.scan-feedback{border-radius:var(--radius-sm);align-items:center;min-height:32px;padding:6px 10px;font-size:12px;display:flex}.scan-feedback--empty{background:0 0}.scan-feedback--success{background:var(--ok-bg);color:var(--ok-text);border:1px solid var(--ok-bd)}.scan-feedback--error{background:var(--err-bg);color:var(--err-text);border:1px solid var(--err-bd)}.scan-feedback--info{background:var(--warn-bg);color:var(--warn-text);border:1px solid var(--warn-bd)}.products-grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));align-content:start;gap:10px;min-height:0;padding-bottom:4px;display:grid;overflow-y:auto}.products-grid::-webkit-scrollbar{width:5px}.products-grid::-webkit-scrollbar-track{background:0 0}.products-grid::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:3px}.product-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all var(--t);-webkit-user-select:none;user-select:none;flex-direction:column;gap:5px;padding:13px;display:flex;position:relative;overflow:hidden}.product-card:before{content:"";background:var(--gradient);opacity:0;height:3px;transition:opacity var(--t);position:absolute;top:0;left:0;right:0}.product-card:hover:not(.product-card--out){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent), var(--shadow-sm);transform:translateY(-1px)}.product-card:hover:not(.product-card--out):before{opacity:1}.product-card:active:not(.product-card--out){transform:translateY(0)}.product-card--out{opacity:.4;cursor:not-allowed}.product-card-name{color:var(--text);font-size:12px;font-weight:600;line-height:1.3}.product-card-price{background:var(--gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:15px;font-weight:700}.product-card-stock{color:var(--text-muted);margin-top:auto;font-size:10px}.product-card-stock--low{color:var(--warn-text)}.product-card-stock--out{color:var(--err-text)}.products-empty{text-align:center;color:var(--text-muted);grid-column:1/-1;padding:40px 20px;font-size:13px}.cart-panel{background:var(--panel);flex-direction:column;min-height:0;display:flex;overflow:hidden}.cart-header{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:14px 18px;display:flex}.cart-header h3{margin:0;font-size:14px;font-weight:700}.cart-count{color:var(--text-dim);font-size:11px}.cart-items{flex:1;min-height:0;overflow-y:auto}.cart-items::-webkit-scrollbar{width:4px}.cart-items::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.cart-empty{height:100%;color:var(--text-muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:20px;font-size:12px;display:flex}.cart-empty svg{opacity:.3}.cart-item{border-bottom:1px solid var(--border);flex-direction:column;gap:6px;padding:11px 18px;display:flex}.cart-item-top{justify-content:space-between;align-items:flex-start;gap:8px;display:flex}.cart-item-name{color:var(--text);font-size:13px;font-weight:600;line-height:1.3}.cart-item-subtotal{color:var(--text);white-space:nowrap;font-size:13px;font-weight:700}.cart-item-bottom{justify-content:space-between;align-items:center;gap:8px;display:flex}.cart-item-price{color:var(--text-dim);font-size:11px}.qty-stepper{align-items:center;gap:4px;display:flex}.qty-btn{border:1px solid var(--border);background:var(--panel-2);width:24px;height:24px;color:var(--text);cursor:pointer;transition:all var(--t);border-radius:5px;justify-content:center;align-items:center;padding:0;font-size:14px;line-height:1;display:flex}.qty-btn:hover{border-color:var(--accent);color:var(--accent)}.qty-value{text-align:center;min-width:26px;font-size:13px;font-weight:700}.remove-btn{color:var(--err-text);cursor:pointer;transition:background var(--t);background:0 0;border:none;border-radius:4px;padding:2px 5px;font-size:11px;line-height:1}.remove-btn:hover{background:var(--err-bg)}.cart-footer{border-top:1px solid var(--border);flex-direction:column;flex-shrink:0;gap:10px;padding:14px 18px;display:flex}.cart-total-row{justify-content:space-between;align-items:baseline;display:flex}.cart-total-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;font-size:12px}.cart-total-amount{background:var(--gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:24px;font-weight:800}.btn-primary{background:var(--gradient);color:#fff;border-radius:var(--radius-sm);cursor:pointer;width:100%;transition:opacity var(--t), transform var(--t);letter-spacing:.01em;border:none;padding:12px;font-size:14px;font-weight:700;box-shadow:0 2px 14px #7c3aed59}.btn-primary:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-primary:disabled{opacity:.35;cursor:not-allowed;box-shadow:none;transform:none}.btn{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--panel-2);color:var(--text);cursor:pointer;transition:all var(--t);padding:9px 16px;font-size:13px;font-weight:500}.btn:hover{border-color:var(--accent)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-clear{border:1px solid var(--border);color:var(--text-dim);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--t);text-align:center;background:0 0;padding:7px;font-size:12px}.btn-clear:hover{border-color:var(--err-bd);color:var(--err-text)}.modal-overlay{background:var(--overlay);z-index:200;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.receipt-wrapper{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);flex-direction:column;max-height:90vh;display:flex;overflow-y:auto}.receipt-wrapper::-webkit-scrollbar{width:4px}.receipt-wrapper::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.receipt-actions{border-top:1px solid var(--border);flex-shrink:0;gap:10px;padding:14px 18px;display:flex}.receipt-actions .btn-primary,.receipt-actions .btn{flex:1}.ticket{color:#000;background:#fff;width:400px;padding:14px;font-family:Arial,Helvetica,sans-serif}.ticket table{border-collapse:collapse;width:100%;margin-bottom:8px;font-size:13px}.ticket td,.ticket th{text-align:left;vertical-align:middle;border:2px solid #000;padding:5px 7px}.ticket .text-center{text-align:center}.ticket .text-right{text-align:right}.ticket .bold{font-weight:700}.ticket .header-table td{padding:7px}.ticket .watermark-box{text-align:center;color:#bbb;letter-spacing:1px;font-size:22px;font-weight:900;line-height:1.2}.ticket .banner-row{text-align:center;border:2px solid #000;width:100%;margin-bottom:8px;padding:5px 8px;font-size:13px;font-weight:700}.ticket .items-table th{text-align:center;background:#fff;font-size:11px;font-weight:700}.ticket .items-table td{font-size:12px}.ticket .footer-table td{width:25%;font-size:12px}.ticket .disclaimer{text-align:center;margin:8px 0;padding:0 8px;font-size:10px;line-height:1.4}.ticket .barcode-container{flex-direction:column;align-items:center;margin-top:10px;display:flex}.ticket .barcode{background:repeating-linear-gradient(90deg,#000 0 3px,#fff 3px 7px,#000 7px 9px,#fff 9px 11px,#000 11px 12px,#fff 12px 16px);width:200px;height:50px}.ticket .barcode-text{letter-spacing:1px;margin-top:4px;font-family:monospace;font-size:12px}.sales-layout{flex:1;min-height:0;padding:20px 24px;overflow-y:auto}.sales-layout::-webkit-scrollbar{width:5px}.sales-layout::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:3px}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:24px;display:grid}.stat-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:18px;position:relative;overflow:hidden}.stat-card:after{content:"";background:var(--gradient);height:3px;position:absolute;top:0;left:0;right:0}.stat-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px;font-size:11px}.stat-value{background:var(--gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:26px;font-weight:800;line-height:1}.stat-sub{color:var(--text-muted);margin-top:6px;font-size:11px}.section-title{color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin:0 0 12px;font-size:11px;font-weight:700}.sales-table{border-collapse:collapse;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);width:100%;overflow:hidden}.sales-table th{text-align:left;text-transform:uppercase;letter-spacing:.07em;color:var(--text-dim);background:var(--panel-2);border-bottom:1px solid var(--border);padding:10px 14px;font-size:10px}.sales-table td{border-bottom:1px solid var(--border);color:var(--text);padding:11px 14px;font-size:13px}.sales-table tr:last-child td{border-bottom:none}.sales-table tbody tr:hover td{background:var(--panel-2)}.badge{border-radius:999px;padding:3px 9px;font-size:11px;font-weight:500;display:inline-block}.badge-ok{background:var(--ok-bg);color:var(--ok-text);border:1px solid var(--ok-bd)}.empty-state{text-align:center;color:var(--text-muted);font-size:13px;padding:36px!important}.pin-gate{background:var(--bg);flex:1;justify-content:center;align-items:center;display:flex}.pin-gate-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);width:280px;box-shadow:var(--shadow-lg);flex-direction:column;align-items:center;gap:10px;padding:32px 28px 24px;display:flex}.pin-gate-icon{width:54px;height:54px;color:var(--accent);background:#7c3aed1f;border:1px solid #7c3aed40;border-radius:16px;justify-content:center;align-items:center;margin-bottom:2px;display:flex}.pin-gate-title{margin:0;font-size:18px;font-weight:700}.pin-gate-sub{color:var(--text-dim);text-align:center;margin:0;font-size:13px}.pin-dots{gap:10px;margin:6px 0;display:flex}.pin-dot{border:2px solid var(--border-2);border-radius:50%;width:14px;height:14px;transition:all .15s}.pin-dot--filled{background:var(--accent);border-color:var(--accent);box-shadow:0 0 8px #7c3aed80}.pin-dots--error .pin-dot--filled{background:var(--err-text);border-color:var(--err-text);box-shadow:0 0 8px #ef444466}@keyframes pin-shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.pin-dots--error{animation:.4s pin-shake}.pin-pad{grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin-top:4px;display:grid}.pin-key{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--panel-2);height:50px;color:var(--text);cursor:pointer;transition:all var(--t);font-size:18px;font-weight:600}.pin-key:hover{background:var(--border-2)}.pin-key:active{transform:scale(.94)}.pin-key--ghost{color:var(--text-dim);font-size:14px}.pin-hint{color:var(--text-muted);margin:2px 0 0;font-size:11px}.admin-layout{flex:1;grid-template-columns:210px 1fr;min-height:0;display:grid;overflow:hidden}.admin-sidebar{background:var(--panel);border-right:1px solid var(--border);flex-direction:column;gap:2px;padding:18px 10px 16px;display:flex;overflow-y:auto}.admin-sidebar-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:10px;padding:0 8px;font-size:10px;font-weight:700}.admin-nav-list{flex-direction:column;gap:2px;display:flex}.admin-nav-item{border-radius:var(--radius-sm);color:var(--text-dim);cursor:pointer;transition:all var(--t);text-align:left;background:0 0;border:none;align-items:center;gap:9px;width:100%;padding:9px 12px;font-size:13px;font-weight:500;display:flex}.admin-nav-item:hover{background:var(--panel-2);color:var(--text)}.admin-nav-item--active{color:var(--accent);background:#7c3aed1f;font-weight:600}.admin-lock-btn{border-radius:var(--radius-sm);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;transition:all var(--t);background:0 0;align-items:center;gap:8px;width:100%;margin-top:auto;padding:9px 12px;font-size:12px;display:flex}.admin-lock-btn:hover{color:var(--err-text);border-color:var(--err-bd);background:var(--err-bg)}.admin-content{min-height:0;padding:24px;overflow-y:auto}.admin-content::-webkit-scrollbar{width:5px}.admin-content::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:3px}.admin-panel{max-width:800px}.admin-panel-header{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px;display:flex}.admin-panel-title{margin:0 0 2px;font-size:17px;font-weight:700}.admin-panel-sub{color:var(--text-dim);margin:0 0 16px;font-size:13px}.admin-stats-row{flex-wrap:wrap;gap:6px;display:flex}.admin-stat{border:1px solid var(--border);background:var(--panel-2);color:var(--text-dim);border-radius:999px;padding:3px 10px;font-size:11px}.admin-stat--warn{color:var(--warn-text);border-color:var(--warn-bd);background:var(--warn-bg)}.admin-stat--err{color:var(--err-text);border-color:var(--err-bd);background:var(--err-bg)}.admin-table-wrap{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.admin-table{border-collapse:collapse;width:100%}.admin-table th{text-align:left;text-transform:uppercase;letter-spacing:.07em;color:var(--text-dim);background:var(--panel-2);border-bottom:1px solid var(--border);padding:10px 14px;font-size:10px}.admin-table td{border-bottom:1px solid var(--border);color:var(--text);padding:11px 14px;font-size:13px}.admin-table tr:last-child td{border-bottom:none}.admin-table tbody tr:hover td{background:var(--panel-2)}.mono-cell{font-family:ui-monospace,Consolas,monospace;font-size:12px}.row-low td{background:#f59e0b0a!important}.row-out td{background:#ef44440a!important}.badge-low{background:var(--warn-bg);color:var(--warn-text);border:1px solid var(--warn-bd)}.badge-out{background:var(--err-bg);color:var(--err-text);border:1px solid var(--err-bd)}.stockin-qty-header{align-items:center;gap:10px;margin-bottom:10px;display:flex}.stockin-label{color:var(--text-dim);font-size:13px}.qty-input{text-align:center;border:1px solid var(--border);background:var(--panel-2);width:64px;color:var(--text);border-radius:5px;padding:5px 8px;font-size:14px;font-weight:600}.qty-input:focus{border-color:var(--accent);outline:none}.qty-input::-webkit-inner-spin-button{opacity:0}.stockin-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);margin-top:14px;padding:18px}.stockin-barcode-row{border-bottom:1px solid var(--border);align-items:center;gap:8px;margin-bottom:12px;padding-bottom:12px;display:flex}.stockin-barcode-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-size:11px}.stockin-barcode-val{flex:1;font-family:ui-monospace,Consolas,monospace;font-size:13px;font-weight:600}.stockin-product-name{margin-bottom:4px;font-size:16px;font-weight:700}.stockin-product-meta{color:var(--text-dim);margin-bottom:16px;font-size:12px}.stockin-action-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.register-form{margin-top:2px}.register-form-title{text-transform:uppercase;letter-spacing:.07em;color:var(--text-dim);border-bottom:1px solid var(--border);margin:0 0 14px;padding-bottom:12px;font-size:12px;font-weight:700}.field{flex-direction:column;gap:5px;margin-bottom:12px;display:flex}.field label{color:var(--text-dim);font-size:12px;font-weight:500}.field input{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--panel-2);color:var(--text);transition:border-color var(--t);padding:9px 12px;font-size:14px}.field input:focus{border-color:var(--accent);outline:none}.field-row{grid-template-columns:1fr 1fr;gap:12px;display:grid}.register-actions{align-items:center;gap:10px;margin-top:4px;display:flex}.btn-accent{border-radius:var(--radius-sm);background:var(--gradient);color:#fff;cursor:pointer;transition:opacity var(--t), transform var(--t);white-space:nowrap;border:none;padding:9px 18px;font-size:13px;font-weight:600;box-shadow:0 2px 10px #7c3aed4d}.btn-accent:hover{opacity:.9;transform:translateY(-1px)}.btn-accent:active{transform:translateY(0)}.btn-sm{border:1px solid var(--border);background:var(--panel-2);color:var(--text-dim);cursor:pointer;transition:all var(--t);white-space:nowrap;border-radius:5px;padding:5px 10px;font-size:12px}.btn-sm:hover{border-color:var(--border-2);color:var(--text)}.btn-sm--cancel:hover{border-color:var(--err-bd);color:var(--err-text)}@media print{body *{visibility:hidden}#printable-ticket,#printable-ticket *{visibility:visible}#printable-ticket{width:auto;position:fixed;top:0;left:0}}