:root{
  --ink:#1c2b2a; --paper:#f5f6f3; --panel:#ffffff; --line:#d8dedb;
  --accent:#0f6b5c; --accent-ink:#ffffff; --warn:#9a5b00; --err:#a32a2a; --muted:#5f6f6d;
}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--paper)}
h1{font-size:1.6rem;margin:0 0 1rem}
h2{font-size:1.05rem;margin:0 0 .75rem}
.muted{color:var(--muted)}
a{color:var(--accent)}

.shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.side{background:var(--ink);color:#e8efed;display:flex;flex-direction:column;padding:1.25rem 1rem}
.brand{font-weight:700;font-size:1.2rem;margin-bottom:1.5rem}
.side nav{display:flex;flex-direction:column;gap:.25rem;flex:1}
.side nav a{color:#cfdad7;text-decoration:none;padding:.5rem .75rem;border-radius:6px}
.side nav a:hover{background:rgba(255,255,255,.08)}
.side nav a.active{background:var(--accent);color:var(--accent-ink)}
.who{display:flex;flex-direction:column;gap:.25rem;border-top:1px solid rgba(255,255,255,.15);padding-top:1rem;font-size:.9rem}
.who .muted{color:#9fb3af;text-transform:capitalize}
.main{padding:1.75rem 2rem;min-width:0}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:1.1rem 1.25rem;margin-bottom:1.25rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem;margin-bottom:1rem}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:1rem;display:flex;flex-direction:column}
.stat strong{font-size:1.6rem}

input,select{font:inherit;padding:.45rem .6rem;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);max-width:100%}
input:focus,select:focus,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.btn{font:inherit;padding:.45rem .9rem;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.small{padding:.25rem .6rem;font-size:.85rem}
.row-form{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}

.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-weight:600;color:var(--muted);font-size:.85rem}
tr.inactive td{color:var(--muted)}
.actions{white-space:nowrap}
.actions form{display:inline-flex;gap:.35rem;margin-right:.5rem}
.actions input{width:9rem}

.alert{padding:.65rem .9rem;border-radius:6px;margin-bottom:1rem;border:1px solid}
.alert.ok{background:#e6f3ef;border-color:#a9d3c8}
.alert.err{background:#f9e8e8;border-color:#e2b3b3;color:var(--err)}
.alert.warn{background:#fbf1de;border-color:#e6cd9a;color:var(--warn)}

.auth-body{display:grid;place-items:center;min-height:100vh}
.auth-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:2rem;width:min(400px,92vw)}
.auth-card form{display:flex;flex-direction:column;gap:.9rem}
.auth-card label{display:flex;flex-direction:column;gap:.3rem;font-size:.9rem}
.auth-card .btn{margin-top:.25rem}

@media (max-width:760px){
  .shell{grid-template-columns:1fr}
  .side{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem}
  .side nav{flex-direction:row;flex:1}
  .who{border:0;padding:0}
  .main{padding:1.25rem 1rem}
}

/* Phase 2 */
.toolbar{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between;margin-bottom:1rem}
a.btn{text-decoration:none;display:inline-block}
.stack{display:flex;flex-direction:column}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.9rem;margin-bottom:.9rem}
.grid2 label,.panel>label{display:flex;flex-direction:column;gap:.3rem;font-size:.9rem}
.chk{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem}
input.num{width:6.5rem}
.tag{font-size:.75rem;background:#e6f3ef;border:1px solid #a9d3c8;border-radius:4px;padding:0 .35rem;margin-left:.35rem}
.pager{display:flex;gap:.35rem;margin-top:1rem;flex-wrap:wrap}
.pager a,.pager .cur{padding:.25rem .6rem;border:1px solid var(--line);border-radius:6px;text-decoration:none}
.pager .cur{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.errlist{max-height:16rem;overflow:auto;padding-left:1.2rem;color:var(--err)}

#label-sheet{display:none}
@media print{
  body.printing-labels,body{background:#fff}
  .side,.main>h1,.no-print,.alert{display:none!important}
  .shell{display:block}.main{padding:0}
  #label-sheet{display:flex;flex-wrap:wrap;gap:2mm}
  .label{width:50mm;height:28mm;padding:1.5mm 2mm;border:.2mm dashed #999;overflow:hidden;break-inside:avoid;font:8pt/1.15 system-ui,sans-serif;text-align:center}
  .lname{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lopts{font-size:7pt}
  .lcode{font-size:7pt;letter-spacing:.5pt}
  .lprice{font-weight:700;font-size:9pt}
}

/* Phase 3 */
.navgroup{margin:.9rem .75rem .2rem;font-size:.8rem;color:#9fb3af}
.side{overflow-y:auto}
.badge{background:#c2410c;color:#fff;border-radius:999px;font-size:.75rem;padding:0 .45rem;margin-left:.3rem}
.r{text-align:right}
.low{color:var(--err)}
.small{font-size:.85rem}
.tag.warn{background:#fbf1de;border-color:#e6cd9a;color:var(--warn)}
.form-narrow{max-width:520px;gap:.9rem}
.form-narrow label,.form-narrow div>label{display:flex;flex-direction:column;gap:.3rem;font-size:.9rem}
.form-narrow label.chk{flex-direction:row}
.form-narrow input,.form-narrow select,.form-narrow textarea{width:100%}
.form-narrow input.num{width:8rem}
textarea{font:inherit;padding:.45rem .6rem;border:1px solid var(--line);border-radius:6px;width:100%;min-width:14rem}
[hidden]{display:none!important}
.vpick{position:relative;min-width:16rem}
.vpick .vpick-input{width:100%}
.vpick-list{position:absolute;z-index:20;left:0;right:0;top:100%;margin:2px 0 0;padding:0;list-style:none;background:#fff;border:1px solid var(--line);border-radius:6px;max-height:14rem;overflow:auto;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.vpick-list:empty{display:none}
.vpick-list li{padding:.45rem .7rem;cursor:pointer}
.vpick-list li:hover{background:#e6f3ef}

/* Phase 4: checkout */
.shell.fs{display:block}
.shell.fs .main{padding:0 1rem 1rem}
.topbar{display:flex;align-items:center;gap:1rem;padding:.6rem 0;margin-bottom:.75rem;border-bottom:1px solid var(--line)}
.topbar .grow{flex:1}.topbar form{margin:0}
.pos{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:1rem;align-items:start}
.pos .panel{margin-bottom:1rem}
.pos-right{position:sticky;top:.5rem}
.vpick-input.big{font-size:1.15rem;padding:.7rem .9rem;width:100%}
.qty{display:inline-flex;align-items:center;gap:.3rem}
.qty .num{width:4rem;text-align:center}
.serials{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;max-width:16rem}
.serial-in{width:11rem}
.chip{display:inline-flex;align-items:center;gap:.25rem;background:#e6f3ef;border:1px solid #a9d3c8;border-radius:999px;padding:0 .2rem 0 .6rem;font-size:.85rem}
.chip .x{border:0;background:none;cursor:pointer;font-size:1rem;line-height:1;padding:.15rem .35rem;color:var(--ink)}
.totals{margin:0}.totals div{display:flex;justify-content:space-between;padding:.2rem 0}
.totals dt{color:var(--muted)}.totals dd{margin:0}
.totals .grand{border-top:1px solid var(--line);margin-top:.3rem;padding-top:.5rem;font-size:1.4rem;font-weight:700}
.totals .grand dt{color:var(--ink)}
.payline{display:flex;gap:.4rem;align-items:center;margin-top:.5rem;flex-wrap:wrap}
.paylabel{min-width:5.5rem;font-size:.9rem}
.pay-ref{flex:1;min-width:8rem}
.big-btn{width:100%;font-size:1.15rem;padding:.8rem;margin-top:.5rem}
.btn:disabled{opacity:.5;cursor:not-allowed}
.overlay{position:fixed;inset:0;background:rgba(20,30,28,.55);display:grid;place-items:center;z-index:50}
.overlay[hidden]{display:none}
.dialog{background:#fff;border-radius:10px;padding:1.5rem 2rem;min-width:min(380px,92vw)}
@media (max-width:900px){.pos{grid-template-columns:1fr}.pos-right{position:static}}