@layer views {
  .art-prep-word-dialog { width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px; border: 1px solid #d7e2db; border-radius: 16px; color: #273b31; }
  .art-prep-word-dialog::backdrop { background: #172a2366; }
  .art-prep-word-dialog header, .art-prep-word-dialog footer, .art-prep-word-source { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
  .art-prep-word-dialog h2 { margin: 0; font-size: 21px; }
  .art-prep-word-dialog header button { border: 0; background: transparent; font-size: 26px; cursor: pointer; }
  .art-prep-word-dialog p { color: #63746a; font-size: 13px; line-height: 1.6; }
  .art-prep-word-dialog label { display: grid; gap: 8px; margin: 16px 0; }
  .art-prep-word-dialog textarea, .art-prep-word-dialog select { width: 100%; min-width: 0; box-sizing: border-box; }
  .art-prep-word-source { flex-wrap: wrap; }
  .art-prep-word-source strong { overflow-wrap: anywhere; min-width: 0; }
  .art-prep-word-dialog footer { justify-content: flex-end; }

  .art-prep-note-block { min-width: 0; padding: 16px; border: 1px solid var(--border, #dfe5df); border-radius: 12px; background: #fff; }
  .art-prep-note-block > label { display: grid; gap: 8px; }
  .art-prep-note-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin: 12px 0; }
  .art-prep-note-gallery:empty { display: none; }
  .art-prep-note-gallery figure { position: relative; min-width: 0; margin: 0; }
  .art-prep-note-gallery a { display: block; background: #f4f6f3; border-radius: 8px; overflow: hidden; }
  .art-prep-note-gallery img { display: block; width: 100%; height: 140px; object-fit: contain; }
  .art-prep-note-gallery figcaption { padding-top: 5px; color: #657268; font-size: 12px; }
  .art-prep-note-gallery button { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border: 1px solid #dfe5df; border-radius: 50%; background: white; cursor: pointer; }
  .art-prep-note-hint { display: block; margin-top: 8px; color: #657268; font-size: 12px; line-height: 1.6; }
  .art-prep-note-block [data-art-prep-note-images] { margin-top: 10px; }

  .art-prep-screen[hidden] {
    display: none;
  }

  .art-prep-screen {
    position: fixed;
    inset: 0;
    z-index: 60;
    overflow-y: auto;
    background: var(--paper);
  }


  .art-prep-topbar {
    position: sticky;
    top: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 58px;
    align-items: center;
    gap: 12px;
    padding: 9px max(18px, calc((100vw - 1440px) / 2));
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.97);
  }

  .art-prep-topbar .icon-button {
    width: 38px;
    height: 38px;
    font-size: 26px;
  }

  .art-prep-topbar-title {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 10px;
    font-weight: 900;
  }

  .art-prep-topbar-title small {
    color: var(--muted);
    font-weight: 700;
  }

  .art-prep-topbar-actions {
    display: flex;
    gap: 7px;
  }

  .art-prep-page {
    width: min(1440px, 100%);
    margin: 0 auto;
    padding: 22px 24px 48px;
  }

  .art-prep-product-head {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
  }

  .art-prep-product-head img {
    width: 84px;
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: 8px;
    object-fit: cover;
  }

  .art-prep-product-head h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1.18;
  }

  .art-prep-workflow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 16px 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--line);
  }

  .art-prep-workflow button {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 10px 14px;
    border: 0;
    background: #ffffff;
    color: var(--muted);
    text-align: left;
    cursor: pointer;
  }

  .art-prep-workflow i {
    display: grid;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid #cad4cf;
    border-radius: 50%;
    font-style: normal;
    font-weight: 850;
  }

  .art-prep-workflow span,
  .art-prep-workflow strong,
  .art-prep-workflow small {
    display: block;
  }

  .art-prep-workflow strong {
    color: var(--ink);
  }

  .art-prep-workflow small {
    margin-top: 2px;
    font-size: 12px;
  }

  .art-prep-workflow button.active {
    background: #eef7f2;
    color: var(--green-dark);
  }

  .art-prep-workflow button.active i,
  .art-prep-workflow button.complete i {
    border-color: var(--green);
    background: var(--green);
    color: #ffffff;
  }

  .art-prep-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
  }

  .art-prep-meta span {
    padding: 5px 9px;
    border-radius: 999px;
    background: #eaf4ef;
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 850;
  }

  .art-prep-save-state {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
    transition: color 160ms ease;
  }

  .art-prep-save-state[data-tone="saved"] { color: var(--green-dark); }
  .art-prep-save-state[data-tone="pending"] { color: #6f725e; }
  .art-prep-save-state[data-tone="warning"] { color: #8a651b; }
  .art-prep-save-state[data-tone="conflict"] { color: #9b3f35; }

  .art-prep-photo-band {
    display: grid;
    gap: 12px;
    margin-bottom: 17px;
    padding: 18px;
    border: 1px solid #cde0d6;
    border-left: 5px solid var(--green);
    border-radius: 8px;
    background: #f8fcfa;
  }

  .art-prep-photo-band-head,
  .art-prep-photo-overview,
  .art-prep-directory-field > div:first-child,
  .art-prep-directory-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .art-prep-photo-band-head > div {
    display: grid;
    gap: 1px;
  }

  .art-prep-photo-band-head span {
    color: var(--green-dark);
    font-size: 11px;
    font-weight: 850;
  }

  .art-prep-photo-band-head h2 {
    margin: 0;
    font-size: 19px;
  }

  .art-prep-photo-overview {
    align-items: end;
    padding-bottom: 12px;
    border-bottom: 1px solid #dbe8e1;
  }

  .art-prep-photo-overview .art-prep-photo-state {
    width: min(280px, 100%);
  }

  .art-prep-photo-overview > p {
    flex: 1;
    margin: 0 0 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-align: right;
  }

  .art-prep-directory-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .art-prep-directory-field {
    display: grid;
    gap: 9px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #d6e2dc;
    border-radius: 7px;
    background: #ffffff;
  }

  .art-prep-output-directory {
    grid-column: 1 / -1;
  }

  .art-prep-directory-field strong {
    color: var(--ink);
    font-size: 14px;
  }

  .art-prep-directory-field span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
  }

  .art-prep-directory-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
  }

  .art-prep-directory-input input {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .art-prep-directory-input button {
    min-width: 58px;
    border: 1px solid #b9d0c4;
    border-radius: 6px;
    background: #eff7f2;
    color: var(--green-dark);
    font-size: 13px;
    font-weight: 850;
  }

  .art-prep-directory-input button:hover {
    border-color: var(--green);
    background: #e4f2e9;
  }

  .art-task-manage {
    display: grid;
    gap: 12px;
    margin-bottom: 17px;
    padding: 15px;
    border: 1px solid #cbd9e8;
    border-left: 5px solid #4778ae;
    border-radius: 8px;
    background: #f7faff;
  }

  .art-task-manage-head,
  .art-task-card-title,
  .art-task-card-actions,
  .art-task-link,
  .art-task-publish-actions {
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .art-task-manage-head {
    justify-content: space-between;
  }

  .art-task-manage h2 {
    margin: 1px 0 2px;
    font-size: 18px;
  }

  .art-task-manage-head span,
  .art-task-card p,
  .art-task-card-meta,
  .art-task-empty {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
  }

  .art-task-publish-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid #dce6f1;
  }

  .art-task-publish-form[hidden],
  .art-task-link[hidden] {
    display: none;
  }

  .art-task-publish-form label {
    display: grid;
    gap: 6px;
    color: #555e66;
    font-size: 12px;
    font-weight: 800;
  }

  .art-task-publish-form .wide {
    grid-column: 1 / -1;
  }

  .art-task-publish-form input,
  .art-task-publish-form select,
  .art-task-publish-form textarea,
  .art-task-link input {
    width: 100%;
    min-width: 0;
    border: 1px solid #d5dce1;
    border-radius: 7px;
    background: #ffffff;
    color: var(--ink);
    padding: 9px 10px;
  }

  .art-task-publish-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .art-task-link {
    padding: 9px;
    border: 1px solid #b8d2c3;
    border-radius: 7px;
    background: #f8fffa;
  }

  .art-task-link input {
    flex: 1;
    color: var(--green-dark);
    font-size: 12px;
  }

  .art-task-list {
    display: grid;
    gap: 8px;
  }

  .art-task-card {
    display: grid;
    gap: 7px;
    padding: 12px;
    border: 1px solid #dbe2e8;
    border-radius: 7px;
    background: #ffffff;
  }

  .art-task-card-title {
    justify-content: space-between;
  }

  .art-task-card-title strong {
    font-size: 14px;
  }

  .art-task-card p,
  .art-task-empty {
    margin: 0;
  }

  .art-task-card-meta {
    display: flex;
    gap: 16px;
  }

  .art-task-card-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 7px;
    align-items: stretch;
  }

  .art-task-card-primary > a,
  .art-task-card-primary > button {
    display: inline-flex;
    width: 100%;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }

  .art-task-more {
    position: relative;
  }

  .art-task-more > summary {
    display: grid;
    width: 42px;
    min-height: 38px;
    place-items: center;
    border: 1px solid #ced9d3;
    border-radius: 7px;
    background: #f5faf7;
    color: #23684a;
    cursor: pointer;
    font-size: 21px;
    line-height: 1;
    list-style: none;
  }

  .art-task-more > summary::-webkit-details-marker {
    display: none;
  }

  .art-task-more > div {
    position: absolute;
    z-index: 8;
    right: 0;
    bottom: calc(100% + 6px);
    display: grid;
    min-width: 150px;
    overflow: hidden;
    border: 1px solid #d5ded9;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(31, 54, 43, .14);
  }

  .art-task-more a,
  .art-task-more button {
    display: flex;
    min-height: 38px;
    align-items: center;
    border: 0;
    border-bottom: 1px solid #edf0ee;
    padding: 0 12px;
    background: #fff;
    color: #35433c;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  .art-task-more a:last-child,
  .art-task-more button:last-child {
    border-bottom: 0;
  }

  .art-task-more button.danger {
    color: #a44838;
  }

  .art-task-status {
    border-radius: 999px;
    padding: 3px 7px;
    background: #eef1f3;
    color: #5f6970;
    font-size: 11px;
    font-weight: 850;
  }

  .art-task-status.status-submitted,
  .art-task-status.status-completed {
    background: #e7f5ed;
    color: #23714f;
  }

  .art-task-status.status-changes_requested,
  .art-task-status.status-void {
    background: #fff0ed;
    color: #a64c3c;
  }

  .art-prep-photo-band label,
  .art-prep-field-grid label {
    display: grid;
    gap: 6px;
    color: #555e66;
    font-size: 13px;
    font-weight: 800;
  }

  .art-prep-photo-band input,
  .art-prep-photo-band select,
  .art-prep-field-grid input,
  .art-prep-field-grid textarea,
  .art-prep-repeat-row input,
  .art-prep-repeat-row textarea {
    width: 100%;
    border: 1px solid #d5dce1;
    border-radius: 7px;
    background: #ffffff;
    color: var(--ink);
    padding: 10px 11px;
    font-size: 14px;
    line-height: 1.45;
  }

  .art-prep-photo-band input,
  .art-prep-photo-band select,
  .art-prep-field-grid input,
  .art-prep-repeat-row input {
    min-height: 42px;
  }

  .art-prep-photo-state {
    align-content: start;
  }

  .art-prep-photo-state small {
    color: var(--muted);
    font-weight: 500;
  }

  .art-prep-confirm input {
    width: 18px;
    min-height: 18px;
    accent-color: var(--green);
  }

  .art-prep-photo-tools {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .art-prep-directory-modal {
    z-index: 82;
  }

  .art-prep-directory-panel {
    width: min(760px, calc(100vw - 28px));
    max-height: min(760px, calc(100vh - 36px));
  }

  .art-prep-directory-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }

  .art-prep-directory-breadcrumbs button {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 0 7px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 800;
  }

  .art-prep-directory-breadcrumbs button:hover:not(:disabled) {
    background: #edf5f0;
  }

  .art-prep-directory-breadcrumbs button:disabled {
    color: var(--muted);
  }

  .art-prep-directory-breadcrumbs span {
    color: #9aa39f;
  }

  .art-prep-directory-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .art-prep-directory-search input {
    min-width: 0;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid #d5dce1;
    border-radius: 6px;
    font: inherit;
  }

  .art-prep-directory-state {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
  }

  .art-prep-directory-list {
    display: grid;
    gap: 6px;
    min-height: 170px;
    max-height: 430px;
    overflow: auto;
  }

  .art-prep-directory-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid #dbe3df;
    border-radius: 6px;
    background: #ffffff;
    color: var(--ink);
    text-align: left;
  }

  .art-prep-directory-row:hover {
    border-color: #9dc2ae;
    background: #f6fbf8;
  }

  .art-prep-directory-row > span {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .art-prep-directory-row strong,
  .art-prep-directory-row small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .art-prep-directory-row strong {
    font-size: 13px;
  }

  .art-prep-directory-row small,
  .art-prep-directory-row em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
  }

  .art-prep-directory-row i {
    color: var(--green-dark);
    font-size: 18px;
    font-style: normal;
  }

  .art-prep-directory-row.is-parent {
    background: #f5f7f6;
  }

  .art-prep-directory-footer {
    padding-top: 10px;
    border-top: 1px solid #e0e6e3;
  }

  .art-prep-directory-footer span {
    overflow: hidden;
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .art-prep-photo-tools p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
  }

  .art-prep-photo-suggestions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 9px;
  }

  .art-prep-manual-photo {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
    padding: 13px;
    border: 1px solid #bed7ca;
    border-radius: 7px;
    background: #ffffff;
  }

  .art-prep-manual-photo[hidden] {
    display: none;
  }

  .art-prep-manual-photo-head,
  .art-prep-manual-photo-search {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .art-prep-manual-photo-head {
    justify-content: space-between;
  }

  .art-prep-manual-photo-head div {
    display: grid;
    gap: 2px;
  }

  .art-prep-manual-photo-head strong {
    color: var(--green-dark);
    font-size: 14px;
  }

  .art-prep-manual-photo-head span,
  .art-prep-manual-photo-state {
    color: var(--muted);
    font-size: 12px;
  }

  .art-prep-manual-photo-state {
    margin: 0;
    font-weight: 700;
  }

  .art-prep-manual-photo-search input {
    flex: 1;
    min-width: 0;
  }

  .art-prep-photo-source {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid #d6e2dc;
    border-radius: 7px;
    background: #ffffff;
  }

  .art-prep-photo-source-head,
  .art-prep-photo-source-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }

  .art-prep-photo-source-head strong {
    font-size: 14px;
  }

  .art-prep-photo-source-head span,
  .art-prep-photo-source-meta {
    color: var(--muted);
    font-size: 12px;
  }

  .art-prep-photo-source.ready {
    border-color: #9bc9b1;
    background: #fbfffc;
  }

  .art-prep-jump-nav {
    position: sticky;
    top: 57px;
    z-index: 3;
    display: flex;
    gap: 2px;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    background: rgba(247, 245, 239, 0.97);
  }

  .art-prep-jump-nav button {
    min-height: 43px;
    padding: 0 17px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--muted);
    font-weight: 850;
    white-space: nowrap;
  }

  .art-prep-jump-nav button:hover {
    border-bottom-color: var(--green);
    color: var(--green-dark);
  }

  .art-prep-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 24px;
    align-items: start;
    padding-top: 20px;
  }

  .art-prep-form {
    display: flex;
    min-width: 0;
    flex-direction: column;
  }

  .art-prep-form [data-art-prep-section="images"] { order: 1; }
  .art-prep-form [data-art-prep-section="skus"] { order: 2; }
  .art-prep-form [data-art-prep-section="facts"] { order: 3; }
  .art-prep-form [data-art-prep-section="copy"] { order: 4; }
  .art-prep-form [data-art-prep-section="main-images"] { order: 5; }
  .art-prep-form [data-art-prep-section="detail-copy"] { order: 6; }
  .art-prep-form [data-art-prep-section="notes"] { order: 7; }

  .art-prep-hero-picker {
    display: grid;
    grid-template-columns: minmax(210px, 0.8fr) minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 14px;
    border: 1px solid #c9d9d1;
    border-radius: 8px;
    background: #f7faf8;
  }

  .art-prep-plan-image {
    position: relative;
    display: grid;
    overflow: hidden;
    place-items: center;
    border: 1px dashed #9ebcad;
    border-radius: 7px;
    background: #ffffff;
    color: var(--green-dark);
    cursor: pointer;
  }

  .art-prep-plan-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .art-prep-plan-image small {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 4px 7px;
    border: 1px solid rgba(43, 101, 76, 0.2);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--green-dark);
    font-size: 11px;
    font-weight: 800;
  }

  .art-prep-image-name {
    overflow: hidden;
    color: #203f31;
    font-size: 9px;
    font-style: normal;
    font-weight: 750;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .art-prep-plan-image .art-prep-image-name,
  .art-prep-sku-image .art-prep-image-name,
  .art-prep-hero-gallery .art-prep-image-name,
  .art-prep-selection-thumbs .art-prep-image-name {
    position: absolute;
    top: 4px;
    right: 4px;
    left: 4px;
    padding: 3px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.9);
    text-align: left;
    backdrop-filter: blur(7px);
  }

  .art-prep-hero-gallery .art-prep-image-name,
  .art-prep-selection-thumbs .art-prep-image-name {
    right: 27px;
  }

  .art-prep-hero-picker strong {
    font-size: 16px;
  }

  .art-prep-hero-picker strong span {
    margin-left: 5px;
    color: var(--muted);
    font-size: 11px;
  }

  .art-prep-hero-picker p {
    margin: 5px 0 8px;
    color: var(--muted);
    font-size: 13px;
  }

  .art-prep-hero-picker em {
    display: block;
    overflow: hidden;
    color: var(--green-dark);
    font-size: 12px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .art-prep-hero-gallery {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    min-height: 82px;
  }

  .art-prep-hero-gallery figure,
  .art-prep-selection-thumbs figure {
    position: relative;
    overflow: hidden;
    margin: 0;
    border: 1px solid #d7e0db;
    border-radius: 5px;
    background: #ffffff;
  }

  .art-prep-hero-gallery img,
  .art-prep-selection-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .art-prep-hero-gallery figure > button,
  .art-prep-selection-thumbs figure > button {
    position: absolute;
    top: 3px;
    right: 3px;
    display: grid;
    width: 21px;
    min-height: 21px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: rgba(31, 38, 34, 0.72);
    color: #ffffff;
    font-size: 14px;
  }

  .art-prep-gallery-empty {
    display: grid;
    grid-column: 1 / -1;
    min-height: 82px;
    place-items: center;
    border: 1px dashed #b9c9c1;
    border-radius: 6px;
    color: var(--muted);
    font-size: 12px;
  }

  .art-prep-selection-panel {
    margin-top: 10px;
    border: 1px solid #d7e0db;
    border-radius: 7px;
    background: #ffffff;
  }

  .art-prep-selection-panel summary {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 13px;
    cursor: pointer;
    list-style: none;
  }

  .art-prep-selection-panel summary::-webkit-details-marker { display: none; }

  .art-prep-selection-panel summary > span:first-child {
    display: grid;
    gap: 2px;
  }

  .art-prep-selection-panel summary small {
    color: var(--muted);
    font-size: 11px;
  }

  .art-prep-selection-summary {
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 850;
    text-align: right;
  }

  .art-prep-selection-groups {
    display: grid;
    border-top: 1px solid var(--line);
  }

  .art-prep-selection-group {
    display: grid;
    grid-template-columns: minmax(145px, 0.7fr) minmax(180px, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 9px 13px;
  }

  .art-prep-selection-group + .art-prep-selection-group { border-top: 1px solid #edf0ee; }
  .art-prep-selection-group > div:first-child { display: grid; gap: 2px; }
  .art-prep-selection-group > div:first-child span { color: var(--muted); font-size: 11px; }

  .art-prep-selection-thumbs {
    display: flex;
    gap: 5px;
    min-width: 0;
  }

  .art-prep-selection-thumbs figure {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
  }

  .art-prep-selection-thumbs > span {
    display: grid;
    width: 42px;
    place-items: center;
    color: var(--muted);
    font-size: 11px;
  }

  .art-prep-section {
    scroll-margin-top: 116px;
    padding: 0 0 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
  }

  .art-prep-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px;
  }

  .art-prep-section-heading h2 {
    margin: 0 0 3px;
    font-size: 20px;
  }

  .art-prep-section-state {
    display: inline-flex;
    margin-left: 7px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #eef1f0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    vertical-align: 2px;
  }

  .art-prep-section-state.complete {
    background: #e4f3ea;
    color: var(--green-dark);
  }

  .art-prep-section-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
  }

  .art-prep-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .art-prep-field-grid .wide {
    grid-column: 1 / -1;
  }

  .art-prep-field-grid textarea,
  .art-prep-repeat-row textarea {
    min-height: 92px;
    line-height: 1.55;
    resize: vertical;
  }

  .art-prep-repeat-list {
    display: grid;
    gap: 8px;
  }


  .art-prep-copy-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }

  .art-prep-related-products {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -3px 0 13px;
    padding: 8px 10px;
    border-left: 3px solid #9bc8b3;
    background: #f4f9f6;
  }

  .art-prep-related-products > span {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
  }

  .art-prep-related-products > div {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 6px;
  }

  .art-prep-related-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 5px 4px 9px;
    border: 1px solid #cfe0d7;
    border-radius: 999px;
    background: #fff;
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 800;
  }

  .art-prep-related-chip small { color: var(--muted); font-size: 10px; }
  .art-prep-related-chip button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: #edf4f0; color: var(--muted); font-size: 15px; line-height: 1; }

  .art-prep-reference-import {
    margin: -2px 0 16px;
    padding: 14px;
    border: 1px solid #cbdcd3;
    border-radius: 7px;
    background: #f8fbf9;
  }

  .art-prep-reference-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }

  .art-prep-reference-head strong { color: var(--ink); font-size: 16px; }
  .art-prep-reference-head p, .art-prep-reference-note { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
  .icon-button.compact { width: 32px; height: 32px; min-width: 32px; font-size: 20px; }

  .art-prep-reference-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    color: #59665f;
    font-size: 12px;
    font-weight: 800;
  }

  .art-prep-reference-search input {
    width: 100%;
    min-height: 39px;
    padding: 8px 10px;
    border: 1px solid #d1ddd7;
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
  }

  .art-prep-reference-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 300px;
    margin-top: 10px;
    overflow: auto;
  }

  .art-prep-reference-result {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px;
    border: 1px solid #d6e0db;
    border-radius: 7px;
    background: #fff;
    color: inherit;
    text-align: left;
  }

  .art-prep-reference-result:hover { border-color: #80b79c; background: #f3faf6; }
  .art-prep-reference-result img, .art-prep-reference-result-placeholder { width: 48px; height: 48px; border-radius: 5px; background: #edf2ef; object-fit: cover; }
  .art-prep-reference-result-placeholder { display: grid; place-items: center; color: var(--muted); font-size: 11px; font-weight: 800; }
  .art-prep-reference-result > span { display: grid; min-width: 0; gap: 3px; }
  .art-prep-reference-result strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  .art-prep-reference-result small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
  .art-prep-reference-result i { color: var(--green); font-size: 22px; font-style: normal; }
  .art-prep-reference-empty { grid-column: 1 / -1; margin: 0; padding: 24px 12px; color: var(--muted); text-align: center; font-size: 12px; }
  .art-prep-reference-empty.error { color: var(--danger); }

  .art-prep-reference-preview { margin-top: 12px; padding-top: 12px; border-top: 1px solid #d9e3de; }
  .art-prep-reference-source { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
  .art-prep-reference-source > div { display: grid; gap: 2px; }
  .art-prep-reference-source span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
  .art-prep-reference-source strong { color: var(--ink); font-size: 15px; }
  .art-prep-reference-source p { max-width: 65%; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; text-align: right; }
  .art-prep-reference-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
  .art-prep-reference-fields label { display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 7px 9px; border: 1px solid #d7e1dc; border-radius: 6px; background: #fff; color: var(--green-dark); font-size: 12px; font-weight: 800; }
  .art-prep-reference-fields label small { margin-left: auto; color: var(--muted); font-size: 10px; font-weight: 600; }
  .art-prep-reference-fields label:has(input:disabled) { opacity: .45; }
  .art-prep-reference-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

  .art-prep-sku-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -2px 0 12px;
  }

  .art-prep-sku-tools input {
    min-width: 220px;
    min-height: 38px;
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #d5dce1;
    border-radius: 7px;
    background: #ffffff;
    font-size: 14px;
  }

  .art-prep-empty-row {
    margin: 0;
    padding: 16px;
    border: 1px dashed #cbd6d0;
    border-radius: 7px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
  }

  .art-prep-repeat-row {
    display: grid;
    grid-template-columns: 34px repeat(3, minmax(0, 1fr)) 1.4fr auto;
    gap: 8px;
    align-items: start;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
  }

  .art-prep-repeat-row.is-plan {
    grid-template-columns: 34px 96px 160px minmax(0, 1fr) minmax(0, 1fr) auto;
  }

  .art-prep-plan-image {
    width: 96px;
    aspect-ratio: 1;
  }

  .art-prep-repeat-row.is-detail-copy {
    grid-template-columns: 34px 190px minmax(0, 1fr) auto;
  }

  .art-prep-sku-row {
    grid-template-columns: 34px minmax(104px, auto) minmax(0, 1fr) auto;
    align-items: center;
  }

  .art-prep-sku-images {
    display: flex;
    gap: 7px;
  }

  .art-prep-sku-images > div {
    display: grid;
    gap: 3px;
  }

  .art-prep-sku-images b {
    color: var(--muted);
    font-size: 10px;
    text-align: center;
  }

  .art-prep-sku-image {
    position: relative;
    display: grid;
    width: 104px;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid #d5dce1;
    border-radius: 6px;
    background: #f2f5f3;
    padding: 0;
    cursor: pointer;
    appearance: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
  }

  .art-prep-sku-image:hover,
  .art-prep-sku-image:focus-visible {
    border-color: var(--green);
    background: #edf5f1;
    box-shadow: 0 0 0 3px rgba(47, 137, 101, 0.12);
    outline: none;
  }

  .art-prep-sku-image:disabled {
    cursor: default;
    opacity: 0.72;
  }

  .art-prep-sku-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .art-prep-sku-image span {
    display: grid;
    place-items: center;
    color: #87918b;
    font-size: 12px;
    font-weight: 750;
  }

  .art-prep-sku-image small {
    position: absolute;
    right: 5px;
    bottom: 5px;
    min-height: 28px;
    padding: 0 8px;
    border: 1px solid rgba(43, 101, 76, 0.22);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 850;
    backdrop-filter: blur(8px);
  }

  .art-prep-sku-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    min-width: 0;
  }

  .art-prep-sku-fields .wide {
    grid-column: 1 / -1;
  }

  .art-prep-ab-toggle {
    display: flex;
    min-height: 28px;
    align-items: center;
    gap: 7px;
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 800;
  }

  .art-prep-ab-toggle input {
    width: 16px;
    min-height: 16px;
    margin: 0;
  }

  .art-prep-ab-toggle small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
  }

  .art-prep-sku-image-modal {
    z-index: 80;
  }

  .art-prep-sku-image-panel {
    width: min(920px, calc(100vw - 28px));
    height: min(780px, calc(100vh - 36px));
    max-height: min(780px, calc(100vh - 36px));
    grid-template-rows: auto auto auto minmax(120px, 1fr) auto;
    overflow: hidden;
  }

  .art-prep-sku-image-panel .modal-heading p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
  }

  .art-prep-sku-image-source-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 2px;
  }

  .art-prep-sku-image-source-tabs > button:not(.secondary-button) {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid #d5dce1;
    border-radius: 6px;
    background: #ffffff;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
  }

  .art-prep-sku-image-source-tabs > button.active {
    border-color: #8fc0a6;
    background: #edf7f0;
    color: var(--green-dark);
  }

  .art-prep-sku-image-source-tabs .secondary-button {
    margin-left: auto;
  }

  .art-prep-custom-photo-source {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .art-prep-custom-photo-source input {
    min-width: 0;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid #d5dce1;
    border-radius: 6px;
    font: inherit;
  }

  .art-prep-sku-image-library {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 9px;
    min-height: 0;
    max-height: none;
    overflow: auto;
    padding: 2px;
  }

  .art-prep-sku-library-image {
    position: relative;
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 5px;
    border: 1px solid #d9e0dc;
    border-radius: 6px;
    background: #ffffff;
    color: var(--ink);
    text-align: left;
  }

  .art-prep-sku-library-image.selected {
    border-color: var(--green);
    box-shadow: inset 0 0 0 2px var(--green);
  }

  .art-prep-sku-library-image:hover {
    border-color: #75ab8f;
    box-shadow: 0 4px 12px rgba(45, 97, 73, 0.1);
  }

  .art-prep-sku-library-image img {
    width: 100%;
    height: 150px;
    border-radius: 4px;
    background: #eef1ef;
    object-fit: contain;
  }

  .art-prep-sku-library-image span {
    overflow: hidden;
    color: #59645f;
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .art-prep-sku-library-image i {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    min-width: 25px;
    min-height: 25px;
    padding: 0 5px;
    place-items: center;
    border-radius: 50%;
    background: var(--green);
    color: #ffffff;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
  }

  .art-prep-image-picker-footer {
    position: sticky;
    z-index: 3;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    padding: 10px 0 0;
    border-top: 1px solid var(--line);
    background: #ffffff;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
  }

  .art-prep-image-picker-footer .primary-button {
    flex: 0 0 auto;
    min-width: 156px;
  }

  .art-prep-repeat-index {
    display: grid;
    min-height: 42px;
    place-items: center;
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 900;
  }

  .art-prep-row-actions {
    display: grid;
    gap: 3px;
  }

  .art-prep-row-actions button {
    width: 34px;
    min-height: 26px;
    padding: 0;
    border: 1px solid #d7dfdb;
    border-radius: 5px;
    background: #ffffff;
    color: var(--green-dark);
    font-weight: 850;
  }

  .art-prep-row-actions .art-prep-remove-row {
    color: var(--coral);
    font-size: 20px;
  }

  .art-prep-remove-row {
    width: 36px;
    min-height: 36px;
    border: 0;
    background: transparent;
    color: var(--coral);
    font-size: 22px;
  }

  .art-prep-confirm {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    color: var(--green-dark);
    font-weight: 850;
  }

  .art-prep-gate {
    position: sticky;
    top: 120px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
  }

  .art-prep-gate-head,
  .art-prep-gate-footer {
    padding: 15px;
  }

  .art-prep-gate-head {
    border-bottom: 1px solid var(--line);
  }

  .art-prep-gate-head h2 {
    margin: 0 0 4px;
    font-size: 18px;
  }

  .art-prep-gate-head p,
  .art-prep-gate-footer p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
  }

  .art-prep-progress {
    height: 7px;
    margin-top: 11px;
    overflow: hidden;
    border-radius: 999px;
    background: #e7ece9;
  }

  .art-prep-progress i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--green);
    transition: width 180ms ease;
  }

  .art-prep-check {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 8px;
    padding: 10px 15px;
    border-bottom: 1px solid #edf0f2;
    font-size: 13px;
  }

  .art-prep-check i {
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border: 2px solid #c4cbd0;
    border-radius: 50%;
    color: transparent;
    font-size: 10px;
    font-style: normal;
  }

  .art-prep-check.complete i {
    border-color: var(--green);
    background: var(--green);
    color: #ffffff;
  }

  .art-prep-check b,
  .art-prep-check span {
    display: block;
  }

  .art-prep-check span {
    margin-top: 2px;
    color: var(--muted);
  }

  .art-prep-gate-footer {
    border-top: 1px solid var(--line);
  }

  .art-prep-gate-footer p {
    margin-top: 8px;
    color: var(--coral);
    text-align: center;
  }

  .art-task-manage[data-art-prep-section="publish"] {
    margin-top: 24px;
    scroll-margin-top: 82px;
  }

  @media (max-width: 980px) {
    .art-prep-layout {
      grid-template-columns: minmax(0, 1fr);
    }

    .art-prep-gate {
      position: static;
    }

  }

  @media (max-width: 680px) {
    .art-prep-topbar {
      grid-template-columns: auto minmax(0, 1fr) auto;
      padding: 8px 12px;
    }

    .art-prep-topbar-title small,
    .art-prep-topbar-actions .secondary-button:first-child {
      display: none;
    }

    .art-prep-page {
      padding: 14px 14px 36px;
    }

    .art-prep-product-head {
      grid-template-columns: 68px minmax(0, 1fr);
      gap: 11px;
    }

    .art-prep-product-head img {
      width: 68px;
    }

    .art-prep-product-head h1 {
      font-size: 23px;
    }

    .art-prep-workflow {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .art-prep-workflow button {
      display: grid;
      justify-items: center;
      min-width: 0;
      padding: 9px 5px;
      text-align: center;
    }

    .art-prep-workflow small {
      display: none;
    }

    .art-prep-hero-picker {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      padding: 10px;
    }

    .art-prep-hero-gallery {
      grid-column: 1 / -1;
      grid-row: 2;
      min-height: 74px;
    }

    .art-prep-gallery-empty {
      min-height: 74px;
    }

    .art-prep-hero-picker > div:nth-child(2) {
      grid-column: 1;
      grid-row: 1;
    }

    .art-prep-hero-picker > button {
      grid-column: 2;
      grid-row: 1;
    }

    .art-prep-selection-panel summary {
      align-items: flex-start;
    }

    .art-prep-selection-panel summary small {
      display: none;
    }

    .art-prep-selection-group {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
    }

    .art-prep-selection-thumbs {
      grid-column: 1 / -1;
      grid-row: 2;
      overflow: hidden;
    }

    .art-prep-save-state {
      grid-column: 1 / -1;
    }

    .art-prep-photo-band,
    .art-prep-field-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .art-prep-directory-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .art-prep-output-directory {
      grid-column: auto;
    }

    .art-prep-photo-overview {
      align-items: stretch;
      flex-direction: column;
    }

    .art-prep-photo-overview .art-prep-photo-state {
      width: 100%;
    }

    .art-prep-photo-overview > p {
      margin: 0;
      text-align: left;
    }

    .art-prep-field-grid .wide {
      grid-column: auto;
    }

    .art-prep-photo-band input,
    .art-prep-photo-band select,
    .art-prep-field-grid input,
    .art-prep-field-grid textarea,
    .art-prep-repeat-row input,
    .art-prep-repeat-row textarea {
      font-size: 16px;
    }

    .art-prep-jump-nav {
      top: 54px;
      margin-inline: -14px;
      padding-inline: 14px;
    }

    .art-prep-section-heading {
      align-items: stretch;
      flex-direction: column;
    }


    .art-prep-photo-tools,
    .art-prep-sku-tools {
      align-items: stretch;
      flex-direction: column;
    }

    .art-prep-photo-tools .secondary-button,
    .art-prep-sku-tools button {
      width: 100%;
    }

    .art-prep-copy-heading-actions { width: 100%; justify-content: flex-start; }
    .art-prep-copy-heading-actions button { flex: 1; }
    .art-prep-related-products { align-items: flex-start; flex-direction: column; }
    .art-prep-reference-search { grid-template-columns: minmax(0, 1fr); gap: 5px; }
    .art-prep-reference-results, .art-prep-reference-fields { grid-template-columns: minmax(0, 1fr); }
    .art-prep-reference-source { flex-direction: column; gap: 6px; }
    .art-prep-reference-source p { max-width: none; text-align: left; }
    .art-prep-reference-actions { display: grid; grid-template-columns: 1fr 1fr; }

    .art-prep-manual-photo-search {
      align-items: stretch;
      flex-direction: column;
    }

    .art-prep-manual-photo-search .primary-button {
      width: 100%;
    }

    .art-task-manage-head,
    .art-task-link {
      align-items: stretch;
      flex-direction: column;
    }

    .art-task-manage-head .primary-button,
    .art-task-link .secondary-button {
      width: 100%;
    }

    .art-task-publish-form {
      grid-template-columns: minmax(0, 1fr);
    }

    .art-task-publish-actions {
      justify-content: stretch;
    }

    .art-task-publish-actions button {
      flex: 1;
    }

    .art-prep-sku-tools input {
      min-width: 0;
    }

    .art-prep-repeat-row,
    .art-prep-repeat-row.is-plan {
      grid-template-columns: 30px minmax(0, 1fr) auto;
    }

    .art-prep-repeat-row.is-plan .art-prep-plan-image {
      grid-column: 2;
      grid-row: 1 / span 3;
      width: 82px;
    }

    .art-prep-repeat-row.is-plan {
      grid-template-columns: 30px 82px minmax(0, 1fr) auto;
    }

    .art-prep-repeat-row.is-plan input,
    .art-prep-repeat-row.is-plan textarea {
      grid-column: 3 / -1;
    }


    .art-prep-repeat-row.is-detail-copy {
      grid-template-columns: 30px minmax(0, 1fr) auto;
    }

    .art-prep-sku-row {
      grid-template-columns: 28px minmax(0, 1fr) auto;
      align-items: start;
    }

    .art-prep-sku-row .art-prep-sku-images {
      grid-column: 2;
      grid-row: 1;
      flex-wrap: wrap;
    }

    .art-prep-sku-row .art-prep-sku-image {
      width: 82px;
    }

    .art-prep-sku-row .art-prep-sku-fields {
      grid-column: 2 / -1;
      grid-row: 2;
      grid-template-columns: minmax(0, 1fr);
      width: 100%;
      margin-top: 2px;
    }

    .art-prep-sku-row .art-prep-sku-fields input {
      grid-column: auto;
      font-size: 16px;
    }

    .art-prep-sku-row .art-prep-row-actions {
      display: flex;
      grid-column: 3;
      grid-row: 1;
      justify-content: flex-end;
    }

    .art-prep-repeat-row input,
    .art-prep-repeat-row textarea {
      grid-column: 2 / -1;
    }

    .art-prep-repeat-row .art-prep-remove-row {
      grid-column: 3;
      grid-row: 1;
    }

    .art-prep-repeat-row .art-prep-row-actions {
      grid-column: 3;
      grid-row: 1;
    }

    .art-prep-sku-row .art-prep-row-actions {
      grid-column: 3;
    }

    .art-prep-sku-image-panel {
      width: 100%;
      height: 88vh;
      max-height: 88vh;
    }

    .art-prep-sku-image-source-tabs .secondary-button {
      margin-left: 0;
    }

    .art-prep-sku-image-library {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      max-height: 52vh;
    }

    .art-prep-sku-library-image img {
      height: 116px;
    }

    .art-prep-custom-photo-source {
      grid-template-columns: minmax(0, 1fr);
    }

    .art-prep-directory-panel {
      width: 100%;
      max-height: 88vh;
    }

    .art-prep-directory-row {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .art-prep-directory-row em {
      display: none;
    }

    .art-prep-directory-footer {
      align-items: stretch;
      flex-direction: column;
    }

    .art-prep-image-picker-footer {
      box-shadow: 0 -10px 18px rgba(255, 255, 255, 0.94);
    }
  }

  .modal-screen .art-prep-sku-image-panel {
    width: min(980px, calc(100vw - 28px));
  }

  .modal-screen .art-prep-directory-panel {
    width: min(760px, calc(100vw - 28px));
  }

  .art-prep-sku-image-panel .modal-heading,
  .art-prep-directory-panel .modal-heading {
    position: relative;
    align-items: flex-start;
    flex-direction: row;
    padding-right: 46px;
  }

  .art-prep-sku-image-panel .modal-heading > div,
  .art-prep-directory-panel .modal-heading > div {
    min-width: 0;
  }

  .art-prep-sku-image-panel .modal-heading > .icon-button,
  .art-prep-directory-panel .modal-heading > .icon-button {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    width: 36px;
    min-height: 36px;
    padding: 0;
    place-items: center;
  }

  .art-prep-sku-image-library > .art-prep-empty-row {
    grid-column: 1 / -1;
    width: 100%;
  }

  @media (max-width: 680px) {
    .modal-screen .art-prep-sku-image-panel,
    .modal-screen .art-prep-directory-panel {
      width: 100%;
    }
  }
}

@layer views {
  .art-prep-sku-images { flex-wrap: wrap; align-items: start; gap: 10px; }
  .art-prep-sku-images > div { width: 104px; align-content: start; }
  .art-prep-sku-images b { min-height: 16px; }
  .art-prep-fabric-image b span { font-weight: 400; color: #819087; margin-left: 3px; }
  .art-prep-fabric-actions { display: flex; gap: 6px; }
  .art-prep-fabric-actions button { min-height: 27px; min-width: 0; padding: 3px 8px; font-size: 12px; line-height: 20px; }
  .art-prep-fabric-actions > button:first-child { flex: 1; }
  .art-prep-fabric-remove { background: transparent; color: #77837b; border: 1px solid #d9e2dc; border-radius: 6px; cursor: pointer; }
  .art-prep-fabric-remove:hover { color: #ae4937; background: #fff5f2; }
  .art-fabric-crop-dialog { width: min(900px, 94vw); max-height: 94dvh; box-sizing: border-box; overflow: auto; padding: 24px; border: 1px solid #cbdad1; border-radius: 18px; color: #243b2e; }
  .art-fabric-crop-dialog::backdrop { background: #13271bb3; }
  .art-fabric-crop-heading { display: flex; gap: 12px; justify-content: space-between; align-items: start; margin-bottom: 16px; }
  .art-fabric-crop-heading h2 { margin: 0 0 6px; font-size: 22px; }
  .art-fabric-crop-heading p { margin: 0; font-size: 13px; color: #66786d; }
  .art-fabric-ratio { white-space: nowrap; background: #edf5ef; color: #34765a; padding: 5px 10px; border-radius: 20px; font-size: 12px; }
  .art-fabric-crop-layout { display: grid; grid-template-columns: minmax(0,1fr) 150px; gap: 20px; }
  .art-fabric-crop-stage { height: clamp(260px, 52dvh, 500px); min-width: 0; background: #17251e; overflow: hidden; border-radius: 10px; }
  .art-fabric-crop-stage > img { display: block; max-width: 100%; max-height: 100%; }
  .art-fabric-crop-layout aside { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
  .art-fabric-crop-layout aside small { color: #7b8880; line-height: 1.6; }
  .art-fabric-preview-frame { width: 150px; height: 150px; flex-shrink: 0; overflow: hidden; border-radius: 8px; }
  .art-fabric-crop-preview { width: 150px; height: 150px; overflow: hidden; border-radius: 8px; background: #eef3ef; }
  .art-fabric-crop-toolbar { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
  .art-fabric-crop-toolbar > span { margin-left: auto; font-size: 12px; color: #7b8880; }
  .art-fabric-crop-dialog [data-crop-status] { font-size: 13px; color: #66786d; min-height: 20px; margin: 12px 0; }
  .art-fabric-crop-actions { display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid #e2e9e4; padding-top: 16px; }
  @media (max-width: 700px) {
    .art-prep-sku-row .art-prep-sku-images > div { width: 82px; }
    .art-prep-sku-images { gap: 6px; }
    .art-fabric-crop-dialog { padding: 16px; }
    .art-fabric-crop-heading { flex-wrap: wrap; }
    .art-fabric-crop-layout { grid-template-columns: minmax(0,1fr); gap: 12px; }
    .art-fabric-crop-stage { height: 42dvh; min-height: 240px; }
    .art-fabric-crop-layout aside { flex-direction: row; align-items: center; font-size: 12px; }
    .art-fabric-preview-frame { width: 64px; height: 64px; order: -1; }
    .art-fabric-crop-preview { transform: scale(0.4266667); transform-origin: top left; }
    .art-fabric-crop-layout aside strong { white-space: nowrap; }
    .art-fabric-crop-toolbar > span { display: none; }
  }
}