.artwork-picker-open { overflow: hidden; }
.artwork-picker-backdrop { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 42, .36); }
.artwork-picker-dialog { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 12px; box-sizing: border-box; width: min(880px, calc(100vw - 32px)); max-width: calc(100vw - 32px); min-width: 0; max-height: min(760px, calc(100vh - 32px)); padding: 18px; overflow: hidden; border: 1px solid #d3c7b0; border-radius: 10px; background: #fffaf0; box-shadow: 0 14px 34px rgba(36, 59, 74, .24); color: #243b4a; font-family: Georgia, 'Times New Roman', serif; }
.artwork-picker-dialog:focus { outline: none; }
.artwork-picker-dialog h2 { margin: 0; font-size: 21px; font-weight: 400; }
.artwork-picker-status { min-height: 20px; margin: 0; color: #5f594f; font-size: 14px; }
.artwork-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 2px; overscroll-behavior: contain; }
.artwork-picker-item { display: grid; grid-template-rows: auto minmax(44px, auto); min-width: 0; padding: 0; overflow: hidden; border: 1px solid #d3c7b0; border-radius: 7px; background: #fffdf7; color: #243b4a; text-align: left; cursor: pointer; }
.artwork-picker-item:hover, .artwork-picker-item:focus-visible, .artwork-picker-item.is-selected { border-color: #1e66d0; box-shadow: inset 0 0 0 2px rgba(30, 102, 208, .28); }
.artwork-picker-item:focus-visible { outline: 3px solid rgba(30, 102, 208, .28); outline-offset: 2px; }
.artwork-picker-preview { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #e7e1d7; }
.artwork-picker-preview {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e7e1d7;
  }
  .artwork-picker-preview > * {
  width: 100%;
  height: 100%;
}

.artwork-picker-preview svg,
.artwork-picker-preview canvas,
.artwork-picker-preview img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  pointer-events: none;
}

.artwork-picker-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 3px;
  padding: 8px 9px;
  overflow: hidden;
  background: #fffdf7;
}
.artwork-picker-copy strong, .artwork-picker-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artwork-picker-copy strong { font-size: 14px; }
.artwork-picker-copy span { color: #5f594f; font: 13px/1.25 Inter, Arial, sans-serif; }


.artwork-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  min-height: 50px;
  align-items: center;
}

.artwork-picker-actions button { min-height: 38px; padding: 7px 12px; border: 1px solid #234a73; border-radius: 6px; background: #fffaf0; color: #234a73; font: 700 14px/1.2 Inter, Arial, sans-serif; cursor: pointer; }
.artwork-picker-actions .artwork-picker-use { background: #234a73; color: #fffaf0; }
.artwork-picker-actions button:disabled { cursor: default; opacity: .55; }
.artwork-picker-actions button:not(:disabled):hover, .artwork-picker-actions button:not(:disabled):focus-visible { background: #315f8d; color: #fffaf0; }
.artwork-picker-actions button:focus-visible { outline: 3px solid rgba(177, 202, 210, .85); outline-offset: 2px; }

@media (max-width: 560px) {

  .artwork-picker-backdrop {
    box-sizing: border-box;
    padding: 16px 8px;
    place-items: center;
  }

  .artwork-picker-dialog {
    width: calc(100vw - 16px);
    max-width: 100%;
    height: calc(100dvh - 32px);
    max-height: calc(100dvh - 32px);
    padding: 14px;
  }

  .artwork-picker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .artwork-picker-item {
    min-height: 150px;
  }

  .artwork-picker-actions button {
    min-height: 44px;
  }
}