:root{
  --bg: #14201c; --panel: #1b2b25; --panel-2: #223830; --line: #2f4a3f;
  --amber: #d99a3c; --text: #eef2ee; --text-dim: #9fb3a8;
  --green: #4caf7d; --red: #d9603c; --mono: 'Courier New', ui-monospace, monospace;
  --sans: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
*{box-sizing:border-box;}
body{margin:0; font-family:var(--sans); background:var(--bg); color:var(--text); min-height:100vh;}
.app{max-width:1200px; margin:0 auto; padding:16px;}
h1,h2,h3{font-weight:600; margin:0 0 8px;}
.topbar{display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:var(--panel); border:1px solid var(--line); border-radius:10px; margin-bottom:16px; flex-wrap:wrap; gap:10px;}
.brand{display:flex; align-items:center; gap:10px;}
.brand-logo{height:40px; width:auto; display:block;}
.brand-name{font-size:15px; font-weight:600;}
.brand-sub{font-size:11px; color:var(--text-dim);}
.userchip{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-dim);}
.btn{background:var(--panel-2); color:var(--text); border:1px solid var(--line); padding:8px 14px; border-radius:7px; cursor:pointer; font-size:13px;}
.btn:hover{border-color:var(--amber);}
.btn.primary{background:var(--amber); color:#26170a; border-color:var(--amber); font-weight:600;}
.btn.danger{border-color:var(--red); color:var(--red);}
.btn.small{padding:5px 10px; font-size:12px;}
.btn:disabled{opacity:0.5; cursor:not-allowed;}
.tabs{display:flex; gap:4px; margin-bottom:16px; flex-wrap:wrap;}
.tab{padding:9px 16px; border-radius:7px; cursor:pointer; font-size:13px; background:transparent; color:var(--text-dim); border:1px solid transparent;}
.tab.active{background:var(--panel-2); color:var(--amber); border-color:var(--line);}
.card{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:16px;}
.lowstock-fab{
  position:fixed; bottom:20px; right:20px; z-index:150;
  width:52px; height:52px; border-radius:50%; background:var(--red); color:#fff;
  border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:16px; box-shadow:0 4px 16px rgba(0,0,0,0.4);
  animation:lowstock-pulse 1.8s ease-in-out infinite;
}
.lowstock-fab.quiet{ animation:none; background:var(--panel-2); color:var(--text-dim); border:1px solid var(--line); }
@keyframes lowstock-pulse{
  0%{ box-shadow:0 0 0 0 rgba(217,96,60,0.6); }
  70%{ box-shadow:0 0 0 14px rgba(217,96,60,0); }
  100%{ box-shadow:0 0 0 0 rgba(217,96,60,0); }
}
.lowstock-popover{
  position:fixed; bottom:82px; right:20px; z-index:150; width:300px; max-height:360px; overflow:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,0.5);
  padding:12px;
}
.lowstock-popover h4{ margin:0 0 8px; font-size:13px; }
.lowstock-row{ display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line); font-size:13px; }
.editable-cell{ cursor:pointer; border-bottom:1px dotted var(--text-dim); padding:2px 0; }
.editable-cell:hover{ background:rgba(217,154,60,0.12); border-radius:3px; }
.editable-cell input{ padding:2px 4px; font-size:13px; width:100%; }
.lowstock-row:last-child{ border-bottom:none; }
.lowstock-highlight{ animation:lowstock-flash 1.8s ease-out 1; border-radius:6px; }
@keyframes lowstock-flash{
  0%{ background:rgba(217,96,60,0.4); }
  100%{ background:transparent; }
}
.modal-overlay{position:fixed; inset:0; background:rgba(10,15,13,0.7); z-index:200; display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto;}
.modal-box{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px; max-width:640px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.grid2{display:grid; grid-template-columns:1.4fr 1fr; gap:16px;}
@media(max-width:820px){.grid2{grid-template-columns:1fr;}}
input, select{background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:8px 10px; font-size:14px; width:100%;}
input:focus, select:focus{outline:none; border-color:var(--amber);}
label{font-size:12px; color:var(--text-dim); display:block; margin-bottom:4px;}
table{width:100%; border-collapse:collapse; font-size:13px;}
th{text-align:left; padding:8px 10px; color:var(--text-dim); font-weight:500; border-bottom:1px solid var(--line); font-size:11px; text-transform:uppercase;}
td{padding:9px 10px; border-bottom:1px solid var(--line);}
.num{font-family:var(--mono); text-align:right;}
.tag{display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:600; border:1px solid transparent;}
.tag.ok{background:rgba(76,175,125,0.15); color:var(--green); border-color:rgba(76,175,125,0.4);}
.tag.low{background:rgba(217,96,60,0.15); color:var(--red); border-color:rgba(217,96,60,0.4);}
.tag.up{background:rgba(217,96,60,0.18); color:var(--red);}
.tag.down{background:rgba(76,175,125,0.18); color:var(--green);}
.tag.same{background:rgba(159,179,168,0.15); color:var(--text-dim);}
.login-wrap{min-height:80vh; display:flex; align-items:center; justify-content:center;}
.login-box{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:36px; width:340px;}
.login-logo{height:64px; width:auto; display:block; margin:0 auto 16px;}
.field{margin-bottom:14px;}
.err{color:var(--red); font-size:13px; margin-top:8px; min-height:16px;}
.pos-grid{display:grid; grid-template-columns:1fr 340px; gap:16px;}
@media(max-width:900px){.pos-grid{grid-template-columns:1fr;}}
.prod-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px;}
.prod-card{background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:12px; cursor:pointer; text-align:left;}
.prod-card:hover{border-color:var(--amber);}
.prod-card .pname{font-size:13px; font-weight:600; margin-bottom:4px;}
.prod-card .pprice{font-family:var(--mono); color:var(--amber); font-size:14px;}
.prod-card .pstock{font-size:11px; color:var(--text-dim); margin-top:6px;}
.cart-line{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; gap:8px;}
.cart-line .name{flex:1;}
.qtybtn{width:22px; height:22px; border-radius:5px; border:1px solid var(--line); background:var(--bg); color:var(--text); cursor:pointer; font-size:13px;}
.total-row{display:flex; justify-content:space-between; padding:12px 0; font-size:16px; font-weight:700; border-top:1px solid var(--line); margin-top:8px;}
.empty{color:var(--text-dim); font-size:13px; text-align:center; padding:24px 0;}
.alertbar{background:rgba(217,96,60,0.12); border:1px solid var(--red); border-radius:8px; padding:10px 14px; font-size:13px; margin-bottom:14px; color:#f0ac8f;}
.toast{position:fixed; bottom:20px; right:20px; background:var(--panel-2); border:1px solid var(--amber); padding:12px 18px; border-radius:8px; font-size:13px; z-index:99;}
.flexrow{display:flex; gap:10px; align-items:end; flex-wrap:wrap;}
.flexrow > div{flex:1; min-width:120px;}
textarea{width:100%; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:10px; font-family:var(--mono); font-size:12px; min-height:110px;}
.muted{color:var(--text-dim); font-size:12px;}
.section-title{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}