:root{
  --ink:#232A36;
  --surface:#2E3745;
  --surface-2:#3A4453;
  --line:#4A5568;
  --text:#F4F6FA;
  --muted:#B4BECE;
  --danger:#FF6B72;

  --jade:#5FE0B4;
  --ember:#FF9D52;

  --accent:var(--jade);
  --accent-dim:rgba(95,224,180,.20);

  --r:14px;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
}
html[data-mode="outward"]{ --accent:var(--ember); --accent-dim:rgba(255,138,61,.14); }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ink); color:var(--text);
  font:400 16px/1.45 var(--sans);
  -webkit-font-smoothing:antialiased;
  padding-left:14px;
}
.mono{font-family:var(--mono);font-feature-settings:"zero" 1}

/* the rail is the signature: the mode floods the edge of the room */
.rail{
  position:fixed; inset:0 auto 0 0; width:14px; z-index:50;
  background:var(--accent);
  transition:background .24s cubic-bezier(.4,0,.2,1);
}
.rail::after{
  content:""; position:fixed; top:0; left:14px; right:0; height:3px;
  background:var(--accent); transition:background .24s;
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

button{font:inherit;cursor:pointer;border:0;border-radius:10px}
button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.primary{
  background:var(--accent); color:#0B0E14; font-weight:600;
  padding:18px 28px; font-size:18px; letter-spacing:.01em;
}
.primary:disabled{opacity:.35;cursor:not-allowed}
.ghost{
  background:transparent; color:var(--muted);
  border:1px solid var(--line); padding:12px 18px;
}
.ghost:hover{color:var(--text);border-color:var(--muted)}

.eyebrow{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px
}
.sub{color:var(--muted);font-size:14px;margin:4px 0 0}
.error{color:var(--danger);min-height:20px;font-size:14px;margin:10px 0 0}

/* ---------- gate ---------- */
.gate{display:grid;place-items:center;min-height:100vh;padding:24px}
.gate-card{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:32px}
.gate-card h1{margin:0 0 24px;font-size:30px;font-weight:600;letter-spacing:-.01em}
.gate-card label{display:block;font-size:13px;color:var(--muted);margin:16px 0 6px}
.gate-card input{
  width:100%;background:var(--ink);border:1px solid var(--line);border-radius:10px;
  color:var(--text);padding:14px;font:400 17px var(--sans)
}
.gate-card .primary{width:100%;margin-top:26px}

/* ---------- bar ---------- */
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 28px 18px;flex-wrap:wrap
}
.modeword{display:flex;align-items:baseline;gap:12px}
.modeword .dot{
  width:11px;height:11px;border-radius:50%;background:var(--accent);
  align-self:center;box-shadow:0 0 0 5px var(--accent-dim)
}
.modeword strong{
  font-size:26px;font-weight:700;letter-spacing:.14em;color:var(--accent)
}
.modeword .hint{color:var(--muted);font-size:14px}
.bar-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

.badge{
  background:var(--surface-2);border:1px solid var(--line);color:var(--muted);
  padding:7px 12px;border-radius:999px;font-size:12px;letter-spacing:.04em
}
.toggle{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px}
.toggle button{background:transparent;color:var(--muted);padding:12px 26px;font-weight:600;font-size:15px}
.toggle button.on{background:var(--accent);color:#0B0E14}

/* ---------- scan bay ---------- */
.scanbay{padding:8px 28px 0;max-width:1100px}
.scanlabel{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.scanfield{
  width:100%;background:var(--surface);color:var(--text);
  border:2px solid var(--line);border-bottom:3px solid var(--accent);
  border-radius:var(--r);
  padding:26px 24px;font-size:clamp(28px,5vw,44px);font-weight:500;
  letter-spacing:.08em;caret-color:var(--accent);
  transition:border-color .18s,background .18s
}
.scanfield::placeholder{color:#3A4252;letter-spacing:.04em}
.scanfield.hit{animation:hit .3s ease}
@keyframes hit{0%{background:var(--accent-dim)}100%{background:var(--surface)}}
.scanbay-actions{display:flex;gap:10px;margin-top:14px}
.flash{min-height:24px;margin:12px 0 0;font-size:15px}
.flash.bad{color:var(--danger)}
.flash.warn{color:var(--ember)}
.flash.good{color:var(--jade)}

/* ---------- manifest ---------- */
.manifest{padding:26px 28px 0;max-width:1100px}
.manifest-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.manifest-head h2{margin:0;font-size:24px;font-weight:600;letter-spacing:.04em}
.kindpick{display:flex;gap:8px}
.kindpick button{background:var(--surface);border:1px solid var(--line);color:var(--muted);padding:10px 16px;font-size:14px}
.kindpick button.on{border-color:var(--accent);color:var(--accent)}

.lines{display:grid;gap:12px}
.line{
  display:grid;grid-template-columns:88px 1fr auto;gap:18px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px
}
.line.ticked{border-color:var(--accent);background:linear-gradient(90deg,var(--accent-dim),transparent 42%)}
.line.fresh{opacity:.55}
.line img{width:88px;height:110px;object-fit:cover;border-radius:8px;background:var(--surface-2)}
.line-body p{margin:0}
.line-name{font-weight:600;font-size:17px}
.line-meta{color:var(--muted);font-size:13px;margin-top:4px!important;font-family:var(--mono)}
.sizechip{
  display:inline-block;margin-top:8px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:8px;padding:4px 12px;font:600 18px var(--mono);letter-spacing:.06em
}
.tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-left:10px}
.tag.shelf{color:var(--accent)}

.line-right{display:grid;gap:10px;justify-items:end}
.stepper{display:flex;align-items:center;gap:2px;background:var(--surface-2);border-radius:12px;padding:4px}
.stepper button{width:56px;height:56px;background:transparent;color:var(--text);font-size:26px;font-weight:500}
.stepper span{min-width:52px;text-align:center;font:600 24px var(--mono)}
.expected{font-size:12px;color:var(--muted);font-family:var(--mono)}

.seg{display:flex;gap:6px}
.seg button{background:var(--surface-2);color:var(--muted);padding:9px 14px;font-size:13px}
.seg button.on{background:var(--accent);color:#0B0E14;font-weight:600}

.confirmbar{
  position:sticky;bottom:0;display:flex;justify-content:space-between;gap:14px;
  padding:20px 0 24px;margin-top:22px;background:linear-gradient(180deg,transparent,var(--ink) 30%)
}

/* ---------- stats ---------- */
.stats{
  display:flex;gap:38px;flex-wrap:wrap;
  padding:30px 28px;margin-top:34px;border-top:1px solid var(--line)
}
.stats div{display:flex;flex-direction:column;gap:2px}
.stats span{font:600 26px var(--mono)}
.stats label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stats .warnable.hot span{color:var(--danger)}

/* ---------- sheets ---------- */
[hidden]{display:none !important;}
.sheet{position:fixed;inset:0;background:rgba(8,10,14,.72);display:grid;place-items:center;padding:24px;z-index:60}
.sheet-card{width:min(760px,100%);max-height:86vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.sheet-head h2{margin:0;font-size:22px;font-weight:600}
.search{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:16px;font:400 18px var(--sans)}
.results{display:grid;gap:8px;margin-top:16px}
.result{
  display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;
  background:var(--surface-2);border:1px solid transparent;border-radius:10px;padding:10px;
  cursor:pointer;text-align:left;width:100%;color:var(--text)
}
.result:hover{border-color:var(--accent)}
.result img{width:52px;height:64px;object-fit:cover;border-radius:6px;background:var(--ink)}
.result .n{font-weight:500;font-size:15px}
.result .m{font-family:var(--mono);font-size:12px;color:var(--muted)}
.result .q{font:600 18px var(--mono);color:var(--accent)}

.picked{display:grid;grid-template-columns:120px 1fr;gap:18px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.picked img{width:120px;height:150px;object-fit:cover;border-radius:10px;background:var(--surface-2)}
.picked-body{display:grid;gap:14px;align-content:start}
.picked-body p{margin:0;font-weight:600}
.picked .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.bin{background:var(--ink);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:14px;width:150px}
.check{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:14px}

@media (max-width:640px){
  .line{grid-template-columns:64px 1fr;grid-template-areas:"img body" "right right"}
  .line img{grid-area:img;width:64px;height:80px}
  .line-body{grid-area:body}
  .line-right{grid-area:right;justify-items:stretch}
  .stepper{justify-content:space-between}
  .picked{grid-template-columns:1fr}
  .picked img{width:100%;height:200px}
}