*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#f4f6f9;color:#1d2433;font-size:15px}
.container{max-width:1200px;margin:0 auto;padding:20px}
.topbar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:#14213d;color:#fff;padding:10px 20px}
.brand{font-weight:700;font-size:18px}
.topbar nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.topbar nav a{color:#cfd8ea;text-decoration:none;padding:7px 12px;border-radius:6px}
.topbar nav a:hover,.topbar nav a.active{background:#243b6b;color:#fff}
.logout{display:flex;align-items:center;gap:10px;margin:0}.who{font-size:13px;color:#cfd8ea}
h1{margin:0 0 16px;font-size:24px}h2{font-size:18px;margin:0 0 12px}
.card{background:#fff;border:1px solid #e1e6ef;border-radius:10px;padding:16px;margin-bottom:16px}
.grid{display:grid;gap:16px}.grid.cols4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.grid.cols2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.stat .label{color:#5b6478;font-size:13px}.stat .value{font-size:26px;font-weight:700;margin-top:4px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:8px 10px;border-bottom:1px solid #edf0f6;text-align:left;vertical-align:middle}
th{background:#f7f9fc;font-weight:600;color:#44506b}
td.num,th.num{text-align:right}
.table-wrap{overflow-x:auto}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid #c9d1e0;border-radius:6px;font:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid #4c7be8;border-color:#4c7be8}
label{display:block;font-size:13px;color:#44506b;margin-bottom:4px}
.field{margin-bottom:12px}.row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.btn{background:#2f5fd0;color:#fff;border:0;border-radius:6px;padding:9px 16px;font:inherit;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{background:#244bb0}.btn.small{padding:5px 10px;font-size:13px;background:#3a4a6b}.btn.danger{background:#c0392b}.btn.ghost{background:#e8edf7;color:#1d2433}
.btn:disabled{opacity:.5;cursor:not-allowed}
.alert{padding:10px 14px;border-radius:6px;margin-bottom:14px}.alert.err{background:#fdecea;color:#8c1d13;border:1px solid #f5c2bd}.alert.ok{background:#e8f6ec;color:#1b5e2f;border:1px solid #b9e2c4}
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;background:#e8edf7}.badge.warn{background:#fff1d6;color:#8a5a00}.badge.bad{background:#fdecea;color:#8c1d13}
.login{max-width:380px;margin:8vh auto}
.muted{color:#6b7488;font-size:13px}
.pos{display:grid;grid-template-columns:1fr 360px;gap:16px}@media(max-width:900px){.pos{grid-template-columns:1fr}}
.results{border:1px solid #c9d1e0;border-radius:6px;background:#fff;max-height:260px;overflow:auto;margin-top:4px}
.results button{display:flex;justify-content:space-between;width:100%;text-align:left;background:#fff;border:0;border-bottom:1px solid #edf0f6;padding:8px 10px;font:inherit;cursor:pointer}
.results button:hover{background:#f0f4fd}
.totals div{display:flex;justify-content:space-between;padding:4px 0}.totals .grand{font-size:20px;font-weight:700;border-top:2px solid #14213d;margin-top:6px;padding-top:8px}
.qty{width:70px}