:root{--blue:#0d9ff0;--blue2:#1187e8;--green:#54d700;--deep:#006548;--ink:#14332c;--muted:#6b7f79;--bg:#f4f8f5;--card:#fff;--line:#dfeae4;--danger:#c93a3a;--warning:#f1a526;--shadow:0 12px 32px rgba(0,72,53,.08)}*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:var(--bg)}a{color:inherit;text-decoration:none}.app-shell{min-height:100vh;display:flex}.sidebar{width:255px;background:linear-gradient(180deg,#fff 0%,#f7fffb 100%);border-right:1px solid var(--line);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:30}.brand{display:block;padding:20px 18px 13px;border-bottom:1px solid var(--line)}.brand img{width:100%;height:78px;object-fit:contain}.sidebar nav{padding:14px 11px;display:grid;gap:5px}.sidebar nav a{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:10px;color:#35554d;font-weight:650;font-size:14px}.sidebar nav a span{width:24px;height:24px;border-radius:7px;background:#eaf9f1;display:grid;place-items:center;color:var(--deep)}.sidebar nav a:hover,.sidebar nav a.active{background:linear-gradient(90deg,var(--blue),#20b4ee);color:white;box-shadow:0 8px 18px #0d9ff02a}.sidebar nav a.active span,.sidebar nav a:hover span{background:#ffffff26;color:#fff}.sidebar-foot{margin-top:auto;padding:16px 20px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}.main{margin-left:255px;min-height:100vh;width:calc(100% - 255px);display:flex;flex-direction:column}.topbar{height:82px;background:#fff;border-bottom:1px solid var(--line);padding:0 26px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:20}.topbar h1{font-size:22px;margin:0}.topbar p{margin:3px 0 0;color:var(--muted);font-size:12px}.menu-btn{display:none;border:0;background:#eef7f2;border-radius:8px;padding:9px}.user-menu{margin-left:auto;display:flex;align-items:center;gap:10px}.user-menu small{display:block;color:var(--muted);font-size:11px}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--green));color:#fff;font-weight:800}.logout{font-size:12px;color:var(--deep);border-left:1px solid var(--line);padding-left:12px;margin-left:4px}.content{padding:24px;flex:1}.footer{padding:15px 24px;color:var(--muted);font-size:12px;text-align:center}.grid{display:grid;gap:18px}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:20px}.stat{position:relative;overflow:hidden}.stat:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-30px;top:-30px;background:linear-gradient(135deg,#0d9ff01c,#54d70025)}.stat .label{color:var(--muted);font-size:13px}.stat .value{font-size:28px;font-weight:800;margin-top:8px}.stat .note{font-size:12px;color:var(--deep);margin-top:7px}.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.card-head h2{margin:0;font-size:17px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:9px;padding:10px 14px;font-weight:700;font-size:13px;cursor:pointer}.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue2));color:white}.btn-success{background:linear-gradient(135deg,var(--green),#2fb500);color:#063b21}.btn-outline{border:1px solid var(--line);background:white;color:var(--deep)}.btn-danger{background:#fff0f0;color:var(--danger);border:1px solid #f5caca}.btn-sm{padding:7px 10px;font-size:12px}.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}.toolbar .search{min-width:250px;flex:1}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.form-group{display:grid;gap:6px}.form-group.full{grid-column:1/-1}.form-group label{font-size:12px;font-weight:750;color:#3d5a52}.input,.select,.textarea{width:100%;border:1px solid #cfddd6;background:#fff;border-radius:9px;padding:10px 11px;font:inherit;color:var(--ink);outline:none}.textarea{min-height:90px;resize:vertical}.input:focus,.select:focus,.textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px #0d9ff017}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}.table{width:100%;border-collapse:collapse;background:#fff;min-width:760px}.table th,.table td{padding:11px 12px;text-align:left;border-bottom:1px solid #edf3ef;font-size:13px;vertical-align:middle}.table th{background:#f3faf6;color:#466158;font-size:11px;text-transform:uppercase;letter-spacing:.04em;position:sticky;top:0}.table tr:last-child td{border-bottom:0}.table tr:hover td{background:#fbfefc}.badge{display:inline-block;padding:5px 8px;border-radius:999px;font-size:11px;font-weight:800}.badge-green{background:#e8f8e2;color:#248800}.badge-blue{background:#e4f4fd;color:#0875b6}.badge-yellow{background:#fff6dd;color:#926000}.badge-red{background:#ffe8e8;color:#ae2222}.alert{padding:12px 14px;border-radius:10px;margin-bottom:15px;font-size:13px}.alert-success{background:#e9fbe8;color:#237c18;border:1px solid #c9efc5}.alert-error{background:#fff0f0;color:#a12b2b;border:1px solid #f3caca}.alert-warning{background:#fff8e7;color:#835a00;border:1px solid #f1dfb3}.muted{color:var(--muted)}.text-right{text-align:right}.low-stock{color:#ad2b2b;font-weight:800}.chart-bar{height:10px;background:#e8f0ec;border-radius:99px;overflow:hidden}.chart-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--green));border-radius:99px}.login-page{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr}.login-brand{background:linear-gradient(145deg,#edfaff,#f3ffea);display:flex;align-items:center;justify-content:center;padding:50px;position:relative;overflow:hidden}.login-brand:before,.login-brand:after{content:"";position:absolute;border-radius:50%;filter:blur(1px)}.login-brand:before{width:350px;height:350px;background:#0d9ff010;top:-120px;right:-80px}.login-brand:after{width:280px;height:280px;background:#54d70014;bottom:-100px;left:-80px}.login-brand-inner{max-width:650px;z-index:2}.login-brand img{width:100%;max-width:620px}.login-brand h2{font-size:30px;margin:25px 0 10px;color:var(--deep)}.login-brand p{color:var(--muted);font-size:16px;line-height:1.6}.login-panel{background:#fff;display:grid;place-items:center;padding:40px}.login-box{width:100%;max-width:420px}.login-box h1{font-size:30px;margin-bottom:8px}.login-box>p{color:var(--muted);margin-top:0;margin-bottom:28px}.login-box .form-group{margin-bottom:15px}.login-btn{width:100%;padding:12px}.login-help{margin-top:18px;padding:12px;background:#f6faf8;border-radius:10px;font-size:12px;color:var(--muted)}.pos-layout{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:18px}.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-height:calc(100vh - 250px);overflow:auto;padding-right:3px}.product-card{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff;cursor:pointer;transition:.15s}.product-card:hover{transform:translateY(-2px);border-color:var(--blue);box-shadow:0 8px 18px #0000000c}.product-card h3{font-size:14px;margin:0 0 6px}.product-card .sku{font-size:11px;color:var(--muted)}.product-card .price{font-weight:850;color:var(--deep);margin-top:10px}.product-card .stock{font-size:11px;color:var(--muted);margin-top:4px}.cart{position:sticky;top:104px}.cart-items{max-height:310px;overflow:auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.cart-row{display:grid;grid-template-columns:1fr 78px 80px 28px;gap:8px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line);font-size:12px}.cart-row:last-child{border-bottom:0}.cart-row input{padding:7px}.cart-remove{border:0;background:#fff0f0;color:#b22;border-radius:7px;height:28px;cursor:pointer}.totals{display:grid;gap:7px;margin:14px 0}.totals div{display:flex;justify-content:space-between}.totals .grand{font-size:21px;font-weight:900;color:var(--deep);padding-top:9px;border-top:1px solid var(--line)}.receipt{max-width:820px;margin:auto;background:white;padding:28px}.receipt-logo{width:310px;max-width:100%}.receipt h2{text-align:center}.receipt-meta{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:18px 0}.print-only{display:none}@media print{.sidebar,.topbar,.footer,.no-print{display:none!important}.main{margin:0;width:100%}.content{padding:0}.receipt{box-shadow:none;border:0}.print-only{display:block}}@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr)}.pos-layout{grid-template-columns:1fr}.cart{position:static}.product-grid{max-height:none}}@media(max-width:800px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:translateX(0)}.main{margin-left:0;width:100%}.menu-btn{display:block}.topbar{padding:0 14px}.user-menu>div:not(.avatar),.logout{display:none}.content{padding:15px}.grid-4,.grid-3,.grid-2,.form-grid{grid-template-columns:1fr}.product-grid{grid-template-columns:repeat(2,1fr)}.login-page{grid-template-columns:1fr}.login-brand{display:none}}@media(max-width:480px){.product-grid{grid-template-columns:1fr}.cart-row{grid-template-columns:1fr 65px 75px 28px}}
/* Phase 2: hardware, QR and thermal printing */
.terminal-strip{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line);background:#f8fffb;border-radius:10px;font-size:12px}.terminal-strip strong{color:var(--deep)}
.modal{display:none;position:fixed;inset:0;background:#001b1399;z-index:100;padding:20px;align-items:center;justify-content:center}.modal.open{display:flex}.modal-card{width:min(680px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:16px;padding:20px;box-shadow:0 30px 80px #0005}.camera-box{aspect-ratio:4/3;background:#071a15;border-radius:12px;overflow:hidden;display:grid;place-items:center;color:white}.camera-box video{width:100%;height:100%;object-fit:cover}.camera-guide{position:absolute;width:62%;height:42%;border:3px solid var(--green);border-radius:12px;box-shadow:0 0 0 999px #0004}.camera-wrap{position:relative}
.hardware-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.hardware-card{border:1px solid var(--line);border-radius:13px;padding:15px;background:linear-gradient(145deg,#fff,#f6fffa)}.hardware-card h3{margin:0 0 7px;font-size:15px}.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#aab8b3}.status-dot.ok{background:var(--green)}.status-dot.bad{background:var(--danger)}
.qr-label-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.qr-product-card{border:1px solid var(--line);border-radius:12px;padding:13px;display:flex;gap:12px;align-items:flex-start}.qr-product-card input{margin-top:4px}.qr-mini{width:70px;height:70px;flex:0 0 70px}.qr-mini img,.qr-mini canvas{max-width:100%;height:auto}.label-toolbar{position:sticky;bottom:10px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);padding:12px;border-radius:12px;display:flex;gap:10px;align-items:center;z-index:8}
.shift-open{border-left:5px solid var(--green)}.shift-closed{border-left:5px solid #aab8b3}.kpi-inline{display:flex;gap:22px;flex-wrap:wrap}.kpi-inline div{min-width:120px}.kpi-inline small{display:block;color:var(--muted)}.kpi-inline strong{font-size:20px;color:var(--deep)}
.receipt-thermal{--paper-mm:80mm}.receipt-qr{width:116px;height:116px;margin:12px auto}.receipt-qr img,.receipt-qr canvas{max-width:100%;height:auto}.payment-qr{max-width:240px;margin:12px auto;text-align:center}.payment-qr img{max-width:210px;border:1px solid var(--line);border-radius:10px;padding:5px;background:#fff}
.scan-button{white-space:nowrap}.scanner-pulse{animation:scannerPulse .7s ease}@keyframes scannerPulse{50%{box-shadow:0 0 0 6px #54d70035}}
@media print{body.thermal-print .receipt{width:var(--paper-mm);max-width:var(--paper-mm);padding:3mm;font-size:10px}body.thermal-print .receipt-logo{width:58mm;max-height:18mm;object-fit:contain}body.thermal-print .table{min-width:0;font-size:9px}body.thermal-print .table th,body.thermal-print .table td{padding:3px 2px;font-size:9px}body.thermal-print .receipt-meta{display:block}body.thermal-print .receipt-meta>div{margin-bottom:6px}body.thermal-print .receipt .hide-thermal{display:none!important}body.label-print .app-shell{display:block}body.label-print .main{margin:0;width:100%}body.label-print .content{padding:0}.qr-print-sheet{display:grid!important;grid-template-columns:repeat(3,1fr);gap:2mm}.qr-print-label{break-inside:avoid;border:1px dashed #999;padding:2mm;text-align:center;font-size:8pt;min-height:38mm}.qr-print-label .qr-code{width:24mm;height:24mm;margin:auto}.qr-print-label .qr-code img,.qr-print-label .qr-code canvas{width:24mm!important;height:24mm!important}.qr-print-label strong{display:block;font-size:8.5pt}.qr-print-label small{display:block}}
@media(max-width:1000px){.hardware-grid,.qr-label-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.hardware-grid,.qr-label-grid{grid-template-columns:1fr}.label-toolbar{flex-wrap:wrap}}