:root{--bg:#f5f6f8;--fg:#17181c;--muted:#6b7280;--line:#dfe2e8;--card:#fff;--acc:#1f6feb;--ok:#157f3d;--warn:#b45309;--bad:#b42318}
@media (prefers-color-scheme:dark){:root{--bg:#14161a;--fg:#e8eaed;--muted:#9aa1ab;--line:#2b2f36;--card:#1b1e23;--acc:#4c8dff;--ok:#4ade80;--warn:#fbbf24;--bad:#f87171}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
button,input,select{font:inherit;color:inherit}
input,select{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:10px 11px;min-width:0}
input,select,button{font-size:16px}
label{display:block;margin:6px 0}
label.sm{flex:1 1 130px;margin:4px 0}
label.chk{display:flex;align-items:center;gap:8px}
.btn{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:10px 14px;cursor:pointer;min-height:42px}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.big{flex:1;font-weight:600;min-height:52px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.grow{flex:1 1 220px}
.wrap{flex-wrap:wrap}
.hidden{display:none!important}
.muted{color:var(--muted)}
.err{color:var(--bad);min-height:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin:10px 0}
h1{font-size:22px;margin:0}h2,h3{margin:0 0 8px;font-size:16px}
header{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px}
.logo{background:var(--acc);color:#fff;border-radius:8px;width:28px;height:28px;display:grid;place-items:center;font-weight:700}
nav{display:flex;gap:4px;flex:1;overflow-x:auto}
.tab{background:none;border:0;border-radius:8px;padding:9px 11px;cursor:pointer;color:var(--muted);white-space:nowrap}
.tab.on{background:var(--bg);color:var(--fg);font-weight:600}
.me{display:flex;align-items:center;gap:8px}
main{padding:10px 12px 90px;max-width:1400px;margin:0 auto}
.login{display:grid;place-items:center;min-height:100vh;padding:14px}
.login-card{width:100%;max-width:380px;padding:22px}
/* POS */
.pos{display:grid;grid-template-columns:1fr 360px;gap:12px;align-items:start}
.searchbar{display:flex;gap:8px;margin-bottom:8px}
.searchbar input{flex:1}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;max-height:62vh;overflow:auto}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px;cursor:pointer;text-align:left}
.pcard b{display:block;font-size:14px;line-height:1.25}
.pcard .p{font-weight:600;color:var(--acc)}
.pcard.low{border-color:var(--warn)}
.cart{position:sticky;top:66px}
#cart{max-height:34vh;overflow:auto;margin:6px 0}
.citem{display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.citem .nm{font-size:14px}
.qty{display:flex;align-items:center;gap:4px}
.qty button{width:34px;height:34px;padding:0;border:1px solid var(--line);background:var(--card);border-radius:8px;cursor:pointer}
.qty input{width:62px;padding:6px;text-align:center}
.totrow{display:flex;justify-content:space-between;align-items:center;font-size:20px;padding:8px 0;border-top:2px solid var(--line)}
/* tables */
.scroll{overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:8px 9px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{background:var(--bg);position:sticky;top:0;font-weight:600}
td.num,th.num{text-align:right}
tr.low td.stock{color:var(--warn);font-weight:700}
tr.cancel td{opacity:.55;text-decoration:line-through}
.mini{padding:5px 8px;min-height:32px;font-size:13px}
/* kpi */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px}
.kpi .v{font-size:21px;font-weight:700}
.kpi .k{color:var(--muted);font-size:13px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lrow{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--line);font-size:14px}
/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:12px;z-index:20}
.modal-card{width:100%;max-width:640px;max-height:92vh;overflow:auto}
#toast{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:.25s;z-index:30;max-width:92vw}
#toast.on{opacity:.96}
@media(max-width:900px){.pos{grid-template-columns:1fr}.cart{position:static}.pgrid{max-height:38vh}.grid2{grid-template-columns:1fr}nav{order:3;width:100%}}
@media print{header,nav,.searchbar,#toast{display:none}}