:root {
  --ground: #F2F4F3;
  --panel: #FFFFFF;
  --ink: #1D2A2E;
  --ink-2: #4E5B5F;
  --ink-3: #7F8A8D;
  --rule: #D9DEDD;
  --rule-2: #E8ECEB;
  --brass: #A9782A;
  --brass-deep: #84591A;
  --brass-tint: #F5ECDD;
  --live: #2F7A4D;
  --live-tint: #E3F1E8;
  --warn: #9A6A00;
  --warn-tint: #FBF1D6;
  --stop: #A83A2C;
  --stop-tint: #F8E4E1;
  --muted-tint: #ECEFEE;
  --radius-s: 4px;
  --radius-m: 8px;
  --focus: 0 0 0 3px rgba(169, 120, 42, .45);
  font-size: 15px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Barlow", system-ui, sans-serif;
  background: var(--ground);
  color: var(--ink);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; box-shadow: var(--focus);
}
h1, h2, h3 { font-family: "Barlow Semi Condensed", "Barlow", sans-serif; font-weight: 600; margin: 0; letter-spacing: -.005em; }
h1 { font-size: 1.75rem; line-height: 1.15; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 208px 1fr; min-height: 100vh; }
.side {
  background: var(--ink); color: #DCE3E2; padding: 20px 14px; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 22px;
}
.brand { font-family: "Barlow Semi Condensed", sans-serif; font-size: 1.2rem; font-weight: 600; color: #fff; line-height: 1.1; }
.brand small { display: block; font-family: "Barlow", sans-serif; font-weight: 400; font-size: .8rem; color: #9FB0AE; margin-top: 3px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  color: #C9D3D1; text-decoration: none; padding: 8px 10px; border-radius: var(--radius-s); font-weight: 500;
}
.nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav a.on { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 3px 0 0 var(--brass); }
.store-pick { display: flex; flex-direction: column; gap: 4px; }
.store-pick label { font-size: .78rem; color: #9FB0AE; }
.store-pick select {
  font: inherit; font-weight: 600; background: #2A3A3F; color: #fff; border: 1px solid #3B4E54; border-radius: var(--radius-s);
  padding: 7px 8px;
}
.chan-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: #2A3A3F; padding: 3px; border-radius: var(--radius-m); }
.chan {
  text-align: center; text-decoration: none; color: #C9D3D1; font-weight: 600; font-size: .9rem; padding: 6px 2px 5px;
  border-radius: 6px; line-height: 1.1;
}
.chan small { display: block; font-weight: 400; font-size: .7rem; color: #8FA19F; margin-top: 2px; }
.chan:hover { color: #fff; background: rgba(255,255,255,.06); }
.chan.on { background: var(--brass); color: #fff; }
.chan.on small { color: #FBEBD0; }
.also { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 99px; background: var(--live-tint); color: var(--live); font-size: .74rem; font-weight: 600; }
.side-foot { margin-top: auto; font-size: .82rem; color: #9FB0AE; display: flex; flex-direction: column; gap: 6px; }
.env-pill { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: .78rem; font-weight: 600; width: fit-content; }
.env-production { background: #2F7A4D; color: #fff; }
.env-sandbox { background: #E2B44C; color: #1D2A2E; }
.env-demo { background: #7E8BA8; color: #fff; }
.side-foot a { color: #C9D3D1; }

.main { padding: 24px 28px 120px; min-width: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head p { margin: 4px 0 0; color: var(--ink-2); max-width: 70ch; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- buttons ---------- */
.btn {
  font: inherit; font-weight: 600; font-size: .92rem; border: 1px solid var(--rule); background: var(--panel); color: var(--ink);
  padding: 7px 13px; border-radius: var(--radius-s); cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: #B9C1C0; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-dark:hover { background: #2B3B40; border-color: #2B3B40; }
.btn-brass { background: var(--brass); color: #fff; border-color: var(--brass); }
.btn-brass:hover { background: var(--brass-deep); border-color: var(--brass-deep); }
.btn-ghost { background: transparent; border-color: transparent; color: inherit; }
.btn-ghost:hover { background: rgba(0,0,0,.05); border-color: transparent; }
.btn-danger { color: var(--stop); }
.btn-sm { padding: 4px 9px; font-size: .84rem; }

/* ---------- status strip ---------- */
.strip { display: flex; gap: 0; border: 1px solid var(--rule); background: var(--panel); border-radius: var(--radius-m); margin-bottom: 14px; overflow-x: auto; }
.strip button {
  font: inherit; background: none; border: 0; border-right: 1px solid var(--rule-2); padding: 10px 16px; text-align: left; cursor: pointer;
  color: var(--ink-2); min-width: 112px;
}
.strip button:last-child { border-right: 0; }
.strip button b { display: block; font-family: "Barlow Semi Condensed", sans-serif; font-size: 1.35rem; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.strip button span { font-size: .84rem; }
.strip button.on { background: var(--muted-tint); box-shadow: inset 0 -3px 0 var(--ink); }
.strip button:hover { background: #F6F8F7; }

/* ---------- filters ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.filters input[type=search], .filters select, .field input, .field select, .field textarea, .inline-input {
  font: inherit; font-size: .93rem; border: 1px solid var(--rule); background: var(--panel); color: var(--ink);
  padding: 7px 10px; border-radius: var(--radius-s);
}
.filters input[type=search] { width: 320px; max-width: 100%; }
.filters label.check { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-2); font-size: .92rem; }
.filters .spacer { flex: 1; }
.count-note { color: var(--ink-2); font-size: .9rem; }

/* ---------- table ---------- */
.table-wrap { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-m); overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: .92rem; }
.grid th {
  text-align: left; font-weight: 600; color: var(--ink-2); font-size: .82rem; padding: 9px 10px; border-bottom: 1px solid var(--rule);
  background: #FAFBFB; position: sticky; top: 0; white-space: nowrap;
}
.grid th button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
.grid th button.sorted { color: var(--ink); }
.grid td { padding: 8px 10px; border-bottom: 1px solid var(--rule-2); vertical-align: middle; }
.grid tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover { background: #F8FAF9; }
.grid tbody tr.sel { background: var(--brass-tint); }
.grid td.num, .grid th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grid .chk { width: 36px; }
.grid input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--brass); cursor: pointer; }
.thumb { width: 44px; height: 44px; border-radius: var(--radius-s); background: var(--muted-tint); object-fit: contain; display: block; border: 1px solid var(--rule-2); }
.thumb-empty { display: grid; place-items: center; color: var(--ink-3); font-size: .7rem; }
.pname { font-weight: 600; color: var(--ink); text-decoration: none; display: block; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pname:hover { text-decoration: underline; }
.psub { color: var(--ink-3); font-size: .82rem; display: flex; gap: 10px; flex-wrap: wrap; }
.psub a { color: var(--ink-3); }
.issue { color: var(--ink-2); font-size: .82rem; max-width: 40ch; }
.strike { color: var(--ink-3); text-decoration: line-through; font-size: .82rem; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.b-live { background: var(--live-tint); color: var(--live); }
.b-ready { background: var(--muted-tint); color: var(--ink); }
.b-needs { background: var(--warn-tint); color: var(--warn); }
.b-blocked, .b-error { background: var(--stop-tint); color: var(--stop); }
.b-ended { background: var(--muted-tint); color: var(--ink-3); }

.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; color: var(--ink-2); font-size: .9rem; gap: 10px; flex-wrap: wrap; }
.empty { padding: 48px 20px; text-align: center; color: var(--ink-2); }
.empty h2 { color: var(--ink); margin-bottom: 6px; }

/* ---------- bulk bar (the brass rail) ---------- */
.rail {
  position: fixed; left: 208px; right: 0; bottom: 0; background: var(--brass); color: #fff; padding: 12px 28px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; transform: translateY(110%); transition: transform .18s ease-out;
  box-shadow: 0 -6px 18px rgba(29, 42, 46, .18); z-index: 20;
}
.rail.up { transform: translateY(0); }
.rail .n { font-family: "Barlow Semi Condensed", sans-serif; font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.rail .btn { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.12); color: #fff; }
.rail .btn:hover { background: rgba(255,255,255,.22); }
.rail .btn-solid { background: #fff; color: var(--brass-deep); border-color: #fff; }
.rail .btn-solid:hover { background: #FFF7EA; }
.rail .gap { flex: 1; }

/* ---------- drawer ---------- */
.scrim { position: fixed; inset: 0; background: rgba(29, 42, 46, .35); z-index: 30; display: none; }
.scrim.on { display: block; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 100vw); background: var(--panel); z-index: 31; overflow-y: auto;
  transform: translateX(100%); transition: transform .2s ease-out; box-shadow: -8px 0 24px rgba(29,42,46,.15);
}
.drawer.on { transform: translateX(0); }
.drawer-head { padding: 18px 22px; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; position: sticky; top: 0; background: var(--panel); z-index: 1; }
.drawer-body { padding: 18px 22px 40px; display: flex; flex-direction: column; gap: 18px; }
.gallery { display: flex; gap: 8px; overflow-x: auto; }
.gallery img { width: 96px; height: 96px; object-fit: contain; border: 1px solid var(--rule-2); border-radius: var(--radius-s); background: var(--muted-tint); flex: none; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-weight: 600; font-size: .88rem; }
.field .hint { color: var(--ink-3); font-size: .82rem; }
.field input, .field select, .field textarea { width: 100%; }
.field input[type=checkbox] { width: 17px; height: 17px; flex: none; accent-color: var(--brass); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: .9rem; margin: 0; }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; }
.desc-preview { border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 14px; max-height: 340px; overflow-y: auto; font-size: .9rem; background: #FCFCFB; }
.desc-preview img { max-width: 100%; }
.note { padding: 10px 12px; border-radius: var(--radius-s); font-size: .9rem; }
.note-warn { background: var(--warn-tint); color: #6B4A00; }
.note-stop { background: var(--stop-tint); color: #7A2A20; }
.note-ok { background: var(--live-tint); color: #1F5535; }
.note-plain { background: var(--muted-tint); color: var(--ink-2); }
.suggest-list { border: 1px solid var(--rule); border-radius: var(--radius-s); margin-top: 4px; max-height: 220px; overflow-y: auto; background: var(--panel); }
.suggest-list button { display: block; width: 100%; text-align: left; font: inherit; font-size: .88rem; padding: 7px 10px; border: 0; border-bottom: 1px solid var(--rule-2); background: none; cursor: pointer; }
.suggest-list button:hover { background: var(--brass-tint); }
.suggest-list button small { color: var(--ink-3); display: block; }

/* ---------- item specifics + modal ---------- */
.asp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; }
.asp { display: flex; flex-direction: column; gap: 4px; }
.asp label { font-weight: 600; font-size: .86rem; }
.asp input { font: inherit; font-size: .92rem; border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 7px 10px; width: 100%; }
.asp .req { color: var(--warn); font-size: .76rem; font-weight: 600; }
.asp-missing input { border-color: var(--stop); background: var(--stop-tint); }
.asp-more { margin-top: 10px; }
.asp-more summary { cursor: pointer; color: var(--ink-2); font-size: .9rem; margin-bottom: 8px; }
.searchrow { display: flex; gap: 6px; margin-top: 4px; }
.searchrow input { flex: 1; min-width: 0; }
.modal-wrap { position: fixed; inset: 0; background: rgba(29, 42, 46, .35); z-index: 40; display: grid; place-items: center; padding: 16px; }
.modal { background: var(--panel); border-radius: var(--radius-m); width: min(760px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 16px 40px rgba(29,42,46,.25); }
.modal-body { padding: 16px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.modal-foot { padding: 12px 22px; border-top: 1px solid var(--rule); display: flex; gap: 10px; align-items: center; }
tr.dirty td { background: var(--brass-tint); }

/* ---------- money columns ---------- */
.grid td.neg, .grid td.neg b { color: var(--stop); }
.dash { color: var(--ink-3); }
.grid th.c-gp, .grid td.c-gp { background: rgba(169, 120, 42, .06); }
.econ td { padding: 5px 8px; }
.econ .econ-total td { border-top: 2px solid var(--rule); }
.colmenu { position: relative; }
.colmenu summary { list-style: none; }
.colmenu summary::-webkit-details-marker { display: none; }
.colmenu-list { position: absolute; right: 0; top: calc(100% + 4px); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-m);
  box-shadow: 0 8px 24px rgba(29,42,46,.15); padding: 10px 12px; z-index: 15; display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.colmenu-list label { display: flex; gap: 8px; align-items: center; font-size: .9rem; white-space: nowrap; }
.colmenu-list input { accent-color: var(--brass); }
.pname { max-width: 34ch; }

/* ---------- job panel ---------- */
.job {
  position: fixed; right: 20px; bottom: 20px; width: min(420px, calc(100vw - 40px)); background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--radius-m); box-shadow: 0 10px 30px rgba(29,42,46,.2); z-index: 25; display: none;
}
.job.on { display: block; }
.rail.up ~ .job { bottom: 84px; }
.job-head { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bar { height: 6px; background: var(--muted-tint); margin: 0 14px; border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--brass); width: 0; transition: width .3s; }
.job-msg { padding: 10px 14px; font-size: .88rem; color: var(--ink-2); }
.job-items { max-height: 260px; overflow-y: auto; border-top: 1px solid var(--rule-2); font-size: .85rem; }
.job-items div { padding: 7px 14px; border-bottom: 1px solid var(--rule-2); }
.job-items .bad { color: var(--stop); }
.job-items .good { color: var(--live); }

/* ---------- panels / settings ---------- */
.panel { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 20px 22px; margin-bottom: 16px; }
.panel h2 { margin-bottom: 4px; }
.panel > p { color: var(--ink-2); margin: 0 0 14px; max-width: 75ch; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 18px; }
.save-row { position: sticky; bottom: 0; background: var(--ground); padding: 12px 0; display: flex; gap: 12px; align-items: center; }
.ok-text { color: var(--live); font-weight: 600; }
.code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; background: var(--muted-tint); padding: 1px 5px; border-radius: 3px; }
.inline-input { width: 120px; }
.cat-name { font-weight: 600; }
.cat-name .crumb { color: var(--ink-3); font-weight: 400; }

.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login form { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 28px; width: min(360px, 100%); display: flex; flex-direction: column; gap: 14px; border-top: 4px solid var(--brass); }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px 16px; gap: 12px; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .side-foot { display: none; }
  .main { padding: 16px 16px 140px; }
  .rail { left: 0; padding: 10px 16px; }
  .row2 { grid-template-columns: 1fr; }
  .hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rail, .drawer, .bar i { transition: none; }
}
.strip .stripl { display: block; padding: 10px 16px; border-right: 1px solid var(--rule-2); color: var(--ink-2); text-decoration: none; min-width: 112px; }
.strip .stripl b { display: block; font-family: "Barlow Semi Condensed", sans-serif; font-size: 1.35rem; color: var(--ink); line-height: 1.1; }
.strip .stripl span { font-size: .84rem; }
.strip a.stripl.on { background: var(--muted-tint); box-shadow: inset 0 -3px 0 var(--ink); }