:root {
  --bg: #f3efe6;
  --ink: #1c2420;
  --muted: #5c6b63;
  --line: #d5cbb8;
  --card: #fffaf2;
  --sidebar: #16352b;
  --sidebar-ink: #e8f3ee;
  --accent: #0f6b4c;
  --accent-ink: #f7fff9;
  --warn: #8a4b12;
  --danger: #8b1e1e;
  --chip: #e7efe9;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "IBM Plex Sans", sans-serif;
  background:
    radial-gradient(1200px 500px at 10% -10%, #dfece4 0%, transparent 55%),
    radial-gradient(900px 400px at 100% 0%, #efe4d2 0%, transparent 50%),
    var(--bg);
}

.brand {
  margin: 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 600;
}

/* Login */
.login-body {
  display: grid;
  place-items: center;
  padding: 2rem;
}
.login-card {
  width: min(420px, 100%);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 2rem;
}
.login-card h1 {
  margin: 0.35rem 0;
  font-family: "IBM Plex Serif", serif;
}
.login-card .sub, .login-card .hint { color: var(--muted); }
.login-card label {
  display: grid;
  gap: 0.35rem;
  margin: 0.85rem 0;
  font-size: 0.9rem;
}
.login-card input, .content input, .content select, .content textarea, .modal-card input, .modal-card select, .modal-card textarea {
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  padding: 0.55rem 0.65rem;
  font: inherit;
  background: #fff;
}
.login-card button, button {
  border: 0;
  border-radius: 0.4rem;
  padding: 0.65rem 1rem;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
button.ghost {
  background: transparent;
  color: inherit;
  border: 1px solid var(--line);
}
button.small { padding: 0.35rem 0.6rem; font-size: 0.85rem; }
button.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.attr-admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
#asave-all:disabled { background: #e4e7e4; color: #79827c; opacity: 1; }
#asave-all:not(:disabled) { background: var(--accent); color: var(--accent-ink); }
.error { color: var(--danger); }
.banner { margin: 0 0 0.9rem; padding: 0.7rem 0.85rem; border-radius: 8px; line-height: 1.45; }
.banner.ok { background: #e7f4ea; color: #14532d; }
.banner.err { background: #fde8e8; color: #8b1e1e; }

/* App shell */
.app-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
}
.sidebar {
  background: var(--sidebar);
  color: var(--sidebar-ink);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1rem;
  gap: 1rem;
  height: 100vh;
  max-height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  flex-shrink: 0;
}
.sidebar .brand { color: #9ad7bd; }
.sidebar-brand small { color: #b7cfc4; }
.nav {
  display: grid;
  gap: 0.35rem;
  flex: 1;
  align-content: start;
  align-items: stretch;
}
.nav button {
  text-align: left;
  background: transparent;
  color: inherit;
  border: 0;
  padding: 0.7rem 0.8rem;
  border-radius: 0.45rem;
  height: auto;
  min-height: 0;
  line-height: 1.3;
}
.nav button.active, .nav button:hover { background: rgba(255,255,255,0.1); }
.sidebar-foot { display: grid; gap: 0.4rem; margin-top: auto; }
.sidebar-foot .ghost { border-color: rgba(255,255,255,0.25); color: inherit; }

.main {
  min-width: 0;
  min-height: 0;
  height: 100vh;
  overflow-y: auto;
}
.main-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 1.5rem 0.5rem;
}
.main-head h1 {
  margin: 0;
  font-family: "IBM Plex Serif", serif;
  font-size: 1.5rem;
}
.head-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.status {
  margin: 0;
  padding: 0 1.5rem;
  color: var(--muted);
  min-height: 1.3em;
}
.content { padding: 0.75rem 1.5rem 2.5rem; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 0.9rem 1rem;
}
.card small { color: var(--muted); }
.card strong { display: block; margin-top: 0.35rem; font-size: 1.35rem; }
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  overflow: hidden;
}
.panel-title {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}
.panel-body { padding: 1rem; }
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.filters.filters-labeled { align-items: flex-end; }
.filters .filter-field {
  display: grid;
  gap: 0.2rem;
  color: var(--muted);
  font-size: 0.78rem;
}
.filters .filter-field input,
.filters .filter-field select {
  min-width: 9.5rem;
  color: var(--ink);
}
.table-wrap { overflow: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
th, td {
  text-align: left;
  padding: 0.55rem 0.5rem;
  border-top: 1px solid var(--line);
  vertical-align: top;
}
th { color: var(--muted); font-weight: 500; font-size: 0.8rem; }
.chips { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.chip {
  background: var(--chip);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
}
.chip.warn { background: #f3e2cb; color: var(--warn); }
.chip.ok { background: #d8eee3; color: var(--accent); }
.chip.bad { background: #f3d8d8; color: var(--danger); }
.meta { color: var(--muted); font-size: 0.86rem; line-height: 1.4; }
.empty { text-align: center; color: var(--muted); padding: 1.5rem; }
.order-block {
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: #fffcf7;
  padding: 0.85rem 1rem 0.5rem;
  margin-bottom: 0.85rem;
}
.order-head {
  display: grid;
  grid-template-columns: auto minmax(140px, 0.9fr) minmax(220px, 1.4fr) auto;
  gap: 0.75rem 1rem;
  align-items: start;
  margin-bottom: 0.55rem;
}
.order-head .toggle {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 0.4rem;
  background: #e8f0eb;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
}
.order-id h3 { margin: 0; font-size: 1.05rem; }
.order-items.collapsed { display: none; }
.parcel-panel { display: grid; gap: 0.5rem; margin: 0.15rem 0 0.75rem; }
.parcel-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.7rem; }
.parcel-card {
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: #fff;
  padding: 0.55rem 0.7rem;
}
.parcel-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.75rem;
  align-items: start;
}
.parcel-sections { display: grid; gap: .85rem; min-width: 0; }
.parcel-section { min-width: 0; padding: .85rem; border: 1px solid var(--line); border-radius: .5rem; }
.parcel-section h4, .parcel-contents h4 { margin: 0 0 .75rem; font-size: .9rem; }
.parcel-section h4 { color: var(--accent); }
.parcel-record-hint { margin: -.25rem 0 .75rem; font-size: .8rem; }
.parcel-records { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: .75rem; }
.parcel-records .parcel-media-field { background: var(--card); }
.parcel-records strong { font-size: .85rem; line-height: 1.5; }
.parcel-fields .parcel-note { grid-column: 1 / -1; }
.parcel-fields label { min-width: 0; }
.parcel-fields input, .parcel-fields select, .parcel-fields textarea { width: 100%; min-width: 0; }
.parcel-fields textarea { resize: vertical; min-height: 5rem; }
.parcel-contents { margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--line); }
.parcel-contents h4 .meta { display: inline-block; margin-left: .5rem; font-size: .8rem; font-weight: 400; }
.parcel-product { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .75rem; overflow-wrap: anywhere; }
.parcel-item-link { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.parcel-line { padding: .55rem .65rem; border-radius: .35rem; background: var(--card); flex-wrap: wrap; }
.parcel-line > button { flex-shrink: 0; }
.order-table tr[id] { scroll-margin-top: 1rem; }
.order-table tr.parcel-item-target > td, .order-table tr:target > td { background: #e7f3eb; }
.order-table tr.parcel-item-target, .order-table tr:target { outline: 2px solid var(--accent); outline-offset: -2px; }
.parcel-item-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.parcel-fields label {
  display: grid;
  gap: 0.15rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.parcel-fields input { width: 100%; }
.parcel-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.parcel-lines { list-style: none; margin: 0.45rem 0 0; padding: 0; display: grid; gap: 0.25rem; }
.parcel-line { display: flex; justify-content: space-between; gap: 0.5rem; align-items: center; }
.parcel-mode { display: grid; gap: 0.4rem; margin: 0.6rem 0; }
.parcel-mode select { width: 100%; }
.parcel-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.25rem 0 0.4rem; }
.col-pack { width: 4.5rem; text-align: center; }
.pack-check {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  font-size: 0.75rem;
  color: var(--muted);
}
.ship-card {
  display: grid;
  gap: 0.15rem;
  padding: 0.45rem 0.65rem;
  background: #eef5f1;
  border-radius: 0.45rem;
  border: 1px solid var(--line);
  font-size: 0.9rem;
  min-width: 0;
}
.order-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}
.order-tag {
  display: inline-block;
  margin-bottom: 0.25rem;
  padding: 0.1rem 0.45rem;
  border-radius: 0.3rem;
  background: #16352b;
  color: #e8f3ee;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.req-preview { margin-top: 0.25rem; color: var(--warn); }

.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(20, 28, 24, 0.45);
  display: grid;
  place-items: center;
  padding: 1rem;
  z-index: 40;
}
.modal-card {
  width: min(560px, 100%);
  background: var(--card);
  border-radius: 0.8rem;
  padding: 1.2rem;
  border: 1px solid var(--line);
  max-height: 90vh;
  overflow: auto;
}
.modal-card.wide { width: min(720px, 100%); }
.modal-card h2 { margin: 0 0 0.8rem; font-family: "IBM Plex Serif", serif; }
.modal-card .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
.modal-card .item { display: grid; gap: 0.3rem; }
.modal-card .item.full { grid-column: 1 / -1; }
.modal-card .actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}
.product-edit-head {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  margin-bottom: 0.9rem;
}
.thumb.lg, .no-img.lg {
  width: 88px;
  height: 88px;
}
.product-table .sku { font-weight: 600; }
.product-table .title-zh { margin-top: 0.15rem; }
.attr-edit { margin-top: 0.35rem; }

.thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 0.4rem;
  border: 1px solid var(--line);
  background: #fff;
}
.thumb.big, .no-img.big {
  width: 112px;
  height: 112px;
}
.thumb.huge, .no-img.huge {
  width: 224px;
  height: 224px;
}
.img-btn {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  border-radius: 0.45rem;
}
.img-btn:hover .thumb { outline: 2px solid var(--accent); }
.img-preview-bg {
  display: grid;
  place-items: center;
  gap: 0.75rem;
  align-content: center;
}
.img-close { margin-top: 0.25rem; }
.img-zoom {
  max-width: min(920px, 94vw);
  max-height: 82vh;
  object-fit: contain;
  border-radius: 0.5rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  background: #fff;
}
.no-img {
  display: inline-flex;
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line);
  border-radius: 0.4rem;
  color: var(--muted);
  font-size: 0.75rem;
}
.photo-stack { display: flex; flex-wrap: wrap; gap: 0.35rem; max-width: 240px; }
.photo-stack .img-btn { width: auto; }
.img-nav { display: flex; align-items: center; gap: 0.6rem; }
.store-link { color: var(--accent); font-size: 0.86rem; }
.order-table .col-photo { width: 240px; }
.order-table .col-product { min-width: 360px; }
.order-table .col-req { min-width: 220px; width: 28%; }
.order-table .col-qty { width: 56px; text-align: center; }
.order-table .sku { font-weight: 600; }
.order-table .title-zh { margin-top: 0.2rem; font-size: 1rem; }
.order-table .spec-zh { margin-top: 0.25rem; color: var(--accent); font-size: 0.9rem; }
.order-table .orig { opacity: 0.75; }
.order-table { table-layout: fixed; }
.order-table .col-pack { width: 64px; }
.order-table .col-photo { width: 136px; }
.order-table .col-product { min-width: 0; width: 42%; overflow-wrap: anywhere; }
.order-table .col-req { min-width: 0; width: auto; container-type: inline-size; }
.order-table .col-qty { width: 52px; font-weight: 600; }
.order-table .photo-stack { max-width: 112px; }
.order-item-workflow { display: grid; gap: .7rem; min-width: 0; }
.order-item-requirement { display: grid; gap: .35rem; min-width: 0; }
.order-item-workflow .req-area { min-height: 6rem; height: 7rem; }
.order-item-workflow .line-status { margin: 0; padding: .65rem 0 0; min-width: 0; }
.order-item-workflow .status-edits { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: .3rem 0 .4rem; }
.order-item-workflow .purchase-section { margin-top: 0; min-width: 0; }
.order-item-workflow input, .order-item-workflow select, .order-item-workflow textarea { min-width: 0; width: 100%; }
.order-item-workflow .purchase-section > [data-add-purchase] { justify-self: start; }
.order-item-workflow .purchase-summary-title { gap: .2rem .5rem; }
.order-item-workflow .purchase-summary-title .meta { flex-basis: 100%; line-height: 1.5; }
.product-detail-actions { margin-bottom: 0; }
@container (min-width: 40rem) {
  .order-item-workflow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .order-item-workflow .line-status { border-top: 0; padding: 0; }
  .order-item-workflow .purchase-section { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .order-table { min-width: 780px; }
}
.attr-list { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.item-actions, .fields { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }
.col-flow { min-width: 320px; }
.req-area {
  width: 100%;
  min-height: 14rem;
  resize: vertical;
  font: inherit;
  line-height: 1.45;
}
.status-edits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}
.status-edits label {
  display: grid;
  gap: 0.15rem;
  align-items: start;
  font-size: 0.75rem;
  color: var(--muted);
}
.status-select { width: 100%; }
.status-select.need-req { border-color: #c9a36a; }
input.need-tracking { border-color: var(--danger); }
[data-save-row].pulse {
  box-shadow: 0 0 0 2px rgba(15, 107, 76, 0.25);
}

.attr-list { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.item-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}
.attr-admin input,
.attr-admin select {
  width: 100%;
  min-width: 6rem;
}
.internal-table input,
.internal-table textarea,
.internal-table select {
  width: 100%;
  min-width: 8rem;
}
.internal-table .col-code { min-width: 11rem; }
.internal-table .col-img {
  min-width: 16rem;
}
.img-slots {
  display: flex;
  gap: 0.5rem;
}
.img-slot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  width: 4.6rem;
}
.img-slot .thumb,
.img-slot .no-img {
  width: 64px;
  height: 64px;
}
.internal-table .code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
}
.store-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.4rem; }
.store-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: #e7efe9;
}
.chip-x {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--danger);
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.15rem;
}
.upload-btn {
  display: inline-block;
  cursor: pointer;
}
.internal-line {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0.35rem 0;
}
.ac-wrap { max-width: 18rem; }
.ac-input {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.store-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem 1rem;
  margin-bottom: 0.8rem;
}
.store-counts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 1rem;
  max-width: 760px;
}
.form-grid .item { display: grid; gap: 0.35rem; align-content: start; }
.form-grid .item.full { grid-column: 1 / -1; }
.form-grid label { color: var(--muted); font-size: 0.82rem; }
.form-grid input, .form-grid textarea { width: 100%; }
.store-card-note { margin: 0 0 0.8rem; white-space: pre-wrap; }
.panel-body .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.8rem;
  margin-top: 0.85rem;
}
.pager select { width: auto; min-width: 4.5rem; }
.pager button:disabled { opacity: 0.45; }
.line-status,
.purchase-section {
  margin-top: 0.85rem;
  display: grid;
  gap: 0.45rem;
}
.line-status { padding-top: 0.7rem; border-top: 1px solid var(--line); }
.purchase-card {
  display: block;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  background: #fff;
}
.purchase-card-body { display: grid; gap: .45rem; }
.purchase-card:not([open]) > .purchase-card-body { display: none; }
.purchase-summary { display: flex; align-items: center; gap: .65rem; cursor: pointer; list-style: none; }
.purchase-summary::-webkit-details-marker { display: none; }
.purchase-summary::before { content: "▸"; color: var(--muted); flex-shrink: 0; }
.purchase-card[open] > .purchase-summary::before { content: "▾"; }
.purchase-summary-title { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; overflow-wrap: anywhere; }
.purchase-summary-title strong { font-size: .85rem; }
.purchase-summary-title .meta { font-size: .8rem; }
.purchase-summary-status { flex-shrink: 0; }
.purchase-summary .confirm-flag, span.confirm-flag { cursor: inherit; }
.purchase-card[open] > .purchase-summary { margin-bottom: .65rem; padding-bottom: .65rem; border-bottom: 1px solid var(--line); }
.purchase-card[open] > .purchase-summary .purchase-summary-status { display: none; }
.purchase-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: .25rem; }
.purchase-note,
.modal-card textarea.req-editor {
  width: 100%;
  min-height: 16rem;
  resize: vertical;
  font: inherit;
  line-height: 1.45;
}
.purchase-block {
  display: grid;
  gap: 0.3rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--line);
}
.purchase-block:first-child { border-top: 0; padding-top: 0; }
.purchase-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.confirm-flag {
  border: 0;
  border-radius: 999px;
  padding: 0.18rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}
.confirm-flag.pending { background: #f6d34d; color: #5c4300; }
.confirm-flag.done { background: #1f8a4c; color: #fff; }
.confirm-flag:disabled { cursor: default; opacity: 1; }
.export-filters { align-items: end; }
.export-filters label {
  display: grid;
  gap: 0.25rem;
  color: var(--muted);
  font-size: 0.82rem;
}
.export-filters select { min-width: 14rem; }
.export-filters input[type="file"] { min-width: 16rem; }
.import-console {
  height: 320px;
  max-height: 50vh;
  overflow: auto;
  margin: 1rem 0 0;
  padding: 1rem;
  border: 1px solid #35434a;
  border-radius: 0.45rem;
  background: #171d1f;
  color: #dce3e9;
  font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  scrollbar-color: #607783 #20292e;
  scrollbar-gutter: stable;
}
.import-console:focus-visible { outline: 2px solid #66aaff; outline-offset: 2px; }
.import-logs { margin-top: 0.7rem; }
.file-config-row { border: 1px solid var(--line); border-radius: 0.5rem; padding: 1rem; margin-bottom: 1rem; display: grid; gap: 0.5rem; }
.file-config-row label { display: grid; gap: 0.4rem; }
.file-config-row input { width: 100%; }
.file-config-row button { justify-self: start; }
.import-logs > div { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; margin-top: 0.5rem; }
.purchase-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.purchase-sku { font-weight: 650; }
.purchase-title { font-size: 0.92rem; line-height: 1.35; }
.purchase-label {
  display: grid;
  gap: 0.15rem;
  color: var(--muted);
  font-size: 0.75rem;
}
.qty-line, .purchase-prices, .purchase-schedule {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 0.7rem;
  align-items: end;
}
.status-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.qty-pair { display: grid; gap: 0.15rem; }
.qty-pair span { color: var(--muted); font-size: 0.75rem; }
.qty-pair strong { font-size: 1.15rem; line-height: 1.2; }
.purchase-prices, .purchase-schedule {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.purchase-schedule .span-2,
.purchase-label.span-2 { grid-column: 1 / -1; }
.purchase-card .item-actions { margin-top: 0.15rem; }
.supplier-form textarea { min-width: 16rem; }
.attr-file { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.attr-file video.thumb { width: 96px; height: auto; }
@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
}
.sku-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-bottom: 0.2rem; }
.sku-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.35rem 0 0.45rem; }
.pick-list { display: grid; gap: 0.35rem; margin-top: 0.7rem; max-height: 52vh; overflow: auto; }
.pick-row {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  align-items: center;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
}

.modal-card.product-picker {
  width: min(1080px, 100%);
  max-height: calc(100dvh - 2rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.product-picker > h2, .product-picker > .meta,
.product-picker > .filters, .product-picker > .actions { flex-shrink: 0; }
.product-picker .filters input { flex: 1; min-width: 0; }
.product-picker .pick-list {
  min-height: 0;
  max-height: 65dvh;
  overflow: auto;
  align-content: start;
}
.product-picker .pick-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; }
.picker-thumb { width: 72px; height: 72px; object-fit: contain; border-radius: 0.35rem; background: var(--bg); }
.picker-no-image { display: grid; place-items: center; font-size: 0.75rem; color: var(--muted); border: 1px solid var(--line); }
.picker-details { min-width: 0; overflow-wrap: anywhere; }
.product-picker .pick-row button { white-space: nowrap; }
@media (max-width: 600px) {
  .modal-card.product-picker { padding: 0.8rem; }
  .product-picker .pick-row { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 0.4rem; }
  .product-picker .picker-thumb { width: 52px; height: 52px; }
}

@media (max-width: 900px) {
  .order-head {
    grid-template-columns: auto 1fr;
  }
  .ship-card, .order-side { grid-column: 1 / -1; }
  .order-side { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .thumb.huge, .no-img.huge { width: 140px; height: 140px; }
  .order-table .col-photo { width: 150px; }
}

/* Empty internal-product image slots are the upload control. */
.img-slot .image-upload-slot { background: transparent; padding: 0; cursor: pointer; }
.img-slot .image-upload-slot:hover { border-color: var(--accent); color: var(--accent); }
.img-slot .image-upload-slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.img-slot .image-upload-slot:disabled { cursor: wait; opacity: 0.6; }
.config-section > summary { cursor:pointer; list-style-position:inside; user-select:none; }
.config-section:not([open]) > summary { border-bottom:0; }
.import-workspace { display:grid; grid-template-columns:280px minmax(0,1fr); margin-top:1rem; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.import-job-list { padding:1rem; background:#faf7f0; max-height:480px; overflow:auto; }
.import-job-list h3 { margin:0; }
.import-job { width:100%; text-align:left; display:grid; gap:0.4rem; padding:0.8rem; margin-top:0.6rem; background:white; color:#273936; border:1px solid var(--line); overflow-wrap:anywhere; }
.import-job.selected { border-color:#147253; box-shadow:inset 3px 0 #147253; background:#edf6f0; }
.import-job span { font-size:12px; }
.job-status.ok { color:#147253; } .job-status.failed { color:#b42318; } .job-status.partial { color:#996000; }
.import-job-detail { min-width:0; background:#171d1f; color:#dce3e9; }
.import-log-heading { display:flex; justify-content:space-between; gap:1rem; padding:1rem; border-bottom:1px solid #35434a; overflow-wrap:anywhere; }
.import-job-detail .import-console { margin:0; height:340px; max-height:none; border:0; border-radius:0; }
.import-job-downloads { display:flex; flex-wrap:wrap; gap:0.8rem; padding:1rem; border-top:1px solid #35434a; }
.import-job-downloads a { color:#8ac2ff; }
@media(max-width:760px) { .import-workspace { grid-template-columns:1fr; } .import-job-list { max-height:220px; } }

.global-progress { position:fixed; z-index:1000; top:.75rem; left:50%; width:min(680px,calc(100vw - 2rem)); padding:.7rem .9rem; background:rgba(23,53,43,.97); color:#f7fbf5; border:1px solid #4f806b; border-radius:.7rem; opacity:0; transform:translate(-50%,-140%); transition:transform .25s ease,opacity .25s ease; pointer-events:none; }
.global-progress.visible { opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.global-job-head { display:flex; justify-content:space-between; gap:.75rem; font-size:.82rem; }
.global-bar { height:.38rem; margin:.4rem 0 .2rem; background:#345348; border-radius:99px; overflow:hidden; }
.global-bar i { display:block; height:100%; background:#79d5a2; transition:width .35s ease; }
.status-error { color:#b42318; }
@media (max-width:680px) { .app-body{display:block}.sidebar{position:sticky;top:0;z-index:900;width:100%;height:auto;display:flex;overflow-x:auto}.sidebar-foot{display:none}.nav{display:flex;overflow-x:auto}.main-head{align-items:flex-start;flex-direction:column}.content{padding:.5rem .65rem 1.5rem}.filters>input,.filters>select,.filters>button{width:100%;flex:1 1 100%}.grid{grid-template-columns:1fr!important}.global-progress{top:.45rem;width:calc(100vw - 1rem)} }

.global-cells{display:grid;grid-template-columns:repeat(100,1fr);gap:2px;height:7px;margin:.45rem 0 .25rem}.global-cells i{background:#345348}.global-cells i.on{background:#79d5a2}

.status{display:none!important}

.list-title{display:flex;justify-content:space-between;align-items:center}.list-notice{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:400;color:var(--muted)}.list-loading{display:none;width:.85rem;height:.85rem;border:2px solid #f0b1a8;border-top-color:#c9342b;border-radius:50%;animation:list-spin .75s linear infinite}.list-loading.active{display:inline-block}@keyframes list-spin{to{transform:rotate(360deg)}}

.product-detail-dialog fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.product-detail-images { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }
.product-media-field, .order-product-media { display: flex; flex-direction: column; gap: 0.4rem; }
.product-media-field { padding: 0.5rem; border: 1px solid var(--line); border-radius: 0.4rem; }
.product-detail-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.product-video { width: 260px; max-width: 100%; max-height: 180px; }
.order-product-media { padding: 0.4rem; }
#product-detail-error { color: #8b1e1e; }

/* Keep product dialog controls visible; only its content pane scrolls. */
.modal-card.product-detail-dialog {
  width: min(960px, 100%);
  max-height: min(92vh, 1000px);
  max-height: min(92dvh, 1000px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.product-detail-header, .product-detail-footer {
  flex: 0 0 auto;
  padding: 1rem 1.25rem;
  background: var(--card);
}
.product-detail-header { border-bottom: 1px solid var(--line); }
.product-detail-header h2 { margin-bottom: 0.5rem; overflow-wrap: anywhere; }
.product-detail-header p { margin: 0; line-height: 1.5; }
.product-detail-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 1.25rem;
}
.product-detail-footer { border-top: 1px solid var(--line); }
.product-detail-footer .actions { margin: 0; flex-wrap: wrap; }
.product-detail-footer .actions button { min-width: 88px; }
.product-detail-footer #product-detail-error { margin: 0 0 0.6rem; max-height: 4rem; overflow: auto; overflow-wrap: anywhere; }
.product-detail-footer #product-detail-error:empty { display: none; }
.product-detail-sku { display: grid; gap: 0.4rem; }
.product-detail-dialog .product-detail-images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.product-detail-dialog .product-media-field { min-width: 0; padding: 0.75rem; background: #fffdf9; }
.product-detail-dialog .product-media-preview { min-height: 96px; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.product-detail-dialog .product-media-preview .thumb { width: 96px; height: 96px; object-fit: contain; }
.product-detail-dialog input[type="file"] { width: 100%; min-width: 0; font-size: 0.8rem; }
.product-detail-dialog .product-media-field > button { align-self: flex-start; }
.product-detail-attributes > .item { min-width: 0; padding: 0.6rem 0; align-content: start; }
.product-detail-attributes > .item > label { color: var(--muted); font-size: 0.85rem; }
.product-detail-text { line-height: 1.6; }
.product-detail-dialog textarea.req-editor { min-height: 160px; height: 200px; }
@media (max-width: 600px) {
  .product-detail-backdrop { padding: 0.5rem; }
  .modal-card.product-detail-dialog { max-height: calc(100dvh - 1rem); }
  .product-detail-header, .product-detail-footer, .product-detail-body { padding: 0.8rem; }
  .product-detail-header h2 { font-size: 1.1rem; }
  .product-detail-dialog .product-detail-images { grid-template-columns: 1fr; }
}
@media (max-height: 500px) {
  .product-detail-header .meta { display: none; }
  .product-detail-header, .product-detail-footer { padding: 0.6rem 1rem; }
}

.parcel-media-field { min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.7rem; border: 1px solid var(--line); border-radius: 8px; }
.parcel-media-field video { max-width: 100%; max-height: 180px; }
.parcel-media-field input[type="file"] { min-width: 0; font-size: 0.8rem; }
.parcel-media-field button { align-self: flex-start; }
.parcel-attachment { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.parcel-attachment a, .parcel-attachment span { min-width: 0; overflow-wrap: anywhere; }
.parcel-attachment button { flex-shrink: 0; }
.lazy-video > summary { cursor: pointer; padding: .4rem 0; }

.parcel-summary { cursor: pointer; font-weight: 600; overflow-wrap: anywhere; padding: 0.2rem 0; }
.parcel-summary:focus-visible { outline: 2px solid var(--accent, #146d50); outline-offset: 3px; border-radius: 3px; }
.parcel-card[open] > .parcel-summary { margin-bottom: 0.65rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--line); }

/* Long-running tasks report actual stage counts; unknown totals use an activity bar. */
.global-progress { max-height: min(70vh, 34rem); overflow-y: auto; }
.global-job + .global-job { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid #4f806b; }
.global-job-head { align-items: flex-start; flex-wrap: wrap; }
.global-job-head > span { flex: 1 1 240px; text-align: right; overflow-wrap: anywhere; }
.global-job-context { margin: 0.5rem 0 0; font-weight: 600; font-size: 0.9rem; overflow-wrap: anywhere; }
.global-job-metrics { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; margin: 0.45rem 0; font-size: 0.78rem; }
.global-job-metrics > span { padding: 0.2rem 0.4rem; border-radius: 4px; background: #2b4b3e; }
.global-job-activity { margin: 0.4rem 0; font-size: 0.8rem; color: #d8ebdf; overflow-wrap: anywhere; }
.global-job-progress-label { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.76rem; }
.global-job-connection { margin: 0.5rem 0 0; font-size: 0.74rem; color: #c5d9ce; }
.global-job-stores { display: flex; flex-wrap: wrap; gap: 0.35rem 0.65rem; margin-top: 0.5rem; font-size: 0.76rem; }
.global-job-stores .sync-store-queued { color: #bfd0c6; }
.global-job-stores .sync-store-running { color: #fff; font-weight: 600; }
.global-job-stores .sync-store-ok { color: #8be7b0; }
.global-job-stores .sync-store-error, .global-job-failures { color: #ffbfad; }
.global-job-failures p { margin: 0.4rem 0; font-size: 0.8rem; overflow-wrap: anywhere; }
.global-job-error .global-job-head { color: #ffbfad; }
.global-cells { position: relative; overflow: hidden; }
.global-cells.indeterminate::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 28%; background: #79d5a2; animation: sync-activity 0.9s linear infinite; }
.global-cells.is-running + .global-job-progress-label > span:first-child::before { content: ""; display: inline-block; width: 0.6rem; height: 0.6rem; margin-right: 0.35rem; border: 2px solid #4f806b; border-top-color: #a8edc4; border-radius: 50%; animation: list-spin .75s linear infinite; }
@keyframes sync-activity { from { transform: translateX(-100%); } to { transform: translateX(360%); } }
@media (max-width: 680px) {
  .global-job-head > span { text-align: left; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .global-cells.indeterminate::after { animation: none; width: 100%; background: repeating-linear-gradient(90deg, #79d5a2 0 8px, transparent 8px 16px); }
  .global-cells.is-running + .global-job-progress-label > span:first-child::before { animation: none; }
}
.job-status.interrupted { color: #b3261e; }

.purchase-export-task { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: .5rem; background: #fff; }
.purchase-export-task p { margin: .5rem 0; }
.purchase-export-task progress { width: 100%; accent-color: var(--accent); }
.purchase-export-task .download-link { display: inline-block; padding: .6rem 0; font-weight: 600; }
.product-grid-value { min-width: 9rem; max-width: 24rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.internal-edit-page { max-width: 1480px; margin: 0 auto; }
.internal-edit-toolbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.internal-edit-save, .media-editor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.internal-edit-save [hidden], .media-editor-actions [hidden] { display: none; }
.internal-edit-page fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 1rem; }
.internal-edit-page fieldset > .panel { margin-bottom: 0; }
.internal-edit-page .product-detail-sku { max-width: 32rem; }
.internal-edit-page .product-detail-images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.internal-edit-page .product-media-field { min-width: 0; padding: .85rem; background: #fff; }
.internal-edit-page .product-media-preview { min-height: 120px; display: flex; align-items: center; }
.internal-edit-page .product-media-preview .thumb { width: 120px; height: 120px; object-fit: contain; }
.internal-edit-page input[type="file"] { width: 100%; min-width: 0; }
.internal-edit-attributes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem 1.25rem; align-items: start; }
.internal-edit-field { display: grid; gap: .45rem; min-width: 0; }
.internal-edit-field.full { grid-column: 1 / -1; }
.internal-edit-field label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .75rem; font-size: .9rem; }
.internal-attribute-code { font-size: .75rem; overflow-wrap: anywhere; font-weight: 400; }
.internal-edit-field input, .internal-edit-field textarea { display: block; width: 100%; min-width: 0; }
.internal-edit-field textarea { min-height: 11rem; height: 11rem; resize: vertical; line-height: 1.6; }
.internal-edit-page .req-editor { min-height: 11rem; }
.internal-edit-media { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.internal-edit-media-item { min-width: 0; display: grid; gap: .3rem; }
.internal-edit-section-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.internal-edit-section-title .meta { font-size: .8rem; font-weight: 400; }
.internal-edit-footnote p { margin: 0 0 1rem; font-size: .85rem; line-height: 1.6; }
.internal-edit-page .media-editor-actions { justify-content: flex-start; }
.internal-edit-page .product-media-field > strong { overflow-wrap: anywhere; }
#internal-edit-error:empty { display: none; }
@media (max-width: 680px) {
  .internal-edit-toolbar { flex-wrap: wrap; }
  .internal-edit-save { flex: 1 1 100%; justify-content: space-between; }
  .internal-edit-page .product-detail-images { grid-template-columns: 1fr; }
  .internal-edit-attributes { grid-template-columns: 1fr; }
}

.orders-list-heading{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.75rem}
.orders-list-heading button{font-size:.82rem;padding:.4rem .65rem}

/* Inspection queue: touch-friendly cards, shared parcel fields and media. */
.inspection-page .filters { align-items: center; }
.inspection-page .filters input { flex: 1 1 24rem; min-width: 0; }
.inspection-list { display: grid; gap: 1rem; }
.inspection-card { min-width: 0; border: 1px solid var(--line); border-radius: .65rem; padding: 1rem; background: #fff; }
.inspection-card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.inspection-card-head h2 { margin: 0; font-size: 1.25rem; overflow-wrap: anywhere; }
.inspection-card > .meta { margin: .5rem 0; overflow-wrap: anywhere; }
.inspection-items { list-style: none; padding: 0; margin: .75rem 0; display: grid; gap: .5rem; }
.inspection-items li { display: flex; justify-content: space-between; align-items: start; gap: .75rem; padding: .65rem; border-radius: .4rem; background: var(--bg); }
.inspection-items li > div { min-width: 0; overflow-wrap: anywhere; }
.inspection-item-state { flex-shrink: 0; font-size: .85rem; color: var(--muted); }
.inspection-measurements, .inspection-records { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: .75rem 0; }
.inspection-measurements label { display: grid; gap: .35rem; font-size: .9rem; }
.inspection-note { display: grid; gap: .35rem; margin: .75rem 0 1rem; font-size: .9rem; }
.inspection-note textarea { width: 100%; min-width: 0; min-height: 6rem; resize: vertical; line-height: 1.6; }
.inspection-measurements input, .inspection-measurements select { width: 100%; min-height: 44px; min-width: 0; }
.inspection-records { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.inspection-page .parcel-media-field input[type="file"] { width: 100%; min-height: 44px; }
.inspection-page .parcel-media-field video { width: 100%; max-height: 220px; }
.inspection-card-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .65rem; border-top: 1px solid var(--line); padding-top: .75rem; }
.inspection-page button { min-height: 44px; }
.inspection-save-status { flex: 1; overflow-wrap: anywhere; }
@media (max-width: 680px) {
  .app-body.inspection-active { display: flex; flex-direction: column; }
  .inspection-active .sidebar { flex: 0 0 auto; }
  .inspection-active .main { flex: 1; height: auto; min-height: 0; }
  .inspection-card { padding: .75rem; }
  .inspection-page .panel-body { padding: .75rem; }
  .inspection-records { grid-template-columns: 1fr; }
  .inspection-items li { flex-direction: column; gap: .25rem; }
  .inspection-card-actions button { width: 100%; }
  .inspection-page .pager { gap: .5rem; }
}
@media (max-width: 380px) {
  .inspection-measurements { grid-template-columns: 1fr; }
}

/* Manuals and videos are independent attachments, shared by both product editors. */
.product-media-field .product-media-preview.is-empty { min-height: 0; padding: .25rem 0; }
.product-media-field .product-media-preview { align-items: start; flex-wrap: wrap; gap: .75rem; }
.product-attachment { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; max-width: 100%; min-width: 0; }
.product-attachment .product-video { width: 280px; max-width: 100%; }
.attachment-name { overflow-wrap: anywhere; max-width: 280px; }
.media-add-label { display: grid; gap: .4rem; margin-top: .5rem; }
.media-editor-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.inspection-items li { align-items: stretch; padding: .85rem; gap: 1rem; }
.inspection-item-media { display: flex; flex-wrap: wrap; align-content: start; gap: .5rem; flex: 0 0 220px; }
.inspection-photo { padding: 0; border: 1px solid var(--line); border-radius: .4rem; overflow: hidden; width: 100px; height: 100px; background: white; }
.inspection-photo img { width: 100%; height: 100%; object-fit: contain; }
.inspection-item-detail { flex: 1; min-width: 0; }
.inspection-item-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.inspection-requirement { margin-top: .65rem; padding: .75rem; background: var(--card); border: 1px solid var(--line); border-radius: .4rem; }
.inspection-requirement > div { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; margin-top: .35rem; }
@media (max-width: 700px) {
  .inspection-items li { flex-direction: column; }
  .inspection-item-media { flex-basis: auto; }
  .inspection-photo { width: 92px; height: 92px; }
}
.product-sync-meta { align-self:center; color:var(--muted); font-size:.82rem; white-space:nowrap; }
@media(max-width:680px){.product-sync-meta{width:100%;}}

.dashboard-metric { text-align:left; cursor:pointer; color:var(--ink); background:var(--card); }
.dashboard-metric:hover { outline:2px solid var(--accent,#176647); }
.dashboard-metric strong { display:block; margin-top:8px; }
.dashboard-monitor { display:flex; gap:16px; flex-wrap:wrap; padding:12px 0; border-bottom:1px solid var(--line,#ddd); }
.dashboard-monitor strong { min-width:180px; }
.dashboard-task-target { outline: 2px solid var(--accent); outline-offset: 4px; scroll-margin-top: 100px; }