:root {
  color-scheme: light;
  --bg: #f5f5f7;
  --panel: rgba(255, 255, 255, .86);
  --panel-solid: #ffffff;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --line: rgba(0, 0, 0, .10);
  --line-strong: rgba(0, 0, 0, .16);
  --accent: #007aff;
  --accent-2: #30d158;
  --bad: #ff3b30;
  --shadow: 0 16px 40px rgba(0, 0, 0, .08);
  --control: rgba(255, 255, 255, .9);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  cursor: default;
  overflow-x: hidden;
}

input, textarea, select, [contenteditable="true"], pre {
  user-select: text;
}

button, summary, label, a, .thumbWrap, .filterChip, .sourceOption, .navLinks a {
  user-select: none;
}

.shell { width: min(1440px, calc(100vw - 32px)); margin: 0 auto; padding: 18px 0 40px; }
.sideNav {
  position: fixed;
  left: -42px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 50px;
  height: max-content;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 14px 14px 0;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px);
  display: block;
  padding: 8px 8px 8px 0;
  box-shadow: 0 12px 32px rgb(0 0 0 / 10%);
  transition: left .16s ease, box-shadow .16s ease;
}
.sideNav:hover, .sideNav:focus-within {
  left: 0;
  box-shadow: 0 10px 28px rgb(0 0 0 / 14%);
}
.navToggle { display: none; }
.navLinks {
  display: grid;
  gap: 8px;
  width: 42px;
  height: max-content;
}
.navLinks a {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 12px;
  color: var(--muted);
  text-decoration: none;
}
.navLinks a.active {
  background: rgba(0, 122, 255, .10);
  color: #0057d9;
  font-weight: 650;
  box-shadow: inset 0 0 0 1px rgba(0, 122, 255, .20);
}
.navLinks a:hover {
  background: rgba(0, 0, 0, .04);
  color: var(--accent);
}
.navIcon {
  width: 26px;
  text-align: center;
  font-size: 20px;
  line-height: 1;
}
.navText { display: none; }
.sideNav + .appShell {
  margin-left: auto;
  margin-right: 220px;
  width: min(1440px, calc(100vw - 236px));
}
.navBadge {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--bad);
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 0;
}
.navBadge[hidden] { display: none; }
.navBadge {
  position: absolute;
  top: 7px;
  right: 8px;
}
.viewPage { border-top: 1px solid var(--line); padding-top: 14px; }
.viewPage[hidden] { display: none; }
.topbar {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}
.topbarCopy { display: none; }
.providerSwitch {
  display: grid;
  grid-template-columns: repeat(2, 64px);
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  backdrop-filter: blur(16px);
  pointer-events: auto;
}
.providerSwitchButton {
  width: 64px;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #636366;
  font: inherit;
  font-weight: 650;
  box-shadow: none;
}
.providerSwitchButton:hover:not(:disabled) {
  border-color: transparent;
  background: rgba(0, 0, 0, .05);
}
.providerSwitchButton.active {
  background: #1d1d1f;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.providerSwitchButton:disabled { cursor: not-allowed; opacity: .45; }
.providerSwitchButton.active:disabled { opacity: 1; }
.providerSwitch.pending { cursor: wait; opacity: .72; }
.providerSwitch.hasError { border-color: rgba(196, 43, 28, .55); }
body.browseView #browsePage > .sectionHead,
body.uploadView #uploadPage > .sectionHead {
  display: none;
}
body.browseView .browsePanel {
  border-top: 0;
  padding-top: 0;
}
body.uploadView .uploadPanel {
  border-top: 0;
  padding-top: 0;
}
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
h1 { margin: 0; font-size: 24px; letter-spacing: 0; }
h2 { margin: 0; font-size: 16px; letter-spacing: 0; }
p { margin: 4px 0 0; color: var(--muted); }

.iconBtn, button {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 10px;
  min-height: 36px;
  padding: 0 12px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.iconBtn:hover, button:hover { border-color: var(--line-strong); background: var(--panel-solid); }
.iconBtn { width: 40px; font-size: 20px; }

.workspace { display: grid; gap: 18px; }
.uploadPanel, .browsePanel { min-width: 0; }
.sectionHead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sectionHead h2 { font-size: 18px; }
.sectionHead p { margin-top: 3px; }
.uploadBand { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 14px; align-items: start; margin-bottom: 14px; }
.dropzone {
  position: relative;
  align-self: start;
  height: 176px;
  min-height: 176px;
  border: 1.5px dashed rgba(0, 122, 255, .30);
  background: rgba(255, 255, 255, .72);
  border-radius: 16px;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 8px;
  padding: 18px;
}
.dropzone strong { font-size: 20px; letter-spacing: 0; }
.dropzone span { color: var(--muted); max-width: 28ch; margin-inline: auto; }
.dropzone.drag { background: rgba(0, 122, 255, .08); border-color: var(--accent); }
.dropzone strong { font-size: 18px; }
.dropzone span { color: var(--muted); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.uploadSelection {
  display: grid;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.uploadSelection[hidden] { display: none; }
.uploadSelectionHead, .uploadSelectionActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.uploadSelectionHead > div { min-width: 0; display: grid; gap: 2px; }
.uploadSelectionHead strong { font-size: 14px; }
.uploadSelectionHead span { color: var(--muted); font-size: 12px; }
.uploadSelectionList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 10px;
}
.uploadSelectionItem {
  position: relative;
  min-width: 0;
}
.uploadSelectionItem > button:first-child {
  display: grid;
  grid-template-rows: 92px auto auto;
  gap: 5px;
  width: 100%;
  min-height: 148px;
  padding: 7px;
  border-color: var(--line);
  background: rgba(255, 255, 255, .66);
  text-align: left;
}
.uploadSelectionItem > button:first-child:hover { border-color: rgba(0, 122, 255, .36); }
.uploadSelectionItem.selected > button:first-child {
  border-color: rgba(0, 122, 255, .65);
  background: rgba(0, 122, 255, .09);
  box-shadow: 0 0 0 2px rgba(0, 122, 255, .12);
}
.uploadSelectionItem img {
  width: 100%;
  height: 92px;
  object-fit: cover;
  border-radius: 8px;
  background: #f2f2f7;
}
.uploadSelectionItem strong, .uploadSelectionItem small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uploadSelectionItem strong { font-size: 12px; }
.uploadSelectionItem small { color: var(--muted); font-size: 11px; }
.uploadSelectionItem.selected small { color: #0057d9; font-weight: 650; }
.uploadSelectionRemove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 26px;
  min-height: 26px;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: var(--muted);
}
.uploadSelectionRemove:hover { color: var(--bad); }
.uploadSelectionActions .fieldHint { margin: 0; }
.primaryBtn {
  border-color: var(--accent);
  background: var(--accent);
  color: white;
  font-weight: 650;
}
.primaryBtn:hover { border-color: #0066d6; background: #006ee6; }
.primaryBtn:disabled { cursor: not-allowed; opacity: .45; }
.noteInput, .uploadField input, .uploadField select, .searchPanel input, .searchPanel select, .filters input, .filters select, .commerceFilters input, .commerceFilters select, .sourceSelectButton, .targetSelectButton {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--control);
  color: var(--ink);
  min-height: 40px;
  padding: 0 12px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.searchPanel select.placeholderSelect,
.filters select.placeholderSelect,
.commerceFilters select.placeholderSelect {
  color: rgba(99, 99, 102, .62);
}
.searchPanel select option,
.filters select option,
.commerceFilters select option {
  color: var(--ink);
}
.noteInput:focus, .uploadField input:focus, .uploadField select:focus, .searchPanel input:focus, .searchPanel select:focus, .filters input:focus, .filters select:focus, .commerceFilters input:focus, .commerceFilters select:focus {
  border-color: rgba(0, 122, 255, .55);
  box-shadow: 0 0 0 4px rgba(0, 122, 255, .12);
}
.noteInput { width: 100%; }
.uploadMeta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
}
.uploadField {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.uploadField span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}
.uploadField input, .uploadField select {
  width: 100%;
  min-width: 0;
}
.sourcePicker {
  display: block;
}
.sourceCombo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  min-width: 0;
}
.sourceInput {
  width: 100%;
  min-width: 0;
  border-radius: 11px 0 0 11px;
}
.sourceSelectButton.sourceComboToggle {
  border-left: 0;
  border-radius: 0 11px 11px 0;
  padding: 0;
  justify-content: center;
}
.sourceSelectButton.sourceComboToggle::after { content: "⌄"; margin-left: 0; }
.sourceSelectCombobox .sourceSelectMenu { right: 0; }
.fieldHint {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.sourceSelect, .targetSelect {
  position: relative;
  min-width: 0;
}
.sourceSelectButton, .targetSelectButton {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  color: var(--muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  appearance: none;
  font: inherit;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.sourceSelectButton:hover, .targetSelectButton:hover {
  border-color: rgba(0, 122, 255, .34);
  background: rgba(255, 255, 255, .96);
}
.sourceSelectButton:focus-visible, .targetSelectButton:focus-visible {
  border-color: rgba(0, 122, 255, .55);
  box-shadow: 0 0 0 4px rgba(0, 122, 255, .12);
}
.sourceSelectButton.hasValue, .targetSelectButton.hasValue {
  color: var(--ink);
}
.sourceSelectButton::after, .targetSelectButton::after {
  content: "⌄";
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 0;
  transform: none;
  flex: 0 0 auto;
  margin-left: 8px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
}
.sourceSelectMenu, .targetSelectMenu {
  position: absolute;
  z-index: 100;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  gap: 2px;
  max-height: 230px;
  overflow: auto;
  padding: 6px;
  border: 1px solid rgba(0, 0, 0, .10);
  border-radius: 13px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .16), 0 3px 10px rgba(0, 0, 0, .06);
  backdrop-filter: blur(22px);
}
.sourceSelectMenu[hidden], .targetSelectMenu[hidden] { display: none; }
.sourceOption, .targetOption {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  width: 100%;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  text-align: left;
  box-sizing: border-box;
  appearance: none;
}
.sourceOption:hover, .targetOption:hover {
  background: rgba(0, 122, 255, .08);
}
.sourceOption span, .targetOption span {
  position: static;
  min-width: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: auto;
}
.sourceOption input, .targetOption input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.sourceSelectMulti .sourceOption::after,
.targetOption::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 6px;
}
.sourceSelectMulti .sourceOption:has(input:checked),
.targetOption:has(input:checked) {
  background: rgba(0, 122, 255, .10);
  color: #0057d9;
}
.sourceSelectMulti .sourceOption:has(input:checked)::after,
.targetOption:has(input:checked)::after {
  content: "✓";
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--accent);
  box-shadow: none;
  font-size: 14px;
  font-weight: 750;
}
.sourceOptionButton {
  grid-template-columns: minmax(0, 1fr);
}
.sourceMenuEmpty {
  padding: 10px;
  color: var(--muted);
  font-size: 12px;
}
.uploadField.full { grid-column: 1 / -1; }

.searchPanel {
  position: relative;
  z-index: 30;
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.searchBar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 190px 96px;
  gap: 8px;
  align-items: center;
}
.searchBar input {
  min-height: 46px;
  border: 1px solid rgba(0, 122, 255, .28);
  border-radius: 13px;
  font-size: 15px;
  background: var(--panel-solid);
}
.imageQueryControl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 0;
}
.imageQueryPicker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 46px;
  padding: 5px 12px 5px 6px;
  border: 1px solid rgba(0, 122, 255, .28);
  border-radius: 13px;
  background: var(--panel-solid);
  cursor: pointer;
  overflow: hidden;
}
.imageQueryPicker:hover {
  border-color: rgba(0, 122, 255, .48);
}
.imageQueryPicker input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.queryImagePreview {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(0, 122, 255, .10), rgba(52, 199, 89, .12));
  background-size: cover;
  background-position: center;
  flex: 0 0 auto;
}
.queryImagePreview::before {
  content: "⌕";
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--accent);
  font-size: 18px;
}
.queryImagePreview.hasImage::before { content: ""; }
.queryImageLabel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 15px;
}
.queryClearBtn {
  min-height: 46px;
  border-radius: 13px;
  padding: 0 12px;
}
.queryLibrary {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  width: 190px;
  height: min(88vh, 860px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .12);
  backdrop-filter: blur(20px);
}
.queryAddBtn {
  width: 100%;
  height: 42px;
  min-height: 42px;
  border-radius: 14px;
  border-color: rgba(0, 122, 255, .28);
  background: rgba(0, 122, 255, .08);
  color: var(--accent);
  font-size: 28px;
  line-height: 1;
  padding: 0 0 3px;
}
.queryLibraryList {
  display: grid;
  gap: 8px;
  overflow-y: auto;
  overflow-x: visible;
  padding-right: 1px;
}
.queryCard {
  position: relative;
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 8px;
  align-items: center;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: rgba(255, 255, 255, .42);
}
.queryCard.active {
  border-color: rgba(0, 122, 255, .38);
  background: rgba(0, 122, 255, .08);
}
.queryThumb {
  position: relative;
  width: 86px;
  height: 92px;
  min-height: 92px;
  padding: 0;
  overflow: hidden;
  border-radius: 13px;
  background: #f2f2f4;
  cursor: zoom-in;
}
.queryThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.queryStatus {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  min-height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  color: var(--muted);
  font-size: 10px;
  display: grid;
  place-items: center;
  backdrop-filter: blur(10px);
}
.queryStatus.done { color: #137a2f; }
.queryStatus.analyzing, .queryStatus.queued { color: #a45f00; }
.queryStatus.error { color: var(--bad); }
.queryInfo {
  display: none;
  position: absolute;
  right: 176px;
  top: 2px;
  width: 292px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  color: var(--ink);
}
.queryCard:hover .queryInfo { display: grid; gap: 4px; }
.queryInfo strong, .queryInfo span, .queryInfo em {
  overflow-wrap: anywhere;
  font-size: 12px;
}
.queryInfo span, .queryInfo em { color: var(--muted); font-style: normal; }
.queryInfo em { color: var(--bad); }
.queryGarmentSummary {
  display: grid;
  gap: 7px;
}
.queryGarmentSummary div {
  display: grid;
  gap: 3px;
  padding: 7px 8px;
  border-radius: 10px;
  background: rgba(0, 122, 255, .07);
}
.queryGarmentSummary strong {
  color: var(--ink);
  font-size: 12px;
}
.queryGarmentSummary span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.queryActions {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.queryActions button {
  width: 100%;
  min-height: 30px;
  border-radius: 10px;
  padding: 0 8px;
  font-size: 12px;
  color: var(--muted);
}
.queryEmpty {
  width: 100%;
  min-height: 72px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 13px;
  padding: 6px;
}
.queryLibraryFileInput { display: none; }
.searchBar select {
  min-height: 46px;
  border-color: var(--line);
  border-radius: 13px;
  background: var(--panel-solid);
}
.searchBtn {
  min-height: 46px;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  border-radius: 13px;
}
.quickFilters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.garmentFilterBuilder {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .68);
}
.garmentFilterHead,
.garmentFilterActions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.garmentFilterHead { justify-content: space-between; }
.garmentFilterHead strong { font-size: 13px; }
.garmentFilterActions { flex-wrap: wrap; justify-content: flex-end; }
.garmentFilterActions select,
.garmentFilterActions button { min-height: 34px; }
.checkLabel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.checkLabel input { width: 15px; min-height: 15px; }
.garmentGroups { display: grid; gap: 7px; }
.garmentGroup {
  display: grid;
  grid-template-columns: 28px repeat(6, minmax(0, 1fr)) 36px;
  gap: 7px;
  align-items: center;
}
.garmentGroup > input,
.garmentGroup > select { min-width: 0; width: 100%; min-height: 38px; }
.garmentGroupIndex {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #1f7a45;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  grid-row: 1 / span 2;
}
.garmentGroup .removeGarmentGroup { grid-column: -2 / -1; grid-row: 1 / span 2; }
.removeGarmentGroup {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  font-size: 19px;
  line-height: 1;
}
.removeGarmentGroup:disabled { opacity: .25; }
.commerceFilters {
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) repeat(7, minmax(116px, 1fr));
  gap: 10px;
  align-items: stretch;
}
.commerceFilters > label {
  position: relative;
  display: grid;
  min-width: 0;
}
.commerceFilters > label > span {
  position: absolute;
  left: 12px;
  top: 5px;
  z-index: 1;
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
}
.commerceFilters > label > input {
  width: 100%;
  min-width: 0;
  padding-top: 14px;
}
.advancedFilters {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.62);
  overflow: hidden;
}
.advancedFilters summary {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  cursor: pointer;
  color: var(--muted);
}
.advancedFilters[open] summary {
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: 10px;
  align-items: center;
  padding: 12px;
}
.filters label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  color: var(--muted);
}
.filters label input { min-width: 0; width: 100%; }

.stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; min-height: 32px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--muted);
}
.pill button { border: 0; padding: 0; min-height: 0; background: transparent; color: var(--accent); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
  gap: 14px;
}
.card {
  content-visibility: auto;
  contain-intrinsic-size: 420px;
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.card:hover {
  border-color: rgba(0, 122, 255, .26);
  box-shadow: 0 12px 28px rgb(0 0 0 / 10%);
  transform: translateY(-1px);
}
.thumbWrap { position: relative; aspect-ratio: 3 / 4; background: #eceef2; overflow: hidden; }
.thumbWrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sameStyleStrip {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 0 10px 8px;
}
.sameStyleStrip a {
  display: block;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f2f2f7;
}
.sameStyleStrip a:hover { border-color: rgba(0, 122, 255, .5); }
.sameStyleStrip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sameStyleCount, .sameStyleMore {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.sameStyleCount { margin-right: 2px; font-weight: 650; }
.sameStyleGallery { margin-top: 14px; }
.sameStyleGalleryHead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.sameStyleGalleryHead span { color: var(--muted); font-size: 12px; }
.sameStyleGalleryGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
}
.sameStyleGalleryGrid a {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  text-decoration: none;
}
.sameStyleGalleryGrid img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f2f2f7;
}
.sameStyleGalleryGrid span {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sameStyleEmpty { color: var(--muted); font-size: 12px; }
.cardBody { padding: 10px; display: grid; gap: 9px; }
.garmentLine {
  min-height: 18px;
  color: var(--muted);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.detailText {
  border: 0;
  background: transparent;
  color: var(--ink);
  min-height: 0;
  padding: 0;
  text-align: left;
  font-weight: 650;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
}
.detailText:hover {
  color: var(--accent);
  background: transparent;
}
.cardExtraMeta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.cardExtraMeta div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .72);
  padding: 6px 7px;
}
.cardExtraMeta span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}
.cardExtraMeta strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.thumbWrap[data-product-link] { cursor: pointer; }
.thumbWrap[data-product-link]::after {
  content: "打开商品";
  position: absolute;
  left: 8px;
  bottom: 8px;
  border-radius: 999px;
  background: rgb(0 0 0 / 62%);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  padding: 6px 8px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
}
.thumbWrap[data-product-link]:hover::after { opacity: 1; transform: translateY(0); }
.resultTools {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 14px;
  backdrop-filter: blur(18px);
}
.activeFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 32px;
  align-items: center;
}
.filterHint {
  color: var(--muted);
  opacity: .72;
}
.filterChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border-radius: 999px;
  border-color: rgba(0, 122, 255, .20);
  background: rgba(0, 122, 255, .08);
  color: #0057d9;
  max-width: 260px;
}
.filterChip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filterChip b {
  font-size: 14px;
}
.resultActions {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.resultCount {
  color: var(--muted);
}
.clearFiltersBtn {
  min-height: 32px;
  color: var(--muted);
}
.swatches { display: flex; flex-wrap: wrap; gap: 5px; min-height: 22px; align-items: center; }
.swatch {
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  border: 1px solid rgb(0 0 0 / 18%);
  border-radius: 50%;
  background: var(--sw);
  display: inline-block;
}
.meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.score { border: 1px solid var(--line); border-radius: 10px; padding: 6px; background: rgba(255,255,255,.72); }
.score span { display: block; color: var(--muted); font-size: 12px; }
.score strong { font-size: 16px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  border: 0;
  background: rgba(0, 0, 0, .05);
  color: #3a3a3c;
  border-radius: 999px;
  min-height: 24px;
  padding: 3px 8px;
  font-size: 12px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.filterText { border: 0; background: transparent; color: var(--ink); min-height: 0; padding: 0; text-align: left; cursor: pointer; }
.status { color: var(--accent-2); }
.error { color: var(--bad); overflow-wrap: anywhere; }
.taskTabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.taskTabs button {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255,255,255,.62);
  border-radius: 11px;
}
.taskTabs button.active {
  border-color: rgba(0, 122, 255, .34);
  background: rgba(0, 122, 255, .10);
  color: #0057d9;
  font-weight: 650;
}
.taskTabs span {
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #e8ece9;
  color: var(--muted);
  font-size: 12px;
  padding: 0 6px;
}
.taskTabs button.active span {
  background: var(--accent);
  color: white;
}
.taskViewMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 2px 10px;
}
.taskViewMeta > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.taskViewMeta strong { font-size: 14px; }
.taskViewMeta span { color: var(--muted); font-size: 12px; }
.taskList { display: grid; gap: 10px; min-height: 44px; }
.taskItem {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  padding: 10px;
}
.taskItem img, .taskThumb {
  width: 64px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  background: #ecece6;
  border: 1px solid var(--line);
}
.taskThumb { display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.taskBody { display: grid; gap: 7px; min-width: 0; }
.taskTop { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.taskTop strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.taskBadge { border-radius: 999px; padding: 2px 8px; font-size: 12px; background: rgba(0, 0, 0, .05); color: #3a3a3c; white-space: nowrap; }
.taskBadge.analyzing, .taskBadge.uploading { background: rgba(255, 149, 0, .12); color: #a45f00; }
.taskBadge.error { background: rgba(255, 59, 48, .10); color: var(--bad); }
.taskBadge.canceled { background: #f2f2ee; color: var(--muted); }
.taskBadge.done { background: rgba(48, 209, 88, .14); color: #137a2f; }
.taskPath, .taskMeta, .taskSource, .sourceNote {
  color: var(--muted);
  font-size: 12px;
}
.taskPath, .sourceNote {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.taskMetaWrap {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.taskMetaWrap a { color: var(--accent-2); word-break: break-all; }
.sourceNote { margin-top: 6px; }
.taskBar { height: 7px; background: rgba(0,0,0,.08); border-radius: 999px; overflow: hidden; }
.taskBar i { display: block; height: 100%; background: var(--accent); }
.taskBar.moving i { animation: taskPulse 1.4s ease-in-out infinite; }
.taskActions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.taskCancel { min-height: 32px; color: var(--bad); border-color: rgba(255, 59, 48, .26); background: rgba(255, 59, 48, .06); }
.emptyState { border: 1px dashed var(--line); border-radius: 14px; padding: 14px; color: var(--muted); text-align: center; }
.grid > .emptyState {
  grid-column: 1 / -1;
}
.browseIdleState {
  min-height: 160px;
  display: grid;
  place-items: center;
  background: transparent;
}
.loadingState {
  min-height: 160px;
  display: grid;
  place-items: center;
  background: var(--panel);
}
.searchBtn:disabled {
  cursor: wait;
  opacity: .72;
}
.archiveBtn {
  border-color: rgba(0, 122, 255, .20);
  color: #0057d9;
  background: rgba(0, 122, 255, .06);
}
.cardArchive {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  min-height: 30px;
  padding: 0 9px;
  box-shadow: 0 1px 5px rgb(0 0 0 / 14%);
}
.detailActions { display: flex; gap: 8px; flex-wrap: wrap; }
.garmentDetails { display: grid; gap: 10px; margin: 12px 0; }
.garmentDetail { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: rgba(255,255,255,.72); }
.garmentHead { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.garmentHead strong { overflow-wrap: anywhere; }
.garmentHead span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.colorDist { display: grid; gap: 7px; }
.colorRow {
  display: grid;
  grid-template-columns: 22px minmax(80px, 1fr) auto minmax(90px, 140px);
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.colorName { overflow-wrap: anywhere; }
.colorMeta { color: var(--muted); font-size: 12px; white-space: nowrap; }
.colorBar { height: 8px; border-radius: 999px; background: rgba(0,0,0,.08); overflow: hidden; }
.colorBar i { display: block; height: 100%; background: var(--accent); }
.garmentAttrs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}
.garmentAttrs div {
  min-width: 0;
  padding: 7px 9px;
  border-radius: 10px;
  background: rgba(0,0,0,.035);
}
.garmentAttrs span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}
.garmentAttrs strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 650;
}
.matchLine {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
}
.matchLine strong { color: #1f7a45; font-size: 11px; font-weight: 650; }

dialog {
  width: min(980px, calc(100vw - 32px));
  max-height: 90vh;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0;
}
dialog::backdrop { background: rgb(0 0 0 / 35%); }
.closeBtn { position: sticky; top: 8px; float: right; margin: 8px; z-index: 2; font-size: 22px; width: 38px; }
.detailInner { padding: 18px; display: grid; grid-template-columns: minmax(320px, 46vw) minmax(320px, 1fr); gap: 18px; }
.detailInner img { width: 100%; border-radius: 12px; border: 1px solid var(--line); }
.detailOriginalImage {
  max-height: 78vh;
  object-fit: contain;
  background: #f5f5f7;
}
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: rgba(0,0,0,.04); padding: 12px; border-radius: 12px; }
.rawJsonBlock {
  margin-top: 12px;
}
.rawJsonBlock summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
}

@keyframes taskPulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

@media (max-width: 900px) {
  .appShell, .sideNav + .appShell { margin-left: auto; margin-right: auto; width: min(100vw - 20px, 1440px); }
  .uploadBand, .detailInner { grid-template-columns: 1fr; }
  .uploadMeta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .searchBar { grid-template-columns: 1fr; }
  .searchBar input, .searchBar select, .searchBtn {
    border: 1px solid var(--line);
    border-radius: 6px;
  }
  .searchBtn {
    border-color: var(--accent);
  }
  .quickFilters { grid-template-columns: 1fr 1fr; }
  .garmentGroup { grid-template-columns: 28px repeat(3, minmax(0, 1fr)) 36px; }
  .garmentGroupIndex, .garmentGroup .removeGarmentGroup { grid-row: 1 / span 4; }
  .garmentGroup > input[data-group-field="coverage"],
  .garmentGroup > input[data-group-field="confidence"],
  .garmentGroup > input[data-group-field="pattern"],
  .garmentGroup > input[data-group-field="material"] { grid-column: span 1; }
  .garmentGroup > select[data-group-field="fit"],
  .garmentGroup > select[data-group-field="collar"],
  .garmentGroup > select[data-group-field="sleeve_shape"],
  .garmentGroup > select[data-group-field="detail"] { grid-column: span 1; }
  .commerceFilters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters { grid-template-columns: 1fr 1fr; }
  .resultTools {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .sideNav {
    left: -42px;
    top: 50%;
    width: 50px;
    height: max-content;
    border-right: 1px solid var(--line);
    border-top: 1px solid var(--line);
    padding: 8px 8px 8px 0;
  }
  .sideNav:hover, .sideNav:focus-within { left: 0; }
  .navLinks { grid-template-columns: 1fr; width: 42px; }
  .navLinks a { width: 42px; min-height: 40px; }
  .appShell, .sideNav + .appShell {
    margin-left: auto;
    width: min(100vw - 20px, 1440px);
    padding: 14px 0 40px;
  }
  .shell { width: min(100vw - 20px, 1440px); padding-top: 14px; }
  .topbar {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    align-items: flex-start;
    margin-bottom: 10px;
  }
  .quickFilters { grid-template-columns: 1fr; }
  .garmentFilterHead { align-items: flex-start; flex-direction: column; }
  .garmentFilterActions { justify-content: flex-start; }
  .garmentGroup { grid-template-columns: 28px 1fr 1fr 36px; }
  .garmentGroupIndex, .garmentGroup .removeGarmentGroup { grid-row: 1 / span 6; }
  .garmentGroup > select[data-group-field="color"],
  .garmentGroup > input[data-group-field="coverage"],
  .garmentGroup > input[data-group-field="confidence"],
  .garmentGroup > input[data-group-field="pattern"],
  .garmentGroup > input[data-group-field="material"] { grid-column: span 1; }
  .garmentGroup > input[data-group-field="pattern"],
  .garmentGroup > input[data-group-field="material"] { grid-column: 2 / -1; }
  .commerceFilters { grid-template-columns: 1fr; }
  .filters { grid-template-columns: 1fr; }
  .uploadMeta { grid-template-columns: 1fr; }
  .taskTabs { grid-template-columns: 1fr 1fr; }
  .grid { grid-template-columns: 1fr; }
  .taskItem { grid-template-columns: 52px minmax(0, 1fr); }
  .taskItem img, .taskThumb { width: 52px; height: 42px; }
  .taskActions { grid-column: 2; justify-self: start; }
  .colorRow { grid-template-columns: 22px minmax(80px, 1fr) auto; }
  .colorBar { grid-column: 2 / -1; }
}