/* The markup canvas follows the selected output size. */
.annotation-canvas {
  aspect-ratio: var(--annotation-aspect-ratio, 1 / 1);
  min-height: 0;
}

.annotation-canvas #annotation-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.annotation-empty {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.annotation-marker {
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.annotation-marker:active {
  cursor: grabbing;
}

.annotation-region {
  position: absolute;
  border: 1px dashed #e05252;
  background: rgba(224, 82, 82, 0.1);
  pointer-events: none;
  z-index: 1;
}

.annotation-canvas::after {
  content: "";
  display: none;
  position: absolute;
  left: var(--annotation-region-x);
  top: var(--annotation-region-y);
  width: var(--annotation-region-width);
  height: var(--annotation-region-height);
  border: 1px dashed #e05252;
  background: rgba(224, 82, 82, 0.1);
  pointer-events: none;
  z-index: 1;
}

.annotation-canvas.annotation-region-drawing::after {
  display: block;
}

@media (max-width: 820px) {
  .annotation-canvas {
    min-height: 0;
  }
}
.annotation-asset-field { display: grid; gap: 8px; margin-top: 12px; min-width: 0; font-size: 13px; font-weight: 600; color: #343537; }
#annotation-asset-select { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #C9CED7; border-radius: 12px; background: #fff; color: #343537; font: inherit; text-align: left; }
#annotation-asset-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#annotation-asset-clear { justify-self: start; border: 0; background: none; padding: 4px 0; color: #6E6E73; font: inherit; }
.annotation-asset-dialog { box-sizing: border-box; width: min(1100px, calc(100vw - 24px)); max-width: 1240px; max-height: calc(100dvh - 24px); margin: auto; padding: 20px; border: 1px solid #D8D8DE; border-radius: 26px; color: #343537; background: #F5F5F7; box-shadow: 0 18px 60px #292a2e33; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Helvetica Neue", Arial, sans-serif; overflow: auto; }
.annotation-asset-dialog::backdrop { background: #292a2e66; }
.annotation-asset-dialog header { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 16px; }
.annotation-asset-dialog h2 { margin: 0; font-size: 21px; line-height: 1.2; font-weight: 680; letter-spacing: -.02em; }
.annotation-asset-dialog p { margin: 8px 0 0; color: #6E6E73; font-size: 13px; }
#annotation-asset-dialog-close { flex-shrink: 0; width: 40px; height: 40px; border: 0; border-radius: 12px; background: #292A2E; color: #fff; font: inherit; font-size: 22px; }
.annotation-asset-dialog button { cursor: pointer; font-family: inherit; }
.annotation-asset-dialog button:focus-visible, #annotation-asset-select:focus-visible { outline: 2px solid #343537; outline-offset: 3px; }
.annotation-asset-dialog .asset-browser { border-radius: 16px; background: #fff; }
.annotation-asset-dialog .asset-source-tabs { padding: 3px; gap: 3px; border-radius: 12px; background: rgba(118,118,128,.12); }
.annotation-asset-dialog .asset-source-tab { min-height: 36px; padding: 6px 17px; border: 0; border-radius: 9px; color: #343537; background: transparent; font-size: 13px; font-weight: 600; }
.annotation-asset-dialog .asset-source-tab.active { background: #fff; box-shadow: 0 1px 4px #292a2e22; }
.annotation-asset-dialog .asset-tree { max-height: 48dvh; }
.annotation-asset-dialog .asset-tree-row { min-height: 40px; font-size: 13px; }
.annotation-asset-dialog .asset-browser-main { max-height: 54dvh; overflow: auto; }
.annotation-asset-dialog .asset-breadcrumb button, .annotation-asset-dialog .asset-dir-card b, .annotation-asset-dialog .row-action { color: #343537; }
.annotation-asset-dialog .asset-tree-row.active { border-color: #343537; color: #343537; background: #eeeef0; }
.annotation-asset-dialog .asset-card, .annotation-asset-dialog .asset-dir-card { border-radius: 12px; overflow: hidden; }
.annotation-asset-dialog .asset-card:hover, .annotation-asset-dialog .asset-card.selected { border-color: #343537; box-shadow: 0 0 0 1px #343537; }
body.asset-picker-open { overflow: hidden; }
@supports (backdrop-filter: blur(12px)) { .annotation-asset-dialog { background: rgba(245,245,247,.96); backdrop-filter: blur(12px); } }
@media (prefers-reduced-transparency: reduce) { .annotation-asset-dialog { background: #F5F5F7; backdrop-filter: none; } }
@media (max-width: 760px) { .annotation-asset-dialog { padding: 12px; border-radius: 20px; } .annotation-asset-dialog .asset-browser-layout { grid-template-columns: 1fr; } .annotation-asset-dialog .asset-tree { max-height: 20dvh; border-right: 0; border-bottom: 1px solid #ddd; } .annotation-asset-dialog .asset-browser-main { max-height: 42dvh; } .annotation-asset-dialog .asset-source-tabs { flex-wrap: wrap; } .annotation-asset-dialog .asset-source-tab { padding-inline: 10px; } }