.canvas-ai-layout-layer-stage { position: absolute; pointer-events: none; transform-origin: center; }
.canvas-ai-layout-layer-item { position: absolute; box-sizing: border-box; min-width: 2px; min-height: 2px; pointer-events: auto; cursor: move; transform-origin: center; user-select: none; }
.canvas-ai-layout-generated-image { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.canvas-logo-popover {
  position: fixed;
  z-index: 1500;
  box-sizing: border-box;
  width: min(440px, calc(100vw - 16px));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 16px;
  border: 1px solid #e8edf5;
  border-radius: var(--rect-radius, 8px);
  background: #fff;
  color: #42516a;
  box-shadow: 0 8px 28px rgb(31 55 78 / 14%);
  font: 14px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif;
}
.canvas-logo-popover-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.canvas-logo-popover-header strong { font-size: 16px; font-weight: 600; }
.canvas-logo-popover button {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 0; margin: 0; padding: 8px 12px;
  border: 1px solid #e8edf5; border-radius: var(--rect-radius, 8px);
  background: #fff; color: inherit; font: inherit; text-align: center; cursor: pointer;
}
.canvas-logo-popover button:hover:not(:disabled) { background: #f7fbff; }
.canvas-logo-popover button:active:not(:disabled) { background: #f0fafe; }
.canvas-logo-popover button:focus-visible { outline: 2px solid #00afe9; outline-offset: 2px; }
.canvas-logo-popover button:disabled { cursor: default; opacity: .5; }
.canvas-logo-popover .canvas-logo-close { width: 28px; height: 28px; padding: 0; border: 0; font-size: 22px; }
.canvas-logo-options { display: grid; grid-template-columns: minmax(0, 1fr) 96px; align-items: stretch; gap: 12px; }
.canvas-logo-variants {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: 108px;
  align-content: start; gap: 8px; min-width: 0; height: 226px;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent;
}
.canvas-logo-popover .canvas-logo-variant { flex-direction: column; gap: 6px; padding: 6px; font-size: 12px; }
.canvas-logo-popover .canvas-logo-variant[aria-pressed="true"],
.canvas-logo-positions button[aria-pressed="true"] { border-color: #00afe9; background: #f0fafe; }
.canvas-logo-preview { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; border-radius: var(--rect-radius, 8px); background: linear-gradient(135deg, rgba(0, 175, 233, 0.14), rgba(116, 215, 255, 0.18)), #f5fbff; }
.canvas-logo-preview img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.canvas-logo-variant-label { max-width: 100%; line-height: 15px; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.canvas-logo-empty { grid-column: 1 / -1; align-self: center; text-align: center; color: #64748b; }
.canvas-logo-positions { display: grid; grid-template-columns: minmax(0,1fr); align-content: start; gap: 4px; padding-left: 12px; border-left: 1px solid #e8edf5; }
.canvas-logo-positions button { height: 32px; padding: 0 8px; }
.canvas-logo-status { margin: 8px 0 0; font-size: 12px; color: #64748b; overflow-wrap: anywhere; }
.canvas-logo-status:empty { display: none; }
.canvas-logo-status.is-error { color: #cd140f; }
.canvas-logo-popover .canvas-logo-retry { margin-top: 8px; height: 32px; }
.canvas-logo-popover [hidden] { display: none; }