:root {
  color-scheme: light;
  --bg: #f4f5f2;
  --surface: #ffffff;
  --surface-2: #eef1ea;
  --line: #d9ded4;
  --text: #20241f;
  --muted: #68705f;
  --green: #22764a;
  --green-dark: #185a37;
  --amber: #a75f00;
  --red: #b3372d;
  --blue: #2d5f8a;
  --shadow: 0 10px 28px rgba(32, 36, 31, .09);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif;
}

.topbar {
  min-height: 72px;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #1e2a21;
  color: white;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 8px;
  display: grid; place-items: center;
  background: #d8f25b; color: #172b1a; font-weight: 800;
}
.brand h1 { margin: 0; font-size: 18px; letter-spacing: 0; }
.brand p { margin: 2px 0 0; font-size: 12px; color: #c9d5c5; }
.top-actions { display: flex; gap: 8px; }
.auth-user-name { align-self: center; max-width: 180px; overflow: hidden; color: rgba(255,255,255,.86); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

.main-nav {
  display: flex;
  flex-direction: column;
  padding: 12px 24px 0;
  background: var(--bg);
  position: sticky; top: 0; z-index: 4;
  border-bottom: 1px solid var(--line);
}
.tabs {
  display: flex;
  gap: 4px;
}
.tab-group {
  align-self: center;
  margin-left: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(217, 242, 91, 0.14);
  color: #d9f25b;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.tab {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px;
  border: 1px solid transparent; border-bottom: 0;
  background: transparent; color: var(--muted); cursor: pointer;
}
.tab.active {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
  box-shadow: 0 -4px 0 #1e2a21 inset;
}
.tab svg { width: 16px; height: 16px; }
.sub-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  padding: 0 4px;
  min-height: 40px;
  border-top: 1px solid var(--line);
}
.sub-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 8px 8px 0 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}
.sub-tab:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.sub-tab.active {
  color: var(--text);
  background: var(--surface-2);
  box-shadow: inset 0 -3px 0 #d9f25b;
}
.sub-tab svg { width: 15px; height: 15px; }

main { padding: 20px 24px 48px; max-width: 1520px; }
.panel { display: none; }
.panel.active { display: block; }
.panel > * + * { margin-top: 16px; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 12px;
}
.metric {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  padding: 16px;
}
.metric.clickable { cursor: pointer; }
.metric.clickable:hover { border-color: var(--green); }
.metric span { color: var(--muted); display: block; font-size: 12px; }
.metric strong { display: block; margin-top: 4px; font-size: 26px; }

.split { display: grid; grid-template-columns: 1.3fr .9fr; gap: 16px; }
.dashboard { background: var(--surface-2); }
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: 12px;
}
.metric-group {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.metric-group h3 { margin: 0 0 10px; font-size: 14px; }
.metric-list { display: grid; gap: 8px; }
.metric-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 24px;
}
.metric-list span { color: var(--muted); font-size: 12px; }
.metric-list strong { font-size: 18px; }
.dashboard-grid + * { margin-top: 16px; }
.tool, .metric {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.tool { padding: 16px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.section-head h2 {
  margin: 0 0 12px; font-size: 15px;
  display: flex; align-items: center; gap: 8px;
}
.section-head h2 svg { width: 16px; height: 16px; color: var(--green); }

textarea, input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: var(--text);
  padding: 9px 10px;
  font: inherit;
}
textarea { min-height: 140px; resize: vertical; }
textarea.selected-text { min-height: 92px; }
select {
  min-width: 180px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
}
select { width: auto; flex: 1; }
.hint { color: var(--muted); font-size: 12px; }
textarea:focus, input:focus { outline: 2px solid rgba(34,118,74,.2); border-color: var(--green); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.row input[type="checkbox"] { width: auto; }
.steps { margin: 0; padding-left: 20px; color: var(--muted); }
.steps li + li { margin-top: 6px; }
.status { margin-top: 10px; font-size: 12px; color: var(--muted); }
.empty { color: var(--muted); }
#shops > .tool { margin-bottom: 16px; }

button, .button {
  min-height: 34px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-decoration: none;
}
button.primary { background: var(--green); border-color: var(--green); color: white; }
button.primary:hover { background: var(--green-dark); }
button:hover, .button:hover { border-color: #adb7a4; }
button:disabled { opacity: .55; cursor: not-allowed; }
button svg { width: 16px; height: 16px; }
.icon-btn { width: 34px; padding: 0; color: white; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); }
.icon-btn:hover { background: rgba(255,255,255,.2); }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.toolbar input { max-width: 280px; }
.selection-tools { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.date-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.date-filter label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}
.date-filter input[type="date"] {
  width: 145px;
  min-height: 34px;
  padding: 6px 8px;
}
.shop-context {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); flex-wrap: wrap;
}
.shop-context[hidden] { display: none; }
.shop-context-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.shop-context h2 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.shop-context a { color: var(--blue); font-size: 13px; text-decoration: none; overflow-wrap: anywhere; }
#productTable.shop-mode .shop-column { display: none; }
.shop-product-import[hidden] { display: none; }
.shop-product-import .section-head button { margin-bottom: 12px; }
.product-import-mode { margin: 10px 0; }
.batch-view {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}
.batch-view .section-head { align-items: center; }
.batch-view h2 { margin-bottom: 10px; }
.product-scope-filter { margin-bottom: 10px; }
#manualProductImport[hidden], #csvProductImport[hidden] { display: none; }
#manualProductImport .hint, #csvProductImport .hint { display: block; margin-top: 8px; }
.filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-group label { color: var(--muted); font-size: 12px; }
.filter-group input { width: 104px; }
.range-separator { color: var(--muted); font-size: 12px; }
#productFilterCount { white-space: nowrap; }
#productColumnPanel { margin-top: 10px; }
.column-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  max-height: 320px;
  margin-top: 12px;
  overflow: auto;
  padding-right: 4px;
}
.column-option {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  cursor: pointer;
}
.column-option input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--green); flex: 0 0 auto; }
.column-option span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.column-option em { color: var(--muted); font-size: 11px; font-style: normal; flex: 0 0 auto; }
#productHome[hidden],
#bulkShopProductImport[hidden],
#productToolbar[hidden],
#productFilterPanel[hidden],
#productColumnPanel[hidden],
#productTableWrap[hidden] { display: none; }
#productHome .section-head { justify-content: space-between; }
#productHome .section-actions { display: inline-flex; align-items: center; gap: 10px; }
#bulkShopProductImport { margin-bottom: 14px; }
#bulkShopProductImport .hint { display: block; margin: 8px 0 10px; }
#importBulkShopProducts { display: inline-flex; }
#productHome .card-grid { margin-top: 12px; }
#productHomeEmpty { margin-top: 12px; }
.empty { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}
.pagination[hidden] { display: none; }
.pagination-total { white-space: nowrap; }
.pagination-size {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.pagination-size select {
  min-width: 76px;
  min-height: 30px;
  padding: 4px 7px;
  font-size: 12px;
}
.pagination-actions { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pagination-actions button {
  width: 30px;
  min-height: 30px;
  padding: 0;
}
.pagination-actions button svg { width: 14px; height: 14px; }
.pagination-page {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.pagination-page input {
  width: 68px;
  min-height: 30px;
  padding: 4px 7px;
  font-size: 12px;
  text-align: right;
}
.button.secondary, button.secondary { background: var(--surface-2); color: var(--text); }
button.danger { color: var(--red); border-color: #e9c4bf; }
button.danger:hover { background: #fdebe9; border-color: var(--red); }
.segmented { display: inline-flex; padding: 3px; background: #e3e7dd; border-radius: 7px; gap: 2px; }
.segmented button {
  border: 0; background: transparent; min-height: 30px; border-radius: 5px; color: var(--muted);
}
.segmented button.active { background: white; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.segmented.compact button { min-height: 28px; padding: 0 10px; font-size: 12px; }
.segmented.muted-filter { opacity: .58; }
.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(32,36,31,.1);
  font-size: 11px;
  font-weight: 700;
}
.segmented button.active .filter-count { background: rgba(34,118,74,.16); color: var(--green-dark); }

.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { padding: 11px 12px; text-align: left; border-bottom: 1px solid #e8ebe2; vertical-align: middle; }
th { position: sticky; top: 0; background: #f7f8f4; font-size: 12px; color: var(--muted); z-index: 2; }
tbody tr:last-child td { border-bottom: 0; }
td a { color: var(--blue); text-decoration: none; }
td.select-cell { width: 44px; }
td.select-cell input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--green); cursor: pointer; }
td.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.csv-column { min-width: 130px; max-width: 280px; overflow-wrap: anywhere; }
th.csv-column { max-width: none; }
#productTable .product-data-column { min-width: 150px; max-width: 300px; overflow-wrap: anywhere; }
#productTable .product-link { min-width: 260px; max-width: 420px; }
#productTable .index-cell { width: 58px; }
#productTable .action-cell { width: 86px; }
.product-shop-processing-filter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  width: 100%;
  padding: 4px;
  border-radius: 8px;
  background: #e2e6dc;
}
.product-shop-processing-filter button {
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  white-space: nowrap;
}
.product-filter-panel {
  display: grid;
  gap: 12px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(151, 160, 143, .38);
  border-radius: 8px;
  background: rgba(255, 255, 255, .82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}
.product-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.product-filter-head strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
}
.product-filter-head strong svg { width: 15px; height: 15px; color: var(--green-dark); }
.product-filter-head .hint { margin: 0; }
.product-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.product-filter-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}
.product-filter-field > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.product-filter-field input,
.product-filter-field select {
  width: 100%;
  min-height: 32px;
  padding: 5px 8px;
  font-size: 12px;
  background: white;
}
.product-filter-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 2px;
  border-top: 1px solid rgba(151, 160, 143, .22);
}
.column-filter.range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 5px;
}
.column-filter.range span { color: var(--muted); font-size: 11px; }
#productTableWrap {
  max-height: min(72vh, 760px);
  border-radius: 10px;
  border-color: rgba(151, 160, 143, .44);
  box-shadow: 0 8px 24px rgba(32, 36, 31, .06);
}
#productTable { min-width: 1280px; font-size: 13px; }
#productTable th.numeric,
#productTable td.numeric {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

#productTable th {
  background: #f8faf5;
  color: #4b5347;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 #e5e9df;
}
#productTable td { font-size: 13px; }
#productTable tbody tr:nth-child(even) { background: #fbfcfa; }
#productTable tbody tr:hover { background: #f4f9f1; }
#productTable .product-data-column { min-width: 150px; max-width: 320px; overflow-wrap: anywhere; }
#productTable .product-link { min-width: 280px; max-width: 440px; }
#productTable .product-link a {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
#productTable .index-cell { width: 58px; }
#productTable .select-cell { width: 46px; text-align: center; }
#productTable .action-cell { width: 86px; }
#productTable .action-cell button {
  min-height: 28px;
  padding: 0 9px;
  font-size: 12px;
  white-space: nowrap;
}
.local-image-link { display: inline-block; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.product-preview-panel { margin-top: 0; }
.product-preview-panel > .section-head { margin-bottom: 8px; }
.product-preview-panel > .hint { display: block; margin: 0 0 12px; }
.product-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.product-preview-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}
.product-preview-card.is-seed { border-color: rgba(34,118,74,.55); }
.product-preview-frame {
  aspect-ratio: 1;
  display: block;
  background: #e8ebe2;
}
.product-preview-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-preview-body {
  min-height: 102px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.product-preview-body strong,
.product-preview-body span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-preview-body strong { font-size: 12px; }
.product-preview-body span { color: var(--muted); font-size: 11px; }
.product-preview-actions { margin-top: auto; }
.product-preview-actions button { width: 100%; min-height: 30px; font-size: 12px; }
.main-image-filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.main-image-filter-group {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(151,160,143,.28);
  border-radius: 9px;
  background: rgba(255,255,255,.72);
  display: grid;
  gap: 8px;
  align-content: start;
}
.main-image-filter-group > span {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}
.main-image-filter-group small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.main-image-action-bar {
  margin: 0 0 10px;
  padding: 10px;
  border: 1px solid rgba(151,160,143,.28);
  border-radius: 9px;
  background: rgba(255,255,255,.72);
}
.product-preview-card {
  position: relative;
  box-shadow: 0 4px 14px rgba(32,36,31,.04);
}
.product-preview-card.is-selected {
  border-color: rgba(34,118,74,.82);
  box-shadow: 0 0 0 2px rgba(34,118,74,.16), 0 8px 22px rgba(32,36,31,.08);
}
.product-preview-frame {
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  overflow: hidden;
}
.product-preview-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(34,118,74,0);
  transition: background .15s ease;
}
.product-preview-card.is-selected .product-preview-frame::after {
  background: rgba(34,118,74,.08);
}
.product-preview-check {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 1;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #3f5849;
  font-size: 15px;
  font-weight: 900;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(34,118,74,.28);
  box-shadow: 0 3px 10px rgba(32,36,31,.12);
}
.product-preview-card.is-selected .product-preview-check {
  color: white;
  background: #22764a;
  border-color: #22764a;
  box-shadow: 0 3px 10px rgba(32,36,31,.2);
}
.product-preview-body > a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}
.product-preview-body > a:hover { text-decoration: underline; }
.product-preview-tags {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.product-preview-tags .tag { height: 21px; padding: 0 6px; font-size: 11px; }
.product-preview-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 5px;
  align-items: center;
}
.product-preview-actions .tag {
  width: 100%;
  justify-content: center;
  min-height: 30px;
}
@media (max-width: 620px) {
  .product-preview-actions { grid-template-columns: 1fr; }
  .main-image-action-bar .selection-tools { align-items: stretch; flex-direction: column; }
}
.muted { color: var(--muted); }
.shop-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.shop-select input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--green); }
td.actions { display: flex; gap: 6px; white-space: nowrap; }
.tag {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 8px; border-radius: 5px;
  background: var(--surface-2); color: var(--muted); font-size: 12px;
}
.tag.approved { color: var(--green); background: #e6f4eb; }
.tag.candidate { color: var(--amber); background: #fff2df; }
.tag.exported { color: #4b5563; background: #e5e7eb; }
.tag.rejected { color: var(--red); background: #fdebe9; }
.tag.fetched, .tag.shop_linked { color: var(--green); background: #e6f4eb; }
.tag.pending_shop { color: var(--amber); background: #fff2df; }
.tag.blocked { color: var(--red); background: #fdebe9; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.shop-card {
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); padding: 14px;
}
.shop-card h3 { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.shop-card .meta { color: var(--muted); margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.shop-card h3 a { color: var(--text); text-decoration: none; }
.shop-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.shop-actions .approve { color: white; background: var(--green); border-color: var(--green); }
.shop-actions .reject { color: var(--red); border-color: #e9c4bf; }
.review-note { margin-top: 8px; }

.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.image-card {
  border: 1px solid var(--line); background: var(--surface); border-radius: 8px; overflow: hidden;
}
.image-frame { aspect-ratio: 1; background: #e8ebe2; display: grid; place-items: center; }
.image-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-body { padding: 8px; font-size: 12px; }
.image-body strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-body span { color: var(--muted); }

.design-upload-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(130px, .7fr)) auto;
  gap: 10px;
  align-items: end;
}
.design-upload-grid input[type="file"] {
  min-height: 34px;
  padding: 6px;
}
.design-option {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 8px;
  color: var(--muted);
  font-size: 12px;
}
.design-option input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  padding: 0;
  accent-color: var(--green);
}
.design-element-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 12px;
}
.design-element-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}
.design-select {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.design-select input {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  accent-color: var(--green);
  cursor: pointer;
}
.design-image-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.design-image-frame {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #e8ebe2;
  display: grid;
  place-items: center;
}
.design-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.design-image-frame.checker {
  background:
    linear-gradient(45deg, rgba(32,36,31,.07) 25%, transparent 25%, transparent 75%, rgba(32,36,31,.07) 75%),
    linear-gradient(45deg, rgba(32,36,31,.07) 25%, transparent 25%, transparent 75%, rgba(32,36,31,.07) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
}
.design-image-frame > span:last-child {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,.92);
  color: var(--muted);
  font-size: 11px;
}
.design-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}
.design-error {
  margin: 8px 0 0;
  color: var(--red);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.design-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.design-actions > * {
  min-height: 31px;
  padding: 0 9px;
  font-size: 12px;
}
.design-actions svg { width: 14px; height: 14px; }
.design-element-card > .hint { margin: 8px 0 0; }
.design-editor-stage {
  display: grid;
  place-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f8f4;
  overflow: auto;
}
.design-editor-canvas {
  position: relative;
  display: inline-block;
  max-width: 100%;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}
.design-editor-canvas img {
  display: block;
  max-width: 100%;
  max-height: 65vh;
  pointer-events: none;
}
.design-selection-box {
  position: absolute;
  border: 2px solid var(--green);
  background: rgba(34,118,74,.16);
  box-shadow: 0 0 0 9999px rgba(32,36,31,.08);
  pointer-events: none;
}
.design-editor-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 20;
  max-width: 360px; padding: 11px 14px;
  border-radius: 7px; background: #20241f; color: white;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: .2s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--red); }

@media (max-width: 900px) {
  .topbar, .tabs, main { padding-left: 14px; padding-right: 14px; }
  .brand p { display: none; }
  .split, .metric-grid { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .tabs { overflow-x: auto; }
  .toolbar { align-items: stretch; }
  .toolbar input, .toolbar button { width: 100%; }
  .design-upload-grid,
  .design-element-grid { grid-template-columns: 1fr; }
  .design-upload-grid > .primary { width: 100%; }
  .design-editor-controls > .hint,
  .design-editor-controls > button { width: 100%; }
}

/* POD design module version chain */
.pod-asset-card .pod-version-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 168px;
  overflow: auto;
  padding: 2px;
}

.pod-processing-source-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 9px;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  background: #f0fdf4;
}

.pod-processing-source-head strong {
  font-size: 12px;
}

.pod-processing-source-head span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pod-version-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 8px;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.pod-version-row.selected {
  border-color: #86efac;
  background: #f0fdf4;
  box-shadow: 0 0 0 3px rgb(34 197 94 / 10%);
}

.pod-version-main {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 7px;
  min-width: 0;
  padding: 4px 5px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  text-align: left;
}

.pod-version-main:hover {
  background: rgb(37 99 235 / 7%);
}

.pod-version-main > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pod-version-main > span:nth-child(3) {
  color: #64748b;
}

.pod-version-state {
  grid-column: 1 / -1;
  color: #15803d;
  font-size: 11px;
  font-weight: 700;
}

.pod-version-row:not(.selected) .pod-version-state {
  color: #64748b;
  font-weight: 500;
}

.pod-version-preview {
  display: inline-flex;
  align-items: center;
  padding: 5px 7px;
  border-radius: 6px;
  background: var(--surface);
  color: #334155;
  font-size: 11px;
  text-decoration: none;
}

.pod-version-preview:hover {
  background: #e2e8f0;
  color: #0f172a;
}

@media (max-width: 620px) {
  .pod-version-main {
    grid-template-columns: 1fr;
  }
}

/* Material center */
.stage-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.stage-card {
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.66);
}

.stage-card strong,
.stage-card span {
  display: block;
}

.stage-card span {
  color: #64748b;
  font-size: 12px;
}

.material-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  align-items: end;
  margin: 12px 0;
}

.material-controls .primary,
.material-controls .secondary {
  min-height: 36px;
}

[data-pod-module-panel="ai-image"] .design-option input:not([type="range"]),
[data-pod-module-panel="ai-image"] .design-option select,
[data-pod-module-panel="image-download"] .design-option.full textarea {
  grid-column: 1 / -1;
  width: 100%;
}
[data-pod-module-panel="ai-image"] .design-option.full {
  display: grid;
  gap: 6px;
}
[data-pod-module-panel="ai-image"] textarea,
[data-pod-module-panel="image-download"] textarea {
  width: 100%;
}
.material-controls input[type="file"] {
  grid-column: 1 / -1;
}

.inline-field {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.pod-download-results {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.66);
}
.pod-download-results-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
.pod-download-results-head span { color: var(--muted); }
.pod-download-list {
  display: grid;
  max-height: 260px;
  overflow: auto;
  gap: 6px;
}
.pod-download-row {
  display: grid;
  grid-template-columns: 72px 82px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 12px;
}
.pod-download-row code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pod-download-row small {
  grid-column: 1 / -1;
  color: #b42318;
}

.pod-result-report {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}
.pod-result-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}
.pod-result-report-head span { color: var(--muted); }
.pod-result-list {
  display: grid;
  max-height: 340px;
  overflow: auto;
  gap: 8px;
}
.pod-result-row {
  display: grid;
  grid-template-columns: 58px minmax(140px, 0.8fr) minmax(0, 2fr);
  gap: 8px;
  align-items: start;
  padding: 7px;
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 12px;
}
.pod-result-row img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 4px;
  background: white;
}
.pod-result-main { display: grid; gap: 4px; min-width: 0; }
.pod-result-main strong { overflow-wrap: anywhere; }
.pod-result-tags,
.pod-result-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pod-result-tags li,
.pod-result-reasons li {
  padding: 2px 5px;
  border-radius: 4px;
  background: #eef2f6;
  color: var(--muted);
}
.pod-result-reasons li.high { color: #b42318; background: #fdebe9; }
.pod-result-reasons li.medium { color: #92400e; background: #fef0c7; }
.pod-result-side { display: grid; gap: 5px; align-content: start; min-width: 0; }
.pod-result-side code {
  overflow-wrap: anywhere;
  color: var(--muted);
}
.pod-metadata-block {
  display: grid;
  gap: 5px;
  padding: 7px;
  border-radius: 6px;
  background: #f8fafc;
  font-size: 12px;
}
.pod-metadata-block strong { overflow-wrap: anywhere; }
.pod-metadata-block .hint { margin: 0; }
@media (max-width: 900px) {
  .pod-result-row { grid-template-columns: 1fr; }
  .pod-result-row img { width: 100%; height: 120px; }
}

/* POD module registry navigation */
.pod-module-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.pod-module-header h2 { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.pod-module-header h2 svg { width: 20px; height: 20px; color: var(--green); }
.pod-module-header p { margin: 5px 0 0; color: var(--muted); }
.pod-module-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.pod-module-tabs button {
  display: grid;
  gap: 2px;
  min-width: 118px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  width: 100%;
  white-space: normal;
}
.pod-module-tabs button span { color: inherit; font-weight: 650; }
.pod-module-tabs button small { font-size: 11px; }
.pod-module-tabs button:hover { background: var(--surface-2); color: var(--text); }
.pod-module-tabs button.active {
  border-color: #b9cfa8;
  background: #eef6e5;
  color: var(--green-dark);
}
.pod-module-workspace > .tool { margin-top: 0; }
@media (max-width: 900px) {
  .pod-module-header { flex-direction: column; }
  .pod-module-tabs { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

/* POD print library */
.pod-library-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}
.pod-library-summary strong { color: var(--green-dark); }
.pod-library-summary span { color: var(--muted); font-size: 12px; }
.pod-library-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.pod-select-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 650;
}
.pod-library-batch-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.pod-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: stretch;
  gap: 14px;
}
.pod-library-grid > .hint { grid-column: 1 / -1; margin: 0; }
.pod-library-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(32, 36, 31, .04);
}
.pod-library-card:hover {
  border-color: #b9cfa8;
  box-shadow: 0 10px 26px rgba(32, 36, 31, .08);
}

/* All previews occupy exactly the same square; contain preserves the full print. */
.pod-library-preview {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}
.pod-library-preview .design-image-frame {
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.pod-library-preview .design-image-frame img {
  width: 100%;
  height: 100%;
  padding: 10px;
  object-fit: contain;
}
.pod-card-select {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid rgb(255 255 255 / 68%);
  border-radius: 6px;
  background: rgb(16 24 40 / 64%);
  color: white;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  backdrop-filter: blur(2px);
}
.pod-card-select:has(input:checked) {
  border-color: #bbf7d0;
  background: rgb(22 119 59 / 88%);
}
.pod-card-select input { accent-color: #86efac; }
.pod-library-dimension {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgb(16 24 40 / 64%);
  color: white;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  backdrop-filter: blur(2px);
}

.pod-library-info {
  display: grid;
  gap: 8px;
  padding: 12px;
}
.pod-library-title {
  display: -webkit-box;
  min-height: 38px;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  line-height: 19px;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.pod-library-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 22px;
}
.pod-library-tag {
  max-width: 100%;
  overflow: hidden;
  padding: 2px 6px;
  border-radius: 5px;
  background: #eef2e9;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pod-library-tag.approved { color: #14532d; background: #e8f6e9; }
.pod-library-tag.rejected { color: #991b1b; background: #fee2e2; }

.pod-library-risk-adjust {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 2px 5px;
  border: 1px dashed #b9c7b5;
  border-radius: 999px;
  background: #fffdf5;
  color: #52604d;
  font-size: 11px;
}
.pod-library-risk-adjust span { white-space: nowrap; }
.pod-library-risk-adjust select {
  min-height: 22px;
  padding: 0 4px;
  border: 1px solid #d8e0d2;
  border-radius: 999px;
  background: #fff;
  color: #38452f;
  font-size: 11px;
}
.pod-library-risk-adjust:hover,
.pod-library-risk-adjust:focus-within {
  border-color: #89a67d;
  background: #f7fbf3;
}
.pod-library-details {
  min-width: 0;
  border: 1px solid #e3e8de;
  border-radius: 7px;
  background: #fafcf8;
}
.pod-library-details summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 8px;
  color: var(--green-dark);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  list-style: none;
}
.pod-library-details summary::-webkit-details-marker { display: none; }
.pod-library-details[open] summary { border-bottom: 1px solid #e3e8de; }
.pod-library-details .pod-metadata-block {
  max-height: 148px;
  overflow: auto;
  border-radius: 0 0 7px 7px;
  background: transparent;
}

.pod-library-action-bar {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding: 11px 12px 12px;
  border-top: 1px solid var(--line);
  background: #fbfcfa;
}
.pod-library-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.pod-library-actions > * {
  width: 100%;
  min-height: 30px;
  justify-content: center;
  padding: 0 5px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.pod-library-actions > * svg { flex: 0 0 auto; width: 13px; height: 13px; }
.pod-library-actions > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.pod-library-more-actions summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  list-style: none;
}
.pod-library-more-actions summary::-webkit-details-marker { display: none; }
.pod-library-more-actions[open] summary {
  border-color: #b9cfa8;
  color: var(--green-dark);
  background: #f3f9ee;
}
.pod-library-more-actions[open] { display: grid; gap: 6px; }
.pod-library-action-bar > .hint {
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .pod-library-grid { grid-template-columns: 1fr; }
  .pod-library-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* POD AI processing overlay */
.pod-process-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgb(16 24 40 / 58%);
  backdrop-filter: blur(2px);
}
.pod-process-overlay[hidden] { display: none !important; }
.pod-process-modal {
  display: grid;
  gap: 14px;
  width: min(460px, 100%);
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 24px 60px rgb(16 24 40 / 28%);
}
.pod-process-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pod-process-head h3 { margin: 0; font-size: 18px; }
.pod-process-modal > p { margin: 0; color: var(--text); }
.pod-process-progress {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}
#podProcessBar {
  width: 4%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #84cc16, #16a34a);
  transition: width 700ms ease;
}
.pod-process-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 0;
}
.pod-process-meta div { padding: 9px 10px; border-radius: 6px; background: #f8fafc; }
.pod-process-meta dt { margin-bottom: 3px; color: var(--muted); font-size: 11px; }
.pod-process-meta dd { margin: 0; font-size: 13px; font-weight: 650; }
.pod-process-modal .secondary { justify-self: end; }


/* Application image lightbox */
.image-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgb(12 20 34 / 76%);
  backdrop-filter: blur(3px);
}
.image-lightbox-overlay[hidden] { display: none !important; }
.image-lightbox-body {
  position: relative;
  display: grid;
  gap: 0;
  max-width: min(1200px, 96vw);
  max-height: 92vh;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 28px 80px rgb(4 12 24 / 45%);
}
.image-lightbox-body img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  background:
    linear-gradient(45deg, #e2e8f0 25%, transparent 25%, transparent 75%, #e2e8f0 75%),
    linear-gradient(45deg, #e2e8f0 25%, #f8fafc 25%, #f8fafc 75%, #e2e8f0 75%);
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
}
.image-lightbox-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  background: var(--surface);
}
.image-lightbox-caption strong { font-size: 13px; }
.image-lightbox-caption span {
  overflow: hidden; color: var(--muted); font-size: 12px;
  text-overflow: ellipsis; white-space: nowrap;
}
.image-lightbox-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 34px; height: 34px;
  border: 1px solid rgb(15 23 42 / 14%);
  border-radius: 50%;
  background: rgb(255 255 255 / 92%);
  color: #334155;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 16px rgb(15 23 42 / 18%);
}
.image-lightbox-close:hover { background: #fff; color: #0f172a; }
@media (max-width: 700px) {
  .image-lightbox-caption { flex-direction: column; align-items: flex-start; gap: 3px; }
  .image-lightbox-caption span { max-width: 100%; }
}


/* Module-specific POD asset context */
.pod-context-list { display: grid; gap: 14px; margin-top: 16px; }
.pod-context-list[hidden] { display: none !important; }
.pod-context-list .section-head { margin-bottom: 0; }

/* Persistent compact POD task progress */
.pod-task-progress-panel {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  box-shadow: 0 4px 14px rgb(32 36 31 / 6%);
}
.pod-task-compact {
  display: grid;
  grid-template-columns: minmax(240px, .9fr) minmax(230px, 1.1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.pod-task-info {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.pod-task-state {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}
.pod-task-state::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pod-task-state.idle {
  border: 1px solid #d8ded1;
  background: #f5f7f2;
  color: var(--muted);
}
.pod-task-state.running {
  border: 1px solid #bcd8ee;
  background: #eef8ff;
  color: #20567a;
}
.pod-task-state.running::before {
  animation: pod-task-pulse 1.2s ease-in-out infinite;
}
.pod-task-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.pod-task-text > strong {
  overflow: hidden;
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pod-task-text > p {
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pod-task-meter {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.pod-task-meter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
}
.pod-task-meter-head > span {
  overflow: hidden;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pod-task-meter-head > span:first-child {
  color: #39442f;
  font-weight: 750;
}
.pod-task-progress-bar {
  position: relative;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e9df;
  box-shadow: inset 0 1px 2px rgb(32 36 31 / 6%);
}
#podCurrentTaskBar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #63a7d8, #22764a);
  transition: width 400ms ease;
}
#podCurrentTaskBar.running {
  background: linear-gradient(90deg, #7dd3fc, #2563eb);
}
#podCurrentTaskBar.running::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 48%), transparent);
  animation: pod-task-sweep 1.6s linear infinite;
}
.pod-task-progress-panel .secondary {
  min-height: 30px;
  padding: 4px 10px;
  font-size: 12px;
  white-space: nowrap;
}
@keyframes pod-task-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.75); }
}
@keyframes pod-task-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
@media (max-width: 900px) {
  .pod-task-compact { grid-template-columns: 1fr; }
  .pod-task-progress-panel .secondary { justify-self: start; }
}

.pod-batch-result-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 12px;
  padding: 10px 12px;
  border: 1px solid #cfe0d2;
  border-radius: 8px;
  background: #f2f8f0;
}
.pod-batch-result-banner[hidden] { display: none !important; }
.pod-batch-result-banner > span { display: grid; min-width: 0; }
.pod-batch-result-banner strong { color: #254b2d; font-size: 13px; }
.pod-batch-result-banner small { margin-top: 2px; color: #68775f; font-size: 11.5px; line-height: 1.4; }
.pod-batch-result-banner .secondary { flex: 0 0 auto; }
.pod-task-result-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pod-task-result-actions .secondary { min-height: 27px; padding: 3px 9px; font-size: 11px; }

/* POD task history: one readable, scrollable table */
.pod-task-history-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgb(16 24 40 / 58%);
  backdrop-filter: blur(2px);
}
.pod-task-history-overlay[hidden] { display: none !important; }
.pod-task-history-modal {
  display: flex;
  flex-direction: column;
  width: min(1180px, 96vw);
  max-height: min(92vh, 980px);
  overflow: hidden;
  padding: 0;
  border: 1px solid #d8e0cf;
  border-radius: 12px;
  background: #fbfcf9;
  box-shadow: 0 24px 70px rgb(23 31 20 / 24%);
}
.pod-task-history-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  border-bottom: 1px solid #dfe6d6;
  background: #fff;
}
.pod-task-history-header h3 { margin: 0; color: #243019; font-size: 17px; }
.pod-task-history-header p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.pod-task-history-header .secondary { flex: 0 0 auto; }

.pod-task-history-tools {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 18px;
  border-bottom: 1px solid #e2e8da;
  background: #f7faf4;
}
.pod-task-history-filter-group { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pod-task-history-filter-group > span,
.pod-task-history-type-filter > span {
  color: #68735e;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}
.pod-task-history-filter-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px;
  border: 1px solid #dbe3d1;
  border-radius: 7px;
  background: #fff;
}
.pod-task-history-tools .secondary {
  min-height: 27px;
  padding: 3px 10px;
  border-color: transparent;
  background: transparent;
  color: #65705b;
  font-size: 12px;
}
.pod-task-history-tools .secondary:hover { border-color: #c9d5bf; background: #fff; }
.pod-task-history-tools .secondary.active {
  border-color: #9ac5a8;
  background: #e9f6ee;
  color: var(--green-dark);
}
#refreshPodTaskHistory { border: 1px solid #cbd6c2; background: #fff; color: #414c38; }
.pod-task-history-type-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
}
#podTaskHistoryTypeFilter {
  width: 190px;
  min-height: 29px;
  padding: 3px 8px;
  border: 1px solid #cbd6c2;
  border-radius: 7px;
  background: #fff;
  color: #36402d;
  font-size: 12px;
}

.pod-task-history-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 12px 18px 16px;
}
.pod-task-history-now {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  flex: 0 0 auto;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid #d6e6d9;
  border-radius: 8px;
  background: linear-gradient(135deg, #f4faf5, #fff);
}
.pod-task-history-now-icon { width: 10px; height: 10px; border-radius: 50%; background: #8ea483; }
.pod-task-history-now.is-running .pod-task-history-now-icon { background: #2b7fc5; animation: pod-task-pulse 1.3s ease-in-out infinite; }
.pod-task-history-now.is-loading .pod-task-history-now-icon { background: #8a7b3b; animation: pod-task-pulse 1.1s ease-in-out infinite; }
.pod-task-history-now.is-error { border-color: #edc3ba; background: #fff8f6; }
.pod-task-history-now strong { color: #27331f; font-size: 12.5px; }
.pod-task-history-now p { margin: 2px 0 0; color: #66705d; font-size: 11.5px; line-height: 1.45; }
.pod-task-history-now-error { color: #9a4b3e !important; }

.pod-task-history-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex: 0 0 auto;
  gap: 7px;
  margin-top: 9px;
}
.pod-task-history-summary > div {
  display: grid;
  min-width: 0;
  gap: 1px;
  padding: 8px 10px;
  border: 1px solid #e0e7d7;
  border-radius: 8px;
  background: #fff;
}
.pod-task-history-summary strong { color: #26321f; font-size: 17px; font-variant-numeric: tabular-nums; }
.pod-task-history-summary span { color: var(--muted); font-size: 11px; }

.pod-task-history-groups { flex: 0 0 auto; margin-top: 8px; }
.pod-task-history-groups[hidden] { display: none !important; }
.pod-task-history-groups > details {
  overflow: hidden;
  border: 1px solid #f0c4a8;
  border-radius: 8px;
  background: #fff9f4;
}
.pod-task-history-groups summary {
  padding: 8px 10px;
  color: #8b4d2b;
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
}
.pod-task-failure-group-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 7px;
  padding: 0 8px 8px;
}
.pod-task-failure-group { display: grid; min-width: 0; gap: 3px; padding: 8px; border: 1px solid #f0d0b8; border-radius: 7px; background: #fff; }
.pod-task-failure-group strong { color: #804026; font-size: 12px; }
.pod-task-failure-group span { justify-self: start; padding: 1px 6px; border-radius: 999px; background: #ffe8d5; color: #96551f; font-size: 10.5px; font-weight: 750; }
.pod-task-failure-group small { color: #765035; font-size: 11px; line-height: 1.45; }

.pod-task-history-table-section {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 260px;
  margin-top: 10px;
}
.pod-task-history-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}
.pod-task-history-section-head strong { color: #344029; font-size: 13px; }
.pod-task-history-section-head span { color: var(--muted); font-size: 11px; }
.pod-task-history-table-shell {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border: 1px solid #dbe3d2;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 1px 5px rgb(33 39 31 / 4%);
}
.pod-task-history-table { width: 100%; min-width: 1080px; border-collapse: separate; border-spacing: 0; }
.pod-task-history-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 10px;
  border-bottom: 1px solid #d7e0cd;
  background: #f5f8f0;
  color: #68735e;
  font-size: 10.5px;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
}
.pod-task-history-table tbody td {
  min-width: 0;
  padding: 9px 10px;
  border-bottom: 1px solid #edf1e7;
  color: #4c5643;
  font-size: 11.7px;
  line-height: 1.4;
  vertical-align: middle;
}
.pod-task-history-table tbody tr:last-child td { border-bottom: 0; }
.pod-task-history-item:hover td { background: #fcfdfa; }
.pod-task-history-item.running td { background: #fbfdff; }
.pod-task-history-item.failed td,
.pod-task-history-item.partial td,
.pod-task-history-item.interrupted td { background: #fffafa; }
.pod-task-history-date-group td {
  position: sticky;
  top: 34px;
  z-index: 1;
  background: #f5f8f0 !important;
}
.pod-task-history-date-group div,
.pod-task-history-date-group td { color: #334028; }
.pod-task-history-date-group td { display: table-cell; }
.pod-task-history-date-group span { display: block; font-size: 11.5px; font-weight: 800; }
.pod-task-history-date-group small { display: block; color: #76816c; font-size: 10.5px; font-variant-numeric: tabular-nums; }

.pod-task-time-cell { width: 138px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pod-task-time-cell time { display: block; color: #2f3a26; font-weight: 700; }
.pod-task-time-cell span { color: #77826d; font-size: 10.5px; }
.pod-task-name-cell { min-width: 235px; max-width: 320px; }
.pod-task-name-cell strong,
.pod-task-name-cell span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pod-task-name-cell strong { color: #28331f; font-size: 12.3px; }
.pod-task-name-cell span { color: #66705d; }
.pod-task-name-cell small { display: block; margin-top: 2px; color: #828d78; font-size: 10.3px; }
.pod-task-class-cell { width: 135px; }
.pod-task-scope-badge,
.pod-task-type-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 1px 3px 1px 0;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.4px;
  font-weight: 750;
  white-space: nowrap;
}
.pod-task-scope-badge { border: 1px solid #d3dcc9; background: #f6f8f2; color: #5d6853; }
.pod-task-type-badge { border: 1px solid #c9ddf2; background: #eff8ff; color: #215d81; }
.pod-task-status-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef2e9;
  color: #5f6a55;
  font-size: 10.8px;
  font-weight: 800;
  white-space: nowrap;
}
.pod-task-status-chip.success { background: #e7f7ed; color: #20713f; }
.pod-task-status-chip.running { background: #e9f5fd; color: #23678f; }
.pod-task-status-chip.failed,
.pod-task-status-chip.partial,
.pod-task-status-chip.interrupted { background: #fdeeea; color: #ad4136; }
.pod-task-progress-cell { display: grid; grid-template-columns: minmax(70px, 96px) auto; align-items: center; gap: 6px; }
.pod-task-card-progress-track { height: 5px; overflow: hidden; border-radius: 999px; background: #e5e9de; }
.pod-task-card-progress-track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: #4f9a68; }
.pod-task-history-item.running .pod-task-card-progress-track > span { background: #368ac2; }
.pod-task-progress-cell small { color: #68735e; font-size: 10.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pod-task-duration-cell { width: 85px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pod-task-outcome-cell { min-width: 260px; max-width: 390px; }
.pod-task-outcome-cell > span { display: block; overflow-wrap: anywhere; }
.pod-task-history-item.failed .pod-task-outcome-cell > span,
.pod-task-history-item.partial .pod-task-outcome-cell > span,
.pod-task-history-item.interrupted .pod-task-outcome-cell > span { color: #9c453a; }
.pod-task-outcome-cell details,
.pod-task-expand-cell details { margin-top: 3px; }
.pod-task-outcome-cell summary,
.pod-task-expand-cell summary { color: #74806a; cursor: pointer; font-size: 10.5px; user-select: none; white-space: nowrap; }
.pod-task-outcome-cell code { display: block; margin-top: 3px; color: #6c443d; font-family: Consolas, 'Courier New', monospace; font-size: 10.3px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.pod-task-expand-cell { width: 105px; }
.pod-task-muted { color: #98a28e; }
.pod-task-item-empty { margin: 0; padding: 8px 9px; border-radius: 6px; background: #f7f9f4; color: #68735e !important; font-size: 11.3px; line-height: 1.5; }
.pod-task-child-table-shell { overflow-x: auto; margin-top: 7px; border: 1px solid #e0e7d7; border-radius: 7px; background: #fff; }
.pod-task-child-table-shell table { width: 100%; min-width: 760px; border-collapse: collapse; }
.pod-task-child-table-shell th { padding: 6px 8px; border-bottom: 1px solid #dce4d2; background: #f6f8f1; color: #68735e; font-size: 10.2px; font-weight: 800; text-align: left; white-space: nowrap; }
.pod-task-child-table-shell td { padding: 6px 8px; border-bottom: 1px solid #eef2e8; color: #536049; font-size: 10.8px; line-height: 1.35; }
.pod-task-child-table-shell tr:last-child td { border-bottom: 0; }
.pod-task-child-table-shell td:nth-child(4),
.pod-task-child-table-shell td:nth-child(5),
.pod-task-child-table-shell td:nth-child(6) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pod-task-child-table-shell tr.success td:nth-child(3) { color: #20713f; font-weight: 750; }
.pod-task-child-table-shell tr.failed td:nth-child(3) { color: #ad4136; font-weight: 750; }
.pod-task-child-table-shell tr.running td:nth-child(3) { color: #23678f; font-weight: 750; }
.pod-task-history-empty { display: none; margin: 12px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.pod-task-history-empty[hidden] { display: none; }

@media (max-width: 900px) {
  .pod-task-history-overlay { padding: 0; }
  .pod-task-history-modal { width: 100%; height: 100%; max-height: 100%; border: 0; border-radius: 0; }
  .pod-task-history-header,
  .pod-task-history-tools,
  .pod-task-history-body { padding-right: 10px; padding-left: 10px; }
  .pod-task-history-header { align-items: center; }
  .pod-task-history-filter-group,
  .pod-task-history-type-filter { width: 100%; }
  .pod-task-history-filter-group > div,
  #podTaskHistoryTypeFilter { flex: 1 1 100%; }
  #podTaskHistoryTypeFilter { width: 100%; }
  .pod-task-history-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pod-task-history-table-section { min-height: 0; }
}

#podAssetContextTitle + .hint + .toolbar,
#podAssetContextTitle + .hint + .toolbar .selection-tools {
  container-type: normal;
}
#podAssetContextTitle + .hint + .toolbar .selection-tools {
  align-items: center;
}
.pod-fission-modal { max-width: 620px; }
#podBackgroundSceneWrap { display: grid; gap: 8px; }
.pod-scene-field-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}
.pod-scene-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
}
.pod-scene-preset {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 7px;
  min-height: 50px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.pod-scene-preset input { margin: 0; accent-color: var(--green); }
.pod-scene-preset span {
  display: grid;
  gap: 2px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.pod-scene-preset small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}
.pod-scene-preset:has(input:checked) {
  border-color: #86efac;
  background: #f0fdf4;
  box-shadow: 0 0 0 3px rgb(34 197 94 / 12%);
}
.pod-scene-custom { margin-top: 4px; }
.pod-fission-dialog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 620px) {
  .pod-fission-dialog-grid { grid-template-columns: 1fr; }
}
.pod-fission-modal label { margin-top: 8px; }
.pod-fission-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
/* Independent designer mockup module */
.pod-designer-module-tabs { margin-bottom: 12px; }
.pod-designer-mockup-panel { display: grid; gap: 14px; }
.pod-designer-effect-board,
.pod-designer-template-preview-head {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}
.pod-designer-effect-board-head,
.pod-designer-template-preview-head {
  grid-template-columns: 1fr;
  align-content: start;
}
.pod-designer-effect-board-head strong,
.pod-designer-template-preview-head strong { font-size: 14px; }
.pod-designer-effect-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.pod-designer-effect-card {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.pod-designer-effect-card canvas {
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: #fff;
}
.pod-designer-effect-card figcaption {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  text-align: center;
}
.pod-designer-template-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.pod-designer-template-preview {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
}
.pod-designer-template-preview:hover { border-color: #93c5fd; box-shadow: 0 8px 22px rgba(15,23,42,.07); }
.pod-designer-template-preview.active { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
.pod-designer-template-preview canvas {
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: #fff;
}
.pod-designer-template-preview strong { font-size: 14px; }
.pod-designer-template-preview span,
.pod-designer-template-preview small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

/* Independent POD shop binding module */
.pod-shop-workspace {
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(560px, 1.1fr);
  gap: 14px;
  align-items: start;
}
.pod-shop-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.pod-shop-account-grid,
.pod-shop-listing-table { display: grid; gap: 10px; margin-top: 12px; }
.pod-shop-account-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}
.pod-shop-account-card > div:first-child { display: grid; gap: 3px; min-width: 0; }
.pod-shop-account-card strong { font-size: 14px; }
.pod-shop-account-card span,
.pod-shop-account-card small { color: var(--muted); font-size: 12px; }
.pod-shop-card-actions,
.pod-shop-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pod-shop-card-actions { grid-column: 1 / -1; }
.pod-shop-listing-table { overflow-x: auto; }
.pod-wb-media-repair {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  display: grid;
  gap: 8px;
}
.pod-wb-media-repair > .section-head { margin-bottom: 0; }
.pod-wb-media-repair > .hint { margin: 0; }
.pod-shop-listing-table table { width: 100%; border-collapse: collapse; background: var(--surface); }
.pod-shop-listing-table th,
.pod-shop-listing-table td {
  padding: 9px 10px;
  border: 1px solid var(--line);
  font-size: 12px;
  text-align: left;
  vertical-align: middle;
}
.pod-shop-listing-table th { background: #f1f5f9; color: #475569; }
.pod-shop-listing-table a { color: #1d4ed8; font-weight: 650; }
@media (max-width: 1100px) {
  .pod-shop-workspace { grid-template-columns: 1fr; }
}

/* POD Product Designer */
.pod-designer-project-bar {
  display: grid;
  grid-template-columns:
    minmax(210px, 1.1fr)
    minmax(170px, .8fr)
    minmax(92px, .28fr)
    minmax(128px, .45fr)
    minmax(300px, auto);
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fbfcfa;
}
.pod-designer-project-bar .design-option { margin: 0; }
.pod-designer-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.pod-designer-color-variants { display: grid; gap: 7px; }
.pod-designer-color-variants > span { color: var(--muted); font-size: 12px; font-weight: 650; }
#podDesignerColorList { display: flex; gap: 7px; flex-wrap: wrap; }
.pod-designer-color-dot {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid rgba(32,36,31,.18);
  border-radius: 50%;
  background: var(--dot-color);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.55);
}
.pod-designer-color-dot:hover { border-color: var(--green); transform: translateY(-1px); }
.pod-designer-color-dot.active { border-color: var(--green); box-shadow: 0 0 0 3px rgba(34,118,74,.18), inset 0 0 0 3px rgba(255,255,255,.6); }

.pod-designer-workspace {
  display: grid;
  grid-template-columns: minmax(270px, 320px) minmax(420px, 1fr) minmax(280px, 340px);
  gap: 14px;
  align-items: start;
  margin-top: 14px;
}
.pod-designer-left,
.pod-designer-right { display: grid; gap: 12px; min-width: 0; }
.pod-designer-center { display: grid; gap: 12px; min-width: 0; }
.pod-designer-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}
.pod-designer-box > strong { font-size: 13px; }
.pod-designer-template-list { display: grid; gap: 8px; max-height: 292px; overflow: auto; padding-right: 2px; }
.pod-designer-template-card {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 88px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  text-align: left;
}
.pod-designer-template-card:hover { border-color: #a9b7a2; background: #fff; }
.pod-designer-template-card.active { border-color: var(--green); background: #f1f8f3; box-shadow: 0 0 0 3px rgba(34,118,74,.11); }
.pod-designer-template-card strong { font-size: 13px; }
.pod-designer-template-card span { color: var(--muted); font-size: 12px; line-height: 1.42; }
.pod-designer-template-card small { color: var(--green-dark); font-size: 11px; font-weight: 700; }
.pod-designer-side-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.pod-designer-side-switch button { min-height: 34px; background: #fff; }
.pod-designer-side-switch button.active { border-color: var(--green); color: var(--green-dark); background: #eef8f1; font-weight: 750; }
.pod-designer-check { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.pod-designer-check input { width: auto; }
.pod-designer-object-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.pod-designer-object-controls label { display: grid; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 650; }
.pod-designer-object-controls label.full { grid-column: 1 / -1; }
.pod-designer-object-controls input,
.pod-designer-object-controls select { min-height: 32px; }
.pod-designer-object-controls input[type="color"] { padding: 3px; }
.pod-designer-mini-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; }
.pod-designer-mini-actions button { min-height: 30px; padding: 0 9px; font-size: 12px; }

.pod-designer-canvas-wrap {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(45deg, #e7ebe5 25%, transparent 25%, transparent 75%, #e7ebe5 75%),
    linear-gradient(45deg, #e7ebe5 25%, #f8faf8 25%, #f8faf8 75%, #e7ebe5 75%);
  background-position: 0 0, 14px 14px;
  background-size: 28px 28px;
  box-shadow: var(--shadow);
}
#podDesignerCanvas {
  display: block;
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  cursor: grab;
  touch-action: none;
}
#podDesignerCanvas.dragging { cursor: grabbing; }
#podDesignerCanvas.resizing { cursor: nwse-resize; }
.pod-designer-canvas-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: #4b5545;
  font-size: 11px;
  box-shadow: 0 6px 16px rgba(32,36,31,.12);
}
.pod-designer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pod-designer-toolbar .hint.error { color: var(--red); font-weight: 650; }
.pod-designer-output {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid #bfe0cc;
  border-radius: 9px;
  background: #f2faf5;
}
.pod-designer-output > strong { font-size: 13px; color: var(--green-dark); }
#podDesignerOutputLinks { display: flex; gap: 8px; flex-wrap: wrap; }
.pod-designer-output-link {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 0 11px;
  border: 1px solid #b7d6c4;
  border-radius: 999px;
  background: #fff;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}
.pod-designer-output-link.print { border-color: #b7cde4; color: #24547a; background: #f5f9ff; }
.pod-designer-output-link:hover { border-color: var(--green); }

.pod-designer-asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 9px;
  max-height: 330px;
  overflow: auto;
  padding-right: 2px;
}
.pod-designer-asset {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.pod-designer-asset.high-risk { border-color: #e5b6b1; background: #fff8f7; }
.pod-designer-asset-image {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 6px;
  background:
    linear-gradient(45deg, #e9edf2 25%, transparent 25%, transparent 75%, #e9edf2 75%),
    linear-gradient(45deg, #e9edf2 25%, #fff 25%, #fff 75%, #e9edf2 75%);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
}
.pod-designer-asset-image img { width: 100%; height: 100%; object-fit: contain; }
.pod-designer-asset strong { overflow: hidden; color: var(--text); font-size: 11px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.pod-designer-asset span { color: var(--muted); font-size: 10px; }
.pod-designer-asset em { justify-self: start; padding: 2px 5px; border-radius: 999px; background: #edf1e9; color: var(--muted); font-size: 10px; font-style: normal; }
.pod-designer-asset em.approved { background: #e7f5ec; color: var(--green-dark); }
.pod-designer-asset em.rejected { background: #faeceb; color: var(--red); }
.pod-designer-asset button { min-height: 29px; padding: 0 7px; font-size: 11px; }

.pod-designer-layer-list { display: grid; gap: 7px; max-height: 300px; overflow: auto; }
.pod-designer-layer {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 8px;
  width: 100%;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-align: left;
}
.pod-designer-layer img,
.pod-designer-layer-mark {
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 5px;
  background: #f0f3ee;
}
.pod-designer-layer-mark { display: grid; place-items: center; color: var(--green-dark); font-weight: 800; }
.pod-designer-layer span { overflow: hidden; color: var(--text); font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.pod-designer-layer small { color: var(--muted); font-size: 10px; }
.pod-designer-layer:hover { border-color: #aab7a3; }
.pod-designer-layer.active { border-color: var(--green); background: #f1f8f3; box-shadow: 0 0 0 3px rgba(34,118,74,.1); }

.pod-designer-project-list { display: grid; gap: 9px; max-height: 400px; overflow: auto; }
.pod-designer-project {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 66px;
  gap: 5px 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.pod-designer-project > div { display: grid; gap: 3px; min-width: 0; }
.pod-designer-project strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.pod-designer-project span { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }
.pod-designer-project small { color: #7b8474; font-size: 10px; }
.pod-designer-project img { grid-row: 1 / 4; width: 66px; height: 78px; border-radius: 6px; border: 1px solid var(--line); background: #f5f7f3; object-fit: cover; }
.pod-designer-project-color { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(32,36,31,.22); background: var(--project-color); }
.pod-designer-project button { min-height: 29px; padding: 0 8px; font-size: 11px; }
.pod-designer-project.active { border-color: var(--green); box-shadow: 0 0 0 3px rgba(34,118,74,.1); }
.pod-shop-reserved { border-style: dashed; background: #fbfcfa; }

.pod-designer-product-info {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dbe7f3;
  border-radius: 9px;
  background: #fff;
}
.pod-designer-product-info > strong { color: #17406f; font-size: 13px; }
.pod-designer-pricing {
  display: grid;
  grid-template-columns: minmax(160px, .8fr) 150px minmax(0, 2fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid #d7ecdf;
  border-radius: 9px;
  background: linear-gradient(145deg, #ffffff, #f4fbf7);
}
.pod-designer-pricing-copy { display: grid; gap: 3px; }
.pod-designer-pricing-copy strong { color: #11623d; font-size: 12.5px; }
.pod-designer-pricing-copy p { margin: 0; color: #40564a; font-size: 11.5px; line-height: 1.45; }
.pod-designer-pricing label { display: grid; gap: 4px; }
.pod-designer-pricing label span { color: #40564a; font-size: 11.5px; font-weight: 800; }
.pod-designer-pricing input {
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid #b8d9c7;
  border-radius: 7px;
  background: #fff;
  color: #173b2b;
  font: inherit;
  font-size: 12.5px;
}
.pod-designer-pricing input:focus { border-color: #67ab88; outline: none; box-shadow: 0 0 0 3px rgba(4,120,87,.12); }
.pod-designer-pricing-table { min-width: 0; display: grid; gap: 6px; }
.pod-designer-pricing-scroll { max-height: 180px; overflow: auto; border: 1px solid #d8e8de; border-radius: 8px; background: #fff; }
.pod-designer-pricing table { width: 100%; min-width: 430px; border-collapse: collapse; }
.pod-designer-pricing th,
.pod-designer-pricing td { padding: 7px 8px; border-bottom: 1px solid #e5efe9; text-align: left; white-space: nowrap; }
.pod-designer-pricing th { position: sticky; top: 0; background: #edf7f1; color: #11623d; font-size: 11px; }
.pod-designer-pricing td { color: #33413a; font-size: 12px; }
.pod-designer-pricing td.price { color: #047857; font-weight: 850; }
.pod-designer-pricing .hint { margin: 0; color: var(--muted); font-size: 11px; }
.pod-designer-product-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.pod-designer-product-info-grid details {
  min-width: 0;
  padding: 9px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fbff;
}
.pod-designer-product-info-grid summary {
  cursor: pointer;
  color: #17406f;
  font-size: 12px;
  font-weight: 800;
}
.pod-designer-product-info-content { margin-top: 7px; font-size: 12px; line-height: 1.6; }
.pod-designer-product-info-text { color: #334155; white-space: pre-line; overflow-wrap: anywhere; }
.pod-designer-product-info-empty { margin: 0; color: var(--muted); }
.pod-designer-product-info-table-wrap { max-width: 100%; overflow-x: auto; }
.pod-designer-product-info-content table {
  width: 100%;
  min-width: 360px;
  border-collapse: collapse;
  background: #fff;
}
.pod-designer-product-info-content th,
.pod-designer-product-info-content td {
  padding: 7px 8px;
  border: 1px solid #dbeafe;
  text-align: left;
  white-space: nowrap;
}
.pod-designer-product-info-content th { color: #17406f; background: #eff6ff; }
.pod-designer-product-info-content td { color: #334155; }

.pod-design-records-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.pod-design-records-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pod-design-records-wrap {
  max-height: calc(100vh - 260px);
  min-width: 0;
  margin-top: 12px;
}
.pod-design-records-table { min-width: 1420px; background: var(--surface); }
.pod-design-records-table th,
.pod-design-records-table td {
  font-size: 12px;
  vertical-align: middle;
}
.pod-design-records-table tbody tr.active td { background: #f3faf5; }
.pod-design-records-table .actions { align-items: center; }
.pod-design-records-table .actions button { min-height: 29px; padding: 0 8px; font-size: 12px; }
.pod-record-title-cell { min-width: 230px; max-width: 320px; }
.pod-record-title-cell strong,
.pod-record-title-cell span { display: block; overflow-wrap: anywhere; }
.pod-record-title-cell span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.pod-designer-size-list,
.pod-record-size-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
.pod-record-size-list small {
  width: 100%;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}
.pod-record-size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 3px 7px;
  border-radius: 6px;
  background: #eef8f1;
  color: var(--green-dark);
  font-size: 12px;
}
.pod-record-color { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pod-record-color i {
  width: 15px;
  height: 15px;
  border: 1px solid rgba(32,36,31,.18);
  border-radius: 4px;
  background: var(--record-color);
}
.pod-record-image-list { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pod-record-image-list a {
  display: block;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.pod-record-image-list a:hover { border-color: var(--green); }
.pod-record-image-list img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pod-record-image-list > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.pod-record-image-list small,
.pod-record-time { color: var(--muted); font-size: 11px; }
.pod-record-listing-links { display: grid; gap: 3px; margin-top: 5px; }

@media (max-width: 1350px) {
  .pod-designer-project-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pod-designer-actions { grid-column: 1 / -1; }
}

@media (max-width: 1450px) {
  .pod-designer-workspace { grid-template-columns: minmax(250px, 300px) minmax(360px, 1fr); }
  .pod-designer-canvas-stage { grid-template-columns: minmax(0, 1fr) minmax(190px, 230px); }
  .pod-template-library-workspace { grid-template-columns: minmax(280px, 330px) minmax(400px, 1fr); }
  .pod-designer-right { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1050px) {
  .pod-designer-project-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pod-template-library-workspace { grid-template-columns: 1fr; }
  .pod-template-library-side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .pod-template-cards-panel { grid-column: 1 / -1; }
  .pod-designer-actions { justify-content: flex-start; }
  .pod-designer-workspace { grid-template-columns: 1fr; }
  .pod-designer-right { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .pod-designer-project-bar { grid-template-columns: 1fr; }
  .pod-designer-canvas-stage { grid-template-columns: 1fr; }
  .pod-designer-live-preview { position: static; max-width: 430px; }
  .pod-template-library-side { grid-template-columns: 1fr; }
  .pod-template-filter-grid { grid-template-columns: 1fr; }
  .pod-designer-object-controls { grid-template-columns: 1fr; }
  .pod-designer-project { grid-template-columns: 66px minmax(0, 1fr); }
  .pod-designer-project img { grid-row: auto; }
  .pod-designer-project button { width: 100%; }
}

/* Designer live effect and independent template library */
.pod-designer-canvas-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr);
  gap: 12px;
  align-items: start;
}
.pod-designer-live-preview {
  position: sticky;
  top: 10px;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
  box-shadow: 0 10px 26px rgba(15,23,42,.05);
}
.pod-designer-live-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pod-designer-live-preview-head strong { font-size: 13px; }
.pod-designer-live-preview-head span {
  padding: 3px 7px;
  border-radius: 999px;
  background: #e8f2ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 700;
}
.pod-designer-live-effect-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  max-height: min(58vh, 620px);
  overflow: auto;
  padding-right: 2px;
}
.pod-designer-live-effect-item {
  display: grid;
  gap: 5px;
  margin: 0;
  min-width: 0;
}
.pod-designer-live-effect-item figcaption {
  color: #1e40af;
  font-size: 11px;
  font-weight: 750;
}
.pod-designer-live-effect-item canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid rgba(148,163,184,.35);
  background: #fff;
}
.pod-designer-live-preview figcaption { color: var(--muted); font-size: 11px; line-height: 1.5; }
.pod-designer-fixed-images {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid #c7d7e8;
  border-radius: 9px;
  background: #f8fbff;
}
.pod-designer-fixed-images > strong { color: #1d4ed8; font-size: 13px; }
.pod-designer-fixed-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 9px;
}
.pod-designer-fixed-image-grid figure {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.pod-designer-fixed-image-grid img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: #fff;
}
.pod-designer-fixed-image-grid figcaption {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.pod-template-library-workspace {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(520px, 1fr);
  gap: 14px;
  align-items: start;
}
.pod-template-library-side { display: grid; gap: 12px; min-width: 0; }
.pod-template-filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.pod-template-filter-grid .full { grid-column: 1 / -1; }
#podTemplateImportFiles {
  width: 100%;
  min-height: 38px;
  padding: 7px;
  border: 1px dashed #b8c6d9;
  border-radius: 7px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
}
.pod-template-json-help { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.pod-template-json-help summary { cursor: pointer; color: #334155; font-weight: 700; }
.pod-template-json-help p { line-height: 1.55; }
.pod-template-reference-groups { display: grid; gap: 12px; }
.pod-template-reference-group {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
.pod-template-reference-group h3 {
  margin: 0;
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}
.pod-template-reference-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }.pod-template-reference-list { display: grid; gap: 8px; }
.pod-template-reference-list a {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}
.pod-template-reference-list a:hover { border-color: #93c5fd; background: #f8fbff; }
.pod-template-reference-list strong { color: #1d4ed8; font-size: 13px; }
.pod-template-reference-list span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.pod-template-editor {
  display: grid;
  gap: 12px;
  margin-bottom: 13px;
  padding: 12px;
  border: 1px solid #bfd8f2;
  border-radius: 10px;
  background: #f8fbff;
}
.pod-template-editor .section-head { margin: 0; }
.pod-template-editor h3 { font-size: 14px; color: #17406f; }
.pod-template-editor-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.pod-template-editor-grid .full { grid-column: 1 / -1; }
.pod-template-product-info-section {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid #bbf7d0;
  border-radius: 9px;
  background: #fff;
}
.pod-template-product-info-section > div { display: grid; gap: 3px; }
.pod-template-product-info-section strong { color: #166534; font-size: 13px; }
.pod-template-product-info-section p { color: var(--muted); font-size: 11px; line-height: 1.5; }
.pod-template-product-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.pod-template-product-info-grid label { color: #334155; font-size: 12px; font-weight: 700; }
.pod-template-product-info-grid input {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  font-size: 12px;
}
.pod-template-product-info-grid textarea {
  min-height: 155px;
  font-size: 12px;
  line-height: 1.55;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre;
}

.pod-template-psd-view-section {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid #bfdbfe;
  border-radius: 9px;
  background: #fff;
}
.pod-template-psd-view-section > div { display: grid; gap: 3px; }
.pod-template-psd-view-section strong { font-size: 13px; }
.pod-template-psd-view-section p { color: var(--muted); font-size: 11px; line-height: 1.5; }
.pod-template-psd-view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
.pod-template-psd-view-item {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}
.pod-template-psd-view-item canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: #fff;
}
.pod-template-psd-view-item input,
.pod-template-psd-view-item select { min-height: 30px; font-size: 12px; }
.pod-template-psd-view-item label { display: grid; gap: 3px; color: var(--muted); font-size: 11px; }
.pod-template-psd-view-item figcaption { display: grid; gap: 2px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.pod-template-psd-view-item button { min-height: 28px; font-size: 11px; }
.pod-template-fixed-section {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px dashed #9fc0e2;
  border-radius: 9px;
  background: #fff;
}
.pod-template-fixed-section > div { display: grid; gap: 3px; }
.pod-template-fixed-section strong { font-size: 13px; }
.pod-template-fixed-section p { color: var(--muted); font-size: 11px; line-height: 1.5; }
.pod-template-fixed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 9px;
}
.pod-template-fixed-item {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
}
.pod-template-fixed-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: #fff;
}
.pod-template-fixed-item input { min-height: 30px; font-size: 12px; }
.pod-template-fixed-item figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
}
.pod-template-fixed-item figcaption button { min-height: 26px; padding: 0 7px; font-size: 11px; }
@media (max-width: 1400px) {
  .pod-template-editor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .pod-designer-pricing,
  .pod-designer-product-info-grid,
  .pod-template-product-info-grid { grid-template-columns: 1fr; }
}
.pod-template-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pod-template-card {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(15,23,42,.04);
}
.pod-template-card:hover { border-color: #93c5fd; box-shadow: 0 12px 28px rgba(15,23,42,.08); }
.pod-template-preview {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  background: #f8fafc;
}
.pod-template-preview canvas { display: block; width: 100%; height: auto; background: #fff; }
.pod-template-preview.multiple {
  grid-template-columns: minmax(0, 1fr) 84px;
  align-items: start;
  padding: 7px;
}
.pod-template-preview-main { position: relative; min-width: 0; }
.pod-template-preview-main canvas { border-radius: 8px; }
.pod-template-preview-thumbnails {
  display: grid;
  gap: 6px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 2px;
}
.pod-template-preview-thumbnail {
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .5);
  border-radius: 7px;
  background: #fff;
}
.pod-template-preview-thumbnail canvas { border-radius: 0; }
.pod-template-preview span {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(15,23,42,.74);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.pod-template-card-body { display: grid; gap: 7px; padding: 11px; min-width: 0; }
.pod-template-card-body strong { font-size: 14px; }
.pod-template-card-body > span { color: #2563eb; font-size: 12px; font-weight: 650; }
.pod-template-card-body small,
.pod-template-card-body em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.pod-template-card-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.pod-template-card-actions button { min-height: 31px; padding: 0 10px; font-size: 12px; }
.pod-template-card-actions a[data-pod-template-info] {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.pod-template-card-actions a[data-pod-template-info]:hover { border-color: #adb7a4; }

/* PSD smart-object mockup import */
.pod-template-psd-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.pod-template-psd-analysis { display: grid; gap: 11px; }
.pod-template-psd-queue { display: grid; gap: 8px; border: 1px solid #bfdbfe; border-radius: 10px; background: #f8fbff; padding: 9px; }
.pod-template-psd-queue > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pod-template-psd-queue > div strong { font-size: 12px; color: #1e40af; }
.pod-template-psd-queue > div span { color: var(--muted); font-size: 11px; }
.pod-template-psd-queue ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; max-height: 190px; overflow: auto; }
.pod-template-psd-queue button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 34px; padding: 5px 8px; text-align: left; }
.pod-template-psd-queue strong { font-size: 12px; overflow-wrap: anywhere; }
.pod-template-psd-queue small { color: inherit; opacity: .75; }
.pod-template-psd-previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.pod-template-psd-previews figure { display: grid; gap: 5px; margin: 0; }
.pod-template-psd-previews img { width: 100%; max-height: 210px; object-fit: contain; border: 1px solid #dbeafe; border-radius: 9px; background: #f8fafc; }
.pod-template-psd-previews figcaption { color: var(--muted); font-size: 11px; font-weight: 650; }
.pod-template-psd-summary { display: flex; flex-wrap: wrap; gap: 6px; }
.pod-template-psd-summary span { border: 1px solid #dbeafe; background: #f8fbff; color: #2563eb; border-radius: 999px; padding: 3px 8px; font-size: 11px; font-weight: 700; }
.pod-template-psd-selections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pod-template-psd-selections section { display: grid; gap: 7px; border: 1px solid #e2e8f0; border-radius: 10px; padding: 9px; background: #fff; }
.pod-template-psd-selections h3 { font-size: 12px; color: #334155; }
.pod-template-psd-layer { display: grid; gap: 5px; border-left: 2px solid #dbeafe; margin-left: calc(var(--layer-depth, 0) * 10px); padding-left: 8px; }
.pod-template-psd-layer > div { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pod-template-psd-layer strong { font-size: 12px; }
.pod-template-psd-layer small { color: var(--muted); font-size: 11px; }
@media (max-width: 900px) {
  .pod-template-psd-meta,
  .pod-template-psd-previews,
  .pod-template-psd-selections { grid-template-columns: 1fr; }
}


/* POD Ozon listing module */
.pod-listing-form-panel,
.pod-shop-listing-panel { margin-bottom: 14px; }
.pod-listing-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 10px;
}
.pod-listing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.pod-listing-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.pod-listing-summary > div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid #dbe7f3;
  border-radius: 8px;
  background: #f8fafc;
}
.pod-listing-summary span { color: var(--muted); font-size: 12px; }
.pod-listing-summary strong { font-size: 13px; overflow-wrap: anywhere; }
.pod-listing-attribute-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  align-items: start;
  margin-bottom: 12px;
}
.pod-listing-attribute-grid > .hint { grid-column: 1 / -1; }
.pod-listing-attribute-grid small { display: block; color: var(--muted); font-size: 11px; }
.pod-listing-warning {
  padding: 9px 10px;
  border: 1px solid #f2c4a7;
  border-radius: 8px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 12px;
}
.pod-listing-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.pod-listing-image-grid figure { display: grid; gap: 5px; margin: 0; }
.pod-listing-image-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f1f5f9;
}
.pod-listing-image-grid figcaption { color: var(--muted); font-size: 11px; text-align: center; }
.pod-shop-cell-lines { display: grid; gap: 3px; min-width: 160px; }
.pod-shop-listing-image {
  position: relative;
  display: block;
  width: 58px;
  height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #f1f5f9;
}
.pod-shop-listing-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pod-shop-listing-image span {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 1px 4px;
  border-radius: 6px 0 0 0;
  background: #0f172ae6;
  color: #fff;
  font-size: 10px;
}
.pod-shop-cell-lines span { overflow-wrap: anywhere; }


/* Platform image-search module */
.platform-search-workspace { display: grid; gap: 16px; align-items: start; }
.platform-search-view { display: none; }
.platform-search-view.active { display: block; }
.platform-search-view > * + * { margin-top: 16px; }
.platform-search-tabs { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
@media (max-width: 900px) {
  .platform-search-tabs { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
}


.platform-search-workspace > * + * { margin-top: 0; }

.panel.platform-search-workspace:not(.active) { display: none; }
.panel.platform-search-workspace.active { display: grid; }

/* POD batch design and listing batches */
.pod-batch-design-panel,
.pod-records-filter-panel,
.pod-image-storage-panel,
.pod-listing-batch-panel { margin-bottom: 14px; }
.pod-image-storage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.pod-image-storage-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.pod-image-storage-switch input { width: 18px; height: 18px; accent-color: var(--green); }
@media (max-width: 700px) {
  .pod-image-storage-switch { justify-content: space-between; }
}
.pod-batch-design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  align-items: end;
}

.pod-records-control-layout {
  display: grid;
  grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}
.pod-records-filter-card,
.pod-records-assign-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fbfcfa;
}
.pod-records-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
}
.pod-records-card-head svg {
  width: 15px;
  height: 15px;
  color: var(--green);
}
.pod-control-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}
.pod-control-field input,
.pod-control-field select {
  width: 100%;
  min-width: 0;
  background: #fff;
}
.pod-records-filter-card > .hint { margin: 10px 0 0; }
.pod-records-filter-grid { display: grid; gap: 10px; }
.pod-records-assign-form {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(240px, 1fr);
  gap: 10px;
}
.pod-records-shop-picker {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  overflow: hidden;
}
.pod-records-shop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  background: #f5f7f3;
}
.pod-records-shop-head > div:first-child { display: grid; gap: 1px; min-width: 0; }
.pod-records-shop-head strong { font-size: 13px; }
.pod-records-shop-actions { display: flex; gap: 6px; flex-shrink: 0; }
.pod-records-shop-actions button { min-height: 28px; padding: 0 9px; font-size: 12px; }
.pod-records-shop-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 8px;
  max-height: 225px;
  overflow: auto;
  padding: 8px;
}
.pod-record-shop-option {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.pod-record-shop-option:hover { border-color: #aeb9a5; background: #fbfef9; }
.pod-record-shop-option:has(input:checked) {
  border-color: rgba(34,118,74,.55);
  background: #f1f8f3;
  box-shadow: inset 0 0 0 1px rgba(34,118,74,.12);
}
.pod-record-shop-option input { width: 15px; height: 15px; margin: 0; accent-color: var(--green); }
.pod-record-shop-name { display: grid; gap: 1px; min-width: 0; }
.pod-record-shop-name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.pod-record-shop-name small { color: var(--muted); }
.pod-records-shop-empty {
  grid-column: 1 / -1;
  padding: 18px 12px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.pod-records-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}
.pod-records-action-buttons { display: flex; gap: 8px; flex-shrink: 0; }
.pod-record-platform-states { display: grid; gap: 4px; justify-items: start; }
.pod-listing-batch-details { display: grid; gap: 10px; margin-top: 10px; }
.pod-listing-batch-details .section-head { margin-bottom: 0; }
.pod-listing-batch-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.pod-listing-batch-pagination span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.pod-shop-orders-panel .stage-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.pod-shop-orders-panel .table-wrap { max-height: 70vh; overflow: auto; }
.pod-design-batch-progress-panel { margin-top: 14px; margin-bottom: 0; }
.pod-design-batch-progress-list { display: grid; gap: 10px; }
.pod-design-batch-progress-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.pod-design-batch-progress-card.active {
  border-color: rgba(34,118,74,.55);
  background: #f7fcf8;
  box-shadow: inset 0 0 0 1px rgba(34,118,74,.12);
}
.pod-design-batch-progress-card header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.pod-design-batch-progress-card header img,
.pod-design-batch-image-fallback {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: cover;
  background: #f3f6f1;
}
.pod-design-batch-image-fallback { display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.pod-design-batch-progress-card header > div { display: grid; gap: 2px; min-width: 0; }
.pod-design-batch-progress-card header strong {
  overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap;
}
.pod-design-batch-progress-card header small { color: var(--muted); }
.pod-design-batch-progress-meter {
  display: grid;
  grid-template-columns: minmax(120px, 220px) auto auto;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
}
.pod-design-batch-progress-meter strong { color: var(--text); font-size: 13px; }
.pod-design-batch-progress-meter small { color: var(--muted); }
.pod-design-batch-progress-card footer {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.pod-design-batch-template-states {
  display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 5px; min-width: 0;
}
.pod-design-batch-template-states span {
  max-width: 240px; overflow: hidden; padding: 3px 7px; border: 1px solid var(--line);
  border-radius: 99px; background: #f6f8f4; color: var(--muted);
  font-size: 11px; text-overflow: ellipsis; white-space: nowrap;
}
.pod-design-batch-template-states span.success { border-color: rgba(34,118,74,.32); background: #eef8f0; color: #1f6d41; }
.pod-design-batch-template-states span.pending { border-color: rgba(181,128,32,.30); background: #fff8e8; color: #8a5a10; }
.pod-design-batch-template-states span.failed,
.pod-design-batch-template-states span.missing { border-color: rgba(178,58,58,.28); background: #fff1f1; color: #a12f2f; }
.pod-design-batch-progress-card footer button { flex: 0 0 auto; }
.pod-design-batch-error { margin: 9px 0 0; color: #a12f2f; font-size: 12px; }
.pod-batch-progress {
  height: 7px; width: 150px; border-radius: 99px; background: #e5ece8; overflow: hidden;
}
.pod-batch-progress span { display: block; height: 100%; background: var(--green); }
@media (max-width: 1100px) {
  .pod-records-control-layout { grid-template-columns: 1fr; }
  .pod-design-batch-progress-card footer { align-items: stretch; flex-direction: column; }
  .pod-design-batch-progress-card footer button { width: 100%; }
}
@media (max-width: 680px) {
  .pod-records-assign-form, .pod-records-action-bar, .pod-records-action-buttons { grid-template-columns: 1fr; }
  .pod-records-action-bar { display: grid; }
  .pod-records-action-buttons { display: grid; }
  .pod-records-shop-head { align-items: flex-start; flex-direction: column; }
}
}
.pod-batch-design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  align-items: end;
}
.pod-batch-workbench {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.pod-batch-selector,
.pod-batch-editor,
.pod-batch-preview-wrap {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfa;
}
.pod-batch-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--text);
  font-size: 13px;
  font-weight: 780;
}
.pod-batch-panel-head svg { width: 15px; height: 15px; color: var(--green); }
.pod-batch-panel-head > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pod-batch-panel-head small { color: var(--muted); font-weight: 650; white-space: nowrap; }
.pod-batch-selector > input[type="search"] { width: 100%; margin-bottom: 8px; }
.pod-batch-asset-grid,
.pod-batch-template-grid {
  display: grid;
  gap: 7px;
  max-height: 345px;
  overflow: auto;
  padding-right: 2px;
}
.pod-batch-asset {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 5px 7px;
  align-items: center;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.pod-batch-asset.selected,
.pod-batch-template:has(input:checked) {
  border-color: rgba(34,118,74,.58);
  background: #f1f8f3;
  box-shadow: inset 0 0 0 1px rgba(34,118,74,.12);
}
.pod-batch-asset.active {
  border-color: rgba(34,118,74,.78);
  box-shadow: 0 0 0 3px rgba(34,118,74,.13);
}
.pod-batch-asset-select {
  display: grid;
  place-items: center;
}
.pod-batch-asset-select input { width: 15px; height: 15px; margin: 0; accent-color: var(--green); }
.pod-batch-asset-main {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 54px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.pod-batch-asset-main:hover .pod-batch-asset-meta strong { color: #1f6d41; }
.pod-batch-asset-main:disabled { cursor: not-allowed; opacity: .48; }
.pod-batch-asset-image {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 6px;
  background: #f1f5f2;
}
.pod-batch-asset-image img { width: 100%; height: 100%; object-fit: contain; }
.pod-batch-asset-meta,
.pod-batch-template > span { display: grid; gap: 2px; min-width: 0; }
.pod-batch-asset-meta strong,
.pod-batch-template strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.pod-batch-asset-meta small,
.pod-batch-template small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.pod-batch-asset-status {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding-top: 6px;
  border-top: 1px solid #e4ebe6;
}
.pod-batch-record-state {
  overflow: hidden;
  flex: 0 1 auto;
  min-width: 0;
  padding: 2px 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pod-batch-record-state.has-record {
  border-color: #bfdcc8;
  background: #edf8f0;
  color: #1f6d41;
}
.pod-batch-record-state.no-record {
  border-color: #e5d4ae;
  background: #fff8e8;
  color: #855109;
}
.pod-batch-asset-locate {
  flex: 0 0 auto;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid #bfd8f8;
  border-radius: 999px;
  background: #eff6ff;
  color: #20509e;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.3;
  cursor: pointer;
}
.pod-batch-asset-locate:hover { background: #dfeaff; }
.pod-batch-asset-status em {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: #f1f5f2;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}
.pod-batch-asset-status em.approved { background: #edf8f0; color: #1f6d41; }
.pod-batch-asset-status em.rejected { background: #faeceb; color: var(--red); }
.pod-library-card.located {
  outline: 2px solid #2b7fd4;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(43, 127, 212, 0.16);
}
.pod-batch-asset-pagination {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(86px, auto) auto;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}
.pod-batch-asset-pagination[hidden] { display: none; }
.pod-batch-asset-pagination button { min-height: 28px; padding: 0 8px; font-size: 12px; white-space: nowrap; }
.pod-batch-asset-pagination span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pod-batch-asset-pagination select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 28px;
}
.pod-batch-template-actions { display: flex; gap: 6px; margin-bottom: 8px; }
.pod-batch-template-actions button { min-height: 27px; padding: 0 8px; font-size: 12px; }
.pod-batch-template {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.pod-batch-template input { width: 15px; height: 15px; margin: 0; accent-color: var(--green); }
.pod-batch-slider-grid { display: grid; gap: 8px; }
.pod-batch-slider-grid label {
  display: grid;
  grid-template-columns: 68px 1fr 45px;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}
.pod-batch-slider-grid output { color: var(--text); text-align: right; font-size: 12px; }
.pod-batch-slider-grid input[type="range"] { width: 100%; margin: 0; accent-color: var(--green); }
.pod-batch-editor .pod-control-field { margin-bottom: 9px; }
.pod-batch-editor .pod-designer-check { margin: 10px 0; }
.pod-batch-editor-actions { display: grid; gap: 6px; }
.pod-batch-editor-actions button { min-height: 30px; font-size: 12px; }
.pod-batch-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.pod-batch-quick-actions button,
.pod-batch-editor-toolbar button {
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(34,118,74,.28);
  border-radius: 7px;
  background: #f7fbf7;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.pod-batch-quick-actions button:hover:not(:disabled),
.pod-batch-editor-toolbar button:hover {
  border-color: rgba(34,118,74,.58);
  background: #eef8ef;
  transform: translateY(-1px);
}
.pod-batch-quick-actions button:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.pod-batch-editor-toolbar { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.pod-batch-floating-adjuster {
  position: sticky;
  z-index: 42;
  bottom: 14px;
  margin-top: 14px;
  padding: 9px 10px;
  border-color: #cbdcd2;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 18px 44px rgb(17 36 25 / 18%);
  backdrop-filter: blur(10px);
}
.pod-batch-adjuster-main {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 10px;
}
.pod-batch-adjuster-identity {
  display: grid;
  flex: 1 1 230px;
  min-width: 0;
  gap: 2px;
  color: var(--text);
  font-size: 13px;
  font-weight: 780;
}
.pod-batch-adjuster-identity > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.pod-batch-adjuster-identity small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.pod-batch-compact-field {
  display: grid;
  flex: 0 1 210px;
  min-width: 0;
  gap: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.pod-batch-compact-field select {
  min-height: 30px;
}
.pod-batch-asset-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}
.pod-batch-asset-switch small {
  min-width: 38px;
  color: var(--muted);
  text-align: center;
  font-size: 11px;
  font-weight: 750;
}
.pod-batch-asset-switch button { min-height: 30px; padding: 0 9px; font-size: 12px; }
.pod-batch-adjuster-main .pod-batch-quick-actions {
  flex: 0 0 auto;
  grid-template-columns: repeat(5, minmax(0, auto));
}
.pod-batch-adjuster-main .pod-batch-quick-actions button { min-width: 42px; padding: 0 7px; }
.pod-batch-adjuster-toggle { min-height: 30px; white-space: nowrap; }
.pod-batch-adjuster-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 9px);
  display: grid;
  width: min(880px, calc(100vw - 44px));
  max-height: min(68vh, 560px);
  overflow: auto;
  gap: 11px;
  padding: 12px;
  border: 1px solid #cbdcd2;
  border-radius: 10px;
  background: rgb(255 255 255 / 98%);
  box-shadow: 0 20px 54px rgb(15 34 23 / 22%);
}
.pod-batch-adjuster-popover[hidden] { display: none !important; }
.pod-batch-adjuster-popover .pod-batch-slider-grid {
  grid-template-columns: repeat(3, minmax(190px, 1fr));
  gap: 10px;
}
.pod-batch-adjuster-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}
.pod-batch-adjuster-options .pod-designer-check { margin: 0; }
.pod-batch-adjuster-popover .pod-batch-editor-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}
@media (max-width: 1050px) {
  .pod-batch-workbench { grid-template-columns: 1fr; }
  .pod-batch-asset-grid,
  .pod-batch-template-grid { max-height: 320px; }
  .pod-batch-adjuster-popover .pod-batch-slider-grid,
  .pod-batch-adjuster-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pod-batch-adjuster-main { align-items: stretch; flex-direction: column; }
  .pod-batch-compact-field { flex: 1 1 auto; }
  .pod-batch-adjuster-main .pod-batch-quick-actions,
  .pod-batch-adjuster-popover .pod-batch-slider-grid,
  .pod-batch-adjuster-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pod-batch-adjuster-popover { right: 0; width: calc(100vw - 28px); }
  .pod-batch-submit-bar { grid-template-columns: 1fr; }
}
.pod-batch-preview-wrap { margin-top: 14px; }
.pod-batch-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  max-height: 620px;
  overflow: auto;
  padding-right: 2px;
}
.pod-batch-preview {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pod-batch-preview.active {
  border-color: rgba(34,118,74,.62);
  box-shadow: 0 0 0 2px rgba(34,118,74,.13);
}
.pod-batch-preview.active {
  border-color: rgba(34,118,74,.76);
  background: linear-gradient(180deg, #f7fdf7, #fff 42%);
  box-shadow: 0 0 0 3px rgba(34,118,74,.14), 0 12px 28px rgb(22 101 52 / 10%);
}
.pod-batch-active-badge {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: #22764a;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}
.pod-batch-preview-tools {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
}
.pod-batch-preview-tools button {
  min-height: 24px;
  padding: 0 7px;
  border: 1px solid rgba(34,118,74,.30);
  border-radius: 6px;
  background: #f6faf6;
  color: #1f5c3b;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.pod-batch-preview-tools button:hover { border-color: rgba(34,118,74,.65); background: #eaf7ec; }
.pod-batch-preview.disabled { opacity: .52; }
.pod-batch-preview header,
.pod-batch-preview footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
.pod-batch-preview header label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.pod-batch-preview header input { width: 13px; height: 13px; margin: 0; accent-color: var(--green); }
.pod-batch-preview header strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.pod-batch-preview canvas {
  width: 100%;
  max-width: 280px;
  aspect-ratio: auto;
  border: 1px solid #e2e8e0;
  border-radius: 7px;
  background: #f8faf8;
}
.pod-batch-preview canvas,
#podBatchDesignEditorCanvas {
  touch-action: none;
  user-select: none;
}
.pod-batch-preview canvas { cursor: grab; display: block; margin: 0 auto; }
.pod-batch-preview canvas.dragging,
#podBatchDesignEditorCanvas.dragging { cursor: grabbing; }
.pod-batch-editor-overlay { z-index: 105; }
.pod-batch-editor-dialog {
  display: grid;
  gap: 12px;
  width: min(960px, 96vw);
  max-height: 92vh;
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 28px 80px rgb(4 12 24 / 38%);
}
.pod-batch-editor-dialog .pod-process-head { align-items: flex-start; }
.pod-batch-editor-dialog .hint { margin: 4px 0 0; }
#podBatchDesignEditorCanvas {
  display: block;
  width: 100%;
  max-height: 64vh;
  object-fit: contain;
  border: 1px solid #dbe5dc;
  border-radius: 8px;
  background: #f7faf7;
  cursor: grab;
}
.pod-batch-editor-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  background: #f5f9f5;
  color: var(--muted);
  font-size: 12px;
}
.pod-batch-editor-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
@media (max-width: 720px) {
  .pod-batch-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pod-batch-editor-meta { align-items: flex-start; flex-direction: column; }
  .pod-batch-editor-dialog-actions { justify-content: stretch; }
  .pod-batch-editor-dialog-actions button { flex: 1; }
}
.pod-batch-preview footer span,
.pod-batch-preview footer small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.pod-batch-empty {
  grid-column: 1 / -1;
  padding: 18px 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.pod-batch-submit-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 130px auto;
  gap: 10px;
  align-items: end;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}
.pod-batch-live-progress {
  display: grid;
  grid-template-columns: minmax(180px, 360px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #cfe0d5;
  border-radius: 10px;
  background: linear-gradient(135deg, #f7fbf8, #f8faf8);
}
.pod-batch-live-progress-meter {
  height: 10px;
  overflow: hidden;
  border-radius: 99px;
  background: #e3ebe6;
  box-shadow: inset 0 1px 2px rgb(20 42 29 / 8%);
}
.pod-batch-live-progress-bar {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2f855a, var(--green));
  transition: width .25s ease, background .2s ease;
}
.pod-batch-live-progress-text {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.pod-batch-live-progress[data-state="completed"] { border-color: #bfdcc9; background: #f1faf4; }
.pod-batch-live-progress[data-state="completed"] .pod-batch-live-progress-bar { background: var(--green); }
.pod-batch-live-progress[data-state="warning"] { border-color: #eed8ae; background: #fff8ea; }
.pod-batch-live-progress[data-state="warning"] .pod-batch-live-progress-bar { background: linear-gradient(90deg, #d99a22, var(--amber)); }
.pod-batch-live-progress[data-state="error"] { border-color: #edc6c0; background: #fff2f0; }
.pod-batch-live-progress[data-state="error"] .pod-batch-live-progress-bar { background: var(--red); }
.pod-batch-live-progress[data-state="error"] .pod-batch-live-progress-text { color: var(--red); }
@media (max-width: 720px) {
  .pod-batch-live-progress { align-items: stretch; grid-template-columns: 1fr; }
}
.pod-shop-products-panel .section-head { align-items: flex-start; }
.pod-shop-products-filter-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}
.pod-shop-products-filter-summary .tag { color: var(--text); }
.pod-shop-products-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.pod-shop-products-stat-card {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
}
.pod-shop-products-stat-card span {
  color: var(--muted);
  font-size: 12px;
}
.pod-shop-products-stat-card strong {
  color: var(--text);
  font-size: 20px;
}
.pod-shop-products-stat-card small {
  color: var(--muted);
  font-size: 11px;
}
@media (max-width: 1100px) {
  .pod-shop-products-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .pod-shop-products-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pod-shop-products-filter-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.3fr) minmax(120px, .6fr) minmax(220px, 1.2fr) minmax(110px, .55fr) auto auto auto;
  gap: 10px;
  align-items: end;
}
.pod-shop-products-shop-stats {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: linear-gradient(135deg, #f8fbff, #f8fafc);
}
.pod-shop-products-shop-stats[hidden] { display: none; }
.pod-shop-products-shop-stats-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pod-shop-products-shop-stats-table {
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.pod-shop-products-shop-stats-table table { margin: 0; }
.pod-shop-products-shop-stats-table td small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}
.pod-shop-products-pagination { margin-top: 12px; align-items: center; }
.pod-shop-products-filter-grid .primary { min-height: 38px; white-space: nowrap; }
.pod-shop-products-filter-grid .secondary { min-height: 38px; white-space: nowrap; }
.pod-shop-products-queue {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: linear-gradient(135deg, #f8fbff, #f8fafc);
}

.pod-shop-products-queue-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pod-shop-products-queue-head strong {
  display: block;
  font-size: 14px;
  color: #0f172a;
}

.pod-shop-products-queue-head span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.pod-shop-products-queue-summary {
  display: grid;
  gap: 6px;
}

.pod-shop-products-queue-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.pod-shop-products-queue-summary strong {
  color: #0f172a;
  font-size: 13px;
}

.pod-shop-products-queue-summary span {
  color: var(--muted);
  font-size: 12px;
}

.pod-shop-products-queue-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #dbeafe;
}

.pod-shop-products-queue-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #16a34a);
  transition: width .3s ease;
}

.pod-shop-products-queue-item-list {
  display: grid;
  gap: 6px;
  max-height: 250px;
  overflow: auto;
  padding-right: 2px;
}

.pod-shop-products-queue-item {
  display: grid;
  grid-template-columns: 72px minmax(160px, 1fr) auto minmax(120px, 1.4fr);
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #fff;
  font-size: 12px;
}

.pod-shop-products-queue-item strong {
  overflow-wrap: anywhere;
}

.pod-shop-products-queue-item small,
.pod-shop-products-queue-item em {
  color: var(--muted);
  font-style: normal;
}

.pod-shop-products-queue-item em {
  color: #b91c1c;
  overflow-wrap: anywhere;
}

.pod-shop-queue-status,
.pod-shop-queue-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.pod-shop-queue-status { min-width: 62px; padding: 3px 7px; }
.pod-shop-queue-tag.queued,
.pod-shop-queue-status.queued { color: #1e40af; background: #dbeafe; }
.pod-shop-queue-tag.processing,
.pod-shop-queue-status.processing { color: #92400e; background: #fef3c7; }
.pod-shop-queue-tag.completed,
.pod-shop-queue-status.completed { color: #166534; background: #dcfce7; }
.pod-shop-queue-tag.warning,
.pod-shop-queue-status.warning { color: #92400e; background: #ffedd5; }
.pod-shop-queue-tag.failed,
.pod-shop-queue-status.failed { color: #991b1b; background: #fee2e2; }

.pod-shop-products-queue-history {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.pod-shop-products-queue-history button {
  min-height: 30px;
  padding: 0 9px;
  font-size: 12px;
}

.pod-shop-products-queue .hint,
.pod-shop-products-queue .error-text {
  margin: 0;
  font-size: 12px;
}

.pod-shop-products-queue .error-text { color: #b91c1c; }

.pod-shop-products-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #bbddd0;
  border-radius: 9px;
  background: #f2faf6;
}
.pod-shop-products-bulk-bar > div:first-child {
  display: grid;
  gap: 2px;
  margin-right: auto;
}
.pod-shop-products-bulk-bar strong { font-size: 13px; }
.pod-shop-products-bulk-bar span { color: var(--muted); font-size: 12px; }
.pod-shop-products-bulk-bar label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}
.pod-shop-products-bulk-bar input {
  width: 108px;
  min-height: 34px;
}
.pod-shop-products-bulk-bar #podShopProductsStockFilter.active {
  border-color: var(--green);
  color: var(--green-dark);
  background: #dcfce7;
}
.pod-shop-products-table { overflow-x: auto; margin-top: 12px; }
.pod-shop-products-data-table { width: 100%; min-width: 1280px; border-collapse: collapse; background: var(--surface); }
.pod-shop-products-data-table th,
.pod-shop-products-data-table td {
  padding: 9px 10px;
  border: 1px solid var(--line);
  font-size: 12px;
  text-align: left;
  vertical-align: middle;
}
.pod-shop-products-data-table th { position: sticky; top: 0; z-index: 1; background: #f1f5f9; color: #475569; }
.pod-shop-products-data-table td.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.pod-shop-products-data-table td.numeric small { display: block; color: var(--muted); font-size: 10px; }
.pod-shop-products-image-cell { width: 64px; }
.pod-shop-products-image-cell img,
.pod-shop-products-image-empty {
  display: block;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 6px;
  object-fit: cover;
  background: #f8fafc;
}
.pod-shop-products-image-empty { color: var(--muted); font-size: 10px; line-height: 46px; text-align: center; }
.pod-shop-products-title-cell { min-width: 250px; max-width: 360px; }
.pod-shop-products-title-cell strong,
.pod-shop-products-title-cell span { display: block; overflow-wrap: anywhere; }
.pod-shop-products-title-cell span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.pod-shop-products-row-actions { display: flex; align-items: center; gap: 6px; }
.pod-shop-products-row-actions button { min-height: 28px; padding: 0 8px; font-size: 12px; }
.pod-shop-products-row-actions a { color: #1d4ed8; font-size: 12px; font-weight: 650; }
.pod-shop-products-price-input,
.pod-shop-products-stock-input { width: 96px; min-height: 31px; }
#podShopProductsStatus.error { color: #dc2626; }

@media (max-width: 1400px) {
  .pod-shop-products-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pod-shop-products-filter-grid { grid-template-columns: 1fr; }
  .pod-shop-products-bulk-bar { align-items: stretch; }
  .pod-shop-products-bulk-bar > div:first-child { margin-right: 0; }
  .pod-shop-products-bulk-bar button,
  .pod-shop-products-bulk-bar label { width: 100%; }
  .pod-shop-products-bulk-bar input { width: 100%; }
}

@media (max-width: 900px) {
  .pod-shop-products-queue-head,
  .pod-shop-products-queue-summary > div {
    align-items: flex-start;
    flex-direction: column;
  }

  .pod-shop-products-queue-item {
    grid-template-columns: 72px 1fr;
  }

  .pod-shop-products-queue-item small,
  .pod-shop-products-queue-item em {
    grid-column: 1 / -1;
  }
}

.pod-template-size-derivation {
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}

/* POD print library groups */
.pod-library-group-bar {
  display: grid;
  grid-template-columns: minmax(175px, 205px) minmax(225px, 275px) minmax(190px, 250fr) auto minmax(145px, 1fr);
  gap: 10px;
  align-items: end;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
}
.pod-library-group-bar > label,
.pod-library-filter-group label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.pod-library-filter-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(105px, 1fr));
  gap: 8px;
  min-width: 0;
  padding-bottom: 0;
}
.pod-library-group-bar select,
.pod-library-group-bar input {
  width: 100%;
  min-height: 34px;
}
.pod-library-group-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.pod-library-group-actions button { min-height: 34px; white-space: nowrap; }
.pod-library-group-bar > .hint {
  padding-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
}
.pod-library-tag.group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  color: #1e3a8a;
  background: #eff6ff;
}
.pod-library-tag.group svg { width: 11px; height: 11px; flex: 0 0 auto; }
.pod-library-tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin: -2px -3px -2px 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #1d4ed8;
  font-size: 13px;
  line-height: 1;
  background: rgb(255 255 255 / 72%);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.pod-library-tag-remove:hover,
.pod-library-tag-remove:focus-visible {
  color: #b91c1c;
  background: #fff;
  outline: 2px solid #bfdbfe;
}
.pod-print-group-manager-modal {
  width: min(720px, 100%);
  max-height: min(82vh, 760px);
  overflow: hidden;
}
.pod-print-group-manager-modal > p { color: var(--muted); font-size: 12px; }
.pod-print-group-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
}
.pod-print-group-create > label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.pod-print-group-create input {
  width: 100%;
  min-height: 34px;
}
.pod-print-group-list {
  display: grid;
  gap: 8px;
  overflow-y: auto;
  padding-right: 2px;
}
.pod-print-group-row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 58px auto;
  gap: 8px;
  align-items: end;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.pod-print-group-row > label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.pod-print-group-input { width: 100%; min-height: 34px; }
.pod-print-group-count {
  padding-bottom: 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.pod-print-group-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pod-print-group-actions button { min-height: 34px; white-space: nowrap; }
@media (max-width: 620px) {
  .pod-print-group-create,
  .pod-print-group-row { grid-template-columns: 1fr; }
  .pod-print-group-count { padding-bottom: 0; }
  .pod-print-group-actions button { flex: 1 1 calc(50% - 6px); }
}
@media (max-width: 900px) {
  .pod-library-group-bar { grid-template-columns: 1fr 1fr; }
  .pod-library-group-actions { justify-content: flex-start; }
  .pod-library-group-bar > .hint { grid-column: 1 / -1; padding-bottom: 0; }
}
@media (max-width: 620px) {
  .pod-library-group-bar { grid-template-columns: 1fr; }
}

.pod-designer-asset-filter {
  display: grid;
  gap: 5px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.pod-designer-asset-filter select { width: 100%; min-height: 32px; }
.pod-designer-asset-grid > .hint { grid-column: 1 / -1; margin: 0; }

.pod-batch-asset-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 8px;
}
#podBatchDesignAssetRecordFilter,
#podBatchDesignAssetSearch {
  grid-column: 1 / -1;
}
.pod-batch-asset-filters select,
.pod-batch-asset-filters input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 32px;
  margin: 0;
}
#podBatchDesignAssetRecordFilter {
  border-color: rgba(34, 118, 74, .34);
  background-color: #f1f8f3;
  color: #1f6d41;
  font-weight: 700;
}
@media (max-width: 900px) {
  .pod-batch-asset-filters { grid-template-columns: 1fr; }
}

.pod-task-item-time {
  color: #6b7662;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pod-batch-activity {
  display: grid;
  gap: 6px;
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--muted, #f6f7f9);
  font-size: 12px;
  line-height: 1.5;
}

.pod-batch-activity strong {
  margin-right: 4px;
}