/* Release 15.23 — rows 23/24 (menu typography, sticky menu) and the compact header (space fill). */
@media (min-width: 901px) {
  .app-shell > .sidebar { position: sticky; top: 0; align-self: start; height: 100vh; max-height: 100vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
.sidebar { gap: 14px; }
.sidebar .nav-btn, .sidebar a.nav-btn { font-size: 13px; line-height: 1.25; padding: 7px 10px; letter-spacing: 0.005em; font-weight: 500; }
.sidebar .nav-section, .sidebar .nav-group-title, .sidebar .nav-label { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.sidebar .brand-title { font-size: 13px; line-height: 1.2; }
.sidebar .brand-sub { font-size: 11px; }
.sidebar nav, .sidebar .nav { gap: 2px; }
.processing-topbar { padding-top: 10px !important; padding-bottom: 8px !important; min-height: 0 !important; align-items: center; }
.processing-topbar h1 { font-size: 22px; line-height: 1.15; margin: 0; }
.processing-topbar .eyebrow { font-size: 10.5px; margin-bottom: 2px; }
.processing-topbar p.muted { font-size: 12.5px; margin: 2px 0 0; max-width: 72ch; }
.processing-main.flow-page { padding-top: 8px; }
.flow-section > summary { padding-top: 10px; padding-bottom: 10px; }

/* Release 15.23m — full-width workspace, no overlap, draggable splitters. */
.proc3-grid {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-width: 0;
  margin-top: 8px;
  --proc3-sku: 240px;
  --proc3-preview: 320px;
}
.proc3-skus { flex: 0 0 var(--proc3-sku); width: var(--proc3-sku); min-width: 0; }
.proc3-main { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: visible; }
.proc3-preview { flex: 0 0 var(--proc3-preview); width: var(--proc3-preview); min-width: 0; z-index: auto; }
.proc3-split {
  flex: 0 0 8px;
  width: 8px;
  cursor: col-resize;
  position: relative;
  z-index: 2;
  touch-action: none;
  background: transparent;
  align-self: stretch;
}
.proc3-split::before {
  content: "";
  position: absolute;
  top: 12px; bottom: 12px; left: 3px;
  width: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.16);
}
.proc3-split:hover::before, .proc3-split:focus-visible::before, .proc3-grid.is-resizing .proc3-split::before {
  background: var(--accent, #2f9e77);
}
.proc3-split:focus-visible { outline: 2px solid var(--accent, #2f9e77); outline-offset: -2px; }
.proc3-preview-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.proc3-collapse-btn { min-height: 28px !important; padding: 0 10px !important; font-size: 12px !important; }
.proc3-skus, .proc3-preview { position: sticky; top: 12px; max-height: calc(100vh - 24px); display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line, rgba(255,255,255,.08)); border-radius: 12px; padding: 10px; background: rgba(15,20,18,.96); min-width: 0; box-sizing: border-box; }
.proc3-grid.is-stacked { flex-wrap: wrap; }
.proc3-grid.is-stacked .proc3-split-preview { display: none; }
.proc3-grid.is-stacked .proc3-preview {
  flex: 1 1 100%;
  width: 100%;
  max-width: none;
  position: static;
  max-height: none;
  margin-top: 12px;
}
.proc3-grid.is-preview-collapsed:not(.is-stacked) .proc3-preview {
  flex-basis: 48px;
  width: 48px;
  overflow: hidden;
  padding: 8px 6px;
}
.proc3-grid.is-preview-collapsed:not(.is-stacked) .proc3-preview-stage,
.proc3-grid.is-preview-collapsed:not(.is-stacked) #procPreviewTag,
.proc3-grid.is-preview-collapsed:not(.is-stacked) .seg { display: none; }
.proc3-grid.is-preview-collapsed:not(.is-stacked) .proc3-pane-head { flex-direction: column; align-items: stretch; }
.proc3-grid.is-preview-collapsed:not(.is-stacked) #procPreviewSku {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  max-height: 40vh;
}
.proc3-grid.is-preview-collapsed.is-stacked .proc3-preview-stage,
.proc3-grid.is-preview-collapsed.is-stacked #procPreviewTag { display: none; }
.proc3-grid.is-stacked .proc3-skus { position: sticky; }
.proc3-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.proc3-pane-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#procSkuFind { width: 100%; font-size: 13px; padding: 6px 8px; }
.proc3-sku-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; display: grid; gap: 2px; align-content: start; }
.proc3-sku-list li[data-sku] { display: grid; gap: 1px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 12.5px; border: 1px solid transparent; }
.proc3-sku-list li[data-sku] small { color: var(--muted, #8a948f); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proc3-sku-list li[data-sku]:hover { background: rgba(255,255,255,.04); }
.proc3-sku-list li[aria-selected="true"] { background: rgba(47,158,119,.14); border-color: rgba(47,158,119,.45); }
.proc3-sku-list li:focus-visible { outline: 2px solid var(--accent, #2f9e77); outline-offset: 1px; }
.seg { display: inline-flex; border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 999px; padding: 2px; }
.seg button { border: 0; background: transparent; color: var(--muted, #8a948f); font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--accent, #2f9e77); color: #fff; }
.proc3-preview-stage { overflow-y: auto; display: grid; gap: 10px; align-content: start; }
.pv-card { margin: 0; display: grid; gap: 4px; }
.pv-card img, .pv-card video { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 8px; display: block; }
.pv-img { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; width: 100%; }
.pv-p3d iframe { width: 100%; aspect-ratio: 1; border: 0; border-radius: 8px; background: #fff; }
.pv-file span { display: grid; place-items: center; aspect-ratio: 2; border-radius: 8px; background: rgba(255,255,255,.05); font-weight: 600; }
.pv-card figcaption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted, #8a948f); }
.pv-skel { aspect-ratio: 1; border-radius: 8px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04)); background-size: 200% 100%; animation: pvsk 1.2s infinite; }
@keyframes pvsk { to { background-position: -200% 0; } }
.run-pair { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.run-pair .primary-btn, .run-pair .ghost-btn { margin: 0; }
.scope-note { font-size: 12.5px; margin: 6px 0 0; }
.link-btn { background: none; border: 0; color: var(--accent, #2f9e77); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }
.fill-adjust { display: grid; grid-template-columns: 1fr 80px auto; gap: 8px; align-items: end; }
.img-adjust-table { display: grid; gap: 6px; overflow-x: auto; }
.img-adjust-head, .img-adjust-row { display: grid; grid-template-columns: 70px repeat(2, minmax(110px, 1.4fr)) repeat(6, minmax(64px, 1fr)); gap: 6px; align-items: center; min-width: 760px; }
.img-adjust-head span { font-size: 11px; color: var(--muted, #8a948f); }
.img-adjust-row input { width: 100%; font-size: 12.5px; padding: 5px 6px; }
@media (max-width: 760px) { .proc3-skus { position: static; max-height: 240px; } }
.proc3-main .tool-pane, .proc3-main details, .proc3-main .option-grid, .proc3-main .map-row, .proc3-main .slot-list { min-width: 0; max-width: 100%; }
#imgAdjust { overflow: hidden; }
.img-adjust-table { max-width: 100%; padding-bottom: 4px; }
.img-adjust-row input { background: rgba(255,255,255,.03); color: inherit; border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 6px; }
.proc3-main { container-type: inline-size; container-name: proc3main; }
@container proc3main (max-width: 900px) {
  .studio-split { grid-template-columns: 1fr; }
}

/* Release 15.23c (row 23): type hierarchy, control sizing and alignment across the tool panes. */
.tool-pane.active{gap:14px}
.tool-pane > .tool-lead{font-size:13.5px;line-height:1.5;opacity:.9;max-width:78ch}
.tool-pane .option-grid{gap:12px 16px;align-items:end}
.tool-pane .field > span{display:block;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;margin-bottom:4px}
.tool-pane .field input:not([type=checkbox]):not([type=radio]):not([type=file]),
.tool-pane .field select{min-height:38px;font-size:14px;border-radius:8px}
.tool-pane .field textarea{font-size:14px;line-height:1.45;border-radius:8px}
.tool-pane .check{align-items:center;font-size:13.5px;min-height:28px}
.tool-pane .check input{margin-top:0;width:16px;height:16px;flex:0 0 16px}
.tool-pane .check small{display:inline;font-size:12px}
.tool-pane .studio-title{font-size:13px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;opacity:.85;margin:6px 0 4px}
.tool-pane .ghost-btn,.tool-pane .primary-btn{min-height:38px;padding:0 16px;font-size:14px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.tool-pane .decision-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tool-pane .decision-row select{min-height:38px;border-radius:8px}
.tool-pane > .primary-btn,.tool-pane > .run-pair{justify-self:start}
.tool-pane .studio-details > summary{font-size:13.5px;font-weight:600;cursor:pointer;padding:6px 0}
.tool-pane .muted.small,.tool-pane p.small{font-size:12.5px}
.r23-note{margin:0;padding:10px 12px;border-radius:8px;background:rgba(232,176,62,.12);border:1px solid rgba(232,176,62,.45);font-size:13px;line-height:1.45}
.r23-bulk{border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px 14px}
.r23-bulk > summary{font-weight:600;font-size:14px;cursor:pointer}
.r23-steps{margin:10px 0;padding-left:20px;font-size:13px;line-height:1.6}
.r23-bulk-pick{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.r23-bad{color:#f19a8e}
.r23-bulk-table{max-height:320px;overflow:auto;margin:8px 0;border-radius:8px;border:1px solid rgba(255,255,255,.1)}
.r23-bulk-table table{width:100%;border-collapse:collapse;font-size:12.5px}
.r23-bulk-table th,.r23-bulk-table td{padding:6px 8px;text-align:left;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:top}
.r23-bulk-table thead th{position:sticky;top:0;background:#1d2a24;font-weight:600}
.r23-bulk-table tr.bad td:last-child{color:#f19a8e}
.r23-bulk-table tr.ok td:last-child{color:#7fd6ae}

/* Release 15.23f: IMG Creator Pairing Feature */
.pair-wrap { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2.2fr); gap: 16px; margin: 10px 0; }
[data-tool-pane="img"] { container-type: inline-size; }
@container (max-width: 980px) { .pair-wrap { grid-template-columns: 1fr; } .pair-table { max-height: 220px; } }
.pair-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.pair-list, .pair-feature { border: 1px solid var(--line, #e5e7eb); border-radius: 12px; padding: 10px; background: var(--card, #fff); min-width: 0; }
.pair-table { max-height: 640px; overflow: auto; }
.pair-row { display: grid; grid-template-columns: minmax(70px,1fr) minmax(90px,1.4fr) minmax(80px,1fr) minmax(110px,1.2fr); gap: 6px; width: 100%; text-align: left; padding: 7px 8px; border: 0; border-bottom: 1px solid var(--line, #eef0f3); background: transparent; font: inherit; font-size: 13px; cursor: pointer; align-items: center; }
.pair-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pair-row:hover { background: rgba(37, 99, 235, .06); }
.pair-row.on { background: rgba(37, 99, 235, .12); box-shadow: inset 3px 0 0 #2563eb; }
.pair-row-head { font-weight: 600; cursor: default; position: sticky; top: 0; background: var(--card, #fff); z-index: 1; }
.pair-row-head:hover { background: var(--card, #fff); }
.pair-badge { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: #fef3c7; color: #92400e; margin-left: 4px; }
.pair-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.pair-card { margin: 0; border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px; background: #fafafa; color: #111827; }
.pair-card .muted { color: #6b7280; }
.pair-step input { background: #fff; color: #111827; border: 1px solid #d1d5db; border-radius: 6px; }
.pair-step .ghost-btn.sm { background: #fff; color: #111827; border: 1px solid #d1d5db; }
.pair-card figcaption { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.pair-card canvas { width: 100%; height: auto; aspect-ratio: 1 / 1; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; display: block; }
.pair-note { min-height: 16px; color: #b45309; margin: 4px 0; }
.pair-ctl { display: grid; gap: 6px; }
.pair-step { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; min-width: 0; }
.pair-card { min-width: 0; overflow: hidden; }
.pair-step > span:first-child { flex: 1 0 100%; font-weight: 600; font-size: 12px; }
.pair-step input { width: 56px; text-align: center; padding: 3px 2px; }
.pair-step .ghost-btn.sm { width: 30px; padding: 2px 0; }
.pair-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.pair-actions button { width: auto; }
.pair-options { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 6px; }