.td-pattern-tile-editor {
  display: grid;
  gap: 14px;
  min-width: 0;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid #e7dfe8;
  border-radius: 10px;
  background: #fff;
}

.td-pattern-tile-heading {
  display: grid;
  gap: 3px;
  color: #4f4657;
}

.td-pattern-tile-heading strong { font-size: 14px; }

.td-pattern-tile-heading span,
.td-pattern-tile-help {
  margin: 0;
  color: #68636d;
  font-size: 12px;
  line-height: 1.5;
}

.td-pattern-tile-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid #d6cad9;
  border-radius: 8px;
  background-color: #eae6ed;
  background-image: linear-gradient(90deg, transparent calc(50% - .5px), #d1c8d4 calc(50% - .5px), #d1c8d4 calc(50% + .5px), transparent calc(50% + .5px)), linear-gradient(transparent calc(50% - .5px), #d1c8d4 calc(50% - .5px), #d1c8d4 calc(50% + .5px), transparent calc(50% + .5px));
  touch-action: none;
}

.td-pattern-tile-item {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: grab;
}

.td-pattern-tile-item:active { cursor: grabbing; }
.td-pattern-tile-item:hover:not(.is-selected) { border-color: #bd4a78; }
.td-pattern-tile-item.is-selected { border-color: #bd4a78; box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(127, 39, 75, .18); }
.td-pattern-tile-item:focus-visible { outline: 2px solid #bd4a78; outline-offset: 3px; }
.td-pattern-tile-item.is-selected:focus-visible { outline-color: #fff; }
.td-pattern-tile-item img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(60, 46, 64, .24)); }

.td-pattern-tile-transform { display: grid; gap: 10px; min-width: 0; padding-top: 12px; border-top: 1px solid #eee8f0; }
.td-pattern-tile-section-label { color: #4f4657; font-size: 12px; }
.td-pattern-tile-color-control { display: flex; align-items: center; gap: 8px; min-width: 0; }
.td-pattern-tile-color-control > .td-color-plus-wrap { flex: 1 1 auto; min-width: 0; }
.td-pattern-tile-reset { flex: 0 0 auto; min-height: 32px; padding: 4px 7px; border: 1px solid #d6c7cf; border-radius: 8px; background: #fff; color: #9c2d62; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.td-pattern-tile-reset:hover { border-color: #bd4a78; background: #fff8fb; }
.td-pattern-tile-reset:focus-visible { outline: 2px solid #bd4a78; outline-offset: 2px; }
.td-pattern-tile-readonly { color: #756b75; font-size: 12px; }

@media (max-width: 560px) {
  .td-pattern-tile-editor { padding: 10px; }
  .td-pattern-tile-color-control { flex-wrap: wrap; }
}

/* Keep the tile draft in the same focused right-panel flow as canvas selection.
   The regular editor stays mounted so cancel/save retain the original draft. */
.td-app:has(.td-pattern-tile-editor) .td-mobile-template-panel,
.td-app:has(.td-pattern-tile-editor) .td-text-panel,
.td-app:has(.td-pattern-tile-editor) .td-mobile-sheet-head,
.td-app:has(.td-pattern-tile-editor) .td-editor-tool-rail,
.td-app:has(.td-pattern-tile-editor) .td-mobile-bottom-nav,
.td-app:has(.td-pattern-tile-editor) .td-settings-tabs,
.td-app:has(.td-pattern-tile-editor) .td-fill-tabs,
.td-app:has(.td-pattern-tile-editor) .td-original-pattern-root,
.td-app:has(.td-pattern-tile-editor) .td-pattern-color-section,
.td-app:has(.td-pattern-tile-editor) .td-pattern-size-section,
.td-app:has(.td-pattern-tile-editor) .td-pattern-layout-section,
.td-app:has(.td-pattern-tile-editor) .td-field:has(> .td-fill-picker > .td-pattern-panel > .td-pattern-tile-editor) > label,
.td-app:has(.td-pattern-tile-editor) .td-preview-help,
.td-app:has(.td-pattern-tile-editor) .td-settings-panel-text > div > :not(.td-field:has(.td-pattern-tile-editor)) {
  display: none;
}

.td-app:has(.td-pattern-tile-editor) .td-preview-stage { pointer-events: none; }

.td-app:has(.td-pattern-tile-editor) .td-pattern-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.td-app:has(.td-pattern-tile-editor) .td-pattern-tile-editor { margin: 0; }
.td-app:has(.td-pattern-tile-editor) .td-original-pattern-save-actions { order: 10; position: sticky; bottom: 0; z-index: 2; margin: 4px 0 0; padding: 10px 0; background: #fff; }
.td-app:has(.td-pattern-tile-editor) .td-controls-scroll { padding-top: 16px; }

@media (max-width: 1180px) {
  .td-app:has(.td-pattern-tile-editor) { --td-compact-controls-height: min(64vh, 600px) !important; }
  .td-app:has(.td-pattern-tile-editor) .td-controls-column { grid-template-rows: minmax(0, 1fr) 0 !important; }
  .td-app:has(.td-pattern-tile-editor) .td-text-panel { display: none !important; }
  .td-app:has(.td-pattern-tile-editor) .td-controls-scroll { display: block !important; opacity: 1; transform: none; height: 100%; padding-top: 16px !important; }
}