:root{
  --ground:#F4F5F3; --surface:#FFFFFF; --surface-2:#EAECE9;
  --ink:#171E1B; --ink-2:#3D4844; --muted:#6B7671;
  --line:#D5DAD6; --line-strong:#B4BCB7;
  --accent:#A8681A; --accent-soft:#F2E5D0;
  --crit:#993B2C; --crit-soft:#F6E2DE;
  --warn:#836512; --warn-soft:#F3EAD1;
  --ok:#2F6B51; --ok-soft:#DBEAE2;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#101512; --surface:#171E1A; --surface-2:#1E2723;
    --ink:#E6EAE7; --ink-2:#C0C8C4; --muted:#8B9792;
    --line:#2A3430; --line-strong:#3E4A45;
    --accent:#E0A14A; --accent-soft:#33280F;
    --crit:#E2705C; --crit-soft:#341F1B;
    --warn:#D9AE4E; --warn-soft:#2F2710;
    --ok:#6FBF95; --ok-soft:#15281E;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.mono,code,.sku{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace}
a{color:var(--accent); text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px}

/* ---------- chrome ---------- */
header.bar{
  position:sticky; top:0; z-index:20; background:var(--surface);
  border-bottom:1px solid var(--line-strong);
}
.bar-in{
  max-width:1400px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:26px; min-height:56px; flex-wrap:wrap;
}
.brand{
  font-weight:700; letter-spacing:-.02em; font-size:16px;
  text-decoration:none; color:var(--ink); white-space:nowrap;
}
.brand span{color:var(--accent)}
nav{display:flex; gap:4px; flex:1; flex-wrap:wrap}
nav a{
  padding:6px 11px; border-radius:3px; text-decoration:none; color:var(--ink-2);
  font-size:14px; font-weight:500;
}
nav a:hover{background:var(--surface-2); color:var(--ink)}
nav a.on{background:var(--accent-soft); color:var(--accent)}
.who{font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:9px}
.role{
  font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:2px 7px; border-radius:2px; background:var(--surface-2); color:var(--muted);
}
.role.admin{background:var(--accent-soft); color:var(--accent)}
main{max-width:1400px; margin:0 auto; padding:26px 20px 90px}

h1{font-size:26px; font-weight:700; letter-spacing:-.02em; margin:0 0 4px; text-wrap:balance}
h2{font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
   color:var(--muted); margin:34px 0 12px}
.sub{color:var(--muted); font-size:14px; margin:0 0 22px}
.head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
      flex-wrap:wrap; margin-bottom:18px}

/* ---------- tiles ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
       gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:8px}
.tile{background:var(--surface); padding:15px 16px}
.tile .n{font-family:"JetBrains Mono",monospace; font-size:23px; font-weight:500;
         letter-spacing:-.02em; display:block; font-variant-numeric:tabular-nums}
.tile .l{font-size:10.5px; font-weight:700; letter-spacing:.12em;
         text-transform:uppercase; color:var(--muted); margin-top:4px; display:block}
.tile a{text-decoration:none}
.tile.warn .n{color:var(--warn)}

/* ---------- filters ---------- */
.filters{
  display:flex; gap:9px; flex-wrap:wrap; align-items:center;
  background:var(--surface); border:1px solid var(--line); padding:12px;
  margin-bottom:16px;
}
input[type=search],input[type=text],select{
  font:inherit; font-size:14px; padding:7px 10px; border:1px solid var(--line-strong);
  background:var(--ground); color:var(--ink); border-radius:3px; min-width:0;
}
input[type=search]{flex:1; min-width:220px}
.btn{
  font:inherit; font-size:13.5px; font-weight:600; padding:7px 13px; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink);
  border-radius:3px; text-decoration:none; display:inline-block;
}
.btn:hover{border-color:var(--accent); color:var(--accent)}

/* ---------- tables ---------- */
.tw{overflow-x:auto; border:1px solid var(--line); background:var(--surface)}
table{border-collapse:collapse; width:100%; font-size:13.5px}
/* Not sticky: the table sits inside an overflow-x container, so a sticky
   header would pin against that box rather than the page and overlap row one. */
th{
  text-align:left; padding:9px 12px; font-size:10.5px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
  background:var(--surface-2); border-bottom:1px solid var(--line-strong);
  white-space:nowrap;
}
td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums;
              font-family:"JetBrains Mono",monospace}
.sku{font-size:12.5px; white-space:nowrap}
.sku a{text-decoration:none; font-weight:500}
.dim{color:var(--muted)}
.empty{padding:38px 20px; text-align:center; color:var(--muted); font-size:14px}

.pill{
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:2px 6px; border-radius:2px; white-space:nowrap; display:inline-block;
}
.pill.none{background:var(--crit-soft); color:var(--crit)}
.pill.warn{background:var(--warn-soft); color:var(--warn)}
.pill.ok{background:var(--ok-soft); color:var(--ok)}
.pill.info{background:var(--surface-2); color:var(--muted)}

/* ---------- detail ---------- */
.cols{display:grid; grid-template-columns:2fr 1fr; gap:26px; align-items:start}
@media (max-width:920px){ .cols{grid-template-columns:1fr} }
.card{background:var(--surface); border:1px solid var(--line); padding:16px 18px}
.kv{display:grid; grid-template-columns:auto 1fr; gap:7px 18px; font-size:13.5px}
.kv dt{color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.1em;
       text-transform:uppercase; padding-top:2px}
.kv dd{margin:0; word-break:break-word}
.crumb{font-size:12.5px; color:var(--muted); margin-bottom:10px}
.crumb a{text-decoration:none}
.pager{display:flex; gap:10px; align-items:center; justify-content:space-between;
       margin-top:14px; font-size:13px; color:var(--muted); flex-wrap:wrap}

/* ---------- sign-in ---------- */
.gate{max-width:420px; margin:12vh auto; text-align:center}
.gate .card{padding:34px 30px}
.gate h1{font-size:22px}
.gate .btn{margin-top:18px; padding:11px 20px; font-size:15px;
           background:var(--accent); color:#fff; border-color:var(--accent)}
.gate .btn:hover{opacity:.9; color:#fff}
.note{font-size:12.5px; color:var(--muted); margin-top:16px; line-height:1.5}
.banner{
  background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn);
  padding:8px 14px; font-size:12.5px; font-weight:600; text-align:center;
}

/* ---------- forms ---------- */
form.card label{display:block; margin-bottom:14px; font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
form.card label input,form.card label select{
  display:block; width:100%; margin-top:5px; font-size:15px; font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--ink)}
form.card label .dim{font-weight:600; letter-spacing:.06em}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{opacity:.9; color:#fff}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:3px; margin-bottom:18px; flex-wrap:wrap;
  border-bottom:1px solid var(--line-strong)}
.tabs a{padding:8px 15px; text-decoration:none; color:var(--ink-2); font-size:14px;
  font-weight:600; border-bottom:2px solid transparent; margin-bottom:-1px}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--accent); border-bottom-color:var(--accent)}

.alert{background:var(--crit-soft); color:var(--crit); border:1px solid var(--crit);
  padding:11px 15px; font-size:14px; font-weight:500; margin:0 0 18px}
td.up{color:var(--ok)} td.down{color:var(--crit)}

/* ---------- scanner ---------- */
.scanner{background:var(--surface); border:1px solid var(--line); min-height:300px;
  display:flex; align-items:center; justify-content:center; overflow:hidden}
.scanner video{max-width:100%; height:auto}

/* ---------- labels ---------- */
.labels{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px}
.label{display:flex; gap:12px; align-items:center; background:var(--surface);
  border:1px solid var(--line-strong); padding:10px; break-inside:avoid}
.label img{flex:none; background:#fff; padding:3px}
.label-text{min-width:0}
.label-code{font-family:"JetBrains Mono",monospace; font-size:12.5px; font-weight:700;
  letter-spacing:-.01em; word-break:break-all}
.label-title{font-size:12px; color:var(--ink-2); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical}
.label-sub{font-size:10.5px; color:var(--muted); margin-top:2px}

@media print{
  .no-print,header.bar,.banner{display:none !important}
  body{background:#fff; color:#000}
  main{padding:0; max-width:none}
  .labels{grid-template-columns:repeat(3,1fr); gap:0}
  .label{border:1px dashed #999; background:#fff; color:#000; padding:8px}
  .label-title,.label-sub{color:#333}
  @page{margin:10mm}
}

/* ---------- BOM tree ---------- */
table.tree tbody tr.depth-1{background:color-mix(in srgb, var(--accent-soft) 30%, transparent)}
table.tree tbody tr.depth-2{background:color-mix(in srgb, var(--accent-soft) 55%, transparent)}
table.tree tbody tr.depth-3{background:color-mix(in srgb, var(--accent-soft) 80%, transparent)}
.twig{color:var(--accent); margin-right:5px; font-size:11px}
a.pill{text-decoration:none; margin-left:7px}

/* ---------- BOM edit grid ---------- */
table.edit td{padding:5px 6px}
table.edit input[type=text],table.edit input[type=number]{
  width:100%; padding:5px 7px; font-size:13px; border:1px solid var(--line-strong);
  background:var(--ground); color:var(--ink); border-radius:3px}
table.edit td.mid{text-align:center; vertical-align:middle}
table.edit input[type=checkbox]{width:17px; height:17px; accent-color:var(--accent)}
.actions{display:flex; gap:10px; margin:18px 0 6px; flex-wrap:wrap}
form.card > label, .card > form > label{display:block; margin-bottom:8px; font-size:11px;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.card > form > label select{display:block; width:100%; max-width:520px; margin-top:5px;
  font-size:14px; font-weight:400; letter-spacing:0; text-transform:none}