:root{
  --ground:#0B0F10; --surface:#101511; --raised:#161C17; --sunk:#0A0D0B;
  --line:#2A3327; --line-soft:#1D241B;
  --text:#E8DAB8; --text-soft:#A99A7B; --text-faint:#7B7259;
  --olive:#8FA85A; --olive-deep:#485A3A;
  --sand:#CBB88D; --orange:#E07A3A; --rust:#D93A2F; --rust-deep:#842A10;
  --ok:#8FA85A; --warn:#E0A13A; --bad:#D9603A;
  --shadow:rgba(0,0,0,.5);
  --radius:3px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ground); color:var(--text);
  font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-family:Oswald,"Arial Narrow",sans-serif;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
h1{font-size:22px} h2{font-size:17px} h3{font-size:14px}
a{color:var(--orange)}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--sunk);color:var(--text);font:inherit;outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--olive);box-shadow:0 0 0 2px rgba(143,168,90,.16)}
input::placeholder{color:var(--text-faint)}
label{display:block;font-family:Oswald,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:6px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.num{font-variant-numeric:tabular-nums}
.hidden{display:none !important}

/* ---------- chrome ---------- */
.topbar{
  position:sticky;top:0;z-index:40;background:var(--surface);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:1280px;margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.brand{display:flex;align-items:baseline;gap:9px}
.brand .mark{width:10px;height:10px;background:var(--rust);border-radius:50%;align-self:center}
.brand small{color:var(--text-faint);font-family:Oswald,sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.spacer{flex:1}

.tabs{display:flex;gap:2px;background:var(--sunk);padding:3px;border-radius:var(--radius);border:1px solid var(--line-soft)}
.tab{
  padding:7px 15px;border-radius:2px;font-family:Oswald,sans-serif;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);white-space:nowrap;
}
.tab:hover{color:var(--text-soft)}
.tab.on{background:var(--olive-deep);color:var(--text)}
.tab .badge{
  display:inline-block;margin-left:7px;padding:1px 6px;border-radius:8px;
  background:rgba(0,0,0,.35);font-size:11px;font-variant-numeric:tabular-nums;
}
.tab.on .badge{background:rgba(0,0,0,.3)}

.btn{
  padding:10px 16px;border-radius:var(--radius);font-family:Oswald,sans-serif;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);color:var(--text-soft);transition:.12s;
}
.btn:hover:not(:disabled){border-color:var(--text-faint);color:var(--text)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.primary{background:var(--olive-deep);border-color:var(--olive-deep);color:var(--text)}
.btn.primary:hover:not(:disabled){background:#55693f;border-color:var(--olive)}
.btn.go{background:var(--orange);border-color:var(--orange);color:#1A1105;font-weight:500}
.btn.go:hover:not(:disabled){filter:brightness(1.1)}
.btn.danger{border-color:var(--rust-deep);color:var(--bad)}
.btn.danger:hover:not(:disabled){background:var(--rust-deep);color:var(--text)}
.btn.sm{padding:7px 12px;font-size:11.5px}
:focus-visible{outline:2px solid var(--olive);outline-offset:2px}

/* ---------- readings ---------- */
.readings{display:flex;gap:0;flex-wrap:wrap}
.reading{padding:0 16px;border-right:1px solid var(--line-soft);line-height:1.2}
.reading:last-child{border-right:0;padding-right:0}
.reading .v{font-family:Oswald,sans-serif;font-size:21px;font-variant-numeric:tabular-nums}
.reading .k{font-family:Oswald,sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.reading.alert .v{color:var(--bad)}
.reading.good .v{color:var(--olive)}

/* ---------- layout ---------- */
main{max-width:1280px;margin:0 auto;padding:24px 20px 80px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}

/* ---------- esteira ---------- */
.bench{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);gap:18px;align-items:start}
/* Item de grid nasce com min-width:auto, entao o carrossel "Proximos na fila"
   estica a coluna ate caber tudo em vez de rolar dentro dela -- e a pagina
   inteira ganha barra horizontal. */
.bench > *{min-width:0}
@media(max-width:940px){.bench{grid-template-columns:1fr}}

.product{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.product-img{
  width:100%;aspect-ratio:16/10;background:var(--sunk) center/contain no-repeat;
  border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--text-faint);font-size:13px;
}
.product-body{padding:18px}
/* Nome de produto e texto para ler, nao rotulo: sai do Oswald caixa-alta que
   vale para os titulos da interface e volta para a fonte de corpo. */
.product-title{
  font-family:"IBM Plex Sans",sans-serif;text-transform:none;letter-spacing:0;
  font-size:18px;font-weight:600;line-height:1.32;margin:0 0 12px;text-wrap:balance;
}
.pricerow{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.price{font-family:Oswald,sans-serif;font-size:30px;color:var(--sand);font-variant-numeric:tabular-nums;line-height:1}
.price-was{color:var(--text-faint);text-decoration:line-through;font-size:14px;font-variant-numeric:tabular-nums}
.off{background:var(--rust-deep);color:var(--text);padding:3px 8px;border-radius:2px;font-family:Oswald,sans-serif;font-size:12px;letter-spacing:.06em}
.meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--text-faint);font-family:"IBM Plex Mono",monospace}
.chip{
  display:inline-block;padding:3px 9px;border-radius:2px;border:1px solid var(--line);
  font-family:Oswald,sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft);
}
.chip.score{border-color:var(--olive-deep);color:var(--olive)}
.chip.cat{border-color:var(--rust-deep);color:var(--orange)}

/* ---------- steps ---------- */
.step{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:16px;margin-bottom:12px}
.step.done{border-color:var(--olive-deep)}
.step-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.step-n{
  width:23px;height:23px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-family:Oswald,sans-serif;font-size:12px;color:var(--text-faint);flex:none;
}
.step.done .step-n{background:var(--olive-deep);border-color:var(--olive-deep);color:var(--text)}
.step-t{font-family:Oswald,sans-serif;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase}
.hint{font-size:12.5px;color:var(--text-faint);margin-top:8px;line-height:1.5}
kbd{
  font-family:"IBM Plex Mono",monospace;font-size:11px;padding:1px 5px;border:1px solid var(--line);
  border-bottom-width:2px;border-radius:3px;background:var(--sunk);color:var(--text-soft);
}

.verdict{margin-top:12px;padding:12px 14px;border-radius:var(--radius);border-left:3px solid var(--line);background:var(--sunk);font-size:13.5px;line-height:1.5}
.verdict.match{border-left-color:var(--ok)}
.verdict.mismatch{border-left-color:var(--bad)}
.verdict.unresolved{border-left-color:var(--warn)}
.verdict .vt{font-family:Oswald,sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:5px}
.verdict.match .vt{color:var(--ok)} .verdict.mismatch .vt{color:var(--bad)} .verdict.unresolved .vt{color:var(--warn)}
.verdict .target{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--text-soft);display:block;margin-top:6px}

/* ---------- queue strip ---------- */
.upnext{display:flex;gap:9px;overflow-x:auto;padding:4px 0 8px}
.upnext-item{
  flex:none;width:132px;border:1px solid var(--line-soft);border-radius:var(--radius);
  background:var(--surface);padding:8px;text-align:left;
}
.upnext-item:hover{border-color:var(--line)}
.upnext-item .t{font-size:11.5px;line-height:1.32;height:44px;overflow:hidden;color:var(--text-soft)}
.upnext-item .p{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--sand);margin-top:5px}
.upnext-item img{width:100%;height:62px;object-fit:contain;background:var(--sunk);border-radius:2px;margin-bottom:6px}

/* ---------- list / cards ---------- */
.list{display:flex;flex-direction:column;gap:10px}
.item{
  display:grid;grid-template-columns:82px minmax(0,1fr) auto;gap:14px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px;
}
.item img{width:82px;height:70px;object-fit:contain;background:var(--sunk);border-radius:2px}
.item .t{font-size:14px;line-height:1.35;font-weight:500;margin-bottom:5px}
.item .s{font-size:12px;color:var(--text-faint);font-family:"IBM Plex Mono",monospace}
.item.flagged{border-left:3px solid var(--bad)}
@media(max-width:700px){.item{grid-template-columns:60px minmax(0,1fr)}.item .acts{grid-column:2}}

.alertline{margin-top:6px;font-size:12.5px;color:var(--bad)}

/* ---------- toast ---------- */
#toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:26px;z-index:90;
  max-width:min(560px,calc(100% - 32px));padding:13px 18px;border-radius:var(--radius);
  background:var(--raised);border:1px solid var(--line);box-shadow:0 12px 40px var(--shadow);
  font-size:14px;line-height:1.45;
}
#toast.ok{border-color:var(--olive-deep)} #toast.warn{border-color:var(--bad)}

/* ---------- gate ---------- */
.gate{max-width:400px;margin:14vh auto;}
.empty{padding:44px 20px;text-align:center;color:var(--text-faint)}
.empty .big{font-family:Oswald,sans-serif;font-size:19px;color:var(--text-soft);margin-bottom:8px;text-transform:uppercase;letter-spacing:.06em}
details.adv{margin-top:12px;border-top:1px solid var(--line-soft);padding-top:12px}
details.adv summary{cursor:pointer;font-family:Oswald,sans-serif;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
details.adv[open] summary{margin-bottom:12px}