:root{--bg: #f4f6fb;--surface: #ffffff;--surface-muted: #f8f9fc;--border: #e4e7ee;--border-strong: #d5d9e3;--text-primary: #14181f;--text-secondary: #5b6270;--text-muted: #8890a0;--accent: #3457d5;--accent-hover: #2c49b8;--accent-soft: #eaefff;--accent-soft-text: #2c49b8;--success: #16a34a;--success-soft: #e8f8ee;--success-text: #157a3a;--danger: #dc3545;--danger-soft: #fdeced;--danger-text: #b3202f;--warning: #d97706;--warning-soft: #fef3e0;--warning-text: #a35c04;--info-soft: #e6f0fd;--info-text: #2158a8;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--shadow-sm: 0 1px 2px rgba(20, 24, 31, .06);--shadow-md: 0 4px 16px rgba(20, 24, 31, .08);--shadow-lg: 0 12px 32px rgba(20, 24, 31, .14);--sidebar-bg: #171b2b;--sidebar-bg-active: #232842;--sidebar-text: #aab0c6;--sidebar-text-active: #ffffff;--sidebar-border: #262c42}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,sans-serif;background:var(--bg);color:var(--text-primary);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}h1{font-size:21px;font-weight:700;letter-spacing:-.01em;margin:0 0 18px;color:var(--text-primary)}h2{font-size:15px;font-weight:700;margin:28px 0 12px;color:var(--text-primary)}p{color:var(--text-secondary)}.login-page{height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 15% 20%,rgba(52,87,213,.35),transparent 45%),radial-gradient(circle at 85% 80%,rgba(52,87,213,.22),transparent 40%),linear-gradient(160deg,#12162a,#171b2b 55%,#1b2036)}.login-form{background:var(--surface);padding:36px 32px;border-radius:var(--radius-lg);width:340px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-lg)}.login-mark{width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,var(--accent),#6d8bff);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:4px;box-shadow:0 6px 16px #3457d559}.login-form h1{margin-bottom:0;font-size:22px}.subtitle{margin:0 0 8px;color:var(--text-muted);font-size:13px}.login-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--text-secondary)}.login-form input{padding:11px 12px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);font-size:14px;transition:border-color .15s,box-shadow .15s}.login-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.login-form button{margin-top:10px;padding:11px;border:none;border-radius:var(--radius-sm);background:var(--accent);color:#fff;font-weight:600;font-size:14px;cursor:pointer;transition:background .15s,transform .05s}.login-form button:hover:not(:disabled){background:var(--accent-hover)}.login-form button:active:not(:disabled){transform:translateY(1px)}.login-form button:disabled{opacity:.6;cursor:not-allowed}.app-shell{display:flex;min-height:100vh}.sidebar{width:236px;flex-shrink:0;background:var(--sidebar-bg);color:var(--sidebar-text);display:flex;flex-direction:column;padding:18px 14px}.sidebar .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:#fff;padding:4px 10px 22px;letter-spacing:-.01em}.sidebar .brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--accent),#6d8bff);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}.sidebar nav{display:flex;flex-direction:column;gap:2px;flex:1}.sidebar nav a{display:flex;align-items:center;gap:10px;color:var(--sidebar-text);text-decoration:none;padding:9px 10px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:500;transition:background .12s,color .12s}.sidebar nav a svg{flex-shrink:0;opacity:.85}.sidebar nav a.active{background:var(--sidebar-bg-active);color:var(--sidebar-text-active);font-weight:600}.sidebar nav a.active svg{opacity:1;color:#7c93ff}.sidebar nav a:hover:not(.active){background:#ffffff0d;color:#e4e7f2}.nav-section-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#5b6180;padding:14px 10px 6px}.user-box{border-top:1px solid var(--sidebar-border);padding-top:14px;margin-top:10px;font-size:13px}.user-box .user-name{color:#fff;font-weight:600;padding:0 10px}.role-tag{display:inline-block;color:#9fb0ff;background:#7c93ff24;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;margin:6px 10px 12px}.user-box button{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:9px;border:none;border-radius:var(--radius-sm);background:#ffffff0f;color:#d3d7e6;cursor:pointer;font-size:13px;font-weight:500;transition:background .12s}.user-box button:hover{background:#ffffff1f;color:#fff}.content{flex:1;padding:28px 34px;overflow-x:auto;min-width:0}table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--border)}th,td{text-align:left;padding:11px 14px;font-size:13.5px}th{background:var(--surface-muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);border-bottom:1px solid var(--border)}tbody tr{border-bottom:1px solid var(--border);transition:background .1s}tbody tr:last-child{border-bottom:none}tbody tr:hover{background:var(--surface-muted)}.cell-input{width:90px;padding:6px 8px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);font-size:13.5px;transition:border-color .15s,box-shadow .15s}.cell-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap}button{font-family:inherit}.page-header button,select,.search-bar button,.barcode-form button{padding:9px 15px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--text-primary);cursor:pointer;font-size:13.5px;font-weight:500;transition:background .12s,border-color .12s}.page-header button:hover,select:hover,.search-bar button:hover,.barcode-form button:hover{border-color:var(--border-strong);background:var(--surface-muted)}.barcode-form button,.search-bar button{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.barcode-form button:hover,.search-bar button:hover{background:var(--accent-hover);border-color:var(--accent-hover)}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235b6270' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}.inline-form,.form-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;background:var(--surface);padding:18px;border-radius:var(--radius-md);margin-bottom:18px;border:1px solid var(--border);box-shadow:var(--shadow-sm)}.inline-form label,.form-row label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--text-secondary)}.inline-form input,.form-row input,.form-row select{padding:9px 11px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);font-size:13.5px;transition:border-color .15s,box-shadow .15s}.inline-form input:focus,.form-row input:focus,.form-row select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.inline-form button{padding:9px 18px;border:none;border-radius:var(--radius-sm);background:var(--accent);color:#fff;font-weight:600;font-size:13.5px;cursor:pointer;transition:background .12s}.inline-form button:hover{background:var(--accent-hover)}.search-bar{display:flex;gap:10px;margin-bottom:18px}.search-bar input{flex:1;padding:10px 13px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);font-size:13.5px;background:var(--surface);transition:border-color .15s,box-shadow .15s}.search-bar input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.error-text{color:var(--danger-text);background:var(--danger-soft);padding:10px 14px;border-radius:var(--radius-sm);margin-bottom:14px;font-size:13.5px;font-weight:500;border:1px solid rgba(220,53,69,.15)}.success-text{color:var(--success-text);background:var(--success-soft);padding:10px 14px;border-radius:var(--radius-sm);margin-bottom:14px;font-size:13.5px;font-weight:500;border:1px solid rgba(22,163,74,.15)}.cards{display:flex;gap:16px;margin-bottom:28px;flex-wrap:wrap}.card{background:var(--surface);border-radius:var(--radius-lg);padding:18px 22px;min-width:190px;border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:box-shadow .15s,transform .15s}.card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.card-title{font-size:12.5px;font-weight:600;color:var(--text-muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.02em}.card-value{font-size:24px;font-weight:700;color:var(--text-primary);letter-spacing:-.01em}.card-sub{font-size:12px;color:var(--text-muted);margin-top:4px}.danger{color:var(--danger-text);font-weight:700}.warning{color:var(--warning-text);font-weight:700}.pos-page{display:flex;gap:24px;align-items:flex-start}.pos-main{flex:1;min-width:0}.pos-sidebar{width:280px;flex-shrink:0;background:var(--surface);border-radius:var(--radius-lg);padding:20px;display:flex;flex-direction:column;gap:14px;position:sticky;top:24px;border:1px solid var(--border);box-shadow:var(--shadow-sm)}.pos-sidebar label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;color:var(--text-secondary)}.barcode-form{display:flex;gap:10px;margin-bottom:14px}.barcode-form input{flex:1;padding:12px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--border-strong);font-size:15px;transition:border-color .15s,box-shadow .15s}.barcode-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.search-results{list-style:none;margin:0 0 14px;padding:0;background:var(--surface);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-sm)}.search-results li{padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--border);font-size:13.5px;transition:background .1s}.search-results li:last-child{border-bottom:none}.search-results li:hover{background:var(--accent-soft)}.customer-picker{display:flex;flex-direction:column;gap:8px;min-width:260px}.customer-picker input{padding:9px 11px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);font-size:13.5px}.customer-picker input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.customer-picker-selected{display:flex;align-items:center;gap:10px;font-size:13.5px;background:var(--accent-soft);padding:9px 12px;border-radius:var(--radius-sm)}.customer-picker-selected button{border:none;background:none;color:var(--accent);font-weight:600;font-size:12.5px;cursor:pointer;padding:0}.link-button{border:none;background:none;color:var(--accent);font-size:12.5px;font-weight:600;cursor:pointer;padding:4px 0;text-align:left}.link-button:hover{text-decoration:underline}.total-box{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;padding:12px 0;border-top:1px dashed var(--border-strong);color:var(--text-secondary)}.total-box strong{font-size:19px;color:var(--text-primary)}.sell-button{padding:13px;border:none;border-radius:var(--radius-sm);background:var(--success);color:#fff;font-weight:700;font-size:14.5px;cursor:pointer;transition:background .12s,transform .05s}.sell-button:hover:not(:disabled){background:#128a3e}.sell-button:active:not(:disabled){transform:translateY(1px)}.sell-button:disabled{background:#c3c8d4;cursor:not-allowed}.receipt{background:var(--success-soft);border:1px solid rgba(22,163,74,.2);border-radius:var(--radius-md);padding:14px;font-size:13.5px;color:var(--success-text)}.receipt h3{margin:0 0 6px;font-size:14px}.order-cards{display:flex;flex-direction:column;gap:14px;margin-bottom:28px}.order-card{background:var(--surface);border-radius:var(--radius-lg);padding:18px;display:flex;flex-direction:column;gap:12px;border:1px solid var(--border);box-shadow:var(--shadow-sm)}.order-card-header{display:flex;justify-content:space-between;align-items:center}.order-card-title{font-weight:700;font-size:15px}.status-badge{padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.01em}.status-new{background:var(--warning-soft);color:var(--warning-text)}.status-picking{background:var(--info-soft);color:var(--info-text)}.status-done{background:var(--success-soft);color:var(--success-text)}.status-cancelled{background:var(--danger-soft);color:var(--danger-text)}@media (max-width: 720px){.app-shell{flex-direction:column}.sidebar{width:100%}.content{padding:18px}.pos-page{flex-direction:column}.pos-sidebar{width:100%;position:static}}.product-thumb{border-radius:var(--radius-sm);background:var(--surface-muted);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-muted);overflow:hidden;flex-shrink:0}.product-thumb.has-image{cursor:zoom-in;transition:transform .12s,box-shadow .12s}.product-thumb.has-image:hover{transform:scale(1.06);box-shadow:var(--shadow-sm)}.product-thumb img{width:100%;height:100%;object-fit:cover}.thumb-lightbox{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0c14b8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:1000;cursor:zoom-out;padding:32px}.thumb-lightbox img{max-width:min(480px,90vw);max-height:70vh;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);cursor:default;object-fit:contain;background:#fff}.thumb-lightbox-caption{color:#fff;font-size:14px;font-weight:600}.product-cell{display:flex;align-items:center;gap:10px}.image-upload-label{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface);font-size:12.5px;font-weight:500;cursor:pointer;transition:background .12s}.image-upload-label:hover{background:var(--surface-muted)}.image-upload-label input[type=file]{display:none}.camera-btn{display:inline-flex;align-items:center;justify-content:center;padding:0 13px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--text-secondary);cursor:pointer;transition:background .12s,color .12s}.camera-btn:hover{background:var(--surface-muted);color:var(--accent)}.scanner-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0c14b8;display:flex;align-items:center;justify-content:center;z-index:1200;padding:24px}.scanner-modal{background:var(--surface);border-radius:var(--radius-lg);padding:20px;width:min(440px,100%);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:12px}.scanner-header{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:14.5px}.scanner-header button{border:none;background:transparent;cursor:pointer;font-size:16px;color:var(--text-muted);line-height:1;padding:4px}.scanner-video{width:100%;aspect-ratio:4 / 3;border-radius:var(--radius-md);background:#000;object-fit:cover}.scanner-hint{margin:0;font-size:12.5px;color:var(--text-muted);text-align:center}